/* ==========================================================================
   PeakFrame UI v2 — modern minimal theme (admin preview)
   Scoped under html.ui-v2, which app.js sets for admin sessions only.

   Design read: dark video-editor product UI, calm minimal language, existing
   periwinkle/violet brand accent kept and executed with restraint.
   Dials: VARIANCE 5 / MOTION 5 / DENSITY 4.

   System locks:
   - Type: Geist (self-hosted variable, OFL) with tabular numerals for data.
   - Shape: controls 10px, cards/panels 14px, modals 18px, pills full-round.
   - Shadows: tinted to the background hue (deep blue-black), never pure black.
   - One accent (periwinkle→violet), status colors unchanged.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/GeistVF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html.ui-v2 {
  --v2-bg: #0b0c10;
  --v2-surface: #12141b;
  --v2-surface-2: #161923;
  --v2-line: rgba(255, 255, 255, .065);
  --v2-line-2: rgba(255, 255, 255, .13);
  --v2-accent: #8da2ff;
  --v2-accent-2: #a779ff;
  --v2-ring: rgba(141, 162, 255, .33);
  --v2-tint: rgba(141, 162, 255, .09);
  --v2-ease: cubic-bezier(.22, .68, .32, 1);
  /* shape lock */
  --v2-r-control: 10px;
  --v2-r-card: 14px;
  --v2-r-modal: 18px;
  /* background-tinted shadows (deep blue-black, not pure black) */
  --v2-shadow-sm: 0 1px 2px rgba(9, 11, 22, .5);
  --v2-shadow-md: 0 8px 24px rgba(9, 11, 22, .45);
  --v2-shadow-lg: 0 14px 44px rgba(9, 11, 22, .55);
}

/* ---- motion primitives ---- */
@keyframes v2-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes v2-scale-in { from { opacity: 0; transform: scale(.965) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes v2-shimmer { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@keyframes v2-breathe { 50% { box-shadow: 0 0 0 7px rgba(141, 162, 255, 0); } }

/* ---- base ---- */
html.ui-v2 body {
  background: var(--v2-bg);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.ui-v2 body::before {
  background:
    radial-gradient(720px 340px at 50% -14%, rgba(141, 162, 255, .075), transparent 70%);
}
/* Fixed film grain breaks digital flatness; pointer-events-none + fixed keeps
   it off the compositor's hot path. */
html.ui-v2 body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.ui-v2 ::selection { background: rgba(141, 162, 255, .32); }
html.ui-v2 * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
html.ui-v2 ::-webkit-scrollbar { width: 8px; height: 8px; }
html.ui-v2 ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }
html.ui-v2 ::-webkit-scrollbar-track { background: transparent; }

/* ---- typography ---- */
html.ui-v2 .h1 { font-size: 26px; letter-spacing: -.55px; text-wrap: balance; }
html.ui-v2 .h2, html.ui-v2 .chooser-h, html.ui-v2 .wait-title, html.ui-v2 .studio-h { letter-spacing: -.5px; text-wrap: balance; }
html.ui-v2 .sub, html.ui-v2 .chooser-sub, html.ui-v2 .wait-body { max-width: 62ch; }
/* Data reads in tabular figures everywhere it counts. */
html.ui-v2 .virtual-time,
html.ui-v2 .tl-seg-dur,
html.ui-v2 .merge-clip-dur,
html.ui-v2 .merge-clip-time,
html.ui-v2 .cp-clip-dur,
html.ui-v2 .cp-clip-conf,
html.ui-v2 .stat-val,
html.ui-v2 .wait-progress span,
html.ui-v2 .pill { font-variant-numeric: tabular-nums; }

/* ---- flat surface replaces liquid glass ---- */
html.ui-v2 .glass {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--v2-shadow-sm);
}
html.ui-v2 .glass::after { display: none; }

/* ---- topbar ---- */
html.ui-v2 .topbar,
html.ui-v2 .studio-top {
  background: rgba(11, 12, 16, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--v2-line);
  box-shadow: none;
}
html.ui-v2 .brand-logo { filter: none; }
html.ui-v2 .tab {
  position: relative;
  border-radius: var(--v2-r-control);
  padding: 7px 14px;
  transition: color .16s var(--v2-ease), background .16s var(--v2-ease);
}
html.ui-v2 .tab:hover { background: rgba(255, 255, 255, .045); }
html.ui-v2 .tab.active {
  background: var(--v2-tint);
  border-color: transparent;
  color: #dbe2ff;
  box-shadow: inset 0 0 0 1px rgba(141, 162, 255, .28);
}
html.ui-v2 .product-badge {
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(141, 162, 255, .16), rgba(167, 121, 255, .14));
  border-color: rgba(141, 162, 255, .3);
}
html.ui-v2 .version-tag { background: transparent; border-color: var(--v2-line); }

/* ---- view + card entrances (sequence communicates scan order) ---- */
html.ui-v2 .wrap { animation: v2-in .24s var(--v2-ease) both; }
html.ui-v2 .grid > .card,
html.ui-v2 .tgrid > .tcard,
html.ui-v2 .vcard {
  animation: v2-in .34s var(--v2-ease) backwards;
}
html.ui-v2 .grid > .card:nth-child(1) { animation-delay: .02s; }
html.ui-v2 .grid > .card:nth-child(2) { animation-delay: .05s; }
html.ui-v2 .grid > .card:nth-child(3) { animation-delay: .08s; }
html.ui-v2 .grid > .card:nth-child(4) { animation-delay: .11s; }
html.ui-v2 .grid > .card:nth-child(5) { animation-delay: .14s; }
html.ui-v2 .grid > .card:nth-child(6) { animation-delay: .17s; }
html.ui-v2 .grid > .card:nth-child(7) { animation-delay: .2s; }
html.ui-v2 .grid > .card:nth-child(8) { animation-delay: .23s; }
html.ui-v2 .grid > .card:nth-child(n+9) { animation-delay: .26s; }

/* ---- buttons ---- */
html.ui-v2 .btn {
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-control);
  backdrop-filter: none;
  font-weight: 550;
  transition: border-color .16s var(--v2-ease), background .16s var(--v2-ease),
              transform .16s var(--v2-ease), box-shadow .16s var(--v2-ease);
}
html.ui-v2 .btn:hover {
  background: #1b1f2b;
  border-color: rgba(141, 162, 255, .4);
  transform: translateY(-1px);
}
html.ui-v2 .btn:active { transform: scale(.985); }
html.ui-v2 .btn.primary {
  background: linear-gradient(135deg, #8da2ff, #a779ff);
  color: #0e0f16;
  font-weight: 650;
  box-shadow: 0 2px 12px rgba(141, 162, 255, .28);
}
html.ui-v2 .btn.primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 4px 18px rgba(141, 162, 255, .4);
}
html.ui-v2 .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
html.ui-v2 .btn.ghost:hover { background: rgba(255, 255, 255, .05); border-color: transparent; color: var(--text); }
html.ui-v2 :where(button, a, input, textarea, select, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 2px;
}

