/* ============================================================
   PROTIS 3D — REDAKTORIAUS SĄSAJA (DIZAINO ŠAKA)
   ------------------------------------------------------------
   Apima tai, į ką žiūri DIRBDAMAS: viršutinę įrankių juostą,
   dešinįjį įrankių bėgį, būsenos juostą, savybių skydelį ir
   kairiosios juostos paiešką.

   Pagrindinis meniu, modalai, paletė, toast'ai — NE čia, juos
   tvarko css/ui-fx.css. Vienam elementui — vienas savininkas.

   Krauna PO css/ui-fx.css, todėl naudoja jo judesio pamatą
   (--fx-spring / --fx-glide / --fx-snap, --fx-tint-*, --fx-sheen)
   ir perrašo be !important.

   KONCEPCIJA — „apšviestas rėmas“:
   viena akcento linija eina juostos apačia, nusileidžia dešiniojo
   bėgio kraštu ir grįžta būsenos juostos viršumi. Darbo laukas
   atrodo įrėmintas prietaiso, o ne apkrautas skydeliais.

   ⚠️ Sąmoningai NEliečiam (žr. ui-fx.css antraštę):
   #toolbar transform/filter, #main position, panelių pločių ir
   jokių `isolation`/`z-index` ant .toolbar-group — 🛠 Įrankiai
   meniu (.tb-panel, z-index 6000) turi likti virš visko.
   ============================================================ */

/* ---------------------------------------------------------------
   0. Šio sluoksnio kintamieji (judesį imam iš ui-fx.css pamato)
   --------------------------------------------------------------- */
html.ui-fx {
    /* Klavišo „kelias“ — kiek nusileidžia paspaustas mygtukas */
    --eui-travel: 1px;
    /* Įdubusio lizdo šešėlis — juostų grupės atrodo išfrezuotos.
       Reikšmės tamsiam korpusui: šviesiam fonui skaičiuoti šešėliai
       tamsoje tiesiog nematomi. */
    --eui-well: inset 0 2px 5px rgba(0, 0, 0, 0.55),
                inset 0 -1px 0 var(--fx-sheen);
    /* Iškilusio klavišo šešėlis */
    --eui-key: 0 1px 0 var(--fx-sheen) inset,
               0 3px 10px -4px rgba(0, 0, 0, 0.75);
}

/* ---------------------------------------------------------------
   1. APŠVIESTAS RĖMAS
   Trys kraštinės, nupieštos tuo pačiu akcento gradientu. Viskas —
   `background-image`, be pseudo-elementų ir be animacijos: 3D
   programoje nuolat perpiešiamas rėmas atimtų kadrus iš scenos.
   --------------------------------------------------------------- */

/* Dešinysis įrankių bėgis — akcentas kairiajame krašte,
   tęsiantis juostos apačios liniją žemyn. */
html.ui-fx #tools-strip {
    border-left-color: transparent;
    background-color: var(--bg-panel);
    background-image:
        linear-gradient(180deg,
            var(--fx-tint-32) 0%,
            color-mix(in srgb, var(--secondary) 24%, transparent) 46%,
            var(--border) 100%),
        linear-gradient(270deg, var(--fx-tint-04), transparent 90px);
    background-size: 1px 100%, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, no-repeat;
}

/* Būsenos juosta — ta pati linija viršuje, tik horizontaliai
   ir veidrodinė, kad rėmas užsidarytų. */
html.ui-fx #statusbar {
    border-top-color: transparent;
    background-color: var(--bg-panel);
    background-image:
        linear-gradient(90deg,
            var(--border) 0%,
            var(--fx-tint-32) 24%,
            color-mix(in srgb, var(--secondary) 28%, transparent) 50%,
            var(--fx-tint-32) 76%,
            var(--border) 100%),
        linear-gradient(0deg, var(--fx-tint-04), transparent 100%);
    background-size: 100% 1px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, no-repeat;
    box-shadow: none;
}

/* ---------------------------------------------------------------
   2. ĮRANKIŲ JUOSTA — klavišai įfrezuotame lizde
   --------------------------------------------------------------- */

/* Grupė nustoja būti stačiakampiu su rėmeliu ir tampa lizdu. */
html.ui-fx .toolbar-group {
    background: color-mix(in srgb, var(--bg-hover) 55%, var(--bg-card));
    border-color: transparent;
    box-shadow: var(--eui-well);
    gap: 3px;
    padding: 3px;
}

/* Ramybės būsena — klavišas nematomas, matosi tik užrašas. */
html.ui-fx .tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 9px;
    padding: 7px 11px;
}

/* ---------------------------------------------------------------
   2b. IKONOS (js/icons.js)
   Brūkšninės, paveldi currentColor — dega kartu su mygtuku.
   --------------------------------------------------------------- */
html.ui-fx .ic {
    flex: 0 0 auto;
    opacity: 0.72;
    transition: opacity var(--fx-snap), transform var(--fx-spring);
}
html.ui-fx .tool-btn:hover > .ic { opacity: 1; }
html.ui-fx .tool-btn.active > .ic {
    opacity: 1;
    color: var(--primary);
}
html.ui-fx .tool-btn:active > .ic { transform: scale(0.92); }

