/* ═══════════════════════════════════════════
   Pulse Community — Purple Galaxy Theme
   ═══════════════════════════════════════════ */

:root {
    --bg-primary: #0a0a1a;
    --bg-secondary: #12122a;
    --bg-card: rgba(20, 20, 50, 0.7);
    --bg-input: rgba(30, 30, 60, 0.6);
    --purple-primary: #7c3aed;
    --purple-accent: #a78bfa;
    --purple-highlight: #c084fc;
    --purple-dark: #4c1d95;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(124, 58, 237, 0.2);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --sidebar-width: 260px;
    --header-height: 60px;
}

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
}

/* Galaxy starfield background - layered for depth */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        /* Distant small stars */
        radial-gradient(0.8px 0.8px at 10% 15%, rgba(255,255,255,0.5), transparent),
        radial-gradient(0.8px 0.8px at 25% 35%, rgba(255,255,255,0.4), transparent),
        radial-gradient(0.8px 0.8px at 45% 10%, rgba(255,255,255,0.35), transparent),
        radial-gradient(0.8px 0.8px at 65% 55%, rgba(255,255,255,0.4), transparent),
        radial-gradient(0.8px 0.8px at 85% 25%, rgba(255,255,255,0.3), transparent),
        radial-gradient(0.8px 0.8px at 5% 70%, rgba(255,255,255,0.35), transparent),
        radial-gradient(0.8px 0.8px at 35% 85%, rgba(255,255,255,0.3), transparent),
        radial-gradient(0.8px 0.8px at 55% 45%, rgba(255,255,255,0.25), transparent),
        radial-gradient(0.8px 0.8px at 75% 75%, rgba(255,255,255,0.3), transparent),
        radial-gradient(0.8px 0.8px at 95% 60%, rgba(255,255,255,0.35), transparent),
        /* Medium colored stars */
        radial-gradient(1.2px 1.2px at 20% 50%, rgba(167,139,250,0.5), transparent),
        radial-gradient(1.2px 1.2px at 60% 30%, rgba(192,132,252,0.4), transparent),
        radial-gradient(1.2px 1.2px at 80% 70%, rgba(139,92,246,0.45), transparent),
        radial-gradient(1.2px 1.2px at 40% 80%, rgba(167,139,250,0.35), transparent),
        /* Bright accent stars */
        radial-gradient(1.5px 1.5px at 15% 40%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 70% 15%, rgba(192,132,252,0.5), transparent),
        radial-gradient(1.5px 1.5px at 90% 85%, rgba(167,139,250,0.5), transparent),
        radial-gradient(2px 2px at 50% 60%, rgba(255,255,255,0.4), transparent);
    background-size: 800px 800px;
    animation: starfieldDrift 180s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes starfieldDrift {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-800px) rotate(0.5deg); }
}

body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(124,58,237,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(76,29,149,0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(139,92,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(124,58,237,0.06) 0%, transparent 40%),
        /* Nebula glow */
        radial-gradient(ellipse at 30% 60%, rgba(192,132,252,0.05) 0%, transparent 35%);
    z-index: 0;
    pointer-events: none;
    animation: nebulaShift 60s ease-in-out infinite alternate;
}

@keyframes nebulaShift {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

/* Twinkling star animation layer */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Layout */
.app-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform 0.3s ease;
}

.sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--header-height);
}

.sidebar-header h1 {
    font-size: 1.3rem;
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-highlight));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-section {
    padding: 8px 20px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.nav-link:hover {
    background: rgba(124, 58, 237, 0.1);
    color: var(--text-primary);
    border-left-color: var(--purple-accent);
}

.nav-link.active {
    background: rgba(124, 58, 237, 0.15);
    color: var(--purple-accent);
    border-left-color: var(--purple-primary);
}

.nav-link .icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: var(--bg-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.user-card:hover { background: rgba(124, 58, 237, 0.15); }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-highlight));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.user-card .user-info { overflow: hidden; }
.user-card .username { font-size: 0.85rem; font-weight: 600; }
.user-card .role { font-size: 0.7rem; }

/* SPA content wrapper */
#spa-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-width);
    height: 100vh;
    overflow: hidden;
}

/* Main content */
.main-content {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-header {
    padding: 20px 32px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(18, 18, 42, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
}

.page-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
}

.page-body {
    padding: 24px 32px;
    overflow-y: auto;
    flex: 1;
}

/* Cards (glassmorphism) */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, border-color 0.2s;
}

.card:hover {
    border-color: rgba(124, 58, 237, 0.4);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

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

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

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    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;
    outline: none;
}

.form-control:focus {
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { cursor: pointer; }

/* Custom file input styling */
input[type="file"].form-control {
    padding: 6px;
}

input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    margin-right: 12px;
    transition: all 0.2s;
}

input[type="file"]::file-selector-button:hover {
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-primary));
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: #fff;
}

.btn-primary {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

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

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

.btn-success { background: var(--success); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-open { background: rgba(16,185,129,0.2); color: var(--success); }
.badge-in-progress { background: rgba(245,158,11,0.2); color: var(--warning); }
.badge-closed { background: rgba(100,116,139,0.2); color: var(--text-muted); }
.badge-low { background: rgba(59,130,246,0.15); color: var(--info); }
.badge-normal { background: rgba(167,139,250,0.15); color: var(--purple-accent); }
.badge-high { background: rgba(245,158,11,0.15); color: var(--warning); }
.badge-urgent { background: rgba(239,68,68,0.15); color: var(--danger); }

/* Tags */
.tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--purple-accent);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.tag:hover, .tag.active {
    background: rgba(124, 58, 237, 0.3);
    border-color: var(--purple-primary);
    color: var(--purple-highlight);
}

/* Chat layout */
.chat-layout {
    display: flex;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

.chat-channels {
    width: 220px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 12px 0;
    flex-shrink: 0;
}

.channel-category {
    padding: 12px 16px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.channel-link {
    display: block;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}

.channel-link:hover { color: var(--text-primary); background: rgba(124,58,237,0.1); }
.channel-link.active { color: var(--purple-accent); background: rgba(124,58,237,0.15); }
.channel-link::before { content: '# '; color: var(--text-muted); }

/* Chat notification badge */
.channel-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 4px;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-message {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}

.chat-message:hover { background: rgba(255,255,255,0.03); }

.chat-message .msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-highlight));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.chat-message .msg-content { flex: 1; min-width: 0; }
.chat-message .msg-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.chat-message .msg-username { font-weight: 600; font-size: 0.9rem; }
.chat-message .msg-time { font-size: 0.75rem; color: var(--text-muted); }
.chat-message .msg-text { font-size: 0.9rem; line-height: 1.4; word-break: break-word; }

.chat-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(18, 18, 42, 0.5);
    flex-shrink: 0;
}

.chat-input-wrapper {
    display: flex;
    gap: 8px;
}

.chat-input-wrapper input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

.chat-input-wrapper input:focus {
    border-color: var(--purple-primary);
}

.chat-online {
    width: 200px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 16px;
    overflow-y: auto;
    flex-shrink: 0;
}

.chat-online h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.online-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85rem;
}

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}

.typing-indicator {
    padding: 4px 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    min-height: 24px;
}

/* Admin Console */
.console-container {
    background: #0c0c0c;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    overflow: hidden;
    height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
}

.console-header {
    background: rgba(124, 58, 237, 0.15);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--purple-accent);
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
}

.console-dots {
    display: flex;
    gap: 6px;
}

