/* etermax-mcp design system — extracted from _template.py (PUB-452 P3). */
/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --bg-secondary: #f5f5f7;
  --nav-bg: 245,245,247;
  --bg-card: #ffffff;
  --border: rgba(0,0,0,0.06);
  --text: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted: #9a9a9a;
  --accent: #00b374;
  --accent-hover: #009d66;
  --accent-subtle: #ecfdf5;
  --success: #1a7f37;
  --success-subtle: #dafbe1;
  --danger: #cf222e;
  --danger-subtle: #ffebe9;
  --warning: #9a6700;
  --warning-subtle: #fff8c5;
  --badge-read: #1a7f37;
  --badge-write: #cf222e;
  --code-bg: #ffffff;
  --code-text: #1f2328;
  --code-border: rgba(0,0,0,0.10);
  --code-surface: #f5f5f7;
  --code-comment: #6e7781;
  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-number: #0550ae;
  --code-function: #8250df;
  --code-type: #953800;
  --code-variable: #0550ae;
  --code-constant: #116329;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,179,116,0.08), transparent 70%);
  --hero-gradient: linear-gradient(135deg, #1a1a1a 0%, #00b374 100%);
  --radius-xs: 8px;
  --radius-sm: 16px;
  --radius: 24px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --bg-input: rgba(0,0,0,0.04);
  --border-input: transparent;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg: #0a0a0b;
  --bg-secondary: #141415;
  --nav-bg: 29,29,31;
  --bg-card: #141415;
  --border: rgba(255,255,255,0.06);
  --text: #ededef;
  --text-secondary: #9a9a9e;
  --text-muted: #6b6b70;
  --accent: #00d689;
  --accent-hover: #33e0a1;
  --accent-subtle: rgba(0,214,137,0.1);
  --success: #3fb950;
  --success-subtle: rgba(63,185,80,0.1);
  --danger: #f85149;
  --danger-subtle: rgba(248,81,73,0.1);
  --warning: #d29922;
  --warning-subtle: rgba(210,153,34,0.1);
  --badge-read: #3fb950;
  --badge-write: #f85149;
  --code-bg: #0b0c0e;
  --code-text: #d4d4d4;
  --code-border: rgba(255,255,255,0.10);
  --code-surface: #1a1a1e;
  --code-comment: #6a9955;
  --code-keyword: #c586c0;
  --code-string: #ce9178;
  --code-number: #b5cea8;
  --code-function: #dcdcaa;
  --code-type: #4ec9b0;
  --code-variable: #9cdcfe;
  --code-constant: #569cd6;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);
  --glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,214,137,0.12), transparent 70%);
  --hero-gradient: linear-gradient(135deg, #ededef 0%, #00d689 100%);
  --bg-input: rgba(255,255,255,0.06);
  --border-input: transparent;
}

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.2s ease;
}

/* ── Luma focus rings ─────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
button:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-subtle);
  border-radius: inherit;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.125rem 0.4rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--code-border);
}
pre code {
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.5rem; height: 56px;
  background: rgba(var(--nav-bg), 0.65);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
main { padding-top: 56px; }
.nav-logo {
  font-weight: 700; font-size: 1.1rem;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.nav-logo:hover { color: var(--text); text-decoration: none; }
.nav-links { display: flex; gap: 0.25rem; }
.nav-links a {
  position: relative;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover {
  background: var(--border);
  color: var(--text);
  text-decoration: none;
}
.nav-links a.active {
  color: var(--text);
  position: relative;
}
.nav-links a.active::after {
  content: '';
  position: absolute; bottom: -1px; left: 0.75rem; right: 0.75rem;
  height: 2px; background: var(--accent); border-radius: 1px;
}
/* Nav dropdown groups */
.nav-group { position: relative; }
.nav-group-toggle {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border: none; background: none; cursor: pointer;
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-secondary); font-family: inherit;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.nav-group-toggle:hover, .nav-group-active .nav-group-toggle { color: var(--text); background: var(--border); }
.nav-group-dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 160px; padding: 0.375rem;
  background: rgba(var(--nav-bg), 0.70);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 100; margin-top: 0.25rem;
  flex-direction: column;
}
.nav-group:hover .nav-group-dropdown,
.nav-group:focus-within .nav-group-dropdown { display: flex; }
.nav-group-dropdown a {
  display: block; padding: 0.5rem 0.75rem;
  font-size: 0.8125rem; border-radius: var(--radius-sm);
}
.nav-group-dropdown a.active { background: var(--accent-subtle); color: var(--text); }
.nav-group-dropdown a.active::after { display: none; }
/* Flat links hidden on desktop, shown in mobile menu */
.nav-flat-link { display: none !important; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.btn-signin { display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500;
  color: var(--text-secondary); background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: border-color 0.15s, color 0.15s; }
.btn-signin:hover { border-color: var(--text-muted); color: var(--text); }
.btn-signin svg { width: 16px; height: 16px; }


/* ── Hamburger menu ───────────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.375rem 0.5rem;
  cursor: pointer; color: var(--text-secondary);
  align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.nav-hamburger:hover { border-color: var(--text-muted); color: var(--text); }
.nav-hamburger svg { width: 16px; height: 16px; }
.nav-hamburger .close-icon { display: none; }
.nav-hamburger.open .hamburger-icon { display: none; }
.nav-hamburger.open .close-icon { display: block; }

/* ── Theme toggle ──────────────────────────────────────────── */
.theme-toggle {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.375rem 0.5rem;
  cursor: pointer; color: var(--text-secondary);
  line-height: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--text-muted); color: var(--text); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark { display: block; }
[data-theme="dark"] .theme-toggle .icon-light { display: block; }
[data-theme="dark"] .theme-toggle .icon-dark { display: none; }

/* ── User badge ────────────────────────────────────────────── */
.user-menu { position: relative; }
.user-menu-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--text-secondary);
  cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 8px;
  border: 1px solid transparent; background: none;
  transition: border-color 0.15s, background 0.15s;
}
.user-menu-toggle:hover { border-color: var(--border); background: var(--bg-secondary); }
.user-menu-toggle img {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border);
}
.user-menu-toggle .chevron {
  width: 12px; height: 12px; color: var(--text-muted);
  transition: transform 0.2s;
}
.user-menu.open .user-menu-toggle .chevron { transform: rotate(180deg); }
.user-menu-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px;
  background: rgba(var(--nav-bg), 0.70);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 200; padding: 0.375rem 0; overflow: hidden;
}
.user-menu.open .user-menu-dropdown { display: block; }
.user-menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.5rem 0.875rem; border: none; background: none;
  font: inherit; font-size: 0.8125rem; color: var(--text);
  cursor: pointer; text-decoration: none; text-align: left;
  transition: background 0.12s;
}
.user-menu-item:hover { background: var(--bg-secondary); }
.user-menu-item svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.user-menu-divider {
  height: 1px; background: var(--border); margin: 0.375rem 0;
}
.user-menu-item.sign-out { color: var(--danger); }
.user-menu-item.sign-out svg { color: var(--danger); }
.user-badge {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--text-secondary);
}
.user-badge img {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border);
}
.tier-badge {
  display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 999px; font-size: 0.6875rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.user-menu-toggle .tier-badge { font-size: 0.5625rem; padding: 0.0625rem 0.375rem; }
.tier-admin { background: var(--danger-subtle); color: var(--danger); }
.tier-executive { background: var(--warning-subtle); color: var(--warning); }
.tier-operator { background: var(--accent-subtle); color: var(--accent); }
.tier-agent { background: var(--success-subtle); color: var(--success); }
.tier-partner { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 2rem; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem 2rem; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { text-align: center; padding: 4rem 0 2.5rem; position: relative; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--glow); pointer-events: none;
}
.hero h1 {
  font-size: 3rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0.5rem;
  position: relative; z-index: 1;
  background: var(--hero-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p { font-size: 1.125rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; position: relative; z-index: 1; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-md);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.card:hover { box-shadow: var(--shadow-lg); }
.card-grid .card .card-arrow {
  position: absolute; top: 1rem; right: 1rem;
  width: 14px; height: 14px; color: var(--text-muted);
  opacity: 0.5; transition: opacity 0.15s, color 0.15s;
}
.card-grid .card:hover .card-arrow { opacity: 1; color: var(--text-secondary); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 0.25rem;
  background: var(--bg-input);
  border-radius: 999px;
  padding: 0.25rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.tab-btn {
  padding: 0.5rem 1rem;
  background: none; border: none; border-bottom: none;
  border-radius: 999px;
  cursor: pointer; font-size: 0.875rem; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.tab-btn:hover { color: var(--text); background: var(--bg-secondary); }
.tab-btn.active {
  color: var(--text);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Code blocks (GitHub Light / VS Code Dark+) ──────────── */
.code-block {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  color: var(--code-text);
  box-shadow: var(--shadow);
}
.code-block pre {
  padding: 1rem;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
  color: var(--code-text);
}
.code-block code { color: var(--code-text); }
.code-block .copy-btn {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: var(--code-surface); border: 1px solid var(--code-border);
  border-radius: var(--radius-sm); padding: 0.375rem;
  cursor: pointer; font-size: 0.75rem; color: var(--code-comment);
  opacity: 0; transition: opacity 0.15s;
  line-height: 0; display: inline-flex; align-items: center; justify-content: center;
}
.code-block:hover .copy-btn { opacity: 1; }
.code-block .copy-btn:hover { background: var(--code-border); color: var(--code-text); }
.copy-btn.copied { color: var(--code-string); }

/* ── Syntax tokens (custom) ───────────────────────────────── */
.code-block .tok-kw { color: var(--code-keyword); }
.code-block .tok-str { color: var(--code-string); }
.code-block .tok-num { color: var(--code-number); }
.code-block .tok-fn { color: var(--code-function); }
.code-block .tok-cm { color: var(--code-comment); font-style: italic; }
.code-block .tok-ty { color: var(--code-type); }
.code-block .tok-var { color: var(--code-variable); }
.code-block .tok-const { color: var(--code-constant); }

/* ── Pygments syntax highlighting (codehilite) ───────────── */
.highlight { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-sm); overflow: hidden; margin: 0.75rem 0; }
.highlight pre { padding: 1rem; overflow-x: auto; white-space: pre; line-height: 1.6; margin: 0; color: var(--code-text); }
.highlight code { color: var(--code-text); background: none; padding: 0; }
.markdown-body .highlight { margin: 0.75rem 0; }
.markdown-body .highlight pre { background: transparent; border: none; }
/* Keywords */
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn,
.highlight .kp, .highlight .kr, .highlight .kt { color: var(--code-keyword); }
/* Strings */
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa, .highlight .sb,
.highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si,
.highlight .sr, .highlight .ss, .highlight .sx, .highlight .dl { color: var(--code-string); }
/* Numbers */
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .mo, .highlight .il { color: var(--code-number); }
/* Functions & decorators */
.highlight .nf, .highlight .fm, .highlight .nd { color: var(--code-function); }
/* Comments */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .ch,
.highlight .cp, .highlight .cpf, .highlight .cs { color: var(--code-comment); font-style: italic; }
/* Types & classes */
.highlight .nc, .highlight .ne, .highlight .no { color: var(--code-type); }
/* Variables & attributes */
.highlight .nv, .highlight .vi, .highlight .na, .highlight .nb,
.highlight .bp, .highlight .vc, .highlight .vg, .highlight .vm { color: var(--code-variable); }
/* Constants & builtins */
.highlight .ni, .highlight .nn, .highlight .nt { color: var(--code-constant); }
/* Operators & punctuation */
.highlight .o, .highlight .ow { color: var(--code-keyword); }
.highlight .p { color: var(--code-text); }
/* Literal & whitespace */
.highlight .l { color: var(--code-number); }
.highlight .w { color: var(--code-text); }
/* Generic (diffs) */
.highlight .gd { color: var(--code-keyword); }
.highlight .gi { color: var(--code-constant); }
/* Errors */
.highlight .err { color: var(--code-keyword); background: none; }
/* Highlighted line */
.highlight .hll { background: var(--code-surface); display: block; }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 999px; font-size: 0.6875rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-read { background: var(--success-subtle); color: var(--badge-read); }
.badge-write { background: var(--danger-subtle); color: var(--badge-write); }
.badge-milestone {
  background: var(--bg-secondary); color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Access indicators ─────────────────────────────────────── */
.access-granted { color: var(--success); }
.access-denied { color: var(--danger); }

/* ── Tool cards ────────────────────────────────────────────── */
.tools-card-grid {
  grid-template-columns: repeat(2, 1fr);
}
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;
}
.tool-card:hover {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.tool-card h4 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.375rem; }
.tool-card p { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.625rem; line-height: 1.5; }
.tool-card .tool-meta {
  display: flex; gap: 0.25rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 0.5rem;
}
.tool-card .tool-meta .badge {
  font-size: 0.5625rem; padding: 0.0625rem 0.375rem;
  letter-spacing: 0.04em;
}
.tool-card .tool-scope {
  font-size: 0.625rem; color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--bg-secondary);
  padding: 0.0625rem 0.375rem; border-radius: 999px;
  border: 1px solid var(--border);
}

/* ── Namespace headers ─────────────────────────────────────── */
.namespace-group { margin-bottom: 2rem; }
.namespace-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.namespace-header h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.namespace-meta {
  display: flex; align-items: center; gap: 0.5rem;
}
.namespace-meta code {
  font-size: 0.75rem; color: var(--text-muted);
}
.namespace-count {
  font-size: 0.6875rem; color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 0.125rem 0.5rem; border-radius: 999px;
}

/* ── Search / Filter bar ───────────────────────────────────── */
.filter-bar {
  display: flex; gap: 0.75rem; margin-bottom: 1.5rem;
  flex-wrap: wrap; align-items: center;
}
.filter-bar input, .filter-bar select {
  padding: 0.5rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.875rem;
  font-family: var(--font);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.filter-bar input { flex: 1; min-width: 200px; }
.filter-bar input:focus, .filter-bar select:focus {
  outline: none;
  border-color: var(--border-input);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  background: var(--bg-card);
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.8125rem; padding: 0 0 1.5rem;
  flex-wrap: wrap;
}
.breadcrumb-link {
  color: var(--text-muted);
  transition: color 0.15s;
}
.breadcrumb-link:hover { color: var(--accent); text-decoration: none; }
.breadcrumb-sep { color: var(--text-muted); user-select: none; }
.breadcrumb-current { color: var(--text-secondary); font-weight: 500; }

/* ── Docs sidebar ──────────────────────────────────────────── */
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}
.docs-sidebar {
  position: sticky; top: 72px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.docs-sidebar h4 {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 1rem 0 0.5rem;
}
.docs-sidebar h4:first-child { margin-top: 0; }
.docs-sidebar a {
  display: block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.docs-sidebar a:hover {
  background: var(--bg-secondary);
  color: var(--text);
  text-decoration: none;
}
.docs-sidebar a.active {
  background: var(--accent-subtle);
  color: var(--accent);
}
.docs-main {
  min-width: 0;
}
.docs-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.docs-toolbar .breadcrumb { padding: 0; }

/* ── Markdown content ──────────────────────────────────────── */
.markdown-body h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; margin: 1.5rem 0 0.75rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.markdown-body h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin: 1.25rem 0 0.5rem; }
.markdown-body h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; margin: 1rem 0 0.5rem; }
.markdown-body p { margin: 0.75rem 0; }
.markdown-body ul, .markdown-body ol { margin: 0.75rem 0; padding-left: 1.5rem; }
.markdown-body li { margin: 0.25rem 0; }
.markdown-body pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-sm); padding: 1rem; overflow-x: auto; margin: 0.75rem 0; color: var(--code-text); }
.markdown-body code { background: var(--code-bg); color: var(--code-text); padding: 0.125rem 0.375rem; border-radius: var(--radius-xs); font-size: 0.875rem; }
.markdown-body pre code { background: none; padding: 0; color: var(--code-text); }
.markdown-body table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
.markdown-body th { background: var(--bg-secondary); font-weight: 600; }
.markdown-body blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--text-secondary); margin: 0.75rem 0; }
.markdown-body img { max-width: 100%; border-radius: var(--radius-sm); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  cursor: pointer; border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: var(--shadow);
}
.btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  color: #fff; text-decoration: none;
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent; color: var(--accent);
  border-color: var(--border);
}
.btn-outline:hover {
  background: var(--accent-subtle); border-color: var(--accent);
  text-decoration: none;
}

