/* ============================================================
                   ROOT & RESET — with light/dark themes
                   ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-primary: #0b0f1a;
            --bg-secondary: #111927;
            --bg-card: #162033;
            --bg-card-hover: #1e2d4a;
            --text-primary: #f0f4ff;
            --text-secondary: #8ba0c9;
            --accent-gold: #f5b342;
            --accent-gold-dark: #d4942e;
            --accent-green: #2ecc71;
            --accent-red: #e74c3c;
            --accent-blue: #3b82f6;
            --accent-purple: #8b5cf6;
            --accent-cyan: #22d3ee;
            --accent-pink: #ec4899;
            --accent-orange: #f59e0b;
            --border-color: #1e314a;
            --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            --radius: 16px;
            --radius-sm: 10px;
            --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --font: 'Inter', sans-serif;
            --header-height: 68px;
            --brand-gradient: linear-gradient(135deg, #f5b342, #ffd700);
            --auth-cyan: #22d3ee;
            --auth-blue: #3b82f6;
            --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
            --scrollbar-track: var(--bg-secondary);
            --scrollbar-thumb: var(--accent-gold);
            --input-bg: var(--bg-primary);
            --input-border: var(--border-color);
            --input-text: var(--text-primary);
            --toast-bg: var(--bg-card);
            --toast-border: var(--accent-green);
            --badge-bg: rgba(245, 179, 66, 0.12);
            --badge-border: var(--accent-gold);
            --hover-bg: rgba(245, 179, 66, 0.08);
            --faq-border: var(--border-color);
        }

        [data-theme="light"] {
            --bg-primary: #f3f6f8;
            --bg-secondary: #fbfcfd;
            --bg-card: #ffffff;
            --bg-card-hover: #eef3f5;
            --text-primary: #172033;
            --text-secondary: #5a6678;
            --accent-gold: #f38020;
            --accent-gold-dark: #d86f16;
            --accent-blue: #0051c3;
            --border-color: #d6dde5;
            --shadow: 0 10px 28px rgba(31, 55, 73, 0.08);
            --card-shadow: 0 4px 18px rgba(31, 41, 55, 0.06);
            --scrollbar-track: #eef1f4;
            --scrollbar-thumb: #b7bec7;
            --input-bg: #ffffff;
            --input-border: #cfd5dc;
            --input-text: #1f2937;
            --toast-bg: #ffffff;
            --toast-border: var(--accent-green);
            --badge-bg: rgba(243, 128, 32, 0.10);
            --badge-border: var(--accent-gold);
            --hover-bg: rgba(243, 128, 32, 0.06);
            --faq-border: #dfe3e8;
            --brand-gradient: linear-gradient(135deg, #f38020, #fb923c);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font);
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
            transition: background 0.3s ease, color 0.3s ease;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 10px;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .flex-col {
            display: flex;
            flex-direction: column;
        }
        .gap-1 {
            gap: 10px;
        }
        .gap-2 {
            gap: 20px;
        }
        .gap-3 {
            gap: 30px;
        }
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
        }
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .text-center {
            text-align: center;
        }
        .text-gold {
            color: var(--accent-gold);
        }
        .text-green {
            color: var(--accent-green);
        }
        .text-red {
            color: var(--accent-red);
        }
        .text-muted {
            color: var(--text-secondary);
        }
        .text-sm {
            font-size: 0.85rem;
        }
        .text-xs {
            font-size: 0.75rem;
        }
        .fw-700 {
            font-weight: 700;
        }
        .fw-800 {
            font-weight: 800;
        }
        .fw-900 {
            font-weight: 900;
        }
        .mt-1 {
            margin-top: 10px;
        }
        .mt-2 {
            margin-top: 20px;
        }
        .mt-3 {
            margin-top: 36px;
        }
        .mb-1 {
            margin-bottom: 10px;
        }
        .mb-2 {
            margin-bottom: 20px;
        }
        .mb-3 {
            margin-bottom: 36px;
        }

        /* ============================================================
                   BUTTONS
                   ============================================================ */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            transition: var(--transition);
            border: 2px solid transparent;
            background: var(--bg-card);
            color: var(--text-primary);
            cursor: pointer;
            font-family: var(--font);
            text-decoration: none;
            white-space: nowrap;
        }
        .btn-primary {
            background: var(--accent-gold);
            color: #0b0f1a;
            border-color: var(--accent-gold);
        }
        .btn-primary:hover {
            background: #ffd700;
            border-color: #ffd700;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(245, 179, 66, 0.3);
        }
        .btn[aria-busy="true"] {
            cursor: wait;
            opacity: 0.82;
            transform: none !important;
        }
        .btn[aria-busy="true"] .fa-spinner {
            margin-right: 6px;
        }
        .btn-secondary {
            background: transparent;
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
        .btn-secondary:hover {
            background: var(--accent-gold);
            color: #0b0f1a;
            transform: translateY(-2px);
        }
        .btn-green {
            background: var(--accent-green);
            color: #0b0f1a;
        }
        .btn-green:hover {
            background: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(46, 204, 113, 0.25);
        }
        .btn-red {
            background: var(--accent-red);
            color: #fff;
        }
        .btn-red:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }
        .btn-blue {
            background: var(--accent-blue);
            color: #fff;
        }
        .btn-blue:hover {
            background: #2563eb;
            transform: translateY(-2px);
        }
        .btn-purple {
            background: var(--accent-purple);
            color: #fff;
        }
        .btn-purple:hover {
            background: #7c3aed;
            transform: translateY(-2px);
        }
        .btn-cyan {
            background: var(--accent-cyan);
            color: #0b0f1a;
        }
        .btn-cyan:hover {
            background: #06b6d4;
            transform: translateY(-2px);
        }
        .btn-outline {
            background: transparent;
            border-color: var(--border-color);
            color: var(--text-secondary);
        }
        .btn-outline:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
            transform: translateY(-2px);
        }
        .btn-sm {
            padding: 8px 18px;
            font-size: 0.8rem;
        }
        .btn-lg {
            padding: 16px 40px;
            font-size: 1.1rem;
        }
        .btn-block {
            width: 100%;
            justify-content: center;
        }
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        /* ============================================================
                   CARDS
                   ============================================================ */
        .card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 24px;
            border: 1px solid var(--border-color);
            transition: var(--transition);
        }
        .card:hover {
            border-color: var(--accent-gold);
            box-shadow: var(--shadow);
        }
        .card-glow {
            background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
            border-color: var(--accent-gold);
        }

        /* ============================================================
                   FORM ELEMENTS
                   ============================================================ */
        .form-group {
            margin-bottom: 16px;
        }
        .form-group label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--text-secondary);
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 16px;
            border-radius: 10px;
            background: var(--input-bg);
            color: var(--input-text);
            border: 1px solid var(--input-border);
            font-family: var(--font);
            font-size: 0.9rem;
            transition: var(--transition);
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent-gold);
            box-shadow: 0 0 0 3px rgba(245, 179, 66, 0.1);
        }
        .form-group textarea {
            min-height: 80px;
            resize: vertical;
        }
        .form-group .helper {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .file-input-wrapper {
            position: relative;
            width: 100%;
        }
        .file-input-wrapper input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .file-input-wrapper .file-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 16px;
            border-radius: 10px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            color: var(--text-secondary);
            transition: var(--transition);
            width: 100%;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .file-input-wrapper .file-label:hover {
            border-color: var(--accent-gold);
            color: var(--text-primary);
        }
        .file-input-wrapper .file-label i {
            color: var(--accent-gold);
        }
        .file-name-display {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 4px;
            word-break: break-all;
        }

        .input-group {
            position: relative;
            width: 100%;
        }
        .input-group input,
        .input-group select,
        .input-group textarea {
            width: 100%;
            padding: 14px 15px;
            background: var(--input-bg);
            border: 2px solid var(--input-border);
            border-radius: 8px;
            color: var(--input-text);
            font-size: 14px;
            outline: none;
            transition: border 0.3s ease, background 0.3s ease;
            font-family: var(--font);
        }
        .input-group input:focus,
        .input-group select:focus,
        .input-group textarea:focus {
            border-color: var(--accent-cyan);
            background: var(--bg-card);
        }
        .input-group input::placeholder,
        .input-group textarea::placeholder {
            color: var(--text-secondary);
            opacity: 0.6;
        }
        .input-group .toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--text-secondary);
            transition: color 0.2s;
            font-size: 1rem;
        }
        .input-group .toggle-password:hover {
            color: var(--text-primary);
        }
        .input-group textarea {
            min-height: 80px;
            resize: vertical;
            padding: 14px 15px;
        }

        /* ============================================================
                   HEADER / NAV — Clean, like Victor.rf.gd
                   ============================================================ */
        header {
            background: var(--bg-primary);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border-color);
            padding: 0 0;
            position: sticky;
            top: 0;
            z-index: 999;
            height: var(--header-height);
            display: flex;
            align-items: center;
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 12px;
            flex-wrap: wrap;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .logo img {
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            border-radius: 10px;
            object-fit: contain;
            display: block;
            background: #ffffff;
            padding: 2px;
            border: 1px solid rgba(255,255,255,0.24);
            box-shadow: 0 4px 14px rgba(0,0,0,0.22);
        }
        .logo span {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ---- NAVIGATION (desktop) ---- */
        nav#mainNav {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }
        nav#mainNav a {
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 0.78rem;
            transition: var(--transition);
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            text-decoration: none;
            white-space: nowrap;
            letter-spacing: 0.01em;
        }
        nav#mainNav a:hover,
        nav#mainNav a.active {
            color: var(--text-primary);
            background: var(--hover-bg);
        }
        nav#mainNav a.active {
            color: var(--accent-gold);
        }

        /* ---- Header actions (right side) ---- */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .nav-user-badge {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-primary);
            background: var(--badge-bg);
            padding: 4px 14px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid var(--badge-border);
            cursor: pointer;
            transition: var(--transition);
        }
        .nav-user-badge:hover {
            background: var(--hover-bg);
        }
        .nav-user-badge i {
            color: var(--accent-gold);
        }

        /* ---- Auth button (header) ---- */
        .auth-header-btn {
            padding: 6px 18px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.8rem;
            border: 2px solid var(--accent-gold);
            background: transparent;
            color: var(--accent-gold);
            cursor: pointer;
            transition: var(--transition);
            font-family: var(--font);
            white-space: nowrap;
        }
        .auth-header-btn:hover {
            background: var(--accent-gold);
            color: #0b0f1a;
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(245, 179, 66, 0.2);
        }
        .auth-header-btn.signed-in {
            background: var(--accent-gold);
            color: #0b0f1a;
            border-color: var(--accent-gold);
        }
        .auth-header-btn.signed-in:hover {
            background: #ffd700;
            border-color: #ffd700;
        }
        .auth-header-btn i {
            margin-right: 4px;
        }

        /* ---- Hamburger ---- */
        .hamburger {
            display: none;
            font-size: 1.4rem;
            color: var(--text-primary);
            background: none;
            padding: 4px 8px;
            cursor: pointer;
            border: none;
            line-height: 1;
        }

        /* ---- Mobile Nav Overlay ---- */
        .mobile-nav-overlay {
            display: none;
            position: fixed;
            top: var(--header-height);
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-primary);
            backdrop-filter: blur(12px);
            z-index: 998;
            overflow-y: auto;
            padding: 20px 24px 40px;
            transition: background 0.3s ease;
        }
        .mobile-nav-overlay.open {
            display: block;
        }
        .mobile-nav-overlay .mobile-nav-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .mobile-nav-overlay .mobile-nav-grid a {
            display: block;
            padding: 12px 14px;
            border-radius: 10px;
            background: var(--bg-card);
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 500;
            transition: var(--transition);
            text-align: center;
            border: 1px solid var(--border-color);
        }
        .mobile-nav-overlay .mobile-nav-grid a:hover,
        .mobile-nav-overlay .mobile-nav-grid a.active {
            background: var(--bg-card-hover);
            color: var(--accent-gold);
            border-color: var(--accent-gold);
        }
        .mobile-nav-overlay .mobile-nav-grid a i {
            margin-right: 6px;
            color: var(--accent-gold);
        }
        .mobile-nav-overlay .mobile-actions {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .mobile-nav-overlay .mobile-actions .btn {
            width: 100%;
            justify-content: center;
        }

        /* ---- Search ---- */
        .header-search {
            display: flex;
            align-items: center;
            background: var(--input-bg);
            border-radius: 50px;
            border: 1px solid var(--input-border);
            padding: 4px 4px 4px 18px;
            transition: var(--transition);
            flex: 1;
            max-width: 280px;
            min-width: 120px;
            position: relative;
        }
        .header-search:focus-within {
            border-color: var(--accent-gold);
            box-shadow: 0 0 0 3px rgba(245, 179, 66, 0.08);
        }
        .header-search input {
            background: transparent;
            border: none;
            outline: none;
            color: var(--input-text);
            font-size: 0.8rem;
            padding: 6px 0;
            flex: 1;
            min-width: 50px;
            font-family: var(--font);
        }
        .header-search input::placeholder {
            color: var(--text-secondary);
        }
        .header-search button {
            background: var(--accent-gold);
            border: none;
            border-radius: 50px;
            color: #0b0f1a;
            padding: 6px 14px;
            font-weight: 600;
            font-size: 0.7rem;
            cursor: pointer;
            transition: var(--transition);
            font-family: var(--font);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .header-search button:hover {
            background: #ffd700;
            transform: scale(1.02);
        }

        .search-results-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            max-height: 400px;
            overflow-y: auto;
            display: none;
            z-index: 100;
            padding: 8px 0;
            box-shadow: var(--shadow);
        }
        .search-results-dropdown.visible {
            display: block;
        }
        .search-results-dropdown .result-item {
            padding: 10px 18px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.85rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }
        .search-results-dropdown .result-item:hover {
            background: var(--bg-card-hover);
        }
        .search-results-dropdown .result-item .badge {
            font-size: 0.65rem;
            padding: 2px 10px;
            border-radius: 20px;
            background: var(--accent-gold);
            color: #0b0f1a;
            font-weight: 700;
        }
        .search-results-dropdown .no-results {
            padding: 20px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        /* ---- Theme toggle & lang ---- */
        .theme-toggle-btn {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-primary);
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            background: var(--bg-card);
        }
        .theme-toggle-btn:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
            transform: rotate(20deg);
        }

        .nav-bell {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            cursor: pointer;
            color: var(--text-primary);
            font-size: 1rem;
            transition: var(--transition);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
        }
        .nav-bell:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-gold);
        }
        .nav-bell .bell-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 8px;
            background: var(--accent-red);
            color: #fff;
            font-size: 0.62rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .nav-bell .bell-badge.hidden {
            display: none;
        }

        /* ============================================================
                   PAGES
                   ============================================================ */
        .page {
            display: none;
            padding: 28px 0 50px;
            animation: fadeUp 0.4s ease;
        }
        .page.active {
            display: block;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(18px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .page-title i {
            color: var(--accent-gold);
        }
        .page-subtitle {
            color: var(--text-secondary);
            margin-bottom: 22px;
            font-size: 1rem;
        }

        /* ============================================================
                   AUTH MODAL
                   ============================================================ */
        .auth-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(12px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .auth-overlay.visible {
            display: flex;
        }

        .login-box {
            position: relative;
            width: 420px;
            max-width: 100%;
            border-radius: 14px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            margin: 0 auto;
            background: var(--bg-card);
            border: none;
        }
        .login-box::before {
            content: "";
            position: absolute;
            width: 150%;
            height: 150%;
            background: conic-gradient(from 0deg, transparent 60%, #35eaff 75%, transparent 85%, #ff007f 100%);
            animation: rotate-border 4s linear infinite;
            top: -25%;
            left: -25%;
            z-index: 1;
            filter: blur(2px);
        }
        .login-box::after {
            content: "";
            position: absolute;
            inset: 3px;
            background: var(--bg-card);
            border-radius: 12px;
            z-index: 2;
        }
        @keyframes rotate-border {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .login-box .content {
            position: relative;
            z-index: 3;
            width: 100%;
            padding: 0 30px 24px;
            display: flex;
            flex-direction: column;
        }

        .login-box .header {
            height: 60px;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            color: var(--text-primary);
            font-weight: 700;
            letter-spacing: 2px;
            cursor: default;
            font-size: 0.95rem;
        }
        .login-box .header i.fa-hourglass-half {
            color: #ff007f;
        }
        .login-box .header i.fa-lock {
            color: var(--text-secondary);
            font-size: 0.9em;
        }

        .login-box .form-container {
            display: flex;
            flex-direction: column;
            gap: 18px;
            opacity: 1;
            transform: none;
            transition: none;
            pointer-events: all;
        }

        .login-box .submit-btn {
            width: 100%;
            padding: 14px;
            background: #35eaff;
            color: #000;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: box-shadow 0.3s ease, transform 0.1s ease;
            font-family: var(--font);
        }
        .login-box .submit-btn:hover:not(:disabled) {
            box-shadow: 0 0 12px rgba(53, 234, 255, 0.5);
        }
        .login-box .submit-btn:active:not(:disabled) {
            transform: scale(0.97);
        }
        .login-box .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .login-box .footer-links {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            font-size: 13px;
        }
        .login-box .footer-links a {
            text-decoration: none;
            font-weight: 600;
        }
        .login-box .forgot-link {
            color: var(--text-secondary);
            transition: color 0.2s;
        }
        .login-box .forgot-link:hover {
            color: var(--text-primary);
        }
        .login-box .signup-link {
            color: #ff007f;
            transition: text-shadow 0.2s;
        }
        .login-box .signup-link:hover {
            text-shadow: 0 0 8px rgba(255, 0, 127, 0.5);
        }

        .login-box .auth-toggle {
            color: var(--text-secondary);
            font-size: 13px;
            text-align: center;
            margin-top: 2px;
        }
        .login-box .auth-toggle a {
            color: #35eaff;
            cursor: pointer;
            font-weight: 600;
        }
        .login-box .auth-toggle a:hover {
            text-decoration: underline;
        }

        .login-box .social-row {
            display: flex;
            gap: 10px;
            margin-top: 2px;
        }
        .login-box .social-row .btn-social {
            flex: 0 1 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 8px;
            min-height: 30px;
            border-radius: 7px;
            font-size: 0.70rem;
            font-weight: 600;
            border: 1px solid var(--border-color);
            transition: var(--transition);
            cursor: pointer;
            font-family: var(--font);
            background: var(--bg-card);
            color: var(--text-primary);
        }
        .login-box .social-row .btn-social:hover {
            transform: translateY(-2px);
            border-color: #35eaff;
        }
        .login-box .social-row .btn-social.google {
            background: #ffffff;
            color: #1a1a1a;
            border-color: #ffffff;
        }
        .login-box .social-row .btn-social.google:hover {
            background: #f0f0f0;
            box-shadow: 0 4px 16px rgba(255, 255, 255, 0.12);
        }
        .login-box .social-row .btn-social.google i {
            color: #ea4335;
        }
        @media (max-width: 520px) {
            .login-box .social-row { gap: 7px; }
            .login-box .social-row .btn-social {
                flex: 1 1 0; min-width: 0; padding: 6px 7px; font-size: 0.68rem;
            }
        }

        .auth-error-msg {
            background: rgba(231, 76, 60, 0.12);
            border: 1px solid var(--accent-red);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 0.8rem;
            color: var(--accent-red);
            text-align: center;
            display: none;
        }
        .auth-error-msg.visible {
            display: block;
        }
        .auth-success-msg {
            background: rgba(46, 204, 113, 0.12);
            border: 1px solid var(--accent-green);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 0.8rem;
            color: var(--accent-green);
            text-align: center;
            display: none;
        }
        .auth-success-msg.visible {
            display: block;
        }

        .verify-email-panel {
            display: none;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 14px;
            width: 100%;
        }
        .verify-email-panel.visible { display: flex; }
        .verify-email-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(46, 204, 113, 0.12);
            border: 1px solid var(--accent-green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: var(--accent-green);
        }
        .verify-email-panel h3 {
            font-size: 1.1rem;
            margin: 0;
        }
        .verify-email-panel p {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
        }
        .verify-email-panel .verify-email-address {
            color: var(--accent-cyan);
            font-weight: 600;
            word-break: break-all;
        }
        .verify-email-resend-note {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .auth-close-btn {
            margin-top: 10px;
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 10px;
            border-radius: 8px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
            font-family: var(--font);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .auth-close-btn:hover {
            border-color: var(--accent-red);
            color: var(--accent-red);
            background: rgba(231, 76, 60, 0.06);
        }

        .social-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            margin: 4px 0 2px;
        }
        .social-divider::before,
        .social-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }

        /* ============================================================
                   TOAST
                   ============================================================ */
        .toast {
            position: fixed;
            bottom: 100px;
            right: 28px;
            background: var(--toast-bg);
            border: 1px solid var(--toast-border);
            border-radius: 12px;
            padding: 14px 22px;
            color: var(--text-primary);
            font-size: 0.9rem;
            box-shadow: var(--shadow);
            z-index: 9998;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s ease;
            pointer-events: none;
            max-width: 420px;
        }
        .toast.show {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .toast i {
            color: var(--accent-green);
            margin-right: 10px;
        }

        /* ============================================================
                   COOKIE BANNER
                   ============================================================ */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border-top: 2px solid var(--accent-gold);
            padding: 16px 24px;
            z-index: 10000;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
            transition: transform 0.5s ease;
        }
        .cookie-banner.hidden {
            transform: translateY(120%);
            pointer-events: none;
        }
        .cookie-banner p {
            font-size: 0.85rem;
            color: var(--text-secondary);
            flex: 1;
            min-width: 180px;
        }
        .cookie-banner .cookie-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* ============================================================
                   LOADING SCREEN — aligned with MELIVAR TICKETS
                   ============================================================ */
        #app-loading {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: grid;
            place-items: center;
            padding: 18px;
            background: rgba(15,23,42,.28);
            backdrop-filter: blur(14px) saturate(115%);
            -webkit-backdrop-filter: blur(14px) saturate(115%);
            color: var(--text-primary);
            transition: opacity .35s ease, visibility .35s ease;
        }
        #app-loading.hidden { opacity:0; visibility:hidden; pointer-events:none; }
        #app-loading .site-loader-card {
            width:min(340px,calc(100vw - 36px));
            padding:28px 24px;
            text-align:center;
            background:var(--bg-card,#fff);
            border:1px solid var(--border-color,#e5e7eb);
            border-radius:18px;
            box-shadow:0 18px 45px rgba(0,0,0,.10);
            display:grid;
            justify-items:center;
            gap:8px;
        }
        #app-loading .loading-logo {
            width:56px;
            height:56px;
            margin:0 auto 4px;
            border-radius:14px;
            object-fit:contain;
            background:#fff;
            padding:3px;
            box-shadow:0 6px 18px rgba(0,0,0,.10);
            animation:pulse-logo 1.8s ease-in-out infinite;
        }
        #app-loading .site-loader-card strong {
            font-size:1rem;
            letter-spacing:.08em;
            color:var(--text-primary,#111827);
        }
        #app-loading .site-loader-card span {
            font-size:.78rem;
            color:var(--text-secondary,#64748b);
        }
        #app-loading .loader-bar {
            width:100%;
            height:4px;
            margin-top:10px;
            border-radius:999px;
            background:var(--bg-secondary,#eef2f3);
            overflow:hidden;
        }
        #app-loading .loader-bar i {
            display:block;
            width:38%;
            height:100%;
            border-radius:inherit;
            background:var(--accent-gold);
            animation:bootload 1.1s ease-in-out infinite;
        }
        @keyframes bootload {
            0% { transform:translateX(-120%); }
            50% { transform:translateX(150%); }
            100% { transform:translateX(280%); }
        }
        @keyframes pulse-logo {
            0%,100% { transform:scale(1); }
            50% { transform:scale(1.045); }
        }

        /* ============================================================
                   PRODUCT CARDS
                   ============================================================ */
        .product-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 20px;
            border: 1px solid var(--border-color);
            transition: var(--transition);
            overflow: hidden;
        }
        .product-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-4px);
            box-shadow: var(--shadow);
        }
        .product-card .product-image {
            width: 100%;
            height: 180px;
            border-radius: 10px;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--text-secondary);
            margin-bottom: 12px;
            overflow: hidden;
            position: relative;
        }
        .product-card .product-image img,
        .product-card .product-image video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-card .product-image .file-icon {
            font-size: 3.5rem;
            color: var(--accent-gold);
        }
        .product-card .product-title {
            font-weight: 700;
            font-size: 1.1rem;
        }
        .product-card .product-price {
            color: var(--accent-gold);
            font-weight: 700;
            font-size: 1.2rem;
        }
        .product-card .product-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .product-card .affiliate-badge {
            background: var(--accent-purple);
            color: #fff;
            font-size: 0.65rem;
            padding: 2px 10px;
            border-radius: 20px;
            display: inline-block;
            margin-top: 4px;
        }
        .product-card .verified-badge {
            color: var(--accent-blue);
            font-size: 0.7rem;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 24px;
        }

        /* ============================================================
                   DASHBOARD
                   ============================================================ */
        .stat-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 20px 24px;
            border: 1px solid var(--border-color);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        .stat-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-4px);
        }
        .stat-card .icon {
            font-size: 1.8rem;
            margin-bottom: 6px;
            opacity: 0.8;
        }
        .stat-card h4 {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .stat-card .value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-top: 2px;
        }

        /* ============================================================
                   JOB / FREELANCER CARDS
                   ============================================================ */
        .job-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 20px;
            border: 1px solid var(--border-color);
            transition: var(--transition);
        }
        .job-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-3px);
        }
        .job-card .job-title {
            font-weight: 700;
            font-size: 1.1rem;
        }
        .job-card .job-budget {
            color: var(--accent-gold);
            font-weight: 700;
        }
        .job-card .job-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .freelancer-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 20px;
            border: 1px solid var(--border-color);
            transition: var(--transition);
        }
        .freelancer-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-3px);
        }
        .freelancer-card .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        /* ============================================================
                   INVESTMENT
                   ============================================================ */
        .invest-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 24px;
            border: 1px solid var(--border-color);
            transition: var(--transition);
        }
        .invest-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-3px);
        }
        .invest-card .invest-amount {
            font-size: 2rem;
            font-weight: 900;
            color: var(--accent-gold);
        }
        .invest-card .invest-return {
            color: var(--accent-green);
            font-weight: 700;
            font-size: 1.1rem;
        }
        .invest-card .invest-status {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
        }
        .invest-card .invest-status.active {
            background: rgba(46, 204, 113, 0.2);
            color: var(--accent-green);
        }
        .invest-card .invest-status.pending {
            background: rgba(245, 179, 66, 0.2);
            color: var(--accent-gold);
        }

        .disclaimer-box {
            background: rgba(231, 76, 60, 0.06);
            border: 1px solid rgba(231, 76, 60, 0.2);
            border-radius: var(--radius);
            padding: 16px 20px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin: 12px 0;
        }
        .disclaimer-box strong {
            color: var(--accent-red);
        }
        .disclaimer-box .disclaimer-title {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        .disclaimer-box .disclaimer-title i {
            color: var(--accent-red);
        }

        /* ============================================================
                   PLAN CARDS
                   ============================================================ */
        .plan-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 28px 24px;
            border: 2px solid var(--border-color);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            text-align: center;
        }
        .plan-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow);
        }
        .plan-card.popular {
            border-color: var(--accent-gold);
        }
        .plan-card.popular::before {
            content: '⭐ POPULAR';
            position: absolute;
            top: 12px;
            right: -30px;
            background: var(--accent-gold);
            color: #0b0f1a;
            font-size: 0.6rem;
            font-weight: 700;
            padding: 4px 40px;
            transform: rotate(45deg);
            letter-spacing: 1px;
        }
        .plan-card .plan-icon {
            font-size: 2.4rem;
            margin-bottom: 8px;
        }
        .plan-card .plan-name {
            font-size: 1.4rem;
            font-weight: 800;
        }
        .plan-card .plan-price {
            font-size: 2.2rem;
            font-weight: 900;
            color: var(--accent-gold);
            margin: 8px 0 4px;
        }
        .plan-card .plan-period {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .plan-card .plan-features {
            list-style: none;
            margin: 16px 0;
            text-align: left;
        }
        .plan-card .plan-features li {
            padding: 6px 0;
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .plan-card .plan-features li i {
            color: var(--accent-green);
            width: 18px;
        }
        .plan-card .plan-features li .fa-times {
            color: var(--accent-red);
        }

        /* ============================================================
                   WEBSITE BUILDER
                   ============================================================ */
        .builder-preview {
            background: #fff;
            border-radius: var(--radius);
            padding: 18px;
            min-height: 620px;
            height: min(78vh, 920px);
            color: #1a1a1a;
            position: relative;
            border: 2px dashed var(--accent-cyan);
            transition: var(--transition);
            overflow: auto;
            box-shadow: 0 18px 48px rgba(0,0,0,0.16);
        }
        #page-websitebuilder .grid-2 {
            grid-template-columns: minmax(340px, 0.62fr) minmax(720px, 1.8fr);
            align-items: start;
            gap: 24px;
        }
        #page-websitebuilder .grid-2 > div:first-child,
        #page-websitebuilder .grid-2 > div:last-child {
            min-width: 0;
        }
        #page-websitebuilder #previewContainer {
            width: 100%;
            min-width: 0;
            min-height: 720px;
            height: min(82vh, 980px);
            padding: 10px;
            overflow: hidden;
            background: #dfe5ec;
        }
        .builder-preview-frame {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 690px;
            border: 0;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 8px 30px rgba(0,0,0,.14);
        }
        #page-websitebuilder .builder-preview-content {
            width: 100%;
            max-width: none;
            margin: 0;
            min-height: 520px !important;
            font-size: 1.02rem;
            line-height: 1.55;
            box-shadow: 0 10px 30px rgba(0,0,0,0.12);
        }
        #page-websitebuilder .card[style*="border-color:var(--accent-cyan)"] {
            position: sticky;
            top: 16px;
        }
        .builder-preview .preview-placeholder {
            color: #888;
            text-align: center;
            padding: 60px 20px;
            font-size: 1.1rem;
        }
        .builder-preview .preview-section {
            padding: 20px;
            border-bottom: 1px solid #eee;
        }
        .builder-preview .preview-section:last-child {
            border-bottom: none;
        }
        .builder-preview .preview-logo {
            max-width: 140px;
            max-height: 80px;
            object-fit: contain;
        }
        .builder-preview .preview-btn {
            display: inline-block;
            padding: 10px 28px;
            border-radius: 30px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            background: var(--accent-gold);
            color: #0b0f1a;
            transition: var(--transition);
        }
        .builder-preview .preview-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        /* Mobile-only floating button that jumps straight to the live preview
           without scrolling past the form. Hidden on desktop via the
           min-width:769px rule in the responsive section. */
        .mobile-preview-fab {
            display: none;
            position: fixed;
            right: 0;
            top: 55%;
            transform: translateY(-50%);
            z-index: 1500;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            background: var(--accent-gold);
            color: #0b0f1a;
            border: none;
            border-radius: 20px 0 0 20px;
            padding: 14px 8px;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.4);
        }
        .mobile-preview-fab i {
            font-size: 1.15rem;
        }
        .mobile-preview-close-btn {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .color-picker-group {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }
        .color-picker-group label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .color-picker-group input[type="color"] {
            width: 40px;
            height: 40px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: transparent;
            cursor: pointer;
            padding: 2px;
        }
        .color-picker-group input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        .color-picker-group input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 6px;
        }

        .template-selector {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin: 8px 0 12px;
        }
        .template-selector .template-btn {
            padding: 6px 16px;
            border-radius: 20px;
            border: 2px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-family: var(--font);
        }
        .template-selector .template-btn:hover,
        .template-selector .template-btn.active {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
            background: var(--hover-bg);
        }

        .section-manager {
            background: var(--bg-primary);
            border-radius: 10px;
            padding: 12px 16px;
            border: 1px solid var(--border-color);
            margin-top: 10px;
        }
        .section-manager .section-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .section-manager .section-item:last-child {
            border-bottom: none;
        }
        .section-manager .section-item input {
            flex: 1;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 6px 10px;
            color: var(--text-primary);
            font-size: 0.8rem;
            font-family: var(--font);
        }
        .section-manager .section-item input:focus {
            outline: none;
            border-color: var(--accent-gold);
        }
        .section-manager .section-item .btn-sm {
            padding: 4px 10px;
            font-size: 0.7rem;
        }

        .builder-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 16px;
        }

        /* ============================================================
                   NOTIFICATIONS
                   ============================================================ */
        .notification-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: var(--transition);
            cursor: pointer;
        }
        .notification-item:hover {
            background: var(--bg-card-hover);
        }
        .notification-item .notif-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 0.9rem;
        }
        .notification-item .notif-content {
            flex: 1;
        }
        .notification-item .notif-content .notif-text {
            font-size: 0.88rem;
        }
        .notification-item .notif-content .notif-time {
            font-size: 0.7rem;
            color: var(--text-secondary);
        }
        .notification-item.unread {
            border-left: 3px solid var(--accent-gold);
        }
        .notification-item.unread .notif-text {
            font-weight: 600;
        }

        /* ============================================================
                   ESCROW / JOB CONTRACT CARDS
                   ============================================================ */
        .contract-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 16px;
            margin-bottom: 12px;
        }
        .contract-card .contract-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
            flex-wrap: wrap;
        }
        .contract-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .contract-status.funded {
            background: rgba(59, 130, 246, 0.18);
            color: var(--accent-blue);
        }
        .contract-status.submitted {
            background: rgba(245, 179, 66, 0.18);
            color: var(--accent-gold);
        }
        .contract-status.revision_requested {
            background: rgba(231, 76, 60, 0.18);
            color: var(--accent-red);
        }
        .contract-status.approved {
            background: rgba(46, 204, 113, 0.18);
            color: var(--accent-green);
        }
        .applicant-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .applicant-item:last-child {
            border-bottom: none;
        }

        /* ============================================================
                   AVATAR UPLOAD
                   ============================================================ */
        .avatar-upload-wrap {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        .avatar-upload-preview {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            overflow: hidden;
            flex-shrink: 0;
        }
        .avatar-upload-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .avatar-img-sm {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        /* ============================================================
                   TRUST BADGES
                   ============================================================ */
        .trust-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            border-radius: 30px;
            padding: 4px 14px 4px 10px;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        .trust-badge i {
            color: var(--accent-gold);
        }

        .trust-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
        }
        .trust-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: var(--bg-card);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }
        .trust-item .trust-icon {
            font-size: 1.4rem;
            color: var(--accent-gold);
        }
        .trust-item .trust-text {
            font-size: 0.8rem;
            font-weight: 600;
        }
        .trust-item .trust-sub {
            font-size: 0.65rem;
            color: var(--text-secondary);
        }

        /* ============================================================
                   FAQ
                   ============================================================ */
        .faq-item {
            border-bottom: 1px solid var(--faq-border);
            padding: 16px 0;
            cursor: pointer;
        }
        .faq-item:last-child {
            border-bottom: none;
        }
        .faq-item .faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1rem;
        }
        .faq-item .faq-q i {
            transition: var(--transition);
        }
        .faq-item .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        .faq-item.open .faq-a {
            max-height: 300px;
            padding-top: 12px;
        }
        .faq-item.open .faq-q i {
            transform: rotate(180deg);
        }

        /* ============================================================
                   LEGAL
                   ============================================================ */
        .legal-content h2 {
            color: var(--accent-gold);
            margin-top: 24px;
            font-size: 1.3rem;
        }
        .legal-content h2:first-child {
            margin-top: 0;
        }
        .legal-content p,
        .legal-content li {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.7;
            margin-bottom: 8px;
        }
        .legal-content ul {
            padding-left: 24px;
        }
        .legal-content .highlight {
            background: rgba(245, 179, 66, 0.08);
            padding: 4px 12px;
            border-radius: 6px;
            border-left: 3px solid var(--accent-gold);
        }

        /* ============================================================
                   BUSINESS / PROFILE / SETTINGS extras
                   ============================================================ */
        .business-card {
            background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
            border: 2px solid var(--accent-purple);
            border-radius: var(--radius);
            padding: 24px;
            transition: var(--transition);
        }
        .business-card:hover {
            border-color: var(--accent-gold);
            box-shadow: var(--shadow);
            transform: translateY(-4px);
        }

        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: var(--text-secondary);
            border: 3px solid var(--accent-gold);
            flex-shrink: 0;
        }

        .settings-section {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 24px;
            margin-bottom: 24px;
        }
        .settings-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        .settings-section h4 {
            font-size: 1.1rem;
            margin-bottom: 12px;
            color: var(--text-primary);
        }

        .upload-limit-bar {
            background: var(--bg-secondary);
            border-radius: 8px;
            height: 8px;
            overflow: hidden;
            margin-top: 4px;
        }
        .upload-limit-bar .fill {
            height: 100%;
            background: var(--accent-gold);
            border-radius: 8px;
            transition: width 0.5s ease;
        }

        .seller-profile-link {
            border: 0;
            background: transparent;
            color: var(--accent-gold);
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            padding: 0;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .seller-profile-link:hover { color: #ffd700; }
        .public-profile-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; }
        .public-profile-avatar {
            width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
            border: 2px solid var(--accent-gold); background: var(--bg-primary);
        }
        .public-profile-rating { padding: 9px 0; border-bottom: 1px solid var(--border-color); }
        .public-profile-listing { padding: 9px 0; border-bottom: 1px solid var(--border-color); }
        .public-profile-listing:last-child, .public-profile-rating:last-child { border-bottom: 0; }
        @media (max-width: 760px) {
            .public-profile-grid { grid-template-columns: 1fr; }
        }
        .rating-stars-input {
            display: flex;
            gap: 8px;
            font-size: 1.8rem;
            cursor: pointer;
        }
        .rating-stars-input i {
            transition: var(--transition);
            color: var(--border-color);
        }
        .rating-stars-input i.active {
            color: var(--accent-gold);
        }
        .rating-stars-input i:hover {
            transform: scale(1.1);
        }

        .paypal-button-container {
            margin-top: 12px;
            min-height: 50px;
        }

        .file-upload-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .file-upload-split .file-input-wrapper .file-label {
            font-size: 0.8rem;
            padding: 10px 12px;
        }

        /* ============================================================
                   MARKETPLACE FILTER TABS
                   ============================================================ */

        .marketplace-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
        }
        .marketplace-tabs .tab-btn {
            padding: 8px 20px;
            border-radius: 30px;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-family: var(--font);
        }
        .marketplace-tabs .tab-btn:hover {
            border-color: var(--accent-gold);
            color: var(--text-primary);
        }
        .marketplace-tabs .tab-btn.active {
            background: var(--accent-gold);
            color: #0b0f1a;
            border-color: var(--accent-gold);
        }
        .marketplace-tab-content {
            display: none;
        }
        .marketplace-tab-content.active {
            display: block;
        }


        /* ============================================================
                   RESPONSIVE
                   ============================================================ */
        @media (max-width:1180px) and (min-width:769px) {
            #page-websitebuilder .grid-2 {
                grid-template-columns: minmax(300px, 0.58fr) minmax(580px, 1.42fr);
            }
            #page-websitebuilder #previewContainer {
                min-height: 640px;
                height: min(76vh, 860px);
            }
            .builder-preview {
                min-height: 640px;
                height: min(76vh, 860px);
            }
            .builder-preview-frame {
                min-height: 610px;
            }
        }

        @media (max-width:1024px) {
            .grid-4 {
                grid-template-columns: repeat(2, 1fr);
            }
            .grid-3 {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width:768px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }
            .grid-3 {
                grid-template-columns: 1fr;
            }
            .grid-4 {
                grid-template-columns: 1fr;
            }

            nav#mainNav {
                display: none !important;
            }
            .hamburger {
                display: block;
            }
            .mobile-nav-overlay {
                display: none;
            }
            .mobile-nav-overlay.open {
                display: block;
            }

            header {
                height: auto;
                min-height: var(--header-height);
                padding: 8px 0;
            }

            /* On mobile, show auth button in header */
            .auth-header-btn {
                font-size: 0.75rem;
                padding: 4px 12px;
            }
            .nav-actions {
                gap: 4px;
            }
            .nav-user-badge {
                font-size: 0.7rem;
                padding: 2px 10px;
            }
            .theme-toggle-btn,
            .nav-bell {
                width: 30px;
                height: 30px;
                font-size: 0.85rem;
            }

            .login-box {
                width: 340px;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .product-grid {
                grid-template-columns: 1fr 1fr;
            }
            .header-search {
                max-width: 100%;
                flex: 1 1 100%;
                order: 10;
                margin-top: 6px;
            }
            .page-title {
                font-size: 1.6rem;
            }
            #page-websitebuilder .grid-2 {
                grid-template-columns: 1fr;
            }
            #page-websitebuilder #previewContainer {
                min-height: 560px;
                height: 72vh;
                max-height: 760px;
            }
            .builder-preview-frame {
                min-height: 530px;
            }
            .builder-preview {
                min-height: 520px;
                height: calc(100vh - 150px);
            }
            .stat-card .value {
                font-size: 1.3rem;
            }
            .trust-grid {
                grid-template-columns: 1fr 1fr;
            }
            .file-upload-split {
                grid-template-columns: 1fr;
            }
            .mobile-nav-overlay .mobile-nav-grid {
                grid-template-columns: 1fr 1fr;
            }
            .dev-profile-wrap .dev-avatar {
                width: 120px;
                height: 120px;
            }
            .dev-profile-wrap .dev-info h2 {
                font-size: 1.6rem;
            }
        }

        @media (max-width:480px) {
            .btn {
                padding: 10px 18px;
                font-size: 0.8rem;
            }
            .card {
                padding: 16px;
            }
            .login-box {
                width: 290px;
            }
            .product-grid {
                grid-template-columns: 1fr;
            }
            .page-title {
                font-size: 1.4rem;
            }
            .logo {
                font-size: 1.2rem;
            }
            .logo img {
                width: 28px;
                height: 28px;
            }
            .stat-card {
                padding: 14px 16px;
            }
            .stat-card .value {
                font-size: 1.1rem;
            }
            .trust-grid {
                grid-template-columns: 1fr;
            }
            .mobile-nav-overlay .mobile-nav-grid {
                grid-template-columns: 1fr;
            }
            .marketplace-tabs .tab-btn {
                font-size: 0.75rem;
                padding: 6px 14px;
            }
            .dev-profile-wrap .dev-avatar {
                width: 100px;
                height: 100px;
            }
            .dev-service-grid {
                grid-template-columns: 1fr 1fr;
            }
            .dev-pricing-grid {
                grid-template-columns: 1fr 1fr;
            }
            .dev-membership-grid {
                grid-template-columns: 1fr;
            }
            .auth-header-btn {
                font-size: 0.7rem;
                padding: 3px 10px;
            }
            .nav-actions .theme-toggle-btn,
            .nav-actions .nav-bell {
                width: 28px;
                height: 28px;
                font-size: 0.75rem;
            }
            .nav-user-badge {
                font-size: 0.65rem;
                padding: 2px 8px;
            }
        }

        .billing-toggle-btn.active {
            background: var(--accent-gold);
            color: #000;
            border-color: var(--accent-gold);
        }
        @media (max-width:768px) {
            /* Keep the original mobile layout stable; only improve touch targets and preview UX. */
            .mobile-nav-overlay {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                height: 100vh;
                background: rgba(11, 15, 26, 0.98);
                backdrop-filter: blur(12px);
                z-index: 998;
                overflow-y: auto;
                padding: 20px 24px 40px;
            }

            /* Keep typed search text comfortable on mobile; only the placeholder is visually smaller. */
            .header-search input { font-size: 16px; }
            .header-search input::placeholder { font-size: .72rem; }

            .btn { min-height: 44px; }
            .btn-sm { min-height: 38px; }
            .theme-toggle-btn,
            .nav-bell,
            .hamburger {
                min-width: 40px;
                min-height: 40px;
            }
            .login-box {
                width: 92vw !important;
                max-width: 360px;
            }

            /* WEBSITE BUILDER — mobile preview toggle */
            .mobile-preview-fab {
                display: flex;
            }
            #page-websitebuilder .grid-2 {
                position: relative;
            }
            #page-websitebuilder .mobile-preview-close-btn {
                display: none;
            }
            body.mobile-preview-active #page-websitebuilder .grid-2>div:first-child {
                display: none;
            }
            body.mobile-preview-active #page-websitebuilder .grid-2>div:last-child {
                position: fixed;
                inset: 0;
                z-index: 2000;
                margin: 0;
                padding: 16px 16px 32px;
                overflow-y: auto;
                background: var(--bg-primary);
                animation: fadeUp 0.25s ease;
            }
            body.mobile-preview-active #page-websitebuilder .mobile-preview-close-btn {
                display: flex;
                width: 100%;
                margin-bottom: 12px;
            }
            body.mobile-preview-active .mobile-preview-fab {
                display: none;
            }
        }

        @media (min-width:769px) {
            .mobile-preview-fab,
            .mobile-preview-close-btn {
                display: none !important;
            }
        }

        /* WhatsApp group button styling */
        .whatsapp-group-btn {
            background: #25d366;
            color: #fff;
            border-color: #25d366;
        }
        .whatsapp-group-btn:hover {
            background: #1da851;
            border-color: #1da851;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
        }
        .footer-whatsapp-link {
            color: #25d366;
            font-weight: 600;
        }
        .footer-whatsapp-link:hover {
            color: #1da851;
            text-decoration: underline;
        }
    
        /* Full-width media gallery/lightbox */
        .media-gallery-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,7,18,.94);z-index:10050;padding:18px}
        .media-gallery-modal.open{display:flex}
        .media-gallery-shell{width:min(1500px,96vw);height:min(92vh,920px);display:grid;grid-template-rows:auto 1fr auto;gap:10px}
        .media-gallery-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}
        .media-gallery-title{font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .media-gallery-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
        .media-gallery-stage img{max-width:92vw;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 20px 70px rgba(0,0,0,.45);background:#05070c}
        .media-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(8,12,24,.78);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;z-index:2}
        .media-gallery-nav.prev{left:8px}.media-gallery-nav.next{right:8px}.media-gallery-nav:disabled{opacity:.3;cursor:not-allowed}
        .media-gallery-close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(8,12,24,.78);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
        .media-gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 2px;scrollbar-width:thin}
        .media-gallery-thumb{width:76px;height:56px;flex:0 0 auto;border-radius:8px;overflow:hidden;border:2px solid transparent;background:#101827;cursor:pointer;padding:0}
        .media-gallery-thumb.active{border-color:var(--accent-gold)}
        .media-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
        .gallery-preview{position:relative;cursor:zoom-in;overflow:hidden;border-radius:12px}
        .gallery-preview img{display:block;width:100%;height:100%;object-fit:cover}
        .gallery-count{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.68);color:#fff;padding:4px 9px;border-radius:999px;font-size:.72rem;font-weight:700;backdrop-filter:blur(8px)}
        .gallery-file-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:10px}
        .gallery-file-preview{height:72px;border-radius:9px;overflow:hidden;border:1px solid var(--border-color);background:var(--bg-primary)}
        .gallery-file-preview img{width:100%;height:100%;object-fit:cover}
        .sell-mode-picker{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
        .sell-mode-btn.active{box-shadow:0 0 0 2px var(--accent-gold) inset}
        .sell-flow-host{margin-top:16px}
        .sell-flow-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
        @media (max-width:700px){
            .media-gallery-modal{padding:10px}.media-gallery-shell{height:95vh;width:100%;}.media-gallery-nav{width:42px;height:42px}.media-gallery-stage img{max-width:96vw;max-height:76vh}.media-gallery-thumb{width:66px;height:50px}
        }


/* ============================================================
   MELIVAR 2026 GAMING + SEO + ADMIN ENHANCEMENTS
   ============================================================ */
.gaming-hero{margin:18px 0 20px;padding:22px;border:1px solid var(--border-color);border-radius:18px;background:
  radial-gradient(circle at 10% 0%,rgba(139,92,246,.18),transparent 36%),
  radial-gradient(circle at 100% 40%,rgba(34,211,238,.12),transparent 35%),var(--bg-card);}
.gaming-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.gaming-stat{padding:14px 16px;border:1px solid var(--border-color);border-radius:14px;background:rgba(255,255,255,.02)}
.gaming-stat strong{display:block;font-size:1.45rem;font-weight:800}
.gaming-stat span{font-size:.78rem;color:var(--text-secondary)}
.gaming-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gaming-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--border-color);border-radius:999px;font-size:.7rem;color:var(--text-secondary);background:var(--bg-secondary)}
.gaming-card{position:relative}
.gaming-card .host-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.team-config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.custom-field-row{display:grid;grid-template-columns:1.2fr .8fr auto;gap:8px;align-items:end;margin-bottom:8px}
.custom-field-row input,.custom-field-row select{width:100%}
.custom-field-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.custom-field-values .form-group{margin-bottom:0}
.gamer-detail-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.gamer-detail-cover{min-height:280px;border-radius:14px;background:var(--bg-secondary) center/cover no-repeat}
.gamer-detail-list{display:grid;gap:9px}
.gamer-detail-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border-color)}
.gamer-detail-row span:first-child{color:var(--text-secondary)}
.live-gaming-controls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.live-gaming-hint{padding:9px 12px;border-radius:10px;border:1px solid rgba(34,211,238,.25);background:rgba(34,211,238,.06);font-size:.78rem;color:var(--text-secondary)}
.admin-command-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:14px 0}
.admin-command-stat{padding:16px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-card)}
.admin-command-stat .v{font-size:1.55rem;font-weight:800}
.admin-command-stat .l{color:var(--text-secondary);font-size:.78rem}
.admin-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.admin-table{width:100%;border-collapse:collapse;font-size:.82rem}
.admin-table th,.admin-table td{padding:9px 8px;border-bottom:1px solid var(--border-color);text-align:left;vertical-align:top}
.admin-table th{color:var(--text-secondary);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.admin-pill{display:inline-flex;padding:3px 8px;border-radius:999px;background:var(--bg-secondary);border:1px solid var(--border-color);font-size:.68rem}
.message-host-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary)}
.message-quota-strong{font-weight:800;color:var(--accent-gold)}
.screen-share-active{box-shadow:0 0 0 2px var(--accent-cyan) inset}
@media (max-width:980px){
  .gaming-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gamer-detail-panel{grid-template-columns:1fr}
}
@media (max-width:700px){
  .team-config-grid,.custom-field-row,.custom-field-values{grid-template-columns:1fr}
  .gaming-stats{grid-template-columns:1fr 1fr}
  .admin-command-grid{grid-template-columns:1fr 1fr}
}

