/* Shared theme for every dashboard / docs / legal page. Mirrors the
   cipher-interactive site (tailwind.config.ts + app/globals.css): near-black
   ground, hairline #24282e borders, amber accent, Geist Sans + Geist Mono with
   monospace labels. Linked LAST in each page's <head> so it wins over the
   page's own inline rules at equal specificity; the variables below are the
   single place the palette lives. */

@font-face{font-family:'Geist';src:url('/fonts/GeistVF.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/GeistMonoVF.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  /* cipher-interactive tokens: bg / panel / line / ink / dim / accent */
  --bg:#0b0c0e;
  --panel:#111316;
  --line:#24282e;
  --ink:#e6e8eb;
  --dim:#8a919c;
  --accent:#f0b429;

  /* Names the pages already use, mapped onto the tokens above */
  --surface:#111316;
  --card:#14171b;
  --card-hover:#191d22;
  --elevated:#1a1e23;
  --border:#24282e;
  --text:#e6e8eb;
  --muted:#8a919c;
  --muted2:#5f6672;
  --accent-hover:#dcaa27;
  --accent-soft:rgba(240,180,41,.12);
  --on-accent:#0b0c0e;
  --success:#34d399;
  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.12);
  --warn:#f0b429;

  /* webhooks.html's own names */
  --surf2:#14171b;
  --accent2:#f5c451;
  --red:#f87171;
  --green:#34d399;

  --radius:12px;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html,body{font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--bg);color:var(--text)}
button,input,select,textarea{font-family:inherit}
code,pre,kbd,samp{font-family:var(--mono)}

::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#343a42}

a{color:var(--accent)}

/* ── Topbar: sticky hairline bar, logo mark + wordmark, mono nav ───────── */
.topbar{
  background:rgba(11,12,14,.95);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line);
  height:56px;
}
.topbar-logo,.topbar h1{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
}
.topbar-logo::before,.topbar h1::before{
  content:"";flex-shrink:0;width:24px;height:24px;border-radius:6px;
  background:url('/CipherInteractive.jpg') center/cover no-repeat;
}
.topbar-logo span{color:inherit}
.topbar-nav{gap:4px}
.topbar-nav a{
  font-family:var(--mono);font-size:13px;color:var(--dim);
  background:none;border-radius:6px;padding:5px 10px;
}
.topbar-nav a:hover{background:none;color:var(--ink);text-decoration:none}
.topbar-nav a.active{background:none;color:var(--accent)}
.topbar-right a,.user a{font-family:var(--mono)}
.topbar-right a:hover,.user a:hover{color:var(--ink)}
.guild-badge{font-family:var(--mono);border-radius:999px}
.user-info img,.user img{border:1px solid var(--line)}

