/* ════════════════════════════════════════════════════════════════════════
   RENZ - Design System v10 "Daylight"
   Aesthetic: clean, warm, handcrafted - soft ambient shadows, no glow/neon
   Fonts: Plus Jakarta Sans (self-hosted, UI + display, weights 400–800)
   Architecture: CSS-variable driven, spring-physics motion engine
   ════════════════════════════════════════════════════════════════════════ */

/* Plus Jakarta Sans - Google Fonts, OFL-1.1, self-hosted from /fonts */
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plus-jakarta-sans/pjs-400.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/plus-jakarta-sans/pjs-500.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/plus-jakarta-sans/pjs-600.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/plus-jakarta-sans/pjs-700.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/plus-jakarta-sans/pjs-800.woff2') format('woff2');
}

/* ── 1. Design Tokens ──────────────────────────────────────────────────── */
:root {
  /* ══ Backgrounds - warm charcoal, never pure black ══ */
  --bg-0:#16171B; --bg-1:#1C1E23; --bg-2:#24262C; --bg-3:#2C2F36; --bg-4:#383B44;
  --bg-overlay:rgba(22,23,27,.97);
  --bg-glass:rgba(255,255,255,.045); --bg-glass-border:rgba(255,255,255,.08);
  --canvas-r:22; --canvas-g:23; --canvas-b:27;

  /* ══ Borders ══ */
  --bd-0:rgba(255,255,255,.06); --bd-1:rgba(255,255,255,.10);
  --bd-2:rgba(255,255,255,.16); --bd-3:rgba(255,255,255,.24);

  /* ══ Accent - monochrome white, adaptive across themes ══ */
  --accent:#F2F2F0; --accent-alt:#D8D8D4;
  --accent-light:#FFFFFF; --accent-dark:#B8B8B3;
  --accent-dim:rgba(242,242,240,.16); --accent-glow:rgba(242,242,240,.38);
  --accent-glow-lg:rgba(242,242,240,.16);
  --accent-contrast:#16171B;

  /* ══ Semantic states ══ */
  --success:#3FAE72; --success-dim:rgba(63,174,114,.14);
  --warning:#E3A33E; --warning-dim:rgba(227,163,62,.14);
  --danger:#E1594E;  --danger-dim:rgba(225,89,78,.14);
  --info:#4F9FD1;    --info-dim:rgba(79,159,209,.14);

  /* ══ HTTP method tokens ══ */
  --m-get:#3FAE72;    --m-get-bg:rgba(63,174,114,.12);
  --m-post:#E3A33E;   --m-post-bg:rgba(227,163,62,.12);
  --m-put:#4F9FD1;    --m-put-bg:rgba(79,159,209,.12);
  --m-delete:#E1594E; --m-delete-bg:rgba(225,89,78,.12);

  /* ══ Category palette ══ */
  --cat-anime:#3FAE72;      --cat-anime-dim:rgba(63,174,114,.14);
  --cat-samehadaku:#4F9FD1; --cat-samehadaku-dim:rgba(79,159,209,.14);
  --cat-download:#E3A33E;   --cat-download-dim:rgba(227,163,62,.14);
  --cat-maker:#C97BC2;      --cat-maker-dim:rgba(201,123,194,.14);
  --cat-search:#F0663D;     --cat-search-dim:rgba(240,102,61,.14);
  --cat-tools:#3FB6AB;      --cat-tools-dim:rgba(63,182,171,.14);
  --cat-internet:#E0668F;   --cat-internet-dim:rgba(224,102,143,.14);
  --cat-ai:#7B93E0;         --cat-ai-dim:rgba(123,147,224,.14);
  --cat-game:#5BC97B;       --cat-game-dim:rgba(91,201,123,.14);
  --cat-movie:#D2555C;      --cat-movie-dim:rgba(210,85,92,.14);

  /* ══ Typography ══ */
  --tx-0:#F2EFEA; --tx-1:#B8B3AA; --tx-2:#8B8579; --tx-3:#5C574C;

  /* ══ Skeleton ══ */
  --sk-0:rgba(242,242,240,.06); --sk-1:rgba(242,242,240,.12);

  /* ══ Gradients - used sparingly (avatars, small accents only) ══ */
  --grad-accent:linear-gradient(135deg,#FFFFFF 0%,#D0D0CC 100%);
  --grad-hero:linear-gradient(135deg,#FFFFFF 0%,#DADAD6 55%,#AFAFAA 100%);
  --grad-mesh:
    radial-gradient(ellipse 65% 50% at 50% -8%,rgba(255,255,255,.09) 0,transparent 62%);

  /* ══ Spacing (4px grid) ══ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* ══ Border radii - soft & modern, 10–24px ══ */
  --r-xs:10px; --r-sm:12px; --r-md:14px; --r-lg:18px;
  --r-xl:22px; --r-2xl:28px; --r-full:9999px;

  /* ══ Typography stacks - single family, display weight for headings ══ */
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-serif:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  /* ══ Motion ══ */
  --spring:cubic-bezier(0.16,1,0.3,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --dur-instant:80ms; --dur-fast:160ms; --dur-base:380ms;
  --dur-slow:520ms; --dur-xslow:700ms;
  --trans-base:all var(--dur-base) var(--spring);

  /* ══ Shadows - soft ambient, warm-tinted, never harsh black ══ */
  --sh-xs:0 1px 2px rgba(10,9,8,.30);
  --sh-sm:0 2px 10px rgba(10,9,8,.34),0 1px 3px rgba(10,9,8,.28);
  --sh-md:0 6px 22px rgba(10,9,8,.36),0 2px 6px rgba(10,9,8,.28);
  --sh-lg:0 16px 44px rgba(10,9,8,.40),0 4px 14px rgba(10,9,8,.30);
  --sh-xl:0 30px 80px rgba(10,9,8,.46),0 8px 24px rgba(10,9,8,.32);
  --sh-glow:0 0 0 1px rgba(242,242,240,.28),0 4px 26px rgba(242,242,240,.28);
  --sh-card-hover:0 0 0 1px var(--bd-2),0 10px 30px rgba(10,9,8,.38);

  --nav-h:56px; --banner-h:40px;
}

/* ── 2. Light Theme ────────────────────────────────────────────────────── */
html.light {
  --bg-0:#FAF8F3; --bg-1:#FFFFFF; --bg-2:#F2EEE5; --bg-3:#E8E2D4; --bg-4:#DBD3BF;
  --bg-overlay:rgba(250,248,243,.97);
  --bg-glass:rgba(255,255,255,.90); --bg-glass-border:rgba(30,26,20,.08);
  --bd-0:rgba(30,26,20,.07); --bd-1:rgba(30,26,20,.11);
  --bd-2:rgba(30,26,20,.16); --bd-3:rgba(30,26,20,.24);
  --accent:#1A1A18; --accent-alt:#000000;
  --accent-light:#3D3D39; --accent-dark:#000000;
  --accent-dim:rgba(26,26,24,.08); --accent-glow:rgba(26,26,24,.18);
  --accent-glow-lg:rgba(26,26,24,.08);
  --accent-contrast:#FFFFFF;
  --grad-accent:linear-gradient(135deg,#2E2E2A 0%,#000000 100%);
  --grad-hero:linear-gradient(135deg,#4A4A44 0%,#1A1A18 55%,#000000 100%);
  --tx-0:#211D17; --tx-1:#5A5346; --tx-2:#847C6C; --tx-3:#ACA495;
  --sk-0:rgba(26,26,24,.04); --sk-1:rgba(26,26,24,.08);
  --sh-xs:0 1px 2px rgba(33,29,23,.05);
  --sh-sm:0 2px 10px rgba(33,29,23,.06),0 1px 3px rgba(33,29,23,.04);
  --sh-md:0 6px 22px rgba(33,29,23,.07),0 2px 6px rgba(33,29,23,.05);
  --sh-lg:0 16px 40px rgba(33,29,23,.09),0 4px 14px rgba(33,29,23,.06);
  --sh-xl:0 28px 64px rgba(33,29,23,.11),0 8px 24px rgba(33,29,23,.07);
  --sh-card-hover:0 0 0 1px var(--bd-2),0 10px 28px rgba(33,29,23,.09);
  --grad-mesh:
    radial-gradient(ellipse 65% 50% at 50% -8%,rgba(26,26,24,.05) 0,transparent 62%);
}

/* ── 1b. Display serif applied to headings - "klasik" half of the pairing ── */

/* ── 1b. Display weight applied to headings ── */
h1,h2,h3,
.hero-title,.section-title,.how-title,
.nav-logo span,.auth-brand span,
.card-title,.panel-title{
  font-family:var(--font-serif);
  font-weight:750;
  letter-spacing:-0.02em;
}

/* ── 3. Keyframes ──────────────────────────────────────────────────────── */
@keyframes fadeUp      { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer     { from{background-position:-200% center} to{background-position:200% center} }
@keyframes spinSlug    { to{transform:rotate(360deg)} }
@keyframes toastIn     { from{opacity:0;transform:translateX(28px) scale(.96)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes modalIn     { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes drawerIn    { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes slideUp     { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes shake       { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)} }
@keyframes dotPulse    { 0%,80%,100%{transform:scale(1);opacity:.6} 40%{transform:scale(1.5);opacity:1} }
@keyframes pulseGlow   { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow)} 50%{box-shadow:0 0 0 6px transparent} }
@keyframes filterFade  { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }

/* ── 4. Reset & Base ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body {
  font-family:var(--font-sans);
  font-size:clamp(14px,1.5vw,15px);
  line-height:1.65;
  background:var(--bg-0);
  color:var(--tx-1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100dvh;
  overflow-x:hidden;
}

/* ── 5. Layout Primitives ──────────────────────────────────────────────── */
.container {
  width:100%;max-width:1200px;
  margin:0 auto;
  padding:0 var(--sp-6);
}
@media (min-width:1440px){.container{max-width:1280px}}
@media (max-width:640px){.container{padding:0 var(--sp-4)}}

.page-wrap {
  padding-top:var(--nav-h);
  position:relative;z-index:1;
  min-height:100dvh;
}

/* ── 6. Skip Link ──────────────────────────────────────────────────────── */
.skip-link {
  position:absolute;top:-100px;left:var(--sp-4);z-index:9999;
  background:var(--accent);color:var(--accent-contrast);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-sm);font-size:13px;font-weight:600;
  transition:top var(--dur-fast);
  text-decoration:none;
}
.skip-link:focus{top:var(--sp-4)}

/* ── 7. Navbar - Glassmorphic Canopy ───────────────────────────────────── */
.navbar {
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:var(--bg-overlay);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid transparent;
  z-index:100;
  contain:layout style paint;
  transform:translateZ(0);
  transition:background var(--dur-base) var(--spring),border-color var(--dur-base) var(--spring),box-shadow var(--dur-base) var(--spring);
}
.navbar.scrolled{border-color:var(--bd-0);box-shadow:var(--sh-xs)}

.navbar .container{
  display:flex;align-items:center;height:100%;gap:var(--sp-4);
}

.nav-logo {
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:15px;font-weight:600;letter-spacing:-.02em;
  color:var(--tx-0);text-decoration:none;flex-shrink:0;
  transition:opacity var(--dur-fast);
}
.nav-logo:hover{opacity:.8}
.nav-logo-icon{flex-shrink:0;color:var(--tx-0)}
.nav-logo-icon-accent{color:var(--accent)}

/* Center marketing nav links (home mode) */
.nav-links{display:flex;align-items:center;justify-content:center;gap:var(--sp-6);flex:1}
.nav-link{font-size:13px;font-weight:500;color:var(--tx-1);text-decoration:none;transition:color var(--dur-fast)}
.nav-link:hover{color:var(--tx-0)}
@media (max-width:767px){.nav-links{display:none}}

/* Search bar (CMD+K) */
.nav-search {
  flex:1;max-width:360px;margin-left:auto;
  display:flex;align-items:center;
  background:var(--bg-1);
  border:1px solid var(--bd-1);
  border-radius:var(--r-sm);
  height:34px;padding:0 var(--sp-3);
  gap:var(--sp-2);
  cursor:text;
  transition:border-color var(--dur-fast) var(--spring),box-shadow var(--dur-fast) var(--spring);
}
.nav-search:hover{border-color:var(--bd-2)}
.nav-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.nav-search-icon{color:var(--tx-3);flex-shrink:0}
.nav-search-input {
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--font-sans);font-size:13px;color:var(--tx-0);
  padding:0;
}
.nav-search-input::placeholder{color:var(--tx-3)}
.nav-search-kbd {
  display:inline-flex;align-items:center;
  background:var(--bg-2);border:1px solid var(--bd-1);
  border-radius:5px;padding:1px 6px;
  font-family:var(--font-mono);font-size:10px;color:var(--tx-3);
  flex-shrink:0;
}
@media (max-width:767px){.nav-search{display:none}}

.nav-actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex-shrink:0}

.nav-user{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none}
.nav-user-link{transition:opacity var(--dur-fast)}
.nav-user-link:hover{opacity:.8}

.nav-avatar {
  width:28px;height:28px;
  border-radius:var(--r-full);
  background:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--accent-contrast);flex-shrink:0;
  box-shadow:0 0 0 2px var(--bg-0);
}

.nav-name{font-size:13px;font-weight:500;color:var(--tx-0)}
@media (max-width:479px){.nav-name{display:none!important}}

/* ── 8. Theme Toggle ───────────────────────────────────────────────────── */
.theme-toggle {
  position:relative;
  width:34px;height:34px;
  background:var(--bg-2);border:1px solid var(--bd-1);
  border-radius:var(--r-full);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-xs);
  transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);
  flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--bd-2)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-toggle-icon{position:absolute;top:50%;left:50%;color:var(--tx-0);opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-40deg);transition:opacity var(--dur-fast),transform var(--dur-fast) var(--spring)}
