/* ==========================================================================
   dsh.so — Design Language · dark-tech (final)
   Based on docs/SKILL.md #1 (dark-tech) + docs/dsh_so_design_v2.md structure.
   Palette: layered dark-green atmosphere, emerald accent, teal secondary.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Reset & base
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{background-color:#07090c}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-secondary);
  line-height:1.6;
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;color:var(--text-primary)}

/* Layered atmospheric background + ambient glows (green) */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(rgba(74,222,128,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,.03) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 50% -10%, #101a18 0%, #0a0e14 55%, #07090c 100%),
    radial-gradient(circle at 20% 30%, rgba(34,197,94,.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(34,211,238,.04) 0%, transparent 50%);
  background-size:44px 44px,44px 44px,auto,auto,auto;
}
/* Film-grain noise overlay */
body::after{
  content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
::selection{background:rgba(34,197,94,.32);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------------------
   1. Design tokens (dark-tech)
   --------------------------------------------------------------------------- */
:root{
  /* Typography (CJK fallbacks included) */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',Roboto,sans-serif;
  --font-mono:'SF Mono','Cascadia Code','JetBrains Mono','Fira Code',ui-monospace,Consolas,'PingFang SC','Microsoft YaHei',monospace;

  /* Background — layered dark-green atmosphere */
  --bg-base:#07090c;
  --bg-mid:#0a0e14;
  --bg-top:#101a18;

  /* Surfaces */
  --surface-primary:rgba(255,255,255,.03);
  --surface-hover:rgba(255,255,255,.05);
  --surface-raised:rgba(255,255,255,.04);
  --surface-code:rgba(0,0,0,.45);
  --glass:rgba(255,255,255,.03);
  --hairline:rgba(255,255,255,.09);
  --hairline-strong:rgba(255,255,255,.16);

  /* Text — green-tinted white hierarchy (WCAG AA) */
  --text-primary:#eafaf3;
  --text-secondary:rgba(226,246,237,.78);
  --text-tertiary:rgba(216,240,229,.6);
  --text-quaternary:rgba(198,230,216,.4);
  --text-muted:rgba(255,255,255,.15);

  /* Accent — emerald + teal */
  --accent:#22c55e;
  --accent-deep:#16a34a;
  --accent-teal:#22d3ee;
  --gradient-accent:linear-gradient(135deg,#16a34a,#22c55e);
  --gradient-text:linear-gradient(135deg,#4ade80 0%,#22d3ee 100%);
  --gradient-glow:linear-gradient(90deg,transparent,rgba(34,197,94,.4),rgba(34,211,238,.3),transparent);

  /* Status */
  --status-official:#4ade80;
  --status-community:#22d3ee;
  --status-verified:#34d399;
  --status-breaking:#fbbf24;
  --status-error:#ef4444;

  /* Terminal */
  --term-prompt:#4ade80;
  --term-command:#e8f0ea;
  --term-output:rgba(228,244,236,.6);
  --term-url:#22d3ee;
  --term-cursor:#4ade80;

  /* Focus */
  --focus:#22c55e;
  --select-option-bg:#0f1524;
  --select-option-fg:#dbe7e0;

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

  /* Layout */
  --max-width:1180px;--page-pad:32px;--section-gap:80px;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);

  /* Type scale */
  --text-hero:48px;--text-h1:36px;--text-h2:28px;--text-h3:20px;
  --text-body:16px;--text-body-sm:14px;--text-caption:12px;--text-mono:14px;
}

/* ---------------------------------------------------------------------------
   2. Layout primitives
   --------------------------------------------------------------------------- */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--page-pad)}
.section{padding:0 0 var(--section-gap)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:28px}
.section-head h2{font-size:var(--text-h2);font-weight:600;letter-spacing:-.02em}
.section-head h2::before{content:'//';color:var(--status-community);font-family:var(--font-mono);font-size:.68em;font-weight:500;margin-right:10px;vertical-align:3px}
.section-link{font-size:var(--text-body-sm);color:var(--text-secondary);display:inline-flex;align-items:center;gap:6px;transition:color .2s var(--ease)}
.section-link:hover{color:#fff}
.section-lead{color:var(--text-tertiary);max-width:66ch;font-size:16.5px;line-height:1.75;margin:0 0 var(--space-5)}
.section-lead code{font-family:var(--font-mono);font-size:.88em;background:rgba(255,255,255,.07);border:1px solid var(--hairline);border-radius:5px;padding:1px 6px;color:var(--text-secondary)}

/* ---------------------------------------------------------------------------
   3. Typography helpers
   --------------------------------------------------------------------------- */
.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-hero{font-size:clamp(2rem,4.6vw,var(--text-hero));font-weight:600;line-height:1.1;letter-spacing:-.03em}
.text-h1{font-size:var(--text-h1);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.text-h2{font-size:var(--text-h2);font-weight:600;line-height:1.2;letter-spacing:-.02em}
.text-h3{font-size:var(--text-h3);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.text-body-sm{font-size:var(--text-body-sm);line-height:1.55}
.text-caption{font-size:var(--text-caption);font-weight:500;letter-spacing:.02em}
.text-mono{font-family:var(--font-mono);font-size:var(--text-mono)}

/* ---------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:500;font-family:var(--font-sans);line-height:1.2;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px}
.dsh-btn-primary{background:var(--gradient-accent);color:#fff;box-shadow:0 4px 24px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.dsh-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(34,197,94,.45),inset 0 1px 0 rgba(255,255,255,.2);color:#fff}
.dsh-btn-secondary{background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dsh-btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(34,197,94,.35);color:#fff}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:8px}
.btn-sm svg{width:14px;height:14px}

/* ---------------------------------------------------------------------------
   5. Cards (glassmorphism)
   --------------------------------------------------------------------------- */
.dsh-card{background:var(--surface-primary);border:1px solid var(--hairline);border-radius:16px;padding:28px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;overflow:hidden;transition:all .35s var(--ease)}
.dsh-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.dsh-card::after{content:'';position:absolute;top:7px;right:7px;width:12px;height:12px;border-top:1px solid rgba(74,222,128,.38);border-right:1px solid rgba(74,222,128,.38);border-top-right-radius:3px;pointer-events:none}
.dsh-card:hover{border-color:rgba(34,197,94,.28);background:var(--surface-hover);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 0 1px rgba(34,197,94,.12)}
@media (prefers-reduced-motion:reduce){.dsh-card:hover{transform:none}}

/* ---------------------------------------------------------------------------
   6. Terminal
   --------------------------------------------------------------------------- */
.dsh-terminal{background:var(--surface-code);border:1px solid rgba(255,255,255,.09);border-radius:14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 1px rgba(34,197,94,.12),0 20px 60px rgba(0,0,0,.5),0 0 80px rgba(34,197,94,.06);position:relative;overflow:hidden;font-family:var(--font-mono)}
.dsh-terminal::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.35),transparent)}
.dsh-terminal::before{content:'';position:absolute;top:7px;left:7px;width:12px;height:12px;border-top:1px solid rgba(74,222,128,.35);border-left:1px solid rgba(74,222,128,.35);border-top-left-radius:3px;pointer-events:none}
.terminal-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.terminal-dots{display:flex;gap:6px}
.terminal-dot{width:10px;height:10px;border-radius:50%}
.terminal-dot:nth-child(1){background:#ff5f57}
.terminal-dot:nth-child(2){background:#febc2e}
.terminal-dot:nth-child(3){background:#28c840}
.terminal-title{font-size:11px;color:var(--text-quaternary);font-family:var(--font-mono)}
.terminal-body{padding:24px 28px;font-size:13.5px;line-height:1.8}
.term-prompt{color:var(--term-prompt);font-weight:600}
.term-command{color:var(--term-command)}
.term-output{color:var(--term-output)}
.term-url{color:var(--term-url)}
.dsh-cursor{display:inline-block;width:8px;height:16px;background:var(--term-cursor);border-radius:1px;box-shadow:0 0 8px rgba(74,222,128,.6);vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ---------------------------------------------------------------------------
   7. Status badges (dark-tech status colors)
   --------------------------------------------------------------------------- */
.dsh-status{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);white-space:nowrap}
.dsh-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.dsh-status-official{color:var(--status-official);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);box-shadow:0 0 16px rgba(34,197,94,.12)}
.dsh-status-community{color:var(--status-community);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.18);box-shadow:0 0 16px rgba(34,211,238,.08)}
.dsh-status-verified{color:var(--status-verified);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2)}
.dsh-status-breaking{color:var(--status-breaking);background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.15)}
.dsh-status-error{color:var(--status-error);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.15)}
.dsh-status-muted{color:var(--text-quaternary);background:rgba(255,255,255,.03);border:1px solid var(--hairline)}

