/* ===========================================================================
   SARGAS — sąsaja.

   Kryptis „Skydas" (naudotojo pasirinkimas 2026-08-29). Pagrindinė mintis:
   perimetras piešiamas kaip ŽIEDAS, sudalintas į tiek lankų, kiek yra sričių.
   Vienai sričiai išsijungus lankas nutrūksta — „dalis apsaugota" matosi iš tolo,
   neskaitant teksto. Žiedą piešia `programa.js` (funkcija `pieštiŽiedą`).

   Dvi spalvų grupės, kurios NIEKADA nesimaišo:
     • BŪSENOS spalvos (--armed, --ready, --warn) — tik tam, kas rodo apsaugos padėtį;
     • VEIKSMO spalvos (--veiksmas) — tik mygtukams.
   Anksčiau ta pati terakota reiškė ir „apsaugota", ir mygtuką, ir akis painiojo.

   Šriftas — sistemos (SF Pro / Segoe UI Variable / Roboto). Sąmoningai: programa
   pasiekiama viešu adresu ir laikoma be `npm` build'o, tad išorinio šriftų CDN
   čia nededame — vienu trečiosios šalies prašymu mažiau apsaugos programoje.
   =========================================================================== */

:root {
  --ground: #0C0F0E;
  --ground-2: #101413;
  --surface: #151A18;
  --surface-2: #1B2220;
  --line: #202826;
  --line-2: #2C3532;

  --ink: #EEF2F0;
  --ink-2: #B9C2BE;
  --muted: #7E8A85;
  --muted-2: #5C6763;

  /* BŪSENA */
  --armed: #E4785C;
  --armed-dim: #4A2C24;
  --armed-glow: rgba(228, 120, 92, 0.20);
  --ready: #6FD39B;
  --ready-dim: #234634;
  --ready-glow: rgba(111, 211, 155, 0.16);
  --warn: #E0B15A;
  --warn-dim: #4A3A20;
  --warn-glow: rgba(224, 177, 90, 0.16);
  --nezinia-glow: rgba(126, 138, 133, 0.12);

  /* VEIKSMAS */
  /* ŠVELNIOSIOS — TIK tol, kol vyksta: žiedas pildosi arba būsena ką tik pasikeitė.
     Perskaičiuotos iš ryškiųjų per OKLCH (tas pats atspalvis, sodruma 0,14 → 0,06).
     ⚠️ Pastelė čia reiškia „dar netikra“ — nusistovėjusi būsena VISADA ryški. */
  --armed-svelnus: #F5C2B4;
  --ready-svelnus: #AFDCC0;
  --warn-svelnus: #E4CCA2;

  --veiksmas: #EEF2F0;
  --veiksmas-ink: #0C0F0E;

  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
            Roboto, system-ui, sans-serif;
  --juostos-aukstis: 74px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-xl: 22px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Skaičiai (laikai, PIN, sekundės) niekada „nešokinėja" keičiantis reikšmei. */
.laikas, .kada, .busenos-tekstas, .pin-ivestis, .kortele-info { font-variant-numeric: tabular-nums; }

/* ⚠️ `display` TIK kartu su `.rodomas`. Iš pradžių čia buvo `#prisijungimas { display: grid }`,
   ir ta taisyklė (ID = specifiškumas 100) nugalėdavo `.ekranas { display: none }` (klasė = 10),
   tad prisijungus langas likdavo matomas VIRŠ programos. Nė vienas API testas to nepagavo —
   JS klasės buvo teisingos, o ekranas — ne. Pamatyta tik atsivertus sąsają iš tikrųjų. */
.ekranas { display: none; }
.ekranas.rodomas { display: block; }
.skiltis { display: none; padding: 20px 20px calc(var(--juostos-aukstis) + 28px); }
.skiltis.rodoma { display: block; }
.paslepta { display: none !important; }

h1, h2 { margin: 0; letter-spacing: -0.02em; }

.skilties-antraste { font-size: 28px; font-weight: 700; padding-top: 20px; }
.paaiskinimas {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 22px;
  text-wrap: pretty;
}

/* Mažos didžiosios etiketės — vienintelė vieta, kur naudojamas platus tarpas. */
.etikete {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ===================== PRISIJUNGIMAS ===================== */

#prisijungimas.rodomas {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 30px;
  position: relative;
  overflow: hidden;
}
#prisijungimas.rodomas::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--armed-glow), transparent 66%);
  pointer-events: none;
}
.prisijungimo-dezute {
  position: relative;
  width: min(23rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Ženklas — tas pats segmentuotas perimetras, kaip pagrindiniame ekrane.
   Spalvos rašomos CSS, ne SVG atributuose: `var()` prezentaciniame atribute
   naršyklėse elgiasi nevienodai, o CSP čia neleidžia inline stilių. */
.zenklas { width: 108px; height: 108px; display: block; }
.zenklo-takas { fill: none; stroke: var(--line-2); }
.zenklo-lankas { fill: none; stroke: var(--armed); }
.zenklo-skydas { fill: none; stroke: var(--armed); }
.prisijungimo-dezute h1 {
  font-size: 36px;
  font-weight: 800;
  margin-top: 24px;
}
.prisijungimo-dezute .paaiskinimas {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
#prisijungimo-forma { width: 100%; margin-top: 42px; }
.prisijungimo-dezute .laukas { margin-bottom: 12px; }

/* ===================== BŪSENA: ŽIEDAS ===================== */

.busenos-antraste {
  position: relative;
  padding: 22px 0 0;
  text-align: center;
  isolation: isolate;
}
/* Švytėjimas už žiedo. Spalvą duoda būsenos klasė ant to paties elemento. */
.busenos-antraste::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 50%;
  width: 440px;
  height: 440px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--nezinia-glow), transparent 66%);
  animation: kvepavimas 5.5s ease-in-out infinite;
  pointer-events: none;
}
.busenos-antraste.apsaugota::before { background: radial-gradient(circle, var(--armed-glow), transparent 66%); }
.busenos-antraste.isjungta::before { background: radial-gradient(circle, var(--ready-glow), transparent 66%); }