.theme-toggle-icon--moon{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
html.light .theme-toggle-icon--sun{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
html.light .theme-toggle-icon--moon{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(40deg)}

.auth-turnstile{display:flex;justify-content:center}
.auth-turnstile iframe{border-radius:var(--r-sm)}

/* ── 9. Buttons ────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-sans);font-size:13px;font-weight:500;
  border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:all var(--dur-fast) var(--spring);
  white-space:nowrap;
  -webkit-user-select:none;user-select:none;
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.btn-sm {padding:6px 14px;font-size:12px}
.btn-lg {padding:11px 22px;font-size:14px;font-weight:500}

.btn-primary {
  background:var(--grad-accent);color:var(--accent-contrast);
  border-color:var(--accent-dark);
  box-shadow:var(--sh-xs),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:active:not(:disabled){transform:translateY(0) scale(.98)}

.btn-ghost {
  background:transparent;color:var(--tx-1);border-color:var(--bd-1);
}
.btn-ghost:hover:not(:disabled){background:var(--bg-2);color:var(--tx-0);border-color:var(--bd-2)}
.btn-ghost:active:not(:disabled){transform:scale(.98)}

.btn-icon {
  width:44px;height:44px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:transparent;
  border:1px solid transparent;color:var(--tx-2);
  cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
}
.btn-icon:hover{background:var(--bg-2);color:var(--tx-0);border-color:var(--bd-1)}
.btn-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-icon:active{transform:scale(.95)}

.btn-danger-soft {
  background:var(--danger-dim);color:var(--danger);border-color:rgba(244,63,94,.2);
}
.btn-danger-soft:hover:not(:disabled){background:rgba(244,63,94,.2)}

/* Loading spinner inside button */
.btn .spinner,
.spinner {
  width:13px;height:13px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:currentColor;
  border-radius:var(--r-full);
  display:inline-block;
  animation:spinSlug .7s linear infinite;
  flex-shrink:0;
}

/* Loading dots */
.loading-dots{display:inline-flex;align-items:center;gap:3px}
.loading-dots span{
  width:4px;height:4px;border-radius:var(--r-full);
  background:currentColor;display:inline-block;
  animation:dotPulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}

/* ── 10. Forms ─────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:var(--sp-2)}

.form-label {
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:12px;font-weight:500;color:var(--tx-1);letter-spacing:.01em;
}
.form-req{color:var(--accent);font-size:11px}

.form-input {
  width:100%;
  background:var(--bg-1);
  border:1px solid var(--bd-1);
  border-radius:var(--r-sm);
  color:var(--tx-0);
  font-family:var(--font-sans);font-size:13px;
  padding:9px var(--sp-3);
  outline:none;
  transition:border-color var(--dur-fast) var(--spring),box-shadow var(--dur-fast) var(--spring);
  resize:vertical;
}
.form-input::placeholder{color:var(--tx-3)}
.form-input:hover{border-color:var(--bd-2)}
.form-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
textarea.form-input{line-height:1.6;min-height:88px}
select.form-input{cursor:pointer;padding-right:var(--sp-8)}

/* ── 11. Method Badges ─────────────────────────────────────────────────── */
.method-badge {
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.05em;
  padding:3px 8px;border-radius:var(--r-full);border:1px solid;
  flex-shrink:0;
}
.method-get,.method-badge.method-get  {color:var(--m-get);background:var(--m-get-bg);border-color:rgba(34,211,160,.25)}
.method-post,.method-badge.method-post{color:var(--m-post);background:var(--m-post-bg);border-color:rgba(227,163,62,.25)}
.method-put,.method-badge.method-put  {color:var(--m-put);background:var(--m-put-bg);border-color:rgba(56,189,248,.25)}
.method-delete,.method-badge.method-delete{color:var(--m-delete);background:var(--m-delete-bg);border-color:rgba(244,63,94,.25)}

/* Category labels */
.cat-badge {
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-full);border:1px solid;
  flex-shrink:0;
}
.badge-anime       {color:var(--cat-anime);background:var(--cat-anime-dim);border-color:rgba(34,211,160,.25)}
.badge-samehadaku  {color:var(--cat-samehadaku);background:var(--cat-samehadaku-dim);border-color:rgba(56,189,248,.25)}
.badge-download    {color:var(--cat-download);background:var(--cat-download-dim);border-color:rgba(227,163,62,.25)}
.badge-maker       {color:var(--cat-maker);background:var(--cat-maker-dim);border-color:rgba(201,123,194,.25)}
.badge-search      {color:var(--cat-search);background:var(--cat-search-dim);border-color:rgba(79,142,247,.25)}
.badge-tools       {color:var(--cat-tools);background:var(--cat-tools-dim);border-color:rgba(20,184,166,.25)}
.badge-internet    {color:var(--cat-internet);background:var(--cat-internet-dim);border-color:rgba(236,72,153,.25)}
.badge-ai          {color:var(--cat-ai);background:var(--cat-ai-dim);border-color:rgba(96,165,250,.25)}
.badge-game        {color:var(--cat-game);background:var(--cat-game-dim);border-color:rgba(91,201,123,.25)}
.badge-movie       {color:var(--cat-movie);background:var(--cat-movie-dim);border-color:rgba(210,85,92,.25)}

/* Status pills */
.status-pill {
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-full);border:1px solid;
  flex-shrink:0;
}
.status-ok   {color:var(--success);background:var(--success-dim);border-color:rgba(63,174,114,.25)}
.status-warn {color:var(--warning);background:var(--warning-dim);border-color:rgba(227,163,62,.25)}
.status-err  {color:var(--danger); background:var(--danger-dim); border-color:rgba(244,63,94,.25)}

/* Role pills */
.role-pill {
  display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-full);flex-shrink:0;border:1px solid;
}
.role-admin   {background:var(--danger-dim);color:var(--danger);border-color:rgba(244,63,94,.2)}
.role-vip     {background:var(--warning-dim);color:var(--warning);border-color:rgba(227,163,62,.2)}
.role-premium {background:var(--accent-dim);color:var(--accent);border-color:rgba(240,102,61,.2)}
.role-user,.role-free{background:var(--success-dim);color:var(--success);border-color:rgba(63,174,114,.2)}

/* ── 12. Toast System ──────────────────────────────────────────────────── */
.toast-container {
  position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:500;
  display:flex;flex-direction:column;gap:var(--sp-2);
  pointer-events:none;
  align-items:flex-end;
}
@media (max-width:479px){.toast-container{right:var(--sp-4);left:var(--sp-4)}}

.toast {
  display:inline-flex;align-items:flex-start;gap:var(--sp-3);
  min-width:240px;max-width:360px;
  background:var(--bg-2);
  border:1px solid var(--bd-1);
  border-left-width:3px;
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
  font-size:13px;color:var(--tx-0);
  box-shadow:var(--sh-lg);
  pointer-events:all;
  animation:toastIn var(--dur-base) var(--spring) both;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.toast.success{border-left-color:var(--success)}
.toast.error  {border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warning)}
.toast.info   {border-left-color:var(--accent)}

/* ── 13. Reveal Animation ──────────────────────────────────────────────── */
.reveal {
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--spring),transform var(--dur-slow) var(--spring);
}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* ── 14. Skeletons ─────────────────────────────────────────────────────── */
.sk {
  background:linear-gradient(90deg,var(--sk-0) 0%,var(--sk-1) 50%,var(--sk-0) 100%);
  background-size:200% 100%;
  border-radius:var(--r-xs);
  animation:shimmer 1.8s ease-in-out infinite;
}
.sk-line{height:14px;margin-bottom:var(--sp-2);border-radius:var(--r-xs)}
.sk-w20{width:20%} .sk-w30{width:30%} .sk-w35{width:35%}
.sk-w40{width:40%} .sk-w45{width:45%} .sk-w50{width:50%}
.sk-w55{width:55%} .sk-w60{width:60%} .sk-w70{width:70%}
.sk-w80{width:80%} .sk-h12{height:12px} .sk-h8{height:8px;margin-top:6px}
.sk-h32{height:32px}

/* ── 15. Page Navigation Back ──────────────────────────────────────────── */
.page-back {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:12px;font-weight:500;color:var(--tx-2);
  text-decoration:none;
  transition:color var(--dur-fast) var(--spring),gap var(--dur-fast) var(--spring);
  margin-bottom:var(--sp-6);
}
.page-back:hover{color:var(--tx-0);gap:var(--sp-3)}

/* ── 16. Landing - Hero ────────────────────────────────────────────────── */
.hero-section {
  padding:var(--sp-16) 0 var(--sp-12);
  position:relative;
}

.hero-copy--center {
  max-width:720px;margin:0 auto var(--sp-12);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.hero-eyebrow{justify-content:center}
.hero-sub{margin-left:auto;margin-right:auto}
.stats-strip{align-items:center}
.stat-item{width:100%}
@media (min-width:640px){.stat-item{max-width:420px}}

.hero-actions--center{justify-content:center}

.hero-eyebrow {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--sp-5);
}
.hero-eyebrow-dot {
  width:6px;height:6px;border-radius:var(--r-full);
  background:var(--accent);
  animation:pulseGlow 2.5s ease-in-out infinite;
}

