body[data-page="login"],body[data-page="register"]{background:#f8f1e6}
body[data-page="login"] main,body[data-page="register"] main{min-height:100vh;padding:0}
body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;padding:clamp(24px,4vw,48px);background:radial-gradient(circle at 12% 8%,rgba(239,113,61,.1),transparent 24%),#f8f1e6;overflow:hidden}
body[data-page="login"] .auth-shell::before,body[data-page="register"] .auth-shell::before{content:"";position:absolute;z-index:-1;right:-34px;top:-30px;width:270px;height:230px;background:url('../images/d6-pattern.svg') right top/auto 48px;opacity:.15;mask-image:linear-gradient(225deg,#000,transparent 78%);-webkit-mask-image:linear-gradient(225deg,#000,transparent 78%)}
.auth-card{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(420px,1.18fr);width:min(100%,980px);border:1px solid #e2d7c7;border-radius:24px;background:rgba(255,253,248,.9);box-shadow:0 24px 70px rgba(18,59,50,.13);overflow:hidden}
.auth-shell--register .auth-card{grid-template-columns:minmax(290px,.72fr) minmax(560px,1.28fr);width:min(100%,1080px)}
.auth-card .auth-visual{position:relative;display:block;min-height:560px;background:#e8dccb;overflow:hidden}
.auth-shell--register .auth-visual{min-height:650px}.auth-card .auth-visual>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}
.auth-card .auth-visual::after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(10,48,39,.88))}
.auth-card .auth-caption{position:absolute;z-index:2;inset:auto 26px 26px;color:#fff}.auth-card .auth-caption>span{display:block;margin-bottom:8px;color:#cfe978;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.auth-card .auth-caption h2{max-width:360px;margin:0 0 8px;color:#fff;font-size:clamp(1.65rem,2.5vw,2.45rem);line-height:1}.auth-card .auth-caption p{max-width:380px;margin:0;color:rgba(255,255,255,.78);font-size:.78rem}
.auth-card .auth-panel{display:block;min-width:0;padding:clamp(28px,4vw,46px);background:rgba(255,253,248,.94)}
.auth-card .auth-panel .form-card{width:100%;max-width:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none}.auth-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.auth-topline .logo{font-size:.9rem}.auth-topline .logo img{background:#f8f1e6;border-radius:7px;padding:2px}.auth-shop-link{color:#17664f;font-size:.7rem;font-weight:750;text-decoration:underline;text-underline-offset:3px}
.auth-card .eyebrow{display:block;margin-bottom:5px;color:#ef713d;font-size:.62rem}.auth-card .form-card h1{margin:0 0 7px;color:#123b32;font-size:clamp(2rem,3vw,2.65rem);line-height:1}.auth-card .auth-intro{max-width:510px;margin-bottom:13px;color:#627069;font-size:.82rem;line-height:1.5}
.auth-commerce-cues{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}.auth-commerce-cues span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #d7e2d9;border-radius:999px;background:#edf3e9;color:#17664f;font-size:.61rem;font-weight:750}.auth-commerce-cues span::before{content:"";width:6px;height:6px;border-radius:50%;background:#ef713d}
.auth-card .field{margin-bottom:10px}.auth-card .field label{margin-bottom:5px;color:#344941;font-size:.69rem;font-weight:700}.auth-card .control{min-height:44px;padding:9px 12px;border:1px solid #ddd5c8;border-radius:9px;background:rgba(255,255,255,.82);font-size:.8rem}.auth-card .control:hover{background:#fff}.auth-card .control:focus{border-color:#17664f;background:#fff;outline:3px solid rgba(23,102,79,.12)}.auth-card .field-error{min-height:12px;margin-top:3px;font-size:.61rem}.auth-card .form-row{gap:12px}
.auth-card .auth-meta{margin:4px 0 16px;font-size:.69rem}.auth-card .auth-meta a{color:#17664f}.auth-card .btn{min-height:43px;border-radius:999px;font-size:.75rem}.auth-card .btn-primary{box-shadow:0 9px 20px rgba(239,113,61,.2)}.auth-card .btn-light{background:#fff;border-color:#aebbb3}.auth-card .auth-divider{margin:15px 0;color:#7d8782;font-size:.65rem}.auth-card .legal{margin:10px auto 0;font-size:.6rem;line-height:1.35;text-align:center}.auth-switch{margin:11px 0 0!important;color:#5f6d67!important;font-size:.7rem;text-align:center}.auth-switch a{color:#17664f;font-weight:750;text-decoration:underline}
@media(max-width:900px){body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{padding:24px}.auth-card,.auth-shell--register .auth-card{grid-template-columns:1fr;max-width:620px}.auth-card .auth-visual,.auth-shell--register .auth-visual{display:block;min-height:220px;height:220px}.auth-card .auth-visual>img{object-position:center 40%}.auth-card .auth-caption{inset:auto 22px 18px}.auth-card .auth-caption h2{font-size:1.55rem}.auth-card .auth-caption p{display:none}.auth-card .auth-panel{min-height:0;padding:30px}}
@media(max-width:620px){body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{display:block;min-height:100vh;padding:12px}.auth-card{border-radius:18px}.auth-card .auth-visual,.auth-shell--register .auth-visual{height:165px;min-height:165px}.auth-card .auth-caption h2{font-size:1.2rem}.auth-card .auth-caption>span{margin-bottom:5px}.auth-card .auth-panel{padding:24px 18px}.auth-topline{margin-bottom:22px}.auth-card .form-row{grid-template-columns:1fr;gap:0}.auth-card .form-card h1{font-size:2rem}.auth-commerce-cues{margin-bottom:15px}}
@media(max-height:720px) and (min-width:901px){body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{align-items:start;padding-top:22px;padding-bottom:22px}.auth-card .auth-panel{padding-top:28px;padding-bottom:28px}.auth-card .auth-visual{min-height:520px}.auth-shell--register .auth-visual{min-height:610px}}

/* Keep the compact auth card in one full-width shell column. */
body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto;width:100%;justify-items:center;align-items:center}
.auth-card{max-width:100%}
.auth-commerce-cues span{gap:0}.auth-commerce-cues span::before{display:none;content:none}
@media(max-width:1000px) and (min-width:621px){.auth-card,.auth-shell--register .auth-card{grid-template-columns:1fr;width:min(100%,620px)}.auth-card .auth-visual,.auth-shell--register .auth-visual{display:block;height:220px;min-height:220px}.auth-card .auth-visual>img{object-position:center 40%}.auth-card .auth-caption{inset:auto 22px 18px}.auth-card .auth-caption h2{font-size:1.55rem}.auth-card .auth-caption p{display:none}.auth-card .auth-panel{min-height:0;padding:30px}}

/* Compact auth: keep login and registration in a single viewport with no internal scroll panel. */
body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{padding:12px;overflow:clip}
.auth-card,.auth-shell--register .auth-card{width:min(100%,900px);max-height:calc(100vh - 24px)}
.auth-shell--register .auth-card{width:min(100%,980px)}
.auth-card .auth-visual{min-height:440px}.auth-shell--register .auth-visual{min-height:500px}
.auth-card .auth-panel{padding:20px 24px;overflow:visible}
.auth-topline{margin-bottom:14px}.auth-card .form-card h1{font-size:clamp(1.6rem,2.4vw,2.15rem);margin-bottom:4px}.auth-card .auth-intro{margin-bottom:8px;font-size:.76rem}.auth-commerce-cues{margin-bottom:9px}.auth-commerce-cues span{padding:4px 8px}.auth-card .field{margin-bottom:6px}.auth-card .field label{margin-bottom:3px}.auth-card .control{min-height:38px;padding:7px 10px}.auth-card .field-error{min-height:0;margin:0}.auth-card .form-row{gap:8px}.auth-card .auth-meta{margin:2px 0 9px}.auth-card .btn{min-height:38px}.auth-card .auth-divider{margin:9px 0}.auth-card .legal{margin-top:7px}.auth-switch{margin-top:7px!important}
@media(max-width:900px){body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{display:grid;place-items:center;min-height:100dvh;padding:12px}.auth-card,.auth-shell--register .auth-card{display:block;max-width:620px;max-height:none}.auth-card .auth-visual,.auth-shell--register .auth-visual{display:none}.auth-card .auth-panel{padding:20px}}
@media(max-width:620px){body[data-page="login"] .auth-shell,body[data-page="register"] .auth-shell{display:block;min-height:100dvh;padding:8px}.auth-card,.auth-shell--register .auth-card{width:100%;border-radius:14px}.auth-card .auth-panel{padding:18px 15px}.auth-card .form-card h1{font-size:1.55rem}.auth-card .form-row{grid-template-columns:1fr;gap:0}.auth-commerce-cues{display:none}.auth-topline{margin-bottom:12px}.auth-card .control{min-height:36px}.auth-card .btn{min-height:36px}}

/* Registration selectors expand in document flow: the scroll panel pushes later fields down. */
.auth-card .static-select{display:grid;gap:5px;min-width:0}.auth-card .static-select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;text-align:left;cursor:pointer}.auth-card .static-select-placeholder{color:#7d8782}.auth-card .static-select-panel{display:grid;max-height:156px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #b8c9bd;border-radius:9px;background:#fff;box-shadow:inset 0 1px rgba(18,59,50,.04)}.auth-card .static-select-panel button{width:100%;padding:8px 10px;border:0;border-bottom:1px solid #edf0ec;background:#fff;color:#123b32;text-align:left;font-size:.73rem;cursor:pointer}.auth-card .static-select-panel button:last-child{border-bottom:0}.auth-card .static-select-panel button:hover,.auth-card .static-select-panel button:focus-visible{background:#e4efe7;color:#123b32;outline:0}.auth-card .static-select-panel button.selected{background:#dfeadf;box-shadow:inset 3px 0 0 #ef713d;font-weight:750}.auth-card .static-select-panel::-webkit-scrollbar{width:8px}.auth-card .static-select-panel::-webkit-scrollbar-thumb{border:2px solid #fff;border-radius:999px;background:#8da99c}

/* Login role choice: visual selection, not a role assignment mechanism. */
.login-role{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 12px}.login-role button{min-height:36px;border:1px solid #cbd9ce;border-radius:8px;background:#fff;color:#123b32;font-size:.72rem;font-weight:800}.login-role button:hover,.login-role button:focus-visible{border-color:#17664f;background:#e4efe7;outline:0}.login-role button.active{border-color:#123b32;background:#123b32;color:#fff;box-shadow:inset 0 -2px #cfe978}

/* Responsive, self-contained password-reset flow. */
body[data-page="forgot-password"],body[data-page="reset-password"]{background:#f8f1e6}body[data-page="forgot-password"] main,body[data-page="reset-password"] main{min-height:100vh;padding:0}.reset-shell{display:grid;place-items:center;min-height:100vh;padding:clamp(18px,4vw,52px);background:radial-gradient(circle at 8% 10%,rgba(23,102,79,.11),transparent 28%),radial-gradient(circle at 92% 84%,rgba(239,113,61,.1),transparent 25%),#f8f1e6}.reset-card{display:grid;grid-template-columns:minmax(340px,.86fr) minmax(440px,1.14fr);width:min(100%,1040px);min-height:560px;border:1px solid #e2d7c7;border-radius:26px;background:#fffdf8;box-shadow:0 26px 74px rgba(18,59,50,.15);overflow:hidden}.reset-visual{position:relative;overflow:hidden;background:#123b32}.reset-visual>img{width:100%;height:100%;object-fit:cover;object-position:center}.reset-visual::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(10,48,39,.9))}.reset-visual>div{position:absolute;z-index:1;inset:auto 28px 28px;color:#fff}.reset-visual span{display:block;margin-bottom:8px;color:#cfe978;font-size:.64rem;font-weight:900;letter-spacing:.12em}.reset-visual h2{margin:0 0 8px;color:#fff;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1}.reset-visual p{margin:0;color:rgba(255,255,255,.78);font-size:.8rem}.reset-panel{display:grid;align-content:center;min-width:0;padding:clamp(32px,5vw,62px);background:rgba(255,253,248,.98)}.reset-panel form{width:min(100%,460px)}.reset-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:30px}.reset-topline .logo{font-size:.95rem}.reset-topline .logo img{padding:2px;border-radius:7px;background:#f8f1e6}.reset-topline>a{color:#17664f;font-size:.72rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}.reset-panel .eyebrow{display:block;margin-bottom:6px;color:#ef713d;font-size:.64rem}.reset-panel h1{margin:0 0 8px;color:#123b32;font-size:clamp(2rem,3.5vw,3rem);line-height:1}.reset-panel p{margin:0 0 18px;color:#627069;font-size:.82rem;line-height:1.55}.reset-panel .field{margin-bottom:10px}.reset-panel .field label{font-size:.7rem}.reset-panel .control{min-height:46px;border:1px solid #ddd5c8;border-radius:10px;background:#fff}.reset-panel .btn{min-height:45px;border-radius:999px}.reset-code{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin:0 0 14px;padding:12px 13px;border:1px solid rgba(23,102,79,.22);border-radius:12px;background:rgba(23,102,79,.07)}.reset-code small{grid-column:span 2;color:#627069;font-size:.62rem;font-weight:900;text-transform:uppercase}.reset-code strong{overflow-wrap:anywhere;color:#123b32;font-size:.78rem}.reset-code button{align-self:center;padding:6px 9px;border-radius:8px;background:#123b32;color:#fff;font-size:.65rem;font-weight:800}.reset-back{display:block;margin:12px auto 0;background:none;color:#17664f;font-size:.7rem;font-weight:800;text-decoration:underline}@media(max-width:820px){.reset-card{grid-template-columns:1fr;max-width:620px;min-height:0}.reset-visual{height:210px}.reset-panel{padding:30px}.reset-panel form{max-width:none}}@media(max-width:560px){.reset-shell{display:block;min-height:100dvh;padding:8px}.reset-card{border-radius:16px}.reset-visual{height:150px}.reset-visual>div{inset:auto 20px 18px}.reset-visual h2{font-size:1.45rem}.reset-visual p{display:none}.reset-panel{padding:24px 18px}.reset-topline{margin-bottom:22px}.reset-panel h1{font-size:1.75rem}.reset-panel p{font-size:.76rem}.reset-code{grid-template-columns:1fr}.reset-code small{grid-column:auto}.reset-code button{justify-self:start}.reset-panel .control{min-height:42px}}

.reset-code-actions{display:flex;gap:7px;flex-wrap:wrap}.reset-code-actions button{padding:6px 9px;border-radius:8px;background:#123b32;color:#fff;font-size:.65rem;font-weight:800}.reset-code-actions button+button{background:#17664f}@media(max-width:560px){.reset-code-actions{display:grid;grid-template-columns:1fr 1fr}.reset-code-actions button{width:100%}}