/* =====================================================================
   PickleMix — NEW DESIGN for the sign-in pages
   login.html · reset-password.html · upgrade.html · checkout.html
   ---------------------------------------------------------------------
   Every rule is scoped to html.ui-v2 (set by js/ui-v2-auth.js only when
   the new design is on for this device), so Classic is untouched.
   Works with or without styles/auth.css. Look only: no logic changes.
   ===================================================================== */

/* ---------- tokens (same as the dashboard) ---------- */
html.ui-v2 {
    --v2-accent: #1565d8; --v2-accent-hover: #1259bf; --v2-accent-text: #1565d8; --v2-on-accent: #fff;
    --v2-accent-soft: #e5eefb; --v2-accent-ring: #8db3ec;
    --v2-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --v2-radius: 16px;
}
html.ui-v2[data-v2-theme="light"] {
    color-scheme: light;
    --v2-bg: #f3f5f9; --v2-surface: #ffffff; --v2-surface-2: #f7f9fc; --v2-soft: #eef2f7;
    --v2-border: #e2e7ef; --v2-border-strong: #cfd7e3;
    --v2-text: #14202e; --v2-muted: #566476; --v2-faint: #8693a3;
    --v2-free: #1f7a33; --v2-free-bg: #e7f6ea;
    --v2-info: #1d5fd1; --v2-info-bg: #e9f1ff;
    --v2-warn: #8a5a00; --v2-warn-bg: #fff3d1;
    --v2-danger: #c0352b; --v2-danger-bg: #fdecea;
    --v2-shadow: 0 1px 2px rgba(20, 32, 46, .06), 0 8px 24px rgba(20, 32, 46, .07);
    --v2-shadow-lg: 0 24px 60px rgba(20, 32, 46, .22);
    --v2-overlay: rgba(15, 23, 34, .55);
}
html.ui-v2[data-v2-theme="dark"] {
    color-scheme: dark;
    --v2-bg: #0d1218; --v2-surface: #151c25; --v2-surface-2: #1a232e; --v2-soft: #1f2934;
    --v2-border: #283340; --v2-border-strong: #364353;
    --v2-text: #e7ecf2; --v2-muted: #9aa8b8; --v2-faint: #6f7d8d;
    --v2-free: #5fd07a; --v2-free-bg: #143020;
    --v2-info: #7fb0ff; --v2-info-bg: #16264a;
    --v2-warn: #ffd166; --v2-warn-bg: #3a2d0c;
    --v2-danger: #ff8a80; --v2-danger-bg: #3a1714;
    --v2-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --v2-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --v2-overlay: rgba(0, 0, 0, .7);
}

/* ---------- page base ---------- */
html.ui-v2, html.ui-v2 body { background: var(--v2-bg) !important; }
html.ui-v2 body { color: var(--v2-text); font-family: var(--v2-font) !important; -webkit-font-smoothing: antialiased; }
html.ui-v2 body *:not(i) { font-family: var(--v2-font) !important; } /* icons (<i>) keep Font Awesome */
html.ui-v2 a { color: var(--v2-accent-text); }

/* wordmark replaces the old icon + text logo (they stay in the page, hidden) */
html.ui-v2 .logo { display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important; margin: 0 !important; }
html.ui-v2 .logo > i, html.ui-v2 .logo > h1 { display: none !important; }
html.ui-v2 .v2-auth-logo { display: block; height: 44px; width: auto; }
html.ui-v2 .v2-auth-brand { display: flex; justify-content: center; margin: 0 0 18px; }

/* light / dark button */
html.ui-v2 .v2-auth-theme {
    position: fixed; top: 16px; right: 16px; z-index: 9999; width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-border); box-shadow: var(--v2-shadow);
}
html.ui-v2 .v2-auth-theme:hover { border-color: var(--v2-accent); color: var(--v2-accent-text); }
html:not(.ui-v2) .v2-auth-theme { display: none !important; }