.dsh-breathe{animation:breathe 2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1;box-shadow:0 0 6px rgba(52,211,153,.5)}50%{opacity:.6;box-shadow:0 0 2px rgba(52,211,153,.2)}}

.compat{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:3px 8px;border-radius:6px}
.compat-verified{color:var(--status-verified);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.16)}
.compat-declared{color:var(--text-tertiary);background:rgba(255,255,255,.03);border:1px solid var(--hairline)}

/* ---------------------------------------------------------------------------
   8. Architecture boxes
   --------------------------------------------------------------------------- */
.dsh-arch-box{padding:14px 24px;border-radius:10px;font-family:var(--font-mono);font-size:13px;font-weight:500;text-align:center}
.dsh-arch-box.model{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);color:#4ade80;box-shadow:0 0 20px rgba(34,197,94,.12)}
.dsh-arch-box.harness{background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.2);color:#67e8f9;box-shadow:0 0 20px rgba(34,211,238,.1)}
.dsh-arch-box.plugins{background:rgba(255,255,255,.03);border:1px solid var(--hairline);color:var(--text-secondary)}
.arch-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:var(--space-5) 0}
.arch-flow .dsh-arch-box{flex:1 1 auto;min-width:120px}
.arch-arrow{color:var(--text-quaternary);font-family:var(--font-mono)}

