:root {
  --navy-950: #09131f;
  --navy-900: #0d1b2a;
  --navy-800: #13273a;
  --navy-700: #1d3850;
  --ink: #172331;
  --muted: #687788;
  --line: #dfe6eb;
  --line-soft: #edf1f4;
  --paper: #f5f7f8;
  --white: #ffffff;
  --teal: #19a88c;
  --teal-dark: #117663;
  --teal-soft: #e5f7f3;
  --blue: #377cf6;
  --blue-soft: #eaf1ff;
  --amber: #e9a32b;
  --amber-soft: #fff5dd;
  --violet: #8268dc;
  --violet-soft: #f0edff;
  --red: #d94949;
  --red-soft: #feeeee;
  --shadow: 0 16px 45px rgba(22, 39, 55, 0.08);
  --shadow-lg: 0 30px 80px rgba(6, 20, 34, 0.18);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--paper); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.boot-screen {
  min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px;
  color: var(--muted); background: var(--paper);
}
.boot-screen p { margin: 0; font-size: 14px; }
.boot-mark, .brand-mark {
  display: grid; place-items: center; background: var(--teal); color: #06251f;
  font-weight: 900; letter-spacing: -0.08em; border-radius: 11px;
}
.boot-mark { width: 48px; height: 48px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.94); opacity: .65; } }

