/* Unified stylesheet for xDepot pages */

/* ===== Shared design tokens (identical across all pages) ===== */
:root {
  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem;

  /* Layout */
  --nav-width: 232px;
  --header-height: 52px;
}

/* App pages (xdepot / search / repo-page) — Inter, larger type & radii */
html[data-page="xdepot"],
html[data-page="search"],
html[data-page="repo-page"] {
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --text-xs:  clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:  clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base:clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:  clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:  clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem;
  --radius-xl:1rem; --radius-2xl:1.25rem; --radius-full:9999px;
  --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Content pages (blog / article) — Manrope + Lora, compact type & radii */
html[data-page="blog"],
html[data-page="article"] {
  --font-body:'Manrope','Inter',sans-serif;
  --font-serif:'Lora','Georgia',serif;
  --font-mono:'JetBrains Mono','Fira Code','Courier New',monospace;
  --text-xs: clamp(0.7rem,  0.65rem + 0.2vw,  0.8rem);
  --text-sm: clamp(0.825rem,0.78rem + 0.25vw, 0.95rem);
  --text-base:clamp(0.95rem,0.9rem  + 0.2vw,  1.05rem);
  --text-md: clamp(1.05rem, 0.98rem + 0.3vw,  1.2rem);
  --text-lg: clamp(1.1rem,  1rem    + 0.5vw,  1.35rem);
  --text-xl: clamp(1.4rem,  1.1rem  + 1.2vw,  2rem);
  --text-2xl:clamp(1.9rem,  1.2rem  + 2.2vw,  3rem);
  --text-3xl:clamp(2.4rem,  1.2rem  + 3.5vw,  4rem);
  --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.625rem;
  --radius-xl:.875rem; --radius-2xl:1.25rem; --radius-full:9999px;
  --transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== xdepot.html ===== */

html[data-page="xdepot"][data-theme="dark"] {
  --bg:             #0d0e0f;
  --surface:        #131415;
  --surface-2:      #181a1b;
  --surface-off: #1c1e1f;
  --surface-off2:#212325;
  --divider:        #242628;
  --border:         #2a2c2e;
  --border-sub:  #222426;

  --text:           #e8e8e6;
  --muted:     #878885;
  --faint:     #484a48;

  
  --primary:        #00d4aa;
  --primary-hover:  #00eebc;
  --primary-dim:    #00d4aa22;
  --primary-border: #00d4aa30;
  --primary:   #00d4aa;

  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.35);
  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55);
  --glow:      0 0 24px oklch(from #00d4aa l c h / 0.2);
}

html[data-page="xdepot"][data-theme="light"] {
  --bg:             #f4f5f6;
  --surface:        #ffffff;
  --surface-2:      #f9fafa;
  --surface-off: #f0f1f2;
  --surface-off2:#eaeced;
  --divider:        #e2e4e5;
  --border:         #d8dadc;
  --border-sub:  #e8eaeb;

  --text:           #111314;
  --muted:     #6b6e6f;
  --faint:     #b0b3b5;

  --primary:        #009d7f;
  --primary-hover:  #007d65;
  --primary-dim:    #009d7f14;
  --primary-border: #009d7f28;
  --primary:   #007d65;

  --shadow-sm: 0 1px 3px oklch(0.2 0 0 / 0.08);
  --shadow-md: 0 4px 16px oklch(0.2 0 0 / 0.1);
  --shadow-lg: 0 16px 40px oklch(0.2 0 0 / 0.14);
  --glow: none;
}

@media (prefers-color-scheme: light) {
  html[data-page="xdepot"]:not([data-theme]) {
    --bg:#f4f5f6; --surface:#ffffff; --surface-2:#f9fafa;
    --surface-off:#f0f1f2; --surface-off2:#eaeced;
    --divider:#e2e4e5; --border:#d8dadc; --border-sub:#e8eaeb;
    --text:#111314; --muted:#6b6e6f; --faint:#b0b3b5;
    --primary:#009d7f; --primary-hover:#007d65;
    --primary-dim:#009d7f14; --primary-border:#009d7f28;
    --shadow-sm:0 1px 3px oklch(0.2 0 0 / 0.08);
    --shadow-md:0 4px 16px oklch(0.2 0 0 / 0.1);
    --shadow-lg:0 16px 40px oklch(0.2 0 0 / 0.14);
    --glow:none;
  }
}

 
html[data-page="xdepot"] *, html[data-page="xdepot"] *::before, html[data-page="xdepot"] *::after{box-sizing:border-box;margin:0;padding:0}
html[data-page="xdepot"] body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
 html[data-page="xdepot"] body{
  font-family:var(--font-body);font-size:var(--text-base);
  color:var(--text);background:var(--bg);
  min-height:100dvh;line-height:1.6;
}
 html[data-page="xdepot"] img, html[data-page="xdepot"] svg{display:block;max-width:100%;}
 html[data-page="xdepot"] button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
 html[data-page="xdepot"] a{color:inherit;text-decoration:none;}
 html[data-page="xdepot"] a, html[data-page="xdepot"] button, html[data-page="xdepot"] [role="button"]{
  transition:color var(--transition),background var(--transition),
             border-color var(--transition),box-shadow var(--transition),opacity var(--transition);
}
 html[data-page="xdepot"] :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm);}
 html[data-page="xdepot"] ::selection{background:var(--primary-dim);color:var(--text);}

 
html[data-page="xdepot"] .app{display:flex;height:100dvh;overflow:hidden;}

 
html[data-page="xdepot"] .sidebar{
  width:var(--nav-width);min-width:var(--nav-width);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  height:100dvh;overflow-y:auto;
  position:relative;z-index:20;
}

 
html[data-page="xdepot"] .sidebar-logo{
  display:flex;align-items:center;gap:var(--space-3);
  padding:0 var(--space-5);
  height:var(--header-height);
  flex-shrink:0;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
 html[data-page="xdepot"] .logo-svg{flex-shrink:0;}
 html[data-page="xdepot"] .logo-wordmark{
  display:flex;flex-direction:column;line-height:1;
}
 html[data-page="xdepot"] .logo-name{
  font-size:15px;font-weight:700;letter-spacing:-0.03em;
  color:var(--text);
}
 html[data-page="xdepot"] .logo-name span{color:var(--primary);}
 html[data-page="xdepot"] .logo-tagline{
  font-size:9px;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--faint);
  margin-top:1px;
}

 html[data-page="xdepot"] .sidebar-sep{height:1px;background:var(--border);margin:var(--space-3) 0;}

 html[data-page="xdepot"] .sidebar-group{padding:var(--space-4) 0 var(--space-2);}
 html[data-page="xdepot"] .sidebar-group-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--faint);padding:0 var(--space-5) var(--space-2);
}
 html[data-page="xdepot"] .s-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:6px var(--space-5);
  font-size:var(--text-sm);color:var(--muted);
  cursor:pointer;position:relative;user-select:none;
  border-radius:0;
}
 html[data-page="xdepot"] .s-item:hover{color:var(--text);background:var(--surface-off);}
 html[data-page="xdepot"] .s-item.active{color:var(--primary);background:var(--primary-dim);font-weight:500;}
 html[data-page="xdepot"] .s-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:18px;background:var(--primary);border-radius:0 2px 2px 0;
}
 html[data-page="xdepot"] .s-item-icon{flex-shrink:0;width:15px;height:15px;}
 html[data-page="xdepot"] .s-count{
  margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums;
  color:var(--faint);
  min-width:20px;text-align:right;
}
 html[data-page="xdepot"] .s-item.active .s-count{color:var(--primary);opacity:.7;}

 html[data-page="xdepot"] .sidebar-footer{
  margin-top:auto;padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border);
}
 html[data-page="xdepot"] .sidebar-footer-text{
  font-size:10px;color:var(--faint);line-height:1.6;
}
 html[data-page="xdepot"] .sidebar-footer-link{
  color:var(--primary);opacity:.8;
}
 html[data-page="xdepot"] .sidebar-footer-link:hover{opacity:1;}

 
html[data-page="xdepot"] .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

 
html[data-page="xdepot"] .topbar{
  height:var(--header-height);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--space-4);
  padding:0 var(--space-6);
  background:var(--surface);
  flex-shrink:0;
}
 html[data-page="xdepot"] .menu-btn{
  display:none;width:32px;height:32px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-md);color:var(--muted);
}
 html[data-page="xdepot"] .menu-btn:hover{background:var(--surface-off);color:var(--text);}

 html[data-page="xdepot"] .search-wrap{flex:1;max-width:440px;position:relative;display:flex;align-items:center;}
 html[data-page="xdepot"] .search-ico{position:absolute;left:var(--space-3);color:var(--faint);pointer-events:none;}
 html[data-page="xdepot"] .search-input{
  width:100%;
  padding:7px var(--space-3) 7px calc(var(--space-3) + 18px + var(--space-2));
  background:var(--surface-off);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--text);
  font-family:var(--font-body);
}
 html[data-page="xdepot"] .search-input::placeholder{color:var(--faint);}
 html[data-page="xdepot"] .search-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-dim);
}
 html[data-page="xdepot"] .search-kbd{
  position:absolute;right:var(--space-3);
  font-size:10px;font-family:var(--font-mono);
  color:var(--faint);
  background:var(--border);
  padding:1px 5px;border-radius:4px;
}

 html[data-page="xdepot"] .topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
 html[data-page="xdepot"] .icon-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);color:var(--muted);
}
 html[data-page="xdepot"] .icon-btn:hover{background:var(--surface-off);color:var(--text);}

 html[data-page="xdepot"] .topbar-badge{
  display:flex;align-items:center;gap:var(--space-2);
  padding:4px var(--space-3);
  border:1px solid var(--primary-border);
  border-radius:var(--radius-full);
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--primary);
}
 html[data-page="xdepot"] .topbar-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--primary);
  animation:xdepot-pulse 2s ease infinite;
}
@keyframes xdepot-pulse{0%,100%{opacity:1}50%{opacity:.4}}

 
html[data-page="xdepot"] .content{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-8);}

/* xdepot — hero */
html[data-page="xdepot"] .hero{
  margin-bottom:var(--space-8);padding:var(--space-8);
  border:1px solid var(--border);border-radius:var(--radius-2xl);
  background:var(--surface);position:relative;overflow:hidden;
}
html[data-page="xdepot"] .hero::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,var(--primary-dim) 0%,transparent 70%);
  pointer-events:none;
}
html[data-page="xdepot"] .hero::after{
  content:'';position:absolute;bottom:-40px;left:30%;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--primary-dim) 0%,transparent 70%);
  pointer-events:none;opacity:.5;
}
html[data-page="xdepot"] .hero-inner{position:relative;z-index:1;}
html[data-page="xdepot"] .hero-eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);margin-bottom:var(--space-4);
}
html[data-page="xdepot"] .hero-eyebrow-line{width:20px;height:1px;background:var(--primary);}
html[data-page="xdepot"] .hero-title{
  font-size:var(--text-2xl);font-weight:700;letter-spacing:-.035em;
  color:var(--text);line-height:1.1;margin-bottom:var(--space-3);
}
html[data-page="xdepot"] .hero-title em{font-style:normal;color:var(--primary);}
html[data-page="xdepot"] .hero-desc{
  font-size:var(--text-sm);color:var(--muted);
  max-width:52ch;line-height:1.7;margin-bottom:var(--space-6);
}
html[data-page="xdepot"] .hero-stats{display:flex;gap:var(--space-8);}
html[data-page="xdepot"] .hero-stat-num{
  font-size:var(--text-xl);font-weight:700;letter-spacing:-.03em;
  color:var(--text);font-variant-numeric:tabular-nums;
}
html[data-page="xdepot"] .hero-stat-label{font-size:var(--text-xs);color:var(--faint);margin-top:2px;}

/* xdepot — page header */
html[data-page="xdepot"] .page-header{margin-bottom:var(--space-6);}
html[data-page="xdepot"] .page-title{
  font-size:var(--text-xl);font-weight:700;
  letter-spacing:-.025em;color:var(--text);line-height:1.15;
}
html[data-page="xdepot"] .page-sub{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-1);}

/* xdepot — filters */
html[data-page="xdepot"] .filters{
  display:flex;align-items:center;gap:var(--space-2);
  margin-bottom:var(--space-5);flex-wrap:wrap;
}
html[data-page="xdepot"] .pill{
  display:flex;align-items:center;gap:var(--space-2);
  padding:5px var(--space-3);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:500;
  border:1px solid var(--border);color:var(--muted);background:var(--surface);cursor:pointer;
}
html[data-page="xdepot"] .pill:hover{border-color:var(--primary);color:var(--primary);}
html[data-page="xdepot"] .pill.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;}
html[data-page="xdepot"] .filters-count{
  margin-left:auto;font-size:var(--text-xs);color:var(--faint);white-space:nowrap;
}
html[data-page="xdepot"] .filters-count b{color:var(--muted);}

/* xdepot — grid */
html[data-page="xdepot"] .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
  gap:var(--space-4);
}

/* xdepot — repo card */
html[data-page="xdepot"] .card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-4);
  transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);
  position:relative;overflow:hidden;
  animation:xdepot-up .35s ease both;
}
html[data-page="xdepot"] .card:nth-child(1){animation-delay:0ms}
html[data-page="xdepot"] .card:nth-child(2){animation-delay:40ms}
html[data-page="xdepot"] .card:nth-child(3){animation-delay:80ms}
html[data-page="xdepot"] .card:nth-child(4){animation-delay:120ms}
html[data-page="xdepot"] .card:nth-child(5){animation-delay:160ms}
html[data-page="xdepot"] .card:nth-child(6){animation-delay:200ms}
@keyframes xdepot-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html[data-page="xdepot"] .card{animation:none}}

html[data-page="xdepot"] .card:hover{
  box-shadow:var(--shadow-md);border-color:var(--primary-border);transform:translateY(-2px);
}
html[data-page="xdepot"] .card-accent-line{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:transparent;transition:background var(--transition);
}
html[data-page="xdepot"] .card:hover .card-accent-line{
  background:linear-gradient(90deg,var(--primary) 0%,transparent 70%);
}
html[data-page="xdepot"] .card-head{display:flex;align-items:flex-start;gap:var(--space-3);}
html[data-page="xdepot"] .card-emoji{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:var(--surface-off);border:1px solid var(--border-sub);
}
html[data-page="xdepot"] .card-info{flex:1;min-width:0;}
html[data-page="xdepot"] .card-repo{
  font-size:var(--text-sm);font-weight:600;color:var(--text);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-page="xdepot"] .card-author{font-size:10px;color:var(--faint);font-family:var(--font-mono);}
