/* --- NEBULA ORACLE VARIABLES --- */
:root {
    --bg-deep: #1a1e25;
    --bg-gradient: radial-gradient(circle at 50% -20%, #2e3440 0%, #1a1e25 100%);
    --accent: #00f2ff;
    --accent-glow: rgba(0, 242, 255, 0.4);
    --glass: rgba(255, 255, 255, 0.05);
    --glass-heavy: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.12);
    --text-main: #eceff4;
    --text-dim: rgba(236, 239, 244, 0.6);
    --bar-bg: rgba(255, 255, 255, 0.1);
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    --color-green: #50fa7b;
    --color-red: #ff5555;
    --color-orange: #ffb86c;
}

/* --- TRUE LIGHT MODE --- */
body.light-mode {
    --bg-deep: #f0f2f5;
    --bg-gradient: linear-gradient(135deg, #ffffff 0%, #e1e4e8 100%);
    --accent: #007acc;
    --accent-glow: rgba(0, 122, 204, 0.2);
    --glass: rgba(255, 255, 255, 0.8);
    --glass-heavy: rgba(255, 255, 255, 0.95);
    --border: rgba(0, 0, 0, 0.08);
    --text-main: #24292e;
    --text-dim: #586069;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- COMPACT MODE OVERRIDES --- */
body.compact-mode .content-wrapper { padding: 10px 20px; gap: 15px; }
body.compact-mode .category-group { padding: 10px 15px; border-radius: 12px; }
body.compact-mode .category-title { font-size: 0.75rem; margin-bottom: 8px; padding-bottom: 5px; }
body.compact-mode .links-container { gap: 10px 8px; } /* Etwas mehr vertikaler Abstand im Compact Mode */
body.compact-mode .bubble-link { padding: 4px 10px; font-size: 0.75rem; border-radius: 8px; gap: 5px; }
body.compact-mode .bubble-icon { font-size: 0.75rem; }
body.compact-mode .system-panel { width: 300px; padding: 15px; }
body.compact-mode .time-display { font-size: 1.6rem; }

/* --- GRUNDLAGEN & BACKGROUND --- */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-deep);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-main);
    margin: 0; min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.4s ease;
}

@keyframes nebula-breath {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.02); }
}

#video-background {
    position: fixed; inset: 0; z-index: -1;
    animation: nebula-breath 10s infinite ease-in-out;
}

/* --- HEADER --- */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 40px; background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px); border-bottom: 1px solid var(--border);
}

.header-title a {
    text-decoration: none; color: var(--text-main); font-weight: 800;
    text-transform: uppercase; letter-spacing: 3px; font-size: 1.1rem;
}

/* --- LAYOUT --- */
.content-wrapper { display: flex; max-width: 1800px; margin: 0 auto; padding: 25px 40px; gap: 30px; }
.categories-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-content: start; }

.category-group {
    background: var(--glass); backdrop-filter: blur(25px);
    border: 1px solid var(--border); border-radius: 20px;
    padding: 20px; box-shadow: var(--shadow);
}

.category-title {
    font-size: 0.9rem; font-weight: 700; color: var(--category-color);
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 15px;
    border-bottom: 1px solid var(--border); padding-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
}

/* --- BUBBLES (MODIFIED GAP) --- */
.links-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px 8px; /* 12px vertikal, 8px horizontal */
    min-height: 20px; 
}

.bubble-link {
    background: var(--glass-heavy); border: 1px solid var(--border);
    padding: 7px 14px; border-radius: 12px; color: var(--text-main);
    font-size: 0.85rem; text-decoration: none; display: inline-flex;
    align-items: center; gap: 8px; transition: 0.2s ease;
    --link-accent: var(--accent-color, var(--category-color));
}

.bubble-icon { color: var(--link-accent); }
.bubble-link:hover {
    background: var(--link-accent); color: #fff;
    transform: translateY(-2px); box-shadow: 0 4px 12px var(--accent-glow);
}
.bubble-link:hover .bubble-icon { color: #fff; }

/* --- SYSTEM PANEL --- */
.system-panel {
    width: 320px; background: var(--glass); backdrop-filter: blur(30px);
    border: 1px solid var(--border); border-radius: 24px;
    padding: 25px; flex-shrink: 0; box-shadow: var(--shadow);
}

.mode-controls { display: flex; gap: 10px; margin-bottom: 10px; }
.mode-controls button, .mode-controls .switch-button { flex: 1; margin-bottom: 0; }

.time-display { font-family: 'Fira Code', monospace; font-size: 2.2rem; text-align: center; color: var(--accent); }

/* STATS BARS */
.progress-bar {
    height: 12px; background: rgba(0, 0, 0, 0.3); border-radius: 6px;
    overflow: hidden; position: relative; border: 1px solid var(--border); margin-bottom: 10px;
}
.progress-bar .bar { height: 100%; transition: width 0.8s ease; }
.progress-bar .bar-text {
    position: absolute; width: 100%; text-align: center; font-size: 0.65rem;
    font-weight: bold; line-height: 12px; color: #fff; text-shadow: 1px 1px 2px #000;
}
.green .bar { background: var(--color-green); }
.red .bar { background: var(--color-red); }

/* --- FORMULARE & BUTTONS --- */
.quick-link-form input, .quick-link-form select {
    width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 12px;
    border: 1px solid var(--border); background: rgba(0, 0, 0, 0.2);
    color: var(--text-main); box-sizing: border-box;
}

.switch-button, .reset-button, .quick-link-form button {
    width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--glass-heavy); color: var(--text-main); font-weight: 600;
    cursor: pointer; transition: 0.3s; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.switch-button:hover, .quick-link-form button:hover, .reset-button:hover {
    background: var(--accent); color: #1a1e25;
}

/* FOOTER LINKS */
.admin-link, .logout-link, .code-link {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 15px; font-size: 0.75rem; color: var(--text-dim) !important;
    text-decoration: none !important;
}
.admin-link:hover, .logout-link:hover, .code-link:hover { color: var(--accent) !important; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .content-wrapper { flex-direction: column-reverse; padding: 15px; }
    .system-panel { width: 100%; }
    .categories-grid { grid-template-columns: 1fr; }
}