:root {
  --color-void: #050506;
  --color-panel: #111215;
  --color-surface: #1C1D22;
  --color-ink-line: #27272A;
  --color-ink-faint: #18181B;
  --color-text-pure: #FFFFFF;
  --color-text-muted: #71717A;
  --color-text-dark: #3F3F46;
  --color-enten-gold: #EAB308;
  --color-aka-crimson: #DC2626;
  --color-kuro-cyan: #06B6D4;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --rail-width: 292px;
  --rail-collapsed-width: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-void); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--color-void);
  color: var(--color-text-pure);
  text-rendering: geometricPrecision;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .32;
}
button, input, select, textarea { font: inherit; }
button, .file-button {
  min-height: 42px;
  border: 1px solid var(--color-text-pure);
  border-radius: 0;
  background: var(--color-text-pure);
  color: var(--color-void);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
button:hover, .file-button:hover { background: var(--color-void); color: var(--color-text-pure); }
button.ghost {
  background: transparent;
  color: var(--color-text-pure);
  border-color: var(--color-ink-line);
}
button.ghost:hover { background: var(--color-text-pure); color: var(--color-void); }
button.danger { border-color: var(--color-aka-crimson); color: var(--color-aka-crimson); background: transparent; }
button.danger:hover { background: var(--color-aka-crimson); color: var(--color-text-pure); }
.file-button input { display: none; }
input, select, textarea {
  width: 100%;
  background: var(--color-void);
  color: var(--color-text-pure);
  border: 1px solid var(--color-ink-line);
  border-radius: 0;
  padding: 12px;
  outline: none;
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--color-kuro-cyan); }
code {
  font-family: var(--font-mono);
  color: var(--color-kuro-cyan);
  background: #000;
  padding: 2px 5px;
  border: 1px solid var(--color-ink-faint);
}
a { color: var(--color-kuro-cyan); }

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
}
.app-shell.rail-collapsed { grid-template-columns: var(--rail-collapsed-width) minmax(0, 1fr); }
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: #070708;
  border-right: 1px solid var(--color-ink-line);
  padding: 18px;
  z-index: 5;
}
.rail-toggle {
  width: 38px;
  min-height: 38px;
  padding: 0;
  margin-bottom: 14px;
  border-color: var(--color-ink-line);
  background: transparent;
  color: var(--color-text-muted);
}
.rail-toggle:hover { color: var(--color-text-pure); background: var(--color-surface); }
.brand-block {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-ink-line);
}
.brand-mark {
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-text-pure);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 24px;
  background: var(--color-void);
}
.brand-block h1 {
  margin: 0;
  font-size: 16px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .12em;
}
.brand-block p { margin: 6px 0 0; color: var(--color-text-muted); font-size: 12px; }
.nav-stack { display: grid; gap: 0; margin: 20px 0; border: 1px solid var(--color-ink-line); }
.nav-stack a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 13px 12px;
  border-bottom: 1px solid var(--color-ink-faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 900;
}
.nav-stack a:last-child { border-bottom: 0; }
.nav-stack a:hover { color: var(--color-text-pure); background: var(--color-surface); }
.constraint-box {
  border: 1px solid var(--color-ink-line);
  border-left: 3px solid var(--color-enten-gold);
  padding: 14px;
  background: var(--color-panel);
}
.constraint-box.danger { border-left-color: var(--color-aka-crimson); }
.constraint-box strong { display: block; font-size: 24px; letter-spacing: -.03em; margin: 6px 0; }
.constraint-box p { margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.rail-collapsed .rail { padding: 14px 12px; overflow: hidden; }
.rail-collapsed .brand-block { grid-template-columns: 1fr; justify-items: center; }
.rail-collapsed .brand-copy,
.rail-collapsed .nav-stack,
.rail-collapsed .constraint-box { display: none; }
.rail-collapsed .rail-toggle { width: 48px; }

.main-grid {
  min-width: 0;
  padding: 22px;
  display: grid;
  gap: 18px;
  max-width: 1760px;
}
.panel, .hero-panel, .section-panel {
  position: relative;
  background: var(--color-panel);
  border: 1px solid var(--color-ink-line);
}
.panel-cut::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-left: 1px solid var(--color-ink-line);
  border-bottom: 1px solid var(--color-ink-line);
  background: var(--color-void);
}
.hero-panel {
  display: grid;
  grid-template-columns: 1.4fr minmax(280px, .8fr);
  gap: 22px;
  padding: 28px;
  min-height: 240px;
}
.hero-panel h2 {
  margin: 8px 0 14px;
  max-width: 940px;
  font-size: clamp(46px, 7vw, 112px);
  line-height: .82;
  letter-spacing: -.085em;
  font-weight: 900;
}
.hero-copy { font-size: 20px; letter-spacing: .02em; color: var(--color-text-pure); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}
.eyebrow.gold { color: var(--color-enten-gold); }
.muted-copy { color: var(--color-text-muted); line-height: 1.55; font-size: 14px; margin: 0; }
.muted-copy.small { font-size: 12px; max-width: 620px; }
.metric-grid {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-ink-line);
}
.metric {
  padding: 18px;
  border-right: 1px solid var(--color-ink-faint);
  border-bottom: 1px solid var(--color-ink-faint);
  background: #09090A;
}
.metric:nth-child(2n) { border-right: 0; }
.metric:nth-last-child(-n+2) { border-bottom: 0; }
.metric strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1;
  color: var(--color-kuro-cyan);
}
.metric span {
  display: block;
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 900;
}

