/* ==========================================================================
   NEON tema (tamno staklo + svetleći gradijenti), uključuje se u panelu "Tema".
   Samo vizuelni sloj: sva pravila su pod html[data-theme="neon"], pa Klasik tema ostaje netaknut.
   Semantika boja ostaje ista: zeleno = kupovina / profit, crveno = gubitak / stop,
   žuto = prodaja / Binance, ljubičasto = momentum spajk.
   ========================================================================== */

/* Pomoćno: grafički pregled je skriven u Klasik temi */
.neon-panel { display: none; }
#theme-toggle .btn-label { display: inline; }

html[data-theme="neon"] {
    --bg: #05040d;
    --bg-soft: #0b0a1c;
    --surface: rgba(18, 15, 40, 0.62);
    --surface-solid: #0d0b20;
    --surface-2: #17143a;
    --surface-hover: rgba(48, 32, 88, 0.55);
    --line: rgba(160, 130, 255, 0.15);
    --line-strong: rgba(176, 146, 255, 0.32);

    --text: #cfd0ec;
    --text-strong: #ffffff;
    --muted: #8c8bb4;

    --green: #1df2b0;
    --green-soft: rgba(29, 242, 176, 0.13);
    --green-line: rgba(29, 242, 176, 0.4);
    --red: #ff4d7d;
    --red-soft: rgba(255, 77, 125, 0.14);
    --red-line: rgba(255, 77, 125, 0.42);
    --yellow: #ffc533;
    --orange: #ff8a1f;
    --blue: #35a4ff;
    --blue-soft: rgba(53, 164, 255, 0.14);
    --violet: #b07cff;
    --violet-soft: rgba(176, 124, 255, 0.16);
    --violet-line: rgba(176, 124, 255, 0.5);

    --n-orange: #ff8a1f;
    --n-magenta: #ff2d95;
    --n-violet: #9b5cff;
    --n-blue: #2f8bff;
    --n-cyan: #19e3ff;
    --n-grad: linear-gradient(135deg, #ff8a1f 0%, #ff2d95 55%, #9b5cff 100%);
    --n-grad-cool: linear-gradient(135deg, #19e3ff 0%, #2f8bff 50%, #9b5cff 100%);
    --n-border: linear-gradient(135deg, rgba(255, 138, 31, 0.6), rgba(155, 92, 255, 0.34) 48%, rgba(47, 139, 255, 0.6));
    --glow: 0 0 0 1px rgba(155, 92, 255, 0.35), 0 8px 40px rgba(155, 92, 255, 0.16);
    --shadow: 0 14px 50px rgba(0, 0, 0, 0.55);
}

/* Pozadinski sjaj je na fiksnom sloju (ne na body-ju): skrolovanje ostaje glatko. */
html[data-theme="neon"] body { background: var(--bg); }
html[data-theme="neon"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(rgba(176, 146, 255, 0.075) 1px, transparent 1.2px) 0 0 / 30px 30px,
        radial-gradient(900px 620px at -5% 105%, rgba(255, 138, 31, 0.17), transparent 62%),
        radial-gradient(900px 600px at 105% -5%, rgba(255, 45, 149, 0.16), transparent 60%),
        radial-gradient(800px 520px at 45% -12%, rgba(47, 139, 255, 0.16), transparent 62%),
        radial-gradient(600px 420px at 100% 100%, rgba(155, 92, 255, 0.12), transparent 60%);
}

html[data-theme="neon"] :focus-visible { outline-color: var(--n-cyan); }
html[data-theme="neon"] input:focus,
html[data-theme="neon"] select:focus { border-color: var(--n-violet); box-shadow: 0 0 0 3px rgba(155, 92, 255, 0.22); }
html[data-theme="neon"] input[type="text"],
html[data-theme="neon"] input[type="password"],
html[data-theme="neon"] input[type="number"],
html[data-theme="neon"] input[type="date"],
html[data-theme="neon"] input[type="search"],
html[data-theme="neon"] select { background: rgba(6, 4, 18, 0.62); }
html[data-theme="neon"] input::placeholder { color: #5b5a85; }

/* ---------- Topbar ---------- */

html[data-theme="neon"] .topbar {
    background: rgba(8, 6, 22, 0.72);
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px 0 rgba(155, 92, 255, 0.28), 0 10px 40px rgba(0, 0, 0, 0.35);
}
html[data-theme="neon"] .topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 138, 31, 0.7), rgba(255, 45, 149, 0.7), rgba(47, 139, 255, 0.7), transparent);
    opacity: 0.8;
    pointer-events: none;
}
html[data-theme="neon"] .brand-mark {
    background: var(--n-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 26px rgba(255, 45, 149, 0.45), 0 0 6px rgba(255, 138, 31, 0.6);
}
html[data-theme="neon"] .brand-text strong em,
html[data-theme="neon"] .login-brand h1 em { background: var(--n-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="neon"] .main-nav { background: rgba(155, 92, 255, 0.08); border: 1px solid var(--line); }
html[data-theme="neon"] .main-nav a.active {
    background: linear-gradient(135deg, rgba(255, 138, 31, 0.16), rgba(255, 45, 149, 0.16) 55%, rgba(155, 92, 255, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.45), 0 0 18px rgba(255, 45, 149, 0.18);
}
html[data-theme="neon"] .main-nav a.active .icon { color: var(--n-orange); }
html[data-theme="neon"] .stat-chip strong.accent { color: var(--n-cyan); text-shadow: 0 0 14px rgba(25, 227, 255, 0.5); }
html[data-theme="neon"] .user-avatar { background: var(--n-grad); color: #fff; box-shadow: 0 0 14px rgba(255, 45, 149, 0.45); }
html[data-theme="neon"] .icon-btn { background: rgba(155, 92, 255, 0.08); border-color: var(--line-strong); }
html[data-theme="neon"] .icon-btn.active,
html[data-theme="neon"] #theme-toggle.active {
    color: #fff;
    border-color: rgba(255, 45, 149, 0.6);
    background: linear-gradient(135deg, rgba(255, 138, 31, 0.22), rgba(255, 45, 149, 0.22), rgba(155, 92, 255, 0.22));
    box-shadow: 0 0 18px rgba(255, 45, 149, 0.25);
}

/* ---------- Naslovi, kartice, KPI ---------- */

html[data-theme="neon"] .page-title {
    background: linear-gradient(90deg, #fff 30%, #d9c6ff 70%, #ff9ad0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="neon"] .card,
html[data-theme="neon"] .kpi,
html[data-theme="neon"] .login-card,
html[data-theme="neon"] .modal,
html[data-theme="neon"] .np-card {
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(20, 16, 46, 0.84), rgba(11, 9, 28, 0.88)) padding-box,
        var(--n-border) border-box;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.42), 0 0 38px rgba(155, 92, 255, 0.08);
}

html[data-theme="neon"] .kpi::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--kpi-glow, rgba(255, 138, 31, 0.3)), transparent 68%);
    pointer-events: none;
}
html[data-theme="neon"] .kpi:nth-child(1) { --kpi-glow: rgba(255, 138, 31, 0.32); --kpi-tone: var(--n-orange); }
html[data-theme="neon"] .kpi:nth-child(2) { --kpi-glow: rgba(255, 45, 149, 0.3); --kpi-tone: var(--n-magenta); }
html[data-theme="neon"] .kpi:nth-child(3) { --kpi-glow: rgba(47, 139, 255, 0.32); --kpi-tone: var(--n-blue); }
html[data-theme="neon"] .kpi:nth-child(4) { --kpi-glow: rgba(25, 227, 255, 0.28); --kpi-tone: var(--n-cyan); }
html[data-theme="neon"] .kpi::after { height: 2px; background: linear-gradient(90deg, transparent, var(--kpi-tone, var(--n-violet)), transparent); opacity: 0.9; }
html[data-theme="neon"] .kpi-label .icon,
html[data-theme="neon"] .kpi-dip .kpi-label .icon { color: var(--kpi-tone, var(--n-violet)); filter: drop-shadow(0 0 6px var(--kpi-tone, var(--n-violet))); }
html[data-theme="neon"] .kpi-value { text-shadow: 0 0 20px color-mix(in srgb, currentColor 38%, transparent); }
html[data-theme="neon"] .kpi-dip .kpi-value { color: var(--n-cyan); }
html[data-theme="neon"] .kpi-accent,
html[data-theme="neon"] .kpi-momentum { box-shadow: 0 14px 44px rgba(0, 0, 0, 0.42), 0 0 38px rgba(255, 138, 31, 0.1); }
html[data-theme="neon"] .kpi-momentum .kpi-value { color: var(--violet); }

