@font-face {font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/07431a16dd76433e.woff2") format("woff2");}
@font-face {font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/c5c4490645b295f5.woff2") format("woff2");}
@font-face {font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/ffa1f1149b7accfe.woff2") format("woff2");}
@font-face {font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/22d5b0872539c73c.woff2") format("woff2");}
@font-face {font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cc5f60fd46e42cc9.woff2") format("woff2");}
:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#17384f;
  background:#f3f6fa;
  font-synthesis:none;
  --ink:#113451;
  --muted:#637c8e;
  --accent:#1767a4;
  --border:#dae5ed}
* {
  box-sizing:border-box}
body {
  margin:0}
a {
  color:inherit}
button,input,select {
  font:inherit}
button {
  cursor:pointer;
  background:var(--accent);
  color:white;
  border:1px solid var(--accent);
  border-radius:8px;
  padding:12px 18px;
  font-weight:650}
button:hover {
  background:#104e7e}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #d1aa5b;
  outline-offset:3px}
p {
  color:var(--muted);
  line-height:1.7}
h1,h2,h3 {
  letter-spacing:-.035em}
h1 {
  font-size:clamp(32px,4vw,46px);
  margin:14px 0}
h2 {
  font-size:23px;
  margin:0 0 12px}
h3 {
  font-size:17px}
code {
  font-size:12px;
  overflow-wrap:anywhere}
small {
  font-size:12px}
footer {
  color:var(--muted);
  font-size:12px;
  padding:28px 0}
.brand {
  font-size:25px;
  font-weight:850;
  letter-spacing:-1.5px;
  text-decoration:none;
  display:block}
.brand span {
  font-weight:450}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:2.5px;
  margin-top:5px;
  font-weight:550}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:750;
  color:var(--accent)}
.pill {
  display:inline-block;
  border-radius:30px;
  font-size:10px;
  letter-spacing:1px;
  padding:8px 12px;
  background:#e8f3fc;
  color:var(--accent);
  font-weight:700}
.pill.muted {
  background:#edf1ef;
  color:#6a7e7a}
.login-page {
  min-height:100svh;
  background:#083b66;
  color:#f0f6fc;
  display:flex;
  flex-direction:column;
  padding:40px clamp(24px,6vw,96px);
  background-image:radial-gradient(ellipse at 20% 100%,#14577f 0,transparent 60%)}
.login-page .brand {
  color:#f0f6fc}
.login-layout {
  margin:auto 0;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:80px;
  align-items:center;
  padding:70px 0}
.login-intro .eyebrow {
  color:#00aaff}
.login-intro h1 {
  font-size:clamp(40px,5.2vw,70px);
  line-height:1.12;
  max-width:700px;
  margin:25px 0}
.login-intro p {
  color:#b7d0e3;
  font-size:18px;
  max-width:390px}
.intro-detail {
  margin-top:42px;
  font-size:12px;
  color:#b7d0e3;
  display:flex;
  align-items:center;
  gap:16px}
.line {
  width:45px;
  height:1px;
  background:#4c96d7}
.login-card {
  background:#fafcfb;
  border-radius:18px;
  padding:42px;
  color:var(--ink);
  box-shadow:0 24px 60px #001c2533;
  max-width:460px}
.login-card h2 {
  font-size:30px;
  margin-top:25px}
.login-card p {
  font-size:14px}
.microsoft-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin:28px 0;
  background:white;
  color:var(--ink);
  border-color:#cbdce8;
  font-size:14px}
.microsoft-button:hover {
  background:#edf4f0}
.microsoft-mark {
  display:grid;
  grid-template-columns:9px 9px;
  gap:2px}
.microsoft-mark i {
  height:9px;
  background:#f25022}
.microsoft-mark i:nth-child(2) {
  background:#7fba00}
.microsoft-mark i:nth-child(3) {
  background:#00a4ef}
.microsoft-mark i:nth-child(4) {
  background:#ffb900}
.login-note {
  border-top:1px solid var(--border);
  padding-top:20px;
  font-size:12px;
  color:var(--muted);
  line-height:1.7}
.login-page footer {
  color:#8eb0ce}
.portal-page {
  display:flex;
  min-height:100svh}
.sidebar {
  background:#083b66;
  color:#e1effb;
  width:250px;
  padding:32px 22px;
  position:fixed;
  height:100svh;
  display:flex;
  flex-direction:column}
.sidebar .brand {
  padding:0 10px}
.nav-caption {
  font-size:9px;
  letter-spacing:1.5px;
  color:#84b1d3;
  margin:45px 10px 15px}
.sidebar nav a {
  display:block;
  text-decoration:none;
  font-size:14px;
  padding:13px 14px;
  border-radius:8px;
  margin:6px 0}
.sidebar nav a small {
  display:block;
  color:#8ab8d8;
  margin-top:4px;
  font-size:10px}
.sidebar nav a:hover,.sidebar nav .active {
  background:#164f78}
.sidebar-bottom {
  margin-top:auto;
  border-top:1px solid #26597f;
  padding-top:20px;
  font-size:13px}
.text-button {
  border:0;
  background:none;
  padding:12px 0;
  color:#a3cbea;
  font-size:12px}
.text-button:hover {
  background:none;
  color:white}
.workspace {
  margin-left:250px;
  width:calc(100% - 250px);
  padding:30px clamp(24px,4vw,64px);
  max-width:1600px}
.workspace-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:26px;
  border-bottom:1px solid var(--border)}
.page-title {
  margin:34px 0 24px}
.page-title p {
  margin-top:5px}
.notice {
  border:1px solid #d2e4f3;
  background:#edf5fc;
  border-radius:10px;
  padding:15px 20px;
  font-size:12px;
  line-height:1.6;
  margin-bottom:22px;
  color:#42657f}
.card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:26px;
  margin-bottom:22px}
.card>p {
  font-size:13px}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px}
.organization-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px}
.organization-card {
  text-decoration:none;
  transition:border-color .2s}
.organization-card:hover {
  border-color:var(--accent)}
.organization-card h2 {
  margin:20px 0}
.permission-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
  margin-top:20px}
.permission-item {
  border:1px solid #e7ece9;
  border-radius:7px;
  padding:12px}
.permission-item code {
  color:#1767a4}
.permission-item small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:8px;
  line-height:1.6}
.table-wrap {
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  text-align:left}
th {
  color:var(--muted);
  font-size:10px;
  padding:12px 8px;
  border-bottom:1px solid var(--border)}
td {
  padding:15px 8px;
  border-bottom:1px solid #edf1ef;
  vertical-align:top}
.small {
  font-size:11px;
  padding:7px 10px}
.danger {
  color:#94514e;
  background:#fff7f5;
  border-color:#eddcd8}
.danger:hover {
  background:#f9e9e4}
.secondary {
  background:white;
  color:var(--accent);
  border-color:#c8d9d2}
.secondary:hover {
  background:#f0f6fc}
label {
  display:block;
  font-size:12px;
  color:#4d6868;
  margin:12px 0}
input:not([type=checkbox]),select {
  display:block;
  border:1px solid #cfdcd6;
  border-radius:7px;
  width:100%;
  padding:11px;
  background:white;
  color:var(--ink);
  margin-top:7px;
  min-width:0}
input[type=checkbox] {
  accent-color:var(--accent)}
.inline-form {
  display:flex;
  align-items:end;
  gap:15px}
.inline-form label {
  flex:1;
  margin-bottom:0}
.form-grid,.split-forms {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px}
.split-forms {
  margin:20px 0;
  border-top:1px solid var(--border);
  padding-top:12px}
.checkbox-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:4px;
  margin:18px 0}
.checkbox {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0}
.compact-list {
  padding:0;
  list-style:none;
  font-size:12px}
.compact-list li {
  padding:12px 0;
  border-bottom:1px solid var(--border)}
details {
  padding:14px 0;
  border-top:1px solid var(--border)}
summary {
  cursor:pointer;
  font-size:14px;
  font-weight:650}
summary small {
  color:var(--muted);
  margin-left:10px;
  font-weight:400}
.warning-text {
  font-size:12px;
  color:#997547}
pre {
  font-size:11px;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.empty {
  max-width:660px}
.empty code {
  display:block;
  background:#f2f6f3;
  padding:16px;
  border-radius:8px}
.welcome-page {
  min-height:100svh;
  background:#083b66;
  color:#f0f6fc;
  padding:clamp(24px,5vw,64px);
  display:flex;
  flex-direction:column}
.welcome-page header {
  font-size:20px;
  font-weight:750}
.welcome-page header span {
  color:#9aa8bc;
  margin-left:10px}
.welcome-page main {
  width:min(700px,100%);
  margin:auto 0;
  padding:72px 0}
.welcome-page h1 {
  font-size:clamp(42px,7vw,72px);
  line-height:1.08}
.welcome-page p {
  color:#b2bfd0;
  font-size:18px;
  max-width:530px}
.welcome-page .label {
  border:1px solid #45605e;
  border-radius:99px;
  padding:8px 14px;
  display:inline-block;
  color:#b6c6da;
  font-size:14px}
@media(max-width:900px) {
  .login-layout {
  gap:35px}
.login-card {
  padding:28px}
.sidebar {
  width:210px}
.workspace {
  margin-left:210px;
  width:calc(100% - 210px)}
}
@media(max-width:680px) {
  .login-layout {
  grid-template-columns:1fr;
  padding:45px 0}
.login-card {
  max-width:none}
.login-intro h1 {
  font-size:40px}
.portal-page {
  display:block}
.sidebar {
  position:static;
  width:100%;
  height:auto;
  padding:20px}
.sidebar nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.nav-caption {
  margin:20px 10px 5px}
.sidebar-bottom {
  margin-top:15px}
.workspace {
  margin-left:0;
  width:100%;
  padding:24px 18px}
.form-grid,.split-forms {
  grid-template-columns:1fr}
.inline-form {
  display:block}
.inline-form button {
  margin-top:15px}
.section-heading {
  align-items:start;
  flex-direction:column}
.card {
  padding:20px}
}


/* Hostbaas house style from the supplied original logo. */
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { display:block; width:44px; height:44px; object-fit:contain; border-radius:4px; flex-shrink:0; }
.brand-text { display:block; }
.welcome-page header .brand-text { color:#f0f6fc; margin-left:0; }
.welcome-page header .brand-text span { color:inherit; margin-left:0; }
.permission-item strong { font-size:12px; }

:root { --brand-navy:#083b66; --brand-blue:#4c96d7; --brand-cyan:#00aaff; }
.account-layout{max-width:580px;margin:40px auto;padding:0 20px}.totp-qr{display:block;width:min(100%,280px);height:auto;margin:24px auto}.recovery-codes{columns:2;margin:24px 0}.login-card form label{display:block;margin:16px 0}.login-card input{width:100%}.login-card button{width:100%}

.organization-nav{width:100%}.customer-nav{margin:4px 0 16px 18px;padding-left:12px;border-left:1px solid var(--brand-blue)}.customer-nav .nav-caption{display:block;margin:8px 10px}.breadcrumb{font-size:14px}.breadcrumb a{color:var(--brand-navy)}

.monitoring-values{display:flex;flex-direction:column;gap:6px;min-width:260px}.monitoring-values small{color:#526273}

/* Service-oriented portal shell, inspired by hPanel; Hostbaas branding. */
.portal-page { background:#f5f6fa; color:#23364b; }
.portal-page .sidebar { background:#fff; color:#23364b; width:264px; padding:28px 18px 16px; border-right:1px solid #e3e7ee; overflow-y:auto; }
.portal-page .sidebar .brand { color:var(--brand-navy); margin-bottom:26px; }
.portal-page .sidebar nav a { font-size:14px; padding:12px 14px; margin:3px 0; }
.portal-page .sidebar nav a:hover { background:#f4f7fb; }
.portal-page .sidebar nav a.active { background:#eaf3fc; color:var(--accent); font-weight:650; }
.portal-page .sidebar nav a small { color:#65768b; font-size:11px; }
.nav-icon { display:inline-block; width:24px; font-size:18px; vertical-align:middle; }
.nav-planned { display:flex; align-items:center; gap:4px; padding:12px 14px; font-size:14px; color:#64748b; }
.nav-planned small { margin-left:auto; font-size:10px; }
.portal-page .nav-caption { color:#66768b; margin:24px 14px 8px; font-size:10px; }
.organization-switcher { margin-top:22px; border-color:#e3e7ee; }
.organization-switcher summary { color:#64748b; font-size:12px; padding:0 12px; }
.portal-page .customer-nav { border-color:#dce7f1; }
.portal-page .sidebar-bottom { border-color:#e3e7ee; margin-top:auto; padding:20px 14px 0; font-size:12px; }
.portal-page .text-button { color:#64748b; }
.portal-page .text-button:hover { color:var(--accent); }
.portal-page .workspace { margin-left:264px; width:calc(100% - 264px); max-width:none; padding:0 clamp(22px,4vw,60px); }
.portal-page .workspace-header { min-height:88px; padding:16px 0; gap:20px; }
.header-context { display:block; font-size:13px; color:#64748b; margin-top:5px; }
.account-shortcut { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:13px; min-width:0; }
.account-shortcut small { display:block; color:#64748b; margin-top:3px; }
.avatar { display:grid; place-items:center; width:38px; height:38px; background:#e3effa; color:var(--accent); border-radius:50%; flex-shrink:0; }
.portal-page h1 { font-size:clamp(28px,3vw,36px); letter-spacing:-.035em; }
.portal-page h2 { font-size:19px; letter-spacing:-.02em; }
.portal-page .page-title { margin:32px 0 26px; }
.portal-page .page-title p { font-size:14px; }
.portal-page .card { border-color:#e3e7ee; border-radius:12px; box-shadow:0 2px 3px #23364b03; }
.overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.overview-card { display:flex; flex-direction:column; gap:10px; text-decoration:none; min-width:0; }
.overview-card>span:not(.metric-icon) { color:#64748b; font-size:13px; }
.overview-card strong { font-size:26px; font-weight:650; }
.overview-card small { color:#64748b; line-height:1.5; }
.metric-icon { display:grid; place-items:center; width:36px; height:36px; background:#edf5fc; color:var(--accent); border-radius:9px; font-size:22px; }
.services-section { margin-top:32px; }
.subtle { color:#64748b; font-size:12px; }
.service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:18px; }
.service-card { position:relative; padding:22px; }
.service-card .pill { position:absolute; top:22px; right:16px; font-size:9px; letter-spacing:0; padding:5px 8px; }
.service-card h3 { margin:22px 0 8px; }
.service-card p { font-size:13px; margin:0; }
.portal-page th { font-size:11px; font-weight:600; background:#f8f9fc; padding:14px 12px; }
.portal-page td { padding:18px 12px; }
.portal-page .monitoring-values { min-width:220px; }
.portal-page .pill.muted { background:#f0f2f6; color:#5b6b80; }
.portal-page .section-heading h2 { margin-bottom:0; }
.portal-page .organization-card:hover,.overview-card[href]:hover { border-color:var(--brand-blue); }
@media(max-width:1100px) { .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) {
  .portal-page .sidebar { width:220px; padding:24px 12px; }
  .portal-page .workspace { margin-left:220px; width:calc(100% - 220px); padding:0 22px; }
  .overview-grid { grid-template-columns:1fr; gap:0; }
}
@media(max-width:680px) {
  .portal-page .sidebar { position:static; width:100%; height:auto; padding:20px 18px; }
  .portal-page .workspace { margin-left:0; width:100%; padding:0 18px; }
  .portal-page .sidebar .brand { margin-bottom:16px; }
  .portal-page .sidebar nav { display:block; }
  .portal-page .primary-nav { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-page .sidebar-bottom { margin-top:12px; }
  .portal-page .workspace-header { min-height:78px; }
  .account-shortcut>span:last-child { max-width:140px; overflow-wrap:anywhere; }
  .service-grid { grid-template-columns:1fr; gap:0; }
  .portal-page .section-heading { flex-direction:row; flex-wrap:wrap; align-items:center; }
}
.site-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:24px 0}.site-heading h1{font-size:clamp(24px,3vw,40px);overflow-wrap:anywhere}.site-heading p{margin:0}.refresh-link{border:1px solid var(--border);border-radius:9px;padding:12px 18px;background:#fff;text-decoration:none;font-weight:650;white-space:nowrap}.site-summary{display:flex;align-items:center;justify-content:space-between;gap:24px}.site-summary p{margin-bottom:0}.site-summary small{text-align:right;color:var(--muted);line-height:1.7}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0}.metric-card{margin:0;display:flex;flex-direction:column;min-height:240px}.metric-value{font-size:clamp(30px,4vw,48px);font-weight:750;color:var(--brand-navy);letter-spacing:-.04em;margin:20px 0 12px;overflow-wrap:anywhere}.metric-value span{font-size:22px;font-weight:500;margin-left:6px;color:var(--muted)}.metric-card p{margin:12px 0 20px}.metric-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}.metric-meter{width:100%;height:12px;border:0;border-radius:20px;appearance:none}.metric-meter::-webkit-meter-bar{background:#edf2f7;border:0;border-radius:20px}.metric-meter::-webkit-meter-optimum-value{background:var(--brand-blue);border-radius:20px}.metric-meter::-moz-meter-bar{background:var(--brand-blue);border-radius:20px}.status-badge{display:inline-block;font-size:12px;font-weight:650;padding:7px 11px;border-radius:20px;white-space:nowrap}.status-ok{background:#e7f5ee;color:#236744}.status-down{background:#fdecec;color:#a12c35}.status-unknown{background:#edf2f7;color:#5b7183}.dashboard-link{font-weight:650;text-decoration:none;white-space:nowrap}.site-link{font-weight:650}.backup-card{display:flex;justify-content:space-between;align-items:center;gap:20px}.backup-card h2{margin-top:12px}.backup-card p{margin-bottom:0}.monitoring-note{font-size:12px;max-width:760px}@media(max-width:760px){.metric-grid{grid-template-columns:1fr}.site-heading,.site-summary,.backup-card{align-items:flex-start;flex-direction:column}.site-summary small{text-align:left}.metric-card{min-height:220px}.metric-value{font-size:38px}}



.website-tabs { display:flex; gap:8px 20px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin:0 0 24px; padding:0 0 14px; font-size:13px; }
.website-tabs a { text-decoration:none; color:var(--accent); font-weight:650; }
.website-tabs a:hover { text-decoration:underline; }
.website-tabs>span { color:#64748b; }
.item-slug { display:block; color:#64748b; margin-top:5px; overflow-wrap:anywhere; }
.website-link { color:var(--accent); text-decoration:none; font-weight:650; }
.website-link:hover { text-decoration:underline; }
.overview-card .status-value { font-size:22px; }

/* Website catalog follows the supplied hosting-panel references. */
.portal-page .sidebar nav a.nav-subitem { margin-left:24px; padding:9px 14px; border-left:1px solid #e3e7ee; border-radius:0; font-size:12px; }
.catalog-search { margin:0; }
.catalog-search label { margin:0 0 10px; }
.catalog-search>div { display:flex; gap:12px; align-items:center; }
.catalog-search input { margin:0 !important; }
.catalog-search button { white-space:nowrap; }
.website-group { padding:0 !important; overflow:hidden; }
.website-group-header { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 26px; border-bottom:1px solid var(--border); }
.website-row { display:flex; gap:18px; align-items:center; padding:26px; border-bottom:1px solid #edf0f5; }
.website-row:last-child { border:0; }
.website-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid #dce7f1; border-radius:50%; color:var(--accent); font-family:Georgia,serif; font-size:24px; flex-shrink:0; }
.website-row-info { flex:1; min-width:0; }
.website-name { display:block; font-size:14px; font-weight:650; text-decoration:none; overflow-wrap:anywhere; }
.website-name:hover { color:var(--accent); }
.website-row-info small { display:block; color:#64748b; margin:8px 0; }
.outline-link { display:inline-block; padding:10px 16px; border:1px solid #dce3ec; border-radius:9px; text-decoration:none; font-size:12px; color:var(--accent); white-space:nowrap; }
.outline-link:hover { background:#edf5fc; }
@media(max-width:680px) { .website-row { flex-wrap:wrap; padding:20px; gap:12px; } .website-row .outline-link { margin-left:50px; } .catalog-search>div { align-items:stretch; } .catalog-search button { padding:10px; } }
.site-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:20px 0; }
.site-metrics .metric-card { min-height:100px; padding:18px; border:1px solid #e3e7ee; border-radius:10px; background:#f8fafd; gap:12px; }
.site-metrics .metric-card>span { color:#64748b; font-size:12px; }
.site-metrics .metric-card>strong { font-size:22px; }
@media(max-width:1100px) { .site-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:400px) { .site-metrics { grid-template-columns:1fr; } }

/* Shared control-panel design tokens and consistent page geometry. */
.portal-page { --ink:#202733; --muted:#687182; --border:#e2e4e9; --accent:#1767a4; background:#f5f5f7; color:var(--ink); }
.portal-page .sidebar { width:240px; background:#eeeef1; border:0; padding:26px 16px; }
.portal-page .workspace { margin-left:240px; width:calc(100% - 240px); padding:0 clamp(24px,5vw,80px); }
.portal-page .workspace-header { background:#102b45; color:#fff; min-height:68px; margin:0 calc(-1 * clamp(24px,5vw,80px)); padding:14px clamp(24px,5vw,80px); border:0; }
.portal-page .workspace-header .eyebrow,.portal-page .header-context,.portal-page .account-shortcut small { color:#c0d1e0; }
.portal-page .workspace-header .eyebrow { font-size:10px; letter-spacing:1px; }
.portal-page .sidebar nav a { padding:11px 14px; font-weight:500; border-radius:12px; }
.portal-page .sidebar nav a.active { background:#fff; color:#202733; box-shadow:0 1px 2px #17253308; }
.portal-page .sidebar nav a:hover { background:#fff; }
.portal-page .sidebar .brand { margin-bottom:28px; font-size:22px; }
.portal-page .brand-logo { width:38px; height:38px; }
.portal-page .brand small { letter-spacing:1.6px; font-size:8px; }
.portal-page .nav-planned { padding:11px 14px; font-size:13px; }
.portal-page .organization-switcher { border-color:#d9dce3; }
.portal-page .sidebar-bottom { border-color:#d9dce3; }
.portal-page .breadcrumb { font-size:12px; margin:24px 0 0; }
.portal-page .page-title { margin:24px 0; }
.portal-page h1 { font-size:28px; font-weight:600; letter-spacing:-.025em; overflow-wrap:anywhere; }
.portal-page h2 { font-size:16px; font-weight:600; letter-spacing:-.015em; }
.portal-page .card { border:1px solid var(--border); border-radius:16px; box-shadow:none; padding:24px; margin-bottom:20px; }
.portal-page .card>p { font-size:12px; }
.portal-page .overview-grid { gap:16px; }
.portal-page .overview-card { gap:8px; padding:22px 24px; }
.portal-page .overview-card strong { font-size:24px; font-weight:600; }
.portal-page .overview-card small { font-size:11px; }
.portal-page .website-tabs { gap:24px; font-size:12px; padding-bottom:14px; margin-bottom:20px; }
.portal-page .website-tabs a { color:#4b5666; font-weight:500; }
.portal-page .website-tabs a:first-child { color:var(--accent); }
.portal-page .pill { letter-spacing:0; font-size:10px; padding:5px 10px; }
.portal-page .refresh-link,.portal-page .outline-link { padding:8px 14px; font-size:12px; font-weight:500; border-radius:10px; }
.portal-page .site-metrics .metric-card { background:#fff; border:0; border-right:1px solid var(--border); border-radius:0; padding:8px 20px; min-height:76px; gap:10px; }
.portal-page .site-metrics .metric-card:first-child { padding-left:0; }
.portal-page .site-metrics .metric-card:last-child { border:0; }
.portal-page .site-metrics .metric-card strong { font-size:24px; font-weight:600; }
.portal-page .catalog-search label { font-size:12px; }
.portal-page .catalog-search input { border-color:var(--border); border-radius:10px; padding:12px 14px; font-size:13px; }
.portal-page .catalog-search button { border-radius:10px; padding:12px 18px; font-size:12px; }
.portal-page .website-group-header { padding:22px 24px; font-size:14px; }
.portal-page .website-row { padding:24px; }
.portal-page .website-name { font-size:14px; }
.portal-page .inventory-panel { padding:0; }
.portal-page .inventory-panel>summary { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; gap:16px; font-size:15px; list-style:none; }
.portal-page .inventory-panel>summary::after { content:'⌄'; color:#687182; }
.portal-page .inventory-panel[open]>summary::after { content:'⌃'; }
.portal-page .inventory-panel>summary>span { margin-left:auto; font-size:12px; font-weight:400; color:#687182; }
.portal-page .inventory-panel-content { padding:0 24px 24px; }
.portal-page .inventory-panel-content>.section-heading,.portal-page .inventory-panel-content>h2 { display:none; }
.portal-page .inventory-panel-content .catalog-search { padding:0 0 20px; }
.portal-page td { padding:16px 12px; font-size:12px; }
.portal-page th { padding:12px; font-size:11px; background:#f6f7f9; }
.portal-page .item-slug { font-size:10px; }
@media(min-width:1500px) { .portal-page .workspace>section,.portal-page .workspace>nav,.portal-page .workspace>p,.portal-page .workspace>div,.portal-page .workspace>details,.portal-page .workspace>footer { max-width:1140px; margin-left:auto; margin-right:auto; } }
@media(max-width:800px) { .portal-page .sidebar { width:210px; } .portal-page .workspace { margin-left:210px; width:calc(100% - 210px); padding:0 24px; } .portal-page .workspace-header { margin:0 -24px; padding:14px 24px; } }
@media(max-width:680px) { .portal-page .sidebar { width:100%; padding:18px; } .portal-page .workspace { width:100%; margin-left:0; padding:0 18px; } .portal-page .workspace-header { margin:0 -18px; padding:14px 18px; } .portal-page .sidebar .brand { margin-bottom:12px; } .portal-page .organization-switcher { margin-top:12px; } .portal-page .overview-grid { grid-template-columns:1fr; gap:0; } .portal-page .site-metrics .metric-card { padding:12px; border:0; } .portal-page .inventory-panel>summary { padding:20px; } .portal-page .inventory-panel-content { padding:0 16px 20px; } }

/* Compact, script-free mobile navigation. */
.mobile-menu-toggle,.mobile-menu-button { display:none; }
.sidebar-menu { display:flex; flex-direction:column; flex:1; min-height:0; }
@media(max-width:680px) {
  .portal-page .sidebar { position:relative; padding:14px 18px; min-height:70px; }
  .portal-page .sidebar .brand { margin:0; width:calc(100% - 110px); font-size:20px; }
  .portal-page .sidebar .brand-logo { width:32px; height:32px; }
  .portal-page .sidebar .brand small { font-size:7px; letter-spacing:1px; }
  .mobile-menu-toggle { display:block; position:absolute; right:18px; top:13px; width:92px; height:44px; opacity:0; margin:0; }
  .mobile-menu-button { display:flex; align-items:center; justify-content:center; position:absolute; right:18px; top:13px; min-width:92px; height:44px; margin:0; padding:0 12px; border:1px solid #d6dce5; border-radius:10px; background:#fff; color:#202733; font-size:13px; cursor:pointer; }
  .mobile-menu-button .menu-open { display:none; }
  .mobile-menu-toggle:focus-visible + .mobile-menu-button { outline:3px solid var(--accent); outline-offset:2px; }
  .portal-page .sidebar-menu { display:none; margin-top:18px; }
  .mobile-menu-toggle:checked ~ .sidebar-menu { display:flex; }
  .mobile-menu-toggle:checked + .mobile-menu-button .menu-closed { display:none; }
  .mobile-menu-toggle:checked + .mobile-menu-button .menu-open { display:inline; }
  .portal-page .sidebar .primary-nav { display:block !important; }
  .portal-page .workspace-header { min-height:62px; padding-top:10px; padding-bottom:10px; }
  .portal-page .breadcrumb { margin-top:16px; font-size:11px; }
  .portal-page .page-title { margin:18px 0; }
  .portal-page h1 { font-size:24px; }
  .portal-page .website-tabs { gap:18px; }
}

/* Organization and account controls share the sidebar footer. */
.portal-page .sidebar-bottom .organization-switcher { margin:0 0 14px; padding:0; border:0; }
.portal-page .sidebar-bottom .organization-switcher summary,
.portal-page .sidebar-bottom .organization-button { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #d6dce5; border-radius:10px; background:#fff; color:#202733; font-size:13px; font-weight:600; text-decoration:none; }
.portal-page .sidebar-bottom .organization-button { margin-bottom:14px; }
.portal-page .sidebar-bottom .organization-switcher summary { cursor:pointer; list-style:none; }
.portal-page .sidebar-bottom .organization-switcher summary::-webkit-details-marker { display:none; }
.portal-page .sidebar-bottom .organization-switcher nav { padding:6px 0; }
.portal-page .sidebar-bottom nav a { display:block; padding:10px 12px; border-radius:8px; text-decoration:none; }
.portal-page .sidebar-bottom nav a:hover,
.portal-page .sidebar-bottom nav a[aria-current] { background:#fff; }
.portal-page .sidebar-bottom nav[aria-label="Admin"] { margin:0 0 12px; }

/* Hostbaas tokens and form language from the official brand book. */
:root { --brand:#1a8fd6; --brand-strong:#1574b0; --brand-deep:#15426b; --led:#d7a83f; --ink:#0f1d2e; --muted:#5a6577; --paper:#fff; --mist:#eef4f9; --line:#d4dee8; --accent:var(--brand-strong); --border:var(--line); --brand-navy:var(--brand-deep); --brand-blue:var(--brand); font-family:Inter,system-ui,sans-serif; color:var(--ink); background:var(--paper); }
body.portal-page { color:var(--ink); background:var(--paper); }
.login-page,.welcome-page { background:var(--brand-deep); background-image:none; }
.brand .brand-logo,.portal-page .brand .brand-logo { width:184px; height:auto; border-radius:0; }
.brand-logo-dark { display:none; }
.login-page .brand-logo-light { display:none; }
.login-page .brand-logo-dark,.welcome-page .brand-logo-dark { display:block; }
h1,.portal-page h1 { font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(28px,3.5vw,44px); letter-spacing:-.02em; line-height:1.08; }
.login-intro h1 { font-size:clamp(40px,5vw,64px); }
h2,.portal-page h2 { font-family:Inter,system-ui,sans-serif; font-size:20px; font-weight:600; }
code,.monitoring-values,.technical { font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
button,.portal-page button,.pill,.portal-page .pill,input,select,.refresh-link,.portal-page .refresh-link,.outline-link,.portal-page .outline-link { border-radius:4px; }
button { background:var(--brand-strong); border-color:var(--brand-strong); }
button:hover { background:var(--brand-deep); }
.card,.portal-page .card,.login-card { border-radius:8px; box-shadow:none; border-color:var(--line); }
.portal-page .sidebar { background:var(--mist); color:var(--ink); border-color:var(--line); }
.portal-page .sidebar nav a { border-radius:4px; }
.portal-page .sidebar nav a.active { background:var(--paper); color:var(--brand-strong); box-shadow:none; }
.portal-page .workspace-header { background:var(--brand-deep); }
.portal-page .overview-card small,.portal-page .overview-card>span:not(.metric-icon),.portal-page .sidebar nav a small,.header-context { color:var(--muted); }
.login-card input,.login-card select { border:1px solid var(--muted); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--brand-strong); outline-offset:3px; }
.login-page>header a:focus-visible,.login-page>footer a:focus-visible { outline-color:var(--led); }
.login-page .eyebrow,.login-page .intro-detail { color:var(--paper); }
@media(max-width:760px) { .brand .brand-logo,.portal-page .brand .brand-logo { width:160px; } }

/* WP-04 update form, in the Hostbaas tokens above. */
.update-action { margin-top:6px; }
.update-action summary { cursor:pointer; color:var(--brand-strong); font-weight:600; }
.update-action form { display:grid; gap:8px; margin-top:8px; max-width:420px; }
.update-action p { margin:0; font-size:12px; color:var(--ink); }
.update-action label { display:flex; gap:6px; align-items:flex-start; font-size:12px; }
.update-action b { font-weight:700; }
.status-warn{background:#fff4e0;color:#8a5a00}
/* WP-05: the website overview has four cards (website, WordPress, PHP, maintenance mode). */
.overview-grid.website-overview { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1100px) { .overview-grid.website-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .overview-grid.website-overview { grid-template-columns:1fr; } }
/* WP-06 update policy form: compact choice groups inside the existing update-action panel. */
.policy-form fieldset { border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin:0; display:flex; flex-wrap:wrap; gap:6px 14px; }
.policy-form legend { font-size:12px; font-weight:600; padding:0 4px; }
.policy-form select { margin-left:6px; }
.history { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); }
.history h3 { margin:0; }
.history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
.history-chart { margin:0; padding:16px; border:1px solid #e3e7ee; border-radius:10px; background:#fff; min-width:0; }
.history-chart figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-bottom:8px; }
.history-chart figcaption span { color:var(--muted); font-size:12px; }
.history-chart svg { display:block; width:100%; height:auto; }
.history-grid-line { stroke:#edf2f7; stroke-width:1; }
.history-baseline { stroke:#c9d6e2; }
.history-day { stroke:#edf2f7; stroke-width:1; stroke-dasharray:3 4; }
.history-axis { fill:var(--muted); font-size:12px; }
.history-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.history-dot { fill:var(--accent); stroke:#fff; stroke-width:2; }
.history-hit { fill:transparent; }
.history-hit:hover { fill:rgba(23,103,164,.08); }
.history-table summary { cursor:pointer; font-weight:650; margin:8px 0; }
@media(max-width:1100px) { .history-grid { grid-template-columns:1fr; } }

/* Website action belongs with the site title, above the section navigation. */
.portal-page .website-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.website-heading>div { min-width:0; }
.website-login-action { flex-shrink:0; margin:0; }
.website-login-action button { display:flex; align-items:center; gap:18px; white-space:nowrap; border-radius:4px; padding:12px 18px; font-size:13px; }
.website-login-action button span { font-size:18px; line-height:1; }
@media(max-width:680px) {
  .portal-page .website-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .website-login-action button { padding:10px 14px; }
}

.website-row-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; flex-shrink:0; }
.website-row-actions form { margin:0; }
.website-row-actions .outline-link { text-align:center; }
.website-row-actions .website-login-link { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:8px 14px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--brand-strong); font-size:12px; font-weight:500; white-space:nowrap; }
.website-row-actions .website-login-link:hover { background:var(--mist); }
.website-row .website-row-actions .outline-link { margin-left:0; }
@media(max-width:680px) { .website-row-actions { margin-left:50px; max-width:calc(100% - 50px); } }
.history-periods { display:flex; flex-wrap:wrap; gap:4px; padding:3px; border:1px solid var(--border); border-radius:9px; background:#f8fafd; }
.history-periods a { padding:6px 12px; border-radius:6px; font-size:13px; font-weight:600; text-decoration:none; color:var(--muted); white-space:nowrap; }
.history-periods a:hover { color:var(--ink); background:#fff; }
.history-periods a[aria-current="page"] { background:var(--accent); color:#fff; }
.history-availability { margin:8px 0 0; font-size:13px; }