/* Vzhľad prevzatý z preview, aby appka vyzerala presne tak,
   ako to predáci videli. Zmeny sa robia tu. */
:root{
    --paper:#F3F2EE;
    --surface:#FFFFFF;
    --surface-2:#EBEAE4;
    --ink:#17201F;
    --ink-2:#4A5654;
    --ink-3:#7C8785;
    --line:#D9D8D1;
    --line-2:#C3C2B9;
    --petrol:#12403F;
    --petrol-2:#1D5C5A;
    --on-petrol:#EFF3F2;
    --mustard:#B06E05;
    --mustard-soft:#F7E7CA;
    --ok:#2C7355;
    --ok-soft:#DDEBE3;
    --miss:#A8402F;
    --miss-soft:#F5DFDA;

    --bar-bg:#12403F;
    --bar-fg:#F2F5F4;
    --bar-dim:#AFC3C0;
    --bar-line:#0C2E2D;
    --bar-hover:rgba(255,255,255,.12);
    --bar-sel:#E0A233;
    --bar-sel-fg:#1A1206;

    --faint-line:#E3E2DB;
    --faint-ink:#8E9593;
    --by-lead:#D8E6EC;
    --by-lead-line:#8FB3BF;

    --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;

    --r:3px;
    --pad:clamp(16px,4vw,32px);
  }

  @media (prefers-color-scheme:dark){
    :root{
      --paper:#0F1514;
      --surface:#18201F;
      --surface-2:#222C2A;
      --ink:#E9E8E2;
      --ink-2:#B3BEBC;
      --ink-3:#8E9A98;
      --line:#2C3735;
      --line-2:#3F4B49;
      --petrol:#6FB3AD;
      --petrol-2:#8FC9C4;
      --on-petrol:#0F1514;
      --mustard:#E0A233;
      --mustard-soft:#3B2E16;
      --ok:#57AC82;
      --ok-soft:#1C3329;
      --miss:#D4705E;
      --miss-soft:#361F1C;

      --bar-bg:#16211F;
      --bar-fg:#E9E8E2;
      --bar-dim:#9DAAA7;
      --bar-line:#2C3735;
      --bar-hover:rgba(255,255,255,.09);
      --bar-sel:#E0A233;
      --bar-sel-fg:#1A1206;

      --faint-line:#28322F;
      --faint-ink:#727C7A;
      --by-lead:#16282F;
      --by-lead-line:#3E6470;
    }
  }

  :root[data-theme="dark"]{
    --paper:#0F1514;
    --surface:#18201F;
    --surface-2:#222C2A;
    --ink:#E9E8E2;
    --ink-2:#B3BEBC;
    --ink-3:#8E9A98;
    --line:#2C3735;
    --line-2:#3F4B49;
    --petrol:#6FB3AD;
    --petrol-2:#8FC9C4;
    --on-petrol:#0F1514;
    --mustard:#E0A233;
    --mustard-soft:#3B2E16;
    --ok:#57AC82;
    --ok-soft:#1C3329;
    --miss:#D4705E;
    --miss-soft:#361F1C;

    --bar-bg:#16211F;
    --bar-fg:#E9E8E2;
    --bar-dim:#9DAAA7;
    --bar-line:#2C3735;
    --bar-hover:rgba(255,255,255,.09);
    --bar-sel:#E0A233;
    --bar-sel-fg:#1A1206;

    --faint-line:#28322F;
    --faint-ink:#727C7A;
    --by-lead:#16282F;
    --by-lead-line:#3E6470;
  }

  :root[data-theme="light"]{
    --paper:#F3F2EE;
    --surface:#FFFFFF;
    --surface-2:#EBEAE4;
    --ink:#17201F;
    --ink-2:#4A5654;
    --ink-3:#7C8785;
    --line:#D9D8D1;
    --line-2:#C3C2B9;
    --petrol:#12403F;
    --petrol-2:#1D5C5A;
    --on-petrol:#EFF3F2;
    --mustard:#B06E05;
    --mustard-soft:#F7E7CA;
    --ok:#2C7355;
    --ok-soft:#DDEBE3;
    --miss:#A8402F;
    --miss-soft:#F5DFDA;

    --bar-bg:#12403F;
    --bar-fg:#F2F5F4;
    --bar-dim:#AFC3C0;
    --bar-line:#0C2E2D;
    --bar-hover:rgba(255,255,255,.12);
    --bar-sel:#E0A233;
    --bar-sel-fg:#1A1206;

    --faint-line:#E3E2DB;
    --faint-ink:#8E9593;
    --by-lead:#D8E6EC;
    --by-lead-line:#8FB3BF;
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.2}

  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-3);
    margin:0;
  }

  .wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
  /* Finančné prehľady majú veľa stĺpcov — na širokej obrazovke im dáme viac miesta. */
  .wrap.wide{max-width:1360px}

  /* ---------- shell ---------- */

  /* Pruh testovacej kópie. Musí byť vidieť vždy, aj po odrolovaní — preto je
     pripnutý navrchu a stránka si pod ním spraví miesto. Farba je tá istá,
     akou appka hovorí „pozor", lebo presne o to ide. */
  .pruh{
    position:fixed;top:0;left:0;right:0;z-index:60;
    background:var(--miss);color:#fff;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
    text-transform:uppercase;text-align:center;padding:5px 12px;
  }
  body.s-pruhom{padding-top:26px}

  .topbar{
    background:var(--bar-bg);
    color:var(--bar-fg);
    border-bottom:1px solid var(--bar-line);
  }

  .topbar .wrap{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    padding-top:14px;
    padding-bottom:14px;
  }

  .brand{display:flex;align-items:center;gap:10px}
  .brand svg{display:block}
  .brand-name{
    font-family:var(--mono);
    font-weight:700;
    font-size:17px;
    letter-spacing:-.01em;
  }
  .brand-tag{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--bar-dim);
    padding-left:10px;
    border-left:1px solid var(--bar-dim);
    margin-left:2px;
  }

  .tabs{
    display:flex;
    gap:2px;
    flex-wrap:wrap;
    margin-left:auto;
  }
  .tab{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:.04em;
    background:transparent;
    color:var(--bar-dim);
    border:1px solid transparent;
    border-radius:var(--r);
    padding:6px 11px;
    cursor:pointer;
  }
  .tab:hover{color:var(--bar-fg);background:var(--bar-hover)}
  .tab[aria-selected="true"]{
    background:var(--bar-sel);
    color:var(--bar-sel-fg);
    font-weight:700;
  }
  .tab:focus-visible{outline:2px solid var(--bar-sel);outline-offset:2px}

  main{padding:32px 0 72px}

  .screen[hidden]{display:none}

  .screen-head{
    display:flex;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:22px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .screen-head h2{font-size:clamp(20px,3vw,26px);letter-spacing:-.015em}
  .screen-head .who{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-3);
    letter-spacing:.05em;
  }

  /* ---------- cards ---------- */

  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:20px;
  }
  .card + .card{margin-top:18px}
  .card-head{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-bottom:14px;
  }
  .card-head h3{font-size:15px;letter-spacing:-.005em}

  .grid-2{display:grid;grid-template-columns:1fr;gap:18px}
  @media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

  .note{
    margin-top:20px;
    border-left:2px solid var(--mustard);
    padding:2px 0 2px 16px;
    color:var(--ink-2);
    font-size:13.5px;
    max-width:66ch;
  }
  .note p{margin:6px 0 0}
  .note p:first-of-type{margin-top:4px}

  /* ---------- chip ---------- */

  .chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    height:30px;
    padding:0 7px;
    font-family:var(--mono);
    font-weight:700;
    font-size:15px;
    line-height:1;
    border-radius:2px;
    background:var(--mustard-soft);
    color:var(--mustard);
    border:1.5px solid var(--mustard);
  }
  .chip.lg{min-width:44px;height:44px;font-size:20px}
  .chip.sm{min-width:24px;height:24px;font-size:12px;border-width:1px}
  .chip.ghost{
    background:transparent;
    color:var(--ink-3);
    border-style:dashed;
    border-color:var(--line-2);
    font-weight:400;
  }
  .chip.none{
    background:var(--ink-3);
    color:var(--surface);
    border-color:var(--ink-3);
  }

  /* ---------- pills ---------- */

  .pill{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:3px 8px;
    border-radius:2px;
    border:1px solid;
  }
  .pill.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
  .pill.miss{background:var(--miss-soft);color:var(--miss);border-color:var(--miss)}
  .pill.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-2)}

  /* ---------- buttons ---------- */

  .btn{
    font-family:var(--sans);
    font-size:13.5px;
    font-weight:600;
    background:var(--surface-2);
    color:var(--ink);
    border:1px solid var(--line-2);
    border-radius:var(--r);
    padding:8px 14px;
    cursor:pointer;
  }
  .btn:hover{border-color:var(--ink-3)}
  .btn:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}
  .btn.primary{
    background:var(--petrol);
    color:var(--on-petrol);
    border-color:var(--petrol);
  }
  .btn.primary:hover{background:var(--petrol-2);border-color:var(--petrol-2)}
  .btn[aria-pressed="true"]{background:var(--petrol);color:var(--on-petrol);border-color:var(--petrol)}
  .btn.wide{width:100%;justify-content:center;text-align:center}
  .btn-row{display:flex;gap:8px;flex-wrap:wrap}

  /* ---------- countdown strip ---------- */

  .deadline{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-left:3px solid var(--mustard);
    border-radius:var(--r);
    padding:11px 16px;
    margin-bottom:18px;
  }
  .deadline .lbl{
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-3);
  }
  .deadline .val{font-family:var(--mono);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
  .deadline .sep{color:var(--line-2)}

  /* ---------- matrix ---------- */

  .scroll-x{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
    -webkit-overflow-scrolling:touch;position:relative}
  /* Na úzkej obrazovke dá tieň na okraji najavo, že tabuľka pokračuje vbok.
     Bez neho ľudia tabuľku približujú namiesto posúvania. */
  @media (max-width:820px){
    .scroll-x{
      background-image:
        linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)),
        linear-gradient(to left,  var(--surface) 30%, rgba(0,0,0,0)),
        radial-gradient(farthest-side at 0 50%,    rgba(0,0,0,.16), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0));
      background-position:0 0, 100% 0, 0 0, 100% 0;
      background-repeat:no-repeat;
      background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
      background-attachment:local, local, scroll, scroll;
    }
    .scroll-x + .swipe-hint{display:block}
  }
  /* Sumy sa nesmú lámať medzi číslom a menou. */
  table.data td.num{white-space:nowrap}
  table.data th.num{white-space:normal}
  .swipe-hint{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    color:var(--ink-3);margin-top:7px;text-transform:uppercase}

  table.matrix{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
  table.matrix th,table.matrix td{border-bottom:1px solid var(--line);text-align:left;padding:0}
  table.matrix thead th{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-3);
    font-weight:400;
    padding:10px 12px;
    background:var(--surface-2);
    white-space:nowrap;
  }
  table.matrix thead th .dnum{color:var(--ink-2);font-weight:700;letter-spacing:0}
  table.matrix tbody th{
    font-weight:500;
    padding:0 12px;
    white-space:nowrap;
    position:sticky;
    left:0;
    background:var(--surface);
    border-right:1px solid var(--line);
    font-size:14px;
  }
  /* hover len na mene — inak by prekryl významové podfarbenie buniek */
  table.matrix tbody tr:hover th{background:var(--surface-2)}
  table.matrix tbody th .pn{
    display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  }
  .opts{
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:center;justify-content:center;
    padding:8px 9px;
    min-height:52px;
    border-right:1px solid var(--line);
  }
  .opt-row{
    display:flex;flex-wrap:wrap;gap:3px;
    align-items:center;justify-content:center;
  }
  .opt-b{
    min-width:27px;height:28px;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:13px;font-weight:500;
    background:transparent;
    color:var(--faint-ink);
    border:1px solid var(--faint-line);
    border-radius:2px;
    cursor:pointer;
    padding:0 5px;
  }
  .opt-b:hover{color:var(--ink);border-color:var(--ink-3);background:var(--surface-2)}
  .opt-b.none{font-size:15px;line-height:1}
  .opt-b[aria-checked="true"]{
    background:var(--mustard-soft);
    color:var(--mustard);
    border-color:var(--mustard);
    font-weight:700;
  }
  .opt-b.none[aria-checked="true"]{
    background:var(--ink-3);
    color:var(--surface);
    border-color:var(--ink-3);
    font-weight:700;
  }
  .opt-b:focus-visible{outline:2px solid var(--petrol);outline-offset:1px}

  /* podfarbenie = niekto konal. Bez voľby = bez podfarbenia. */
  td.by-self{background:var(--ok-soft)}
  td.by-lead{background:var(--by-lead)}
  td.by-place{background:var(--mustard-soft)}
  table.matrix td{position:relative}
  .plmark{
    position:absolute;
    top:2px;right:3px;
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:.04em;
    line-height:1;
    padding:2px 3px;
    border-radius:2px;
    background:var(--mustard);
    color:#fff;
    pointer-events:none;
  }
  .opt-b.pl{font-size:11px;letter-spacing:.03em;min-width:30px}
  .nomeal{
    display:block;
    text-align:center;
    font-family:var(--mono);
    font-size:12px;
    color:var(--faint-ink);
    padding:9px 0;
  }
  /* jediné možné miesto — nie je čo voliť, ale nie je to ani prázdno */
  .plfix{
    display:block;
    text-align:center;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.03em;
    color:var(--ink-2);
    padding:9px 0;
  }
  /* pred uzávierkou sa dajú prázdne bunky jedným tlačidlom rozsvietiť */
  .hl-gaps td.gap{background:var(--miss-soft)}

  .cattag{
    font-family:var(--mono);
    color:var(--by-lead-line);
    font-weight:600;
  }

  .gapn{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;margin-left:7px;
    font-family:var(--mono);font-size:10.5px;font-weight:700;
    background:var(--miss-soft);color:var(--miss);
    border:1px solid var(--miss);border-radius:2px;
    vertical-align:middle;
  }

  .team-block{margin-bottom:22px}
  .team-head{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-bottom:10px;
  }
  .team-head h3{font-size:15px}
  .deleg{
    border-left:3px solid var(--petrol);
    padding-left:14px;
  }

  .stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}

  /* ---------- phone frame ---------- */

  .phone{
    max-width:390px;
    margin:0;
    border:1px solid var(--line-2);
    border-radius:14px;
    background:var(--surface);
    overflow:hidden;
  }
  .phone-bar{
    background:var(--surface-2);
    border-bottom:1px solid var(--line);
    padding:8px 14px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    color:var(--ink-3);
    display:flex;justify-content:space-between;
  }
  .phone-body{padding:16px}

  .day{
    display:flex;align-items:center;gap:13px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  .day:last-child{border-bottom:0}
  .day .dname{flex:1;min-width:0}
  .day .dname .dn{font-weight:600;font-size:14px}
  .day .dname .dd{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
  .day .dname .meal{font-size:12.5px;color:var(--ink-2);margin-top:1px}
  .day-btn{
    background:transparent;border:0;padding:0;cursor:pointer;
    display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  }
  .day-btn:focus-visible{outline:2px solid var(--mustard);outline-offset:3px}

  .menu-sheet{
    margin-top:14px;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--surface-2);
    padding:14px;
  }
  .opt{
    display:flex;align-items:flex-start;gap:12px;
    padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .opt:last-child{border-bottom:0}
  .opt .txt{flex:1}
  .opt .nm{font-size:13.5px;line-height:1.35}
  .opt .pr{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

  /* ---------- generic table ---------- */

  table.data{border-collapse:collapse;width:100%;font-size:13.5px}
  table.data th,table.data td{
    text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);
  }
  table.data thead th{
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);font-weight:400;
    background:var(--surface-2);
  }
  table.data td.num,table.data th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  table.data tfoot td{font-weight:700;border-top:2px solid var(--line-2);border-bottom:0}

  /* ---------- form bits ---------- */

  .field{margin-bottom:14px}
  .field label{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-3);
    margin-bottom:5px;
  }
  .field input[type="text"],
  .field input[type="password"],
  .field input[type="number"],
  .field input[type="time"],
  .field select{
    width:100%;
    font-family:var(--sans);
    font-size:15px;
    padding:10px 12px;
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--line-2);
    border-radius:var(--r);
  }
  .field input:focus,.field select:focus{outline:2px solid var(--mustard);outline-offset:-1px;border-color:var(--mustard)}
  .field .hint{font-size:12px;color:var(--ink-3);margin-top:5px}

  .seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;width:fit-content}
  .seg button{
    font-family:var(--mono);font-size:12.5px;
    background:var(--surface);color:var(--ink-2);
    border:0;border-right:1px solid var(--line-2);
    padding:7px 13px;cursor:pointer;
  }
  .seg button:last-child{border-right:0}
  .seg button[aria-pressed="true"]{background:var(--petrol);color:var(--on-petrol);font-weight:700}
  .seg button#a-cat-add{color:var(--ink-3)}
  .seg button:focus-visible{outline:2px solid var(--mustard);outline-offset:-2px}

  .check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
  .check input{width:17px;height:17px;accent-color:var(--petrol)}

  /* ---------- print sheet mock ---------- */

  .sheet{
    background:#FFFFFF;
    color:#17201F;
    border:1px solid var(--line-2);
    border-radius:2px;
    padding:22px;
    font-size:12.5px;
  }
  .sheet h4{font-size:15px;margin-bottom:2px}
  .sheet .meta{font-family:var(--mono);font-size:10.5px;color:#6B7573;margin-bottom:14px;letter-spacing:.04em}
  .sheet table{border-collapse:collapse;width:100%}
  .sheet th,.sheet td{border:1px solid #C9C8C1;padding:5px 7px;text-align:left}
  .sheet thead th{background:#EFEEE8;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
  .sheet td.box{height:28px;width:44px}
  .sheet .pre{font-family:var(--mono);color:#9A9A93;text-decoration:line-through}
  .sheet .cnt{font-family:var(--mono);font-weight:700;text-align:right}

  /* ---------- logo lab ---------- */

  .logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
  .logo-card{
    border:1px solid var(--line);border-radius:var(--r);
    background:var(--surface);
    padding:0;overflow:hidden;
  }
  .logo-stage{
    display:flex;align-items:center;justify-content:center;
    gap:14px;
    padding:34px 20px;
    background:var(--surface-2);
    border-bottom:1px solid var(--line);
  }
  .logo-stage.dark{background:#12403F}
  .logo-stage.dark .lw{color:#EFF3F2}
  .lw{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
  .logo-meta{padding:14px 16px}
  .logo-meta h4{font-size:14px;margin-bottom:4px}
  .logo-meta p{margin:0;font-size:12.5px;color:var(--ink-2)}
  .favi{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);color:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.06em}

  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-top:12px}
  .legend[hidden]{display:none}
  .legend span{display:inline-flex;align-items:center;gap:7px}
  .sw{width:13px;height:13px;border-radius:2px;border:1px solid}
  .sw.pick{background:var(--mustard-soft);border-color:var(--mustard)}
  .sw.miss{background:var(--miss-soft);border-color:var(--miss)}
  .sw.self{background:var(--ok-soft);border-color:var(--ok)}
  .sw.empty{background:var(--surface);border-color:var(--line-2)}
  .sw.lead{background:var(--by-lead);border-color:var(--by-lead-line)}

  /* ---------- uzávierka ---------- */

  .seg.sm button{padding:5px 10px;font-size:12.5px}
  .ro{padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);font-size:14px}
  .chk{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
  .btn.ghost{background:transparent}
  .badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:2px 7px;border-radius:999px;border:1px solid currentColor;margin-left:7px;vertical-align:1px}
  .badge.lead{color:var(--petrol)}
  .badge.adm{color:var(--miss)}
  .badge.ziv{color:var(--ink-3)}
  /* Vygenerované heslo — ukáže sa raz a prepisuje sa z obrazovky na papier,
     tak musí byť veľké a jednoznačné. */
  .heslo-raz{
    font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:.06em;
    margin:10px 0;padding:10px 14px;background:var(--surface);
    border:1px dashed currentColor;border-radius:var(--r);display:inline-block;
    user-select:all;
  }
  a.kto{text-decoration:none}
  a.kto:hover{text-decoration:underline}

  .badge.ok{color:var(--ok)}
  .badge.zle{color:var(--miss)}

  /* Znenie objednávky tak, ako odišlo do kuchyne. Zalamovať sa nesmie inak,
     než ako sa odoslalo — inak by sme na obrazovke ukazovali iný text. */
  .znenie{
    font-family:var(--mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;
    background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);
    padding:12px 14px;margin:12px 0 0;overflow-x:auto;color:var(--ink);
  }
  /* Zloženie tímu v číselníku — mená pod počtom, nie v ďalšej obrazovke. */
  .clenovia > summary{display:inline-block;padding:4px 10px;font-size:12px}
  .zoznam-clenov{margin:8px 0 0;padding-left:18px;font-size:13px}
  .zoznam-clenov li{margin-bottom:2px;white-space:nowrap}
  .zoznam-clenov li.is-off{opacity:.55}

  .zoznam-mien{margin:8px 0 0;padding-left:20px;columns:2;column-gap:28px}
  .zoznam-mien li{break-inside:avoid;margin-bottom:3px}
  @media (max-width:720px){ .zoznam-mien{columns:1} }
  table.data tr.sucet td,table.data tr.sucet th{border-top:2px solid var(--line-2);background:var(--surface-2)}
  table.data th.oznak{font-family:var(--mono);font-weight:700;text-align:center;background:var(--surface-2)}
  tr.is-lead td:first-child{box-shadow:inset 3px 0 0 var(--petrol)}
  tr.is-adm td:first-child{box-shadow:inset 3px 0 0 var(--miss)}
  tr.is-off td{opacity:.5}
  td.gap{color:var(--miss);font-weight:600}
  .steps{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
  .step{
    flex:1 1 190px;
    padding:11px 14px;
    border-right:1px solid var(--line);
    background:var(--surface);
  }
  .step:last-child{border-right:0}
  .step .st-n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3)}
  .step .st-t{font-size:13.5px;font-weight:600;margin:3px 0 2px}
  .step .st-s{font-size:12px;color:var(--ink-2)}
  .step.done{background:var(--ok-soft)}
  .step.done .st-n,.step.done .st-s{color:var(--ok)}
  .step.now{background:var(--mustard-soft)}
  .step.now .st-n,.step.now .st-s{color:var(--mustard)}

  .num-in{
    width:74px;
    font-family:var(--mono);
    font-size:13px;
    text-align:right;
    padding:4px 6px;
    border:1px solid var(--line-2);
    border-radius:3px;
    background:var(--surface);
    color:var(--ink);
  }
  .num-in:focus{outline:2px solid var(--mustard);outline-offset:-1px;border-color:var(--mustard)}
  .num-in.empty{background:var(--surface-2);border-style:dashed}
  tr.diff td{background:var(--miss-soft)}
  tr.match td.d{color:var(--ok)}
  td.d{font-weight:700}

  .warnbox,.okbox{
    border:1px solid;
    border-radius:var(--r);
    padding:12px 14px;
    font-size:13px;
    line-height:1.5;
    margin-top:14px;
  }
  .warnbox{background:var(--miss-soft);border-color:var(--miss);color:var(--miss)}
  .okbox{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
  /* Pozor, ale nie je to chyba. Červená znamená „nedá sa" — a keď sa dá,
     len to má dohru, patrí to sem. */
  .infobox{background:var(--mustard-soft);border-color:var(--mustard);color:var(--mustard)}
  .warnbox strong,.okbox strong{font-weight:700}
  .warnbox p,.okbox p{margin:6px 0 0}
  .warnbox p:first-child,.okbox p:first-child{margin-top:0}

  .cause{
    border-top:1px solid var(--line);
    padding:11px 0;
    display:flex;
    gap:12px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .cause:first-of-type{border-top:0}
  .cause .cw{flex:1;min-width:220px}
  .cause .cd{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}
  .cause .ct{font-size:13.5px;margin:2px 0 0;line-height:1.45}
  .cause select{
    font-size:12.5px;
    padding:5px 7px;
    border:1px solid var(--line-2);
    border-radius:3px;
    background:var(--surface);
    color:var(--ink);
    max-width:100%;
  }
  .btn[disabled]{opacity:.45;cursor:not-allowed}
  .btn[disabled]:hover{border-color:var(--line-2)}

  /* ---------- kalendár ---------- */

  .cal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
  .cal-m{border:1px solid var(--line);border-radius:var(--r);padding:10px 11px 12px;background:var(--surface)}
  .cal-m h4{font-size:12.5px;letter-spacing:.02em;margin-bottom:8px;text-transform:capitalize}
  .cal-dow,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .cal-dow span{
    font-family:var(--mono);
    font-size:9.5px;
    letter-spacing:.06em;
    color:var(--ink-3);
    text-align:center;
    padding-bottom:3px;
  }
  .cal-d{
    aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);
    font-size:11px;
    border:1px solid transparent;
    border-radius:2px;
    background:transparent;
    color:var(--ink-2);
    cursor:pointer;
    padding:0;
  }
  .cal-d.pad{visibility:hidden;cursor:default}
  .cal-d.we{color:var(--faint-ink)}
  .cal-d:hover{border-color:var(--ink-3)}
  .cal-d.hol{background:var(--miss-soft);color:var(--miss);font-weight:700}
  .cal-d.shut{background:var(--mustard-soft);color:var(--mustard);font-weight:700}
  .cal-d.nocook{background:var(--by-lead);color:var(--ink);font-weight:700}
  .cal-d.today{box-shadow:inset 0 0 0 2px var(--petrol)}
  .cal-d[aria-pressed="true"]{outline:2px solid var(--mustard);outline-offset:1px}
  .cal-d:focus-visible{outline:2px solid var(--mustard);outline-offset:1px}
  .sw.hol{background:var(--miss-soft);border-color:var(--miss)}
  .sw.shut{background:var(--mustard-soft);border-color:var(--mustard)}
  .sw.nocook{background:var(--by-lead);border-color:var(--by-lead-line)}

  /* ---------- zastupovanie ---------- */

  .chain{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px}
  .chain-s{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--line-2);
    border-radius:var(--r);
    padding:4px 9px;
    background:var(--surface);
  }
  .chain-s .cn{font-weight:600}
  .chain-s .cx{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
  .chain-s.out{background:var(--surface-2);color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}
  .chain-s.out .cn{font-weight:400}
  .chain-s.hit{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
  .chain-s.none{background:var(--miss-soft);border-color:var(--miss);color:var(--miss)}
  .chain-a{color:var(--ink-3);font-family:var(--mono);font-size:12px}

  .abs-row{
    display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  .abs-row:last-child{border-bottom:0}
  .abs-row .an{flex:1;min-width:120px;font-size:13.5px}
  .abs-row .ad{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
  .abs-row .btn{padding:4px 9px;font-size:12px}
  .abs-row .pill{white-space:nowrap}

  footer{
    border-top:1px solid var(--line);
    padding:26px 0 40px;
    color:var(--ink-3);
    font-size:12.5px;
  }
  footer .wrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
  footer code{font-family:var(--mono);font-size:12px}

  /* ---------- tabuľa v jedálni ---------- */

  .board{
    background:#0E2B2A;
    color:#F2F5F4;
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:clamp(16px,2.2vw,30px);
    font-size:clamp(13px,1.15vw,17px);
    container-type:inline-size;
  }
  .board-top{
    display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    padding-bottom:.9em;
    border-bottom:2px solid #235350;
  }
  .board-name{
    font-family:var(--mono);font-weight:700;
    font-size:1.7em;letter-spacing:.06em;
  }
  .board-date{font-size:1.15em;color:#9FC4C0}
  .board-clock{
    margin-left:auto;
    font-family:var(--mono);font-weight:700;
    font-size:1.9em;font-variant-numeric:tabular-nums;
    color:#E0A233;
  }

  .board-cols{display:grid;grid-template-columns:1fr;gap:1.6em;padding:1.2em 0}
  @container (min-width:640px){ .board-cols{grid-template-columns:2fr 1fr} }

  .board-h{
    font-family:var(--mono);font-size:.85em;letter-spacing:.2em;
    text-transform:uppercase;color:#7FA9A5;margin:0 0 .7em;
  }
  .board-cat{
    font-family:var(--mono);font-size:.95em;letter-spacing:.08em;
    color:#9FC4C0;margin:1.1em 0 .5em;
  }
  .board-cat:first-of-type{margin-top:0}

  .board-item{
    display:flex;align-items:center;gap:.7em;
    padding:.42em 0;
    border-bottom:1px solid #1C4442;
  }
  .board-let{
    flex:0 0 auto;
    min-width:1.9em;height:1.9em;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-weight:700;font-size:1.5em;
    color:#0E2B2A;background:#E0A233;border-radius:3px;
  }
  .board-meal{flex:1;min-width:0;font-size:1.25em;line-height:1.25}
  .board-meal .noname{color:#7FA9A5}
  .board-cnt{
    font-family:var(--mono);font-weight:700;font-size:1.5em;
    font-variant-numeric:tabular-nums;color:#F2F5F4;
  }
  .board-cnt span{font-size:.55em;color:#7FA9A5;font-weight:400;margin-left:.3em}

  .board-next .board-item{padding:.3em 0}
  .board-next .board-let{font-size:1.15em;min-width:1.7em;height:1.7em}
  .board-next .board-meal{font-size:1em}

  .board-foot{
    display:flex;align-items:center;gap:1em;flex-wrap:wrap;
    border-top:2px solid #235350;
    padding-top:.9em;
    font-size:1.15em;
  }
  .board-foot strong{color:#E0A233;font-family:var(--mono)}
  .board-warn{
    margin-left:auto;
    font-family:var(--mono);font-weight:700;
    background:#E0A233;color:#231705;
    padding:.25em .7em;border-radius:3px;
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }

  /* ---------- doplnky appky ----------
     Preview bolo jedna stránka s prepínaním; appka má naozajstné odkazy,
     prihlasovaciu stránku a lištu s menom prihláseného. */

  a.tab{text-decoration:none;display:inline-block}
  a.btn{text-decoration:none;display:inline-block}
  .tab[aria-current="page"]{
    background:var(--bar-sel);
    color:var(--bar-sel-fg);
    font-weight:700;
  }
  a.brand{text-decoration:none;color:inherit}

  .odhlas{display:flex;align-items:center;gap:10px}
  .odhlas .kto{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
    color:var(--bar-dim);white-space:nowrap;
  }
  @media (max-width:700px){
    .odhlas{width:100%;justify-content:space-between}
    .tabs{margin-left:0}
  }

  body.hola{display:flex;align-items:center;justify-content:center;min-height:100svh}
  body.hola main{padding:24px 0}

  .prihlas{width:min(380px,92vw);margin:0 auto}
  .prihlas .card{padding:30px 24px 26px}
  .prihlas-znak{
    display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px;
  }
  .prihlas .warnbox{margin:0 0 16px}

  /* Hláška nad kartou sa jej nesmie lepiť na okraj. */
  .warnbox + .card,.okbox + .card,.infobox + .card{margin-top:18px}
  /* Hláška vnútri karty — nesmie sa lepiť na popisku poľa pod sebou. */
  .card > .warnbox,.card > .okbox{margin-bottom:18px}

  /* Formuláre číselníkov a ľudí. */
  .field textarea{
    width:100%;font-family:var(--mono);font-size:13.5px;line-height:1.55;
    padding:10px 12px;background:var(--surface);color:var(--ink);
    border:1px solid var(--line-2);border-radius:var(--r);resize:vertical;
  }
  .field textarea:focus{outline:2px solid var(--mustard);outline-offset:-1px;border-color:var(--mustard)}

  details > summary{cursor:pointer;list-style:none}
  details > summary::-webkit-details-marker{display:none}
  details[open] > summary{background:var(--petrol);color:var(--on-petrol);border-color:var(--petrol)}
  /* Zhrnutie je štandardne blokové a rozťahovalo by sa cez celú kartu —
     ako tlačidlo má byť široké presne toľko, koľko je v ňom textu. */
  details.vlozenie{margin-top:6px}
  details.vlozenie > summary{display:inline-block}

  .riadok-akcia{display:inline}
  td.akcie{white-space:nowrap}
  td.akcie .btn{margin-right:4px}
  .riadok-akcia .btn{padding:4px 10px;font-size:12px}
  table.data td .btn{padding:4px 10px;font-size:12px;text-decoration:none;display:inline-block}
  table.data a{color:var(--petrol);font-weight:600}
  th.chk,td.chk{width:34px;text-align:center}
  /* Zaškrtávacie políčko v širokom stĺpci — nie tá úzka bunka zo zoznamu ľudí. */
  td.tick{text-align:center}
  td.tick .check{display:inline-flex;justify-content:center}

  .hromadne{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 16px;margin:14px 0 10px}
  .hromadne .field{margin-bottom:10px}
  .filtre .hromadne{margin-top:0}
  /* Druhý riadok v bunke — predák pri názve tímu. Opakovať jeho meno
     vo vlastnom stĺpci pri každom človeku bolo len šum. */
  .podriadok{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}

  /* Mriežka na názvy jedál — päť dní × počet jedál. */
  table.menu-mriezka th.oznak{
    font-family:var(--mono);font-weight:700;text-align:center;width:44px;
    background:var(--surface-2);
  }
  table.menu-mriezka td{padding:4px}
  table.menu-mriezka input[type="text"]{
    width:100%;min-width:150px;font-family:var(--sans);font-size:13.5px;
    padding:7px 9px;background:var(--surface);color:var(--ink);
    border:1px solid var(--line-2);border-radius:var(--r);
  }
  table.menu-mriezka input:focus{outline:2px solid var(--mustard);outline-offset:-1px;border-color:var(--mustard)}
  table.menu-mriezka input[readonly]{background:var(--surface-2);color:var(--ink-2)}
  /* Návrh prečítaný z lístka — kým sa neuloží, je vidieť, že ho nikto
     nepotvrdil. */
  table.menu-mriezka input.navrh{background:var(--mustard-soft);border-color:var(--mustard)}
  /* Polievka nie je jedlo na výber — v mriežke je nad nimi a oddelená. */
  table.menu-mriezka tr.polievka-riadok td,table.menu-mriezka tr.polievka-riadok th{
    border-bottom:2px solid var(--line-2);
  }
  table.menu-mriezka tr.polievka-riadok th.oznak{color:var(--ink-3)}

  /* Deň po dennej uzávierke. Voľba ostáva čitateľná, ale je jasné, že sa
     s ňou už nedá hýbať — kuchyňa podľa nej varila. */
  table.matrix td.po-case{background:repeating-linear-gradient(
    135deg,transparent,transparent 5px,var(--surface-2) 5px,var(--surface-2) 10px)}
  .legend .sw.zamok{background:repeating-linear-gradient(
    135deg,transparent,transparent 3px,var(--line-2) 3px,var(--line-2) 6px);
    border:1px solid var(--line-2)}

  /* Vlastný riadok v matici. Predák a správca objednávajú aj sebe a v dlhom
     zozname sa hľadali — tak je ich riadok prvý a viditeľne oddelený. */
  table.matrix tr.ja th:first-child{box-shadow:inset 3px 0 0 var(--petrol)}
  table.matrix tr.ja > *{border-bottom:2px solid var(--line-2)}
  table.matrix tr.ja .nm{font-weight:700}
  table.matrix .nm .badge{margin-left:8px;vertical-align:2px}

  /* Týždeň stravníka je len na pozeranie. Políčka musia vyzerať ako záznam,
     nie ako formulár — klikať sa dá a neuloží sa nič je horšie než nedať
     klikať vôbec. */
  .opts.citaj .opt-b{cursor:default;opacity:.6}
  .opts.citaj .opt-b:has(input:checked){opacity:1}
  .opts.citaj .opt-b:hover{border-color:var(--line-2)}

  /* Jedálny lístok nad maticou. Do buniek matice sa názov jedla nezmestí,
     tak je celý lístok tu — inak by predák pri „C" nevedel, čo C je. */
  .listky{margin-bottom:18px}
  .listok + .listok{margin-top:10px}
  .listok > summary{display:inline-block}
  table.listok-tab{margin-top:10px;table-layout:fixed}
  table.listok-tab td{font-size:12.5px;line-height:1.4;vertical-align:top;padding:7px 9px}
  table.listok-tab th.oznak{width:40px}
  table.listok-tab thead th{width:auto}
  table.listok-tab tr.polievka-riadok td,table.listok-tab tr.polievka-riadok th{
    border-bottom:2px solid var(--line-2);color:var(--ink-2);
  }

  .field input[type="file"]{
    font-family:var(--sans);font-size:13.5px;color:var(--ink-2);
    padding:8px 0;
  }
  .note a{color:var(--petrol);font-weight:600}
  .field input[type="search"]{
    width:100%;font-family:var(--sans);font-size:15px;padding:10px 12px;
    background:var(--surface);color:var(--ink);
    border:1px solid var(--line-2);border-radius:var(--r);
  }
  .field input[type="search"]:focus{outline:2px solid var(--mustard);outline-offset:-1px;border-color:var(--mustard)}
  .note .btn{margin-top:6px}

  /* Bunky matice sú v appke prepínače (radio) v popiske, nie tlačidlá.
     Vyzerajú rovnako ako v preview, ale klávesnica aj odoslanie formulára
     fungujú bez jediného riadku JavaScriptu. */
  .opt-b{position:relative}
  .opt-b input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
  .opt-b:has(input:checked){
    background:var(--mustard-soft);
    color:var(--mustard);
    border-color:var(--mustard);
    font-weight:700;
  }
  .opt-b.none:has(input:checked){
    background:var(--ink-3);
    color:var(--surface);
    border-color:var(--ink-3);
    font-weight:700;
  }
  .opt-b:has(input:focus-visible){outline:2px solid var(--mustard);outline-offset:2px}
  .opt-b.vzor{cursor:default}

  /* Text len pre čítačku obrazovky — bunka ukazuje „B", čítačka povie
     „GASTROGAL, jedlo B". */
  .len-pre-citacku{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }

  table.matrix td.cnt,table.matrix th.cnt{
    text-align:center;font-family:var(--mono);font-weight:700;
    padding:0 10px;font-variant-numeric:tabular-nums;
  }
  table.matrix td.gap{background:var(--surface-2)}
  /* Značka pri bunke: prečo je človek v ten deň preč. */
  .precmark{
    position:absolute;top:2px;right:3px;
    font-family:var(--mono);font-size:9.5px;font-weight:700;
    letter-spacing:.04em;color:var(--ink-3);
    border:1px solid var(--line-2);border-radius:2px;
    padding:0 3px;background:var(--surface);
    cursor:help;
  }

  /* Značka pri bunke vľavo: obed bol dopísaný spätne, jedáleň ho neobjednala.
     Vpravo je značka neprítomnosti, tak sa nemajú kde stretnúť. */
  .spmark{
    position:absolute;top:2px;left:3px;
    font-family:var(--mono);font-size:9.5px;font-weight:700;
    letter-spacing:.04em;color:#fff;background:var(--mustard);
    border-radius:2px;padding:0 3px;cursor:help;
  }
  /* V legende stojí tá istá značka mimo bunky, tak nesmie plávať v rohu. */
  .spmark.vzor{position:static;cursor:default}

  table.matrix td.bez-jedalne{
    padding:10px 12px;font-size:12.5px;color:var(--ink-3);
  }
  table.matrix td.bez-jedalne a{color:var(--petrol);font-weight:600}

  /* Rola predáka: dve možnosti vedľa seba, nie pod sebou. `.check` je flex,
     takže bez tohto by sa „predák" a „zástupca" zalomili na dva riadky a
     vyzeralo by to ako odsadená podpoložka mena. */
  /* `display:flex` priamo na bunke by z nej prestal robiť bunku a rám riadku by
     sa rozpadol — preto sa zvnútra menia len samotné popisky. */
  table.data.vedenie td.rola{white-space:nowrap}
  table.data.vedenie td.rola .check{display:inline-flex;cursor:pointer;margin-right:18px}
  table.data.vedenie th:last-child,
  table.data.vedenie td.tick{width:80px;text-align:center}

  /* ---------- spätný zápis ---------- */

  /* Mesiac je dvadsať stĺpcov namiesto piatich. Bunka je preto jedno políčko
     so zoznamom, nie stĺpec prepínačov — inak sa tabuľka nezmestí ani na
     veľkú obrazovku. */
  table.matrix.uzka{min-width:0}
  table.matrix.uzka td{padding:5px 4px;text-align:center}
  table.matrix.uzka thead th{padding:8px 4px;text-align:center}
  table.matrix.uzka thead th .dn,
  table.matrix.uzka thead th .dnum{display:block}
  select.sp-bunka{
    width:100%;min-width:58px;max-width:86px;
    padding:5px 4px;
    font-family:var(--mono);font-size:13px;text-align:center;
    border:1px solid var(--line-2);border-radius:var(--r);
    background:var(--surface);color:var(--ink);
  }
  select.sp-bunka:focus-visible{outline:2px solid var(--petrol);outline-offset:1px}
  /* Príznak ostáva na dni natrvalo — má byť vidieť aj o pol roka. */
  table.matrix td.spatne{background:var(--mustard-soft)}
  .sw.spatne{background:var(--mustard-soft);border-color:var(--mustard)}

  table.data code{font-family:var(--mono);font-size:12.5px}