/* ═══════════════════════════════════════════════════
   Viralix — Frontend Styles
   Based on UI Mockup v3
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #070910; --s1: #0c1018; --s2: #111620; --s3: #161d2b; --s4: #1c2436;
  --b0: rgba(255,255,255,.04); --b1: rgba(255,255,255,.07); --b2: rgba(255,255,255,.12); --b3: rgba(255,255,255,.2);
  --t0: #edf0fa; --t1: rgba(237,240,250,.7); --t2: rgba(237,240,250,.38); --t3: rgba(237,240,250,.15);
  --lime: #0ef57a; --lime-d: rgba(14,245,122,.06); --lime-b: rgba(14,245,122,.2);
  --amber: #ffb520; --amber-d: rgba(255,181,32,.07); --amber-b: rgba(255,181,32,.22);
  --blue: #4f82ff; --blue-d: rgba(79,130,255,.07); --blue-b: rgba(79,130,255,.22);
  --red: #ff4d6a; --red-d: rgba(255,77,106,.06); --red-b: rgba(255,77,106,.2);
  --violet: #9b6aff; --violet-d: rgba(155,106,255,.07); --violet-b: rgba(155,106,255,.2);
  --pink: #ff72c0; --pink-d: rgba(255,114,192,.06); --pink-b: rgba(255,114,192,.18);
  --fh: 'Barlow Condensed', sans-serif; --fb: 'Barlow', sans-serif; --fm: 'JetBrains Mono', monospace;
  --r: 8px; --sidebar: 220px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--t0); font-family: var(--fb); font-size: 13px; line-height: 1.6; }

/* Skip to content link */
.skip-link { position: absolute; top: -100px; left: 8px; padding: 8px 16px; background: var(--lime); color: #070910; font-weight: 700; font-size: 13px; border-radius: 0 0 var(--r) var(--r); z-index: 9999; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 0; }

/* Reset h1 used in topbar */
h1.topbar-title { font-family: var(--fh); font-size: 16px; font-weight: 700; letter-spacing: .3px; margin: 0; line-height: inherit; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.app { display: block; }
.sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar); height: 100vh; background: var(--s1); border-right: 1px solid var(--b1); display: flex; flex-direction: column; z-index: 100; overflow-y: auto; contain: layout style; }
.main { margin-left: var(--sidebar); min-height: 100vh; }

/* SIDEBAR */
.logo-area { padding: 18px 16px 14px; border-bottom: 1px solid var(--b1); }
.logo { font-family: var(--fh); font-size: 20px; font-weight: 800; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.logo-icon { width: 26px; height: 26px; background: var(--lime); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 14px; height: 14px; }
.logo span { color: var(--lime); }
.logo-v { font-family: var(--fm); font-size: 9px; color: var(--t2); letter-spacing: 2px; text-transform: uppercase; margin-top: 1px; }

.nav-section { padding: 10px 12px 4px; font-family: var(--fm); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--t3); }
nav ul { list-style: none; padding: 0 6px; }
nav ul li { margin-bottom: 1px; }
nav ul li a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r); font-size: 12px; font-weight: 500; color: var(--t1); cursor: pointer; transition: background .12s; text-decoration: none; }
nav ul li a:hover { background: var(--b0); }
nav ul li a.active { background: var(--lime-d); color: var(--lime); }
nav ul li a.active .nav-icon { color: var(--lime); }
.nav-icon { width: 14px; height: 14px; opacity: .6; flex-shrink: 0; }
.active .nav-icon { opacity: 1; }
.nbadge { margin-left: auto; background: var(--red); color: #fff; font-family: var(--fm); font-size: 9px; padding: 1px 5px; border-radius: 20px; line-height: 1.5; }

.credits-box { margin: auto 10px 10px; padding: 12px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); }
.cb-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cb-label { font-family: var(--fm); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); }
.cb-val { font-family: var(--fm); font-size: 11px; color: var(--amber); font-weight: 500; }
.cb-bar-wrap { height: 3px; background: var(--b1); border-radius: 2px; overflow: hidden; }
.cb-bar-fill { height: 100%; background: var(--amber); border-radius: 2px; width: 62%; }
.cb-sub { font-size: 10px; color: var(--t2); margin-top: 6px; }