.console-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.console-dots .red { background: #ef4444; }
.console-dots .yellow { background: #f59e0b; }
.console-dots .green { background: #10b981; }

.console-output {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: #a78bfa;
}

.console-output .cmd-line { color: var(--purple-highlight); }
.console-output .cmd-output { color: #c4b5fd; }
.console-output .cmd-error { color: var(--danger); }

.console-input-area {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid rgba(124, 58, 237, 0.2);
    background: rgba(0,0,0,0.3);
}

.console-prompt {
    color: var(--purple-highlight);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    margin-right: 8px;
    white-space: nowrap;
}

.console-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    outline: none;
}

/* File manager */
.file-list {
    list-style: none;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.file-item:hover { background: rgba(124, 58, 237, 0.05); }

.file-icon { font-size: 1.2rem; width: 24px; text-align: center; }
.file-name { flex: 1; font-size: 0.9rem; }
.file-size { color: var(--text-muted); font-size: 0.8rem; width: 80px; text-align: right; }
.file-date { color: var(--text-muted); font-size: 0.8rem; width: 140px; text-align: right; }

.file-actions {
    display: flex;
    gap: 4px;
}

/* Announcements */
.announcement-card {
    margin-bottom: 16px;
}

.announcement-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.announcement-card .card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.announcement-card .card-body {
    font-size: 0.9rem;
    line-height: 1.6;
}

.announcement-card .card-body h1,
.announcement-card .card-body h2,
.announcement-card .card-body h3 {
    margin: 12px 0 8px;
    color: var(--purple-accent);
}

.announcement-card .card-body a { color: var(--purple-highlight); }
.announcement-card .card-body code {
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.pin-badge {
    background: rgba(245,158,11,0.2);
    color: var(--warning);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Downloads */
.download-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-card .card-title {
    font-size: 1rem;
    font-weight: 600;
}

.download-card .card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.download-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.download-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.download-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

/* Tickets */
.ticket-list { list-style: none; }

.ticket-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
    text-decoration: none;
    color: var(--text-primary);
}

.ticket-item:hover { background: rgba(124, 58, 237, 0.05); }

.ticket-id {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    width: 50px;
}

.ticket-info { flex: 1; }
.ticket-title { font-weight: 500; margin-bottom: 4px; }
.ticket-meta { font-size: 0.8rem; color: var(--text-muted); }

/* Thread messages */
.thread-message {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.thread-message .msg-content {
    flex: 1;
}

.thread-message .msg-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.thread-message .msg-text {
    line-height: 1.6;
    font-size: 0.9rem;
}

/* Gaming */
.game-card {
    text-align: center;
    padding: 24px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
}

.game-card .game-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.game-card .game-name {
    font-size: 1.1rem;
    font-weight: 600;
}

.server-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.server-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.server-status.online { background: var(--success); box-shadow: 0 0 8px rgba(16,185,129,0.5); }
.server-status.offline { background: var(--danger); }

/* Profile */
.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.profile-info h2 {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.profile-stats {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.stat-item {
    text-align: center;
}

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

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

/* Auth pages */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 40px;
}

.auth-card h1 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--purple-accent), var(--purple-highlight));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-card .subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 32px;
    font-size: 0.9rem;
}

.auth-card .error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: #fca5a5;
}

.auth-card .auth-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

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

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

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Dashboard */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    text-align: center;
    padding: 24px;
}

.stat-card .stat-value {
    font-size: 2rem;
}

/* Utility */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.85rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.5); }

/* Mobile toggle */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar-toggle { display: block; }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open { transform: translateX(0); }

    #spa-content { margin-left: 0; }

    .page-header { padding: 16px 16px 16px 56px; }
    .page-body { padding: 16px; }

    .chat-layout { flex-direction: column; }
    .chat-channels { width: 100%; height: auto; max-height: 120px; flex-direction: row; overflow-x: auto; }
    .chat-online { display: none; }

    .card-grid { grid-template-columns: 1fr; }

    .profile-header { flex-direction: column; text-align: center; }

    .dashboard-stats { grid-template-columns: 1fr 1fr; }
}

/* Admin user table */
.user-table {
    width: 100%;
    border-collapse: collapse;
}

.user-table th, .user-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.user-table th {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.user-table tr:hover { background: rgba(124, 58, 237, 0.05); }

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

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

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
}

.modal h3 {
    margin-bottom: 16px;
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════
   Enhanced Galaxy & Interactive Elements
   ═══════════════════════════════════════════ */

/* Galaxy background visible through cards */
.card {
    background: rgba(15, 15, 35, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(1px 1px at 30% 20%, rgba(167,139,250,0.15), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.08), transparent),
        radial-gradient(1px 1px at 50% 80%, rgba(192,132,252,0.1), transparent);
    pointer-events: none;
    z-index: 0;
}

.card > * { position: relative; z-index: 1; }

/* Chat area galaxy effect */
.chat-messages {
    background: rgba(8, 8, 20, 0.5);
    position: relative;
}

.chat-messages::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(0.5px 0.5px at 15% 25%, rgba(167,139,250,0.2), transparent),
        radial-gradient(0.5px 0.5px at 55% 45%, rgba(255,255,255,0.1), transparent),
        radial-gradient(0.5px 0.5px at 85% 75%, rgba(192,132,252,0.15), transparent),
        radial-gradient(0.5px 0.5px at 35% 65%, rgba(255,255,255,0.08), transparent);
    background-size: 300px 300px;
    pointer-events: none;
    z-index: 0;
    animation: starfieldDrift 120s linear infinite;
}

/* Crown styling */
.crown {
    font-size: 0.9em;
    filter: drop-shadow(0 0 3px rgba(255,107,43,0.5));
}

/* @Mentions */
.mention {
    background: rgba(124, 58, 237, 0.25);
    color: var(--purple-highlight);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.mention:hover {
    background: rgba(124, 58, 237, 0.4);
}

.mention-everyone {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.mention-everyone:hover {
    background: rgba(245, 158, 11, 0.35);
}

/* User popup (Discord-style) */
.user-popup {
    position: fixed;
    z-index: 2000;
    width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
}

.user-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Game card hover effects */
.game-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
    transform: translateY(-4px);
    border-color: var(--purple-primary);
    box-shadow: 0 8px 24px rgba(124,58,237,0.2);
}

.game-card .game-icon {
    transition: transform 0.3s ease;
}

.game-card:hover .game-icon {
    transform: scale(1.15);
}

/* Download card hover */
.download-card {
    transition: transform 0.2s ease;
}

.download-card:hover {
    transform: translateY(-2px);
}

/* Stat card glow */
.stat-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    border-color: var(--purple-primary);
    box-shadow: 0 0 20px rgba(124,58,237,0.15);
}

/* Avatar image styling */
img.avatar {
    border-radius: 50%;
    object-fit: cover;
}

/* Server card animated status */
.server-status.online {
    animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 4px rgba(16,185,129,0.4); }
    50% { box-shadow: 0 0 12px rgba(16,185,129,0.7); }
}

/* Premium silver glow */
.badge[style*="c0c0c0"] {
    text-shadow: 0 0 6px rgba(192,192,192,0.4);
}

/* Owner orange glow */
.badge[style*="ff6b2b"] {
    text-shadow: 0 0 6px rgba(255,107,43,0.4);
}

/* Smooth page transitions */
.main-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Button hover glow */
.btn-primary:hover {
    box-shadow: 0 4px 20px rgba(124,58,237,0.5);
}

/* Input focus glow enhanced */
.form-control:focus {
    box-shadow: 0 0 0 3px rgba(124,58,237,0.2), 0 0 12px rgba(124,58,237,0.1);
}

/* Sidebar gradient border */
.sidebar {
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, rgba(124,58,237,0.3), rgba(124,58,237,0.05)) 1;
}

/* ═══════════════════════════════════════════
   Phase 3: Chat Enhancements, DM, Animations
   ═══════════════════════════════════════════ */