.section-panel { padding: 18px; }
.section-head-action { margin-bottom: 18px; }
.collapsible-body.is-collapsed { display: none !important; }
.collapse-toggle[aria-expanded="false"] { color: var(--color-text-muted); }
.manga-grid { display: grid; gap: 0; border: 1px solid var(--color-ink-line); }
.grid-stack { grid-template-columns: 1.28fr 1fr .9fr .9fr; }
.grid-stack > .panel { border: 0; border-right: 1px solid var(--color-ink-line); min-height: 450px; }
.grid-stack > .panel:last-child { border-right: 0; }
.grid-onboard { grid-template-columns: .75fr 1.25fr; }
.grid-onboard > .panel { border: 0; border-right: 1px solid var(--color-ink-line); }
.grid-onboard > .panel:last-child { border-right: 0; }
.panel { padding: 18px; }
.inner-panel { border: 1px solid var(--color-ink-line); background: #0A0A0B; }
.now-panel { border-left: 3px solid var(--color-enten-gold) !important; }
.now-panel.danger { border-left-color: var(--color-aka-crimson) !important; }
.signal-panel { background: #0E1113; }
.quiet-panel { background: #0B0B0C; }
.panel-head, .section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 1px solid var(--color-ink-line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.panel h3, .section-head h3 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.counter {
  font-family: var(--font-mono);
  color: var(--color-text-pure);
  border: 1px solid var(--color-ink-line);
  min-width: 44px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  background: var(--color-void);
}
.counter.cyan { color: var(--color-kuro-cyan); }
.counter.danger { color: var(--color-aka-crimson); border-color: var(--color-aka-crimson); }
.book-list { display: grid; gap: 8px; }
.book-row {
  display: grid;
  gap: 7px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--color-ink-faint);
  cursor: pointer;
}
.book-row:hover { background: var(--color-surface); }
.book-row.active { border-color: var(--color-kuro-cyan); background: #071114; }
.book-list.compact .book-row { padding: 10px; }
.book-title { color: var(--color-text-pure); font-size: 14px; line-height: 1.25; font-weight: 800; }
.quiet-panel .book-title { color: var(--color-text-muted); }
.book-meta { color: var(--color-text-muted); font-size: 12px; line-height: 1.35; }
.tag-line { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--color-ink-line);
  color: var(--color-text-muted);
  padding: 2px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 900;
}
.tag.gold { color: var(--color-enten-gold); border-color: #5A4305; }
.tag.cyan { color: var(--color-kuro-cyan); border-color: #064E5B; }
.tag.red { color: var(--color-aka-crimson); border-color: #5D1414; }

.progress-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; }
.progress-list { display: grid; gap: 12px; }
.progress-item { display: grid; gap: 8px; border: 1px solid var(--color-ink-faint); padding: 12px; background: #080809; cursor: pointer; }
.progress-item:hover { background: var(--color-surface); }
.progress-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.progress-label { color: var(--color-text-pure); font-weight: 800; font-size: 13px; line-height: 1.25; }
.progress-count { color: var(--color-kuro-cyan); font: 800 12px/1 var(--font-mono); white-space: nowrap; }
.progress-track { height: 10px; border: 1px solid var(--color-ink-line); background: #000; }
.progress-fill { height: 100%; width: 0%; background: var(--color-kuro-cyan); }
.progress-fill.gold { background: var(--color-enten-gold); }
.chart-panel { min-height: 430px; }
.chart-wrap { height: 320px; border: 1px solid var(--color-ink-line); background: #050506; }
.chart-empty { height: 100%; display: grid; place-items: center; color: var(--color-text-muted); text-align: center; padding: 24px; }
.chart-svg { display: block; width: 100%; height: 100%; }
.axis-text { fill: var(--color-text-muted); font: 10px var(--font-mono); }
.grid-line { stroke: var(--color-ink-faint); stroke-width: 1; }
.actual-line { fill: none; stroke: var(--color-kuro-cyan); stroke-width: 3; }
.projected-line { fill: none; stroke: var(--color-enten-gold); stroke-width: 2; stroke-dasharray: 5 5; }
.actual-point { fill: var(--color-kuro-cyan); }
.legend-row { display: flex; gap: 18px; align-items: center; margin-top: 12px; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.legend { display: inline-block; width: 24px; height: 8px; border: 1px solid var(--color-ink-line); margin-right: 8px; vertical-align: -1px; }
.legend.actual { background: var(--color-kuro-cyan); }
.legend.projected { background: var(--color-enten-gold); }
.inline-field { display: grid; gap: 6px; color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 900; }
.small-field { width: 130px; }
.small-field input { padding: 8px; height: 36px; }

.maps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bar-list { display: grid; gap: 8px; }
.bar-row { border: 1px solid var(--color-ink-faint); padding: 10px; cursor: pointer; background: #080809; }
.bar-row:hover { background: var(--color-surface); }
.bar-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.bar-name { color: var(--color-text-muted); }
.bar-value { color: var(--color-kuro-cyan); font-family: var(--font-mono); }
.bar-track { height: 8px; margin-top: 8px; border: 1px solid var(--color-ink-line); background: #000; }
.bar-fill { height: 100%; background: var(--color-kuro-cyan); }
.bar-fill.gold { background: var(--color-enten-gold); }
.bar-fill.red { background: var(--color-aka-crimson); }

.pipeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--color-ink-line); }
.stage { min-height: 160px; padding: 14px; border-right: 1px solid var(--color-ink-line); background: #0A0A0B; cursor: pointer; }
.stage:last-child { border-right: 0; }
.stage:hover { background: var(--color-surface); }
.stage h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .10em; }
.stage .stage-count { display: block; margin: 16px 0; color: var(--color-kuro-cyan); font: 900 28px/1 var(--font-mono); }
.stage p { margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.layer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--color-ink-line); }
.layer { min-height: 220px; padding: 14px; border-right: 1px solid var(--color-ink-line); }
.layer:last-child { border-right: 0; }
.layer h4 { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .09em; font-size: 12px; }
.layer .tag { margin: 0 5px 5px 0; cursor: pointer; }
.rules-list { margin: 0; padding-left: 20px; color: var(--color-text-muted); line-height: 1.6; }
.rules-list li { margin: 8px 0; }
.rules-list strong { color: var(--color-text-pure); }

.library-panel { min-height: 600px; }
.library-head { align-items: end; }
.controls { display: grid; grid-template-columns: minmax(260px, 1.3fr) 180px 180px 160px; gap: 8px; flex: 1; max-width: 940px; }
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.quick-filter { border: 1px solid var(--color-ink-line); color: var(--color-text-muted); padding: 8px 10px; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; background: transparent; min-height: 34px; }
.quick-filter:hover, .quick-filter.active { color: var(--color-void); background: var(--color-text-pure); }
.table-wrap { overflow: auto; border: 1px solid var(--color-ink-line); max-height: 680px; }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th, td { border-bottom: 1px solid var(--color-ink-faint); padding: 11px 12px; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; background: #080809; z-index: 1; color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
td { color: var(--color-text-muted); font-size: 13px; }
td strong { display: block; color: var(--color-text-pure); font-size: 13px; line-height: 1.25; margin-bottom: 4px; }
tr { cursor: pointer; }
tbody tr:hover { background: var(--color-surface); }
.table-progress { min-width: 120px; }

.inspector-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 18px; }
.inspector-forms { display: grid; gap: 14px; }
.book-detail { border: 1px solid var(--color-ink-line); min-height: 520px; padding: 18px; background: #09090A; align-self: start; position: sticky; top: 18px; }
.empty-state { color: var(--color-text-muted); display: grid; place-items: center; text-align: center; }
.detail-title { font-size: 30px; line-height: 1; letter-spacing: -.04em; margin: 0 0 10px; }
.detail-author { color: var(--color-text-muted); margin-bottom: 16px; }
.detail-section { border-top: 1px solid var(--color-ink-line); padding-top: 14px; margin-top: 14px; }
.detail-section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.detail-section p, .detail-section li { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.detail-section ul { margin: 0; padding-left: 18px; }
.note-form { display: grid; gap: 12px; }
.panel-subform { border: 1px solid var(--color-ink-line); padding: 14px; background: #09090A; }
.panel-subform h4 { margin: 0 0 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--color-text-pure); }
.note-form label span { display: block; color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 900; margin-bottom: 6px; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.button-row { display: flex; gap: 10px; align-items: center; }
.button-row.wrap { flex-wrap: wrap; }
.status-block { margin: 14px 0 0; background: #080809; border: 1px solid var(--color-ink-line); padding: 14px; color: var(--color-text-muted); white-space: pre-wrap; font-size: 12px; line-height: 1.45; }
.session-list { display: grid; gap: 6px; margin-top: 10px; }
.session-row { border: 1px solid var(--color-ink-faint); padding: 8px; color: var(--color-text-muted); font-size: 12px; line-height: 1.4; }
.session-row strong { color: var(--color-text-pure); }

@media (max-width: 1280px) {
  .grid-stack, .progress-grid, .maps-grid { grid-template-columns: 1fr 1fr; }
  .grid-stack > .panel:nth-child(2n) { border-right: 0; }
  .grid-stack > .panel { border-bottom: 1px solid var(--color-ink-line); }
  .grid-stack > .panel:nth-last-child(-n+2) { border-bottom: 0; }
  .inspector-grid { grid-template-columns: 1fr; }
  .book-detail { position: static; }
}
@media (max-width: 1180px) {
  .app-shell, .app-shell.rail-collapsed { grid-template-columns: 1fr; }
  .rail { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--color-ink-line); }
  .rail-collapsed .brand-copy, .rail-collapsed .nav-stack, .rail-collapsed .constraint-box { display: block; }
  .rail-collapsed .brand-block { grid-template-columns: 48px 1fr; justify-items: start; }
  .hero-panel, .grid-onboard { grid-template-columns: 1fr; }
  .grid-onboard > .panel { border-right: 0; border-bottom: 1px solid var(--color-ink-line); }
  .grid-onboard > .panel:last-child { border-bottom: 0; }
  .pipeline, .layer-grid { grid-template-columns: 1fr 1fr; }
  .stage:nth-child(2n), .layer:nth-child(2n) { border-right: 0; }
  .controls { grid-template-columns: 1fr 1fr; max-width: none; }
}
@media (max-width: 760px) {
  .main-grid { padding: 12px; }
  .hero-panel { padding: 18px; }
  .hero-panel h2 { font-size: 54px; }
  .metric-grid, .pipeline, .layer-grid, .controls, .mini-grid, .mini-grid.three, .progress-grid, .maps-grid, .grid-stack { grid-template-columns: 1fr; }
  .metric, .stage, .layer, .grid-stack > .panel { border-right: 0; }
  .panel-head, .section-head, .library-head { flex-direction: column; }
  .small-field { width: 100%; }
}

/* Cloud-backed revision */
.progress-grid { grid-template-columns: .9fr 1.2fr .9fr; align-items: stretch; }
.calendar-panel .note-form { gap: 10px; }
.compact-form input { min-height: 38px; }
.mini-grid.two { grid-template-columns: 1fr 1fr; }
.compact-status { min-height: 76px; max-height: 140px; overflow: auto; }
.status-block strong { color: var(--color-text-pure); }
@media (max-width: 1180px) {
  .progress-grid { grid-template-columns: 1fr; }
}