/* ---- inputs ---- */
html.ui-v2 .input,
html.ui-v2 .tp-input,
html.ui-v2 .mode-extra textarea,
html.ui-v2 .mode-extra input {
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-control);
  transition: border-color .16s var(--v2-ease), box-shadow .16s var(--v2-ease);
}
html.ui-v2 .input:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 3px var(--v2-ring); }

/* ---- cards ---- */
html.ui-v2 .card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  box-shadow: none;
  transition: border-color .18s var(--v2-ease), transform .18s var(--v2-ease), box-shadow .18s var(--v2-ease);
}
html.ui-v2 .card:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 162, 255, .32);
  box-shadow: var(--v2-shadow-md);
}
html.ui-v2 .card.sel {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-ring), var(--v2-shadow-md);
}
html.ui-v2 .card.sel .tick { animation: v2-pop .28s var(--v2-ease); box-shadow: 0 0 12px rgba(141, 162, 255, .55); }
html.ui-v2 .pill {
  background: transparent;
  border-color: var(--v2-line-2);
  backdrop-filter: none;
}

/* ---- dropzone + composed empty state ---- */
html.ui-v2 .drop {
  border: 1.5px dashed var(--v2-line-2);
  background: rgba(255, 255, 255, .015);
  border-radius: var(--v2-r-card);
  transition: border-color .18s var(--v2-ease), background .18s var(--v2-ease), transform .18s var(--v2-ease);
}
html.ui-v2 .drop:hover { border-color: rgba(141, 162, 255, .45); background: rgba(141, 162, 255, .04); }
html.ui-v2 .drop.hover {
  border-color: var(--v2-accent);
  background: var(--v2-tint);
  transform: scale(1.004);
}
html.ui-v2 .empty {
  border: 1px dashed var(--v2-line-2);
  border-radius: var(--v2-r-card);
  background: rgba(255, 255, 255, .012);
  padding: 56px 24px;
}

/* ---- progress (shimmer = "still working" feedback) ---- */
html.ui-v2 .progress { background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
html.ui-v2 .progress > i { box-shadow: none; position: relative; overflow: hidden; }
html.ui-v2 .progress > i::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: v2-shimmer 1.6s var(--v2-ease) infinite;
}
html.ui-v2 .wait-progress i { box-shadow: none; overflow: hidden; position: absolute; }
html.ui-v2 .wait-progress i::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  animation: v2-shimmer 1.6s var(--v2-ease) infinite;
}

