:root{
  --bg:#0a1830;--bg-soft:#0e1f3d;
  --grid:rgba(91,169,214,0.06);--grid-bold:rgba(91,169,214,0.12);
  --line:#5BA9D6;--line-faint:#2D5F7C;--line-deep:#1a3a5c;
  --text:#E8F0F8;--text-dim:#8FA8C0;--text-faint:#5d7290;
  --accent:#5BA9D6;--green:#4ADE80;--amber:#F59E0B;--red:#EF4444;--grey:#4B5563;
  --display:'Major Mono Display',monospace;--mono:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid-bold) 1px,transparent 1px),linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px;color:var(--text);font-family:var(--mono);min-height:100vh}
.frame{border:1px solid var(--line-faint);margin:16px;min-height:calc(100vh - 32px);position:relative;padding:32px 32px 80px}
.corner{position:absolute;width:14px;height:14px;border:1.5px solid var(--accent)}
.corner.tl{top:-7px;left:-7px;border-right:0;border-bottom:0}.corner.tr{top:-7px;right:-7px;border-left:0;border-bottom:0}
.corner.bl{bottom:-7px;left:-7px;border-right:0;border-top:0}.corner.br{bottom:-7px;right:-7px;border-left:0;border-top:0}
.live-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:4px 14px;border:1px solid var(--amber);color:var(--amber);font-size:10px;letter-spacing:.25em;background:var(--bg);z-index:5;white-space:nowrap}
.live-badge.realtime{border-color:var(--green);color:var(--green)}
header{margin-bottom:16px;position:relative;z-index:2;max-width:60%}
header h1{font-family:var(--display);font-size:clamp(24px,4vw,38px);letter-spacing:.04em;font-weight:400;color:var(--accent);margin-bottom:6px;line-height:1}
header .subtitle{font-size:10px;letter-spacing:.3em;color:var(--text-dim)}
header .tagline{font-size:11px;color:var(--text-faint);margin-top:8px;font-style:italic}
.title-block{position:absolute;top:32px;right:32px;border:1px solid var(--line);padding:12px 16px;background:var(--bg-soft);font-size:10px;letter-spacing:.1em;z-index:10;min-width:220px}
.title-block .tb-header{font-family:var(--display);color:var(--accent);font-size:11px;border-bottom:1px solid var(--line-faint);padding-bottom:6px;margin-bottom:8px;letter-spacing:.15em}
.title-block table{border-collapse:collapse;width:100%}.title-block td{padding:3px 0;vertical-align:top}
.title-block .label{color:var(--text-dim);width:70px;font-size:9px}.title-block .value{color:var(--text);font-size:10px}
.canvas{position:relative;width:100%;aspect-ratio:4/3;margin:24px 0;max-height:75vh;overflow:hidden}
svg.diagram{width:100%;height:100%;display:block}
.hub-outer{fill:none;stroke:var(--accent);stroke-width:2}.hub-inner{fill:var(--bg);stroke:var(--accent);stroke-width:1}
.hub-construction{fill:none;stroke:var(--line-deep);stroke-width:1;stroke-dasharray:2 4}
.hub-text{fill:var(--accent);font-family:var(--display);font-size:14px;text-anchor:middle;letter-spacing:.1em}
.hub-sub{fill:var(--text-dim);font-family:var(--mono);font-size:8px;text-anchor:middle;letter-spacing:.15em}
.spoke-line{stroke:var(--line-faint);stroke-width:1;stroke-dasharray:5 4}.spoke-line.fresh{stroke:var(--line);stroke-dasharray:0}
.spoke-node{cursor:pointer;transition:opacity .15s}.spoke-node.dormant{opacity:.5}
.spoke-node rect.card{fill:var(--bg-soft);stroke:var(--line-faint);stroke-width:1}.spoke-node:hover rect.card{stroke:var(--accent);stroke-width:1.5}
.spoke-node rect.card-tab{fill:var(--bg);stroke:var(--line-faint);stroke-width:1}.spoke-node:hover rect.card-tab{stroke:var(--accent)}
.spoke-node.priority rect.card{stroke:var(--accent);stroke-width:1.5}
.spoke-node.priority rect.card-tab{stroke:var(--accent);fill:var(--bg-soft)}
.spoke-node.priority .spoke-id-label{fill:var(--accent)}
.spoke-name{fill:var(--text);font-family:var(--display);font-size:11px;text-anchor:middle;letter-spacing:.06em}
.spoke-cat{fill:var(--text-faint);font-family:var(--mono);font-size:7px;text-anchor:middle;letter-spacing:.2em}
.spoke-constraint{fill:var(--text-dim);font-family:var(--mono);font-size:9px;text-anchor:middle}
.spoke-id-label{fill:var(--accent);font-family:var(--mono);font-size:8px;letter-spacing:.1em}
.dot{stroke:var(--bg-soft);stroke-width:1.5}.dot.green{fill:var(--green)}.dot.amber{fill:var(--amber)}.dot.red{fill:var(--red)}.dot.grey{fill:var(--grey)}
.dot-label{fill:var(--text-faint);font-family:var(--mono);font-size:8px;text-anchor:middle;letter-spacing:.1em}
.legend{position:absolute;bottom:90px;left:32px;border:1px solid var(--line-faint);padding:12px 16px;background:var(--bg-soft);font-size:9px;letter-spacing:.12em;min-width:220px;z-index:5}
.legend-header{color:var(--accent);font-family:var(--display);font-size:10px;border-bottom:1px solid var(--line-faint);padding-bottom:6px;margin-bottom:8px;letter-spacing:.15em}
.legend-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--text-dim)}
.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.legend-dot.green{background:var(--green)}.legend-dot.amber{background:var(--amber)}.legend-dot.red{background:var(--red)}.legend-dot.grey{background:var(--grey)}
.legend-divider{height:1px;background:var(--line-deep);margin:8px 0}.legend-note{color:var(--text-faint);font-size:8px;line-height:1.5}
.controls{position:absolute;bottom:32px;left:32px;right:32px;display:flex;gap:10px;flex-wrap:wrap;z-index:5}
.controls button{background:transparent;border:1px solid var(--line-faint);color:var(--text);padding:9px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;cursor:pointer;text-transform:uppercase;transition:all .15s}
.controls button:hover{background:var(--line-deep);border-color:var(--accent);color:var(--accent)}
.controls button.primary{border-color:var(--accent);color:var(--accent)}.controls button.primary:hover{background:var(--accent);color:var(--bg)}
.detail-panel{position:fixed;top:0;right:0;width:min(440px,90vw);height:100vh;background:var(--bg);border-left:1px solid var(--accent);padding:32px;transform:translateX(110%);transition:transform .25s ease;overflow-y:auto;z-index:100;box-shadow:-10px 0 40px rgba(0,0,0,.5)}
.detail-panel.open{transform:translateX(0)}
.detail-panel .close{position:absolute;top:16px;right:16px;background:transparent;border:1px solid var(--line-faint);color:var(--text);width:32px;height:32px;cursor:pointer;font-family:var(--mono);font-size:14px}
.detail-panel .close:hover{border-color:var(--accent);color:var(--accent)}
.detail-panel h2{font-family:var(--display);font-size:22px;color:var(--accent);letter-spacing:.04em;font-weight:400;margin-bottom:4px}
.detail-panel .d-cat{font-size:9px;letter-spacing:.25em;color:var(--text-faint);text-transform:uppercase;margin-bottom:24px}
.detail-panel .d-section{border-top:1px solid var(--line-deep);padding-top:16px;margin-top:16px}
.detail-panel .d-label{font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px}
.detail-panel .d-value{font-size:12px;color:var(--text);line-height:1.6;margin-bottom:12px}
.detail-panel .d-meta{font-size:10px;color:var(--text-faint)}
.detail-panel .d-staleness{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.detail-panel .d-stale-cell{border:1px solid var(--line-deep);padding:10px;text-align:center}
.detail-panel .d-stale-cell .lbl{font-size:8px;color:var(--text-faint);letter-spacing:.2em;margin-bottom:6px}
.detail-panel .d-stale-cell .days{font-size:18px;font-family:var(--display)}
.detail-panel .d-stale-cell .days.green{color:var(--green)}.detail-panel .d-stale-cell .days.amber{color:var(--amber)}.detail-panel .d-stale-cell .days.red{color:var(--red)}.detail-panel .d-stale-cell .days.grey{color:var(--grey)}
.detail-panel .d-stale-cell .since{font-size:8px;color:var(--text-faint);margin-top:4px}
.tier-pill{display:inline-block;font-family:var(--mono);font-size:8px;letter-spacing:.2em;padding:3px 9px;border:1px solid var(--line-faint);color:var(--text-dim);margin-bottom:16px}
.tier-pill.dormant{border-color:var(--grey);color:var(--grey)}
/* auth gate — same locked aesthetic */
#auth-gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:300}
#auth-gate.hidden{display:none}
.auth-card{border:1px solid var(--line);background:var(--bg-soft);padding:36px 32px;width:min(380px,92vw);position:relative}
.auth-card h1{font-family:var(--display);font-size:30px;letter-spacing:.04em;font-weight:400;color:var(--accent);margin-bottom:6px;line-height:1}
.auth-card .subtitle{font-size:10px;letter-spacing:.3em;color:var(--text-dim);margin-bottom:24px}
.auth-card label{display:block;font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin:14px 0 6px}
.auth-card input{width:100%;background:var(--bg);border:1px solid var(--line-faint);color:var(--text);font-family:var(--mono);font-size:13px;padding:10px 12px}
.auth-card input:focus{outline:none;border-color:var(--accent)}
.auth-card .auth-actions{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.auth-card button.primary{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:11px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;cursor:pointer;text-transform:uppercase;transition:all .15s}
.auth-card button.primary:hover{background:var(--accent);color:var(--bg)}
.auth-card button.primary:disabled{opacity:.5;cursor:wait}
.auth-card button.link{background:none;border:none;color:var(--text-dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;cursor:pointer;text-decoration:underline;padding:4px}
.auth-card button.link:hover{color:var(--accent)}
.auth-card .err{color:var(--red);font-size:11px;margin-top:12px;min-height:16px;line-height:1.4}
#app.hidden{display:none}
/* edit modal + form — same locked aesthetic */
.modal{position:fixed;inset:0;background:rgba(10,24,48,.85);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.modal.open{display:flex}
.modal-content{background:var(--bg);border:1px solid var(--accent);padding:24px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto}
.modal h3{font-family:var(--display);color:var(--accent);letter-spacing:.05em;font-size:16px;margin-bottom:16px;font-weight:400}
.modal label{display:block;font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin:14px 0 6px}
.modal label.check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:.1em;font-size:11px;color:var(--text);cursor:pointer;margin-top:16px}
.modal label.check input{width:auto}
.modal input[type=text],.modal select{width:100%;background:var(--bg-soft);border:1px solid var(--line-faint);color:var(--text);font-family:var(--mono);font-size:13px;padding:10px 12px}
.modal input[type=text]:focus,.modal select:focus{outline:none;border-color:var(--accent)}
.modal .field-row{display:flex;gap:12px}
.modal .field-row .field{flex:1;min-width:0}
.modal .err{color:var(--red);font-size:11px;margin-top:12px;min-height:16px;line-height:1.4}
.modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
.modal-actions button{background:transparent;border:1px solid var(--line-faint);color:var(--text);padding:10px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;cursor:pointer;text-transform:uppercase;transition:all .15s}
.modal-actions button:hover{background:var(--line-deep);border-color:var(--accent);color:var(--accent)}
.modal-actions button.primary{border-color:var(--accent);color:var(--accent)}.modal-actions button.primary:hover{background:var(--accent);color:var(--bg)}
.modal-actions button:disabled{opacity:.5;cursor:wait}
/* decay resolve list (E6) — rides the existing modal shell. No new visual language:
   every colour, font and border here is an existing token, and the row buttons are the
   .modal-actions treatment at full width. */
.decay-list{margin-top:4px}
.decay-row{border-top:1px solid var(--line-deep);padding:14px 0;display:flex;flex-direction:column;gap:8px}
.decay-row:first-child{border-top:0}
.decay-name{font-size:12px;color:var(--text);line-height:1.5}
.decay-meta{font-size:9px;letter-spacing:.2em;color:var(--text-faint);text-transform:uppercase}
.decay-actions{display:flex;gap:10px}
.decay-actions button{flex:1;background:transparent;border:1px solid var(--line-faint);color:var(--text);padding:9px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;cursor:pointer;text-transform:uppercase;transition:all .15s}
.decay-actions button:hover{background:var(--line-deep);border-color:var(--accent);color:var(--accent)}
.decay-actions button:disabled{opacity:.5;cursor:wait}
.decay-empty{font-size:11px;color:var(--text-dim);padding:12px 0;line-height:1.6}
/* saved toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-soft);border:1px solid var(--green);color:var(--green);font-family:var(--mono);font-size:11px;letter-spacing:.15em;padding:10px 18px;z-index:400;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-transform:uppercase;text-align:center;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* SW diagnostic: bottom-right, mirroring the legend; long values (script URL) wrap. */
#sw-diag{top:auto;bottom:90px;right:32px;max-width:280px}
#sw-diag .value{word-break:break-all;font-size:9px}
/* ANCHOR PUBLISH sits top-LEFT, under the header (which is max-width:60%), because the
   right column is already taken top and bottom by DRAWING META and SW DIAGNOSTIC. Read-only
   readout: no cursor, no hover affordance, nothing tappable. */
#anchor-hb{top:168px;left:32px;right:auto;max-width:260px}
#anchor-hb .value.stale{color:var(--red)}
#anchor-hb .value.ok{color:var(--green)}
#anchor-hb .value.unknown{color:var(--amber)}
@media(max-width:768px){.frame{padding:16px}.title-block,.legend{position:static;margin-bottom:16px;max-width:100%}#sw-diag{position:static;bottom:auto;right:auto;max-width:100%}#anchor-hb{position:static;top:auto;left:auto;max-width:100%}.controls{position:static}header{max-width:100%}.modal .field-row{flex-direction:column;gap:0}}