:root{
  --bg:#0b0d10;           /* page background */
  --panel:#11151a;        /* card background */
  --muted:#8b97a3;        /* secondary text */
  --text:#e6edf3;         /* primary text */
  --brand:#60a5fa;        /* brand accent (can swap later) */
  --ok:#22c55e;           /* green */
  --bad:#ef4444;          /* red */
  --ring:0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
}

/* XO Vault Theme Variables */
:root {
  --color-bg-dark: #0e1117;
  --color-bg-panel: rgba(18,22,27,0.85);
  --color-bg-panel-light: rgba(18,22,27,0.55);
  --color-border-light: rgba(255,255,255,0.06);

  --color-text-main: #e6edf3;
  --color-text-muted: #9aa4b2;
  --color-text-accent: #93c5fd;

  --color-accent: #6366f1;
  --color-accent-light: #818cf8;
  --color-accent-gradient-start: #60a5fa;
  --color-accent-gradient-end: #93c5fd;
  --color-verified: #22c55e;

  --font-sans: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.5);
}

/* XO Constellation gradient tokens */
:root {
  --grad-accent: linear-gradient(90deg, var(--color-accent-gradient-start), var(--color-accent-gradient-end));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 80% -10%, #0f1216 0%, var(--bg) 55%);
  color:var(--text);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

.container{
  max-width:1100px;
  margin:48px auto 96px;
  padding:0 20px;
}

.headbar{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(120%) blur(6px);
  background:linear-gradient(180deg, var(--color-bg-panel), var(--color-bg-panel-light));
  border-bottom:1px solid var(--color-border-light);
}
.headbar-inner{
  max-width:1100px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}
.headbar-spacer{ width:40px; flex:0 0 auto }
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.brand img {
  height: 28px;
  width: auto;
  display: block;
}
.brand .dot{display:none}
.tabs{display:flex; gap:12px}
.toolbar{ border-top:1px solid var(--color-border-light); backdrop-filter:saturate(120%) blur(6px); min-height:44px; display:flex; align-items:center }
.toolbar > .toolbar-left,
.toolbar > .toolbar-right{ max-width:1100px; width:100%; margin:0 auto; padding:6px 20px; display:flex; gap:12px }
.toolbar > .toolbar-left{ justify-content:flex-start }
.toolbar > .toolbar-right{ justify-content:flex-end }
.toolbar .input,.toolbar .select,.toolbar .btn{ height:32px; border-radius:10px; padding:0 10px; background:rgba(255,255,255,.06); color:var(--color-text-main); border:1px solid rgba(255,255,255,.08) }
.toolbar .btn:hover{ background:rgba(255,255,255,.10) }
.legend{ display:flex; align-items:center; gap:14px }
.legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block }
.legend .dot.live{ background: var(--color-accent-light) }
.legend .dot.sealed{ background: #facc15 }
.legend .dot.draft{ background: #e879f9 }

/* Toolbar chips */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
  background:rgba(255,255,255,.08); color:var(--color-text-main);
  border:1px solid var(--color-border-light);
}
.tab{color:#9aa4b2; text-decoration:none; padding:6px 10px; border-radius:8px}
.tab:hover{background:rgba(255,255,255,0.06); color:#e6edf3}
.tab.is-active{background:rgba(99,102,241,0.12); color:#e6edf3}
.nav a{color:var(--muted); margin-left:16px}
.nav a.active,.nav a:hover{color:var(--text)}

.hero{
  margin:28px 0 18px; display:flex; align-items:center; justify-content:space-between; gap:16px
}
.hero h1{font-size:22px; margin:0}
.hero .sub{color:var(--muted)}

.grid{display:grid; gap:16px}
@media (min-width:900px){ .grid{grid-template-columns: 1fr 1fr} }

.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--ring);
}

.kv{display:grid; grid-template-columns: 160px 1fr; gap:10px; margin:8px 0}
.kv div:nth-child(odd){color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background:#12161b; color:var(--text); cursor:pointer;
}
.btn:hover{background:#161b21}
.btn.ok{border-color:rgba(34,197,94,.3)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:600}
.badge.ok{background:rgba(34,197,94,.12); color:var(--ok); border:1px solid rgba(34,197,94,.35)}
.badge.fail{background:rgba(239,68,68,.12); color:var(--bad); border:1px solid rgba(239,68,68,.35)}

/* optional: consistent badge hook */
[data-verify-badge]{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:12px; line-height:1; font-weight:600;
  background:rgba(255,255,255,0.06); color:#9aa4b2;
}
[data-verify-badge].is-ok{ background:rgba(34,197,94,0.18); color:#86efac }
[data-verify-badge].is-fail{ background:rgba(239,68,68,0.18); color:#fca5a5 }

.footer{
  margin:48px 0 24px; color:var(--muted); text-align:center; font-size:12px;
  opacity:.85;
}

/* Gradient utilities (for SVG/HTML elements) */
.gradient-stroke{ stroke: url(#grad-accent); stroke-width: 2 }
.gradient-dot{ background: var(--grad-accent); border-radius:50%; width:8px; height:8px; display:inline-block }

/* Defensive: hide any legacy page toolbar containers */
.page-toolbar{ display:none !important }


/* Hide legacy SVG prototype stage on Constellation (canvas takes over) */
#stage{ display:none }

/* Tooltip for constellation hover */
.hint{
  position:fixed; z-index:50; pointer-events:none;
  background: color-mix(in oklab, var(--color-bg-panel), black 6%);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-main);
  padding: .35rem .55rem;
  font-size: .825rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translate(12px, 12px);
  white-space: nowrap;
}
.hint .muted{ color: var(--color-text-muted); margin-left: .5rem }