/* HGLR workspace: the control tools share the website's typography, spacing and colour system. */
:root {
  --bg:#081321;
  --surface:#0d1a2a;
  --surface-2:#112238;
  --surface-3:#182d45;
  --border:rgba(180,207,243,.14);
  --border-strong:rgba(180,207,243,.25);
  --text:#f4f7fd;
  --muted:#a7b7cb;
  --muted-2:#7388a4;
  --accent:#83bbff;
  --accent-2:#73d2e2;
  --green:#67d9ae;
  --yellow:#ffd477;
  --red:#ff8397;
  --shadow:0 24px 64px rgba(0,8,21,.35);
  --radius:14px;
  --sidebar:246px;
  color-scheme:dark;
}
:root[data-theme=light] {
  --bg:#f6f8fc;
  --surface:#fff;
  --surface-2:#edf3fa;
  --surface-3:#dfeaf7;
  --border:rgba(30,60,110,.17);
  --border-strong:rgba(30,60,110,.29);
  --text:#102039;
  --muted:#4f6077;
  --muted-2:#75879d;
  --accent:#155bb1;
  --accent-2:#087b94;
  --green:#16815b;
  --yellow:#9a6300;
  --red:#b93d56;
  --shadow:0 20px 44px rgba(38,67,109,.12);
  color-scheme:light;
}
html,body { background:var(--bg); color:var(--text); font-family:Inter,"Segoe UI",ui-sans-serif,system-ui,sans-serif; }
body::before { display:none; }
body { min-width:320px; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* The same product header stays visible from the public site into the workspace. */
.ecosystem-header { height:76px; position:sticky; top:0; z-index:80; display:flex; align-items:center; gap:38px; padding:0 clamp(20px,3.4vw,48px); background:color-mix(in srgb,var(--bg) 90%,transparent); border-bottom:1px solid var(--border); backdrop-filter:blur(18px); }
.ecosystem-brand { display:inline-flex; flex:none; gap:9px; align-items:center; color:var(--text); text-decoration:none; font-size:19px; font-weight:850; line-height:1; letter-spacing:-.075em; }
.ecosystem-brand img { display:block; width:45px; height:45px; object-fit:contain; }
.ecosystem-brand small { display:block; margin-top:4px; color:var(--muted); font-size:8px; font-weight:780; letter-spacing:.32em; }
.ecosystem-links { display:flex; align-items:center; gap:30px; margin-left:auto; }
.ecosystem-links a { color:var(--muted); text-decoration:none; font-size:13px; transition:color .2s; }
.ecosystem-links a:hover { color:var(--text); }
.ecosystem-links a[aria-current=page] { color:var(--accent); font-weight:760; }
.ecosystem-actions { display:flex; align-items:center; gap:12px; }
.ecosystem-actions .theme-switch { height:40px; }
.ecosystem-return { display:inline-flex; gap:12px; align-items:center; min-height:38px; padding:0 14px; color:var(--text); text-decoration:none; white-space:nowrap; font-size:12px; font-weight:730; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; }
.ecosystem-return:hover { border-color:var(--accent); }
.ecosystem-return span { color:var(--accent); font-size:17px; }

/* Functional navigation lives beneath the site header. */
.app { min-height:calc(100vh - 76px); }
.sidebar { top:76px; bottom:0; width:var(--sidebar); height:calc(100dvh - 76px); background:var(--surface); border-right:1px solid var(--border); box-shadow:none; backdrop-filter:none; }
.sidebar-head { min-height:88px; padding:16px 20px; gap:12px; border-bottom:1px solid var(--border); }
.brand-mark,.brand-mark.small,.login-brand .brand-mark { display:grid; place-items:center; width:40px; height:40px; flex:none; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.brand-mark::after,.logo-mark::after { display:none; }
.brand-mark img,.logo-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-copy { display:grid; gap:4px; }
.brand-copy strong { color:var(--text); font-size:14px; font-weight:770; }
.brand-copy span { color:var(--muted-2); font-size:11px; }
.nav { gap:2px; padding:12px 12px 20px; }
.nav-divider { color:var(--muted-2); padding:15px 12px 7px; font-size:9px; letter-spacing:.13em; }
.nav-divider::after { background:var(--border); }
.nav-item { min-height:40px; padding:8px 11px; gap:10px; border-radius:9px; color:var(--muted); font-size:12px; font-weight:680; }
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item:hover { transform:none; border-color:var(--border); }
.nav-item.active { background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border-color:var(--border); color:var(--accent); box-shadow:none; }
.nav-item.active::before { left:0; top:11px; width:2px; height:18px; background:var(--accent); box-shadow:none; }
.nav-icon { width:19px; height:23px; font-size:16px; font-weight:500; background:transparent; }
.nav-item.active .nav-icon { background:transparent; }
.nav-badge { color:var(--accent); background:var(--surface-2); }
.site-back { border:1px solid var(--border); background:var(--surface-2); margin-bottom:5px; color:var(--text); }
.sidebar-foot { border-top:1px solid var(--border); padding:14px 13px; gap:8px; background:var(--surface); }
.connection-card { background:var(--surface-2); border-color:var(--border); border-radius:9px; }
.connection-card > span { color:var(--muted-2); }
.status-dot.online { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent); }

/* Larger page titles, quieter cards and consistent actions. */
.main { margin-left:var(--sidebar); min-height:calc(100vh - 76px); background:var(--bg); }
.topbar { top:76px; height:88px; padding:0 clamp(22px,3vw,44px); background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:1px solid var(--border); }
.topbar h2 { font-size:28px; font-weight:700; letter-spacing:-.055em; line-height:1.1; }
.eyebrow,#page-kicker { color:var(--accent); font-size:10px; font-weight:770; letter-spacing:.17em; }
#page-kicker { margin-bottom:8px; }
.topbar-actions { gap:10px; }
.clock { color:var(--muted-2); border-right:1px solid var(--border); }
.account-button { min-width:auto; min-height:38px; display:inline-flex; align-items:center; gap:9px; padding:4px 12px 4px 5px; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:9px; box-shadow:none; }
.account-button:hover { border-color:var(--accent); transform:none; }
.account-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:color-mix(in srgb,var(--accent) 18%,var(--surface)); color:var(--accent); font-size:15px; }
.account-text strong { font-size:11px; color:var(--text); }
.content { max-width:1560px; padding:30px clamp(22px,3vw,44px) 65px; }
.page { animation:pageIn .18s ease both; }
.panel-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:none; }
.panel-card::before,.panel-card::after { display:none; }
.panel-card:hover { border-color:var(--border-strong); }
.hero-status { min-height:150px; padding:25px 28px; margin-bottom:14px; background:radial-gradient(circle at 93% 7%,rgba(41,119,236,.14),transparent 38%),var(--surface); }
.hero-status::before { display:none; }
.hero-status::after { background:radial-gradient(circle,rgba(72,146,248,.1),transparent 68%); }
.hero-status-line { color:var(--green); }
.hero-status h3 { font-size:clamp(24px,2.6vw,36px); font-weight:710; }
.hero-meta div { border-left:1px solid var(--border); }
.hero-meta span { color:var(--muted-2); }
.metric-grid { gap:13px; margin-bottom:13px; }
.metric-card { min-height:147px; padding:18px 20px; box-shadow:none; }
.metric-card::after { display:none; }
.metric-card:hover { border-color:var(--border-strong); transform:none; box-shadow:none; }
.metric-icon { background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border:1px solid var(--border); color:var(--accent); }
.metric-value strong { color:var(--text); font-size:36px; }
.metric-card p { color:var(--muted-2); }
.progress { background:var(--surface-3); box-shadow:none; }
.progress i { background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:none; }
.network-value div:last-child span { color:var(--accent); }
.ip-copy-button.copied { color:var(--green); background:var(--surface-2); border-color:var(--green); }
.dashboard-grid,.section-grid { gap:13px; }
.chart-card,.section-grid > .panel-card,#overview-services-card,#overview-websites-card,.dashboard-grid > .panel-card:not(.chart-card) { padding:22px; }
.chart-wrap { background:transparent; }
.card-head h3 { color:var(--text); font-size:17px; font-weight:690; }
.page-intro h3 { color:var(--text); font-size:clamp(25px,3vw,35px); }
.page-intro p:not(.eyebrow) { color:var(--muted); }
.detail-list div,.status-row { border-bottom-color:var(--border); }
.info-callout,.notice { border-color:var(--border); background:var(--surface-2); }
.info-callout span,.notice > span,.text-button,.audit-row strong { color:var(--accent); }
.empty-state { background:var(--surface-2); border-color:var(--border); }
.secondary-button,.ghost-button,.ip-copy-button,.preset-button { background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); box-shadow:none; }
.secondary-button:hover,.ghost-button:hover,.preset-button:hover,.ip-copy-button:hover:not(:disabled) { background:var(--surface-3); border-color:var(--accent); color:var(--text); }
.primary-button { background:#87bfff; color:#081728; border-radius:8px; box-shadow:none; font-weight:750; }
.primary-button:hover { filter:brightness(1.04); }
.danger-button { border-radius:8px; }
.user-avatar,.user-modal-symbol { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); border:1px solid var(--border); box-shadow:none; }
.role-chip,.self-chip { color:var(--accent); background:var(--surface-2); border-color:var(--border); }
.permission-option:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); }
.permission-option input:checked ~ i { background:var(--accent); color:var(--bg); box-shadow:none; }
.modal-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); }
.toast { background:var(--surface); border-color:var(--border); }
input,select,textarea { color:var(--text); background:var(--bg); border:1px solid var(--border-strong); border-radius:8px; }
input:focus,select:focus,textarea:focus { color:var(--text); background:var(--bg); border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
label { color:var(--muted); }
.table-wrap th { color:var(--muted-2); }
.table-wrap td { color:var(--text); border-bottom-color:var(--border); }
.table-wrap { background:var(--surface); border-color:var(--border); }
.table-wrap th { background:var(--surface-2); }
.memory-bars > div,.storage-primary-meta div,.memory-stat-grid div { background:var(--surface-2); border-color:var(--border); }
.disk-percent { background:none; color:var(--accent); }
.chart-tooltip { background:var(--surface); border-color:var(--border); box-shadow:var(--shadow); }
.chart-tooltip-row strong { color:var(--text); }
.chart-tooltip-row span,.chart-tooltip-time { color:var(--muted); border-color:var(--border); }
.terminal-output { background:var(--surface-2); }

/* Mail has its own concise, useful work area rather than inherited status cards. */
.mail-hero { display:flex; align-items:end; justify-content:space-between; gap:25px; min-height:222px; padding:30px 34px; margin-bottom:18px; background:radial-gradient(circle at 91% 16%,rgba(65,139,248,.19),transparent 40%),var(--surface); }
.mail-hero h3 { margin:11px 0 13px; color:var(--text); font-size:clamp(34px,4vw,51px); font-weight:710; line-height:1.1; letter-spacing:-.06em; }
.mail-hero h3 em { color:var(--accent); font:italic 400 1em Georgia,ui-serif,serif; }
.mail-hero p:not(.eyebrow) { max-width:525px; margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.mail-hero .secondary-button { flex:none; text-decoration:none; }
.mail-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.mail-domain { display:flex; align-items:center; gap:13px; }
.mail-domain-icon { display:grid; place-items:center; width:43px; height:43px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--accent); font-size:19px; }
.mail-domain strong { display:block; font-size:16px; letter-spacing:-.03em; }
.mail-domain small,.mail-domain-note { color:var(--muted-2); font-size:11px; }
.mail-domain-note { text-align:right; }
.mail-storage-summary { display:grid; gap:4px; text-align:right; }
.mail-storage-summary span { color:var(--accent); font-size:10px; font-weight:750; letter-spacing:.1em; }
.mail-storage-summary strong { color:var(--text); font-size:22px; letter-spacing:-.04em; }
.mail-storage-summary small { color:var(--muted-2); font-size:11px; }
#mail-notice { margin-bottom:16px; }
.mail-workspace.section-grid.two { grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr); align-items:start; }
.mail-create-card,.mail-list-card { min-height:315px; }
.mail-workspace .card-head { margin-bottom:20px; }
.mail-form { display:grid; gap:15px; }
.mail-form label { display:grid; gap:8px; }
.mail-form input { width:100%; min-height:44px; }
.mail-form .password-wrap { position:relative; }
.mail-form .password-wrap input { padding-right:48px; }
.mail-form .password-wrap button { position:absolute; top:4px; right:4px; width:36px; height:36px; }
.mail-form p { color:var(--muted-2); margin:0; font-size:11px; line-height:1.6; }
.mail-form .primary-button { justify-self:start; min-height:44px; }
.mail-list-tools { display:grid; grid-template-columns:minmax(150px,1fr) minmax(132px,auto); gap:10px; margin-bottom:14px; }
.mail-search-label { display:grid; gap:7px; min-width:0; }
.mail-search-label span { color:var(--muted-2); font-size:11px; }
.mail-search-label input,.mail-search-label select { width:100%; min-height:41px; }
.mail-list { display:grid; align-content:start; gap:8px; max-height:430px; overflow:auto; }
.mail-list p { margin:0; padding:19px; background:var(--surface-2); border-radius:9px; color:var(--muted); font-size:12px; }
.mail-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.mail-identity { display:flex; align-items:center; min-width:0; gap:10px; }
.mail-identity .mail-avatar { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:8px; color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,var(--surface)); }
.mail-identity > div { min-width:0; }
.mail-identity strong { display:block; color:var(--text); font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.mail-identity small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.mail-row-actions { display:flex; flex:none; flex-wrap:wrap; align-items:center; gap:6px; }
.mail-row-actions button { flex:none; min-height:34px; padding:7px 9px; font-size:11px; }
#edit-own-profile { margin-top:20px; }

/* The public theme switch and panel theme switch use the same preference. */
:root[data-theme=light] .primary-button { background:#155bb1; color:#fff; }
:root[data-theme=light] .panel-card,:root[data-theme=light] .sidebar,:root[data-theme=light] .sidebar-foot,:root[data-theme=light] .modal-card { background:var(--surface); }
:root[data-theme=light] .hero-status { background:radial-gradient(circle at 90% 12%,rgba(41,119,236,.09),transparent 38%),var(--surface); }
:root[data-theme=light] .user-meta dd,:root[data-theme=light] .permission-option strong,:root[data-theme=light] .switch-row strong,:root[data-theme=light] .user-identity h3 { color:var(--text); }
:root[data-theme=light] .role-chip.owner { color:#815300; background:#fff6e5; }
:root[data-theme=light] .account-button,:root[data-theme=light] .mail-row,:root[data-theme=light] .notice,:root[data-theme=light] .permission-option,:root[data-theme=light] .user-meta div { background:var(--surface-2); }

@media(max-width:1180px) { .ecosystem-links { gap:17px; } .mail-workspace.section-grid.two { grid-template-columns:1fr 1fr; } }
@media(max-width:900px) {
  .sidebar { top:76px; bottom:0; height:calc(100dvh - 76px); box-shadow:var(--shadow); }
  .main { margin-left:0; }
  .topbar { top:76px; }
  .mail-workspace.section-grid.two { grid-template-columns:1fr; }
  .mail-hero { min-height:0; }
}
@media(max-width:1180px) { .mail-row { align-items:flex-start; flex-direction:column; } }
@media(max-width:690px) {
  .ecosystem-header { height:68px; gap:12px; padding:0 18px; }
  .ecosystem-brand { font-size:17px; }
  .ecosystem-brand img { width:39px; height:39px; }
  .ecosystem-brand small { font-size:7px; }
  .ecosystem-links { display:none; }
  .ecosystem-actions { margin-left:auto; gap:4px; }
  .ecosystem-return { min-height:38px; font-size:0; padding:0 11px; }
  .ecosystem-return span { font-size:18px; }
  .sidebar { top:68px; height:calc(100dvh - 68px); }
  .topbar { top:68px; height:73px; }
  .topbar h2 { font-size:22px; }
  .topbar-actions .clock { display:none; }
  .account-text { display:none; }
  .account-button { padding:4px; }
  .content { padding:19px 17px 50px; }
  .mail-hero { align-items:start; flex-direction:column; padding:23px; }
  .mail-domain-note { display:none; }
  .mail-toolbar { align-items:flex-start; flex-wrap:wrap; }
  .mail-storage-summary { text-align:left; }
}
@media(max-width:520px) {
  .hero-meta div { border-left:0; padding-left:0; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { min-height:137px; padding:15px; }
  .metric-value strong { font-size:28px; }
  .metric-card p { font-size:9px; }
  .mail-row { align-items:start; }
  .mail-row-actions button { white-space:nowrap; }
  .mail-list-tools { grid-template-columns:1fr; }
  .mail-hero h3 { font-size:37px; }
  .mail-workspace .panel-card { padding:19px; }
}
@media(max-width:390px) { .metric-grid { grid-template-columns:1fr; } .mail-row { flex-direction:column; } .ecosystem-brand span { display:none; } .ecosystem-brand img { width:37px; height:37px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* One HGLR header; the page heading belongs to the workspace below it. */
.workspace-skip { position:absolute; left:-10000px; top:8px; z-index:200; padding:10px 15px; background:var(--accent); color:var(--bg); text-decoration:none; }
.workspace-skip:focus { left:12px; }
.ecosystem-header { gap:clamp(22px,3vw,48px); }
.ecosystem-brand { letter-spacing:-.055em; }
.ecosystem-brand img { filter:drop-shadow(0 2px 9px rgba(50,127,246,.16)); }
.ecosystem-links { gap:5px; }
.ecosystem-links a { display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:8px; font-weight:680; }
.ecosystem-links a:hover { color:var(--text); background:var(--surface-2); }
.ecosystem-links a[aria-current=page] { color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,var(--bg)); }
.ecosystem-actions { padding-left:12px; border-left:1px solid var(--border); }
.sidebar { background:color-mix(in srgb,var(--surface) 88%,var(--bg)); }
.sidebar-head { min-height:96px; padding:18px 22px; }
.brand-copy { gap:3px; }
.brand-copy .workspace-label { color:var(--accent); font-size:9px; font-weight:780; letter-spacing:.16em; }
.brand-copy strong { font-size:16px; letter-spacing:-.035em; }
.brand-copy #brand-server { font-size:11px; }
.nav { padding:12px 14px 22px; gap:3px; }
.nav-divider { padding:18px 9px 7px; }
.nav-divider::after { background:var(--border); }
.nav-item { min-height:43px; font-size:12px; font-weight:650; padding:8px 11px; border:1px solid transparent; }
.nav-item.active { background:color-mix(in srgb,var(--accent) 11%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 19%,var(--border)); color:var(--text); }
.nav-item.active::before { display:none; }
.nav-item.active .nav-icon { color:var(--accent); }
.nav-icon { width:22px; height:24px; display:grid; place-items:center; color:var(--muted-2); font-size:16px; }
.sidebar-foot { padding:13px 15px; }
.connection-card { background:transparent; border:0; padding:7px 5px; }
.connection-card > span { padding-left:17px; }
.main { background:var(--bg); }
.content { max-width:1590px; padding:clamp(26px,3vw,48px) clamp(20px,3vw,54px) 70px; }
.topbar { position:relative; top:auto; height:auto; min-height:57px; padding:0; margin-bottom:26px; background:none; border:0; box-shadow:none; backdrop-filter:none; gap:24px; }
.topbar h2 { font-size:clamp(31px,2.9vw,42px); font-weight:740; letter-spacing:-.065em; }
#page-kicker { margin-bottom:9px; font-size:10px; }
.topbar-actions { gap:9px; }
.clock { display:none; }
.topbar .secondary-button { min-height:39px; padding:8px 13px; }
.account-button { min-width:0; background:var(--surface); padding:4px 13px 4px 5px; }
.account-avatar { border-radius:7px; }
.panel-card { border-radius:12px; }
.hero-status { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(470px,.9fr); gap:32px; align-items:end; min-height:210px; padding:30px clamp(25px,3vw,42px); margin-bottom:14px; background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 42%),var(--surface); }
.hero-copy { min-width:0; }
.hero-copy > .eyebrow { margin-bottom:15px; }
.hero-status h3 { margin:0 0 14px; color:var(--text); font-size:clamp(35px,3vw,48px); font-weight:740; line-height:1.05; letter-spacing:-.075em; }
.hero-status h3 em { color:var(--accent); font:italic 400 1em Georgia,ui-serif,serif; letter-spacing:-.07em; }
.hero-status-line { margin-bottom:6px; font-size:12px; font-weight:690; }
.hero-hostname { display:inline-block; max-width:190px; padding:4px 8px; border:1px solid var(--border); border-radius:5px; color:var(--muted); background:var(--surface-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:620; }
.hero-status #hero-platform { color:var(--muted); line-height:1.45; }
.hero-mail-link { margin-top:16px; padding:0; border:0; background:none; color:var(--accent); font-size:12px; font-weight:750; }
.hero-mail-link span { padding-left:6px; }
.hero-mail-link:hover { text-decoration:underline; text-underline-offset:4px; }
.hero-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; width:100%; padding-bottom:6px; }
.hero-meta div { min-width:0; gap:8px; padding:0 14px; }
.hero-meta div:first-child { padding-left:0; border-left:0; }
.hero-meta strong { white-space:normal; overflow-wrap:anywhere; }
.hero-meta span { letter-spacing:.12em; }
.metric-grid { gap:12px; }
.metric-card { min-height:140px; padding:17px 19px; }
.metric-head { color:var(--muted); letter-spacing:.1em; }
.metric-icon { width:27px; height:27px; background:transparent; border:0; color:var(--accent); }
.metric-value { margin:15px 0 11px; }
.metric-value strong { font-size:34px; font-weight:710; letter-spacing:-.065em; }
.network-value { margin:15px 0 7px; gap:5px; }
.network-value strong { font-size:14px; }
.progress { height:4px; }
.chart-card,.section-grid > .panel-card,#overview-services-card,#overview-websites-card,.dashboard-grid > .panel-card:not(.chart-card) { padding:22px 24px; }
.dashboard-grid { grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); }
.dashboard-grid .chart-wrap { height:170px; }
.card-head .eyebrow { margin:0; }
.card-head h3 { font-size:17px; font-weight:720; letter-spacing:-.035em; }
.status-row { min-height:49px; }
.mail-hero { min-height:205px; padding:28px 32px; }
.mail-hero h3 { font-size:clamp(36px,3.4vw,48px); }
.login-card { background:var(--surface); border-color:var(--border); box-shadow:var(--shadow); }
.login-glow { opacity:.13; }
.user-card:hover { transform:none; border-color:var(--border-strong); }
.permission-chips span,.user-meta div,.search-field,.permission-option,.switch-row { background:var(--surface-2); border-color:var(--border); }
.user-meta dd,.user-identity h3,.permission-option strong,.switch-row strong { color:var(--text); }
.user-avatar,.user-modal-symbol { color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,var(--surface)); box-shadow:none; border:1px solid var(--border); }
.permission-option:hover { border-color:var(--border-strong); }
.permission-option:has(input:checked) { border-color:color-mix(in srgb,var(--accent) 42%,var(--border)); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); }
.permission-option input:checked ~ i { background:var(--accent); box-shadow:none; }
.audit-entry-icon { color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,var(--surface)); }
.terminal-output { background:var(--surface-2); }

