/* ==========================================================================
       ১. গ্লোবাল রিসেট ও সিএসএস ভ্যারিয়েবল
       ========================================================================== */
    :root {
        --primary-coral: #fa5f5d;
        --coral-gradient-start: #fa5f5d;
        --coral-gradient-end: #fe8f84;
        --bg-page: #f7f7ff;
        --text-dark: #2c3340;
        --text-muted: #8b92a2;
        --text-placeholder: #b5b9c4;
        --input-bg: #ffffff;
        --btn-inactive: #cbd0df;
        --btn-inactive-text: #6c748c;
    }

    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        background-color: #eceef5;
        color: var(--text-dark);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hind Siliguri", Helvetica, Arial, sans-serif;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        overflow-x: hidden;
    }

    /* ৪৩০px স্ট্যান্ডার্ড মোবাইল অ্যাপ ফ্রেম */
    .app-shell {
        width: 100%;
        max-width: 430px;
        background: var(--bg-page);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 75px;
    }

    /* ==========================================================================
       ২. টপ হেডার ব্যানার ও বড় লোগো স্টাইলিং
       ========================================================================== */
    .auth-hero-header {
        background: linear-gradient(135deg, var(--coral-gradient-start) 0%, var(--coral-gradient-end) 100%);
        padding: 12px 18px 24px 18px;
        color: #ffffff;
        flex-shrink: 0;
    }

    .auth-top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        margin-bottom: 16px;
    }

    .nav-back-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        color: #ffffff;
    }

    /* 🎯 বড় ও আকর্ষণীয় লোগো সাইজ */
    .brand-logo-custom-img {
        height: 36px;
        width: auto;
        max-width: 190px;
        object-fit: contain;
        display: block;
    }

    .brand-logo-text {
        font-size: 31px;
        font-weight: 900;
        font-style: italic;
        letter-spacing: 1.2px;
        color: #ffffff;
        user-select: none;
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .brand-logo-text .h-cross {
        position: relative;
        display: inline-block;
    }
    .brand-logo-text .h-cross::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 48%;
        width: 8px;
        height: 4px;
        background: #ffffff;
        border-radius: 1px;
    }

    .lang-picker-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: none;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        padding: 4px 0;
    }

    .lang-flag-circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: block;
        flex-shrink: 0;
    }

    .hero-title-box {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-left: 2px;
    }

    .hero-title {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 0.2px;
    }

    .hero-subtitle {
        font-size: 12.5px;
        font-weight: 400;
        opacity: 0.92;
        line-height: 1.45;
        white-space: pre-line;
    }

    /* ==========================================================================
       ৩. টপ ট্যাব বার
       ========================================================================== */
    .auth-tabs-bar {
        display: flex;
        background: var(--bg-page);
        border-bottom: 1.5px solid #edf0f8;
        padding: 10px 18px 0 18px;
        gap: 20px;
    }

    .auth-tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding-bottom: 8px;
        cursor: pointer;
        position: relative;
        text-decoration: none;
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-size: 14.5px;
        font-weight: 700;
        transition: color 200ms ease;
    }

    .auth-tab-item.active {
        color: var(--primary-coral);
    }

    .auth-tab-item.active::after {
        content: '';
        position: absolute;
        bottom: -1.5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-coral);
        border-radius: 3px 3px 0 0;
    }

    .tab-svg-wrap {
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* ==========================================================================
       ৪. ফর্ম ইনপুট বক্স ও পারফেক্ট আইকন ফ্রেম
       ========================================================================== */
    .auth-form-container {
        padding: 16px 20px 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .form-field-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
    }

    .field-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
        color: #2b3240;
    }

    .label-svg-wrap {
        width: 19px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .phone-input-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        position: relative;
    }

    .country-selector-box {
        width: 98px;
        height: 48px;
        background: var(--input-bg);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        font-size: 14px;
        font-weight: 700;
        color: #2c3340;
        flex-shrink: 0;
        user-select: none;
    }

    .country-arrow-icon {
        stroke: #667085;
        transition: transform 220ms ease;
    }

    .country-arrow-icon.is-open {
        transform: rotate(180deg);
    }

    .phone-number-input {
        flex: 1;
        height: 48px;
        background: var(--input-bg);
        border-radius: 10px;
        border: 1px solid transparent;
        padding: 0 16px;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--text-dark);
        outline: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .phone-number-input::placeholder {
        color: var(--text-placeholder);
        font-weight: 400;
    }

    .phone-number-input:focus {
        border-color: #ffa8a4;
    }

    /* ফ্লোটিং কান্ট্রি কোড কার্ড */
    .floating-country-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        height: 48px;
        background: var(--primary-coral);
        border-radius: 10px;
        align-items: center;
        padding: 0 18px;
        gap: 22px;
        cursor: pointer;
        color: #ffffff;
        box-shadow: 0 6px 16px rgba(250, 95, 93, 0.35);
        z-index: 60;
        animation: fadeInDrop 180ms ease;
    }

    .floating-country-dropdown.show {
        display: flex;
    }

    @keyframes fadeInDrop {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .card-code-val {
        font-size: 14.5px;
        font-weight: 700;
    }

    .card-country-name {
        font-size: 13.5px;
        font-weight: 600;
    }

    /* টেক্সট ও পাসওয়ার্ড ইনপুট */
    .text-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .custom-text-input {
        width: 100%;
        height: 48px;
        background: var(--input-bg);
        border-radius: 10px;
        border: 1px solid transparent;
        padding: 0 46px 0 16px;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--text-dark);
        outline: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .custom-text-input::placeholder {
        color: var(--text-placeholder);
        font-weight: 400;
    }

    .custom-text-input:focus {
        border-color: #ffa8a4;
    }

    .no-eye-input {
        padding-right: 16px;
    }

    .eye-toggle-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #b0b4c2;
    }

    /* পাসওয়ার্ড রুলস ওয়ার্নিং মেসেজ */
    .pass-rule-warning {
        display: none;
        align-items: flex-start;
        gap: 4px;
        color: var(--primary-coral);
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.35;
        margin-top: 2px;
        padding-left: 2px;
        animation: fadeIn 150ms ease;
    }

    .pass-warn-icon {
        display: flex;
        align-items: center;
        margin-top: 1px;
        flex-shrink: 0;
    }

    /* ভেরিফিকেশন কোড ইনপুট রো ও Send বাটন */
    .verify-code-wrap {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .verify-code-input {
        width: 100%;
        height: 48px;
        background: var(--input-bg);
        border-radius: 10px;
        border: 1px solid transparent;
        padding: 0 96px 0 16px;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--text-dark);
        outline: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .verify-code-input:focus {
        border-color: #ffa8a4;
    }

    .btn-send-code {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        height: 38px;
        min-width: 82px;
        padding: 0 14px;
        background: linear-gradient(90deg, var(--coral-gradient-start) 0%, var(--coral-gradient-end) 100%);
        border: none;
        border-radius: 999px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(250, 95, 93, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 200ms ease;
    }

    .btn-send-code.is-counting {
        background: #c6cbdb;
        color: #ffffff;
        box-shadow: none;
        cursor: not-allowed;
    }

    /* ভেরিফিকেশন কোড পাইনি হেল্পার রো */
    .verify-helper-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 500;
    }

    .verify-helper-icon {
        color: var(--primary-coral);
        flex-shrink: 0;
    }

    .verify-helper-text {
        color: var(--primary-coral);
    }

    .verify-helper-link {
        color: var(--primary-coral);
        text-decoration: underline;
        cursor: pointer;
        font-weight: 600;
    }

    /* ==========================================================================
       ৫. চেকবক্স ও অপশন রো
       ========================================================================== */
    .auth-options-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
        padding: 0 2px;
        font-size: 12.5px;
        user-select: none;
    }

    .custom-checkbox-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        color: #636b7b;
        font-weight: 500;
    }

    .hidden-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .custom-check-circle {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1.5px solid #cbcfdc;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 180ms ease;
        flex-shrink: 0;
    }

    .hidden-checkbox:checked + .custom-check-circle {
        background: var(--primary-coral);
        border-color: var(--primary-coral);
    }

    .custom-check-circle svg {
        display: none;
    }

    .hidden-checkbox:checked + .custom-check-circle svg {
        display: block;
    }

    .terms-highlight {
        color: var(--primary-coral);
        font-weight: 600;
        text-decoration: none;
    }

    .forgot-link-btn {
        color: var(--primary-coral);
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    /* ==========================================================================
       ৬. বাটন গ্রুপ
       ========================================================================== */
    .auth-actions-wrap {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: center;
        width: 100%;
    }

    .btn-primary-action {
        width: 82%;
        height: 48px;
        border-radius: 999px;
        border: none;
        background: linear-gradient(90deg, var(--coral-gradient-start) 0%, var(--coral-gradient-end) 100%);
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(250, 95, 93, 0.32);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 200ms ease, background 200ms ease;
    }

    .btn-primary-action.btn-inactive {
        background: var(--btn-inactive);
        color: var(--btn-inactive-text);
        box-shadow: none;
        cursor: default;
    }

    .btn-secondary-outline {
        width: 82%;
        height: 46px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #ff7b72;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        color: #717b8f;
    }

    .btn-secondary-outline .highlight-word {
        color: var(--primary-coral);
        font-weight: 700;
    }

    /* ==========================================================================
       ৭. কাস্টমার সার্ভিস সাপোর্ট বাটন
       ========================================================================== */
    .floating-service-btn {
        position: fixed;
        bottom: 80px;
        right: calc(50% - 215px + 14px);
        width: 52px;
        height: 52px;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        padding: 0;
        z-index: 98;
        filter: drop-shadow(0 4px 12px rgba(250, 95, 93, 0.32));
    }

    @media (max-width: 430px) {
        .floating-service-btn {
            right: 14px;
        }
    }

    .service-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* ==========================================================================
       ৮. স্ক্রিনশটের হুবহু ডার্ক টোস্ট উইন্ডো
       ========================================================================== */
    .toast-overlay {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        pointer-events: none;
        opacity: 0;
        transition: opacity 160ms ease;
    }

    .toast-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    .toast-card {
        min-width: 140px;
        max-width: 250px;
        min-height: 125px;
        background: rgba(65, 70, 78, 0.94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 14px;
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        transform: scale(0.86);
        transition: transform 180ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
        text-align: center;
        user-select: none;
    }

    .toast-overlay.show .toast-card {
        transform: scale(1);
    }

    .toast-icon-wrap {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toast-msg-text {
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.45;
        white-space: pre-line;
    }

    /* ল্যাঙ্গুয়েজ মোডাল */
    .lang-modal-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 200;
        animation: fadeIn 200ms ease;
    }

    .lang-modal-backdrop.show {
        display: block;
    }

    .lang-bottom-sheet {
        position: fixed;
        bottom: -320px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 430px;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        z-index: 201;
        padding: 20px 18px 30px 18px;
        display: flex;
        flex-direction: column;
        transition: bottom 260ms cubic-bezier(0.1, 0.8, 0.3, 1);
    }

    .lang-bottom-sheet.show {
        bottom: 0;
    }

    .lang-item-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 6px;
        cursor: pointer;
    }

    .lang-item-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .lang-item-flag {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: block;
    }

    .lang-item-title {
        font-size: 16px;
        font-weight: 700;
        color: #2c3340;
    }

    .lang-divider {
        height: 1px;
        background: #f0f2f5;
        margin: 2px 0;
    }

    .lang-radio-circle {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1.5px solid #cbcfdc;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lang-item-row.selected .lang-radio-circle {
        background: var(--primary-coral);
        border-color: var(--primary-coral);
    }

    .lang-radio-circle svg {
        display: none;
    }

    .lang-item-row.selected .lang-radio-circle svg {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .auth-view-panel {
        display: none;
        width: 100%;
    }
    .auth-view-panel.active-view {
        display: block;
    }

/* ==========================================================================
   স্লাইডার পাজল ক্যাপচা (স্ক্রিনশট মাপ: ১০৮০px = ৩৬০u, 1u = ৩px)
   ========================================================================== */
.cap-overlay {
    --u: calc(min(100vw, 430px) / 360);
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .62);
    opacity: 0; visibility: hidden;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
    touch-action: none;
}
.cap-overlay.show { opacity: 1; visibility: visible; transition: opacity 180ms ease, visibility 0s; }
.cap-box { width: calc(311.7 * var(--u)); background: #fff; opacity: 0; transition: opacity 120ms ease; user-select: none; -webkit-user-select: none; }
.cap-box.ready { opacity: 1; }
.cap-img { position: relative; width: 100%; overflow: hidden; background: #dfe3ea; }
.cap-img img { display: block; -webkit-user-drag: none; pointer-events: none; }
#capBg { width: 100%; height: 100%; object-fit: cover; }
#capPiece { position: absolute; height: auto; will-change: transform; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35)); }
.cap-track {
    position: relative; height: calc(36 * var(--u)); margin-top: calc(3.3 * var(--u));
    background: #ececec; border-radius: 0 calc(2.5 * var(--u)) calc(2.5 * var(--u)) 0;
    display: flex; align-items: center; justify-content: center;
}
.cap-hint { font-size: calc(6.6 * var(--u)); color: #2b2b2b; pointer-events: none; }
.cap-handle {
    position: absolute; left: 0; top: 0; width: calc(36.7 * var(--u)); height: 100%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    cursor: grab; touch-action: none; will-change: transform;
    box-shadow: 0 0 calc(2 * var(--u)) rgba(0, 0, 0, .06);
}
.cap-handle.drag { cursor: grabbing; }
.cap-handle svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.cap-pad { height: calc(35.7 * var(--u)); background: #fff; }