html[data-theme="neon"] .card-head h2 .icon,
html[data-theme="neon"] .table-head h2 .icon,
html[data-theme="neon"] .section-head h2 .icon,
html[data-theme="neon"] .table-title h2 .icon { color: var(--n-magenta); filter: drop-shadow(0 0 6px rgba(255, 45, 149, 0.7)); }
html[data-theme="neon"] .momentum-card .table-title h2 .icon,
html[data-theme="neon"] .gh-title .icon { color: var(--violet); filter: drop-shadow(0 0 6px rgba(176, 124, 255, 0.8)); }
html[data-theme="neon"] .positions-card .count-pill,
html[data-theme="neon"] .positions-section .count-pill { background: var(--green-soft); color: var(--green); box-shadow: 0 0 10px rgba(29, 242, 176, 0.25); }

html[data-theme="neon"] .table-head,
html[data-theme="neon"] .tabs-bar,
html[data-theme="neon"] .table-note { background: rgba(155, 92, 255, 0.04); border-color: var(--line); }
html[data-theme="neon"] .momentum-card .table-head { background: linear-gradient(90deg, rgba(155, 92, 255, 0.16), transparent 70%); }
html[data-theme="neon"] .momentum-card,
html[data-theme="neon"] .gh-hero {
    background:
        linear-gradient(180deg, rgba(24, 16, 54, 0.86), rgba(11, 9, 28, 0.9)) padding-box,
        linear-gradient(135deg, rgba(155, 92, 255, 0.85), rgba(255, 45, 149, 0.4) 50%, rgba(47, 139, 255, 0.7)) border-box;
}

