/* Sveikatos dienynas — mobiliajam pirmiausia.
   Tamsi tema sąmoningai: dienynas dažniausiai atidaromas rytą pabudus arba
   vakare lovoje, o šviesus ekranas tuo metu erzina.

   VIZUALINĖ SISTEMA (2026-08-28) — „hibridas".
   Surinkta iš penkių sporto laikrodžių programų (Garmin Connect, WHOOP, Oura,
   Coros, Polar Flow) bendros gramatikos; palyginimas — `dizainas/Palyginimas.dc.html`.
   Šešios taisyklės, kurių laikosi VISI ekranai:

   1) Beveik juodas fonas. Ne mada: ekranas atidaromas pirmą minutę po pabudimo.
   2) Vienas skaičius valdo ekraną; visa kita smulku, kol jo neprireikia.
   3) Spalva reiškia BŪSENĄ, ne puošmeną. Trys reikšmės ir tik trys:
      `--ger` (į gerą pusę), `--blog` (į blogą), `--neut` (per mažas pokytis).
      Numatytoji būsena — bespalvė.
   4) Skaičius visada su atskaita: 7 parų vidurkiu (Δ) arba 7 parų juosta.
      Skaičius be atskaitos nieko nesako.
   5) Gilyn — pakopomis: balas → tendencija → žali skaičiai.
   6) Forma: stačiakampiai kraštai, 1 px linijos, būseną neša 2–3 px juosta
      kairėje. Jokių apvalinimų ir jokių nuožulnų (ankstesnė „fasetė" pašalinta:
      ji reikalavo dviejų sluoksnių kiekvienam elementui ir kovojo su tankiu).

   ATSARGINĖ SPALVA `--akc` (oranžinė) — TIK sandarai: aktyvi meniu skiltis,
   antraštės linija, grafiko linija. Ji NIEKADA nereiškia „gerai" ar „blogai". */

:root {
  --f: Archivo, "Segoe UI", system-ui, sans-serif;
  --m: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --tekstas: #f3f6f9;
  --antrinis: #a6afba;
  --etikete: #79838f;
  --blankus: #5c656f;
  --vienetas: #79838f;

  /* Duomenų kanalai — žr. 3 taisyklę. */
  --ger: #16e08b;
  --blog: #ff5a6a;
  --neut: #79838f;

  --sportas: #6fc64c;   /* sporto dienos ir treniruočių eilutės */
  --reikia: #e8b23c;    /* trūkstamas privalomas rankinis laukas */
  --akc: #ff6a1f;       /* TIK sandara, niekada ne verdiktas */

  --lin: #191e24;
  --lin2: #232a32;
  --pav: #0b1014;       /* plokštumos fonas */
  --fonas: #070a0d;

  /* Suderinamumas su senais pavadinimais, kad likę selektoriai neliktų be spalvos. */
  --geriau: var(--ger);
  --blogiau: var(--blog);
  --neutralus: var(--neut);
  --akcentas: var(--akc);
  --mono: var(--m);
  --sans: var(--f);
  --hair: var(--lin);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--tekstas);
  font: 15px/1.45 var(--f);
  background: var(--fonas);
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

/* Fonas — atskiras FIKSUOTAS sluoksnis po turiniu, o ne `background-attachment:
   fixed` ant `body`: pastarasis ilgame sąraše nupiešiamas tik ties matomu langu
   (žemiau lieka plika drobė), o telefone dar ir brangiai persipiešia slenkant. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(78% 34% at 50% -3%, #16e08b12 0%, transparent 66%),
    linear-gradient(180deg, #070a0d 0%, #040608 46%, #000000 100%);
}

.paslepta { display: none !important; }

/* ---------- plokštumos ----------
   `.fas` liko kaip išorinis apvalkalas (jį kuria `fas()` funkcija app.js'e), bet
   forma dabar paprasta: piešia VIDINIS sluoksnis, išorinis nieko nedaro. */

.fas { display: block; }
.fas > .vidus {
  display: block; position: relative;
  background: var(--pav); border: 1px solid var(--lin2);
  padding: 12px 13px;
}
.fas--herojus > .vidus { padding: 14px 15px; }
.fas--plytele > .vidus { padding: 11px 12px; }