.hero-title {
  font-size:clamp(2.4rem,5.5vw,3.8rem);
  font-weight:700;letter-spacing:-.04em;
  line-height:1.1;color:var(--tx-0);
  margin-bottom:var(--sp-5);
}
.hero-title-line{display:block}
.hero-accent{
  background:var(--grad-hero);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-sub {
  font-size:clamp(15px,2vw,17px);
  color:var(--tx-1);line-height:1.7;
  max-width:500px;margin-bottom:var(--sp-8);
}

/* Stats strip */
.stats-strip {
  display:flex;flex-direction:column;gap:var(--sp-2);
  margin-bottom:var(--sp-8);
}
.stat-item {
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg-glass);
  border:1px solid var(--bg-glass-border);
  border-radius:var(--r-md);
}
.stat-icon{color:var(--accent);flex-shrink:0}
.stat-body{display:flex;flex-direction:column;gap:1px}
.stat-main{display:flex;align-items:center;gap:6px}
.stat-num {
  font-family:var(--font-mono);font-size:15px;font-weight:600;
  color:var(--tx-0);letter-spacing:-.02em;
}
.stat-lbl{font-size:11px;color:var(--tx-2)}
.stat-growth {
  display:inline-flex;align-items:center;gap:2px;
  margin-left:auto;flex-shrink:0;
  font-size:10px;font-weight:600;font-family:var(--font-mono);
  padding:2px 7px;border-radius:99px;
  transition:opacity var(--dur-base) var(--spring);
}
.stat-growth--up   { background:rgba(34,197,94,.12); color:#22c55e; }
.stat-growth--down { background:rgba(239,68,68,.12);  color:#ef4444; }
.stat-growth--flat { background:var(--bg-3);          color:var(--tx-2); }
.stat-growth[aria-hidden="true"]{ opacity:0;pointer-events:none }

.hero-actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

/* ── Hero Visual - showcase card, swaps art per theme ────────────────────── */
.hero-visual{display:flex;justify-content:center;margin:var(--sp-12) 0 var(--sp-16);perspective:1400px}
.hero-visual-frame{position:relative;width:100%;max-width:560px}
.hero-visual-glow{
  position:absolute;inset:-10%;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,var(--accent-glow-lg) 0%,transparent 70%);
  filter:blur(30px);pointer-events:none;z-index:0;
}
.hero-visual-card{
  position:relative;z-index:1;
  width:100%;aspect-ratio:16/9;
  border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--bd-1);
  cursor:pointer;
  transform-origin:50% 50%;
  transform:rotateX(5deg) rotateY(-6deg);
  transform-style:preserve-3d;
  box-shadow:
    0 1px 0 1px var(--bd-1),
    0 20px 40px -16px rgba(10,9,8,.45),
    0 40px 80px -24px rgba(10,9,8,.4);
  transition:transform var(--dur-slow) var(--spring),box-shadow var(--dur-slow) var(--spring);
}
@media (hover:hover) and (pointer:fine){
  .hero-visual-card:hover{
    transform:rotateX(1deg) rotateY(-1deg) translateY(-6px);
    box-shadow:
      0 1px 0 1px var(--bd-2),
      0 30px 54px -16px rgba(10,9,8,.5),
      0 54px 100px -24px rgba(10,9,8,.45);
  }
}
.hero-visual-card.is-lift-center{
  transform-origin:50% 50%;
  transform:rotateX(1deg) rotateY(-1deg) translateY(-6px);
  box-shadow:
    0 1px 0 1px var(--bd-2),
    0 30px 54px -16px rgba(10,9,8,.5),
    0 54px 100px -24px rgba(10,9,8,.45);
}
.hero-visual-card.is-lift-left{
  transform-origin:100% 50%;
  transform:rotateX(2deg) rotateY(-16deg) translateY(-4px);
  box-shadow:
    -8px 1px 0 1px var(--bd-2),
    0 30px 54px -16px rgba(10,9,8,.5),
    0 54px 100px -24px rgba(10,9,8,.45);
}
.hero-visual-card.is-lift-right{
  transform-origin:0% 50%;
  transform:rotateX(2deg) rotateY(4deg) translateY(-4px);
  box-shadow:
    8px 1px 0 1px var(--bd-2),
    0 30px 54px -16px rgba(10,9,8,.5),
    0 54px 100px -24px rgba(10,9,8,.45);
}
.hero-visual-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-slow) var(--spring)}
.hero-visual-img--dark{opacity:1}
html.light .hero-visual-img--dark{opacity:0}
html.light .hero-visual-img--light{opacity:1}
.hero-visual-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.12) 0%,transparent 35%,transparent 65%,rgba(255,255,255,.05) 100%);
  mix-blend-mode:overlay;
}
@media (max-width:640px){
  .hero-visual{perspective:1000px;margin:var(--sp-8) 0 var(--sp-12)}
  .hero-visual-frame{max-width:320px}
  .hero-visual-card{transform:rotateX(4deg) rotateY(-4deg)}
}

.hero-terminal-dots{display:flex;gap:5px}
.hero-terminal-dot{width:10px;height:10px;border-radius:var(--r-full)}
.hero-terminal-dot-1{background:#ff5f57}
.hero-terminal-dot-2{background:#febc2e}
.hero-terminal-dot-3{background:#28c840}
.hero-terminal-method {
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  color:var(--m-post);background:var(--m-post-bg);
  border:1px solid rgba(227,163,62,.25);
  padding:2px 7px;border-radius:var(--r-full);margin-left:auto;
}
.hero-terminal-path {
  font-family:var(--font-mono);font-size:11px;color:var(--tx-2);
}

.hero-code-line{display:block}
.hero-code-brace{color:var(--tx-2)}
.hero-code-key {color:#9FB9CC}
.hero-code-str {color:#8FBFA0}
.hero-code-num {color:#D4A284}
.hero-code-bool{color:#B49BC4}

.hero-status-row {
  display:flex;align-items:center;gap:var(--sp-2);
  margin:var(--sp-3) 0;
}
.hero-status-badge {
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:var(--r-full);
  color:var(--success);background:var(--success-dim);
  border:1px solid rgba(63,174,114,.25);
}
.hero-latency{font-size:11px;color:var(--tx-3)}

/* ── 17. Section Divider & How It Works ────────────────────────────────── */
.section-divider {
  display:flex;align-items:center;gap:var(--sp-4);
  margin:var(--sp-12) 0;
}
.section-divider-line{flex:1;height:1px;background:var(--bd-0)}
.section-divider-icon{color:var(--tx-3);display:flex}

.section-hd {
  text-align:center;margin-bottom:var(--sp-10);
}
.section-eyebrow {
  display:inline-block;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--sp-3);
}
.section-title {
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;letter-spacing:-.04em;
  color:var(--tx-0);line-height:1.15;margin-bottom:var(--sp-4);
}
.section-sub{font-size:15px;color:var(--tx-1);max-width:480px;margin:0 auto;line-height:1.7}

.how-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  margin-bottom:var(--sp-16);
  perspective:1200px;
}
@media (max-width:767px){.how-grid{grid-template-columns:1fr;gap:var(--sp-3)}}

.how-card {
  background:var(--bg-glass);
  border:1px solid var(--bd-0);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  position:relative;overflow:hidden;
  transition:transform var(--dur-base) var(--spring),box-shadow var(--dur-base) var(--spring),border-color var(--dur-base) var(--spring);
}
.how-card:hover {
  transform:translateY(-3px);
  border-color:var(--bd-2);
  box-shadow:var(--sh-card-hover);
}
.how-card::before {
  content:'';position:absolute;
  top:-40px;right:-40px;
  width:100px;height:100px;
  background:var(--accent-dim);
  border-radius:var(--r-full);
  filter:blur(32px);
  pointer-events:none;
}
.how-step {
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;color:var(--tx-3);margin-bottom:var(--sp-4);
}
.how-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.how-icon {
  width:44px;height:44px;flex-shrink:0;
  background:var(--bg-2);border:1px solid var(--bd-1);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
}
.how-title{font-size:16px;font-weight:600;color:var(--tx-0);letter-spacing:-.02em}
.how-desc{font-size:13px;color:var(--tx-1);line-height:1.7}

.site-footer{padding:var(--sp-8) 0;border-top:1px solid var(--bd-0);text-align:center}
.footer-copy{font-size:12px;color:var(--tx-3)}

/* ── 18. Docs Directory - Omni Bento Grid ──────────────────────────────── */
.docs-page{
  padding:var(--nav-h) 0 var(--sp-16);
  position:relative;z-index:1;
}

.docs-toolbar {
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--bd-0);
  background:var(--bg-glass);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  position:sticky;top:var(--nav-h);z-index:50;
  contain:layout style paint;
}

.cat-toggle-btn {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-sans);font-size:13px;font-weight:500;
  color:var(--tx-1);
  background:var(--bg-1);border:1px solid var(--bd-1);
  border-radius:var(--r-sm);padding:7px 14px;
  cursor:pointer;flex-shrink:0;
  transition:all var(--dur-fast) var(--spring);
}
.cat-toggle-btn:hover{background:var(--bg-2);color:var(--tx-0);border-color:var(--bd-2)}
.cat-toggle-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cat-toggle-btn.active{
  background:var(--accent-dim);color:var(--accent);border-color:rgba(240,102,61,.40);
}

.docs-count {
  font-size:12px;color:var(--tx-3);
  font-family:var(--font-mono);
  margin-left:auto;flex-shrink:0;
}

.docs-grid-wrap{
  padding:var(--sp-6);
  max-width:1280px;margin:0 auto;
}

/* Bento grid */
.bento-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:var(--sp-4);
}
@media (min-width:1200px){.bento-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:767px){.bento-grid{grid-template-columns:1fr 1fr}}
@media (max-width:479px){.bento-grid{grid-template-columns:1fr}}

/* Bento card */
.bento-card {
  background:var(--bg-glass);
  border:1px solid var(--bd-0);
  border-radius:var(--r-xl);
  padding:var(--sp-5);
  cursor:pointer;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:var(--sp-4);
  text-decoration:none;
  transition:
    transform var(--dur-base) var(--spring),
    box-shadow var(--dur-base) var(--spring),
    border-color var(--dur-base) var(--spring),
    background var(--dur-fast);
}
.bento-card:hover {
  transform:translateY(-4px);
  border-color:var(--bd-2);
  box-shadow:var(--sh-card-hover),0 0 22px var(--accent-glow-lg);
}
.bento-card:active{transform:scale(.99)}
.bento-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.bento-card.hidden{
  display:none;
}

/* Bento card ambient glow */
.bento-card::before {
  content:'';
  position:absolute;top:-40%;right:-20%;
  width:70%;height:70%;
  border-radius:var(--r-full);
  opacity:0;
  transition:opacity var(--dur-base) var(--spring);
  pointer-events:none;
  filter:blur(48px);
}
.bento-card:hover::before{opacity:1}
.bento-card[data-cat="myanimelist"]::before  {background:var(--cat-anime-dim)}
.bento-card[data-cat="samehadaku"]::before   {background:var(--cat-samehadaku-dim)}
.bento-card[data-cat="download"]::before     {background:var(--cat-download-dim)}
.bento-card[data-cat="maker"]::before        {background:var(--cat-maker-dim)}
.bento-card[data-cat="search"]::before       {background:var(--cat-search-dim)}
.bento-card[data-cat="tools"]::before         {background:var(--cat-tools-dim)}
.bento-card[data-cat="internet"]::before      {background:var(--cat-internet-dim)}
.bento-card[data-cat="ai"]::before            {background:var(--cat-ai-dim)}
.bento-card[data-cat="game"]::before          {background:var(--cat-game-dim)}
.bento-card[data-cat="movie"]::before         {background:var(--cat-movie-dim)}

.bento-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}

.bento-card-identity{display:flex;align-items:center;gap:var(--sp-3);min-width:0;flex:1}

/* Category-tinted icon container */
.bento-icon-wrap {
  width:40px;height:40px;flex-shrink:0;
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd-0);
}
.bento-icon-wrap[data-cat="myanimelist"]{background:var(--cat-anime-dim);color:var(--cat-anime)}
.bento-icon-wrap[data-cat="samehadaku"] {background:var(--cat-samehadaku-dim);color:var(--cat-samehadaku)}
.bento-icon-wrap[data-cat="download"]   {background:var(--cat-download-dim);color:var(--cat-download)}
.bento-icon-wrap[data-cat="maker"]      {background:var(--cat-maker-dim);color:var(--cat-maker)}
.bento-icon-wrap[data-cat="search"]     {background:var(--cat-search-dim);color:var(--cat-search)}
.bento-icon-wrap[data-cat="tools"]      {background:var(--cat-tools-dim);color:var(--cat-tools)}
.bento-icon-wrap[data-cat="internet"]   {background:var(--cat-internet-dim);color:var(--cat-internet)}
.bento-icon-wrap[data-cat="ai"]         {background:var(--cat-ai-dim);color:var(--cat-ai)}
.bento-icon-wrap[data-cat="game"]       {background:var(--cat-game-dim);color:var(--cat-game)}
.bento-icon-wrap[data-cat="movie"]      {background:var(--cat-movie-dim);color:var(--cat-movie)}

