:root {
  /* ============ DIZAINO KODAS (Cute-alist / Premium Playful) ============
     Spalvų ROLĖS (laikomės griežtai):
       spygliuočių žalia (--accent) – veiksmai, mygtukai, antraštės, nuorodos (bazė)
       ambra (--gold)               – šiltas akcentas: žvaigždutės, pasiekimai,
                                      tikslo progresas, aktyvios būsenos
       šalavijo (--accent-soft)     – švelnūs fonai (kortelės, sekcijos)
       persikinė (--peach)          – dėmesys/laikas (terminai, „skaitoma dabar")
       raudona                      – TIK pavojus (trynimas, pradelsta)
     Formos: dideli apvalūs kampai, ploni elegantiški rėmeliai (ne sunkūs šešėliai). */

  /* Minkštas kreminis fonas (vietoj ryškiai balto) */
  --bg: #FDFBF7;
  --bg2: #F6F1E8;
  --card: #FFFFFF;
  --ink: #2C322F;
  /* Antrinis tekstas. Buvo #8A857A – tas pats šiltas pilkas, tik per šviesus:
     ant VISŲ šviesios temos fonų duodavo 3,1–3,7:1, o WCAG AA smulkiam tekstui
     reikia 4,5:1. Tai lietė kiekvieną .hint, datą, autorių ir statistikos
     antraštę (136 vietos). Atspalvis paliktas TAS PATS (H 41°, S 6,4 %) –
     pakeistas tik šviesumas 51 % -> 40 %, tad tonas nepasikeitė, tik tapo
     įskaitomas. Blogiausias atvejis dabar 4,67:1 (ant --danger-soft).
     Tamsios temos --muted keisti nereikėjo – ten jau buvo 5,07–6,44:1. */
  --muted: #6D685F;
  --line: #ECE7DD;

  /* Spygliuočių žalia (pagrindinė – mygtukai, antraštės, veiksmai) */
  --accent: #115E59;
  --accent-dark: #0C4A45;
  --accent-soft: #F0FDF4;

  /* Persikinė (laikas / terminai) */
  --peach: #FB923C;
  /* Buvo #EA7317 – ant savo paties --peach-soft fono duodavo 2,58:1, t. y.
     nepakako net DIDELIAM tekstui (3:1). Tas pats atspalvis (H 26°), tik
     tamsesnis: 4,64:1. Šis variantas skirtas SMULKIAM tekstui – „skaito"
     žymei, terminų užuominoms, piktogramoms. Tamsios temos --peach-deep
     keisti nereikėjo (8,15:1). */
  --peach-deep: #A8520F;
  /* Tas pats persikinis DIDELIEMS skaičiams (statistikos plytelės 27 px,
     demonstracijos skaičius 54 px). WCAG dideliam tekstui reikia tik 3:1, tad
     čia galima išlaikyti gyvesnį oranžinį – 3,31:1 ant --peach-soft, 3,87:1
     ant balto. Sąmoningai ATSKIRTAS nuo --peach-deep: kitaip visai paletei
     tektų taikyti griežčiausią atvejį ir skaičiai taptų rusvi. */
  --peach-num: #CD6413;
  --peach-soft: #FFEAD6;

  /* Levandos (nenaudojama akcentams – palikta suderinamumui) */
  --lav: #a98fe6;
  --lav-deep: #7c5ed4;
  --lav-soft: #f1ecfb;

  /* Ambra (šiltas akcentas – žvaigždutės, pasiekimai, tikslo progresas) */
  --gold: #F59E0B;
  --gold-deep: #92660A;
  --gold-soft: #FEF3C7;

  /* Buvo #d9594a – klaidos pranešimams ant balto tik 3,83:1, o „Ištrinti"
     mygtuke ant --danger-soft net 3,23:1. Tas pats raudonas, tik sodresnis. */
  --danger: #C23929;
  --danger-soft: #fde7e3;

  --radius: 22px;
  --radius-sm: 13px;
  --shadow: 0 2px 10px rgba(60,55,40,.05);
  --shadow-lg: 0 14px 44px rgba(30,50,45,.15);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Bazinė nuorodų spalva. Be jos beklasė nuoroda gauna naršyklės numatytąjį
   #0000EE, kuris tamsioje temoje ant tamsaus fono duoda 1,60:1 – būtent taip
   buvo nutikę DUK atsakyme apie 14 metų paauglius. Specifiškumas mažiausias,
   tad visos nuorodos, turinčios savo taisyklę (mygtukai, nav, poraštė),
   nepasikeičia. */
a { color: var(--accent); }

/* `hidden` reiškia paslėpta – BE IŠIMČIŲ.
   Naršyklės numatytoji `[hidden]{display:none}` taisyklė yra tokio pat
   specifiškumo kaip bet kuri klasės taisyklė, tad `.kazkas{display:flex}`,
   parašyta vėliau faile, ją tyliai perrašo – elementas lieka matomas, nors
   JS jam nustatė `hidden`. Taip 2026-07-31 klasių šoninė juosta liko matoma
   mokytojoms su 0–1 klase: ji užėmė 1265x842 px ir nustūmė klasės kūrimo
   formą už ekrano ribų (mokytoja rašė „niekas nereaguoja“).
   Rizikingų vietų buvo 22, ne viena, tad taisoma bendrai. */
[hidden] { display: none !important; }

/* ── Klaviatūros fokusas: matoma žymė visiems valdikliams (WCAG 2.4.7) ──
   :focus-visible rodoma tik naršant klaviatūra/jungikliu, ne spaudžiant pele.
   Teksto laukai jau turi savo box-shadow žiedą, tad jų čia neliečiam. */
button:focus-visible,
a:focus-visible,
select:focus-visible,
summary:focus-visible,
label:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Subtilus knyginis raštas už viso turinio (kortelės plūduriuoja virš jo) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("pattern.svg");
  background-repeat: repeat;
  background-size: 240px 240px;
  opacity: .05;
}
[data-theme="dark"] body::before { filter: invert(1); opacity: .07; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.2px; }

/* Viršutinė juosta (slim navbar) */
/* Tinklo (offline) būsenos juosta – matoma virš visko */
.net-banner {
  position: sticky; top: 0; z-index: 60;
  background: #b45309; color: #fff;
  text-align: center; font-size: .92rem; font-weight: 600;
  padding: 8px 14px;
}
.net-banner.hidden { display: none; }

