/* =========================================================================
   GRUE GAME LOUNGE — Dark Dungeon Theme
   "It is pitch dark. You are likely to find a game."
   ========================================================================= */

/* Fonts loaded via Google Fonts in HTML:
   - Cinzel (400, 700)   — display/headings
   - Lora (400-700, 400i) — body text
   System sans-serif for UI elements, monospace for code
*/

:root {
    /* Brand accent */
    --amber: #d4860a;
    --gold: #e6a817;
    --gold-dim: #c89b1d;

    /* Backgrounds */
    --bg: #110e0a;
    --surface: #181412;
    --surface-raised: #201b16;
    --surface-hover: #2a241c;

    /* Text */
    --text: #ddd0be;
    --text-muted: #b0a08a;
    --text-bright: #f0e8d8;

    /* Cards */
    --card-bg: #1a1613;
    --card-shadow: rgba(0, 0, 0, 0.5);
    --card-hover-shadow: rgba(212, 134, 10, 0.12);

    /* Borders */
    --border: #302820;
    --border-light: #3c3226;

    /* Server identity */
    --phoenix: #e07030;
    --phoenix-bg: linear-gradient(135deg, #4a1a08, #7a3010, #4a2008);
    --dragon: #30a898;
    --dragon-bg: linear-gradient(135deg, #0a2a3a, #1a4a4a, #0a3a3a);

    /* Status */
    --green: #3da864;
    --green-glow: #4ec878;
    --danger: #e74c3c;
    --warning: #e6a817;

    /* Discord */
    --discord-blurple: #5865F2;

    /* Legacy variable compat — remapped for dark mode */
    --cream: #1c1814;
    --warm-white: #1c1814;
    --dark-wood: #e8dcc8;
    --medium-wood: #3a2a1a;
    --soft-brown: #a08868;
}

/* ========================================
   RESET & BASE
   ======================================== */

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

body {
    font-family: 'Lora', Georgia, serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--gold-dim);
}

/* Noise grain overlay — adds tactile depth */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 10000;
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* ========================================
   LOGIN GATE
   ======================================== */

.login-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Ambient torchlight glow */
.login-gate::before {
    content: '';
    position: absolute;
    top: 42%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(212, 134, 10, 0.07) 0%, rgba(212, 134, 10, 0.02) 40%, transparent 70%);
    pointer-events: none;
    animation: torchPulse 4s ease-in-out infinite;
}

@keyframes torchPulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
}

.login-card {
    text-align: center;
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.login-title {
    font-family: 'Cinzel', serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 0.4rem;
    letter-spacing: 0.06em;
    text-shadow: 0 0 60px rgba(212, 134, 10, 0.25), 0 0 120px rgba(212, 134, 10, 0.08);
    line-height: 1.2;
}

/* Tagline injected via CSS on login page */
.login-title::after {
    content: 'It is pitch dark. You are likely to find a game.';
    display: block;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(221, 208, 190, 0.45);
    margin-top: 0.6rem;
    letter-spacing: 0.02em;
    text-shadow: none;
}

.btn-discord-login {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--discord-blurple);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    margin-top: 2rem;
}

.btn-discord-login:hover {
    background: #4752C4;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.3);
}

.btn-discord-login:active {
    transform: translateY(0);
}

.login-note {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 0.78rem;
    color: rgba(138, 122, 102, 0.6);
    margin-top: 1.2rem;
    letter-spacing: 0.04em;
}

.login-note::before {
    content: '> ';
    color: var(--amber);
    opacity: 0.5;
}

.login-error-flash {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    color: #fff;
    background: rgba(231, 76, 60, 0.92);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    max-width: 90vw;
    backdrop-filter: blur(8px);
}

.login-error-flash.visible {
    opacity: 1;
}

/* ========================================
   USER CONTROLS (header bar)
   ======================================== */

.user-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(232, 220, 200, 0.25);
}

.user-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.btn-steam-link {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(232, 220, 200, 0.15);
    border-radius: 4px;
    background: rgba(27, 40, 56, 0.4);
    color: rgba(232, 220, 200, 0.6);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-steam-link:hover {
    background: rgba(27, 40, 56, 0.7);
    color: var(--text);
}

.btn-steam-linked {
    border-color: rgba(42, 71, 94, 0.4);
    background: rgba(42, 71, 94, 0.3);
}

.btn-signout {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(232, 220, 200, 0.15);
    border-radius: 4px;
    background: transparent;
    color: rgba(232, 220, 200, 0.5);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-signout:hover {
    background: rgba(232, 220, 200, 0.08);
    color: var(--text);
}

/* ========================================
   ROLE BADGES
   ======================================== */

.badge-role {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
}

.badge-admin {
    background: rgba(231, 76, 60, 0.25);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.badge-gm {
    background: rgba(232, 220, 200, 0.1);
    color: var(--text);
    border: 1px solid rgba(232, 220, 200, 0.2);
}

.badge-member {
    background: rgba(232, 220, 200, 0.06);
    color: rgba(232, 220, 200, 0.6);
    border: 1px solid rgba(232, 220, 200, 0.12);
}

/* ========================================
   HERO
   ======================================== */

.hero {
    background: #000;
    color: var(--text);
    padding: 1.4rem 1.5rem;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--border);
    z-index: 800;
}

/* Subtle amber accent line at bottom of hero */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0.4;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    max-width: 600px;
    margin: 0 auto;
    justify-content: center;
}

.phoenix-icon {
    flex-shrink: 0;
    cursor: pointer;
}

.phoenix-icon video {
    display: block;
}

.hero-text {
    text-align: left;
}

.hero h1 {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.1rem;
    color: var(--text-bright);
}

.tagline {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 0.88rem;
    color: rgba(221, 208, 190, 0.5);
}

/* ========================================
   MAIN CONTENT
   ======================================== */

main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 3rem 4rem;
    flex: 1;
    width: 100%;
}

section {
    margin-bottom: 3rem;
}

h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-bright);
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    display: inline-block;
    letter-spacing: 0.04em;
}

/* ========================================
   GAME CARDS
   ======================================== */

.card-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 0.5rem;
}

.game-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.game-group-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    margin-right: 1.25rem;
}

.game-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    flex: 1;
}

.games-divider {
    display: none;
}

.game-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(212, 134, 10, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 134, 10, 0.25);
}