.bento-card-body{flex:1;min-width:0}
.bento-card-name {
  font-size:14px;font-weight:600;color:var(--tx-0);
  letter-spacing:-.02em;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bento-card-desc {
  font-size:12px;color:var(--tx-2);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.btn.hero-cta-pulse{animation:pulseGlow 2.6s ease-in-out infinite}
.bento-card--feature .bento-card-name{font-size:16px}
.bento-card--feature .bento-card-desc{-webkit-line-clamp:3;font-size:12.5px}
.bento-grid--feature{grid-template-columns:repeat(3,1fr);margin-bottom:var(--sp-16)}
@media (max-width:900px){.bento-grid--feature{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bento-grid--feature{grid-template-columns:1fr}}

.bento-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--sp-3);border-top:1px solid var(--bd-0);
}
.bento-card-ep {
  font-family:var(--font-mono);font-size:10px;color:var(--tx-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;
}
.bento-card-arrow{
  color:var(--tx-3);
  transition:transform var(--dur-fast) var(--spring),color var(--dur-fast);
}
.bento-card:hover .bento-card-arrow{transform:translateX(3px);color:var(--accent)}

/* Bento category section header */
.bento-cat-hdr {
  grid-column:1/-1;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);padding:var(--sp-2) 0 var(--sp-1);
  border-bottom:1px solid var(--bd-0);
  margin-bottom:calc(var(--sp-1) * -1);
}

/* Bento empty state */
.bento-empty{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-16) var(--sp-8);
  text-align:center;gap:var(--sp-3);
  color:var(--tx-3);
}
.bento-empty-icon{
  width:48px;height:48px;
  background:var(--bg-2);border:1px solid var(--bd-0);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--tx-3);margin-bottom:var(--sp-2);
}

/* Bento card filter animation */
.bento-card.filter-exit{
  animation:none;
  opacity:0;transform:scale(.95);pointer-events:none;
}
.bento-card.filter-enter{
  animation:filterFade var(--dur-base) var(--spring) both;
}

/* ── 19. Category Drawer ───────────────────────────────────────────────── */
.drawer-backdrop {
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:200;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--spring);
}
.drawer-backdrop.open{opacity:1;pointer-events:all}

.cat-drawer {
  position:fixed;top:0;left:0;bottom:0;
  width:280px;
  background:var(--bg-1);
  border-right:1px solid var(--bd-1);
  z-index:201;
  transform:translateX(-100%);
  transition:transform var(--dur-base) var(--spring);
  display:flex;flex-direction:column;overflow:hidden;
}
.cat-drawer.open{transform:translateX(0)}

.drawer-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--bd-0);
  flex-shrink:0;height:var(--nav-h);
}
.drawer-title{
  font-size:13px;font-weight:600;color:var(--tx-0);letter-spacing:-.01em;
}
.drawer-close{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--bd-1);
  background:transparent;color:var(--tx-2);cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
}
.drawer-close:hover{background:var(--bg-2);color:var(--tx-0);border-color:var(--bd-2)}
.drawer-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.drawer-body{flex:1;overflow-y:auto;padding:var(--sp-3)}

.drawer-section-label {
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-1);
}

.drawer-item {
  width:100%;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:9px var(--sp-3);border-radius:var(--r-md);
  background:transparent;border:none;
  color:var(--tx-1);font-family:var(--font-sans);font-size:13px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:all var(--dur-fast) var(--spring);
  position:relative;
}
.drawer-item:hover{background:var(--bg-2);color:var(--tx-0)}
.drawer-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drawer-item.active{
  background:var(--accent-dim);color:var(--accent);
  font-weight:600;
}
.drawer-item-icon{
  width:28px;height:28px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:12px;
  background:var(--bg-2);border:1px solid var(--bd-0);
}
.drawer-item.active .drawer-item-icon{
  background:var(--accent-dim);border-color:rgba(240,102,61,.40);
}
.drawer-item-count{
  margin-left:auto;
  font-family:var(--font-mono);font-size:10px;
  color:var(--tx-3);background:var(--bg-3);
  padding:1px 6px;border-radius:var(--r-full);flex-shrink:0;
}
.drawer-item.active .drawer-item-count{
  background:var(--accent-dim);color:var(--accent);
}

.drawer-divider{height:1px;background:var(--bd-0);margin:var(--sp-2) 0}

/* ── 20. Feature Workspace - 3-Column ──────────────────────────────────── */
.feature-workspace {
  display:grid;
  grid-template-columns:280px 1fr 1fr;
  height:calc(100dvh - var(--nav-h));
  margin-top:var(--nav-h);
  position:relative;
  overflow:hidden;
}
@media (max-width:1280px){
  .feature-workspace{grid-template-columns:260px 1fr 1fr}
}
@media (max-width:1100px){
  .feature-workspace{grid-template-columns:0 1fr 1fr}
  .ws-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:210;transform:translateX(-100%);transition:transform var(--dur-base) var(--spring)}
  .ws-sidebar.open{transform:translateX(0)}
}
@media (max-width:767px){
  .feature-workspace{display:flex;flex-direction:column;height:auto;overflow:visible}
  .ws-terminal{display:flex;flex-direction:column;min-height:480px;flex-shrink:0;border-top:1px solid var(--bd-0)}
}
@media (min-width:768px) and (max-width:1100px){
  .feature-workspace{grid-template-columns:1fr 1fr}
}

/* Sidebar */
.ws-sidebar {
  background:var(--bg-1);
  border-right:1px solid var(--bd-0);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.ws-sidebar-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--bd-0);
  flex-shrink:0;height:var(--nav-h);
}
.ws-sidebar-title{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3)}
.ws-sidebar-toggle {
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:transparent;border:1px solid var(--bd-1);
  color:var(--tx-2);cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
}
.ws-sidebar-toggle:hover{background:var(--bg-2);color:var(--tx-0)}

.ws-sidebar-body{flex:1;overflow-y:auto;padding:var(--sp-3)}

.drawer-item-wrap {
  display:flex;align-items:center;
}
.drawer-item-wrap .drawer-item { flex:1 }

.drawer-chevron-btn {
  flex-shrink:0;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  color:var(--tx-3);cursor:pointer;
  border-radius:var(--r-md);
  transition:all var(--dur-fast) var(--spring);
}
.drawer-chevron-btn:hover{background:var(--bg-2);color:var(--tx-1)}
.drawer-chevron-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ws-cat-chevron {
  flex-shrink:0;color:var(--tx-3);
  transition:transform var(--dur-fast) var(--spring);
}
.drawer-chevron-btn[aria-expanded="true"] .ws-cat-chevron {
  transform:rotate(180deg);
}

.ws-cat-list {
  display:none;flex-direction:column;
  padding-bottom:var(--sp-1);
}
.ws-cat-list.open { display:flex }

.ws-feat-item {
  width:100%;display:flex;align-items:center;gap:var(--sp-2);
  padding:7px var(--sp-3) 7px calc(var(--sp-3) + 28px + var(--sp-3));
  border-radius:var(--r-md);
  background:transparent;border:none;
  color:var(--tx-2);font-family:var(--font-sans);font-size:12px;font-weight:500;
  cursor:pointer;text-align:left;text-decoration:none;
  transition:all var(--dur-fast) var(--spring);
}
.ws-feat-item:hover { background:var(--bg-2);color:var(--tx-0) }
.ws-feat-item.active {
  background:var(--accent-dim);color:var(--accent);font-weight:600;
}
.ws-feat-item-dot {
  width:5px;height:5px;border-radius:var(--r-full);
  background:currentColor;flex-shrink:0;opacity:.5;
}
.ws-feat-item.active .ws-feat-item-dot { opacity:1 }
.ws-feat-item-name { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }

/* Center column */
.ws-center {
  border-right:1px solid var(--bd-0);
  overflow-y:auto;
  display:flex;flex-direction:column;
}
.ws-center-inner{
  padding:var(--sp-6);
  flex:1;
  display:flex;flex-direction:column;gap:var(--sp-5);
}

/* Endpoint header */
.ws-ep-header{display:flex;flex-direction:column;gap:var(--sp-3)}
.ws-ep-top{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.ws-ep-title{
  font-size:18px;font-weight:700;color:var(--tx-0);
  letter-spacing:-.03em;line-height:1.2;
}
.ws-ep-desc{font-size:13px;color:var(--tx-2);line-height:1.65}

.ws-ep-path{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.ep-path{
  font-family:var(--font-mono);font-size:12px;color:var(--tx-1);
}

/* URL bar */
.ws-url-bar {
  display:flex;align-items:center;
  background:var(--bg-0);
  border:1px solid var(--bd-1);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.ws-url-text {
  flex:1;padding:9px var(--sp-3);
  font-family:var(--font-mono);font-size:11px;color:var(--tx-2);
  overflow-x:auto;white-space:nowrap;
  min-width:0;background:transparent;border:none;outline:none;
  cursor:text;
}
.ws-url-text::-webkit-scrollbar{height:2px}
.ws-url-text::-webkit-scrollbar-thumb{background:var(--bd-2)}
.ws-url-copy {
  width:36px;height:100%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-left:1px solid var(--bd-1);
  color:var(--tx-3);cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
}
.ws-url-copy:hover{background:var(--bg-2);color:var(--tx-0)}
.ws-url-copy:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Params */
.ws-params-label{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);
}
.ws-params-empty{
  font-size:12px;color:var(--tx-3);
  background:var(--bg-1);border:1px solid var(--bd-0);border-radius:var(--r-sm);
  padding:var(--sp-3);text-align:center;
}

/* API key section */
.ws-apikey-section{
  background:var(--bg-1);border:1px solid var(--bd-1);
  border-radius:var(--r-lg);padding:var(--sp-4);
}
.ws-apikey-hint{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:11px;color:var(--tx-3);margin-top:var(--sp-2);
}
.ws-apikey-hint a{color:var(--accent);text-decoration:none}
.ws-apikey-hint a:hover{text-decoration:underline}

/* Divider */
.ws-divider{height:1px;background:var(--bd-0)}

/* Run button */
.ws-run-btn {
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:var(--grad-accent);color:var(--accent-contrast);
  border:none;border-radius:var(--r-sm);
  padding:11px var(--sp-5);
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
  box-shadow:0 2px 12px rgba(240,102,61,.35);
}
.ws-run-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 4px 24px rgba(240,102,61,.5);
}
.ws-run-btn:active:not(:disabled){transform:scale(.98)}
.ws-run-btn:disabled{opacity:.5;cursor:not-allowed}
.ws-run-btn:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}

