/* Administrace UM PARK — stejná grafika jako mobilní aplikace:
   navy podklad, tyrkysová / fialová / růžová, zkosené rohy, Plus Jakarta Sans.

   Rozvržení podle zařízení:
   - počítač (od 1100 px): boční panel s názvy sekcí
   - tablet a telefon na šířku: úzký pruh s ikonami
   - telefon na výšku: horní lišta + spodní navigace jako v aplikacích
   Seznamy, tabulka a formuláře se přizpůsobují šířce, kterou mají (container queries),
   takže fungují v jakémkoli okně. Na dotykových displejích je všechno aspoň 44 px. */
:root{
  --navy:#00004a; --purple:#8620ff; --pink:#ff00ff; --turq:#22efff; --shows:#f0415c; --camp:#eed202;
  --ground:#00002c; --base:#00004a; --raised:#0d0d63; --raised2:#14147a; --field:#07073d;
  --text:#fff; --text2:rgba(255,255,255,.74); --text3:rgba(255,255,255,.55);
  --line:rgba(120,140,255,.24); --line-soft:rgba(120,140,255,.12);
  --cut:14px; --cut-sm:8px;
  --tap:130ms cubic-bezier(.2,.8,.3,1);
  --side:248px; --rail:88px;
  --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
body{background:var(--ground);color:var(--text);font:15px/1.55 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100dvh;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
img{display:block;max-width:100%}
a{color:var(--turq)}
code{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--turq);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.cut{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.cut-sm{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--turq);margin:0 0 8px}
.muted{color:var(--text3);font-size:13px}
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere}
h1{font-size:30px;font-weight:800}
h2{font-size:22px;font-weight:800}
h3{font-size:17px;font-weight:800}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;
  background:var(--purple);color:#fff;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  transition:filter var(--tap),transform var(--tap)}
.btn:active{transform:scale(.98)}
.btn.pink{background:var(--pink);color:var(--navy)}
.btn.turq{background:var(--turq);color:var(--navy)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--text)}
.btn.danger{background:transparent;box-shadow:inset 0 0 0 1.5px var(--shows);color:#ff9aa8}
.btn.small{min-height:36px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:17px;height:17px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;border:0;background:rgba(255,255,255,.06);color:var(--text2);
  border-radius:8px;transition:background var(--tap),color var(--tap)}
.icon-btn svg{width:18px;height:18px}
.icon-btn[disabled]{opacity:.3;pointer-events:none}
@media (hover:hover){
  .btn:hover{filter:brightness(1.12)}
  .icon-btn:hover{background:rgba(255,255,255,.12);color:#fff}
  .icon-btn.danger:hover{background:rgba(240,65,92,.22);color:#ff9aa8}
}

/* ---------- přihlášení ---------- */
.login{min-height:100dvh;display:grid;place-items:center;
  padding:max(24px,var(--safe-t)) max(16px,var(--safe-r)) max(24px,var(--safe-b)) max(16px,var(--safe-l));
  background:radial-gradient(circle at 50% 20%,rgba(134,32,255,.35),transparent 55%) var(--ground)}
.login-card{width:min(420px,100%);background:var(--raised);padding:34px 28px 26px;position:relative;overflow:hidden}
.login-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:-10px -8px 16px 0}
.login-puma{width:92px;flex:none;pointer-events:none}
.login-card h1{margin:2px 0 6px}
.login-card form{display:flex;flex-direction:column;gap:6px}
.login-card .btn{margin-top:14px;width:100%}
.login-card .muted{margin:16px 0 0}
@media (max-width:379px){
  .login-card{padding:26px 18px 20px}
  .login-puma{width:72px}
}
@media (max-height:480px){
  .login-card{padding-top:22px;padding-bottom:18px}
  .login-puma{width:64px}
}

/* ---------- formuláře ---------- */
label.lbl,.lbl{display:block;font-size:12.5px;font-weight:700;color:var(--text2);margin:14px 0 6px}
/* 16 px: menší písmo v poli iPhone při psaní přiblíží a stránka „uskočí“ */
.field,select.field,textarea.field{width:100%;min-width:0;min-height:46px;padding:11px 13px;background:var(--field);border:1.5px solid var(--line);
  border-radius:0;color:var(--text);font-size:16px;transition:border-color var(--tap)}
textarea.field{min-height:90px;resize:vertical;line-height:1.45}
input[type=date].field,input[type=datetime-local].field{display:block}
.field::-webkit-date-and-time-value{text-align:left}
.field:focus{outline:none;border-color:var(--turq)}
.field:user-invalid{border-color:var(--shows)}
.hint{font-size:12px;color:var(--text3);margin:5px 0 0}
.count{float:right;font-weight:600;color:var(--text3)}
.count.over{color:#ff9aa8}
.pw{display:flex}
.pw .field{flex:1}
.pw-toggle{flex:none;min-width:92px;border:1.5px solid var(--line);border-left:0;background:var(--field);color:var(--turq);font-weight:700;font-size:13px}
.form-error{background:rgba(240,65,92,.16);color:#ffb3bf;padding:10px 12px;font-size:13.5px;font-weight:600;margin:10px 0 0}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;font-weight:600;font-size:14px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--turq);flex:none}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;background:var(--field);box-shadow:inset 0 0 0 1.5px var(--line);
  font-weight:700;font-size:13.5px;color:var(--text2);transition:background var(--tap),color var(--tap),box-shadow var(--tap)}
.seg svg{width:16px;height:16px;flex:none}
.seg input:checked + span{background:var(--purple);color:#fff;box-shadow:none}
.seg input:focus-visible + span{outline:2px solid var(--turq);outline-offset:2px}
.seg.free input[value="1"]:checked + span{background:var(--turq);color:var(--navy)}
.seg.free input[value="0"]:checked + span{background:var(--pink);color:var(--navy)}
.figs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.figs label{cursor:pointer;position:relative}
.figs input{position:absolute;opacity:0}
.figs img{width:100%;aspect-ratio:1;object-fit:contain;padding:4px;background:var(--field);box-shadow:inset 0 0 0 1.5px var(--line)}
.figs input:checked + img{box-shadow:inset 0 0 0 2px var(--turq);background:#12127a}
.figs input:focus-visible + img{outline:2px solid var(--turq);outline-offset:2px}
.colors{display:flex;flex-wrap:wrap;gap:8px}
.colors label{cursor:pointer;position:relative}
.colors input{position:absolute;opacity:0}
.colors i{display:block;width:40px;height:40px;box-shadow:inset 0 0 0 2px transparent}
.colors input:checked + i{box-shadow:0 0 0 2px var(--ground),0 0 0 4px #fff}
.colors input:focus-visible + i{outline:2px solid var(--turq);outline-offset:4px}
.c-turq{background:var(--turq)} .c-purple{background:var(--purple)} .c-pink{background:var(--pink)} .c-camp{background:var(--camp)}
.progress{height:10px;background:var(--field);margin:14px 0 6px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--pink));transition:width .2s}
@media (max-width:600px){
  .row2{grid-template-columns:minmax(0,1fr)}
  .figs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- rozvržení: počítač ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  display:flex;flex-direction:column;gap:8px;padding:22px 16px;background:var(--base);border-right:1px solid var(--line-soft)}
.side::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;color:#fff;text-decoration:none;padding:4px 8px 18px}
.brand img{width:40px;height:40px;flex:none;padding:8px;background:var(--purple);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.brand-tx{font-weight:800;font-size:17px;line-height:1.1}
.brand small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--turq);margin-top:3px}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;color:var(--text2);text-decoration:none;font-weight:700;font-size:14.5px;
  transition:background var(--tap),color var(--tap)}
.side nav a[aria-current="page"]{background:var(--raised2);color:#fff;box-shadow:inset 3px 0 0 var(--turq)}
.side nav svg{width:20px;height:20px;flex:none}
.logout{margin-top:auto;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;background:none;color:var(--text3);font-weight:700;font-size:14px;text-align:left}
.logout svg{width:18px;height:18px;flex:none}
@media (hover:hover){
  .side nav a:hover{background:rgba(255,255,255,.06);color:#fff}
  .side nav a[aria-current="page"]:hover{background:var(--raised2)}
  .logout:hover{color:#fff}
}
.view{container:view / inline-size;min-width:0;width:100%;max-width:1240px;margin-inline:auto;padding:30px max(34px,var(--safe-r)) 60px 34px}
.view:focus{outline:none}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head p.muted{margin:6px 0 0;max-width:620px}

/* ---------- rozvržení: tablet a telefon na šířku — pruh s ikonami ---------- */
@media (min-width:700px) and (max-width:1099px), (max-width:699px) and (orientation:landscape) and (max-height:520px){
  .shell{grid-template-columns:calc(var(--rail) + var(--safe-l)) minmax(0,1fr)}
  .side{gap:6px;padding:16px 8px 14px calc(8px + var(--safe-l))}
  .brand{justify-content:center;padding:0 0 12px}
  .brand-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .side nav a{flex-direction:column;justify-content:center;gap:5px;min-height:64px;padding:8px 2px;font-size:11.5px;line-height:1.15;text-align:center}
  .side nav svg{width:22px;height:22px}
  .side .long{display:none}
  .logout{flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:6px 2px;font-size:11.5px;text-align:center}
  .view{padding:26px max(24px,var(--safe-r)) 60px 24px}
  h1{font-size:27px}
}
/* nízké okno (telefon na šířku): jen ikony, popisky zůstanou pro čtečky */
@media (max-width:1099px) and (orientation:landscape) and (max-height:520px){
  .side{padding-top:max(10px,var(--safe-t));padding-bottom:max(10px,var(--safe-b));gap:2px}
  .brand{padding-bottom:6px}
  .brand img{width:36px;height:36px;padding:7px}
  .side nav a{min-height:48px;padding:0}
  .logout{min-height:46px;padding:0}
  .side nav .lb,.logout .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .view{padding-top:20px}
}
/* velmi nízké okno (malý telefon na šířku): logo pryč — Přehled je v navigaci */
@media (max-width:1099px) and (orientation:landscape) and (max-height:360px){
  .brand{display:none}
  .side nav a,.logout{min-height:44px}
}

/* ---------- rozvržení: telefon na výšku — horní lišta + spodní navigace ---------- */
@media (max-width:699px) and (orientation:portrait), (max-width:699px) and (min-height:521px){
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .side{position:sticky;top:0;z-index:20;height:auto;overflow:visible;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;
    padding:calc(8px + var(--safe-t)) max(10px,var(--safe-r)) 8px max(14px,var(--safe-l));border-right:0;border-bottom:1px solid var(--line-soft)}
  .brand{padding:0;gap:10px}
  .brand img{width:34px;height:34px;padding:7px}
  .brand-tx{font-size:16px}
  .brand small{display:none}
  .side nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
    padding:0 var(--safe-r) var(--safe-b) var(--safe-l);background:var(--base);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,20,.35)}
  .side nav a{flex-direction:column;justify-content:center;gap:4px;min-width:0;min-height:58px;padding:6px 2px;font-size:11px;line-height:1.1;text-align:center}
  .side nav a[aria-current="page"]{background:none;color:var(--turq);box-shadow:inset 0 3px 0 var(--turq)}
  .side nav svg{width:22px;height:22px}
  .side .long{display:none}
  .logout{margin:0;min-height:44px;padding:0 10px;font-size:13.5px}
  .view{padding:20px max(16px,var(--safe-r)) calc(96px + var(--safe-b)) max(16px,var(--safe-l))}
  h1{font-size:25px}
  .head{margin-bottom:18px;gap:14px}
  /* při psaní spodní lišta nepřekáží klávesnici */
  .shell:has(.view :is(input:not([type=radio],[type=checkbox],[type=file]),textarea):focus) .side nav{display:none}
}
@media (max-width:340px) and (orientation:portrait){
  .side nav a{font-size:10px;letter-spacing:-.01em}
}

/* ---------- přehled ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--raised);padding:20px 20px 18px;position:relative;overflow:hidden;min-height:132px;text-decoration:none;color:inherit;display:block}
.stat > :not(img){position:relative;z-index:1}
.stat .n{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.stat .l{font-weight:800;font-size:14px}
.stat .s{display:block;font-size:12.5px;color:var(--text3)}
.stat img{position:absolute;right:-12px;bottom:-14px;width:88px;opacity:.55}
.stat.purple{background:linear-gradient(150deg,#3a0f8a,#1a0a5a)}
.stat.pink{background:linear-gradient(150deg,#5a0a5f,#23083f)}
@media (hover:hover){.stat:hover{background:var(--raised2)} .stat.purple:hover,.stat.pink:hover{filter:brightness(1.15)}}
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.card{background:var(--raised);padding:22px;min-width:0}
.card h3{margin-bottom:10px}
.quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.status i{width:10px;height:10px;border-radius:50%;background:var(--camp);flex:none}
.status.ok i{background:#3ee07a}
@container view (max-width:560px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  .stat{min-height:116px;padding:14px 14px 12px}
  .stat .n{font-size:32px;margin:8px 0 4px}
  .stat .l{font-size:13px;line-height:1.25;display:block}
  .stat .s{font-size:11.5px;line-height:1.35}
  .stat img{width:58px;right:-8px;bottom:-10px;opacity:.4}
  .card{padding:18px 16px}
  .cards2{gap:10px}
  .head > .btn,.quick .btn{width:100%}
}

/* ---------- videa a úkoly: seznamy ---------- */
.course{container:list / inline-size;background:var(--raised);margin-bottom:18px}
.course-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.course-h .fig{width:54px;height:54px;flex:none;display:grid;place-items:center;overflow:hidden}
.course-h .fig img{width:42px;height:46px;object-fit:contain}
.fig.c-turq{background:rgba(34,239,255,.16)} .fig.c-purple{background:rgba(134,32,255,.34)} .fig.c-pink{background:rgba(255,0,255,.2)} .fig.c-camp{background:rgba(238,210,2,.18)}
.course-h .tx{flex:1 1 200px;min-width:0}
.course-h .tx b{font-size:17px;font-weight:800;overflow-wrap:anywhere}
.course-h .tx span{display:block;font-size:12.5px;color:var(--text3)}
.acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.item{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.item:last-of-type{border-bottom:0}
.item .th{width:64px;height:44px;flex:none;background:#2b0a5e;display:grid;place-items:center;position:relative;overflow:hidden}
.item .th img{width:34px;height:40px;object-fit:contain}
.item .th .dur{position:absolute;right:2px;bottom:2px;background:rgba(0,0,40,.85);font-size:10px;font-weight:700;padding:0 4px}
.item .tx{flex:1 1 240px;min-width:0}
.item .tx b{display:block;font-weight:700;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.item .tx span{display:block;font-size:12.5px;color:var(--text3);overflow-wrap:anywhere}
/* když se akce nevejdou vedle textu, zalomí se pod něj doprava */
.item .acts{margin-left:auto;justify-content:flex-end}
.item.off .tx,.item.off .th,.item.off .lv{opacity:.5}
.course-f{padding:12px 18px 16px}
.icon-btn.more{display:none}
/* úzký seznam (telefon): jen hlavní přepínač + tlačítko „⋯“ s nabídkou akcí */
@container list (max-width:600px){
  .icon-btn.desk,.course-h .acts{display:none}
  .icon-btn.more{display:inline-grid}
  .course-h{flex-wrap:nowrap;gap:12px;padding:14px}
  .course-h .fig{width:46px;height:46px}
  .course-h .fig img{width:36px;height:40px}
  .course-h .tx b{font-size:16px}
  .item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"lead tx tx" "acts acts more";gap:10px 12px;padding:12px 14px}
  .item .th,.item .lv{grid-area:lead;align-self:center}
  .item .th{width:52px;height:40px}
  .item .tx{grid-area:tx}
  .item .acts{grid-area:acts;margin:0;justify-content:flex-start}
  .item .more{grid-area:more;align-self:end}
  .course-f{padding:12px 14px 14px}
  .course-f .btn{width:100%}
}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:11.5px;font-weight:800;letter-spacing:.03em;border-radius:999px;white-space:nowrap;border:0}
button.pill{cursor:pointer;min-height:30px}
.pill.free{background:rgba(34,239,255,.16);color:var(--turq)}
.pill.paid{background:rgba(255,0,255,.18);color:#ff9dff}
.pill.warn{background:rgba(238,210,2,.16);color:#f0dc5a}
.pill.off{background:rgba(255,255,255,.08);color:var(--text3)}
.pill.ok{background:rgba(62,224,122,.16);color:#7ef0a8}
.pill.err{background:rgba(240,65,92,.2);color:#ff9aa8}
.pill.pts{background:var(--pink);color:var(--navy)}
.empty{text-align:center;padding:40px 20px;color:var(--text3)}
.empty img{width:96px;margin:0 auto 12px;opacity:.8}

/* ---------- úkoly ---------- */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{min-height:42px;padding:0 16px;border:0;background:var(--raised);color:var(--text2);font-weight:800;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--purple);color:#fff}
.tabs .n{opacity:.7;font-weight:700;margin-left:4px}
.task .lv{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--purple);font-weight:800;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.task .lv svg{width:20px;height:20px}
.type-help{background:rgba(34,239,255,.08);border-left:3px solid var(--turq);padding:10px 14px;font-size:13px;color:var(--text2);margin:0 0 16px}
@container view (max-width:560px){
  .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .tabs button{padding:6px 4px;font-size:13px;line-height:1.2}
  .tabs .n{display:block;margin:2px 0 0;font-size:12px}
}

/* ---------- oznámení ---------- */
.compose{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.templates{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 4px}
.templates button{min-height:36px;padding:0 12px;border:0;background:rgba(34,239,255,.1);color:var(--turq);font-weight:700;font-size:13px}
@media (hover:hover){.templates button:hover{background:rgba(34,239,255,.2)}}
.phone-prev{position:sticky;top:24px;background:linear-gradient(180deg,#2a1466,#0c0a3a);border-radius:34px;padding:54px 16px 30px;min-height:420px;
  box-shadow:0 0 0 8px #16163d,0 0 0 10px #2c2c5e}
.phone-prev .time{text-align:center;font-size:52px;font-weight:300;letter-spacing:-.02em;margin-bottom:2px}
.phone-prev .date{text-align:center;font-size:14px;color:var(--text2);margin-bottom:26px}
.prev-cap{text-align:center;margin-top:22px}
.notif{display:flex;gap:10px;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:18px;padding:12px 13px;animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.notif .ap{width:38px;height:38px;flex:none;border-radius:9px;background:var(--purple);display:grid;place-items:center}
.notif .ap img{width:24px}
.notif .tx{flex:1;min-width:0}
.notif .top{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:1px}
.notif b{display:block;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.notif p{margin:1px 0 0;font-size:13.5px;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.phone-prev .who{text-align:center;font-size:12px;color:var(--text3);margin-top:14px}
.send-row{margin-top:18px}
.banner{display:flex;gap:12px;align-items:flex-start;background:rgba(238,210,2,.1);border-left:3px solid var(--camp);padding:12px 14px;margin-bottom:18px;font-size:13.5px;color:var(--text2)}
.banner b{color:#fff}
.banner.ok{background:rgba(62,224,122,.08);border-color:#3ee07a}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table-wrap{container:tbl / inline-size;overflow-x:auto;background:var(--raised)}
.table th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:12px 14px;border-bottom:1px solid var(--line)}
.table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.table td b{display:block;overflow-wrap:anywhere}
.table .sub{display:block;color:var(--text3);font-size:12.5px;overflow-wrap:anywhere}
.table tr:last-child td{border-bottom:0}
@container view (max-width:820px){
  .compose{grid-template-columns:minmax(0,1fr)}
  .phone-prev{position:static;width:min(100%,360px);margin:10px auto 0;min-height:0;padding:30px 14px 22px;border-radius:30px}
  .phone-prev .time{font-size:40px}
  .phone-prev .date{margin-bottom:18px}
  .prev-cap{margin-top:18px}
}
@container view (max-width:560px){
  .send-row .btn{width:100%}
}
/* historie oznámení v úzkém okně: místo tabulky karty s popisky */
@container tbl (max-width:640px){
  .table thead{display:none}                   /* každá karta má u hodnot vlastní popisek */
  .table,.table tbody,.table tr{display:block}
  .table tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .table tr:last-child{border-bottom:0}
  .table td{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:3px 0;border:0}
  .table td:first-child{display:block;margin-bottom:6px}
  .table td[data-label]::before{content:attr(data-label);flex:0 0 52px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
  .table td .sub{display:inline}
  .table td:empty{display:none}
  .table td .btn{margin-top:8px;flex:1 1 100%}
}

/* ---------- nastavení ---------- */
.code{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:13px;background:var(--field);padding:10px 12px;word-break:break-all;display:block;margin:6px 0}
a.code{display:flex;align-items:center;min-height:44px}
.endpoints{list-style:none;padding:0;margin:10px 0 0;font-size:13.5px}
.endpoints li{padding:6px 0;border-bottom:1px solid var(--line-soft)}
.endpoints code{font-family:ui-monospace,Menlo,monospace;color:var(--turq);font-size:12.5px}
ol.steps{padding-left:20px;margin:8px 0 0;font-size:13.5px;color:var(--text2)}
ol.steps li{margin-bottom:6px}
.form-actions{margin-top:16px}
@container view (max-width:560px){.form-actions .btn{width:100%}}

/* ---------- dialogy ---------- */
dialog.dlg{border:0;padding:0;background:var(--raised);color:var(--text);width:min(640px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
dialog.dlg.narrow{width:min(440px,calc(100vw - 24px))}
dialog.dlg::backdrop{background:rgba(0,0,10,.72);backdrop-filter:blur(3px)}
dialog.dlg[open]{animation:rise .2s ease}
.dlg form,.sheet-in{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 10px}
.dlg-h h2{min-width:0}
.dlg-b{padding:0 22px 10px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.dlg-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px 20px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.dlg-b p{color:var(--text2);margin:0 0 8px}
.dlg video{width:100%;max-height:60dvh;background:#000}
/* nabídka akcí */
.sheet-h{padding:20px 22px 6px}
.sheet-h .eyebrow{margin-bottom:4px}
.sheet-h h2{font-size:19px}
.sheet-list{display:flex;flex-direction:column;padding:6px 10px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.sheet-item{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 12px;border:0;background:none;color:var(--text);
  font-weight:700;font-size:15.5px;text-align:left}
.sheet-item svg{width:20px;height:20px;flex:none;color:var(--turq)}
.sheet-item.danger,.sheet-item.danger svg{color:#ff9aa8}
.sheet-item:focus-visible{outline-offset:-2px}
.sheet-item:active{background:rgba(255,255,255,.1)}
@media (hover:hover){.sheet-item:hover{background:rgba(255,255,255,.07)}}
.sheet-f{padding:8px 20px 18px}
.sheet-f .btn{width:100%}
/* telefon: dialog vyjede zespodu přes celou šířku, tlačítka zůstanou vidět dole */
@media (max-width:600px){
  dialog.dlg,dialog.dlg.narrow{width:100%;max-width:100%;margin:auto 0 0;max-height:calc(100dvh - 10px - var(--safe-t));
    clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
  dialog.dlg[open]{animation:sheet-up .24s cubic-bezier(.2,.8,.3,1)}
  .dlg form,.sheet-in{max-height:calc(100dvh - 10px - var(--safe-t))}
  .dlg-h{padding:18px max(16px,var(--safe-r)) 8px max(16px,var(--safe-l))}
  .dlg-h h2{font-size:20px}
  .dlg-b{padding:0 max(16px,var(--safe-r)) 12px max(16px,var(--safe-l))}
  .dlg-f{flex-wrap:nowrap;padding:12px max(16px,var(--safe-r)) calc(12px + var(--safe-b)) max(16px,var(--safe-l))}
  .dlg-f .btn{flex:1 1 0;min-width:0;padding:0 10px}
  .sheet-h{padding:18px 18px 4px}
  .sheet-list{padding:4px 6px}
  .sheet-f{padding:8px 16px calc(14px + var(--safe-b))}
}
@keyframes sheet-up{from{opacity:.4;transform:translateY(48px)}to{opacity:1;transform:none}}
@media (max-height:520px){
  .dlg-h{padding-top:12px;padding-bottom:6px}
  .dlg-f{padding-top:10px;padding-bottom:calc(10px + var(--safe-b))}
  .sheet-h{padding-top:12px}
  .sheet-item{min-height:46px}
}

/* ---------- hlášky ---------- */
.toasts{position:fixed;inset:auto max(16px,var(--safe-r)) max(16px,var(--safe-b)) auto;margin:0;padding:0;border:0;background:none;overflow:visible;
  display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px))}
.toasts:empty{display:none}
.toast{background:var(--turq);color:var(--navy);padding:13px 16px;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  animation:rise .25s ease;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.toast.err{background:var(--shows);color:#fff}
.toast button{flex:none;border:0;background:none;font-weight:800;color:inherit;opacity:.7;padding:0 2px;min-width:24px;min-height:24px}
@media (max-width:699px) and (orientation:portrait), (max-width:699px) and (min-height:521px){
  .toasts{inset:auto max(12px,var(--safe-r)) calc(70px + var(--safe-b)) max(12px,var(--safe-l));width:auto}
}

/* ---------- dotykové displeje: všechno, na co se klepe, aspoň 44 px ---------- */
@media (pointer:coarse){
  .icon-btn{width:44px;height:44px}
  .btn.small{min-height:44px;padding:0 14px}
  button.pill{min-height:44px;padding:0 14px;font-size:12px}
  .templates button{min-height:44px;padding:0 14px}
  .tabs button{min-height:48px}
  .seg span{min-height:44px}
  .colors i{width:44px;height:44px}
  .check input{width:22px;height:22px}
  .toast{align-items:center;padding-top:8px;padding-bottom:8px}
  .toast button{min-width:44px;min-height:44px;margin-right:-10px}
}