.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 42%) 1fr; background: #fff; }
.login-card { width: min(440px, calc(100% - 56px)); margin: auto; padding: 30px 0; }
.login-brand, .brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; font-size: 20px; }
.login-brand strong, .brand strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.login-brand span:last-child, .brand span:last-child { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.login-copy { margin: 92px 0 34px; }
.eyebrow { margin: 0 0 7px; color: #8a97a5; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.eyebrow.inverse { color: #7ddac9; }
.login-copy h1 { margin: 0; color: var(--navy-900); font-size: clamp(38px, 5vw, 52px); letter-spacing: -.055em; }
.login-copy > p:last-child { margin: 14px 0 0; color: var(--muted); line-height: 1.7; }
.form-stack { display: grid; gap: 18px; }
.form-stack label, .form-grid > label { display: grid; gap: 8px; color: #42505f; font-size: 12px; font-weight: 700; }
input, textarea, select {
  width: 100%; border: 1px solid #d8e0e5; border-radius: 10px; outline: none; background: #fbfcfd;
  color: var(--ink); padding: 12px 13px; transition: border .18s, box-shadow .18s, background .18s;
}
input:focus, textarea:focus, select:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(25,168,140,.12); }
textarea { resize: vertical; min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; }
label small { color: #8995a1; font-weight: 500; line-height: 1.5; }
.form-error { min-height: 18px; margin: -6px 0 0; color: var(--red); font-size: 12px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 750;
  transition: transform .15s, background .15s, border-color .15s, opacity .15s;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: wait; opacity: .55; transform: none; }
.button.primary { background: var(--teal); color: #062921; box-shadow: 0 7px 18px rgba(25,168,140,.18); }
.button.primary:hover { background: #21b99a; }
.button.secondary { border-color: #d7e0e6; background: #fff; color: #334456; }
.button.secondary:hover { border-color: #bbc8d1; background: #f9fafb; }
.button.danger { background: var(--red); color: #fff; }
.button.wide { width: 100%; min-height: 46px; margin-top: 2px; }
.button.small { min-height: 34px; }
.login-footnote { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 34px 0 0; color: #8a97a5; font-size: 11px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: #39c7a8; box-shadow: 0 0 0 4px rgba(57,199,168,.11); }
.login-visual { position: relative; overflow: hidden; min-height: 100vh; background: radial-gradient(circle at 67% 34%, #173a4d 0, #0e2030 31%, #091520 68%); }
.visual-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle, black, transparent 72%); }
.visual-orb { position: absolute; width: 360px; height: 360px; top: 23%; left: 27%; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #67e2cb, #1b947f 29%, rgba(17,82,77,.2) 62%, transparent 67%); filter: blur(.2px); box-shadow: 0 0 100px rgba(53,209,179,.18); }
.visual-orb::after { content:""; position:absolute; inset: 38%; border-radius:50%; background:#07131e; box-shadow: 0 0 0 20px rgba(255,255,255,.03); }
.visual-card { position: absolute; z-index: 2; width: 260px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(15,36,50,.72); color: #fff; box-shadow: 0 22px 60px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
.visual-card span { display:block; color:#79d9c8; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.visual-card strong { display:block; margin-top:9px; font-size:15px; }
.visual-card em { display:block; margin-top:7px; color:#8fa8b8; font-size:11px; font-style:normal; }
.card-one { left: 15%; top: 23%; transform: rotate(-3deg); }
.card-two { right: 12%; bottom: 22%; transform: rotate(3deg); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 232px; display: flex; flex-direction: column; padding: 26px 17px 19px; background: var(--navy-950); color: #d5e1e9; }
.brand { padding: 0 10px 25px; }
.brand strong { color: #fff; }
.brand span:last-child { color: #718697; }
.nav { display: grid; gap: 4px; margin-top: 13px; }
.nav-item { width: 100%; display:flex; align-items:center; gap:11px; padding: 11px 12px; border:0; border-radius:8px; background:transparent; color:#8196a7; cursor:pointer; text-align:left; font-size:12px; font-weight:650; transition:background .15s,color .15s; }
.nav-item:hover { background: rgba(255,255,255,.05); color:#d9e7ed; }
.nav-item.active { background: rgba(43,196,166,.12); color:#72dfcb; }
.nav-icon { width:20px; font-size:16px; text-align:center; }
.sidebar-bottom { margin-top:auto; display:grid; gap:11px; }
.server-card { margin:0 2px; padding:13px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.025); }
.server-card-head { display:flex; align-items:center; gap:9px; }
.server-card-head strong { color:#cfe1e7; font-size:11px; }
.server-card > span { display:block; overflow:hidden; margin:8px 0 0 16px; color:#657b8c; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.nav-item.muted { border-top: 1px solid rgba(255,255,255,.04); border-radius:0; }

.workspace { min-height: 100vh; margin-left:232px; padding: 0 40px 48px; }
.topbar { height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar h1 { margin:0; color:var(--navy-900); font-size:24px; letter-spacing:-.035em; }
.topbar-actions { display:flex; align-items:center; gap:16px; }
.live-pill { display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid #dce5e8; border-radius:999px; background:#fff; color:#637382; font-size:10px; font-weight:700; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--navy-900); color:#73d9c6; font-size:12px; font-weight:800; }
.icon-button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; }
.menu-button { display:none; }
.view { display:none; animation: fadeUp .2s ease; }
.view.active-view { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(4px); } }

.hero-panel { min-height:205px; display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; position:relative; padding:35px 42px; border-radius:14px; color:#fff; background:linear-gradient(115deg,#10263a,#0b1926 68%); box-shadow:var(--shadow); }
.hero-panel::after { content:""; position:absolute; right:10%; top:-65%; width:360px; height:360px; border:1px solid rgba(108,221,199,.16); border-radius:50%; box-shadow:0 0 0 46px rgba(83,202,180,.035),0 0 0 92px rgba(83,202,180,.02); }
.hero-panel h2 { position:relative; z-index:1; margin:0; font-size:31px; line-height:1.18; letter-spacing:-.045em; }
.hero-panel p:last-child { position:relative; z-index:1; max-width:520px; margin:13px 0 0; color:#91a8b8; font-size:12px; line-height:1.7; }
.hero-status { position:relative; z-index:2; min-width:190px; padding:18px 20px; border:1px solid rgba(255,255,255,.09); border-radius:11px; background:rgba(255,255,255,.035); }
.hero-status > span { display:block; color:#718899; font-size:10px; }
.hero-status strong { display:flex; align-items:center; gap:9px; margin:8px 0 10px; color:#d9f8f1; font-size:20px; }
.hero-status strong i { width:8px; height:8px; border-radius:50%; background:#4bd2b6; box-shadow:0 0 0 5px rgba(75,210,182,.12); }
.hero-status small { color:#7590a1; font-size:10px; }

.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px; }
.metric-card { min-width:0; padding:19px 19px 17px; border:1px solid var(--line-soft); border-radius:11px; background:#fff; box-shadow:0 8px 28px rgba(31,52,68,.035); }
.metric-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#748291; font-size:11px; font-weight:650; }
.metric-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; font-size:15px; font-weight:500; }
.metric-icon.teal { background:var(--teal-soft); color:var(--teal-dark); }
.metric-icon.blue { background:var(--blue-soft); color:var(--blue); }
.metric-icon.amber { background:var(--amber-soft); color:#c38214; }
.metric-icon.violet { background:var(--violet-soft); color:var(--violet); }
.metric-card > strong { display:block; margin:12px 0 8px; color:var(--navy-900); font-size:27px; letter-spacing:-.04em; }
.metric-card > strong.metric-time { overflow:hidden; font-size:15px; line-height:32px; text-overflow:ellipsis; white-space:nowrap; }
.metric-card > small { display:flex; align-items:center; gap:6px; color:#8794a0; font-size:9px; }
.mini-dot { width:5px; height:5px; border-radius:50%; }
.mini-dot.green { background:#32bd9f; }.mini-dot.amber{background:var(--amber)}

.overview-grid { display:grid; grid-template-columns:1.35fr .8fr; gap:16px; margin-top:16px; }
.panel { border:1px solid var(--line-soft); border-radius:11px; background:#fff; box-shadow:0 8px 30px rgba(31,52,68,.035); }
.recent-panel,.quick-panel,.system-status-panel,.security-panel,.config-panel,.audit-panel { padding:21px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; }
.panel-heading h3 { margin:0; color:var(--navy-900); font-size:14px; letter-spacing:-.015em; }
.text-button { border:0; background:transparent; color:var(--teal-dark); cursor:pointer; font-size:10px; font-weight:750; }
.route-list { display:grid; }
.route-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:center; gap:16px; min-height:58px; border-top:1px solid var(--line-soft); }
.route-item:first-child { border-top:0; }
.route-domain { min-width:0; display:flex; align-items:center; gap:11px; }
.route-domain b { width:29px; height:29px; display:grid; place-items:center; flex:0 0 auto; border-radius:7px; background:var(--teal-soft); color:var(--teal-dark); font-size:11px; }
.route-domain strong,.route-upstream strong { display:block; overflow:hidden; color:#2a3c4e; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.route-domain small,.route-upstream small { display:block; overflow:hidden; margin-top:4px; color:#96a2ac; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.badge { display:inline-flex; align-items:center; gap:6px; width:max-content; padding:5px 8px; border-radius:999px; font-size:9px; font-weight:750; }
.badge::before { content:""; width:5px; height:5px; border-radius:50%; }
.badge.active { background:var(--teal-soft); color:var(--teal-dark); }.badge.active::before{background:var(--teal)}
.badge.disabled { background:#f0f2f4; color:#7b8791; }.badge.disabled::before{background:#98a3ac}
.badge.expired { background:var(--red-soft); color:#b83838; }.badge.expired::before{background:var(--red)}
.badge.expiring { background:var(--amber-soft); color:#a76d0f; }.badge.expiring::before{background:var(--amber)}
.quick-action { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:12px 0; border:0; border-top:1px solid var(--line-soft); background:transparent; cursor:pointer; text-align:left; }
.quick-action:first-of-type { border-top:0; }
.quick-action:hover strong { color:var(--teal-dark); }
.quick-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:8px; background:var(--teal-soft); color:var(--teal-dark); font-size:16px; }.quick-icon.blue{background:var(--blue-soft);color:var(--blue)}.quick-icon.slate{background:#eef2f5;color:#587084}
.quick-action strong { display:block; color:#344657; font-size:10px; transition:color .15s; }
.quick-action small { display:block; margin-top:4px; color:#9ba6ae; font-size:9px; }
.quick-action em { color:#9eabb4; font-style:normal; }
.empty-state { min-height:120px; place-items:center; color:#97a2ab; font-size:11px; }

.section-lead { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.section-lead p { max-width:720px; margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.table-panel { overflow:hidden; }
.table-toolbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px; border-bottom:1px solid var(--line-soft); }
.table-toolbar > span { color:#8a98a4; font-size:10px; }
.search-box { width:min(320px,60%); display:flex; align-items:center; gap:8px; color:#94a1ab; }
.search-box input { height:36px; border:0; background:transparent; box-shadow:none; font-size:11px; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { height:42px; padding:0 18px; border-bottom:1px solid var(--line-soft); background:#fafbfc; color:#8995a0; font-size:9px; font-weight:750; letter-spacing:.04em; text-align:left; white-space:nowrap; }
td { min-height:68px; padding:15px 18px; border-bottom:1px solid var(--line-soft); color:#506172; font-size:10px; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fcfdfd; }
.cell-title { display:flex; align-items:center; gap:11px; min-width:170px; }
.cell-icon { width:31px; height:31px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; background:var(--teal-soft); color:var(--teal-dark); font-size:11px; font-weight:800; }
.cell-title strong,.stacked-cell strong { display:block; color:#2b3d4e; font-size:10px; }
.cell-title small,.stacked-cell small { display:block; max-width:270px; overflow:hidden; margin-top:4px; color:#96a2ac; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.code-pill { display:inline-block; max-width:270px; overflow:hidden; padding:6px 8px; border-radius:6px; background:#f2f5f6; color:#526879; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.actions { display:flex; justify-content:flex-end; gap:4px; min-width:122px; }
.action-button { min-width:30px; height:30px; display:grid; place-items:center; padding:0 8px; border:1px solid transparent; border-radius:7px; background:transparent; color:#718290; cursor:pointer; font-size:11px; }
.action-button:hover { border-color:var(--line); background:#f7f9fa; color:#283e50; }
.action-button.danger:hover { border-color:#f2caca; background:var(--red-soft); color:var(--red); }
.table-empty { padding:50px 20px; color:#8d99a3; font-size:11px; text-align:center; }
.notice-card { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:14px 17px; border:1px solid #d7e9e5; border-radius:10px; background:#f0faf8; }
.notice-icon { width:22px; height:22px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--teal); color:#06332a; font-weight:800; }
.notice-card strong { color:#305a52; font-size:10px; }.notice-card p{margin:4px 0 0;color:#6f8a84;font-size:9px;line-height:1.55}

.system-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.detail-list { margin:0; }
.detail-list div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-top:1px solid var(--line-soft); font-size:10px; }
.detail-list dt { color:#8895a0; }.detail-list dd{max-width:65%;margin:0;color:#35495b;font-weight:650;text-align:right;word-break:break-all}
.form-stack.compact { gap:12px; }
.form-stack.compact input { height:38px; }
.config-panel,.audit-panel { margin-top:16px; }
pre { max-height:420px; overflow:auto; margin:0; padding:19px; border-radius:9px; background:#0c1925; color:#afdcd2; font:10px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; tab-size:4; }
.config-note { margin:12px 0 0; color:#8b98a2; font-size:9px; line-height:1.6; }
.audit-list { display:grid; }
.audit-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line-soft); }
.audit-row:first-child { border-top:0; }
.audit-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-soft); }
.audit-row strong { display:block; color:#3c4f5f; font-size:10px; }.audit-row small{display:block;margin-top:3px;color:#97a2ab;font-size:9px}.audit-row time{color:#8d99a3;font-size:9px;white-space:nowrap}

.dialog { width:min(570px,calc(100% - 28px)); max-height:calc(100vh - 34px); padding:0; border:0; border-radius:15px; background:transparent; color:var(--ink); box-shadow:var(--shadow-lg); }
.dialog::backdrop { background:rgba(5,16,26,.64); backdrop-filter:blur(3px); }
.large-dialog { width:min(740px,calc(100% - 28px)); }
.dialog-card { overflow:auto; max-height:calc(100vh - 34px); margin:0; padding:25px; border-radius:15px; background:#fff; }
.dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:22px; }
.dialog-heading h2 { margin:0; color:var(--navy-900); font-size:20px; letter-spacing:-.035em; }
.dialog-close { width:32px; height:32px; border:0; border-radius:8px; background:#f1f4f5; color:#657482; cursor:pointer; font-size:20px; line-height:1; }
.form-grid { display:grid; gap:16px; }.form-grid.two-columns{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}
.toggle-row { position:relative; grid-template-columns:1fr auto !important; align-items:center; padding:13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.toggle-row span strong,.toggle-row span small { display:block; }.toggle-row span strong{color:#3a4c5b;font-size:11px}.toggle-row span small{margin-top:4px;color:#929da6;font-size:9px}
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-row > i { width:39px; height:22px; position:relative; border-radius:99px; background:#ccd5da; transition:background .18s; }
.toggle-row > i::after { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:transform .18s; }
.toggle-row input:checked + i { background:var(--teal); }.toggle-row input:checked + i::after{transform:translateX(17px)}
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft); }.dialog-actions.centered{justify-content:center}
.confirm-dialog { width:min(400px,calc(100% - 28px)); text-align:center; }.confirm-icon{width:46px;height:46px;display:grid;place-items:center;margin:2px auto 13px;border-radius:50%;background:var(--red-soft);color:var(--red);font-size:20px;font-weight:800}.confirm-dialog h2{margin:0;font-size:18px}.confirm-dialog p{margin:10px auto 0;max-width:310px;color:var(--muted);font-size:11px;line-height:1.65}

.toast-region { position:fixed; z-index:100; right:20px; bottom:20px; display:grid; gap:9px; width:min(360px,calc(100% - 40px)); }
.toast { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border:1px solid #dce5e8; border-radius:10px; background:#fff; color:#435565; box-shadow:0 17px 50px rgba(13,30,44,.17); font-size:11px; line-height:1.5; animation:toastIn .2s ease; }
.toast::before { content:"✓"; width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);font-weight:800}.toast.error::before{content:"!";background:var(--red-soft);color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}
.sidebar-scrim { display:none; }

@media (max-width: 1050px) {
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-grid { grid-template-columns:1fr; }
  .hero-panel { padding:30px; }
  .system-grid { grid-template-columns:1fr; }
}

@media (max-width: 780px) {
  .login-view { grid-template-columns:1fr; }.login-visual{display:none}.login-card{width:min(420px,calc(100% - 40px))}.login-copy{margin-top:70px}
  .sidebar { transform:translateX(-100%); transition:transform .2s; box-shadow:20px 0 60px rgba(0,0,0,.2); }.app-shell.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-scrim { position:fixed; z-index:15; inset:0; background:rgba(6,17,27,.52); }.app-shell.sidebar-open .sidebar-scrim{display:block}
  .workspace { margin-left:0; padding:0 18px 35px; }.topbar{height:85px}.menu-button{display:grid}.topbar>div:nth-child(2){margin-right:auto}.live-pill{display:none}
  .hero-panel { min-height:240px; align-items:flex-start; padding:28px; }.hero-panel h2{font-size:27px}.hero-status{display:none}
  .metrics-grid { grid-template-columns:1fr 1fr; }.section-lead{align-items:flex-start}.table-panel{margin-left:-18px;margin-right:-18px;border-radius:0}
  th,td{padding-left:14px;padding-right:14px}.form-grid.two-columns{grid-template-columns:1fr}.form-grid.two-columns .full{grid-column:auto}.dialog-card{padding:21px}
}

@media (max-width: 480px) {
  .metrics-grid { grid-template-columns:1fr; }.metric-card{display:grid;grid-template-columns:1fr auto;align-items:center}.metric-card .metric-head{grid-column:1/-1}.metric-card>strong{margin-bottom:0}.metric-card>small{justify-self:end}
  .section-lead { display:grid; }.section-lead .button{width:100%}.route-item{grid-template-columns:minmax(0,1fr) auto}.route-upstream{display:none}
  .topbar h1{font-size:20px}.hero-panel{min-height:220px}.hero-panel p:last-child{max-width:260px}.search-box{width:75%}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}