/* ============================================================
   فهد مبارك — V2 · auth.css  (الدخول، الحساب، الصيانة)
   ============================================================ */

/* ---------- صفحة الدخول / التسجيل ---------- */
.auth-page{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);width:min(1180px,100% - 24px);min-height:min(760px,calc(100dvh - 120px));margin:22px auto 0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-lg)}
.auth-art{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:clamp(28px,4vw,52px);overflow:hidden;background:linear-gradient(160deg,#050d22,#0a1f5c 70%,#0e3ab0);color:#fff}
.auth-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(145,186,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(145,186,255,.08) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 80% at 30% 30%,#000,transparent);mask-image:radial-gradient(80% 80% at 30% 30%,#000,transparent)}
.auth-art .hero-aurora i:nth-child(1){width:22rem;height:22rem;top:-8rem;right:-6rem}
.auth-art .hero-aurora i:nth-child(2){width:18rem;height:18rem;bottom:-7rem;left:-3rem}
.auth-art .brand{color:#fff}.auth-art .brand-copy small{color:#9db3e0}
.auth-art h2{max-width:420px;color:#fff;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.25}
.auth-art h2 span{background:linear-gradient(100deg,#8eb6ff,#7ee9d0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-points{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.auth-points li{display:flex;align-items:center;gap:13px;color:#c3d4f6;font-size:.94rem}
.auth-points li span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(190,213,255,.2);color:#9dc0ff}
.auth-main{display:grid;place-items:center;padding:clamp(22px,4vw,48px)}
.auth-card{width:min(440px,100%)}
.auth-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;color:var(--muted);font-size:.84rem;font-weight:600}
.auth-back:hover{color:var(--accent)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;margin-bottom:26px;border-radius:999px;background:var(--bg-2)}
.auth-tabs a,.auth-tabs button{display:grid;place-items:center;min-height:42px;border-radius:999px;color:var(--muted);font-weight:700;font-size:.92rem;transition:all .25s var(--ease)}
.auth-tabs .active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.auth-card h1{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:8px}
.auth-card>p.muted{margin-bottom:22px}
.auth-social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-social{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink);font-weight:700;font-size:.92rem;transition:all .25s var(--ease)}
.btn-social:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-social:disabled{opacity:.6;cursor:wait;transform:none}
.btn-social svg{width:21px;height:21px;flex:0 0 21px}
.btn-social.github svg{fill:currentColor}
.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted-2);font-size:.8rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.method-tabs{display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.method-tabs::-webkit-scrollbar{display:none}
.method-tab{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.84rem;font-weight:700;white-space:nowrap;transition:all .2s}
.method-tab:hover{border-color:var(--blue);color:var(--accent)}
.method-tab.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.auth-form{display:grid;gap:16px}
.auth-form[hidden]{display:none}
.pass-wrap{position:relative}
.pass-wrap input{padding-inline-end:50px}
.pass-toggle{position:absolute;top:50%;inset-inline-end:8px;display:grid;place-items:center;width:36px;height:36px;translate:0 -50%;border-radius:50%;color:var(--muted-2)}
.pass-toggle:hover{background:var(--blue-soft);color:var(--accent)}
.pass-meter{display:flex;gap:5px;margin-top:2px}
.pass-meter i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.pass-meter[data-s="1"] i:nth-child(-n+1){background:var(--danger)}
.pass-meter[data-s="2"] i:nth-child(-n+2){background:var(--warning)}
.pass-meter[data-s="3"] i:nth-child(-n+3){background:#7fb83a}
.pass-meter[data-s="4"] i:nth-child(-n+4){background:var(--success)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.link-btn{color:var(--accent);font-weight:700;font-size:.86rem}
.link-btn:hover{text-decoration:underline}
.phone-field{display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px;direction:ltr}
.phone-field select,.phone-field input{direction:ltr;text-align:left}
.otp-boxes{display:flex;gap:8px;direction:ltr;justify-content:center}
.otp-box{width:100%;max-width:56px;height:60px;min-height:60px;padding:0;border-radius:16px!important;text-align:center;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.otp-sent{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:14px;background:var(--blue-soft);color:var(--ink-2);font-size:.88rem}
.otp-sent b{direction:ltr;unicode-bidi:plaintext}
.auth-foot{margin-top:24px;text-align:center;color:var(--muted);font-size:.9rem}
.auth-foot a,.auth-foot button{color:var(--accent);font-weight:700}
.auth-msg{padding:12px 15px;border-radius:14px;font-size:.88rem;font-weight:600}
.auth-msg.err{background:color-mix(in srgb,var(--danger) 11%,var(--surface));color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}
.auth-msg.ok{background:color-mix(in srgb,var(--success) 11%,var(--surface));color:var(--success);border:1px solid color-mix(in srgb,var(--success) 30%,transparent)}
.spin{width:18px;height:18px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@media(max-width:900px){.auth-page{grid-template-columns:1fr;min-height:0;border-radius:30px}.auth-art{display:none}}
@media(max-width:420px){.auth-social{grid-template-columns:1fr}.otp-box{height:54px;min-height:54px}.phone-field{grid-template-columns:112px minmax(0,1fr)}}

/* ---------- صفحة الحساب ---------- */
.acct{width:min(1180px,100% - 32px);margin:26px auto 0}
.acct-hero{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;gap:22px;overflow:hidden;padding:clamp(24px,4vw,40px);border-radius:var(--r-xl);background:linear-gradient(135deg,#06143a,#0e3aa8);color:#fff;box-shadow:var(--shadow-lg)}
.acct-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(24rem 16rem at 90% 0,rgba(126,233,208,.25),transparent 70%),radial-gradient(18rem 14rem at 0 100%,rgba(122,92,255,.3),transparent 70%)}
.acct-av{display:grid;place-items:center;width:92px;height:92px;flex:0 0 92px;overflow:hidden;border-radius:30px;background:linear-gradient(145deg,var(--blue-2),#07308b);border:3px solid rgba(255,255,255,.35);font-size:2.2rem;font-weight:800;box-shadow:0 14px 36px rgba(0,0,0,.35)}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-hero h1{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem)}
.acct-hero p{margin:4px 0 0;color:#b8cbf0;direction:ltr;text-align:right;unicode-bidi:plaintext}
.acct-hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acct-hero .badge{background:rgba(255,255,255,.14);color:#e3edff}
.acct-hero .badge.ok{background:rgba(82,224,180,.2);color:#8ff0cf}
.acct-hero .actions{margin-inline-start:auto}
.acct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;margin-top:20px;align-items:start}
.acct-col{display:grid;gap:20px;min-width:0}
.acct-col>*,.avatar-row{min-width:0}.avatar-row input[type=file]{max-width:100%;min-width:0}
.acct .panel h2{font-size:1.2rem;margin-bottom:6px}
.acct .panel>p.muted{margin-bottom:18px;font-size:.9rem}
.idn-list{display:grid;gap:10px}
.idn{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.idn svg{width:22px;height:22px;flex:0 0 22px}
.idn b{font-size:.92rem}.idn small{display:block;color:var(--muted);direction:ltr;text-align:right}
.idn .badge{margin-inline-start:auto}
.phone-verify{display:grid;gap:14px}
.avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.avatar-row .fx-av{width:64px;height:64px;font-size:1.4rem}
@media(max-width:900px){.acct-grid{grid-template-columns:minmax(0,1fr)}.acct-hero .actions{margin-inline-start:0;width:100%}}

/* ---------- صفحة الصيانة ---------- */
.maint{position:fixed;z-index:450;inset:0;display:grid;place-items:center;overflow:auto;padding:24px;background:linear-gradient(160deg,#030918,#08174a 70%,#0b2a86);color:#fff;isolation:isolate}
.maint::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(145,186,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(145,186,255,.07) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(60% 70% at 50% 45%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 45%,#000,transparent)}
.maint .hero-aurora{z-index:-1}
.maint-card{width:min(620px,100%);padding:clamp(30px,6vw,56px);border:1px solid rgba(170,200,255,.2);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);text-align:center;animation:viewIn .8s var(--ease) both}
.maint-brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;color:#fff}
.maint-brand .brand-mark{width:48px;height:48px;font-size:1.4rem}
.maint-brand strong{display:block;text-align:right}.maint-brand small{display:block;color:#9db3e0;font-size:.7rem;letter-spacing:.14em}
.maint-gears{position:relative;width:132px;height:112px;margin:0 auto 22px;color:#9dc0ff}
.maint-gears svg{position:absolute;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.maint-gears .g1{width:84px;height:84px;top:0;right:4px;animation:rot 9s linear infinite}
.maint-gears .g2{width:60px;height:60px;bottom:0;left:6px;color:#7ee9d0;animation:rot 6.4s linear infinite reverse}
.maint-card h1{color:#fff;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.2}
.maint-card p.msg{margin:16px auto 0;max-width:460px;color:#bdd0f3;font-size:1.05rem;line-height:1.95;white-space:pre-wrap}
.maint-eta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:9px 18px;border:1px solid rgba(170,200,255,.28);border-radius:999px;background:rgba(255,255,255,.08);color:#d7e5ff;font-size:.88rem;font-weight:600}
.maint-bar{height:5px;margin:30px auto 0;max-width:260px;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.12)}
.maint-bar i{display:block;width:40%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3b7bff,#7ee9d0);animation:slide 1.8s ease-in-out infinite alternate}
@keyframes slide{from{margin-inline-start:0}to{margin-inline-start:60%}}
.maint-admin{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:#8ea8da;font-size:.82rem;font-weight:600;opacity:.8}
.maint-admin:hover{opacity:1;color:#fff}
.maint-banner{position:fixed;z-index:120;bottom:16px;inset-inline:16px auto;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:11px 14px 11px 18px;border:1px solid color-mix(in srgb,var(--warning) 50%,transparent);border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow-lg);font-size:.86rem;font-weight:600}
.maint-banner::before{content:"";width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--warning);animation:ping 2s infinite}
.maint-banner a{padding:5px 13px;border-radius:99px;background:var(--bg);color:var(--ink);font-size:.8rem}