/* Ocean RO Theme - Dark Blue Theme */
:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-card: #1a2332;
    --bg-card-hover: #243044;

    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    --accent-primary: #3b82f6;
    --accent-secondary: #1d4ed8;
    --accent-hover: #2563eb;

    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;

    --border-color: #374151;
    --border-radius: 8px;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* ==================== Utility Classes ==================== */
/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spacing utilities */
.m-0 { margin: 0; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.p-0 { padding: 0; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }

/* Border radius utilities */
.rounded { border-radius: var(--border-radius); }
.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

/* Width/Height utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-0 { min-height: 0; }

/* Visibility utilities */
.hidden { display: none; }
.invisible { visibility: hidden; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Transition utilities */
.transition { transition: all 0.2s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.3s ease; }

/* ==================== Base Styles ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 40px;
    flex: 1;
    width: 100%;
}

/* Navbar */
/* ==================== Modern Minimal Navbar ==================== */
.navbar {
    background: rgba(10, 14, 23, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 52px;
    box-sizing: border-box;
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.navbar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.navbar-menu {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    margin-left: 32px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.12);
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--accent-primary);
    border-radius: 1px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Navbar Connection Status Indicator */
.navbar-connection-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    cursor: default;
}

.navbar-connection-status .connection-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.navbar-connection-status.connected .connection-dot {
    background: var(--success);
    box-shadow: 0 0 4px var(--success);
}

.navbar-connection-status.connecting .connection-dot,
.navbar-connection-status.reconnecting .connection-dot {
    background: var(--warning);
    box-shadow: 0 0 4px var(--warning);
    animation: blink 1s infinite;
}

.navbar-connection-status.disconnected .connection-dot {
    background: var(--danger);
    box-shadow: 0 0 4px var(--danger);
    animation: none;
}

.navbar-connection-status .connection-text {
    color: var(--text-muted);
    text-transform: capitalize;
}

.navbar-connection-status.connected .connection-text {
    color: var(--success);
}

.navbar-connection-status.disconnected .connection-text {
    color: var(--danger);
}

.navbar-connection-status.connecting .connection-text,
.navbar-connection-status.reconnecting .connection-text {
    color: var(--warning);
}

/* Mobile Connection Status (in mobile menu header) */
.mobile-menu-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-connection-status {
    display: flex;
    align-items: center;
}

.mobile-connection-status .connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.mobile-connection-status.connected .connection-dot {
    background: var(--success);
    box-shadow: 0 0 5px var(--success);
}

.mobile-connection-status.connecting .connection-dot,
.mobile-connection-status.reconnecting .connection-dot {
    background: var(--warning);
    box-shadow: 0 0 5px var(--warning);
    animation: blink 1s infinite;
}

.mobile-connection-status.disconnected .connection-dot {
    background: var(--danger);
    box-shadow: 0 0 5px var(--danger);
    animation: none;
}

/* Social Icons - Compact */
.social-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.social-icon:hover {
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.1);
}

/* Wallet Display */
.wallet-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.15);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.wallet-display:hover {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.25);
}

.wallet-display svg {
    color: #eab308;
    flex-shrink: 0;
}

.wallet-amount {
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.wallet-currency {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

/* Auth Buttons - Compact */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-login {
    color: var(--text-muted);
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.btn-login:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.btn-register {
    background: var(--accent-primary);
    color: white !important;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.btn-register:hover {
    background: var(--accent-hover);
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-menu-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-primary);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mobile-menu-section {
    margin-bottom: 24px;
}

.mobile-menu-section-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 12px;
}

.mobile-menu .mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.mobile-menu .mobile-nav-link:hover,
.mobile-menu .mobile-nav-link:active {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.mobile-menu .mobile-nav-link.active {
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.15);
    border-left: 3px solid var(--accent-primary);
    padding-left: 13px;
}

.mobile-menu .mobile-nav-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-menu .mobile-social-links {
    display: flex;
    gap: 12px;
    padding: 12px;
}

.mobile-menu .mobile-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.1);
    transition: all 0.2s ease;
}

.mobile-menu .mobile-social-link:hover {
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.15);
}

.mobile-menu .mobile-auth-section {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.mobile-menu .mobile-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu .mobile-auth-buttons .btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    text-align: center;
}

.mobile-menu .mobile-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
}

