/* =========================================================================
   Konfigurátor vybavení — Modřanská zahrada / IP Polná
   app.css
   Barvy a typografie převzaty z www.modranskazahrada.cz (font Jost).
   ========================================================================= */

/* Barvy, typografie a základ jsou v brand.css — sdílí je i cookie lišta
   a informační stránky. Tady je jen konfigurátor. */

html, body { height: 100%; }
body { overflow: hidden; }   /* konfigurátor se nescrolluje, scrolluje jen panel */

/* =========================================================================
   LAYOUT
   ========================================================================= */
.kmz {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  height: 100dvh;
  min-height: 100dvh;
}

/* ---------- SIDEBAR ------------------------------------------------------ */
.side {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--mz-line);
  min-height: 0;
  position: relative;
  z-index: 3;
}

.side-top {
  padding: 14px 22px 0;
}
.exit {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: var(--mz-cyan); text-decoration: none;
  transition: color .15s var(--ease);
}
.exit:hover { color: var(--mz-navy); }
.exit svg { width: 13px; height: 13px; }

.brand {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--mz-line);
}
.brand img { display: block; height: 66px; width: auto; }
.brand .brand-sep { width: 1px; height: 46px; background: var(--mz-line); }
.brand .brand-dev { height: 60px; }
.brand-fallback {
  font-weight: 600; font-size: 15px; color: var(--mz-navy); letter-spacing: .01em; line-height: 1.15;
}
.brand-fallback small { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mz-muted-2); font-weight: 500; }

.side-head { padding: 20px 22px 0; }
.side-head h2 {
  margin: 0 0 12px;
  font-size: 27px; line-height: 1.15; font-weight: 600;
  color: var(--mz-navy); letter-spacing: -.01em;
}

/* přepínač bytu */
.unit-switch {
  display: flex; gap: 6px; margin-bottom: 16px;
  background: var(--mz-panel); border-radius: var(--radius); padding: 4px;
}
.unit-switch button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 7px 6px; border-radius: 3px;
  font-size: 12.5px; font-weight: 500; color: var(--mz-muted);
  letter-spacing: .02em; transition: all .15s var(--ease);
}
.unit-switch button:hover { color: var(--mz-navy); }
.unit-switch button[aria-pressed="true"] {
  background: #fff; color: var(--mz-navy); font-weight: 600;
  box-shadow: 0 1px 3px rgba(6,49,57,.12);
}
.unit-switch small { display: block; font-size: 10px; font-weight: 400; opacity: .7; }