html[data-page="xdepot"] .card-save{
  margin-left:auto;flex-shrink:0;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);color:var(--faint);
  opacity:0;transition:opacity var(--transition),color var(--transition),background var(--transition);
}
html[data-page="xdepot"] .card:hover .card-save{opacity:1;}
html[data-page="xdepot"] .card-save:hover{background:var(--surface-off);color:var(--primary);}
html[data-page="xdepot"] .card-save.on{opacity:1;color:var(--primary);}
html[data-page="xdepot"] .card-desc{
  font-size:var(--text-sm);color:var(--muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;
}
html[data-page="xdepot"] .card-insight{
  background:var(--primary-dim);border:1px solid var(--primary-border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  font-size:var(--text-xs);color:var(--primary);line-height:1.55;
}
html[data-page="xdepot"] .card-insight-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:3px;opacity:.6;
}
html[data-page="xdepot"] .card-tags{display:flex;gap:var(--space-2);flex-wrap:wrap;}
html[data-page="xdepot"] .tag{
  font-size:10px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--radius-full);
  background:var(--surface-off);color:var(--faint);border:1px solid var(--border-sub);
}
html[data-page="xdepot"] .card-foot{
  display:flex;align-items:center;gap:var(--space-3);
  border-top:1px solid var(--divider);padding-top:var(--space-3);margin-top:auto;
}
html[data-page="xdepot"] .card-stat{
  display:flex;align-items:center;gap:4px;
  font-size:var(--text-xs);color:var(--faint);font-variant-numeric:tabular-nums;
}
html[data-page="xdepot"] .lang-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
html[data-page="xdepot"] .card-gh-link{
  margin-left:auto;display:flex;align-items:center;gap:4px;
  font-size:var(--text-xs);font-weight:500;color:var(--primary);
  padding:3px 8px;border-radius:var(--radius-sm);
}
html[data-page="xdepot"] .card-gh-link:hover{background:var(--primary-dim);}

/* xdepot — collection banner */
html[data-page="xdepot"] .coll-banner{
  margin-bottom:var(--space-6);padding:var(--space-6) 1.75rem;
  border:1px solid var(--primary-border);border-radius:var(--radius-xl);
  background:var(--primary-dim);
  display:flex;align-items:center;gap:var(--space-5);
  position:relative;overflow:hidden;
}
html[data-page="xdepot"] .coll-banner::after{
  content:'';position:absolute;right:-50px;top:-50px;
  width:200px;height:200px;border-radius:50%;
  background:var(--primary-dim);pointer-events:none;
}
html[data-page="xdepot"] .coll-icon{
  font-size:36px;flex-shrink:0;width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  position:relative;z-index:1;
}
html[data-page="xdepot"] .coll-body{flex:1;position:relative;z-index:1;}
html[data-page="xdepot"] .coll-badge{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--primary);margin-bottom:var(--space-1);
}
html[data-page="xdepot"] .coll-title{
  font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;
  color:var(--text);line-height:1.2;
}
html[data-page="xdepot"] .coll-desc{font-size:var(--text-sm);color:var(--muted);margin-top:2px;}

/* xdepot — empty state */
html[data-page="xdepot"] .empty{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--space-16) var(--space-8);color:var(--muted);
}
html[data-page="xdepot"] .empty svg{color:var(--faint);margin-bottom:var(--space-4);}
html[data-page="xdepot"] .empty h3{color:var(--text);font-size:var(--text-lg);margin-bottom:var(--space-2);}
html[data-page="xdepot"] .empty p{max-width:36ch;font-size:var(--text-sm);}

/* xdepot — sidebar overlay */
html[data-page="xdepot"] .sidebar-overlay{
  display:none;position:fixed;inset:0;background:oklch(0 0 0/.6);z-index:10;
}

/* xdepot — responsive */
@media(max-width:768px){
  html[data-page="xdepot"]{--nav-width:260px;}
  html[data-page="xdepot"] .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:30;
    transform:translateX(-100%);transition:transform var(--transition);
  }
  html[data-page="xdepot"] .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg);}
  html[data-page="xdepot"] .sidebar-overlay.visible{display:block;}
  html[data-page="xdepot"] .menu-btn{display:flex;}
  html[data-page="xdepot"] .content{padding:var(--space-4);}
  html[data-page="xdepot"] .topbar{padding:0 var(--space-4);}
  html[data-page="xdepot"] .search-kbd{display:none;}
  html[data-page="xdepot"] .coll-banner{flex-direction:column;}
  html[data-page="xdepot"] .hero-stats{gap:var(--space-6);}
  html[data-page="xdepot"] .topbar-badge{display:none;}
}

/* ===== search.html ===== */
/* (shared tokens: spacing, type, radii, fonts, transition, nav-width, header-height — from :root) */

html[data-page="search"][data-theme="dark"] {
  --bg:#0d0e0f;--surface:#131415;--surface-2:#181a1b;
  --surface-off:#1c1e1f;--surface-off2:#212325;
  --divider:#242628;--border:#2a2c2e;--border-sub:#222426;
  --text:#e8e8e6;--muted:#878885;--faint:#484a48;
  --primary:#00d4aa;--primary-hover:#00eebc;
  --primary-dim:#00d4aa18;--primary-border:#00d4aa2a;
  --shadow-sm:0 1px 3px oklch(0 0 0/.35);
  --shadow-md:0 4px 16px oklch(0 0 0/.45);
  --shadow-lg:0 16px 40px oklch(0 0 0/.6);
}
html[data-page="search"][data-theme="light"] {
  --bg:#f4f5f6;--surface:#fff;--surface-2:#f9fafa;
  --surface-off:#f0f1f2;--surface-off2:#eaeced;
  --divider:#e2e4e5;--border:#d8dadc;--border-sub:#e8eaeb;
  --text:#111314;--muted:#6b6e6f;--faint:#b0b3b5;
  --primary:#009d7f;--primary-hover:#007d65;
  --primary-dim:#009d7f12;--primary-border:#009d7f26;
  --shadow-sm:0 1px 3px oklch(0.2 0 0/.08);
  --shadow-md:0 4px 16px oklch(0.2 0 0/.1);
  --shadow-lg:0 16px 40px oklch(0.2 0 0/.14);
}
 html[data-page="search"] *, html[data-page="search"] *::before, html[data-page="search"] *::after{box-sizing:border-box;margin:0;padding:0;}
html[data-page="search"] body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
 html[data-page="search"] body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg);overflow:hidden;}
 html[data-page="search"] button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
 html[data-page="search"] a{color:inherit;text-decoration:none;}
 html[data-page="search"] a, html[data-page="search"] button{transition:color var(--transition),background var(--transition),border-color var(--transition),opacity var(--transition),box-shadow var(--transition);}
 html[data-page="search"] :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm);}
 html[data-page="search"] ::selection{background:var(--primary-dim);}

 
html[data-page="search"] .app{display:flex;height:100dvh;overflow:hidden;}

 
html[data-page="search"] .nav{
  width:var(--nav-width);min-width:var(--nav-width);flex-shrink:0;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;height:100dvh;overflow-y:auto;z-index:20;
}
 html[data-page="search"] .nav-logo{
  display:flex;align-items:center;gap:var(--space-3);
  padding:0 var(--space-5);height:var(--header-height);flex-shrink:0;
  border-bottom:1px solid var(--border);cursor:pointer;
}
 html[data-page="search"] .logo-name{font-size:15px;font-weight:700;letter-spacing:-.03em;}
 html[data-page="search"] .logo-name span{color:var(--primary);}
 html[data-page="search"] .logo-tag{font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:1px;}
 html[data-page="search"] .nav-group{padding:var(--space-4) 0 var(--space-2);}
 html[data-page="search"] .nav-group-lbl, html[data-page="search"] .nav-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding:0 var(--space-5) var(--space-2);}
 html[data-page="search"] .nav-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:6px var(--space-5);font-size:var(--text-sm);color:var(--muted);cursor:pointer;position:relative;
}
 html[data-page="search"] .nav-item:hover{color:var(--text);background:var(--surface-off);}
 html[data-page="search"] .nav-item.active{color:var(--primary);background:var(--primary-dim);font-weight:500;}
 html[data-page="search"] .nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:18px;background:var(--primary);border-radius:0 2px 2px 0;}
 html[data-page="search"] .nav-count{margin-left:auto;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums;}
 html[data-page="search"] .nav-item.active .nav-count{color:var(--primary);opacity:.7;}
 html[data-page="search"] .nav-sep{height:1px;background:var(--border);margin:var(--space-3) 0;}
 html[data-page="search"] .nav-footer{margin-top:auto;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);}
 html[data-page="search"] .nav-footer-txt{font-size:10px;color:var(--faint);line-height:1.6;}
 html[data-page="search"] .nav-footer-link{color:var(--primary);opacity:.8;}
 html[data-page="search"] .nav-footer-link:hover{opacity:1;}
 html[data-page="search"] .nav-overlay{display:none;position:fixed;inset:0;background:oklch(0 0 0/.6);z-index:10;}

 
html[data-page="search"] .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

 
html[data-page="search"] .topbar{
  height:var(--header-height);flex-shrink:0;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-6);
}
 html[data-page="search"] .menu-btn{display:none;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--muted);}
 html[data-page="search"] .menu-btn:hover{background:var(--surface-off);color:var(--text);}
 html[data-page="search"] .topbar-search{
  flex:1;max-width:540px;display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface-off);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:0 var(--space-4);height:34px;
  transition:border-color var(--transition),box-shadow var(--transition);
}
 html[data-page="search"] .topbar-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim);}
 html[data-page="search"] .topbar-search input{
  flex:1;background:none;border:none;outline:none;
  font-size:var(--text-sm);color:var(--text);font-family:var(--font-body);
}
 html[data-page="search"] .topbar-search input::placeholder{color:var(--faint);}
 html[data-page="search"] .topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
 html[data-page="search"] .icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--muted);}
 html[data-page="search"] .icon-btn:hover{background:var(--surface-off);color:var(--text);}

 
html[data-page="search"] .content{flex:1;overflow-y:auto;}
 html[data-page="search"] .search-wrap{max-width:1100px;margin:0 auto;padding:var(--space-8) var(--space-8);display:grid;grid-template-columns:224px 1fr;gap:var(--space-8);align-items:start;}

 
html[data-page="search"] .search-hero{grid-column:1/-1;margin-bottom:var(--space-2);}
 html[data-page="search"] .search-hero-bar{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:0 var(--space-5);height:56px;
  box-shadow:var(--shadow-md);
  transition:border-color var(--transition),box-shadow var(--transition);
}
 html[data-page="search"] .search-hero-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim),var(--shadow-md);}
 html[data-page="search"] .search-ico{color:var(--muted);flex-shrink:0;}
 html[data-page="search"] .search-hero-bar input{
  flex:1;background:none;border:none;outline:none;
  font-size:var(--text-lg);color:var(--text);font-family:var(--font-body);
}
 html[data-page="search"] .search-hero-bar input::placeholder{color:var(--faint);}
 html[data-page="search"] .search-kbd{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:10px;color:var(--faint);font-family:var(--font-mono);
}
 html[data-page="search"] .kbd{
  padding:2px 5px;border:1px solid var(--border);border-radius:4px;
  font-size:10px;color:var(--faint);background:var(--surface-off);
}
 html[data-page="search"] .search-clear{
  width:28px;height:28px;border-radius:var(--radius-full);
  display:none;align-items:center;justify-content:center;
  background:var(--surface-off);color:var(--muted);flex-shrink:0;
}
 html[data-page="search"] .search-clear:hover{background:var(--surface-off2);color:var(--text);}
 html[data-page="search"] .search-clear.visible{display:flex;}

 
html[data-page="search"] .suggestions{grid-column:1/-1;}
 html[data-page="search"] .suggestions-title{font-size:var(--text-sm);font-weight:600;color:var(--text);margin-bottom:var(--space-4);}
 html[data-page="search"] .sug-section{margin-bottom:var(--space-6);}
 html[data-page="search"] .sug-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:var(--space-3);}
 html[data-page="search"] .sug-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);}
 html[data-page="search"] .sug-chip{
  display:flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-4);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--muted);cursor:pointer;
}
 html[data-page="search"] .sug-chip:hover{border-color:var(--primary-border);color:var(--primary);background:var(--primary-dim);}
 html[data-page="search"] .sug-chip-ico{font-size:13px;}
 html[data-page="search"] .trending-list{display:flex;flex-direction:column;gap:var(--space-2);}
 html[data-page="search"] .trending-item{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  cursor:pointer;transition:border-color var(--transition),transform var(--transition);
}
 html[data-page="search"] .trending-item:hover{border-color:var(--primary-border);transform:translateX(2px);}
 html[data-page="search"] .trending-num{font-size:var(--text-xs);font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;width:18px;flex-shrink:0;}
 html[data-page="search"] .trending-ico{font-size:18px;flex-shrink:0;}
 html[data-page="search"] .trending-name{font-size:var(--text-sm);font-weight:600;color:var(--text);font-family:var(--font-mono);}
 html[data-page="search"] .trending-cat{font-size:var(--text-xs);color:var(--muted);}
 html[data-page="search"] .trending-stars{margin-left:auto;font-size:var(--text-xs);color:var(--faint);display:flex;align-items:center;gap:4px;flex-shrink:0;}

 
html[data-page="search"] .filters{position:sticky;top:var(--space-6);}
 html[data-page="search"] .filter-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-4);}
 html[data-page="search"] .filter-head{
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  user-select:none;
}
 html[data-page="search"] .filter-head:hover{color:var(--muted);}
 html[data-page="search"] .filter-chevron{transition:transform var(--transition);}
 html[data-page="search"] .filter-body{padding:var(--space-3) var(--space-4);}
 html[data-page="search"] .filter-opt{
  display:flex;align-items:center;gap:var(--space-3);
  padding:5px var(--space-2);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--muted);cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
 html[data-page="search"] .filter-opt:hover{background:var(--surface-off);color:var(--text);}
 html[data-page="search"] .filter-opt.on{color:var(--primary);}
 html[data-page="search"] .filter-check{
  width:16px;height:16px;border:1px solid var(--border);border-radius:4px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition),border-color var(--transition);
}
 html[data-page="search"] .filter-opt.on .filter-check{background:var(--primary);border-color:var(--primary);}
 html[data-page="search"] .filter-count{margin-left:auto;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums;}
 html[data-page="search"] .filter-opt.on .filter-count{color:var(--primary);opacity:.7;}
 html[data-page="search"] .sort-opts{display:flex;flex-direction:column;gap:2px;}
 html[data-page="search"] .sort-opt{
  display:flex;align-items:center;gap:var(--space-3);
  padding:5px var(--space-2);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--muted);cursor:pointer;
}
 html[data-page="search"] .sort-opt:hover{background:var(--surface-off);color:var(--text);}
 html[data-page="search"] .sort-opt.on{color:var(--primary);}
 html[data-page="search"] .sort-radio{
  width:14px;height:14px;border:1px solid var(--border);border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
 html[data-page="search"] .sort-opt.on .sort-radio{border-color:var(--primary);}
 html[data-page="search"] .sort-opt.on .sort-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);}
 html[data-page="search"] .filter-reset{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-2);
  width:100%;
}
 html[data-page="search"] .filter-reset:hover{border-color:var(--primary-border);color:var(--primary);}

 