/* ---------- shared form parts ---------- */
html.ui-v2 .form-group { margin: 0 0 14px !important; text-align: left; }
html.ui-v2 .form-group > label, html.ui-v2 .reset-card label {
    display: flex !important; align-items: center; gap: 7px; margin: 0 0 6px !important;
    font-size: 13px !important; font-weight: 700 !important; color: var(--v2-text) !important;
}
html.ui-v2 .form-group > label i { color: var(--v2-muted); font-size: 12px; }
html.ui-v2 input[type="email"], html.ui-v2 input[type="password"], html.ui-v2 input[type="text"] {
    width: 100% !important; height: 46px; box-sizing: border-box; padding: 0 14px !important; margin: 0 !important;
    font-size: 15px !important; color: var(--v2-text) !important; background: var(--v2-surface) !important;
    border: 1px solid var(--v2-border-strong) !important; border-radius: 12px !important; box-shadow: none !important; outline: none;
}
html.ui-v2 input::placeholder { color: var(--v2-faint) !important; }
html.ui-v2 input[type="email"]:focus, html.ui-v2 input[type="password"]:focus, html.ui-v2 input[type="text"]:focus {
    border-color: var(--v2-accent) !important; box-shadow: 0 0 0 3px var(--v2-accent-soft) !important;
}
html.ui-v2 input[type="checkbox"] { accent-color: var(--v2-accent); width: 16px; height: 16px; margin: 0; }
html.ui-v2 .password-input { position: relative !important; margin: 0 !important; }
html.ui-v2 .password-input input { padding-right: 46px !important; }
html.ui-v2 .toggle-password {
    position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 34px; height: 34px; border-radius: 9px; border: 0 !important; background: transparent !important;
    color: var(--v2-muted) !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important;
}
html.ui-v2 .toggle-password:hover { background: var(--v2-soft) !important; color: var(--v2-text) !important; }

/* primary + secondary buttons on all four pages */
html.ui-v2 .btn-primary, html.ui-v2 .upgrade-btn, html.ui-v2 .btn-upgrade, html.ui-v2 #resetBtn {
    width: 100%; min-height: 48px; padding: 12px 18px !important; border: 0 !important; border-radius: 12px !important;
    background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; box-shadow: none !important;
    font-size: 15px !important; font-weight: 800 !important; display: flex !important; align-items: center; justify-content: center; gap: 9px;
    cursor: pointer; transform: none !important; transition: background .15s ease;
}
html.ui-v2 .btn-primary:hover:not(:disabled), html.ui-v2 .upgrade-btn:hover:not(:disabled),
html.ui-v2 .btn-upgrade:hover:not(:disabled), html.ui-v2 #resetBtn:hover:not(:disabled) { background: var(--v2-accent-hover) !important; }
html.ui-v2 .btn-primary:disabled, html.ui-v2 .upgrade-btn:disabled, html.ui-v2 .btn-upgrade:disabled, html.ui-v2 #resetBtn:disabled { opacity: .5; cursor: not-allowed; }
html.ui-v2 .btn-secondary, html.ui-v2 .back-btn, html.ui-v2 .btn-close-modal {
    min-height: 44px; padding: 10px 16px !important; border-radius: 12px !important; box-shadow: none !important; transform: none !important;
    background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important;
    font-size: 14px !important; font-weight: 700 !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
}
html.ui-v2 .btn-secondary:hover, html.ui-v2 .back-btn:hover, html.ui-v2 .btn-close-modal:hover { border-color: var(--v2-accent) !important; color: var(--v2-accent-text) !important; }

/* messages (scripts still set the text and show/hide them) */
html.ui-v2 .error-message, html.ui-v2 .info-message {
    border-radius: 12px !important; padding: 10px 14px !important; font-size: 13.5px !important; font-weight: 600 !important; text-align: center;
    background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; border: 1px solid transparent !important;
}
html.ui-v2 .error-message.success { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; }
html.ui-v2 .info-message { background: var(--v2-info-bg) !important; color: var(--v2-info) !important; }

/* =====================================================================
   LOGIN
   ===================================================================== */