.user-box { padding: 10px 12px; border-top: 1px solid var(--b1); display: flex; align-items: center; gap: 8px; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #4f82ff, #9b6aff); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.user-name { font-size: 12px; font-weight: 600; }
.user-plan { font-family: var(--fm); font-size: 9px; color: var(--lime); }

/* TOP BAR */
.topbar { position: sticky; top: 0; z-index: 50; height: 48px; border-bottom: 1px solid var(--b1); display: flex; align-items: center; padding: 0 24px; gap: 12px; background: var(--s1); contain: layout style; }
.topbar-title { font-family: var(--fh); font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.topbar-sub { font-size: 11px; color: var(--t2); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }

.btn { padding: 6px 14px; border-radius: var(--r); border: 1px solid; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--fb); transition: all .12s; display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost { background: transparent; border-color: var(--b2); color: var(--t1); }
.btn-ghost:hover { background: var(--b0); border-color: var(--b3); }
.btn-primary { background: var(--lime); border-color: var(--lime); color: #070910; }
.btn-primary:hover { opacity: .9; }
.btn-amber { background: var(--amber-d); border-color: var(--amber-b); color: var(--amber); }
.btn-danger { background: var(--red-d); border-color: var(--red-b); color: var(--red); }
.btn-sm { padding: 4px 10px; font-size: 11px; }

.content { padding: 24px; }
.screen { display: none; }
.screen.active { display: block; }

/* STAT CARDS */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.stat { padding: 14px 16px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); contain: layout style; }
.stat-label { font-family: var(--fm); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); margin-bottom: 6px; }
.stat-val { font-family: var(--fh); font-size: 28px; font-weight: 700; line-height: 1; min-height: 28px; }
.stat-sub { font-size: 11px; color: var(--t2); margin-top: 3px; }
.stat-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--fm); font-size: 9px; padding: 2px 6px; border-radius: 3px; margin-top: 4px; }
.up { color: var(--lime); background: var(--lime-d); }
.down { color: var(--red); background: var(--red-d); }

/* GRID */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.card { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); overflow: hidden; contain: layout style; }
.card-head { padding: 12px 16px; border-bottom: 1px solid var(--b1); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-family: var(--fh); font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.card-body { padding: 14px 16px; }

/* TAGS */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-family: var(--fm); font-size: 9px; letter-spacing: .5px; border: 1px solid; white-space: nowrap; }
.t-lime { color: var(--lime); border-color: var(--lime-b); background: var(--lime-d); }
.t-amber { color: var(--amber); border-color: var(--amber-b); background: var(--amber-d); }
.t-blue { color: var(--blue); border-color: var(--blue-b); background: var(--blue-d); }
.t-red { color: var(--red); border-color: var(--red-b); background: var(--red-d); }
.t-violet { color: var(--violet); border-color: var(--violet-b); background: var(--violet-d); }
.t-pink { color: var(--pink); border-color: var(--pink-b); background: var(--pink-d); }