/* záložky místností */
.rooms { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding-bottom: 16px; }
.rooms button {
  border: 0; background: none; cursor: pointer; padding: 2px 0;
  font-size: 15px; font-weight: 500; color: var(--mz-navy);
  transition: color .15s var(--ease);
  position: relative;
}
.rooms button:hover { color: var(--mz-green); }
.rooms button[aria-selected="true"] { color: #E8891B; font-weight: 600; }
.rooms .sep { color: var(--mz-line); padding: 0 11px; user-select: none; }

/* ---------- rozdílový výpis ---------------------------------------------- */
.diff-none { font-size: 12.5px; color: var(--mz-muted); padding: 8px 0 4px; }
.diff-row { padding: 11px 0; border-bottom: 1px solid #EDF1F3; }
.diff-k { font-size: 11px; color: var(--mz-cyan); margin-bottom: 6px; }
.diff-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diff-c { display: flex; align-items: center; gap: 8px; min-width: 0; }
.diff-c .sw { width: 30px; height: 30px; }
.diff-c span { min-width: 0; display: block; }
.diff-c b { display: block; font-size: 12.5px; font-weight: 600; color: var(--mz-navy);
            line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-price { display: block; font-size: 10px; font-weight: 500; color: var(--mz-muted); }

.diff-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.diff-tot > div { background: var(--mz-panel); border-radius: var(--radius); padding: 9px 11px; }
.diff-tot span { display: block; font-size: 10.5px; color: var(--mz-muted); }
.diff-tot b { font-size: 15px; font-weight: 600; color: var(--mz-navy); }
.diff-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 6px; }
.diff-act .btn-solid { justify-content: center; text-align: center; font-size: 12px; padding: 10px 8px; }

/* tělo sidebaru */
.side-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.side-body::-webkit-scrollbar { width: 8px; }
.side-body::-webkit-scrollbar-thumb { background: #DDE4E8; border-radius: 8px; }
.side-body::-webkit-scrollbar-track { background: transparent; }

.grp { padding: 0 22px; }
.grp-title {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 4px;
  font-size: 10.5px; letter-spacing: .07em; color: var(--mz-muted-2); font-weight: 400;
}
.grp-title::after { content: ''; flex: 1; height: 1px; background: var(--mz-line); }

/* ---------- položka ------------------------------------------------------ */
.item { border-bottom: 1px solid #EDF1F3; }
.item:last-child { border-bottom: 0; }

.item-btn {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border: 0; background: none; cursor: pointer; text-align: left;
  transition: opacity .15s var(--ease);
}
.item-btn:hover { opacity: .78; }

.sw {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 2px;
  border: 1px solid rgba(6,49,57,.16); overflow: hidden; position: relative;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.sw i { position: absolute; inset: 0; display: block; }
.sw[data-grain="wood"]  i { background: repeating-linear-gradient(94deg, transparent 0 5px, var(--sw2) 5px 6px); opacity: .85; }
.sw[data-grain="tile"]  i { background:
   repeating-linear-gradient(90deg, transparent 0 14px, var(--sw2) 14px 15px),
   repeating-linear-gradient(0deg, transparent 0 22px, var(--sw2) 22px 23px); }
.sw[data-grain="matte"] i { background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 60%); }

.item-txt { min-width: 0; flex: 1; display: block; }
.item-label { display: block; font-size: 11.5px; color: var(--mz-cyan); font-weight: 400; line-height: 1.3; }
.item-name  { display: block; font-size: 16.5px; font-weight: 600; color: var(--mz-navy); line-height: 1.25; letter-spacing: -.005em; }
.item-note  { display: block; font-size: 11.5px; color: var(--mz-muted); line-height: 1.35; margin-top: 1px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item-right { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.item-chev { flex: 0 0 auto; width: 14px; height: 14px; color: var(--mz-muted-2); transition: transform .22s var(--ease); }
.item.open .item-chev { transform: rotate(180deg); }
.item.flash { animation: flash 0.9s var(--ease); }
@keyframes flash {
  0%, 100% { background: transparent; }
  18%      { background: rgba(0,169,135,.12); }
}

/* ---------- ceny --------------------------------------------------------- */
.item-price, .opt-price, .sum-price {
  font-size: 11px; font-weight: 600; color: var(--mz-navy);
  white-space: nowrap; letter-spacing: -.01em;
}
.item-price.free, .opt-price.free, .sum-price.free { font-weight: 400; color: var(--mz-muted-2); }
.opt-price { margin-left: auto; }
.sum-price { align-self: center; margin-left: auto; }

/* rozbalený výběr variant */
.opts {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s var(--ease);
}
.item.open .opts { grid-template-rows: 1fr; }
.opts > div { overflow: hidden; }
.opts-in { padding: 2px 0 14px; display: flex; flex-direction: column; gap: 3px; }

.opt {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 9px 7px 7px; border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: left; width: 100%;
  transition: background .13s var(--ease), border-color .13s var(--ease);
}
.opt:hover { background: var(--mz-panel); }
.opt[aria-checked="true"] { background: #fff; border-color: var(--mz-green); box-shadow: 0 0 0 1px var(--mz-green); }
.opt .sw { width: 30px; height: 30px; }
.opt-t { min-width: 0; display: block; }
.opt-n { display: block; font-size: 13.5px; font-weight: 500; color: var(--mz-navy); line-height: 1.25; }
.opt-d { display: block; font-size: 10.5px; color: var(--mz-muted); line-height: 1.3; }
.opt-tick { width: 15px; height: 15px; color: var(--mz-green); opacity: 0; flex: 0 0 auto; }
.opt[aria-checked="true"] .opt-tick { opacity: 1; }

/* patička sidebaru */
.side-foot {
  border-top: 1px solid var(--mz-line);
  padding: 12px 22px 12px;
  display: flex; flex-direction: column; gap: 9px; align-items: stretch;
  background: #fff;
}
.side-actions { display: flex; gap: 8px; align-items: center; }

/* součet příplatků */
.total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 2px 2px 8px; border-bottom: 1px solid #EDF1F3; margin-bottom: 2px;
}
.total span { font-size: 11px; color: var(--mz-muted); }
.total b { font-size: 16px; font-weight: 600; color: var(--mz-navy); letter-spacing: -.01em; }
.total b.free { font-size: 12px; font-weight: 500; color: var(--mz-green); }

/* autorský podpis */
.credit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; padding: 2px 0 1px;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mz-muted-2); font-weight: 400;
  transition: color .15s var(--ease);
}
.credit img {
  height: 15px; width: auto; display: block;
  /* logo IMPnet je bílé s průhledností → překlopení na tmavou siluetu */
  filter: brightness(0);
  opacity: .42;
  transition: opacity .15s var(--ease);
}
.credit:hover { color: var(--mz-navy); }
.credit:hover img { opacity: .82; }
.lnk {
  border: 1px solid var(--mz-line); background: #fff; border-radius: var(--radius);
  padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--mz-navy);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: all .15s var(--ease);
}
.lnk:hover { border-color: var(--mz-navy); background: var(--mz-panel); }
.lnk svg { width: 14px; height: 14px; }
.lnk.grow { flex: 1; justify-content: center; }

/* =========================================================================
   SCÉNA
   ========================================================================= */
.stage { position: relative; min-width: 0; overflow: hidden; background: var(--mz-panel); }

.viz { position: absolute; inset: 0; --split: 50%; }
.layer { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease); }
.scene.on { opacity: 1; visibility: visible; }
.scene-svg { width: 100%; height: 100%; display: block; }

/* prolnutí materiálu — bez načítání, jen změna barvy */
.scene-svg polygon, .scene-svg line, .scene-svg rect, .scene-svg circle, .scene-svg ellipse, .scene-svg path {
  transition: fill .18s var(--ease), stroke .18s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .scene-svg polygon, .scene-svg line, .scene-svg rect,
  .scene-svg circle, .scene-svg ellipse, .scene-svg path { transition: none; }
}

/* klikatelné plochy (hotspoty) */
.lay-floor, .lay-wall, .lay-door, .lay-wardrobe, .lay-nightstand, .lay-table,
.lay-kitchen, .lay-tv, .lay-worktop, .lay-vanity, .lay-cab, .lay-wm,
.lay-deska, .lay-rug, .lay-bed, .lay-head { cursor: pointer; }

/* ---------- porovnávací režim --------------------------------------------
   #cmpB (Verze 2) leží přes celou plochu, #cmpA (Verze 1) je oříznutá
   zleva k předělu. Živá vrstva se v porovnání schová.                      */
.layer.cmp { pointer-events: none; }
#cmpB { z-index: 1; }
#cmpA { z-index: 2; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.viz.comparing #live { visibility: hidden; }
.cmp-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.viz.comparing .cmp-ui { display: block; }
.tool:disabled { opacity: .4; cursor: not-allowed; }

.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split);
  width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(6,49,57,.22), 0 0 18px rgba(6,49,57,.22);
  pointer-events: auto; cursor: ew-resize;
}
.cmp-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: var(--mz-navy);
  display: grid; place-items: center;
  box-shadow: 0 2px 14px rgba(6,49,57,.28);
}
.cmp-grip svg { width: 17px; height: 17px; }

