/* Project global styles. Tailwind utilities load via the CDN script in
   index.html; everything below is hand-written CSS that complements the
   Tailwind layer (resets, glass-panel theme, admin shell, etc.).
*/
html,
body,
#root {
  height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
}

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* Utility for local panels that should scroll without showing a track */
.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Utility to hide scrollbars on any scrollable element */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}


/* ─── Global fixed-header offset ───────────────────────────────────────────
   <main> uses pt-0 so each route's bg can extend behind the transparent
   fixed Header. To prevent route content from being hidden by the 64px-tall
   Header, push the direct child of <main> down via padding-top — padding
   stays inside the element box, so the route's bg still paints all the way
   to the top (under the transparent header), but content sits below it.

   ONE value, every viewport: 4rem (exactly the 64px Header height). No
   breathing-room buffer — toolbars/content sit flush against the header's
   bottom border, so there's no slate strip visible between them on any
   route. Mirrored by CreationShell's `pt-16` so the create-panel routes
   (which opt out of this rule via .creation-bleed-route and apply their
   own internal pt-16) place content at the exact same y-position.

   Home opts out via .slideon-dashboard-main (its hero is designed to
   extend behind the header). */
main:not(.slideon-dashboard-main) > * {
  padding-top: 5rem; /* 64px header + 16px breathing room */
}
@media (min-width: 640px) {
  main:not(.slideon-dashboard-main) > * {
    padding-top: 5.5rem;
  }
}
@media (min-width: 768px) {
  main:not(.slideon-dashboard-main) > * {
    padding-top: 4rem;
  }
}

/* ─── SlideOn Home / Dashboard glass theme ─────────────────────────────────
   Shared here so the main scroll surface and Home cards use one consistent
   light/dark glass system. No grid lines, no card bottom streaks. */
.slideon-dashboard-main,
.slideon-home-shell {
  --home-ink: #080d2f;
  --home-muted: #55618d;
  --home-paper-0: #F7F7FD;
  --home-paper-1: #F3F4FC;
  --home-paper-2: #EEF0FB;
  --home-paper-3: #E8EAF9;
  --home-paper-4: #E2E4F7;
  --home-paper-5: #D9DCF4;
  --home-paper-6: #CFD3EF;
  --home-paper-7: #C5CAE8;
  --home-paper-8: #B8BEDF;
  --home-paper-9: #AEB5D6;
  --home-panel-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(247, 247, 253, 0.54) 42%, rgba(226, 228, 247, 0.38) 100%);
  --home-card-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(243, 244, 252, 0.56) 46%, rgba(207, 211, 239, 0.32) 100%);
  --home-control-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(247, 247, 253, 0.58) 50%, rgba(217, 220, 244, 0.36));
  --home-line: rgba(255, 255, 255, 0.82);
  --home-line-soft: rgba(207, 211, 239, 0.46);
  --home-panel-shadow:
    0 28px 72px rgba(174, 181, 214, 0.32),
    0 9px 30px rgba(255, 255, 255, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -24px 48px rgba(197, 202, 232, 0.16),
    0 0 0 1px rgba(247, 247, 253, 0.42);
  --home-card-shadow:
    0 18px 46px rgba(174, 181, 214, 0.28),
    0 8px 24px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -18px 38px rgba(197, 202, 232, 0.14);
  color: var(--home-ink);
  /* background: linear-gradient(135deg, #F8F9FF 0%, #ECEEF9 45%, #E2E5F5 100%); */
  background: linear-gradient(130deg, #ededf9 0%, #eceef9 50%, #ecedf8 100% 100%);
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.slideon-dashboard-main {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slideon-dashboard-main::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.slideon-home-shell {
  position: relative;
  overflow-x: hidden;
}

.slideon-home-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 255, 255, 0.72), transparent 18%),
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.56), transparent 22%),
    radial-gradient(circle at 46% 42%, rgba(255, 255, 255, 0.36), transparent 28%);
  opacity: 0.72;
}

.slideon-home-shell > :not(style) {
  position: relative;
  z-index: 1;
}

.slideon-home-shell *,
.slideon-home-shell *::before,
.slideon-home-shell *::after {
  box-sizing: border-box;
}

.slideon-home-shell button,
.slideon-home-shell input,
.slideon-home-shell select,
.slideon-home-shell textarea {
  font: inherit;
  letter-spacing: 0;
}