@keyframes kvepavimas { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.busenos-virsus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.busenos-etikete { margin: 0; }
/* Dešinė antraštės pusė: „prieš 12 s" ir temos jungiklis vienoje grupėje, kad
   `space-between` nenustumtų laiko į ekrano vidurį. */
.busenos-desine { display: flex; align-items: center; gap: 2px; }
.temos-mygtukas {
  appearance: none;
  width: 44px;              /* pirštui, nors piešinys mažas */
  height: 44px;
  flex-shrink: 0;
  margin-right: -10px;      /* optiškai lygiuojasi su turinio kraštu */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s;
}
.temos-mygtukas:hover { color: var(--ink); }
.temos-mygtukas:active { transform: scale(0.92); }
.temos-mygtukas svg { width: 19px; height: 19px; }
.temos-mygtukas:focus-visible { outline: 2px solid var(--armed); outline-offset: 2px; }
.busenos-tikrinta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.busenos-tikrinta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.apsaugota .busenos-tikrinta::before,
.isjungta .busenos-tikrinta::before {
  background: var(--ready);
  box-shadow: 0 0 8px var(--ready);
}

.ziedas {
  position: relative;
  width: 210px;
  height: 210px;
  margin: 24px auto 0;
}
.ziedo-svg { display: block; width: 100%; height: 100%; }
.ziedo-takas { fill: none; stroke: var(--line-2); stroke-width: 12; }
.ziedo-riba { fill: none; stroke: var(--line); stroke-width: 1; }
.ziedo-lankas {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke: var(--muted);
  /* 0,9 s: spalva persilieja, o ne šokteli. Buvo 0,35 s — per greitai, kad akis
     spėtų pastebėti pokytį, jei tuo metu žiūrėjo į kitą ekrano vietą. */
  transition: stroke 0.9s ease;
}
.ziedo-lankas.apsaugota { stroke: var(--armed); }
.ziedo-lankas.isjungta { stroke: var(--ready); }
.ziedo-lankas.nezinia { stroke: var(--muted-2); }

/* ⭐ RYŠKI = TIKRA, PASTELINĖ = VYKSTA (naudotojo sprendimas 2026-09-01).
   `.sviezia` uždedama 150 ms po būsenos pokyčio (`programa.js`), tad lankas PRADEDA
   nuo švelnios spalvos ir per 0,9 s persilieja į ryškią. Akis pamato, kad kaip tik
   dabar kai kas pasikeitė, o galutinė spalva lieka pilnos jėgos.
   Švelninamas TIK lankas — smulkus tekstas visada ryškus, kad liktų įskaitomas. */
.sviezia .ziedo-lankas.apsaugota { stroke: var(--armed-svelnus); }
.sviezia .ziedo-lankas.isjungta { stroke: var(--ready-svelnus); }
/* Įjungimas trunka ~50 s (centralė laukia, kol išeisi). Lankas per tą laiką
   užsipildo — laukimas tampa matomas, o ne panašus į strigusį mygtuką.
   ⚠️ PILDYMĄ PIEŠIA `programa.js` (`ziedoLankoIlgis`), NE CSS animacija. Čia buvo
   `animation: uzsipildo 50s`, bet šitą elementą `pieštiŽiedą` kas 15 s sukuria iš
   naujo, o naujam elementui animacija prasideda nuo nulio — žiedas nueidavo ~30 %,
   šoktelėdavo atgal ir iki galo nenueidavo niekada. Dabar ilgis skaičiuojamas iš
   tikro praėjusio laiko, tad išgyvena ir atnaujinimą, ir puslapio perkrovimą.
   1 s tolygus perėjimas — nes `atnaujintiAtskaitas` tiksi kartą per sekundę. */
.ziedo-lankas.pereinama {
  stroke: var(--warn-svelnus);
  transition: stroke 0.9s ease, stroke-dasharray 1s linear;
}

.ziedo-vidus {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Turi tilpti į vidinį skritulį (r=88 iš 244 viewBox), o ne po žiedu.
     Ilgiausias tekstas — „DALIS APSAUGOTA" — čia laužiasi į dvi eilutes. */
  padding: 0 42px;
}
.ziedo-zenklas { width: 24px; height: 24px; color: var(--muted); transition: color 0.35s ease; }
.apsaugota .ziedo-zenklas { color: var(--armed); }
.isjungta .ziedo-zenklas { color: var(--ready); }

.busenos-tekstas {
  margin: 0;
  transition: color 0.9s ease;
  font-weight: 800;
  font-size: clamp(16px, 5.4vw, 21px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.apsaugota .busenos-tekstas { color: var(--armed); }
.isjungta .busenos-tekstas { color: var(--ready); }
.nezinia .busenos-tekstas { color: var(--muted); }

.busenos-detale {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ===================== JUOSTOS ===================== */

.aliarmo-juosta, .ispejimo-juosta {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-radius: var(--r-m);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}
.aliarmo-juosta {
  background: var(--armed);
  color: #1A0F0B;
  font-weight: 700;
}
.ispejimo-juosta {
  background: rgba(224, 177, 90, 0.10);
  border: 1px solid var(--warn-dim);
  color: var(--warn);
}

/* ===================== KORTELĖS ===================== */

.korteles { display: flex; flex-direction: column; gap: 10px; padding: 22px 0 0; }
#skiltis-grafikai .korteles, #skiltis-zurnalas .korteles { padding: 0; }

.kortele {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 15px 17px;
}
.kortele-virsus { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kortele-vardas { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.kortele-busena {
  transition: color 0.9s ease;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kortele-busena.apsaugota { color: var(--armed); }
.kortele-busena.isjungta { color: var(--ready); }
.kortele-busena.pereinama { color: var(--warn); }
.kortele-busena.veikia { color: var(--ready); }
.kortele-busena.sustabdyta { color: var(--muted-2); }
.kortele-info { color: var(--muted); font-size: 13px; margin-top: 3px; }
.kortele-info.antra { margin-top: 1px; }

/* ---------- EILUTĖ, KURI ATSIVERIA VIETOJE (naudotojo sprendimas 2026-09-01) ----------
   Veiksmai nekabo ekrane, kol jų nereikia: kortelės antraštė pati yra jungiklis.
   ⚠️ Kaina sąmoninga — vienu paspaudimu daugiau kiekvienam veiksmui. Mainais ekranas
   lieka tuščias tol, kol nieko nedarai. §8 nenukenčia: išjungimo mygtukas ne tik
   atskirtas, bet dabar dar ir paslėptas už paspaudimo. */
.kortele-antraste {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kortele-antraste:focus-visible { outline: 2px solid var(--armed); outline-offset: 4px; }
.kortele-tekstas { flex-grow: 1; min-width: 0; }
.kortele-rodykle { flex-shrink: 0; color: var(--muted-2); display: flex; }
.kortele-rodykle svg { width: 18px; height: 18px; display: block; transition: transform 0.24s ease; }
.kortele.atverta .kortele-rodykle { color: var(--ink-2); }
.kortele.atverta .kortele-rodykle svg { transform: rotate(180deg); }

/* Aukštį įrašo `programa.js` (`nustatytiSklaida`), o CSS tik animuoja.
   Yra ir grynai CSS būdas (`grid-template-rows: 0fr → 1fr`, be JS matavimo), bet jis
   remiasi naujesne naršyklių galimybe, o ši programa sukasi nežinia kokiame telefone.
   Matuojant JS rezultatas vienodas visur, tad pasirinktas nuobodesnis kelias.
   `overflow: hidden` kartu sukuria savą kontekstą, tad vidinės paraštės neišlenda
   pro užvertą kortelę. */
.kortele-sklaida {
  overflow: hidden;
  height: 0;
  transition: height 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Veiksmai. ⚠️ Išjungimas NIEKADA nestovi šalia įjungimo taip, kad juos būtų galima
   supainioti paspaudus paskubomis (CLAUDE.md §8) — jis atskirtas linija, tarpu ir
   tyliu (ne užpildytu) mygtuku, kad pirštas jo nerastų atsitiktinai. */
.kortele-veiksmai { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.veiksmu-skirtukas { height: 1px; background: var(--line); margin: 6px 0 2px; }
/* auto-fit, kad likęs vienas mygtukas (įvykdytai vienkartinei — tik „Ištrinti")
   užimtų visą plotį, o ne pusę su tuščia vieta šalia. */
#skiltis-grafikai .kortele-veiksmai { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* ---------- MATOMI VEIKSMAI (nuo 2026-09-03) ----------
   „Įjungti apsaugą" ir atgalinė atskaita su „Atšaukti" nesislepia už paspaudimo.
   Priežastis paprasta: vakarinis įjungimas yra dažniausias veiksmas programoje, o
   kainavo du paspaudimus. Slepiamas lieka TIK išjungimas — klaidos kaina ten kita
   (§8), ir būtent jam skirtas atsivėrimas.
   ⚠️ Kai slėpti nebėra ko, antraštė piešiama ne mygtuku, o `div.be-sklaidos`: rodyklė,
   atverianti tuštumą, klaidina, o `cursor: pointer` ant nespaudžiamo teksto — meluoja. */
.kortele-antraste.be-sklaidos { cursor: default; }
.kortele-veiksmai.matomi { margin-top: 12px; }

/* ===================== MYGTUKAI ===================== */

.mygtukas {
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--r-m);
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  min-height: 50px;            /* pirštui, ne pelei */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.08s;
}
.mygtukas:active { transform: scale(0.985); }
.mygtukas:hover { background: var(--line); }
.mygtukas:disabled { opacity: 0.45; cursor: default; transform: none; }
.mygtukas svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Pirminis — ŠVIESUS, ne būsenos spalvos: kad mygtukas nemeluotų apie apsaugos padėtį. */
.mygtukas.pirminis {
  background: var(--veiksmas);
  border-color: var(--veiksmas);
  color: var(--veiksmas-ink);
  font-weight: 700;
}
.mygtukas.pirminis:hover { background: #FFFFFF; }

/* Pavojingas (išjungimas) — tyčia TYLUS: kontūras, ne užpildas. */
.mygtukas.pavojingas {
  background: transparent;
  border-color: var(--armed-dim);
  color: var(--armed);
}
.mygtukas.pavojingas:hover { background: rgba(228, 120, 92, 0.08); }
.mygtukas.platus { width: 100%; margin-top: 14px; }

.mygtukas:focus-visible { outline: 2px solid var(--armed); outline-offset: 2px; }

/* ===================== BLOKAI ===================== */

.blokas { padding: 24px 0 0; }
#skiltis-grafikai .blokas, #skiltis-zurnalas .blokas { padding: 0; margin-top: 30px; }
.blokas h2 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.zonu-sarasas { display: flex; flex-direction: column; gap: 6px; }
/* Zona yra mygtukas: paspaudus duodamas savas pavadinimas (Protegus'e jie „Zone N"). */
.zona {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 12px 15px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  min-height: 52px;
  transition: background 0.12s, border-color 0.12s;
}
.zona:hover { background: var(--surface-2); }
.zona.nerami { border-color: var(--warn-dim); }
.zona .zonos-nr {
  flex-shrink: 0;
  min-width: 32px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 7px;
  padding: 4px 6px;
  font-variant-numeric: tabular-nums;
}
.zona .vardas { flex-grow: 1; min-width: 0; }
.zona .be-vardo { color: var(--muted-2); }
.zona .zymė {
  color: var(--warn);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: right;
}
.zona .zymė.rami { color: var(--muted-2); font-weight: 500; }
.zona .zymė.gedimas { color: var(--armed); }

/* ---------- faktų tinklelis (sistema, zonų santrauka) ---------- */
.faktu-tinklelis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.faktas {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 11px 13px;
  min-width: 0;
}
.faktas.platus { grid-column: 1 / -1; }
.faktas .pavadinimas {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.faktas .verte {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.faktas .verte.gerai { color: var(--ready); }
.faktas .verte.blogai { color: var(--armed); }
.faktas .verte.ispejimas { color: var(--warn); }
#zonu-santrauka { margin-bottom: 18px; }

/* ---------- perjungiklis (Sargas / Centralė) ---------- */
.perjungiklis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 4px;
  margin-top: 4px;
}
.perjungiklio-mygtukas {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 42px;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.perjungiklio-mygtukas.aktyvus { background: var(--surface-2); color: var(--ink); }

.perzvalga { display: flex; flex-direction: column; gap: 6px; }
.perzvalgos-eilute {
  display: flex;
  gap: 14px;
  align-items: baseline;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 12px 15px;
  font-size: 14.5px;
}
.perzvalgos-eilute .kada { color: var(--ink); font-weight: 700; white-space: nowrap; }
.perzvalgos-eilute .ka { color: var(--muted); }
.perzvalgos-eilute.isjungta-taisykle { opacity: 0.42; }

/* ===================== ŽURNALAS ===================== */

.zurnalas { display: flex; flex-direction: column; gap: 4px; }
.zurnalo-eilute {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 11px 15px 11px 19px;
  font-size: 14.5px;
  line-height: 1.4;
}
/* Spalvota briauna vietoj storo kairiojo rėmelio — ramiau ilgame sąraše. */
.zurnalo-eilute::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  border-radius: 1px;
  background: var(--line-2);
}
.zurnalo-eilute.tipas-komanda::before { background: var(--ink-2); }
.zurnalo-eilute.tipas-busena::before { background: var(--ready); }
.zurnalo-eilute.tipas-klaida::before { background: var(--armed); }
.zurnalo-eilute .laikas {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 2px;
}
.zurnalo-eilute .saltinis {
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===================== APAČIOS JUOSTA ===================== */

.juosta {
  position: fixed;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--ground-2) 94%, transparent);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(14px);
  z-index: 40;
}
.juostos-mygtukas {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted-2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  min-height: var(--juostos-aukstis);
  transition: color 0.15s;
}
.juostos-mygtukas svg { width: 21px; height: 21px; }
.juostos-mygtukas.aktyvus { color: var(--ink); }

/* ===================== LANGAI ===================== */

.uzdanga {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: grid;
  place-items: end center;
  padding: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
}
/* Telefone langas pakyla iš apačios — ranka jį pasiekia, o ne tempiasi į ekrano vidurį. */
.langas {
  background: var(--ground-2);
  border: 1px solid var(--line-2);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 30rem;
  max-height: 92dvh;
  overflow-y: auto;
  animation: pakyla 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes pakyla { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.langas::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-2);
  margin: -8px auto 18px;
}
.langas h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.ispejimas {
  background: rgba(224, 177, 90, 0.10);
  border: 1px solid var(--warn-dim);
  color: var(--warn);
  border-radius: var(--r-m);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 16px 0;
  text-wrap: pretty;
}
.langos-mygtukai { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }

.pin-ivestis {
  width: 100%;
  text-align: center;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  font-size: 26px;
  font-weight: 600;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  color: var(--ink);
  min-height: 64px;
}
.pin-ivestis:focus { outline: none; border-color: var(--armed); }

/* ---------- SAVA PIN KLAVIATŪRA (naudotojo sprendimas 2026-09-01) ----------
   Sisteminė klaviatūra uždengia pusę ekrano ir stumdo langą, o šitas langas
   atsiveria naktį, viena ranka, prie vartų. Todėl savi klavišai — 56 px, ir
   langas stovi vietoje. */
.pin-klaviatura { margin-top: 18px; }
.pin-taskai {
  display: flex;
  justify-content: center;
  gap: 14px;
  min-height: 14px;
  margin-bottom: 20px;
}
.pin-taskas {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: background 0.15s, border-color 0.15s;
}
.pin-taskas.pilnas { background: var(--armed); border-color: var(--armed); }
.pin-klavisai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pin-klavisas {
  appearance: none;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s;
}
.pin-klavisas:active { background: var(--line); }
.pin-klavisas:focus-visible { outline: 2px solid var(--armed); outline-offset: 2px; }
/* „Valyti" ir trynimas — tylesni: jie ne skaičiai, o pagalba. */
.pin-klavisas.tarnybinis {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.pin-klavisas.tarnybinis:active { background: var(--surface); }
.pin-klavisas.tarnybinis svg { width: 22px; height: 22px; }

/* ===================== LAUKAI ===================== */

.laukas { display: block; margin-bottom: 14px; border: 0; padding: 0; }
.laukas > span, .laukas > legend {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 7px;
}
.laukas input, .laukas select {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;                /* <16px iOS'e priartina ekraną įvedant */
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  color: var(--ink);
  min-height: 50px;
}
.laukas input:focus, .laukas select:focus { outline: none; border-color: var(--ink-2); }
.laukas select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.sezonas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dienos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.diena {
  text-align: center;
  padding: 12px 0;
  border-radius: var(--r-s);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.diena.pazymeta {
  background: var(--veiksmas);
  border-color: var(--veiksmas);
  color: var(--veiksmas-ink);
}

/* Greiti mygtukai vienkartinei taisyklei. „Šiandien" ir „rytoj" yra beveik visi
   atvejai, tad datos rinkiklis lieka tik retesniems. */
.greiti { display: flex; gap: 8px; margin-bottom: 8px; }
.greitas {
  appearance: none;
  flex-grow: 1;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--r-m);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.greitas.pazymeta {
  background: var(--veiksmas);
  border-color: var(--veiksmas);
  color: var(--veiksmas-ink);
}

.klaida { color: var(--armed); font-size: 13.5px; min-height: 1.2rem; margin: 10px 0 0; line-height: 1.4; }

/* ===================== PRANEŠIMAS ===================== */

.pranesimas {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--juostos-aukstis) + 16px + env(safe-area-inset-bottom));
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 60;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: pakyla 0.2s ease;
}
.pranesimas.bloga { background: var(--armed); color: #1A0F0B; border-color: var(--armed); }
.pranesimas.gera { background: var(--ready); color: #062313; border-color: var(--ready); }

/* Judesys — tik tiems, kas jo nori. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===================== ŠVIESI TEMA ===================== */
/* Programa naudojama ir dieną. Tamsi lieka pirmine.

   ⚠️ LINIJOS ŠVIESIOJE TEMOJE PASTORINTOS 2026-09-03 (naudotojo sprendimas).
   Buvo `--line: #E0E4E0` — kortelės kraštas prieš foną turėjo vos **1,18** kontrastą
   (WCAG sąsajos riboms reikalauja 3,0), tad telefone saulėje sąrašas atrodydavo kaip
   vientisas teksto blokas be jokių ribų. Dabar `#ACB1AC` = **2,01**: kraštas matomas,
   bet linija lieka plona ir A krypties „plaukelio linijų" pojūtis nedingsta.
   `--line-2` pastorinta kartu (`#CBD1CB` → `#9BA09B`, 1,43 → 2,45), kad išliktų
   hierarchija: `--line-2` visada stipresnė už `--line`.
   ℹ️ TAMSI TEMA SĄMONINGAI NELIESTA — jos skaičiai panašūs (1,28 / 1,52), bet ji
   žiūrima tamsoje, kur silpna šviesi linija ant juodo fono dar skaitosi. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="dark"]) {
    --ground: #F4F6F4;
    --ground-2: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #EDF0ED;
    --line: #ACB1AC;
    --line-2: #9BA09B;

    --ink: #121615;
    --ink-2: #39423F;
    --muted: #67716D;
    --muted-2: #96A09B;

    --armed: #B14A30;
    --armed-dim: #E8C4B8;
    --armed-glow: rgba(177, 74, 48, 0.13);
    --ready: #217A4B;
    --ready-dim: #BFE0CC;
    --ready-glow: rgba(33, 122, 75, 0.11);
    --warn: #8A6410;
    --warn-dim: #E3D2A8;
    --warn-glow: rgba(138, 100, 16, 0.11);
    --nezinia-glow: rgba(103, 113, 109, 0.09);

    --armed-svelnus: #B07E71;
    --ready-svelnus: #6C987B;
    --warn-svelnus: #A1885E;

    --veiksmas: #121615;
    --veiksmas-ink: #FFFFFF;
  }
  :root:not([data-tema="dark"]) .apsaugota .busenos-tekstas { color: #8A3620; }
  :root:not([data-tema="dark"]) .isjungta .busenos-tekstas { color: #17603A; }
  :root:not([data-tema="dark"]) .mygtukas.pirminis:hover { background: #000000; }
  :root:not([data-tema="dark"]) .aliarmo-juosta { color: #FFFFFF; }
  :root:not([data-tema="dark"]) .pranesimas.bloga { color: #FFFFFF; }
  :root:not([data-tema="dark"]) .pranesimas.gera { color: #FFFFFF; }
}

/* ---------- PRIVERSTINAI ŠVIESI (naudotojo jungiklis, `tema.js`) ---------- */
/* ⚠️ TIE PATYS TOKENAI, kaip bloke aukščiau, ir jie PRIVALO sutapti reikšmė į reikšmę.
   Surašyti juos vienoje vietoje neišeina: viena sąlyga yra medijos užklausa
   („telefonas šviesus"), kita — atributas ant šaknies („naudotojas pasirinko šviesią"),
   o CSS jų į vieną selektorių nesujungia. Todėl blokas dubliuotas SĄMONINGAI.

   Kad jie tyliai neišsiskirtų (o išsiskyrę duotų pusiau šviesią sąsają, kurioje
   nebūtų įskaitoma apsaugos būsena), juos lygina `src/patikra-saugiklio.js`
   13 skyrius — ji leidžiama PRIEŠ KIEKVIENĄ diegimą ir PC'e, ir serveryje.
   Keiti čia — keisk ir ten, arba diegimas sustos. Taip ir turi būti. */
:root[data-tema="light"] {
  --ground: #F4F6F4;
  --ground-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EDF0ED;
  --line: #ACB1AC;
  --line-2: #9BA09B;

  --ink: #121615;
  --ink-2: #39423F;
  --muted: #67716D;
  --muted-2: #96A09B;

  --armed: #B14A30;
  --armed-dim: #E8C4B8;
  --armed-glow: rgba(177, 74, 48, 0.13);
  --ready: #217A4B;
  --ready-dim: #BFE0CC;
  --ready-glow: rgba(33, 122, 75, 0.11);
  --warn: #8A6410;
  --warn-dim: #E3D2A8;
  --warn-glow: rgba(138, 100, 16, 0.11);
  --nezinia-glow: rgba(103, 113, 109, 0.09);

  --armed-svelnus: #B07E71;
  --ready-svelnus: #6C987B;
  --warn-svelnus: #A1885E;

  --veiksmas: #121615;
  --veiksmas-ink: #FFFFFF;
}
:root[data-tema="light"] .apsaugota .busenos-tekstas { color: #8A3620; }
:root[data-tema="light"] .isjungta .busenos-tekstas { color: #17603A; }
:root[data-tema="light"] .mygtukas.pirminis:hover { background: #000000; }
:root[data-tema="light"] .aliarmo-juosta { color: #FFFFFF; }
:root[data-tema="light"] .pranesimas.bloga { color: #FFFFFF; }
:root[data-tema="light"] .pranesimas.gera { color: #FFFFFF; }