/* ================= design systém betterathlete.cz =================
   Světlá varianta značky je záměrně výchozí a JEDINÁ aktivní (Matěj chtěl
   appku čistou/uspořádanou na bílé ploše, ne tmavou) - appka se tedy
   NEPŘEPÍNÁ automaticky podle tmavého režimu telefonu/systému. Tmavá
   paleta ze zadání zůstává připravená pod :root[data-theme="dark"] pro
   případný budoucí ruční přepínač, ale nic ji zatím nezapíná. */
:root{
  --bg:#F7F7F7; --surface:#FFFFFF; --surface2:#F0F0F0; --line:#DCDCDC; --line2:#E8E8E8;
  --ink:#1B1D1F; --muted:#5B6165; --faint:#8A9096;
  --accent:#9F2A7E; --accent-ink:#FFFFFF; --accent-soft:#F6E4F0;
  --warn:#8A5A00; --warn-bg:#FBEFD2; --danger:#A32D2D; --danger-bg:#F9DEDC; --ok:#1F6B3A; --ok-bg:#D9F0E0;
  --g-yellow:#E3B31C; --g-green:#3EA25A; --g-purple:#8B5CC6; --g-orange:#E8813A; --g-red:#D24A4A; --g-none:#9AA8AA;
  --shadow:0 1px 2px rgba(27,29,31,.06),0 8px 28px rgba(27,29,31,.10);
  /* "Inter" je jen připravené jméno - reálně se natáhne, až Matěj přidá do
     repa lokální soubor fontu (viz poznámka v index.html/coach.html/client.html);
     do té doby appka bez chyby spadne na systémové písmo z fallback řetězce
     (na iPhonu/Macu prakticky nerozeznatelné od Interu), a to bez jediného
     externího požadavku (Google Fonts záměrně pryč kvůli GDPR). */
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Oxygen-Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --f-disp:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Oxygen-Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:2px; /* "skoro ostré" rohy - jediná výjimka jsou pilulkovité tagy/chipy (99px), ty zůstávají kulaté */
}
:root[data-theme="dark"]{
  --bg:#101213; --surface:#1B1D1F; --surface2:#232527; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --ink:#FFFFFF; --muted:#B9BDC2; --faint:#7D8288;
  --accent:#E58AC8; --accent-ink:#2B0524; --accent-soft:#3D2038;
  --warn:#F0C465; --warn-bg:#3A2E10; --danger:#F09B96; --danger-bg:#3D1C1B; --ok:#84D79E; --ok-bg:#143122;
  --g-yellow:#EBC341; --g-green:#59BC75; --g-purple:#A57EDB; --g-orange:#F09A5C; --g-red:#E76A6A; --g-none:#6F8385;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 15px/1.4 var(--f-body);-webkit-font-smoothing:antialiased;padding-inline:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:600;letter-spacing:.01em}

/* ---------- shell ---------- */
/* Horní lišta - 3 sloupce přes CSS grid (levá akce / logo+název uprostřed /
   pravá akce + Nastavení). Díky dvěma stejně širokým krajním "1fr" sloupcům
   zůstává střední "auto" sloupec vždycky opticky uprostřed lišty, ať už je
   nalevo/napravo jakkoliv málo nebo hodně obsahu - žádné ruční odhadování
   odsazení jako dřív (kdy logo bylo mimo tok jako "position:fixed" element a
   snadno se stávalo, že se s názvem stránky srazilo/naráželo). Logo i
   Nastavení jsou teď normální součástí obsahu #top (viz topBar()/acctMenuHTML()
   v core.js) - vykreslují se s každým překreslením lišty, žádný trik "mimo
   render cyklus" už není potřeba. */
/* minmax(0,1fr) (ne holé "1fr") na krajních sloupcích je důležité - bez toho
   se sloupec nesmí zmenšit pod obsah svého vlastního min-content, takže
   dlouhý název (jméno klienta v zápisu tréninku) přetekl přes hranici
   sloupce a vizuálně se překryl s tlačítkem Uložit vedle (Matějovo hlášení
   z mobilu). S minmax(0,1fr) + min-width:0/overflow:hidden na .brand se
   místo toho správně zkrátí na "…". */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:10px 16px}
.top-l,.top-r{display:flex;align-items:center;gap:6px;min-width:0}
/* POZOR: .top-l NESMÍ mít justify-self:start - grid item s justify-self
   jiným než výchozí "stretch" se nenatáhne na šířku svého sloupce, ale
   zabere si šířku podle vlastního obsahu (fit-content/max-content) - tím by
   se zase vrátil přesně ten samý bug jako s .brand v .top-c předtím (dlouhé
   jméno klienta by si vynutilo širší sloupec, než kolik je k dispozici, a
   přeteklo/překrylo se s tlačítky vpravo). Necháváme výchozí stretch, aby
   .top-l dostal přesně šířku vypočtenou z minmax(0,1fr) a .brand uvnitř
   (flex:1 1 auto;min-width:0) se pak správně zkracoval na "…". */
