:root {
  --body:#0b0f16;
  --shell:#171c25;
  --shell2:#10151d;
  --rail:#0e131b;
  --railLine:#232b38;
  --stage:#edf1f5;
  --stageLine:#d6dde8;
  --card:#fbfcfe;
  --cardSoft:#f4f7fb;
  --cardLine:#dbe3ee;
  --ink:#101828;
  --ink2:#1d2939;
  --muted:#667085;
  --muted2:#8a94a6;
  --gold:#c9a86a;
  --violet:#7a67ee;
  --teal:#43c9d8;
  --green:#12b981;
  --yellow:#f59e0b;
  --red:#ef5c6c;
  --shadow:0 30px 60px rgba(0,0,0,.28);
  --cardShadow:0 10px 24px rgba(16,24,40,.07);
  --radius:18px;
  --radius2:22px;
  --max:1600px;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; min-height:100%; }
body {
  background:
    radial-gradient(1100px 620px at 20% -20%, rgba(122,103,238,.22), transparent 55%),
    radial-gradient(1000px 600px at 100% 0%, rgba(67,201,216,.14), transparent 52%),
    linear-gradient(180deg, #0b0f16 0%, #0e1219 100%);
  color:var(--ink);
  font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.shell {
  max-width: var(--max);
  min-height: calc(100vh - 28px);
  margin: 14px auto;
  padding: 10px;
  background: linear-gradient(180deg, var(--shell), var(--shell2));
  border:1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 68px minmax(0,1fr);
  gap:10px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
}
body.ready .shell { opacity:1; transform:none; }
body.leaving .shell { opacity:0; transform:translateY(8px); }
.rail {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--railLine);
  border-radius: 18px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.brand {
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(135deg, var(--gold), #eed3a1 35%, var(--teal) 100%);
  display:grid; place-items:center; color:#111318; font-weight:800; letter-spacing:-.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 18px rgba(0,0,0,.22);
}
.rail nav { display:grid; gap:8px; margin-top:8px; }
.rail-link {
  position:relative;
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; color:#cfd6e3;
  border:1px solid transparent; background: rgba(255,255,255,.02);
  transition:.18s ease;
}
.rail-link:hover, .rail-link.active {
  border-color: rgba(201,168,106,.35);
  background: linear-gradient(180deg, rgba(201,168,106,.18), rgba(122,103,238,.14));
  color:#fff;
}
.rail-link::after {
  content: attr(data-label);
  position:absolute; left:56px; top:50%; transform:translateY(-50%) scale(.98);
  background:#10151d; color:#eef2f8; border:1px solid var(--railLine);
  padding:7px 10px; border-radius:10px; white-space:nowrap; font-size:12px; opacity:0; pointer-events:none;
}
.rail-link:hover::after { opacity:1; transform:translateY(-50%) scale(1); }
.rail-spacer { flex:1; }
.rail-mini {
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  color:#dce4ef; border:1px solid var(--railLine); background:rgba(255,255,255,.02);
}
.app {
  background: var(--stage);
  border:1px solid rgba(255,255,255,.05);
  border-radius: 18px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
}
.topbar {
  background: linear-gradient(180deg, #2a313d 0%, #2e3643 100%);
  color:#eef2f7;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:12px 18px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
}
.top-left, .top-right { display:flex; align-items:center; gap:10px; }
.top-right { justify-content:flex-end; }
.chrome-dot { width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.22); }
.breadcrumb { color:#dce4ef; font-size:13px; }
.breadcrumb strong { font-weight:700; }
.mode {
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.09); color:#fff;
  padding:8px 12px; border-radius:999px; font-size:12px; letter-spacing:.02em;
}
.top-btn {
  background: linear-gradient(135deg, #3b4452, #303846); color:#fff; border:1px solid rgba(255,255,255,.08);
  padding:9px 13px; border-radius:12px; font-weight:600;
}
.top-btn.primary {
  background: linear-gradient(135deg, var(--gold), #f0dba9 35%, var(--teal));
  color:#111318; border:none;
}
.stage {
  padding:14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 16%),
    linear-gradient(180deg, #eff3f7 0%, #e8edf4 100%);
}
.lane {
  background: linear-gradient(180deg, var(--card) 0%, var(--cardSoft) 100%);
  border:1px solid var(--cardLine);
  border-radius: 18px;
  min-height: 640px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  box-shadow: var(--cardShadow);
}
.lane-head {
  padding:14px 14px 10px;
  border-bottom:1px solid var(--cardLine);
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
}
.lane-title { font-weight:800; color:var(--ink2); letter-spacing:-.02em; }
.lane-sub { color:var(--muted); font-size:12px; margin-top:3px; }
.lane-chip {
  padding:6px 8px; border-radius:999px; background:#fff; border:1px solid var(--cardLine);
  color:#475467; font-size:11px; font-weight:700;
}
.lane-body { padding:14px; overflow:auto; display:grid; gap:12px; align-content:start; }
.lane-foot {
  padding:12px 14px; border-top:1px solid var(--cardLine); display:grid; gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.8));
}
.micro-input {
  min-height:46px; border-radius:14px; border:1px solid var(--cardLine); background:#fff; color:#111827;
  padding:12px 14px; display:flex; align-items:center;
}
.mini-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn {
  padding:9px 11px; border-radius:12px; border:1px solid var(--cardLine); background:#fff; color:var(--ink2); font-weight:700;
}
.btn.primary {
  background: linear-gradient(135deg, var(--gold), #f0dba9 35%, var(--teal)); border:none; color:#111318;
}
.btn.dark {
  background:linear-gradient(135deg, #242c38, #1a212c); color:#fff; border:1px solid #313b49;
}
.btn.small { padding:7px 9px; font-size:12px; }
.card, .signal, .result, .log, .config, .stat-grid > div, .project-card {
  background:#fff;
  border:1px solid var(--cardLine);
  border-radius:16px;
  padding:12px;
}
.card.soft, .signal.soft, .result.soft, .log.soft, .config.soft {
  background:#f7f9fc;
}
.card h4, .project-card h4, .result h4, .signal h4 { margin:0 0 6px; font-size:14px; color:var(--ink2); }
.card p, .project-card p, .result p, .signal p, .log p, .config p { margin:0; color:var(--muted); }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tag-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.tag {
  padding:5px 8px; border-radius:999px; background:#f3f6fa; border:1px solid var(--cardLine); color:#475467; font-size:11px; font-weight:700;
}
.status { padding:5px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.s-ok { background:rgba(18,185,129,.12); color:#0f9f70; }
.s-warn { background:rgba(245,158,11,.14); color:#b07608; }
.s-bad { background:rgba(239,92,108,.12); color:#cb3549; }
.kpi { font-size:28px; font-weight:800; letter-spacing:-.04em; color:var(--ink); }
.kpi-sub { color:var(--muted); font-size:12px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.timeline { display:grid; gap:10px; }
.step { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; }
.step-num {
  width:26px; height:26px; border-radius:10px; background:rgba(122,103,238,.10); border:1px solid rgba(122,103,238,.16);
  color:var(--violet); display:grid; place-items:center; font-size:12px; font-weight:800;
}
.checklist { display:grid; gap:10px; }
.check {
  display:flex; align-items:flex-start; gap:10px;
}
.check i {
  width:18px; height:18px; border-radius:6px; border:1px solid var(--cardLine); background:#fff; margin-top:2px;
  display:inline-grid; place-items:center; color:transparent; font-style:normal; font-size:12px;
}
.check.done i { background:rgba(18,185,129,.12); border-color:rgba(18,185,129,.22); color:var(--green); }
.signal, .result, .project-card, .nav-row, .interactive { transition:.18s ease; cursor:pointer; }
.signal:hover, .result:hover, .project-card:hover, .interactive:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,24,40,.06); }
.signal.active, .result.active, .project-card.active, .nav-row.active {
  border-color: rgba(201,168,106,.72);
  box-shadow: inset 0 0 0 1px rgba(201,168,106,.3), 0 8px 20px rgba(16,24,40,.06);
}
.code {
  background:#0f1722; color:#d4dbe8; border-radius:14px; border:1px solid #1e2a39; padding:12px;
  font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow:auto;
}
.log { font-size:12px; }
.log strong { display:block; color:var(--ink2); margin-bottom:4px; }
.result-price { font-weight:800; color:var(--ink2); }
.domain-name { font-size:17px; font-weight:800; letter-spacing:-.03em; }
.quote-banner {
  background: linear-gradient(135deg, rgba(201,168,106,.18), rgba(67,201,216,.12));
  border:1px solid rgba(201,168,106,.3);
  border-radius:16px; padding:12px 14px; color:var(--ink2);
}
.quote-banner strong { display:block; }
.section-label { color:var(--muted2); text-transform:uppercase; letter-spacing:.12em; font-size:11px; }
.select {
  width:100%; border-radius:12px; border:1px solid var(--cardLine); padding:10px 12px; background:#fff;
}
.searchbar { display:flex; gap:8px; }
.searchbar input {
  flex:1; border-radius:14px; border:1px solid var(--cardLine); padding:12px 14px; background:#fff;
}
.progress {
  height:9px; background:#f2f5f9; border:1px solid var(--cardLine); border-radius:999px; overflow:hidden;
}
.progress > span { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gold), var(--teal)); transition:width .25s ease; }
.badges { display:flex; gap:8px; flex-wrap:wrap; }
.badge {
  padding:6px 8px; border-radius:999px; background:#f4f7fb; border:1px solid var(--cardLine); color:#475467; font-size:11px; font-weight:800;
}
.empty-note { color:var(--muted2); font-size:12px; padding:10px 0; }
.dock {
  background: linear-gradient(180deg, #eff3f7, #e7edf5);
  border-top:1px solid var(--stageLine);
  padding:12px 14px;
  display:grid; grid-template-columns: 1fr auto 1fr; gap:10px; align-items:center;
}
.dock-left, .dock-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dock-right { justify-content:flex-end; }
.dock-center { text-align:center; color:var(--muted); font-size:12px; }
.ghost-link {
  padding:8px 10px; border-radius:999px; background:#fff; border:1px solid var(--cardLine); color:var(--ink2); font-weight:700;
}
.toast {
  position:fixed; right:24px; bottom:24px; background:#10151d; color:#fff; border:1px solid #303844;
  padding:12px 14px; border-radius:14px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s ease;
  box-shadow:0 18px 35px rgba(0,0,0,.28); z-index:99;
}
.toast.show { opacity:1; transform:none; }
.table { width:100%; border-collapse:collapse; font-size:12px; }
.table td { padding:8px 0; border-bottom:1px solid var(--cardLine); color:var(--muted); }
.table td:first-child { color:var(--ink2); font-weight:700; }
.legend { display:flex; gap:8px; flex-wrap:wrap; }
.legend .dot {
  width:9px; height:9px; display:inline-block; border-radius:999px; margin-right:6px;
}
.inline-kv { display:grid; grid-template-columns: auto 1fr; gap:8px 12px; font-size:12px; }
.inline-kv strong { color:var(--ink2); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.callout {
  padding:12px; border-radius:14px; background:#f7f9fc; border:1px dashed #c9d2df; color:var(--muted);
}
@media (max-width: 1380px) {
  .stage { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail { display:none; }
  .topbar { grid-template-columns:1fr; }
  .top-right, .top-left { justify-content:flex-start; }
  .dock { grid-template-columns:1fr; }
  .dock-left, .dock-right, .dock-center { justify-content:flex-start; text-align:left; }
}
@media (max-width: 700px) {
  .stage { grid-template-columns: 1fr; }
  .lane { min-height: auto; }
}