:root {
    --bg-base: #09090b;
    --bg-panel: #121214;
    --bg-hover: #18181b;
    --border-color: #27272a;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --positive: #10b981;
    --negative: #ef4444;
    --warning: #f59e0b;
    --idle: #fbbf24;
    --dnd: #ef4444;
    --offline: #64748b;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-main);
    min-height: 100vh;
    font-size: 14px;
}

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

.app-container { display: flex; height: 100vh; }

/* --- SIDEBAR --- */
.sidebar {
    width: 250px;
    background-color: var(--bg-base);
    border-right: 1px solid var(--border-color);
    display: flex; flex-direction: column; height: 100%; flex-shrink: 0;
}
.sidebar-header { padding: 24px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}
.logo h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px;}

.server-selector {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; margin: 0 16px;
    background-color: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 12px; cursor: pointer; transition: background 0.2s;
}
.server-selector:hover { background-color: var(--bg-hover); }
.server-selector img { width: 36px; height: 36px; border-radius: 10px; }
.server-info-min { display: flex; flex-direction: column; }
.server-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.server-name { font-weight: 600; font-size: 0.95rem; }

.sidebar-nav { flex: 1; padding: 24px 16px; }
.nav-section { margin-bottom: 24px; }
.nav-title { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; padding-left: 8px; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; color: var(--text-muted);
    text-decoration: none; border-radius: 8px; transition: all 0.2s; font-size: 0.95rem; font-weight: 500;
}
.nav-item:hover { color: var(--text-main); background-color: var(--bg-hover); }
.nav-item.active { color: var(--text-main); background-color: var(--bg-panel); border: 1px solid var(--border-color); }

/* --- MAIN CONTENT --- */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
    height: 70px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; background-color: rgba(9, 9, 11, 0.8);
    backdrop-filter: blur(12px); z-index: 10;
}
.breadcrumb { color: var(--text-muted); font-size: 0.95rem; font-weight: 500;}
.breadcrumb .separator { margin: 0 10px; opacity: 0.5; }
.active-crumb { color: var(--text-main); }

.status-indicator {
    display: flex; align-items: center; gap: 8px;
    background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--positive); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
}
.pulse-dot {
    width: 8px; height: 8px; background-color: var(--positive);
    border-radius: 50%; box-shadow: 0 0 8px var(--positive);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

.content-body { flex: 1; overflow-y: auto; padding: 40px; }
.page-content { display: block; }

/* --- HEADERS & FILTERS --- */
.greeting-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.greeting h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.5px;}
.greeting p { color: var(--text-muted); font-size: 1rem;}