/* Vien ikonos mygtukai (? ir ⚙) — užrašo neliko, tarpo nereikia. */
html.ui-fx .tool-btn-icon { gap: 0; }

/* Meniu eilutėse ikona šiek tiek blankesnė nei užrašas — sąrašas
   skaitomas iš kairės į dešinę, ženklas neturi rėkti. */
html.ui-fx .tb-panel .tool-btn > .ic { opacity: 0.6; }
html.ui-fx .tb-panel .tool-btn:hover > .ic { opacity: 1; color: var(--primary); }

/* Užvedus — klavišas pakyla iš lizdo. */
html.ui-fx .toolbar-group .tool-btn:hover {
    background: var(--bg-panel);
    box-shadow: var(--eui-key);
}

/* Paspaudus — tikras klavišo kelias žemyn. Perrašom ui-fx.css
   transformą, nes ten mygtukas tik „prisispaudžia“ masteliu. */
html.ui-fx .toolbar-group .tool-btn:active {
    transform: translateY(var(--eui-travel));
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65);
    transition-duration: 60ms;
}

/* Įjungtas (toggle ON) — akcentinis klavišas.
   Šviesos brūkšnys viršuje + akcento pabraukimas apačioje, kad
   būtų aišku „šitas dega“ net nespalvotame ekrane. */
html.ui-fx .tool-btn.active {
    background:
        linear-gradient(180deg, var(--fx-sheen), transparent 40%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--primary) 10%, var(--bg-panel)),
            color-mix(in srgb, var(--primary) 20%, var(--bg-panel)));
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow:
        0 1px 0 var(--fx-sheen) inset,
        0 0 0 1px var(--fx-tint-16),
        0 3px 10px -5px var(--primary-glow);
    color: var(--primary-dark);
}

/* Nuolat mirksintis blizgesys nuimtas SĄMONINGAI: begalinė animacija
   ant įrankių juostos verčia naršyklę perpiešti ją kas kadrą, o tai
   3D scenoje kainuoja kadrus. Vietoj jo — statiškas akcento brūkšnys. */
html.ui-fx .tool-btn.active::before {
    animation: none;
    opacity: 1;
    inset: auto 7px 3px 7px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent, var(--primary) 22%, var(--primary) 78%, transparent);
    box-shadow: 0 0 8px -1px var(--primary-glow);
}

/* Apvalūs simbolių klavišai (? ir ⚙) — atskiri nuo tekstinių. */
html.ui-fx .tool-btn-icon {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 17px;
}
html.ui-fx .toolbar-group .tool-btn-icon:hover {
    color: var(--primary);
}

/* „+ Modelis“ akcentas nuimtas 2026-09-04 — mygtukas meniu viduje, kaip visi. */

/* Išskleidžiamo meniu ATIDARYMO animacijos čia NĖRA sąmoningai: ją jau daro
   ui-fx.css (`fxPanelDrop`) su aukštesniu specifiškumu, tad antra animacija
   tiesiog niekada nesuveiktų ir liktų mirusiu kodu. Čia — tik eilučių fonas. */
html.ui-fx .tb-panel .tool-btn:hover {
    background: var(--fx-tint-08);
    color: var(--text);
}

/* ---------------------------------------------------------------
   3. DEŠINYSIS BĖGIS — bėgikas ir išslystančios etiketės
   --------------------------------------------------------------- */

/* Bėgikas — vienas langelis, kuris SLYSTA tarp ✥ ↻ ⤢, užuot
   kiekvienam mygtukui atskirai užsidegus. Judesys parodo, kad tai
   vienas perjungiklis su trimis padėtimis, o ne trys mygtukai. */
html.ui-fx .eui-runner {
    position: absolute;
    /* left / width / height / border-radius nustato js/editor-ui.js pagal
       PATĮ aktyvų mygtuką. Kietai įrašyti matmenys lūžo, kai variantas
       pakeisdavo mygtuko dydį ar formą: žymeklis išlipdavo už juostos ir
       nesutapdavo su ikona (Domantas: „šitie blogai, matai išėję ir
       nelygiai visose"). Dabar jis paveldi geometriją, tad sutampa
       kiekviename variante savaime. */
    top: 0;
    left: 0;
    width: 40px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 14%, var(--bg-panel)),
        color-mix(in srgb, var(--primary) 24%, var(--bg-panel)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent),
                0 4px 12px -5px var(--primary-glow),
                0 1px 0 var(--fx-sheen) inset;
    opacity: 0;
    pointer-events: none;
    transition: top var(--fx-spring), left var(--fx-spring),
                width var(--fx-spring), height var(--fx-spring),
                opacity var(--fx-snap);
}
html.ui-fx .eui-runner.on { opacity: 1; }

/* Akcento kaištis PAŠALINTAS: jis kyšojo už juostos krašto ir bet kuriame
   variante atrodė kaip atskira dėmė ant scenos. Žymeklis dabar tiksliai
   sutampa su mygtuku, tad papildomo ženklo nebereikia. */

/* Kai bėgikas veikia, atskiro aktyvaus mygtuko fono nebereikia —
   kitaip degtų dvi dėžutės vienu metu. */
