/* ============================================================================
   THEME 8-BIT — прихована ретро-тема порталу
   - .p8-* (катсцена/док) — доступні завжди (ролик грає під час анлоку)
   - html.theme-8bit ... — сам ретро-скін (накриває реальний DOM усіх розділів)
   ========================================================================== */

@font-face {
    font-family: 'PixelVT';
    src: url('/fonts/vt323.ttf') format('truetype');
    font-display: swap;
}

:root {
    --p8-bg:#0b0b1f; --p8-panel:#161636; --p8-ink:#fcfcfc; --p8-mut:#9b9bd0;
    --p8-acc:#a47be8; --p8-red:#f83800; --p8-gold:#fcd000; --p8-green:#3cf800;
    --p8-blue:#3cbcfc; --p8-pink:#f878f8; --p8-orange:#f87800;
}

/* ===================== МІНІ-ГРА «КОНТРА» (canvas-оверлей) ===================== */
#p8-game{position:fixed;inset:0;z-index:9600;background:#0b0b1f}
#p8-game canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.p8-game-hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:9601;
    font-family:'PixelVT',monospace;font-size:18px;color:#9b9bd0;pointer-events:none;white-space:nowrap;max-width:96vw;overflow:hidden;text-overflow:ellipsis}
.p8-game-x{position:fixed;top:10px;right:14px;z-index:9602;width:46px;height:46px;background:#000;
    border:3px solid var(--p8-gold);color:var(--p8-gold);font-family:'PixelVT',monospace;font-size:24px;cursor:pointer;line-height:1}
@media(max-width:560px){.p8-game-hint{font-size:13px;white-space:normal;text-align:center}}

/* ===================== МОБІЛЬНІ ФІКСИ 8-БІТ (вузькі екрани) ===================== */
@media(max-width:560px){
    html.theme-8bit{font-size:14px}
    html.theme-8bit h1,html.theme-8bit h2{font-size:1.3rem !important}
    html.theme-8bit .text-3xl,html.theme-8bit .text-4xl,html.theme-8bit .text-5xl,html.theme-8bit .text-6xl{font-size:1.5rem !important}
    html.theme-8bit #sidebar-logo-container h1::after{font-size:1rem !important}
    html.theme-8bit #sidebar-logo-container .sb-hide span::after{font-size:.72rem !important}
    html.theme-8bit #welcome-clock{font-size:2rem !important}
    /* док музики/гри — переносимо, щоб не перекривав */
    html.theme-8bit #p8-dock{right:6px;bottom:6px;gap:5px}
    html.theme-8bit #p8-dock button{font-size:14px;padding:3px 7px}
    /* мобільна шапка: щоб кнопки не пливли */
    html.theme-8bit header h1{font-size:1.1rem !important}
}

/* ===================== ПРИКОЛ-БІГУНОК (грибочок по верху екрана) ===================== */
.p8-runner{position:fixed;top:8px;left:-60px;z-index:7000;pointer-events:auto;cursor:pointer;
    width:40px;height:40px;image-rendering:pixelated;animation:p8run 6s linear forwards}
.p8-runner img{width:100%;height:100%;image-rendering:pixelated;display:block;animation:p8bob .26s steps(2) infinite}
@keyframes p8run{0%{left:-60px;transform:translateY(0)}84%{left:90vw;transform:translateY(0)}100%{left:102vw;transform:translateY(80px)}}
@keyframes p8bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* спіймали — телепорт-спалах */
.p8-runner.p8-caught{animation:p8caught .35s ease-out forwards !important}
.p8-runner.p8-caught img{animation:none !important}
@keyframes p8caught{0%{transform:scale(1);opacity:1;filter:brightness(1)}
    40%{transform:scale(1.5);opacity:1;filter:brightness(3)}100%{transform:scale(2.2) rotate(15deg);opacity:0}}

/* ===================== ПРИКОЛ-МОНЕТКА «+100» (клік по маскоту) ===================== */
.p8-coin{position:fixed;z-index:9999;pointer-events:none;font-family:'PixelVT',monospace;
    font-size:26px;color:#fcd000;text-shadow:2px 2px 0 #000;transform:translate(-50%,-50%);
    animation:p8coin .9s ease-out forwards}