/* =============================================================
   Gaming / admin enhancement styles
   ============================================================= */
.gaming-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.gaming-overview-card{background:linear-gradient(135deg,var(--bg-card),var(--bg-secondary));border:1px solid var(--border-color);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:4px;min-height:120px;justify-content:center}
.gaming-overview-card strong{font-size:1.8rem;line-height:1.1}.gaming-overview-card span:last-child{color:var(--text-secondary);font-size:.8rem}.gaming-overview-icon{font-size:1.4rem}
.gamer-tournament-card{display:flex;flex-direction:column}.gamer-cover{height:190px!important}.gaming-cover-fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%,rgba(245,179,66,.28),transparent 40%),linear-gradient(135deg,var(--bg-secondary),var(--bg-primary));gap:6px}.gaming-cover-fallback span{font-size:3.6rem}.gaming-cover-fallback small{font-size:.75rem;color:var(--text-secondary);text-align:center;padding:0 12px}
.gamer-card-badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:var(--badge-bg);border:1px solid var(--badge-border);font-size:.67rem;font-weight:700}.badge-cyan{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(34,211,238,.09)}.badge-live{border-color:#ef4444;color:#ff7b7b;background:rgba(239,68,68,.09)}
.gamer-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.gamer-card-stats>div{padding:10px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary)}.gamer-card-stats span,.gamer-detail-grid span,.admin-row small{display:block;color:var(--text-secondary);font-size:.72rem}.gamer-card-stats strong{font-size:.95rem}.gamer-card-actions,.gamer-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.gamer-detail-panel{scroll-margin-top:85px}.gamer-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.gamer-detail-header h3{margin:4px 0}.gamer-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.gamer-detail-grid>div{padding:12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary)}.gamer-detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.gamer-detail-columns section,.gamer-team-roster,.gamer-custom-schema{padding:14px;border:1px solid var(--border-color);border-radius:12px;margin-top:12px;background:var(--bg-secondary)}.gamer-detail-columns p{white-space:pre-wrap}.team-roster-row,.admin-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-color)}.team-roster-row:last-child,.admin-row:last-child{border-bottom:0}
.team-config-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary)}.custom-field-row{display:grid;grid-template-columns:1.5fr 1fr .8fr auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--border-color)}.custom-field-row:last-child{border-bottom:0}
.gamer-team-join-card,.gamer-custom-answer-card{padding:14px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);margin-bottom:12px}.gamer-team-note{display:flex;gap:8px;align-items:center;color:var(--text-secondary);font-size:.8rem}.message-host-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;border:1px dashed var(--border-color);border-radius:10px;background:var(--bg-secondary)}
.live-gaming-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:10px}.live-gaming-hint{color:var(--text-secondary);font-size:.75rem}
.admin-result-section{margin-top:12px;padding:14px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary)}.admin-result-section h4{margin-bottom:6px}
@media (max-width:900px){.gaming-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gamer-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-config-grid{grid-template-columns:1fr 1fr}.custom-field-row{grid-template-columns:1fr 1fr}.gamer-detail-columns{grid-template-columns:1fr}}
@media (max-width:620px){.gaming-overview-grid,.gamer-detail-grid,.team-config-grid,.custom-field-row{grid-template-columns:1fr}.gamer-card-stats{grid-template-columns:1fr 1fr}.gamer-detail-header{flex-direction:column}.gamer-detail-actions .btn{width:100%}}


