/* Mobi Login — front-end styles */
:root{--mobii-primary:#6C4DF6;--mobii-primary2:#8F6BFF;--mobii-radius:16px;--mobii-field-radius:12px;--mobii-width:420px;--mobii-logo-w:80px;--mobii-overlay:.55;
--mobii-c-bg:#fff;--mobii-c-text:#1f2330;--mobii-c-btn:#fff;
--mobii-bg:var(--mobii-c-bg);--mobii-text:var(--mobii-c-text);--mobii-muted:#7a8094;--mobii-border:#e3e5ee;--mobii-err:#d93a4a;--mobii-ok:#1c9b5b;--mobii-soft:#f5f3ff}
.mobii-theme-dark{--mobii-bg:#171a24;--mobii-text:#eceef6;--mobii-muted:#9aa0b6;--mobii-border:#2b3042;--mobii-soft:#22263a;--mobii-c-input:#1d2130}
@media (prefers-color-scheme:dark){.mobii-theme-auto{--mobii-bg:#171a24;--mobii-text:#eceef6;--mobii-muted:#9aa0b6;--mobii-border:#2b3042;--mobii-soft:#22263a;--mobii-c-input:#1d2130}}

/* ---------- base box ---------- */
.mobii-box{position:relative;box-sizing:border-box;max-width:var(--mobii-width);width:100%;margin:24px auto;padding:28px 24px;background:var(--mobii-bg);color:var(--mobii-text);border:1px solid var(--mobii-border);border-radius:var(--mobii-radius);box-shadow:var(--mobii-shadow,none);font-family:var(--mobii-font,inherit);direction:rtl;text-align:right;line-height:1.7}
.mobii-box *{box-sizing:border-box}
.mobii-logo{text-align:center;margin:0 0 14px}
.mobii-logo img{display:inline-block;width:var(--mobii-logo-w);max-width:100%;height:auto}
.mobii-step{display:none}.mobii-step.is-active{display:block;animation:mobii-in .25s ease}
@keyframes mobii-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mobii-title{margin:0 0 6px;font-size:1.15rem;color:inherit}.mobii-sub{margin:0 0 16px;color:var(--mobii-muted);font-size:.9rem}
.mobii-input{display:block;width:100%;margin:0 0 12px;padding:13px 14px;border:1px solid var(--mobii-border);border-radius:var(--mobii-field-radius);background:var(--mobii-c-input,transparent);color:inherit;font-size:1rem;font-family:inherit;text-align:left;box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s}
select.mobii-input,textarea.mobii-input,.mobii-field .mobii-input{text-align:right}
.mobii-box input,.mobii-box button,.mobii-box select,.mobii-box textarea{font-family:inherit}
.mobii-input:focus{outline:0;border-color:var(--mobii-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mobii-primary) 18%,transparent)}
.mobii-code{letter-spacing:.4em;text-align:center!important;font-size:1.25rem}

/* ---------- buttons ---------- */
.mobii-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:12px;border:1px solid transparent;border-radius:var(--mobii-field-radius);background:var(--mobii-primary);color:var(--mobii-c-btn);font-size:1rem;font-family:inherit;cursor:pointer;text-align:center;text-decoration:none;transition:opacity .15s,transform .1s,box-shadow .2s,filter .2s}
.mobii-btn:hover{filter:brightness(1.06)}.mobii-btn:active{transform:scale(.99)}
.mobii-btn[disabled]{cursor:wait}
.mobii-btn.is-loading{pointer-events:none;opacity:.92}
.mobii-btn-sm{padding:10px;margin-top:12px}
.mobii-bs-solid .mobii-btn{background:var(--mobii-primary);border-color:transparent;color:var(--mobii-c-btn)}
.mobii-bs-gradient .mobii-btn{background:linear-gradient(135deg,var(--mobii-primary),var(--mobii-primary2));border-color:transparent;color:var(--mobii-c-btn)}
.mobii-bs-outline .mobii-btn{background:transparent;border-color:var(--mobii-primary);color:var(--mobii-primary)}
.mobii-bs-outline .mobii-btn:hover{background:var(--mobii-primary);color:var(--mobii-c-btn)}
.mobii-link{display:block;margin:12px auto 0;padding:0;background:none;border:0;color:var(--mobii-primary);cursor:pointer;font-size:.9rem;font-family:inherit;text-decoration:none}
.mobii-link[disabled]{opacity:.6}
.mobii-resend{margin-top:10px;text-align:center;color:var(--mobii-muted);font-size:.9rem}

/* loaders (JS swaps the button content while a request is running) */
.mobii-spin{display:inline-block;flex:none;width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:mobii-spin .7s linear infinite}
@keyframes mobii-spin{to{transform:rotate(360deg)}}
.mobii-dots{display:inline-flex;gap:4px;align-items:center}
.mobii-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:mobii-dot 1s infinite ease-in-out both}
.mobii-dots i:nth-child(2){animation-delay:.15s}.mobii-dots i:nth-child(3){animation-delay:.3s}
@keyframes mobii-dot{0%,80%,100%{transform:scale(.5);opacity:.5}40%{transform:scale(1);opacity:1}}
.mobii-bar{position:absolute;inset-inline:0;bottom:0;height:4px;background:rgba(255,255,255,.25);overflow:hidden}
.mobii-bar i{position:absolute;top:0;bottom:0;width:40%;background:rgba(255,255,255,.9);border-radius:4px;animation:mobii-bar 1.1s infinite ease-in-out}
@keyframes mobii-bar{0%{inset-inline-start:-40%}100%{inset-inline-start:100%}}
.mobii-btn[data-loader=pulse].is-loading{animation:mobii-pulse 1s infinite ease-in-out}
@keyframes mobii-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mobii-primary) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}