/* API key missing banner */
.apikey-banner {
  display:none;
  align-items:center;gap:var(--sp-2);
  padding:10px var(--sp-4);
  background:var(--warning-dim);border-bottom:1px solid rgba(227,163,62,.25);
  font-size:12px;color:var(--warning);
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:90;
}
.apikey-banner a{color:var(--warning);font-weight:600;text-decoration:underline}
.apikey-banner-btn{
  color:var(--warning);font-weight:600;text-decoration:underline;
  background:none;border:none;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;
}
.apikey-banner-btn:disabled{opacity:.6;cursor:wait}

/* ── 21. Terminal - Code & Response ────────────────────────────────────── */
.ws-terminal {
  background:var(--bg-0);
  display:flex;flex-direction:column;overflow:hidden;
}

.terminal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--bd-0);
  background:var(--bg-1);
  flex-shrink:0;min-height:48px;
}

/* Language switcher */
.lang-switcher {
  display:flex;gap:2px;
  background:var(--bg-0);border:1px solid var(--bd-1);
  border-radius:var(--r-sm);
  padding:3px;
}
.lang-tab {
  padding:5px 12px;border-radius:9px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  color:var(--tx-2);background:transparent;border:none;
  cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
  white-space:nowrap;
}
.lang-tab:hover:not(.active){color:var(--tx-0);background:var(--bg-2)}
.lang-tab.active{
  background:var(--bg-3);color:var(--tx-0);font-weight:600;
  box-shadow:var(--sh-xs);
}
.lang-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;border-radius:9px}

/* Send button */
.terminal-send-btn {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:var(--grad-accent);color:var(--accent-contrast);
  border:none;border-radius:var(--r-sm);
  padding:7px 16px;
  font-family:var(--font-sans);font-size:12px;font-weight:600;
  cursor:pointer;flex-shrink:0;
  transition:all var(--dur-fast) var(--spring);
  box-shadow:0 1px 8px rgba(240,102,61,.40);
}
.terminal-send-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 3px 16px rgba(240,102,61,.45);
}
.terminal-send-btn:active:not(:disabled){transform:scale(.97)}
.terminal-send-btn:disabled{opacity:.5;cursor:not-allowed}
.terminal-send-btn:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}

/* Terminal body split */
.terminal-body{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}

/* Code pane */
.code-pane {
  background:var(--bg-0);
  border-bottom:1px solid var(--bd-0);
  flex:0 0 auto;
  position:relative;
  max-height:45%;overflow:auto;
}
.code-pane-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px var(--sp-4);border-bottom:1px solid var(--bd-0);
  position:sticky;top:0;background:var(--bg-0);z-index:1;
}
.code-pane-label{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);
}
.code-copy-btn{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  font-family:var(--font-mono);font-size:10px;color:var(--tx-3);
  background:transparent;border:1px solid var(--bd-1);
  border-radius:6px;padding:3px 8px;cursor:pointer;
  transition:all var(--dur-fast);
}
.code-copy-btn:hover{color:var(--tx-0);border-color:var(--bd-2);background:var(--bg-2)}

