/* Xiaomi Authorized — auth pages (login / register / OTP / forgot / reset) */
:root{
  --bg:#f5f5f7;--ink:#111113;--ink-2:#3a3a3e;--muted:#71717a;--line:#e6e6e9;
  --brand:#ff6900;--brand-ink:#e85d00;--brand-soft:#fff3ea;
  --err:#dc2626;--err-bg:#fef2f2;--ok:#16a34a;--ok-bg:#f0fdf4;
  --r:22px;
  --shadow:0 30px 80px rgba(17,17,19,.14);
  --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
img{max-width:100%}

/* ---------- visual panel ---------- */
.visual-panel{position:relative;flex:0 0 46%;overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:64px;
  background:linear-gradient(155deg,#ff7a1a 0%,#f55a00 46%,#c74a00 100%)}
.visual-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(80% 70% at 60% 30%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(80% 70% at 60% 30%,#000 20%,transparent 100%)}
.orb{position:absolute;width:520px;height:520px;border-radius:50%;top:-160px;inset-inline-end:-140px;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent 70%);filter:blur(10px);animation:drift 9s ease-in-out infinite}
.portal{position:absolute;width:340px;height:340px;border-radius:50%;bottom:8%;inset-inline-start:-120px;border:1.5px dashed rgba(255,255,255,.45);animation:spin 26s linear infinite}
.portal::after{content:"";position:absolute;inset:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28)}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.visual-copy{position:relative;z-index:1;opacity:0;animation:fadeUp .9s var(--ease) .2s forwards}
.visual-copy span{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:16px}
.visual-copy h2{margin:0;font-size:clamp(34px,3.6vw,54px);font-weight:900;letter-spacing:-.03em;line-height:1.05;max-width:460px}

/* ---------- page / card ---------- */
.page{flex:1;display:flex;flex-direction:column;min-height:100vh}
.page>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 40px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none}
.brand .mi,.brand svg{width:32px;height:32px;border-radius:9px;box-shadow:0 5px 14px rgba(255,105,0,.32)}
.page>header nav{display:flex;gap:22px}
.page>header nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px;transition:color .2s}
.page>header nav a:hover{color:var(--brand)}
main{flex:1;display:grid;place-items:center;padding:24px;perspective:1200px}
.auth-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:42px 40px;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform;
  opacity:0;animation:cardIn .8s var(--ease) .1s forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.card-mark{width:52px;height:52px;margin-bottom:20px}
.card-mark svg{width:52px;height:52px;border-radius:14px;box-shadow:0 10px 24px rgba(255,105,0,.35)}
.auth-card h1{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.description{color:var(--muted);margin:0 0 24px;font-size:14px}

/* tabs */
.tabs{display:flex;background:var(--bg);border-radius:999px;padding:4px;margin-bottom:26px}
.tabs a{flex:1;text-align:center;padding:9px 0;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600;font-size:14px;transition:background-color .2s,color .2s,box-shadow .2s}
.tabs a.active{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(17,17,19,.10)}

/* forms */
form{display:grid;gap:6px}
label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:12px}
label span{color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0}
input{height:48px;border:1.5px solid var(--line);border-radius:13px;padding:0 15px;font:inherit;font-size:15px;background:#fff;outline:0;transition:border-color .2s,box-shadow .2s}
input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,105,0,.14)}
button[type=submit]{margin-top:22px;height:50px;border:0;border-radius:999px;background:var(--brand);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 12px 26px rgba(255,105,0,.30);transition:background-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
button[type=submit]:hover{background:var(--brand-ink);transform:translateY(-2px);box-shadow:0 16px 32px rgba(255,105,0,.38)}
button.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none;margin-top:12px}
button.secondary:hover{border-color:var(--ink);background:var(--bg);box-shadow:none}
form.resend{margin-top:0}
.otp-input{text-align:center;font-size:26px;font-weight:800;letter-spacing:.5em;padding-inline-start:.5em;font-variant-numeric:tabular-nums}
.hint{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.text-link{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}

/* notices */
.notice{border-radius:13px;padding:12px 15px;font-size:14px;margin:14px 0 4px}
.notice.error{background:var(--err-bg);color:var(--err);border:1px solid #fecaca}
.notice.success{background:var(--ok-bg);color:var(--ok);border:1px solid #bbf7d0}

/* footer */
.page>footer{padding:20px 40px 28px;text-align:center;color:var(--muted);font-size:12.5px}
.page>footer a{color:var(--muted);text-decoration:none;margin:0 4px;font-weight:600;transition:color .2s}
.page>footer a:hover{color:var(--brand)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media (max-width:900px){
  .visual-panel{display:none}
  .page>header{padding:18px 24px}
  .auth-card{padding:34px 26px}
}

/* ============================================================================
   PRO+ cohesion layer — bright ORANGE & WHITE.
   Appended override (linked CSS only, CSP-safe). Remove this block to revert.
   ========================================================================== */
:root{ --pp-brand:#ff6900; --pp-brand-2:#ff8a3d; --pp-brand-ink:#e35c00; }

/* vivid orange visual panel with soft white light */
.visual-panel{
  background:
    radial-gradient(120% 90% at 80% 6%,rgba(255,255,255,.35),transparent 52%),
    radial-gradient(90% 85% at 6% 100%,rgba(199,74,0,.45),transparent 60%),
    linear-gradient(155deg,#ff8a3d 0%,#ff6900 44%,#e14e00 100%)!important;
}
.visual-panel::before{opacity:.8}
.orb{background:radial-gradient(closest-side,rgba(255,255,255,.4),transparent 70%)!important;filter:blur(12px)!important}
.portal{border-color:rgba(255,255,255,.5)!important}
.portal::after{border-color:rgba(255,255,255,.3)!important}
.visual-copy span{color:#fff!important}
.visual-copy::after{
  content:"Secure OTP  •  2FA Ready  •  Reseller Credit";
  display:block;margin-top:22px;font-size:12px;font-weight:700;letter-spacing:.05em;
  color:rgba(255,255,255,.9)}

/* white card with an orange top accent */
.auth-card{
  border-radius:24px!important;border:1px solid #f0ead2;border-color:#efe9e4!important;
  box-shadow:0 34px 90px rgba(255,105,0,.12),0 10px 30px rgba(17,17,19,.08)!important;position:relative;overflow:hidden}
.auth-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--pp-brand-2),var(--pp-brand))}
.card-mark svg{box-shadow:0 12px 28px rgba(255,105,0,.42)!important}
.brand .mi,.brand svg{box-shadow:0 6px 16px rgba(255,105,0,.4)!important}

button[type=submit]{
  background:linear-gradient(135deg,var(--pp-brand-2),var(--pp-brand))!important;
  box-shadow:0 12px 28px rgba(255,105,0,.34)!important}
button[type=submit]:hover{filter:brightness(1.03)}

.otp-input{border-radius:16px!important;background:#fff8f3!important;border-color:#ffd9bd!important}
.otp-input:focus{background:#fff!important}
.tabs a.active{color:var(--pp-brand)!important}

/* ---------- Google sign-in + tidy refinements ---------- */
.auth-sep{display:flex;align-items:center;gap:14px;margin:20px 0 16px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:50px;
  border:1.5px solid #e2e3e8;border-radius:999px;background:#fff;color:#2b2f36;
  font:inherit;font-weight:700;font-size:14.5px;text-decoration:none;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s,background-color .18s}
.gbtn:hover{border-color:#d0d2d8;background:#fbfbfc;box-shadow:0 8px 20px rgba(17,17,19,.08);transform:translateY(-1px)}
.gbtn:active{transform:translateY(0)}
.gicon{width:20px;height:20px;flex:none}

/* tidy: equal rhythm + centered helper links */
.auth-card{padding:40px 38px}
form{gap:4px}
.text-link{display:block;text-align:center;margin-top:20px}
.hint{line-height:1.5}
.notice{margin-top:4px}
@media (max-width:900px){ .auth-card{padding:32px 24px} }

/* ---------- header controls: theme toggle + language picker ---------- */
.auth-nav{display:flex;align-items:center;gap:14px}
.auth-ctl{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2)!important;font-weight:700;font-size:14px;
  text-decoration:none;cursor:pointer;list-style:none;transition:border-color .18s,background-color .18s,color .18s}
.auth-ctl:hover{border-color:var(--brand);color:var(--brand)!important}
.lang-pick{position:relative}
.lang-pick>summary{user-select:none}
.lang-pick>summary::-webkit-details-marker{display:none}
.lang-pick[open]>summary{border-color:var(--brand);color:var(--brand)!important}
.lang-menu{position:absolute;top:46px;inset-inline-end:0;z-index:20;min-width:190px;max-height:320px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(17,17,19,.16);padding:6px}
.lang-menu a{display:block;padding:9px 12px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px}
.lang-menu a:hover{background:var(--brand-soft);color:var(--brand-ink)}
.lang-menu a.is-on{background:var(--brand-soft);color:var(--brand-ink)}
@media (max-width:560px){ .auth-nav>a[href^="?page="]{display:none} }

/* ============================================================================
   DARK THEME (orange + dark). The orange visual panel stays; the form side
   turns dark. Toggled via <html data-theme="dark"> (cookie, no JS needed).
   ========================================================================== */
html[data-theme="dark"]{
  --bg:#0f1115;--ink:#f3f4f6;--ink-2:#cdd1d8;--muted:#8a909b;--line:#262a31;
  --brand-soft:#2a1b10;--err-bg:#2a1414;--ok-bg:#122017;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .auth-card{background:#171a20!important;border-color:#262a31!important;box-shadow:0 34px 90px rgba(0,0,0,.55)!important}
html[data-theme="dark"] .auth-card h1{color:var(--ink)}
html[data-theme="dark"] input{background:#1f232b!important;border-color:#2b2f37!important;color:var(--ink)!important}
html[data-theme="dark"] input:focus{border-color:var(--brand)!important}
html[data-theme="dark"] .tabs{background:#1b1f26}
html[data-theme="dark"] .tabs a{color:var(--muted)}
html[data-theme="dark"] .tabs a.active{background:#0f1115;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.5)}
html[data-theme="dark"] .brand{color:var(--ink)}
html[data-theme="dark"] .page>header nav a{color:var(--ink-2)}
html[data-theme="dark"] .auth-ctl{background:#1b1f26;border-color:#2b2f37;color:var(--ink-2)!important}
html[data-theme="dark"] .auth-ctl:hover,html[data-theme="dark"] .lang-pick[open]>summary{border-color:var(--brand);color:var(--brand)!important}
html[data-theme="dark"] .lang-menu{background:#171a20;border-color:#262a31;box-shadow:0 20px 50px rgba(0,0,0,.6)}
html[data-theme="dark"] .lang-menu a{color:var(--ink-2)}
html[data-theme="dark"] .gbtn{background:#1f232b!important;border-color:#2b2f37!important;color:#e8eaee!important}
html[data-theme="dark"] .gbtn:hover{background:#242932!important}
html[data-theme="dark"] .auth-sep{color:var(--muted)}
html[data-theme="dark"] .page>footer a{color:var(--muted)}
html[data-theme="dark"] .notice.error{background:var(--err-bg);border-color:#4a1f1f}
html[data-theme="dark"] .notice.success{background:var(--ok-bg);border-color:#1f4a33}

/* ============================================================================
   v3 TIDY LAYER — real hero photo, new XA logo, clean header, password rules
   ========================================================================== */
.brand img.mi,.card-mark img.mi{display:block;object-fit:contain}
.brand{white-space:nowrap;flex:none}
.brand .mi{width:36px;height:36px;border-radius:10px}
.card-mark{width:56px;height:56px}
.card-mark img.mi{width:56px;height:56px;border-radius:15px;box-shadow:0 12px 28px rgba(255,105,0,.38)}
.page>header{padding:20px 40px;flex-wrap:nowrap}
.auth-nav{gap:8px;flex-wrap:nowrap}
.page>header nav a{white-space:nowrap}
.auth-nav>a[href^="?page="]{padding:8px 12px;border-radius:999px;transition:background-color .2s,color .2s}
.auth-nav>a[href^="?page="]:hover{background:var(--brand-soft)}
.lang-pick>summary{list-style:none}
.lang-pick>summary::marker{content:""}
.lang-pick:not([open])>.lang-menu{display:none}

/* hero photo panel */
.visual-panel{flex:0 0 44%;padding:48px 56px;flex-direction:column;justify-content:space-between;align-items:stretch;
  background:#0d0f13 url("img/auth-hero.jpg") center 30%/cover no-repeat!important}
.visual-panel::before{opacity:1;background-image:none;mask-image:none;-webkit-mask-image:none;
  background:linear-gradient(180deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,0) 28%,rgba(10,10,12,.15) 52%,rgba(10,10,12,.92) 100%),
             radial-gradient(70% 50% at 50% 100%,rgba(255,105,0,.28),transparent 70%)}
.orb,.portal{display:none}
.visual-brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;letter-spacing:-.01em;
  opacity:0;animation:fadeUp .8s var(--ease) .1s forwards}
.visual-brand img{width:48px;height:48px;border-radius:13px;box-shadow:0 10px 30px rgba(255,105,0,.45)}
.visual-brand b{font-weight:800;color:#ff8a3d}
.visual-copy::after{content:none!important}
.visual-copy span{color:#ff9a4d!important;letter-spacing:.2em}
.visual-copy h2{font-size:clamp(32px,3.2vw,48px);max-width:440px}
.visual-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0}
.visual-chips li{font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.visual-chips li:first-child{background:rgba(255,105,0,.9);border-color:transparent}

/* card */
.auth-card{width:min(440px,100%)}
.auth-card h1{font-size:25px}
label{margin-top:14px}

/* password field */
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-inline-end:48px}
.pw-eye{position:absolute;top:50%;inset-inline-end:8px;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:10px;background:transparent;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:20px;transition:background-color .2s}
.pw-eye:hover{background-color:var(--brand-soft)}
.pw-eye.is-on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-3.2 4M6.6 6.6C3.9 8.4 2 12 2 12s3.6 7 10 7c1.8 0 3.4-.5 4.8-1.3'/%3E%3C/svg%3E")}
.pw-rules{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0}
.pw-rules li{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);padding:4px 10px 4px 8px;border-radius:999px;background:var(--bg);transition:color .2s,background-color .2s}
.pw-rules li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box;transition:background-color .2s,border-color .2s}
.pw-rules li.ok{color:var(--ok);background:var(--ok-bg)}
.pw-rules li.ok::before{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.pw-match{color:var(--err)!important}

/* footer languages: tidy single line that wraps nicely */
.page>footer{line-height:2}

@media (max-width:1100px){ .visual-panel{padding:40px} }
@media (max-width:900px){
  .page>header{padding:16px 20px}
  main{padding:12px 16px 24px;place-items:start center}
  .auth-card{margin-top:8px}
}
@media (max-width:560px){
  .brand span{font-size:15px}
  .brand .mi{width:32px;height:32px}
  .auth-card{padding:28px 20px;border-radius:20px!important}
  .auth-card h1{font-size:22px}
  .card-mark{width:48px;height:48px;margin-bottom:16px}
  .card-mark img.mi{width:48px;height:48px}
}
html[data-theme="dark"] .pw-rules li{background:#1f232b}
html[data-theme="dark"] .pw-rules li.ok{background:var(--ok-bg)}
.visual-panel{position:sticky;top:0;height:100vh;align-self:flex-start}
.page{min-width:0}
main{min-width:0}
@media (max-width:560px){
  .auth-nav>a.nav-link{display:none}
  .page>header{padding:14px 16px;gap:10px}
  main{padding:8px 14px 20px}
}
html,body{height:auto}
.auth-nav>a.nav-link{display:none}
@media (min-width:901px){ .page>header .brand{visibility:hidden} }
html[data-theme="dark"] .auth-card{background:#1a1e25!important;border-color:#30353f!important}
html[data-theme="dark"] .pw-rules li{color:#a3a9b4}
html[data-theme="dark"] .description,html[data-theme="dark"] .hint{color:#a3a9b4}