/* ---------- misc ---------- */
.mobii-msg{min-height:1.2em;margin-top:12px;font-size:.9rem;text-align:center}.mobii-msg.is-err{color:var(--mobii-err)}.mobii-msg.is-ok{color:var(--mobii-ok)}
.mobii-label{display:block;margin-bottom:4px;font-size:.85rem;color:var(--mobii-muted)}.mobii-req{color:var(--mobii-err);font-style:normal}
.mobii-check{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.9rem}.mobii-radios{margin-bottom:10px}
.mobii-captcha{margin:0 0 12px;min-height:20px}
.mobii-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--mobii-muted);font-size:.85rem}
.mobii-or::before,.mobii-or::after{content:"";flex:1;height:1px;background:var(--mobii-border)}
.mobii-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;padding:10px;border:1px solid var(--mobii-border);border-radius:var(--mobii-field-radius);background:#fff;color:#3c4043;font-size:.95rem;font-family:inherit;text-decoration:none;transition:box-shadow .15s,background .15s}
.mobii-google:hover{background:#f8f9fa;box-shadow:0 1px 6px rgba(20,20,50,.12);color:#3c4043}
.mobii-skeleton{height:48px;border-radius:12px;background:linear-gradient(90deg,var(--mobii-soft) 25%,var(--mobii-border) 37%,var(--mobii-soft) 63%);background-size:400% 100%;animation:mobii-sk 1.2s ease infinite}
@keyframes mobii-sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.mobii-account{text-align:center}.mobii-avatar{border-radius:50%;margin-bottom:8px}.mobii-acc-name{font-weight:700}.mobii-acc-mobile{color:var(--mobii-muted);font-size:.9rem}
.mobii-toast{font-family:var(--mobii-font,inherit);position:fixed;z-index:100000;bottom:24px;left:50%;transform:translate(-50%,20px);max-width:90vw;padding:12px 18px;border-radius:12px;color:#fff;font-size:.9rem;background:#323648;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transition:opacity .25s,transform .25s;direction:rtl}
.mobii-toast.show{opacity:1;transform:translate(-50%,0)}.mobii-toast.is-err{background:var(--mobii-err)}.mobii-toast.is-ok{background:var(--mobii-ok)}

/* ---------- popup ---------- */
.mobii-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,25,var(--mobii-overlay));opacity:0;transition:opacity .2s ease;overflow:auto}
.mobii-overlay.is-open{opacity:1}
.mobii-modal{position:relative;width:100%;max-width:var(--mobii-width);transition:transform .22s ease,opacity .22s ease}
.mobii-anim-slide .mobii-modal{transform:translateY(24px)}.mobii-anim-fade .mobii-modal{opacity:.0}
.mobii-overlay.is-open .mobii-modal{transform:none;opacity:1}
.mobii-modal .mobii-box{margin:0;max-width:none}
.mobii-close{position:absolute;top:8px;left:12px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--mobii-muted);font-size:24px;line-height:1;cursor:pointer}
.mobii-close:hover{background:var(--mobii-soft)}
.mobii-header-btn{font-family:var(--mobii-font,inherit);display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:999px;background:var(--mobii-primary);color:var(--mobii-c-btn);font-family:inherit;font-size:.9rem;cursor:pointer}
.mobii-header-btn img{border-radius:50%}
.mobii-user{position:relative;display:inline-block}
.mobii-menu{font-family:var(--mobii-font,inherit);position:absolute;top:calc(100% + 6px);right:0;z-index:9999;min-width:190px;padding:8px;background:#fff;color:#1f2330;border:1px solid #e3e5ee;border-radius:14px;box-shadow:0 10px 30px rgba(20,20,50,.12)}
.mobii-menu[hidden]{display:none}
.mobii-menu a{display:block;padding:8px 12px;border-radius:8px;color:inherit;text-decoration:none;font-size:.9rem}.mobii-menu a:hover{background:#f5f3ff}
.mobii-menu-mobile{padding:6px 12px;color:#7a8094;font-size:.85rem}

/* =====================  THEME: classic  ===================== */
.mobii-ui-classic{--mobii-shadow:none}
.mobii-ui-classic .mobii-title{padding-bottom:8px;border-bottom:2px solid var(--mobii-primary);display:inline-block}
.mobii-ui-classic .mobii-sub{margin-top:8px}

/* =====================  THEME: modern  ===================== */
.mobii-ui-modern{--mobii-shadow:0 12px 40px rgba(20,20,50,.10);border-color:transparent;padding:32px 28px}
.mobii-ui-modern .mobii-title{text-align:center;font-size:1.3rem;font-weight:700}
.mobii-ui-modern .mobii-sub{text-align:center}
.mobii-ui-modern .mobii-input{background:var(--mobii-c-input,var(--mobii-soft));border-color:transparent}
.mobii-ui-modern .mobii-input:focus{background:var(--mobii-bg)}
.mobii-ui-modern.mobii-bs-theme .mobii-btn{background:linear-gradient(135deg,var(--mobii-primary),var(--mobii-primary2));box-shadow:0 8px 20px color-mix(in srgb,var(--mobii-primary) 35%,transparent)}
.mobii-ui-modern .mobii-logo{margin-bottom:10px}

/* =====================  THEME: advanced  ===================== */
.mobii-ui-advanced{--mobii-shadow:0 24px 70px rgba(30,20,80,.18);border-color:color-mix(in srgb,var(--mobii-primary) 14%,var(--mobii-border));background:color-mix(in srgb,var(--mobii-bg) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:36px 28px 28px;overflow:hidden}
.mobii-ui-advanced::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--mobii-primary),var(--mobii-primary2),var(--mobii-primary));background-size:200% 100%;animation:mobii-flow 6s linear infinite}
@keyframes mobii-flow{to{background-position:200% 0}}
.mobii-ui-advanced::after{content:"";position:absolute;width:220px;height:220px;top:-110px;inset-inline-end:-80px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mobii-primary) 22%,transparent),transparent 70%);pointer-events:none}
.mobii-ui-advanced>*{position:relative;z-index:1}
.mobii-ui-advanced .mobii-title{text-align:center;font-size:1.35rem;font-weight:800;background:linear-gradient(90deg,var(--mobii-primary),var(--mobii-primary2));-webkit-background-clip:text;background-clip:text;color:transparent}
.mobii-ui-advanced .mobii-sub{text-align:center}
.mobii-ui-advanced .mobii-logo img{padding:8px;border-radius:50%;background:var(--mobii-bg);box-shadow:0 8px 24px color-mix(in srgb,var(--mobii-primary) 25%,transparent)}
.mobii-ui-advanced .mobii-input{background:var(--mobii-c-input,color-mix(in srgb,var(--mobii-soft) 70%,transparent));border-width:1.5px}
.mobii-ui-advanced .mobii-input:focus{transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb,var(--mobii-primary) 20%,transparent),0 8px 20px color-mix(in srgb,var(--mobii-primary) 14%,transparent)}
.mobii-ui-advanced.mobii-bs-theme .mobii-btn{background:linear-gradient(135deg,var(--mobii-primary),var(--mobii-primary2));box-shadow:0 10px 26px color-mix(in srgb,var(--mobii-primary) 40%,transparent)}
.mobii-ui-advanced .mobii-btn:not(.is-loading)::before{content:"";position:absolute;top:0;bottom:0;width:40%;inset-inline-start:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:inset-inline-start .6s ease}
.mobii-ui-advanced .mobii-btn:not(.is-loading):hover::before{inset-inline-start:130%}
.mobii-ui-advanced .mobii-step.is-active{animation:mobii-slide .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mobii-slide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.mobii-ui-advanced .mobii-google{background:var(--mobii-bg);color:var(--mobii-text)}

@media (max-width:480px){.mobii-box{padding:24px 18px}}
@media (prefers-reduced-motion:reduce){.mobii-box *,.mobii-box::before,.mobii-overlay,.mobii-modal{animation:none!important;transition:none!important}}