@media(max-width:1300px) {
  .hero-status { grid-template-columns:1fr; gap:23px; }
  .hero-meta { max-width:680px; }
}
@media(max-width:1180px) {
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .dashboard-grid .chart-wrap { height:190px; }
}
@media(max-width:900px) {
  .content { padding:30px 25px 58px; }
  .topbar { padding:0; }
  .sidebar { background:var(--surface); }
}
@media(max-width:690px) {
  :root { --workspace-header-height:112px; }
  .ecosystem-header { height:var(--workspace-header-height); flex-wrap:wrap; align-content:center; justify-content:space-between; gap:5px 12px; padding:6px 17px; }
  .ecosystem-links { display:flex; order:3; width:100%; margin:0; }
  .ecosystem-links a { flex:1; justify-content:center; min-height:34px; padding:0 5px; font-size:11px; }
  .ecosystem-actions { margin:0; padding:0; border:0; }
  .sidebar { top:var(--workspace-header-height); height:calc(100dvh - var(--workspace-header-height)); }
  .topbar { height:auto; margin-bottom:20px; }
  .topbar h2 { font-size:30px; }
  .content { padding:26px 17px 48px; }
  .hero-status { padding:25px 23px; min-height:0; }
  .hero-status h3 { font-size:38px; }
  .hero-meta { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:15px; }
  .hero-meta div:nth-child(3) { padding-left:0; border-left:0; }
  .dashboard-grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { min-height:136px; }
  .mail-hero { padding:25px; }
}
@media(max-width:440px) {
  .topbar { flex-wrap:wrap; gap:11px; }
  .topbar-actions { width:100%; justify-content:space-between; }
  .account-text { display:grid; }
  .metric-card { padding:14px; }
  .metric-value strong { font-size:28px; }
  .hero-meta div { padding:0 10px; }
  .hero-ip-control { flex-wrap:wrap; }
}