@keyframes p8coin{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}
    100%{opacity:0;transform:translate(-50%,-170%) scale(1.1)}}
#sidebar-logo-container{cursor:pointer;user-select:none}

/* ===================== ДОК (перемикач теми + музика) ===================== */
#p8-dock{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;gap:8px;font-family:'PixelVT',monospace}
#p8-dock button{font-family:'PixelVT',monospace;font-size:20px;letter-spacing:1px;background:#000;color:var(--p8-gold);
    border:3px solid var(--p8-gold);padding:4px 12px;cursor:pointer;line-height:1;image-rendering:pixelated}
#p8-dock button:hover{background:var(--p8-gold);color:#000}
#p8-dock #p8-trk{color:var(--p8-blue);border-color:var(--p8-blue)}
#p8-dock #p8-trk:hover{background:var(--p8-blue);color:#000}

/* ===================== КАТСЦЕНА АНЛОКУ ===================== */
#p8-cut{position:fixed;inset:0;z-index:9500;background:#000;display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-family:'PixelVT',monospace;opacity:0;transition:opacity .5s}
#p8-cut.show{opacity:1}
#p8-cut.closing{opacity:0}
#p8-cut .p8-flash{position:fixed;inset:0;background:#fff;animation:p8flash .35s ease}
@keyframes p8flash{0%{opacity:.95}100%{opacity:0}}
.p8-arena{position:relative;width:760px;max-width:92vw;height:300px;border:4px solid var(--p8-acc);
    background:linear-gradient(#0a0a22,#141433);overflow:hidden}
.p8-ground{position:absolute;left:0;right:0;bottom:0;height:46px;border-top:4px solid var(--p8-acc);
    background:repeating-linear-gradient(90deg,#241a3a 0 16px,#1a1230 16px 32px)}
.p8-hero{position:absolute;bottom:46px;left:40px;width:92px;height:92px;image-rendering:pixelated;animation:p8hop .5s steps(2) infinite}
@keyframes p8hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.p8-foe{position:absolute;bottom:60px;font-size:46px}
.p8-f1{right:90px;animation:p8march 1.6s linear infinite}
.p8-f2{right:230px;animation:p8march 1.6s linear infinite .3s}
.p8-f3{right:360px;animation:p8march 1.6s linear infinite .6s}
@keyframes p8march{0%{transform:translateX(0)}100%{transform:translateX(40px)}}
.p8-shot{position:absolute;bottom:96px;left:150px;color:var(--p8-gold);font-size:26px;animation:p8fly .7s linear infinite}
@keyframes p8fly{from{left:150px;opacity:1}to{left:560px;opacity:.2}}
.p8-hit{position:absolute;bottom:96px;right:120px;color:var(--p8-red);font-size:28px;text-shadow:2px 2px 0 #000;animation:p8pop .8s steps(3) infinite}
@keyframes p8pop{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:.4}}
.p8-hp{position:absolute;top:10px;right:14px;width:200px;height:18px;border:3px solid var(--p8-ink);background:#300}
.p8-hp i{display:block;height:100%;width:34%;background:var(--p8-red);animation:p8hp 6s linear forwards}
@keyframes p8hp{to{width:96%;background:var(--p8-green)}}
.p8-score{position:absolute;top:10px;left:14px;color:var(--p8-green);font-size:24px}
.p8-cuttext{margin-top:22px;text-align:center}
.p8-cuttext h1{font-size:52px;color:var(--p8-gold);text-shadow:4px 4px 0 var(--p8-red);letter-spacing:3px}
.p8-cuttext p{color:var(--p8-blue);font-size:26px;margin-top:6px}
.p8-cuttext small{display:block;color:#6b6b90;font-size:20px;margin-top:10px}
.p8-ach{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(40px);opacity:0;
    display:flex;align-items:center;gap:16px;background:#000;border:4px solid var(--p8-gold);padding:14px 22px;transition:all .5s}
.p8-ach.show{transform:translateX(-50%);opacity:1}
.p8-ach .ico{font-size:38px}.p8-ach .t{color:var(--p8-gold);font-size:25px}.p8-ach .d{color:var(--p8-mut);font-size:19px}

/* ============================================================================
   САМ СКІН — активний тільки під html.theme-8bit
   ========================================================================== */
html.theme-8bit, html.theme-8bit *{
    font-family:'PixelVT',monospace !important;
    letter-spacing:.5px;
    image-rendering:pixelated;
    border-radius:0 !important;        /* геть закруглення */
    box-shadow:none !important;
    text-shadow:none;
    backdrop-filter:none !important;
    transition:none !important;
}
/* збільшуємо дрібний текст (VT323 вузький) */
html.theme-8bit{font-size:18px}
html.theme-8bit .text-xs,html.theme-8bit .text-sm,html.theme-8bit .text-\[10px\]{font-size:16px !important}

/* фон/скло → суцільний NES-дарк */
html.theme-8bit body,
html.theme-8bit .bg-gray-100,html.theme-8bit .bg-gray-50,html.theme-8bit .bg-white{background:var(--p8-bg) !important;color:var(--p8-ink) !important}
/* КАСТОМНИЙ 8-БІТ ФОН — зоряне небо + сітка, що ПОВІЛЬНО ПЛИВЕ (жива тема) */
html.theme-8bit body,
html.theme-8bit .flex.h-screen,
html.theme-8bit .bg-gray-100,html.theme-8bit .dark\:bg-gray-900{
    background:url('/img/bg8bit.png') repeat !important;
    background-color:var(--p8-bg) !important;
    animation:p8bgdrift 70s linear infinite !important}
@keyframes p8bgdrift{from{background-position:0 0}to{background-position:0 -576px}}
/* падаюча зірка (періодична, спавниться з JS) */
.p8-shoot{position:fixed;z-index:6000;pointer-events:none;height:3px;width:90px;
    background:linear-gradient(90deg,transparent,#fff);image-rendering:pixelated;
    box-shadow:0 0 6px #fff;animation:p8shoot 1.1s linear forwards}
@keyframes p8shoot{0%{opacity:0;transform:translate(0,0) rotate(28deg)}
    12%{opacity:1}100%{opacity:0;transform:translate(300px,160px) rotate(28deg)}}
html.theme-8bit .dark\:bg-gray-900,html.theme-8bit .dark\:bg-gray-800{background:var(--p8-bg) !important}
html.theme-8bit .text-gray-900,html.theme-8bit .text-gray-800,html.theme-8bit .text-gray-700,
html.theme-8bit .dark\:text-white,html.theme-8bit .dark\:text-gray-200,html.theme-8bit .dark\:text-gray-300{color:var(--p8-ink) !important}
html.theme-8bit .text-gray-500,html.theme-8bit .text-gray-400{color:var(--p8-mut) !important}

/* скан-лінії на весь екран */
html.theme-8bit body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:8000;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 2px,transparent 2px 4px)}

/* картки/панелі/таблиці → піксельні рамки */
html.theme-8bit .hof-glass-panel,
html.theme-8bit .dashboard-widget,
html.theme-8bit [class*="rounded-2xl"],html.theme-8bit [class*="rounded-xl"],html.theme-8bit [class*="rounded-3xl"],
html.theme-8bit table,html.theme-8bit .shadow-lg,html.theme-8bit .shadow-xl{
    background:var(--p8-panel) !important;border:3px solid var(--p8-ink) !important}
html.theme-8bit th,html.theme-8bit td{border:2px solid #2a2a52 !important}

/* кнопки → піксельні */
html.theme-8bit button:not(#p8-dock button):not(.p8-mascot),
html.theme-8bit .btn,html.theme-8bit [class*="bg-purple-6"],html.theme-8bit [class*="bg-blue-6"]{
    border:3px solid var(--p8-ink) !important;background:#000 !important;color:var(--p8-gold) !important}
html.theme-8bit button:hover{background:var(--p8-gold) !important;color:#000 !important}

/* таби-кнопки (телефонія/QA та ін.) — однакова мін-ширина, щоб короткі (NPS) не стискались */
html.theme-8bit .tab-btn{min-width:130px;padding:10px 14px !important;text-align:center}

/* хрестик закриття модалок — нормальний розмір (а не крихітна рамка) */
html.theme-8bit .modal-close-btn{min-width:42px;min-height:42px;padding:0 !important;font-size:26px !important;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* слоник-маскот замість «П» у шапці сайдбару */
html.theme-8bit #sidebar-logo-container .w-10.h-10{
    background:#000 url('/img/mascot.png') center/86% no-repeat !important;
    color:transparent !important;font-size:0 !important;border:2px solid var(--p8-acc) !important;
    animation:p8mascotbob 1.3s steps(2) infinite}                 /* анімований слоник у шапці */
@keyframes p8mascotbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* шапка 8-біт: «8-BIT PORTAL» + підзаголовок, вирівняні, КРУПНІШІ */
html.theme-8bit #sidebar-logo-container h1,
html.theme-8bit #sidebar-logo-container .sb-hide span{
    margin:0 !important;padding:0 !important;text-indent:0 !important;letter-spacing:1px !important;display:block !important}
html.theme-8bit #sidebar-logo-container h1{font-size:0 !important;line-height:1.2 !important}
html.theme-8bit #sidebar-logo-container h1::after{
    content:'8-BIT PORTAL';font-size:1.35rem;color:var(--p8-gold) !important}
html.theme-8bit #sidebar-logo-container .sb-hide span{font-size:0 !important}
html.theme-8bit #sidebar-logo-container .sb-hide span::after{
    content:'★ INSERT COIN';font-size:.9rem;color:var(--p8-blue) !important}
/* 3-й рядок: рахунок монеток (тап по слонику) */
html.theme-8bit #sidebar-logo-container #p8-coins{
    font-size:.85rem;color:var(--p8-gold) !important;letter-spacing:1px;margin-top:3px;line-height:1}
/* жовтий картридж праворуч у шапці (зникає у згорнутому сайдбарі) */
html.theme-8bit #sidebar-logo-container::after{
    content:'';margin-left:auto;flex-shrink:0;width:46px;height:35px;
    background:url('/img/cartridge8bit.png') center/contain no-repeat;
    image-rendering:pixelated;animation:p8cartbob 1.6s steps(2) infinite}
@keyframes p8cartbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-4deg)}}
html.theme-8bit #sidebar.sidebar-collapsed #sidebar-logo-container::after{display:none}

/* ───── ретро-декор на віджетах головної (картриджі + джойстик), лише 8-біт ───── */
html.theme-8bit .dashboard-widget{position:relative}
@keyframes p8decobob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}

/* НОВИНИ — віяло з кольорових картриджів (декор, по центру-низу) */
html.theme-8bit .dashboard-widget[data-widget-id="news_feed"]::after{
    content:'';position:absolute;bottom:12px;right:50%;z-index:2;pointer-events:none;opacity:.95;
    image-rendering:pixelated;background:center/contain no-repeat;transform-origin:bottom center;
    width:150px;height:38px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55));
    background-image:url('/img/cartridge_fan.png');animation:p8fanbob 2.6s steps(2) infinite}
