/* ==========================================================================
   Athena's Party Wear — login page (index.php)
   Layout built from the supplied design images (desktop + mobile).
   All art lives in assets/login/ ; fonts are bundled locally (assets/login/fonts)
   so the page looks identical even without internet.
   ========================================================================== */
@font-face{font-family:'Playfair Display';font-weight:600;font-style:normal;font-display:swap;src:url(login/fonts/playfair-display-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-style:normal;font-display:swap;src:url(login/fonts/playfair-display-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:normal;font-display:swap;src:url(login/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:700;font-style:normal;font-display:swap;src:url(login/fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:500;font-style:normal;font-display:swap;src:url(login/fonts/cinzel-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600;font-style:normal;font-display:swap;src:url(login/fonts/cinzel-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:normal;font-display:swap;src:url(login/fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-style:normal;font-display:swap;src:url(login/fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:700;font-style:normal;font-display:swap;src:url(login/fonts/source-serif-4-latin-700-normal.woff2) format('woff2')}

:root{--plum:#3a0a4a;--plum2:#2b0636;--ink:#43204f;--mute:#8d7d92;--gold:#E8B25E;--gold2:#F6D08A;--amber:#8b5a1a}
*{box-sizing:border-box}
html{background:#2a0a38;-webkit-text-size-adjust:100%}
body.login{margin:0;min-height:100vh;min-height:100dvh;font-family:'Source Serif 4',Georgia,'Times New Roman',serif;color:var(--ink);background:#2a0a38 url(login/bg_desktop.webp) center/cover no-repeat;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.stage{position:relative;container-type:inline-size}
.card{position:relative}

/* ---------- brand (logo) ---------- */
.brand{text-align:center;color:#EBD3AA;pointer-events:none}
.crown{display:block;margin:0 auto;height:auto}
.brand h2{margin:0;font-family:'Cormorant Garamond','Playfair Display',serif;font-weight:700;line-height:1;white-space:nowrap;background:linear-gradient(180deg,#FFF4D6 0%,#F4CE8C 42%,#D9983E 78%,#B8741F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.rule{position:relative;margin-left:auto;margin-right:auto}
.rule:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,#E8B25E 18%,#E8B25E 82%,transparent)}
.rule:after{content:"";position:absolute;left:50%;top:50%;background:#F1C177;transform:translate(-50%,-50%) rotate(45deg)}
.tagline{margin:0;font-family:Cinzel,'Cormorant Garamond',serif;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:#E8CFA3}

/* ---------- chips ---------- */
.chips{display:flex;justify-content:center;pointer-events:none}
.chip{display:flex;align-items:center;white-space:nowrap;border:1.5px solid rgba(232,178,94,.8);background:linear-gradient(180deg,rgba(66,12,82,.78),rgba(34,4,46,.82));color:#F3DFB6;font-family:'Source Serif 4',serif;font-weight:600;letter-spacing:.07em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,214,140,.12),0 4px 14px rgba(10,0,20,.4)}
.chip svg{flex:none;fill:none;stroke:#E8B25E;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- form ---------- */
.eyebrow{display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--amber);padding-left:.32em}
.panel h1{margin:0;text-align:center;font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--plum);letter-spacing:-.012em;text-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(110,30,130,.18)}
.lead{margin:0;color:#43204f}
.lead b{font-weight:700;color:var(--plum)}
.mbr{display:none}
.err{display:flex;align-items:center;gap:10px;border-radius:12px;background:#fdeae3;border:1px solid #f2bfae;color:#a3211a}
.err svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f{display:block}
.f>span.l{display:flex;align-items:center;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#4a1259}
.f>span.l svg{display:none}
.box{position:relative;display:block}
.box>svg.ic{position:absolute;top:50%;transform:translateY(-50%);stroke:#4a1259;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.box input{width:100%;border:1.5px solid #DDA85C;background:linear-gradient(180deg,#FFF3DF,#FCE8C9);color:var(--ink);font-family:'Source Serif 4',serif;font-weight:400;outline:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 8px rgba(160,100,30,.16);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.box input::placeholder{color:#8f7f93;opacity:1}
.box input:focus{border-color:#8a3aa0;box-shadow:0 0 0 4px rgba(106,43,128,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.eye{position:absolute;top:50%;transform:translateY(-50%);border:0;background:none;border-radius:10px;cursor:pointer;display:grid;place-items:center;padding:0}
.eye:hover{background:rgba(74,18,89,.08)}.eye:focus-visible{outline:2px solid var(--plum)}
.eye svg{width:60%;height:60%;stroke:#4a1259;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eye .off{display:none}.eye.on .off{display:block}.eye.on .see{display:none}
.caps{display:none;color:#a3541e;font-size:13px}
.caps.show{display:block}
.btn{width:100%;border:0;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;color:#FBEBD0;font-family:'Source Serif 4',serif;font-weight:400;letter-spacing:.03em;background:linear-gradient(180deg,#7a1f90 0%,#5a1470 45%,#33073f 100%);box-shadow:0 0 0 2px #E2AE5E,0 0 0 3px rgba(255,228,170,.55),0 12px 22px rgba(70,15,90,.38),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s,filter .2s}
.btn svg{flex:none;stroke:#F2C77C;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:active{transform:none}.btn:focus-visible{outline:3px solid #E8B25E;outline-offset:4px}
.btn.load{pointer-events:none;filter:saturate(.8)}
.btn.load svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.secure{position:relative;display:flex;align-items:center;justify-content:center;margin:0;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#3a0a4a;white-space:nowrap}
.secure:before,.secure:after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,transparent,#E0A24A)}
.secure:after{background:linear-gradient(270deg,transparent,#E0A24A)}
.secure span.t{padding:0 1.1em 0 1.4em}
.secure i{font-style:normal;color:#D8892F;padding:0 .35em}
.secure .dm{position:absolute;left:50%;background:#E0A24A;transform:translateX(-50%) rotate(45deg)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   DESKTOP / LAPTOP  (>= 1000px) — one card that keeps the design's 1479 : 742 ratio
   ========================================================================== */
@media(min-width:1000px){
 body.login{display:grid;place-items:center;padding:16px}
 .stage{width:100%;display:grid;place-items:center}
 .card{--cw:min(1180px,94vw,calc((100vh - 32px)*1.9933));--k:calc(var(--cw)/1479);width:var(--cw);aspect-ratio:1479/742;background:url(login/card_desktop.webp) 0 0/100% 100% no-repeat;filter:drop-shadow(0 22px 40px rgba(8,0,18,.55))}
 @supports(height:100dvh){.card{--cw:min(1180px,94vw,calc((100dvh - 32px)*1.9933))}}
 .brand{position:absolute;left:calc(var(--k)*100);top:calc(var(--k)*30);width:calc(var(--k)*604)}
 .crown{width:calc(var(--k)*54)}
 .brand h2{font-size:calc(var(--k)*98);margin-top:calc(var(--k)*8)}
 .rule{width:calc(var(--k)*430);height:calc(var(--k)*16);margin-top:calc(var(--k)*6)}
 .rule:after{width:calc(var(--k)*11);height:calc(var(--k)*11)}
 .tagline{margin-top:calc(var(--k)*14);font-size:calc(var(--k)*17);line-height:calc(var(--k)*27)}
 .chips{position:absolute;left:0;width:calc(var(--k)*757);bottom:calc(var(--k)*29);gap:calc(var(--k)*27)}
 .chip{height:calc(var(--k)*48);padding:0 calc(var(--k)*24);border-radius:calc(var(--k)*24);font-size:calc(var(--k)*17);gap:calc(var(--k)*11)}
 .chip svg{width:calc(var(--k)*27);height:calc(var(--k)*27)}
 .panel{position:absolute;left:calc(var(--k)*834);top:calc(var(--k)*104);width:calc(var(--k)*576)}
 .eyebrow{font-size:max(11px,calc(var(--k)*21));line-height:calc(var(--k)*28)}
 .panel h1{font-size:max(26px,calc(var(--k)*74));line-height:1.08;margin-top:calc(var(--k)*8)}
 .lead{margin-top:calc(var(--k)*10);font-size:max(14px,calc(var(--k)*24));line-height:calc(var(--k)*33)}
 .err{margin-top:calc(var(--k)*14);padding:calc(var(--k)*9) calc(var(--k)*14);font-size:max(13px,calc(var(--k)*19));line-height:1.3}
 .panel.has-err .lead{display:none}
 .f{margin-top:calc(var(--k)*23)}
 .f+.f{margin-top:calc(var(--k)*22)}
 .f>span.l{font-size:max(11px,calc(var(--k)*19));margin:0 0 calc(var(--k)*9) calc(var(--k)*2);line-height:calc(var(--k)*24)}
 .box>svg.ic{left:calc(var(--k)*34);width:calc(var(--k)*26);height:calc(var(--k)*26)}
 .box input{height:calc(var(--k)*62);border-radius:calc(var(--k)*24);padding:0 calc(var(--k)*64) 0 calc(var(--k)*86);font-size:max(15px,calc(var(--k)*22))}
 .eye{right:calc(var(--k)*12);width:calc(var(--k)*46);height:calc(var(--k)*46)}
 .caps{margin:calc(var(--k)*6) calc(var(--k)*2) 0}
 .btn{height:calc(var(--k)*70);border-radius:calc(var(--k)*24);margin-top:calc(var(--k)*22);font-size:max(17px,calc(var(--k)*27));gap:calc(var(--k)*16)}
 .btn svg{width:calc(var(--k)*28);height:calc(var(--k)*28)}
 .secure{margin-top:calc(var(--k)*18);padding-top:calc(var(--k)*10);font-size:max(10px,calc(var(--k)*18))}
 .secure .dm{top:calc(var(--k)*-3);width:calc(var(--k)*10);height:calc(var(--k)*10)}
 .secure:before,.secure:after{margin:0 calc(var(--k)*4)}
 .lic{display:none}
}

/* ==========================================================================
   TABLET / MOBILE  (< 1000px) — art on top, scalable gold card below (9-slice)
   ========================================================================== */
@media(max-width:999.98px){
 body.login{background:#2a0a38 url(login/mobile_base.webp) center top/cover no-repeat}
 .stage{min-height:100vh;min-height:100dvh;--h:calc(100cqw/1024);--u:min(94cqw,560px);--k:calc(var(--u)/840);padding-bottom:calc(var(--h)*150)}
 .stage:after{content:"";position:absolute;left:0;right:0;bottom:0;aspect-ratio:1024/246;background:url(login/mobile_bottom.webp) center bottom/100% 100% no-repeat;pointer-events:none;z-index:0}
 .card{z-index:1}
 .brand{position:relative;width:100%;aspect-ratio:1024/606;background:url(login/mobile_top.webp) center top/100% 100% no-repeat}
 .crown{position:absolute;left:50%;top:calc(var(--h)*36);width:calc(var(--h)*86);transform:translateX(-50%)}
 .brand h2{position:absolute;left:0;right:0;top:calc(var(--h)*92);font-size:calc(var(--h)*112)}
 .rule{position:absolute;left:50%;top:calc(var(--h)*192);width:calc(var(--h)*470);height:calc(var(--h)*22);transform:translateX(-50%)}
 .rule:after{width:calc(var(--h)*12);height:calc(var(--h)*12)}
 .tagline{position:absolute;left:0;right:0;top:calc(var(--h)*222);font-size:max(8.5px,calc(var(--h)*21));line-height:calc(var(--h)*34)}
 .panel{position:relative;z-index:1;width:var(--u);margin:calc(var(--h)*-44) auto 0;min-height:calc(var(--k)*840);padding:max(54px,calc(var(--k)*98)) calc(var(--k)*82) max(26px,calc(var(--k)*50))}
 .panel:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-style:solid;border-color:transparent;border-width:calc(var(--k)*150) calc(var(--k)*112) calc(var(--k)*130) calc(var(--k)*112);border-image:url(login/card_mobile.webp) 150 112 130 112 fill/calc(var(--k)*150) calc(var(--k)*112) calc(var(--k)*130) calc(var(--k)*112) stretch;filter:drop-shadow(0 14px 24px rgba(10,0,22,.45))}
 .eyebrow{font-size:max(11px,calc(var(--k)*22));line-height:max(16px,calc(var(--k)*28));gap:max(10px,calc(var(--k)*20))}
 .eyebrow:before,.eyebrow:after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,transparent,#E0A24A)}
 .eyebrow:after{background:linear-gradient(270deg,transparent,#E0A24A)}
 .panel h1{font-size:max(31px,calc(var(--k)*86));line-height:1.1;margin-top:max(6px,calc(var(--k)*12))}
 .lead{margin-top:max(6px,calc(var(--k)*8));font-size:max(14.5px,calc(var(--k)*27));line-height:1.45;text-align:center}
 .mbr{display:inline}
 .err{margin-top:max(12px,calc(var(--k)*18));padding:10px 14px;font-size:14.5px}
 .f{margin-top:max(20px,calc(var(--k)*38))}
 .f+.f{margin-top:max(16px,calc(var(--k)*26))}
 .f>span.l{font-size:max(11.5px,calc(var(--k)*20));margin:0 0 max(8px,calc(var(--k)*13)) calc(var(--k)*4);gap:max(8px,calc(var(--k)*14));line-height:max(16px,calc(var(--k)*26))}
 .f>span.l svg{display:block;width:max(17px,calc(var(--k)*30));height:max(17px,calc(var(--k)*30));stroke:#4a1259;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
 .box>svg.ic{left:max(15px,calc(var(--k)*32));width:max(19px,calc(var(--k)*34));height:max(19px,calc(var(--k)*34))}
 .box input{height:max(50px,calc(var(--k)*75));border-radius:max(26px,calc(var(--k)*40));padding:0 max(52px,calc(var(--k)*70)) 0 max(52px,calc(var(--k)*98));font-size:max(16px,calc(var(--k)*26))}
 .eye{right:max(6px,calc(var(--k)*14));width:max(40px,calc(var(--k)*56));height:max(40px,calc(var(--k)*56))}
 .caps{margin:6px 4px 0}
 .btn{height:max(54px,calc(var(--k)*80));border-radius:max(24px,calc(var(--k)*34));margin-top:max(22px,calc(var(--k)*30));font-size:max(18px,calc(var(--k)*31));gap:max(10px,calc(var(--k)*18))}
 .btn svg{width:max(20px,calc(var(--k)*34));height:max(20px,calc(var(--k)*34))}
 .secure{margin-top:max(20px,calc(var(--k)*30));padding-top:max(8px,calc(var(--k)*12));font-size:max(10px,calc(var(--k)*21));letter-spacing:.26em}
 .secure .dm{top:max(-3px,calc(var(--k)*-6));width:max(7px,calc(var(--k)*11));height:max(7px,calc(var(--k)*11))}
 .secure:before,.secure:after{margin:0 max(3px,calc(var(--k)*6));min-width:8px}
 .chips{position:relative;z-index:2;width:calc(var(--u)*.86);margin:max(-14px,calc(var(--k)*-20)) auto 0;gap:max(6px,calc(var(--k)*14))}
 .chip{flex:1 1 auto;justify-content:center;height:max(34px,calc(var(--k)*52));padding:0 max(6px,calc(var(--k)*14));border-radius:max(17px,calc(var(--k)*26));font-size:max(10px,calc(var(--k)*20));gap:max(4px,calc(var(--k)*8));min-width:0}
 .chip svg{width:max(15px,calc(var(--k)*26));height:max(15px,calc(var(--k)*26))}
}
@media(max-width:380px){.secure{letter-spacing:.16em}.eyebrow{letter-spacing:.22em}}