:root{
  --ink:#ffffff;
  --ink-soft:#ffffff;
  --navy:#062943;
  --navy-deep:#041d33;
  --teal:#007b91;
  --aqua:#05c8d9;
  --aqua-soft:#9ceef2;
  --surface:#718e98;
  --surface-raised:#8caab2;
  --line:#538795;
  --line-strong:#347586;
  --mint:#9ecdc5;
  --bad:#ffd1d6;
  --shadow:0 18px 42px rgba(2,22,37,.30);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 86% -8%,rgba(5,200,217,.10),transparent 30%),
    radial-gradient(circle at 5% 100%,rgba(0,52,72,.28),transparent 38%),
    linear-gradient(135deg,#526d78 0%,var(--surface) 48%,#5b7883 100%);
  font:15px "Trebuchet MS",Verdana,sans-serif;
  color:var(--ink);
}
header{
  height:78px;
  padding:0 7vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(100deg,rgba(4,29,51,.98),rgba(6,41,67,.97) 54%,rgba(4,29,51,.98));
  border-bottom:1px solid rgba(156,238,242,.22);
  box-shadow:0 3px 18px rgba(3,23,40,.20);
}
.brand{display:flex;align-items:center;gap:12px;color:#effcfd;min-width:0}
.brand-shield{width:62px;height:62px;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.22))}
.brand-letters{width:274px;height:40px;object-fit:contain;display:block;filter:brightness(0) invert(1) drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.header-actions{display:flex;align-items:center;gap:10px}
main{max-width:1260px;margin:42px auto;padding:0 22px}
.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}
.eyebrow{letter-spacing:.15em;color:#ffffff;font-size:12px;font-weight:700;text-transform:uppercase}
h1,h2{color:#ffffff}
h1{font:38px Georgia,serif;margin:7px 0}
h2{margin:8px 0 43px;font:700 22px Georgia,serif}
.muted{color:var(--ink-soft)}
.eyebrow,h1,h2,.muted,.card strong,th,td,.account-link,.setup-guide p,.setup-guide li{
  text-shadow:none;
  -webkit-text-stroke:.45px rgba(0,12,20,1);
  paint-order:stroke fill;
}
h1,h2,.card strong{-webkit-text-stroke:.65px rgba(0,12,20,1)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card,.panel{
  background:linear-gradient(145deg,rgba(32,79,94,.99),rgba(15,53,68,.99));
  border:1px solid rgba(82,167,181,.58);
  border-radius:16px;
  box-shadow:0 14px 35px rgba(3,22,35,.38);
}
.card{padding:19px}
.cards .card{text-align:center}
.card strong{font-size:29px;display:block;color:#ffffff}
.panel{margin-top:18px;padding:22px}
table{border-collapse:collapse;width:100%}
th{text-align:left;color:#ffffff;font-size:12px;letter-spacing:.09em;text-transform:uppercase;padding:12px}
td{border-top:1px solid rgba(128,206,218,.26);padding:12px;color:#ffffff;font-weight:600}
tr:hover td{background:rgba(5,200,217,.12)}
.pill{padding:5px 9px;background:var(--mint);border:1px solid #71b4aa;border-radius:99px;color:#075d5c;font-size:12px;font-weight:bold}
.off{background:#fbe6e6;color:#9b3535}
button{
  border:1px solid transparent;
  border-radius:9px;
  padding:10px 14px;
  background:linear-gradient(135deg,var(--navy),var(--teal));
  color:#f5ffff;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 5px 13px rgba(4,44,68,.18);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
button:hover{filter:brightness(1.08);box-shadow:0 8px 18px rgba(4,44,68,.24)}
button:active{transform:translateY(1px)}
button.alt{background:rgba(5,200,217,.16);border-color:rgba(156,238,242,.76);color:#ffffff;box-shadow:0 3px 10px rgba(0,0,0,.22);text-shadow:0 1px 1px rgba(0,0,0,.9)}
button.alt:hover{background:rgba(5,200,217,.30)}
input{
  width:100%;
  padding:11px;
  background:rgba(174,202,208,.96);
  color:#082c3d;
  border:1px solid #4e8493;
  border-radius:8px;
  margin:5px 0 12px;
  font:inherit;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input:focus{outline:0;border-color:var(--aqua);background:#c4d9dd;box-shadow:0 0 0 3px rgba(5,200,217,.17)}
.hide{display:none}
.err{color:var(--bad);font-weight:bold;min-height:22px}
.success{color:#d9fff7;min-height:22px}
.actions{display:flex;gap:8px;justify-content:flex-end}
.login{
  max-width:410px;
  margin:9vh auto;
  background:linear-gradient(145deg,rgba(32,79,94,.99),rgba(15,53,68,.99));
  padding:34px;
  border:1px solid rgba(82,167,181,.58);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.account-link{margin:18px 0 0;color:#ffffff;text-align:center}
.link-button{padding:0;border:0;background:transparent;color:var(--aqua);text-decoration:underline;font:inherit;font-weight:bold;box-shadow:none}
.account-link a{color:var(--aqua);font-weight:bold}
/* Customer activation guidance. */
.setup-guide{
  margin:18px 0 0;
  padding:24px;
  border:1px solid rgba(82,167,181,.58);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(32,79,94,.99),rgba(15,53,68,.99));
  color:#ffffff;
  box-shadow:0 14px 35px rgba(3,22,35,.38);
}
.setup-guide h2{margin:8px 0 43px;color:#ffffff;font:700 22px Georgia,serif}
.setup-guide p{margin:8px 0}.setup-guide ol{margin:14px 0 0;padding-left:22px;line-height:1.65}
.setup-guide a{color:var(--aqua-soft);font-weight:bold}.pending-row td{background:rgba(5,200,217,.08)}.pending-row .actions{justify-content:center}
#dash > .panel th,#dash > .panel td{text-align:center}
/* Download help: hover, keyboard focus and tap/click all reveal the same guidance. */
.download-help{position:relative;display:inline-block;margin-left:6px;vertical-align:baseline}
.download-help summary{display:inline-flex;align-items:center;cursor:pointer;color:var(--aqua-soft);font-weight:800;text-decoration:underline;text-underline-offset:3px;list-style:none}
.download-help summary::-webkit-details-marker{display:none}
.download-help summary::after{content:'?';display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;border:1px solid currentColor;border-radius:50%;font-size:11px;line-height:1}
.download-help>div{position:absolute;z-index:4;left:0;bottom:calc(100% + 10px);width:min(330px,72vw);padding:12px 14px;border:1px solid #087f92;border-radius:10px;background:#06334a;color:#fff;box-shadow:0 12px 26px #001d2f42;font-size:14px;line-height:1.45}
.download-help:not([open])>div{display:none}.download-help:hover>div,.download-help:focus-within>div{display:block}
.download-help code{color:#baf5f6;font:600 13px ui-monospace,Consolas,monospace;word-break:break-all}
/* Commercial credentials modal. */
.credential-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#061d2bb8}
.credential-card{position:relative;width:min(620px,100%);padding:30px;border:1px solid rgba(82,167,181,.70);border-radius:18px;background:linear-gradient(145deg,rgba(32,79,94,.99),rgba(15,53,68,.99));color:#ffffff;box-shadow:0 24px 70px #00111db3}
.credential-card h2{margin:7px 0 43px;color:#ffffff;font:700 22px Georgia,serif}
.credential-close{position:absolute;top:14px;right:14px;width:34px;height:34px;padding:0;border-radius:50%;font-size:24px;line-height:1;background:rgba(5,200,217,.16);border-color:rgba(156,238,242,.76);color:#ffffff}
.credential-list{display:grid;gap:12px;margin:22px 0 0}.credential-list>div{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:12px}
.credential-list dt{font-weight:800;color:#ffffff}.credential-list dd{display:flex;align-items:center;gap:8px;min-width:0;margin:0}
.credential-list code{flex:1;min-width:0;overflow:auto;padding:10px 11px;border:1px solid #4e8493;border-radius:8px;background:rgba(174,202,208,.96);color:#082f4d;font:600 14px ui-monospace,Consolas,monospace}
.credential-list button{padding:8px 10px;white-space:nowrap}.credential-list [data-copy]{background:rgba(5,200,217,.16);border-color:rgba(156,238,242,.76);color:#ffffff}
@media(max-width:760px){
  .cards{grid-template-columns:repeat(2,1fr)}
  h1{font-size:32px}
  header{padding:0 22px}
  .brand-letters{width:180px}
  .brand-shield{width:48px;height:48px}
  .panel{overflow:auto}
  .hero{align-items:flex-start;gap:16px}
  .setup-guide{padding:18px}
  .download-help>div{position:relative;left:auto;bottom:auto;width:auto;margin:10px 0 4px}
  .download-help{margin-left:3px}
}
@media(max-width:600px){
  .credential-card{padding:25px 17px}
  .credential-list>div{grid-template-columns:1fr;gap:5px}
  .credential-list dd{flex-wrap:wrap}.credential-list code{width:100%}
}

/* Unified portal shell: customer and staff share the brand, never the permissions. */
.portal-shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:calc(100vh - 78px)}
.portal-nav{padding:28px 16px;background:linear-gradient(180deg,#062943,#041d33);border-right:1px solid rgba(156,238,242,.22)}
.portal-nav-title{margin:0 10px 20px;font:700 18px Georgia,serif;color:#fff}
.nav-item{display:block;width:100%;margin:6px 0;padding:12px 14px;border:1px solid transparent;border-radius:10px;background:transparent;color:#fff;text-align:left;text-decoration:none;font:700 14px "Trebuchet MS",Verdana,sans-serif;box-shadow:none}
.nav-item:hover,.nav-item.active{background:rgba(5,200,217,.14);border-color:rgba(156,238,242,.32);color:#fff}
.portal-content{min-width:0;padding:34px 7vw 52px}
.portal-view{max-width:1280px;margin:0 auto}
.support-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 auto 22px;padding:13px 16px;border:1px solid #67d8dc;border-radius:12px;background:#093d50;color:#fff;font-weight:700}
.account-panel{display:flex;align-items:center;gap:24px;margin-top:18px}
.avatar-wrap{position:relative;display:grid;place-items:center;width:116px;height:116px;flex:0 0 auto}
.avatar{width:104px;height:104px;border:2px solid var(--aqua);border-radius:50%;object-fit:cover;background:#073652}
.avatar.fallback{display:grid;place-items:center;font:700 38px Georgia,serif;color:#fff}
.avatar-upload{position:absolute;bottom:-8px;right:-24px;cursor:pointer}.avatar-upload input{display:none}
.password-form{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,1fr) auto;gap:12px;align-items:start;width:100%}
.password-form .err,.password-form .success{grid-column:1/-1;margin:0}
@media(max-width:820px){.portal-shell{grid-template-columns:1fr}.portal-nav{display:flex;gap:6px;overflow:auto;padding:10px 18px}.portal-nav-title{display:none}.nav-item{width:auto;white-space:nowrap;margin:0}.portal-content{padding:24px 22px}.password-form{grid-template-columns:1fr}.account-panel{align-items:flex-start;flex-wrap:wrap}}

/* Registration delivery: actions are deliberately centered so the next step is unambiguous. */
#register-form > button[type="submit"],
#register-change-email-form > button[type="submit"]{display:block;margin:8px auto 0}
.registration-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:22px auto 0}
.registration-actions button{min-width:156px}
#register-success-panel .success,#register-success-panel .err{text-align:center;margin-top:18px}

/* Account activation is the primary action on this isolated screen. */
#verify-form > button[type="submit"]{display:block;margin:18px auto 0}
.empty-devices{text-align:center;line-height:1.6}
.empty-devices div + div{margin-top:6px}
.empty-devices a{color:var(--aqua);font-weight:700}

/* Login hierarchy: primary action is centered; account links stay secondary. */
#login-panel #login-form > button[type="submit"] {
  display: block;
  margin: 26px auto 10px;
}
#login-panel > .account-link,
#login-panel > .account-link .link-button {
  font-weight: 400;
  -webkit-text-stroke: 0;
}
#login-panel > .account-link {
  margin-top: 20px;
  color: #c6dce0;
  font-size: 14px;
  line-height: 1.75;
}
#login-panel > .account-link .link-button {
  color: #8cdae2;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}