@keyframes p8fanbob{0%,100%{transform:translateX(50%) translateY(0) rotate(-2deg)}50%{transform:translateX(50%) translateY(-4px) rotate(2deg)}}

/* КОЛЕКЦІЙНИЙ КАРТРИДЖ (інжектиться JS у звичайні віджети, клікабельний) */
html.theme-8bit .p8-cart{
    position:absolute;bottom:12px;right:14px;width:58px;height:44px;z-index:6;cursor:pointer;
    background:center/contain no-repeat;image-rendering:pixelated;
    filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55));animation:p8decobob 2.2s steps(2) infinite;
    transition:transform .12s}
html.theme-8bit .p8-cart:hover{transform:scale(1.18) rotate(-6deg)}
html.theme-8bit .p8-cart-got{pointer-events:none;animation:p8cartgot .44s steps(7) forwards}
@keyframes p8cartgot{0%{transform:scale(1)}35%{transform:scale(1.45) translateY(-10px)}100%{transform:scale(0) translateY(-46px) rotate(200deg);opacity:0}}

/* ДЖОЙСТИК-ПРИКОЛ (інжектиться JS на привітання, тап → смішний звук) */
html.theme-8bit .p8-joy{
    position:absolute;bottom:14px;left:16px;width:96px;height:51px;z-index:6;cursor:pointer;
    background:url('/img/joystick8bit.png') center/contain no-repeat;image-rendering:pixelated;
    filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55));animation:p8decobob 2.4s steps(2) infinite}