html.ui-fx #tools-strip.eui-railed .tstrip-btn[data-tool].active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
html.ui-fx #tools-strip.eui-railed .tstrip-btn[data-tool].active::before {
    display: none;
}

/* Mygtukai virš bėgiko (abu pozicionuoti — sprendžia DOM eilė,
   todėl jokio z-index ir jokio stacking konteksto nereikia). */
html.ui-fx .tstrip-btn { border-radius: var(--r-base); }
html.ui-fx .tstrip-btn:hover { background: var(--fx-tint-08); }

/* Etiketė — išslysta į kairę tiesiai iš mygtuko. Instantiškai,
   be sisteminio tooltip'o vėlavimo; klavišas parodomas čip'e,
   todėl sparčiuosius klavišus išmoksti dirbdamas, o ne skaitydamas. */
html.ui-fx .eui-tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--bg-panel);
    box-shadow: 0 0 0 1px var(--border),
                0 10px 26px -10px rgba(15, 23, 42, 0.45);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateX(8px) scale(0.96);
    transition: opacity var(--fx-snap), transform var(--fx-spring);
}
html.ui-fx .tstrip-btn:hover > .eui-tip,
html.ui-fx .tstrip-btn:focus-visible > .eui-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
}
html.ui-fx .eui-tip kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px;
    color: var(--primary-dark);
    background: var(--fx-tint-16);
    box-shadow: 0 0 0 1px var(--fx-tint-32);
}
html.ui-fx body.theme-dark .eui-tip kbd { color: var(--primary-light); }

/* Skirtukas juostoje — trumpa linija, ne pilkas brūkšnys per visą plotį. */
html.ui-fx .tstrip-sep {
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
    height: 1px;
    width: 26px;
    margin: 5px 0;
}

/* ---------------------------------------------------------------
   4. BŪSENOS JUOSTA — prietaiso rodmenys
   --------------------------------------------------------------- */

/* Kiekvienas rodmuo — atskiras langelis su savo spalvos tašku.
   Skaičiai monospace'u su vienodo pločio skaitmenimis, kad
   keičiantis reikšmei nešokinėtų visa eilutė. */
/* ⚠️ Tarpas gyvena .statusbar-inner, ne #statusbar — js/fit-bars.js visą
   turinį apvynioja į tą vidinį sluoksnį, kad siaurame lange mažintų mastelį.
   Dėl tos pačios priežasties žemiau NEGALI būti `#statusbar > span`:
   rodmenys yra ANŪKAI. */
html.ui-fx .statusbar-inner { gap: 10px; }
html.ui-fx #statusbar span[id^="status-"]:not(#status-project):not(#status-info) {
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
    font-variant-numeric: tabular-nums;
    transition: background var(--fx-snap), box-shadow var(--fx-snap),
                transform var(--fx-spring);
}
html.ui-fx #statusbar span[id^="status-"]:empty {
    padding: 0;
    background: none;
    box-shadow: none;
}

/* Reikšmės pasikeitimo blyksnį (`.fx-bump`) piešia js/ui-motion.js — jo
   ČIA SĄMONINGAI NEDUBLIUOJAM. Čia tik langelio paviršius; spalvą ir
   švytėjimą blyksnio metu tvarko ui-fx.css. Vienam efektui — vienas autorius. */

/* Projekto vardas ir #status-info — ne rodmenys, o tekstas: langelio negauna
   (jie išskirti :not() sąlyga aukščiau). Vardui nuimam ir spalvos tašką. */
html.ui-fx #statusbar .status-project::before { display: none; }
html.ui-fx #statusbar .status-project {
    font-weight: 700;
    font-size: 16px;              /* Domantas 2026-09-17 / 09-23: vardas apatinėje juostoje per mažas */
    letter-spacing: -0.01em;
    color: var(--text);
    max-width: 360px;
}

/* „Išsaugota“ — žalias, kai tikrai išsaugota. */
html.ui-fx #statusbar .status-saved { color: var(--accent-green); }
html.ui-fx #statusbar .status-saved::before { box-shadow: none; }

/* ---------------------------------------------------------------
   5. SAVYBIŲ SKYDELIS — antraštė kaip prietaiso plokštelė
   --------------------------------------------------------------- */
html.ui-fx #properties-header {
    background:
        linear-gradient(180deg, var(--fx-tint-08), transparent),
        var(--bg-panel);
    box-shadow: inset 0 1px 0 var(--fx-sheen),
                inset 0 -1px 0 var(--border);
    position: relative;
}
/* Akcento kaištis kairėje — tas pats ženklas kaip bėgike, todėl
   abi dešinės pusės dalys atrodo iš vieno komplekto. */
html.ui-fx #properties-header::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 16px;
    transform: translateY(-50%);
    border-radius: 0 2px 2px 0;
    background: var(--primary);
    box-shadow: 0 0 10px -2px var(--primary-glow);
}
html.ui-fx #properties-header h3 {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--text-dim);
}

/* ---------------------------------------------------------------
   6. KAIRIOJI JUOSTA — paieška
   --------------------------------------------------------------- */
html.ui-fx #search-input {
    transition: box-shadow var(--fx-snap), background var(--fx-snap);
}
html.ui-fx #search-input:focus {
    background: var(--bg-panel);
    box-shadow: 0 0 0 1px var(--primary),
                0 0 0 4px var(--fx-tint-16);
    outline: none;
}