.fas--valdiklis > .vidus {
  min-height: 46px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #0e1418;
}
.fas--zyme > .vidus { padding: 5px 8px; border-color: var(--lin2); background: #11171c; }

button.fas, a.fas { display: block; width: 100%; border: 0; font: inherit; color: inherit; text-align: left; background: none; }
button.fas:disabled { opacity: .5; }
button.fas--valdiklis:active > .vidus { background: #151d23; }
.fas:focus-within > .vidus { border-color: #3a4854; }

/* Duomenų kanalas ant plytelės: plona juosta viršuje. */
.fas[data-s] > .vidus { border-top-color: var(--ch, var(--neut)); }
.fas[data-s] .label { color: color-mix(in oklab, var(--ch) 30%, #a6afba); }

/* ---------- registras (sąrašo eilutė) ---------- */

.eil {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 10px 12px; box-sizing: border-box;
  border: 0; border-bottom: 1px solid var(--lin); border-left: 3px solid #1e262e;
  background: none; color: var(--tekstas); font: inherit; text-align: left;
}
.eil--pilna { border-left-color: #2f7f97; }
.eil--dalis { border-left-color: var(--reikia); }
.eil--tuscia { border-left-color: #1e262e; }
.eil--sportas { border-left-color: var(--sportas); background: #0d1216; }

/* ---------- antraštė ----------
   Kairėje — data (skiltyje „Diena") arba skilties vardas; skiltį pasako apatinis
   meniu, ne antraštė. Tokia tvarka visose penkiose lygintose programose. */

header {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
  background: var(--fonas);
  border-bottom: 2px solid var(--akc);
}
.uzrasas { display: none; }
#antraste {
  margin: 0; font-family: var(--m); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--etikete);
}
.iseiti-vieta { display: flex; align-items: center; height: 40px; }
.iseiti-vieta button { width: auto; }
.iseiti-vieta .fas > .vidus { background: none; border: 0; padding: 0; }
.iseiti {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--antrinis);
}

main {
  position: relative; z-index: 2;
  padding: 14px 14px 0; max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}

/* ---------- meniu ---------- */

.meniu-uzdanga {
  position: fixed; left: 0; right: 0; bottom: 0; height: 120px; z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, #000000 24%, #000000d9 54%, transparent 100%);
}
nav#meniu {
  position: fixed; left: 0; right: 0; z-index: 5;
  bottom: 0; padding-bottom: env(safe-area-inset-bottom);
  background: #05080a; border-top: 1px solid var(--lin2);
}
.meniu-vidus {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 700px; margin: 0 auto;
}
nav#meniu button {
  position: relative; min-height: 56px; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--etikete); font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  border-top: 2px solid transparent; margin-top: -1px;
}
nav#meniu button svg { stroke: currentColor; }
nav#meniu button.aktyvi { color: var(--tekstas); border-top-color: var(--akc); }

/* ---------- DIENA: herojus ---------- */

.data-eile {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--m); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--etikete);
}
.zyme-vakar > .vidus {
  padding: 3px 7px; background: #16221b; border-color: #24402f;
  font-family: var(--m); font-size: 9.5px; letter-spacing: .08em; color: #7de0b4;
}
.zyme-vakar { flex-shrink: 0; }
.zyme-diena > .vidus { background: #12181e; border-color: var(--lin2); color: var(--etikete); }

.herojus { display: flex; flex-direction: column; }
.h-eilute { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--etikete); }
.h-balas { display: flex; align-items: flex-start; gap: 7px; margin-top: 5px; }
.h-sk {
  font-size: 92px; line-height: .84; font-weight: 700; letter-spacing: -.05em;
  color: var(--ch, var(--tekstas)); font-variant-numeric: tabular-nums;
}
.h-sk.nera { color: #2a333c; }
.h-is { font-family: var(--m); font-size: 13px; font-weight: 500; color: var(--etikete); margin-top: 10px; }
.h-zona { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.h-taskas { width: 8px; height: 8px; border-radius: 50%; background: var(--ch, var(--neut)); }
.h-zonat { font-size: 13.5px; font-weight: 600; color: var(--ch, var(--antrinis)); }
.h-zonap { font-size: 13.5px; color: var(--etikete); }
.nakties-eile {
  margin-top: 9px; font-family: var(--m); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; color: var(--blankus);
}
.h-sakinys { margin: 11px 0 0; font-size: 14px; line-height: 1.48; color: var(--antrinis); text-wrap: pretty; }
.h-sakinys b { color: var(--tekstas); font-weight: 600; }
.h-sakinys .ger { color: var(--ger); font-weight: 600; }
.h-sakinys .blog { color: var(--blog); font-weight: 600; }

/* ---------- DIENA: trys ciferblatai ---------- */

.dialai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dialas { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.dialas svg { display: block; }
.d-pav { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--etikete); }

/* ---------- DIENA: rodiklių eilutės ---------- */

.skiltis-antraste { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skiltis-kaire { display: flex; align-items: center; gap: 9px; }
.skiltis-pav { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--etikete); }
.skiltis-desine { font-family: var(--m); font-size: 9px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--blankus); }

.r-eil { display: flex; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--lin); }
.r-eil:last-child { border-bottom: 0; }
.r-pav { flex-grow: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--antrinis); }
.r-pav sup { font-size: 9px; color: var(--etikete); }
.r-juosta { width: 80px; flex-shrink: 0; }
.r-juosta svg { display: block; width: 80px; height: 22px; }
.r-reiksme {
  width: 74px; flex-shrink: 0; text-align: right;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.r-reiksme.nera { color: #2a333c; }
.r-vnt { font-family: var(--m); font-size: 9.5px; font-weight: 500; color: var(--etikete); margin-left: 4px; letter-spacing: 0; }
.r-delta {
  width: 46px; flex-shrink: 0; text-align: right;
  font-family: var(--m); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--blankus);
}
.r-delta.ger1, .r-delta.ger2 { color: var(--ger); }
.r-delta.blog1, .r-delta.blog2 { color: var(--blog); }
.r-delta.ger2, .r-delta.blog2 { font-weight: 600; }

.isnasa { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--blankus); text-wrap: pretty; }

