/* ════════════════════════════════════════════════════════════
   Tina Roux — sdílené styly · 4 barevné směry přes [data-theme]
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   Výchozí směr „Garnet" — teplá růžová s tyrkysovým akcentem
   ════════════════════════════════════════════════════════════ */
:root {
  --bg: #f8ece5;             /* cream z logomanuálu */
  --surface: #fff9f4;
  --surface-2: #efdcd2;
  --ink: #3e3835;            /* ink z logomanuálu */
  --muted: #8a7a7b;
  --line: rgba(62, 56, 53, 0.15);
  --brand: #a8547a;          /* logo, navigace, datum fotky */
  --primary: #b25c7b;        /* hlavní akce */
  --primary-ink: #fff9f4;
  --hl: #09a1a1;             /* zvýraznění, poznámky (teal) */
  --acc3: #d99a45;           /* ranní rutina, štítky (sand) */
  --before: #d396a6;
  --after: #09a1a1;
  --shadow: 0 2px 18px rgba(62, 56, 53, 0.10);
  --font-head: "Fraunces", serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "DM Mono", monospace;
  --radius: 14px;
}

/* ── Směr „Seashell" — tlumená mušlová, slate-teal ── */
html[data-theme="seashell"] {
  --bg: #f7ede1;
  --surface: #fffaf2;
  --surface-2: #efe1d1;
  --ink: #2b454f;
  --muted: #76858c;
  --line: rgba(48, 82, 92, 0.16);
  --brand: #30525c;
  --primary: #09a1a1;
  --primary-ink: #fbfdfc;
  --hl: #b65f7f;
  --acc3: #d99a45;
  --before: #d396a6;
  --after: #5484a4;
  --shadow: 0 2px 18px rgba(48, 82, 92, 0.09);
}

/* ── Směr „Clay" — terakota a západ slunce ── */
html[data-theme="clay"] {
  --bg: #f6e7d6;
  --surface: #fffaf2;
  --surface-2: #f0dabf;
  --ink: #4a3a30;
  --muted: #8f7b6b;
  --line: rgba(74, 58, 48, 0.15);
  --brand: #c2674a;
  --primary: #d4774f;
  --primary-ink: #fffaf2;
  --hl: #5fa39d;
  --acc3: #e0a23f;
  --before: #e0895c;
  --after: #6ba8a2;
  --shadow: 0 2px 18px rgba(74, 58, 48, 0.12);
}

/* ── Směr „Melon" — meloun a citron, svěží ── */
html[data-theme="melon"] {
  --bg: #fcebd9;
  --surface: #fffbf3;
  --surface-2: #f8e0c9;
  --ink: #3a4a39;
  --muted: #7e8a76;
  --line: rgba(58, 74, 57, 0.15);
  --brand: #4a9b5e;
  --primary: #e35570;
  --primary-ink: #fffbf3;
  --hl: #e8a233;
  --acc3: #e8a233;
  --before: #ed6b7d;
  --after: #4a9b5e;
  --shadow: 0 2px 18px rgba(58, 74, 57, 0.12);
}

/* ── Základ ── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Volitelná terrazzo textura na pozadí (Tweak) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("img/terrazzo-cream.png");
  background-size: 560px; opacity: 0; transition: opacity 0.3s;
}
html[data-terrazzo="true"] body::before { opacity: 0.42; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; }
h1 em, h2 em { font-style: italic; color: var(--hl); }
a { color: inherit; }
p { margin: 0; }
::placeholder { color: var(--muted); opacity: 0.7; }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Navigace ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1060px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.logo-img { height: 23px; width: auto; display: block; }
.nav-links { display: flex; gap: 6px; margin: 0 auto; }
.nav-links a {
  text-decoration: none; font-weight: 600; font-size: 14.5px;
  padding: 7px 16px; border-radius: 999px; color: var(--ink);
  transition: background 0.15s; white-space: nowrap;
}
.nav-links a:hover { background: var(--surface-2); }
.nav-links a.active {
  background: var(--brand); color: var(--primary-ink);
}
.nav-out {
  text-decoration: none; font-weight: 600; font-size: 14px;
  color: var(--muted);
}
.nav-out:hover { color: var(--ink); }

/* ── Layout ── */
.wrap {
  max-width: 1060px; margin: 0 auto; padding: 44px 24px 110px;
  position: relative; z-index: 1;
}
.page-head { margin-bottom: 34px; }
.page-head h1 { font-size: 40px; line-height: 1.12; letter-spacing: -0.01em; }
.page-head .lede { margin-top: 10px; color: var(--muted); max-width: 560px; }
.star { color: var(--hl); }

/* ── Úvodní (landing) stránka ── */
.nav-links-home a { color: var(--ink); }
.home-hero { max-width: 680px; margin: 30px 0 60px; }
.home-hero .mono { margin-bottom: 18px; }
.home-hero h1 { font-size: 56px; line-height: 1.08; letter-spacing: -0.015em; }
.home-hero .lede { margin-top: 20px; color: var(--muted); font-size: 17px; max-width: 540px; }
.home-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.home-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; }
.home-feat { padding: 26px 24px; }
.home-feat .home-ic {
  font-size: 22px; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); margin-bottom: 14px;
}
.home-feat h2 { font-size: 22px; margin-bottom: 8px; }
.home-feat p { color: var(--muted); font-size: 14.5px; }
.home-bottom { text-align: center; padding: 20px 0 10px; }
.home-bottom h2 { font-size: 32px; margin-bottom: 8px; }
.home-bottom .lede { color: var(--muted); margin-bottom: 22px; }
@media (max-width: 860px) {
  .home-hero h1 { font-size: 40px; }
  .home-features { grid-template-columns: 1fr; }
}

/* ── Karty ── */
.card {
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Tlačítka ── */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px;
  border-radius: 999px; border: 1px solid transparent;
  padding: 11px 22px; cursor: pointer; transition: filter 0.15s, background 0.15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 16px; font-size: 13.5px; }

/* ── Formuláře ── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
}
.field .opt { font-weight: 500; color: var(--muted); }
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], select, textarea {
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 0.65); padding: 10px 13px;
  outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}
input[type="date"] { font-family: var(--font-mono); font-size: 13px; }

/* ── Chybová hláška ── */
.form-error {
  display: none;
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  color: var(--primary);
  border-radius: calc(var(--radius) * 0.65);
  padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  margin-bottom: 14px;
}
.form-error.show { display: block; }

/* ════════ Přihlášení ════════ */
.auth-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  align-items: center; min-height: calc(100vh - 220px);
}
.auth-hero h1 { font-size: 54px; line-height: 1.1; letter-spacing: -0.015em; }
.auth-hero .lede { margin-top: 18px; color: var(--muted); font-size: 16.5px; max-width: 440px; }
.auth-card { padding: 30px 30px 26px; }
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--surface-2); border-radius: 999px; padding: 4px;
  margin-bottom: 22px;
}
.seg button {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  border: none; background: transparent; color: var(--muted);
  border-radius: 999px; padding: 9px 0; cursor: pointer;
}
.seg button.active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}
.divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted); font-size: 13px; margin: 20px 0 16px;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.oauth { display: flex; flex-direction: column; gap: 10px; }
.oauth .btn { justify-content: flex-start; }
.oauth .btn span:last-child { white-space: nowrap; }
.oauth .ic {
  font-family: var(--font-mono); font-weight: 500; font-size: 15px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); display: inline-flex;
  align-items: center; justify-content: center; flex: none;
}