html.theme-8bit .p8-joy:hover{filter:drop-shadow(0 0 7px var(--p8-gold))}
html.theme-8bit .p8-joy-wiggle{animation:p8joywiggle .42s steps(5)}
@keyframes p8joywiggle{0%{transform:rotate(0)}25%{transform:rotate(-13deg) scale(1.12)}50%{transform:rotate(13deg) scale(1.12)}75%{transform:rotate(-8deg)}100%{transform:rotate(0)}}

/* у шапці: альтернатива картриджу — джойстик (клас p8-head-joy ставиться випадково при завантаженні) */
html.theme-8bit.p8-head-joy #sidebar-logo-container::after{
    width:60px;height:32px;background-image:url('/img/joystick8bit.png')}

/* центральне емодзі-«обличчя» черги → КАРТРИДЖ (різні кольори), клік зберігається */
html.theme-8bit [data-widget-id="asterisk_b2c"] .queue-emoji,
html.theme-8bit [data-widget-id="asterisk_b2b"] .queue-emoji,
html.theme-8bit [data-widget-id="asterisk_ao"]  .queue-emoji{
    font-size:0 !important;width:84px;height:63px;display:block;
    background:center/contain no-repeat;image-rendering:pixelated;
    filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}
html.theme-8bit [data-widget-id="asterisk_b2c"] .queue-emoji{background-image:url('/img/cartridge8bit.png')}
html.theme-8bit [data-widget-id="asterisk_b2b"] .queue-emoji{background-image:url('/img/cartridge_teal.png')}
html.theme-8bit [data-widget-id="asterisk_ao"]  .queue-emoji{background-image:url('/img/cartridge_red.png')}
/* анімований 8-біт годинник у віджеті привітання (пульсуюче свічення) */
html.theme-8bit #welcome-clock{color:var(--p8-gold) !important;animation:p8clock 1.8s ease-in-out infinite}
@keyframes p8clock{0%,100%{text-shadow:0 0 0 transparent;opacity:1}50%{text-shadow:0 0 10px var(--p8-gold);opacity:.9}}

