:root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    color-scheme: light;
    --paper: #FBF8EE; --paper-2: #F3EEDD; --rule: #CFE0EA; --margin: #E6A6A0;
    --ink: #2A2A2E; --pencil: #5C5C63; --faint: #B9B6AC;
    --blue: #2F5BB7; --ok: #2E7D3C; --bad: #B93A3A; --warn: #B9771C; --hl: #FFF176; --on-blue: #FBF8EE;
    --hand: "Caveat", "Segoe Print", cursive;
    --body: "Patrick Hand", "Comic Sans MS", cursive;
    --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --wobble2: 15px 255px 15px 225px / 225px 15px 255px 15px;
    --lh: 28px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #2B2D2A; --paper-2: #1F211E; --rule: #3A4A52; --margin: #6B3F3F;
      --ink: #EDE9DC; --pencil: #C9C4B4; --faint: #5F5F58; --blue: #9DBBF0; --on-blue: #1F211E;
      --ok: #8CD79A; --bad: #F08C8C; --warn: #E6B86B; --hl: #6B6420;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #2B2D2A; --paper-2: #1F211E; --rule: #3A4A52; --margin: #6B3F3F;
    --ink: #EDE9DC; --pencil: #C9C4B4; --faint: #5F5F58; --blue: #9DBBF0; --on-blue: #1F211E;
    --ok: #8CD79A; --bad: #F08C8C; --warn: #E6B86B; --hl: #6B6420;
  }
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
  * { box-sizing: inherit; }
  body { margin: 0; background: var(--paper-2); color: var(--ink); font-family: var(--body); font-size: 19px; line-height: var(--lh); text-align: left; }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 10; }
  p { margin: 0 0 14px; }
  a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  button { font: inherit; color: inherit; line-height: 1.2; }
  :focus-visible { outline: 3px dashed var(--blue); outline-offset: 3px; }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

  .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--paper); border-bottom: 2px solid var(--ink); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
  .brand { font-family: var(--hand); font-weight: 700; font-size: 26px; text-decoration: none; color: var(--ink); white-space: nowrap; line-height: 1; }
  .brand small { font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--pencil); margin-left: 8px; }
  .viewswitch { display: flex; gap: 6px; }
  .viewswitch button { background: none; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 5px 12px; cursor: pointer; font-size: 16px; color: var(--ink); }
  .viewswitch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .demo-note { background: var(--hl); font-size: 15px; line-height: 22px; padding: 7px 0; }
  .demo-note .wrap { display: flex; gap: 10px; align-items: baseline; }

  .hero { padding: 44px 0 28px; }
  .hero h1 { font-family: var(--hand); font-size: clamp(44px, 8vw, 84px); font-weight: 700; line-height: 0.95; margin: 0 0 18px; max-width: 16ch; }
  .hero h1 u { text-decoration: none; background: linear-gradient(transparent 55%, var(--hl) 55%, var(--hl) 92%, transparent 92%); }
  .hero p { font-size: 21px; line-height: 30px; max-width: 50ch; margin: 0 0 22px; color: var(--pencil); }
  .cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .btn { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: var(--wobble); padding: 10px 20px; font-size: 19px; cursor: pointer; text-decoration: none; background: var(--blue); color: var(--on-blue); box-shadow: 3px 3px 0 var(--ink); }
  .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .btn.quiet { background: var(--paper); color: var(--ink); }
  .btn.small { padding: 5px 12px; font-size: 16px; box-shadow: 2px 2px 0 var(--ink); }
  .btn.ok { background: var(--ok); color: var(--paper); }
  .btn.bad { background: var(--paper); color: var(--bad); border-color: var(--bad); box-shadow: 2px 2px 0 var(--bad); }
  .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
  .next-slot { margin-top: 24px; padding: 10px 18px; display: inline-block; border: 2px solid var(--ink); border-radius: var(--wobble); background: var(--paper); font-size: 18px; }
  .next-slot b { font-family: var(--hand); font-size: 26px; font-weight: 700; }

  section { padding: 32px 0; }
  h2 { font-family: var(--hand); font-size: clamp(34px, 5vw, 48px); font-weight: 700; margin: 0 0 12px; line-height: 1; }
  h2::after { content: ""; display: block; width: 7ch; height: 3px; margin-top: 6px; background: var(--ink); border-radius: 50% 40% 60% 50% / 60% 50% 50% 40%; }
  .lead { color: var(--pencil); max-width: 60ch; margin: 0 0 18px; }

  /* ceník */
  .pricelist { display: grid; grid-template-columns: 1fr; gap: 16px 36px; }
  @media (min-width: 720px) { .pricelist { grid-template-columns: 1fr 1fr; } }
  .pcat { border: 2px solid var(--ink); border-radius: var(--wobble); background: var(--paper); padding: 12px 16px 10px; }
  .pcat:nth-child(even) { border-radius: var(--wobble2); }
  .pcat h3 { font-family: var(--hand); font-size: 27px; font-weight: 700; margin: 0; line-height: 1.05; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .pcat h3 small { font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--pencil); white-space: nowrap; }
  .pcat ul { list-style: none; margin: 8px 0 0; padding: 0; }
  .pcat li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--faint); padding: 3px 0; font-size: 17px; line-height: 24px; }
  .pcat li:last-child { border-bottom: 0; }
  .pcat li b { font-weight: 400; white-space: nowrap; color: var(--blue); }
  .terms { margin-top: 18px; font-size: 16px; line-height: 24px; color: var(--pencil); max-width: 70ch; }

  .steps { counter-reset: s; display: grid; gap: 12px; max-width: 60ch; padding: 0; margin: 0; }
  .steps li { list-style: none; display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; align-items: start; }
  .steps li::before { counter-increment: s; content: counter(s) "."; grid-row: 1 / span 2; font-family: var(--hand); font-size: 34px; font-weight: 700; line-height: 1; color: var(--blue); }
  .steps b { grid-column: 2; display: block; font-family: var(--hand); font-size: 25px; font-weight: 700; line-height: 1.1; margin-bottom: 2px; }
  .steps span { grid-column: 2; color: var(--pencil); }

  .booking { border: 2px solid var(--ink); border-radius: var(--wobble); overflow: hidden; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
  .bk-head { padding: 12px 20px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .bk-head h3 { margin: 0; font-family: var(--hand); font-size: 28px; font-weight: 700; line-height: 1; }
  .bk-head .mnav { display: flex; align-items: center; gap: 8px; }
  .bk-head .mnav button { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--wobble2); width: 36px; height: 36px; cursor: pointer; font-size: 20px; }
  .bk-head .mnav span { min-width: 150px; text-align: center; font-family: var(--hand); font-size: 24px; font-weight: 700; }
  .bk-body { display: grid; grid-template-columns: 1fr; }
  @media (min-width: 820px) { .bk-body { grid-template-columns: 1fr 1fr; } .bk-right { border-left: 2px dashed var(--ink); } }

  .cal { padding: 14px 20px 18px; }
  .dow, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .dow { color: var(--pencil); font-size: 15px; line-height: 20px; margin-bottom: 4px; text-align: center; }
  .day { aspect-ratio: 1; border: 2px solid var(--ink); border-radius: var(--wobble2); background: var(--paper); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 17px; line-height: 1.05; padding: 0; }
  .day:nth-child(odd) { border-radius: var(--wobble); }
  .day small { font-size: 12px; color: var(--pencil); }
  .day.free small { color: var(--ok); }
  .day.off, .day.past { color: var(--faint); border-color: var(--faint); cursor: not-allowed; position: relative; }
  .day.off::after, .day.past::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--faint); transform: rotate(-18deg); }
  .day.off small, .day.past small { display: none; }
  .day.sel { background: var(--hl); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
  .day.pad { border: 0; cursor: default; background: none; }
  .day.pad::after { display: none; }
  .legend { display: flex; gap: 16px; font-size: 15px; line-height: 20px; color: var(--pencil); margin-top: 10px; flex-wrap: wrap; }

  .bk-right { padding: 14px 20px 20px; }
  .slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
  .slot { border: 2px solid var(--ink); background: var(--paper); border-radius: var(--wobble); padding: 5px 14px; cursor: pointer; font-size: 18px; }
  .slot:nth-child(even) { border-radius: var(--wobble2); }
  .slot.sel { background: var(--hl); box-shadow: 2px 2px 0 var(--ink); }
  .hint { color: var(--pencil); font-size: 17px; line-height: 24px; }

  form .f { display: grid; gap: 4px; margin-bottom: 14px; }
  form label { font-family: var(--hand); font-size: 23px; font-weight: 700; line-height: 1; }
  form label em { font-style: normal; color: var(--pencil); font-family: var(--body); font-weight: 400; font-size: 15px; }
  input, select, textarea { font: inherit; line-height: 24px; color: var(--ink); background: var(--paper); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: 6px 4px; width: 100%; }
  textarea { min-height: 112px; resize: vertical; border: 2px solid var(--ink); border-radius: var(--wobble2); padding: 6px 10px; line-height: var(--lh);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--rule) 27px, var(--rule) 28px); background-position: 0 4px; background-attachment: local; }
  select { cursor: pointer; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip { border: 2px solid var(--ink); background: var(--paper); border-radius: var(--wobble); padding: 8px 18px; cursor: pointer; font-family: var(--hand); font-size: 28px; font-weight: 700; color: var(--blue); line-height: 1; }
  .chip:nth-child(even) { border-radius: var(--wobble2); }
  .chip[aria-pressed="true"] { background: var(--hl); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
  .calc { border: 2px solid var(--ink); border-radius: var(--wobble2); padding: 8px 14px; background: var(--paper); display: grid; gap: 2px; font-size: 17px; line-height: 24px; margin-top: 6px; }
  .calc .t { display: flex; justify-content: space-between; gap: 10px; }
  .calc .t b { font-family: var(--hand); font-size: 24px; font-weight: 700; }
  .calc .tot { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 4px; }
  .calc .tot b { font-size: 30px; color: var(--blue); }
  .check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--body); font-size: 16px; line-height: 22px; font-weight: 400; }
  .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink); }
  .err { color: var(--bad); font-size: 15px; line-height: 20px; display: none; }
  .f.bad .err { display: block; }
  .f.bad input, .f.bad textarea, .f.bad select { border-color: var(--bad); }
  .summary { border: 2px solid var(--ink); border-radius: var(--wobble2); padding: 8px 14px; font-size: 17px; line-height: 24px; margin-bottom: 14px; display: grid; gap: 0; background: var(--paper); }
  .summary b { font-family: var(--hand); font-size: 23px; font-weight: 700; }

  .status { padding: 20px; display: grid; gap: 8px; }
  .pill { display: inline-block; border: 3px solid currentColor; border-radius: var(--wobble); padding: 2px 12px; font-family: var(--hand); font-size: 20px; font-weight: 700; letter-spacing: .04em; transform: rotate(-3deg); background: var(--paper); line-height: 1.1; }
  .pill.pending { color: var(--warn); } .pill.approved { color: var(--ok); } .pill.rejected { color: var(--bad); } .pill.counter { color: var(--blue); } .pill.done { color: var(--pencil); }

  .contact { display: grid; gap: 4px; font-size: 19px; }
  .contact a { font-family: var(--hand); font-size: 30px; font-weight: 700; text-decoration: none; line-height: 1.1; }
  footer { padding: 24px 0 48px; color: var(--pencil); font-size: 15px; line-height: 22px; border-top: 2px dashed var(--ink); margin-top: 24px; }
  .sig { font-family: var(--hand); font-size: 32px; font-weight: 700; color: var(--blue); transform: rotate(-6deg); display: inline-block; }

  .admin { padding-top: 24px; }
  .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
  .tabs button { border: 2px solid var(--ink); background: var(--paper); border-radius: var(--wobble); padding: 4px 14px; cursor: pointer; font-size: 17px; }
  .tabs button:nth-child(even) { border-radius: var(--wobble2); }
  .tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .tabs .n { opacity: .8; margin-left: 6px; font-family: var(--hand); font-size: 20px; }
  .req { border: 2px solid var(--ink); border-radius: var(--wobble); padding: 14px 18px 14px 28px; margin-bottom: 14px; display: grid; gap: 8px; background-color: var(--paper);
    background-image: linear-gradient(to right, transparent 16px, var(--margin) 16px, var(--margin) 18px, transparent 18px); box-shadow: 3px 3px 0 var(--ink); }
  .req:nth-child(even) { border-radius: var(--wobble2); }
  .req-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
  .req-top b { font-family: var(--hand); font-size: 28px; font-weight: 700; line-height: 1; }
  .money { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 24px; justify-content: start; align-items: end; }
  .money div { display: grid; }
  .money small { font-size: 15px; line-height: 18px; color: var(--pencil); }
  .money b { font-family: var(--hand); font-size: 36px; font-weight: 700; line-height: 1; }
  .money .main b { color: var(--blue); font-size: 44px; }
  .req dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 14px; margin: 0; font-size: 17px; line-height: 24px; }
  .req dt { color: var(--pencil); }
  .req dd { margin: 0; }
  .req .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .req .counter-box { display: none; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
  .req.counter-open .counter-box { display: grid; }
  .req .note { border-left: 3px solid var(--warn); padding: 2px 10px; font-size: 16px; line-height: 22px; font-style: italic; }
  .empty { padding: 40px 20px; text-align: center; color: var(--pencil); border: 2px dashed var(--pencil); border-radius: var(--wobble); font-family: var(--hand); font-size: 26px; }
  .admin-settings { border: 2px solid var(--ink); border-radius: var(--wobble2); padding: 16px 18px; display: grid; gap: 12px; background: var(--paper); }
  .hours { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 17px; }
  .hours div { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; align-items: center; }
  .hours label { font-family: var(--body); font-size: 17px; font-weight: 400; display: flex; gap: 8px; align-items: center; line-height: 24px; }
  .hours input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
  .hours input[type="time"] { padding: 4px 6px; }
  .hidden { display: none !important; }

  .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--hl); color: var(--ink); border: 2px solid var(--ink); padding: 6px 18px; border-radius: var(--wobble); font-family: var(--hand); font-size: 22px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; box-shadow: 3px 3px 0 var(--ink); }
  .toast.show { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .toast { transition: none; } .btn:active { transform: none; } }

  /* mapa referencí */
  .mapwrap { border: 2px solid var(--ink); border-radius: var(--wobble2); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
  .mapwrap svg { display: block; width: 100%; height: auto; }
  .mapwrap text { font-family: var(--body); font-size: 13px; fill: var(--pencil); pointer-events: none; }
  .mapwrap .town { fill: var(--paper); stroke: var(--pencil); stroke-width: 1.5; }
  .mapwrap .pin { cursor: pointer; }
  .mapwrap .pin circle { fill: var(--hl); stroke: var(--ink); stroke-width: 2.5; }
  .mapwrap .pin.sel circle { fill: var(--blue); }
  .mapwrap .pin text { font-family: var(--hand); font-size: 15px; font-weight: 700; fill: var(--ink); }
  .mapwrap .home { fill: var(--blue); stroke: var(--ink); stroke-width: 2; }
  .mapwrap .road { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 6 5; }
  .mapwrap .river { fill: none; stroke: var(--rule); stroke-width: 3; }
  .mapfoot { display: grid; grid-template-columns: 1fr; border-top: 2px dashed var(--ink); }
  @media (min-width: 820px) { .mapfoot { grid-template-columns: 1fr 1fr; } .refcard { border-left: 2px dashed var(--ink); } }
  .reflist { padding: 12px 16px; display: grid; gap: 6px; align-content: start; max-height: 320px; overflow: auto; }
  .refitem { display: grid; grid-template-columns: 1fr auto; gap: 8px; border-bottom: 1px dashed var(--faint); padding: 6px 0; cursor: pointer; font-size: 17px; line-height: 24px; }
  .refitem[aria-pressed="true"] { background: var(--hl); margin: 0 -8px; padding: 6px 8px; }
  .refitem small { color: var(--pencil); display: block; font-size: 15px; line-height: 20px; }
  .refitem b { font-family: var(--hand); font-size: 20px; white-space: nowrap; }
  .refcard { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
  .refcard .ph { width: 100%; aspect-ratio: 4 / 3; border: 2px solid var(--ink); border-radius: var(--wobble); object-fit: cover; background: var(--paper-2); display: grid; place-items: center; color: var(--pencil); font-family: var(--hand); font-size: 24px; overflow: hidden; }
  .refcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .refcard h4 { margin: 0; font-family: var(--hand); font-size: 26px; font-weight: 700; line-height: 1.05; }
  .refcard q { font-style: italic; color: var(--ink); quotes: "\201E" "\201C"; }
  .refcard .meta { color: var(--pencil); font-size: 15px; line-height: 20px; }
  .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .filters button { border: 2px solid var(--ink); background: var(--paper); border-radius: var(--wobble); padding: 3px 12px; cursor: pointer; font-size: 16px; }
  .filters button:nth-child(even) { border-radius: var(--wobble2); }
  .filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

  /* admin: login + hlavní záložky */
  .login { max-width: 420px; margin: 40px auto; border: 2px solid var(--ink); border-radius: var(--wobble); background: var(--paper); padding: 20px 22px; box-shadow: 4px 4px 0 var(--ink); display: grid; gap: 10px; }
  .login h2::after { display: none; }
  .atabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 20px; }
  .atabs button { border: 2px solid var(--ink); background: var(--paper); border-radius: var(--wobble); padding: 6px 16px; cursor: pointer; font-family: var(--hand); font-size: 24px; font-weight: 700; line-height: 1; }
  .atabs button:nth-child(even) { border-radius: var(--wobble2); }
  .atabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .apanel { display: none; } .apanel.on { display: block; }
  .refform { display: none; border-top: 2px dashed var(--ink); padding-top: 10px; gap: 10px; }
  .req.ref-open .refform { display: grid; }
  .thumb { width: 96px; height: 72px; object-fit: cover; border: 2px solid var(--ink); border-radius: var(--wobble2); }
  .refadmin { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
  .setcard { border: 2px solid var(--ink); border-radius: var(--wobble); background: var(--paper); padding: 16px 18px; margin-bottom: 18px; display: grid; gap: 10px; }
  .setcard:nth-child(even) { border-radius: var(--wobble2); }
  .setcard h3 { margin: 0; font-family: var(--hand); font-size: 28px; font-weight: 700; line-height: 1; }
  .setcard .hint { margin-top: -4px; }
  .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  @media (max-width: 560px) { .row, .row3 { grid-template-columns: 1fr; } .req .counter-box { grid-template-columns: 1fr; } .money { grid-template-columns: 1fr 1fr; } }

  /* právní stránky */
  .legal { display: none; position: fixed; inset: 0; z-index: 30; background: var(--paper-2); overflow: auto; padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 48px; }
  .legal.on { display: block; }
  .legal .doc { max-width: 760px; margin: 0 auto; padding: 24px 28px; border: 2px solid var(--ink); border-radius: var(--wobble); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
  .legal h2 { margin-bottom: 4px; }
  .legal h3 { font-family: var(--hand); font-size: 26px; font-weight: 700; margin: 22px 0 4px; line-height: 1.05; }
  .legal p, .legal li { font-size: 17px; line-height: 26px; }
  .legal ul { padding-left: 22px; margin: 0 0 12px; }
  .legal .meta { color: var(--pencil); font-size: 15px; margin-bottom: 16px; }
  .legal .close { position: sticky; top: 0; display: flex; justify-content: flex-end; margin-bottom: 8px; }
  footer nav { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
  footer nav a { color: var(--ink); }


/* ===== VašKovo – skicová varianta (brand manuál 1.1, str. 6) ===== */
@font-face{font-family:"Caveat";src:url(fonts/f-76b4891629.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/f-afefc49186.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/f-584d376818.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  color-scheme: light;
  --paper: #FFFFFF; --paper-2: #F4F3F0; --rule: #E3E1DC; --margin: #E9B48F;
  --ink: #3F3F3F; --pencil: #6B6B69; --faint: #CFCCC5;
  --blue: #B4521A; --on-blue: #FFFFFF; --ok: #2E7D3C; --bad: #B93A3A; --warn: #B9771C; --hl: #F6D2B4;
  --hand: "Caveat", "Segoe Print", cursive;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --wobble: 6px 14px 8px 12px; --wobble2: 12px 6px 14px 8px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: light; --paper:#FFFFFF; --paper-2:#F4F3F0; --rule:#E3E1DC; --margin:#E9B48F; --ink:#3F3F3F; --pencil:#6B6B69; --faint:#CFCCC5;
  --blue:#B4521A; --on-blue:#FFFFFF; --ok:#2E7D3C; --bad:#B93A3A; --warn:#B9771C; --hl:#F6D2B4; } }
body { background-color: #F4F3F0; font-size: 17px;
  background-image: linear-gradient(#E3E1DC 1px, transparent 1px), linear-gradient(90deg, #E3E1DC 1px, transparent 1px);
  background-size: 28px 28px; background-attachment: fixed; }
body::before { background: #1E1E1E; }
:focus-visible { outline-color: #B4521A; }
/* hlavička = hlavní značka */
.top { background: #1E1E1E; border-bottom: 3px solid #EB8222; }
.top .wrap { height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; font-size: 19px; }
.brand svg { width: 44px; height: 44px; color: #DADADA; flex: none; }
.brand small { font-family: var(--body); color: #A8A8A6; font-size: 13px; margin-left: 4px; }
.viewswitch button { border-color: #4A4A49; color: #DADADA; border-radius: 2px; font-family: var(--body); font-size: 14px; font-weight: 600; }
.viewswitch button[aria-pressed="true"] { background: #DADADA; color: #1E1E1E; border-color: #DADADA; }
.demo-note { background: #2A2A29; color: #DADADA; }
/* štítek nad nadpisem */
.viewswitch button { white-space: nowrap; }
@media (max-width:560px){ .brand{font-size:16px;gap:8px} .brand svg{width:38px;height:38px} .top .wrap{height:62px} }
.vk-eyebrow { font-family: "Bodoni Moda", Georgia, serif; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: 12.5px; color: #B4521A; margin-bottom: 10px; display: block; }
.hero h1 u { background: none; position: relative; color: #B4521A; }
.hero h1 u::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.08em; height: .14em; background: #B4521A; border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; transform: rotate(-1deg); }
.hero p { font-size: 18px; line-height: 28px; }
h2::after { background: #B4521A; height: 4px; transform: rotate(-.6deg); }
/* tlačítka: rez + stín tužky */
.btn { border-width: 2.5px; border-color: #3F3F3F; box-shadow: 4px 4px 0 #3F3F3F; font-family: var(--body); font-weight: 700; font-size: 16px; padding: 12px 22px; border-radius: 3px 9px 4px 8px; }
.btn.quiet { background: #fff; }
.btn.small { font-size: 14px; }
/* rámečky tužkou */
.pcat, .next-slot { border-width: 2.5px; }
.pcat li { font-size: 15.5px; }
.pcat li b { color: #B4521A; font-weight: 700; }
.steps li::before { color: #B4521A; }
input, select, textarea { font-family: var(--body) !important; }


.dow,.days{grid-template-columns:repeat(7,minmax(0,1fr))}
.bk-body>*{min-width:0}
@media (max-width:560px){ .cal{padding:12px 10px 14px} .brand small{display:none} .viewswitch{gap:4px} .viewswitch button{padding:5px 8px;font-size:13px} .day small{font-size:11px} }
.viewswitch{display:none} body.admin-mode .viewswitch{display:flex}
.btn[disabled]{opacity:.55;cursor:progress}
.photos a{margin-right:10px}

/* PHP verze: doplňky */
.ced{display:flex;flex-direction:column;gap:14px}
.ced .ccat{border:1.5px dashed var(--pencil,#8a8a8a);border-radius:10px;padding:10px 12px}
.ced .crow{display:flex;gap:6px;align-items:center;margin:4px 0}
.ced .crow input{min-width:0}
.ced .crow input.n{flex:1}
.ced .crow input.p{width:96px}
.ced .ib{border:1px solid currentColor;background:transparent;border-radius:6px;min-width:34px;height:34px;cursor:pointer;font:inherit;line-height:1}
.ced .ib:disabled{opacity:.3;cursor:default}
.ced .chead input{font-weight:700}
.smslen{font-size:13px;opacity:.75;margin-top:2px}
.smslen.over{color:#B4521A;opacity:1;font-weight:700}