/* ---------------------------------------------------------------
   7. Krypties gizmo — rodyklės ryškėja tik prie pelės
   --------------------------------------------------------------- */
html.ui-fx #view-gizmo .vg-arrow {
    opacity: 0.42;
    transition: opacity var(--fx-snap), color var(--fx-snap),
                transform var(--fx-spring);
}
html.ui-fx #view-gizmo:hover .vg-arrow { opacity: 0.85; }
html.ui-fx #view-gizmo .vg-arrow:hover { opacity: 1; }

/* ---------------------------------------------------------------
   8. „Mažiau judesio“ — bėgikas nustoja slysti, bet lieka matomas
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.ui-fx .eui-runner,
    html.ui-fx .eui-tip { transition-duration: 0.01ms; }
}

/* ---------------------------------------------------------------
   9. PAKRAŠČIŲ VALDIKLIAI — ženklai vietoj emoji
   Šie mygtukai nėra .tool-btn, tad ikoną reikia centruoti patiems.
   --------------------------------------------------------------- */
html.ui-fx #btn-event-console.has-ic,
html.ui-fx #clean-reset-btn.has-ic,
html.ui-fx #sidebar-reveal.has-ic,
html.ui-fx .cb-toggle.has-ic,
html.ui-fx .lp-toggle.has-ic,
html.ui-fx .tz-toggle.has-ic,
html.ui-fx .view-preset-btn.has-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: color var(--fx-snap), background var(--fx-snap),
                transform var(--fx-spring);
}
html.ui-fx #btn-event-console.has-ic:hover,
html.ui-fx #clean-reset-btn.has-ic:hover,
html.ui-fx #sidebar-reveal.has-ic:hover,
html.ui-fx .cb-toggle.has-ic:hover,
html.ui-fx .lp-toggle.has-ic:hover,
html.ui-fx .tz-toggle.has-ic:hover,
html.ui-fx .view-preset-btn.has-ic:hover {
    color: var(--primary);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   10. VAIZDŲ PERJUNGIKLIS (Iso / Top / Front / Right)
   Buvo keturi pilki užrašai vienas po kito — dabar segmentinis
   valdiklis, kuriame matyti, kad tai VIENAS pasirinkimas.
   --------------------------------------------------------------- */
html.ui-fx #view-presets.vp-in-toolbar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px;
    margin: 6px 0;
    border-radius: var(--r-sm);
    background: var(--bg-card);
    box-shadow: var(--eui-well);
}
html.ui-fx .view-preset-btn {
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    background: transparent;
    border: 0;
    padding: 5px 4px;
    cursor: pointer;
    transition: color var(--fx-snap), background var(--fx-snap);
}
html.ui-fx .view-preset-btn:hover {
    color: var(--text);
    background: var(--bg-hover);
}

/* ---------------------------------------------------------------
   11. KAIRIOJI JUOSTA — biblioteka kaip kortelių dėklas
   --------------------------------------------------------------- */
html.ui-fx #sidebar-tabs {
    background: var(--bg-panel);
    box-shadow: inset 0 -1px 0 var(--border);
}
html.ui-fx .sidebar-tab {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}
html.ui-fx .sidebar-tab.active { color: var(--text-bright); }

html.ui-fx #sidebar-header {
    background: linear-gradient(180deg, var(--bg-card), transparent);
    box-shadow: inset 0 -1px 0 var(--border);
}
html.ui-fx #search-input {
    border-radius: 999px;
    padding-left: 14px;
}

/* Kategorijos antraštė — plonas didžiųjų raidžių bėgis, kad sąrašas
   skaitytųsi kaip katalogas, o ne kaip vientisa juosta. */
html.ui-fx .category-header {
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Komponento kortelė — kairėje akcento briauna, kuri užsidega
   užvedus. Perkeliam į priekį akcentą, o ne foną: sąrašas ilgas,
   ir visas nudažytas fonas jį paverstų dryžiu. */
html.ui-fx .component-item {
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
}
html.ui-fx .component-item:hover {
    border-left-color: var(--primary);
    background: linear-gradient(90deg, var(--primary-soft), transparent 55%);
    box-shadow: none;
}

/* ---------------------------------------------------------------
   12. SAVYBIŲ SKYDELIS tamsoje
   --------------------------------------------------------------- */
html.ui-fx #properties {
    box-shadow: inset 1px 0 0 var(--border), var(--shadow-lg);
}
html.ui-fx #properties-header {
    background: linear-gradient(180deg, var(--bg-card), transparent);
}

/* ---------------------------------------------------------------
   13. LOGOTIPAS — švyti tamsiame korpuse
   --------------------------------------------------------------- */
html.ui-fx #toolbar .logo {
    /* Originale gradiento vidurys įrašytas kietai (#FF8A52), tad pasirinkus
       mėlyną akcentą logotipas likdavo pusiau oranžinis. Naujojoje sąsajoje
       vidurį skaičiuojam iš paties akcento — logotipas persidažo kartu. */
    background-image: linear-gradient(120deg,
        var(--primary) 0%,
        color-mix(in srgb, var(--primary) 58%, #FFFFFF) 50%,
        var(--secondary) 100%);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--primary) 35%, transparent));
}

