/* ═══════════════════════════════════════════════════════════════
   CorpusClip — ui.css
   Design System: 20 named components from cylinder wireframe
   
   TOKENS  → :root variables
   SHELL   → .ui-shell          (420px centered container)
   TOPBAR  → .ui-topbar         (sticky header)
   PLAYER  → .ui-player         (9:14 vertical video frame)
   BADGE   → .ui-badge          (overlay badge: id, status)
   SPINNER → .ui-spinner        (processing % spinner)
   PLAYBTN → .ui-play           (glass play/pause)
   PIPE    → .ui-pipe           (5-step pipeline overlay)
   WAVE    → .ui-wave           (waveform scrubber)
   INFO    → .ui-info           (title + meta panel)
   TRANSPORT → .ui-transport    (prev/play/next controls)
   ACTIONS → .ui-actions        (download/share/captions)
   CLIPLIST → .ui-clips         (bottom sheet clip list)
   CLIPROW → .ui-clip           (single clip row)
   COMPOSER → .ui-composer      (bottom fixed input bar)
   CYLINDER → .ui-cyl           (fullscreen drum picker)
   CYLCARD → .ui-cyl-card       (single drum card)
   CYLNAV  → .ui-cyl-nav        (up/down arrows + counter)
   CYLFOOT → .ui-cyl-foot       (bottom info + CTA)
   CYLRING → .ui-cyl-ring       (center highlight band)
   ═══════════════════════════════════════════════════════════════ */

/* ═══ TOKENS ═══ */
:root {
  --bg:       #08080d;
  --s1:       #0f0f16;
  --s2:       #15151e;
  --s3:       #1c1c28;
  --s4:       #252533;
  --lime:     #c8ff2e;
  --lime-alt: #a8e610;
  --lime-dim: #5a7a14;
  --lime-bg:  rgba(200,255,46,0.07);
  --lime-glow:rgba(200,255,46,0.3);
  --white:    #efefef;
  --text:     #dddde4;
  --sub:      #7e7e96;
  --dim:      #3e3e52;
  --border:   rgba(255,255,255,0.05);
  --danger:   #ff4d6a;
  --success:  #10b981;
  --mono:     'JetBrains Mono','SF Mono','Fira Code',monospace;
  --sans:     'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --r:        20px;
  --r-sm:     12px;
  --r-xs:     8px;
  --shadow:   0 12px 48px rgba(0,0,0,0.7);
  --shadow-sm:0 4px 16px rgba(0,0,0,0.4);
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);
}

/* ═══ 1. SHELL ═══ */
.ui-shell { max-width:420px;margin:0 auto;background:var(--bg);min-height:100vh;font-family:var(--sans);color:var(--text);position:relative;overflow-x:hidden }
.ui-shell::-webkit-scrollbar { width:0;height:0 }

/* ═══ 2. TOPBAR ═══ */
.ui-topbar { display:flex;align-items:center;justify-content:space-between;padding:14px 16px 4px;position:sticky;top:0;z-index:30;background:linear-gradient(var(--bg),rgba(8,8,13,0.9));backdrop-filter:blur(12px) }
.ui-topbar__btn { background:none;border:none;color:var(--sub);cursor:pointer;padding:4px;display:grid;place-items:center }
.ui-topbar__brand { display:flex;align-items:center;gap:5px }
.ui-topbar__mark { width:20px;height:20px;border-radius:5px;background:var(--lime);display:grid;place-items:center;font-size:8px;font-weight:900;color:var(--bg) }
.ui-topbar__name { font-size:12px;font-weight:700;letter-spacing:-0.02em }

/* ═══ 3. PLAYER ═══ */
.ui-player { padding:6px 14px 0 }
.ui-player__frame { width:100%;aspect-ratio:9/14;border-radius:var(--r);overflow:hidden;position:relative;box-shadow:var(--shadow),0 0 50px rgba(200,255,46,0.04) }
.ui-player__frame--entering { animation:ui-zoomIn .6s var(--ease-spring) }
.ui-player__thumb { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.ui-player__grad { position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,13,0.4) 0%,transparent 30%,transparent 50%,rgba(8,8,13,0.7) 80%,rgba(8,8,13,0.95) 100%) }
.ui-player__center { position:absolute;inset:0;display:grid;place-items:center }

