/* ============================================================
   SPOLU — sdílený plánovač pro dva
   Motiv: dvě životní dráhy, které se protínají tam, kde jste
   oba volní. Responzivní mobil-first, světlý i tmavý režim.
   ============================================================ */

:root {
  /* Hravá nálada: baby blue ground + teplá oranžová akcent. Ztlumené, ladí. */
  --bg:        #EEF4FA;    /* baby-blue tónovaná světlá */
  --surface:   #FFFFFF;
  --surface-2: #E3ECF5;
  --line:      #D2E0EE;
  --ink:       #1E2B3D;    /* tmavě modrošedý inkoust */
  --ink-soft:  #566476;
  --ink-faint: #8A97A8;

  --a:         #E37B3C;    /* partner A — oranžová (směna Michal) */
  --a-soft:    #FBE7D5;
  --a-ink:     #9A4A18;    /* čitelný text na světlé výplni */
  --b:         #4E9DD1;    /* partner B — baby blue (směna Eliška) */
  --b-soft:    #DBEBF8;
  --b-ink:     #1F5680;
  --together:  #EF8A3C;    /* hlavní akcent — teplá oranžová (tlačítka, dnes) */
  --together-soft:#FBE7D3;
  --together-ink:#9A4A18;
  --pair:      #B12A94;    /* „spolu" / oba volní — purpurová/magenta, daleko od modré i korálové */
  --pair-soft: #F7DEF0;
  --pair-ink:  #8A2577;
  --good:      #3F9E80;
  --event:     #E86A8A;    /* společná AKCE — měkká korálová/růžová */
  --event-soft:#FBDEE6;
  --event-ink: #9E2F50;
  --trip:      #3FA79A;    /* společný VÝLET — tlumená mátová */
  --trip-soft: #D6EDE9;
  --trip-ink:  #1A5F55;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(30,43,61,.05), 0 8px 24px -12px rgba(30,43,61,.14);
  --shadow-lg: 0 24px 60px -20px rgba(30,43,61,.28);

  --ff-display: "Space Grotesk", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --ff-body:    "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);   /* výřez / notch nahoře (iOS standalone) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#101826; --surface:#182130; --surface-2:#212C3D; --line:#2E3B4E;
    --ink:#EAF1F8; --ink-soft:#A6B4C6; --ink-faint:#6E7C90;
    --a:#F79A5A; --a-soft:#33241A; --a-ink:#F79A5A; --b:#6FB6E4; --b-soft:#152836; --b-ink:#6FB6E4;
    --together:#F79A5A; --together-soft:#33241A; --together-ink:#F79A5A; --good:#5CBFA0;
    --pair:#E68ACF; --pair-soft:#331A2D; --pair-ink:#E890D4;
    --event:#F291AC; --event-soft:#3A222C; --event-ink:#F291AC; --trip:#5AC4B5; --trip-soft:#16302D; --trip-ink:#5AC4B5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 30px -12px rgba(0,0,0,.6);
    --shadow-lg:0 30px 70px -24px rgba(0,0,0,.72);
  }
}
:root[data-theme="light"] {
  --bg:#EEF4FA; --surface:#FFFFFF; --surface-2:#E3ECF5; --line:#D2E0EE;
  --ink:#1E2B3D; --ink-soft:#566476; --ink-faint:#8A97A8;
  --a:#E37B3C; --a-soft:#FBE7D5; --a-ink:#9A4A18; --b:#4E9DD1; --b-soft:#DBEBF8; --b-ink:#1F5680;
  --together:#EF8A3C; --together-soft:#FBE7D3; --together-ink:#9A4A18; --good:#3F9E80;
  --pair:#B12A94; --pair-soft:#F7DEF0; --pair-ink:#8A2577;
  --event:#E86A8A; --event-soft:#FBDEE6; --event-ink:#9E2F50; --trip:#3FA79A; --trip-soft:#D6EDE9; --trip-ink:#1A5F55;
  --shadow:0 1px 2px rgba(30,43,61,.05), 0 8px 24px -12px rgba(30,43,61,.14);
  --shadow-lg:0 24px 60px -20px rgba(30,43,61,.28);
}
:root[data-theme="dark"] {
  --bg:#101826; --surface:#182130; --surface-2:#212C3D; --line:#2E3B4E;
  --ink:#EAF1F8; --ink-soft:#A6B4C6; --ink-faint:#6E7C90;
  --a:#F79A5A; --a-soft:#33241A; --a-ink:#F79A5A; --b:#6FB6E4; --b-soft:#152836; --b-ink:#6FB6E4;
  --together:#F79A5A; --together-soft:#33241A; --together-ink:#F79A5A; --good:#5CBFA0;
  --pair:#E68ACF; --pair-soft:#331A2D; --pair-ink:#E890D4;
  --event:#F291AC; --event-soft:#3A222C; --event-ink:#F291AC; --trip:#5AC4B5; --trip-soft:#16302D; --trip-ink:#5AC4B5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -24px rgba(0,0,0,.72);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Atribut [hidden] musí vždy skrýt prvek — jinak ho .sheet/.gate s display:flex
   přebijí a modaly se zobrazí samy od startu (i přes přihlašovací obrazovku). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--ff-body);
  background: var(--bg);            /* jednoduchá plná barva, žádný přechod */
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
}

button { font-family: inherit; }

/* ======================= GATE (login) ======================= */
.gate {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b)); gap: 18px;
}
.gate-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow-lg);
  padding: 32px 28px;
}
.gate-logo { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.gate-mark { width: 42px; height: 42px; position: relative; flex: none; }
.gate-mark i {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; mix-blend-mode: multiply;
}
.gate-mark i:first-child { left: 0; background: var(--a); }
.gate-mark i:last-child  { right: 0; background: var(--b); }
.gate-name { font-family: var(--ff-display); font-weight: 700; font-size: 23px; letter-spacing: -.02em; line-height: 1; }
.gate-sub  { font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; }

.gate-title { font-family: var(--ff-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
.gate-lead  { font-size: 14px; color: var(--ink-soft); margin: 0 0 22px; }
.gate-lead b { color: var(--ink); }
.gate-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; margin: 14px 0 6px; }

.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 16px;
  width: 34px; height: 34px; border-radius: 8px; color: var(--ink-faint);
}
.pw-toggle:hover { color: var(--ink-soft); }

.gate input {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px;
}
.gate input:focus { outline: none; border-color: var(--together); box-shadow: 0 0 0 3px color-mix(in oklab, var(--together) 22%, transparent); }

.gate-btn {
  margin-top: 22px; width: 100%; border: none; cursor: pointer;
  background: var(--ink); color: var(--surface);
  border-radius: var(--radius-sm); padding: 14px;
  font-family: var(--ff-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  transition: transform .12s ease, opacity .12s;
}
.gate-btn:hover { transform: translateY(-1px); }
.gate-btn:active { transform: translateY(0); }
.gate-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.gate-btn:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }

.gate-err { color: #D6453B; font-size: 13px; margin: 14px 0 0; font-weight: 500; }
:root[data-theme="dark"] .gate-err, @media (prefers-color-scheme: dark){ .gate-err { color:#FF8C7E; } }
.gate-loading { text-align: center; color: var(--ink-faint); padding: 30px 0; font-size: 14px; }
.gate-foot { font-size: 12px; color: var(--ink-faint); text-align: center; max-width: 380px; }

@media (prefers-color-scheme: dark) { .gate-mark i { mix-blend-mode: screen; } }
:root[data-theme="dark"] .gate-mark i { mix-blend-mode: screen; }
:root[data-theme="light"] .gate-mark i { mix-blend-mode: multiply; }

/* ======================= APP LAYOUT ======================= */
.wrap { max-width: 1080px; margin: 0 auto; padding: calc(18px + var(--safe-t)) 16px calc(96px + var(--safe-b)); }
@media (min-width: 720px) { .wrap { padding: calc(26px + var(--safe-t)) 24px 60px; } }

.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark { width: 38px; height: 38px; position: relative; flex: none; }
.logo-mark span {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 23px; height: 23px; border-radius: 50%; mix-blend-mode: multiply;
}
.logo-mark span:first-child { left: 0; background: var(--a); }
.logo-mark span:last-child  { right: 0; background: var(--b); }
@media (prefers-color-scheme: dark) { .logo-mark span { mix-blend-mode: screen; } }
:root[data-theme="dark"] .logo-mark span { mix-blend-mode: screen; }
:root[data-theme="light"] .logo-mark span { mix-blend-mode: multiply; }
.logo-name { font-family: var(--ff-display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; line-height: 1; }
.logo-sub { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }

.spacer { flex: 1; }

.who {
  display: flex; gap: 7px; align-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow);
  color: inherit;
}
.who:hover { border-color: var(--ink-faint); }
.who-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.who-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.who-sep { width: 1px; height: 15px; background: var(--line); margin: 0 1px; }
@media (max-width: 460px) { .who-name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; } }

.icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  display: grid; place-items: center; font-size: 16px; box-shadow: var(--shadow);
  transition: transform .12s ease, color .12s ease;
}
.icon-btn:hover { color: var(--ink); transform: translateY(-1px); }
.icon-btn:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }

/* ---------- Beacon ---------- */
.beacon {
  position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px;
  background: linear-gradient(115deg,
      color-mix(in oklab, var(--a) 20%, var(--surface)) 0%,
      color-mix(in oklab, var(--together) 18%, var(--surface)) 50%,
      color-mix(in oklab, var(--b) 20%, var(--surface)) 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); margin-bottom: 22px;
}
.beacon::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, color-mix(in oklab, var(--together) 26%, transparent), transparent 70%);
  opacity: .5; pointer-events: none;
}
.beacon-inner { position: relative; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.beacon-lead { min-width: 0; }
.beacon-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-soft);
  font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.beacon-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--together);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--together) 55%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.beacon-when {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(22px, 6vw, 38px); line-height: 1.03; text-wrap: balance; color: var(--ink);
}
.beacon-meta { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }
.beacon-count { margin-left: auto; text-align: right; }
.beacon-count b {
  font-family: var(--ff-display); font-size: clamp(28px, 8vw, 44px); font-weight: 700;
  letter-spacing: -.03em; display: block; line-height: 1; font-variant-numeric: tabular-nums;
}
.beacon-count small { font-size: 11.5px; color: var(--ink-soft); letter-spacing: .02em; }
@media (max-width: 480px) {
  .beacon-count { margin-left: 0; text-align: left; }
  .beacon-inner { gap: 14px; }
}