/* Vaizdų perjungiklio užrašai buvo per blankūs — tamsoje --text-soft
   praktiškai susilieja su fonu. */
html.ui-fx .view-preset-btn { color: var(--text-dim); }

/* Buvęs 58 px atitraukimas (📜 žurnalas / 🔄 perkrovimas kairėje) — tie valdikliai IŠTRINTI (v844), tad
   projekto vardas stovėdavo pasislinkęs į dešinę be priežasties (Domantas 2026-09-23). */
html.ui-fx .statusbar-inner { padding-left: 0; }

/* ---------------------------------------------------------------
   14. DARBO DROBĖ KAIP EKRANAS KORPUSE
   Ryški 3D scena atitraukiama nuo kraštų ir apvalinama — tamsus
   korpusas ją apgaubia, ir vaizdas nustoja būti „languotas fonas“,
   tampa prietaiso ekranu. Pačios scenos tai nekeičia: pjaustom tik
   drobės elemento kraštus.

   ⚠️ NE `overflow: hidden` ant #viewport-container — į jį deda
   perdangas dešimt modulių (režimo indikatorius, koordinatės,
   minimap, vamzdžių skydeliai, skaičių laukeliai). Apvalinam PAČIĄ
   drobę, tad niekas nenukerpama.

   Dydį saugiai keisti galima: js/scene.js:134 turi ResizeObserver
   ant konteinerio, o pelės taikymas eina per getBoundingClientRect.
   --------------------------------------------------------------- */
/* Domantas 2026-09-17: „kraštuose matosi linija — turi būti scenos vaizdas" — rėmo, tarpo ir apvalinimo NEBĖRA,
   scena iki pat juostų. (Buvo margin 10px + radius 18px + 1px kontūras nuo v673.) */
html.ui-fx #viewport-container {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
html.ui-fx #viewport {
    border-radius: 0;
}

/* Pristatymo režimas dengia visą ekraną — tada rėmo nereikia. */
html.ui-fx body.presentation #viewport-container {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
html.ui-fx body.presentation #viewport { border-radius: 0; }

/* Dideli ženklai (meniu spyna, tuščios kortelės brėžinys) — prislopinti,
   kad neatrodytų kaip mygtukas, o kaip vandenženklis. */
html.ui-fx .mm-locked-ico.has-ic,
html.ui-fx .mm-empty-ico.has-ic,
html.ui-fx .mm-pcard-thumb-ph.has-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
}
html.ui-fx .mm-locked-ico.has-ic > .ic { opacity: 0.85; color: var(--primary); }
html.ui-fx .mm-pcard-thumb-ph.has-ic > .ic { opacity: 0.35; }
html.ui-fx .mm-chip-ico.has-ic {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
}

/* ---------------------------------------------------------------
   15. KOMPONENTŲ SĄRAŠAS — tankiausias programos paviršius
   744 detalės. Čia svarbiausia ne puošyba, o hierarchija: ženklas,
   pavadinimas, dydis. Kiekvienas iš jų turi savo svorį ir vietą.
   --------------------------------------------------------------- */

/* Kategorijos ženklas — nebe plikas simbolis, o plytelė. Ji laiko
   spalvą (kategorijos), tad sąrašą galima skenuoti akimis. */
html.ui-fx .cat-icon-wrap {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
    font-size: 13px;
    transition: background var(--fx-snap), box-shadow var(--fx-snap),
                transform var(--fx-spring);
}
html.ui-fx .component-item:hover .cat-icon-wrap {
    background: color-mix(in srgb, currentColor 26%, transparent);
    transform: scale(1.06);
}

html.ui-fx .component-item {
    padding: 7px 10px 7px 22px;
    margin: 1px 6px;
    font-size: 12.5px;
}
html.ui-fx .component-item-name {
    line-height: 1.22;
    color: var(--text);
}
html.ui-fx .component-item:hover .component-item-name { color: var(--text-bright); }

/* Dydžio eilutė — monospace, kad DN skaičiai stotų į stulpelį ir
   akis galėtų juos lyginti neskaitydama pavadinimų. */
html.ui-fx .ci-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.03em;
    color: var(--text-soft);
}
html.ui-fx .component-item:hover .ci-sub { color: var(--text-dim); }

/* Žvaigždutė ir pieštukas — ramybėje nematomi, kad 744 eilutės
   neatrodytų kaip mygtukų siena. */
html.ui-fx .sidebar-fav-btn,
html.ui-fx .sidebar-edit-btn {
    opacity: 0;
    transition: opacity var(--fx-snap), color var(--fx-snap),
                transform var(--fx-spring);
}
html.ui-fx .component-item:hover .sidebar-fav-btn,
html.ui-fx .component-item:hover .sidebar-edit-btn { opacity: 0.65; }
html.ui-fx .sidebar-fav-btn:hover,
html.ui-fx .sidebar-edit-btn:hover {
    opacity: 1;
    color: var(--primary);
    transform: scale(1.15);
}
/* Pažymėta mėgstama lieka matoma visada — kitaip dingtų informacija. */
html.ui-fx .sidebar-fav-btn.is-fav {
    opacity: 1;
    color: var(--accent-yellow);
}