/* ═══ 4. BADGE ═══ */
.ui-badge { position:absolute;padding:3px 8px;border-radius:var(--r-xs);background:rgba(8,8,13,0.75);backdrop-filter:blur(8px);font-size:9px;font-weight:800;font-family:var(--mono) }
.ui-badge--id { top:12px;left:12px;color:var(--lime);border:1px solid rgba(200,255,46,0.1) }
.ui-badge--status { top:12px;right:12px;font-weight:700;display:flex;align-items:center;gap:4px }
.ui-badge--ok { color:var(--lime);border:1px solid rgba(200,255,46,0.12) }
.ui-badge--err { color:var(--danger);border:1px solid rgba(255,77,106,0.12) }
.ui-badge__dot { width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor }

/* ═══ 5. SPINNER ═══ */
.ui-spinner { width:72px;height:72px;border-radius:50%;border:3px solid rgba(200,255,46,0.15);border-top-color:var(--lime);animation:ui-spin .8s linear infinite;display:grid;place-items:center;box-shadow:0 0 24px var(--lime-glow) }
.ui-spinner__pct { font-size:13px;font-weight:800;font-family:var(--mono);color:var(--lime);text-shadow:0 0 16px var(--lime-glow) }

/* ═══ 6. PLAYBTN ═══ */
.ui-play { width:56px;height:56px;border-radius:50%;background:rgba(8,8,13,0.5);backdrop-filter:blur(16px);border:2px solid rgba(200,255,46,0.2);color:var(--lime);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 16px var(--lime-glow);transition:all .2s }
.ui-play:hover { box-shadow:0 0 24px var(--lime-glow);border-color:rgba(200,255,46,0.4) }

/* ═══ 7. PIPE (pipeline overlay) ═══ */
.ui-pipe { position:absolute;bottom:0;left:0;right:0;padding:0 14px 14px }
.ui-pipe__steps { display:flex;gap:3px;margin-bottom:10px }
.ui-pipe__step { flex:1 }
.ui-pipe__bar { height:3px;border-radius:2px;transition:all .4s;overflow:hidden;position:relative }
.ui-pipe__bar--done { background:var(--lime);box-shadow:0 0 4px var(--lime) }
.ui-pipe__bar--active { background:rgba(200,255,46,0.35) }
.ui-pipe__bar--active::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--lime),transparent);animation:ui-shimmer 1.5s infinite }
.ui-pipe__bar--pending { background:rgba(255,255,255,0.06) }
.ui-pipe__label { font-size:6px;font-weight:700;text-align:center;margin-top:3px;text-transform:uppercase;letter-spacing:0.06em;transition:color .3s }
.ui-pipe__label--done { color:var(--lime) }
.ui-pipe__label--active { color:var(--white) }
.ui-pipe__label--pending { color:var(--dim) }
.ui-pipe__total { height:2px;border-radius:1px;background:rgba(255,255,255,0.05);overflow:hidden }
.ui-pipe__fill { height:100%;border-radius:1px;background:linear-gradient(90deg,var(--lime-dim),var(--lime));box-shadow:0 0 6px var(--lime);transition:width .3s }

/* ═══ 8. WAVE (waveform scrubber) ═══ */
.ui-wave { position:absolute;bottom:0;left:0;right:0;padding:0 12px 12px }
.ui-wave__bars { display:flex;align-items:flex-end;gap:1px;height:24px;margin-bottom:4px }
.ui-wave__bar { flex:1;border-radius:1px;transition:background .1s;min-width:1px }
.ui-wave__bar--on { background:var(--lime);box-shadow:0 0 3px rgba(200,255,46,0.4) }
.ui-wave__bar--off { background:rgba(255,255,255,0.08) }
.ui-wave__time { display:flex;justify-content:space-between }
.ui-wave__t { font-size:8px;font-family:var(--mono) }
.ui-wave__t--cur { color:rgba(200,255,46,0.55) }
.ui-wave__t--dur { color:var(--dim) }