.dark .slideon-dashboard-main,
.dark .slideon-home-shell {
  --home-ink: #f8fbff;
  --home-muted: #b8c3e8;
  --home-panel-glass:
    linear-gradient(145deg, rgba(247, 247, 253, 0.16), rgba(207, 211, 239, 0.11) 48%, rgba(174, 181, 214, 0.07));
  --home-card-glass:
    linear-gradient(145deg, rgba(247, 247, 253, 0.18), rgba(217, 220, 244, 0.11) 52%, rgba(174, 181, 214, 0.07));
  --home-control-glass:
    linear-gradient(145deg, rgba(247, 247, 253, 0.2), rgba(207, 211, 239, 0.11) 52%, rgba(174, 181, 214, 0.08));
  --home-line: rgba(247, 247, 253, 0.22);
  --home-line-soft: rgba(247, 247, 253, 0.1);
  --home-panel-shadow:
    0 28px 76px rgba(0, 0, 0, 0.54),
    0 0 40px rgba(197, 202, 232, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -24px 48px rgba(197, 202, 232, 0.07),
    0 0 0 1px rgba(247, 247, 253, 0.08);
  --home-card-shadow:
    0 18px 48px rgba(0, 0, 0, 0.44),
    0 0 28px rgba(197, 202, 232, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -18px 36px rgba(197, 202, 232, 0.07);
  background:
    radial-gradient(ellipse at 80% 50%, rgb(11 13 66), #0f1530 55%),
    radial-gradient(ellipse at 88% 52%, rgb(9 15 75), #00000000 35%),
    linear-gradient(135deg, #141356 0%, #0d114c 50%, #0c0c42 100%);
}

.dark .slideon-home-shell::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(247, 247, 253, 0.08), transparent 20%),
    radial-gradient(circle at 86% 10%, rgba(197, 202, 232, 0.08), transparent 24%),
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.04), transparent 30%);
  opacity: 1;
}

.slideon-glass-panel,
.slideon-glass-card,
.slideon-stat-card,
.slideon-glass-control {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--home-ink);
  border: 1px solid var(--home-line);
  backdrop-filter: blur(30px) saturate(1.28);
  -webkit-backdrop-filter: blur(30px) saturate(1.28);
}

.slideon-glass-panel {
  border-radius: 20px;
  background: var(--home-panel-glass);
  box-shadow: var(--home-panel-shadow);
}

.slideon-glass-card,
.slideon-stat-card {
  background: var(--home-card-glass);
}

.slideon-glass-card,
.slideon-stat-card,
.slideon-glass-control {
  box-shadow: var(--home-card-shadow);
}

.slideon-glass-control {
  border-radius: 16px;
  background: var(--home-control-glass);
}

.slideon-glass-panel::before,
.slideon-glass-card::before,
.slideon-stat-card::before,
.slideon-glass-control::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 36%),
    radial-gradient(circle at 13% 0%, rgba(255, 255, 255, 0.76), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(184, 190, 223, 0.18), transparent 42%);
  opacity: 0.58;
}

.dark .slideon-glass-panel::before,
.dark .slideon-glass-card::before,
.dark .slideon-stat-card::before,
.dark .slideon-glass-control::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.14), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(197, 202, 232, 0.12), transparent 42%);
  opacity: 0.46;
}

.slideon-glass-panel > :not(style),
.slideon-glass-card > :not(style),
.slideon-stat-card > :not(style),
.slideon-glass-control > :not(style) {
  position: relative;
  z-index: 1;
}

.slideon-glass-card::after,
.slideon-stat-card::after {
  content: none;
  display: none;
}

.slideon-glass-card:hover,
.slideon-stat-card:hover,
.slideon-glass-control:hover {
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 22px 54px rgba(174, 181, 214, 0.34),
    0 10px 30px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -20px 40px rgba(197, 202, 232, 0.18);
}