/* ---------------------------------------------------------------------------
   9. Top navigation
   --------------------------------------------------------------------------- */
.topnav{position:sticky;top:0;z-index:60;background:rgba(7,9,12,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--hairline)}
.topnav-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--page-pad);height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:19px;color:#fff;letter-spacing:-.02em;line-height:1}
.brand svg{width:32px;height:32px;filter:drop-shadow(0 0 8px rgba(74,222,128,.35));transition:filter .25s var(--ease)}
.brand:hover svg{filter:drop-shadow(0 0 14px rgba(74,222,128,.65))}
.brand-wordmark{display:inline-flex;align-items:baseline;line-height:1}
.brand-dsh{color:#fff}
.brand-so{color:var(--status-community);font-weight:600}
.brand:hover .brand-so{color:#67e8f9}
.dsh-nav{display:flex;align-items:center;gap:6px}
.dsh-nav a{position:relative;padding:11px 16px;font-size:14.5px;color:var(--text-tertiary);border-radius:8px;transition:color .2s var(--ease)}
.dsh-nav a:hover{color:#fff}
.dsh-nav a.active{color:#fff}
.dsh-nav a::after{content:'';position:absolute;bottom:2px;left:14px;right:14px;height:1.5px;background:linear-gradient(90deg,#22c55e,#22d3ee);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.dsh-nav a:hover::after,.dsh-nav a.active::after{transform:scaleX(1)}
.topnav-actions{display:flex;align-items:center;gap:10px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--text-secondary);border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s var(--ease)}
.lang-switch:hover{border-color:rgba(34,197,94,.4);color:#fff}
.lang-switch .flag{width:19px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.35)}

/* Language dropdown (multi-language ready) */
.lang-dropdown{position:relative}
.lang-dropdown>summary{list-style:none;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--text-secondary);border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}
.lang-dropdown>summary::-webkit-details-marker{display:none}
.lang-dropdown>summary:hover{border-color:rgba(34,197,94,.4);color:#fff}
.lang-dropdown__flag{display:inline-flex;align-items:center}
.lang-dropdown__flag .flag{width:19px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.35)}
.lang-dropdown__caret{width:13px;height:13px;color:var(--text-quaternary);transition:transform .2s var(--ease)}
.lang-dropdown[open]>summary .lang-dropdown__caret{transform:rotate(180deg)}
.lang-dropdown__panel{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:100%;margin:0;padding:6px;list-style:none;background:var(--select-option-bg,#0f1524);color:var(--select-option-fg,#dbe7e0);border:1px solid var(--hairline-strong);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(34,197,94,.08)}
.lang-dropdown__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;font-size:13px;color:var(--select-option-fg,#dbe7e0);text-decoration:none;white-space:nowrap;transition:background-color .15s var(--ease)}
.lang-dropdown__item:hover{background:rgba(34,197,94,.14);color:#fff}
.lang-dropdown__item.is-selected{background:rgba(34,197,94,.22);color:#4ade80;font-weight:600}
.lang-dropdown__item .flag{width:18px;height:auto;border-radius:2px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:var(--text-tertiary);transition:all .2s var(--ease)}
.icon-btn:hover{color:#fff;border-color:rgba(34,197,94,.4)}
.icon-btn svg{width:18px;height:18px}

/* ---------------------------------------------------------------------------
   10. Hero
   --------------------------------------------------------------------------- */
.hero{padding:88px 0 64px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:1040px;height:560px;background:radial-gradient(50% 50% at 50% 50%,rgba(34,197,94,.13),transparent 70%);pointer-events:none}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;position:relative}
.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:500;color:var(--text-tertiary);border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-pill a{color:var(--status-community);text-decoration:underline;text-underline-offset:3px}
.hero h1{margin:var(--space-6) 0 var(--space-5)}
.hero-sub{font-size:18px;color:var(--text-tertiary);max-width:48ch;margin:0 0 var(--space-8);line-height:1.7}
.hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.hero-one-liner{margin-top:var(--space-6);display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--status-community)}
.hero-one-liner svg{width:14px;height:14px}
.hero-proof{margin-top:var(--space-3);font-size:12px;color:var(--text-quaternary)}

/* ---------------------------------------------------------------------------
   11. Stat strip
   --------------------------------------------------------------------------- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:14px;overflow:hidden;margin-bottom:var(--section-gap)}
.stat{position:relative;background:rgba(7,9,12,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:28px 32px;min-height:112px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.stat::before{content:'';position:absolute;top:8px;left:8px;width:10px;height:10px;border-top:1px solid rgba(74,222,128,.3);border-left:1px solid rgba(74,222,128,.3);pointer-events:none}
.stat-value{display:flex;align-items:baseline;gap:8px;font-size:28px;font-weight:600;letter-spacing:-.02em;color:#fff;font-family:var(--font-mono)}
.stat-value svg{width:16px;height:16px;color:var(--status-community);align-self:center}
.stat-label{font-size:12px;color:var(--text-quaternary);line-height:1.45}

/* ---------------------------------------------------------------------------
   12. Steps
   --------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:var(--space-5)}
.step{display:flex;gap:var(--space-4);align-items:flex-start}
.step-num{flex:none;width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;background:var(--gradient-accent);box-shadow:0 0 12px rgba(34,197,94,.35);font-family:var(--font-mono)}
.step-title{font-size:14px;font-weight:600;color:#fff}
.step-desc{font-size:13px;color:var(--text-tertiary);margin:4px 0 0;line-height:1.55}
.step-desc code{font-family:var(--font-mono);font-size:12px;background:rgba(255,255,255,.07);border:1px solid var(--hairline);border-radius:5px;padding:1px 6px;color:var(--text-secondary)}

.quickcopy{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.quickcopy code{font-family:var(--font-mono);font-size:13px;padding:10px 16px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--hairline-strong);color:var(--text-secondary)}
.copy-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text-tertiary);border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);cursor:pointer;font-family:var(--font-sans);transition:all .15s var(--ease)}
.copy-btn:hover{color:#fff;border-color:rgba(34,197,94,.4)}
.copy-btn svg{width:14px;height:14px}

/* ---------------------------------------------------------------------------
   13. Plugin grid & card
   --------------------------------------------------------------------------- */
.plugin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.plugin-card{display:flex;flex-direction:column;gap:var(--space-3);padding:24px}
.plugin-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.plugin-card-identity{display:flex;align-items:center;gap:12px;min-width:0}
.plugin-card-avatar{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.04)}
.plugin-card-name{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plugin-card-name a:hover{color:var(--status-community)}
.plugin-card-author{font-size:12px;color:var(--text-quaternary);font-family:var(--font-mono)}
.plugin-card-desc{font-size:13px;color:var(--text-tertiary);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plugin-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text-quaternary)}
.plugin-card-meta .sep{color:var(--text-muted)}
.star-count{display:inline-flex;align-items:center;gap:5px;color:var(--text-tertiary);font-family:var(--font-mono)}
.star-count svg{width:13px;height:13px;color:var(--status-breaking)}
.plugin-card-compat{margin:0}
.plugin-card-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.plugin-install{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--hairline);color:var(--text-tertiary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plugin-install svg{width:12px;height:12px}

.registry-toolbar{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-5)}
.search-wrap{position:relative;flex:1 1 280px}
.search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-quaternary);pointer-events:none}
.registry-input{width:100%;min-height:42px;padding:10px 14px 10px 40px;border-radius:10px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:var(--text-secondary);font-size:14px;font-family:var(--font-sans);transition:border-color .2s var(--ease)}
.registry-input::placeholder{color:var(--text-quaternary)}
.registry-input:focus{border-color:rgba(34,197,94,.5);outline:none}
.registry-select{min-height:42px;padding:10px 36px 10px 14px;border-radius:10px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:var(--text-secondary);font-size:13px;font-family:var(--font-sans);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2378b89a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.registry-select:hover{border-color:rgba(34,197,94,.4)}
.registry-select option{background-color:var(--select-option-bg,#0f1524);color:var(--select-option-fg,#dbe7e0)}

/* Custom dropdown (full color control, no native popup) */
.dsh-dropdown{position:relative}
.dsh-dropdown__trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:10px 14px;border-radius:10px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:var(--text-secondary);font-size:13px;font-family:var(--font-sans);cursor:pointer;transition:border-color .2s var(--ease)}
.dsh-dropdown__trigger:hover{border-color:rgba(34,197,94,.4)}
.dsh-dropdown__trigger svg{width:14px;height:14px;color:var(--text-quaternary);transition:transform .2s var(--ease)}
.dsh-dropdown[open] .dsh-dropdown__trigger svg{transform:rotate(180deg)}
.dsh-dropdown__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:100%;max-height:340px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--select-option-bg,#0f1524);color:var(--select-option-fg,#dbe7e0);border:1px solid var(--hairline-strong);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(34,197,94,.08)}
.dsh-dropdown__item{padding:8px 12px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--select-option-fg,#dbe7e0);white-space:nowrap;transition:background-color .15s var(--ease)}
.dsh-dropdown__item:hover{background:rgba(34,197,94,.14)}
.dsh-dropdown__item.is-selected{background:rgba(34,197,94,.22);color:#4ade80;font-weight:600}
.dsh-dropdown summary::-webkit-details-marker{display:none}
.dsh-dropdown summary{list-style:none}
.registry-count{font-size:12px;color:var(--text-quaternary);margin:0 0 var(--space-4);font-family:var(--font-mono)}
.registry-empty{padding:var(--space-10) var(--space-6);border:1px dashed var(--hairline-strong);border-radius:14px;text-align:center;color:var(--text-tertiary);font-size:14px}
.registry-empty a{color:var(--status-community);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------------------
   14. Changelog
   --------------------------------------------------------------------------- */
.changelog-entry{padding:48px 0;border-bottom:1px solid var(--hairline)}
.changelog-entry:last-child{border-bottom:none}
.changelog-version{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:22px;font-weight:600;color:#fff;letter-spacing:-.02em}
.changelog-version .dot{width:8px;height:8px;border-radius:50%;background:var(--status-verified);box-shadow:0 0 8px rgba(52,211,153,.6)}
.changelog-meta{margin-top:6px;font-size:12px;color:var(--text-quaternary);display:flex;align-items:center;gap:8px}
.changelog-meta a{color:var(--status-community)}
.changelog-block{margin-top:var(--space-5);padding:var(--space-5);border-radius:12px}
.changelog-official{background:rgba(255,255,255,.02);border:1px solid var(--hairline)}
.changelog-analysis{background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(34,211,238,.06));border:1px solid rgba(34,197,94,.2);position:relative}
.changelog-analysis::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-glow)}
.changelog-block h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--status-community);margin-bottom:var(--space-3);font-family:var(--font-mono)}
.changelog-block h4{font-size:12px;color:var(--text-tertiary);margin:var(--space-3) 0 6px;text-transform:uppercase;letter-spacing:.04em}
.changelog-block ul{padding-left:18px;list-style:disc}
.changelog-block li{font-size:14px;color:var(--text-secondary);margin:4px 0}
.changelog-block p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin:0}

.dsh-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:var(--space-4)}
.dsh-table th{text-align:left;padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-quaternary);border-bottom:1px solid var(--hairline-strong);font-family:var(--font-mono)}
.dsh-table td{padding:10px 14px;border-bottom:1px solid var(--hairline);color:var(--text-secondary)}
.dsh-table tr:hover td{background:rgba(255,255,255,.02)}
.compat-pill{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono)}
.compat-pill-compatible{color:var(--status-verified);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.16)}
.compat-pill-unknown{color:var(--status-breaking);background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.15)}