html[data-page="search"] .results-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-5);
}
 html[data-page="search"] .results-count{font-size:var(--text-sm);color:var(--muted);}
 html[data-page="search"] .results-count strong{color:var(--text);}
 html[data-page="search"] .view-toggle{display:flex;gap:2px;}
 html[data-page="search"] .view-btn{width:30px;height:30px;border-radius:var(--radius-md);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--faint);}
 html[data-page="search"] .view-btn.on{border-color:var(--primary-border);color:var(--primary);background:var(--primary-dim);}
 html[data-page="search"] .view-btn:hover{color:var(--muted);}

 
html[data-page="search"] .results-list{display:flex;flex-direction:column;gap:var(--space-3);}
 html[data-page="search"] .repo-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:var(--space-5) var(--space-6);
  cursor:pointer;
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
  display:block;
  animation:search-fadeUp .3s ease both;
}
 html[data-page="search"] .repo-card:hover{
  border-color:var(--primary-border);
  box-shadow:0 0 0 1px var(--primary-border),var(--shadow-md);
  transform:translateY(-1px);
}
 html[data-page="search"] .repo-top{display:flex;align-items:flex-start;gap:var(--space-4);}
 html[data-page="search"] .repo-emoji{font-size:22px;flex-shrink:0;line-height:1;margin-top:2px;}
 html[data-page="search"] .repo-info{flex:1;min-width:0;}
 html[data-page="search"] .repo-path{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--muted);margin-bottom:3px;}
 html[data-page="search"] .repo-path strong{color:var(--primary);}
 html[data-page="search"] .repo-name{font-size:var(--text-base);font-weight:700;color:var(--text);margin-bottom:var(--space-2);letter-spacing:-.01em;}
 html[data-page="search"] .repo-desc{font-size:var(--text-sm);color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
 html[data-page="search"] .repo-meta{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-3);flex-wrap:wrap;}
 html[data-page="search"] .repo-stat{display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--faint);}
 html[data-page="search"] .repo-tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3);}
 html[data-page="search"] .repo-tag{font-size:10px;padding:2px 9px;border-radius:var(--radius-full);background:var(--surface-off);color:var(--faint);border:1px solid var(--border-sub);}
 html[data-page="search"] .repo-tag.match{background:var(--primary-dim);color:var(--primary);border-color:var(--primary-border);}
 html[data-page="search"] .repo-score{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);}
 html[data-page="search"] .score-badge{
  display:flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--radius-full);
  font-size:11px;font-weight:700;
  background:var(--primary-dim);color:var(--primary);border:1px solid var(--primary-border);
}
 html[data-page="search"] .repo-save{width:28px;height:28px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--faint);}
 html[data-page="search"] .repo-save:hover{color:var(--primary);background:var(--primary-dim);}
 html[data-page="search"] .repo-save.saved{color:var(--primary);}

 
html[data-page="search"] .insight-pill{
  margin-top:var(--space-3);padding:var(--space-3) var(--space-4);
  background:var(--surface-off);border-radius:var(--radius-lg);
  font-size:var(--text-xs);color:var(--muted);line-height:1.5;
  border-left:2px solid var(--primary);display:none;
}
 html[data-page="search"] .repo-card:hover .insight-pill{display:block;}

 
html[data-page="search"] .results-list.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
 html[data-page="search"] .results-list.grid .insight-pill{display:none!important;}
 html[data-page="search"] .results-list.grid .repo-desc{-webkit-line-clamp:2;}
 html[data-page="search"] .results-list.grid .repo-score{flex-direction:row;align-items:center;}

 
html[data-page="search"] .no-results{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--space-16) var(--space-8);
}
 html[data-page="search"] .no-results-ico{font-size:48px;margin-bottom:var(--space-4);}
 html[data-page="search"] .no-results h3{font-size:var(--text-lg);font-weight:700;color:var(--text);margin-bottom:var(--space-2);}
 html[data-page="search"] .no-results p{font-size:var(--text-sm);color:var(--muted);max-width:36ch;margin-bottom:var(--space-6);}
 html[data-page="search"] .btn-primary{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-6);background:var(--primary);
  border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:600;color:#0d0e0f;
}
 html[data-page="search"] .btn-primary:hover{background:var(--primary-hover);}

 
html[data-page="search"] .pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-8);}
 html[data-page="search"] .page-btn{
  width:36px;height:36px;border-radius:var(--radius-md);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);color:var(--muted);
}
 html[data-page="search"] .page-btn:hover{border-color:var(--primary-border);color:var(--primary);}
 html[data-page="search"] .page-btn.on{background:var(--primary);border-color:var(--primary);color:#0d0e0f;font-weight:700;}
 html[data-page="search"] .page-btn.arrow{width:auto;padding:0 var(--space-3);gap:var(--space-2);}
 html[data-page="search"] .page-btn.arrow:disabled{opacity:.3;cursor:not-allowed;}

 
html[data-page="search"] mark{background:none;color:var(--primary);font-weight:600;}

 
@keyframes search-fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

 
@media(max-width:900px){html[data-page="search"] .search-wrap{grid-template-columns:1fr;}html[data-page="search"] .filters{position:static;}}
@media(max-width:768px){
  html[data-page="search"]{--nav-width:260px;}
   html[data-page="search"] .nav{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform var(--transition);}
   html[data-page="search"] .nav.open{transform:translateX(0);box-shadow:var(--shadow-lg);}
   html[data-page="search"] .nav-overlay.visible{display:block;}
   html[data-page="search"] .menu-btn{display:flex;}
   html[data-page="search"] .search-wrap{padding:var(--space-4);}
   html[data-page="search"] .topbar{padding:0 var(--space-4);}
   html[data-page="search"] .results-list.grid{grid-template-columns:1fr;}
   html[data-page="search"] .search-kbd{display:none;}
}

/* ===== repo-page.html ===== */
/* (shared tokens: spacing, type, radii, fonts, transition, nav-width, header-height — from :root) */

html[data-page="repo-page"][data-theme="dark"] {
  --bg:#0d0e0f;--surface:#131415;--surface-2:#181a1b;
  --surface-off:#1c1e1f;--surface-off2:#212325;
  --divider:#242628;--border:#2a2c2e;--border-sub:#222426;
  --text:#e8e8e6;--muted:#878885;--faint:#484a48;
  --primary:#00d4aa;--primary-hover:#00eebc;
  --primary-dim:#00d4aa18;--primary-border:#00d4aa2a;
  --shadow-sm:0 1px 3px oklch(0 0 0/.35);
  --shadow-md:0 4px 16px oklch(0 0 0/.45);
  --shadow-lg:0 16px 40px oklch(0 0 0/.6);
  --code-bg:#0a1628;--code-border:#1a2d4a;
}
html[data-page="repo-page"][data-theme="light"] {
  --bg:#f4f5f6;--surface:#fff;--surface-2:#f9fafa;
  --surface-off:#f0f1f2;--surface-off2:#eaeced;
  --divider:#e2e4e5;--border:#d8dadc;--border-sub:#e8eaeb;
  --text:#111314;--muted:#6b6e6f;--faint:#b0b3b5;
  --primary:#009d7f;--primary-hover:#007d65;
  --primary-dim:#009d7f12;--primary-border:#009d7f26;
  --shadow-sm:0 1px 3px oklch(0.2 0 0/.08);
  --shadow-md:0 4px 16px oklch(0.2 0 0/.1);
  --shadow-lg:0 16px 40px oklch(0.2 0 0/.14);
  --code-bg:#f6f8fa;--code-border:#e1e4e8;
}

 html[data-page="repo-page"] *, html[data-page="repo-page"] *::before, html[data-page="repo-page"] *::after{box-sizing:border-box;margin:0;padding:0}
html[data-page="repo-page"] body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
 html[data-page="repo-page"] body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg);line-height:1.6;overflow:hidden;}
 html[data-page="repo-page"] img, html[data-page="repo-page"] svg{display:block;max-width:100%;}
 html[data-page="repo-page"] button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
 html[data-page="repo-page"] a{color:inherit;text-decoration:none;}
 html[data-page="repo-page"] a, html[data-page="repo-page"] button{transition:color var(--transition),background var(--transition),border-color var(--transition),opacity var(--transition);}
 html[data-page="repo-page"] :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm);}
 html[data-page="repo-page"] ::selection{background:var(--primary-dim);}

 
html[data-page="repo-page"] .app{display:flex;height:100dvh;overflow:hidden;}

 
html[data-page="repo-page"] .nav{
  width:var(--nav-width);min-width:var(--nav-width);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  height:100dvh;overflow-y:auto;
  position:relative;z-index:20;
  flex-shrink:0;
}
 html[data-page="repo-page"] .nav-logo{
  display:flex;align-items:center;gap:var(--space-3);
  padding:0 var(--space-5);height:var(--header-height);
  flex-shrink:0;border-bottom:1px solid var(--border);
  cursor:pointer;
}
 html[data-page="repo-page"] .logo-name{font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--text);}
 html[data-page="repo-page"] .logo-name span{color:var(--primary);}
 html[data-page="repo-page"] .logo-tagline{font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:1px;}

 html[data-page="repo-page"] .nav-group{padding:var(--space-4) 0 var(--space-2);}
 html[data-page="repo-page"] .nav-group-lbl{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);padding:0 var(--space-5) var(--space-2);
}
 html[data-page="repo-page"] .nav-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:6px var(--space-5);
  font-size:var(--text-sm);color:var(--muted);
  cursor:pointer;position:relative;
}
 html[data-page="repo-page"] .nav-item:hover{color:var(--text);background:var(--surface-off);}
 html[data-page="repo-page"] .nav-item.active{color:var(--primary);background:var(--primary-dim);font-weight:500;}
 html[data-page="repo-page"] .nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:18px;background:var(--primary);border-radius:0 2px 2px 0;
}
 html[data-page="repo-page"] .nav-item-ico{flex-shrink:0;width:15px;height:15px;}
 html[data-page="repo-page"] .nav-count{
  margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums;
  color:var(--faint);min-width:20px;text-align:right;
}
 html[data-page="repo-page"] .nav-item.active .nav-count{color:var(--primary);opacity:.7;}
 html[data-page="repo-page"] .nav-sep{height:1px;background:var(--border);margin:var(--space-3) 0;}

 
html[data-page="repo-page"] .nav-breadcrumb{
  margin:var(--space-3) var(--space-3);
  padding:var(--space-3);
  background:var(--surface-off);
  border:1px solid var(--border-sub);
  border-radius:var(--radius-lg);
}
 html[data-page="repo-page"] .nav-bc-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);margin-bottom:var(--space-2);
}
 html[data-page="repo-page"] .nav-bc-path{display:flex;flex-direction:column;gap:3px;}
 html[data-page="repo-page"] .nav-bc-cat{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);color:var(--muted);
  padding:3px var(--space-2);border-radius:var(--radius-sm);
  cursor:pointer;
}
 html[data-page="repo-page"] .nav-bc-cat:hover{color:var(--text);background:var(--surface-off2);}
 html[data-page="repo-page"] .nav-bc-cat-ico{font-size:12px;}
 html[data-page="repo-page"] .nav-bc-repo{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);font-weight:600;color:var(--primary);
  padding:4px var(--space-2);
  background:var(--primary-dim);
  border:1px solid var(--primary-border);
  border-radius:var(--radius-sm);
  margin-top:2px;
}
 html[data-page="repo-page"] .nav-bc-arrow{color:var(--faint);margin-left:auto;flex-shrink:0;}

 html[data-page="repo-page"] .nav-footer{
  margin-top:auto;padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border);
}
 html[data-page="repo-page"] .nav-footer-txt{font-size:10px;color:var(--faint);line-height:1.6;}
 html[data-page="repo-page"] .nav-footer-link{color:var(--primary);opacity:.8;}
 html[data-page="repo-page"] .nav-footer-link:hover{opacity:1;}

 
html[data-page="repo-page"] .nav-overlay{
  display:none;position:fixed;inset:0;
  background:oklch(0 0 0/.6);z-index:10;
}

 
html[data-page="repo-page"] .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

 
html[data-page="repo-page"] .topbar{
  height:var(--header-height);flex-shrink:0;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--space-4);
  padding:0 var(--space-6);
}
 html[data-page="repo-page"] .menu-btn{
  display:none;width:32px;height:32px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-md);color:var(--muted);
}
 html[data-page="repo-page"] .menu-btn:hover{background:var(--surface-off);color:var(--text);}
 html[data-page="repo-page"] .breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--muted);}
 html[data-page="repo-page"] .breadcrumb a:hover{color:var(--text);}
 html[data-page="repo-page"] .breadcrumb-cur{color:var(--text);font-weight:500;font-family:var(--font-mono);font-size:var(--text-xs);}
 html[data-page="repo-page"] .topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
 html[data-page="repo-page"] .icon-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);color:var(--muted);
}
 html[data-page="repo-page"] .icon-btn:hover{background:var(--surface-off);color:var(--text);}
 html[data-page="repo-page"] .btn-outline{
  display:flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-4);
  border:1px solid var(--border);border-radius:var(--radius-md);
  font-size:var(--text-xs);font-weight:500;color:var(--muted);
}
 html[data-page="repo-page"] .btn-outline:hover{border-color:var(--primary);color:var(--primary);}
 html[data-page="repo-page"] .btn-primary-sm{
  display:flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-4);
  background:var(--primary);border-radius:var(--radius-md);
  font-size:var(--text-xs);font-weight:600;color:#0d0e0f;
}
 html[data-page="repo-page"] .btn-primary-sm:hover{background:var(--primary-hover);}

 
html[data-page="repo-page"] .content{flex:1;overflow-y:auto;}
 html[data-page="repo-page"] .page{max-width:1060px;margin:0 auto;padding:var(--space-8) var(--space-8);}

 
