/* CORE */
:root {
    --text-main: #e6e6e6;
    --text-muted: #a1a1a1;
    --card-bg: #050505; /* Dunkleres Schwarz für die Karte */
}

/* Ersetze den oberen html, body Block hiermit: */

/* Ersetze den oberen html, body Block hiermit: */

html, body {
    margin: 0; 
    padding: 0;
    background: #000;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    
    /* NICHT MEHR "height: 100%" und "overflow: hidden" erzwingen! */
    /* HIER DIE ÄNDERUNG FÜR ZOOM: */
    min-height: 100vh; 
    overflow-x: hidden; 
    overflow-y: auto; /* Scrollen erlauben! */
}

/* OPTIONAL: Nur auf RIESIGEN Bildschirmen Scrollen verstecken, 
   aber selbst das ist beim Zoomen gefährlich. 
   Besser weglassen oder nur greifen lassen, wenn NICHT gezoomt ist. */
@media (min-width: 1280px) and (min-height: 800px) {
    html, body {
        /* Wir lassen overflow auf auto, aber setzen die Höhe fest, 
           damit es "App-artig" wirkt, solange Platz da ist. */
        height: 100vh; 
        overflow-y: auto; /* Trotzdem Scrollen erlauben, falls reingezoomt wird! */
    }
}
/* --- RESPONSIVE FIX ENDE --- */


/* Mini Charts Container für horizontale Ansicht */
.charts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Split View für Terminal und Feed */
.split-view-container {
    display: grid;
    grid-template-columns: 1fr 320px; /* Terminal nimmt den Rest, Feed ist fix 320px */
    gap: 24px;
    height: 350px; /* Feste Höhe damit es kompakt bleibt */
    margin-bottom: 24px;
}

/* Anpassung damit Terminal und Feed die Höhe füllen */
.terminal, .activity-feed {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.terminal-body, #activity-list {
    flex: 1;
    overflow-y: auto;
}

/* Hintergrund */
.bg-obsidian { 
    position:fixed; 
    inset:0; 
    background: radial-gradient(1200px circle at 35% 30%, #0a0a0a 0%, #000 60%); 
    z-index:-2; 
}
.bg-grid { 
    position:fixed; 
    inset:0; 
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px; 
    z-index:-1; 
    opacity:0.4; 
}
#spotlight { 
    transition: background 0.12s ease; 
}

/* Navbar MITTIG */
.glass-nav { 
    background:rgba(0,0,0,0.75); 
    backdrop-filter: blur(12px); 
    border-bottom:1px solid rgba(255,255,255,0.08); 
}
.nav-link, .nav-link-active { 
    color:#9aa0a6; 
    text-decoration:none; 
    transition:0.2s; 
}
.nav-link-active { 
    color:#fff; 
    font-weight:600; 
}
.nav-link:hover { 
    color:#fff; 
}

/* Discord Card COMPACT */
.discord-card-compact { 
    position:relative; 
    background:var(--card-bg); 
    border-radius:10px; 
    box-shadow:0 16px 40px rgba(0,0,0,0.8); 
    overflow:hidden; 
}
.discord-card-compact::before { 
    content:''; 
    position:absolute; 
    inset:-50%; 
    background:conic-gradient(transparent, rgba(255,255,255,0.18), transparent 28%); 
    animation:borderFlow 4s linear infinite; 
    z-index:0; 
}
.discord-card-inner-compact { 
    position:relative; 
    margin:1.5px; 
    border-radius:9px; 
    background:var(--card-bg); 
    z-index:1; 
}
@keyframes borderFlow {
    100% {
        transform:rotate(360deg);
    }
}

.card-header-compact { 
    height:80px; 
    background:var(--card-bg); 
    position:relative; 
}
.card-avatar-slot-compact { 
    position:absolute; 
    top:80px; 
    left:16px; 
    transform: translateY(-50%); 
    z-index:10; 
}

.card-sweep-overlay-compact { 
    position:absolute; 
    inset:0; 
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); 
    transform: translateY(-130%); 
    pointer-events:none; 
    z-index:20; 
    animation: sweepRun 10s ease-in-out infinite; 
}
@keyframes sweepRun { 
    0% {
        transform: translateY(-130%);
    } 
    6% {
        transform: translateY(130%);
    } 
    100% {
        transform: translateY(130%);
    } 
}

