/* ============================================================
   PROTIS 3D — PRADŽIOS EKRANAS IR KROVIMO EKRANAS (naujoji sąsaja)
   ------------------------------------------------------------
   Du sluoksniai, kuriuos uždeda js/ui-motion.js:

     html.ui-mm  — matomas pagrindinis meniu
     html.ui-ld  — matomas krovimo ekranas

   ⛔ SPALVŲ IR FONO NELIEČIAM. Vartotojas aiškiai pasakė, kad pradžios
   ekranas jam patinka toks, koks yra („kietai atrodo"), tad tamsus fonas,
   antraštė ir paletė lieka iš css/main.css. Keičiasi TIK mygtukų forma,
   ženklai ir judesys — kad jie sutaptų su redaktoriaus nauja sąsaja.

   Todėl čia nėra nė vieno `--bg-*`, `--text-*` ar `--primary` perrašymo:
   viskas piešiama originaliais žetonais.
   ============================================================ */

/* ---------------------------------------------------------------
   1. MYGTUKAI — piliulės, kaip redaktoriuje
   --------------------------------------------------------------- */
html.ui-mm #main-menu .mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 220ms cubic-bezier(0.34, 1.5, 0.64, 1),
                box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
}
html.ui-mm #main-menu .mm-btn:hover  { transform: translateY(-2px) scale(1.015); }
html.ui-mm #main-menu .mm-btn:active { transform: translateY(0) scale(0.985); }

/* Pagrindinis veiksmas — švytėjimas po mygtuku, ne aplink jį. */
html.ui-mm #main-menu .mm-btn-primary {
    box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--primary) 55%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
html.ui-mm #main-menu .mm-btn-primary:hover {
    box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--primary) 62%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------
   2. VALDIKLIAI — paieška, rikiavimas, vaizdo perjungiklis
   --------------------------------------------------------------- */
html.ui-mm #main-menu .mm-sort,
html.ui-mm #main-menu .mm-view-toggle,
html.ui-mm #main-menu .mm-search input,
html.ui-mm #main-menu .mm-trash-toggle,
html.ui-mm #main-menu .mm-user,
html.ui-mm #main-menu .mm-logout-btn,
html.ui-mm #main-menu .mm-auth-btn {
    border-radius: 999px;
}
html.ui-mm #main-menu .mm-view-btn { transition: background 160ms ease, color 160ms ease; }

/* Žymos (čipai) — švelnus pakilimas užvedus, be spalvos šuolio. */
html.ui-mm #main-menu .mm-chip {
    transition: transform 220ms cubic-bezier(0.34, 1.5, 0.64, 1),
                background 220ms ease, border-color 220ms ease, color 220ms ease;
}
html.ui-mm #main-menu .mm-chip:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------
   3. PROJEKTŲ KORTELĖS — minkštesnis kampas ir gyvesnis pakilimas
   --------------------------------------------------------------- */
html.ui-mm #main-menu .mm-pcard {
    border-radius: 20px;
    transition: transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 260ms ease, border-color 200ms ease;
}
html.ui-mm #main-menu .mm-pcard:hover { transform: translateY(-5px) scale(1.012); }

/* ---------------------------------------------------------------
   4. ŽENKLAI — vietoj emoji
   Ikonos paveldi `currentColor`, tad dega kartu su mygtuku.
   --------------------------------------------------------------- */
html.ui-mm #main-menu .ic { flex: 0 0 auto; }
html.ui-mm #main-menu .ic-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
/* Spynos ir tuščios būsenos ženklai — dideli, pritildyti. */
html.ui-mm #main-menu .mm-locked-ico.ic-host { color: var(--primary); opacity: 0.9; }

/* ===============================================================
   KROVIMO EKRANAS — du žiedai, besisukantys į priešingas puses
   ---------------------------------------------------------------
   Išorinis eina pagal laikrodį akcento spalva (ji keičiasi kartu su
   Nustatymų akcentu), vidinis — prieš laikrodį šaltu tonu, o viduryje
   alsuoja taškas. Fonas lieka tamsus, tik iš plokščio tampa gilus.
   =============================================================== */
