/* ====================================================
           ANMACHA DASHBOARD – Design System v4
        ==================================================== */
        :root {
            --accent:#ffce00; --accent-dim:#c9a200; --accent-glow:rgba(255,206,0,0.15);
            --bg:#070709; --surface:#0f0f13; --surface2:#16161c; --surface3:#1d1d25;
            --border:rgba(255,255,255,0.06); --border-a:rgba(255,206,0,0.25);
            --text:#f0f0f0; --text-muted:#6e7480; --text-dim:#9a9faa;
            --good:#00e676; --bad:#ff4444; --info:#00b4f5; --purple:#b388ff;
            --nav-h:62px;
        }
        *, *::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;
            background-image:
                radial-gradient(ellipse 70% 40% at 50% -5%, rgba(255,206,0,0.04), transparent),
                radial-gradient(ellipse 40% 30% at 90% 80%, rgba(0,180,245,0.03), transparent);
        }

        /* ── NAVBAR ── */
        .navbar-custom {
            background: rgba(7,7,9,0.95); backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 1px 0 rgba(255,206,0,0.08), 0 4px 20px rgba(0,0,0,0.4);
            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); }
        .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;
        }
        .nav-link:hover, .nav-link.active { color: var(--accent)!important; background: var(--accent-glow); }
        .nav-link i { font-size:0.8rem; margin-right:5px; }
        @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:#0d0d10;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: var(--surface2)!important; border:1px solid var(--border)!important;
            border-radius:12px!important; box-shadow:0 16px 40px rgba(0,0,0,0.6)!important;
            padding:8px!important; min-width:200px;
        }
        .dropdown-item {
            border-radius:8px!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 ── */
        .dash-card {
            background: linear-gradient(145deg, var(--surface), var(--bg));
            border: 1px solid var(--border); border-radius:16px;
            padding:20px; transition:.25s cubic-bezier(.4,0,.2,1);
            height:100%; display:flex; flex-direction:column;
            position:relative; overflow:hidden;
        }
        .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:hover { border-color:rgba(255,206,0,0.3); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.3),0 0 0 1px rgba(255,206,0,0.05); }
        .dash-card:hover::before { opacity:1; }

        .stat-box {
            background: linear-gradient(145deg, var(--surface), var(--bg));
            padding:24px; border-radius:16px; border:1px solid var(--border);
            margin-bottom:20px;
        }
        .stat-box.border-warning { border-color: rgba(255,206,0,0.2)!important; }
        .stat-box.border-success { border-color: rgba(0,230,118,0.2)!important; }
        .stat-box.border-info    { border-color: rgba(0,180,245,0.2)!important; }
        .stat-box.border-danger  { border-color: rgba(255,68,68,0.2)!important; }
        .stat-box.border-primary { border-color: rgba(100,100,255,0.2)!important; }
        .stat-box.border-secondary { border-color: var(--border)!important; }

        /* Live-badge */
        .live-count {
            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 2px 12px rgba(255,206,0,0.2);
        }
        .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:var(--accent); color:#000; border:none; font-weight:800; border-radius:10px; transition:.2s; }
        .btn-accent:hover { background:var(--accent-dim); transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,206,0,0.25); 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; }

        /* 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:8px;
            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:var(--accent); color:#000!important; border-color:var(--accent); box-shadow:0 4px 12px rgba(255,206,0,0.2); }

        /* Tables */
        .table-dark { --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
        .table-dark th { color:var(--accent)!important; font-size:0.78rem; text-transform:uppercase; letter-spacing:.5px; font-weight:800; border-color:var(--border)!important; background:var(--surface2)!important; }
        .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.04)!important; color:#fff; }
        .clickable-row { cursor:pointer; }

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

        /* 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; }

        /* User info bar */
        /* 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; }

        /* 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:8px!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:16px!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;}


/* ── 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; }