/* ═══════════════════════════════════════
   NEUBRUTALISM — YouTube2MP3
   Geometric · Bold · Mid-tone Warm
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Mid-tone warm background — not dark, not white */
  --bg:#f2ece3;
  --bg2:#e8e0d4;
  --bg3:#ddd4c6;

  /* Surfaces */
  --surface:#ffffff;
  --surface2:#faf7f2;
  --surface3:#f5f0e8;

  /* The "ink" — hard borders & shadows */
  --ink:#0c0b1a;
  --ink-light:rgba(12,11,26,.18);

  /* Hard neubrutalism shadows */
  --shadow:4px 4px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --shadow-md:6px 6px 0 var(--ink);
  --shadow-lg:8px 8px 0 var(--ink);

  /* Accent colors — saturated & flat */
  --violet:#7c3aed;
  --violet-light:#ede9fe;
  --cyan:#0891b2;
  --cyan-light:#e0f2fe;
  --green:#059669;
  --green-light:#d1fae5;
  --amber:#d97706;
  --amber-light:#fef3c7;
  --red:#dc2626;
  --red-light:#fee2e2;
  --pink:#db2777;
  --pink-light:#fce7f3;

  /* Legacy compat */
  --primary:var(--violet);
  --primary-h:#6d28d9;
  --primary-light:var(--violet-light);
  --primary-dark:#5b21b6;
  --primary-dark2:#4c1d95;
  --primary-glow:transparent;
  --mint:var(--green);
  --purple:#7c3aed;
  --rose:#e11d48;
  --warn:var(--amber);
  --error:var(--red);
  --success:var(--green);
  --border:var(--ink);
  --border2:var(--ink);
  --border-accent:var(--violet);
  --glow:none;
  --glow-cyan:none;
  --cyan-glow:none;

  /* Text */
  --text:#0c0b1a;
  --text2:#2d2a45;
  --muted:#5c5575;
  --muted2:#8a82a5;

  /* Geometry */
  --radius:4px;
  --bw:2.5px; /* border width */
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;font-size:15px;overflow-x:hidden;
  position:relative;
}

/* Grid texture on bg */
body::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(12,11,26,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,11,26,.04) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;z-index:0;
}

/* Sakura layer — hide for this design */
.sakura-layer,.petal{display:none!important}

header,main,footer,.overlay,.modal,#toast{position:relative;z-index:2}
a{color:var(--violet);text-decoration:none;transition:color .15s}
a:hover{color:var(--primary-h);text-decoration:underline}
.hidden{display:none!important}
hr{border:none;border-top:var(--bw) solid var(--ink);margin:16px 0}
select,input,textarea,button{font-family:'Inter',system-ui,sans-serif;color-scheme:light}
select option{background:#fff;color:var(--text)}
::placeholder{color:var(--muted2)}

/* ═══════════════════════════════════
   SCROLLBAR
═══════════════════════════════════ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg2);border-left:1px solid var(--ink-light)}
::-webkit-scrollbar-thumb{background:var(--violet);border:2px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:var(--primary-h)}

/* ═══════════════════════════════════
   HEADER
═══════════════════════════════════ */
header{
  background:var(--surface);
  border-bottom:var(--bw) solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:64px;position:sticky;top:0;z-index:100;
  box-shadow:0 3px 0 var(--ink);
}

.logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:20px;font-weight:900;
  color:var(--text);letter-spacing:-.5px;text-decoration:none;
}
.logo:hover{text-decoration:none;color:var(--text)}
.logo:hover .logo-icon{transform:rotate(-5deg) scale(1.08)}

.logo-icon{
  width:40px;height:40px;
  flex-shrink:0;
  transform:rotate(-3deg);
  transition:transform .15s;
  filter:drop-shadow(3px 3px 0 var(--ink));
}
.logo-icon svg{width:100%;height:100%;display:block}

.logo-text{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:19px;letter-spacing:-.4px;color:var(--text)}
.logo-text em{font-style:normal;color:var(--violet)}
.logo em{font-style:normal;color:var(--violet)}

/* Статус — маленький стикер вместо точки */
.logo-dot{
  display:inline-flex;align-items:center;gap:4px;
  background:#f97316;color:#fff;
  font-size:9px;font-weight:900;letter-spacing:.08em;
  font-family:'Space Grotesk',sans-serif;
  padding:2px 7px;
  border:1.5px solid var(--ink);
  border-radius:3px;
  box-shadow:2px 2px 0 var(--ink);
  transform:rotate(1deg);
  margin-left:2px;flex-shrink:0;
  text-transform:uppercase;
  line-height:1;
  transition:transform .15s;
}
.logo-dot::before{
  content:'●';font-size:7px;
  color:#fff;
  animation:dot-pulse 2s ease-in-out infinite;
}
.logo:hover .logo-dot{transform:rotate(-1deg)}

nav{display:flex;align-items:center;gap:4px}
.nav-link{
  color:var(--muted);font-size:14px;font-weight:700;
  padding:7px 14px;border-radius:var(--radius);
  transition:all .15s;text-decoration:none;display:inline-block;
  border:var(--bw) solid transparent;
}
.nav-link:hover{background:var(--violet-light);color:var(--violet);border-color:var(--violet);text-decoration:none}
.nav-link.active{color:var(--violet);background:var(--violet-light);border-color:var(--violet)}

/* ── Auth UI ── */
#user-chip,.user-chip-wrap{display:none;align-items:center;gap:6px}

/* Кнопка Войти */
.btn-login-header{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--violet);color:#fff;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  padding:9px 18px;
  font-size:13px;font-weight:800;
  font-family:'Space Grotesk',sans-serif;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:all .1s;
  white-space:nowrap;
}
.btn-login-header:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);background:#6d28d9}
.btn-login-header:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* Аватар — авторизован */
.header-avatar{
  width:36px;height:36px;
  border-radius:var(--radius);
  background:var(--violet);
  border:var(--bw) solid var(--ink);
  color:#fff;font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  cursor:default;
  position:relative;
  font-family:'Space Grotesk',sans-serif;
  flex-shrink:0;
}
/* зелёная точка — онлайн */
.avatar-online-dot{
  position:absolute;bottom:-3px;right:-3px;
  width:10px;height:10px;
  border-radius:50%;
  background:#39ff14;
  border:2px solid var(--surface);
  box-shadow:0 0 6px rgba(57,255,20,.7);
  animation:dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.8}}

/* Кнопка Выйти — маленькая иконка */
.btn-logout-header{
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface2);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  color:var(--muted);cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:all .1s;
  flex-shrink:0;
}
.btn-logout-header:hover{
  background:var(--red-light);color:var(--red);
  transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);
}

/* Legacy */
.avatar{
  width:30px;height:30px;border-radius:var(--radius);
  background:var(--violet);border:var(--bw) solid var(--ink);
  color:#fff;font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
#nav-toggle{
  display:none;background:none;border:var(--bw) solid var(--ink);cursor:pointer;
  padding:6px 10px;color:var(--text);font-size:20px;line-height:1;border-radius:var(--radius);
}
#nav-toggle:hover{background:var(--bg2)}

@media(max-width:680px){
  header{padding:0 16px}
  #nav-toggle{display:flex;align-items:center;justify-content:center}
  nav{
    display:none;position:fixed;
    top:64px;left:0;right:0;
    background:var(--surface);
    border-bottom:var(--bw) solid var(--ink);
    flex-direction:column;align-items:stretch;
    padding:12px 16px 20px;gap:6px;
    box-shadow:0 6px 0 var(--ink);
    z-index:99;
  }
  nav.open{display:flex}
  .nav-link{padding:13px 16px;border-radius:var(--radius);font-size:15px}
  #user-chip,.user-chip-wrap{display:none!important}
  .btn-login-header{width:100%;justify-content:center;margin-top:4px;padding:13px}
  .btn-logout-header{width:100%;height:auto;padding:12px;margin-top:4px}
  .btn-primary#btn-login,.btn-primary#btn-logout{width:100%;justify-content:center;margin-top:4px;padding:13px}
}

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.btn-primary{
  background:var(--violet);
  color:#fff;border:var(--bw) solid var(--ink);
  padding:10px 22px;border-radius:var(--radius);cursor:pointer;
  font-size:14px;font-weight:800;
  font-family:'Space Grotesk',sans-serif;
  box-shadow:var(--shadow-sm);
  transition:all .1s;transform:translate(0,0);
  display:inline-flex;align-items:center;gap:6px;
}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

.btn-outline{
  background:var(--surface);
  border:var(--bw) solid var(--ink);
  color:var(--text);
  padding:9px 18px;border-radius:var(--radius);cursor:pointer;
  font-size:14px;font-weight:700;transition:all .1s;
  box-shadow:var(--shadow-sm);
}
.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--bg2)}
.btn-outline:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-danger-outline:hover{border-color:var(--red)!important;color:var(--red)!important;background:var(--red-light)!important}
.btn-sm{font-size:12px;padding:5px 10px}

/* ═══════════════════════════════════
   LAYOUT
═══════════════════════════════════ */
main{max-width:980px;margin:0 auto;padding:0 20px 80px}
.page{display:none}
.page.active{display:block}

/* ═══════════════════════════════════
   HERO + FORM PANEL (объединённый)
═══════════════════════════════════ */
.hero-form-panel{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:0;
  margin:32px 0 56px;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  background:var(--surface);
  min-height:400px;
}

/* Left: hero text */
.hfp-left{
  background:var(--violet);
  padding:48px 40px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  position:relative;overflow:hidden;
  border-right:var(--bw) solid var(--ink);
}
/* Decorative grid on violet */
.hfp-left::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:28px 28px;
}
/* Corner accent squares */
.hfp-left::after{
  content:'';position:absolute;bottom:-20px;right:-20px;
  width:120px;height:120px;
  border:var(--bw) solid rgba(255,255,255,.2);
  transform:rotate(12deg);
  border-radius:var(--radius);
}
/* YouTube logo block */
.hfp-yt-logo{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.15);
  border:var(--bw) solid rgba(255,255,255,.4);
  border-radius:var(--radius);
  padding:8px 14px;
  margin-bottom:4px;
  position:relative;z-index:1;
  width:fit-content;
}
.hfp-yt-logo iconify-icon{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}