/* ════════ Rutina (dashboard) ════════ */
.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.col-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
}
.col-head .sym {
  font-size: 17px; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; align-self: center; color: var(--ink);
}
.col-rano .sym   { background: color-mix(in oklab, var(--acc3) 30%, var(--surface)); }
.col-den .sym    { background: color-mix(in oklab, var(--hl) 22%, var(--surface)); }
.col-vecer .sym  { background: color-mix(in oklab, var(--brand) 22%, var(--surface)); }
.col-head h2 { font-size: 23px; }
.count {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--muted);
  background: var(--surface-2); border-radius: 999px; padding: 2px 10px;
  margin-left: auto; align-self: center;
}
.products { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.empty { color: var(--muted); font-style: italic; font-size: 14px; padding: 6px 2px 10px; }

/* ── Produkt = kompaktní karta (lišta s fotkou nahoře, název, datum) ── */
.product {
  position: relative;
  padding: 12px 13px 13px;
  display: flex; flex-direction: column; gap: 3px;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.product:hover { box-shadow: 0 6px 20px rgba(60, 47, 52, 0.12); }
.product.dragging { opacity: 0.4; }

/* lišta: fotka + táhlo vlevo, akce vpravo */
.p-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.p-bar-l { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.p-drag { cursor: grab; color: var(--muted); font-size: 14px; line-height: 1; user-select: none; flex: none; touch-action: none; }
.p-drag:active { cursor: grabbing; }
.p-img {
  flex: none; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); color: var(--muted);
  cursor: pointer; overflow: hidden; font-size: 0; padding: 0;
  transition: filter 0.15s;
}
.p-img::before { content: "📷"; font-size: 18px; line-height: 1; opacity: 0.65; }
.p-img.has-img::before { content: none; }
.p-img.has-img:hover { filter: brightness(1.05); }
.p-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.p-dup, .product .del {
  width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.p-dup:hover { background: var(--surface-2); color: var(--brand); }
.product .del:hover { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }

.p-name { font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: pretty; }
.p-note { color: var(--hl); font-size: 12.5px; line-height: 1.3; }
.p-note:empty, .shot-meta .note:empty { display: none; }
.p-act { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.02em; color: color-mix(in oklab, var(--acc3) 62%, var(--ink)); }
.p-act:empty::before { content: "+ aktivní látky"; color: var(--muted); opacity: 0.5; cursor: text; }
.p-act[contenteditable]:focus::before { content: none; }
.week-grid .p-act { font-size: 10.5px; }

.p-meta { margin-top: 5px; }
.p-from-l { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.03em; }
.p-from { width: auto; padding: 3px 6px; font-size: 11px; color: var(--ink); border: 1px solid var(--line); background: var(--surface); border-radius: 6px; }
.p-from:focus { border-color: var(--brand); box-shadow: none; }

.p-stop { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.p-stop-cb { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; flex: none; }

.p-name[contenteditable]:focus, .p-note[contenteditable]:focus, .p-act[contenteditable]:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 5px; }

/* táhnutí produktu mezi částmi dne / dny */
.p-ghost { position: fixed; z-index: 999; pointer-events: none; width: 240px; box-shadow: 0 16px 40px rgba(60, 47, 52, 0.26); opacity: 0.95; }
.drop-ph { height: 60px; margin: 0; list-style: none; border: 2px dashed color-mix(in oklab, var(--brand) 50%, transparent); border-radius: calc(var(--radius) * 0.6); background: color-mix(in oklab, var(--brand) 8%, transparent); }
.products.drop-over { outline: 2px dashed color-mix(in oklab, var(--brand) 40%, transparent); outline-offset: 4px; border-radius: 9px; }
.add-form { margin-top: 12px; padding: 16px; background: var(--surface-2); border: 1px dashed var(--line); box-shadow: none; }
.add-form .field { margin-bottom: 10px; }
.add-form input { background: var(--surface); }

/* ── Výběr typu rutiny (jen první spuštění) ── */
.routine-chooser { padding: 26px 26px 28px; margin-bottom: 26px; }
.routine-chooser > h2 { font-size: 24px; }
.routine-chooser > .lede { margin: 6px 0 18px; color: var(--muted); }
.chooser-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chooser-opts button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; padding: 16px; cursor: pointer;
  border: 1px solid var(--line); border-radius: calc(var(--radius) * 0.8);
  background: var(--surface); color: var(--ink); transition: border-color 0.15s, background 0.15s;
}
.chooser-opts button:hover { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 5%, var(--surface)); }
.chooser-opts .ch-ic { font-size: 22px; }
.chooser-opts strong { font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.chooser-opts span:last-child { font-size: 12.5px; color: var(--muted); }

/* ── Vždy viditelný přepínač režimu ── */
.routine-current {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px;
}
.rc-label {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.routine-switch {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--surface-2); border-radius: 999px; padding: 5px; max-width: 100%;
}
.routine-switch button {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  border: none; background: transparent; color: var(--muted);
  border-radius: 999px; padding: 9px 18px; cursor: pointer; white-space: nowrap;
}
.routine-switch button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); }

.routine-pane[hidden] { display: none; }

/* dny v týdnu — 7 sloupců */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.week-grid .day-col,
.ab-grid .routine-col {
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px;
}
.ab-grid .routine-col { padding: 20px 20px 22px; }
.day-col .col-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; }
.day-col .col-head h2 { font-size: 17px; }
.day-col .col-head .dow { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.day-col.is-weekend .col-head h2 { color: var(--primary); }
.week-grid .day-col.is-weekend { background: color-mix(in oklab, var(--brand) 5%, color-mix(in oklab, var(--surface) 82%, transparent)); }
.day-col .products { gap: 9px; }
/* užší sloupce → o něco menší fotka */
.week-grid .product { padding: 11px 11px 12px; }
.week-grid .p-img { width: 42px; height: 42px; }
.week-grid .p-name { font-size: 13.5px; }
.week-grid .p-note { font-size: 11.5px; }
.week-grid .p-dup, .week-grid .day-col .del { width: 24px; height: 24px; }
.day-col .add-mini {
  margin-top: 8px; border: 1px dashed var(--line); background: transparent;
  color: var(--muted); border-radius: calc(var(--radius) * 0.6);
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  padding: 8px; cursor: pointer; width: 100%;
}
.day-col .add-mini:hover { background: var(--surface-2); color: var(--ink); }

/* podsekce denní doby uvnitř dne / dne A-B */
.tod { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.tod-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.tod-label .ic { font-size: 13px; }
.tod-rano  .tod-label .ic { color: var(--acc3); }
.tod-den   .tod-label .ic { color: var(--hl); }
.tod-vecer .tod-label .ic { color: var(--brand); }
.tod .products:empty { margin: 0; }
.tod .add-mini { margin-top: 8px; padding: 7px; font-size: 12px; }
.ab-grid .tod .products { gap: 10px; }

/* široké karty (Každý den stejně, Obden) → velká fotka vlevo, info vpravo */
.routine-pane[data-mode="time"] .product,
.ab-grid .product {
  padding: 12px 13px 12px 108px;
  min-height: 106px;
  justify-content: center;
}
.routine-pane[data-mode="time"] .p-img,
.ab-grid .p-img {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 82px; height: 82px; border-radius: 11px;
}
.routine-pane[data-mode="time"] .p-img::before,
.ab-grid .p-img::before { font-size: 26px; }
.routine-pane[data-mode="time"] .p-bar,
.ab-grid .p-bar { margin-bottom: 0; }

/* ── Týden: orientace & pořádek (společné pro všechny varianty) ── */
/* barevné odlišení částí dne */
.tod-rano  { --tod-c: var(--acc3); }
.tod-den   { --tod-c: var(--hl); }
.tod-vecer { --tod-c: var(--brand); }
.tod { border-top-color: color-mix(in oklab, var(--tod-c, var(--line)) 32%, var(--line)); }
.tod-label {
  width: fit-content; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--tod-c, var(--muted)) 13%, transparent);
  color: color-mix(in oklab, var(--tod-c, var(--muted)) 52%, var(--ink));
  margin-bottom: 8px;
}