.top-r{justify-self:end}
.top-c{display:flex;align-items:center;justify-self:center;min-width:0}
.top-logo{height:30px;width:auto;flex:none}
/* V .top-l stojí ikonky/tlačítko zpět VEDLE názvu stránky (viz topBar() v
   core.js - logo je teď jen uprostřed, název je součástí `left`) - tlačítka
   si musí podržet svou velikost, jen .brand se smí zmenšovat/zkracovat. */
.top-l > *{flex:none}
.top-l .brand{flex:1 1 auto;min-width:0}
.top .brand{font:800 18px/1.3 var(--f-disp);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* "eyebrow" - drobný prostrkaný popisek v akcentní barvě vedle nadpisu, viz design systém webu.
   Používá se už jen tam, kde nese skutečnou informaci (jméno plánu, "nový plán"...),
   ne jako obecná "Better Athlete" nálepka - tu teď zastupuje logo. */
.top .brand small{font:600 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-left:8px}
.pill-demo{font:500 11px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);padding:3px 8px;border-radius:99px}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);height:40px;min-width:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--ink)}
.iconbtn:hover{background:var(--surface2)}
.wrap{padding:16px;max-width:1180px;margin:0 auto}
.cols{display:block}
/* Nastavení (Heslo/Odhlásit) - teď normální položka v .top-r (viz výše), ne
   pevně přilepený element mimo tok. #acct-widget je jen kotva pro menu, co se
   z něj rozbaluje dolů (position:relative). */
#acct-widget{position:relative}
#acct-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:150px;overflow:hidden;padding:4px;z-index:30}
#acct-menu[hidden]{display:none}
#acct-menu button{border:0;background:transparent;text-align:left;padding:10px 10px;border-radius:var(--r);font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap}
#acct-menu button:hover{background:var(--surface2)}
@media (min-width:920px){
  .cols.two{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}
  .cols.two .listpane{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));max-height:calc(100vh - 92px);overflow:auto}
  .only-narrow{display:none!important}
}
@media (max-width:919px){ .only-wide{display:none!important} .top .brand{font-size:16px} }
/* Skutečný telefon (ne jen užší okno) - na logo + název + akce vedle sebe
   není dost místa, tak logo v liště mizí (dominantně zůstává aspoň na
   přihlašovací obrazovce) a méně používané ikonky (Týmy, Knihovna) se
   schovají - jdou na jedno klepnutí z Domů. */
@media (max-width:560px){
  .navhide{display:none!important}
  #acct-widget > .btn{height:30px;padding:0 8px;font-size:12px;border-radius:var(--r)}
  .top-logo{display:none}
}

/* ---------- buttons ---------- */
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:0 14px;height:42px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{background:var(--surface2)}
/* Plné CTA tlačítko = podpis značky betterathlete.cz: velká písmena,
   prostrkaný text, skoro ostré rohy - viz design systém webu. */
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.btn.primary:hover{filter:brightness(1.06)}
.btn.small{height:34px;padding:0 11px;font-size:13.5px;border-radius:var(--r)}
.btn.ghost{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn[disabled]{opacity:.45;cursor:default}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.spacer{height:16px}

/* ---------- inputs ---------- */
.in,.sel,.ta{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:0 11px;height:42px;min-width:0}
.ta{height:auto;padding:10px 11px;resize:vertical;line-height:1.45}
.in:focus,.sel:focus,.ta:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.in.mono,.ta.mono{font-size:13.5px}
.lbl{display:block;font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.field{margin-bottom:14px}
.search{position:relative}
.search .in{padding-left:38px}
.search svg{position:absolute;left:12px;top:12px;width:18px;height:18px;color:var(--faint)}

/* ---------- chips & tags ---------- */
/* Pilulkovitý tvar je jediná výslovná výjimka ze "skoro ostrých" rohů - tagy/chipy zůstávají kulaté. */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:0 13px;height:34px;font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:500}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;padding:2px 9px;border-radius:99px;background:var(--surface2);color:var(--muted);border:1px solid var(--line2);line-height:1.5}
.tag.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.tag.danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.tag.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.sq{width:11px;height:11px;border-radius:2px;background:var(--g-none);flex:none;display:inline-block}
.sq.yellow{background:var(--g-yellow)}.sq.green{background:var(--g-green)}.sq.purple{background:var(--g-purple)}.sq.orange{background:var(--g-orange)}.sq.red{background:var(--g-red)}