/* ═══ 9. INFO ═══ */
.ui-info { padding:12px 18px 6px;text-align:center }
.ui-info__title { font-size:14px;font-weight:700;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical }
.ui-info__meta { font-size:10px;color:var(--sub);margin-top:3px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap }
.ui-tag { padding:2px 7px;border-radius:6px;font-size:9px;font-weight:700 }
.ui-tag--arch { background:var(--lime-bg);color:var(--lime) }
.ui-tag--hook { display:inline-flex;align-items:center;gap:2px;color:var(--lime);font-weight:600 }
.ui-tag--dur { font-family:var(--mono);color:var(--dim);font-size:9px }
.ui-score { font-family:var(--mono);color:var(--lime);font-size:12px;font-weight:800;text-shadow:0 0 8px var(--lime-glow) }

/* ═══ 10. TRANSPORT ═══ */
.ui-transport { display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px }
.ui-ctrl { border-radius:50%;border:1px solid var(--border);background:var(--s2);color:var(--sub);display:grid;place-items:center;cursor:pointer;transition:all .15s }
.ui-ctrl:hover { border-color:var(--lime);color:var(--lime) }
.ui-ctrl--sm { width:36px;height:36px }
.ui-ctrl--main { width:48px;height:48px;background:var(--lime);border:none;color:var(--bg);box-shadow:0 0 18px var(--lime-glow),0 4px 20px rgba(0,0,0,0.4) }

/* ═══ 11. ACTIONS ═══ */
.ui-actions { display:flex;gap:6px;justify-content:center;margin-top:10px }
.ui-action { padding:5px 10px;border-radius:var(--r-xs);background:var(--s2);border:1px solid var(--border);color:var(--sub);font-size:8px;font-weight:600;display:flex;align-items:center;gap:3px;cursor:pointer;font-family:var(--sans);transition:all .15s;text-decoration:none }
.ui-action:hover { border-color:rgba(200,255,46,0.2);color:var(--lime) }
.ui-action--active { border-color:var(--lime);color:var(--lime);background:var(--lime-bg) }
/* Wizard quick chips: lighter + always single-line so the row stays horizontal.
   Scoped variant — does not change .ui-action used elsewhere. */
