/* Preluat din prototipul validat in ticketul 04. Comutatorul de variante a fost scos. */
:root{
    color-scheme:light;
    /* Cald și prietenos, fără să fie zgomotos: cremă, verde de grădină,
       corai în loc de roșu, roz pentru desert. O singură temă, deliberat:
       aplicația e pentru părinții unei clase pregătitoare, nu pentru un terminal. */
    --bg:#fbf6ee; --surface:#fff; --surface-2:#f4ebdf; --ink:#2b2520; --ink-2:#7c6e60;
    --line:#e9dac6; --accent:#3d9a6b; --accent-soft:#ddf0e4; --warn:#cf6338; --warn-soft:#fbe5d9;
    --desert:#cf5f92; --soare:#e8a33d;
    /* Dunga din două în două rânduri. Două tonuri, fiindcă trece peste două
       fundaluri diferite: alb la celulele obișnuite, crem la coloana de total. */
    --zebra:#faf5ec; --zebra-2:#efe3d2;
    --glass:rgba(255,255,255,.74); --glass-line:rgba(255,255,255,.92); --glass-ink:#2b2520;
    --shadow:0 1px 2px rgba(120,90,50,.07),0 10px 28px rgba(120,90,50,.09);
    --display:"Fraunces",Georgia,serif;
    --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box}
  body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--ui);margin:0;
       padding:0 0 calc(96px + env(safe-area-inset-bottom, 0px) + var(--jos, 0px));
       -webkit-font-smoothing:antialiased}
  .wrap{max-width:580px;margin:0 auto;padding:0 14px}
  .wide{max-width:960px}
  h1,h2,h3{text-wrap:balance;margin:0}
  button{font:inherit}

  /* ---- bara de sus a aplicatiei ---- */
  .top{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);
       display:flex;align-items:center;gap:10px;padding:9px 14px}
  .top .id{flex:1;min-width:0;line-height:1.2}
  .top .lbl{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
  .top .kid{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
            overflow:hidden;text-overflow:ellipsis}
  .chip{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;
        padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
        display:flex;align-items:center;gap:6px}
  .chip.due{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
  .chip.ic{padding:6px 9px;font-size:15px}

  /* ---- dock translucid, navigatia aplicatiei ---- */
  .dock{position:fixed;left:50%;transform:translateX(-50%);z-index:40;
        /* `--jos` vine din viewport.js: cât acoperă chenarul browserului.
           `env()` acoperă indicatorul de home. Ambele, fiindcă rezolvă lucruri
           diferite și niciunul singur nu ajunge pe iOS. */
        bottom:calc(14px + env(safe-area-inset-bottom, 0px) + var(--jos, 0px));
        transition:bottom .18s ease;
        display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
        background:var(--glass);border:1px solid var(--glass-line);
        -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
        box-shadow:0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35)}
  .dock button{background:none;border:none;color:var(--glass-ink);border-radius:999px;cursor:pointer;
               padding:7px 10px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;
               opacity:.7;transition:opacity .18s,background .18s,padding .18s}
  .dock button .t{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .22s ease}
  .dock button.on{opacity:1;background:var(--accent);color:#fff}
  /* Doar tabul activ își arată numele. Cu șase taburi, deschiderea tuturor la
     hover ieșea din ecran și bara nu mai putea fi folosită. */
  .dock button.on .t{max-width:130px}
  .dock button:hover{opacity:1}
  .dock .em{width:21px;height:21px;flex:0 0 auto;display:block}

  /* ---- comun ---- */
  /* Fâșia cu numărătoarea inversă. Stă deasupra tabului, nu în el: e o
     urgență care nu ține de rubrica în care s-a nimerit omul. Sub o oră trece
     pe portocaliu - singura schimbare de culoare din ecranul părintelui care
     înseamnă „acum". */
  .cron{display:flex;align-items:center;gap:9px;margin:12px 0 0;padding:10px 13px;
        border-radius:13px;font-size:13.5px;line-height:1.35;
        background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
  .cron .cronic{width:17px;height:17px;flex:0 0 auto;color:var(--ink-2)}
  .cron b{color:var(--ink);font-weight:700;white-space:nowrap}
  .cron.urgent{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
  .cron.urgent .cronic,.cron.urgent b{color:var(--warn)}
  /* Caseta de anunțuri. Discretă cât timp e o ofertă, și un singur rând după
     ce e pornită: o setare care rămâne pe ecran cât un card e o setare care
     pare că mai are nevoie de ceva. */
  .anunt{display:flex;align-items:center;gap:11px;margin:12px 0 0;padding:13px 14px;
         border-radius:14px;font-size:13px;line-height:1.4;
         background:var(--surface);border:1px dashed var(--line);color:var(--ink-2)}
  .anunt .anuntic{width:20px;height:20px;flex:0 0 auto;color:var(--accent)}
  .anunt > div{flex:1;min-width:0}
  .anunt b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
  .anunt .pill{flex:0 0 auto}
  .anunt.pornit{border-style:solid;border-color:var(--accent-soft);background:var(--accent-soft)}
  .anunt.pornit > span{flex:1;min-width:0}
  /* Unde se duc banii. Rânduri apăsabile, nu text de citit: un IBAN copiat
     dintr-o apăsare nu se poate greși, unul citit de pe ecran și bătut la
     tastatură, da. */
  .platadet{margin:12px 0 0;border:1px solid var(--line);border-radius:14px;
            background:var(--surface);overflow:hidden}
  .pdcap{padding:11px 14px 9px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
         color:var(--ink-2);font-weight:600;border-bottom:1px solid var(--line)}
  .pdrand{display:flex;align-items:baseline;gap:10px;width:100%;padding:11px 14px;border:0;
          border-bottom:1px solid var(--line);background:none;text-align:left;font:inherit;
          color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pdrand:last-of-type{border-bottom:0}
  /* Lățime fixă la etichete: altfel valorile pornesc de la trei margini
     diferite și rândurile nu se mai citesc în coloană. */
  .pdk{flex:0 0 62px;font-size:12px;color:var(--ink-2)}
  .pdv{flex:1;min-width:0;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
  /* IBAN-ul are 24 de semne și trebuie să încapă pe un rând pe un telefon de
     390px: rupt în două, se citește greu și se copiază greșit de mână. */
  .pdv.iban{font-size:12px;letter-spacing:0}
  .pdcop{flex:0 0 auto;font-size:11.5px;color:var(--accent);font-weight:600}
  .pdrand.gata .pdcop{color:var(--accent)}
  .pdrand.gata{background:var(--accent-soft)}
  .pdnota{padding:0 14px 12px;font-size:12.5px;color:var(--ink-2)}
  /* Un rând de jurnal e o propoziție, nu o pereche nume/valoare: se desface pe
     câte rânduri îi trebuie, în loc să taie sfârșitul faptei. */
  .li.jr{align-items:flex-start}
  .li.jr .fam1{font-weight:400;white-space:normal;line-height:1.35}
  .li.jr .fam1 b{font-weight:700}
  /* Eticheta de deasupra unui câmp, în formularele superadminului. Fără ea,
     patru casete goale una sub alta nu spun care e care. */
  .edlbl{display:block;font-size:12px;color:var(--ink-2);margin-bottom:2px}
  .edlbl input{margin-top:4px}
  .counter{background:var(--accent-soft);border-radius:14px;padding:13px 15px;margin:14px 0;font-size:14px}
  .counter b{font-size:17px}
  .counter .you{display:block;margin-top:3px;color:var(--warn);font-weight:600}
  h2.sec{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
         margin:22px 0 9px;font-weight:600}
  .later{background:var(--surface-2);border:1px dashed var(--line);border-radius:13px;padding:14px;
         color:var(--ink-2);font-size:13.5px;margin:12px 0 0}
  .later b{color:var(--ink)}
  .big{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1}
  .num{font-variant-numeric:tabular-nums}

  /* ---- zile, mod saptamanal ---- */
  .day{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px 13px;
       margin-bottom:9px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}
  .day .dt{min-width:54px}
  .day .dow{font-weight:700;font-size:15px}
  .day .dnum{color:var(--ink-2);font-size:13px}
  .day .menu{flex:1;font-size:13.5px;color:var(--ink-2);line-height:1.4}
  .day .menu .main{color:var(--ink);font-weight:600;display:block;margin-bottom:1px}
  .sw{width:56px;height:33px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
      position:relative;flex:0 0 auto;cursor:pointer;transition:.15s;margin-top:2px}
  .sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;
             background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s}
  .sw[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
  .sw[aria-checked="true"]::after{left:27px}
  .day.locked,.day.past,.day.free{opacity:.6}
  .tag{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--ink-2);
       white-space:nowrap;align-self:center}
  .wkbtn{background:none;border:1px dashed var(--line);color:var(--accent);border-radius:11px;
         padding:8px 12px;font-size:13px;cursor:pointer;margin-bottom:10px;font-weight:600}

  /* ---- tabel ---- */
  .gridwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
            border-radius:13px;background:var(--surface)}
  table.g{border-collapse:collapse;width:100%;font-size:13px}
  table.g th,table.g td{border:1px solid var(--line);padding:6px 7px;text-align:center;white-space:nowrap}
  table.g th.nm,table.g td.nm{text-align:left;position:sticky;left:0;background:var(--surface);z-index:2;
                              min-width:152px;font-weight:500;line-height:1.25}
  td.nm .fam{display:block;font-weight:600}
  td.nm .pre{display:block;color:var(--ink-2);font-size:13px;font-weight:600}
  tr.me td{background:var(--accent-soft)}
  tr.me td.nm .pre{color:var(--ink)}
  table.g thead th{background:var(--surface-2);font-size:11.5px;line-height:1.25;font-weight:600;
                   vertical-align:bottom}
  table.g thead th .fel{display:block;font-weight:400;color:var(--ink-2);font-size:10.5px;
                        max-width:94px;white-space:normal}
  .yes{color:var(--accent);font-weight:700}
  .no{color:var(--line)}
  /* Căsuța apăsabilă din tabel. Arată ca textul pe care îl înlocuiește - rostul
     tabelului e imaginea de ansamblu, iar douăzeci de rânduri de butoane
     desenate ca butoane ar face-o ilizibilă - dar umple toată celula, ca ținta
     să fie cât căsuța, nu cât semnul dinăuntru. */
  table.g td.cbif{padding:0}
  .bifa{display:block;width:100%;min-height:30px;padding:6px 7px;border:0;background:none;
        font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  @media (hover:hover){ .bifa:hover{background:var(--accent-soft)} .pdrand:hover{background:var(--surface-2)} }
  .bifa:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  h2.sec .hint{text-transform:none;letter-spacing:0;font-weight:400;opacity:.75;
               margin-left:6px;font-size:11.5px}
  td.tap{cursor:pointer}
  td.lock{background:var(--surface-2);color:var(--ink-2)}
  .foot{font-size:12.5px;color:var(--ink-2);margin:9px 0 0}

  /* ---- zilnic, o intrebare pe rand ---- */
  .poll{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 18px 18px;
        box-shadow:var(--shadow);text-align:center;margin-top:14px}
  .poll .when{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
  .poll .q{font-size:27px;margin:7px 0 15px;line-height:1.15}
  .poll .dish{background:var(--surface-2);border-radius:13px;padding:13px;font-size:14px;text-align:left;
              margin-bottom:18px;line-height:1.5}
  .poll .dish b{display:block;font-size:15px;margin-bottom:2px}
  .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .btns button{padding:16px 0;font-size:17px;font-weight:700;border-radius:15px;border:1px solid var(--line);
               cursor:pointer;background:var(--surface-2);color:var(--ink)}
  .btns .da{background:var(--accent);border-color:var(--accent);color:#fff}
  .btns .da.on{outline:3px solid var(--accent);outline-offset:2px}
  .btns .nu.on{outline:3px solid var(--warn);outline-offset:2px}
  .prog{display:flex;gap:5px;justify-content:center;margin:17px 0 4px}
  .prog i{width:22px;height:5px;border-radius:3px;background:var(--line)}
  .prog i.done{background:var(--accent)}
  .prog i.cur{background:var(--ink)}
  .skipall{margin-top:14px;font-size:13px;color:var(--ink-2)}
  .skipall button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;font-size:13px}

  /* ---- liste (portofel, incasari, declarat, revendicare) ---- */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;
        box-shadow:var(--shadow)}
  .li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);
      width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;
      font:inherit;color:inherit}
  .li:last-child{border-bottom:none}
  .li .nmb{flex:1;line-height:1.25;min-width:0}
  .li .fam{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em}
  .li .pre{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em}
  .li .desc{display:block;color:var(--ink-2);font-size:12.5px;font-weight:400;margin-top:2px}
  .li .val{font-weight:700;white-space:nowrap}
  .li .val small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-2);text-align:right}
  .li.act{cursor:pointer}
  .li.taken{background:var(--accent-soft)}
  .li.taken .fam,.li.taken .pre{color:var(--ink-2)}
  .ok{color:var(--accent)} .bad{color:var(--warn)}
  .go{color:var(--accent);font-weight:700;font-size:14px;white-space:nowrap}
  .pill{border:none;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;
        background:var(--accent);color:#fff}
  .pill.ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}

  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}
  /* `min-width:0`: o celulă de grilă refuză implicit să scadă sub lățimea
     conținutului ei, iar la o sumă lungă scrisă în Fraunces de 23px asta ar
     împinge rândul în afara ecranului. Cu numărătorile de acum nu se vede;
     contează când în casete ajung bani. */
  .kpi{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;
       display:flex;flex-direction:column}
  /* Titlul ține loc de două rânduri chiar când are unul singur: altfel cifra din
     caseta cu titlu scurt stătea mai sus decât surorile ei. */
  .kpi .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
          display:flex;gap:5px;align-items:flex-start;line-height:1.25;min-height:2.5em}
  .kpi .k svg{width:14px;height:14px;flex:0 0 auto;margin-top:.5px;fill:none;
              stroke:currentColor;stroke-width:1.8}
  .kpi .ksub{margin-top:auto}
  .kpi .v{font-family:var(--display);font-weight:700;font-size:23px;margin-top:3px;letter-spacing:-.02em}

  .hero{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 18px;
        box-shadow:var(--shadow);text-align:center}
  .hero .when{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
  /* Săgețile stau pe rândul cu data, nu sub cifră: ziua e lucrul pe care-l
     schimbi, iar butoanele trebuie să fie lângă ea ca să se vadă asta. */
  .hero .zinav{display:flex;align-items:center;gap:8px}
  .hero .zinav .when{flex:1;min-width:0}
  .hero .zinav button{flex:none;width:34px;height:34px;border-radius:50%;
                      border:1px solid var(--line);background:var(--bg);color:var(--ink);
                      cursor:pointer;font-size:16px;line-height:1}
  .hero .zinav button[disabled]{opacity:.3;cursor:default}
  .hero .n{font-size:64px;margin:4px 0 0}
  .hero .u{color:var(--ink-2);font-size:15px}
  .hero .sub{color:var(--ink-2);font-size:12.5px;margin:2px 0 14px;opacity:.85}
  .hero .row{display:flex;gap:8px;justify-content:center}

  .backlink{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;
            font-size:13.5px;padding:0;margin:16px 0 0}

  .nav{display:flex;align-items:center;gap:8px;margin:16px 0 2px}
  .nav .t{flex:1;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
          font-weight:600}
  .nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
              background:var(--surface);color:var(--ink);cursor:pointer;font-size:15px;line-height:1}
  .nav button[disabled]{opacity:.35;cursor:default}
  /* Butoanele se rup pe mai multe rânduri, iar numele cere un minim de lățime.
     Trebuie amândouă: `.nmb` are `flex:1 1 0%`, deci bază zero - primește doar
     ce rămâne, iar `.pay` își ține lățimea de conținut și nu e forțat niciodată
     să se rupă. Pe un telefon, un rând cu doi tutori (nume, resetează, nume,
     resetează, Încă un link) stivea numele copilului la 25px: literă cu literă,
     pe verticală. Cu un minim pe nume, butoanele sunt cele care cedează. */
  .pay{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .li .nmb{min-width:min(9.5rem, 45%)}
  .pay input{width:74px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;
             background:var(--bg);color:var(--ink);font:600 14px var(--ui);text-align:right}
  .credit{color:var(--accent);font-weight:700}
  .more{width:100%;background:none;border:1px dashed var(--line);color:var(--accent);
        border-radius:12px;padding:11px;font-size:13.5px;font-weight:600;cursor:pointer;margin-top:10px}
  table.p{border-collapse:collapse;width:100%;font-size:13px}
  table.p th,table.p td{border:1px solid var(--line);padding:8px 9px;text-align:center}
  table.p th.nm,table.p td.nm{text-align:left;font-weight:600}
  table.p thead th{background:var(--surface-2);font-size:11.5px;font-weight:600}
  .perm{border:none;border-radius:999px;padding:7px 12px;font-size:11.5px;font-weight:700;cursor:pointer}

  /* Degetul are nevoie de mai mult decât ochiul. Butoanele astea trebuie să
     rămână mici ca desen - unul e cuvânt într-o propoziție, celelalte sunt
     douăzeci de celule într-o grilă - dar zona pe care o prinde degetul se
     întinde nevăzut la 44px, cât cere Apple. Pe grila de permisiuni, o apăsare
     greșită schimbă cine ce poate face. */
  .skipall button,.perm{position:relative}
  .skipall button::after,.perm::after{content:'';position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px}

  :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

@media print{
  .dock,.top,.pill,.later,.counter,.kpis,.nav,.zinav button{display:none!important}
  body{padding:0;background:#fff;color:#000}
  .hero{border:none;box-shadow:none;text-align:left}
  .li{break-inside:avoid}
}

/* ---- meniul: felul 1, felul 2, desertul, mereu în aceeași ordine ---- */
.mline,.dline,.tline{display:flex;gap:6px;align-items:baseline;line-height:1.35}
.mline{font-size:13.5px;color:var(--ink)}
.mline.fel1,.mline.fel2{font-weight:600}
.mline.fel3{font-weight:400;color:var(--ink-2)}
.dline{font-size:14.5px;text-align:left}
.dline.fel1,.dline.fel2{font-weight:600}
.dline.fel3{font-weight:400;color:var(--ink-2)}
.tline{font-size:11px;color:var(--ink-2);white-space:normal;text-align:left;gap:4px}
/* `.tline` e flex, deci `text-align` n-are ce centra. Felurile de mâncare stau
   la stânga, unde se citesc mai ușor pe două rânduri; un număr singur sub o zi
   centrată trebuie să stea sub ea. */
.tline.centrat{justify-content:center}
.tline.fel1,.tline.fel2{color:var(--ink);font-weight:600}
.tline.fel3{color:var(--ink-2);font-weight:400}
.ic{flex:0 0 auto;font-size:.95em;line-height:1.2}
.gol{color:var(--ink-2);font-style:italic}
.pret{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--ink-2);font-size:13px}

/* Iconița din capul unui rând de setări: reper vizual, nu informație nouă, deci
   stă potolită și nu ia focus de la titlu. */
.liic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
      background:var(--surface-2);color:var(--ink-2)}