.home-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.home-feature-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;text-align:left;transition:transform .15s ease,border-color .15s ease;}
.home-feature-item:hover{transform:translateY(-2px);border-color:var(--accent-gold);}
.home-feature-item span{font-size:1.2rem;}
@media (max-width:620px){.home-feature-grid{grid-template-columns:1fr;}}

/* Stable action pending state */
.btn[aria-busy="true"] { cursor: wait !important; opacity: .82; transform: none !important; }
.btn[aria-busy="true"] .fa-spinner { margin-right: 6px; }
.product-card .product-image { min-height: 180px; }
.product-card .gallery-preview { height: 180px !important; margin-bottom: 12px; }


/* 2026 UX upgrades */
.auth-security-note{font-size:.72rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px;margin-top:-8px;}
.compact-confirm-box{max-width:460px!important;}
.google-account-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:12px;margin-top:10px;}
.avatar-circle,.profile-avatar-large{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-primary);border:2px solid var(--border-color);flex:0 0 auto;}
.avatar-circle img,.profile-avatar-large img,.avatar-upload-preview img{width:100%;height:100%;object-fit:cover;}
.profile-avatar-large{width:84px;height:84px;margin:14px 0;border-color:var(--accent-gold);font-size:1.8rem;}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
.plan-protection-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(46,204,113,.4);background:rgba(46,204,113,.1);color:var(--accent-green);font-size:.78rem;font-weight:700;margin:8px 0;}
.withdraw-method-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.method-card{border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);border-radius:10px;padding:10px;cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:center;font-weight:700;}
.method-card.active{border-color:var(--accent-gold);box-shadow:0 0 0 2px rgba(243,128,32,.12);}
.passkey-list{display:flex;flex-direction:column;gap:8px;}
.passkey-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);}
[data-theme="light"] .btn-primary{box-shadow:0 1px 2px rgba(31,41,55,.08);}
[data-theme="light"] header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #dfe3e8!important;backdrop-filter:blur(10px);}
[data-theme="light"] .card{box-shadow:0 2px 12px rgba(31,41,55,.05);}
@media(max-width:720px){.withdraw-method-cards{grid-template-columns:repeat(2,minmax(0,1fr));}.confirm-actions .btn{width:100%;}}

