/* ═══════ SkeinDB Research Track — Shared Styles ═══════ */
:root {
  --bg: #09090b;
  --bg-card: #18181b;
  --bg-card-hover: #1f1f23;
  --border: #27272a;
  --border-accent: #3f3f46;
  --text: #fafafa;
  --text-secondary: #a1a1aa;
  --text-dim: #71717a;
  --accent: #6366f1;
  --accent-light: #818cf8;
  --green: #10b981;
  --amber: #f59e0b;
  --cyan: #06b6d4;
  --rose: #f43f5e;
  --purple: #a855f7;
  --radius: 12px;
  --radius-sm: 8px;
}

/* Area color themes — set --area, --area-bg, --area-border per page */
.area-storage    { --area:#6366f1; --area-bg:rgba(99,102,241,.1);  --area-border:rgba(99,102,241,.25); }
.area-security   { --area:#f43f5e; --area-bg:rgba(244,63,94,.1);   --area-border:rgba(244,63,94,.25); }
.area-web        { --area:#10b981; --area-bg:rgba(16,185,129,.1);  --area-border:rgba(16,185,129,.25); }
.area-ai         { --area:#a855f7; --area-bg:rgba(168,85,247,.1);  --area-border:rgba(168,85,247,.25); }
.area-consistency{ --area:#06b6d4; --area-bg:rgba(6,182,212,.1);   --area-border:rgba(6,182,212,.25); }
.area-devtools   { --area:#f59e0b; --area-bg:rgba(245,158,11,.1);  --area-border:rgba(245,158,11,.25); }
.area-systems    { --area:#818cf8; --area-bg:rgba(129,140,248,.1); --area-border:rgba(129,140,248,.25); }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

/* ─── NAV ─── */
nav {
  position:sticky; top:0; z-index:100;
  background:rgba(9,9,11,.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 2rem;
}
.nav-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:56px;
}
.nav-logo {
  font-size:1.1rem; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--accent-light),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-decoration:none;
}
.nav-links { display:flex; gap:1.5rem; }
.nav-links a {
  color:var(--text-secondary); text-decoration:none;
  font-size:.85rem; font-weight:500; transition:color .2s;
}
.nav-links a:hover { color:var(--text); }
.nav-gh {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-card); border:1px solid var(--border);
  padding:6px 14px; border-radius:20px;
  color:var(--text); text-decoration:none; font-size:.82rem; font-weight:500;
  transition:border-color .2s, background .2s;
}
.nav-gh:hover { border-color:var(--accent); background:var(--bg-card-hover); }
.nav-gh svg { width:16px; height:16px; fill:currentColor; }

/* ─── HERO ─── */
.hero {
  max-width:900px; margin:0 auto; padding:4rem 2rem 2rem;
}
.hero-back {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--text-secondary); text-decoration:none;
  font-size:.85rem; font-weight:500; margin-bottom:2rem;
  transition:color .2s;
}
.hero-back:hover { color:var(--text); }
.hero-back svg { width:16px; height:16px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--area-bg); border:1px solid var(--area-border);
  padding:6px 14px; border-radius:20px;
  font-size:.78rem; font-weight:600; color:var(--area);
  margin-bottom:1rem;
}
.hero h1 {
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900; letter-spacing:-.03em;
  line-height:1.15; margin-bottom:1rem;
}
.hero .abstract {
  font-size:1rem; color:var(--text-secondary);
  line-height:1.8; max-width:750px;
}

/* ─── CONTENT ─── */
.content { max-width:900px; margin:0 auto; padding:2rem; }

/* ─── NOVELTY CARD ─── */
.novelty-card {
  background:linear-gradient(135deg,var(--area-bg),transparent);
  border:1px solid var(--area-border);
  border-radius:var(--radius); padding:2rem; margin-bottom:2.5rem;
}
.novelty-card h2 {
  font-size:1.1rem; font-weight:700; margin-bottom:1rem;
  display:flex; align-items:center; gap:8px;
}
.novelty-card h2 .badge {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  background:var(--area); color:#fff; padding:2px 8px;
  border-radius:4px; letter-spacing:.04em;
}
.novelty-card ul { list-style:none; }
.novelty-card li {
  padding:.4rem 0 .4rem 1.5rem; position:relative;
  font-size:.9rem; color:var(--text-secondary); line-height:1.6;
}
.novelty-card li::before {
  content:'→'; position:absolute; left:0;
  color:var(--area); font-weight:600;
}

/* ─── SECTIONS ─── */
.section { margin-bottom:3rem; }
.section h2 {
  font-size:1.15rem; font-weight:800; margin-bottom:1.25rem;
  display:flex; align-items:center; gap:10px;
}
.section h2 .icon {
  width:28px; height:28px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; background:var(--area-bg);
}

/* ─── PHASES ─── */
.phase {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:1.25rem 1.5rem;
  margin-bottom:.75rem; transition:border-color .2s;
}
.phase:hover { border-color:var(--border-accent); }
.phase h3 {
  font-size:.9rem; font-weight:700; margin-bottom:.5rem;
  color:var(--area);
}
.phase p {
  font-size:.85rem; color:var(--text-secondary); line-height:1.7;
}

/* ─── HYPOTHESES ─── */
.hypo {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:1rem 1.25rem;
  margin-bottom:.5rem;
}
.hypo-id {
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem; font-weight:600; color:var(--area);
  background:var(--area-bg); border-radius:4px;
  padding:2px 8px; white-space:nowrap; margin-top:2px;
}
.hypo p { font-size:.85rem; color:var(--text-secondary); line-height:1.6; }

/* ─── REFERENCES ─── */
.ref-list { list-style:none; }
.ref-list li {
  padding:.6rem 0; border-bottom:1px solid var(--border);
  font-size:.85rem; color:var(--text-secondary);
}
.ref-list li:last-child { border-bottom:none; }

/* ─── INTEGRATION CHIPS ─── */
.integration {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.75rem;
}
.int-chip {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:.6rem 1rem;
  font-size:.8rem; text-align:center; color:var(--text-secondary);
}

/* ─── STATUS BAR ─── */
.status-bar {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.5rem;
  display:flex; align-items:center; gap:12px; margin-bottom:2rem;
}
.status-dot { width:10px; height:10px; border-radius:50%; }
.status-dot.proposal { background:var(--amber); }
.status-dot.scaffold { background:var(--cyan); }
.status-dot.implemented { background:var(--green); }
.status-text { font-size:.85rem; color:var(--text-secondary); }
.status-text strong { color:var(--text); }

/* ─── PREV/NEXT NAV ─── */
.nav-tracks {
  display:flex; justify-content:space-between;
  margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border);
}
.nav-track {
  color:var(--text-secondary); text-decoration:none;
  font-size:.85rem; font-weight:500; transition:color .2s;
}
.nav-track:hover { color:var(--text); }
.nav-track.next { margin-left:auto; }

/* ─── FOOTER ─── */
footer {
  border-top:1px solid var(--border);
  padding:3rem 2rem; text-align:center;
}
footer p { color:var(--text-dim); font-size:.82rem; }
footer a { color:var(--accent-light); text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* ─── RESPONSIVE ─── */
@media(max-width:640px) {
  .integration { grid-template-columns:1fr 1fr; }
  .nav-tracks { flex-direction:column; gap:1rem; }
  .hypo { flex-direction:column; gap:6px; }
}