/* ---------- client list ---------- */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cl{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line2);background:transparent;padding:13px 14px;position:relative}
.cl:last-child{border-bottom:0}
.cl:hover{background:var(--surface2)}
.cl[aria-current="true"]{background:var(--accent-soft)}
.cl .nm{font:700 19px/1.15 var(--f-disp);letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.cl .meta{color:var(--muted);font-size:13.5px;margin-top:3px;display:flex;gap:6px 12px;flex-wrap:wrap}
.cl .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bar{height:5px;border-radius:99px;background:var(--line2);overflow:hidden;margin-top:9px;max-width:220px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.summary{color:var(--muted);font-size:14px;margin:0 0 12px}

/* ---------- profile ---------- */
.ph{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
/* Nejblíž "hero" nadpisu, co appka má (jméno klienta na jeho vlastní stránce) -
   proto tu, na rozdíl od menších nadpisů panelů níž, plně sedí velká písmena
   + krátká podtrhávací linka v akcentní barvě ze design systému webu. */
.ph h1{font:800 30px/1.1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ph .sub{color:var(--muted);margin-top:6px;max-width:60ch}
.ph .sub::before{content:"";display:block;width:54px;height:2px;background:var(--accent);margin-bottom:10px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto}
.tab{border:0;background:transparent;padding:10px 14px;font:700 13.5px var(--f-disp);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.panel>header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.panel h2{font:700 15.5px var(--f-disp);letter-spacing:.03em;color:var(--accent)}
/* ---------- kredit/balíček klienta (denní sync z Google Sheets, viz creditCardHTML) ---------- */
.credit-card .credit-stats{display:flex;flex-direction:column;gap:2px;font:800 21px var(--f-disp);margin:2px 0 6px}
b.neg{color:var(--danger)}
.credit-card .credit-meta{color:var(--muted);font-size:13px}
@media (max-width:520px){.credit-card .credit-stats{font-size:19px}}
/* Banner "jsi v mínusu" po přihlášení (viz creditWarningHTML) - zavíratelný
   (ICON.x), ale jen pro tuhle otevřenou appku (viz CVUI.creditWarnDismissed
   v client-main.js), ne natrvalo. */
.credit-alert{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;background:var(--danger-bg);color:var(--danger);border-radius:var(--r);padding:12px 14px;margin:0 0 14px}
.credit-alert p{margin:0;font-size:14px;line-height:1.45}
.credit-alert .iconbtn{flex:none;color:inherit;background:transparent;border-color:currentColor;opacity:.75}
.credit-alert .iconbtn:hover{opacity:1;background:rgba(0,0,0,.06)}
/* ---------- klientská domovská obrazovka (dlaždice: Můj trénink/Data/Informace) ----------
   Matějovo zadání: hlavní stránka klienta po přihlášení je rozcestník 3
   oválných dlaždic (ne rovnou dnešní trénink) - viz homeTilesHTML v
   client-main.js. Fotková dlaždice ("Můj trénink") má tmavý gradient přes
   fotku (stejný princip jako přihlašovací obrazovka) a bílý nadpis; dlaždice
   bez fotky ("Data"/"Informace") mají jen ikonu v kolečku - stejný vizuální
   jazyk jako .hcard-ic o pár řádků níž (kouč. domovská obrazovka). */
.tilegrid{display:flex;flex-direction:column;gap:16px;margin:4px 0 8px}
.tile{position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:112px;border:0;border-radius:60px;cursor:pointer;padding:0 30px;text-align:left;overflow:hidden;font:inherit;background:var(--surface)}
.tile:active{transform:scale(.985)}
.tile-photo{background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.tile-photo .tile-label{color:#fff;font:800 22px var(--f-disp);letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.tile-plain{border:1px solid var(--line)}
.tile-plain:hover{background:var(--surface2)}
.tile-plain .tile-label{color:var(--ink);font:700 18px var(--f-disp)}
.tile-icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
@media (max-width:520px){
  .tile{min-height:96px;border-radius:48px;padding:0 22px;gap:12px}
  .tile-photo .tile-label{font-size:19px}
  .tile-icon{width:44px;height:44px}
}

/* ---------- domovská obrazovka (rozcestník: Klienti / Knihovna / Reporty) ---------- */
.hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.hcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;color:var(--ink);width:100%}
.hcard:hover{background:var(--surface2)}
.hcard-ic{width:42px;height:42px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.hcard b{font-size:16.5px}
.hcard span{color:var(--muted);font-size:13.5px}
/* Natvrdo (ne přes --accent/--accent-ink proměnné) - Matěj si dvakrát
   stěžoval, že to "5" na kartě Reporty skoro není vidět; ať se to nemůže
   rozbít případnou budoucí změnou barevné palety, dává se sem rovnou pevná
   tmavá fialová + čistě bílé tučné písmo (vysoký kontrast, ověřeno). */
.hcard-badge{position:absolute;top:8px;right:8px;background:#FFFFFF;color:#E11D2E;border-radius:99px;min-width:24px;height:24px;padding:0 7px;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2.5px solid #E11D2E;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.kv dt{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.kv dd{margin:0}
.item{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;border-top:1px solid var(--line2);width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-bottom:0}
/* Když je .list přímo v .panel (má vlastní odsazení 16px), zarovnáme .list
   k okraji panelu - .item si svoje odsazení nese samo (viz výše), takže
   výsledek vypadá stejně jako předtím; .list mimo panel (Knihovna, Týmy) si
   tak odsazení textu od rámečku konečně taky pohlídá samo. */
.panel > .list{margin:0 -16px;width:auto}
.panel > .list:last-child{margin-bottom:-14px}
.item:first-of-type{border-top:0}
button.item:hover{background:var(--surface2)}
.item .d{color:var(--muted);font:400 13px var(--f-mono);min-width:54px;padding-top:2px}
.item .x{flex:1;min-width:0}
.item .x b{font-weight:600}
.item .x span{display:block;color:var(--muted);font-size:14px}
/* Odznáčky (denní rutina/tým) teď sedí přímo v .x vedle názvu (viz occRow
   v client-main.js) - bez tohohle přebijí .tag's vlastní inline-flex pilulku
   pravidlem výše (span uvnitř .x je jinak vždycky "block", na celou šířku). */
.item .x .tag{display:inline-flex;margin-left:6px;vertical-align:middle}
/* "daily" (denní rutina) se dřív ztlumovalo opacitou na celém řádku - to ale
   zprůhledňovalo i fialové tlačítko Spustit, takže vypadalo v jiném odstínu
   než u normálních tréninků (Matějovo hlášení "jiné odstíny fialové").
   Ztlumujeme proto jen textovou část (.x), tlačítko/tagy vpravo zůstávají
   ve stejné plné barvě jako všude jinde. */
.item.daily .x{opacity:.82}
.item.daily .x b{font-weight:500}
.item.rest{opacity:.7}
.item.rest .x b{font-weight:500}
/* Klientský přehled dní (occRow - dnešní/nadcházející tréninky): datum+název
   vlevo (.x) a tagy+tlačítka (Spustit/Přesunout/Vrátit na...) vpravo se na
   úzkém displeji nevešly vedle sebe - stejný problém jako u .log-datehead
   výše (.x s min-width:0 se nechá zmáčknout skoro na nic, místo aby se
   zalomil na nový řádek), stejné řešení: pod určitou šířkou naskládat pod sebe. */
@media (max-width:640px){
  .occ-row{flex-direction:column;align-items:stretch;gap:8px}
}
/* Kalendář: víc tréninků ve stejný den se seskupí pod jeden nadpis data
   (.daygrp-head), místo aby se datum opakovalo u každého zvlášť (viz
   calendarTabHTML v client-main.js). Řádky dostávají jemnou levou linku +
   šedé podbarvení VŽDY, bez ohledu na to, jestli je pod datem jeden trénink
   nebo víc - dřív to dostával jen den s víc tréninky (.multi), takže tlačítko
   Akce bylo o 16px jinde u dne s jedním tréninkem než u dne s víc tréninky
   (Matějovo hlášení + screenshot "akce u 30.9 je posunutá oproti 29.9").
   Stejný styl na všech řádcích = tlačítko Akce je napříč všemi dny zarovnané
   na stejném místě; jestli je den "multi", pozná se z počtu (odznáček
   "N tréninky" v .daygrp-head). */
.daygrp .daygrp-head{padding:12px 16px 6px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line2)}
.daygrp:first-child .daygrp-head{border-top:0}
.daygrp-head b{font:700 14.5px var(--f-mono);color:var(--ink)}
.daygrp .item.occ-row{margin:0 16px 8px;border-top:0;border-left:2px solid var(--accent);border-radius:0 var(--r) var(--r) 0;background:var(--surface2)}
.daygrp .item.occ-row:last-child{margin-bottom:12px}
/* Odznáčky "denní rutina"/"tým" mají výchozí šedé pozadí (--surface2) - přesně
   stejné jako pozadí řádku výše, takže na sobě úplně mizely (Matějovo
   hlášení). V řádku proto dostanou bílé pozadí + viditelnější okraj, ať
   vynikne. */
.daygrp .item.occ-row .tag{background:var(--surface);border-color:var(--line)}
.empty{color:var(--muted);padding:6px 0 2px;font-size:14px}
.phase{display:block;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line2);color:inherit;padding:10px 0}
.phase:first-of-type{border-top:0}
/* Aktuálně běžící fáze se dřív podbarvovala celá růžově (--accent-soft) přes
   celou šířku panelu - Matějovi to přišlo přes celý blok moc "křiklavé".
   Teď jen decentní rámeček + jemné pozadí (--surface2, stejné jako třeba
   .sess-card/.phead jinde v appce) - rozpoznatelnost dělá hlavně tag "Aktivní"
   se zelenou tečkou (.tag.live) v hlavičce, ne barva celého bloku. */
.phase.now{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:6px 0}
.phase .t{display:flex;gap:8px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.phase .t b{font:600 18px var(--f-disp)}
/* Datum "od-do" fáze - dřív drobný šedý text vedle názvu, těžko čitelný na
   první pohled ("datum musí být více vidět" - Matějův požadavek). */
.phase-range{font:600 14.5px var(--f-mono);color:var(--ink);margin-top:3px}
.tag.live{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.tag.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

/* ---------- fáze -> bloky (Plán tab): blok je vizuálně "odnož" své fáze ---------- */
.phasegrp{margin-bottom:20px}
.phasegrp .phead{display:block;width:100%;text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;cursor:pointer;color:inherit;font:inherit}
.phasegrp .phead .t{display:flex;gap:8px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.phasegrp .phead .t b{font:700 15.5px var(--f-disp)}
.pbranch{margin:10px 0 0 20px;padding-left:16px;border-left:2px solid var(--line)}
.pbranch .plan{margin-bottom:14px}
.pbranch .plan:last-child{margin-bottom:0}

/* ---------- plans / notation ---------- */
.plan{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:18px;overflow:hidden}
.plan>header{padding:13px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;background:var(--surface2);border-bottom:1px solid var(--line2)}
.plan h3{font:700 17px var(--f-disp);color:var(--accent)}
.plan>.row{padding:0 16px 12px}
.sess-card{background:var(--surface2);border:1px solid var(--line2);border-radius:var(--r);margin:12px 12px 0}
.sess-card:last-child{margin-bottom:12px}
.sess{padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
@media (max-width:560px){.sess{grid-template-columns:1fr}}
.sess .sn{font:700 16px var(--f-disp);letter-spacing:.01em;color:var(--accent)}
.sess .sm{color:var(--muted);font-size:13.5px}
.sess-detail{padding:0 14px 12px}
.sess-detail>summary{margin-bottom:2px}
.sess-detail[open]>summary{margin-bottom:8px}
/* "Proběhlé" - sbalené starší tréninky (viz plansTabHTML) - decentně
   ztlumené, ať je na první pohled jasné, že už jsou za klientem. */
.sess-past{margin:4px 12px 12px;color:var(--muted)}
.sess-past>summary{padding:8px 4px}
.sess-past[open]{margin-bottom:12px}
.sess-past .sess-card{opacity:.72}
.sess-past .sess-card:first-of-type{margin-top:8px}
.blk{margin:0 0 12px;padding:9px 11px 11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.blk:last-child{margin-bottom:0}
.blk h4{font:600 13px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 8px;display:flex;gap:8px;align-items:center}
.nota{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 8px;padding:8px 9px;background:var(--surface2);border-radius:var(--r);margin-top:6px}
.nota:first-of-type{margin-top:0}
.nota .lb{font:600 13px var(--f-mono);color:var(--accent);padding-top:2px}
.nota .nm{font-weight:600}
.nota .pr{font:400 13px/1.5 var(--f-mono);color:var(--muted);margin-top:1px;display:flex;flex-wrap:wrap;gap:0 12px}
.nota .pr b{color:var(--ink);font-weight:500}

/* ---------- plan editor ---------- */
.ed-ex{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 44px 10px 10px;margin-bottom:8px}
.ed-ex.dragging{opacity:.45;box-shadow:0 0 0 2px var(--accent) inset}
.ed-ex.grouped{box-shadow:0 0 0 1px var(--accent-soft) inset}
.ed-ex .r1{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;margin-bottom:8px}
.ed-ex .r2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:8px}
.ed-ex .r2 .unitpair{display:flex;gap:4px}
.ed-ex .r2 .unitpair select{width:64px;flex:none;padding:0 2px;font-size:12.5px}
.ed-ex .r2 label,.ed-ex .r1 label{font:600 10.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.ed-ex .in{height:38px;padding:0 8px;font-size:14px}
.lbl-badge{height:38px;text-align:center;padding:0 4px;border:1px solid var(--line);border-radius:var(--r);background:var(--accent-soft);color:var(--accent);font:700 14px var(--f-mono)}
.ed-ex-tools{position:absolute;top:6px;right:6px;display:flex;gap:2px}
.draghandle{width:32px;height:32px;border:0;background:transparent;color:var(--faint);display:flex;align-items:center;justify-content:center;border-radius:var(--r);touch-action:none;cursor:grab}
.draghandle:hover{background:var(--surface2);color:var(--ink)}
.draghandle:active{cursor:grabbing}
@media (max-width:520px){.ed-ex .r2{grid-template-columns:repeat(2,minmax(0,1fr))}.ed-ex .r2 .unitpair select{width:56px;font-size:12px}}
.gaprow{display:flex;justify-content:center;margin-top:-4px}
.gapbtn{width:34px;height:22px;border:1px dashed var(--line);border-radius:var(--r);background:transparent;color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer}
.gapbtn:hover{background:var(--surface2);color:var(--ink);border-style:solid}
.gapbtn.on{border-style:solid;border-color:var(--accent-soft);background:var(--accent-soft);color:var(--accent)}
.gapbtn.on:hover{filter:brightness(.97)}
.ed-blk{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:14px}
.ed-blk>.hd{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.ed-blk>.hd .in{flex:1 1 100%}
.parsed{font:400 12.5px/1.6 var(--f-mono);color:var(--muted);margin:6px 0 0;min-height:1.6em}
.parsed b{color:var(--accent);font-weight:500}
.check{display:inline-flex;gap:7px;align-items:center;font-size:13.5px;color:var(--muted);white-space:nowrap}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.check input[disabled]{opacity:.4}
.warmup{background:var(--surface2);border:1px dashed var(--line);border-radius:var(--r);padding:8px;margin-bottom:8px}
.warmup .wu-row{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:6px;align-items:end;margin-bottom:6px}
.warmup .wu-row:last-of-type{margin-bottom:8px}
.wu-lbl{font:600 10px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.warmup .in{height:34px;padding:0 8px;font-size:13.5px}
.warmup .btn.small{height:34px;padding:0 8px}
@media (max-width:520px){.warmup .wu-row{grid-template-columns:1fr 1fr 1fr auto}}

/* ---------- progrese po týdnech (w1..wN) - Matějovo zadání "jako dřív v Google tabulkách" ---------- */
.weekly{background:var(--surface2);border:1px dashed var(--accent-soft);border-radius:var(--r);padding:8px;margin-bottom:8px;overflow-x:auto}
.weekly-row{display:grid;grid-template-columns:64px repeat(4,minmax(70px,1fr));gap:6px;align-items:end;margin-bottom:6px;min-width:420px}
.weekly-row:first-child .wu-lbl{margin-bottom:3px}
.weekly .in{height:32px;padding:0 6px;font-size:13px}
.weekly-wk{font:700 12px var(--f-mono);color:var(--accent);align-self:center;padding-bottom:2px}
@media (max-width:520px){
  .weekly-row{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;gap:6px 10px;padding-top:6px;border-top:1px dashed var(--line)}
  .weekly-row:first-child{border-top:0;padding-top:0}
  .weekly-wk{grid-column:1/-1;padding-bottom:0}
}

/* ---------- umístění tréninku do fáze (mřížka týden × den) ---------- */
.placegrid{max-height:56vh;overflow-y:auto}
.placerow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.placerow:last-child{border-bottom:0}
.placewk{flex:0 0 64px;font:700 12.5px var(--f-body);color:var(--muted);padding-top:8px}
.placedays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;flex:1;min-width:0}
.placecell{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--r);padding:6px 2px;cursor:pointer;text-align:center;background:var(--surface)}
.placecell input{position:absolute;opacity:0;pointer-events:none}
.placecell .d{font:700 10.5px var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.placecell .n{font:600 12.5px var(--f-mono)}
.placecell .occ{font-size:9.5px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
/* .busy = tady už kouč jiný trénink umístil (viz occupied v openPlaceSheet) -
   Matějovo zadání "ať vidím, kam jsem už dal gym1/gym2, ať to rozvrhnu
   rovnoměrně" - vlastní decentní odstín, ať je na první pohled jasně jiný
   než prázdná buňka i než právě vybraná (.on) buňka. */
.placecell.busy{background:var(--surface2);border-style:dashed}
.placecell.busy .occ{color:var(--ink)}
.placecell.on{border-color:var(--accent);background:var(--accent-soft);border-style:solid}
.placecell.on .d,.placecell.on .n{color:var(--accent)}
.placecell.on .occ{color:var(--accent)}
@media (max-width:560px){.placedays{grid-template-columns:repeat(7,minmax(34px,1fr))}.placecell .n{font-size:11px}.placecell .occ{font-size:8px;line-height:1.15}}

/* ---------- logging ---------- */
.lg-head{position:sticky;top:calc(61px + env(safe-area-inset-top,0px));z-index:10;background:var(--bg);padding:8px 0 10px}
/* Na mobilu je hlavička zápisu (výběr tréninku + datum + nápověda + "Celý
   trénink dle plánu") jako přilepená ("sticky") moc velká - zabere půl
   obrazovky a překáží při scrollování k samotným cvikům (Matějovo hlášení).
   Na širší obrazovce (tablet/PC) sticky zůstává - tam je hlavička poměrově
   mnohem menší část obrazovky a je fajn mít ji pořád po ruce. */
@media (max-width:640px){
  .lg-head{position:static}
}
/* Řádek datum + nápověda + tlačítko "Celý trénink dle plánu" se na úzkém
   displeji neměl kam vejít vedle sebe - .grow s min-width:0 se pak mačkal
   na pár px šířky a text se lámal do jednoho úzkého sloupce. Pod určitou
   šířkou to radši naskládáme pod sebe. */
@media (max-width:640px){
  .log-datehead{flex-direction:column;align-items:stretch;gap:8px}
  .log-datehead > div{width:auto!important;padding-top:0!important}
}
/* Cviky byly dřív každý ve vlastní šedé "krabičce" (plné pozadí + rámeček) -
   uvnitř bloku (.blk), který má SVOJE vlastní pozadí+rámeček, to vypadalo
   jako krabička v krabičce a Matějovi přišlo to orámování cviků "není moc
   hezké" (foto z mobilu). Cviky teď žádné vlastní pozadí/rámeček nemají -
   od sebe je odděluje jen jemná čára uprostřed mizející do stran (viz
   ::before níže), modernější a méně "těžké" než plná krabička okolo
   každého cviku. */
.lgx{position:relative}
.lgx:not(:first-child){margin-top:16px}
.lgx:not(:first-child)::before{content:"";position:absolute;top:-8px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent)}
/* Splněný cvik dřív dostal tmavě zelený rámeček kolem celé karty - Matějovi
   to přišlo zbytečně "obtahující", stačí mu zaškrtávátko samo (viz .chk
   níže). */
.lgx.skip{opacity:.6}
/* "Progres" (nové maximum) se pozná podle odznáčku u názvu (.tag.acc
   "progres" v .top2) - dělicí čárka NAD takovým cvikem je navíc zvýrazněná
   fialově místo šedě, ať je vidět i bez čtení odznáčku. */
.lgx.progress:not(:first-child)::before{background:linear-gradient(90deg,transparent,var(--accent) 15%,var(--accent) 85%,transparent)}
.lgx.progress .hint{font-size:14px;font-weight:500;color:var(--ink)}
.lgx.progress .hint b{color:var(--accent)}
.lgx .top2{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;padding:12px 12px 8px;align-items:start}
/* Písmenko cviku (A, B1, B2...) - u supersetů (B1/B2/...) předtím splývalo
   s okolím, nebylo na první pohled jasné, že jde o superset. Teď je to
   samostatný kroužek s fialovým orámováním a jemným podbarvením, tučnější
   písmo. */
.lgx .lb{font:700 13px var(--f-mono);color:var(--accent);width:28px;height:28px;border-radius:50%;border:1.5px solid var(--accent);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;padding:0}
.lgx .nm{font:700 19px/1.15 var(--f-disp);letter-spacing:.01em}
/* Předepsaná hodnota (série×opak., tempo, zátěž) byla dřív tenčí a šedší
   než "Minule..." řádek pod ní - přitom předpis pro DNEŠNÍ trénink je to
   hlavní, co se čte první. Teď je tmavší a tučnější, "Minule" zůstává jako
   druhořadý kontext. */
.lgx .plan-l{font:600 14px/1.5 var(--f-mono);color:var(--ink);margin-top:3px}
.lgx .hint{font-size:13px;color:var(--muted);margin-top:3px}
.lgx .hint b{color:var(--ink);font-weight:500}
/* Modernější "splněno" tlačítko - kulatý tvar místo hranatého, jemný přechod
   při zaškrtnutí (mírné zvětšení + stín), ať to působí víc jako reálná
   interakce, ne jen statická ikonka. */
.chk{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--faint);transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,border-color .12s ease}
.chk:hover{border-color:var(--accent);color:var(--accent)}
.chk svg{width:24px;height:24px}
/* Světlejší, veselejší zelená pro splněné zaškrtnutí (var(--ok) byla na vkus
   Matěje moc tmavá) - stejný odstín jako --g-green skupinová barva, bez
   rámečku kolem celé karty (viz .lgx výše). */
.lgx.done .chk{background:var(--g-green);border-color:var(--g-green);color:#fff;transform:scale(1.06);box-shadow:0 2px 8px rgba(62,162,90,.35)}
.inputs{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:8px;padding:0 12px 12px 54px;align-items:end}
@media (max-width:520px){.inputs{padding-left:12px}}
.inputs .in{height:46px;font:500 18px var(--f-mono);text-align:center;padding:0 6px}
.stepper{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:4px;align-items:center}
.stepper .btn{height:46px;padding:0;font-size:20px}
.setrow{display:grid;grid-template-columns:26px repeat(3,minmax(0,1fr));gap:8px;align-items:center;padding:0 12px 8px 54px}
@media (max-width:520px){.setrow{padding-left:12px}}
.setrow .in{height:42px;font:500 16px var(--f-mono);text-align:center;padding:0 4px}
.setrow .n{font:500 13px var(--f-mono);color:var(--muted);text-align:center}
.lgx .foot{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 12px 54px;align-items:center}
.fieldlabels{display:grid;gap:8px;padding:0 12px 4px 54px;font:600 10.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:520px){.fieldlabels{padding-left:12px}}
.fieldlabels span{text-align:center}
.unitbox{position:relative}
.unitbox .in{padding-right:26px;text-align:right}
.unitbox .unit{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 11px var(--f-body);color:var(--muted);pointer-events:none}
/* .foot (Poznámka/Vynechat…) a .quickrow (shrnutí + Upravit) NEJSOU jako
   .setrow/.inputs/.fieldlabels vázané na šířku vstupních políček - nemají
   proč se na mobilu zplošťovat na okraj (12px). Když to dřív dělaly, jejich
   text (např. "10 opak.") vypadal na mobilu oproti názvu cviku nad ním
   "uhnutý"/rozházený (Matějovo hlášení) - teď zůstávají zarovnané pod
   názvem cviku (54px) na všech šířkách stejně. */
.quickrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 10px 54px}
.quickval{font:600 15px var(--f-mono);color:var(--ink)}
.quickval.muted{font:500 13px var(--f-body);color:var(--muted);font-style:italic}
.linkbtn{border:0;background:transparent;color:var(--accent);font-size:13.5px;padding:6px 8px;border-radius:var(--r);font-weight:600}
.linkbtn:hover{background:var(--accent-soft)}
/* Poznámka/Vynechat/Upravit/Skrýt v zápisu tréninku dřív splývaly s okolním
   textem (byly to jen odkazy bez rámečku) - tady dostávají orámování, ať
   vypadají jako samostatná tlačítka (jen v zápisu - .linkbtn jinde v appce,
   např. "Historie" u klienta, zůstává beze změny). */
.lgx .foot .linkbtn, .lgx .quickrow .linkbtn{border:1px solid var(--line)}
.lgx .foot .linkbtn:hover, .lgx .quickrow .linkbtn:hover{border-color:var(--accent)}
.collapsed{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:10px 14px;margin-bottom:10px;color:var(--muted);width:100%;text-align:left}
.savebar{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent);display:flex;gap:10px;z-index:9}
/* Zápis tréninku (log.js) - tlačítko Uložit nechceme přilepené ke spodku
   obrazovky (překáží a snadno se na něj omylem sáhne při scrollování),
   ať je až na konci stránky jako normální obsah. */
.savebar.static{position:static;background:none;padding:16px 0 24px}
.savebar .btn{flex:1;height:50px;font-size:16px}

/* ---------- video u cviku (knihovna cviků) - sbalené, rozbalí se kliknutím ---------- */
.vid{margin-top:4px}
.vid summary::-webkit-details-marker{display:none}
.vid[open] summary{margin-bottom:8px}
.vidwrap{max-width:420px}
.vidwrap iframe{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);border:0}
.vidwrap .btn{display:inline-flex}

/* ---------- sebe-sledování klienta (váha/spánek/pocit) - rozklikávací grafy ---------- */
.checkin-metric{border-top:1px solid var(--line2);padding:10px 0}
.checkin-metric:first-of-type{border-top:0}
.checkin-metric summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600}
.checkin-metric summary::-webkit-details-marker{display:none}
.checkin-metric[open] summary{margin-bottom:8px}
.checkin-metric .v{font:400 14px var(--f-mono);color:var(--muted)}

/* ---------- history ---------- */
/* Název bloku (.hblock>summary .t, např. "Test"/"Early rehab") I název
   jednotlivého tréninku uvnitř (.hs .t, např. "Trénink 1") byly obě ve
   stejné fialové/růžové (--accent) jako nadpisy panelů ("Vývoj cviku",
   "Odtrénované tréninky") - na Historii tak úplně splývalo, kde končí
   nadpis a kde začíná obsah, celá obrazovka "jedna fialová stěna" (Matějovo
   hlášení). Nadpisy panelů zůstávají fialové (stejně jako všude jinde v
   appce), název bloku/tréninku je teď tmavý (--ink) - fialová tak zůstává
   vyhrazená pro nadpisy a jasně vynikne, tmavá dělá hierarchii čitelnější. */
.hs{border-top:1px solid var(--line2);padding:11px 0}
.hs:first-of-type{border-top:0}
.hs summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline}
.hs summary::-webkit-details-marker{display:none}
.hs .d{font:500 13px var(--f-mono);color:var(--muted);min-width:64px}
.hs .t{font-weight:700;color:var(--ink)}
.hs .body{padding:8px 0 2px 76px}
.hs .body .l{display:flex;gap:10px;font-size:14px;padding:2px 0}
.hs .body .l .n{flex:1;min-width:0}
.hs .body .l .v{font:400 13px var(--f-mono);color:var(--muted);text-align:right}
@media (max-width:520px){.hs .body{padding-left:0}}
.hblock{background:var(--surface2);border:1px solid var(--line2);border-top:1px solid var(--line2);border-radius:var(--r);padding:2px 12px;margin-bottom:10px}
.hblock summary{padding:9px 0}
.hblock>summary .t{font:700 15.5px var(--f-disp);letter-spacing:.02em;color:var(--ink)}
.hblock>.body{padding:0 0 6px}
.hblock .hs{padding:9px 4px}
.hblock .hs .body{padding-left:64px}
@media (max-width:520px){.hblock .hs .body{padding-left:0}}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font:600 11.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--line2)}
.tbl td.m{font-family:var(--f-mono);font-size:13px}

.tblw{overflow-x:auto}
.spark{display:block;width:100%;height:auto;max-width:480px}
.spark text{font:14px var(--f-mono);fill:var(--muted)}

/* ---------- sheet & toast ---------- */
.scrim{position:fixed;inset:0;background:rgba(6,14,15,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:var(--r) var(--r) 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:92%;overflow:auto;box-shadow:var(--shadow)}
@media (min-width:640px){.scrim{align-items:center}.sheet{border-radius:var(--r)}}
.sheet h2{font:700 22px var(--f-disp);margin-bottom:14px}
.toast{white-space:nowrap;max-width:92vw;position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;font-size:14px;font-weight:500;z-index:60;box-shadow:var(--shadow)}
.notice{background:var(--warn-bg);color:var(--warn);border-radius:var(--r);padding:10px 14px;margin-bottom:14px;font-size:14px}
.hr{height:1px;background:var(--line2);margin:10px 0}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}}