/* Final compact nav avatar: match the original Melivar header badge dimensions. */
.nav-user-badge .avatar-circle{width:18px;height:18px;min-width:18px;border:0;background:transparent;box-shadow:none;flex:0 0 18px;}
.nav-user-badge .avatar-circle img{width:18px;height:18px;object-fit:cover;border-radius:50%;display:block;}
.nav-user-badge .avatar-circle i{font-size:1rem;line-height:18px;color:var(--accent-gold);}
.nav-user-badge{min-height:30px;}
@media(max-width:760px){.nav-user-badge .avatar-circle{width:16px;height:16px;min-width:16px;flex-basis:16px;}.nav-user-badge .avatar-circle img{width:16px;height:16px;}.nav-user-badge .avatar-circle i{line-height:16px;}}

.admin-wallet-user{width:100%;display:flex;justify-content:space-between;gap:12px;text-align:left;padding:10px 12px;margin:6px 0;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;}
.admin-wallet-user:hover{border-color:var(--accent-gold);transform:translateY(-1px);}
.admin-wallet-user small{display:block;color:var(--text-secondary);font-size:.72rem;margin-top:2px;}

.order-confirm-box{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.order-confirm-box .btn{white-space:nowrap}@media(max-width:720px){.order-confirm-box{align-items:stretch}.order-confirm-box .btn{width:100%;}}


/* Withdrawal payout controls — PayPal-branded request surface, not checkout */
.paypal-payout-container{width:100%;max-width:100%;}
.paypal-payout-btn{width:100%;min-height:56px;border:0;border-radius:6px;background:#ffc439;color:#0b2f8a;display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.22rem;font-weight:800;font-style:italic;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.08);font-family:Arial,Helvetica,sans-serif;transition:filter .12s ease,transform .05s ease;}
.paypal-payout-btn:hover{filter:brightness(.98);}
.paypal-payout-btn:active{transform:translateY(1px);}
.paypal-payout-btn:disabled{opacity:.65;cursor:not-allowed;}
.paypal-payout-btn .paypal-mark{font-size:1.55rem;letter-spacing:-.04em;}
.paypal-payout-tagline{text-align:center;color:#7c8797;font-size:.78rem;margin-top:7px;font-style:italic;}
.paypal-payout-tagline strong{color:#0b66c3;}
.withdraw-contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px;}
.withdraw-contact-btn{min-height:46px;border-radius:9px;border:1px solid var(--border-color);font-weight:750;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;}
.withdraw-contact-btn.whatsapp{background:#25d366;color:#fff;border-color:#25d366;}
.withdraw-contact-btn.email{background:var(--bg-secondary);color:var(--text-primary);}
.withdraw-contact-btn:disabled{opacity:.6;cursor:not-allowed;}
@media(max-width:520px){.withdraw-contact-actions{grid-template-columns:1fr;}}

/* PayPal wallet + eligible debit/credit card funding */
.paypal-choice-stack{display:grid;gap:8px;width:100%;}
.paypal-card-button:empty{display:none;}

/* Verified badge: consistent blue tick across the platform */
.verified-blue-tick{color:#1d9bf0 !important;display:inline-block;vertical-align:middle;margin-left:4px;filter:drop-shadow(0 0 1px rgba(29,155,240,.25));}

/* 2026-08-24 responsive identity fixes */
.nav-user-badge { min-width: 0; max-width: 220px; overflow: hidden; }
.nav-user-badge #userNameDisplay, .nav-user-badge #mobileUserNameDisplay { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-avatar.avatar-circle { width: 34px; height: 34px; min-width: 34px; max-width: 34px; border-radius: 50%; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.nav-avatar.avatar-circle img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 680px) {
  .nav-user-badge { max-width: 170px; gap: 6px; }
  .nav-user-badge #userNameDisplay, .nav-user-badge #mobileUserNameDisplay { max-width: 105px; font-size:.82rem; }
  .nav-avatar.avatar-circle { width: 30px; height: 30px; min-width:30px; max-width:30px; }
}
.profile-avatar, .profile-avatar img, .user-avatar img { max-width:100%; max-height:100%; object-fit:cover; }


/* Compact profile identity on phones and desktop. */
.nav-user-badge { max-width: 150px; min-width:0; overflow:hidden; }
.nav-user-badge .user-display-name, .nav-user-badge .display-name { max-width: 92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:760px){
  .nav-user-badge { max-width: 116px; gap:5px !important; }
  .nav-user-badge .user-display-name, .nav-user-badge .display-name { max-width: 68px; font-size:.74rem !important; }
  .nav-avatar.avatar-circle { width:24px !important; height:24px !important; min-width:24px !important; max-width:24px !important; }
  .nav-avatar.avatar-circle img { width:24px !important; height:24px !important; }
}
.payment-method-unavailable{padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-secondary);font-size:.78rem;text-align:center;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.payment-method-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:10px 0 2px;border-top:1px solid var(--border-color);}
.payment-method-badge{width:44px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-secondary);color:var(--text-primary);font-size:20px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.payment-method-badge[title="Apple Pay"]{font-size:23px;}
.payment-method-badge[title="PayPal"]{color:#0070ba;}
.payment-method-badge[title="Visa"]{color:#1a1f71;}
.payment-method-badge[title="Mastercard"]{color:#eb001b;}
.payment-method-badge[title="American Express"]{color:#2e77bc;}
.payment-method-badge[title="Discover"]{color:#f57921;}
.payment-method-badge[title="JCB"]{color:#0d5fba;}
.payment-method-badge[title="Diners Club"]{color:#0079be;}
.payment-method-badge[title="Venmo"]{color:#3d95ce;}

.paypal-choice + .paypal-choice{margin-top:2px;}

#userNameDisplay,#mobileUserNameDisplay{display:block;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;}
@media(max-width:760px){#userNameDisplay,#mobileUserNameDisplay{max-width:64px;font-size:.72rem!important}.nav-user-badge .nav-avatar.avatar-circle{width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important}.nav-user-badge .nav-avatar.avatar-circle img{width:22px!important;height:22px!important}}

/* Full payment-method controls matching the supplied reference image */
.reference-payment-buttons{display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));gap:8px;align-items:stretch;margin:10px 0 12px;}
.reference-payment-buttons.compact{grid-template-columns:repeat(5,minmax(0,1fr));margin:0;}
.reference-pay-btn{appearance:none;border:1px solid var(--border-color);border-radius:8px;min-height:48px;padding:7px 5px;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;font:700 11px/1.05 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;}
.reference-pay-btn:hover{transform:translateY(-1px);border-color:var(--accent-gold);box-shadow:0 3px 9px rgba(0,0,0,.14);}
.reference-pay-btn.selected{border-color:var(--accent-gold);box-shadow:0 0 0 2px rgba(230,178,72,.20);}
.reference-pay-btn.paypal{background:#0877f9;color:#fff;border-color:#0877f9;font-size:18px;}
.reference-pay-btn.apple{background:#fff;border-color:#111;font-size:18px;}
.reference-pay-btn.visa{background:#14275d;color:#fff;font-size:17px;letter-spacing:.4px;}
.reference-pay-btn.mastercard{background:#f7f7f7;color:#111;}
.reference-pay-btn .mc-circles{font-size:13px;letter-spacing:-4px;margin-left:-4px;}
.reference-pay-btn.amex{background:#0a72b8;color:#fff;font-size:8px;letter-spacing:.1px;}
.reference-pay-btn.discover{background:#fff;color:#111;font-size:9px;}
.reference-pay-btn.jcb{background:#fff;color:#111;font-size:15px;}
.reference-pay-btn.diners{background:#f3f3f3;color:#0058a8;font-size:8px;}
.reference-pay-btn.venmo{background:#0e6ee7;color:#fff;font-size:15px;}
.reference-pay-btn.venmo span{font-size:9px;}
.reference-pay-btn.paylater{background:#ffc439;color:#111;font-size:15px;}
.reference-pay-btn.paylater span{font-size:9px;}
.reference-pay-btn.credit{background:#003087;color:#fff;font-size:15px;}
.reference-pay-btn.credit span{font-size:9px;}
.reference-payment-buttons .reference-pay-btn strong{font-weight:900;}
.full-payment-method-panel{padding-top:2px;}
.payment-method-status{min-height:20px;font-size:.78rem;color:var(--text-secondary);margin:2px 0 8px;}
.wallet-rail{display:grid;gap:8px;}
.real-wallet-choice{display:grid;gap:4px;padding:8px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);}
.real-wallet-choice-title{font-size:.78rem;font-weight:800;color:var(--text-primary);}
.card-rail{display:grid;gap:8px;padding:10px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);}
.card-rail-title{display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:800;font-size:.82rem;}
.card-rail-title small{font-weight:600;color:var(--text-secondary);}
.card-brand-hint{font-size:.76rem;color:var(--text-secondary);}
.card-button-host{min-height:48px;}
.investment-payment-method-preview{padding:10px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);}
.payout-reference-buttons{grid-template-columns:repeat(5,minmax(0,1fr));}
.payout-reference-buttons .method-card{min-height:54px;display:flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;}
.brand-word{font-size:12px;line-height:1;}
.visa-word{background:#14275d;color:#fff;padding:4px 6px;border-radius:3px;}
.mastercard-word{font-size:16px;letter-spacing:-5px;}
.amex-word{font-size:8px;}
.discover-word{font-size:8px;}
.jcb-word{font-size:13px;}
.diners-word{font-size:8px;color:#0058a8;}
.venmo-word{font-size:18px;color:#0e6ee7;}
@media(max-width:1050px){.reference-payment-buttons{grid-template-columns:repeat(3,minmax(88px,1fr));}.payout-reference-buttons{grid-template-columns:repeat(3,minmax(88px,1fr));}}
@media(max-width:720px){.reference-payment-buttons,.reference-payment-buttons.compact{grid-template-columns:repeat(2,minmax(120px,1fr));}.payout-reference-buttons{grid-template-columns:repeat(2,minmax(120px,1fr));}.card-rail-title{align-items:flex-start;flex-direction:column;gap:3px;}}
@media(max-width:440px){.reference-payment-buttons,.reference-payment-buttons.compact,.payout-reference-buttons{grid-template-columns:1fr 1fr;gap:7px;}.reference-pay-btn{min-height:56px;padding:8px 6px;font-size:12px;}}


/* Pricing cards: keep the full payment-method selector readable inside each plan. */
.plan-card .full-payment-method-panel{width:100%;min-width:0;box-sizing:border-box;}
/* Pricing cards must keep every payment choice readable: two comfortable columns rather than three cramped columns. */
.plan-card .reference-payment-buttons{grid-template-columns:repeat(2,minmax(120px,1fr));gap:9px;}
.plan-card .reference-pay-btn{min-width:0;min-height:60px;padding:10px 8px;overflow:hidden;white-space:normal;text-align:center;line-height:1.05;}
.plan-card .reference-pay-btn span,.plan-card .reference-pay-btn strong{max-width:100%;overflow-wrap:anywhere;}
.plan-card .reference-pay-btn.amex,.plan-card .reference-pay-btn.diners{font-size:10px;white-space:normal;}
.plan-card .real-wallet-choice,.plan-card .card-rail{min-width:0;}
.plan-card .paypal-button-container{width:100%;min-width:0;}
@media(max-width:900px){.plan-card .reference-payment-buttons{grid-template-columns:repeat(2,minmax(110px,1fr));}}
@media(max-width:520px){.plan-card .reference-payment-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.plan-card .reference-pay-btn{min-height:58px;padding:9px 6px;font-size:11px;}}

/* Direct PayPal/Venmo payout cards: never squish the brand controls. */
.paypal-payout-container{width:100%;max-width:520px;margin:0 auto;}
.paypal-payout-btn{width:100%;min-height:50px;padding:10px 18px;border:0;border-radius:9px;background:#ffc439;color:#0b2f8a;display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.05rem;font-weight:800;font-style:italic;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.08);font-family:Arial,Helvetica,sans-serif;white-space:nowrap;}
.paypal-payout-btn .paypal-mark{font-size:1.15rem;letter-spacing:-.02em;}
.paypal-payout-btn.venmo-payout-btn{background:#0e6ee7;color:#fff;font-style:normal;}
.paypal-payout-btn:disabled{opacity:.68;cursor:not-allowed;}
.payout-reference-buttons{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.payout-reference-buttons .method-card{min-height:62px;padding:8px 6px;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;white-space:nowrap;overflow:hidden;}
.payout-reference-buttons .method-card span{font-size:.72rem;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.brand-word{font-size:11px;line-height:1;}
/* Compact account identity */
.nav-user-badge{max-width:118px!important;gap:5px!important;}
.nav-user-badge .user-display-name,.nav-user-badge .display-name,#userNameDisplay,#mobileUserNameDisplay{max-width:72px!important;font-size:.72rem!important;line-height:1.05;}
.nav-user-badge .avatar-circle{width:20px!important;height:20px!important;min-width:20px!important;flex-basis:20px!important;}
.nav-user-badge .avatar-circle img{width:20px!important;height:20px!important;}
.google-translate-host{position:fixed;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}
body .skiptranslate{display:none!important;}
@media(max-width:720px){.payout-reference-buttons{grid-template-columns:repeat(3,minmax(0,1fr));}.payout-reference-buttons .method-card{min-height:58px;padding:7px 5px;}.payout-reference-buttons .method-card span{font-size:.68rem;}.nav-user-badge{max-width:104px!important;}.nav-user-badge .user-display-name,.nav-user-badge .display-name,#userNameDisplay,#mobileUserNameDisplay{max-width:56px!important;font-size:.68rem!important;}.nav-user-badge .avatar-circle,.nav-user-badge .avatar-circle img{width:18px!important;height:18px!important;min-width:18px!important;}}
@media(max-width:440px){.payout-reference-buttons{grid-template-columns:repeat(2,minmax(0,1fr));}.payout-reference-buttons .method-card{min-height:56px;}}


/* Final payout/identity layout: prevent squashed method buttons at every width. */
.payout-reference-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;width:100%;align-items:stretch;}
.payout-reference-buttons .method-card{width:100%;min-width:0;min-height:66px;padding:9px 8px;box-sizing:border-box;overflow:hidden;}
.payout-reference-buttons .method-card i,.payout-reference-buttons .method-card .brand-word{flex:0 0 auto;}
.payout-reference-buttons .method-card span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.paypal-payout-container{width:100%;max-width:560px;margin:12px auto 0;}
.paypal-payout-btn{width:100%;min-height:54px;padding:11px 20px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:720px){
  .payout-reference-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .payout-reference-buttons .method-card{min-height:60px;padding:8px 5px;}
}
@media(max-width:440px){
  .payout-reference-buttons{grid-template-columns:repeat(2,minmax(0,1fr));}
  .payout-reference-buttons .method-card{min-height:58px;}
}
/* Smaller account identity in the top navigation. */
.nav-user-badge{max-width:112px!important;gap:4px!important;}
.nav-user-badge .user-display-name,.nav-user-badge .display-name,#userNameDisplay,#mobileUserNameDisplay{max-width:58px!important;font-size:.68rem!important;line-height:1.05;}
.nav-user-badge .avatar-circle{width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;flex-basis:18px!important;}
.nav-user-badge .avatar-circle img{width:18px!important;height:18px!important;}
@media(max-width:720px){
  .nav-user-badge{max-width:94px!important;}
  .nav-user-badge .user-display-name,.nav-user-badge .display-name,#userNameDisplay,#mobileUserNameDisplay{max-width:46px!important;font-size:.62rem!important;}
  .nav-user-badge .avatar-circle,.nav-user-badge .avatar-circle img{width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;}
}

/* Payout method mode labels: keep all reference methods visible without ambiguity. */
.payout-reference-buttons .method-card{position:relative;}
.payout-method-mode{font-style:normal;font-size:.55rem;line-height:1;padding:2px 5px;border-radius:999px;letter-spacing:.02em;opacity:.95;}
.payout-method-mode.direct{background:rgba(20,145,80,.14);color:#15824b;border:1px solid rgba(20,145,80,.28);}
.payout-method-mode.manual{background:rgba(120,120,120,.10);color:var(--text-secondary);border:1px solid var(--border-color);}
@media(max-width:720px){.payout-method-mode{font-size:.5rem;padding:2px 4px;}}


/* Final 2026-08-24 payment/payout button sizing: never compress brand controls. */
.reference-payment-buttons,
.reference-payment-buttons.compact,
.payout-reference-buttons {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  gap:10px;
  width:100%;
  align-items:stretch;
}
.reference-payment-buttons .reference-pay-btn,
.reference-payment-buttons.compact .reference-pay-btn,
.payout-reference-buttons .method-card {
  width:100%;
  min-width:108px;
  min-height:64px;
  box-sizing:border-box;
  padding:9px 8px;
  overflow:hidden;
  white-space:normal;
  flex:0 0 auto;
}
.reference-payment-buttons .reference-pay-btn > *,
.payout-reference-buttons .method-card > * {
  max-width:100%;
  min-width:0;
  text-overflow:ellipsis;
  overflow:hidden;
}
.reference-payment-buttons .reference-pay-btn span,
.payout-reference-buttons .method-card span,
.payout-reference-buttons .method-card em {
  white-space:nowrap;
  line-height:1.1;
}
.payout-reference-buttons .method-card em.payout-method-mode {
  font-size:.62rem;
  font-style:normal;
  font-weight:800;
  padding:2px 6px;
  border-radius:999px;
}
.payout-reference-buttons .method-card em.direct {
  color:#0b6b3a;
  background:rgba(46,204,113,.13);
}
.payout-reference-buttons .method-card em.manual {
  color:#7a5a00;
  background:rgba(243,183,58,.16);
}
.paypal-payout-container { max-width:560px; margin:12px auto 0; }
.paypal-payout-btn { min-height:56px; padding:12px 20px; box-sizing:border-box; white-space:nowrap; }
@media(max-width:760px){
  .reference-payment-buttons,
  .reference-payment-buttons.compact,
  .payout-reference-buttons { grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; }
  .reference-payment-buttons .reference-pay-btn,
  .reference-payment-buttons.compact .reference-pay-btn,
  .payout-reference-buttons .method-card { min-width:118px; min-height:62px; }
}
@media(max-width:520px){
  .reference-payment-buttons,
  .reference-payment-buttons.compact,
  .payout-reference-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reference-payment-buttons .reference-pay-btn,
  .reference-payment-buttons.compact .reference-pay-btn,
  .payout-reference-buttons .method-card { min-width:0; }
}

/* Campaign social interactions */
.campaign-social{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-color)}
.campaign-social-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.campaign-upvote-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-color);background:var(--bg-secondary)}
.campaign-upvote-btn strong{font-size:.84rem;min-width:18px;text-align:center}
.campaign-upvote-btn.is-upvoted{border-color:var(--accent-gold);background:rgba(245,179,66,.12);color:var(--accent-gold)}
.campaign-comment-count{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:.82rem}
.campaign-comments-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.campaign-comments-empty{padding:10px 12px;border:1px dashed var(--border-color);border-radius:10px}
.campaign-comment-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-color)}
.campaign-comment-avatar{width:34px;height:34px;min-width:34px;border-radius:50%;object-fit:cover;background:var(--bg-secondary);border:1px solid var(--border-color)}
.campaign-comment-main{min-width:0;flex:1}
.campaign-comment-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.campaign-comment-body{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-primary);font-size:.92rem;line-height:1.45}
.campaign-comment-delete{margin-top:6px;padding:2px 7px}
.campaign-comment-composer{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.campaign-comment-composer textarea{flex:1;min-height:62px;resize:vertical}
.campaign-signin-comment{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--bg-secondary);border:1px solid var(--border-color)}
@media(max-width:600px){
 .campaign-comment-composer{flex-direction:column;align-items:stretch}
 .campaign-comment-composer .btn{width:100%}
}

/* === Melivar 2026-08-28 UI/accessibility/chat patch === */
.skip-link{position:fixed;left:12px;top:10px;transform:translateY(-160%);z-index:100001;background:var(--bg-secondary);color:var(--text-primary);border:2px solid var(--accent-gold);padding:10px 14px;border-radius:10px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.skip-link:focus{transform:none}.chat-unread-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2f80ff;box-shadow:0 0 0 3px rgba(47,128,255,.15);vertical-align:middle;margin-left:5px}.chat-unread-dot[hidden]{display:none!important}
@media(min-width:761px){.chat-unread-dot{flex:0 0 auto}}
#mainContent{scroll-margin-top:96px}.affiliate-inline{padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary)}
.affiliate-inline label{display:flex;align-items:center;gap:8px;font-weight:700}.affiliate-inline input[type=checkbox]{width:18px;height:18px}.affiliate-inline input[type=number]{margin-top:8px;width:150px}
.chat-layout{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:18px}.chat-sidebar-head,.chat-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-tabs{display:flex;gap:6px;margin:12px 0}.chat-tab{flex:1;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-secondary);padding:9px 10px;border-radius:9px;cursor:pointer;font-weight:700}.chat-tab.active{color:var(--text-primary);border-color:var(--accent-gold);background:var(--accent-gold-soft,rgba(212,175,55,.1))}.chat-search{width:100%;margin-bottom:10px}.chat-list{display:flex;flex-direction:column;gap:7px;max-height:55vh;overflow:auto}.chat-list-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid transparent;border-radius:12px;cursor:pointer}.chat-list-item:hover,.chat-list-item.active{background:var(--bg-primary);border-color:var(--border-color)}.chat-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--bg-secondary);border:1px solid var(--border-color);flex:0 0 42px}.chat-list-copy{min-width:0;flex:1}.chat-list-title{display:flex;justify-content:space-between;gap:8px}.chat-list-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-list-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-thread-view{display:flex;flex-direction:column;min-height:74vh}.chat-thread-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.chat-thread-body{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px 4px}.chat-bubble{max-width:min(78%,620px);padding:10px 12px;border-radius:15px;line-height:1.45;word-break:break-word}.chat-bubble.mine{align-self:flex-end;background:var(--accent-gold);color:#161616;border-bottom-right-radius:5px}.chat-bubble.theirs{align-self:flex-start;background:var(--bg-primary);border:1px solid var(--border-color);border-bottom-left-radius:5px}.chat-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:4px;font-size:.72rem;opacity:.75}.chat-tick.read{color:#18a558}.chat-media-link{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.12);margin-top:6px}.chat-member-results,.chat-selected-members{display:flex;flex-direction:column;gap:6px;margin-top:7px}.chat-member-result,.chat-selected-member{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border-color);border-radius:9px}.chat-selected-member{justify-content:space-between}.chat-call-box{width:min(1100px,96vw)}.chat-call-body iframe{width:100%;height:min(72vh,760px);border:0;border-radius:14px;background:#000}.chat-modal-box{width:min(650px,94vw)}.blog-embed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.blog-link-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);text-decoration:none;background:var(--bg-primary)}
/* Lighter, readable theme */
:root{--light-card:#ffffff;--light-border:#d9dee8}body.light-theme,.light-theme{--bg-primary:#f6f8fb;--bg-secondary:#ffffff;--bg:#f6f8fb;--text-primary:#172033;--text-secondary:#526071;--border-color:#d9dee8;--input-bg:#ffffff;--input-text:#172033;--card-shadow:0 8px 28px rgba(23,32,51,.08)}.light-theme .card,.light-theme .product-card,.light-theme .dev-sale-notice{box-shadow:var(--card-shadow);border-color:var(--border-color)}.light-theme input,.light-theme textarea,.light-theme select{color:var(--input-text);background:var(--input-bg)}
@media(max-width:760px){.chat-layout{grid-template-columns:1fr}.chat-list{max-height:32vh}.chat-thread-view{min-height:58vh}.blog-embed-grid{grid-template-columns:1fr}.chat-call-box{width:100%;height:100vh;max-width:none}.chat-call-box .content{height:100%;display:flex;flex-direction:column}.chat-call-body{flex:1}.chat-call-body iframe{height:calc(100vh - 95px);border-radius:0}.mobile-preview-active #page-websitebuilder .mobile-preview-shell,.mobile-preview-active #page-websitebuilder .mobile-preview-frame{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important;z-index:10000}.mobile-preview-active{overflow:hidden!important}.mobile-preview-active #page-websitebuilder .mobile-preview-close-btn{position:fixed;top:10px;right:10px;z-index:10002}}

.public-detail-shell{position:fixed;inset:0;z-index:100000;overflow:auto;background:var(--bg,#0b0f1a);padding:24px;display:none}.public-detail-inner{max-width:1080px;margin:0 auto}.public-detail-card{margin-top:16px;padding:24px}.public-detail-card h1{font-size:clamp(1.7rem,4vw,3rem);margin:10px 0}.detail-meta{color:var(--text-secondary)}.detail-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:18px 0}.detail-gallery img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid var(--border-color)}.detail-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.detail-field{padding:12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-primary)}.detail-field span{display:block;color:var(--text-secondary);font-size:.75rem;margin-bottom:4px}.detail-description{border-top:1px solid var(--border-color);padding-top:18px}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.detail-affiliate{display:inline-flex;gap:7px;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(47,128,255,.1);color:#2f80ff;margin-top:10px}.chat-profile-link{border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.chat-sender-name{margin-bottom:4px}.referral-link-row{display:flex;gap:8px;margin-top:12px}.referral-link-row input{flex:1}.referral-benefits{display:grid;gap:9px;margin-top:10px}.referral-benefits>div{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-primary)}.referral-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-color)}.admin-submission-section{border-top:1px solid var(--border-color);padding:12px 0}.admin-submission-json{max-height:260px;overflow:auto;background:var(--bg-primary);padding:10px;border-radius:8px;white-space:pre-wrap;word-break:break-word;font-size:.72rem;color:var(--text-secondary)}
@media(max-width:760px){.detail-fields{grid-template-columns:1fr 1fr}.public-detail-shell{padding:14px}.public-detail-card{padding:16px}}
.withdraw-method-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.withdraw-method-cards .method-card{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:9px 8px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-primary);color:var(--text-primary);cursor:pointer;font-weight:700;line-height:1.1}
.withdraw-method-cards .method-card:hover{border-color:var(--accent-gold);transform:translateY(-1px)}
.withdraw-method-cards .method-card.active{border-color:var(--accent-gold);background:var(--accent-gold-soft,rgba(212,175,55,.1));box-shadow:0 0 0 1px var(--accent-gold)}
.plan-gate-notice{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(212,175,55,.35);border-radius:10px;background:rgba(212,175,55,.08);color:var(--text-primary);font-weight:650}


/* Restored interests/personalization UI */
.interest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 18px;}
.interest-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px;}
.interest-option{display:flex;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--border-color);border-radius:12px;cursor:pointer;background:var(--bg-secondary);font-weight:700;}
.interest-option input{width:18px;height:18px;accent-color:var(--accent-green);flex:none;}
@media(max-width:760px){.interest-grid,.interest-grid.compact{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.interest-grid,.interest-grid.compact{grid-template-columns:1fr;}.btn-social.google{min-width:0;width:100%;}}

.chat-list-item{position:relative}.chat-list-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1;border:0;background:transparent;color:inherit;text-align:left;padding:0;cursor:pointer}.chat-list-main .chat-list-copy{display:block}.chat-list-join,.chat-list-manage{flex:0 0 auto}.chat-group-cover{width:100%;height:145px;border-radius:14px;overflow:hidden;margin-bottom:10px;background:var(--bg-secondary)}.chat-group-cover img{width:100%;height:100%;object-fit:cover;display:block}.chat-group-headline{display:flex;align-items:center;gap:10px}.chat-group-title-block{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.chat-group-actions{display:flex;gap:6px}.chat-group-member-count{display:inline-flex;align-items:center;gap:4px}.chat-message-author{display:flex;align-items:center;gap:7px;margin-bottom:5px}.chat-delete-btn{border:0;background:transparent;cursor:pointer;opacity:.65;margin-left:4px}.chat-delete-btn:hover{opacity:1}.chat-media-wrap{display:flex;flex-direction:column;gap:6px;margin-top:6px}.chat-image-preview,.chat-video-preview{max-width:min(420px,75vw);max-height:360px;border-radius:12px;object-fit:contain;background:#000}.chat-expand-btn{margin-left:auto}
.campaign-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.campaign-form-full{grid-column:1/-1}.campaign-upload-previews{display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:12px;align-items:center;margin:4px 0 10px}.campaign-upload-previews img{width:180px;height:110px;object-fit:cover;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-secondary)}.campaign-summary{margin-top:10px;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);font-size:.82rem;font-weight:600}.campaign-public-cover{margin:8px 0 10px;border-radius:12px;overflow:hidden;border:1px solid var(--border-color);background:var(--bg-secondary);max-width:520px}.campaign-public-cover img{display:block;width:100%;max-height:220px;object-fit:cover}@media(max-width:760px){.campaign-form-grid{grid-template-columns:1fr}.campaign-form-full{grid-column:auto}.campaign-upload-previews{grid-template-columns:1fr}.campaign-upload-previews img{width:100%;max-width:360px;height:160px}}
.chat-thread-expanded{height:calc(100vh - 100px)!important;min-height:88vh}.chat-expanded .chat-sidebar{display:none}.chat-expanded .grid-2{grid-template-columns:1fr!important}.chat-expanded #chatThreadCard{width:100%}#page-messages.chat-expanded>.container{max-width:1680px}.media-broken{display:none}
@media(max-width:760px){.chat-thread-expanded{height:calc(100dvh - 70px)!important;min-height:0}.chat-image-preview,.chat-video-preview{max-width:100%;max-height:300px}.chat-group-cover{height:120px}.chat-list-join,.chat-list-manage{padding:6px 8px}}

/* Chat usability and responsive fixes */
#page-messages{min-width:0}.chat-layout{align-items:stretch}.chat-sidebar,.chat-thread-view,.chat-thread-card{min-width:0}.chat-thread-card{overflow:hidden}.chat-thread-head{flex-wrap:wrap}.chat-group-headline{min-width:0}.chat-group-title-block{overflow:hidden}.chat-group-cover{flex:0 0 auto}.chat-bubble{overflow-wrap:anywhere}.chat-media-wrap{max-width:100%;overflow:hidden}.chat-image-preview,.chat-video-preview{width:auto;max-width:100%;height:auto}.chat-msg-action,.chat-delete-btn{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:26px;border-radius:7px;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer}.chat-msg-action:hover,.chat-delete-btn:hover{background:var(--bg-secondary);border-color:var(--border-color)}.chat-reply-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin-top:10px;border-left:3px solid var(--accent-gold);border-radius:8px;background:var(--bg-secondary);color:var(--text-secondary)}.chat-reply-preview[hidden],.chat-typing-indicator[hidden]{display:none}.chat-reply-cancel{border:0;background:transparent;font-size:1.25rem;cursor:pointer;color:inherit}.chat-typing-indicator{min-height:20px;padding:3px 8px;font-size:.78rem;color:var(--text-secondary);font-style:italic}.chat-composer-count{align-self:center;white-space:nowrap;font-size:.72rem;color:var(--text-secondary)}.chat-composer-count.chat-count-warn{color:#b42318;font-weight:700}.chat-emoji-picker{position:absolute;z-index:2000;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-primary);box-shadow:0 14px 35px rgba(0,0,0,.18)}.chat-emoji-picker button{border:0;background:transparent;border-radius:8px;font-size:1.25rem;padding:6px;cursor:pointer}.chat-emoji-picker button:hover{background:var(--bg-secondary)}
@media(max-width:760px){#newMessageForm{flex-wrap:wrap!important}.chat-composer-count{order:5;width:100%;text-align:right}.chat-sidebar{max-width:100%;overflow:hidden}.chat-list-item{min-width:0}.chat-thread-card{height:72vh!important}.chat-thread-expanded{height:calc(100dvh - 70px)!important}.chat-group-headline{align-items:flex-start}.chat-group-actions{flex-wrap:wrap}.chat-reply-preview{font-size:.82rem}}
/* Final chat positioning polish */
#newMessageForm{position:relative;align-items:center}
.chat-emoji-picker{right:0;bottom:48px}

/* Professional authentication provider layout */
.auth-provider-divider{display:flex;align-items:center;gap:12px;margin:2px 0 0;color:var(--text-secondary);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;}
.auth-provider-divider::before,.auth-provider-divider::after{content:"";height:1px;flex:1;background:var(--border-color);}
.auth-provider-btn{width:100%;min-height:48px;border-radius:10px;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;}
.auth-provider-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.auth-provider-btn.google-auth-btn{background:#fff;color:#202124;border-color:#dadce0;}
.auth-provider-btn.google-auth-btn:hover{border-color:#b8b8b8;background:#f8f9fa;}
.auth-provider-btn.google-auth-btn i{color:#ea4335;font-size:1rem;}
.auth-provider-btn.passkey-auth-btn{background:rgba(53,234,255,.06);color:var(--text-primary);border-color:rgba(53,234,255,.35);}
.auth-provider-btn.passkey-auth-btn:hover{border-color:#35eaff;background:rgba(53,234,255,.1);}
.auth-provider-btn.passkey-auth-btn i{color:#35eaff;font-size:1rem;}
.auth-provider-hint{line-height:1.45;margin-top:-5px;}
#signupForm .auth-provider-btn{min-height:46px;}
#interestOverlay .login-box{width:min(760px,100%);}
#interestOverlay .content{padding-bottom:28px;}
@media(max-width:520px){.login-box .content{padding-left:20px;padding-right:20px}.auth-provider-btn{min-height:46px;font-size:.86rem}.auth-provider-divider{font-size:.66rem}}

/* ===== Light theme + mobile navigation refinement ===== */
[data-theme="light"] body{background:var(--bg-primary);color:var(--text-primary)}
[data-theme="light"] header{background:rgba(249,251,252,.97)!important;border-bottom:1px solid var(--border-color)!important}
[data-theme="light"] .card,[data-theme="light"] .product-card,[data-theme="light"] .stat-card,[data-theme="light"] .job-card,[data-theme="light"] .freelancer-card{background:#ffffff;border-color:#d6dde5;box-shadow:0 7px 24px rgba(35,55,70,.07)}
[data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select{background:#f8fafb!important;color:#172033!important;border-color:#cbd5df!important}
[data-theme="light"] input::placeholder,[data-theme="light"] textarea::placeholder{color:#7b8794!important}
[data-theme="light"] .text-muted{color:#59677a!important}
[data-theme="light"] .helper{color:#607084}
[data-theme="light"] .mobile-nav-overlay{background:#f3f6f8}
[data-theme="light"] .mobile-nav-overlay .mobile-nav-grid a{background:transparent;border:0;border-radius:8px;color:#334155;text-align:left;padding:10px 4px;font-weight:650}
[data-theme="light"] .mobile-nav-overlay .mobile-nav-grid a:hover,[data-theme="light"] .mobile-nav-overlay .mobile-nav-grid a.active{background:transparent;border:0;color:#b86a00}
@media(max-width:768px){
  .mobile-nav-overlay .mobile-nav-grid{display:flex;flex-direction:column;gap:0}
  .mobile-nav-overlay .mobile-nav-grid a{background:transparent!important;border:0!important;border-radius:0!important;text-align:left;padding:11px 4px;font-size:.95rem;color:var(--text-primary);display:flex;align-items:center;gap:10px}
  .mobile-nav-overlay .mobile-nav-grid a i{width:20px;margin-right:0}
  .mobile-nav-overlay .mobile-nav-grid a:hover,.mobile-nav-overlay .mobile-nav-grid a.active{background:transparent!important;border:0!important;color:var(--accent-gold)!important}
  .mobile-nav-overlay .mobile-nav-grid a::after{display:none!important}
  .mobile-nav-overlay{padding:16px 22px 34px}
}
.request-form-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.request-form-inner{display:grid;gap:12px}
.request-form-inner[data-minimized="1"]{display:none}
.request-minimize-btn{white-space:nowrap}

/* Mobile search placeholder only: reduce placeholder text without changing the mobile layout or input size. */
@media (max-width: 768px) {
  .header-search input::placeholder {
    font-size: 0.68rem;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 480px) {
  .header-search input::placeholder {
    font-size: 0.62rem;
  }
}


/* ============================================================
   Melivar 2026-09-06: stronger light-theme contrast + mobile stability
   ============================================================ */
[data-theme="light"] {
  --text-primary:#111827;
  --text-secondary:#3f4b5a;
  --input-text:#111827;
  --border-color:#c8d1db;
  --input-border:#b8c2ce;
}
[data-theme="light"] .text-muted,
[data-theme="light"] small,
[data-theme="light"] .helper,
[data-theme="light"] .product-meta,
[data-theme="light"] .form-group .text-muted { color:#3f4b5a !important; }
[data-theme="light"] .page-subtitle { color:#394554 !important; }
[data-theme="light"] .card p,
[data-theme="light"] .card li { color:var(--text-primary); }
[data-theme="light"] .card label { color:var(--text-primary); }
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color:#596574 !important; opacity:1 !important; }
[data-theme="light"] nav#mainNav a { color:#344150; }
[data-theme="light"] nav#mainNav a:hover { color:#111827; }
[data-theme="light"] .mobile-nav-overlay .mobile-nav-grid a { color:#172033 !important; }
[data-theme="light"] .template-ready-box,
[data-theme="light"] .template-pending-label { color:#263343; }

/* Keep the mobile header stable and prevent page-width overflow. */
@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden;}
  header{height:auto;min-height:var(--header-height);padding:8px 0;}
  header .container{gap:8px;flex-wrap:wrap;align-items:center;}
  .logo{min-width:0;}
  .logo span{white-space:nowrap;}
  .hamburger{flex:0 0 auto;min-width:40px;min-height:40px;}
  .nav-actions{min-width:0;max-width:calc(100% - 96px);flex:1 1 auto;justify-content:flex-end;overflow:hidden;}
  .nav-actions > *{flex:0 0 auto;}
  .nav-user-badge{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .header-search{order:10;flex:1 1 100%;width:100%;max-width:none;min-width:0;margin-top:2px;}
  .header-search input{min-width:0;}
  .header-search input::placeholder{font-size:.72rem;}
}
@media (max-width:480px){
  .container{padding-left:14px;padding-right:14px;}
  .nav-actions{max-width:calc(100% - 84px);}
  .nav-actions .nav-user-badge{max-width:76px;}
  .header-search input::placeholder{font-size:.66rem;}
}

/* Website templates UI */
.templates-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:22px;}
.templates-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:800;color:var(--accent-gold);}
.templates-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:12px 14px;}
.templates-toolbar-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
.templates-search-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:160px;padding:0 12px;border:1px solid var(--input-border);background:var(--input-bg);border-radius:12px;}
.templates-search-wrap input{border:0;background:transparent;outline:0;width:100%;min-width:0;color:var(--input-text);padding:10px 0;}
.templates-toolbar select{min-height:42px;padding:0 10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:10px;}
.website-templates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.website-template-card{min-width:0;overflow:hidden;border:1px solid var(--border-color);background:var(--bg-card);border-radius:16px;box-shadow:var(--card-shadow);}
.template-card-media{position:relative;aspect-ratio:16/10;background:var(--bg-secondary);overflow:hidden;}
.template-card-media img{width:100%;height:100%;display:block;object-fit:cover;}
.template-card-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-secondary);font-size:.85rem;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-card));}
.template-card-placeholder i{font-size:2.3rem;color:var(--accent-gold);}
.template-price-badge{position:absolute;top:10px;right:10px;padding:5px 9px;border-radius:999px;background:rgba(17,24,39,.84);color:#fff;font-size:.7rem;font-weight:900;backdrop-filter:blur(8px);}
.template-card-content{padding:14px;}
.template-card-category{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-gold);font-size:.68rem;font-weight:800;}
.template-card-content h3{margin:4px 0 6px;font-size:1.08rem;color:var(--text-primary);}
.template-card-content p{margin:0;color:var(--text-secondary);font-size:.84rem;line-height:1.5;min-height:3.8em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.template-card-author{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:.7rem;color:var(--text-secondary);}
.template-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;}
.template-pending-label{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px dashed var(--border-color);border-radius:9px;color:var(--text-secondary);font-size:.74rem;font-weight:700;}
.template-empty-state{text-align:center;padding:42px 16px;grid-column:1/-1;}
.template-empty-state > i{font-size:2rem;color:var(--accent-gold);margin-bottom:10px;}
.template-launch-panel{margin-bottom:16px;}
.template-launch-panel[hidden]{display:none;}
.template-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.template-source-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.template-source-tabs .active{border-color:var(--accent-gold);color:var(--accent-gold);}
.template-source-block{margin-bottom:12px;}
.template-ready-box{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);}
.template-ready-box>i{color:var(--accent-green);font-size:1.1rem;margin-top:2px;}
.template-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.template-form-full{grid-column:1/-1;}
.template-launch-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.template-preview-overlay{position:fixed;inset:0;z-index:100000;background:rgba(3,7,18,.82);backdrop-filter:blur(10px);padding:18px;display:flex;align-items:center;justify-content:center;}
.template-preview-overlay[hidden]{display:none;}
.template-preview-modal{width:min(1500px,98vw);height:min(900px,96vh);display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-color);border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4);}
.template-preview-head,.template-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border-color);}
.template-preview-foot{border-bottom:0;border-top:1px solid var(--border-color);}
.template-preview-body{flex:1;min-height:0;background:#fff;}
.template-preview-body iframe{width:100%;height:100%;border:0;display:block;background:#fff;}
.template-preview-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
body.template-preview-open{overflow:hidden;}
@media(max-width:980px){.website-templates-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.templates-hero{align-items:flex-start;flex-direction:column;}.templates-hero-actions{justify-content:flex-start;}.templates-toolbar{flex-direction:column;align-items:stretch;}.templates-toolbar-main{flex-wrap:wrap;}.templates-search-wrap{min-width:100%;}.templates-toolbar select{flex:1;}}
@media(max-width:620px){.website-templates-grid{grid-template-columns:1fr;}.template-form-grid{grid-template-columns:1fr;}.template-form-full{grid-column:auto;}.template-preview-overlay{padding:0;}.template-preview-modal{width:100vw;height:100dvh;border-radius:0;}.template-preview-head,.template-preview-foot{padding:10px 12px;}.template-preview-head h3{font-size:1rem;}.template-preview-foot{align-items:flex-start;flex-direction:column;}.template-preview-actions{width:100%;}.template-preview-actions .btn{flex:1;justify-content:center;}}

/* Jobs, learning requests and richer chat presentation */
.jobs-toolbar{padding:12px;margin-bottom:4px}.jobs-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.job-filter-btn{border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);padding:9px 12px;border-radius:10px;cursor:pointer;font-weight:700}.job-filter-btn.active{border-color:var(--accent-gold);background:var(--accent-gold-soft,rgba(212,175,55,.12));color:var(--text-primary)}.section-heading-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-heading-row h3{margin:0}.jobs-page-list,.learning-requests-list{display:grid;gap:10px;margin-top:10px}.job-page-card,.learning-request-card{padding:14px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-card)}.job-page-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.job-page-card h3{margin:0 0 5px;font-size:1rem}.job-page-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.learning-request-card p{margin:7px 0}.compact-list-card .job-title{font-size:1rem}.chat-thread-card{background:linear-gradient(180deg,var(--bg-card),var(--bg-primary));overflow:hidden}.chat-thread-head-wrap{padding:10px 12px;border-bottom:1px solid var(--border-color);background:var(--bg-card)}.chat-thread-head{padding:0!important;border:0!important}.chat-thread-body{padding:14px 12px!important;background:var(--bg-primary);background-image:radial-gradient(rgba(128,128,128,.07) 1px,transparent 1px);background-size:18px 18px}.chat-bubble{box-shadow:0 1px 2px rgba(0,0,0,.08)}.chat-bubble.theirs{background:var(--bg-card)}.chat-bubble.mine{background:#e9f7d0;color:#17200f}.chat-bubble.mine .chat-meta{color:#46604a}.chat-composer{background:var(--bg-card)}
@media(max-width:760px){.job-page-card-top{flex-direction:column}.jobs-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.jobs-filter-row .btn{grid-column:1/-1}.chat-sidebar,.chat-thread-card{min-width:0}.chat-list{max-height:36vh}.chat-thread-card{height:65vh!important}.chat-bubble{max-width:88%}.chat-thread-body{padding:10px 8px!important}.jobs-toolbar{padding:10px}.learning-request-card{padding:12px}}

/* 2026-09-07 Education + chat experience upgrade */
.course-learning-request{position:relative;overflow:hidden;margin:26px 0 18px;padding:24px;border:1px solid rgba(245,184,64,.32);background:radial-gradient(circle at 100% 0%,rgba(245,184,64,.11),transparent 36%),linear-gradient(145deg,var(--bg-card),var(--bg-primary));box-shadow:0 18px 50px rgba(0,0,0,.14)}
.course-learning-request__head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:18px}
.course-learning-request__eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:rgba(245,184,64,.11);border:1px solid rgba(245,184,64,.2);font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-gold)}
.course-learning-request h3{margin:10px 0 6px;font-size:1.25rem}.course-learning-request p{margin:0;max-width:800px}
.course-learning-request__trust{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.course-learning-request__trust span{font-size:.75rem;padding:7px 10px;border-radius:999px;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-secondary)}
.course-learning-request__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.learning-field{display:flex;flex-direction:column;gap:7px}.learning-field label{font-size:.82rem;font-weight:700;color:var(--text-primary)}.learning-field input,.learning-field textarea,.learning-field select{width:100%;box-sizing:border-box;border-radius:11px;border:1px solid var(--border-color);background:rgba(255,255,255,.02);min-height:44px}.learning-field textarea{min-height:112px;resize:vertical}.learning-field--wide{grid-column:1/-1}
.course-learning-request__actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:2px;padding-top:14px;border-top:1px solid var(--border-color)}.course-learning-request__submit{min-width:230px;border-radius:13px;box-shadow:0 10px 26px rgba(245,184,64,.18)}
.course-learning-requests{margin-top:18px;padding:20px;background:linear-gradient(180deg,var(--bg-card),var(--bg-primary));border:1px solid var(--border-color)}
.learning-request-card--advanced{padding:16px;border-radius:15px;background:linear-gradient(145deg,var(--bg-card),var(--bg-primary));transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.learning-request-card--advanced:hover{transform:translateY(-1px);border-color:rgba(245,184,64,.32);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.learning-request-card__top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}.learning-request-card--advanced h4{margin:8px 0 5px;font-size:1rem}.learning-request-chip,.learning-request-status,.escrow-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:800}.learning-request-chip{background:rgba(125,211,252,.09);color:#7dd3fc}.learning-request-status{background:rgba(34,197,94,.10);color:#5ee68a;border:1px solid rgba(34,197,94,.16)}
.learning-request-meta{display:flex;gap:9px;flex-wrap:wrap;color:var(--text-secondary);font-size:.76rem}.learning-request-meta span{display:inline-flex;align-items:center;gap:5px}.learning-request-card--advanced p{margin:10px 0 8px}.learning-request-detail{display:flex;gap:8px;align-items:flex-start;padding:8px 0;color:var(--text-secondary);font-size:.78rem}.learning-request-card__actions,.course-enrollment-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}.learning-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:28px;text-align:center;color:var(--text-secondary)}.learning-empty i{font-size:1.6rem;color:var(--accent-gold)}
.course-enrollment-card{padding:15px;border:1px solid var(--border-color);border-radius:14px;background:linear-gradient(145deg,var(--bg-card),var(--bg-primary));margin-bottom:10px}.course-enrollment-card__main{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.escrow-pill{border:1px solid var(--border-color);text-transform:capitalize}.escrow-pill--funded{color:#f4c75b;background:rgba(245,184,64,.1)}.escrow-pill--delivered{color:#7dd3fc;background:rgba(125,211,252,.1)}.escrow-pill--released{color:#5ee68a;background:rgba(34,197,94,.1)}.escrow-pill--disputed{color:#ff8b8b;background:rgba(255,80,80,.1)}.escrow-pill--refunded{color:#c5c9d6;background:rgba(160,160,180,.1)}
.chat-thread-head-wrap{border-radius:14px 14px 0 0!important;background:linear-gradient(135deg,rgba(245,184,64,.06),transparent),var(--bg-card)!important}.chat-search{border-radius:11px!important}.chat-tab{transition:all .18s ease}.chat-tab:hover{transform:translateY(-1px)}
.chat-composer-hint{font-size:.7rem;color:var(--text-secondary);padding:3px 4px 0;margin-left:auto}.chat-thread-card textarea#messageBody{line-height:1.45;padding-top:10px!important;padding-bottom:10px!important;overflow-y:auto}.chat-thread-card #newMessageForm{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;padding:8px;margin-top:12px!important}.chat-thread-card #newMessageForm textarea,.chat-thread-card #newMessageForm button{border-radius:10px}.chat-thread-card #newMessageForm button.btn-primary{min-width:44px}
@media(max-width:850px){.course-learning-request__head{flex-direction:column}.course-learning-request__trust{justify-content:flex-start}.course-learning-request__form{grid-template-columns:1fr}.learning-field--wide{grid-column:auto}.course-learning-request__actions{align-items:stretch;flex-direction:column}.course-learning-request__submit{width:100%}.chat-composer-hint{margin-left:0}.course-enrollment-card__main{flex-direction:column}.learning-request-card__top{flex-direction:column}}

/* 2026-09-09 usability pass: live template previews, resizable builder, larger chat, compact mobile header */

/* Website builder workspace */
#page-websitebuilder .builder-workspace{
  --builder-editor-width: minmax(360px, 40%);
  position:relative;
  display:grid;
  grid-template-columns: var(--builder-editor-width) minmax(0,1fr);
  gap:20px;
  align-items:start;
}
#page-websitebuilder .builder-editor-pane,
#page-websitebuilder .builder-preview-pane{min-width:0;}
#page-websitebuilder .builder-preview-pane{position:relative;}
#page-websitebuilder .builder-workspace-divider{
  position:absolute;
  left:-10px;
  top:0;
  bottom:0;
  width:20px;
  cursor:col-resize;
  z-index:12;
}
#page-websitebuilder .builder-workspace-divider::before{
  content:"";
  position:absolute;
  left:8px;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius:999px;
  background:var(--border-color);
  transition:background .16s ease,box-shadow .16s ease;
}
#page-websitebuilder .builder-workspace-divider:hover::before,
#page-websitebuilder .builder-workspace-divider:focus-visible::before,
body.builder-resizing #page-websitebuilder .builder-workspace-divider::before{
  background:var(--accent-gold);
  box-shadow:0 0 0 5px rgba(245,179,66,.10);
}
#page-websitebuilder .builder-layout-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;}
#page-websitebuilder .builder-layout-label{font-size:.72rem;font-weight:800;color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px;padding:5px 6px;}
#page-websitebuilder .builder-workspace.builder-layout-split{--builder-editor-width:minmax(360px,40%);}
#page-websitebuilder .builder-workspace.builder-layout-editor-wide{--builder-editor-width:minmax(560px,52%);}
#page-websitebuilder .builder-workspace.builder-layout-preview-wide{--builder-editor-width:minmax(300px,30%);}
#page-websitebuilder .builder-workspace.builder-layout-preview-max{grid-template-columns:minmax(0,1fr);}
#page-websitebuilder .builder-workspace.builder-layout-preview-max .builder-editor-pane{display:none;}
#page-websitebuilder .builder-workspace.builder-layout-editor-max{grid-template-columns:minmax(0,1fr);}
#page-websitebuilder .builder-workspace.builder-layout-editor-max .builder-preview-pane{display:none;}
#page-websitebuilder .builder-workspace.builder-layout-custom{grid-template-columns:minmax(300px,var(--builder-editor-width)) minmax(420px,1fr);}
#page-websitebuilder .builder-workspace.builder-layout-preview-max .builder-workspace-divider,
#page-websitebuilder .builder-workspace.builder-layout-editor-max .builder-workspace-divider{display:none;}
body.builder-resizing{cursor:col-resize!important;user-select:none!important;}
body.builder-resizing *{cursor:col-resize!important;}

/* Real site previews inside template cards */
.template-live-preview-wrap{position:relative;width:100%;height:100%;background:#fff;overflow:hidden;}
.template-live-preview-frame{display:block;width:100%;height:100%;border:0;background:#fff;pointer-events:none;transform:none;}
.template-preview-live-badge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(5,12,24,.84);color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.02em;backdrop-filter:blur(7px);box-shadow:0 5px 15px rgba(0,0,0,.15);}
.template-preview-live-badge i{font-size:.42rem;}
.website-template-card:hover .template-live-preview-frame{transform:scale(1.01);transition:transform .25s ease;}

/* Chat: give the conversation pane enough room to read messages and keep the composer at the bottom */
#page-messages .chat-layout,
#page-messages > .container > .grid-2{align-items:stretch;}
#page-messages .chat-sidebar,
#page-messages .chat-thread-card{min-height:620px;}
#page-messages .chat-sidebar{height:min(78vh,860px);overflow:hidden;display:flex;flex-direction:column;}
#page-messages .chat-list{flex:1;min-height:160px;max-height:none;overflow:auto;}
#page-messages .chat-thread-card{height:min(78vh,860px)!important;min-height:620px;overflow:hidden;}
#page-messages #messageThreadBody{flex:1 1 auto!important;min-height:260px!important;max-height:none;overflow-y:auto!important;padding:16px 12px!important;scroll-behavior:smooth;}
#page-messages #newMessageForm{flex:0 0 auto;align-items:center;}
#page-messages #messageBody{min-height:54px!important;max-height:180px!important;resize:vertical!important;}
#page-messages .chat-thread-head-wrap{flex:0 0 auto;}
#page-messages .chat-composer-hint{flex:0 0 auto;}

/* Mobile header: keep theme, language/globe, notifications, name and sign-in on one row */
@media (max-width:768px){
  header .container{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  .nav-actions{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-end;gap:4px!important;min-width:0;max-width:calc(100% - 82px)!important;overflow:visible!important;}
  .theme-toggle-btn,.nav-bell,.language-selector{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;flex:0 0 40px!important;}
  .language-selector{appearance:none;-webkit-appearance:none;padding:0!important;border:1px solid var(--border-color)!important;border-radius:50%!important;font-size:0!important;color:transparent!important;background-color:var(--bg-card)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:18px 18px!important;background-image:none!important;}
  .nav-user-badge{max-width:92px!important;min-width:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto!important;padding:4px 8px!important;font-size:.74rem!important;}
  #userNameDisplay,#mobileUserNameDisplay{max-width:62px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .auth-header-btn{padding:5px 10px!important;font-size:.74rem!important;flex:0 0 auto!important;}
  #page-websitebuilder .builder-workspace{grid-template-columns:1fr!important;gap:14px!important;}
  #page-websitebuilder .builder-workspace-divider{display:none!important;}
  #page-websitebuilder .builder-layout-controls{width:100%;margin-left:0;overflow:auto;flex-wrap:nowrap;padding-bottom:2px;}
  #page-websitebuilder .builder-layout-controls .btn{flex:0 0 auto;}
  #page-websitebuilder .builder-layout-label{display:none;}
  #page-websitebuilder .builder-workspace.builder-layout-preview-max .builder-editor-pane,
  #page-websitebuilder .builder-workspace.builder-layout-editor-max .builder-preview-pane{display:block;}
  #page-websitebuilder .builder-workspace.builder-layout-preview-max .builder-editor-pane{display:none;}
  #page-websitebuilder .builder-workspace.builder-layout-editor-max .builder-preview-pane{display:none;}
  #page-messages .chat-sidebar{height:auto;min-height:300px;max-height:38vh;}
  #page-messages .chat-list{min-height:120px;}
  #page-messages .chat-thread-card{height:78vh!important;min-height:520px;}
  #page-messages #messageThreadBody{min-height:260px!important;padding:14px 8px!important;}
  #page-messages #messageBody{min-height:56px!important;}
}
@media (max-width:480px){
  header .container{gap:4px;}
  .nav-actions{max-width:calc(100% - 58px)!important;gap:3px!important;}
  .theme-toggle-btn,.nav-bell,.language-selector{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;flex-basis:34px!important;}
  .theme-toggle-btn,.nav-bell{font-size:.76rem!important;}
  .language-selector{background-size:16px 16px!important;}
  .nav-user-badge{max-width:70px!important;padding:3px 6px!important;font-size:.67rem!important;gap:4px!important;}
  #userNameDisplay,#mobileUserNameDisplay{max-width:47px!important;font-size:.66rem!important;}
  .nav-user-badge i{font-size:.8rem!important;}
  .auth-header-btn{padding:4px 7px!important;font-size:.67rem!important;}
  .auth-header-btn i{margin-right:2px!important;}
  .logo span{display:none;}
  .logo img{width:30px!important;height:30px!important;}
  .hamburger{min-width:32px!important;width:32px!important;height:32px!important;padding:2px 4px!important;font-size:1.05rem!important;}
}

/* Keep the language control polished on desktop too; mobile replaces the label with a globe. */
.language-selector{min-height:36px;width:130px;padding:0 28px 0 10px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-card);color:var(--text-primary);font:inherit;cursor:pointer;}
@media(max-width:768px){
  #page-websitebuilder .builder-workspace.builder-layout-preview-max .builder-editor-pane,
  #page-websitebuilder .builder-workspace.builder-layout-editor-max .builder-preview-pane{display:block!important;}
}

/* === 2026-09-09 brand/header preservation patch ===
   Keep the Melivar logo + name anchored at the top-left on every viewport.
   Header actions may compress, but the brand never disappears or wraps away. */
header .container{
  flex-wrap:nowrap;
  min-width:0;
}
header .logo{
  order:0;
  min-width:max-content;
  flex:0 0 auto;
  white-space:nowrap;
  text-decoration:none;
}
header .logo img{
  width:44px;
  height:44px;
}
header nav#mainNav{
  order:1;
  min-width:0;
  flex:1 1 auto;
}
header .nav-actions{
  order:2;
  flex:0 0 auto;
}
@media (max-width: 900px){
  header .container{gap:8px;}
  header nav#mainNav{display:none;}
  header .hamburger{order:1;flex:0 0 auto;}
  header .nav-actions{order:2;margin-left:auto;}
  header .logo span{display:inline!important;}
  header .logo img{width:34px;height:34px;}
  header .logo{font-size:1.08rem;gap:6px;}
}
@media (max-width: 480px){
  header .logo{font-size:1rem;}
  header .logo span{display:inline!important;}
  header .logo img{width:30px;height:30px;}
  header .container{gap:5px;}
  header .nav-actions{max-width:none!important;min-width:0;}
}


/* ============================================================
   2026 entry experience / onboarding refresh
   ============================================================ */
.home-shell{padding:34px 0 72px;background:var(--bg-primary)}
.home-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:28px;align-items:stretch;padding:clamp(24px,4vw,46px);border:1px solid rgba(245,179,66,.2);overflow:hidden;position:relative}
.home-hero-copy{position:relative;z-index:2}.home-eyebrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;color:var(--text-secondary);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.home-eyebrow span:first-child{color:var(--accent-gold)}
.home-hero h1{font-size:clamp(2.6rem,5vw,5.2rem);line-height:1.02;letter-spacing:-.055em;max-width:850px;margin:0}.home-hero h1 span{background:none;color:var(--accent-gold)}.home-lead{max-width:740px;font-size:1.08rem;color:var(--text-secondary);margin-top:18px}
.home-entry-card{margin-top:26px;padding:20px;border:1px solid var(--border-color);background:rgba(255,255,255,.025);border-radius:20px;backdrop-filter:blur(14px);max-width:690px}.home-entry-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.home-entry-heading strong{display:block;font-size:1.05rem}.home-entry-heading span{display:block;color:var(--text-secondary);font-size:.84rem;margin-top:3px}.home-entry-heading i{color:var(--accent-gold)}.home-email-form .input-group{margin-bottom:8px}.home-email-input{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:1px solid var(--input-border);background:var(--input-bg);border-radius:13px;padding:5px 6px 5px 13px}.home-email-input i{color:var(--accent-gold)}.home-email-input input{border:0!important;background:transparent!important;padding:12px 4px!important;box-shadow:none!important;min-width:0}.home-email-input button{border:0;border-radius:10px;padding:12px 15px;background:var(--accent-gold);color:#121212;font-family:inherit;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap}.home-email-input button:disabled{opacity:.7;cursor:wait}.home-entry-error{min-height:18px;color:var(--accent-red);font-size:.8rem}.home-entry-error.visible{padding:5px 0}.home-google-btn{margin-top:4px}.home-entry-note{font-size:.72rem;color:var(--text-secondary);display:flex;gap:7px;align-items:center;margin:12px 0 0}.home-entry-note i{color:var(--accent-gold)}.home-proof-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;color:var(--text-secondary);font-size:.73rem}.home-proof-row i{color:var(--accent-gold);margin-right:5px}
.home-hero-visual{min-height:430px;position:relative;display:flex;align-items:center;justify-content:center}.home-orbit{position:absolute;border:1px dashed rgba(245,179,66,.22);border-radius:50%;animation:melivarFloat 8s ease-in-out infinite}.home-orbit-a{width:360px;height:360px}.home-orbit-b{width:470px;height:470px;animation-delay:-2s}.home-dashboard-card{position:relative;z-index:2;width:min(100%,420px);padding:20px;border:1px solid var(--border-color);border-radius:24px;background:var(--bg-card);box-shadow:0 30px 80px rgba(0,0,0,.35)}.home-dashboard-top{display:flex;justify-content:space-between;font-size:.68rem;letter-spacing:.09em;color:var(--text-secondary)}.live-dot{color:var(--accent-green)}.home-dashboard-main{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:24px 0 20px}.mini-label{display:block;color:var(--text-secondary);font-size:.7rem}.home-dashboard-main strong{font-size:1.35rem}.home-avatar-stack{display:flex}.home-avatar-stack span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg-card);border:2px solid var(--bg-secondary);margin-left:-6px}.home-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.home-mini-grid>div{padding:12px;border:1px solid var(--border-color);border-radius:14px;background:rgba(255,255,255,.025)}.home-mini-grid span{display:block;font-size:.69rem;color:var(--text-secondary)}.home-mini-grid strong{font-size:.82rem}.home-floating-card{position:absolute;z-index:3;display:flex;gap:9px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow);font-size:.74rem}.home-floating-card i{color:var(--accent-gold)}.home-float-one{top:12%;right:2%}.home-float-two{bottom:12%;left:2%}
.home-section{padding-top:46px}.home-kicker{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--accent-gold);text-transform:uppercase;margin-bottom:8px}.home-section h2{font-size:clamp(1.6rem,3vw,2.35rem);margin:0;letter-spacing:-.03em}.home-section .section-heading-row p{max-width:800px;margin-top:7px}.home-feature-grid-large{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.home-feature-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;padding:17px;border:1px solid var(--border-color);border-radius:18px;background:var(--bg-card);color:var(--text-primary);font:inherit;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.home-feature-card:hover{transform:translateY(-3px);border-color:rgba(245,179,66,.42);background:var(--bg-card-hover)}.home-feature-card i:last-child{color:var(--text-secondary)}.home-feature-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--bg-secondary);font-size:1.25rem}.home-feature-card strong{display:block}.home-feature-card span:not(.home-feature-icon){display:block;font-size:.76rem;color:var(--text-secondary);margin-top:2px}.home-trust-panel{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:8px}.home-trust-copy,.home-trust-list{padding:24px;border:1px solid var(--border-color);border-radius:20px;background:var(--bg-card)}.home-trust-list{display:flex;flex-direction:column;gap:14px}.home-trust-list>div{display:flex;gap:12px;align-items:flex-start}.home-trust-list i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(245,179,66,.12);color:var(--accent-gold)}.home-trust-list strong{display:block}.home-trust-list small{display:block;color:var(--text-secondary);font-size:.76rem;margin-top:2px}
.melivar-auth-box,.survey-box{width:min(600px,100%);max-height:min(92vh,820px);overflow:auto}.auth-brandline{display:flex;align-items:center;gap:12px;margin-bottom:18px}.auth-brandline img{border-radius:12px}.auth-brandline strong{display:block;font-size:1rem}.auth-brandline span{display:block;color:var(--text-secondary);font-size:.74rem;margin-top:2px}.auth-progress-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:4px 0 18px;padding-bottom:13px;border-bottom:1px solid var(--border-color)}.auth-progress-head span{display:block;font-size:.64rem;color:var(--accent-gold);font-weight:800;letter-spacing:.12em}.auth-progress-head strong{display:block;font-size:1.25rem;margin-top:3px}.auth-progress-head>span{color:var(--text-secondary);letter-spacing:0;text-transform:none;font-size:.72rem}.auth-form-container{padding-top:0}.auth-intro{display:flex;gap:12px;align-items:flex-start;margin-bottom:4px}.auth-intro>i{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(245,179,66,.12);color:var(--accent-gold)}.auth-intro h3{margin:0;font-size:1rem}.auth-intro p{margin:2px 0 0;color:var(--text-secondary);font-size:.77rem}.input-group label{display:block;font-size:.74rem;font-weight:700;color:var(--text-secondary);margin-bottom:6px}.input-group input,.input-group select{width:100%}.auth-safe-note{font-size:.7rem;color:var(--text-secondary);display:flex;gap:6px;align-items:center}.auth-safe-note i{color:var(--accent-green)}.auth-backline{display:flex;justify-content:center}.auth-backline button{background:none;border:0;color:var(--text-secondary);cursor:pointer;font:inherit;font-size:.75rem}.signup-progress{height:5px;border-radius:20px;background:var(--border-color);overflow:hidden;margin-bottom:10px}.signup-progress-bar{height:100%;border-radius:20px;background:var(--brand-gradient);transition:width .35s ease}.signup-step-caption{display:flex;justify-content:space-between;gap:12px;font-size:.7rem;font-weight:800;margin-bottom:14px}.signup-step-caption span:last-child{color:var(--text-secondary);font-weight:600}.signup-step{animation:authStepIn .26s ease}.signup-step[hidden],.survey-step[hidden]{display:none!important}.signup-nav,.survey-nav{display:flex;gap:10px;align-items:center}.signup-nav .submit-btn,.survey-nav .submit-btn{flex:1}.signup-summary{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-secondary);font-size:.82rem}.signup-summary span{color:var(--text-secondary);font-size:.74rem}.survey-box{width:min(680px,100%)}.survey-question{text-align:center;margin:5px auto 18px;max-width:560px}.survey-icon{display:block;font-size:2rem;margin-bottom:8px}.survey-question h3{margin:0;font-size:1.2rem}.survey-question p{margin:5px 0 0;color:var(--text-secondary);font-size:.8rem}.survey-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.survey-options label{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-card);cursor:pointer;transition:border-color .16s ease,transform .16s ease,background .16s ease}.survey-options label:hover{transform:translateY(-2px);border-color:rgba(245,179,66,.45)}.survey-options input{accent-color:var(--accent-gold)}.survey-note{grid-column:1/-1;color:var(--text-secondary);font-size:.7rem;display:flex;gap:6px;align-items:flex-start;margin-top:4px}.survey-nav{margin-top:16px}.auth-close-btn{background:none!important;border:0!important;color:var(--text-secondary)!important}.auth-provider-btn{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.auth-provider-btn:hover{transform:translateY(-1px)}
@keyframes authStepIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}@keyframes melivarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
[data-theme="light"] .home-dashboard-card{background:var(--bg-card)}
[data-theme="light"] .home-shell{background:var(--bg-primary)}
@media(max-width:980px){.home-hero{grid-template-columns:1fr}.home-hero-visual{min-height:360px}.home-feature-grid-large{grid-template-columns:1fr 1fr}.home-trust-panel{grid-template-columns:1fr}}
@media(max-width:640px){.home-shell{padding-top:18px}.home-hero{padding:20px;border-radius:18px}.home-hero h1{font-size:2.55rem}.home-email-input{grid-template-columns:auto 1fr}.home-email-input button{grid-column:1/-1;width:100%;justify-content:center}.home-feature-grid-large{grid-template-columns:1fr}.home-hero-visual{min-height:290px}.home-orbit-b{width:340px;height:340px}.home-orbit-a{width:260px;height:260px}.home-dashboard-card{width:100%}.home-floating-card{font-size:.65rem}.home-float-one{top:2%;right:0}.home-float-two{bottom:2%;left:0}.survey-options{grid-template-columns:1fr}.survey-question h3{font-size:1.05rem}.auth-progress-head strong{font-size:1.1rem}}

/* ============================================================
   2026-09-09 homepage + desktop navigation refinement
   ============================================================ */
.melivar-classic-hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:30px;align-items:center;padding:30px 0 10px;background:transparent;box-shadow:none;border:0}
.melivar-classic-hero-copy{min-width:0}
.melivar-trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.melivar-classic-hero h1{font-size:clamp(2.3rem,4.5vw,3.6rem);font-weight:900;line-height:1.08;letter-spacing:-.03em;margin:0}
.melivar-classic-hero h1 span{color:var(--accent-gold)}
.melivar-hero-lead{font-size:1.05rem;line-height:1.7;color:var(--text-secondary);max-width:760px;margin:14px 0 0}
.melivar-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.melivar-hero-buttons .btn{min-width:max-content}
.melivar-classic-stats{margin-top:18px;display:flex;gap:28px;flex-wrap:wrap}
.melivar-classic-stats>div{display:flex;align-items:baseline;gap:6px}
.melivar-classic-stats strong{font-size:1.25rem}
.melivar-classic-stats span{font-size:.78rem;color:var(--text-secondary)}
.melivar-classic-side{min-width:0}
.melivar-one-place-card{padding:22px}
.melivar-one-place-card h3{margin:0 0 8px}
.melivar-one-place-card p{margin-bottom:16px}
.melivar-survey-callout{margin-top:12px;padding:14px 16px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;gap:12px}
.melivar-survey-callout>div{display:flex;align-items:flex-start;gap:10px;min-width:0}
.melivar-survey-callout>div>i{color:var(--accent-gold);margin-top:2px}
.melivar-survey-callout strong,.melivar-survey-callout small{display:block}
.melivar-survey-callout small{color:var(--text-secondary);font-size:.75rem;margin-top:3px}

/* Keep the desktop header visually close to the classic Melivar layout without wrapping. */
@media(min-width:901px){
  header .container{flex-wrap:nowrap!important;min-width:0}
  header nav#mainNav{display:flex!important;flex:1 1 auto;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;padding:3px 0}
  header nav#mainNav::-webkit-scrollbar{display:none}
  header nav#mainNav a{flex:0 0 auto;padding:7px 9px;font-size:.74rem}
  header .nav-actions{flex:0 0 auto;flex-wrap:nowrap!important;gap:5px}
  header .nav-user-badge{max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:9px;padding-right:9px}
  header .header-search{flex:0 0 190px;max-width:190px}
}
@media(max-width:1100px) and (min-width:901px){
  header nav#mainNav a{font-size:.7rem;padding-left:7px;padding-right:7px}
  header .header-search{flex-basis:150px;max-width:150px}
  header .language-selector{width:106px}
}
@media(max-width:900px){
  .melivar-classic-hero{grid-template-columns:1fr;padding-top:20px}
}
@media(max-width:640px){
  .melivar-classic-hero h1{font-size:2.45rem}
  .melivar-hero-lead{font-size:.95rem}
  .melivar-hero-buttons .btn{width:100%;justify-content:center}
  .melivar-classic-stats{gap:16px}
  .melivar-survey-callout{align-items:stretch;flex-direction:column}
  .melivar-survey-callout .btn{width:100%}
}

/* ============================================================
   2026-09-10 homepage + navigation regeneration
   ============================================================ */
/* Preserve the existing dark surface as a solid background. No new background gradients. */
.home-shell{background:var(--bg-primary)!important;}
.melivar-classic-hero h1 span{background:none!important;color:var(--accent-gold)!important;-webkit-text-fill-color:var(--accent-gold)!important;}

/* Homepage entry card: animated light points around the edge, using solid shadows only. */
.home-entry-card--lit{position:relative;overflow:hidden;background:var(--bg-card)!important;border-color:rgba(245,179,66,.34);box-shadow:0 16px 48px rgba(0,0,0,.24);}
.home-entry-card--lit>*:not(.home-entry-lights){position:relative;z-index:2;}
.home-entry-lights{position:absolute;inset:0;pointer-events:none;z-index:1;}
.home-entry-lights span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent-gold);box-shadow:0 0 8px var(--accent-gold),0 0 22px rgba(245,179,66,.55);opacity:.9;animation:melivarEntryOrbit 7s linear infinite;}
.home-entry-lights span:nth-child(1){top:-4px;left:12%;}
.home-entry-lights span:nth-child(2){right:-4px;top:34%;animation-delay:-1.75s;}
.home-entry-lights span:nth-child(3){bottom:-4px;left:56%;animation-delay:-3.5s;}
.home-entry-lights span:nth-child(4){left:-4px;top:66%;animation-delay:-5.25s;}
@keyframes melivarEntryOrbit{0%{transform:translate3d(0,0,0);opacity:.45;}25%{transform:translate3d(220px,0,0);opacity:1;}50%{transform:translate3d(220px,120px,0);opacity:.5;}75%{transform:translate3d(0,120px,0);opacity:1;}100%{transform:translate3d(0,0,0);opacity:.45;}}
@media(prefers-reduced-motion:reduce){.home-entry-lights span{animation:none!important;}}

/* Desktop: keep every navigation link visible by giving the header a dedicated wrapped nav row. */
@media(min-width:901px){
  header{height:auto!important;min-height:var(--header-height);padding:9px 0 10px!important;}
  header .container{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 12px!important;}
  header .logo{order:0!important;flex:0 0 auto!important;}
  header .header-search{order:1!important;flex:1 1 210px!important;max-width:280px!important;min-width:180px!important;}
  header .nav-actions{order:2!important;flex:0 0 auto!important;margin-left:auto!important;}
  header nav#mainNav{order:3!important;display:flex!important;flex:1 1 100%!important;width:100%!important;min-width:100%!important;max-width:none!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;overflow:visible!important;white-space:normal!important;padding:5px 0 2px!important;border-top:1px solid var(--border-color)!important;gap:2px 3px!important;}
  header nav#mainNav a{flex:0 0 auto!important;padding:7px 8px!important;font-size:.72rem!important;line-height:1.15!important;}
  header nav#mainNav a:hover{background:var(--bg-card-hover);border-radius:8px;}
}

/* Mobile/tablet: show the selected language name next to the globe instead of icon-only mode. */
.language-selector-wrap{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.language-selector-wrap>i{color:var(--accent-gold);font-size:.82rem;flex:0 0 auto;}
.language-selector-wrap .language-selector{min-width:112px;}
@media(max-width:768px){
  .language-selector-wrap{width:auto;max-width:124px;min-width:0;padding:0 7px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-card);}
  .language-selector-wrap>i{display:inline-block!important;font-size:.72rem!important;}
  .language-selector-wrap .language-selector{width:100px!important;min-width:100px!important;height:34px!important;min-height:34px!important;padding:0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;appearance:auto!important;-webkit-appearance:auto!important;color:var(--text-primary)!important;font-size:.69rem!important;}
  .language-selector-wrap .language-selector option{font-size:.9rem;color:#111827;background:#fff;}
}
@media(max-width:480px){
  .language-selector-wrap{max-width:112px;padding:0 5px;gap:4px;}
  .language-selector-wrap .language-selector{width:88px!important;min-width:88px!important;font-size:.62rem!important;}
}

/* Mobile three-dot utility menu: left side of the header. */
.mobile-utility-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;}
.mobile-utility-menu{display:none;position:absolute;top:calc(100% + 8px);left:10px;z-index:1200;width:min(250px,calc(100vw - 20px));padding:8px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-card);box-shadow:0 18px 42px rgba(0,0,0,.18);}
.mobile-utility-menu.open{display:grid;gap:4px;}
.mobile-utility-menu button,.mobile-utility-menu label{width:100%;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;min-height:42px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--text-primary);text-align:left;font:inherit;cursor:pointer;}
.mobile-utility-menu button:hover,.mobile-utility-menu label:hover{background:var(--bg-card-hover);}
.mobile-utility-menu i{color:var(--accent-gold);}
.mobile-utility-menu select{min-width:110px;max-width:130px;border:1px solid var(--border-color);border-radius:8px;background:var(--input-bg);color:var(--text-primary);padding:5px 6px;}
@media(max-width:768px){
  header>.container{position:relative;}
  .mobile-utility-btn{display:inline-flex;order:0;}
  header .logo{order:1;}
  header .hamburger{order:2;margin-left:auto;}
  header nav#mainNav{display:none;}
  header .nav-actions{order:3;}
  header .nav-actions .theme-toggle-btn,
  header .nav-actions .language-selector-wrap{display:none!important;}
}
@media(max-width:480px){
  .mobile-utility-btn{width:36px;height:36px;flex-basis:36px;}
  .mobile-utility-menu{left:8px;right:8px;width:auto;}
  .mobile-utility-menu select{min-width:96px;max-width:112px;}
}

/* 2026-09-10 full polish: readable light theme + permanently dark site footer. */
[data-theme="light"]{
  --text-primary:#111827;
  --text-secondary:#374151;
  --input-text:#111827;
}
[data-theme="light"] body,
[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] label,
[data-theme="light"] .helper,
[data-theme="light"] .page-subtitle,
[data-theme="light"] .text-muted{color:#111827;}
[data-theme="light"] .text-muted,
[data-theme="light"] .helper,
[data-theme="light"] .page-subtitle{color:#374151!important;}