/* CAMPAIGN LIST */
.camp-item { padding: 12px 16px; border-bottom: 1px solid var(--b0); display: grid; grid-template-columns: 24px 1fr 180px 90px 60px; align-items: center; gap: 10px; transition: background .12s; cursor: pointer; }
.camp-item:hover { background: var(--b0); }
.camp-item:last-child { border-bottom: none; }
.camp-num { font-family: var(--fm); font-size: 10px; color: var(--t2); }
.camp-name { font-size: 12px; font-weight: 600; }
.camp-sub { font-size: 10px; color: var(--t2); margin-top: 1px; }
.camp-progress { display: flex; gap: 3px; align-items: center; }
.cp-step { height: 4px; width: 22px; border-radius: 2px; }
.cp-done { background: var(--lime); }
.cp-active { background: var(--amber); animation: pulse 1.5s ease-in-out infinite; }
.cp-wait { background: var(--b2); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.camp-tier { text-align: center; }
.camp-score { font-family: var(--fm); font-size: 11px; color: var(--t1); text-align: right; }

/* VIDEO GRID */
.vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vid-card { border-radius: var(--r); overflow: hidden; background: var(--s3); border: 1px solid var(--b1); cursor: pointer; transition: border-color .15s; }
.vid-card:hover { border-color: var(--b2); }
.vid-thumb { aspect-ratio: 9/16; position: relative; background: var(--s4); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vid-play { width: 28px; height: 28px; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.vid-meta { padding: 8px 10px; }
.vid-name { font-size: 11px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-stats { display: flex; justify-content: space-between; align-items: center; }
.vid-views { font-family: var(--fm); font-size: 9px; color: var(--t2); }
.vid-tier { font-family: var(--fm); font-size: 9px; padding: 1px 6px; border-radius: 3px; }
.tier-a { color: var(--lime); background: var(--lime-d); }
.tier-b { color: var(--blue); background: var(--blue-d); }
.tier-c { color: var(--amber); background: var(--amber-d); }

/* BRIEF FORM */
.form-row { margin-bottom: 16px; }
.form-label { font-family: var(--fm); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); margin-bottom: 6px; display: block; }
.form-input { width: 100%; background: var(--s3); border: 1px solid var(--b2); border-radius: var(--r); padding: 8px 12px; color: var(--t0); font-family: var(--fb); font-size: 12px; outline: none; transition: border-color .12s; }
.form-input:focus { border-color: var(--lime-b); }
.form-input::placeholder { color: var(--t3); }
textarea.form-input { resize: none; min-height: 80px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
select.form-input { appearance: none; cursor: pointer; }
select.form-input optgroup { font-weight: 700; }
select.form-input option { font-weight: 400; padding: 4px 8px; }

/* UPLOAD ZONE */
.upload-zone { border: 2px dashed var(--b2); border-radius: var(--r); padding: 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: var(--s2); }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--lime); background: var(--lime-d); }
.upload-zone-mini { padding: 14px; }
.ref-image-grid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ref-image-grid .ref-thumb { position: relative; display: inline-block; }
.ref-image-grid .ref-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--b3); }
.ref-image-grid .ref-thumb .ref-remove { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: var(--red); color: #fff; border: none; border-radius: 50%; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* CONTENT STYLE */
#content-styles .hook-style-btn.selected { color: var(--lime); border-color: var(--lime-b); background: var(--lime-d); }

/* MODE SELECTOR */
.mode-selector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 768px) { .mode-selector-grid { grid-template-columns: repeat(2, 1fr); } }
.mode-card { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); padding: 20px 16px; cursor: pointer; text-align: center; transition: all .2s; }
.mode-card:hover { border-color: var(--lime); background: var(--lime-d); transform: translateY(-2px); }
.mode-card.mode-card-highlight { border-color: var(--lime-b); }
.mode-card.mode-card-recommended { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime-b); }
.mode-card .mode-icon { font-size: 28px; margin-bottom: 8px; }
.mode-card .mode-title { font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.mode-card .mode-desc { font-size: 10px; color: var(--t2); line-height: 1.4; }

/* READINESS STRIP */
.readiness-strip { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); padding: 10px 14px; }
.readiness-title { font-family: var(--fm); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); margin-bottom: 8px; }
.readiness-items { display: flex; gap: 12px; flex-wrap: wrap; }
.readiness-item { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.readiness-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.readiness-dot.ready { background: var(--lime); }
.readiness-dot.missing { background: var(--red); }
.readiness-dot.optional { background: var(--amber); }

/* GUIDED BUILDER */
.guided-stepper { display: flex; gap: 2px; margin-bottom: 14px; background: var(--s2); border-radius: var(--r); overflow: hidden; border: 1px solid var(--b1); }
.guided-step { flex: 1; text-align: center; padding: 10px 8px; font-size: 11px; font-weight: 600; color: var(--t2); cursor: pointer; transition: all .2s; border-right: 1px solid var(--b1); }
.guided-step:last-child { border-right: none; }
.guided-step.active { background: var(--lime-d); color: var(--lime); }
.guided-step.completed { background: var(--b2); color: var(--t1); }
.guided-step.skipped { opacity: 0.4; text-decoration: line-through; }
.guided-panel { display: none; }
.guided-panel.active { display: block; }

/* DELTA EDITOR */
.delta-grid { display: flex; flex-direction: column; gap: 6px; }
.delta-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--b2); border: 1px solid var(--b1); border-radius: 6px; }
.delta-item.delta-changed { border-color: var(--amber); background: rgba(245, 158, 11, 0.05); }
.delta-label { font-size: 11px; font-weight: 600; color: var(--t1); min-width: 100px; }
.delta-value { font-size: 11px; color: var(--t2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delta-toggle { font-size: 10px !important; min-width: 60px; }
.delta-toggle[data-action="change"] { color: var(--amber) !important; border-color: var(--amber) !important; }

/* TEMPLATE / DUPLICATE PICKER */
.picker-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--b2); border: 1px solid var(--b3); border-radius: 6px; cursor: pointer; transition: border-color .2s; }
.picker-item:hover { border-color: var(--lime); }
.picker-item .picker-name { font-size: 12px; color: var(--t1); font-weight: 600; }
.picker-item .picker-meta { font-size: 10px; color: var(--t2); }

