/* ============================================================
   BLUE LINE ESTATES — Web 2.0 Design (2005-2010 style)
   Tahoma/Verdana, glossy buttons, sidebar layout, 960px fixed
   ============================================================ */

/* ===== CSS VARIABLES ===== */
:root {
    /* Brand colours */
    --hdr-from:    #1a3a6f;
    --hdr-to:      #2a5a9f;

    /* ── Legacy variable aliases (used in inline HTML styles) ── */
    --primary-blue:  #1a3a6f;
    --dark-blue:     #0a1a2d;
    --accent-blue:   #2a6cba;
    --light-blue:    #5a8ab5;
    --card-bg:       #f5f7fa;
    --card-border:   #b0bdd0;
    --elite:         #7d3c98;
    --used-car:      #e67e00;
    --sidebar-bg:  #2c4a7c;
    --sidebar-hover: #3a5f9f;
    --sidebar-active: #1a3060;
    --sidebar-text: #c8d8f0;
    --sidebar-active-text: #ffffff;
    --sidebar-border: #1e3668;

    /* Page background */
    --body-bg:     #dde3ea;
    --panel-bg:    #f5f7fa;
    --panel-border: #b0bdd0;
    --panel-head-from: #1a3a6f;
    --panel-head-to:   #3060b0;

    /* Accent / status */
    --accent:      #2a6cba;
    --success:     #28a745;
    --success-dk:  #1e7e34;
    --danger:      #cc2200;
    --danger-dk:   #991a00;
    --warning:     #e67e00;
    --warning-dk:  #b55f00;
    --gold:        #c8960c;
    --gold-lt:     #f0c040;

    /* District colours */
    --poor:        #c0392b;
    --good:        #27ae60;
    --elite:       #7d3c98;

    /* Car class */
    --car-economy: #2471a3;
    --car-comfort: #7d3c98;
    --car-premium: #c0392b;

    /* Casino */
    --casino-gold: #e0a500;
    --casino-red:  #c0392b;

    /* Layout */
    --top-bar-h:   46px;
    --sidebar-w:   188px;

    /* Text */
    --text-main:   #1a2030;
    --text-muted:  #5a6a80;
    --text-light:  #8a9ab0;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    color: var(--text-main);
    background: var(--body-bg);
    line-height: 1.45;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 16px; }
h2 { font-size: 14px; }
h3 { font-size: 13px; }

.hidden { display: none !important; }

/* ===== TOP HEADER BAR ===== */
.top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--top-bar-h);
    background: linear-gradient(180deg, var(--hdr-from) 0%, var(--hdr-to) 100%);
    border-bottom: 2px solid #0e2050;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    z-index: 200;
}

/* ===== LOGO ===== */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.logo-icon {
    font-size: 20px;
    line-height: 1;
}
.logo-text h1 {
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.logo-text p {
    font-size: 10px;
    color: #a0c0e8;
    line-height: 1;
}

/* ===== USER INFO IN TOP BAR ===== */
#userInfo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 4px 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
    max-height: calc(var(--top-bar-h) - 4px);
}
#userInfo.hidden { display: none !important; }

/* Inner clickable div — horizontal row so badge+cash fit on one line */
#userInfo > div[onclick] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Hide "Ваш баланс" label in header — too tall; shown on profile page */
#navbar .user-balance-label { display: none; }

.user-balance-label {
    font-size: 10px;
    color: #8ab0d8;
}

#navUserAvatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    flex-shrink: 0;
}
#navUserAvatar img { width: 100%; height: 100%; object-fit: cover; }

.badge {
    background: linear-gradient(180deg, #2a5a9f, #1a3a6f);
    color: #fff;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #0e2050;
    display: inline-block;
}

.cash {
    font-size: 14px;
    color: #5cdb5c;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(92,219,92,0.5);
}

/* Level badge in header */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    background: rgba(255,255,255,0.1);
    color: #c8d8f0;
}
.level-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
    min-width: 70px;
}
.level-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #5cdb5c, #28a745);
    transition: width 0.6s ease;
}

/* Logout button in top bar */
.btn-logout {
    padding: 4px 12px !important;
    font-size: 11px !important;
    background: linear-gradient(180deg, #cc3300, #991a00) !important;
    color: #fff !important;
    border: 1px solid #661100 !important;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
    white-space: nowrap;
}
.btn-logout:hover {
    background: linear-gradient(180deg, #dd4400, #aa2200) !important;
}

/* ===== APP BODY LAYOUT ===== */
.app-body {
    display: flex;
    margin-top: var(--top-bar-h);
    min-height: calc(100vh - var(--top-bar-h));
}

/* When top-bar is hidden (auth page), remove margin so content is flush */
#navbar.hidden ~ .app-body,
#navbar.hidden + .app-body {
    margin-top: 0;
    min-height: 100vh;
}

/* When sidebar is hidden, content area takes full width */
#navLinks.hidden ~ .content-area {
    width: 100%;
}

/* ===== SIDEBAR NAVIGATION ===== */
#navLinks {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: linear-gradient(180deg, #243d70 0%, #1a2e56 100%);
    border-right: 2px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 6px 0 10px;
    position: sticky;
    top: var(--top-bar-h);
    height: calc(100vh - var(--top-bar-h));
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 100;
}
#navLinks.hidden { display: none !important; }

.sidebar-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 6px;
}

.sidebar-bottom {
    padding: 8px 6px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 4px;
}