/* у 8-біт темі кнопка тем (місяць/сонце) = ВИХІД на стандартну тему (обробник у theme-8bit.js).
   Світла/темна всередині 8-біт не перемикається — 8-біт завжди тёмний. */
html.theme-8bit .theme-toggle-btn{color:var(--p8-gold) !important}

/* ====== ЗГОРНУТИЙ САЙДБАР у 8-біт — ОДНАКОВІ квадрати, без вкладених рамок ====== */
/* нейтралізуємо обгортки/паддінги, що ламали ширину */
/* нуль горизонтальних паддінгів на ВСІХ контейнерах → 48px квадрати центруються однаково */
html.theme-8bit #sidebar.sidebar-collapsed nav{padding:8px 0 !important}
html.theme-8bit #sidebar.sidebar-collapsed .nav-item-animate{width:auto !important;margin:0 !important;padding:0 !important;display:flex !important;justify-content:center !important}
html.theme-8bit #sidebar.sidebar-collapsed [class*="border-t"]{padding:8px 0 !important}
html.theme-8bit #sidebar.sidebar-collapsed .px-3.pb-2{padding:0 !important}
html.theme-8bit #sidebar.sidebar-collapsed .flex.justify-between{justify-content:center !important;padding:0 !important}
/* єдиний квадрат: nav-пункти + усі футер-кнопки */
html.theme-8bit #sidebar.sidebar-collapsed .nav-link,
html.theme-8bit #sidebar.sidebar-collapsed #sidebar-collapse-btn,
html.theme-8bit #sidebar.sidebar-collapsed #show-patch-notes-btn,
html.theme-8bit #sidebar.sidebar-collapsed #logout-button{
    width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;
    padding:0 !important;margin:7px auto !important;box-sizing:border-box !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    border:3px solid currentColor !important;overflow:visible !important}