/* ---- spinner ---- */
html.ui-v2 .spinner {
  border: 0;
  background:
    conic-gradient(from 0deg, transparent 12%, #8da2ff 42%, #a779ff 58%, transparent 88%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: v2-spin .9s linear infinite;
}

/* ---- badges ---- */
html.ui-v2 .badge { border-radius: 6px; padding: 3px 8px; }
html.ui-v2 .badge.analyzing, html.ui-v2 .badge.assembling, html.ui-v2 .badge.rendering { position: relative; overflow: hidden; }
html.ui-v2 .badge.analyzing::after, html.ui-v2 .badge.assembling::after, html.ui-v2 .badge.rendering::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  animation: v2-shimmer 1.8s var(--v2-ease) infinite;
}

/* ---- modals ---- */
html.ui-v2 .modal-bg { background: rgba(5, 6, 9, .7); backdrop-filter: blur(8px); animation: v2-fade .18s ease-out; }
html.ui-v2 .modal { animation: v2-scale-in .24s var(--v2-ease); border-radius: var(--v2-r-modal); box-shadow: var(--v2-shadow-lg); }
html.ui-v2 .chooser { background: var(--v2-surface); border-radius: var(--v2-r-modal); }
html.ui-v2 .choice { border-radius: var(--v2-r-card); transition: border-color .18s var(--v2-ease), transform .18s var(--v2-ease), box-shadow .18s var(--v2-ease); }
html.ui-v2 .choice.standard {
  background: linear-gradient(135deg, rgba(141, 162, 255, .09), rgba(167, 121, 255, .04));
  border-color: rgba(141, 162, 255, .3);
}
html.ui-v2 .choice.standard:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 162, 255, .6);
  box-shadow: var(--v2-shadow-md);
}
html.ui-v2 .choice-icon { background: var(--v2-tint); border-color: rgba(141, 162, 255, .22); color: #c3cdff; border-radius: var(--v2-r-control); }

/* ---- toast ---- */
html.ui-v2 .toast {
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line-2);
  border-left: 3px solid var(--v2-accent);
  border-radius: var(--v2-r-control);
  box-shadow: var(--v2-shadow-lg);
  transition: opacity .22s var(--v2-ease), transform .22s var(--v2-ease);
}