.mobile-menu .mobile-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.mobile-menu .mobile-user-name {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.mobile-menu .mobile-logout-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.mobile-menu .mobile-logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.mobile-admin-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.mobile-nav-link.admin-link {
    color: #f59e0b;
}

.mobile-nav-link.admin-link:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* Mobile Menu Responsive */
@media (max-width: 900px) {
    .navbar {
        height: 48px;
        padding: 8px 0;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .navbar-menu {
        display: none;
    }

    .navbar-container {
        padding: 0 16px;
        height: 100%;
    }
}

/* User Dropdown */
/* User Dropdown - Compact */
.user-dropdown {
    position: relative;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.user-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.dropdown-arrow {
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.dropdown-arrow.open {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 1001;
}

.dropdown-header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dropdown-username {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.dropdown-section-title {
    padding: 6px 12px 4px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.12s ease;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.dropdown-item:hover svg {
    opacity: 1;
}

.dropdown-item.admin-item {
    color: #f59e0b;
}

.dropdown-item.admin-item:hover {
    background: rgba(245, 158, 11, 0.08);
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

.dropdown-item.logout-item {
    color: #ef4444;
}

.dropdown-item.logout-item:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* Nav Dropdown (Casino, etc.) */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

.nav-dropdown-toggle .dropdown-arrow {
    margin-left: 2px;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 140px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 1001;
}

.nav-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.nav-dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.nav-dropdown-menu .dropdown-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
}

.nav-dropdown-menu .dropdown-item svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.nav-dropdown-menu .dropdown-item:hover svg,
.nav-dropdown-menu .dropdown-item.active svg {
    color: inherit;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-logout {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    font-size: 0.875rem;
}

.btn-logout:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-textarea {
    resize: vertical;
    min-height: 150px;
}

.radio-group {
    display: flex;
    gap: 12px;
}

.radio-label,
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
}

.radio-label:hover,
.checkbox-label:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

.radio-label:has(input:checked),
.checkbox-label:has(input:checked) {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.15);
    color: var(--text-primary);
}

.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-tertiary);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.radio-label input[type="radio"]:checked {
    border-color: var(--primary);
    background: var(--primary);
}

.radio-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.checkbox-label input[type="checkbox"] {
    border-radius: 4px;
}

.checkbox-label input[type="checkbox"]:checked {
    border-color: var(--primary);
    background: var(--primary);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-group {
    margin-top: 10px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Auth Pages */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
}

.auth-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.auth-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.75rem;
    color: var(--text-primary);
}

.auth-link {
    text-align: center;
    margin-top: 20px;
    color: var(--text-secondary);
}

.auth-link a {
    color: var(--accent-primary);
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* Home Page */
.home-page {
    padding: 0;
}

/* Server Status Bar - Compact */
.server-status-bar {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 8px 16px;
    margin-bottom: 16px;
}

.status-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
}

.status-badge.online {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-badge.offline {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-badge.loading {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

.status-item.users-online {
    padding: 6px 14px;
    margin-left: 12px;
    border-left: none;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.status-item.users-online::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: pulse-dot 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.status-item.users-online .status-label {
    margin-left: 10px;
}

.status-item.users-online .status-count {
    color: #10b981;
    font-weight: 700;
}

.status-item.users-online::after {
    content: '→';
    font-size: 0.75rem;
    color: rgba(16, 185, 129, 0.6);
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.status-item.users-online:hover::after {
    transform: translateX(3px);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.6; transform: translateY(-50%) scale(1.2); }
}

.status-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.features-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.feature-card {
    background: var(--bg-card);
    padding: 20px 16px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.feature-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.feature-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.feature-card h3 {
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

/* Home Content - News & Guild Castles */
.home-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.home-section {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--border-color);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.view-all-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.2s;
}

.view-all-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* News List Home - Compact Style */
.news-list-home {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.news-item-home {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    text-decoration: none;
    transition: all 0.15s;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.news-item-home:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-item-home:first-child {
    padding-top: 0;
}

.news-item-home:hover .news-title {
    color: var(--accent-primary);
}

.news-item-home .news-item-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 80px;
    flex-shrink: 0;
}

.news-item-home .news-category {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 3px;
    width: 100%;
    text-align: center;
}

.news-item-home .news-date {
    color: var(--text-muted);
    font-size: 0.65rem;
    white-space: nowrap;
}

.news-category {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Category styles defined in News Pages section below */

.news-date {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.news-item-content {
    flex: 1;
    min-width: 0;
}

.news-item-home .news-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.4;
    transition: color 0.15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-item-home .news-excerpt {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-excerpt {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Castles List Home */
.castles-list-home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.castle-item-home {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 0.2s;
}

.castle-item-home:hover {
    border-color: var(--accent-primary);
}

.castle-item-header {
    margin-bottom: 4px;
}

.castle-region-badge {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.12);
    padding: 1px 5px;
    border-radius: 2px;
}

.castle-item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.castle-name-home {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 500;
}

.guild-name-home {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.war-schedule-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 4px;
}

.schedule-label {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.schedule-time {
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Loading & Empty Placeholders */
.loading-placeholder,
.empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--text-muted);
    gap: 8px;
}

.empty-placeholder .empty-icon {
    font-size: 2rem;
}

.empty-placeholder p {
    font-size: 0.8rem;
    margin: 0;
}

.empty-placeholder .empty-hint {
    font-size: 0.7rem;
    color: var(--accent-primary);
}

.loading-spinner-sm {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.castles-empty {
    padding: 30px 20px;
}

.castles-empty .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.empty-hint {
    font-size: 0.8rem;
    color: var(--accent-primary);
}

/* Responsive Home Content */
@media (max-width: 900px) {
    .home-content {
        grid-template-columns: 1fr;
    }

    .castles-list-home {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .castles-list-home {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* News Pages */
.news-page,
.news-detail-page {
    padding: 40px 0;
}

.news-detail-page .back-link {
    background: transparent;
    border: none;
    padding: 0;
}

.news-detail-page .back-link.top {
    margin-bottom: 20px;
    margin-top: 0;
}

.news-detail-page .back-link:hover {
    border: none;
}

.news-page .page-title {
    font-size: 2.25rem;
    margin-bottom: 35px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-page .page-title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 32px;
    background: linear-gradient(180deg, var(--accent-primary), var(--info));
    border-radius: 3px;
}

.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
}

.news-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(26, 35, 50, 0.9));
    border-radius: 16px;
    padding: 0;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
    transform: translateY(-4px);
}

.news-card-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.news-category {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-announcement {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1));
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.category-update {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1));
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.category-event {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.1));
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.category-maintenance {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.1));
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.news-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.news-title {
    margin-bottom: 12px;
    font-size: 1.15rem;
    line-height: 1.4;
}

.news-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.news-title a:hover {
    color: var(--accent-primary);
}

.news-excerpt {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.7;
    font-size: 0.9rem;
    flex: 1;
}

.news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.news-author {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.news-footer .btn-sm {
    padding: 8px 16px;
    font-size: 0.8rem;
    border-radius: 20px;
}

/* Featured/First news card */
.news-list .news-card:first-child {
    grid-column: 1 / -1;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.08), var(--bg-card));
    border-color: rgba(59, 130, 246, 0.3);
}

.news-list .news-card:first-child .news-title {
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    .news-list {
        grid-template-columns: 1fr;
    }

    .news-list .news-card:first-child {
        grid-column: 1;
    }
}

/* News Detail */
.news-article {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 40px;
    border: 1px solid var(--border-color);
}

.article-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.article-title {
    font-size: 2rem;
    margin: 16px 0;
}

.article-meta {
    display: flex;
    gap: 20px;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.article-content {
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ===== Ocean Wrap Theme for Server Info ===== */
.article-content .ocean-wrap {
    background: rgba(8, 34, 55, 0.92);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 0 40px rgba(0, 180, 255, 0.15);
    border: 1px solid rgba(62, 193, 211, 0.25);
    color: #e6f6ff;
}

/* Two-column layout */
.article-content .ocean-wrap > table {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.article-content .ocean-wrap > table > tbody > tr > td {
    vertical-align: top;
    padding: 15px 20px !important;
    background: transparent !important;
    border: none !important;
}

/* Section headers - หัวข้อใหญ่ */
.article-content .ocean-wrap strong font[size="4"],
.article-content .ocean-wrap pre strong font[size="4"],
.article-content .ocean-wrap font[size="4"] {
    display: block;
    color: #7fe7ff !important;
    font-size: 1.15rem !important;
    font-weight: 700;
    margin: 24px 0 12px 0;
    padding-left: 12px;
    border-left: 4px solid #3ec1d3;
    text-shadow: 0 0 8px rgba(120, 220, 255, 0.5);
    line-height: 1.4 !important;
}

/* เส้นแบ่งใต้หัวข้อ */
.article-content .ocean-wrap strong font[size="4"]::after,
.article-content .ocean-wrap pre strong font[size="4"]::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(90deg, transparent, #3ec1d3, transparent);
}

/* หัวข้อแรกไม่มี margin-top */
.article-content .ocean-wrap pre:first-child strong font[size="4"] {
    margin-top: 0;
}

/* Pre tag styling */
.article-content .ocean-wrap pre {
    font-family: 'Kanit', 'Segoe UI', sans-serif !important;
    font-size: 0.95rem !important;
    color: #d9f2ff !important;
    background: transparent !important;
    line-height: 2.0 !important;
    white-space: pre-wrap;
    margin: 0;
    padding: 0;
}

/* Skill/Item icons */
.article-content .ocean-wrap img {
    vertical-align: middle;
    margin-right: 6px;
    filter: drop-shadow(0 0 4px rgba(120, 220, 255, 0.5));
    border-radius: 4px;
    transition: transform 0.2s, filter 0.2s;
}

.article-content .ocean-wrap img:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(120, 220, 255, 0.8));
}

/* Font and span colors */
.article-content .ocean-wrap font,
.article-content .ocean-wrap span {
    color: #d9f2ff !important;
    line-height: 30px;
}

/* Warning text (red) */
.article-content .ocean-wrap font[color="#ff0000"],
.article-content .ocean-wrap font[color="red"] {
    color: #ff6b6b !important;
    font-weight: 600;
}

/* Links */
.article-content .ocean-wrap a {
    color: #7fe7ff !important;
    text-decoration: none;
    transition: color 0.2s;
}

.article-content .ocean-wrap a:hover {
    color: #b8f4ff !important;
    text-decoration: underline;
}

/* Bullet points styling */
.article-content .ocean-wrap ul,
.article-content .ocean-wrap ol {
    margin: 10px 0;
    padding-left: 24px;
}

.article-content .ocean-wrap li {
    color: #d9f2ff;
    margin: 6px 0;
    line-height: 1.8;
}

/* Responsive two-column */
@media (max-width: 900px) {
    .article-content .ocean-wrap > table > tbody > tr {
        display: flex;
        flex-direction: column;
    }

    .article-content .ocean-wrap > table > tbody > tr > td {
        width: 100% !important;
        padding: 10px 0 !important;
    }

    .article-content .ocean-wrap {
        padding: 20px 15px;
    }
}

/* ===== General News Table Styles ===== */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: var(--bg-card) !important;
    border-radius: 8px;
    overflow: hidden;
}

.article-content table th {
    background: #1865c9 !important;
    color: #ffffff !important;
    padding: 12px 8px !important;
    font-weight: 600;
}

.article-content table td {
    padding: 10px 8px !important;
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.article-content table tr:nth-child(even) td {
    background: var(--bg-card) !important;
}

.article-content table tr:hover td {
    background: var(--bg-card-hover) !important;
}

.article-content pre {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.article-content font {
    color: inherit !important;
}

.article-content td font,
.article-content td span {
    color: var(--text-primary) !important;
}

.back-link {
    margin-top: 30px;
}

/* Admin Pages */
.admin-news-page {
    padding: 40px 0;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 900px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

.admin-form-card,
.admin-list-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border-color);
}

.admin-form-card h2,
.admin-list-card h2 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

.admin-news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 600px;
    overflow-y: auto;
}

.admin-news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.item-info h4 {
    margin: 8px 0 4px;
    color: var(--text-primary);
}

.item-info small {
    color: var(--text-muted);
}

.item-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.item-status.published {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.item-status.draft {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-muted);
}

.item-actions {
    display: flex;
    gap: 8px;
}

/* Quill Editor Styling */
.quill-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-height: 250px;
}

.ql-toolbar.ql-snow {
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.ql-container.ql-snow {
    border: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-size: 1rem;
}

.ql-editor {
    min-height: 200px;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.ql-editor.ql-blank::before {
    color: var(--text-muted);
    font-style: normal;
}

.ql-snow .ql-stroke {
    stroke: var(--text-secondary);
}

.ql-snow .ql-fill {
    fill: var(--text-secondary);
}

.ql-snow .ql-picker {
    color: var(--text-secondary);
}

.ql-snow .ql-picker-options {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.ql-snow .ql-picker-item:hover {
    color: var(--accent-primary);
}

.ql-snow .ql-picker-item.ql-selected {
    color: var(--accent-primary);
}

.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active,
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button.ql-active {
    color: var(--accent-primary);
}

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: var(--accent-primary);
}

.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill {
    fill: var(--accent-primary);
}

.ql-snow a {
    color: var(--accent-primary);
}

/* Content label row with toggle button */
.content-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.content-label-row label {
    margin-bottom: 0;
}

/* HTML Editor */
.html-editor {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 250px;
    white-space: pre;
    tab-size: 2;
}

/* Character Pages */
.characters-page {
    padding: 20px 0;
}

.character-detail-page {
    padding: 40px 0;
}

/* Characters Page Header */
.characters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.6) 0%, rgba(15, 30, 50, 0.8) 100%);
    border-radius: 16px;
    border: 1px solid rgba(62, 193, 211, 0.2);
    margin-bottom: 24px;
}

.header-content .page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.header-content .page-title .title-icon {
    color: var(--accent-primary);
}

.header-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.header-stats {
    display: flex;
    gap: 16px;
}

.header-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.header-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.header-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Loading Container */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--text-muted);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Empty State Card */
.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.empty-state-card .empty-icon {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state-card h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state-card p {
    color: var(--text-muted);
    margin: 0;
}

/* Characters Grid - 4 columns */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 900px;
}

.characters-grid a {
    text-decoration: none;
    color: inherit;
}

.characters-grid a:hover {
    text-decoration: none;
}

/* Vertical Character Card */
.char-card-vertical {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.4) 0%, rgba(15, 30, 50, 0.6) 100%);
    border-radius: 12px;
    padding: 20px 16px;
    border: 1px solid rgba(62, 193, 211, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.char-card-vertical:hover {
    border-color: rgba(62, 193, 211, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.char-card-vertical.is-online {
    border-color: rgba(16, 185, 129, 0.3);
}

/* Status Badge */
.char-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
}

.char-status-badge .status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.char-status-badge.online {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.char-status-badge.online .status-dot {
    background: var(--success);
    box-shadow: 0 0 4px var(--success);
}

.char-status-badge.offline {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-muted);
}

.char-status-badge.offline .status-dot {
    background: var(--text-muted);
}

/* Avatar */
.char-avatar-v {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(62, 193, 211, 0.2) 100%);
    border: 2px solid rgba(62, 193, 211, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    margin-top: 10px;
}

.char-avatar-v .class-icon {
    font-size: 1.75rem;
}

/* Name & Class */
.char-name-v {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.char-class-v {
    font-size: 0.8rem;
    color: var(--accent-secondary);
    margin: 4px 0 12px 0;
}

/* Levels */
.char-levels-v {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
    width: 100%;
}

.level-item-v {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.level-num.base {
    color: #fca5a5;
}

.level-num.job {
    color: #93c5fd;
}

.level-lbl {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 3px;
}

.level-divider-v {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
}

/* Info Row */
.char-info-row-v {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.info-item-v {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.info-value.zeny {
    color: #fcd34d;
}

.info-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Responsive */
@media (max-width: 900px) {
    .characters-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 680px;
    }
}

@media (max-width: 680px) {
    .characters-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 450px;
    }
}

@media (max-width: 480px) {
    .characters-grid {
        grid-template-columns: 1fr;
        max-width: 220px;
    }
}

/* Character Card - Compact Single Column */
.character-card {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.4) 0%, rgba(15, 30, 50, 0.6) 100%);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid rgba(62, 193, 211, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
}

.character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.character-card:hover {
    border-color: rgba(62, 193, 211, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1);
}

.character-card:hover::before {
    opacity: 1;
}

.character-card.is-online {
    border-color: rgba(16, 185, 129, 0.3);
}

.character-card.is-online::before {
    background: linear-gradient(90deg, transparent, var(--success), transparent);
    opacity: 1;
}

/* Character Header */
.character-card .char-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Status Badge */
.char-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.char-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.char-status.online {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.char-status.online .status-dot {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.char-status.offline {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.char-status.offline .status-dot {
    background: var(--text-muted);
}

.char-status.large {
    padding: 6px 14px;
    font-size: 0.875rem;
    margin-top: 12px;
    display: inline-flex;
}

/* Character Identity Section */
.char-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.char-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(62, 193, 211, 0.2) 100%);
    border: 2px solid rgba(62, 193, 211, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.char-avatar .class-icon {
    font-size: 1.75rem;
}

.char-info-main {
    flex: 1;
    min-width: 0;
}

.char-info-main .char-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.char-info-main .char-class {
    font-size: 0.85rem;
    color: var(--accent-secondary);
    margin: 0;
}

/* Level Display */
.char-levels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 16px;
}

.level-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.level-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.level-circle.base {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.3) 100%);
    border: 2px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.level-circle.job {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.3) 100%);
    border: 2px solid rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.level-value {
    font-size: 1.1rem;
}

.level-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.level-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* Character Details */
.char-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.detail-icon {
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.detail-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.detail-value {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 500;
}

.detail-value.zeny {
    color: #fcd34d;
}

.detail-value.map {
    color: var(--accent-secondary);
}

/* Character Action Button */
.char-action {
    text-align: center;
}

.manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    width: 100%;
}

.character-card:hover .manage-btn {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #2563eb 100%);
    border-color: var(--accent-primary);
    color: white;
}

.manage-btn svg {
    transition: transform 0.2s ease;
}

.character-card:hover .manage-btn svg {
    transform: translateX(4px);
}

/* Compact Character Card Styles - Small Row */
.character-card.compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
}

.character-card.compact:hover {
    transform: translateY(-1px);
}

.char-avatar-compact {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(62, 193, 211, 0.2) 100%);
    border: 1px solid rgba(62, 193, 211, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.char-avatar-compact .class-icon {
    font-size: 1rem;
}

.char-info-compact {
    min-width: 90px;
    max-width: 110px;
}

.char-info-compact .char-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.char-info-compact .char-class {
    font-size: 0.65rem;
    color: var(--accent-secondary);
    margin: 1px 0 0 0;
}

.char-levels-compact {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 6px;
    border-radius: 4px;
    min-width: 32px;
}

.level-badge.base {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.level-badge.job {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.level-badge .level-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.level-badge .level-label {
    font-size: 0.5rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 1px;
}

.char-zeny-compact {
    display: flex;
    align-items: baseline;
    gap: 1px;
    min-width: 50px;
    flex-shrink: 0;
}

.char-zeny-compact .zeny-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fcd34d;
}

.char-zeny-compact .zeny-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.char-location-compact {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    min-width: 60px;
    flex-shrink: 0;
}

.char-location-compact svg {
    color: var(--accent-primary);
    flex-shrink: 0;
    width: 10px;
    height: 10px;
}

.char-status-compact {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.char-status-compact .status-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.char-status-compact.online {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.char-status-compact.online .status-dot {
    background: var(--success);
    box-shadow: 0 0 3px var(--success);
    animation: pulse 2s ease-in-out infinite;
}

.char-status-compact.offline {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.char-status-compact.offline .status-dot {
    background: var(--text-muted);
}

.char-arrow {
    color: var(--text-muted);
    margin-left: auto;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.char-arrow svg {
    width: 14px;
    height: 14px;
}

.character-card.compact:hover .char-arrow {
    color: var(--accent-primary);
    transform: translateX(2px);
}

/* Responsive compact card */
@media (max-width: 640px) {
    .character-card.compact {
        gap: 8px;
        padding: 8px 10px;
    }

    .char-zeny-compact,
    .char-location-compact {
        display: none;
    }
}

/* Old styles for compatibility */
.char-class-detail {
    color: var(--accent-primary);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.char-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.char-stats .stat {
    display: flex;
    flex-direction: column;
}

.char-stats .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.char-stats .stat-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-primary);
}

.char-info {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.char-info p {
    margin: 4px 0;
}

.char-actions {
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .characters-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .header-content .page-title {
        justify-content: center;
    }

    .characters-grid {
        justify-content: center;
    }
}

/* Character Detail */
.page-header {
    margin-bottom: 24px;
}

.back-link {
    color: var(--text-secondary);
    text-decoration: none;
}

.back-link:hover {
    color: var(--accent-primary);
}

.character-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .character-detail-grid {
        grid-template-columns: 1fr;
    }
}

.detail-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.detail-card h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.detail-card h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.level-info {
    display: flex;
    gap: 30px;
    margin: 20px 0;
}

.level-item {
    display: flex;
    flex-direction: column;
}

.level-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.level-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-primary);
}

.zeny-info {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.zeny-label {
    color: var(--text-muted);
    margin-right: 8px;
}

.zeny-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--warning);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.stat-name {
    color: var(--text-muted);
    font-weight: 500;
}

.stat-item .stat-value {
    color: var(--text-primary);
    font-weight: bold;
}

.hp-sp-info {
    margin: 16px 0;
}

.hp-bar, .sp-bar {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.hp-bar {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.sp-bar {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.points-info {
    color: var(--text-secondary);
}

.points-info p {
    margin: 4px 0;
}

.location-info {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.location-info p {
    margin: 8px 0;
}

.appearance-info {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.appearance-info p {
    margin: 4px 0;
}

.action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.warning-text {
    color: var(--warning);
    font-size: 0.875rem;
    margin-top: 12px;
}

.btn-warning {
    background: var(--warning);
    color: #000;
}

.btn-warning:hover {
    background: #d97706;
}

.text-muted {
    color: var(--text-muted);
}

/* Utilities */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

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

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

/* Guild Castles Page */
.guild-castles-page {
    padding: 40px 0;
}

.guild-castles-page .page-header {
    text-align: center;
    margin-bottom: 40px;
}

.guild-castles-page .page-title {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.guild-castles-page .page-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.castles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.castle-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

.castle-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.castle-header {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.castle-region {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
}

.castle-name {
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
}

.castle-body {
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.guild-emblem {
    width: 64px;
    height: 64px;
    background: var(--bg-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
    overflow: hidden;
}

.guild-emblem img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

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

.guild-name {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guild-master {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.guild-master .label {
    color: var(--text-muted);
}

.war-schedule {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.war-schedule h2 {
    color: var(--text-primary);
    margin-bottom: 24px;
    font-size: 1.5rem;
}

.schedule-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.schedule-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 40px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.schedule-item .day {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.schedule-item .time {
    font-size: 1rem;
    color: var(--text-secondary);
}

.loading-container {
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
    .features-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 20px;
    }

    .navbar-container {
        padding: 0 20px;
    }

    .navbar-menu {
        gap: 10px;
    }

    .nav-link {
        padding: 6px 10px;
        font-size: 0.875rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .features-section {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: 30px 20px;
    }
}

/* ==================== Server Stats Section ==================== */
.server-stats-section {
    background: linear-gradient(145deg, var(--bg-card), rgba(26, 35, 50, 0.9));
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    margin: 30px 0;
}

.server-stats-section .section-header {
    margin-bottom: 20px;
}

.server-stats-section .section-header h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.server-stats-section .section-header h2::before {
    content: "📊";
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.stat-card-wide {
    grid-column: span 4;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    border-color: rgba(255, 193, 7, 0.3);
}

.stat-card-wide:hover {
    border-color: #ffc107;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

.stat-icon {
    font-size: 2rem;
    line-height: 1;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-value.zeny-value {
    color: #ffc107;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

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

    .stat-card-wide {
        grid-column: span 2;
    }

    .stat-card {
        padding: 16px;
        gap: 12px;
    }

    .stat-icon {
        font-size: 1.5rem;
    }

    .stat-value {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-value {
        font-size: 1rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }
}

/* ==================== Ranking Section ==================== */
.ranking-section {
    background: linear-gradient(145deg, var(--bg-card), rgba(26, 35, 50, 0.9));
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    margin: 30px 0;
}

.ranking-section .section-header {
    margin-bottom: 20px;
}

.ranking-section .section-header h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking-section .section-header h2::before {
    content: "🏆";
}

/* Ranking Tabs */
.ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.ranking-tab {
    padding: 8px 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ranking-tab:hover {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-primary);
}

.ranking-tab.active {
    background: linear-gradient(135deg, var(--accent-primary), #2563eb);
    border-color: var(--accent-primary);
    color: white;
}

/* Class Filter */
.ranking-filter {
    margin-bottom: 16px;
}

.class-filter-select {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 200px;
    cursor: pointer;
}

.class-filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Ranking Table */
.ranking-table-wrapper {
    overflow-x: auto;
    margin-bottom: 16px;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ranking-table thead {
    background: rgba(59, 130, 246, 0.1);
}

.ranking-table th {
    padding: 12px 10px;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.ranking-table td {
    padding: 12px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

.ranking-table tbody tr {
    transition: background 0.2s ease;
}

.ranking-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

.ranking-table tbody tr.top-rank {
    background: rgba(59, 130, 246, 0.08);
}

.ranking-table tbody tr.top-rank:hover {
    background: rgba(59, 130, 246, 0.12);
}

/* Rank Column */
.rank-col {
    width: 60px;
    text-align: center;
}

.rank-medal {
    font-size: 1.25rem;
}

.rank-number {
    color: var(--text-muted);
    font-weight: 500;
}

/* Name Column */
.name-col {
    font-weight: 500;
    color: var(--accent-primary);
}

/* Guild Column */
.guild-col {
    color: var(--text-secondary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Exp Column */
.exp-col {
    color: var(--text-secondary);
    font-family: 'Consolas', monospace;
    font-size: 0.85rem;
}

/* Zeny Column */
.zeny-col {
    color: #fcd34d;
    font-weight: 500;
}

/* Fame Column */
.fame-col {
    color: #c084fc;
    font-weight: 500;
}

/* Castle Column */
.castle-col {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Kills/Deaths Columns */
.kills-col {
    color: var(--success);
    font-weight: 500;
}

.deaths-col {
    color: var(--danger);
    font-weight: 500;
}

.kdr-col {
    color: var(--info);
    font-weight: 500;
}

/* MVP Column */
.mvp-col {
    color: #f472b6;
    font-weight: 600;
}

/* Status Column */
.status-col {
    width: 40px;
    text-align: center;
}

.online-dot,
.offline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.online-dot {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
    animation: pulse 2s ease-in-out infinite;
}

.offline-dot {
    background: var(--text-muted);
}

/* Emblem Column */
.emblem-col {
    width: 36px;
    padding: 8px !important;
}

.guild-emblem {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
    background: var(--bg-secondary);
}

.guild-emblem-empty {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
}

/* Ranking Loading */
.ranking-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-muted);
}

/* Ranking Empty */
.ranking-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Pagination */
.ranking-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.pagination-btn {
    padding: 8px 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    color: var(--accent-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.2);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .ranking-tabs {
        gap: 6px;
    }

    .ranking-tab {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .ranking-table th,
    .ranking-table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }

    .class-filter-select {
        width: 100%;
    }
}

/* Loading spinner small */
.loading-spinner-sm {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ==================== Admin AtCommand Page ==================== */
.admin-atcommand-page {
    padding: 40px 0;
}

.admin-atcommand-page .page-title {
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-atcommand-page .page-title::before {
    content: ">";
    font-family: monospace;
    color: var(--accent-primary);
}

/* AtCommand Form Section */
.atcommand-form-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(62, 193, 211, 0.2);
}

.atcommand-form {
    max-width: 600px;
}

.atcommand-form .form-group {
    margin-bottom: 20px;
}

.atcommand-form label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.atcommand-form .form-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'Fira Code', 'Consolas', monospace;
    transition: all 0.2s;
}

.atcommand-form .form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.atcommand-form .form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* User Search Dropdown */
.search-wrapper {
    position: relative;
}

.search-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.search-result-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    transition: background 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

.search-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.result-account-id {
    font-size: 0.8rem;
    color: var(--accent-primary);
    font-weight: 600;
}

.result-userid {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.search-result-chars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.char-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary);
}

.char-tag.online {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.char-tag .online-indicator {
    color: #10b981;
    font-weight: 600;
}

.more-chars {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 3px 8px;
}

.search-no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Selected User Card */
.selected-user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
}

.selected-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-user-id {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 600;
    background: rgba(59, 130, 246, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
}

.selected-user-name {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.selected-user-chars {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.btn-clear {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-clear:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Account column in history table */
.history-table .account-cell {
    color: var(--accent-primary);
    font-weight: 500;
}

/* History Section */
.atcommand-history-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(62, 193, 211, 0.2);
}

.atcommand-history-section h2 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.history-table-wrapper {
    overflow-x: auto;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.history-table th {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-table td {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.history-table tr:hover td {
    background: rgba(59, 130, 246, 0.05);
}

.history-table .command-cell code {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--accent-secondary);
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-done {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* Help Section */
.atcommand-help-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(62, 193, 211, 0.2);
}

.atcommand-help-section h2 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.help-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.help-card h3 {
    font-size: 1rem;
    color: var(--accent-secondary);
    margin-bottom: 12px;
}

.help-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-card li {
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.help-card li code {
    background: rgba(59, 130, 246, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--accent-primary);
    margin-right: 8px;
}

.help-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    border-left: 3px solid #fbbf24;
}

@media (max-width: 768px) {
    .atcommand-form-section,
    .atcommand-history-section,
    .atcommand-help-section {
        padding: 20px;
    }

    .history-table th,
    .history-table td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}

/* ==================== Online Players Page ==================== */

.online-players-page {
    padding: 20px 0;
}

.online-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.online-header .header-content {
    flex: 1;
}

.online-header .page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.online-header .page-title .title-icon {
    color: var(--success);
}

.online-header .header-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.online-header .header-stats {
    display: flex;
    gap: 16px;
}

.online-header .header-stat.online-count {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
}

.online-header .header-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--success);
}

.online-header .header-stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Online Players Table */
.online-table-wrapper {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 24px;
}

.online-table {
    width: 100%;
    border-collapse: collapse;
}

.online-table thead {
    background: rgba(59, 130, 246, 0.1);
}

.online-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.online-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
    font-size: 0.95rem;
}

.online-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

.online-table tbody tr:last-child td {
    border-bottom: none;
}

/* Player name cell */
.player-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-name-cell .online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.player-name {
    font-weight: 500;
    color: var(--text-primary);
}

/* Class badge */
.class-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--accent-primary);
}

.class-badge .class-icon {
    font-size: 1rem;
}

/* Level badges */
.level-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.level-badge.base {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.level-badge.job {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

/* Guild name */
.guild-name {
    color: var(--info);
    font-weight: 500;
}

.no-guild {
    color: var(--text-muted);
    font-style: italic;
}

/* Map name */
.map-name {
    color: var(--text-secondary);
    font-family: 'Consolas', monospace;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Column widths */
.online-table .col-name {
    min-width: 180px;
}

.online-table .col-class {
    min-width: 150px;
}

.online-table .col-level {
    width: 80px;
    text-align: center;
}

.online-table .col-guild {
    min-width: 140px;
}

.online-table .col-map {
    min-width: 120px;
}

/* Clickable player count in status bar */
.status-item.clickable {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.status-item.clickable:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1));
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.status-item.clickable:hover .status-count {
    color: #34d399;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.status-item.clickable:active {
    transform: translateY(0);
}

/* Pagination */
.online-players-page .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.online-players-page .pagination-btn {
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.online-players-page .pagination-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.online-players-page .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.online-players-page .pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Empty state */
.online-players-page .empty-state-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
}

.online-players-page .empty-state-card .empty-icon {
    margin-bottom: 16px;
}

.online-players-page .empty-state-card .empty-icon svg {
    color: var(--text-muted);
}

.online-players-page .empty-state-card h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.online-players-page .empty-state-card p {
    color: var(--text-secondary);
}

/* Loading state */
.online-players-page .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 40px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.online-players-page .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .online-header {
        flex-direction: column;
    }

    .online-header .header-stats {
        width: 100%;
    }

    .online-header .header-stat.online-count {
        flex: 1;
    }

    .online-table-wrapper {
        overflow-x: auto;
    }

    .online-table {
        min-width: 600px;
    }

    .online-table th,
    .online-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

/* ==================== Monster Database ==================== */

.monster-db-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.monster-db-page h1 {
    color: var(--text-primary);
    margin-bottom: 24px;
    font-size: 1.75rem;
}

/* Filters */
.monster-filters {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.filter-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group.search-group {
    flex: 2;
    min-width: 200px;
}

.search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.filter-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.mvp-filter {
    flex: 0;
    min-width: auto;
}

.mvp-filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.mvp-filter input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.filter-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.total-count {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Monster Table */
.monster-table-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.monster-table {
    width: 100%;
    border-collapse: collapse;
}

.monster-table th,
.monster-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.monster-table th {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.monster-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

.monster-table tbody tr:last-child td {
    border-bottom: none;
}

.monster-table .col-id {
    width: 70px;
    color: var(--text-muted);
}

.monster-table .col-sprite {
    width: 50px;
    padding: 4px;
}

.monster-sprite {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.monster-table .col-name {
    min-width: 200px;
}

.monster-table .col-name a {
    text-decoration: none;
    color: var(--accent-primary);
    transition: color 0.2s;
}

.monster-table .col-name a:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

.monster-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mvp-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.mvp-row {
    background: rgba(251, 191, 36, 0.05);
}

.mvp-row:hover {
    background: rgba(251, 191, 36, 0.1) !important;
}

.monster-table .col-level,
.monster-table .col-hp,
.monster-table .col-exp {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

.monster-table .col-hp {
    color: #ef4444;
}

.monster-table .col-property,
.monster-table .col-race,
.monster-table .col-size {
    text-align: center;
}

.element-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

/* Monster Pagination */
.monster-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.pagination-btn {
    padding: 10px 20px;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--accent-secondary);
}

.pagination-btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.page-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==================== Monster Detail Page ==================== */

.monster-detail-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.monster-detail-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Monster Header */
.monster-header {
    display: flex;
    gap: 32px;
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border-color);
}

.monster-sprite-large {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 12px;
    flex-shrink: 0;
}

.monster-sprite-large img {
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
}

.monster-basic-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.monster-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.mvp-badge-large {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
}

.monster-aegis {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.monster-id {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 16px;
}

.monster-properties {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.property-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.property-badge.race {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.property-badge.size {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* Stats Grid */
.monster-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.monster-detail-page .stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.monster-detail-page .stat-card h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.monster-detail-page .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.monster-detail-page .stat-row:last-child {
    border-bottom: none;
}

.monster-detail-page .stat-label {
    color: var(--text-muted);
}

.monster-detail-page .stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.monster-detail-page .stat-value.hp {
    color: #ef4444;
}

.monster-detail-page .stat-value.sp {
    color: #3b82f6;
}

.monster-detail-page .stat-value.base-exp {
    color: #a855f7;
}

.monster-detail-page .stat-value.job-exp {
    color: #22c55e;
}

.monster-detail-page .stat-value.mvp-exp {
    color: #fbbf24;
}

/* Drops Section */
.monster-drops-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.drops-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.drops-card.mvp-drops {
    border-color: rgba(251, 191, 36, 0.3);
}

.drops-card.mvp-drops h3 {
    color: #fbbf24;
}

.drops-card h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.drops-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.drop-name {
    color: var(--text-primary);
}

.steal-protected {
    color: #ef4444;
    font-size: 0.8rem;
    margin-left: 4px;
}

.drop-rate {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.drop-rate.rate-high {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.drop-rate.rate-medium {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.drop-rate.rate-low {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.drop-rate.rate-rare {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* Monster Page Responsive */
@media (max-width: 768px) {
    .monster-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .monster-properties {
        justify-content: center;
    }

    .monster-title {
        justify-content: center;
        font-size: 1.5rem;
    }

    .filter-row {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }

    .mvp-filter {
        justify-content: center;
    }

    .monster-table-container {
        overflow-x: auto;
    }

    .monster-table {
        min-width: 800px;
    }
}

/* ============================================ */
/* Toast Notification System                   */
/* ============================================ */

.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    width: calc(100% - 40px);
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    animation: toast-enter 0.3s ease-out;
}

.toast-item.toast-exit {
    animation: toast-exit 0.3s ease-in forwards;
}

@keyframes toast-enter {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-exit {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-info .toast-icon {
    color: var(--info);
}

.toast-success .toast-icon {
    color: var(--success);
}

.toast-warning .toast-icon {
    color: var(--warning);
}

.toast-error .toast-icon {
    color: var(--danger);
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

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

/* Toast type borders */
.toast-info {
    border-left: 3px solid var(--info);
}

.toast-success {
    border-left: 3px solid var(--success);
}

.toast-warning {
    border-left: 3px solid var(--warning);
}

.toast-error {
    border-left: 3px solid var(--danger);
}

/* ============================================ */
/* Connection Status Indicator                 */
/* ============================================ */

.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.3);
    cursor: default;
}

.connection-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.connection-status.connected .connection-indicator {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.connection-status.connecting .connection-indicator,
.connection-status.reconnecting .connection-indicator {
    background: var(--warning);
    box-shadow: 0 0 6px var(--warning);
    animation: blink 1s infinite;
}

.connection-status.disconnected .connection-indicator {
    background: var(--danger);
    box-shadow: 0 0 6px var(--danger);
    animation: none;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.connection-status .status-text {
    color: var(--text-secondary);
    text-transform: capitalize;
}

.connection-status.connected .status-text {
    color: var(--success);
}

.connection-status.disconnected .status-text {
    color: var(--danger);
}

.connection-status.reconnecting .status-text {
    color: var(--warning);
}

/* Toast Mobile Responsive */
@media (max-width: 480px) {
    .toast-container {
        top: auto;
        bottom: 20px;
        right: 10px;
        left: 10px;
        max-width: none;
        width: auto;
    }

    .toast-item {
        padding: 12px;
    }

    .toast-title {
        font-size: 0.85rem;
    }

    .toast-message {
        font-size: 0.75rem;
    }
}

/* Admin Settings Page */
.admin-settings-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.admin-settings-page .page-header {
    margin-bottom: 30px;
}

.admin-settings-page .page-header h1 {
    font-size: 1.75rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.admin-settings-page .page-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
    flex-wrap: wrap;
}

.settings-tabs .tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-tabs .tab-btn:hover {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.settings-tabs .tab-btn.active {
    background: var(--accent-primary);
    color: white;
}

.settings-panel {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 20px;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-label {
    flex: 1;
    min-width: 200px;
}

.settings-label .label-text {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 4px;
}

.settings-label .label-desc {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.settings-value {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.settings-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.settings-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.settings-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.settings-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
    background-color: white;
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.settings-actions .btn-primary {
    padding: 12px 32px;
    font-size: 0.95rem;
}

.settings-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.unsaved-notice {
    color: var(--warning);
    font-size: 0.85rem;
}

/* Responsive Settings */
@media (max-width: 768px) {
    .admin-settings-page {
        padding: 15px;
    }

    .settings-row {
        flex-direction: column;
        gap: 12px;
    }

    .settings-value {
        max-width: 100%;
    }

    .settings-tabs {
        flex-direction: column;
    }

    .settings-tabs .tab-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==================== Admin Gambling Page ==================== */

.admin-gambling-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.admin-gambling-page .page-header {
    margin-bottom: 30px;
}

.admin-gambling-page .page-header h1 {
    font-size: 1.75rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.admin-gambling-page .page-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.gambling-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
    flex-wrap: wrap;
}

.gambling-tabs .tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gambling-tabs .tab-btn:hover {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.gambling-tabs .tab-btn.active {
    background: var(--accent-primary);
    color: white;
}

.gambling-content {
    min-height: 400px;
}

/* Admin Stats Grid */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stat-card.highlight {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), var(--bg-card));
}

.stat-icon {
    font-size: 2rem;
    min-width: 40px;
    text-align: center;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Admin Table */
.admin-table-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead {
    background: var(--bg-secondary);
}

.admin-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

.admin-table td {
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

.admin-table .zeny {
    color: #fbbf24;
    font-weight: 500;
}

.admin-table .date {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.admin-table .player-name {
    font-weight: 500;
}

.admin-table .action-buttons {
    display: flex;
    gap: 8px;
}

/* Side Badge */
.side-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.side-badge.side-poring {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.side-badge.side-drops {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Status Badge */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.badge-warning {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.badge-error {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.badge-default {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

/* Roulette Result Badge */
.roulette-result-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.result-black {
    background: rgba(17, 17, 17, 0.9);
    color: #fff;
    border: 1px solid #444;
}

.result-red {
    background: rgba(220, 38, 38, 0.8);
    color: #fff;
}

.result-green {
    background: rgba(22, 163, 74, 0.8);
    color: #fff;
}

.result-default {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

/* Filter Bar */
.admin-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Small Button */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
}

.page-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Settings Container */
.settings-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.settings-section {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 28px;
    transition: box-shadow 0.2s ease;
}

.settings-section:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.settings-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setting-item label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.setting-input {
    display: flex;
    align-items: center;
}

.setting-input .form-input,
.setting-input .form-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.setting-input .form-input:focus,
.setting-input .form-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.setting-input .form-input:hover,
.setting-input .form-select:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.setting-input .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.setting-input .form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

/* Saving indicator */
.saving-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 500;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Alert Styles */
.alert {
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

/* Loading state */
.gambling-content .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Responsive Admin Gambling */
@media (max-width: 768px) {
    .admin-gambling-page {
        padding: 15px;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gambling-tabs {
        flex-direction: column;
    }

    .gambling-tabs .tab-btn {
        width: 100%;
        text-align: center;
    }

    .admin-table-container {
        overflow-x: auto;
    }

    .admin-table {
        min-width: 800px;
    }

    .settings-section {
        padding: 20px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .settings-section {
        padding: 16px;
    }

    .settings-section-title {
        font-size: 1.1rem;
    }

    .setting-input .form-input,
    .setting-input .form-select {
        padding: 10px 14px;
    }
}

/* ==================== Admin Trade Page ==================== */

.admin-trade-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.admin-trade-page .page-header {
    margin-bottom: 30px;
}

.admin-trade-page .page-header h1 {
    font-size: 1.75rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Trade Tabs */
.trade-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
    flex-wrap: wrap;
}

.trade-tabs .tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.trade-tabs .tab-btn:hover {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.trade-tabs .tab-btn.active {
    background: var(--accent-primary);
    color: white;
}

/* Trade Content */
.trade-content {
    min-height: 400px;
}

.trade-content .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-secondary);
    font-size: 1rem;
}

.trade-content .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary);
    font-size: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Listings Container */
.listings-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Item Cell in Table */
.admin-table .item-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-table .item-thumb {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--bg-secondary);
}

.admin-table .item-name {
    font-weight: 500;
    color: var(--text-primary);
}

.admin-table .item-amount {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Price Cell */
.admin-table .price-cell {
    color: #fbbf24;
    font-weight: 600;
}

/* Date Cell */
.admin-table .date-cell {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Status Badge (trade specific) */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.status-badge.badge-warning {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.status-badge.badge-error {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-badge.badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Saving Indicator */
.saving-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.saving-indicator::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

/* Btn Small */
.btn-small {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-small:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-primary);
}

.btn-small:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-small.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.btn-small.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.3);
}

/* Responsive Admin Trade */
@media (max-width: 768px) {
    .admin-trade-page {
        padding: 15px;
    }

    .trade-tabs {
        flex-direction: column;
    }

    .trade-tabs .tab-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==================== Chat Page ==================== */

/* Lock body scroll on chat page (desktop) */
body.chat-page-active {
    overflow: hidden;
}

.chat-page {
    height: calc(100vh - 60px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.chat-container {
    display: flex;
    height: 100%;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Chat Sidebar */
.chat-sidebar {
    width: 240px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    height: 60px;
    box-sizing: border-box;
}

.sidebar-icon {
    font-size: 1.2rem;
}

.room-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
}

.room-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.room-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.room-item.active {
    background: var(--accent-primary);
    color: white;
}

.room-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.room-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-top: 1px solid var(--border-color);
    height: 70px;
    box-sizing: border-box;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.login-prompt {
    display: block;
    padding: 10px 16px;
    background: var(--accent-primary);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.login-prompt:hover {
    background: var(--accent-hover);
}

/* Chat Main Area */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-primary);
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    height: 60px;
    box-sizing: border-box;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-room-icon {
    font-size: 1.5rem;
}

.chat-room-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-header-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.status-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Chat Connection Status */
.chat-connection {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chat-connection.connected {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.chat-connection.connecting {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.chat-connection.reconnecting {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.chat-connection.disconnected {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.chat-connection .connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.chat-connection.connected .connection-dot {
    box-shadow: 0 0 8px currentColor;
    animation: pulse-green 2s infinite;
}

.chat-connection.connecting .connection-dot,
.chat-connection.reconnecting .connection-dot {
    animation: pulse-yellow 1s infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-yellow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Chat Online Count */
.chat-online-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 8px;
}

/* Chat Messages Area */
/* Messages wrapper for positioning new message indicator */
.chat-messages-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* New messages button */
.new-messages-btn {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    animation: bounce-in 0.3s ease;
    z-index: 10;
    transition: all 0.2s ease;
}

.new-messages-btn:hover {
    background: var(--accent-hover);
    transform: translateX(-50%) scale(1.05);
}

.new-messages-icon {
    font-size: 1rem;
    animation: bounce 1s infinite;
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.chat-loading,
.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.empty-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Chat Message */
.chat-message {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg-card);
    transition: background 0.2s ease;
}

.chat-message:hover {
    background: var(--bg-card-hover);
}

.chat-message.own {
    background: rgba(59, 130, 246, 0.15);
}

.chat-message.from-game {
    border-left: 3px solid var(--success);
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.chat-message.own .message-avatar {
    background: var(--accent-primary);
    color: white;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.message-author {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.message-char-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0.7;
}

.message-job-info {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 500;
    opacity: 0.9;
}

.message-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.message-badge.game {
    background: var(--success);
    color: white;
}

.message-badge.system {
    background: #ffc107;
    color: #1a1a1a;
}

.message-badge.server {
    background: #6366f1;
    color: white;
}

/* System message styling (full chat page) */
.chat-message.from-system {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.1) 100%);
    border-left: 3px solid #ffc107;
}

.message-avatar.system-avatar {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    font-size: 1.2rem;
}

.message-author.system-author {
    color: #ffc107;
    font-weight: 600;
}

.message-text.system-text {
    color: #ffeeba;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

.message-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    word-break: break-word;
    line-height: 1.5;
}

/* Chat Error */
.chat-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(239, 68, 68, 0.1);
    border-top: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
    font-size: 0.85rem;
}

/* Chat Input */
.chat-input-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    height: 70px;
    box-sizing: border-box;
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat-input:focus {
    border-color: var(--accent-primary);
}

.chat-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-send-btn {
    padding: 12px 24px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-send-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-login-prompt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-login-prompt a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.chat-login-prompt a:hover {
    text-decoration: underline;
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Chat Responsive */
@media (max-width: 768px) {
    body.chat-page-active {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .chat-page {
        margin: 0;
        padding: 0;
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        overflow: hidden;
        z-index: 100;
        max-width: none;
    }

    .chat-container {
        flex-direction: row;
        height: 100%;
        overflow: hidden;
        border-radius: 0;
        border: none;
    }

    /* Sidebar becomes vertical icon bar on left */
    .chat-sidebar {
        width: 56px;
        min-width: 56px;
        flex-direction: column;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        order: 0;
        background: var(--bg-primary);
        padding-top: 0;
        padding-bottom: 65px;
        height: 100%;
        overflow: hidden;
    }

    .sidebar-title {
        display: none;
    }

    .room-list {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 6px 4px;
        padding-top: 8px;
        gap: 4px;
        align-items: center;
    }

    /* Mobile room item - compact icon buttons */
    .room-item {
        flex-shrink: 0;
        padding: 0;
        gap: 0;
        font-size: 0.8rem;
        white-space: nowrap;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(30, 41, 59, 0.5);
        border: 1.5px solid rgba(255, 255, 255, 0.06);
        transition: all 0.15s ease;
    }

    .room-item:hover {
        background: rgba(59, 130, 246, 0.15);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .room-item:active {
        transform: scale(0.92);
    }

    .room-item.active {
        background: linear-gradient(135deg, var(--accent-primary) 0%, #2563eb 100%);
        border-color: transparent;
        box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35);
    }

    .room-item.active .room-icon {
        filter: brightness(1.1);
    }

    .room-icon {
        font-size: 1.25rem;
        width: auto;
    }

    /* Hide room name on mobile, show only icon */
    .room-name {
        display: none;
    }

    .sidebar-footer {
        display: none;
    }

    /* Main chat area */
    .chat-main {
        order: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .chat-header {
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .chat-room-icon {
        font-size: 1.2rem;
    }

    .chat-room-name {
        font-size: 1rem;
    }

    .chat-online-count {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    /* Messages wrapper for mobile */
    .chat-messages-wrapper {
        flex: 1;
        min-height: 0;
    }

    /* Messages area - scrollable */
    .chat-messages {
        flex: 1;
        padding: 10px;
        padding-bottom: 70px; /* Space for fixed input */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* New messages button for mobile */
    .new-messages-btn {
        bottom: 70px; /* Above fixed input */
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Input fixed at bottom - leave space for icon bar */
    .chat-input-form {
        position: fixed;
        bottom: 0;
        left: 56px;
        right: 0;
        padding: 10px;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        z-index: 101;
    }

    .chat-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .chat-send-btn {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    /* Error message above input */
    .chat-error {
        position: fixed;
        bottom: 60px;
        left: 66px;
        right: 10px;
        z-index: 102;
    }

    /* Login prompt fixed at bottom */
    .chat-login-prompt {
        position: fixed;
        bottom: 0;
        left: 56px;
        right: 0;
        padding: 16px;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        z-index: 101;
    }

    /* Message styling for mobile */
    .message-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .message-author {
        font-size: 0.8rem;
    }

    .message-job-info {
        font-size: 0.65rem;
    }

    .message-time {
        font-size: 0.65rem;
    }

    .message-text {
        font-size: 0.9rem;
    }

    .message-badge {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
}

/* =====================
   Context Menu (Admin Chat)
   ===================== */

.context-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 9998;
}

.context-menu {
    position: fixed;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    overflow: hidden;
    animation: context-menu-appear 0.15s ease;
}

@keyframes context-menu-appear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-header {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.context-menu-user {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.context-menu-id {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-color);
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
}

.context-menu-item:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

.context-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.ban:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.context-menu-item.unban:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.context-menu-icon {
    font-size: 1rem;
}

/* ==================== Admin Chat Page ==================== */

.admin-chat-page {
    min-height: 100vh;
    padding: 20px;
}

.admin-chat-page .admin-container {
    max-width: 1200px;
    margin: 0 auto;
}

.admin-chat-page .admin-header {
    text-align: center;
    margin-bottom: 30px;
}

.admin-chat-page .admin-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.admin-chat-page .admin-icon {
    font-size: 2rem;
}

.admin-chat-page .admin-subtitle {
    color: var(--text-muted);
    margin-top: 8px;
}

/* Admin Alert Messages */
.admin-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.admin-alert.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.admin-alert.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Admin Tabs */
.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
}

.admin-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.admin-tab.active {
    color: var(--accent-blue);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--accent-blue);
}

.admin-tab .tab-count {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

.admin-tab.active .tab-count {
    background: var(--accent-blue);
    color: white;
}

/* Admin Table */
.admin-table-container {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table th {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.admin-table td {
    color: var(--text-primary);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: var(--bg-tertiary);
}

.admin-table .account-id {
    font-family: monospace;
    font-weight: 600;
}

.admin-table .reason {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table .date {
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.admin-table .expires {
    white-space: nowrap;
    font-size: 0.9rem;
}

.admin-table .btn-unban {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #22c55e;
    color: #22c55e;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.admin-table .btn-unban:hover:not(:disabled) {
    background: #22c55e;
    color: white;
}

.admin-table .btn-unban:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Add Word Form */
.add-word-form {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.add-word-form .form-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.add-word-form .form-group {
    flex: 1;
    min-width: 150px;
}

.add-word-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.add-word-form .form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.add-word-form .form-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.add-word-form .btn-add {
    padding: 10px 20px;
    background: var(--accent-blue);
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.add-word-form .btn-add:hover:not(:disabled) {
    background: #2563eb;
}

.add-word-form .btn-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bad Words Grid */
.bad-words-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.word-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s;
}

.word-card:hover {
    border-color: var(--accent-blue);
}

.word-card.inactive {
    opacity: 0.5;
}

.word-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.word-text {
    font-weight: 600;
    color: #ef4444;
}

.word-arrow {
    color: var(--text-muted);
}

.word-replacement {
    color: var(--text-muted);
    font-style: italic;
}

.word-card .btn-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.word-card .btn-remove:hover:not(:disabled) {
    background: #ef4444;
    color: white;
}

.word-card .btn-remove:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Admin Empty State */
.admin-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.admin-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.admin-empty p {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.admin-empty .empty-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Admin Loading */
.admin-loading {
    text-align: center;
    padding: 60px 20px;
}

.admin-loading p {
    color: var(--text-muted);
    margin-top: 16px;
}

/* Admin Error */
.admin-error {
    text-align: center;
    padding: 60px 20px;
}

.admin-error h1 {
    color: #ef4444;
    margin-bottom: 10px;
}

.admin-error p {
    color: var(--text-muted);
}

/* Mobile responsive for admin chat */
@media (max-width: 768px) {
    .admin-tabs {
        flex-direction: column;
    }

    .admin-tab {
        width: 100%;
        justify-content: center;
    }

    .add-word-form .form-row {
        flex-direction: column;
    }

    .add-word-form .btn-add {
        width: 100%;
    }

    .bad-words-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== Chat Floating Sidebar ==================== */

.chat-floating-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    transition: all 0.3s ease;
    z-index: 9000;
}

.chat-floating-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}

.chat-floating-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--success);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9001;
    animation: fade-in 0.2s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chat-sidebar-panel {
    position: fixed;
    left: 20px;
    bottom: 90px;
    width: 380px;
    max-height: calc(100vh - 140px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 9002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slide-up 0.3s ease;
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    height: 60px;
    box-sizing: border-box;
}

.chat-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-sidebar-icon {
    font-size: 1.2rem;
}

.chat-sidebar-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 4px;
}

.chat-sidebar-status.connected {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.chat-sidebar-status.connecting,
.chat-sidebar-status.reconnecting {
    background: var(--warning);
    animation: pulse 1s ease-in-out infinite;
}

.chat-sidebar-status.disconnected {
    background: var(--danger);
}

/* Room Selector Button */
.chat-room-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.chat-room-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

.chat-room-icon {
    font-size: 1rem;
}

.chat-room-name {
    font-weight: 500;
}

.chat-room-arrow {
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.chat-room-btn:hover .chat-room-arrow {
    opacity: 1;
}

/* Room Picker Dropdown */
.chat-room-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.chat-room-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.7rem;
}

.chat-room-option:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.chat-room-option.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.chat-room-option:disabled {
    cursor: default;
}

.chat-room-option-icon {
    font-size: 1.2rem;
}

.chat-room-option-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chat-sidebar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-sidebar-online {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chat-sidebar-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--text-muted);
    background: transparent;
    transition: all 0.2s ease;
}

.chat-sidebar-expand:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.chat-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-sidebar-close:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.chat-sidebar-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    max-height: 400px;
    min-height: 200px;
}

.chat-sidebar-loading,
.chat-sidebar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.chat-sidebar-msg {
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--bg-card);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.chat-sidebar-msg.from-game {
    border-left-color: var(--success);
}

.chat-sidebar-msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.chat-sidebar-msg-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-sidebar-msg-char-name {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0.7;
}

.chat-sidebar-msg-class {
    font-size: 0.65rem;
    color: var(--accent-primary);
    padding: 1px 6px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 4px;
}

.chat-sidebar-msg-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
    font-weight: 500;
}

.chat-sidebar-msg-badge.system {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.chat-sidebar-msg-server {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    font-weight: 500;
}

/* System message styling */
.chat-sidebar-msg.from-system {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
    border-left: 2px solid #ffc107;
}

.chat-sidebar-msg-system-icon {
    font-size: 0.75rem;
}

.chat-sidebar-msg-name.system-name {
    color: #ffc107;
    font-weight: 600;
}

.chat-sidebar-msg-text.system-text {
    color: #ffeeba;
}

.chat-sidebar-msg-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: auto;
}

.chat-sidebar-msg-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

.chat-sidebar-error {
    padding: 8px 12px;
    margin: 0 12px 8px;
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
    border-radius: 6px;
    font-size: 0.8rem;
}

.chat-sidebar-input {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    height: 70px;
    box-sizing: border-box;
}

.chat-sidebar-input input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat-sidebar-input input:focus {
    border-color: var(--accent-primary);
}

.chat-sidebar-input input::placeholder {
    color: var(--text-muted);
}

.chat-sidebar-input button {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--accent-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.chat-sidebar-input button:hover:not(:disabled) {
    background: var(--accent-hover);
}

.chat-sidebar-input button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-sidebar-login {
    flex: 1;
    text-align: center;
}

.chat-sidebar-login a {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.chat-sidebar-login a:hover {
    text-decoration: underline;
}

/* Mobile responsive for chat sidebar */
@media (max-width: 480px) {
    .chat-floating-btn {
        left: 12px;
        bottom: 12px;
        width: 50px;
        height: 50px;
    }

    .chat-sidebar-panel {
        left: 10px;
        right: 10px;
        bottom: 75px;
        width: auto;
        max-height: calc(100vh - 100px);
    }
}

/* ==================== Wallet Page ==================== */

.wallet-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.wallet-page h1 {
    font-size: 1.8rem;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.wallet-card {
    background: linear-gradient(135deg, #1a2332 0%, #243044 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.wallet-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.balance-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.balance-amount {
    font-size: 3rem;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.balance-currency {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.wallet-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Wallet Instructions */
.wallet-instructions {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid var(--border-color);
}

.wallet-instructions h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.instruction-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 16px;
}

.instruction-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.instruction-card.deposit {
    border-color: rgba(34, 197, 94, 0.3);
}

.instruction-card.withdraw {
    border-color: rgba(239, 68, 68, 0.3);
}

.instruction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 12px;
}

.instruction-card.deposit .instruction-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.instruction-card.withdraw .instruction-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.instruction-card h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 1rem;
}

.instruction-card ol {
    padding-left: 20px;
    margin: 0;
}

.instruction-card li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 8px;
    line-height: 1.5;
}

.instruction-card li:last-child {
    margin-bottom: 0;
}

.instruction-card li strong {
    color: var(--accent-primary);
}

.npc-location {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.npc-location strong {
    color: #fbbf24;
}

.transfer-note {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Transfer Form */
.transfer-form-container {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid var(--border-color);
}

.transfer-form-container h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

.transfer-form-container .form-group {
    margin-bottom: 16px;
}

.transfer-form-container label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.transfer-form-container input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

.transfer-form-container input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.transfer-form-container .error-message {
    margin: 12px 0;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #ef4444;
}

/* Transactions Section */
.transactions-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.transactions-section h2 {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 1.3rem;
}

.no-transactions {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.transactions-table {
    width: 100%;
    border-collapse: collapse;
}

.transactions-table th,
.transactions-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.transactions-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.transactions-table td {
    color: var(--text-primary);
}

.transactions-table tr:last-child td {
    border-bottom: none;
}

.transactions-table tr:hover td {
    background: rgba(59, 130, 246, 0.05);
}

.tx-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.tx-type.deposit {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.tx-type.withdraw {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tx-type.transfer {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.tx-type.transfer_in {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.tx-type.transfer_out {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.tx-type.web_activity {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.tx-type.purchase {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.tx-type.reward {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.tx-type.refund {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.tx-type.admin {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

/* Coinflip Transaction Types */
.tx-type.coinflip_bet {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tx-type.coinflip_win {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.tx-type.coinflip_refund {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

/* Jackpot Transaction Types */
.tx-type.jackpot_deposit {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.tx-type.jackpot_win {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.tx-type.jackpot_refund {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.transactions-table .positive {
    color: #22c55e;
    font-weight: 600;
}

.transactions-table .negative {
    color: #ef4444;
    font-weight: 600;
}

/* Wallet Pagination */
.wallet-page .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.wallet-page .page-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Wallet Page Responsive */
@media (max-width: 768px) {
    .wallet-page {
        padding: 16px;
    }

    .wallet-card {
        padding: 24px 16px;
    }

    .balance-amount {
        font-size: 2.2rem;
    }

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

    .transactions-table {
        font-size: 0.85rem;
    }

    .transactions-table th,
    .transactions-table td {
        padding: 10px 8px;
    }

    /* Hide some columns on mobile */
    .transactions-table th:nth-child(4),
    .transactions-table td:nth-child(4),
    .transactions-table th:nth-child(5),
    .transactions-table td:nth-child(5) {
        display: none;
    }

    .tx-type {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
}

/* ==================== Coinflip Page ==================== */

.coinflip-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.coinflip-page h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #f8f9fa;
    display: flex;
    align-items: center;
    gap: 12px;
}

.coinflip-page h1::before {
    content: "🎲";
    font-size: 1.5rem;
}

.coinflip-balance {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.coinflip-balance .balance-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffc107;
}

.coinflip-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #94a3b8;
}

.coinflip-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #f87171;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.coinflip-error .close-btn {
    font-weight: 700;
    padding: 0 8px;
}

/* Tabs */
.coinflip-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding-bottom: 12px;
}

.coinflip-tabs .tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 8px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
}

.coinflip-tabs .tab:hover {
    color: #f8f9fa;
    background: rgba(59, 130, 246, 0.1);
}

.coinflip-tabs .tab.active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    font-weight: 600;
}

/* Tab Controls (page size selector) */
.tab-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-size-selector label {
    color: #9ca3af;
    font-size: 0.9rem;
}

.page-size-selector select {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    color: #f8f9fa;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-size-selector select:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.page-size-selector select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Create Game Button */
.create-game-btn {
    margin-bottom: 24px;
    padding: 12px 32px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.create-game-btn:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.game-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.3s ease;
    animation: slideDown 0.4s ease-out;
    min-height: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Countdown Timer - Minimal */
.countdown-timer {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1;
}

.countdown-timer .countdown-icon {
    font-size: 0.65rem;
}

.countdown-timer .countdown-text {
    font-variant-numeric: tabular-nums;
}

.countdown-timer.normal {
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.countdown-timer.warning {
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
}

.countdown-timer.urgent {
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.15);
    animation: urgentPulse 1s ease-in-out infinite;
}

.countdown-timer.expired {
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
    background: rgba(107, 114, 128, 0.2);
}

/* Expired game card */
.game-card.expired {
    opacity: 0.6;
    filter: grayscale(50%);
}

.game-card.expired:hover {
    transform: none;
    box-shadow: none;
}

.expired-text {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
}

@keyframes urgentPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide up animation for exiting cards */
.game-card.exiting {
    animation: slideUp 0.4s ease-out forwards;
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.game-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Animation game cards (in-card animation) */
.game-card.animating {
    border-color: rgba(255, 200, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 200, 0, 0.3);
    animation: cardGlow 1.5s ease-in-out infinite;
}

@keyframes cardGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 200, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 200, 0, 0.5); }
}

.game-card.animating .coin-container {
    width: 70px;
    height: 70px;
    margin: 8px auto;
}

.game-card.animating .flipping-text {
    text-align: center;
    color: #ffc107;
    font-weight: 600;
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Result card states */
.game-card.result-card {
    text-align: center;
    animation: resultFadeIn 0.5s ease-out;
}

@keyframes resultFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.game-card.result-card.win {
    border-color: rgba(34, 197, 94, 0.6);
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.15), rgba(15, 23, 42, 0.9));
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.game-card.result-card.lose {
    border-color: rgba(239, 68, 68, 0.6);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.15), rgba(15, 23, 42, 0.9));
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

/* VS text in header */
.game-header .vs-text {
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 4px;
}

.game-header .joiner-name {
    font-weight: 600;
    color: #f8f9fa;
    font-size: 0.85rem;
}

.game-header .creator-name.winner,
.game-header .joiner-name.winner {
    color: #22c55e;
}

/* Result icon in card */
.game-card .result-icon {
    width: 50px;
    height: 50px;
    margin: 8px auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: resultBounce 0.6s ease-out;
}

@keyframes resultBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.game-card .result-icon.poring {
    background: radial-gradient(ellipse at 30% 30%, #ffb347, #ff8c00);
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
}

.game-card .result-icon.drops {
    background: radial-gradient(ellipse at 30% 30%, #60a5fa, #3b82f6);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.game-card .result-icon img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.game-card .result-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 4px 0;
}

.game-card.result-card.win .result-title {
    color: #22c55e;
}

.game-card.result-card.lose .result-title {
    color: #ef4444;
}

.game-card .result-payout {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 4px 0 8px;
}

.game-card .result-payout.win {
    color: #22c55e;
}

.game-card .result-payout.lose {
    color: #ef4444;
}

/* Animation games section */
.games-grid.animation-games {
    margin-bottom: 16px;
}

.game-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
}

.creator-name {
    font-weight: 600;
    color: #f8f9fa;
    font-size: 0.85rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.side-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.side-badge.poring {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.3);
}

.side-badge.drops {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.game-bet {
    text-align: center;
    margin: 4px 0;
}

.bet-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffc107;
}

.bet-currency {
    color: #94a3b8;
    font-size: 0.7rem;
}

/* Side preview in waiting card - minimal icon display */
.game-side-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px 0;
    flex: 1;
}

.game-side-preview .side-icon-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: sidePulse 2s ease-in-out infinite;
}

@keyframes sidePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.game-side-preview .side-icon-large.poring {
    background: radial-gradient(ellipse at 30% 30%, #ffb347, #ff8c00);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

.game-side-preview .side-icon-large.drops {
    background: radial-gradient(ellipse at 30% 30%, #60a5fa, #3b82f6);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.game-side-preview .side-icon-large img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.game-info {
    text-align: center;
    margin-bottom: 6px;
}

.seed-hash {
    font-family: monospace;
    font-size: 0.65rem;
    color: #64748b;
    cursor: help;
}

.game-actions {
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.game-actions .btn-sm {
    padding: 5px 16px;
    font-size: 0.75rem;
}

.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.btn-success:hover {
    background: linear-gradient(135deg, #4ade80, #22c55e);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

/* No Games */
.no-games {
    text-align: center;
    padding: 40px 16px;
    color: #94a3b8;
}

.no-games-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* History Tab */
.history-table,
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.8rem;
}

.history-table th,
.history-table td,
.leaderboard-table th,
.leaderboard-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.history-table th,
.leaderboard-table th {
    background: rgba(59, 130, 246, 0.1);
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.history-table tr:hover,
.leaderboard-table tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

.result.poring {
    color: #ffa500;
}

.result.drops {
    color: #60a5fa;
}

.winner {
    color: #22c55e;
    font-weight: 600;
}

/* Replay button */
.btn-replay {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.btn-replay:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.6);
    transform: scale(1.05);
}

/* Clickable row */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* Replay modal */
.replay-modal .coinflip-animation-card {
    max-width: 280px;
}

/* Leaderboard specific */
.leaderboard-table .rank {
    font-weight: 700;
    font-size: 1.1rem;
}

.leaderboard-table .top-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
}

.leaderboard-table .top-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent);
}

.leaderboard-table .top-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent);
}

.medal {
    font-size: 1.5rem;
}

.player-name {
    font-weight: 600;
    color: #f8f9fa;
}

.wins {
    color: #22c55e;
}

.losses {
    color: #ef4444;
}

.positive {
    color: #22c55e;
}

.negative {
    color: #ef4444;
}

/* Create Game Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 450px;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content h2 {
    margin-bottom: 24px;
    color: #f8f9fa;
    font-size: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #94a3b8;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: #f8f9fa;
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-color: #3b82f6;
}

.form-group small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 0.85rem;
}

/* Side Selector */
.side-selector {
    display: flex;
    gap: 16px;
}

.side-btn {
    flex: 1;
    padding: 24px 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.side-btn:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.side-btn.selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}

.side-btn.poring.selected {
    border-color: #ffa500;
    background: rgba(255, 165, 0, 0.15);
}

.side-btn.drops.selected {
    border-color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
}

.side-icon {
    font-size: 2.5rem;
}

.side-name {
    font-size: 1rem;
    font-weight: 600;
    color: #f8f9fa;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-actions .btn {
    padding: 10px 24px;
}

/* Animation Overlay */
.animation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: pointer;
}

/* Coin Animation - 3D Realistic Flip */
.coin-container {
    perspective: 1200px;
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
}

.coin {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s;
}

/* Flipping animation - 3 seconds with deceleration */
.coin-container.flipping .coin {
    animation: coinFlip3D 3s cubic-bezier(0.3, 0.1, 0.1, 1) forwards;
}

/* Landing on Poring (front side) */
.coin-container.result-poring .coin {
    animation: coinFlipToPoring 3s cubic-bezier(0.3, 0.1, 0.1, 1) forwards;
}

/* Landing on Drops (back side) */
.coin-container.result-drops .coin {
    animation: coinFlipToDrops 3s cubic-bezier(0.3, 0.1, 0.1, 1) forwards;
}

@keyframes coinFlip3D {
    0% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    8% {
        transform: rotateY(180deg) rotateX(20deg);
    }
    16% {
        transform: rotateY(360deg) rotateX(-20deg);
    }
    24% {
        transform: rotateY(540deg) rotateX(15deg);
    }
    32% {
        transform: rotateY(720deg) rotateX(-15deg);
    }
    40% {
        transform: rotateY(900deg) rotateX(10deg);
    }
    50% {
        transform: rotateY(1080deg) rotateX(-10deg);
    }
    60% {
        transform: rotateY(1260deg) rotateX(5deg);
    }
    72% {
        transform: rotateY(1440deg) rotateX(-5deg);
    }
    85% {
        transform: rotateY(1620deg) rotateX(2deg);
    }
    100% {
        transform: rotateY(1800deg) rotateX(0deg);
    }
}

/* End with Poring facing front (rotateY ends at even multiple of 360) */
@keyframes coinFlipToPoring {
    0% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
    }
    6% {
        transform: rotateY(180deg) rotateX(25deg) scale(1.1);
    }
    12% {
        transform: rotateY(360deg) rotateX(-25deg) scale(1.15);
    }
    18% {
        transform: rotateY(540deg) rotateX(20deg) scale(1.2);
    }
    26% {
        transform: rotateY(720deg) rotateX(-20deg) scale(1.15);
    }
    34% {
        transform: rotateY(900deg) rotateX(15deg) scale(1.1);
    }
    44% {
        transform: rotateY(1080deg) rotateX(-15deg) scale(1.05);
    }
    56% {
        transform: rotateY(1260deg) rotateX(10deg) scale(1);
    }
    70% {
        transform: rotateY(1440deg) rotateX(-5deg) scale(1);
    }
    85% {
        transform: rotateY(1620deg) rotateX(3deg) scale(1.05);
    }
    92% {
        transform: rotateY(1750deg) rotateX(-2deg) scale(1.08);
    }
    100% {
        /* End at 1800deg (5 full rotations) = Poring faces front */
        transform: rotateY(1800deg) rotateX(0deg) scale(1);
    }
}

/* End with Drops facing front (rotateY ends at odd multiple of 180) */
@keyframes coinFlipToDrops {
    0% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
    }
    6% {
        transform: rotateY(180deg) rotateX(25deg) scale(1.1);
    }
    12% {
        transform: rotateY(360deg) rotateX(-25deg) scale(1.15);
    }
    18% {
        transform: rotateY(540deg) rotateX(20deg) scale(1.2);
    }
    26% {
        transform: rotateY(720deg) rotateX(-20deg) scale(1.15);
    }
    34% {
        transform: rotateY(900deg) rotateX(15deg) scale(1.1);
    }
    44% {
        transform: rotateY(1080deg) rotateX(-15deg) scale(1.05);
    }
    56% {
        transform: rotateY(1260deg) rotateX(10deg) scale(1);
    }
    70% {
        transform: rotateY(1440deg) rotateX(-5deg) scale(1);
    }
    85% {
        transform: rotateY(1620deg) rotateX(3deg) scale(1.05);
    }
    92% {
        transform: rotateY(1750deg) rotateX(-2deg) scale(1.08);
    }
    100% {
        /* End at 1980deg (5.5 rotations) = Drops faces front */
        transform: rotateY(1980deg) rotateX(0deg) scale(1);
    }
}

.coin-side {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    border: 3px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

/* Poring side - Orange theme */
.coin-side.poring {
    background: radial-gradient(ellipse at 30% 30%, #ffb347, #ff8c00, #e67300);
    box-shadow:
        0 0 20px rgba(255, 165, 0, 0.6),
        inset 0 -4px 10px rgba(0, 0, 0, 0.3),
        inset 0 4px 10px rgba(255, 255, 255, 0.2);
}

.coin-side.poring::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 15%;
    width: 35%;
    height: 25%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent);
    border-radius: 50%;
}

.coin-side.poring .coin-image {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.coin-side.poring .coin-emoji {
    font-size: 2.5rem;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
}

/* Drops side - Blue theme */
.coin-side.drops {
    background: radial-gradient(ellipse at 30% 30%, #60a5fa, #3b82f6, #1d4ed8);
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.6),
        inset 0 -4px 10px rgba(0, 0, 0, 0.3),
        inset 0 4px 10px rgba(255, 255, 255, 0.2);
    transform: rotateY(180deg);
}

.coin-side.drops::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 15%;
    width: 35%;
    height: 25%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent);
    border-radius: 50%;
}

.coin-side.drops .coin-image {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.coin-side.drops .coin-emoji {
    font-size: 2.5rem;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
}

/* Coin edge effect */
.coin::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg,
        rgba(200, 160, 80, 0.8) 0%,
        rgba(255, 220, 150, 0.9) 25%,
        rgba(200, 160, 80, 0.8) 50%,
        rgba(255, 220, 150, 0.9) 75%,
        rgba(200, 160, 80, 0.8) 100%
    );
    transform: rotateY(90deg) translateX(-4px);
    width: 8px;
    left: calc(50% - 4px);
    z-index: -1;
}

/* Flip counter display */
.flip-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1rem;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.flipping-text {
    font-size: 0.9rem;
    color: #e2e8f0;
    font-weight: 600;
    animation: textPulse 0.8s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes textPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Sparkle effects during flip */
.coin-container.flipping::before,
.coin-container.flipping::after {
    content: '✨';
    position: absolute;
    font-size: 0.8rem;
    animation: sparkle 0.5s ease-in-out infinite;
}

.coin-container.flipping::before {
    top: -5px;
    left: 10%;
    animation-delay: 0.1s;
}

.coin-container.flipping::after {
    bottom: -5px;
    right: 10%;
    animation-delay: 0.3s;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* Result Display */
.result-container {
    text-align: center;
    padding: 48px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border-radius: 24px;
    animation: resultPopIn 0.5s ease;
}

@keyframes resultPopIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.result-container.win {
    border: 2px solid rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 60px rgba(34, 197, 94, 0.3);
}

.result-container.lose {
    border: 2px solid rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 60px rgba(239, 68, 68, 0.3);
}

.result-icon {
    font-size: 6rem;
    margin-bottom: 16px;
}

.result-icon.poring {
    animation: bounce-scale 0.5s ease-in-out;
}

.result-icon.drops {
    animation: bounce-scale 0.5s ease-in-out;
}

@keyframes bounce-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.result-title {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.result-container.win .result-title {
    color: #22c55e;
}

.result-container.lose .result-title {
    color: #ef4444;
}

.result-winner {
    color: #94a3b8;
    margin-bottom: 8px;
}

.result-payout {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.result-container.win .result-payout {
    color: #22c55e;
}

.result-container.lose .result-payout {
    color: #ef4444;
}

.result-hint {
    color: #64748b;
    font-size: 0.9rem;
}

/* Coinflip Animation Card - Minimal Design */
.coinflip-animation-card {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    max-width: 200px;
    text-align: center;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.coinflip-animation-card.result-card {
    animation: resultPopIn 0.5s ease;
}

.coinflip-animation-card.win {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2);
}

.coinflip-animation-card.lose {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
}

.animation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.animation-header h3 {
    margin: 0;
    font-size: 0.8rem;
    color: #f8fafc;
}

.animation-bet {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 0.8rem;
}

.animation-players {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.animation-player {
    flex: 1;
    padding: 6px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.animation-player.winner {
    border: 1px solid rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
}

.animation-player.loser {
    opacity: 0.6;
}

.player-label {
    font-size: 0.6rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.animation-player .player-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.animation-player .player-side {
    font-size: 0.6rem;
}

.animation-player .player-side.poring {
    color: #ffa500;
}

.animation-player .player-side.drops {
    color: #60a5fa;
}

.winner-badge {
    font-size: 0.6rem;
    color: #22c55e;
    font-weight: 600;
    margin-top: 2px;
}

.animation-vs {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    flex-shrink: 0;
}

.coinflip-animation-card .coin-container {
    margin: 0 auto 8px;
    width: 70px;
    height: 70px;
}

.coinflip-animation-card .result-icon {
    margin: 8px auto;
}

.coinflip-animation-card .result-title {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.coinflip-animation-card.win .result-title {
    color: #22c55e;
}

.coinflip-animation-card.lose .result-title {
    color: #ef4444;
}

.coinflip-animation-card .result-payout {
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.coinflip-animation-card.win .result-payout {
    color: #22c55e;
}

.coinflip-animation-card.lose .result-payout {
    color: #ef4444;
}

.close-result-btn {
    width: 100%;
    padding: 8px;
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .coinflip-info {
        flex-direction: column;
        gap: 8px;
    }

    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .side-selector {
        flex-direction: column;
    }

    .modal-content {
        padding: 24px 16px;
    }

    .history-table,
    .leaderboard-table {
        display: block;
        overflow-x: auto;
    }

    .coinflip-tabs {
        overflow-x: auto;
    }

    .game-card {
        padding: 10px;
    }
}

/* ==================== Jackpot Page ==================== */

.jackpot-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.jackpot-page h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #f8f9fa;
    display: flex;
    align-items: center;
    gap: 12px;
}

.jackpot-balance {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.jackpot-balance .balance-label {
    color: #94a3b8;
}

.jackpot-balance .balance-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffc107;
}

.jackpot-balance .balance-currency {
    color: #ffc107;
}

.jackpot-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #94a3b8;
}

.jackpot-info span {
    color: #94a3b8;
    font-size: 0.9rem;
}

.jackpot-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #f87171;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.jackpot-error .close-btn {
    font-weight: 700;
    padding: 0 8px;
}

/* Tabs */
.jackpot-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding-bottom: 12px;
    overflow-x: auto;
}

.jackpot-tabs .tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 8px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.jackpot-tabs .tab:hover {
    color: #f8f9fa;
    background: rgba(59, 130, 246, 0.1);
}

.jackpot-tabs .tab.active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    font-weight: 600;
}

.jackpot-content {
    min-height: 400px;
}

/* Current Round */
.current-round {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Jackpot Header - compact layout with pot, timer, deposit */
.jackpot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px;
    flex-wrap: wrap;
}

.header-pot {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.header-pot .pot-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffc107;
}

.header-pot .pot-currency {
    color: #d4a000;
    font-size: 1rem;
    margin-right: 8px;
}

.header-pot .pot-tickets {
    color: #64748b;
    font-size: 0.75rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-deposit {
    padding: 8px 16px;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-deposit:hover {
    background: linear-gradient(145deg, #60a5fa, #3b82f6);
    transform: translateY(-1px);
}

/* Next round countdown */
.next-round-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 6px;
    animation: next-round-pulse 1s ease-in-out infinite;
}

.next-round-timer .next-label {
    color: #86efac;
    font-size: 0.75rem;
}

.next-round-timer .next-countdown {
    color: #22c55e;
    font-size: 1rem;
    font-weight: bold;
}

@keyframes next-round-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.4); }
}

/* Legacy pot-display (for compatibility) */
.pot-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.pot-amount {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pot-label {
    color: #94a3b8;
    font-size: 0.85rem;
}

.pot-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffc107;
}

.pot-currency {
    color: #ffc107;
    font-size: 0.9rem;
}

.pot-tickets {
    color: #94a3b8;
    font-size: 0.75rem;
    padding-left: 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.3);
}

/* Jackpot Countdown Timer (different from coinflip .countdown-timer) */
.jackpot-countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    font-size: 0.9rem;
}

.jackpot-countdown-timer .timer-icon {
    font-size: 1rem;
}

.jackpot-countdown-timer .timer-value {
    font-weight: bold;
    color: #e2e8f0;
}

.jackpot-countdown-timer.warning {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
}

.jackpot-countdown-timer.warning .timer-value {
    color: #fbbf24;
}

.jackpot-countdown-timer.urgent {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
    animation: jackpot-pulse-urgent 1s ease-in-out infinite;
}

.jackpot-countdown-timer.urgent .timer-value {
    color: #ef4444;
}

.jackpot-countdown-timer.spinning {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.15);
    animation: jackpot-pulse-spinning 0.5s ease-in-out infinite;
}

.jackpot-countdown-timer.spinning .timer-value {
    color: #60a5fa;
}

@keyframes jackpot-pulse-urgent {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes jackpot-pulse-spinning {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
    50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
}

/* Jackpot Arena */
.jackpot-arena {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.empty-arena {
    color: #64748b;
    font-size: 1.2rem;
}

/* Circular Display (2-8 players) */
.circular-arena {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 20px auto;
}

.arena-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.arena-icon {
    font-size: 2rem;
}

.players-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transition: transform 0.1s linear;
}

.circular-arena.spinning .players-circle {
    animation: spin-circle 0.5s linear infinite;
}

@keyframes spin-circle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.player-slot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(59, 130, 246, 0.4);
    background: rgba(15, 23, 42, 0.9);
}

.player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-chance {
    font-size: 0.65rem;
    color: #60a5fa;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.arena-pointer {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #ef4444;
    z-index: 3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Horizontal Bar Display (9+ players) */
.horizontal-arena {
    width: 100%;
    padding: 20px;
    position: relative;
}

.bar-pointer {
    text-align: center;
    font-size: 2rem;
    color: #ef4444;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}

.bar-container {
    position: relative;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(59, 130, 246, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

.players-bar {
    display: flex;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/* Smooth infinite scroll animation */
.horizontal-arena.spinning .players-bar {
    animation: smooth-scroll 1.5s linear infinite;
}

@keyframes smooth-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-right: 2px solid rgba(255, 255, 255, 0.3);
    min-width: 80px;
    height: 100%;
    position: relative;
    flex-shrink: 0;
}

.bar-segment::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
}

.segment-label {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Winner highlight pulse */
.bar-segment.winner {
    animation: winner-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes winner-pulse {
    0% {
        box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.5);
    }
    100% {
        box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.8);
    }
}

/* ============================================ */
/* CSGO-Style Jackpot Spin (separate from Roulette page) */
/* ============================================ */
/* Animation Flow:
   1. Static (.static) - Proportional bar showing each player's percentage
   2. Spinning (.spinning) - Fast infinite scroll animation
   3. Slowing Down (.slowing-down) - Decelerate over 5s to winner position
   4. Stopped (.stopped) - Frozen at final winner position
*/

.jackpot-spin {
    width: 100%;
    position: relative;
    padding: 0;
}

.jackpot-spin-pointer {
    text-align: center;
    font-size: 2rem;
    color: #ef4444;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
    line-height: 1;
}

.jackpot-spin-container {
    position: relative;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(59, 130, 246, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

/* Center line indicator (pointer) */
.jackpot-spin-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ef4444;
    transform: translateX(-50%);
    z-index: 5;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
}

.jackpot-spin-track {
    display: flex;
    height: 100%;
    position: absolute;
    /* Start at center of container - transform will offset from here */
    left: 50%;
    top: 0;
    will-change: transform;
}

/* ===== PHASE 1: SPINNING (Fast infinite scroll) ===== */
.jackpot-spin.spinning .jackpot-spin-track {
    animation: jackpot-spin-scroll 0.5s linear infinite;
}

/* ===== PHASE 2: SLOWING DOWN (CSS transition to final position) ===== */
.jackpot-spin.slowing-down .jackpot-spin-track {
    /* Transform is set via inline style, transition provides smooth deceleration */
    animation: none !important;
    transition: transform 4s cubic-bezier(0.1, 0.6, 0.2, 1) !important;
}

/* ===== PHASE 3: STOPPED (Frozen at final position) ===== */
.jackpot-spin.stopped .jackpot-spin-track {
    /* Transform is set via inline style, no animation */
    animation: none !important;
    transition: none !important;
}

/* ===== NEW FLOW: SPINNING TO WINNER (CSS transition to winner position) ===== */
/* Duration: 6s to match backend wait time before sending JackpotResult */
/* The track scrolls ~3 full rotations (14000px) before landing on winner */

/* Spinning state - applies CSS transition for smooth animation */
.jackpot-spin.spinning-to-winner .jackpot-spin-track {
    /* CSS transition for smooth animation to final position */
    /* cubic-bezier creates "slot machine" effect: fast start, gradual slowdown */
    transition: transform 6s cubic-bezier(0.12, 0.8, 0.25, 1);
    /* Transform value is set via inline style */
}

/* Stopped state - no transition, just hold final position */
.jackpot-spin.stopped .jackpot-spin-track {
    transition: none !important;
}

/* Slowdown animation - all keyframes relative to --stop-offset
   This ensures the animation smoothly decelerates to the final position
   without any jumps or direction changes */
@keyframes jackpot-slowdown {
    0% {
        /* Start from a position well before the final stop */
        transform: translateX(calc(var(--stop-offset, -3000px) + 6000px));
    }
    20% {
        transform: translateX(calc(var(--stop-offset, -3000px) + 4500px));
    }
    40% {
        transform: translateX(calc(var(--stop-offset, -3000px) + 2500px));
    }
    60% {
        transform: translateX(calc(var(--stop-offset, -3000px) + 1000px));
    }
    80% {
        transform: translateX(calc(var(--stop-offset, -3000px) + 200px));
    }
    100% {
        transform: translateX(var(--stop-offset, -3000px));
    }
}

@keyframes jackpot-spin-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Slowdown animation - eases to final position over 5 seconds */
@keyframes jackpot-spin-slowdown {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--stop-position));
    }
}

.jackpot-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 100%;
    flex-shrink: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    position: relative;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
}

/* Glass effect overlay */
.jackpot-slot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
}

.slot-avatar {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* Player color indicators in track */
.jackpot-slot[data-color="blue"] { background: linear-gradient(145deg, #3b82f6, #2563eb); }
.jackpot-slot[data-color="red"] { background: linear-gradient(145deg, #ef4444, #dc2626); }
.jackpot-slot[data-color="green"] { background: linear-gradient(145deg, #22c55e, #16a34a); }
.jackpot-slot[data-color="purple"] { background: linear-gradient(145deg, #a855f7, #9333ea); }
.jackpot-slot[data-color="orange"] { background: linear-gradient(145deg, #f97316, #ea580c); }
.jackpot-slot[data-color="pink"] { background: linear-gradient(145deg, #ec4899, #db2777); }
.jackpot-slot[data-color="teal"] { background: linear-gradient(145deg, #14b8a6, #0d9488); }
.jackpot-slot[data-color="yellow"] { background: linear-gradient(145deg, #eab308, #ca8a04); }
.jackpot-slot[data-color="indigo"] { background: linear-gradient(145deg, #6366f1, #4f46e5); }
.jackpot-slot[data-color="cyan"] { background: linear-gradient(145deg, #06b6d4, #0891b2); }

/* Proportional Bar (Static Mode) */
.jackpot-spin-container.proportional {
    height: 70px;
}

.proportional-bar {
    display: flex;
    height: 100%;
    width: 100%;
}

.proportional-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
    position: relative;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Glass effect overlay */
.proportional-segment::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}

.proportional-segment:last-child {
    border-right: none;
}

.segment-avatar {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.segment-percent {
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 3px;
}

.segment-percent.small {
    font-size: 0.65rem;
    padding: 1px 4px;
}

/* Players Section */
.players-section h3 {
    color: #e2e8f0;
    margin-bottom: 16px;
}

.players-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.player-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.player-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.player-avatar-large {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(59, 130, 246, 0.3);
    background: rgba(15, 23, 42, 0.9);
    flex-shrink: 0;
}

.player-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-name {
    font-weight: bold;
    color: #e2e8f0;
}

.player-monster {
    font-size: 0.8rem;
    color: #94a3b8;
}

.player-amount {
    font-size: 0.9rem;
    color: #ffc107;
}

.player-tickets {
    font-size: 0.75rem;
    color: #64748b;
}

.player-chance {
    font-size: 0.85rem;
    color: #10b981;
    font-weight: bold;
}

/* Deposit Button */
.deposit-btn {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 16px 32px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.deposit-btn:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Seed Hash */
.seed-hash {
    text-align: center;
    padding: 12px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    font-size: 0.85rem;
}

.seed-hash .label {
    color: #64748b;
}

.seed-hash code {
    color: #94a3b8;
    font-family: monospace;
}

/* No Round */
.no-round {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
}

.no-round-icon {
    font-size: 4rem;
    opacity: 0.5;
}

.no-round p {
    color: #64748b;
    font-size: 1.1rem;
}

/* Next Round Countdown Display */
.next-round-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    animation: next-round-border-pulse 1.5s ease-in-out infinite;
}

@keyframes next-round-border-pulse {
    0%, 100% { border-color: rgba(34, 197, 94, 0.3); }
    50% { border-color: rgba(34, 197, 94, 0.6); }
}

.next-round-message {
    font-size: 1.1rem;
    color: #94a3b8;
}

.next-round-countdown-big {
    font-size: 4rem;
    font-weight: bold;
    color: #22c55e;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
    line-height: 1;
}

.next-round-seconds {
    font-size: 0.9rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Result Overlay - shows winner on top of frozen spin */
.result-overlay {
    position: relative;
    z-index: 10;
    margin-top: 12px;
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.result-overlay .result-display {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: 12px;
}

/* Jackpot arena during animation */
.jackpot-arena.animating {
    position: relative;
}

.jackpot-arena.show-result {
    opacity: 0.6;
}

/* Compact players section during animation */
.players-section.compact {
    margin-top: 16px;
}

.players-section.compact h3 {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.players-list.horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* Mini player card for animation mode */
.player-card-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(30, 41, 59, 0.7);
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.player-card-mini .mini-avatar {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
}

.player-card-mini .mini-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-card-mini .mini-name {
    font-size: 0.75rem;
    color: #e2e8f0;
    font-weight: 500;
}

.player-card-mini .mini-chance {
    font-size: 0.65rem;
    color: #3b82f6;
    font-weight: bold;
}

/* Result Display - Minimal */
.result-display {
    text-align: center;
    padding: 16px;
    animation: fadeIn 0.3s ease;
}

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

.result-header h2 {
    font-size: 1.2rem;
    color: #f8f9fa;
    margin-bottom: 12px;
}

.winner-showcase {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.winner-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #3b82f6;
    background: rgba(15, 23, 42, 0.9);
    flex-shrink: 0;
    animation: winner-glow 2s ease-in-out infinite;
}

@keyframes winner-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
}

.winner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.winner-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #e2e8f0;
}

.winner-monster {
    font-size: 0.75rem;
    color: #94a3b8;
}

.winner-payout {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
}

.winner-payout .payout-label {
    color: #94a3b8;
    font-size: 0.75rem;
}

.winner-payout .payout-amount {
    font-size: 1.3rem;
    font-weight: bold;
    color: #10b981;
}

.winner-payout .payout-currency {
    color: #ffc107;
    font-size: 0.85rem;
}

.winner-details {
    display: flex;
    gap: 12px;
    color: #64748b;
    font-size: 0.7rem;
}

.result-verification {
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
}

.result-verification h4 {
    color: #64748b;
    margin-bottom: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.seed-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.seed-info .label {
    color: #64748b;
    font-size: 0.65rem;
}

.seed-info code {
    color: #94a3b8;
    font-family: monospace;
    font-size: 0.6rem;
    word-break: break-all;
}

/* Quick Deposit Buttons */
.quick-deposit-buttons {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.btn-quick {
    flex: 1;
    min-width: 60px;
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.btn-quick:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

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

.btn-quick.btn-allin {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.btn-quick.btn-allin:hover {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.2));
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

/* Deposit Modal */
.deposit-preview {
    padding: 16px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    margin: 16px 0;
}

.preview-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.preview-item .label {
    color: #94a3b8;
}

.preview-item .value {
    font-weight: bold;
}

/* Before: current balance - gold/yellow */
.preview-item:first-child .value {
    color: #ffd700;
}

/* After: remaining balance - green */
.preview-item:last-child .value {
    color: #4ade80;
}

/* History Tab */
.jackpot-page .history-tab {
    overflow-x: auto;
}

.jackpot-page .history-table {
    width: 100%;
    border-collapse: collapse;
}

.jackpot-page .history-table th,
.jackpot-page .history-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.jackpot-page .history-table th {
    color: #94a3b8;
    font-weight: 500;
    background: rgba(15, 23, 42, 0.6);
}

.jackpot-page .history-table td.winner {
    color: #ffd700;
    font-weight: bold;
}

.jackpot-page .history-table td.won {
    color: #22c55e;
}

/* History Players Cell */
.history-players {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.history-player {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.history-avatar {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.history-name {
    color: #e2e8f0;
    font-weight: 500;
    font-size: 0.85rem;
}

.history-chance {
    color: #10b981;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Winner in history */
.history-winner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-winner .winner-name {
    color: #fbbf24;
    font-weight: 600;
}

.history-avatar.winner {
    border: 2px solid #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.winner-cell {
    min-width: 120px;
}

.no-winner {
    color: #64748b;
}

/* Highlight winner in players list */
.history-player.winner {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

.history-player.winner .history-name {
    color: #fbbf24;
}

.jackpot-page .history-table td.pot {
    color: #ffc107;
    font-weight: 600;
}

.jackpot-page .history-table td.time {
    color: #64748b;
    font-size: 0.8rem;
}

/* Leaderboard Tab */
.jackpot-page .leaderboard-tab {
    overflow-x: auto;
}

.jackpot-page .leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.jackpot-page .leaderboard-table th,
.jackpot-page .leaderboard-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.jackpot-page .leaderboard-table th {
    color: #94a3b8;
    font-weight: 500;
    background: rgba(15, 23, 42, 0.6);
}

.jackpot-page .leaderboard-table .rank {
    width: 40px;
}

.jackpot-page .leaderboard-table .player-name {
    color: #e2e8f0;
    font-weight: bold;
}

.jackpot-page .leaderboard-table .positive {
    color: #22c55e;
}

.jackpot-page .leaderboard-table .negative {
    color: #ef4444;
}

.jackpot-page .leaderboard-table tr.top-1 td {
    background: rgba(255, 215, 0, 0.1);
}

.jackpot-page .leaderboard-table tr.top-2 td {
    background: rgba(192, 192, 192, 0.1);
}

.jackpot-page .leaderboard-table tr.top-3 td {
    background: rgba(205, 127, 50, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .jackpot-page {
        padding: 10px;
    }

    .jackpot-info {
        flex-direction: column;
        gap: 8px;
    }

    .pot-display {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .pot-value {
        font-size: 1.25rem;
    }

    .pot-tickets {
        border-left: none;
        padding-left: 0;
    }

    .circular-arena {
        width: 250px;
        height: 250px;
    }

    .players-list {
        grid-template-columns: 1fr;
    }

    .winner-details {
        flex-direction: column;
        gap: 8px;
    }
}

/* ==================== Inventory & Trade Pages ==================== */

/* Inventory Page */
.inventory-page {
    width: 100%;
    max-width: 100%;
    padding: 20px;
}

.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.inventory-header h1 {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
}

.inventory-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.inventory-stats .stat-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.inventory-stats .stat-card.available {
    border-color: rgba(34, 197, 94, 0.3);
}

.inventory-stats .stat-card.listed {
    border-color: rgba(251, 191, 36, 0.3);
}

.inventory-stats .stat-card.trading {
    border-color: rgba(59, 130, 246, 0.3);
}

.inventory-stats .stat-card.total {
    border-color: rgba(168, 85, 247, 0.3);
}

.inventory-stats .stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
}

.inventory-stats .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.inventory-instructions {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.inventory-instructions h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

.inventory-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.inventory-filter .filter-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inventory-filter label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.inventory-filter select {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* Real-time indicator for inventory */
.inventory-filter .realtime-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
}

.inventory-filter .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
}

.inventory-filter .indicator-dot.connected {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: pulse-green 2s infinite;
}

.inventory-filter .indicator-dot.connecting {
    background: #eab308;
    animation: pulse-yellow 1s infinite;
}

.inventory-filter .indicator-dot.reconnecting {
    background: #f97316;
    animation: pulse-orange 1s infinite;
}

.inventory-filter .indicator-dot.disconnected {
    background: #ef4444;
}

.inventory-filter .indicator-text {
    color: var(--text-secondary);
}

/* pulse-green and pulse-yellow defined earlier in chat section */
@keyframes pulse-orange {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Item Card */
.item-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.item-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    z-index: 100;
}

.item-card .item-image {
    position: relative;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 12px;
}

.item-card .item-image img {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
}

.item-card .item-amount {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.item-card .item-info {
    text-align: center;
}

.item-card .item-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-card .item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-bottom: 8px;
}

.item-card .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-card {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.badge-options {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.badge-enchant {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.item-card .item-status {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
}

.item-status.status-available {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.item-status.status-listed {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.item-status.status-trading {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* Inventory Detail Page */
.inventory-detail-page,
.trade-detail-page,
.trade-create-page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.back-link {
    margin-bottom: 20px;
}

.back-link a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link a:hover {
    color: var(--accent-primary);
}

.item-detail-card,
.trade-detail-card,
.create-listing-card {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.item-detail-header,
.trade-detail-header {
    display: flex;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #1a2332 0%, #243044 100%);
    border-bottom: 1px solid var(--border-color);
}

.item-image-large {
    position: relative;
    width: 120px;
    height: 120px;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-image-large img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.item-image-large .item-amount {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
}

.item-title-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.item-status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.price-display {
    margin-top: 8px;
}

.price-display .price-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fbbf24;
}

.price-display .price-unit {
    font-size: 1rem;
    color: var(--text-secondary);
}

.item-detail-body,
.trade-detail-body {
    padding: 24px;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section h3 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item .label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.detail-item .value {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.detail-item .value.enchant {
    color: #fbbf24;
}

.cards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.card-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-secondary);
    padding: 12px 16px;
    border-radius: 8px;
}

.card-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.card-item .card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-item .card-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.card-item .card-effect {
    font-size: 0.8rem;
    color: #7fe7ff;
    line-height: 1.4;
}

/* Card Effect Section (for card items) */
.card-effect-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 20px;
}

.card-effect-section h3 {
    color: #93c5fd;
    margin-bottom: 12px;
}

.card-effect-content {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.card-effect-text {
    font-size: 0.95rem;
    color: #7fe7ff;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

.card-effect-text.text-muted {
    color: var(--text-muted);
    font-style: italic;
}

/* Legacy fallback for span without .card-info */
.card-item > span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-item {
    display: flex;
    gap: 16px;
    background: var(--bg-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.option-item .option-id {
    color: #a855f7;
}

.option-item .option-value {
    color: var(--text-primary);
}

.option-item .option-parm {
    color: var(--text-muted);
}

.detail-actions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.detail-actions .action-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 12px;
}

/* Trade Page / Marketplace */
.trade-page {
    width: 100%;
    max-width: 100%;
    padding: 20px;
}

.trade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.trade-header h1 {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
}

.trade-actions {
    display: flex;
    gap: 12px;
}

.trade-info-banner {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.trade-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
}

.search-form {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 250px;
}

.search-input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.filter-group select {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Listing Card */
.listing-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.listing-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    z-index: 100;
}

.listing-card .listing-image {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 12px;
}

.listing-card .listing-image img {
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}

.listing-card .item-amount {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.listing-card .listing-info {
    text-align: center;
}

.listing-card .listing-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card .listing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-bottom: 8px;
}

.listing-card .listing-price {
    margin-bottom: 8px;
}

.listing-card .price-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fbbf24;
}

.listing-card .price-unit {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.listing-card .listing-seller {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Item Tooltip - Hover popup for cards and options */
.listing-card {
    position: relative;
}

.item-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a2332 0%, #243044 100%);
    border: 1px solid #3b82f6;
    border-radius: 12px;
    padding: 16px;
    min-width: 280px;
    max-width: 350px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Tooltip above the card (default for non-first-row items) */
.item-tooltip.tooltip-above {
    bottom: calc(100% + 10px);
    animation: tooltip-fade-in-above 0.15s ease;
}

.item-tooltip.tooltip-above::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #3b82f6;
}

/* Tooltip below the card (for first row items to avoid navbar) */
.item-tooltip.tooltip-below {
    top: calc(100% + 10px);
    animation: tooltip-fade-in-below 0.15s ease;
}

.item-tooltip.tooltip-below::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #3b82f6;
}

@keyframes tooltip-fade-in-above {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes tooltip-fade-in-below {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.tooltip-header {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.tooltip-section {
    margin-bottom: 12px;
}

.tooltip-section:last-child {
    margin-bottom: 0;
}

.tooltip-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7fe7ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.tooltip-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    margin-bottom: 6px;
}

.tooltip-card:last-child {
    margin-bottom: 0;
}

.tooltip-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.tooltip-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tooltip-card-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #fbbf24;
}

.tooltip-card-effect {
    font-size: 0.75rem;
    color: #7fe7ff;
    line-height: 1.3;
}

.tooltip-option {
    padding: 6px 10px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #22c55e;
    margin-bottom: 4px;
}

.tooltip-option:last-child {
    margin-bottom: 0;
}

/* Tooltip position adjustment for items near screen edges */
.listing-card:nth-child(4n+1) .item-tooltip,
.listing-card:nth-child(4n) .item-tooltip {
    /* Adjust for items on edges if needed */
}

/* Mobile: hide hover tooltip (touch devices don't have hover) */
@media (max-width: 768px) {
    .item-tooltip {
        display: none;
    }
}

/* Purchase Section */
.purchase-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.purchase-box {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
}

.purchase-summary {
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9rem;
}

.summary-row.fee {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.summary-row.wallet {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 8px;
}

.summary-row .price {
    color: #fbbf24;
    font-weight: bold;
}

.summary-row .sufficient {
    color: #22c55e;
}

.summary-row .insufficient {
    color: #ef4444;
}

.btn-purchase {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

.purchase-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 12px;
}

.login-prompt,
.listing-unavailable,
.own-listing,
.insufficient-funds {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
}

/* My Listings Page */
.my-listings-page {
    width: 100%;
    max-width: 100%;
    padding: 20px;
}

.my-listings-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.my-listings-page h1 {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 12px;
}

.listings-table-container {
    overflow-x: auto;
    margin-bottom: 24px;
}

.listings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
}

.listings-table th,
.listings-table td {
    padding: 14px 16px;
    text-align: left;
}

.listings-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.listings-table td {
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.listings-table .item-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.listings-table .item-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 4px;
}

.listings-table .item-name {
    color: var(--text-primary);
}

.listings-table .item-amount {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.listings-table .price-cell {
    color: #fbbf24;
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.status-active {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge.status-sold {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.status-badge.status-cancelled {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.status-badge.status-expired {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.actions-cell {
    white-space: nowrap;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* Trade Create Page */
.item-preview {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #1a2332 0%, #243044 100%);
    border-bottom: 1px solid var(--border-color);
}

.item-preview .item-info h2 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.listing-form {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.fee-preview {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.fee-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9rem;
}

.fee-row.fee {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.fee-row.total {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 8px;
    font-weight: 600;
}

.fee-row .negative {
    color: #ef4444;
}

.fee-row .positive {
    color: #22c55e;
}

.duration-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state p {
    margin-bottom: 12px;
}

.empty-state .hint {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.empty-state .hint a {
    color: var(--accent-primary);
}

.not-found {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.2rem;
    color: var(--text-muted);
}

.success-message {
    text-align: center;
    padding: 60px 20px;
}

.success-message h2 {
    color: #22c55e;
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .inventory-header,
    .trade-header,
    .my-listings-page .page-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .inventory-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .trade-filters {
        flex-direction: column;
    }

    .search-form {
        min-width: 100%;
    }

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

    .item-detail-header,
    .trade-detail-header {
        flex-direction: column;
        text-align: center;
    }

    .item-image-large {
        margin: 0 auto;
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ========================================== */
/* CSGORoll-Style Roulette - New 3-Column    */
/* ========================================== */

.roulette-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

/* History Bar - moved to line 12314 */

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: #94a3b8;
    letter-spacing: 1px;
}

.history-counts {
    display: flex;
    gap: 16px;
}

.count-red {
    color: #ef4444;
    font-weight: bold;
    font-size: 0.9rem;
}

.count-green {
    color: #22c55e;
    font-weight: bold;
    font-size: 0.9rem;
}

.count-black {
    color: #9ca3af;
    font-weight: bold;
    font-size: 0.9rem;
}

.history-icons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.history-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.history-icon:hover {
    transform: scale(1.15);
}

.history-icon.icon-red {
    background: linear-gradient(135deg, #f87171, #dc2626);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.history-icon.icon-green {
    background: linear-gradient(135deg, #4ade80, #16a34a);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.history-icon.icon-black {
    background: linear-gradient(135deg, #6b7280, #374151);
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.4);
}

/* ROLLING IN Countdown Bar */
.rolling-in-bar {
    position: relative;
    padding: 16px 20px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border-radius: 10px;
    border: 2px solid rgba(34, 197, 94, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.rolling-progress-track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
}

.rolling-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.5));
    transition: width 0.1s linear;
    border-radius: 0 10px 10px 0;
}

.rolling-text {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.rolling-label {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 1px;
}

.rolling-label.spinning {
    animation: pulse-text 0.8s ease-in-out infinite;
    color: #60a5fa;
}

.rolling-label.waiting {
    color: #94a3b8;
    font-style: italic;
}

.rolling-countdown {
    font-size: 1.5rem;
    font-weight: bold;
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
    min-width: 60px;
    text-align: center;
}

.rolling-result {
    font-size: 1.3rem;
    font-weight: bold;
    padding: 4px 16px;
    border-radius: 6px;
}

.rolling-result.result-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.rolling-result.result-green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.rolling-result.result-black {
    background: linear-gradient(135deg, #4b5563, #374151);
    color: #fff;
    box-shadow: 0 0 20px rgba(75, 85, 99, 0.5);
}

/* History Bar - Last 10 Results */
.roulette-history-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.history-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.history-items {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: nowrap;
    flex: 1;
    overflow-x: auto;
}

.history-btn {
    padding: 8px 16px;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 6px;
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.history-btn:hover {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.25));
    border-color: #60a5fa;
    transform: translateY(-1px);
}

/* Modal Header & Close Button */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #f8f9fa;
}

.modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.modal-body {
    overflow-y: auto;
}

/* History Modal */
.history-modal {
    max-width: 700px;
    max-height: 80vh;
    padding: 24px;
}

.history-modal .modal-body {
    overflow-y: auto;
    max-height: calc(80vh - 100px);
}

.history-modal .loading-state {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
}

.no-data {
    text-align: center;
    padding: 40px;
    color: #64748b;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.history-table th,
.history-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.history-table th {
    background: rgba(30, 41, 59, 0.8);
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

.history-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.08);
}

.history-table .zeny {
    color: #fbbf24;
    font-weight: 600;
}

.history-table .time {
    color: #94a3b8;
    font-size: 0.85rem;
}

.result-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
}

.result-badge.result-green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.result-badge.result-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.result-badge.result-black {
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #fff;
}

.history-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    transition: transform 0.2s ease;
}

.history-item:hover {
    transform: scale(1.1);
}

.history-item.history-green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.history-item.history-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.history-item.history-black {
    background: linear-gradient(135deg, #4b5563, #374151);
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.4);
}

.history-empty {
    color: #64748b;
    font-style: italic;
    font-size: 0.85rem;
}

/* Top Bar - Status + Connection */
.roulette-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.roulette-status-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-timer {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
    min-width: 70px;
    text-align: center;
}

.status-spinning-text {
    font-size: 1.2rem;
    color: #60a5fa;
    animation: pulse-text 1s ease-in-out infinite;
}

.status-result-inline {
    font-size: 1.3rem;
    font-weight: bold;
    padding: 6px 20px;
    border-radius: 6px;
}

.status-result-inline.result-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.status-result-inline.result-green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.status-result-inline.result-black {
    background: linear-gradient(135deg, #4b5563, #374151);
    color: #fff;
    box-shadow: 0 0 20px rgba(75, 85, 99, 0.5);
}

.status-next-text {
    font-size: 1rem;
    color: #94a3b8;
}

.roulette-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

/* Roulette Arena (Frame like Jackpot) */
.roulette-track-container {
    position: relative;
    padding: 30px 0 20px 0;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border-radius: 12px;
    border: 2px solid rgba(59, 130, 246, 0.4);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.4),
        inset 0 0 60px rgba(59, 130, 246, 0.05);
    overflow: hidden;
}

.roulette-pointer {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #fbbf24;
    z-index: 20;
    text-shadow: 0 2px 10px rgba(251, 191, 36, 0.8);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.roulette-track-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin: 0 20px;
    height: 70px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 2px 10px rgba(0, 0, 0, 0.5),
        0 2px 15px rgba(0, 0, 0, 0.3);
}

.roulette-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    /* Position controlled by JS translateX */
    /* Initial position set in JS to show slots on both sides of pointer */
}

/* Roulette track - position controlled by JavaScript for smooth animation */
/* No CSS animation used - JS Interval updates transform directly at 60fps */

.roulette-slot {
    width: 70px;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.roulette-slot.slot-black {
    background: linear-gradient(180deg, #4b5563 0%, #374151 50%, #1f2937 100%);
}

.roulette-slot.slot-red {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #b91c1c 100%);
}

.roulette-slot.slot-green {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #15803d 100%);
}

.slot-number {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Bet Controls Bar (CSGORoll style - inline) */
.bet-controls-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
}

.round-id-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.round-id-label {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    letter-spacing: 0.5px;
}

.seed-hash-label {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
    color: #a78bfa;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    letter-spacing: 0.3px;
    cursor: help;
    font-family: 'Courier New', monospace;
}

.bet-amount-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bet-amount-label {
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 600;
}

.bet-amount-input {
    width: 130px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(251, 191, 36, 0.4);
    border-radius: 6px;
    color: #fbbf24;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

.bet-amount-input:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.bet-amount-input:disabled {
    opacity: 0.5;
}

.quick-bet-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.qb-btn {
    padding: 8px 14px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 6px;
    color: #60a5fa;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qb-btn:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.35);
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.qb-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qb-btn.qb-max {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.qb-btn.qb-max:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.35);
}

.balance-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.balance-value {
    color: #fbbf24;
    font-weight: bold;
    font-size: 1rem;
}

.bet-error-bar {
    color: #f87171;
    padding: 12px 20px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
}

.login-prompt-bar {
    text-align: center;
    padding: 14px;
    color: #94a3b8;
    font-size: 0.95rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* 3 Column Betting Layout (CSGORoll style) */
.betting-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bet-column {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bet buttons per column - Primary action with multiplier text (2x, 14x, 2x) */
.column-bet-btn {
    padding: 18px 20px;
    border: none;
    border-radius: 8px 8px 0 0;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: 1px;
}

.column-bet-btn.btn-red {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    color: #fff;
    box-shadow:
        0 4px 15px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.column-bet-btn.btn-red:hover:not(:disabled) {
    background: linear-gradient(180deg, #fca5a5 0%, #f87171 50%, #ef4444 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(239, 68, 68, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.column-bet-btn.btn-green {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
    color: #fff;
    box-shadow:
        0 4px 15px rgba(34, 197, 94, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.column-bet-btn.btn-green:hover:not(:disabled) {
    background: linear-gradient(180deg, #86efac 0%, #4ade80 50%, #22c55e 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(34, 197, 94, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.column-bet-btn.btn-black {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 50%, #374151 100%);
    color: #fff;
    box-shadow:
        0 4px 15px rgba(75, 85, 99, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.column-bet-btn.btn-black:hover:not(:disabled) {
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(75, 85, 99, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.column-bet-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.column-bet-btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Stats per column */
.column-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-plays {
    color: #94a3b8;
    font-size: 0.75rem;
}

.stat-total {
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: bold;
}

/* My bet indicator per column */
.my-bet-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    margin: 4px 8px;
}

.my-bet-label {
    color: #93c5fd;
    font-size: 0.75rem;
    font-weight: 500;
}

.my-bet-amount {
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: bold;
}

/* Color-specific my bet indicators */
.bet-column-red .my-bet-indicator {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.4);
}
.bet-column-red .my-bet-label { color: #fca5a5; }
.bet-column-red .my-bet-amount { color: #f87171; }

.bet-column-green .my-bet-indicator {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: rgba(34, 197, 94, 0.4);
}
.bet-column-green .my-bet-label { color: #86efac; }
.bet-column-green .my-bet-amount { color: #4ade80; }

.bet-column-black .my-bet-indicator {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.2) 0%, rgba(148, 163, 184, 0.1) 100%);
    border-color: rgba(148, 163, 184, 0.4);
}
.bet-column-black .my-bet-label { color: #cbd5e1; }
.bet-column-black .my-bet-amount { color: #e2e8f0; }

/* Bets list per column */
.column-bets-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    min-height: 150px;
    max-height: 250px;
    overflow-y: auto;
}

.column-bet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}

.cbi-name {
    color: #e2e8f0;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.cbi-amount {
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Provably Fair inline */
.provably-fair-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 4px;
}

.pf-label {
    color: #64748b;
    font-size: 0.75rem;
}

.pf-hash {
    color: #60a5fa;
    font-family: monospace;
    font-size: 0.7rem;
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Responsive */
@media (max-width: 900px) {
    .bet-controls-bar {
        flex-direction: column;
        gap: 12px;
    }

    .bet-amount-section {
        width: 100%;
        justify-content: center;
    }

    .bet-amount-input {
        flex: 1;
        max-width: 200px;
    }

    .quick-bet-buttons {
        justify-content: center;
        width: 100%;
    }

    .balance-display {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .roulette-page {
        padding: 10px;
        gap: 12px;
    }

    .roulette-top-bar {
        padding: 10px 14px;
    }

    .status-timer {
        font-size: 1.4rem;
    }

    .roulette-track-container {
        padding: 24px 0 16px 0;
        border-radius: 10px;
    }

    .roulette-track-wrapper {
        margin: 0 12px;
    }

    .roulette-pointer {
        font-size: 20px;
        top: 6px;
    }

    .betting-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bet-column {
        flex-direction: column;
    }

    .column-header {
        padding: 10px;
    }

    .column-multiplier {
        font-size: 1.3rem;
    }

    .column-bet-btn {
        margin: 12px 16px;
        padding: 12px 24px;
        font-size: 1.1rem;
    }

    .column-stats {
        padding: 8px 16px;
    }

    .column-bets-list {
        min-height: 80px;
        max-height: 150px;
        padding: 10px;
    }

    .roulette-slot {
        min-width: 55px;
        height: 55px;
    }

    .slot-number {
        font-size: 1.1rem;
    }

    .qb-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .bet-amount-input {
        width: 100%;
        max-width: none;
    }
}

/* ==================== Admin Picklog Page ==================== */

.admin-picklog-page {
    width: 100%;
    max-width: 100%;
    padding: 20px;
}

.admin-picklog-page .page-title {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* Stats Cards */
.picklog-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.picklog-stats .stat-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.picklog-stats .stat-card.warning {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, var(--bg-card), rgba(239, 68, 68, 0.1));
}

.picklog-stats .stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
}

.picklog-stats .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Filter Section */
.picklog-filters {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.picklog-filters .filter-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.picklog-filters .filter-row:last-child {
    margin-bottom: 0;
}

.picklog-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.picklog-filters .filter-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.picklog-filters .filter-group input,
.picklog-filters .filter-group select {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.picklog-filters .filter-group input:focus,
.picklog-filters .filter-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.picklog-filters .filter-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
}

.picklog-filters .btn-primary {
    padding: 10px 24px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.picklog-filters .btn-primary:hover {
    background: var(--accent-hover);
}

.picklog-filters .btn-secondary {
    padding: 10px 24px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.picklog-filters .btn-secondary:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Results Section */
.picklog-results {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-color);
}

.picklog-results .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.picklog-results .loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.picklog-results .error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 16px;
    border-radius: 8px;
    color: #ef4444;
    text-align: center;
}

/* Table */
.table-container {
    overflow-x: auto;
}

.picklog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.picklog-table th {
    text-align: left;
    padding: 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.picklog-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.picklog-table tr:hover {
    background: var(--bg-card-hover);
}

.picklog-table .time-cell {
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.picklog-table .type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.picklog-table .char-info,
.picklog-table .item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picklog-table .char-name,
.picklog-table .item-name {
    color: var(--text-primary);
    font-weight: 500;
}

.picklog-table .char-id,
.picklog-table .item-id {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.picklog-table .amount {
    font-weight: 600;
}

.picklog-table .amount.positive {
    color: #22c55e;
}

.picklog-table .amount.negative {
    color: #ef4444;
}

.picklog-table .cards-cell {
    font-size: 0.8rem;
    color: var(--text-secondary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picklog-table .map-cell {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.picklog-table .actions-cell {
    white-space: nowrap;
}

.picklog-table .btn-trace {
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
}

.picklog-table .btn-trace:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.pagination .btn-page {
    padding: 8px 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.pagination .btn-page:hover:not(:disabled) {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.pagination .btn-page:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination .page-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Trace Modal */
.trace-modal {
    max-width: 700px;
    width: 90%;
}

.trace-modal .modal-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.trace-modal .modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
    padding-right: 40px;
}

.trace-modal .modal-header .unique-id {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.trace-modal .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

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

.trace-modal .modal-body {
    padding: 24px;
    max-height: 500px;
    overflow-y: auto;
}

/* Trace Timeline */
.trace-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trace-entry {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 24px;
}

.trace-entry:last-child {
    padding-bottom: 0;
}

.trace-entry:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.trace-time {
    flex-shrink: 0;
    width: 140px;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 8px;
}

.trace-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 1;
}

.trace-details {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px 16px;
}

.trace-action {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.trace-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .picklog-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .picklog-filters .filter-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .picklog-stats {
        grid-template-columns: 1fr;
    }

    .picklog-filters .filter-row {
        grid-template-columns: 1fr;
    }

    .picklog-filters .filter-actions {
        flex-direction: column;
    }

    .picklog-filters .filter-actions button {
        width: 100%;
    }

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

    .picklog-table th,
    .picklog-table td {
        padding: 8px;
    }

    .trace-modal .modal-body {
        padding: 16px;
    }

    .trace-time {
        width: 100px;
        font-size: 0.7rem;
    }

    .trace-entry {
        gap: 8px;
    }
}

/* ==================== Character Page Enhancements ==================== */

/* Characters Controls Bar */
.characters-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 400px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.search-box:focus-within {
    border-color: var(--accent-primary);
}

.search-icon {
    color: var(--text-muted);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--success);
    color: var(--success);
}

.filter-btn.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--success);
    color: var(--success);
}

.filter-btn .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-select {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
}

.sort-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.sort-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-order-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Header Stats Enhancements */
.header-stat.online {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.header-stat.online .header-stat-value {
    color: var(--success);
}

.header-stat.zeny {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

.header-stat.zeny .header-stat-value {
    color: #fbbf24;
}

/* Character Card HP/SP Bars */
.char-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bar-label {
    font-size: 0.75rem;
    font-weight: 600;
    width: 24px;
    color: var(--text-muted);
}

.bar-container {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.bar-container.hp .bar-fill {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.bar-container.sp .bar-fill {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.bar-value {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 70px;
    text-align: right;
}

/* Character Guild Badge */
.char-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-guild-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    font-size: 0.7rem;
    color: #a78bfa;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.char-guild-badge svg {
    flex-shrink: 0;
}

/* ==================== Character Detail Page Enhancements ==================== */

/* Back Link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 16px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.back-link:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Character Detail Header */
.char-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.6) 0%, rgba(15, 30, 50, 0.8) 100%);
    border-radius: 16px;
    border: 1px solid rgba(62, 193, 211, 0.2);
    margin-bottom: 24px;
}

.char-detail-identity {
    display: flex;
    align-items: center;
    gap: 20px;
}

.char-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(62, 193, 211, 0.2) 100%);
    border: 2px solid rgba(62, 193, 211, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-icon-large {
    font-size: 2.5rem;
}

.char-detail-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.char-detail-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.char-detail-class {
    font-size: 1rem;
    color: var(--accent-primary);
    margin: 0;
}

.char-detail-guild {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a78bfa;
    font-size: 0.9rem;
    margin-top: 4px;
}

.char-detail-guild svg {
    color: #a78bfa;
}

.guild-position {
    color: var(--text-muted);
}

.char-detail-status {
    display: flex;
    align-items: center;
}

/* Detail Card Headers with Icons */
.detail-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.detail-card h3 svg {
    color: var(--accent-primary);
}

/* Level Card */
.level-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 20px;
}

.level-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.level-number {
    font-size: 2.5rem;
    font-weight: 700;
}

.level-box.base .level-number {
    color: #fca5a5;
}

.level-box.job .level-number {
    color: #93c5fd;
}

.level-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.level-divider-large {
    width: 2px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
}

.exp-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.exp-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.exp-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.exp-value {
    color: var(--text-primary);
    font-weight: 600;
}

.zeny-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
}

.zeny-display svg {
    color: #fbbf24;
}

.zeny-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fbbf24;
}

.zeny-display .zeny-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Stats Card Detail */
.stats-grid-detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-item-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.stat-item-detail .stat-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 32px;
}

.stat-item-detail .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    width: 40px;
    text-align: right;
}

.stat-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.stat-item-detail.str .stat-bar-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.stat-item-detail.agi .stat-bar-fill { background: linear-gradient(90deg, #22c55e, #4ade80); }
.stat-item-detail.vit .stat-bar-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-item-detail.int .stat-bar-fill { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.stat-item-detail.dex .stat-bar-fill { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.stat-item-detail.luk .stat-bar-fill { background: linear-gradient(90deg, #ec4899, #f472b6); }

/* HP/SP Display */
.hp-sp-display {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.hp-sp-item {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.hp-sp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hp-sp-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.hp-sp-item.hp .hp-sp-label { color: #fca5a5; }
.hp-sp-item.sp .hp-sp-label { color: #93c5fd; }

.hp-sp-values {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hp-sp-bar {
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow: hidden;
}

.hp-sp-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.hp-sp-item.hp .hp-sp-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.hp-sp-item.sp .hp-sp-fill { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

/* Points Display */
.points-display {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.points-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.points-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.points-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Reset Buttons */
.reset-buttons {
    display: flex;
    gap: 12px;
}

.reset-buttons .btn {
    flex: 1;
}

/* Location Card Detail */
.location-info-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.location-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.location-value {
    color: var(--accent-primary);
    font-weight: 500;
}

/* Appearance Card Detail */
.appearance-info-detail {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.appearance-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.appearance-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.appearance-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Hair Form */
.hair-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.hair-form .form-group {
    flex: 1;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 12px;
}

.action-buttons .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ==========================================
   Character Detail - Compact/Minimal Layout
   ========================================== */
.char-detail-compact {
    max-width: 800px;
    margin: 0 auto;
}

/* Header Row */
.char-compact-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.5) 0%, rgba(15, 30, 50, 0.7) 100%);
    border-radius: 12px;
    border: 1px solid rgba(62, 193, 211, 0.15);
    margin-bottom: 16px;
}

.char-compact-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(62, 193, 211, 0.2) 100%);
    border: 2px solid rgba(62, 193, 211, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.char-compact-identity {
    flex: 1;
    min-width: 0;
}

.char-compact-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.char-compact-name-row h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.status-badge-sm {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge-sm.online {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-badge-sm.offline {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.char-compact-class {
    font-size: 0.85rem;
    color: var(--accent-primary);
    margin: 2px 0 0 0;
}

.char-compact-guild {
    font-size: 0.75rem;
    color: #a78bfa;
    margin: 2px 0 0 0;
}

.char-compact-levels {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    min-width: 55px;
}

.level-badge .lvl-num {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.level-badge.base .lvl-num {
    color: #fca5a5;
}

.level-badge.job .lvl-num {
    color: #93c5fd;
}

.level-badge .lvl-label {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Grid Layout */
.char-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.compact-card {
    background: rgba(26, 35, 50, 0.6);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid rgba(62, 193, 211, 0.1);
}

.compact-card-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Stats Mini Grid */
.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.stat-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.stat-mini .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
}

.stat-mini .stat-val {
    font-size: 0.85rem;
    font-weight: 700;
}

.stat-val.str { color: #ef4444; }
.stat-val.agi { color: #22c55e; }
.stat-val.vit { color: #f59e0b; }
.stat-val.int { color: #3b82f6; }
.stat-val.dex { color: #a855f7; }
.stat-val.luk { color: #ec4899; }

/* HP/SP Mini Bars */
.hp-sp-mini {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.bar-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bar-mini .bar-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 20px;
}

.bar-mini .bar-track {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.bar-mini.hp .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    border-radius: 3px;
}

.bar-mini.sp .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 3px;
}

.bar-mini .bar-val {
    font-size: 0.6rem;
    color: var(--text-secondary);
    min-width: 60px;
    text-align: right;
}

/* Points Mini */
.points-mini {
    display: flex;
    gap: 8px;
}

.points-mini .point-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.points-mini .point-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.points-mini .point-label {
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Info Mini Grid */
.info-mini-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.info-mini-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.info-mini-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.info-mini-val {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 500;
}

.info-mini-val.zeny {
    color: #fbbf24;
    font-weight: 700;
}

/* Appearance Mini */
.appearance-mini {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.appearance-mini .app-item {
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Actions Row */
.char-compact-actions {
    background: rgba(26, 35, 50, 0.6);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid rgba(62, 193, 211, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-group-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    min-width: 40px;
}

.action-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Mini Buttons */
.btn-mini {
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mini:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-mini.primary {
    background: var(--accent-primary);
    color: white;
}

.btn-mini.primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.btn-mini.secondary {
    background: rgba(107, 114, 128, 0.3);
    color: var(--text-secondary);
}

.btn-mini.secondary:hover:not(:disabled) {
    background: rgba(107, 114, 128, 0.5);
}

.btn-mini.danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.btn-mini.danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.35);
}

.btn-mini.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.btn-mini.warning:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.35);
}

/* Hair Mini Form */
.hair-mini-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.input-mini {
    width: 60px;
    padding: 6px 8px;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
}

.input-mini:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.offline-hint {
    font-size: 0.65rem;
    color: #f59e0b;
    margin: 0;
    padding-left: 50px;
}

/* Responsive for Compact Layout */
@media (max-width: 640px) {
    .char-compact-header {
        flex-direction: column;
        text-align: center;
    }

    .char-compact-name-row {
        justify-content: center;
    }

    .char-compact-levels {
        justify-content: center;
    }

    .char-compact-grid {
        grid-template-columns: 1fr;
    }

    .action-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-btns {
        width: 100%;
    }

    .btn-mini {
        flex: 1;
    }

    .hair-mini-form {
        width: 100%;
    }

    .hair-mini-form .input-mini {
        flex: 1;
    }

    .offline-hint {
        padding-left: 0;
        text-align: center;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .characters-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: none;
    }

    .controls-right {
        justify-content: space-between;
    }

    .char-detail-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .char-detail-identity {
        flex-direction: column;
    }

    .stats-grid-detail {
        grid-template-columns: 1fr;
    }

    .reset-buttons {
        flex-direction: column;
    }

    .appearance-info-detail {
        flex-direction: column;
    }

    .hair-form .form-row {
        flex-direction: column;
    }

    .points-display {
        flex-direction: column;
    }
}

/* ========================================
   Admin News Management Page V2
   ======================================== */
.admin-news-page-v2 {
    padding: 30px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-news-page-v2 .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.6) 0%, rgba(15, 30, 50, 0.8) 100%);
    border-radius: 16px;
    border: 1px solid rgba(62, 193, 211, 0.2);
}

.admin-news-page-v2 .header-content .page-title {
    font-size: 1.75rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-weight: 700;
}

.admin-news-page-v2 .page-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.admin-news-page-v2 .btn-new {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
}

.admin-news-page-v2 .btn-new .btn-icon {
    font-size: 1.25rem;
}

/* Stats Cards */
.admin-news-page-v2 .news-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.admin-news-page-v2 .stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.admin-news-page-v2 .stat-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.admin-news-page-v2 .stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}

.admin-news-page-v2 .stat-icon.total {
    background: rgba(59, 130, 246, 0.15);
}

.admin-news-page-v2 .stat-icon.published {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.admin-news-page-v2 .stat-icon.draft {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.admin-news-page-v2 .stat-info {
    flex: 1;
}

.admin-news-page-v2 .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.admin-news-page-v2 .stat-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Form Container */
.admin-news-page-v2 .news-form-container {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    overflow: hidden;
}

.admin-news-page-v2 .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: rgba(59, 130, 246, 0.05);
    border-bottom: 1px solid var(--border-color);
}

.admin-news-page-v2 .form-header h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.admin-news-page-v2 .btn-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(107, 114, 128, 0.2);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.admin-news-page-v2 .btn-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.admin-news-page-v2 .news-form-container form {
    padding: 24px;
}

.admin-news-page-v2 .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-news-page-v2 .form-group {
    margin-bottom: 20px;
}

.admin-news-page-v2 .form-group.flex-1 {
    flex: 1;
}

.admin-news-page-v2 .form-group.flex-2 {
    flex: 2;
}

.admin-news-page-v2 .form-group label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.admin-news-page-v2 .form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
}

.admin-news-page-v2 .checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.admin-news-page-v2 .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
}

.admin-news-page-v2 .checkbox-text {
    color: var(--text-secondary);
}

.admin-news-page-v2 .form-actions {
    display: flex;
    gap: 12px;
}

/* Filters */
.admin-news-page-v2 .news-filters {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-news-page-v2 .filter-group {
    flex: 1;
    min-width: 150px;
}

.admin-news-page-v2 .search-input {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.admin-news-page-v2 .search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.admin-news-page-v2 .filter-select {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.admin-news-page-v2 .filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.admin-news-page-v2 .filter-info {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* News Table */
.admin-news-page-v2 .news-table-container {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.admin-news-page-v2 .news-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-news-page-v2 .news-table thead {
    background: rgba(59, 130, 246, 0.05);
}

.admin-news-page-v2 .news-table th {
    padding: 16px 20px;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.admin-news-page-v2 .news-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.admin-news-page-v2 .news-table tbody tr {
    transition: background 0.2s ease;
}

.admin-news-page-v2 .news-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.03);
}

.admin-news-page-v2 .news-table tbody tr.draft-row {
    opacity: 0.7;
}

.admin-news-page-v2 .news-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Columns */
.admin-news-page-v2 .col-status {
    width: 110px;
}

.admin-news-page-v2 .col-title {
    min-width: 200px;
}

.admin-news-page-v2 .col-category {
    width: 130px;
}

.admin-news-page-v2 .col-author {
    width: 120px;
}

.admin-news-page-v2 .col-date,
.admin-news-page-v2 .col-updated {
    width: 150px;
}

.admin-news-page-v2 .col-actions {
    width: 130px;
}

/* Status Toggle */
.admin-news-page-v2 .status-toggle {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-news-page-v2 .status-toggle.published {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.admin-news-page-v2 .status-toggle.published:hover {
    background: rgba(16, 185, 129, 0.25);
}

.admin-news-page-v2 .status-toggle.draft {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.3);
}

.admin-news-page-v2 .status-toggle.draft:hover {
    background: rgba(107, 114, 128, 0.25);
}

/* Title Cell */
.admin-news-page-v2 .title-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-news-page-v2 .news-title {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.admin-news-page-v2 .news-id {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Category Badge */
.admin-news-page-v2 .category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Author */
.admin-news-page-v2 .author-name {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Date */
.admin-news-page-v2 .date-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Action Buttons */
.admin-news-page-v2 .action-buttons {
    display: flex;
    gap: 8px;
}

.admin-news-page-v2 .btn-action {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.admin-news-page-v2 .btn-action.btn-preview {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.admin-news-page-v2 .btn-action.btn-preview:hover {
    background: rgba(59, 130, 246, 0.2);
}

.admin-news-page-v2 .btn-action.btn-edit {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.admin-news-page-v2 .btn-action.btn-edit:hover {
    background: rgba(245, 158, 11, 0.2);
}

.admin-news-page-v2 .btn-action.btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.admin-news-page-v2 .btn-action.btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Loading & Empty States */
.admin-news-page-v2 .loading-state,
.admin-news-page-v2 .empty-state {
    padding: 60px 20px;
    text-align: center;
}

.admin-news-page-v2 .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 1s linear infinite;
}

.admin-news-page-v2 .empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.admin-news-page-v2 .empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.admin-news-page-v2 .empty-state p {
    color: var(--text-muted);
}

/* Preview Modal */
.admin-news-page-v2 .preview-modal {
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.admin-news-page-v2 .preview-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.admin-news-page-v2 .preview-header-info h2 {
    color: var(--text-primary);
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    padding-right: 40px;
}

.admin-news-page-v2 .preview-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-news-page-v2 .status-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-news-page-v2 .status-badge.published {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.admin-news-page-v2 .status-badge.draft {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.admin-news-page-v2 .preview-info-bar {
    display: flex;
    gap: 24px;
    padding: 12px 24px;
    background: rgba(59, 130, 246, 0.03);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.admin-news-page-v2 .preview-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.admin-news-page-v2 .preview-content {
    color: var(--text-primary);
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 1200px) {
    .admin-news-page-v2 .news-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .admin-news-page-v2 .page-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .admin-news-page-v2 .news-stats {
        grid-template-columns: 1fr;
    }

    .admin-news-page-v2 .news-filters {
        flex-direction: column;
    }

    .admin-news-page-v2 .filter-group {
        width: 100%;
    }

    .admin-news-page-v2 .form-row {
        flex-direction: column;
    }

    .admin-news-page-v2 .form-footer {
        flex-direction: column;
        gap: 16px;
    }

    .admin-news-page-v2 .form-actions {
        width: 100%;
        justify-content: stretch;
    }

    .admin-news-page-v2 .form-actions .btn {
        flex: 1;
    }

    .admin-news-page-v2 .preview-info-bar {
        flex-direction: column;
        gap: 8px;
    }
}

/* ==================== Giveaway System Styles ==================== */

/* Admin Giveaway Page */
.admin-giveaway-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.admin-giveaway-page .page-header h1 {
    font-size: 1.75rem;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.admin-giveaway-page .admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--card-bg);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.admin-giveaway-page .tab-btn {
    flex: 1;
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.admin-giveaway-page .tab-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.admin-giveaway-page .tab-btn.active {
    background: var(--accent-color);
    color: white;
}

.admin-giveaway-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.admin-giveaway-page .section-header h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
}

.admin-giveaway-page table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.admin-giveaway-page th,
.admin-giveaway-page td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-giveaway-page th {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.admin-giveaway-page td {
    color: var(--text-primary);
}

.admin-giveaway-page .actions {
    display: flex;
    gap: 8px;
}

.admin-giveaway-page .badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-giveaway-page .badge-type {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.admin-giveaway-page .badge-draft {
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

.admin-giveaway-page .badge-active {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.admin-giveaway-page .badge-paused {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.admin-giveaway-page .badge-ended {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.admin-giveaway-page .badge-disabled {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.admin-giveaway-page .code-cell code {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
}

/* Admin Giveaway Modal */
.admin-giveaway-page .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.admin-giveaway-page .modal {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.admin-giveaway-page .modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.admin-giveaway-page .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.admin-giveaway-page .modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.admin-giveaway-page .modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.admin-giveaway-page .modal-close:hover {
    background: rgba(239, 68, 68, 0.3);
}

.admin-giveaway-page .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.admin-giveaway-page .modal-body .form-group {
    margin-bottom: 20px;
}

.admin-giveaway-page .modal-body .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

.admin-giveaway-page .modal-body .form-group input[type="text"],
.admin-giveaway-page .modal-body .form-group input[type="number"],
.admin-giveaway-page .modal-body .form-group input[type="datetime-local"],
.admin-giveaway-page .modal-body .form-group textarea,
.admin-giveaway-page .modal-body .form-group select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-giveaway-page .modal-body .form-group input:focus,
.admin-giveaway-page .modal-body .form-group textarea:focus,
.admin-giveaway-page .modal-body .form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-giveaway-page .modal-body .form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.admin-giveaway-page .modal-body .form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 44px;
}

.admin-giveaway-page .modal-body .form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-giveaway-page .modal-body .form-row .form-group {
    flex: 1;
    min-width: 200px;
}

.admin-giveaway-page .modal-body .form-group.checkbox {
    display: flex;
    align-items: center;
}

.admin-giveaway-page .modal-body .form-group.checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    cursor: pointer;
    color: var(--text-primary);
}

.admin-giveaway-page .modal-body .form-group.checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.admin-giveaway-page .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 16px 16px;
}

.admin-giveaway-page .modal-footer .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Help Text */
.admin-giveaway-page .help-text {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Conditions Section */
.admin-giveaway-page .conditions-section {
    margin-top: 20px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.admin-giveaway-page .conditions-section h4 {
    margin: 0 0 16px 0;
    color: var(--accent-primary);
    font-size: 1rem;
}

.admin-giveaway-page .conditions-section .form-group {
    margin-bottom: 0;
}

/* Rewards Section in Modal */
.admin-giveaway-page .rewards-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.admin-giveaway-page .rewards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.admin-giveaway-page .rewards-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.admin-giveaway-page .empty-rewards {
    text-align: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: var(--text-muted);
}

.admin-giveaway-page .empty-rewards p {
    margin: 0;
}

.admin-giveaway-page .rewards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-giveaway-page .reward-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 12px;
}

.admin-giveaway-page .reward-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-giveaway-page .reward-type {
    flex: 0 0 150px;
}

.admin-giveaway-page .reward-type select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.admin-giveaway-page .reward-value {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-giveaway-page .reward-value input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.admin-giveaway-page .reward-value input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-giveaway-page .reward-value .unit {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.admin-giveaway-page .reward-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 100px;
}

.admin-giveaway-page .reward-amount span {
    color: var(--text-muted);
}

.admin-giveaway-page .reward-amount input {
    width: 70px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.admin-giveaway-page .reward-amount input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-giveaway-page .reward-remove {
    flex-shrink: 0;
}

/* Tier Selector in Rewards */
.admin-giveaway-page .reward-tier-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px 8px 0 0;
    margin: -12px -12px 12px -12px;
}

.admin-giveaway-page .reward-tier-row .tier-label {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.admin-giveaway-page .reward-tier-row .tier-select {
    flex: 1;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 32px;
}

.admin-giveaway-page .reward-tier-row .tier-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Message Section in Modal */
.admin-giveaway-page .message-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.admin-giveaway-page .message-section h4 {
    margin: 0 0 16px 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .admin-giveaway-page .reward-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-giveaway-page .reward-type {
        flex: none;
        width: 100%;
    }

    .admin-giveaway-page .reward-value {
        width: 100%;
    }

    .admin-giveaway-page .reward-amount {
        flex: none;
        width: 100%;
    }

    .admin-giveaway-page .reward-remove {
        width: 100%;
    }
}

/* Alert inside modal */
.admin-giveaway-page .modal-body .alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.admin-giveaway-page .modal-body .alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.admin-giveaway-page .modal-body .alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

/* Empty state */
.admin-giveaway-page .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.admin-giveaway-page .empty-state p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* Loading state */
.admin-giveaway-page .loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Responsive modal */
@media (max-width: 768px) {
    .admin-giveaway-page .modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .admin-giveaway-page .modal-header,
    .admin-giveaway-page .modal-body,
    .admin-giveaway-page .modal-footer {
        padding: 16px;
    }

    .admin-giveaway-page .modal-body .form-row {
        flex-direction: column;
    }

    .admin-giveaway-page .modal-body .form-row .form-group {
        min-width: 100%;
    }
}

/* User Giveaway Page */
.giveaway-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.giveaway-page .page-header {
    text-align: center;
    margin-bottom: 32px;
}

.giveaway-page .page-header h1 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.giveaway-page .page-subtitle {
    color: var(--text-muted);
}

.giveaway-page .campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.giveaway-page .campaign-card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.giveaway-page .campaign-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.giveaway-page .campaign-banner {
    height: 150px;
    overflow: hidden;
}

.giveaway-page .campaign-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.giveaway-page .campaign-content {
    padding: 20px;
}

.giveaway-page .campaign-header {
    margin-bottom: 12px;
}

.giveaway-page .campaign-type {
    font-size: 0.75rem;
    color: var(--theme-color, var(--accent-color));
    text-transform: uppercase;
    font-weight: 600;
}

.giveaway-page .campaign-name {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-top: 4px;
}

.giveaway-page .campaign-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.giveaway-page .campaign-rewards h4 {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.giveaway-page .rewards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.giveaway-page .reward-item {
    background: rgba(59, 130, 246, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.giveaway-page .campaign-progress {
    margin-bottom: 16px;
}

.giveaway-page .progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.giveaway-page .progress-fill {
    height: 100%;
    background: var(--theme-color, var(--accent-color));
    transition: width 0.3s;
}

.giveaway-page .progress-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.giveaway-page .campaign-time {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.giveaway-page .campaign-action .btn-block {
    width: 100%;
}

/* Redeem Code Page */
.redeem-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 24px;
}

.redeem-page .page-header {
    text-align: center;
    margin-bottom: 40px;
}

.redeem-page .page-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.redeem-page .page-header p {
    color: var(--text-muted);
    font-size: 1rem;
}

.redeem-page .redeem-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: start;
}

.redeem-page .redeem-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.redeem-page .redeem-card-header {
    text-align: center;
    margin-bottom: 28px;
}

.redeem-page .redeem-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.redeem-page .redeem-card-header h2 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

.redeem-page .form-group {
    margin-bottom: 20px;
}

.redeem-page .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.redeem-page .code-input {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 1.15rem;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.redeem-page .code-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
}

.redeem-page .code-input::placeholder {
    color: var(--text-muted);
    letter-spacing: 2px;
    font-size: 1rem;
}

.redeem-page .char-select {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
}

.redeem-page .char-select:focus {
    border-color: var(--accent-primary);
    outline: none;
}

.redeem-page .btn-redeem {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    margin-top: 8px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #2563eb 100%);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.redeem-page .btn-redeem:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.redeem-page .btn-redeem:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.redeem-page .rewards-received {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.redeem-page .rewards-received h4 {
    color: #22c55e;
    margin-bottom: 12px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.redeem-page .rewards-received h4::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
}

.redeem-page .rewards-received ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.redeem-page .rewards-received li {
    padding: 8px 12px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.redeem-page .rewards-received li:last-child {
    margin-bottom: 0;
}

.redeem-page .history-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.redeem-page .history-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.redeem-page .history-card h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: var(--accent-primary);
    border-radius: 2px;
}

.redeem-page .history-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.redeem-page .history-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.redeem-page .history-list {
    max-height: 380px;
    overflow-y: auto;
}

.redeem-page .history-list::-webkit-scrollbar {
    width: 6px;
}

.redeem-page .history-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

.redeem-page .history-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.redeem-page .history-item {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.15s ease;
}

.redeem-page .history-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.redeem-page .history-item:last-child {
    margin-bottom: 0;
}

.redeem-page .history-code {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.redeem-page .history-code code {
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.redeem-page .batch-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.redeem-page .history-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.redeem-page .history-reward-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #60a5fa;
}

.redeem-page .history-reward-tag.wallet {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.redeem-page .history-reward-tag.item {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.redeem-page .history-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.redeem-page .history-meta .char-name {
    display: flex;
    align-items: center;
    gap: 4px;
}

.redeem-page .history-meta .char-name::before {
    content: '👤';
    font-size: 0.7rem;
}

/* Messages Page */
.messages-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.messages-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.messages-page .page-header h1 {
    font-size: 1.75rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.messages-page .unread-badge {
    background: var(--accent-color);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    margin-left: 8px;
}

.messages-page .messages-container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    height: calc(100vh - 200px);
    min-height: 500px;
}

.messages-page .messages-list-section {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.messages-page .messages-list {
    flex: 1;
    overflow-y: auto;
}

.messages-page .message-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.messages-page .message-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

.messages-page .message-item.selected {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--accent-color);
}

.messages-page .message-item.unread {
    background: rgba(59, 130, 246, 0.08);
}

.messages-page .message-item.unread .message-title {
    font-weight: 600;
}

.messages-page .message-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.messages-page .message-content {
    flex: 1;
    min-width: 0;
}

.messages-page .message-title {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.messages-page .attachment-badge {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.messages-page .message-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messages-page .message-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 4px;
}

.messages-page .message-detail-section {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.messages-page .message-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.messages-page .detail-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.messages-page .detail-header h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.messages-page .detail-meta {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.messages-page .detail-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.messages-page .message-content-full {
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    margin-bottom: 24px;
}

.messages-page .attachment-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.messages-page .attachment-section h4 {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.messages-page .attachment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 12px;
}

.messages-page .attachment-icon {
    font-size: 1.5rem;
}

.messages-page .attachment-value {
    color: var(--text-primary);
    font-weight: 500;
}

.messages-page .attachment-status.claimed {
    color: #22c55e;
    font-size: 0.9rem;
}

.messages-page .claim-attachment {
    margin-top: 12px;
}

.messages-page .claim-attachment .form-group {
    margin-bottom: 12px;
}

.messages-page .expiry-warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #eab308;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.messages-page .detail-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.messages-page .no-message-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}

.messages-page .placeholder-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Login Prompt */
.login-prompt {
    text-align: center;
    padding: 60px 20px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.login-prompt-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}

.login-prompt h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.login-prompt p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 900px) {
    .redeem-page .redeem-container {
        grid-template-columns: 1fr;
    }

    .redeem-page .redeem-card {
        padding: 24px;
    }

    .redeem-page .page-header h1 {
        font-size: 1.75rem;
    }

    .redeem-page .history-card {
        order: 2;
    }

    .messages-page .messages-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    .messages-page .message-detail-section {
        min-height: 400px;
    }

    .giveaway-page .campaigns-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .redeem-page {
        padding: 20px 16px;
    }

    .redeem-page .redeem-card {
        padding: 20px;
    }

    .redeem-page .code-input {
        font-size: 1rem;
        letter-spacing: 2px;
        padding: 12px;
    }

    .redeem-page .history-code {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ==================== Server Selector ==================== */

.server-selector {
    position: relative;
    display: flex;
    align-items: center;
}

.server-selector-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    color: #e2e8f0;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.server-selector-toggle:hover {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1));
    border-color: rgba(59, 130, 246, 0.5);
}

.server-selector-toggle.open {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.server-selector-toggle:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.server-selector-toggle .server-icon {
    font-size: 1rem;
}

.server-selector-toggle .server-name {
    flex: 1;
    text-align: left;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-selector-toggle .dropdown-arrow {
    color: #94a3b8;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.server-selector-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 280px;
    background: #0f172a;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 1100;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.server-list {
    max-height: 300px;
    overflow-y: auto;
}

.server-list::-webkit-scrollbar {
    width: 6px;
}

.server-list::-webkit-scrollbar-track {
    background: transparent;
}

.server-list::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 3px;
}

.server-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.server-option:last-child {
    border-bottom: none;
}

.server-option:hover {
    background: rgba(59, 130, 246, 0.1);
}

.server-option.current {
    background: rgba(59, 130, 246, 0.15);
}

.server-option.not-activated {
    opacity: 0.6;
    cursor: not-allowed;
}

.server-option.not-activated:hover {
    background: transparent;
}

.server-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.server-option-name {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 0.9rem;
}

.server-option-rates {
    font-size: 0.75rem;
    color: #64748b;
}

.server-option-status {
    display: flex;
    align-items: center;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.current {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.status-badge.activated {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge.not-activated {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Server Selector - Mobile */
@media (max-width: 768px) {
    .server-selector-toggle {
        min-width: 120px;
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .server-selector-dropdown {
        min-width: 240px;
        right: auto;
    }

    .server-option {
        padding: 10px 12px;
    }

    .server-option-name {
        font-size: 0.85rem;
    }
}

/* ==================== Admin Servers Page ==================== */
.admin-servers-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.admin-servers-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.admin-servers-page .page-header h1 {
    font-size: 1.75rem;
    color: var(--text-primary);
}

.admin-servers-page .servers-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.admin-servers-page .servers-table th,
.admin-servers-page .servers-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-servers-page .servers-table th {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-servers-page .servers-table td {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.admin-servers-page .servers-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-servers-page .servers-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

.admin-servers-page .server-name-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-servers-page .server-name {
    font-weight: 600;
    color: var(--accent-primary);
}

.admin-servers-page .server-slug {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.admin-servers-page .server-rates {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-servers-page .rate-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
    font-weight: 500;
}

.admin-servers-page .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.admin-servers-page .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.admin-servers-page .status-badge.maintenance {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.admin-servers-page .status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.admin-servers-page .actions {
    display: flex;
    gap: 8px;
}

.admin-servers-page .empty-state,
.admin-servers-page .loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

/* Server Modal */
.admin-servers-page .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.admin-servers-page .modal-content.server-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.admin-servers-page .modal-content.server-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(59, 130, 246, 0.05);
    flex-shrink: 0;
}

.admin-servers-page .modal-content.server-modal form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.admin-servers-page .modal-content.server-modal .modal-header h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.admin-servers-page .modal-content.server-modal .modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.admin-servers-page .modal-content.server-modal .modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.admin-servers-page .modal-content.server-modal .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.admin-servers-page .form-section {
    margin-bottom: 24px;
}

.admin-servers-page .form-section:last-child {
    margin-bottom: 0;
}

.admin-servers-page .form-section h3 {
    font-size: 0.9rem;
    color: var(--accent-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.admin-servers-page .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-servers-page .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.admin-servers-page .form-grid.rates-grid {
    grid-template-columns: repeat(3, 1fr);
}

.admin-servers-page .form-grid .full-width {
    grid-column: 1 / -1;
}

.admin-servers-page .section-title {
    font-size: 0.95rem;
    color: var(--accent-primary);
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.admin-servers-page .section-title:first-child {
    margin-top: 0;
}

.admin-servers-page .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.admin-servers-page .form-group small {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.admin-servers-page .form-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.admin-servers-page .form-group input,
.admin-servers-page .form-group select,
.admin-servers-page .form-group textarea {
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-servers-page .form-group input:focus,
.admin-servers-page .form-group select:focus,
.admin-servers-page .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-servers-page .form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.admin-servers-page .modal-content.server-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Delete Confirmation Modal */
.admin-servers-page .delete-modal .modal-body {
    text-align: center;
}

.admin-servers-page .delete-modal .modal-body p {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.admin-servers-page .delete-modal .server-name-confirm {
    font-weight: 600;
    color: var(--danger);
    font-size: 1.1rem;
}

/* Admin Servers - Responsive */
@media (max-width: 1024px) {
    .admin-servers-page .servers-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .admin-servers-page {
        padding: 16px;
    }

    .admin-servers-page .page-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .admin-servers-page .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .admin-servers-page .form-grid {
        grid-template-columns: 1fr;
    }

    .admin-servers-page .form-grid.rates-grid {
        grid-template-columns: 1fr;
    }

    .admin-servers-page .modal-content.server-modal {
        max-height: 95vh;
    }

    .admin-servers-page .modal-content.server-modal .modal-header,
    .admin-servers-page .modal-content.server-modal .modal-body,
    .admin-servers-page .modal-content.server-modal .modal-footer {
        padding: 16px;
    }
}

/* ==================== Profile Page - Modern Minimal Design ==================== */
.profile-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Profile Hero Section */
.profile-hero {
    position: relative;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

.profile-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.profile-hero-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar-wrapper {
    flex-shrink: 0;
}

.profile-avatar-ring {
    position: relative;
    padding: 3px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
    border-radius: 50%;
    animation: ring-glow 3s ease-in-out infinite;
}

@keyframes ring-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.4); }
}

.profile-avatar-ring .avatar-initial {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
}

.profile-identity {
    flex: 1;
    min-width: 0;
}

.profile-identity .display-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.profile-identity .userid {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: monospace;
}

.btn-edit-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-profile:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--accent-primary);
}

.btn-edit-profile svg {
    width: 14px;
    height: 14px;
}

/* Quick Stats Row */
.profile-quick-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.quick-stat {
    text-align: center;
}

.quick-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.quick-stat-value.profit {
    color: #10b981;
}

.quick-stat-value.loss {
    color: #ef4444;
}

.quick-stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.quick-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
}

/* Bio Section */
.profile-bio-section {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.profile-bio-section p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Profile Meta */
.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.meta-item svg {
    opacity: 0.6;
}

/* Edit Profile Panel */
.edit-profile-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Form Sections */
.form-section {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.input-group {
    display: flex;
    gap: 8px;
}

.form-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.btn-check {
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-check:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.2);
}

.btn-check:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.hint-success {
    color: #10b981;
}

.hint-error {
    color: #ef4444;
}

/* Toggle Group */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toggle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.toggle-item input[type="checkbox"] {
    display: none;
}

.toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s;
}

.toggle-item input:checked + .toggle-switch {
    background: var(--accent-primary);
}

.toggle-item input:checked + .toggle-switch::after {
    left: 18px;
    background: white;
}

.toggle-text {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Form Actions */
.edit-profile-panel .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.btn-cancel {
    flex: 1;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.btn-save {
    flex: 1;
    padding: 10px 20px;
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover:not(:disabled) {
    background: #2563eb;
}

.btn-save:disabled,
.btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Profile Content Grid */
.profile-content-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Section Header */
.profile-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Total Profit Badge */
.total-profit-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.total-profit-badge.profit {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.total-profit-badge.loss {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Characters Grid */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 900px;
}

.server-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
}

.server-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(59, 130, 246, 0.08);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.server-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.char-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.no-chars {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.char-list {
    padding: 8px;
}

.char-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.char-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.char-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.char-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.char-class {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.char-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.char-level {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.char-guild {
    font-size: 0.75rem;
    color: var(--accent-primary);
}

.char-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
}

.char-status.online {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.char-status.offline {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

/* Casino Cards */
.casino-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.casino-game-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.casino-game-card:hover {
    background: rgba(255, 255, 255, 0.04);
}

.casino-game-card.coinflip {
    border-left-color: #f59e0b;
}

.casino-game-card.jackpot {
    border-left-color: #8b5cf6;
}

.casino-game-card.roulette {
    border-left-color: #ec4899;
}

.game-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.casino-game-card.coinflip .game-icon {
    color: #f59e0b;
}

.casino-game-card.jackpot .game-icon {
    color: #8b5cf6;
}

.casino-game-card.roulette .game-icon {
    color: #ec4899;
}

.game-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.game-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.game-result {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.win-rate {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.profit-value {
    font-size: 0.8rem;
    font-weight: 600;
}

.profit-value.profit {
    color: #10b981;
}

.profit-value.loss {
    color: #ef4444;
}

/* Responsive - Profile Page */
@media (max-width: 768px) {
    .profile-page {
        padding: 16px;
    }

    .profile-hero {
        padding: 20px 16px;
    }

    .profile-hero-content {
        flex-direction: column;
        text-align: center;
    }

    .btn-edit-profile {
        margin-top: 12px;
    }

    .profile-quick-stats {
        flex-wrap: wrap;
        gap: 16px;
    }

    .quick-stat-divider {
        display: none;
    }

    .quick-stat {
        flex: 1;
        min-width: 70px;
    }

    .profile-meta {
        justify-content: center;
    }

    .edit-profile-panel .form-actions {
        flex-direction: column;
    }

    .characters-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 450px;
    }

    .char-details {
        flex-wrap: wrap;
        gap: 6px;
    }

    .casino-game-card {
        flex-wrap: wrap;
    }

    .game-result {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* Public Profile Page */
.public-profile-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Online Status Indicator */
.online-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 8px;
}

.online-status.online {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.online-status.offline {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.online-status.online .status-dot {
    animation: pulse-online 2s ease-in-out infinite;
}

@keyframes pulse-online {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* Guild name in quick stats */
.quick-stat-value.guild-name {
    font-size: 1rem;
    color: var(--accent-primary);
}