html[data-page="repo-page"] .layout{display:grid;grid-template-columns:1fr 288px;gap:var(--space-8);align-items:start;}

 
html[data-page="repo-page"] .hero{margin-bottom:var(--space-8);}
 html[data-page="repo-page"] .hero-top{display:flex;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-5);}
 html[data-page="repo-page"] .hero-icon{
  width:56px;height:56px;flex-shrink:0;
  border-radius:var(--radius-xl);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
 html[data-page="repo-page"] .hero-meta{flex:1;min-width:0;}
 html[data-page="repo-page"] .hero-path{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--muted);margin-bottom:var(--space-2);}
 html[data-page="repo-page"] .hero-path a{color:var(--primary);}
 html[data-page="repo-page"] .hero-path a:hover{text-decoration:underline;}
 html[data-page="repo-page"] .hero-name{font-size:var(--text-xl);font-weight:700;letter-spacing:-.03em;color:var(--text);line-height:1.1;margin-bottom:var(--space-3);}
 html[data-page="repo-page"] .hero-desc{font-size:var(--text-base);color:var(--muted);line-height:1.65;max-width:64ch;}
 html[data-page="repo-page"] .hero-badges{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4);}
 html[data-page="repo-page"] .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--radius-full);font-size:10px;font-weight:600;}
 html[data-page="repo-page"] .badge-green{background:var(--primary-dim);color:var(--primary);border:1px solid var(--primary-border);}
 html[data-page="repo-page"] .badge-gray{background:var(--surface-off);color:var(--faint);border:1px solid var(--border-sub);}

 
html[data-page="repo-page"] .stats-row{
  display:flex;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  overflow:hidden;margin-bottom:var(--space-8);
}
 html[data-page="repo-page"] .stat-cell{
  flex:1;padding:var(--space-4) var(--space-5);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px;
}
 html[data-page="repo-page"] .stat-cell:last-child{border-right:none;}
 html[data-page="repo-page"] .stat-num{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;}
 html[data-page="repo-page"] .stat-lbl{font-size:10px;color:var(--faint);font-weight:500;text-transform:uppercase;letter-spacing:.06em;}
 html[data-page="repo-page"] .stat-delta{font-size:10px;color:var(--primary);font-weight:600;}

 
html[data-page="repo-page"] .section{margin-bottom:var(--space-8);}
 html[data-page="repo-page"] .section-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);margin-bottom:var(--space-4);
  display:flex;align-items:center;gap:var(--space-3);
}
 html[data-page="repo-page"] .section-title::after{content:'';flex:1;height:1px;background:var(--border);}

 
html[data-page="repo-page"] .insight{
  background:var(--primary-dim);border:1px solid var(--primary-border);
  border-radius:var(--radius-xl);padding:var(--space-6);
  position:relative;overflow:hidden;
}
 html[data-page="repo-page"] .insight::before{
  content:'';position:absolute;right:-30px;top:-30px;
  width:140px;height:140px;border-radius:50%;
  background:var(--primary-dim);pointer-events:none;
}
 html[data-page="repo-page"] .insight-inner{position:relative;z-index:1;}
 html[data-page="repo-page"] .insight-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--primary);margin-bottom:var(--space-3);
}
 html[data-page="repo-page"] .insight-text{font-size:var(--text-base);color:var(--text);line-height:1.7;}
 html[data-page="repo-page"] .insight-text strong{color:var(--primary);font-weight:600;}
 html[data-page="repo-page"] .inline-code{
  font-family:var(--font-mono);font-size:.88em;
  color:var(--primary);background:var(--primary-dim);
  padding:1px 5px;border-radius:4px;
}

 
html[data-page="repo-page"] .quickstart{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;}
 html[data-page="repo-page"] .qs-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 var(--space-4);gap:0;}
 html[data-page="repo-page"] .qs-tab{
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-xs);font-weight:500;color:var(--muted);
  border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;
}
 html[data-page="repo-page"] .qs-tab:hover{color:var(--text);}
 html[data-page="repo-page"] .qs-tab.on{color:var(--primary);border-bottom-color:var(--primary);}
 html[data-page="repo-page"] .qs-body{padding:var(--space-5);}
 html[data-page="repo-page"] .code-block{
  background:var(--code-bg);border:1px solid var(--code-border);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);
  font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.7;
  position:relative;overflow-x:auto;white-space:pre;
}
 html[data-page="repo-page"] .comment{color:#6b7280;} html[data-page="repo-page"] .cmd{color:#00d4aa;} html[data-page="repo-page"] .arg{color:#e2c08d;} html[data-page="repo-page"] .str{color:#86efac;}
 html[data-page="repo-page"] .code-copy{
  position:absolute;top:var(--space-3);right:var(--space-3);
  display:flex;align-items:center;gap:4px;
  padding:3px 8px;background:var(--surface-off);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:10px;color:var(--muted);
  opacity:0;transition:opacity var(--transition);
}
 html[data-page="repo-page"] .code-block:hover .code-copy{opacity:1;}
 html[data-page="repo-page"] .code-copy:hover{color:var(--text);}
 html[data-page="repo-page"] .qs-note{
  margin-top:var(--space-3);font-size:var(--text-xs);color:var(--faint);
  display:flex;align-items:flex-start;gap:var(--space-2);line-height:1.5;
}

 
html[data-page="repo-page"] .features-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
 html[data-page="repo-page"] .feat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);
  display:flex;gap:var(--space-4);align-items:flex-start;
  transition:border-color var(--transition),box-shadow var(--transition);
}
 html[data-page="repo-page"] .feat:hover{border-color:var(--primary-border);box-shadow:var(--shadow-sm);}
 html[data-page="repo-page"] .feat-ico{
  width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-md);
  background:var(--primary-dim);border:1px solid var(--primary-border);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
}
 html[data-page="repo-page"] .feat-title{font-size:var(--text-sm);font-weight:600;color:var(--text);margin-bottom:2px;}
 html[data-page="repo-page"] .feat-desc{font-size:var(--text-xs);color:var(--muted);line-height:1.5;}

 
html[data-page="repo-page"] .usecases{display:flex;flex-direction:column;gap:var(--space-3);}
 html[data-page="repo-page"] .usecase{
  display:flex;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
}
 html[data-page="repo-page"] .usecase-who{flex-shrink:0;min-width:130px;font-size:var(--text-xs);font-weight:600;color:var(--primary);padding-top:2px;}
 html[data-page="repo-page"] .usecase-what{font-size:var(--text-sm);color:var(--muted);line-height:1.55;}

 
html[data-page="repo-page"] .activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
 html[data-page="repo-page"] .act-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);}
 html[data-page="repo-page"] .act-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-bottom:var(--space-2);}
 html[data-page="repo-page"] .act-val{font-size:var(--text-lg);font-weight:700;color:var(--text);letter-spacing:-.02em;}
 html[data-page="repo-page"] .act-sub{font-size:var(--text-xs);color:var(--muted);margin-top:2px;}
 html[data-page="repo-page"] .commit-graph{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-top:var(--space-3);
}
 html[data-page="repo-page"] .graph-lbl{font-size:var(--text-xs);color:var(--faint);margin-bottom:var(--space-3);}
 html[data-page="repo-page"] .graph-bars{display:flex;align-items:flex-end;gap:3px;height:48px;}
 html[data-page="repo-page"] .bar{flex:1;border-radius:2px;background:var(--primary);opacity:.25;min-height:3px;transition:opacity var(--transition);}
 html[data-page="repo-page"] .bar.high{opacity:.85;} html[data-page="repo-page"] .bar.mid{opacity:.5;}
 html[data-page="repo-page"] .bar:hover{opacity:1;}

 
html[data-page="repo-page"] .alts{display:flex;flex-direction:column;gap:var(--space-2);}
 html[data-page="repo-page"] .alt{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
}
 html[data-page="repo-page"] .alt-emoji{font-size:16px;width:28px;text-align:center;flex-shrink:0;}
 html[data-page="repo-page"] .alt-info{flex:1;min-width:0;}
 html[data-page="repo-page"] .alt-name{font-size:var(--text-sm);font-weight:600;color:var(--text);}
 html[data-page="repo-page"] .alt-desc{font-size:var(--text-xs);color:var(--muted);}
 html[data-page="repo-page"] .alt-pill{flex-shrink:0;font-size:10px;font-weight:500;padding:2px 8px;border-radius:var(--radius-full);background:var(--surface-off);color:var(--faint);}

 
html[data-page="repo-page"] .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
 html[data-page="repo-page"] .rel{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  cursor:pointer;transition:border-color var(--transition),transform var(--transition);
}
 html[data-page="repo-page"] .rel:hover{border-color:var(--primary-border);transform:translateY(-1px);}
 html[data-page="repo-page"] .rel-emoji{font-size:18px;flex-shrink:0;}
 html[data-page="repo-page"] .rel-name{font-size:var(--text-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 html[data-page="repo-page"] .rel-tag{font-size:10px;color:var(--muted);}

 
html[data-page="repo-page"] .rsidebar{position:sticky;top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);}
 html[data-page="repo-page"] .scard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;}
 html[data-page="repo-page"] .scard-head{
  padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);
}
 html[data-page="repo-page"] .scard-body{padding:var(--space-4) var(--space-5);}
 html[data-page="repo-page"] .meta-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) 0;border-bottom:1px solid var(--divider);font-size:var(--text-sm);
}
 html[data-page="repo-page"] .meta-row:last-child{border-bottom:none;}
 html[data-page="repo-page"] .meta-key{color:var(--muted);}
 html[data-page="repo-page"] .meta-val{font-weight:500;color:var(--text);font-family:var(--font-mono);font-size:var(--text-xs);}
 html[data-page="repo-page"] .meta-val.green{color:var(--primary);}
 html[data-page="repo-page"] .meta-val.link{color:var(--primary);}
 html[data-page="repo-page"] .meta-val.link:hover{text-decoration:underline;}
 html[data-page="repo-page"] .lang-bars{display:flex;height:6px;border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-4);}
 html[data-page="repo-page"] .lang-seg{height:100%;}
 html[data-page="repo-page"] .lang-list{display:flex;flex-direction:column;gap:var(--space-3);}
 html[data-page="repo-page"] .lang-item{display:flex;align-items:center;gap:var(--space-3);}
 html[data-page="repo-page"] .lang-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
 html[data-page="repo-page"] .lang-name{flex:1;font-size:var(--text-xs);color:var(--muted);}
 html[data-page="repo-page"] .lang-pct{font-size:var(--text-xs);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
 html[data-page="repo-page"] .score-ring{display:flex;align-items:center;gap:var(--space-4);}
 html[data-page="repo-page"] .score-num{font-size:var(--text-xl);font-weight:700;letter-spacing:-.03em;color:var(--primary);}
 html[data-page="repo-page"] .score-lbl{font-size:var(--text-xs);color:var(--faint);margin-top:2px;}
 html[data-page="repo-page"] .score-bars{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4);}
 html[data-page="repo-page"] .score-bar-row{display:flex;align-items:center;gap:var(--space-3);}
 html[data-page="repo-page"] .score-bar-lbl{font-size:10px;color:var(--muted);width:76px;flex-shrink:0;}
 html[data-page="repo-page"] .score-bar-track{flex:1;height:4px;background:var(--surface-off);border-radius:var(--radius-full);}
 html[data-page="repo-page"] .score-bar-fill{height:100%;border-radius:var(--radius-full);background:var(--primary);}
 html[data-page="repo-page"] .tags{display:flex;flex-wrap:wrap;gap:var(--space-2);}
 html[data-page="repo-page"] .tag{
  font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--radius-full);
  background:var(--surface-off);color:var(--faint);border:1px solid var(--border-sub);
  cursor:pointer;transition:border-color var(--transition),color var(--transition);
}
 html[data-page="repo-page"] .tag:hover{border-color:var(--primary-border);color:var(--primary);}
 html[data-page="repo-page"] .endorse{display:flex;flex-direction:column;gap:var(--space-3);}
 html[data-page="repo-page"] .endorse-item{display:flex;align-items:center;gap:var(--space-3);}
 html[data-page="repo-page"] .endorse-ava{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--surface-off);display:flex;align-items:center;justify-content:center;
  font-size:12px;border:1px solid var(--border);
}
 html[data-page="repo-page"] .endorse-name{font-size:var(--text-xs);font-weight:600;color:var(--text);}
 html[data-page="repo-page"] .endorse-role{font-size:10px;color:var(--faint);}
 html[data-page="repo-page"] .endorse-check{margin-left:auto;color:var(--primary);}

 
@media(max-width:900px){html[data-page="repo-page"] .layout{grid-template-columns:1fr;}html[data-page="repo-page"] .rsidebar{position:static;}}
@media(max-width:768px){
  html[data-page="repo-page"]{--nav-width:260px;}
   html[data-page="repo-page"] .nav{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-100%);transition:transform var(--transition);}
   html[data-page="repo-page"] .nav.open{transform:translateX(0);box-shadow:var(--shadow-lg);}
   html[data-page="repo-page"] .nav-overlay.visible{display:block;}
   html[data-page="repo-page"] .menu-btn{display:flex;}
   html[data-page="repo-page"] .page{padding:var(--space-4);}
   html[data-page="repo-page"] .topbar{padding:0 var(--space-4);}
   html[data-page="repo-page"] .hero-top{flex-direction:column;}
   html[data-page="repo-page"] .features-grid, html[data-page="repo-page"] .related-grid{grid-template-columns:1fr;}
   html[data-page="repo-page"] .activity-grid{grid-template-columns:1fr 1fr;}
   html[data-page="repo-page"] .stats-row{flex-direction:column;}
   html[data-page="repo-page"] .stat-cell{border-right:none;border-bottom:1px solid var(--border);}
   html[data-page="repo-page"] .stat-cell:last-child{border-bottom:none;}
   html[data-page="repo-page"] .breadcrumb-long{display:none;}
}

 
@keyframes repo-page-fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
 html[data-page="repo-page"] .hero{animation:repo-page-fadeUp .35s ease both;}
 html[data-page="repo-page"] .stats-row{animation:repo-page-fadeUp .35s .05s ease both;}
 html[data-page="repo-page"] .layout{animation:repo-page-fadeUp .35s .1s ease both;}
@media(prefers-reduced-motion:reduce){ html[data-page="repo-page"] .hero, html[data-page="repo-page"] .stats-row, html[data-page="repo-page"] .layout{animation:none;}}

/* ===== blog.html ===== */
/* (shared tokens from :root and content-pages group above) */

html[data-page="blog"][data-theme="dark"]{
  --bg:#0c0d0e;--surface:#111213;--surface-2:#161718;
  --surface-off:#1a1b1c;--surface-off2:#1e2021;
  --divider:#222426;--border:#282b2d;--border-light:#202224;
  --text:#dddcda;--text-2:#a8a7a4;--text-3:#565855;
  --primary:#1fd6b0;--primary-d:#14a888;
  --primary-dim:rgba(31,214,176,.1);--primary-border:rgba(31,214,176,.18);
  --warm:#d4a847;--warm-dim:rgba(212,168,71,.1);
  --blue:#6fa3d4;--blue-dim:rgba(111,163,212,.1);
  --rose:#d47070;--rose-dim:rgba(212,112,112,.1);
  --violet:#a87fd4;--violet-dim:rgba(168,127,212,.1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px rgba(0,0,0,.65);
}
html[data-page="blog"][data-theme="light"]{
  --bg:#f5f4f1;--surface:#fefefe;--surface-2:#f9f8f6;
  --surface-off:#f0eeea;--surface-off2:#e8e6e2;
  --divider:#e4e2de;--border:#dbd9d5;--border-light:#e8e6e2;
  --text:#1a1917;--text-2:#6b6a67;--text-3:#b0afa9;
  --primary:#0a8f78;--primary-d:#077060;
  --primary-dim:rgba(10,143,120,.09);--primary-border:rgba(10,143,120,.2);
  --warm:#a07820;--warm-dim:rgba(160,120,32,.09);
  --blue:#3a6fa0;--blue-dim:rgba(58,111,160,.09);
  --rose:#a04040;--rose-dim:rgba(160,64,64,.09);
  --violet:#7040a0;--violet-dim:rgba(112,64,160,.09);
  --shadow-sm:0 1px 3px rgba(0,0,0,.07);
  --shadow-md:0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
}

 html[data-page="blog"] *, html[data-page="blog"] *::before, html[data-page="blog"] *::after{box-sizing:border-box;margin:0;padding:0;}
