:root{
  color-scheme:light;
  --bg:#f5f5f6;
  --surface:#ffffff;
  --surface-soft:#f8f7f8;
  --text:#15151a;
  --muted:#6d6770;
  --border:#e5dfe2;
  --brand:#57122f;
  --brand-2:#741942;
  --gold:#d4af37;
  --focus:rgba(87,18,47,.16);
  --danger:#b4233f;
  --danger-bg:#fff2f4;
  --danger-border:#f4c6cf;
  --success:#146c51;
  --success-bg:#edf9f5;
  --success-border:#c4e9db;
  --shadow:0 30px 70px rgba(24,16,22,.10);
}
html.dark{
  color-scheme:dark;
  --bg:#0d1117;
  --surface:#141922;
  --surface-soft:#1a202a;
  --text:#f7f5f6;
  --muted:#a9a3ac;
  --border:#2b323d;
  --brand:#e29bb9;
  --brand-2:#f1b0cb;
  --gold:#e2c45f;
  --focus:rgba(226,155,185,.17);
  --danger:#ff9cad;
  --danger-bg:#2a1820;
  --danger-border:#5d2633;
  --success:#72deb7;
  --success-bg:#132923;
  --success-border:#214c3e;
  --shadow:0 30px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;
  min-height:100svh;
  min-height:calc(var(--real-vh,1vh) * 100);
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
.login-theme{
  position:fixed;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  color:var(--text);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.07);
  font-size:1.18rem;
}
.login-theme:focus-visible,.primary-button:focus-visible,.otp-actions button:focus-visible,.password-field button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.login-page{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(370px,44%) 1fr}
.login-showcase{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:linear-gradient(148deg,#4c1029 0%,#681437 58%,#7a1b45 100%);
  color:#fff;padding:clamp(34px,5vw,62px);
}
.login-showcase::after{
  content:"";position:absolute;right:-160px;bottom:-185px;width:470px;height:470px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 142px rgba(255,255,255,.02);
}
.showcase-logo{position:relative;z-index:1;width:150px;height:62px;display:flex;align-items:center}
.showcase-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain;object-position:left center}
.showcase-copy{position:relative;z-index:1;max-width:490px;margin:auto 0}
.showcase-tag{margin:0 0 16px;color:rgba(255,255,255,.72);font-size:.83rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase}
.showcase-copy h1{margin:0 0 18px;font-size:clamp(2.55rem,4vw,3.65rem);line-height:1.08;letter-spacing:-.055em;font-weight:700}
.showcase-copy p:last-child{margin:0;color:rgba(255,255,255,.78);font-size:1.03rem;line-height:1.75;max-width:410px}
.showcase-footer{position:relative;z-index:1;margin:0;color:rgba(255,255,255,.7);font-size:.91rem;font-weight:600}
.login-workspace{
  position:relative;isolation:isolate;overflow:hidden;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:72px clamp(24px,7vw,110px) 28px;
}
.login-workspace::before,.login-workspace::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(1px)}
.login-workspace::before{width:340px;height:340px;right:-170px;top:-130px;background:radial-gradient(circle,rgba(87,18,47,.1),transparent 68%)}
.login-workspace::after{width:270px;height:270px;left:-145px;bottom:-120px;background:radial-gradient(circle,rgba(212,175,55,.1),transparent 68%)}
.mobile-logo{display:none}
.login-card{position:relative;width:100%;max-width:456px;padding:31px;border:1px solid rgba(87,18,47,.1);border-radius:29px;background:var(--surface);background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 30px 76px rgba(30,13,22,.11),inset 0 1px rgba(255,255,255,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:tdLoginCardIn .65s cubic-bezier(.16,1,.3,1) both}
.login-card::before{content:"";position:absolute;inset:0 30px auto;height:3px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8}
html.dark .login-card{background:var(--surface);background:color-mix(in srgb,var(--surface) 93%,transparent);border-color:rgba(226,155,185,.12);box-shadow:0 30px 76px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04)}
.card-eyebrow{margin:0 0 15px;color:var(--brand);font-size:.79rem;line-height:1;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.login-card h2{margin:0 0 12px;color:var(--text);font-size:clamp(1.9rem,3vw,2.32rem);font-weight:700;line-height:1.15;letter-spacing:-.045em}
.card-copy{margin:0 0 34px;color:var(--muted);font-size:.95rem;line-height:1.65}
.card-copy strong{color:var(--text);font-weight:650}
.login-alert{border:1px solid;border-radius:14px;padding:13px 14px;margin:0 0 20px;font-size:.9rem;line-height:1.5}
.login-alert p{margin:0}.login-alert small{display:block;margin-top:4px;opacity:.9}
.login-alert.error{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}
.login-alert.success{color:var(--success);background:var(--success-bg);border-color:var(--success-border)}
.login-form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{font-size:.89rem;font-weight:600;color:var(--text)}
.field>small{color:var(--muted);font-size:.79rem;line-height:1.45}
.field input{
  width:100%;height:54px;padding:0 16px;border:1px solid var(--border);border-radius:13px;
  color:var(--text);background:var(--surface);font-size:16px;outline:0;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field input::placeholder{color:var(--muted);opacity:.7}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--focus)}
