/* ====================================================
           ANMACHA DASHBOARD – Design System v5 "Schaltzentrale"
        ==================================================== */
        :root {
            --accent:#ffce00; --accent-2:#ffe066; --accent-dim:#c9a200; --accent-glow:rgba(255,206,0,0.15);
            --bg:#050507; --surface:#0d0d12; --surface2:#131319; --surface3:#1a1a22;
            --border:rgba(255,255,255,0.07); --border-a:rgba(255,206,0,0.28);
            --text:#f0f0f0; --text-muted:#5e6472; --text-dim:#98a0ac;
            --good:#00e676; --bad:#ff4444; --info:#00b4f5; --purple:#b388ff;
            --nav-h:62px;
            --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
            --shadow-card:0 18px 44px -14px rgba(0,0,0,.6);
            --shadow-glow:0 0 0 1px var(--border-a),0 18px 44px -14px rgba(255,206,0,.16);
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--bg); color: var(--text);
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            font-size: 14px; line-height: 1.6;
            padding-top: var(--nav-h); min-height: 100vh;
            position: relative;
            background-image:
                radial-gradient(ellipse 900px 500px at 12% -8%, rgba(255,206,0,0.06), transparent 60%),
                radial-gradient(ellipse 700px 450px at 100% 0%, rgba(179,136,255,0.045), transparent 55%),
                radial-gradient(ellipse 600px 400px at 90% 90%, rgba(0,180,245,0.035), transparent 55%);
            background-attachment: fixed;
        }
        /* Control-center grid texture: very faint, purely decorative, never blocks clicks */
        body::before {
            content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
            -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
        }
        #sharedNavbar, .navbar-custom, .view-section, .container, .container-fluid { position:relative; z-index:1; }
        /* Focus visible only for keyboard nav */
        :focus:not(:focus-visible) { outline: none; }
        :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
        /* Smooth transitions on interactive elements */
        button, a, input, select, textarea { transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .15s; }
        /* Selection color */
        ::selection { background: rgba(255,206,0,.25); color: #fff; }
        .mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

        /* ── NAVBAR ── */
        .navbar-custom {
            background: rgba(5,5,7,0.85); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 1px 0 rgba(255,206,0,0.1), 0 8px 30px rgba(0,0,0,.5);
            position: fixed; top:0; width:100%; z-index:1030;
            height: var(--nav-h); padding: 0 20px;
        }
        .navbar-custom .container-fluid { height:100%; gap:12px; }
        .navbar-brand { font-size:1.1rem; font-weight:800; letter-spacing:-0.3px; color:#fff!important; white-space:nowrap; }
        .brand-dot { color: var(--accent); text-shadow:0 0 12px rgba(255,206,0,.7); }
        .nav-link {
            color: var(--text-dim)!important; font-weight:600; font-size:0.82rem;
            padding:6px 12px!important; border-radius:8px; transition:.2s;
            white-space:nowrap; letter-spacing:0.2px; position:relative;
        }
        .nav-link:hover { color: var(--accent)!important; background: var(--accent-glow); }
        .nav-link.active { color: var(--accent)!important; background: var(--accent-glow); box-shadow: inset 0 -2px 0 var(--accent); }
        .nav-link i { font-size:0.8rem; margin-right:5px; }
        #sharedNavStats .badge { font-family: var(--font-mono); letter-spacing:.3px; }
        #sharedNavStats .badge#globalLautFmListeners, #sharedNavStats span#globalLautFmListeners { text-shadow:0 0 10px rgba(0,180,245,.5); }
        @media(max-width:991px){
            .navbar-custom{height:auto;min-height:var(--nav-h);}
            .navbar-custom .container-fluid{flex-wrap:wrap;align-items:center;}
            #navMain.collapse:not(.show){display:none!important;}
            #navMain.show,.navbar-collapse.show{background:#0b0b0e;border-top:1px solid var(--border);border-radius:0 0 16px 16px;padding:12px 4px 16px;width:100%;box-shadow:0 12px 32px rgba(0,0,0,.8);}
            #navMain .navbar-nav{flex-direction:column;width:100%;gap:2px;}
            #navMain .nav-item{width:100%;}
            #navMain .nav-link{display:flex!important;align-items:center;padding:12px 16px!important;font-size:.9rem;border-radius:10px;min-height:48px;white-space:normal;}
            #navMain .dropdown-menu{position:static!important;background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;border-radius:10px!important;margin:4px 8px!important;box-shadow:none!important;padding:6px!important;}
            #navMain .ms-auto,.nav-item.ms-1{margin-left:0!important;}
            #navMain .btn-logout{width:100%;justify-content:center;padding:12px 16px;font-size:.9rem;border-radius:10px;min-height:48px;}
            #navMain .nav-user-badge{max-width:none;}
        }
        .dropdown-menu-dark {
            background: rgba(19,19,25,.97)!important; backdrop-filter: blur(16px); border:1px solid var(--border)!important;
            border-radius:14px!important; box-shadow:0 20px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,.03)!important;
            padding:8px!important; min-width:200px;
        }
        .dropdown-item {
            border-radius:9px!important; padding:9px 14px!important;
            font-size:0.83rem; font-weight:600; color:#ccc!important;
            transition:.15s; display:flex; align-items:center; gap:8px;
        }
        .dropdown-item:hover { background:var(--accent-glow)!important; color:var(--accent)!important; padding-left:18px!important; }
        .dropdown-item i { width:16px; text-align:center; }

        /* Logout Button */
        .btn-logout {
            background: transparent; border: 1px solid rgba(255,68,68,0.3);
            color: #ff6b6b; border-radius: 8px; padding: 6px 12px;
            font-size:0.8rem; font-weight:700; cursor:pointer; transition:.2s;
            display:flex; align-items:center; gap:6px; white-space:nowrap;
        }
        .btn-logout:hover { background:rgba(255,68,68,0.1); border-color:#ff4444; color:#ff4444; }

        /* User badge in nav */
        .nav-user-badge {
            background: var(--accent-glow); border: 1px solid var(--border-a);
            color: var(--accent); border-radius: 20px; padding: 4px 12px;
            font-size:0.78rem; font-weight:800; max-width:120px;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        }

        /* ── CARDS (bento / HUD depth) ── */
        .dash-card {
            background: linear-gradient(165deg, var(--surface2), var(--surface) 65%);
            border: 1px solid var(--border); border-radius:18px;
            padding:20px; transition:.25s cubic-bezier(.4,0,.2,1);
            height:100%; display:flex; flex-direction:column;
            position:relative; overflow:hidden; box-shadow: var(--shadow-card);
        }
        .dash-card::before {
            content:''; position:absolute; top:0; left:0; right:0; height:2px;
            background:linear-gradient(90deg,transparent,var(--accent),transparent);
            opacity:0; transition:.25s;
        }
        .dash-card::after {
            content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
            background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 45%);
            -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
        }
        .dash-card:hover { border-color:rgba(255,206,0,0.3); transform:translateY(-4px); box-shadow: var(--shadow-glow); }
        .dash-card:hover::before { opacity:1; }

        .stat-box {
            background: linear-gradient(165deg, var(--surface2), var(--surface) 65%);
            padding:22px 24px; border-radius:18px; border:1px solid var(--border);
            margin-bottom:20px; position:relative; overflow:hidden; box-shadow: var(--shadow-card);
        }
        .stat-box.border-warning { border-color: rgba(255,206,0,0.22)!important; }
        .stat-box.border-success { border-color: rgba(0,230,118,0.22)!important; }
        .stat-box.border-info    { border-color: rgba(0,180,245,0.22)!important; }
        .stat-box.border-danger  { border-color: rgba(255,68,68,0.22)!important; }
        .stat-box.border-primary { border-color: rgba(100,100,255,0.22)!important; }
        .stat-box.border-secondary { border-color: var(--border)!important; }

        /* Live-badge / HUD readout */
        .live-count {
            font-family: var(--font-mono); font-variant-numeric: tabular-nums;
            font-size:3rem; font-weight:900; color:var(--accent);
            line-height:1; display:flex; align-items:center; gap:10px;
            margin:12px 0; text-shadow:0 0 24px rgba(255,206,0,0.35);
            letter-spacing:-1px;
        }
        .pulse-dot {
            width:12px; height:12px; background:#ff0044; border-radius:50%;
            box-shadow:0 0 0 0 rgba(255,0,68,0.4);
            animation:pulse-ring 1.5s infinite;
        }
        @keyframes pulse-ring {
            0%  { box-shadow:0 0 0 0 rgba(255,0,68,0.5); }
            70% { box-shadow:0 0 0 8px rgba(255,0,68,0); }
            100%{ box-shadow:0 0 0 0 rgba(255,0,68,0); }
        }

        /* Buttons */
        .btn-accent  { background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#000; border:none; font-weight:800; border-radius:10px; transition:.2s; box-shadow:0 6px 18px -6px rgba(255,206,0,.4); }
        .btn-accent:hover { transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(255,206,0,0.5); color:#000; }
        .btn-glass   { background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-dim); border-radius:10px; font-weight:600; transition:.2s; }
        .btn-glass:hover { background:rgba(255,255,255,0.09); color:#fff; border-color:rgba(255,255,255,.18); }

        /* Views */
        .view-section { display:none; animation:fadeUp .3s ease; padding:24px; min-height:calc(100vh - var(--nav-h)); }
        .view-section.active { display:block; }
        @keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

        /* Tabs */
        .nav-pills .nav-link {
            color:var(--text-dim); border:1px solid var(--border); border-radius:9px;
            background:var(--surface); font-size:0.82rem; font-weight:700;
            padding:8px 16px; margin:0 4px 8px 0; transition:.2s;
        }
        .nav-pills .nav-link:hover { background:var(--surface2); color:#fff; }
        .nav-pills .nav-link.active { background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#000!important; border-color:var(--accent); box-shadow:0 6px 16px -4px rgba(255,206,0,0.4); }

        /* Tables */
        .table-dark { --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
        .table-dark th { color:var(--accent)!important; font-size:0.75rem; text-transform:uppercase; letter-spacing:.6px; font-weight:800; border-color:var(--border)!important; background:var(--surface2)!important; position:sticky; top:0; }
        .table-dark td { border-color:var(--border)!important; color:var(--text-dim); vertical-align:middle; }
        .table-dark tr:hover td { background:rgba(255,206,0,0.05)!important; color:#fff; }
        .clickable-row { cursor:pointer; }

        /* Sparklines */
        .sparkline-container { height:44px; width:100%; margin-top:12px; opacity:.85; }

        /* Marquee */
        .marquee-wrapper { overflow:hidden; background:rgba(255,255,255,0.03); border-radius:6px; padding:4px 8px; border:1px solid var(--border); }
        .marquee-inner   { display:inline-block; padding-left:100%; animation:marquee 16s linear infinite; white-space:nowrap; }
        @keyframes marquee { 0%{transform:translate(0)} 100%{transform:translate(-100%)} }

        /* Rotation badges */
        .badge-keeper  { background:linear-gradient(135deg,#00c853,#009624); color:#fff; font-size:.72rem; border-radius:20px; padding:3px 10px; display:inline-flex; align-items:center; gap:4px; }
        .badge-replace { background:linear-gradient(135deg,#ff3d00,#b71c1c); color:#fff; font-size:.72rem; border-radius:20px; padding:3px 10px; display:inline-flex; align-items:center; gap:4px; }
        .badge-neutral { background:rgba(84,110,122,.4); color:#ccc; font-size:.72rem; border-radius:20px; padding:3px 10px; display:inline-flex; align-items:center; gap:4px; }

        /* Chart container */
        .chart-container { position:relative; height:300px; cursor:pointer; }

        /* Schedule */
        .schedule-now { background:rgba(0,230,118,0.1)!important; border-left:3px solid var(--good)!important; }

        /* Station logo */
        .station-logo-fallback { border-radius:10px; object-fit:cover; background:var(--surface2); }

        /* Play button on card */
        .btn-play-card {
            position:absolute; top:16px; right:16px; border-radius:50%;
            width:38px; height:38px; display:flex; align-items:center; justify-content:center;
            background:var(--good); color:#000; border:none; font-size:1rem; transition:.25s;
            z-index:5; box-shadow:0 4px 12px rgba(0,230,118,0.3);
        }
        .btn-play-card:hover { transform:scale(1.15); background:#fff; box-shadow:0 6px 16px rgba(255,255,255,.3); }

        /* Rank badge */
        .rank-badge { background:var(--surface2); border:1px solid var(--border); color:var(--accent); font-size:.72rem; font-weight:800; padding:3px 8px; border-radius:6px; font-family: var(--font-mono); }

        /* Chat */
        .chat-box { background:var(--bg); border:1px solid var(--border); border-radius:12px; height:380px; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
        .chat-msg { background:var(--surface); border-radius:10px; padding:10px 14px; border-left:3px solid var(--border); }
        .chat-msg.own { background:rgba(255,206,0,0.07); border-left-color:var(--accent); }
        .chat-msg .msg-user { font-size:.72rem; font-weight:800; color:var(--accent); margin-bottom:2px; }
        .chat-msg .msg-text { color:var(--text); font-size:.88rem; }
        .chat-msg .msg-time { font-size:.68rem; color:var(--text-muted); margin-top:2px; }

        /* Pinboard */
        .pin-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; transition:.2s; }
        .pin-card.pinned { border-color:rgba(255,206,0,0.3); background:linear-gradient(135deg,rgba(255,206,0,0.04),var(--surface)); }
        .pin-card:hover { border-color:#444; }

        /* Discovery */
        .trend-item { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:12px; transition:.15s; }
        .trend-item:hover { border-color:#444; background:var(--surface2); }
        .trend-rank { font-size:1.2rem; font-weight:900; color:var(--text-muted); width:28px; text-align:center; flex-shrink:0; }
        .trend-heat { font-size:.7rem; font-weight:800; padding:2px 7px; border-radius:10px; }
        .heat-hot  { background:rgba(255,68,68,.15); color:#ff6b6b; }
        .heat-warm { background:rgba(255,206,0,.1); color:var(--accent); }
        .heat-new  { background:rgba(0,230,118,.1); color:var(--good); }

        /* Scrollbars */
        ::-webkit-scrollbar { width:6px; height:6px; }
        ::-webkit-scrollbar-track { background:var(--bg); }
        ::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:3px; }
        ::-webkit-scrollbar-thumb:hover { background:#444; }

        /* Mobile */
        @media(max-width:768px) {
            .view-section { padding:14px; }
            .live-count { font-size:2.2rem; }
            .stat-box { padding:16px; }
            .navbar-custom { padding:0 12px; }
            .dash-card { padding:14px; }
            .chat-box { height:260px; }
        }

        /* Duel station */
        .duel-station-select-wrap { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px; }

        /* Social export */
        #exportPreviewContainer { width:100%; max-width:320px; aspect-ratio:9/16; margin:0 auto; border:2px solid var(--border); border-radius:16px; overflow:hidden; background:#050505; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.5); }
        #exportPreviewInner { width:1080px; height:1920px; transform-origin:top left; }
        #hiddenExportWrapper { position:absolute; left:-10000px; top:0; z-index:-999; }
        .export-cover { width:140px; height:140px; border-radius:20px; object-fit:cover; border:3px solid var(--accent); flex-shrink:0; background:var(--surface); }
        .export-item  { background:rgba(255,255,255,.04); border-radius:24px; padding:28px; margin-bottom:28px; display:flex; align-items:center; gap:32px; border:1px solid rgba(255,206,0,.15); width:100%; }
        .export-text-wrap { white-space:normal; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

        /* Automation */
        .auto-section { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:16px; }
        .track-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); margin-bottom:6px; transition:.15s; }
        .track-row:hover { background:var(--surface); border-color:#333; }

        /* Rotation table */
        .rot-keeper td { color:var(--good)!important; }
        .rot-replace td { color:var(--bad)!important; }

        /* Forms */
        .form-control, .form-select {
            background:var(--surface)!important; color:var(--text)!important;
            border-color:var(--border)!important; border-radius:9px!important;
            font-size:.85rem;
        }
        .form-control:focus, .form-select:focus {
            border-color:rgba(255,206,0,0.4)!important;
            box-shadow:0 0 0 3px rgba(255,206,0,0.08)!important;
            background:var(--surface2)!important;
        }
        .form-control::placeholder { color:var(--text-muted)!important; }

        /* Accordion */
        .accordion-button { background:var(--surface)!important; color:#fff!important; font-weight:700; border-radius:0!important; }
        .accordion-button:not(.collapsed) { background:var(--surface2)!important; color:var(--accent)!important; }
        .accordion-button::after { filter:invert(1) sepia(1) saturate(5) hue-rotate(10deg); }
        .accordion-item { background:var(--surface)!important; border-color:var(--border)!important; }
        .accordion-body { background:var(--bg)!important; color:var(--text-dim); font-size:.85rem; }

        /* Song notes */
        .song-note-indicator { width:8px; height:8px; background:var(--accent); border-radius:50%; }
        .modal-content { background:var(--surface)!important; border:1px solid var(--border)!important; border-radius:18px!important; box-shadow:0 30px 70px rgba(0,0,0,.6)!important; }
        .modal-header, .modal-footer { border-color:var(--border)!important; }

        /* Page headers */
        .page-header { margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border); }
        .page-header h2 { font-size:1.4rem; font-weight:800; margin:0; }
        .page-header p  { color:var(--text-muted); margin:4px 0 0; font-size:.85rem; }

/* ── FAQ STYLES ─────────────────────────────────────────── */
.faq-cat-header:hover{background:rgba(0,180,245,.14)!important;}
.faq-cat-body{border:1px solid rgba(0,180,245,.15);border-top:none;border-radius:0 0 10px 10px;overflow:hidden;}
.faq-item{border-bottom:1px solid rgba(255,255,255,.05);}
.faq-item:last-child{border-bottom:none;}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer;font-size:.85rem;font-weight:600;color:#ccc;transition:.15s;background:#0d1a26;}
.faq-q:hover{background:#111e30;color:#fff;}
.faq-q span{flex:1;}
.faq-arrow{flex-shrink:0;font-size:.7rem;color:var(--muted);transition:.2s;}
.faq-a{display:none;padding:14px 18px;background:#0a1318;color:#aaa;font-size:.83rem;line-height:1.7;border-top:1px solid rgba(255,255,255,.04);}
.faq-a a{color:var(--info);}
.faq-a code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:.8rem;}
.faq-a ul{margin-top:4px;margin-bottom:4px;}
.faq-item.faq-hidden{display:none;}


/* ── Role Badges ─────────────────────────────── */
.rb { display:inline-flex; align-items:center; gap:4px; border:1px solid; border-radius:20px; padding:2px 9px; font-size:.71rem; font-weight:800; }
.rb-sa  { background:rgba(255,206,0,.12); border-color:rgba(255,206,0,.35); color:var(--accent); }
.rb-ow  { background:rgba(255,206,0,.08); border-color:rgba(255,206,0,.2);  color:var(--accent); }
.rb-ed  { background:rgba(0,180,245,.08); border-color:rgba(0,180,245,.25); color:var(--info); }
.rb-dj  { background:rgba(0,230,118,.07); border-color:rgba(0,230,118,.2);  color:var(--good); }
.rb-m   { background:rgba(255,255,255,.04); border-color:var(--border);     color:var(--text-dim); }

/* ── Global Toasts (injected by shared.js) ─── */
#anmachaToast .toast-item { /* handled inline by JS */ }

/* ── Compact Mode ─────────────────────────────── */
body.compact-mode .station-card { padding: 10px 12px !important; }
body.compact-mode .station-card .card-art { width: 38px !important; height: 38px !important; }
body.compact-mode .station-listeners { font-size: 1.1rem !important; }


/* ── Toast Animation (used by shared.js toast()) ── */
@keyframes toastIn { from{transform:translateX(20px);opacity:0} to{transform:none;opacity:1} }

/* ── Skeleton Loading ─────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: skeleton-wave 1.5s infinite; border-radius: 8px; }
@keyframes skeleton-wave { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-text { height: .85em; margin-bottom: .4em; }
.skeleton-title { height: 1.2em; width: 60%; }
.skeleton-avatar { border-radius: 50% !important; }

/* ── Glassmorphism cards ────────────────────────────── */
.glass-card { background: rgba(255,255,255,.03); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }

/* ── Status indicators ──────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot.online  { background: var(--good); box-shadow: 0 0 0 3px rgba(0,230,118,.2); }
.status-dot.offline { background: var(--bad); }
.status-dot.idle    { background: var(--accent); }
.status-ok   { background: var(--good); box-shadow: 0 0 8px var(--good); }
.status-warn { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ── Page Enter Animation ────────────────────────────── */
body { animation: pageEnter .25s ease; }
@keyframes pageEnter { from{opacity:0} to{opacity:1} }