html.ui-v2 body:has(#loginForm) { margin: 0 !important; padding: 0 !important; min-height: 100vh; }
html.ui-v2 .auth-container:has(#loginForm) {
    min-height: 100vh; min-height: 100dvh; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--v2-bg) !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important;
    box-shadow: none !important; border-radius: 0 !important;
}
/* left: brand panel */
html.ui-v2 .auth-left {
    position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: center; gap: 30px;
    padding: 56px clamp(32px, 6vw, 88px) !important; margin: 0 !important; width: auto !important; min-height: 0 !important;
    background: var(--v2-accent-soft) !important; color: var(--v2-text) !important; border-right: 1px solid var(--v2-border);
    text-align: left !important;
}
html.ui-v2 .auth-left::after { /* quiet court lines */
    content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
    border: 2px solid var(--v2-accent-ring); opacity: .5; pointer-events: none;
}
html.ui-v2 .auth-left::before {
    content: ""; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px; border-radius: 50%;
    border: 2px solid var(--v2-accent-ring); opacity: .35; pointer-events: none;
}
html.ui-v2 .logo-container { text-align: left !important; margin: 0 !important; }
html.ui-v2 .logo-container .logo { justify-content: flex-start; }
html.ui-v2 .auth-left .v2-auth-logo { height: 56px; }
html.ui-v2 .auth-left .tagline {
    margin: 14px 0 0 !important; font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.2; font-weight: 800 !important;
    color: var(--v2-text) !important; opacity: 1 !important; letter-spacing: -.01em;
}
html.ui-v2 .auth-left .features { display: flex !important; flex-direction: column; gap: 14px; margin: 0 !important; padding: 0 !important; }
html.ui-v2 .auth-left .feature {
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center;
    padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: left !important;
}
html.ui-v2 .auth-left .feature i {
    grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--v2-surface) !important; color: var(--v2-accent-text) !important; font-size: 16px !important; margin: 0 !important; border: 1px solid var(--v2-border);
}
html.ui-v2 .auth-left .feature i.fa-court::before { content: "\f45d"; } /* that icon name doesn't exist in Font Awesome; show the table-tennis icon instead of a blank box */
html.ui-v2 .auth-left .feature h3 { margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 .auth-left .feature p { margin: 0 !important; font-size: 13.5px !important; color: var(--v2-muted) !important; opacity: 1 !important; }
html.ui-v2 .auth-left .trial-badge {
    align-self: flex-start; display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important;
    padding: 8px 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 800 !important;
    background: var(--v2-surface) !important; color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent-ring) !important; box-shadow: none !important;
}
/* right: form */
html.ui-v2 .auth-right {
    display: flex !important; align-items: center; justify-content: center; padding: 48px 32px !important; margin: 0 !important;
    width: auto !important; min-height: 0 !important; background: var(--v2-bg) !important; box-shadow: none !important;
}
html.ui-v2 .auth-form-container {
    width: 100%; max-width: 400px !important; margin: 0 !important; padding: 32px 30px !important;
    background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow) !important;
}
html.ui-v2 .form-header { text-align: left !important; margin: 0 0 22px !important; }
html.ui-v2 .form-header h2 { margin: 0 0 4px !important; font-size: 24px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 .form-header p { margin: 0 !important; font-size: 14px !important; color: var(--v2-muted) !important; }
html.ui-v2 .auth-form { margin: 0 !important; }
html.ui-v2 .form-options { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 18px !important; font-size: 13.5px; }
html.ui-v2 .form-options .checkbox { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; color: var(--v2-text) !important; cursor: pointer; font-weight: 600; }
html.ui-v2 .forgot-password { color: var(--v2-accent-text) !important; font-weight: 700; text-decoration: none; }
html.ui-v2 .forgot-password:hover { text-decoration: underline; }
html.ui-v2 .auth-form-container .error-message { margin: 14px 0 0 !important; }

@media (max-width: 900px) {
    html.ui-v2 .auth-container:has(#loginForm) { grid-template-columns: 1fr; }
    html.ui-v2 .auth-left { padding: 28px 24px 22px !important; gap: 12px; border-right: 0; border-bottom: 1px solid var(--v2-border); }
    html.ui-v2 .auth-left .features, html.ui-v2 .auth-left::before, html.ui-v2 .auth-left::after { display: none !important; }
    html.ui-v2 .auth-left .tagline { font-size: 20px !important; margin-top: 8px !important; }
    html.ui-v2 .auth-left .v2-auth-logo { height: 40px; }
    html.ui-v2 .auth-right { padding: 24px 16px 40px !important; align-items: flex-start; }
    html.ui-v2 .auth-form-container { padding: 24px 20px !important; }
}

/* ---------- login pop-ups: trial ended + password reset ---------- */
html.ui-v2 .modal { background: var(--v2-overlay) !important; }
html.ui-v2 .modal-content {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border);
    border-radius: 18px !important; box-shadow: var(--v2-shadow-lg) !important; max-width: 480px !important; animation: none !important;
}
html.ui-v2 .modal-header {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; text-align: left !important;
    padding: 22px 24px 14px !important; border-bottom: 1px solid var(--v2-border); display: flex; align-items: center; gap: 12px;
}
html.ui-v2 .modal-header i {
    display: inline-flex !important; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; margin: 0 !important;
    border-radius: 12px; font-size: 17px !important; background: var(--v2-accent-soft); color: var(--v2-accent-text);
}
html.ui-v2 .modal-header h2, html.ui-v2 .modal-header h3 { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 .modal-body { padding: 18px 24px 22px !important; }
html.ui-v2 .modal-body p { color: var(--v2-muted) !important; font-size: 14px !important; text-align: left !important; }
html.ui-v2 .modal-body::-webkit-scrollbar-track { background: transparent; }
html.ui-v2 .modal-body::-webkit-scrollbar-thumb { background: var(--v2-border-strong); }
html.ui-v2 #trialEndedModal .features-list { display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: flex-start !important; text-align: left !important; margin: 0 0 14px !important; }
html.ui-v2 #trialEndedModal .features-list li {
    padding: 4px 10px !important; border-radius: 999px; font-size: 12.5px !important; font-weight: 600;
    background: var(--v2-free-bg); color: var(--v2-free) !important;
}
html.ui-v2 #trialEndedModal .features-list li i { color: inherit !important; margin-right: 4px !important; }
html.ui-v2 .subscription-options { margin: 14px 0 !important; gap: 10px !important; }
html.ui-v2 .subscription-option {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1.5px solid var(--v2-border) !important;
    border-radius: 14px !important; padding: 14px 16px !important; margin: 0 !important; box-shadow: none !important; transform: none !important;
}
html.ui-v2 .subscription-option:hover { border-color: var(--v2-accent-ring) !important; }
html.ui-v2 .subscription-option.selected { border-color: var(--v2-accent) !important; background: var(--v2-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--v2-accent) !important; }
html.ui-v2 .subscription-option h3 { color: var(--v2-text) !important; font-size: 16px !important; font-weight: 800 !important; }
html.ui-v2 .subscription-option div[style*="font-size: 20px"] { color: var(--v2-text) !important; font-size: 19px !important; }
html.ui-v2 .subscription-option div[style*="font-size: 14px"] { color: var(--v2-free) !important; font-size: 13px !important; }
html.ui-v2 .subscription-option span[style*="color: #666"], html.ui-v2 .subscription-option div[style*="color: #6c757d"] { color: var(--v2-muted) !important; }
html.ui-v2 .subscription-option div[style*="font-size: 20px"] span { color: var(--v2-muted) !important; }
html.ui-v2 .subscription-option span[style*="border-radius: 12px"] { background: var(--v2-soft) !important; color: var(--v2-text) !important; }
html.ui-v2 .subscription-option > div[style*="position: absolute"] { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; }
html.ui-v2 .modal-actions { margin-top: 16px !important; gap: 8px !important; }
html.ui-v2 .info-note { color: var(--v2-muted) !important; font-style: normal !important; font-size: 12px !important; }

/* =====================================================================
   RESET PASSWORD
   ===================================================================== */
html.ui-v2 .auth-container:has(.reset-card) {
    min-height: 100vh; min-height: 100dvh; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    background: var(--v2-bg) !important; padding: 24px 16px !important;
}
html.ui-v2 .reset-card {
    max-width: 420px !important; padding: 30px 28px !important; text-align: left !important;
    background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow) !important;
}
html.ui-v2 .reset-icon {
    width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px !important; margin: 0 0 14px !important; background: var(--v2-accent-soft); color: var(--v2-accent-text) !important;
}
html.ui-v2 .reset-card h1 { font-size: 24px !important; font-weight: 800 !important; color: var(--v2-text) !important; margin: 0 0 4px !important; }
html.ui-v2 .reset-card > p { color: var(--v2-muted) !important; font-size: 14px !important; margin: 0 0 22px !important; }
html.ui-v2 .password-strength { font-size: 12.5px !important; font-weight: 700; padding: 6px 2px 0 !important; margin: 0 !important; }
html.ui-v2 .strength-weak { color: var(--v2-danger) !important; }
html.ui-v2 .strength-medium { color: var(--v2-warn) !important; }
html.ui-v2 .strength-strong { color: var(--v2-free) !important; }
html.ui-v2 .reset-card .error-message { margin: 0 0 14px !important; }
html.ui-v2 .back-to-login { display: inline-flex !important; align-items: center; gap: 7px; margin-top: 18px !important; color: var(--v2-accent-text) !important; font-weight: 700; font-size: 14px; }