header {
  background: var(--accent);
  color: #fff;
  padding: 0 16px;
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 50;
}
[data-theme="dark"] header { background: #134E48; }
.header-inner {
  max-width: 1140px; margin: 0 auto; min-height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* Laužymas BE media query: antraštės turinio plotis priklauso nuo nuorodų
     teksto, ne nuo ekrano dydžio, tad fiksuotas lūžio taškas visada palieka
     tarpą, kuriame turinys netelpa ir puslapis ima slinkti horizontaliai
     (taip ir buvo: ≤560 px veikė, o ties ~562–700 px landingas slinko). */
  flex-wrap: wrap;
}
.brand {
  font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; letter-spacing: -.3px;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.brand-home {
  background: none; border: none; color: inherit; font: inherit; letter-spacing: inherit;
  padding: 0; cursor: pointer; transition: opacity .15s, transform .1s;
}
.brand-home:hover { opacity: .9; }
.brand-home:active { transform: translateY(1px); }
.brand-home:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.topnav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.navlink {
  background: rgba(255,255,255,.18); border: none; color: #fff; font-family: inherit;
  font-weight: 600; font-size: .9rem; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.navlink:hover { background: rgba(255,255,255,.30); }
.navlink.active { background: #fff; color: var(--accent-dark); }

main { max-width: 1140px; margin: 0 auto; padding: 0 16px 32px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin: 22px auto;
  max-width: 1140px;
  border: 1px solid #fff;
}
.card h2 { margin: 0 0 16px; font-size: 1.4rem; }

/* Mygtukas „Pridėti knygą" + skydelio antraštė */
.add-launch { max-width: 1140px; margin: 22px auto 0; display: flex; justify-content: center; }
.add-launch-btn { width: 100%; max-width: 360px; padding: 16px; font-size: 1.12rem; border-radius: var(--radius); }
.add-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.add-head h2 { margin: 0; }

/* Formos/sąrašai gražiau atrodo siauresni; knygų tinklelis ir statistika – platūs */
#add-card { max-width: 760px; }

/* Paieška */
.isbn-row { display: flex; gap: 8px; }
.isbn-row input {
  flex: 1; min-width: 0;
  padding: 13px 15px;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.isbn-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hint { margin: 9px 2px 0; font-size: .85rem; color: var(--muted); }

.btn {
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--radius-sm);
  background: #f1e7d5;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .05s, box-shadow .15s;
}
.btn:hover { background: #e9dcc4; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(47,169,139,.32); }
.btn.primary:hover { background: var(--accent-dark); }
.btn.big { width: 100%; margin-top: 16px; padding: 15px; font-size: 1.05rem; background: linear-gradient(120deg, var(--accent), #2cb6a0); }
.btn.big:hover { background: linear-gradient(120deg, var(--accent-dark), #239585); }
.btn.icon-btn { padding: 13px 15px; font-size: 1.15rem; background: var(--lav-soft); }
.btn.icon-btn:hover { background: #e4d8fb; }
.btn.ghost-danger { background: var(--danger-soft); color: var(--danger); }
.btn.ghost-danger:hover { background: #f9d8d2; }
.btn:disabled { opacity: .55; cursor: default; }
/* Nuorodos, stilizuotos kaip mygtukai (pvz. landing CTA): be pabraukimo, tekstas centre */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.link-btn {
  background: none; border: none; color: var(--accent);
  cursor: pointer; padding: 0; font-size: .85rem; text-decoration: underline; font-family: inherit;
}

.msg { margin-top: 12px; font-size: .92rem; min-height: 1.1em; }
.msg.error { color: var(--danger); }
.msg.loading { color: var(--muted); }
.msg.ok { color: var(--accent); font-weight: 600; }

.hidden { display: none !important; }

/* Rastos knygos forma */
.book-form { margin-top: 20px; border-top: 2px dashed var(--line); padding-top: 20px; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.book-preview { display: flex; gap: 16px; margin-bottom: 18px; }
.cover {
  width: 92px; height: 132px; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--accent-soft);
  box-shadow: var(--shadow); flex-shrink: 0;
}
.bp-info { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bp-title { font-weight: 700; font-size: 1.12rem; }
.bp-author { color: var(--ink); }
.bp-pub { color: var(--muted); font-size: .9rem; margin-bottom: 4px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field-cap { font-size: .85rem; color: var(--muted); font-weight: 600; }
.fields select, .fields input, .fields textarea {
  padding: 11px 13px; font-size: 1rem; border: 2px solid var(--line);
  border-radius: var(--radius-sm); font-family: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
  width: 100%; min-width: 0; max-width: 100%;
}
.fields select:focus, .fields input:focus, .fields textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.fields textarea { resize: vertical; }

/* Žvaigždutės */
.stars { display: flex; align-items: center; gap: 3px; font-size: 1.85rem; line-height: 1; user-select: none; }
.stars span { color: #e7dcc9; cursor: pointer; transition: color .1s, transform .1s; }
.stars span:hover { transform: scale(1.18); }
.stars span.on { color: var(--gold); }
.stars .clear-stars { margin-left: 10px; font-size: .8rem; align-self: center; }

/* Filtras (skaitytojų eilutė; pati išvaizda – .rf-pill žemiau) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

/* Sąrašas */
.readings { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 10px; }
/* Laiko grupės antraštė (pvz. "liep. '26") – pilno pločio eilutė tinklelyje,
   kad ilgame sąraše būtų už ko užsikabinti akiai (rikiuojant pagal datą). */
.r-group {
  grid-column: 1 / -1;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  padding: 16px 2px 2px; margin-top: 4px; border-bottom: 1px solid var(--line);
}
.r-group:first-child { margin-top: 0; padding-top: 0; }

/* „Rodyti daugiau" – sąrašo puslapiavimas (L1): centruotas mygtukas po sąrašu */
.load-more-wrap { display: flex; justify-content: center; margin: 18px 0 4px; }
.load-more-wrap .btn { min-width: 220px; }

/* Greitas peršokimas tarp sąrašo ir statistikos (ilgame puslapyje);
   S2: ta pati sekcija naudojama ir Nustatymų peršokimo juostai. */
.shelf-jump, .settings-jump { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-jump { margin: 0 0 18px; }
.shelf-jump a, .settings-jump a {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid rgba(17,94,89,.18); border-radius: 999px;
  padding: 5px 13px; font-size: .82rem; font-weight: 600; text-decoration: none;
}
.shelf-jump a:hover, .settings-jump a:hover { background: var(--accent); color: #fff; }
[data-theme="dark"] .shelf-jump a, [data-theme="dark"] .settings-jump a { border-color: rgba(79,208,191,.28); }
/* Kompensuoja "sticky" antraštę, kad peršokus tikslas neliktų po ja paslėptas */
#readings, #stats, #set-account, #set-readers, #set-app, #set-help { scroll-margin-top: 70px; }
.reading {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 15px; display: flex; gap: 13px; position: relative; cursor: pointer;
  border: 1px solid #fff;
  transition: box-shadow .15s, transform .15s;
}
.reading:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.reading .cover { width: 76px; height: 112px; }
.reading .cover.placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: var(--accent); }
.r-body { flex: 1; min-width: 0; }
.r-title { font-weight: 700; margin: 0 4px 2px 0; font-size: 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.r-author { color: var(--muted); font-size: .88rem; margin: 0 0 6px; }
.r-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: .82rem; }
.badge { background: var(--gold-soft); color: var(--gold-deep); padding: 3px 11px; border-radius: 999px; font-weight: 700; }
.status { padding: 3px 11px; border-radius: 999px; font-weight: 700; font-size: .8rem; }
.status-perskaite { background: var(--accent-soft); color: var(--accent-dark); }
.status-skaito { background: var(--peach-soft); color: var(--peach-deep); }
.status-nori { background: var(--lav-soft); color: var(--lav-deep); }
.r-date { color: var(--muted); }
.r-pages { color: var(--muted); }
.r-stars { color: var(--gold); letter-spacing: 1px; }
.r-meta-sub { margin-top: 5px; font-size: .78rem; }
.r-isbn { color: var(--muted); font-variant-numeric: tabular-nums; }
.r-link { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.r-link:hover { text-decoration: underline; }
.modal-link { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 600; font-size: .85rem; text-decoration: none; }
.modal-link:hover { text-decoration: underline; }
.modal-link.hidden { display: none; }

.dup-warn { background: var(--gold-soft); color: #8a5a00; border: 1px solid #f0c870; border-radius: var(--radius-sm); padding: 10px 13px; margin: 4px 0 14px; font-size: .9rem; line-height: 1.35; }
.dup-warn.hidden { display: none; }

/* Paieškos pagal pavadinimą rezultatai */
.results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.results.hidden { display: none; }
.res-item { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 9px 11px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; }
.res-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.res-cover { width: 44px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--accent-soft); }
.res-cover.placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--accent); }
.res-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-title { font-weight: 700; font-size: .95rem; color: var(--ink); }
.res-meta { color: var(--muted); font-size: .82rem; }
.res-type { color: var(--accent-dark); font-size: .72rem; font-weight: 600; }

/* Rankinis knygos įvedimas */
.manual-btn { margin: 6px 2px 0; display: inline-block; }
.manual-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.manual-fields .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.manual-fields .field.full { grid-column: 1 / -1; }
.manual-fields input { padding: 11px 13px; font-size: 1rem; border: 2px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; color: var(--ink); background: #fff; width: 100%; min-width: 0; }
.manual-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.manual-fields .link-btn { grid-column: 1 / -1; justify-self: start; }

/* Rikiavimo įrankis */
.list-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.list-tools.hidden { display: none; }
.list-tools label { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.list-tools select { padding: 6px 12px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font-family: inherit; font-size: .85rem; color: var(--ink); cursor: pointer; }
.list-search { flex: 1 1 220px; min-width: 0; padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font-family: inherit; font-size: .9rem; color: var(--ink); }
.list-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.isbn-edit-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.isbn-edit-row input { flex: 1 1 130px; min-width: 0; }
.field-help { margin: 6px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.r-notes { margin: 9px 0 0; font-size: .88rem; color: #6b6358; font-style: italic; }

.empty { text-align: center; color: var(--muted); padding: 36px; font-size: 1.02rem; }

/* Statistika */
.stats-card { padding: 20px; }
.stats-card h2 { margin-bottom: 14px; font-size: 1.25rem; }
.stat-tiles { display: flex; gap: 10px; margin-bottom: 16px; }
.stat-tile {
  flex: 1; text-align: center; background: var(--accent-soft);
  border-radius: var(--radius-sm); padding: 11px 8px;
}
.stat-tile:nth-child(1) { background: var(--accent-soft); }
.stat-tile:nth-child(1) .stat-num { color: var(--accent-dark); }
.stat-tile:nth-child(2) { background: var(--peach-soft); }
.stat-tile:nth-child(2) .stat-num { color: var(--peach-num); }
.stat-tile:nth-child(3) { background: var(--gold-soft); }
.stat-tile:nth-child(3) .stat-num { color: var(--gold-deep); }
.stat-tile:nth-child(4) { background: var(--lav-soft); }
.stat-tile:nth-child(4) .stat-num { color: var(--lav-deep); }
.stat-num { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.stat-lbl { font-size: .74rem; color: var(--muted); margin-top: 2px; }

.stat-block { margin-top: 18px; }
.stat-block h3 { margin: 0 0 9px; font-size: .9rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }

/* Antriniai blokai – 2 stulpeliai, kad statistika nebūtų viena ilga juosta */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.stat-grid .stat-block { margin-top: 18px; }

.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 9px; }
.bar-name { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.bar-name .bar-sub { white-space: nowrap; }
.bar-track { background: #f0e6d4; border-radius: 999px; height: 13px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5fd0b0, var(--accent)); min-width: 3px; transition: width .4s ease; }
.bar-fill.alt { background: linear-gradient(90deg, var(--peach), var(--peach-deep)); }
.bar-fill.alt2 { background: linear-gradient(90deg, var(--lav), var(--lav-deep)); }
.bar-val { font-size: .8rem; font-weight: 700; color: var(--muted); min-width: 16px; text-align: right; }
.bar-sub { font-size: .74rem; color: var(--muted); font-weight: 400; }

/* Pagal skaitytoją: ženkliukai + metinio tikslo progresas */
.child-stat { margin-bottom: 11px; }
.child-stat .bar-name { white-space: normal; }
.medal { font-size: .8rem; font-weight: 700; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.goal-row { margin-top: 6px; }
.goal-label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 3px; }
.goal-row.done .goal-label { color: var(--accent-deep, var(--accent)); font-weight: 700; }
.goal-track { background: #f0e6d4; border-radius: 999px; height: 8px; overflow: hidden; }
.goal-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--peach-deep)); min-width: 3px; transition: width .4s ease; }
.goal-row.done .goal-fill { background: linear-gradient(90deg, #5fd0b0, var(--accent)); }

.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fav { display: flex; gap: 10px; align-items: center; background: var(--gold-soft); border-radius: var(--radius-sm); padding: 8px 10px; }
.fav .cover { width: 42px; height: 60px; }
.fav .cover.placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--peach-deep); background: var(--peach-soft); }
.fav-info { min-width: 0; }
.fav-title { font-size: .85rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fav-meta { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.fav-stars { color: var(--gold); font-size: .8rem; }

/* Skaitytojų tvarkymas */
.child-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.child-add input, .child-add select { padding: 11px 13px; border: 2px solid var(--line); border-radius: var(--radius-sm); font-size: 1rem; background: #fff; font-family: inherit; }
.child-add #child-type { flex: 0 0 auto; }
.child-add #child-name { flex: 1 1 150px; min-width: 0; }
.child-add .age-input { flex: 0 0 92px; width: 92px; }
.child-add .birth-select { flex: 0 0 auto; min-width: 140px; }
.child-add #child-gender { flex: 0 0 auto; }
.child-add .school-input { flex: 1 1 170px; min-width: 0; }
.child-add .class-pick { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.class-pick { display: inline-flex; gap: 4px; align-items: center; }
.class-pick .class-num { min-width: 86px; }
.class-pick .class-let { min-width: 56px; }
.child-add .goal-input { flex: 0 0 90px; width: 90px; }
.child-add .goal-period { flex: 0 0 auto; }

/* S4/B: vizualus atskyrimas be laukų slėpimo – „vardas + tipas + gimimo
   metai/lytis" atrodo kaip būtinieji, o mokykla/klasė/tikslas – aiškiai
   pažymėti kaip nebūtini. Pilno pločio pertrūkis flex-wrap eilutėje. */
.child-add-optional-label {
  flex: 1 0 100%; margin: 4px 0 -2px;
  font-family: var(--font-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* Atsarginė kopija / atkūrimas */
.backup-card { margin-bottom: 28px; }
.restore-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.restore-block h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ink); }
.restore-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.restore-row select { flex: 1 1 220px; min-width: 0; padding: 10px 13px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: .95rem; color: var(--ink); }
.restore-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.restore-row select:disabled { color: var(--muted); background: #faf6ee; }

/* Prisijungimo / registracijos puslapiai */
.auth-body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%); padding: 20px;
  font-family: var(--font-body); color: var(--ink); }
.auth-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 34px 30px; width: 100%; max-width: 420px; }
.auth-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--accent-dark); }
.auth-card h1 { font-family: var(--font-head); font-size: 1.7rem; margin: 10px 0 6px; }
.auth-field { display: block; margin: 14px 0; }
.auth-field span { display: block; font-size: .85rem; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.auth-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); }
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-card .btn.big { width: 100%; margin-top: 8px; }
.auth-alt { text-align: center; margin: 18px 0 0; font-size: .9rem; color: var(--muted); }
.auth-alt a { color: var(--accent-dark); font-weight: 600; }

/* M2 (organinio augimo auditas): klasės kvietimo kontekstas registracijos
   puslapyje – rodomas, kai atėjus per mokytojo nuorodą (?klase=KODAS)
   pavyksta rasti klasę. */
.klase-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--accent-soft); border: 1px solid rgba(17,94,89,.18);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 14px;
  font-size: .9rem; line-height: 1.4; color: var(--ink);
}
.klase-banner.hidden { display: none; }
.klase-banner-ic { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; }
[data-theme="dark"] .klase-banner { background: #1f3a33; border-color: rgba(79,208,191,.28); }

/* Paskyros kortelė */
.account-card { margin-bottom: 28px; }
.account-line { margin: 4px 0 14px; color: var(--ink); }
.role-badge { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 700; color: var(--lav-deep);
  background: var(--lav-soft); border-radius: 999px; padding: 2px 9px; vertical-align: middle; }

/* Administratoriaus šeimų sąrašas */
.admin-card { margin-bottom: 28px; }
.households-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.household-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.hh-name { font-weight: 700; }
.hh-id { color: var(--muted); font-weight: 400; font-size: .8rem; }
.u-nr { color: var(--muted); width: 1%; white-space: nowrap; text-align: right; padding-right: 14px; }
.hh-meta { color: var(--accent-dark); font-size: .85rem; }
.hh-emails { color: var(--muted); font-size: .82rem; flex: 1 1 100%; }

/* Administratoriaus skiltys */
.admin-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-section:first-of-type { margin-top: 6px; padding-top: 0; border-top: none; }
.admin-section h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--ink); }
.check-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; margin: 4px 0; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.btn.small { padding: 8px 14px; font-size: .8rem; }

.invites-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.invite-row.used { opacity: .6; }
.invite-row.revoked { opacity: .55; }
.invite-code { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: 1px;
  background: var(--accent-soft); color: var(--accent-dark); padding: 3px 9px; border-radius: 6px; }
.invite-row.revoked .invite-code { text-decoration: line-through; }
.invite-label { color: var(--muted); font-size: .85rem; flex: 1 1 auto; min-width: 0; }
.invite-status { font-size: .8rem; color: var(--muted); }

/* Mokytojo kodo panaudojimai (kas/kokia mokykla/klasė aktyvavo) */
.tc-usages { flex: 1 0 100%; display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.tc-usage { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .82rem; color: var(--muted); }
.tc-u-name { color: var(--ink); font-weight: 600; }
.tc-u-school::before { content: "· "; }
.tc-u-class::before { content: "klasė: "; }
.tc-u-when { margin-left: auto; }

.household-row { flex-direction: column; align-items: stretch; }
.hh-member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.hh-email { font-size: .9rem; word-break: break-all; }

[data-theme="dark"] .invite-row { background: #322c25; }

/* Mokytojo prieigos eilutė (admin „Sistema" skirtukas): klasių/mokinių
   suvestinė. Tuščios klasės pažymimos --danger, nes tai konkretus veiksmo
   signalas (žr. RINKODARA.md „mokytojo -> tėvų kanalas"), ne bendra statistika. */
.ta-classes-summary { flex: 1 0 100%; }
.ta-no-classes { color: var(--muted); font-style: italic; }
.ta-empty-flag { color: var(--danger); font-weight: 600; }
.ta-cls-empty .tc-u-name { color: var(--danger); }
.ta-cls-members { margin-left: auto; color: var(--muted); }

/* Pradžios nukreipimas (onboarding) */
.onboarding { text-align: center; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 40px 24px; margin: 20px 0; }
.onboarding.hidden { display: none; }
.onboarding-emoji { font-size: 3rem; line-height: 1; }
.onboarding h2 { margin: 12px 0 6px; }
.onboarding p { color: var(--muted); max-width: 440px; margin: 0 auto 18px; }
.onboarding-steps { list-style: none; padding: 0; margin: 0 auto 22px; max-width: 420px;
  text-align: left; display: flex; flex-direction: column; gap: 12px; }
.onboarding-steps li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.ob-num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ===== Viešas landing puslapis + svečio režimas ===== */
/* Svečio (neprisijungusio) navigacija – tik prisijungimas/registracija */
/* flex-wrap – kad keturios nuorodos lūžtų, o ne verstų puslapį slinkti (žr. .header-inner) */
.guest-nav { display: none; gap: 8px; align-items: center; flex-wrap: wrap; }
.guest-nav .navlink { text-decoration: none; }
.navlink-cta { background: #fff; color: var(--accent); }
body.guest .topnav { display: none; }
body.guest .guest-nav { display: flex; }
/* Svečiui rodom tik landing, visa programa paslėpta */
body.guest main > :not(#landing) { display: none !important; }

/* Svečiui kiek platesnis konteineris, kad tilptų 1150px landing'as.
   margin:auto BŪTINA – „app-shell" blokas (žr. faile žemiau) main'ą padaro
   necentruotą (margin:0), todėl be šito landing'as priglustų prie kairio krašto. */
body.guest main { max-width: 1182px; margin: 0 auto; }
/* Header turinį irgi centruojam ties tuo pačiu pločiu (logo/nav sutampa su landing) */
body.guest .header-inner { max-width: 1182px; margin: 0 auto; }
.landing-page { max-width: 1150px; margin: 0 auto; padding: 8px 16px 28px; animation: fade .3s ease; }

/* ---- HERO ---- */
.lp-hero { text-align: center; padding: 10px 8px 0; }
/* Platus landing paveikslėlis (vietoj logo + žodinio pavadinimo).
   NEVADINTI „baneriu": EasyList Lithuania turi taisyklę „/baneris." ir
   „##[class^=baneris]" – reklamų blokuotojai tokį failą/elementą paslepia,
   ir lankytojas pradinio ekrano paveikslėlio nemato. */
.lp-hero-img { display: block; width: 100%; max-width: 820px; height: auto;
  margin: 0 auto 8px; border-radius: var(--radius); }
/* Tik ekrano skaitytuvams matomas pavadinimas (SEO/prieinamumui) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-title { font-family: "Fredoka", var(--font-head); font-size: 2.6rem; line-height: 1.05;
  margin: 14px 0 0; color: var(--accent); text-wrap: balance; }
[data-theme="dark"] .lp-title { color: var(--accent-dark); }
.lp-tagline { color: var(--muted); font-size: 1.12rem; margin: 4px 0 18px; }
.lp-lead { max-width: 560px; margin: 4px auto 16px; font-size: 1.04rem; line-height: 1.5; }

/* CTA – vienas ryškus pirminis mygtukas (neišsitempęs, centruotas) */
.lp-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-cta .btn.big { width: 100%; max-width: 340px; margin-top: 0; }
/* Antrinis veiksmas (demonstracija) – tekstinė nuoroda po mygtuku, ne antras mygtukas */
.lp-demo-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.lp-demo-link:hover { text-decoration: underline; }
[data-theme="dark"] .lp-demo-link { color: var(--accent-dark); }
.lp-note { color: var(--muted); font-size: .88rem; margin-top: 10px; }
.lp-proof { color: var(--accent); font-size: .95rem; font-weight: 600; margin-top: 14px; }

/* ---- KORTELĖS: trys aiškios funkcijos, lygus 3 stulpelių tinklelis ---- */
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 14px; }
.lp-card { background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 16px; text-align: center; }
.lp-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.lp-ic svg { width: 23px; height: 23px; }
.lp-card h3 { margin: 10px 0 4px; font-size: 1rem; }
.lp-card p { color: var(--muted); font-size: .84rem; line-height: 1.45; margin: 0; }

/* Kompaktiška pasitikėjimo eilutė po kortelėmis (privatumas/BDAR) */
.lp-trust { display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: .9rem; margin: 0 0 8px; text-align: center; }
.lp-trust svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
[data-theme="dark"] .lp-trust svg { color: var(--accent-dark); }

/* ---- Wall of Love: admin valdymas ---- */
.wol-admin-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.wol-admin-form textarea, .wol-admin-form input, .wol-admin-form select { width: 100%; }
.wol-admin-form .btn { align-self: flex-start; }
.wol-admin-list { display: flex; flex-direction: column; gap: 8px; }
.wol-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; }
/* Paskelbtos citatos aiškiai atskiriamos – vienu žvilgsniu matyti, kas yra viešai */
.wol-row.wol-on { border-color: var(--accent); background: var(--accent-soft); }
[data-theme="dark"] .wol-row.wol-on { background: transparent; }
.wol-row-main { flex: 1; min-width: 0; }
.wol-row-quote { margin: 0 0 4px; font-size: .9rem; line-height: 1.45; }
.wol-row-meta { margin: 0; color: var(--muted); font-size: .78rem; }
.wol-row-consent { margin: 4px 0 0; color: var(--muted); font-size: .75rem; }
.wol-row-consent.wol-warn { color: var(--danger); }
.wol-row-act { display: flex; flex-direction: column; gap: 6px; flex: none; }
/* Redagavimas vietoje eilutės – laukai per visą eilutės plotį */
.wol-edit-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wol-edit-form textarea, .wol-edit-form input, .wol-edit-form select { width: 100%; }
.wol-edit-act { display: flex; gap: 8px; }
.wol-live-warn { margin: 0; color: var(--accent); }

/* ---- „Wall of Love" – naudotojų citatos (socialinis įrodymas) ----
   Naudoja tuos pačius kintamuosius kaip .lp-card, kad įsilietų į esamą kalbą.
   Kabutės ženklas – dekoratyvus (::before), tad nekeliauja į kopijuojamą tekstą
   ir jo negirdi ekrano skaitytuvas. Tinklelis auto-fit – be JS ir be media
   query prisitaiko nuo 1 iki 3 stulpelių pagal citatų skaičių ir ekraną. */
.wol { margin: 18px 0 6px; }
.wol-title { text-align: center; margin: 0 0 14px; }
.wol-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.wol-card { background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 18px 14px; margin: 0;
  display: flex; flex-direction: column; gap: 10px; position: relative; }
.wol-quote { margin: 0; font-size: .95rem; line-height: 1.55; }
.wol-quote::before { content: "„"; color: var(--accent);
  font-size: 2rem; line-height: 0; vertical-align: -.35em; margin-right: 2px; }
.wol-who { margin-top: auto; color: var(--muted); font-size: .82rem; font-style: normal; }
.wol-who::before { content: "— "; }

/* ---- „Kaip veikia?" – glaudžiai po kortelėmis ---- */
.lp-steps { text-align: center; margin: 6px 0 0; }
.lp-steps h2 { margin-bottom: 12px; }
.lp-steps-list { max-width: 460px; }

/* Kompaktiška juosta – mokykloms/mokytojams (landing), be atskiros didelės kortelės */
.lp-school-band { display: flex; align-items: center; gap: 14px; justify-content: center;
  max-width: 640px; margin: 32px auto 0; padding: 14px 20px; background: var(--accent-soft);
  border-radius: 14px; }
.lp-school-ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; background: var(--card); color: var(--accent); }
.lp-school-ic svg { width: 19px; height: 19px; }
.lp-school-band p { margin: 0; font-size: .9rem; color: var(--ink); }
.lp-school-band a { color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .lp-school-band { flex-direction: column; text-align: center; } }

.lp-foot { text-align: center; color: var(--muted); margin-top: 24px; font-size: .9rem; }
.lp-foot a { color: var(--muted); }

/* Landing footeris (brand + nuorodos + Facebook su ikona) */
.lp-foot2 { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 32px; padding: 22px 4px 6px; }
.lp-foot2-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head);
  font-weight: 700; font-size: 1.1rem; color: var(--accent); }
[data-theme="dark"] .lp-foot2-brand { color: var(--accent-dark); }
.lp-foot2-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.lp-foot2-logo svg { width: 19px; height: 19px; }
.lp-foot2-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.lp-foot2-nav a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
  text-decoration: none; font-size: .9rem; padding: 7px 11px; border-radius: 8px; }
.lp-foot2-nav a:hover { background: var(--accent-soft); color: var(--accent); }
/* Facebook – matomas „follow" mygtukas (atpažįstama FB spalva + ikona), be jokio
   sekimo (paprasta nuoroda). Grįžtamajam ryšiui / bendruomenei auginti. */
/* Firminis „Facebook" mėlynas (#1877F2) su baltu tekstu duoda 4,23:1 – šiek
   tiek per mažai smulkiam tekstui. Imam pačių Facebook tamsesnį atspalvį (tą
   patį, kuris čia jau buvo naudojamas užvedimui): atpažįstamumas išlieka,
   kontrastas 5,56:1. */
.lp-foot2-nav a.lp-foot2-fb { background: #0F63D6; color: #fff; font-weight: 600; border-radius: 999px; padding: 8px 15px; }
.lp-foot2-nav a.lp-foot2-fb:hover { background: #0B51B0; color: #fff; }
.lp-foot2-fb svg { width: 16px; height: 16px; }

/* Globalus (app) footeris – tas pats stilius, bet apribotas plotis kaip main */
.site-foot { max-width: 1140px; margin: 0 auto; padding: 18px 16px 30px; }

/* Facebook „follow" mygtukas (Nustatymų Bendruomenės kortelė) */
.fb-follow-btn { display: inline-flex; align-items: center; gap: 8px; background: #1877F2; color: #fff;
  font-weight: 600; text-decoration: none; padding: 10px 18px; border-radius: 10px; }
.fb-follow-btn:hover { background: #0F63D6; color: #fff; }
.fb-follow-btn svg { width: 18px; height: 18px; }

/* Landing rodomas svečiui -> paslepiam globalų svetainės footerį (kad nesidubliuotų
   nuorodos). Programėlėje (kai #landing paslėptas) globalus footeris lieka. */
body:has(#landing:not(.hidden)) > footer { display: none; }

/* ---- Dažni klausimai (FAQ) ---- */
.lp-faq { max-width: 640px; margin: 34px auto 0; }
.lp-faq > h2 { text-align: center; margin-bottom: 14px; }
.lp-faq-item { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2px 16px; margin-bottom: 10px; }
.lp-faq-item > summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-faq-item > summary::-webkit-details-marker { display: none; }
.lp-faq-item > summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.lp-faq-item[open] > summary::after { content: "\2212"; }
.lp-faq-item > p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0 0 12px; }

/* Planšetė/telefonas: kortelės į 1 stulpelį (sklandžiai sukrautos) */
@media (max-width: 760px) {
  .lp-features { grid-template-columns: 1fr; gap: 12px; margin: 20px 0 12px; }
}

/* Laikotarpio suvestinė statistikos viršuje */
.period-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--accent-soft); border-radius: 999px; padding: 8px 16px; margin-bottom: 18px;
  font-size: 1.02rem; }
.period-emoji { font-size: 1.2rem; }
.period-summary select { border: none; background: transparent; font-family: var(--font-head);
  font-weight: 600; font-size: 1.02rem; color: var(--accent-dark); cursor: pointer; }
.period-summary select:focus { outline: none; }
.period-text b { font-size: 1.15rem; color: var(--accent-dark); }

/* Skaitytojo profilis */
.reader-profile { margin: 8px 0 16px; }
.reader-profile.hidden { display: none; }
.rp-head { display: flex; align-items: center; gap: 14px; }
.rp-avatar { font-size: 2.4rem; line-height: 1; flex: 0 0 auto; }
.rp-main { flex: 1; min-width: 0; }
.rp-name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.rp-sub { color: var(--muted); font-size: .9rem; }
.rp-stats { display: flex; flex-direction: column; gap: 2px; text-align: right; font-size: .85rem; color: var(--muted); }
.rp-stats b { color: var(--ink); font-size: 1rem; }
.reader-profile .goal-row { margin-top: 14px; grid-template-columns: 1fr; gap: 4px; }
.reader-profile .goal-label { font-size: .9rem; }

/* „Skaitoma dabar" */
.now-reading { margin: 6px 0 14px; }
.now-reading.hidden { display: none; }

/* Tėvo progreso vaizdas: šios savaitės santrauka */
.week-progress { margin: 6px 0 16px; padding: 14px 16px; background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: var(--radius); }
.week-progress.hidden { display: none; }
.wp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wp-title { font-weight: 700; font-size: 1.05rem; color: var(--accent); }
.wp-trend { font-size: .85rem; }
.wp-up { color: var(--accent); font-weight: 600; }
.wp-eq, .wp-soft { color: var(--muted); }
.wp-lead { margin-top: 6px; font-size: .98rem; }
.wp-month { color: var(--muted); margin-left: 6px; }
.wp-children { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wp-chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: .9rem; }
.now-reading h3 { margin: 0 0 10px; font-size: 1.1rem; }
.now-reading-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.nr-card { flex: 0 0 220px; display: flex; gap: 10px; align-items: center; padding: 10px;
  background: var(--peach-soft); border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
  transition: transform .12s, box-shadow .12s; }
.nr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.nr-card .cover { width: 44px; height: 64px; flex: 0 0 auto; }
.nr-card .cover.placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  color: var(--peach-deep); background: #fff3; border-radius: 6px; }
.nr-body { min-width: 0; flex: 1; }
.nr-title { font-weight: 700; font-size: .9rem; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nr-who { color: var(--muted); font-size: .8rem; margin: 0 0 6px; }

/* Paskyros laukai (šeimos pavadinimas, slaptažodis) */
.account-field { margin: 6px 0 14px; }
.account-field .field-cap { display: block; margin-bottom: 6px; font-size: .85rem; color: var(--muted); font-weight: 600; }
.inline-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-row input { flex: 1 1 200px; min-width: 0; padding: 10px 13px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); }
.inline-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pw-show-row { font-weight: 400; font-size: .9rem; color: var(--muted); }

/* Išskleidžiami paskyros veiksmai (kompaktiški) */
.acc-collapse { margin: 6px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.acc-collapse summary { cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--accent-dark);
  padding: 4px 0; list-style: none; }
.acc-collapse summary::-webkit-details-marker { display: none; }
.acc-collapse summary::before { content: "▸ "; color: var(--accent); }
.acc-collapse[open] summary::before { content: "▾ "; }
.acc-collapse .inline-col { max-width: 340px; margin-top: 10px; }

/* Pavojinga zona (paskyros trynimas) – atskira kortelė apačioje */
.danger-card { margin-bottom: 28px; border: 1px solid var(--danger-soft); }
.danger-collapse summary { cursor: pointer; font-family: var(--font-head); font-weight: 600;
  font-size: 1.1rem; color: var(--danger); list-style: none; }
.danger-collapse summary::-webkit-details-marker { display: none; }
.danger-collapse summary::before { content: "▸ "; }
.danger-collapse[open] summary::before { content: "▾ "; }
.danger-collapse .inline-col { max-width: 360px; margin-top: 10px; }
.danger-collapse .inline-col.hidden { display: none; }
.hh-actions { margin-top: 8px; }

/* „Rodyti slaptažodį" prisijungimo languose */
.auth-show { display: flex; align-items: center; gap: 7px; margin: 2px 0 8px;
  font-size: .85rem; color: var(--muted); cursor: pointer; }
.auth-show input { width: 16px; height: 16px; accent-color: var(--accent); }
.auth-consent { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 10px;
  font-size: .82rem; color: var(--muted); cursor: pointer; line-height: 1.45; }
.auth-consent input { width: 16px; height: 16px; min-width: 16px; margin-top: 2px;
  accent-color: var(--accent); }
.auth-consent a { color: var(--accent-dark); }
.auth-legal { font-size: .78rem; opacity: .8; }
.inline-col { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 360px; }
.inline-col input { padding: 10px 13px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); }
.inline-col input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Šeimos pavadinimas antraštėje */
.brand-fam { font-family: var(--font-body); font-weight: 600; font-size: .95rem; opacity: .92; }

/* Temos perjungiklis */
.theme-toggle { background: rgba(255,255,255,.18); border: none; color: #fff; font-size: 1rem;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer; line-height: 1; transition: background .15s; }
.theme-toggle:hover { background: rgba(255,255,255,.30); }

/* Greitas „Perskaityta" mygtukas kortelėje */
.quick-read { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent); font-family: inherit;
  font-weight: 700; font-size: .74rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .15s; white-space: nowrap; }
.quick-read:hover { background: var(--accent); color: #fff; }

/* ===== Tamsi tema (dark mode) ===== */
[data-theme="dark"] {
  --bg: #15201D; --bg2: #18231F; --card: #1E2926; --ink: #ECEAE2; --muted: #9AA39C; --line: #2E3A35;
  --accent: #2BA89A; --accent-dark: #4FD0BF; --accent-soft: #16322C;
  /* Tamsioje temoje persikinio skaidyti nereikia: šviesus #FDBA74 ant tamsaus
     rudo duoda 8,15:1, tad ir smulkiam tekstui, ir skaičiams tinka tas pats. */
  --peach: #FB923C; --peach-deep: #FDBA74; --peach-num: #FDBA74;
  --peach-soft: #3A2A1C; --lav-soft: #272340;
  --gold: #FBBF24; --gold-deep: #FCD34D; --gold-soft: #3A2F12;
  --shadow: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
  /* Šviesesnis raudonas – originalus #d9594a klaidos tekstui tamsiame fone
     duoda tik ~4:1 (žemiau WCAG AA 4.5:1); šis pasiekia ~7,4:1. */
  --danger: #ff9b8a;
  /* --danger-soft anksčiau tamsiai temai NEBUVO perrašytas ir likdavo šviesiai
     rožinis (#fde7e3) – vienintelis iš *-soft šeimos, kuris buvo pamirštas.
     Todėl tamsiame režime „Ištrinti" mygtukas ir pasibaigusios prieigos juosta
     buvo beveik nematomi: --ink ant jo davė 1,02:1, --danger 1,72:1. Dabar
     12,52 / 7,40. Rado automatinis kontrasto testas (run_tests.py test_contrast). */
  --danger-soft: #3A1F1C;
}
/* Užvedimo spalva buvo įrašyta tiesiogiai (šviesiai rožinė) – tamsioje temoje
   mygtukas užvedus vėl nušvisdavo. */
[data-theme="dark"] .btn.ghost-danger:hover { background: #4A2925; }
[data-theme="dark"] body { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea,
[data-theme="dark"] .res-item, [data-theme="dark"] .household-row,
[data-theme="dark"] .list-search, [data-theme="dark"] .list-tools select,
[data-theme="dark"] .restore-row select, [data-theme="dark"] .isbn-row input,
[data-theme="dark"] .avatar-opt, [data-theme="dark"] .manual-fields input {
  background: #322c25; color: var(--ink); }
[data-theme="dark"] .btn { background: #3a342c; color: var(--ink); }
[data-theme="dark"] .btn:hover { background: #463f35; }
[data-theme="dark"] .btn.primary { color: #10221d; }
/* Ta pati taisyklė kaip mygtukui: tamsioje temoje --accent yra šviesesnis
   žalsvas, ant kurio baltas tekstas duoda tik 2,93:1. Onboarding'o žingsnių
   skrituliukai buvo praleisti, nes jie ne mygtukai. */
[data-theme="dark"] .ob-num { color: #10221d; }
[data-theme="dark"] .reading,
[data-theme="dark"] .card { border-color: #38312a; }
[data-theme="dark"] .danger-card { border-color: rgba(217,89,74,.4); }
[data-theme="dark"] .bar-track, [data-theme="dark"] .goal-track { background: #3b342b; }
[data-theme="dark"] .navlink.active { color: var(--accent-dark); }
[data-theme="dark"] .nr-card { background: #322620; }
[data-theme="dark"] .nr-card .cover.placeholder { background: #0003; }
.child-add input:focus, .child-add select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.children-list { list-style: none; padding: 0; margin: 0; }
.children-list li { display: flex; justify-content: space-between; align-items: center; gap: 11px; padding: 11px 10px; border-bottom: 1px solid var(--line); }
.children-list li:last-child { border-bottom: none; }
.child-row { cursor: pointer; border-radius: var(--radius-sm); transition: background .15s; }
.child-row:hover { background: var(--lav-soft); }
.child-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.child-name { font-weight: 600; }
.child-sub { color: var(--muted); font-size: .82rem; }
.child-school { color: var(--accent-dark); }

/* Avatarų pasirinkimas */
.avatar-row { margin: 4px 0 16px; }
.avatar-row .field-cap { display: block; margin-bottom: 7px; font-size: .85rem; color: var(--muted); font-weight: 600; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.avatar-opt {
  font-size: 1.3rem; width: 44px; height: 44px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid var(--line); background: #fff; cursor: pointer;
  transition: transform .1s, border-color .12s, background .12s;
}
.avatar-opt:hover { transform: scale(1.12); border-color: var(--lav); }
.avatar-opt.sel { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.06); }
.child-avatar { font-size: 1.3rem; line-height: 1; }
.child-go { color: var(--lav-deep); font-size: 1rem; padding-left: 10px; }

footer { text-align: center; color: var(--muted); font-size: .82rem; padding: 8px 16px 28px; }
footer a { color: var(--accent); }

/* Modaliniai langai (bendra) */
.modal {
  position: fixed; inset: 0; background: rgba(60,40,25,.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
  animation: fade .15s ease;
}
.modal-box {
  background: var(--card); border-radius: var(--radius); width: 100%; max-width: 540px;
  box-shadow: var(--shadow-lg); padding: 24px; max-height: 92vh;
  overflow-y: auto; overflow-x: hidden;
  border-top: 6px solid var(--accent);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-head h3 { margin: 0; font-size: 1.35rem; }
.modal-x { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 6px; border-radius: 6px; }
.modal-x:hover { background: var(--bg2); color: var(--ink); }
.edit-book { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.edit-book .cover { width: 56px; height: 80px; }
.edit-titlefields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.edit-titlefields input {
  padding: 9px 12px; font-size: 1rem; border: 2px solid var(--line);
  border-radius: var(--radius-sm); font-family: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.edit-titlefields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modal-actions .primary { flex: 1; }
/* Dalinimosi mygtukas redagavimo lange – atskira, pilno pločio, matoma eilutė */
#edit-share { flex: 1 1 100%; }

/* Dalinimasis pasiekimu – subtilus kvietimas (snackbar) */
.share-prompt {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(24px);
  display: flex; align-items: center; gap: 10px; z-index: 210;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-left: 5px solid var(--accent); padding: 10px 12px 10px 16px;
  border-radius: 14px; box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .25s, transform .25s; max-width: 92vw;
}
.share-prompt.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.share-prompt .sp-msg { font-size: .92rem; font-weight: 600; }
.share-prompt .sp-share {
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  font-family: inherit; white-space: nowrap;
}
.share-prompt .sp-share:hover { filter: brightness(1.06); }
.share-prompt .sp-share:focus-visible,
.share-prompt .sp-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-prompt .sp-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.share-prompt .sp-x:hover { background: var(--bg2); color: var(--ink); }

/* Dalinimosi kortelės langas */
.share-format {
  display: flex; gap: 6px; justify-content: center; margin: 0 0 14px;
  background: var(--bg2); padding: 4px; border-radius: 999px;
}
.share-format .sf-btn {
  flex: 1; max-width: 160px; border: none; background: none; cursor: pointer;
  padding: 8px 12px; border-radius: 999px; font-family: inherit; font-size: .88rem;
  font-weight: 600; color: var(--muted);
}
.share-format .sf-btn.active { background: var(--card); color: var(--accent); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12)); }
.share-format .sf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-card-preview { display: flex; justify-content: center; margin: 4px 0 6px; min-height: 120px; align-items: center; }
.share-card-canvas {
  width: 100%; max-width: 320px; height: auto; border-radius: 16px;
  box-shadow: var(--shadow); display: block;
}
.share-card-canvas.share-story { max-width: 200px; }  /* 9:16 – aukšta, ribojam aukštį per plotį */
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.share-actions .btn { flex: 1 1 140px; justify-content: center; }

/* Skeneris */
.scanner .scanner-box {
  background: #111; border-radius: var(--radius); overflow: hidden;
  width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); border-top: none;
}
.scanner-head {
  display: flex; justify-content: space-between; align-items: center;
  color: #fff; padding: 13px 15px; font-size: .95rem; background: #1c1c1c;
}
.scanner-head .modal-x { color: #fff; }
.video-wrap { position: relative; background: #000; aspect-ratio: 4 / 3; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame {
  position: absolute; left: 8%; right: 8%; top: 32%; bottom: 32%;
  border: 3px solid rgba(245,166,35,.9); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.25);
}
.scan-status { color: #eee; text-align: center; padding: 13px; font-size: .9rem; min-height: 1.2em; }
.scan-status.error { color: #ff9b8a; }
.scan-status a { color: var(--gold); word-break: break-all; }

/* Pranešimo burbuliukas (toast) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: .9rem; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 200; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .fields { grid-template-columns: 1fr; }
  .manual-fields { grid-template-columns: 1fr; }
  .header-inner { flex-wrap: wrap; min-height: 0; gap: 4px; padding: 8px 0; }
  .brand { font-size: 1.12rem; }
  /* Svečio juosta turi laužytis lygiai kaip .topnav. Be `flex: 1 0 100%` ji
     likdavo viena nesilaužianti ~407 px eilutė 375 px ekrane – dėl to visas
     landingas (pagrindinis įėjimo puslapis!) slinkdavo horizontaliai.
     `flex-wrap` būtinas: nuorodų keturios, į vieną eilutę jos netelpa. */
  .topnav, .guest-nav { flex: 1 0 100%; justify-content: flex-start; gap: 5px; }
  .guest-nav { flex-wrap: wrap; }
  .navlink { padding: 6px 11px; font-size: .8rem; }
  .readings { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .stat-tiles { flex-wrap: wrap; }
  .stat-tile { flex: 1 1 calc(50% - 6px); }
}

/* El. pašto patvirtinimo priminimas (juosta po antrašte) */
.verify-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--gold-soft); border: 1px solid var(--gold);
  color: var(--ink); border-radius: var(--radius-sm);
  padding: 11px 16px; margin: 0 0 18px; font-size: .92rem;
}
.verify-banner .vb-text { flex: 1 1 auto; }
.verify-banner .btn { flex: 0 0 auto; }
[data-theme="dark"] .verify-banner { background: #3a3320; border-color: var(--gold-deep); }

/* Įspėjamoji pastaba (pvz. atkūrimas paliečia visus duomenis) */
.warn-hint {
  background: var(--danger-soft); border-left: 3px solid var(--danger);
  border-radius: 8px; padding: 8px 12px; color: var(--ink);
}
[data-theme="dark"] .warn-hint { background: #3a2622; }

/* ===== Žanro ženkliukas ===== */
.r-genre { color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px;
  padding: 1px 8px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.bar-fill.alt3 { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }

/* ===== Skaitymo serija (streak) ===== */
.streak { font-size: .78rem; font-weight: 700; color: #e8590c; background: #ffe8d6;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
[data-theme="dark"] .streak { background: #3a2a1c; color: #ffab76; }

/* ===== Rodinio jungiklis (Sąrašas / Lentyna) ===== */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; margin-left: auto; }
.vt-btn { border: none; background: #fff; padding: 7px 13px; cursor: pointer; font-size: 1rem;
  color: var(--ink); }
.vt-btn + .vt-btn { border-left: 1px solid var(--line); }
.vt-btn.active { background: var(--accent); color: #fff; }
[data-theme="dark"] .vt-btn { background: #2a2722; color: var(--ink); }
[data-theme="dark"] .vt-btn.active { background: var(--accent); color: #fff; }

/* ===== Knygų lentynos (vizualus) rodinys ===== */
.readings.shelf-mode { display: block; }
.shelf-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 26px 16px;
  padding: 8px 6px 12px; }
.shelf-book { position: relative; width: 96px; cursor: pointer; transition: transform .15s ease; }
.shelf-book:hover { transform: translateY(-4px); }
.shelf-cover { width: 96px; height: 142px; object-fit: cover; border-radius: 3px 6px 6px 3px;
  box-shadow: 2px 4px 10px rgba(60,40,15,.28); display: block; background: var(--accent-soft); }
.shelf-spine { display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--spine, var(--accent)); color: #fff; padding: 6px; border-radius: 3px 6px 6px 3px; }
.shelf-spine span { font-size: .72rem; font-weight: 600; line-height: 1.2; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
/* knygų lentynos „lentyna" – medinė juostelė po kiekviena knyga */
.shelf-book::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -10px;
  height: 7px; border-radius: 2px; background: linear-gradient(#c9a36b, #a07c4a);
  box-shadow: 0 3px 6px rgba(60,40,15,.25); }
[data-theme="dark"] .shelf-book::after { background: linear-gradient(#6b563a, #4a3a26); }
.shelf-stars { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: .7rem; color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.shelf-who { position: absolute; top: -8px; right: -6px; font-size: 1rem;
  background: #fff; border-radius: 999px; padding: 0 2px; box-shadow: var(--shadow); }
.shelf-book.status-skaito .shelf-cover { outline: 2px solid var(--peach); }
.shelf-book.status-nori .shelf-cover { opacity: .7; }

/* ===== Skaitytojo profilio veiksmai (spausdinimas) ===== */
.rp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ===== Šventimas (konfeti) ===== */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti span { position: absolute; top: -6vh; animation-name: confetti-fall;
  animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(112vh) rotate(420deg); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* „Cheer" – greitas žvaigždučių pliūpsnis iš ekrano centro (pažymėjus perskaityta) */
.cheer { position: fixed; left: 50%; top: 42%; pointer-events: none; z-index: 300; }
.cheer span { position: absolute; font-size: 1.6rem; animation: cheer-pop 1.2s ease-out forwards; }
@keyframes cheer-pop {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cheer { display: none; } }

/* ===== Spausdinimas: diplomas ir sąrašas mokyklai ===== */
.print-area { display: none; }
@media print {
  body > header, body > main, body > footer, .modal, .scanner, .toast, .confetti,
  .verify-banner, .to-top { display: none !important; }
  .print-area { display: block !important; }
  @page { margin: 1.4cm; }
}
.diploma-card { max-width: 19cm; margin: 0 auto; padding: 10px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.diploma-inner { position: relative; text-align: center; color: #463d34;
  font-family: var(--font-head);
  background:
    radial-gradient(circle at 50% -8%, #fff8e6, transparent 55%),
    linear-gradient(160deg, #fffdf8, #fbf2de);
  border: 3px solid #c9881a; border-radius: 14px;
  box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 9px #e9c46a;
  padding: 1.5cm 1.4cm 1.8cm; overflow: hidden; }
.diploma-ribbon { display: inline-block; margin: 0 auto .3em; padding: 9px 36px;
  background: linear-gradient(180deg, #f6c64b, #c9881a); color: #5a3e0a;
  font-size: 1.7rem; font-weight: 700; border-radius: 6px;
  box-shadow: 0 4px 10px rgba(160,110,20,.3); }
.diploma-stars { color: #d99a18; letter-spacing: .4em; font-size: 1.1rem; margin: .5em 0 .15em; }
.diploma-sub { font-family: var(--font-body); font-size: .95rem; color: #8a7a5a; margin: .25em 0 .05em; }
.diploma-avatar { font-size: 3.2rem; line-height: 1; margin: .05em 0; }
.diploma-name { font-size: 2.1rem; font-weight: 700; margin: .05em 0 .15em; color: var(--accent-dark);
  text-decoration: underline; text-decoration-color: #e9c46a; text-underline-offset: 6px; }
.diploma-for { font-family: var(--font-body); font-size: 1rem; color: #6a5f50; margin: .45em 0 .1em; }
.diploma-count { display: flex; align-items: center; justify-content: center; gap: 14px; margin: .1em 0 .3em; }
.dc-num { font-size: 3.4rem; font-weight: 800; color: var(--peach-num); line-height: 1; }
.dc-word { font-family: var(--font-body); font-size: 1.05rem; text-align: left; color: #463d34; }
.diploma-list { text-align: left; max-width: 13cm; margin: .7em auto 0;
  font-family: var(--font-body); font-size: .88rem; color: #5a5145; }
.diploma-list p { margin: 0 0 .2em; font-weight: 600; }
.diploma-list ul { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 1.5em; }
.diploma-seal { position: absolute; right: 1cm; bottom: 1.3cm; width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  background: radial-gradient(circle, #fff3cf, #f0b429); border: 3px solid #c9881a;
  border-radius: 50%; box-shadow: 0 3px 8px rgba(160,110,20,.35); }
.diploma-foot { margin-top: 1.3em; font-family: var(--font-body); color: #8a7a5a; font-size: .82rem; }
.sl-wrap { font-family: var(--font-body); color: #222; max-width: 19cm; margin: 0 auto; }
.sl-wrap h1 { font-family: var(--font-head); font-size: 1.8rem; margin: 0 0 .2em; }
.sl-head { font-size: 1.05rem; margin: .2em 0; }
.sl-sub { color: #555; margin: .2em 0 .6em; }
.sl-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sl-table th, .sl-table td { border: 1px solid #bbb; padding: 5px 8px; text-align: left;
  vertical-align: top; }
.sl-table th { background: #f0ece2; }

/* ===== Grąžinimo terminas kortelėje ===== */
.r-due { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.r-due.soon { color: var(--peach-deep); font-weight: 700; }
.r-due.overdue { color: var(--danger); font-weight: 700; }

/* ===== Grąžinimo priminimų sekcija ===== */
.due-reminders { margin-bottom: 22px; background: var(--peach-soft); border: 1px solid var(--peach);
  border-radius: var(--radius-sm); padding: 14px 16px; }
[data-theme="dark"] .due-reminders { background: #3a2a1f; border-color: var(--peach-deep); }
.due-reminders h3 { margin: 0 0 10px; font-size: 1rem; }
.due-list { display: flex; flex-direction: column; gap: 8px; }
.due-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border-radius: 10px; padding: 8px 12px; }
.due-item.overdue { outline: 2px solid var(--danger); }
.due-item.soon { outline: 2px solid var(--peach); }
.due-when { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 132px; }
.due-item.overdue .due-when em, .due-item.soon .due-when em { font-style: normal; font-weight: 700; }
.due-item.overdue .due-when em { color: var(--danger); }
.due-item.soon .due-when em { color: var(--peach-deep); }
.due-title { font-weight: 600; flex: 1 1 auto; }
.due-who { font-size: .85rem; color: var(--muted); }
.due-returned { flex: 0 0 auto; }

/* ===== „Ar spėji?" tempo eilutė ===== */
.pace { font-size: .8rem; font-weight: 600; margin-top: 5px; border-radius: 8px;
  padding: 3px 10px; display: inline-block; }
.pace-ahead { background: var(--accent-soft); color: var(--accent-dark); }
.pace-ok { background: var(--gold-soft); color: var(--gold-deep); }
.pace-behind { background: var(--peach-soft); color: var(--peach-deep); }
[data-theme="dark"] .pace-ahead { background: #1f3a33; }
[data-theme="dark"] .pace-ok { background: #3a3320; }
[data-theme="dark"] .pace-behind { background: #3a2a1f; }

/* ===== Skaitytojo lygis + ženkliukai (profilyje) ===== */
.rp-level { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; flex-wrap: wrap; }
.lvl-badge { font-weight: 700; color: var(--lav-deep); background: var(--lav-soft);
  border-radius: 999px; padding: 2px 11px; white-space: nowrap; }
[data-theme="dark"] .lvl-badge { background: #2e2640; color: #c9b6f5; }
.lvl-track { flex: 1 1 120px; min-width: 100px; height: 9px; background: var(--line);
  border-radius: 999px; overflow: hidden; }
.lvl-fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--lav), var(--lav-deep)); transition: width .4s ease; }
.lvl-next { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.rp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.rp-badge { font-size: .78rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-dark);
  border-radius: 999px; padding: 2px 10px; }
[data-theme="dark"] .rp-badge { background: #1f3a33; color: #8fe0c9; }

/* ===== Skaitytojo spalva ===== */
.color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.color-opt { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform .1s; }
.color-opt:hover { transform: scale(1.12); }
.color-opt.sel { box-shadow: 0 0 0 3px var(--ink); }
[data-theme="dark"] .color-opt { border-color: #2a2722; }

/* ===== Žanrų filtras / skaitymo trukmė ===== */
.r-dur { color: var(--muted); }

/* ===== Įžvalgos (statistikoje) ===== */
.insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ins { display: flex; align-items: center; gap: 12px; background: var(--bg2);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: transform .12s, box-shadow .12s; }
.ins:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
[data-theme="dark"] .ins { background: #2a2722; }
.ins-ico { font-size: 1.6rem; flex-shrink: 0; }
.ins-lbl { font-size: .78rem; color: var(--muted); }
.ins-val { font-weight: 700; font-size: .98rem; }
.ins-val span { color: var(--muted); font-weight: 600; font-size: .85rem; }

/* ===== Rodymas: šrifto dydžio jungiklis ===== */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg-btn { border: none; background: #fff; padding: 8px 16px; cursor: pointer;
  font-family: inherit; color: var(--ink); font-weight: 600; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--accent); color: #fff; }
[data-theme="dark"] .seg-btn { background: #2a2722; }
[data-theme="dark"] .seg-btn.active { background: var(--accent); color: #fff; }

/* Lengvai skaitomas šriftas (Atkinson Hyperlegible) */
body.reading-font, body.reading-font h1, body.reading-font h2, body.reading-font h3 {
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
}
body.reading-font { letter-spacing: .012em; line-height: 1.55; }

/* ===== „Į viršų" mygtukas ===== */
.to-top { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%;
  border: none; background: var(--accent); color: #fff; font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--shadow-lg); z-index: 150; transition: background .15s, transform .15s; }
.to-top:hover { background: var(--accent-dark); transform: translateY(-2px); }

/* ===== Smulkūs pagražinimai ===== */
#empty-msg.empty { font-size: 1.02rem; padding: 36px 16px; }
.stat-tile { transition: transform .12s; }
.stat-tile:hover { transform: translateY(-2px); }

/* ===== Statistikos kompaktiškumas (mažiau „bloat") ===== */
.insights-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ins { padding: 9px 12px; gap: 10px; }
.ins-ico { font-size: 1.35rem; }
.ins-lbl { font-size: .73rem; }
.ins-val { font-size: .9rem; }
.ins-val span { font-size: .8rem; }
.period-text b { font-size: 1.05rem; }
.fav-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
@media (max-width: 700px) {
  .stat-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ===== Skaitytojų avatarų eilutė (filtras) ===== */
.rf-pill { display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 4px 13px 4px 4px; cursor: pointer; font-family: inherit; font-size: .88rem;
  font-weight: 600; color: var(--ink); transition: border-color .15s, background .15s, transform .05s; }
.rf-pill:hover { border-color: var(--lav); }
.rf-pill:active { transform: translateY(1px); }
.rf-pill.active { border-color: var(--accent); background: var(--accent-soft); }
.rf-ava { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--accent-soft); }
.rf-nm { white-space: nowrap; }
.rf-ct { font-size: .74rem; color: var(--muted); font-weight: 700; }
[data-theme="dark"] .rf-pill { background: #2a2722; }
[data-theme="dark"] .rf-pill.active { background: #1f3a33; border-color: var(--accent); }

/* ===== Būsenos segmentuotas perjungiklis ===== */
.status-bar { margin: 10px 0 12px; }
.segmented { display: inline-flex; flex-wrap: wrap; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg-item { border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: .85rem; font-weight: 600; color: var(--muted); padding: 9px 14px;
  border-radius: 9px; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s; }
.seg-item:hover { color: var(--ink); }
.seg-item.active { background: #fff; color: var(--accent-dark); box-shadow: var(--shadow); }
.seg-item.active.s-skaito { color: var(--peach-deep); }
.seg-item.active.s-nori { color: var(--lav-deep); }
.seg-count { font-size: .72rem; opacity: .85; font-weight: 700; }
.seg-item.active .seg-count { opacity: 1; }
[data-theme="dark"] .segmented { background: #2a2722; border-color: #38312a; }
[data-theme="dark"] .seg-item.active { background: #3a352d; color: #8fe0c9; }

/* ===== Šeimos nariai (nustatymuose) ===== */
.members-list { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 10px; }
.member-row { font-size: .92rem; }
.member-you { color: var(--muted); font-size: .82rem; }
.member-invite { margin-top: 10px; font-size: .88rem; color: var(--ink);
  background: var(--accent-soft); border-radius: var(--radius-sm); padding: 12px 14px; line-height: 1.55; }
[data-theme="dark"] .member-invite { background: #1f3a33; }

/* Pakvietimo valdikliai: el. paštas + mygtukas, nuorodos eilutė */
.invite-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.invite-email { flex: 1 1 220px; min-width: 0; padding: 8px 11px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.invite-hint { margin: 6px 0 0; }
.invite-sent { margin: 0 0 10px; font-weight: 600; }
.invite-sent.ok { color: var(--accent); }
.invite-sent.warn { color: #9a6b00; }
[data-theme="dark"] .invite-sent.warn { color: #e0b252; }
.invite-linkrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.invite-link-input { flex: 1 1 240px; min-width: 0; padding: 8px 11px; font: .85rem ui-monospace, monospace;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.invite-help { margin: 8px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* Honeypot – paslepta nuo žmonių (ne display:none, kad botai vis tiek pildytų) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ===== Vaiko režimas ===== */
.kid-box { max-width: 460px; }
.kid-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; justify-content: center; }
.kid-card { display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px solid var(--line); background: var(--card); border-radius: 16px;
  padding: 14px 18px; cursor: pointer; font-family: inherit; min-width: 104px;
  transition: transform .12s, border-color .15s, box-shadow .15s; position: relative; }
.kid-card:hover { transform: translateY(-3px); border-color: var(--kid-col, var(--accent));
  box-shadow: var(--shadow); }
.kid-ava { font-size: 2.4rem; line-height: 1; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--kid-col, var(--accent)) 18%, #fff); }
[data-theme="dark"] .kid-ava { background: color-mix(in srgb, var(--kid-col, var(--accent)) 28%, #1f1d1a); }
.kid-name { font-weight: 700; font-size: .95rem; color: var(--ink); }
.kid-lock { position: absolute; top: 7px; right: 9px; font-size: .8rem; }
.kid-pin-row { text-align: center; margin-top: 6px; }
.kid-pin-name { font-weight: 600; margin: 4px 0 8px; }
#kid-pin { max-width: 130px; text-align: center; font-size: 1.2rem; letter-spacing: .3em;
  padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm); }
.navlink.kid-exit { background: var(--gold-soft); color: #7a5a10; }
.navlink.kid-exit:hover { background: #ffe9b3; }

/* Vaiko režime paslepiame, kas vaikui nereikalinga/negalima */
body.kid-mode .navlink[data-nav="settings"],
body.kid-mode .navlink[data-nav="logout"],
body.kid-mode #kid-btn,
/* Visas „Skaitytojai" blokas (ne tik filtras): vaikas mato tik savo lentyną,
   tad ir antraštė su „Pridėti skaitytoją" jam bereikalinga ir neveiktų. */
body.kid-mode #side-readers,
body.kid-mode #edit-delete,
body.kid-mode .verify-banner,
body.kid-mode #onboarding { display: none !important; }

/* ===== Skaitymo apžvalga (Wrapped) ===== */
.wrapped-btn { margin-left: auto; }
.wrapped-box { max-width: 470px; }
.wrapped-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.wrapped-controls select { flex: 1; padding: 8px 12px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); font-family: inherit; background: #fff; color: var(--ink); }
[data-theme="dark"] .wrapped-controls select { background: #2a2722; }
.wrapped-card { border-radius: 18px; padding: 26px 22px; text-align: center; color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-dark)); min-height: 200px; }
.wrapped-card.wc-vasara { background: linear-gradient(160deg, #ffb35c, #ec7541); }
.wrapped-card.wc-mokslo_metai { background: linear-gradient(160deg, #a98fe6, #7c5ed4); }
.wrapped-card.wc-metai { background: linear-gradient(160deg, #2BA89A, #115E59); }
.wrapped-card.wc-empty { background: var(--bg2); color: var(--muted); display: flex;
  align-items: center; justify-content: center; font-size: .95rem; }
.wr-head { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; }
.wr-who { opacity: .92; font-size: .9rem; margin-top: 3px; }
.wr-big { font-size: 4.4rem; font-weight: 800; line-height: 1.05; margin-top: 8px;
  text-shadow: 0 3px 10px rgba(0,0,0,.18); }
.wr-big-lbl { font-weight: 700; margin-bottom: 14px; }
.wr-line { font-size: .92rem; margin: 5px 0; opacity: .96; }
.wr-foot { margin-top: 14px; font-size: .8rem; opacity: .85; }

/* ======================================================================
   VIENODINIMO SLUOKSNIS (dizaino kodas A: šiltas knygynas)
   Vėlesnės taisyklės nugali ankstesnes – čia suvienodinami per laiką
   atsiradę komponentai. Spalvų rolės aprašytos :root viršuje.
   ====================================================================== */

/* -- Kortelės: vienodas dydis ir antraštės -- */
.card { padding: 20px; }
.card h2 { font-size: 1.25rem; margin: 0 0 14px; }
@media (max-width: 560px) { .card { padding: 18px; } }

/* -- Skilčių antraštės: visur vienodos (mažos, pilkos, VERSALU) -- */
.stat-block h3, .now-reading h3, .due-reminders h3,
.admin-section h3, .restore-block h3 {
  margin: 0 0 9px; font-size: .9rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-body);
}

/* -- Ženkliukai: viena sistema (dydis/forma visiems vienoda) -- */
.r-genre, .medal, .streak, .rp-badge, .lvl-badge, .role-badge, .r-due, .r-times {
  display: inline-block; font-size: .74rem; font-weight: 700; line-height: 1.5;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: none;
}
/* neutralūs (informacija) */
.r-genre, .role-badge, .r-due {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
}
/* auksiniai – TIK pasiekimai */
.medal, .rp-badge, .lvl-badge { background: var(--gold-soft); color: var(--gold-deep); }
/* persikiniai – dėmesys/laikas */
.streak { background: var(--peach-soft); color: var(--peach-deep); }
/* firminė (žalia) – „×3" pakartotiniai skaitymai. NE auksinė: auksas skirtas TIK
   pasiekimams, o kartojimas yra malonus faktas, ne apdovanojimas. */
.r-times { background: var(--accent-soft); color: var(--accent-dark); }
.r-due.soon { background: var(--peach-soft); border-color: transparent; color: var(--peach-deep); }
.r-due.overdue { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

/* -- Tempo eilutė („ar spėji?") pagal roles -- */
.pace { font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.pace.pace-ahead { background: var(--accent-soft); color: var(--accent-dark); }
.pace.pace-ok { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.pace.pace-behind { background: var(--peach-soft); color: var(--peach-deep); }

/* -- Segmentuoti valdikliai: visi vienodi (būsena, rodinys, šriftas) -- */
.view-toggle, .seg {
  display: inline-flex; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; gap: 2px;
}
.vt-btn, .seg-btn {
  border: none; background: none; color: var(--muted); font-weight: 600;
  padding: 6px 13px; border-radius: 8px; cursor: pointer; font-size: .9rem;
  font-family: inherit;
}
.vt-btn + .vt-btn, .seg-btn + .seg-btn { border-left: none; }
.vt-btn:hover, .seg-btn:hover { color: var(--ink); }
.vt-btn.active, .seg-btn.active { background: #fff; color: var(--accent-dark); box-shadow: var(--shadow); }
[data-theme="dark"] .view-toggle, [data-theme="dark"] .seg { background: #2a2722; border-color: #38312a; }
[data-theme="dark"] .vt-btn, [data-theme="dark"] .seg-btn { background: none; }
[data-theme="dark"] .vt-btn.active, [data-theme="dark"] .seg-btn.active { background: #3a352d; color: #8fe0c9; }

/* -- Statistikos juostos: visos mėtinės (skiriasi tik skaitytojų spalvos) -- */
.bar-fill.alt, .bar-fill.alt2, .bar-fill.alt3 {
  background: linear-gradient(90deg, #5fd0b0, var(--accent));
}

/* -- Būsenos: perskaitė=mėtinė, skaito=persikinė, nori=neutrali -- */
.status-nori { background: var(--bg2); color: var(--muted); }
.shelf-book.status-nori .shelf-cover { opacity: .75; }

/* -- Tikslas: eigoje mėtinis, PASIEKTAS – auksinis (pasiekimas!) -- */
.goal-fill { background: linear-gradient(90deg, #5fd0b0, var(--accent)); }
.goal-row.done .goal-fill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.goal-row.done .goal-label { color: var(--gold-deep); font-weight: 700; }

/* -- Lygio juosta: auksinė (pasiekimas), nebent skaitytojo spalva -- */
.lvl-fill { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }

/* -- Smulkmenos pagal roles -- */
.btn.icon-btn { background: var(--accent-soft); }
.btn.icon-btn:hover { background: #cdeee3; }
[data-theme="dark"] .btn.icon-btn { background: var(--accent-soft); }
.child-row:hover { background: var(--bg2); }
.navlink.kid-exit { background: var(--peach-soft); color: #8a4a26; }
.navlink.kid-exit:hover { background: #ffd9bd; }

/* -- Tamsi tema: ženkliukų rolės (nugali senus lopus) -- */
[data-theme="dark"] .medal, [data-theme="dark"] .rp-badge, [data-theme="dark"] .lvl-badge {
  background: var(--gold-soft); color: #e9b75a;
}
[data-theme="dark"] .streak { background: var(--peach-soft); color: #ffab76; }
[data-theme="dark"] .r-genre, [data-theme="dark"] .role-badge, [data-theme="dark"] .r-due,
[data-theme="dark"] .pace.pace-ok { border-color: #3b342b; color: var(--muted); }
[data-theme="dark"] .r-due.soon { background: var(--peach-soft); color: #ffab76; border-color: transparent; }
[data-theme="dark"] .r-due.overdue { background: #3a2622; color: #ff9b8a; border-color: transparent; }
[data-theme="dark"] .pace.pace-behind { background: var(--peach-soft); color: #ffab76; }
[data-theme="dark"] .navlink.kid-exit { background: var(--peach-soft); color: #ffab76; }

/* ===== Skaitymo BINGO ===== */
.bingo-box { max-width: 440px; }
.bingo-btn { margin-left: auto; }
.period-summary .wrapped-btn { margin-left: 0; }
.bingo-status { text-align: center; margin: 2px 0 10px; min-height: 1.4em; }
.bingo-win { font-weight: 800; color: var(--gold-deep); background: var(--gold-soft);
  border-radius: 999px; padding: 3px 12px; }
.bingo-sub { color: var(--muted); font-size: .85rem; }
.bingo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bingo-cell { position: relative; background: var(--bg2); border: 1.5px dashed var(--line);
  border-radius: 12px; min-height: 96px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding: 8px 6px; text-align: center; }
.bingo-cell.done { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.bc-emoji { font-size: 1.5rem; line-height: 1; }
.bc-label { font-size: .72rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.bingo-cell.done .bc-label { color: var(--accent-dark); }
.bc-check { position: absolute; top: 5px; right: 8px; color: var(--accent-dark); font-weight: 800; }
[data-theme="dark"] .bingo-cell { background: #2a2722; }
[data-theme="dark"] .bingo-cell.done { background: var(--accent-soft); }
@media (max-width: 560px) { .bingo-grid { gap: 6px; } .bc-label { font-size: .66rem; } }

/* ===== Knygų kelionė (žemėlapis) ===== */
.journey-info { font-size: .9rem; color: var(--ink); margin: 0 0 8px; }
.journey-info b { color: var(--accent-dark); }
.journey-map svg { width: 100%; height: auto; display: block; }

/* ===== Administratoriaus statistika ===== */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-top: 10px; }
.as-tile { background: var(--bg2); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; }
[data-theme="dark"] .as-tile { background: #2a2722; }
.as-num { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--accent-dark); line-height: 1.1; }
.as-lbl { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.as-sub { font-size: .7rem; color: var(--muted); opacity: .85; }
.admin-stats-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 14px; }
.admin-stats-tops h4 { margin: 0 0 6px; font-size: .8rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.as-row { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem;
  padding: 3px 0; border-bottom: 1px dashed var(--line); }
.as-row:last-child { border-bottom: none; }
.as-row em { color: var(--muted); font-style: normal; font-size: .78rem; }
.as-row b { color: var(--accent-dark); }
/* Teisiniai puslapiai (privatumas, taisyklės) */
.legal-body { margin: 0; padding: 28px 14px; display: flex; justify-content: center;
  background: var(--bg); min-height: 100vh; box-sizing: border-box; }
.legal-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 36px 40px; max-width: 760px; width: 100%; box-sizing: border-box; }
.legal-card h1 { font-family: var(--font-head); font-size: 1.7rem; margin: 10px 0 4px; }
.legal-card h2 { font-family: var(--font-head); font-size: 1.12rem; margin: 22px 0 8px;
  color: var(--accent-dark); }
.legal-card p, .legal-card li { font-size: .92rem; line-height: 1.55; }
.legal-card ul { padding-left: 20px; }
.legal-footer { margin-top: 26px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: .88rem; }
@media (max-width: 560px) { .legal-card { padding: 24px 18px; } }

.admin-bars { margin-top: 16px; }
.admin-bars h4 { margin: 0 0 8px; font-size: .8rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.ab-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center;
  gap: 10px; padding: 3px 0; }
.ab-lbl { font-size: .82rem; color: var(--ink); }
.ab-track { height: 14px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
[data-theme="dark"] .ab-track { background: #2a2722; }
.ab-fill { display: block; height: 100%; background: var(--mint, var(--accent));
  border-radius: 999px; min-width: 4px; }
.ab-val { font-size: .82rem; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.ab-val small { font-weight: 400; color: var(--muted); margin-left: 5px; }
@media (max-width: 560px) { .admin-stats-tops { grid-template-columns: 1fr; }
  .ab-row { grid-template-columns: 76px 1fr auto; } }

/* ===================================================================
   PREMIUM POLISH (Cute-alist / Premium Playful)
   Spruce bazė + ambros akcentas. Plokščios spalvos vietoj gradientų,
   ploni rėmeliai vietoj sunkių šešėlių, daugiau oro, apvalūs kampai.
   Šis sluoksnis nugali ankstesnes taisykles (eina vėliau faile).
   =================================================================== */

/* Plokščias kreminis fonas (be gradiento) */
body { background: var(--bg); }
[data-theme="dark"] body { background: var(--bg); }

/* Antraštės – spygliuočių žalia, premium svoris */
h1, h2, h3, .panel > h2, .section-title, .card > h2, .card > h3 {
  color: var(--accent); font-family: var(--font-head);
  letter-spacing: -0.01em; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--accent-dark); }

/* Mygtukai – plokšti, švarūs, švelnus rėmelis vietoj sunkaus šešėlio */
.btn.primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.big, .btn.big:hover { background: var(--accent); box-shadow: none; }
.btn.big:hover { background: var(--accent-dark); }

/* Kortelės – baltas paviršius, ploni elegantiški rėmeliai, daugiau oro */
.card, .reading, .res-item, .household-row {
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.card { padding: 28px 30px; }
@media (max-width: 560px) { .card { padding: 20px 18px; } }

/* Neutralios duomenų juostos – plokščia spygliuočių žalia */
.bar-fill { background: var(--accent); }
.bar-fill.alt { background: var(--peach-deep); }
.bar-fill.alt2 { background: var(--lav-deep); }
.bar-fill.alt3 { background: var(--gold); }

/* Tikslo progresas – ambros „šiltas pop" (motyvacinis) */
.goal-fill { background: var(--gold); }
.goal-row.done .goal-fill { background: var(--accent); }

/* Admin amžiaus juostos – ambra */
.ab-fill { background: var(--gold); }

/* Žvaigždutės / pasiekimai – ambra (gilesnis tonas tekstui ant šviesaus) */
.badge { background: var(--gold-soft); color: var(--gold-deep); }
.medal { color: var(--gold-deep); background: var(--gold-soft); }

/* ===================================================================
   LENTYNOS IŠDĖSTYMAS – skaitytojų sąrašas + chips kairėje, turinys dešinėje.
   PASTABA: pats išdėstymo karkasas (flex „app-shell") apibrėžtas žemiau,
   skiltyje „PILNO PLOČIO APP-SHELL" – ji nugali ir yra vienintelis šaltinis.
   Čia liko tik bendros (neperrašomos) taisyklės ir komponentų stiliai.
   =================================================================== */
.shelf-main > .card:first-child,
.shelf-main > .add-launch:first-child { margin-top: 0; }

.side-block {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 16px 18px;
}
.side-title {
  font-family: var(--font-head); color: var(--muted);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 12px;
}

/* Skaitytojai – premium vertikalus sąrašas su apvaliais avatarų laukeliais */
.shelf-sidebar .filter-bar { flex-direction: column; gap: 5px; margin: 0; }
.shelf-sidebar .rf-pill {
  width: 100%; justify-content: flex-start;
  border: 1.5px solid transparent; background: transparent;
  border-radius: var(--radius-sm); padding: 7px 12px 7px 7px; gap: 11px;
}
.shelf-sidebar .rf-pill:hover { background: var(--bg2); border-color: var(--line); }
.shelf-sidebar .rf-pill.active { background: var(--accent-soft); border-color: var(--accent); }
.shelf-sidebar .rf-ava {
  width: 36px; height: 36px; border-radius: 12px; font-size: 1.2rem;
}
.shelf-sidebar .rf-nm { overflow: hidden; text-overflow: ellipsis; }
.shelf-sidebar .rf-ct {
  margin-left: auto; background: var(--bg2); color: var(--muted);
  border-radius: 999px; padding: 1px 9px; min-width: 22px; text-align: center;
}
.shelf-sidebar .rf-pill.active .rf-ct { background: #fff; color: var(--accent-dark); }
[data-theme="dark"] .shelf-sidebar .rf-pill:hover { background: #2a2722; }
[data-theme="dark"] .shelf-sidebar .rf-pill.active { background: #1f3a33; }
[data-theme="dark"] .shelf-sidebar .rf-ct { background: #322c25; }

/* Būsenos chips po skaitytojais */
.shelf-sidebar .status-bar { margin: 0; }
.shelf-sidebar .segmented {
  display: flex; flex-wrap: wrap; width: 100%; gap: 7px;
  background: transparent; border: none; padding: 0;
}
.shelf-sidebar .seg-item {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 9px 15px;
}
.shelf-sidebar .seg-item.active {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-dark); box-shadow: none;
}
[data-theme="dark"] .shelf-sidebar .seg-item { background: #2a2722; }
[data-theme="dark"] .shelf-sidebar .seg-item.active { background: #1f3a33; }

/* Mobilus: viskas vienu stulpeliu; skaitytojai – kompaktiški pilki burbulai */
@media (max-width: 860px) {
  .shelf-layout { display: block; }
  .shelf-sidebar { position: static; flex-direction: column; gap: 12px; margin-bottom: 6px; }
  .shelf-sidebar .filter-bar { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .shelf-sidebar .rf-pill { width: auto; border-radius: 999px; padding: 4px 13px 4px 4px; gap: 8px; }
  .shelf-sidebar .rf-ava { width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; }
  .shelf-sidebar .rf-ct { margin-left: 0; }
}

/* ===================================================================
   „SKAITOMA DABAR" – platus premium hero (vietoj pasikartojančių kortelių)
   =================================================================== */
.now-reading { margin: 10px 0 20px; }
.now-reading-list { display: block; overflow: visible; padding: 0; }
/* Kompaktiška juosta, ne didelis "herojus" – nuo tada, kai atsidūrė virš
   viso puslapio pločio (ne siaurame .shelf-main stulpelyje), didelės fiksuoto
   dydžio proporcijos atrodė kaip tuščias milžinas. */
.hero-banner {
  display: flex; gap: 16px; align-items: center; width: 100%; max-width: 640px;
  background: linear-gradient(135deg, #FFF8EE 0%, #FCEFDE 100%);
  border: 1px solid #F3E3CC; border-radius: var(--radius);
  padding: 14px 18px;
}
[data-theme="dark"] .hero-banner {
  background: linear-gradient(135deg, #2A2418 0%, #2C2118 100%); border-color: #3B2F1E;
}
.hero-cover {
  flex: 0 0 auto; width: 62px; height: 92px; object-fit: cover; cursor: pointer;
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 10px 20px rgba(80,55,20,.26), -2px 0 4px rgba(0,0,0,.10);
  transition: transform .15s ease;
}
.hero-cover:hover { transform: translateY(-3px) rotate(-1deg); }
.hero-cover.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; background: var(--gold-soft); color: var(--gold-deep);
}
.hero-body { flex: 1; min-width: 0; }
.hero-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 3px;
}
.hero-title {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  color: var(--accent); margin: 0 0 1px; line-height: 1.2; cursor: pointer;
}
.hero-author { color: var(--muted); font-size: .82rem; margin: 0 0 6px; }
.hero-lead { font-size: .86rem; color: var(--ink); margin: 0 0 7px; line-height: 1.4; }
.hero-days { color: var(--gold-deep); font-weight: 700; white-space: nowrap; }
.hero-days.soon { color: var(--peach-deep); }
.hero-days.overdue { color: var(--danger); }
.hero-track {
  height: 8px; max-width: 280px; background: rgba(0,0,0,.07);
  border-radius: 999px; overflow: hidden;
}
[data-theme="dark"] .hero-track { background: rgba(255,255,255,.10); }
.hero-fill {
  height: 100%; border-radius: 999px; background: var(--gold);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.hero-fill.soon { background: var(--peach-deep); }
.hero-fill.overdue { background: var(--danger); }
.hero-track.soft .hero-fill.shimmer {
  width: 38%; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: heroShimmer 1.9s ease-in-out infinite;
}
@keyframes heroShimmer { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.hero-actions { margin-top: 8px; }
.hero-others { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-others-lbl { font-size: .76rem; color: var(--muted); }
.hero-other { border: none; background: none; padding: 4px; cursor: pointer; line-height: 0; }
.hero-other img {
  width: 26px; height: 38px; object-fit: cover; border-radius: 3px 5px 5px 3px;
  box-shadow: 0 3px 9px rgba(0,0,0,.20); transition: transform .12s ease;
}
.hero-other:hover img { transform: translateY(-3px); }
.ho-ph {
  display: inline-flex; width: 26px; height: 38px; align-items: center; justify-content: center;
  background: var(--gold-soft); border-radius: 3px 5px 5px 3px; font-size: .85rem;
}
/* Mobilus: kompaktiška horizontali juosta (ne aukštas centruotas „herojus"),
   kad lentyna matytųsi iškart, o ne po pilno ekrano bloko (U4). */
@media (max-width: 560px) {
  .hero-banner { padding: 12px 14px; gap: 12px; max-width: none; }
  .hero-cover { width: 54px; height: 80px; }
  .hero-title { font-size: 1rem; }
  .hero-author { margin: 0 0 4px; }
  .hero-lead { font-size: .82rem; margin: 0 0 6px; }
  .hero-actions { margin-top: 6px; }
  /* „Taip pat skaitoma" – antrinė navigacija; telefone slepiam, kad juosta
     liktų kompaktiška (tos knygos vis tiek matomos lentynoje). */
  .hero-others { display: none; }
}

/* ===================================================================
   PILNO PLOČIO „APP-SHELL" IŠDĖSTYMAS (Notion / Duolingo stilius)
   Kairysis šonas prikabintas prie kairio krašto, turinys – likęs plotis.
   Šis blokas eina paskutinis – nugali ankstesnes išdėstymo taisykles.
   =================================================================== */

/* Viršutinė juosta per visą plotį */
.header-inner { max-width: none; }

/* Pagrindinė sritis – fluidi, per visą plotį (nebe centruota 1140) */
main { max-width: none; margin: 0; padding: 0; }
.verify-banner:not(.hidden) { margin: 14px 40px 0; }

/* Dviejų dalių išdėstymas: fiksuotas šonas + tįstantis turinys */
.shelf-layout {
  display: flex; align-items: flex-start; gap: 0; margin-top: 0;
}
.shelf-layout.no-side { display: block; }

.shelf-sidebar {
  display: flex; flex-direction: column;
  flex: 0 0 280px; width: 280px;
  position: sticky; top: 58px;
  min-height: calc(100vh - 58px);
  border-right: 1px solid var(--line);
  padding: 28px 22px; gap: 26px; margin: 0;
}
/* Šone – be įdėtinių kortelių, tik tarpai (švarus Notion jausmas) */
.shelf-sidebar .side-block {
  background: transparent; border: none; border-radius: 0; padding: 0;
}

.shelf-main {
  flex: 1 1 0; min-width: 0;
  padding: 32px 40px 48px;
}

/* Premium knygų galerija – tįsta per visą laisvą plotį */
.readings {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 22px; margin-top: 14px;
}
/* Paieškos + žanro juosta lygiai pertįsta per sąrašo viršų */
.list-tools { width: 100%; margin: 0 0 4px; }

/* Nustatymų rodinys – fluidžiame plotyje apribojam skaitomam pločiui */
#view-settings { max-width: 920px; margin: 0 auto; padding: 30px 24px 48px; }

/* Mobilus / siauras: šonas virsta viršutine juosta, viskas vienu stulpeliu */
@media (max-width: 860px) {
  .shelf-layout { display: block; }
  .shelf-sidebar {
    position: static; width: auto; min-height: 0;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 16px 18px; gap: 14px;
  }
  .shelf-main { padding: 18px 18px 36px; }
  .verify-banner:not(.hidden) { margin: 12px 18px 0; }
}
@media (max-width: 560px) {
  header { padding: 0 14px; }
}

/* =====================================================================
   ELITE OVERHAUL: minimalistinė antraštė + tamsūs „framed" rėmeliai
   + sluoksniuoti šešėliai + premium „sticker" pridėjimo mygtukas.
   Paskutinis blokas – nugali ankstesnes taisykles.
   ===================================================================== */
:root {
  --frame: #22302C;
  --pop: 0 1px 2px rgba(34,48,44,.05), 0 10px 22px -10px rgba(34,48,44,.20);
  --pop-lg: 0 2px 5px rgba(34,48,44,.06), 0 22px 42px -18px rgba(34,48,44,.28);
  /* 8pt tarpų skalė – nuoseklus ritmas */
  --space-1: 8px; --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 40px; --space-6: 48px;
}
[data-theme="dark"] {
  --frame: #46554E;
  --pop: 0 10px 24px -12px rgba(0,0,0,.6);
  --pop-lg: 0 24px 46px -18px rgba(0,0,0,.72);
}

/* ---- 1. Minimalistinė antraštė: kreminis fonas, tamsus „slate" tekstas ---- */
header {
  background: var(--bg); color: #1e293b; box-shadow: none;
  border-bottom: 1px solid var(--line); padding: 0 28px;
}
[data-theme="dark"] header { background: var(--bg); border-bottom-color: var(--line); }
.brand, .brand-home { color: #0f172a; }
[data-theme="dark"] .brand, [data-theme="dark"] .brand-home { color: var(--ink); }
.brand-fam { color: var(--muted); }
.brand-home:focus-visible { outline: 2px solid var(--accent); }
.theme-toggle { color: #1e293b; }
[data-theme="dark"] .theme-toggle { color: var(--ink); }

/* Nuorodos – be kapsulių, tik elegantiškas tarpas + subtilus hover */
.navlink {
  background: none; color: #1e293b; font-weight: 600;
  border-radius: 8px; padding: 8px 12px;
}
.navlink:hover { background: rgba(15,23,42,.06); color: #0f172a; }
[data-theme="dark"] .navlink { color: var(--ink); }
[data-theme="dark"] .navlink:hover { background: rgba(255,255,255,.08); }
.navlink.active {
  background: none; color: #0f172a; font-weight: 700;
  border-radius: 0; padding: 8px 6px; box-shadow: inset 0 -2px 0 var(--gold);
}
[data-theme="dark"] .navlink.active { color: var(--accent-dark); }

/* ---- 2. „+ Pridėti knygą" – premium „sticker" mygtukas šono viršuje ---- */
.side-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 0 0 4px; font-family: var(--font-head);
  font-weight: 700; font-size: 1.02rem; color: #3D2A05; cursor: pointer;
  padding: 14px 16px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  box-shadow: 0 8px 20px -6px rgba(245,158,11,.50), 0 2px 4px rgba(245,158,11,.18);
  transition: transform .25s ease-out, box-shadow .25s ease-out;
}
.side-add:hover { transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(245,158,11,.55), 0 3px 6px rgba(245,158,11,.22); }
.side-add:active { transform: translateY(0);
  box-shadow: 0 6px 14px -6px rgba(245,158,11,.45); }
[data-theme="dark"] .side-add { color: #2A1C03; }

/* Antrinis „+Pridėti skaitytoją" po skaitytojų sąrašu (S3/A): kuklus ghost
   mygtukas – nekonkuruoja su auksiniu „Pridėti knygą"; nukelia į Nustatymus. */
.side-add-reader {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin: 8px 0 0; padding: 8px 12px; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  color: var(--accent); background: transparent;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s, color .15s;
}
.side-add-reader:hover { background: var(--accent-soft); border-color: var(--accent); }
.side-add-reader .ic { vertical-align: -2px; }

/* ---- 3. Kortelės – subtilus 1px rėmelis + minkštas sluoksniuotas šešėlis (soft premium) ---- */
.card, .reading, .hero-banner, .shelf-sidebar .side-block {
  border: 1px solid var(--line);
}
.reading { box-shadow: var(--pop); }
.reading:hover { box-shadow: var(--pop-lg); }
.card, .hero-banner { box-shadow: var(--pop-lg); }
.shelf-sidebar .side-block {
  background: var(--card); border-radius: var(--radius);
  padding: 16px 16px 18px; box-shadow: var(--pop);
}

/* Būsenos ženkliukai – apvalūs, su solidžiu rėmeliu */
.badge { border: 1.5px solid var(--gold-deep); }
.status { border: 1.5px solid currentColor; }

/* ---- 4. Daugiau „oro" pagrindinėje srityje (editorial) ---- */
.shelf-main { padding: 36px 48px 56px; }
@media (max-width: 860px) { .shelf-main { padding: 20px 18px 36px; } }

/* =====================================================================
   FINAL POLISH (Design+Code / Meng To estetika)
   Tipografija, švarios kortelių meta, pakylėtos statistikos plytelės,
   švytintis kelionės žemėlapis, fluidūs perėjimai.
   ===================================================================== */

/* ---- Tipografija: antraštės/etiketės – head šriftas, duomenys – Inter ---- */
.stat-lbl, .side-title, .hero-eyebrow, .field-cap, .bar-name { font-family: var(--font-head); }
.stat-num, .r-isbn, .r-pages, .bar-val { font-family: var(--font-body); }

/* ---- Linijinės ikonos (vietoj emoji) ---- */
.ic { display: inline-block; vertical-align: -2px; flex-shrink: 0; }
.r-meta .ic { opacity: .8; }
.side-add .ic { vertical-align: -3px; margin-right: 2px; }
h2 .ic, h3 .ic { vertical-align: -3px; margin-right: 4px; color: var(--accent); }
.hero-eyebrow .ic { vertical-align: -2px; margin-right: 3px; }
.brand-home { display: inline-flex; align-items: center; gap: 8px; }
.brand-ic { color: var(--accent); }
.navlink { display: inline-flex; align-items: center; gap: 6px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.vb-text .ic { vertical-align: -3px; margin-right: 4px; }

/* ---- 1. Knygų kortelės meta – švara ---- */
.r-author { color: #64748b; font-weight: 500; }
[data-theme="dark"] .r-author { color: #94a3b8; }
/* ISBN paslepiamas, matomas tik užvedus ant kortelės (mažiau triukšmo) */
.r-isbn { display: none; }
.reading:hover .r-isbn { display: inline; }
/* „ibiblioteka ↗" – subtilus pill mikro-mygtukas vietoj žalio teksto */
.r-link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent-dark); background: var(--accent-soft);
  border: 1px solid rgba(17,94,89,.22); border-radius: 6px;
  padding: 2px 8px; font-size: .73rem; font-weight: 600;
  text-decoration: none; transition: all .25s ease-out;
}
.r-link:hover { background: var(--accent); color: #fff; text-decoration: none; border-color: var(--accent); }
[data-theme="dark"] .r-link { border-color: rgba(79,208,191,.3); }

/* ---- 2. Būsenos ženkliukai – tobuli pill'ai, 1px rėmelis, ryškus tekstas ---- */
.status { border: 1px solid currentColor; border-radius: 999px; }
.badge { border: 1px solid var(--gold-deep); border-radius: 999px; }
.r-meta { gap: 7px 8px; }

/* ---- 3. Statistikos plytelės – vienodas kreminis fonas + spalvotas rėmelis ---- */
.stat-tile, .stat-tile:nth-child(1), .stat-tile:nth-child(2),
.stat-tile:nth-child(3), .stat-tile:nth-child(4) {
  background: var(--card);
  border: 1.5px solid var(--line);
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.stat-tile:nth-child(1) { border-color: var(--accent); }
.stat-tile:nth-child(2) { border-color: var(--peach-deep); }
.stat-tile:nth-child(3) { border-color: var(--gold-deep); }
.stat-tile:nth-child(4) { border-color: var(--lav-deep); }
.stat-tile:nth-child(4) .stat-num { color: var(--lav-deep); }
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--pop); }
.stat-num { font-weight: 800; }

/* ---- 3b. „Knygų kelionė" – švytintis aktyvus kelias + autobusas ---- */
.journey-map .j-active { filter: drop-shadow(0 0 7px rgba(17,94,89,.55)); }
.journey-map .j-bus {
  filter: drop-shadow(0 0 9px rgba(245,158,11,.65));
  animation: jBus 1.6s ease-in-out infinite;
}
@keyframes jBus { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
[data-theme="dark"] .journey-map .j-active { filter: drop-shadow(0 0 8px rgba(79,208,191,.6)); }

/* ---- 4. Fluidūs perėjimai pagrindiniams konteineriams ---- */
.card, .reading, .hero-banner, .shelf-sidebar .side-block {
  transition: transform .3s ease-out, box-shadow .3s ease-out, border-color .3s ease-out;
}
.reading:hover { transform: translateY(-3px); }

/* ---- Kompaktiškos kortelės: vienodas aukštis, „varnelės" mikro-veiksmas ---- */
.readings { align-items: stretch; }          /* vienodas kortelių aukštis eilutėje */
.reading { padding: 15px 15px 16px; align-items: flex-start; }
/* Pavadinimas – iki 2 eilučių, bet visada rezervuoja 2 eilutes (meta lygiuojasi) */
.r-title { line-height: 1.25; min-height: 2.5em; }

/* „Pažymėti perskaityta" – elegantiška varnelė viršuje dešinėje, tik užvedus */
.r-mark {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 2px solid var(--card);
  font-size: .92rem; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 12px rgba(17,94,89,.35);
  /* Visada matoma ir paspaudžiama (kad atrastum ir nereikėtų „medžioti" pele);
     ryškėja užvedus kortelę. */
  opacity: .5; transform: scale(1); pointer-events: auto;
  transition: opacity .2s ease-out, transform .3s ease-out, background .15s;
}
.reading:hover .r-mark { opacity: 1; }
.r-mark:hover { opacity: 1; background: var(--accent-dark); transform: scale(1.08); }
/* Liečiamuose / stambiu žymekliu ekranuose (be hover) – visada visiškai matoma */
@media (hover: none), (pointer: coarse) { .r-mark { opacity: 1; } }

/* „Dar kartą" (↺) atsiranda ant KIEKVIENOS perskaitytos knygos, o „✓ perskaityta"
   – tik ant kelių dar neperskaitytų. Todėl jis numatytai blankesnis: kitaip visa
   lentyna atrodytų kaip mygtukų jūra. Užvedus pele – visiškai matomas. */
.r-mark.read-again { opacity: .28; font-size: 1.15rem; }
.reading:hover .r-mark.read-again { opacity: 1; }
@media (hover: none), (pointer: coarse) { .r-mark.read-again { opacity: .55; } }

/* U6: knygoms be autoriaus nerodom tuščios eilutės – kortelės aukštis nešokinėja */
.r-author:empty { display: none; }

/* U7: aiškesnė „kortelė paspaudžiama" užuomina. Užvedus pele kortelė pakyla
   (jau yra), o paspaudus/tapštelėjus – trumpam „prispaudžiama": grįžtamasis
   ryšys veikia ir telefone, kur hover būsenos nėra. */
.reading:active { transform: translateY(-1px) scale(.994); box-shadow: var(--pop); transition-duration: .06s; }

/* =====================================================================
   8pt TARPŲ SKALĖ – pritaikyta pagrindiniam išdėstymui (nuoseklus ritmas)
   ===================================================================== */
.shelf-main { padding: var(--space-4) var(--space-6) var(--space-6); }
.shelf-sidebar { padding: var(--space-3) var(--space-2); gap: var(--space-3); }
.readings { gap: var(--space-3); margin-top: var(--space-2); }
.card { padding: var(--space-3); margin: var(--space-3) auto; }
.stats-card, .reader-profile { padding: var(--space-3); }
/* .shelf-top (grąžinimo terminai + skaitoma dabar + peršokimas) neturi savo
   padding kaip .shelf-main – horizontali paraštė čia atlieka tą patį darbą,
   kad kraštai sutaptų su turiniu žemiau to paties grid stulpelio ribose. */
.now-reading, .due-reminders { margin: var(--space-1) var(--space-6) var(--space-3); }
.shelf-jump { margin: 0 var(--space-6) var(--space-2); }
.hero-banner { padding: var(--space-3) var(--space-3); gap: var(--space-3); }
.shelf-sidebar .side-block { padding: var(--space-2); }

/* Kairė juosta ir "šiandien svarbu" blokas (.shelf-top) – grid, ne flex, kad
   .shelf-top būtų galima sudėti šalia juostos (desktop) arba virš jos (mobilus)
   nepriklausomai nuo DOM tvarkos. Juosta prasideda iškart po antrašte abiem
   atvejais – nebepastumiama žemyn per didelio "skaitoma dabar" bloko. */
.shelf-layout {
  display: grid; grid-template-columns: 280px 1fr;
  grid-template-areas: "sidebar top" "sidebar main";
  align-items: start; gap: 0;
}
.shelf-sidebar { grid-area: sidebar; }
.shelf-top { grid-area: top; }
.shelf-main { grid-area: main; }

@media (max-width: 860px) {
  .shelf-main { padding: var(--space-2) var(--space-2) var(--space-5); }
  .now-reading, .due-reminders, .shelf-jump { margin-left: var(--space-2); margin-right: var(--space-2); }
  .shelf-layout { grid-template-columns: 1fr; grid-template-areas: "top" "sidebar" "main"; }
}

/* ===================================================================
   KLASIŲ KONSOLĖ – tas pats karkasas kaip Lentynoje (žr. .shelf-layout).
   Šonas įsijungia tik su .has-side (JS uždeda nuo 2 klasių), kitaip lieka
   paprastas vienas stulpelis – kaip buvo.
   =================================================================== */
.cls-layout { display: block; }
.cls-layout.has-side {
  display: grid; grid-template-columns: 280px 1fr;
  grid-template-areas: "sidebar main"; align-items: start; gap: 0;
}
.cls-sidebar {
  grid-area: sidebar; display: flex; flex-direction: column; gap: var(--space-3);
  position: sticky; top: 58px; min-height: calc(100vh - 58px);
  border-right: 1px solid var(--line); padding: var(--space-3) var(--space-2);
}
/* Šone – be įdėtinių kortelių, tik tarpai (kaip Lentynos juostoje) */
.cls-sidebar .side-block { background: transparent; border: none; box-shadow: none; padding: 0; }
.cls-main { grid-area: main; min-width: 0; }

.cls-nav { display: flex; flex-direction: column; gap: 4px; }
.cls-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 1.5px solid transparent;
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-family: inherit; font-size: .95rem; color: var(--ink);
  cursor: pointer; text-align: left;
}
.cls-nav-txt { display: flex; flex-direction: column; min-width: 0; }
.cls-nav-nm { font-weight: 700; }
.cls-nav-sub {
  color: var(--muted); font-size: .78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cls-nav-ct {
  margin-left: auto; background: var(--bg2); color: var(--muted);
  border-radius: 999px; padding: 1px 9px; font-size: .78rem;
  min-width: 22px; text-align: center;
}
.cls-nav-item:hover { background: var(--bg2); border-color: var(--line); }
.cls-nav-item.active { background: var(--accent-soft); border-color: var(--accent); }
.cls-nav-item.active .cls-nav-ct { background: #fff; color: var(--accent-dark); }
[data-theme="dark"] .cls-nav-item:hover { background: #2a2722; }
[data-theme="dark"] .cls-nav-item.active { background: #1f3a33; }
[data-theme="dark"] .cls-nav-ct { background: #322c25; }

/* Aktyvaus elemento skaičiukas tamsioje temoje. Šviesus fonas su
   `--accent-dark` tekstu (šviesiu tamsioje temoje) duoda kontrastą 1.89 – gerokai
   žemiau WCAG AA (4.5). Tamsus ženkliukas su šviesiu tekstu duoda 11.29 ir kartu
   atrodo natūraliau: baltas blyksnis ant tamsiai žalio buvo šviesios temos
   sprendimas, mechaniškai perkeltas. Ta pati klaida buvo ir Lentynos juostoje –
   taisom abi vienu kartu, kad rodiniai nesiskirtų. */
[data-theme="dark"] .cls-nav-item.active .cls-nav-ct,
[data-theme="dark"] .shelf-sidebar .rf-pill.active .rf-ct {
  background: #0d2620; color: #8fe9db;
}

@media (max-width: 860px) {
  .cls-layout.has-side { grid-template-columns: 1fr; grid-template-areas: "sidebar" "main"; }
  .cls-sidebar {
    position: static; min-height: 0;
    border-right: none; border-bottom: 1px solid var(--line); padding: var(--space-2);
  }
  /* Mobiliame – horizontalūs burbulai, kaip skaitytojai Lentynoje */
  .cls-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .cls-nav-item { width: auto; border-radius: 999px; padding: 6px 14px; }
  .cls-nav-sub { display: none; }   /* mokykla netelpa – lieka klasė ir skaičius */
}

/* =====================================================================
   TRIUKŠMO MAŽINIMAS (premium restraint)
   ===================================================================== */
/* Statistikos plytelės – neutralus subtilus rėmelis; spalva lieka skaičiuje */
.stat-tile, .stat-tile:nth-child(1), .stat-tile:nth-child(2),
.stat-tile:nth-child(3), .stat-tile:nth-child(4) {
  border: 1px solid var(--line);
}
/* Žemėlapio švytėjimas – subtilesnis, ne „neoninis" */
.journey-map .j-active { filter: drop-shadow(0 0 5px rgba(17,94,89,.32)); }
.journey-map .j-bus { filter: drop-shadow(0 0 6px rgba(245,158,11,.42)); }
[data-theme="dark"] .journey-map .j-active { filter: drop-shadow(0 0 6px rgba(79,208,191,.4)); }

/* Žanro žyma niekada neišlenda iš kortelės (ilgi pavadinimai apsisuka) */
.r-genre { white-space: normal; max-width: 100%; }

/* ===================================================================
   ATSILIEPIMAI (susisiekti / pranešti) + admin sąrašas
   =================================================================== */
.fb-form { max-width: 520px; }
.fb-form select, .fb-form textarea {
  width: 100%; padding: 11px 13px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem;
  background: #fff; color: var(--ink);
}
.fb-form textarea { resize: vertical; line-height: 1.5; min-height: 90px; }
.fb-form select:focus, .fb-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
[data-theme="dark"] .fb-form select, [data-theme="dark"] .fb-form textarea { background: #322c25; }

.admin-feedback { display: flex; flex-direction: column; gap: 10px;
  max-height: 380px; overflow-y: auto; margin-top: 8px; }
.fb-item { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--bg2); }
[data-theme="dark"] .fb-item { background: #2a2722; }
.fb-head { display: flex; justify-content: space-between; gap: 10px;
  font-size: .78rem; margin-bottom: 5px; }
.fb-type { font-weight: 700; }
.fb-when { color: var(--muted); }
.fb-text { margin: 0; font-size: .9rem; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; }
.fb-from { margin: 6px 0 0; font-size: .76rem; color: var(--muted); }

/* ===================================================================
   PASAKIS LOGOTIPAS (iliustruotas „lockup": antraštė / prisijungimas / pradžia)
   =================================================================== */
/* Antraštėje – apvalus „mascot" avataras: iškerpam TIK nykštuką iš pilno ženklo
   (visas „lockup" su šūkiu antraštėje būtų neįskaitomas). Jei nykštukas ne centre –
   pakoreguok background-position Y reikšmę (apie 30–50%). */
.brand-logo {
  height: 46px; width: 46px; flex-shrink: 0; display: block;
  border-radius: 50%;
  background-image: url("Pasakis.png");
  background-repeat: no-repeat;
  background-size: 168%;
  background-position: 50% 40%;
  box-shadow: 0 2px 8px rgba(34,48,44,.16);
}
/* Vardas + šūkis dviem eilutėm, glaudžiai sulygiuoti šalia maskoto */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
/* Žaismingas „Pasakis" žodinis ženklas – apvalus „Fredoka" šriftas, spruce spalva */
.brand-home .brand-name {
  font-family: "Fredoka", var(--font-head);
  font-weight: 600; font-size: 1.34rem; letter-spacing: .004em;
  color: var(--accent);
}
[data-theme="dark"] .brand-home .brand-name { color: var(--accent-dark); }
/* Šūkis – mažas, švelnus, po pavadinimu */
.brand-slogan {
  font-family: var(--font-head);
  font-size: .64rem; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); margin-top: 1px; white-space: nowrap;
}
/* Siaurame ekrane šūkis slepiamas – antraštė lieka švari */
@media (max-width: 560px) { .brand-slogan { display: none; } }
/* Prisijungimo / teisiniuose puslapiuose – pilnas ženklas su šūkiu, centre */
.auth-logo {
  display: block; width: 200px; max-width: 72%; height: auto;
  border-radius: 16px; margin: 0 auto 6px;
}
/* Pradžios (onboarding) ekrane – didelis pasveikinimo ženklas */
.onboarding-logo {
  display: block; width: 180px; max-width: 60%; height: auto;
  border-radius: 18px; margin: 0 auto 6px;
}
@media (max-width: 560px) { .auth-logo { width: 170px; } }

/* ===== Socialinis prisijungimas (OAuth) ===== */
.oauth-area { margin-top: 14px; }
.oauth-sep { display: flex; align-items: center; gap: 10px; color: var(--muted);
  font-size: .85rem; margin: 6px 0 10px; }
.oauth-sep::before, .oauth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 8px; padding: 11px 14px; font-size: .98rem; font-weight: 600;
  text-decoration: none; }
.oauth-btn .oauth-ic { display: inline-flex; line-height: 0; }
.oauth-btn.loading { opacity: .65; pointer-events: none; }
/* Google – baltas mygtukas su rėmeliu (brand guidelines) */
.oauth-google, .oauth-google:hover { background: #fff; color: #3c4043;
  border: 1px solid #dadce0; box-shadow: none; }
.oauth-google:hover { background: #f7f8f8; }
[data-theme="dark"] .oauth-google, [data-theme="dark"] .oauth-google:hover {
  background: #131314; color: #e3e3e3; border-color: #5f6368; }
/* Facebook – firminė mėlyna */
.oauth-facebook, .oauth-facebook:hover { background: #1877F2; color: #fff; border: none; box-shadow: none; }
.oauth-facebook:hover { background: #166fe0; }

/* ===== Administravimo puslapis (/admin) ===== */
.admin-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.admin-title { font-family: var(--font-head); margin: 4px 0 18px; }
/* North star – svarbiausias rodiklis, ryškiai viršuje */
.ns-banner { display: flex; align-items: center; gap: 18px; background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 22px; }
.ns-num { font-family: var(--font-head); font-size: 2.8rem; font-weight: 700; color: var(--accent);
  line-height: 1; }
[data-theme="dark"] .ns-num { color: var(--accent-dark); }
.ns-lbl { font-size: 1rem; color: var(--ink); }
.ns-lbl small { color: var(--muted); font-size: .85rem; }
/* Trys pagrindinės kortelės */
.admin-headline { margin-bottom: 22px; }
.admin-headline .stat-num { font-size: 2rem; }

/* Tabų navigacija */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); }
.admin-tab { padding: 10px 16px; border: none; background: transparent; color: var(--muted);
  font-size: .92rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.admin-tab:hover { color: var(--ink); background: var(--accent-soft); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .admin-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.admin-tabpanel[hidden] { display: none; }

/* Vartotojų paieška */
.admin-search { width: 100%; max-width: 360px; padding: 8px 12px; margin: 4px 0 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }

/* Sulankstomi ilgi sąrašai (saugumo žurnalas, kvietimo kodai) */
.admin-collapse { margin-top: 10px; }
.admin-collapse summary { cursor: pointer; font-weight: 600; color: var(--accent);
  padding: 8px 0; list-style: none; user-select: none; }
.admin-collapse summary::-webkit-details-marker { display: none; }
.admin-collapse summary::before { content: "▸ "; display: inline-block;
  transition: transform .15s; }
.admin-collapse[open] summary::before { transform: rotate(90deg); }
[data-theme="dark"] .admin-collapse summary { color: var(--accent-dark); }
.collapse-count { color: var(--muted); font-weight: 400; }
#audit-show-all { margin-top: 10px; }

/* Pavojinga zona (destruktyvūs veiksmai) */
.danger-zone { border: 1.5px solid #C0392B; }
.danger-zone h2 { color: #C0392B; }
[data-theme="dark"] .danger-zone { border-color: #E57373; }
[data-theme="dark"] .danger-zone h2 { color: #E57373; }

.admin-users-wrap { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.users-table th, .users-table td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.users-table th { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.users-table tr:last-child td { border-bottom: none; }
.users-table .hh-sub { color: var(--muted); }
.users-table .del-household { margin-left: 8px; }
/* Puslapiavimas (Vartotojai, Skaitytojai – ilgi sąrašai, žr. admin.js pagerHtml) */
.admin-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-pager-num { min-width: 34px; padding-left: 0; padding-right: 0; text-align: center; }
.admin-pager-num.active { background: var(--accent); color: #fff; border-color: var(--accent);
  cursor: default; opacity: 1; }
.admin-pager-ellipsis { color: var(--muted); padding: 0 2px; }
.admin-pager-info { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums;
  margin-left: 8px; width: 100%; text-align: center; }
/* Skaitytojų analizės filtrai + rūšiuojama lentelė */
.rd-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 10px 0; }
.rd-filters label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.rd-filters input[type="number"] { width: 120px; }
.rd-count { margin-left: auto; font-weight: 600; color: var(--ink); white-space: nowrap; }
.rd-summary { font-size: .9rem; color: var(--muted); margin: 4px 0 10px; }
/* Agreguoti pjūviai (pagal mokyklą / lytį) – dvi lentelės greta, siaurame – stulpeliu */
.rd-aggregates { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 18px; }
.rd-aggregates h4 { margin: 0 0 8px; font-size: .98rem; }
.rd-detail-title { margin: 6px 0 8px; font-size: .98rem; }
@media (max-width: 760px) { .rd-aggregates { grid-template-columns: 1fr; } }
.rd-table th.rd-sortable { cursor: pointer; user-select: none; white-space: nowrap; }

/* Konkurso burtai */
.raffle-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin: 10px 0; }
.raffle-controls label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--muted); }
.raffle-controls input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); }
.raffle-controls #rf-min { width: 90px; }
.raffle-result { margin-top: 8px; }
.raffle-winner { background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; }
.raffle-winner .rw-title { font-size: 1.1rem; margin-bottom: 6px; }
.raffle-winner .rw-line { font-size: .95rem; margin-top: 2px; }
.rd-table th.rd-sortable:hover { color: var(--accent); }
.rd-table th.active { color: var(--accent); }
@media (max-width: 620px) { .rd-count { margin-left: 0; } }
/* Telefone lentelę paverčiam kortelėmis */
@media (max-width: 620px) {
  .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; width: 100%; }
  .users-table thead { display: none; }
  .users-table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 4px; }
  .users-table td { border: none; padding: 6px 10px; }
  .users-table td::before { content: attr(data-th) ": "; font-weight: 600; color: var(--muted); }
}

/* ---------- Klasės (mokytojo sluoksnis) ---------- */
.cls-card .cls-tag {
  font-size: .72rem; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); padding: 2px 8px; border-radius: 999px;
  vertical-align: middle; margin-left: 6px;
}
.cls-teacher-badge {
  font-size: .8rem; font-weight: 500; color: var(--muted);
  margin-left: 8px; vertical-align: middle;
}
.cls-duk-link {
  float: right; font-size: .82rem; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.cls-duk-link:hover { text-decoration: underline; }
.cls-trial-banner {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: 10px;
  font-size: .9rem; line-height: 1.55; border: 1px solid transparent;
}
.cls-trial-banner a { font-weight: 600; color: inherit; }
.cls-trial-banner.trial { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.cls-trial-banner.expired { background: var(--danger-soft); color: var(--ink); border-color: var(--danger); }
/* Užuomina, kad mokytoja gali sekti ir savo/šeimos skaitymą. Atskirta plona
   linija viršuje: tai ANTRINIS kelias, neturi konkuruoti su klasės kūrimu. */
.cls-family-hint {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.cls-family-hint .link-btn { font-size: inherit; }
/* Kolegės užuomina eina iškart po šeimos – be antros linijos, kad neatrodytų
   kaip dar viena kortelės dalis (abi yra ta pati „be kita ko" pastraipa). */
.cls-colleague-hint { margin-top: 6px; }
.cls-colleague-hint .link-btn { font-size: inherit; }

.cls-create, .cls-join { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.cls-create input, .cls-create select,
.cls-join input, .cls-join select { padding: 9px 11px; }
.cls-create input[type="text"] { flex: 1 1 180px; }
.cls-code-input { flex: 0 0 150px; text-transform: uppercase; letter-spacing: 1px; }
.cls-join select { flex: 1 1 140px; }
.cls-share-row { margin: 4px 0 2px; }
.cls-empty { color: var(--muted); font-style: italic; margin: 8px 0; }

.cls-owned { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cls-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--card); }
.cls-title { font-weight: 700; font-size: 1.05rem; }
.cls-sub { color: var(--muted); font-weight: 400; font-size: .9rem; }
.cls-meta { color: var(--muted); font-size: .9rem; margin: 3px 0 8px; }
.cls-goal { margin-left: 6px; }
/* Kvietimo tėvams blokas (kodas + nuoroda + žinutė + lapelis). Sąmoningai
   ATSKIRTAS nuo .cls-actions: čia yra veiksmas, nuo kurio priklauso, ar klasė
   apskritai prisipildys, ir jis neturi paskęsti tarp aštuonių vienodo svorio
   mygtukų. Bet naudojamas jis kartą per mokslo metus, tad susipildžius klasei
   suskleidžiamas (žr. app.js inviteIsOpen) – kitaip visus likusius metus
   užimtų pusę kortelės. */
.cls-invite { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); }
.cls-coderow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cls-codelabel { color: var(--muted); font-size: .9rem; }
.cls-code { font-family: monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: 2px;
  background: var(--card); color: var(--accent); padding: 3px 10px; border-radius: 8px; }
/* „Suskleisti" – tyliausias elementas bloke: jis skirtas tam, kas jau žino, ko
   nori, ir neturi konkuruoti su pačiais kvietimo mygtukais. Tyluma kuriama ir
   dydžiu, ir spalva; --muted dabar įskaitomas (5,29:1 ant šio fono), tad
   laikino --ink apėjimo nebereikia. */
.cls-invitehide { margin-left: auto; background: transparent; color: var(--muted);
  font-weight: 400; font-size: .82rem; padding: 4px 8px; }
.cls-invitehide:hover { background: var(--card); color: var(--ink); }
.cls-inviterow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cls-invitehint { flex-basis: 100%; margin: 0; }
.cls-invitetext { flex-basis: 100%; width: 100%; font: inherit; font-size: .9rem;
  line-height: 1.45; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink); }

.cls-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Suskleistas kvietimas grįžta į veiksmų eilutę – bet ryškesnis už kaimynus,
   kad rugsėjį ar naujam mokiniui prisijungus jį pavyktų rasti iš karto. */
.cls-inviteshow { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cls-inviteshow:hover { background: var(--accent); color: #fff; }

/* Klasės redagavimas – atskiriam nuo kortelės turinio, kad būtų aišku, kad
   tai laikina forma, o ne dar viena kortelės dalis. */
.cls-edit { margin-top: 12px; padding: 2px 12px 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); }
.cls-edit .hint { margin: 2px 0 0; }
.cls-editrow { margin-top: 10px; }

.cls-roster { margin-top: 12px; overflow-x: auto; }
.cls-loading { color: var(--muted); }
.cls-roster-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cls-search { flex: 1 1 auto; max-width: 240px; padding: 7px 11px; }
.cls-count { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.cls-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cls-table th, .cls-table td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cls-table th { color: var(--muted); font-weight: 600; font-size: .82rem; }
.cls-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.cls-sortable:hover { color: var(--accent); }
.cls-rname { font-weight: 600; white-space: nowrap; }
.cls-num { text-align: center; white-space: nowrap; }
.cls-booksbtn { border: 1px solid var(--line); background: var(--card); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; font-size: .85rem; white-space: nowrap; color: inherit; }
.cls-booksbtn:hover { border-color: var(--accent); color: var(--accent); }
.cls-caret { font-size: .7rem; }
.cls-bookbox { max-height: 220px; overflow-y: auto; background: var(--accent-soft);
  border-radius: 8px; padding: 6px 12px; margin: 2px 0 6px; }
.cls-books { margin: 0; padding-left: 18px; }
.cls-books li { margin: 1px 0; }
.cls-bauth { color: var(--muted); }
.cls-bpages { color: var(--muted); font-size: .85rem; }
.cls-private { color: var(--muted); font-style: italic; font-size: .86rem; }
/* Pašalinimo (×) mygtukas paslėptas; matomas tik „Tvarkyti" režime */
.cls-rm { display: none; border: none; background: transparent; color: var(--danger, #d9594a);
  cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 6px;
  min-width: 24px; min-height: 24px; align-items: center; justify-content: center; }
.cls-rm:hover { opacity: .7; }
.cls-roster.manage .cls-rm { display: inline-flex; }
.cls-rmcol { width: 1%; }
.cls-rmbox { display: flex; flex-direction: column; gap: 7px;
  background: rgba(217, 89, 74, .08); border: 1px solid rgba(217, 89, 74, .4);
  border-radius: 8px; padding: 9px 12px; font-size: .9rem; }
.cls-rmrow2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cls-rmpw { padding: 6px 10px; max-width: 200px; }
.cls-rmmsg:empty { display: none; }

.cls-mine { margin-top: 14px; }
.cls-mine-h { font-size: .95rem; margin: 6px 0; }
.cls-mine-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 8px; }
.cls-mine-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cls-mine-lit { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.cls-mine-info { flex: 1 1 200px; }
.cls-share-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }

/* Klasės literatūros sąrašas (mokytojo redagavimo vaizdas) */
.cls-lists { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.cls-litsec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cls-lith { margin: 0 0 8px; font-size: .95rem; }
.cls-litlist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cls-litlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 8px; background: var(--accent-soft); border-radius: 7px; font-size: .92rem; }
.cls-litlist li.cls-empty { background: transparent; padding: 2px 0; }
.cls-litrm { border: none; background: transparent; color: var(--danger, #d9594a);
  cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 4px; min-width: 22px; }
.cls-litrm:hover { opacity: .7; }
.cls-litadd { display: flex; gap: 8px; flex-wrap: wrap; }
.cls-litq { flex: 1 1 200px; padding: 7px 11px; }
.cls-litresults { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.cls-litres { text-align: left; border: 1px solid var(--line); background: var(--card);
  border-radius: 7px; padding: 7px 10px; cursor: pointer; color: inherit; font-size: .9rem; }
.cls-litres:hover { border-color: var(--accent); }
.cls-litmanual { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cls-litmanual input { flex: 1 1 160px; padding: 7px 11px; }
.cls-litmsg:empty { display: none; }
.cls-litmsg { margin-top: 6px; }

/* Klasės literatūra – mokinio/tėvo checklistas (rodoma „Klasės" skiltyje) */
.clit-hint { margin: 0; color: var(--muted); font-size: .82rem; }
/* Vaiko režimo juosta „Ką perskaityti klasei" – numatytai suskleista.
   Spalvos atkartoja .clit-badge, kad vaikas ir tėvas matytų tą pačią kalbą. */
.kid-lit { margin-bottom: 10px; }
.kid-lit.hidden { display: none; }
.kid-lit-bar { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; font: inherit; color: inherit; cursor: pointer; }
.kid-lit-bar:hover { border-color: var(--accent); }
.kid-lit-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kid-lit-t { font-weight: 700; }
.kid-lit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.kid-lit-chip { font-weight: 700; font-size: .8rem; padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; }
.kid-lit-chip.required { background: var(--accent-soft); color: var(--accent); }
.kid-lit-chip.recommended { background: rgba(120, 120, 120, .14); color: var(--muted); }
/* Ta pati žalia kaip .cls-req.ok (mokytojo lentelėje) – „viskas padaryta" */
.kid-lit-chip.done { background: #e3f2e8; color: var(--ok, #3d8b57); }
.kid-lit-warn { font-weight: 700; font-size: .8rem; padding: 2px 9px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger); white-space: nowrap; }
.kid-lit-caret { color: var(--muted); flex: none; }
.kid-lit-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.kid-lit-body.hidden { display: none; }
@media (max-width: 560px) {
  /* Siaurame ekrane: 1 eilutė – pavadinimas + rodyklė, 2 eilutė – žetonai.
     Be `order` rodyklė nukristų į atskirą trečią eilutę. */
  .kid-lit-bar { flex-wrap: wrap; }
  .kid-lit-t { flex: 1 1 auto; }
  .kid-lit-caret { order: 1; }
  .kid-lit-chips { order: 2; margin-left: 0; flex-basis: 100%; }
}

.clit-sec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.clit-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.clit-badge { font-weight: 700; font-size: .82rem; padding: 2px 9px; border-radius: 999px; }
.clit-badge.required { background: var(--accent-soft); color: var(--accent); }
.clit-badge.recommended { background: rgba(120, 120, 120, .14); color: var(--muted); }
.clit-prog { color: var(--muted); font-size: .85rem; font-weight: 600; }
.clit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.clit-item { display: flex; align-items: baseline; gap: 8px; font-size: .92rem; }
.clit-mark { width: 1em; text-align: center; flex: none; }
.clit-item.done .clit-mark { color: var(--ok, #3d8b57); }
.clit-item.done .clit-txt { text-decoration: line-through; color: var(--muted); }
.clit-item.planned .clit-mark { color: var(--accent); }
.clit-item.todo .clit-mark { color: var(--muted); }
.clit-auth { color: var(--muted); }
.clit-due { font-size: .78rem; color: var(--muted); white-space: nowrap; margin-left: auto; }
.clit-due.overdue { color: var(--danger, #d9594a); font-weight: 600; }
.clit-item.overdue .clit-txt { color: var(--danger, #d9594a); }

/* Klasės suvestinės juostelė (roster viršuje) */
.cls-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.cls-sum-tile { flex: 1 1 120px; min-width: 110px; background: var(--accent-soft);
  border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.cls-sum-v { font-size: 1.3rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.cls-sum-v.cls-sum-name { font-size: 1rem; }
.cls-sum-l { font-size: .76rem; color: var(--muted); }

/* Roster: privalomų progreso stulpelis */
.cls-req.behind { color: var(--danger, #d9594a); font-weight: 700; }
.cls-req.ok { color: var(--ok, #3d8b57); font-weight: 700; }

/* Vaizdas „per knygą" */
.cls-bs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cls-bs-row { display: flex; flex-direction: column; gap: 3px; }
.cls-bs-top { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; }
.cls-bs-count { color: var(--muted); font-weight: 600; white-space: nowrap; }
.cls-bs-track { height: 8px; background: var(--line); border-radius: 5px; overflow: hidden; }
.cls-bs-fill { height: 100%; background: var(--accent); border-radius: 5px; }
.cls-bs-note { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }

/* Aktyvumo grafikas (stulpeliai) */
.cls-act-h { font-size: .9rem; color: var(--muted); margin: 8px 0; }
.cls-act-chart { display: flex; align-items: flex-end; gap: 5px; height: 120px; overflow-x: auto; padding-bottom: 2px; }
.cls-act-col { flex: 1 1 0; min-width: 22px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; height: 100%; justify-content: flex-end; }
.cls-act-bar-wrap { width: 100%; flex: 1 1 auto; display: flex; align-items: flex-end; }
.cls-act-bar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.cls-act-n { font-size: .72rem; color: var(--muted); }
.cls-act-m { font-size: .68rem; color: var(--muted); white-space: nowrap; }

/* Literatūros sąrašo redaktorius: terminai + spausdinimas */
.cls-littxt { flex: 1 1 auto; }
.cls-duewrap { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.cls-duedate { padding: 2px 5px; font-size: .82rem; border: 1px solid var(--line); border-radius: 6px; }
.cls-litactions { margin-top: 6px; }

/* Vaiko režime klasių skiltis nerodoma (tai tėvų/mokytojo įrankis) */
body.kid-mode #classes-link { display: none; }

/* Demonstracinės versijos juosta (rodoma tik demo sesijai). Tekstas TAMSUS,
   ne baltas: baltas ant --gold davė tik 2,15:1 (WCAG AA reikia 4,5) – ryškiausia
   vieta demonstracijai skirtų lankytojui, tad kontrastas čia ypač svarbus.
   FIKSUOTA tamsi spalva, NE var(--ink): --gold abiejose temose lieka šviesus
   (šviesi #F59E0B, tamsi #FBBF24), tad --ink (kuris tamsioje temoje pats
   tampa šviesus) čia duotų 1,39:1. Fiksuota #1F1400 – 8,44 / 10,86. */
.demo-banner { display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; background: var(--gold, #B5801F); color: #1F1400; padding: 8px 16px;
  font-size: .92rem; text-align: center; }
.demo-banner.hidden { display: none; }
.demo-banner b { font-weight: 700; }
.demo-banner .demo-cta { background: #1F1400; color: #fff; font-weight: 700; padding: 5px 13px; }
.demo-banner .demo-cta:hover { background: #3a2900; }
/* Išėjimas iš demo – kontūrinis (lengvesnis nei tamsus CTA), bet aiškiai matomas */
.demo-banner .demo-exit,
.demo-banner .demo-exit:hover { background: transparent; color: #1F1400; font-weight: 600;
  padding: 5px 13px; border: 1.5px solid rgba(31, 20, 0, .55); }
.demo-banner .demo-exit:hover { background: rgba(31, 20, 0, .12); border-color: #1F1400; }

/* Paauglio (14+) savarankiška paskyra: jis pats – vienintelis skaitytojas,
   tad slepiam „pridėti kitą skaitytoją" formą (profilį redaguoja per modalą) ir
   vaiko režimą (jis pats jau yra skaitytojas – režimas beprasmis). */
.self-account .children-card .child-add,
.self-account .children-card .avatar-row,
.self-account #kid-btn { display: none; }

/* Registracijos paskyros tipo pasirinkimas (Šeimos / Paauglio 14+) */
.acct-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.acct-toggle.hidden { display: none; }
.acct-opt { display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.acct-opt strong { font-size: .95rem; }
.acct-opt span { font-size: .78rem; opacity: .7; }
.acct-opt:hover { border-color: var(--accent); }
.acct-opt.active { border-color: var(--accent); background: var(--accent-soft); }

/* ===================================================================
   MOKYTOJO PUSLAPIS (/mokytojams) – atskiras rinkodaros puslapis mokykloms.
   Naudoja esamus .lp-* / .btn / .lp-card stilius; čia tik puslapiui specifiška.
   =================================================================== */
.mok-page { max-width: 1000px; margin: 0 auto; padding: 0 16px 40px; }
.mok-header { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 0; margin-bottom: 4px; flex-wrap: wrap; }
.mok-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.mok-brand img { width: 48px; height: 48px; border-radius: 12px; box-shadow: var(--shadow); }
.mok-brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--accent); }
[data-theme="dark"] .mok-brand-name { color: var(--accent-dark); }
.mok-nav { display: inline-flex; gap: 8px; align-items: center; }

/* Skiltis su „už ką mokytojui" – ženkliukas virš hero */
.mok-eyebrow { display: inline-block; background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 14px; margin-bottom: 6px; }

/* Kortelių tinklelis – tvarkingi 2 stulpeliai (2×2, 4 kortelės) */
.mok-grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin: 22px 0; }

/* „Ką mokytojas mato / ko nemato" – stipriausias pardavimo argumentas */
.mok-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
.mok-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; }
.mok-col h3 { margin: 0 0 12px; font-size: 1.05rem; }
.mok-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.mok-col li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; font-size: .95rem; }
.mok-col li::before { flex: 0 0 auto; font-weight: 700; }
.mok-see li::before { content: "✓"; color: var(--accent); }
.mok-hide li::before { content: "✕"; color: var(--muted); }
.mok-hide { background: var(--bg2); }
.mok-hide li { color: var(--muted); }

.mok-cta-band { text-align: center; background: var(--accent-soft); border-radius: var(--radius);
  padding: 28px 24px; margin: 28px 0 8px; }
.mok-cta-band h2 { margin: 0 0 8px; }
.mok-cta-band p { color: var(--muted); max-width: 520px; margin: 0 auto 16px; }
.mok-note { color: var(--muted); font-size: .9rem; margin-top: 12px; }

@media (max-width: 640px) {
  .mok-grid, .mok-compare { grid-template-columns: 1fr; }
}

/* M1 (organinio augimo auditas): populiariausių knygų puslapis – 4 blokai
   (amžiaus grupės) su TOP 10 sąrašais, realūs skaitymo duomenys. */
.top-books-root { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 8px 0 28px; }
.top-books-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; }
.top-books-block h2,
.top-books-block h3 { margin: 0 0 12px; font-size: 1.15rem; }
.top-books-list { margin: 0; padding-left: 22px; }
.top-books-list li { margin: 0 0 9px; line-height: 1.4; }
.top-books-title { font-weight: 700; }
.top-books-author { color: var(--muted); font-weight: 500; }
/* Kiek skirtingų skaitytojų perskaitė – konkretus skaičius daro sąrašą
   patikimą (ir cituojamą), ne šiaip „populiarių" knygų rinkinį. */
.top-books-readers { display: inline-block; margin-left: 4px; font-size: .78rem;
  font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Vidiniame rodinyje blokai jau yra kortelėje – be šešėlio, kad nebūtų
   „kortelė kortelėje" efekto; knyga paspaudžiama (veda į pridėjimo paiešką). */
#view-popular .top-books-block { box-shadow: none; }
/* display:block (ne inline/inline-block – naršyklės mygtukui `inline` ignoruoja):
   taip sąrašo numeris lygiuojasi su PIRMA pavadinimo eilute, o ne su paskutine
   (inline-block bazinė linija numerį nustumtų žemyn). Kartu visa eilutė
   paspaudžiama – didesnis taikinys pirštui. */
.top-books-pick { display: block; width: 100%; background: none; border: 0; padding: 0;
  margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 4px; }
.top-books-pick:hover .top-books-title { color: var(--accent); text-decoration: underline; }
.top-books-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pop-share-note { margin-top: 4px; }
@media (max-width: 640px) {
  .top-books-root { grid-template-columns: 1fr; }
}