.code-snippet {
  margin:0;padding:var(--sp-4);
  font-family:var(--font-mono);font-size:12px;line-height:1.7;
  color:var(--tx-1);
  white-space:pre;overflow:auto;
  background:transparent;border:none;
  tab-size:2;
}
/* Code snippet syntax tokens */
.cs-keyword {color:#c084fc}
.cs-string  {color:#86efac}
.cs-var     {color:#7dd3fc}
.cs-comment {color:var(--tx-3);font-style:italic}
.cs-number  {color:#fda4af}
.cs-fn      {color:#fbbf24}
.cs-method  {color:#7dd3fc}
.cs-param   {color:var(--tx-1)}
.cs-url     {color:#86efac;text-decoration:underline;text-underline-offset:2px}

/* Response pane */
.resp-pane {
  flex:1;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-0);
}
.resp-header {
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:8px var(--sp-4);border-bottom:1px solid var(--bd-0);
  flex-shrink:0;background:var(--bg-1);
}
.resp-title{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);
}
.resp-meta{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.resp-latency{
  font-family:var(--font-mono);font-size:11px;color:var(--tx-3);
}
.resp-actions{display:flex;gap:var(--sp-1)}

.resp-body {
  flex:1;overflow:auto;
  position:relative;
}

.resp-placeholder {
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);color:var(--tx-3);
  padding:var(--sp-8);
}
.resp-placeholder-icon{
  width:48px;height:48px;
  background:var(--bg-2);border:1px solid var(--bd-0);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
}
.resp-placeholder-text{font-size:13px;text-align:center}

.resp-skeleton {
  padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);
}

.resp-code {
  padding:var(--sp-4);
  font-family:var(--font-mono);font-size:12px;line-height:1.7;
  color:var(--tx-1);
  white-space:pre;overflow:auto;
  background:transparent;border:none;
  cursor:text;
  tab-size:2;
}
.resp-code--image{padding:var(--sp-5);text-align:center}

/* JSON syntax coloring */
.json-key  {color:#7dd3fc}
.json-str  {color:#86efac}
.json-num  {color:#fda4af}
.json-bool {color:#c084fc}
.json-null {color:var(--tx-3)}

/* ── 22. Auth Modal ─────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:300;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--spring);
}
@media (min-width:600px){.modal-backdrop{align-items:center}}
.modal-backdrop.open{opacity:1;pointer-events:all}

.modal {
  background:var(--bg-1);
  border:1px solid var(--bd-1);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  width:100%;max-width:440px;
  padding:var(--sp-6);
  box-shadow:var(--sh-xl);
  animation:slideUp var(--dur-base) var(--spring) both;
  max-height:92dvh;overflow-y:auto;
}
@media (min-width:600px){
  .modal{
    border-radius:var(--r-xl);
    animation:modalIn var(--dur-base) var(--spring) both;
  }
}

.modal-handle {
  width:36px;height:4px;border-radius:var(--r-full);
  background:var(--bd-2);margin:0 auto var(--sp-4);
}
@media (min-width:600px){.modal-handle{display:none}}

.modal-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-5);
}
.modal-title{font-size:16px;font-weight:700;color:var(--tx-0);letter-spacing:-.02em}

.modal-tabs {
  display:flex;gap:2px;
  background:var(--bg-0);border:1px solid var(--bd-1);
  border-radius:var(--r-sm);padding:3px;
  margin-bottom:var(--sp-5);
}
.modal-tab {
  flex:1;padding:7px var(--sp-4);border-radius:9px;
  font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--tx-2);
  background:transparent;border:none;cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
}
.modal-tab:hover:not(.active){color:var(--tx-0)}
.modal-tab.active{
  background:var(--bg-2);color:var(--tx-0);font-weight:600;
  box-shadow:var(--sh-xs);
}

.modal-form{display:flex;flex-direction:column;gap:var(--sp-4)}

.modal-submit {
  width:100%;
  background:var(--grad-accent);color:var(--accent-contrast);
  border:none;border-radius:var(--r-sm);
  padding:11px var(--sp-5);margin-top:var(--sp-2);
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
  box-shadow:0 2px 12px rgba(240,102,61,.35);
}
.modal-submit:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(240,102,61,.48);
}
.modal-submit:active:not(:disabled){transform:scale(.99)}
.modal-submit:disabled{opacity:.5;cursor:not-allowed}

/* ── 23. OTP Form ──────────────────────────────────────────────────────── */
.otp-wrap{display:flex;flex-direction:column;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0}
.otp-hint{font-size:13px;color:var(--tx-2);text-align:center}
.otp-email-label{font-size:14px;font-weight:600;color:var(--tx-0)}
.otp-inputs{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0}

.otp-digit {
  width:44px;height:52px;
  background:var(--bg-0);border:1px solid var(--bd-1);
  border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:20px;font-weight:600;
  color:var(--tx-0);text-align:center;outline:none;
  transition:border-color var(--dur-fast) var(--spring),box-shadow var(--dur-fast) var(--spring);
}
.otp-digit:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.otp-digit.filled{border-color:var(--bd-2)}
.otp-digit.success{border-color:var(--success);color:var(--success)}
.otp-digit.shake {animation:shake .35s var(--spring)}

.otp-timer-row{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:11px;color:var(--tx-3);
}
.otp-timer-row.expiring{color:var(--warning)}
.otp-timer-row.expired{color:var(--danger)}

.otp-timer-svg{transform:rotate(-90deg)}
.otp-timer-arc{
  stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear;
}
.otp-timer-text strong{font-weight:600;color:var(--tx-0)}
.otp-timer-row.expiring .otp-timer-text strong{color:var(--warning)}
.otp-timer-row.expired .otp-timer-text strong{color:var(--danger)}

.otp-resend-wrap{display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;width:100%}
.otp-resend-btn{
  background:transparent;border:none;cursor:pointer;
  font-size:12px;color:var(--accent);text-decoration:underline;
  transition:color var(--dur-fast);
}
.otp-resend-btn:disabled{opacity:.5;cursor:not-allowed;text-decoration:none}
.otp-back-btn{
  background:transparent;border:none;cursor:pointer;
  font-size:12px;color:var(--tx-2);
  transition:color var(--dur-fast);
}
.otp-back-btn:hover{color:var(--tx-0)}

.otp-shield-wrap{display:flex;justify-content:center;margin-bottom:var(--sp-2)}
.otp-shield-icon{
  width:60px;height:60px;
  background:var(--accent-dim);border:1px solid rgba(240,102,61,.2);
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
}

/* ── 24. Auth Pages ─────────────────────────────────────────────────────── */

/* Full-page layout */
.auth-body { background:var(--bg-0); }
.auth-body::before { z-index:0 }

.auth-split {
  display:flex;
  min-height:100dvh;
}

/* ── Left panel ── */
.auth-left {
  width:420px;flex-shrink:0;
  background:var(--bg-1);
  border-right:1px solid var(--bd-0);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.auth-left-inner {
  position:relative;z-index:1;
  padding:var(--sp-10) var(--sp-10);
  display:flex;flex-direction:column;
  gap:var(--sp-8);
  height:100%;
}
.auth-left-grid {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,var(--accent-glow-lg) 0,transparent 100%),
    radial-gradient(ellipse 60% 45% at 100% 100%,var(--accent-dim) 0,transparent 100%);
  pointer-events:none;
}

/* Brand */
.auth-brand {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  text-decoration:none;color:var(--tx-0);
  font-size:17px;font-weight:700;letter-spacing:-.03em;
}
.auth-brand-icon { color:var(--accent) }
.auth-brand-mobile { display:none }

/* Left copy */
.auth-left-copy { display:flex;flex-direction:column;gap:var(--sp-1) }
.auth-left-eyebrow {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:var(--sp-2);
}
.auth-left-title {
  font-size:clamp(26px,2.8vw,36px);font-weight:700;
  line-height:1.12;letter-spacing:-.04em;color:var(--tx-0);
  margin-bottom:var(--sp-3);
}
.auth-left-accent { color:var(--accent) }
.auth-left-sub { font-size:14px;color:var(--tx-2);line-height:1.6 }

/* Features */
.auth-left-features { list-style:none;display:flex;flex-direction:column;gap:var(--sp-4) }
.auth-feat-item { display:flex;align-items:flex-start;gap:var(--sp-3) }
.auth-feat-icon {
  width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--accent-dim);border:1px solid rgba(240,102,61,.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);flex-shrink:0;margin-top:1px;
}
.auth-feat-title { font-size:13px;font-weight:600;color:var(--tx-0);margin-bottom:2px }
.auth-feat-sub   { font-size:12px;color:var(--tx-2) }

/* Stats chips */
.auth-left-stats { display:flex;align-items:center;gap:var(--sp-4);margin-top:auto }
.auth-stat-chip  { display:flex;flex-direction:column;gap:2px }
.auth-stat-num   { font-size:18px;font-weight:700;color:var(--tx-0);letter-spacing:-.03em }
.auth-stat-lbl   { font-size:11px;color:var(--tx-3) }
.auth-stat-sep   { width:1px;height:32px;background:var(--bd-1) }

/* Left terminal */
.auth-left-terminal {
  background:var(--bg-0);border:1px solid var(--bd-1);
  border-radius:var(--r-md);overflow:hidden;
}
.auth-terminal-bar {
  display:flex;align-items:center;gap:var(--sp-2);
  padding:8px var(--sp-4);
  background:var(--bg-2);border-bottom:1px solid var(--bd-0);
}
.auth-terminal-body { padding:var(--sp-4) }

/* ── Right panel ── */
.auth-right {
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:calc(var(--sp-10) + var(--nav-h)) var(--sp-6) var(--sp-10);
  min-height:100dvh;
  position:relative;
}

/* Top bar - mirrors .navbar's own box model (height/padding) so the mobile
   logo lands at the exact same position as everywhere else on the site */
.auth-topbar {
  position:absolute;top:0;left:0;right:0;height:var(--nav-h);
  display:flex;align-items:center;
  padding:0 var(--sp-6);
}
@media (max-width:640px){.auth-topbar{padding:0 var(--sp-4)}}

/* Form container */
.auth-form-wrap { width:100%;max-width:396px }

/* Step transitions */
.auth-step {
  display:flex;flex-direction:column;gap:var(--sp-5);
  animation:fadeUp var(--dur-base) var(--spring) both;
}
.auth-step--exit {
  animation:fadeUp var(--dur-fast) reverse both;
  pointer-events:none;
}
.auth-step--enter { animation:fadeUp var(--dur-base) var(--spring) both }

/* Form header */
.auth-form-hd { display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-2) }
.auth-form-title { font-size:22px;font-weight:700;color:var(--tx-0);letter-spacing:-.04em }
.auth-form-sub   { font-size:13px;color:var(--tx-2) }

/* Fields */
.auth-fields { display:flex;flex-direction:column;gap:var(--sp-4) }

/* Input with icon */
.auth-input-wrap { position:relative;display:flex;align-items:center }
.auth-input-icon {
  position:absolute;left:12px;
  color:var(--tx-3);pointer-events:none;flex-shrink:0;
}
.auth-input { padding-left:36px!important }
.auth-input-toggle {
  position:absolute;right:10px;
  background:none;border:none;cursor:pointer;
  color:var(--tx-3);display:flex;align-items:center;
  padding:4px;border-radius:var(--r-xs);
  transition:color var(--dur-fast);
}
.auth-input-toggle:hover { color:var(--tx-1) }
.auth-input-toggle:focus-visible { outline:2px solid var(--accent);outline-offset:2px }

/* Submit button */
.auth-submit {
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:var(--grad-accent);color:var(--accent-contrast);
  border:none;border-radius:var(--r-sm);
  padding:12px var(--sp-5);
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(240,102,61,.35);
  transition:all var(--dur-fast) var(--spring);
}
.auth-submit:hover:not(:disabled) {
  transform:translateY(-1px);
  box-shadow:0 4px 24px rgba(240,102,61,.5);
}
.auth-submit:active:not(:disabled) { transform:scale(.99) }
.auth-submit:disabled { opacity:.6;cursor:not-allowed }
.auth-submit--loading { opacity:.8 }
.auth-submit--success {
  background:linear-gradient(135deg,var(--success) 0%,#059669 100%);
  box-shadow:0 2px 12px rgba(63,174,114,.35);
}

/* Error */
.auth-error-msg {
  display:flex;align-items:flex-start;gap:var(--sp-2);
  font-size:13px;color:var(--danger);
  background:var(--danger-dim);border:1px solid rgba(244,63,94,.2);
  border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);
}

/* Switch link */
.auth-switch { font-size:13px;color:var(--tx-2);text-align:center }
.auth-switch-link { color:var(--accent);text-decoration:none;font-weight:600 }
.auth-switch-link:hover { text-decoration:underline }

/* Footer */
.auth-footer {
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-6);
  font-size:12px;color:var(--tx-3);
}
.auth-footer a { color:var(--tx-2);text-decoration:none;transition:color var(--dur-fast) }
.auth-footer a:hover { color:var(--tx-0) }
.auth-footer-dot { width:3px;height:3px;border-radius:var(--r-full);background:var(--bd-2) }

/* Password strength */
.auth-pass-strength {
  display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1);
}
.auth-pass-bar { flex:1;height:3px;background:var(--bg-3);border-radius:var(--r-full);overflow:hidden }
.auth-pass-fill {
  height:100%;border-radius:var(--r-full);
  transition:width var(--dur-base) var(--spring),background var(--dur-fast);
}
.auth-pass-fill.str-weak  { background:var(--danger) }
.auth-pass-fill.str-fair  { background:var(--warning) }
.auth-pass-fill.str-good  { background:var(--info) }
.auth-pass-fill.str-strong{ background:var(--success) }
.auth-pass-label { font-size:11px;font-weight:600;flex-shrink:0 }
.auth-pass-label.str-weak  { color:var(--danger) }
.auth-pass-label.str-fair  { color:var(--warning) }
.auth-pass-label.str-good  { color:var(--info) }
.auth-pass-label.str-strong{ color:var(--success) }

/* OTP shield (register page) */
.otp-shield {
  position:relative;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
}
.otp-shield-ring {
  position:absolute;inset:0;border-radius:var(--r-lg);
  background:var(--accent-dim);border:1px solid rgba(240,102,61,.18);
  animation:pulseGlow 2.5s infinite;
}
.auth-step .otp-shield-icon {
  position:relative;z-index:1;
  width:28px;height:28px;
  background:none;border:none;box-shadow:none;padding:0;
}

/* OTP email pill */
.otp-email-pill {
  display:inline-flex;align-items:center;gap:var(--sp-1);
  background:var(--bg-2);border:1px solid var(--bd-1);
  border-radius:var(--r-full);padding:3px var(--sp-3);
  font-size:12px;font-weight:600;color:var(--tx-0);
  max-width:100%;overflow:hidden;white-space:nowrap;
}

/* OTP separator dash */
.otp-sep {
  width:12px;height:2px;background:var(--bd-2);
  border-radius:var(--r-full);flex-shrink:0;
}

/* OTP timer ring override for auth pages */
.otp-timer-ring {
  width:20px;height:20px;
  transform:rotate(-90deg);flex-shrink:0;
}
.otp-timer-track {
  fill:none;stroke:var(--bd-2);stroke-width:2.5;
}
.otp-timer-arc {
  fill:none;stroke:var(--accent);stroke-width:2.5;
  stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear;
}
.otp-timer-row.expiring .otp-timer-arc { stroke:var(--warning) }
.otp-timer-row.expired  .otp-timer-arc { stroke:var(--danger) }

/* OTP footer row */
.otp-footer {
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:12px;color:var(--tx-2);
}
.otp-resend-hint { color:var(--tx-3) }

/* Back button */
.auth-back-btn {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:none;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;color:var(--tx-2);
  padding:var(--sp-2) 0;width:100%;
  transition:color var(--dur-fast);
}
.auth-back-btn:hover { color:var(--tx-0) }
.auth-back-btn:focus-visible { outline:2px solid var(--accent);outline-offset:2px }

/* ── Auth responsive ── */
@media (max-width:1024px) {
  .auth-left { width:360px }
  .auth-left-inner { padding:var(--sp-8) }
}
@media (max-width:768px) {
  .auth-left { display:none }
  .auth-split { flex-direction:column }
  .auth-right {
    min-height:100dvh;
    justify-content:flex-start;
    padding:var(--nav-h) var(--sp-5) var(--sp-10);
    align-items:stretch;
  }
  .auth-brand-mobile { display:inline-flex }
  .auth-form-wrap { max-width:100%;padding:var(--sp-4) 0 var(--sp-8) }
  .auth-footer { position:relative;margin-top:auto;padding:var(--sp-5) }
}

/* ── 25. Profile Page ──────────────────────────────────────────────────── */
.profile-page .container{padding-top:var(--sp-8);padding-bottom:var(--sp-16)}
.profile-layout{max-width:800px;margin:0 auto}

.profile-card {
  background:var(--bg-1);border:1px solid var(--bd-0);
  border-radius:var(--r-xl);
  position:relative;
}
.profile-banner {
  height:96px;
  background:linear-gradient(135deg,var(--bg-2) 0%,var(--bg-3) 100%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  position:relative;overflow:hidden;
}
.profile-banner::after {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(240,102,61,.18) 0%,rgba(196,75,38,.06) 50%,transparent 100%);
}
.profile-banner-mesh {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 100% at 10% 50%,rgba(240,102,61,.14) 0,transparent 70%),
    radial-gradient(ellipse 60% 80% at 90% 20%,rgba(224,102,143,.10) 0,transparent 70%);
  pointer-events:none;
}

.profile-card-body{padding:42px var(--sp-6) var(--sp-6)}
.profile-avatar-wrap{position:absolute;top:66px;left:var(--sp-6);z-index:2}
.profile-avatar {
  width:60px;height:60px;
  border-radius:var(--r-full);
  background:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:var(--accent-contrast);
  border:3px solid var(--bg-1);
  box-shadow:var(--sh-sm);
}
.profile-identity{margin-bottom:var(--sp-1)}
.profile-identity-main{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-1)}
.profile-name{font-size:18px;font-weight:700;color:var(--tx-0);letter-spacing:-.03em;margin:0}
.profile-email{font-size:13px;color:var(--tx-2)}
.profile-divider{height:1px;background:var(--bd-0);margin:var(--sp-5) 0}

.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media (max-width:640px){.profile-grid{grid-template-columns:1fr}}
.profile-col-left,.profile-col-right{min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}

.profile-section-title{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);
}

.profile-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--bd-0);
}
.profile-row:last-of-type{border-bottom:none}
.profile-row-key{font-size:12px;color:var(--tx-2);flex-shrink:0}
.profile-row-val{font-size:13px;color:var(--tx-0);font-weight:500;word-break:break-all}
.profile-row-val-sm{font-size:12px;color:var(--tx-0);font-weight:500;word-break:break-all}
.profile-name-edit{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) 0;
}