/* ---------- veiksmai ---------- */

.veiksmai { display: flex; gap: 8px; }
.veiksmai > * { flex-grow: 1; }
.mygtuko-tekstas { font-size: 13px; font-weight: 600; color: var(--antrinis); }
.pirminis > .vidus { background: #0f1d17; border-color: #2c4a38; }
.pirminis .mygtuko-tekstas { color: #7df3c4; }

/* ---------- likę bendri elementai ---------- */

.tinklelis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.label {
  font-size: 11px; font-weight: 500; letter-spacing: .03em; color: var(--etikete);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.num { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin-top: 4px;
       color: var(--tekstas); font-variant-numeric: tabular-nums; }
.num.nera { color: #2a333c; }
.vnt { font-family: var(--m); font-size: 10px; font-weight: 500; color: var(--vienetas); margin-left: 4px; }

.pastaba { display: flex; gap: 7px; color: var(--etikete); font-size: 11px; line-height: 1.4; }
.pastaba svg { flex-shrink: 0; margin-top: 1px; }

/* ---------- formos laukai (registras) ---------- */

.eil--laukas {
  min-height: 48px; flex-direction: column; align-items: stretch; gap: 3px; padding: 8px 12px;
}
.eil--laukas.reikia { border-left-color: var(--reikia); }
.eil--laukas.pilna { border-left-color: #2f7f97; }
.eil--laukas:focus-within { background: #0e141a; border-left-color: var(--akc); }
.lauko-eilute { display: flex; align-items: center; gap: 8px; }
.lauko-vardas { font-size: 11px; letter-spacing: .03em; color: var(--etikete); }
.butinas { color: var(--reikia); font-size: 10px; font-family: var(--m); margin-left: auto; }
.eil--laukas input, .eil--laukas textarea {
  width: 100%; border: 0; background: none; outline: none; padding: 0;
  /* 16px būtina: mažesnis šriftas priverčia telefoną priartinti ekraną. */
  font-family: var(--f); font-size: 16px; color: var(--tekstas); line-height: 1.35;
}
.eil--laukas textarea { min-height: 46px; resize: vertical; }
.eil--laukas input::placeholder, .eil--laukas textarea::placeholder { color: #39434d; }

.formos-antraste { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.formos-data { font-family: var(--m); font-size: 10.5px; color: var(--etikete); }
.formos-vardas { font-size: 13.5px; font-weight: 600; display: flex; align-items: baseline; gap: 9px; }
.hero-data { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.formos-truksta { font-family: var(--m); font-size: 10.5px; font-weight: 500; color: var(--reikia); letter-spacing: .04em; }
.formos-truksta.pilna { color: var(--ger); }

/* ---------- dienyno ir sporto sąrašai ---------- */

.stulpeliai {
  display: flex; align-items: center; padding: 0 12px 6px;
  font-family: var(--m); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--blankus);
}
.menuo {
  display: flex; align-items: baseline; gap: 9px; padding: 14px 2px 7px;
  font-family: var(--m); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blankus);
}
.d-data { font-family: var(--m); font-size: 12.5px; color: var(--antrinis); }
.d-sav { font-size: 11px; color: var(--blankus); margin-left: 6px; }
.d-reiksmes {
  margin-left: auto; display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--tekstas); font-variant-numeric: tabular-nums;
}
.d-reiksmes .antra { color: var(--etikete); font-weight: 500; font-size: 12.5px; }
.stulpeliai .d-reiksmes {
  font-family: var(--m); font-size: 9px; font-weight: 500; letter-spacing: .12em; color: var(--blankus);
}
.d-nera { margin-left: auto; font-size: 11.5px; color: #46505a; }
.s-tekstas { margin-left: auto; font-size: 12.5px; color: var(--tekstas); }
.legenda { display: flex; gap: 14px; margin-top: 10px; font-size: 10.5px; color: var(--etikete); }
.legenda b { display: inline-block; width: 3px; height: 11px; margin-right: 6px; vertical-align: -2px; }
.men-eil { display: flex; align-items: center; padding: 9px 0; border-top: 1px solid var(--lin); }
.men-eil:first-of-type { border-top: 0; }
.men-menuo { font-family: var(--m); font-size: 12px; color: var(--antrinis); }
.men-juosta { flex-grow: 1; height: 6px; margin: 0 12px; background: #141a20; position: relative; }
.men-juosta i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sportas); }
.men-sk { font-size: 12.5px; font-weight: 600; color: var(--tekstas); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.men-proc { font-family: var(--m); font-size: 11px; color: var(--etikete); min-width: 38px; text-align: right; }

/* ---------- analizė ---------- */

.kortele-vardas { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.klausimas { font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0; }

table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--m); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--blankus);
  font-weight: 500; text-align: right; padding: 0 0 7px; border-bottom: 1px solid var(--lin2);
}
th:first-child { text-align: left; }
td {
  font-size: 13px; font-weight: 500; text-align: right;
  padding: 7px 0; border-bottom: 1px solid var(--lin); color: var(--tekstas);
  font-variant-numeric: tabular-nums;
}
td:first-child { text-align: left; font-size: 13px; font-weight: 500; color: var(--antrinis); }

/* SKAITINIAI STULPELIAI TURI TARPĄ IŠ KAIRĖS.
   Be jo `padding: 7px 0` palieka nulinį horizontalų tarpą, o abu stulpeliai
   lygiuojami į dešinę — tad platūs skaičiai susiliečia briaunomis ir suplaukia
   į vieną. Telefone (390 px) eilutė „Training Readiness“ rodė „47.9-22.9“, kas
   skaitosi kaip vienas skaičius, o ne kaip 47,9 ir −22,9 (rasta 2026-08-30
   telefono patikroje; ryškiausiai matoma ties Training Readiness, nes jo
   reikšmės ilgiausios). `nowrap` — kad skaičius pats nelūžtų per pusę.
   Naują lentelės stulpelį pridėjus, ši taisyklė galioja jam savaime. */
td + td, th + th { padding-left: 10px; }
td + td { white-space: nowrap; }

/* „(15/67 d.)“ neturi lūžti per vidurį — lūždavo tarp „(15/67“ ir „d.)“, ir
   atrodydavo kaip sulaužytas puslapis. Nesutilpusi žyma dabar keliauja į kitą
   eilutę visa. */
.dalinis { white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* Spalva pagal NAUDĄ, ne pagal skaičiaus ženklą, o sodrumas pagal pokyčio dydį.
   Per mažas pokytis lieka nedažytas visai, kad 0,1 punkto svyravimas neatrodytų
   kaip įvykis. Selektoriai su `td` BŪTINI: `.ger1` vienas nurungiamas `td` taisyklės. */
td.ger1 { color: color-mix(in oklab, var(--ger) 62%, #93a0ac); }
td.ger2 { color: var(--ger); font-weight: 600; }
td.blog1 { color: color-mix(in oklab, var(--blog) 62%, #93a0ac); }
td.blog2 { color: var(--blog); font-weight: 600; }

/* Rodiklis, kuris mechaniškai priklauso nuo krūvio (Training Readiness sporto
   lentelėse). Nedažom jo visai — kitaip didžiausias skaičius lentelėje atrodo
   kaip stipriausias įrodymas, nors nieko neįrodo. */
tr.mechaninis td { color: var(--etikete); }
.zvaigzde { color: var(--reikia); }
.dalinis { font-family: var(--m); font-size: 9.5px; color: var(--blankus); }
.mazas { color: var(--etikete); font-size: 10.5px; line-height: 1.45; margin: 10px 0 0; }
.skale { font-family: var(--m); font-size: 9.5px; letter-spacing: .06em; color: var(--blankus); }

.grafikas { width: 100%; height: 118px; display: block; }
.grafiko-vieta { display: flex; gap: 8px; }

/* KREIVE, KURIA GALIMA VESTI PIRSTU.
   `touch-action: pan-y` — vertikalus puslapio slinkimas lieka naršyklei (kitaip
   pirštas ant grafiko nebegalėtų slinkti puslapio žemyn), o horizontalūs judesiai
   ateina pas mus. Su `none` puslapis užstrigtų, be nieko — kreivė negautų judesių.
   `user-select: none` — kad vedžiojant nebūtų pažymimas tekstas. */
.kreives-vieta { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* Paspaudimo plotas pirstui: 9,5 px sriftas duotu ~20 px auksti, o rekomenduojama
   bent ~40. Padingas ir yra visas skirtumas — tekstas lieka toks pat mazas. */
.uzverti { background: none; border: 0; padding: 11px 0 11px 16px; margin: -11px 0; color: var(--blankus);
  cursor: pointer; }
.grafiko-skale {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2px 0 20px; pointer-events: none;
}
.claude-tekstas { white-space: pre-wrap; font-size: 13px; line-height: 1.55; color: var(--antrinis); }

/* 14 parų juosta skiltyje „Diena" */
.juosta14 { width: 100%; height: 128px; display: block; }
.legenda14 { display: flex; gap: 13px; margin-top: 6px; }
.leg { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--etikete); }
.leg b { display: inline-block; width: 11px; height: 3px; }

/* ---------- prisijungimas ---------- */

.prisijungimas {
  position: relative; z-index: 2;
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: stretch; justify-content: center; padding: 0 26px; gap: 12px;
}
#prisijungimo-forma > .vidus { border-top: 2px solid var(--akc); padding: 20px 18px 18px; }
.zenklo-eile { display: flex; align-items: center; gap: 13px; }
.zenklas { width: 46px; height: 46px; flex-shrink: 0; }
.zenklas > .vidus {
  height: 100%; padding: 0; display: flex; align-items: center; justify-content: center;
  background: #0f1d17; border-color: #2c4a38;
}
.prisijungimas h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.prisijungimas .paantraste { margin: 3px 0 0; font-family: var(--m); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--etikete); }
.lauko-vardas--virsus {
  display: block; font-family: var(--m); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--etikete); margin: 22px 0 7px;
}

.ldk { display: block; }
.ldk > .lauko-vidus {
  min-height: 50px; display: flex; align-items: center; padding: 0 13px;
  background: #05080b; border: 1px solid var(--lin2);
}
.ldk:focus-within > .lauko-vidus { border-color: #3a4854; }
.ldk input {
  width: 100%; border: 0; background: none; outline: none; padding: 0;
  font-family: var(--m); font-size: 16px; letter-spacing: .18em; color: var(--tekstas);
}
.klaida {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--blog); margin: 12px 0 0;
}
.klaida::before {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 8v4%27/%3E%3Cpath d=%27M12 16h.01%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 8v4%27/%3E%3Cpath d=%27M12 16h.01%27/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- kūrimo aplinka ----------
   Sąmoningai ryšku: sumaišius kūrimo aplinką su produkcija, galima manyti, kad
   įrašai išsaugoti, kai jie guli testinėje bazėje. */
.kurimo-zyme > .vidus { padding: 11px 13px; background: #1a150c; border-color: #3a2f18; }
.kurimo-zyme .antraste-mazas {
  font-family: var(--m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--reikia);
}
.kurimo-zyme code { display: block; margin-top: 7px; font-family: var(--m); font-size: 13px; color: #e8d3a6; }
.kurimo-juosta {
  background: var(--reikia); color: #2e2200;
  text-align: center; font-size: 12px; font-weight: 700;
  padding: 5px; letter-spacing: .04em;
  position: relative; z-index: 5;
}
.pastaba-apacia { font-size: 10.5px; color: var(--blankus); text-align: center; margin: 4px 0 0; line-height: 1.5; }

/* ---------- pranešimo burbulas ---------- */

.zinute {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 20;
  bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px);
}
.zinute > .vidus {
  padding: 10px 16px; font-size: 12.5px; color: var(--tekstas);
  background: #141a20; border: 1px solid var(--lin2);
}