/* Radio - Main Styles */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0f0f0f;
    color: #e0e0e0;
    min-height: 100vh;
}

a { color: #7c9bff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nav */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #1a1a2e;
    border-bottom: 1px solid #2a2a4a;
}
.logo { font-size: 1.4rem; font-weight: bold; color: #fff; }
.nav-right { display: flex; gap: 1rem; align-items: center; }
.btn-link {
    background: none; border: none; color: #7c9bff;
    cursor: pointer; font-size: inherit;
}

/* Layout */
.radio-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    height: calc(100vh - 52px);
}
.player-section { padding: 1rem; }
.sidebar {
    display: flex; flex-direction: column;
    border-left: 1px solid #2a2a4a;
    overflow: hidden;
}

/* Player */
#player-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
#youtube-player { width: 100%; height: 100%; }
#youtube-player.idle {
    display: flex; align-items: center; justify-content: center;
    color: #666; font-size: 1.1rem;
}

/* Now Playing */
.now-playing-info {
    padding: 0.75rem 0;
    font-size: 0.95rem;
}
.now-playing-info .duration { color: #888; }
.now-playing-info .queued-by { color: #666; font-size: 0.85rem; }
.now-playing-info.idle { color: #666; }
.now-playing-info.idle-pick { color: #aa88ff; }
.idle-badge {
    font-size: 0.7rem;
    background: #2a1a3e;
    color: #aa88ff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.3rem;
}

/* Skip */
.btn-skip-small {
    background: #cc4444;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: 0.5rem;
}
.btn-skip-small:hover { background: #ee5555; }
.btn-tip-small {
    background: #d4a017;
    border: none;
    border-radius: 4px;
    color: #000;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    margin-left: 0.5rem;
}
.btn-tip-small:hover { background: #e8b82a; }
.tip-box {
    background: #2a2a1a;
    border: 1px solid #4a4a2a;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.tip-input-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.tip-input-row input {
    flex: 1;
    padding: 0.4rem;
    background: #0f0f0f;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.85rem;
}
.tip-input-row button {
    padding: 0.4rem 0.8rem;
    background: #d4a017;
    border: none;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}
.tip-input-row button:hover { background: #e8b82a; }
.tip-note { color: #888; font-size: 0.75rem; margin-top: 0.3rem; }
.skip-box {
    background: #2a1a1a;
    border: 1px solid #4a2a2a;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.skip-price { color: #cc4444; margin: 0.3rem 0; }
.skip-note { color: #888; font-size: 0.75rem; margin-bottom: 0.5rem; }
.btn-skip {
    width: 100%;
    padding: 0.5rem;
    background: #cc4444;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
.btn-skip:hover { background: #ee5555; }

/* Queue */
.queue-section {
    flex: 1; overflow-y: auto;
    padding: 1rem;
    border-bottom: 1px solid #2a2a4a;
}
.queue-section h2 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.queue-items { list-style: none; }
.queue-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #1a1a2e;
}
.queue-thumb { border-radius: 4px; object-fit: cover; }
.queue-item-info { flex: 1; min-width: 0; }
.queue-title {
    display: block; font-size: 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.queue-meta { font-size: 0.75rem; color: #888; }
.queue-empty { color: #666; font-size: 0.9rem; padding: 1rem 0; }
.btn-cancel {
    background: none; border: none; color: #ff5555;
    font-size: 1.2rem; cursor: pointer; padding: 0.25rem;
}

/* Queue Form */
.queue-form { margin-bottom: 1rem; }
.queue-form input[type="text"] {
    width: 100%;
    padding: 0.5rem;
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.9rem;
}
.queue-form button {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    background: #7c9bff;
    border: none;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}
.queue-form button:hover { background: #9bb5ff; }
#price-preview { margin-top: 0.5rem; font-size: 0.85rem; }
.price-info { display: flex; flex-direction: column; gap: 0.2rem; }
.price-amount { color: #7c9bff; font-weight: bold; }
.login-prompt { font-size: 0.9rem; color: #888; padding: 0.5rem 0; }

/* Chat */
.chat-section {
    flex: 1; display: flex; flex-direction: column;
    padding: 1rem; min-height: 200px;
}
.chat-section h2 { font-size: 1.1rem; margin-bottom: 0.5rem; }
#chat-messages {
    flex: 1; overflow-y: auto;
    font-size: 0.85rem;
    padding: 0.5rem 0;
}
.chat-msg { padding: 0.2rem 0; word-wrap: break-word; }
.chat-msg strong { color: #7c9bff; margin-right: 0.3rem; }
.chat-msg.system { color: #ffaa00; font-style: italic; }
.chat-msg.system strong { color: #ffaa00; }
.chat-msg.warning { color: #ff5555; font-style: italic; }
.chat-msg.warning strong { color: #ff5555; }

/* Chat roles & badges */
.chat-badge {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.badge-admin { background: #cc4444; color: #fff; }
.badge-mod { background: #44aa44; color: #fff; }
.badge-donor { background: #d4a017; color: #000; }

.name-admin { color: #ff6666; }
.name-mod { color: #66cc66; }
.name-donor { color: #ffd700; }

.role-donor span { color: #e0d0a0; }
#chat-form { margin-top: 0.5rem; }
.chat-input-row { display: flex; gap: 0.5rem; }
#chat-input {
    flex: 1;
    padding: 0.4rem;
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.85rem;
}
#chat-form button {
    padding: 0.4rem 0.8rem;
    background: #7c9bff;
    border: none;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

/* Emoji */
.emoji-toggle {
    background: none;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}
.emoji-toggle:hover { background: #2a2a4a; }
.emoji-picker {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 0.5rem;
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}
.emoji-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    line-height: 1;
}
.emoji-btn:hover { background: #2a2a4a; }

/* Viewer badge */
.viewer-badge { font-size: 0.85rem; color: #88cc88; }

/* Auth pages */
.auth-page {
    max-width: 400px;
    margin: 3rem auto;
    padding: 2rem;
    background: #1a1a2e;
    border-radius: 8px;
}
.auth-page.wide { max-width: 700px; }
.auth-page h1 { margin-bottom: 1rem; }
.auth-page h2 { margin-bottom: 1.5rem; }
.auth-page p { margin-top: 1rem; }
.auth-page form p { margin-bottom: 1rem; }
.auth-page label { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; }
.auth-page input[type="text"],
.auth-page input[type="password"] {
    width: 100%;
    padding: 0.5rem;
    background: #0f0f0f;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
}
.auth-page button {
    width: 100%;
    padding: 0.6rem;
    background: #7c9bff;
    border: none;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
}
.auth-page dl { margin-bottom: 1rem; }
.auth-page dt { font-weight: bold; color: #888; margin-top: 0.75rem; }
.auth-page dd { margin-left: 0; }
.mono { font-family: monospace; font-size: 0.85rem; word-break: break-all; }

/* Withdraw */
.withdraw-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f0f0f;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.balance-label { color: #888; font-size: 0.9rem; }
.balance-amount { color: #7c9bff; font-size: 1.4rem; font-weight: bold; font-family: monospace; }
.withdraw-success {
    background: #1a3a1a;
    border: 1px solid #2a6a2a;
    color: #88cc88;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.withdraw-error {
    background: #3a1a1a;
    border: 1px solid #6a2a2a;
    color: #ff5555;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.withdraw-fee { color: #888; font-size: 0.8rem; }
.field-hint { display: block; color: #666; font-size: 0.75rem; margin-top: 0.2rem; }

/* Transaction table */
.tx-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tx-table th, .tx-table td { padding: 0.5rem; text-align: left; border-bottom: 1px solid #2a2a4a; }
.tx-table th { color: #888; }

/* Payment flow */
.payment-box {
    background: #1a1a2e;
    border: 1px solid #3a3a6a;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.75rem;
}
.payment-box h3 { font-size: 1rem; margin-bottom: 0.5rem; color: #ffaa00; }
.payment-title { font-size: 0.85rem; color: #ccc; margin-bottom: 0.75rem; }
.payment-details { margin-bottom: 0.75rem; }
.payment-field { margin-bottom: 0.5rem; }
.payment-field label { display: block; font-size: 0.75rem; color: #888; margin-bottom: 0.2rem; }
.payment-amount { color: #7c9bff; font-size: 1.1rem; }
.payment-address, .payment-memo {
    display: block;
    background: #0f0f0f;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    word-break: break-all;
    cursor: pointer;
    color: #e0e0e0;
}
.payment-address:hover, .payment-memo:hover { background: #1a1a3e; }
.payment-warning {
    font-size: 0.75rem;
    color: #ffaa00;
    margin-bottom: 0.75rem;
}
.payment-confirm-form input[type="text"] {
    width: 100%;
    padding: 0.5rem;
    background: #0f0f0f;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.payment-confirm-form button {
    width: 100%;
    padding: 0.5rem;
    background: #44bb44;
    border: none;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}
.payment-confirm-form button:hover { background: #55dd55; }

/* Success message */
.queue-success {
    background: #1a3a1a;
    border: 1px solid #2a6a2a;
    color: #88cc88;
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

/* Leaderboards */
.leaderboard-page {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.leaderboard-page h1 { margin-bottom: 1.5rem; }

.lb-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.lb-tab {
    padding: 0.5rem 1rem;
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    font-size: 0.85rem;
}
.lb-tab.active, .lb-tab:hover {
    background: #2a2a4a;
    color: #e0e0e0;
    border-color: #7c9bff;
}

.lb-periods {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
}
.lb-period {
    padding: 0.35rem 0.75rem;
    background: none;
    border: 1px solid #2a2a4a;
    border-radius: 20px;
    color: #888;
    cursor: pointer;
    font-size: 0.8rem;
}
.lb-period.active, .lb-period:hover {
    background: #7c9bff;
    color: #000;
    border-color: #7c9bff;
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
}
.lb-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #2a2a4a;
}
.lb-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #1a1a2e;
    font-size: 0.9rem;
}
.lb-table tbody tr:hover { background: #1a1a2e; }
.lb-rank { width: 50px; }
.lb-value { text-align: right; font-family: monospace; }

.lb-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
}
.lb-medal.gold { background: #FFD700; color: #000; }
.lb-medal.silver { background: #C0C0C0; color: #000; }
.lb-medal.bronze { background: #CD7F32; color: #000; }

.lb-top-1 td { color: #FFD700; }
.lb-top-2 td { color: #C0C0C0; }
.lb-top-3 td { color: #CD7F32; }

.lb-empty {
    color: #666;
    text-align: center;
    padding: 3rem 0;
    font-size: 0.95rem;
}

.nav-active { color: #fff; font-weight: bold; }

/* Rules */
.rules-page {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.rules-page h1 { margin-bottom: 1.5rem; }
.rules-section {
    margin-bottom: 1.5rem;
    background: #1a1a2e;
    border-radius: 8px;
    padding: 1.25rem;
}
.rules-section h2 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: #7c9bff;
}
.rules-section ul {
    list-style: disc;
    padding-left: 1.25rem;
}
.rules-section li {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.rules-section p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}
.rules-warning {
    border: 1px solid #cc4444;
}
.rules-warning h2 { color: #cc4444; }
.rules-warning p { color: #cc4444; font-weight: bold; }

/* Play History */
.history-page {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.history-page h1 { margin-bottom: 0.25rem; }
.history-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; }
.history-table-wrap { overflow-x: auto; }
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.history-table th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    color: #666;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #2a2a4a;
    white-space: nowrap;
}
.history-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #1a1a2e;
    white-space: nowrap;
}
.history-table tbody tr:hover { background: #1a1a2e; }
.history-title {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-title a { color: #7c9bff; }
.history-title a:hover { text-decoration: underline; }
.center { text-align: center; }
.anon { color: #666; font-style: italic; }
.status-played { color: #88cc88; }
.status-skipped { color: #cc8844; }
.verify-link { color: #88aaff; font-size: 0.75rem; }
.verify-link:hover { color: #aaccff; }
.text-muted { color: #555; font-size: 0.75rem; }

/* Audit log */
.audit-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.audit-filters select, .audit-filters input {
    padding: 0.4rem 0.6rem;
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.85rem;
}
.audit-filters button {
    padding: 0.4rem 0.8rem;
    background: #7c9bff;
    border: none;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.85rem;
}
.audit-action {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    background: #2a2a4a;
    color: #aaa;
}
.audit-enqueue_paid, .audit-enqueue { background: #1a3a1a; color: #88cc88; }
.audit-skip_paid, .audit-skip { background: #3a2a1a; color: #cc8844; }
.audit-reward_distributed { background: #1a2a3a; color: #88aaff; }
.audit-reward_treasury { background: #2a1a3a; color: #aa88ff; }
.audit-withdrawal { background: #1a3a3a; color: #88cccc; }
.audit-withdrawal_failed { background: #3a1a1a; color: #cc4444; }
.audit-playback_error { background: #3a1a1a; color: #ff5555; }
.audit-error { background: #3a1a1a; color: #ff5555; }
.audit-register, .audit-login { background: #1a2a1a; color: #88bb88; }
.audit-challenge_sent, .audit-challenge_passed { background: #2a2a1a; color: #bbbb44; }
.audit-viewer_connect, .audit-viewer_disconnect { background: #1a1a2a; color: #7788aa; }

/* Mod reports */
.mod-badge {
    font-size: 0.8rem;
    background: #cc4444;
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.5rem;
}
.report-card {
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.report-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.report-status {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}
.report-pending { background: #3a2a1a; color: #ffaa44; }
.report-reviewed { background: #1a2a3a; color: #88aaff; }
.report-resolved { background: #1a3a1a; color: #88cc88; }
.report-dismissed { background: #2a2a2a; color: #888; }
.report-time { color: #666; font-size: 0.8rem; margin-left: auto; }
.report-body { font-size: 0.85rem; }
.report-body p { margin-bottom: 0.3rem; }
.report-detail { color: #ccc; margin-top: 0.5rem; }
.report-notes { color: #88aaff; font-style: italic; }
.report-resolved { color: #666; font-size: 0.8rem; }
.report-actions { margin-top: 0.75rem; }
.report-actions textarea {
    width: 100%;
    padding: 0.4rem;
    background: #0f0f0f;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 0.5rem;
}
.report-buttons { display: flex; gap: 0.5rem; }
.report-buttons button {
    padding: 0.35rem 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
}
.btn-dismiss { background: #555; color: #fff; }
.btn-resolve { background: #44aa44; color: #fff; }
.btn-ban { background: #cc4444; color: #fff; }

/* Donate */
.donate-page {
    max-width: 600px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.donate-page h1 { margin-bottom: 0.5rem; }
.donate-message { color: #ccc; font-size: 0.95rem; margin-bottom: 1.5rem; line-height: 1.5; }
.donate-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.donate-stat {
    flex: 1;
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}
.donate-stat-label { display: block; color: #888; font-size: 0.8rem; margin-bottom: 0.3rem; }
.donate-stat-value { display: block; color: #7c9bff; font-size: 1.3rem; font-weight: bold; font-family: monospace; }
.donate-how {
    background: #1a1a2e;
    border-radius: 8px;
    padding: 1.25rem;
}
.donate-how h2 { font-size: 1rem; color: #7c9bff; margin-bottom: 0.75rem; }
.donate-note { color: #888; font-size: 0.85rem; margin: 0.75rem 0; }
.donate-form { margin-top: 0.75rem; }
.donate-form input {
    width: 100%;
    padding: 0.5rem;
    background: #0f0f0f;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.donate-form button {
    width: 100%;
    padding: 0.5rem;
    background: #44bb44;
    border: none;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}
.donate-form button:hover { background: #55dd55; }
.donate-success {
    background: #1a3a1a;
    border: 1px solid #2a6a2a;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}
.donate-success h3 { color: #88cc88; margin-bottom: 0.5rem; }
.donate-total { color: #888; font-size: 0.85rem; }
.anon-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #888;
    margin: 0.4rem 0;
    cursor: pointer;
}
.anon-label input { cursor: pointer; }

/* Pagination */
.pagination {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.pagination a, .pagination .current-page, .pagination .ellipsis {
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.pagination a {
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    color: #7c9bff;
}
.pagination a:hover { background: #2a2a4a; text-decoration: none; }
.pagination .current-page {
    background: #7c9bff;
    color: #000;
    font-weight: bold;
}
.pagination .ellipsis { color: #666; }
.history-count {
    text-align: center;
    color: #666;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}
.history-empty { color: #666; text-align: center; padding: 3rem 0; }

/* Footer */
footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    border-top: 1px solid #1a1a2e;
    font-size: 0.8rem;
}
footer a { color: #666; }
footer a:hover { color: #aaa; }

/* Cookie Banner */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border-top: 1px solid #2a2a4a;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 9999;
    font-size: 0.8rem;
}
#cookie-banner p { color: #aaa; margin: 0; }
#cookie-banner a { color: #7c9bff; }
#cookie-banner button {
    background: #7c9bff;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 0.4rem 1rem;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Legal Pages */
.legal-page {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.legal-page h1 { margin-bottom: 0.25rem; }
.legal-updated { color: #888; font-size: 0.85rem; margin-bottom: 1.5rem; }
.legal-section {
    margin-bottom: 1.5rem;
}
.legal-section h2 {
    font-size: 1rem;
    color: #7c9bff;
    margin-bottom: 0.5rem;
}
.legal-section h3 {
    font-size: 0.9rem;
    color: #aaa;
    margin: 0.75rem 0 0.3rem;
}
.legal-section p, .legal-section li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ccc;
}
.legal-section ul {
    list-style: disc;
    padding-left: 1.25rem;
}
.legal-section li { margin-bottom: 0.3rem; }
.legal-section code {
    background: #0f0f0f;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

/* Form errors & TOS */
.field-error { display: block; color: #ff5555; font-size: 0.8rem; margin-top: 0.2rem; }
.tos-field { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tos-field input[type="checkbox"] { cursor: pointer; }
.tos-field label { font-size: 0.85rem; cursor: pointer; }

/* Responsive */
@media (max-width: 768px) {
    .radio-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .sidebar { border-left: none; border-top: 1px solid #2a2a4a; }
}