html[data-page="blog"] body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
 html[data-page="blog"] body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg);overflow:hidden;line-height:1.6;}
 html[data-page="blog"] button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
 html[data-page="blog"] a{color:inherit;text-decoration:none;}
 html[data-page="blog"] img, html[data-page="blog"] svg{display:block;}
 html[data-page="blog"] :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm);}
 html[data-page="blog"] ::selection{background:var(--primary-dim);color:var(--text);}

/* blog — layout shell */
html[data-page="blog"] .app{display:flex;height:100dvh;overflow:hidden;background:var(--bg);}
html[data-page="blog"] .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
html[data-page="blog"] .content{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-8);}
html[data-page="blog"] .page{max-width:1100px;margin:0 auto;}

/* blog — nav */
html[data-page="blog"] .nav{width:var(--nav-width);min-width:var(--nav-width);height:100dvh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;}
html[data-page="blog"] .nav-logo{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-3);cursor:pointer;}
html[data-page="blog"] .logo-name{font-size:var(--text-sm);font-weight:800;color:var(--text);letter-spacing:-.02em;}
html[data-page="blog"] .logo-name span{color:var(--primary);}
html[data-page="blog"] .logo-tag{font-size:10px;color:var(--text-3);margin-top:1px;}
html[data-page="blog"] .nav-sep{height:1px;background:var(--border);margin:var(--space-2) 0;}
html[data-page="blog"] .nav-group{padding:var(--space-3) 0 var(--space-1);}
html[data-page="blog"] .nav-lbl{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;padding:0 var(--space-4) var(--space-2);}
html[data-page="blog"] .nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);font-size:var(--text-xs);color:var(--text-2);border-radius:var(--radius-md);margin:0 var(--space-2);cursor:pointer;transition:all var(--transition);position:relative;}
html[data-page="blog"] .nav-item:hover{color:var(--text);background:var(--surface-off);}
html[data-page="blog"] .nav-item.active{color:var(--primary);background:var(--primary-dim);font-weight:600;}
html[data-page="blog"] .nav-count{margin-left:auto;font-size:10px;color:var(--text-3);background:var(--surface-off);padding:1px 6px;border-radius:var(--radius-full);}
html[data-page="blog"] .nav-item.active .nav-count{color:var(--primary);background:var(--primary-dim);}
html[data-page="blog"] .nav-footer{margin-top:auto;padding:var(--space-4);border-top:1px solid var(--border);}
html[data-page="blog"] .nav-footer-txt{font-size:10px;color:var(--text-3);line-height:1.6;}
html[data-page="blog"] .nav-footer-link{color:var(--primary);opacity:.7;transition:opacity var(--transition);}
html[data-page="blog"] .nav-footer-link:hover{opacity:1;}
html[data-page="blog"] .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;}

/* blog — topbar */
html[data-page="blog"] .topbar{height:var(--header-height);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5);background:var(--surface);flex-shrink:0;}
html[data-page="blog"] .menu-btn{display:none;}
html[data-page="blog"] .icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--text-2);transition:all var(--transition);}
html[data-page="blog"] .icon-btn:hover{background:var(--surface-off);color:var(--text);}
html[data-page="blog"] .bc{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--text-3);}
html[data-page="blog"] .bc a:hover{color:var(--text);}
html[data-page="blog"] .bc-cur{color:var(--text-2);font-weight:500;}
html[data-page="blog"] .topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
html[data-page="blog"] .sub-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--primary-dim);color:var(--primary);border:1px solid var(--primary-border);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;transition:all var(--transition);}
html[data-page="blog"] .sub-btn:hover{background:var(--primary);color:#fff;}

/* blog — page header */
html[data-page="blog"] .page-header{margin-bottom:var(--space-6);}
html[data-page="blog"] .page-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-5);}
html[data-page="blog"] .page-title{font-size:var(--text-xl);font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1.1;}
html[data-page="blog"] .page-title em{font-style:normal;color:var(--primary);}
html[data-page="blog"] .page-subtitle{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;max-width:540px;margin-top:var(--space-3);}
html[data-page="blog"] .page-stats{display:flex;gap:var(--space-5);flex-shrink:0;}
html[data-page="blog"] .page-stat{text-align:right;}
html[data-page="blog"] .page-stat-num{font-size:var(--text-lg);font-weight:800;color:var(--text);letter-spacing:-.03em;}
html[data-page="blog"] .page-stat-lbl{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-top:1px;}

/* blog — filter row */
html[data-page="blog"] .filter-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
html[data-page="blog"] .ftab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);color:var(--text-2);border-radius:var(--radius-full);border:1px solid transparent;cursor:pointer;transition:all var(--transition);white-space:nowrap;}
html[data-page="blog"] .ftab:hover{color:var(--text);background:var(--surface-off);}
html[data-page="blog"] .ftab.on{color:var(--text);background:var(--surface-off);border-color:var(--border);font-weight:600;}
html[data-page="blog"] .ftab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
html[data-page="blog"] .filter-right{margin-left:auto;}
html[data-page="blog"] .sort-select{background:var(--surface-off);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);color:var(--text-2);cursor:pointer;outline:none;}

/* blog — layout grid */
html[data-page="blog"] .blog-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--space-8);align-items:start;}

/* blog — hero post */
html[data-page="blog"] .hero-post{border:1px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;cursor:pointer;background:var(--surface);margin-bottom:var(--space-5);transition:border-color var(--transition),box-shadow var(--transition);}
html[data-page="blog"] .hero-post:hover{border-color:var(--primary-border);box-shadow:var(--shadow-md);}
html[data-page="blog"] .hero-visual{height:180px;background:var(--surface-2);position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
html[data-page="blog"] .hero-visual-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%, var(--primary-dim) 0%, transparent 60%),radial-gradient(ellipse at 80% 20%, var(--blue-dim) 0%, transparent 50%);}
html[data-page="blog"] .hero-rank-list{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);}
html[data-page="blog"] .hero-body{padding:var(--space-5) var(--space-6);}
html[data-page="blog"] .hero-cat{display:flex;align-items:center;gap:var(--space-2);font-size:10px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3);}
html[data-page="blog"] .hero-cat-bar{width:16px;height:2px;background:var(--primary);border-radius:1px;}
html[data-page="blog"] .hero-title{font-size:var(--text-lg);font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.3;margin-bottom:var(--space-3);}
html[data-page="blog"] .hero-title em{font-style:normal;color:var(--primary);}
html[data-page="blog"] .hero-excerpt{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;margin-bottom:var(--space-4);}
html[data-page="blog"] .hero-foot{display:flex;align-items:center;gap:var(--space-4);}
html[data-page="blog"] .hero-date{font-size:var(--text-xs);color:var(--text-3);}
html[data-page="blog"] .hero-read{display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--text-3);}
html[data-page="blog"] .hero-views{display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--text-3);}

/* blog — rank rows inside hero */
html[data-page="blog"] .rank-row{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);}
html[data-page="blog"] .rank-n{width:16px;font-size:10px;color:var(--text-3);font-weight:600;flex-shrink:0;}
html[data-page="blog"] .rank-ico{font-size:14px;flex-shrink:0;}
html[data-page="blog"] .rank-name{color:var(--text);font-weight:600;font-size:var(--text-xs);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-page="blog"] .rank-stars{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--warm);flex-shrink:0;}
html[data-page="blog"] .rank-bar{height:2px;background:var(--primary);border-radius:1px;opacity:.4;position:absolute;bottom:0;left:0;}

/* blog — post list rows */
html[data-page="blog"] .post-list{display:flex;flex-direction:column;gap:var(--space-2);}
html[data-page="blog"] .post-row{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition);}
html[data-page="blog"] .post-row:hover{border-color:var(--primary-border);box-shadow:var(--shadow-sm);}
html[data-page="blog"] .post-row.featured-inline{border-color:var(--primary-border);background:var(--primary-dim);}
html[data-page="blog"] .post-row-num{font-size:var(--text-sm);font-weight:800;color:var(--text-3);font-variant-numeric:tabular-nums;flex-shrink:0;padding-top:2px;width:24px;}
html[data-page="blog"] .post-row-body{flex:1;min-width:0;}
html[data-page="blog"] .post-row-cats{display:flex;gap:var(--space-2);margin-bottom:var(--space-2);}
html[data-page="blog"] .post-row-title{font-size:var(--text-sm);font-weight:700;color:var(--text);line-height:1.4;margin-bottom:var(--space-2);}
html[data-page="blog"] .post-row-title em{font-style:normal;color:var(--primary);}
html[data-page="blog"] .post-row-excerpt{font-size:var(--text-xs);color:var(--text-2);line-height:1.5;margin-bottom:var(--space-3);}
html[data-page="blog"] .post-row-meta{display:flex;align-items:center;gap:var(--space-3);}
html[data-page="blog"] .meta-txt{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-3);}
html[data-page="blog"] .meta-sep{width:3px;height:3px;border-radius:50%;background:var(--text-3);opacity:.4;}
html[data-page="blog"] .meta-views{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-3);}
html[data-page="blog"] .post-row-aside{flex-shrink:0;display:flex;align-items:center;padding-top:var(--space-1);}
html[data-page="blog"] .post-row-arrow{color:var(--text-3);transition:transform var(--transition),color var(--transition);}
html[data-page="blog"] .post-row:hover .post-row-arrow{color:var(--primary);transform:translateX(3px);}

/* blog — category pills */
html[data-page="blog"] .cat-pill{display:inline-flex;align-items:center;padding:1px var(--space-2);font-size:10px;font-weight:700;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em;}
html[data-page="blog"] .cat-ai{background:var(--primary-dim);color:var(--primary);}
html[data-page="blog"] .cat-tools{background:var(--blue-dim);color:var(--blue);}
html[data-page="blog"] .cat-tutorial{background:var(--warm-dim);color:var(--warm);}
html[data-page="blog"] .cat-review{background:var(--rose-dim);color:var(--rose);}
html[data-page="blog"] .cat-list{background:var(--surface-off);color:var(--text-3);}

/* blog — right sidebar */
html[data-page="blog"] .sidebar{display:flex;flex-direction:column;gap:var(--space-4);position:sticky;top:0;}
html[data-page="blog"] .scard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;}
html[data-page="blog"] .scard-head{padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:700;color:var(--text);border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;}
html[data-page="blog"] .scard-more{font-weight:500;color:var(--primary);font-size:10px;cursor:pointer;opacity:.7;}
html[data-page="blog"] .scard-more:hover{opacity:1;}
html[data-page="blog"] .scard-body{padding:var(--space-3) var(--space-4);}

/* blog — popular list */
html[data-page="blog"] .pop-list{display:flex;flex-direction:column;gap:var(--space-1);}
html[data-page="blog"] .pop-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-2) var(--space-1);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition);}
html[data-page="blog"] .pop-item:hover{background:var(--surface-off);}
html[data-page="blog"] .pop-n{font-size:10px;font-weight:800;color:var(--text-3);width:18px;flex-shrink:0;padding-top:1px;}
html[data-page="blog"] .pop-title{font-size:var(--text-xs);color:var(--text);font-weight:500;line-height:1.4;margin-bottom:2px;}
html[data-page="blog"] .pop-meta{font-size:10px;color:var(--text-3);}

/* blog — topics */
html[data-page="blog"] .topic-list{display:flex;flex-direction:column;}
html[data-page="blog"] .topic-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-1);border-bottom:1px solid var(--border-light);}
html[data-page="blog"] .topic-row:last-child{border-bottom:none;}
html[data-page="blog"] .topic-name{font-size:var(--text-xs);color:var(--text-2);}
html[data-page="blog"] .topic-cnt{font-size:10px;color:var(--text-3);background:var(--surface-off);padding:1px 6px;border-radius:var(--radius-full);}

/* blog — repo rows in sidebar */
html[data-page="blog"] .repo-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-1);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition);}
html[data-page="blog"] .repo-row:hover{background:var(--surface-off);}
html[data-page="blog"] .repo-ico{font-size:16px;flex-shrink:0;}
html[data-page="blog"] .repo-rname{font-size:var(--text-xs);font-weight:600;color:var(--text);}
html[data-page="blog"] .repo-rdesc{font-size:10px;color:var(--text-3);}
html[data-page="blog"] .repo-rstar{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--warm);margin-left:auto;flex-shrink:0;}

/* blog — newsletter sidebar block */
html[data-page="blog"] .nl-block{background:var(--primary-dim);border:1px solid var(--primary-border);border-radius:var(--radius-xl);padding:var(--space-5);}
html[data-page="blog"] .nl-title{font-size:var(--text-sm);font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.3;margin-bottom:var(--space-2);}
html[data-page="blog"] .nl-desc{font-size:var(--text-xs);color:var(--text-2);margin-bottom:var(--space-3);line-height:1.5;}
html[data-page="blog"] .nl-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--text);outline:none;margin-bottom:var(--space-2);transition:border-color var(--transition);}
html[data-page="blog"] .nl-input:focus{border-color:var(--primary);}
html[data-page="blog"] .nl-input::placeholder{color:var(--text-3);}
html[data-page="blog"] .nl-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:700;cursor:pointer;border:none;transition:background var(--transition);}
html[data-page="blog"] .nl-btn:hover{background:var(--primary-d);}
html[data-page="blog"] .nl-note{font-size:10px;color:var(--text-3);margin-top:var(--space-2);text-align:center;}