/* prázdná sekce = jen štítek + malé přidat na jednom řádku */
.tod:has(.products:empty) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tod:has(.products:empty) .tod-label { margin-bottom: 0; }
.tod:has(.products:empty) .add-mini { margin-top: 0; width: auto; padding: 4px 11px; font-size: 11.5px; border-radius: 999px; }
/* …ale během přetahování se prázdné sekce otevřou jako cíl ↓ */
body:has(.p-ghost) .tod:has(.products:empty) { display: block; }
body:has(.p-ghost) .tod .products:empty {
  min-height: 46px; margin-top: 6px;
  border: 1.5px dashed color-mix(in oklab, var(--brand) 40%, transparent);
  border-radius: calc(var(--radius) * 0.6);
}

/* přilepená hlavička dne (ať vždy víš, ve kterém dni jsi) */
.week-grid .day-col .col-head {
  position: sticky; top: 64px; z-index: 2;
  background: color-mix(in oklab, var(--surface) 88%, var(--bg));
  backdrop-filter: blur(5px);
  margin: -14px -12px 8px; padding: 12px 12px 7px;
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
}
.week-grid .day-col.is-weekend .col-head { background: color-mix(in oklab, var(--brand) 6%, color-mix(in oklab, var(--surface) 88%, var(--bg))); }

/* dnešní den */
.week-grid .day-col.is-today {
  border-color: color-mix(in oklab, var(--hl) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hl) 15%, transparent);
}
.today-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #fff;
  background: var(--hl); border-radius: 999px; padding: 2px 8px;
  width: fit-content;
}

/* týden využije víc šířky obrazovky */
@media (min-width: 1150px) {
  .week-grid {
    --wk-max: 1500px;
    width: min(calc(100vw - 56px), var(--wk-max));
    margin-left: calc((100% - min(calc(100vw - 56px), var(--wk-max))) / 2);
  }
  html[data-week="banks"] .week-grid { --wk-max: 1280px; }
}

/* ── Varianta „2 řady": Po–Čt nahoře, Pá–Ne dole ── */
@media (min-width: 861px) {
  html[data-week="banks"] .week-grid { grid-template-columns: repeat(12, 1fr); }
  html[data-week="banks"] .week-grid .day-col { grid-column: span 3; }
  html[data-week="banks"] .week-grid .day-col[data-day="4"],
  html[data-week="banks"] .week-grid .day-col[data-day="5"],
  html[data-week="banks"] .week-grid .day-col[data-day="6"] { grid-column: span 4; }
  html[data-week="banks"] .week-grid .p-img { width: 54px; height: 54px; }
  html[data-week="banks"] .week-grid .p-name { font-size: 14.5px; }
}

/* ── Varianta „Posuvný": široké sloupce, posun do stran ── */
@media (min-width: 861px) {
  html[data-week="scroll"] .week-grid {
    display: flex; gap: 14px; overflow-x: auto;
    padding: 2px 2px 16px; scroll-snap-type: x proximity;
  }
  html[data-week="scroll"] .week-grid .day-col { flex: 0 0 252px; scroll-snap-align: start; }
  html[data-week="scroll"] .week-grid .p-img { width: 54px; height: 54px; }
  html[data-week="scroll"] .week-grid .p-name { font-size: 14.5px; }
  html[data-week="scroll"] .week-grid .day-col .col-head { position: static; margin: 0 0 8px; padding: 0; background: none; backdrop-filter: none; border-radius: 0; }
  html[data-week="scroll"] .week-grid::-webkit-scrollbar { height: 8px; }
  html[data-week="scroll"] .week-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
}

/* obden — Den A / Den B */
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.col-a .sym { background: color-mix(in oklab, var(--primary) 24%, var(--surface)); }
.col-b .sym { background: color-mix(in oklab, var(--after) 26%, var(--surface)); }
.ab-hint { color: var(--muted); font-size: 13.5px; margin: -14px 0 22px; }
.ab-grid .col-head { flex-direction: row; align-items: center; gap: 10px; }
.ab-grid .col-head h2 { font-size: 23px; }
.ab-grid .col-head .sym { align-self: center; }

/* ── Jednorázová & občasná péče ── */
.oneoff { margin-top: 48px; }
.oneoff-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.oneoff-head h2 { font-size: 27px; }
.oneoff-head .star { color: var(--hl); }
.oneoff > .lede { color: var(--muted); margin-bottom: 20px; max-width: 580px; }
.oneoff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.care {
  position: relative; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 7px;
  border-left: 3px solid var(--kind-col, var(--hl));
}
.care .care-top { display: flex; align-items: center; gap: 8px; }
.care .ktag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 999px; padding: 3px 9px;
  color: var(--ink); background: color-mix(in oklab, var(--kind-col, var(--hl)) 22%, var(--surface));
  white-space: nowrap;
}
.care.k-maska   { --kind-col: var(--acc3); }
.care.k-proc    { --kind-col: var(--primary); }
.care.k-domaci  { --kind-col: var(--after); }
.care .c-name { font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.care .c-when { font-family: var(--font-mono); font-size: 12px; color: var(--brand); letter-spacing: 0.03em; }
.care .c-note { font-size: 13px; color: var(--muted); }
.care .del {
  position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer;
}
.care .del:hover { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }
.care.add-care { border-left-color: var(--line); }
.care.add-care .field { margin-bottom: 8px; }
.care.add-care select, .care.add-care input { background: var(--surface); }

/* ════════ Fotky ════════ */
.upload-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 26px; padding: 26px; margin-bottom: 36px; }
.dropzone {
  border: 2px dashed color-mix(in oklab, var(--brand) 45%, transparent);
  border-radius: calc(var(--radius) * 0.9);
  background: color-mix(in oklab, var(--brand) 5%, var(--surface));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 230px; cursor: pointer; text-align: center; padding: 20px;
  transition: background 0.15s;
  position: relative; overflow: hidden;
}
.dropzone:hover, .dropzone.over { background: color-mix(in oklab, var(--brand) 10%, var(--surface)); }
.dropzone .dz-star { font-size: 26px; color: var(--brand); }
.dropzone .dz-label { font-weight: 700; }
.dropzone img.preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shot { overflow: hidden; position: relative; }
.shot .ph { aspect-ratio: 4 / 3; }
.shot-meta { padding: 13px 15px 15px; }
.shot-meta .week {
  font-family: var(--font-mono); font-weight: 500; font-size: 13.5px;
  color: var(--brand); letter-spacing: 0.04em;
}
.shot-meta .date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: 8px; }
.shot-meta .note { font-size: 13.5px; color: var(--hl); margin-top: 4px; }
.shot .del {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink); font-size: 15px; cursor: pointer;
}
.shot .del:hover { background: var(--primary); color: var(--primary-ink); }