.game-card.card-active {
    border-color: var(--green);
    box-shadow: 0 0 20px rgba(61, 168, 100, 0.12), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.game-banner {
    height: 200px;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem 1rem;
}

.banner-default {
    background: linear-gradient(135deg, #0a1a2a, #12303a, #0a2028);
}

.banner-pf2e {
    background: linear-gradient(135deg, #3a1505, #6a2810, #3a1808);
}

.banner-custom {
    background: linear-gradient(135deg, #0a1a0a, #1a2a1a, #0a1810);
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
}

.game-banner-title {
    position: relative;
    z-index: 1;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.player-count-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.game-status-tag {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-status-tag.tag-active {
    background: rgba(61, 168, 100, 0.85);
    color: #fff;
    border-color: rgba(61, 168, 100, 0.5);
    animation: pulse-glow 2s ease-in-out infinite;
}

.game-status-tag.tag-idle {
    background: rgba(0, 0, 0, 0.55);
    color: rgba(200, 180, 140, 0.8);
    border-color: rgba(200, 180, 140, 0.2);
}

.game-status-tag.tag-locked {
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}

.game-status-tag.tag-offline {
    background: rgba(180, 40, 40, 0.6);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(180, 40, 40, 0.4);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(61, 168, 100, 0.4); }
    50% { box-shadow: 0 0 16px rgba(61, 168, 100, 0.6); }
}

.game-card-body {
    padding: 0.75rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-card-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.game-card-desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-card-desc h3, .game-card-desc h4, .game-card-desc h5 {
    font-size: 0.85rem;
    margin: 0.3rem 0 0.1rem;
    color: var(--text);
}

.game-card-desc p {
    margin: 0.2rem 0;
}

.player-names {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.75;
    margin-top: 0.3rem;
    line-height: 1.3;
}

.game-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.card-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.card-version {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.game-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.btn-join {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.2s;
}

.btn-join-active {
    background: var(--green);
    color: #fff;
}

.btn-join-active:hover {
    background: var(--green-glow);
    box-shadow: 0 0 12px rgba(61, 168, 100, 0.25);
}

.btn-join-start {
    background: rgba(160, 120, 40, 0.35);
    color: var(--gold);
    border: 1px solid rgba(200, 155, 29, 0.3);
}
.btn-join-start:hover:not(:disabled) {
    background: rgba(160, 120, 40, 0.5);
    border-color: rgba(200, 155, 29, 0.5);
}
.btn-join-start:disabled {
    opacity: 0.5;
    cursor: wait;
}

.status-hint {
    display: block;
    font-size: 0.7rem;
    color: rgba(232, 220, 200, 0.3);
    margin-top: 0.2rem;
}

.btn-join-launch {
    background: var(--gold-dim);
    color: #fff;
}

.btn-join-launch:hover:not(:disabled) {
    background: var(--gold);
}

.btn-join-launch:disabled {
    opacity: 0.5;
    cursor: wait;
}

.btn-launching {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

.launch-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-join-locked {
    background: rgba(232, 220, 200, 0.06);
    color: var(--text-muted);
    cursor: default;
    opacity: 0.5;
}

.game-connect-info {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
}

.btn-join-copy {
    background: var(--medium-wood);
    color: var(--text);
}

.btn-join-copy:hover {
    background: var(--soft-brown);
}

.btn-copied {
    background: var(--green) !important;
    color: #fff !important;
}

.btn-join-steam {
    background: linear-gradient(135deg, #1b2838, #2a475e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-join-steam:hover {
    background: linear-gradient(135deg, #2a475e, #3d6a8a);
    color: #fff;
}

.steam-icon {
    flex-shrink: 0;
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.badge-system {
    background: rgba(232, 220, 200, 0.08);
    color: var(--soft-brown);
    border: 1px solid var(--border);
}

.badge-gm {
    background: rgba(232, 220, 200, 0.08);
    color: var(--soft-brown);
    border: 1px solid var(--border);
}

.badge-available {
    background: rgba(61, 168, 100, 0.12);
    color: var(--green-glow);
    border: 1px solid rgba(61, 168, 100, 0.25);
}

.badge-server-phoenix {
    background: rgba(224, 112, 48, 0.15);
    color: var(--phoenix);
    border: 1px solid rgba(224, 112, 48, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.badge-server-dragon {
    background: rgba(48, 168, 152, 0.15);
    color: var(--dragon);
    border: 1px solid rgba(48, 168, 152, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

/* ========================================
   SCHEDULE
   ======================================== */

.schedule-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.schedule-header h2 {
    margin-bottom: 0;
}

.btn-edit-schedule {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    background: transparent;
    color: var(--gold-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 0.4rem;
}

.btn-edit-schedule:hover {
    background: var(--gold-dim);
    color: #fff;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.schedule-table thead {
    border-bottom: 1px solid var(--border-light);
}

.schedule-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.schedule-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.schedule-table tbody tr:hover {
    background: rgba(212, 134, 10, 0.04);
}

.schedule-empty td {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 1.25rem;
}

.schedule-empty:hover {
    background: transparent !important;
}

.schedule-loading td {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 1.25rem;
}

/* Inline action buttons on schedule rows */
.btn-inline {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-right: 0.25rem;
}

.btn-inline-edit {
    color: var(--gold-dim);
    border-color: rgba(200, 155, 29, 0.4);
}

.btn-inline-edit:hover {
    background: var(--gold-dim);
    color: #fff;
}

.btn-inline-delete {
    color: var(--danger);
    border-color: rgba(231, 76, 60, 0.4);
}

.btn-inline-delete:hover {
    background: var(--danger);
    color: #fff;
}

.col-actions {
    width: 100px;
}

/* ========================================
   ABOUT SECTION
   ======================================== */

.about p {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 700px;
    margin-bottom: 1.5rem;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.feature {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
}

.feature h3 {
    font-size: 1rem;
    color: var(--text-bright);
    margin-bottom: 0.4rem;
}

.feature p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* ========================================
   MODAL (Add/Edit Session)
   ======================================== */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.modal-header h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--text-bright);
    font-weight: 400;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text);
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-group label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.3rem;
}

.form-group input,
.form-group select {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--gold-dim);
    box-shadow: 0 0 0 2px rgba(200, 155, 29, 0.15);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn-primary {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 6px;
    background: var(--gold-dim);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.2s;
}

.btn-primary:hover {
    background: var(--gold);
    box-shadow: 0 0 12px rgba(230, 168, 23, 0.2);
}

.btn-secondary {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.save-status {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    text-align: right;
    margin-top: 0.5rem;
    min-height: 1.2em;
    color: var(--text-muted);
}

.save-error { color: var(--danger); }
.save-success { color: var(--green); }

/* ========================================
   FOOTER
   ======================================== */

footer {
    text-align: center;
    padding: 1.5rem;
    padding-bottom: 3.5rem;
    color: rgba(138, 122, 102, 0.4);
    font-size: 0.85rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

/* ========================================
   MANAGE BAR
   ======================================== */

.manage-bar {
    margin-top: 1rem;
    text-align: center;
}

.btn-manage {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    background: transparent;
    color: var(--gold-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.2s;
}

.btn-manage:hover {
    background: var(--gold-dim);
    color: #fff;
    box-shadow: 0 0 16px rgba(200, 155, 29, 0.15);
}

/* ========================================
   MANAGEMENT PANEL
   ======================================== */

.mgmt-panel {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    min-height: 100vh;
}

.mgmt-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

.mgmt-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--text-bright);
    margin: 0;
    border: none;
    padding: 0;
    display: inline;
}

.btn-back {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.btn-back:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Server Status Bar */
.mgmt-server-status {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.srv-pill {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card-bg);
}

.srv-pill strong {
    margin-right: 0.3rem;
}

.srv-idle {
    border-color: rgba(61, 168, 100, 0.3);
    color: var(--green);
}

.srv-active {
    border-color: rgba(212, 134, 10, 0.3);
    color: var(--amber);
    background: rgba(212, 134, 10, 0.06);
}

/* Tabs */
.mgmt-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.mgmt-tab {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.mgmt-tab:hover {
    color: var(--text);
}

.mgmt-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Tab content */
.mgmt-content {
    min-height: 300px;
}

.mgmt-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Small button variant */
.btn-sm {
    font-size: 0.8rem !important;
    padding: 0.35rem 0.8rem !important;
}

/* Worlds */
.worlds-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.world-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    gap: 1rem;
    flex-wrap: wrap;
}

.world-info h3 {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-bright);
    margin-bottom: 0.25rem;
}

.world-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.world-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.world-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.world-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.world-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.world-errors {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.world-errors .error-label {
    color: var(--danger);
    font-weight: 600;
}

.world-errors .error-count {
    color: var(--text-muted);
}

.world-errors .error-count.has-errors {
    color: var(--danger);
}

.report-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    background: rgba(200, 155, 29, 0.12);
    color: var(--gold-dim);
    border: 1px solid rgba(200, 155, 29, 0.25);
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
}

.report-btn:hover {
    background: rgba(200, 155, 29, 0.2);
}

.srv-active-badge {
    background: rgba(212, 134, 10, 0.15);
    color: var(--amber);
    border: 1px solid rgba(212, 134, 10, 0.25);
}

.srv-idle-badge {
    background: rgba(61, 168, 100, 0.12);
    color: var(--green);
    border: 1px solid rgba(61, 168, 100, 0.25);
}

/* Files */
.file-breadcrumb {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0;
    color: var(--text-muted);
}

.bc-link {
    color: var(--gold);
    text-decoration: none;
}

.bc-link:hover {
    color: var(--gold-dim);
    text-decoration: underline;
}

.file-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
}

.file-table thead {
    border-bottom: 1px solid var(--border-light);
}

.file-table th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.file-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.file-table tbody tr:hover {
    background: rgba(212, 134, 10, 0.04);
}

.file-link {
    color: var(--text);
}

.dir-link {
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
}

.dir-link:hover {
    color: var(--gold-dim);
}

.btn-upload-label {
    display: inline-block;
    cursor: pointer;
}

.upload-status {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    min-height: 1.2em;
    color: var(--text-muted);
}

.upload-ok { color: var(--green); }
.upload-warn { color: var(--amber); }
.upload-error { color: var(--danger); }

/* Modules */
.module-install-form,
.backup-create-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.input-manifest {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    min-width: 300px;
}

.input-manifest:focus {
    outline: none;
    border-color: var(--gold-dim);
}

.input-select {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.input-select-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
}

.input-note {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    min-width: 180px;
}

.input-note:focus,
.input-select:focus {
    outline: none;
    border-color: var(--gold-dim);
}

/* ========================================
   CREATE WORLD MODAL
   ======================================== */

.modal-wide {
    max-width: 700px;
}

.modal-sm {
    max-width: 380px;
}

.progress-body {
    padding: 0.25rem 0;
}

.progress-log {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-height: 200px;
    overflow-y: auto;
}

.progress-log .log-entry {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.progress-log .log-spinner { color: var(--amber); }
.progress-log .log-done { color: var(--green); }
.progress-log .log-error { color: var(--danger); }

.progress-actions {
    margin-top: 1rem;
    text-align: right;
}

.create-world-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.cw-tab {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.cw-tab:hover { color: var(--text); }

.cw-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.form-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.5rem;
}

/* System Cards Grid */
.system-cards-grid,
.clone-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.system-card,
.clone-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.system-card:hover,
.clone-card:hover {
    border-color: var(--gold-dim);
}

.system-card.selected,
.clone-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(230, 168, 23, 0.2);
}

.system-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.system-card-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: 6px;
    overflow: hidden;
}

.system-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.system-card-icon {
    font-size: 1.5rem;
}

.system-card-info {
    flex: 1;
    min-width: 0;
}

.system-card-info strong {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: var(--text-bright);
}

.system-card-desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    line-height: 1.3;
}

.clone-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.clone-card strong {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: var(--text-bright);
}

.clone-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.btn-install-system {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0;
    margin-top: 0.5rem;
    border: none;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    display: inline-block;
}

.btn-install-system:hover {
    color: var(--gold-dim);
    text-decoration: underline;
}

/* Utility */
.text-muted { color: var(--text-muted); font-size: 0.8rem; }
.loading { color: var(--text-muted); font-style: italic; padding: 1rem 0; }
.empty-msg { color: var(--text-muted); font-style: italic; padding: 1rem 0; }
.error-msg { color: var(--danger); padding: 1rem 0; }

/* ========================================
   GM BOTTOM BAR
   ======================================== */

.gm-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    background: #000;
    border-top: 1px solid var(--border);
    z-index: 800;
}

.bottom-bar-servers {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bottom-bar-pill {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: rgba(232, 220, 200, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(232, 220, 200, 0.1);
    border: 1px solid rgba(232, 220, 200, 0.12);
    white-space: nowrap;
}

.bottom-bar-pill strong {
    color: var(--text);
}

.pill-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.pill-idle .pill-dot { background: var(--green-glow); box-shadow: 0 0 6px rgba(78, 200, 120, 0.4); }
.pill-active .pill-dot { background: var(--amber); box-shadow: 0 0 6px rgba(212, 134, 10, 0.4); }
.pill-stopped .pill-dot { background: var(--danger); }

.btn-bottom-bar-mgmt {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(200, 155, 29, 0.4);
    border-radius: 6px;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-bottom-bar-mgmt:hover {
    background: var(--gold-dim);
    color: #fff;
}

/* ========================================
   ADMIN TAB — SERVERS + SUB-TABS
   ======================================== */

.admin-sub-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.admin-sub-tab {
    background: none;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem 0.8rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.admin-sub-tab:hover { color: var(--text); }

.admin-sub-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.admin-servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.admin-server-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}

.admin-server-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    color: var(--text-bright);
}

.admin-server-status {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.admin-server-metrics {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    padding: 0.3rem 0.5rem;
    background: rgba(232, 220, 200, 0.03);
    border-radius: 4px;
}
.metric-warn { color: var(--danger); font-weight: 700; }
.metric-healthy { color: var(--green); font-weight: 600; }
.metric-pinned { color: var(--amber); font-weight: 600; }
.metric-idle { color: var(--text-muted); font-style: italic; }

.admin-server-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-action-pin {
    background: transparent;
    border: 1px solid rgba(212, 134, 10, 0.4);
    color: var(--amber);
}
.btn-action-pin:hover {
    background: rgba(212, 134, 10, 0.12);
}
.btn-action-pin.pinned {
    background: var(--amber);
    color: #fff;
}
.btn-action-pin.pinned:hover {
    background: #b8720a;
}

.admin-world-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--surface);
    color: var(--text);
    max-width: 200px;
}

/* Status dots */
.sidebar-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.2rem;
    vertical-align: middle;
}

.dot-online { background: var(--green); box-shadow: 0 0 4px rgba(61, 168, 100, 0.5); }
.dot-busy { background: var(--amber); box-shadow: 0 0 4px rgba(212, 134, 10, 0.5); }
.dot-offline { background: var(--danger); }

.btn-action {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    color: #fff;
}

.btn-action:hover { opacity: 0.85; }

.btn-action-danger { background: var(--danger); }
.btn-action-danger:hover { background: #c0392b; }
.btn-action-amber { background: var(--amber); }
.btn-action-amber:hover { background: #b8720a; }
.btn-action-green { background: var(--green); }
.btn-action-green:hover { background: var(--green-glow); }

/* ========================================
   MODULE MANAGEMENT — SUB-TABS
   ======================================== */

.module-sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.module-sub-tab {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.module-sub-tab:hover { color: var(--text); }

.module-sub-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ========================================
   MODULE MANAGEMENT — SEARCH & FILTER
   ======================================== */

.module-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.module-search {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    min-width: 220px;
    flex: 1;
    max-width: 320px;
}

.module-search:focus {
    outline: none;
    border-color: var(--gold-dim);
}

.category-filter {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

.category-pill {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.category-pill:hover {
    border-color: var(--gold-dim);
    color: var(--text);
}

.category-pill.active {
    background: var(--gold-dim);
    color: #fff;
    border-color: var(--gold-dim);
}

/* ========================================
   MODULE MANAGEMENT — CARDS
   ======================================== */

.module-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
}

.module-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.module-card:hover {
    border-color: rgba(200, 155, 29, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.module-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.module-card-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.3;
}

.module-card-version {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.module-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.module-card-author {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.module-card-desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-card-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

/* ========================================
   MODULE MANAGEMENT — CATEGORY BADGES
   ======================================== */

.category-badge {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
}

/* Dark-mode adapted category colors */
.cat-library { background: rgba(147, 51, 234, 0.2); color: #c084fc; }
.cat-pf2e { background: rgba(217, 119, 6, 0.2); color: #fbbf24; }
.cat-visual { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.cat-ui { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.cat-gm-tools { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.cat-content { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
.cat-grue-custom { background: rgba(244, 63, 94, 0.15); color: #fda4af; }
.cat-uncategorized { background: rgba(232, 220, 200, 0.08); color: var(--text-muted); }

/* ========================================
   MODULE MANAGEMENT — COMPATIBILITY
   ======================================== */

.compat-indicator {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    white-space: nowrap;
}

.compat-verified { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.compat-compatible { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.compat-unknown { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.compat-incompatible { background: rgba(244, 63, 94, 0.15); color: #fda4af; }

/* ========================================
   MODULE MANAGEMENT — UPDATE BANNER
   ======================================== */

.update-banner {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    background: rgba(61, 168, 100, 0.1);
    border: 1px solid rgba(61, 168, 100, 0.25);
    border-radius: 8px;
    color: var(--green);
    font-size: 0.85rem;
    font-weight: 600;
}

.update-banner-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.update-banner .btn-primary {
    font-size: 0.78rem;
    padding: 0.3rem 0.8rem;
    flex-shrink: 0;
}

/* ========================================
   MODULE MANAGEMENT — UPDATE MODAL
   ======================================== */

.update-modal-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.update-modal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.update-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
}

.update-item input[type="checkbox"] { flex-shrink: 0; }

.update-item-info { flex: 1; min-width: 0; }
.update-item-title { font-weight: 600; color: var(--text-bright); }
.update-item-versions { font-size: 0.78rem; color: var(--text-muted); }

.update-progress { margin-top: 0.75rem; }

.update-progress-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.update-progress-fill {
    height: 100%;
    background: var(--green);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.update-progress-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ========================================
   MODULE MANAGEMENT — DETAIL MODAL
   ======================================== */

.module-detail-section { margin-bottom: 1rem; }

.module-detail-section h4 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.module-detail-section p {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
}

.module-detail-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
}

.module-detail-meta dt { color: var(--text-muted); font-weight: 600; }
.module-detail-meta dd { color: var(--text); margin: 0; word-break: break-all; }

/* ========================================
   MODULE MANAGEMENT — WORLD CONFIG
   ======================================== */

.world-config-section { margin-top: 0.5rem; }

.world-config-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.world-config-bar .input-select { min-width: 200px; }

.world-module-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 450px;
    overflow-y: auto;
}

.world-module-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
}

.world-module-item input[type="checkbox"] { flex-shrink: 0; }

.world-module-item label {
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.world-module-item .text-muted { font-size: 0.75rem; }

.config-presets-section {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.config-presets-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.config-presets-bar .input-select { flex: 1; min-width: 150px; }

.config-preset-save-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.config-preset-save-inline .input-text {
    flex: 1;
    min-width: 150px;
    padding: 0.35rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.85rem;
}

.config-preset-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    min-height: 1.2em;
}

.preset-delete-link {
    color: var(--danger);
    text-decoration: none;
    cursor: pointer;
}
.preset-delete-link:hover { text-decoration: underline; }

.world-active-warning {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    background: rgba(212, 134, 10, 0.1);
    border: 1px solid rgba(212, 134, 10, 0.25);
    border-radius: 8px;
    color: var(--amber);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ========================================
   BROWSE HUB
   ======================================== */

.hub-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.hub-toolbar .module-search { flex: 1; max-width: 400px; }

.hub-sort-select {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.hub-tag-filter {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
    max-height: 4.5rem;
    overflow-y: auto;
}

.hub-tag-pill {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.hub-tag-pill:hover { border-color: var(--gold-dim); color: var(--text); }

.hub-tag-pill.active {
    background: var(--gold-dim);
    color: #fff;
    border-color: var(--gold-dim);
}

.hub-card-image {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.3rem;
    background: var(--surface);
}

.hub-metrics {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.hub-metrics span { display: flex; align-items: center; gap: 0.2rem; }

.hub-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
}

.hub-pagination button {
    font-family: inherit;
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.hub-pagination button:hover:not(:disabled) { border-color: var(--gold-dim); }
.hub-pagination button:disabled { opacity: 0.35; cursor: default; }
.hub-pagination .hub-page-info { color: var(--text-muted); }

.hub-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.hub-detail-stats {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 0.6rem 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    color: var(--text);
}

.hub-detail-stats .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hub-detail-stats .stat-value {
    font-weight: 700;
    font-size: 1rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 600px) {
    .hero h1 { font-size: 1.3rem; }
    .tagline { font-size: 0.85rem; }

    .game-group-cards { grid-template-columns: 1fr; }

    .game-group-label {
        font-size: 0.7rem;
        padding: 0 0.4rem;
        margin-right: 0.75rem;
    }

    main { padding: 1.5rem 1rem; }

    .schedule-table { font-size: 0.8rem; }

    .schedule-table th,
    .schedule-table td { padding: 0.5rem; }

    .modal { max-height: 90vh; }

    .schedule-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .user-controls {
        position: static;
        justify-content: center;
        margin-top: 1rem;
    }

    .col-actions { width: auto; }

    .mgmt-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .mgmt-tabs { overflow-x: auto; }
    .mgmt-tab { padding: 0.5rem 0.8rem; font-size: 0.8rem; }

    .world-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .input-manifest { min-width: 200px; width: 100%; }

    .module-install-form,
    .backup-create-form {
        flex-direction: column;
        align-items: stretch;
    }

    .file-table { font-size: 0.75rem; }
    .game-banner { height: 120px; }

    .gm-bottom-bar {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.4rem 1rem;
    }

    .bottom-bar-servers {
        flex-wrap: wrap;
        justify-content: center;
    }

    .login-title { font-size: 1.8rem; }
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.btn-danger:hover:not(:disabled) { background: #c0392b; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.delete-warning {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.25);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.delete-world-body .form-group input {
    width: 100%;
    font-size: 0.95rem;
}

/* ========================================
   ASSET MANAGEMENT TAB
   ======================================== */

.assets-sub-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.assets-sub-tab {
    background: none;
    border: none;
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-radius: 4px 4px 0 0;
    transition: color 0.2s, background 0.2s;
}

.assets-sub-tab:hover { color: var(--text); background: rgba(232, 220, 200, 0.04); }
.assets-sub-tab.active { color: var(--gold); font-weight: 600; border-bottom: 2px solid var(--gold); margin-bottom: -2px; }

.assets-subtab-content { min-height: 200px; }

.assets-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.asset-source-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.asset-source-btn {
    padding: 0.3rem 0.8rem;
    border: none;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: all 0.15s;
}

.asset-source-btn:not(:last-child) { border-right: 1px solid var(--border); }
.asset-source-btn.active { background: var(--amber); color: #fff; }

.asset-stats-bar {
    display: flex;
    gap: 1.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.asset-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.6rem;
    background: rgba(232, 220, 200, 0.03);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.btn-nav {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-nav:hover:not(:disabled) { background: rgba(200, 155, 29, 0.12); border-color: var(--gold-dim); color: var(--gold); }
.btn-nav:disabled { opacity: 0.35; cursor: default; }

.crumb { cursor: pointer; color: var(--gold); }
.crumb:hover { text-decoration: underline; }
.crumb-sep { color: var(--text-muted); }

.asset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.asset-table th {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.asset-table td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.asset-table tr:hover { background: rgba(232, 220, 200, 0.03); }

.col-size { white-space: nowrap; text-align: right; }
.asset-dir-icon, .asset-file-icon { margin-right: 0.3rem; }

/* Location badges — keep self-contained colors, adapt for dark */
.loc-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.loc-local { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.loc-s3 { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.loc-both { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.loc-mixed { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }

/* Policy badges */
.policy-badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
}

.policy-local { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.policy-s3 { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.policy-both { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.policy-neither { background: rgba(244, 63, 94, 0.15); color: #fda4af; }

/* Jobs list */
.jobs-list { display: flex; flex-direction: column; gap: 0.75rem; }

.job-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
}

.job-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.job-status {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.job-running { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.job-completed { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.job-failed { background: rgba(244, 63, 94, 0.15); color: #fda4af; }
.job-cancelled { background: rgba(232, 220, 200, 0.08); color: var(--text-muted); }

.job-time { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }
.job-paths { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; }

.job-progress { display: flex; align-items: center; gap: 0.6rem; }

.job-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.job-progress-fill {
    height: 100%;
    background: var(--amber);
    border-radius: 4px;
    transition: width 0.3s;
}

.job-progress-text { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.job-note { font-size: 0.82rem; padding: 6px 10px; margin-top: 6px; border-radius: 4px; }
.job-note-success { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }
.job-note-warning { background: rgba(245, 158, 11, 0.1); color: #fbbf24; }
.job-note-error { background: rgba(244, 63, 94, 0.1); color: #fda4af; }

.job-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.btn-warning {
    background: #d97706;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
}
.btn-warning:hover { background: #b45309; }

.job-log {
    margin-top: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #0a0908;
    max-height: 300px;
    overflow-y: auto;
}
.job-log pre {
    margin: 0;
    padding: 0.75rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #a0a0a8;
    white-space: pre-wrap;
    word-break: break-all;
}
.job-log pre span { display: block; }
.job-log pre .log-error { color: #ef5350; font-weight: 600; }
.job-log pre .log-ok { color: #66bb6a; }

/* DB Rewrite */
.rewrite-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    color: #fbbf24;
}

.rewrite-form { margin-bottom: 1rem; }
.rewrite-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
    resize: vertical;
    background: var(--surface);
    color: var(--text);
}

.rewrite-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.rewrite-dryrun-label { font-size: 0.82rem; cursor: pointer; color: var(--text); }

.rewrite-status-label {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    margin-bottom: 0.6rem;
}

.rewrite-db {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.rewrite-db-header {
    background: rgba(232, 220, 200, 0.04);
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.ref-check-result {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.ref-check-result ul {
    margin: 0.3rem 0 0 1.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Inline policy dropdown */
.asset-policy-select {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.78rem;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.asset-policy-select:focus { border-color: var(--gold-dim); outline: none; box-shadow: 0 0 0 2px rgba(200, 155, 29, 0.15); }
.asset-policy-select.select-pending { border-color: var(--amber); background: rgba(212, 134, 10, 0.08); }

.pending-flag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--amber);
    color: #fff;
    animation: pending-pulse 2s ease-in-out infinite;
}

@keyframes pending-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.row-pending { background: rgba(212, 134, 10, 0.06) !important; }
.row-pending:hover { background: rgba(212, 134, 10, 0.1) !important; }
.row-selected { background: rgba(59, 130, 246, 0.08) !important; }
.row-selected:hover { background: rgba(59, 130, 246, 0.12) !important; }
.row-selected.row-pending { background: rgba(212, 134, 10, 0.1) !important; }

.col-check { width: 32px; text-align: center; }
.col-check input[type="checkbox"] { cursor: pointer; }

/* Filtered rows */
.row-filtered { opacity: 0.35; }
.row-filtered td { color: var(--text-muted) !important; }

/* Filter bar */
.asset-filter-bar {
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.filter-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 0.5rem;
}
.filter-group { display: flex; flex-direction: column; gap: 0.2rem; }
.filter-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.filter-input {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    width: 70px;
    background: var(--surface-raised);
    color: var(--text);
}
.filter-input-wide { width: 140px; }
.filter-unit {
    padding: 0.3rem 0.3rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.82rem;
    width: 55px;
    margin-left: -1px;
    background: var(--surface-raised);
    color: var(--text);
}
.filter-group:has(.filter-unit) { flex-direction: row; align-items: end; flex-wrap: wrap; gap: 0; }
.filter-group:has(.filter-unit) label { width: 100%; margin-bottom: 0.2rem; }
.filter-actions { display: flex; align-items: center; gap: 0.5rem; }
.filter-status { font-size: 0.8rem; color: var(--green); font-weight: 600; }
.btn-filter-toggle { position: relative; }
.btn-filter-toggle.filter-active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
    font-weight: 700;
}
.confirm-filter { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; }

/* Selection toolbar */
.asset-select-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #93c5fd;
}

/* Move row styling */
.row-move { background: rgba(99, 102, 241, 0.08) !important; }
.row-move:hover { background: rgba(99, 102, 241, 0.12) !important; }
.move-dest-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-family: monospace;
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.btn-xs { font-size: 0.7rem; padding: 0.1rem 0.35rem; cursor: pointer; border: none; background: transparent; color: var(--text-muted); vertical-align: middle; }
.btn-xs:hover { color: var(--danger); }
.btn-cancel-move { margin-left: 0.3rem; }
.move-dest-cell { font-family: monospace; color: #a5b4fc; font-size: 0.85rem; }
.confirm-section-title { font-size: 0.9rem; font-weight: 700; margin: 0.75rem 0 0.35rem; color: var(--text-bright); }
.confirm-section-title:first-child { margin-top: 0; }

/* Folder picker modal */
.folder-picker-body { padding: 0 1.5rem 1rem; }
.picker-source-toggle { display: flex; gap: 0; margin-bottom: 0.75rem; }
.picker-source-btn {
    padding: 0.3rem 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text);
    transition: background 0.15s;
}
.picker-source-btn:first-child { border-radius: 6px 0 0 6px; }
.picker-source-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.picker-source-btn.active { background: var(--gold-dim); color: #fff; border-color: var(--gold-dim); }

.picker-breadcrumb { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.picker-breadcrumb .crumb { cursor: pointer; color: var(--gold); }
.picker-breadcrumb .crumb:hover { text-decoration: underline; }

.picker-folder-list {
    min-height: 120px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.picker-folder-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    color: var(--text);
}
.picker-folder-item:hover { background: rgba(200, 155, 29, 0.08); }
.picker-folder-item:last-child { border-bottom: none; }
.picker-up { color: var(--text-muted); font-style: italic; }

.picker-new-folder {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.picker-new-folder input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--surface);
    color: var(--text);
}

.picker-current-path {
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border-radius: 6px;
    font-size: 0.85rem;
}
.picker-current-path label { font-weight: 600; margin-right: 0.5rem; color: var(--text-muted); }
.picker-path-display { font-family: monospace; color: var(--gold); }

/* Pending changes bar */
.asset-pending-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    background: rgba(212, 134, 10, 0.08);
    border: 1px solid rgba(212, 134, 10, 0.25);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--amber);
}

.asset-pending-bar .btn-primary { margin-left: auto; }

/* Mismatch retry bar */
.asset-mismatch-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    background: rgba(244, 63, 94, 0.08);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fda4af;
}

.asset-mismatch-bar .btn-primary { margin-left: auto; }

/* Confirmation overlay */
.asset-confirm-body { padding: 0 1.5rem 1rem; }
.asset-confirm-summary { max-height: 300px; overflow-y: auto; margin-bottom: 1rem; }

.confirm-warning {
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}

.confirm-warn-s3 { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25); color: #fbbf24; }
.confirm-warn-neither { background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.2); color: #fda4af; }
.confirm-info { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); color: #6ee7b7; padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 0.82rem; margin-bottom: 0.5rem; }

.asset-confirm-input { margin-top: 1rem; }
.asset-confirm-input input {
    margin-top: 0.4rem;
    padding: 0.5rem 0.8rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: 'Consolas', 'Monaco', monospace;
    width: 200px;
    transition: border-color 0.2s;
    background: var(--surface);
    color: var(--text);
}
.asset-confirm-input input:focus { border-color: var(--gold-dim); outline: none; }

/* Hover preview panel */
.asset-preview-panel {
    position: fixed;
    z-index: 9000;
    width: 360px;
    max-height: 420px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.asset-preview-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.preview-header {
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-content {
    padding: 0.5rem;
    max-height: 370px;
    overflow: auto;
}
.preview-img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto;
    border-radius: 4px;
    object-fit: contain;
}
.preview-text {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    max-height: 340px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-muted);
    background: var(--surface);
    padding: 0.4rem;
    border-radius: 4px;
}
.preview-audio { width: 100%; }
.preview-video {
    display: block;
    max-width: 100%;
    max-height: 300px;
    border-radius: 4px;
}
.preview-meta { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.preview-error { padding: 1rem; text-align: center; color: var(--danger); font-size: 0.82rem; }
.preview-loading { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; }

/* Asset toast notifications */
.asset-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    animation: toastSlide 0.25s ease;
    white-space: pre-line;
}
.asset-toast button {
    background: none; border: none; font-size: 1.1rem; cursor: pointer; opacity: 0.6; padding: 0 0.3rem; color: inherit;
}
.asset-toast button:hover { opacity: 1; }
.asset-toast-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); color: #6ee7b7; }
.asset-toast-error { background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.2); color: #fda4af; }
.asset-toast-warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25); color: #fbbf24; }

/* FVTT status banner */
.asset-fvtt-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.92rem;
}
.btn-stop-all {
    background: var(--danger);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.btn-stop-all:hover { background: #c0392b; }
@keyframes toastSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   MODULE ACTIVITY LOG
   ======================================== */

.module-activity-log {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.activity-log-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.activity-log-entries {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}
.activity-log-entry {
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text);
}
.activity-log-entry:nth-child(odd) {
    background: rgba(232, 220, 200, 0.02);
}
.log-entry-fail {
    background: rgba(244, 63, 94, 0.06) !important;
}
.log-ok {
    color: var(--green);
    font-weight: 700;
    margin-right: 4px;
}
.log-fail {
    color: var(--danger);
    font-weight: 700;
    margin-right: 4px;
}
.log-time {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.btn-link {
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    font-size: 0.88rem;
    padding: 6px 0;
    text-decoration: underline;
}
.btn-link:hover {
    color: var(--gold-dim);
}

/* ========================================
   ACTION MODAL (replaces alert/confirm)
   ======================================== */
.action-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: am-fade-in 0.15s ease;
    backdrop-filter: blur(4px);
}
.action-modal-overlay.active { display: flex; }
.action-modal-overlay.fade-out {
    display: flex;
    animation: am-fade-out 0.3s ease forwards;
}
@keyframes am-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes am-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.action-modal {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    padding: 1.5rem 2rem;
    text-align: center;
    min-width: 280px;
    max-width: 400px;
    animation: am-pop 0.2s ease;
}
@keyframes am-pop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.action-modal-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}
.am-success .action-modal-icon {
    color: var(--green);
    font-size: 2.5rem;
    font-weight: 700;
}
.am-error .action-modal-icon {
    color: var(--danger);
    font-size: 2.5rem;
    font-weight: 700;
}
.action-modal-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 0.4rem;
}
.action-modal-msg {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.4;
    white-space: pre-line;
}
.action-modal-btns {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.am-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.am-btn-confirm {
    background: var(--amber);
    color: #fff;
}
.am-btn-confirm:hover { background: #b8720a; }
.am-btn-cancel {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.am-btn-cancel:hover { background: var(--surface-hover); }

/* Spinner */
.am-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--amber);
    border-radius: 50%;
    animation: am-spin 0.7s linear infinite;
    margin: 0 auto;
}
@keyframes am-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   GAME DETAIL MODAL
   ======================================== */
.game-detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    animation: am-fade-in 0.15s ease;
}
.game-detail-overlay.active { display: flex; }
.game-detail-overlay.fade-out {
    display: flex;
    animation: am-fade-out 0.3s ease forwards;
}
.game-detail-modal {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 520px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: am-pop-in 0.2s ease;
}
.gd-banner {
    height: 180px;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem 1rem;
    border-radius: 12px 12px 0 0;
}
.gd-banner .banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
    border-radius: 12px 12px 0 0;
}
.gd-banner .game-banner-title {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    line-height: 1.2;
}
.gd-banner .game-status-tag {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1;
}
.gd-body {
    padding: 1rem 1.25rem;
}
.gd-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.gd-desc {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.gd-desc h3, .gd-desc h4, .gd-desc h5 {
    font-size: 0.9rem;
    margin: 0.4rem 0 0.15rem;
    color: var(--text);
}
.gd-desc p { margin: 0.25rem 0; }
.gd-players {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.gd-players strong { color: var(--text); }
.gd-owners {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.gd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.8;
    margin-bottom: 0.75rem;
}
.gd-controls {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.gd-controls .btn-join {
    font-size: 0.82rem;
    padding: 0.35rem 1rem;
}
.gd-controls select {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}
.gd-controls .btn-secondary {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s;
}
.gd-controls .btn-secondary:hover { background: var(--surface-hover); }
.gd-controls .btn-danger {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 6px;
    background: var(--danger);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.gd-controls .btn-danger:hover { background: #c0392b; }

/* Version Updated badge */
.version-updated-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin-right: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
    animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.badge-version {
    background: var(--surface-hover);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Admin section in game detail modal */
.gd-admin-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.gd-admin-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.gd-docker-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.gd-docker-stats .stat-warn {
    color: var(--danger);
    font-weight: 600;
}
.gd-admin-btns {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* Admin tabs (Logs / Backups / Config) */
.gd-admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.gd-tab {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.gd-tab:hover { color: var(--text); }
.gd-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Tab panels */
.gd-tab-panel {
    display: none;
    padding: 0.5rem 0 0;
}
.gd-tab-panel.active { display: block; }

.gd-tab-loading, .gd-tab-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1rem 0;
}
.gd-tab-error {
    font-size: 0.78rem;
    color: var(--danger);
    text-align: center;
    padding: 1rem 0;
}

/* Backup context menu */
.gd-ctx-menu {
    position: absolute;
    z-index: 10000;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    padding: 4px 0;
    min-width: 140px;
}
.gd-ctx-menu button {
    display: block;
    width: 100%;
    padding: 6px 14px;
    background: none;
    border: none;
    color: var(--text, #eee);
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
}
.gd-ctx-menu button:hover {
    background: var(--accent, #4a3a6a);
}
.gd-backup-table tbody tr {
    cursor: context-menu;
}

/* Text file sub-panels */
.gd-tf-panel { display: none; }
.gd-tf-panel.active { display: block; }
.gd-tf-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

/* Log output */
.gd-log-output {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--text);
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Backup table */
.gd-backup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.gd-backup-table th {
    text-align: left;
    padding: 0.3rem 0.4rem;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border);
}
.gd-backup-table td {
    padding: 0.3rem 0.4rem;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}
.gd-backup-table tr:last-child td { border-bottom: none; }
.gd-backup-table tr:hover td { background: var(--surface-hover); }

/* Config editor */
.gd-config-editor {
    width: 100%;
    min-height: 200px;
    max-height: 320px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text);
    resize: vertical;
    box-sizing: border-box;
}
.gd-config-editor:focus {
    outline: none;
    border-color: var(--gold);
}
.gd-config-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
}
.gd-config-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Settings Form */
.gd-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.gd-settings-toggle {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.gd-settings-toggle:hover { color: var(--gold); border-color: var(--gold); }
.gd-settings-toggle.active { color: var(--gold); border-color: var(--gold); }
.gd-settings-section {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.gd-settings-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    border: none;
    width: 100%;
    text-align: left;
}
.gd-settings-section-header:hover { background: var(--surface-hover); }
.gd-settings-section-header .chevron {
    font-size: 0.6rem;
    transition: transform 0.15s;
    color: var(--text-muted);
}
.gd-settings-section.collapsed .gd-settings-section-body { display: none; }
.gd-settings-section.collapsed .chevron { transform: rotate(-90deg); }
.gd-settings-section-body { padding: 0.4rem 0.6rem 0.5rem; }
.gd-settings-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.gd-settings-field:last-child { margin-bottom: 0; }
.gd-settings-label {
    flex: 0 0 140px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
}
.gd-settings-label .gd-settings-desc {
    display: block;
    font-weight: 400;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.gd-settings-input {
    flex: 1;
    min-width: 0;
}
.gd-settings-input input[type="text"],
.gd-settings-input input[type="number"],
.gd-settings-input input[type="password"],
.gd-settings-input select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.72rem;
    color: var(--text);
    font-family: inherit;
    box-sizing: border-box;
}
.gd-settings-input input:focus,
.gd-settings-input select:focus {
    outline: none;
    border-color: var(--gold);
}
.gd-settings-input input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
}
.gd-settings-range-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}
.gd-settings-range-wrap input[type="range"] {
    flex: 1;
    accent-color: var(--gold);
}
.gd-settings-range-val {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    min-width: 2.5em;
    text-align: right;
    color: var(--text);
}
.gd-settings-pw-wrap {
    display: flex;
    gap: 0;
    width: 100%;
}
.gd-settings-pw-wrap input {
    flex: 1;
    border-radius: 4px 0 0 4px !important;
}
.gd-settings-pw-toggle {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 4px 4px 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 6px;
    font-size: 0.7rem;
}
.gd-settings-pw-toggle:hover { color: var(--gold); }
/* Array field (repeatable cards) */
.gd-settings-array { margin-top: 0.3rem; }
.gd-settings-array-item {
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.3rem;
    background: var(--surface);
    position: relative;
}
.gd-settings-array-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}
.gd-settings-array-item-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}
.gd-settings-array-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 4px;
}
.gd-settings-array-remove:hover { opacity: 0.7; }
.gd-settings-array-add {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px dashed var(--border);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 0.2rem;
}
.gd-settings-array-add:hover { color: var(--gold); border-color: var(--gold); }
.gd-settings-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.gd-close-row {
    padding: 0.5rem 1.25rem 1rem;
    text-align: center;
}
.gd-close-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s;
}
.gd-close-btn:hover { background: var(--surface-hover); }

/* Error Bank */
.error-bank-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.error-bank-filters {
    display: flex;
    gap: 0.3rem;
}
.error-bank-filter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--text-muted);
}
.error-bank-filter.active {
    background: var(--gold-dim);
    color: #fff;
    border-color: var(--gold-dim);
}
.error-bank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.error-bank-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.error-bank-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text);
}
.error-bank-row { cursor: context-menu; }
.error-bank-row.resolved { opacity: 0.4; }
.eb-message {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}
.eb-actions { white-space: nowrap; display: flex; gap: 0.3rem; }
.eb-resolved-note { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }

/* Error detail modal */
.eb-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.eb-detail-overlay.active { opacity: 1; }
.eb-detail-panel {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border, #333);
    border-radius: 10px;
    padding: 1.5rem;
    width: min(600px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.eb-detail-panel h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--gold-dim, #c9a946);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.eb-detail-panel h3 .eb-detail-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
}
.eb-detail-panel h3 .eb-detail-close:hover { color: var(--text); }
.eb-detail-field {
    margin-bottom: 0.75rem;
}
.eb-detail-field label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
.eb-detail-field .eb-detail-value {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.5;
}
.eb-detail-field pre {
    margin: 0;
    padding: 0.6rem 0.8rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}
.eb-detail-field .eb-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}
.eb-badge-open { background: var(--danger, #c0392b); color: #fff; }
.eb-badge-resolved { background: var(--success, #27ae60); color: #fff; }
.eb-badge-module { background: #6c3483; color: #fff; }
.eb-badge-javascript { background: #2980b9; color: #fff; }
.eb-badge-server { background: #c0392b; color: #fff; }
.eb-detail-row {
    display: flex;
    gap: 1rem;
}
.eb-detail-row .eb-detail-field { flex: 1; }
.eb-detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.gd-ctx-menu .ctx-separator {
    height: 1px;
    background: var(--border, #333);
    margin: 3px 0;
}

/* --- Error Bank Chat Modal --- */
.eb-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.eb-chat-overlay.active { opacity: 1; }
.eb-chat-panel {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border, #333);
    border-radius: 10px;
    width: min(640px, 92vw);
    height: min(600px, 80vh);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.eb-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border, #333);
    flex-shrink: 0;
}
.eb-chat-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-dim, #c9a946);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eb-chat-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.eb-chat-close:hover { color: var(--text); }
.eb-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.eb-chat-msg {
    max-width: 85%;
}
.eb-chat-msg-user {
    align-self: flex-end;
}
.eb-chat-msg-assistant {
    align-self: flex-start;
}
.eb-chat-msg-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #999);
    margin-bottom: 0.2rem;
}
.eb-chat-msg-user .eb-chat-msg-label { text-align: right; }
.eb-chat-msg-content {
    font-size: 0.82rem;
    line-height: 1.55;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: var(--text, #e0e0e0);
}
.eb-chat-msg-user .eb-chat-msg-content {
    background: rgba(108, 92, 231, 0.25);
    border: 1px solid rgba(108, 92, 231, 0.4);
}
.eb-chat-msg-assistant .eb-chat-msg-content {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border, #333);
}
.eb-chat-msg-content strong { color: var(--gold-dim, #c9a946); }
.eb-chat-msg-content code.eb-chat-inline {
    background: rgba(0,0,0,0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
}
.eb-chat-msg-content pre.eb-chat-code {
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    margin: 0.4rem 0;
    overflow-x: auto;
    font-size: 0.75rem;
}
.eb-chat-msg-content pre.eb-chat-code code {
    background: none;
    padding: 0;
}
.eb-chat-msg-content ul {
    margin: 0.3rem 0;
    padding-left: 1.2rem;
}
.eb-chat-msg-content li {
    margin-bottom: 0.15rem;
}
/* Typing indicator */
.eb-chat-typing .eb-typing-dots span {
    animation: ebTypingDot 1.2s infinite;
    font-size: 1.4rem;
    line-height: 1;
}
.eb-chat-typing .eb-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.eb-chat-typing .eb-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ebTypingDot {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}
/* Input area */
.eb-chat-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border, #333);
    flex-shrink: 0;
}
.eb-chat-textarea {
    flex: 1;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    color: var(--text, #e0e0e0);
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.5rem 0.7rem;
    resize: none;
    outline: none;
}
.eb-chat-textarea:focus {
    border-color: rgba(108, 92, 231, 0.6);
}
.eb-chat-textarea:disabled {
    opacity: 0.5;
}
.eb-chat-send {
    background: rgba(108, 92, 231, 0.4);
    border: 1px solid rgba(108, 92, 231, 0.5);
    color: #fff;
    border-radius: 6px;
    padding: 0 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.eb-chat-send:hover { background: rgba(108, 92, 231, 0.6); }
.eb-chat-send:disabled { opacity: 0.4; cursor: default; }
/* Accent button for "Ask Claude" in detail modal */
.btn-sm.btn-accent {
    background: rgba(108, 92, 231, 0.3);
    border: 1px solid rgba(108, 92, 231, 0.5);
    color: #d4c8ff;
}
.btn-sm.btn-accent:hover {
    background: rgba(108, 92, 231, 0.5);
}

/* --- Members Sub-tab --- */
.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.members-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-muted);
    font-weight: 600;
}
.members-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}
.member-avatar {
    border-radius: 50%;
    vertical-align: middle;
}

/* --- CDN Sub-tab --- */
.cdn-status-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.cdn-status-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.cdn-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cdn-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cdn-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-bright);
}
.cdn-config-section, .cdn-queue-section, .cdn-top-section, .cdn-history-section {
    margin-bottom: 1rem;
}
.cdn-config-section h4, .cdn-queue-section h4, .cdn-top-section h4, .cdn-history-section h4 {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
}
.cdn-config-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 0.4rem 0;
}
.cdn-config-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.cdn-config-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cdn-config-field label { font-size: 0.8rem; color: var(--text-muted); }
.cdn-config-field span { font-size: 0.8rem; color: var(--text-muted); }
.cdn-queue-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#cdn-queue-info {
    font-size: 0.85rem;
    color: var(--text);
}
.cdn-loc-s3 {
    background: var(--green);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}
.cdn-loc-local {
    background: var(--medium-wood);
    color: var(--text);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}
.cdn-file-dir {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.cdn-pin-select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.75rem;
    padding: 1px 4px;
}
.cdn-history-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CDN Cycle Progress Modal */
.cdn-progress-panel {
    min-width: 320px;
    max-width: 420px;
    text-align: left;
}
.cdn-progress-file, .cdn-progress-total { margin-bottom: 12px; }
.cdn-progress-label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdn-progress-bar-track {
    width: 100%;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
}
.cdn-progress-bar-fill {
    height: 100%;
    background: var(--amber);
    border-radius: 5px;
    transition: width 0.4s ease;
}
.cdn-progress-bar-total { background: var(--green); }
.cdnp-pulse {
    animation: cdnpPulse 1.2s ease-in-out infinite;
    background: var(--amber);
}
@keyframes cdnpPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.cdnp-direction { font-weight: 600; font-size: 0.8rem; margin-right: 4px; }
.cdnp-up { color: var(--amber); }
.cdnp-down { color: var(--green); }
.cdn-progress-phase {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}
.cdnp-error { color: var(--danger); font-style: normal; font-weight: 600; }

/* CDN Top Files */
.cdn-sort-header { cursor: pointer; user-select: none; white-space: nowrap; }
.cdn-sort-header:hover { color: var(--gold); }
.cdn-sort-active { color: var(--gold); font-weight: 700; }
.cdn-top-filter {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    vertical-align: middle;
}

/* CDN Jobs badge */
.cdn-jobs-pill {
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}
.cdn-jobs-pill:hover { background: rgba(232, 220, 200, 0.06); }
.cdn-jobs-badge { font-weight: 700; min-width: 1.2em; text-align: center; }
.cdn-jobs-badge.cdn-jobs-active {
    color: #fbbf24;
    animation: pending-pulse 2s ease-in-out infinite;
}

/* CDN tools section */
.cdn-tools-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cdn-tools-hint { font-size: 0.75rem; color: var(--text-muted); }

/* ========================================
   BANNER EDITOR
   ======================================== */
.banner-edit-btn {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.banner-edit-btn:hover { background: rgba(0, 0, 0, 0.8); }
.gd-banner.banner-editing {
    height: auto;
    min-height: 180px;
    flex-direction: column;
    padding: 0;
}
.banner-editor-preview {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0908;
    border-radius: 12px 12px 0 0;
}
.banner-editor-controls {
    background: var(--surface-raised);
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.be-status { font-size: 0.78rem; color: var(--text-muted); }
.be-status strong { color: var(--text-primary); }
.be-file-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.be-file-label { cursor: pointer; white-space: nowrap; }
.be-file-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.be-btn-row {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.be-btn-row .btn-join { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
.be-btn-row .btn-join:disabled { opacity: 0.4; cursor: not-allowed; }

/* ========================================
   HELP SYSTEM
   ======================================== */

/* Help icon (? button) */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--text-muted);
    color: var(--text-muted);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    padding: 0;
    margin-left: 0.35rem;
    vertical-align: middle;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}
.help-icon:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(200, 155, 29, 0.1);
}

/* Help popover */
.help-popover {
    display: none;
    position: absolute;
    z-index: 9000;
    width: 280px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    padding: 0.85rem 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.5;
}
.help-popover.visible { display: block; }
.help-popover-text { margin-bottom: 0.5rem; }
.help-popover-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
}
.help-popover-link:hover { color: var(--gold-dim); }

/* Tab help banner (collapsible quick guide) */
.tab-help-banner {
    background: rgba(212, 134, 10, 0.06);
    border: 1px solid rgba(212, 134, 10, 0.15);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.tab-help-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: none;
    background: none;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    text-align: left;
}
.tab-help-toggle:hover { color: var(--gold-dim); }
.tab-help-toggle .chevron {
    transition: transform 0.2s;
    font-size: 0.65rem;
}
.tab-help-banner.expanded .tab-help-toggle .chevron { transform: rotate(90deg); }
.tab-help-body {
    display: none;
    padding: 0 0.75rem 0.6rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.55;
}
.tab-help-banner.expanded .tab-help-body { display: block; }
.tab-help-body a {
    font-weight: 600;
    font-size: 0.78rem;
}

/* Header help link */
.help-link-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 220, 200, 0.25);
    color: rgba(232, 220, 200, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
    margin-left: 0.5rem;
}
.help-link-header:hover {
    border-color: var(--gold);
    color: var(--gold);
}

@media (max-width: 768px) {
    .help-popover {
        position: fixed;
        left: 50% !important;
        top: auto !important;
        bottom: 5rem;
        transform: translateX(-50%);
        width: calc(100vw - 2rem);
        max-width: 320px;
    }
}

/* ========================================
   ENTRANCE ANIMATIONS
   ======================================== */

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

.game-card {
    animation: fadeUp 0.4s ease forwards;
}

/* After entrance animation completes, release transform for hover effects */
.game-card.animated {
    animation: none;
    opacity: 1;
}

.game-group:nth-child(1) .game-card:nth-child(1) { animation-delay: 0.05s; }
.game-group:nth-child(1) .game-card:nth-child(2) { animation-delay: 0.1s; }
.game-group:nth-child(1) .game-card:nth-child(3) { animation-delay: 0.15s; }
.game-group:nth-child(1) .game-card:nth-child(4) { animation-delay: 0.2s; }
.game-group:nth-child(2) .game-card:nth-child(1) { animation-delay: 0.2s; }
.game-group:nth-child(2) .game-card:nth-child(2) { animation-delay: 0.25s; }
.game-group:nth-child(2) .game-card:nth-child(3) { animation-delay: 0.3s; }
.game-group:nth-child(2) .game-card:nth-child(4) { animation-delay: 0.35s; }

/* Blink cursor for login */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ========================================
   SCROLLBAR (webkit)
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}