.dark .slideon-glass-card:hover,
.dark .slideon-stat-card:hover,
.dark .slideon-glass-control:hover {
  border-color: rgba(247, 247, 253, 0.32);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(197, 202, 232, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -20px 40px rgba(197, 202, 232, 0.08);
}

.slideon-section-title {
  color: #0b1234;
}

.dark .slideon-section-title {
  color: #f8fbff;
}

.slideon-primary-action {
  color: #fff;
  background: linear-gradient(135deg, #1168ff 0%, #8629fb 100%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 14px 30px rgba(78, 54, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -12px 24px rgba(26, 6, 135, 0.18);
}

.slideon-home-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slideon-home-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 767px) {
  .slideon-dashboard-main,
  .slideon-home-shell {
    font-size: 14px;
  }
}

/* Editor side-panel scroll containers — the user wants the entire left
   sidebar in the presentation editor scrollbar-free (the visible OS chrome
   was eating space and looking unpolished). The selectors below are
   intentionally aggressive:

   1. `.ps-left-sidebar, .ps-left-sidebar *` covers EVERY descendant of the
      sidebar root regardless of which utility class it carries. This is the
      nuclear option — it's still scoped to the left sidebar so the rest of
      the app keeps its scrollbars.
   2. The legacy class targets stay so any one-off scrollable element that
      happens to use them outside the sidebar (modal pickers, inline
      dropdowns) also stays scrollbar-free.

   Scrolling still works (wheel / trackpad / keyboard); only the visible
   gutter is collapsed. `!important` is used so it wins against any
   downstream rule (Tailwind utilities, inline styles via the
   tailwindcss-scrollbar shim that isn't actually installed here, etc.). */
.ps-left-sidebar,
.ps-left-sidebar *,
.custom-scrollbar,
.scrollbar-thin,
.scrollbar-thumb-slate-300,
.scrollbar-thumb-slate-700,
.scrollbar-track-transparent {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.ps-left-sidebar::-webkit-scrollbar,
.ps-left-sidebar *::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar,
.scrollbar-thin::-webkit-scrollbar,
.scrollbar-thumb-slate-300::-webkit-scrollbar,
.scrollbar-thumb-slate-700::-webkit-scrollbar,
.scrollbar-track-transparent::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
.ps-left-sidebar::-webkit-scrollbar-thumb,
.ps-left-sidebar *::-webkit-scrollbar-thumb {
  background: transparent !important;
}

/* Basic reset for images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── Prevent right-click saving of images / media ───────────────────────── */
img,
video,
canvas {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* Toast animation for "Copied to canvas clipboard" feedback */
@keyframes slideon-ctx-toast {
  0%   { opacity: 0; transform: translateY(4px); }
  10%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Auth page badge fade-in-up */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Music tile vinyl-disc rotation while a track is playing in the
   community Music library. Tailwind's animate-spin is too fast (1s) for a
   record-player aesthetic; this keyframe is referenced by inline style so
   we can pick a 5s revolution without polluting the Tailwind config. */
@keyframes slideon-disc-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Masonry image grid — Pinterest-style columns */
.masonry-image-grid {
  column-count: 2;
  column-gap: 6px;
}
@media (min-width: 768px) {
  .masonry-image-grid { column-count: 3; column-gap: 6px; }
}
@media (min-width: 1280px) {
  .masonry-image-grid { column-count: 4; column-gap: 6px; }
}

/* Hide React Flow watermark */
.react-flow__attribution {
  display: none !important;
}

/* ─── Mobile / Small-screen safety ────────────────────────────────────────── */

/* Prevent any element from breaking out of the viewport horizontally */
* {
  min-width: 0;
}

/* Keep fixed/absolute dropdowns within viewport on very small screens */
@media (max-width: 639px) {
  /* Ensure modal overlays use full-screen-safe padding */
  [class*="fixed inset-0"] {
    padding: 0.75rem;
  }

  /* Prevent oversized text from causing horizontal overflow in cards */
  .rounded-2xl, .rounded-xl, .rounded-3xl {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Table containers scroll horizontally, not the page */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* 320px minimum-width safeguard — nothing wider than the viewport */
@media (max-width: 359px) {
  .h-12 { height: 2.5rem; }
  .w-12 { width: 2.5rem; }
  .h-16 { height: 3.5rem; }
  .text-2xl { font-size: 1.125rem; line-height: 1.75rem; }
  .text-3xl { font-size: 1.25rem; line-height: 1.75rem; }
  .px-6 { padding-left: 1rem; padding-right: 1rem; }
  .px-8 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .p-8 { padding: 0.75rem; }
  .gap-4 { gap: 0.5rem; }
}

/* ─── Admin theme palette ───────────────────────────────────────────────────
   Unified design system for the Super Admin shell. Tokens are exposed as
   CSS custom properties on `.admin-theme-dark` / `.admin-theme-light` and
   the existing slate-* utility classes are mapped onto them, so every
   admin view reads from a single palette in both themes without per-file
   refactors.

   Hierarchy:
     --admin-bg       page background (deepest)
     --admin-surface  card / row background
     --admin-surface-2 nested surfaces (inputs, sub-cards, popovers)
     --admin-surface-hover    row / button hover
     --admin-border   subtle dividers
     --admin-border-strong    border on hover or active controls
     --admin-text     primary copy
     --admin-text-muted secondary / labels
     --admin-text-faint disabled / placeholders
     --admin-accent   indigo brand accent
   ─────────────────────────────────────────────────────────────────────── */

.admin-theme-dark,
.admin-theme-light {
  --admin-radius-sm: 6px;
  --admin-radius-md: 8px;
  --admin-radius-lg: 12px;
  --admin-radius-xl: 14px;
  --admin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --admin-shadow-md: 0 4px 14px rgba(2, 6, 23, 0.08);
  --admin-shadow-lg: 0 12px 32px rgba(2, 6, 23, 0.18);
  --admin-focus-ring: 0 0 0 2px rgba(99, 102, 241, 0.35);
  --admin-transition: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─── DARK ────────────────────────────────────────────────────────────────── */
.admin-theme-dark {
  --admin-bg:            #070b16;
  --admin-surface:       #0d1322;
  --admin-surface-2:     #131a2c;
  --admin-surface-hover: #1a2237;
  --admin-border:        #1d2740;
  --admin-border-strong: #2a3552;
  --admin-text:          #e6ebf5;
  --admin-text-muted:    #94a3b8;
  --admin-text-faint:    #64748b;
  --admin-accent:        #818cf8;
  --admin-accent-soft:   rgba(99, 102, 241, 0.16);
  --admin-accent-border: rgba(129, 140, 248, 0.30);
  color: var(--admin-text);
  background: var(--admin-bg) !important;
}

.admin-theme-dark .bg-slate-950        { background-color: var(--admin-bg) !important; }
.admin-theme-dark .bg-slate-900        { background-color: var(--admin-surface) !important; }
.admin-theme-dark .bg-slate-800        { background-color: var(--admin-surface-2) !important; }
.admin-theme-dark .bg-slate-700        { background-color: var(--admin-surface-hover) !important; }
.admin-theme-dark .bg-slate-900\/95    { background-color: rgba(13, 19, 34, 0.95) !important; }
.admin-theme-dark .bg-slate-900\/60    { background-color: rgba(13, 19, 34, 0.60) !important; }
.admin-theme-dark .bg-slate-900\/50    { background-color: rgba(13, 19, 34, 0.50) !important; }
.admin-theme-dark .bg-slate-900\/40    { background-color: rgba(13, 19, 34, 0.40) !important; }
.admin-theme-dark .bg-slate-950\/70    { background-color: rgba(7, 11, 22, 0.70) !important; }
.admin-theme-dark .bg-slate-800\/40    { background-color: rgba(19, 26, 44, 0.40) !important; }
.admin-theme-dark .bg-slate-800\/60    { background-color: rgba(19, 26, 44, 0.60) !important; }
.admin-theme-dark .bg-slate-800\/70    { background-color: rgba(19, 26, 44, 0.70) !important; }
.admin-theme-dark .bg-slate-700\/40    { background-color: rgba(26, 34, 55, 0.40) !important; }
.admin-theme-dark .bg-slate-700\/50    { background-color: rgba(26, 34, 55, 0.50) !important; }
.admin-theme-dark .bg-slate-700\/60    { background-color: rgba(26, 34, 55, 0.60) !important; }

.admin-theme-dark .border-slate-800,
.admin-theme-dark .border-slate-700,
.admin-theme-dark .border-slate-600    { border-color: var(--admin-border) !important; }
.admin-theme-dark .border-slate-800\/40,
.admin-theme-dark .border-slate-800\/50 { border-color: rgba(29, 39, 64, 0.55) !important; }

.admin-theme-dark .text-white,
.admin-theme-dark .text-slate-100      { color: var(--admin-text) !important; }
.admin-theme-dark .text-slate-200,
.admin-theme-dark .text-slate-300      { color: #cbd5e1 !important; }
.admin-theme-dark .text-slate-400      { color: var(--admin-text-muted) !important; }
.admin-theme-dark .text-slate-500,
.admin-theme-dark .text-slate-600      { color: var(--admin-text-faint) !important; }
.admin-theme-dark .text-slate-700      { color: #475569 !important; }

.admin-theme-dark .hover\:bg-slate-800:hover,
.admin-theme-dark .hover\:bg-slate-900\/50:hover,
.admin-theme-dark .hover\:bg-slate-700:hover { background-color: var(--admin-surface-hover) !important; }
.admin-theme-dark .hover\:text-white:hover   { color: var(--admin-text) !important; }
.admin-theme-dark .hover\:border-slate-700:hover { border-color: var(--admin-border-strong) !important; }

/* ─── LIGHT ───────────────────────────────────────────────────────────────── */
.admin-theme-light {
  --admin-bg:            #f6f7fb;
  --admin-surface:       #ffffff;
  --admin-surface-2:     #f3f5fa;
  --admin-surface-hover: #eff2f7;
  --admin-border:        #e4e8f0;
  --admin-border-strong: #cbd5e1;
  --admin-text:          #0f172a;
  --admin-text-muted:    #64748b;
  --admin-text-faint:    #94a3b8;
  --admin-accent:        #4338ca;
  --admin-accent-soft:   rgba(67, 56, 202, 0.08);
  --admin-accent-border: rgba(67, 56, 202, 0.22);
  color: var(--admin-text);
  background: var(--admin-bg) !important;
}

.admin-theme-light .bg-slate-950        { background-color: var(--admin-bg) !important; }
.admin-theme-light .bg-slate-900,
.admin-theme-light .bg-slate-800        { background-color: var(--admin-surface) !important; }
.admin-theme-light .bg-slate-700        { background-color: var(--admin-surface-2) !important; }

.admin-theme-light .bg-slate-900\/95,
.admin-theme-light .bg-slate-900\/60,
.admin-theme-light .bg-slate-900\/50,
.admin-theme-light .bg-slate-950\/70    { background-color: rgba(255, 255, 255, 0.94) !important; }
.admin-theme-light .bg-slate-900\/40    { background-color: var(--admin-surface-hover) !important; }
.admin-theme-light .bg-slate-800\/40,
.admin-theme-light .bg-slate-800\/60,
.admin-theme-light .bg-slate-800\/70    { background-color: var(--admin-surface-2) !important; }
.admin-theme-light .bg-slate-700\/40,
.admin-theme-light .bg-slate-700\/50,
.admin-theme-light .bg-slate-700\/60    { background-color: var(--admin-surface-hover) !important; }

.admin-theme-light .border-slate-800,
.admin-theme-light .border-slate-700,
.admin-theme-light .border-slate-600    { border-color: var(--admin-border) !important; }
.admin-theme-light .border-slate-800\/40,
.admin-theme-light .border-slate-800\/50 { border-color: rgba(228, 232, 240, 0.7) !important; }

.admin-theme-light .text-white,
.admin-theme-light .text-slate-100      { color: var(--admin-text) !important; }
.admin-theme-light .text-slate-200,
.admin-theme-light .text-slate-300      { color: #1e293b !important; }
.admin-theme-light .text-slate-400      { color: var(--admin-text-muted) !important; }
.admin-theme-light .text-slate-500,
.admin-theme-light .text-slate-600      { color: var(--admin-text-muted) !important; }
.admin-theme-light .text-slate-700      { color: #94a3b8 !important; }

.admin-theme-light .hover\:bg-slate-800:hover,
.admin-theme-light .hover\:bg-slate-900\/50:hover,
.admin-theme-light .hover\:bg-slate-700:hover { background-color: var(--admin-surface-hover) !important; }
.admin-theme-light .hover\:text-white:hover   { color: var(--admin-text) !important; }
.admin-theme-light .hover\:border-slate-700:hover { border-color: var(--admin-border-strong) !important; }

/* Indigo brand accent — softer alphas on white so pills don't fight. */
.admin-theme-light .bg-indigo-600\/30,
.admin-theme-light .bg-indigo-600\/20 {
  background-color: rgba(79, 70, 229, 0.10) !important;
}
.admin-theme-light .bg-indigo-600\/15,
.admin-theme-light .bg-indigo-600\/5,
.admin-theme-light .bg-indigo-600\/10 {
  background-color: rgba(79, 70, 229, 0.06) !important;
}
.admin-theme-light .border-indigo-500\/20,
.admin-theme-light .border-indigo-500\/30,
.admin-theme-light .border-indigo-500\/40 {
  border-color: rgba(79, 70, 229, 0.25) !important;
}
.admin-theme-light .text-indigo-400,
.admin-theme-light .text-indigo-300,
.admin-theme-light .text-indigo-200 {
  color: #4338ca !important;
}

/* Status / tier pill alpha tints — keep the hue but lift to a readable
   tone on white (the underlying `bg-emerald-500/15` etc was tuned for
   dark mode and reads as muddy beige on white). */
.admin-theme-light .bg-emerald-500\/15 { background-color: rgba(16, 185, 129, 0.10) !important; }
.admin-theme-light .text-emerald-300,
.admin-theme-light .text-emerald-400 { color: #047857 !important; }
.admin-theme-light .border-emerald-500\/30,
.admin-theme-light .border-emerald-500\/40 { border-color: rgba(16, 185, 129, 0.30) !important; }

.admin-theme-light .bg-amber-500\/15 { background-color: rgba(245, 158, 11, 0.10) !important; }
.admin-theme-light .text-amber-300,
.admin-theme-light .text-amber-400 { color: #b45309 !important; }
.admin-theme-light .border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.30) !important; }

.admin-theme-light .bg-red-500\/15,
.admin-theme-light .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.08) !important; }
.admin-theme-light .bg-red-600\/30 { background-color: rgba(220, 38, 38, 0.12) !important; }
.admin-theme-light .text-red-300,
.admin-theme-light .text-red-400,
.admin-theme-light .text-red-200 { color: #b91c1c !important; }
.admin-theme-light .border-red-500\/30,
.admin-theme-light .border-red-500\/40 { border-color: rgba(239, 68, 68, 0.30) !important; }

.admin-theme-light .bg-orange-500\/15 { background-color: rgba(249, 115, 22, 0.10) !important; }
.admin-theme-light .text-orange-300,
.admin-theme-light .text-orange-400 { color: #c2410c !important; }
.admin-theme-light .border-orange-500\/30 { border-color: rgba(249, 115, 22, 0.30) !important; }

.admin-theme-light .bg-purple-500\/15 { background-color: rgba(168, 85, 247, 0.10) !important; }
.admin-theme-light .text-purple-300,
.admin-theme-light .text-purple-400 { color: #6b21a8 !important; }
.admin-theme-light .border-purple-500\/30 { border-color: rgba(168, 85, 247, 0.30) !important; }

.admin-theme-light .bg-blue-500\/10,
.admin-theme-light .bg-blue-600\/10 { background-color: rgba(59, 130, 246, 0.08) !important; }
.admin-theme-light .text-blue-400 { color: #1d4ed8 !important; }
.admin-theme-light .border-blue-500\/20 { border-color: rgba(59, 130, 246, 0.25) !important; }

/* ─── Shared admin primitives ────────────────────────────────────────────── */

/* Subtle card shadow + hairline border (theme-aware via custom props) */
.admin-theme-dark .admin-card,
.admin-theme-light .admin-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-sm);
  transition: border-color var(--admin-transition), box-shadow var(--admin-transition), transform var(--admin-transition);
}
.admin-theme-light .admin-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.admin-theme-dark .admin-card:hover,
.admin-theme-light .admin-card:hover {
  border-color: var(--admin-border-strong);
}

/* Compact "page header" row used at the top of every admin view */
.admin-theme-dark .admin-page-header,
.admin-theme-light .admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-theme-dark .admin-page-title,
.admin-theme-light .admin-page-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--admin-text);
  margin: 0;
}
.admin-theme-dark .admin-page-subtitle,
.admin-theme-light .admin-page-subtitle {
  font-size: 12px;
  color: var(--admin-text-muted);
  margin-top: 2px;
}

/* Inputs / Selects baseline — for any admin form control marked .admin-input */
.admin-theme-dark .admin-input,
.admin-theme-light .admin-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  color: var(--admin-text);
  font-size: 13px;
  transition: border-color var(--admin-transition), box-shadow var(--admin-transition);
}
.admin-theme-dark .admin-input::placeholder,
.admin-theme-light .admin-input::placeholder { color: var(--admin-text-faint); }
.admin-theme-dark .admin-input:focus,
.admin-theme-light .admin-input:focus {
  outline: none;
  border-color: var(--admin-accent);
  box-shadow: var(--admin-focus-ring);
}
.admin-theme-dark .admin-input.is-invalid,
.admin-theme-light .admin-input.is-invalid {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}
.admin-theme-dark textarea.admin-input,
.admin-theme-light textarea.admin-input {
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
}

/* Buttons — small, tight, contextual */
.admin-theme-dark .admin-btn,
.admin-theme-light .admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--admin-radius-md);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  cursor: pointer;
  transition: background var(--admin-transition), border-color var(--admin-transition), color var(--admin-transition);
  white-space: nowrap;
}
.admin-theme-dark .admin-btn:hover,
.admin-theme-light .admin-btn:hover {
  background: var(--admin-surface-hover);
  border-color: var(--admin-border-strong);
}
.admin-theme-dark .admin-btn:disabled,
.admin-theme-light .admin-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.admin-theme-dark .admin-btn--primary,
.admin-theme-light .admin-btn--primary {
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
  border-color: var(--admin-accent-border);
}
.admin-theme-dark .admin-btn--primary:hover,
.admin-theme-light .admin-btn--primary:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(129, 140, 248, 0.45);
}
.admin-theme-dark .admin-btn--ghost,
.admin-theme-light .admin-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--admin-text-muted);
}
.admin-theme-dark .admin-btn--ghost:hover,
.admin-theme-light .admin-btn--ghost:hover {
  background: var(--admin-surface-hover);
  color: var(--admin-text);
}
.admin-theme-dark .admin-btn--danger,
.admin-theme-light .admin-btn--danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.30);
  background: rgba(239, 68, 68, 0.08);
}
.admin-theme-dark .admin-btn--danger:hover,
.admin-theme-light .admin-btn--danger:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
}
.admin-theme-dark .admin-btn--icon,
.admin-theme-light .admin-btn--icon { padding: 0; width: 32px; }

