:root{
  --bg:#07111f;--panel:#0d2036;--panel2:#102942;--line:#274968;
  --text:#eef5fc;--muted:#9fb4ca;--cyan:#66c7ff;--green:#55d89b;
  --orange:#ffb454;--red:#ff7373;--blue:#3187c9;--shadow:0 14px 42px rgba(0,0,0,.22)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
a{color:var(--cyan);text-decoration:none}
button{font:inherit}
.global-nav{
  position:sticky;top:0;z-index:9999;display:flex;align-items:center;gap:22px;
  min-height:58px;padding:10px 26px;background:rgba(6,17,31,.98);
  border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(0,0,0,.18)
}
.global-nav .brand{margin-right:auto;font-weight:800;letter-spacing:.03em}
.global-nav .brand small{display:block;font-size:10px;font-weight:500;color:var(--muted)}
.global-nav a{color:#c8d7e7;font-size:13px;padding:8px 4px;border-bottom:2px solid transparent}
.global-nav a.active{color:#fff;font-weight:700;border-bottom-color:var(--cyan)}
.page{max-width:1520px;margin:auto;padding:28px 26px 48px}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:stretch}
.hero h1{font-size:34px;margin:0 0 10px}
.hero p{color:var(--muted);line-height:1.55}
.hero-card,.panel,.card{
  background:linear-gradient(180deg,var(--panel),#0a1a2c);
  border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)
}
.hero-card{padding:18px}
.statusline{display:flex;align-items:center;gap:9px;margin:8px 0}
.dot{width:10px;height:10px;border-radius:50%}.dot.ok{background:var(--green)}.dot.warn{background:var(--orange)}.dot.bad{background:var(--red)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 16px}
.tab{
  background:#10283f;border:1px solid #2b4a66;border-radius:9px;padding:9px 13px;
  color:#dce9f4;cursor:pointer
}
.tab.active{background:#1a4b70;border-color:#4e94c6}
.tabpane{display:none}.tabpane.active{display:block}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{padding:17px}
.card .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.card .v{font-size:28px;font-weight:800;margin-top:7px}
.card .sub{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.section{margin-top:18px}
.section h2{margin:0 0 12px;font-size:20px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:#0b1d31;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:10px 11px;border-bottom:1px solid #27445e;font-size:13px;vertical-align:top}
th{color:#bcd0e3;background:#10263d;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid #35556f}
.badge.ok{background:#123928;color:#7ce0ad;border-color:#285d46}
.badge.warn{background:#432f14;color:#ffd08c;border-color:#6a4a20}
.badge.bad{background:#421f24;color:#ff9ca5;border-color:#6b3139}
.badge.info{background:#173853;color:#8fd3ff;border-color:#315d7d}
.human{line-height:1.6;color:#dce8f3}
.control-list{display:grid;gap:10px}
.control-row{display:grid;grid-template-columns:220px 1fr;gap:15px;padding:11px 0;border-bottom:1px solid #223b51}
.control-row b{color:#f4f8fb}.control-row span{color:#b9cada}
.flow{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.flow .step{background:#0a1b2c;border:1px solid #2d4d69;border-radius:10px;padding:12px 8px;text-align:center;font-size:11px}
.flow .step strong{display:block;font-size:12px;margin-bottom:4px}
.notice{padding:15px;border-radius:12px;border:1px solid #65512b;background:#2d2515;color:#ffe0a8;line-height:1.5}
.goodnotice{padding:15px;border-radius:12px;border:1px solid #285b45;background:#123729;color:#b8f0cf;line-height:1.5}
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 10px;border-radius:8px;border:1px solid #315573;background:#153550;color:#fff;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.detailbox{display:none;margin-top:10px;padding:12px;border:1px solid #2b4b66;border-radius:10px;background:#081723;color:#c8d9e7;line-height:1.55}
.detailbox.open{display:block}
.footer{margin-top:28px;color:var(--muted);font-size:12px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr}.flow{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.grid,.grid.two,.grid.three{grid-template-columns:1fr}.flow{grid-template-columns:repeat(2,1fr)}.global-nav{flex-wrap:wrap}.global-nav .brand{width:100%;margin-right:0}.control-row{grid-template-columns:1fr}}