/* ── Expandable tool cards ─────────────────────────────────── */
.tool-card-expandable { cursor: pointer; }
.tool-card-expandable::after {
  content: 'Tap to see parameters';
  display: block; margin-top: 0.5rem;
  font-size: 0.6875rem; color: var(--text-muted);
  transition: opacity 0.15s;
}
.tool-card-expandable:has(.params-table.show)::after {
  content: 'Tap to hide parameters';
}

/* ── Params toggle (legacy) ───────────────────────────────── */
.params-toggle {
  display: none; align-items: center;
  padding: 0.3125rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent; cursor: pointer;
  font-size: 0.75rem; font-weight: 600;
  color: var(--accent);
  font-family: var(--font);
  transition: background 0.15s, border-color 0.15s;
}
.params-toggle:hover {
  background: var(--accent-subtle); border-color: var(--accent);
}
.params-table { display: none; margin-top: 0.75rem; }
.params-table.show { display: block; }
.params-table table {
  font-size: 0.75rem; width: 100%;
  border-collapse: collapse;
}
.params-table th {
  font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.params-table td, .params-table th {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
}
.params-table td code {
  color: var(--accent); font-weight: 600;
  font-size: 0.6875rem;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.8125rem;
  margin-top: 4rem; padding: 3rem 1.5rem 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(6, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.footer-brand {
  display: flex; flex-direction: column; gap: 1.25rem;
}
.footer-brand-logo {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1rem;
  color: var(--text); text-decoration: none;
}
.footer-brand-logo:hover { color: var(--text); text-decoration: none; }
.footer-brand p {
  font-size: 0.8125rem; color: var(--text-secondary);
  line-height: 1.5; max-width: 240px;
}
.footer-social {
  display: flex; gap: 0.75rem;
}
.footer-social a {
  color: var(--text-muted);
  transition: color 0.15s;
  display: inline-flex; align-items: center;
}
.footer-social a:hover { color: var(--text); text-decoration: none; }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 0.75rem;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.footer-col a {
  color: var(--text-secondary); font-size: 0.8125rem;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--text); text-decoration: none; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--text-muted);
}
.footer-bottom-links {
  display: flex; gap: 1rem;
}
.footer-bottom-links a {
  color: var(--text-muted); font-size: 0.75rem;
  transition: color 0.15s;
}
.footer-bottom-links a:hover { color: var(--text-secondary); text-decoration: none; }

/* ── Stats row ─────────────────────────────────────────────── */
.stats {
  display: flex; gap: 1.5rem; justify-content: center;
  margin: 1.5rem 0; flex-wrap: wrap;
}
.stat {
  text-align: center; padding: 1rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); min-width: 120px;
}
.stat-value { font-size: 2rem; font-weight: 800; color: var(--accent); }
.stat-label { font-size: 0.8125rem; color: var(--text-secondary); }