.time-filters { display: flex; gap: 8px; background-color: var(--bg-panel); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
.filter-btn {
    background: transparent; border: none; color: var(--text-muted);
    padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.filter-btn:hover { color: var(--text-main); }
.filter-btn.active { background-color: var(--bg-hover); color: var(--text-main); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* --- PANELS --- */
.panel { background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.panel:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); border-color: #3f3f46; }

/* --- TOP DASHBOARD GRID --- */
.top-dashboard-grid { display: grid; grid-template-columns: 2.5fr 1fr; gap: 24px; margin-bottom: 24px; }

.chart-header { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-start; }
.chart-title { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.chart-value { font-size: 2.5rem; font-weight: 800; margin-bottom: 4px; letter-spacing: -1px;}
.chart-change.positive { color: var(--positive); font-size: 0.9rem; font-weight: 500;}

.chart-legend { display: flex; gap: 16px; align-items: flex-start; padding-top: 6px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.main-chart-container { height: 280px; position: relative; width: 100%; }

/* --- DONUT PANEL & SERVER HEALTH --- */
.donut-panel { display: flex; flex-direction: column; }
.donut-container { position: relative; height: 180px; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }

.server-health-stats { display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 20px; margin-top: auto; }
.health-item { display: flex; flex-direction: column; gap: 4px; width: 30%; }
.health-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.health-val { font-size: 1.2rem; font-weight: 700; }

.progress-bar { width: 100%; height: 6px; background-color: var(--border-color); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.progress-fill { height: 100%; background-color: #f472b6; width: 0%; transition: width 0.5s ease; }

.bot-stats { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border-color); font-size: 0.8rem; color: var(--text-muted); }
.bot-stat-item strong { color: var(--text-main); font-weight: 600; }

/* --- SECTIONS --- */
.section-title { font-size: 1.1rem; font-weight: 600; margin-top: 10px; margin-bottom: 16px; color: var(--text-main); letter-spacing: -0.2px; }

/* --- STATS GRIDS --- */
.stats-grid { display: grid; gap: 24px; margin-bottom: 32px; }
.stats-growth { grid-template-columns: repeat(3, 1fr); }
.stats-engagement { grid-template-columns: repeat(4, 1fr); }

.stat-card { position: relative; overflow: hidden; padding: 20px;}
.stat-title { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.5px;}
.stat-card .stat-change { font-size: 0.85rem; font-weight: 500;}

/* --- TABLES GRID --- */
.tables-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.table-header { margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.table-title { font-weight: 600; font-size: 1rem; color: var(--text-main); }
.table-content { display: flex; flex-direction: column; gap: 8px; }

.table-row {
    display: flex; align-items: center; padding: 10px 12px;
    background-color: var(--bg-hover); border-radius: 8px; font-size: 0.85rem; border: 1px solid transparent; transition: all 0.3s ease;
}
.table-row:hover { border-color: var(--border-color); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

.col-channel { flex: 2; display: flex; align-items: center; gap: 8px; }
.col-val { flex: 1; text-align: left; font-weight: 600;}
.col-act { flex: 1; text-align: right; color: var(--text-muted); font-weight: 500;}

.channel-tag {
    background-color: rgba(139, 92, 246, 0.1); color: #c4b5fd;
    padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(139, 92, 246, 0.2);
}
.channel-tag::before { content: "#"; color: #8b5cf6; opacity: 0.8; }
.voice-tag::before { content: "🔊"; opacity: 0.8; font-size: 0.9em; }

.recent-user-row { display: flex; align-items: center; gap: 12px; }
.recent-user-row img { width: 28px; height: 28px; border-radius: 50%; }
.recent-user-info { display: flex; flex-direction: column; }
.recent-user-name { font-weight: 600; font-size: 0.85rem; }
.recent-user-action { font-size: 0.75rem; color: var(--text-muted); }

/* --- LEADERBOARD PAGE --- */
.lb-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.lb-categories { display: flex; gap: 8px; }
.lb-cat-btn {
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-color);
    background: var(--bg-panel); color: var(--text-muted); font-size: 0.85rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'Inter';
}
.lb-cat-btn:hover { color: var(--text-main); border-color: #3f3f46; }
.lb-cat-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

.lb-time-btn {
    background: transparent; border: none; color: var(--text-muted);
    padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.lb-time-btn:hover { color: var(--text-main); }
.lb-time-btn.active { background-color: var(--bg-hover); color: var(--text-main); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.lb-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.podium-card {
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px;
    padding: 24px; text-align: center; position: relative; overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.podium-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.podium-card.gold { border-color: rgba(251,191,36,0.4); }
.podium-card.gold .podium-rank { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.podium-card.silver { border-color: rgba(148,163,184,0.3); }
.podium-card.silver .podium-rank { background: linear-gradient(135deg, #94a3b8, #64748b); }
.podium-card.bronze { border-color: rgba(217,119,6,0.3); }
.podium-card.bronze .podium-rank { background: linear-gradient(135deg, #d97706, #b45309); }

.podium-rank {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem; color: white;
}
.podium-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; border: 3px solid var(--border-color); }
.podium-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.podium-score { font-size: 1.5rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.podium-details { display: flex; justify-content: center; gap: 16px; font-size: 0.75rem; color: var(--text-muted); }
.podium-detail-val { font-weight: 600; color: var(--text-main); }

.lb-list-panel { padding: 0; overflow: hidden; }
.lb-row {
    display: flex; align-items: center; padding: 12px 24px; gap: 16px;
    border-bottom: 1px solid var(--border-color); transition: background 0.2s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--bg-hover); }
.lb-rank { width: 32px; font-weight: 800; font-size: 0.9rem; color: var(--text-muted); text-align: center; }
.lb-row img { width: 36px; height: 36px; border-radius: 50%; }
.lb-name { flex: 1; font-weight: 600; font-size: 0.9rem; }
.lb-stat { width: 80px; text-align: right; font-size: 0.8rem; color: var(--text-muted); }
.lb-stat-main { width: 80px; text-align: right; font-weight: 700; font-size: 1rem; }
.lb-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.95rem; }

/* --- INPUTS --- */
.premium-input {
    background-color: var(--bg-panel); color: var(--text-main); border: 1px solid var(--border-color);
    padding: 10px 16px; border-radius: 8px; font-family: 'Inter'; font-size: 0.9rem; outline: none;
    transition: border-color 0.2s;
}
.premium-input:focus { border-color: var(--accent); }

/* --- MODERATION PAGE --- */
.mod-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; }
.mod-form-panel { display: flex; flex-direction: column; gap: 20px; }
.mod-form-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }

.mod-field { display: flex; flex-direction: column; gap: 8px; }
.mod-field label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }

.premium-input.full, .premium-select.full { width: 100%; }

.mod-user-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-hover); }
.mod-user-card.hidden { display: none; }
.mod-card-banner { height: 60px; background: linear-gradient(135deg, var(--accent), #8b5cf6); }
.mod-card-body { padding: 0 16px 16px; }
.mod-card-avatar { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--bg-hover); margin-top: -28px; }
.mod-card-info { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.mod-card-names { display: flex; flex-direction: column; }
.mod-card-display { font-weight: 700; font-size: 1.05rem; }
.mod-card-username { font-size: 0.8rem; color: var(--text-muted); }
.mod-card-details { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.mod-card-detail { display: flex; justify-content: space-between; align-items: center; }
.mod-card-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.mod-card-val { font-size: 0.85rem; font-weight: 500; }
.mod-card-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.role-pill { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; border: 1px solid; opacity: 0.85; }

.mod-action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mod-action-btn {
    padding: 10px; border-radius: 8px; border: 1px solid var(--border-color);
    background: var(--bg-hover); color: var(--text-muted); font-size: 0.85rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'Inter';
}
.mod-action-btn:hover { color: var(--text-main); border-color: #3f3f46; }
.mod-action-btn.selected[data-action="timeout"] { background: rgba(251,191,36,0.15); color: var(--warning); border-color: rgba(251,191,36,0.4); }
.mod-action-btn.selected[data-action="mute"] { background: rgba(59,130,246,0.15); color: var(--accent); border-color: rgba(59,130,246,0.4); }
.mod-action-btn.selected[data-action="kick"] { background: rgba(249,115,22,0.15); color: #f97316; border-color: rgba(249,115,22,0.4); }
.mod-action-btn.selected[data-action="ban"] { background: rgba(239,68,68,0.15); color: var(--negative); border-color: rgba(239,68,68,0.4); }

.btn-execute {
    padding: 14px; border-radius: 10px; border: none;
    background: var(--accent); color: white; font-size: 0.95rem;
    font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: 'Inter';
    margin-top: 8px;
}
.btn-execute:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
.btn-execute:disabled { opacity: 0.4; cursor: not-allowed; }

.mod-log-panel { display: flex; flex-direction: column; }
.mod-log-body { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; max-height: 500px; }
.mod-log-empty { text-align: center; padding: 40px 0; font-size: 0.9rem; }

.mod-log-entry {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--bg-hover); border-radius: 8px; border: 1px solid var(--border-color);
}
.mod-log-entry img { width: 28px; height: 28px; border-radius: 50%; }
.mod-log-info { display: flex; flex-direction: column; flex: 1; }
.mod-log-text { font-size: 0.85rem; font-weight: 500; }
.mod-log-time { font-size: 0.7rem; color: var(--text-muted); }
.mod-log-badge {
    padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
}
.mod-log-badge.timeout { background: rgba(251,191,36,0.15); color: var(--warning); }
.mod-log-badge.mute { background: rgba(59,130,246,0.15); color: var(--accent); }
.mod-log-badge.kick { background: rgba(249,115,22,0.15); color: #f97316; }
.mod-log-badge.ban { background: rgba(239,68,68,0.15); color: var(--negative); }

.status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
}
.status-badge.online { background: rgba(16,185,129,0.1); color: var(--positive); }
.status-badge.idle { background: rgba(251,191,36,0.1); color: var(--idle); }
.status-badge.dnd { background: rgba(239,68,68,0.1); color: var(--dnd); }
.status-badge.offline { background: rgba(100,116,139,0.1); color: var(--offline); }

.btn { padding: 6px 12px; border-radius: 6px; border: none; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'Inter'; }
.btn:hover { transform: translateY(-1px); }
.btn-secondary { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border-color); }
.btn-danger { background: var(--negative); color: white; }

/* --- SETTINGS MODAL --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.3s; }
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content { width: 400px; max-width: 90%; background-color: var(--bg-base); border: 1px solid var(--border-color); border-radius: 16px; padding: 0; overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-panel); }
.modal-header h2 { font-size: 1.2rem; }
.icon-btn { background: transparent; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; transition: color 0.2s; }
.icon-btn:hover { color: var(--text-main); }
.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.modal-body p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.setting-group { display: flex; flex-direction: column; gap: 8px; }
.setting-group label { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.premium-select { background-color: var(--bg-panel); color: var(--text-main); border: 1px solid var(--border-color); padding: 10px; border-radius: 8px; outline: none; font-family: 'Inter'; cursor: pointer; }
.theme-colors { display: flex; gap: 12px; }
.theme-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s; }
.theme-btn:hover { transform: scale(1.1); }
.theme-btn.active { border-color: white; box-shadow: 0 0 10px rgba(255,255,255,0.5); }

.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

/* --- ANIMATIONS --- */
.animate-pop { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 1400px) {
    .stats-growth { grid-template-columns: repeat(3, 1fr); }
    .stats-engagement { grid-template-columns: repeat(2, 1fr); }
    .tables-grid-2 { grid-template-columns: 1fr; }
    .members-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .top-dashboard-grid { grid-template-columns: 1fr; }
    .stats-growth { grid-template-columns: 1fr; }
    .stats-engagement { grid-template-columns: 1fr; }
    .tables-grid-2 { grid-template-columns: 1fr; }
    .members-stats-row { grid-template-columns: 1fr; }
}