/* ---------- Week nav ---------- */
.weeknav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.weeknav-title h2 { font-family: var(--ff-display); font-weight: 600; font-size: 16px; margin: 0; letter-spacing: -.01em; }
.weeknav .range { color: var(--ink-faint); font-size: 12.5px; }
.nav-arrows { display: flex; gap: 6px; }
.today-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow); transition: color .12s;
}
.today-btn:hover { color: var(--ink); }
.today-btn:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }

/* ---------- Legend ---------- */
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; font-size: 12px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 20px; height: 11px; border-radius: 4px; display: inline-block; flex: none; }
.sw-a { background: var(--a); } .sw-b { background: var(--b); } .sw-t { background: var(--together); }
.sw-ev { background: var(--event); } .sw-tr { background: var(--trip); }
.sw-e { background: var(--pair-soft); border: 1px solid color-mix(in oklab, var(--pair) 40%, transparent); }

/* ---------- Week board ---------- */
.board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- TÝDEN: 7 sloupců --- */
.view-week { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 780px; }
.view-week .day:nth-child(7n) { border-right: none; }
.day { border-right: 1px solid var(--line); display: flex; flex-direction: column; }

/* --- DEN: jeden široký sloupec --- */
.view-day { display: block; }
.view-day .day-single { border-right: none; }
.view-day .day-body { min-height: 320px; }
.view-day .day-head { padding: 14px 16px; }
.view-day .day-num { font-size: 17px; }
.day-head { padding: 11px 12px 9px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); }
.day-name { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 600; }
.day-num { font-family: var(--ff-display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.day.is-today { background: color-mix(in oklab, var(--together) 8%, var(--surface)); }
.day.is-today .day-num { color: var(--together-ink); }
.day.is-together .day-head { box-shadow: inset 0 -2px 0 var(--pair); }
.day.is-weekend .day-name { color: var(--ink-soft); }

.day-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 128px; }

.together-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--pair-soft); color: var(--pair-ink);
  border: 1px solid color-mix(in oklab, var(--pair) 34%, transparent);
  border-radius: var(--radius-sm); padding: 6px 8px; font-size: 11px; font-weight: 600; line-height: 1.25;
}

.chip {
  border-radius: var(--radius-sm); padding: 6px 8px 6px 10px; font-size: 11.5px; line-height: 1.25;
  display: flex; flex-direction: column; gap: 1px; cursor: pointer;
  border: 1px solid transparent; border-left-width: 3px;
  transition: transform .1s ease; text-align: left; width: 100%;
}
.chip:hover { transform: translateY(-1px); }
.chip:focus-visible { outline: 2px solid var(--together); outline-offset: 1px; }
.chip-top { display: flex; align-items: center; gap: 5px; }
.chip-time { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; }
.chip-title { opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-tag { margin-left: auto; font-size: 13px; }

/* Všechny typy = jemné laděné výplně + levý barevný proužek. Nekřičí, ale
   každý typ má jasně vlastní barvu, takže nesplývají:
   SMĚNY — osoby (oranžová Michal / baby blue Eliška),
   AKCE — korálová, VÝLET — mátová. */
.chip.shift-a { background: var(--a-soft);     color: var(--a-ink);     border-color: color-mix(in oklab, var(--a) 34%, transparent);     border-left-color: var(--a); }
.chip.shift-b { background: var(--b-soft);     color: var(--b-ink);     border-color: color-mix(in oklab, var(--b) 34%, transparent);     border-left-color: var(--b); }
.chip.event   { background: var(--event-soft); color: var(--event-ink); border-color: color-mix(in oklab, var(--event) 34%, transparent); border-left-color: var(--event); }
.chip.trip    { background: var(--trip-soft);  color: var(--trip-ink);  border-color: color-mix(in oklab, var(--trip) 34%, transparent);  border-left-color: var(--trip); }
.day-empty { color: var(--ink-faint); font-size: 11px; text-align: center; margin: auto 0; opacity: .5; }

/* --- MĚSÍC: mřížka 7×6 s čitelnými štítky --- */
.view-month { display: block; min-width: 760px; }   /* na úzkém mobilu povolíme vodorovný scroll */
.month-names { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.month-names span {
  padding: 8px 4px; text-align: center; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
}
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(124px, auto); }
.mcell {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 5px 5px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  overflow: hidden;
}
.mcell:nth-child(7n) { border-right: none; }
.mcell.out { background: color-mix(in oklab, var(--ink) 3%, var(--surface)); }
.mcell.out .mcell-num { color: var(--ink-faint); opacity: .6; }
.mcell.is-today { background: color-mix(in oklab, var(--together) 8%, var(--surface)); }
.mcell.is-today .mcell-num { color: var(--together-ink); font-weight: 700; }
.mcell.is-together { box-shadow: inset 0 -3px 0 var(--pair); }
.mcell-top { display: flex; align-items: center; justify-content: space-between; padding: 0 1px 2px; }
.mcell-num { font-family: var(--ff-display); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }

/* Tělo měsíční buňky = stejné štítky jako v týdnu (together-badge + .chip),
   jen kompaktnější mezery. */
.mcell-body { padding: 0; gap: 4px; min-height: 0; flex: 0 0 auto; }
.mcell-body .chip { padding: 4px 7px; font-size: 11px; }
.mcell-body .together-badge { padding: 4px 7px; font-size: 10.5px; }

@media (max-width: 560px) {
  .month-grid { grid-auto-rows: minmax(110px, auto); }
  .mcell-body .chip, .mcell-body .together-badge { font-size: 10px; padding: 3px 6px; }
}

/* --- Výročí (dny spolu + nejbližší milníky) --- */
.anniv {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 16px 18px; margin: -8px 0 22px;
}
.anniv-head { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.anniv-lead { min-width: 0; }
.anniv-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--pair-ink); font-weight: 600; margin-bottom: 6px;
}
.anniv-when { display: flex; align-items: baseline; gap: 7px; }
.anniv-when b {
  font-family: var(--ff-display); font-size: clamp(24px, 6.5vw, 34px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink);
}
.anniv-when span { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

.anniv-list { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.anniv-list li {
  background: var(--pair-soft); border: 1px solid color-mix(in oklab, var(--pair) 32%, transparent);
  border-radius: 10px; padding: 7px 11px; min-width: 0;
}
.anniv-list li b {
  display: block; font-family: var(--ff-display); font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; color: var(--pair-ink); white-space: nowrap;
}
.anniv-list li span { display: block; font-size: 11px; color: var(--ink-soft); white-space: nowrap; margin-top: 1px; }
.anniv-list li.is-today { background: var(--together-soft); border-color: var(--together); }
.anniv-list li.is-today b { color: var(--together-ink); }

/* Poznámka pod polem ve formuláři (např. vysvětlení výročí) */
.field-note { font-size: 11.5px; color: var(--ink-faint); margin: 6px 0 0; text-transform: none; letter-spacing: 0; }

@media (max-width: 620px) {
  .anniv-list { margin-left: 0; width: 100%; }
  .anniv-list li { flex: 1 1 auto; }
}

/* --- Přepínač pohledu Den/Týden/Měsíc --- */
.viewseg {
  display: flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; margin: 0 0 14px; width: fit-content;
}
.viewseg button {
  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px;
  transition: background-color .12s ease, color .12s ease;
}
.viewseg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.viewseg button:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }

.sync-note { text-align: center; color: var(--ink-faint); font-size: 12px; margin: 18px 0 0; min-height: 16px; }

/* ---------- FAB (mobil) ---------- */
.fab {
  position: fixed; right: 18px; bottom: calc(18px + var(--safe-b)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ink); color: var(--surface); font-size: 28px; line-height: 1;
  box-shadow: var(--shadow-lg); display: grid; place-items: center;
  transition: transform .14s ease;
}
.fab:hover { transform: scale(1.05); }
.fab:active { transform: scale(.96); }
.fab:focus-visible { outline: 2px solid var(--together); outline-offset: 3px; }
@media (min-width: 1128px) {
  /* Na širokých displejích ukotvi tlačítko k pravému okraji obsahu (max-width 1080 + 24 mezera),
     bez použití 100vw — to zahrnuje šířku posuvníku a mohlo by vyvolat vodorovné rolování. */
  .fab { right: calc((100% - 1080px) / 2 + 24px); bottom: 28px; }
}
@media (min-width: 720px) and (max-width: 1127.98px) {
  .fab { bottom: 28px; }
}

/* ======================= SHEET / MODAL ======================= */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
/* Bez backdrop-filter: blur() — na mobilech přes celou plochu drtí výkon
   a způsobuje trhané animace i zaseklé kliknutí. Čirý poloprůhledný překryv. */
.sheet-backdrop { position: absolute; inset: 0; background: rgba(10,12,20,.5); }
.sheet-panel {
  position: relative; width: 100%; max-width: 520px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg);
  padding: 10px 20px calc(22px + var(--safe-b));
  animation: sheetUp .2s ease-out;
  max-height: 92vh; overflow-y: auto;
}
@keyframes sheetUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 4px auto 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sheet-head h3 { font-family: var(--ff-display); font-weight: 600; font-size: 18px; margin: 0; }
.sheet-lead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
.dot-inline { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* --- Výběr vzhledu (skin picker) --- */
.skin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 4px; }
@media (min-width: 480px) { .skin-grid { grid-template-columns: repeat(3, 1fr); } }
.skin-card {
  border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px;
  padding: 8px; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.skin-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.skin-card:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }
.skin-card.on { border-color: var(--together); box-shadow: 0 0 0 2px color-mix(in oklab, var(--together) 35%, transparent); }
.skin-mock {
  display: flex; gap: 4px; align-items: center; justify-content: center;
  border-radius: 8px; padding: 12px 6px; border: 1px solid rgba(127,127,127,.18);
}
.skin-mock i { width: 22%; height: 12px; border-radius: 5px; }
.skin-name { font-family: var(--ff-display); font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-tag { font-size: 10.5px; color: var(--ink-faint); line-height: 1.35; }

@media (min-width: 640px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet-panel { border-radius: 20px; animation: sheetPop .22s ease; }
  .sheet-grip { display: none; }
  @keyframes sheetPop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; }
.field input, .field select {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 13px; width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--together); box-shadow: 0 0 0 3px color-mix(in oklab, var(--together) 20%, transparent); }
/* krátké zvýraznění pole po předvyplnění šablonou */
.field input.flash { animation: fieldFlash .6s ease; }
@keyframes fieldFlash {
  0% { background: color-mix(in oklab, var(--together) 22%, var(--bg)); }
  100% { background: var(--bg); }
}
.field input[type="time"] { font-variant-numeric: tabular-nums; }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; }
.seg button { flex: 1; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 6px; border-radius: 6px; transition: background-color .12s ease, color .12s ease; white-space: nowrap; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg button:focus-visible { outline: 2px solid var(--together); outline-offset: 1px; }

.who-toggle { display: flex; gap: 8px; }
.who-toggle button { flex: 1; border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft); border-radius: var(--radius-sm); padding: 10px 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .12s, border-color .12s, color .12s; min-width: 0; }
.who-toggle button .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.who-toggle button span:not(.dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-toggle button[data-who="a"].active { border-color: var(--a); background: var(--a-soft); color: var(--a); }
.who-toggle button[data-who="b"].active { border-color: var(--b); background: var(--b-soft); color: var(--b); }
.who-toggle button[data-who="both"].active { border-color: var(--together); background: var(--together-soft); color: var(--together-ink); }

/* --- Rychlé šablony --- */
.tpl-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.tpl-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tpl-chip {
  border: 1px solid transparent; border-left-width: 3px;
  border-radius: 999px; padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; line-height: 1.2; transition: transform .1s ease;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl-chip:hover { transform: translateY(-1px); }
.tpl-chip:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }
.tpl-chip .tpl-who { opacity: .85; }
.tpl-chip .tpl-t { font-variant-numeric: tabular-nums; opacity: .8; margin-left: 2px; }
.tpl-chip.shift-a { background: var(--a-soft);     color: var(--a-ink);     border-left-color: var(--a); }
.tpl-chip.shift-b { background: var(--b-soft);     color: var(--b-ink);     border-left-color: var(--b); }
.tpl-chip.event   { background: var(--event-soft); color: var(--event-ink); border-left-color: var(--event); }
.tpl-chip.trip    { background: var(--trip-soft);  color: var(--trip-ink);  border-left-color: var(--trip); }

/* --- Opakování --- */
.repeat-toggle { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.repeat-toggle input { width: 16px; height: 16px; accent-color: var(--together); cursor: pointer; }
#repeatBox { display: flex; flex-direction: column; gap: 12px; }

/* --- Mini kalendář: výběr více konkrétních dnů (režim „Více dnů") --- */
.minical { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.minical-head { display: flex; align-items: center; gap: 4px; padding: 5px 5px 4px; border-bottom: 1px solid var(--line); }
.minical-title { flex: 1; text-align: center; font-family: var(--ff-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.minical-names { display: grid; grid-template-columns: repeat(7, 1fr); padding: 6px 6px 0; }
.minical-names span { text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.minical-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 5px 6px 7px; }
.mc-day {
  aspect-ratio: 1 / 1; min-height: 34px; border: 1px solid transparent; background: transparent;
  color: var(--ink); border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation;
  transition: background-color .12s, color .12s, border-color .12s;
}
.mc-day:hover { background: var(--surface-2); }
.mc-day.out { color: var(--ink-faint); opacity: .55; }        /* dny sousedního měsíce */
.mc-day.today { border-color: var(--ink-faint); }
.mc-day.on { background: var(--together-soft); color: var(--together-ink); border-color: var(--together); }
.mc-day.on.out { opacity: .85; }
.mc-day:focus-visible { outline: 2px solid var(--together); outline-offset: 1px; }
.minical-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.linkish { background: none; border: none; color: var(--ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 2px 0; }
.linkish:hover { color: var(--ink); }
.dow-row { display: flex; gap: 5px; }
.dow-row button {
  flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
  border-radius: 8px; padding: 8px 2px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.dow-row button.on { background: var(--together-soft); color: var(--together-ink); border-color: var(--together); }
.dow-row button:focus-visible { outline: 2px solid var(--together); outline-offset: 1px; }
.repeat-until { display: flex; align-items: center; gap: 10px; }
.repeat-until label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.repeat-until select { flex: 1; }

.sheet-actions { display: flex; gap: 10px; margin-top: 8px; }
.btn-primary { flex: 1; background: var(--ink); color: var(--surface); border: none; border-radius: var(--radius-sm); padding: 14px; font-family: var(--ff-display); font-weight: 600; font-size: 15px; cursor: pointer; letter-spacing: -.01em; transition: transform .12s; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: #D6453B; border-radius: var(--radius-sm); padding: 14px 18px; font-weight: 600; font-size: 14px; cursor: pointer; }
.btn-ghost:hover { background: color-mix(in oklab, #D6453B 8%, transparent); }
.btn-ghost.btn-neutral { color: var(--ink-soft); }
.btn-ghost.btn-neutral:hover { background: var(--surface-2); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%);
  background: var(--ink); color: var(--surface); padding: 12px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 80;
  animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Lišta „nová verze" (PWA update) ---------- */
.update-bar {
  position: fixed; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%);
  z-index: 90; display: flex; gap: 10px; align-items: center;
  max-width: calc(100% - 24px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px 10px 16px; box-shadow: var(--shadow-lg);
  font-size: 13.5px; font-weight: 500;
  animation: toastIn .22s ease;
}
.update-bar span { line-height: 1.35; }
.update-bar button {
  border: none; border-radius: 9px; padding: 9px 13px; cursor: pointer;
  font-family: var(--ff-display); font-weight: 600; font-size: 13px; white-space: nowrap;
}
#updateNow { background: var(--together); color: #fff; }
/* V tmavém režimu je akcent světlejší → tmavý text pro dostatečný kontrast (AA). */
@media (prefers-color-scheme: dark) { #updateNow { color: #101826; } }
:root[data-theme="dark"] #updateNow { color: #101826; }
:root[data-theme="light"] #updateNow { color: #fff; }
#updateLater { background: transparent; color: var(--ink-faint); padding: 9px 8px; }
#updateNow:focus-visible, #updateLater:focus-visible { outline: 2px solid var(--together); outline-offset: 2px; }

/* Na dotykových zařízeních (bez skutečného kurzoru) vypni hover-transformace —
   jinak po tapnutí „uvíznou" (sticky hover) a při scrollu způsobují trhání. */
@media (hover: none) {
  .gate-btn:hover, .icon-btn:hover, .chip:hover, .fab:hover, .btn-primary:hover,
  .who:hover, .today-btn:hover, .btn-ghost:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   VZHLEDY (skiny) — GENEROVÁNO z návrhu palet, needituj ručně
   po jedné barvě; při změně uprav skins.json a přegeneruj.
   Každý skin: světlý blok + tmavý blok (vynucený data-theme
   i automatický přes prefers-color-scheme). Bloky jsou na konci
   souboru, aby vyhrály remízy specificity nad režimovými bloky.
   ============================================================ */

/* --- Bonbónek (bonbonek) — Každý den jiná barvička k nakousnutí --- */
:root[data-skin="bonbonek"] {
  --bg:#FCF0F6;
  --surface:#FFFFFF;
  --surface-2:#F6E2EC;
  --line:#EED0E0;
  --ink:#38222E;
  --ink-soft:#6C5260;
  --ink-faint:#A38795;
  --a:#E0722F;
  --a-soft:#FBE5D2;
  --a-ink:#9C4812;
  --b:#4795D6;
  --b-soft:#D9EBFA;
  --b-ink:#1D5C88;
  --together:#E85D9E;
  --together-soft:#FBDCEB;
  --together-ink:#A81F60;
  --good:#3DA06F;
  --pair:#9C46C9;
  --pair-soft:#F0E0F8;
  --pair-ink:#6C2193;
  --event:#D8455C;
  --event-soft:#FBDCDF;
  --event-ink:#A21C33;
  --trip:#2FA48D;
  --trip-soft:#D4F0E7;
  --trip-ink:#10685A;
  --radius:26px; --radius-sm:16px;
  --ff-display:ui-rounded, 'Trebuchet MS', 'Segoe UI', sans-serif;
}
:root[data-skin="bonbonek"][data-theme="dark"] {
  --bg:#201420;
  --surface:#2A1C2A;
  --surface-2:#372637;
  --line:#4A344A;
  --ink:#F8ECF3;
  --ink-soft:#CCAEC2;
  --ink-faint:#93758A;
  --a:#F09A5E;
  --a-soft:#3B2413;
  --a-ink:#F09A5E;
  --b:#79BCEE;
  --b-soft:#14293C;
  --b-ink:#86C3F0;
  --together:#F387BC;
  --together-soft:#3D1B2C;
  --together-ink:#F591C2;
  --good:#5EC493;
  --pair:#C88BE8;
  --pair-soft:#301F3C;
  --pair-ink:#CE96EB;
  --event:#F08D97;
  --event-soft:#3C1F23;
  --event-ink:#F2969F;
  --trip:#5AC9AF;
  --trip-soft:#123229;
  --trip-ink:#67CFB7;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="bonbonek"]:not([data-theme="light"]) {
    --bg:#201420;
    --surface:#2A1C2A;
    --surface-2:#372637;
    --line:#4A344A;
    --ink:#F8ECF3;
    --ink-soft:#CCAEC2;
    --ink-faint:#93758A;
    --a:#F09A5E;
    --a-soft:#3B2413;
    --a-ink:#F09A5E;
    --b:#79BCEE;
    --b-soft:#14293C;
    --b-ink:#86C3F0;
    --together:#F387BC;
    --together-soft:#3D1B2C;
    --together-ink:#F591C2;
    --good:#5EC493;
    --pair:#C88BE8;
    --pair-soft:#301F3C;
    --pair-ink:#CE96EB;
    --event:#F08D97;
    --event-soft:#3C1F23;
    --event-ink:#F2969F;
    --trip:#5AC9AF;
    --trip-soft:#123229;
    --trip-ink:#67CFB7;
  }
}
[data-skin="bonbonek"] .chip { background-image: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,0) 55%); }
[data-skin="bonbonek"] .beacon {
  background-image:
    repeating-linear-gradient(45deg, color-mix(in oklab, var(--surface) 34%, transparent) 0 12px, transparent 12px 24px),
    linear-gradient(115deg, color-mix(in oklab, var(--a) 20%, var(--surface)) 0%, color-mix(in oklab, var(--together) 18%, var(--surface)) 50%, color-mix(in oklab, var(--b) 20%, var(--surface)) 100%);
}
[data-skin="bonbonek"] .together-badge { border: 2px dashed var(--pair); }

/* --- Jarní louka (louka) — Rozkvetlý týden plný sluníčka --- */
:root[data-skin="louka"] {
  --bg:#F1F7E9;
  --surface:#FFFFFF;
  --surface-2:#E5F0D8;
  --line:#D3E4C2;
  --ink:#263420;
  --ink-soft:#55684B;
  --ink-faint:#8AA07C;
  --a:#CE8F1B;
  --a-soft:#F6EAC6;
  --a-ink:#7E5605;
  --b:#4E93CE;
  --b-soft:#DCEBF8;
  --b-ink:#22587E;
  --together:#61A83B;
  --together-soft:#E2F2D4;
  --together-ink:#33691A;
  --good:#2F9D6E;
  --pair:#B0389E;
  --pair-soft:#F7DEF3;
  --pair-ink:#872478;
  --event:#E0634D;
  --event-soft:#FBE0D8;
  --event-ink:#A03420;
  --trip:#2F9FA8;
  --trip-soft:#D5EEF0;
  --trip-ink:#14646B;
  --radius:18px; --radius-sm:10px;
}
:root[data-skin="louka"][data-theme="dark"] {
  --bg:#141B10;
  --surface:#1D2618;
  --surface-2:#283322;
  --line:#394730;
  --ink:#EEF5E8;
  --ink-soft:#B1C2A5;
  --ink-faint:#798A6D;
  --a:#E3B14E;
  --a-soft:#33290F;
  --a-ink:#E7B857;
  --b:#7BB8E6;
  --b-soft:#17293A;
  --b-ink:#88C0EA;
  --together:#8CC963;
  --together-soft:#223315;
  --together-ink:#96D06E;
  --good:#5BBE8F;
  --pair:#DE8BCD;
  --pair-soft:#341F30;
  --pair-ink:#E394D3;
  --event:#EE8E77;
  --event-soft:#38211B;
  --event-ink:#F19881;
  --trip:#5FC2CB;
  --trip-soft:#143134;
  --trip-ink:#6CC9D2;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="louka"]:not([data-theme="light"]) {
    --bg:#141B10;
    --surface:#1D2618;
    --surface-2:#283322;
    --line:#394730;
    --ink:#EEF5E8;
    --ink-soft:#B1C2A5;
    --ink-faint:#798A6D;
    --a:#E3B14E;
    --a-soft:#33290F;
    --a-ink:#E7B857;
    --b:#7BB8E6;
    --b-soft:#17293A;
    --b-ink:#88C0EA;
    --together:#8CC963;
    --together-soft:#223315;
    --together-ink:#96D06E;
    --good:#5BBE8F;
    --pair:#DE8BCD;
    --pair-soft:#341F30;
    --pair-ink:#E394D3;
    --event:#EE8E77;
    --event-soft:#38211B;
    --event-ink:#F19881;
    --trip:#5FC2CB;
    --trip-soft:#143134;
    --trip-ink:#6CC9D2;
  }
}
[data-skin="louka"] .chip { border-radius: 0 999px 999px 0; border-left-width: 4px; }
[data-skin="louka"] .together-badge { border-radius: 999px 6px 999px 6px; }
[data-skin="louka"] .day-head { border-bottom: 2px dotted var(--line); }
[data-skin="louka"] .mcell { border-right-style: dotted; border-bottom-style: dotted; }

/* --- Levandule (levandule) — Večer v Provence --- */
:root[data-skin="levandule"] {
  --bg:#F0EEF5;
  --surface:#FCFBFE;
  --surface-2:#E5E1EE;
  --line:#D4CFE2;
  --ink:#2A2438;
  --ink-soft:#5A5370;
  --ink-faint:#8C86A0;
  --a:#B76E48;
  --a-soft:#F5E4DA;
  --a-ink:#85431F;
  --b:#6270B4;
  --b-soft:#E2E5F4;
  --b-ink:#3B4788;
  --together:#7D66B2;
  --together-soft:#E7E2F3;
  --together-ink:#55408A;
  --good:#4B9070;
  --pair:#A84E8C;
  --pair-soft:#F3DFEC;
  --pair-ink:#7E3167;
  --event:#C25F7E;
  --event-soft:#F7E0E7;
  --event-ink:#91395A;
  --trip:#43917F;
  --trip-soft:#D9EBE5;
  --trip-ink:#226052;
  --radius:16px; --radius-sm:10px;
  --ff-display:Georgia, 'Times New Roman', serif;
}
:root[data-skin="levandule"][data-theme="dark"] {
  --bg:#141221;
  --surface:#1C1A2C;
  --surface-2:#262338;
  --line:#383350;
  --ink:#ECEAF5;
  --ink-soft:#B0ABC5;
  --ink-faint:#767093;
  --a:#E09B70;
  --a-soft:#33221A;
  --a-ink:#E7A981;
  --b:#97A4E0;
  --b-soft:#1D2138;
  --b-ink:#A7B2E7;
  --together:#A995DC;
  --together-soft:#262038;
  --together-ink:#B8A6E5;
  --good:#6BB491;
  --pair:#D191BC;
  --pair-soft:#301E2A;
  --pair-ink:#DAA1C8;
  --event:#DB8FA6;
  --event-soft:#331F27;
  --event-ink:#E29FB3;
  --trip:#63B4A1;
  --trip-soft:#142E29;
  --trip-ink:#77C1AF;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="levandule"]:not([data-theme="light"]) {
    --bg:#141221;
    --surface:#1C1A2C;
    --surface-2:#262338;
    --line:#383350;
    --ink:#ECEAF5;
    --ink-soft:#B0ABC5;
    --ink-faint:#767093;
    --a:#E09B70;
    --a-soft:#33221A;
    --a-ink:#E7A981;
    --b:#97A4E0;
    --b-soft:#1D2138;
    --b-ink:#A7B2E7;
    --together:#A995DC;
    --together-soft:#262038;
    --together-ink:#B8A6E5;
    --good:#6BB491;
    --pair:#D191BC;
    --pair-soft:#301E2A;
    --pair-ink:#DAA1C8;
    --event:#DB8FA6;
    --event-soft:#331F27;
    --event-ink:#E29FB3;
    --trip:#63B4A1;
    --trip-soft:#142E29;
    --trip-ink:#77C1AF;
  }
}
[data-skin="levandule"] .day-head { border-bottom-style: dotted; }
[data-skin="levandule"] .mcell { border-right-style: dotted; border-bottom-style: dotted; }
[data-skin="levandule"] .day-name { text-transform: none; font-variant: small-caps; letter-spacing: .06em; font-size: 12px; color: var(--ink-soft); }
[data-skin="levandule"] .beacon::after { background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 55%, transparent), transparent 70%); opacity: .9; }

/* --- Petrolej (petrolej) — Hluboký petrolej, teplá měď --- */
:root[data-skin="petrolej"] {
  --bg:#EBF1F1;
  --surface:#FAFDFD;
  --surface-2:#DDE7E7;
  --line:#C9D9D9;
  --ink:#143038;
  --ink-soft:#48626A;
  --ink-faint:#7C939A;
  --a:#B4643C;
  --a-soft:#F4E2D8;
  --a-ink:#81401D;
  --b:#35798E;
  --b-soft:#D6E8EE;
  --b-ink:#175468;
  --together:#1F6E78;
  --together-soft:#D2E8EA;
  --together-ink:#0E4C54;
  --good:#48936C;
  --pair:#9E4780;
  --pair-soft:#F2DEEB;
  --pair-ink:#762F60;
  --event:#C05C74;
  --event-soft:#F7DFE5;
  --event-ink:#90364E;
  --trip:#45906E;
  --trip-soft:#D9ECE2;
  --trip-ink:#23644A;
  --radius:10px; --radius-sm:6px;
  --ff-display:Cambria, Georgia, serif;
}
:root[data-skin="petrolej"][data-theme="dark"] {
  --bg:#0D1B1F;
  --surface:#142529;
  --surface-2:#1C3136;
  --line:#2B454B;
  --ink:#E7F1F2;
  --ink-soft:#A5BCC0;
  --ink-faint:#6D8589;
  --a:#DC9668;
  --a-soft:#33221A;
  --a-ink:#E4A578;
  --b:#6EB4CC;
  --b-soft:#122B33;
  --b-ink:#82C1D6;
  --together:#5BB9C4;
  --together-soft:#103135;
  --together-ink:#71C7D1;
  --good:#62B389;
  --pair:#CC8CB6;
  --pair-soft:#2F1E29;
  --pair-ink:#D69DC2;
  --event:#DA8FA3;
  --event-soft:#331F26;
  --event-ink:#E19FB0;
  --trip:#69B790;
  --trip-soft:#143026;
  --trip-ink:#7DC4A1;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="petrolej"]:not([data-theme="light"]) {
    --bg:#0D1B1F;
    --surface:#142529;
    --surface-2:#1C3136;
    --line:#2B454B;
    --ink:#E7F1F2;
    --ink-soft:#A5BCC0;
    --ink-faint:#6D8589;
    --a:#DC9668;
    --a-soft:#33221A;
    --a-ink:#E4A578;
    --b:#6EB4CC;
    --b-soft:#122B33;
    --b-ink:#82C1D6;
    --together:#5BB9C4;
    --together-soft:#103135;
    --together-ink:#71C7D1;
    --good:#62B389;
    --pair:#CC8CB6;
    --pair-soft:#2F1E29;
    --pair-ink:#D69DC2;
    --event:#DA8FA3;
    --event-soft:#331F26;
    --event-ink:#E19FB0;
    --trip:#69B790;
    --trip-soft:#143026;
    --trip-ink:#7DC4A1;
  }
}
[data-skin="petrolej"] .day.is-today, [data-skin="petrolej"] .mcell.is-today { background: var(--surface); box-shadow: inset 0 0 0 2px var(--together); }
[data-skin="petrolej"] .chip.shift-a { border-color: var(--a); }
[data-skin="petrolej"] .chip.shift-b { border-color: var(--b); }
[data-skin="petrolej"] .chip.event   { border-color: var(--event); }
[data-skin="petrolej"] .chip.trip    { border-color: var(--trip); }
[data-skin="petrolej"] .beacon { box-shadow: inset 0 2px 14px rgba(0,0,0,.14), var(--shadow-lg); }

/* --- Bordó (bordo) — Zraje jako dobré víno --- */
:root[data-skin="bordo"] {
  --bg:#F4EEEE;
  --surface:#FDFAFA;
  --surface-2:#EAE0E0;
  --line:#DCCDCE;
  --ink:#351F26;
  --ink-soft:#66505A;
  --ink-faint:#97848C;
  --a:#B37437;
  --a-soft:#F3E6D4;
  --a-ink:#7C4C15;
  --b:#58718F;
  --b-soft:#E0E7F0;
  --b-ink:#38506C;
  --together:#96354E;
  --together-soft:#F3DDE2;
  --together-ink:#6F2038;
  --good:#4E8E68;
  --pair:#7E5AA8;
  --pair-soft:#E9E1F3;
  --pair-ink:#573A80;
  --event:#C25B85;
  --event-soft:#F6DEE9;
  --event-ink:#923158;
  --trip:#3E8E85;
  --trip-soft:#D7EAE8;
  --trip-ink:#1F5F58;
  --radius:12px; --radius-sm:8px;
  --ff-display:'Book Antiqua', Palatino, Georgia, serif;
}
:root[data-skin="bordo"][data-theme="dark"] {
  --bg:#1C1216;
  --surface:#251A1F;
  --surface-2:#30232A;
  --line:#43323A;
  --ink:#F2EAED;
  --ink-soft:#BCACB2;
  --ink-faint:#837278;
  --a:#D9A160;
  --a-soft:#322313;
  --a-ink:#E1AE71;
  --b:#8FA9C6;
  --b-soft:#1A2531;
  --b-ink:#9FB6D0;
  --together:#D87E93;
  --together-soft:#351B22;
  --together-ink:#E08FA2;
  --good:#6DB28C;
  --pair:#B092DC;
  --pair-soft:#271F33;
  --pair-ink:#BEA3E4;
  --event:#DB8FB4;
  --event-soft:#33202B;
  --event-ink:#E29FBF;
  --trip:#63B2A9;
  --trip-soft:#142E2B;
  --trip-ink:#77C0B7;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="bordo"]:not([data-theme="light"]) {
    --bg:#1C1216;
    --surface:#251A1F;
    --surface-2:#30232A;
    --line:#43323A;
    --ink:#F2EAED;
    --ink-soft:#BCACB2;
    --ink-faint:#837278;
    --a:#D9A160;
    --a-soft:#322313;
    --a-ink:#E1AE71;
    --b:#8FA9C6;
    --b-soft:#1A2531;
    --b-ink:#9FB6D0;
    --together:#D87E93;
    --together-soft:#351B22;
    --together-ink:#E08FA2;
    --good:#6DB28C;
    --pair:#B092DC;
    --pair-soft:#271F33;
    --pair-ink:#BEA3E4;
    --event:#DB8FB4;
    --event-soft:#33202B;
    --event-ink:#E29FBF;
    --trip:#63B2A9;
    --trip-soft:#142E2B;
    --trip-ink:#77C0B7;
  }
}
[data-skin="bordo"] .day-name { letter-spacing: .12em; }
[data-skin="bordo"] .board, [data-skin="bordo"] .beacon, [data-skin="bordo"] .anniv { box-shadow: none; }

/* --- Inkoust & zlato (inkoust-zlato) — Psáno perem, podtrženo zlatem --- */
:root[data-skin="inkoust-zlato"] {
  --bg:#F4F2ED;
  --surface:#FDFCF9;
  --surface-2:#E9E5DC;
  --line:#DAD4C6;
  --ink:#26241E;
  --ink-soft:#57534A;
  --ink-faint:#8B857A;
  --a:#A57B22;
  --a-soft:#F2E7CC;
  --a-ink:#6F5210;
  --b:#4A6076;
  --b-soft:#DFE6ED;
  --b-ink:#2E4155;
  --together:#9C7A1E;
  --together-soft:#F0E6C8;
  --together-ink:#6B520E;
  --good:#4A8A62;
  --pair:#9A4A7E;
  --pair-soft:#F1DEEA;
  --pair-ink:#74305C;
  --event:#B05A4A;
  --event-soft:#F5E0DB;
  --event-ink:#833A2C;
  --trip:#3C7F78;
  --trip-soft:#D8E9E7;
  --trip-ink:#1E5A54;
  --radius:6px; --radius-sm:4px;
  --ff-display:Georgia, 'Times New Roman', serif;
}
:root[data-skin="inkoust-zlato"][data-theme="dark"] {
  --bg:#16140F;
  --surface:#1F1C15;
  --surface-2:#2A261C;
  --line:#3B362A;
  --ink:#F0EDE4;
  --ink-soft:#B8B2A4;
  --ink-faint:#7E786A;
  --a:#D9B356;
  --a-soft:#302914;
  --a-ink:#E2BF69;
  --b:#8CA7BF;
  --b-soft:#1A2530;
  --b-ink:#9DB5CB;
  --together:#D6AE4A;
  --together-soft:#2F2810;
  --together-ink:#E0BD62;
  --good:#6FB58A;
  --pair:#C387AB;
  --pair-soft:#2E1E28;
  --pair-ink:#CF97B9;
  --event:#D6907F;
  --event-soft:#33211C;
  --event-ink:#DEA090;
  --trip:#63B2A9;
  --trip-soft:#142E2A;
  --trip-ink:#77C0B7;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="inkoust-zlato"]:not([data-theme="light"]) {
    --bg:#16140F;
    --surface:#1F1C15;
    --surface-2:#2A261C;
    --line:#3B362A;
    --ink:#F0EDE4;
    --ink-soft:#B8B2A4;
    --ink-faint:#7E786A;
    --a:#D9B356;
    --a-soft:#302914;
    --a-ink:#E2BF69;
    --b:#8CA7BF;
    --b-soft:#1A2530;
    --b-ink:#9DB5CB;
    --together:#D6AE4A;
    --together-soft:#2F2810;
    --together-ink:#E0BD62;
    --good:#6FB58A;
    --pair:#C387AB;
    --pair-soft:#2E1E28;
    --pair-ink:#CF97B9;
    --event:#D6907F;
    --event-soft:#33211C;
    --event-ink:#DEA090;
    --trip:#63B2A9;
    --trip-soft:#142E2A;
    --trip-ink:#77C0B7;
  }
}
[data-skin="inkoust-zlato"] .board, [data-skin="inkoust-zlato"] .anniv { box-shadow: none; }
[data-skin="inkoust-zlato"] .beacon { box-shadow: none; outline: 1px solid var(--line); outline-offset: 3px; }
[data-skin="inkoust-zlato"] .day-name { letter-spacing: .14em; }
[data-skin="inkoust-zlato"] .chip.shift-a, [data-skin="inkoust-zlato"] .chip.shift-b,
[data-skin="inkoust-zlato"] .chip.event, [data-skin="inkoust-zlato"] .chip.trip { background: var(--surface); }

/* --- Grafit (grafit) — Monochrom s modrou nití --- */
:root[data-skin="grafit"] {
  --bg:#F0F1F2;
  --surface:#FBFCFC;
  --surface-2:#E4E6E8;
  --line:#D2D5D9;
  --ink:#232629;
  --ink-soft:#54585D;
  --ink-faint:#85898F;
  --a:#A26B3F;
  --a-soft:#F1E5D9;
  --a-ink:#74461C;
  --b:#5A7590;
  --b-soft:#E0E7EE;
  --b-ink:#3A5470;
  --together:#56698C;
  --together-soft:#E1E5EF;
  --together-ink:#37476A;
  --good:#4E8F6E;
  --pair:#95538F;
  --pair-soft:#F0DFEF;
  --pair-ink:#6E356A;
  --event:#B25C74;
  --event-soft:#F5E0E6;
  --event-ink:#85384E;
  --trip:#45908A;
  --trip-soft:#D9ECEA;
  --trip-ink:#24625D;
  --radius:8px; --radius-sm:5px;
}
:root[data-skin="grafit"][data-theme="dark"] {
  --bg:#131518;
  --surface:#1B1E22;
  --surface-2:#25292E;
  --line:#363B42;
  --ink:#ECEEF1;
  --ink-soft:#AEB3BA;
  --ink-faint:#74797F;
  --a:#D69C6D;
  --a-soft:#322317;
  --a-ink:#DEAA7E;
  --b:#92AFC9;
  --b-soft:#192631;
  --b-ink:#A2BCD3;
  --together:#9AB0D4;
  --together-soft:#1D2735;
  --together-ink:#A9BDDD;
  --good:#6FB18E;
  --pair:#C78FC1;
  --pair-soft:#2D1F2C;
  --pair-ink:#D19FCB;
  --event:#D68F9F;
  --event-soft:#321F24;
  --event-ink:#DE9FAD;
  --trip:#67B3AC;
  --trip-soft:#142E2C;
  --trip-ink:#7BC0B9;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="grafit"]:not([data-theme="light"]) {
    --bg:#131518;
    --surface:#1B1E22;
    --surface-2:#25292E;
    --line:#363B42;
    --ink:#ECEEF1;
    --ink-soft:#AEB3BA;
    --ink-faint:#74797F;
    --a:#D69C6D;
    --a-soft:#322317;
    --a-ink:#DEAA7E;
    --b:#92AFC9;
    --b-soft:#192631;
    --b-ink:#A2BCD3;
    --together:#9AB0D4;
    --together-soft:#1D2735;
    --together-ink:#A9BDDD;
    --good:#6FB18E;
    --pair:#C78FC1;
    --pair-soft:#2D1F2C;
    --pair-ink:#D19FCB;
    --event:#D68F9F;
    --event-soft:#321F24;
    --event-ink:#DE9FAD;
    --trip:#67B3AC;
    --trip-soft:#142E2C;
    --trip-ink:#7BC0B9;
  }
}
[data-skin="grafit"] .board, [data-skin="grafit"] .beacon, [data-skin="grafit"] .anniv { box-shadow: none; }
[data-skin="grafit"] .beacon { background: var(--surface); }
[data-skin="grafit"] .beacon::after { display: none; }
[data-skin="grafit"] .chip.shift-a, [data-skin="grafit"] .chip.shift-b,
[data-skin="grafit"] .chip.event, [data-skin="grafit"] .chip.trip { background: var(--surface-2); }
[data-skin="grafit"] .day-name { letter-spacing: .1em; font-size: 10px; }

/* --- Tuš (tus) — Maximální kontrast: bílá, černá, čisté barvy --- */
:root[data-skin="tus"] {
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F0F0F0;
  --line:#1A1A1A;
  --ink:#000000;
  --ink-soft:#3D3D3D;
  --ink-faint:#757575;
  --a:#D45500;
  --a-soft:#FFE1C7;
  --a-ink:#843300;
  --b:#0057C2;
  --b-soft:#D6E4FA;
  --b-ink:#003C87;
  --together:#1A1A1A;
  --together-soft:#EDEDED;
  --together-ink:#000000;
  --good:#007A3D;
  --pair:#8F00A3;
  --pair-soft:#F3D9F7;
  --pair-ink:#650073;
  --event:#D6003C;
  --event-soft:#FBD7DF;
  --event-ink:#99002B;
  --trip:#007A6C;
  --trip-soft:#D2EEE9;
  --trip-ink:#00584E;
  --radius:0px; --radius-sm:0px;
}
:root[data-skin="tus"][data-theme="dark"] {
  --bg:#000000;
  --surface:#0D0D0D;
  --surface-2:#1A1A1A;
  --line:#4A4A4A;
  --ink:#FFFFFF;
  --ink-soft:#C4C4C4;
  --ink-faint:#8A8A8A;
  --a:#FF8A33;
  --a-soft:#331B08;
  --a-ink:#FFA35C;
  --b:#4D9FFF;
  --b-soft:#0A2138;
  --b-ink:#7AB8FF;
  --together:#F2F2F2;
  --together-soft:#262626;
  --together-ink:#FFFFFF;
  --good:#1FD97A;
  --pair:#D95CFF;
  --pair-soft:#2B0833;
  --pair-ink:#E48AFF;
  --event:#FF3D6E;
  --event-soft:#330D18;
  --event-ink:#FF7A9B;
  --trip:#00D6BC;
  --trip-soft:#073029;
  --trip-ink:#33E0CA;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="tus"]:not([data-theme="light"]) {
    --bg:#000000;
    --surface:#0D0D0D;
    --surface-2:#1A1A1A;
    --line:#4A4A4A;
    --ink:#FFFFFF;
    --ink-soft:#C4C4C4;
    --ink-faint:#8A8A8A;
    --a:#FF8A33;
    --a-soft:#331B08;
    --a-ink:#FFA35C;
    --b:#4D9FFF;
    --b-soft:#0A2138;
    --b-ink:#7AB8FF;
    --together:#F2F2F2;
    --together-soft:#262626;
    --together-ink:#FFFFFF;
    --good:#1FD97A;
    --pair:#D95CFF;
    --pair-soft:#2B0833;
    --pair-ink:#E48AFF;
    --event:#FF3D6E;
    --event-soft:#330D18;
    --event-ink:#FF7A9B;
    --trip:#00D6BC;
    --trip-soft:#073029;
    --trip-ink:#33E0CA;
  }
}
[data-skin="tus"] .board { box-shadow: none; border: 2px solid var(--ink); }
[data-skin="tus"] .beacon { box-shadow: none; border: 2px solid var(--ink); background: var(--surface); }
[data-skin="tus"] .beacon::after { display: none; }
[data-skin="tus"] .chip { border-width: 2px 2px 2px 6px; }
[data-skin="tus"] .chip.shift-a { border-color: var(--a); background: var(--surface); }
[data-skin="tus"] .chip.shift-b { border-color: var(--b); background: var(--surface); }
[data-skin="tus"] .chip.event   { border-color: var(--event); background: var(--surface); }
[data-skin="tus"] .chip.trip    { border-color: var(--trip); background: var(--surface); }
[data-skin="tus"] .day-head { background: var(--ink); border-bottom: none; }
[data-skin="tus"] .day-head .day-name, [data-skin="tus"] .day-head .day-num { color: var(--bg); }
[data-skin="tus"] .day.is-today, [data-skin="tus"] .mcell.is-today { background: var(--surface); box-shadow: inset 0 0 0 3px var(--together); }

