/* public/css/login.css — جابه‌جایی عین متن از بلوک <style> درون pages/login.php.
   ترتیب و محتوای اعلان‌ها تغییر نکرده است. */
        /* ===== Base ===== */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        html { -webkit-text-size-adjust: 100%; }

        body {
            font-family: var(--font-ui);
            direction: rtl;
            min-height: 100vh;
            color: var(--text);
            background: #eef4fb;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 24px 28px;
            position: relative;
            overflow-x: hidden;
            font-feature-settings: "ss02" 1;
        }

        /* ===== Stage (layered background) ===== */
        .stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

        .stage-base {
            position: absolute; inset: 0;
            background:
                radial-gradient(115% 85% at 88% 4%, #dcecfd 0%, rgba(236, 244, 253, 0) 58%),
                radial-gradient(90% 80% at 6% 96%, #dfeaff 0%, rgba(223, 234, 255, 0) 55%),
                linear-gradient(168deg, #f8fbff 0%, var(--bg) 46%, #e7eff9 100%);
        }

        .stage-grid {
            position: absolute; inset: 0;
            background-image:
                linear-gradient(to left, rgba(12, 45, 72, .055) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(12, 45, 72, .055) 1px, transparent 1px);
            background-size: 58px 58px;
            -webkit-mask-image: radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 78%);
            mask-image: radial-gradient(78% 68% at 50% 42%, #000 0%, transparent 78%);
        }

        .stage-glow { position: absolute; border-radius: 50%; filter: blur(72px); }
        .stage-glow-a { width: 620px; height: 620px; top: -190px; right: -140px; background: rgba(0, 139, 249, .26); }
        .stage-glow-b { width: 520px; height: 520px; bottom: -210px; left: -150px; background: rgba(102, 181, 255, .30); }
        .stage-glow-c { width: 300px; height: 300px; top: 46%; left: 44%; background: rgba(12, 45, 72, .10); }

        .stage-ring {
            position: absolute; border-radius: 50%;
            border: 1px solid rgba(0, 139, 249, .13);
        }
        .stage-ring-a { width: 940px; height: 940px; top: 50%; right: -330px; transform: translateY(-50%); }
        .stage-ring-b { width: 640px; height: 640px; top: 50%; right: -180px; transform: translateY(-50%); border-color: rgba(0, 139, 249, .09); }
        .stage-ring-c { width: 420px; height: 420px; bottom: -190px; left: -120px; border-color: rgba(12, 45, 72, .08); }

        .stage-grain {
            position: absolute; inset: 0; opacity: .18; mix-blend-mode: multiply;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
        }

        /* ===== Shell ===== */
        .shell {
            position: relative; z-index: 1;
            width: 100%; max-width: 1120px;
            display: grid;
            grid-template-columns: minmax(0, 1.06fr) minmax(0, 468px);
            background: var(--glass-bg);
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
            backdrop-filter: blur(var(--glass-blur)) saturate(165%);
            border: 1px solid var(--glass-line);
            border-radius: 34px;
            box-shadow: var(--elev-3), inset 0 1px 0 rgba(255, 255, 255, .7);
            overflow: hidden;
            animation: shellIn .85s var(--ease-out) both;
        }

        @keyframes shellIn {
            from { opacity: 0; transform: translateY(26px) scale(.985); }
            to   { opacity: 1; transform: none; }
        }

        /* ===== Brand panel ===== */
        .brand {
            position: relative;
            padding: 52px 54px 46px;
            display: flex;
            flex-direction: column;
            gap: 34px;
            color: #fff;
            background:
                linear-gradient(158deg, rgba(0, 139, 249, .95) 0%, rgba(0, 84, 168, .95) 48%, rgba(12, 45, 72, .97) 100%);
            overflow: hidden;
        }

        .brand-pattern {
            position: absolute; inset: 0; opacity: .5;
            background-image:
                repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 11px);
        }

        .brand-watermark::before {
            content: '\f3ed';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 400px;
            line-height: 1;
            display: block;
        }

        .brand-watermark {
            position: absolute;
            left: -70px;
            bottom: -110px;
            color: rgba(255, 255, 255, .055);
            transform: rotate(-8deg);
            pointer-events: none;
        }

        .brand-shine {
            position: absolute; width: 420px; height: 420px; border-radius: 50%;
            top: -170px; right: -120px;
            background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 68%);
        }

        .brand-id, .brand-lede, .feature-list, .brand-foot { position: relative; z-index: 2; }

        .brand-id { display: flex; align-items: center; gap: 16px; }

        .brand-tile {
            width: 62px; height: 62px; flex-shrink: 0;
            border-radius: 19px;
            display: grid; place-items: center;
            font-size: 27px; color: #fff;
            background: rgba(255, 255, 255, .16);
            border: 1px solid rgba(255, 255, 255, .32);
            box-shadow: 0 12px 30px rgba(4, 26, 45, .30), inset 0 1px 0 rgba(255, 255, 255, .4);
        }

        .brand-kicker {
            display: block;
            font-size: 12.5px; font-weight: 500; letter-spacing: .6px;
            color: rgba(255, 255, 255, .72);
        }

        .brand-name {
            display: block;
            font-size: 27px; font-weight: 800; line-height: 1.35;
            text-shadow: 0 2px 14px rgba(4, 26, 45, .28);
        }

        .brand-agency {
            display: block; margin-top: 3px;
            font-size: 13.5px; color: rgba(255, 255, 255, .68);
        }

        .brand-lede {
            max-width: 400px;
            font-size: 15px; line-height: 2.05;
            color: rgba(255, 255, 255, .84);
        }

        .brand-lede b { color: #fff; font-weight: 700; }

        .feature-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }

        .feature-list li {
            display: flex; align-items: center; gap: 13px;
            font-size: 14px; color: rgba(255, 255, 255, .92);
        }

        .feature-list i {
            width: 34px; height: 34px; flex-shrink: 0;
            border-radius: 11px;
            display: grid; place-items: center;
            font-size: 14px;
            background: rgba(255, 255, 255, .13);
            border: 1px solid rgba(255, 255, 255, .2);
        }

        .brand-foot {
            margin-top: auto;
            display: flex; flex-wrap: wrap; gap: 9px;
            padding-top: 26px;
            border-top: 1px solid rgba(255, 255, 255, .16);
        }

        .chip {
            display: inline-flex; align-items: center; gap: 7px;
            padding: 7px 13px;
            border-radius: 30px;
            font-size: 12px; font-weight: 500;
            color: rgba(255, 255, 255, .9);
            background: rgba(255, 255, 255, .11);
            border: 1px solid rgba(255, 255, 255, .18);
        }

        /* ===== Form panel ===== */
        .panel {
            padding: 48px 46px 40px;
            display: flex; flex-direction: column;
            background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .34));
        }

        .panel-head { margin-bottom: 26px; }

        .panel-head .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 12px;
            margin-bottom: 18px;
            border-radius: 30px;
            font-size: 12px; font-weight: 600;
            color: var(--primary-dark);
            background: rgba(0, 139, 249, .10);
            border: 1px solid rgba(0, 139, 249, .18);
        }

        .panel-head h2 {
            font-size: 26px; font-weight: 800;
            color: var(--brand-navy);
            letter-spacing: -.3px;
        }

        .panel-head p {
            margin-top: 8px;
            font-size: 14px; line-height: 1.9;
            color: var(--text-muted);
        }

        /* Segmented control */
        .segment {
            position: relative;
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 4px; padding: 5px;
            margin-bottom: 26px;
            border-radius: 16px;
            background: rgba(12, 45, 72, .055);
            box-shadow: inset 0 0 0 1px rgba(12, 45, 72, .05);
        }

        .segment-thumb {
            position: absolute; top: 5px; bottom: 5px; left: 0;
            width: 0;
            border-radius: 12px;
            background: var(--surface);
            box-shadow: var(--elev-1), 0 1px 3px rgba(12, 45, 72, .08);
            transition: transform .42s var(--ease-out), width .42s var(--ease-out);
            pointer-events: none;
        }

        .segment-btn {
            position: relative; z-index: 1;
            padding: 11px 10px;
            border: none; background: none; cursor: pointer;
            font-family: inherit; font-size: 13.5px; font-weight: 600;
            color: var(--text-muted);
            border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            transition: color .3s ease;
        }

        .segment-btn:hover { color: var(--brand-navy); }
        .segment-btn[aria-selected="true"] { color: var(--primary-dark); }
        .segment-btn:focus-visible { outline: none; box-shadow: var(--ring); }

        /* Panes */
        .pane { display: none; }
        .pane.is-active { display: block; animation: paneIn .4s var(--ease-out); }

        @keyframes paneIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: none; }
        }

        /* Fields */
        .field { margin-bottom: 18px; }

        .field > label {
            display: block; margin-bottom: 8px;
            font-size: 13px; font-weight: 600;
            color: #2d3a4a;
        }

        .field-box {
            position: relative;
            display: flex; align-items: center;
            border: 1.5px solid rgba(12, 45, 72, .12);
            border-radius: 15px;
            background: rgba(255, 255, 255, .72);
            transition: border-color .28s ease, box-shadow .28s ease, background .28s ease;
        }

        .field-box:hover { border-color: rgba(0, 139, 249, .38); }

        .field-box:focus-within {
            border-color: var(--primary);
            background: var(--surface);
            box-shadow: var(--ring);
        }

        .field-box.is-invalid {
            border-color: var(--danger);
            background: var(--danger-soft);
            box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);
        }

        .field-icon {
            width: 46px; flex-shrink: 0;
            text-align: center;
            font-size: 15px; color: #9bb0c4;
            transition: color .28s ease;
        }

        .field-box:focus-within .field-icon { color: var(--primary); }
        .field-box.is-invalid .field-icon { color: var(--danger); }

        .field-box input {
            flex: 1; min-width: 0;
            padding: 14px 0 14px 14px;
            border: none; background: none; outline: none;
            font-family: inherit; font-size: 15px; font-weight: 500;
            color: var(--text);
            letter-spacing: .4px;
        }

        .field-box input::placeholder { color: #b3c1d1; font-weight: 400; letter-spacing: 0; }

        .ghost-btn {
            flex-shrink: 0;
            width: 42px; height: 42px; margin-left: 6px;
            border: none; border-radius: 11px; cursor: pointer;
            background: rgba(12, 45, 72, .05);
            color: #7c8fa3; font-size: 14px;
            display: grid; place-items: center;
            transition: background .25s ease, color .25s ease;
        }

        .ghost-btn:hover { background: rgba(0, 139, 249, .12); color: var(--primary-dark); }
        .ghost-btn:focus-visible { outline: none; box-shadow: var(--ring); }

        .field-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin: -6px 0 20px;
        }

        .hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.8; }
        .hint b { color: var(--brand-navy); font-weight: 700; letter-spacing: .3px; }

        .link {
            border: none; background: none; cursor: pointer;
            font-family: inherit; font-size: 13px; font-weight: 600;
            color: var(--primary-dark);
            padding: 4px 2px; border-radius: 8px;
            transition: color .2s ease;
        }

        .link:hover { color: var(--primary); text-decoration: underline; }
        .link:focus-visible { outline: none; box-shadow: var(--ring); }
        .link--quiet { color: var(--text-muted); font-weight: 500; }
        .link--quiet:hover { color: var(--primary-dark); }

        /* Buttons */
        .btn {
            position: relative;
            width: 100%;
            padding: 15px 22px;
            border: none; border-radius: 15px; cursor: pointer;
            font-family: inherit; font-size: 15px; font-weight: 700;
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            color: #fff;
            background: var(--grad-action);
            box-shadow: var(--elev-brand);
            overflow: hidden;
            transition: transform .28s var(--ease-out), box-shadow .28s ease, opacity .2s ease;
        }

        .btn::after {
            content: '';
            position: absolute; top: 0; bottom: 0; left: -60%;
            width: 45%;
            background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0));
            transform: skewX(-18deg);
            transition: left .65s var(--ease-out);
        }

        .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(0, 139, 249, .40); }
        .btn:hover:not(:disabled)::after { left: 115%; }
        .btn:active:not(:disabled) { transform: translateY(0); }
        .btn:focus-visible { outline: none; box-shadow: var(--elev-brand), var(--ring); }
        .btn:disabled { opacity: .58; cursor: not-allowed; }

        .btn--glass {
            margin-top: 11px;
            color: var(--primary-dark);
            background: rgba(255, 255, 255, .7);
            border: 1.5px solid rgba(0, 139, 249, .30);
            box-shadow: none;
        }

        .btn--glass::after { display: none; }
        .btn--glass:hover:not(:disabled) { background: var(--surface); border-color: var(--primary); box-shadow: var(--elev-1); }

        .spinner {
            width: 17px; height: 17px; flex-shrink: 0;
            border: 2px solid rgba(255, 255, 255, .38);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }

        .btn--glass .spinner { border-color: rgba(0, 139, 249, .3); border-top-color: var(--primary-dark); }

        @keyframes spin { to { transform: rotate(360deg); } }

        /* Alert */
        .alert {
            display: none;
            align-items: flex-start; gap: 11px;
            padding: 13px 15px;
            margin-bottom: 20px;
            border-radius: 14px;
            font-size: 13px; line-height: 1.85;
            text-align: right;
        }

        .alert i { font-size: 16px; margin-top: 2px; flex-shrink: 0; }
        .alert.is-error { display: flex; background: var(--danger-soft); color: #a31212; border: 1px solid rgba(220, 38, 38, .22); border-inline-start: 4px solid var(--danger); }
        .alert.is-success { display: flex; background: var(--success-soft); color: #12642f; border: 1px solid rgba(21, 128, 61, .20); border-inline-start: 4px solid var(--success); }
        .alert.is-info { display: flex; background: var(--primary-light); color: #0a4d8c; border: 1px solid rgba(0, 139, 249, .20); border-inline-start: 4px solid var(--primary); }

        .alert.shake { animation: shake .42s ease; }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            22% { transform: translateX(7px); }
            45% { transform: translateX(-6px); }
            68% { transform: translateX(4px); }
        }

        /* OTP */
        .otp-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 9px;
            direction: ltr; /* رقم اول در خانه سمت چپ و پیشروی به سمت راست */
        }

        .otp-cell {
            width: 100%; aspect-ratio: 1 / 1.15;
            border: 1.5px solid rgba(12, 45, 72, .12);
            border-radius: 14px;
            background: rgba(255, 255, 255, .72);
            text-align: center;
            font-family: inherit; font-size: 21px; font-weight: 700;
            color: var(--brand-navy);
            outline: none;
            transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease-out), background .25s ease;
        }

        .otp-cell:hover { border-color: rgba(0, 139, 249, .38); }
        .otp-cell:focus { border-color: var(--primary); background: var(--surface); box-shadow: var(--ring); transform: translateY(-2px); }
        .otp-cell.is-filled { border-color: var(--primary); background: rgba(0, 139, 249, .07); }
        .otp-cell.is-invalid { border-color: var(--danger); background: var(--danger-soft); }

        .otp-meta {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin: 14px 0 20px;
        }

        .timer {
            display: inline-flex; align-items: center; gap: 7px;
            font-size: 12.5px; font-weight: 600;
            color: var(--brand-deep);
            font-variant-numeric: tabular-nums;
        }

        .timer.is-expired { color: var(--danger); }

        .step-back {
            display: inline-flex; align-items: center; gap: 7px;
            margin-bottom: 18px;
        }

        .panel-foot {
            margin-top: auto; padding-top: 26px;
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px;
            font-size: 12px; color: var(--text-muted);
        }

        .panel-foot span { display: inline-flex; align-items: center; gap: 7px; }
        .panel-foot i { color: var(--primary); }

        /* ===== Legal ===== */
        .legal {
            position: relative; z-index: 1;
            margin-top: 22px;
            display: flex; align-items: center; justify-content: center;
            gap: 10px; flex-wrap: wrap;
            font-size: 12px; color: #7f8ea0;
            text-align: center;
        }

        .legal b { color: var(--brand-navy); font-weight: 700; }
        .legal .dot { width: 4px; height: 4px; border-radius: 50%; background: #b9c6d4; }

        /* ===== Responsive ===== */
        @media (max-width: 1080px) {
            .brand { padding: 40px 34px; }
            .panel { padding: 40px 34px 32px; }
            .brand-watermark::before { font-size: 300px; }
        }

        @media (max-width: 900px) {
            body { padding: 24px 16px; justify-content: flex-start; }
            .shell { grid-template-columns: 1fr; max-width: 520px; border-radius: 26px; }
            .brand {
                padding: 26px 26px 24px; gap: 18px;
            }
            .brand-lede, .feature-list, .brand-foot { display: none; }
            .brand-tile { width: 50px; height: 50px; font-size: 22px; border-radius: 15px; }
            .brand-name { font-size: 21px; }
            .brand-watermark::before { font-size: 210px; }
            .brand-watermark { left: auto; right: -30px; bottom: -60px; }
            .panel { padding: 32px 26px 26px; }
            .panel-head h2 { font-size: 22px; }
        }

        @media (max-width: 420px) {
            body { padding: 16px 12px; }
            .shell { border-radius: 22px; }
            .panel { padding: 26px 18px 22px; }
            .brand { padding: 22px 18px; }
            .segment-btn { font-size: 12.5px; padding: 10px 6px; gap: 6px; }
            .otp-grid { gap: 6px; }
            .otp-cell { font-size: 18px; border-radius: 11px; }
            .field-box input { font-size: 14px; }
            .panel-head .eyebrow { font-size: 11px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
        }

        ::selection { background: rgba(0, 139, 249, .22); }