.portal-shell{min-height:100vh;background:radial-gradient(circle at 80% 10%,rgba(37,199,215,.14),transparent 30%),var(--cream)}
.portal-header{position:relative;height:94px;background:linear-gradient(100deg,#0d2730,#174956);color:#fff}
.portal-header .nav-wrap{height:100%}.portal-header .brand-logo{width:220px;height:72px}
.portal-main{padding:90px 0 120px}.portal-intro{max-width:760px;margin-bottom:44px}.portal-intro h1{font:800 clamp(42px,6vw,70px)/1.05 "Manrope";letter-spacing:-3px;margin:0 0 18px}.portal-intro p{font-size:18px;color:var(--muted)}
.portal-panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:42px;box-shadow:var(--shadow);max-width:720px}.portal-panel h2{font:800 28px "Manrope";margin-top:0}.portal-panel label{display:block;font-size:13px;font-weight:700;margin:18px 0 6px}.portal-panel input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fbfefe}.portal-panel .button{margin-top:24px}.portal-note{border-left:4px solid var(--cyan);padding:12px 16px;background:#eaf8fa;color:var(--muted);margin-top:24px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;min-height:170px}.product-card h2{font:800 21px "Manrope";margin:12px 0 7px}.product-card p{font-size:14px;color:var(--muted);margin:0}.product-state{display:inline-block;border-radius:100px;padding:4px 9px;background:#e6f6f1;color:var(--green);font-size:11px;font-weight:800;text-transform:uppercase}.product-state.soon{background:#f4ece3;color:#83552e}
.portal-error{color:#9e2d22;background:#fff0ed;border:1px solid #efb5ad;border-radius:12px;padding:12px 14px;margin-top:18px}.portal-logout{border:1px solid rgba(255,255,255,.45);border-radius:100px;background:transparent;color:#fff;padding:9px 18px;font-weight:700;cursor:pointer}.portal-logout:hover{background:#fff;color:var(--ink)}button:disabled{opacity:.6;cursor:wait}
.forgot-password-link{display:block;width:max-content;margin-top:10px;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* Responsive portal and authentication layouts */
.portal-shell{min-width:0;min-height:100vh;min-height:100svh;overflow-x:hidden}
.portal-header .nav-wrap{gap:20px}.portal-header a,.portal-header button{flex:none}
.portal-main>.container{min-width:0}.portal-panel{width:100%}
.portal-panel textarea,.portal-panel select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fbfefe;font:inherit}
.portal-shell:has(#login-form),.portal-shell:has(#forgot-form),.portal-shell:has(#reset-form){height:100vh;height:100svh;overflow:hidden}
.portal-shell:has(#login-form) .portal-main,.portal-shell:has(#forgot-form) .portal-main,.portal-shell:has(#reset-form) .portal-main{height:calc(100vh - 94px);height:calc(100svh - 94px);padding:clamp(24px,5vh,56px) 0;display:flex;align-items:center}
.portal-shell:has(#login-form) .portal-main>.container,.portal-shell:has(#forgot-form) .portal-main>.container,.portal-shell:has(#reset-form) .portal-main>.container{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);align-items:center;gap:clamp(36px,7vw,100px)}
.portal-shell:has(#login-form) .portal-intro,.portal-shell:has(#forgot-form) .portal-intro,.portal-shell:has(#reset-form) .portal-intro{margin:0;max-width:600px}
.portal-shell:has(#login-form) .portal-intro h1,.portal-shell:has(#forgot-form) .portal-intro h1,.portal-shell:has(#reset-form) .portal-intro h1{font-size:clamp(40px,min(5vw,8vh),66px)}
.portal-shell:has(#login-form) .portal-panel,.portal-shell:has(#forgot-form) .portal-panel,.portal-shell:has(#reset-form) .portal-panel{max-width:620px;padding:clamp(26px,4vh,42px)}
@media(max-width:760px){
  .portal-header{height:82px}.portal-header .brand-logo{width:165px;height:58px}.portal-header .nav-wrap>a:not(.brand),.portal-header .nav-wrap>button{font-size:12px}.portal-header .button-small{padding:9px 12px}
  .portal-main{padding:42px 0 70px}.portal-intro{margin-bottom:28px}.portal-intro h1{font-size:clamp(36px,11vw,50px);letter-spacing:-2px}.portal-intro p{font-size:16px}.portal-panel{padding:24px;border-radius:20px}.portal-panel h2{font-size:24px}.portal-panel .button{width:100%}
  .portal-shell:has(#login-form) .portal-main,.portal-shell:has(#forgot-form) .portal-main,.portal-shell:has(#reset-form) .portal-main{height:calc(100vh - 82px);height:calc(100svh - 82px);padding:20px 0;overflow-y:auto}.portal-shell:has(#login-form) .portal-main>.container,.portal-shell:has(#forgot-form) .portal-main>.container,.portal-shell:has(#reset-form) .portal-main>.container{display:block}
  .portal-shell:has(#login-form) .portal-intro,.portal-shell:has(#forgot-form) .portal-intro,.portal-shell:has(#reset-form) .portal-intro{margin-bottom:18px}.portal-shell:has(#login-form) .portal-intro h1,.portal-shell:has(#forgot-form) .portal-intro h1,.portal-shell:has(#reset-form) .portal-intro h1{font-size:clamp(32px,10vw,44px);margin-bottom:8px}
}
@media(max-width:390px){.container{width:calc(100% - 24px)}.portal-header .brand-logo{width:140px}.portal-header .nav-wrap>a:not(.brand){max-width:115px;text-align:right;line-height:1.25}.portal-panel{padding:20px}}
@media(max-height:680px) and (min-width:761px){
  .portal-shell:has(#login-form) .portal-main,.portal-shell:has(#forgot-form) .portal-main,.portal-shell:has(#reset-form) .portal-main{padding:16px 0}.portal-shell:has(#login-form) .portal-main>.container,.portal-shell:has(#forgot-form) .portal-main>.container,.portal-shell:has(#reset-form) .portal-main>.container{gap:40px}
  .portal-shell:has(#login-form) .portal-intro h1,.portal-shell:has(#forgot-form) .portal-intro h1,.portal-shell:has(#reset-form) .portal-intro h1{font-size:42px;margin-bottom:8px}.portal-shell:has(#login-form) .portal-panel,.portal-shell:has(#forgot-form) .portal-panel,.portal-shell:has(#reset-form) .portal-panel{padding:24px}
}
@media(max-width:760px){.portal-main{padding-top:55px}.portal-panel{padding:28px}.product-grid{grid-template-columns:1fr}.portal-header .brand-logo{width:175px}}