/* =========================================================
   Galeria online – Jaworski Music
   Kolory i typografia 1:1 z jaworskimusic.pl i Kreatora winietek
   ========================================================= */
:root {
  color-scheme: light;
  --green: #004d40;
  --green-dark: #00382f;
  --green-tint: rgba(0, 77, 64, 0.08);
  --cream: #f7f4eb;
  --umber: #352100;
  --ink: #1a2e2b;
  --muted: #4a5d5a;
  --muted-2: #6b7c79;
  --line: #e7e1d1;
  --card: #ffffff;
  --card-soft: #f7fdfd;
  --amber: #7a4f00;
  --amber-bg: #fcf1d8;
  --ok: #0d6046;
  --ok-bg: #e1f1e9;
  --danger: #a3122e;
  --danger-bg: #fbe7ea;
  --bg: #ffffff;
  --input-bg: #ffffff;
  --line-strong: #dcd5c3;
  --line-soft: #f1ede3;
  --line-warm: #eadfc6;
  --fill: #004d40;
  --fill-hover: #352100;
  --on-fill: #ffffff;
  --umber-ink: #352100;
  --footer-bg: #004d40;
  --warn-ink: #5a3a00;
  --ok-ink: #0b4a37;
  --err-ink: #7a0d22;
  --danger-line: #f0c9d0;
  --danger-fill: #a3122e;
  --amber-bg-2: #fdf3e0;
  --amber-line: #f0d9a8;
  --neutral-bg: #eeede8;
  --neutral-ink: #6d6c66;
  --glass: rgba(255, 255, 255, 0.85);
  --glass-strong: rgba(255, 255, 255, 0.97);
  --glass-card: rgba(255, 255, 255, 0.86);
  --glass-chip: rgba(255, 255, 255, 0.92);
  --cloth-a: #fbfaf6;
  --cloth-b: #f1ede2;
  --cloth-fade: rgba(241, 237, 226, 0);
  --focus: rgba(0, 77, 64, 0.35);
  --focus-soft: rgba(0, 77, 64, 0.12);
  --switch-off: #d9d3c4;
  --pip-off: rgba(26, 46, 43, 0.14);
  --empty-bg: #eef1f0;
  --empty-line: #b9c2c0;
  --spent-bg: #d9dedd;
  --spent-ink: #7b8987;
  --toast-bg: #1a2e2b;
  --mark-bg: #fff1a8;
  --modal-backdrop: rgba(26, 46, 43, 0.45);
  --bg-photo-opacity: 0.32;
  --g-bg: #ffffff;
  --g-ink: #1f1f1f;
  --g-line: #dadce0;
  --g-hover-bg: #f8faff;
  --g-hover-line: #c6d2f5;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 15px 30px rgba(0, 77, 64, 0.08);
  --shadow-paper: 0 1px 2px rgba(26, 46, 43, 0.08), 0 14px 34px rgba(26, 46, 43, 0.16);
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { max-width: 100%; }
a { color: var(--green); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* tło jak na stronie głównej: rozmyte zdjęcie z realizacji */
.bg-photo {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg-image, none) center / cover no-repeat;
  filter: blur(14px); opacity: var(--bg-photo-opacity); transform: scale(1.15);
  pointer-events: none;
}

h1, h2, h3, h4 { color: var(--green); line-height: 1.2; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.78rem; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- nawigacja ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(74, 93, 90, 0.1);
}
.topbar .container { display: flex; align-items: center; gap: 16px; min-height: 72px; }
/* logo QRonika.online, pod nim hasło BY JAWORSKI MUSIC (jak w pakiecie logo) */
.brand { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); }
.brand img { height: 34px; width: auto; display: block; }
#brand-logo-dark { display: none; }
.brand.no-logo .brand-logo { display: none !important; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: "Times New Roman", serif; font-size: 1.35rem; letter-spacing: 0.02em; color: var(--ink); }
.brand-text small { font-size: 0.62rem; color: var(--muted); margin-top: 4px; }
.brand-app { font-family: Outfit, Montserrat, sans-serif; font-weight: 500; font-size: 0.56rem; letter-spacing: 0.3em; margin-right: -0.3em;
  text-transform: uppercase; line-height: 1; color: #0E5B45; white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a, .nav button.link {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.9rem;
  padding: 8px 12px; border-radius: 999px; border: 0; background: none; cursor: pointer;
}
.nav a:hover, .nav button.link:hover { color: var(--green); background: var(--green-tint); }
.nav a[aria-current="page"] { color: var(--green); background: var(--green-tint); }
.nav .admin-link { color: var(--umber-ink); }
.account { position: relative; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream);
  color: var(--green); font-weight: 700; cursor: pointer; display: grid; place-items: center;
}
.account-menu {
  position: absolute; right: 0; top: 48px; min-width: 240px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 8px; z-index: 60;
}
.account-menu .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 0.85rem; word-break: break-all; }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--green-tint); color: var(--green); }
.nav-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: var(--card); border-radius: 12px; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  /* telefon: mniejsze logo i hasło */
  .brand img { height: 30px; }
  .brand-app { font-size: 0.5rem; }
  .nav {
    position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--glass-strong); border-bottom: 1px solid var(--line); padding: 10px 16px 16px; gap: 2px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a, .nav button.link { padding: 12px 14px; }
  .account-menu { position: static; box-shadow: none; margin-top: 6px; }
  .avatar { display: none; }
}

.demo-banner {
  background: var(--umber); color: #fdf6e6; font-size: 0.85rem; text-align: center; padding: 8px 16px;
}
.demo-banner button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font-weight: 600; padding: 0 4px; }

