:root{
  --ink:#f0f2f5;
  --paper:#303132;
  --aqua:#2d88ff;
  --orange:#2d88ff;
  --wine:#f2777a;
  --line:#3e4042;
  --page:#242526;
  --surface:#303132;
  --surface-raised:#3a3b3c;
  --muted:#b0b3b8;
  --success:#4bd68f;
  --alert:#f2777a;
  --alert-bg:#3c2a2b;
  --focus:#9bc8ff;
}
.public-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
body:has(#portal)>header .portal-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
body:has(#portal)>header .portal-nav a,body:has(#portal)>header .portal-nav button{display:inline-flex;box-sizing:border-box;white-space:nowrap;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid #596068;border-radius:6px;background:var(--surface-raised);color:var(--ink);font:inherit;font-weight:800;text-decoration:none;line-height:1.25}
body:has(#portal)>header .portal-nav a:hover,body:has(#portal)>header .portal-nav button:hover:not(:disabled){background:#4b4d50;border-color:#6a7178}
body:has(#portal)>header .portal-nav a:focus-visible,body:has(#portal)>header .portal-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.public-nav .nav-signup{background:#1769d2;color:#fff;padding:10px 16px;border-radius:8px;white-space:nowrap}
@media(max-width:600px){header:has(.public-nav){flex-wrap:wrap;gap:16px}.public-nav{width:100%;gap:14px}.public-nav .nav-signup{margin-left:auto}}

body{
  background:#18191a;
  color:var(--ink);
}

header{
  min-height:60px;
  background:rgba(36,37,38,.97);
  border-bottom-color:var(--line);
  backdrop-filter:blur(12px);
}

header a{color:var(--aqua)}
.brand img{display:block;filter:brightness(0) invert(1);opacity:.94}
.shell{max-width:1320px;padding-top:28px}
.lead{color:var(--muted)}
.eyebrow{margin:0 0 8px;color:#aeb8c2;font-weight:800;text-transform:none;letter-spacing:0;font-size:.86rem}

.card{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
}

.muted{color:var(--muted)}
.tabs{gap:0;border-bottom-color:var(--line)}
.tabs button,.ghost,button{
  border-color:#596068;
  background:var(--surface-raised);
  color:var(--ink);
  border-radius:6px;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
}

button:hover:not(:disabled),.tabs button:hover{background:#4b4d50;border-color:#6a7178}
button:active:not(:disabled){transform:translateY(1px)}
button.primary,.tabs button.active{background:var(--aqua);color:#0b1a2b;border-color:var(--aqua)}
button.primary:hover:not(:disabled),.tabs button.active:hover{background:#4d9cff;border-color:#4d9cff}
button.danger{background:transparent;color:var(--alert);border-color:#a55359}
button.danger:hover:not(:disabled){background:var(--alert-bg);border-color:var(--alert)}
button:disabled{opacity:.55}

input,select{
  background:#3a3b3c;
  color:var(--ink);
  border-color:#596068;
  border-radius:8px;
}
input::placeholder{color:#8f969d}
input:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.notice{
  background:#1d3447;
  color:#dcecff;
  border-left-color:var(--aqua);
  border-radius:8px;
}
.notice .muted{color:#c0d7ed}
.notice a{color:#a9d2ff}
.notice.success{background:#173928;color:#d9f9e7;border-left-color:var(--success)}
.notice.success .muted{color:#b8e8cc}
.error,.error.notice{background:var(--alert-bg);color:#ffe0e1;border-left-color:var(--alert)}

.service-list,.inventory-access{background:#242526;border-color:var(--line);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.24)}
.service-row{padding:16px 18px;border-top-color:var(--line)}
.service-status{border-color:#56616d;background:#3a3b3c;color:#e4e6eb}
.service-status.active{background:#173928;border-color:#4bd68f;color:#9df5bf}
.service-action{border-radius:6px}
.metric{background:#3a3b3c;border:1px solid var(--line);border-radius:8px}
.inventory-row,.history{border-top-color:var(--line)}
.inventory-row{padding:16px 0}
.low{color:var(--alert)}
.pill{background:#1d3447;border-color:#41749f;color:#b9dcff}
.install{background:#1e2a33;color:var(--ink);border-color:#465963;border-radius:10px}
.footer{color:var(--muted)}

@media(max-width:680px){.card{border-radius:10px}}

.brand{display:flex;align-items:center;gap:10px;letter-spacing:-.02em;font-size:clamp(14px,2.4vw,20px)}.brand-monogram{display:flex;width:46px;height:46px;flex:none}.brand-monogram svg{width:100%;height:100%}.portal-nav{flex-shrink:0}.install{line-height:1.7}input,select,textarea{max-width:100%;min-width:0}header{gap:12px} @media(max-width:380px){header{padding:14px 12px}.brand{font-size:13px;gap:7px}.brand-monogram{width:34px;height:34px}.portal-nav{gap:8px}}
#account-email{overflow-wrap:anywhere;margin:8px 0}@media(max-width:520px){header{flex-wrap:wrap}.portal-nav{margin-left:auto}.portal-nav button,.portal-nav a{font-size:13px;padding:8px 10px}}

/* Portal header branding follows the public homepage. */
body:has(#portal)>header{background:#18191a}
body>header .brand{color:#ffffff;gap:8px;font-size:16px;font-weight:750;letter-spacing:0;line-height:1.05}
body>header .brand-monogram{color:#abc6c7;width:42px;height:42px}
body:has(#portal)>header .portal-brand-name{white-space:nowrap}
body>header .portal-brand-name{color:#ffffff}