/* ---------------------------------------------------------------------------
   15. Inner pages — docs layout (sidebar + TOC)
   --------------------------------------------------------------------------- */
.doc-layout{display:grid;grid-template-columns:232px minmax(0,1fr) 208px;gap:48px;padding:56px 0 88px;align-items:start}
.sidebar{position:sticky;top:84px}
.sidebar-group{margin-bottom:var(--space-6)}
.sidebar-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-quaternary);padding:0 12px;margin-bottom:8px;font-family:var(--font-mono)}
.sidebar a{display:block;padding:8px 14px;border-radius:8px;font-size:14px;color:var(--text-tertiary);transition:all .2s var(--ease)}
.sidebar a:hover{color:#fff;background:rgba(255,255,255,.03)}
.sidebar a.active{color:#fff;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);box-shadow:0 0 16px rgba(34,197,94,.12)}
.doc-content{min-width:0}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-quaternary);margin-bottom:var(--space-5);font-family:var(--font-mono)}
.breadcrumb a{color:var(--text-quaternary)}
.breadcrumb a:hover{color:var(--status-community)}
.breadcrumb .crumb-sep{color:var(--text-muted)}
.doc-content h1{margin-bottom:var(--space-4)}
.doc-lead{color:var(--text-tertiary);font-size:16px;line-height:1.75;margin:0 0 var(--space-8)}
.doc-content h2{font-size:var(--text-h2);margin:var(--space-12) 0 var(--space-4);letter-spacing:-.02em}
.doc-content h3{font-size:var(--text-h3);margin:var(--space-8) 0 var(--space-3)}
.doc-content p{margin:0 0 var(--space-4);font-size:15.5px;line-height:1.8;color:var(--text-secondary)}
.doc-content p code,.doc-content li code{font-family:var(--font-mono);font-size:.88em;background:rgba(255,255,255,.07);border:1px solid var(--hairline);border-radius:5px;padding:1px 6px;color:var(--text-secondary)}
.doc-content ul,.doc-content ol{list-style:disc;padding-left:22px;margin:0 0 var(--space-5)}
.doc-content li{font-size:14.5px;color:var(--text-secondary);margin:6px 0;line-height:1.7}
.doc-content a{color:var(--status-community)}
.doc-content a:hover{text-decoration:underline;text-underline-offset:3px}
.doc-content .dsh-terminal{margin:var(--space-5) 0}
.doc-content .dsh-card{margin:var(--space-5) 0}