.cmp-tag {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-radius: var(--radius); padding: 8px 13px; max-width: 40%;
  box-shadow: var(--shadow-1); pointer-events: none;
}
.cmp-tag b { display: block; font-size: 12px; font-weight: 600; color: var(--mz-navy); }
.cmp-tag span { display: block; font-size: 10.5px; color: var(--mz-muted); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-a { left: 22px; }
.cmp-b { right: 22px; text-align: right; }

.cmp-tag b { font-size: 13px; }
.cmp-delta {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  background: var(--mz-navy); color: #fff; border-radius: 40px;
  padding: 6px 16px; font-size: 12px; font-weight: 500; pointer-events: none;
  white-space: nowrap;
}
.cmp-delta:empty { display: none; }

.cmp-close {
  position: absolute; right: 22px; top: 74px;
  border: 1px solid rgba(6,49,57,.12); background: rgba(255,255,255,.92);
  border-radius: var(--radius); width: 32px; height: 32px;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  color: var(--mz-navy);
}
.cmp-close svg { width: 15px; height: 15px; }

/* hlavička nad scénou */
.stage-head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  padding: 30px 34px 60px;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.stage-head > * { pointer-events: auto; }
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mz-muted-2); font-weight: 500; margin-bottom: 4px;
}
.eyebrow::after { content: ''; width: 150px; max-width: 26vw; height: 1px; background: var(--mz-line); }
.stage-head h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.02; font-weight: 500;
  color: var(--mz-navy); letter-spacing: -.02em;
}
.stage-head h1 span { display: block; font-size: 14px; font-weight: 400; color: var(--mz-muted); letter-spacing: 0; margin-top: 6px; }

