/* Account pages. Uses the site's colors (styles.css) so dark/light and RTL just work. */
.auth-main{min-height:calc(100vh - 80px - 74px); display:flex; align-items:flex-start; justify-content:center; padding:48px 16px 56px;}
.auth-card{width:100%; max-width:440px; background:var(--white); border:1px solid var(--border-soft); border-radius:18px; padding:32px 28px;}
.auth-card.wide{max-width:560px;}
.auth-card h1{font-size:30px; margin:0 0 8px;}
.auth-card .lede{color:var(--navy-soft); font-size:15px; line-height:1.6; margin:0 0 22px;}
.nav-spacer{flex:1;}
header .nav > .nav-spacer{flex:1 1 auto;}
header .nav .btn.nav-signin{background:transparent;}
header .nav .btn.btn-solid{color:#fff !important;}

.auth-card form{display:grid; gap:16px;}
.f{display:grid; gap:6px;}
.f label,.f .lbl{font-size:13.5px; font-weight:600; color:var(--navy);}
.f input[type=text],.f input[type=email],.f input[type=password],.f input[type=date],.f input[type=number]{
  width:100%; height:46px; padding:0 14px; border-radius:10px; border:1.5px solid var(--border-soft);
  background:var(--paper); color:var(--navy); font:inherit; font-size:15px; outline:none;}
.f input:focus{border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);}
.f .hint{font-size:12.5px; color:var(--navy-soft); line-height:1.5;}
.f input.code{letter-spacing:6px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:20px;}
html[lang=ar] .f input.code,html[lang=ja] .f input.code{letter-spacing:6px !important;}
html[dir=rtl] .f input[type=email],html[dir=rtl] .f input[name=login],html[dir=rtl] .f input[name=username]{direction:ltr; text-align:right;}

.pw{position:relative;}
.pw input{padding-inline-end:46px;}
.pw-toggle{position:absolute; inset-inline-end:4px; top:4px; width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:8px; color:var(--navy-soft); cursor:pointer;}
.pw-toggle:hover{color:var(--navy); background:var(--blue-tint);}
.pw-toggle svg{width:20px; height:20px;}
.pw-toggle.on{color:var(--blue);}

.chk{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:var(--navy);}
.chk input{margin-top:3px; width:17px; height:17px; accent-color:var(--blue); flex:none;}
.chk a{color:var(--blue-dark); text-decoration:underline;}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.auth-card a.inline,.auth-links a{color:var(--blue-dark); font-weight:600; font-size:14px;}
.auth-card a.inline:hover,.auth-links a:hover{text-decoration:underline;}

.btn-block{width:100%; justify-content:center; height:48px; font-size:15px; cursor:pointer;}
.auth-card .btn-solid{color:#fff !important;}
.auth-card button.btn:disabled{opacity:.6; cursor:wait;}
.auth-links{margin-top:20px; text-align:center; font-size:14px; color:var(--navy-soft); display:grid; gap:8px;}

.auth-msg{border-radius:10px; padding:12px 14px; font-size:14px; line-height:1.55; margin:0 0 16px; border:1px solid transparent;}
.auth-msg-err{background:#FDECEC; color:#8A1C1C; border-color:#F5C2C2;}
.auth-msg-ok{background:var(--mint-tint); color:#0F6B53; border-color:color-mix(in srgb, var(--teal) 45%, transparent);}
:root:not([data-theme=light]) .auth-msg-err{background:#2A1515; color:#F4B1B1; border-color:#5A2626;}
:root:not([data-theme=light]) .auth-msg-ok{color:#7FE3C4;}

.auth-or{display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--navy-soft); font-size:13px;}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--border-soft);}
.g-wrap{display:flex; justify-content:center; min-height:44px;}

.hp{position:absolute !important; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden;}

.verify-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;}
.verify-badge.ok{background:var(--mint-tint); color:#0F6B53;}
.verify-badge.no{background:#FFF1D6; color:#8A5A00;}
:root:not([data-theme=light]) .verify-badge.ok{color:#7FE3C4;}
:root:not([data-theme=light]) .verify-badge.no{background:#33270F; color:#F5CF86;}

.me{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
.me-av{width:64px; height:64px; border-radius:50%; background:var(--blue-tint); display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:26px; color:var(--blue-dark); overflow:hidden; flex:none;}
.me-av img{width:100%; height:100%; object-fit:cover;}
.me h1{font-size:24px; margin:0 0 2px;}
.me .un{color:var(--navy-soft); font-size:14px;}
.kv{display:grid; gap:0; border:1px solid var(--border-soft); border-radius:12px; overflow:hidden; margin-bottom:20px;}
.kv > div{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 14px; font-size:14px; flex-wrap:wrap;}
.kv > div + div{border-top:1px solid var(--border-soft);}
.kv .k{color:var(--navy-soft);}
.kv .v{font-weight:600; overflow-wrap:anywhere;}
.stack{display:grid; gap:12px;}
.btn.ghost{background:transparent;}
.store-row{display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 4px;}
.store-row a{display:inline-flex; line-height:0;}
.store-row img{height:44px; width:auto;}
.state{text-align:center;}
.state .ic{width:64px; height:64px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center;}
.state .ic svg{width:30px; height:30px;}
.state .ic.ok{background:var(--mint-tint); color:#0F6B53;}
.state .ic.bad{background:#FDECEC; color:#8A1C1C;}
:root:not([data-theme=light]) .state .ic.ok{color:#7FE3C4;}
:root:not([data-theme=light]) .state .ic.bad{background:#2A1515; color:#F4B1B1;}

.auth-foot{border-top:1px solid var(--border-soft); padding:22px 0;}
.auth-foot-in{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13.5px; color:var(--navy-soft);}
.auth-foot a:hover{color:var(--navy);}
.auth-foot-links{display:flex; gap:18px;}

html[dir=rtl] .back-arrow{transform:scaleX(-1);}
@media (max-width:560px){
  .auth-main{padding:28px 12px 40px;}
  .auth-card{padding:24px 18px; border-radius:16px;}
  .auth-card h1{font-size:26px;}
  header .nav .nav-signin{display:none;}
}
.f .hint.err{color:#C03030; font-weight:600;}
:root:not([data-theme=light]) .f .hint.err{color:#F4A0A0;}