.dsh-aside{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:10px;margin:var(--space-5) 0;font-size:13.5px;line-height:1.65;color:var(--text-secondary)}
.dsh-aside svg{width:18px;height:18px;flex:none;margin-top:2px}
.dsh-aside-note{background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.18)}
.dsh-aside-note svg{color:var(--status-community)}
.dsh-aside-warn{background:rgba(251,191,36,.05);border:1px solid rgba(251,191,36,.15)}
.dsh-aside-warn svg{color:var(--status-breaking)}

.toc{position:sticky;top:84px}
.toc-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-quaternary);margin-bottom:var(--space-3);font-family:var(--font-mono)}
.toc a{display:block;padding:5px 10px;font-size:12.5px;color:var(--text-quaternary);border-left:1px solid var(--hairline);transition:all .2s var(--ease)}
.toc a:hover{color:#fff;border-left-color:var(--status-community)}
.toc a.active{color:var(--status-community);border-left-color:var(--status-community)}

/* ---------------------------------------------------------------------------
   16. CTA band & footer
   --------------------------------------------------------------------------- */
.cta-band{padding:0 0 var(--section-gap)}
.cta-inner{position:relative;overflow:hidden;border-radius:18px;padding:64px 48px;text-align:center;border:1px solid rgba(34,197,94,.22);background:radial-gradient(70% 120% at 50% -20%,rgba(34,197,94,.13),transparent 70%),rgba(255,255,255,.02);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-glow)}
.cta-inner h2{font-size:var(--text-h2);margin-bottom:var(--space-3);letter-spacing:-.02em}
.cta-inner p{color:var(--text-tertiary);max-width:56ch;margin:0 auto var(--space-6);font-size:15px;line-height:1.7}