/* Mission workspace: a distinctive interface built on the public site's palette. */
:root { --sidebar:260px; --workspace-glow:rgba(48,132,247,.13); }
:root[data-theme=light] { --workspace-glow:rgba(41,100,202,.08); }
.ecosystem-header { box-shadow:0 13px 40px rgba(0,8,24,.07); }
.ecosystem-brand { letter-spacing:-.055em; }
.ecosystem-links { padding:4px; gap:3px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.ecosystem-links a { display:inline-flex; align-items:center; min-height:34px; padding:0 16px; border-radius:8px; font-weight:680; }
.ecosystem-links a:hover { background:var(--surface-2); }
.ecosystem-links a[aria-current=page] { background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
.sidebar { background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface) 48%); }
.sidebar-head { min-height:103px; padding:20px 20px; }
.sidebar-head::before { content:""; display:block; width:3px; height:39px; border-radius:4px; background:linear-gradient(var(--accent),var(--accent-2)); box-shadow:0 0 17px color-mix(in srgb,var(--accent) 36%,transparent); }
.brand-copy .workspace-label { font-size:9px; }
.brand-copy strong { font-size:18px; }
.nav-divider { padding:22px 10px 8px; letter-spacing:.16em; }
.nav-divider:first-child { padding-top:8px; }
.nav-item { min-height:43px; border-radius:10px; transition:background .18s,color .18s,border-color .18s; }
.nav-item.active { background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),color-mix(in srgb,var(--accent) 5%,var(--surface))); border-color:color-mix(in srgb,var(--accent) 26%,var(--border)); box-shadow:inset 3px 0 0 var(--accent); }
.nav-item.active .nav-icon { color:var(--accent); }
.sidebar-foot { background:transparent; }
.connection-card { border:1px solid var(--border); background:color-mix(in srgb,var(--accent) 5%,var(--surface)); padding:12px; border-radius:11px; }
.connection-card > span { padding-left:17px; }
.main { background:radial-gradient(ellipse at 73% 0,var(--workspace-glow),transparent 49%),var(--bg); }
.content { max-width:1720px; padding:clamp(26px,2.5vw,42px) clamp(23px,3vw,55px) 75px; }
.topbar { margin-bottom:25px; }
.topbar > div:first-of-type { padding-left:17px; border-left:2px solid var(--accent); }
.topbar h2 { font-size:clamp(33px,2.8vw,44px); }
.topbar .secondary-button,.account-button { min-height:40px; border-radius:10px; }
.account-avatar { background:linear-gradient(145deg,var(--accent),var(--accent-2)); color:#081321; font-weight:900; }
.panel-card { border-radius:16px; }
.hero-status { position:relative; isolation:isolate; min-height:236px; padding:34px clamp(27px,3vw,46px); border-color:color-mix(in srgb,var(--accent) 23%,var(--border)); background:linear-gradient(112deg,var(--surface) 25%,color-mix(in srgb,var(--accent) 10%,var(--surface)) 100%); box-shadow:0 18px 44px rgba(0,17,44,.12); overflow:hidden; }
.hero-status::before { display:block; content:""; position:absolute; z-index:0; right:4%; top:-71%; width:500px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:50%; box-shadow:0 0 0 70px color-mix(in srgb,var(--accent) 3%,transparent),0 0 0 145px color-mix(in srgb,var(--accent) 2%,transparent); pointer-events:none; }
.hero-status::after { display:block; content:""; position:absolute; z-index:0; right:0; bottom:0; left:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2) 39%,transparent 75%); pointer-events:none; }
.hero-status > * { position:relative; z-index:1; }
.hero-status h3 { font-size:clamp(39px,3.5vw,55px); }
.hero-copy > .eyebrow { letter-spacing:.2em; }
.hero-status-line { display:inline-flex; align-items:center; gap:9px; padding:7px 11px; border:1px solid color-mix(in srgb,var(--green) 25%,var(--border)); border-radius:30px; background:color-mix(in srgb,var(--green) 6%,var(--surface)); }
.hero-hostname { padding:0 0 0 8px; border:0; border-left:1px solid var(--border); border-radius:0; background:none; }
.hero-status #hero-platform { margin-top:9px; }
.hero-meta { align-self:end; border:1px solid var(--border); border-radius:12px; padding:15px 6px; background:color-mix(in srgb,var(--surface) 81%,transparent); backdrop-filter:blur(8px); }
.hero-meta div { padding:0 13px; }
.metric-grid { gap:13px; margin:17px 0; }
.metric-card { --metric-color:var(--accent); position:relative; min-height:167px; padding:20px 21px; overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--metric-color) 6%,var(--surface)),var(--surface) 53%); }
.metric-card:nth-child(2) { --metric-color:var(--accent-2); }
.metric-card:nth-child(3) { --metric-color:var(--green); }
.metric-card:nth-child(4) { --metric-color:var(--yellow); }
.metric-card::after { display:block; content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--metric-color),transparent 76%); }
.metric-head { font-size:11px; }
.metric-icon { width:32px; height:32px; border:1px solid color-mix(in srgb,var(--metric-color) 25%,var(--border)); border-radius:9px; background:color-mix(in srgb,var(--metric-color) 12%,var(--surface)); color:var(--metric-color); }
.metric-value strong { font-size:clamp(34px,2.8vw,42px); }
.progress { height:5px; background:color-mix(in srgb,var(--metric-color) 12%,var(--surface-3)); }
.progress i { background:var(--metric-color); }
.network-value div span { color:var(--metric-color); }
.overview-shortcuts { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:4px 0 18px; }
.shortcut-label { margin-right:8px; color:var(--muted-2); font-size:10px; font-weight:800; letter-spacing:.17em; white-space:nowrap; }
.overview-shortcuts button { display:inline-flex; align-items:center; gap:9px; min-height:37px; padding:6px 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); font:690 11px/1 Inter,"Segoe UI",ui-sans-serif,system-ui,sans-serif; transition:background .18s,border-color .18s; }
.overview-shortcuts button:hover { background:var(--surface-2); border-color:color-mix(in srgb,var(--accent) 52%,var(--border)); }
.overview-shortcuts button > span { color:var(--accent); font-size:15px; }
.overview-shortcuts button b { color:var(--muted-2); font-size:13px; font-weight:500; }
.dashboard-grid { gap:14px; }
@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(1),
  .page[data-page-panel="overview"] .dashboard-grid > :nth-child(4) { grid-column:span 8; }
  .page[data-page-panel="overview"] .dashboard-grid > :nth-child(2),
  .page[data-page-panel="overview"] .dashboard-grid > :nth-child(3) { grid-column:span 4; }
}
.chart-card,.section-grid > .panel-card,#overview-services-card,#overview-websites-card,.dashboard-grid > .panel-card:not(.chart-card) { padding:24px clamp(19px,2vw,28px); }
.chart-card { background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 4%,var(--surface)),var(--surface) 60%); }
.chart-wrap { border-radius:10px; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent); }
.card-head h3 { font-size:19px; }
.status-row { border-radius:8px; }
.status-row:hover { background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
.mail-hero { border-color:color-mix(in srgb,var(--accent) 22%,var(--border)); background:radial-gradient(ellipse at 90% 15%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 57%),var(--surface); }
.mail-domain-icon { background:color-mix(in srgb,var(--accent) 13%,var(--surface)); }
.mail-workspace > .panel-card { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 4%,var(--surface)),var(--surface) 55%); }
#edit-own-profile { width:100%; justify-content:space-between; margin-top:22px; padding:13px 16px; font-size:13px; }
:root[data-theme=light] .hero-status,.metric-card,.mail-hero,.chart-card { box-shadow:0 14px 35px rgba(23,61,119,.06); }
@media(max-width:1180px) { .hero-status { min-height:0; } .hero-meta { align-self:auto; } }
@media(max-width:900px) { .content { padding:28px 24px 60px; } }
@media(max-width:690px) {
  .ecosystem-links { padding:2px; }
  .ecosystem-links a { min-height:31px; }
  .content { padding:25px 18px 54px; }
  .hero-status { padding:26px 23px; }
  .hero-meta { padding:12px 4px; }
  .metric-card { min-height:150px; }
  .overview-shortcuts { gap:7px; }
  .shortcut-label { width:100%; margin:0 0 4px; }
}
@media(max-width:440px) { .hero-status-line { flex-wrap:wrap; } .metric-card { padding:16px; } .metric-value strong { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { .nav-item { transition:none; } }