/**
 * OLAMI Master Manager — Unified Settings Styles
 * File: assets/css/settings-unified.css
 * Extracted from admin-common.css in Phase 22 (v428)
 *
 * Contains: Unified settings page, tabs, toggle switches, color pickers, responsive
 */

/* Source: includes/unified-settings.php line 2208 (block 1/1) */
/* ===========================================
       UNIFIED SETTINGS - Phase 1 Foundation
       Apple-inspired clean design
       =========================================== */
    
    .unified-settings-wrap {
        max-width: 1400px;
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    /* Success/Error Notices */
    .unified-settings-wrap .notice {
        margin: 0 0 20px 0;
        padding: 12px 16px;
        border-radius: 8px;
        border: none;
    }
    
    .unified-settings-wrap .notice-success {
        background: var(--success-bg);
        color: var(--success-text);
    }
    
    .unified-settings-wrap .notice p {
        margin: 0;
    }
    
    /* Status Bar */
    .settings-status-bar {
        margin-bottom: 24px;
    }
    
    .status-cards {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .status-card {
        background: var(--surface);
        border-radius: 12px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        min-width: 120px;
        position: relative;
    }
    
    .status-card .status-icon {
        font-size: 20px;
    }
    
    .status-card .status-info {
        display: flex;
        flex-direction: column;
    }
    
    .status-card .status-value {
        font-weight: 600;
        font-size: 15px;
        color: var(--text);
    }
    
    .status-card .status-label {
        font-size: 11px;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    
    .status-card .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        top: 8px;
        right: 8px;
    }
    
    .status-card.healthy .status-dot { background: var(--success); }
    .status-card.warning .status-dot { background: var(--warning); }
    .status-card.critical .status-dot { background: var(--danger); }
    .status-card.disabled .status-dot { background: var(--text-muted); }
    .status-card.disabled .status-value { color: var(--text-muted); }
    
    /* Pulse animation for active events */
    .status-dot.pulse {
        animation: pulse-animation 2s infinite;
    }
    
    @keyframes pulse-animation {
        0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7); }
        70% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
        100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
    }
    
    /* Setting select dropdown */
    .setting-select {
        padding: 10px 14px;
        font-size: 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        min-width: 180px;
        cursor: pointer;
    }
    
    .setting-select:focus {
        outline: none;
        border-color: var(--secondary);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    }

    /* Main Layout */
    .settings-layout {
        display: flex;
        gap: 24px;
        min-height: 600px;
    }
    
    /* Sidebar */
    .settings-sidebar {
        width: 200px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .settings-nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 10px;
        text-decoration: none;
        color: var(--text);
        font-weight: 500;
        font-size: 15px;
        transition: all 0.15s ease;
        background: transparent;
    }
    
    .settings-nav-item:hover {
        background: var(--bg);
        color: var(--text);
    }
    
    .settings-nav-item.active {
        background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-hover) 100%);
        color: var(--surface);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .settings-nav-item .nav-icon {
        font-size: 20px;
    }
    
    .settings-nav-item .nav-label {
        flex: 1;
    }
    
    /* Content Area */
    .settings-content {
        flex: 1;
        background: var(--surface);
        border-radius: 16px;
        padding: 32px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    
    .settings-section {
        
    }
    
    .section-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
    }

    .section-header h2 {
        margin: 0 0 6px 0;
        font-size: 24px;
        font-weight: 600;
        color: var(--text);
    }

    .section-header p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 14px;
    }
    
    /* Game Selector */
    .game-selector {
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .game-selector label {
        font-weight: 500;
        color: var(--text);
    }
    
    .game-dropdown {
        padding: 10px 16px;
        font-size: 15px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        min-width: 280px;
        cursor: pointer;
    }
    
    .game-dropdown:focus {
        outline: none;
        border-color: var(--secondary);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }
    
    /* Placeholder Content */
    .placeholder-content {
        display: flex;
        justify-content: center;
        padding: 40px 0;
    }
    
    .placeholder-box {
        text-align: center;
        padding: 40px 60px;
        background: linear-gradient(135deg, var(--bg) 0%, var(--border-light) 100%);
        border-radius: 16px;
        max-width: 500px;
    }
    
    .placeholder-box .placeholder-icon {
        font-size: 48px;
        display: block;
        margin-bottom: 16px;
    }
    
    .placeholder-box h3 {
        margin: 0 0 12px 0;
        font-size: 20px;
        color: var(--text);
    }

    .placeholder-box p {
        color: var(--text-secondary);
        margin: 0 0 16px 0;
    }
    
    .placeholder-box ul {
        text-align: left;
        margin: 0;
        padding-left: 20px;
        color: var(--text-secondary);
    }

    .placeholder-box li {
        margin-bottom: 6px;
        font-size: 14px;
    }
    
    /* ===========================================
       GAME SETTINGS CARDS (Phase 2)
       =========================================== */
    
    .game-settings-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    .settings-card {
        background: var(--surface-hover);
        border-radius: 12px;
        padding: 24px;
        border: 1px solid var(--border);
    }
    
    .card-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-header h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        color: var(--text);
    }
    
    /* Setting Rows */
    .setting-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid var(--border-light);
    }

    .setting-row:last-child {
        border-bottom: none;
    }
    
    .setting-info {
        flex: 1;
    }
    
    .setting-info.full-width {
        flex: none;
        width: 100%;
    }
    
    .setting-label {
        display: block;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 2px;
    }
    
    .setting-desc {
        display: block;
        font-size: 13px;
        color: var(--text-secondary);
    }
    
    /* Toggle Switch */
    .toggle-switch {
        position: relative;
        width: 51px;
        height: 31px;
        flex-shrink: 0;
    }
    
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--border-light);
        transition: 0.3s;
        border-radius: 31px;
    }
    
    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 27px;
        width: 27px;
        left: 2px;
        bottom: 2px;
        background-color: var(--surface);
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .toggle-switch input:checked + .toggle-slider {
        background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-hover) 100%);
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }
    
    /* Slider Row */
    .slider-container {
        width: 320px;
        flex-shrink: 0;
    }
    
    .slider-labels {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: var(--text-secondary);
        margin-bottom: 8px;
    }
    
    .luck-slider {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: linear-gradient(to right, var(--danger), var(--warning), var(--success), var(--success));
        outline: none;
        -webkit-appearance: none;
    }
    
    .luck-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--surface);
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        border: 2px solid var(--secondary);
    }
    
    .slider-value {
        font-size: 13px;
        color: var(--text);
        margin-top: 8px;
        text-align: center;
    }
    
    /* Select Row */
    .setting-select {
        padding: 8px 12px;
        font-size: 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        min-width: 180px;
    }
    
    .setting-select:focus {
        outline: none;
        border-color: var(--secondary);
    }
    
    /* Number Input */
    .number-input {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .number-input input {
        width: 70px;
        padding: 8px 12px;
        font-size: 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        text-align: center;
    }
    
    .number-input input:focus {
        outline: none;
        border-color: var(--secondary);
    }
    
    .input-suffix {
        font-size: 13px;
        color: var(--text-secondary);
    }
    
    /* Action Buttons */
    .setting-actions {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
    }

    .btn-save {
        padding: 10px 24px;
        font-size: 14px;
        font-weight: 500;
        color: var(--surface);
        background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-hover) 100%);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-save:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    /* Access List Section */
    .access-list-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
    }

    .access-list-section h4 {
        margin: 0 0 8px 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
    }
    
    .section-note {
        font-size: 13px;
        color: var(--text-secondary);
        margin: 0 0 16px 0;
    }
    
    .grant-form {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .grant-form select {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
    }
    
    .btn-grant {
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        color: var(--surface);
        background: var(--success);
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }
    
    .btn-grant:hover {
        background: var(--success);
    }
    
    .empty-list {
        color: var(--text-secondary);
        font-style: italic;
        padding: 20px;
        text-align: center;
        background: var(--bg);
        border-radius: 8px;
    }
    
    .access-table {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .access-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--surface);
        border-radius: 8px;
        border: 1px solid var(--border);
    }
    
    .access-user {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .access-user .user-avatar img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    
    .user-info {
        display: flex;
        flex-direction: column;
    }
    
    .user-name {
        font-weight: 500;
        color: var(--text);
    }
    
    .user-meta {
        font-size: 12px;
        color: var(--text-secondary);
    }
    
    .btn-revoke {
        padding: 6px 12px;
        font-size: 12px;
        color: var(--danger);
        background: var(--surface);
        border: 1px solid var(--danger);
        border-radius: 6px;
        text-decoration: none;
        cursor: pointer;
    }
    
    .btn-revoke:hover {
        background: var(--danger);
        color: var(--surface);
    }
    
    /* Difficulty Mode Cards */
    .difficulty-modes {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin: 12px 0 20px;
    }
    
    .mode-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 12px;
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
    }
    
    .mode-card:hover {
        border-color: var(--secondary);
    }

    .mode-card.active {
        border-color: var(--secondary);
        background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
    }
    
    .mode-card input {
        display: none;
    }
    
    .mode-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .mode-title {
        font-weight: 600;
        font-size: 13px;
        color: var(--text);
        margin-bottom: 4px;
    }
    
    .mode-desc {
        font-size: 11px;
        color: var(--text-secondary);
    }
    
    .conditional-settings {
        background: var(--surface);
        border-radius: 8px;
        padding: 0 16px;
        margin-bottom: 16px;
        border: 1px solid var(--border);
    }
    
    /* ===========================================
       HAR SINAI SPECIFIC STYLES (Phase 3)
       =========================================== */
    
    .card-badge {
        background: var(--secondary);
        color: var(--surface);
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: 500;
    }
    
    /* Progression Table */
    .progression-table {
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .progression-header {
        display: grid;
        grid-template-columns: 60px 1fr 120px 100px 100px;
        gap: 10px;
        padding: 12px 16px;
        background: var(--bg);
        font-weight: 600;
        font-size: 12px;
        color: var(--text-secondary);
        text-transform: uppercase;
    }
    
    .progression-row {
        display: grid;
        grid-template-columns: 60px 1fr 120px 100px 100px;
        gap: 10px;
        padding: 10px 16px;
        border-top: 1px solid var(--border-light);
        align-items: center;
    }
    
    .progression-row.milestone-row {
        background: linear-gradient(90deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
    }
    
    .col-q {
        font-weight: 600;
        color: var(--text);
    }
    
    .col-milestone {
        font-size: 12px;
        color: var(--secondary);
        font-weight: 500;
    }
    
    .mini-select {
        padding: 6px 8px;
        font-size: 13px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        min-width: 120px;
    }
    
    .mini-input {
        width: 60px;
        padding: 6px 8px;
        font-size: 13px;
        border: 1px solid var(--border);
        border-radius: 6px;
        text-align: center;
    }
    
    .milestone-config {
        background: var(--surface-hover);
        padding: 16px;
        border-radius: 8px;
        margin-top: 16px;
    }
    
    .milestone-config h4 {
        margin: 0 0 12px 0;
        font-size: 14px;
        color: var(--text);
    }
    
    .inline-settings {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    }
    
    .inline-setting {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .inline-setting label {
        font-size: 13px;
        color: var(--text-secondary);
    }
    
    .small-select {
        padding: 6px 10px;
        font-size: 13px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
    }
    
    .small-input {
        width: 70px;
        padding: 6px 10px;
        font-size: 13px;
        border: 1px solid var(--border);
        border-radius: 6px;
        text-align: center;
    }
    
    .hint {
        font-size: 12px;
        color: var(--text-secondary);
        margin: 12px 0 0 0;
    }
    
    /* Timer Grid */
    .timer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    
    .timer-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        background: var(--surface-hover);
        border-radius: 8px;
        text-align: center;
    }
    
    .timer-label {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
    }
    
    .timer-item .number-input {
        justify-content: center;
    }
    
    /* Bonus Items */
    .bonus-item {
        padding: 16px 0;
        border-bottom: 1px solid var(--border-light);
    }
    
    .bonus-item:last-child {
        border-bottom: none;
    }
    
    .bonus-amount {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding-left: 20px;
    }
    
    .bonus-amount label {
        font-size: 13px;
        color: var(--text-secondary);
    }
    
    .btn-large {
        padding: 14px 32px;
        font-size: 16px;
    }
    
    .user-select {
        flex: 1;
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        max-width: 300px;
    }
    
    /* ===========================================
       TRIVIA TAB STYLES (Phase 4)
       =========================================== */
    
    /* Streak Grid */
    .streak-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin: 16px 0;
    }
    
    .streak-item {
        background: linear-gradient(135deg, var(--surface) 0%, var(--surface-hover) 100%);
        border: 2px solid var(--border);
        border-radius: 12px;
        padding: 20px 16px;
        text-align: center;
        transition: all 0.2s;
    }
    
    .streak-item:hover {
        border-color: var(--secondary);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    }
    
    .streak-count {
        font-size: 32px;
        font-weight: 700;
        color: var(--secondary);
        line-height: 1;
    }
    
    .streak-label {
        font-size: 12px;
        color: var(--text-secondary);
        margin-bottom: 12px;
    }
    
    .streak-input {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .streak-input input {
        width: 60px;
        padding: 8px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        border: 1px solid var(--border);
        border-radius: 8px;
    }
    
    .streak-input span {
        font-size: 18px;
        color: var(--secondary);
        font-weight: 600;
    }
    
    /* Stage Cards */
    .stage-card {
        border-left: 4px solid var(--secondary);
    }
    
    .stage-desc {
        color: var(--text-secondary);
        font-size: 14px;
        margin: 0 0 20px 0;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-light);
    }
    
    .stage-settings {
        padding-top: 8px;
    }
    
    .subsection-label {
        font-weight: 500;
        font-size: 13px;
        color: var(--text);
        margin: 16px 0 12px 0;
    }
    
    /* Rewards Grid */
    .rewards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .reward-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        background: var(--surface-hover);
        border-radius: 8px;
        text-align: center;
    }
    
    .reward-item span {
        font-size: 12px;
        color: var(--text-secondary);
    }
    
    .reward-item input {
        width: 70px;
        margin: 0 auto;
    }
    
    /* ===========================================
       ECONOMY TAB STYLES (Phase 5)
       =========================================== */
    
    .reserve-balance {
        font-size: 16px;
        font-weight: 600;
        padding: 6px 12px;
        border-radius: 8px;
        background: var(--bg);
    }
    
    .reserve-balance.healthy { background: var(--success-bg); color: var(--success-text); }
    .reserve-balance.warning { background: var(--warning-bg); color: var(--warning-text); }
    .reserve-balance.critical { background: var(--danger-bg); color: var(--danger-text); }
    
    /* Limits Grid */
    .limits-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin: 16px 0;
    }
    
    .limit-item {
        background: var(--surface-hover);
        border-radius: 12px;
        padding: 20px 16px;
        text-align: center;
        border: 1px solid var(--border);
    }
    
    .limit-icon {
        font-size: 28px;
        display: block;
        margin-bottom: 8px;
    }
    
    .limit-label {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        display: block;
        margin-bottom: 12px;
    }
    
    .limit-input {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .limit-input input {
        width: 80px;
        padding: 8px;
        font-size: 14px;
        text-align: center;
        border: 1px solid var(--border);
        border-radius: 8px;
    }
    
    .limit-input span {
        font-size: 12px;
        color: var(--text-secondary);
    }
    
    /* Inline checkbox */
    .inline-checkbox {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-right: 20px;
        cursor: pointer;
    }
    
    .inline-checkbox input {
        width: 16px;
        height: 16px;
    }
    
    /* Restrictions Grid */
    .restrictions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 16px 0;
    }
    
    .restriction-item {
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
    }
    
    .restriction-toggle {
        display: flex;
        flex-direction: column;
        padding: 16px;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .restriction-toggle:hover {
        background: var(--surface-hover);
    }
    
    .restriction-toggle input {
        position: absolute;
        opacity: 0;
    }
    
    .restriction-toggle input:checked ~ .restriction-icon {
        opacity: 1;
    }
    
    .restriction-toggle input:not(:checked) ~ .restriction-icon {
        opacity: 0.4;
    }
    
    .restriction-toggle input:checked ~ .restriction-label {
        color: var(--danger);
    }
    
    .restriction-icon {
        font-size: 24px;
        margin-bottom: 8px;
        transition: opacity 0.2s;
    }
    
    .restriction-label {
        font-weight: 600;
        font-size: 14px;
        color: var(--text);
        margin-bottom: 4px;
    }
    
    .restriction-desc {
        font-size: 12px;
        color: var(--text-secondary);
    }
    
    .special-rule {
        background: var(--bg);
        margin: 0 -24px;
        padding: 16px 24px !important;
        border-top: 1px solid var(--border);
    }
    
    /* Collapsed Card */
    .collapsed-card .card-header.clickable {
        cursor: pointer;
        user-select: none;
    }
    
    .collapsed-card .card-header.clickable:hover {
        background: var(--surface-hover);
        margin: -24px -24px 0;
        padding: 24px;
        border-radius: 12px 12px 0 0;
    }
    
    .expand-icon {
        font-size: 12px;
        color: var(--text-secondary);
        transition: transform 0.2s;
    }
    
    .advanced-content {
        padding-top: 20px;
        border-top: 1px solid var(--border);
        margin-top: 20px;
    }
    
    /* Source Rules */
    .source-rules {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
    }
    
    .source-rule {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--surface-hover);
        border-radius: 8px;
    }
    
    .source-name {
        font-size: 14px;
        color: var(--text);
    }
    
    .source-checkboxes {
        display: flex;
        gap: 16px;
    }
    
    .source-checkboxes label {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        cursor: pointer;
    }
    
    /* ===========================================
       ARENA TAB STYLES (Phase 6)
       =========================================== */
    
    .snipe-settings {
        background: var(--surface-hover);
        padding: 16px;
        border-radius: 8px;
        margin-top: 12px;
    }
    
    .test-emails-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
    }

    .test-emails-section h4 {
        margin: 0 0 8px 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }
    
    .test-email-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px;
    }
    
    .btn-test {
        padding: 8px 14px;
        font-size: 13px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-test:hover {
        background: var(--bg);
        border-color: var(--secondary);
    }
    
    #test-email-result {
        margin-top: 12px;
        font-size: 13px;
    }
    
    /* Mobile Responsive */
    @media (max-width: 900px) {
        .settings-layout {
            flex-direction: column;
        }
        
        .settings-sidebar {
            width: 100%;
            flex-direction: row;
            overflow-x: auto;
            gap: 8px;
            padding-bottom: 8px;
        }
        
        .settings-nav-item {
            flex-shrink: 0;
            padding: 10px 14px;
        }
        
        .status-cards {
            overflow-x: auto;
            flex-wrap: nowrap;
            padding-bottom: 8px;
        }
        
        .status-card {
            flex-shrink: 0;
        }
    }
    
    @media (max-width: 600px) {
        .settings-content {
            padding: 20px;
            border-radius: 12px;
        }
        
        .section-header h2 {
            font-size: 20px;
        }
        
        .game-selector {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .game-dropdown {
            width: 100%;
        }
        
        .placeholder-box {
            padding: 24px;
        }
        
        /* Game Settings Mobile */
        .setting-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        
        .slider-container {
            width: 100%;
        }
        
        .difficulty-modes {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .grant-form {
            flex-direction: column;
        }
        
        .access-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        
        .btn-revoke {
            align-self: flex-end;
        }
        
        /* Har Sinai Mobile */
        .progression-header,
        .progression-row {
            grid-template-columns: 50px 1fr 80px;
        }
        
        .col-total,
        .col-milestone {
            display: none;
        }
        
        .timer-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .bonus-amount {
            flex-wrap: wrap;
        }
        
        .inline-settings {
            flex-direction: column;
            gap: 12px;
        }
        
        .user-select {
            max-width: 100%;
        }
        
        /* Trivia Mobile */
        .streak-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .rewards-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        /* Economy Mobile */
        .limits-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .restrictions-grid {
            grid-template-columns: 1fr;
        }
        
        .source-rule {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        
        .source-checkboxes {
            flex-wrap: wrap;
        }
    }