/* --- Kompakt (kompakt) — Hustý přehled — víc směn na obrazovku --- */
:root[data-skin="kompakt"] {
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --surface-2:#E9EDF1;
  --line:#D7DDE4;
  --ink:#1B2430;
  --ink-soft:#4E5A68;
  --ink-faint:#8894A2;
  --a:#CE5A00;
  --a-soft:#F9E4D2;
  --a-ink:#8A3C00;
  --b:#3273B4;
  --b-soft:#DBE8F5;
  --b-ink:#1F4E80;
  --together:#CE5A00;
  --together-soft:#F9E4D2;
  --together-ink:#8A3C00;
  --good:#2E8C63;
  --pair:#A0328C;
  --pair-soft:#F3DCEE;
  --pair-ink:#7A2169;
  --event:#C24460;
  --event-soft:#F6DDE3;
  --event-ink:#8F2B44;
  --trip:#2C8C7F;
  --trip-soft:#D7EBE7;
  --trip-ink:#1C665C;
  --radius:4px; --radius-sm:2px;
}
:root[data-skin="kompakt"][data-theme="dark"] {
  --bg:#12161B;
  --surface:#1A2027;
  --surface-2:#232B34;
  --line:#313B46;
  --ink:#E9EEF3;
  --ink-soft:#A5B0BC;
  --ink-faint:#6B7684;
  --a:#F0904A;
  --a-soft:#2F2014;
  --a-ink:#F5A468;
  --b:#6AAADE;
  --b-soft:#14293C;
  --b-ink:#85BCE8;
  --together:#F0904A;
  --together-soft:#2F2014;
  --together-ink:#F5A468;
  --good:#55B990;
  --pair:#D07BC0;
  --pair-soft:#2E1729;
  --pair-ink:#DE93D0;
  --event:#E07E95;
  --event-soft:#33161D;
  --event-ink:#EA96AA;
  --trip:#4FB3A4;
  --trip-soft:#113029;
  --trip-ink:#6CC4B6;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="kompakt"]:not([data-theme="light"]) {
    --bg:#12161B;
    --surface:#1A2027;
    --surface-2:#232B34;
    --line:#313B46;
    --ink:#E9EEF3;
    --ink-soft:#A5B0BC;
    --ink-faint:#6B7684;
    --a:#F0904A;
    --a-soft:#2F2014;
    --a-ink:#F5A468;
    --b:#6AAADE;
    --b-soft:#14293C;
    --b-ink:#85BCE8;
    --together:#F0904A;
    --together-soft:#2F2014;
    --together-ink:#F5A468;
    --good:#55B990;
    --pair:#D07BC0;
    --pair-soft:#2E1729;
    --pair-ink:#DE93D0;
    --event:#E07E95;
    --event-soft:#33161D;
    --event-ink:#EA96AA;
    --trip:#4FB3A4;
    --trip-soft:#113029;
    --trip-ink:#6CC4B6;
  }
}
[data-skin="kompakt"] .board { box-shadow: none; }
[data-skin="kompakt"] .day-head { padding: 7px 8px 6px; }
[data-skin="kompakt"] .day-name { font-size: 10px; letter-spacing: .08em; }
[data-skin="kompakt"] .day-body { padding: 5px; gap: 4px; min-height: 96px; }
[data-skin="kompakt"] .chip { padding: 4px 6px 4px 8px; font-size: 10.5px; }
[data-skin="kompakt"] .mcell { padding: 2px 3px 3px; }
[data-skin="kompakt"] .mcell-body .chip { padding: 2px 5px; font-size: 10px; }
[data-skin="kompakt"] .month-grid { grid-auto-rows: minmax(96px, auto); }