/* abstraktní zástupný obrázek fotky pleti */
.ph {
  background:
    radial-gradient(120% 90% at 18% 8%, var(--g1, #e9bda6) 0%, transparent 62%),
    radial-gradient(110% 100% at 85% 92%, var(--g2, #d9a18e) 0%, transparent 58%),
    linear-gradient(158deg, var(--g3, #f2d8c4), var(--g4, #c98e7d));
}

/* ════════ Časová osa ════════ */
.timeline { position: relative; max-width: 640px; padding-left: 40px; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.t-item { position: relative; margin-bottom: 18px; }
.t-marker {
  position: absolute; left: -40px; top: 16px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
}
.t-marker i {
  display: block; width: 13px; height: 13px;
  background: var(--primary); border: 2.5px solid var(--bg);
  box-shadow: 0 0 0 2px var(--primary);
  border-radius: 50%;
}
.t-item.is-photo .t-marker i {
  background: var(--brand); box-shadow: 0 0 0 2px var(--brand);
  border-radius: 2px; transform: rotate(45deg); width: 11px; height: 11px;
}
.t-item.is-care .t-marker i {
  background: var(--hl); box-shadow: 0 0 0 2px var(--hl);
  border-radius: 3px; width: 12px; height: 12px;
}
.t-card { padding: 15px 18px; display: flex; gap: 16px; align-items: flex-start; }
.t-card .ph { width: 86px; aspect-ratio: 1; border-radius: calc(var(--radius) * 0.55); flex: none; }
.t-when { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-title { font-weight: 700; font-size: 15.5px; margin-top: 3px; }
.t-note { font-size: 13.5px; color: var(--hl); margin-top: 2px; }
.t-week { font-family: var(--font-mono); font-size: 13px; color: var(--brand); margin-top: 3px; display: inline-block; white-space: nowrap; }
.badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  border-radius: 999px; padding: 2.5px 10px; display: inline-block;
  color: var(--ink); white-space: nowrap;
}
.badge-rano  { background: color-mix(in oklab, var(--acc3) 32%, var(--surface)); }
.badge-den   { background: color-mix(in oklab, var(--hl) 24%, var(--surface)); }
.badge-vecer { background: color-mix(in oklab, var(--brand) 24%, var(--surface)); }
.badge-care  { background: color-mix(in oklab, var(--hl) 26%, var(--surface)); }

/* ════════ Porovnání ════════ */
.compare-bar {
  display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 28px;
}
.compare-bar .field { margin: 0; flex: 1; min-width: 200px; }
.mode-seg { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 4px; }
.mode-seg button {
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  border: none; background: transparent; color: var(--muted);
  border-radius: 999px; padding: 8px 18px; cursor: pointer; white-space: nowrap;
}
.mode-seg button.active { background: var(--brand); color: var(--primary-ink); }

.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cmp-card { overflow: hidden; }
.cmp-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; }
.cmp-tag {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.05em;
  border-radius: 999px; padding: 3px 12px; color: var(--primary-ink); white-space: nowrap;
}
.cmp-tag.pred { background: var(--before); }
.cmp-tag.po   { background: var(--after); }
.cmp-week { font-family: var(--font-mono); font-size: 13px; color: var(--brand); white-space: nowrap; }
.cmp-card .ph { aspect-ratio: 1; }
.cmp-meta { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.cmp-meta .date { font-family: var(--font-mono); font-size: 12.5px; color: var(--brand); }
.cmp-meta .note { font-size: 13.5px; color: var(--hl); margin-top: 2px; }
.snapshot { padding: 14px 16px 18px; }
.snapshot h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin: 12px 0 6px;
}
.snapshot h3:first-child { margin-top: 0; }
.snapshot h3 .star { font-size: 10px; }
.snapshot ul { margin: 0; padding: 0; list-style: none; }
.snapshot li { font-size: 14px; padding: 3px 0; }
.snapshot li span { color: var(--muted); font-size: 13px; }

/* přes sebe — posuvník */
.overlay-wrap { max-width: 720px; margin: 0 auto; }
.overlay {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); user-select: none; touch-action: none;
}
.overlay .layer { position: absolute; inset: 0; }
.overlay .layer.top { clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.overlay .handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 2px; background: var(--surface); cursor: ew-resize;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}
.overlay .handle::after {
  content: "⟷"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.ov-tag {
  position: absolute; bottom: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  border-radius: 999px; padding: 3px 12px; color: var(--primary-ink);
}
.ov-tag.l { left: 12px; background: var(--before); }
.ov-tag.r { right: 12px; background: var(--after); }
.ov-hint { text-align: center; margin-top: 14px; }

/* ════════ Dialog ════════ */
dialog.confirm {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  padding: 26px 28px; width: 330px; max-width: 90vw;
}
dialog.confirm::backdrop { background: rgba(41, 55, 43, 0.35); backdrop-filter: blur(2px); }
dialog.confirm h2 { font-size: 22px; margin-bottom: 6px; }
dialog.confirm p { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
dialog.confirm .row { display: flex; gap: 10px; justify-content: flex-end; }

/* ════════ Dekorace dle tématu (injektuje app.js) ════════ */
.botanika { position: fixed; z-index: 0; pointer-events: none; }
html[data-botanika="false"] .botanika { display: none; }
.botanika img {
  position: absolute; display: none;
  filter: drop-shadow(0 10px 20px rgba(60, 47, 52, 0.16));
}
.botanika.bl { left: 0; bottom: 0; width: 320px; height: 340px; }
.botanika.tr { right: 0; top: 84px; width: 260px; height: 320px; }

/* výchozí + Seashell → lisované květiny */
html[data-theme="garnet"] .botanika img.deco-flower,
html:not([data-theme]) .botanika img.deco-flower,
html[data-theme="seashell"] .botanika img.deco-flower { display: block; }
/* Clay → vlny, duha, mrak, snítka */
html[data-theme="clay"] .botanika img.deco-clay { display: block; }
/* Melon → citron, meloun, list */
html[data-theme="melon"] .botanika img.deco-melon { display: block; }

/* pozice — spodní levý roh */
.botanika.bl .d-pinkpalm { width: 230px; left: -112px; bottom: -60px; transform: rotate(-20deg); }
.botanika.bl .d-monstera { width: 250px; left: -64px;  bottom: -60px; transform: rotate(225deg); }
.botanika.bl .d-sprig  { width: 165px; left: -34px; bottom: -22px; transform: rotate(-6deg); }
.botanika.bl .d-cloud  { width: 150px; left: 116px; bottom: 54px;  transform: rotate(4deg); }
.botanika.bl .d-melLeafG { width: 150px; left: -40px; bottom: -30px; transform: rotate(-12deg); }
.botanika.bl .d-watermelon { width: 180px; left: 96px; bottom: 18px; transform: rotate(6deg); }
/* pozice — horní pravý roh */
.botanika.tr .d-leafs    { width: 124px; right: -26px; top: 6px;   transform: rotate(15deg); }
.botanika.tr .d-daisy    { width: 104px; right: 74px;  top: -14px; transform: rotate(-7deg); }
.botanika.tr .d-gyp2     { width: 156px; right: -58px; top: 28px; transform: rotate(-104deg); }
.botanika.tr .d-tinydaisy{ width: 58px;  right: 116px; top: 104px; transform: rotate(-16deg); }
.botanika.tr .d-rainbow{ width: 150px; right: -30px; top: 4px; transform: rotate(8deg); }
.botanika.tr .d-sprig2 { width: 96px;  right: 96px;  top: 86px; transform: rotate(-16deg); }
.botanika.tr .d-lemon  { width: 116px; right: -22px; top: 0;   transform: rotate(10deg); }
.botanika.tr .d-melLeafP { width: 92px; right: 98px;  top: 88px; transform: rotate(-18deg); }

/* ════════ Responzivita (zlom 860 px) ════════ */
@media (max-width: 860px) {
  .nav-inner { padding: 12px 16px; gap: 14px; flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .nav-out { margin-left: auto; }
  .wrap { padding: 28px 16px 90px; }
  .page-head h1 { font-size: 31px; }
  .auth-grid { grid-template-columns: 1fr; gap: 34px; min-height: 0; padding-top: 10px; }
  .auth-hero h1 { font-size: 38px; }
  .cols { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: 1fr 1fr; }
  .ab-grid { grid-template-columns: 1fr; }
  .routine-modes { width: 100%; overflow-x: auto; }
  .upload-card { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .side-grid { grid-template-columns: 1fr; }
  .botanika { display: none; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .compare-bar { align-items: stretch; flex-direction: column; }
}

/* ════════ Reálné fotky — rámeček s uloženým výřezem (volný posun + zoom) ════════ */
/* Fotka = <img> posunutá transformem; rámeček ji ořízne. */
.frame {
  position: relative; overflow: hidden; background-color: var(--surface-2);
}
.frame-img {
  position: absolute; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.shot .frame { aspect-ratio: 4 / 3; }
.cmp-card .frame { aspect-ratio: 1; }
.t-frame { width: 86px; aspect-ratio: 1; flex: none; border-radius: calc(var(--radius) * 0.55); }
/* porovnání — přes sebe (vrstvy s fotkou) */
.overlay .layer { position: absolute; inset: 0; overflow: hidden; background-color: var(--surface-2); }

/* prázdné stavy mimo sloupce */
.gallery-empty, .timeline-empty, .compare-empty, .week-empty {
  color: var(--muted); font-style: italic; font-size: 15px;
  padding: 20px 2px; max-width: 560px;
}

/* ════════ Framer — zoom + posun + vodicí ovál ════════ */
.dropzone.has-img {
  padding: 0; min-height: 0; border-style: solid;
}
/* společné pro interaktivní framer (upload i dialog) */
.framer { position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.framer:active { cursor: grabbing; }
/* vodicí ovál nad fotkou v editoru — ztmaví okolí, kam se má obličej vejít */
.framer-oval {
  position: absolute; left: 50%; top: 46%;
  width: 58%; height: 74%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1000px rgba(40, 30, 35, 0.34);
  pointer-events: none;
}
.framer-controls { margin-top: 14px; }
.zoom-row { display: flex; align-items: center; gap: 12px; }
.zoom-row input[type="range"] { flex: 1; width: auto; accent-color: var(--primary); cursor: pointer; }
.zoom-row .mono { font-size: 16px; line-height: 1; }
.framer-actions { display: flex; gap: 8px; margin-top: 12px; }
.framer-controls .mono { margin-top: 10px; line-height: 1.4; }

/* tlačítko úprava výřezu v galerii */
.shot .reframe {
  position: absolute; top: 10px; right: 46px;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink); font-size: 14px; cursor: pointer; line-height: 1;
}
.shot .reframe:hover { background: var(--brand); color: var(--primary-ink); }

/* dialog úpravy výřezu */
dialog.framer-modal {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  padding: 24px 26px; width: 380px; max-width: 92vw;
}
dialog.framer-modal::backdrop { background: rgba(41, 55, 43, 0.35); backdrop-filter: blur(2px); }
dialog.framer-modal h2 { font-size: 22px; margin-bottom: 14px; }
dialog.framer-modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.framer {
  position: relative; overflow: hidden; aspect-ratio: 1;
  border-radius: calc(var(--radius) * 0.9); background: var(--surface-2);
  cursor: grab; touch-action: none; margin-bottom: 14px;
}
.framer:active { cursor: grabbing; }

/* ════════ Týden — celotýdenní přehled ════════ */
.week-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.week-range { margin-top: 8px; color: var(--brand); font-size: 13px; }
.week-plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.week-plan.week-plan-single { grid-template-columns: 1fr; }
.wp-day-wide { padding: 24px 28px; }
.wp-day-wide > h2 { margin-bottom: 16px; }
@media (min-width: 700px) {
  .wp-day-wide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 26px; align-items: start; }
  .wp-day-wide > h2 { grid-column: 1 / -1; }
  .wp-day-wide .wp-tod { margin-top: 0; }
}
.wp-day { padding: 20px 22px; }
.wp-day h2 { font-size: 22px; margin-bottom: 12px; }
.wp-day.is-weekend h2 { color: var(--primary); }
.wp-tod { margin-top: 14px; }
.wp-tod:first-of-type { margin-top: 0; }
.wp-tod h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px; display: flex; align-items: center; gap: 7px;
}
.wp-tod ul { margin: 0; padding: 0; list-style: none; }
.wp-tod li { font-size: 14.5px; padding: 3px 0; }
.wp-pname { font-weight: 600; }
.wp-pnote { color: var(--hl); font-size: 13px; }
.wp-daily {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--acc3);
  border: 1px solid color-mix(in oklab, var(--acc3) 45%, transparent);
  border-radius: 999px; padding: 1px 7px; vertical-align: 1px;
}
.wp-none { color: var(--muted); font-style: italic; font-size: 13.5px; }
.wp-ab-head { grid-column: 1 / -1; margin-top: 14px; }
.wp-section-title { font-size: 26px; }
.wp-ab-head .lede { color: var(--muted); margin-top: 4px; }

/* ════════ Časová osa — značka „přestala používat" ════════ */
.t-item.is-stop .t-marker i {
  background: var(--muted); box-shadow: 0 0 0 2px var(--muted);
  border-radius: 50%; width: 11px; height: 11px;
}
.t-item.is-stop .t-title { color: var(--muted); }

@media (max-width: 860px) {
  .week-plan { grid-template-columns: 1fr; }
}

/* ════════ Tisk (stránka Týden) ════════ */
@media print {
  .nav, .botanika, body::before, .js-print, .page-head .lede { display: none !important; }
  .wrap { padding: 0; }
  .week-plan { grid-template-columns: 1fr 1fr; }
  .wp-day { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}

/* ════════ Pohřebiště produktů (archiv) ════════ */
.archive-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.arch { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-left: 3px solid var(--muted); }
.arch-top { display: flex; align-items: flex-start; gap: 10px; }
.arch-name { font-family: var(--font-head); font-size: 18px; font-weight: 600; flex: 1; }
.arch-note { color: var(--hl); font-size: 13.5px; margin-top: -4px; }
.arch-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.arch-dates label {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  display: flex; flex-direction: column; gap: 4px; letter-spacing: 0.03em;
}
.arch input[type="date"] { font-family: var(--font-mono); font-size: 12px; padding: 5px 8px; width: auto; }
.arch .a-reason, .arch .a-why { font-size: 13.5px; }
.arch .a-restore { align-self: flex-start; margin-top: 2px; }
.arch .del {
  width: 24px; height: 24px; border-radius: 50%; border: none; flex: none;
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; line-height: 1;
}
.arch .del:hover { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }
.arch-origin { font-size: 11px; color: var(--brand); letter-spacing: 0.03em; margin-top: -2px; }
.arch-restore { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.arch-restore label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; letter-spacing: 0.03em; }
.arch-restore .a-restore { flex: none; }
.arch-history { border-top: 1px dashed var(--line); padding-top: 8px; }
.arch-history .ah-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.arch-history ul { margin: 6px 0 0; padding: 0; list-style: none; }
.arch-history li { font-size: 12.5px; color: var(--ink); padding: 2px 0; }
.arch-history li span { color: var(--muted); }

.pimg-modal { width: 340px; max-width: 92vw; }
.pimg-preview {
  aspect-ratio: 1; border-radius: calc(var(--radius) * 0.8); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px;
}
.pimg-preview img { width: 100%; height: 100%; object-fit: contain; }

/* ════════ Knihovna produktů ════════ */
.lib-add {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr auto; gap: 12px;
  align-items: end; padding: 18px 20px; margin-bottom: 26px;
}
.lib-add .la-field { font-family: var(--font-mono); font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; letter-spacing: 0.03em; }
.lib-add input, .lib-add select { width: 100%; }
.lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.lib { display: flex; gap: 14px; padding: 16px; }
.lib-img {
  width: 76px; height: 76px; flex: none; position: relative;
  border-radius: calc(var(--radius) * 0.7); border: 1px dashed var(--line);
  background: var(--surface); color: var(--muted); font-size: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 0;
}
.lib-img.has-img { border-style: solid; }
.lib-img img { width: 100%; height: 100%; object-fit: cover; }
.lib-img-x {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in oklab, var(--surface) 85%, transparent); backdrop-filter: blur(4px);
  color: var(--ink); font-size: 12px; line-height: 18px; text-align: center;
}
.lib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lib-top { display: flex; align-items: flex-start; gap: 8px; }
.lib-name { font-family: var(--font-head); font-size: 18px; font-weight: 600; flex: 1; }
.lib-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.lib-fields label { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; letter-spacing: 0.03em; }
.lib input[type="date"], .lib select { font-family: var(--font-mono); font-size: 12px; padding: 5px 7px; width: auto; }
.lib-status {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 999px; align-self: flex-start;
  background: var(--surface-2); color: var(--muted);
}
.lib-status.st-ok { background: color-mix(in oklab, var(--hl) 18%, var(--surface)); color: var(--ink); }
.lib-status.st-soon { background: color-mix(in oklab, var(--acc3) 30%, var(--surface)); color: var(--ink); }
.lib-status.st-expired { background: color-mix(in oklab, var(--primary) 22%, var(--surface)); color: var(--primary); font-weight: 700; }
.lib .del { width: 24px; height: 24px; border-radius: 50%; border: none; flex: none; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.lib .del:hover { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); }
.lib-empty { color: var(--muted); font-style: italic; font-size: 15px; padding: 20px 2px; }
@media (max-width: 860px) { .lib-add { grid-template-columns: 1fr 1fr; } }

.pimg-link { display: flex; gap: 8px; margin-top: 12px; }
.pimg-link input { flex: 1; }

/* Varování při nenačtených datech (ochrana proti přepsání) */
.data-warn {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--primary) 16%, var(--surface));
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  color: var(--primary); font-weight: 600; font-size: 13.5px;
  padding: 10px 18px; text-align: center;
}
.data-warn .js-reload {
  border: none; background: var(--primary); color: var(--primary-ink);
  font-weight: 700; border-radius: 999px; padding: 4px 12px; margin-left: 6px; cursor: pointer;
}

/* ════════ Mobilní hamburger menu ════════ */
.nav-toggle { display: none; background: transparent; border: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; margin-left: 8px; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links {
    order: 0; position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0; overflow: visible;
    flex-direction: column; gap: 2px; padding: 10px 14px 14px; display: none;
    background: color-mix(in oklab, var(--bg) 96%, transparent); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { width: 100%; padding: 10px 14px; }
}

/* ════════ Loader (než se načtou data) ════════ */
/* Načítací animace „Hop" — hifi z design handoffu (ikona skáče, květiny při dopadu) */
.tr-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #F6E7DF;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 400ms ease;
}
.tr-loader--hide { opacity: 0; pointer-events: none; }
.tr-loader__scene {
  position: relative; width: 220px; height: 210px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 30px; box-sizing: border-box;
}
.tr-loader__icon {
  position: relative; z-index: 1; width: 96px; height: 96px;
  border-radius: 26px; background: #B25C7B;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(142, 58, 91, 0.28);
  transform-origin: 50% 100%;
  animation: tr-bounce 2.3s infinite;
}
.tr-loader__star {
  display: block; width: 46px; height: 46px; color: #F6E7DF;
  animation: tr-star-spin 2.3s ease-in-out infinite;
}
.tr-loader__shadow {
  position: absolute; bottom: 22px; left: 50%;
  width: 96px; height: 14px; margin-left: -48px; border-radius: 50%;
  background: rgba(142, 58, 91, 0.28); filter: blur(2px);
  animation: tr-shadow 2.3s ease-in-out infinite;
}
.tr-loader__flower { position: absolute; bottom: 34px; left: 50%; opacity: 0; }
.tr-loader__flower--daisy    { width: 44px; height: 44px; margin-left: -22px; animation: tr-pop-l 2.3s ease-out infinite; }
.tr-loader__flower--pinkie   { width: 50px; height: 50px; margin-left: -25px; animation: tr-pop-r 2.3s ease-out infinite; }
.tr-loader__flower--monstera { width: 46px; height: 46px; margin-left: -23px; bottom: 36px; animation: tr-pop-m 2.3s ease-out infinite; }
.tr-loader__caption {
  position: absolute; left: 0; right: 0; bottom: -34px; text-align: center;
  font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 15px; color: #6B5F58;
  animation: tr-soft-pulse 2.8s ease-in-out infinite;
}
@keyframes tr-bounce {
  0%   { transform: translateY(0) scale(1.16, 0.84); animation-timing-function: cubic-bezier(0.33, 0.66, 0.55, 1); }
  16%  { transform: translateY(-18px) scale(0.95, 1.08); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 1); }
  50%  { transform: translateY(-88px) scale(1.02, 1.02); animation-timing-function: cubic-bezier(0.6, 0, 0.82, 0.45); }
  84%  { transform: translateY(-16px) scale(0.97, 1.05); animation-timing-function: cubic-bezier(0.55, 0, 0.72, 0.35); }
  100% { transform: translateY(0) scale(1.16, 0.84); }
}
@keyframes tr-star-spin {
  0%, 26%   { transform: rotate(0deg); }
  62%, 100% { transform: rotate(90deg); }
}
@keyframes tr-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.3; }
  50%      { transform: scaleX(0.55); opacity: 0.12; }
}
@keyframes tr-pop-l {
  0%        { opacity: 0; transform: translate(0, 8px) scale(0.3) rotate(0deg); }
  6%        { opacity: 1; }
  30%       { opacity: 1; transform: translate(-54px, -44px) scale(1) rotate(-26deg); }
  48%, 100% { opacity: 0; transform: translate(-66px, -32px) scale(0.9) rotate(-40deg); }
}
@keyframes tr-pop-r {
  0%        { opacity: 0; transform: translate(0, 8px) scale(0.3) rotate(0deg); }
  6%        { opacity: 1; }
  30%       { opacity: 1; transform: translate(54px, -48px) scale(1) rotate(24deg); }
  48%, 100% { opacity: 0; transform: translate(66px, -36px) scale(0.9) rotate(38deg); }
}
@keyframes tr-pop-m {
  0%        { opacity: 0; transform: translate(0, 10px) scale(0.35) rotate(0deg); }
  7%        { opacity: 1; }
  32%       { opacity: 1; transform: translate(2px, -70px) scale(1) rotate(14deg); }
  50%, 100% { opacity: 0; transform: translate(4px, -56px) scale(0.92) rotate(22deg); }
}
@keyframes tr-soft-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-loader__icon, .tr-loader__star, .tr-loader__shadow { animation: none; }
  .tr-loader__flower { animation: none; opacity: 0; }
  .tr-loader__icon { animation: tr-soft-pulse 2.8s ease-in-out infinite; }
}
@keyframes trspin { to { transform: rotate(360deg); } }

/* ════════ Toast ════════ */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 300;
  background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  display: flex; align-items: center; gap: 16px; max-width: 92vw;
  opacity: 0; transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-act { background: transparent; border: none; color: var(--acc3); font-weight: 800; cursor: pointer; font-size: 14px; white-space: nowrap; }

/* ════════ v6: aktivní látky v tisku, fotky na ose, Toaletní stolek ════════ */
.wp-pact { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }

/* miniatura produktu na časové ose */
.t-thumb {
  flex: none; width: 56px; height: 56px;
  border-radius: calc(var(--radius) * 0.55); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.t-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Toaletní stolek — zarovnání polí v editaci */
.lib-fields { align-items: flex-end; }
.lib-fields input[type="date"], .lib-fields select { height: 31px; box-sizing: border-box; }
.lib-top { align-items: center; }
.lib-name { line-height: 1.25; }
.lib .lib-status { align-self: flex-start; }

/* sbalená (hotová) karta */
.lib.is-done { align-items: center; }
.lib.is-done .lib-img { width: 64px; height: 64px; cursor: default; pointer-events: none; }
.lib.is-done .lib-body { gap: 5px; }
.lib-edit {
  width: 26px; height: 26px; flex: none; border: none; border-radius: 7px;
  background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
}
.lib-edit:hover { background: var(--surface-2); color: var(--brand); }
.lib-name-ro { font-family: var(--font-head); font-size: 18px; font-weight: 600; flex: 1; line-height: 1.25; }
.lib-line { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em; }
.lib-note-ro { font-size: 12.5px; color: var(--hl); }
.js-lib-done { align-self: flex-start; margin-top: 2px; }

/* ════════ v6 II: bubliny denní doby, stolek dropdown, osa začátek/konec, snapshot ════════ */

/* Rutina (Každý den stejně) — každá denní doba jako barevná bublina */
.routine-pane[data-mode="time"] .col-rano  { --tod-c: var(--acc3); }
.routine-pane[data-mode="time"] .col-den   { --tod-c: var(--hl); }
.routine-pane[data-mode="time"] .col-vecer { --tod-c: var(--brand); }
.routine-pane[data-mode="time"] .routine-col {
  background: color-mix(in oklab, var(--tod-c) 6%, color-mix(in oklab, var(--surface) 82%, transparent));
  border: 1px solid color-mix(in oklab, var(--tod-c) 26%, var(--line));
  border-radius: var(--radius);
  padding: 18px 16px 20px;
}

/* pilulkové štítky Ráno / Během dne / Večer (porovnání + tisk týdne) */
.snap-tod, .wp-tod h3 {
  display: flex; align-items: center; gap: 6px; width: fit-content;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--tod-c, var(--muted)) 13%, transparent);
  color: color-mix(in oklab, var(--tod-c, var(--muted)) 52%, var(--ink));
  margin: 14px 0 6px;
}
.snap-rano,  .wp-tod h3.wp-rano  { --tod-c: var(--acc3); }
.snap-den,   .wp-tod h3.wp-den   { --tod-c: var(--hl); }
.snap-vecer, .wp-tod h3.wp-vecer { --tod-c: var(--brand); }
.snapshot .snap-tod:first-child, .wp-tod h3 { margin-top: 0; }
.snap-tod .ic, .wp-tod h3 .wp-ic { font-size: 13px; }
.snap-none { color: var(--muted); font-style: italic; font-size: 13.5px; }

/* Toaletní stolek — dropdown nesmí přetékat z karty */
.lib-fields { min-width: 0; }
.lib-fields label { flex: 1 1 96px; min-width: 0; max-width: 100%; }
.lib-fields input[type="date"], .lib-fields select { width: 100%; max-width: 100%; }

/* Časová osa — začátek a konec: linka vede jen mezi krajními body */
.timeline::before { content: none; }
.t-item::before {
  content: ""; position: absolute; left: -29px; width: 2px;
  top: 28px; bottom: -46px; background: var(--line);
}
.t-item:last-child::before { display: none; }
/* nejnovější událost (nahoře) = otevřený kroužek „teď" */
.timeline .t-item:first-child .t-marker i {
  width: 15px; height: 15px; border-radius: 50%; transform: none;
  background: var(--surface); border: 3.5px solid var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}
/* nejstarší událost (dole) = výchozí bod se svatozáří */
.timeline .t-item:last-child .t-marker i {
  width: 13px; height: 13px; border-radius: 50%; transform: none;
  background: var(--primary); border: 2.5px solid var(--bg);
  box-shadow: 0 0 0 2px var(--primary), 0 0 0 7px color-mix(in oklab, var(--primary) 16%, transparent);
}

/* ════════ v6 II-b: Dny v týdnu / Obden — každá část dne jako bublina ════════ */
.day-col .tod {
  border: 1px solid color-mix(in oklab, var(--tod-c, var(--muted)) 24%, var(--line));
  border-radius: calc(var(--radius) * 0.7);
  background: color-mix(in oklab, var(--tod-c, var(--muted)) 7%, color-mix(in oklab, var(--surface) 55%, transparent));
  margin-top: 10px;
  padding: 10px 10px 12px;
}
.day-col .tod .tod-label { margin-bottom: 8px; }
.day-col .tod:has(.products:empty) { padding: 8px 10px; }
.day-col .tod:has(.products:empty) .tod-label { margin-bottom: 0; }
.tod:has(.products:empty) .add-mini { white-space: nowrap; flex: none; }
/* hlavička dne bez zkratky — jen název, o fous víc vzduchu */
.day-col .col-head { gap: 2px; }

/* ════════ v6 II-c: bez boxu dne — jen nadpis dne + bubliny částí dne ════════ */
.week-grid .day-col,
.ab-grid .routine-col {
  background: transparent; border: none; box-shadow: none;
  padding: 0; border-radius: 0;
}
.week-grid { gap: 18px; }
.week-grid .day-col.is-weekend { background: transparent; }

/* hlavička dne = lehká frosted pilulka, drží nahoře při scrollu */
.week-grid .day-col .col-head {
  position: sticky; top: 64px; z-index: 2;
  margin: 0 0 4px; padding: 8px 10px 6px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface) 80%, var(--bg));
  backdrop-filter: blur(5px);
}
.week-grid .day-col.is-weekend .col-head {
  background: color-mix(in oklab, var(--brand) 7%, color-mix(in oklab, var(--surface) 80%, var(--bg)));
}