/* ── Status page ──────────────────────────────────────────── */
.status-summary {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600;
  margin-bottom: 2rem;
}
.status-summary-ok {
  background: var(--success-subtle); color: var(--success);
  border: 1px solid var(--success);
}
.status-summary-degraded {
  background: var(--warning-subtle); color: var(--warning);
  border: 1px solid var(--warning);
}
.status-summary-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.status-group { margin-bottom: 2rem; }
.status-group-title {
  font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin-bottom: 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.status-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  background: var(--bg-card);
  transition: background-color 0.2s ease, border-color 0.3s ease;
}
.status-row:hover { background: var(--bg-secondary); }
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-ok { background: var(--success); }
.status-dot-down { background: var(--danger); }
.status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--text-secondary); opacity: 0.8;
}
.status-icon svg { width: 18px; height: 18px; }
.status-name { font-weight: 600; font-size: 0.9375rem; flex: 1; }
.status-label-text {
  font-size: 0.8125rem; font-weight: 500; margin-right: 0.5rem;
}
.status-label-operational { color: var(--success); }
.status-label-unavailable { color: var(--danger); }
.status-badges { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.status-badges .badge {
  font-size: 0.5625rem; padding: 0.0625rem 0.375rem;
  letter-spacing: 0.04em;
}
.status-timestamp-inline {
  color: var(--text-muted); font-size: 0.8125rem;
  font-weight: 400;
}

/* ── Tools chip filters ───────────────────────────────────── */
.tools-chip-filters {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  align-items: center; margin-bottom: 1.5rem;
}
.tools-ns-filters {
  display: flex; gap: 0.375rem; flex-wrap: wrap;
}
.tools-filter-btn {
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.tools-filter-btn:active { transform: translateY(1px); }
.tools-filter-btn:hover {
  border-color: var(--accent); color: var(--text);
}
.tools-filter-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}

/* ── Integrations page ────────────────────────────────────── */
.integration-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 2rem;
}
.integration-filter-btn {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.integration-filter-btn:active { transform: translateY(1px); }
.integration-filter-btn:hover {
  border-color: var(--accent); color: var(--text);
}
.integration-filter-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.integration-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.integration-card:hover {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.integration-card-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.integration-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  color: var(--text-secondary);
}
.integration-icon svg { width: 32px; height: 32px; }
.integration-card-header h3 {
  font-size: 0.9375rem; font-weight: 600;
  margin: 0; line-height: 1.3;
}
.integration-category {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.integration-card-header .status-dot {
  margin-left: auto;
}
.integration-desc {
  font-size: 0.8125rem; color: var(--text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.integration-namespaces {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  margin-bottom: 0.75rem; flex: 1;
}
.integration-namespaces .badge {
  font-size: 0.625rem; padding: 0.125rem 0.5rem;
  letter-spacing: 0.04em;
  text-transform: none; font-weight: 500;
  font-family: var(--font-mono);
}
.integration-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem; font-weight: 600;
  color: var(--accent); background: transparent;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-end;
}
.integration-link:hover {
  background: var(--accent-subtle); border-color: var(--accent);
  text-decoration: none;
}

/* ── Games hero spotlight / slider ────────────────────────── */
.games-hero-spotlight {
  padding: 2rem; margin-bottom: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
  min-height: 180px;
}
.games-hero-spotlight::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent); z-index: 2;
}
.hero-slide {
  display: none; align-items: center; gap: 2rem;
  animation: heroFadeIn 0.4s ease;
}
.hero-slide.active { display: flex; }
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.hero-nav {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 1.25rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.hero-nav:hover { border-color: var(--accent); background: var(--bg-secondary); }
.hero-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin-top: 0.75rem;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: var(--border); cursor: pointer;
  padding: 0; transition: background 0.15s, transform 0.15s;
}
.hero-dot.active {
  background: var(--accent); transform: scale(1.25);
}
.games-hero-icon .game-card-icon {
  width: 80px; height: 80px; font-size: 1.5rem;
}
.games-hero-text h2 {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 0.25rem;
}
.games-hero-subtitle {
  font-size: 1rem; color: var(--accent); font-weight: 600;
  margin-bottom: 0.5rem;
}
.games-hero-desc {
  font-size: 0.9375rem; color: var(--text-secondary);
  line-height: 1.6; margin-bottom: 1rem; max-width: 600px;
}

/* ── Games filters ────────────────────────────────────────── */
.games-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 2rem;
}
.games-filter-btn {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.games-filter-btn:active { transform: translateY(1px); }
.games-filter-btn:hover {
  border-color: var(--accent); color: var(--text);
}
.games-filter-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}

/* ── Games section ────────────────────────────────────────── */
.games-section { margin-bottom: 2.5rem; }
.games-section-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.games-section-header h3 {
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em;
}

