/* Account portal authority. Existing character and account state hooks stay intact. */
:root { --ink:var(--sws-text); --muted:var(--sws-text-muted); --line:var(--sws-line); --paper:var(--sws-canvas); --panel:var(--sws-surface-strong); --orange:var(--sws-accent); color-scheme:dark; }
body { min-width:320px; margin:0; min-height:100svh; background:radial-gradient(ellipse at 75% 10%,rgba(245,173,118,.045),transparent 45%),var(--paper); color:var(--ink); }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.page { min-height:100svh; width:min(1560px,calc(100% - 64px)); margin:auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); align-items:stretch; gap:24px; padding:32px 0; }
.stage-card { position:relative; min-height:800px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:radial-gradient(ellipse at 20% 0,rgba(245,173,118,.06),transparent 60%),#14171e; }
.stage-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle,rgba(232,239,250,.12) 1px,transparent 1px) 0 0/28px 28px; mask-image:linear-gradient(transparent 45%,#000); opacity:.65; pointer-events:none; }
.brand { position:absolute; left:40px; top:36px; z-index:10; display:flex; align-items:center; gap:12px; font-size:18px; font-weight:650; }
.logo { width:36px; height:36px; border-radius:10px; background:url('/assets/images/show/brand-mark.webp') center/cover; }
.stage-title { position:absolute; z-index:10; left:40px; top:136px; right:40px; }
.stage-kicker { color:var(--orange); font-size:12px; font-weight:600; letter-spacing:.12em; }
.stage-title h1 { margin:22px 0 24px; font-size:clamp(48px,4.6vw,72px); line-height:1.15; font-weight:600; letter-spacing:-.06em; }
.stage-title p { max-width:400px; margin:0; color:var(--sws-text-soft); font-size:15px; line-height:1.9; }
.floor { position:absolute; left:40px; right:40px; bottom:58px; height:1px; background:var(--sws-line-strong); }
.cast { position:absolute; left:50%; bottom:60px; width:450px; height:440px; transform:translateX(-50%) scale(.8); transform-origin:bottom center; transition:transform 220ms cubic-bezier(.2,.8,.2,1); }
.character { position:absolute; bottom:0; transform-origin:bottom center; transition:height 220ms cubic-bezier(.2,.8,.2,1),transform 220ms cubic-bezier(.2,.8,.2,1),border-radius 220ms,filter 220ms; }
.character::after { content:''; position:absolute; inset:auto 12% -10px; border-radius:50%; height:14px; background:rgba(0,0,0,.25); filter:blur(8px); }
.face { position:absolute; display:flex; gap:18px; transform:translate(var(--fx,0px),var(--fy,0px)); transition:transform 160ms,opacity 160ms,left 220ms,top 220ms; }
.eye { width:18px; height:18px; background:#fff; border-radius:50%; position:relative; }
.eye::before { content:''; position:absolute; width:7px; height:7px; background:#151515; border-radius:50%; left:calc(5px + var(--px,0px)); top:calc(5px + var(--py,0px)); transition:left 160ms,top 160ms; }
.blink .eye { transform:scaleY(.12); }
.purple { left:70px; width:180px; height:340px; background:#9d8ddb; border-radius:16px 16px 0 0; z-index:1; }
.black { left:240px; width:120px; height:260px; background:#323944; border:1px solid #46505e; border-radius:14px 14px 0 0; z-index:2; }
.orange { left:0; width:240px; height:180px; background:#e9ab7c; border-radius:120px 120px 0 0; z-index:3; }
.yellow { left:310px; width:140px; height:200px; background:#d4c78c; border-radius:70px 70px 0 0; z-index:4; }
.purple .face { left:45px; top:40px; gap:32px; }
.black .face { left:26px; top:32px; gap:24px; }
.orange .face { left:82px; top:80px; gap:32px; }
.yellow .face { left:52px; top:40px; gap:24px; }
.orange .eye,.yellow .eye { width:12px; height:12px; background:#1f2024; }
.orange .eye::before,.yellow .eye::before { display:none; }
.yellow .mouth { position:absolute; left:40px; top:88px; width:72px; height:4px; background:#222; border-radius:8px; transform:translate(calc(var(--fx,0px) * .45),calc(var(--fy,0px) * .45)); transition:transform 160ms; }
.account-focus .cast,.password-focus .cast { transform:translateX(calc(-50% + 12px)) scale(.8); }
.account-focus .purple,.password-focus .purple { height:370px; transform:skewX(-8deg) translateX(24px); }
.account-focus .black,.password-focus .black { height:278px; transform:skewX(5deg) translateX(12px); }
.account-focus .orange,.password-focus .orange { transform:translateX(4px); }
.account-focus .yellow,.password-focus .yellow { transform:translateX(7px); }
.account-focus .purple .face { left:56px; top:62px; }
.account-focus .black .face { left:30px; top:20px; }
.password-focus .character { filter:saturate(.8); }
.password-focus .face { opacity:.94; --fx:-10px!important; --fy:-7px!important; }
.password-focus .eye::before { left:1px; top:2px; }
.reveal-pass .purple { height:340px; transform:translateX(10px); }
.reveal-pass .black { height:260px; transform:translateX(8px); }
.reveal-pass .purple .face { left:20px; top:35px; }
.reveal-pass .face { opacity:1; }
.reveal-pass .eye::before { left:9px; top:8px; }
.success .yellow { animation:login-jump 220ms ease 2; }
@keyframes login-jump { 50% { transform:translateY(-12px); } }
.auth { position:relative; width:100%; min-width:0; align-self:center; border:1px solid var(--line); border-radius:24px; background:var(--panel); padding:44px clamp(28px,3.2vw,52px); }
.auth-back { display:inline-flex; align-items:center; min-height:40px; margin-bottom:32px; color:var(--muted); font-size:13px; transition:color var(--sws-motion-fast); }
.auth-kicker { margin:0 0 14px; color:var(--orange); font-size:12px; letter-spacing:.14em; }
.mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:28px; font-size:17px; font-weight:650; }
.auth h2 { margin:0 0 12px; font-size:clamp(28px,2.7vw,38px); font-weight:600; letter-spacing:-.04em; line-height:1.2; }
.auth .sub { margin:0 0 28px; color:var(--sws-text-soft); font-size:13px; line-height:1.8; }
.tabs { display:flex; gap:4px; background:var(--sws-canvas); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:24px; }
.tabs button { flex:1; min-height:40px; padding:0 8px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; transition:background var(--sws-motion-fast),color var(--sws-motion-fast); }
.tabs button.active { background:var(--sws-surface-raised); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.pane.hidden { display:none; }
.field { margin:18px 0; }
.field label { display:block; margin-bottom:9px; color:var(--sws-text-soft); font-size:13px; font-weight:500; }
.field input { width:100%; min-width:0; height:50px; border:1px solid var(--sws-line-strong); border-radius:12px; background:var(--sws-canvas); color:var(--ink); padding:0 14px; outline:none; font-size:14px; transition:border-color var(--sws-motion-fast),box-shadow var(--sws-motion-fast); }
.field input:focus { border-color:var(--sws-focus); box-shadow:0 0 0 3px rgba(130,184,255,.08); }
.field input::placeholder { color:var(--muted); }
.pass-row { position:relative; }
.pass-row input { padding-right:76px; }
.show { position:absolute; right:7px; top:7px; height:36px; border:1px solid var(--line); border-radius:8px; padding:0 12px; background:var(--sws-surface-raised); color:var(--sws-text-soft); font-size:12px; cursor:pointer; }
.sms-line { display:grid; grid-template-columns:minmax(0,1fr) 118px; gap:8px; }
.sms-line button { border:1px solid var(--sws-line-strong); border-radius:12px; background:var(--sws-surface-raised); color:var(--ink); font-size:12px; cursor:pointer; }
.sms-line button:disabled { color:var(--muted); opacity:.5; cursor:not-allowed; }
.primary { position:relative; width:100%; min-height:50px; margin-top:12px; border:1px solid var(--orange); border-radius:12px; background:var(--orange); color:#20150d; font-weight:650; font-size:14px; cursor:pointer; transition:box-shadow var(--sws-motion-fast),background var(--sws-motion-fast); }
.primary::after { content:''; position:absolute; width:18px; height:2px; left:calc(50% - 9px); bottom:7px; background:currentColor; border-radius:2px; opacity:0; transform:scaleX(.4); transition:opacity var(--sws-motion-fast),transform var(--sws-motion-fast); }
.social { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.social a { min-height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--sws-text-soft); font-size:13px; transition:border-color var(--sws-motion-fast),background var(--sws-motion-fast); }
.msg { min-height:22px; margin-top:16px; color:var(--sws-warning); font-size:13px; line-height:1.6; }
.muted { margin:12px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.8; }
:where(button,a,input):focus-visible { outline:2px solid var(--sws-focus); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  .tabs button:hover:not(.active),.show:hover { color:var(--ink); background:var(--sws-surface-raised); }
  .primary:hover { box-shadow:0 8px 28px rgba(245,173,118,.14); }
  .primary:hover::after { opacity:1; transform:scaleX(1); }
  .social a:hover { border-color:var(--orange); background:var(--sws-accent-soft); }
  .auth-back:hover { color:var(--orange); }
}
@media (max-width:1200px) {
  .page { grid-template-columns:minmax(0,1fr) 440px; width:calc(100% - 40px); gap:20px; padding:20px 0; }
  .stage-card { min-height:740px; }
  .stage-title,.brand { left:32px; }
  .stage-title { right:32px; }
  .stage-title h1 { font-size:52px; }
  .stage-title p { max-width:340px; font-size:14px; }
  .cast { transform:translateX(-50%) scale(.67); }
  .account-focus .cast,.password-focus .cast { transform:translateX(calc(-50% + 10px)) scale(.67); }
  .auth { padding:32px; }
}
@media (max-width:960px) {
  .page { display:grid; grid-template-columns:minmax(0,1fr); width:min(520px,calc(100% - 40px)); min-height:100svh; padding:28px 0; }
  .stage-card { display:none; }
  .auth { align-self:center; }
  .mobile-brand { display:flex; }
  .auth-back { margin-bottom:24px; }
}
@media (max-width:560px) {
  .page { width:calc(100% - 24px); padding:12px 0; }
  .auth { padding:28px 24px; border-radius:20px; }
  .auth h2 { font-size:30px; }
  .tabs button { padding:0 5px; font-size:12px; }
  .sms-line { grid-template-columns:minmax(0,1fr) 104px; }
  .social { gap:8px; }
}
@media (prefers-reduced-motion:reduce),(pointer:coarse) {
  .cast,.character,.face,.eye::before,.yellow .mouth { transition:none; }
  .face,.yellow .mouth { transform:none!important; }
  .eye::before { left:5px!important; top:5px!important; }
  .blink .eye { transform:none; }
  .success .yellow { animation:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}