/* ============================================================
   DESIGNY — druhá osa vzhledu: úplně jiné ROZLOŽENÍ kalendáře.
   Atribut data-design na <html>; kombinuje se nezávisle se
   stylem (data-skin = barvy/tvary) i režimem (data-theme).
   JS drží aktuální pohled v data-view na <html> — pravidla,
   která mění rám .board, platí jen pro týdenní pohled.
   ============================================================ */

/* --- Agenda (agenda) — dny pod sebou jako seznam --- */
[data-design="agenda"] .view-week { display: block; min-width: 0; }
[data-design="agenda"] .view-week .day { flex-direction: row; border-right: none; border-bottom: 1px solid var(--line); }
[data-design="agenda"] .view-week .day:last-child { border-bottom: none; }
[data-design="agenda"] .view-week .day-head {
  width: 96px; flex: none; flex-direction: column; align-items: flex-start; gap: 0;
  border-bottom: none; border-right: 1px solid var(--line); padding: 12px;
}
[data-design="agenda"] .view-week .day-num { font-size: 24px; line-height: 1.1; }
[data-design="agenda"] .view-week .day-body { min-height: 76px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
[data-design="agenda"] .view-week .chip { width: auto; max-width: 100%; }
[data-design="agenda"] .view-week .together-badge { width: 100%; }

/* --- Časová osa (osa) — listování dny jako kartami --- */
[data-design="osa"][data-view="week"] .board { background: transparent; border: none; box-shadow: none; overflow: visible; border-radius: 0; }
[data-design="osa"][data-view="week"] .board-scroll { scroll-snap-type: x proximity; scroll-padding: 16px; }
[data-design="osa"] .view-week { display: flex; gap: 12px; min-width: 0; padding: 4px 2px 10px; }
[data-design="osa"] .view-week .day {
  flex: none; width: min(78vw, 300px); scroll-snap-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
[data-design="osa"] .view-week .day-head { padding: 14px 14px 10px; }
[data-design="osa"] .view-week .day-num { font-size: 30px; line-height: 1; }
[data-design="osa"] .view-week .day-body { min-height: 180px; }
[data-design="osa"] .view-week .day.is-today { box-shadow: 0 0 0 2px var(--together), var(--shadow); }

/* --- Karty (karty) — každý den samostatná karta v mřížce --- */
[data-design="karty"][data-view="week"] .board { background: transparent; border: none; box-shadow: none; overflow: visible; border-radius: 0; }
[data-design="karty"] .view-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; min-width: 0; }
[data-design="karty"] .view-week .day {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
[data-design="karty"] .view-week .day.is-today { box-shadow: 0 0 0 2px var(--together), var(--shadow); }

/* --- Deník (denik) — linkovaný sešit s okrajem --- */
[data-design="denik"] { --ff-display: Georgia, 'Times New Roman', serif; }
[data-design="denik"] .view-week { display: block; min-width: 0; }
[data-design="denik"] .view-week .day { flex-direction: row; border-right: none; }
[data-design="denik"] .view-week .day-head {
  width: 76px; flex: none; flex-direction: column; align-items: center; justify-content: flex-start;
  border-bottom: none; border-right: 2px solid color-mix(in oklab, var(--event) 45%, transparent);
  padding: 14px 8px; gap: 0;
}
[data-design="denik"] .view-week .day-num { font-size: 26px; font-style: italic; }
[data-design="denik"] .view-week .day-body {
  min-height: 96px; padding: 10px 12px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--line) 31px, var(--line) 32px);
}
[data-design="denik"] .chip { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent); padding: 4px 2px 6px; }
[data-design="denik"] .together-badge { background: transparent; border: none; border-bottom: 1px dashed var(--pair); border-radius: 0; width: fit-content; }

