body.customer-portal{background:#f5f8f6}
.portal-login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,#dceee5,transparent 55%)}
.portal-login .login-card{max-width:440px;width:100%;padding:36px}
.portal-login .primary{margin-top:24px;width:100%}
.portal-header{padding:18px max(24px,calc((100% - 1120px)/2));height:88px;position:static}
.portal-brand{display:flex;align-items:center;gap:12px;font-size:24px}
.portal-brand small{font-size:13px;font-weight:400;margin-inline-start:6px;color:var(--muted)}
.portal-user{display:flex;align-items:center;gap:16px;font-size:13px}
.portal-nav{display:flex;gap:8px;max-width:1120px;margin:24px auto 0;padding:0 24px;flex-wrap:wrap}
.portal-nav a{color:var(--muted);padding:11px 16px;font-size:13px;border:1px solid transparent}
.portal-nav a:hover{background:#e6f0eb}
.portal-nav a[aria-current]{background:#183f38;color:#fff;border-color:#183f38}
.portal-main{max-width:1120px;padding:32px 24px;margin:auto}
.portal-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.portal-heading h1{margin-top:8px}.portal-heading p{font-size:13px}
.portal-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px}
.portal-card{background:#fff;border:1px solid var(--line);padding:28px;border-radius:18px;margin-bottom:22px;min-width:0}
.portal-card h2{font-size:18px;margin:0 0 10px}.portal-card p{font-size:13px}
.portal-card .primary{margin-top:20px}
.portal-device-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.portal-device-name{font-size:24px;font-weight:700;overflow-wrap:anywhere;display:block;margin:24px 0 8px}
.portal-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.portal-meta dt{font-size:12px;color:var(--muted)}.portal-meta dd{margin:6px 0 0;font-size:13px;overflow-wrap:anywhere}
.portal-connection{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.portal-connection:last-child{border-bottom:0}
.portal-connection strong{font-size:14px;display:block;overflow-wrap:anywhere}
.portal-connection p{font-size:12px;margin-top:6px}
.portal-replacement{padding:16px;border-radius:12px;background:#fff8dc;margin-top:20px}
.portal-help{margin:18px 0 0;padding-inline-start:22px;color:var(--muted);font-size:13px;line-height:2.1}
.portal-settings-form{max-width:500px}.portal-settings-form label{margin-top:20px}
#portalToast{position:fixed;inset-inline-start:24px;bottom:24px;background:#173f36;color:#fff;padding:16px 22px;border-radius:12px;z-index:20}
@media(max-width:700px){.portal-header{height:auto;min-height:80px;padding:16px;gap:14px;flex-wrap:wrap}.portal-user{gap:8px;flex-wrap:wrap}.portal-nav{margin-top:16px;padding:0 12px;gap:4px}.portal-nav a{font-size:12px;padding:10px 12px}.portal-main{padding:24px 16px}.portal-grid{grid-template-columns:minmax(0,1fr);gap:0}.portal-card{padding:22px}.portal-heading{align-items:flex-start;gap:12px}.portal-heading h1{font-size:25px}.portal-connection{align-items:flex-start;flex-wrap:wrap}.portal-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.portal-back-link{display:block;text-align:center;margin-top:24px;color:var(--muted);font-size:12px}
.portal-public-link{font-size:12px;color:var(--muted);border-inline-end:1px solid var(--line);padding-inline-end:15px}
.portal-muted{color:var(--muted);margin-top:20px}
.portal-start-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.portal-start-link{padding:14px 18px;background:#edf2e7;border:1px solid #d9e2ce;font-size:13px}
.portal-start-link:hover{background:#dfe9d6}.portal-secondary-link{display:inline-block;margin-inline-start:22px;color:var(--muted);font-size:12px}
@media(max-width:700px){.portal-start-links{gap:8px}.portal-start-link{font-size:12px;padding:12px}.portal-public-link{font-size:11px;padding-inline-end:8px}}


/* Professional customer workspace; inherits the shared Cairo typography. */
body.customer-portal{background:#f5f7f6}
.portal-header{height:86px;padding-inline:max(24px,calc((100% - 1160px)/2));background:#fff;border-bottom:1px solid #e1e8e2}
.portal-brand{font-size:26px;gap:11px}.portal-brand small{font-size:12px;font-weight:500;color:#60766b}.portal-brand .brand-icon{width:42px;height:42px}
.portal-user{gap:17px;font-size:13px}.portal-user #portalUsername{font-weight:600}.portal-public-link{font-size:12px;color:#4d6b5b}
.portal-nav{max-width:1208px;margin-top:22px;gap:5px;padding-inline:24px}.portal-nav a{font-size:12px;font-weight:600;padding:12px 16px;min-height:46px;border-radius:10px;color:#526b5e;justify-content:center}
.portal-nav a[aria-current]{color:#15513c;background:#e2efe6;border-color:#cddfd2}.portal-nav a:hover{background:#edf3ed}
.portal-main{max-width:1208px;padding:29px 24px 30px}.portal-heading{margin-bottom:27px}.portal-heading h1{font-size:31px;font-weight:700;margin-block:8px 11px;letter-spacing:0}.portal-heading p{font-size:13px;max-width:760px;line-height:1.95}.portal-heading .eyebrow{font-size:10px;letter-spacing:1.2px}
.portal-heading>button{font-size:12px;background:white;border-color:#d8e3da;min-height:43px;flex-shrink:0}
.portal-card{border-radius:17px;padding:27px 29px;border-color:#dee7e0;margin-bottom:23px;box-shadow:0 3px 16px #173e3603}.portal-card h2{font-size:19px;font-weight:700;margin-bottom:13px}.portal-card p{font-size:13px;line-height:2}
#customerStart{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:30px;align-items:center;background:#fff}
#customerStart>h2{grid-column:1;grid-row:1}#customerStart>p{grid-column:1;grid-row:2;max-width:630px}
.portal-start-links{grid-column:2;grid-row:1/3;margin-top:0;gap:8px;max-width:420px;justify-content:flex-start}
.portal-start-link{border-radius:10px;padding:12px 14px;font-size:12px;font-weight:600;background:#f2f6ef;border-color:#dce6d8;min-height:44px;display:inline-flex;align-items:center}
.portal-start-link:first-child{background:#176c59;color:white;border-color:#176c59}.portal-start-link:first-child:hover{background:#125743}
.portal-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}
.portal-device-top{font-size:12px;color:#587063}.portal-device-name{font-size:26px;line-height:1.7;margin-block:23px 10px;font-weight:700;letter-spacing:0}
.portal-meta{gap:20px;margin-top:22px;padding-top:21px;border-color:#e2e9e3}.portal-meta dt{font-size:11px;color:#62776c}.portal-meta dd{font-size:13px;font-weight:600;line-height:1.85;margin-top:7px}
.portal-connection{padding:20px 0;gap:18px}.portal-connection strong{font-size:14px;font-weight:650}.portal-connection p{font-size:12px;margin-top:7px}.portal-connection small{font-size:11px;color:#657a6f}
.portal-help{font-size:13px;line-height:2.25;padding-inline-start:23px;margin-top:20px}.portal-help li{padding-inline-start:6px;margin-bottom:8px}
.portal-muted{font-size:12px!important;margin-top:19px;line-height:2}.portal-settings-form{max-width:530px}.portal-settings-form label{font-size:13px}.portal-settings-form input{min-height:48px}.portal-back-link{font-size:12px;margin-top:22px}
.portal-login{background:#f1f5f2;padding:28px}.portal-login .login-card{width:100%;max-width:460px;padding:36px}.portal-login .primary{min-height:48px;font-size:14px}
.portal-secondary-link{font-size:12px;line-height:2}.portal-card code{font-size:12px;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
#portalToast{font-size:13px;line-height:1.8;max-width:calc(100% - 40px)}
@media(max-width:1050px){#customerStart{grid-template-columns:minmax(0,1fr)}.portal-start-links{grid-column:1;grid-row:auto;margin-top:21px;max-width:none}}
@media(max-width:700px){
 .portal-header{padding:16px 18px;min-height:82px;height:auto;gap:14px}.portal-brand{font-size:24px}.portal-brand .brand-icon{width:38px;height:38px}.portal-brand small{font-size:11px}.portal-user{gap:9px;font-size:11px}.portal-user .quiet{font-size:11px;padding:8px 7px}.portal-public-link{font-size:11px}
 .portal-nav{margin-top:16px;padding-inline:14px;gap:4px}.portal-nav a{font-size:11px;padding:10px 12px;min-height:42px}
 .portal-main{padding:24px 18px}.portal-heading{gap:12px;margin-bottom:23px}.portal-heading h1{font-size:27px}.portal-heading p{font-size:12px}.portal-heading>button{min-height:40px;padding:8px 12px;font-size:11px}
 .portal-card{padding:23px;margin-bottom:19px;border-radius:15px}.portal-card h2{font-size:18px}.portal-card p{font-size:12px}.portal-grid{grid-template-columns:minmax(0,1fr);gap:0}
 .portal-start-links{gap:8px;flex-wrap:wrap}.portal-start-link{font-size:11px;padding:11px 13px;min-height:43px}.portal-device-top{font-size:11px;gap:10px}.portal-device-name{font-size:23px}.portal-meta{gap:15px}.portal-meta dd{font-size:12px}
 .portal-help{font-size:12px}.portal-login{padding:22px 12px}.portal-login .login-card{padding:30px 25px}.portal-secondary-link{display:block;margin:17px 0 0}
}

.subscription-banner{border:1px solid #eadcc8;background:#fff8ee;border-radius:14px;padding:20px 24px;margin-bottom:22px}
.subscription-banner strong{font-size:15px;color:#75552c}.subscription-banner p{font-size:12px;margin-top:8px;line-height:1.9}
#customerSubscription .state{margin-top:8px}