.hfp-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.15);
  border:var(--bw) solid rgba(255,255,255,.4);
  border-radius:var(--radius);
  padding:6px 14px;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;width:fit-content;
  position:relative;z-index:1;
}
.hfp-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:46px;font-weight:900;
  color:#fff;line-height:1.05;
  letter-spacing:-2px;
  position:relative;z-index:1;
}
.hfp-accent{
  display:inline-block;
  background:#fff;
  color:var(--violet);
  padding:0 8px;
  line-height:1.15;
  transform:rotate(-1deg);
  display:inline-block;
}
.hfp-desc{
  font-size:15px;color:rgba(255,255,255,.8);line-height:1.6;
  position:relative;z-index:1;
}
.hfp-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  position:relative;z-index:1;
}
.hfp-tags span{
  background:rgba(255,255,255,.12);
  border:var(--bw) solid rgba(255,255,255,.35);
  border-radius:var(--radius);
  padding:4px 12px;
  font-size:12px;font-weight:800;color:#fff;
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:.04em;text-transform:uppercase;
}

/* Right: form */
.hfp-right{
  padding:32px;
  background:var(--surface);
  display:flex;flex-direction:column;
  overflow-y:auto;
}

/* JS-injected decorations — hide in this design */
.dl-orb,.dl-stars,.dl-label,.dl-headline{display:none!important}
#download-section{background:transparent;border:none;box-shadow:none;padding:0;border-radius:0}
#download-section::before,#download-section::after{display:none}

@media(max-width:760px){
  .hero-form-panel{grid-template-columns:1fr}
  .hfp-left{padding:32px 24px;border-right:none;border-bottom:var(--bw) solid var(--ink)}
  .hfp-title{font-size:34px;letter-spacing:-1.2px}
  .hfp-right{padding:24px}
}

/* ═══════════════════════════════════
   SECTIONS
═══════════════════════════════════ */
.section{margin-bottom:56px}
.section-header{margin-bottom:32px}
.section-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--amber-light);
  border:var(--bw) solid var(--ink);
  color:var(--text);box-shadow:var(--shadow-sm);
  border-radius:var(--radius);padding:5px 14px;
  font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
}
.section-header h2{
  font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:900;
  letter-spacing:-.8px;margin-bottom:10px;color:var(--text);
}
.section-header p{color:var(--muted);font-size:15px;line-height:1.7;max-width:560px}

/* ═══════════════════════════════════
   FEATURES
═══════════════════════════════════ */
.features{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:580px){.features{grid-template-columns:1fr}}

.feat{
  background:var(--surface);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-sm);
  transition:all .1s;cursor:default;
  position:relative;overflow:hidden;
}
.feat:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.feat:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* Top color bar per card */
.feat::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:0}
.feat:nth-child(1)::before{background:var(--violet)}
.feat:nth-child(2)::before{background:var(--cyan)}
.feat:nth-child(3)::before{background:var(--amber)}
.feat:nth-child(4)::before{background:var(--green)}
.feat:nth-child(5)::before{background:var(--pink)}
.feat:nth-child(6)::before{background:var(--red)}

.feat-icon{
  width:44px;height:44px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;font-size:22px;
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  transition:all .1s;
}
.feat:nth-child(1) .feat-icon{background:var(--violet-light);color:var(--violet)}
.feat:nth-child(2) .feat-icon{background:var(--cyan-light);color:var(--cyan)}
.feat:nth-child(3) .feat-icon{background:var(--amber-light);color:var(--amber)}
.feat:nth-child(4) .feat-icon{background:var(--green-light);color:var(--green)}
.feat:nth-child(5) .feat-icon{background:var(--pink-light);color:var(--pink)}
.feat:nth-child(6) .feat-icon{background:var(--red-light);color:var(--red)}
.feat:hover .feat-icon{transform:rotate(-5deg)}
.feat-icon iconify-icon{font-size:22px}
.feat h4{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;margin-bottom:8px;color:var(--text)}
.feat p{font-size:13px;color:var(--muted);line-height:1.7}

/* ═══════════════════════════════════
   STEPS
═══════════════════════════════════ */
.steps{display:flex;flex-direction:column;gap:10px;position:relative}
.steps::before{display:none}

.step{
  display:flex;align-items:flex-start;gap:20px;
  background:var(--surface);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-sm);
  transition:all .1s;position:relative;
}
.step:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.step-num{
  width:42px;height:42px;border-radius:var(--radius);
  color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:18px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
}
.step:nth-child(1) .step-num{background:var(--violet)}
.step:nth-child(2) .step-num{background:var(--cyan)}
.step:nth-child(3) .step-num{background:var(--green)}
.step-body h4{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;margin-bottom:6px;color:var(--text)}
.step-body p{font-size:13px;color:var(--muted);line-height:1.7}
.step-body ul li{color:var(--muted)}
.step-body code,.url-code-pill{background:var(--bg2);color:var(--text);border:1.5px solid var(--ink-light);border-radius:var(--radius);padding:2px 8px;font-size:12px;font-family:monospace}