/* Grupių valdikliai virš sąrašo — vienodo aukščio, tylūs. */
html.ui-fx .cat-collapse-btn,
html.ui-fx .sidebar-groups-btn {
    border-radius: var(--r-sm);
    border-color: var(--border);
    background: var(--bg-card);
    color: var(--text-dim);
}
html.ui-fx .cat-collapse-btn:hover,
html.ui-fx .sidebar-groups-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border-light);
}

/* ---------------------------------------------------------------
   16. ĮJUNGIMAS — korpusas susirenka, kai atsidaro projektas
   Vieno karto animacija su pakopomis: juosta, ekranas, bėgis,
   būsenos juosta. Ne puošyba — žmogus pamato, iš kokių dalių
   sudėtas įrankis, ir kur ką ieškoti.

   ⚠️ #toolbar animuojam TIK permatomumu. `transform`/`filter` ant
   jo sukurtų stacking kontekstą ir 🛠 Įrankiai meniu (z-index 6000)
   nugrimztų po skydeliais.
   --------------------------------------------------------------- */
@keyframes euiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes euiRise {
    from { opacity: 0; transform: translateY(12px) scale(0.988); }
    to   { opacity: 1; transform: none; }
}
@keyframes euiSlideL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes euiSlideR { from { opacity: 0; transform: translateX(14px); }  to { opacity: 1; transform: none; } }

html.ui-fx.eui-boot #toolbar            { animation: euiFade   420ms var(--ease-out) both; }
html.ui-fx.eui-boot #viewport-container { animation: euiRise   640ms var(--ease-out) 60ms both; }
html.ui-fx.eui-boot #sidebar            { animation: euiSlideL 520ms var(--ease-out) 120ms both; }
html.ui-fx.eui-boot #tools-strip        { animation: euiFade   520ms var(--ease-out) 180ms both; }
html.ui-fx.eui-boot #statusbar          { animation: euiFade   520ms var(--ease-out) 240ms both; }

@media (prefers-reduced-motion: reduce) {
    html.ui-fx.eui-boot #toolbar, html.ui-fx.eui-boot #viewport-container,
    html.ui-fx.eui-boot #sidebar, html.ui-fx.eui-boot #tools-strip,
    html.ui-fx.eui-boot #statusbar { animation: none; }
}

/* ---------------------------------------------------------------
   17. SAVYBIŲ SKYDELIS — darbinis paviršius, ne lentelė
   --------------------------------------------------------------- */
html.ui-fx #properties-content {
    font-size: 12.5px;
}
/* Sekcijos antraštė — plonas didžiųjų raidžių bėgis su linija į dešinę,
   kad ilgas savybių sąrašas skaidytųsi į skaitomas dalis. */
html.ui-fx #properties-content h4,
html.ui-fx .prop-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin: 16px 0 8px;
}
html.ui-fx #properties-content h4::after,
html.ui-fx .prop-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* Reikšmės — monospace, kad matmenys stotų į stulpelį. */
html.ui-fx #properties-content input[type="number"],
html.ui-fx #properties-content input[type="text"] {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Eilutė „raktas → reikšmė" */
html.ui-fx .prop-row,
html.ui-fx .property-row {
    border-radius: var(--r-xs);
    transition: background var(--fx-snap);
}
html.ui-fx .prop-row:hover,
html.ui-fx .property-row:hover { background: var(--bg-card); }

/* ---------------------------------------------------------------
   18. PORTŲ SĄRAŠAS — būsena turi būti matoma iš karto
   „Laisvas / Sujungtas“ buvo pilkas tekstas šalia taškiuko. Dabar
   tai spalvota plokštelė: nuskaitoma nežiūrint į taškiuką ir
   nereikia skaityti žodžio, kad suprastum būseną.
   --------------------------------------------------------------- */
html.ui-fx .port-status {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}
html.ui-fx .port-item:has(.port-dot.free) .port-status      { color: var(--secondary); }
html.ui-fx .port-item:has(.port-dot.connected) .port-status { color: var(--accent-green); }

html.ui-fx .port-item {
    border-radius: var(--r-sm);
    transition: background var(--fx-snap), box-shadow var(--fx-snap),
                transform var(--fx-spring);
}
html.ui-fx .port-item:hover {
    transform: translateX(2px);
    box-shadow: inset 2px 0 0 var(--primary);
}
html.ui-fx .port-dot { box-shadow: 0 0 8px -1px currentColor; }

/* ---------------------------------------------------------------
   19. FILTRO ŽETONAI — vienas pasirinkimas, ne mygtukų eilė
   --------------------------------------------------------------- */
