:root{--bg:#130A22;--panel:#fff;--panel2:#FFC62E;--line:#FFC62E;--ink:#F6F2FB;--muted:#B9ADCF;--gold:#FFC62E;--gold2:#FFC62E;--green:#2FE37A;--red:#FF4538;--amber:#FFC62E;--blue:#4CC9FF;--shadow:0 10px 30px rgba(0,0,0,0.08)}
@media(prefers-color-scheme:dark){:root{--bg:#130A22;--panel:#1E1233;--panel2:#2A1A47;--line:#3B2860;--ink:#F6F2FB;--muted:#FFC62E;--gold:#FFC62E;--gold2:#FFC62E;--green:#2FE37A;--red:#FF4538;--amber:#FFC62E;--blue:#4CC9FF;--shadow:0 12px 32px rgba(0,0,0,.28)}}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:var(--bg);color:var(--ink);font:14px/1.5 "DM Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif}a{color:inherit}button{font:inherit}.app{height:100vh;display:grid;grid-template-rows:58px minmax(0,1fr)}
.topbar{display:flex;align-items:center;padding:0 26px;border-bottom:1px solid var(--line);background:var(--panel);gap:26px;z-index:20}.brand{font-weight:900;letter-spacing:.1em;color:var(--gold);text-decoration:none;font-size:13px;white-space:nowrap}.nav{display:flex;align-self:stretch;gap:4px}.nav a{display:flex;align-items:center;padding:0 13px;text-decoration:none;color:var(--muted);font-size:13px;font-weight:650;border-bottom:2px solid transparent}.nav a:hover{color:var(--ink)}.nav a.active{color:var(--gold);border-bottom-color:var(--gold)}.top-actions{margin-left:auto;display:flex;gap:9px}.pill{border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--muted);font-size:11px;background:var(--panel2)}
.screen{min-height:0;padding:26px;display:grid;gap:18px;overflow:hidden}.screen.home{grid-template-columns:1.15fr .85fr;grid-template-rows:auto 1fr}.hero{padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--panel),var(--panel2));box-shadow:var(--shadow)}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}h1{font-size:clamp(30px,4vw,52px);line-height:1.02;margin:0 0 14px;letter-spacing:-.04em;max-width:820px}h2{font-size:20px;margin:0 0 5px}h3{font-size:14px;margin:0}.lede{font-size:16px;color:var(--muted);max-width:720px;margin:0}.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.hero-meta .pill:first-child{color:var(--green)}
.panel{min-height:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);padding:18px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:14px}.panel-copy{font-size:12px;color:var(--muted)}.cards{display:grid;gap:12px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}.route-card{border:1px solid var(--line);border-radius:12px;padding:17px;background:var(--panel);text-decoration:none;transition:.15s}.route-card:hover{border-color:var(--gold);transform:translateY(-1px)}.route-icon{font-size:20px;color:var(--gold);margin-bottom:12px}.route-title{font-weight:800}.route-copy{color:var(--muted);font-size:12px;margin-top:5px}.home .routes{grid-column:1/-1}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{padding:16px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}.metric strong{font-size:27px;display:block;line-height:1}.metric span{font-size:11px;color:var(--muted)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:stretch}.flow-card{position:relative;border:1px solid var(--line);border-radius:13px;padding:20px;background:var(--panel)}.flow-card:not(:last-child)::after{content:'→';position:absolute;right:-18px;top:45%;color:var(--gold);font-size:20px}.flow-num{font-size:10px;color:var(--gold);font-weight:850;letter-spacing:.1em}.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.chip{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:3px 8px;background:var(--panel2)}
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;height:100%;min-height:0}.area{padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:grid;grid-template-rows:auto auto 1fr auto;min-height:0}.area-top{display:flex;justify-content:space-between;gap:8px}.status{font-size:9px;font-weight:850;border-radius:999px;padding:3px 7px;white-space:nowrap}.proven{color:var(--green);background:rgba(47,227,122,0.1)}.executed{color:var(--gold);background:rgba(255,198,46,0.1)}.wired{color:var(--amber);background:rgba(255,198,46,0.1)}.area p{font-size:11px;color:var(--muted);margin:7px 0}.owner{font-size:10px;color:var(--blue)}
.dashboard{grid-template-columns:220px minmax(0,1fr);padding:0;gap:0}.rail{background:var(--panel);border-right:1px solid var(--line);padding:20px 13px;min-height:0;overflow:hidden}.rail-title{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-weight:850;margin:4px 8px 16px}.rail button{width:100%;border:0;background:none;color:var(--muted);text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:12px}.rail button:hover,.rail button.active{background:var(--panel2);color:var(--gold)}.dash-main{padding:22px;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:14px}.dash-title{display:flex;align-items:flex-start;justify-content:space-between}.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.kpi{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--panel)}.kpi strong{display:block;font-size:23px}.kpi span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.dash-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;min-height:0}.scroll-panel{overflow:auto;min-height:0}.list{display:flex;flex-direction:column;gap:8px}.row{border:1px solid var(--line);border-radius:9px;padding:11px;background:var(--panel2);display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start}.row-id{font:10px "DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans JP", monospace;color:var(--gold)}.row-copy{font-size:11px}.row-owner{font-size:10px;color:var(--muted)}
.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:100%}.ref-group{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:18px;overflow:hidden}.ref-group a{display:block;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.ref-group a:hover{color:var(--gold)}.ref-group a:last-child{border-bottom:0}
@media(max-width:1000px){.nav a{padding:0 8px}.cards.four,.areas-grid{grid-template-columns:repeat(3,1fr)}.kpis{grid-template-columns:repeat(3,1fr)}.screen.home{grid-template-columns:1fr}.home .hero,.home .panel{grid-column:1}.flow{grid-template-columns:repeat(2,1fr)}.flow-card::after{display:none}}@media(max-width:700px){html,body{overflow:auto}.app{height:auto;min-height:100vh}.topbar{padding:0 14px;gap:8px}.nav{overflow-x:auto}.nav a{font-size:11px}.screen,.screen.home{overflow:visible;padding:14px;display:block}.panel,.hero{margin-bottom:12px}.cards.three,.cards.four,.areas-grid,.reference-grid,.flow{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr}.rail{display:none}.dash-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}

/* scrollable content pages — the fixed 100vh app-shell only fits a single dashboard view; System/Areas/Books/Home now carry real depth */
body[data-page="Home"] .screen.home{display:block;overflow-y:auto;height:auto;min-height:calc(100vh - 58px)}
body[data-page="Home"] .screen.home>*{margin-bottom:18px}
body[data-page="System"] .screen,body[data-page="Areas"] .screen,body[data-page="Books"] .screen{overflow-y:auto;height:auto;min-height:calc(100vh - 58px)}

/* diagram system — shared visual language for every diagram in the portal */
.dsection{border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);padding:20px 22px}
.dsection+.dsection{margin-top:16px}
.dsection .eyebrow{margin-bottom:6px}
.dsection h2{margin-bottom:4px}
.dsection .lede{font-size:13px;margin-bottom:14px}
.diagram-wrap{overflow-x:auto;padding-bottom:4px}
.diagram-wrap svg{display:block;min-width:640px}
.dnode rect{fill:var(--panel2);stroke:currentColor;stroke-opacity:.45}
.dnode.key rect{stroke:var(--gold);stroke-width:1.4;fill:var(--gold);fill-opacity:.09}
.dnode text{fill:currentColor}
.dnode .t{font-size:12px;font-weight:750}
.dnode .s{font-size:9px;opacity:.6}
.darrow{stroke:currentColor;stroke-opacity:.42;stroke-width:1.4;fill:none}
.darrow.key{stroke:var(--gold);stroke-opacity:.85;stroke-width:1.8}
.darrow.soft{stroke-dasharray:5 4;stroke-opacity:.38}
a.dlink{cursor:pointer}
a.dlink .dnode rect{transition:stroke .15s,fill-opacity .15s}
a.dlink:hover .dnode rect{stroke:var(--gold);stroke-opacity:1}
.diagram-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);margin-top:12px}
.diagram-legend i{display:inline-block;width:18px;height:0;border-top:2px solid currentColor;opacity:.5;margin-right:5px;vertical-align:middle}
.diagram-legend i.dashed{border-top-style:dashed}
.diagram-legend i.key{border-color:var(--gold);opacity:1}
.stage-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:14px}
.stage-table th,.stage-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.stage-table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.format-notes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.format-notes span{font-size:11px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--panel2)}
.format-notes span b{color:var(--gold)}
.meta-strip{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--muted);margin-bottom:16px}
.meta-strip b{color:var(--ink)}
.verified-note{font-size:10.5px;color:var(--muted);margin-top:10px}