/* blog — subscribe section */
html[data-page="blog"] .subscribe-section{display:flex;gap:var(--space-8);align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--space-8);margin-top:var(--space-6);}
html[data-page="blog"] .sub-left{flex:1;}
html[data-page="blog"] .sub-eyebrow{font-size:var(--text-xs);font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3);}
html[data-page="blog"] .sub-title{font-size:var(--text-lg);font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1.2;margin-bottom:var(--space-3);}
html[data-page="blog"] .sub-desc{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;}
html[data-page="blog"] .sub-form{flex:1;display:flex;flex-direction:column;gap:var(--space-3);}
html[data-page="blog"] .sub-input{background:var(--surface-off);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--text);outline:none;transition:border-color var(--transition);}
html[data-page="blog"] .sub-input:focus{border-color:var(--primary);}
html[data-page="blog"] .sub-input::placeholder{color:var(--text-3);}
html[data-page="blog"] .sub-submit{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--primary);color:#fff;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:700;cursor:pointer;border:none;transition:background var(--transition);}
html[data-page="blog"] .sub-submit:hover{background:var(--primary-d);}
html[data-page="blog"] .sub-note{font-size:var(--text-xs);color:var(--text-3);}

/* blog — responsive */
@media(max-width:1024px){
  html[data-page="blog"] .blog-layout{grid-template-columns:1fr;}
  html[data-page="blog"] .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
}
@media(max-width:768px){
  html[data-page="blog"] .nav{position:fixed;left:-100%;top:0;z-index:50;transition:left var(--transition);}
  html[data-page="blog"] .nav.open{left:0;}
  html[data-page="blog"] .nav-overlay.visible{display:block;}
  html[data-page="blog"] .menu-btn{display:flex;}
  html[data-page="blog"] .content{padding:var(--space-4);}
  html[data-page="blog"] .page-header-top{flex-direction:column;}
  html[data-page="blog"] .page-stats{align-self:flex-start;}
  html[data-page="blog"] .subscribe-section{flex-direction:column;gap:var(--space-5);padding:var(--space-5);}
  html[data-page="blog"] .sidebar{grid-template-columns:1fr;}
}

/* ===== article.html ===== */
/* (shared tokens from :root and content-pages group above) */

html[data-page="article"][data-theme="dark"]{
  --bg:#0c0d0e;--surface:#111213;--surface-2:#161718;
  --surface-off:#1a1b1c;--surface-off2:#1e2021;
  --divider:#222426;--border:#282b2d;--border-light:#202224;
  --text:#dddcda;--text-2:#a8a7a4;--text-3:#565855;
  --primary:#1fd6b0;--primary-d:#14a888;
  --primary-dim:rgba(31,214,176,.09);--primary-border:rgba(31,214,176,.18);
  --warm:#d4a847;--warm-dim:rgba(212,168,71,.1);
  --blue:#6fa3d4;--blue-dim:rgba(111,163,212,.1);
  --rose:#d47070;--rose-dim:rgba(212,112,112,.1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px rgba(0,0,0,.65);
  --code-bg:#161a1d;--code-border:#232729;
}
html[data-page="article"][data-theme="light"]{
  --bg:#f5f4f1;--surface:#fefefe;--surface-2:#f9f8f6;
  --surface-off:#f0eeea;--surface-off2:#e8e6e2;
  --divider:#e4e2de;--border:#dbd9d5;--border-light:#e8e6e2;
  --text:#1a1917;--text-2:#6b6a67;--text-3:#b0afa9;
  --primary:#0a8f78;--primary-d:#077060;
  --primary-dim:rgba(10,143,120,.09);--primary-border:rgba(10,143,120,.2);
  --warm:#a07820;--warm-dim:rgba(160,120,32,.09);
  --blue:#3a6fa0;--blue-dim:rgba(58,111,160,.09);
  --rose:#a04040;--rose-dim:rgba(160,64,64,.09);
  --shadow-sm:0 1px 3px rgba(0,0,0,.07);
  --shadow-md:0 4px 20px rgba(0,0,0,.09);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --code-bg:#f0f0ed;--code-border:#e2e0dc;
}
 html[data-page="article"] *, html[data-page="article"] *::before, html[data-page="article"] *::after{box-sizing:border-box;margin:0;padding:0;}
html[data-page="article"] body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:80px;}
 html[data-page="article"] body{font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg);overflow:hidden;line-height:1.6;}
 html[data-page="article"] button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
 html[data-page="article"] a{color:inherit;text-decoration:none;}
 html[data-page="article"] img, html[data-page="article"] svg{display:block;}
 html[data-page="article"] :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm);}
 html[data-page="article"] ::selection{background:var(--primary-dim);color:var(--text);}

 
html[data-page="article"] .app{display:flex;height:100dvh;overflow:hidden;}

 
html[data-page="article"] .nav{width:var(--nav-width);min-width:var(--nav-width);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100dvh;overflow-y:auto;z-index:20;}
 html[data-page="article"] .nav-logo{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5);height:var(--header-height);flex-shrink:0;border-bottom:1px solid var(--border);cursor:pointer;}
 html[data-page="article"] .logo-name{font-size:15px;font-weight:800;letter-spacing:-.04em;color:var(--text);}
 html[data-page="article"] .logo-name span{color:var(--primary);}
 html[data-page="article"] .logo-tag{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-top:1px;}
 html[data-page="article"] .nav-group{padding:var(--space-4) 0 var(--space-2);}
 html[data-page="article"] .nav-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--text-3);padding:0 var(--space-5) var(--space-2);}
 html[data-page="article"] .nav-item{display:flex;align-items:center;gap:10px;padding:5px var(--space-5);font-size:var(--text-sm);color:var(--text-2);cursor:pointer;position:relative;transition:color var(--transition),background var(--transition);}
 html[data-page="article"] .nav-item:hover{color:var(--text);background:var(--surface-off);}
 html[data-page="article"] .nav-item.active{color:var(--primary);background:var(--primary-dim);font-weight:600;}
 html[data-page="article"] .nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:16px;background:var(--primary);border-radius:0 2px 2px 0;}
 html[data-page="article"] .nav-count{margin-left:auto;font-size:9px;color:var(--text-3);font-weight:600;}
 html[data-page="article"] .nav-sep{height:1px;background:var(--border);margin:var(--space-3) 0;}
 html[data-page="article"] .nav-footer{margin-top:auto;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);}
 html[data-page="article"] .nav-footer-txt{font-size:10px;color:var(--text-3);line-height:1.7;}
 html[data-page="article"] .nav-footer-link{color:var(--primary);}
 html[data-page="article"] .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10;}

 
html[data-page="article"] .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

 
html[data-page="article"] .topbar{height:var(--header-height);flex-shrink:0;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-8);position:relative;z-index:5;}
 html[data-page="article"] .menu-btn{display:none;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--text-2);}
 html[data-page="article"] .menu-btn:hover{background:var(--surface-off);}
 html[data-page="article"] .bc{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-2);}
 html[data-page="article"] .bc a:hover{color:var(--text);}
 html[data-page="article"] .bc-cur{color:var(--text);font-weight:600;}
 html[data-page="article"] .topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
 html[data-page="article"] .icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--text-2);transition:background var(--transition),color var(--transition);}
 html[data-page="article"] .icon-btn:hover{background:var(--surface-off);color:var(--text);}
 html[data-page="article"] .back-btn{display:flex;align-items:center;gap:6px;padding:6px var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:600;color:var(--text-2);transition:all var(--transition);}
 html[data-page="article"] .back-btn:hover{border-color:var(--primary);color:var(--primary);}

 
html[data-page="article"] .read-progress{position:fixed;top:0;left:var(--nav-width);right:0;height:2px;background:var(--primary);transform-origin:left;transform:scaleX(0);z-index:100;transition:transform .1s linear;}

 
html[data-page="article"] .content{flex:1;overflow-y:auto;scroll-behavior:smooth;}
 html[data-page="article"] .content::-webkit-scrollbar{width:4px;}
 html[data-page="article"] .content::-webkit-scrollbar-track{background:transparent;}
 html[data-page="article"] .content::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

 
html[data-page="article"] .article-wrap{max-width:1080px;margin:0 auto;padding:0 var(--space-8) var(--space-16);}

 
html[data-page="article"] .art-header{
  padding:var(--space-12) 0 var(--space-10);
  border-bottom:1px solid var(--border);
  margin-bottom:0;
}
 html[data-page="article"] .art-cat-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);}
 html[data-page="article"] .art-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:3px 10px;border-radius:var(--radius-full);background:var(--primary-dim);color:var(--primary);}
 html[data-page="article"] .art-cat-sep{width:4px;height:4px;border-radius:50%;background:var(--border);}
 html[data-page="article"] .art-cat-date{font-size:var(--text-xs);color:var(--text-3);}
 html[data-page="article"] .art-title{
  font-family:var(--font-serif);
  font-size:var(--text-3xl);
  font-weight:700;
  color:var(--text);
  line-height:1.1;
  letter-spacing:-.03em;
  max-width:18ch;
  margin-bottom:var(--space-5);
}
 html[data-page="article"] .art-title em{color:var(--primary);font-style:italic;}
 html[data-page="article"] .art-lead{
  font-size:var(--text-md);
  color:var(--text-2);
  line-height:1.7;
  max-width:58ch;
  margin-bottom:var(--space-6);
}
 html[data-page="article"] .art-meta-row{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;}
 html[data-page="article"] .art-author{display:flex;align-items:center;gap:var(--space-3);}
 html[data-page="article"] .art-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--blue));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#0a0e0d;flex-shrink:0;}
 html[data-page="article"] .art-author-name{font-size:var(--text-sm);font-weight:700;color:var(--text);}
 html[data-page="article"] .art-author-role{font-size:10px;color:var(--text-3);}
 html[data-page="article"] .art-divider{width:1px;height:24px;background:var(--border);}
 html[data-page="article"] .art-stat{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--text-3);}
 html[data-page="article"] .art-share-row{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
 html[data-page="article"] .share-btn{display:flex;align-items:center;gap:5px;padding:5px var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);font-size:10px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all var(--transition);}
 html[data-page="article"] .share-btn:hover{border-color:var(--primary);color:var(--primary);}
 html[data-page="article"] .bookmark-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-2);cursor:pointer;transition:all var(--transition);}
 html[data-page="article"] .bookmark-btn:hover, html[data-page="article"] .bookmark-btn.saved{border-color:var(--primary);color:var(--primary);}

 
html[data-page="article"] .art-body-grid{
  display:grid;
  grid-template-columns:1fr 240px;
  gap:var(--space-12);
  padding-top:var(--space-10);
  align-items:start;
}

 
html[data-page="article"] .toc{position:sticky;top:var(--space-8);}
 html[data-page="article"] .toc-head{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin-bottom:var(--space-4);}
 html[data-page="article"] .toc-list{display:flex;flex-direction:column;gap:2px;}
 html[data-page="article"] .toc-item{font-size:var(--text-xs);color:var(--text-3);cursor:pointer;padding:4px var(--space-3);border-left:2px solid var(--border);line-height:1.4;transition:color var(--transition),border-color var(--transition);}
 html[data-page="article"] .toc-item:hover{color:var(--text-2);border-color:var(--text-3);}
 html[data-page="article"] .toc-item.active{color:var(--primary);border-color:var(--primary);font-weight:600;}
 html[data-page="article"] .toc-sub{font-size:10px;padding-left:var(--space-4);color:var(--text-3);}
 html[data-page="article"] .toc-sep{height:1px;background:var(--border);margin:var(--space-4) 0;}
 html[data-page="article"] .toc-stat-block{display:flex;flex-direction:column;gap:var(--space-3);}
 html[data-page="article"] .toc-stat{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--text-3);}
 html[data-page="article"] .toc-progress-wrap{margin-top:var(--space-2);}
 html[data-page="article"] .toc-progress-lbl{font-size:9px;color:var(--text-3);margin-bottom:var(--space-2);}
 html[data-page="article"] .toc-progress-bar{height:2px;background:var(--border);border-radius:1px;overflow:hidden;}
 html[data-page="article"] .toc-progress-fill{height:100%;background:var(--primary);border-radius:1px;width:0%;transition:width .2s;}

 
html[data-page="article"] .prose{max-width:68ch;}
 html[data-page="article"] .prose h2{
  font-family:var(--font-serif);
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--text);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-top:var(--space-12);
  margin-bottom:var(--space-4);
  scroll-margin-top:80px;
}
 html[data-page="article"] .prose h3{
  font-family:var(--font-body);
  font-size:var(--text-lg);
  font-weight:700;
  color:var(--text);
  line-height:1.3;
  margin-top:var(--space-8);
  margin-bottom:var(--space-3);
  scroll-margin-top:80px;
}
 html[data-page="article"] .prose p{
  font-size:var(--text-md);
  color:var(--text-2);
  line-height:1.8;
  margin-bottom:var(--space-5);
}
 html[data-page="article"] .prose p strong{color:var(--text);font-weight:700;}
 html[data-page="article"] .prose p em{color:var(--primary);font-style:italic;}
 html[data-page="article"] .prose p a{color:var(--primary);border-bottom:1px solid var(--primary-border);transition:border-color var(--transition);}
 html[data-page="article"] .prose p a:hover{border-color:var(--primary);}

 
html[data-page="article"] .repo-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:var(--space-5) var(--space-6);
  margin:var(--space-6) 0;
  cursor:pointer;
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
 html[data-page="article"] .repo-card:hover{border-color:var(--primary-border);box-shadow:var(--shadow-md);transform:translateY(-1px);}
 html[data-page="article"] .repo-card-head{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-3);}
 html[data-page="article"] .repo-card-ico{font-size:28px;line-height:1;flex-shrink:0;}
 html[data-page="article"] .repo-card-info{}
 html[data-page="article"] .repo-card-name{font-size:var(--text-sm);font-weight:800;color:var(--text);letter-spacing:-.01em;}
 html[data-page="article"] .repo-card-path{font-size:var(--text-xs);color:var(--text-3);margin-top:2px;}
 html[data-page="article"] .repo-card-badges{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
 html[data-page="article"] .badge{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-3);background:var(--surface-off);border:1px solid var(--border);padding:3px 8px;border-radius:var(--radius-full);font-variant-numeric:tabular-nums;font-weight:600;}
 html[data-page="article"] .badge.star{color:var(--warm);}
 html[data-page="article"] .badge.forks{color:var(--blue);}
 html[data-page="article"] .repo-card-desc{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;margin-bottom:var(--space-4);}
 html[data-page="article"] .repo-card-why{
  background:var(--primary-dim);
  border-left:2px solid var(--primary);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-xs);
  color:var(--text-2);
  line-height:1.6;
}
 html[data-page="article"] .repo-card-why strong{color:var(--primary);font-weight:700;}
 html[data-page="article"] .repo-card-foot{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);}
 html[data-page="article"] .repo-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:var(--radius-full);background:var(--surface-off);color:var(--text-3);}
 html[data-page="article"] .repo-link{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:700;color:var(--primary);}
 html[data-page="article"] .repo-link:hover{text-decoration:underline;}

 