/* =====================================================================
   UPGRADE
   ===================================================================== */
html.ui-v2 body:has(.upgrade-card) { padding: 32px 20px !important; align-items: flex-start !important; }
html.ui-v2 body:has(.upgrade-card) .container { max-width: 1080px !important; margin: 0 auto; }
html.ui-v2 .header { margin: 0 0 18px !important; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
html.ui-v2 .header .tagline { color: var(--v2-muted) !important; font-size: 14px !important; font-weight: 600; margin: 0 !important; }
html.ui-v2 .upgrade-card, html.ui-v2 .checkout-card {
    background: var(--v2-surface) !important; color: var(--v2-text); border: 1px solid var(--v2-border);
    border-radius: 20px !important; box-shadow: var(--v2-shadow) !important;
}
html.ui-v2 .upgrade-card .card-header, html.ui-v2 .checkout-card .card-header {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; text-align: left !important;
    display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center;
    padding: 22px 28px !important; border-bottom: 1px solid var(--v2-border);
}
html.ui-v2 .card-header > i {
    grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 20px !important; margin: 0 !important; background: var(--v2-accent-soft); color: var(--v2-accent-text);
}
html.ui-v2 .card-header h2 { grid-column: 2; grid-row: 1; align-self: end; margin: 0 !important; font-size: 21px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 .card-header p { grid-column: 2; grid-row: 2; align-self: start; margin: 0 !important; color: var(--v2-muted) !important; opacity: 1 !important; font-size: 14px; }
html.ui-v2 .user-email {
    grid-column: 3; grid-row: 1 / 3; margin: 0 !important; padding: 7px 14px !important; border-radius: 999px !important;
    background: var(--v2-soft) !important; color: var(--v2-text) !important; font-size: 13px !important; font-weight: 700;
}
html.ui-v2 .upgrade-card .error-message, html.ui-v2 .upgrade-card .info-message { margin: 14px 28px 0 !important; }
html.ui-v2 .upgrade-card .features { padding: 16px 28px !important; border-bottom: 1px solid var(--v2-border) !important; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; text-align: left !important; }
html.ui-v2 .upgrade-card .features h3 { margin: 0 !important; font-size: 14px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 .upgrade-card .features-list { gap: 6px !important; justify-content: flex-start !important; }
html.ui-v2 .feature-item { padding: 5px 11px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600; background: var(--v2-free-bg) !important; color: var(--v2-free) !important; }
html.ui-v2 .feature-item i { color: inherit !important; }
html.ui-v2 .upgrade-card .features > p { flex-basis: 100%; margin: 0 !important; color: var(--v2-muted) !important; font-style: normal !important; font-size: 12.5px !important; }
html.ui-v2 .plan-options { padding: 22px 28px !important; gap: 16px !important; }
html.ui-v2 .plan-option {
    background: var(--v2-surface) !important; border: 1.5px solid var(--v2-border) !important; border-radius: 16px !important;
    padding: 20px !important; box-shadow: none !important; transform: none !important; color: var(--v2-text);
}
html.ui-v2 .plan-option:hover { border-color: var(--v2-accent-ring) !important; }
html.ui-v2 .plan-option.selected { border-color: var(--v2-accent) !important; border-width: 1.5px !important; background: var(--v2-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--v2-accent) !important; }
html.ui-v2 .popular-badge { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; font-weight: 800 !important; }
html.ui-v2 .court-badge { margin: 0 0 14px !important; padding: 8px !important; border-radius: 10px !important; background: var(--v2-soft) !important; color: var(--v2-text) !important; }
html.ui-v2 .court-badge.pro-max { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; }
html.ui-v2 .court-badge.pro { background: var(--v2-info-bg) !important; color: var(--v2-info) !important; }
html.ui-v2 .court-icons { font-size: 16px !important; }
html.ui-v2 .court-limit { font-size: 14px !important; }
html.ui-v2 .plan-header { margin: 0 0 6px !important; }
html.ui-v2 .plan-header h3 { font-size: 20px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 .plan-price { color: var(--v2-text) !important; font-size: 26px !important; font-weight: 800 !important; }
html.ui-v2 .plan-price span, html.ui-v2 .plan-yearly-price span { color: var(--v2-muted) !important; }
html.ui-v2 .plan-yearly-price { color: var(--v2-free) !important; font-size: 14px !important; }
html.ui-v2 .plan-savings { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; font-size: 12.5px !important; margin: 4px 0 0 !important; }
html.ui-v2 .plan-features { margin: 12px 0 !important; }
html.ui-v2 .plan-features li { color: var(--v2-text) !important; border-bottom-color: var(--v2-border) !important; padding: 6px 0 !important; font-size: 13.5px !important; }
html.ui-v2 .plan-features i.fa-check { color: var(--v2-free) !important; }
html.ui-v2 .plan-option span[style*="font-size: 12px"] { color: var(--v2-muted) !important; }
html.ui-v2 .action-buttons { padding: 0 28px 22px !important; flex-direction: row !important; gap: 10px !important; }
html.ui-v2 .action-buttons .upgrade-btn { flex: 2 1 0; }
html.ui-v2 .action-buttons .back-btn { flex: 1 1 0; }
html.ui-v2 .upgrade-card .footer { border-top: 1px solid var(--v2-border) !important; color: var(--v2-muted) !important; padding: 14px 28px !important; }
html.ui-v2 .footer-links a { color: var(--v2-accent-text) !important; font-weight: 600; }
html.ui-v2 .footer p[style] { color: var(--v2-faint) !important; }
@media (max-width: 768px) {
    html.ui-v2 .upgrade-card .card-header, html.ui-v2 .checkout-card .card-header { grid-template-columns: 40px minmax(0, 1fr); padding: 18px !important; }
    html.ui-v2 .user-email { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 8px !important; }
    html.ui-v2 .action-buttons { flex-direction: column !important; padding: 0 18px 18px !important; }
    html.ui-v2 .plan-options { padding: 16px 18px !important; }
}

/* =====================================================================
   CHECKOUT — two columns on a laptop (summary left, GCash right)
   ===================================================================== */
html.ui-v2 body:has(.checkout-card) { padding: 28px 20px !important; align-items: flex-start !important; }
html.ui-v2 body:has(.checkout-card) .container { max-width: 1040px !important; margin: 0 auto; }
@media (min-width: 900px) {
    html.ui-v2 .checkout-card {
        display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-areas: "head head" "user pay" "plan pay" "method pay" "actions pay" "done done";
        grid-template-rows: auto auto auto auto 1fr auto;
        align-items: start;
    }
    html.ui-v2 .checkout-card > .card-header { grid-area: head; }
    html.ui-v2 .checkout-card > .user-info { grid-area: user; }
    html.ui-v2 .checkout-card > .plan-details { grid-area: plan; }
    html.ui-v2 .checkout-card > .payment-methods { grid-area: method; }
    html.ui-v2 .checkout-card > .actions { grid-area: actions; }
    html.ui-v2 .checkout-card > .gcash-info { grid-area: pay; align-self: stretch; margin: 0 !important; border-radius: 0 0 20px 0 !important; border: 0 !important; border-left: 1px solid var(--v2-border) !important; }
    html.ui-v2 .checkout-card > .success-message { grid-area: done; }
}
html.ui-v2 .user-info { padding: 18px 28px !important; background: transparent !important; border-bottom: 1px solid var(--v2-border) !important; }
html.ui-v2 .info-row { margin: 0 0 8px !important; gap: 12px; }
html.ui-v2 .info-row:last-child { margin: 0 !important; }
html.ui-v2 .info-label { color: var(--v2-muted) !important; font-size: 13.5px !important; }
html.ui-v2 .info-value { color: var(--v2-text) !important; font-weight: 700 !important; text-align: right; word-break: break-all; }
html.ui-v2 .plan-details, html.ui-v2 .payment-methods { padding: 18px 28px !important; border-bottom: 1px solid var(--v2-border) !important; }
html.ui-v2 .plan-details h3, html.ui-v2 .payment-methods h3, html.ui-v2 .gcash-info > h3 { font-size: 15px !important; font-weight: 800 !important; color: var(--v2-text) !important; margin: 0 0 10px !important; }
html.ui-v2 .plan-summary { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border); border-radius: 12px !important; padding: 14px 16px !important; }
html.ui-v2 .plan-item { color: var(--v2-text); font-size: 14px; margin: 0 0 6px !important; }
html.ui-v2 .plan-item.total { border-top: 1px solid var(--v2-border) !important; margin: 10px 0 0 !important; padding-top: 10px !important; color: var(--v2-text) !important; font-size: 17px !important; }
html.ui-v2 .plan-item.total span:last-child { color: var(--v2-accent-text); }
html.ui-v2 .payment-option {
    background: var(--v2-surface) !important; border: 1.5px solid var(--v2-border) !important; border-radius: 14px !important;
    padding: 14px !important; margin: 0 !important; transform: none !important; box-shadow: none !important;
}
html.ui-v2 .payment-option.selected { border-color: var(--v2-accent) !important; background: var(--v2-accent-soft) !important; }
html.ui-v2 .payment-icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: var(--v2-surface) !important; color: var(--v2-accent-text) !important; font-size: 20px !important; border: 1px solid var(--v2-border); }
html.ui-v2 .payment-details h4 { color: var(--v2-text) !important; font-weight: 800; font-size: 15px !important; }
html.ui-v2 .payment-details p { color: var(--v2-muted) !important; font-size: 13px !important; }
html.ui-v2 .gcash-info { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; padding: 22px 26px !important; margin: 0 28px 18px !important; border-radius: 14px !important; color: var(--v2-text); }
html.ui-v2 .gcash-info .instructions { color: var(--v2-muted) !important; font-size: 13.5px !important; }
html.ui-v2 .gcash-info .instructions p[style*="color: #333"] { color: var(--v2-text) !important; }
html.ui-v2 .gcash-info .instructions p[style*="color: #6c757d"], html.ui-v2 .gcash-info .instructions p[style*="font-size: 13px"] { color: var(--v2-muted) !important; }
html.ui-v2 .qr-code-container { background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; border-radius: 14px !important; padding: 16px !important; margin: 14px 0 !important; }
html.ui-v2 .qr-code { width: 210px !important; height: 210px !important; background: #fff !important; box-shadow: none !important; border: 1px solid var(--v2-border); transform: none !important; }
html.ui-v2 .qr-code-container > p { color: var(--v2-muted) !important; font-size: 12.5px; }
html.ui-v2 .qr-instructions { background: var(--v2-warn-bg) !important; border: 0 !important; color: var(--v2-warn) !important; border-radius: 12px !important; font-size: 13px !important; }
html.ui-v2 .gcash-number { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1.5px solid var(--v2-accent) !important; border-radius: 12px !important; margin: 10px 0 !important; padding: 12px !important; }
html.ui-v2 .account-name { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; border-radius: 10px !important; margin: 0 0 10px !important; }
html.ui-v2 .upload-section { background: var(--v2-surface) !important; border: 1.5px dashed var(--v2-accent-ring) !important; border-radius: 14px !important; padding: 16px !important; margin: 16px 0 !important; }
html.ui-v2 .upload-section h3 { color: var(--v2-text) !important; font-size: 15px !important; font-weight: 800; margin: 0 0 10px !important; }
html.ui-v2 #uploadBtn { flex-direction: column; padding: 16px !important; margin: 0 0 10px !important; }
html.ui-v2 #uploadBtn i { color: var(--v2-accent-text); margin: 0 0 4px !important; }
html.ui-v2 #uploadBtn div[style] { color: var(--v2-muted) !important; font-weight: 500; }
html.ui-v2 .preview-container { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; border-radius: 10px !important; }
html.ui-v2 .preview-icon { color: var(--v2-free) !important; }
html.ui-v2 .preview-name { color: var(--v2-text) !important; }
html.ui-v2 .preview-size, html.ui-v2 .file-requirements { color: var(--v2-muted) !important; }
html.ui-v2 .remove-file { background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; border-radius: 8px !important; transform: none !important; }
html.ui-v2 .gcash-info > .instructions[style*="border-top"] { border-top-color: var(--v2-border) !important; }
html.ui-v2 .gcash-info p[style*="background: #fff3cd"] { background: var(--v2-warn-bg) !important; color: var(--v2-warn) !important; border-radius: 10px !important; }
html.ui-v2 .actions { padding: 18px 28px 24px !important; gap: 10px !important; }
html.ui-v2 .btn-info { background: var(--v2-info-bg) !important; color: var(--v2-info) !important; border: 1px solid var(--v2-info) !important; border-radius: 12px !important; transform: none !important; }
html.ui-v2 .success-message { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; border: 0 !important; border-radius: 14px !important; margin: 20px 28px !important; }
html.ui-v2 .success-message h3 { color: var(--v2-free) !important; }
html.ui-v2 .success-message i { color: var(--v2-free) !important; }
html.ui-v2 .success-message p { color: var(--v2-text); }
html.ui-v2 .success-message p[style*="background: white"] { background: var(--v2-surface) !important; }
html.ui-v2 .success-message p[style*="color: #6c757d"] { color: var(--v2-muted) !important; }
html.ui-v2 .qr-modal { background: var(--v2-overlay) !important; }
html.ui-v2 .qr-modal-content { background: var(--v2-surface) !important; border: 1px solid var(--v2-border); border-radius: 18px !important; }
html.ui-v2 .close-modal { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; transform: none !important; }
html.ui-v2 .modal-instructions { color: var(--v2-muted) !important; }
html.ui-v2 .loading { background: var(--v2-overlay) !important; }
@media (max-width: 899px) {
    html.ui-v2 body:has(.checkout-card) .container { max-width: 520px !important; }
    html.ui-v2 .user-info, html.ui-v2 .plan-details, html.ui-v2 .payment-methods, html.ui-v2 .actions { padding-left: 18px !important; padding-right: 18px !important; }
    html.ui-v2 .gcash-info { margin: 0 18px 16px !important; padding: 18px !important; }
}

/* ---------- works together with styles/auth.css ---------- */
html.ui-v2 .auth-left .features { flex: none !important; }
html.ui-v2 .auth-left .feature:hover { transform: none !important; background: none !important; }
html.ui-v2 .auth-left .trial-badge { margin-top: 0 !important; }
html.ui-v2 .auth-form .btn-primary { margin: 0 !important; }
html.ui-v2 .auth-container:has(.reset-card) {
    max-width: none !important; width: 100% !important; background: var(--v2-bg) !important;
    box-shadow: none !important; border-radius: 0 !important; overflow: visible !important;
}
html.ui-v2 .reset-card .btn-primary { margin: 0 !important; }
html.ui-v2 .modal-content { animation: none !important; }
html.ui-v2 .modal-content { padding: 0 !important; }
html.ui-v2 .modal-header { margin: 0 !important; }
html.ui-v2 .btn-upgrade { margin: 0 !important; }