.btn-share {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--mz-green); color: #fff; border: 0; border-radius: var(--radius);
  padding: 13px 22px; font-size: 14px; font-weight: 500; letter-spacing: .01em;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,169,135,.28);
  transition: background .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.btn-share:hover { background: var(--mz-green-dark); box-shadow: 0 4px 18px rgba(0,169,135,.34); }
.btn-share:active { transform: translateY(1px); }
.btn-share svg { width: 17px; height: 17px; }
.btn-share.ok { background: var(--mz-navy); box-shadow: none; }

/* pravý horní ovládací panel */
.stage-tools {
  position: absolute; right: 22px; top: 24px; z-index: 3;
  display: flex; gap: 8px;
}
.tool {
  width: 40px; height: 40px; border-radius: var(--radius);
  border: 1px solid rgba(6,49,57,.12); background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px); cursor: pointer;
  display: grid; place-items: center; color: var(--mz-navy);
  transition: all .15s var(--ease);
}
.tool:hover { background: #fff; border-color: var(--mz-navy); }
.tool svg { width: 18px; height: 18px; }
.tool[aria-pressed="true"] { background: var(--mz-navy); color: #fff; border-color: var(--mz-navy); }

/* ---------- uložené verze (srdíčka) --------------------------------------- */
.favs {
  position: relative; display: flex; gap: 6px;
  margin-right: 4px; padding-right: 10px;
  border-right: 1px solid rgba(6,49,57,.14);
}
.fav {
  height: 40px; padding: 0 11px; border-radius: var(--radius);
  border: 1px solid rgba(6,49,57,.12); background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; color: var(--mz-navy);
  transition: all .15s var(--ease);
}
.fav:hover { background: #fff; border-color: var(--mz-navy); }
.fav svg { width: 16px; height: 16px; }
.fav b { font-size: 12px; font-weight: 600; }
.fav.on { border-color: var(--mz-green); color: var(--mz-green-dark); }
.fav.on:hover { border-color: var(--mz-green-dark); }
.fav-sw { display: flex; gap: 2px; margin-left: 1px; }
.fav-sw i {
  width: 6px; height: 17px; border-radius: 1px; display: block;
  box-shadow: inset 0 0 0 1px rgba(6,49,57,.18);
}
/* právě zobrazená verze */
.fav.cur { background: var(--mz-green); border-color: var(--mz-green); color: #fff; }
.fav.cur .fav-sw i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }

.fav-menu {
  position: absolute; top: 46px; right: 0; z-index: 6;
  background: #fff; border: 1px solid var(--mz-line); border-radius: var(--radius);
  box-shadow: var(--shadow-2); padding: 4px; min-width: 168px;
}
.fav-menu[hidden] { display: none; }
.fav-menu-h {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mz-muted-2); padding: 7px 10px 5px;
}
.fav-menu button {
  display: flex; width: 100%; align-items: center; gap: 9px;
  border: 0; background: none; padding: 8px 10px; border-radius: 3px;
  font-size: 12.5px; color: var(--mz-navy); cursor: pointer; text-align: left;
}
.fav-menu button:hover { background: var(--mz-panel); }
.fav-menu button svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--mz-muted-2); }
.fav-menu .danger, .fav-menu .danger svg { color: var(--mz-red); }
.fav-menu hr { border: 0; border-top: 1px solid #EDF1F3; margin: 4px 0; }

/* legenda / patička scény */
.stage-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 40px 34px 18px;
  background: linear-gradient(0deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  pointer-events: none;
}
.stage-foot > * { pointer-events: auto; }
.disclaimer {
  font-size: 10.5px; color: var(--mz-muted);
  max-width: 76ch; line-height: 1.5; text-wrap: balance;
  padding-left: 42px;   /* místo pro plovoucí čtvereček cookies */
}

/* Plovoucí čtvereček cookies: ve výchozím stavu je vlevo dole, což by tu
   kolidovalo s patičkou panelu — posuneme ho za panel, nad vizualizaci.
   V režimu prezentace je panel skrytý, takže se vrací k levému okraji.
   Selektor musí mít vyšší specificitu než .ck-icon v cookies.css, které
   se načítá později. */
body .ck-icon { left: calc(var(--side-w) + 16px); }
body.focus .ck-icon { left: 16px; }

/* právní odkazy v patičce scény */
.stage-links { display: flex; gap: 16px; flex-wrap: wrap; align-self: flex-end; }
.stage-links a {
  font-size: 10.5px; color: var(--mz-muted); text-decoration: none;
  white-space: nowrap; transition: color .15s var(--ease);
}
.stage-links a:hover { color: var(--mz-navy); text-decoration: underline; }
/* Loga jsou trvale v hlavičce panelu — v patičce scény se ukazují
   jen v režimu prezentace, kdy je panel skrytý. */
.foot-logos { display: none; align-items: center; gap: 18px; opacity: .92; }
body.focus .foot-logos { display: flex; }
.foot-logos img { height: 40px; width: auto; display: block; }
.foot-logos img + img { height: 38px; }

/* =========================================================================
   SOUPIS (panel)
   ========================================================================= */
.sheet-bg {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(6,49,57,.34); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease);
}
.sheet-bg.on { opacity: 1; visibility: visible; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(460px, 94vw); background: #fff;
  box-shadow: var(--shadow-2);
  transform: translateX(102%); transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
}
.sheet.on { transform: none; }
.sheet-h { padding: 22px 26px 16px; border-bottom: 1px solid var(--mz-line); display: flex; align-items: flex-start; gap: 14px; }
.sheet-h h3 { margin: 0; font-size: 22px; font-weight: 600; color: var(--mz-navy); }
.sheet-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--mz-muted); }
.sheet-close { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--mz-muted); padding: 4px; }
.sheet-close svg { width: 20px; height: 20px; }
.sheet-b { flex: 1; overflow-y: auto; padding: 8px 26px 20px; }
.sum-grp { margin-top: 16px; }
.sum-grp h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .07em; color: var(--mz-muted-2); font-weight: 400; }
.sum-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #EDF1F3; }
.sum-row .sw { width: 32px; height: 32px; }
.sum-t { min-width: 0; }
.sum-k { font-size: 11px; color: var(--mz-muted); }
.sum-v { font-size: 14px; font-weight: 600; color: var(--mz-navy); line-height: 1.2; }
.sum-n { font-size: 11px; color: var(--mz-muted); }