main { flex: 1; outline: none; }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.4s var(--ease), color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.btn-primary { background: var(--fill); color: var(--on-fill); box-shadow: 0 4px 15px rgba(0, 77, 64, 0.18); }
.btn-primary:hover:not(:disabled) { background: var(--fill-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(53, 33, 0, 0.2); }
.btn-ghost { background: var(--card); color: var(--green); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--green); }
.btn-quiet { background: transparent; color: var(--green); padding: 10px 14px; }
.btn-quiet:hover:not(:disabled) { background: var(--green-tint); }
.btn-danger { background: var(--card); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.google-btn { background: var(--g-bg); color: var(--g-ink); border: 1px solid var(--g-line); font-weight: 600; }
.google-btn:hover:not(:disabled) { background: var(--g-hover-bg); border-color: var(--g-hover-line); }
.google-btn svg { width: 18px; height: 18px; }

/* ---------- formularze ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .field > label, .label { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.field .hint { font-size: 0.8rem; color: var(--muted-2); }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line-strong); background: var(--input-bg); border-radius: 12px; padding: 12px 14px; font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
textarea.input { resize: vertical; min-height: 110px; line-height: 1.5; }
.input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--focus-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: none; }
.error-text { color: var(--danger); font-size: 0.85rem; font-weight: 600; }

.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card);
  font-weight: 600; font-size: 0.88rem; transition: all 0.2s;
}
.choice input:checked + span { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- ogólne bloki ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.panel-soft { background: var(--card-soft); }
.section { padding: 72px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head p { max-width: 36em; }
.page { padding: 40px 0 72px; }
.page-head { margin-bottom: 28px; display: flex; gap: 16px; align-items: end; justify-content: space-between; flex-wrap: wrap; }
.page-head p { margin-top: 8px; }
.page-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--green); font-weight: 700; text-decoration: none; font-size: 0.85rem; margin-bottom: 14px; }
.back:hover { color: var(--umber-ink); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-pending { background: var(--amber-bg); color: var(--amber); }
.chip-paid { background: var(--ok-bg); color: var(--ok); }
.chip-cancelled { background: var(--neutral-bg); color: var(--neutral-ink); }
.tag { display: inline-block; background: var(--green-tint); color: var(--green); font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }

.notice { border-radius: var(--radius-md); padding: 14px 16px; font-size: 0.9rem; display: flex; gap: 12px; align-items: flex-start; }
.notice-info { background: var(--cream); color: var(--ink); }
.notice-warn { background: var(--amber-bg); color: var(--warn-ink); }
.notice-ok { background: var(--ok-bg); color: var(--ok-ink); }
.notice-error { background: var(--danger-bg); color: var(--err-ink); }
.notice b { font-weight: 700; }

.empty { text-align: center; padding: 56px 24px; }
.empty h3 { margin-bottom: 8px; }
.empty p { color: var(--muted); margin-bottom: 20px; }

.loading { display: grid; place-items: center; min-height: 40vh; color: var(--muted); }
.loading .spin { width: 28px; height: 28px; border: 3px solid var(--green); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; }

/* ---------- strona startowa ---------- */
.hero { padding: 56px 0 40px; }
.hero .container { display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; }
.hero h1 { max-width: 14em; font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
.hero .lead { margin-top: 18px; }
.hero-actions { display: flex; gap: 12px 16px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.hero-price { display: inline-flex; align-items: center; gap: 14px; font-size: 0.95rem; line-height: 1; color: var(--muted); }
/* „od 10 zł” – większa cena, delikatnie pulsuje */
.hero-price b { display: inline-block; font-size: 2rem; line-height: 1; color: var(--green); transform-origin: center; animation: price-pulse 2.4s ease-in-out infinite; }
@keyframes price-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(0, 77, 64, 0); }
  50% { transform: scale(1.1); text-shadow: 0 0 18px rgba(0, 77, 64, 0.28); }
}
/* ruch ograniczony (CONFIG.motion = "system") */ :root[data-motion="reduce"] .hero-price b { animation: none; }
.hero-more { display: flex; width: max-content; margin: 26px auto 0; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.hero-more svg { width: 24px; height: 24px; transform: rotate(90deg); color: var(--green); }
.hero-more:hover { color: var(--green); }
/* ruch: zawsze (CONFIG.motion) */ .hero-more svg { animation: hero-bounce 1.8s ease-in-out infinite; }
  @keyframes hero-bounce { 50% { translate: 0 6px; } }
.hero-facts { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
.hero-facts span { display: inline-flex; gap: 8px; align-items: center; }
.hero-facts svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step { position: relative; padding: 22px 20px; border-radius: var(--radius-lg); background: var(--glass-card); border: 1px solid var(--line); }
.step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fill); color: var(--on-fill); font-size: 0.9rem; margin-bottom: 14px; }
.step h3 { font-size: 1.02rem; margin-bottom: 6px; color: var(--ink); }
.step p { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.seg { display: inline-flex; background: var(--cream); padding: 4px; border-radius: 999px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: 0; background: none; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 0.86rem; cursor: pointer; color: var(--muted);
}
.seg button[aria-pressed="true"] { background: var(--card); color: var(--green); box-shadow: 0 1px 4px rgba(26, 46, 43, 0.12); }

.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tpl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.tpl-card .sheet { line-height: 0; box-shadow: 0 1px 2px rgba(26, 46, 43, 0.1), 0 6px 16px rgba(26, 46, 43, 0.08); border-radius: 2px; overflow: hidden; }
.tpl-card .sheet svg { width: 100%; height: auto; display: block; }
.tpl-card h3 { font-size: 1rem; margin-top: 14px; color: var(--ink); }
.tpl-card p { font-size: 0.84rem; color: var(--muted); }
@media (max-width: 900px) { .tpl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tpl-grid { grid-template-columns: 1fr; } }

.pricing { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.price-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 18px 20px;
  display: flex; flex-direction: column; gap: 4px; text-align: center;
  transition: border-color 0.3s, transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.price-card:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.price-card .qty { font-size: 2.2rem; font-weight: 800; color: var(--green); line-height: 1; }
.price-card .unit { font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; }
.price-card .price { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.price-card .per { font-size: 0.78rem; color: var(--muted-2); margin-bottom: 18px; }
.price-card .btn { margin-top: auto; }
@media (max-width: 1000px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .pricing { grid-template-columns: 1fr 1fr; } }
.pricing-note { margin-top: 18px; font-size: 0.85rem; color: var(--muted); }

.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.faq summary { padding: 20px 24px; cursor: pointer; font-weight: 700; color: var(--green); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 20px; color: var(--muted); font-size: 0.93rem; }

.site-footer { background: var(--footer-bg); color: #f7f4eb; padding: 40px 0; font-size: 0.88rem; }

/* ---------- reklama: Wedding Planner ---------- */
.promo {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  background: var(--cream); border: 1px solid var(--line-warm); border-radius: var(--radius-lg); padding: 22px 24px;
}
.promo-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--fill); color: var(--on-fill); display: grid; place-items: center; flex: none; }
.promo-icon svg { width: 26px; height: 26px; }
.promo-text { display: grid; gap: 4px; min-width: 0; }
.promo-text b { color: var(--green); font-size: 1.08rem; line-height: 1.3; }
.promo-text span { color: var(--muted); font-size: 0.92rem; }
.promo-compact { padding: 16px 18px; gap: 14px; }
.promo-compact .promo-icon { width: 40px; height: 40px; border-radius: 11px; }
.promo-compact .promo-icon svg { width: 21px; height: 21px; }
.promo-compact .promo-text b { font-size: 0.95rem; }
.promo-compact .promo-text span { font-size: 0.84rem; }
.editor-body .promo { grid-template-columns: auto 1fr; }
.editor-body .promo .btn { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .promo { grid-template-columns: auto 1fr; }
  .promo .btn { grid-column: 1 / -1; }
}
.promo-strip { background: var(--cream); border-top: 1px solid var(--line-warm); margin-top: 40px; }
.promo-strip-inner { display: flex; align-items: center; gap: 14px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.promo-strip .promo-icon { width: 36px; height: 36px; border-radius: 10px; }
.promo-strip .promo-icon svg { width: 19px; height: 19px; }
.promo-strip p { flex: 1; min-width: 220px; font-size: 0.9rem; color: var(--ink); }
.promo-strip p b { color: var(--green); }
.promo-strip a { font-weight: 700; color: var(--on-fill); background: var(--fill); padding: 9px 18px; border-radius: 999px; text-decoration: none; font-size: 0.85rem; white-space: nowrap; transition: background 0.3s; }
.promo-strip a:hover { background: var(--fill-hover); }
.site-footer .container { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.site-footer a { color: #fff; }

/* ---------- zamówienie ---------- */
.order-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.order-summary { position: sticky; top: 96px; }
.order-summary dl { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 0.9rem; }
.order-summary dt { color: var(--muted); }
.order-summary dd { margin: 0; font-weight: 600; text-align: right; }
.order-summary .total { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.order-summary .total b { font-size: 1.6rem; color: var(--green); }
@media (max-width: 900px) { .order-layout { grid-template-columns: 1fr; } .order-summary { position: static; } }

.pkg-options { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pkg-option { position: relative; }
.pkg-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pkg-option span { display: flex; flex-direction: column; align-items: center; padding: 14px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--card); transition: all 0.2s; }
.pkg-option b { font-size: 1.3rem; color: var(--green); }
.pkg-option small { color: var(--muted); font-size: 0.8rem; }
.pkg-option .pkg-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; background: var(--green); color: #fff; pointer-events: none; }
.pkg-option .pkg-badge.premium { background: var(--amber-bg-2, #f3dfb5); color: var(--umber-ink, #4a2f00); }
.pkg-option input:checked + span { border-color: var(--fill); background: var(--fill); }
.pkg-option input:checked + span b, .pkg-option input:checked + span small { color: #fff; }
.pkg-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .pkg-options { grid-template-columns: repeat(2, 1fr); } }
.pkg-option { min-width: 0; }

.code-badge { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.06em; color: var(--green); }
.success-hero { text-align: center; max-width: 640px; margin: 0 auto; }
.success-hero .code-big { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 14px 0 6px; display: block; }
.success-hero .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 18px; }

/* ---------- moje zamówienia ---------- */
.order-list { display: grid; gap: 16px; }
.order-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
.order-card .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.order-card .meta b { color: var(--ink); font-weight: 600; }
.order-card .side { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.order-card .amount { font-size: 1.3rem; font-weight: 700; }
.order-card .next { grid-column: 1 / -1; }
.bank { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; align-items: center; font-size: 0.92rem; margin-top: 10px; }
.bank dt { color: var(--muted); }
.bank dd { margin: 0; font-weight: 600; word-break: break-word; }
.copy-btn { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 4px 10px; font-size: 0.78rem; font-weight: 600; cursor: pointer; color: var(--green); }
.copy-btn:hover { border-color: var(--green); }
@media (max-width: 640px) {
  .order-card { grid-template-columns: 1fr; }
  .order-card .side { text-align: left; align-items: flex-start; }
}

/* ---------- panel admina ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; }
.stat b { display: block; font-size: 1.6rem; color: var(--green); line-height: 1.1; }
.stat span { font-size: 0.82rem; color: var(--muted); }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .input { max-width: 300px; padding: 10px 14px; }
.admin-tabs { margin-bottom: 24px; }
.adm-list { display: grid; gap: 12px; }
.adm-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; display: grid; grid-template-columns: 200px 1fr 220px 300px; gap: 16px; align-items: center; }
.adm-row.is-pending { border-left: 4px solid #e2b04a; }
.adm-row .who { font-size: 0.85rem; color: var(--muted); word-break: break-all; }
.adm-row .ev { font-size: 0.9rem; }
.adm-row .ev b { font-weight: 600; }
.adm-row .money { text-align: right; }
.adm-row .money b { font-size: 1.1rem; display: block; }
.adm-row .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.adm-row .note { grid-column: 1 / -1; font-size: 0.84rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; }
@media (max-width: 1100px) {
  .adm-row { grid-template-columns: 1fr auto; }
  .adm-row .ev { grid-column: 1 / -1; }
  .adm-row .actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.menu-wrap { position: relative; }
.adm-row.menu-open, .adm-row:has(.menu-pop) { position: relative; z-index: 40; }
.menu-pop { position: absolute; right: 0; top: 44px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 6px; z-index: 20; min-width: 200px; }
.menu-pop button { color: var(--ink); display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.menu-pop button:hover { background: var(--green-tint); }
.menu-pop button.danger { color: var(--danger); }
.price-table { display: grid; gap: 10px; max-width: 520px; }
.price-row { display: grid; grid-template-columns: 120px 1fr 120px; gap: 14px; align-items: center; }
.price-row .input { padding: 10px 12px; }
/* ---------- okno dialogowe i komunikaty ---------- */
dialog.modal {
  border: 0; border-radius: var(--radius-lg); padding: 0; width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 40px);
  box-shadow: 0 30px 80px rgba(26, 46, 43, 0.3); color: var(--ink); background: var(--card);
}
dialog.modal::backdrop { background: var(--modal-backdrop); backdrop-filter: blur(3px); }
.modal-inner { padding: 28px; display: grid; gap: 18px; }
.modal-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.modal-head h2 { font-size: 1.35rem; }
.modal-close { border: 0; background: var(--cream); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; flex: none; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 0.8rem; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth-switch { text-align: center; font-size: 0.88rem; color: var(--muted); }
.auth-switch button { border: 0; background: none; color: var(--green); font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.toast-root { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); }
.toast { background: var(--toast-bg); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 0.9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.toast.ok { background: var(--fill); }
.toast.error { background: var(--danger-fill); }
/* ruch: zawsze (CONFIG.motion) */ .toast { animation: toast-in 0.35s var(--ease); }
  @keyframes toast-in { from { opacity: 0; translate: 0 10px; } }
/* ruch ograniczony (CONFIG.motion = "system") */ :root[data-motion="reduce"] * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
/* ---------- darmowe winietki i zwiększanie pakietu ---------- */
.free-tag { display: inline-block; background: var(--green-tint); color: var(--green); font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.price-card .free-tag { margin: -8px auto 12px; font-size: 0.78rem; padding: 4px 12px; }
.pkg-option .free-tag { margin-top: 4px; font-size: 0.66rem; padding: 1px 7px; }
.pkg-option input:checked + span .free-tag { background: rgba(255, 255, 255, 0.18); color: #fff; }
.upgrade-req { grid-column: 1 / -1; display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; background: var(--amber-bg); border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; color: var(--warn-ink); }
.upgrade-req .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.counter small { font-weight: 600; color: var(--green); margin-left: 4px; }
/* =========================================================
   Książeczki na stół, kody rabatowe, zgody, wygaszenie, konto
   ========================================================= */
.sunset-banner { background: #3a1d0e; color: #fff4e3; font-size: 0.88rem; }
.sunset-banner .container { display: flex; gap: 12px; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.sunset-banner svg { flex: none; color: #ffcf8a; }
.sunset-banner p { margin: 0; }
.sunset-banner .countdown { color: #ffcf8a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.linklike { border: 0; background: none; padding: 0; color: var(--green); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
mark { background: var(--mark-bg); color: inherit; padding: 0 3px; border-radius: 3px; }

/* banderola „Produkty cyfrowe” */
.digital-ribbon { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--green); color: var(--green); border-radius: 999px; padding: 8px 18px 8px 12px; font-size: 0.92rem; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(0, 77, 64, 0.08); }
.digital-ribbon svg { flex: none; }
.digital-ribbon b { font-weight: 800; }
.digital-ribbon.compact { font-size: 0.8rem; padding: 5px 14px 5px 9px; margin: 4px 0 14px; box-shadow: none; }
.digital-ribbon.compact svg { width: 18px; height: 18px; }
.disclaimer { font-size: 0.84rem; color: var(--warn-ink); background: var(--amber-bg); border-radius: 12px; padding: 12px 14px; }
.order-summary .digital-ribbon { display: flex; }

/* strona startowa */
.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps-3 { grid-template-columns: 1fr; } }
.eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--umber-ink); margin-bottom: 8px; }


.promo-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; background: var(--amber-bg-2); border: 1px solid var(--amber-line); color: var(--warn-ink); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 16px; }
.promo-banner .small { flex-basis: 100%; }
.price-card { position: relative; }
.price-card .price { white-space: nowrap; }
.price-card .price-old { font-size: 0.82rem; color: var(--danger); font-weight: 700; }
.price-card .price-old s { color: var(--muted-2); font-weight: 500; }
.price-card .price-sm { font-size: 1.15rem; }
.price-card .qty-range { font-size: 1.6rem; }
.omnibus { font-size: 0.72rem; color: var(--muted-2); line-height: 1.35; }
.tag-start { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--umber); color: #fff; font-size: 0.68rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.addon-card { margin-top: 16px; display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; background: var(--cream); border: 1px solid var(--line-warm); border-radius: var(--radius-lg); padding: 20px 24px; }
.addon-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.addon-price { display: grid; text-align: right; }
.addon-price b { font-size: 1.6rem; color: var(--green); line-height: 1.1; }
.addon-price span { font-size: 0.82rem; color: var(--muted); }
.price-details { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.price-details summary { padding: 16px 20px; cursor: pointer; font-weight: 700; color: var(--green); }
.price-details .table-wrap { padding: 0 20px 18px; display: grid; gap: 18px; }
.table-wrap { overflow-x: auto; }
.price-table-full, .legal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.price-table-full caption { text-align: left; font-weight: 700; color: var(--ink); padding: 6px 0 8px; }
.price-table-full th, .price-table-full td, .legal-table th, .legal-table td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.price-table-full th, .legal-table th { background: var(--cream); font-size: 0.8rem; color: var(--muted); }

/* zamówienie */
.addon-field { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; display: grid; gap: 12px; }
.addon-field legend { padding: 0 6px; }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-grid .suggest { grid-column: 1 / -1; font-size: 0.88rem; background: var(--card-soft); border-radius: 10px; padding: 10px 12px; }
@media (max-width: 560px) { .bk-grid { grid-template-columns: 1fr; } }
.promo-row { display: flex; gap: 8px; }
.promo-row .input { max-width: 320px; }
.ok-text { color: var(--ok); font-weight: 600; }
.consents { display: grid; gap: 12px; }
.req { color: var(--danger); margin-right: 2px; }
.input-inline { display: inline-block; width: 90px; padding: 4px 8px; margin: 0 4px; }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; }
.total b { font-size: 1.4rem; color: var(--green); }

/* panel admina: zamówienia, kody, system */
.badge-dj { display: inline-block; margin-top: 6px; background: var(--amber-bg-2); color: var(--umber-ink); font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.adm-row .money .tiny { display: block; }
.promo-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; margin-bottom: 18px; }
.promo-form .input { padding: 10px 12px; }
.promo-form .check { align-self: center; }
.promo-list { display: grid; gap: 10px; }
.promo-item { display: grid; grid-template-columns: minmax(220px, 1.2fr) 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.promo-item .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.promo-item .omni-table, .promo-item .promo-used { grid-column: 1 / -1; }
.omni-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.omni-grid span { background: var(--card-soft); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 0.8rem; display: grid; }
.omni-grid small { color: var(--muted-2); font-size: 0.7rem; }
@media (max-width: 820px) { .promo-item { grid-template-columns: 1fr; } .promo-item .actions { justify-content: flex-start; } }
.switch { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.switch input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--switch-off); position: relative; cursor: pointer; transition: background 0.2s; flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--ease); }
.switch input:checked { background: var(--fill); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch-lg { font-size: 1rem; }
.switch-lg input { width: 48px; height: 28px; }
.switch-lg input::after { width: 22px; height: 22px; }
.switch-lg input:checked::after { transform: translateX(20px); }
.hist { display: grid; gap: 6px; font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
.sunset-banner-demo { background: #3a1d0e; color: #fff4e3; border-radius: 12px; padding: 12px 14px; font-size: 0.88rem; }
.danger-zone { border-color: var(--danger-line); }
.danger-zone h3 { color: var(--danger); }

/* konto, regulamin, stopka */
.container.narrow { max-width: 860px; }
.legal h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: 8px; }
.legal h2 { font-size: 1.15rem; margin: 30px 0 10px; }
.legal ol, .legal ul { padding-left: 22px; display: grid; gap: 8px; margin: 0; color: var(--ink); font-size: 0.95rem; }
.legal ul ul { margin-top: 6px; }
.legal p { font-size: 0.95rem; }
.legal-table { margin-top: 6px; }
.closed-panel p { max-width: 34em; margin-left: auto; margin-right: auto; }
.footer-promo { background: var(--card); border-top: 1px solid var(--line); }
.promo-strip + .footer-promo { margin-top: 0; }
.footer-promo:first-child { margin-top: 40px; }
.footer-promo-inner { display: flex; align-items: center; gap: 14px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.footer-promo-inner > div { flex: 1; min-width: 220px; display: grid; font-size: 0.9rem; }
.footer-promo-inner b { color: var(--green); }
.footer-promo-inner span { color: var(--muted); }
.footer-promo .promo-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--umber); }
.footer-promo .promo-icon svg { width: 19px; height: 19px; }
/* faktura: przełącznik w formularzu i znacznik w panelu admina */
.buyer-field .choice-row { margin-bottom: 2px; }
.ksef-note { background: var(--card-soft); border-radius: 10px; padding: 10px 12px; color: var(--ink); }
.inv-chip { display: inline-block; margin-top: 6px; border: 1px solid var(--line); background: var(--card); color: var(--green); font-weight: 700; font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.inv-chip.todo { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-line); }
.inv-chip.done { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
/* ---------- dane do płatności: przelew ALBO BLIK – zawsze jedno pod drugim ---------- */
.pay-box { min-width: 0; }
.pay-sum { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: flex-end; margin-top: 12px; }
.pay-sum > div { display: grid; gap: 2px; min-width: 0; }
.pay-label { font-size: 0.78rem; color: var(--muted); }
.pay-value { font-weight: 700; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pay-copy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-methods { display: grid; gap: 10px; margin-top: 14px; }
.pay-method { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); display: grid; gap: 10px; min-width: 0; }
.pay-method h5 { margin: 0; font-size: 0.82rem; color: var(--green); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }
.pay-method h5 .num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fill); color: var(--on-fill); font-size: 0.75rem; letter-spacing: 0; }
.pay-field { display: grid; gap: 2px; min-width: 0; }
.pay-field .pay-value { overflow-wrap: anywhere; word-break: normal; }
.pay-or { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay-hint { font-size: 0.8rem; color: var(--muted); margin: 0; }
/* =========================================================
   TRYB CIEMNY – według ustawień systemu albo przełącznika w nagłówku (data-theme).
   Podglądy winietek i książeczek zostają białe – to papier.
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --green: #7fd3bf;
    --green-dark: #a6e3d4;
    --green-tint: rgba(127, 211, 191, 0.12);
    --cream: #1d2a27;
    --umber: #4a3210;
    --ink: #e4ecea;
    --muted: #a7b6b3;
    --muted-2: #8b9c99;
    --line: #2b3936;
    --card: #15201e;
    --card-soft: #192624;
    --amber: #f2c46b;
    --amber-bg: #2d2414;
    --ok: #7fd9b0;
    --ok-bg: #12302a;
    --danger: #ff97a8;
    --danger-bg: #3a1a21;
    --shadow-card: 0 15px 30px rgba(0, 0, 0, 0.35);
    --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.55);
    --bg: #0e1614;
    --input-bg: #101a18;
    --line-strong: #3a4a46;
    --line-soft: #22302d;
    --line-warm: #33413d;
    --fill: #1f7a69;
    --fill-hover: #2a9a85;
    --on-fill: #ffffff;
    --umber-ink: #e9c58c;
    --footer-bg: #0a2b25;
    --warn-ink: #f3dcae;
    --ok-ink: #c2efdd;
    --err-ink: #ffc4ce;
    --danger-line: #5c2a33;
    --danger-fill: #b3203d;
    --amber-bg-2: #2d2414;
    --amber-line: #5a4520;
    --neutral-bg: #252f2d;
    --neutral-ink: #a9b3b0;
    --glass: rgba(14, 22, 20, 0.86);
    --glass-strong: rgba(14, 22, 20, 0.97);
    --glass-card: rgba(21, 32, 30, 0.88);
    --glass-chip: rgba(21, 32, 30, 0.92);
    --cloth-a: #1e2a28;
    --cloth-b: #131c1a;
    --cloth-fade: rgba(19, 28, 26, 0);
    --focus: rgba(127, 211, 191, 0.5);
    --focus-soft: rgba(127, 211, 191, 0.18);
    --switch-off: #3a4a46;
    --pip-off: rgba(228, 236, 234, 0.16);
    --empty-bg: #1b2422;
    --empty-line: #3a4643;
    --spent-bg: #28312f;
    --spent-ink: #7f8d8a;
    --toast-bg: #2c433e;
    --mark-bg: rgba(255, 214, 0, 0.28);
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    --bg-photo-opacity: 0.1;
    --g-bg: #131314;
    --g-ink: #e3e3e3;
    --g-line: #8e918f;
    --g-hover-bg: #1f1f20;
    --g-hover-line: #a8aba9;
  }
  :root:not([data-theme="light"]) #brand-logo { display: none; }
  :root:not([data-theme="light"]) #brand-logo-dark { display: block; }
  :root:not([data-theme="light"]) .brand-app { color: #CFE0D8; }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --green: #7fd3bf;
  --green-dark: #a6e3d4;
  --green-tint: rgba(127, 211, 191, 0.12);
  --cream: #1d2a27;
  --umber: #4a3210;
  --ink: #e4ecea;
  --muted: #a7b6b3;
  --muted-2: #8b9c99;
  --line: #2b3936;
  --card: #15201e;
  --card-soft: #192624;
  --amber: #f2c46b;
  --amber-bg: #2d2414;
  --ok: #7fd9b0;
  --ok-bg: #12302a;
  --danger: #ff97a8;
  --danger-bg: #3a1a21;
  --shadow-card: 0 15px 30px rgba(0, 0, 0, 0.35);
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.55);
  --bg: #0e1614;
  --input-bg: #101a18;
  --line-strong: #3a4a46;
  --line-soft: #22302d;
  --line-warm: #33413d;
  --fill: #1f7a69;
  --fill-hover: #2a9a85;
  --on-fill: #ffffff;
  --umber-ink: #e9c58c;
  --footer-bg: #0a2b25;
  --warn-ink: #f3dcae;
  --ok-ink: #c2efdd;
  --err-ink: #ffc4ce;
  --danger-line: #5c2a33;
  --danger-fill: #b3203d;
  --amber-bg-2: #2d2414;
  --amber-line: #5a4520;
  --neutral-bg: #252f2d;
  --neutral-ink: #a9b3b0;
  --glass: rgba(14, 22, 20, 0.86);
  --glass-strong: rgba(14, 22, 20, 0.97);
  --glass-card: rgba(21, 32, 30, 0.88);
  --glass-chip: rgba(21, 32, 30, 0.92);
  --cloth-a: #1e2a28;
  --cloth-b: #131c1a;
  --cloth-fade: rgba(19, 28, 26, 0);
  --focus: rgba(127, 211, 191, 0.5);
  --focus-soft: rgba(127, 211, 191, 0.18);
  --switch-off: #3a4a46;
  --pip-off: rgba(228, 236, 234, 0.16);
  --empty-bg: #1b2422;
  --empty-line: #3a4643;
  --spent-bg: #28312f;
  --spent-ink: #7f8d8a;
  --toast-bg: #2c433e;
  --mark-bg: rgba(255, 214, 0, 0.28);
  --modal-backdrop: rgba(0, 0, 0, 0.6);
  --bg-photo-opacity: 0.1;
  --g-bg: #131314;
  --g-ink: #e3e3e3;
  --g-line: #8e918f;
  --g-hover-bg: #1f1f20;
  --g-hover-line: #a8aba9;
}
:root[data-theme="dark"] #brand-logo { display: none; }
:root[data-theme="dark"] #brand-logo-dark { display: block; }
:root[data-theme="dark"] .brand-app { color: #CFE0D8; }

/* przełącznik motywu w nagłówku */
.theme-toggle { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.theme-toggle:hover { border-color: var(--green); color: var(--green); }
.theme-toggle svg { width: 19px; height: 19px; }
@media (max-width: 820px) { .theme-toggle { width: 44px; height: 44px; border-radius: 12px; } }

/* ---------- admin: dane do faktury w wierszu, szczegóły zamówienia ---------- */
button.code-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
button.code-link:hover { text-decoration-style: solid; }
.buyer-box { display: grid; gap: 1px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 0.8rem; color: var(--ink); word-break: break-word; }
.buyer-box .tiny { color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.buyer-box.is-company { border-color: var(--amber-line); }
.details-list { grid-template-columns: minmax(150px, auto) 1fr; align-items: start; }
.details-list dd { font-weight: 500; white-space: pre-line; }
@media (max-width: 560px) { .details-list { grid-template-columns: 1fr; gap: 2px; } .details-list dd { margin-bottom: 8px; } }
.pkg-option small.pkg-per { font-size: 0.68rem; opacity: 0.85; text-align: center; line-height: 1.25; margin-top: 2px; }

/* =========================================================
   GALERIA ONLINE – nowe elementy
   ========================================================= */
.warn-text { color: var(--amber); font-weight: 600; }
.ok-text svg, .warn-text svg { width: 16px; height: 16px; vertical-align: -3px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }
.btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.icon-btn svg { width: 18px; height: 18px; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; background: var(--cream); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.sunset-banner svg { width: 20px; height: 20px; }

/* ---------- baner „masz jeszcze X dni na pobranie” ---------- */
.dl-banner { background: var(--ok-bg); color: var(--ok-ink); font-size: 0.9rem; }
.dl-banner .container, .dl-banner.big > div { display: flex; gap: 12px; align-items: center; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.dl-banner svg { width: 20px; height: 20px; flex: none; }
.dl-banner p { margin: 0; flex: 1; min-width: 220px; }
.dl-banner a:not(.btn) { color: inherit; font-weight: 700; }
.dl-banner .countdown { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-banner.before { background: var(--cream); color: var(--ink); }
.dl-banner.urgent { background: var(--amber-bg); color: var(--warn-ink); }
.dl-banner.over { background: var(--neutral-bg); color: var(--neutral-ink); }
.dl-banner.big { border-radius: var(--radius-md); margin: 18px 0; }
.dl-banner.big > div { padding: 14px 18px; }
.dl-banner.big .btn { margin-left: auto; }
.dl-inline { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; background: var(--ok-bg); color: var(--ok-ink); border-radius: 12px; padding: 12px 14px; }
.dl-inline.before { background: var(--cream); color: var(--ink); }
.dl-inline.over { background: var(--neutral-bg); color: var(--neutral-ink); }
.dl-inline svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.dl-inline p { margin: 0; }

/* ---------- strona startowa ---------- */
.hero-stage { position: relative; min-height: 520px; display: grid; place-items: center; }
.phone { width: 270px; aspect-ratio: 9 / 18.5; border-radius: 38px; background: #10201d; padding: 10px; box-shadow: 0 30px 60px rgba(0, 40, 34, 0.28), inset 0 0 0 2px #2b3c38; position: relative; z-index: 1; }
.phone.small { width: 230px; }
.phone-screen { --ph-ov: 0.5; position: relative; height: 100%; border-radius: 30px; overflow: hidden; padding: 34px 16px 16px; display: flex; flex-direction: column; gap: 12px; color: #fff;
  background: linear-gradient(180deg, rgba(var(--t-rgb, 8, 22, 19), calc(var(--ph-ov) * 0.55)), rgba(var(--t-rgb, 8, 22, 19), calc(var(--ph-ov) + 0.2))), var(--ph-bg, none) center / cover, linear-gradient(160deg, var(--t-mid, #0b5447), var(--t-dark, #00382f)); }
.phone-screen.no-photo { background: linear-gradient(160deg, var(--t-mid, #0b5447), var(--t-dark, #00382f)); }
.ph-top { text-align: center; display: grid; gap: 4px; margin-top: 18px; }
.ph-eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.ph-names { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.9rem; line-height: 1.05; }
.ph-sub { font-size: 0.66rem; opacity: 0.9; }
.ph-btn { margin-top: auto; background: var(--t-btn, #fff); color: var(--t-ink, #004d40); font-weight: 800; font-size: 0.78rem; border-radius: 999px; padding: 11px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.ph-btn svg { width: 16px; height: 16px; }
.ph-count { font-size: 0.62rem; text-align: center; opacity: 0.92; }
.ph-count b { font-size: 0.75rem; margin: 0 3px; }
.ph-mine { background: rgba(255, 255, 255, 0.95); color: var(--ink); border-radius: 14px; padding: 8px; font-size: 0.6rem; font-weight: 700; }
.ph-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; }
.ph-grid i, .orbit-tile i { display: block; aspect-ratio: 1; border-radius: 6px; }
.qr-float { position: absolute; right: 0; bottom: 70px; z-index: 3; background: var(--card); color: var(--ink); border-radius: 18px; padding: 14px; width: 170px; box-shadow: var(--shadow-card), 0 2px 6px rgba(0, 0, 0, 0.08); display: grid; gap: 4px; text-align: center; transform: rotate(4deg); }
.qr-float-code { background: #fff; border-radius: 8px; padding: 4px; line-height: 0; }
.qr-float b { font-size: 0.78rem; color: var(--green); margin-top: 6px; }
.qr-float span { font-size: 0.68rem; color: var(--muted); }
/* zdjęcia krążą wokół telefonu po elipsie (offset-path); z tyłu – mniejsze i za telefonem, z przodu – większe */
.hero-orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit-tile { position: absolute; top: 0; left: 0; width: 76px; z-index: 2; border: 4px solid #fff; border-radius: 12px; box-shadow: var(--shadow-paper); background: #fff; }
.orbit-tile i { border-radius: 8px; display: grid; place-items: center; color: #fff; }
.orbit-tile i svg { width: 26px; height: 26px; }
.orbit-tile:nth-child(n + 4) { display: none; }
.orbit-tile:nth-child(1) { left: 4%; top: 60px; transform: rotate(-8deg); }
.orbit-tile:nth-child(2) { left: 0; top: auto; bottom: 120px; transform: rotate(6deg); }
.orbit-tile:nth-child(3) { left: auto; right: 6%; top: 40px; transform: rotate(7deg); }
@supports (offset-path: ellipse(40% 40% at 50% 50%)) {
  /* ruch: zawsze (CONFIG.motion) */ .orbit-tile, .orbit-tile:nth-child(n) { display: block; inset: 0 auto auto 0; transform: none; offset-path: ellipse(47% 44% at 50% 50%); offset-rotate: 0deg; animation: orbit 36s linear infinite, orbit-depth 36s linear infinite; animation-delay: var(--d), var(--d); }
    @keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
    @media (max-width: 520px) { .orbit-tile, .orbit-tile:nth-child(n) { offset-path: ellipse(37% 45% at 50% 50%); } }
    /* ścieżka elipsy zaczyna się z prawej i biegnie w dół: 0–50% = dolna połowa (przed telefonem), 50–100% = górna (za telefonem) */
    @keyframes orbit-depth {
      0% { z-index: 2; scale: 1; rotate: 4deg; opacity: 1; }
      25% { z-index: 2; scale: 1.12; rotate: -3deg; }
      49% { z-index: 2; scale: 1; }
      51% { z-index: 0; scale: 0.96; }
      75% { z-index: 0; scale: 0.72; rotate: 6deg; opacity: 0.85; }
      99% { z-index: 0; scale: 0.96; }
      100% { z-index: 2; scale: 1; rotate: 4deg; opacity: 1; }
    }
}
/* ruch: zawsze (CONFIG.motion) */ .qr-float { animation: floaty 6s ease-in-out infinite; animation-delay: -4s; }
  @keyframes floaty { 50% { translate: 0 -10px; } }
@media (max-width: 900px) { .hero-stage { min-height: 500px; } }
@media (max-width: 520px) { .qr-float { width: 140px; bottom: 30px; } .orbit-tile { width: 60px; } }
.hero-facts svg { width: 18px; height: 18px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.feature h3 { font-size: 1.05rem; color: var(--ink); margin: 14px 0 6px; }
.feature p { font-size: 0.9rem; color: var(--muted); }
.f-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-tint); color: var(--green); display: grid; place-items: center; }
.f-icon svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

.bingo-promo { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; }
@media (max-width: 900px) { .bingo-promo { grid-template-columns: 1fr; } }
.bingo-sample { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-card); }
.bingo-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; }
.bingo-head b { color: var(--green); font-size: 1.1rem; }
.bingo-head span { font-size: 0.8rem; color: var(--muted); }
.bingo-grid { --n: 3; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; }
.bingo-cell { position: relative; aspect-ratio: 1; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--card-soft); display: grid; place-items: center; text-align: center; padding: 8px; overflow: hidden; font: inherit; color: var(--ink); }
.bingo-cell span { position: relative; z-index: 1; font-size: 0.74rem; font-weight: 700; line-height: 1.25; }
.bingo-cell > i, .bingo-cell > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bingo-cell.done { border: 0; color: #fff; }
.bingo-cell.done::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.55)); }
.bingo-cell.done span { align-self: end; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); z-index: 2; }
.bingo-cell .b-ok, .bingo-cell .b-cam { position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: #fff; }
.bingo-cell .b-cam { background: var(--card); color: var(--green); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.bingo-cell .b-ok svg, .bingo-cell .b-cam svg { width: 14px; height: 14px; }
.bingo-cell.line { box-shadow: 0 0 0 3px #e2b04a; }
.bingo-cell.busy { opacity: 0.6; }
button.bingo-cell { cursor: pointer; }
button.bingo-cell:disabled { cursor: not-allowed; opacity: 0.55; }

.pricing.pricing-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .pricing.pricing-4 { grid-template-columns: 1fr 1fr; } }
.price-card.is-popular { border-color: var(--green); box-shadow: var(--shadow-card); }
.price-card .qty { font-size: 2.6rem; }
.price-includes { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 0.88rem; }
.price-includes li { display: flex; gap: 8px; align-items: flex-start; }
.price-includes svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 2px; }
@media (max-width: 900px) { .price-includes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .price-includes { grid-template-columns: 1fr; } }
.pkg-options.pkg-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .pkg-options.pkg-4 { grid-template-columns: repeat(2, 1fr); } }
.sum-includes { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-size: 0.84rem; color: var(--muted); }
.sum-includes li { display: flex; gap: 8px; align-items: center; }
.sum-includes svg { width: 17px; height: 17px; color: var(--green); flex: none; }
.promo-icon svg { width: 26px; height: 26px; }

/* ---------- zapełnienie galerii ---------- */
.usage { display: grid; gap: 6px; min-width: 0; }
.usage-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.usage-row b { font-size: 1.05rem; color: var(--green); }
.usage-bar { height: 8px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.usage-bar i { display: block; height: 100%; background: var(--fill); border-radius: 999px; transition: width 0.4s var(--ease); }
.usage.high .usage-bar i { background: #d9a03c; }
.usage.full .usage-bar i { background: var(--danger-fill); }
.link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; }
.link-row code { flex: 1; min-width: 200px; }
.link-row.big code { font-size: 0.9rem; padding: 10px 12px; }

/* ---------- panel galerii ---------- */
.g-head { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.g-title h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; }
.g-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.g-note { flex-basis: 100%; }
.g-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.g-stats .stat { display: grid; align-content: center; flex: 1 1 110px; }
.g-stats .stat-usage { flex: 2 1 240px; }
.g-stats .stat-usage { gap: 6px; }
@media (max-width: 900px) { .g-stats { grid-template-columns: 1fr 1fr; } .g-stats .stat-usage { grid-column: 1 / -1; } }
.g-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs a { display: inline-flex; gap: 8px; align-items: center; padding: 12px 14px; font-weight: 700; font-size: 0.88rem; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.g-tabs a svg { width: 18px; height: 18px; }
.g-tabs a[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.g-tabs a:hover { color: var(--green); }
.m-toolbar select.input { width: auto; padding: 9px 12px; font-size: 0.86rem; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 560px) { .m-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .m-who { display: none; } }
.m-tile { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--cream); cursor: pointer; }
.m-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.m-tile:hover img { transform: scale(1.04); }
.m-ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); }
.m-ph svg { width: 30px; height: 30px; }
.m-ph small { font-size: 0.7rem; font-weight: 700; }
.m-badge { position: absolute; left: 6px; bottom: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 3px 8px 3px 6px; display: inline-flex; gap: 3px; align-items: center; }
.m-badge svg { width: 12px; height: 12px; }
.m-fav, .m-bingo { position: absolute; top: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.m-fav { right: 6px; background: #fff; color: #d9a03c; }
.m-bingo { left: 6px; background: var(--fill); color: #fff; }
.m-fav svg, .m-bingo svg { width: 15px; height: 15px; }
.m-who { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 8px 6px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6)); color: #fff; font-size: 0.7rem; font-weight: 600; text-align: left; opacity: 0; transition: opacity 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tile:hover .m-who, .m-tile:focus-visible .m-who { opacity: 1; }
.m-tile.video .m-who { padding-bottom: 28px; }
.m-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); }
.m-empty svg { width: 40px; height: 40px; color: var(--green); }
.m-empty h3 { margin: 10px 0 6px; }

/* podgląd (lightbox) */
dialog.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(6, 12, 11, 0.96); color: #fff; display: grid; grid-template-rows: 1fr auto; }
dialog.lightbox:not([open]) { display: none; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.8); }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 16px 64px; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 4px; display: block; }
.lb-demo { display: grid; gap: 8px; justify-items: center; }
.lb-demo img { max-height: 60vh; }
.lb-nav, .lb-close { position: absolute; border: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-nav:hover, .lb-close:hover { background: rgba(255, 255, 255, 0.24); }
.lb-nav:disabled { opacity: 0.25; cursor: default; }
.lb-nav svg, .lb-close svg { width: 22px; height: 22px; }
.lb-nav.prev { left: 10px; top: 50%; translate: 0 -50%; }
.lb-nav.next { right: 10px; top: 50%; translate: 0 -50%; }
.lb-close { right: 12px; top: 12px; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.45); flex-wrap: wrap; }
.lb-info { display: grid; gap: 2px; font-size: 0.85rem; }
.lb-info b { font-size: 1rem; }
.lb-info span { opacity: 0.85; }
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-actions .btn-ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.lb-actions .btn-danger { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 120, 140, 0.5); color: #ffb3c0; }
@media (max-width: 640px) { .lb-stage { padding: 56px 8px 8px; } .lb-nav { top: auto !important; bottom: 10px; translate: none !important; } .lb-actions .btn { padding: 8px 12px; font-size: 0.8rem; } }

/* udostępnianie */
.share-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .share-grid { grid-template-columns: 1fr; } }
.share-qr { display: grid; gap: 14px; position: sticky; top: 96px; }
@media (max-width: 900px) { .share-qr { position: static; } }
.qr-box { background: #fff; border-radius: 14px; padding: 10px; line-height: 0; border: 1px solid var(--line); }
.qr-box svg { width: 100%; height: auto; }
.card-preview { min-height: 120px; display: grid; place-items: center; background: var(--cream); border-radius: 12px; padding: 12px; }
.card-preview img { max-height: 420px; width: auto; border-radius: 6px; box-shadow: var(--shadow-paper); }

/* ustawienia */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.settings-preview { position: sticky; top: 96px; display: grid; gap: 10px; justify-items: center; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } .settings-preview { position: static; } }
.cover-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
/* telefon: węższa miniatura, a przyciski obok niej mogą się zawijać – bez przewijania strony w bok */
@media (max-width: 520px) { .cover-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .cover-row .btn { white-space: normal; text-align: left; } }
.cover-thumb { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--cream); display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cover-thumb svg { width: 34px; height: 34px; }

/* bingo – panel organizatora */
.bingo-admin { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .bingo-admin { grid-template-columns: 1fr; } }
.task-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .task-list { grid-template-columns: 1fr; } }
.task-row { display: grid; grid-template-columns: 28px 1fr; gap: 6px; align-items: center; }
.task-row .input { padding: 9px 12px; font-size: 0.88rem; }
.task-n { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.sugg { display: grid; gap: 8px; margin-top: 10px; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--ink); }
.chip-btn:hover { border-color: var(--green); color: var(--green); }
.board { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.board > li { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.board > li.winner { border-color: #e2b04a; background: var(--amber-bg-2); }
.board-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.rank { width: 32px; height: 32px; border-radius: 50%; background: var(--fill); color: #fff; display: grid; place-items: center; font-weight: 800; }
.board-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.board-photos button { width: 46px; height: 46px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: var(--cream); cursor: pointer; }
.board-photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .board-head { grid-template-columns: auto 1fr; } }

/* goście */
.guest-list { display: grid; gap: 8px; }
.guest-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.guest-item.is-blocked { background: var(--danger-bg); border-color: var(--danger-line); }
.g-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; flex: none; }
.g-avatar svg { width: 20px; height: 20px; }
.g-n { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.g-n b { color: var(--ink); font-size: 1.05rem; }
@media (max-width: 640px) { .guest-item { grid-template-columns: auto 1fr; } .guest-item .row-actions, .guest-item .g-n { grid-column: 2; } }

/* ZIP */
.zip-parts { display: grid; gap: 10px; margin-top: 12px; }
.zip-part { display: grid; grid-template-columns: 1fr minmax(120px, 220px) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.zip-part > div:first-child { display: grid; }
.zip-part .zip-status { grid-column: 1 / -1; margin-top: -6px; }
.zip-part .zip-status:empty { display: none; }
@media (max-width: 640px) { .zip-part { grid-template-columns: 1fr; } }
/* limit pobrań ZIP i „tylko nowe pliki” */
.dl-meter { margin-top: 12px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--green-tint); }
.dl-meter-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.dl-meter .progress { height: 6px; }
.dl-meter.warn .progress i { background: var(--amber); }
.dl-meter.full .progress i { background: var(--danger, #b42318); }
.dl-limit, .dl-new { margin-top: 12px; }
.dl-new { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.dl-new .btn { flex: none; }
.zip-part button[disabled] { opacity: 0.55; }
.progress { height: 8px; background: var(--cream); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--fill); transition: width 0.25s; }

/* =========================================================
   STRONA GOŚCIA (z kodu QR)
   ========================================================= */
body[data-mode="guest"] .topbar, body[data-mode="guest"] .site-footer, body[data-mode="guest"] .bg-photo,
body[data-mode="guest"] #sunset-banner, body[data-mode="guest"] #dl-banner,
body[data-mode="show"] .topbar, body[data-mode="show"] .site-footer, body[data-mode="show"] .bg-photo,
body[data-mode="show"] #sunset-banner, body[data-mode="show"] #dl-banner, body[data-mode="show"] #demo-banner { display: none !important; }
body[data-mode="guest"] { background: var(--t-dark, #0b2a25); }
body[data-mode="www"] .topbar, body[data-mode="www"] .site-footer, body[data-mode="www"] .bg-photo,
body[data-mode="www"] #sunset-banner, body[data-mode="www"] #dl-banner, body[data-mode="www"] #promo-strip, body[data-mode="www"] #footer-promo { display: none !important; }
body[data-mode="www"] { background: var(--t-dark, #0b2a25); }
.guest-bg { --g-ov: 0.45; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--t-rgb, 6, 20, 17), calc(var(--g-ov) * 0.5)) 0%, rgba(var(--t-rgb, 6, 20, 17), calc(var(--g-ov) + 0.15)) 55%, rgba(var(--t-rgb, 6, 20, 17), calc(var(--g-ov) + 0.35)) 100%), var(--g-bg, none) center / cover no-repeat, linear-gradient(160deg, #0b5447, #00382f); }
.guest-bg.no-photo { background: radial-gradient(ellipse at 50% 0%, var(--t-mid, #11665a) 0%, var(--t-deep, #004d40) 45%, var(--t-dark, #00302a) 100%); }
.guest { padding: 0 14px 30px; }
.guest-wrap { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } /* żadna karta nie rozepchnie strony w bok */
.g-hero { text-align: center; color: #fff; padding: 44px 8px 14px; display: grid; gap: 8px; }
.g-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; font-weight: 700; }
.g-hero h1 { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.g-hero p { font-size: 0.95rem; opacity: 0.95; max-width: 30em; margin: 4px auto 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); white-space: pre-line; }
.g-card { background: var(--card); color: var(--ink); border-radius: 22px; padding: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); display: grid; gap: 12px; }
.g-msg { text-align: center; margin-top: 18vh; padding: 32px 22px; }
.g-msg-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--fill); color: #fff; display: grid; place-items: center; margin: 0 auto; }
.g-msg-icon svg { width: 28px; height: 28px; }
.g-join h2, .g-card h2 { font-size: 1.2rem; }
.g-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.9rem; }
.g-points li { display: flex; gap: 10px; align-items: flex-start; }
.g-points svg { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 1px; }
.g-pick { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.g-pick .btn { cursor: pointer; }
.g-pick-main { font-size: 1.02rem; }
/* dwa przyciski obok siebie dopiero, gdy się mieszczą (Android 412 px, duże iPhone'y 430 px – jeden pod drugim) */
@media (max-width: 480px) { .g-pick { grid-template-columns: 1fr; } }
.g-left { display: grid; gap: 6px; }
.q-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.q-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.q-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--cream); display: grid; place-items: center; color: var(--muted); }
.q-thumb img { width: 100%; height: 100%; object-fit: cover; }
.q-thumb svg { width: 20px; height: 20px; }
.q-main { min-width: 0; display: grid; gap: 4px; }
.q-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-bar { height: 6px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--fill); transition: width 0.2s; }
.q-err { font-size: 0.78rem; color: var(--danger); font-weight: 600; }
.q-state { min-width: 34px; text-align: right; color: var(--ok); }
.q-state svg { width: 20px; height: 20px; }
.q-state .icon-btn { width: 32px; height: 32px; color: var(--muted); }
.q-done .q-bar i { background: var(--ok); }
.gt-tabs { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); min-width: 0; gap: 6px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 5px; border-radius: 999px; }
.gt-tabs button { border: 0; background: none; color: #fff; font-weight: 700; font-size: 0.88rem; padding: 10px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.gt-tabs button svg { width: 18px; height: 18px; flex: none; }
.gt-tabs button[aria-selected="true"] { background: var(--card); color: var(--green); }
.g-sec-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.g-sec-head svg { width: 14px; height: 14px; vertical-align: -2px; }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--cream); }
.g-open { border: 0; padding: 0; width: 100%; height: 100%; cursor: pointer; display: block; background: none; }
.g-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-del { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.g-del svg { width: 15px; height: 15px; }
.g-empty { text-align: center; padding: 18px 6px; }
.g-me-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.g-foot { text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 0.78rem; line-height: 1.9; padding: 10px 0 20px; }
.g-foot a { color: #fff; }
.g-bingo { gap: 6px; }
.g-bingo .bingo-cell span { font-size: 0.7rem; }
.g-board h3 { font-size: 1rem; margin-bottom: 8px; }
.g-board ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.g-board li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--card-soft); font-size: 0.88rem; }
.g-board li.win { background: var(--amber-bg-2); }
.g-board li.me { outline: 2px solid var(--green); }
dialog.g-viewer .g-view-media { background: #000; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
dialog.g-viewer .g-view-media img, dialog.g-viewer .g-view-media video { max-width: 100%; max-height: 65vh; display: block; }

/* =========================================================
   POKAZ SLAJDÓW
   ========================================================= */
body[data-mode="show"] { background: #000; overflow: hidden; }
.show { position: fixed; inset: 0; background: #000; color: #fff; cursor: none; }
.show.ui { cursor: default; }
.show-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; overflow: hidden; background: center / cover no-repeat; }
.show-layer.on { opacity: 1; }
.show-blur { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(30px) brightness(0.55); }
.show-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.show-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; background: radial-gradient(ellipse at 50% 30%, #11665a, #00302a); }
.show-empty h2 { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(2.5rem, 6vw, 5rem); }
.show-caption { position: absolute; left: 24px; bottom: 22px; font-size: 1rem; background: rgba(0, 0, 0, 0.45); padding: 8px 14px; border-radius: 999px; }
.show-caption:empty { display: none; }
.show-qr { position: absolute; right: 24px; bottom: 22px; background: #fff; color: #1a2e2b; border-radius: 18px; padding: 12px; width: clamp(130px, 14vw, 200px); display: grid; gap: 4px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.show-qr-code { line-height: 0; }
.show-qr b { font-size: 0.86rem; color: #004d40; }
.show-qr span { font-size: 0.72rem; color: #4a5d5a; }
.show-bar { position: absolute; top: 16px; left: 50%; translate: -50% 0; display: flex; gap: 8px; align-items: center; background: rgba(0, 0, 0, 0.6); padding: 8px 12px; border-radius: 999px; opacity: 0; transition: opacity 0.3s; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }
.show.ui .show-bar { opacity: 1; }
.show-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.show-btn svg { width: 20px; height: 20px; }
.show-sel { background: rgba(255, 255, 255, 0.14); color: #fff; border: 0; border-radius: 999px; padding: 8px 10px; }
.show-sel option { color: #000; }
.show-chk { display: inline-flex; gap: 6px; align-items: center; font-size: 0.82rem; }
.success-hero .tick svg { width: 32px; height: 32px; }
.notice > svg, .notice div > svg { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.back svg { width: 16px; height: 16px; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: 0.92rem; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 3px; }

.cover-row > div { justify-items: start; }

/* wspólne drobiazgi (przyciski ikon, wiersze akcji, listy wyboru) */
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; color: var(--green); flex: none; }
.icon-btn:hover:not(:disabled) { border-color: var(--green); }
.icon-btn:disabled { opacity: 0.4; cursor: default; }
.fmt-list { display: grid; gap: 8px; }
.fmt { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.fmt input { accent-color: var(--green); width: 18px; height: 18px; flex: none; }
.fmt b { display: block; font-size: 0.92rem; }
.fmt small { display: block; color: var(--muted); font-size: 0.78rem; }
.fmt:has(input:checked) { border-color: var(--green); background: var(--card-soft); }
.num-row { display: flex; align-items: center; gap: 10px; }
.num-row input { width: 90px; }
.qr-dl { display: grid; gap: 8px; }
.qr-dl .btn { justify-content: center; }
.qr-link { margin: 8px 4px 2px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.4; color: #1a2e2b; text-align: center; word-break: break-all; }

/* cennik: same zdjęcia / zdjęcia + filmy, 5 pakietów */
.pricing.pricing-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .pricing.pricing-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pricing.pricing-5 { grid-template-columns: 1fr 1fr; } }
.price-mode { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; margin: 4px 0 18px; }
.price-mode .seg button { display: inline-flex; gap: 6px; align-items: center; }
.price-mode .seg svg { width: 17px; height: 17px; }
.price-mode .seg b { color: var(--umber-ink); font-size: 0.78rem; }
.mode-tag { align-self: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); background: var(--green-tint); border-radius: 999px; padding: 3px 10px; margin: -6px 0 10px; }
.mode-tag.video { color: var(--umber-ink); background: var(--amber-bg-2); }
.alt-price { font-size: 0.76rem; color: var(--muted); margin: -10px 0 14px; }
.pkg-options.pkg-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) { .pkg-options.pkg-5 { grid-template-columns: repeat(3, 1fr); } }
.video-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .video-choice { grid-template-columns: 1fr; } }
.video-choice .fmt { align-items: flex-start; }
.video-choice .fmt svg { width: 22px; height: 22px; color: var(--green); flex: none; }
.video-choice .fmt .vp { margin-left: auto; font-weight: 800; color: var(--green); white-space: nowrap; }

/* Cennik w panelu admina: same zdjęcia + wyliczona cena z filmami */
.price-table-video { max-width: 640px; }
.price-table-video .price-row { grid-template-columns: 110px 1fr 110px 120px; }
.price-table-video .vid-price { color: var(--green); font-weight: 700; }
@media (max-width: 560px) {
  .price-table-video .price-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .price-table-video .price-row.tiny { display: none; }
  .price-table-video .vid-price::before { content: "z filmami: "; font-weight: 500; color: var(--muted); font-size: 0.8rem; }
}

/* ===== Cennik: 6 pakietów (3 × 2), podpis „dla kogo”, Premium ===== */
.pricing.pricing-6 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .pricing.pricing-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pricing.pricing-6 { grid-template-columns: 1fr; } }
.price-card { position: relative; }
.price-card .for { font-size: 0.8rem; color: var(--muted); margin: -8px 0 12px; min-height: 2.4em; line-height: 1.3; }
.price-card.is-premium { border-color: var(--umber); box-shadow: var(--shadow-card); background: linear-gradient(180deg, var(--amber-bg-2), var(--card) 55%); }
.price-card.is-premium .tag-start { background: var(--green); }
.pkg-options.pkg-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .pkg-options.pkg-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .pkg-options.pkg-6 { grid-template-columns: repeat(2, 1fr); } }

/* ===== Wyróżniki pod hero ===== */
.highlights-sec { padding-top: 8px; padding-bottom: 8px; }
.highlights { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.hl { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 16px; display: grid; align-content: start; gap: 4px; }
.hl > b { font-size: 1.9rem; font-weight: 800; color: var(--green); line-height: 1.05; min-height: 36px; display: flex; align-items: center; }
.hl > b svg { width: 32px; height: 32px; }
.hl .hl-t { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.hl p { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.hl-pay > b .p24-badge { height: 34px; padding: 0 9px; }
.hl-pay > b .p24-badge img { height: 24px; }
@media (max-width: 1000px) { .highlights { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .highlights { grid-template-columns: 1fr 1fr; } .hl-pay { grid-column: 1 / -1; } }

/* ===== Płatność online (Przelewy24) ===== */
/* oficjalne logotypy płatności (img/p24) – białe kafelki, czytelne też w trybie ciemnym i w stopce */
.pay-logos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; }
.pay-tile { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 8px; background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; flex: none; }
.pay-tile img { display: block; height: 17px; width: auto; }
.pay-tile-p24 img { height: 24px; }
.pay-logos-sm .pay-tile { height: 24px; padding: 0 6px; }
.pay-logos-sm .pay-tile img { height: 13px; }
.pay-logos-sm .pay-tile-p24 img { height: 19px; }
.p24-badge { height: 24px; padding: 0 6px; vertical-align: middle; }
.p24-badge img { height: 18px; }
.footer-pay { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-pay { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.btn-pay small { font-weight: 500; font-size: 0.72rem; opacity: 0.85; }
.btn-pay.btn-lg { padding: 14px 30px; font-size: 1.05rem; }
.pay-cta { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.success-hero .pay-cta { justify-content: center; flex-direction: column; margin-top: 22px; }
.pay-note { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.78rem; color: var(--muted); }
.pay-alt summary { cursor: pointer; font-size: 0.85rem; color: var(--green); font-weight: 600; padding: 4px 0 10px; }
.p24-tag { display: inline-block; font-size: 0.7rem; font-weight: 800; color: #fff; background: #d13239; border-radius: 6px; padding: 1px 6px; vertical-align: 1px; }
.usage-gb { margin-top: 4px; }
.pay-return .spin { width: 34px; height: 34px; border: 3px solid var(--green); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.p24-demo { max-width: 460px; margin: 0 auto; display: grid; gap: 16px; }
.p24-demo-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.p24-demo-head .p24-badge { height: 38px; padding: 0 10px; }
.p24-demo-head .p24-badge img { height: 28px; }
.p24-demo-sum { display: grid; gap: 2px; text-align: center; padding: 16px; border-radius: var(--radius-md); background: var(--cream); }
.p24-demo-sum b { font-size: 2rem; color: var(--ink); }
.p24-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p24-method { position: relative; }
.p24-method input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.p24-method span { display: block; text-align: center; padding: 14px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-weight: 700; font-size: 0.9rem; }
.p24-method input:checked + span { border-color: #d13239; box-shadow: 0 0 0 2px #d13239 inset; }
.p24-method input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Hero na tabletach i telefonach: jedna kolumna, makieta telefonu pod tekstem (bez poziomego przewijania) */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; gap: 24px; }
  .hero-stage { max-width: 440px; width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) {
  .hero { padding-top: 32px; }
  .hero-stage { min-height: 470px; overflow: hidden; }
  .phone { width: 230px; }
  .hero-facts { gap: 10px 18px; }
}

/* Cennik: 7 pakietów – 4 w rzędzie, ostatni rząd wyśrodkowany */
.pricing.pricing-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.pricing.pricing-flex .price-card { flex: 0 1 calc((100% - 48px) / 4); min-width: 0; }
@media (max-width: 1000px) { .pricing.pricing-flex .price-card { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 700px) { .pricing.pricing-flex { gap: 12px; } .pricing.pricing-flex .price-card { flex-basis: calc((100% - 12px) / 2); padding: 20px 12px 16px; } .price-card .qty { font-size: 1.9rem; } .price-card .price { font-size: 1.35rem; } .price-card .for { font-size: 0.74rem; } .price-card .omnibus { font-size: 0.66rem; } }
.pkg-options.pkg-7 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .pkg-options.pkg-7 { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   „Jak to działa” – scena sterowana przewijaniem
   (telefon skanuje QR → aparat → zdjęcie leci do albumu → wszystko spływa na laptop)
   Pozycje w jednostkach sceny (cqw = 1% szerokości sceny); --u = jednostka wielkości danego elementu.
   ===================================================================== */
.howto { padding-top: 24px; padding-bottom: 0; --hdr: 72px; }
.howto-head p { margin-top: 6px; }
.howto-track { position: relative; height: 860vh; }
.howto-sticky { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.howto-grid { display: grid; grid-template-columns: minmax(260px, 0.78fr) 1.22fr; gap: 32px; align-items: center; }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.howto-steps button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px 14px; border-radius: var(--radius-lg); border: 1px solid transparent; transition: background 0.35s, border-color 0.35s, opacity 0.35s, box-shadow 0.35s; opacity: 0.55; }
.howto-steps button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.howto-steps b { flex: none; width: 28px; height: 28px; font-size: 0.85rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--green-tint); color: var(--green); transition: background 0.35s, color 0.35s; }
.howto-steps strong { display: block; color: var(--ink); font-size: 0.98rem; line-height: 1.2; }
.howto-steps small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 1px; line-height: 1.3; }
.howto-steps li.done button { opacity: 0.8; }
.howto-steps li.on button { opacity: 1; background: var(--card); border-color: var(--line); box-shadow: var(--shadow-card); }
.howto-steps li.on b, .howto-steps li.done b { background: var(--green); color: #fff; }
.hw-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-soft); }
.hw-progress i { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }

.hw-stage {
  --ease2: cubic-bezier(0.22, 1, 0.36, 1);
  /* skale elementów */
  --kp: 1; --ka: 1; --kl: 1; --kc: 1; --tile: 8;
  /* karta z QR i „promień” skanowania */
  --cx: 3; --cy: 26; --bx: 22; --by: 30; --bw: 22; --bh: 18;
  /* telefon: krok 0, 1 i 2–3 */
  --p0x: 44; --p0y: 5; --p0r: 4deg; --p0s: 1.05;
  --p1x: 40; --p1y: 6; --p1s: 1.1;
  --p2x: 6; --p2y: 18; --p2r: -4deg; --p2s: 1;
  /* album i laptop */
  --ax: 39; --ay: 2; --lx: 44; --ly: 33;
  /* lot zrobionego zdjęcia: telefon → album */
  --sx0: 15.5; --sy0: 40; --sx1: 47; --sy1: 8;
  position: relative; width: min(100%, calc((100svh - var(--hdr) - 70px) * 1.25)); aspect-ratio: 5 / 4; margin: 0 auto; container-type: inline-size;
}
.hw-stage *, .hw-stage *::before { box-sizing: border-box; }
.hw-stage i { display: grid; place-items: center; }
.hw-stage i svg { width: 42%; height: 42%; color: rgba(255, 255, 255, 0.92); }

/* karta na stół z kodem QR */
.hw-card { --u: calc(1cqw * var(--kc)); position: absolute; left: calc(var(--cx) * 1cqw); top: calc(var(--cy) * 1cqw); width: calc(var(--u) * 25); padding: calc(var(--u) * 2); background: #fff; color: #1a2e2b; border-radius: calc(var(--u) * 2.2); box-shadow: 0 2cqw 5cqw rgba(0, 40, 34, 0.18); text-align: center; display: grid; gap: calc(var(--u) * 0.6); transform: rotate(-7deg); transition: opacity 0.6s, transform 0.9s var(--ease2); }
.hw-card-qr { line-height: 0; }
.hw-card-qr svg { width: 100%; height: auto; }
.hw-card b { font-size: calc(var(--u) * 1.55); color: #004d40; }
.hw-card span { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: calc(var(--u) * 2); }
.hw-beam { position: absolute; left: calc(var(--bx) * 1cqw); top: calc(var(--by) * 1cqw); width: calc(var(--bw) * 1cqw); height: calc(var(--bh) * 1cqw); background: linear-gradient(90deg, rgba(0, 150, 120, 0.24), rgba(0, 150, 120, 0)); clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%); transition: opacity 0.5s; animation: hwbeam 1.6s ease-in-out infinite; }
@keyframes hwbeam { 50% { opacity: 0.45; } }
.howto:not([data-step="0"]) .hw-card { opacity: 0; transform: translate(-6cqw, 4cqw) rotate(-14deg); }
.howto:not([data-step="0"]) .hw-beam { opacity: 0; animation: none; }

/* telefon */
.hw-phone { --u: calc(1cqw * var(--kp)); --px: var(--p0x); --py: var(--p0y); --pr: var(--p0r); --ps: var(--p0s); position: absolute; left: 0; top: 0; width: calc(var(--u) * 27); aspect-ratio: 9 / 18.5; border-radius: calc(var(--u) * 4); background: #10201d; padding: calc(var(--u) * 0.9); box-shadow: 0 3cqw 7cqw rgba(0, 40, 34, 0.3), inset 0 0 0 calc(var(--u) * 0.3) #2b3c38; transform: translate(calc(var(--px) * 1cqw), calc(var(--py) * 1cqw)) rotate(var(--pr)) scale(var(--ps)); transition: transform 1s var(--ease2); z-index: 3; }
.howto[data-step="1"] .hw-phone { --px: var(--p1x); --py: var(--p1y); --pr: 0deg; --ps: var(--p1s); }
.howto[data-step="2"] .hw-phone, .howto[data-step="3"] .hw-phone { --px: var(--p2x); --py: var(--p2y); --pr: var(--p2r); --ps: var(--p2s); }
.hw-screen { position: relative; height: 100%; border-radius: calc(var(--u) * 3.2); overflow: hidden; background: #000; }
.hw-l { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; }
.howto[data-step="0"] .hw-l-scan, .howto[data-step="1"] .hw-l-cam, .howto[data-step="2"] .hw-l-sent, .howto[data-step="3"] .hw-l-sent { opacity: 1; }

/* ekran 1: skanowanie */
.hw-feed { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #6b5a45, #2a2219 70%); }
.hw-target { position: absolute; left: 50%; top: 42%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.hw-target::before { content: ""; position: absolute; inset: calc(var(--u) * -1.2); border: calc(var(--u) * 0.45) solid #fff; border-radius: calc(var(--u) * 1.8);
  -webkit-mask: linear-gradient(#000 0 0) top left / 30% 30% no-repeat, linear-gradient(#000 0 0) top right / 30% 30% no-repeat, linear-gradient(#000 0 0) bottom left / 30% 30% no-repeat, linear-gradient(#000 0 0) bottom right / 30% 30% no-repeat;
  mask: linear-gradient(#000 0 0) top left / 30% 30% no-repeat, linear-gradient(#000 0 0) top right / 30% 30% no-repeat, linear-gradient(#000 0 0) bottom left / 30% 30% no-repeat, linear-gradient(#000 0 0) bottom right / 30% 30% no-repeat; }
.hw-target-qr { background: #fff; padding: calc(var(--u) * 0.6); border-radius: calc(var(--u) * 0.6); line-height: 0; transform: rotate(-3deg); }
.hw-target-qr svg { width: 100%; height: auto; }
.hw-scanline { position: absolute; left: -4%; right: -4%; top: 0; height: calc(var(--u) * 0.5); background: #2ee6b5; box-shadow: 0 0 calc(var(--u) * 2) #2ee6b5; border-radius: 99px; animation: hwscan 1.8s ease-in-out infinite alternate; }
@keyframes hwscan { to { top: 100%; } }
.hw-pill { position: absolute; left: 8%; right: 8%; bottom: 10%; display: flex; gap: calc(var(--u) * 0.8); align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.95); color: #004d40; border-radius: 99px; font-weight: 800; font-size: calc(var(--u) * 1.35); padding: calc(var(--u) * 1.2) calc(var(--u) * 1); opacity: 0; transform: translateY(2cqw); white-space: nowrap; }
.hw-pill svg { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); flex: none; }
/* pasek po zeskanowaniu: zawsze w granicach ekranu telefonu (na wąskim ekranie mniejszy napis, w razie czego „…”) */
.hw-pill { min-width: 0; white-space: nowrap; overflow: hidden; }
.hw-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .hw-pill { left: 6%; right: 6%; font-size: calc(var(--u) * 1.15); gap: calc(var(--u) * 0.6); } }
.howto[data-step="0"] .hw-pill { animation: hwpill 0.6s var(--ease2) 1.2s both; }
@keyframes hwpill { to { opacity: 1; transform: none; } }

/* ekran 2: aparat */
.hw-l-cam > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-focus { position: absolute; left: 30%; top: 40%; width: 40%; aspect-ratio: 1; border: calc(var(--u) * 0.3) solid rgba(255, 220, 120, 0.95); border-radius: calc(var(--u) * 0.8); }
.howto[data-step="1"] .hw-focus { animation: hwfocus 0.7s ease 0.2s both; }
@keyframes hwfocus { from { transform: scale(1.35); opacity: 0; } to { transform: none; opacity: 1; } }
.hw-shutter { position: absolute; left: 50%; bottom: 6%; width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin-left: calc(var(--u) * -3.5); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--u) * 0.6) rgba(255, 255, 255, 0.45); }
.hw-thumb { position: absolute; left: 9%; bottom: 7%; width: calc(var(--u) * 5.4); aspect-ratio: 1; border-radius: calc(var(--u) * 1); overflow: hidden; border: calc(var(--u) * 0.3) solid #fff; opacity: 0; }
.hw-thumb i, .hw-mine i, .hw-stack i, .hw-grid i, .hw-shot i, .hw-fly i { width: 100%; height: 100%; aspect-ratio: 1; }
.hw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.hw-stage.snap .hw-flash { animation: hwflash 0.55s ease 0.9s both; }
.hw-stage.snap .hw-shutter { animation: hwpress 0.3s ease 0.85s both; }
.hw-stage.snap .hw-thumb { animation: hwthumb 0.45s var(--ease2) 1.25s both; }
@keyframes hwflash { 0% { opacity: 0; } 18% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes hwpress { 50% { transform: scale(0.82); } }
@keyframes hwthumb { from { opacity: 0; transform: scale(1.8) translate(20%, -60%); } to { opacity: 1; transform: none; } }

/* ekran 3: strona gościa po wysłaniu */
.hw-l-sent { background: linear-gradient(170deg, #0b5447, #00382f); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 18% 7% 7%; gap: calc(var(--u) * 1); text-align: center; }
.hw-sent-ey { font-size: calc(var(--u) * 1); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.hw-sent-names { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: calc(var(--u) * 3.2); line-height: 1; white-space: nowrap; }
.hw-toast { display: inline-flex; gap: calc(var(--u) * 0.6); align-items: center; background: #e1f1e9; color: #0b4a37; border-radius: 99px; font-size: calc(var(--u) * 1.3); font-weight: 800; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.6); margin-top: calc(var(--u) * 3); white-space: nowrap; opacity: 0; transform: translateY(1.5cqw); transition: opacity 0.4s 1.1s, transform 0.5s var(--ease2) 1.1s; }
.hw-toast svg { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
.howto[data-step="2"] .hw-toast, .howto[data-step="3"] .hw-toast { opacity: 1; transform: none; }
.hw-mine { margin-top: auto; width: 100%; background: rgba(255, 255, 255, 0.96); color: #1a2e2b; border-radius: calc(var(--u) * 1.8); padding: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.15); font-weight: 700; text-align: left; }
.hw-mine div { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 0.7); margin-top: calc(var(--u) * 0.8); }
.hw-mine i { border-radius: calc(var(--u) * 0.8); }

/* album Pary Młodej */
.hw-album { --u: calc(1cqw * var(--ka)); position: absolute; left: calc(var(--ax) * 1cqw); top: calc(var(--ay) * 1cqw); width: calc(var(--u) * 24); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 1.4); background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--u) * 2.4); box-shadow: var(--shadow-card); text-align: center; display: grid; gap: calc(var(--u) * 0.4); opacity: 0; transform: translateY(-4cqw) scale(0.9); transition: opacity 0.6s, transform 0.8s var(--ease2); z-index: 2; }
.hw-album b { font-size: calc(var(--u) * 1.65); color: var(--green); }
.hw-album > span { font-size: calc(var(--u) * 1.4); color: var(--muted); }
.hw-ca { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.hw-stack { position: relative; height: calc(var(--u) * 10.5); margin-bottom: calc(var(--u) * 0.6); }
.hw-stack i { position: absolute; left: 50%; top: 0; width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin-left: calc(var(--u) * -5); border-radius: calc(var(--u) * 1.2); border: calc(var(--u) * 0.45) solid #fff; box-shadow: 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.15); }
.hw-stack i:nth-child(1) { transform: rotate(-12deg) translateX(calc(var(--u) * -3.5)); }
.hw-stack i:nth-child(2) { transform: rotate(9deg) translateX(calc(var(--u) * 3.5)); }
.howto[data-step="2"] .hw-album, .howto[data-step="3"] .hw-album { opacity: 1; transform: none; }
.howto[data-step="2"] .hw-stack i:nth-child(3) { animation: hwpop 0.4s ease 1.3s both; }
@keyframes hwpop { 50% { transform: scale(1.12); } }

/* laptop */
.hw-laptop { --u: calc(1cqw * var(--kl)); position: absolute; left: calc(var(--lx) * 1cqw); top: calc(var(--ly) * 1cqw); width: calc(var(--u) * 54); opacity: 0; transform: translateX(8cqw) scale(0.94); transition: opacity 0.6s, transform 0.9s var(--ease2); z-index: 1; }
.howto[data-step="3"] .hw-laptop { opacity: 1; transform: none; }
.hw-lid { background: #10201d; border-radius: calc(var(--u) * 1.8) calc(var(--u) * 1.8) calc(var(--u) * 0.6) calc(var(--u) * 0.6); padding: calc(var(--u) * 1.2); box-shadow: 0 2cqw 5cqw rgba(0, 40, 34, 0.22); }
.hw-lscreen { background: var(--cream); border-radius: calc(var(--u) * 0.6); aspect-ratio: 16 / 10; overflow: hidden; display: flex; flex-direction: column; }
.hw-lbar { display: flex; gap: calc(var(--u) * 0.6); align-items: center; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2); background: var(--card); border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 1.15); color: var(--muted); white-space: nowrap; }
.hw-lbar i { width: calc(var(--u) * 0.9); height: calc(var(--u) * 0.9); border-radius: 50%; background: #e7e1d1; }
.hw-lbar i:first-child { background: #f28b82; }
.hw-lbar span { margin-left: calc(var(--u) * 1); font-weight: 700; color: var(--green); }
.hw-lhead { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 1) calc(var(--u) * 1.4) calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.3); color: var(--muted); white-space: nowrap; }
.hw-lhead b { color: var(--green); font-size: calc(var(--u) * 1.8); font-variant-numeric: tabular-nums; }
.hw-zip { display: inline-flex; gap: calc(var(--u) * 0.5); align-items: center; background: var(--fill); color: var(--on-fill); border-radius: 99px; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.3); font-weight: 800; font-size: calc(var(--u) * 1.15); transition: box-shadow 0.4s, transform 0.4s; }
.hw-zip svg { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
.hw-stage.hw-done .hw-zip { box-shadow: 0 0 0 calc(var(--u) * 0.7) rgba(0, 77, 64, 0.2); transform: scale(1.06); }
.hw-grid { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.4) calc(var(--u) * 1.4); align-content: start; }
.hw-grid i { border-radius: calc(var(--u) * 0.8); opacity: 0; transform: scale(0.5) translateY(-2cqw); transition: opacity 0.35s, transform 0.45s var(--ease2); }
.hw-grid i.on { opacity: 1; transform: none; }
.hw-base { height: calc(var(--u) * 2.2); margin: 0 calc(var(--u) * -4); background: linear-gradient(#c9cfcd, #a9b1af); border-radius: 0 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4); position: relative; }
.hw-base::before { content: ""; position: absolute; left: 50%; top: 0; width: calc(var(--u) * 10); height: calc(var(--u) * 0.7); margin-left: calc(var(--u) * -5); background: #98a19f; border-radius: 0 0 calc(var(--u) * 1) calc(var(--u) * 1); }

/* lecące zdjęcia: ruch w poziomie liniowy + w pionie z wygładzeniem = łuk */
.hw-shot, .hw-fly { position: absolute; left: 0; top: 0; width: calc(var(--tile) * 1cqw); z-index: 4; pointer-events: none; opacity: 0; }
.hw-shot > span, .hw-fly > span { display: block; border-radius: 1.2cqw; overflow: hidden; border: 0.45cqw solid #fff; box-shadow: 0 1.2cqw 2.4cqw rgba(0, 0, 0, 0.22); }
.hw-stage.shoot .hw-shot { animation: hwshotx 1.15s linear 0.25s both; }
.hw-stage.shoot .hw-shot > span { animation: hwshoty 1.15s cubic-bezier(0.2, 0.75, 0.35, 1) 0.25s both; }
@keyframes hwshotx { 0% { transform: translateX(calc(var(--sx0) * 1cqw)); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(calc(var(--sx1) * 1cqw)); opacity: 0; } }
@keyframes hwshoty { 0% { transform: translateY(calc(var(--sy0) * 1cqw)) scale(1.2); } 100% { transform: translateY(calc(var(--sy1) * 1cqw)) scale(0.55); } }
.hw-fly { width: calc(var(--tile) * 0.75cqw); display: none; }
.hw-fly > span { border-width: 0.35cqw; }
.howto[data-step="2"] .hw-sa, .howto[data-step="3"] .hw-sa, .howto[data-step="3"] .hw-sb { display: block; animation: hwx var(--d) linear var(--dl) infinite; }
.howto[data-step="2"] .hw-sa > span, .howto[data-step="3"] .hw-sa > span, .howto[data-step="3"] .hw-sb > span { animation: hwy var(--d) cubic-bezier(0.2, 0.75, 0.35, 1) var(--dl) infinite; }
.howto[data-step="2"] .hw-sa, .howto[data-step="2"] .hw-sa > span { animation-delay: calc(var(--dl) + 1.3s); }
@keyframes hwx { 0% { transform: translateX(calc(var(--x0) * 1cqw)); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(calc(var(--x1) * 1cqw)); opacity: 0; } }
@keyframes hwy { 0% { transform: translateY(calc(var(--y0) * 1cqw)) scale(1); } 100% { transform: translateY(calc(var(--y1) * 1cqw)) scale(0.6); } }
/* tory: inni goście → album, album → laptop */
.hw-sa1 { --x0: -8; --y0: 6; --x1: 47; --y1: 8; }
.hw-sa2 { --x0: 10; --y0: 76; --x1: 47; --y1: 8; }
.hw-sa3 { --x0: 92; --y0: -6; --x1: 47; --y1: 8; }
.hw-sb1 { --x0: 47; --y0: 10; --x1: 64; --y1: 46; }
.hw-sb2 { --x0: 47; --y0: 10; --x1: 76; --y1: 50; }
.hw-sb3 { --x0: 47; --y0: 10; --x1: 58; --y1: 54; }
.hw-sb4 { --x0: 47; --y0: 10; --x1: 82; --y1: 56; }

/* tablet: scena nad krokiem */
@media (max-width: 860px) {
  .howto-track { height: 760vh; }
  .howto-grid { grid-template-columns: 1fr; gap: 14px; }
  .hw-stage { order: -1; width: min(100%, calc((100svh - var(--hdr) - 180px) * 1.25)); }
  .howto-steps { min-height: 88px; }
  .howto-steps li { display: none; }
  .howto-steps li.on { display: block; }
  .howto-steps li.on button { padding: 12px 14px; }
  .howto-steps strong { font-size: 1rem; }
}
/* telefon: scena pionowa (telefon i album u góry, laptop na dole) – większe elementy */
@media (max-width: 600px) {
  .howto-sticky { justify-content: center; }
  .hw-stage {
    aspect-ratio: 4 / 5; width: min(100%, calc((100svh - var(--hdr) - 170px) * 0.8));
    --kp: 1.41; --ka: 1.75; --kl: 1.33; --kc: 1.36; --tile: 11;
    --cx: 2; --cy: 54; --bx: 34; --by: 52; --bw: 18; --bh: 24;
    --p0x: 52; --p0y: 12; --p0r: 4deg; --p0s: 1;
    --p1x: 31; --p1y: 9; --p1s: 1.1;
    --p2x: 3; --p2y: 2; --p2r: -4deg; --p2s: 0.8;
    --ax: 51; --ay: 8; --lx: 14; --ly: 76;
    --sx0: 16; --sy0: 36; --sx1: 66; --sy1: 18;
  }
  .hw-sa1 { --x0: -10; --y0: 50; --x1: 66; --y1: 18; }
  .hw-sa2 { --x0: 30; --y0: -12; --x1: 66; --y1: 18; }
  .hw-sa3 { --x0: 100; --y0: 52; --x1: 66; --y1: 18; }
  .hw-sb1 { --x0: 66; --y0: 30; --x1: 30; --y1: 92; }
  .hw-sb2 { --x0: 66; --y0: 30; --x1: 46; --y1: 96; }
  .hw-sb3 { --x0: 66; --y0: 30; --x1: 62; --y1: 92; }
  .hw-sb4 { --x0: 66; --y0: 30; --x1: 76; --y1: 100; }
  .hw-laptop { transform: translateY(6cqw) scale(0.94); }
}

/* bez animacji (ustawienie systemu): zwykła lista kroków i gotowa scena */
.howto.static .howto-track { height: auto; }
.howto.static .howto-sticky { position: static; height: auto; padding: 16px 0 24px; }
.howto.static .howto-steps li { display: block; }
.howto.static .howto-steps button { opacity: 1; }
.howto.static .hw-progress, .howto.static .hw-fly, .howto.static .hw-shot { display: none; }
.howto.static .hw-stage { width: min(100%, 620px); }
.howto-sticky .howto-head { margin-bottom: 18px; }
.howto-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 600px) { .howto-sticky .howto-head { margin-bottom: 10px; } .howto-head p { font-size: 0.85rem; } }
.howto.static .howto-sticky .howto-head { margin-bottom: 18px; }

/* =====================================================================
   „Co dostajecie” – animowane sceny (zdjęcia + filmy, pokaz albo prywatnie, foto-bingo, 30 dni)
   Wymiary w cqw (1% szerokości sceny). Animacje grają tylko z klasą .play (scena widoczna).
   ===================================================================== */
.showcases { padding-top: 32px; }
.sc-title { margin-bottom: 8px; }
.showcase { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; padding: 34px 0; }
.showcase + .showcase { border-top: 1px solid var(--line-soft); }
.showcase.rev > .sc { order: 2; }
.sc-text h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); color: var(--green); margin: 8px 0 10px; line-height: 1.2; }
.sc-text > p { color: var(--muted); font-size: 1rem; max-width: 46ch; }
.sc-text .tiny { margin-top: 10px; }
.sc-eyebrow-gold { color: var(--umber-ink); }
.sc-chips { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chips li { background: var(--green-tint); color: var(--green); font-weight: 700; font-size: 0.8rem; padding: 6px 12px; border-radius: 99px; }
.sc-extras { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sc-extras li { display: inline-flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.sc-extras svg { width: 18px; height: 18px; color: var(--green); }
@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .showcase.rev > .sc { order: 0; }
}

.sc { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 5 / 4; container-type: inline-size; border-radius: 24px; background: linear-gradient(160deg, var(--cream), var(--card)); border: 1px solid var(--line); overflow: hidden; }
.sc *, .sc *::before { box-sizing: border-box; }
.sc i { display: grid; place-items: center; }
.sc i svg { width: 42%; height: 42%; color: rgba(255, 255, 255, 0.92); }
.sc, .sc * { animation-play-state: paused; }
.sc.play, .sc.play * { animation-play-state: running; }
.sc-sw { position: relative; width: 9cqw; height: 5cqw; border-radius: 99px; background: var(--switch-off); flex: none; }
.sc-sw::before { content: ""; position: absolute; left: 0.6cqw; top: 0.6cqw; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #fff; box-shadow: 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.2); }

/* --- 1) zdjęcia + filmy --- */
.sc-phone { position: absolute; left: 7cqw; top: 7cqw; width: 33cqw; aspect-ratio: 9 / 18.5; border-radius: 5cqw; background: #10201d; padding: 1.1cqw; box-shadow: 0 3cqw 6cqw rgba(0, 40, 34, 0.25); transform: rotate(-4deg); }
.sc-screen { height: 100%; border-radius: 4cqw; overflow: hidden; background: linear-gradient(170deg, #0b5447, #00382f); color: #fff; display: flex; flex-direction: column; padding: 5cqw 2.2cqw 2.4cqw; gap: 1.6cqw; }
.sc-ptop { display: grid; gap: 0.4cqw; text-align: center; }
.sc-ptop b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3.6cqw; line-height: 1; }
.sc-ptop span { font-size: 1.5cqw; opacity: 0.8; }
.sc-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; background: rgba(255, 255, 255, 0.96); border-radius: 2cqw; padding: 1.2cqw; }
.sc-pgrid > span { position: relative; aspect-ratio: 1; }
.sc-pgrid i { width: 100%; height: 100%; border-radius: 1.2cqw; }
.sc-v b { position: absolute; left: 50%; top: 50%; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; }
.sc-v b svg { width: 2.2cqw; height: 2.2cqw; color: #fff; }
.sc-v em { position: absolute; right: 0.6cqw; bottom: 0.5cqw; font-style: normal; font-size: 1.2cqw; font-weight: 800; color: #fff; text-shadow: 0 0 0.6cqw rgba(0, 0, 0, 0.6); }
.sc-v s { position: absolute; left: 0.8cqw; right: 0.8cqw; bottom: 0.6cqw; height: 0.5cqw; border-radius: 9px; background: rgba(255, 255, 255, 0.4); overflow: hidden; text-decoration: none; }
.sc-v s::before { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: scplay 1.6s linear infinite; }
@keyframes scplay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sc-pbtn { margin-top: auto; background: #fff; color: #004d40; border-radius: 99px; font-weight: 800; font-size: 1.7cqw; padding: 1.6cqw 1cqw; display: flex; align-items: center; justify-content: center; gap: 0.8cqw; white-space: nowrap; }
.sc-pbtn svg { width: 2.2cqw; height: 2.2cqw; }
.sc-opts { position: absolute; right: 6cqw; top: 22cqw; width: 50cqw; display: grid; gap: 3cqw; }
.sc-opt { display: flex; align-items: center; gap: 2.4cqw; background: var(--card); border: 1px solid var(--line); border-radius: 3cqw; padding: 2.6cqw 3cqw; box-shadow: var(--shadow-card); }
.sc-opt > i { width: 8cqw; height: 8cqw; border-radius: 2cqw; background: var(--green-tint); flex: none; }
.sc-opt > i svg { color: var(--green); width: 55%; height: 55%; }
.sc-opt span { flex: 1; display: grid; gap: 0.4cqw; }
.sc-opt b { font-size: 3cqw; color: var(--ink); line-height: 1.1; }
.sc-opt small { font-size: 2.3cqw; color: var(--muted); }
.sc-ok { width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.sc-ok svg { width: 3cqw; height: 3cqw; color: #fff; }
.sc-opt-v small { color: var(--umber-ink); font-weight: 700; }
/* pętla 8 s: najpierw same zdjęcia, potem włączone filmy */
.sc-media .sc-v { animation: scvid 6s ease infinite; }
.sc-media .sc-and { display: inline-block; overflow: hidden; max-width: 0; animation: scand 6s ease infinite; }
.sc-media .sc-opt-v .sc-sw { animation: scswbg 6s ease infinite; }
.sc-media .sc-opt-v .sc-sw::before { animation: scknob 6s ease infinite; }
.sc-media .sc-opt-v { animation: scoptv 6s ease infinite; }
@keyframes scvid { 0%, 42% { opacity: 0; transform: scale(0.4); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.4); } }
@keyframes scand { 0%, 42% { max-width: 0; } 52%, 92% { max-width: 12cqw; } 100% { max-width: 0; } }
@keyframes scswbg { 0%, 40% { background: var(--switch-off); } 46%, 94% { background: var(--green); } 100% { background: var(--switch-off); } }
@keyframes scknob { 0%, 40% { transform: none; } 46%, 94% { transform: translateX(4cqw); } 100% { transform: none; } }
@keyframes scoptv { 0%, 40% { border-color: var(--line); } 46%, 94% { border-color: var(--green); } 100% { border-color: var(--line); } }

/* --- 2) pokaz na sali ↔ tylko dla Was --- */
.sc-room { position: absolute; inset: 0 0 18cqw; background: radial-gradient(ellipse at 50% 120%, #7b3a5c, #2a1638 60%, #1a0f24); }
.sc-lights { position: absolute; left: -2cqw; right: -2cqw; top: 4cqw; display: flex; justify-content: space-between; }
.sc-lights i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ffe6a3; box-shadow: 0 0 2cqw #ffd27a; animation: sctwinkle 2.4s ease-in-out infinite; }
.sc-lights i:nth-child(odd) { margin-top: 2cqw; animation-delay: -1.2s; }
@keyframes sctwinkle { 50% { opacity: 0.45; } }
.sc-tv { position: absolute; left: 14cqw; top: 11cqw; width: 72cqw; aspect-ratio: 16 / 9; background: #0c0c0f; border: 1.2cqw solid #20262a; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 0 6cqw rgba(255, 210, 140, 0.35); }
.sc-slides, .sc-slide { position: absolute; inset: 0; }
.sc-slide i { width: 100%; height: 100%; }
.sc-slide i svg { width: 22%; height: 22%; }
.sc-slide { opacity: 0; animation: scslide 8s linear infinite; }
.sc-slide:nth-child(2) { animation-delay: 2s; }
.sc-slide:nth-child(3) { animation-delay: 4s; }
.sc-slide:nth-child(4) { animation-delay: 6s; }
@keyframes scslide { 0% { opacity: 0; transform: scale(1.08); } 4%, 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; transform: none; } }
.sc-new { position: absolute; left: 2cqw; bottom: 2cqw; display: inline-flex; gap: 0.8cqw; align-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 2cqw; font-weight: 700; border-radius: 99px; padding: 0.8cqw 1.8cqw; }
.sc-new svg { width: 2.2cqw; height: 2.2cqw; }
.sc-tvqr { position: absolute; right: 2cqw; bottom: 2cqw; width: 12cqw; background: #fff; border-radius: 1.2cqw; padding: 0.8cqw; display: grid; gap: 0.3cqw; text-align: center; line-height: 1; }
.sc-tvqr svg { width: 100%; height: auto; }
.sc-tvqr span { font-size: 1.3cqw; font-weight: 800; color: #004d40; }
.sc-private { position: absolute; inset: 0; background: #12171a; color: #fff; display: grid; place-content: center; justify-items: center; gap: 1cqw; text-align: center; opacity: 0; }
.sc-private svg { width: 7cqw; height: 7cqw; color: #9fe3cf; }
.sc-private b { font-size: 4cqw; }
.sc-private span { font-size: 2.2cqw; opacity: 0.75; }
.sc-crowd { position: absolute; left: 0; right: 0; bottom: -3cqw; display: flex; justify-content: center; gap: 1.6cqw; }
.sc-crowd i { width: 9cqw; height: 13cqw; border-radius: 4.5cqw 4.5cqw 1cqw 1cqw; background: #120a18; position: relative; }
.sc-crowd i::before { content: ""; position: absolute; left: 50%; top: -5.4cqw; width: 5.6cqw; height: 5.6cqw; margin-left: -2.8cqw; border-radius: 50%; background: #120a18; }
.sc-crowd i:nth-child(even) { transform: translateY(2cqw) scale(0.92); }
.sc-switch { position: absolute; left: 0; right: 0; bottom: 0; height: 18cqw; display: flex; align-items: center; justify-content: center; gap: 2.6cqw; background: var(--card); border-top: 1px solid var(--line); font-size: 3cqw; font-weight: 700; color: var(--ink); }
.sc-switch b { font-size: 2.6cqw; width: 16cqw; }
.sc-on { color: var(--green); }
.sc-off { color: var(--muted); display: none; }
/* pętla 10 s: pokaz → prywatnie */
.sc-show .sc-private { animation: scpriv 8s ease infinite; }
.sc-show .sc-sw { background: var(--green); animation: scswbg2 8s ease infinite; }
.sc-show .sc-sw::before { transform: translateX(4cqw); animation: scknob2 8s ease infinite; }
.sc-show .sc-on { animation: sclabon 8s steps(1) infinite; }
.sc-show .sc-off { display: block; position: absolute; opacity: 0; animation: scaboff 8s steps(1) infinite; margin-left: 30.5cqw; }
.sc-show .sc-switch { position: absolute; }
@keyframes scpriv { 0%, 52% { opacity: 0; } 58%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scswbg2 { 0%, 50% { background: var(--green); } 55%, 95% { background: var(--switch-off); } 100% { background: var(--green); } }
@keyframes scknob2 { 0%, 50% { transform: translateX(4cqw); } 55%, 95% { transform: none; } 100% { transform: translateX(4cqw); } }
@keyframes sclabon { 0% { opacity: 1; } 53% { opacity: 0; } 97% { opacity: 1; } }
@keyframes scaboff { 0% { opacity: 0; } 53% { opacity: 1; } 97% { opacity: 0; } }

/* --- 3) foto-bingo --- */
.sc-card { position: absolute; left: 6cqw; top: 6cqw; width: 58cqw; background: var(--card); border: 1px solid var(--line); border-radius: 3.4cqw; padding: 3cqw; box-shadow: var(--shadow-card); }
.sc-bhead { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin-bottom: 2.2cqw; }
.sc-bhead b { display: inline-flex; gap: 1cqw; align-items: center; color: var(--green); font-size: 3.2cqw; }
.sc-bhead b svg { width: 3.4cqw; height: 3.4cqw; }
.sc-bhead span { font-size: 2cqw; color: var(--muted); text-align: right; }
.sc-bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.sc-cell { position: relative; aspect-ratio: 1; border-radius: 2cqw; border: 0.3cqw dashed var(--line-strong); background: var(--cream); display: grid; place-items: center; padding: 1cqw; overflow: hidden; }
.sc-cell > i { position: absolute; inset: 0; opacity: 0; transform: scale(1.3); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 1.6cqw; }
.sc-cell > span { position: relative; font-size: 1.75cqw; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; transition: color 0.3s; }
.sc-cell > em { position: absolute; right: 0.8cqw; top: 0.8cqw; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--green); display: grid; place-items: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s; }
.sc-cell > em svg { width: 2.2cqw; height: 2.2cqw; color: #fff; }
.sc-cell.on { border-style: solid; border-color: transparent; }
.sc-cell.on > i { opacity: 1; transform: none; }
.sc-cell.on > span { color: #fff; text-shadow: 0 0.2cqw 0.8cqw rgba(0, 0, 0, 0.45); }
.sc-cell.on > em { transform: none; }
.sc-stamp { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); font-weight: 900; font-size: 9cqw; letter-spacing: 0.04em; color: #d13239; border: 1cqw solid #d13239; border-radius: 2cqw; padding: 0.6cqw 3cqw; background: rgba(255, 255, 255, 0.85); opacity: 0; transition: opacity 0.25s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
.sc-bingo.won .sc-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
.sc-rank { position: absolute; right: 5cqw; top: 14cqw; width: 30cqw; background: var(--card); border: 1px solid var(--line); border-radius: 3cqw; padding: 2.4cqw; display: grid; gap: 1.6cqw; box-shadow: var(--shadow-card); }
.sc-rank > div { display: flex; gap: 1.4cqw; align-items: center; font-size: 2.4cqw; color: var(--ink); }
.sc-rank b { color: var(--green); }
.sc-rank span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rank em { font-style: normal; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-bingo.won .sc-r1 { color: var(--green); }
.sc-bingo.won .sc-r1 em { color: #d13239; }
.sc-badge { position: absolute; right: 5cqw; bottom: 6cqw; display: inline-flex; gap: 1cqw; align-items: center; background: var(--umber); color: #fff; font-weight: 800; font-size: 2.6cqw; border-radius: 99px; padding: 1.4cqw 2.6cqw; }
.sc-badge svg { width: 2.8cqw; height: 2.8cqw; }

/* --- 4) 30 dni na pobranie --- */
.sc-cal { position: absolute; left: 6cqw; top: 6cqw; right: 6cqw; background: var(--card); border: 1px solid var(--line); border-radius: 3cqw; padding: 3cqw; box-shadow: var(--shadow-card); }
.sc-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.4cqw; font-size: 2.8cqw; color: var(--muted); }
.sc-cal-head > b { display: inline-flex; gap: 1cqw; align-items: center; color: var(--green); font-size: 3.2cqw; }
.sc-cal-head > b svg { width: 3.4cqw; height: 3.4cqw; }
.sc-left { font-size: 4.4cqw; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-cal-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1.2cqw; }
.sc-cal-grid i { aspect-ratio: 1.15; border-radius: 1.4cqw; background: var(--cream); border: 1px solid var(--line); font-style: normal; font-size: 2.2cqw; font-weight: 700; color: var(--muted-2); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.sc-cal-grid i svg { width: 3cqw; height: 3cqw; color: var(--green); }
.sc-cal-grid i.on { background: var(--green-tint); color: var(--green); border-color: transparent; }
.sc-cal-grid i.ev { background: var(--green); border-color: transparent; }
.sc-cal-grid i.ev svg { color: #fff; }
.sc-cal-grid i.end { border: 0.35cqw dashed var(--green); }
.sc-cal-grid i.end.on { background: var(--green); }
.sc-cal-grid i.end.on svg { color: #fff; }
.sc-zipcard { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; display: flex; align-items: center; gap: 2.4cqw; background: var(--card); border: 1px solid var(--line); border-radius: 3cqw; padding: 2.4cqw 2.8cqw; box-shadow: var(--shadow-card); opacity: 0.55; transition: opacity 0.4s, border-color 0.4s; }
.sc-zipicon { width: 9cqw; height: 11cqw; border-radius: 1.6cqw; background: linear-gradient(160deg, #f6d365, #fda085); color: #fff; font-weight: 900; font-size: 2.6cqw; display: grid; place-items: center; flex: none; }
.sc-zipinfo { flex: 1; display: grid; gap: 0.6cqw; min-width: 0; }
.sc-zipinfo b { font-size: 2.6cqw; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-zipinfo span { font-size: 2.1cqw; color: var(--muted); }
.sc-zipbar { height: 1.2cqw; border-radius: 9px; background: var(--line-soft); overflow: hidden; }
.sc-zipbar i { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); transition: transform 2.4s cubic-bezier(0.4, 0, 0.2, 1); }
.sc-zipbtn { display: inline-flex; gap: 0.8cqw; align-items: center; background: var(--fill); color: var(--on-fill); border-radius: 99px; font-weight: 800; font-size: 2.3cqw; padding: 1.4cqw 2.4cqw; flex: none; }
.sc-zipbtn svg { width: 2.6cqw; height: 2.6cqw; }
.sc-days.zip .sc-zipcard { opacity: 1; border-color: var(--green); }
.sc-days.zip .sc-zipbar i { transform: none; }

/* bez animacji: stan końcowy */
.sc.still .sc-v, .sc.still .sc-and { animation: none; opacity: 1; transform: none; max-width: none; }
.sc.still.sc-media .sc-opt-v .sc-sw { background: var(--green); animation: none; }
.sc.still.sc-media .sc-opt-v .sc-sw::before { transform: translateX(4cqw); animation: none; }
.sc.still .sc-slide:first-child { opacity: 1; animation: none; }
.sc.still .sc-slide:not(:first-child), .sc.still .sc-private { animation: none; }
.sc.still .sc-sw, .sc.still .sc-sw::before, .sc.still .sc-on, .sc.still .sc-off { animation: none; }
.sc.still .sc-v s::before { animation: none; transform: scaleX(0.4); }

/* foto-bingo: na odhaczonym polu sam kolor zdjęcia + podpis (bez ikony) */
.sc-cell > i svg { display: none; }

/* „Jak to działa”, krok 3: telefony innych gości, z których też lecą zdjęcia do albumu */
.hw-mini { --mx: 0; --my: 0; --mr: 0deg; position: absolute; left: 0; top: 0; width: 8cqw; aspect-ratio: 9 / 18; transform: translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqw)) rotate(var(--mr)) scale(0.6); opacity: 0; transition: opacity 0.5s, transform 0.7s var(--ease2); z-index: 3; }
.hw-mini > div { height: 100%; border-radius: 1.4cqw; background: #10201d; padding: 0.45cqw; box-shadow: 0 1.2cqw 2.6cqw rgba(0, 40, 34, 0.28); display: flex; flex-direction: column; gap: 0.5cqw; }
.hw-mini > div::before { content: ""; position: absolute; inset: 0.45cqw; border-radius: 1cqw; background: linear-gradient(170deg, #0b5447, #00382f); z-index: -1; }
.hw-mini > div { position: relative; isolation: isolate; }
.hw-mini-top { height: 1.2cqw; margin: 1.6cqw 1.2cqw 0; border-radius: 9px; background: rgba(255, 255, 255, 0.35); }
.hw-mini > div > i { margin: 0 0.9cqw; aspect-ratio: 1; border-radius: 0.8cqw; }
.hw-mini > div > i svg { width: 45%; height: 45%; }
.hw-mini-btn { margin: auto 0.9cqw 1.2cqw; height: 2cqw; border-radius: 99px; background: #fff; }
.hw-mini1 { --mx: 19; --my: -3; --mr: -12deg; }
.hw-mini2 { --mx: 75; --my: 0; --mr: 9deg; }
.hw-mini3 { --mx: 88; --my: 14; --mr: -6deg; }
.howto[data-step="2"] .hw-mini, .howto[data-step="3"] .hw-mini { opacity: 1; transform: translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqw)) rotate(var(--mr)); }
.howto[data-step="2"] .hw-mini2 { transition-delay: 0.15s; }
.howto[data-step="2"] .hw-mini3 { transition-delay: 0.3s; }
.howto[data-step="2"] .hw-mini > div, .howto[data-step="3"] .hw-mini > div { animation: hwminibob 2.6s ease-in-out infinite; }
.hw-mini2 > div { animation-delay: -0.9s !important; }
.hw-mini3 > div { animation-delay: -1.7s !important; }
@keyframes hwminibob { 50% { transform: translateY(-0.8cqw); } }
/* tory zdjęć z telefonów gości do albumu */
.hw-sa1 { --x0: 21; --y0: 2; --x1: 47; --y1: 8; }
.hw-sa2 { --x0: 76; --y0: 4; --x1: 47; --y1: 8; }
.hw-sa3 { --x0: 88; --y0: 18; --x1: 47; --y1: 8; }
@media (max-width: 600px) {
  .hw-mini { width: 11cqw; }
  .hw-mini1 { --mx: 47; --my: 46; --mr: -10deg; }
  .hw-mini2 { --mx: 64; --my: 50; --mr: 6deg; }
  .hw-mini3 { --mx: 82; --my: 46; --mr: -5deg; }
  .hw-sa1 { --x0: 48; --y0: 50; --x1: 66; --y1: 18; }
  .hw-sa2 { --x0: 65; --y0: 54; --x1: 66; --y1: 18; }
  .hw-sa3 { --x0: 83; --y0: 50; --x1: 66; --y1: 18; }
}
.howto.static .hw-mini { opacity: 1; transform: translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqw)) rotate(var(--mr)); }

/* ===== Galeria po terminie: strona gościa i podsumowanie organizatora ===== */
.chip-ended { background: var(--neutral-bg); color: var(--neutral-ink); }
.chip-ended svg { width: 14px; height: 14px; }
.g-closed { text-align: center; margin-top: 14vh; padding: 34px 24px 28px; justify-items: center; gap: 10px; }
.g-closed-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; }
.g-closed-ic svg { width: 30px; height: 30px; }
.g-closed-ey { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.g-closed h2 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 2.2rem; color: var(--green); line-height: 1.05; }
.g-closed p { margin: 0; color: var(--muted); max-width: 34ch; }
.g-closed p b { color: var(--ink); }
.g-closed.mini { margin: 0; padding: 18px 12px 16px; gap: 6px; border-radius: 16px; box-shadow: none; }
.g-closed.mini .g-closed-ic { width: 38px; height: 38px; }
.g-closed.mini .g-closed-ic svg { width: 19px; height: 19px; }
.g-closed.mini .g-closed-ey { font-size: 0.52rem; }
.g-closed.mini h2 { font-size: 1.45rem; }
.g-closed.mini p { font-size: 0.68rem; }
.g-closed.mini .tiny { font-size: 0.58rem; }
.g-own { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.88rem; }
.g-own svg { width: 22px; height: 22px; flex: none; }
.g-own span { display: grid; gap: 2px; }
.g-own b { font-size: 0.95rem; }

.ex-panel { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; padding: 34px; }
.ex-main h1 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 6px 0 10px; }
.ex-lead { margin: 14px 0 0; max-width: 56ch; }
.ex-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.ex-stats div { background: var(--cream); border-radius: 14px; padding: 14px 12px; display: grid; gap: 2px; }
.ex-stats b { font-size: 1.5rem; color: var(--green); line-height: 1.1; }
.ex-stats span { font-size: 0.78rem; color: var(--muted); }
.ex-timeline { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 0; position: relative; }
.ex-timeline li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; position: relative; }
.ex-timeline li + li::before { content: ""; position: absolute; left: 13px; top: -10px; height: 20px; border-left: 2px solid var(--line); }
.ex-timeline i { width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; }
.ex-timeline i svg { width: 15px; height: 15px; }
.ex-timeline span { color: var(--ink); font-size: 0.92rem; }
.ex-timeline b { font-size: 0.9rem; color: var(--muted); font-weight: 700; }
.ex-guest { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 250px; }
.ex-phone { justify-content: center; padding: 18px 12px; }
.ex-mini { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--cream); font-size: 0.88rem; color: var(--muted); }
.ex-mini b { color: var(--ink); }
@media (max-width: 860px) {
  .ex-panel { grid-template-columns: 1fr; padding: 24px 18px; }
  .ex-guest { justify-self: center; }
  .ex-stats { grid-template-columns: 1fr 1fr; }
}
.chip-ended::before { display: none; }

/* --- przechowanie: pół roku → rok → 2 lata --- */
.sc-days .sc-cal { padding: 2.6cqw 3cqw 3cqw; }
.sc-plan { position: relative; display: inline-grid; font-weight: 800; color: var(--green); font-size: 2.8cqw; }
.sc-plan span { grid-area: 1 / 1; text-align: right; opacity: 0; transform: translateY(1cqw); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
.sc-days[data-stage="0"] .sc-plan .p0, .sc-days[data-stage="1"] .sc-plan .p1, .sc-days[data-stage="2"] .sc-plan .p2 { opacity: 1; transform: none; }
.sc-days[data-stage="1"] .sc-plan, .sc-days[data-stage="2"] .sc-plan { color: var(--umber-ink); }
.sc-mrow { display: grid; grid-template-columns: 15cqw 1fr; gap: 2cqw; align-items: center; margin-top: 1.8cqw; }
.sc-mlab { display: grid; gap: 0.2cqw; line-height: 1.1; }
.sc-mlab b { font-size: 2.5cqw; color: var(--ink); }
.sc-mlab small { font-size: 1.9cqw; color: var(--muted); font-weight: 700; }
.sc-mrow.r0 .sc-mlab small { color: var(--green); }
.sc-mcells { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 0.8cqw; }
.sc-mcells i { height: 6.2cqw; border-radius: 1.2cqw; background: var(--cream); border: 1px dashed var(--line-strong); font-style: normal; font-size: 1.7cqw; font-weight: 700; color: var(--muted-2); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; }
.sc-days .sc-mcells i { font-size: 1.35cqw; display: grid; place-items: center; }
.sc-mrow.r0 .sc-mcells i { border-style: solid; }
.sc-mrow.r0 .sc-mcells i.on { background: var(--green); border-color: transparent; color: #fff; }
.sc-mrow.r1 .sc-mcells i.on { background: #f3c37a; border-color: transparent; color: #4a2f00; }
.sc-mrow.r2 .sc-mcells i.on { background: #f7dcae; border-color: transparent; color: #4a2f00; }
.sc-mcells i.on { transform: translateY(-0.3cqw); }
.sc-days .sc-zipcard { opacity: 1; }
.sc.still .sc-plan .p0 { opacity: 1; transform: none; }

/* --- przechowanie w formularzu zamówienia i w oknie rozszerzenia pakietu --- */
.keep-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keep-option { position: relative; min-width: 0; }
.keep-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keep-option span { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--card); transition: all 0.2s; }
.keep-option b { font-size: 1.05rem; color: var(--green); }
.keep-option small { font-size: 0.8rem; color: var(--muted); }
.keep-option em { font-style: normal; color: var(--umber-ink); font-weight: 700; }
.keep-option input:checked + span { border-color: var(--fill); background: var(--fill); }
.keep-option input:checked + span b, .keep-option input:checked + span small, .keep-option input:checked + span em { color: #fff; }
.keep-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.dl-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* --- okienko „Jak nazwiecie galerię?” --- */
.name-dlg { display: grid; gap: 14px; }
.name-dlg .nd-preview { display: grid; justify-items: center; gap: 4px; padding: 18px 12px; border-radius: 16px; background: linear-gradient(160deg, #0b5447, #00382f); color: #fff; text-align: center; }
.name-dlg .nd-preview span { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.name-dlg .nd-preview b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.9rem; line-height: 1.05; min-height: 1.05em; }
.name-dlg .nd-ex { display: flex; flex-wrap: wrap; gap: 8px; }
.name-dlg .nd-ex button { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 6px 12px; font-size: 0.82rem; font-weight: 600; color: var(--green); cursor: pointer; }
.name-dlg .nd-ex button:hover { border-color: var(--green); }
@media (max-width: 600px) { .name-dlg .modal-actions { flex-direction: column-reverse; align-items: stretch; } .name-dlg .modal-actions .btn { width: 100%; } }
.neg-text { color: var(--danger); font-weight: 600; }
.pkg-option input:checked + span .pkg-badge { background: #fff; color: var(--green); box-shadow: 0 0 0 1px var(--fill); }
.pkg-options { padding-top: 8px; }
@media (max-width: 560px) { .pkg-option .pkg-badge { font-size: 0.55rem; padding: 1px 6px; top: -8px; } }

/* =========================================================
   Księga gości (dodatek)
   Papier i okładka mają stałe kolory – to „przedmiot”, wygląda tak samo w trybie jasnym i ciemnym.
   ========================================================= */
.mode-tag.book { color: var(--green); background: var(--green-tint); }

/* --- zamówienie: kafelek dodatku --- */
.addon-card { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.addon-card input { accent-color: var(--green); width: 20px; height: 20px; }
.addon-card:has(input:checked) { border-color: var(--green); background: var(--card-soft); box-shadow: 0 0 0 3px var(--focus-soft); }
.addon-txt b { display: block; font-size: 0.98rem; }
.addon-txt small { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.45; margin-top: 2px; }
.addon-txt small.addon-note { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--line-strong); font-style: italic; }
.addon-price { font-weight: 800; color: var(--green); white-space: nowrap; }
.addon-book { position: relative; width: 42px; height: 56px; border-radius: 3px 7px 7px 3px; background: linear-gradient(90deg, #0a2e28 0 5px, #0f4a40 5px); box-shadow: inset -2px 0 0 #f4ecd8, inset -3px 0 0 #d9ceb2, 0 4px 10px rgba(0, 0, 0, 0.2); display: grid; place-items: center; color: #e9d8a6; transition: transform 0.4s var(--ease); }
.addon-book b { display: grid; }
.addon-book svg { width: 20px; height: 20px; }
.addon-book i { position: absolute; inset: 5px 5px 5px 9px; border: 1px solid rgba(233, 216, 166, 0.55); border-radius: 2px; }
.addon-book i + i { display: none; }
.addon-card:has(input:checked) .addon-book { transform: rotate(-6deg) scale(1.06); }
@media (max-width: 560px) {
  .addon-card { grid-template-columns: auto auto 1fr; grid-template-areas: "c a p" "t t t"; row-gap: 10px; }
  .addon-card input { grid-area: c; }
  .addon-book { grid-area: a; }
  .addon-price { grid-area: p; justify-self: end; font-size: 1.05rem; }
  .addon-txt { grid-area: t; }
}

/* --- strona gościa --- */
.g-book-cta { display: flex; gap: 12px; align-items: center; width: 100%; border: 1px solid #e8dcbc; border-radius: 16px; padding: 12px 14px; text-align: left; cursor: pointer; background: linear-gradient(135deg, #fffaf0, #f6eedb); color: #26312f; font: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.g-book-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.g-book-cta b { display: block; font-size: 0.95rem; }
.g-book-cta small { display: block; font-size: 0.78rem; color: #5d6b68; margin-top: 2px; }
.g-book-cta > svg { width: 18px; height: 18px; margin-left: auto; color: var(--t-deep, #004d40); flex: none; }
.g-book-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--t-deep, #0f4a40); color: var(--t-accent, #ecdcae); display: grid; place-items: center; }
.g-book-ic svg { width: 22px; height: 22px; }
@media (max-width: 420px) {
  .gt-tabs button { font-size: 0.76rem; padding: 9px 4px; gap: 4px; }
  .gt-tabs button svg { width: 16px; height: 16px; }
}

.wish-paper { position: relative; display: grid; gap: 14px; padding: 20px 18px 16px 30px; border-radius: 6px 14px 14px 6px; background: #fffdf7; color: #26312f; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.14); transform-origin: 50% 0; }
.wish-paper::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: rgba(176, 138, 62, 0.45); }
.wish-paper:focus-within { box-shadow: 0 0 0 3px rgba(0, 77, 64, 0.18), 0 12px 28px rgba(0, 0, 0, 0.14); }
.wp-text textarea { display: block; width: 100%; min-height: 192px; border: 0; padding: 0 4px; resize: vertical; font: italic 500 1.32rem/32px "Cormorant Garamond", Georgia, serif; color: #26312f; background: repeating-linear-gradient(transparent 0 31px, #e7dcc4 31px 32px); background-attachment: local; outline: none; }
.wp-text textarea::placeholder { color: #9a9483; }
.wp-sign { display: flex; gap: 8px; align-items: baseline; justify-content: flex-end; font: italic 600 1.3rem "Cormorant Garamond", Georgia, serif; color: #004d40; }
.wp-sign input { width: min(100%, 280px); border: 0; border-bottom: 1px dashed #c9bc9a; background: transparent; padding: 4px 2px; font: italic 600 1.2rem "Cormorant Garamond", Georgia, serif; color: #004d40; text-align: right; outline: none; }
.wp-sign input::placeholder { color: #a39d8c; font-weight: 500; }
.wp-sign input:focus { border-bottom-color: #004d40; }
.wp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wish-paper .tiny.muted { color: #7a817f; }
.wish-paper .error-text { margin: 0; }
.wp-photo { display: grid; justify-items: center; gap: 8px; transition: opacity 0.2s; }
.wp-photo.is-busy { opacity: 0.45; pointer-events: none; }
.wp-empty { width: 100%; display: grid; justify-items: center; gap: 8px; padding: 14px 10px; border: 1.5px dashed #d8cba8; border-radius: 12px; color: #5d6b68; text-align: center; font-size: 0.9rem; }
.wp-empty > svg { width: 28px; height: 28px; color: #b08a3e; }
.wp-empty small { color: #8b8f86; }
.wp-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wp-btns .btn { cursor: pointer; }
.wp-polaroid { margin: 0; width: min(72%, 240px); background: #fff; padding: 8px 8px 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 10px 22px rgba(0, 0, 0, 0.16); transform: rotate(-2deg); animation: wp-drop 0.45s var(--ease); }
.wp-polaroid img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
@keyframes wp-drop { from { transform: translateY(-12px) rotate(4deg) scale(0.92); opacity: 0; } }
.wish-paper.is-sent { animation: wp-fly 0.9s cubic-bezier(0.55, 0, 0.75, 0.3) forwards; pointer-events: none; }
@keyframes wp-fly {
  0% { transform: none; opacity: 1; }
  30% { transform: translateY(-8px) rotate(-1.5deg) scale(0.98); opacity: 1; }
  100% { transform: translateY(-70px) perspective(600px) rotateX(70deg) scale(0.3); opacity: 0; }
}
.wish-thanks { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 8px 8px; }
.wish-thanks b { font: italic 600 1.5rem "Cormorant Garamond", Georgia, serif; color: var(--green); }
.wt-book { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: #0f4a40; color: #ecdcae; animation: wt-pop 0.6s var(--ease); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.wt-book svg { width: 34px; height: 34px; }
@keyframes wt-pop { 0% { transform: scale(0.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.08) rotate(3deg); } }
.wish-list-h { font-size: 0.95rem; margin: 18px 0 10px; }
.wish-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.wish-admin { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.wish-card { position: relative; display: grid; gap: 6px; align-content: start; }
.wish-card .g-del { top: 6px; right: 6px; }

/* --- strona księgi (wspólna: księga, miniatury) --- */
.bk-mini, .fb-paper { container-type: size; background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(246, 238, 220, 0.4)), #fffcf4; color: #2b3533; }
.bk-mini { position: relative; aspect-ratio: 148 / 210; border-radius: 4px 8px 8px 4px; overflow: hidden; padding: 9cqw 8cqw 11cqw; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.12); }
.bk-wish { display: flex; flex-direction: column; align-items: center; min-height: 100%; }
.bk-photo { margin: 0 0 5cqw; max-width: 82%; background: #fff; padding: 2.4cqw 2.4cqw 7cqw; box-shadow: 0 0.5cqw 1cqw rgba(0, 0, 0, 0.1), 0 2cqw 5cqw rgba(0, 0, 0, 0.16); transform: rotate(var(--tilt, 0deg)); flex: none; }
.bk-photo img { display: block; max-width: 100%; max-height: 48cqh; object-fit: contain; }
.bk-text { margin: auto 0; white-space: pre-line; overflow-wrap: anywhere; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; line-height: 1.3; color: #2b3533; }
.bk-text.t-s { font-size: 9.6cqw; } .bk-text.t-m { font-size: 7.4cqw; } .bk-text.t-l { font-size: 5.9cqw; } .bk-text.t-xl { font-size: 4.6cqw; }
.has-photo .bk-text.t-s { font-size: 8cqw; } .has-photo .bk-text.t-m { font-size: 6.3cqw; } .has-photo .bk-text.t-l { font-size: 5cqw; } .has-photo .bk-text.t-xl { font-size: 4cqw; }
.bk-sign { align-self: flex-end; margin: 4cqw 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 6.2cqw; color: #004d40; text-align: right; }
.bk-pno { position: absolute; left: 0; right: 0; bottom: 4.5cqw; text-align: center; font: 600 2.8cqw var(--font); color: #a39b88; letter-spacing: 0.1em; }
.bk-titlepg, .bk-endpg { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.5cqw; }
.bk-orn { font-size: 10cqw; line-height: 1; color: #b08a3e; }
.bk-kicker { font: 700 3.1cqw var(--font); letter-spacing: 0.32em; text-transform: uppercase; }
.bk-titlepg .bk-kicker { color: #b08a3e; }
.bk-titlepg h2 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 11cqw; line-height: 1.02; color: #004d40; margin: 1cqw 0; }
.bk-ev { font: 500 3.2cqw var(--font); color: #66716f; }
.bk-count { margin-top: 5cqw; font: 600 3cqw var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: #9a8f74; }
.bk-endpg p { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 6.4cqw; line-height: 1.3; color: #004d40; margin: 0; max-width: 85%; }
.bk-endpaper { position: absolute; inset: 0; background: radial-gradient(circle at 25% 30%, rgba(15, 74, 64, 0.16) 0 1.5px, transparent 2.5px) 0 0 / 18px 18px, radial-gradient(circle at 75% 70%, rgba(176, 138, 62, 0.2) 0 1.5px, transparent 2.5px) 0 0 / 18px 18px, #efe7d3; }
.bk-cover { position: absolute; inset: 0; container-type: size; overflow: hidden; border-radius: 3px 9px 9px 3px; color: #efdfb4; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 7%, rgba(255, 255, 255, 0.06) 8%, rgba(0, 0, 0, 0) 10%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px), radial-gradient(ellipse at 40% 35%, #17594d, #0b3a32 70%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.15); }
.bk-cover.has-photo { background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 8%), linear-gradient(180deg, rgba(0, 40, 33, 0.35), rgba(0, 40, 33, 0.8)), var(--cover) center / cover, #0b3a32; }
.bk-cover-frame { position: absolute; inset: 7cqw 7cqw 7cqw 9cqw; border: 1.5px solid rgba(239, 223, 180, 0.8); outline: 1px solid rgba(239, 223, 180, 0.4); outline-offset: 1.6cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 6cqw; text-align: center; }
.bk-cover-frame b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 12cqw; line-height: 1.02; color: #f6e9c4; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.bk-cover-frame > span:last-child { font: 500 3.4cqw var(--font); letter-spacing: 0.12em; }

/* --- księga z kartkowaniem --- */
.book-tab { display: grid; gap: 18px; }
.book-bar { display: grid; gap: 12px; }
.book-bar h3 { margin-bottom: 4px; }
.book-view { padding: 36px 12px 18px; border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% 0%, rgba(0, 77, 64, 0.1), transparent 70%), linear-gradient(var(--cloth-a), var(--cloth-b)); border: 1px solid var(--line-soft); overflow: hidden; }
.fb-stage { display: flex; justify-content: center; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.22)); }
.fb-book { position: relative; margin: 0 auto; perspective: 2400px; transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.3, 1); }
.fb[data-mode="spread"] .fb-book { width: min(100%, 980px, calc((100vh - 230px) * 1.4095)); aspect-ratio: 296 / 210; }
.fb[data-mode="single"] .fb-book { width: min(100%, 420px, calc((100vh - 230px) * 0.7048)); aspect-ratio: 148 / 210; }
.fb[data-mode="spread"][data-open="0"] .fb-book { transform: translateX(-25%); }
.fb-page { position: absolute; top: 0; height: 100%; }
.fb-left { left: 0; width: 50%; }
.fb-right { left: 50%; width: 50%; }
.fb-single { left: 0; width: 100%; }
.fb-ghost { visibility: hidden; }
.fb-paper { position: absolute; inset: 0; overflow: hidden auto; padding: 9cqw 8cqw 11cqw; scrollbar-width: thin; }
.fb-right .fb-paper, .fb-single .fb-paper { border-radius: 2px 8px 8px 2px; background: linear-gradient(90deg, rgba(60, 45, 20, 0.16), rgba(60, 45, 20, 0) 7%), linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(246, 238, 220, 0.4)), #fffcf4; box-shadow: 1px 0 0 #e9e1cc, 2px 0 0 #f7f1e2, 3px 0 0 #e3d8bd, 4px 1px 0 #f3ecda; }
.fb-left .fb-paper { border-radius: 8px 2px 2px 8px; background: linear-gradient(270deg, rgba(60, 45, 20, 0.16), rgba(60, 45, 20, 0) 7%), linear-gradient(225deg, rgba(255, 255, 255, 0.6), rgba(246, 238, 220, 0.4)), #fffcf4; box-shadow: -1px 0 0 #e9e1cc, -2px 0 0 #f7f1e2, -3px 0 0 #e3d8bd, -4px 1px 0 #f3ecda; }
.fb-paper .bk-endpaper { border-radius: inherit; }
.fb-closed { border: 0; padding: 0; background: none; cursor: pointer; perspective: 1400px; }
.fb-closed .bk-cover { transform-origin: left center; transition: transform 0.5s var(--ease), box-shadow 0.5s; box-shadow: 4px 0 0 #efe7d3, 6px 1px 0 #d9ceb2, 8px 2px 0 #efe7d3; }
.fb-closed:hover .bk-cover, .fb-closed:focus-visible .bk-cover { transform: rotateY(-14deg); }
.fb-hint { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: rgba(255, 252, 240, 0.92); color: #0f4a40; font: 700 0.8rem var(--font); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); animation: fb-pulse 2.4s ease-in-out infinite; }
.fb-hint svg { width: 16px; height: 16px; }
@keyframes fb-pulse { 50% { transform: translateX(-50%) translateY(-3px); } }
.fb-leaf { position: absolute; top: 0; height: 100%; z-index: 3; transform-style: preserve-3d; }
.fb-leaf.go { transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.3, 1); }
.fb-leaf.side-right, .fb-leaf.side-full { transform-origin: left center; }
.fb-leaf.side-right { left: 50%; width: 50%; }
.fb-leaf.side-full { left: 0; width: 100%; }
.fb-leaf.side-left { left: 0; width: 50%; transform-origin: right center; }
.fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fb-face.back { transform: rotateY(180deg); }
.fb-face > .fb-page { left: 0; width: 100%; }
.fb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0.12) 60%, rgba(0, 0, 0, 0.06)); }
.fb-leaf.go .fb-face::after { animation: fb-shade 0.85s ease-in-out; }
@keyframes fb-shade { 50% { opacity: 1; } }
.fb-face .bk-cover { position: absolute; }
.fb-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.fb-nav .icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--green); }
.fb-nav .icon-btn:disabled { opacity: 0.35; cursor: default; }
.fb-count { min-width: 150px; text-align: center; font-size: 0.86rem; color: var(--muted); font-weight: 600; }

/* --- panel: oferta dodatku --- */
.book-offer { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.book-offer-art { display: grid; place-items: center; perspective: 900px; padding: 10px; }
.bo-book { position: relative; width: 150px; aspect-ratio: 148 / 210; border-radius: 3px 9px 9px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px; color: #efdfb4; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 9%), radial-gradient(ellipse at 40% 35%, #17594d, #0b3a32 70%); box-shadow: 5px 0 0 #efe7d3, 7px 1px 0 #d9ceb2, 9px 2px 0 #efe7d3, 0 18px 30px rgba(0, 0, 0, 0.25); transform: rotateY(-20deg) rotateX(4deg); animation: bo-float 5s ease-in-out infinite; }
.bo-book i { position: absolute; inset: 10px 10px 10px 14px; border: 1px solid rgba(239, 223, 180, 0.7); border-radius: 2px; }
.bo-book b { font: 700 0.62rem var(--font); letter-spacing: 0.28em; text-transform: uppercase; }
.bo-book span { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.35rem; line-height: 1.05; }
@keyframes bo-float { 50% { transform: rotateY(-12deg) rotateX(2deg) translateY(-6px); } }
@media (max-width: 720px) {
  .book-offer { grid-template-columns: 1fr; }
  .book-view { padding: 24px 8px 14px; }
}
/* ruch ograniczony (CONFIG.motion = "system") */ :root[data-motion="reduce"] .fb-hint, :root[data-motion="reduce"] .bo-book, :root[data-motion="reduce"] .wp-polaroid, :root[data-motion="reduce"] .wt-book { animation: none; }
  :root[data-motion="reduce"] .fb-book, :root[data-motion="reduce"] .fb-closed .bk-cover { transition: none; }

/* --- strona startowa: scena „Księga gości” (kartka przewraca się w pętli) --- */
.scb-book { position: relative; width: 82%; aspect-ratio: 296 / 210; perspective: 1600px; filter: drop-shadow(0 3cqw 3cqw rgba(0, 0, 0, 0.2)); margin-bottom: 4cqw; }
.scb-leaf { animation: scb-turn 4.2s cubic-bezier(0.45, 0.05, 0.3, 1) infinite; }
.scb-leaf .fb-face::after { animation: scb-shade 4.2s ease-in-out infinite; }
@keyframes scb-turn { 0%, 30% { transform: rotateY(0deg); } 62%, 100% { transform: rotateY(-180deg); } }
@keyframes scb-shade { 0%, 30% { opacity: 0; } 46% { opacity: 1; } 62%, 100% { opacity: 0; } }

/* --- strona startowa: mała księga gości krążąca wokół telefonu – co kilka sekund się otwiera --- */
.orbit-tile.is-book { width: 70px; border: 0; background: none; box-shadow: none; perspective: 500px; }
.ob-book { position: relative; display: block; aspect-ratio: 148 / 210; }
.ob-page, .ob-cover { position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; }
.ob-page { background: #fffcf4; box-shadow: 2px 0 0 #efe7d3, 3px 1px 0 #d9ceb2, 0 8px 18px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; }
.ob-page em { font: italic 600 0.62rem/1.15 "Cormorant Garamond", Georgia, serif; color: #2b3533; }
.ob-page small { font: italic 600 0.5rem "Cormorant Garamond", Georgia, serif; color: #004d40; align-self: flex-end; }
.ob-cover { display: grid; place-items: center; padding: 8px; text-align: center; transform-origin: left center; backface-visibility: hidden; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 12%), radial-gradient(ellipse at 40% 35%, #17594d, #0b3a32 70%); box-shadow: inset 0 0 0 3px #0b3a32, inset 0 0 0 4px rgba(239, 223, 180, 0.6); }
.ob-cover b { font: 700 0.42rem var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: #efdfb4; line-height: 1.5; }
/* ruch: zawsze (CONFIG.motion) */ .ob-cover { animation: ob-open 6s ease-in-out infinite; }
  @keyframes ob-open { 0%, 30% { transform: rotateY(0deg); } 45%, 80% { transform: rotateY(-160deg); } 95%, 100% { transform: rotateY(0deg); } }
@media (max-width: 520px) { .orbit-tile.is-book { width: 56px; } }

/* --- strona startowa: telefon „na żywo” (initHeroLive) i zdjęcia-sceny --- */
.ph-photo { display: grid !important; place-items: center; aspect-ratio: 1; border-radius: 6px; background: #ddd center / cover no-repeat; color: #fff; }
.ph-photo svg { width: 34%; height: 34%; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.orbit-tile .ph-photo { border-radius: 8px; }
.ph-grid .ph-photo.pop { animation: ph-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes ph-pop { from { transform: scale(0.2) rotate(-12deg); opacity: 0; } }
.ph-btn { position: relative; overflow: hidden; transition: transform 0.2s; }
.ph-btn.tap { transform: scale(0.94); }
.ph-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #2fae8c; border-radius: 0 3px 3px 0; }
.ph-btn.sending .ph-progress { width: 100%; transition: width 0.95s ease-out; }
.ph-toast { position: absolute; left: 12px; right: 12px; top: 26px; bottom: auto; height: auto; z-index: 2; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.96); color: #0f4a40; font-size: 0.62rem; font-weight: 700; text-align: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(-8px); pointer-events: none; }
.ph-toast.show { animation: ph-toast 2.2s ease forwards; }
@keyframes ph-toast { 0% { opacity: 0; transform: translateY(-10px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* --- baner promocji na górze strony (włączany w panelu admina) --- */
.sale-banner { background: linear-gradient(90deg, #0f4a40, #17594d 55%, #0f4a40); color: #f6ecd0; font-size: 0.9rem; }
.sale-banner .container { display: flex; gap: 12px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.sale-banner p { margin: 0; flex: 1; font-weight: 600; }
.sale-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(246, 236, 208, 0.16); color: #e9cf86; }
.sale-ic svg { width: 16px; height: 16px; }
.sale-cta { flex: none; display: inline-flex; gap: 4px; align-items: center; padding: 6px 14px; border-radius: 999px; background: #f6ecd0; color: #0f4a40; font-weight: 800; font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
.sale-cta svg { width: 14px; height: 14px; }
.sale-cta:hover { background: #fff; }
.sale-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0.75; cursor: pointer; display: grid; place-items: center; }
.sale-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.sale-x svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .sale-banner .container { flex-wrap: wrap; gap: 8px 10px; }
  .sale-banner p { flex-basis: calc(100% - 80px); font-size: 0.84rem; }
  .sale-cta { margin-left: 38px; }
}
.banner-admin { display: grid; gap: 12px; margin-bottom: 18px; border-left: 4px solid var(--line-strong); }
.banner-admin.is-on { border-left-color: var(--green); }
.ba-head { display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; }
.ba-head .switch { margin-right: auto; }
.sale-preview { border-radius: var(--radius-sm); overflow: hidden; }
.sale-preview .container { padding-left: 14px; padding-right: 14px; }
.ba-form { display: grid; gap: 12px; }

/* =========================================================
   Strona WWW wesela (dodatek) – #/s/{adres}, qronika.online/slub/{adres}
   Szkło na zdjęciu pary, powolne przybliżanie tła, światełka, odliczanie, oś czasu, RSVP.
   Kolory stałe (tło zawsze ciemne), niezależnie od trybu jasny/ciemny aplikacji.
   ========================================================= */
.www { position: relative; min-height: 100vh; color: #fff; font-family: var(--font); }
.www-bg { position: fixed; inset: 0; overflow: hidden; background: var(--t-dark, #0b2a25); }
.www-bg i { position: absolute; inset: -4%; background: center / cover no-repeat; transform: scale(1.06); }
.www-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--t-rgb, 4, 20, 17), calc(var(--ov, 0.45) * 0.6)) 0%, rgba(var(--t-rgb, 4, 20, 17), calc(var(--ov, 0.45) + 0.15)) 70%, rgba(var(--t-rgb, 4, 20, 17), calc(var(--ov, 0.45) + 0.3)) 100%); }
.www-bg.no-photo i { background: radial-gradient(circle at 20% 30%, rgba(var(--t-accent-rgb, 233, 207, 134), 0.25), transparent 40%), radial-gradient(circle at 80% 70%, var(--t-glow, rgba(47, 174, 140, 0.35)), transparent 45%), linear-gradient(160deg, var(--t-deep, #0f4a40), var(--t-dark, #062822)); }
.www-lights { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.www-lights span { position: absolute; left: var(--x); bottom: -20px; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 240, 200, 0.85); box-shadow: 0 0 12px 3px rgba(255, 226, 150, 0.45); opacity: 0; }
.www-body { position: relative; z-index: 1; min-height: 100vh; }
.www-center { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.glass { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.26); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-radius: 28px; }
.www-k { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--t-accent, #f1dc9f); }
.www-title { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); margin: 0; }
.www-title.big { font-size: clamp(3rem, 13vw, 6.4rem); }
.www-date { font-size: 0.98rem; letter-spacing: 0.04em; opacity: 0.92; }
.www-btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px; border: 0; background: var(--t-btn, #f6ecd0); color: var(--t-ink, #0b3a32); font: 800 0.92rem var(--font); text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.www-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
.www-btn svg { width: 18px; height: 18px; }
.www-btn.ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.www-btn.small { padding: 9px 16px; font-size: 0.82rem; }
.www-btn.wide { width: 100%; padding: 15px; font-size: 1rem; }
.www-btn:disabled { opacity: 0.7; cursor: default; }

/* ekran PIN-u */
.www-lock { width: min(100%, 420px); padding: 34px 26px 28px; display: grid; gap: 10px; justify-items: center; text-align: center; animation: www-in 0.8s var(--ease) both; }
.www-lock-txt { display: inline-flex; gap: 6px; align-items: center; margin: 14px 0 2px; font-size: 0.86rem; opacity: 0.9; }
.www-lock-txt svg { width: 16px; height: 16px; }
.www-pin { width: 100%; max-width: 240px; text-align: center; font: 700 1.8rem/1 var(--font); letter-spacing: 0.4em; padding: 14px 12px 14px 22px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.16); color: #fff; outline: none; }
.www-pin::placeholder { color: rgba(255, 255, 255, 0.5); }
.www-pin:focus { border-color: var(--t-accent, #f1dc9f); box-shadow: 0 0 0 4px rgba(var(--t-accent-rgb, 241, 220, 159), 0.25); }
.www-err { margin: 0; color: #ffd2d2; font-weight: 600; font-size: 0.88rem; }
.www-lock.shake { animation: www-shake 0.45s; }
@keyframes www-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes www-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }

/* górny pasek z sekcjami */
.www-nav { position: sticky; top: 12px; z-index: 5; margin: 12px auto 0; width: min(calc(100% - 24px), 980px); display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 10px 14px 10px 22px; border-radius: 999px; }
.www-nav b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.25rem; white-space: nowrap; }
.www-nav span { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.www-nav a { color: #fff; text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.www-nav a:hover { background: rgba(255, 255, 255, 0.16); }
@media (max-width: 640px) { .www-nav b { display: none; } .www-nav { padding: 6px; justify-content: center; } }

/* hero z odliczaniem */
.www-hero { min-height: calc(100vh - 70px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px 16px 80px; position: relative; }
.www-cd { display: grid; grid-template-columns: repeat(4, minmax(64px, 104px)); gap: 12px; margin-top: 18px; }
.cd-tile { display: grid; gap: 2px; padding: 16px 6px 12px; border-radius: 20px; }
.cd-tile b { font-size: clamp(1.7rem, 7vw, 2.6rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.cd-tile span { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.cd-tile.tick b { animation: cd-tick 0.45s var(--ease); }
@keyframes cd-tick { from { transform: translateY(-35%); opacity: 0.2; } }
.cd-done { grid-column: 1 / -1; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2rem; margin: 0; }
.www-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.www-down { position: absolute; bottom: 24px; left: 50%; translate: -50% 0; color: #fff; opacity: 0.85; }
.www-down svg { width: 30px; height: 30px; transform: rotate(90deg); }

/* sekcje */
.www-sec { width: min(calc(100% - 32px), 980px); margin: 0 auto; padding: 46px 0; scroll-margin-top: 80px; }
.www-h { text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 7vw, 3.2rem); color: #fff; margin: 0 0 28px; }
.www-h::after { content: "❦"; display: block; font-size: 1.1rem; font-style: normal; color: var(--t-accent, #f1dc9f); margin-top: 4px; }
.www-welcome { padding: 34px 28px; text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 720px; margin: 0 auto; }
.www-welcome p { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(1.25rem, 4vw, 1.6rem); line-height: 1.45; }
.www-welcome b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; color: var(--t-accent, #f1dc9f); font-size: 1.3rem; }
.www-orn { color: var(--t-accent, #f1dc9f); font-size: 1.6rem; }

/* plan dnia – oś czasu */
.www-tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; }
.www-tl::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; translate: -1px 0; background: linear-gradient(rgba(var(--t-accent-rgb, 241, 220, 159), 0), var(--t-accent, #f1dc9f) 8%, var(--t-accent, #f1dc9f) 92%, rgba(var(--t-accent-rgb, 241, 220, 159), 0)); }
.www-tl li { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.tl-dot { grid-column: 2; justify-self: center; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--t-btn, #f6ecd0); color: var(--t-ink, #0b3a32); box-shadow: 0 0 0 6px rgba(246, 236, 208, 0.18), 0 10px 24px rgba(0, 0, 0, 0.3); z-index: 1; }
.tl-dot svg { width: 24px; height: 24px; }
.tl-card { padding: 16px 20px; border-radius: 22px; }
.www-tl li.l .tl-card { grid-column: 1; grid-row: 1; text-align: right; }
.www-tl li.r .tl-card { grid-column: 3; grid-row: 1; }
.tl-time { font-size: 1.5rem; font-weight: 800; color: var(--t-accent, #f1dc9f); font-variant-numeric: tabular-nums; }
.tl-card h3 { color: #fff; font-size: 1.08rem; margin: 2px 0 0; }
.tl-card p { margin: 4px 0 0; font-size: 0.86rem; opacity: 0.85; }
@media (max-width: 640px) {
  .www-tl::before { left: 25px; }
  .www-tl li { grid-template-columns: 50px 1fr; gap: 14px; }
  .tl-dot { grid-column: 1; }
  .www-tl li.l .tl-card, .www-tl li.r .tl-card { grid-column: 2; text-align: left; }
}

/* miejsca z mapą */
.www-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.www-place { padding: 24px; display: grid; gap: 6px; align-content: start; }
.pl-time { font-size: 2rem; font-weight: 800; color: var(--t-accent, #f1dc9f); }
.www-place h3 { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.7rem; margin: 0; }
.www-place p { margin: 0; opacity: 0.9; }
.pl-map { margin: 10px 0 8px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); }
.pl-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.85); }
.www-place .www-btn { justify-self: start; }

/* warto wiedzieć */
.www-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.www-card { padding: 22px; display: grid; gap: 8px; align-content: start; }
.www-card h3 { color: #fff; font-size: 1.05rem; margin: 4px 0 0; }
.www-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; opacity: 0.9; }
.ic-bub { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: rgba(var(--t-accent-rgb, 241, 220, 159), 0.2); color: var(--t-accent, #f1dc9f); border: 1px solid rgba(var(--t-accent-rgb, 241, 220, 159), 0.35); }
.ic-bub svg { width: 24px; height: 24px; }
.ic-bub.big { width: 72px; height: 72px; border-radius: 50%; background: var(--t-btn, #f6ecd0); color: var(--t-ink, #0b3a32); }
.ic-bub.big svg { width: 38px; height: 38px; }

/* RSVP */
.www-rsvp { max-width: 620px; margin: 0 auto; padding: 28px 24px; }
.rsvp-form { display: grid; gap: 16px; }
.www-note { margin: 0; font-size: 0.88rem; opacity: 0.9; text-align: center; }
.www-note.ok { display: flex; gap: 6px; align-items: center; justify-content: center; color: #c9f1de; }
.www-note.ok svg { width: 16px; height: 16px; }
.w-field { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 700; }
.w-field small { font-weight: 500; opacity: 0.75; }
.w-field input, .w-field textarea { width: 100%; padding: 13px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.14); color: #fff; font: 500 1rem var(--font); outline: none; }
.w-field input::placeholder, .w-field textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.w-field input:focus, .w-field textarea:focus { border-color: var(--t-accent, #f1dc9f); box-shadow: 0 0 0 4px rgba(var(--t-accent-rgb, 241, 220, 159), 0.2); }
.w-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-choice label, .w-menu label { position: relative; cursor: pointer; }
.w-choice input, .w-menu input { position: absolute; opacity: 0; inset: 0; }
.w-choice span { display: block; text-align: center; padding: 15px 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); font-weight: 700; transition: all 0.2s; }
.w-choice input:checked + span { background: var(--t-btn, #f6ecd0); color: var(--t-ink, #0b3a32); border-color: var(--t-btn, #f6ecd0); transform: scale(1.02); }
.w-choice input:focus-visible + span, .w-menu input:focus-visible + span { outline: 3px solid var(--t-accent, #f1dc9f); outline-offset: 2px; }
.w-yes { display: grid; gap: 14px; }
.w-yes[hidden] { display: none; }
.w-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-step { display: grid; gap: 8px; justify-items: center; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); font-size: 0.82rem; font-weight: 700; }
.w-step div { display: flex; gap: 14px; align-items: center; }
.w-step button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.2rem; cursor: pointer; }
.w-step b { font-size: 1.4rem; min-width: 1.4em; text-align: center; }
.w-menu { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.w-menu legend { font-size: 0.82rem; font-weight: 700; margin-bottom: 8px; }
.w-menu span { display: block; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); font-size: 0.85rem; font-weight: 600; }
.w-menu input:checked + span { background: var(--t-btn, #f6ecd0); color: var(--t-ink, #0b3a32); }
.w-check { display: flex; gap: 10px; align-items: center; font-size: 0.92rem; font-weight: 600; }
.w-check input { width: 20px; height: 20px; accent-color: var(--t-accent, #f1dc9f); }
.rsvp-done { position: relative; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 10px 0; animation: www-in 0.6s var(--ease) both; }
.rsvp-done h3 { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2rem; margin: 6px 0 0; }
.rsvp-done p { margin: 0 0 6px; opacity: 0.9; }
.confetti { position: absolute; left: 50%; top: 46px; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--a)) translateY(0); opacity: 0; animation: confetti 1.1s ease-out forwards; }
@keyframes confetti { 10% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-120px) rotate(200deg); opacity: 0; } }
.www-foot { display: grid; gap: 6px; justify-items: center; padding: 40px 16px 50px; font-size: 0.8rem; opacity: 0.85; text-align: center; }
.www-foot a { color: var(--t-accent, #f1dc9f); }

/* animacje: tło, światełka, pojawianie się przy przewijaniu (tylko gdy przeglądarka to umie) */
/* ruch: zawsze (CONFIG.motion) */ .www-bg i { animation: www-kb 32s ease-in-out infinite alternate; }
  @keyframes www-kb { to { transform: scale(1.18) translate(-1.5%, -1%); } }
  .www-lights span { animation: www-float var(--t) linear var(--d) infinite; }
  @keyframes www-float { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.9; } 80% { opacity: 0.6; } 100% { transform: translateY(-105vh) translateX(30px); opacity: 0; } }
  .www-hero .rv { animation: www-in 0.9s var(--ease) both; }
  .www-hero .rv:nth-child(2) { animation-delay: 0.1s; } .www-hero .rv:nth-child(3) { animation-delay: 0.2s; } .www-hero .rv:nth-child(4) { animation-delay: 0.32s; } .www-hero .rv:nth-child(5) { animation-delay: 0.45s; }
  .www-down { animation: hero-bounce 1.8s ease-in-out infinite; }
  @supports (animation-timeline: view()) {
    .www-sec .rv { animation: www-rv linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .www-tl li.l.rv { animation-name: www-rv-l; } .www-tl li.r.rv { animation-name: www-rv-r; }
    @keyframes www-rv { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
    @keyframes www-rv-l { from { opacity: 0; transform: translateX(-40px); } }
    @keyframes www-rv-r { from { opacity: 0; transform: translateX(40px); } }
  }

/* --- panel: edytor strony WWW --- */
.addon-www { position: relative; width: 42px; height: 56px; border-radius: 8px; background: linear-gradient(160deg, #17594d, #0b3a32); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.15); display: grid; place-items: center; color: #f1dc9f; transition: transform 0.4s var(--ease); }
.addon-www b { display: grid; }
.addon-www svg { width: 22px; height: 22px; }
.addon-www i { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 6px; border-radius: 3px; background: rgba(241, 220, 159, 0.6); }
.addon-card:has(input:checked) .addon-www { transform: rotate(5deg) scale(1.06); }
@media (max-width: 560px) { .addon-www { grid-area: a; } }
.site-admin { display: grid; gap: 18px; }
.site-share { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
.ss-qr { background: #fff; padding: 8px; border-radius: 14px; line-height: 0; }
.ss-main { display: grid; gap: 8px; }
.site-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.site-form { display: grid; gap: 18px; }
.site-form .panel { display: grid; gap: 12px; }
.site-side { display: grid; gap: 18px; align-content: start; }
.site-rsvp { display: grid; gap: 6px; }
.site-remind { display: grid; gap: 10px; }
.site-remind h3, .site-rsvp h3 { display: flex; gap: 8px; align-items: center; }
.site-remind h3 svg { width: 20px; height: 20px; color: var(--green); }
.site-remind .seg { justify-self: start; }
.remind-text { font-size: 0.92rem; line-height: 1.5; resize: vertical; }
.remind-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.remind-btns svg { width: 17px; height: 17px; }
.btn-wa { background: #25d366; color: #0b3d22; }
.btn-wa:hover:not(:disabled) { background: #1ebe5b; }
.remind-qr summary { cursor: pointer; }
.remind-qr #remind-qr { width: 170px; margin-top: 8px; padding: 8px; background: #fff; border-radius: 12px; line-height: 0; }
.remind-qr #remind-qr svg { width: 100%; height: auto; }
.slug-row { display: flex; align-items: center; gap: 8px; }
.slug-pre { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.se-place { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; display: grid; gap: 10px; margin: 0; }
.se-place legend { padding: 0 6px; }
.se-list { display: grid; gap: 10px; }
.se-row { display: grid; grid-template-columns: 36px 116px 1fr 150px auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
#se-info .se-row { grid-template-columns: 36px 1fr 150px auto; }
.se-row .se-note { grid-column: 2 / -1; }
#se-info .se-row .se-note { grid-column: 2 / -1; }
.se-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--green-tint); color: var(--green); }
.se-ic svg { width: 20px; height: 20px; }
.se-act { display: flex; gap: 2px; }
.se-act [data-up] svg { transform: rotate(90deg); }
.site-save { position: sticky; bottom: 12px; z-index: 3; display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 16px; border-radius: var(--radius-md); background: var(--glass-strong); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.rsvp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.rsvp-stats div { display: grid; padding: 10px; border-radius: var(--radius-sm); background: var(--green-tint); text-align: center; }
.rsvp-stats b { font-size: 1.5rem; color: var(--green); }
.rsvp-stats span { font-size: 0.72rem; color: var(--muted); }
.rsvp-list { display: grid; gap: 8px; max-height: 560px; overflow: auto; }
.rsvp-item { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left: 4px solid var(--green); }
.rsvp-item.no { border-left-color: var(--line-strong); opacity: 0.8; }
.rsvp-item p { margin: 4px 0 0; }
.site-offer .so-phone { width: 150px; aspect-ratio: 9 / 16; border-radius: 22px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-align: center; background: radial-gradient(circle at 30% 20%, rgba(241, 220, 159, 0.3), transparent 50%), linear-gradient(160deg, #17594d, #062822); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25); animation: bo-float 5s ease-in-out infinite; }
.so-k { font-size: 0.45rem; letter-spacing: 0.25em; text-transform: uppercase; color: #f1dc9f; font-weight: 700; margin-top: 8px; }
.so-phone b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.3rem; line-height: 1; }
.so-cd { display: flex; gap: 4px; }
.so-cd i { font-style: normal; font-weight: 800; font-size: 0.7rem; padding: 5px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); }
.so-row { width: 90%; height: 26px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); }
.so-row.short { width: 70%; }
.so-btn { margin-top: auto; font-size: 0.5rem; font-weight: 800; padding: 7px 10px; border-radius: 999px; background: #f6ecd0; color: #0b3a32; }
@media (max-width: 900px) {
  .site-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .site-share { grid-template-columns: 1fr; justify-items: start; }
  .ss-qr { width: 120px; }
  .se-row, #se-info .se-row { grid-template-columns: 36px 1fr auto; }
  .se-row .se-time { grid-column: 2; }
  .se-row .se-icon { grid-column: 2 / -1; }
  .slug-row { flex-wrap: wrap; }
}

/* --- scena: strona WWW w telefonie --- */
.ss-phone { width: 40%; aspect-ratio: 9 / 18.5; border-radius: 6cqw; background: #10201d; padding: 1.4cqw; box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.35); }
.ss-screen { position: relative; height: 100%; border-radius: 4.8cqw; overflow: hidden; background: center / cover; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding: 6cqw 2.4cqw 3cqw; color: #fff; text-align: center; }
.ss-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 20, 17, 0.35), rgba(4, 20, 17, 0.75)); }
.ss-screen > * { position: relative; }
.ss-k { font-size: 1.5cqw; letter-spacing: 0.3em; text-transform: uppercase; color: #f1dc9f; font-weight: 700; }
.ss-names { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 5.4cqw; line-height: 1; }
.ss-d { font-size: 1.7cqw; opacity: 0.9; }
.ss-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; width: 100%; margin-top: 1cqw; }
.ss-cd i { display: grid; padding: 1.2cqw 0; border-radius: 2cqw; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); font-style: normal; }
.ss-cd b { font-size: 3.4cqw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ss-cd b.tick { animation: cd-tick 0.45s var(--ease); }
.ss-cd small { font-size: 1.3cqw; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.08em; }
.ss-tl { display: grid; gap: 1cqw; width: 100%; margin-top: 1.4cqw; }
.ss-tl span { display: flex; gap: 1.6cqw; align-items: center; padding: 1.2cqw 1.8cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 1.9cqw; text-align: left; }
.ss-tl b { color: #f1dc9f; font-weight: 800; }
.ss-btn { margin-top: auto; display: inline-flex; gap: 1cqw; align-items: center; padding: 1.6cqw 3cqw; border-radius: 999px; background: #f6ecd0; color: #0b3a32; font-size: 2cqw; font-weight: 800; }
.ss-btn svg { width: 2.4cqw; height: 2.4cqw; }
.ss-notes { position: absolute; right: 4cqw; top: 16%; display: grid; gap: 2cqw; width: 34%; }
.ss-note { display: grid; grid-template-columns: auto 1fr; column-gap: 1.6cqw; align-items: center; padding: 1.8cqw 2.2cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.95); color: #0b3a32; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.25); opacity: 0; }
.ss-note i { grid-row: span 2; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; display: grid; place-items: center; background: #2fae8c; color: #fff; }
.ss-note i svg { width: 2.6cqw; height: 2.6cqw; }
.ss-note b { font-size: 2.1cqw; }
.ss-note small { font-size: 1.7cqw; color: #4a5d5a; }
/* ruch: zawsze (CONFIG.motion) */ .ss-note { animation: ss-note 9s ease-in-out infinite; }
  .ss-note:nth-child(2) { animation-delay: 1.4s; } .ss-note:nth-child(3) { animation-delay: 2.8s; }
  @keyframes ss-note { 0% { opacity: 0; transform: translateX(14px) scale(0.92); } 6%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-8px); } }
  .ss-btn { animation: ss-pulse 2.6s ease-in-out infinite; }
  @keyframes ss-pulse { 50% { box-shadow: 0 0 0 1.4cqw rgba(246, 236, 208, 0.25); } }
.mode-tag.gratis { color: #6a4a00; background: #fbecc0; }
.gratis-panel { border-left: 4px solid #d9b45a; }
.gratis-panel h3 { display: flex; gap: 8px; align-items: center; }
.gratis-panel h3 svg { width: 20px; height: 20px; color: #b08a3e; }
#order-form.is-gratis .pkg-option:has(input:disabled:not(:checked)), #order-form.is-gratis .keep-option:has(input:disabled:not(:checked)), #order-form.is-gratis .addon-card:has(input:disabled:not(:checked)), #order-form.is-gratis .video-choice .fmt:has(input:disabled:not(:checked)) { opacity: 0.4; pointer-events: none; }

/* --- „Jak to działa”: kroki 5–6 (dodatki) – scena galerii odjeżdża, wjeżdża księga albo strona WWW --- */
.hw-tag { display: inline-block; font-style: normal; font-size: 0.68rem; font-weight: 800; color: #6a4a00; background: #fbecc0; border-radius: 999px; padding: 2px 8px; vertical-align: middle; white-space: nowrap; }
.howto-steps li.is-extra b { background: #fbecc0; color: #6a4a00; }
.howto-steps li.is-extra.on b, .howto-steps li.is-extra.done b { background: #b08a3e; color: #fff; }
.hw-x { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(6cqw) scale(0.94); transition: opacity 0.6s, transform 0.9s var(--ease2); pointer-events: none; z-index: 4; }
.hw-xbook .scb-book { width: 86%; margin: 0; }
.hw-xsite .ss-phone { width: 34%; margin-right: 22%; }
.hw-xsite .ss-notes { right: 5cqw; top: 22%; width: 30%; }
.ss-wa { position: absolute; left: 1.6cqw; right: 1.6cqw; top: 2.2cqw; z-index: 3; display: grid; gap: 0.8cqw; padding: 1.4cqw 1.8cqw; border-radius: 2.4cqw; background: rgba(240, 252, 232, 0.96); text-align: left; color: #0b3a32; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.25); opacity: 0; }
.ss-wa-h { display: flex; gap: 1cqw; align-items: center; min-width: 0; }
.hw-xsite .ss-wa { grid-template-columns: minmax(0, 1fr); }
.ss-wa-h b { min-width: 0; }
.ss-wa small { overflow-wrap: anywhere; }
.hw-xsite .ss-btn { white-space: nowrap; font-size: 1.5cqw; padding: 1.4cqw 2.4cqw; }
.ss-wa-h svg { width: 3cqw; height: 3cqw; color: #1faa53; flex: none; }
.ss-wa-h b { font-size: 2.1cqw; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-wa-free { font-style: normal; font-size: 1.6cqw; font-weight: 800; color: #6a4a00; background: #fbecc0; border-radius: 99px; padding: 0.3cqw 1.2cqw; white-space: nowrap; }
.ss-wa small { font-size: 1.7cqw; line-height: 1.35; color: #24413b; }
.hw-xsite .ss-wa { animation: ss-push 9s ease-in-out infinite; }
@keyframes ss-push { 0% { opacity: 0; transform: translateY(-120%); } 6%, 62% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-120%); } }
.hw-xsite .ss-names { font-size: 4.2cqw; white-space: nowrap; }
.hw-xsite .ss-tl span:nth-child(3) { display: none; }
.hw-xsite .ss-screen { gap: 1.3cqw; padding-top: 5cqw; }
.howto[data-step="4"] .hw-xbook, .howto[data-step="5"] .hw-xaudio, .howto[data-step="6"] .hw-xdj, .howto[data-step="7"] .hw-xcap, .howto[data-step="8"] .hw-xsite, .howto[data-step="9"] .hw-xtheme { opacity: 1; transform: none; }
.howto:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"], [data-step="8"], [data-step="9"]) .hw-stage > :not(.hw-x) { opacity: 0 !important; transform: scale(0.9) !important; transition: opacity 0.5s, transform 0.6s; pointer-events: none; }
.howto:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"], [data-step="8"], [data-step="9"]) :is(.hw-sa, .hw-sb) { display: none !important; }
.hw-xbook .scb-leaf { animation: scb-turn 4.2s cubic-bezier(0.45, 0.05, 0.3, 1) infinite; }
.hw-xsite .ss-note { animation: ss-note 9s ease-in-out infinite; }
.hw-xsite .ss-note { animation-delay: 1.4s; } .hw-xsite .ss-note:nth-child(2) { animation-delay: 2.6s; } .hw-xsite .ss-note:nth-child(3) { animation-delay: 3.8s; }
@media (max-width: 600px) {
  .hw-xsite .ss-phone { width: 44%; margin-right: 38%; }
  .hw-xsite .ss-btn { font-size: 2.2cqw; padding: 1.6cqw 3cqw; }
  .hw-xsite .ss-notes { width: 36%; right: 2.5cqw; top: 26%; }
  .ss-wa-h b { font-size: 2.4cqw; white-space: nowrap; } .ss-wa small { font-size: 2.2cqw; } .ss-wa-free { font-size: 1.8cqw; } .ss-wa-h svg { width: 3.2cqw; height: 3.2cqw; }
  .hw-xbook .scb-book { width: 96%; }
}
.howto.static .hw-x { display: none; }

/* --- „Krok po kroku”: trzy komiksy po 4 kadry --- */
.steps-more { padding-top: 8px; }
.sb > summary { list-style: none; cursor: pointer; display: grid; justify-items: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 14px 26px; border-radius: 999px; background: var(--fill); color: var(--on-fill); box-shadow: var(--shadow-card); text-align: center; transition: transform 0.2s var(--ease); }
.sb > summary::-webkit-details-marker { display: none; }
.sb > summary:hover { transform: translateY(-2px); }
.sb > summary span { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; }
.sb > summary svg { width: 18px; height: 18px; }
.sb > summary small { font-size: 0.74rem; opacity: 0.85; }
.sb[open] > summary { margin-bottom: 26px; }
.sb-row { margin: 30px auto 0; max-width: 860px; }
.sb-row h3 { text-align: center; margin-bottom: 14px; }

/* jedna scena = cały proces; pętla 10 s, 4 fazy po 2,5 s (--k: 0–3) */
.fx { --t: 10s; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.9), transparent 60%), linear-gradient(160deg, var(--cream), var(--card)); border: 1px solid var(--line); overflow: hidden; container-type: inline-size; }
.fx > * { position: absolute; }
.fx-ph { display: block; background: center / cover; }
.fx-phone { width: 23cqw; aspect-ratio: 9 / 17; border-radius: 3.4cqw; background: #10201d; padding: 1.1cqw; box-shadow: 0 2.4cqw 5cqw rgba(0, 0, 0, 0.22); }
.fx-scr { position: relative; height: 100%; border-radius: 2.4cqw; overflow: hidden; background: #fff; }
.fx-scr > div { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2cqw; }
.fz, .fz-from1, .fz-from2, .fz-to2 { opacity: 0; animation: var(--t) ease infinite both; }
.fz { animation-name: fz; animation-delay: calc(var(--k) * var(--t) / 4); animation-fill-mode: none; }
@keyframes fz { 0% { opacity: 0; transform: scale(0.94); } 3%, 23% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
.fz-from1 { animation-name: fz-from1; }
@keyframes fz-from1 { 0%, 25% { opacity: 0; } 28%, 97% { opacity: 1; } 100% { opacity: 0; } }
.fz-from2 { animation-name: fz-from2; }
@keyframes fz-from2 { 0%, 68% { opacity: 0; } 71%, 98% { opacity: 1; } 100% { opacity: 0; } }
.fz-to2 { animation-name: fz-to2; }
@keyframes fz-to2 { 0% { opacity: 1; } 68% { opacity: 1; } 71%, 98% { opacity: 0; } 100% { opacity: 1; } }

/* podpisy: podświetla się krok, który właśnie widać */
.fx-caps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fx-caps li { display: flex; gap: 7px; align-items: center; justify-content: center; padding: 8px 6px; border-radius: 999px; font-weight: 800; font-size: 0.86rem; color: var(--ink); text-align: center; line-height: 1.15; opacity: 0.38; animation: fx-cap 10s ease infinite; animation-delay: calc(var(--k) * 2.5s); animation-fill-mode: none; }
.fx-caps b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 0.72rem; }
#sb-book .fx-caps b, #sb-site .fx-caps b { background: #b08a3e; }
@keyframes fx-cap { 0%, 24% { opacity: 1; background: var(--card); box-shadow: var(--shadow-card); } 26%, 100% { opacity: 0.38; } }
@media (max-width: 720px) { .fx-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-caps li { font-size: 0.8rem; } }

/* — galeria: kod QR → zdjęcie → album → ZIP — */
.fx-qr { left: 4cqw; top: 15cqw; width: 15cqw; padding: 1.4cqw; background: #fff; border-radius: 2cqw; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.12); line-height: 0; animation: fx-on0 10s ease infinite; }
.fx-qr svg, .fx-target svg, .fx-inv-qr svg { width: 100%; height: auto; }
.fx-scan { position: absolute; left: 6%; right: 6%; top: 10%; height: 0.5cqw; background: #2fae8c; box-shadow: 0 0 1.6cqw #2fae8c; animation: fx-scan 10s ease-in-out infinite; }
@keyframes fx-scan { 0% { top: 10%; opacity: 1; } 8% { top: 88%; } 16% { top: 10%; } 22% { top: 88%; opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes fx-on0 { 0%, 23% { opacity: 1; transform: scale(1.05); } 27%, 96% { opacity: 0.45; transform: none; } 100% { opacity: 1; } }
.fx-gal .fx-phone { left: 24cqw; top: 5cqw; }
.fx-target { width: 62%; padding: 1cqw; background: #fff; outline: 0.5cqw dashed #2fae8c; outline-offset: 1.2cqw; border-radius: 1cqw; line-height: 0; }
.fx-gal .fx-scr { background: #1d302c; }
.fx-gal .fz-from1 { animation-name: fx-shot; }
@keyframes fx-shot { 0%, 25% { opacity: 0; } 28%, 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
.fx-gal .fz-from1 .fx-ph { position: absolute; inset: 0; }
.fx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: fx-flash 10s ease infinite; }
@keyframes fx-flash { 0%, 33% { opacity: 0; } 35% { opacity: 0.95; } 42%, 100% { opacity: 0; } }
.fx-sent { color: #fff; font-size: 2.4cqw; opacity: 0; animation: fx-sent 10s ease infinite; }
.fx-sent span { width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; background: #2fae8c; }
.fx-sent svg { width: 60%; height: 60%; }
@keyframes fx-sent { 0%, 52% { opacity: 0; transform: scale(0.6); } 56%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fx-fly { left: 27cqw; top: 14cqw; width: 17cqw; aspect-ratio: 1; padding: 0.8cqw; background: #fff; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, 0.25); opacity: 0; animation: fx-fly 10s cubic-bezier(0.5, 0, 0.3, 1) infinite; z-index: 3; }
.fx-fly .fx-ph { width: 100%; height: 100%; }
@keyframes fx-fly { 0%, 50% { opacity: 0; transform: none; } 52% { opacity: 1; transform: none; } 66% { opacity: 1; transform: translate(26cqw, -3cqw) rotate(8deg) scale(0.95); } 70%, 100% { opacity: 0; transform: translate(26cqw, -3cqw) rotate(8deg) scale(0.95); } }
.fx-album { left: 51cqw; top: 9cqw; width: 19cqw; aspect-ratio: 1; animation: fx-on2 10s ease infinite; }
.fx-album .fx-ph { position: absolute; inset: 0; border: 0.9cqw solid #fff; border-radius: 1cqw; box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, 0.18); }
.fx-album .fx-ph:nth-child(1) { transform: rotate(-9deg); }
.fx-album .fx-ph:nth-child(2) { transform: rotate(6deg); }
.fx-album .fx-new { opacity: 0; transform: rotate(-2deg); animation: fx-new 10s ease infinite; }
@keyframes fx-new { 0%, 67% { opacity: 0; } 70%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-on2 { 0%, 48% { opacity: 0.45; transform: none; } 52%, 73% { opacity: 1; transform: scale(1.05); } 77%, 100% { opacity: 0.45; transform: none; } }
.fx-badge { position: absolute; left: 50%; bottom: -8cqw; translate: -50% 0; z-index: 2; white-space: nowrap; display: inline-flex; gap: 0.6cqw; align-items: center; background: var(--fill); color: #fff; border-radius: 999px; padding: 0.8cqw 2.2cqw; font-size: 2.2cqw; }
.fx-num { display: inline-grid; } .fx-num > span { grid-area: 1 / 1; }
.fx-laptop { right: 3cqw; top: 13cqw; width: 23cqw; animation: fx-on3 10s ease infinite; }
@keyframes fx-on3 { 0%, 73% { opacity: 0.45; transform: none; } 77%, 97% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.45; } }
.fx-lscr { position: relative; aspect-ratio: 16 / 10; border: 1cqw solid #1d302c; border-radius: 1.4cqw 1.4cqw 0 0; background: #fff; overflow: hidden; }
.fx-lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5cqw; padding: 0.7cqw; }
.fx-lgrid .fx-ph { aspect-ratio: 1; border-radius: 0.5cqw; }
.fx-base { height: 1.4cqw; margin: 0 -2cqw; border-radius: 0 0 1.4cqw 1.4cqw; background: #c9ccd0; }
.fx-zip { position: absolute; left: 12%; right: 12%; top: 22%; display: grid; grid-template-columns: auto 1fr auto; gap: 1.2cqw; align-items: center; padding: 1.6cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, 0.25); opacity: 0; animation: fx-zip 10s ease infinite; }
.fx-zip span { padding: 0.8cqw 1cqw; border-radius: 0.8cqw; background: linear-gradient(135deg, #f6d365, #fda085); color: #fff; font-weight: 800; font-size: 1.8cqw; }
@keyframes fx-zip { 0%, 75% { opacity: 0; transform: translateY(2cqw); } 78%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fx-bar { height: 0.9cqw; border-radius: 99px; background: var(--line); overflow: hidden; }
.fx-bar i { display: block; height: 100%; width: 0; background: var(--green); animation: fx-bar 10s ease-in-out infinite; }
@keyframes fx-bar { 0%, 78% { width: 0; } 90%, 100% { width: 100%; } }
.fx-zip em { width: 3cqw; height: 3cqw; border-radius: 50%; display: grid; place-items: center; background: #2fae8c; color: #fff; opacity: 0; animation: fx-ok 10s ease infinite; }
.fx-zip em svg { width: 65%; height: 65%; }
@keyframes fx-ok { 0%, 90% { opacity: 0; transform: scale(0.3); } 93%, 100% { opacity: 1; transform: none; } }

/* — księga gości: życzenia → selfie → wpis w księdze → PDF — */
.fx-book .fx-phone { left: 8cqw; top: 5cqw; animation: fx-onph 10s ease infinite; }
@keyframes fx-onph { 0%, 48% { opacity: 1; transform: scale(1.04); } 53%, 97% { opacity: 0.45; transform: none; } 100% { opacity: 1; transform: scale(1.04); } }
.fx-paper { background: #fffdf7; padding: 4cqw 2.4cqw; display: grid; gap: 2.2cqw; align-content: start; }
.fx-paper > i { display: block; height: 1cqw; border-radius: 99px; background: #c9bc9a; width: 0; animation: fx-type 10s steps(10) infinite; }
.fx-paper > i:nth-child(2) { animation-name: fx-type2; } .fx-paper > i:nth-child(3) { animation-name: fx-type3; }
@keyframes fx-type { 0% { width: 0; } 8%, 100% { width: 100%; } }
@keyframes fx-type2 { 0%, 8% { width: 0; } 16%, 100% { width: 90%; } }
@keyframes fx-type3 { 0%, 16% { width: 0; } 23%, 100% { width: 60%; } }
.fx-pola { justify-self: center; width: 70%; margin-top: 1cqw; padding: 0.8cqw 0.8cqw 3cqw; background: #fff; box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.2); opacity: 0; animation: fx-pola 10s var(--ease) infinite; }
.fx-pola .fx-ph { aspect-ratio: 1; }
@keyframes fx-pola { 0%, 26% { opacity: 0; transform: translateY(-12cqw) rotate(16deg); } 34%, 97% { opacity: 1; transform: rotate(-4deg); } 100% { opacity: 0; } }
.fx-sheet { left: 10cqw; top: 10cqw; width: 19cqw; height: 26cqw; border-radius: 1cqw; background: #fffdf7; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, 0.2); padding: 3cqw 2cqw; display: grid; gap: 2cqw; align-content: start; opacity: 0; z-index: 3; animation: fx-sheet 10s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.fx-sheet i { height: 1cqw; border-radius: 99px; background: #c9bc9a; }
@keyframes fx-sheet { 0%, 50% { opacity: 0; transform: none; } 52% { opacity: 1; transform: none; } 68% { opacity: 1; transform: translate(31cqw, 2cqw) scale(0.6) rotate(6deg); } 71%, 100% { opacity: 0; transform: translate(31cqw, 2cqw) scale(0.6); } }
.fx-bk { left: 39cqw; top: 9cqw; width: 26cqw; aspect-ratio: 3 / 4; perspective: 80cqw; animation: fx-on2 10s ease infinite; }
.fx-pages { position: absolute; inset: 0; border-radius: 0.8cqw 2cqw 2cqw 0.8cqw; background: repeating-linear-gradient(#fffdf7 0 3cqw, #e7dcc4 3cqw calc(3cqw + 1px)); box-shadow: 0 2.4cqw 5cqw rgba(0, 0, 0, 0.2); padding: 4cqw 2.6cqw; }
.fx-pages em { font-family: var(--font-script, cursive); font-size: 2.6cqw; color: #6b5a33; opacity: 0; animation: fx-ok 10s ease infinite; animation-name: fx-ink; }
@keyframes fx-ink { 0%, 66% { opacity: 0; } 71%, 97% { opacity: 1; } 100% { opacity: 0; } }
.fx-cover { position: absolute; inset: 0; border-radius: 0.8cqw 2cqw 2cqw 0.8cqw; background: radial-gradient(ellipse at 40% 35%, #17594d, #0b3a32 70%); display: grid; place-items: center; text-align: center; transform-origin: left center; backface-visibility: hidden; animation: fx-cover 10s cubic-bezier(0.45, 0.05, 0.3, 1) infinite; }
.fx-cover b { color: #efdfb4; font-size: 2.2cqw; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 2cqw; }
@keyframes fx-cover { 0%, 52% { transform: none; } 62%, 94% { transform: rotateY(-170deg); } 100% { transform: none; } }
.fx-pdf { right: 7cqw; top: 13cqw; width: 22cqw; aspect-ratio: 1; animation: fx-on3 10s ease infinite; }
.fx-pdf span { position: absolute; width: 58%; aspect-ratio: 148 / 210; left: 21%; top: 2%; border-radius: 1cqw; background: #fffdf7; box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, 0.15); }
.fx-pdf span:nth-child(1) { animation: fx-fan1 10s ease-in-out infinite; }
.fx-pdf span:nth-child(3) { animation: fx-fan2 10s ease-in-out infinite; }
@keyframes fx-fan1 { 0%, 76% { transform: none; } 84%, 96% { transform: rotate(-12deg) translateX(-5cqw); } 100% { transform: none; } }
@keyframes fx-fan2 { 0%, 76% { transform: none; } 84%, 96% { transform: rotate(12deg) translateX(5cqw); } 100% { transform: none; } }
.fx-pdf b { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; background: #d13239; color: #fff; border-radius: 1cqw; padding: 0.7cqw 2cqw; font-size: 2.4cqw; }

/* — strona WWW: PIN → odliczanie → plan dnia → „Będę!” — */
.fx-site { background: radial-gradient(ellipse at 30% 10%, rgba(241, 220, 159, 0.25), transparent 60%), linear-gradient(160deg, #17594d, #062822); border: 0; }
.fx-inv { left: 5cqw; top: 11cqw; width: 22cqw; padding: 2.4cqw 2cqw; border-radius: 1.6cqw; background: #fffdf7; color: #0b3a32; display: grid; justify-items: center; gap: 1cqw; text-align: center; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.3); rotate: -5deg; animation: fx-on0 10s ease infinite; }
.fx-msg { justify-items: stretch; text-align: left; gap: 1.2cqw; background: #f4fbef; rotate: -3deg; }
.fx-msg-h { display: flex; gap: 0.8cqw; align-items: center; }
.fx-msg-h svg { width: 2.6cqw; height: 2.6cqw; color: #1faa53; }
.fx-msg-h b { font-size: 2cqw; }
.fx-bubble { padding: 1.2cqw 1.4cqw; border-radius: 1.6cqw 1.6cqw 1.6cqw 0.4cqw; background: #dcf8c6; font-size: 1.75cqw; line-height: 1.35; }
.fx-msg small { justify-self: start; font-size: 1.5cqw; background: #fbecc0; color: #6a4a00; }
.fx-inv-k { font-size: 1.6cqw; letter-spacing: 0.16em; text-transform: uppercase; color: #b08a3e; }
.fx-inv b { font-size: 2.4cqw; }
.fx-inv-qr { width: 46%; line-height: 0; }
.fx-inv small { font-size: 1.8cqw; font-weight: 800; padding: 0.4cqw 1.4cqw; border-radius: 99px; background: #f6ecd0; }
.fx-site .fx-phone { left: 38.5cqw; top: 3.5cqw; background: #0b1f1b; }
.fx-dark .fx-scr { background: radial-gradient(ellipse at 50% 0%, rgba(241, 220, 159, 0.35), transparent 60%), linear-gradient(170deg, #2b5a50, #0b2a24); color: #fff; }
.fx-lock { width: 7cqw; height: 7cqw; color: #f1dc9f; } .fx-lock svg { width: 100%; height: 100%; }
.fx-dots { display: flex; gap: 1.2cqw; }
.fx-dots i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; border: 0.4cqw solid rgba(255, 255, 255, 0.5); animation: fx-dot 10s steps(1) infinite; }
.fx-dots i:nth-child(2) { animation-name: fx-dot2; } .fx-dots i:nth-child(3) { animation-name: fx-dot3; } .fx-dots i:nth-child(4) { animation-name: fx-dot4; }
@keyframes fx-dot { 0% { background: transparent; } 5%, 25% { background: #f6ecd0; border-color: #f6ecd0; } 26%, 100% { background: transparent; } }
@keyframes fx-dot2 { 0% { background: transparent; } 9%, 25% { background: #f6ecd0; border-color: #f6ecd0; } 26%, 100% { background: transparent; } }
@keyframes fx-dot3 { 0% { background: transparent; } 13%, 25% { background: #f6ecd0; border-color: #f6ecd0; } 26%, 100% { background: transparent; } }
@keyframes fx-dot4 { 0% { background: transparent; } 17%, 25% { background: #f6ecd0; border-color: #f6ecd0; } 26%, 100% { background: transparent; } }
.fx-names { font-family: var(--font-script, serif); font-size: 3.4cqw; color: #f6ecd0; text-align: center; }
.fx-cd { display: flex; gap: 0.8cqw; }
.fx-cd i { display: grid; justify-items: center; padding: 1cqw 0.8cqw; min-width: 5.6cqw; border-radius: 1.2cqw; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); font-style: normal; font-size: 1.2cqw; text-transform: uppercase; }
.fx-cd b { font-size: 3cqw; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-cd b.tick { animation: cd-tick 0.45s var(--ease); }
.fx-tl { display: grid; gap: 1.2cqw; width: 86%; }
.fx-tl i { display: flex; gap: 1.2cqw; align-items: center; padding: 1.1cqw 1.4cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); font-style: normal; font-size: 1.8cqw; font-weight: 600; }
.fx-tl b { color: #f1dc9f; }
.fx-yes { padding: 1.6cqw 3cqw; border-radius: 999px; background: #f6ecd0; color: #0b3a32; font-weight: 800; font-size: 2.6cqw; box-shadow: 0 0 0 1.4cqw rgba(246, 236, 208, 0.2); }
.fx-list { right: 4cqw; top: 13cqw; width: 26cqw; padding: 1.8cqw; border-radius: 1.6cqw; background: #fff; color: #0b3a32; display: grid; gap: 1cqw; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.3); animation: fx-on3 10s ease infinite; }
.fx-list > b { font-size: 2cqw; }
.fx-list span { display: flex; gap: 1cqw; align-items: center; font-size: 1.7cqw; font-weight: 600; }
.fx-list i { flex: none; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; display: grid; place-items: center; background: #2fae8c; color: #fff; }
.fx-list i svg { width: 70%; height: 70%; }
.fx-row-new { opacity: 0; animation: fx-row 10s ease infinite; }
@keyframes fx-row { 0%, 80% { opacity: 0; transform: translateX(-3cqw); background: transparent; } 84% { opacity: 1; transform: none; background: #fdf6dc; } 97% { opacity: 1; background: transparent; } 100% { opacity: 0; } }

/* animacje grają tylko po rozwinięciu i bez „ogranicz ruch” */
.sb:not([open]) *, .sb:not([open]) *::before { animation-play-state: paused !important; }
/* ruch ograniczony (CONFIG.motion = "system") */ :root[data-motion="reduce"] .sb * { animation: none !important; }
  :root[data-motion="reduce"] .fx .fz[style*="--k:3"], :root[data-motion="reduce"] .fz-from1, :root[data-motion="reduce"] .fz-from2, :root[data-motion="reduce"] .fx-new, :root[data-motion="reduce"] .fx-zip, :root[data-motion="reduce"] .fx-zip em, :root[data-motion="reduce"] .fx-pola, :root[data-motion="reduce"] .fx-pages em, :root[data-motion="reduce"] .fx-row-new { opacity: 1; }
  :root[data-motion="reduce"] .fx-bar i, :root[data-motion="reduce"] .fx-paper > i { width: 100%; } :root[data-motion="reduce"] .fz-to2 { opacity: 0; } :root[data-motion="reduce"] .fx-caps li { opacity: 1; }

/* =========================================================
   Widok gościa – „szklany” wygląd jak strona WWW (glassmorphism)
   Karty są półprzezroczyste z rozmyciem zdjęcia pary; kolory przez zmienne,
   więc przyciski, pola i komunikaty w środku dopasowują się same.
   Kartki z życzeniami zostają „papierowe” (jasna paleta niżej).
   ========================================================= */
.guest .g-card {
  --green: var(--t-accent, #f1dc9f);
  --green-dark: var(--t-btn, #f6ecd0);
  --green-tint: rgba(255, 255, 255, 0.12);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.8);
  --muted-2: rgba(255, 255, 255, 0.64);
  --line: rgba(255, 255, 255, 0.24);
  --line-strong: rgba(255, 255, 255, 0.36);
  --line-soft: rgba(255, 255, 255, 0.14);
  --line-warm: rgba(255, 255, 255, 0.2);
  --card: rgba(255, 255, 255, 0.12);
  --card-soft: rgba(255, 255, 255, 0.1);
  --cream: rgba(255, 255, 255, 0.12);
  --input-bg: rgba(255, 255, 255, 0.14);
  --fill: var(--t-btn, #f6ecd0);
  --fill-hover: #fff6de;
  --on-fill: var(--t-ink, #0b3a32);
  --amber: #f6d58a;
  --amber-bg: rgba(241, 196, 107, 0.2);
  --amber-bg-2: rgba(241, 196, 107, 0.22);
  --amber-line: rgba(241, 196, 107, 0.5);
  --warn-ink: #fbe9c4;
  --ok: #9fe6c6;
  --ok-bg: rgba(127, 217, 176, 0.18);
  --ok-ink: #d3f5e6;
  --danger: #ffb3c0;
  --danger-bg: rgba(255, 120, 140, 0.18);
  --danger-line: rgba(255, 150, 165, 0.45);
  --err-ink: #ffd4dc;
  --neutral-bg: rgba(255, 255, 255, 0.12);
  --neutral-ink: rgba(255, 255, 255, 0.8);
  --focus: rgba(var(--t-accent-rgb, 241, 220, 159), 0.6);
  --focus-soft: rgba(var(--t-accent-rgb, 241, 220, 159), 0.2);
  --switch-off: rgba(255, 255, 255, 0.3);
  --pip-off: rgba(255, 255, 255, 0.2);
  --empty-bg: rgba(255, 255, 255, 0.08);
  --empty-line: rgba(255, 255, 255, 0.32);
  --spent-bg: rgba(255, 255, 255, 0.16);
  --spent-ink: rgba(255, 255, 255, 0.6);
  --shadow-card: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.guest .g-card h2, .guest .g-card h3 { color: #fff; }
.guest .g-card .input::placeholder { color: rgba(255, 255, 255, 0.55); }
.guest .g-card select.input option { color: #1a2e2b; }
.guest .g-card .btn-primary { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); }
.guest .g-card .btn-ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.guest .g-card a:not(.btn) { color: var(--t-btn, #f6ecd0); }
.guest .g-msg-icon, .guest .g-closed-ic { background: rgba(255, 255, 255, 0.16); color: var(--t-accent, #f1dc9f); border: 1px solid rgba(255, 255, 255, 0.28); }
.guest .g-closed h2 { color: #fff; }
.guest .g-tile { background: rgba(255, 255, 255, 0.1); }
.guest .g-avatar { background: rgba(255, 255, 255, 0.16); color: var(--t-accent, #f1dc9f); }
.guest .g-board li.me { outline-color: var(--t-accent, #f1dc9f); }
/* zakładki: szklany pasek, wybrana – jak przycisk na stronie WWW */
.guest .gt-tabs { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.guest .gt-tabs button[aria-selected="true"] { background: var(--t-btn, #f6ecd0); color: var(--t-ink, #0b3a32); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
.guest .g-hero .g-eyebrow { color: var(--t-accent, #f1dc9f); letter-spacing: 0.3em; }
/* kartki z życzeniami i zaproszenie do księgi – „papier”, jasne kolory jak w reszcie aplikacji */
.guest .wish-paper, .guest .wish-card, .guest .g-book-cta, .guest .bk-mini {
  --green: var(--t-deep, #004d40); --green-tint: rgba(0, 77, 64, 0.08); --ink: #1a2e2b; --muted: #4a5d5a; --muted-2: #6b7c79; --line: #e7e1d1; --line-strong: #dcd5c3;
  --card: #ffffff; --card-soft: #f7fdfd; --cream: #f7f4eb; --input-bg: #ffffff; --fill: var(--t-deep, #004d40); --fill-hover: #352100; --on-fill: #ffffff;
  --focus: rgba(0, 77, 64, 0.35); --focus-soft: rgba(0, 77, 64, 0.12);
  color: var(--ink);
}
.guest .wish-paper a:not(.btn), .guest .wish-card a:not(.btn) { color: var(--green); }
.guest .wish-paper .btn-ghost, .guest .wish-card .btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--green); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .guest .g-card { background: rgba(12, 40, 35, 0.82); }
}


/* ---------- motyw kolorystyczny (galeria gościa i strona WWW) – wybór w panelu pary, js/themes.js ---------- */
.sw-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.sw-field legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.sw-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.sw { display: grid; justify-items: center; gap: 4px; cursor: pointer; text-align: center; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw-dot { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.12); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.sw small { font-size: 0.7rem; line-height: 1.2; color: var(--muted); }
.sw:hover .sw-dot { transform: scale(1.06); }
.sw input:checked + .sw-dot { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--green), 0 4px 12px rgba(0, 0, 0, 0.18); transform: scale(1.08); }
.sw input:checked ~ small { color: var(--green); font-weight: 700; }
.sw input:focus-visible + .sw-dot { outline: 3px solid var(--focus); outline-offset: 4px; }


/* --- „Jak to działa”, krok 7: Wasze kolory – telefon gościa zmienia motyw, obok paleta --- */
.hw-tag.hw-free { color: var(--green); background: var(--green-tint); }
.th-phone { position: relative; width: 32%; aspect-ratio: 9 / 18.5; margin-right: 26%; border-radius: 6cqw; background: #10201d; box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.3); }
.th-scr { position: absolute; inset: 1.4cqw; border-radius: 4.8cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; padding: 8cqw 2.4cqw 3cqw; color: #fff; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, var(--t-mid), var(--t-deep) 55%, var(--t-dark)); opacity: 0; }
.th-scr:first-child { opacity: 1; }
.th-k { font-size: 1.3cqw; letter-spacing: 0.28em; text-transform: uppercase; color: var(--t-accent); font-weight: 700; }
.th-names { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 4.2cqw; line-height: 1.05; }
.th-card { margin-top: auto; width: 100%; display: grid; gap: 1.4cqw; padding: 1.8cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.26); }
.th-btn { display: flex; gap: 0.8cqw; align-items: center; justify-content: center; padding: 1.5cqw; border-radius: 99px; background: var(--t-btn); color: var(--t-ink); font-weight: 800; font-size: 1.5cqw; white-space: nowrap; }
.th-btn svg { width: 1.9cqw; height: 1.9cqw; }
.th-bar { height: 0.8cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.th-bar i { display: block; width: 62%; height: 100%; background: var(--t-accent); }
.th-name { font-size: 1.5cqw; font-weight: 800; color: var(--t-accent); }
.th-dots { position: absolute; right: 8cqw; top: 50%; translate: 0 -50%; display: grid; grid-template-columns: repeat(3, 5cqw); gap: 2.2cqw; }
.th-dots i { width: 5cqw; height: 5cqw; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1cqw 2cqw rgba(0, 0, 0, 0.15); }
/* ruch: zawsze (CONFIG.motion) */ .th-scr { animation: th-fade 8s infinite; animation-delay: calc(var(--i) * 2s); }
  .th-scr:first-child { opacity: 0; }
  .th-dots i.th-cycle { animation: th-ring 8s infinite; animation-delay: calc(var(--i) * 2s); }
  @keyframes th-fade { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }
  @keyframes th-ring { 0%, 29%, 100% { transform: none; } 4%, 25% { transform: scale(1.18); box-shadow: 0 0 0 0.6cqw #fff, 0 0 0 1.1cqw var(--green), 0 1cqw 2cqw rgba(0, 0, 0, 0.2); } }
@media (max-width: 600px) {
  .th-phone { width: 44%; margin-right: 36%; }
  .th-dots { right: 4cqw; grid-template-columns: repeat(3, 7cqw); gap: 2.6cqw; }
  .th-dots i { width: 7cqw; height: 7cqw; }
  .th-names { font-size: 5.6cqw; } .th-k { font-size: 1.8cqw; } .th-btn { font-size: 2.1cqw; } .th-name { font-size: 2.1cqw; }
}
.howto.static .hw-xtheme { display: none; }


/* ---------- strona główna: dane kontaktowe (wymóg Przelewy24) ---------- */
.contact-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.contact-name { display: block; font-size: 1.3rem; color: var(--green); margin: 4px 0 12px; }
.contact-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 0.95rem; }
.contact-dl dt { color: var(--muted); }
.contact-dl dd { margin: 0; font-weight: 600; }
.contact-links { display: grid; gap: 10px; }
.contact-link { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-soft); color: var(--ink); text-decoration: none; transition: transform 0.2s var(--ease), border-color 0.2s; }
.contact-link:hover { transform: translateY(-2px); border-color: var(--green); }
.contact-link svg { width: 22px; height: 22px; color: var(--green); flex: none; }
.contact-link small { display: block; font-size: 0.72rem; color: var(--muted); }
.contact-link b { font-size: 0.95rem; word-break: break-word; }
@media (max-width: 720px) { .contact-card { grid-template-columns: 1fr; } }

.ss-wa-free { justify-self: start; }

/* ---------- życzenia głosowe (dodatek) – ikona w koszyku ---------- */
.addon-audio { position: relative; width: 42px; height: 56px; border-radius: 8px; display: flex; gap: 2px; align-items: center; justify-content: center; padding-top: 18px; background: linear-gradient(160deg, #3b2a55, #1c1630); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); flex: none; transition: transform 0.4s var(--ease); }
.addon-audio b { position: absolute; top: 6px; left: 50%; translate: -50% 0; width: 18px; height: 18px; color: #f4d4f0; }
.addon-audio b svg { width: 100%; height: 100%; }
.addon-audio i { width: 3px; height: 8px; border-radius: 2px; background: #f4d4f0; opacity: 0.85; }
.addon-audio i:nth-of-type(2) { height: 16px; } .addon-audio i:nth-of-type(3) { height: 22px; } .addon-audio i:nth-of-type(4) { height: 12px; } .addon-audio i:nth-of-type(5) { height: 6px; }
.addon-card:has(input:checked) .addon-audio { transform: rotate(-5deg) scale(1.06); }
/* ruch: zawsze (CONFIG.motion) */ .addon-card:has(input:checked) .addon-audio i { animation: aud-eq 1s ease-in-out infinite alternate; } .addon-audio i:nth-of-type(2n) { animation-delay: -0.4s !important; }
@keyframes aud-eq { to { transform: scaleY(0.4); } }
@media (max-width: 560px) { .addon-audio { grid-area: a; } }

/* ---------- życzenia głosowe: odtwarzacz z falą (gość, panel, „Posłuchaj”) ---------- */
.vp { --p: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--card-soft); border: 1px solid var(--line); min-width: 0; }
.vp-play { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--fill); color: var(--on-fill); cursor: pointer; flex: none; transition: transform 0.2s var(--ease); }
.vp-play:hover { transform: scale(1.06); }
.vp-play svg { width: 18px; height: 18px; }
.vp-wave { display: flex; align-items: center; gap: 2px; height: 30px; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--p) * 100%), rgba(0, 0, 0, 0.35) calc(var(--p) * 100%)); mask: linear-gradient(90deg, #000 calc(var(--p) * 100%), rgba(0, 0, 0, 0.35) calc(var(--p) * 100%)); }
.vp-wave i { flex: 1; min-width: 2px; height: var(--h); border-radius: 2px; background: var(--green); }
.vp-time { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 34px; text-align: right; }
.vp.is-missing .vp-wave { opacity: 0.25; }
.vp-big { padding: 10px 16px 10px 10px; }
.vp-big .vp-play { width: 50px; height: 50px; }
.vp-big .vp-wave { height: 44px; }

/* ---------- życzenia głosowe: rejestrator u gościa ---------- */
.vr { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 18px 10px; }
.vr-mic { width: 96px; height: 96px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--fill); color: var(--on-fill); box-shadow: 0 0 0 10px var(--green-tint), 0 14px 30px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--ease); }
.vr-mic:hover { transform: scale(1.05); }
.vr-mic svg { width: 42px; height: 42px; }
/* ruch: zawsze (CONFIG.motion) */ .vr-mic { animation: vr-breathe 2.6s ease-in-out infinite; }
@keyframes vr-breathe { 50% { box-shadow: 0 0 0 18px var(--green-tint), 0 14px 30px rgba(0, 0, 0, 0.25); } }
.vr-ring { --lvl: 0; position: relative; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 80, 90, 0.25) calc(30% + var(--lvl) * 40%), transparent calc(32% + var(--lvl) * 40%)); transition: background 0.08s linear; }
.vr-ring::before { content: ""; position: absolute; inset: calc(22px - var(--lvl) * 20px); border-radius: 50%; border: 3px solid rgba(255, 90, 100, 0.55); transition: inset 0.08s linear; }
.vr-dot { width: 54px; height: 54px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 22px rgba(229, 72, 77, 0.6); }
/* ruch: zawsze (CONFIG.motion) */ .vr-dot { animation: vr-blink 1.2s ease-in-out infinite; }
@keyframes vr-blink { 50% { opacity: 0.7; transform: scale(0.94); } }
.vr-time { font-size: 1.8rem; font-variant-numeric: tabular-nums; line-height: 1; }
.vr-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vr-busy .spin { width: 32px; height: 32px; border: 3px solid var(--green); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.vr-review { justify-items: stretch; text-align: left; }
.vr-review > b { text-align: center; }
.vr-thanks .vr-heart { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--green-tint); color: var(--green); }
.vr-thanks .vr-heart svg { width: 30px; height: 30px; }
/* ruch: zawsze (CONFIG.motion) */ .vr-thanks .vr-heart { animation: vr-pop 0.6s var(--ease) both; }
@keyframes vr-pop { from { transform: scale(0.4); opacity: 0; } }
.voice-mine { display: grid; gap: 8px; }
.voice-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
.voice-card .tiny { grid-column: 1; padding-left: 14px; }
.voice-card .icon-btn { grid-row: 1; grid-column: 2; }
.g-voice-cta { margin-top: 8px; }

/* ---------- życzenia głosowe: panel pary ---------- */
.voice-admin { display: grid; gap: 10px; }
.voice-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.voice-meta { display: grid; min-width: 0; }
.voice-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .voice-row { grid-template-columns: minmax(0, 1fr) auto; } .voice-row .vp { grid-column: 1 / -1; } }
.voice-keep svg { width: 16px; height: 16px; vertical-align: -3px; color: #c0587a; }
.vo-art { width: 150px; aspect-ratio: 1; border-radius: 28px; display: grid; place-items: center; align-content: center; gap: 12px; background: radial-gradient(circle at 30% 20%, #6c4a8f, #24122b 75%); box-shadow: 0 18px 40px rgba(36, 18, 43, 0.35); color: #f4d4f0; }
.vo-mic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); }
.vo-mic svg { width: 28px; height: 28px; }
.vo-eq { display: flex; gap: 4px; align-items: center; height: 34px; }
.vo-eq i { width: 5px; height: var(--h); border-radius: 3px; background: #f4d4f0; }
/* ruch: zawsze (CONFIG.motion) */ .vo-eq i { animation: aud-eq 0.9s ease-in-out infinite alternate; } .vo-eq i:nth-child(2n) { animation-delay: -0.45s; } .vo-eq i:nth-child(3n) { animation-delay: -0.2s; }

/* ---------- strona „Posłuchaj” (kod QR z albumu) ---------- */
body[data-mode="listen"] .topbar, body[data-mode="listen"] .site-footer, body[data-mode="listen"] .bg-photo, body[data-mode="listen"] #sunset-banner, body[data-mode="listen"] #dl-banner, body[data-mode="listen"] #promo-strip, body[data-mode="listen"] #footer-promo, body[data-mode="listen"] #demo-banner, body[data-mode="listen"] #sale-banner { display: none !important; }
body[data-mode="listen"] { background: var(--t-dark, #0b2a25); }
.listen { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; color: #fff; background: radial-gradient(ellipse at 50% 0%, var(--t-mid, #11665a), var(--t-deep, #004d40) 45%, var(--t-dark, #0b2a25)); }
.listen-card { width: min(460px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 30px 22px; }
.listen-card .www-k { color: var(--t-accent, #f1dc9f); }
.listen-card h1 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.02; color: #fff; margin: 0; }
.listen-card p { margin: 0; opacity: 0.9; }
.listen-card .vp { width: 100%; --green: var(--t-accent, #f1dc9f); --fill: var(--t-btn, #f6ecd0); --on-fill: var(--t-ink, #0b3a32); --muted: rgba(255, 255, 255, 0.8); --card-soft: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.25); }
.listen-card small { opacity: 0.75; }


/* --- „Jak to działa”: życzenia głosowe – telefon nagrywa, obok odtwarzacz „za 20 lat” --- */
.au-phone { width: 32%; aspect-ratio: 9 / 18.5; margin-right: 28%; border-radius: 6cqw; background: #10201d; padding: 1.4cqw; box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.3); }
.au-scr { height: 100%; border-radius: 4.8cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding: 7cqw 2.4cqw 4cqw; color: #fff; text-align: center; background: radial-gradient(ellipse at 50% 0%, #8a4f8f, #5b2d63 55%, #24122b); }
.au-k { font-size: 1.3cqw; letter-spacing: 0.28em; text-transform: uppercase; color: #f4d4f0; font-weight: 700; }
.au-names { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 4cqw; line-height: 1.05; white-space: nowrap; }
.au-q { margin-top: 1.6cqw; padding: 1cqw 1.8cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); font-size: 1.5cqw; font-weight: 700; }
.au-mic { margin-top: auto; width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; background: #f8eaf6; color: #4a1f52; box-shadow: 0 0 0 1.6cqw rgba(244, 212, 240, 0.18); }
.au-mic svg { width: 5cqw; height: 5cqw; }
.au-eq { display: flex; align-items: center; gap: 0.45cqw; height: 6cqw; width: 88%; }
.au-eq i { flex: 1; height: var(--h); border-radius: 0.5cqw; background: #f4d4f0; }
.au-time { display: inline-flex; gap: 1cqw; align-items: center; font-size: 2cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.au-time i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #ff5a6a; }
.au-card { position: absolute; right: 5cqw; top: 50%; translate: 0 -50%; width: 32%; display: grid; gap: 0.6cqw; padding: 2.4cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.92); color: #24122b; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.2); }
.au-year { font: italic 600 2.4cqw "Cormorant Garamond", Georgia, serif; color: #8a4f8f; }
.au-card b { font-size: 2.2cqw; }
.au-card small { font-size: 1.6cqw; color: #6b5a70; font-style: italic; }
.au-play { margin-top: 0.8cqw; display: grid; grid-template-columns: auto 1fr auto; gap: 1cqw; align-items: center; }
.au-play > svg { width: 4.4cqw; height: 4.4cqw; padding: 1cqw; border-radius: 50%; background: #5b2d63; color: #fff; }
.au-wave { --p: 0; display: flex; align-items: center; gap: 0.3cqw; height: 4cqw; -webkit-mask: linear-gradient(90deg, #000 calc(var(--p) * 100%), rgba(0, 0, 0, 0.3) calc(var(--p) * 100%)); mask: linear-gradient(90deg, #000 calc(var(--p) * 100%), rgba(0, 0, 0, 0.3) calc(var(--p) * 100%)); }
.au-wave i { flex: 1; height: var(--h); border-radius: 0.3cqw; background: #8a4f8f; }
.au-play em { font-style: normal; font-size: 1.5cqw; font-weight: 800; color: #6b5a70; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
/* ruch: zawsze (CONFIG.motion) */ .au-eq i { animation: au-talk 0.7s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
  @keyframes au-talk { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
  .au-mic { animation: vr-breathe 1.8s ease-in-out infinite; }
  .au-time i { animation: vr-blink 1.2s ease-in-out infinite; }
  .au-wave { animation: au-prog 6s linear infinite; }
  @keyframes au-prog { from { --p: 0; } to { --p: 1; } }
@media (max-width: 600px) {
  .au-phone { width: 44%; margin-right: 38%; }
  .au-card { width: 38%; right: 2.5cqw; padding: 3cqw; }
  .au-names { font-size: 5.2cqw; } .au-k { font-size: 1.8cqw; } .au-time { font-size: 2.6cqw; } .au-q { font-size: 2.1cqw; }
  .au-year { font-size: 3.2cqw; } .au-card b { font-size: 3cqw; } .au-card small { font-size: 2.3cqw; } .au-play em { font-size: 2.2cqw; } .au-play > svg { width: 5.6cqw; height: 5.6cqw; }
}
.howto.static .hw-xaudio { display: none; }
.vr-q { margin: 0 0 4px; padding: 10px 16px; border-radius: 16px; background: var(--green-tint); border: 1px solid var(--line); font-weight: 700; font-size: 1.02rem; line-height: 1.35; max-width: 30ch; display: grid; gap: 2px; }
.vr-q .tiny { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
/* ruch: zawsze (CONFIG.motion) */ .vr-q.is-new { animation: vr-q-in 0.5s var(--ease) both; }
@keyframes vr-q-in { from { opacity: 0; transform: translateY(8px); } }

/* — film „Życzenia głosowe”: nagranie → wysyłka → para słucha → za 20 lat z albumu — */
.fx-audio { background: radial-gradient(ellipse at 20% 10%, rgba(244, 212, 240, 0.55), transparent 60%), linear-gradient(160deg, #f8f1f7, var(--card)); }
.fx-audio .fx-phone { left: 7cqw; top: 5cqw; }
.fx-audio .fx-dark .fx-scr { background: radial-gradient(ellipse at 50% 0%, #8a4f8f, #5b2d63 55%, #24122b); color: #fff; }
.fx-audio .fx-scr > div { gap: 2.2cqw; }
.fxa-q { font-size: 1.5cqw; font-weight: 700; padding: 0.8cqw 1.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.fxa-mic { width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; background: #f8eaf6; color: #4a1f52; box-shadow: 0 0 0 1.2cqw rgba(244, 212, 240, 0.2); }
.fxa-mic svg { width: 4cqw; height: 4cqw; }
.fxa-eq { display: flex; gap: 0.4cqw; align-items: center; height: 4cqw; }
.fxa-eq i { width: 0.7cqw; height: 100%; border-radius: 0.4cqw; background: #f4d4f0; }
.fxa-t { font-size: 1.8cqw; font-weight: 800; }
.fxa-wave { display: flex; gap: 0.35cqw; align-items: center; height: 5cqw; width: 80%; }
.fxa-wave i { flex: 1; height: var(--h); border-radius: 0.3cqw; background: #f4d4f0; }
.fxa-send { display: inline-flex; gap: 0.6cqw; align-items: center; padding: 1.2cqw 2cqw; border-radius: 99px; background: #f8eaf6; color: #4a1f52; font-size: 1.5cqw; font-weight: 800; }
.fxa-send svg { width: 1.8cqw; height: 1.8cqw; }
.fxa-ok { width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); color: #f4d4f0; }
.fxa-ok svg { width: 4.5cqw; height: 4.5cqw; }
.fxa-panel { left: 36cqw; top: 13cqw; width: 26cqw; display: grid; gap: 1cqw; padding: 1.8cqw; border-radius: 1.6cqw; background: #fff; color: #24122b; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.15); animation: fx-on2 10s ease infinite; }
.fxa-panel > b { font-size: 2cqw; }
.fxa-panel span { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1cqw; align-items: center; font-size: 1.6cqw; font-weight: 600; padding: 0.8cqw 1cqw; border-radius: 1cqw; background: #f6eef6; overflow: hidden; }
.fxa-panel i { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; display: grid; place-items: center; background: #5b2d63; color: #fff; }
.fxa-panel i svg { width: 60%; height: 60%; }
.fxa-panel em { font-style: normal; font-size: 1.4cqw; color: #6b5a70; }
.fxa-new { opacity: 0; animation: fx-row 10s ease infinite; animation-name: fxa-row; }
@keyframes fxa-row { 0%, 50% { opacity: 0; transform: translateX(-3cqw); } 54%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fxa-new s { position: absolute; left: 0; bottom: 0; height: 0.4cqw; width: 0; background: #8a4f8f; animation: fxa-prog 10s linear infinite; }
@keyframes fxa-prog { 0%, 56% { width: 0; } 74% { width: 100%; } 100% { width: 100%; } }
.fxa-album { right: 5cqw; top: 9cqw; width: 26cqw; animation: fx-on3 10s ease infinite; }
.fxa-year { position: absolute; top: -3.4cqw; right: 0; font: italic 600 3cqw "Cormorant Garamond", Georgia, serif; color: #8a4f8f; }
.fxa-page { display: grid; justify-items: center; gap: 1cqw; padding: 2.6cqw 2cqw; aspect-ratio: 148 / 180; border-radius: 1cqw; background: #fffdf7; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.15); text-align: center; }
.fxa-page em { font: italic 600 2.2cqw "Cormorant Garamond", Georgia, serif; color: #6b5a33; }
.fxa-qr { width: 11cqw; line-height: 0; margin-top: auto; }
.fxa-qr svg { width: 100%; height: auto; }
.fxa-page small { font-size: 1.3cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b5a70; }
.fxa-play { position: absolute; left: 50%; translate: -50% 0; bottom: -4.2cqw; white-space: nowrap; display: flex; gap: 0.8cqw; align-items: center; padding: 0.8cqw 1.2cqw; border-radius: 99px; background: #5b2d63; color: #fff; box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.25); opacity: 0; animation: fx-zip 10s ease infinite; }
.fxa-play svg { width: 2cqw; height: 2cqw; }
.fxa-play i { display: block; width: 9cqw; height: 0.6cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.3); background-image: linear-gradient(#f4d4f0, #f4d4f0); background-repeat: no-repeat; background-size: 0 100%; animation: fxa-bar 10s linear infinite; }
@keyframes fxa-bar { 0%, 78% { background-size: 0 100%; } 97%, 100% { background-size: 100% 100%; } }
/* ruch: zawsze (CONFIG.motion) */ .fxa-eq i { animation: au-talk 0.6s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
#sb-audio .fx-caps b { background: #8a4f8f; }
.fx-audio .fz-from2 { animation-name: fxa-sent; }
@keyframes fxa-sent { 0%, 50% { opacity: 0; } 53%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- strona startowa: głosówki na orbicie + nagrywanie na telefonie ---------- */
.orbit-tile.is-voice { width: 128px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95); padding: 6px 10px 6px 6px; box-shadow: 0 10px 24px rgba(36, 18, 43, 0.18); }
.ob-voice { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; }
.ob-voice > b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #8a4f8f, #5b2d63); color: #fff; }
.ob-voice > b svg { width: 16px; height: 16px; }
.ob-voice small { display: block; font-size: 0.55rem; font-weight: 800; color: #5b2d63; line-height: 1; margin-bottom: 3px; white-space: nowrap; }
.ob-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.ob-wave i { flex: 1; width: auto; aspect-ratio: auto; height: var(--h); border-radius: 2px; background: #a874ad; }
.ob-voice em { font-style: normal; font-size: 0.58rem; font-weight: 800; color: #6b5a70; }
/* ruch: zawsze (CONFIG.motion) */ .ob-wave i { animation: au-talk 0.7s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@media (max-width: 520px) { .orbit-tile.is-voice { width: 72px; padding: 4px 6px 4px 4px; } .ob-voice { gap: 4px; grid-template-columns: auto 1fr; } .ob-voice > b { width: 22px; height: 22px; } .ob-voice > b svg { width: 12px; height: 12px; } .ob-voice small, .ob-voice em { display: none; } .ob-wave { height: 14px; } }

.ph-rec { position: absolute; inset: 0; z-index: 3; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 30px 14px; border-radius: inherit; color: #fff; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(138, 79, 143, 0.97), rgba(54, 24, 60, 0.97)); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(110%); transition: transform 0.55s var(--ease), opacity 0.3s; pointer-events: none; }
.phone-screen.is-rec .ph-rec { opacity: 1; transform: none; }
.ph-rec-q { font-size: 0.62rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.ph-rec-mic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #f8eaf6; color: #4a1f52; box-shadow: 0 0 0 7px rgba(244, 212, 240, 0.2); }
.ph-rec-mic svg { width: 22px; height: 22px; }
.ph-rec-eq { display: flex; align-items: center; gap: 3px; height: 22px; width: 82%; }
.ph-rec-eq i { flex: 1; height: 100%; border-radius: 2px; background: #f4d4f0; }
.ph-rec-t { display: inline-flex; gap: 5px; align-items: center; font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ph-rec-t i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a6a; }
/* ruch: zawsze (CONFIG.motion) */ .phone-screen.is-rec .ph-rec-eq i { animation: au-talk 0.55s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
  .phone-screen.is-rec .ph-rec-mic { animation: vr-breathe 1.6s ease-in-out infinite; }
  .phone-screen.is-rec .ph-rec-t i { animation: vr-blink 1.2s ease-in-out infinite; }

/* „Na rzutniku…”: widownia nie wystaje poza salę, pasek „Pokaz na sali” ciemny – jak dalsza część sali (bez białego pasa) */
.sc-show { background: #1a0f24; border-color: rgba(255, 255, 255, 0.08); }
.sc-show .sc-room { overflow: hidden; }
.sc-show .sc-switch { background: linear-gradient(180deg, #160c1f, #120a18); border-top: 1px solid rgba(255, 255, 255, 0.08); color: #f6ecd0; }
.sc-show .sc-switch b { color: #f1dc9f; }

/* nagrywanie na całym ekranie: większy mikrofon, potem przycisk „Wyślij życzenia” i jego wciśnięcie */
.ph-rec-q { font-size: 0.7rem; }
.ph-rec-mic { width: 70px; height: 70px; }
.ph-rec-mic svg { width: 32px; height: 32px; }
.ph-rec-eq { height: 34px; }
.ph-rec-t { font-size: 0.9rem; }
.ph-rec-send { display: inline-flex; gap: 6px; align-items: center; padding: 9px 16px; border-radius: 999px; background: #f8eaf6; color: #4a1f52; font-size: 0.72rem; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(10px) scale(0.9); transition: opacity 0.35s, transform 0.35s var(--ease); }
.ph-rec-send svg { width: 14px; height: 14px; }
.phone-screen.is-send .ph-rec-send { opacity: 1; transform: none; }
.phone-screen.is-send .ph-rec-eq i { animation: none !important; transform: scaleY(0.35); }
.phone-screen.is-send .ph-rec-t i { animation: none !important; background: #9fe6c6; }
.phone-screen.is-tap .ph-rec-send { transform: scale(0.88); background: #fff; }
/* głosówka lecąca z telefonu do kręgu */
.fly-voice { position: absolute; left: 0; top: 0; z-index: 6; width: 128px; padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 30px rgba(36, 18, 43, 0.3); pointer-events: none; }
.fly-voice .ob-wave i { height: 60%; }
.fly-voice .ob-wave i:nth-child(3n) { height: 95%; } .fly-voice .ob-wave i:nth-child(3n + 1) { height: 35%; }
.orbit-tile.is-voice.ping { animation-name: orbit, orbit-depth, ob-ping; animation-duration: 36s, 36s, 1s; animation-timing-function: linear, linear, ease-out; animation-iteration-count: infinite, infinite, 1; animation-delay: var(--d), var(--d), 0s; }
@keyframes ob-ping { 0% { box-shadow: 0 0 0 0 rgba(168, 116, 173, 0.75); } 100% { box-shadow: 0 0 0 18px rgba(168, 116, 173, 0); } }
@media (max-width: 520px) { .fly-voice { width: 76px; padding: 4px 6px 4px 4px; } .fly-voice .ob-voice small, .fly-voice .ob-voice em { display: none; } .fly-voice .ob-voice { grid-template-columns: auto 1fr; gap: 4px; } .fly-voice .ob-voice > b { width: 22px; height: 22px; } .ph-rec-mic { width: 56px; height: 56px; } }
.fly-voice.is-behind { z-index: 0; }
.fly-voice small { transition: opacity 0.2s; }

/* tapeta telefonu na pierwszym ekranie (wieczorna scena): lekko powiększona i dosunięta do dołu – girlanda nad imionami, para pod napisem */
.phone-screen.has-scene { background: linear-gradient(180deg, rgba(20, 8, 30, calc(var(--ph-ov) * 0.9)), rgba(20, 8, 30, calc(var(--ph-ov) + 0.1)) 55%, rgba(20, 8, 30, calc(var(--ph-ov) + 0.35))), var(--ph-bg) center / cover no-repeat, #241238; }

/* jawna informacja: usługi cyfrowe + przykładowe dane na wizualizacjach */
.hero-note { margin-top: 14px; max-width: 52ch; font-size: 0.68rem; line-height: 1.45; color: var(--muted-2); }
.footer-note { flex-basis: 100%; margin: 6px 0 0; font-size: 0.74rem; line-height: 1.5; opacity: 0.78; }

/* ---------- formularz zamówienia: 5 zwięzłych kroków ---------- */
.order-form { display: grid; gap: 0; padding: 8px 24px 24px; }
.of-step { display: grid; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.of-step:last-of-type { border-bottom: 0; }
.of-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 1.1rem; margin: 0; color: var(--ink); }
.of-h > b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--on-fill); font-size: 0.8rem; flex: none; }
.of-h small { font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.of-hint { margin: 0; font-size: 0.76rem; color: var(--muted); line-height: 1.45; }
.of-sub { font-size: 0.8rem; font-weight: 700; color: var(--ink); margin-top: 4px; }
.of-video { display: inline-flex; justify-self: start; }
.of-video label { position: relative; }
.of-video input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.of-video span { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; }
.of-video span svg { width: 16px; height: 16px; }
.of-video em { font-style: normal; font-size: 0.72rem; color: var(--green); }
.of-video input:checked + span { background: var(--card); color: var(--green); box-shadow: 0 1px 4px rgba(26, 46, 43, 0.12); }
.of-video input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.order-form .pkg-options { gap: 8px; }
.order-form .keep-options { gap: 8px; }
.order-form .keep-option span { padding: 8px 6px; }
.order-form .keep-option b { font-size: 0.92rem; }
.order-form .keep-option small { font-size: 0.72rem; }
.of-types .choice span { padding: 6px 12px; font-size: 0.82rem; }
.of-grid { grid-template-columns: 1.3fr 1fr 1fr; }
.of-more summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--green); list-style: none; }
.of-more summary::-webkit-details-marker { display: none; }
.of-more[open] summary { margin-bottom: 8px; }
.order-form .consents { gap: 8px; }
.order-form .consents .check { font-size: 0.74rem; line-height: 1.45; gap: 8px; }
.order-form .consents .check input { width: 16px; height: 16px; margin-top: 1px; }
.of-submit { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 12px; }
@media (max-width: 860px) { .of-grid { grid-template-columns: 1fr 1fr; } .of-grid .field:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .order-form { padding: 4px 16px 18px; } .of-video { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; } .of-video span { justify-content: center; padding: 8px 6px; font-size: 0.8rem; } }

/* =========================================================
   Panel pary: menu boczne w trzech grupach + ekran „Start”
   ========================================================= */
.g-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.g-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.g-side .back { margin: 0; }
.g-card { display: grid; gap: 4px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--glass-edge, var(--line)); box-shadow: var(--shadow-card); }
.g-card .eyebrow { font-size: 0.66rem; }
.g-card h1 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.7rem; line-height: 1.05; margin: 2px 0 4px; }
.g-state { display: inline-flex; gap: 5px; align-items: center; font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.g-state svg { width: 14px; height: 14px; }
.g-state.on { color: var(--ok); }
.g-nav { display: grid; gap: 14px; }
.g-nav-group { display: grid; gap: 2px; }
.g-nav-h { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); padding: 0 10px 4px; }
.g-nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: 0.88rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: background 0.2s, color 0.2s; }
.g-nav a svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.g-nav a:hover { background: var(--green-tint); }
.g-nav a[aria-current="page"] { background: var(--fill); color: var(--on-fill); }
.g-nav a[aria-current="page"] svg { color: var(--on-fill); }
.g-nav a.is-locked { color: var(--muted); }
.g-nav a em { margin-left: auto; font-style: normal; font-size: 0.7rem; font-weight: 800; color: var(--amber); }
.g-nav a[aria-current="page"] em { color: var(--on-fill); }
.g-nav-toggle { display: none; }
.g-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.g-main .g-head { align-items: center; }
.g-page-title { font-size: 1.45rem; margin: 0; }
.g-main .dl-banner.big { margin: 0; }
.g-main .g-tabs { display: none; }

/* Start */
.g-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.st-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-stat { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--glass-edge, var(--line)); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: transform 0.2s var(--ease); }
.st-stat:hover { transform: translateY(-2px); }
.st-stat > span { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.st-stat b { font-size: 1.7rem; line-height: 1.1; color: var(--green); font-variant-numeric: tabular-nums; }
.st-stat b small { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.st-stat > small { font-size: 0.72rem; color: var(--muted); }
.st-stat .st-date { font-size: 1.2rem; padding-top: 6px; }
.st-bar { display: block; height: 6px; border-radius: 99px; background: var(--cream); overflow: hidden; margin-top: 6px; }
.st-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.st-cols .panel { padding: 18px 20px; }
.st-cols h3 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 1.05rem; margin: 0 0 10px; }
.st-cols h3 small { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.st-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-next li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.86rem; }
.st-next li:last-child { border-bottom: 0; }
.st-next li.done .st-txt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.st-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); color: #fff; }
.st-next li.done .st-dot { background: var(--ok); border-color: var(--ok); }
.st-dot svg { width: 13px; height: 13px; }
.st-next .btn-sm { padding: 5px 12px; font-size: 0.78rem; }
.st-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.st-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--cream); display: grid; place-items: center; color: var(--muted); }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb svg { width: 20px; height: 20px; }
.st-thumb em { position: absolute; left: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; }
.st-thumb em svg { width: 10px; height: 10px; }
.st-line { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card-soft); color: var(--ink); text-decoration: none; font-size: 0.82rem; }
.st-line svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.st-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-addons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-addon { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--line-strong); color: var(--ink); text-decoration: none; font-size: 0.82rem; font-weight: 700; }
.st-addon svg { width: 16px; height: 16px; color: var(--green); }
.st-addon em { font-style: normal; color: var(--amber); }
.st-addon:hover { border-style: solid; border-color: var(--green); }

@media (max-width: 1000px) { .st-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .g-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .g-main .g-head { display: grid; gap: 10px; }
  .g-main .g-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .g-main .g-actions .btn { padding: 7px 12px; font-size: 0.8rem; }
  .st-next li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .g-side { position: static; }
  .g-card h1 { font-size: 1.5rem; }
  .g-nav-toggle { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: 700 0.95rem var(--font); cursor: pointer; }
  .g-nav-toggle svg { width: 18px; height: 18px; color: var(--green); }
  .g-nav-toggle svg:last-child { margin-left: auto; transition: transform 0.2s; }
  .g-nav-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
  .g-nav { display: none; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
  .g-nav.open { display: grid; }
  .g-page-title { font-size: 1.25rem; }
  .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* zamówienie: większe kafelki pakietów, „Najlepszy wybór” (1500) jasnolawendowy, ceny z promocją i Omnibus */
.order-form .pkg-options { gap: 10px; padding-top: 10px; }
.order-form .pkg-option span { gap: 1px; padding: 16px 8px 14px; border-radius: 16px; border-width: 1.5px; box-shadow: var(--shadow-card); }
.order-form .pkg-option b { font-size: 1.75rem; line-height: 1.05; }
.order-form .pkg-option .pkg-unit { font-style: normal; font-size: 0.68rem; color: var(--muted); margin-bottom: 6px; }
.order-form .pkg-option .pkg-pr { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.order-form .pkg-option .pkg-pr s { font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.order-form .pkg-option .pkg-pr b { font-size: 1rem; color: var(--green); }
.order-form .pkg-option .pkg-omni { font-size: 0.54rem; line-height: 1.2; color: var(--muted); text-align: center; margin-top: 2px; opacity: 0.85; }
.order-form .pkg-option:hover span { transform: translateY(-2px); }
.order-form .pkg-option input:checked + span .pkg-unit, .order-form .pkg-option input:checked + span .pkg-pr, .order-form .pkg-option input:checked + span .pkg-pr b, .order-form .pkg-option input:checked + span .pkg-pr s, .order-form .pkg-option input:checked + span .pkg-omni { color: #fff; }
.pkg-option.is-popular span { background: #f3ecfc; border-color: #c9b3ec; }
.pkg-option.is-popular .pkg-badge { background: #8a4f8f; color: #fff; }
.pkg-option.is-popular input:checked + span { background: #6c4a8f; border-color: #6c4a8f; box-shadow: 0 0 0 4px rgba(138, 79, 143, 0.18), var(--shadow-card); }
.pkg-option.is-popular input:checked + span .pkg-badge { background: #fff; color: #6c4a8f; }
:root[data-theme="dark"] .pkg-option.is-popular span { background: rgba(168, 116, 173, 0.18); border-color: rgba(201, 179, 236, 0.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pkg-option.is-popular span { background: rgba(168, 116, 173, 0.18); border-color: rgba(201, 179, 236, 0.45); } }
.of-addons { display: grid; gap: 10px; }
.of-addons .addon-card { margin: 0; }
/* „dodano do zamówienia” – ikona leci do podsumowania, kwota podskakuje */
.fly-cart { position: fixed; z-index: 200; margin: 0; pointer-events: none; }
.order-summary .total b.bump { animation: cart-bump 0.5s var(--ease); display: inline-block; }
@keyframes cart-bump { 30% { transform: scale(1.18); color: var(--ok); } 100% { transform: none; } }
@media (max-width: 520px) { .order-form .pkg-option b { font-size: 1.45rem; } }
.fly-cart.is-out { filter: grayscale(0.4); }
.order-summary .total b.drop { animation: cart-drop 0.5s var(--ease); display: inline-block; }
@keyframes cart-drop { 30% { transform: translateY(4px) scale(0.92); color: var(--danger); } 100% { transform: none; } }
/* zegar przy wyborze przechowania (leci do koszyka / wylatuje z koszyka) */
.keep-option span { position: relative; }
.keep-fly { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--on-fill); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }
.keep-fly svg { width: 18px; height: 18px; }
.fly-cart.keep-fly { position: fixed; top: auto; right: auto; width: 30px !important; height: 30px !important; }

/* ===== Panel admina: miesiące, strony po 10, archiwum, sprzedaż ===== */
.adm-view { margin-bottom: 14px; }
.mnav { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.mnav-t { display: grid; text-align: center; min-width: 180px; line-height: 1.2; }
.mnav-t span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); }
.mnav-t b { font-size: 1.25rem; color: var(--green); }
.mnav-t small { font-size: 0.78rem; color: var(--muted); }
.mnav-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); color: var(--green); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; transition: background 0.2s, transform 0.2s; }
.mnav-arrow:hover:not(:disabled) { background: var(--green-tint); transform: scale(1.06); }
.mnav-arrow:disabled { opacity: 0.35; cursor: default; }
.mnav-all { margin-left: auto; }
.mnav-pages { justify-content: center; margin-top: 16px; font-size: 0.9rem; color: var(--muted); }
.adm-list.slide-l { animation: mnav-in-l 0.32s ease; }
.adm-list.slide-r { animation: mnav-in-r 0.32s ease; }
@keyframes mnav-in-l { from { opacity: 0; transform: translateX(28px); } }
@keyframes mnav-in-r { from { opacity: 0; transform: translateX(-28px); } }
.keep-tag { font-size: 0.74rem; padding: 4px 10px; border-radius: 999px; background: var(--green-tint); color: var(--green); white-space: nowrap; }
.keep-tag.is-over { background: var(--amber-bg); color: var(--warn-ink); }

.sales-nav { justify-content: center; }
.sales-kpi .stat em { display: inline-block; font-style: normal; font-size: 0.74rem; margin-left: 4px; font-weight: 600; }
.sales-kpi .stat em.up { color: var(--ok); }
.sales-kpi .stat em.down { color: var(--danger); }
.sales-card { padding: 18px 20px; }
.sc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-h h3 { margin: 0; font-size: 1.02rem; }
.sales-chart-wrap { position: relative; }
.sales-chart { width: 100%; height: auto; display: block; overflow: visible; }
.sales-chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.sales-chart .base { stroke: var(--line-strong); stroke-width: 1; }
.sales-chart .ax { font-size: 11px; fill: var(--muted-2); }
.sales-chart .val { font-size: 11px; font-weight: 600; fill: var(--ink); }
.sales-chart .bar path { fill: var(--green); opacity: 0.85; transition: opacity 0.15s; }
.sales-chart .bar.is-now path { fill: #8a4f8f; }
.sales-chart .bar:hover path, .sales-chart .bar:focus path { opacity: 1; }
.sales-chart .bar:focus { outline: none; }
.sales-chart .hit { fill: transparent; cursor: pointer; }
.sales-chart .bar:hover .hit { fill: var(--green-tint); }
.sales-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ink); color: #fff; font-size: 0.8rem; padding: 7px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.sales-table { margin-top: 10px; font-size: 0.85rem; }
.sales-table summary { cursor: pointer; color: var(--muted); }
.sales-table table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sales-table th, .sales-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
.sales-table td:not(:first-child), .sales-table th:not(:first-child) { text-align: right; }
.sales-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-top: 14px; }
.hbars { display: grid; gap: 9px; }
.hb { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 0.86rem; }
.hb span { color: var(--ink); }
.hb i { height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.hb i b { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width 0.6s ease; }
.hb strong { font-weight: 600; font-size: 0.82rem; color: var(--muted); min-width: 4.5em; text-align: right; }
.st-bar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line-soft); }
.st-bar i, .st-legend i { background: var(--ok); }
.st-bar i.pending, .st-legend i.pending { background: #c98a12; }
.st-bar i.cancelled, .st-legend i.cancelled { background: #9aa6a4; }
.st-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.84rem; color: var(--muted); }
.st-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.st-legend b { color: var(--ink); margin-left: 2px; }
@media (max-width: 600px) {
  .mnav-t { min-width: 0; flex: 1; }
  .mnav-all { margin-left: 0; width: 100%; }
  .sales-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sales-kpi .stat { padding: 12px 14px; }
  .sales-kpi .stat b { font-size: 1.25rem; }
  .sales-kpi .stat em { display: block; margin: 2px 0 0; }
  .hb { grid-template-columns: 8em minmax(0, 1fr) auto; font-size: 0.8rem; }
}

/* ===== Panel admina w układzie panelu pary: menu boczne + Start ===== */
.adm-card h1 { font-size: 1.9rem; }
.adm-mail { overflow-wrap: anywhere; }
.adm-warn { display: flex; gap: 6px; align-items: center; color: var(--amber); margin-top: 4px; }
.adm-warn svg { width: 14px; height: 14px; flex: none; }
.g-nav .nav-badge { margin-left: auto; font-style: normal; font-size: 0.68rem; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--amber-bg); color: var(--warn-ink); }
.g-nav a[aria-current="page"] .nav-badge { background: rgba(255, 255, 255, 0.22); color: var(--on-fill); }
.admin-page .banner-admin { margin-bottom: 0; }
button.st-stat { font: inherit; text-align: left; cursor: pointer; }
.st-num { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: var(--amber-bg); color: var(--warn-ink); font-weight: 800; font-size: 0.8rem; }
.adm-mini { display: grid; gap: 2px; }
.adm-mini-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: 10px; }
.adm-mini-row:last-child { border-bottom: 0; }
.adm-mini-row:hover { background: var(--green-tint); }
.adm-mini-row .code-badge { font-size: 0.7rem; }
.adm-mini-who, .adm-mini-money { display: grid; min-width: 0; line-height: 1.25; }
.adm-mini-who b { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-mini small { font-size: 0.72rem; color: var(--muted); }
.adm-mini-money { text-align: right; }
.adm-mini-money b { font-size: 0.86rem; }
.adm-mini .s-oczekuje_na_platnosc { color: var(--amber); font-weight: 700; }
.adm-mini .s-oplacone { color: var(--ok); font-weight: 700; }
.st-soon { padding: 18px 20px; }
.st-soon h3 { display: flex; gap: 8px; align-items: baseline; font-size: 1.05rem; margin: 0 0 12px; }
.st-soon h3 small { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.st-soon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.st-soon-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--card-soft); color: var(--ink); text-decoration: none; min-width: 0; }
.st-soon-item:hover { background: var(--green-tint); }
.st-soon-item > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.st-soon-item b { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-soon-item small { font-size: 0.72rem; color: var(--muted); }
.st-day { flex: none; width: 42px; height: 46px; border-radius: 10px; background: var(--fill); color: var(--on-fill); display: grid; place-items: center; align-content: center; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; }
.st-day b { font-size: 1.1rem; letter-spacing: 0; }
@media (max-width: 860px) {
  .adm-card h1 { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .admin-page .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-page .stat { padding: 10px 12px; }
  .admin-page .stat b { font-size: 1.2rem; }
  .admin-page .adm-card { padding: 12px 16px; }
  .admin-page .adm-card .eyebrow { display: none; }
}
.admin-page #admin-body { min-width: 0; }
@media (max-width: 600px) { .admin-page #admin-body .btn { white-space: normal; text-align: center; max-width: 100%; } }

/* admin: kalkulator odstąpienia */
.wd-calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wd-calc > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.wd-calc span { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.wd-calc b { font-size: 1.5rem; color: var(--muted); line-height: 1.1; }
.wd-calc small { font-size: 0.74rem; color: var(--muted); }
.wd-calc .is-max { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-tint); }
.wd-calc .is-max b, .wd-calc .wd-res b { color: var(--green); }
.wd-calc .wd-res { background: var(--green-tint); border-color: transparent; }
.wd-refund { font-size: 1.15rem; color: var(--green); }
@media (max-width: 600px) { .wd-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wd-calc .wd-res { grid-column: 1 / -1; } }
.wd { grid-template-columns: minmax(0, 1fr); }
.wd .bank dd, .wd .wd-calc > div { min-width: 0; overflow-wrap: anywhere; }

/* weryfikacja dokumentu PDF (#/weryfikacja/…) */
.verify { display: grid; place-items: center; min-height: 50vh; }
.verify-card { width: min(560px, 100%); display: grid; gap: 12px; padding: 28px 26px; }
.verify-card h1 { margin: 0; font-size: 1.6rem; }
.verify-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: #fff; background: var(--ok); }
.verify-ic svg { width: 26px; height: 26px; }
.verify-card.is-bad .verify-ic { background: var(--danger); }
.verify-card.is-bad h1 { color: var(--danger); }
.verify-dl { grid-template-columns: auto 1fr; margin: 4px 0 0; }

/* linki z maili Firebase: potwierdzenie e-maila, nowe hasło (#/konto-akcja) */
.acct-card .row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.acct-card .verify-ic { background: var(--fill); }
.acct-card.is-ok .verify-ic { background: var(--ok); }
.acct-card.is-bad .verify-ic { background: var(--amber); }
.acct-card.is-bad h1 { color: var(--ink); }
.acct-form { display: grid; gap: 12px; margin-top: 4px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 46px; width: 100%; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pw-eye:hover { background: var(--green-tint); color: var(--green); }
.pw-eye svg { width: 18px; height: 18px; }

/* animacje poza ekranem stoją (js/app.js oznacza niewidoczne sekcje klasą is-offscreen) – mniej pracy dla przeglądarki */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---------- dedykacje DJ-a (dodatek) ---------- */
/* karta dodatku w zamówieniu */
.addon-dj { position: relative; width: 42px; height: 56px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, #2b3a63, #121a33); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); color: #ffd98a; flex: none; transition: transform 0.4s var(--ease); }
.addon-dj b { display: grid; }
.addon-dj svg { width: 22px; height: 22px; }
.addon-dj i { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #ffd98a 0 40%, rgba(255, 217, 138, 0.35) 40%); }
.addon-card:has(input:checked) .addon-dj { transform: rotate(-5deg) scale(1.06); }
@media (max-width: 560px) { .addon-dj { grid-area: a; } }
/* dodatek „Kapsuła czasu”: koperta z pieczęcią */
.addon-capsule { position: relative; width: 42px; height: 56px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, #f3e6c8, #d9bf86); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); color: #7a4b1c; flex: none; transition: transform 0.4s var(--ease); }
.addon-capsule b { display: grid; }
.addon-capsule svg { width: 22px; height: 22px; }
.addon-capsule i { position: absolute; right: 6px; bottom: 6px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e06a6a, #a32626); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.addon-card:has(input:checked) .addon-capsule { transform: rotate(5deg) scale(1.06); }
@media (max-width: 560px) { .addon-capsule { grid-area: a; } }
.capsule-years { border: 0; margin: -4px 0 4px; padding: 0 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.capsule-years legend { font-size: 0.86rem; font-weight: 700; margin-bottom: 6px; padding: 0; }
.capsule-years[hidden] { display: none; }

/* gość: zakładka „Dedykacje” */
.g-dj-cta { margin-top: 8px; }
.gt-tabs[data-n="5"] button { font-size: 0.8rem; padding: 9px 4px; gap: 4px; }
/* 7 zakładek (wspólna galeria + kapsuła) – dwa rzędy: 4 + 3 */
.gt-tabs[data-n="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 22px; }
.gt-tabs[data-n="7"] button { font-size: 0.78rem; padding: 9px 3px; gap: 4px; border-radius: 16px; }
/* 6 zakładek (z „Wspólna”) – dwa rzędy po trzy, napisy w całości */
.gt-tabs[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 22px; }
.gt-tabs[data-n="6"] button { font-size: 0.8rem; padding: 9px 4px; gap: 5px; border-radius: 16px; }
@media (max-width: 520px) {
  .gt-tabs[data-n="5"], .gt-tabs[data-n="4"] { border-radius: 18px; }
  .gt-tabs[data-n="5"] button, .gt-tabs[data-n="4"] button { flex-direction: column; font-size: 0.7rem; padding: 7px 2px; border-radius: 14px; }
  .gt-tabs[data-n="6"] button { font-size: 0.76rem; padding: 8px 4px; }
  .gt-tabs button { min-width: 0; text-align: center; line-height: 1.15; }
}
/* wspólna galeria: serduszka u gościa i w panelu organizatora */
.g-heart { position: absolute; right: 5px; bottom: 5px; min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; display: inline-flex; gap: 4px; align-items: center; justify-content: center; cursor: pointer; font: inherit; font-size: 0.78rem; }
.g-heart svg { width: 16px; height: 16px; }
.g-heart.on { color: #ff5d7a; }
.g-heart b { color: #fff; }
.g-view-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.g-view-row .g-heart { position: static; background: var(--fill, #0c7f62); }
.m-likes { position: absolute; left: 6px; bottom: 26px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.72rem; display: inline-flex; gap: 3px; align-items: center; }
.m-likes svg { width: 12px; height: 12px; color: #ff5d7a; }
.m-hidden { position: absolute; right: 6px; bottom: 26px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center; }
.m-hidden svg { width: 14px; height: 14px; }
.g-viewer .tiny svg { width: 14px; height: 14px; vertical-align: -2px; }
.dj-who { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font-size: 0.9rem; color: inherit; }
.dj-who svg { width: 18px; height: 18px; flex: none; }
.dj-who b { display: inline; }
.dj-form { display: grid; gap: 10px; }
.dj-form textarea { resize: vertical; min-height: 64px; }
.dj-thanks { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 8px; }
.dj-thanks-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #1c2647; color: #ffd98a; }
.dj-thanks-ic svg { width: 26px; height: 26px; }
/* ruch: zawsze (CONFIG.motion) */ .dj-thanks-ic { animation: dj-pop 0.5s var(--ease); }
@keyframes dj-pop { from { transform: scale(0.4); opacity: 0; } }
.dj-mine { display: grid; gap: 8px; }
.dj-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card); }
.dj-card-main p, .dj-row-main p { margin: 3px 0; font-size: 0.86rem; font-style: italic; color: var(--muted); }
.dj-card-main > .tiny, .dj-row-main > .tiny { display: block; margin-top: 2px; }
.dj-st { font-size: 0.74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.dj-st-new { background: var(--amber-bg); color: var(--warn-ink); }
.dj-st-played { background: var(--ok-bg); color: var(--ok-ink); }
.dj-st-skipped { background: var(--neutral-bg); color: var(--neutral-ink); }

/* panel pary: zakładka „Dedykacje DJ-a” */
.dj-setup { display: grid; gap: 8px; }
.dj-setup h3 { display: flex; gap: 8px; align-items: center; margin: 0; }
.dj-setup h3 svg { width: 18px; height: 18px; }
.dj-name { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dj-name .field { flex: 1; min-width: 220px; margin: 0; }
.dj-admin { display: grid; gap: 8px; }
.dj-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.dj-row:last-child { border-bottom: 0; }
.dj-row time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green); }
@media (max-width: 560px) { .dj-row { grid-template-columns: 44px minmax(0, 1fr) auto; } .dj-row .dj-st { grid-column: 2; justify-self: start; } }
.dj-art { width: 150px; aspect-ratio: 1; border-radius: 28px; display: grid; place-items: center; align-content: center; gap: 12px; background: radial-gradient(circle at 30% 20%, #3b4f86, #121a33 75%); box-shadow: 0 18px 40px rgba(18, 26, 51, 0.35); color: #ffd98a; }
.dj-art-ic svg { width: 44px; height: 44px; }
.dj-art-note { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.05rem; color: #fff; }

/* panel DJ-a z linku (#/dj/…) – ciemny, czytelny przy konsoli */
body[data-mode="dj"] .topbar, body[data-mode="dj"] .site-footer, body[data-mode="dj"] .bg-photo, body[data-mode="dj"] #sunset-banner, body[data-mode="dj"] #dl-banner, body[data-mode="dj"] #promo-strip, body[data-mode="dj"] #footer-promo, body[data-mode="dj"] #demo-banner, body[data-mode="dj"] #sale-banner { display: none !important; }
body[data-mode="dj"] { background: #0d1226; }
.dj-page { min-height: 100vh; color: #eef1fb; background: radial-gradient(ellipse at 50% -10%, #263565, #0d1226 60%); padding: 18px 14px 40px; }
.dj-wrap { width: min(860px, 100%); margin: 0 auto; display: grid; gap: 14px; }
.dj-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.dj-k { display: inline-flex; gap: 6px; align-items: center; color: #ffd98a; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.dj-k svg { width: 16px; height: 16px; }
.dj-head h1 { margin: 4px 0 2px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.05; color: #fff; }
.dj-head p { margin: 0; opacity: 0.75; font-size: 0.9rem; }
.dj-live { display: inline-flex; gap: 6px; align-items: center; font-size: 0.78rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); white-space: nowrap; }
.dj-live i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
/* ruch: zawsze (CONFIG.motion) */ .dj-live i { animation: dj-pulse 2s infinite; }
@keyframes dj-pulse { 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.dj-tabs { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; padding: 6px; border-radius: 16px; background: rgba(13, 18, 38, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dj-tabs button { border: 0; background: rgba(255, 255, 255, 0.07); color: #dfe4f5; font: inherit; font-weight: 700; font-size: 0.9rem; padding: 9px 14px; border-radius: 12px; cursor: pointer; }
.dj-tabs button b { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.8rem; }
.dj-tabs button[aria-selected="true"] { background: #ffd98a; color: #1a1d2e; }
.dj-tabs button[aria-selected="true"] b { background: rgba(0, 0, 0, 0.12); }
.dj-list { display: grid; gap: 10px; }
.dj-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.dj-item.played, .dj-item.skipped { opacity: 0.62; }
/* ruch: zawsze (CONFIG.motion) */ .dj-item.is-new { animation: dj-new 1.6s var(--ease); }
@keyframes dj-new { 0% { background: rgba(255, 217, 138, 0.45); transform: translateY(-6px); } 100% { background: rgba(255, 255, 255, 0.06); } }
.dj-time { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: #ffd98a; }
.dj-body h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; color: #fff; }
.dj-body h2 span { font-weight: 500; opacity: 0.75; }
.dj-ded { margin: 4px 0 2px; font-style: italic; color: #cfd6ee; }
.dj-from { font-size: 0.82rem; opacity: 0.7; }
.dj-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.dj-acts .btn { white-space: nowrap; }
.dj-acts .btn-primary { background: #4ade80; color: #0b2a17; }
.dj-acts .btn-primary:hover:not(:disabled) { background: #22c55e; }
.dj-acts .btn-ghost, .dj-acts .btn-quiet { color: #eef1fb; border-color: rgba(255, 255, 255, 0.25); background: transparent; }
.dj-item .dj-st-played { background: rgba(74, 222, 128, 0.18); color: #a7f3c4; }
.dj-item .dj-st-skipped { background: rgba(255, 255, 255, 0.12); color: #dfe4f5; }
@media (max-width: 600px) {
  .dj-item { grid-template-columns: 52px minmax(0, 1fr); }
  .dj-acts { grid-column: 1 / -1; justify-content: stretch; }
  .dj-acts .btn { flex: 1; }
}
.dj-empty { text-align: center; padding: 34px 12px; opacity: 0.75; }
.dj-foot { font-size: 0.8rem; opacity: 0.6; text-align: center; margin-top: 10px; }
.dj-msg { min-height: 70vh; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.dj-msg-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 217, 138, 0.15); color: #ffd98a; }
.dj-msg-ic svg { width: 30px; height: 30px; }
.dj-msg h1 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2.2rem; color: #fff; }
.dj-msg p { margin: 0; max-width: 460px; opacity: 0.85; }
.dj-msg small, .dj-msg a { opacity: 0.6; color: inherit; }

/* „Jak to działa” – scena dedykacji DJ-a (krok 7): telefon gościa + panel DJ-a */
.dx-phone { width: 32%; aspect-ratio: 9 / 18.5; margin-right: 30%; border-radius: 6cqw; background: #0e1530; padding: 1.4cqw; box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.3); }
.dx-scr { height: 100%; border-radius: 4.8cqw; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 1.6cqw; padding: 7cqw 2.6cqw 4cqw; color: #fff; text-align: left; background: radial-gradient(ellipse at 50% 0%, #3b4f86, #1c2647 55%, #0d1226); }
.dx-k { font-size: 1.3cqw; letter-spacing: 0.24em; text-transform: uppercase; color: #ffd98a; font-weight: 700; text-align: center; }
.dx-names { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 4cqw; line-height: 1.05; white-space: nowrap; text-align: center; margin-bottom: 1cqw; }
.dx-f { display: grid; gap: 0.3cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 1.7cqw; font-weight: 700; }
.dx-f small { font-size: 1.1cqw; font-weight: 600; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; }
.dx-btn { margin-top: auto; display: inline-flex; gap: 0.8cqw; align-items: center; justify-content: center; padding: 1.5cqw 2cqw; border-radius: 99px; background: #ffd98a; color: #1a1d2e; font-size: 1.7cqw; font-weight: 800; }
.dx-btn svg { width: 2cqw; height: 2cqw; }
.dx-panel { position: absolute; right: 4cqw; top: 50%; translate: 0 -50%; width: 38%; display: grid; gap: 1cqw; padding: 2cqw; border-radius: 3cqw; background: #121a33; color: #eef1fb; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.3); }
.dx-ph { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; margin-bottom: 0.6cqw; }
.dx-ph b { display: inline-flex; gap: 0.8cqw; align-items: center; font-size: 2cqw; color: #ffd98a; }
.dx-ph b svg { width: 2.2cqw; height: 2.2cqw; }
.dx-ph i { font-style: normal; font-size: 1.3cqw; font-weight: 700; padding: 0.5cqw 1.2cqw; border-radius: 99px; background: rgba(74, 222, 128, 0.18); color: #a7f3c4; }
.dx-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2cqw; align-items: center; padding: 1.2cqw 1.4cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, 0.07); font-size: 1.7cqw; }
.dx-row em { font-style: normal; font-weight: 800; color: #ffd98a; font-variant-numeric: tabular-nums; }
.dx-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-row b small { display: block; font-weight: 500; font-style: italic; font-size: 1.35cqw; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-st { font-style: normal; font-size: 1.3cqw; font-weight: 800; padding: 0.5cqw 1.1cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.14); white-space: nowrap; }
.dx-st.dx-ok { background: rgba(74, 222, 128, 0.22); color: #a7f3c4; }
.dx-new .dx-st { grid-column: 3; grid-row: 1; }
.dx-new b, .dx-new b small { white-space: normal; }
/* ruch: zawsze (CONFIG.motion) */ .dx-new { animation: dx-in 8s ease infinite; }
  .dx-wait { animation: dx-wait 8s ease infinite; }
  .dx-done { animation: dx-done 8s ease infinite; }
  .dx-btn { animation: dx-tap 8s ease infinite; }
@keyframes dx-in { 0%, 28% { opacity: 0; transform: translateX(-3cqw); background: rgba(255, 217, 138, 0.4); } 34% { opacity: 1; transform: none; background: rgba(255, 217, 138, 0.4); } 50%, 96% { opacity: 1; background: rgba(255, 255, 255, 0.07); } 100% { opacity: 0; } }
@keyframes dx-wait { 0%, 60% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes dx-done { 0%, 60% { opacity: 0; transform: scale(0.6); } 66%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dx-tap { 0%, 18% { transform: none; } 22% { transform: scale(0.92); } 26%, 100% { transform: none; } }
@media (max-width: 600px) {
  .dx-phone { width: 44%; margin-right: 46%; }
  .dx-panel { width: 46%; right: 2.5cqw; padding: 2.4cqw; }
  .dx-names { font-size: 5.2cqw; } .dx-k { font-size: 1.8cqw; } .dx-f { font-size: 2.2cqw; } .dx-f small { font-size: 1.6cqw; } .dx-btn { font-size: 2.2cqw; }
  .dx-row { font-size: 2.2cqw; } .dx-row b small { font-size: 1.8cqw; } .dx-st { font-size: 1.7cqw; } .dx-ph b { font-size: 2.6cqw; }
}
.howto.static .hw-xdj { display: none; }

/* „Jak to działa” – kapsuła czasu: list na telefonie, licznik listów i mail w rocznicę */
.cx-phone { width: 32%; aspect-ratio: 9 / 18.5; margin-right: 30%; border-radius: 6cqw; background: #2b1d14; padding: 1.4cqw; box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.3); }
.cx-scr { height: 100%; border-radius: 4.8cqw; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 1.6cqw; padding: 7cqw 2.6cqw 4cqw; color: #3a2e22; text-align: left; background: radial-gradient(ellipse at 50% 0%, #fff6e6, #f6ead6 60%, #efdcbd); }
.cx-k { font-size: 1.3cqw; letter-spacing: 0.24em; text-transform: uppercase; color: #a0522d; font-weight: 800; text-align: center; }
.cx-names { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 4cqw; line-height: 1.05; white-space: nowrap; text-align: center; margin-bottom: 1cqw; }
.cx-paper { display: grid; gap: 1cqw; padding: 1.8cqw; border-radius: 1.6cqw; background: #fff; border: 1px solid #ecdcc4; font-family: Georgia, "Times New Roman", serif; font-size: 1.8cqw; }
.cx-paper i { display: block; height: 0.45cqw; border-radius: 1cqw; background: #dcc9ab; }
.cx-paper i:nth-of-type(2) { width: 70%; }
.cx-paper small { justify-self: end; font-size: 1.5cqw; color: #7a6650; }
.cx-btn { margin-top: auto; display: inline-flex; gap: 0.8cqw; align-items: center; justify-content: center; padding: 1.5cqw 2cqw; border-radius: 99px; background: #b3261e; color: #fff; font-size: 1.7cqw; font-weight: 800; }
.cx-btn svg { width: 2cqw; height: 2cqw; }
.cx-panel { position: absolute; right: 4cqw; top: 50%; translate: 0 -50%; width: 40%; display: grid; gap: 1.4cqw; padding: 2.2cqw; border-radius: 3cqw; background: #fffaf2; border: 1px solid #ecdcc4; color: #3a2e22; box-shadow: 0 2cqw 5cqw rgba(60, 35, 10, 0.18); }
.cx-ph { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; }
.cx-ph b { display: inline-flex; gap: 0.8cqw; align-items: center; font-size: 2cqw; color: #9d221a; }
.cx-ph b svg { width: 2.2cqw; height: 2.2cqw; }
.cx-ph i { font-style: normal; font-size: 1.3cqw; font-weight: 800; padding: 0.5cqw 1.2cqw; border-radius: 99px; background: #f6ead6; color: #7a4a20; white-space: nowrap; }
.cx-count { font-size: 1.8cqw; font-weight: 700; }
.cx-count b { display: inline-grid; font-size: 3.4cqw; color: #9d221a; vertical-align: -0.4cqw; margin-right: 0.4cqw; }
.cx-count b > span { grid-area: 1 / 1; }
.cx-n2 { opacity: 0; }
.cx-mail { display: grid; gap: 0.6cqw; padding: 1.6cqw 1.8cqw; border-radius: 2cqw; background: #fff; border: 1px solid #ecdcc4; box-shadow: 0 1cqw 3cqw rgba(60, 35, 10, 0.1); }
.cx-mail small { display: inline-flex; gap: 0.6cqw; align-items: center; font-size: 1.3cqw; font-weight: 700; color: #7a6650; }
.cx-mail small svg { width: 1.6cqw; height: 1.6cqw; }
.cx-mail b { font-size: 1.8cqw; line-height: 1.25; }
.cx-mail em { font-family: Georgia, "Times New Roman", serif; font-size: 1.6cqw; line-height: 1.35; }
.cx-mail s { text-decoration: none; font-size: 1.4cqw; color: #7a6650; }
/* ruch: zawsze (CONFIG.motion) */ .cx-btn { animation: dx-tap 8s ease infinite; }
  .cx-n1 { animation: cx-n1 8s ease infinite; }
  .cx-n2 { animation: cx-n2 8s ease infinite; }
  .cx-mail { animation: cx-mail 8s ease infinite; }
@keyframes cx-n1 { 0%, 24% { opacity: 1; } 27%, 99% { opacity: 0; } }
@keyframes cx-n2 { 0%, 24% { opacity: 0; transform: scale(1.4); } 28%, 99% { opacity: 1; transform: none; } }
@keyframes cx-mail { 0%, 34% { opacity: 0.25; transform: translateY(1cqw) scale(0.97); filter: blur(0.3cqw); } 42%, 96% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0.25; } }
@media (max-width: 600px) {
  .cx-phone { width: 44%; margin-right: 46%; }
  .cx-panel { width: 46%; right: 2.5cqw; padding: 2.4cqw; }
  .cx-names { font-size: 5.2cqw; } .cx-k { font-size: 1.8cqw; } .cx-paper { font-size: 2.2cqw; } .cx-paper small { font-size: 1.8cqw; } .cx-btn { font-size: 2.2cqw; }
  .cx-ph b { font-size: 2.6cqw; } .cx-ph i { font-size: 1.7cqw; } .cx-count { font-size: 2.2cqw; } .cx-mail b { font-size: 2.2cqw; } .cx-mail em { font-size: 2cqw; } .cx-mail small, .cx-mail s { font-size: 1.7cqw; }
}
.howto.static .hw-xcap { display: none; }

/* „Krok po kroku” – film dedykacji DJ-a: piosenka → dedykacja → DJ widzi → „Zagrane” */
.fx-dj { background: radial-gradient(ellipse at 20% 10%, rgba(255, 217, 138, 0.45), transparent 60%), linear-gradient(160deg, #f3f4fa, var(--card)); }
.fx-dj .fx-phone { left: 7cqw; top: 5cqw; background: #0e1530; }
.fx-dj .fx-dark .fx-scr { background: radial-gradient(ellipse at 50% 0%, #3b4f86, #1c2647 55%, #0d1226); color: #fff; }
.fx-dj .fx-scr > div { gap: 1.6cqw; padding: 0 2cqw; justify-items: stretch; }
.fxd-k { font-size: 1.3cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffd98a; text-align: center; }
.fxd-in { display: block; padding: 1.1cqw 1.4cqw; border-radius: 1.2cqw; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 1.6cqw; font-weight: 700; white-space: nowrap; overflow: hidden; }
.fxd-in i { display: inline-block; width: 0.25cqw; height: 1.8cqw; margin-left: 0.2cqw; vertical-align: middle; background: #ffd98a; }
.fxd-dim { opacity: 0.5; font-weight: 500; }
.fxd-txt { white-space: normal; font-style: italic; }
.fxd-send { display: inline-flex; gap: 0.6cqw; align-items: center; justify-content: center; padding: 1.2cqw 1.6cqw; border-radius: 99px; background: #ffd98a; color: #1a1d2e; font-size: 1.5cqw; font-weight: 800; }
.fxd-send svg { width: 1.8cqw; height: 1.8cqw; }
.fx-dj .fz-from2 { justify-items: center; }
.fxd-ok { width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 217, 138, 0.18); color: #ffd98a; }
.fxd-ok svg { width: 4.5cqw; height: 4.5cqw; }
.fxd-t { font-size: 1.8cqw; font-weight: 800; text-align: center; }
.fxd-panel { left: 36cqw; top: 9cqw; width: 52cqw; display: grid; gap: 1cqw; padding: 2cqw; border-radius: 2cqw; background: #121a33; color: #eef1fb; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.18); }
.fxd-ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4cqw; }
.fxd-ph b { display: inline-flex; gap: 0.8cqw; align-items: center; font-size: 1.9cqw; color: #ffd98a; }
.fxd-ph b svg { width: 2cqw; height: 2cqw; }
.fxd-ph i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #4ade80; }
.fxd-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.4cqw; align-items: center; padding: 1.2cqw 1.6cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.07); font-size: 1.7cqw; }
.fxd-row em { font-style: normal; font-weight: 800; color: #ffd98a; font-variant-numeric: tabular-nums; }
.fxd-row b { min-width: 0; }
.fxd-row b small { display: block; font-weight: 500; font-style: italic; font-size: 1.35cqw; opacity: 0.8; }
.fxd-st { font-style: normal; font-size: 1.3cqw; font-weight: 800; padding: 0.5cqw 1.1cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.14); white-space: nowrap; }
.fxd-st.fxd-played { background: rgba(74, 222, 128, 0.22); color: #a7f3c4; }
.fxd-new .fxd-st { grid-column: 3; grid-row: 1; }
.fxd-new { opacity: 0; animation: fxd-row 10s ease infinite; }
@keyframes fxd-row { 0%, 50% { opacity: 0; transform: translateX(-3cqw); background: rgba(255, 217, 138, 0.4); } 54% { opacity: 1; transform: none; background: rgba(255, 217, 138, 0.4); } 66%, 97% { opacity: 1; background: rgba(255, 255, 255, 0.07); } 100% { opacity: 0; } }
.fxd-wait { animation: fxd-wait 10s ease infinite; }
@keyframes fxd-wait { 0%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }
.fxd-done { opacity: 0; animation: fxd-done 10s ease infinite; }
@keyframes fxd-done { 0%, 75% { opacity: 0; transform: scale(0.6); } 79%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* ruch: zawsze (CONFIG.motion) */ .fxd-in i { animation: vr-blink 1s steps(1) infinite; }
/* ruch ograniczony (CONFIG.motion = "system") */ :root[data-motion="reduce"] .fxd-new, :root[data-motion="reduce"] .fxd-done { opacity: 1; } :root[data-motion="reduce"] .fxd-wait { opacity: 0; }
#sb-dj .fx-caps b { background: #3b4f86; }
/* — kapsuła czasu: list → pieczęć → czeka do rocznicy → mail z listami — */
.fx-capsule { background: radial-gradient(ellipse at 78% 8%, rgba(232, 190, 140, 0.42), transparent 60%), linear-gradient(160deg, #f8f1e6, var(--card)); }
.fx-capsule .fx-phone { left: 6cqw; top: 5cqw; }
.fx-capsule .fx-scr { background: #fbf6ec; color: #3a2e22; }
.fx-capsule .fx-scr > div { padding: 0 2cqw; justify-items: stretch; gap: 1.4cqw; }
.fxc-h { font-size: 1.25cqw; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #a0522d; text-align: center; }
.fxc-paper { display: grid; gap: 1cqw; padding: 1.6cqw; border-radius: 1.2cqw; background: #fff; border: 1px solid #ecdcc4; font-family: Georgia, "Times New Roman", serif; font-size: 1.6cqw; }
.fxc-paper em { font-style: italic; }
.fxc-paper i { display: block; height: 0.4cqw; border-radius: 1cqw; background: #dcc9ab; width: 0; animation: fxc-write 10s ease infinite; }
.fxc-paper i:nth-of-type(2) { animation-name: fxc-write2; }
.fxc-paper i:nth-of-type(3) { animation-name: fxc-write3; }
@keyframes fxc-write { 0%, 3% { width: 0; } 9%, 100% { width: 100%; } }
@keyframes fxc-write2 { 0%, 9% { width: 0; } 15%, 100% { width: 92%; } }
@keyframes fxc-write3 { 0%, 15% { width: 0; } 21%, 100% { width: 60%; } }
.fxc-paper small { justify-self: end; font-size: 1.4cqw; color: #7a6650; }
.fx-capsule .fz[style*="--k:1"], .fxc-late { justify-items: center; }
.fxc-env { position: relative; width: 15cqw; aspect-ratio: 3 / 2; border-radius: 0.8cqw; background: #f1e2c8; border: 1px solid #e0caa5; overflow: hidden; }
.fxc-env i { position: absolute; inset: 0 0 35%; background: #e8d4b0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fxc-env b { position: absolute; left: 50%; top: 52%; width: 4.4cqw; height: 4.4cqw; margin: -2.2cqw 0 0 -2.2cqw; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #d0463c, #9d221a); color: #ffe3dc; box-shadow: 0 0.4cqw 1cqw rgba(120, 20, 10, 0.35); animation: fxc-seal 10s ease infinite; }
.fxc-env b svg { width: 2.2cqw; height: 2.2cqw; }
@keyframes fxc-seal { 0%, 27% { transform: scale(2.2); opacity: 0; } 31%, 100% { transform: none; opacity: 1; } }
.fxc-t { display: grid; gap: 0.3cqw; text-align: center; font-size: 1.5cqw; font-weight: 700; }
.fxc-t b { font-size: 2cqw; color: #9d221a; }
.fxc-t small { font-size: 1.3cqw; font-weight: 600; opacity: 0.75; }
.fxc-late { opacity: 0; animation: fxc-late 10s ease infinite; }
@keyframes fxc-late { 0%, 50% { opacity: 0; } 53%, 97% { opacity: 1; } 100% { opacity: 0; } }
.fxc-ok { justify-self: center; width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; background: #f1e2c8; color: #9d221a; }
.fxc-ok svg { width: 3.8cqw; height: 3.8cqw; }
.fxc-fly { z-index: 2; left: 15cqw; top: 26cqw; width: 6cqw; aspect-ratio: 3 / 2; border-radius: 0.5cqw; background: #f1e2c8; border: 1px solid #e0caa5; opacity: 0; animation: fxc-fly 10s ease-in-out infinite; }
.fxc-fly i { position: absolute; left: 50%; top: 50%; width: 1.6cqw; height: 1.6cqw; margin: -0.8cqw; border-radius: 50%; background: #b3261e; }
@keyframes fxc-fly { 0%, 38% { opacity: 0; transform: none; } 41% { opacity: 1; transform: none; } 49% { opacity: 1; transform: translate(27cqw, -4cqw) scale(0.8) rotate(-8deg); } 52%, 100% { opacity: 0; transform: translate(27cqw, -4cqw) scale(0.6); } }
.fxc-box { left: 34cqw; top: 9cqw; width: 26cqw; display: grid; gap: 1.2cqw; justify-items: center; padding: 2cqw; border-radius: 2.2cqw; background: #fff; border: 1px solid #ecdcc4; box-shadow: 0 2cqw 5cqw rgba(90, 60, 20, 0.12); text-align: center; color: #3a2e22; animation: fxc-box 10s ease infinite; }
@keyframes fxc-box { 0%, 74% { box-shadow: 0 2cqw 5cqw rgba(90, 60, 20, 0.12); } 78%, 96% { box-shadow: 0 0 0 0.6cqw rgba(208, 70, 60, 0.25), 0 2cqw 5cqw rgba(90, 60, 20, 0.12); } }
.fxc-bh { display: inline-flex; gap: 0.6cqw; align-items: center; font-size: 1.3cqw; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #a0522d; }
.fxc-bh svg { width: 1.6cqw; height: 1.6cqw; }
.fxc-stack { position: relative; width: 14cqw; height: 9cqw; }
.fxc-stack i { position: absolute; left: 1cqw; right: 1cqw; height: 8cqw; border-radius: 0.8cqw; background: #f1e2c8; border: 1px solid #e0caa5; }
.fxc-stack i:nth-child(1) { top: 1cqw; transform: rotate(-7deg); }
.fxc-stack i:nth-child(2) { top: 0.5cqw; transform: rotate(5deg); background: #f6ead6; }
.fxc-stack i:nth-child(3) { top: 0; background: #fbf3e4; }
.fxc-count { font-size: 1.8cqw; }
.fxc-num { display: inline-grid; color: #9d221a; }
.fxc-num > span { grid-area: 1 / 1; }
.fxc-n1 { animation: fxc-n1 10s ease infinite; }
.fxc-n2 { opacity: 0; animation: fxc-n2 10s ease infinite; }
@keyframes fxc-n1 { 0%, 49% { opacity: 1; } 51%, 99% { opacity: 0; } }
@keyframes fxc-n2 { 0%, 49% { opacity: 0; } 51%, 99% { opacity: 1; } }
.fxc-years { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8cqw; align-items: center; width: 100%; font-size: 1.15cqw; font-weight: 700; color: #7a6650; }
.fxc-years i { height: 0.7cqw; border-radius: 1cqw; background: #efe4d2; overflow: hidden; }
.fxc-years s { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, #d9a35a, #b3261e); animation: fxc-years 10s ease-in-out infinite; }
@keyframes fxc-years { 0%, 52% { width: 4%; } 74%, 100% { width: 100%; } }
.fxc-open { position: absolute; top: -1.6cqw; right: -1.4cqw; padding: 0.6cqw 1.2cqw; border-radius: 99px; background: #b3261e; color: #fff; font-style: normal; font-weight: 800; font-size: 1.3cqw; opacity: 0; animation: fxc-open 10s ease infinite; }
@keyframes fxc-open { 0%, 75% { opacity: 0; transform: scale(0.6); } 79%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fxc-cal { left: 66cqw; top: 12cqw; width: 18cqw; display: grid; justify-items: center; gap: 0.4cqw; padding: 1.8cqw 1.4cqw; border-radius: 2cqw; background: #fff; border: 1px solid #ecdcc4; box-shadow: 0 1.6cqw 4cqw rgba(90, 60, 20, 0.1); color: #3a2e22; animation: fxc-cal 10s ease infinite; }
.fxc-cal small { font-size: 1.15cqw; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #a0522d; }
.fxc-cal b { font-size: 6cqw; line-height: 1; color: #9d221a; }
.fxc-cal span { font-size: 1.5cqw; font-weight: 700; }
.fxc-cal em { margin-top: 0.4cqw; padding: 0.4cqw 1cqw; border-radius: 99px; background: #f6ead6; font-style: normal; font-size: 1.2cqw; font-weight: 800; }
@keyframes fxc-cal { 0%, 72% { opacity: 1; transform: none; } 76%, 98% { opacity: 0; transform: translateY(-2cqw); } 100% { opacity: 1; } }
.fxc-mail { left: 62cqw; top: 6cqw; width: 33cqw; display: grid; gap: 1cqw; padding: 1.8cqw; border-radius: 2cqw; background: #fff; border: 1px solid #ecdcc4; box-shadow: 0 2cqw 5cqw rgba(90, 60, 20, 0.14); color: #2b241c; opacity: 0; animation: fxc-mail 10s ease infinite; }
@keyframes fxc-mail { 0%, 74% { opacity: 0; transform: translateY(3cqw); } 79%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fxc-mh { display: inline-flex; gap: 0.6cqw; align-items: center; font-size: 1.2cqw; font-weight: 800; color: #7a6650; text-transform: uppercase; letter-spacing: 0.08em; }
.fxc-mh svg { width: 1.6cqw; height: 1.6cqw; }
.fxc-subj { font-size: 1.6cqw; line-height: 1.3; }
.fxc-letter { display: grid; gap: 0.4cqw; padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; background: #fbf8f2; border: 1px solid #ece4d6; font-family: Georgia, "Times New Roman", serif; font-size: 1.45cqw; line-height: 1.35; }
.fxc-letter small { font-size: 1.25cqw; color: #7a6650; }
#sb-cap .fx-caps b { background: #b3261e; }
/* ruch ograniczony (CONFIG.motion = "system") */ :root[data-motion="reduce"] .fxc-late, :root[data-motion="reduce"] .fxc-mail, :root[data-motion="reduce"] .fxc-n2, :root[data-motion="reduce"] .fxc-open, :root[data-motion="reduce"] .fxc-env b { opacity: 1; transform: none; }
  :root[data-motion="reduce"] .fxc-cal, :root[data-motion="reduce"] .fxc-n1, :root[data-motion="reduce"] .fxc-fly { opacity: 0; }
  :root[data-motion="reduce"] .fxc-paper i, :root[data-motion="reduce"] .fxc-years s { width: 100%; }


/* „Komplet dodatków” (opcja w Cenniku) – ramka w zamówieniu, panel admina, cennik na stronie głównej */
.bundle-box { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--line-warm); background: var(--amber-bg-2); color: var(--ink); }
.bundle-box b { display: block; font-size: 0.95rem; }
.bundle-box small { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.bundle-box > span:nth-child(2) { flex: 1; }
.bundle-box .bundle-ic { font-size: 1.5rem; line-height: 1; }
.bundle-box .btn { flex: none; }
.bundle-box + .bundle-box { margin-top: 8px; }
.bundle-admin .field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.bundle-box.is-on { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.bundle-box.is-on > svg { width: 22px; height: 22px; flex: none; color: var(--ok); }
@media (max-width: 560px) { .bundle-box { flex-wrap: wrap; } .bundle-box .btn { width: 100%; } }
.bundle-admin { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 640px; }
.price-includes .price-bundle { font-size: 0.95em; }

/* ---------- kapsuła czasu ---------- */
.cap-form { display: grid; gap: 12px; margin-top: 12px; }
.cap-form textarea { resize: vertical; min-height: 120px; font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.55; }
.cap-thanks { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 8px; }
.cap-seal { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 35%, #e06a6a, #a32626); color: #fff6e6; box-shadow: 0 6px 16px rgba(163, 38, 38, 0.35); }
.cap-seal svg { width: 26px; height: 26px; }
.cap-thanks .cap-seal { animation: cap-stamp 0.6s var(--ease) both; }
@keyframes cap-stamp { from { transform: scale(1.8) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cap-h { font-size: 0.95rem; margin: 16px 0 6px; }
.cap-mine { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(127, 127, 127, 0.2); font-size: 0.86rem; }
.cap-mine svg { width: 14px; height: 14px; vertical-align: -2px; }
.cap-art { position: relative; display: grid; place-items: center; gap: 10px; padding: 26px 18px; border-radius: 14px; background: linear-gradient(160deg, #f6ead0, #e2c891); color: #6b3f15; min-height: 150px; }
.cap-art-note { font-family: Georgia, serif; font-style: italic; font-size: 0.95rem; }
.cap-setup .choice-row { margin-top: 8px; }
.cap-setup p svg { width: 16px; height: 16px; vertical-align: -3px; }
.cap-letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.cap-letter { background: #fffdf7; color: #26312f; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08); display: grid; gap: 8px; }
.cap-letter p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.6; white-space: pre-line; }
.cap-letter b { font-family: Georgia, serif; font-style: italic; font-weight: 600; }
.cap-letter small { color: #7a8583; font-size: 0.75rem; }
.adm-mails { display: grid; gap: 6px; margin-top: 10px; }
.adm-mail { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 0.86rem; padding: 6px 0; border-top: 1px solid var(--line, rgba(127, 127, 127, 0.2)); }
.adm-mail small { flex-basis: 100%; }