/* --- Terminál (terminal) — strohý monospace výpis --- */
[data-design="terminal"] {
  --ff-display: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --ff-body: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --radius: 0px; --radius-sm: 0px;
}
[data-design="terminal"] .beacon, [data-design="terminal"] .legend { display: none; }
[data-design="terminal"] .board { box-shadow: none; border: 1px solid var(--ink-soft); }
[data-design="terminal"] .view-week { display: block; min-width: 0; }
[data-design="terminal"] .view-week .day { border-right: none; border-bottom: 1px dashed var(--line); }
[data-design="terminal"] .view-week .day:last-child { border-bottom: none; }
[data-design="terminal"] .day-head { border-bottom: none; justify-content: flex-start; gap: 8px; padding: 10px 12px 2px; }
[data-design="terminal"] .day-name { text-transform: lowercase; letter-spacing: 0; font-size: 12px; color: var(--ink-soft); }
[data-design="terminal"] .day-name::before { content: "## "; color: var(--ink-faint); }
[data-design="terminal"] .chip { background: transparent; border: none; border-radius: 0; padding: 2px 12px; flex-direction: row; gap: 8px; align-items: baseline; }
[data-design="terminal"] .chip::before { content: ">"; color: var(--ink-faint); font-weight: 700; flex: none; }
[data-design="terminal"] .together-badge { background: transparent; border: 1px dashed var(--pair); border-radius: 0; }
[data-design="terminal"] .mcell { border-right-style: dashed; border-bottom-style: dashed; }
[data-design="terminal"] .month-names span { text-transform: lowercase; }