.sum-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 13px 15px; border-radius: var(--radius);
  background: var(--mz-panel);
}
.sum-total span { font-size: 12px; color: var(--mz-muted); }
.sum-total b { font-size: 19px; font-weight: 600; color: var(--mz-navy); letter-spacing: -.01em; }

.sum-share { margin-top: 24px; }
.sum-share h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .07em; color: var(--mz-muted-2); font-weight: 400; }
.qr-wrap { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.qr { flex: 0 0 auto; line-height: 0; padding: 8px; background: #fff;
      border: 1px solid var(--mz-line); border-radius: var(--radius); }
.qr svg { display: block; }
.qr-err { font-size: 11px; color: var(--mz-muted); }
.qr-wrap p { margin: 0; font-size: 11.5px; color: var(--mz-muted); line-height: 1.45; }
.sheet-f { padding: 16px 26px 20px; border-top: 1px solid var(--mz-line); display: flex; gap: 8px; }

.sum-credit { margin-top: 22px; padding-top: 16px; border-top: 1px solid #EDF1F3; }

/* pole s odkazem */
.share-row { display: flex; gap: 8px; margin-top: 14px; }
.share-row input {
  flex: 1; min-width: 0; border: 1px solid var(--mz-line); border-radius: var(--radius);
  padding: 9px 11px; font-size: 12px; color: var(--mz-muted); background: var(--mz-panel);
}
.btn-solid {
  border: 0; background: var(--mz-green); color: #fff; border-radius: var(--radius);
  padding: 10px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: background .15s var(--ease);
}
.btn-solid:hover { background: var(--mz-green-dark); }
.btn-solid.navy { background: var(--mz-navy); }
.btn-solid.navy:hover { background: var(--mz-navy-deep); }
.btn-solid svg { width: 15px; height: 15px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 60;
  background: var(--mz-navy-deep); color: #fff; padding: 11px 20px; border-radius: var(--radius);
  font-size: 13.5px; box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transition: all .22s var(--ease);
}
.toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1180px) { :root { --side-w: 310px; } .stage-head { padding: 22px 24px 50px; } }

@media (max-width: 900px) {
  body { overflow: auto; }
  .kmz { grid-template-columns: 1fr; height: auto; min-height: 100dvh; }
  .stage { order: -1; position: sticky; top: 0; z-index: 5; height: 56vh; min-height: 300px; box-shadow: 0 6px 20px rgba(6,49,57,.10); }
  .side { border-right: 0; }
  .side-body { overflow: visible; }
  .stage-head { padding: 16px 18px 40px; }
  .stage-head h1 { font-size: 28px; margin-bottom: 12px; }
  .stage-head h1 span { font-size: 12px; }
  .btn-share { padding: 10px 16px; font-size: 13px; }
  .eyebrow { font-size: 10px; margin-bottom: 2px; }
  .stage-foot { padding: 30px 18px 12px; }
  .disclaimer { display: none; }
  .foot-logos img { height: 28px; }
  .foot-logos img + img { height: 26px; }
  .brand img { height: 52px; }
  .brand .brand-dev { height: 47px; }
  .brand .brand-sep { height: 36px; }
  .stage-tools { right: 14px; top: 14px; gap: 6px; }
  .tool { width: 34px; height: 34px; }
  .favs { padding-right: 7px; margin-right: 1px; gap: 4px; }
  .fav { height: 34px; padding: 0 8px; gap: 5px; }
  .fav svg { width: 14px; height: 14px; }
  .fav-sw i { width: 5px; height: 14px; }
  .fav-menu { top: 40px; }
  .side-top, .brand, .side-head, .grp, .side-foot, .vers { padding-left: 18px; padding-right: 18px; }
  .side-foot { position: sticky; bottom: 0; }
  /* Na mobilu je panel pod vizualizací a jeho patička je přilepená dole,
     takže by čtvereček překážel. Nastavení je dostupné odkazem v patičce scény. */
  body .ck-icon { display: none; }
  .diff-pair, .diff-tot, .diff-act { grid-template-columns: 1fr; }
  .cmp-tag { max-width: 44%; padding: 6px 10px; }
}

@media (max-width: 480px) {
  .stage { height: 46vh; }
  .side-head h2 { font-size: 22px; }
  .item-name { font-size: 15px; }
  .rooms button { font-size: 14px; }
  .rooms .sep { padding: 0 8px; }
}

/* režim „jen vizualizace“ — podpis se přesune do patičky scény */
body.focus .side { display: none; }
body.focus .kmz { grid-template-columns: 1fr; }
.stage-credit { display: none; }
body.focus .stage-credit { display: flex; align-self: flex-end; }

/* =========================================================================
   TISK / PDF (Ctrl+P)
   ========================================================================= */
@media print {
  body { overflow: visible; background: #fff; }
  .side, .stage-tools, .btn-share, .sheet-bg, .toast, .lnk { display: none !important; }
  .kmz { display: block; height: auto; }
  .stage { position: relative; height: 60vh; page-break-inside: avoid; }
  .sheet { position: static; transform: none; width: 100%; box-shadow: none; }
  .sheet-f, .sheet-close { display: none !important; }
}