html.ui-fx .dn-chip {
    border-radius: 999px;
    padding: 3px 11px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    transition: background var(--fx-snap), color var(--fx-snap),
                border-color var(--fx-snap), transform var(--fx-spring);
}
html.ui-fx .dn-chip:hover {
    color: var(--text);
    border-color: var(--border-light);
    transform: translateY(-1px);
}
html.ui-fx .dn-chip.active {
    background: linear-gradient(180deg, var(--primary-light), var(--primary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px -4px var(--primary-glow);
}
html.ui-fx .dn-chip-fav.active {
    background: linear-gradient(180deg, var(--accent-yellow), #E0A800);
    color: #1A1200;
}

/* ---------------------------------------------------------------
   20. TUŠČIA SCENA — pirmas dalykas naujame projekte
   --------------------------------------------------------------- */
html.ui-fx .empty-state-card {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-panel));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}
html.ui-fx .empty-state-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
html.ui-fx .empty-action-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
}
html.ui-fx .empty-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}
html.ui-fx .empty-action-btn kbd {
    font-family: var(--font-mono);
    font-size: 9.5px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    padding: 2px 5px;
}

/* ---------------------------------------------------------------
   21. KONTEKSTINIS PAGALBININKAS — patarimas, ne dialogas
   --------------------------------------------------------------- */
html.ui-fx #tool-coach {
    background: var(--bg-glass);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--r-base);
    box-shadow: var(--shadow-lg);
}
html.ui-fx #tool-coach .tc-title {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
html.ui-fx #tool-coach .tc-line { color: var(--text); }

/* Meniu eilutė, kuri ĮJUNGTA — ne visas oranžinis rėmelis (per garsu
   sąraše iš 20 eilučių), o akcento juostelė kairėje ir švelnus fonas. */
html.ui-fx .tb-panel .tool-btn.active {
    background: linear-gradient(90deg, var(--primary-soft), transparent 70%);
    border-color: transparent;
    border-left-color: var(--primary);
    box-shadow: none;
    color: var(--text-bright);
}
html.ui-fx .tb-panel .tool-btn.active::before { display: none; }
html.ui-fx .tb-panel .tool-btn.active > .ic { opacity: 1; color: var(--primary); }

/* ---------------------------------------------------------------
   22. ŠVYTĖJIMAS PO PELE (js/editor-ui.js)
   Atšvaitas ties pačiu kursoriumi. Piešiam per `background-image`
   ant paties mygtuko — jokio papildomo sluoksnio ir jokio naujo
   stacking konteksto, tad iškrentantys meniu lieka viršuje.
   --------------------------------------------------------------- */
html.ui-fx .tool-btn.eui-glow,
html.ui-fx .tstrip-btn.eui-glow,
html.ui-fx .empty-action-btn.eui-glow {
    background-image: radial-gradient(
        90px circle at var(--eui-mx, 50%) var(--eui-my, 50%),
        color-mix(in srgb, var(--primary) 26%, transparent),
        transparent 62%);
}
/* Įjungtam mygtukui atšvaitas silpnesnis — jis ir taip dega. */
html.ui-fx .tool-btn.active.eui-glow {
    background-image: radial-gradient(
        90px circle at var(--eui-mx, 50%) var(--eui-my, 50%),
        rgba(255, 255, 255, 0.14), transparent 62%),
        linear-gradient(180deg, var(--fx-sheen), transparent 40%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--primary) 10%, var(--bg-panel)),
            color-mix(in srgb, var(--primary) 20%, var(--bg-panel)));
}
@media (prefers-reduced-motion: reduce) {
    html.ui-fx .eui-glow { background-image: none; }
}

/* Eksporto lango ženklai — didesni už juostos ikonas, akcento spalvos. */
html.ui-fx .export-option-icon.has-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
html.ui-fx .export-option-icon.has-ic > .ic { opacity: 0.95; }

/* ---------------------------------------------------------------
   23. BĖGIO SULYGIAVIMAS (Domantas: „šiek tiek nelygiai")
   Trys priežastys, visos trys pataisytos:
     1. bėgiko akcento kaištis kyšojo UŽ juostos krašto (left:-7px) ir
        atrodė kaip atskira dėmė ant scenos;
     2. mygtuko hover fonas buvo kitokio dydžio nei bėgikas, tad
        gretimi mygtukai atrodė nevienodi;
     3. ui-fx.css hover'iui didina mygtuką (scale 1.08) — po bėgiku
        tai reiškė, kad aktyvus ir gretimas mygtukas skirtingo dydžio.
   --------------------------------------------------------------- */

/* Hover fonas — tiksliai to paties dydžio ir formos kaip bėgikas. */
html.ui-fx .tstrip-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--r-base);
}
html.ui-fx .tstrip-btn:hover {
    background: var(--bg-hover);
    box-shadow: inset 0 0 0 1px var(--border-light);
}
/* Režimo mygtukai po bėgiku nesipučia — kitaip jie „šokinėtų" jo atžvilgiu. */
html.ui-fx #tools-strip.eui-railed .tstrip-btn[data-tool]:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}
html.ui-fx #tools-strip.eui-railed .tstrip-btn[data-tool]:hover > .ic { opacity: 1; }

/* ================================================================
   KAMBARIO LANGAS — MYGTUKAI KAIP VIRŠUTINĖJE JUOSTOJE (v676).
   Domantas 2026-09-03 apie v673 „flat" bandymą: „mygtuko spalva tokia
   pati kaip backgroundo — nežinosi ar čia mygtukas... turi būti aiškiai
   juodas fonas ir mygtukai rudi". Todėl: grupės — TAMSUS fonas,
   kiekvienas mygtukas — MATOMAS šviesesnis pill'as su kraštu, užvedus
   šviesėja, o ĮJUNGTAS — pilnas oranžinis (kaip aktyvus viršuje).
   ================================================================ */