/* --- Plakát (plakat) — obří číslice, editorial --- */
[data-design="plakat"] .legend { display: none; }
[data-design="plakat"] .view-week { display: block; min-width: 0; }
[data-design="plakat"] .view-week .day { border-right: none; border-bottom: 3px solid var(--ink); }
[data-design="plakat"] .view-week .day:last-child { border-bottom: none; }
[data-design="plakat"] .view-week .day-head { border-bottom: none; justify-content: flex-start; align-items: baseline; gap: 14px; padding: 10px 14px 0; }
[data-design="plakat"] .view-week .day-num { font-size: clamp(38px, 8vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
[data-design="plakat"] .day-name { font-size: 13px; letter-spacing: .18em; }
[data-design="plakat"] .view-week .day-body { padding: 8px 14px 18px; }
[data-design="plakat"] .chip { font-size: 13px; }
[data-design="plakat"] .weeknav-title h2 { font-size: 30px; letter-spacing: -.03em; }
[data-design="plakat"] .beacon { border-radius: 0; }

/* --- Nástěnka (nastenka) — lístky připíchnuté ve sloupcích --- */
[data-design="nastenka"][data-view="week"] .board { background: transparent; border: none; box-shadow: none; overflow: visible; border-radius: 0; }
[data-design="nastenka"] .view-week { display: grid; grid-template-columns: repeat(7, minmax(136px, 1fr)); gap: 10px; min-width: 952px; padding: 2px; }
[data-design="nastenka"] .view-week .day { border-right: none; }
[data-design="nastenka"] .view-week .day-head {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; box-shadow: var(--shadow); margin-bottom: 6px; align-items: center;
}
[data-design="nastenka"] .view-week .day.is-today .day-head { border-color: var(--together); box-shadow: 0 0 0 2px color-mix(in oklab, var(--together) 30%, transparent); }
[data-design="nastenka"] .view-week .day.is-together .day-head { box-shadow: inset 0 -2px 0 var(--pair), var(--shadow); }
[data-design="nastenka"] .view-week .day-body { padding: 2px; gap: 8px; }
[data-design="nastenka"] .view-week .chip { box-shadow: var(--shadow); transform: rotate(-.8deg); }
[data-design="nastenka"] .view-week .chip:nth-child(even) { transform: rotate(1deg); }

/* --- Zprávy (chat) — plán jako konverzace --- */
[data-design="chat"] .view-week { display: block; min-width: 0; }
[data-design="chat"] .view-week .day { border-right: none; }
[data-design="chat"] .day-head {
  border-bottom: none; width: fit-content; margin: 10px auto 2px; gap: 7px;
  background: var(--surface-2); border-radius: 999px; padding: 5px 14px; align-items: baseline;
}
[data-design="chat"] .day.is-today .day-head { background: var(--together-soft); }
[data-design="chat"] .day-body { padding: 6px 12px 14px; gap: 7px; min-height: 0; }
[data-design="chat"] .view-week .day-body { min-height: 54px; }
[data-design="chat"] .chip { max-width: 80%; border: none; border-radius: 16px; padding: 8px 13px; }
[data-design="chat"] .chip.shift-a { align-self: flex-start; border-bottom-left-radius: 5px; }
[data-design="chat"] .chip.shift-b { align-self: flex-end; border-bottom-right-radius: 5px; }
[data-design="chat"] .chip.event, [data-design="chat"] .chip.trip { align-self: center; text-align: center; }
[data-design="chat"] .together-badge { align-self: center; width: fit-content; border-radius: 999px; }
[data-design="chat"] .day-empty { text-align: center; }

/* --- Zen (zen) — jen text, ticho a linky --- */
[data-design="zen"] .beacon, [data-design="zen"] .legend { display: none; }
[data-design="zen"][data-view="week"] .board,
[data-design="zen"][data-view="day"] .board { background: transparent; border: none; box-shadow: none; border-radius: 0; }
[data-design="zen"] .view-week { display: block; min-width: 0; }
[data-design="zen"] .view-week .day { border-right: none; }
[data-design="zen"] .day-head { border-bottom: 1px solid var(--line); padding: 12px 2px 6px; }
[data-design="zen"] .day.is-today { background: transparent; }
[data-design="zen"] .day.is-today .day-head { border-bottom: 2px solid var(--together); }
[data-design="zen"] .day-body { padding: 8px 2px 16px; gap: 2px; min-height: 0; }
[data-design="zen"] .view-week .day-body { min-height: 44px; }
[data-design="zen"] .chip { background: transparent; border: none; border-radius: 0; padding: 5px 2px; flex-direction: row; gap: 9px; align-items: baseline; color: var(--ink); }
[data-design="zen"] .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; }
[data-design="zen"] .chip.shift-a::before { background: var(--a); }
[data-design="zen"] .chip.shift-b::before { background: var(--b); }
[data-design="zen"] .chip.event::before { background: var(--event); }
[data-design="zen"] .chip.trip::before { background: var(--trip); }
[data-design="zen"] .together-badge { background: transparent; border: none; padding: 5px 2px; }

/* Náhledy designů ve výběru (wireframe mřížka) */
.pick-h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-weight: 600; margin: 16px 0 8px; }
.pick-h:first-of-type { margin-top: 0; }
.pick-h .tpl-hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.dmock {
  display: flex; height: 46px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); padding: 5px; gap: 4px; overflow: hidden;
}
.dmock i, .dmock span { display: block; }
.dmock i { background: var(--ink-faint); opacity: .7; border-radius: 3px; flex: none; }