html[data-page="article"] .callout{border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:var(--space-6) 0;display:flex;gap:var(--space-3);}
 html[data-page="article"] .callout-icon{font-size:16px;flex-shrink:0;line-height:1.5;}
 html[data-page="article"] .callout-title{font-size:var(--text-sm);font-weight:700;color:var(--text);margin-bottom:var(--space-1);}
 html[data-page="article"] .callout-text{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;}
 html[data-page="article"] .callout.tip{background:var(--primary-dim);border:1px solid var(--primary-border);}
 html[data-page="article"] .callout.warn{background:var(--warm-dim);border:1px solid rgba(212,168,71,.2);}
 html[data-page="article"] .callout.info{background:var(--blue-dim);border:1px solid rgba(111,163,212,.15);}

 
html[data-page="article"] .code-block{background:var(--code-bg);border:1px solid var(--code-border);border-radius:var(--radius-lg);overflow:hidden;margin:var(--space-5) 0;}
 html[data-page="article"] .code-header{display:flex;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--code-border);}
 html[data-page="article"] .code-lang{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);}
 html[data-page="article"] .code-copy{margin-left:auto;font-size:10px;color:var(--text-3);cursor:pointer;display:flex;align-items:center;gap:4px;transition:color var(--transition);}
 html[data-page="article"] .code-copy:hover{color:var(--primary);}
 html[data-page="article"] .code-body{padding:var(--space-4) var(--space-5);overflow-x:auto;}
 html[data-page="article"] .code-body pre{font-family:'JetBrains Mono','Fira Code','Courier New',monospace;font-size:12px;line-height:1.7;color:var(--text-2);}
 html[data-page="article"] .code-body pre .kw{color:var(--primary);}
 html[data-page="article"] .code-body pre .str{color:var(--warm);}
 html[data-page="article"] .code-body pre .cm{color:var(--text-3);}

 
html[data-page="article"] .section-divider{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-10) 0;}
 html[data-page="article"] .sd-line{flex:1;height:1px;background:var(--border);}
 html[data-page="article"] .sd-num{font-family:var(--font-serif);font-size:var(--text-lg);font-weight:700;color:var(--text-3);font-style:italic;}

 
html[data-page="article"] .related-section{padding:var(--space-10) 0;border-top:1px solid var(--border);margin-top:var(--space-12);}
 html[data-page="article"] .section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin-bottom:var(--space-6);}
 html[data-page="article"] .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);}
 html[data-page="article"] .rel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-5);cursor:pointer;transition:border-color var(--transition),transform var(--transition);}
 html[data-page="article"] .rel-card:hover{border-color:var(--primary-border);transform:translateY(-2px);}
 html[data-page="article"] .rel-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:var(--space-3);}
 html[data-page="article"] .rel-title{font-family:var(--font-serif);font-size:var(--text-base);font-weight:600;color:var(--text);line-height:1.35;margin-bottom:var(--space-3);}
 html[data-page="article"] .rel-meta{font-size:10px;color:var(--text-3);display:flex;align-items:center;gap:var(--space-3);}

 
html[data-page="article"] .bottom-cta{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-2xl);padding:var(--space-10) var(--space-12);
  margin-top:var(--space-4);
  display:grid;grid-template-columns:1fr auto;gap:var(--space-10);align-items:center;
}
 html[data-page="article"] .cta-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:var(--space-3);}
 html[data-page="article"] .cta-title{font-family:var(--font-serif);font-size:var(--text-xl);font-weight:700;color:var(--text);line-height:1.18;letter-spacing:-.02em;margin-bottom:var(--space-3);}
 html[data-page="article"] .cta-desc{font-size:var(--text-sm);color:var(--text-2);line-height:1.65;max-width:44ch;}
 html[data-page="article"] .cta-form{display:flex;flex-direction:column;gap:var(--space-3);min-width:256px;}
 html[data-page="article"] .cta-input{background:var(--surface-off);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--text);font-family:var(--font-body);outline:none;transition:border-color var(--transition),box-shadow var(--transition);}
 html[data-page="article"] .cta-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim);}
 html[data-page="article"] .cta-input::placeholder{color:var(--text-3);}
 html[data-page="article"] .cta-submit{display:flex;align-items:center;justify-content:center;gap:6px;padding:var(--space-3) var(--space-5);background:var(--primary);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:700;color:#060e0c;cursor:pointer;transition:background var(--transition);}
 html[data-page="article"] .cta-submit:hover{background:var(--primary-d);}
 html[data-page="article"] .cta-note{font-size:10px;color:var(--text-3);text-align:center;}

@keyframes article-fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
 html[data-page="article"] .art-header{animation:article-fadeUp .35s ease both;}
 html[data-page="article"] .art-body-grid{animation:article-fadeUp .35s .08s ease both;}
@media(prefers-reduced-motion:reduce){ html[data-page="article"] .art-header, html[data-page="article"] .art-body-grid{animation:none;}}

@media(max-width:1024px){
   html[data-page="article"] .art-body-grid{grid-template-columns:1fr;}
   html[data-page="article"] .toc{display:none;}
   html[data-page="article"] .related-grid{grid-template-columns:repeat(2,1fr);}
   html[data-page="article"] .art-title{font-size:var(--text-2xl);max-width:100%;}
}
@media(max-width:768px){
  html[data-page="article"]{--nav-width:260px;}
   html[data-page="article"] .nav{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform var(--transition);box-shadow:var(--shadow-lg);}
   html[data-page="article"] .nav.open{transform:translateX(0);}
   html[data-page="article"] .nav-overlay.visible{display:block;}
   html[data-page="article"] .menu-btn{display:flex;}
   html[data-page="article"] .topbar{padding:0 var(--space-4);}
   html[data-page="article"] .article-wrap{padding:0 var(--space-4) var(--space-10);}
   html[data-page="article"] .art-share-row{display:none;}
   html[data-page="article"] .related-grid{grid-template-columns:1fr;}
   html[data-page="article"] .bottom-cta{grid-template-columns:1fr;}
   html[data-page="article"] .read-progress{left:0;}
}


/* ===== admin.html ===== */
/* Admin uses its own compact token names scoped to html[data-page="admin"] */
html[data-page="admin"]{
  --font:'Manrope','Inter',sans-serif;
  --xs:clamp(.7rem,.65rem + .2vw,.8rem);
  --sm:clamp(.8rem,.76rem + .22vw,.9rem);
  --base:clamp(.9rem,.86rem + .2vw,1rem);
  --lg:clamp(1rem,.95rem + .25vw,1.15rem);
  --xl:clamp(1.2rem,1rem + .8vw,1.6rem);
  --2xl:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);
  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;
  --sp5:1.25rem;--sp6:1.5rem;--sp8:2rem;--sp10:2.5rem;--sp12:3rem;
  --r-sm:.25rem;--r-md:.375rem;--r-lg:.625rem;--r-xl:.875rem;--r-2xl:1.125rem;--r-full:9999px;
  --ease:150ms cubic-bezier(.16,1,.3,1);
  --nav:220px;--h:48px;
}
html[data-page="admin"][data-theme="dark"]{
  --bg:#0b0c0d;--surf:#111213;--surf2:#161718;--surf3:#1a1b1c;--surf4:#1e2021;
  --div:#222426;--bdr:#282b2d;
  --tx:#d8d7d5;--tx2:#a0a09e;--tx3:#555754;
  --p:#1fd6b0;--pd:#14a888;--pdim:rgba(31,214,176,.08);--pbdr:rgba(31,214,176,.16);
  --warm:#d4a847;--wdim:rgba(212,168,71,.1);
  --blue:#6fa3d4;--bdim:rgba(111,163,212,.1);
  --rose:#d47070;--rdim:rgba(212,112,112,.1);
  --violet:#a87fd4;--vdim:rgba(168,127,212,.1);
  --green:#6daa45;--gdim:rgba(109,170,69,.1);
  --sh-sm:0 1px 3px rgba(0,0,0,.45);--sh-md:0 4px 20px rgba(0,0,0,.55);--sh-lg:0 12px 40px rgba(0,0,0,.7);
  --chart-grid:rgba(255,255,255,.04);
}
html[data-page="admin"][data-theme="light"]{
  --bg:#f4f3f0;--surf:#fefefe;--surf2:#f9f8f6;--surf3:#f2f1ee;--surf4:#eceae6;
  --div:#e4e2de;--bdr:#d8d6d2;
  --tx:#1a1917;--tx2:#68676a;--tx3:#b2b1ac;
  --p:#0a8f78;--pd:#077060;--pdim:rgba(10,143,120,.08);--pbdr:rgba(10,143,120,.18);
  --warm:#a07820;--wdim:rgba(160,120,32,.09);
  --blue:#3a6fa0;--bdim:rgba(58,111,160,.09);
  --rose:#a04040;--rdim:rgba(160,64,64,.09);
  --violet:#7040a0;--vdim:rgba(112,64,160,.09);
  --green:#437a22;--gdim:rgba(67,122,34,.09);
  --sh-sm:0 1px 3px rgba(0,0,0,.07);--sh-md:0 4px 20px rgba(0,0,0,.09);--sh-lg:0 12px 40px rgba(0,0,0,.12);
  --chart-grid:rgba(0,0,0,.05);
}

/* admin — base */
html[data-page="admin"] *,html[data-page="admin"] *::before,html[data-page="admin"] *::after{box-sizing:border-box;margin:0;padding:0;}
html[data-page="admin"] body{font-family:var(--font);font-size:var(--base);color:var(--tx);background:var(--bg);overflow:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
html[data-page="admin"] button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
html[data-page="admin"] a{color:inherit;text-decoration:none;}
html[data-page="admin"] input,html[data-page="admin"] textarea,html[data-page="admin"] select{font:inherit;color:inherit;}
html[data-page="admin"] img,html[data-page="admin"] svg{display:block;}
html[data-page="admin"] :focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:var(--r-sm);}
html[data-page="admin"] ::selection{background:var(--pdim);color:var(--tx);}

/* admin — shell */
html[data-page="admin"] .app{display:grid;grid-template-columns:var(--nav) 1fr;grid-template-rows:var(--h) 1fr;height:100dvh;overflow:hidden;}

/* admin — topbar */
html[data-page="admin"] .topbar{grid-column:1/-1;grid-row:1;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 var(--sp6);gap:var(--sp4);z-index:20;}
html[data-page="admin"] .topbar-logo{display:flex;align-items:center;gap:var(--sp3);width:calc(var(--nav) - var(--sp6));flex-shrink:0;}
html[data-page="admin"] .logo-mark{font-size:14px;font-weight:800;letter-spacing:-.04em;color:var(--tx);}
html[data-page="admin"] .logo-mark span{color:var(--p);}
html[data-page="admin"] .admin-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;border-radius:var(--r-full);background:var(--pdim);border:1px solid var(--pbdr);color:var(--p);margin-left:2px;}
html[data-page="admin"] .topbar-search{flex:1;max-width:320px;position:relative;}
html[data-page="admin"] .search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none;}
html[data-page="admin"] .topbar-search input{width:100%;background:var(--surf3);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:6px 12px 6px 32px;font-size:var(--sm);color:var(--tx);outline:none;transition:border-color var(--ease);}
html[data-page="admin"] .topbar-search input:focus{border-color:var(--p);}
html[data-page="admin"] .topbar-search input::placeholder{color:var(--tx3);}
html[data-page="admin"] .topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp2);}
html[data-page="admin"] .tb-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--tx2);transition:background var(--ease),color var(--ease);}
html[data-page="admin"] .tb-btn:hover{background:var(--surf3);color:var(--tx);}
html[data-page="admin"] .tb-notif{position:relative;}
html[data-page="admin"] .notif-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--rose);border:2px solid var(--surf);}
html[data-page="admin"] .tb-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--blue));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#0a0e0d;cursor:pointer;flex-shrink:0;}
html[data-page="admin"] .view-site{display:flex;align-items:center;gap:5px;padding:5px var(--sp4);border:1px solid var(--bdr);border-radius:var(--r-md);font-size:var(--xs);font-weight:600;color:var(--tx2);transition:all var(--ease);}
html[data-page="admin"] .view-site:hover{border-color:var(--p);color:var(--p);}

/* admin — sidebar */
html[data-page="admin"] .sidebar{grid-column:1;grid-row:2;background:var(--surf);border-right:1px solid var(--bdr);display:flex;flex-direction:column;overflow-y:auto;padding:var(--sp4) 0;}
html[data-page="admin"] .sidebar::-webkit-scrollbar{width:0;}
html[data-page="admin"] .nav-section{margin-bottom:var(--sp4);}
html[data-page="admin"] .nav-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--tx3);padding:0 var(--sp5) var(--sp2);}
html[data-page="admin"] .nav-item{display:flex;align-items:center;gap:10px;padding:6px var(--sp5);font-size:var(--sm);color:var(--tx2);cursor:pointer;position:relative;transition:color var(--ease),background var(--ease);}
html[data-page="admin"] .nav-item:hover{color:var(--tx);background:var(--surf3);}
html[data-page="admin"] .nav-item.on{color:var(--p);background:var(--pdim);font-weight:700;}
html[data-page="admin"] .nav-item.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:14px;background:var(--p);border-radius:0 2px 2px 0;}
html[data-page="admin"] .nav-ico{width:14px;height:14px;flex-shrink:0;}
html[data-page="admin"] .nav-badge{margin-left:auto;font-size:9px;padding:1px 6px;border-radius:var(--r-full);font-weight:700;font-variant-numeric:tabular-nums;}
html[data-page="admin"] .nav-badge.num{background:var(--surf4);color:var(--tx3);}
html[data-page="admin"] .nav-badge.alert{background:var(--rdim);color:var(--rose);}
html[data-page="admin"] .nav-badge.new{background:var(--pdim);color:var(--p);}
html[data-page="admin"] .nav-sep{height:1px;background:var(--bdr);margin:var(--sp3) 0;}

/* admin — main */
html[data-page="admin"] .main{grid-column:2;grid-row:2;overflow-y:auto;display:flex;flex-direction:column;}
html[data-page="admin"] .main::-webkit-scrollbar{width:4px;}
html[data-page="admin"] .main::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}

/* admin — page header */
html[data-page="admin"] .page-top{display:flex;align-items:center;justify-content:space-between;padding:var(--sp6) var(--sp8) var(--sp5);flex-shrink:0;border-bottom:1px solid var(--bdr);}
html[data-page="admin"] .page-title{font-size:var(--lg);font-weight:800;color:var(--tx);letter-spacing:-.02em;}
html[data-page="admin"] .page-sub{font-size:var(--xs);color:var(--tx3);margin-top:2px;}
html[data-page="admin"] .page-actions{display:flex;align-items:center;gap:var(--sp2);}
html[data-page="admin"] .body-pad{padding:var(--sp6) var(--sp8);}