/* Profile stat grid */
.profile-stat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
}
.profile-stat-card{
  background:var(--bg-0);border:1px solid var(--bd-0);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-1);
}
.profile-stat-val{
  font-size:20px;font-weight:700;color:var(--tx-0);letter-spacing:-.04em;line-height:1.1;
}
.profile-stat-lbl{font-size:11px;color:var(--tx-3);font-weight:500}

.profile-row-actions{display:flex;align-items:center;gap:var(--sp-2)}

.prof-btn{
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--bd-1);border-radius:var(--r-sm);
  color:var(--tx-2);cursor:pointer;
  transition:all var(--dur-fast) var(--spring);
}
.prof-btn:hover{background:var(--bg-2);color:var(--tx-0);border-color:var(--bd-2)}

/* API key box */
.apikey-wrap{display:flex;flex-direction:column;gap:var(--sp-3)}
.apikey-box{
  display:flex;align-items:center;gap:var(--sp-2);
  background:var(--bg-0);border:1px solid var(--bd-1);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3);
  cursor:pointer;width:100%;
  transition:border-color var(--dur-fast) var(--spring),box-shadow var(--dur-fast) var(--spring);
}
.apikey-box:hover{border-color:var(--bd-2)}
.apikey-box:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.apikey-box.copied{border-color:var(--success);box-shadow:0 0 0 3px var(--success-dim)}
.apikey-box-edit{padding:var(--sp-1) var(--sp-2);cursor:default}
.apikey-box-edit:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.apikey-scroll.scrollable{overflow-x:auto;flex:1;min-width:0}
.apikey-val{
  font-family:var(--font-mono);font-size:11px;color:var(--tx-1);
  white-space:nowrap;
}
.apikey-hint{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:11px;color:var(--tx-3);
}
.apikey-edit-hint{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:11px;color:var(--tx-3);
}
.apikey-inline-input{
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--font-mono);font-size:11px;color:var(--tx-0);
}
.apikey-inline-btn{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--bd-1);
  background:transparent;cursor:pointer;color:var(--tx-2);
  transition:all var(--dur-fast);
}
.apikey-inline-save:hover{background:var(--success-dim);color:var(--success);border-color:rgba(63,174,114,.3)}
.apikey-inline-cancel:hover{background:var(--danger-dim);color:var(--danger);border-color:rgba(244,63,94,.3)}
.apikey-empty{font-size:13px;color:var(--tx-3);padding:var(--sp-2) 0}
.apikey-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* Regen confirm box */
.regen-confirm{
  padding:var(--sp-3) var(--sp-4);
  background:var(--danger-dim);border:1px solid rgba(244,63,94,.18);
  border-radius:var(--r-md);
}
.regen-confirm-msg{font-size:13px;color:var(--tx-1);margin-bottom:var(--sp-3);line-height:1.5}
.regen-confirm-actions{display:flex;gap:var(--sp-2)}

/* Membership card */
.membership-card {
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--bd-1);
  position:relative;
}
.membership-glow{
  position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r-xl);
}
.membership-header{
  padding:var(--sp-4) var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  background:var(--bg-2);border-bottom:1px solid var(--bd-0);
}
.membership-icon-wrap{
  width:36px;height:36px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd-1);background:var(--bg-3);
}
.membership-title-block{display:flex;flex-direction:column;gap:2px;flex:1}
.membership-title{font-size:14px;font-weight:700;color:var(--tx-0);letter-spacing:-.02em}
.membership-sub{font-size:11px;color:var(--tx-2)}
.membership-status-dot{
  width:8px;height:8px;border-radius:var(--r-full);flex-shrink:0;
}
.membership-status-dot.active{background:var(--success)}
.membership-status-dot.expiring{background:var(--warning)}
.membership-dates{
  padding:var(--sp-4) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.membership-date-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.membership-date-divider{height:1px;background:var(--bd-0)}
.membership-date-label{font-size:12px;color:var(--tx-2)}
.membership-date-val{font-size:12px;font-weight:500;color:var(--tx-0)}
.membership-date-val.val-lifetime{color:var(--success)}
.membership-date-val.val-warn{color:var(--warning)}
.membership-progress-wrap{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--bd-0)}
.membership-progress-labels{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.membership-progress-track{height:6px;background:var(--bg-3);border-radius:var(--r-full);overflow:hidden}
.membership-progress-fill{height:100%;background:var(--grad-accent);border-radius:var(--r-full);transition:width .6s var(--spring)}
.membership-progress-fill.fill-warn{background:linear-gradient(90deg,var(--warning),var(--danger))}
.membership-progress-used{font-size:11px;color:var(--tx-3)}
.membership-progress-left{font-size:11px;color:var(--tx-0);font-weight:600}
.membership-progress-left.val-warn{color:var(--warning)}

/* Membership color variants */
.membership-admin   {background:linear-gradient(135deg,rgba(244,63,94,.08) 0,transparent 60%)}
.membership-vip     {background:linear-gradient(135deg,rgba(227,163,62,.08) 0,transparent 60%)}
.membership-premium {background:linear-gradient(135deg,rgba(240,102,61,.10) 0,transparent 60%)}
.membership-user    {background:var(--bg-1)}
.membership-free    {background:var(--bg-1)}

/* Usage bar */
.usage-bar-wrap{display:flex;flex-direction:column;gap:var(--sp-2)}
.usage-bar-top{display:flex;align-items:center;justify-content:space-between}
.usage-bar-lbl{font-size:12px;color:var(--tx-2)}
.usage-bar-val{font-family:var(--font-mono);font-size:11px;color:var(--tx-0);font-weight:600}
.usage-remain{font-size:11px;color:var(--tx-3);text-align:right}
.usage-bar{height:6px;background:var(--bg-3);border-radius:var(--r-full);overflow:hidden}
.usage-bar-fill{height:100%;background:var(--grad-accent);border-radius:var(--r-full);transition:width .6s var(--spring)}

/* IP list */
.ip-list{display:flex;flex-direction:column;gap:1px}
.ip-empty{font-size:12px;color:var(--tx-3);padding:var(--sp-2) 0}
.ip-item{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--bd-0);
}
.ip-item:last-child{border-bottom:none}
.ip-addr-scroll{
  font-family:var(--font-mono);font-size:12px;color:var(--tx-0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}
.ip-addr{font-family:var(--font-mono);font-size:12px;color:var(--tx-0)}
.ip-meta{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;margin-left:auto}
.ip-count{font-family:var(--font-mono);font-size:10px;color:var(--tx-2);background:var(--bg-3);padding:2px 6px;border-radius:var(--r-full)}
.ip-time{font-size:11px;color:var(--tx-3)}

/* Profile logout / sign-out */
.profile-logout-wrap{
  display:flex;align-items:center;justify-content:flex-start;
}
.profile-signout{
  color:var(--tx-2) !important;
  transition:color var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast) !important;
}
.profile-signout:hover:not(:disabled){
  background:var(--danger-dim) !important;
  color:var(--danger) !important;
  border-color:rgba(244,63,94,.2) !important;
}

/* ── 25. Admin Dashboard ───────────────────────────────────────────────── */
.admin-page .container{padding-top:var(--sp-8);padding-bottom:var(--sp-16)}
.admin-header{margin-bottom:var(--sp-6)}
.admin-title{
  font-size:clamp(1.3rem,3.5vw,1.8rem);font-weight:700;color:var(--tx-0);
  letter-spacing:-.03em;line-height:1.2;margin-bottom:var(--sp-2);
}
.admin-sub{font-size:14px;color:var(--tx-2)}

.nav-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-full);
  background:var(--danger-dim);color:var(--danger);
  border:1px solid rgba(244,63,94,.2);flex-shrink:0;
}

.metrics-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-3);margin-bottom:var(--sp-5);
}
@media (min-width:768px){.metrics-grid{grid-template-columns:repeat(3,1fr)}}

.metric-card{
  background:var(--bg-1);border:1px solid var(--bd-0);
  border-radius:var(--r-xl);padding:var(--sp-4) var(--sp-5);
  transition:border-color var(--dur-fast),transform var(--dur-base) var(--spring),box-shadow var(--dur-base) var(--spring);
}
@media (hover:hover) and (pointer:fine){
  .metric-card:hover{border-color:var(--bd-2);transform:translateY(-2px);box-shadow:var(--sh-md)}
}
.metric-label{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tx-2);margin-bottom:var(--sp-3);
}
.metric-label [data-lucide]{color:var(--accent);flex-shrink:0}
.metric-skel{display:flex;flex-direction:column;gap:var(--sp-2)}
.metric-content{display:none}
.metric-content.visible{display:flex;flex-direction:column;gap:var(--sp-1);animation:fadeUp var(--dur-base) var(--spring) both}
.metric-value{
  font-size:clamp(1.5rem,5vw,2rem);font-weight:700;color:var(--tx-0);
  letter-spacing:-.04em;line-height:1;font-feature-settings:'tnum';
}
.metric-value-mono{
  font-family:var(--font-mono);font-size:clamp(1rem,3vw,1.3rem);letter-spacing:-.02em;
}
.metric-delta{display:flex;align-items:center;gap:var(--sp-1);font-size:11px;color:var(--tx-2)}
.metric-delta.neg{color:var(--danger)}

.chart-card{
  background:var(--bg-1);border:1px solid var(--bd-0);
  border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--sp-5);
}
.chart-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--bd-0);
  gap:var(--sp-3);flex-wrap:wrap;
}
.chart-title{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:14px;font-weight:600;color:var(--tx-0);letter-spacing:-.01em;
}
.chart-period-group{
  display:flex;gap:2px;background:var(--bg-3);
  border-radius:var(--r-md);padding:3px;flex-shrink:0;
}
.chart-period-btn{
  height:28px;padding:0 10px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;color:var(--tx-2);cursor:pointer;
  background:transparent;border:none;
  transition:background var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);
}
.chart-period-btn.active{
  background:var(--bg-1);color:var(--tx-0);font-weight:600;box-shadow:var(--sh-xs);
}
.chart-period-btn:not(.active):hover{color:var(--tx-1)}
.chart-body{padding:var(--sp-5)}
.chart-skel{display:flex;flex-direction:column;gap:var(--sp-4);height:180px;justify-content:flex-end}
.chart-skel-bars{display:flex;align-items:flex-end;gap:var(--sp-2);flex:1}
.chart-skel-bar{flex:1;border-radius:var(--r-xs)}
.chart-skel-labels{display:flex;gap:var(--sp-2)}

