/* GrowGiveaway — panel w iframe Shopera. Powłoka rodziny GrowX (GrowMenu / GrowQuick): atrament #17201d,
   płótno #f4f4ef, biały pasek aplikacji w przepływie, karty 18 px. Nic sticky/fixed, brak 100vh, tekst od 12 px,
   jedna akcja główna na widok. Akcent aplikacji: rdza #c2410c (kreska sygnetu, akcent presetu C). */
:root {
  --gx-bg: #f4f4ef;
  --gx-card: #fff;
  --gx-inset: #f7f8f4;
  --gx-text: #17201d;
  --gx-body: #4b5550;
  --gx-muted: #5f6964;
  --gx-line: #e3e6e1;
  --gx-line-strong: #ccd2cd;
  --gx-ink: #17201d;
  --gx-ink-hover: #25312d;
  --gx-action: #c2410c;
  --gx-action-hover: #a2360a;
  --gx-action-soft: #fdf1ea;
  --gx-live: #c8f0df;
  --gx-live-fg: #14532d;
  --gx-draft: #fef3c7;
  --gx-draft-fg: #92400e;
  --gx-danger: #b42318;
  --gx-danger-soft: #fef3f2;
  --gx-shadow: 0 1px 2px rgba(23, 32, 29, .05), 0 12px 32px -14px rgba(23, 32, 29, .16);
  --gx-ease: cubic-bezier(.16, 1, .3, 1);
  --gx-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--gx-bg); color: var(--gx-text); font: 14px/1.5 var(--gx-font); }