/* admin — buttons */
html[data-page="admin"] .btn{display:inline-flex;align-items:center;gap:6px;padding:6px var(--sp4);border-radius:var(--r-md);font-size:var(--sm);font-weight:600;cursor:pointer;transition:all var(--ease);border:1px solid transparent;}
html[data-page="admin"] .btn-primary{background:var(--p);color:#060e0c;}
html[data-page="admin"] .btn-primary:hover{background:var(--pd);}
html[data-page="admin"] .btn-secondary{background:var(--surf3);border-color:var(--bdr);color:var(--tx2);}
html[data-page="admin"] .btn-secondary:hover{border-color:var(--p);color:var(--p);}
html[data-page="admin"] .btn-ghost{color:var(--tx2);}
html[data-page="admin"] .btn-ghost:hover{background:var(--surf3);color:var(--tx);}
html[data-page="admin"] .btn-danger{background:var(--rdim);border-color:rgba(212,112,112,.2);color:var(--rose);}
html[data-page="admin"] .btn-danger:hover{background:rgba(212,112,112,.2);}
html[data-page="admin"] .btn-sm{padding:4px var(--sp3);font-size:var(--xs);}

/* admin — KPI cards */
html[data-page="admin"] .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp4);margin-bottom:var(--sp6);}
html[data-page="admin"] .kpi{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:var(--sp5);}
html[data-page="admin"] .kpi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp3);}
html[data-page="admin"] .kpi-lbl{font-size:var(--xs);color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
html[data-page="admin"] .kpi-ico{width:28px;height:28px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;}
html[data-page="admin"] .kpi-num{font-size:var(--2xl);font-weight:800;color:var(--tx);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;}
html[data-page="admin"] .kpi-delta{font-size:var(--xs);margin-top:var(--sp2);display:flex;align-items:center;gap:4px;}
html[data-page="admin"] .delta-up{color:var(--green);}
html[data-page="admin"] .delta-down{color:var(--rose);}
html[data-page="admin"] .delta-neu{color:var(--tx3);}

/* admin — chart panels */
html[data-page="admin"] .charts-row{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp4);margin-bottom:var(--sp6);}
html[data-page="admin"] .panel{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;}
html[data-page="admin"] .panel-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--bdr);}
html[data-page="admin"] .panel-title{font-size:var(--sm);font-weight:700;color:var(--tx);}
html[data-page="admin"] .panel-tabs{display:flex;gap:2px;}
html[data-page="admin"] .ptab{font-size:var(--xs);padding:3px var(--sp3);border-radius:var(--r-md);color:var(--tx3);cursor:pointer;transition:all var(--ease);}
html[data-page="admin"] .ptab.on{background:var(--surf3);color:var(--tx);font-weight:600;}
html[data-page="admin"] .panel-body{padding:var(--sp4) var(--sp5);}
html[data-page="admin"] .chart-wrap{height:180px;position:relative;}
html[data-page="admin"] .donut-wrap{display:flex;flex-direction:column;gap:var(--sp3);}
html[data-page="admin"] .donut-chart{width:120px;height:120px;margin:0 auto;}
html[data-page="admin"] .donut-legend{display:flex;flex-direction:column;gap:var(--sp2);}
html[data-page="admin"] .leg-row{display:flex;align-items:center;gap:var(--sp3);font-size:var(--xs);}
html[data-page="admin"] .leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
html[data-page="admin"] .leg-lbl{color:var(--tx2);flex:1;}
html[data-page="admin"] .leg-val{color:var(--tx);font-weight:700;font-variant-numeric:tabular-nums;}
html[data-page="admin"] .leg-pct{color:var(--tx3);}

/* admin — table */
html[data-page="admin"] .tbl-wrap{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;}
html[data-page="admin"] .tbl-head-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--bdr);}
html[data-page="admin"] .tbl-search{display:flex;align-items:center;gap:var(--sp3);}
html[data-page="admin"] .tbl-search-inp{background:var(--surf3);border:1px solid var(--bdr);border-radius:var(--r-md);padding:5px var(--sp4) 5px 32px;font-size:var(--xs);outline:none;width:200px;transition:border-color var(--ease);}
html[data-page="admin"] .tbl-search-inp:focus{border-color:var(--p);}
html[data-page="admin"] .tbl-search-wrap{position:relative;}
html[data-page="admin"] .tbl-search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none;}
html[data-page="admin"] .tbl-filters{display:flex;gap:var(--sp2);}
html[data-page="admin"] .fchip{font-size:var(--xs);padding:3px var(--sp3);border-radius:var(--r-full);border:1px solid var(--bdr);color:var(--tx3);cursor:pointer;transition:all var(--ease);}
html[data-page="admin"] .fchip.on{border-color:var(--pbdr);background:var(--pdim);color:var(--p);}
html[data-page="admin"] table{width:100%;border-collapse:collapse;}
html[data-page="admin"] th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);padding:var(--sp3) var(--sp5);text-align:left;border-bottom:1px solid var(--bdr);white-space:nowrap;background:var(--surf2);}
html[data-page="admin"] td{padding:var(--sp3) var(--sp5);border-bottom:1px solid var(--div);font-size:var(--sm);vertical-align:middle;}
html[data-page="admin"] tr:last-child td{border-bottom:none;}
html[data-page="admin"] tr:hover td{background:var(--surf2);}
html[data-page="admin"] .td-main{display:flex;align-items:center;gap:var(--sp3);}
html[data-page="admin"] .repo-emoji{font-size:18px;line-height:1;width:28px;flex-shrink:0;}
html[data-page="admin"] .td-name{font-weight:700;color:var(--tx);}
html[data-page="admin"] .td-path{font-size:10px;color:var(--tx3);margin-top:1px;}
html[data-page="admin"] .tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:var(--r-full);}
html[data-page="admin"] .tag-ai{background:var(--pdim);color:var(--p);}
html[data-page="admin"] .tag-tools{background:var(--bdim);color:var(--blue);}
html[data-page="admin"] .tag-selfhosted{background:var(--vdim);color:var(--violet);}
html[data-page="admin"] .tag-ui{background:var(--rdim);color:var(--rose);}
html[data-page="admin"] .tag-automation{background:var(--wdim);color:var(--warm);}
html[data-page="admin"] .tag-vibe{background:var(--gdim);color:var(--green);}
html[data-page="admin"] .stars-cell{font-size:var(--xs);color:var(--tx2);display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
html[data-page="admin"] .status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
html[data-page="admin"] .status-live{background:var(--green);}
html[data-page="admin"] .status-draft{background:var(--tx3);}
html[data-page="admin"] .status-featured{background:var(--warm);}
html[data-page="admin"] .row-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity var(--ease);}
html[data-page="admin"] tr:hover .row-actions{opacity:1;}
html[data-page="admin"] .act-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--tx3);transition:all var(--ease);}
html[data-page="admin"] .act-btn:hover{background:var(--surf4);color:var(--tx);}
html[data-page="admin"] .act-btn.del:hover{background:var(--rdim);color:var(--rose);}
html[data-page="admin"] .tbl-foot{padding:var(--sp3) var(--sp5);border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:var(--surf2);}
html[data-page="admin"] .tbl-count{font-size:var(--xs);color:var(--tx3);}
html[data-page="admin"] .pagination{display:flex;align-items:center;gap:4px;}
html[data-page="admin"] .pg-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);font-size:var(--xs);color:var(--tx2);cursor:pointer;transition:all var(--ease);}
html[data-page="admin"] .pg-btn:hover,html[data-page="admin"] .pg-btn.on{background:var(--surf4);color:var(--tx);}
html[data-page="admin"] .pg-btn.on{font-weight:700;color:var(--p);}

/* admin — activity feed */
html[data-page="admin"] .activity-list{display:flex;flex-direction:column;}
html[data-page="admin"] .activity-item{display:flex;gap:var(--sp3);padding:var(--sp3) var(--sp5);border-bottom:1px solid var(--div);}
html[data-page="admin"] .activity-item:last-child{border-bottom:none;}
html[data-page="admin"] .act-ico-wrap{width:28px;height:28px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
html[data-page="admin"] .act-text{font-size:var(--sm);color:var(--tx);line-height:1.4;}
html[data-page="admin"] .act-text strong{font-weight:700;}
html[data-page="admin"] .act-time{font-size:10px;color:var(--tx3);margin-top:3px;}

/* admin — modal */
html[data-page="admin"] .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--ease);}
html[data-page="admin"] .modal-bg.open{opacity:1;pointer-events:all;}
html[data-page="admin"] .modal{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-2xl);width:520px;max-width:calc(100vw - 2rem);max-height:80dvh;overflow-y:auto;box-shadow:var(--sh-lg);transform:scale(.96) translateY(8px);transition:transform var(--ease);}
html[data-page="admin"] .modal-bg.open .modal{transform:scale(1) translateY(0);}
html[data-page="admin"] .modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp5) var(--sp6);border-bottom:1px solid var(--bdr);}
html[data-page="admin"] .modal-title{font-size:var(--base);font-weight:800;color:var(--tx);letter-spacing:-.02em;}
html[data-page="admin"] .modal-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--tx3);transition:all var(--ease);}
html[data-page="admin"] .modal-close:hover{background:var(--surf3);color:var(--tx);}
html[data-page="admin"] .modal-body{padding:var(--sp6);}
html[data-page="admin"] .field{margin-bottom:var(--sp5);}
html[data-page="admin"] .field-lbl{font-size:var(--xs);font-weight:700;color:var(--tx2);margin-bottom:var(--sp2);display:flex;align-items:center;gap:var(--sp2);}
html[data-page="admin"] .field-req{color:var(--rose);font-size:10px;}
html[data-page="admin"] .field-input{width:100%;background:var(--surf3);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:var(--sp3) var(--sp4);font-size:var(--sm);color:var(--tx);outline:none;transition:border-color var(--ease),box-shadow var(--ease);}
html[data-page="admin"] .field-input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--pdim);}
html[data-page="admin"] .field-input::placeholder{color:var(--tx3);}
html[data-page="admin"] textarea.field-input{resize:vertical;min-height:80px;line-height:1.6;}
html[data-page="admin"] .field-hint{font-size:10px;color:var(--tx3);margin-top:var(--sp2);}
html[data-page="admin"] .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);}
html[data-page="admin"] .field-select{width:100%;background:var(--surf3);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:var(--sp3) var(--sp4);font-size:var(--sm);color:var(--tx);outline:none;cursor:pointer;}
html[data-page="admin"] .field-select:focus{border-color:var(--p);}
html[data-page="admin"] .modal-foot{padding:var(--sp4) var(--sp6);border-top:1px solid var(--bdr);display:flex;gap:var(--sp3);justify-content:flex-end;background:var(--surf2);}
html[data-page="admin"] .toggle-row{display:flex;align-items:center;justify-content:space-between;}
html[data-page="admin"] .toggle-lbl{font-size:var(--sm);color:var(--tx2);}
html[data-page="admin"] .toggle{width:36px;height:20px;border-radius:var(--r-full);background:var(--surf4);border:1px solid var(--bdr);position:relative;cursor:pointer;transition:background var(--ease);}
html[data-page="admin"] .toggle.on{background:var(--p);border-color:var(--p);}
html[data-page="admin"] .toggle::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform var(--ease);}
html[data-page="admin"] .toggle.on::after{transform:translateX(16px);}

/* admin — toast */
html[data-page="admin"] .toast-stack{position:fixed;bottom:var(--sp6);right:var(--sp6);display:flex;flex-direction:column;gap:var(--sp2);z-index:200;}
html[data-page="admin"] .toast{display:flex;align-items:center;gap:var(--sp3);padding:var(--sp3) var(--sp5);background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);box-shadow:var(--sh-lg);font-size:var(--sm);color:var(--tx);transform:translateX(120%);transition:transform .25s cubic-bezier(.16,1,.3,1);max-width:320px;}
html[data-page="admin"] .toast.show{transform:translateX(0);}
html[data-page="admin"] .toast-ico{flex-shrink:0;}

/* admin — subscribers */
html[data-page="admin"] .sub-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-bottom:var(--sp6);}
html[data-page="admin"] .stat-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:var(--sp5);}
html[data-page="admin"] .stat-n{font-size:var(--2xl);font-weight:800;color:var(--tx);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
html[data-page="admin"] .stat-lbl{font-size:var(--xs);color:var(--tx3);margin-top:4px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
html[data-page="admin"] .stat-delta{font-size:var(--xs);margin-top:var(--sp2);}

/* admin — settings */
html[data-page="admin"] .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp6);}
html[data-page="admin"] .settings-section{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;}
html[data-page="admin"] .settings-head{padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--bdr);font-size:var(--sm);font-weight:700;color:var(--tx);}
html[data-page="admin"] .settings-body{padding:var(--sp5);display:flex;flex-direction:column;gap:var(--sp4);}
html[data-page="admin"] .setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sp3) 0;border-bottom:1px solid var(--div);}
html[data-page="admin"] .setting-row:last-child{border-bottom:none;}
html[data-page="admin"] .setting-name{font-size:var(--sm);color:var(--tx);font-weight:600;}
html[data-page="admin"] .setting-desc{font-size:10px;color:var(--tx3);margin-top:2px;}

/* admin — animations */
@keyframes admin-fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
html[data-page="admin"] .kpi-grid,html[data-page="admin"] .charts-row,
html[data-page="admin"] .tbl-wrap,html[data-page="admin"] .sub-stats,
html[data-page="admin"] .settings-grid{animation:admin-fadeUp .25s ease both;}
@media(prefers-reduced-motion:reduce){
  html[data-page="admin"] .kpi-grid,html[data-page="admin"] .charts-row,html[data-page="admin"] .tbl-wrap{animation:none;}
}

/* admin — responsive */
@media(max-width:1100px){
  html[data-page="admin"] .kpi-grid{grid-template-columns:repeat(2,1fr);}
  html[data-page="admin"] .charts-row{grid-template-columns:1fr;}
  html[data-page="admin"] .settings-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  html[data-page="admin"] .app{grid-template-columns:1fr;grid-template-rows:var(--h) 1fr;}
  html[data-page="admin"] .sidebar{display:none;}
  html[data-page="admin"] .main{grid-column:1;}
  html[data-page="admin"] .body-pad{padding:var(--sp4);}
  html[data-page="admin"] .kpi-grid{grid-template-columns:repeat(2,1fr);}
}

/* ===== Utility classes (shared across all pages) ===== */
.d-none { display: none !important; }
.d-flex { display: flex !important; }

/* Colour dots for blog filter tabs */
.dot-primary { background: var(--primary); }
.dot-blue    { background: var(--blue); }
.dot-warm    { background: var(--warm); }
.dot-rose    { background: var(--rose); }
.dot-muted   { background: var(--text-3, var(--muted)); }

/* Text colour helpers */
.c-muted  { color: var(--text-2, var(--muted)); }
.c-faint  { color: var(--text-3, var(--faint)); }

/* ── Admin Login Screen ───────────────────────────────────────────────────── */
.login-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 360px; padding: var(--sp6);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r3);
}
.login-logo {
  display: flex; align-items: center; gap: var(--sp2);
  margin-bottom: var(--sp5); justify-content: center;
}