/* Sidebar nav buttons */
.sidebar-btn {
    display: block;
    width: 100%;
    padding: 7px 10px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--sidebar-text);
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #ffffff;
}
.sidebar-btn.active {
    background: linear-gradient(180deg, #1a3a6f, #0e2a5f);
    border-color: rgba(255,255,255,0.25);
    color: #ffffff;
    font-weight: bold;
    border-left: 3px solid var(--gold-lt);
}
.sidebar-btn-casino {
    color: var(--gold-lt) !important;
}
.sidebar-btn-casino:hover {
    background: rgba(200,150,12,0.2) !important;
}

/* ===== CONTENT AREA ===== */
.content-area {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
}

/* Legacy container class support */
.container {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 14px;
    flex: 1;         /* grows inside .content-area flex column to fill height */
}

/* ===== PANEL / CARD ===== */
.card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    overflow: hidden;
}

.panel-head {
    background: linear-gradient(180deg, var(--panel-head-from), var(--panel-head-to));
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid #0e2050;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 4px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: filter 0.1s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.2);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.92); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.btn:disabled, .btn[disabled] {
    background: #999 !important;
    border-color: #888 !important;
    color: #ccc !important;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

.btn-primary {
    background: linear-gradient(180deg, #4a7ec8 0%, #2a5aaa 50%, #1a3a8a 100%);
    color: #fff;
    border-color: #1a3070;
}
.btn-success {
    background: linear-gradient(180deg, #3cb85a 0%, #28a745 50%, #1a8030 100%);
    color: #fff;
    border-color: #146020;
}
.btn-danger {
    background: linear-gradient(180deg, #e04020 0%, #cc2200 50%, #aa1800 100%);
    color: #fff;
    border-color: #880f00;
}
.btn-warning {
    background: linear-gradient(180deg, #f09030 0%, #e07800 50%, #c06000 100%);
    color: #fff;
    border-color: #904800;
}
.btn-gold {
    background: linear-gradient(180deg, #f0c840 0%, #d4a010 50%, #b07800 100%);
    color: #3a2000;
    border-color: #886000;
}
.btn-sm {
    padding: 3px 9px;
    font-size: 10px;
}
.btn-lg {
    padding: 9px 22px;
    font-size: 13px;
}

/* ===== INPUTS / SELECTS / TEXTAREA ===== */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #a0b0c8;
    border-radius: 3px;
    color: var(--text-main);
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
    transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #4a7ec8;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 2px rgba(74,126,200,0.2);
}
textarea {
    min-height: 80px;
    resize: vertical;
}
label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-muted);
}

/* ===== AUTH PAGE ===== */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}
.auth-box {
    width: 100%;
    max-width: 380px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    overflow: hidden;
}
.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--panel-border);
    background: #e0e8f4;
}
.auth-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: bold;
    transition: all 0.15s;
    margin-bottom: -2px;
}
.auth-tab.active {
    background: var(--panel-bg);
    color: var(--hdr-from);
    border-bottom-color: var(--panel-bg);
}
.auth-tab:hover:not(.active) {
    background: rgba(255,255,255,0.5);
    color: var(--text-main);
}
#loginForm, #registerForm { padding: 18px; }
.auth-box h2 {
    font-size: 14px;
    color: var(--hdr-from);
    margin-bottom: 14px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #d0d8e8;
}

/* ===== FILTERS ===== */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 10px 12px;
    background: #eef2f8;
    border: 1px solid #c0cce0;
    border-radius: 5px;
    margin-bottom: 14px;
}
.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}
.filter-group label {
    margin-bottom: 3px;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.filter-group input,
.filter-group select {
    margin-bottom: 0;
}
.price-display {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}
.price-range {
    width: 100%;
    height: 6px;
    margin-bottom: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

/* ===== PROPERTY / CAR GRID ===== */
.properties-grid, .cars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.property-card, .car-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}
.property-card:hover, .car-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    border-color: #7a9aca;
}