body { -webkit-font-smoothing: antialiased; font-synthesis: none; }
img { max-width: 100%; }
svg { display: block; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--gx-action); }
[hidden] { display: none !important; }
.gg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pasek aplikacji (w przepływie, nie lepki) */
.gg-bar { background: var(--gx-card); border-bottom: 1px solid var(--gx-line); }
.gg-bar-in { display: flex; align-items: center; gap: 12px; width: min(1080px, calc(100% - 48px)); min-height: 72px; margin: 0 auto; padding: 14px 0; }
.gg-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gg-brand img { width: 36px; height: 36px; border-radius: 10px; }
.gg-brand h1 { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; }
.gg-brand p { margin: 2px 0 0; color: var(--gx-muted); font-size: 12px; }
.gg-bar-side { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gg-plan { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--gx-draft); color: var(--gx-draft-fg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.gg-plan.is-live { background: var(--gx-live); color: var(--gx-live-fg); }
.gg-plan.is-off { background: #eceee9; color: var(--gx-body); }
.gg-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 10px; color: var(--gx-text); font-weight: 600; text-decoration: none;
  transition: background-color 140ms ease;
}
.gg-link:hover { background: #eef0eb; }
.gg-link svg { width: 16px; height: 16px; color: var(--gx-muted); }

/* Układ */
.gg-app { display: block; width: min(1080px, calc(100% - 48px)); margin: 24px auto 48px; }
.gg-card { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: 18px; box-shadow: var(--gx-shadow); padding: 24px; margin-bottom: 16px; }
.gg-card h2 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.gg-card h3 { margin: 20px 0 8px; font-size: 14px; line-height: 1.3; font-weight: 650; }
.gg-card h3:first-of-type { margin-top: 4px; }
.gg-help { margin: 0 0 16px; color: var(--gx-body); }
.gg-note { margin: 8px 0 0; color: var(--gx-muted); font-size: 13px; }
.gg-split { display: block; }

/* Karta publikacji: status, jedno zdanie, jedna akcja główna */
.gg-publish { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
.gg-publish-copy { min-width: 0; flex: 1 1 320px; }
.gg-publish h2 { margin: 10px 0 4px; font-size: 20px; letter-spacing: -.02em; }
.gg-publish .gg-help { margin: 0; }
.gg-status { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #eceee9; color: var(--gx-body); font-size: 12px; font-weight: 600; }
.gg-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .75; }
.gg-status.is-live { background: var(--gx-live); color: var(--gx-live-fg); }
.gg-status.is-drawn { background: var(--gx-action-soft); color: var(--gx-action); }
.gg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: none; }
.gg-ok, .gg-alert { flex: 1 1 100%; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-weight: 500; }
.gg-ok { background: var(--gx-live); color: var(--gx-live-fg); }
.gg-alert { background: var(--gx-danger-soft); color: var(--gx-danger); }

/* Przyciski */
.gg-primary, .gg-secondary, .gg-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 600; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, scale 100ms ease;
}
.gg-primary { min-height: 44px; padding: 0 18px; border: 0; background: var(--gx-ink); color: #fff; box-shadow: 0 7px 16px -6px rgba(23, 32, 29, .35); }
.gg-primary:hover { background: var(--gx-ink-hover); }
.gg-primary:active, .gg-secondary:active { scale: .98; }
.gg-secondary { border: 1px solid var(--gx-line-strong); background: var(--gx-card); color: var(--gx-text); }
.gg-secondary:hover { border-color: #9ea9a2; background: var(--gx-inset); }
.gg-quiet { min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--gx-action); }
.gg-quiet:hover { background: var(--gx-action-soft); }
.gg-secondary svg, .gg-quiet svg { width: 16px; height: 16px; }
.gg-secondary svg { color: var(--gx-action); }

/* Fokus z klawiatury: jeden pierścień akcentu wszędzie */
.gg-primary:focus-visible, .gg-secondary:focus-visible, .gg-quiet:focus-visible, .gg-link:focus-visible, .gg-pick:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, .gg-rte:focus-visible, a:focus-visible {
  outline: 2px solid var(--gx-action);
  outline-offset: 2px;
}

/* Zakładki panelu: ciemna pigułka aktywnej, zawijane w jednym wierszu bez przewijania w poziomie */
.gg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.gg-tab {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--gx-line-strong); border-radius: 999px;
  background: var(--gx-card); color: var(--gx-text); font-weight: 600; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.gg-tab:hover { border-color: #9ea9a2; background: var(--gx-inset); }
.gg-tab[aria-selected="true"] { background: var(--gx-ink); border-color: var(--gx-ink); color: #fff; }
.gg-tab:focus-visible, .gg-start-card:focus-visible { outline: 2px solid var(--gx-action); outline-offset: 2px; }
html:not(.gg-js) .gg-tabs { display: none; }

/* Pulpit: karty startu 01-04 liczone z prawdziwego stanu konkursu i kafelki liczb */
.gg-start { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.gg-start-card {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 12px 16px;
  border: 1px solid var(--gx-line); border-radius: 14px; background: var(--gx-inset); color: inherit; text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.gg-start-card:hover { border-color: #9ea9a2; background: #fff; }
.gg-start-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gx-action-soft); color: var(--gx-action); font-weight: 700; font-size: 13px; }
.gg-start-card.is-done .gg-start-num { background: var(--gx-live); color: var(--gx-live-fg); }
.gg-start-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gg-start-body span { color: var(--gx-body); overflow-wrap: anywhere; }
.gg-start-go { color: var(--gx-action); font-weight: 600; white-space: nowrap; }
.gg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.gg-stats div { padding: 14px 16px; border: 1px solid var(--gx-line); border-radius: 14px; background: #fff; }
.gg-stats dt { color: var(--gx-muted); font-size: 12px; }
.gg-stats dd { margin: 4px 0 0; font-size: 22px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
@media (max-width: 640px) {
  .gg-stats { grid-template-columns: 1fr 1fr; }
  .gg-start-card { grid-template-columns: 36px minmax(0, 1fr); }
  .gg-start-go { grid-column: 2; }
}

/* Wybrane produkty i kategorie jako chipy z nazwami */
.gg-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.gg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--gx-line-strong); border-radius: 999px; background: var(--gx-inset); font-weight: 500; }
.gg-chip-x { min-height: 28px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--gx-action); font-weight: 600; font-size: 12px; cursor: pointer; }
.gg-chip-x:hover { background: var(--gx-action-soft); }
.gg-chip-x:focus-visible { outline: 2px solid var(--gx-action); outline-offset: 1px; }

/* Pola */
.gg-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.gg-field > span, .gg-field > label { font-weight: 600; }
.gg-field input, .gg-field select, .gg-field textarea, .gg-rte {
  width: 100%; min-height: 40px; padding: 8px 11px;
  border: 1px solid var(--gx-line-strong); border-radius: 10px; background: #fff; color: var(--gx-text);
  transition: border-color 140ms ease;
}
.gg-field input:hover, .gg-field select:hover, .gg-field textarea:hover, .gg-rte:hover { border-color: #9ea9a2; }
.gg-field input::placeholder, .gg-field textarea::placeholder { color: #86908a; }
.gg-field textarea { display: block; min-height: 84px; resize: vertical; }
.gg-field textarea.gg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.gg-select { position: relative; }
.gg-select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.gg-select::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--gx-muted); border-bottom: 2px solid var(--gx-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.gg-grid { display: grid; gap: 0 16px; }

/* Pola wyboru i grupy zależne (pod zaznaczeniem, z cienką linią) */
.gg-checks { display: flex; flex-direction: column; margin: 0 0 4px; padding: 0; border: 0; min-width: 0; }
.gg-check { display: flex; gap: 10px; align-items: center; min-height: 40px; font-weight: 500; cursor: pointer; }
.gg-sub { margin: 0 0 10px 7px; padding: 10px 0 0 19px; border-left: 2px solid var(--gx-line); }
.gg-sub .gg-field:last-child, .gg-sub .gg-grid:last-child .gg-field { margin-bottom: 6px; }
.gg-sub .gg-secondary { margin-top: 2px; }

/* Edytor treści strony konkursu */
.gg-rte-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.gg-rte-tools .gg-field { flex: 1 1 160px; margin: 0; }
.gg-rte { min-height: 120px; line-height: 1.5; }
.gg-rte:focus { border-color: var(--gx-action); }
.gg-rte ul { margin: 6px 0; padding-left: 22px; }

/* Picker produktów w treści strony (nie fixed) */
.gg-picker { margin-top: 10px; padding: 12px; border: 1px solid var(--gx-line); border-radius: 12px; background: var(--gx-inset); }
.gg-picker .gg-note { margin: 0 0 10px; }
.gg-pick {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; margin-top: 8px; padding: 8px 12px;
  text-align: left; background: #fff; border: 1px solid var(--gx-line); border-radius: 10px; cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.gg-pick:hover { border-color: #9ea9a2; background: var(--gx-inset); }

/* Podgląd na żywo: nagłówek i ramka jak sklep */
.gg-preview-wrap .gg-card { padding: 16px; }
.gg-preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.gg-preview-head h2 { margin: 0; }
.gg-preview-head span { color: var(--gx-muted); font-size: 12px; }
.gg-frame { border: 1px solid var(--gx-line-strong); border-radius: 12px; overflow: hidden; background: #fff; }
.gg-shopbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--gx-line); background: var(--gx-inset); color: var(--gx-muted); font-size: 12px; }
.gg-shopbar::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c5cbc6; box-shadow: 13px 0 0 #c5cbc6, 26px 0 0 #c5cbc6; margin-right: 26px; }
.gg-shopbar i { flex: 1; height: 16px; border-radius: 6px; background: #fff; border: 1px solid var(--gx-line); }
.gg-family { margin: 4px 0 16px; color: var(--gx-body); }
.gg-family a { color: var(--gx-action); }

/* Losowanie i dane */
.gg-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gg-tools .gg-note { flex: 1 1 100%; margin: 0; }

@media (min-width: 641px) {
  .gg-grid.two { grid-template-columns: 1fr 1fr; }
  .gg-grid.three { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 961px) {
  .gg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 16px; align-items: start; }
}
@media (max-width: 640px) {
  .gg-bar-in, .gg-app { width: calc(100% - 32px); }
  .gg-bar-in { min-height: 64px; padding: 10px 0; flex-wrap: wrap; row-gap: 8px; }
  .gg-brand { flex: 1 1 auto; }
  .gg-brand p { display: none; }
  .gg-plan { min-height: 24px; }
  .gg-card { padding: 18px; border-radius: 16px; }
  .gg-publish { align-items: stretch; }
  .gg-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .gg-sub { margin-left: 0; padding-left: 12px; }
  .gg-tools { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Instrukcja (ta sama powłoka, jedna kolumna tekstu) */
.gg-doc { max-width: 720px; }
.gg-doc h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.gg-doc .gg-help { font-size: 15px; }
.gg-steps { margin: 0; padding: 0; list-style: none; counter-reset: gg-step; }
.gg-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gx-line); }
.gg-steps li::before { counter-increment: gg-step; content: counter(gg-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--gx-action-soft); color: var(--gx-action); font-size: 13px; font-weight: 700; }
.gg-steps strong { display: block; margin-bottom: 2px; }
.gg-steps p { margin: 0; color: var(--gx-body); }