:root { --bg:#f4f6f2; --paper:#fbfcf9; --ink:#18211d; --muted:#718078; --line:#dce4dd; --deep:#123f31; --mint:#b9f3d2; --lime:#dbf36b; --amber:#d58a32; --red:#c74b42; --shadow:0 20px 60px rgba(20,52,39,.09); font-family:Manrope,Inter,system-ui,sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(81,156,117,.55); outline-offset:3px; }
[hidden] { display:none !important; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

.login-screen { min-height:100svh; display:grid; place-items:center; position:relative; overflow:hidden; background:#112a22; color:#effaf1; }
.login-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(207,255,226,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(207,255,226,.11) 1px,transparent 1px); background-size:52px 52px; transform:perspective(500px) rotateX(58deg) scale(1.7) translateY(30%); transform-origin:bottom; }
.login-mark { position:absolute; top:32px; left:38px; font:500 12px 'DM Mono',monospace; letter-spacing:.18em; color:#a5dcb9; }
.login-panel { z-index:1; width:min(520px,calc(100% - 44px)); padding:clamp(22px,6vw,70px) 0; animation:rise .7s ease both; }
.login-panel h1 { margin:22px 0; font-size:clamp(46px,9vw,92px); line-height:.86; letter-spacing:-.08em; }
.login-panel h1 em,.page-intro h1 em { color:var(--lime); font-style:normal; }
.login-panel>p:not(.eyebrow) { max-width:310px; color:#a6c1b1; line-height:1.7; }
.login-panel form { margin-top:58px; }
.login-panel label { display:block; margin-bottom:10px; color:#a6c1b1; font-size:12px; }
.login-input-row { display:flex; border-bottom:1px solid #6f9880; }
.login-input-row input { min-width:0; flex:1; padding:12px 0; border:0; outline:0; background:transparent; color:#fff; font-size:20px; letter-spacing:.15em; }
.icon-button { width:50px; border:0; background:transparent; color:var(--lime); font-size:28px; }
.form-error { min-height:24px; margin-top:12px; color:#ffb38c; font-size:13px; }
.login-foot { display:flex; justify-content:space-between; margin-top:70px; color:#6f9782; font:11px 'DM Mono',monospace; letter-spacing:.09em; }
.eyebrow { margin:0; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.16em; text-transform:uppercase; }

.app-shell { min-height:100svh; display:flex; }
.rail { position:fixed; z-index:4; top:0; bottom:0; left:0; width:84px; display:flex; flex-direction:column; align-items:center; padding:24px 0; background:var(--deep); color:#b7d9c4; }
.rail-brand { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.22); color:#effff1; text-decoration:none; font-weight:800; font-size:18px; }
.rail-brand small { position:absolute; margin:47px 0 0; color:#6d9d83; font:10px 'DM Mono',monospace; }
.rail-nav { display:grid; gap:10px; margin-top:88px; }
.rail-link { width:68px; display:grid; gap:4px; padding:12px 4px; border:0; border-left:2px solid transparent; background:transparent; color:#6e9b84; text-align:center; }
.rail-link:hover,.rail-link.active { border-left-color:var(--lime); color:#effff1; }
.rail-index { font:10px 'DM Mono',monospace; }
.rail-link span:last-child { font-size:12px; font-weight:700; }
.rail-bottom { display:flex; align-items:center; gap:7px; margin-top:auto; color:#75b18e; font:10px 'DM Mono',monospace; writing-mode:vertical-rl; transform:rotate(180deg); }
.live-dot,.sync-state i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#7ce3a2; box-shadow:0 0 0 4px rgba(124,227,162,.13); }
.workspace { width:calc(100% - 84px); min-width:0; margin-left:84px; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,4vw,64px); border-bottom:1px solid var(--line); background:rgba(244,246,242,.82); backdrop-filter:blur(18px); position:sticky; z-index:3; top:0; }
.topbar-context,.topbar-actions { display:flex; align-items:center; gap:16px; }
.topbar-context { color:var(--deep); font:500 11px 'DM Mono',monospace; letter-spacing:.08em; }
.topbar-slash { color:#88ab96; font-size:22px; }
.topbar-date { color:#99a79f; }
.sync-state { display:flex; align-items:center; gap:9px; color:#4e7860; font-size:12px; }
.topbar-button { border:0; background:transparent; color:var(--muted); font-size:12px; }
.topbar-button span { margin-left:4px; padding:3px 5px; border:1px solid var(--line); border-radius:4px; font:10px 'DM Mono',monospace; }
.topbar-button:hover { color:var(--ink); }.topbar-button.logout { color:#ad746b; }
.content { width:min(1500px,100%); margin:0 auto; padding:clamp(28px,5vw,72px) clamp(24px,5vw,88px) 100px; }
.view { animation:rise .45s ease both; }.view.active { display:block; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.page-intro.compact { margin-bottom:30px; }
.page-intro h1 { margin:18px 0 0; font-size:clamp(48px,7vw,98px); line-height:.86; letter-spacing:-.085em; }
.intro-copy { max-width:300px; margin:0 0 6px; color:var(--muted); font-size:14px; line-height:1.75; }
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
.health-panel,.pulse-panel { min-height:356px; padding:30px; border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); }
.health-panel { position:relative; overflow:hidden; color:#effff1; background:var(--deep); }
.health-panel::before { content:""; position:absolute; right:-80px; bottom:-180px; width:440px; height:440px; border:1px solid rgba(207,255,226,.14); border-radius:50%; box-shadow:0 0 0 48px rgba(207,255,226,.04),0 0 0 96px rgba(207,255,226,.025); }
.health-panel .section-meta { color:#8fbfa2; }.section-meta { display:flex; justify-content:space-between; color:#91a198; font:10px 'DM Mono',monospace; letter-spacing:.12em; }
.health-score { position:relative; z-index:1; display:flex; align-items:flex-end; margin-top:58px; }.health-score strong { font-size:clamp(90px,12vw,170px); line-height:.72; letter-spacing:-.12em; }.health-score span { margin:0 0 7px 13px; color:#8fbfa2; font:12px 'DM Mono',monospace; }
.health-panel h2 { position:relative; margin:38px 0 7px; font-size:19px; }.health-panel p { position:relative; max-width:390px; margin:0; color:#a4c6b2; font-size:13px; line-height:1.6; }.health-line { position:relative; height:5px; margin-top:26px; background:#2c5a47; }.health-line span { display:block; height:100%; background:var(--lime); transition:width .7s ease; }.text-action { padding:0; border:0; background:transparent; color:var(--green,#21845b); font-size:13px; font-weight:800; }.health-panel .text-action { position:relative; margin-top:26px; color:var(--lime); }.text-action span { margin-left:9px; font-size:18px; }
.pulse-panel { background:#e3f1e6; }.pulse-bars { display:flex; align-items:flex-end; gap:8px; height:220px; margin-top:42px; border-bottom:1px solid #b8d6c1; background:repeating-linear-gradient(to top,transparent 0,transparent 54px,rgba(91,145,111,.12) 55px); }.pulse-bar { flex:1; min-width:4px; background:linear-gradient(to top,#3f9970,#9bd9ad); animation:grow .8s ease both; }.pulse-foot { display:flex; justify-content:space-between; margin-top:18px; color:#52735e; font:10px 'DM Mono',monospace; text-transform:uppercase; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }.section-heading h2 { margin:8px 0 0; font-size:26px; letter-spacing:-.05em; }.section-count { color:#85958c; font:10px 'DM Mono',monospace; }
.signal-section,.overview-sites { margin-top:84px; }.signal-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.signal-item { min-height:130px; padding:22px 24px 24px 0; border-right:1px solid var(--line); }.signal-item:not(:first-child) { padding-left:24px; }.signal-item:last-child { border-right:0; }.signal-kind { display:flex; align-items:center; gap:8px; color:var(--amber); font:10px 'DM Mono',monospace; }.signal-kind::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }.signal-item h3 { margin:19px 0 8px; font-size:15px; }.signal-item p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.site-matrix { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.site-tile { min-height:120px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(251,252,249,.55); text-align:left; }.site-tile:hover { background:#fff; }.site-tile-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.site-tile strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.site-tile small { display:block; margin-top:25px; color:var(--muted); font:10px 'DM Mono',monospace; }.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#93a39a; }.status-dot.up { background:#38a66d; box-shadow:0 0 0 4px rgba(56,166,109,.12); }.status-dot.down { background:var(--red); }
.view-tools { display:flex; align-items:center; gap:10px; }.search-box { display:flex; align-items:center; gap:8px; min-width:210px; padding:9px 12px; border-bottom:1px solid #b5c3b9; background:transparent; color:var(--muted); }.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; }.view-tools select { padding:10px 12px; border:1px solid var(--line); border-radius:0; background:var(--paper); color:var(--ink); font-size:12px; }
.site-summary-strip,.cloud-kpis,.traffic-kpis { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.summary-unit { padding:20px 18px 20px 0; border-right:1px solid var(--line); }.summary-unit:not(:first-child) { padding-left:18px; }.summary-unit:last-child { border-right:0; }.summary-unit span { display:block; color:var(--muted); font:10px 'DM Mono',monospace; }.summary-unit strong { display:block; margin-top:7px; font-size:28px; letter-spacing:-.06em; }
.site-table-wrap { overflow:auto; border-top:1px solid var(--line); }.site-table { width:100%; border-collapse:collapse; min-width:720px; }.site-table th { padding:14px 14px 14px 0; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.08em; text-align:left; text-transform:uppercase; }.site-table td { padding:18px 14px 18px 0; border-top:1px solid var(--line); font-size:13px; }.site-table tbody tr:hover { background:#fff; }.site-cell strong { display:block; }.site-cell small { display:block; margin-top:4px; color:var(--muted); }.site-cell-button { width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }.state-label { display:inline-flex; align-items:center; gap:8px; }.state-label .status-dot { width:7px; height:7px; }
.cloud-layout,.traffic-columns { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }.resource-list-panel,.traffic-chart-panel,.traffic-list-panel { padding:26px; border-top:1px solid var(--line); background:rgba(251,252,249,.65); }.cloud-list,.dns-list { display:grid; }.cloud-row,.dns-row,.rank-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid var(--line); }.cloud-row:first-child,.dns-row:first-child { border-top:0; }.cloud-row strong,.dns-row strong { font-size:13px; }.cloud-row span,.dns-row span { color:var(--muted); font:11px 'DM Mono',monospace; text-align:right; }.cloud-row small,.dns-row small { display:block; margin-top:4px; color:var(--muted); font-weight:400; }
.traffic-kpis { grid-template-columns:repeat(5,1fr); }.traffic-chart-panel { margin-bottom:18px; }.chart-shell { min-height:260px; padding-top:15px; }.chart-svg { width:100%; height:240px; overflow:visible; }.chart-grid { stroke:#dfe7e0; stroke-width:1; }.chart-line { fill:none; stroke:var(--deep); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.chart-area-fill { fill:rgba(75,164,111,.12); }.chart-label { fill:#84928b; font:10px 'DM Mono',monospace; }.traffic-list-panel { min-height:280px; }.rank-row { padding:13px 0; }.rank-row strong { max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.rank-row span { color:var(--muted); font:11px 'DM Mono',monospace; }
.inspector { position:fixed; z-index:8; top:0; right:0; bottom:0; width:min(430px,100%); overflow:auto; padding:30px; background:#fbfcf9; box-shadow:-20px 0 60px rgba(20,52,39,.14); animation:slide .35s ease both; }.inspector-head { display:flex; align-items:center; justify-content:space-between; }.close-button { border:0; background:transparent; color:var(--muted); font-size:28px; }.inspector h2 { margin:60px 0 10px; font-size:34px; letter-spacing:-.06em; }.inspector p { color:var(--muted); font-size:13px; line-height:1.7; }.inspector dl { display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; margin-top:38px; }.inspector dt { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }.inspector dd { margin:5px 0 0; font-size:14px; word-break:break-word; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } @keyframes slide { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } } @keyframes grow { from { height:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (max-width:900px) { .rail { position:sticky; width:100%; height:64px; flex-direction:row; justify-content:space-between; padding:0 16px; }.rail-brand small,.rail-bottom { display:none; }.rail-nav { display:flex; gap:0; margin:0; }.rail-link { width:auto; min-width:62px; height:64px; border-left:0; border-bottom:2px solid transparent; }.rail-link:hover,.rail-link.active { border-left:0; border-bottom-color:var(--lime); }.rail-link .rail-index { display:none; }.app-shell { display:block; }.workspace { width:100%; min-width:0; margin:0; overflow:hidden; }.topbar { height:64px; padding:0 18px; }.topbar-date,.sync-state { display:none; }.content { max-width:100%; padding:32px 20px 70px; overflow:hidden; }.page-intro { display:block; }.page-intro.compact .view-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; }.page-intro.compact .view-tools>* { min-width:0; width:100%; }.intro-copy { margin-top:22px; }.hero-grid,.cloud-layout,.traffic-columns { grid-template-columns:1fr; }.health-panel,.pulse-panel { min-height:300px; }.site-matrix { grid-template-columns:repeat(2,1fr); }.signal-list { grid-template-columns:1fr; }.signal-item,.signal-item:not(:first-child) { min-height:0; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }.signal-item:last-child { border-bottom:0; }.site-summary-strip,.cloud-kpis,.traffic-kpis { grid-template-columns:repeat(2,1fr); }.summary-unit,.summary-unit:not(:first-child) { padding:16px 12px 16px 0; }.summary-unit:nth-child(2n) { padding-left:12px; border-right:0; }.view-tools { margin-top:25px; }.search-box { min-width:0; flex:1; }.inspector { width:100%; }.login-panel { padding-top:90px; } }
@media (max-width:560px) { .topbar-context { font-size:10px; }.topbar-actions { gap:10px; }.topbar-button { font-size:11px; }.page-intro h1 { font-size:54px; }.health-panel,.pulse-panel,.resource-list-panel,.traffic-chart-panel,.traffic-list-panel { padding:22px; }.health-score strong { font-size:105px; }.site-matrix { grid-template-columns:1fr 1fr; }.site-tile { min-height:105px; padding:14px; }.site-tile small { margin-top:18px; }.site-summary-strip,.cloud-kpis,.traffic-kpis { grid-template-columns:1fr 1fr; }.summary-unit:nth-child(n) { border-bottom:1px solid var(--line); }.summary-unit:last-child { border-bottom:0; } }

.rail-icon,.mobile-site-list,.pulse-metrics { display:none; }
.inspector-backdrop { position:fixed; z-index:7; inset:0; border:0; background:rgba(10,31,24,.34); backdrop-filter:blur(3px); }
body.inspector-open { overflow:hidden; }
.cloud-row,.dns-row,.cloud-row strong,.dns-row strong,.cloud-row span,.dns-row span { min-width:0; }
.cloud-row span,.dns-row span,.inspector dd { overflow-wrap:anywhere; }

@media (max-width:900px) {
  :root { --mobile-nav-height:74px; }
  .app-shell { display:block; }
  .rail { position:fixed; z-index:6; inset:auto 0 0; width:100%; height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding:0 8px env(safe-area-inset-bottom); border-top:1px solid rgba(255,255,255,.13); box-shadow:0 -14px 40px rgba(18,63,49,.16); }
  .rail-brand,.rail-bottom { display:none; }
  .rail-nav { width:100%; height:var(--mobile-nav-height); display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0; }
  .rail-link { width:100%; min-width:0; height:var(--mobile-nav-height); gap:2px; padding:8px 2px 6px; border:0; color:#78a68d; }
  .rail-link:hover,.rail-link.active { border:0; color:#f2fff5; }
  .rail-link.active::before { content:""; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--lime); }
  .rail-link .rail-index { display:none; }
  .rail-icon { display:block; height:24px; font-size:21px; line-height:24px; font-weight:400; }
  .rail-link span:last-child { font-size:11px; }
  .workspace { width:100%; margin:0; overflow:visible; }
  .topbar { height:58px; padding:0 16px; }
  .topbar-context { gap:8px; }
  .topbar-slash { font-size:18px; }
  .topbar-date,.sync-state,.topbar-button span { display:none; }
  .topbar-actions { gap:2px; }
  .topbar-button { min-width:48px; min-height:44px; padding:0 8px; font-size:12px; }
  .content { max-width:100%; padding:24px 16px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 34px); overflow:hidden; }
  .page-intro { display:block; margin-bottom:24px; }
  .page-intro h1 { margin:8px 0 0; font-size:clamp(42px,13vw,58px); line-height:.92; }
  .page-intro.compact h1 { font-size:42px; }
  .intro-copy { margin-top:14px; font-size:12px; line-height:1.6; }
  .hero-grid { gap:12px; }
  .health-panel { min-height:0; padding:22px; }
  .health-score { margin:22px 0 2px; }
  .health-score strong { font-size:clamp(78px,25vw,108px); }
  .health-panel h2 { margin-top:0; }
  .health-panel p { margin-bottom:18px; }
  .pulse-panel { min-height:0; padding:20px 22px; }
  .pulse-columns { display:none; }
  .pulse-metrics { display:grid; gap:15px; margin:22px 0 18px; }
  .pulse-metric span { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; color:#557065; font:11px 'DM Mono',monospace; }
  .pulse-metric span b { font-weight:500; }
  .pulse-metric span strong { color:var(--deep); font-size:12px; }
  .pulse-metric>i { display:block; height:6px; overflow:hidden; border-radius:99px; background:#dfe8e1; }
  .pulse-metric>i>em { display:block; height:100%; border-radius:inherit; background:var(--deep); }
  .pulse-foot { padding-top:14px; }
  .signal-section,.overview-sites { margin-top:44px; }
  .section-heading { align-items:end; gap:14px; }
  .section-heading h2 { font-size:25px; }
  .site-matrix { grid-template-columns:1fr; }
  .site-tile { min-height:82px; padding:16px; }
  .site-tile small { margin-top:13px; }
  .page-intro.compact .view-tools { grid-template-columns:1fr 128px; gap:8px; margin-top:20px; }
  .view-tools input,.view-tools select { min-height:48px; }
  .site-summary-strip,.cloud-kpis,.traffic-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:22px; }
  .summary-unit,.summary-unit:not(:first-child) { min-width:0; padding:14px 10px 14px 0; }
  .summary-unit:nth-child(2n) { padding-left:12px; }
  .summary-unit strong { font-size:25px; overflow-wrap:anywhere; }
  .site-table-wrap { display:none; }
  .mobile-site-list { display:grid; border-top:1px solid var(--line); }
  .mobile-site-row { display:grid; gap:9px; width:100%; padding:18px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
  .mobile-site-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .mobile-site-head strong { min-width:0; overflow-wrap:anywhere; font-size:16px; letter-spacing:-.02em; }
  .mobile-site-meta { color:var(--muted); font:10px 'DM Mono',monospace; }
  .mobile-site-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; color:var(--muted); font-size:10px; }
  .mobile-site-stats span { display:grid; gap:3px; }
  .mobile-site-stats b { color:var(--deep); font:600 13px 'DM Mono',monospace; }
  .empty-state { padding:28px 0; color:var(--muted); }
  .cloud-layout,.traffic-columns { gap:12px; }
  .resource-list-panel,.traffic-chart-panel,.traffic-list-panel { padding:20px 18px; }
  .cloud-row,.dns-row { align-items:flex-start; gap:12px; padding:16px 0; }
  .cloud-row strong,.dns-row strong { max-width:52%; overflow-wrap:anywhere; }
  .cloud-row span,.dns-row span { max-width:48%; font-size:10px; line-height:1.55; }
  .chart-shell { min-height:190px; overflow:hidden; }
  .chart-svg { height:190px; }
  .traffic-list-panel { min-height:0; }
  .rank-row strong { max-width:62%; }
  .inspector-backdrop { bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .inspector { inset:auto 0 0; width:100%; max-height:min(88svh,760px); padding:14px 22px calc(26px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; box-shadow:0 -24px 70px rgba(20,52,39,.22); animation:sheet-up .28s ease both; }
  .inspector::before { content:""; display:block; width:38px; height:4px; margin:0 auto 12px; border-radius:99px; background:#ccd8d0; }
  .close-button { width:44px; height:44px; font-size:26px; }
  .inspector h2 { margin:28px 0 9px; font-size:30px; overflow-wrap:anywhere; }
  .inspector dl { gap:18px 12px; margin-top:28px; }
}

@media (max-width:380px) {
  .content { padding-inline:13px; }
  .topbar { padding-inline:13px; }
  .topbar-context { font-size:9px; }
  .page-intro h1 { font-size:43px; }
  .page-intro.compact .view-tools { grid-template-columns:1fr; }
  .mobile-site-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .inspector dl { grid-template-columns:1fr; }
}

@keyframes sheet-up { from { transform:translateY(30px); opacity:0; } to { transform:none; opacity:1; } }

@media (max-width:900px) {
  body.inspector-open .rail { transform:translateY(110%); }
  .rail { transition:transform .22s ease; }
}

/* 2026-07 visual hierarchy refinement */
:root { --bg:#f1f4ef; --paper:#fbfcfa; --ink:#16231d; --muted:#66766e; --line:#d8e0da; --lime:#d5ef66; --soft-green:#e8f0e9; --shadow:0 14px 34px rgba(20,52,39,.07); }
body { color:var(--ink); }
svg { display:block; }
.rail-icon svg,.page-symbol svg,.summary-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rail-icon { color:currentColor; }
.page-intro h1 { text-wrap:balance; }
.page-intro h1 em { color:var(--deep); text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:.13em; text-underline-offset:.05em; }
.intro-copy,.signal-item p,.health-panel p { text-wrap:pretty; }
.intro-context { display:grid; justify-items:end; gap:13px; }
.resource-orbit { width:240px; height:96px; fill:none; stroke:#8ba497; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.resource-orbit circle,.resource-orbit rect { fill:var(--paper); }
.resource-orbit circle:nth-of-type(1),.resource-orbit circle:nth-of-type(2) { fill:var(--deep); stroke:var(--deep); }
.page-symbol { float:left; width:42px; height:42px; margin:1px 12px 0 0; padding:9px; border-radius:50%; color:var(--deep); background:var(--soft-green); }
.page-intro.compact .eyebrow { padding-top:6px; }
.health-panel,.pulse-panel { box-shadow:none; }
.health-panel::before { opacity:.55; }
.pulse-panel { background:#e7efe8; }
.pulse-bar { background:#4b8b68; }
.section-heading h2 { color:var(--ink); }
.summary-unit { position:relative; }
.summary-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:18px; padding:8px; border-radius:50%; color:var(--deep); background:var(--soft-green); }
.summary-unit>span:not(.summary-icon) { color:#718078; }
.summary-unit strong,.health-score strong,.mobile-site-stats b { font-variant-numeric:tabular-nums; }
.signal-item { padding-top:24px; }
.site-tile { background:transparent; transition:background-color .16s ease,transform .16s ease; }
.site-tile:hover { background:var(--paper); transform:translateY(-2px); }
.resource-list-panel,.traffic-chart-panel,.traffic-list-panel { background:rgba(251,252,250,.8); }
.chart-area-fill { fill:rgba(40,105,76,.08); }
.chart-line { stroke-width:2.5; }
.topbar { backdrop-filter:none; background:rgba(241,244,239,.96); }
.inspector-backdrop { backdrop-filter:none; }

@media (max-width:900px) {
  .rail-icon { width:22px; height:22px; }
  .page-intro h1 em { text-decoration-thickness:.11em; }
  .overview-intro { display:grid; grid-template-columns:1fr; }
  .intro-context { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:17px; padding-top:16px; border-top:1px solid var(--line); }
  .resource-orbit { flex:0 0 118px; width:118px; height:48px; }
  .intro-context .intro-copy { margin:0; text-align:right; }
  .page-symbol { width:36px; height:36px; margin-right:9px; padding:8px; }
  .page-intro.compact .eyebrow { padding-top:3px; }
  .page-intro.compact h1 { clear:both; padding-top:8px; }
  .summary-unit { padding-top:18px !important; }
  .summary-icon { width:30px; height:30px; margin-bottom:13px; padding:7px; }
  .health-panel { border:0; }
  .health-panel::before { opacity:.35; }
  .pulse-panel { border-color:#d3ddd5; }
  .signal-section,.overview-sites { margin-top:50px; }
  .mobile-site-row { padding:20px 2px; }
  .resource-list-panel,.traffic-chart-panel,.traffic-list-panel { background:rgba(251,252,250,.68); }
}

:root { --muted:#586b61; }
.page-intro.compact h1 { color:#52645b; line-height:.9; }
.page-intro.compact h1 em { color:var(--deep); }
.summary-unit>span:not(.summary-icon),.summary-unit small,.mobile-site-meta,.mobile-site-stats,.cloud-row small,.dns-row small { color:#65776d; }
.view-tools input,.view-tools select { color:var(--ink); background:rgba(251,252,250,.88); }
@media (max-width:900px) {
  .page-intro.compact h1 { line-height:.86; }
  .page-intro.compact h1 em { display:inline-block; padding-top:.05em; }
}