/* dnešek: tyrkysový kroužek kolem hlavičky dne místo celého sloupce */
.week-grid .day-col.is-today { box-shadow: none; }
.week-grid .day-col.is-today .col-head {
  border: 1px solid color-mix(in oklab, var(--hl) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hl) 15%, transparent);
}
/* DNES vpravo vedle názvu dne, ne pod ním */
.week-grid .day-col .col-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.col-head .today-chip { margin-left: auto; flex: none; }

.ab-grid .routine-col .col-head { margin-bottom: 10px; }

/* ════════ v6 III (vlna 1): čitelnost, duplikace dne, tipy, e-shop ════════ */

/* 1) čitelnost týdenní tabulky — bubliny a hlavičky nepropouští terrazzo */
.day-col .tod {
  background: color-mix(in oklab, var(--tod-c, var(--muted)) 8%, var(--surface));
}
.week-grid .day-col .col-head {
  background: color-mix(in oklab, var(--surface) 92%, var(--bg));
}
.week-grid .day-col.is-weekend .col-head {
  background: color-mix(in oklab, var(--brand) 7%, color-mix(in oklab, var(--surface) 92%, var(--bg)));
}

/* 4) duplikace dne / části dne */
.day-dup, .tod-dup {
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; line-height: 1; flex: none;
  width: 24px; height: 24px; border-radius: 7px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.day-dup:hover, .tod-dup:hover { background: var(--surface-2); color: var(--brand); }
.tod-label .tod-dup { width: 20px; height: 20px; font-size: 12px; margin-left: 2px; color: inherit; opacity: 0.7; }
.tod-label .tod-dup:hover { opacity: 1; background: color-mix(in oklab, var(--tod-c, var(--muted)) 18%, transparent); color: inherit; }
.copy-dlg .copy-targets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }

