/* Control shares the HGLR Studio palette, geometry and hierarchy. */
:root {
  --bg:#091522; --surface:#112237; --surface-2:#192d44; --surface-3:#233c55;
  --border:rgba(166,199,235,.22); --border-strong:rgba(166,199,235,.35);
  --text:#f4f8ff; --muted:#b7c8db; --muted-2:#8da9c4;
  --accent:#8cc1ff; --accent-2:#8cc1ff; --sidebar:256px;
  --studio-shadow:0 20px 60px rgba(1,9,25,.18);
}
:root[data-theme=light] {
  --bg:#f0f5fa; --surface:#fff; --surface-2:#e8f1fa; --surface-3:#d7e6f4;
  --border:rgba(45,91,135,.19); --border-strong:rgba(45,91,135,.32);
  --text:#152b45; --muted:#4d6278; --muted-2:#5e7690;
  --accent:#125cae; --accent-2:#125cae;
  --studio-shadow:0 18px 45px rgba(21,52,91,.09);
}
.ecosystem-header { background:color-mix(in srgb,var(--bg) 94%,transparent); }
.ecosystem-brand:hover { color:var(--accent); }
.ecosystem-links { gap:5px; margin-left:auto; border:0; }
.ecosystem-links a { display:inline-flex; align-items:center; min-height:39px; padding:0 15px;
  border-radius:10px; font-weight:680; }
.ecosystem-links a:hover,.ecosystem-links a[aria-current=page] {
  background:var(--surface-2); color:var(--accent); }
.sidebar { background:var(--surface); }
.sidebar-head { min-height:104px; padding:20px 22px; background:linear-gradient(130deg,
  color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface) 78%); }
.sidebar-head::before { top:25px; bottom:25px; left:0; height:auto; width:3px;
  border-radius:0 3px 3px 0; }
.brand-copy strong { font-size:17px; letter-spacing:-.035em; }
.brand-copy .workspace-label { color:var(--accent); }
.nav { padding:17px 13px; gap:4px; }
.nav-divider { padding:19px 13px 6px; font-size:10px; }
.nav-divider::after { display:none; }
.nav-item { min-height:43px; padding:9px 12px; font-size:13px; border:1px solid transparent; }
.nav-icon { font-size:17px; }
.nav-item.active { color:var(--text); background:color-mix(in srgb,var(--accent) 14%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 29%,var(--border)); box-shadow:none; }
.nav-item.active::before { left:-1px; top:8px; bottom:8px; width:3px; height:auto; border-radius:3px; }
.sidebar-foot { padding:14px; }
.connection-card { padding:12px; border-radius:11px; }
.main { background:var(--bg); }
.topbar { height:105px; padding-inline:clamp(20px,3vw,48px); background:var(--bg); }
.topbar h2 { font-size:clamp(31px,2.7vw,42px); }
.topbar > div:first-of-type { padding-left:0; }
.topbar-actions { gap:10px; }
.content { max-width:1660px; padding:27px clamp(20px,3vw,48px) 70px; }
.panel-card,.metric-card,.mail-hero { border-radius:17px; box-shadow:var(--studio-shadow); }
.page[data-page-panel="overview"] .hero-status { display:grid;
  grid-template-columns:minmax(290px,1fr) minmax(440px,.95fr); gap:28px;
  min-height:220px; padding:32px clamp(27px,3vw,43px); margin-bottom:17px;
  border-color:color-mix(in srgb,var(--accent) 27%,var(--border));
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),
    var(--surface) 55%,color-mix(in srgb,var(--accent) 5%,var(--surface))); }
.hero-copy > .eyebrow { margin:0 0 16px; font-size:11px; letter-spacing:.14em; }
.hero-status h3 { margin:0 0 17px; font-size:clamp(32px,3vw,48px); line-height:1.05; }
.hero-status h3 em { font:inherit; color:var(--accent); }
.hero-status-line { display:inline-flex; align-items:center; padding:6px 11px;
  border:1px solid color-mix(in srgb,var(--green) 35%,var(--border)); border-radius:30px;
  background:color-mix(in srgb,var(--green) 9%,var(--surface)); color:var(--text); font-size:12px; }
.hero-hostname { color:var(--muted); }
.hero-status #hero-platform { margin-top:12px; font-size:12px; line-height:1.55; }
.hero-mail-link { font-size:13px; font-weight:700; }
.hero-meta { align-self:center; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
  padding:0; border:0; border-radius:0; background:none; }
