:root { --navy:#1F3864; --blue:#2E74B5; --ink:#1d2433; --muted:#5f6b7a; --line:#dfe5ee; --bg:#f4f6fa; --card:#fff;
  --green:#2e7d32; --greenbg:#e7f4e8; --amber:#a15c00; --amberbg:#fff3df; --red:#b3261e; --redbg:#fde8e7; --greybg:#eef1f5; }
* { box-sizing:border-box; }
body { margin:0; font-family:Calibri, "Segoe UI", Arial, sans-serif; font-size:15px; color:var(--ink); background:var(--bg); }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { height:54px; background:var(--navy); color:#fff; display:flex; align-items:center; padding:0 22px; position:sticky; top:0; z-index:5; }
header.top .brand { font-size:19px; font-weight:700; letter-spacing:.2px; }
header.top .brand span { font-weight:400; opacity:.75; margin-left:10px; font-size:15px; }
header.top .right { margin-left:auto; font-size:13px; opacity:.85; display:flex; gap:18px; align-items:center; }
header.top .env { background:#2E74B5; padding:3px 10px; border-radius:10px; font-size:12px; }
.layout { display:flex; min-height:calc(100vh - 54px); }
nav.side { width:232px; background:#fff; border-right:1px solid var(--line); padding:14px 0; flex-shrink:0; }
nav.side .grp { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); padding:12px 22px 6px; }
nav.side a { display:block; padding:9px 22px; color:var(--ink); border-left:3px solid transparent; font-size:15px; }
nav.side a:hover { background:#f3f6fb; text-decoration:none; }
nav.side a.on { border-left-color:var(--blue); background:#eaf1fa; color:var(--navy); font-weight:600; }
main { flex:1; padding:22px 28px 40px; min-width:0; }
h1 { font-size:24px; margin:0 0 4px; color:var(--navy); }
.sub { color:var(--muted); margin:0 0 18px; font-size:15px; max-width:1150px; }
h2 { font-size:17px; margin:0 0 10px; color:var(--navy); }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.card .k { font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.card .v { font-size:28px; font-weight:700; color:var(--navy); margin-top:4px; }
.card .d { font-size:13px; color:var(--muted); margin-top:2px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:18px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .grid2 > .panel { margin-bottom:0; }
.grid3 { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t th { text-align:left; background:#f1f4f9; color:var(--navy); font-weight:600; padding:7px 9px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.t td { padding:6px 9px; border-bottom:1px solid #eef1f5; vertical-align:top; }
table.t td.n, table.t th.n { text-align:right; font-variant-numeric:tabular-nums; }
table.t tr:hover td { background:#fafbfd; }
.pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.p-green { background:var(--greenbg); color:var(--green); } .p-amber { background:var(--amberbg); color:var(--amber); }
.p-red { background:var(--redbg); color:var(--red); } .p-blue { background:#e3eefa; color:var(--blue); } .p-grey { background:var(--greybg); color:var(--muted); }
pre.sql { background:#0f1b2d; color:#dbe7f6; padding:12px 14px; border-radius:6px; font-size:12.5px; overflow:auto; max-height:420px; margin:0; line-height:1.35; }
pre.plan { background:#f7f9fc; border:1px solid var(--line); padding:10px 12px; border-radius:6px; font-size:11.5px; overflow:auto; max-height:360px; margin:0; }
.empty { padding:26px; text-align:center; color:var(--muted); background:#fafbfd; border:1px dashed var(--line); border-radius:8px; }
.muted { color:var(--muted); } .small { font-size:13px; }
form.inline { display:inline; }
button, .btn { background:var(--blue); color:#fff; border:0; border-radius:6px; padding:8px 14px; font-size:14px; cursor:pointer; font-family:inherit; display:inline-block; }
button.sec, .btn.sec { background:#fff; color:var(--blue); border:1px solid var(--blue); }
button.warn { background:#a15c00; }
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
select, input[type=number] { font-family:inherit; font-size:14px; padding:6px 8px; border:1px solid #c8d1dd; border-radius:6px; background:#fff; }
label.f { font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tabs a { padding:8px 14px; color:var(--muted); border-bottom:2px solid transparent; }
.tabs a.on { color:var(--navy); border-bottom-color:var(--blue); font-weight:600; }
.kv { display:grid; grid-template-columns:170px 1fr; gap:6px 14px; font-size:14px; }
.kv .k { color:var(--muted); }
.layers { display:flex; flex-direction:column; gap:8px; }
.layer { display:flex; gap:8px; align-items:stretch; }
.layer .lbl { width:150px; background:var(--navy); color:#fff; border-radius:6px; padding:8px 10px; font-size:13px; font-weight:600; display:flex; align-items:center; }
.layer .boxes { flex:1; display:flex; gap:8px; flex-wrap:wrap; }
.layer .box { flex:1; min-width:120px; border:1px solid #b9cbe2; background:#f5f9fe; border-radius:6px; padding:7px 9px; font-size:13px; }
.layer .box b { color:var(--navy); display:block; font-size:13.5px; }
.ok { color:var(--green); font-weight:600; } .bad { color:var(--red); font-weight:600; }
mark.ent { background:#fff1b8; border-radius:3px; padding:0 2px; border-bottom:2px solid #e0a800; }
mark.ent .tag { font-size:10px; background:#a15c00; color:#fff; border-radius:3px; padding:0 4px; margin-left:3px; vertical-align:2px; }
.doc { white-space:pre-wrap; font-family:Consolas, "Courier New", monospace; font-size:13px; line-height:1.55; background:#fbfcfe; border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.callout { border-left:4px solid var(--blue); background:#eef4fb; padding:10px 14px; border-radius:4px; font-size:14px; margin-bottom:16px; }
.callout.warn { border-left-color:#a15c00; background:#fff6e8; }
.restricted { border:2px solid #b3261e; }
.restricted .hdr { background:#b3261e; color:#fff; margin:-16px -18px 12px; padding:8px 18px; border-radius:6px 6px 0 0; font-weight:700; font-size:14px; }
.bar { height:8px; background:#e8edf4; border-radius:4px; overflow:hidden; min-width:90px; }
.bar > div { height:100%; background:var(--blue); }
.bar > div.hot { background:#c55a11; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { padding:8px 0 8px 18px; border-left:2px solid #c9d6e8; margin-left:6px; position:relative; font-size:14px; }
.timeline li:before { content:""; width:10px; height:10px; border-radius:50%; background:var(--blue); position:absolute; left:-6px; top:12px; }