.admin-panels{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:768px){.admin-panels{grid-template-columns:1fr 1fr}}
.panel-card{
  background:var(--bg-1);border:1px solid var(--bd-0);
  border-radius:var(--r-xl);overflow:hidden;
}
.panel-header{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--bd-0);
  font-size:13px;font-weight:600;color:var(--tx-0);letter-spacing:-.01em;
}
.panel-body{list-style:none}
.panel-skel-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--bd-0);gap:var(--sp-3);
}
.panel-skel-row:last-child{border-bottom:none}
.panel-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px var(--sp-5);border-bottom:1px solid var(--bd-0);gap:var(--sp-3);
  transition:background var(--dur-fast);
  animation:fadeIn var(--dur-base) var(--spring) both;
}
.panel-row:last-child{border-bottom:none}
@media (hover:hover) and (pointer:fine){.panel-row:hover{background:var(--bg-2)}}
.panel-row-path{
  font-family:var(--font-mono);font-size:12px;color:var(--tx-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.panel-row-count{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--tx-0);background:var(--bg-3);
  padding:2px 8px;border-radius:var(--r-full);flex-shrink:0;
}
.panel-row-meta{display:flex;align-items:center;gap:5px;flex-shrink:0}
.panel-row-success{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:#34d399;background:rgba(52,211,153,.1);
  padding:2px 7px;border-radius:var(--r-full);flex-shrink:0;
}
.panel-row-error{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:#f87171;background:rgba(248,113,113,.1);
  padding:2px 7px;border-radius:var(--r-full);flex-shrink:0;
}
html.light .panel-row-success{color:#059669;background:rgba(5,150,105,.1)}
html.light .panel-row-error  {color:#dc2626;background:rgba(220,38,38,.1)}
.panel-row-ip{font-family:var(--font-mono);font-size:12px;color:var(--tx-1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-row-time{font-size:11px;color:var(--tx-3);flex-shrink:0;white-space:nowrap}
.panel-row-actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}

.panel-empty{padding:var(--sp-8) var(--sp-5);text-align:center;font-size:13px;color:var(--tx-3)}

/* Admin search */
.admin-search-wrap{padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--bd-0)}
.admin-search-input{
  width:100%;background:var(--bg-0);border:1px solid var(--bd-1);
  border-radius:var(--r-sm);color:var(--tx-0);font-family:var(--font-sans);
  font-size:12px;padding:8px var(--sp-3);outline:none;
}
.admin-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:12px}
.admin-table th{
  padding:10px var(--sp-5);text-align:left;font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);
  border-bottom:1px solid var(--bd-0);white-space:nowrap;background:var(--bg-1);
}
.admin-table td{
  padding:11px var(--sp-5);border-bottom:1px solid var(--bd-0);
  color:var(--tx-1);vertical-align:middle;
}
.admin-table tr:last-child td{border-bottom:none}
@media (hover:hover) and (pointer:fine){
  .admin-table tbody tr:hover td{background:var(--bg-2)}
}

/* ── 26. Feature page legacy classes (backward compat) ───────────────────── */
/* play-* classes mapped to ws-* equivalents for feature.ejs */
.play-feature-badge{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-full);border:1px solid;flex-shrink:0;
}

/* Param card select */
.param-card-group{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.param-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3);border-radius:var(--r-md);
  border:2px solid var(--bd-1);background:var(--bg-0);
  cursor:pointer;min-width:80px;
  transition:all var(--dur-fast) var(--spring);
}
.param-card:hover{border-color:var(--bd-2);background:var(--bg-1)}
.param-card.active{border-color:var(--accent);background:var(--accent-dim)}
.param-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.param-card-preview{
  width:60px;height:40px;border-radius:8px;
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:4px;padding:6px;overflow:hidden;
  border:1px solid var(--bd-1);
}
.param-card-preview--white{background:#fff;color:#111}
.param-card-preview--black{background:#111;color:#fff}
.param-card-preview--green{background:#8eff00;color:#111}
.param-card-preview-name{font-size:7px;font-weight:700;letter-spacing:.05em}
.param-card-preview-text{font-size:6px;line-height:1.3;text-align:center;opacity:.7}
.param-card-label{font-size:10px;font-weight:600;color:var(--tx-1)}
.param-card.active .param-card-label{color:var(--accent)}

/* ── 27. Responsive ────────────────────────────────────────────────────── */
@media (max-width:960px){
  .how-grid{gap:var(--sp-3)}
}
@media (max-width:767px){
  .docs-grid-wrap{padding:var(--sp-4)}
  .ws-center-inner{padding:var(--sp-4);gap:var(--sp-3)}
  .ws-center{height:auto;overflow:visible}
  .ws-ep-title{font-size:15px}
  .ws-ep-header{gap:var(--sp-2)}
  .feature-workspace{height:auto;overflow:visible}
  /* Prevent iOS auto-zoom on input focus (triggered when font-size < 16px) */
  .form-input{font-size:1rem;touch-action:manipulation}
  textarea.form-input{resize:none}
  .ws-run-btn{touch-action:manipulation}
}
@media (max-width:640px){
  .hero-section{padding:var(--sp-10) 0 var(--sp-8)}
  .hero-actions{flex-direction:column;align-items:center}
  .stats-strip{gap:var(--sp-2)}
  .modal{max-height:96dvh}
  .docs-toolbar{padding:var(--sp-3) var(--sp-4)}
  .docs-grid-wrap{padding:var(--sp-3)}
  .bento-grid{gap:var(--sp-3)}
}
@media (max-width:479px){
  .otp-digit{width:40px;height:48px;font-size:18px}
  .otp-inputs{gap:var(--sp-1)}
  .hero-title{font-size:2rem}
  .bento-grid{gap:var(--sp-2)}
}
@media (max-width:420px){
  .nav-search-kbd{display:none}
  .bento-card-ep{max-width:120px}
}

/* ── 27a. Sidebar toggle (feature page) ────────────────────────────────── */
#wsSidebarToggle{display:none}
@media (max-width:1100px){#wsSidebarToggle{display:inline-flex}}

/* ── 27b. Mobile docs search bar ──────────────────────────────────────── */
#mobileSearch{display:none}
@media (max-width:767px){
  #mobileSearch{display:flex}
  .docs-count{display:none}
}

/* ── 27c. apikey-banner workspace offset ─────────────────────────────── */
.banner-active .feature-workspace{margin-top:calc(var(--nav-h) + var(--banner-h))}
@media (max-width:1100px){
  .banner-active .ws-sidebar{top:calc(var(--nav-h) + var(--banner-h))}
}

/* ── 27d. Mobile workspace tab bar (removed - single-page scroll) ───────── */
.mobile-ws-tabs{display:none!important}



/* ── 28. Accessibility ─────────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media (prefers-color-scheme:light){
  html:not(.light):not([class]){
    color-scheme:light;
  }
}

/* ── 29. Scrollbar styling ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd-2);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--bd-3)}

/* ── 30. Print ─────────────────────────────────────────────────────────── */
@media print{
  .navbar,.toast-container,.cat-drawer,.drawer-backdrop{display:none!important}
  body{background:#fff;color:#000}
}
/* ════════════════════════════════════════════════════════════════════════
   Refinements - hero mesh, hover polish (replaces the old cosmic patch layer)
   ════════════════════════════════════════════════════════════════════════ */
.hero-section{position:relative;overflow:hidden}
.hero-section::before{
  content:'';position:absolute;inset:0;
  background:var(--grad-mesh);
  pointer-events:none;z-index:0;
}
.hero-section>*{position:relative;z-index:1}

.stat-item:hover{border-color:var(--bd-2);box-shadow:var(--sh-sm)}
.bento-icon-wrap{transition:transform var(--dur-fast) var(--spring)}
.bento-card:hover .bento-icon-wrap{transform:scale(1.06)}

.nav-sidebar-toggle{display:none}
@media (max-width:960px){.nav-sidebar-toggle{display:inline-flex}}

.footer-inner{
  max-width:1200px;margin:0 auto;padding:0 var(--sp-6);
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-6);
  flex-wrap:wrap;text-align:left;
}
.footer-brand{display:flex;flex-direction:column;gap:var(--sp-2);max-width:320px}
.footer-tagline{font-size:12px;color:var(--tx-2);line-height:1.6}
.footer-col{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer-col-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-0);margin-bottom:var(--sp-1)}
.footer-col a{font-size:13px;color:var(--tx-1);text-decoration:none;transition:color var(--dur-fast)}
.footer-col a:hover{color:var(--accent)}
.site-footer .footer-copy{max-width:1200px;margin:var(--sp-6) auto 0;padding:var(--sp-5) var(--sp-6) 0;border-top:1px solid var(--bd-0);text-align:center}
@media (max-width:640px){.footer-inner{flex-direction:column}}

/* ── 23. Upgrade page (QRIS payment) ─────────────────────────────────────── */
.profile-identity-main{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

.upgrade-layout{max-width:640px;margin:0 auto;padding-top:var(--sp-6);padding-bottom:var(--sp-8)}
.upgrade-card{
  background:var(--bg-1);border:1px solid var(--bd-0);border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6);margin-top:var(--sp-4);
  min-height:560px;display:flex;flex-direction:column;
}
.upgrade-card-head{margin-bottom:var(--sp-6);text-align:center}
.upgrade-title{font-size:24px;font-weight:800;color:var(--tx-0);letter-spacing:-.01em}
.upgrade-subtitle{font-size:13px;color:var(--tx-2);margin-top:var(--sp-2);line-height:1.6}

.upgrade-plan-grid{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.upgrade-plan-card{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  background:var(--bg-0);border:1px solid var(--bd-1);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);cursor:pointer;width:100%;
  transition:all var(--dur-fast) var(--spring);
}
.upgrade-plan-card:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 20px -12px var(--accent)}
.upgrade-plan-card:disabled{opacity:.5;cursor:not-allowed}
.upgrade-plan-days{font-size:13px;color:var(--tx-2);font-weight:600}
.upgrade-plan-price{font-size:17px;color:var(--tx-0);font-weight:700;font-family:var(--font-mono)}

.upgrade-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center}
.upgrade-qr-frame{
  background:#fff;padding:var(--sp-4);border-radius:var(--r-lg);
  box-shadow:0 12px 30px -16px rgba(0,0,0,.35);
}
.upgrade-qr-img{display:block;width:240px;height:240px}
.upgrade-qr-amount{font-size:20px;font-weight:800;font-family:var(--font-mono);color:var(--tx-0)}
.upgrade-qr-download{display:inline-flex;align-items:center;gap:6px}
.upgrade-qr-hint{font-size:12px;color:var(--tx-3);line-height:1.5;max-width:340px}
.upgrade-qr-status{font-size:13px;color:var(--tx-2);display:flex;align-items:center;gap:6px}
.upgrade-qr-timer{font-size:12px;color:var(--accent);font-weight:600;font-family:var(--font-mono)}

@media (max-width:520px){
  .upgrade-card{padding:var(--sp-4)}
  .upgrade-qr-img{width:200px;height:200px}
}

.upgrade-history-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);
  background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;
}
.upgrade-history-link:hover{text-decoration:underline}

.upgrade-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.upgrade-history-year{font-size:12px;font-weight:700;color:var(--tx-3);font-family:var(--font-mono)}
.upgrade-history-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.upgrade-history-item{
  background:var(--bg-0);border:1px solid var(--bd-1);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:6px;
}
.upgrade-history-main{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2)}
.upgrade-history-role{font-size:13px;font-weight:700;color:var(--tx-0)}
.upgrade-history-date{font-size:11px;color:var(--tx-3)}
.upgrade-history-side{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.upgrade-history-price{font-size:14px;font-weight:600;font-family:var(--font-mono);color:var(--tx-1)}
.upgrade-history-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px}
.upgrade-history-badge.status-paid{background:rgba(34,197,94,.14);color:#22c55e}
.upgrade-history-badge.status-pending{background:rgba(234,179,8,.16);color:#eab308}
.upgrade-history-badge.status-expired{background:rgba(148,163,184,.16);color:var(--tx-3)}
.upgrade-history-badge.status-cancelled{background:rgba(148,163,184,.16);color:var(--tx-3)}
.upgrade-history-resume{align-self:flex-start;margin-top:2px}