/* Chat toolbar buttons (emoji, GIF) */
.chat-toolbar-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-toolbar-btn:hover {
    background: rgba(124,58,237,0.2);
    border-color: var(--purple-primary);
    color: var(--text-primary);
}

/* Chat panels area */
.chat-panels-area {
    position: relative;
}

/* Slash command autocomplete */
.slash-panel {
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}

.slash-option {
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.slash-option:hover {
    background: rgba(124,58,237,0.15);
    color: var(--purple-accent);
}

/* Emoji panel */
.emoji-panel {
    position: absolute;
    bottom: 0;
    left: 16px;
    width: 340px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    padding: 12px;
    z-index: 100;
    overflow-y: auto;
    max-height: 300px;
}

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

.emoji-item {
    font-size: 1.4rem;
    padding: 6px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, transform 0.15s;
}

.emoji-item:hover {
    background: rgba(124,58,237,0.2);
    transform: scale(1.2);
}

/* GIF panel */
.gif-panel {
    position: absolute;
    bottom: 0;
    left: 16px;
    width: 420px;
    max-height: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    padding: 12px;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

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

.gif-search-input:focus {
    border-color: var(--purple-primary);
}

.gif-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    overflow-y: auto;
    max-height: 320px;
}

.gif-result-item {
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    object-fit: cover;
    aspect-ratio: 1;
}

.gif-result-item:hover {
    transform: scale(1.05);
    opacity: 0.85;
}

/* GIF in chat */
.chat-gif {
    max-width: 300px;
    max-height: 250px;
    border-radius: 8px;
    margin-top: 4px;
}

.chat-link {
    color: var(--purple-accent);
    text-decoration: underline;
}

.chat-link:hover {
    color: var(--purple-highlight);
}

/* System messages */
.system-message {
    justify-content: center;
    opacity: 0.7;
}

.system-text {
    background: rgba(124,58,237,0.1);
    border-left: 3px solid var(--purple-primary);
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    color: var(--purple-accent);
}

.system-text strong {
    color: var(--purple-highlight);
}

.system-text code {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
    color: var(--text-primary);
}

/* Action messages */
.action-msg {
    color: var(--purple-accent);
    font-style: italic;
}

/* Online user avatars */
.online-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* DM / Messages layout */
.dm-layout .dm-sidebar {
    width: 280px;
}

.dm-sidebar .channel-link::before {
    content: '';
}

.dm-friend {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.msg-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
    object-fit: cover;
}

img.msg-avatar-sm {
    object-fit: cover;
}

.unread-badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 0 5px;
}

.friend-request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 0.85rem;
}

.friend-request-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.friend-request-actions {
    display: flex;
    gap: 4px;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-accept {
    background: rgba(16,185,129,0.2);
    color: var(--success);
}

.btn-accept:hover {
    background: rgba(16,185,129,0.4);
}

.btn-decline {
    background: rgba(239,68,68,0.2);
    color: var(--danger);
}

.btn-decline:hover {
    background: rgba(239,68,68,0.4);
}

.dm-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(18,18,42,0.5);
    font-size: 0.95rem;
}

.dm-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}

.search-result-item:hover {
    background: rgba(124,58,237,0.1);
}

/* Ticket chat style */
.ticket-chat {
    max-height: calc(100vh - 260px);
    display: flex;
    flex-direction: column;
}

.ticket-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 300px;
}

/* ═══════════════════════════════════════════
   Enhanced Galaxy Animations & Modern Polish
   ═══════════════════════════════════════════ */

/* Shooting star animation */
@keyframes shootingStar {
    0% { transform: translateX(-100px) translateY(-100px) rotate(-45deg); opacity: 0; }
    5% { opacity: 1; }
    15% { opacity: 0; }
    100% { transform: translateX(1200px) translateY(1200px) rotate(-45deg); opacity: 0; }
}

/* Animated shooting star layer */
.app-wrapper::before {
    content: '';
    position: fixed;
    top: -50px;
    left: 30%;
    width: 120px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(167,139,250,0.8), transparent);
    border-radius: 2px;
    animation: shootingStar 8s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

.app-wrapper::after {
    content: '';
    position: fixed;
    top: -50px;
    left: 65%;
    width: 80px;
    height: 1.5px;
    background: linear-gradient(to right, transparent, rgba(192,132,252,0.6), transparent);
    border-radius: 2px;
    animation: shootingStar 12s ease-in-out 4s infinite;
    z-index: 0;
    pointer-events: none;
}

/* Purple glow border on cards */
.card {
    box-shadow: 0 0 0 0 rgba(124,58,237,0);
    transition: transform 0.2s, border-color 0.3s, box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 4px 24px rgba(124,58,237,0.15), inset 0 0 30px rgba(124,58,237,0.03);
}

/* Glow on sidebar links */
.nav-link.active {
    box-shadow: inset 3px 0 8px -3px rgba(124,58,237,0.4);
}

/* Pulsing glow on badges */
.badge-urgent {
    animation: pulseUrgent 2s ease-in-out infinite;
}

@keyframes pulseUrgent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 8px 2px rgba(239,68,68,0.2); }
}

/* Smoother card transitions */
.announcement-card,
.download-card,
.stat-card,
.game-card {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glowing purple borders on focus within */
.chat-input-wrapper:focus-within {
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(124,58,237,0.3);
}

/* Enhanced nebula animation */
@keyframes nebulaFloat {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Sidebar glow on hover */
.sidebar-header h1 {
    transition: filter 0.3s;
}

.sidebar-header:hover h1 {
    filter: drop-shadow(0 0 8px rgba(167,139,250,0.5));
}

/* Message entrance animation */
.chat-message {
    animation: msgSlideIn 0.2s ease-out;
}

@keyframes msgSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glowing border on modals */
.modal {
    box-shadow: 0 0 30px rgba(124,58,237,0.15), 0 20px 60px rgba(0,0,0,0.5);
    border-color: rgba(124,58,237,0.3);
    animation: modalPop 0.25s ease-out;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-overlay.active {
    animation: fadeOverlay 0.2s ease;
}

@keyframes fadeOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Glowing user popup */
.user-popup {
    box-shadow: 0 0 20px rgba(124,58,237,0.2), 0 8px 32px rgba(0,0,0,0.5);
    animation: popupSlide 0.2s ease-out;
}

@keyframes popupSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ticket status transition animation */
.badge {
    transition: all 0.3s ease;
}

/* Purple glow on hover for links */
a:hover {
    text-shadow: 0 0 8px rgba(167,139,250,0.3);
}

/* Smooth sidebar scrollbar */
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.2); border-radius: 2px; }

/* Enhanced button ripple effect */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.5s;
}

.btn-primary:hover::after {
    transform: translateX(100%);
}

/* Animated gradient border on focus inputs */
.form-control:focus {
    border-image: linear-gradient(135deg, var(--purple-primary), var(--purple-highlight)) 1;
}

/* Dashboard stat number animation */
.stat-value {
    transition: transform 0.2s;
}

.stat-card:hover .stat-value {
    transform: scale(1.1);
}

/* Mobile responsive additions */
@media (max-width: 768px) {
    .emoji-panel, .gif-panel {
        width: calc(100% - 32px);
        left: 16px;
    }

    .dm-layout {
        flex-direction: column;
    }

    .dm-layout .dm-sidebar {
        width: 100%;
        max-height: 200px;
    }

    .ticket-chat {
        max-height: none;
    }

    .settings-layout {
        flex-direction: column;
    }
    .settings-tabs {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 8px;
    }
}

/* ═══════════════════════════════════════════════════ */
/* Chat Replies                                        */
/* ═══════════════════════════════════════════════════ */

.reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.1);
    border-left: 3px solid var(--purple-primary);
    border-radius: 4px;
    margin: 0 12px;
    font-size: 0.85rem;
}

.reply-bar-text {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.reply-bar-text strong {
    color: var(--purple-accent);
}

.reply-bar-preview {
    color: var(--text-muted);
    margin-left: 8px;
}

.reply-bar-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 8px;
}

.reply-bar-cancel:hover {
    color: var(--text-primary);
}

.reply-quote {
    background: rgba(124, 58, 237, 0.08);
    border-left: 2px solid var(--purple-primary);
    padding: 4px 10px;
    margin-bottom: 4px;
    border-radius: 2px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
}

.reply-quote:hover {
    background: rgba(124, 58, 237, 0.15);
}

.reply-icon {
    color: var(--purple-accent);
}

.reply-author {
    color: var(--purple-accent);
    font-weight: 600;
}

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

.highlight-flash {
    animation: highlightFlash 1.5s ease;
}

@keyframes highlightFlash {
    0%, 100% { background: transparent; }
    30% { background: rgba(124, 58, 237, 0.2); }
}

/* ═══════════════════════════════════════════════════ */
/* Message Toolbar (Reply + React buttons)             */
/* ═══════════════════════════════════════════════════ */

.chat-message {
    position: relative;
}

.msg-toolbar {
    position: absolute;
    top: 4px;
    right: 8px;
    display: none;
    gap: 4px;
    z-index: 5;
}

.chat-message:hover .msg-toolbar {
    display: flex;
}

.msg-toolbar-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.msg-toolbar-btn:hover {
    background: var(--purple-primary);
    color: white;
    border-color: var(--purple-primary);
}

/* ═══════════════════════════════════════════════════ */
/* Chat Reactions                                      */
/* ═══════════════════════════════════════════════════ */

.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
    color: var(--text-secondary);
}

.reaction-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--purple-primary);
}

.reaction-btn.reaction-active {
    background: rgba(124, 58, 237, 0.25);
    border-color: var(--purple-accent);
    color: var(--purple-accent);
}

.reaction-emoji {
    font-size: 0.9rem;
}

.reaction-count {
    font-size: 0.75rem;
    font-weight: 600;
}

.reaction-picker {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    gap: 2px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.reaction-picker-item {
    font-size: 1.3rem;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
}

.reaction-picker-item:hover {
    background: rgba(124, 58, 237, 0.2);
}

/* ═══════════════════════════════════════════════════ */
/* Context Menu                                        */
/* ═══════════════════════════════════════════════════ */

/* Legacy class kept for compatibility */
.chat-context-menu {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    min-width: 160px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.context-item {
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all 0.1s;
}

.context-item:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
}

/* ─── Pulse Context Menu (Global) ─── */
.pulse-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    min-width: 180px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: pulseCtxFadeIn 0.12s ease-out;
}

@keyframes pulseCtxFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.pulse-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all 0.1s;
}

.pulse-ctx-item:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
}

.pulse-ctx-icon {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pulse-ctx-label {
    flex: 1;
}

.pulse-ctx-separator {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
}

.pulse-ctx-danger {
    color: var(--danger);
}

.pulse-ctx-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* ═══════════════════════════════════════════════════ */
/* Profile Banner & Enhanced Profile                   */
/* ═══════════════════════════════════════════════════ */

.profile-card {
    overflow: hidden;
    padding: 0;
}

.profile-card .profile-header,
.profile-card .profile-stats-grid,
.profile-card .text-sm,
.profile-card .card {
    padding-left: 24px;
    padding-right: 24px;
}

.profile-card > .card {
    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 24px;
}

.profile-banner {
    width: 100%;
    height: 120px;
    border-radius: 12px 12px 0 0;
}

.profile-avatar-main {
    margin-top: -30px;
    border: 4px solid var(--bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.profile-header {
    padding-top: 12px;
    padding-bottom: 12px;
}

.profile-special-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: default;
}

.profile-stats-grid {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 16px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.profile-stats-grid .stat-item {
    text-align: center;
}

.profile-stats-grid .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

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

/* ═══════════════════════════════════════════════════ */
/* Badges                                              */
/* ═══════════════════════════════════════════════════ */

.badge-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.badge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple-primary), var(--purple-accent));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

.badge-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
    cursor: default;
}

.badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.badge-card-icon {
    font-size: 2rem;
    margin-bottom: 6px;
}

