/* ============================================================
   Agent Company · show.sydnb.shop · unified site shell (applies to /me /admin /admin/grants /ideas /bugs /terms /privacy /disclaimer)
   Designer v2 editorial palette. Single source of truth.
   ============================================================ */
html[lang="en"] [data-zh], html[lang="zh"] [data-en] { display:none; }
body { margin:0; background: var(--bg,#faf9f5); color: var(--fg,#1f1b18); font-family: var(--f-body-zh,'Noto Serif SC',Georgia,serif); }

/* Accent per page (set on body element) */
body[data-accent="teal"]   { --page-accent: var(--accent,#2a8a7a); }
body[data-accent="amber"]  { --page-accent: var(--amber,#b8860b); }
body[data-accent="coral"]  { --page-accent: var(--coral,#c15f3c); }
body[data-accent="ochre"]  { --page-accent: #8b5a3c; }
body:not([data-accent]) { --page-accent: var(--accent,#2a8a7a); }

.site-shell { min-height:100vh; display:flex; flex-direction:column; }

/* TOPBAR — identical everywhere */
.site-top { display:flex; align-items:center; justify-content:space-between; gap:16px;
           min-height:64px; box-sizing:border-box; padding: 0 clamp(20px,4vw,48px);
           border-bottom:1px solid color-mix(in srgb, var(--rule,#d8d1c5) 72%, transparent);
           background: color-mix(in srgb, var(--bg,#faf9f5) 88%, transparent);
           backdrop-filter: blur(14px); position: sticky; top:0; z-index:10; }
.site-top .brand { display:flex; align-items:center; gap:10px; font-family: var(--f-display,'Fraunces',serif);
                  font-size:17px; font-weight:560; color: var(--fg); text-decoration:none; letter-spacing:0; white-space:nowrap; }
.site-top .brand svg { flex:none; }
.site-top .nav { display:flex; align-items:center; flex-wrap:nowrap; gap:2px; padding:4px;
                 border:1px solid color-mix(in srgb, var(--fg,#1f1b18) 12%, transparent);
                 border-radius:999px; background: color-mix(in srgb, var(--paper,#fffdf8) 86%, transparent);
                 font-family: var(--f-mono,'IBM Plex Mono',monospace); font-size:11.5px; }
.site-top .nav a { display:inline-flex; align-items:center; justify-content:center; min-height:32px;
                  box-sizing:border-box; color: var(--muted,#756f66); text-decoration:none;
                  padding: 0 12px; border-radius: 999px; border:1px solid transparent;
                  transition: background 150ms, color 150ms, border-color 150ms; white-space:nowrap; }
.site-top .nav a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg,#1f1b18) 6%, transparent); }
.site-top .nav a.active { color: var(--fg); background: color-mix(in srgb, var(--fg,#1f1b18) 7%, transparent); }
.site-top .nav a.join-link { background: var(--fg,#1f1b18); color: var(--cream,#fffdf8); padding-inline:14px; }
.site-top .nav a.join-link:hover { background: color-mix(in srgb, var(--fg,#1f1b18) 88%, var(--page-accent,#2a8a7a)); color: var(--cream,#fffdf8); }
.site-top .nav a.account-link { gap:7px; padding:3px 12px 3px 5px; color: var(--fg); background: transparent;
                                border-color: color-mix(in srgb, var(--fg,#1f1b18) 13%, transparent); }
.site-top .nav a.account-link:hover,
.site-top .nav a.account-link.active { background: color-mix(in srgb, var(--fg,#1f1b18) 7%, transparent); }
.site-top .account-mark { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
                         background: var(--fg,#1f1b18); color: var(--cream,#fffdf8); }
@media (max-width: 760px) {
  .site-top { min-height:58px; flex-wrap:nowrap; gap:12px; padding:0 16px; }
  .site-top .brand { min-width:0; font-size:16px; gap:8px; }
  .site-top .brand svg { width:19px; height:19px; }
  .site-top .nav { flex:none; width:auto; padding:3px; gap:1px; font-size:11px; }
  .site-top .nav a { min-height:30px; padding:0 9px; }
  .site-top .nav a.join-link { padding-inline:11px; }
  .site-top .nav a.account-link { padding:2px 9px 2px 4px; gap:5px; }
  .site-top .account-mark { width:20px; height:20px; }
}
@media (max-width: 360px) {
  .site-top { padding:0 12px; gap:8px; }
  .site-top .brand { font-size:15px; }
  .site-top .nav a { padding-inline:7px; }
  .site-top .nav a.join-link { padding-inline:9px; }
}

/* HERO — optional; width auto */
.site-hero { padding: clamp(32px,4vw,56px) clamp(20px,4vw,48px) 32px;
            background: linear-gradient(155deg, color-mix(in srgb, var(--page-accent) 10%, transparent), rgba(248,244,232,0.85) 55%, var(--bg));
            border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.site-hero::before { content:""; position:absolute; inset:0;
    background-image: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--page-accent) 18%, transparent), transparent 55%);
    pointer-events:none; }
.site-hero-inner { position:relative; max-width:1280px; margin:0 auto; display:grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(28px,4vw,48px); align-items:end; }
@media (max-width: 900px) { .site-hero-inner { grid-template-columns: 1fr; align-items:start; } }

.site-kicker { font-family: var(--f-mono,monospace); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color: var(--muted); margin:0 0 14px; }
.site-title { font-family: var(--f-display,serif); font-size: clamp(28px,4.2vw,46px); font-weight:400; line-height:1.08; margin:0 0 12px; font-variation-settings:"opsz" 72; }
.site-title em { color: var(--page-accent); font-style:italic; font-weight:650; }
.site-sub { color: var(--muted); font-size: 0.98rem; line-height:1.7; max-width:700px; margin:0 0 20px; }
.site-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-family: var(--f-mono,monospace); font-size:12px; font-weight:500; background: var(--page-accent); color: var(--cream,#fffdf8); }

/* MAIN — single container */
.site-main { flex:1; max-width:1280px; margin:0 auto; width:100%; box-sizing:border-box;
            padding: clamp(32px,4vw,48px) clamp(20px,4vw,48px); display:grid; gap: 20px; }
.site-main.with-sidebar { grid-template-columns: 220px minmax(0,1fr); gap: clamp(24px,3vw,40px); }
.site-main.narrow { max-width: 720px; }
@media (max-width: 900px) { .site-main.with-sidebar { grid-template-columns: 1fr; } }

.site-sidebar { position: sticky; top: 78px; align-self: start; font-family: var(--f-mono,monospace); font-size: 12.5px; }
.site-sidebar h4 { font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color: var(--muted); margin:0 0 10px; font-weight: 500; }
.site-sidebar ul { list-style:none; margin:0 0 22px; padding:0; }
.site-sidebar li a { display:block; padding: 10px 14px; border-radius: 6px; color: var(--fg); text-decoration:none; margin-bottom: 2px; }
.site-sidebar li a:hover { background: var(--rule,rgba(0,0,0,0.04)); }
.site-sidebar li.active a { background: var(--page-accent); color: var(--cream,#fffdf8); }

/* PANEL — the unit of content everywhere */
.panel { background: var(--paper,#fffdf8); border:1px solid var(--rule); border-radius: 10px; padding: clamp(20px,2.5vw,28px); }
.panel h2 { margin:0 0 6px; font-family: var(--f-display,serif); font-size: clamp(19px,2.2vw,24px); font-weight:500; font-variation-settings: "opsz" 48; }
.panel p.hint { color: var(--muted); font-family: var(--f-mono,monospace); font-size: 11px; line-height:1.7; margin: 0 0 16px; }

/* Stats grid (bp / ownership / invested) */
.stats { display:grid; grid-template-columns: repeat(3, minmax(120px,1fr)); gap:1px; background: var(--rule); border:1px solid var(--rule); border-radius:10px; overflow:hidden; }
.stats > div { background: var(--paper); padding: 18px 22px; }
.stats dt { margin:0 0 6px; font-family: var(--f-mono,monospace); font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color: var(--muted); }
.stats dd { margin:0; font-family: var(--f-display,serif); font-size: clamp(24px,3vw,32px); font-weight:350; line-height:1.05; color: var(--fg); }
.stats dd.accent { color: var(--page-accent); }
.stats dd .unit { font-size:13px; color: var(--muted); font-weight:400; margin-left:4px; }

/* Form */
.field { margin-bottom: 14px; }
.label { display:block; font-family: var(--f-mono,monospace); font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color: var(--muted); margin-bottom: 6px; }
.input, .textarea, .select { width:100%; padding: 11px 14px; font-size: 0.95rem; font-family: inherit;
   background: var(--bg,#faf9f5); border:1px solid var(--rule); border-radius:6px; color: var(--fg);
   transition: border-color 150ms, box-shadow 150ms; box-sizing: border-box; }
.input:focus, .textarea:focus, .select:focus {
   outline:none; border-color: var(--page-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent) 15%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.55; }
.textarea { min-height: 90px; resize: vertical; line-height:1.65; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 11px 18px;
       font-family: var(--f-mono,monospace); font-size:12.5px; letter-spacing:0.04em;
       border-radius:6px; border:1px solid var(--rule); background: var(--paper); color: var(--fg);
       text-decoration:none; cursor:pointer; transition: all 150ms; white-space: nowrap; }
.btn:hover { border-color: var(--page-accent); color: var(--page-accent); }
.btn-primary { background: var(--page-accent); border-color: var(--page-accent); color: var(--cream,#fffdf8); }
.btn-primary:hover { filter: brightness(1.08); color: var(--cream); border-color: var(--page-accent); }
.btn-sm { padding: 7px 12px; font-size:11.5px; }
.btn-block { width:100%; }

/* Pills / badges */
.tier-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-family: var(--f-mono,monospace); font-size:12px; font-weight:500; }
.tier-pill.observer { background: var(--paper); color: var(--muted); border:1px solid var(--rule); }
.tier-pill.governance { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tier-pill.core { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.tier-pill.board { background: var(--accent); color: var(--cream,#fffdf8); }
.tier-pill.founder { background: var(--amber,#b8860b); color: var(--cream,#fffdf8); }

/* Alerts */
.alert { margin:0 0 16px; padding: 12px 16px; border-radius: 6px; font-family: var(--f-mono,monospace); font-size:12px; line-height:1.6; }
.alert.ok { border:1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.alert.err { border:1px solid var(--coral,#c15f3c); background: color-mix(in srgb, var(--coral) 8%, transparent); color: #8a3d20; }
.alert.warn { border:1px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--fg); }

/* Tables */
table.data-table { width:100%; border-collapse: collapse; font-size: 0.9rem; }
table.data-table th { text-align:left; font-family: var(--f-mono,monospace); font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--rule); white-space:nowrap; }
table.data-table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table small { display:block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

/* Empty state */
.empty { color: var(--muted); font-size: 0.9rem; padding: 20px 0; text-align: center; }