.liic svg{width:17px;height:17px}

/* ---- numerotare și nume pe un rând ---- */
.nr{flex:0 0 auto;min-width:22px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fam1{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.li .desc{display:block;color:var(--ink-2);font-size:12.5px;font-weight:400;margin-top:2px}

/* ---- data mare în modul Zilnic ---- */
.poll .data{font-size:30px;margin:4px 0 16px;line-height:1.1}
.poll .when{margin-bottom:2px}

/* ---- calendarul lunii ---- */
.calwrap{background:var(--surface);border:1px solid var(--line);border-radius:15px;
         padding:14px;margin-top:12px;box-shadow:var(--shadow)}
.calhead b{color:var(--ink)}
.caldow,.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.caldow i{font-style:normal;font-size:10.5px;color:var(--ink-2);text-align:center;padding-bottom:2px}
/* Doar celulele goale ale grilei. Fără `>`, regula prindea și textul din caseta
   de hover și-l făcea pătrat, cu `aspect-ratio: 1`. */
.cal>i{font-style:normal;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
       border-radius:8px;font-size:12px;font-variant-numeric:tabular-nums;background:var(--surface-2);
       color:var(--ink-2)}
.cal>i.fara{background:var(--surface-2);color:var(--ink-2)}
.cal>i.nimic{background:transparent;color:transparent}
.callegend{display:flex;gap:12px;margin-top:10px;font-size:11.5px;color:var(--ink-2);flex-wrap:wrap}
.callegend span{display:flex;align-items:center;gap:5px}
.callegend i{width:11px;height:11px;border-radius:3px;display:block}
.callegend i.da{background:var(--accent)}
.callegend i.nu{background:var(--warn-soft);border:1px solid var(--warn)}
.callegend i.fara{background:var(--surface-2);border:1px solid var(--line)}


/* ---- caseta cu linkul generat, se arată o singură dată ---- */
.linkbox{background:var(--accent-soft);border:1px solid var(--accent);border-radius:15px;
         padding:15px;margin:14px 0}
.lbhead{font-size:14px;margin-bottom:9px}
.lburl{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px;
       font:600 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;
       user-select:all;-webkit-user-select:all}
.lbrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.lbnota{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.perm.e{background:var(--accent);color:#fff}
.perm.v{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.perm.n{background:none;color:var(--line);border:1px solid var(--line)}

/* ---- pictograme SVG de meniu ---- */
svg.ic{width:1.05em;height:1.05em;flex:0 0 auto;color:var(--ink-2);margin-top:.12em}
/* felul 1 în verde, felul 2 neutru mai închis, desertul roz */
.fel1 svg.ic{color:var(--accent)}
.fel2 svg.ic{color:var(--ink)}
.fel3 svg.ic{color:var(--desert)}
.gol .ic{width:1.05em;height:1.05em;display:inline-block}

/* ---- tabel: capul fix pe ambele axe ---- */
.gridwrap{max-height:calc(100dvh - 250px - var(--jos, 0px));overflow:auto}
table.g thead th{position:sticky;background:var(--surface-2);z-index:3;padding:6px 8px;
                 min-width:112px;vertical-align:middle}
table.g thead tr.hz th{top:0;height:32px;font-size:12.5px;white-space:nowrap}
/* Câte un rând pentru fiecare fel. Fără linie despărțitoare între ele, ca să se
   citească tot ca un bloc, și cu spațiu strâns: mai bine felurile aproape unul
   de altul decât înghesuite sus și cu un gol mare dedesubt. */
table.g thead tr.hm th{vertical-align:top;padding:1px 8px;border-top:0;border-bottom:0}
table.g thead tr.f-soup th{padding-top:6px}
table.g thead tr.f-dessert th{padding-bottom:7px;border-bottom:1px solid var(--line)}
table.g thead tr.hm th:empty{padding:0}
/* celulele goale din al doilea rând de antet țin coloanele acoperite pe toată
   înălțimea lui, ca rândurile de dedesubt să nu se vadă prin el */
table.g thead .gol2{padding:0;border-top:0}
table.g thead th.nm{left:0;z-index:5;text-align:center;vertical-align:middle}
table.g thead th.tot{right:0;z-index:5;text-align:center}
/* rămâne `table-cell`: `display:flex` pe un <td> scoate celula din aspectul de
   tabel și strică și alinierea rândurilor, și `position:sticky` în Safari. */
table.g td.nm{position:sticky;left:0;z-index:2;background:var(--surface);min-width:168px}
table.g td.nm .nmrow{display:flex;align-items:baseline;gap:8px}
tr.me td.nm{background:var(--accent-soft)}
table.g td.tot{position:sticky;right:0;background:var(--surface-2);font-weight:700;z-index:2}
table.g thead th.inch{opacity:.5}
tr.totrow td{background:var(--surface-2);font-weight:700;position:sticky;bottom:0;z-index:2}

/* Din două în două rânduri, ca ochiul să ajungă de la nume până la total fără
   să alunece pe rândul vecin. Foarte palidă: pe douăzeci de copii, o zebră
   vizibilă obosește mai tare decât ajută.
   Coloanele lipite își desenează propriul fundal, deci trebuie vopsite și ele,
   altfel dunga s-ar rupe exact la nume și la total, unde e nevoie de ea.
   Rândul de totaluri și rândul propriului copil ies din calcul: amândouă au deja
   o culoare care înseamnă ceva, iar selectorul de aici ar fi bătut-o la
   specificitate. `:not()` e mai sigur decât o luptă de specificități, fiindcă nu
   depinde de ordinea regulilor în fișier. */
table.g tbody tr:nth-child(even):not(.totrow):not(.me) td{background:var(--zebra)}
table.g tbody tr:nth-child(even):not(.totrow):not(.me) td.tot{background:var(--zebra-2)}
table.p tbody tr:nth-child(even) td{background:var(--zebra)}
tr.totrow td.nm{z-index:3}

/* ---- căsuțe bifabile în rândul propriu ---- */
td.celula{cursor:pointer;padding:5px}
.cb{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    border-radius:7px;font-size:14px;font-weight:700;border:1.5px solid var(--line);
    transition:.14s}
.cb.da{background:var(--accent);border-color:var(--accent);color:#fff}
.cb.nu{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
td.celula:hover .cb{transform:scale(1.12)}

/* ---- butoane de umplere, ca stare ---- */
.bloc{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 10px}
.wkbtn.on{background:var(--accent);border-color:var(--accent);border-style:solid;color:#fff}

/* „Mai arată-mi și ce a fost" - dar în sus, spre trecut. Stă deasupra listei,
   fiindcă acolo se va deschide, și e discret: e o ieșire din drum, nu un pas
   din el. */
.maimult{display:block;width:100%;background:none;border:1px dashed var(--line);
         border-radius:11px;padding:9px 12px;margin-bottom:10px;color:var(--ink-2);
         font-size:13px;font-weight:600;cursor:pointer;text-align:center}
.maimult:active{background:var(--surface-2)}
@media (hover:hover){.maimult:hover{border-color:var(--accent);color:var(--accent)}}

/* ---- calendar: luna mare, zilele în căsuțe ---- */
.calluna{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);
         letter-spacing:-.01em;margin-right:6px;text-transform:capitalize}
.calhead{display:flex;align-items:baseline;gap:4px;margin-bottom:10px;font-size:13px}
.cal>i{position:relative;border:1px solid var(--line);background:var(--surface-2)}
/* numărul zilei stă în colț, ca la un calendar; bifa rămâne în centru */
.cal>i{align-items:flex-start;justify-content:flex-start;padding:3px 0 0 4px}
.cal>i>b{font-weight:600;font-size:9.5px;line-height:1;opacity:.75}
.cal>i.wknd{background:transparent;border-color:transparent;color:var(--ink-2);opacity:.4}
.cal>i.nimic{background:transparent;border-style:dashed;color:var(--ink-2);opacity:.45}
.cal>i.trecut{opacity:.62}
.cal button.wknd{background:transparent;border-color:transparent;opacity:.4}

/* ---- plata declarată de părinte ---- */
.platabox{background:var(--surface);border:1px solid var(--line);border-radius:15px;
          padding:15px;margin:12px 0;box-shadow:var(--shadow)}
.pbsum{font-size:15px;margin-bottom:11px}
.pbsum b{font-family:var(--display);font-size:22px;margin-left:5px}
.pbrow{display:flex;gap:8px;flex-wrap:wrap}
.pbnota{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.asteapta{border:1.5px dashed var(--accent);background:transparent;border-radius:14px;
          padding:13px 15px;margin:12px 0;font-size:13.5px;color:var(--ink-2)}
.asteapta b{color:var(--accent)}
.val.asteptare{color:var(--accent);opacity:.75;font-style:italic}
.val.viitor{color:var(--ink-2);font-weight:400}

/* rândul unui părinte care a anunțat plata, dar n-a confirmat-o nimeni încă */
.li.declarat{border-left:3px solid var(--accent);
             background:repeating-linear-gradient(90deg,transparent,transparent 6px,
               var(--accent-soft) 6px,var(--accent-soft) 12px)}
.li.declarat .desc{font-size:14px;font-weight:600;color:var(--ink)}

/* ---- editarea unei zile de meniu ---- */
.li.col{flex-direction:column;align-items:stretch;gap:9px}
.edform{display:flex;flex-direction:column;gap:7px}
.edform input{padding:9px 11px;border:1px solid var(--line);border-radius:10px;
              background:var(--bg);color:var(--ink);font:14px var(--ui)}
.li.inchisa{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 7px,
            var(--surface-2) 7px,var(--surface-2) 14px)}
.li.inchisa .fam1{color:var(--ink-2)}
.li.trecut{opacity:.55}
.li .desc .mline{font-size:12.5px}

/* ---- rândul de copil, cu acordeon ---- */
/* Un catalog în care fiecare rând se poate desface. Capul de rând spune cine e
   și ce stare are; dedesubt se desface tot ce se poate face pentru el, ca să nu
   mai fie nevoie de trei liste și două taburi. */
.cr{border-bottom:1px solid var(--line)}
.cr:last-child{border-bottom:none}
.crcap{display:flex;align-items:center;gap:11px;padding:11px 14px;width:100%;
       background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.cr.deschis .crcap{background:var(--surface-2)}
@media (hover:hover){.crcap:hover{background:var(--surface-2)}}
.crnume{flex:1;min-width:0;line-height:1.3}
.crnume b{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.crnume span{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crbadge{flex:0 0 auto}
.bdg{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
     white-space:nowrap;border:1px solid transparent;font-variant-numeric:tabular-nums}
.bdg.dat{background:var(--warn-soft);color:var(--warn);border-color:#f0cdb9}
.bdg.cred{background:var(--accent-soft);color:var(--accent);border-color:#bfe3ce}
.bdg.zero{background:var(--surface-2);color:var(--ink-2)}
.bdg.astept{background:var(--surface);color:var(--accent);border-color:var(--accent);
            border-style:dashed}
.bdg.gol{background:var(--warn-soft);color:var(--warn);border-color:#f0cdb9}
.crzile{display:flex;gap:3px;flex:0 0 auto}
.crzile i{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;
          font-style:normal;font-size:10px;font-weight:700;background:var(--surface-2);
          color:var(--ink-2)}
.crzile i.on{background:var(--accent-soft);color:var(--accent)}
.crsag{flex:0 0 auto;color:var(--ink-2);font-size:12px;transition:transform .15s}
.cr.deschis .crsag{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.crsag{transition:none}}

.crcorp{padding:2px 14px 14px;background:var(--surface-2)}
.crsec{margin-top:13px}
.crsec:first-child{margin-top:4px}
.crsec h4{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
          margin:0 0 7px;font-weight:700}
.crlin{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
       font-size:13.5px;padding:3px 0}
.crlin span{color:var(--ink-2);min-width:0}
.crlin b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;flex:0 0 auto}
.crlin b.dat{color:var(--warn)}
.crlin b.cred{color:var(--accent)}
.crbtn{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;align-items:center}
.crbtn input{width:92px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;
             font:inherit;font-size:13px;background:var(--surface)}
/* Explicația stă sub formularul pe care îl explică, nu deasupra listei: acum e
   despre un copil anume, nu despre toată clasa. */
.crnota{margin-top:8px;font-size:12px;color:var(--ink-2);line-height:1.45}
.crbtn .pill{font-size:12.5px;padding:7px 13px}

/* Pe telefon nu încap și zilele, și pastila, și numele. Zilele pică: sunt o
   privire de ansamblu, iar pentru aia există tabul Tabel. Banii sunt o decizie. */
@media (max-width:560px){
  .crzile{display:none}
  .crcap{gap:9px;padding:10px 12px}
  .crnume b{font-size:14.5px}
  .crcorp{padding:2px 12px 12px}
}

/* ---- colțuri mai blânde și accente calde, cât să nu fie sever ---- */
.day,.card,.calwrap,.platabox,.kpi,.hero,.poll,.linkbox{border-radius:18px}
.poll{border-radius:22px}
h2.sec{color:var(--ink-2)}
h2.sec .num{color:var(--accent)}
.counter{border:1px solid var(--accent-soft)}
.kpi .v{color:var(--ink)}
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top .kid{font-family:var(--display)}
.hero .n{color:var(--accent)}

/* ---- dialoguri în stilul aplicației, nu alert() de browser ---- */
.dlgfundal{position:fixed;inset:0;z-index:80;background:rgba(43,37,32,.42);
           display:flex;align-items:center;justify-content:center;padding:20px;
           -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg{background:var(--surface);border-radius:22px;box-shadow:0 18px 50px rgba(80,55,30,.25);
     max-width:390px;width:100%;padding:22px;border:1px solid var(--line)}
.dlg .dtitlu{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;
             margin-bottom:7px}
.dlg .dtext{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.dlg input{width:100%;margin-top:14px;padding:12px 13px;border:1px solid var(--line);
           border-radius:12px;background:var(--bg);color:var(--ink);font:15px var(--ui)}
.dlg .drow{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.dlg.rau .dtitlu{color:var(--warn)}
.toast{position:fixed;left:50%;z-index:75;
       bottom:calc(84px + env(safe-area-inset-bottom, 0px) + var(--jos, 0px));
       transform:translateX(-50%);
       background:var(--ink);color:var(--bg);border-radius:999px;padding:11px 18px;
       font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);
       max-width:calc(100vw - 32px);text-align:center}
.toast.rau{background:var(--warn);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:sus .22s ease}
  @keyframes sus{from{opacity:0;transform:translate(-50%,10px)}}
}

/* ---- Zilnic: săgeți în jurul datei ---- */
.zinav{display:flex;align-items:center;gap:10px;justify-content:space-between}
.zinav>div{flex:1;min-width:0}
.zinav button{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);
              background:var(--surface-2);color:var(--ink);cursor:pointer;font-size:17px;line-height:1}
.zinav button[disabled]{opacity:.3;cursor:default}
.stareveche{padding:14px;border-radius:15px;background:var(--surface-2);color:var(--ink-2);
            font-weight:600;font-size:15px}
.stareveche.da{background:var(--accent-soft);color:var(--accent)}

/* ---- calendar: celule apăsabile, cu meniul la hover ---- */
.cal button{position:relative;aspect-ratio:1;display:flex;align-items:flex-start;
            justify-content:flex-start;padding:3px 0 0 4px;border-radius:8px;font:inherit;
            font-size:12px;font-variant-numeric:tabular-nums;cursor:default;
            border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.cal button.poate{cursor:pointer}
.cal button.poate:hover{outline:2px solid var(--accent);outline-offset:1px}
.cal button.da{background:var(--accent);border-color:var(--accent);color:#fff}
.cal button.da b{opacity:.7;color:#fff}
.cal button.nu{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.cal button.trecut{opacity:.62}
.cal button b{font-weight:600;font-size:9.5px;line-height:1;opacity:.75}
.cal button s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
              text-decoration:none;font-size:15px;font-weight:800;line-height:1}

.calpop{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%) scale(.96);
        z-index:50;width:max-content;max-width:220px;background:var(--surface);color:var(--ink);
        border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;
        box-shadow:0 10px 28px rgba(80,55,30,.2);opacity:0;pointer-events:none;
        transition:opacity .13s ease,transform .13s ease;font-size:12.5px;line-height:1.4}
/* Specificitatea trebuie s-o bată pe `.cal button b`, altfel data din casetă
   moștenea 9.5px și 75% opacitate, adică devenea invizibilă. */
.cal button .calpop>b{display:block;margin-bottom:6px;font-size:13px;font-weight:700;
                      opacity:1;color:var(--ink);line-height:1.3}
.cal button .calpop i{display:block;margin-top:7px;padding-top:6px;
                      border-top:1px solid var(--line);color:var(--ink-2);font-size:11px;
                      font-style:normal;aspect-ratio:auto;background:none;border-radius:0;
                      width:auto;height:auto}
.pline{display:flex;gap:5px;align-items:baseline;color:var(--ink-2)}
.pline.fel1,.pline.fel2{color:var(--ink)}
/* lângă margini, caseta se lipește de colț ca să nu iasă din ecran */
.cal button:nth-child(7n+1) .calpop,.cal button:nth-child(7n+2) .calpop{left:0;transform:none}
.cal button:nth-child(7n) .calpop,.cal button:nth-child(7n+6) .calpop{left:auto;right:0;transform:none}
/* Arătatul la trecerea cu mouse-ul stă ÎNCHIS aici, nu la vedere. Pe iOS,
   `:hover` rămâne lipit de ultimul element atins, iar caseta lui se adăuga
   peste cea a zilei alese: două meniuri unul peste altul. */
@media (hover:hover){
  .cal button:hover .calpop,.cal button:focus-visible .calpop{opacity:1;transform:translateX(-50%) scale(1)}
  .cal button:nth-child(7n+1):hover .calpop,.cal button:nth-child(7n+2):hover .calpop{transform:none}
  .cal button:nth-child(7n):hover .calpop,.cal button:nth-child(7n+6):hover .calpop{transform:none}
}
@media (hover:none){ .calpop{display:none} }

/* ---- portofel: cifre cu explicație sub ele ---- */
.ksub{font-size:10.5px;color:var(--ink-2);margin-top:3px;line-height:1.3}
.kpi.atentie{border-color:var(--warn);background:var(--warn-soft)}
.li.totalrand{background:var(--surface-2);font-weight:600}
.li.totalrand .fam1{font-size:14.5px}
.val.gol{color:var(--line)}

/* ---- intro pe ecranul de alegere a copilului ---- */
.intro{background:var(--surface);border:1px solid var(--line);border-radius:20px;
       padding:22px 20px;margin-top:24px;box-shadow:var(--shadow)}
.introcap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.introtitlu{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.02em;
            margin:3px 0 9px;line-height:1.1}
.introsub{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.pasi{list-style:none;counter-reset:p;margin:18px 0 0;padding:0;display:flex;
      flex-direction:column;gap:13px}
.pasi li{counter-increment:p;display:grid;grid-template-columns:26px 1fr;gap:11px;
         align-items:start;font-size:14px}
.pasi li::before{content:counter(p);display:flex;align-items:center;justify-content:center;
                 width:26px;height:26px;border-radius:50%;background:var(--accent-soft);
                 color:var(--accent);font-weight:700;font-size:13px}
.pasi li b{display:block}
/* Rândul are trei copii într-o grilă de două coloane: cerculețul cu numărul,
   titlul, descrierea. Plasarea automată trimite al treilea copil pe rândul doi
   în prima coloană, adică în cei 26px ai cerculețului, iar descrierea se rupea
   câte un cuvânt pe rând. Al doilea rând începe tot din coloana textului. */
.pasi li b{grid-column:2}
.pasi li span{grid-column:2;display:block;color:var(--ink-2);font-size:13px;
              margin-top:2px;line-height:1.45}
.intronota{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
           font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* ---- turul cu reflector ---- */
.turfundal{position:fixed;inset:0;z-index:90}
/* Aceeași culoare ca umbra găurii, ca trecerea de la un pas la altul să nu
   pară o schimbare de lumină. */
.turfundal.plin{background:rgba(43,37,32,.62)}
.turgaura{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(43,37,32,.62);
          transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease;
          pointer-events:none;border:2px solid var(--accent)}
.turcard{position:fixed;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 28px));
         background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;
         box-shadow:0 18px 50px rgba(80,55,30,.3)}
.turpasi{display:flex;gap:5px;margin-bottom:11px}
.turpasi i{width:20px;height:4px;border-radius:2px;background:var(--line)}
.turpasi i.done{background:var(--accent-soft)}
.turpasi i.cur{background:var(--accent)}
.turtitlu{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.turtext{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:6px}
.turrow{display:flex;gap:7px;align-items:center;margin-top:15px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){ .turgaura{transition:none} }

/* ---- buton de copiat, cu confirmare pe loc ---- */
.pill.copiaza{margin-top:10px}
.pill.copiaza.gata{background:var(--accent-soft);color:var(--accent)}
.dlg .lburl{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px;
            margin-top:12px;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;
            word-break:break-all;user-select:all;-webkit-user-select:all;line-height:1.5}
/* pașii fără reflector: cardul stă în mijlocul ecranului */
.turcard.mijloc{top:50%;transform:translate(-50%,-50%)}

/* pe ecran mic, cardul turului se strânge ca să nu mănânce tot ecranul */
@media (max-width:540px){
  .turcard{width:calc(100vw - 20px);padding:15px;border-radius:16px}
  .turtitlu{font-size:16.5px}
  .turtext{font-size:13px;line-height:1.45}
  .turrow{margin-top:12px;gap:6px}
  .turrow .pill{padding:8px 12px;font-size:12.5px}
}

/* cifra „de achitat" e și buton, dar arată la fel cu celelalte două */
button.kpi{font:inherit;text-align:left;width:100%;cursor:default;
           border:1px solid var(--line);background:var(--surface)}
button.kpi.apasabil{cursor:pointer}
button.kpi.apasabil:hover{border-color:var(--accent);box-shadow:var(--shadow)}
button.kpi.atentie.apasabil:hover{border-color:var(--warn)}
button.kpi[disabled]{opacity:1}
button.kpi.atentie{border-color:var(--warn);background:var(--warn-soft)}

/* ---- tabel pe ecran îngust ---- */
.ns{display:none}
.gridwrap.compact td.nm .nl,.gridwrap.compact th.nm .nl{display:none}
.gridwrap.compact td.nm .ns,.gridwrap.compact th.nm .ns{display:inline}
.gridwrap.compact table.g td.nm,.gridwrap.compact table.g th.nm{min-width:86px}
.gridwrap.compact td.nm .fam1{font-size:13px}

@media (max-width:760px){
  /* „Total" rămâne înghețat la dreapta și pe telefon. A fost scos o vreme,
     fiindcă împreună cu coloana de nume acoperea tot ecranul; acum numele se
     strâng la inițiale când derulezi, deci rămâne loc pentru zile. */
  table.g td.nm,table.g th.nm{min-width:126px}
  table.g th.tot,table.g td.tot{min-width:52px}
  table.g th,table.g td{padding:5px 6px;min-width:74px}
  table.g thead th{min-width:74px}
  .thzi{font-size:11px;margin-bottom:3px}
  .tline{font-size:9.5px;gap:3px}
  .tline svg.ic{width:.9em;height:.9em}
  .gridwrap{max-height:calc(100dvh - 190px - var(--jos, 0px))}
  td.nm .fam1{font-size:13.5px}
  .nr{min-width:16px;font-size:11px}
  .cb{width:24px;height:24px;font-size:13px}
}

/* ---- lumina care se plimbă pe marginea reflectorului ---- */
@property --unghi{ syntax:'<angle>'; initial-value:0deg; inherits:false }
.turgaura{border-color:rgba(61,154,107,.45)}
.turgaura::before{
  content:'';position:absolute;inset:-3px;border-radius:inherit;padding:3px;
  background:conic-gradient(from var(--unghi),
    transparent 0deg, transparent 240deg,
    rgba(61,154,107,.35) 285deg, #6fd8a0 330deg, #fff 348deg, #6fd8a0 354deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:plimba 2.4s linear infinite;
}
@keyframes plimba{ to{ --unghi:360deg } }
/* Unde `@property` nu e suportat, unghiul nu se animă: lăsăm marginea să pulseze,
   ca să existe tot timpul ceva în mișcare care spune unde să te uiți. */
@supports not (background: conic-gradient(from var(--unghi), red, blue)){
  .turgaura::before{display:none}
  .turgaura{animation:pulseaza 1.5s ease-in-out infinite}
  @keyframes pulseaza{
    0%,100%{border-color:rgba(61,154,107,.4);box-shadow:0 0 0 9999px rgba(43,37,32,.62)}
    50%{border-color:#6fd8a0;box-shadow:0 0 0 9999px rgba(43,37,32,.62),0 0 18px 2px rgba(111,216,160,.75)}
  }
}
@media (prefers-reduced-motion:reduce){
  .turgaura::before{animation:none}
  .turgaura{animation:none;border-color:var(--accent)}
}

/* ---- săgeata de la card spre element ---- */
.turcard::after{content:'';position:absolute;left:var(--sageata,50%);width:0;height:0;
                border:9px solid transparent}
.turcard.sageata-sus::after{bottom:100%;border-bottom-color:var(--surface);
                            filter:drop-shadow(0 -1px 0 var(--line))}
.turcard.sageata-jos::after{top:100%;border-top-color:var(--surface);
                            filter:drop-shadow(0 1px 0 var(--line))}
.turcard.mijloc::after{display:none}

/* ---- bara de sus, fixă, cu coșul ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;
     box-shadow:0 1px 0 rgba(120,90,50,.06)}
body{padding-top:60px}
@media (max-width:540px){ body{padding-top:56px} }

.cos{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;
     background:var(--surface-2);color:var(--ink);padding:5px 13px 5px 9px;cursor:pointer;
     font:inherit;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.cos:hover{border-color:var(--accent)}
.cos.sare{transform:scale(1.07)}
.cosic{position:relative;display:flex;align-items:center}
.cosic svg{width:22px;height:22px;color:var(--ink-2)}
.bulina{position:absolute;top:-5px;right:-7px;min-width:17px;height:17px;padding:0 4px;
        border-radius:999px;background:var(--accent);color:#fff;font-style:normal;
        font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
        line-height:1;border:2px solid var(--surface)}
.costext{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.cosk{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.cosv{font-weight:700;font-size:14.5px;white-space:nowrap}
.cos.zi .cosv{color:var(--accent)}
/* „deloc apăsător": cărămiziu cald, nu roșu de alarmă */
.cos.datorie{background:#fbeee6;border-color:#eccfbb}
.cos.datorie .cosv{color:#b4552f}
.cos.datorie .cosic svg{color:#b4552f}
@media (prefers-reduced-motion:reduce){ .cos{transition:none} .cos.sare{transform:none} }
@media (max-width:400px){ .cosk{display:none} .cosv{font-size:14px} }

/* ---- dock: iconuri SVG, câte o culoare de tab ---- */
.dock button{--tc:var(--accent)}
.dock button.c-soare{--tc:#d08a1e}
.dock button.c-verde{--tc:var(--accent)}
.dock button.c-indigo{--tc:#5b6fb8}
.dock button.c-roz{--tc:var(--desert)}
.dock button .em{color:var(--tc)}
.dock button{opacity:.85}
.dock button:not(.on){color:var(--ink-2)}
.dock button.on{background:var(--tc);color:#fff;opacity:1}
.dock button.on .em{color:#fff}
.dock button:hover:not(.on){background:var(--surface-2);opacity:1}
.dock button{padding:8px 11px}
.dock button.on{padding:8px 13px}

/* anunț de plată trimis: caseta își schimbă rolul, nu doar culoarea */
.asteapta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.asteapta>div{flex:1;min-width:180px}
.platabox.anuntat{border-color:var(--accent);background:var(--accent-soft)}
.pbic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
      stroke-linecap:round;stroke-linejoin:round;margin-right:6px;vertical-align:-2px}
.platabox.anuntat .pbsum b{color:var(--accent)}

/* ---- tabelul pe tot ecranul ---- */
.navplin{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.navplin .nav{flex:1;min-width:180px;margin:16px 0 2px}

body.tabel-plin{padding:0}
body.tabel-plin #top,body.tabel-plin #dock{display:none}
body.tabel-plin .wrap.wide{max-width:none;padding:0}
body.tabel-plin .navplin{position:sticky;top:0;z-index:20;background:var(--bg);
                         padding:6px 10px;margin:0;border-bottom:1px solid var(--line)}
body.tabel-plin .navplin .nav{margin:0}
body.tabel-plin .gridwrap{border-radius:0;border-left:0;border-right:0}
body.tabel-plin .foot{padding:8px 12px calc(14px + env(safe-area-inset-bottom, 0px))}
/* pe orizontală încape toată săptămâna, deci strângem și mai mult */
@media (max-width:940px) and (orientation:landscape){
  body.tabel-plin table.g th,body.tabel-plin table.g td{padding:4px 5px;min-width:66px}
  body.tabel-plin table.g td.nm,body.tabel-plin table.g th.nm{min-width:112px}
  body.tabel-plin .tline{font-size:9px}
}

/* ---- butonul de ecran plin, deasupra coloanei Total ---- */
.plinbtn{flex:0 0 auto;width:42px;height:42px;border-radius:13px;border:1px solid var(--line);
         background:var(--surface);color:var(--ink-2);cursor:pointer;display:flex;
         align-items:center;justify-content:center;padding:0}
.plinbtn:hover{border-color:var(--accent);color:var(--accent)}
.plinbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
             stroke-linecap:round;stroke-linejoin:round}

/* ---- tabelul intră întreg pe lățime, nu doar la ecran plin ---- */
/* Tabelul e micșorat exact cât să încapă, deci nu mai are unde derula lateral.
   Lățimea de așezare rămâne însă cea nescalată, iar `overflow:auto` o lua drept
   conținut și deschidea o zonă goală în dreapta. */
body.tabel-fit .gridwrap{overflow-x:hidden;overflow-y:visible;max-height:none}
body.tabel-fit .zoomwrap{transform-origin:top left}
/* Nimic lipit: se vede tot deodată, n-are de ce. Iar lipit de fundul unui
   container mai înalt decât tabelul micșorat, rândul de totaluri ateriza în
   mijlocul lui - de aici totalurile care „săreau". */
body.tabel-fit table.g td.nm,body.tabel-fit table.g th.nm,
body.tabel-fit table.g td.tot,body.tabel-fit table.g th.tot,
body.tabel-fit table.g thead th,body.tabel-fit tr.totrow td{position:static}
/* fără derulare laterală, numele rămân întregi */
body.tabel-fit .gridwrap.compact td.nm .nl{display:inline}
body.tabel-fit .gridwrap.compact td.nm .ns{display:none}

/* ziua aleasă, evidențiată în calendar */
.cal button.aleasa{outline:2.5px solid var(--ink);outline-offset:1px}
.cal button.aleasa.da{outline-color:#1d5a3c}
/* pe ecran fără mouse, caseta cu meniul apare pe ziua aleasă, nu la hover */
@media (hover:none){
  .calpop{display:block;opacity:0}
  .cal button.popon .calpop{opacity:1;transform:translateX(-50%) scale(1)}
  .cal button.popon:nth-child(7n+1) .calpop,
  .cal button.popon:nth-child(7n+2) .calpop{transform:none}
  .cal button.popon:nth-child(7n) .calpop,
  .cal button.popon:nth-child(7n+6) .calpop{transform:none}
}

/* bara nu iese niciodată din ecran, oricâte taburi ar fi */
.dock{max-width:calc(100vw - 16px)}
.dock button .t{font-size:12.5px}
@media (max-width:380px){ .dock button{padding:7px 8px} .dock button.on{padding:7px 11px} }

/* ---- ghidul ilustrat de instalare ---- */
.dlg.ghid{max-width:420px}
.ghidram{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
         padding:10px;margin:12px 0 14px}
.ghidsvg{width:100%;height:auto;display:block}
/* Capturile reale de pe telefon. Rama e umplută de poză până în margini, ca să
   semene cu ecranul, nu cu o ilustrație lipită pe un carton. */
.ghidpoza{width:100%;height:auto;display:block;border-radius:13px}
.ghidsvg .ec{fill:var(--surface);stroke:var(--line);stroke-width:2}
.ghidsvg .bara{fill:var(--surface-2);stroke:var(--line);stroke-width:2}
.ghidsvg .lin{fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;
              stroke-linejoin:round}
.ghidsvg .lin2{fill:var(--line)}
.ghidsvg .alb{stroke:#fff}
.ghidsvg .lin2.alb,.ghidsvg .pl{fill:#fff;stroke:none}
.ghidsvg .iconita{fill:var(--accent)}
.ghidsvg .litera{fill:#fdf7ef;font:700 26px var(--display);text-anchor:middle}
/* pastila care arată exact ce se apasă, cu aceeași lumină ca în tur */
.ghidsvg .tinta>*{fill:var(--accent);stroke:none}
@media (prefers-reduced-motion:no-preference){
  .ghidsvg .tinta{animation:ghidpulse 1.6s ease-in-out infinite;transform-origin:center}
  @keyframes ghidpulse{0%,100%{opacity:1}50%{opacity:.62}}
}

/* ---- evenimente speciale și orarul zilei ---- */
/* Banda stă în cardul zilei, între dată și meniu. Galben miere plin, cu chenar și
   umbră: meniul de dedesubt e bej, iar un atelier cu bani de dus trebuie să se
   vadă înaintea lui, nu să se piardă între două casete de aceeași culoare. */
.evt{display:flex;gap:11px;align-items:flex-start;text-align:left;background:#fbd36b;
     border:1px solid #e8a33d;border-radius:14px;padding:12px 13px;margin:0 0 10px;
     box-shadow:0 2px 10px rgba(232,163,61,.28)}
.evt svg.ic{width:30px;height:30px;padding:6px;border-radius:50%;background:#2b2520;
            color:#fbd36b;margin-top:0}
.evt b{display:block;font-size:16px;line-height:1.3;color:#2b2520}
.evcand{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;
        background:#2b2520;color:#fff;font-size:12.5px;font-weight:700}
.evt p{margin:6px 0 0;font-size:13px;color:#4a3817;line-height:1.4}
.evmini{display:flex;gap:5px;align-items:center;margin-top:4px;font-size:12.5px;font-weight:600;color:#8a5a14}
.evmini svg.ic{color:#b8741a;margin-top:0}
.cal button.ev::after{content:'';position:absolute;right:4px;bottom:4px;width:6px;height:6px;
                      border-radius:50%;background:var(--soare)}
.callegend i.ev{width:9px;height:9px;border-radius:50%;background:var(--soare)}
.cal button .calpop i.calev{color:#8a5a14;font-weight:600}

/* Sportul, într-o linie sub dată: echipamentul se pregătește de acasă. */
.sportchip{display:flex;gap:10px;align-items:center;text-align:left;background:#ffe4d1;
           border-radius:13px;padding:9px 12px;margin:0 0 10px;color:#a63d06}
.sportchip svg.ic{width:28px;height:28px;padding:5px;border-radius:50%;background:#e8590c;
                  color:#fff;margin-top:0}
.sportchip b{display:block;font-size:14px;line-height:1.25}
.sportchip span{display:block;font-size:12.5px;font-weight:600;color:#8a4a22}

/* Orarul. Fiecare materie are o culoare (bară + eticheta de cod), ca să se citească dintr-o
   privire; numele rămâne scris, deci culoarea nu e singura informație. --c = bara, --s = fundalul
   fin, --t = textul etichetei (mai închis, ca să treacă de contrast pe fundalul fin). */
.orar{background:var(--surface);border:1px solid var(--line);border-radius:18px;
      padding:12px 14px 4px;margin-top:12px;box-shadow:var(--shadow)}
.orarcap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.orarcap b{font-size:15px}
.orarcap span{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.orarrand{--c:#a89a8a;--s:#f3ede4;--t:#6b5e50;position:relative;display:grid;
          grid-template-columns:38px 1fr auto;gap:8px;align-items:center;
          padding:7px 0 7px 12px;border-top:1px solid var(--line);font-size:14px;line-height:1.35}
.orarrand::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:4px;
                  border-radius:2px;background:var(--c)}
.orarora{color:var(--ink-2);font-size:13px}
.orarmat{display:flex;gap:9px;align-items:center;min-width:0}
.orarmat b{font-weight:600}
.orarmat i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2)}
.orarcod{font-size:11px;font-weight:600;color:var(--t);background:var(--s);border-radius:6px;
         padding:1px 7px;white-space:nowrap}
.a-ro{--c:#3b82d6;--s:#e6f0fc;--t:#1f5aa3}
.a-mate{--c:#8b5cd0;--s:#f0e9fb;--t:#5f36a0}
.a-dp{--c:#d9689a;--s:#fbe7f0;--t:#a3336a}
.a-muzica{--c:#e08a2c;--s:#fdecd6;--t:#94530a}
.a-arte{--c:#1fa39a;--s:#dcf4f1;--t:#0d6b65}
.a-engleza{--c:#d94f4f;--s:#fce4e4;--t:#a02828}
.a-religie{--c:#8d7355;--s:#f0e8dc;--t:#5e4a32}
.a-scaun{--c:#3d9a6b;--s:#ddf0e4;--t:#226345}
.a-activ{--c:#a89a8a;--s:#f3ede4;--t:#6b5e50}
/* Sportul iese din listă: fundal pe tot rândul, iconiță plină, text îngroșat. */
.a-sport{--c:#e8590c;--s:#ffe4d1;--t:#a63d06;background:var(--s);margin:0 -14px;
         padding:9px 14px 9px 26px;border-top-color:transparent}
.a-sport::before{left:14px;top:9px;bottom:9px}
.a-sport .orarmat b{font-weight:700;color:var(--t)}
.a-sport .orarora{color:var(--t);font-weight:600}
.orarmat svg.orarsport{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--c);
                       color:#fff;margin-top:0}

/* ---- Zilnic: antet plutitor și caruselul de zile ---- */
/* Antetul e în afara caruselului și rămâne agățat sus cât derulezi: data de care ai
   nevoie ca să știi ce zi bifezi e mereu la vedere, oricât de jos ai coborât în orar
   sau în calendar. E o pastilă îngustă, cât „Miercuri" (cel mai lung nume de zi) cu săgețile
   lângă; lățimea centrului e fixă, ca pastila să nu se miște de la o zi la alta în timpul unui swipe.
   Aproape opacă, ca textul de dedesubt să nu se ghicească prin ea. */
.zihead{position:sticky;top:calc(var(--topH, 0px) + 8px);z-index:20;width:fit-content;
        margin:12px auto 10px;padding:6px;gap:4px;justify-content:center;
        border-radius:999px;background:rgba(255,255,255,.94);border:1px solid var(--glass-line);
        -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
        box-shadow:0 6px 22px rgba(60,40,10,.14)}
.zihead>div{flex:0 0 auto}
.zihead button{width:44px;height:44px;font-size:21px}
.zihc{width:7.2em;text-align:center;line-height:1.15;font-size:16px;white-space:nowrap}
.zihc .when{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.zihc .data{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em}

/* Carusel: o pagină = o zi. Golul dintre pagini e egal cu marginea laterală a paginii, ca
   vecina să nu se vadă pe margine în repaus. Marginea de jos face loc umbrei cardului,
   pe care `overflow` ar tăia-o. */
.zicar{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
       overscroll-behavior-x:contain;scrollbar-width:none;margin:-8px -14px -14px;
       padding:8px 14px 26px;scroll-padding:0 14px}
.zicar::-webkit-scrollbar{display:none}
.zipag{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.zipag .poll{margin-top:0;padding-top:16px}


/* „Reia din prima nebifată" apare doar după ce ai ales tu o zi, nu la deschidere. Stă în fiecare
   pagină, ascuns, ca să nu fie nevoie să desenăm paginile din nou când apare. */
.reia{display:none}
.zicar.aleasa .reia{display:inline}

/* Pe Zilnic, gestul orizontal e al aplicației, pe tot ecranul: browserul păstrează doar derularea
   pe verticală (și zoom-ul cu două degete). Caruselul trebuie numit și el, fiindcă e un container
   de derulare: `touch-action` nu trece de granița unuia. Mouse-ul și trackpad-ul nu sunt atinse. */
html.vz,html.vz .zicar{touch-action:pan-y pinch-zoom}

/* Reamintirea de plată. Cardul din aplicația părintelui refolosește `.dlg` și
   `.platadet`; aici e doar ce nu exista. `svh`, nu `dvh`: pe iPhone `dvh` urmărește
   zoom-ul și dialogul rămânea scurt. */
.dlg.rem{max-height:calc(100svh - 40px);overflow-y:auto}
.dlg.rem .dtitlu .num{color:var(--warn)}
/* În dialog e mai puțin loc decât în Portofel: IBAN-ul de 24 de semne se rupea cu un „0”
   singur pe al doilea rând. Îl lăsăm pe rând propriu, sub etichetă, pe toată lățimea. */
.dlg.rem .pdrand{flex-wrap:wrap}
.dlg.rem .pdrand .pdcop{margin-left:auto}
.dlg.rem .pdv.iban{order:3;flex:1 0 100%}

/* Bara cu butonul „Reamintește tuturor”, între titlul listei și listă. */
.rembar{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
        margin:-2px 0 10px}
.rembar .remtxt{flex:1 1 200px;min-width:0;font-size:12.5px;color:var(--ink-2);line-height:1.4}

/* Mesajele pentru familiile fără anunțuri: un rând pe familie. */
.remlista{margin:12px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
          max-height:min(46svh,330px);overflow-y:auto;background:var(--surface)}
.remrand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;
         border-bottom:1px solid var(--line)}
.remrand:last-child{border-bottom:0}
.remnume{min-width:0;display:flex;flex-direction:column;line-height:1.25;font-size:14px}
.remnume .num{font-size:12.5px;color:var(--warn)}
.remact{display:flex;gap:6px;flex:0 0 auto}
.remact .pill.gata{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}