.password-field{position:relative}
.password-field input{padding-right:98px}
.password-field button{
  position:absolute;top:7px;right:7px;height:40px;padding:0 12px;border:0;border-radius:9px;
  color:var(--brand);background:var(--surface-soft);font-size:.82rem;font-weight:650;
}
.caps-warning{display:none;color:var(--danger)!important;font-weight:600}.caps-warning.show{display:block}
.remember{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.89rem;cursor:pointer;margin-top:-3px}
.remember input{width:17px;height:17px;accent-color:#57122f}
.primary-button{
  height:56px;width:100%;border:0;border-radius:13px;background:var(--brand);color:#fff;
  font-size:.96rem;font-weight:650;transition:background .16s ease,transform .16s ease,opacity .16s ease;
  margin-top:6px;
}
html.dark .primary-button{color:#210b15;background:var(--brand-2)}
.primary-button:hover:not(:disabled){background:var(--brand-2);transform:translateY(-1px)}
.primary-button:disabled{opacity:.58;cursor:not-allowed}.is-submitting .primary-button{opacity:.72;cursor:wait}
.security-note{margin:0;text-align:center;color:var(--muted);font-size:.79rem;line-height:1.5}
.login-mode-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:24px;padding:5px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft);box-shadow:inset 0 1px 3px rgba(15,15,20,.04)}
.login-mode-tabs::before{content:"";position:absolute;z-index:0;left:5px;top:5px;width:calc((100% - 15px)/2);height:calc(100% - 10px);border-radius:13px;background:linear-gradient(135deg,#511029 0%,#771a43 78%,#8a2450 100%);box-shadow:0 10px 26px rgba(87,18,47,.25),inset 0 1px rgba(255,255,255,.16);transform:translateX(0);transition:transform .48s cubic-bezier(.2,.85,.25,1.15),box-shadow .35s ease}
.login-mode-tabs[data-active="qr"]::before{transform:translateX(calc(100% + 5px));box-shadow:0 12px 30px rgba(87,18,47,.3),0 0 0 1px rgba(212,175,55,.2)}
.login-mode-tab{position:relative;z-index:1;min-width:0;min-height:62px;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:13px;background:transparent;color:var(--muted);text-align:left;transition:color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.login-mode-tab:hover:not(.is-active){color:var(--text);transform:translateY(-1px)}
.login-mode-tab.is-active{color:#fff}
.login-mode-tab:focus-visible,.qr-login-refresh:focus-visible,.qr-login-guide summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.login-mode-icon{width:35px;height:35px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:rgba(87,18,47,.08);color:var(--brand);transition:background .3s ease,color .3s ease,transform .46s cubic-bezier(.2,.9,.2,1.25)}
.login-mode-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75}
.login-mode-icon.qr svg{fill:currentColor;stroke:none}
.login-mode-tab.is-active .login-mode-icon{background:rgba(255,255,255,.15);color:#fff}
.login-mode-tab.is-active .login-mode-icon{transform:scale(1.08) rotate(-2deg)}
.login-mode-tab strong,.login-mode-tab small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.login-mode-tab strong{font-size:.83rem}.login-mode-tab small{margin-top:3px;font-size:.66rem;opacity:.78}
.login-mode-stage{position:relative;overflow:hidden;transition:height .48s cubic-bezier(.2,.8,.2,1)}
.login-mode-panel{transform-origin:50% 0}
.login-mode-panel.is-leaving-left{animation:tdModeLeaveLeft .18s ease forwards}
.login-mode-panel.is-leaving-right{animation:tdModeLeaveRight .18s ease forwards}
.login-mode-panel.is-entering-right{animation:tdModeEnterRight .42s cubic-bezier(.16,1,.3,1) both}
.login-mode-panel.is-entering-left{animation:tdModeEnterLeft .42s cubic-bezier(.16,1,.3,1) both}
#loginPasswordPanel[hidden],
.qr-login-modal[hidden]{display:none}
.qr-login-modal{display:block}
.qr-login-panel{position:relative;overflow:hidden;padding:18px;border:1px solid rgba(87,18,47,.13);border-radius:21px;background:radial-gradient(circle at 95% 5%,rgba(212,175,55,.12),transparent 28%),linear-gradient(155deg,var(--surface) 0%,var(--surface-soft) 100%);color:var(--text);box-shadow:0 16px 38px rgba(40,18,30,.08)}
.qr-login-panel::before{content:"";position:absolute;inset:0 18px auto;height:3px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,transparent,#d4af37,transparent)}
.qr-inline-heading{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.qr-inline-badge{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:linear-gradient(145deg,#57122f,#7b1a46);color:#fff;font-size:1.45rem;box-shadow:0 8px 18px rgba(87,18,47,.2);animation:tdQrBadgeFloat 3.2s ease-in-out infinite}
.qr-inline-heading h3{margin:0;color:var(--text);font-size:.96rem;line-height:1.25}.qr-inline-heading p{margin:4px 0 0;color:var(--muted);font-size:.73rem;line-height:1.35}
.qr-code-shell{position:relative;overflow:hidden;width:min(100%,244px);aspect-ratio:1;margin:0 auto;padding:11px;border:1px solid #eadfe4;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(33,15,24,.1),0 0 0 5px rgba(212,175,55,.07);transition:transform .35s ease,box-shadow .35s ease}
.qr-code-shell.is-loading{background:linear-gradient(110deg,#fff 20%,#f7edf2 38%,#fff 56%);background-size:220% 100%;animation:tdQrLoading 1.2s linear infinite}
.qr-code-shell.is-ready{box-shadow:0 16px 36px rgba(33,15,24,.13),0 0 0 5px rgba(212,175,55,.12)}
.qr-code-shell.is-ready::after{content:"";position:absolute;z-index:4;left:9%;right:9%;top:10%;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 12px rgba(212,175,55,.75);animation:tdQrScan 2.7s ease-in-out infinite;pointer-events:none}
.qr-code-shell #qrCode,.qr-code-shell svg{display:block;width:100%;height:100%}
.qr-code-shell.is-ready svg{animation:tdQrReveal .48s cubic-bezier(.16,1,.3,1) both}
.qr-code-logo{position:absolute;left:50%;top:50%;width:33%;height:16%;display:grid;place-items:center;transform:translate(-50%,-50%);padding:5px 7px;border:4px solid #fff;border-radius:9px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.qr-code-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.qr-login-status{margin:14px 0 8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--muted);font-size:.77rem;line-height:1.4;text-align:center}
.qr-login-status.is-ok{color:var(--success);background:var(--success-bg)}.qr-login-status.is-error{color:var(--danger);background:var(--danger-bg)}
.qr-login-expiry{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:.76rem}.qr-login-expiry strong{color:var(--text);font-variant-numeric:tabular-nums}
.qr-login-refresh{width:100%;height:47px;margin-top:13px;border:1px solid var(--brand);border-radius:12px;background:transparent;color:var(--brand);font-weight:700}
.qr-login-guide{margin-top:13px;border-top:1px solid var(--border);padding-top:12px}.qr-login-guide summary{color:var(--brand);font-size:.76rem;font-weight:750;text-align:center;cursor:pointer;list-style-position:inside}
.qr-login-steps{display:grid;gap:7px;margin:12px 0 0;padding:0 0 0 24px;color:var(--text);font-size:.75rem;line-height:1.42;text-align:left}
.qr-login-steps li::marker{color:var(--brand);font-weight:750}
.qr-login-note{margin:12px 0 0;color:var(--muted);font-size:.68rem;line-height:1.45;text-align:center}
@keyframes tdLoginCardIn{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
@keyframes tdModeLeaveLeft{to{opacity:0;transform:translateX(-20px) scale(.985);filter:blur(2px)}}
@keyframes tdModeLeaveRight{to{opacity:0;transform:translateX(20px) scale(.985);filter:blur(2px)}}
@keyframes tdModeEnterRight{from{opacity:0;transform:translateX(24px) scale(.98);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes tdModeEnterLeft{from{opacity:0;transform:translateX(-24px) scale(.98);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes tdQrReveal{from{opacity:0;transform:scale(.9) rotate(-1deg)}to{opacity:1;transform:none}}
@keyframes tdQrScan{0%,100%{top:10%;opacity:.25}50%{top:88%;opacity:1}}
@keyframes tdQrLoading{to{background-position:-220% 0}}
@keyframes tdQrBadgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.otp-delivery{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);padding:13px 14px;color:var(--muted);font-size:.86rem}
.otp-delivery strong{color:var(--text);font-weight:650}.otp-delivery strong.expired{color:var(--danger)}
.otp-input{text-align:center;font-size:1.38rem!important;font-weight:650;letter-spacing:.48rem;padding-left:26px!important}
.otp-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:22px;margin-top:22px}
.otp-actions form{margin:0}.otp-actions button{border:0;background:transparent;padding:7px 0;color:var(--brand);font-size:.87rem;font-weight:600}
.login-footer{width:100%;max-width:420px;margin-top:48px;color:var(--muted);font-size:.78rem;text-align:center}
@media (max-width:900px){
  .login-page{grid-template-columns:1fr}
  .login-showcase{display:none}
  .login-workspace{min-height:100vh;min-height:100svh;justify-content:flex-start;padding:calc(30px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom))}
  .mobile-logo{height:55px;display:flex;align-items:center;gap:12px;margin-bottom:clamp(30px,6vh,52px);width:100%;max-width:456px}
  .mobile-logo img{display:block;max-width:142px;max-height:50px;object-fit:contain;object-position:left center}
  html.dark .mobile-logo img{filter:brightness(0) invert(1)}
  .mobile-logo span{border-left:1px solid var(--border);padding-left:12px;color:var(--muted);font-size:.86rem;font-weight:600;letter-spacing:.08em}
  .login-theme{top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right))}
}
@media (max-width:540px){
  body{background:var(--surface)}
  .login-workspace{padding:calc(20px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom))}
  .login-workspace::before,.login-workspace::after{display:none}
  .mobile-logo{margin-bottom:34px;padding-right:56px}
  .mobile-logo img{max-width:126px;max-height:44px}
  .login-card h2{font-size:1.82rem}
  .login-card{max-width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.login-card::before{display:none}
  .card-copy{margin-bottom:29px;font-size:.92rem}
  .login-form{gap:18px}
  .login-footer{margin-top:auto;padding-top:42px}
  .login-theme{width:42px;height:42px}
  .otp-actions{flex-direction:column;align-items:stretch}
  .otp-actions button{width:100%;height:46px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}
  .login-mode-tab{min-height:58px;padding:7px 8px;gap:8px}.login-mode-icon{width:32px;height:32px}.login-mode-tab strong{font-size:.78rem}.login-mode-tab small{font-size:.61rem}
  .qr-login-panel{padding:16px}
  .qr-code-shell{width:min(68vw,236px)}
}
@media (max-height:650px) and (max-width:900px){
  .mobile-logo{margin-bottom:20px}
  .card-copy{margin-bottom:20px}
  .login-footer{margin-top:28px;padding-top:0}
  .login-card{padding-top:22px;padding-bottom:22px}.mobile-logo+.login-card{margin-top:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* OTP email fallback V4 */
.otp-methods{display:grid;gap:12px}
.otp-method-card{margin:0}
.otp-method-card button{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:15px 16px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);color:var(--text);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.otp-method-card button:hover{border-color:var(--brand);box-shadow:0 0 0 4px var(--focus);transform:translateY(-1px)}
.otp-method-card button:focus-visible,.otp-method-cancel button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.method-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:var(--surface-soft);font-size:1.2rem;flex:0 0 auto}
.otp-method-card strong{display:block;font-size:.91rem;line-height:1.35}
.otp-method-card small{display:block;margin-top:4px;color:var(--muted);font-size:.79rem}
.otp-method-unavailable{padding:12px 14px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:.8rem;line-height:1.45}
.otp-methods .security-note{margin:8px 0 0}
.otp-method-cancel{margin-top:8px;text-align:center}
.otp-method-cancel button{border:0;background:transparent;color:var(--brand);font-size:.88rem;font-weight:600;padding:8px 12px}
@media (max-width:540px){.otp-method-card button{padding:14px}.method-icon{width:40px;height:40px}}