.site-footer{border-top:1px solid var(--hairline);background:rgba(7,9,12,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.footer-grid{max-width:var(--max-width);margin:0 auto;padding:64px var(--page-pad) 48px;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:48px}
.footer-brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;color:#fff;font-size:17px;letter-spacing:-.02em;line-height:1}
.footer-brand svg{width:28px;height:28px;filter:drop-shadow(0 0 8px rgba(74,222,128,.3))}
.footer-brand .brand-so{color:var(--status-community)}
.footer-disclaimer{font-size:12.5px;color:var(--text-quaternary);line-height:1.7;max-width:46ch;margin:var(--space-4) 0 0}
.footer-col h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-quaternary);margin-bottom:var(--space-4);font-family:var(--font-mono)}
.footer-col li{margin-bottom:10px}
.footer-col a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-tertiary);transition:color .2s var(--ease)}
.footer-col a:hover{color:#fff}
.footer-col a svg{width:14px;height:14px;color:var(--text-quaternary)}
.footer-bottom{max-width:var(--max-width);margin:0 auto;padding:var(--space-4) var(--page-pad) var(--space-6);border-top:1px solid var(--hairline);display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;font-size:12px;color:var(--text-quaternary)}

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

/* ---------------------------------------------------------------------------
   18. Responsive
   --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:var(--space-8)}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .doc-layout{grid-template-columns:200px minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:768px){
  .dsh-nav{display:none}
  .topnav-inner{height:56px}
  .hero{padding:56px 0 40px}
  .stat{min-height:84px}
  .stat-value{font-size:22px}
  .doc-layout{grid-template-columns:1fr}
  .sidebar{position:static;display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section{padding-bottom:56px}
}
@media (max-width:480px){
  .stat-strip{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
}


/* ---------------------------------------------------------------------------
   17b. Registry enhancements — topics, featured, heat score
   --------------------------------------------------------------------------- */
.registry-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-4)}
.registry-topic{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:var(--text-tertiary);font-size:12px;font-family:var(--font-mono);cursor:pointer;transition:all .2s var(--ease);user-select:none}
.registry-topic:hover{border-color:rgba(34,197,94,.45);color:#fff}
.registry-topic.is-active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.5);color:var(--status-community);box-shadow:0 0 12px rgba(34,197,94,.15)}
.registry-topic .topic-count{font-size:10.5px;color:var(--text-quaternary)}
.registry-topic.is-active .topic-count{color:var(--status-community)}