/* Model Gallery */
.model-candidate { position: relative; cursor: pointer; border: 2px solid var(--b3); border-radius: 8px; overflow: hidden; transition: border-color .2s, transform .15s; aspect-ratio: 9/16; }
.model-candidate:hover { border-color: var(--blue); transform: scale(1.02); }
.model-candidate.selected { border-color: var(--lime); box-shadow: 0 0 12px rgba(0,255,136,.25); }
.model-candidate img { width: 100%; height: 100%; object-fit: cover; }
.model-candidate .model-badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.7); color: var(--t1); font-size: 9px; padding: 2px 6px; border-radius: 4px; }
.model-candidate .model-select-check { position: absolute; bottom: 6px; right: 6px; width: 20px; height: 20px; background: var(--lime); color: var(--bg); border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.model-candidate.selected .model-select-check { display: flex; }

/* PIPELINE */
.pipeline-steps { display: flex; flex-direction: column; gap: 3px; }
.ps-item { display: grid; grid-template-columns: 28px 1fr 100px 80px; align-items: center; gap: 12px; padding: 10px 14px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); }
.ps-num { font-family: var(--fm); font-size: 10px; color: var(--t2); text-align: center; }
.ps-name { font-size: 12px; font-weight: 600; }
.ps-model { font-size: 10px; color: var(--t2); margin-top: 1px; }
.ps-status { text-align: right; }
.ps-time { font-family: var(--fm); font-size: 9px; color: var(--t2); text-align: right; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.sd-done { background: var(--lime); }
.sd-run { background: var(--amber); animation: pulse 1.2s infinite; }
.sd-wait { background: var(--b3); }
.sd-fail { background: var(--red); }

/* GEN FEED */
.gen-feed { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.gf-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; background: var(--s3); border-radius: 5px; font-size: 11px; }
.gf-time { font-family: var(--fm); font-size: 9px; color: var(--t2); flex-shrink: 0; margin-top: 1px; min-width: 38px; }
.gf-msg { color: var(--t1); }
.gf-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }

/* ANALYTICS */
.chart-wrap { height: 140px; position: relative; padding: 8px 0 20px; }
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.bar-group { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.bar { border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity .15s; cursor: pointer; }
.bar:hover { opacity: .8; }
.bar-label { font-family: var(--fm); font-size: 8px; color: var(--t2); white-space: nowrap; }

.hook-bars { display: flex; flex-direction: column; gap: 8px; }
.hook-row { display: flex; align-items: center; gap: 10px; }
.hook-label { font-size: 11px; color: var(--t1); min-width: 110px; }
.hook-track { flex: 1; height: 6px; background: var(--b1); border-radius: 3px; overflow: hidden; }
.hook-fill { height: 100%; border-radius: 3px; }
.hook-pct { font-family: var(--fm); font-size: 10px; color: var(--t1); min-width: 32px; text-align: right; }

.perf-table { width: 100%; border-collapse: collapse; }
.perf-table th { padding: 8px 12px; text-align: left; font-family: var(--fm); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); border-bottom: 1px solid var(--b1); }
.perf-table td { padding: 9px 12px; border-bottom: 1px solid var(--b0); font-size: 12px; color: var(--t1); }
.perf-table tr:hover td { background: var(--b0); }
.perf-table tr:last-child td { border-bottom: none; }

/* VIRAL */
.viral-banner { background: linear-gradient(135deg, rgba(255,77,106,.12) 0%, rgba(255,181,32,.06) 100%); border: 1px solid var(--red-b); border-radius: var(--r); padding: 20px 24px; margin-bottom: 16px; position: relative; overflow: hidden; }
.viral-glow { position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,77,106,.15), transparent 70%); }
.viral-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.viral-badge { display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--red-d); border: 1px solid var(--red-b); border-radius: 20px; font-family: var(--fm); font-size: 9px; color: var(--red); letter-spacing: 1.5px; text-transform: uppercase; }
.viral-title { font-family: var(--fh); font-size: 22px; font-weight: 800; letter-spacing: .3px; }
.viral-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.vm { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--r); padding: 12px; }
.vm-val { font-family: var(--fh); font-size: 20px; font-weight: 700; }
.vm-lbl { font-family: var(--fm); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); margin-top: 2px; }
.vm-delta { font-family: var(--fm); font-size: 9px; margin-top: 3px; }