html.ui-ld #loading-screen {
    background: radial-gradient(120% 90% at 50% 38%, #17171F 0%, #0F0F17 55%, #08080D 100%);
}
html.ui-ld #loading-screen .ls-box { gap: 22px; }

html.ui-ld #loading-screen .ls-spinner {
    position: relative;
    width: 64px; height: 64px;
    border: 2.5px solid rgba(255, 255, 255, 0.07);
    border-top-color: var(--primary, #E85D2A);
    border-right-color: color-mix(in srgb, var(--primary, #E85D2A) 40%, transparent);
    box-shadow: 0 0 30px -8px var(--primary, #E85D2A);
    animation: lsZiedasA 1.15s cubic-bezier(0.62, 0.16, 0.38, 0.86) infinite;
}
/* Vidinis žiedas — priešinga kryptimi ir kitu ritmu, kad piešinys
   niekada nepasikartotų per tą pačią sekundę. */
html.ui-ld #loading-screen .ls-spinner::before {
    content: '';
    position: absolute; inset: 10px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.05);
    border-bottom-color: #5AA9FF;
    border-left-color: rgba(90, 169, 255, 0.4);
    animation: lsZiedasB 0.82s linear infinite;
}
html.ui-ld #loading-screen .ls-spinner::after {
    content: '';
    position: absolute; inset: 25px;
    border-radius: 50%;
    background: var(--primary, #E85D2A);
    animation: lsSirdis 1.5s ease-in-out infinite;
}

html.ui-ld #loading-screen .ls-text {
    font-size: 11.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    animation: lsTekstas 1.9s ease-in-out infinite;
}

@keyframes lsZiedasA { to { transform: rotate(360deg); } }
@keyframes lsZiedasB { to { transform: rotate(-360deg); } }
@keyframes lsSirdis  { 0%, 100% { transform: scale(0.7); opacity: 0.5; }
                       50%      { transform: scale(1.05); opacity: 1; } }
@keyframes lsTekstas { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }

/* Kam judesys kenkia — paliekam ramų vaizdą. */
@media (prefers-reduced-motion: reduce) {
    html.ui-ld #loading-screen .ls-spinner,
    html.ui-ld #loading-screen .ls-spinner::before,
    html.ui-ld #loading-screen .ls-spinner::after,
    html.ui-ld #loading-screen .ls-text { animation-duration: 0s; }
}


/* ===============================================================
   ŽENKLŲ GEOMETRIJA — bendra visiems trims sluoksniams
   ---------------------------------------------------------------
   IŠMATUOTA (v544): bėgio ženklai stovėjo 1,5 px virš mygtuko centro,
   ir taip VISUOSE šešiuose. Priežastis — įdėtas <svg> yra inline
   elementas: jis atsistoja ant teksto pagrindo linijos, o po ja lieka
   rezervuota vieta raidžių uodegoms (`.tstrip-icon` turi
   `font-size:18px`). Todėl ženklas ir kilo aukštyn.

   Vaistas: ženklas — BLOKAS, o jo lizdas — centruojantis flex be
   eilutės aukščio. Po to nuokrypis lygus 0,00 px.
   =============================================================== */
html.ui-fx svg.ic,
html.ui-mm svg.ic,
html.ui-ld svg.ic { display: block; }

html.ui-fx .ic-host,
html.ui-mm .ic-host,
html.ui-ld .ic-host {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font-size: 0;          /* nulinam paveldėtą teksto aukštį */
}

/* Bėgio ženklai buvo per blankūs mažame dydyje — vienu laipteliu ryškiau. */
html.ui-fx #tools-strip .ic { opacity: 0.85; }

/* Bibliotekos juostos mygtukai („⭐ Mėgstami", „📚 Grupės") ženklą laikė
   virš užrašo — jie nebuvo flex. Išmatuota: −7,9 px ir −6,0 px. */
html.ui-fx .dn-chip.has-ic,
html.ui-fx .cat-collapse-btn.has-ic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}