/* Badges / pills */
.admin-theme-dark .admin-pill,
.admin-theme-light .admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.admin-theme-dark .admin-pill--neutral,
.admin-theme-light .admin-pill--neutral {
  background: var(--admin-surface-2);
  color: var(--admin-text-muted);
  border-color: var(--admin-border);
}

/* Tables */
.admin-theme-dark .admin-table,
.admin-theme-light .admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.admin-theme-dark .admin-table thead th,
.admin-theme-light .admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
  background: var(--admin-surface);
  border-bottom: 1px solid var(--admin-border);
  padding: 10px 14px;
}
.admin-theme-dark .admin-table tbody td,
.admin-theme-light .admin-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--admin-border);
  color: var(--admin-text);
}
.admin-theme-dark .admin-table tbody tr:hover td,
.admin-theme-light .admin-table tbody tr:hover td {
  background: var(--admin-surface-hover);
}
.admin-theme-dark .admin-table tbody tr:last-child td,
.admin-theme-light .admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* Avatar circle */
.admin-theme-dark .admin-avatar,
.admin-theme-light .admin-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--admin-accent-soft);
  border: 1px solid var(--admin-accent-border);
  color: var(--admin-accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
.admin-theme-dark .admin-avatar--sm,
.admin-theme-light .admin-avatar--sm { width: 24px; height: 24px; font-size: 10px; }

/* Helper / error text under inputs */
.admin-theme-dark .admin-help,
.admin-theme-light .admin-help {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--admin-text-muted);
}
.admin-theme-dark .admin-help--error,
.admin-theme-light .admin-help--error { color: #ef4444; }

/* Compact field label */
.admin-theme-dark .admin-label,
.admin-theme-light .admin-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--admin-text-muted);
  letter-spacing: 0.02em;
}

