:root{
    color-scheme: light;
    --page:#f9f9f7; --surface:#fcfcfb;
    --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
    --hair:#e1e0d9; --border:rgba(11,11,11,.10);
    --accent:#2a78d6; --accent-soft:rgba(42,120,214,.10); --accent-ink:#ffffff;
    --good:#0ca30c; --good-text:#006300; --critical:#d03b3b; --warning:#fab219;
    --rec:#d03b3b;
  }
  @media (prefers-color-scheme: dark){
    :root{
      color-scheme: dark;
      --page:#0d0d0d; --surface:#1a1a19;
      --ink:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
      --hair:#2c2c2a; --border:rgba(255,255,255,.10);
      --accent:#3987e5; --accent-soft:rgba(57,135,229,.14); --accent-ink:#0d0d0d;
      --good-text:#0ca30c;
    }
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0; background:var(--page); color:var(--ink);
    font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
    display:flex; justify-content:center;
  }
  .app{
    width:100%; max-width:430px; min-height:100dvh;
    display:flex; flex-direction:column; position:relative;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  }

  header{display:flex; align-items:center; justify-content:space-between; padding:14px 18px 10px; gap:10px}
  .brand{font-weight:650; font-size:15px}
  .brand small{display:block; font-weight:450; font-size:11.5px; color:var(--ink-3); margin-top:1px}
  .h-right{display:flex; align-items:center; gap:8px}
  .net{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    border:1px solid var(--border); background:var(--surface); border-radius:99px; padding:4px 10px; color:var(--ink-2)}
  .net i{width:8px; height:8px; border-radius:99px; background:var(--good); display:inline-block}
  .net.off i{background:var(--warning)}
  .icon-btn{border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
    border-radius:99px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
  .icon-btn.on{color:var(--accent); border-color:var(--accent)}
  .avatar{width:32px; height:32px; border-radius:99px; background:var(--accent); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}

  .banner{margin:4px 18px 0; padding:9px 12px; border-radius:10px;
    background:var(--accent-soft); border:1px solid var(--border);
    font-size:12.5px; color:var(--ink-2); display:none; position:relative}
  .banner.show{display:block}
  .banner b{color:var(--ink)}
  .banner .b-close{position:absolute; top:6px; right:8px; border:0; background:none; color:var(--ink-3);
    font-size:15px; cursor:pointer; padding:2px 6px}

  .rec-zone{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; padding:22px 0 16px; gap:14px}
  .timer{font-size:15px; font-weight:600; color:var(--ink-3); min-height:22px; font-variant-numeric:tabular-nums}
  .timer.on{color:var(--rec)}
  .rec-btn{
    width:180px; height:180px; border-radius:999px; border:0; cursor:pointer;
    background:var(--accent); color:var(--accent-ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    font:inherit; font-weight:700; font-size:17px; letter-spacing:.02em;
    box-shadow:0 10px 34px rgba(42,120,214,.35);
    transition:transform .12s, background .2s, box-shadow .2s; position:relative;
  }
  .rec-btn:active{transform:scale(.97)}
  .rec-btn svg{width:42px; height:42px}
  .rec-btn.recording{background:var(--rec); box-shadow:0 10px 34px rgba(208,59,59,.4)}
  .rec-btn.recording::before,.rec-btn.recording::after{
    content:""; position:absolute; inset:-14px; border-radius:999px;
    border:2px solid var(--rec); opacity:0; animation:pulse 1.8s ease-out infinite;
  }
  .rec-btn.recording::after{animation-delay:.9s}
  @keyframes pulse{0%{transform:scale(.92); opacity:.7}100%{transform:scale(1.18); opacity:0}}
  @media (prefers-reduced-motion: reduce){ .rec-btn.recording::before,.rec-btn.recording::after{animation:none} }
  .hint{font-size:13px; color:var(--ink-3); text-align:center; padding:0 30px}

  .queue{flex:1 1 auto; overflow-y:auto; padding:6px 18px 96px}
  .q-title{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
    margin:14px 0 8px; display:none}
  .q-title.show{display:block}
  .item{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:10px}
  .i-head{display:flex; align-items:center; gap:10px}
  .i-ico{flex:0 0 34px; width:34px; height:34px; border-radius:99px; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center; color:var(--accent)}
  .i-meta{flex:1 1 auto; min-width:0}
  .i-name{font-weight:600; font-size:14px}
  .i-status{font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:6px}
  .i-status .spin{width:11px; height:11px; border-radius:99px; border:2px solid var(--hair);
    border-top-color:var(--accent); animation:rot .8s linear infinite; display:inline-block}
  @keyframes rot{to{transform:rotate(360deg)}}
  .i-status.ok{color:var(--good-text); font-weight:600}
  .i-status.wait{color:var(--warning); font-weight:600}
  .i-del{border:0; background:none; color:var(--ink-3); cursor:pointer; padding:6px; border-radius:8px}
  .i-del:hover{color:var(--critical); background:var(--accent-soft)}
  audio{width:100%; margin-top:10px; height:36px}

  .tasks{margin-top:10px; display:none}
  .tasks.show{display:block}
  .tcard{border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:9px;
    background:var(--page); padding:8px 10px; margin-top:7px; font-size:13px}
  .t-top{display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-weight:650; font-size:11.5px}
  .t-who{background:var(--accent); color:var(--accent-ink); border-radius:6px; padding:1px 7px}
  .t-due{color:var(--ink-3)}
  .t-urgent{color:var(--critical)}
  .t-guess{color:var(--warning); font-weight:700}
  .t-txt{margin-top:3px; color:var(--ink-2)}
  .t-note{font-size:11.5px; color:var(--ink-3); margin-top:8px; border-top:1px dashed var(--hair); padding-top:7px}
  .empty{color:var(--ink-3); font-size:13.5px; text-align:center; padding:22px 20px}

  /* ---------- FAB ---------- */
  .fab{
    position:fixed; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:60;
    width:58px; height:58px; border-radius:99px; border:0; cursor:pointer;
    background:var(--surface); color:var(--accent);
    border:1px solid var(--border);
    box-shadow:0 8px 26px rgba(0,0,0,.18);
    display:flex; align-items:center; justify-content:center;
  }
  .fab-badge{position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; border-radius:99px;
    background:var(--critical); color:#fff; font-size:11px; font-weight:700;
    display:none; align-items:center; justify-content:center; padding:0 5px}
  .fab-badge.show{display:flex}

  /* ---------- prehľad sheet ---------- */
  .sheet{position:fixed; inset:0; z-index:100; background:var(--page);
    max-width:430px; margin:0 auto; display:none; flex-direction:column;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
  .sheet.open{display:flex}
  .s-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px 8px}
  .s-head h2{margin:0; font-size:17px}
  .s-close{border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
    border-radius:99px; width:32px; height:32px; font-size:15px; cursor:pointer}
  .stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:4px 18px 10px}
  .stat{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px}
  .stat b{display:block; font-size:18px; font-weight:650}
  .stat span{font-size:10.5px; color:var(--ink-3); letter-spacing:.02em}
  .stat b.late{color:var(--critical)}
  .stat b.done{color:var(--good-text)}
  .stat .names{display:block; font-size:10.5px; color:var(--critical); font-weight:650; margin-top:2px; line-height:1.25}
  .push-mock{border:1px solid var(--border); background:var(--surface); border-radius:14px;
    padding:10px 12px; margin-bottom:12px; box-shadow:0 6px 18px rgba(0,0,0,.10); font-size:12.6px}
  .push-mock .pm-top{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
  .push-mock .pm-top i{width:7px; height:7px; border-radius:99px; background:var(--accent); display:inline-block}
  .push-mock b{display:block; font-size:13px}
  .push-mock span{color:var(--ink-2)}
  .push-mock .pm-note{font-size:11px; color:var(--ink-3); margin-top:6px; border-top:1px dashed var(--hair); padding-top:6px}
  .worker-link{border:0; background:none; color:var(--accent); font:inherit; font-size:13px;
    font-weight:600; cursor:pointer; text-decoration:underline; padding:2px 8px}
  .tabs{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 18px 10px}
  .tab{border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
    border-radius:12px; padding:12px 8px; font:inherit; font-size:15px; font-weight:650;
    cursor:pointer; text-align:center; line-height:1.2}
  .tab small{display:block; font-size:11.5px; font-weight:600; color:var(--ink-3); margin-top:3px}
  .tab.on{background:var(--accent); color:var(--accent-ink); border-color:transparent}
  .tab.on small{color:var(--accent-ink); opacity:.85}
  .people{padding:0 18px 10px; flex:0 0 auto}
  .pchip{border:1px dashed var(--border); background:none; color:var(--ink-3);
    border-radius:99px; padding:4px 10px; font:inherit; font-size:11.8px; font-weight:600; cursor:pointer; white-space:nowrap}
  .pchip.on{border-style:solid; color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
  .list{flex:1 1 auto; overflow-y:auto; padding:2px 18px 24px}
  .row{background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:10px 12px; margin-bottom:8px; display:flex; gap:10px; align-items:flex-start}
  .chk{flex:0 0 26px; width:26px; height:26px; border-radius:99px; border:2px solid var(--hair);
    background:none; cursor:pointer; margin-top:2px; display:flex; align-items:center; justify-content:center; color:transparent}
  .row.done .chk{background:var(--good); border-color:var(--good); color:#fff}
  .r-main{flex:1 1 auto; min-width:0}
  .r-txt{font-size:13.8px; font-weight:550; line-height:1.35}
  .row.done .r-txt{text-decoration:line-through; color:var(--ink-3); font-weight:450}
  .r-meta{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px; font-size:11.5px; font-weight:650}
  .r-who{background:var(--accent-soft); color:var(--accent); border-radius:6px; padding:1px 7px}
  .r-due{color:var(--ink-3); font-weight:550}
  .r-late{color:var(--critical)}
  .r-urgent{color:var(--critical)}
  .r-guess{color:var(--warning)}
  .r-stavba{color:var(--ink-3); font-weight:450}
  .s-note{font-size:11.5px; color:var(--ink-3); text-align:center; padding:8px 24px 4px}

  .toast{position:fixed; bottom:calc(92px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--page); font-size:13px; font-weight:600;
    border-radius:99px; padding:8px 16px; z-index:120; opacity:0; pointer-events:none; transition:opacity .25s}
  .toast.show{opacity:.92}

  /* ---------- doplnky oproti prototypu ---------- */
  .hidden{display:none !important}
  .i-retry{border:1px solid var(--border); background:var(--surface); color:var(--accent);
    border-radius:8px; padding:5px 10px; font:inherit; font-size:12px; font-weight:650;
    cursor:pointer; margin-top:8px}
  .i-status.err{color:var(--critical); font-weight:600}
  .r-note{font-size:11.5px; color:var(--ink-3); margin-top:4px; font-style:italic}
  .r-unknown{color:var(--warning); font-weight:700}
  .refresh{border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
    border-radius:99px; width:32px; height:32px; font-size:14px; cursor:pointer}
  .loading{color:var(--ink-3); font-size:13px; text-align:center; padding:18px}

  /* ---------- tlačidlo S (správa) ---------- */
  .fab-admin{left:18px; right:auto !important; color:var(--ink-2)}
  .fab-s{font-weight:800; font-size:19px; letter-spacing:.02em}

  /* ---------- panel správy ---------- */
  .a-sec{margin:16px 0 6px; font-size:12px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-3)}
  .a-row{background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:11px 12px; margin-bottom:8px}
  .a-row.caka{border-left:3px solid var(--warning)}
  .a-meno{font-size:14.5px; font-weight:650}
  .a-detail{font-size:11.8px; color:var(--ink-3); margin-top:3px; word-break:break-word}
  .a-akcie{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
  .a-btn{border:1px solid var(--border); background:var(--page); color:var(--ink-2);
    border-radius:8px; padding:6px 11px; font:inherit; font-size:12px; font-weight:650; cursor:pointer}
  .a-btn.hlavne{background:var(--accent); color:var(--accent-ink); border-color:transparent}
  .a-btn.zle{color:var(--critical)}
  .a-znak{display:inline-block; font-size:10.5px; font-weight:700; border-radius:5px;
    padding:1px 6px; margin-left:6px; vertical-align:1px}
  .a-znak.sef{background:var(--accent-soft); color:var(--accent)}
  .a-znak.spravca{background:var(--warning); color:#0b0b0b}
  .a-form{display:flex; flex-direction:column; gap:8px; background:var(--surface);
    border:1px solid var(--border); border-radius:12px; padding:12px}
  .a-form input, .a-form select, .a-form textarea{border:1px solid var(--border);
    background:var(--page); color:var(--ink); border-radius:9px; padding:9px 10px;
    font:inherit; font-size:14px; width:100%; box-sizing:border-box}
  .a-form textarea{min-height:110px; resize:vertical}
  .a-riadok{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-2)}
  .a-odhlas{margin:26px 0 10px; text-align:center}

  /* ---------- prihlásenie ---------- */
  .auth{position:fixed; inset:0; z-index:200; display:none; align-items:center;
    justify-content:center; padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 80% at 50% -10%, var(--accent-soft) 0%, transparent 60%),
      var(--page);
    overflow-y:auto}
  .auth.show{display:flex}
  .auth-card{width:100%; max-width:380px; background:var(--surface);
    border:1px solid var(--border); border-radius:22px; padding:26px 22px 20px;
    box-shadow:0 18px 44px rgba(0,0,0,.12); animation:vstup .3s ease}
  @keyframes vstup{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){ .auth-card{animation:none} }
  .auth-znak{width:56px; height:56px; margin:0 auto 14px; border-radius:18px;
    background:var(--accent); color:var(--accent-ink); display:flex; align-items:center;
    justify-content:center; box-shadow:0 8px 22px rgba(42,120,214,.32)}
  .auth-znak svg{width:28px; height:28px}
  .auth-nadpis{margin:0; font-size:23px; font-weight:700; text-align:center; letter-spacing:-.01em}
  .auth-podnadpis{margin:3px 0 20px; font-size:12.5px; text-align:center; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:.08em; font-weight:600}
  .auth-tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:18px;
    background:var(--page); border:1px solid var(--border); border-radius:12px; padding:4px}
  .auth-tab{border:0; background:none; color:var(--ink-3); border-radius:9px; padding:10px 6px;
    font:inherit; font-size:13.5px; font-weight:650; cursor:pointer; transition:background .18s, color .18s}
  .auth-tab.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.10)}
  .auth-form{display:flex; flex-direction:column; gap:13px}
  .pole{display:flex; flex-direction:column; gap:6px}
  .pole > span{font-size:12px; font-weight:650; color:var(--ink-2)}
  .pole > span i{font-weight:450; font-style:normal; color:var(--ink-3)}
  .pole input{border:1px solid var(--border); background:var(--page); color:var(--ink);
    border-radius:12px; padding:13px 12px; font:inherit; font-size:16px; font-weight:450;
    width:100%; box-sizing:border-box; transition:border-color .15s, box-shadow .15s}
  .pole input::placeholder{color:var(--ink-3); opacity:.7}
  .pole input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  .pole input:user-invalid{border-color:var(--critical)}
  .pole-heslo{position:relative; display:block}
  .pole-heslo input{padding-right:46px}
  .oko{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0;
    background:none; font-size:15px; cursor:pointer; padding:8px; opacity:.55; line-height:1}
  .oko:hover{opacity:1}
  .pole-tip{font-size:11.5px; font-style:normal; color:var(--ink-3)}
  .pole-tip.ok{color:var(--good-text); font-weight:600}
  .auth-btn{background:var(--accent); color:var(--accent-ink); border:0; border-radius:12px;
    padding:15px; font:inherit; font-size:15.5px; font-weight:700; cursor:pointer; margin-top:5px;
    transition:transform .12s, opacity .2s}
  .auth-btn:active{transform:scale(.985)}
  .auth-btn[disabled]{opacity:.6; cursor:default}
  .auth-note{font-size:11.8px; color:var(--ink-3); margin:4px 0 0; line-height:1.45; text-align:center}
  .auth-msg{font-size:13px; margin-top:14px; text-align:center; min-height:18px; line-height:1.45}
  .auth-msg.err{color:var(--critical); font-weight:600}
  .auth-msg.ok{color:var(--good-text); font-weight:600}

  /* ---------- menu pod avatarom ---------- */
  .avatar{border:0; cursor:pointer; font:inherit}
  .menu-tien{position:fixed; inset:0; z-index:140; background:rgba(0,0,0,.28); display:none}
  .menu-tien.show{display:block}
  .menu{position:fixed; z-index:150; top:calc(env(safe-area-inset-top) + 54px); right:14px;
    width:min(290px, calc(100vw - 28px)); background:var(--surface);
    border:1px solid var(--border); border-radius:16px; padding:6px;
    box-shadow:0 16px 40px rgba(0,0,0,.20); display:none; animation:menuvstup .16s ease}
  .menu.show{display:block}
  @keyframes menuvstup{from{opacity:0; transform:translateY(-6px) scale(.98)}to{opacity:1; transform:none}}
  .menu-hlava{display:flex; align-items:center; gap:10px; padding:10px 10px 12px;
    border-bottom:1px solid var(--hair); margin-bottom:5px}
  .menu-avatar{width:38px; height:38px; border-radius:99px; background:var(--accent);
    color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:15px; flex:0 0 38px}
  .menu-hlava b{display:block; font-size:14.5px}
  .menu-hlava small{display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px}
  .menu-polozka{display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; border:0; background:none; color:var(--ink); border-radius:10px;
    padding:12px 10px; font:inherit; font-size:14px; font-weight:550; cursor:pointer; text-align:left}
  .menu-polozka:hover{background:var(--accent-soft)}
  .menu-polozka i{font-style:normal; font-size:12px; color:var(--ink-3); font-weight:600}
  .menu-polozka.zle{color:var(--critical)}
  .menu-form{display:flex; flex-direction:column; gap:8px; padding:6px 10px 10px}
  .menu-form input{border:1px solid var(--border); background:var(--page); color:var(--ink);
    border-radius:9px; padding:10px; font:inherit; font-size:15px; width:100%; box-sizing:border-box}
  .menu-sprava{font-size:12px; text-align:center; min-height:16px}
  .menu-sprava.err{color:var(--critical); font-weight:600}
  .menu-sprava.ok{color:var(--good-text); font-weight:600}

  /* ---------- hľadanie a skupiny ---------- */
  .hladanie{padding:0 18px 10px; flex:0 0 auto}
  .hladanie input{width:100%; box-sizing:border-box; border:1px solid var(--border);
    background:var(--surface); color:var(--ink); border-radius:11px; padding:10px 12px;
    font:inherit; font-size:15px}
  .hladanie input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  .skupina{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--ink-3); margin:14px 2px 7px}
  .skupina:first-child{margin-top:2px}
  .skupina.late{color:var(--critical)}

  /* ---------- riadok úlohy ---------- */
  .row{animation:riadok .2s ease}
  @keyframes riadok{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){ .row{animation:none} }
  .chk{min-width:30px; min-height:30px}
  .r-viac{border:0; background:none; color:var(--ink-3); font-size:19px; line-height:1;
    padding:2px 6px; cursor:pointer; border-radius:8px; align-self:flex-start}
  .r-viac:hover{background:var(--accent-soft); color:var(--accent)}
  .r-dorucenie{font-size:11px; color:var(--ink-3); font-weight:600}
  .r-dorucenie.videl{color:var(--good-text)}
  .r-problem{margin-top:6px; font-size:11.8px; color:var(--critical); background:rgba(208,59,59,.09);
    border-radius:8px; padding:6px 8px; line-height:1.4}
  .r-akcie{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
  .empty b{display:block; color:var(--ink-2); font-size:14.5px; margin-bottom:4px}

  /* ---------- sheet animácia a dotykové ciele ---------- */
  .sheet.open{animation:zdola .22s ease}
  @keyframes zdola{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){ .sheet.open{animation:none} }
  .icon-btn, .s-close, .refresh{min-width:36px; min-height:36px}
  .a-btn{min-height:36px}
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px}

  /* ---------- toast s akciou ---------- */
  .toast{display:flex; align-items:center; gap:10px}
  .toast-akcia{border:0; background:none; color:var(--accent); font:inherit; font-size:13px;
    font-weight:750; cursor:pointer; padding:0 2px}

  /* ---------- notifikácie natvrdo ---------- */
  .banner.dolezity{background:rgba(250,178,25,.14); border-color:var(--warning)}
  .banner.dolezity b{color:var(--ink)}
  .menu-polozka span small{display:block; font-size:11px; font-weight:450; color:var(--ink-3);
    margin-top:2px}

  /* ---------- učenie o Jožovi ---------- */
  .u-profil{white-space:pre-wrap; font:inherit; font-size:12.8px; line-height:1.55;
    color:var(--ink-2); background:var(--page); border:1px solid var(--border);
    border-radius:10px; padding:12px; margin:10px 0 4px; max-height:340px; overflow-y:auto}
  .u-zoznam{margin:6px 0 0; padding-left:18px}
  .u-zoznam li{margin-bottom:3px}

  /* ---------- mobil ---------- */
  @media (max-width: 430px){
    .stats{grid-template-columns:1fr 1fr 1fr; gap:6px; padding:4px 14px 8px}
    .stat{padding:7px 8px}
    .stat b{font-size:16px}
    .tabs{padding:0 14px 8px}
    .tab{padding:11px 6px; font-size:14px}
    .hladanie{padding:0 14px 8px}
    .list, .queue{padding-left:14px; padding-right:14px}
    .people{padding-left:14px; padding-right:14px}
    .rec-btn{width:170px; height:170px}
    .menu{right:10px; width:calc(100vw - 20px)}
    .a-form input, .a-form select, .a-form textarea{font-size:16px}  /* iOS inak zoomuje */
    .pole input{font-size:16px}
  }
  @media (max-height: 700px){
    .rec-zone{padding:14px 0 10px}
    .rec-btn{width:150px; height:150px}
  }
  /* na dotykových displejoch nemá hover zmysel */
  @media (hover: none){
    .menu-polozka:hover, .r-viac:hover, .i-del:hover{background:none}
  }

  .push-vyzva{display:flex; align-items:center; gap:10px; margin:0 18px 10px; padding:11px 12px;
    background:rgba(250,178,25,.14); border:1px solid var(--warning); border-radius:12px;
    font-size:12.8px; color:var(--ink-2)}
  .push-vyzva b{color:var(--ink)}
  .push-vyzva button{flex:0 0 auto}
  @media (max-width: 430px){ .push-vyzva{margin:0 14px 8px} }

  /* ---------- maily a poznámky v prehľade ---------- */
  .m-karta{margin-bottom:10px}
  .m-hlava{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-3)}
  .m-karta textarea{min-height:190px; line-height:1.5; font-size:14px}
  .m-diktat{font-size:11.5px; color:var(--ink-3); font-style:italic; line-height:1.4}
  .r-akcie .a-btn{font-size:12px}
  .hint-hlas{font-size:12px; color:var(--ink-3); text-align:center; padding:0 26px; line-height:1.5}

  /* ---------- spoľahlivosť ---------- */
  .s-riadok{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:8px 0;
    border-bottom:1px solid var(--hair); font-size:13.5px}
  .s-riadok:last-of-type{border-bottom:0}
  .s-percento{font-weight:700; font-size:13px}
  .s-detail{grid-column:1 / -1; font-size:11.5px; color:var(--ink-3)}
  .s-riadok.zle b, .s-riadok.zle .s-percento{color:var(--critical)}

  /* ---------- filter podľa človeka ---------- */
  .filter-osoba{width:100%; box-sizing:border-box; border:1px solid var(--border);
    background:var(--surface); color:var(--ink); border-radius:11px; padding:10px 12px;
    font:inherit; font-size:15px; font-weight:600;
    appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                     linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
  .filter-osoba:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  @media (max-width: 430px){ .people{padding:0 14px 8px} }