:root { color-scheme: dark; --bg:#080c14; --panel:#111a29; --line:#26364b; --text:#edf3fb; --muted:#9cabc0; --core:#2563eb; --knowledge:#7c3aed; --product:#c76b12; --focus:#75e8ff; }
* { box-sizing:border-box }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 52% 20%,#14243b 0%,var(--bg) 58%); color:var(--text); font:15px/1.5 system-ui,Segoe UI,sans-serif; }
.topbar,main,footer { max-width:1320px; margin:auto; }
.topbar { padding:28px 26px 20px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid #ffffff12; }
h1 { margin:0; font-size:clamp(24px,3vw,34px); }
.eyebrow { margin:0 0 4px; color:#a9bad0; font-size:11px; font-weight:700; letter-spacing:.16em; }
.subtitle { margin:5px 0 0; color:var(--muted); }
.draft-badge { border:1px solid #9a6727; border-radius:999px; padding:8px 12px; background:#25190d; color:#ffd596; font-size:12px; white-space:nowrap; }
main { padding:18px 26px 28px; }
.notice { padding:12px 14px; background:#111827; border-left:3px solid #71829b; color:#c5d0df; border-radius:6px; }
.controls { margin:16px 0 10px; display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.search-label { width:100%; color:var(--muted); font-size:12px; }
input[type=search] { min-width:240px; flex:1; color:var(--text); background:#101827; border:1px solid #34455e; border-radius:10px; padding:11px 13px; font:inherit; }
.view-tabs { display:flex; flex-wrap:wrap; gap:8px; }
button { color:var(--text); background:#151f2e; border:1px solid #35465d; border-radius:9px; padding:10px 12px; font:inherit; cursor:pointer; }
button:hover:not(:disabled) { border-color:#8ba4c2; }
button:focus-visible,input:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
button.active { border-color:#63dff8; background:#122937; color:#c6f8ff; }
button:disabled { opacity:.57; cursor:not-allowed; }
.summary { min-height:25px; color:var(--muted); font-size:13px; }
.group-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:10px; }
.group { min-width:0; background:#0d1420cc; border:1px solid var(--line); border-top:3px solid var(--group-color); border-radius:14px; padding:15px; }
.group-core,.project-core { --group-color:var(--core); }
.group-knowledge,.project-knowledge { --group-color:var(--knowledge); }
.group-product,.project-product { --group-color:var(--product); }
.group h2 { display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:14px; letter-spacing:.07em; }
.swatch { width:10px; height:10px; border-radius:50%; background:var(--group-color); box-shadow:0 0 10px color-mix(in srgb,var(--group-color),transparent 25%); }
.cards { display:grid; gap:9px; }
.project { width:100%; text-align:left; background:#141d2b; border:1px solid #344157; border-left:4px solid var(--group-color); padding:12px; }
.project:hover { background:#1a2738; }
.project strong { display:block; margin-bottom:4px; }
.status { color:#bdc9d9; font-size:12px; }
.relation-list { display:grid; gap:12px; margin-top:12px; }
.relation-item { padding:18px; background:#0d1420cc; border:1px solid var(--line); border-radius:13px; }
.relation-pair { display:grid; grid-template-columns:minmax(140px,1fr) minmax(220px,1.2fr) minmax(140px,1fr); align-items:center; gap:14px; }
.relation-node { padding:15px; text-align:center; border:1px solid #754bd1; border-left:4px solid var(--knowledge); border-radius:10px; background:#17152a; font-weight:700; }
.relation-connector { min-width:0; display:grid; justify-items:center; gap:4px; color:#c9b5ff; text-align:center; }
.relation-line { font-size:25px; line-height:1; }
.relation-label { font-size:13px; }
.relation-kind,.relation-source,.map-footnote { margin:12px 0 0; color:var(--muted); font-size:12px; }
.knowledge-network { position:relative; margin-top:12px; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#0b111ccc; }
.network-edges { position:absolute; inset:0 auto auto 0; z-index:0; pointer-events:none; overflow:visible; }
.network-edge { fill:none; stroke:#8292ab; stroke-width:1.6; stroke-opacity:.62; }
.network-columns { position:relative; z-index:1; display:grid; grid-template-columns:minmax(190px,.9fr) minmax(320px,1.5fr) minmax(200px,.9fr); gap:44px; min-width:1050px; padding:18px; }
.network-column { display:flex; flex-direction:column; gap:10px; }
.network-heading { min-height:26px; margin:0 0 4px; color:#c6d2e2; font-size:11px; letter-spacing:.1em; }
.network-node { display:grid; gap:5px; min-height:70px; padding:11px; background:#121a28; border:1px solid #3b4960; border-left:4px solid var(--node-color); border-radius:10px; box-shadow:0 4px 15px #0004; }
.node-project { --node-color:var(--knowledge); }
.node-knowledge { --node-color:#8b5cf6; }
.node-source { --node-color:#64748b; }
.node-detail { color:#b7c3d4; font-size:12px; }
.coverage-codes { color:#8fa0b6; font-size:10px; line-height:1.45; }
.knowledge-routes { display:grid; gap:4px; margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#0d1420cc; }
.knowledge-routes h3 { margin:0 0 5px; font-size:14px; }
.route-row { margin:0; color:#d8e1ed; font-size:12px; line-height:1.7; }
.route-arrow { color:#adbacb; }
.route-source { color:#8494aa; }
.empty-state { margin:22px 0; padding:24px; text-align:center; border:1px dashed #43526a; border-radius:14px; color:#c4cfde; }
.empty-state h2 { margin:0 0 8px; font-size:18px; }
.empty-state p { max-width:680px; margin:0 auto; color:var(--muted); }
.detail { position:fixed; inset:auto 20px 20px auto; width:min(410px,calc(100vw - 40px)); padding:20px; background:#131d2b; border:1px solid #48607c; border-radius:14px; box-shadow:0 12px 50px #0009; }
.detail h2 { margin:0 34px 16px 0; }
.detail dl { display:grid; grid-template-columns:140px 1fr; gap:8px 12px; margin:0; }
.detail dt { color:var(--muted); }
.detail dd { margin:0; overflow-wrap:anywhere; }
.close { position:absolute; right:12px; top:12px; padding:6px 9px; }
footer { padding:0 26px 26px; color:#8090a7; font-size:12px; }
@media(max-width:900px) { .group-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:620px) { .topbar { align-items:flex-start; flex-direction:column; padding:22px 16px; } main { padding:14px 16px 22px; } .group-grid { grid-template-columns:1fr; } .view-tabs { width:100%; } .view-tabs button { flex:1 1 auto; } input[type=search] { min-width:100%; } footer { padding:0 16px 20px; } .detail { inset:auto 12px 12px; width:calc(100vw - 24px); } .relation-pair { grid-template-columns:1fr; } .relation-connector { padding:3px 0; } .relation-line { transform:rotate(90deg); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }