:root { --bg:#0b111b; --panel:#111b29; --line:#29364a; --text:#e9eef7; --muted:#a5b3c8; --mint:#6de0b1; --amber:#ffc978; --blue:#86b9ff; --red:#ff919b; font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { border:1px solid var(--line); background:#192538; color:var(--text); border-radius:7px; padding:8px 13px; cursor:pointer; }
button:hover { background:#243650; border-color:#5d789c; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--mint); border-color:var(--mint); color:#06281b; font-weight:700; }
button.primary:hover { background:#9bf0cf; }
button.danger { color:var(--red); }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
input,select,textarea { width:100%; color:var(--text); background:#0d1623; border:1px solid #41506a; border-radius:6px; padding:9px 11px; min-width:0; }
input[type=checkbox] { width:auto; }
textarea { min-height:85px; resize:vertical; }
label { display:block; margin-bottom:6px; font-size:.88rem; color:#c4d1e4; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.2; letter-spacing:-.025em; margin-bottom:14px; }
h2 { font-size:1.25rem; line-height:1.35; margin-bottom:14px; }
h3 { font-size:1rem; }
a { color:var(--blue); }
pre { padding:16px; border:1px solid var(--line); border-radius:8px; background:#0a121f; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.8rem; max-height:440px; overflow:auto; }
code { font: .86em ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
details { margin-top:14px; }
summary { cursor:pointer; color:var(--blue); padding:8px 0; }
.small { font-size:.8rem; }
.muted { color:var(--muted); }
.eyebrow { font-size:.7rem; letter-spacing:.15em; font-weight:700; color:var(--muted); margin-bottom:12px; }
.brand-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:13px; background:var(--mint); color:#092c21; font-size:30px; font-weight:900; margin-bottom:28px; }
.small-mark { width:32px; height:32px; border-radius:8px; font-size:21px; margin:0; }
.login-shell { max-width:880px; padding:9vh 28px; margin:auto; }
.login-card { max-width:480px; margin-top:30px; }
.login-card button { margin:16px 0; width:100%; }
.topbar { min-height:74px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:15px; padding:14px 24px; }
.brand,.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.brand { font-size:.95rem; }
.shell { display:grid; grid-template-columns:218px minmax(0,1fr); min-height:calc(100vh - 74px); }
.sidebar { padding:26px 16px; border-right:1px solid var(--line); background:#0d1521; }
.sidebar .eyebrow { padding:0 8px; }
nav { display:grid; gap:5px; }
nav button { text-align:left; background:transparent; border-color:transparent; color:var(--muted); }
nav button[aria-current=page] { color:var(--mint); background:#14342e; border-color:#245143; }
.boundary-note { border-top:1px solid var(--line); margin-top:38px; padding:22px 8px; font-size:.8rem; color:var(--muted); }
.boundary-note strong { display:block; color:var(--text); margin:10px 0; }
.dot { display:block; width:8px; height:8px; background:var(--mint); border-radius:50%; }
main { padding:32px; min-width:0; max-width:1540px; width:100%; }
.panel > .intro { max-width:850px; color:var(--muted); margin-bottom:26px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; min-width:0; }
.card + .card { margin-top:18px; }
.grid { display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0; }
.grid .card + .card { margin-top:0; }
.metrics { display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin:26px 0; }
.metric { background:linear-gradient(125deg,#142738,#12202e); padding:20px; border:1px solid #2a4258; border-radius:10px; }
.metric strong { display:block; font-size:1.9rem; color:#eff8ff; letter-spacing:-.03em; }
.metric span { color:var(--muted); font-size:.78rem; display:block; }
.badge { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em; padding:4px 9px; border-radius:5px; border:1px solid #39604f; background:#132e27; color:var(--mint); }
.badge.warn { background:#322a1d; color:var(--amber); border-color:#635235; }
.callout { border-left:3px solid var(--amber); background:#241f18; color:#ebd6b5; padding:14px 18px; margin:18px 0; font-size:.88rem; }
.facts { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px 16px; font-size:.85rem; margin:0; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; overflow-wrap:anywhere; }
.section-head { display:flex; justify-content:space-between; gap:15px; align-items:center; margin:24px 0 14px; flex-wrap:wrap; }
.section-head h2 { margin:0; }
.table-wrap { overflow:auto; max-width:100%; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:.83rem; }
th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
th,td { padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top; }
td { overflow-wrap:anywhere; }
tbody tr:hover { background:#172538; }
.filters { display:flex; align-items:end; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.filters > div { min-width:180px; flex:1; }
.pagination { display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:15px; font-size:.8rem; }
.topology-canvas { background:radial-gradient(ellipse at 50% 40%,#1c2d3d,#101a28); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:15px 0; }
.topology-canvas svg { display:block; width:100%; height:360px; }
.topology-node { cursor:pointer; }
.topology-node rect { fill:#172b40; stroke:#476888; stroke-width:1.2; }
.topology-node.selected rect,.topology-node:hover rect { fill:#16493c; stroke:var(--mint); stroke-width:2; }
.topology-node text { fill:var(--text); font:11px system-ui,sans-serif; pointer-events:none; }
.topology-node .node-type { fill:var(--mint); font-size:10px; }
.graph-link { stroke:#375169; stroke-width:1.5; }
.graph-title { fill:var(--muted); font:12px system-ui,sans-serif; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field.full { grid-column:1/-1; }
.recipe-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.stack { display:grid; gap:10px; }
.chart { width:100%; display:block; border-radius:8px; background:white; }
.job { margin-bottom:18px; }
.job h3 { margin-bottom:8px; }
.steps { padding-left:24px; color:var(--muted); font-size:.85rem; }
.steps li { padding:5px; }
.steps .complete { color:var(--mint); }
.job-status { font: .8rem ui-monospace,monospace; padding:12px 0; }
.library-entry { border-top:1px solid var(--line); padding:16px 0; }
.library-entry strong { display:block; overflow-wrap:anywhere; font-size:.85rem; margin-bottom:8px; }
.guide-answer { white-space:pre-wrap; color:#d5e3f5; }
#notice:not(:empty) { position:fixed; bottom:22px; right:22px; max-width:min(600px,calc(100vw - 44px)); z-index:10; padding:16px 20px; background:#243750; border:1px solid #6f8fb7; border-radius:8px; box-shadow:0 5px 30px #0009; }
#notice.error { background:#3d2029; border-color:var(--red); }
.skip-link { position:fixed; top:-100px; left:15px; z-index:20; background:var(--panel); padding:12px; }
.skip-link:focus { top:15px; }
@media(max-width:1150px) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .recipe-types { grid-template-columns:repeat(2,minmax(0,1fr)); } main { padding:25px; } }
@media(max-width:780px) { .topbar { padding:12px 16px; } .brand > .muted { display:none; } .shell { display:block; } .sidebar { padding:10px; border-right:0; border-bottom:1px solid var(--line); } .sidebar .eyebrow,.boundary-note { display:none; } nav { display:flex; overflow:auto; gap:6px; } nav button { white-space:nowrap; } main { padding:22px 16px; } .grid,.field-grid { grid-template-columns:1fr; } .facts { grid-template-columns:115px minmax(0,1fr); } .recipe-types { grid-template-columns:1fr; } .card { padding:16px; } .topology-canvas svg { height:300px; } }
@media(prefers-reduced-motion:no-preference) { button { transition:background .12s,border-color .12s; } }