/* внутрішня іконка-бокс — без власної рамки/фону (один чистий квадрат) */
html.theme-8bit #sidebar.sidebar-collapsed .nav-icon-box{
    border:none !important;background:transparent !important;box-shadow:none !important;
    width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;
    padding:0 !important;margin:0 !important;overflow:visible !important}
/* іконки — фіксований розмір, не обрізаються */
html.theme-8bit #sidebar.sidebar-collapsed .nav-link svg,
html.theme-8bit #sidebar.sidebar-collapsed #sidebar-collapse-btn svg,
html.theme-8bit #sidebar.sidebar-collapsed #show-patch-notes-btn svg,
html.theme-8bit #sidebar.sidebar-collapsed #logout-button svg{
    width:24px !important;height:24px !important;margin:0 !important;flex:none !important}

/* ---------------- САЙДБАР (зберігаємо ВСІ пункти, ретро-скін) ------------- */
html.theme-8bit #sidebar,html.theme-8bit .glass-sidebar{
    background:#000 !important;border-right:4px solid var(--p8-acc) !important}
/* приховуємо «сяйво»/blur-кружки навколо пунктів */
html.theme-8bit .nav-item-animate > .absolute{display:none !important}
html.theme-8bit .nav-link{
    border:3px solid #2a2a52 !important;background:var(--p8-panel) !important;
    margin:0 !important;transform:none !important}