.sparkline { display: flex; align-items: flex-end; gap: 1px; height: 32px; margin-top: 6px; }
.spark-bar { background: var(--lime); border-radius: 1px 1px 0 0; min-width: 4px; }

/* HOOK STYLE SELECTOR */
.hook-style-btn { cursor: pointer; padding: 5px 10px; transition: all .15s; user-select: none; }
.hook-style-btn.selected { color: var(--lime); border-color: var(--lime-b); background: var(--lime-d); }

/* LOADING */
.loading { display: flex; align-items: center; justify-content: center; padding: 40px; }
.spinner { width: 24px; height: 24px; border: 2px solid var(--b2); border-top-color: var(--lime); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* TOAST */
.toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border-radius: var(--r); font-size: 12px; font-weight: 600; z-index: 999; animation: slideIn .3s; }
.toast-success { background: var(--lime-d); border: 1px solid var(--lime-b); color: var(--lime); }
.toast-error { background: var(--red-d); border: 1px solid var(--red-b); color: var(--red); }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* EMPTY STATE */
.empty-state { text-align: center; padding: 40px 20px; color: var(--t2); }
.empty-state .icon { font-size: 32px; margin-bottom: 12px; }
.empty-state .msg { font-size: 13px; margin-bottom: 8px; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .vid-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px; }

.trend-up { color: var(--lime); }
.trend-dn { color: var(--red); }

/* GUIDE / UPUTSTVO */
.guide-step { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--b1); }
.guide-step:first-child { padding-top: 0; }
.guide-step:last-of-type { border-bottom: none; }
.guide-num { font-family: var(--fh); font-size: 32px; font-weight: 800; color: var(--lime); min-width: 48px; line-height: 1; padding-top: 2px; }
.guide-body { flex: 1; }

/* API KEYS */
.keys-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.keys-ov-item { padding: 14px 16px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); text-align: center; }
.keys-ov-num { font-family: var(--fh); font-size: 28px; font-weight: 700; line-height: 1; }
.keys-ov-label { font-family: var(--fm); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--t2); margin-top: 6px; }

.keys-section { margin-bottom: 14px; contain: layout style; }
.key-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--b0); transition: background .12s; }
.key-row:last-child { border-bottom: none; }
.key-row:hover { background: var(--b0); }
.key-row-readonly { opacity: .7; }
.key-info { flex: 1; min-width: 0; }
.key-name { font-size: 12px; font-weight: 600; font-family: var(--fm); letter-spacing: .3px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.key-desc { font-size: 11px; color: var(--t2); margin-top: 2px; }
.key-link { font-family: var(--fm); font-size: 10px; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; transition: color .12s; }
.key-link:hover { color: var(--lime); text-decoration: underline; }

/* Help toggle button */
.key-help-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fb); font-size: 10px; color: var(--amber);
  background: var(--amber-d); border: 1px solid var(--amber-b);
  border-radius: 4px; padding: 2px 8px; margin-top: 4px; margin-left: 6px;
  cursor: pointer; transition: all .15s;
}
.key-help-toggle:hover { background: rgba(255,181,32,.15); color: #ffd060; }

/* Help inline tooltip */
.key-help-inline {
  font-size: 10px; color: var(--t2); margin-top: 4px; margin-left: 2px;
  cursor: help; border-bottom: 1px dotted var(--b2);
  display: inline-block;
}
.key-help-inline:hover { color: var(--amber); }

/* Help expandable box */
.key-help-box {
  display: none; margin-top: 8px; padding: 12px 14px;
  background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r);
  font-size: 11px; color: var(--t1); line-height: 1.7;
  animation: helpSlide .2s ease;
}
.key-help-box.open { display: block; }
@keyframes helpSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.key-help-box ol { padding-left: 18px; margin: 0; }
.key-help-box li { margin-bottom: 4px; }
.key-help-box li strong { color: var(--t0); }
.key-help-box li code { font-family: var(--fm); font-size: 10px; background: var(--s3); border: 1px solid var(--b1); border-radius: 3px; padding: 1px 5px; color: var(--lime); }
.key-help-box a { color: var(--blue); text-decoration: none; font-size: 10px; }
.key-help-box a:hover { color: var(--lime); text-decoration: underline; }
.key-help-links { display: flex; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--b1); flex-wrap: wrap; }
.key-help-note {
  margin-top: 8px; padding: 6px 10px;
  background: var(--amber-d); border: 1px solid var(--amber-b); border-radius: 4px;
  font-size: 10px; color: var(--amber); line-height: 1.5;
}