/* ── Horizontal scroll row ────────────────────────────────── */
.games-scroll-row {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}
.games-scroll-row::-webkit-scrollbar { height: 6px; }
.games-scroll-row::-webkit-scrollbar-track { background: transparent; }
.games-scroll-row::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: var(--radius-xs);
}
.games-scroll-row::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Game card ────────────────────────────────────────────── */
.game-card {
  min-width: 260px; max-width: 300px; flex-shrink: 0;
  scroll-snap-align: start;
  display: flex; gap: 0.875rem; align-items: flex-start;
  padding: 1rem; overflow: hidden; cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.game-card:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
}
.game-card-icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.875rem;
  flex-shrink: 0; letter-spacing: 0.02em;
}
.game-card-icon-wrap {
  width: 56px; height: 56px; flex-shrink: 0;
  overflow: hidden; border-radius: var(--radius-lg); position: relative;
  background: var(--bg-secondary);
  animation: shd-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
.game-card-icon-wrap.icon-loaded { animation: none; }
.game-card-icon-img {
  width: 100%; height: 100%;
  display: block; object-fit: cover;
}
.game-card-icon-img.icon-hidden { display: none; }
.games-hero-icon .game-card-icon-wrap {
  width: 80px; height: 80px; border-radius: var(--radius-lg);
}
.app-header-icon .game-card-icon-wrap {
  width: 128px; height: 128px; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.game-card-body { flex: 1; min-width: 0; }
.game-card-body h4 {
  font-size: 0.9375rem; font-weight: 600;
  margin-bottom: 0.125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-card-subtitle {
  font-size: 0.75rem; color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.game-card-meta {
  display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap;
}
.badge-platform {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--bg-secondary); color: var(--text-muted);
  border: 1px solid var(--border);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
a.badge-platform { text-decoration: none; cursor: pointer; }
a.badge-platform:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-subtle); text-decoration: none;
}
.badge-platform svg {
  flex-shrink: 0;
  opacity: 0.7;
}
a.badge-platform:hover svg { opacity: 1; }
.game-card-price {
  font-size: 0.6875rem; color: var(--text-muted); font-weight: 500;
}
.badge-coming {
  background: var(--warning-subtle); color: var(--warning);
  font-size: 0.5625rem; padding: 0.0625rem 0.375rem;
  vertical-align: middle;
}

/* ── App Store header ─────────────────────────────────────── */
.app-header {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 2rem 0 1.5rem;
}
.app-header-icon .game-card-icon {
  width: 128px; height: 128px;
  font-size: 2rem; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.app-header-info { flex: 1; min-width: 0; }
.app-title {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 0.125rem; line-height: 1.2;
}
.app-subtitle {
  font-size: 1rem; color: var(--text-secondary); font-weight: 500;
  margin-bottom: 0.25rem;
}
.app-developer {
  font-size: 0.875rem; color: var(--accent); font-weight: 600;
}
.app-header-actions {
  display: flex; flex-direction: column; gap: 0.5rem;
  flex-shrink: 0; align-items: center;
}
.app-store-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  min-width: 140px; padding: 0.625rem 1.5rem;
  border-radius: 999px; font-size: 0.875rem; font-weight: 700;
  text-decoration: none; text-align: center;
  background: var(--accent); color: #fff;
  transition: background 0.15s, box-shadow 0.15s;
}
.app-store-btn:hover {
  background: var(--accent-hover); color: #fff;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0,179,116,0.25);
}
.app-store-btn-gp {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.app-store-btn-gp:hover {
  background: var(--accent-subtle); color: var(--accent);
}
.app-store-btn-tf {
  background: #0d84ff; color: #fff;
  border: 1px solid #0d84ff;
}
.app-store-btn-tf:hover {
  background: #0a6fdb; color: #fff; border-color: #0a6fdb;
}

/* ── Stats ribbon (App Store style) ──────────────────────── */
.app-ribbon {
  display: flex; align-items: stretch;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.875rem 0;
  margin-bottom: 2rem;
  overflow-x: auto;
}
.ribbon-cell {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 1rem;
  border-right: 1px solid var(--border);
  gap: 0.125rem;
}
.ribbon-cell:last-child { border-right: none; }
.ribbon-label {
  font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.ribbon-value {
  font-size: 1rem; font-weight: 700;
  color: var(--text); white-space: nowrap;
}
.ribbon-sub {
  font-size: 0.625rem; color: var(--text-muted);
}

/* ── App sections ─────────────────────────────────────────── */
.app-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.app-section:last-child { border-bottom: none; }
.app-section-title {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.app-section-body {
  font-size: 0.9375rem; color: var(--text-secondary);
  line-height: 1.7;
}
.app-short-desc {
  font-size: 0.9375rem; color: var(--text-primary);
  font-weight: 500; margin-bottom: 0.5rem;
}

/* ── About metadata fields ────────────────────────────── */
.about-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.about-field {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.about-field:last-child { border-bottom: none; }
.about-field-block { flex-direction: column; gap: 0.25rem; }
.about-label {
  font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 140px; flex-shrink: 0;
}
.about-field-block .about-label { min-width: unset; }
.about-value {
  font-size: 0.9375rem; color: var(--text-primary); line-height: 1.6;
}
.about-field-block .about-value { white-space: pre-line; }

/* ── Compliance score badge ───────────────────────────── */
.compliance-score {
  display: inline-block; font-size: 0.8125rem; font-weight: 600;
  background: var(--accent); color: #fff;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  margin-left: 0.5rem; vertical-align: middle;
}

/* ── YouTube embed ──────────────────────────────────────── */
.yt-embed-wrap {
  position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--radius-lg); overflow: hidden;
  background: #000;
}
.yt-embed-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ── Keyword / tag chips ──────────────────────────────────── */
.kw-chips { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.kw-chip, .tag-chip {
  display: inline-block; padding: 0.25rem 0.625rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 500;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.tag-chip {
  background: var(--accent-subtle, rgba(0,179,116,0.1));
  color: var(--accent, #00b374);
  border-color: var(--accent, #00b374);
}

/* ── Competitive chips (legacy) ───────────────────────────── */
.comp-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.comp-chip {
  display: inline-flex; padding: 0.375rem 0.875rem;
  border-radius: 999px; font-size: 0.8125rem; font-weight: 500;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── Competitive landscape (enhanced) ────────────────────── */
.comp-row { align-items: flex-start; }
.comp-row .as-app-get { align-self: center; }
.comp-metrics {
  display: flex; align-items: center; gap: 0.625rem;
  margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-secondary);
}
.comp-stars { display: inline-flex; align-items: center; gap: 0.125rem; }
.comp-stars b { font-size: 0.75rem; margin-left: 0.125rem; color: var(--text-primary); }
.comp-dl, .comp-aso {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  background: var(--bg-secondary); font-size: 0.6875rem; font-weight: 500;
}
.comp-aso { color: var(--accent); }
.comp-positioning {
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  border-radius: var(--radius-lg); background: var(--bg-card);
  border-left: 3px solid var(--accent);
}
.comp-pos-label {
  display: block; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); margin-bottom: 0.375rem;
}
.comp-positioning p { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.comp-differentiators {
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  border-radius: var(--radius-lg); background: var(--bg-card);
  border: 1px solid var(--border);
}
.comp-diff-title {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 0.5rem;
}
.comp-differentiators ul {
  margin: 0; padding-left: 1.25rem;
  list-style: disc; display: grid; gap: 0.375rem;
}
.comp-differentiators li {
  font-size: 0.875rem; color: var(--text-primary); line-height: 1.4;
}


/* ── Information grid (App Store rows) ────────────────────── */
.app-info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
}
.app-info-row {
  display: flex; justify-content: space-between;
  align-items: baseline; padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}
.app-info-row:nth-last-child(-n+2) { border-bottom: none; }
.app-info-label {
  font-size: 0.8125rem; color: var(--text-muted); font-weight: 500;
}
.app-info-value {
  font-size: 0.8125rem; color: var(--text); font-weight: 600;
  text-align: right;
}

/* ── Feature Graphic & Screenshots (game detail) ─────────── */
.feature-graphic-wrap { width:100%; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:0.5rem }
.feature-graphic-wrap img { width:100%; height:auto; display:block; max-height:320px; object-fit:cover }
.screenshots-strip { display:flex; gap:0.75rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:0.5rem; -webkit-overflow-scrolling:touch }
.screenshots-strip img { flex-shrink:0; height:420px; border-radius:var(--radius-lg); scroll-snap-align:start; object-fit:cover }
@media (max-width:768px) { .screenshots-strip img { height:280px } }

/* ── Skeleton placeholder (used across pages) ─────────────── */
.shd-skeleton {
  background: var(--bg-secondary); border-radius: var(--radius-sm);
  animation: shd-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes shd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── App Privacy (game detail) ─────────────────────────────── */
.prv-intro { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.5; }
.prv-intro strong { color: var(--text); }
.prv-intro a { color: #2563eb; text-decoration: none; }
.prv-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 600px) { .prv-cards { grid-template-columns: 1fr; } }
.prv-card {
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  padding: 1.5rem; text-align: center;
}
.prv-card-icon {
  width: 40px; height: 40px; margin: 0 auto 0.75rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.prv-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.375rem; }
.prv-card-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 1rem; }
.prv-categories { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.prv-category { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); }
.prv-category svg { flex-shrink: 0; color: var(--text-muted); }
.prv-footnote { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; }
.prv-footnote a { color: #2563eb; text-decoration: none; }

/* ── Ratings & Reviews (game detail) ───────────────────────── */
.rvw-summary { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.rvw-score { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.rvw-score-label { font-size: 0.8125rem; color: var(--text-muted); }
.rvw-bars { flex: 1; max-width: 240px; }
.rvw-bar-row { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; }
.rvw-bar-stars { font-size: 0; display: flex; gap: 1px; flex-shrink: 0; }
.rvw-bar-stars svg { width: 8px; height: 8px; }
.rvw-bar-track { flex: 1; height: 4px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; }
.rvw-bar-fill { height: 100%; border-radius: 2px; background: var(--text-muted); }
.rvw-total { font-size: 0.8125rem; color: var(--text-muted); margin-left: 0.5rem; white-space: nowrap; }
.rvw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .rvw-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rvw-cards { grid-template-columns: 1fr; } }
.rvw-card {
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  padding: 1.25rem; display: flex; flex-direction: column;
}
.rvw-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.5rem; }
.rvw-card-title { font-size: 0.9375rem; font-weight: 700; flex: 1; line-height: 1.3; }
.rvw-card-date { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; margin-left: 0.5rem; }
.rvw-card-author { font-size: 0.75rem; color: var(--text-muted); }
.rvw-card-stars { margin: 0.375rem 0; display: flex; gap: 1px; }
.rvw-card-stars svg { width: 14px; height: 14px; }
.rvw-card-body {
  font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5;
  flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.rvw-card-more { font-size: 0.8125rem; color: #2563eb; font-weight: 500; margin-top: 0.25rem; cursor: pointer; }

/* ── App Information (game detail — 2-column key-value rows) ── */
.ainf-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem;
}
@media (max-width: 600px) { .ainf-list { grid-template-columns: 1fr; } }
.ainf-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border); gap: 1rem;
}
.ainf-label { font-size: 0.9375rem; color: var(--text-muted); flex-shrink: 0; }
.ainf-value {
  font-size: 0.9375rem; font-weight: 500; text-align: right;
  word-break: break-word; min-width: 0;
}
.ainf-value a { color: #2563eb; text-decoration: none; }
.ainf-value a:hover { text-decoration: underline; }
/* ── ainf-grid (3-col) — used by catalog.py, store ratings, etc ── */
.ainf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
@media (max-width: 768px) { .ainf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ainf-grid { grid-template-columns: 1fr; } }
.ainf-cell { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.ainf-cell .ainf-label { font-size: 0.8125rem; margin-bottom: 0.25rem; }
.ainf-cell .ainf-value { text-align: left; }

.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
.btn-xs { padding: 0.25rem 0.625rem; font-size: 0.75rem; }

/* ── Split-button dropdown ────────────────────────────────── */
.split-btn { position: relative; display: inline-flex; align-items: stretch; }
.split-btn-main {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3rem 0.625rem; font-size: 0.75rem; font-weight: 500;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  cursor: pointer; white-space: nowrap; font-family: var(--font);
}
.split-btn-main:hover { background: var(--bg-secondary); color: var(--text); }
.split-btn-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3rem 0.375rem;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border); border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer; font-family: var(--font);
}
.split-btn-toggle:hover { background: var(--bg-secondary); color: var(--text); }
.split-btn-toggle svg { transition: transform 0.15s; }
.split-btn.open .split-btn-toggle svg { transform: rotate(180deg); }
.split-btn-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 220px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 50; overflow: hidden;
}
.split-btn.open .split-btn-menu { display: block; }
.split-btn-item {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.5rem 0.75rem; cursor: pointer; text-decoration: none;
  color: var(--text); font-size: 0.8125rem; font-family: var(--font);
  border: none; background: none; width: 100%; text-align: left;
}
.split-btn-item:hover { background: var(--bg-secondary); }
.split-btn-item svg { flex-shrink: 0; margin-top: 2px; }
.split-btn-item-text { display: flex; flex-direction: column; }
.split-btn-item-label { font-weight: 500; }
.split-btn-item-desc { font-size: 0.6875rem; color: var(--text-muted); margin-top: 1px; }

/* ── Toast notification ──────────────────────────────────── */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  padding: 0.5rem 1.25rem; border-radius: var(--radius);
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); font-size: 0.8125rem; font-weight: 500;
  display: flex; align-items: center; gap: 0.5rem;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
  z-index: 9999; font-family: var(--font);
}
.toast.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-icon { flex-shrink: 0; }

/* ── Flags grid ───────────────────────────────────────────── */
.flags-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}
.flag-item {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500;
}
.flag-on { background: var(--success-subtle); color: var(--success); }
.flag-off { background: var(--danger-subtle); color: var(--danger); }

/* ── Skills page ──────────────────────────────────────────── */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.skill-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;
}
.skill-card:hover {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.skill-card-meta {
  display: flex; align-items: center; gap: 0.375rem;
}
.skill-category-label {
  font-size: 0.6875rem; font-weight: 500;
  color: var(--text-muted);
}
.skill-id {
  font-size: 0.625rem; font-family: var(--font-mono);
  color: var(--text-muted); opacity: 0.6;
}
.skill-card-title {
  font-size: 0.9375rem; font-weight: 650; margin: 0.125rem 0 0;
  line-height: 1.3; color: var(--text);
}
.skill-card-footer {
  display: flex; justify-content: flex-end;
  margin-top: auto;
}
.skill-card-badges {
  display: flex; gap: 0.375rem; flex-shrink: 0;
}
.skill-desc {
  font-size: 0.8125rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0;
}
.skill-pipeline {
  display: flex; align-items: center; gap: 0.375rem;
  flex-wrap: wrap; padding: 0.625rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.skill-pipeline-step {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  padding: 0.25rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--accent);
  white-space: nowrap;
}
.skill-pipeline-arrow {
  color: var(--text-muted);
  font-size: 0.75rem; font-weight: 600;
}
.skill-output-row {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.75rem; color: var(--text-muted);
  padding: 0.5rem 0.625rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  border-left: 2px solid var(--accent);
}
.skill-output-row svg {
  flex-shrink: 0; margin-top: 0.125rem;
  color: var(--accent); opacity: 0.7;
}
.skill-output-row strong {
  color: var(--text-secondary); margin-right: 0.25rem;
}
.badge-p0 { background: var(--danger-subtle); color: var(--danger); }
.badge-p1 { background: var(--warning-subtle); color: var(--warning); }
.badge-p2 { background: var(--accent-subtle); color: var(--accent); }
.skill-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 2rem;
}
.skill-filter-btn {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.skill-filter-btn:active { transform: translateY(1px); }
.skill-filter-btn:hover {
  border-color: var(--accent); color: var(--text);
}
.skill-filter-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.skill-card-actions {
  display: flex; gap: 0.5rem;
}
.skill-download-btn {
  gap: 0.375rem;
}

/* ── Skills education sections ──────────────────────────── */
.skills-education,
.skills-spec,
.skills-directory,
.skills-prereqs,
.skills-catalog {
  margin-bottom: 3rem;
}
.skills-education h2,
.skills-spec h2,
.skills-directory h2,
.skills-prereqs h2,
.skills-catalog h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.skills-education-lead,
.skills-spec-lead,
.skills-directory-lead,
.skills-prereqs-lead {
  color: var(--text-secondary); font-size: 0.9375rem;
  line-height: 1.6; margin-bottom: 1.5rem; max-width: 680px;
}
.skills-education-lead strong { color: var(--text-primary); }
.skills-education-lead code,
.skills-spec-lead code,
.skills-directory-lead code {
  font-family: var(--font-mono); font-size: 0.85em;
  padding: 0.125rem 0.375rem;
  background: var(--bg-secondary); border-radius: var(--radius-xs);
  color: var(--accent);
}
.skills-how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.skills-how-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.skills-how-num {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; flex-shrink: 0;
}
.skills-how-card h4 {
  font-size: 0.9375rem; font-weight: 700; margin: 0;
}
.skills-how-card p {
  font-size: 0.8125rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0;
}
.skills-how-card code {
  font-family: var(--font-mono); font-size: 0.8em;
  padding: 0.125rem 0.375rem;
  background: var(--bg-secondary); border-radius: var(--radius-xs);
  color: var(--accent);
}
.skills-education-links {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.skills-education-links a {
  color: var(--accent); font-size: 0.875rem; font-weight: 500;
  text-decoration: none;
}
.skills-education-links a:hover { text-decoration: underline; }

/* Skill spec two-column */
.skills-spec-columns {
  display: grid; grid-template-columns: auto 1fr;
  gap: 2rem; margin-bottom: 1.5rem;
}
.skills-spec-structure h4,
.skills-spec-fields h4 {
  font-size: 0.875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); margin: 0 0 0.75rem;
}
.skills-spec-tree {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
  font-family: var(--font-mono); font-size: 0.8125rem;
}
.skills-spec-tree .entity-tree-item {
  padding: 0.25rem 0; display: flex; align-items: center; gap: 0.5rem;
}
.skills-spec-tag {
  font-family: var(--font); font-size: 0.6875rem; font-weight: 600;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  background: var(--accent-subtle); color: var(--accent);
}
.skills-spec-tag.tag-optional {
  background: var(--bg-secondary); color: var(--text-muted);
}

/* Directory structure tree */
.skills-tree-block {
  background: var(--code-bg); border: 1px solid var(--code-border);
  border-radius: var(--radius); overflow-x: auto;
  margin-bottom: 1.5rem;
}
.skills-tree-pre {
  margin: 0; padding: 1.25rem 1.5rem;
  font-family: var(--font-mono); font-size: 0.8125rem;
  line-height: 1.7; color: var(--code-text);
  white-space: pre;
}
.skills-tree-pre .tok-cm {
  color: var(--code-comment); font-style: italic;
}

/* Section divider */
.section-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* Prerequisites card grid */
.skills-prereq-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.25rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.skills-prereq-card:hover {
  border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
}
.skills-prereq-card .skills-prereq-icon {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); border-radius: var(--radius-xs);
  color: var(--text-secondary); flex-shrink: 0;
}
.skills-prereq-card strong {
  font-size: 0.875rem; font-weight: 600;
}
.skills-prereq-desc {
  font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5;
}
.skills-prereq-desc code {
  font-family: var(--font-mono); font-size: 0.8em;
  padding: 0.125rem 0.375rem;
  background: var(--bg-secondary); border-radius: var(--radius-xs);
  color: var(--accent);
}

@media (max-width: 768px) {
  .skills-how-grid { grid-template-columns: 1fr; }
  .skills-spec-columns { grid-template-columns: 1fr; }
  .skills-prereq-card { min-width: 0; }
}

/* ── Agents page ─────────────────────────────────────────── */
.agents-section {
  margin-bottom: 3rem;
}
.agents-section h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.agents-section-sub {
  color: var(--text-secondary); font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

/* Stats banner */
.agents-stats-banner {
  display: flex; justify-content: center; gap: 2.5rem;
  padding: 1.5rem 0; margin-bottom: 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.agents-stat {
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
}
.agents-stat-num {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text-primary);
}
.agents-stat-label {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}

/* Value proposition cards */
.agent-value-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.agent-value-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.agent-value-icon {
  color: var(--accent); margin-bottom: 0.25rem;
}
.agent-value-card h3 {
  font-size: 1rem; font-weight: 700; margin: 0;
}
.agent-value-card p {
  font-size: 0.875rem; color: var(--text-secondary);
  line-height: 1.6; margin: 0;
}

/* Client cards */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;
}
.agent-card:hover {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.agent-card-icon {
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.agent-card-title {
  display: flex; align-items: baseline; gap: 0.5rem;
}
.agent-card h3 {
  font-size: 0.9375rem; font-weight: 600; margin: 0;
}
.agent-card-maker {
  font-size: 0.6875rem; color: var(--text-muted);
  font-weight: 500;
}
.agent-card p {
  font-size: 0.8125rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0;
}

/* Compact client mini-cards */
.client-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.client-mini-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
.client-mini-card:hover { border-color: var(--accent); }
.client-mini-icon {
  color: var(--accent); flex-shrink: 0;
  width: 20px; height: 20px;
}
.client-mini-icon svg { width: 20px; height: 20px; }
.client-mini-body { display: flex; flex-direction: column; }
.client-mini-body strong { font-size: 0.8125rem; font-weight: 600; }
.client-mini-maker { font-size: 0.6875rem; color: var(--text-muted); }
/* 4-column client grid (2 rows × 4 cards) */
.client-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
/* ── Full-width striped config table ───────────────────── */
.agents-config-table-wrap { overflow-x: auto; }
.agents-config-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.8125rem;
}
.agents-config-table th {
  text-align: left; padding: 0.625rem 0.75rem;
  font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.agents-config-table td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.agents-config-table tbody tr:nth-child(odd) {
  background: var(--bg-card);
}
.agents-config-table .field-name {
  color: var(--accent); font-weight: 600;
}

@media (max-width: 768px) {
  .agent-value-grid { grid-template-columns: 1fr; }
  .client-grid-4col { grid-template-columns: repeat(2, 1fr); }
}

/* ── Shared Agents ────────────────────────────────────────── */
.shared-agent-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 2rem;
}
.shared-agent-filter-btn {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.shared-agent-filter-btn:active { transform: translateY(1px); }
.shared-agent-filter-btn:hover {
  border-color: var(--accent); color: var(--text);
}
.shared-agent-filter-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.shared-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.shared-agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;
}
.shared-agent-card:hover {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.shared-agent-card-icon { color: var(--accent); }
.shared-agent-card-body h4 {
  font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.125rem;
}
.shared-agent-role {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.shared-agent-card-body p {
  font-size: 0.8125rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0.375rem 0 0;
}
.shared-agent-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: auto; flex-wrap: wrap;
}
.shared-agent-actions { display: flex; gap: 0.375rem; }
.agent-model-badge {
  display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 999px; font-size: 0.5625rem;
  font-weight: 600; font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.agent-model-opus { background: var(--danger-subtle); color: var(--danger); }
.agent-model-sonnet { background: var(--accent-subtle); color: var(--accent); }

/* ── Benchmark table ────────────────────────────────────── */
.bm-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.bm-filter-btn {
  padding: 0.375rem 1rem; border-radius: 999px;
  border: 1px solid var(--border-input); background: var(--bg-input);
  color: var(--text-secondary); font-size: 0.8125rem;
  font-weight: 500; cursor: pointer;
  transition: all 0.15s, transform 0.1s;
}
.bm-filter-btn:active { transform: translateY(1px); }
.bm-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.bm-filter-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.benchmark-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.8125rem;
}
.benchmark-table th, .benchmark-table td {
  padding: 0.625rem 0.75rem; text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.benchmark-table th {
  font-weight: 600; color: var(--text-secondary);
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; cursor: pointer;
  user-select: none; position: relative;
}
.benchmark-table th:hover { color: var(--accent); }
.benchmark-table th.sort-asc::after { content: " ▲"; font-size: 0.625rem; }
.benchmark-table th.sort-desc::after { content: " ▼"; font-size: 0.625rem; }
.benchmark-table tbody tr { transition: background 0.1s; }
.benchmark-table tbody tr:hover { background: var(--bg-secondary); }
.bm-name { font-weight: 600; color: var(--text-primary); }
.bm-section {
  font-size: 0.75rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cell-good { color: var(--success); font-weight: 600; }
.cell-warn { color: var(--warning); font-weight: 600; }
.cell-bad { color: var(--danger); font-weight: 600; }

/* ── WIP Cockade ───────────────────────────────────────── */
.wip-cockade-wrap { position: relative; }
.wip-cockade {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff; background: var(--warning, #f59e0b);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  pointer-events: none;
  line-height: 1;
}
.wip-cockade svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── Floating Action Button (Suggest) ───────────────────── */
.fab-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: none; cursor: pointer; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.fab-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.suggest-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 1001; display: none; align-items: center; justify-content: center;
}
.suggest-overlay.open { display: flex; }
.suggest-modal {
  position: relative;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
  width: 90%; max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.suggest-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.suggest-close:hover { background: var(--danger-subtle); color: var(--danger); border-color: var(--danger); }
.suggest-close svg { width: 14px; height: 14px; }
.suggest-modal h2 { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; padding-right: 2rem; }
.suggest-modal p.suggest-subtitle { color: var(--text-secondary); font-size: 0.875rem; margin: 0 0 1.25rem; }
.suggest-modal label {
  display: block; font-size: 0.8125rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 0.375rem;
}
.suggest-chips {
  display: flex; flex-wrap: wrap; gap: 0.375rem;
  margin-bottom: 1rem;
}
.suggest-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.suggest-chip-icon { width: 14px; height: 14px; flex-shrink: 0; }
.suggest-chip:hover { border-color: var(--accent); color: var(--accent); }
.suggest-chip.selected {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.suggest-modal input[type="text"],
.suggest-modal textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg-primary); color: var(--text-primary);
  font-family: var(--font); font-size: 0.875rem;
  margin-bottom: 1rem; box-sizing: border-box;
}
.suggest-modal textarea { resize: vertical; min-height: 80px; }
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius-xs);
  padding: 1.25rem; text-align: center;
  color: var(--text-muted); font-size: 0.8125rem;
  cursor: pointer; margin-bottom: 1rem;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.dragover { border-color: var(--accent); background: var(--accent-subtle); }
.dropzone-files { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem; }
.suggest-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.suggest-status {
  font-size: 0.8125rem; margin-top: 0.75rem; text-align: center;
}
.suggest-status.success { color: var(--success); }
.suggest-status.error { color: var(--danger); }

/* ── Quick Setup terminal ─────────────────────────────────── */
.qs-section { margin-bottom: 3rem; }
.qs-terminal {
  display: flex;
  border-radius: var(--radius);
  border: 1px solid var(--code-border);
  overflow: hidden;
  background: var(--code-bg);
  box-shadow: var(--shadow-md);
}
.qs-code-panel {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
}
.qs-dots {
  display: flex; gap: 6px;
  padding: 12px 16px 0;
}
.qs-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.qs-code-panel .code-block pre {
  font-size: 0.8125rem;
  min-height: 160px;
}
.qs-client-list {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--code-border);
  padding: 0.5rem 0;
  min-width: 170px;
  background: var(--bg-card);
}
.qs-client-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-family: var(--font);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-secondary);
  background: none; border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.qs-client-item:hover {
  color: var(--text);
  background: var(--bg-secondary);
}
.qs-client-item .qs-check {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  color: var(--accent);
  flex-shrink: 0;
}
.qs-client-item.active {
  color: var(--text);
  font-weight: 600;
}
.qs-client-item.active .qs-check {
  opacity: 1;
}
@media (max-width: 640px) {
  .qs-terminal { flex-direction: column; }
  .qs-client-list {
    flex-direction: row; flex-wrap: wrap;
    border-left: none; border-top: 1px solid var(--code-border);
    min-width: 0;
  }
  .qs-client-item { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
}

/* ── Access tiers ────────────────────────────────────────── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.tier-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.tier-card:hover {
  box-shadow: var(--shadow-md);
}
.tier-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 0.75rem; gap: 0.5rem;
}
.tier-card-header h3 {
  font-size: 1rem; font-weight: 700; margin: 0;
}
.tier-card-scopes {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.tier-card-audience {
  font-size: 0.75rem; font-weight: 600;
  color: var(--accent); margin: 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tier-card-desc {
  font-size: 0.8125rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0;
}
.tier-card-namespaces {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  margin-top: 0.25rem;
}
.tier-card-namespaces .badge {
  font-size: 0.5625rem; padding: 0.0625rem 0.375rem;
}
.badge-ns-link {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.badge-ns-link:hover {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.tier-browse-btn {
  margin-top: auto; align-self: flex-start;
  font-size: 0.75rem; padding: 0.375rem 1rem;
}

/* ── Tier callout (tools page) ───────────────────────────── */
.tier-callout {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 0.8125rem; color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.tier-callout-icon { font-size: 1rem; flex-shrink: 0; }
.tier-callout a {
  color: var(--accent); font-weight: 600;
  text-decoration: none;
}
.tier-callout a:hover { text-decoration: underline; }

/* ── Tier badges on tool cards ───────────────────────────── */
.badge-tier {
  font-size: 0.5625rem; font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: opacity 0.15s;
}
.badge-tier:hover { opacity: 0.8; }
.badge-tier-admin { background: #cf222e; color: #fff; }
.badge-tier-executive { background: #8250df; color: #fff; }
.badge-tier-operator { background: #0550ae; color: #fff; }
.badge-tier-agent { background: #00b374; color: #fff; }
.badge-tier-partner { background: #9a6700; color: #fff; }

/* ── Prompts page ────────────────────────────────────────── */
.prompt-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 2rem;
}
.prompt-filter-btn {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.prompt-filter-btn:active { transform: translateY(1px); }
.prompt-filter-btn:hover {
  border-color: var(--accent); color: var(--text);
}
.prompt-filter-btn.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
/* ── Dimension tabs (centered, underline) ──────────── */
.dim-tabs {
  display: flex; justify-content: center; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.dim-tab {
  padding: 0.625rem 1.25rem; border: none; background: none;
  color: var(--text-muted); font-size: 0.875rem;
  font-weight: 500; cursor: pointer; position: relative;
  transition: color 0.15s; font-family: var(--font);
  white-space: nowrap;
}
.dim-tab:hover { color: var(--text); }
.dim-tab.active { color: var(--text); font-weight: 600; }
.dim-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--accent); border-radius: 1px;
}
/* ── Prompt tags (dimensional pills on cards) ──────── */
.prompt-tags {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin: 0.5rem 0;
}
.prompt-tag {
  display: inline-block; font-size: 0.6875rem; font-weight: 500;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  line-height: 1.4;
}
.prompt-tag-tool { background: #dbeafe; color: #1e40af; }
.prompt-tag-adapter { background: #fef3c7; color: #92400e; }
.prompt-tag-skill { background: #d1fae5; color: #065f46; }
.prompt-tag-tier { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .prompt-tag-tool { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .prompt-tag-adapter { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .prompt-tag-skill { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .prompt-tag-tier { background: #2e1065; color: #c4b5fd; }
.prompt-section { margin-bottom: 2rem; }
.prompt-section-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem;
}
.prompt-section-header h2 {
  font-size: 1.25rem; font-weight: 700; margin: 0;
}
.role-badge {
  display: inline-block; padding: 0.25rem 0.625rem;
  border-radius: 999px; font-size: 0.6875rem;
  font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.prompt-count {
  font-size: 0.75rem; font-weight: 500;
  color: var(--text-muted);
}
.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.prompt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.prompt-card:hover {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.prompt-label {
  font-size: 0.75rem; font-weight: 600;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.prompt-text {
  color: var(--text-secondary); font-size: 0.875rem;
  line-height: 1.5; margin: 0; flex: 1;
}
.prompt-card-footer {
  margin-top: auto; display: flex; justify-content: flex-end;
}
.prompt-card-footer .btn {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem; gap: 0.375rem;
}

/* ── Integrations mini grid ───────────────────────────────── */
.integrations-mini-grid {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.integration-mini {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 500;
}
.integration-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.integration-on { color: var(--text); }
.integration-off { color: var(--text-muted); }

/* ── Social grid ──────────────────────────────────────────── */
.social-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.social-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px; font-size: 0.8125rem; font-weight: 500;
  border: 1px solid var(--border); color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.social-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.social-pill:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-subtle); text-decoration: none;
}
.social-pill-disabled {
  opacity: 0.35; cursor: default; pointer-events: none;
}

/* ── Store ID row ─────────────────────────────────────────── */
.store-id-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.store-id-row:last-child { border-bottom: none; }
.store-id-label {
  font-size: 0.8125rem; font-weight: 600;
  min-width: 100px; color: var(--text);
}
.store-id-row code { font-size: 0.8125rem; flex: 1; }
.text-muted { color: var(--text-muted); font-size: 0.875rem; }

/* ── Welcome page ─────────────────────────────────────────── */
.welcome-banner {
  text-align: center; padding: 4rem 0 2.5rem;
  position: relative;
}
.welcome-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--glow); pointer-events: none;
}
.welcome-banner > * { position: relative; z-index: 1; }
.welcome-banner h1 {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  background: var(--hero-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome-banner .welcome-subtitle {
  font-size: 1.125rem; color: var(--text-secondary);
  max-width: 600px; margin: 0 auto;
}
.welcome-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid var(--accent);
  margin-bottom: 1rem;
}
.welcome-meta {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.welcome-stats {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.welcome-stat-pill {
  display: inline-block; padding: 0.25rem 0.75rem;
  border-radius: 999px; font-size: 0.8125rem; font-weight: 600;
  background: var(--accent-subtle); color: var(--accent);
}
.welcome-email {
  font-size: 0.8125rem; color: var(--text-muted);
}
.welcome-section { margin-top: 3rem; }
.welcome-section h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

/* ── Stats banner ────────────────────────────────────────── */
.stats-row {
  display: flex; justify-content: center; gap: 3rem;
  margin-top: 2.5rem; padding: 1.5rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.stat-value {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.025em;
  color: var(--accent);
}
.stat-label {
  font-size: 0.75rem; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  .stats-row { gap: 1.5rem; }
  .stat-value { font-size: 1.5rem; }
}

/* ── Prompt grid ─────────────────────────────────────────── */
.prompt-grid-section {
  margin-top: 3rem; text-align: center;
}
.prompt-grid-section h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 0.25rem;
}
.prompt-grid-sub {
  color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.5rem;
}
.prompt-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 640px) {
  .prompt-grid { grid-template-columns: 1fr; }
}
.prompt-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.prompt-card-label {
  font-size: 0.75rem; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.prompt-card-text {
  color: var(--text-secondary); font-size: 0.9375rem;
  line-height: 1.6; margin: 0; flex: 1;
}
.prompt-card-actions {
  display: flex; justify-content: flex-end; margin-top: 0.25rem;
}
.announcements-list {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.announcement-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: background-color 0.2s ease, border-color 0.3s ease;
}
.announcement-card:hover {
  background: var(--bg-secondary);
}
.announcement-header {
  aspect-ratio: 3/1;
  display: flex; align-items: center; justify-content: center;
}
.announcement-body {
  padding: 1.25rem;
}
.announcement-card h3 {
  font-size: 1rem; font-weight: 700; margin-bottom: 0.375rem;
}
.announcement-card p {
  font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5;
}
.announcement-date {
  display: inline-block;
  font-size: 0.75rem; font-weight: 500; color: var(--text-muted);
  margin-top: 0.25rem; margin-bottom: 0.5rem;
}
.announcement-link {
  color: var(--accent); font-size: 0.8125rem; font-weight: 500;
  margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem;
}

/* ── Newsletter ───────────────────────────────────────────── */
.newsletter-section {
  margin-top: 3rem; padding: 2rem 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  max-width: 520px;
}
.newsletter-text h2 {
  font-size: 1.125rem; font-weight: 700;
  margin-bottom: 0.5rem;
}
.newsletter-text p {
  font-size: 0.875rem; color: var(--text-secondary);
  line-height: 1.5; margin-bottom: 1.25rem;
}
.newsletter-form {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.25rem 0.25rem 0.25rem 1.25rem;
  background: var(--bg-secondary);
}
.newsletter-form input[type="email"] {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 0.875rem; color: var(--text); font-family: inherit;
  min-width: 0;
}
.newsletter-form input[type="email"]::placeholder {
  color: var(--text-muted);
}
.newsletter-form .btn-primary {
  flex-shrink: 0; border-radius: 999px;
  padding: 0.5rem 1.25rem; font-size: 0.875rem;
}
.newsletter-status {
  font-size: 0.8125rem; margin-top: 0.75rem;
  min-height: 1.25rem;
}
.newsletter-success { color: var(--success); }
.newsletter-error { color: var(--danger); }
@media (max-width: 600px) {
  .newsletter-section { padding: 1.5rem; }
  .newsletter-form { flex-direction: column; border-radius: var(--radius); padding: 0.375rem; }
  .newsletter-form input[type="email"] { padding: 0.625rem 1rem; }
  .newsletter-form .btn-primary { width: 100%; border-radius: var(--radius-sm); }
}

.quick-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.quick-start-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: background-color 0.2s ease, border-color 0.15s, box-shadow 0.2s ease;
}
.quick-start-card:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.quick-start-card h4 {
  font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.375rem;
}
.quick-start-card p {
  font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5;
  margin: 0;
}

/* ── Kit page ──────────────────────────────────────────────── */
.entity-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.entity-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.entity-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.entity-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.entity-icon {
  flex-shrink: 0;
  color: var(--accent);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
}
.entity-card-title h3 {
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.entity-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 9999px;
}
.entity-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0.125rem 0 0;
}
.entity-command {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--code-surface);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.entity-command-label {
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
}
.entity-command code {
  color: var(--accent);
}
.entity-card-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.entity-card-col h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.entity-path code {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.entity-tree {
  padding: 0.625rem 0.875rem;
  background: var(--code-surface);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.8;
  margin-top: 0.375rem;
}
.entity-tree-item {
  white-space: nowrap;
}
.config-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.config-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.config-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  line-height: 1.5;
}
.config-table td:first-child {
  white-space: nowrap;
  width: 140px;
}
.config-table code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
}
.tiers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.tiers-table th {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.tiers-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.tier-num {
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
}
.tier-name { font-weight: 600; }
.tier-when { color: var(--text-secondary); font-size: 0.8125rem; }
.tier-docs { color: var(--text-secondary); font-size: 0.8125rem; }
.badge-tier-required {
  background: var(--danger-subtle);
  color: var(--danger);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-tier-recommended {
  background: var(--warning-subtle);
  color: var(--warning);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-tier-optional {
  background: var(--success-subtle);
  color: var(--success);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.config-layers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 480px;
}
.config-layer {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.config-layer-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--accent);
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}
.config-layer-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.config-layer-info code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.config-layer-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.config-layer-arrow {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}

/* ── Kickoff pipeline ─────────────────────────────────────── */
.kickoff-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.kickoff-step {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.kickoff-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
}
.kickoff-arrow {
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ── Spec grids (agents/kit educational sections) ─────────── */
.spec-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.spec-table-wrap { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════
   App Store Components (shared)
   ═══════════════════════════════════════════════════════════ */

/* ── Featured story card ─────────────────────────────────── */
.as-featured {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; cursor: pointer;
}
.as-featured-bg {
  position: absolute; inset: 0; z-index: 0;
}
.as-featured-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
}
.as-featured-content {
  position: relative; z-index: 2; padding: 2rem;
}
.as-featured-tag {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; opacity: 0.7;
}
.as-featured-title {
  font-size: 1.75rem; font-weight: 800; line-height: 1.15; margin-top: 0.5rem;
}
.as-featured-subtitle {
  font-size: 0.9375rem; opacity: 0.8; margin-top: 0.375rem; line-height: 1.4;
}
.as-featured-app {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem;
  padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.15);
}
.as-featured-app-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
.as-featured-app-info { flex: 1; min-width: 0; }
.as-featured-app-name { font-size: 0.875rem; font-weight: 600; }
.as-featured-app-desc { font-size: 0.75rem; opacity: 0.6; }
.as-featured-get {
  background: rgba(255,255,255,0.25); color: #fff; border: none; border-radius: 999px;
  padding: 0.375rem 1.25rem; font-size: 0.8125rem; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.as-featured-get:hover { background: rgba(255,255,255,0.35); }

/* ── Side-by-side story cards ────────────────────────────── */
.as-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.as-side-card {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; cursor: pointer;
}
.as-side-card .as-featured-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 75%);
}

/* ── Ranked app list ─────────────────────────────────────── */
.as-ranked-list {
  background: #1c1c1e; border-radius: var(--radius-xl); overflow: hidden;
  padding: 1.5rem;
}
.as-ranked-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem;
}
.as-ranked-header h3 { font-size: 1.25rem; font-weight: 700; color: #fff; }
.as-ranked-header a {
  font-size: 0.875rem; color: #0a84ff; text-decoration: none; font-weight: 500;
}
.as-ranked-item {
  display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.as-ranked-item:last-child { border-bottom: none; }
.as-ranked-num {
  font-size: 1.375rem; font-weight: 700; color: rgba(255,255,255,0.5);
  width: 1.75rem; text-align: center; flex-shrink: 0;
}
.as-ranked-icon {
  width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; color: #fff;
}
.as-ranked-info { flex: 1; min-width: 0; }
.as-ranked-name {
  font-size: 0.9375rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-ranked-desc {
  font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin-top: 0.125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-ranked-btn {
  background: rgba(255,255,255,0.15); color: #0a84ff; border: none;
  border-radius: 999px; padding: 0.375rem 1rem; font-size: 0.8125rem;
  font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.as-ranked-btn:hover { background: rgba(255,255,255,0.25); }

/* ── App list grid ───────────────────────────────────────── */
.as-app-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;
}
.as-app-row {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.75rem; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  transition: background 0.15s;
}
.as-app-row:hover { background: var(--bg-secondary); }
.as-app-icon {
  width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; color: #fff;
}
.as-app-info { flex: 1; min-width: 0; }
.as-app-name {
  font-size: 0.9375rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-app-desc {
  font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-app-get {
  background: var(--bg-secondary); color: var(--accent); border: none;
  border-radius: 999px; padding: 0.375rem 1.125rem; font-size: 0.8125rem;
  font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.as-app-get:hover { background: var(--border); }

/* ── Video preview cards ─────────────────────────────────── */
.as-video-scroll {
  display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.as-video-card {
  flex: 0 0 300px; scroll-snap-align: start; border-radius: var(--radius-xl);
  overflow: hidden; background: var(--bg-card); border: 1px solid var(--border);
}
.as-video-preview {
  position: relative; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
}
.as-video-play {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
}
.as-video-play svg { fill: #fff; margin-left: 3px; }
.as-video-controls {
  position: absolute; bottom: 0.75rem; right: 0.75rem;
  display: flex; gap: 0.5rem;
}
.as-video-ctrl-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: #fff;
}
.as-video-info { padding: 0.875rem; display: flex; align-items: center; gap: 0.75rem; }
.as-video-info .as-app-icon { width: 40px; height: 40px; border-radius: 9px; }

/* ── Category browse cards ───────────────────────────────── */
.as-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.875rem;
}
.as-cat-card {
  border-radius: var(--radius-lg); padding: 1.25rem; min-height: 100px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.as-cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.as-cat-emoji { font-size: 1.75rem; }
.as-cat-name { font-size: 0.9375rem; font-weight: 700; margin-top: 0.75rem; }

/* ── Coming soon cards ───────────────────────────────────── */
.as-soon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.as-soon-card {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 3/4; display: flex; flex-direction: column;
  justify-content: flex-end; color: #fff; cursor: pointer;
}
.as-soon-card .as-featured-bg { border-radius: 0; }
.as-soon-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%);
}
.as-soon-content { position: relative; z-index: 2; padding: 1.25rem; }
.as-soon-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 0.25rem 0.75rem;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.as-soon-title {
  font-size: 1.0625rem; font-weight: 700; margin-top: 0.625rem; line-height: 1.25;
}
.as-soon-date {
  font-size: 0.75rem; opacity: 0.7; margin-top: 0.25rem;
}

/* ── Collection cards ────────────────────────────────────── */
.as-collection {
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
}
.as-collection-hero {
  position: relative; min-height: 220px; display: flex;
  flex-direction: column; justify-content: flex-end; padding: 1.5rem;
  color: #fff;
}
.as-collection-hero .as-featured-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}
.as-collection-hero-tag {
  position: relative; z-index: 2;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; opacity: 0.7;
}
.as-collection-hero-title {
  position: relative; z-index: 2;
  font-size: 1.5rem; font-weight: 800; margin-top: 0.375rem;
}
.as-collection-apps {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  gap: 1rem; padding: 1.25rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start; align-items: flex-start;
}
.as-collection-app {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  flex: 0 0 auto; min-width: 72px; text-align: center;
}
.as-collection-app-icon {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; color: #fff;
}
.as-collection-app-name {
  font-size: 0.6875rem; color: var(--text-secondary); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── SF Symbols category card variant ────────────────────── */
.as-cat-card-sf { align-items: flex-start; }
.as-cat-sf-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.as-cat-sf-icon svg { width: 24px; height: 24px; }

/* (as-soon-icon styles moved to enriched card section below) */

/* ── Feature graphic (static alternative to video) ───────── */
.as-fg-preview {
  position: relative; aspect-ratio: 16/9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem;
}
.as-fg-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9375rem; color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.as-fg-tagline {
  font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── Ranked icon override for app icons ──────────────────── */
.as-ranked-icon .game-card-icon-wrap {
  width: 56px; height: 56px; border-radius: 12px;
}
.as-ranked-icon .game-card-icon {
  width: 56px; height: 56px; border-radius: 12px;
}
.as-featured-app-icon .game-card-icon-wrap {
  width: 44px; height: 44px; border-radius: 10px;
}
.as-featured-app-icon .game-card-icon {
  width: 44px; height: 44px; border-radius: 10px;
}
.as-app-icon .game-card-icon-wrap {
  width: 56px; height: 56px; border-radius: 12px;
}
.as-app-icon .game-card-icon {
  width: 56px; height: 56px; border-radius: 12px;
}

/* ── App Card: Search Result (Screenshots + Artwork) ─────── */
.as-search-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
}
@media (max-width: 900px) { .as-search-grid { grid-template-columns: 1fr; } }
.as-search-card {
  background: #1c1c1e; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.as-search-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem;
}
.as-search-icon {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9375rem; color: #fff;
}
.as-search-info { flex: 1; min-width: 0; }
.as-search-name {
  font-size: 1rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-search-subtitle {
  font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin-top: 0.125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-search-rating {
  display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem;
}
.as-search-stars { display: inline-flex; gap: 1px; align-items: center; }
.as-search-count { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.as-search-view {
  background: none; color: #0a84ff; border: none;
  font-size: 1.0625rem; font-weight: 600; cursor: pointer;
  padding: 0.375rem 1rem; border-radius: 999px; flex-shrink: 0;
  white-space: nowrap;
}
.as-search-view:hover { color: #409cff; }

/* Screenshots variant */
.as-search-screenshots {
  display: flex; gap: 0.625rem; padding: 0 1.25rem 1.25rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.as-search-ss-item {
  flex: 0 0 calc(33.333% - 0.4167rem); min-width: 150px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0;
}
.as-search-ss-caption {
  background: rgba(255,255,255,0.06); border-radius: 12px 12px 0 0;
  padding: 0.75rem 0.75rem 0.5rem; text-align: center;
}
.as-search-ss-caption-title {
  font-size: 0.8125rem; font-weight: 700; color: #fff; line-height: 1.3;
}
.as-search-ss-caption-sub {
  font-size: 0.6875rem; color: rgba(255,255,255,0.5); margin-top: 0.125rem;
  line-height: 1.3;
}
.as-search-ss-phone {
  position: relative; border-radius: 0 0 12px 12px; overflow: hidden;
  aspect-ratio: 9/16; display: flex; flex-direction: column;
  align-items: center; padding-top: 0.75rem;
}
.as-search-ss-notch {
  width: 40%; height: 6px; background: rgba(0,0,0,0.6);
  border-radius: 0 0 6px 6px; margin-bottom: 0.5rem;
}
.as-search-ss-screen {
  flex: 1; width: 88%; background: rgba(255,255,255,0.04);
  border-radius: 4px; margin: 0 auto 0.5rem;
}

/* Artwork variant */
.as-search-artwork {
  position: relative; margin: 0 1.25rem 1.25rem; border-radius: 12px;
  overflow: hidden; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem;
}
.as-search-artwork-text {
  font-size: 1.375rem; font-weight: 800; color: #fff; line-height: 1.2;
  max-width: 55%; z-index: 1;
}
.as-search-artwork-phone {
  position: relative; width: 30%; aspect-ratio: 9/16;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 0.5rem;
}
.as-search-artwork-phone .as-search-ss-notch {
  background: rgba(0,0,0,0.15);
}
.as-search-artwork-phone .as-search-ss-screen {
  background: rgba(0,0,0,0.05);
}

/* ── Story cards (New & Trending) ─────────────────────────── */
.exp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.as-story-card {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  cursor: pointer; border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.as-story-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.as-story-bg {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-xl);
}
.as-story-content {
  position: relative; z-index: 1; display: flex; align-items: center;
  gap: 0.75rem; padding: 1rem 1.25rem;
}
.as-story-icon { flex-shrink: 0; }
.as-story-icon .game-card-icon-wrap { width: 48px; height: 48px; border-radius: 10px; }
.as-story-icon .game-card-icon { width: 48px; height: 48px; border-radius: 10px; }
.as-story-info { flex: 1; min-width: 0; }
.as-story-name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-story-subtitle { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.125rem; }

/* ── Coming soon — enriched cards ────────────────────────── */
.as-soon-content {
  position: relative; z-index: 2; padding: 1.25rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; height: 100%; justify-content: center;
}
.as-soon-icon { margin-bottom: 0.5rem; }
.as-soon-icon .game-card-icon-wrap { width: 56px; height: 56px; border-radius: 14px; }
.as-soon-icon .game-card-icon { width: 56px; height: 56px; border-radius: 14px; }
.as-soon-cat {
  display: inline-block; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 0.2rem 0.625rem; margin-bottom: 0.375rem;
}
.as-soon-subtitle { font-size: 0.75rem; opacity: 0.7; margin-top: 0.25rem; }
.as-soon-platforms { display: flex; gap: 0.375rem; margin-top: 0.5rem; justify-content: center; }
.as-soon-platforms .badge-platform { color: rgba(255,255,255,0.7); }
.as-soon-notify {
  margin-top: 0.75rem; background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 999px;
  padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.as-soon-notify:hover { background: rgba(255,255,255,0.35); }
.as-soon-test {
  background: #0d84ff; border-color: #0d84ff; text-decoration: none;
  display: inline-block;
}
.as-soon-test:hover { background: #0a6fdb; border-color: #0a6fdb; color: #fff; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .integration-grid { grid-template-columns: repeat(2, 1fr); }
  .entity-card-body { grid-template-columns: 240px 1fr; }
}
@media (max-width: 768px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; max-height: none; }
  .hero h1 { font-size: 2.25rem; }
  .stats { gap: 0.75rem; }
  .stat { min-width: 100px; padding: 0.75rem 1rem; }
  .stat-value { font-size: 1.5rem; }
  /* Nav — hamburger menu */
  .nav { flex-wrap: wrap; overflow: visible; gap: 0.5rem; padding: 0 0.75rem; }
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none; width: 100%; flex-direction: column;
    border-top: 1px solid var(--border); order: 10;
    position: absolute; top: 56px; left: 0; right: 0;
    background: var(--bg-card); padding: 0.5rem 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-group { display: none; }
  .nav-flat-link { display: flex !important; }
  .nav-links a { min-height: 44px; padding: 0.75rem 0.5rem; font-size: 0.8125rem; white-space: nowrap; display: flex; align-items: center; }
  .nav-links a.active::after { display: none; }
  .nav-links a.active { background: var(--accent-subtle); border-radius: var(--radius-sm); }
  .nav-right { order: 5; }
  .nav-logo { font-size: 0.9375rem; flex-shrink: 0; }
  .container { padding: 0 1rem; }
  /* Grid single-column fallbacks */
  .card-grid { grid-template-columns: 1fr; }
  .tools-card-grid { grid-template-columns: 1fr; }
  .integration-grid { grid-template-columns: 1fr; }
  .skill-grid { grid-template-columns: 1fr; }
  .shared-agent-grid { grid-template-columns: 1fr; }
  .prompt-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .agent-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .entity-card-body { grid-template-columns: 1fr; }
  .entity-card-top { flex-direction: column; align-items: flex-start; }
  .tiers-table { font-size: 0.75rem; overflow-x: auto; display: block; }
  .tiers-table th, .tiers-table td { padding: 0.375rem 0.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col ul { gap: 0.25rem; }
  .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
  .hero-slide { flex-direction: column; text-align: center; gap: 1rem; }
  .hero-nav { display: none; }
  .app-header { flex-direction: column; text-align: center; gap: 1rem; }
  .app-header-icon .game-card-icon { width: 96px; height: 96px; font-size: 1.5rem; border-radius: var(--radius-xl); }
  .app-header-icon .game-card-icon-img { width: 96px; height: 96px; border-radius: var(--radius-xl); }
  .app-ribbon { flex-wrap: wrap; }
  .ribbon-cell { min-width: 33%; padding: 0.5rem; border-right: none; }
  .app-info-grid { grid-template-columns: 1fr; }
  .game-card { min-width: 220px; }
  /* Split-button overflow cap */
  .split-btn-menu { min-width: min(220px, calc(100vw - 2rem)); }
  /* FAB position adjustment */
  .fab-btn { bottom: 1rem; right: 1rem; }
  /* Table responsive */
  .markdown-body table { display: block; overflow-x: auto; }
  .params-table { overflow-x: auto; }
  /* App Store components */
  .as-side-grid { grid-template-columns: 1fr; }
  .as-app-grid { grid-template-columns: 1fr; }
  .as-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .as-soon-grid { grid-template-columns: 1fr 1fr; }
  .exp-grid-2 { grid-template-columns: 1fr; }
  /* Touch targets — 44px minimum */
  .tools-filter-btn, .integration-filter-btn, .shared-agent-filter-btn,
  .prompt-filter-btn, .skill-filter-btn, .bm-filter-btn,
  .tab-btn, .theme-toggle, .breadcrumb-link,
  .footer-bottom-links a, .suggest-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col a { padding: 0.25rem 0; display: inline-block; }
  /* Newsletter stacks */
  .newsletter-form { flex-direction: column; }
  /* Quick setup stacks */
  .qs-terminal { flex-direction: column; }
}