/* 5) tipy k focení */
.photo-tips { padding: 20px 24px 22px; margin-bottom: 36px; }
.photo-tips h3 { font-size: 19px; margin-bottom: 8px; }
.photo-tips ul { margin: 0; padding-left: 20px; }
.photo-tips li { font-size: 14.5px; padding: 2.5px 0; }
.photo-tips strong { font-weight: 700; }

/* 6) kde kupuji + cena na stolku */
.lib-shop { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em; }
.lib-shop a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ════════ v6 — vlna 2: účet, záloha, zapomenuté heslo ════════ */
.nav-user {
  text-decoration: none; font-weight: 600; font-size: 14px;
  color: var(--muted); white-space: nowrap;
}
.nav-user:hover { color: var(--ink); }
.nav-user.active { color: var(--brand); }

.wrap-narrow { max-width: 720px; }
.acct-card { padding: 24px 26px 26px; margin-bottom: 20px; }
.acct-card h2 { font-size: 22px; margin-bottom: 12px; }
.acct-note { color: var(--muted); font-size: 14px; margin-bottom: 14px; max-width: 520px; }
.acct-row { display: flex; gap: 10px; flex-wrap: wrap; }
.acct-status { margin-top: 12px; }
.acct-card .form-error { margin-bottom: 12px; }