.property-image, .car-image {
    height: 160px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

/* district / class badges */
.district-badge, .car-class-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background: var(--poor);
    border: 1px solid rgba(0,0,0,0.3);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.district-poor  { background: var(--poor); }
.district-good  { background: var(--good); }
.district-elite { background: var(--elite); }
.car-economy    { background: var(--car-economy); }
.car-comfort    { background: var(--car-comfort); }
.car-premium    { background: var(--car-premium); }

.property-info, .car-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.property-type, .car-type {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.property-title, .car-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.3;
}
.property-description, .car-description {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
    flex: 1;
}
.property-details, .car-details {
    display: flex;
    justify-content: space-around;
    padding: 7px 0;
    border-top: 1px solid #d0d8e8;
    border-bottom: 1px solid #d0d8e8;
    margin-bottom: 8px;
}
.detail { text-align: center; }
.detail-value { font-size: 12px; font-weight: bold; color: var(--text-main); }
.detail-label  { font-size: 10px; color: var(--text-muted); }
.property-footer, .car-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.property-price, .car-price {
    font-size: 15px;
    color: var(--success);
    font-weight: bold;
}
.buy-btn {
    background: linear-gradient(180deg, #3cb85a, #1a8030);
    color: #fff;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #146020;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    transition: filter 0.1s;
}
.buy-btn:hover { filter: brightness(1.1); }
.buy-btn:disabled {
    background: #aaa;
    border-color: #888;
    cursor: not-allowed;
    filter: none;
}

/* ===== OWNED CARDS ===== */
.owned-properties, .owned-cars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.owned-card {
    background: #eef4ff;
    border: 1px solid #a0b8d8;
    border-radius: 5px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ===== PAGE HEADERS ===== */
.page-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--hdr-from);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #c0cce0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Stats rows at top of pages */
.stats-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.stat-box {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    padding: 8px 14px;
    min-width: 140px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.stat-box-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: bold;
    text-transform: uppercase;
}
.stat-box-value {
    font-size: 18px;
    font-weight: bold;
    color: var(--success);
    line-height: 1.2;
}
.stat-box-value.blue { color: var(--accent); }
.stat-box-value.dark { color: var(--text-main); }

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px 20px;
    overflow-y: auto;
}
.modal[style*="display: flex"], .modal[style*="display:flex"] {
    display: flex !important;
}
.modal-content {
    background: var(--panel-bg);
    color: var(--text-main);
    width: 90%;
    max-width: 520px;
    border-radius: 6px;
    padding: 0;
    border: 1px solid #8090a8;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
/* Override inline color:white in modal body text (leftover from dark theme) */
.modal-content [style*="color: white"],
.modal-content [style*="color:white"] {
    color: var(--text-main) !important;
}
/* Keep white text on dark overlays (photo badges, buttons) */
.modal-content [style*="background: rgba(0,0,0"] [style*="color: white"],
.modal-content [style*="background:rgba(0,0,0"] [style*="color:white"],
.modal-content .btn[style*="color: white"],
.modal-content .btn[style*="color:white"],
.modal-content .confirm-btn[style*="color: white"] {
    color: #fff !important;
}
.modal-wide { max-width: 720px; }
.modal-extra-wide { max-width: 900px; }

.modal-header {
    background: linear-gradient(180deg, var(--hdr-from), var(--hdr-to));
    color: #fff;
    padding: 10px 40px 10px 16px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    border-bottom: 2px solid #0e2050;
    flex-shrink: 0;
}
.modal-body { padding: 16px; flex: 1; overflow-y: auto; }

.modal h2 {
    color: var(--accent);
    font-size: 14px;
    margin-bottom: 14px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #d0d8e8;
}

.close-modal {
    position: absolute;
    top: 8px; right: 12px;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    z-index: 1;
}
.close-modal:hover { color: #fff; }

/* Purchase details in modal */
.purchase-details {
    background: #eef4ff;
    border: 1px solid #b0c8e8;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 10px 0;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted #c0d0e8;
    font-size: 11px;
}
.detail-row:last-child { border-bottom: none; }

/* Purpose selector in modal */
.purpose-selector { display: flex; gap: 8px; margin: 10px 0; }
.purpose-option {
    flex: 1;
    padding: 8px 6px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    border: 2px solid #c0cce0;
    background: #f0f4fa;
    font-size: 11px;
    transition: all 0.15s;
}
.purpose-option:hover { border-color: #7a9aca; background: #e8f0fa; }
.purpose-option.selected {
    border-color: var(--accent) !important;
    background: #d8e8fa !important;
    font-weight: bold;
}
.purpose-option.rent  { border-color: var(--good); }
.purpose-option.live  { border-color: var(--warning); }
.purpose-option[id="purposeSelf"] { border-color: var(--danger); }

/* Gallery in modal */
.property-gallery, .car-gallery {
    position: relative;
    margin-bottom: 12px;
    border-radius: 4px;
    overflow: hidden;
    height: 220px;
    background: #dde3ea;
    border: 1px solid #b0bdd0;
}
.gallery-image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.4s;
}
.gallery-nav {
    position: absolute;
    top: 50%; width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    transform: translateY(-50%);
}
.gallery-btn {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}
.gallery-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #b0bdd0;
    cursor: pointer;
    border: none;
}
.gallery-dot.active { background: var(--accent); }

/* ===== ADMIN PANEL ===== */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #8090a8;
    margin-bottom: 12px;
    background: #e0e8f4;
    border-radius: 5px 5px 0 0;
    padding: 4px 4px 0;
    gap: 2px;
}
.admin-tab {
    padding: 6px 14px;
    background: #d0dced;
    border: 1px solid #9090b8;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: var(--text-muted);
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    margin-bottom: -2px;
}
.admin-tab.active {
    background: var(--panel-bg);
    color: var(--hdr-from);
    font-weight: bold;
    border-bottom: 2px solid var(--panel-bg);
}
.admin-tab:hover:not(.active) { background: #c0d0e4; }

.admin-section {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 0 4px 4px 4px;
    padding: 14px;
    margin-bottom: 14px;
}

/* Users list (admin) */
.users-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.user-item {
    background: #f0f4fa;
    border: 1px solid #c0cce0;
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}
.user-item:nth-child(even) { background: #e8f0f8; }
.user-info-column { flex: 2; }
.user-actions { display: flex; gap: 6px; justify-content: flex-end; }
.balance-control { display: flex; gap: 8px; align-items: center; }
.balance-input { width: 120px; padding: 4px 8px; margin-bottom: 0; font-size: 11px; }
.update-balance-btn { padding: 4px 10px; font-size: 10px; }

/* Property / car management (admin) */
.property-management, .car-management, .investment-management {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
    margin-top: 12px;
}
.property-list, .car-list, .investment-list {
    background: #eef2f8;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 10px;
    max-height: 480px;
    overflow-y: auto;
}
.property-list-item, .car-list-item, .investment-list-item {
    padding: 8px 10px;
    margin-bottom: 4px;
    background: #f5f8ff;
    border: 1px solid #c8d4e8;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.1s;
}
.property-list-item:hover, .car-list-item:hover, .investment-list-item:hover {
    background: #dce8f8;
    border-color: #8090c8;
}
.property-list-item.active, .car-list-item.active, .investment-list-item.active {
    background: #c8d8f0;
    border-color: var(--accent);
    font-weight: bold;
}
.property-form, .car-form, .investment-form {
    background: #f5f7fa;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 14px;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* Image upload */
.image-upload {
    border: 2px dashed #8090c0;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    margin-bottom: 12px;
    cursor: pointer;
    background: #f0f4fa;
    transition: background 0.15s, border-color 0.15s;
}
.image-upload:hover { background: #e8f0fa; border-color: var(--accent); }
.image-upload input { display: none; }
.image-preview {
    margin-top: 10px;
    border-radius: 4px;
    overflow: hidden;
    max-height: 200px;
    display: flex;
    justify-content: center;
}
.image-preview img { max-width: 100%; max-height: 200px; border-radius: 4px; }

/* Quick give panel */
.quick-give-panel {
    background: #eef4ff;
    border: 1px solid #b0c8e8;
    border-radius: 5px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.preset-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.preset-btn {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid rgba(40,167,69,0.5);
    background: rgba(40,167,69,0.12);
    color: var(--success-dk);
    cursor: pointer;
    font-size: 11px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    transition: background 0.15s;
    font-weight: bold;
}
.preset-btn:hover { background: rgba(40,167,69,0.25); }
.preset-btn.minus {
    border-color: rgba(204,34,0,0.5);
    background: rgba(204,34,0,0.1);
    color: var(--danger);
}
.preset-btn.minus:hover { background: rgba(204,34,0,0.22); }

/* ===== CASINO ===== */
.casino-container {
    max-width: 700px;
    margin: 0 auto;
}
.casino-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.casino-stat {
    text-align: center;
    padding: 10px;
    background: #fff8e8;
    border: 1px solid #d4a010;
    border-radius: 5px;
}
.casino-stat > div:first-child {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: bold;
    text-transform: uppercase;
}
.slot-machine {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
}
.slot {
    width: 88px; height: 88px;
    background: linear-gradient(180deg, #2c3e50, #1a2634);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    border: 3px solid var(--casino-gold);
    box-shadow: 0 3px 12px rgba(200,150,12,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}
.bet-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 12px 0;
}
.bet-btn {
    width: 52px; height: 34px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    cursor: pointer;
    border: 1px solid #555;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
    text-align: center;
    line-height: 34px;
    padding: 0;
}
.bet-input {
    width: 110px;
    padding: 6px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 0;
}
.casino-tabs { display: flex; gap: 0; margin-bottom: 12px; border-radius: 5px; overflow: hidden; border: 1px solid #b0bdd0; }
.casino-tab-btn {
    flex: 1; padding: 8px;
    background: #e8eef8;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    transition: background 0.15s;
}
.casino-tab-btn.active { background: var(--hdr-from); color: #fff; font-weight: bold; }
.casino-tab-btn:hover:not(.active) { background: #d8e4f4; }

/* Roulette */
.roulette-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; max-width: 300px; margin: 0 auto 14px; }
.roulette-bet-btn {
    padding: 10px 6px; border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 12px; font-weight: bold;
    color: #fff;
    transition: opacity 0.15s;
    text-align: center;
}
.roulette-bet-btn:hover { opacity: 0.85; }
.roulette-bet-btn.selected { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.4); }
.roulette-bet-btn.red    { background: #c0392b; }
.roulette-bet-btn.black  { background: #2c3e50; }
.roulette-bet-btn.green  { background: #27ae60; }
.roulette-bet-btn.neutral { background: #e8eef8; border: 1px solid #b0bdd0; color: var(--text-muted); }
.roulette-wheel {
    width: 140px; height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        #c0392b 0deg 20deg, #2c3e50 20deg 40deg, #c0392b 40deg 60deg, #2c3e50 60deg 80deg,
        #c0392b 80deg 100deg, #2c3e50 100deg 120deg, #27ae60 120deg 130deg,
        #c0392b 130deg 150deg, #2c3e50 150deg 170deg, #c0392b 170deg 190deg,
        #2c3e50 190deg 210deg, #c0392b 210deg 230deg, #2c3e50 230deg 250deg,
        #c0392b 250deg 270deg, #2c3e50 270deg 290deg, #c0392b 290deg 310deg,
        #2c3e50 310deg 330deg, #c0392b 330deg 350deg, #2c3e50 350deg 360deg
    );
    border: 4px solid var(--casino-gold);
    margin: 0 auto 10px;
    position: relative;
    transition: transform 3s cubic-bezier(0.17,0.67,0.12,0.99);
}
.roulette-ball {
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* ===== INVESTMENTS PAGE ===== */
.investments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.invest-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.15s;
}
.invest-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.16); }
.invest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.invest-card-name { font-size: 12px; font-weight: bold; color: var(--text-main); }
.invest-card-price { font-size: 15px; font-weight: bold; color: var(--success); text-align: right; }
.invest-card-income { color: var(--success); font-size: 10px; margin-bottom: 4px; }
.invest-card-owned { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; min-height: 16px; }
.invest-card-actions { display: flex; gap: 6px; }
.invest-chart-wrap {
    margin-top: 8px;
    background: #eef2f8;
    border-radius: 4px;
    padding: 4px;
    border-top: 2px solid #b0bdd0;
}
.invest-trend-up  { border-top-color: var(--success); }
.invest-trend-down { border-top-color: var(--danger); }

/* Stock row (invest alt view) */
.stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f5f7fa;
    border: 1px solid #d0d8e8;
    border-radius: 4px;
    margin-bottom: 5px;
    gap: 10px;
    flex-wrap: wrap;
}
.stock-row:nth-child(even) { background: #eef2f8; }
.stock-ticker  { font-size: 12px; font-weight: bold; color: var(--accent); width: 55px; }
.stock-name    { font-size: 11px; color: var(--text-muted); flex: 1; min-width: 100px; }
.stock-price   { font-size: 12px; font-weight: bold; color: var(--text-main); }
.stock-change  { font-size: 11px; font-weight: bold; }
.stock-change.up   { color: var(--success); }
.stock-change.down { color: var(--danger); }
.stock-actions { display: flex; gap: 5px; }
.stock-sparkline { width: 60px; height: 28px; }
.portfolio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #f0f4fa;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 11px;
}

/* ===== LEADERBOARD ===== */
.leaderboard-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 5px;
    background: #f5f7fa;
    border: 1px solid #d0d8e8;
    font-size: 11px;
    transition: background 0.1s;
}
.leaderboard-row:nth-child(even) { background: #eef2f8; }
.leaderboard-row:hover { background: #e0eaf8; }
.leaderboard-row.top1 { background: #fffae0; border-color: rgba(200,150,12,0.5); }
.leaderboard-row.top2 { background: #f8f8f8; border-color: rgba(160,160,160,0.5); }
.leaderboard-row.top3 { background: #fff4e8; border-color: rgba(180,100,40,0.4); }
.leaderboard-row.is-me { border-color: var(--accent); background: #dce8f8; }
.lb-rank   { font-size: 16px; font-weight: bold; text-align: center; color: var(--text-muted); }
.lb-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: bold;
    background: linear-gradient(135deg, var(--hdr-from), #4a7ec8);
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.5);
}
.lb-networth { font-size: 13px; font-weight: bold; color: var(--success); white-space: nowrap; }

/* ===== PROFILE ===== */
.profile-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto 12px;
    border: 3px solid var(--accent);
    background: linear-gradient(135deg, var(--hdr-from), #4a7ec8);
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.profile-avatar:hover { box-shadow: 0 0 14px rgba(74,126,200,0.5); }
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.profile-stat-card {
    background: #eef4ff;
    border: 1px solid #b0c8e8;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}
.profile-stat-value { font-size: 18px; font-weight: bold; color: var(--success); }
.profile-stat-label { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* Transactions */
.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 3px;
    margin-bottom: 4px;
    background: #f5f7fa;
    border: 1px solid #d8e0ec;
    font-size: 11px;
}
.transaction-item:nth-child(even) { background: #eef2f8; }
.transaction-plus  { color: var(--success); font-weight: bold; }
.transaction-minus { color: var(--danger); font-weight: bold; }

/* Capital chart */
.capital-chart-wrap {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    padding: 12px;
    margin-top: 12px;
}
.capital-chart-wrap svg { width: 100%; height: 130px; display: block; }

/* Achievements */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.achievement-card {
    background: #f5f7fa;
    border: 1px solid #d0d8e8;
    border-radius: 5px;
    padding: 10px 8px;
    text-align: center;
    transition: transform 0.15s;
}
.achievement-card.unlocked {
    border-color: rgba(200,150,12,0.6);
    background: #fffae8;
}
.achievement-card.locked { opacity: 0.35; filter: grayscale(1); }
.achievement-card:hover { transform: translateY(-2px); }
.achievement-icon  { font-size: 1.8rem; margin-bottom: 5px; }
.achievement-name  { font-size: 10px; font-weight: bold; color: var(--text-main); margin-bottom: 3px; }
.achievement-desc  { font-size: 10px; color: var(--text-muted); }
.achievement-unlock-toast {
    position: fixed;
    top: 60px; right: 16px;
    background: linear-gradient(135deg, #e67e00, #b55f00);
    color: #fff;
    padding: 10px 16px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    animation: toastIn 0.4s ease;
}

/* ===== FEED ===== */
.feed-event-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f5f7fa;
    border: 1px solid #d0d8e8;
    border-radius: 4px;
    margin-bottom: 6px;
}
.feed-event-item:nth-child(even) { background: #eef2f8; }
.feed-event-icon {
    font-size: 1.4rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #e0e8f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #c0cce0;
}
.feed-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: #d8e8f8;
    flex-shrink: 0;
    overflow: hidden;
}
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.feed-event-body { flex: 1; min-width: 0; }
.feed-event-body strong { color: var(--text-main); font-size: 11px; }
.feed-event-body p { color: var(--text-muted); font-size: 11px; margin: 2px 0 0; }
.feed-event-time { color: var(--text-light); font-size: 10px; white-space: nowrap; }
.feed-empty { text-align: center; color: var(--text-muted); padding: 30px 0; }

/* ===== REPORT / TICKETS ===== */
.ticket-card {
    background: #f5f7fa;
    border: 1px solid #d0d8e8;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 11px;
}
.ticket-card:hover { background: #eef2f8; }
.ticket-card.pending { border-color: rgba(200,150,12,0.6); background: #fffae8; }
.ticket-card.processed { border-color: rgba(40,167,69,0.5); background: #f0fff4; }
.ticket-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}
.ticket-status-badge.pending  { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.ticket-status-badge.processed { background: #d4edda; color: #155724; border: 1px solid #28a745; }
.crime-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}
.crime-input-wrap {
    background: #eef2f8;
    border: 1px solid #c0cce0;
    border-radius: 4px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.crime-input-wrap label { font-size: 11px; color: var(--text-muted); font-weight: normal; margin: 0; }
.crime-input-wrap input {
    width: 60px; text-align: center;
    background: #fff; border: 1px solid #b0bdd0;
    color: var(--text-main); border-radius: 3px;
    padding: 3px 5px; font-size: 11px;
    margin-bottom: 0;
}

/* Admin ticket */
.admin-ticket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f5f7fa;
    border: 1px solid #d0d8e8;
    border-radius: 4px;
    margin-bottom: 5px;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
}
.admin-ticket-item:nth-child(even) { background: #eef2f8; }
.admin-ticket-item.pending { border-color: rgba(200,150,12,0.5); background: #fffae8; }

/* Pay Stub */
.paystub-box {
    background: #fff;
    border: 1px solid #b0bdd0;
    border-radius: 5px;
    padding: 14px 16px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}
.paystub-header {
    text-align: center;
    color: var(--hdr-from);
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 1px solid #d0d8e8;
    margin-bottom: 8px;
}
.paystub-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    color: var(--text-muted);
}
.paystub-row.income    { color: var(--success); }
.paystub-row.deduction { color: var(--danger); }
.paystub-row.fine      { color: var(--warning); }
.paystub-divider { border: none; border-top: 1px dashed #c0cce0; margin: 6px 0; }
.paystub-total {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-main);
    padding: 6px 0 0;
    border-top: 2px solid var(--accent);
    margin-top: 5px;
}
.fine-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.fine-row input { flex: 1; margin-bottom: 0; }
.fine-row input:last-of-type { flex: 0 0 90px; }

/* ===== CELLS ===== */
.cell-management {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 12px 0;
}
.cell-item {
    background: #eef2f8;
    border: 1px solid #c0cce0;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, border-color 0.1s;
}
.cell-item:hover   { background: #dce8f8; border-color: var(--accent); }
.cell-item.active  { background: #c8d8f0; border-color: var(--accent); font-weight: bold; }
.cell-icon   { font-size: 1.8rem; margin-bottom: 6px; }
.cell-name   { font-weight: bold; color: var(--text-main); font-size: 11px; }
.cell-status { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ===== NOTIFICATIONS (TOASTS) ===== */
#notificationContainer {
    position: fixed;
    top: 56px; right: 16px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}
.notification {
    padding: 10px 18px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    pointer-events: all;
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    border-left: 4px solid rgba(0,0,0,0.2);
}
.notification.success { background: #28a745; }
.notification.error   { background: #cc2200; }
.notification.warning { background: #e67e00; }

/* ===== SYNC STATUS ===== */
.sync-status {
    position: fixed;
    bottom: 12px; right: 12px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #b0bdd0;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    color: var(--text-muted);
}
.sync-indicator {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #aaa;
}
.sync-indicator.syncing { background: #e67e00; animation: pulse 1s infinite; }
.sync-indicator.synced  { background: var(--success); }
.sync-indicator.error   { background: var(--danger); }

/* ===== AVATAR PICKER ===== */
.avatar-picker-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6);
    align-items: center; justify-content: center;
}
.avatar-picker-overlay.open { display: flex; }
.avatar-picker-box {
    background: var(--panel-bg);
    border: 1px solid #8090a8;
    border-radius: 6px;
    padding: 20px;
    width: 360px; max-width: 95vw;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    animation: popIn 0.22s ease;
}
.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 8px;
    margin: 14px 0;
}
.avatar-emoji-btn {
    font-size: 1.5rem;
    padding: 6px;
    border-radius: 4px;
    border: 2px solid transparent;
    background: #eef2f8;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s;
}
.avatar-emoji-btn:hover { background: #d8e8f8; border-color: var(--accent); }
.avatar-emoji-btn.selected { border-color: var(--gold); background: #fff8e0; }
.avatar-photo-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #d0d8e8;
}
.avatar-photo-preview {
    width: 70px; height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    display: block;
    margin: 6px auto;
}
.avatar-photo-label {
    display: inline-block;
    padding: 5px 12px;
    background: linear-gradient(180deg, #4a7ec8, #2a5aaa);
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    border: 1px solid #1a3070;
}
.avatar-photo-label:hover { filter: brightness(1.1); }

/* ===== PLAYER PROFILE STAT ===== */
.player-profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #eef4ff;
    border: 1px solid #b0c8e8;
    border-radius: 5px;
    padding: 10px 8px;
    flex: 1;
    min-width: 80px;
    text-align: center;
}
.player-profile-stat .stat-val { font-size: 15px; font-weight: bold; color: var(--text-main); }
.player-profile-stat .stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ===== THEME FAB (hidden in Web 2.0 mode) ===== */
.theme-fab { display: none !important; }
.theme-picker-panel { display: none !important; }

/* ===== NAV BADGE ===== */
.nav-badge {
    position: absolute;
    top: -4px; right: -6px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    border-radius: 8px;
    padding: 1px 4px;
    min-width: 14px;
    text-align: center;
    display: none;
}
.nav-btn-wrap { position: relative; display: inline-flex; }

/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 16px;
    margin-top: 24px;
    border-top: 1px solid #c0cce0;
    color: var(--text-muted);
    font-size: 10px;
    background: #e8eef8;
}

/* ===== ANIMATIONS ===== */
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.page:not(.hidden) { animation: pageFadeIn 0.28s ease; }

@keyframes balancePop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); color: #28a745; }
    100% { transform: scale(1); }
}
.balance-pop { animation: balancePop 0.4s ease; }

@keyframes slotSpin {
    0%   { transform: translateY(0) scale(1); }
    25%  { transform: translateY(-12px) scale(1.04); }
    75%  { transform: translateY(6px) scale(0.97); }
    100% { transform: translateY(0) scale(1); }
}
.slot-animating {
    animation: slotSpin 0.12s infinite;
    filter: blur(1px);
}

@keyframes bigWinShake {
    0%,100% { transform: translateX(0); }
    10%,50%,90% { transform: translateX(-6px) rotate(-1deg); }
    30%,70%  { transform: translateX(6px) rotate(1deg); }
}
.big-win-shake { animation: bigWinShake 0.5s ease-in-out 2; }

@keyframes winPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.win-animation { animation: winPulse 0.5s 3; }

@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}
@keyframes popIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes loadingPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.15); }
}

/* ===== THEMES (light variants) ===== */
body[data-theme="red"] {
    --hdr-from: #6f1a1a;
    --hdr-to:   #9f2a2a;
    --sidebar-bg: #7c2424;
    --panel-head-from: #6f1a1a;
    --panel-head-to:   #b03030;
    --accent: #c03030;
    --body-bg: #f0e8e8;
}
body[data-theme="green"] {
    --hdr-from: #1a6f3a;
    --hdr-to:   #2a9f5a;
    --sidebar-bg: #247c3a;
    --panel-head-from: #1a6f3a;
    --panel-head-to:   #30b060;
    --accent: #20a050;
    --body-bg: #e8f0e8;
}
body[data-theme="purple"] {
    --hdr-from: #4f1a6f;
    --hdr-to:   #7f2a9f;
    --sidebar-bg: #5c247c;
    --panel-head-from: #4f1a6f;
    --panel-head-to:   #7030b0;
    --accent: #7030b0;
    --body-bg: #ece8f0;
}
body[data-theme="dark"] {
    --hdr-from: #222;
    --hdr-to:   #444;
    --sidebar-bg: #2a2a2a;
    --body-bg: #1a1a1a;
    --panel-bg: #2c2c2c;
    --panel-border: #444;
    --text-main: #e0e0e0;
    --text-muted: #a0a0a0;
    --text-light: #606060;
}

/* ===== MISC HELPERS ===== */
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted   { color: var(--text-muted); }

hr { border: none; border-top: 1px solid #c0cce0; margin: 12px 0; }

/* Admin page overrides to ensure proper display */
#adminPage .admin-section h2 {
    color: var(--hdr-from);
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #d0d8e8;
}
#adminPage .admin-section h3 {
    color: var(--accent);
    font-size: 12px;
    margin-bottom: 8px;
}

/* ===== LOADING SCREEN ===== */
#loadingScreen {
    background: #0a1a2d !important;
}

/* ===== LIGHT THEME OVERRIDES FOR INLINE STYLES ===== */
/* Fix dark transparent backgrounds used in old dark-theme sections */
#adminPage .admin-section,
.property-form, .car-form, .investment-form {
    background: #f5f7fa;
}

/* Fix inline rgba(255,255,255,...) backgrounds that look bad on light bg */
/* These appear in admin forms, quick give panel, etc. */

/* Page section titles from inline styles */
#mainPage > h1, #carsPage > h1, #usedCarsPage > h1,
#myPropertiesPage h1, #myCarsPage h1,
#investPage h1, #profilePage h1,
#leaderboardPage h1, #feedPage h1,
#reportPage h1, #adminPage h1 {
    color: var(--hdr-from);
    font-size: 15px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #c0cce0;
}

/* Make inline style background: rgba(255,255,255,0.05) etc. on light bg look reasonable */
/* The JS uses these for small stat boxes inline */
[style*="background: rgba(255, 255, 255, 0.05)"],
[style*="background: rgba(255,255,255,0.05)"],
[style*="background: rgba(255,255,255,0.1)"],
[style*="background: rgba(255, 255, 255, 0.1)"] {
    background: #eef2f8 !important;
}

/* Fix dark inline backgrounds on section divs */
[style*="background: rgba(255, 215, 0, 0.1)"],
[style*="background: rgba(255,215,0,0.1)"] {
    background: #fffae0 !important;
    border-color: rgba(200,150,12,0.4) !important;
}

/* Breadcrumb/stat numbers inline styles */
[style*="font-size: 2rem; color: var(--success)"],
[style*="font-size: 2rem;color:var(--success)"] {
    color: var(--success) !important;
}

/* Stats bar quick grid items */
[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
    gap: 12px;
}

/* Admin section info text */
.admin-section > p {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 12px;
}

/* Nav inner sections bold labels */
.admin-section h2 {
    color: var(--hdr-from) !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
}
.admin-section h3 {
    color: var(--accent) !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

/* Fix used cars page info banner */
#usedCarsPage > div[style*="background: rgba(243, 156, 18"] {
    background: #fff8e8 !important;
    border-left-color: #e67e00 !important;
}

/* Fix casino section */
.casino-container .card {
    background: var(--panel-bg);
}

/* Fix inline color on light-blue text in casino stats */
.casino-stat > div:first-child {
    color: var(--text-muted) !important;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
}

/* Leaderboard podium */
#lbPodium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Profile levels grid */
#profileLevelsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
    gap: 8px;
    margin-top: 10px;
}

/* Fix fin report section in myPropertiesPage */
#myPropertiesPage .card h2,
#myCarsPage .card h2 {
    color: var(--hdr-from);
    font-size: 13px;
    margin-bottom: 10px;
}

/* Slot machine spin button */
#spinButton {
    width: 100%;
    padding: 14px !important;
    font-size: 16px !important;
    margin-top: 14px;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #f0c840 0%, #d4a010 50%, #b07800 100%) !important;
    color: #3a2000 !important;
    border-color: #886000 !important;
}

/* Casino bet buttons styled */
.bet-btn[onclick*="setBet(10)"]  { background: #607090 !important; color: #fff !important; border-color: #405070 !important; }
.bet-btn[onclick*="setBet(50)"]  { background: #5a7040 !important; color: #fff !important; border-color: #3a5020 !important; }
.bet-btn[onclick*="setBet(100)"] { background: var(--casino-gold) !important; color: #3a2000 !important; }
.bet-btn[onclick*="setBet(500)"] { background: #c03020 !important; color: #fff !important; border-color: #802010 !important; }
.bet-btn[onclick*="setBet(1000)"]{ background: #7030a0 !important; color: #fff !important; border-color: #501870 !important; }
.bet-btn[onclick*="setBetAllIn"] { background: linear-gradient(135deg,#c03020,#7030a0) !important; color: #fff !important; font-weight: bold !important; }

/* Fix textarea in forms */
textarea {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    min-height: 60px;
}

/* Profile chart section title */
#capitalChartContainer h3,
#profileAchievements ~ * h3 {
    color: var(--hdr-from);
    font-size: 13px;
    margin-bottom: 8px;
}

/* Page transition animation */
.page-transition {
    animation: pageFadeIn 0.28s ease;
}

/* Achievement toast */
.achievement-unlock-toast {
    border: 1px solid #804000;
}

/* ===== BUG FIXES 2026-02-21 ===== */

/* Fix 1: Top-bar clip — prevents userInfo from spilling below 46px bar */
.top-bar { overflow: hidden; }

/* Fix 2: Hide level badge/bar inside header — too tall for 46px bar.
   Profile page uses separate IDs: profileLevelBadge, profileLevelFill */
#navbar #userLevelBadge,
#navbar #userLevelBar {
    display: none !important;
}

/* Fix 3: Ва-банк button — auto width so text isn't clipped */
.bet-btn[onclick*="setBetAllIn"] {
    width: auto !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
}

/* Fix 4: (merged into Fix 9/10 below) */

/* Fix 5: Admin page full-width layout (sidebar hidden via JS when admin open).
   Ensure admin page has proper content padding. */
#adminPage {
    padding: 20px 24px;
}
#adminPage > div:first-child {
    margin-bottom: 20px;
}

/* Fix 6: Admin tabs — horizontal scroll, single row, no wrap overlap */
.admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 3px;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.admin-tab {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Fix 7: Content-area pages — ensure top padding so content clears any overlap */
.page {
    padding-top: 4px;
}


/* Fix 9: Cards — add internal padding to pages where cards have no padding */
#myPropertiesPage .card,
#myCarsPage .card,
#investPage .card,
#reportPage .card,
#profilePage .card {
    padding: 16px 20px;
}
/* Casino card — full padding since content goes edge-to-edge */
.casino-container .card {
    padding: 16px 20px;
}

/* Fix 10: Profile net-worth column — prevent flex-squeeze */
#profilePage .card > div:first-child > div:last-child {
    min-width: 150px;
    flex-shrink: 0;
}

/* Fix 11: Adaptive grids — use smaller minmax for narrow viewports */
/* Invest stats grid */
#investPage .card > div > div[style*="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}
/* Investments card grid */
.investments-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Properties/cars grid — more columns on wide screens */
.properties-grid,
.cars-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Profile stats grid */
.profile-stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* ── Dark Theme ─────────────────────────────────────────────────────────── */
body.dark-theme {
    --primary-blue: #0f2147;
    --dark-blue: #070e1a;
    --accent-blue: #1a5ca8;
    --light-blue: #4a7aa5;
    --card-bg: #1a2535;
    --card-border: #2a3a55;
    --text-main: #d0dae8;
    --text-muted: #8a9ab0;
    --text-light: #6a7a90;
    --body-bg: #0d1520;
}
body.dark-theme .top-bar { background: var(--dark-blue); }
body.dark-theme .sidebar-btn { color: var(--text-main); }
body.dark-theme input, body.dark-theme select, body.dark-theme textarea {
    background: #1e2d42; color: var(--text-main); border-color: var(--card-border);
}
body.dark-theme .modal-content { background: #1a2535; color: var(--text-main); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-links {
        position: fixed; bottom: 0; top: auto !important; width: 100% !important;
        height: 52px !important; flex-direction: row !important;
        overflow-x: auto; overflow-y: hidden;
        border-top: 1px solid var(--card-border);
    }
    .sidebar-section { display: flex; flex-direction: row; padding: 0; }
    .sidebar-btn { display: inline-block; white-space: nowrap; padding: 14px 10px; font-size: 11px; border-radius: 0; }
    .main-content { margin-left: 0 !important; padding-bottom: 60px; }
    .top-bar { padding: 0 10px; }
    .page { padding: 10px !important; }
    .properties-grid, .cars-grid, .invest-grid, .biz-grid { grid-template-columns: 1fr !important; }
    .sidebar-bottom { display: none; }
}

/* ── Transaction filter buttons ──────────────────────────────────────────── */
.tx-filter-btn.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }