@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
/* Smoothness pass — shared micro-interaction polish (lyrc-style feel).
   ~0.16s transitions on cubic-bezier(0.4,0,0.2,1) app-wide, tactile press, hover-lift,
   smooth focus rings, sleeker scrollbars. Linked into every page for a consistent, sleek UI. */
:root { --ease: cubic-bezier(0.4, 0, 0.2, 1); }
/* Single UI typeface: DotBody = Jersey10 (clean, even pixel) EVERYWHERE — nav, headings, body, controls
   (Neo retired DotGothic16). Sora/system fill any glyph the Latin subset lacks (symbols, emoji, ½,
   arrows). Preset/lyric text keep their own inline font-family, so the lyric preview is unaffected. */
/* Two size tiers of the SAME Jersey10 file via size-adjust (scales glyphs without touching every
   px/rem): DotBody=132% for the app pages (Neo: +15% on top of the earlier 115%), DotBodyHome=115%
   for the home page (he wanted home left at its previous size) AND as the nav base. */
@font-face { font-family: 'DotBody';     src: url('/fonts/Jersey10-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 132%; }
@font-face { font-family: 'DotBodyHome'; src: url('/fonts/Jersey10-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 115%; }
/* Site body + headings in Sora (Neo's pick), NAV stays Jersey10 (the .nav-link rule below keeps
   DotBodyHome). VARIABLE font (all weights 100–800 in one file) so body renders at its own normal
   weights and only headings go ExtraBold — not the whole UI heavy. Revert = body/headings → DotBody. */
@font-face { font-family: 'SoraUI'; src: url('/fonts/Sora-var.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
/* Nav = Sixtyfour (retro-LED) per Neo — temporary until the motion pass, when he wants a sleeker font. */
@font-face { font-family: 'NavLED'; src: url('/fonts/Sixtyfour.woff2') format('woff2'); font-display: swap; }
body { font-family: 'SoraUI', 'Sora', 'Inter', system-ui, -apple-system, sans-serif !important; font-weight: 500; }
body.home { font-family: 'SoraUI', 'Sora', 'Inter', system-ui, -apple-system, sans-serif !important; font-weight: 500; }
/* (Nav sizing lives in the .nav-link block further down — 1.094rem on the 115% base, consistent per page.) */
/* Form controls carry their own UA font-family (they don't inherit) — force inheritance so the
   site-wide font reaches buttons / inputs / selects too. NOT !important: inline-styled preset
   samples and lyric-preview spans keep their own font (inline beats this), so previews stay correct. */
button, input, textarea, select, optgroup, option { font-family: inherit; }
/* Kill the trackpad two-finger swipe that triggers browser back/forward navigation */
html, body { overscroll-behavior-x: none; }
/* Purple top-nav text app-wide (keeps normal sizing) */
.nav-link { color: #b14df0 !important; }
.nav-link:hover { color: #d89bff !important; text-shadow: 0 0 12px rgba(196,123,255,0.55); }
/* active nav = brand pink->purple gradient (matches Home + Templates app-wide) */
.nav-link.active { color: transparent !important;
  background: linear-gradient(120deg,#ff5ec8,#b14df0 46%,#7a2ff2) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  text-shadow: none !important; font-weight: 600 !important; }
:root[data-ground="light"] .nav-link.active {
  background: linear-gradient(120deg,#b14df0,#7a2ff2) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important; }
/* Hide dead placeholder nav pages (Scenes / Performance / Cover Art = href="#") app-wide */
.nav-link[href="#"] { display: none !important; }
a, button, input, select, textarea, .nav-link, .category-card, .preset-tile, .preset-tile-inner,
.aspect-btn, .cut-speed-btn, .beat-detect-btn, .btn-shuffle, .cb-clip, [role="slider"],
[onclick], [class*="btn"], [class*="card"], [class*="tile"], [class*="chip"] {
    transition-timing-function: var(--ease) !important;
    transition-duration: 0.16s !important;
}
/* Press feedback: small standalone controls only — NOT broad [onclick] containers
   (that made whole cards/modals visibly shrink on mousedown). No scale, so layout
   never reflows on click. */
button:not(:disabled):active, .preset-tile:active,
.aspect-btn:active, .cut-speed-btn:active, .btn-shuffle:not(:disabled):active {
    transform: translateY(0.5px);
}
.category-card:hover { transform: translateY(-2px); }
.preset-tile:hover { transform: translateY(-1px); }
.cb-clip { cursor: pointer; }
.cb-clip:hover { transform: scale(1.03); z-index: 2; }
button:focus-visible, a:focus-visible, input:focus-visible, .preset-tile:focus-visible {
    outline: none; box-shadow: 0 0 0 2px rgba(177,77,240,0.55);
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }
*::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }

/* Logo (logo3.png, transparent bg) — bigger, brighter/more vibrant, NO glow */
.logo img { height: 32px !important; filter: brightness(1.14) saturate(1.22); }

/* ── GRADIENT separator / divider lines (fade out at both ends → sleek) + soft glow ── */
/* THE main one: the line under the top nav (separates the tabs from the page) */
.navbar, header.navbar {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, rgba(177,77,240,0.55), #c47bff 50%, rgba(177,77,240,0.55), transparent) 1 !important;
  box-shadow: 0 2px 18px rgba(196,123,255,0.4) !important;
}
/* Horizontal separators (header rows / rules with a bottom divider) — gradient line + downward glow */
.section-header, .collapsible-header, .cs-header, .cb-header, .panel-tabs, .panel-title,
.timeline-header, .import-tabs, .panel-header {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, rgba(177,77,240,0.5), #c47bff, rgba(177,77,240,0.5), transparent) 1 !important;
  box-shadow: 0 1px 11px rgba(196,123,255,0.26);
}
/* Standalone rules become gradient bars */
hr, .divider, .sep {
  border: none !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(177,77,240,0.6), #c47bff, rgba(177,77,240,0.6), transparent) !important;
  box-shadow: 0 0 10px rgba(196,123,255,0.3);
}
/* Panels sitting BELOW a top-border divider — gradient top line + upward glow */
.transport, .timeline-section, .timeline-panel, .beatcuts-panel {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, rgba(177,77,240,0.5), #c47bff, rgba(177,77,240,0.5), transparent) 1 !important;
  box-shadow: 0 -1px 11px rgba(196,123,255,0.24);
}
/* Vertical side-panel divider — gradient left line */
.editor-panel {
  border-left: 1px solid transparent !important;
  border-image: linear-gradient(180deg, transparent, rgba(177,77,240,0.5), #c47bff, rgba(177,77,240,0.5), transparent) 1 !important;
  box-shadow: -1px 0 11px rgba(196,123,255,0.22);
}
/* Match every page's nav sizing to the Remix page (14px tabs, tight spacing, 64px bar) */
.navbar-inner { height: 64px !important; max-width: 1400px !important; }   /* uniform nav width so Upgrade doesn't shift between tabs */
/* group Upgrade + avatar together on the right (consistent across every tab) + one shared font */
.navbar-inner > .nav-upgrade { margin-left: auto !important; margin-right: 0.7rem !important; }
.nav-upgrade { font-family: 'CRE8', 'Sora', sans-serif !important; letter-spacing:.01em; }
.nav-links { gap: 0.125rem !important; }
.nav-link {
  position: relative;
  font-family: 'Sora', 'SoraUI', sans-serif !important;  /* Sixtyfour retro-LED; caret kept below */
  font-weight: 500 !important;
  /* Sixtyfour is variable — BLED = how much the LED segments bleed/bloom (=perceived boldness),
     SCAN = scanline gaps. Low BLED makes it read LESS bold/chunky (Neo's ask). */
  font-variation-settings: normal !important;
  font-size: 0.86rem !important;                  /* chunky font → smaller so it doesn't dominate */
  letter-spacing: normal;
  padding: 0.25rem 0.75rem !important;
  height: 2.1rem !important;
  display: inline-flex !important; align-items: center !important;
}
/* Nav underline: a VERY slim horizontal diamond (thin points at both ends, thicker in the middle),
   filled with a gradient, growing from the centre to 60% width on hover/active. clip-path makes the
   diamond; drop-shadow (not box-shadow) is used so the glow hugs the clipped shape. */
.nav-link .nav-underline {
  position: absolute !important; top: auto !important; bottom: 0 !important;
  left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  width: 0 !important; height: 3px !important; border-radius: 0 !important; opacity: 1 !important;
  background: linear-gradient(90deg, rgba(177,77,240,0.15), #c47bff 50%, rgba(177,77,240,0.15)) !important;
  -webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  transition: width 0.2s ease !important;
  filter: drop-shadow(0 0 3px rgba(196,123,255,0.55));
}
.nav-link:hover .nav-underline, .nav-link.active .nav-underline { width: 72% !important; }
/* Neo: remove the diamond underline animation under the nav entirely (the caret is the nav indicator now). */
.nav-underline { display: none !important; }

/* Primary action buttons (Import, New Folder, Generate, Shuffle, Export, etc.) share the FORYOU
   template-selector look: a translucent green gradient + green border (not a bright solid fill). */
.import-btn, .mood-gen-btn, .gen-btn, .btn-generate, .btn-export, .btn-export-sidebar,
.btn-shuffle, .btn-primary, .new-template-btn, .btn-new-template {
  background: linear-gradient(135deg, rgba(122,47,242,0.38) 0%, rgba(196,123,255,0.16) 100%) !important;
  border: 1px solid rgba(196,123,255,0.42) !important;
  color: #f6effe !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.16s !important;
}
.import-btn:hover, .mood-gen-btn:hover, .gen-btn:hover, .btn-generate:hover, .btn-export:hover,
.btn-export-sidebar:hover, .btn-shuffle:hover, .btn-primary:hover, .new-template-btn:hover,
.btn-new-template:hover {
  border-color: rgba(196,123,255,0.75) !important;
  box-shadow: 0 4px 14px rgba(196,123,255,0.3) !important;
}
/* keep disabled buttons visibly muted under the new style */
.import-btn:disabled, .mood-gen-btn:disabled, .gen-btn:disabled, .btn-generate:disabled,
.btn-export:disabled, .btn-export-sidebar:disabled, .btn-primary:disabled {
  opacity: 0.5 !important; box-shadow: none !important; cursor: not-allowed;
}

/* DotGothic16 fully retired (Neo: "get rid of all the dot gothic ones — Jersey10 throughout").
   Every text element now uses DotBody (Jersey10) via the body rule above; page titles / headings just
   inherit it. Kept these selectors only to normalise letter-spacing on the big titles. */
h1,
.page-title, .page-header, .page-head, .wizard-page-title, .sidebar-remix-title, .hero h1, .hero h1 .grad {
  font-family: 'SoraUI', sans-serif !important;   /* Sora headings, ExtraBold (revert → 'DotBody', monospace) */
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* Animated terminal cursor: on hover, a blinking block appears at the END of the text —
   same digital style (currentColor block + soft LED glow, hard on/off blink like a real terminal).
   CLICKABLE elements ONLY (nav links + buttons) — Neo didn't want it on non-clickable headings/text. */
@keyframes dotCaretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Neo: blinking caret is NAV-ONLY now — no longer on every button / preset tile. */
.nav-link:hover::after {
  content: '';
  display: inline-block;
  width: 0.58em; height: 0.86em;
  margin-left: 0.16em;
  vertical-align: -0.06em;
  background: currentColor;
  box-shadow: 0 0 7px currentColor, 0 0 2px currentColor;
  animation: dotCaretBlink 1.02s steps(1, end) infinite;
  pointer-events: none;
}

/* ---- Account profile avatar (nav, right of Upgrade) ---- */
.nav-avatar{width:40px;height:40px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  background:linear-gradient(135deg,#2a1740,#150c24);border:1.5px solid rgba(177,77,240,.55);color:#d8bcff;
  box-shadow:0 0 0 2px rgba(177,77,240,.12),0 6px 16px -7px rgba(122,47,242,.6);transition:transform .12s,border-color .2s,box-shadow .2s}
.nav-avatar:hover{transform:translateY(-1px);border-color:#b06bf0;box-shadow:0 0 0 3px rgba(177,77,240,.2),0 9px 22px -7px rgba(122,47,242,.75)}
.nav-avatar svg{width:20px;height:20px}

/* ============================================================
   CRE8 CUSTOM BRAND FONT — self-hosted, custom-drawn display+text face.
   Replaces Sora/SoraUI site-wide. Scoped to the SAME selectors the rules
   above use (body / headings / nav) so preset + lyric inline fonts stay put.
   ============================================================ */
@font-face{font-family:'CRE8';src:url(data:font/woff2;base64,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) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;ascent-override:85.8%;descent-override:14.2%;line-gap-override:0%}
/* body/UI text in the old face (Sora); page titles + nav in the custom CRE8 face */
body, body.home{font-family:'SoraUI','Sora',system-ui,-apple-system,sans-serif !important}
h1, h2, h3, h4, .page-title, .page-header, .page-head, .wizard-page-title, .sidebar-remix-title,
.hero h1, .hero h1 .grad, .section-title{font-family:'CRE8','SoraUI','Sora',sans-serif !important}
.nav-link{font-family:'CRE8','Sora',sans-serif !important; letter-spacing:-0.01em}

/* ─────────────────────────────────────────────────────────────────────────────
   CANONICAL NAV — every page must render the SAME nav as Home.
   Home (dashboard/login/pricing/reset) styles its nav from brand.css; the tool
   pages each carried their own slightly different inline values (max-width 1500
   vs 1400, gaps 2rem vs 2.2rem, nav-link .8125rem vs .86rem), so the bar visibly
   changed size/spacing between tabs. These mirror brand.css and use !important
   so they win over each page's inline <style>.
   ───────────────────────────────────────────────────────────────────────────── */
.navbar-inner{max-width:1400px !important;padding:0 .55rem 0 1.5rem !important;height:64px !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important}
@media (max-width:860px){.navbar-inner{padding-right:1rem !important}}
.navbar-left{display:flex !important;align-items:center !important;gap:2.2rem !important}
.nav-links{display:flex !important;align-items:center !important;gap:.35rem !important}
.nav-link{padding:.5rem .8rem !important;font-size:.86rem !important;font-weight:500 !important;
  letter-spacing:normal !important;white-space:nowrap !important;text-decoration:none !important}
.navbar-right{display:flex !important;align-items:center !important;gap:.7rem !important;margin-left:auto !important}
.nav-avatar{width:40px !important;height:40px !important;flex:none !important}
/* Pills: inline-flex + line-height:1 so the label sits dead-center. As plain
   anchors the text rode off-centre inside the padding box (baseline + the custom
   CRE8 face's metrics), which is why "Upgrade" looked high in its pill. */
.nav-upgrade,.pill-btn{display:inline-flex !important;align-items:center !important;
  justify-content:center !important;line-height:1 !important;font-size:.82rem !important;
  font-weight:700 !important;padding:.5rem 1.1rem !important;border-radius:999px !important;
  white-space:nowrap !important;text-decoration:none !important;margin-left:0 !important}

/* ── Buttons in the CRE8 brand face, site-wide ────────────────────────────────
   The :not([style*="font-family"]) guard is deliberate: preset tiles / lyric
   samples set their typeface INLINE to show what the preset looks like, and an
   !important rule here would override those and break the previews. */
button:not([style*="font-family"]):not([class*="preset"]):not([class*="tile"]),
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-success, .pill-btn, .nav-upgrade,
.btn-new-template, .btn-generate, .btn-export, .btn-export-sidebar, .btn-shuffle,
.import-btn, .gen-btn, .mood-gen-btn, .authbtn, .kb-go, .tab, .chip,
input[type="submit"], input[type="button"]{
  font-family:'CRE8','Sora',sans-serif !important; letter-spacing:.01em;
}
/* Labels centred in their control (the CRE8 face's own metrics are corrected in
   the @font-face ascent/descent overrides above). */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-success, .pill-btn, .nav-upgrade,
.btn-new-template, .btn-generate, .btn-export, .btn-export-sidebar, .kb-go{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
/* Toasts / status popups ("Rendering video…") in the brand face too */
#notification, .toast, .app-modal .title{ font-family:'CRE8','Sora',sans-serif !important; letter-spacing:.01em; }

/* ── Shared spinner + page loading state ──────────────────────────────────────
   Same treatment as the Templates page: show a spinner while data is in flight
   instead of flashing an empty/“nothing here” state. */
.cre8-spin{display:inline-block;width:13px;height:13px;margin-right:.5rem;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;
  animation:cre8spin .8s linear infinite;flex:none}
@keyframes cre8spin{to{transform:rotate(360deg)}}
.cre8-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:3rem 1.5rem;color:var(--text-muted,#9b95b8);text-align:center}
.cre8-loading .ring{width:40px;height:40px;border-radius:50%;
  border:3px solid rgba(177,77,240,.2);border-top-color:#b14df0;animation:cre8spin .8s linear infinite}

/* ── Nav: no layout shift on hover, nothing wraps ─────────────────────────────
   The hover caret used to be an inline ::after, so hovering a nav link widened
   it and pushed its neighbours — enough to wrap "Sign up" onto two lines. Pin it
   inside the link's own padding instead, and stop the right-hand group shrinking. */
.nav-link:hover::after{position:absolute !important;right:.2em !important;top:50% !important;
  margin-left:0 !important;transform:translateY(-50%) !important;vertical-align:baseline !important}
.navbar-right{flex:none !important}
.navbar-right>*{flex:none !important}
/* Discount badge tucked under the Pricing label (Higgsfield style) */
.nav-deal{position:relative;display:inline-flex;align-items:center;justify-content:center}
.deal-badge{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;
  font-size:.475rem;font-weight:800;letter-spacing:.04em;padding:.1615rem .38rem;border-radius:999px;
  background:linear-gradient(120deg,#ff4fa3,#b14df0 75%);color:#fff;
  box-shadow:0 3px 10px -3px rgba(255,79,163,.9);pointer-events:none}