/* HGLR Control 2026: compact controls and readable data across the whole panel. */
:root {
  --sidebar:232px;
  --muted:#b7c5d6;
  --muted-2:#93a7be;
  --surface:#101f30;
  --surface-2:#17293d;
  --surface-3:#20374e;
  --border:rgba(185,213,246,.20);
  --border-strong:rgba(185,213,246,.32);
}
:root[data-theme=light] {
  --muted:#40536b;
  --muted-2:#596d83;
  --surface:#fff;
  --surface-2:#f0f5fb;
  --surface-3:#e4edf7;
  --border:rgba(33,66,112,.20);
  --border-strong:rgba(33,66,112,.32);
}
.ecosystem-header { box-shadow:none; }
.ecosystem-links { background:transparent; }
.sidebar { box-shadow:none; background:var(--surface); }
.sidebar-head { min-height:87px; }
.sidebar-head::before { height:31px; background:var(--accent); box-shadow:none; }
.nav { padding:12px 12px 18px; gap:2px; }
.nav-divider { padding:15px 11px 6px; color:var(--muted-2); }
.nav-item { min-height:38px; color:var(--muted); font-size:12px; font-weight:650; }
.nav-item.active { background:color-mix(in srgb,var(--accent) 13%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 24%,var(--border)); box-shadow:inset 2px 0 0 var(--accent); }
.nav-icon { color:var(--muted-2); }
.connection-card { background:var(--surface-2); }
.main { background:var(--bg); }
.content { max-width:1550px; padding:28px clamp(19px,2.7vw,40px) 66px; }
.topbar { margin-bottom:20px; }
.topbar > div:first-of-type { padding-left:0; border-left:0; }
.topbar h2 { font-size:clamp(30px,2.6vw,38px); }
.panel-card,.metric-card,.mail-hero { background:var(--surface); border:1px solid var(--border); box-shadow:none; border-radius:13px; }
.panel-card::before,.panel-card::after,.hero-status::before,.hero-status::after,.metric-card::after { content:none!important; display:none!important; }
.panel-card:hover,.metric-card:hover { box-shadow:none; border-color:var(--border-strong); }
.page[data-page-panel="overview"] .hero-status {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
  min-height:0; gap:24px; align-items:center; padding:21px 24px; margin-bottom:12px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface) 55%);
}
.hero-copy > .eyebrow { margin-bottom:7px; color:var(--accent); }
.hero-status h3 { margin:0 0 12px; font-size:clamp(26px,2.4vw,34px); letter-spacing:-.045em; line-height:1.1; }
.hero-status h3 em { font:inherit; font-style:normal; color:var(--accent); }
.hero-status-line { gap:8px; padding:0; border:0; background:none; color:var(--green); font-size:12px; }
.hero-hostname { max-width:220px; color:var(--muted); }
.hero-status #hero-platform { margin-top:6px; color:var(--muted); font-size:11px; }
.hero-mail-link { margin-top:9px; color:var(--accent); font-size:12px; }
.hero-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-self:auto; align-items:center; gap:0; padding:13px 2px; border:1px solid var(--border); background:var(--surface-2); backdrop-filter:none; }
.hero-meta div { padding:0 13px; min-width:0; }
.hero-meta span { color:var(--muted-2); font-size:10px; letter-spacing:.09em; }
.hero-meta strong { color:var(--text); font-size:12px; line-height:1.35; }
.ip-copy-button { min-width:0; padding:5px; }
.ip-copy-button b { display:none; }
.metric-grid { gap:10px; margin:0 0 11px; }
.metric-card { min-height:122px; padding:15px 17px; overflow:hidden; background:var(--surface); }
.metric-head { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.08em; }
.metric-icon { width:26px; height:26px; background:var(--surface-2); border:1px solid var(--border); }
.metric-value { margin:9px 0 7px; }
.metric-value strong { font-size:32px; line-height:1; }
.metric-card p { color:var(--muted-2); font-size:10px; line-height:1.35; }
.network-value { margin:11px 0 5px; }
.network-value strong { font-size:13px; }
.progress { height:4px; background:var(--surface-3); }
.overview-shortcuts { padding:0 0 13px; gap:7px; }
.overview-shortcuts button { min-height:34px; padding:6px 10px; font-size:11px; background:var(--surface); }
.dashboard-grid { gap:11px; }
@media(min-width:1181px) {
  .page[data-page-panel="overview"] .dashboard-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .page[data-page-panel="overview"] .dashboard-grid > :nth-child(2),
  .page[data-page-panel="overview"] .dashboard-grid > :nth-child(3) { order:1; grid-column:span 6; }
  .page[data-page-panel="overview"] .dashboard-grid > :nth-child(1),
  .page[data-page-panel="overview"] .dashboard-grid > :nth-child(4) { order:2; grid-column:span 6; }
}
.chart-card,.section-grid > .panel-card,#overview-services-card,#overview-websites-card,.dashboard-grid > .panel-card:not(.chart-card) { padding:18px 20px; background:var(--surface); }
.dashboard-grid .chart-wrap { height:154px; }
.chart-wrap { background:transparent; }
.card-head { margin-bottom:13px; }
.card-head h3 { font-size:16px; }
.card-head .eyebrow { color:var(--accent); }
.status-row { min-height:43px; }
.status-row:hover { background:var(--surface-2); }
.page-intro p:not(.eyebrow),.detail-list,.notice p { color:var(--muted); }
.page:not([data-page-panel="overview"]) .panel-card { background:var(--surface); }
.mail-hero { min-height:0; padding:23px 25px; }
.mail-hero h3 { font-size:clamp(29px,3vw,40px); }
.mail-workspace > .panel-card { background:var(--surface); }
input,select,textarea { color:var(--text); border-color:var(--border-strong); background:var(--bg); }
input::placeholder,textarea::placeholder { color:var(--muted-2); }
label,.form-help { color:var(--muted); }
.secondary-button,.ghost-button,.mail-row { border-color:var(--border); }
:root[data-theme=light] .hero-status,:root[data-theme=light] .metric-card,:root[data-theme=light] .mail-hero,:root[data-theme=light] .chart-card { box-shadow:none; }
@media(max-width:1250px) {
  .page[data-page-panel="overview"] .hero-status { grid-template-columns:1fr; }
  .hero-meta { max-width:none; }
}
@media(max-width:900px) { .content { padding:24px 20px 55px; } }
@media(max-width:690px) {
  .page[data-page-panel="overview"] .hero-status { padding:18px; gap:15px; }
  .hero-meta { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 0; }
  .hero-meta div:nth-child(3) { grid-column:1/-1; padding-left:13px; border-left:0; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { min-height:116px; padding:13px; }
  .metric-value strong { font-size:27px; }
}
@media(max-width:390px) { .metric-grid { grid-template-columns:1fr; } }