.auth-narrow { max-width: 520px; margin: 26px auto 0; }
.auth-narrow h1 { font-size: 34px; margin-bottom: 8px; }
.auth-narrow .lede { color: var(--muted); margin-bottom: 20px; }
.auth-narrow .auth-card { padding: 24px; }
.auth-ok { font-size: 14.5px; line-height: 1.55; }
.auth-ok a { color: var(--brand); }
.auth-back { margin-top: 16px; font-size: 14px; }
.auth-back a { color: var(--muted); text-decoration: none; }
.auth-back a:hover { color: var(--ink); }
.auth-forgot { margin-top: 12px; text-align: center; font-size: 13.5px; }
.auth-forgot a { color: var(--muted); }
.auth-forgot a:hover { color: var(--ink); }

/* ════════ v6 — vlna 3: cookie lišta v barvách Garnet ════════ */
#cc-main {
  --cc-font-family: var(--font-body);
  --cc-bg: var(--surface);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--muted);
  --cc-btn-primary-bg: var(--primary);
  --cc-btn-primary-color: var(--primary-ink);
  --cc-btn-primary-hover-bg: var(--brand);
  --cc-btn-secondary-bg: var(--surface-2);
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-hover-bg: color-mix(in oklab, var(--surface-2) 80%, var(--ink));
  --cc-toggle-on-bg: var(--hl);
  --cc-cookie-category-block-bg: color-mix(in oklab, var(--surface-2) 55%, var(--surface));
  --cc-modal-border-radius: var(--radius);
  --cc-btn-border-radius: 999px;
}
/* Pilulkový rádius patří tlačítkům; rozbalený blok kategorie potřebuje rohy karty,
   jinak popis vylézá z oválných rohů. Zavřený zůstává pilulka. */