/* ---------- Tabovi i prekidač pogleda ---------- */

html[data-theme="neon"] .filter-tabs { background: rgba(155, 92, 255, 0.09); border: 1px solid var(--line); }
html[data-theme="neon"] .tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 138, 31, 0.2), rgba(255, 45, 149, 0.22));
    box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.5), 0 0 14px rgba(255, 45, 149, 0.2);
}
html[data-theme="neon"] .tab-dip.active { background: linear-gradient(135deg, rgba(25, 227, 255, 0.16), rgba(47, 139, 255, 0.2)); box-shadow: inset 0 0 0 1px rgba(25, 227, 255, 0.5), 0 0 14px rgba(25, 227, 255, 0.18); }
html[data-theme="neon"] .tab-momentum.active,
html[data-theme="neon"] .mm-interval .tab.active { background: linear-gradient(135deg, rgba(155, 92, 255, 0.28), rgba(255, 45, 149, 0.16)); box-shadow: inset 0 0 0 1px var(--violet-line), 0 0 14px rgba(155, 92, 255, 0.25); }
html[data-theme="neon"] .tab-count, html[data-theme="neon"] .count-pill { background: rgba(176, 146, 255, 0.18); }

html[data-theme="neon"] .view-switch { background: rgba(155, 92, 255, 0.07); border-color: var(--line-strong); }
html[data-theme="neon"] .view-tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 138, 31, 0.2), rgba(255, 45, 149, 0.2) 55%, rgba(155, 92, 255, 0.22));
    border-color: rgba(255, 45, 149, 0.55);
    box-shadow: 0 8px 30px rgba(255, 45, 149, 0.18);
}
html[data-theme="neon"] .view-tab.active .icon { color: var(--n-orange); filter: drop-shadow(0 0 6px rgba(255, 138, 31, 0.8)); }
html[data-theme="neon"] .view-tab-momentum.active {
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.3), rgba(47, 139, 255, 0.18) 60%, rgba(255, 45, 149, 0.16));
    border-color: var(--violet-line);
    box-shadow: 0 8px 30px rgba(155, 92, 255, 0.28);
}
html[data-theme="neon"] .view-tab-momentum.active .icon { color: var(--violet); filter: drop-shadow(0 0 6px rgba(176, 124, 255, 0.9)); }

/* ---------- Dugmad ---------- */