/* ═══════════════════════════════════
   TRUST BAR
═══════════════════════════════════ */
.trust-bar{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin:20px 0 48px;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.trust-item{
  text-align:center;
  padding:28px 16px 22px;
  border-right:var(--bw) solid var(--ink);
  position:relative;overflow:hidden;
  transition:transform .1s,box-shadow .1s;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.trust-item:last-child{border-right:none}
.trust-item:hover{transform:translateY(-3px)}

/* Top accent bar */
.trust-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
}

/* Color variants */
.ti-violet{background:#f3f0ff}
.ti-violet::before{background:var(--violet)}
.ti-violet .trust-icon,.ti-violet .trust-val{color:var(--violet)}

.ti-cyan{background:#ecfeff}
.ti-cyan::before{background:var(--cyan)}
.ti-cyan .trust-icon,.ti-cyan .trust-val{color:var(--cyan)}

.ti-amber{background:#fffbeb}
.ti-amber::before{background:var(--amber)}
.ti-amber .trust-icon,.ti-amber .trust-val{color:var(--amber)}

.ti-green{background:#f0fdf4}
.ti-green::before{background:var(--green)}
.ti-green .trust-icon,.ti-green .trust-val{color:var(--green)}

.ti-orange{background:#fff7ed}
.ti-orange::before{background:#f97316}
.ti-orange .trust-icon,.ti-orange .trust-val{color:#f97316}

.trust-icon{font-size:26px;line-height:1;margin-top:4px}
.trust-val{
  font-family:'Space Grotesk',sans-serif;
  font-size:40px;font-weight:900;
  line-height:1;letter-spacing:-1.5px;
}
.trust-lbl{font-size:12px;color:var(--muted);font-weight:700;line-height:1.4;text-align:center}

@media(max-width:720px){
  .trust-bar{grid-template-columns:repeat(3,1fr)}
  .trust-item:nth-child(3){border-right:none}
  .trust-item:nth-child(4){border-top:var(--bw) solid var(--ink)}
  .trust-item:nth-child(5){border-top:var(--bw) solid var(--ink)}
}
@media(max-width:480px){
  .trust-bar{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(odd):last-child{grid-column:1/-1}
  .trust-item{border-top:var(--bw) solid var(--ink)}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-top:none}
  .trust-item:nth-child(2){border-right:none}
  .trust-val{font-size:32px}
}

/* ═══════════════════════════════════
   URL INPUT / FORM
═══════════════════════════════════ */
.section-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-family:'Space Grotesk',sans-serif}

.url-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.url-input{
  flex:1;min-width:200px;
  background:var(--surface2);
  border:var(--bw) solid var(--ink);
  color:var(--text);border-radius:var(--radius);padding:13px 16px;
  font-size:14px;outline:none;transition:all .15s;
  box-shadow:inset 2px 2px 0 rgba(12,11,26,.06);
}
.url-input::placeholder{color:var(--muted2)}
.url-input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.btn-get{
  background:var(--violet);
  color:#fff;border:var(--bw) solid var(--ink);
  padding:12px 20px;border-radius:var(--radius);cursor:pointer;
  font-size:14px;font-weight:800;font-family:'Space Grotesk',sans-serif;
  box-shadow:var(--shadow-sm);
  transition:all .1s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.btn-get:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:#6d28d9}
.btn-get:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn-get:disabled{opacity:.5;pointer-events:none;transform:none;box-shadow:var(--shadow-sm)}
.spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .7s linear infinite}

/* ═══════════════════════════════════
   CARD
═══════════════════════════════════ */
.card{
  background:var(--surface);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  margin-top:14px;overflow:hidden;
}
.card-body{padding:20px}

/* ── Video head ── */
.video-head{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.thumb{width:110px;height:62px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;border:var(--bw) solid var(--ink)}
.video-meta h3{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;line-height:1.4;margin-bottom:6px;color:var(--text)}
.meta-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.tag{background:var(--amber-light);color:var(--text);border:1.5px solid var(--ink);border-radius:var(--radius);padding:2px 9px;font-size:12px;font-weight:800}

/* ── Format buttons ── */
.format-groups{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.format-group-label{font-size:11px;font-weight:800;color:var(--muted);margin-bottom:6px;font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.seg{display:flex;flex-wrap:wrap;gap:5px}
.seg-btn{
  background:var(--surface2);
  border:var(--bw) solid var(--ink);
  color:var(--text);
  padding:6px 12px;border-radius:var(--radius);cursor:pointer;
  font-size:12px;font-weight:800;font-family:'Space Grotesk',sans-serif;
  transition:all .1s;box-shadow:var(--shadow-sm);
}
.seg-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:var(--bg2)}
.seg-btn.active{background:var(--violet);color:#fff;border-color:var(--ink)}
.seg-btn.active:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

/* ── Options ── */
.opts-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.opt-row{display:flex;flex-direction:column;gap:4px;min-width:150px}
.opt-row label{font-size:11px;font-weight:800;color:var(--muted);font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.opt-select{
  background:var(--surface2);
  border:var(--bw) solid var(--ink);
  color:var(--text);border-radius:var(--radius);padding:8px 10px;
  font-size:13px;font-weight:600;outline:none;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:all .1s;
}
.opt-select:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}

/* ── Checks ── */
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.check-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;transition:.1s;font-weight:600}
.check-item:hover{color:var(--text)}
.check-item input{accent-color:var(--violet);width:15px;height:15px}
#subtitle-langs-row{margin-bottom:12px}
#subtitle-langs-row input,#subtitle-langs{
  background:var(--surface2);border:var(--bw) solid var(--ink);
  color:var(--text);border-radius:var(--radius);padding:8px 12px;
  font-size:13px;width:100%;outline:none;box-shadow:var(--shadow-sm);
}
#subtitle-langs:focus{background:#fff}

/* ── Download button ── */
.btn-download{
  width:100%;
  background:var(--violet);
  color:#fff;border:var(--bw) solid var(--ink);
  padding:14px 24px;border-radius:var(--radius);cursor:pointer;
  font-size:16px;font-weight:900;
  font-family:'Space Grotesk',sans-serif;
  box-shadow:var(--shadow-sm);
  transition:all .1s;margin-top:6px;
}
.btn-download:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.btn-download:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn-download:disabled{opacity:.5;pointer-events:none;transform:none;box-shadow:var(--shadow-sm)}

/* ── Progress ── */
.progress-card,.progress-section{padding:16px 20px}
.progress-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px}
#progress-label{color:var(--text);font-weight:700}
.progress-pct{font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:14px;color:var(--violet)}
.progress-bar-bg{height:10px;background:var(--bg2);border:var(--bw) solid var(--ink);border-radius:var(--radius);overflow:hidden;margin-bottom:6px}
.progress-bar{height:100%;background:var(--violet);transition:width .4s ease}
.progress-sub{font-size:12px;color:var(--muted)}

/* ── File result ── */
.file-result{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
.file-icon{font-size:26px;flex-shrink:0}
.file-info{flex:1;min-width:0}
.file-name{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;color:var(--text);word-break:break-all;margin-bottom:3px}
.file-meta{font-size:12px;color:var(--muted)}
#file-extras{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}

/* ── Small buttons ── */
.btn-dl{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--violet);color:#fff;border:var(--bw) solid var(--ink);
  padding:8px 16px;border-radius:var(--radius);cursor:pointer;
  font-size:13px;font-weight:800;font-family:'Space Grotesk',sans-serif;
  text-decoration:none;box-shadow:var(--shadow-sm);transition:all .1s;
}
.btn-dl:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md);color:#fff;text-decoration:none}
.btn-dl:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

.btn-split{
  font-size:12px;padding:6px 11px;border-radius:var(--radius);
  background:var(--surface);border:var(--bw) solid var(--ink);
  color:var(--muted);cursor:pointer;transition:all .1s;white-space:nowrap;
  box-shadow:var(--shadow-sm);font-weight:700;
}
.btn-split:hover{background:var(--green-light);color:var(--green);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn-split.loading{opacity:.6;pointer-events:none}
.btn-split.open{background:var(--green-light);color:var(--green)}

.btn-cover,.btn-info{
  font-size:12px;padding:6px 11px;border-radius:var(--radius);
  background:var(--surface);border:var(--bw) solid var(--ink);
  color:var(--muted);text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;font-weight:700;
  transition:all .1s;box-shadow:var(--shadow-sm);
}
.btn-cover:hover,.btn-info:hover,.btn-info.open{
  background:var(--violet-light);color:var(--violet);
  transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);text-decoration:none;
}
.btn-del{
  font-size:12px;padding:6px 11px;border-radius:var(--radius);
  background:var(--surface);border:var(--bw) solid var(--ink);
  color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;font-weight:700;
  transition:all .1s;box-shadow:var(--shadow-sm);
}
.btn-del:hover{background:var(--red-light);color:var(--red);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

/* ── Chapters ── */
.chapters-panel{margin-top:10px;padding:12px 14px;background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius)}
.chapters-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.chapters-cover{width:60px;height:60px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;border:var(--bw) solid var(--ink)}
.chapters-header-info{display:flex;flex-direction:column;gap:7px}
.chapters-panel-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.chapters-dl-all{font-size:12px;padding:5px 12px;border-radius:var(--radius);display:inline-flex;align-items:center;gap:4px;text-decoration:none;background:var(--violet);color:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);transition:all .1s;font-weight:800}
.chapters-dl-all:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);color:#fff;text-decoration:none}
.chapters-list{list-style:none}
.chapter-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 0;border-bottom:1.5px solid var(--ink-light)}
.chapter-row:last-child{border-bottom:none}
.chapter-num{min-width:22px;font-weight:800;color:var(--muted);font-size:11px;flex-shrink:0}
.chapter-title{flex:1;color:var(--text)}
.chapter-size{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.chapter-dl{font-size:11px;padding:3px 8px;border-radius:var(--radius);background:var(--violet);color:#fff;text-decoration:none;white-space:nowrap;border:1.5px solid var(--ink);transition:all .1s;flex-shrink:0;font-weight:700}
.chapter-dl:hover{transform:translate(-1px,-1px);color:#fff;text-decoration:none}
.chapter-dl-info{background:var(--surface2);color:var(--muted);border:1.5px solid var(--ink);padding:3px 7px}
.chapter-dl-info:hover{background:var(--violet-light);color:var(--violet)}

/* ── Playlist ── */
.pl-header{padding:16px 20px;border-bottom:var(--bw) solid var(--ink);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pl-header h3{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;color:var(--text)}
.pl-actions{display:flex;gap:6px}
.link-btn{background:none;border:none;color:var(--violet);cursor:pointer;font-size:13px;font-weight:800;padding:4px 8px;border-radius:var(--radius);transition:.1s}
.link-btn:hover{background:var(--violet-light)}
.pl-list{max-height:260px;overflow-y:auto;padding:6px 20px}
.pl-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1.5px solid var(--ink-light);cursor:pointer;user-select:none;transition:.1s;color:var(--muted)}
.pl-item:last-child{border-bottom:none}
.pl-item:hover{color:var(--text)}
.pl-item input{accent-color:var(--violet);width:15px;height:15px;flex-shrink:0}
.pl-num{font-size:11px;color:var(--muted);min-width:20px;text-align:right;font-weight:700}
.pl-title{flex:1;font-size:13px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-dur{font-size:11px;color:var(--muted);white-space:nowrap}
.pl-footer{padding:14px 20px;border-top:var(--bw) solid var(--ink);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pl-opts{display:flex;gap:10px;flex:1;flex-wrap:wrap;align-items:center}
.pl-opts .seg-btn{padding:5px 10px;font-size:11px}

/* ── Queue ── */
.queue,.download-queue{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.queue-item{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow-sm)}
.qi-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.qi-icon{font-size:16px;flex-shrink:0}
.qi-title{flex:1;font-size:13px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text)}
.qi-status{font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--radius);white-space:nowrap;border:1.5px solid var(--ink)}
.qi-status.active{background:var(--violet-light);color:var(--violet)}
.qi-status.done{background:var(--green-light);color:var(--green)}
.qi-status.error{background:var(--red-light);color:var(--red)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:var(--radius);border:1.5px solid var(--ink)}
.badge.done{background:var(--green-light);color:var(--green)}
.badge.error{background:var(--red-light);color:var(--red)}
.badge.active{background:var(--violet-light);color:var(--violet)}
.badge.expired{background:var(--bg2);color:var(--muted)}
.badge.pending{background:var(--amber-light);color:var(--amber)}

/* ═══════════════════════════════════
   FAQ
═══════════════════════════════════ */
.faq{display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-item:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.faq-q{padding:16px 20px;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.15s;user-select:none;color:var(--text)}
.faq-q:hover{background:var(--violet-light);color:var(--violet)}
.faq-q::after{content:'＋';font-size:16px;font-weight:700;color:var(--violet);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q{background:var(--violet-light);color:var(--violet)}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{display:none;padding:0 20px 18px;font-size:14px;color:var(--muted);line-height:1.7}
.faq-item.open .faq-a{display:block}

/* ═══════════════════════════════════
   LINKS GRID (Что можно скачать)
═══════════════════════════════════ */
.links-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin-bottom:20px;
}
@media(max-width:900px){.links-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.links-grid{grid-template-columns:1fr}}

.link-card{
  background:var(--surface);
  border-right:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  padding:20px 18px;
  display:flex;flex-direction:column;gap:8px;
  transition:background .1s;
  position:relative;
}
/* Remove outer borders that would double up */
.link-card:nth-child(4n){border-right:none}
.link-card:nth-last-child(-n+4){border-bottom:none}
@media(max-width:900px){
  .link-card:nth-child(4n){border-right:var(--bw) solid var(--ink)}
  .link-card:nth-last-child(-n+4){border-bottom:var(--bw) solid var(--ink)}
  .link-card:nth-child(2n){border-right:none}
  .link-card:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:500px){
  .link-card{border-right:none}
  .link-card:last-child{border-bottom:none}
}
.link-card:hover{background:var(--surface3)}

.link-type-badge{
  display:inline-flex;
  background:var(--ink);color:#fff;
  font-size:10px;font-weight:800;
  padding:3px 9px;border-radius:var(--radius);
  letter-spacing:.06em;text-transform:uppercase;
  width:fit-content;font-family:'Space Grotesk',sans-serif;
}
/* Color the badge per type */
.link-card:nth-child(1) .link-type-badge{background:var(--violet)}
.link-card:nth-child(2) .link-type-badge{background:#dc2626}
.link-card:nth-child(3) .link-type-badge{background:#f97316}
.link-card:nth-child(4) .link-type-badge{background:var(--green)}
.link-card:nth-child(5) .link-type-badge{background:var(--cyan)}
.link-card:nth-child(6) .link-type-badge{background:#db2777}
.link-card:nth-child(7) .link-type-badge{background:var(--amber)}
.link-card:nth-child(8) .link-type-badge{background:#6d28d9}

.link-card-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:800;color:var(--text);
  line-height:1.3;
}
.link-card code,.link-card .url-code-pill{
  background:var(--bg2);color:var(--text);
  border:1.5px solid var(--ink-light);
  border-radius:var(--radius);
  padding:4px 8px;font-size:11px;
  font-family:monospace;font-weight:600;
  word-break:break-all;display:inline-block;
}
.link-card p{font-size:12px;color:var(--muted);line-height:1.6;margin:0}
.link-card p code,.link-card p .url-code-pill{
  font-size:11px;background:var(--violet-light);color:var(--violet);
  border-color:rgba(124,58,237,.2);padding:1px 5px;
}

/* ═══════════════════════════════════
   FORMATS GRID
═══════════════════════════════════ */
.formats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:540px){.formats-grid{grid-template-columns:1fr}}
.fmt-card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);transition:all .1s}
.fmt-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.fmt-badge{display:inline-flex;font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:12px;background:var(--violet);color:#fff;padding:2px 9px;border-radius:var(--radius);margin-bottom:7px;border:1.5px solid var(--ink)}
.fmt-card h4{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;margin-bottom:4px;color:var(--text)}
.fmt-card p{font-size:13px;color:var(--muted);line-height:1.6}

/* ── Compare panels ── */
.compare-wrap{display:none} /* hide old table if still referenced */
.cmp-panels{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
@media(max-width:680px){
  .cmp-panels{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .cmp-vs{writing-mode:horizontal-tb;padding:12px;border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);border-left:none;border-right:none}
}

.cmp-panel{display:flex;flex-direction:column}

/* Our panel — violet */
.cmp-us-panel{background:var(--violet)}
.cmp-us-panel .cmp-panel-header{
  background:rgba(0,0,0,.2);
  border-bottom:var(--bw) solid rgba(255,255,255,.2);
  padding:18px 24px;
  display:flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:900;color:#fff;
}
.cmp-panel-crown{
  margin-left:auto;background:#fbbf24;color:var(--ink);
  font-size:10px;font-weight:900;padding:3px 9px;border-radius:var(--radius);
  border:1.5px solid var(--ink);letter-spacing:.06em;white-space:nowrap;
}
.cmp-us-panel .cmp-list li{
  color:#fff;border-bottom:1px solid rgba(255,255,255,.15);
}
.cmp-us-panel .cmp-list li iconify-icon{color:#86efac;flex-shrink:0}

/* Their panel — gray */
.cmp-them-panel{background:var(--bg2)}
.cmp-them-panel .cmp-panel-header{
  background:var(--bg3);
  border-bottom:var(--bw) solid var(--ink-light);
  padding:18px 24px;
  display:flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:900;color:var(--muted);
  border-left:var(--bw) solid var(--ink);
}
.cmp-them-panel .cmp-list{border-left:var(--bw) solid var(--ink)}
.cmp-them-panel .cmp-list li{
  color:var(--muted);border-bottom:1px solid var(--ink-light);
}
.cmp-them-panel .cmp-list li iconify-icon{color:var(--red);flex-shrink:0}

/* Shared list */
.cmp-list{list-style:none;padding:0;margin:0;flex:1}
.cmp-list li{
  display:flex;align-items:center;gap:10px;
  padding:13px 24px;font-size:13px;font-weight:600;
  transition:background .1s;
}
.cmp-list li:last-child{border-bottom:none}
.cmp-us-panel .cmp-list li:hover{background:rgba(255,255,255,.08)}
.cmp-them-panel .cmp-list li:hover{background:rgba(12,11,26,.04)}

/* VS divider */
.cmp-vs{
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:900;
  writing-mode:vertical-rl;text-orientation:mixed;
  padding:0 14px;letter-spacing:.1em;
  border-left:var(--bw) solid var(--ink);border-right:var(--bw) solid var(--ink);
}

/* Legacy compat for old table */
.cmp-yes{color:var(--green);font-weight:800}
.cmp-no{color:var(--muted);font-weight:600}
.cmp-us{font-weight:800;color:var(--violet)}

/* ── Showcase ── */
.showcase-bleed{
  margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
  padding:60px max(24px,calc(50vw - 660px));
  background:var(--bg2);border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  overflow:hidden;
}
.showcase{display:flex;flex-direction:column;gap:80px}
.showcase-row{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center;max-width:1280px;margin:0 auto;width:100%}
.showcase-row.reverse{grid-template-columns:1.4fr 1fr}
.showcase-row.reverse .showcase-img-wrap{order:-1}
.showcase-text{display:flex;flex-direction:column;gap:12px}
.showcase-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.showcase-text h3{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:900;line-height:1.2;margin:0;color:var(--text)}
.showcase-text p{font-size:15px;color:var(--muted);line-height:1.75;margin:0}
.showcase-bullets{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.showcase-bullet{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted)}
.showcase-bullet-icon{width:20px;height:20px;border-radius:var(--radius);flex-shrink:0;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;margin-top:2px;border:1.5px solid var(--ink)}
.showcase-img-wrap{position:relative;cursor:zoom-in;border-radius:var(--radius);overflow:hidden;border:var(--bw) solid var(--ink);transition:all .1s;box-shadow:var(--shadow-sm)}
.showcase-img-wrap:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-md)}
.showcase-img-wrap img{width:100%;height:auto;display:block;object-fit:cover}
.showcase-img-badge{position:absolute;top:10px;left:10px;background:var(--violet);color:#fff;font-size:10px;font-weight:800;padding:3px 10px;border-radius:var(--radius);white-space:nowrap;z-index:1;border:1.5px solid var(--ink);letter-spacing:.04em}
.mobile-showcase-wrap{
  display:flex;
  gap:20px;
  justify-content:center;
  align-items:flex-end;
}
.mobile-frame{
  position:relative;
  flex:0 0 auto;
  width:200px;
  cursor:zoom-in;
  transition:transform .1s;
}
.mobile-frame:hover{transform:translateY(-4px) !important}
.mobile-frame img{
  width:100%;height:auto;
  border-radius:24px;
  border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow-md);
  display:block;
}
.mobile-frame-label{
  text-align:center;
  font-size:12px;font-weight:800;
  color:var(--muted);margin-top:10px;
  font-family:'Space Grotesk',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;
}
.mobile-frame.elevated{transform:translateY(-20px)}

/* legacy */
.mobile-showcase{display:flex;gap:40px;justify-content:center;align-items:flex-end;margin-top:24px}

@media(max-width:960px){
  .mobile-showcase-wrap{gap:14px}
  .mobile-frame{width:150px}
  .mobile-frame img{border-radius:16px}
}
@media(max-width:960px){
  .showcase-bleed{padding:40px 20px}
  .showcase-row,.showcase-row.reverse{grid-template-columns:1fr}
  .mobile-showcase{gap:20px}
  .mobile-frame{width:160px}
}
.lb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out}
.lb-overlay.open{display:flex}
.lb-overlay img{max-width:92vw;max-height:92vh;border-radius:var(--radius);border:var(--bw) solid var(--ink);object-fit:contain;cursor:default}
.lb-close{position:fixed;top:20px;right:24px;color:#fff;font-size:24px;cursor:pointer;background:var(--ink);border-radius:var(--radius);width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-weight:900;border:var(--bw) solid #fff}
.lb-close:hover{background:#333}

/* ═══════════════════════════════════
   CABINET
═══════════════════════════════════ */
.cabinet-top{padding:32px 0 16px}
.cabinet-top h2{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:900;letter-spacing:-.5px;margin-bottom:8px;color:var(--text)}
.cabinet-top p{font-size:14px;color:var(--muted);line-height:1.7}
.storage-notice{
  background:var(--amber-light);border:var(--bw) solid var(--ink);
  border-radius:var(--radius);padding:14px 18px;
  font-size:13px;color:var(--text);
  margin-bottom:20px;display:flex;gap:10px;align-items:flex-start;
  box-shadow:var(--shadow-sm);font-weight:600;
}

/* ── Cabinet section cards ── */
.cab-card{
  background:var(--surface);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  margin-bottom:20px;
  overflow:hidden;
}
.cab-card-form{border-top:4px solid var(--violet)}
.cab-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  border-bottom:var(--bw) solid var(--ink);
  background:var(--bg2);
  flex-wrap:wrap;gap:8px;
}
.cab-card-label{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--text);
}
.cab-card-form .cab-card-label{
  padding:14px 20px 10px;
  display:flex;border-bottom:var(--bw) solid var(--ink);
  background:var(--bg2);
  color:var(--violet);
}
.cab-card-form #sf-cabinet-mount{padding:20px}

/* task lists inside cab-cards */
#active-tasks-list,#history-list{padding:16px 20px}

.cabinet-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cabinet-actions h3{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:var(--text)}

.dl-item{
  background:var(--surface);border:var(--bw) solid var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:14px 16px;display:flex;align-items:flex-start;
  gap:12px;margin-bottom:8px;flex-wrap:wrap;transition:all .1s;
}
.dl-item:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.dl-icon{width:46px;height:46px;border-radius:var(--radius);background:var(--violet-light);color:var(--violet);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden;border:var(--bw) solid var(--ink)}
.dl-icon img{width:100%;height:100%;object-fit:cover}
.dl-info{flex:1;min-width:180px}
.dl-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.dl-meta{font-size:12px;color:var(--muted);margin-top:3px}
.dl-storage{font-size:12px;margin-top:5px;color:var(--muted)}
.dl-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.time-ok{color:var(--green);font-weight:800}
.time-warn{color:var(--amber);font-weight:800}

/* Detail */
.dl-detail{display:none;flex-basis:100%;order:10;border-top:var(--bw) solid var(--ink-light);margin-top:12px;padding-top:14px}
.dl-detail.open{display:block}
.info-panel{display:flex;gap:16px;flex-wrap:wrap}
.info-thumb{width:160px;border-radius:var(--radius);object-fit:cover;align-self:flex-start;border:var(--bw) solid var(--ink)}
.info-body{flex:1;min-width:200px}
.info-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:900;line-height:1.3;margin-bottom:4px;color:var(--text)}
.info-channel{font-size:13px;color:var(--muted);margin-bottom:12px}
.info-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.info-stat{text-align:center;background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:7px 12px;min-width:65px;box-shadow:var(--shadow-sm)}
.info-stat-val{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:900;color:var(--violet)}
.info-stat-lbl{font-size:10px;color:var(--muted);margin-top:2px;font-weight:700;text-transform:uppercase}
.info-desc{font-size:13px;color:var(--muted);line-height:1.6;white-space:pre-wrap;max-height:90px;overflow:hidden}
.info-desc.expanded{max-height:none}
.info-more{font-size:12px;color:var(--violet);cursor:pointer;font-weight:800;margin-top:4px;display:inline-block}
.info-section{margin-top:12px}
.info-section-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;font-family:'Space Grotesk',sans-serif}
.info-tags{display:flex;flex-wrap:wrap;gap:5px}
.info-tag{background:var(--surface2);border:1.5px solid var(--ink-light);border-radius:var(--radius);padding:2px 9px;font-size:12px;color:var(--muted)}
.info-chapters{list-style:none}
.info-chapter{display:flex;gap:10px;font-size:13px;align-items:baseline;color:var(--text);padding:3px 0}
.info-chapter-time{color:var(--violet);font-weight:800;min-width:48px;font-family:'Space Grotesk',sans-serif}
.empty-state{text-align:center;padding:56px 20px;color:var(--muted);font-size:15px;line-height:2}

/* ═══════════════════════════════════
   TASKS
═══════════════════════════════════ */
.active-section-header,.tasks-sect-label{
  font-size:11px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:8px;padding-bottom:8px;
  border-bottom:var(--bw) solid var(--ink);
  font-family:'Space Grotesk',sans-serif;
}
.task-item{
  background:var(--surface);border:var(--bw) solid var(--ink);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:7px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  transition:all .1s;box-shadow:var(--shadow-sm);
}
.task-item.expandable{cursor:pointer}
.task-item.expandable:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.task-item.expanded{border-color:var(--violet);box-shadow:var(--shadow-sm)}
.task-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.task-item-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-shrink:0}
.task-item-thumb{width:44px;height:28px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;border:1.5px solid var(--ink)}
.task-item-title-col{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.task-item-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.task-item-origin{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-item-meta{font-size:11px;font-weight:800;color:var(--muted);font-family:'Space Grotesk',sans-serif}
.task-item-time{font-size:11px;color:var(--muted)}
.task-item-id-row{display:inline-flex;align-items:center;gap:3px}
.task-item-id{font-family:monospace;font-size:10px;color:var(--muted);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-item-id-copy{background:none;border:none;cursor:pointer;color:var(--muted);padding:2px;display:inline-flex;align-items:center;transition:.1s}
.task-item-id-copy:hover,.task-item-id-copy.copied{color:var(--green)}
.task-src-link{color:var(--muted);display:inline-flex;align-items:center;margin-left:3px;transition:.1s}
.task-src-link:hover{color:var(--violet);text-decoration:none}
.task-expand-icon{color:var(--muted);font-size:11px;transition:transform .15s}
.task-item.expanded .task-expand-icon{transform:rotate(90deg)}
.task-status-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--radius);font-size:11px;font-weight:800;white-space:nowrap;flex-shrink:0;border:1.5px solid var(--ink)}
.sb-pending{background:var(--amber-light);color:var(--amber)}
.sb-processing{background:var(--cyan-light);color:var(--cyan)}
.sb-splitting{background:var(--violet-light);color:var(--violet)}
.sb-done{background:var(--green-light);color:var(--green)}
.sb-error{background:var(--red-light);color:var(--red)}
.task-action-btn{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:var(--radius);display:inline-flex;align-items:center;transition:.1s}
.task-action-btn:hover{background:var(--bg2);color:var(--text)}
.task-del-btn:hover{color:var(--red);background:var(--red-light)}
.task-retry-btn:hover{color:var(--green);background:var(--green-light)}
.task-dl-btns{display:inline-flex;gap:5px;align-items:center}
.task-dl-btn{font-size:12px;padding:5px 10px;border-radius:var(--radius);background:var(--violet);color:#fff;text-decoration:none;font-weight:800;border:1.5px solid var(--ink);box-shadow:var(--shadow-sm);transition:all .1s;white-space:nowrap}
.task-dl-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);color:#fff;text-decoration:none}
.task-dl-btn-info{background:var(--surface2);color:var(--muted);box-shadow:var(--shadow-sm)}
.task-dl-btn-info:hover{background:var(--violet-light);color:var(--violet);transform:translate(-1px,-1px)}
.task-detail-panel{flex-basis:100%;order:10;border-top:var(--bw) solid var(--ink-light);margin-top:10px;padding-top:12px}
.tdetail-track{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.tdetail-thumb{width:80px;height:52px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;border:var(--bw) solid var(--ink)}
.tdetail-info{flex:1;min-width:0}
.tdetail-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px}
.tdetail-meta{font-size:12px;color:var(--muted);margin-bottom:5px}
.tdetail-actions{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.tdetail-dl{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:4px 10px;border-radius:var(--radius);background:var(--violet);color:#fff;text-decoration:none;font-weight:800;border:1.5px solid var(--ink);transition:all .1s}
.tdetail-dl:hover{transform:translate(-1px,-1px);color:#fff;text-decoration:none}
.tdetail-dl-sec{font-size:12px;padding:4px 10px;border-radius:var(--radius);background:var(--surface2);color:var(--muted);border:1.5px solid var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;font-weight:700;transition:.1s}
.tdetail-dl-sec:hover{background:var(--violet-light);color:var(--violet);text-decoration:none}
.tdetail-expiry{font-size:11px;color:var(--amber);margin-top:3px;font-weight:700}
.tdetail-error{font-size:12px;color:var(--red);padding:7px 10px;background:var(--red-light);border-radius:var(--radius);border:1.5px solid var(--ink);margin-top:7px}
.tdetail-pl-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;background:var(--violet-light);color:var(--violet);border:1.5px solid var(--ink);border-radius:var(--radius);padding:2px 8px;margin-bottom:4px;font-weight:800}
.tdetail-sect{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:8px 0 5px;padding-bottom:4px;border-bottom:1.5px solid var(--ink-light);font-family:'Space Grotesk',sans-serif}
.tdetail-fields{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:12px;margin-bottom:6px}
.tdetail-fkey{font-family:monospace;color:var(--muted);font-size:11px;padding:2px 0;white-space:nowrap}
.tdetail-fval{font-family:monospace;font-size:11px;color:var(--text);word-break:break-all;padding:2px 0}
.fv-str{color:#059669}.fv-num{color:#0891b2}.fv-bool-t{color:#059669}.fv-bool-f{color:#dc2626}.fv-null{color:var(--muted)}.fv-hint{color:var(--muted);margin-left:5px}
.chapters-mini-list{display:flex;flex-direction:column;gap:5px}
.chapter-mini{display:flex;align-items:center;gap:7px;padding:6px 8px;background:var(--surface2);border-radius:var(--radius);border:1.5px solid var(--ink-light)}
.chapter-mini-num{font-size:11px;font-weight:800;color:var(--muted);min-width:20px}
.chapter-mini-info{flex:1;min-width:0}
.chapter-mini-title{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-mini-meta{font-size:11px;color:var(--muted)}
.chapter-mini-dl{font-size:11px;padding:2px 8px;border-radius:var(--radius);background:var(--violet);color:#fff;text-decoration:none;flex-shrink:0;border:1.5px solid var(--ink);font-weight:700}
.chapter-mini-dl:hover{color:#fff;text-decoration:none}
.batch-group{background:var(--bg2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:10px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.batch-group-hdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:8px;border-bottom:1.5px solid var(--ink-light)}
.batch-group-id-row{display:inline-flex;align-items:center;gap:3px}
.batch-group-id{font-family:monospace;font-size:10px;color:var(--muted)}
.batch-group-meta{flex:1;font-size:12px;color:var(--muted);font-weight:700}
.batch-group-time{font-size:11px;color:var(--muted)}
.batch-export-btn{font-size:11px;padding:3px 8px;border-radius:var(--radius);background:var(--surface);border:1.5px solid var(--ink);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:3px;transition:.1s;box-shadow:2px 2px 0 var(--ink)}
.batch-export-btn:hover{background:var(--violet-light);color:var(--violet)}
.batch-group .task-item{background:var(--surface);margin-bottom:5px}

/* ═══════════════════════════════════
   SETTINGS
═══════════════════════════════════ */
.settings-wrap{display:flex;flex-direction:column;gap:16px;max-width:720px;padding-bottom:48px}
.settings-card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 26px}
.settings-card-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:900;margin-bottom:12px;color:var(--text)}
.settings-hint{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.settings-vars-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.var-chip{background:var(--violet-light);border:1.5px solid var(--ink);border-radius:var(--radius);padding:5px 10px;font-size:12px;color:var(--text);line-height:1.5;box-shadow:2px 2px 0 var(--ink)}
.var-chip code{color:var(--violet);font-weight:800}
.var-chip em{color:var(--muted);font-style:normal}
.settings-examples{background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:12px 14px;margin-bottom:4px}
.settings-examples-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.examples-table{width:100%;border-collapse:collapse;font-size:12px;color:var(--text)}
.examples-table th{text-align:left;color:var(--muted);padding:4px 8px 7px;font-weight:800;border-bottom:1.5px solid var(--ink-light)}
.examples-table td{padding:5px 8px;border-bottom:1px solid var(--ink-light);vertical-align:top}
.examples-table tr:last-child td{border-bottom:none}
.examples-table code{color:var(--violet);font-size:11px;font-weight:700}
.field-hint{font-size:11px;color:var(--muted);margin-top:4px}
.field-input{background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--text);border-radius:var(--radius);padding:8px 12px;font-size:13px;width:100%;outline:none;transition:all .1s;box-shadow:inset 2px 2px 0 rgba(12,11,26,.05)}
.field-input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.settings-toggle{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer}
.settings-toggle input{display:none}
.task-form-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.task-form-toggle input{display:none}
.toggle-track{width:40px;height:22px;border-radius:11px;background:var(--bg3);position:relative;flex-shrink:0;transition:background .15s;margin-top:2px;border:var(--bw) solid var(--ink)}
.toggle-track::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:1px 1px 0 var(--ink)}
.settings-toggle input:checked+.toggle-track,.task-form-toggle input:checked+.toggle-track{background:var(--violet)}
.settings-toggle input:checked+.toggle-track::after,.task-form-toggle input:checked+.toggle-track::after{transform:translateX(18px)}
.toggle-label{display:flex;flex-direction:column;gap:2px}
.toggle-label strong{font-size:14px;font-weight:800;color:var(--text)}
.toggle-sub{font-size:12px;color:var(--muted)}
.toggle-sub code{color:var(--violet);font-weight:700}
.settings-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-status{font-size:13px;color:var(--green);font-weight:800}
.s-status.err{color:var(--red)}
.settings-preview{background:var(--violet-light);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:10px 14px;margin-top:12px;box-shadow:var(--shadow-sm)}
.settings-preview-title{font-size:11px;font-weight:800;color:var(--violet);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.settings-preview div{font-size:12px;color:var(--text);margin-bottom:3px;font-family:monospace}
.meta-tag-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.meta-tag-label{font-size:12px;font-family:monospace;color:var(--muted);width:92px;flex-shrink:0;font-weight:700}
.meta-tag-row input{flex:1;font-size:12px;font-family:monospace;background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--text);border-radius:var(--radius);padding:5px 9px;outline:none}
.meta-tag-row input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.meta-tag-use-ydl{font-size:11px;color:var(--muted);white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:4px;font-weight:700}

/* ═══════════════════════════════════
   DEVELOPER / API PAGE
═══════════════════════════════════ */
/* ═══════════════════════════════════
   DEVELOPER PAGE
═══════════════════════════════════ */
.dev-wrap{max-width:860px;padding-bottom:60px}

/* ── Hero header ── */
.dev-top{
  background:var(--violet);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:36px 40px;
  margin:28px 0 24px;
  position:relative;overflow:hidden;
}
.dev-top::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
/* corner accent */
.dev-top::after{
  content:'{ }';position:absolute;right:32px;top:50%;transform:translateY(-50%);
  font-family:'Space Grotesk',sans-serif;font-size:80px;font-weight:900;
  color:rgba(255,255,255,.08);pointer-events:none;letter-spacing:-4px;
}
.dev-top-label{
  display:inline-flex;align-items:center;gap:6px;
  color:#fff;font-size:11px;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase;
  border:2px solid rgba(255,255,255,.5);padding:4px 12px;border-radius:3px;
  margin-bottom:14px;position:relative;z-index:1;
  background:rgba(255,255,255,.1);
}
.dev-top h2{
  font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:900;
  margin-bottom:8px;color:#fff;letter-spacing:-.8px;
  position:relative;z-index:1;
}
.dev-top p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.7;position:relative;z-index:1;max-width:560px}

/* ── API Key card ── */
.apikey-card{
  background:var(--surface);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  padding:0;margin-bottom:20px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  border-top:4px solid var(--violet);
}
.apikey-card-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;
  background:var(--bg2);
  border-bottom:var(--bw) solid var(--ink);
}
.apikey-card-dots{display:flex;gap:6px}
.apikey-card-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink)}
.apikey-card-dot-r{background:#ff5f57}
.apikey-card-dot-y{background:#ffbd2e}
.apikey-card-dot-g{background:#28ca41}
.apikey-card-wintitle{font-size:11px;color:var(--muted);font-family:monospace;font-weight:600}
.apikey-card-body{padding:22px 24px}
.apikey-card-title{
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:900;
  margin-bottom:4px;color:var(--text);
}
.apikey-card-sub{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.6}
.apikey-card-sub code{background:var(--violet-light);color:var(--violet);padding:1px 6px;border-radius:3px;font-family:monospace;font-size:12px;font-weight:700;border:1px solid rgba(124,58,237,.2)}
.apikey-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apikey-box{
  flex:1;min-width:200px;
  background:var(--bg2);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);padding:11px 16px;
  font-family:monospace;font-size:13px;color:var(--violet);
  letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  filter:blur(5px);transition:filter .2s;cursor:pointer;
  box-shadow:inset 2px 2px 0 rgba(12,11,26,.06);
}
.apikey-box.revealed{filter:none}
.apikey-box.empty{color:var(--muted2);font-family:'Inter',sans-serif;font-size:13px;font-style:italic;filter:none;cursor:default;letter-spacing:0}
.apikey-actions{display:flex;gap:7px;flex-wrap:wrap}
.apikey-notice{font-size:12px;color:var(--muted);margin-top:10px}
.btn-copy{background:var(--green-light);color:var(--green);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;transition:all .1s;font-family:'Space Grotesk',sans-serif;box-shadow:var(--shadow-sm)}
.btn-copy:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn-revoke{background:var(--red-light);color:var(--red);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;transition:all .1s;font-family:'Space Grotesk',sans-serif;box-shadow:var(--shadow-sm)}
.btn-revoke:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

/* ── Playground ── */
.playground-card{
  background:var(--surface);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  margin-bottom:28px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  border-top:4px solid #f97316;
}
.playground-card-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;
  background:var(--bg2);
  border-bottom:var(--bw) solid var(--ink);
}
.playground-title{
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:900;color:var(--text);
}
.playground-sub{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:4px}
.playground-body{padding:22px 24px}
.playground-grid{margin-bottom:16px}
.playground-preview-label{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;font-family:'Space Grotesk',sans-serif;
}
.playground-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.playground-actions span{font-size:12px;color:var(--muted)}
#pg-preview{
  background:#0f0f16;color:#a78bfa;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);padding:14px 18px;
  font-family:monospace;font-size:12px;line-height:1.7;
  overflow-x:auto;white-space:pre;
  box-shadow:var(--shadow-sm);
}
#pg-result{
  background:#0f0f16;border-radius:var(--radius);
  border:var(--bw) solid var(--ink);
  padding:14px;font-family:monospace;font-size:12px;line-height:1.6;
  overflow-x:auto;white-space:pre-wrap;box-shadow:var(--shadow-sm);
}

/* ── TOC card ── */
.doc-toc{
  background:#fff;border:var(--bw) solid var(--ink);
  border-radius:var(--radius);padding:20px 24px;
  margin-bottom:28px;box-shadow:var(--shadow-sm);
  border-left:5px solid var(--violet);
}
.doc-toc-title{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:900;
  color:var(--violet);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
}
.doc-toc ol{margin:0 0 0 18px;padding:0}
.doc-toc li{font-size:14px;margin-bottom:5px;font-weight:600}
.doc-toc a{color:var(--violet);font-weight:700;text-decoration:none}
.doc-toc a:hover{text-decoration:underline}

/* ── Doc sections ── */
.doc-h2{
  font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:900;
  margin:36px 0 4px;color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.doc-h2::before{
  content:'';display:inline-block;
  width:5px;height:22px;background:var(--violet);
  border-radius:3px;flex-shrink:0;border:1.5px solid var(--ink);
}
.doc-h3{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;margin:18px 0 8px;color:var(--text)}
.doc-p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:10px}
.doc-p strong{color:var(--text)}
.doc-divider{border:none;border-top:var(--bw) solid var(--ink);margin:32px 0}

/* ── Endpoint cards ── */
.endpoint-card{
  background:var(--surface);border:var(--bw) solid var(--ink);
  border-radius:var(--radius);margin-bottom:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:all .1s;
}
.endpoint-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}
.endpoint-header{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:var(--bw) solid var(--ink);background:var(--bg2);flex-wrap:wrap;gap:8px;
}
.method-badge{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:900;padding:4px 10px;border-radius:4px;letter-spacing:.06em;border:1.5px solid var(--ink)}
.method-post{background:var(--green-light);color:var(--green)}
.method-get{background:var(--cyan-light);color:var(--cyan)}
.endpoint-path{font-family:monospace;font-size:13px;font-weight:700;color:var(--text)}
.endpoint-desc{font-size:12px;color:var(--muted);margin-left:auto;text-align:right}
.endpoint-body{padding:18px 20px}

/* ── Code blocks ── */
.code-block{
  background:#0f0f16;color:#e8deff;
  border-radius:var(--radius);border:var(--bw) solid var(--ink);
  padding:18px 20px;font-family:monospace;font-size:12.5px;line-height:1.7;
  overflow-x:auto;margin:8px 0 16px;position:relative;
  box-shadow:var(--shadow-sm);
}
.code-block .cb-label{
  position:absolute;top:10px;right:12px;
  font-size:10px;font-weight:800;color:rgba(139,92,246,.5);
  text-transform:uppercase;letter-spacing:.07em;
  background:rgba(139,92,246,.1);padding:2px 8px;border-radius:3px;border:1px solid rgba(139,92,246,.2);
}
.code-block .k{color:#c084fc}.code-block .s{color:#86efac}
.code-block .n{color:#93c5fd}.code-block .c{color:#4a4a6a}.code-block .v{color:#fdba74}

/* ── Param tables ── */
.param-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px;border:var(--bw) solid var(--ink)}
.param-table th{text-align:left;padding:10px 12px;background:var(--bg2);color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:var(--bw) solid var(--ink)}
.param-table td{padding:10px 12px;border-bottom:1.5px solid var(--ink-light);vertical-align:top;line-height:1.5;color:var(--text)}
.param-table tr:last-child td{border-bottom:none}
.param-table tr:hover td{background:var(--violet-light)}
.param-table code{background:var(--violet-light);color:var(--violet);border-radius:3px;padding:1px 6px;font-size:12px;font-weight:700}
.param-name{font-family:monospace;font-weight:700;color:var(--text);font-size:13px}
.param-req{font-size:10px;font-weight:900;color:#fff;background:var(--red);border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:middle}
.param-opt{font-size:10px;font-weight:700;color:var(--muted);margin-left:4px}

/* ── Status table ── */
.status-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px;border:var(--bw) solid var(--ink)}
.status-table th{text-align:left;padding:10px 12px;background:var(--bg2);color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:var(--bw) solid var(--ink)}
.status-table td{padding:10px 12px;border-bottom:1.5px solid var(--ink-light);vertical-align:top;color:var(--text)}
.status-table tr:last-child td{border-bottom:none}
.status-badge{display:inline-block;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:800;font-family:monospace;border:1.5px solid var(--ink)}

/* ── Tabs ── */
.tabs-row{display:flex;gap:0;margin-bottom:-2px;position:relative;z-index:1;border-bottom:var(--bw) solid var(--ink)}
.tab-btn{background:var(--bg2);border:var(--bw) solid var(--ink);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;padding:8px 18px;font-size:13px;font-weight:800;cursor:pointer;color:var(--muted);transition:all .1s;font-family:'Space Grotesk',sans-serif;margin-right:4px}
.tab-btn.active{background:var(--violet);color:#fff;border-color:var(--ink)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.doc-examples{background:var(--surface2);border:var(--bw) solid var(--ink);border-top:none;border-radius:0 var(--radius) var(--radius) var(--radius);overflow:hidden;margin-bottom:20px;padding:16px 20px}

/* ── base url box ── */
.base-url-box{display:flex;align-items:center;gap:10px;background:#0f0f16;border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:12px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.base-url-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;font-family:'Space Grotesk',sans-serif}
.base-url-val{font-family:monospace;font-size:14px;color:#39ff14;font-weight:700}
.ae-panel,.api-equiv-panel{background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px}
.api-equiv-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.api-equiv-sub{font-size:12px;color:var(--muted)}
.apikey-card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:22px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.apikey-card-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:900;margin-bottom:4px;color:var(--text)}
.apikey-card-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.apikey-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apikey-box{flex:1;min-width:200px;background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:9px 12px;font-family:monospace;font-size:13px;color:var(--text);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;filter:blur(4px);transition:filter .2s;cursor:pointer;user-select:all;box-shadow:inset 2px 2px 0 rgba(12,11,26,.06)}
.apikey-box.revealed{filter:none}
.apikey-box.empty{color:var(--muted);font-style:italic;filter:none;cursor:default}
.apikey-actions{display:flex;gap:6px;flex-wrap:wrap}
.apikey-notice{font-size:12px;color:var(--muted);margin-top:7px}
.btn-copy{background:var(--violet-light);color:var(--violet);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;transition:all .1s;box-shadow:var(--shadow-sm)}
.btn-copy:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn-revoke{background:var(--red-light);color:var(--red);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;transition:all .1s;box-shadow:var(--shadow-sm)}
.btn-revoke:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.doc-toc{background:var(--amber-light);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:18px 22px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.doc-toc-title{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.doc-toc ol{margin:0 0 0 16px;padding:0}
.doc-toc li{font-size:14px;margin-bottom:5px}
.doc-toc a{color:var(--violet);font-weight:700;text-decoration:none}
.doc-toc a:hover{text-decoration:underline}
.doc-h2{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:900;margin:32px 0 12px;padding-top:6px;color:var(--text)}
.doc-h3{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;margin:18px 0 8px;color:var(--text)}
.doc-p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:10px}
.doc-p strong{color:var(--text)}
.doc-divider{border:none;border-top:var(--bw) solid var(--ink);margin:28px 0}
.endpoint-card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.endpoint-header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:var(--bw) solid var(--ink);background:var(--bg2)}
.method-badge{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:900;padding:3px 9px;border-radius:var(--radius);letter-spacing:.04em;border:1.5px solid var(--ink)}
.method-post{background:var(--green-light);color:var(--green)}
.method-get{background:var(--cyan-light);color:var(--cyan)}
.endpoint-path{font-family:monospace;font-size:13px;font-weight:700;color:var(--text)}
.endpoint-desc{font-size:13px;color:var(--muted);margin-left:auto}
.endpoint-body{padding:18px}
.param-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px;border:var(--bw) solid var(--ink)}
.param-table th{text-align:left;padding:8px 10px;background:var(--bg2);color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:var(--bw) solid var(--ink)}
.param-table td{padding:8px 10px;border-bottom:1px solid var(--ink-light);vertical-align:top;line-height:1.5;color:var(--text)}
.param-table tr:last-child td{border-bottom:none}
.param-table code{background:var(--violet-light);color:var(--violet);border-radius:var(--radius);padding:1px 5px;font-size:12px;font-weight:700;border:1px solid var(--ink-light)}
.param-name{font-family:monospace;font-weight:700;color:var(--text);font-size:13px}
.param-req{font-size:11px;font-weight:800;color:var(--red);margin-left:4px}
.param-opt{font-size:11px;font-weight:700;color:var(--muted);margin-left:4px}
.code-block{background:#1a1025;color:#e8deff;border-radius:var(--radius);border:var(--bw) solid var(--ink);padding:16px 18px;font-family:monospace;font-size:12px;line-height:1.7;overflow-x:auto;margin:8px 0 16px;position:relative;box-shadow:var(--shadow-sm)}
.code-block .cb-label{position:absolute;top:8px;right:12px;font-size:10px;font-weight:800;color:rgba(167,139,250,.5);text-transform:uppercase;letter-spacing:.06em}
.code-block .k{color:#c084fc}.code-block .s{color:#86efac}.code-block .n{color:#93c5fd}.code-block .c{color:#52525b}.code-block .v{color:#fdba74}
.status-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px;border:var(--bw) solid var(--ink)}
.status-table th{text-align:left;padding:8px 10px;background:var(--bg2);color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:var(--bw) solid var(--ink)}
.status-table td{padding:8px 10px;border-bottom:1px solid var(--ink-light);vertical-align:top;color:var(--text)}
.status-table tr:last-child td{border-bottom:none}
.status-badge{display:inline-block;padding:2px 9px;border-radius:var(--radius);font-size:12px;font-weight:800;font-family:monospace;border:1.5px solid var(--ink)}
.tabs-row{display:flex;gap:4px;margin-bottom:-2px;position:relative;z-index:1}
.tab-btn{background:var(--bg2);border:var(--bw) solid var(--ink);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;padding:7px 14px;font-size:13px;font-weight:800;cursor:pointer;color:var(--muted);transition:all .1s;font-family:'Space Grotesk',sans-serif}
.tab-btn.active{background:var(--violet);color:#fff}
.tab-panel{display:none}
.tab-panel.active{display:block}
.base-url-box{display:flex;align-items:center;gap:8px;background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px}
.base-url-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.base-url-val{font-family:monospace;font-size:13px;color:var(--violet);font-weight:700}
.ae-panel,.api-equiv-panel{background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.api-equiv-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.api-equiv-sub{font-size:11px;color:var(--muted)}
.doc-examples{background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}

/* ═══════════════════════════════════
   SMART FORM (sf-*)
═══════════════════════════════════ */
.sf-card{background:transparent;padding:0}
.sf-step1-hint{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.5;font-weight:600}
.sf-url-row{display:flex;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.sf-url-input{flex:1;min-width:200px;background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--text);border-radius:var(--radius);padding:11px 14px;font-size:14px;outline:none;transition:all .15s;box-shadow:inset 2px 2px 0 rgba(12,11,26,.06)}
.sf-url-input::placeholder{color:var(--muted2)}
.sf-url-input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.sf-analyze-btn{background:#f97316;color:#fff;border:var(--bw) solid var(--ink);padding:11px 20px;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:800;font-family:'Space Grotesk',sans-serif;box-shadow:var(--shadow-sm);transition:all .1s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sf-analyze-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md);background:#ea580c}
.sf-analyze-btn:disabled{opacity:.6;pointer-events:none;transform:none;box-shadow:var(--shadow-sm)}
.sf-hint-row{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
.sf-back{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;font-weight:700;padding:0 0 12px;display:inline-flex;align-items:center;gap:4px;transition:.1s}
.sf-back:hover{color:var(--violet)}
.sf-pl-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sf-pl-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;color:var(--text);margin-bottom:3px}
.sf-pl-sub{font-size:12px;color:var(--muted)}
.sf-pl-ctrl{display:flex;align-items:center;gap:7px;flex-shrink:0}
.sf-pl-list{max-height:180px;overflow-y:auto;background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:5px 10px;margin-bottom:10px}
.sf-pl-item{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid var(--ink-light);cursor:pointer;user-select:none;color:var(--muted);font-size:13px}
.sf-pl-item:last-child{border-bottom:none}
.sf-pl-item:hover{color:var(--text)}
.sf-pl-item input{accent-color:var(--violet);width:13px;height:13px;flex-shrink:0}
.sf-pl-num{font-size:11px;color:var(--muted);min-width:18px;text-align:right;font-weight:800}
.sf-pl-ttl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.sf-pl-dur{font-size:11px;color:var(--muted);white-space:nowrap}
.sf-pl-prog{margin-top:10px}
.sf-pl-prog-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:700}
.sf-pl-prog-bar{height:8px;background:var(--bg2);border:var(--bw) solid var(--ink);border-radius:var(--radius);overflow:hidden}
.sf-pl-prog-fill{height:100%;background:var(--violet);transition:width .3s}
.sf-preview-thumb{width:76px;height:48px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;border:var(--bw) solid var(--ink)}
.sf-preview-meta{flex:1;min-width:0}
.sf-preview-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-preview-sub{font-size:12px;color:var(--muted);margin-bottom:5px}
.sf-preview-badges{display:flex;flex-wrap:wrap;gap:4px}
.sf-badge{font-size:11px;font-weight:800;padding:2px 7px;border-radius:var(--radius);background:var(--surface2);color:var(--muted);border:1.5px solid var(--ink)}
.sf-badge.blue{background:var(--cyan-light);color:var(--cyan)}
.sf-badge.green{background:var(--green-light);color:var(--green)}
.sf-section{margin-bottom:12px}
.sf-section-lbl{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;font-family:'Space Grotesk',sans-serif}
.sf-fmt-groups{display:flex;flex-direction:column;gap:7px}
.sf-fmt-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sf-fmt-group-icon{font-size:13px;flex-shrink:0}
.sf-fmt-pills{display:flex;flex-wrap:wrap;gap:4px}
.sf-pill{background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--muted);padding:4px 10px;border-radius:var(--radius);cursor:pointer;font-size:12px;font-weight:800;font-family:'Space Grotesk',sans-serif;transition:all .1s;box-shadow:2px 2px 0 var(--ink)}
.sf-pill:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:var(--bg2);color:var(--text)}
.sf-pill.sf-active{background:var(--violet);color:#fff}
.sf-nat{font-size:9px;background:var(--cyan-light);color:var(--cyan);border-radius:var(--radius);padding:1px 3px;font-weight:800;border:1px solid var(--ink)}
.sf-fmt-note{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
.sf-quality-row,.sf-vq-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.sf-quality-row label,.sf-vq-row label{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.sf-quality-sel,.sf-vq-sel{background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--text);border-radius:var(--radius);padding:7px 10px;font-size:13px;font-weight:600;outline:none;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .1s}
.sf-quality-sel:focus,.sf-vq-sel:focus{background:#fff}
.sf-split-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sf-split-lbl{font-size:13px;font-weight:700;color:var(--text);flex:1}
.sf-split-tag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--radius);border:1.5px solid var(--ink)}
.sf-split-tag.has{background:var(--green-light);color:var(--green)}
.sf-split-tag.none{background:var(--bg2);color:var(--muted)}
.sf-submit{width:100%;background:var(--violet);color:#fff;border:var(--bw) solid var(--ink);padding:13px 24px;border-radius:var(--radius);cursor:pointer;font-size:15px;font-weight:900;font-family:'Space Grotesk',sans-serif;box-shadow:var(--shadow-sm);transition:all .1s;margin-top:5px}
.sf-submit:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md);background:#6d28d9}
.sf-submit:disabled{opacity:.5;pointer-events:none;transform:none;box-shadow:var(--shadow-sm)}

/* ═══════════════════════════════════
   GRAFFITI BLOCK
═══════════════════════════════════ */
.graffiti-block{
  background:#0f0f16;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius);
  padding:48px 44px;
  box-shadow:var(--shadow-lg);
  margin-bottom:56px;
  position:relative;
  overflow:hidden;
}
/* dot grid texture — like spray on concrete */
.graffiti-block::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:22px 22px;pointer-events:none;
}
/* neon glow blobs in corners */
.graffiti-block::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 40% 40% at 0% 0%,rgba(57,255,20,.07) 0%,transparent 60%),
    radial-gradient(ellipse 35% 35% at 100% 100%,rgba(0,245,255,.06) 0%,transparent 60%),
    radial-gradient(ellipse 30% 30% at 100% 0%,rgba(255,16,240,.05) 0%,transparent 60%);
  pointer-events:none;
}
.graffiti-header{position:relative;z-index:1;margin-bottom:36px}
.graffiti-tag{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;font-weight:900;
  text-transform:uppercase;letter-spacing:.18em;
  color:#39ff14;
  border:2px solid #39ff14;
  padding:5px 14px;
  border-radius:2px;
  margin-bottom:18px;
  transform:rotate(-1.5deg);
  box-shadow:0 0 12px rgba(57,255,20,.3);
}
.graffiti-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:38px;font-weight:900;
  color:#fff;line-height:1.1;
  letter-spacing:-1.5px;
  position:relative;z-index:1;
}
.graffiti-title em{
  font-style:normal;
  color:#ffe600;
  text-shadow:0 0 20px rgba(255,230,0,.4);
}

.graffiti-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  position:relative;z-index:1;
}
@media(max-width:620px){.graffiti-grid{grid-template-columns:1fr}}
@media(max-width:680px){.graffiti-block{padding:32px 24px}.graffiti-title{font-size:28px}}

.graffiti-card{
  background:rgba(255,255,255,.04);
  border-width:2px;border-style:solid;
  border-radius:4px;
  padding:24px 22px 22px;
  position:relative;overflow:hidden;
  transition:transform .1s,box-shadow .1s;
}
.graffiti-card:hover{transform:translate(-3px,-3px)}

/* ghosted big number */
.gc-num{
  position:absolute;right:14px;top:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:64px;font-weight:900;
  line-height:1;opacity:.12;
  user-select:none;pointer-events:none;
}

.graffiti-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:10px;
  position:relative;z-index:1;
}
.graffiti-card p{
  font-size:13px;color:rgba(255,255,255,.6);
  line-height:1.75;
  position:relative;z-index:1;
}
.graffiti-card p strong{color:rgba(255,255,255,.9)}

/* Neon color variants */
.gc-green{
  border-color:#39ff14;
  box-shadow:4px 4px 0 #39ff14,0 0 18px rgba(57,255,20,.12);
}
.gc-green:hover{box-shadow:6px 6px 0 #39ff14,0 0 28px rgba(57,255,20,.2)}
.gc-green h3{color:#39ff14;text-shadow:0 0 10px rgba(57,255,20,.5)}
.gc-green .gc-num{color:#39ff14}

.gc-yellow{
  border-color:#ffe600;
  box-shadow:4px 4px 0 #ffe600,0 0 18px rgba(255,230,0,.12);
}
.gc-yellow:hover{box-shadow:6px 6px 0 #ffe600,0 0 28px rgba(255,230,0,.2)}
.gc-yellow h3{color:#ffe600;text-shadow:0 0 10px rgba(255,230,0,.5)}
.gc-yellow .gc-num{color:#ffe600}

.gc-pink{
  border-color:#ff10f0;
  box-shadow:4px 4px 0 #ff10f0,0 0 18px rgba(255,16,240,.12);
}
.gc-pink:hover{box-shadow:6px 6px 0 #ff10f0,0 0 28px rgba(255,16,240,.2)}
.gc-pink h3{color:#ff10f0;text-shadow:0 0 10px rgba(255,16,240,.5)}
.gc-pink .gc-num{color:#ff10f0}

.gc-cyan{
  border-color:#00f5ff;
  box-shadow:4px 4px 0 #00f5ff,0 0 18px rgba(0,245,255,.12);
}
.gc-cyan:hover{box-shadow:6px 6px 0 #00f5ff,0 0 28px rgba(0,245,255,.2)}
.gc-cyan h3{color:#00f5ff;text-shadow:0 0 10px rgba(0,245,255,.5)}
.gc-cyan .gc-num{color:#00f5ff}

/* ═══════════════════════════════════
   MODAL
═══════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(12,11,26,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:32px 28px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--violet)}
.modal h2{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:900;margin-bottom:7px;color:var(--text)}
.modal p{color:var(--muted);font-size:14px;margin-bottom:20px;line-height:1.6}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:800;margin-bottom:5px;color:var(--text);font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.field input{width:100%;background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--text);border-radius:var(--radius);padding:11px 14px;font-size:15px;outline:none;transition:all .15s;box-shadow:inset 2px 2px 0 rgba(12,11,26,.06)}
.field input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* ═══════════════════════════════════
   TOAST
═══════════════════════════════════ */
#toast{
  position:fixed;bottom:20px;right:20px;max-width:300px;
  background:var(--ink);color:#fff;
  border-radius:var(--radius);padding:12px 16px;
  font-size:14px;font-weight:700;z-index:9999;
  transform:translateY(70px);opacity:0;
  transition:all .25s;pointer-events:none;
  box-shadow:var(--shadow-md);
  border:var(--bw) solid var(--ink);
}
#toast.show{transform:none;opacity:1}
#toast.ok{background:var(--green);border-color:var(--ink)}
#toast.err{background:var(--red);border-color:var(--ink)}

/* ═══════════════════════════════════
   FOOTER — GRAFFITI
═══════════════════════════════════ */
footer,footer.footer-graffiti{
  background:#0c0b14;
  position:relative;z-index:2;
  overflow:hidden;
  padding:56px 0 32px;
  border-top:var(--bw) solid #0c0b14;
}
/* dot texture */
.fg-texture{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:20px 20px;
  pointer-events:none;
}
/* neon top border */
.fg-topline{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#39ff14,#00f5ff,#ff10f0,#ffe600,#39ff14);
  background-size:400% 100%;
  animation:fg-line-run 6s linear infinite;
}
@keyframes fg-line-run{to{background-position:400% 0}}

/* ghost big text */
.fg-ghost{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(80px,14vw,160px);font-weight:900;
  color:rgba(255,255,255,.025);
  white-space:nowrap;user-select:none;pointer-events:none;
  letter-spacing:-4px;
}

.fg-inner{
  max-width:900px;margin:0 auto;padding:0 24px;
  text-align:center;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:28px;
}

/* logo */
.fg-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.fg-logo{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:28px;font-weight:900;color:#fff;
  text-decoration:none;
}
.fg-logo em{font-style:normal;color:#39ff14;text-shadow:0 0 16px rgba(57,255,20,.5)}
.fg-tagline{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.1em;
  color:rgba(255,255,255,.35);
  text-transform:lowercase;
}

/* nav */
.fg-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fg-link{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:800;
  text-decoration:none;
  padding:7px 18px;
  border-width:2px;border-style:solid;border-radius:3px;
  transition:transform .1s,box-shadow .1s;
  letter-spacing:.04em;
}
.fg-link:hover{transform:translate(-2px,-2px);text-decoration:none}
.fg-l1{color:#39ff14;border-color:#39ff14;box-shadow:3px 3px 0 #39ff14}
.fg-l1:hover{box-shadow:5px 5px 0 #39ff14;color:#39ff14}
.fg-l2{color:#00f5ff;border-color:#00f5ff;box-shadow:3px 3px 0 #00f5ff}
.fg-l2:hover{box-shadow:5px 5px 0 #00f5ff;color:#00f5ff}
.fg-l3{color:#ff10f0;border-color:#ff10f0;box-shadow:3px 3px 0 #ff10f0}
.fg-l3:hover{box-shadow:5px 5px 0 #ff10f0;color:#ff10f0}
.fg-l4{color:#ffe600;border-color:#ffe600;box-shadow:3px 3px 0 #ffe600}
.fg-l4:hover{box-shadow:5px 5px 0 #ffe600;color:#ffe600}

/* desc */
.fg-desc{
  font-size:12px;font-weight:700;
  color:rgba(255,255,255,.25);
  letter-spacing:.08em;
  text-transform:uppercase;
  max-width:600px;line-height:1.9;
}

/* copy */
.fg-copy{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;align-items:center;
  font-size:11px;color:rgba(255,255,255,.2);
  font-weight:600;
}
.fg-dot{color:rgba(255,255,255,.1);font-size:16px}

/* Legacy compat (other pages might reference old classes) */
.footer-inner,.footer-logo,.footer-desc,.footer-links,.footer-copy,
.footer-sakura,.footer-kanji{display:none}

/* ═══════════════════════════════════
   TASK FORM
═══════════════════════════════════ */
.task-form-card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.task-form-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:800;color:var(--text);margin-bottom:12px}
.task-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:500px){.task-form-grid{grid-template-columns:1fr}}
.task-form-row{display:flex;flex-direction:column;gap:4px}
.task-form-row label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:'Space Grotesk',sans-serif}
.task-form-input,.task-form-select{background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--text);border-radius:var(--radius);padding:8px 10px;font-size:13px;outline:none;transition:all .15s;box-shadow:inset 2px 2px 0 rgba(12,11,26,.05)}
.task-form-input:focus,.task-form-select:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.tinfo-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.tinfo-thumb{width:76px;height:48px;border-radius:var(--radius);object-fit:cover;border:var(--bw) solid var(--ink)}
.tinfo-body{flex:1;min-width:0}
.tinfo-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px}
.tinfo-meta{font-size:11px;color:var(--muted);margin-bottom:5px}
.tinfo-details{display:flex;gap:6px;flex-wrap:wrap}
.tinfo-row2{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.tinfo-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tinfo-val{font-size:12px;color:var(--text);font-weight:600}
.tinfo-hint{font-size:11px;color:var(--muted)}
.tinfo-good{background:var(--green-light);color:var(--green);border:1.5px solid var(--ink);border-radius:var(--radius);padding:2px 7px;font-size:11px;font-weight:800}
.tinfo-warn{background:var(--amber-light);color:var(--amber);border:1.5px solid var(--ink);border-radius:var(--radius);padding:2px 7px;font-size:11px;font-weight:800}
.tinfo-playlist{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);background:var(--surface2);border-radius:var(--radius);padding:5px 9px;margin-top:5px;border:1.5px solid var(--ink-light)}
.tinfo-playlist-icon{font-size:13px}
.task-info-card{background:var(--surface2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}

/* ═══════════════════════════════════
   MISC
═══════════════════════════════════ */
#pg-preview{background:#1a1025;color:#c4b5fd;border-radius:var(--radius);border:var(--bw) solid var(--ink);padding:14px 16px;font-family:monospace;font-size:12px;line-height:1.7;overflow-x:auto;white-space:pre;margin-top:8px;box-shadow:var(--shadow-sm)}
#pg-result{background:#1a1025;border-radius:var(--radius);border:var(--bw) solid var(--ink);padding:14px;font-family:monospace;font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;margin-top:8px}
#pg-url{width:100%;background:var(--surface2);border:var(--bw) solid var(--ink);color:var(--text);border-radius:var(--radius);padding:9px 12px;font-size:13px;outline:none;resize:vertical;font-family:monospace;min-height:72px;box-shadow:inset 2px 2px 0 rgba(12,11,26,.05)}
#pg-url:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--violet)}
.elevated{box-shadow:var(--shadow-md)}
.chapters-callout{background:var(--violet-light);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.chapters-callout-icon{font-size:16px;flex-shrink:0}
.chapters-callout-body{font-size:13px;color:var(--text);line-height:1.6}
.page-section-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:900;color:var(--text);margin-bottom:12px}
.cabinet-sf-wrap{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:22px 26px;margin-bottom:22px;box-shadow:var(--shadow-sm)}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media(max-width:680px){
  .url-row,.sf-url-row{flex-direction:column}
  .btn-get,.sf-analyze-btn{width:100%;justify-content:center}
  .format-groups{flex-direction:column;gap:10px}
  .opts-grid{flex-direction:column}
  .checks{flex-direction:column;gap:6px}
  main{padding:0 14px 56px}
  .trust-bar{flex-direction:column;gap:0}
  .trust-item{border-right:none;border-bottom:var(--bw) solid var(--ink)}
  .trust-item:last-child{border-bottom:none}
  .task-item{flex-wrap:wrap}
  .task-item-right{width:100%;justify-content:flex-start}
  .tdetail-fields{grid-template-columns:1fr}
}
@media(max-width:480px){
  .modal{padding:22px 18px}
  .settings-card{padding:16px}
  footer{padding:32px 0 20px}
}