#cc-main .pm__section--toggle.is-expanded { border-radius: var(--radius); }
#cc-main .pm__section--toggle.is-expanded .pm__section-title { border-radius: var(--radius) var(--radius) 0 0; }
#cc-main .pm__section--toggle .pm__section-desc-wrapper { border-radius: 0 0 var(--radius) var(--radius); }
.cookies-link { background: none; border: none; padding: 0; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cookies-link:hover { color: var(--ink); }
.home-foot { margin-top: 56px; text-align: center; }

/* ════════ v7: frekvence focení (týdenní / udržovací měsíční) ════════ */
.photo-freq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -14px 0 28px; }
.photo-freq-hint { flex: none; }

/* ════════ v7 — vlna 5: e-mailové předvolby ════════ */
.pref-row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; margin: 9px 0; cursor: pointer; line-height: 1.4;
}
.pref-row input { width: 15px; height: 15px; margin-top: 2px; accent-color: var(--primary); flex: none; cursor: pointer; }
.auth-card .pref-row { color: var(--muted); font-size: 13px; margin: 2px 0 14px; }

/* ════════ v7 — vlna 6: dialog rychlého přidání ════════ */
.add-dlg .field { margin: 14px 0 4px; }
.add-dlg input { min-width: 260px; }

/* ── sezóna + fáze cyklu u produktu ── */
.p-season, .p-phase {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  width: auto; padding: 3px 4px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 6px; cursor: pointer;
}
.p-season:focus, .p-phase:focus { border-color: var(--brand); box-shadow: none; }
.product.off-season { opacity: 0.55; }
.product.off-season .p-meta::after {
  content: "mimo sezónu";
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: 0.04em; align-self: center;
}

/* dropdowny v kartě produktu: víc vzduchu */
.product .p-meta { gap: 8px 10px; }
.day-col .product .p-meta { gap: 7px 9px; }
.p-season, .p-phase { padding: 3px 7px; }