/* Subtle thumbnail container with checkered pattern fallback for missing images */
.admin-theme-dark .admin-thumb,
.admin-theme-light .admin-thumb {
  background-color: var(--admin-surface-2);
  background-image:
    linear-gradient(45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.08) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-faint);
}
.admin-theme-dark .admin-thumb img,
.admin-theme-light .admin-thumb img,
.admin-theme-dark .admin-thumb video,
.admin-theme-light .admin-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrollbar polish — only inside admin shell so the rest of the app keeps its
   hidden-scrollbar treatment. Applied to the main content area. */
.admin-theme-dark .admin-scroll,
.admin-theme-light .admin-scroll {
  scrollbar-width: thin;
}
.admin-theme-dark .admin-scroll { scrollbar-color: #1f2a3d transparent; }
.admin-theme-light .admin-scroll { scrollbar-color: #cbd5e1 transparent; }
.admin-theme-dark .admin-scroll::-webkit-scrollbar,
.admin-theme-light .admin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.admin-theme-dark .admin-scroll::-webkit-scrollbar-thumb { background: #1f2a3d; border-radius: 999px; }
.admin-theme-light .admin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.admin-theme-dark .admin-scroll::-webkit-scrollbar-thumb:hover { background: #2a3552; }
.admin-theme-light .admin-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Native form controls (date, number, select arrows) blend with theme */
.admin-theme-light input[type='date'],
.admin-theme-light input[type='number'] { color-scheme: light; }
.admin-theme-dark input[type='date'],
.admin-theme-dark input[type='number'] { color-scheme: dark; }

/* Fade-in for content swaps */
@keyframes admin-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-theme-dark .admin-fade-in,
.admin-theme-light .admin-fade-in { animation: admin-fade-in 220ms ease-out both; }

/* Skeleton shimmer for loading states */
@keyframes admin-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.admin-theme-dark .admin-skeleton {
  background: linear-gradient(90deg, #131a2c 0%, #1a2237 50%, #131a2c 100%);
  background-size: 200% 100%;
  animation: admin-shimmer 1.4s linear infinite;
  border-radius: var(--admin-radius-md);
}
.admin-theme-light .admin-skeleton {
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: admin-shimmer 1.4s linear infinite;
  border-radius: var(--admin-radius-md);
}

/* Focus-visible polish for any button/anchor inside admin shell */
.admin-theme-dark :focus-visible,
.admin-theme-light :focus-visible {
  outline: none;
  box-shadow: var(--admin-focus-ring);
  border-radius: 6px;
}

/* ── Transition preview animations ─────────────────────────────────────────
   Each transition card's label replays its own effect on hover, so users see
   a live preview of what will happen when the transition runs. Keyframes are
   deliberately short (400–700ms) and use transform/opacity only so they stay
   cheap on the compositor. */
.se-trans-label,
.se-trans-icon { display: inline-block; transform-origin: center; backface-visibility: hidden; }

/* Intro run: plays once when .se-trans-intro enters the DOM (e.g. when the
   Transitions panel opens). Uses CSS `animation` with `both` so the final
   frame sticks. Stagger is driven by per-card `--i` (set inline as the index)
   so cards animate in a wave. After the intro finishes the hover rules below
   take over. */
.se-trans-intro .se-trans-card .se-trans-label,
.se-trans-intro .se-trans-card .se-trans-icon { animation-delay: calc(var(--i, 0) * 60ms); animation-play-state: running; }

@keyframes se-fx-fade      { 0% {opacity:.1} 100% {opacity:1} }
@keyframes se-fx-slide     { 0% {transform:translateX(-12px);opacity:0} 100% {transform:translateX(0);opacity:1} }
@keyframes se-fx-zoom      { 0% {transform:scale(0.6);opacity:0} 100% {transform:scale(1);opacity:1} }
@keyframes se-fx-flip      { 0% {transform:rotateY(-90deg);opacity:0} 100% {transform:rotateY(0);opacity:1} }
@keyframes se-fx-dissolve  { 0% {filter:blur(3px) saturate(0);opacity:.2} 100% {filter:blur(0) saturate(1);opacity:1} }
@keyframes se-fx-wipe-l    { 0% {clip-path:inset(0 0 0 100%)} 100% {clip-path:inset(0 0 0 0)} }
@keyframes se-fx-wipe-r    { 0% {clip-path:inset(0 100% 0 0)} 100% {clip-path:inset(0 0 0 0)} }
@keyframes se-fx-wipe-u    { 0% {clip-path:inset(100% 0 0 0)} 100% {clip-path:inset(0 0 0 0)} }
@keyframes se-fx-wipe-d    { 0% {clip-path:inset(0 0 100% 0)} 100% {clip-path:inset(0 0 0 0)} }
@keyframes se-fx-push      { 0% {transform:translateX(16px)} 50% {transform:translateX(-4px)} 100% {transform:translateX(0)} }
@keyframes se-fx-cover     { 0% {transform:translateY(-10px);opacity:0} 100% {transform:translateY(0);opacity:1} }
@keyframes se-fx-reveal    { 0% {letter-spacing:-4px;opacity:0} 100% {letter-spacing:normal;opacity:1} }
@keyframes se-fx-rotate    { 0% {transform:rotate(-180deg);opacity:0} 100% {transform:rotate(0);opacity:1} }
@keyframes se-fx-bounce    { 0% {transform:translateY(-14px);opacity:0} 60% {transform:translateY(4px)} 80% {transform:translateY(-2px)} 100% {transform:translateY(0);opacity:1} }
@keyframes se-fx-blur      { 0% {filter:blur(6px);opacity:0} 100% {filter:blur(0);opacity:1} }
@keyframes se-fx-split     { 0% {letter-spacing:14px;opacity:0} 100% {letter-spacing:normal;opacity:1} }
@keyframes se-fx-spiral    { 0% {transform:rotate(-360deg) scale(0.4);opacity:0} 100% {transform:rotate(0) scale(1);opacity:1} }
@keyframes se-fx-none      { 0%,100% {opacity:1} }

/* Mermaid edge label background — show fully opaque */
.edgeLabel rect {
  opacity: 1 !important;
}

/* Hover preview — replays on every mouseenter. Rules cover BOTH label text
   and the SVG/emoji icon so the whole card animates together. */
.se-trans-card:hover .se-trans-label[data-fx="fade"],
.se-trans-card:hover .se-trans-icon[data-fx="fade"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="fade"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="fade"]          { animation: se-fx-fade 600ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="slide"],
.se-trans-card:hover .se-trans-icon[data-fx="slide"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="slide"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="slide"]         { animation: se-fx-slide 500ms ease-out both; }
.se-trans-card:hover .se-trans-label[data-fx="zoom"],
.se-trans-card:hover .se-trans-icon[data-fx="zoom"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="zoom"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="zoom"]          { animation: se-fx-zoom 500ms ease-out both; }
.se-trans-card:hover .se-trans-label[data-fx="flip"],
.se-trans-card:hover .se-trans-icon[data-fx="flip"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="flip"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="flip"]          { animation: se-fx-flip 600ms ease-out both; }
.se-trans-card:hover .se-trans-label[data-fx="dissolve"],
.se-trans-card:hover .se-trans-icon[data-fx="dissolve"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="dissolve"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="dissolve"]      { animation: se-fx-dissolve 700ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="wipe-left"],
.se-trans-card:hover .se-trans-icon[data-fx="wipe-left"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="wipe-left"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="wipe-left"]     { animation: se-fx-wipe-l 500ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="wipe-right"],
.se-trans-card:hover .se-trans-icon[data-fx="wipe-right"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="wipe-right"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="wipe-right"]    { animation: se-fx-wipe-r 500ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="wipe-up"],
.se-trans-card:hover .se-trans-icon[data-fx="wipe-up"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="wipe-up"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="wipe-up"]       { animation: se-fx-wipe-u 500ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="wipe-down"],
.se-trans-card:hover .se-trans-icon[data-fx="wipe-down"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="wipe-down"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="wipe-down"]     { animation: se-fx-wipe-d 500ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="push"],
.se-trans-card:hover .se-trans-icon[data-fx="push"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="push"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="push"]          { animation: se-fx-push 550ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="cover"],
.se-trans-card:hover .se-trans-icon[data-fx="cover"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="cover"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="cover"]         { animation: se-fx-cover 500ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="reveal"],
.se-trans-card:hover .se-trans-icon[data-fx="reveal"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="reveal"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="reveal"]        { animation: se-fx-reveal 600ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="rotate"],
.se-trans-card:hover .se-trans-icon[data-fx="rotate"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="rotate"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="rotate"]        { animation: se-fx-rotate 650ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="bounce"],
.se-trans-card:hover .se-trans-icon[data-fx="bounce"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="bounce"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="bounce"]        { animation: se-fx-bounce 700ms cubic-bezier(0.34,1.56,0.64,1) both; }
.se-trans-card:hover .se-trans-label[data-fx="blur"],
.se-trans-card:hover .se-trans-icon[data-fx="blur"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="blur"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="blur"]          { animation: se-fx-blur 500ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="split"],
.se-trans-card:hover .se-trans-icon[data-fx="split"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="split"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="split"]         { animation: se-fx-split 600ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="spiral"],
.se-trans-card:hover .se-trans-icon[data-fx="spiral"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="spiral"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="spiral"]        { animation: se-fx-spiral 700ms ease both; }
.se-trans-card:hover .se-trans-label[data-fx="none"],
.se-trans-card:hover .se-trans-icon[data-fx="none"],
.se-trans-intro .se-trans-card .se-trans-label[data-fx="none"],
.se-trans-intro .se-trans-card .se-trans-icon[data-fx="none"]          { animation: se-fx-none 400ms ease both; }