.hero-meta div { display:flex; flex-direction:column; justify-content:center; gap:10px;
  min-width:0; min-height:94px; padding:15px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); }
.hero-meta div:first-child { padding:15px; border:1px solid var(--border); }
.hero-meta span { font-size:10px; color:var(--muted-2); }
.hero-meta strong { font-size:14px; overflow-wrap:anywhere; }
.hero-ip-control { display:flex; align-items:center; gap:5px; }
.hero-ip-control code { font-size:13px; }
.ip-copy-button b { display:none; }
.metric-grid { gap:14px; margin:0 0 17px; }
.metric-card { position:relative; min-height:166px; padding:20px 22px;
  background:var(--surface); border-top:2px solid color-mix(in srgb,var(--accent) 62%,var(--border)); }
.metric-card:nth-child(2) { border-top-color:#86d4ed; }
.metric-card:nth-child(3) { border-top-color:var(--green); }
.metric-card:nth-child(4) { border-top-color:var(--yellow); }
.metric-head { font-size:11px; color:var(--muted); }
.metric-icon { width:32px; height:32px; border-radius:10px; }
.metric-value { margin:15px 0 12px; }
.metric-value strong { font-size:clamp(33px,2.5vw,42px); }
.metric-card p { margin-top:10px; color:var(--muted); font-size:11px; line-height:1.45; }
.progress { height:6px; border-radius:8px; }
.overview-shortcuts { padding:0 0 18px; }
.overview-shortcuts button { min-height:38px; padding:8px 12px; border-radius:10px; font-size:12px; }
.dashboard-grid { gap:16px; }
.chart-card,.section-grid > .panel-card,#overview-services-card,#overview-websites-card,
.dashboard-grid > .panel-card:not(.chart-card) { padding:23px 25px; background:var(--surface); }
.dashboard-grid .chart-wrap { height:205px; }
.card-head { margin-bottom:18px; }
.card-head h3 { font-size:19px; }
.status-row { min-height:49px; }
.mail-hero { padding:31px; background:linear-gradient(120deg,
  color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 75%); }
.mail-hero h3 { font-size:clamp(31px,2.8vw,44px); }
.page:not([data-page-panel="overview"]) .panel-card { background:var(--surface); }
.secondary-button,.ghost-button,.mail-row,.account-button { border-radius:10px; }
input,select,textarea { min-height:42px; border-radius:10px; background:var(--bg); }
.login-screen { background:var(--bg); }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--studio-shadow); }

@media(max-width:1300px) {
  .page[data-page-panel="overview"] .hero-status { grid-template-columns:1fr; min-height:0; }
}
@media(max-width:900px) {
  .content { padding:23px 20px 55px; }
  .page[data-page-panel="overview"] .hero-status { padding:26px; }
}
@media(max-width:690px) {
  .page[data-page-panel="overview"] .hero-status { gap:20px; padding:21px; }
  .hero-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-meta div { min-height:76px; padding:12px; }
  .hero-meta div:first-child { padding:12px; }
  .hero-meta div:nth-child(3) { grid-column:1/-1; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { min-height:145px; padding:16px; }
  .metric-value strong { font-size:32px; }
}
@media(max-width:400px) {
  .metric-grid { grid-template-columns:1fr; }
}
/* Keep the user editor inside the viewport; its form scrolls vertically only. */
.user-modal[open] { width:min(820px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow:hidden; }
.user-modal .user-modal-card { box-sizing:border-box; width:100%; max-width:100%; max-height:calc(100dvh - 32px); overflow-y:auto; overflow-x:hidden; }
.user-modal .form-grid,.user-modal .permission-grid,.user-modal .permission-fieldset { min-width:0; }
.user-modal .permission-option { min-width:0; }
.user-modal .permission-option span { min-width:0; overflow-wrap:anywhere; }
@media(max-width:670px) { .user-modal .form-grid.two,.user-modal .permission-grid { grid-template-columns:minmax(0,1fr); } }
.mail-usage-meter { display:block; width:100%; max-width:230px; height:7px; margin-top:9px; accent-color:var(--accent); }
@media(max-width:850px) { .mail-row { flex-wrap:wrap; } .mail-row-actions { flex:1 1 100%; } }