.card-body-compact { 
    padding:44px 14px 14px 14px; 
}
.role-pill-black { 
    display:inline-flex; 
    align-items:center; 
    gap:4px; 
    background:#1a1a1a; 
    border:1px solid #252525; 
    padding:3px 8px; 
    border-radius:5px; 
    font-size:0.65rem; 
    color:#cfcfcf; 
    margin-right:4px; 
    margin-bottom:4px; 
}
.role-pill-black .dot {
    width:6px; 
    height:6px; 
    border-radius:50%; 
    display:inline-block;
}

.security-box-compact { 
    margin-top:12px; 
    background:#1a1a1a; 
    border:1px solid #252525; 
    border-radius:6px; 
    padding:8px; 
    display:flex; 
    align-items:center; 
    gap:8px; 
}
.security-box-compact .icon-compact {
    width:16px; 
    height:16px; 
    background:#16a34a; 
    border-radius:3px; 
    box-shadow:0 0 8px rgba(22,163,74,0.35);
}
.security-box-compact .title-compact {
    font-size:0.75rem; 
    font-weight:700; 
    color:#fff;
}
.security-box-compact .subtitle-compact {
    font-size:0.65rem; 
    color:#9ca3af;
}

.stay-box-compact { 
    margin-top:12px; 
    padding:10px; 
    border:1px solid rgba(255,255,255,0.06); 
    border-radius:8px; 
    background: rgba(0,0,0,0.5); 
    backdrop-filter: blur(6px); 
    text-align:center; 
}
.disconnect-btn-compact { 
    margin-top:8px; 
    padding:10px; 
    border-radius:8px; 
    border:1px solid rgba(220,38,38,0.3); 
    color:#ef4444; 
    font-size:0.7rem; 
    font-weight:800; 
    letter-spacing:0.08em; 
    background: transparent; 
    transition:0.2s; 
    cursor:pointer; 
}
.disconnect-btn-compact:hover { 
    background:rgba(220,38,38,0.15); 
    color:#f87171; 
}

/* TRENNLINIE */
.separator-line { 
    width:2px; 
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0.15) 80%, transparent); 
    box-shadow: 0 0 12px rgba(255,255,255,0.2); 
    position:relative; 

    /* --- RESPONSIVE FIX START --- */
    /* Standardmäßig ausblenden auf Mobile, erst ab Desktop anzeigen */
    display: none; 
    /* --- RESPONSIVE FIX ENDE --- */
}

@media (min-width: 1024px) {
    .separator-line { display: block; }
}

/* Widgets */
.widget-box, .status-box, .chart-box, .activity-feed { 
    background: rgba(8,8,8,0.85); 
    border:1px solid rgba(255,255,255,0.06); 
    border-radius:10px; 
    padding:18px; 
    backdrop-filter: blur(10px); 
}

/* Uptime Graph */
.uptime-graph-container { 
    position:relative; 
    height:60px; 
    background:rgba(0,0,0,0.4); 
    border-radius:8px; 
    padding:8px; 
}

/* Terminal */
.terminal { 
    background: rgba(5,5,5,0.9); 
    border:1px solid rgba(255,255,255,0.08); 
    border-radius:10px; 
    overflow:hidden; 
    /* RESPONSIVE FIX: Flex Layout */
    display: flex;
    flex-direction: column;
}
.terminal-header { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    padding:8px 12px; 
    background:#0a0a0a; 
    border-bottom:1px solid rgba(255,255,255,0.08); 
}
.terminal-header .dot {
    width:10px; 
    height:10px; 
    border-radius:50%;
}
.terminal-header .red {
    background:#ef4444;
}
.terminal-header .yellow {
    background:#f59e0b;
}
.terminal-header .green {
    background:#22c55e;
}
.terminal-header .title {
    margin-left:8px; 
    font-size:0.7rem; 
    color:#9aa0a6; 
    text-transform:uppercase; 
    letter-spacing:0.15em;
}
.terminal-body { 
    padding:14px; 
    /* Höhe wird jetzt im HTML per Klasse gesteuert oder via Flex */
    /* height:240px; <-- HIER ENTFERNT FÜR FLEXIBILITÄT */
    flex: 1; /* Füllt verfügbaren Platz */
    overflow-y:auto; 
    font-family:'JetBrains Mono', monospace; 
    font-size:0.78rem; 
    color:#cfcfcf; 
}
.line { 
    margin-bottom:4px; 
}
.line .time { 
    color:#6b7280; 
    margin-right:8px; 
}
.line.info { 
    color:#93c5fd; 
}
.line.success { 
    color:#86efac; 
}
.line.error { 
    color:#fca5a5; 
}
.line.muted { 
    color:#6b7280; 
    font-style:italic; 
}