html.theme-8bit .nav-link:hover{filter:brightness(1.3)}
html.theme-8bit .nav-icon-box{border:2px solid currentColor !important;background:#000 !important;border-radius:0 !important}
html.theme-8bit .nav-title{font-weight:normal !important;font-size:20px !important}
html.theme-8bit .nav-subtitle{color:var(--p8-mut) !important}

/* КОЛІР ПО data-theme (як було — кольорове меню) */
html.theme-8bit .nav-link[data-theme="purple"]{color:var(--p8-acc) !important}
html.theme-8bit .nav-link[data-theme="violet"]{color:var(--p8-acc) !important}
html.theme-8bit .nav-link[data-theme="blue"]{color:var(--p8-blue) !important}
html.theme-8bit .nav-link[data-theme="cyan"]{color:var(--p8-blue) !important}
html.theme-8bit .nav-link[data-theme="green"]{color:var(--p8-green) !important}
html.theme-8bit .nav-link[data-theme="lime"]{color:var(--p8-green) !important}
html.theme-8bit .nav-link[data-theme="gold"]{color:var(--p8-gold) !important}
html.theme-8bit .nav-link[data-theme="red"]{color:var(--p8-red) !important}
html.theme-8bit .nav-link[data-theme="slate"]{color:var(--p8-mut) !important}
/* активний пункт — заливка кольором розділу */
html.theme-8bit .nav-link.scale-\[1\.02\],
html.theme-8bit .nav-link[class*="bg-gradient"]{background:currentColor !important;border-color:#fff !important}
html.theme-8bit .nav-link[class*="bg-gradient"] .nav-title,
html.theme-8bit .nav-link[class*="bg-gradient"] .nav-subtitle{color:#000 !important}
html.theme-8bit .nav-link[class*="bg-gradient"] .nav-icon-box{background:rgba(0,0,0,.25) !important;color:#000 !important}

/* секції меню (ОСНОВНЕ/АНАЛІТИКА) */
html.theme-8bit .sidebar-section > summary{color:var(--p8-gold) !important;border-bottom:2px solid #2a2a52}
/* лого-блок зверху */
html.theme-8bit #sidebar img,html.theme-8bit #sidebar .rounded-2xl{image-rendering:pixelated}

/* заголовки розділів → ретро-акцент */
html.theme-8bit h1,html.theme-8bit h2{color:var(--p8-acc) !important;font-weight:normal !important;letter-spacing:1px}

/* посилання/акценти */
html.theme-8bit .text-purple-600,html.theme-8bit .text-purple-400,html.theme-8bit .text-indigo-600,html.theme-8bit .text-violet-600{color:var(--p8-acc) !important}
html.theme-8bit .text-blue-600,html.theme-8bit .text-blue-500,html.theme-8bit .text-blue-400{color:var(--p8-blue) !important}
html.theme-8bit .text-green-500,html.theme-8bit .text-emerald-500{color:var(--p8-green) !important}
html.theme-8bit .text-red-500,html.theme-8bit .text-red-600{color:var(--p8-red) !important}
html.theme-8bit .text-yellow-500,html.theme-8bit .text-amber-500{color:var(--p8-gold) !important}

/* ====== КАСТОМНІ ПІКСЕЛЬ-ІКОНКИ МЕНЮ (8-біт, пікселізовані SVG) ====== */
html.theme-8bit .nav-icon-box svg{display:none !important}
html.theme-8bit .nav-icon-box{display:flex !important;align-items:center !important;justify-content:center !important}
html.theme-8bit .nav-icon-box::before{content:'';display:block;width:26px;height:26px;background:currentColor;-webkit-mask:var(--p8ic) center/contain no-repeat;mask:var(--p8ic) center/contain no-repeat}
html.theme-8bit [data-nav="dashboard"] .nav-icon-box{--p8ic:url('/img/8bit/home.png')}
html.theme-8bit [data-nav="profile"] .nav-icon-box{--p8ic:url('/img/8bit/profile.png')}
html.theme-8bit [data-nav="search"] .nav-icon-box{--p8ic:url('/img/8bit/search.png')}
html.theme-8bit [data-nav="notifications"] .nav-icon-box{--p8ic:url('/img/8bit/bell.png')}
html.theme-8bit [data-nav="telephony"] .nav-icon-box{--p8ic:url('/img/8bit/phone.png')}
html.theme-8bit [data-nav="chat"] .nav-icon-box{--p8ic:url('/img/8bit/chat.png')}
html.theme-8bit [data-nav="wallboard"] .nav-icon-box{--p8ic:url('/img/8bit/wallboard.png')}
html.theme-8bit [data-nav="reports"] .nav-icon-box{--p8ic:url('/img/8bit/reports.png')}
html.theme-8bit [data-nav="monitoring"] .nav-icon-box{--p8ic:url('/img/8bit/monitoring.png')}
html.theme-8bit [data-nav="kaleidoscope"] .nav-icon-box{--p8ic:url('/img/8bit/kaleidoscope.png')}
html.theme-8bit [data-nav="tests-operator"] .nav-icon-box{--p8ic:url('/img/8bit/tests.png')}
html.theme-8bit [data-nav="my-evaluations"] .nav-icon-box{--p8ic:url('/img/8bit/qa.png')}
html.theme-8bit [data-nav="knowledge-base"] .nav-icon-box{--p8ic:url('/img/8bit/kb.png')}
html.theme-8bit [data-nav="achievements"] .nav-icon-box{--p8ic:url('/img/8bit/achievements.png')}
html.theme-8bit [data-nav="schedules"] .nav-icon-box{--p8ic:url('/img/8bit/schedule.png')}
html.theme-8bit [data-nav="hall-of-fame"] .nav-icon-box{--p8ic:url('/img/8bit/fame.png')}
html.theme-8bit [data-nav="users"] .nav-icon-box{--p8ic:url('/img/8bit/users.png')}
html.theme-8bit [data-nav="tests-admin"] .nav-icon-box{--p8ic:url('/img/8bit/tests.png')}
html.theme-8bit [data-nav="quality-assurance"] .nav-icon-box{--p8ic:url('/img/8bit/qa.png')}
html.theme-8bit [data-nav="faq"] .nav-icon-box{--p8ic:url('/img/8bit/home.png')}
html.theme-8bit [data-nav="game-center"] .nav-icon-box{--p8ic:url('/img/8bit/game.png')}
html.theme-8bit [data-nav="diagnostics"] .nav-icon-box{--p8ic:url('/img/8bit/system.png')}
html.theme-8bit [data-nav="activity-log"] .nav-icon-box{--p8ic:url('/img/8bit/system.png')}
html.theme-8bit [data-nav="security-center"] .nav-icon-box{--p8ic:url('/img/8bit/system.png')}
html.theme-8bit [data-nav="backups"] .nav-icon-box{--p8ic:url('/img/8bit/system.png')}
html.theme-8bit [data-nav="system-health"] .nav-icon-box{--p8ic:url('/img/8bit/system.png')}

/* мобільна шапка: «Портал» у 8-біт стилі (піксельний шрифт + золото) */
html.theme-8bit #mobile-portal-title{
    font-family:'PixelVT',monospace !important;
    color:var(--p8-gold) !important;
    font-weight:400 !important;
    font-size:1.7rem !important;
    letter-spacing:2px;
    text-shadow:2px 2px 0 var(--p8-acc);
}

/* ====== ВИД МЕНЮ «РЕЙКА» у 8-біт скіні ====== */
html.theme-8bit #sidebar.sidebar-rail #sidebar-logo-container::after{display:none}
html.theme-8bit #sidebar.sidebar-rail nav.nav-rail{padding:10px 0 !important;gap:8px}
html.theme-8bit .rail-btn{
    border:3px solid #2a2a52 !important;background:var(--p8-panel) !important;
    border-radius:0 !important;color:var(--p8-acc);transform:none !important}
html.theme-8bit .rail-btn[data-theme="blue"],html.theme-8bit .rail-btn[data-theme="cyan"]{color:var(--p8-blue)}
html.theme-8bit .rail-btn[data-theme="green"],html.theme-8bit .rail-btn[data-theme="lime"]{color:var(--p8-green)}
html.theme-8bit .rail-btn[data-theme="gold"]{color:var(--p8-gold)}
html.theme-8bit .rail-btn[data-theme="red"]{color:var(--p8-red)}
html.theme-8bit .rail-btn[data-theme="slate"]{color:var(--p8-mut)}
html.theme-8bit .rail-btn:hover{filter:brightness(1.35)}
html.theme-8bit .rail-btn.rail-active{background:currentColor !important;border-color:#fff !important}
html.theme-8bit .rail-btn.rail-active::before{display:none}
html.theme-8bit .rail-btn.rail-active .nav-icon-box{background:#000 !important}
html.theme-8bit .rail-dot{background:var(--p8-gold);border-radius:0;width:5px;height:5px}
/* пікс-іконка всередині значка рейки (маска по --p8ic від [data-nav]) */
html.theme-8bit .rail-ico.nav-icon-box{border:2px solid currentColor !important;background:#000 !important;border-radius:0 !important}

/* Flyout у 8-біт — чорна панель з піксель-рамкою */
html.theme-8bit #rail-flyout{
    background:#000 !important;border:3px solid var(--p8-acc) !important;border-radius:0 !important;
    box-shadow:6px 6px 0 rgba(0,0,0,.6) !important;backdrop-filter:none !important}
html.theme-8bit .rail-fly-title{color:var(--p8-gold) !important;font-family:'PixelVT',monospace;letter-spacing:1px}
html.theme-8bit .rail-fly-item{border:2px solid transparent;border-radius:0}
html.theme-8bit .rail-fly-item:hover{background:var(--p8-panel) !important;filter:brightness(1.2)}
html.theme-8bit .rail-fly-item.rail-fly-active{background:var(--p8-panel) !important;border-color:var(--p8-acc)}
html.theme-8bit .rail-fly-ico.nav-icon-box{background:#000 !important;border:2px solid var(--p8-acc) !important;border-radius:0 !important;color:var(--p8-acc)}
html.theme-8bit .rail-fly-lbl{color:var(--p8-ink) !important;font-family:'PixelVT',monospace;font-size:16px}
html.theme-8bit .rail-fly-sub{color:var(--p8-mut) !important}