html[data-theme="neon"] .btn-primary { background: var(--n-grad); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
html[data-theme="neon"] .btn-primary:hover:not(:disabled) { box-shadow: 0 6px 28px rgba(255, 45, 149, 0.5); }
html[data-theme="neon"] .btn-ghost { border-color: var(--line-strong); }
html[data-theme="neon"] .btn-chart { background: linear-gradient(135deg, rgba(155, 92, 255, 0.22), rgba(47, 139, 255, 0.14)); }
html[data-theme="neon"] .btn-binance { box-shadow: 0 0 16px rgba(240, 185, 11, 0.22); }

/* ---------- Tabele ---------- */

html[data-theme="neon"] .data-table th { background: rgba(8, 5, 24, 0.55); color: #8f8cc2; }
html[data-theme="neon"] .data-table td { border-bottom-color: rgba(160, 130, 255, 0.11); }
html[data-theme="neon"] .data-table tbody tr:hover { background: linear-gradient(90deg, rgba(155, 92, 255, 0.14), rgba(255, 45, 149, 0.06)); }
html[data-theme="neon"] .coin-icon {
    background: linear-gradient(135deg, rgba(255, 138, 31, 0.28), rgba(255, 45, 149, 0.26) 55%, rgba(155, 92, 255, 0.3));
    border-color: rgba(255, 45, 149, 0.4);
    box-shadow: 0 0 14px rgba(255, 45, 149, 0.2);
}
html[data-theme="neon"] .coin-icon-m {
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.4), rgba(47, 139, 255, 0.28));
    border-color: var(--violet-line);
    color: #fff;
    box-shadow: 0 0 14px rgba(155, 92, 255, 0.35);
}
html[data-theme="neon"] .row-dip { background: linear-gradient(90deg, rgba(25, 227, 255, 0.09), transparent 60%); box-shadow: inset 3px 0 0 var(--n-cyan), inset 14px 0 24px -18px var(--n-cyan); }
html[data-theme="neon"] .row-buy { box-shadow: inset 3px 0 0 var(--green), inset 14px 0 24px -18px var(--green); }
html[data-theme="neon"] .row-deep { box-shadow: inset 3px 0 0 var(--orange), inset 14px 0 24px -18px var(--orange); }
html[data-theme="neon"] .row-sell { box-shadow: inset 3px 0 0 var(--yellow), inset 14px 0 24px -18px var(--yellow); }
html[data-theme="neon"] .row-stop { box-shadow: inset 3px 0 0 var(--red); }
html[data-theme="neon"] .row-m-spike { background: linear-gradient(90deg, rgba(155, 92, 255, 0.14), transparent 65%); box-shadow: inset 3px 0 0 var(--violet), inset 14px 0 24px -18px var(--violet); }
html[data-theme="neon"] .row-m-rising { background: linear-gradient(90deg, rgba(29, 242, 176, 0.09), transparent 65%); box-shadow: inset 3px 0 0 var(--green), inset 14px 0 24px -18px var(--green); }
html[data-theme="neon"] .badge-breakout,
html[data-theme="neon"] .badge-rising { background: linear-gradient(135deg, #1df2b0, #19e3ff); box-shadow: 0 0 18px rgba(29, 242, 176, 0.5); }
html[data-theme="neon"] .badge-takeprofit { background: linear-gradient(135deg, #ffc533, #ff8a1f); box-shadow: 0 0 18px rgba(255, 138, 31, 0.45); }
html[data-theme="neon"] .zone-band { background: linear-gradient(90deg, rgba(25, 227, 255, 0.5), rgba(29, 242, 176, 0.5)); }

/* ---------- Otvorene pozicije ---------- */

html[data-theme="neon"] .pos-card {
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(29, 242, 176, 0.12), rgba(13, 10, 32, 0.92) 46%) padding-box,
        linear-gradient(135deg, rgba(29, 242, 176, 0.85), rgba(25, 227, 255, 0.4) 50%, rgba(155, 92, 255, 0.6)) border-box;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45), 0 0 40px rgba(29, 242, 176, 0.12);
}
html[data-theme="neon"] .pos-card.is-trailing { box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45), 0 0 56px rgba(29, 242, 176, 0.3); }
html[data-theme="neon"] .pos-card.is-loss {
    background:
        linear-gradient(165deg, rgba(255, 77, 125, 0.12), rgba(13, 10, 32, 0.92) 46%) padding-box,
        linear-gradient(135deg, rgba(255, 77, 125, 0.85), rgba(255, 138, 31, 0.4) 55%, rgba(155, 92, 255, 0.45)) border-box;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45), 0 0 36px rgba(255, 77, 125, 0.14);
}
html[data-theme="neon"] .rb-track { background: rgba(176, 146, 255, 0.16); }
html[data-theme="neon"] .rb-fill { background: linear-gradient(90deg, rgba(25, 227, 255, 0.4), var(--green)); box-shadow: 0 0 12px rgba(29, 242, 176, 0.45); }
html[data-theme="neon"] .range-bar.is-down .rb-fill { background: linear-gradient(90deg, var(--red), rgba(255, 138, 31, 0.45)); box-shadow: 0 0 12px rgba(255, 77, 125, 0.4); }
html[data-theme="neon"] .rb-price { border-color: #0b0920; }
html[data-theme="neon"] .positions-empty { background: rgba(155, 92, 255, 0.05); border-color: var(--line-strong); }

/* ---------- Live chip, prekidači, paneli ---------- */

html[data-theme="neon"] .live-chip,
html[data-theme="neon"] .calc-inline { background: rgba(155, 92, 255, 0.08); border-color: var(--line-strong); }
html[data-theme="neon"] .live-dot { background: var(--n-cyan); box-shadow: 0 0 12px var(--n-cyan); }
html[data-theme="neon"] .live-dot.gh-ok { background: var(--violet); box-shadow: 0 0 12px var(--violet); }
html[data-theme="neon"] .sound-panel { background: rgba(12, 9, 30, 0.95); border-color: var(--line-strong); box-shadow: var(--shadow), 0 0 40px rgba(155, 92, 255, 0.14); }
html[data-theme="neon"] .switch i { background: #241f4d; }
html[data-theme="neon"] .switch input:checked + i { background: linear-gradient(135deg, rgba(255, 138, 31, 0.35), rgba(255, 45, 149, 0.4)); box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.55); }
html[data-theme="neon"] .switch input:checked + i::after { background: #fff; box-shadow: 0 0 10px rgba(255, 45, 149, 0.8); }
html[data-theme="neon"] input[type="range"] { accent-color: var(--n-magenta); }
html[data-theme="neon"] .range-row output { color: var(--n-orange); }

html[data-theme="neon"] .gh-hero { box-shadow: 0 14px 44px rgba(0, 0, 0, 0.42), 0 0 50px rgba(155, 92, 255, 0.18); }
html[data-theme="neon"] .gh-chip { background: rgba(8, 5, 24, 0.55); border-color: var(--line-strong); }
html[data-theme="neon"] .gh-chip em { color: var(--n-orange); }

html[data-theme="neon"] .modal-overlay { background: rgba(4, 2, 14, 0.8); }
html[data-theme="neon"] .modal-head, html[data-theme="neon"] .modal-foot { background: rgba(8, 5, 24, 0.55); }
html[data-theme="neon"] .modal-panel { background: rgba(155, 92, 255, 0.06); border-color: var(--line); }
html[data-theme="neon"] .modal-chart { border-color: var(--line-strong); box-shadow: 0 0 30px rgba(47, 139, 255, 0.14); }
html[data-theme="neon"] .alert-card { background: rgba(10, 7, 26, 0.95); }

html[data-theme="neon"] .bottom-nav { background: rgba(8, 5, 22, 0.9); border-top-color: var(--line-strong); box-shadow: 0 -10px 40px rgba(155, 92, 255, 0.12); }
html[data-theme="neon"] .bottom-nav a.active { color: #fff; background: linear-gradient(135deg, rgba(255, 138, 31, 0.2), rgba(255, 45, 149, 0.22)); box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.4); }

html[data-theme="neon"] .orb-a { background: #ff2d95; }
html[data-theme="neon"] .orb-b { background: #2f8bff; }
html[data-theme="neon"] .spinner { border-top-color: var(--n-magenta); }

/* ---------- Grafički pregled (prsten + stubići) ---------- */

html[data-theme="neon"] .neon-panel {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.np-span-4 { grid-column: span 4; }
.np-span-8 { grid-column: span 8; }
.np-span-12 { grid-column: span 12; }
.np-card { position: relative; min-width: 0; padding: 18px 20px; border-radius: var(--radius); overflow: hidden; }
html[data-theme="neon"] .np-card::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 45, 149, 0.16), transparent 68%);
    pointer-events: none;
}
.np-card h3 { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-strong); }
.np-card h3 small { color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: none; }

.np-donut-wrap { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.np-donut { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.np-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.np-track { fill: none; stroke: rgba(176, 146, 255, 0.13); stroke-width: 11; }
.np-seg { fill: none; stroke-width: 11; transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease; }
.np-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.np-center strong { font-size: 30px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 45, 149, 0.5); }
.np-center span { margin-top: 3px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.np-legend { list-style: none; display: grid; gap: 7px; flex: 1; min-width: 140px; }
.np-legend li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text); }
.np-legend li i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.np-legend li span { flex: 1; }
.np-legend li strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }

.np-bars { position: relative; }
.np-plot { position: relative; height: 210px; padding-top: 22px; }
.np-zone-wrap { position: absolute; left: 0; right: 0; top: 22px; bottom: 24px; pointer-events: none; }
.np-zone { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, rgba(29, 242, 176, 0.1), rgba(29, 242, 176, 0.04)); border-top: 1px dashed rgba(29, 242, 176, 0.5); border-bottom: 1px dashed rgba(29, 242, 176, 0.5); border-radius: 4px; }
.np-zone span { position: absolute; right: 8px; top: 3px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(29, 242, 176, 0.9); }
.np-line { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 197, 51, 0.7); }
.np-line span { position: absolute; right: 0; bottom: 2px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.np-cols { position: relative; display: flex; align-items: stretch; gap: 8px; height: 100%; }
.np-col { flex: 1 1 0; min-width: 0; max-width: 70px; display: flex; flex-direction: column; }
.np-barbox { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.np-bar { position: relative; width: 62%; min-width: 12px; border-radius: 8px 8px 3px 3px; transition: height 0.6s ease; }
.np-val { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 3px; font-size: 10px; font-weight: 700; color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.np-lab { height: 24px; padding-top: 6px; text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-empty { display: flex; align-items: center; justify-content: center; height: 150px; color: var(--muted); font-size: 13px; }

.np-c-cyan { background: linear-gradient(180deg, #19e3ff, #2f8bff 70%, rgba(47, 139, 255, 0.25)); box-shadow: 0 0 16px rgba(25, 227, 255, 0.35); }
.np-c-violet { background: linear-gradient(180deg, #c58cff, #9b5cff 70%, rgba(155, 92, 255, 0.25)); box-shadow: 0 0 16px rgba(155, 92, 255, 0.4); }
.np-c-orange { background: linear-gradient(180deg, #ffb347, #ff8a1f 55%, rgba(255, 45, 149, 0.45)); box-shadow: 0 0 16px rgba(255, 138, 31, 0.4); }
.np-c-green { background: linear-gradient(180deg, #5dffd0, #1df2b0 60%, rgba(25, 227, 255, 0.3)); box-shadow: 0 0 16px rgba(29, 242, 176, 0.4); }
.np-c-yellow { background: linear-gradient(180deg, #ffe27a, #ffc533 55%, rgba(255, 138, 31, 0.4)); box-shadow: 0 0 16px rgba(255, 197, 51, 0.4); }
.np-c-red { background: linear-gradient(180deg, #ff7a9c, #ff4d7d 60%, rgba(255, 45, 149, 0.3)); box-shadow: 0 0 16px rgba(255, 77, 125, 0.4); }

/* Linijski / površinski grafikoni */
.np-chart { position: relative; width: 100%; height: 240px; }
.np-chart-short { height: 190px; }
.np-svg { display: block; overflow: visible; }
.np-grid { stroke: rgba(176, 146, 255, 0.11); stroke-width: 1; }
.np-zero { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 4 4; }
.np-axis { fill: #8c8bb4; font: 600 10px var(--font); font-variant-numeric: tabular-nums; }
.np-axis-r { fill: #6f6d99; }
.np-chips { position: absolute; top: 0; left: 46px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; pointer-events: none; }
.np-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--text); }
.np-chip i { width: 8px; height: 8px; border-radius: 50%; }
.np-cross { position: absolute; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)); pointer-events: none; }
.np-tip {
    position: absolute;
    z-index: 5;
    min-width: 170px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(10, 7, 26, 0.94);
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(155, 92, 255, 0.2);
    pointer-events: none;
    font-size: 11.5px;
}
.np-tip-time { margin-bottom: 5px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; }
.np-tip-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; color: var(--text); }
.np-tip-row i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.np-tip-row span { flex: 1; }
.np-tip-row strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }

.np-range { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(155, 92, 255, 0.1); border: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.np-range button { padding: 3px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 11px var(--font); cursor: pointer; transition: 0.2s; }
.np-range button:hover { color: var(--text-strong); }
.np-range button.active { color: #fff; background: linear-gradient(135deg, rgba(255, 138, 31, 0.3), rgba(255, 45, 149, 0.35)); box-shadow: 0 0 12px rgba(255, 45, 149, 0.3); }
.np-total { margin-left: auto; font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--text-strong); text-shadow: 0 0 16px currentColor; font-variant-numeric: tabular-nums; }
.np-total.up { color: var(--green); }
.np-total.down { color: var(--red); }

/* Merači (prstenovi) */
.np-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.np-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.np-gring { position: relative; width: 92px; height: 92px; }
.np-gring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.np-gtrack { fill: none; stroke: rgba(176, 146, 255, 0.14); stroke-width: 9; }
.np-garc { fill: none; stroke-width: 9; transition: stroke-dasharray 0.8s ease; }
.np-gval { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(255, 45, 149, 0.45); }
.np-gval small { font-size: 11px; font-weight: 700; margin-left: 1px; opacity: 0.8; }
.np-glabel { margin-top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-strong); }
.np-gsub { margin-top: 2px; font-size: 10.5px; color: var(--muted); line-height: 1.25; }

.np-card { transition: box-shadow 0.25s, transform 0.25s; }
html[data-theme="neon"] .np-card:hover { box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 0 46px rgba(255, 45, 149, 0.14); }

/* ---------- Telefon ---------- */

@media (max-width: 1100px) {
    .np-span-4, .np-span-8 { grid-column: span 12; }
}

@media (max-width: 860px) {
    #theme-toggle { display: none; }
    html[data-theme="neon"] .neon-panel { gap: 10px; margin-bottom: 14px; }
    .np-card { padding: 14px; }
    .np-donut { width: 124px; height: 124px; }
    .np-center strong { font-size: 24px; }
    .np-plot { height: 180px; }
    .np-chart { height: 220px; }
    .np-chart-short { height: 170px; }
    .np-gring { width: 76px; height: 76px; }
    .np-gval { font-size: 17px; }
    .np-chips { left: 40px; gap: 4px 10px; }
    .np-chip { font-size: 10px; }
    .np-range { margin-left: 0; }
    .np-cols { gap: 4px; }
    .np-bar { width: 72%; }
    .np-lab { font-size: 9px; }
    html[data-theme="neon"] .data-table tr { background: rgba(23, 19, 58, 0.85); border-color: var(--line-strong); }
    html[data-theme="neon"] .data-table tr.row-dip { background: linear-gradient(135deg, rgba(25, 227, 255, 0.12), rgba(23, 19, 58, 0.85) 60%); border-left-color: var(--n-cyan) !important; }
    html[data-theme="neon"] .data-table tr.row-m-spike { background: linear-gradient(135deg, rgba(155, 92, 255, 0.18), rgba(23, 19, 58, 0.85) 60%); }
    html[data-theme="neon"] .kpi { padding: 14px; }
}

html[data-theme="neon"] .boot {
    background:
        radial-gradient(ellipse 50% 40% at 48% 40%, rgba(255, 45, 149, 0.18), transparent 68%),
        radial-gradient(ellipse 36% 32% at 62% 58%, rgba(25, 227, 255, 0.12), transparent 70%),
        #05040d;
}
html[data-theme="neon"] .boot-ring { border-color: rgba(255, 45, 149, 0.4); }
html[data-theme="neon"] .boot-ring.r2 { border-color: rgba(155, 92, 255, 0.45); }
html[data-theme="neon"] .boot-ring.r3 { border-color: rgba(25, 227, 255, 0.4); }
html[data-theme="neon"] .boot-sweep {
    background: conic-gradient(from 0deg, transparent 0 66%, rgba(155, 92, 255, 0.12) 80%, #ff2d95 93%, #19e3ff 100%);
}
html[data-theme="neon"] .boot-core { background: #ff2d95; box-shadow: 0 0 18px #ff2d95, 0 0 36px rgba(25, 227, 255, 0.45); }
html[data-theme="neon"] .boot-blip.b1 { background: #ff8a1f; box-shadow: 0 0 12px #ff8a1f; }
html[data-theme="neon"] .boot-blip.b2 { background: #19e3ff; box-shadow: 0 0 12px #19e3ff; }
html[data-theme="neon"] .boot-word em {
    background: linear-gradient(100deg, #ff8a1f, #ff2d95 45%, #9b5cff 75%, #19e3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[data-theme="neon"] .boot-track span {
    background: linear-gradient(90deg, transparent, #ff2d95, #19e3ff);
}