:root {
        --bg: #F4F6F2;
        --surface: #FFFFFF;
        --green-50: #E8EDF0;
        --green-100: #C5D0D8;
        --green-200: #8FA4B1;
        --green-400: #2A4A5E;
        --green-500: #11202B;
        --green-600: #0D1A23;
        --green-700: #0A141C;
        --green-800: #11202B;
        --green-900: #0A1520;
        --text-primary: #0F172A;
        --text-secondary: #475569;
        --text-muted: #94A3B8;
        --border: #E2E8F0;
        --border-strong: #CBD5E1;
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-xl: 24px;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
        --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
        --sidebar-width: 260px;
      }

      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

      html, body {
        height: 100%;
        font-family: 'Manrope', sans-serif;
        background: var(--bg);
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
      }

      /* ── SNACKBAR ─────────────────────────────── */
      #snackbar {
        visibility: hidden;
        min-width: 250px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: var(--radius-sm);
        padding: 12px 20px;
        position: fixed;
        z-index: 9999;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
      }
      #snackbar.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
      @keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
      @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

      /* ── LOGIN PAGE ───────────────────────────── */
      #user_not_logined_div {
        width: 100%;
        height: 100%;
        overflow-y: auto;
      }
      .login-outer-row {
        display: flex;
        width: 100%;
        min-height: 100vh;
      }
      .login-left {
        width: 42%;
        background: linear-gradient(160deg, var(--green-800) 0%, var(--green-900) 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px;
        position: relative;
        overflow: hidden;
      }
      .login-left::before {
        content: '';
        position: absolute;
        top: -80px; right: -80px;
        width: 320px; height: 320px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
      }
      .login-left::after {
        content: '';
        position: absolute;
        bottom: -60px; left: -60px;
        width: 240px; height: 240px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
      }
      .login-left-logo {
        margin-bottom: 32px;
      }
      .login-left-logo img {
        height: 40px;
        object-fit: contain;
      }
      .login-left-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 50px;
        padding: 5px 14px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255,255,255,0.85);
        margin-bottom: 28px;
        letter-spacing: 0.02em;
      }
      .login-left-badge::before {
        content: '';
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--green-400);
        display: block;
      }
      .login-left-image {
        width: 80%;
        max-height: 260px;
        object-fit: contain;
        margin-bottom: 28px;
      }
      .login-left-text {
        text-align: center;
        color: rgba(255,255,255,0.9);
        position: relative;
        z-index: 1;
      }
      .login-left-text h2 {
        font-size: clamp(18px, 2vw, 24px);
        font-weight: 700;
        margin-bottom: 10px;
        color: #fff;
      }
      .login-left-text p {
        font-size: 14px;
        line-height: 1.6;
        color: rgba(255,255,255,0.72);
        max-width: 300px;
      }
      .login-left-tutorial {
        margin-top: 20px;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.25);
        color: #fff;
        border-radius: 50px;
        padding: 8px 20px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
      }
      .login-left-tutorial:hover { background: rgba(255,255,255,0.22); }
      .login-right {
        flex: 1;
        background: var(--surface);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 40px;
        box-shadow: -4px 0 40px rgba(0,0,0,0.08);
      }
      .login-right-inner {
        width: 100%;
        max-width: 380px;
      }
      .login-right-header {
        margin-bottom: 32px;
      }
      .login-right-header h1 {
        font-size: 26px;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 6px;
      }
      .login-right-header p {
        font-size: 14px;
        color: var(--text-secondary);
      }
      .login-input-group {
        margin-bottom: 16px;
      }
      .login-input-group label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 6px;
      }
      .login-input-wrap {
        display: flex;
        align-items: center;
        border: 1.5px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface);
        padding: 0 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
      }
      .login-input-wrap:focus-within {
        border-color: var(--green-500);
        box-shadow: 0 0 0 3px rgba(17,32,43,0.1);
      }
      .login-input-wrap input {
        flex: 1;
        border: none;
        outline: none;
        padding: 12px 0;
        font-size: 15px;
        font-family: 'Manrope', sans-serif;
        color: var(--text-primary);
        background: transparent;
      }
      .login-input-wrap input::placeholder { color: var(--text-muted); }
      #ap_password_input::-ms-reveal,
      #ap_password_input::-ms-clear { display: none !important; }
      #ap_pw_hide_i {
        font-size: 18px;
        color: var(--text-muted);
        cursor: pointer;
        flex-shrink: 0;
        transition: color 0.15s;
      }
      #ap_pw_hide_i:hover { color: var(--green-500); }
      .login-forgot {
        display: inline-block;
        margin-top: 8px;
        font-size: 13px;
        color: var(--green-500);
        cursor: pointer;
        font-weight: 600;
      }
      .login-forgot:hover { text-decoration: underline; }
      .login-cta-btn {
        width: 100%;
        padding: 13px;
        background: linear-gradient(135deg, var(--green-500) 0%, var(--green-700) 100%);
        color: #fff;
        border: none;
        border-radius: var(--radius-md);
        font-family: 'Manrope', sans-serif;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        margin-top: 24px;
        margin-bottom: 16px;
        box-shadow: 0 4px 16px rgba(17,32,43,0.3);
        transition: opacity 0.2s, transform 0.15s;
      }
      .login-cta-btn:hover { opacity: 0.9; transform: translateY(-1px); }
      .login-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 8px 0 16px;
        color: var(--text-muted);
        font-size: 13px;
      }
      .login-divider::before, .login-divider::after {
        content: ''; flex: 1; height: 1px; background: var(--border);
      }
      .login-social-btn {
        width: 100%;
        padding: 11px;
        border: 1.5px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface);
        font-family: 'Manrope', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: background 0.15s, border-color 0.15s;
        margin-bottom: 10px;
      }
      .login-social-btn:hover { background: var(--green-50); border-color: var(--green-500); }
      .login-social-btn img { width: 18px; height: 18px; object-fit: contain; }
      .login-contact-link {
        text-align: center;
        margin-top: 20px;
        font-size: 13px;
        color: var(--text-muted);
      }
      .login-contact-link button {
        background: none;
        border: none;
        color: var(--green-500);
        font-weight: 600;
        cursor: pointer;
        font-size: 13px;
        padding: 0;
      }
      .login-contact-link button:hover { text-decoration: underline; }
      .ap-auth-back-btn {
        display: inline-flex; align-items: center; gap: 6px;
        background: none; border: none; cursor: pointer;
        font-size: 13px; color: var(--text-muted); padding: 0;
        margin-bottom: 16px; font-family: 'Manrope', sans-serif;
      }
      .ap-auth-back-btn:hover { color: var(--green-500); }
      .ap-phone-wrap { display: flex !important; gap: 0; padding: 0 !important; overflow: visible !important; align-items: stretch !important; }
      .ap-phone-wrap #ap_country_code { flex-shrink: 0; border-right: 1px solid var(--border); align-self: stretch; display: flex; align-items: stretch; }
      .ap-phone-wrap input { border: none !important; box-shadow: none !important; padding-left: 10px !important; }

      /* ── DASHBOARD LAYOUT ─────────────────────── */
      #user_logined_div {
        display: flex;
        height: 100%;
        width: 100%;
        position: fixed;
      }
      #dashboard_sidebar, .sb-sidebar {
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        height: 100%;
        background: linear-gradient(180deg, var(--green-800) 0%, var(--green-900) 100%);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 960;
        flex-shrink: 0;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
      }
      .sb-logo, .sidebar-logo-area {
        padding: 18px 20px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .sb-logo-icon {
        width: 34px; height: 34px; border-radius: 8px;
        background: var(--green-500); color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; font-weight: 800; flex-shrink: 0;
        font-family: 'Manrope', sans-serif;
      }
      .sb-logo-text { flex: 1; min-width: 0; }
      .sb-logo-name {
        font-size: 13px; font-weight: 700; color: #fff;
        white-space: nowrap;
      }
      .sb-logo-tagline {
        font-size: 10px; color: rgba(255,255,255,0.5);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      /* User profile at top */
      .sb-user-top {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      .sb-user-top-row {
        display: flex; align-items: center; gap: 10px; cursor: pointer;
        padding: 8px 4px; border-radius: var(--radius-sm);
        transition: background 0.15s;
      }
      .sb-user-top-row:hover { background: rgba(255,255,255,0.07); }
      .sb-user-initials {
        width: 36px; height: 36px; border-radius: 50%;
        background: #d97706; color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 700; flex-shrink: 0;
        font-family: 'Manrope', sans-serif; text-transform: uppercase;
      }
      .sb-user-top-name {
        font-size: 13px; font-weight: 700; color: #fff;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .sb-user-top-plan {
        font-size: 10px; color: rgba(255,255,255,0.55);
        white-space: nowrap; letter-spacing: 0.04em;
      }
      /* Help Centre card at bottom */
      .sb-help-card {
        margin: 0 12px 12px;
        background: rgba(255,255,255,0.08);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        position: relative;
      }
      .sb-help-card-icon {
        position: absolute; top: -10px; right: 10px;
        width: 22px; height: 22px; border-radius: 50%;
        background: rgba(255,255,255,0.15);
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; color: rgba(255,255,255,0.7);
      }
      .sb-help-card-title {
        font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px;
      }
      .sb-help-card-desc {
        font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 10px;
      }
      .sb-help-raise-btn {
        width: 100%; padding: 8px 0; background: var(--green-500); color: #fff;
        border: none; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700;
        cursor: pointer; font-family: 'Manrope', sans-serif;
        transition: opacity 0.15s;
      }
      .sb-help-raise-btn:hover { opacity: 0.88; }
      /* Profile panel inside dropdown */
      .sb-profile-panel { padding: 12px 16px 14px; }
      .sb-profile-title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
      .sb-profile-avatar-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
      .sb-profile-avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center top; display: block; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.2); overflow: hidden; }
      .sb-profile-divider { height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 10px; }
      .sb-profile-info-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 6px; }
      .sb-profile-info-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.75); flex: 1; }
      .sb-profile-edit-btn { font-size: 11px; padding: 3px 12px; background: #16a34a; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-weight: 700; font-family: 'Manrope', sans-serif; flex-shrink: 0; }
      .sb-profile-edit-btn:hover { background: #15803d; }
      .sb-profile-field { font-size: 13px; color: #fff; font-weight: 500; margin-bottom: 5px; overflow-wrap: break-word; word-break: break-word; }
      .sb-profile-field-key { font-weight: 700; color: rgba(255,255,255,0.7); }
      .sb-profile-field-val { color: #fff; }
      /* Bottom logout row */
      .sb-logout-row {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin: 0 12px 12px; padding: 9px 16px;
        color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600;
        cursor: pointer; font-family: 'Manrope', sans-serif;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-radius: var(--radius-sm);
        width: calc(100% - 24px);
        transition: background 0.15s, color 0.15s, border-color 0.15s;
      }
      .sb-logout-row:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4) !important; color: #fca5a5; }
      .sb-logo img, .sidebar-logo-area img {
        height: 36px;
        object-fit: contain;
      }
      .sb-section-label, .sidebar-section-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.38);
        padding: 20px 20px 8px;
      }
      .sb-nav, .sidebar-nav {
        padding: 8px 0;
      }
      .sb-help {
        padding: 4px 0;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      /* Force all text inside sidebar white — set at root so everything cascades */
      #dashboard_sidebar { color: #fff !important; }
      #dashboard_sidebar a,
      #dashboard_sidebar button,
      #dashboard_sidebar span,
      #dashboard_sidebar div,
      #dashboard_sidebar p,
      #dashboard_sidebar b,
      #dashboard_sidebar input,
      #dashboard_sidebar label,
      #dashboard_sidebar i { color: #fff !important; text-decoration: none; }
      #dashboard_sidebar .sb-section-label,
      #dashboard_sidebar .sb-user-top-plan,
      #dashboard_sidebar .sb-help-card-desc { color: rgba(255,255,255,0.55) !important; }
      #dashboard_sidebar .sb-nav-item,
      #dashboard_sidebar a.sb-nav-item { color: rgba(255,255,255,0.85) !important; }
      #dashboard_sidebar .sb-nav-item.active-nav { color: #fff !important; }
      #nameInput { color: #fff !important; background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.4) !important; }
      #nameInput::placeholder { color: rgba(255,255,255,0.4) !important; }
      #find_email_phone_affliate::placeholder { color: rgba(255,255,255,0.6) !important; }
      .sb-nav-item, .sidebar-nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 20px;
        color: rgba(255,255,255,0.85);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        border-left: 3px solid transparent;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        user-select: none;
        background: none;
        border-right: none;
        border-top: none;
        border-bottom: none;
        width: 100%;
        text-align: left;
        font-family: 'Manrope', sans-serif;
      }
      .sb-nav-item:hover, .sidebar-nav-item:hover {
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.95);
        border-left-color: rgba(255,255,255,0.2);
      }
      .sb-nav-item.active-nav, .sb-nav-item.active,
      .sidebar-nav-item.active-nav, .sidebar-nav-item.active {
        background: rgba(255,255,255,0.13);
        color: #fff;
        border-left-color: var(--green-400);
        font-weight: 700;
      }
      .sb-nav-item svg, .sb-nav-item i,
      .sidebar-nav-item svg, .sidebar-nav-item i {
        width: 18px;
        flex-shrink: 0;
        font-size: 16px;
      }
      .sb-user, .sidebar-profile {
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 16px 20px;
        position: relative;
      }
      .sb-user-row, .sidebar-profile-row {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
      }
      .sb-user-avatar, .sidebar-profile-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255,255,255,0.25);
        flex-shrink: 0;
      }
      .sb-user-info, .sidebar-profile-info {
        flex: 1;
        overflow: hidden;
      }
      .sb-user-name, .sidebar-profile-name {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sb-user-email, .sidebar-profile-email {
        font-size: 11px;
        color: rgba(255,255,255,0.5);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sb-user-caret, .sidebar-profile-caret {
        color: rgba(255,255,255,0.5);
        font-size: 12px;
      }
      #expandeddetails {
        background: var(--green-900);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        padding: 8px 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        display: none;
      }
      .sb-logout, .sidebar-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        font-size: 13px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background 0.15s;
      }
      .sb-logout:hover, .sidebar-dropdown-item:hover { background: var(--green-50); color: var(--green-600); }
      .sidebar-dropdown-divider {
        height: 1px;
        background: var(--border);
        margin: 6px 0;
      }
      #expandeddetails img, #expandeddetails .fa {
        width: 16px;
        flex-shrink: 0;
      }

      /* ── MAIN CONTENT ─────────────────────────── */
      .dashboard-main {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--bg);
        min-width: 0;
      }

      /* ── TOP HEADER BAR ───────────────────────── */
      .heading_div {
        background: #F1F1F1 !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: var(--shadow-sm) !important;
        padding: 14px 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
      }
      .heading_div h2 {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: var(--text-primary) !important;
        margin: 0 !important;
      }
      .heading-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      /* ── PILL BUTTONS ─────────────────────────── */
      .pill-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 34px !important;
        padding: 0 14px !important;
        border-radius: 50px !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: opacity 0.15s, transform 0.1s !important;
        text-decoration: none !important;
        border: 1.5px solid transparent !important;
      }
      .pill-btn:hover { opacity: 0.85; transform: translateY(-1px); }
      .pill-btn-hidden { display: none !important; }
      .pill-btn-yt { background: #fff1f1 !important; border-color: #ffcdd2 !important; color: #c62828 !important; }
      .pill-btn-docs { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.1) !important; color: var(--text-secondary) !important; }
      .pill-btn-green { background: var(--green-500) !important; border-color: var(--green-600) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(17,32,43,0.25) !important; }

      /* ── STAT CARDS ───────────────────────────── */
      .stat-cards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding: 20px 24px;
      }
      .stat-cards-row2 .stat-card {
        min-height: 170px;
        display: flex;
        flex-direction: column;
      }
      .stat-cards-row2 .stat-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .stat-cards-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 20px 24px 16px;
      }
      .stat-cards-grid-3.two-col { grid-template-columns: repeat(2, 1fr) !important; }
      .stat-card {
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        overflow: hidden;
        position: relative;
      }
      /* data-accent ::before pattern (matches React prototype) */
      .feature-card[data-accent]::before {
        content: ''; display: block; height: 4px; width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin: -20px -20px 16px; width: calc(100% + 40px);
      }
      .feature-card[data-accent="green"]::before { background: var(--green-500); }
      .feature-card[data-accent="blue"]::before { background: #3B82F6; }
      .stat-card[data-accent]::before {
        content: '';
        display: block;
        height: 4px;
        width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      }
      .stat-card[data-accent="green"]::before { background: var(--green-500); }
      .stat-card[data-accent="blue"]::before { background: #3B82F6; }
      .stat-card[data-accent="amber"]::before { background: #F59E0B; }
      .stat-card[data-accent="teal"]::before { background: #14B8A6; }
      .stat-card[data-accent="emerald"]::before { background: #10B981; }
      .stat-card[data-accent="violet"]::before { background: #8B5CF6; }
      /* Legacy accent divs (still rendered in preserved sections) */
      .stat-card-accent {
        height: 4px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      }
      .stat-card-accent-green { background: var(--green-500); }
      .stat-card-accent-blue { background: #3B82F6; }
      .stat-card-accent-amber { background: #F59E0B; }
      .stat-card-accent-teal { background: #0891B2; }
      .stat-card-accent-violet { background: #7C3AED; }
      .stat-card-body {
        padding: 16px 20px 18px;
      }

      /* ── CREDITS DONUT CARD ───────────────────── */
      .credits-card .stat-card-body {
        padding: 20px 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        box-sizing: border-box;
      }
      .credits-layout {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        overflow: visible;
        flex-shrink: 0;
      }
      .credits-donut-wrap {
        position: relative;
        width: 100px;
        height: 100px;
        flex-shrink: 0;
      }
      .credits-donut {
        width: 100px;
        height: 100px;
      }
      /* Mini donuts for stat cards */
      .stat-mini-donut-layout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
      }
      .stat-mini-donut-wrap {
        position: relative;
        width: 80px; height: 80px; flex-shrink: 0;
      }
      .stat-mini-donut {
        width: 80px; height: 80px;
        transform: rotate(-90deg);
      }
      .stat-mini-donut-bg { stroke: #E2E8F0; }
      .stat-mini-donut-fill { stroke-linecap: round; }
      .stat-mini-donut-center {
        position: absolute; inset: 0;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        pointer-events: none;
      }
      .stat-mini-donut-val {
        font-size: 12px; font-weight: 800;
        color: var(--text-primary); line-height: 1;
        text-align: center;
      }
      .stat-mini-donut-sub {
        font-size: 8px; font-weight: 600;
        color: var(--text-muted); text-transform: uppercase;
        letter-spacing: 0.04em; margin-top: 2px;
      }
      .credits-donut-bg { stroke: #E2E8F0; }
      .credits-donut-fill {
        stroke: var(--green-500);
        stroke-linecap: round;
        transition: stroke-dasharray 0.6s ease;
      }
      .credits-pct-svg {
        font-size: 14px;
        font-weight: 900;
        fill: var(--text-primary);
        font-family: 'Inter', sans-serif;
      }
      .credits-pct-label-svg {
        font-size: 8px;
        font-weight: 600;
        fill: var(--text-muted);
        font-family: 'Inter', sans-serif;
        letter-spacing: 0.8px;
      }
      /* Dual-info card: two stats stacked vertically with horizontal divider */
      .dual-card-body {
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
      }
      .dual-card-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 14px 16px;
        min-width: 0;
      }
      .dual-card-divider {
        height: 1px;
        background: var(--border);
        flex-shrink: 0;
        margin: 0;
      }
      .dual-card-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 4px;
      }
      .dual-card-value {
        font-size: 17px;
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1.2;
      }
      .dual-card-icon {
        width: 26px; height: 26px; border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; margin-bottom: 6px; flex-shrink: 0;
      }

      /* ── PLAN INFO 2×2 GRID ──────────────────────────────── */
      .plan-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100%;
      }
      .plan-info-item {
        padding: 14px 16px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .plan-info-item:nth-child(2),
      .plan-info-item:nth-child(4) { border-right: none; }
      .plan-info-item:nth-child(3),
      .plan-info-item:nth-child(4) { border-bottom: none; }

      /* ── HORIZONTAL BAR ──────────────────────────────────── */
      .hbar-track {
        background: var(--green-50);
        border-radius: 99px;
        height: 8px;
        overflow: hidden;
        width: 100%;
      }
      .hbar-fill {
        height: 100%;
        border-radius: 99px;
        transition: width 0.6s ease;
      }
      .hbar-fill--violet  { background: #8B5CF6; }
      .hbar-fill--teal    { background: #14B8A6; }
      .hbar-fill--emerald { background: #10B981; }
      .hbar-fill--blue    { background: #2563eb; }
      .hbar-fill--warn    { background: #F59E0B; }
      .hbar-fill--danger  { background: #EF4444; }
      .hbar-fill--locked  { background: #F97316; }
      .usage-row-right--warn   { color: #F59E0B !important; }
      .usage-row-right--danger { color: #EF4444 !important; font-weight: 800; }
      .usage-row-right--locked { color: #92400e !important; font-size: 12px; display: flex; align-items: center; gap: 4px; }

      /* ── CREDITS BAR ROW ─────────────────────────────────── */
      .credits-bar-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
      }
      .credits-bar-row .hbar-track { flex: 1; }
      .credits-bar-pct {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* ── USAGE MERGED CARD ───────────────────────────────── */
      .usage-row {
        padding: 14px 20px 12px;
      }
      .usage-row-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .usage-row-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .usage-row-value {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1.2;
      }
      .usage-row-right {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        white-space: nowrap;
      }
      .usage-row-divider {
        height: 1px;
        background: var(--border);
        margin: 0 20px;
      }
      .credits-pct-label {
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        margin-top: 2px;
      }
      .credits-legend {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      .credits-legend-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .credits-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .credits-dot-used { background: var(--green-500); }
      .credits-dot-remaining { background: #CBD5E1; }
      .credits-legend-label { color: var(--text-secondary); font-size: 13px; width: 80px; flex-shrink: 0; }
      .credits-legend-value {
        font-weight: 700;
        color: var(--text-primary);
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .credits-total-row { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }
      .credits-total-row .credits-legend-label { font-weight: 600; color: var(--text-primary); }
      #api-user { overflow: visible !important; flex-direction: column; }
      .credits-card { overflow: visible !important; }
      .credits-card .stat-card-body { overflow: visible !important; flex: 1; width: 100%; }
      /* Prevent legacy credit sections from leaking onto the dashboard */
      #api_credits_main_div { display: none !important; }
      #buy_credits_div { display: none; }
      /* Filter modal — disable body-level Bootstrap backdrop (it creates a stacking context
         conflict with #user_logined_div position:fixed) and use inline dimming instead */
      .modal-backdrop { display: none !important; }
      #filterModal { background: rgba(0,0,0,0); transition: background 0.15s; }
      #filterModal.show { background: rgba(0,0,0,0.45); }

      /* ── USAGE STAT CARD FOOTER (sparkline + trend) ─── */
      .stat-card-footer {
        display: flex; align-items: flex-end; justify-content: space-between;
        margin-top: 10px; padding-top: 6px;
      }
      .stat-sublabel {
        font-size: 13px; font-weight: 500; color: var(--text-secondary);
        margin-left: 4px;
      }
      .trend-badge {
        display: inline-flex; align-items: center; gap: 3px;
        font-size: 11px; font-weight: 700; color: #11202B;
        background: #E8EDF0; border-radius: 20px; padding: 2px 7px;
      }
      .trend-badge i { font-size: 10px; }
      .sparkline-wrap { flex-shrink: 0; }
      .sparkline { display: block; }
      .sparkline-teal { stroke: #14B8A6; }
      .sparkline-emerald { stroke: #10B981; }
      .sparkline-blue { stroke: #3B82F6; }
      .sparkline-violet { stroke: #8B5CF6; }

      .stat-card-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        margin-bottom: 0;
      }
      .stat-card-body > .stat-card-label { margin-bottom: 8px; }
      .stat-card-value {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
        font-family: 'JetBrains Mono', monospace;
        word-break: break-all;
      }

      /* ── API KEYS TABLE SECTION ───────────────── */
      /* ── PAGE BREADCRUMB ──────────────────────── */
      .page-breadcrumb {
        font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--text-muted);
        margin-bottom: 2px;
      }
      .heading_div h2 { margin: 0; }

      /* ── SUBSCRIPTION OVERVIEW HEADER ─────────── */
      .subscription-overview-bar {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 10px;
        padding: 16px 24px 0;
        margin-bottom: 4px;
      }
      .subscription-overview-left {
        display: flex; align-items: center; gap: 10px;
      }
      .subscription-overview-title {
        font-size: 15px; font-weight: 700; color: var(--text-primary);
      }
      .subscription-status-badge {
        font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
        padding: 3px 9px; border-radius: 50px;
        background: #C5D0D8; color: #0A141C; border: 1px solid #8FA4B1;
      }
      .subscription-overview-actions {
        display: flex; align-items: center; gap: 8px;
      }

      /* ── TABLE SECTION ────────────────────────── */
      .table-section {
        margin: 0 24px 20px;
        background: var(--surface);
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
      }
      .table-section-header {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
        background: var(--green-50);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .table-section-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
      }
      .table-section table {
        width: 100%;
        border-collapse: collapse;
      }
      .table-section thead th {
        background: var(--green-50);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        padding: 10px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border);
      }
      .table-section tbody td {
        padding: 12px 16px;
        font-size: 13px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }
      .table-section tbody tr:last-child td { border-bottom: none; }
      .table-section tbody tr:hover { background: var(--green-50); }
      .api-key-mono {
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        color: var(--text-primary);
      }
      .copy-key-btn {
        background: none;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        font-family: 'Manrope', sans-serif;
      }
      .copy-key-btn:hover { background: var(--green-50); color: var(--green-500); border-color: var(--green-500); }
      #tableContainer { overflow-x: auto; }

      /* ── STAT CARD ICONS ─────────────────────── */
      .stat-card-header {
        display: flex; align-items: flex-start; justify-content: space-between;
        margin-bottom: 8px;
      }
      .stat-card-icon-box {
        width: 32px; height: 32px; border-radius: var(--radius-sm);
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; flex-shrink: 0;
      }
      .stat-card-icon-box.green { background: var(--green-50); color: var(--green-600); }
      .stat-card-icon-box.amber { background: #fff7ed; color: #d97706; }
      .stat-card-icon-box.blue { background: #eff6ff; color: #2563eb; }
      .stat-card-icon-box.violet { background: #f5f3ff; color: #7c3aed; }

      /* ── API KEYS + MORE FEATURES SIDE BY SIDE ── */
      .api-and-features-row {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin: 0 24px 24px;
      }
      .api-and-features-row .table-section {
        flex: 2;
        margin: 0;
        min-width: 0;
      }
      .api-and-features-row .more-features-section {
        flex: 1;
        margin: 0;
        min-width: 260px;
        max-width: 340px;
      }

      /* ── MORE FEATURES ────────────────────────── */
      .more-features-section {
        margin: 0 24px 24px;
      }
      .more-features-header {
        display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px;
      }
      .more-features-header-dots {
        font-size: 18px; color: var(--text-muted); margin-top: 1px; letter-spacing: -2px;
      }
      .more-features-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 2px;
      }
      .more-features-subtitle {
        font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; padding-left: 28px;
      }
      #more_features_cards {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .feature-card {
        flex: 1;
        background: var(--surface);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 20px 20px 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
      }
      .feature-card-top {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 10px; margin-bottom: 10px;
      }
      .feature-card-top-left { display: flex; align-items: center; gap: 10px; }
      .feature-card-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        background: var(--green-50);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: var(--green-500);
        flex-shrink: 0;
      }
      .feature-card-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
      }
      .feature-card-desc {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.6;
        flex: 1;
        margin-bottom: 14px;
      }
      .feature-card-footer {
        display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap;
      }
      .feature-card-price {
        font-size: 12px; color: var(--text-secondary); font-weight: 600;
      }
      .feature-card-status-badge {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 11px; font-weight: 600; padding: 3px 8px;
        border-radius: 50px; background: var(--green-50);
        border: 1px solid var(--green-200); color: var(--green-700);
      }
      .feature-card-status-badge.not-subscribed {
        background: #f9fafb; border-color: var(--border); color: var(--text-muted);
      }
      .feature-card-input-row {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .feature-card-input {
        flex: 1;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        font-size: 13px;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-primary);
        background: var(--bg);
        outline: none;
        transition: border-color 0.2s;
      }
      .feature-card-input:focus { border-color: var(--green-500); }
      .feature-card-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        background: var(--green-500);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        font-family: 'Manrope', sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.15s;
        white-space: nowrap;
      }
      .feature-card-cta:hover { opacity: 0.88; }
      .feature-card-link {
        font-size: 12px;
        color: var(--green-500);
        word-break: break-all;
        font-family: 'JetBrains Mono', monospace;
      }

      /* ── AFFILIATE PROMO BAR (white card, matches React prototype) ── */
      .promo-bar {
        margin: 40px 24px 20px;
        background: var(--surface);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 20px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
      }
      .promo-bar-left h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
      }
      .promo-bar-left p {
        font-size: 13px;
        color: var(--text-secondary);
      }
      .promo-bar-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .promo-code-chip {
        font-family: 'JetBrains Mono', monospace;
        font-size: 15px;
        font-weight: 700;
        color: var(--green-700);
        background: var(--green-50);
        border: 1.5px solid var(--green-200);
        border-radius: var(--radius-sm);
        padding: 8px 16px;
        letter-spacing: 0.08em;
        min-width: 100px;
        text-align: center;
      }
      /* Keep old .promo-code-badge as alias */
      .promo-code-badge { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-sm); }
      .promo-action-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
        font-family: 'Manrope', sans-serif;
      }
      .promo-action-btn:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-600); }
      /* Keep old .promo-copy-btn as alias */
      .promo-copy-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 14px; background: var(--surface);
        border: 1.5px solid var(--border); border-radius: var(--radius-sm);
        color: var(--text-secondary); font-family: 'Manrope', sans-serif;
        font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
      }
      .promo-copy-btn:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-600); }
      .promo-payment-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: var(--green-500);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        font-family: 'Manrope', sans-serif;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: opacity 0.15s;
      }
      .promo-payment-btn:hover { opacity: 0.88; }

      /* ── AFFILIATE METRIC CARDS ───────────────── */
      .affiliate-metrics-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 20px 0;
        margin: 0 24px;
      }

      /* ── SUBSCRIPTIONS TABLE (Affiliate) ──────── */
      .subscriptions-section {
        margin: 0 24px 24px;
        background: var(--surface);
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
      }
      .subscriptions-header {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
      }
      .subscriptions-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
      }
      .subscriptions-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      #subscriptionsTable thead th {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        background: var(--green-50);
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
      }
      #subscriptionsTable tbody td {
        padding: 12px 16px;
        font-size: 13px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }
      #subscriptionsTable tbody tr:last-child td { border-bottom: none; }
      #subscriptionsTable tbody tr:hover { background: var(--green-50); }

      /* ── LEGACY CLASS COMPAT (used by api_partner.js) ── */
      .metric-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
      .card-value { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--text-primary); }
      /* Transaction History — remove outer wrapper border (double-border fix) */
      #withdrawldashboard_main .table-responsive { border: none !important; }
      .payment_header { padding: 10px 16px; }
      .payment_header_value { font-size: 18px; font-weight: 700; color: var(--green-500); font-family: 'JetBrains Mono', monospace; }
      #info-payment { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-500); color: #fff; font-size: 14px; font-weight: 700; margin-left: 6px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.18); transition: background 0.15s; }
      #info-payment:hover { background: var(--green-600, #16a34a); }
      .tooltip_payment { display: none; position: fixed; background: rgba(20,20,20,0.95); color: #fff; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.5; white-space: normal; min-width: 220px; max-width: 300px; z-index: 9999; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
      #info-payment.tooltip-active .tooltip_payment { display: block; }
      .active-nav { background: rgba(255,255,255,0.13) !important; color: #fff !important; border-left-color: var(--green-400) !important; font-weight: 700 !important; }
      .popup { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
      .popup[style*="block"] { display: flex !important; }
      .popup-content { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; max-width: 500px; width: 90%; position: relative; max-height: 85vh; overflow-y: auto; }
      .method { padding: 14px; border-bottom: 1px solid var(--border); }

      /* ── HAMBURGER (mobile) ───────────────────── */
      #hamburger_btn {
        display: none;
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 970;
        background: var(--green-800);
        border: none;
        border-radius: var(--radius-sm);
        width: 40px;
        height: 40px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        padding: 0;
      }
      #hamburger_btn span {
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s;
      }
      #sidebar_overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 940;
      }
      body.sidebar-open #sidebar_overlay { display: block; }

      /* ── BUY CREDITS (legacy styles carried forward) ── */
      .buy-credits-header { padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }


      /* ── MISCELLANEOUS LEGACY ─────────────────── */
      #iframeContainer_contactus_frame {
        display: none;
        position: fixed;
        background: #fff;
        z-index: 1000;
        width: 30%;
        height: 90vh;
        top: 5vh;
        left: 35%;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
      }
      #close_contact_us_frame_home {
        position: absolute;
        top: 8px; right: 12px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        z-index: 10;
        color: var(--text-secondary);
      }
      .hover_shadow { box-shadow: var(--shadow-lg); }
      #snackbar { z-index: 9999; }

      /* ── Report preview overlay — always full-screen ── */
      #jeevn_div {
        left: 0 !important;
        width: 100% !important;
        top: 0 !important;
        height: 100% !important;
        position: fixed !important;
        z-index: 99999 !important;
      }
      #jeevn_div #reportdiv {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
      }
      #jeevn_div #jeevn_page {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
      }

      /* ── RESPONSIVE ───────────────────────────── */
      @media (max-width: 768px) {
        #hamburger_btn { display: flex; }
        #dashboard_sidebar, .sb-sidebar {
          position: fixed;
          top: 0; left: 0;
          transform: translateX(-100%);
          z-index: 960;
          height: 100%;
        }
        body.sidebar-open #dashboard_sidebar,
        body.sidebar-open .sb-sidebar { transform: translateX(0); }
        #search_partner_admin { display: none !important; }
        .dashboard-main { margin-left: 0 !important; overflow-y: visible !important; height: auto !important; }
        .stat-cards-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
        .stat-cards-grid-3 { grid-template-columns: 1fr !important; gap: 12px; padding: 12px 12px 0; }
        .usage-row { padding: 10px 14px 8px; }
        .usage-row-value { font-size: 13px; }
        .usage-row-right { font-size: 11px; }
        .stat-card-label { font-size: 9px; }
        .usage-row-meta { gap: 4px; }
        .usage-row-left { gap: 8px; }
        .affiliate-metrics-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; margin: 0 12px; }
        #more_features_cards { flex-direction: column; }
        /* Dashboard: allow full scroll on mobile */
        html, body { height: auto !important; min-height: 100vh; overflow-y: auto !important; overflow-x: hidden !important; background: #fff !important; }
        #ManagementDashboard_page_div { height: auto !important; min-height: 100vh; overflow: visible !important; }
        #user_logined_div { position: relative !important; height: auto !important; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
        /* Login page fills full viewport on mobile */
        #user_not_logined_div { height: 100vh !important; overflow: hidden !important; background: #fff; }
        .login-outer-row { flex-direction: column; height: 100%; min-height: 0; }
        .login-left { width: 100%; flex: 0 0 auto; min-height: 0; padding: 22px 24px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
        .login-left-logo { margin-bottom: 4px; flex-shrink: 0; }
        .login-left-logo img { height: 48px; width: auto; }
        .login-left-badge { display: inline-flex; font-size: 13px; padding: 6px 16px; }
        .login-left-image { display: none; }
        .login-left-text { display: none; }
        .login-left-tutorial { display: none; }
        .login-right {
          flex: 1;
          min-height: 0;
          overflow: hidden;
          padding: 20px;
          justify-content: center;
          width: 100%;
        }
        .login-right-header { margin-bottom: 10px; }
        .login-right-header h1 { font-size: 20px; }
        .login-right-header p { font-size: 12px; margin-bottom: 0; }
        .login-input-group { margin-bottom: 8px; }
        .login-input-wrap input { padding: 8px 0; font-size: 14px; }
        .login-forgot { margin-top: 4px; font-size: 12px; }
        .login-cta-btn { margin-top: 12px; margin-bottom: 8px; padding: 11px; }
        .login-divider { margin: 4px 0 8px; }
        .login-social-btn { padding: 9px; margin-bottom: 7px; font-size: 13px; }
        .login-contact-link { margin-top: 10px; }
        .heading_div { padding: 10px 14px !important; }
        .stat-cards-grid { padding: 12px; }
        #iframeContainer_contactus_frame { width: 92%; left: 4%; }
        .promo-bar { margin: 16px 12px 24px; flex-direction: column; align-items: flex-start; }
        .promo-bar-right { width: 100% !important; flex-direction: column !important; align-items: flex-start !important; }
        #coupen_exist_div { width: 100% !important; }
        #coupen_exist_div .promo-code-chip { width: 100% !important; }
        #affliliate_main_div .row:not(.g-4) { margin-left: 0 !important; margin-right: 0 !important; }
        #affliliate_main_div .col-md-3 { margin-bottom: 12px; }
        .promo-section { flex-direction: column; }
        .api-and-features-row { flex-direction: column; margin: 20px 12px 20px; }
        .api-and-features-row .table-section,
        .api-and-features-row .more-features-section { margin: 0; min-width: 0; max-width: 100%; }
        .more-features-section { margin: 0 12px 20px; }
        .table-section { margin: 0 12px 20px; }
        .subscriptions-section { margin: 0 12px 20px; }
        #recentSubscriptionsWrapper {
          margin: 0 12px 24px !important;
          border: 1.5px solid #D6DFE6 !important;
          border-radius: 10px !important;
          overflow: visible !important;
        }
        /* Card header: right padding so download button isn't clipped */
        #recentSubscriptionsWrapper .card-header {
          padding-right: 10px !important;
          border-radius: 10px 10px 0 0 !important;
          overflow: hidden !important;
        }
        /* Horizontal scroll for wide table — clip inside the rounded wrapper */
        #recentSubscriptionsWrapper .table-responsive {
          overflow-x: auto !important;
          overflow-y: auto !important;
          max-height: 300px !important;
          -webkit-overflow-scrolling: touch !important;
          width: 100% !important;
          border-radius: 0 0 10px 10px !important;
        }
        #subscriptionsTable {
          min-width: 600px !important;
          width: 100% !important;
        }
        #subscriptionsTable thead th {
          font-size: 12px !important;
          padding: 10px 12px !important;
          white-space: nowrap !important;
        }
        #subscriptionsTable tbody td {
          font-size: 12px !important;
          padding: 10px 12px !important;
          white-space: nowrap !important;
        }
        /* Bottom padding so page scroll reaches below the table */
        #affliliate_main_div { padding-bottom: 32px !important; }
        /* Keep all 3 buttons in one row */
        #recentSubscriptionsWrapper .card-header { flex-wrap: nowrap !important; gap: 4px !important; padding-right: 6px !important; }
        #recentSubscriptionsWrapper .card-header > div {
          display: flex !important;
          flex-wrap: nowrap !important;
          align-items: center !important;
          gap: 2px !important;
        }
        #recentSubscriptionsWrapper .filter-btn {
          padding: 6px 7px !important;
          margin-right: 0 !important;
          font-size: 13px !important;
          color: #333 !important;
          white-space: nowrap !important;
        }
        #recentSubscriptionsWrapper .filter-btn img,
        #recentSubscriptionsWrapper #refreshBtn img,
        #recentSubscriptionsWrapper #downloaddata img { width: 15px !important; margin-right: 0 !important; }
        #recentSubscriptionsWrapper #refreshBtn,
        #recentSubscriptionsWrapper #downloaddata { padding: 6px 7px !important; }
        #recentSubscriptionsWrapper h6 { font-size: 16px !important; padding: 8px 0 !important; white-space: nowrap !important; }
        .affiliate-metrics-grid { padding: 12px 0; margin: 0 12px; }
        /* Affiliate metric cards — padding on mobile */
        #affliliate_main_div .row.g-4 { margin: 0 !important; }
        #affliliate_main_div .col-md-3 { padding: 0 12px !important; margin-bottom: 14px !important; }
        #affliliate_main_div .metric-card { border-radius: 12px !important; }
        .metric-card .card-body { flex-wrap: wrap; gap: 8px; padding: 16px !important; }
        .metric-card .card-body h3 { font-size: 13px !important; font-weight: 700 !important; color: var(--text-secondary) !important; margin-bottom: 4px !important; display: block !important; }
        .metric-card .card-title img { width: 36px !important; height: 36px !important; object-fit: contain; }
        .metric-card .card-value { font-size: 18px !important; }
        /* m-* mobile layout helpers */
        .m-topbar {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 16px; background: var(--surface);
          border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100;
        }
        .m-topbar-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
        .m-action-bar {
          display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap;
          background: var(--surface); border-bottom: 1px solid var(--border);
        }
        .m-content { padding: 12px 16px; }
        .m-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
        .subscription-overview-bar { padding: 12px 14px 0; }
        .page-breadcrumb { font-size: 10px; }
        /* SweetAlert2 popups — bigger and centered on mobile */
        .swal2-container { align-items: center !important; justify-content: center !important; }
        .swal2-popup { width: 86vw !important; max-width: 340px !important; padding: 28px 22px !important; margin: auto !important; }
        .swal2-title { font-size: 22px !important; line-height: 1.3 !important; }
        .swal2-html-container { font-size: 14px !important; line-height: 1.6 !important; color: #444 !important; }
        .swal2-confirm, .swal2-cancel { font-size: 15px !important; padding: 10px 24px !important; }
        .swal2-icon { width: 56px !important; height: 56px !important; margin: 0 auto 16px !important; }
        .swal2-icon .swal2-icon-content { font-size: 32px !important; }
        .swal2-loader { width: 48px !important; height: 48px !important; }

        /* ── White Label / Branding popup ── */
        #whiteLabelForm {
          top: 0 !important;
          left: 0 !important;
          overflow: hidden !important;
        }
        #whiteLabelForm > div {
          width: 100% !important;
          height: 100% !important;
          padding: 0 !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch !important;
          align-items: flex-start !important;
          justify-content: flex-start !important;
        }
        #configForm {
          width: 100% !important;
          min-width: 0 !important;
          padding: 16px 14px 20px !important;
          border-radius: 0 !important;
          min-height: 100vh !important;
          box-sizing: border-box !important;
        }
        .reports-grid-row {
          grid-template-columns: 1fr 80px 95px !important;
          gap: 8px !important;
          align-items: flex-start !important;
        }
        #configForm .reports-grid-row:first-of-type {
          margin-bottom: 0 !important;
        }
        #configForm .reports-grid-row > div:nth-child(2),
        #configForm .reports-grid-row > div:nth-child(3) {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
        }
        #configForm input[type="text"],
        #configForm input[type="url"] {
          font-size: 13px !important;
        }

        /* ── Report preview div (jeevn_div) — mobile extras ── */
        #jeevn_div { top: 0 !important; }
        #jeevn_div #reportdiv { padding: 0 !important; overflow: hidden !important; }
        #jeevn_div #jeevn_page {
          top: 10px !important;
          left: 10px !important;
          width: calc(100% - 20px) !important;
          height: calc(100% - 20px) !important;
        }
        #jeevn_div #close_jeevn_div {
          position: absolute !important;
          top: 8px !important;
          right: 8px !important;
          z-index: 10 !important;
          padding: 6px 12px !important;
          font-size: 16px !important;
        }

        /* ── Affiliate payments popup ─────────────────────────── */
        #affliliate_payment_div {
          left: 0 !important;
          width: 100% !important;
          padding: 48px 12px 12px !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          -webkit-overflow-scrolling: touch !important;
        }
        /* X close button: pinned top-right */
        #closePaymentDiv {
          position: absolute !important;
          top: 10px !important;
          right: 10px !important;
          width: 36px !important;
          height: 36px !important;
          font-size: 16px !important;
          cursor: pointer !important;
          z-index: 10 !important;
          flex-shrink: 0 !important;
        }
        /* Collapse the 5%-wide X-button wrapper so it doesn't take up column space */
        #affliliate_payment_div > div:first-child > div:last-child {
          width: 0 !important;
          height: 0 !important;
          overflow: visible !important;
          padding: 0 !important;
          margin: 0 !important;
          min-width: 0 !important;
        }
        /* Outer stats card: full width, reduced margin */
        #affliliate_payment_div > div:first-child > div:first-child {
          width: 100% !important;
          margin: 0 0 12px 0 !important;
        }
        /* Outer flex wrapper: reset desktop margin on mobile */
        #affliliate_payment_div > div:first-child { margin: 0 !important; }
        /* Row containing 3 cards + Transaction History: stack vertically */
        #affliliate_payment_div > div:first-child > div:first-child > div {
          flex-direction: column !important;
          margin-left: 8px !important;
          gap: 8px !important;
        }
        /* 3 earnings cards: column layout, full width */
        #affliliate_payment_div > div:first-child > div:first-child > div > div[style*="width: 80%"] {
          flex-direction: column !important;
          width: 100% !important;
          gap: 8px !important;
        }
        /* Each earnings card full width */
        #affliliate_payment_div .payment_header { width: 100% !important; padding: 8px 10px !important; }
        /* Earnings label (e.g. "Total Earnings") — make visible */
        #affliliate_payment_div .payment_header_head {
          font-size: 13px !important;
          font-weight: 600 !important;
          color: #444 !important;
          display: flex !important;
          align-items: center !important;
          gap: 4px !important;
          margin-bottom: 4px !important;
        }
        /* Earnings value */
        #affliliate_payment_div .payment_header_value { font-size: 16px !important; }
        /* "i" info button — scale down on mobile */
        #affliliate_payment_div #info-payment {
          width: 16px !important;
          height: 16px !important;
          font-size: 11px !important;
          flex-shrink: 0 !important;
        }
        /* Transaction History button: full width, below earnings cards */
        #withdrawalrequestsList { width: 100% !important; margin-top: 4px !important; }
        /* Outer card wrapper */
        #affliliate_payment_div > div:first-child > div:first-child { margin: 0 0 8px 0 !important; width: 100% !important; }
        /* Transaction History section: restore full-width margin on mobile */
        #withdrawldashboard_main { margin: 20px !important; }
        /* Header row: title + Request Withdrawal button stack vertically */
        #affliliate_payment_div > div[style*="justify-content: space-between"] {
          flex-direction: column !important;
          padding: 12px 0 !important;
          gap: 12px !important;
        }
        #affliliate_payment_div h1#header_card_title { font-size: 18px !important; }
        /* Withdrawal note text — make readable */
        #affliliate_payment_div .withdrawal-note { font-size: 14px !important; color: #444 !important; line-height: 1.6 !important; margin-top: 8px !important; }
        #affliliate_payment_div #RequestForWithdrawal { width: 100% !important; padding: 14px !important; font-size: 16px !important; background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; cursor: not-allowed !important; opacity: 0.75 !important; }
        #affliliate_payment_div #RequestForWithdrawal.withdrawal-enabled { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; cursor: pointer !important; opacity: 1 !important; }
        /* Transaction History button — bigger and more visible */
        #withdrawalrequestsList {
          width: 100% !important;
          padding: 12px 16px !important;
          font-size: 15px !important;
          margin-top: 12px !important;
          border-radius: 6px !important;
          display: block !important;
        }
        /* Main container */
        #main_conatiner { padding: 14px !important; height: auto !important; }
        #container_withaccount { padding: 14px !important; }
        /* Withdrawal methods: no max-height collapse on mobile */
        #withdrawal_methods { max-height: none !important; overflow-y: visible !important; padding: 12px !important; }
        /* Bank/PayPal method rows: full width */
        #bank_method, #affliliate_payment_div [id$="_method"] { width: 100% !important; }
        /* Bank/PayPal option name text */
        #affliliate_payment_div .method-details p strong { font-size: 16px !important; color: #111 !important; }
        #affliliate_payment_div .method-details p { font-size: 13px !important; color: #555 !important; margin: 3px 0 !important; }
        #affliliate_payment_div .method-icon { width: auto !important; height: auto !important; max-width: 60px !important; max-height: 36px !important; object-fit: contain; }
        #affliliate_payment_div [id^="delete_details_"] img { width: 20px !important; height: 20px !important; }

        /* ── Saved payment method rows ── */
        #saved_methods .payment-method {
          flex-wrap: wrap !important;
          padding: 12px 8px !important;
          gap: 6px !important;
        }
        #saved_methods .payment-method > div {
          margin-left: 6px !important;
          width: calc(100% - 36px) !important;
        }
        /* outer flex row inside detailsDiv: stack vertically */
        #saved_methods .payment-method > div > div {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 6px !important;
        }
        /* left section (email + date + delete): horizontal wrap */
        #saved_methods .payment-method > div > div > div:first-child {
          flex-wrap: wrap !important;
          align-items: center !important;
          gap: 4px 10px !important;
        }
        /* all <p> inside rows */
        #saved_methods .payment-method p {
          font-size: 12px !important;
          margin: 0 !important;
        }
        /* PayPal / Bank logos */
        #saved_methods .payment-method .method-icon {
          width: 60px !important;
          height: auto !important;
        }
        /* Add New Payment Method row */
        #container_withaccount { padding: 8px !important; }
        #container_withaccount > div { padding: 10px !important; }
        #add_method_plus_icon {
          display: flex !important;
          visibility: visible !important;
          opacity: 1 !important;
          flex-shrink: 0 !important;
          margin-right: 10px !important;
          color: #037f85 !important;
          border-color: #037f85 !important;
          font-size: 18px !important;
          font-weight: 700 !important;
          line-height: 1 !important;
          width: 24px !important;
          height: 24px !important;
        }
        #add_method_new {
          color: #037f85 !important;
          font-size: 14px !important;
          font-weight: 600 !important;
          display: inline !important;
          visibility: visible !important;
          opacity: 1 !important;
        }

        /* keep delete icon small — higher specificity to beat .method-icon rule */
        #saved_methods .payment-method [id^="delete_details_"] img {
          width: 18px !important;
          height: 18px !important;
        }

        /* ── Bank + PayPal form fields ── */
        #collect_details_bank,
        #paypal_details {
          flex-direction: column !important;
          align-items: stretch !important;
          padding: 8px 0 !important;
        }
        #collect_details_bank .form-group,
        #paypal_details .form-group {
          width: 100% !important;
          margin-bottom: 16px !important;
          box-sizing: border-box !important;
        }
        #collect_details_bank label,
        #paypal_details label {
          font-size: 13px !important;
          font-weight: 600 !important;
          margin-bottom: 6px !important;
          display: block !important;
        }
        #collect_details_bank input,
        #collect_details_bank select,
        #paypal_details input,
        #paypal_details select {
          width: 100% !important;
          max-width: 100% !important;
          padding: 8px 10px !important;
          font-size: 13px !important;
          border: 1px solid #ced4da !important;
          border-radius: 6px !important;
          box-sizing: border-box !important;
        }
        #collect_details_bank select#country {
          font-size: 13px !important;
          width: 170px !important;
          max-width: 170px !important;
          padding: 8px 10px !important;
        }
        #submit_details_bank,
        #submit_details_paypal {
          width: 100% !important;
          padding: 14px !important;
          font-size: 16px !important;
          margin-top: 8px !important;
          border-radius: 6px !important;
        }
        #container_withaccount { padding: 12px !important; }
        /* ── Transaction History section ── */
        #withdrawldashboard_main {
          height: auto !important;
          margin: 8px !important;
          flex-direction: column !important;
        }
        /* Header row: stack "Transaction History" title and buttons */
        #withdrawldashboard_main > div:first-child {
          flex-direction: column !important;
          gap: 10px !important;
          align-items: flex-start !important;
          margin-bottom: 12px !important;
        }
        #withdrawldashboard_main h3 { font-size: 17px !important; }
        /* Header action buttons: stack them */
        #withdrawldashboard_main > div:first-child > div {
          display: flex !important;
          gap: 8px !important;
          width: 100% !important;
        }
        #download_alltransactions,
        #back_to_mainpage {
          flex: 1 !important;
          padding: 10px !important;
          font-size: 14px !important;
          text-align: center !important;
          border-radius: 6px !important;
        }
        /* Table: horizontal scroll */
        #withdrawldashboard_main .table-responsive {
          max-height: none !important;
          overflow-x: auto !important;
          -webkit-overflow-scrolling: touch !important;
          border-radius: 6px !important;
        }
        #paymentTable {
          width: 100% !important;
          min-width: 480px !important;
          margin: 0 !important;
          padding: 8px !important;
          font-size: 13px !important;
        }
        #paymentTable th, #paymentTable td {
          padding: 10px 8px !important;
          white-space: nowrap !important;
          font-size: 13px !important;
        }
      }
      @media (max-width: 480px) {
        .stat-cards-grid { grid-template-columns: 1fr; }
        .affiliate-metrics-grid { grid-template-columns: 1fr; }
        .m-stats-grid { grid-template-columns: 1fr; }
      }

      /* ── Affiliate payments popup — Desktop redesign (> 768px) ── */
      @media (min-width: 769px) {
        /* Align earnings cards with promo-bar: explicit width so right edge is constrained.
           width: calc(100% - 24px) + margin-left: 12px → card content starts/ends at 24px from parent edge,
           matching .promo-bar margin: 40px 24px 20px. */
        #affliliate_main_div .row.g-4 { margin-left: 12px !important; margin-right: 0 !important; width: calc(100% - 24px) !important; }

        /* Payment method rows */
        #affliliate_payment_div .method {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 20px;
          border-bottom: 1px solid #e8edf2;
          cursor: pointer;
          transition: background 0.15s;
        }
        #affliliate_payment_div .method:hover { background: #f8fafb; }
        #affliliate_payment_div .method-details { display: flex; align-items: center; gap: 14px; }
        #affliliate_payment_div .method-details > div { padding-left: 0; }
        #affliliate_payment_div .method-details p strong { font-size: 15px; color: #111; }
        #affliliate_payment_div .method-details p { font-size: 13px; color: #666; margin: 2px 0; }
        #affliliate_payment_div .method-icon { height: 36px; width: auto; object-fit: contain; }
        #paypal_method .method-icon { height: 28px; width: auto; }

        /* Bank form — 3-column grid */
        #collect_details_bank {
          display: grid !important;
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 16px 20px !important;
          padding: 20px !important;
          width: 100% !important;
          justify-content: unset !important;
        }
        #collect_details_bank .form-group {
          margin-bottom: 0 !important;
          width: auto !important;
        }
        #collect_details_bank label {
          font-size: 13px !important;
          font-weight: 600 !important;
          color: #374151 !important;
          margin-bottom: 6px !important;
          display: block !important;
        }
        #collect_details_bank input,
        #collect_details_bank select {
          width: 100% !important;
          padding: 9px 12px !important;
          font-size: 14px !important;
          border: 1px solid #d1d5db !important;
          border-radius: 6px !important;
          color: #1f2937 !important;
          background: #fff !important;
          transition: border-color 0.15s, box-shadow 0.15s;
          box-sizing: border-box !important;
        }
        #collect_details_bank input:focus,
        #collect_details_bank select:focus {
          border-color: #037f85 !important;
          box-shadow: 0 0 0 3px rgba(3,127,133,0.12) !important;
          outline: none !important;
        }
        /* Country select — reduced size, beat Bootstrap .form-control */
        #collect_details_bank select#country {
          padding: 5px 10px !important;
          height: 34px !important;
          font-size: 13px !important;
          color: #1f2937 !important;
          border: 1px solid #d1d5db !important;
          border-radius: 6px !important;
          width: 100% !important;
          background-color: #fff !important;
          appearance: auto !important;
          -webkit-appearance: auto !important;
        }
        /* Ensure the grid container doesn't clip the native select dropdown */
        #collect_details_bank {
          overflow: visible !important;
          padding-bottom: 8px !important;
        }
        #withdrawal_methods {
          overflow: visible !important;
        }
        #main_conatiner {
          overflow: visible !important;
          height: auto !important;
        }
        /* Submit button spans full 3-column width */
        #submit_details_bank {
          grid-column: 1 / -1 !important;
          padding: 12px !important;
          font-size: 15px !important;
          font-weight: 600 !important;
          border-radius: 6px !important;
          letter-spacing: 0.3px !important;
          margin-top: 4px !important;
        }

        /* PayPal form — centred single column, max-width (NO display — JS controls show/hide) */
        #paypal_details {
          flex-direction: column !important;
          align-items: center !important;
          padding: 20px !important;
          gap: 16px !important;
          width: 100% !important;
        }
        #paypal_details .form-group {
          width: 50% !important;
          margin-bottom: 0 !important;
        }
        #paypal_details label {
          font-size: 13px !important;
          font-weight: 600 !important;
          color: #374151 !important;
          margin-bottom: 6px !important;
          display: block !important;
        }
        #paypal_details input,
        #paypal_details select {
          width: 100% !important;
          padding: 9px 12px !important;
          font-size: 14px !important;
          border: 1px solid #d1d5db !important;
          border-radius: 6px !important;
          box-sizing: border-box !important;
        }
        #paypal_details input:focus,
        #paypal_details select:focus {
          border-color: #037f85 !important;
          box-shadow: 0 0 0 3px rgba(3,127,133,0.12) !important;
          outline: none !important;
        }
        #submit_details_paypal {
          width: 50% !important;
          padding: 12px !important;
          font-size: 15px !important;
          font-weight: 600 !important;
          border-radius: 6px !important;
        }

        /* Withdrawal methods container */
        #withdrawal_methods {
          padding: 8px 16px !important;
          border: 1px solid #e8edf2 !important;
          border-radius: 10px !important;
          max-height: none !important;
          overflow-y: visible !important;
        }

        /* ── Affiliate Payments — Desktop Buttons ── */
        #RequestForWithdrawal {
          display: inline-flex !important;
          align-items: center !important;
          gap: 8px !important;
          padding: 8px 18px !important;
          font-size: 13px !important;
          font-weight: 600 !important;
          letter-spacing: 0.3px !important;
          color: #fff !important;
          background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
          border: none !important;
          border-radius: 8px !important;
          cursor: not-allowed !important;
          opacity: 0.75 !important;
          box-shadow: none !important;
          transition: box-shadow 0.2s, transform 0.15s, opacity 0.2s !important;
          white-space: nowrap !important;
        }
        #RequestForWithdrawal.withdrawal-enabled {
          background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
          cursor: pointer !important;
          opacity: 1 !important;
          box-shadow: 0 2px 8px rgba(22,163,74,0.3) !important;
        }
        #RequestForWithdrawal.withdrawal-enabled:hover {
          box-shadow: 0 4px 14px rgba(22,163,74,0.45) !important;
          transform: translateY(-1px) !important;
        }
        #RequestForWithdrawal::before {
          content: "↑" !important;
          font-size: 15px !important;
          line-height: 1 !important;
        }

        #withdrawalrequestsList {
          display: inline-flex !important;
          align-items: center !important;
          gap: 8px !important;
          padding: 11px 22px !important;
          font-size: 14px !important;
          font-weight: 600 !important;
          letter-spacing: 0.3px !important;
          color: #fff !important;
          background: linear-gradient(135deg, #f24822 0%, #ff7c25 100%) !important;
          border: none !important;
          border-radius: 8px !important;
          cursor: pointer !important;
          box-shadow: 0 2px 8px rgba(242,72,34,0.25) !important;
          transition: box-shadow 0.2s, transform 0.15s !important;
          white-space: nowrap !important;
          width: auto !important;
          margin-top: 0 !important;
        }
        #withdrawalrequestsList:hover {
          box-shadow: 0 4px 14px rgba(242,72,34,0.38) !important;
          transform: translateY(-1px) !important;
        }
        #withdrawalrequestsList::before {
          content: "☰" !important;
          font-size: 14px !important;
          line-height: 1 !important;
        }
      }