html.ui-fx #room-builder-modal .rb-grp,
html.ui-fx #rs-section .rs-grp {
    background: color-mix(in srgb, var(--bg-panel) 82%, black);
    border-color: transparent;
    box-shadow: var(--eui-well);
}
html.ui-fx #room-builder-modal .rb-tool,
html.ui-fx #room-builder-modal .rb-add,
html.ui-fx #room-builder-modal .rb-btn,
html.ui-fx #rs-section .rb-btn,
html.ui-fx #rb-mode-switch button,
html.ui-fx #room-builder-modal .rb-mini {
    border: 1px solid var(--border-light);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-hover) 60%, var(--bg-card));
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 0 var(--fx-sheen, rgba(255,255,255,.05)) inset, 0 1px 2px rgba(0,0,0,.25);
    transition: background var(--fx-snap, 0.12s), box-shadow var(--fx-snap, 0.12s),
        color var(--fx-snap, 0.12s), transform var(--fx-snap, 0.12s), border-color var(--fx-snap, 0.12s);
}
html.ui-fx #room-builder-modal .rb-tool,
html.ui-fx #room-builder-modal .rb-add,
html.ui-fx #room-builder-modal .rb-btn,
html.ui-fx #rs-section .rb-btn,
html.ui-fx #rb-mode-switch button { padding: 7px 11px; }
html.ui-fx #room-builder-modal .rb-tool:hover,
html.ui-fx #room-builder-modal .rb-add:hover,
html.ui-fx #room-builder-modal .rb-btn:hover,
html.ui-fx #rs-section .rb-btn:hover,
html.ui-fx #rb-mode-switch button:hover,
html.ui-fx #room-builder-modal .rb-mini:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    color: var(--text-bright, var(--text));
    box-shadow: var(--eui-key);
}
html.ui-fx #room-builder-modal .rb-tool:active,
html.ui-fx #room-builder-modal .rb-add:active,
html.ui-fx #room-builder-modal .rb-btn:active,
html.ui-fx #rs-section .rb-btn:active,
html.ui-fx #rb-mode-switch button:active,
html.ui-fx #room-builder-modal .rb-mini:active {
    transform: translateY(var(--eui-travel));
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}
/* ĮJUNGTA — pilnas oranžinis, nesumaišysi */
html.ui-fx #room-builder-modal .rb-tool.active,
html.ui-fx #room-builder-modal .rb-add.is-on,
html.ui-fx #room-builder-modal .rb-btn.active,
html.ui-fx #rs-section .rb-btn.active,
html.ui-fx #rb-mode-switch button.active,
html.ui-fx #room-builder-modal .rb-mini.active,
html.ui-fx #room-builder-modal #rb-hist-btn.rb-btn-on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Jungiklio dėžutė — tamsi, klavišai matomi */
html.ui-fx #rb-mode-switch {
    border: 0;
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-panel) 78%, black);
    box-shadow: var(--eui-well);
    gap: 4px;
    padding: 4px;
    overflow: visible;
}
html.ui-fx #room-builder-modal .rb-mini { padding: 0; }
/* Pagrindinis ir pavojingas — kaip buvę, tik forma ta pati */
html.ui-fx #room-builder-modal .rb-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
html.ui-fx #room-builder-modal .rb-btn-primary:hover { background: var(--primary); filter: brightness(1.08); color: #fff; }
html.ui-fx #room-builder-modal .rb-danger:hover,
html.ui-fx #rs-section .rb-danger:hover { color: var(--accent-red, #E74C3C); border-color: var(--accent-red, #E74C3C); }
/* Grupių antraštės ir laukeliai — aiškiai NE mygtukai */
html.ui-fx #room-builder-modal .rb-grp > h4,
html.ui-fx #rs-section .rs-grp > h4 { opacity: .55; }
html.ui-fx #rs-section input[type="number"],
html.ui-fx #room-builder-modal .rb-fields input {
    background: color-mix(in srgb, var(--bg-panel) 88%, black);
    border: 1px solid var(--border);
    border-radius: 8px;
}
/* Ikonos ant brėžinio — stiklas lieka, tik paspaudimo pojūtis */
html.ui-fx #rb-plan-wrap .rb-cvb {
    border-radius: 9px;
    transition: background var(--fx-snap, 0.12s), color var(--fx-snap, 0.12s),
        transform var(--fx-snap, 0.12s), border-color var(--fx-snap, 0.12s);
}
html.ui-fx #rb-plan-wrap .rb-cvb:active { transform: translateY(var(--eui-travel)); }
html.ui-fx #rb-plan-wrap .rb-cvb.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* v908: telefono ☰ „Komponentai“ ir stalčiaus ✕ — TIK ≤768 px. `html.ui-fx .tool-btn { display:inline-flex }`
   perrašydavo `.m-only { display:none }`, tad kompiuteryje kairiame viršuje kabojo niekur nevedantis ☰
   (Domantas 2026-09-24: „trys linijos, kurios nieko nedaro“). */
@media (min-width: 769px) {
    html .m-only, html.ui-fx .tool-btn.m-only { display: none !important; }
}