.cc-qc { background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#dfe5ec;white-space:nowrap;flex-shrink:0 }
.cc-qc svg { opacity:1 }
.cc-qc:hover { background:rgba(255,255,255,.16);border-color:rgba(200,255,46,.3);color:var(--lime) }
.cc-qc-row { display:flex;flex-direction:row;gap:6px;padding:8px 14px 6px;flex-wrap:nowrap;overflow-x:auto;justify-content:center;scrollbar-width:none }
.cc-qc-row::-webkit-scrollbar { display:none }

/* ═══ 12. CLIPLIST ═══ */
.ui-clips { margin-top:10px;border-radius:18px 18px 0 0;background:var(--s1);border-top:1px solid rgba(200,255,46,0.04) }
.ui-clips__handle { text-align:center;padding:8px 16px 4px;cursor:pointer }
.ui-clips__bar { width:24px;height:3px;border-radius:2px;background:var(--dim);margin:0 auto 8px }
.ui-clips__header { font-size:9px;font-weight:700;color:var(--lime);text-transform:uppercase;letter-spacing:0.1em }

/* ═══ 13. CLIPROW ═══ */
.ui-clip { display:flex;align-items:center;gap:10px;padding:9px 10px;border-left:3px solid transparent;cursor:pointer;transition:all .2s;animation:ui-slideUp .3s ease both }
.ui-clip--on { background:var(--lime-bg);border-left-color:var(--lime);border-radius:0 10px 10px 0 }
.ui-clip__thumb { width:36px;height:50px;border-radius:8px;overflow:hidden;flex-shrink:0;position:relative;border:1.5px solid var(--border);transition:all .2s }
.ui-clip--on .ui-clip__thumb { border-color:rgba(200,255,46,0.3);box-shadow:0 0 8px rgba(200,255,46,0.12) }
.ui-clip__thumb img,.ui-clip__thumb video { width:100%;height:100%;object-fit:cover;display:block }
.ui-clip__overlay { position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,0.6));display:grid;place-items:center }
.ui-clip__mini-play { width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,0.2);color:var(--white);display:grid;place-items:center }
.ui-clip--on .ui-clip__mini-play { background:var(--lime);color:var(--bg) }
.ui-clip__body { flex:1;min-width:0 }
.ui-clip__title { font-size:10px;font-weight:500;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.ui-clip--on .ui-clip__title { font-weight:700;color:var(--text) }
.ui-clip__meta { font-size:8px;color:var(--dim);display:flex;gap:6px;margin-top:2px }
.ui-clip__score { font-size:14px;font-weight:800;font-family:var(--mono);color:var(--dim) }
.ui-clip--on .ui-clip__score { color:var(--lime);text-shadow:0 0 8px var(--lime-glow) }

/* Stagger */
.ui-clip:nth-child(1){animation-delay:0ms}.ui-clip:nth-child(2){animation-delay:35ms}.ui-clip:nth-child(3){animation-delay:70ms}.ui-clip:nth-child(4){animation-delay:105ms}.ui-clip:nth-child(5){animation-delay:140ms}.ui-clip:nth-child(6){animation-delay:175ms}

/* ═══ 14. COMPOSER ═══ */
.ui-composer { position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:420px;padding:8px 12px 12px;background:linear-gradient(transparent,var(--bg) 35%);z-index:40;display:flex;gap:7px;align-items:center }
.ui-composer__picker { width:40px;height:40px;border-radius:10px;background:var(--s2);border:1px solid rgba(200,255,46,0.08);color:var(--lime);display:grid;place-items:center;cursor:pointer;position:relative;flex-shrink:0;transition:all .15s }
.ui-composer__picker:hover { border-color:rgba(200,255,46,0.25);box-shadow:0 0 12px rgba(200,255,46,0.1) }
.ui-composer__badge { position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:var(--lime);color:var(--bg);font-size:7px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 6px var(--lime) }
.ui-composer__input { flex:1;display:flex;align-items:center;background:var(--s2);border-radius:10px;border:1px solid var(--border);padding:0 10px }
.ui-composer__input input { flex:1;border:none;background:none;padding:9px 0;font-size:11px;color:var(--text);outline:none;font-family:var(--sans) }
.ui-composer__input input::placeholder { color:var(--dim) }
.ui-composer__send { width:40px;height:40px;border-radius:10px;background:var(--lime);border:none;color:var(--bg);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 10px var(--lime);flex-shrink:0 }

/* ═══ 15. CYLINDER (fullscreen overlay) ═══ */
.ui-cyl { position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;animation:ui-fadeIn .3s ease }
.ui-cyl__head { display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;flex-shrink:0 }
.ui-cyl__close { background:none;border:none;color:var(--sub);cursor:pointer;padding:4px }
.ui-cyl__title { font-size:12px;font-weight:700;color:var(--lime);text-transform:uppercase;letter-spacing:0.1em;display:flex;align-items:center;gap:6px }
.ui-cyl__viewport { flex:1;perspective:800px;perspective-origin:50% 50%;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab;user-select:none;touch-action:none;position:relative }
.ui-cyl__viewport:active { cursor:grabbing }

/* ═══ 16. CYLCARD ═══ */
.ui-cyl-card { position:absolute;border-radius:16px;overflow:hidden;transform-style:preserve-3d;will-change:transform,opacity }
.ui-cyl-card--center { cursor:pointer;box-shadow:0 8px 40px rgba(0,0,0,0.7),0 0 20px rgba(200,255,46,0.18),0 0 0 1.5px rgba(200,255,46,0.2) }
.ui-cyl-card--off { box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 0 1px var(--border);pointer-events:none }
.ui-cyl-card--selecting { transition:all .6s var(--ease-spring)!important;opacity:0!important }
.ui-cyl-card__img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.ui-cyl-card__grad { position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,13,0.92) 0%,rgba(8,8,13,0.4) 40%,rgba(8,8,13,0.1) 60%,rgba(8,8,13,0.3) 100%) }
.ui-cyl-card__glow { position:absolute;inset:-1px;border-radius:17px;border:1.5px solid rgba(200,255,46,0.2);box-shadow:inset 0 0 20px rgba(200,255,46,0.06);pointer-events:none }
.ui-cyl-card__id { position:absolute;top:8px;left:8px;padding:2px 6px;border-radius:6px;background:rgba(8,8,13,0.7);font-size:8px;font-weight:800;font-family:var(--mono) }
.ui-cyl-card__dot { position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--bg) }
.ui-cyl-card__score { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:900;font-family:var(--mono);transition:all .3s }
.ui-cyl-card__score--on { font-size:28px;color:var(--lime);text-shadow:0 0 20px var(--lime-glow) }
.ui-cyl-card__score--off { font-size:20px;color:rgba(255,255,255,0.3) }
.ui-cyl-card__info { position:absolute;bottom:0;left:0;right:0;padding:8px }
.ui-cyl-card__title { font-size:9px;font-weight:700;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.ui-cyl-card__meta { font-size:7px;color:var(--sub);display:flex;gap:6px;margin-top:2px }

/* ═══ 17. CYLNAV ═══ */
.ui-cyl-nav { position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px;align-items:center }
.ui-cyl-nav__btn { width:28px;height:28px;border-radius:50%;background:var(--s2);border:1px solid var(--border);color:var(--sub);display:grid;place-items:center;cursor:pointer;transition:all .15s }
.ui-cyl-nav__btn:hover { border-color:var(--lime);color:var(--lime) }
.ui-cyl-nav__counter { font-size:9px;font-weight:700;font-family:var(--mono);color:var(--lime) }

/* ═══ 18. CYLFOOT ═══ */
.ui-cyl-foot { padding:12px 24px 28px;text-align:center;flex-shrink:0;background:linear-gradient(transparent,var(--bg)) }
.ui-cyl-foot__title { font-size:13px;font-weight:700;color:var(--text) }
.ui-cyl-foot__meta { font-size:10px;color:var(--sub);margin-top:3px }
.ui-cyl-foot__cta { margin-top:12px;padding:10px 28px;border-radius:var(--r-sm);background:var(--lime);border:none;color:var(--bg);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans);box-shadow:0 0 16px var(--lime-glow),0 4px 16px rgba(0,0,0,0.4) }