/* Notification Bell */
.notif-bell { 
    position:relative; 
    color:#9aa0a6; 
    cursor:pointer; 
    transition:0.2s; 
}
.notif-bell:hover { 
    color:#fff; 
}
.notif-badge { 
    position:absolute; 
    top:-6px; 
    right:-8px; 
    background:#ef4444; 
    color:#fff; 
    font-size:0.65rem; 
    font-weight:700; 
    padding:2px 5px; 
    border-radius:10px; 
    min-width:16px; 
    text-align:center; 
}

/* Activity Feed */
.activity-feed { 
    max-height:300px; 
}
.activity-item { 
    font-size:0.75rem; 
    padding:8px; 
    background:rgba(255,255,255,0.02); 
    border-radius:6px; 
    border-left:3px solid #3b82f6; 
}
.activity-item.success { 
    border-left-color:#22c55e; 
    color:#86efac; 
}
.activity-item.error { 
    border-left-color:#ef4444; 
    color:#fca5a5; 
}
.activity-item.muted { 
    border-left-color:#6b7280; 
    color:#9ca3af; 
}

/* Player Timeline */
#player-timeline { 
    min-height:40px; 
}
.timeline-dot { 
    width:12px; 
    height:12px; 
    border-radius:50%; 
    position:relative; 
    cursor:pointer; 
    transition:0.2s; 
}
.timeline-dot:hover { 
    transform:scale(1.3); 
}
.timeline-dot.join { 
    background:#22c55e; 
    box-shadow:0 0 8px rgba(34,197,94,0.6); 
}
.timeline-dot.leave { 
    background:#ef4444; 
    box-shadow:0 0 8px rgba(239,68,68,0.6); 
}

/* Footer Stats */
.stats-footer { 
    border-top:1px solid rgba(255,255,255,0.06); 
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3)); 
    border-radius:10px; 
    padding:14px; 
}
.stat-value { 
    font-size:1.8rem; 
    font-weight:900; 
    color:#fff; 
    margin-bottom:4px; 
}
.stat-label { 
    font-size:0.6rem; 
    font-weight:800; 
    letter-spacing:0.2em; 
    color:#9aa0a6; 
    text-transform:uppercase; 
}

/* Mini Charts Container */
.charts-mini-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 260px;
}

.mini-chart-box {
    background: rgba(8,8,8,0.85);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px;
    backdrop-filter: blur(10px);
}

.mini-chart-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.mini-chart-box canvas {
    width: 100% !important;
    height: 60px !important;
}
/* Widget Box Anpassung für Combined Chart */
.widget-box {
    background: rgba(8,8,8,0.85); 
    border: 1px solid rgba(255,255,255,0.06); 
    border-radius: 10px; 
    padding: 14px; 
    backdrop-filter: blur(10px);
}

/* Timeline extrem klein */
#player-timeline::-webkit-scrollbar { height: 2px; }
#player-timeline::-webkit-scrollbar-thumb { background: #333; }

/* Terminal */
.terminal {
    background: #050505;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
}
/* Widget Box noch kompakter */
.widget-box, .status-box {
    background: rgba(8,8,8,0.85); 
    border: 1px solid rgba(255,255,255,0.06); 
    border-radius: 8px; /* Etwas weniger Radius */
    /* Padding ist jetzt inline im HTML geregelt für mehr Kontrolle */
    backdrop-filter: blur(10px);
}

/* Terminal Schrift und Zeilenabstand verringern */
.terminal-body {
    font-size: 0.7rem; /* Kleinerer Text */
    line-height: 1.3;
}
.line {
    margin-bottom: 2px; /* Engere Zeilen */
}