.badge-card-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.badge-card-rarity {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge rarity colors */
.badge-common { border-color: #6b7280; }
.badge-common .badge-card-rarity { color: #6b7280; }

.badge-uncommon { border-color: #10b981; }
.badge-uncommon .badge-card-rarity { color: #10b981; }

.badge-rare { border-color: #3b82f6; }
.badge-rare .badge-card-rarity { color: #3b82f6; }

.badge-epic {
    border-color: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}
.badge-epic .badge-card-rarity { color: #a855f7; }

.badge-legendary {
    border-color: #f59e0b;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), var(--bg-input));
}
.badge-legendary .badge-card-rarity { color: #f59e0b; }

/* Special badge glow for profile */
.profile-badge.badge-epic {
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.profile-badge.badge-legendary {
    background: rgba(245, 158, 11, 0.15);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
    animation: legendaryGlow 2s ease-in-out infinite;
}

@keyframes legendaryGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); }
}

/* Popup badges */
.popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.85rem;
}

.popup-badge.badge-epic {
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

.popup-badge.badge-legendary {
    background: rgba(245, 158, 11, 0.15);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

/* ═══════════════════════════════════════════════════ */
/* Settings - Discord-style Tabbed Layout              */
/* ═══════════════════════════════════════════════════ */

.settings-layout {
    display: flex;
    gap: 24px;
    min-height: 500px;
}

.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 200px;
    flex-shrink: 0;
    padding-right: 16px;
    border-right: 1px solid var(--border-color);
}

.settings-tab {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-tab:hover {
    background: rgba(124, 58, 237, 0.1);
    color: var(--text-primary);
}

.settings-tab.active {
    background: rgba(124, 58, 237, 0.15);
    color: var(--purple-accent);
}

.settings-tab-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.settings-tab-separator {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

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

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

/* Banner color picker */
.color-picker-input {
    width: 48px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    cursor: pointer;
    padding: 2px;
}

.color-picker-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.banner-preview {
    width: 200px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════════════ */
/* Premium                                             */
/* ═══════════════════════════════════════════════════ */

.premium-card {
    border-color: rgba(168, 85, 247, 0.3);
}

.premium-active-card {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.05);
}

.premium-title {
    color: var(--purple-accent);
}

.premium-icon-wrapper {
    margin-bottom: 16px;
}

.premium-feature {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.95rem;
}

.premium-check {
    color: var(--purple-accent);
    font-weight: 700;
}

.premium-purchase-btn {
    width: 100%;
    justify-content: center;
    font-size: 1.1rem;
    padding: 14px 24px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-purchase-btn:hover {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

/* ═══════════════════════════════════════════════════ */
/* Theme System                                        */
/* ═══════════════════════════════════════════════════ */

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f0f0f5;
    --bg-secondary: #e4e4ec;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-input: rgba(220, 220, 235, 0.6);
    --purple-primary: #7c3aed;
    --purple-accent: #6d28d9;
    --purple-highlight: #7c3aed;
    --purple-dark: #4c1d95;
    --text-primary: #1e1e2e;
    --text-secondary: #4a4a6a;
    --text-muted: #6b7280;
    --border-color: rgba(124, 58, 237, 0.15);
}

[data-theme="light"] body::before,
[data-theme="light"] body::after,
[data-theme="light"] .app-wrapper::before,
[data-theme="light"] .app-wrapper::after {
    display: none;
}

[data-theme="light"] .card::before {
    display: none;
}

[data-theme="light"] .chat-messages::before {
    display: none;
}

[data-theme="light"] .page-header {
    background: rgba(228, 228, 236, 0.9);
}

[data-theme="light"] .chat-input-area {
    background: rgba(228, 228, 236, 0.7);
}

[data-theme="light"] .card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: none;
}

[data-theme="light"] .chat-messages {
    background: rgba(240, 240, 245, 0.5);
}

[data-theme="light"] .sidebar {
    border-image: none;
    border-right: 1px solid var(--border-color);
}

/* Midnight Theme */
[data-theme="midnight"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0f;
    --bg-card: rgba(10, 10, 20, 0.85);
    --bg-input: rgba(15, 15, 30, 0.7);
    --purple-primary: #3b82f6;
    --purple-accent: #60a5fa;
    --purple-highlight: #93c5fd;
    --purple-dark: #1d4ed8;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="midnight"] body::before,
[data-theme="midnight"] body::after,
[data-theme="midnight"] .app-wrapper::before,
[data-theme="midnight"] .app-wrapper::after {
    display: none;
}

[data-theme="midnight"] .card::before {
    display: none;
}

[data-theme="midnight"] .chat-messages::before {
    display: none;
}

/* Forest Theme */
[data-theme="forest"] {
    --bg-primary: #0a1a0f;
    --bg-secondary: #0f2418;
    --bg-card: rgba(15, 30, 20, 0.75);
    --bg-input: rgba(20, 40, 28, 0.6);
    --purple-primary: #10b981;
    --purple-accent: #34d399;
    --purple-highlight: #6ee7b7;
    --purple-dark: #065f46;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(16, 185, 129, 0.2);
}

/* Sunset Theme */
[data-theme="sunset"] {
    --bg-primary: #1a0f0a;
    --bg-secondary: #241510;
    --bg-card: rgba(30, 18, 12, 0.75);
    --bg-input: rgba(40, 25, 15, 0.6);
    --purple-primary: #f59e0b;
    --purple-accent: #fbbf24;
    --purple-highlight: #fcd34d;
    --purple-dark: #b45309;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(245, 158, 11, 0.2);
}

/* ═══════════════════════════════════════════════════ */
/* Premium Themes                                      */
/* ═══════════════════════════════════════════════════ */

/* Galaxy Theme (Premium) - keeps starfield */
[data-theme="galaxy"] {
    --bg-primary: #050510;
    --bg-secondary: #0a0a20;
    --bg-card: rgba(10, 10, 30, 0.8);
    --bg-input: rgba(15, 15, 40, 0.7);
    --purple-primary: #7c3aed;
    --purple-accent: #a78bfa;
    --purple-highlight: #c084fc;
    --purple-dark: #4c1d95;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(124, 58, 237, 0.25);
}

/* Cherry Blossom Theme (Premium) */
[data-theme="cherry-blossom"] {
    --bg-primary: #1a0a14;
    --bg-secondary: #241018;
    --bg-card: rgba(26, 10, 20, 0.75);
    --bg-input: rgba(36, 16, 24, 0.6);
    --purple-primary: #ec4899;
    --purple-accent: #f472b6;
    --purple-highlight: #f9a8d4;
    --purple-dark: #9d174d;
    --text-primary: #fce7f3;
    --text-secondary: #f9a8d4;
    --text-muted: #be185d;
    --border-color: rgba(236, 72, 153, 0.2);
}

[data-theme="cherry-blossom"] body::before,
[data-theme="cherry-blossom"] body::after,
[data-theme="cherry-blossom"] .app-wrapper::before,
[data-theme="cherry-blossom"] .app-wrapper::after {
    display: none;
}

[data-theme="cherry-blossom"] .card::before {
    display: none;
}

[data-theme="cherry-blossom"] .chat-messages::before {
    display: none;
}

/* Ocean Depths Theme (Premium) */
[data-theme="ocean-depths"] {
    --bg-primary: #0a1628;
    --bg-secondary: #0f1e30;
    --bg-card: rgba(10, 22, 40, 0.75);
    --bg-input: rgba(15, 30, 48, 0.6);
    --purple-primary: #0891b2;
    --purple-accent: #22d3ee;
    --purple-highlight: #67e8f9;
    --purple-dark: #155e75;
    --text-primary: #e0f2fe;
    --text-secondary: #7dd3fc;
    --text-muted: #0369a1;
    --border-color: rgba(8, 145, 178, 0.2);
}

[data-theme="ocean-depths"] body::before,
[data-theme="ocean-depths"] body::after,
[data-theme="ocean-depths"] .app-wrapper::before,
[data-theme="ocean-depths"] .app-wrapper::after {
    display: none;
}

[data-theme="ocean-depths"] .card::before {
    display: none;
}

[data-theme="ocean-depths"] .chat-messages::before {
    display: none;
}

/* Crimson Theme (Premium) */
[data-theme="crimson"] {
    --bg-primary: #1a0a0a;
    --bg-secondary: #241010;
    --bg-card: rgba(26, 10, 10, 0.75);
    --bg-input: rgba(36, 16, 16, 0.6);
    --purple-primary: #dc2626;
    --purple-accent: #f87171;
    --purple-highlight: #fca5a5;
    --purple-dark: #991b1b;
    --text-primary: #fef2f2;
    --text-secondary: #fca5a5;
    --text-muted: #b91c1c;
    --border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="crimson"] body::before,
[data-theme="crimson"] body::after,
[data-theme="crimson"] .app-wrapper::before,
[data-theme="crimson"] .app-wrapper::after {
    display: none;
}

[data-theme="crimson"] .card::before {
    display: none;
}

[data-theme="crimson"] .chat-messages::before {
    display: none;
}

/* Lavender Dream Theme (Premium) */
[data-theme="lavender-dream"] {
    --bg-primary: #1a1024;
    --bg-secondary: #221430;
    --bg-card: rgba(26, 16, 36, 0.75);
    --bg-input: rgba(34, 20, 48, 0.6);
    --purple-primary: #8b5cf6;
    --purple-accent: #a78bfa;
    --purple-highlight: #c4b5fd;
    --purple-dark: #5b21b6;
    --text-primary: #ede9fe;
    --text-secondary: #c4b5fd;
    --text-muted: #7c3aed;
    --border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="lavender-dream"] body::before,
[data-theme="lavender-dream"] body::after,
[data-theme="lavender-dream"] .app-wrapper::before,
[data-theme="lavender-dream"] .app-wrapper::after {
    display: none;
}

[data-theme="lavender-dream"] .card::before {
    display: none;
}

[data-theme="lavender-dream"] .chat-messages::before {
    display: none;
}

/* ═══════════════════════════════════════════════════ */
/* Themed Cursors                                      */
/* ═══════════════════════════════════════════════════ */

/* SVG cursor generator — 7 types per theme:
   default (arrow), pointer (hand), text (I-beam),
   not-allowed (circle-slash), grab (open hand), grabbing (closed fist), move (4-arrows) */

/* Dark theme (default) — #7c3aed / #a78bfa */
*, *::before, *::after,
[data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%237c3aed' stroke='%23a78bfa' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="dark"] a, [data-theme="dark"] button:not(:disabled), [data-theme="dark"] [role="button"],
[data-theme="dark"] .clickable-user, [data-theme="dark"] .channel-link,
[data-theme="dark"] .nav-link, [data-theme="dark"] label[style*="cursor"],
body a, body button:not(:disabled), body [role="button"], body .clickable-user,
body .channel-link, body .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%237c3aed' stroke='%23a78bfa' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="dark"] input[type="text"], [data-theme="dark"] textarea, [data-theme="dark"] [contenteditable],
body input[type="text"], body textarea, body [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%237c3aed' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="dark"] [disabled], [data-theme="dark"] button:disabled, [data-theme="dark"] .theme-card.locked,
body [disabled], body button:disabled, body .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%237c3aed' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%23a78bfa' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="dark"] .draggable, [data-theme="dark"] .screen-share-viewer,
body .draggable, body .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%237c3aed' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="dark"] .draggable:active, [data-theme="dark"] .screen-share-viewer:active,
body .draggable:active, body .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%237c3aed' stroke='%23a78bfa' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%23a78bfa' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="dark"] .movable,
body .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%237c3aed' stroke='%23a78bfa' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Light theme — #6d28d9 / #7c3aed */
[data-theme="light"] *, [data-theme="light"] *::before, [data-theme="light"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%236d28d9' stroke='%237c3aed' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="light"] a, [data-theme="light"] button:not(:disabled), [data-theme="light"] [role="button"],
[data-theme="light"] .clickable-user, [data-theme="light"] .channel-link, [data-theme="light"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%236d28d9' stroke='%237c3aed' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="light"] input[type="text"], [data-theme="light"] textarea, [data-theme="light"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%236d28d9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="light"] [disabled], [data-theme="light"] button:disabled, [data-theme="light"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%236d28d9' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%237c3aed' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="light"] .draggable, [data-theme="light"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%236d28d9' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="light"] .draggable:active, [data-theme="light"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%236d28d9' stroke='%237c3aed' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%237c3aed' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="light"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%236d28d9' stroke='%237c3aed' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Midnight theme — #3b82f6 / #60a5fa */
[data-theme="midnight"] *, [data-theme="midnight"] *::before, [data-theme="midnight"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%233b82f6' stroke='%2360a5fa' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="midnight"] a, [data-theme="midnight"] button:not(:disabled), [data-theme="midnight"] [role="button"],
[data-theme="midnight"] .clickable-user, [data-theme="midnight"] .channel-link, [data-theme="midnight"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%233b82f6' stroke='%2360a5fa' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="midnight"] input[type="text"], [data-theme="midnight"] textarea, [data-theme="midnight"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%233b82f6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="midnight"] [disabled], [data-theme="midnight"] button:disabled, [data-theme="midnight"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%233b82f6' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%2360a5fa' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="midnight"] .draggable, [data-theme="midnight"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%233b82f6' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="midnight"] .draggable:active, [data-theme="midnight"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%233b82f6' stroke='%2360a5fa' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%2360a5fa' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="midnight"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%233b82f6' stroke='%2360a5fa' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Forest theme — #10b981 / #34d399 */
[data-theme="forest"] *, [data-theme="forest"] *::before, [data-theme="forest"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%2310b981' stroke='%2334d399' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="forest"] a, [data-theme="forest"] button:not(:disabled), [data-theme="forest"] [role="button"],
[data-theme="forest"] .clickable-user, [data-theme="forest"] .channel-link, [data-theme="forest"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%2310b981' stroke='%2334d399' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="forest"] input[type="text"], [data-theme="forest"] textarea, [data-theme="forest"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%2310b981' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="forest"] [disabled], [data-theme="forest"] button:disabled, [data-theme="forest"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%2310b981' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%2334d399' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="forest"] .draggable, [data-theme="forest"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%2310b981' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="forest"] .draggable:active, [data-theme="forest"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%2310b981' stroke='%2334d399' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%2334d399' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="forest"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%2310b981' stroke='%2334d399' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Sunset theme — #f59e0b / #fbbf24 */
[data-theme="sunset"] *, [data-theme="sunset"] *::before, [data-theme="sunset"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%23f59e0b' stroke='%23fbbf24' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="sunset"] a, [data-theme="sunset"] button:not(:disabled), [data-theme="sunset"] [role="button"],
[data-theme="sunset"] .clickable-user, [data-theme="sunset"] .channel-link, [data-theme="sunset"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%23f59e0b' stroke='%23fbbf24' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="sunset"] input[type="text"], [data-theme="sunset"] textarea, [data-theme="sunset"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%23f59e0b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="sunset"] [disabled], [data-theme="sunset"] button:disabled, [data-theme="sunset"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23f59e0b' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%23fbbf24' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="sunset"] .draggable, [data-theme="sunset"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%23f59e0b' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="sunset"] .draggable:active, [data-theme="sunset"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%23f59e0b' stroke='%23fbbf24' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%23fbbf24' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="sunset"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%23f59e0b' stroke='%23fbbf24' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Galaxy theme — #7c3aed / #c084fc */
[data-theme="galaxy"] *, [data-theme="galaxy"] *::before, [data-theme="galaxy"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%237c3aed' stroke='%23c084fc' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="galaxy"] a, [data-theme="galaxy"] button:not(:disabled), [data-theme="galaxy"] [role="button"],
[data-theme="galaxy"] .clickable-user, [data-theme="galaxy"] .channel-link, [data-theme="galaxy"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%237c3aed' stroke='%23c084fc' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="galaxy"] input[type="text"], [data-theme="galaxy"] textarea, [data-theme="galaxy"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%237c3aed' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="galaxy"] [disabled], [data-theme="galaxy"] button:disabled, [data-theme="galaxy"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%237c3aed' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%23c084fc' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="galaxy"] .draggable, [data-theme="galaxy"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%237c3aed' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="galaxy"] .draggable:active, [data-theme="galaxy"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%237c3aed' stroke='%23c084fc' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%23c084fc' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="galaxy"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%237c3aed' stroke='%23c084fc' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Cherry Blossom theme — #ec4899 / #f472b6 */
[data-theme="cherry-blossom"] *, [data-theme="cherry-blossom"] *::before, [data-theme="cherry-blossom"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%23ec4899' stroke='%23f472b6' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="cherry-blossom"] a, [data-theme="cherry-blossom"] button:not(:disabled), [data-theme="cherry-blossom"] [role="button"],
[data-theme="cherry-blossom"] .clickable-user, [data-theme="cherry-blossom"] .channel-link, [data-theme="cherry-blossom"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%23ec4899' stroke='%23f472b6' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="cherry-blossom"] input[type="text"], [data-theme="cherry-blossom"] textarea, [data-theme="cherry-blossom"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%23ec4899' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="cherry-blossom"] [disabled], [data-theme="cherry-blossom"] button:disabled, [data-theme="cherry-blossom"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23ec4899' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%23f472b6' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="cherry-blossom"] .draggable, [data-theme="cherry-blossom"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%23ec4899' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="cherry-blossom"] .draggable:active, [data-theme="cherry-blossom"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%23ec4899' stroke='%23f472b6' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%23f472b6' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="cherry-blossom"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%23ec4899' stroke='%23f472b6' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Ocean Depths theme — #0891b2 / #22d3ee */
[data-theme="ocean-depths"] *, [data-theme="ocean-depths"] *::before, [data-theme="ocean-depths"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%230891b2' stroke='%2322d3ee' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="ocean-depths"] a, [data-theme="ocean-depths"] button:not(:disabled), [data-theme="ocean-depths"] [role="button"],
[data-theme="ocean-depths"] .clickable-user, [data-theme="ocean-depths"] .channel-link, [data-theme="ocean-depths"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%230891b2' stroke='%2322d3ee' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="ocean-depths"] input[type="text"], [data-theme="ocean-depths"] textarea, [data-theme="ocean-depths"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%230891b2' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="ocean-depths"] [disabled], [data-theme="ocean-depths"] button:disabled, [data-theme="ocean-depths"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%230891b2' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%2322d3ee' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="ocean-depths"] .draggable, [data-theme="ocean-depths"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%230891b2' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="ocean-depths"] .draggable:active, [data-theme="ocean-depths"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%230891b2' stroke='%2322d3ee' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%2322d3ee' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="ocean-depths"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%230891b2' stroke='%2322d3ee' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Crimson theme — #dc2626 / #f87171 */
[data-theme="crimson"] *, [data-theme="crimson"] *::before, [data-theme="crimson"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%23dc2626' stroke='%23f87171' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="crimson"] a, [data-theme="crimson"] button:not(:disabled), [data-theme="crimson"] [role="button"],
[data-theme="crimson"] .clickable-user, [data-theme="crimson"] .channel-link, [data-theme="crimson"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%23dc2626' stroke='%23f87171' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="crimson"] input[type="text"], [data-theme="crimson"] textarea, [data-theme="crimson"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%23dc2626' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="crimson"] [disabled], [data-theme="crimson"] button:disabled, [data-theme="crimson"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23dc2626' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%23f87171' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="crimson"] .draggable, [data-theme="crimson"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%23dc2626' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="crimson"] .draggable:active, [data-theme="crimson"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%23dc2626' stroke='%23f87171' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%23f87171' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="crimson"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%23dc2626' stroke='%23f87171' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* Lavender Dream theme — #8b5cf6 / #a78bfa */
[data-theme="lavender-dream"] *, [data-theme="lavender-dream"] *::before, [data-theme="lavender-dream"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 0.5L1.5 16.5L5.5 12.5L9 18L11.5 17L8 11L13 11Z' fill='%238b5cf6' stroke='%23a78bfa' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default;
}
[data-theme="lavender-dream"] a, [data-theme="lavender-dream"] button:not(:disabled), [data-theme="lavender-dream"] [role="button"],
[data-theme="lavender-dream"] .clickable-user, [data-theme="lavender-dream"] .channel-link, [data-theme="lavender-dream"] .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5.5 0.5C5.5 0.5 5.5 6.5 5.5 8.5C4 8.5 2.5 8.5 2.5 8.5L10 18L10 11.5L15 11.5Z' fill='%238b5cf6' stroke='%23a78bfa' stroke-width='1.2'/%3E%3C/svg%3E") 6 1, pointer;
}
[data-theme="lavender-dream"] input[type="text"], [data-theme="lavender-dream"] textarea, [data-theme="lavender-dream"] [contenteditable] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M2.5 1H7.5M5 1V15M2.5 15H7.5' fill='none' stroke='%238b5cf6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 5 8, text;
}
[data-theme="lavender-dream"] [disabled], [data-theme="lavender-dream"] button:disabled, [data-theme="lavender-dream"] .theme-card.locked {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%238b5cf6' stroke-width='1.5'/%3E%3Cline x1='3.5' y1='3.5' x2='12.5' y2='12.5' stroke='%23a78bfa' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, not-allowed;
}
[data-theme="lavender-dream"] .draggable, [data-theme="lavender-dream"] .screen-share-viewer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C4 1.5 3 2 2.5 3C2 4 2 5 2 5.5L2 7C1.5 7 1 7 1 7.5L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L12 6L12 4C12 3 11.5 2 10 1.5C9.5 1.5 9 1.5 8.5 2L8.5 3C8 2 7 1.5 6 1.5L5 1.5Z' fill='none' stroke='%238b5cf6' stroke-width='1.2'/%3E%3C/svg%3E") 8 8, grab;
}
[data-theme="lavender-dream"] .draggable:active, [data-theme="lavender-dream"] .screen-share-viewer:active {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5C2 5 1 5.5 1 7L1 12C1 14 3 15 5 15L11 15C13 15 15 14 15 12L15 8C15 7 14 6 13 6L3 6Z' fill='%238b5cf6' stroke='%23a78bfa' stroke-width='1.2'/%3E%3Cpath d='M3 6L3 4M6 6L6 3M9 6L9 3M12 6L12 4' stroke='%23a78bfa' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, grabbing;
}
[data-theme="lavender-dream"] .movable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L10 3.5H9V7H13V6L15 8L13 10V9H9V13H10L8 15L6 13H7V9H3V10L1 8L3 6V7H7V3.5H6Z' fill='%238b5cf6' stroke='%23a78bfa' stroke-width='0.5'/%3E%3C/svg%3E") 8 8, move;
}

/* ═══════════════════════════════════════════════════ */
/* Theme Picker Grid (Settings)                        */
/* ═══════════════════════════════════════════════════ */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.theme-card {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    background: var(--bg-input);
}

.theme-card:hover {
    border-color: var(--purple-accent);
    transform: translateY(-2px);
}

.theme-card.active {
    border-color: var(--purple-primary);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.theme-card-preview {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.theme-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Premium theme lock */
.theme-card.locked {
    opacity: 0.6;
    position: relative;
}

.theme-card.locked::after {
    content: '\1F512 Premium';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--purple-accent);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════ */
/* Banner Preset Animations                            */
/* ═══════════════════════════════════════════════════ */

/* Aurora: multi-color northern lights with hue shifting */
.banner-aurora {
    background: linear-gradient(135deg, #0a2a2e, #1a0a4e, #0a3a3e, #2a0a5e, #0a2a3e);
    background-size: 500% 500%;
    animation: bannerAurora 8s ease infinite;
}

@keyframes bannerAurora {
    0% { background-position: 0% 0%; filter: hue-rotate(0deg); }
    25% { background-position: 100% 50%; filter: hue-rotate(30deg); }
    50% { background-position: 50% 100%; filter: hue-rotate(60deg); }
    75% { background-position: 0% 50%; filter: hue-rotate(30deg); }
    100% { background-position: 0% 0%; filter: hue-rotate(0deg); }
}

/* Sunset: warm gradient with radial glow */
.banner-sunset {
    background:
        radial-gradient(ellipse at 30% 80%, rgba(255,120,50,0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(255,60,100,0.4) 0%, transparent 50%),
        linear-gradient(180deg, #1a0520, #3d0a1e, #5a2000, #ff8c40);
    background-size: 100% 100%;
    animation: bannerSunset 6s ease-in-out infinite alternate;
}

@keyframes bannerSunset {
    0% { filter: brightness(0.8) saturate(1.2); }
    50% { filter: brightness(1.1) saturate(1.5); }
    100% { filter: brightness(0.8) saturate(1.2); }
}

/* Ocean: wave-like horizontal animation with multiple layers */
.banner-ocean {
    background:
        linear-gradient(90deg, transparent 0%, rgba(0,180,220,0.3) 25%, transparent 50%, rgba(0,100,200,0.3) 75%, transparent 100%),
        linear-gradient(180deg, #020820, #0a1e3d, #0a3a5a, #064a6e);
    background-size: 200% 100%, 100% 100%;
    animation: bannerOcean 4s linear infinite;
}

@keyframes bannerOcean {
    0% { background-position: 0% 0%, 0% 0%; }
    100% { background-position: 200% 0%, 0% 0%; }
}

/* Neon: pulsing glow with color cycling */
.banner-neon {
    background: linear-gradient(135deg, #0a0010, #1a002e, #0a0020);
    box-shadow: inset 0 0 40px rgba(180,0,255,0.3), inset 0 0 80px rgba(0,200,255,0.15);
    animation: bannerNeon 3s ease-in-out infinite;
}

@keyframes bannerNeon {
    0% { box-shadow: inset 0 0 40px rgba(180,0,255,0.3), inset 0 0 80px rgba(0,200,255,0.15); filter: hue-rotate(0deg); }
    33% { box-shadow: inset 0 0 60px rgba(255,0,150,0.4), inset 0 0 100px rgba(0,255,200,0.2); filter: hue-rotate(40deg); }
    66% { box-shadow: inset 0 0 50px rgba(0,150,255,0.35), inset 0 0 90px rgba(200,0,255,0.2); filter: hue-rotate(-30deg); }
    100% { box-shadow: inset 0 0 40px rgba(180,0,255,0.3), inset 0 0 80px rgba(0,200,255,0.15); filter: hue-rotate(0deg); }
}

/* Fire: flickering ember effect with warm colors */
.banner-fire {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255,100,0,0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(255,50,0,0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 90%, rgba(255,180,0,0.3) 0%, transparent 40%),
        linear-gradient(0deg, #3d1500, #2a0a00, #1a0500, #0a0200);
    animation: bannerFire 0.8s ease-in-out infinite alternate;
}

@keyframes bannerFire {
    0% { filter: brightness(0.9); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
    25% { filter: brightness(1.1); }
    50% { filter: brightness(0.95); background-size: 100% 100%, 110% 110%, 95% 95%, 100% 100%; }
    75% { filter: brightness(1.05); }
    100% { filter: brightness(1); background-size: 100% 100%, 100% 100%, 105% 105%, 100% 100%; }
}

/* Banner preset picker in settings */
.banner-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.banner-preset-option {
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    overflow: hidden;
}

.banner-preset-option input[type="radio"] {
    display: none;
}

.banner-preset-option input[type="radio"]:checked + .banner-preset-preview {
    outline: 2px solid var(--purple-primary);
    outline-offset: -2px;
}

.banner-preset-preview {
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    overflow: hidden;
}

.banner-preset-option:hover {
    border-color: var(--purple-accent);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════ */
/* Voice Connected Bar                                 */
/* ═══════════════════════════════════════════════════ */

.voice-bar {
    padding: 10px 16px;
    background: rgba(16, 185, 129, 0.1);
    border-top: 1px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voice-bar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.voice-bar-status {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.voice-bar-channel {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.voice-bar-controls {
    display: flex;
    gap: 4px;
}

.voice-bar-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.voice-bar-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
}

.voice-bar-btn.active {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.voice-bar-btn.disconnect {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

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

/* Voice channel in chat sidebar */
.channel-link.voice-channel::before {
    content: '\1F50A ';
    color: var(--text-muted);
}

.voice-channel-users {
    padding: 2px 16px 4px 32px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.voice-channel-user {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.voice-channel-user .voice-user-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

/* ═══════════════════════════════════════════════════ */
/* Sound Toggle                                        */
/* ═══════════════════════════════════════════════════ */

.sound-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.sound-toggle:hover {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════ */
/* Incoming Call Modal                                 */
/* ═══════════════════════════════════════════════════ */

.call-modal {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: callSlideIn 0.3s ease-out;
    min-width: 280px;
}

@keyframes callSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.call-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.call-modal-info h4 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.call-modal-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

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

.call-accept-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--success);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.call-accept-btn:hover {
    background: #059669;
}

.call-decline-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.call-decline-btn:hover {
    background: #dc2626;
}

@keyframes callRing {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
}

.call-ringing {
    animation: callRing 1s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════ */
/* Screen Share                                        */
/* ═══════════════════════════════════════════════════ */

.screen-share-viewer {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1500;
    width: 640px;
    height: 360px;
    background: #000;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    resize: both;
    min-width: 320px;
    min-height: 180px;
}

.screen-share-viewer.screen-share-fullscreen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    resize: none;
}

.screen-share-viewer video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.screen-share-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.screen-share-viewer:hover .screen-share-controls {
    opacity: 1;
}

/* Screen share button */
.screen-share-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.screen-share-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    color: var(--text-primary);
    border-color: var(--purple-primary);
}

.screen-share-btn.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border-color: var(--success);
}

/* DM Screen Share button */
.dm-screen-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.dm-screen-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    color: var(--purple-accent);
}

.dm-screen-btn.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

/* ═══════════════════════════════════════════════════ */
/* Voice Panel Overlay                                 */
/* ═══════════════════════════════════════════════════ */

.voice-panel-overlay {
    position: fixed;
    top: var(--header-height);
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 500;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    animation: voicePanelSlideIn 0.25s ease-out;
}

@keyframes voicePanelSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.voice-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.voice-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.voice-panel-icon {
    font-size: 1.1rem;
}

.voice-panel-controls {
    display: flex;
    gap: 6px;
}

.voice-panel-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.voice-panel-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
}

.voice-panel-btn.vp-active {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.voice-panel-btn.vp-disconnect {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.voice-panel-btn.vp-disconnect:hover {
    background: rgba(239, 68, 68, 0.3);
}

.voice-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
    gap: 16px;
}

/* Screen share area in voice panel */
.voice-panel-screens {
    flex: 1;
    min-height: 0;
}

.vp-screen-primary {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.vp-screen-primary video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.vp-screen-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.vp-screen-thumb {
    width: 160px;
    height: 90px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.vp-screen-thumb:hover {
    border-color: var(--purple-primary);
}

.vp-screen-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Participant grid */
.voice-panel-participants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    flex-shrink: 0;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.vp-participant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.2s;
}

.vp-participant.vp-speaking {
    border-color: var(--success);
    animation: vpSpeakPulse 1.2s ease-in-out infinite;
}

@keyframes vpSpeakPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 12px 4px rgba(16, 185, 129, 0.2); }
}

.vp-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-highlight));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    overflow: hidden;
}

.vp-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.vp-name {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vp-status-icons {
    display: flex;
    gap: 2px;
    font-size: 0.7rem;
}

.vp-status-icon {
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════ */
/* Quality Picker Modal                                */
/* ═══════════════════════════════════════════════════ */

.quality-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseCtxFadeIn 0.15s ease-out;
}

.quality-picker-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.quality-picker-modal h3 {
    margin-bottom: 16px;
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-primary);
}

.quality-picker-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.quality-picker-btn {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quality-picker-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: var(--purple-primary);
    color: var(--purple-accent);
}

.quality-picker-cancel {
    width: 100%;
    padding: 10px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.quality-picker-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

/* DM Call button */
.dm-call-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.dm-call-btn:hover {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

/* ═══════════════════════════════════════════════════ */
/* 2FA Setup                                           */
/* ═══════════════════════════════════════════════════ */

.twofa-setup {
    text-align: center;
}

.twofa-qr {
    margin: 16px auto;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    display: inline-block;
}

.twofa-qr img {
    display: block;
}

.twofa-secret {
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85rem;
    background: var(--bg-input);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 8px 0;
    word-break: break-all;
}

.twofa-verify-input {
    width: 200px;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 8px;
    font-family: 'Cascadia Code', monospace;
}

/* Unread DM badge on nav */
.nav-badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: auto;
    position: relative;
}

.nav-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════ */
/* File Attachment Styles                              */
/* ═══════════════════════════════════════════════════ */

.chat-file-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 4px;
    max-width: 400px;
}

.chat-file-icon {
    font-size: 1.5rem;
}

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

.chat-file-name {
    font-size: 0.85rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.chat-file-download {
    color: var(--purple-accent);
    text-decoration: none;
    font-size: 0.85rem;
}

.chat-file-download:hover {
    text-decoration: underline;
}

.chat-image-preview {
    max-width: 400px;
    max-height: 300px;
    border-radius: 8px;
    margin-top: 4px;
    cursor: pointer;
}

.chat-image-preview:hover {
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════ */
/* Settings Badges Section                             */
/* ═══════════════════════════════════════════════════ */

.settings-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

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

.settings-badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.settings-badge-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.settings-badge-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-badge-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════ */
/* Files Tab Page                                      */
/* ═══════════════════════════════════════════════════ */

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

.file-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.file-card-icon {
    font-size: 2rem;
}

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

.file-card-name {
    font-weight: 500;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}