/* ---- loading experiences ---- */
html.ui-v2 .wait-frame {
  border-color: rgba(141, 162, 255, .3);
  box-shadow: 0 0 44px rgba(141, 162, 255, .1);
}
html.ui-v2 .wait-orbit { border-color: rgba(141, 162, 255, .12); animation-duration: 9s; }
html.ui-v2 .wait-orbit i { box-shadow: 0 0 10px rgba(141, 162, 255, .8); }
html.ui-v2 .wait-title { animation: v2-in .3s var(--v2-ease) both; }
html.ui-v2 .wait-body { animation: v2-in .3s var(--v2-ease) .06s both; }
html.ui-v2 .wait-step { border-radius: var(--v2-r-control); transition: color .2s, border-color .2s, background .2s; }
html.ui-v2 .wait-step.active {
  background: var(--v2-tint);
  border-color: rgba(141, 162, 255, .3);
}
html.ui-v2 .wait-step.active b { animation: v2-breathe 1.5s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(141, 162, 255, .35); }
html.ui-v2 .wait-step.done b { animation: none; }
html.ui-v2 .working-glass { animation: v2-scale-in .26s var(--v2-ease); border-radius: var(--v2-r-modal); }
html.ui-v2 .boot-loader i { background: linear-gradient(90deg, transparent, #8da2ff 40%, #a779ff 60%, transparent); }

/* ---- studio ---- */
html.ui-v2 .clip-panel,
html.ui-v2 .text-panel,
html.ui-v2 .preview-pane,
html.ui-v2 .timeline-wrap,
html.ui-v2 .editor-toolbar,
html.ui-v2 .merge-sidebar,
html.ui-v2 .setup-panel {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  box-shadow: none;
  border-radius: var(--v2-r-card);
}
html.ui-v2 .studio { background: var(--v2-bg); }
html.ui-v2 .studio-editor { animation: v2-in .26s var(--v2-ease) both; }
html.ui-v2 .timeline { background: rgba(0, 0, 0, .32); }
html.ui-v2 .tl-seg { transition: border-color .14s var(--v2-ease), transform .14s var(--v2-ease), box-shadow .14s var(--v2-ease); }
html.ui-v2 .cp-clip { background: rgba(255, 255, 255, .015); transition: border-color .16s var(--v2-ease), transform .16s var(--v2-ease); }
html.ui-v2 .cp-clip:hover { border-color: rgba(141, 162, 255, .35); transform: translateY(-1px); }
html.ui-v2 .cp-clip.sel { border-color: var(--v2-accent); box-shadow: 0 0 0 2px var(--v2-ring); }
html.ui-v2 .cp-add { transition: background .14s var(--v2-ease), color .14s var(--v2-ease); }
html.ui-v2 .save-state { border-radius: 999px; }

/* ---- merge / selection flow ---- */
html.ui-v2 .merge-clip-card {
  background: var(--v2-surface);
  border-color: var(--v2-line);
  box-shadow: none;
  border-radius: var(--v2-r-card);
  animation: v2-in .3s var(--v2-ease) backwards;
  transition: border-color .16s var(--v2-ease), transform .16s var(--v2-ease), box-shadow .16s var(--v2-ease);
}
html.ui-v2 .merge-clip-grid > .merge-clip-card:nth-child(1) { animation-delay: .02s; }
html.ui-v2 .merge-clip-grid > .merge-clip-card:nth-child(2) { animation-delay: .05s; }
html.ui-v2 .merge-clip-grid > .merge-clip-card:nth-child(3) { animation-delay: .08s; }
html.ui-v2 .merge-clip-grid > .merge-clip-card:nth-child(4) { animation-delay: .11s; }
html.ui-v2 .merge-clip-grid > .merge-clip-card:nth-child(n+5) { animation-delay: .14s; }
html.ui-v2 .merge-clip-card:hover { border-color: rgba(141, 162, 255, .4); }
html.ui-v2 .merge-clip-card.selected {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-ring);
}
html.ui-v2 .merge-clip-check { animation: v2-pop .26s var(--v2-ease); background: var(--v2-accent); color: #0e0f16; }
html.ui-v2 .detect-tabs { background: rgba(0, 0, 0, .25); border-color: var(--v2-line); border-radius: var(--v2-r-control); }
html.ui-v2 .detect-tab { transition: background .16s var(--v2-ease), color .16s var(--v2-ease); }
html.ui-v2 .detect-tab.active { background: var(--v2-tint); box-shadow: inset 0 0 0 1px rgba(141, 162, 255, .35); color: #dbe2ff; }
html.ui-v2 .detect-tab.active small { color: #aebaff; }
html.ui-v2 .audio-choice { border-radius: var(--v2-r-card); background: var(--v2-surface); border: 1px solid var(--v2-line); }
html.ui-v2 .audio-choice:hover { border-color: rgba(141, 162, 255, .3); }
html.ui-v2 .audio-choice.selected {
  border-color: var(--v2-accent);
  background: linear-gradient(145deg, rgba(141, 162, 255, .09), var(--v2-surface));
  box-shadow: 0 0 0 3px var(--v2-ring);
}
html.ui-v2 .extend-btn { border-radius: 6px; transition: background .14s var(--v2-ease), color .14s var(--v2-ease), border-color .14s var(--v2-ease); }
html.ui-v2 .extend-btn:hover { border-color: rgba(141, 162, 255, .4); background: var(--v2-tint); color: #dbe2ff; }

/* ---- admin / insights ---- */
html.ui-v2 .statcard { border-radius: var(--v2-r-card); animation: v2-in .3s var(--v2-ease) backwards; }
html.ui-v2 .statgrid > .statcard:nth-child(1) { animation-delay: .02s; }
html.ui-v2 .statgrid > .statcard:nth-child(2) { animation-delay: .06s; }
html.ui-v2 .statgrid > .statcard:nth-child(3) { animation-delay: .1s; }
html.ui-v2 .statgrid > .statcard:nth-child(4) { animation-delay: .14s; }
html.ui-v2 .statgrid > .statcard:nth-child(n+5) { animation-delay: .18s; }
html.ui-v2 .tcard:hover, html.ui-v2 .vcard:hover { box-shadow: var(--v2-shadow-md); }
html.ui-v2 .chip { transition: border-color .15s var(--v2-ease), color .15s var(--v2-ease), background .15s var(--v2-ease); }
html.ui-v2 .chip:hover, html.ui-v2 .chip.on { background: var(--v2-tint); }

/* ---- upload bar ---- */
html.ui-v2 .upbar { border-radius: var(--v2-r-card); animation: v2-in .26s var(--v2-ease); }

/* Grain and entrance motion collapse under reduced motion (the global
   app.css reduced-motion rule already freezes animations; this also removes
   the static grain texture for users who prefer reduced transparency). */
@media (prefers-reduced-transparency: reduce) {
  html.ui-v2 body::after { display: none; }
  html.ui-v2 .topbar, html.ui-v2 .studio-top { background: #0b0c10; backdrop-filter: none; -webkit-backdrop-filter: none; }
}