/* Scrollbars noch dünner machen für die kleinen Boxen */
.terminal-body::-webkit-scrollbar, 
#player-timeline::-webkit-scrollbar,
/* FIX: Auch für Custom Scrollbar Klasse */
.custom-scrollbar::-webkit-scrollbar,
#player-list-container::-webkit-scrollbar {
    width: 4px;
    height: 2px;
}
.terminal-body::-webkit-scrollbar-thumb,
#player-timeline::-webkit-scrollbar-thumb,
/* FIX: Auch für Custom Scrollbar Klasse */
.custom-scrollbar::-webkit-scrollbar-thumb,
#player-list-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

/* 3D Tilt Container */
.perspective-container {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Light Sweep Effekt (Der Glanz) */
/* Light Sweep Effekt (Sanfter & Seltener) */
.light-sweep {
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.05) 50%, transparent); /* Deckkraft von 0.1 auf 0.05 reduziert (subtiler) */
    transform: skewX(-25deg);
    animation: sweepAnimation 15s infinite cubic-bezier(0.4, 0.0, 0.2, 1); /* VIEL LANGSAMER */
    pointer-events: none;
    z-index: 20;
}

@keyframes sweepAnimation {
    0% { left: -150%; }
    10% { left: -250%; } /* Dauer des Sweeps an sich (ca. 1.5 Sekunden) */
    100% { left: 150%; } /* Lange Pause */
}

/* Glitch Effekt Klassen */
.glitch-active {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch-active img, .glitch-active div {
    filter: contrast(200%) brightness(150%) grayscale(100%);
}

@keyframes glitch-skew {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

/* Avatar Grayscale Hover Fix */
#card-avatar {
    filter: grayscale(100%);
}
#profile-card:hover #card-avatar {
    filter: grayscale(0%);
}

/* ... existing code ... */

/* Navbar MITTIG & HOVER EFFECT */
.glass-nav { 
    background:rgba(0,0,0,0.75); 
    backdrop-filter: blur(12px); 
    border-bottom:1px solid rgba(255,255,255,0.08); 
}
.nav-link, .nav-link-active { 
    position: relative;
    color:#9aa0a6; 
    text-decoration:none; 
    transition: color 0.2s; 
    padding: 4px 0;
}
.nav-link-active { 
    color:#fff; 
    font-weight:600; 
}
.nav-link:hover { 
    color:#fff; 
}

/* Neuer Underline Effekt */
.nav-link::after, .nav-link-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #fff; /* Oder deine Akzentfarbe z.B. #ef4444 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* Bei Active oder Hover wird der Strich breit */
.nav-link:hover::after, .nav-link-active::after {
    width: 100%;
}

/* ... existing code ... */

/* 
   Füge das GANZ OBEN in der Datei oder vor dem .overview-card Block ein.
   Das definiert die Variable für die Animation.
*/
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ... existing code ... */

/* NEU: OVERVIEW BIG CARD STYLE (Optimiert) */
.overview-card {
    position: relative;
    /* Dunkler Hintergrund, damit es wie eine echte Karte wirkt */
    background: rgba(10, 10, 10, 0.6); 
    backdrop-filter: blur(12px);
    border-radius: 20px; 
    /* Statischer, sehr feiner Rahmen (kaum sichtbar, definiert die Form) */
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* 1. Statischer Glanz (Oben leicht sichtbar, unten weg) */
.overview-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    /* Ein leichter Verlauf von oben nach unten */
    background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* 2. Der "Ghost" Traveler (Dreht sich und ist mal da, mal weg) */
.overview-card::after {
    content: "";
    position: absolute;
    inset: -1px; /* Sitzt genau auf dem Rand */
    border-radius: 20px;
    padding: 1px; /* Dicke der leuchtenden Linie */
    
    /* Der rotierende Verlauf: Transparent -> Weiß -> Transparent */
    background: conic-gradient(
        from var(--border-angle), 
        transparent 10%, 
        rgba(255,255,255,0.1) 20%, 
        rgba(255,255,255,0.8) 45%, /* Der helle "Spot" */
        rgba(255,255,255,0.1) 70%, 
        transparent 80%
    );
    
    /* Maskiert die Mitte aus, damit nur der Rand bleibt */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    /* Animation */
    animation: border-spin 10s linear infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0.8; /* Nicht zu aggressiv */
}

@keyframes border-spin {
    from { --border-angle: 0deg; }
    to { --border-angle: 360deg; }
}