/* =======================================================
   ACEP Premium — account pages (login / signup / account)
   Source baseline preserved; only scroll behavior fixed.
======================================================= */

/* 1) Root constants */
:root { --bp-onecol:1500px; --gap:clamp(8px,1.2vh,24px); --bar-h:clamp(48px,6vh,72px); }

/* 2) Reset + body shell */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;font:15px/1.4 system-ui,sans-serif;background:#000;color:#fff;overflow:auto}

/* Mobile fallback from original */
@media (max-width:var(--bp-onecol)){ body{overflow:auto} }

/* 3) Two-column wrapper (kept for compatibility) */
#wrap{flex:1 1 auto;display:flex;height:calc(100vh - var(--bar-h))}
@media (max-width:var(--bp-onecol)){ #wrap{display:block;height:auto} }

/* 4) Column panels */
.panel{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:var(--gap);padding:var(--gap) 0;transform-origin:top center}
@media (max-width:var(--bp-onecol)){ .panel{display:block;overflow:visible}.panel+.panel{margin-top:var(--gap)} }

/* 5) Resizable modules */
.module{width:98%;max-width:98%;flex:0 0 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.arWrap{width:100%;aspect-ratio:16/9}
.module img,.module canvas,.module video{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}

/* 6) Fluid type */
h1{font-size:clamp(20px,2.5vw,32px)}
h2{font-size:clamp(18px,2.2vw,28px)}
h3,p,td,th{font-size:clamp(14px,1.4vw,22px)}

/* 7) Visual debug for canvases */
canvas{border:1px solid rgba(255,255,255,0.4);border-radius:4px}

/* ---- HTML MAIN STYLE block from original (kept, with scroll fix) ---- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;font:15px/1.4 system-ui,sans-serif;background:#000;color:#fff;overflow:auto}
header#mainHeader{height:var(--bar-h);background:#111}
#wrap{flex:1 1 auto;display:flex;height:calc(100vh - var(--bar-h))}
.panel{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2vh;padding:2vh 0;overflow:visible;transform-origin:top center}
.module{width:98%;max-width:98%;flex:0 0 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.arWrap{width:100%;aspect-ratio:16/9}
.module img,.module canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
@media(max-width:1500px){
  body{overflow:auto}
  #wrap{display:block;height:auto}
  :root{--gap:clamp(8px,2vw,24px)}
  .panel{width:100%;display:block;padding:var(--gap) 0;gap:var(--gap)}
  .panel+.panel{margin-top:var(--gap)}
  .module{margin:0 auto var(--gap)}
  .module img,.module canvas{height:auto}
}

/* --------------------------------------------------
   Shared account & login UI styles
-------------------------------------------------- */

html.auth-checking{visibility:hidden}

.accountBanner{display:block;margin:2vh auto 1vh;max-width:90%;max-height:300px;border:1px solid #333;border-radius:4px;object-fit:cover}

.accountBox{max-width:640px;margin:2vh auto;padding:32px;background:#111;border:1px solid #333;border-radius:6px;text-align:center;font-family:Arial,sans-serif}

.accountBox h2{font-size:clamp(20px,2.2vw,32px);margin-bottom:24px;letter-spacing:.5px;text-transform:uppercase}

.accountBox p{font-size:16px;margin:12px 0}

.accountBox .line{margin:24px auto;height:1px;background:#333;width:100%}

.accountBox input{width:100%;padding:10px;margin-bottom:10px;border:1px solid #333;background:#111;color:#fff;border-radius:0;font-size:14px}
.accountBox input:focus{outline:none;border-color:#0347F2}

.accountBox button{font:18px/1.2 Arial,sans-serif;padding:8px 14px;margin:6px 12px;border:2px solid #555;background:#000;color:#fff;cursor:pointer;text-transform:uppercase;border-radius:0;transition:background .3s}
.accountBox button:hover:not(:disabled){background:#222;border-color:#777}
.accountBox button:disabled{color:#555;cursor:default}

.accountBox a{display:inline-block;margin-top:16px;font-size:15px;color:#1D87F8;text-decoration:none;text-transform:uppercase;font-family:Arial,sans-serif}
.accountBox a:hover{text-decoration:underline}

.status-active{color:#00FFAA}
.status-inactive{color:#FF4444}

/* promo card link behavior */
.promoBox{text-decoration:none !important;color:inherit !important;display:block}
.promoBox h3,.promoBox p{color:#fff;text-decoration:none}
.promoBox p{text-align:justify;text-justify:inter-word}

/* Scrollbars (dark, minimal) */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#333;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#555}

/* Final guard: always allow vertical scroll on these pages */
html,body{overflow-y:auto !important}