/* ═══ 19. CYLRING ═══ */
.ui-cyl-ring { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:20px;border:1.5px solid rgba(200,255,46,0.15);background:rgba(200,255,46,0.03);box-shadow:inset 0 0 30px rgba(200,255,46,0.04),0 0 30px rgba(200,255,46,0.06);pointer-events:none }

/* ═══ ANIMATIONS ═══ */
@keyframes ui-spin { to { transform:rotate(360deg) } }
@keyframes ui-fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes ui-slideUp { from { opacity:0;transform:translateY(14px) } to { opacity:1;transform:translateY(0) } }
@keyframes ui-shimmer { 0% { transform:translateX(-100%) } 100% { transform:translateX(250%) } }
@keyframes ui-zoomIn { from { opacity:0;transform:scale(0.3) translateY(40px) } to { opacity:1;transform:scale(1) translateY(0) } }

/* ── Animations ── */
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ─────────────────────────────────────────────────────────────────────────
   Finished-task result view (Reel-first). Assembles the .ui-* look with the
   live theme tokens (--accent resolves to the app brand, currently #a3ff47),
   so a future token change cascades here automatically.
   ───────────────────────────────────────────────────────────────────────── */
.fin{display:flex;flex-direction:column;animation:rcPop .4s cubic-bezier(.34,1.56,.64,1) both}
.fin__bar{display:flex;align-items:center;gap:8px;padding:2px 2px 10px}
.fin__ok{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--accent,#a3ff47)}
.fin__dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.fin__cap{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--muted,#8b98a8);background:var(--surface2,#1a1a1f);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:6px;padding:2px 7px}
.fin__zip{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--accent,#a3ff47);text-decoration:none}
.fin__hero{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.fin__video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.fin__badge{position:absolute;display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:7px;background:rgba(9,9,11,.78);font-size:9px;font-weight:800;font-family:var(--mono);color:var(--accent,#a3ff47);border:1px solid rgba(163,255,71,.14);pointer-events:none;z-index:2}
.fin__badge--id{top:8px;left:8px}
.fin__badge--hook{top:8px;right:8px;font-family:var(--sans),sans-serif}
.fin__cc{position:absolute;bottom:8px;left:8px;padding:1px 6px;border-radius:5px;background:rgba(9,9,11,.78);font-size:8px;font-weight:800;color:var(--accent,#a3ff47);letter-spacing:.3px;pointer-events:none;z-index:2}
.fin__meta{padding:11px 2px 2px;max-width:300px;margin:0 auto;width:100%}
.fin__title{font-size:13px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fin__metarow{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.fin__tag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;font-size:9px;font-weight:700;background:var(--accent-muted,rgba(163,255,71,.08));border:1px solid rgba(163,255,71,.16);color:var(--accent,#a3ff47)}
.fin__dur{font-family:var(--mono);font-size:9px;color:var(--muted,#8b98a8)}
.fin__ring{margin-left:auto;width:40px;height:40px;position:relative;flex-shrink:0}
.fin__ringn{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:900;font-size:13px;color:var(--accent,#a3ff47)}
.fin__acts{display:flex;gap:7px;padding:12px 2px 2px;max-width:300px;margin:0 auto;width:100%}
.fin__act{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;border-radius:11px;font-size:11px;font-weight:700;background:var(--surface2,#1a1a1f);border:1px solid var(--border,rgba(255,255,255,.08));color:var(--text,#fafafa);text-decoration:none;cursor:pointer;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .12s,transform .1s}
.fin__act:active{transform:scale(.97);background:var(--surface3,#242429)}
.fin__act--primary{background:var(--accent,#a3ff47);color:#09090b;border-color:var(--accent,#a3ff47);box-shadow:0 4px 16px rgba(163,255,71,.28)}
.fin__act--primary:active{background:var(--accent-hover,#8bd435)}
.fin__sel{padding:16px 0 2px}
.fin__sellbl{font-size:10px;font-weight:800;color:var(--muted,#8b98a8);text-transform:uppercase;letter-spacing:.1em;padding:0 2px 8px}
.fin__selrow{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.fin__selitem{flex:0 0 auto;width:74px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fin__selthumb{width:74px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;position:relative;border:1.5px solid var(--border,rgba(255,255,255,.08));background:#000;transition:border-color .15s,box-shadow .15s}
.fin__selthumb video{width:100%;height:100%;object-fit:cover;display:block}
.fin__selitem--on .fin__selthumb{border-color:var(--accent,#a3ff47);box-shadow:0 0 10px rgba(163,255,71,.22)}
.fin__selrk{position:absolute;top:3px;left:5px;font-size:8px;font-weight:800;color:var(--accent,#a3ff47);text-shadow:0 1px 2px #000;z-index:2}
.fin__selcc{position:absolute;top:3px;right:4px;font-size:7px;font-weight:800;color:var(--accent,#a3ff47);background:rgba(9,9,11,.7);border-radius:3px;padding:0 3px;z-index:2}
.fin__selscore{position:absolute;bottom:3px;right:4px;font-family:var(--mono);font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000;z-index:2}
.fin__sellabel{font-size:9px;color:var(--muted,#8b98a8);margin-top:4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74px}
.fin__selitem--on .fin__sellabel{color:var(--accent,#a3ff47);font-weight:700}
.fin__cta{margin-top:14px;background:rgba(163,255,71,.05);border:1px solid rgba(163,255,71,.18);border-radius:14px;padding:13px}
.fin__cta--up{background:var(--surface2,#1a1a1f);border-color:var(--border,rgba(255,255,255,.08))}
.fin__ctat{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--accent,#a3ff47)}
.fin__cta--up .fin__ctat{color:var(--text,#fafafa)}
.fin__ctap{font-size:10.5px;color:var(--muted,#8b98a8);line-height:1.5;margin-top:5px}
.fin__ctab{display:block;text-align:center;margin-top:10px;min-height:40px;line-height:40px;border-radius:10px;background:var(--accent,#a3ff47);color:#09090b;font-size:11px;font-weight:800;text-decoration:none}
.fin__cta--up .fin__ctab{background:var(--surface3,#242429);color:var(--accent,#a3ff47);border:1px solid rgba(163,255,71,.25)}