/* ── Type: semibold + tight tracking like the site's headings ──────────── */
h1,h2,h3,
.page h1,.page-header-text h1,.main .section-title,.modal-title,.state-box h3{
  font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.page-header-text p,.section-sub,.modal-sub{color:var(--dim)}
/* overview page: small tracked mono section labels + stat labels */
.page .section-title,.stat-label{font-family:var(--mono);font-weight:500;letter-spacing:.05em;color:var(--dim)}

/* ── Buttons: amber primary (dark text), hairline secondary ────────────── */
.btn{border-radius:8px;font-weight:500;letter-spacing:0}
.btn-primary,.btn-success{background:var(--accent);color:var(--on-accent);border:none}
.btn-primary:not(:disabled):hover,.btn-success:not(:disabled):hover{background:var(--accent);opacity:.9}
.btn-ghost,.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:not(:disabled):hover,.btn-secondary:not(:disabled):hover{background:transparent;border-color:var(--dim);color:var(--ink);opacity:1}
.btn-danger{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(248,113,113,.3)}
.btn-danger:not(:disabled):hover{background:rgba(248,113,113,.2)}

/* ── Labels: mono, uppercase, tracked (site's "font-mono text-xs uppercase tracking-wider text-dim") ── */
.field label,.f-key-label,.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;color:var(--dim);
}
th{font-family:var(--mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}

/* ── Surfaces: bordered panels, hover border lifts like OfferingCards ─── */
.card,.stat-card,.link-card{border-radius:var(--radius)}
.modal{border-radius:16px;background:var(--panel);border-color:var(--line)}
.overlay{background:rgba(0,0,0,.7)}

/* ── Overview quick-link cards: title + arrow + mono path, like the site's SystemRow ── */
.link-card-top{justify-content:space-between}
.link-arrow{font-family:var(--mono);color:var(--dim);transition:transform .12s,color .12s}
.link-card.enabled:hover .link-arrow{color:var(--accent);transform:translateX(2px)}
.link-card.enabled:hover{border-color:rgba(138,145,156,.5)}
.link-card.enabled:hover .link-title{color:var(--accent)}
.link-path{font-family:var(--mono);font-size:11.5px;color:rgba(230,232,235,.7);margin-top:2px}

/* ── Inputs ────────────────────────────────────────────────────────────── */
input[type=text],input[type=search],input[type=number],input[type=url],input[type=password],textarea,select,
.field input,.field textarea,.field select{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:8px;
}
input[type=text]:focus,input[type=search]:focus,input[type=number]:focus,input[type=url]:focus,input[type=password]:focus,textarea:focus,select:focus,
.field input:focus,.field textarea:focus,.field select:focus,.dd-btn:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:rgba(138,145,156,.7)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.dd-btn,.dd-drop,.dd-search,#hbg{background-color:var(--bg)}
.dd-search input{background:var(--card)}
.dd-btn{border-color:var(--line)}
.dd-drop{border-color:var(--line);background:var(--panel)}
.dd-search{background:var(--panel)}

/* ── Sidebar nav (config.html) ─────────────────────────────────────────── */
.sidebar{background:var(--bg);border-right:1px solid var(--line)}
.nav-item{border-radius:8px;font-family:var(--mono);font-size:13px}
.nav-item:hover{background:var(--card);color:var(--ink)}
.nav-item.active{background:var(--accent-soft);color:var(--accent)}
.nav-item.active .nav-count{background:rgba(0,0,0,.35);color:var(--ink)}
.dd-opt.selected{color:var(--ink);background:var(--accent-soft)}
.savebar{background:var(--panel);border-color:var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5)}

/* ── Chips, tags, pills ────────────────────────────────────────────────── */
.tag,.scope-chip{background:var(--accent-soft);border:1px solid rgba(240,180,41,.3);color:var(--ink)}
.scope-chip{color:var(--accent);font-family:var(--mono)}
.f-key,.key-prefix,.bind-type-badge,.tx-type-badge{font-family:var(--mono)}
.type-pill.active{color:var(--accent);background:var(--accent-soft);border-color:rgba(240,180,41,.35)}
.scope-opt:has(input:checked),.type-opt:has(input:checked){border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.06)}

/* ── Feedback ──────────────────────────────────────────────────────────── */
.toast-msg,.t{background:var(--panel);border-color:var(--line);border-radius:8px}
.spinner{border-color:var(--line);border-top-color:var(--accent)}
.banner{background:var(--panel)}

/* ── Utility: the site's dotted-grid hero backdrop ─────────────────────── */
.grid-bg{position:relative;overflow:hidden}
.grid-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(#2a2f36 1px,transparent 1px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at top left,#000,transparent 75%);
  mask-image:radial-gradient(ellipse at top left,#000,transparent 75%);
}
.grid-bg>*{position:relative}

/* ── Terminal panel: the site's "health" card ──────────────────────────── */
.term{background:rgba(17,19,22,.9);border:1px solid var(--line);border-radius:12px;font-family:var(--mono);font-size:13px;box-shadow:0 25px 50px -12px rgba(0,0,0,.4)}
.term-head{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--dim)}
.term-body{padding:16px}
.term .prompt{color:var(--accent)}

/* ── Legal / docs prose ────────────────────────────────────────────────── */
strong{color:var(--ink)}
code{background:var(--panel);border-color:var(--line)}
.intro{background:var(--panel);border-color:var(--line)}

/* Emoji used as empty/error-state icons: keep them from clashing with the palette */
.state-box .icon,.empty-state .ei{filter:grayscale(1);opacity:.6}

/* Shared session-expired banner (dashboard-client.js) */
.ci-session-expired{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 44px 10px 16px;background:var(--panel,#16191d);border-bottom:1px solid var(--warn);color:var(--warn);font-size:13px}
.ci-session-expired a{color:var(--text);text-decoration:underline}
.ci-session-expired-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--warn);font-size:18px;cursor:pointer;line-height:1}