:root{
  --bg:#EEF4F2; --panel:#FFFFFF; --panel2:#F6FAF9; --ink:#1B2A2E; --soft:#5C6F74; --line:#D9E4E1;
  --clinic:#1F7A66; --clinic-2:#E0F1EC; --clinic-ink:#135646;
  --period:#E8537A; --period-s:#FCE0E8; --fertile-s:#DCF3EF; --ov:#7B61FF; --ov-s:#ECE8FF; --ok:#2E9E5B; --ok-s:#E1F4E8;
  --warn:#B7791F; --warn-s:#FBF0DB; --bad:#C8414B; --bad-s:#FBE3E5;
  --shadow:0 10px 30px rgba(27,42,46,.08);
  --display:"Sora","Segoe UI",system-ui,sans-serif; --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  color-scheme:dark;
  --bg:#101719; --panel:#172124; --panel2:#1C282B; --ink:#E6EFEE; --soft:#9DB1B4; --line:#2A393C;
  --clinic:#4CC2A4; --clinic-2:#173A33; --clinic-ink:#9FE6D3;
  --period-s:#4A2230; --fertile-s:#163A36; --ov-s:#2C2752; --ok-s:#173A26; --warn-s:#3A2E14; --bad-s:#43202A;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:var(--clinic)}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--ov);outline-offset:2px}
select,input{font:inherit;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:10px;padding:8px 10px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--soft)}
.boot{padding:40px;text-align:center;color:var(--soft)}

/* prihlásenie */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login form{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:28px;width:100%;max-width:380px;display:grid;gap:12px}
.login h1{font-family:var(--display);font-size:24px;margin:0}
.login label{font-size:13px;font-weight:700;color:var(--soft)}
.login input{width:100%}
.err{background:var(--bad-s);color:var(--bad);border-radius:10px;padding:8px 12px;font-weight:600}

/* rozloženie */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.side{background:var(--panel2);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25;padding:0 8px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.brand small{display:block;font-family:var(--body);font-weight:600;color:var(--soft);font-size:12px;margin-top:4px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;font-weight:600;color:var(--soft);text-align:left;width:100%}
.nav[aria-current="page"]{background:var(--clinic-2);color:var(--clinic-ink)}
.nav .n{font-family:var(--mono);font-size:12px;background:var(--bad);color:#fff;border-radius:999px;padding:0 7px;min-width:22px;text-align:center}
.side .foot{margin-top:auto;font-size:13px;color:var(--soft);padding:10px 8px 0;border-top:1px solid var(--line);display:grid;gap:6px}
.main{padding:24px 28px;min-width:0;max-width:1200px}
.main h2{font-family:var(--display);font-weight:700;font-size:22px;margin:0 0 4px;letter-spacing:-.01em}
.sub{color:var(--soft);margin:0 0 18px;max-width:75ch}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--panel)}
.kpi b{display:block;font-family:var(--display);font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--soft)}
.kpi.alert{border-color:var(--bad);background:var(--bad-s)} .kpi.alert b{color:var(--bad)}
.cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.stack{display:grid;gap:18px;align-content:start}
.box{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.box h3{margin:0;font-family:var(--display);font-size:14px;font-weight:700;padding:11px 14px;background:var(--panel2);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .time{font-family:var(--mono);font-size:13px;color:var(--soft);width:84px;flex:none}
.row .who{flex:1;min-width:0}
.row .who b{display:block}
.row .who small{color:var(--soft);font-size:13px}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap}
.p-ok{background:var(--ok-s);color:var(--ok)} .p-warn{background:var(--warn-s);color:var(--warn)} .p-bad{background:var(--bad-s);color:var(--bad)} .p-info{background:var(--ov-s);color:var(--ov)} .p-muted{background:var(--panel2);color:var(--soft);border:1px solid var(--line)} .p-period{background:var(--period-s);color:var(--period)} .p-fert{background:var(--fertile-s);color:var(--clinic-ink)}
.btn{background:var(--clinic);color:#fff;font-weight:700;border-radius:10px;padding:8px 14px;white-space:nowrap}
.btn:hover{filter:brightness(1.05)} .btn.sec{background:var(--clinic-2);color:var(--clinic-ink)} .btn.sm{padding:5px 10px;font-size:13px} .btn.ghost{background:transparent;color:var(--soft);padding:5px 8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);text-align:left;font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.strip{display:grid;grid-template-columns:repeat(35,minmax(0,1fr));gap:2px;margin:6px 0 4px}
.strip i{height:26px;border-radius:4px;background:var(--panel2);display:block;position:relative}
.strip i.per{background:var(--period)} .strip i.fer{background:var(--fertile-s)} .strip i.ovu{background:var(--ov)} .strip i.win{box-shadow:inset 0 0 0 2px var(--ok);background:var(--ok-s)} .strip i.win.per{background:var(--period)} .strip i.off{opacity:.3}
.strip i.pick::after{content:"";position:absolute;left:30%;right:30%;bottom:-7px;height:4px;border-radius:2px;background:var(--ink)}
.stripd{display:grid;grid-template-columns:repeat(35,minmax(0,1fr));gap:2px;font-family:var(--mono);font-size:9px;color:var(--soft);text-align:center}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--soft);margin-top:10px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.planner{border:2px solid var(--clinic);border-radius:16px;padding:16px;background:var(--panel)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.planner label,.lbl{font-size:12px;font-weight:700;color:var(--soft);display:block;margin-bottom:4px}
.planner select{width:100%}
.rule{background:var(--panel2);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:10px;border:1px dashed var(--line)}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.opt{border:1.5px solid var(--line);border-radius:12px;padding:10px;text-align:left;background:var(--panel)}
.opt[aria-pressed="true"]{border-color:var(--clinic);background:var(--clinic-2)}
.opt b{display:block;font-family:var(--display);font-size:14px}
.opt small{display:block;color:var(--soft);font-size:12px;margin-top:2px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:8px 0}
.check input{width:18px;height:18px;accent-color:var(--clinic);margin-top:2px;padding:0}
.qrcard{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:16px}
.qrcard svg{border-radius:8px;max-width:100%;height:auto}
.code{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:.04em}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;z-index:20;box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center}
.inline{display:inline-flex;gap:6px;align-items:center}
.inline input{width:150px;padding:5px 8px}
.rules-t input,.rules-t select{padding:5px 8px;width:100%}
.rules-t input.num{width:80px}

@media (max-width:1100px){.cols{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:10px}
  .brand{width:100%;padding-bottom:8px;margin-bottom:4px}
  .nav{width:auto;flex:1 1 auto}
  .side .foot{width:100%;display:flex;justify-content:space-between;border-top:0;padding-top:4px}
  .main{padding:16px}
  .grid3,.opts{grid-template-columns:1fr}
  .row{flex-wrap:wrap} .row .time{width:auto}
}
@media print{.side,.btn,.toast{display:none!important}.shell{display:block}.box{border:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