.key-input-wrap { display: flex; align-items: center; gap: 8px; min-width: 320px; }
.key-input { font-family: var(--fm) !important; font-size: 11px !important; letter-spacing: 1px; }
.key-status { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; border: 1px solid var(--b2); background: var(--s3); }
.key-status.ks-ok { background: var(--lime-d); border-color: var(--lime-b); color: var(--lime); }
.key-status.ks-missing { background: var(--red-d); border-color: var(--red-b); color: var(--red); }
.key-status.ks-optional { background: var(--s3); border-color: var(--b2); color: var(--t2); }
.key-status.ks-error { background: var(--red-d); border-color: var(--red-b); color: var(--red); }
@keyframes ks-spin { to { transform: rotate(360deg); } }
.key-status.ks-testing { background: var(--s3); border-color: var(--b2); color: var(--t2); animation: ks-spin 1s linear infinite; }
.btn-key-del { background: none; border: 1px solid var(--b2); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.5; transition: opacity .2s, border-color .2s; }
.btn-key-del:hover { opacity: 1; border-color: var(--red); }

@media (max-width: 900px) {
  .key-row { flex-direction: column; align-items: stretch; }
  .key-input-wrap { min-width: 100%; }
  .keys-overview { grid-template-columns: repeat(2, 1fr); }
}
.guide-title { font-family: var(--fh); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.guide-desc { font-size: 13px; color: var(--t1); margin-bottom: 12px; line-height: 1.6; }
.guide-desc code { font-family: var(--fm); font-size: 11px; background: var(--s3); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--b1); }
.guide-code { font-family: var(--fm); font-size: 12px; background: var(--s3); border: 1px solid var(--b1); border-radius: var(--r); padding: 12px 16px; color: var(--lime); margin-bottom: 10px; line-height: 1.8; }
.guide-note { font-size: 12px; color: var(--t2); padding: 10px 14px; background: var(--blue-d); border: 1px solid var(--blue-b); border-radius: var(--r); line-height: 1.6; }
.guide-note strong { color: var(--blue); }

.guide-keys { display: flex; flex-direction: column; gap: 6px; }
.guide-key { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--s3); border: 1px solid var(--b1); border-radius: 6px; }
.guide-key-name { font-family: var(--fm); font-size: 11px; color: var(--amber); min-width: 200px; }
.guide-key-desc { font-size: 11px; color: var(--t2); flex: 1; }

.guide-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-field { padding: 10px 14px; background: var(--s3); border: 1px solid var(--b1); border-radius: 6px; }
.guide-field-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.guide-field-example { font-size: 11px; color: var(--t2); font-style: italic; }

.guide-pipeline { display: flex; flex-direction: column; gap: 4px; }
.guide-agent { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); }
.guide-agent-num { font-family: var(--fh); font-size: 18px; font-weight: 800; color: var(--lime); min-width: 24px; text-align: center; }
.guide-agent-name { font-size: 13px; font-weight: 600; }
.guide-agent-tech { font-size: 11px; color: var(--t2); margin-top: 1px; }

.guide-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-metric { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--s3); border: 1px solid var(--b1); border-radius: 6px; }
.guide-metric-icon { font-size: 18px; }
.guide-metric-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.guide-metric-desc { font-size: 11px; color: var(--t2); }

.guide-thresholds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.guide-threshold { padding: 14px; border: 1px solid; border-radius: var(--r); }
.guide-threshold-badge { font-family: var(--fm); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.guide-threshold-val { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.guide-threshold-action { font-size: 11px; color: var(--t2); }

.guide-list { display: flex; flex-direction: column; gap: 6px; }
.guide-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--s3); border: 1px solid var(--b1); border-radius: 6px; font-size: 12px; color: var(--t1); }