.plugin-card-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.plugin-topic-tag{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);background:rgba(255,255,255,.04);border:1px solid var(--hairline);border-radius:5px;padding:2px 7px}
.plugin-topic-tag::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent-teal);margin-right:5px;opacity:.7}

.plugin-card-heat{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);padding:3px 9px;border-radius:6px;border:1px solid var(--hairline)}
.plugin-card-heat b{color:var(--text-primary);font-weight:600}
.heat-hot{color:var(--status-verified);border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.06)}
.heat-warm{color:var(--status-breaking);border-color:rgba(251,191,36,.22);background:rgba(251,191,36,.05)}
.heat-cold{color:var(--text-quaternary);border-color:var(--hairline)}

.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:var(--space-6);align-items:stretch}
.featured-card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:14px;border:1px solid rgba(34,197,94,.22);background:linear-gradient(160deg,rgba(34,197,94,.07),rgba(34,211,238,.04) 60%,rgba(255,255,255,.02));position:relative;overflow:hidden;transition:border-color .2s var(--ease);height:100%;box-sizing:border-box}
.featured-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.6),rgba(34,211,238,.5),transparent)}
.featured-card:hover{border-color:rgba(34,197,94,.45)}
.featured-card-head{display:flex;align-items:center;gap:10px;min-width:0}
.featured-card-head .plugin-card-avatar{width:36px;height:36px;flex:none;border-radius:9px}
.featured-card-name{font-size:14.5px;font-weight:600;color:#fff;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-card-name a{color:inherit}
.featured-card-name a:hover{color:var(--status-community)}
.featured-card-desc{font-size:12.5px;color:var(--text-tertiary);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;max-height:40px}
.featured-card-tags{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;height:22px;overflow:hidden;white-space:nowrap}
.featured-card-why{font-size:11px;color:var(--status-community);font-family:var(--font-mono);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.featured-card-meta{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--text-quaternary);font-family:var(--font-mono)}

/* ---------------------------------------------------------------------------
   17c. Pagination
   --------------------------------------------------------------------------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin:var(--space-6) 0 var(--space-8);flex-wrap:wrap}
.pagination button{min-width:38px;height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:var(--text-tertiary);font-family:var(--font-mono);font-size:13px;cursor:pointer;transition:all .2s var(--ease)}
.pagination button:hover:not(:disabled):not(.is-active){border-color:rgba(34,197,94,.45);color:#fff}
.pagination button.is-active{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.5);color:var(--status-community);box-shadow:0 0 12px rgba(34,197,94,.15)}
.pagination button:disabled{opacity:.35;cursor:not-allowed}
.pagination .pagination-ellipsis{color:var(--text-quaternary);font-family:var(--font-mono);font-size:13px;padding:0 2px}
.pagination .pagination-info{color:var(--text-quaternary);font-family:var(--font-mono);font-size:12px;margin-right:6px}