html { color-scheme: only light; forced-color-adjust: none; }

:root {
  --gold: #f5c842;
  --rose: #f06080;
  --cream: #fdf8f0;
  --ink: #1a1010;
  --muted: #8a7060;
  --card: #fff9f0;
  --border: rgba(245,200,66,0.3);
  --glow: rgba(245,200,66,0.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:#fdf8f0;color:#1a1010;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(240,96,128,0.08) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 90% 80%,rgba(245,200,66,0.12) 0%,transparent 60%);pointer-events:none;z-index:0}
.confetti-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.confetti-bg span{position:absolute;width:8px;height:8px;border-radius:1px;opacity:.15;animation:float linear infinite}
@keyframes float{0%{transform:translateY(110vh) rotate(0deg);opacity:0}10%{opacity:.18}90%{opacity:.18}100%{transform:translateY(-10vh) rotate(720deg);opacity:0}}
.site-nav{position:fixed;top:0;left:0;right:0;z-index:2000;background:var(--ink);border-bottom:1px solid rgba(245,200,66,0.15);padding:0 64px;height:56px;display:flex;align-items:center;justify-content:space-between;transition:background .3s,backdrop-filter .3s}
.site-nav.scrolled{background:rgba(26,16,16,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--gold);text-decoration:none}
.nav-logo-badge{background:var(--ink);color:var(--gold);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-link{font-size:.85rem;font-weight:500;color:rgba(255,255,255,0.9);text-decoration:none;padding:6px 12px;border-radius:8px;transition:color .2s}
.nav-link:hover{color:#fff}
.nav-btn-login{font-size:.85rem;font-weight:600;color:var(--gold);text-decoration:none;padding:7px 16px;border-radius:99px;border:1.5px solid rgba(245,200,66,0.5);transition:all .2s;margin-left:4px}
.nav-btn-login:hover{border-color:var(--gold);background:rgba(245,200,66,0.08)}
header{position:relative;z-index:10;text-align:center;padding:96px 24px 0px;margin-bottom:0}
.logo-badge{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 18px;border-radius:99px;margin-bottom:22px}
.logo-badge::before{content:'✦'}
h1{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.1;letter-spacing:-.02em;position:relative}
h1 em{font-style:italic;color:var(--rose)}
.brand-badge-wrap{text-align:center;margin-top:20px;margin-bottom:0}
.brand-badge{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--gold);font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 22px;border-radius:99px;margin:0px auto 0;animation:badgeGlow 2.8s ease-in-out infinite}
.brand-badge::before{content:'✦';font-size:.7rem}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 8px rgba(245,200,66,0.15)}50%{box-shadow:0 0 18px rgba(245,200,66,0.4)}}
.subtitle{margin-top:14px;font-size:1rem;color:var(--muted);font-weight:300;max-width:460px;margin-inline:auto;line-height:1.6}
.steps-bar{display:flex;justify-content:center;max-width:660px;margin:20px auto 32px;padding:0 24px;position:relative;z-index:10}
.step{flex:1;text-align:center;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;top:18px;left:55%;right:-5%;height:2px;background:var(--border)}
.step.active:not(:last-child)::after,.step.done:not(:last-child)::after{background:var(--gold)}
.step-num{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:var(--muted);background:var(--cream);transition:all .3s;position:relative;z-index:1}
.step.active .step-num{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 0 0 4px rgba(245,200,66,.2)}
.step.done .step-num{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.step-label{display:block;margin-top:8px;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.step.active .step-label{color:var(--ink)}
main{position:relative;z-index:10;max-width:760px;margin:0px auto 60px;padding:0 20px;width:100%}
.card{background:var(--card);border:1px solid var(--border);border-radius:32px;padding:36px 48px;box-shadow:0 8px 60px rgba(26,16,16,.10),0 1px 0 rgba(255,255,255,.8) inset;display:none;animation:cardRise .42s cubic-bezier(.22,.61,.36,1)}
.card.active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardRise{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.card-title{font-family:'Playfair Display',serif;font-size:2.2rem;margin-bottom:16px}
.card-desc{color:var(--muted);font-size:1.05rem;margin-bottom:22px;line-height:1.6}
.upload-zone{border:2px dashed rgba(245,200,66,.5);border-radius:16px;padding:44px 24px;text-align:center;cursor:pointer;transition:all .25s;background:rgba(245,200,66,.04);position:relative}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--gold);background:rgba(245,200,66,.09);transform:scale(1.01)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:2.8rem;margin-bottom:10px;display:block}
.upload-zone h3{font-family:'Playfair Display',serif;font-size:1.15rem;margin-bottom:5px}
.upload-zone p{color:var(--muted);font-size:.84rem}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:22px}
.photo-thumb{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;border:2px solid transparent;transition:border-color .15s,opacity .15s,transform .15s;cursor:grab;user-select:none}
.photo-thumb:hover{border-color:var(--rose)}
.photo-thumb.dragging{opacity:.35;transform:scale(.95);cursor:grabbing;border-color:var(--gold)!important}
.photo-thumb.drag-over{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,200,66,.35);transform:scale(1.04)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.thumb-num{position:absolute;top:4px;left:5px;background:rgba(26,16,16,.65);color:var(--gold);font-size:10px;font-weight:700;border-radius:5px;padding:1px 5px;pointer-events:none}
.remove-btn{position:absolute;top:4px;right:4px;width:22px;height:22px;background:rgba(26,16,16,.7);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;z-index:2}
.photo-thumb:hover .remove-btn{opacity:1}
.drag-hint{text-align:center;font-size:.88rem;color:#222;margin-top:10px;opacity:.9;font-weight:600;letter-spacing:.02em;padding:7px 14px;background:rgba(245,200,66,.15);border:1px solid rgba(245,200,66,.35);border-radius:8px;display:block;width:100%;box-sizing:border-box;margin-left:auto;margin-right:auto}
.photo-count{text-align:right;font-size:.8rem;color:var(--muted);margin-top:4px}
/* VIDEO THUMB */
.video-thumb-inner{width:100%;height:100%;background:linear-gradient(135deg,#1a0a14,#0a0a1a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--gold);font-size:1.4rem}
.video-dur-tag{font-size:9px;font-weight:700;color:rgba(255,255,255,0.55);letter-spacing:.04em}
.text-slide-thumb .text-slide-inner{width:100%;height:100%;background:linear-gradient(135deg,#1a1400,#0a0800);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--gold);font-size:1.2rem;padding:4px}
.text-slide-preview{font-size:9px;font-weight:600;color:#fff;text-align:center;word-break:break-word;line-height:1.2;max-height:32px;overflow:hidden}
.video-type-tag{position:absolute;bottom:4px;left:4px;background:rgba(240,96,128,.9);color:#fff;font-size:9px;font-weight:700;border-radius:4px;padding:1px 5px;pointer-events:none;letter-spacing:.04em}
.form-group{margin-bottom:28px}
label{display:block;font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:7px}
input[type=text],input[type=number],textarea,select{width:100%;padding:11px 15px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:.93rem;background:#fff;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,200,66,.15)}
textarea{resize:vertical;min-height:85px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.char-count{text-align:right;font-size:.73rem;color:var(--muted);margin-top:4px}
.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
@media(max-width:500px){.style-grid{grid-template-columns:1fr}}
.style-chip .emoji{font-size:1.4rem;flex-shrink:0}
.style-chip .chip-name{font-weight:500;font-size:.88rem}
.style-chip .chip-desc{font-size:.76rem;color:var(--muted)}
.music-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.music-chip{border:1.5px solid var(--border);border-radius:99px;padding:7px 15px;cursor:pointer;font-size:.83rem;font-weight:500;background:#fff;transition:all .2s}
.music-chip:hover{border-color:var(--rose)}
.music-chip.selected{background:var(--rose);border-color:var(--rose);color:#fff}
/* palette-chip — nowy widget wyboru koloru */
.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
@media(max-width:500px){.palette-grid{grid-template-columns:repeat(2,1fr)}}
.palette-chip{border:2.5px solid var(--border);border-radius:12px;padding:10px 8px 8px;cursor:pointer;text-align:center;background:#fff;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--ink)}
.palette-chip:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.palette-swatch{width:40px;height:40px;border-radius:50%;border:2px solid rgba(0,0,0,.08)}
/* Per-kolor zaznaczenie */
.palette-chip[data-palette="złota"].selected{border-color:#f5c842;box-shadow:0 0 0 3px rgba(245,200,66,.35),0 4px 16px rgba(245,200,66,.3);background:rgba(245,200,66,.08)}
.palette-chip[data-palette="złota"].selected span{color:#b8860b;font-weight:700}
.palette-chip[data-palette="różowa"].selected{border-color:#ff6fa8;box-shadow:0 0 0 3px rgba(255,111,168,.35),0 4px 16px rgba(255,111,168,.3);background:rgba(255,111,168,.07)}
.palette-chip[data-palette="różowa"].selected span{color:#c0005a;font-weight:700}
.palette-chip[data-palette="niebieska"].selected{border-color:#7ec8e3;box-shadow:0 0 0 3px rgba(126,200,227,.35),0 4px 16px rgba(126,200,227,.3);background:rgba(126,200,227,.08)}
.palette-chip[data-palette="niebieska"].selected span{color:#1a6080;font-weight:700}
.palette-chip[data-palette="biała"].selected{border-color:#aaa;box-shadow:0 0 0 3px rgba(180,180,180,.35),0 4px 16px rgba(180,180,180,.25);background:#f5f5f5}
.palette-chip[data-palette="biała"].selected span{color:#555;font-weight:700}
/* ---- CLAYMORPHISM — style-chip (poduszkowy) ---- */
.style-grid{gap:12px}
.style-chip{
  border:none;
  border-radius:20px;
  padding:16px 18px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;align-items:center;gap:13px;
  background:#fff;
  box-shadow:
    0 6px 0 0 rgba(0,0,0,.10),
    0 8px 20px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;
}
.style-chip:hover{
  transform:translateY(-3px);
  box-shadow:
    0 9px 0 0 rgba(0,0,0,.10),
    0 14px 28px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.style-chip:active{
  transform:translateY(2px);
  box-shadow:
    0 2px 0 0 rgba(0,0,0,.10),
    0 4px 10px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}
/* kolory tła per nastrój */
.style-chip[data-style="ciepły"]   { background:linear-gradient(145deg,#fff3d0,#ffe8a0); box-shadow:0 6px 0 0 #c8940a, 0 8px 20px rgba(200,148,10,.22), inset 0 1px 0 rgba(255,255,255,.8); }
.style-chip[data-style="zabawny"]  { background:linear-gradient(145deg,#ffe0ee,#ffbbd8); box-shadow:0 6px 0 0 #c0507a, 0 8px 20px rgba(240,80,140,.2), inset 0 1px 0 rgba(255,255,255,.8); }
.style-chip[data-style="elegancki"]{ background:linear-gradient(145deg,#1e2c42,#152236); box-shadow:0 6px 0 0 #0a1422, 0 8px 20px rgba(10,30,60,.35), inset 0 1px 0 rgba(80,120,180,.3); }
.style-chip[data-style="retro"]    { background:linear-gradient(145deg,#f5ece0,#e8d8c4); box-shadow:0 6px 0 0 #b09070, 0 8px 20px rgba(192,160,112,.2), inset 0 1px 0 rgba(255,255,255,.8); }

.style-chip[data-style="ciepły"]:hover    { box-shadow:0 9px 0 0 #c8940a, 0 14px 28px rgba(200,148,10,.28), inset 0 1px 0 rgba(255,255,255,.8); }
.style-chip[data-style="zabawny"]:hover   { box-shadow:0 9px 0 0 #c0507a, 0 14px 28px rgba(240,80,140,.25), inset 0 1px 0 rgba(255,255,255,.8); }
.style-chip[data-style="elegancki"]:hover { box-shadow:0 9px 0 0 #0a1422, 0 14px 28px rgba(10,30,60,.45), inset 0 1px 0 rgba(80,120,180,.3); }
.style-chip[data-style="retro"]:hover     { box-shadow:0 9px 0 0 #b09070, 0 14px 28px rgba(192,160,112,.25), inset 0 1px 0 rgba(255,255,255,.8); }

/* zaznaczony — wciskamy w dół + wyraźna ramka */
.style-chip.selected{
  transform:translateY(3px) !important;
  border:3px solid transparent;
}
.style-chip[data-style="ciepły"].selected    { border-color:#b07800; box-shadow:0 2px 0 0 #c8940a, 0 4px 12px rgba(200,148,10,.22), inset 0 2px 6px rgba(0,0,0,.08), 0 0 0 4px rgba(200,148,10,.28); }
.style-chip[data-style="zabawny"].selected   { border-color:#a03060; box-shadow:0 2px 0 0 #c0507a, 0 4px 12px rgba(240,80,140,.2), inset 0 2px 6px rgba(0,0,0,.08), 0 0 0 4px rgba(192,80,122,.25); }
.style-chip[data-style="elegancki"].selected { border-color:#4478bb; box-shadow:0 2px 0 0 #0a1422, 0 4px 12px rgba(10,30,60,.35), inset 0 2px 6px rgba(0,0,0,.15), 0 0 0 4px rgba(68,120,187,.3); }
.style-chip[data-style="retro"].selected     { border-color:#8a6840; box-shadow:0 2px 0 0 #b09070, 0 4px 12px rgba(192,160,112,.2), inset 0 2px 6px rgba(0,0,0,.08), 0 0 0 4px rgba(138,104,64,.22); }

.style-chip .emoji{font-size:1.6rem;flex-shrink:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.style-chip .chip-name{font-weight:700;font-size:.9rem;color:var(--ink)}
.style-chip .chip-desc{font-size:.74rem;color:rgba(26,16,16,.55);margin-top:2px}
/* elegancki ma ciemne tło — tekst musi być jasny */
.style-chip[data-style="elegancki"] .chip-name{ color:#d0e0f8; }
.style-chip[data-style="elegancki"] .chip-desc{ color:rgba(180,210,255,.6); }
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:99px;font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:500;cursor:pointer;border:none;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--ink);color:var(--gold);box-shadow:0 4px 16px rgba(26,16,16,.2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,16,16,.25)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-secondary{background:transparent;color:var(--muted);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-gold{background:var(--gold);color:var(--ink);font-weight:600;box-shadow:0 4px 20px rgba(245,200,66,.4)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,200,66,.5)}
.btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.gen-area{text-align:center;padding:16px 0}
.gen-animation{width:90px;height:90px;margin:0 auto 22px;position:relative}
.gen-ring{width:90px;height:90px;border-radius:50%;border:3px solid transparent;border-top-color:var(--gold);border-right-color:var(--rose);animation:spin 1.2s linear infinite;position:absolute;inset:0}
.gen-ring-2{width:68px;height:68px;inset:11px;border-top-color:var(--rose);border-right-color:transparent;border-bottom-color:var(--gold);animation-duration:1.8s;animation-direction:reverse}
.gen-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.7rem;animation:pulse 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}
.gen-title{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:7px}
.gen-status{color:var(--muted);font-size:.88rem;margin-bottom:20px;min-height:22px}
.progress-bar{height:4px;background:var(--border);border-radius:99px;overflow:hidden;max-width:280px;margin:0 auto 7px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--rose));border-radius:99px;width:0%;transition:width .4s ease}
.progress-pct{font-size:.78rem;color:var(--muted);margin-bottom:20px}
.script-box{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:22px;margin-top:18px;text-align:left}
.script-box h4{font-family:'Playfair Display',serif;font-size:.95rem;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.script-content{font-size:.86rem;line-height:1.75;color:var(--ink);white-space:pre-wrap}
.ai-label{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;color:var(--rose);letter-spacing:.04em}
.canvas-wrap{background:#000;border-radius:18px;overflow:hidden;margin-bottom:20px;position:relative;aspect-ratio:16/9}
.canvas-wrap canvas{width:100%;height:100%;display:block}
.canvas-portrait{aspect-ratio:9/16;max-width:320px;margin-inline:auto}
.canvas-square{aspect-ratio:1/1}
.canvas-controls{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.ctrl-btn{background:rgba(245,200,66,.9);border:none;border-radius:99px;padding:8px 18px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .2s}
.ctrl-btn:hover{background:var(--gold);transform:scale(1.05)}
.video-info-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;justify-content:center}
.video-badge{background:rgba(245,200,66,.15);border:1px solid var(--border);border-radius:99px;padding:5px 13px;font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.video-badge strong{color:var(--ink)}
.divider{height:1px;background:var(--border);margin:24px 0}
.download-row{display:flex;gap:10px;flex-wrap:wrap}
.add-text-slide-box{background:rgba(245,200,66,.06);border:1.5px solid rgba(245,200,66,.25);border-radius:14px;padding:18px 20px;margin:0 0 4px}
.caption-editor{background:#fff;border:1.5px solid var(--border);border-radius:16px;overflow:hidden}
.caption-editor-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(245,200,66,.07);border-bottom:1px solid var(--border);font-size:.88rem}
.caption-hint{font-size:.75rem;color:var(--muted)}
.caption-list{padding:12px;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.caption-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;border:1.5px solid transparent;transition:border-color .15s,background .15s;cursor:pointer}
.caption-row:hover{border-color:var(--border);background:rgba(245,200,66,.05)}
.caption-row.active-slide{border-color:var(--gold);background:rgba(245,200,66,.1)}
.caption-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#222}
.caption-thumb-text{width:44px;height:44px;border-radius:6px;background:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.caption-thumb-wrap{position:relative;width:44px;height:44px;flex-shrink:0}
.caption-diag-badge{position:absolute;bottom:-4px;right:-4px;background:var(--ink);color:var(--gold);font-size:9px;font-weight:700;line-height:1.3;border-radius:5px;padding:1px 4px;border:1px solid var(--gold);pointer-events:none;white-space:nowrap}
.caption-diag-group{box-shadow:inset 3px 0 0 var(--gold);background:rgba(245,200,66,.045)}
.caption-diag-first{border-top-left-radius:12px}
.caption-diag-last{border-bottom-left-radius:12px}
.caption-num{font-size:.72rem;font-weight:700;color:var(--muted);min-width:18px;padding-top:2px}
.caption-text-wrap{flex:1;min-width:0}
.caption-input{width:100%;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:.88rem;color:var(--ink);background:transparent;resize:none;line-height:1.5;padding:0;min-height:38px}
.caption-row:focus-within{border-color:var(--gold);background:rgba(245,200,66,.08)}
.caption-clear{background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;padding:2px 6px;border-radius:4px;flex-shrink:0;margin-top:1px;opacity:0;transition:opacity .15s}
.caption-row:hover .caption-clear,.caption-row:focus-within .caption-clear{opacity:1}
/* TIMELINE MANIFEST BOX */
.manifest-box{background:#0a0a0f;border:1px solid rgba(126,200,227,.2);border-radius:12px;padding:14px 16px;margin-top:14px}
.manifest-box summary{font-size:.8rem;font-weight:600;color:rgba(126,200,227,.8);cursor:pointer;letter-spacing:.04em;user-select:none}
.manifest-code{font-family:'Courier New',monospace;font-size:.69rem;color:#7ec8e3;max-height:180px;overflow-y:auto;margin-top:10px;white-space:pre;line-height:1.6}
.notif{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--gold);padding:11px 22px;border-radius:99px;font-size:.88rem;font-weight:500;z-index:100;transition:transform .3s;white-space:nowrap}
.notif.show{transform:translateX(-50%) translateY(0)}
.demo-notice{background:rgba(245,200,66,.12);border:1.5px solid rgba(245,200,66,.4);border-radius:12px;padding:14px 18px;font-size:.84rem;color:var(--muted);margin-bottom:24px;line-height:1.6}
.demo-notice strong{color:var(--ink)}
.site-footer{position:relative;z-index:10;background:var(--ink);color:rgba(255,255,255,0.55);padding:36px 40px 24px;margin-top:120px;font-size:.84rem}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:24px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:20px}}
.footer-col h4{font-family:'Playfair Display',serif;font-size:.88rem;font-weight:700;color:var(--gold);margin-bottom:12px;letter-spacing:.04em}
.footer-col p,.footer-col a{display:block;color:rgba(255,255,255,0.5);text-decoration:none;line-height:2;transition:color .15s}
.footer-col a:hover{color:var(--gold)}
.footer-divider{height:1px;background:rgba(255,255,255,0.08);margin-bottom:20px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:.76rem;color:rgba(255,255,255,0.3)}
.powered-by{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.4);text-decoration:none;font-size:.76rem;transition:color .15s}
.powered-by:hover{color:var(--gold)}
.powered-by strong{color:var(--gold)}
.ai-disclaimer{background:rgba(245,200,66,.07);border:1px solid rgba(245,200,66,.2);border-radius:10px;padding:12px 16px;font-size:.78rem;color:rgba(255,255,255,0.45);line-height:1.7;margin-bottom:24px}
.ai-disclaimer strong{color:rgba(255,255,255,0.7)}
.cookie-banner{position:fixed;bottom:-200px;left:50%;transform:translateX(-50%);z-index:99999;background:var(--ink);color:rgba(255,255,255,0.8);border-radius:16px;padding:18px 22px;max-width:480px;width:calc(100vw - 32px);box-shadow:0 8px 40px rgba(0,0,0,.3);border:1px solid rgba(245,200,66,.2);transition:bottom .4s cubic-bezier(.34,1.56,.64,1);font-size:.83rem;line-height:1.6}
.cookie-banner.visible{bottom:24px}
.cookie-banner p{margin-bottom:14px}
.cookie-banner p a{color:var(--gold)}
.cookie-banner strong{color:#fff}
.cookie-btns{display:flex;gap:8px;flex-wrap:wrap}
.cookie-btn-accept{flex:1;background:var(--gold);color:var(--ink);border:none;border-radius:99px;padding:9px 18px;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s}
.cookie-btn-accept:hover{background:#f7d55a}
.cookie-btn-reject{flex:1;background:transparent;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.15);border-radius:99px;padding:9px 18px;font-size:.82rem;cursor:pointer;transition:all .2s}
.cookie-btn-reject:hover{color:#fff;border-color:rgba(255,255,255,0.4)}
/* OCCASION GRID */
.occasion-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;margin-top:12px}
@media(max-width:500px){.occasion-grid{grid-template-columns:repeat(2,1fr)}}
.occasion-card{position:relative;border:2px solid var(--border);border-radius:20px;padding:16px 12px;cursor:pointer;text-align:center;background:#fff;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s,background .22s;display:grid;grid-template-rows:1fr auto var(--subrow,1.3rem);align-items:center;justify-items:center;gap:6px}
.occasion-card .occasion-emoji{display:flex;align-items:center;justify-content:center;grid-row:1}
.occasion-card .occasion-name{margin-bottom:0;grid-row:2}
.occasion-card .occasion-subtitle{position:static;grid-row:3;align-self:start;margin:0}
.occasion-card{padding-bottom:16px}
.occasion-card:has(.occasion-subtitle){justify-content:center}
.occasion-card:hover{border-color:var(--gold);background:rgba(245,200,66,.10);transform:translateY(-4px);box-shadow:0 10px 28px rgba(245,200,66,.22)}
.occasion-card:active{transform:translateY(1px) scale(.97);box-shadow:0 2px 8px rgba(200,144,10,.18);transition-duration:.08s}
.occasion-card.selected{border-color:#c8900a;background:linear-gradient(145deg,#fff3c4,#ffe880);outline:3px solid rgba(245,200,66,.6);outline-offset:1px;box-shadow:0 10px 32px rgba(200,144,10,.32);transform:translateY(-3px);animation:occasionPop .42s cubic-bezier(.34,1.56,.64,1)}
.occasion-card.selected .occasion-emoji{animation:emojiPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes occasionPop{0%{transform:translateY(1px) scale(.97)}55%{transform:translateY(-5px) scale(1.04)}100%{transform:translateY(-3px) scale(1)}}
@keyframes emojiPop{0%{transform:scale(1)}45%{transform:scale(1.25) rotate(-4deg)}100%{transform:scale(1)}}
.occasion-card.selected .occasion-name{color:#7a5500}
.occasion-emoji{font-size:4rem;line-height:1}
.occasion-name{font-size:1.1rem;font-weight:600;color:var(--ink);line-height:1.3}.add-text-slide-title{font-weight:700;font-size:.95rem;margin-bottom:6px;color:var(--ink)}
.occasion-subtitle{font-size:.72rem;font-weight:500;color:#9a8f7d;line-height:1.2;margin-top:2px;letter-spacing:.01em}
.occasion-card.selected .occasion-subtitle{color:#a07a2e}
.caption-drag-handle{font-size:1rem;color:var(--muted);cursor:grab;flex-shrink:0;padding:0 2px;user-select:none;opacity:.5;transition:opacity .15s}
.caption-row:hover .caption-drag-handle{opacity:1}
.caption-dragging{opacity:.4;background:rgba(245,200,66,.08)!important}
.caption-drag-over{border-color:var(--gold)!important;background:rgba(245,200,66,.12)!important;box-shadow:0 0 0 2px rgba(245,200,66,.3)}
/* ---- PASKI LIMITÓW ---- */
.limit-bar{display:flex;align-items:center;gap:10px;font-size:.78rem}
.limit-label{width:56px;font-weight:500;color:var(--muted);flex-shrink:0}
.limit-track{flex:1;height:6px;background:rgba(26,16,16,.08);border-radius:99px;overflow:hidden}
.limit-fill{height:100%;border-radius:99px;background:var(--gold);transition:width .4s ease,background .3s}
.limit-count{width:100px;text-align:right;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}

/* ---- KOMUNIKAT EMAIL W GENEROWANIU ---- */
.gen-email-notice{margin-top:16px;padding:12px 16px;background:rgba(245,200,66,.12);border:1px solid rgba(245,200,66,.35);border-radius:12px;font-size:.82rem;line-height:1.6;color:var(--ink);text-align:center;animation:slideIn .4s ease}

/* ---- EMAIL GATE ---- */
.email-gate-icon{text-align:center;font-size:3rem;margin-bottom:16px}
.email-gate-field{display:flex;flex-direction:column;gap:8px}
.email-gate-input{width:100%;padding:14px 18px;font-size:1rem;font-family:'DM Sans',sans-serif;border:2px solid var(--border);border-radius:14px;background:#fff;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.email-gate-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,200,66,.18)}
.email-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;padding:20px}
.email-modal-box{position:relative;background:#fff;border-radius:20px;padding:36px 32px;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.email-modal-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--muted)}
.btn-gold{background:var(--gold)!important;color:var(--ink)!important;font-weight:700}
/* ---- PRZYCISKI PŁCI ---- */
.gender-btns{display:flex;gap:12px;margin-top:4px;}
.gender-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 10px;border-radius:14px;border:2px solid transparent;
  font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:all .2s;background:#f8f8f8;color:#333;
}
.gender-btn-boy{background:#e8f4fd;border-color:#b3d9f7;color:#1a6080;}
.gender-btn-girl{background:#fde8f4;border-color:#f7b3d9;color:#80103a;}
.gender-btn.selected{transform:scale(1.04);box-shadow:0 4px 16px rgba(0,0,0,0.12);}
.gender-btn-boy.selected{background:#b3d9f7;border-color:#7ec8e3;color:#0d3d55;}
.gender-btn-girl.selected{background:#f7b3d9;border-color:#f06fa8;color:#5a0a26;}
.gender-hint{font-size:.76rem;color:var(--muted);margin-top:6px;}
/* Wyśrodkowanie wyboru czcionek */
#fontGrid{justify-content:center;}

/* Stopka fix */
body{display:flex;flex-direction:column;min-height:100vh;}
.site-footer{margin-top:auto;}
/* ---- FORMAT CARDS — claymorphism ---- */
.format-cards{display:flex;gap:20px;justify-content:center;margin-top:12px;}
.format-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:22px 20px 20px;
  border:3px solid transparent;
  border-radius:22px;
  cursor:pointer;
  background:linear-gradient(145deg,#f0f4fa,#e2e8f4);
  box-shadow:
    0 6px 0 0 #b0bcd4,
    0 10px 24px rgba(80,100,140,.15),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  flex:1;max-width:168px;
  text-align:center;
}
.format-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 9px 0 0 #b0bcd4,
    0 16px 32px rgba(80,100,140,.2),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.format-card:active{
  transform:translateY(2px);
  box-shadow:
    0 2px 0 0 #b0bcd4,
    0 4px 10px rgba(80,100,140,.1),
    inset 0 2px 5px rgba(0,0,0,.08);
}
.format-card.selected{
  transform:translateY(3px);
  background:linear-gradient(145deg,#fff8d6,#ffeea0);
  border-color:#e8a800;
  box-shadow:
    0 2px 0 0 #c8a000,
    0 4px 14px rgba(200,160,0,.2),
    inset 0 2px 5px rgba(0,0,0,.06),
    0 0 0 4px rgba(245,200,66,.35);
}
.format-screen-wrap{width:100%;height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.format-label{font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.2;}
.format-sublabel{font-size:.7rem;color:var(--muted);line-height:1.4;margin-top:4px;min-height:2.8em;display:flex;align-items:flex-start;justify-content:center;}
.format-ratio{font-size:.72rem;color:var(--muted);letter-spacing:.05em;margin-top:5px;}
.format-card.selected .format-label{color:#7a5500;}
.format-card.selected .format-sublabel{color:#9a7010;}
.format-card.selected .format-ratio{color:#b08020;}
.format-card.selected .format-landscape .format-screen-inner,
.format-card.selected .format-portrait .format-screen-inner{border-color:var(--gold);}
.format-card.selected .format-screen-stand,
.format-card.selected .format-landscape .format-screen-inner::after{background:var(--gold);}

/* odstęp między sekcją nastroju a formatem */
.format-section-gap{margin-top:52px;}

/* Ekran poziomy — monitor */
.format-screen{position:relative;display:flex;align-items:center;justify-content:center;}
.format-landscape{width:88px;height:54px;}
.format-landscape .format-screen-inner{
  width:88px;height:54px;border-radius:4px;
  border:3px solid #1a2a3a;background:linear-gradient(135deg,#1a2a3a,#0d1520);
  position:relative;
}
.format-landscape .format-screen-inner::after{
  content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  width:20px;height:8px;background:#1a2a3a;border-radius:0 0 3px 3px;
}
.format-screen-stand{
  position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  width:32px;height:3px;background:#1a2a3a;border-radius:2px;
}
/* Ekran pionowy — telefon */
.format-portrait{width:42px;height:74px;}
.format-portrait .format-screen-inner{
  width:42px;height:74px;border-radius:8px;
  border:3px solid #1a2a3a;background:linear-gradient(180deg,#1a2a3a,#0d1520);
  position:relative;
}
.format-screen-notch{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:10px;height:3px;background:rgba(255,255,255,0.3);border-radius:2px;
}
/* ============================================================
   NOWY UKŁAD KROKÓW — 5 steps
   ============================================================ */

/* --- STYLE-LIST: nastrój jedna kolumna, pełna szerokość --- */
.style-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 4px;
}

/* Nadpisujemy stary .style-chip który był flex row 2-kolumnowy */
.style-list .style-chip {
  width: 100%;
  border-radius: 18px;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 72px; /* kciuk-friendly */
}

.style-list .style-chip .chip-body {
  flex: 1;
  min-width: 0;
}

.style-list .style-chip .chip-name {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
}

.style-list .style-chip .chip-desc {
  font-size: .8rem;
  margin-top: 3px;
  line-height: 1.45;
}

.style-list .style-chip .emoji {
  font-size: 1.9rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}

/* Check mark — widoczny przy zaznaczeniu */
.chip-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: transparent;
  flex-shrink: 0;
  transition: background .18s, color .18s;
  border: 2px solid rgba(0,0,0,.12);
}

.style-list .style-chip.selected .chip-check {
  background: rgba(0,0,0,.25);
  color: #fff;
  border-color: transparent;
}
.style-list .style-chip[data-style="elegancki"].selected .chip-check {
  background: rgba(68,120,187,.5);
  color: #d0e8ff;
}

/* Kolory tła per nastrój — dziedziczą z istniejącego CSS, tylko override box-shadow dla list */
.style-list .style-chip[data-style="ciepły"]    { background:linear-gradient(145deg,#fffaee,#fff3c8); box-shadow:0 4px 0 0 #d8a838, 0 6px 16px rgba(120,90,40,.10), inset 0 1px 0 rgba(255,255,255,.8); }
.style-list .style-chip[data-style="zabawny"]   { background:linear-gradient(145deg,#fff4f8,#ffe8f2); box-shadow:0 4px 0 0 #e08aae, 0 6px 16px rgba(120,60,90,.10), inset 0 1px 0 rgba(255,255,255,.8); }
.style-list .style-chip[data-style="elegancki"] { background:linear-gradient(145deg,#eef2fb,#dde6f5); box-shadow:0 4px 0 0 #aab8d4, 0 6px 16px rgba(60,80,130,.10), inset 0 1px 0 rgba(255,255,255,.8); }
.style-list .style-chip[data-style="retro"]     { background:linear-gradient(145deg,#faf5ef,#f0e6d6); box-shadow:0 4px 0 0 #c8ad88, 0 6px 16px rgba(120,90,60,.10), inset 0 1px 0 rgba(255,255,255,.8); }

.style-list .style-chip[data-style="ciepły"]:hover    { transform:translateY(-3px); box-shadow:0 7px 0 0 #d8a838, 0 12px 24px rgba(120,90,40,.14), inset 0 1px 0 rgba(255,255,255,.8); }
.style-list .style-chip[data-style="zabawny"]:hover   { transform:translateY(-3px); box-shadow:0 7px 0 0 #e08aae, 0 12px 24px rgba(120,60,90,.14), inset 0 1px 0 rgba(255,255,255,.8); }
.style-list .style-chip[data-style="elegancki"]:hover { transform:translateY(-3px); box-shadow:0 7px 0 0 #aab8d4, 0 12px 24px rgba(60,80,130,.16), inset 0 1px 0 rgba(255,255,255,.8); }
.style-list .style-chip[data-style="retro"]:hover     { transform:translateY(-3px); box-shadow:0 7px 0 0 #c8ad88, 0 12px 24px rgba(120,90,60,.14), inset 0 1px 0 rgba(255,255,255,.8); }

.style-list .style-chip.selected { transform:translateY(2px) !important; }
.style-list .style-chip[data-style="ciepły"].selected    { border:3px solid #d8a838; box-shadow:0 1px 0 0 #d8a838, 0 3px 8px rgba(120,90,40,.12), inset 0 2px 5px rgba(0,0,0,.05), 0 0 0 4px rgba(216,168,56,.22); }
.style-list .style-chip[data-style="zabawny"].selected   { border:3px solid #e07aa6; box-shadow:0 1px 0 0 #e08aae, 0 3px 8px rgba(120,60,90,.12), inset 0 2px 5px rgba(0,0,0,.05), 0 0 0 4px rgba(224,122,166,.22); }
.style-list .style-chip[data-style="elegancki"].selected { border:3px solid #8da3cc; box-shadow:0 1px 0 0 #aab8d4, 0 3px 8px rgba(60,80,130,.14), inset 0 2px 5px rgba(0,0,0,.06), 0 0 0 4px rgba(141,163,204,.28); }
.style-list .style-chip[data-style="retro"].selected     { border:3px solid #c8ad88; box-shadow:0 1px 0 0 #c8ad88, 0 3px 8px rgba(120,90,60,.12), inset 0 2px 5px rgba(0,0,0,.05), 0 0 0 4px rgba(200,173,136,.22); }

/* Tekst dla elegancki — ciemny, bo karta jest teraz jasna */
.style-list .style-chip[data-style="elegancki"] .chip-name { color:#2a3a5c; }
.style-list .style-chip[data-style="elegancki"] .chip-desc { color:rgba(42,58,92,.6); }

/* --- FORMAT — osobna karta, duże kafelki --- */
.format-cards-big {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 16px;
}

.format-card-big {
  flex: 1;
  max-width: 260px;
  padding: 32px 20px 28px;
  border-radius: 24px;
  min-height: 240px;
}

/* Większy wrapper ikon */
.format-card-big .format-screen-wrap,
.format-card-big .format-icon-wrap {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

/* Skalujemy ikony w big-cards */
.format-card-big .format-landscape {
  width: 118px;
  height: 72px;
  transform-origin: center center;
}
.format-card-big .format-landscape .format-screen-inner {
  width: 118px;
  height: 72px;
  border-radius: 5px;
}
.format-card-big .format-portrait {
  width: 56px;
  height: 98px;
}
.format-card-big .format-portrait .format-screen-inner {
  width: 56px;
  height: 98px;
  border-radius: 10px;
}
.format-card-big .format-screen-notch {
  width: 14px;
  height: 4px;
  top: 8px;
}

.format-card-big .format-label {
  font-size: 1.05rem;
  font-weight: 700;
}
.format-card-big .format-sublabel {
  font-size: .78rem;
  line-height: 1.5;
  min-height: auto;
  margin-top: 2px;
}
.format-card-big .format-ratio {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  margin-top: 8px;
  color: var(--muted);
}
.format-card-big.selected .format-ratio { color: #b08020; }

@media(max-width: 500px) {
  .format-cards-big {
    flex-direction: column;
    align-items: center;
  }
  .format-card-big {
    max-width: 100%;
    width: 100%;
    min-height: auto;
    padding: 24px 20px 20px;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    text-align: left;
  }
  .format-card-big .format-icon-wrap {
    width: auto;
    height: auto;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .format-card-big .format-landscape {
    width: 70px;
    height: 43px;
  }
  .format-card-big .format-landscape .format-screen-inner {
    width: 70px;
    height: 43px;
  }
  .format-card-big .format-portrait {
    width: 38px;
    height: 66px;
  }
  .format-card-big .format-portrait .format-screen-inner {
    width: 38px;
    height: 66px;
  }
}

/* btn3next dla nowego kroku 3 (format) */
#btn3next { }

/* Okazja w karcie szczegółów — bez górnego marginesu na grid */
#card-1 .occasion-grid { margin-top: 8px; }

/* Pola szczegółów — animowane wejście */
#detailsFields, #closingGroup {
  animation: slideIn .28s ease;
}
/* Nakładka "Od nowa" po zakończeniu filmu (bez pętli) */
.canvas-wrap{position:relative}
.end-replay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.end-replay-btn{pointer-events:auto;background:rgba(26,16,16,.78);color:#fff;border:2px solid rgba(255,255,255,.85);border-radius:999px;padding:15px 30px;font-size:1.02rem;font-weight:700;font-family:'DM Sans',sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .15s,background .15s}
.end-replay-btn:hover{transform:scale(1.05);background:rgba(26,16,16,.92)}

/* ---- HAMBURGER BUTTON — domyślnie ukryty na desktop ---- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background .15s;
}
.nav-hamburger:hover { background: rgba(255,255,255,.08); }
.nav-hamburger span {
  display: block;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- MOBILE NAV DROPDOWN — domyślnie ukryty ---- */
.mobile-nav-dropdown {
  display: none;
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 1999;
  background: var(--ink);
  border-bottom: 1px solid rgba(245,200,66,.18);
  padding: 8px 0 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
}
.mobile-nav-dropdown.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-item {
  display: block;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  padding: 12px 20px;
  transition: background .15s, color .15s;
}
.mobile-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.mobile-nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 6px 16px; }
.mobile-nav-login { color: var(--gold); font-weight: 600; }

/* ---- BOTTOM APP BAR — domyślnie ukryta na desktop ---- */
.mobile-app-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1999;
  background: rgba(253,248,240,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
  align-items: center;
}

/* ================================================================
   MOBILE-FIRST — aplikacyjny feel na smartfonach
   Wszystkie reguły poniżej działają wyłącznie na max-width:767px
   ================================================================ */

/* --- Globalny reset mobile --- */
@media (max-width: 767px) {

  /* Bezpieczne strefy (notch / Dynamic Island / home bar) */
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* zapobiega "bounce" i przypadkowemu zoomowi */
    overscroll-behavior-y: none;
  }

  /* ---- TOPBAR — tylko ikonka + krótki tekst ---- */
  .site-topbar {
    font-size: 10px;
    padding: 6px 12px;
    gap: 8px;
    letter-spacing: .04em;
  }
  .topbar-sep { display: none; }
  .site-topbar span { display: none; }

  /* ---- NAVBAR ---- */
  .site-nav {
    top: 0;
    padding: 0 16px;
    height: 52px;
  }
  .nav-logo {
    font-size: 1rem;
  }
  /* Ukryj linki i przycisk logowania — zastąpione hamburgerem */
  .nav-links {
    display: none;
  }
  /* Pokaż hamburger */
  .nav-hamburger {
    display: flex;
  }
  /* Pokaż dropdown */
  .mobile-nav-dropdown {
    display: block;
  }

  /* ---- HEADER ---- */
  header {
    padding: 60px 16px 0;
    text-align: center;
    margin-bottom: 0;
  }
  .logo-badge {
    font-size: 9px;
    padding: 5px 14px;
    margin-bottom: 8px;
    letter-spacing: .1em;
  }
  h1 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.1;
  }

  /* ---- PASEK KROKÓW — kompaktowy ---- */
  .steps-bar {
    margin: 16px auto 20px;
    padding: 0 8px;
    max-width: 100%;
    gap: 0;
  }
  .step-num {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .step-label {
    font-size: 9px;
    margin-top: 5px;
    letter-spacing: .03em;
  }
  .step:not(:last-child)::after {
    top: 14px;
    left: 60%;
    right: -5%;
  }

  /* ---- MAIN CONTAINER ---- */
  main {
    margin: 8px auto 90px; /* 90px dolny margines na bottom nav */
    padding: 0 12px;
    max-width: 100%;
  }

  /* ---- BRAND BADGE WRAP ---- */
  .brand-badge-wrap {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
  }
  .brand-badge {
    font-size: .68rem;
    padding: 6px 13px;
    letter-spacing: .09em;
  }

  /* ---- CARD — jak "ekran aplikacji" ---- */
  .card {
    border-radius: 24px;
    padding: 24px 18px 22px;
    box-shadow:
      0 4px 32px rgba(26,16,16,.10),
      0 1px 0 rgba(255,255,255,.8) inset;
    border: 1px solid var(--border);
  }

  .card-title {
    font-size: 1.45rem;
    margin-bottom: 6px;
  }
  .card-desc {
    font-size: .86rem;
    margin-bottom: 10px;
    color: var(--muted);
  }

  /* ---- PRZYCISKI — thumb-friendly ---- */
  .btn {
    padding: 14px 22px;
    font-size: .9rem;
    min-height: 50px;
    border-radius: 14px;
    font-weight: 600;
  }
  .btn-row {
    margin-top: 20px;
    gap: 10px;
  }
  /* "Dalej" rozciąga się, "Wróć" ma auto-width */
  .btn-row .btn-primary {
    flex: 1;
  }
  .btn-row .btn-secondary {
    flex: 0 0 auto;
    padding: 14px 18px;
  }

  /* Jedyny przycisk w rzędzie — pełna szerokość */
  .btn-row:has(.btn:only-child) .btn {
    width: 100%;
  }

  /* Przycisk Dalej wyłączony — widoczny ale szary */
  .btn-primary:disabled {
    opacity: 0.38;
    background: var(--ink);
    color: var(--gold);
  }

  /* ---- OKAZJE — 3 kolumny × 2 rzędy = wszystkie 6 kafelków widoczne od razu ---- */
.occasion-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    margin-top: 12px;
  }
.occasion-card {
    --subrow: 2.1rem;
    padding: 14px 6px;
    border-radius: 18px;
    gap: 8px;
    aspect-ratio: unset;
    min-height: 0;
  }
  .occasion-emoji {
    font-size: 2.2rem;
    line-height: 1;
  }
.occasion-name {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
  }
  .occasion-subtitle {
    font-size: .62rem;
    line-height: 1.15;
  }

  /* ---- UPLOAD ZONE ---- */
  .upload-zone {
    padding: 32px 16px;
    border-radius: 14px;
  }
  .upload-icon {
    font-size: 2.4rem;
    margin-bottom: 8px;
  }
  .upload-zone h3 {
    font-size: 1rem;
  }
  .upload-zone p {
    font-size: .78rem;
  }

  /* ---- PHOTO GRID — 4 kolumny na mobile ---- */
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 14px;
  }
  /* Przycisk usuwania zawsze widoczny (brak hover na mobile) */
  .remove-btn {
    opacity: 1;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  /* ---- DRAG HINT ---- */
  .drag-hint {
    font-size: .78rem;
    padding: 6px 10px;
  }

  /* ---- FORM FIELDS ---- */
  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  input[type=text],
  input[type=number],
  textarea,
  select {
    font-size: 16px; /* zapobiega auto-zoom iOS */
    padding: 12px 14px;
    border-radius: 12px;
  }
  label {
    font-size: .88rem;
  }
  .form-group {
    margin-bottom: 20px;
  }

  /* ---- STYL (nastrój) — kompaktniejsze karty ---- */
  .style-list {
    gap: 12px;
  }
  .style-list .style-chip {
    padding: 16px 16px;
    border-radius: 16px;
    min-height: 64px;
    gap: 12px;
  }
  .style-list .style-chip .emoji {
    font-size: 1.6rem;
  }
  .style-list .style-chip .chip-name {
    font-size: .88rem;
  }
  .style-list .style-chip .chip-desc {
    font-size: .74rem;
  }

  /* ---- FORMAT — równe kafelki obok siebie ---- */
  .format-cards-big {
    flex-direction: row;
    gap: 8px;
    margin-top: 12px;
    align-items: stretch;
  }
  .format-card-big {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 10px 14px;
    border-radius: 18px;
    min-height: 200px;
    height: auto;
    gap: 0;
    justify-content: flex-start;
  }
  .format-card-big .format-icon-wrap {
    width: 100%;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .format-card-big .format-landscape {
    width: 72px;
    height: 44px;
  }
  .format-card-big .format-landscape .format-screen-inner {
    width: 72px;
    height: 44px;
    border-radius: 4px;
  }
  .format-card-big .format-portrait {
    width: 38px;
    height: 68px;
  }
  .format-card-big .format-portrait .format-screen-inner {
    width: 38px;
    height: 68px;
    border-radius: 8px;
  }
  .format-card-big .format-label {
    font-size: .88rem;
  }
  .format-card-big .format-sublabel {
    font-size: .7rem;
    line-height: 1.4;
  }
  .format-card-big .format-ratio {
    font-size: .75rem;
  }
  .format-card-big .format-screen-notch {
    width: 10px;
    height: 3px;
    top: 6px;
  }

  /* ---- EMAIL GATE ---- */
  .email-gate-icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
  }
  .email-gate-input {
    font-size: 16px; /* iOS no-zoom */
    padding: 14px 16px;
    border-radius: 14px;
  }

  /* ---- GENEROWANIE ---- */
  .gen-area {
    padding: 8px 0;
  }
  .gen-animation {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
  }
  .gen-ring {
    width: 72px;
    height: 72px;
  }
  .gen-ring-2 {
    width: 54px;
    height: 54px;
    inset: 9px;
  }
  .gen-center {
    font-size: 1.4rem;
  }
  .gen-title {
    font-size: 1.2rem;
  }
  .gen-status {
    font-size: .82rem;
  }

  /* ---- CANVAS / PLAYER ---- */
 .canvas-wrap {
    border-radius: 14px;
    margin-bottom: 14px;
    margin-top: 18px;
    max-width: 92%;
    margin-inline: auto;
    margin-top: 20px;
  }
 .canvas-portrait {
    max-width: 82%;
  }
  .ctrl-btn {
    padding: 10px 20px;
    font-size: .85rem;
    min-height: 40px;
  }

  /* ---- VIDEO INFO BADGES ---- */
  .video-info-row {
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .video-badge {
    font-size: .72rem;
    padding: 4px 10px;
  }

  /* ---- DIVIDER ---- */
  .divider {
    margin: 16px 0;
  }

  /* ---- DOWNLOAD ROW ---- */
  .download-row {
    flex-direction: column;
    gap: 10px;
  }
  .download-row .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ---- EDIT TOGGLE BTN ---- */
  #editToggleBtn {
    width: 100%;
    justify-content: center;
  }

  /* ---- ADD TEXT SLIDE BOX ---- */
  .add-text-slide-box {
    padding: 14px 14px;
    border-radius: 12px;
  }
  .add-text-slide-box > div[style*="display:flex"] {
    flex-direction: column;
    gap: 8px;
  }

  /* ---- CAPTION EDITOR ---- */
  .caption-editor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    font-size: .82rem;
  }
  .caption-hint {
    font-size: .7rem;
  }
  .caption-list {
    max-height: 260px;
    padding: 8px;
    gap: 4px;
  }
  .caption-row {
    padding: 10px 10px;
    border-radius: 10px;
  }
  .caption-thumb,
  .caption-thumb-text {
    width: 36px;
    height: 36px;
  }
  .caption-input {
    font-size: 15px;
    min-height: 32px;
  }

  /* ---- SCRIPT BOX (życzenia AI) ---- */
  .script-box {
    padding: 16px;
    border-radius: 12px;
  }
  .script-content {
    font-size: .82rem;
  }

  /* ---- DEMO NOTICE ---- */
  .demo-notice {
    font-size: .78rem;
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* ---- NOTIF TOAST ---- */
  .notif {
    bottom: calc(var(--safe-bottom) + 24px);
    font-size: .82rem;
    padding: 10px 18px;
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
  }

  /* ---- COOKIE BANNER — mobile drawer od dołu ---- */
  .cookie-banner {
    border-radius: 20px 20px 0 0;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(100%) !important;
    max-width: 100% !important;
    width: 100% !important;
    bottom: 0 !important;
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    transition: transform .4s cubic-bezier(.34,1.56,.64,1) !important;
  }
  .cookie-banner.visible {
    transform: translateY(0) !important;
  }
  .cookie-btns {
    flex-direction: column;
    gap: 8px;
  }
  .cookie-btn-accept,
  .cookie-btn-reject {
    padding: 13px 18px;
    font-size: .85rem;
    border-radius: 12px;
  }

  /* ---- FOOTER — kompaktowy na mobile ---- */
  .site-footer {
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    margin-top: 24px;
    font-size: .78rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  /* Pierwsza kolumna (opis firmy) na całą szerokość */
  .footer-col:first-child {
    grid-column: 1 / -1;
  }
  /* Skrócony opis firmy na mobile */
  .footer-col:first-child > p:first-of-type {
    display: none;
  }
  .footer-col h4 {
    font-size: .78rem;
    margin-bottom: 8px;
  }
  .footer-col a,
  .footer-col p {
    line-height: 1.7;
    font-size: .75rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-size: .7rem;
  }

  /* ---- GENDER BUTTONS ---- */
  .gender-btns {
    gap: 8px;
  }
  .gender-btn {
    padding: 12px 8px;
    font-size: .85rem;
    border-radius: 12px;
    min-height: 48px;
  }

  /* ---- LIMIT BARS ---- */
  .limit-bar {
    font-size: .74rem;
    gap: 8px;
  }
  .limit-count {
    width: 80px;
    font-size: .7rem;
  }

  /* ---- PHOTO COUNT ---- */
  .photo-count {
    font-size: .74rem;
  }

  /* ---- PROGRESS BAR ---- */
  .progress-bar {
    max-width: 100%;
  }

  /* ---- EMAIL NOTICE W GENEROWANIU ---- */
  .gen-email-notice {
    font-size: .78rem;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* ---- END REPLAY ---- */
  .end-replay-btn {
    padding: 12px 24px;
    font-size: .92rem;
  }

  /* ====== BOTTOM APP BAR (nawigacja jak w aplikacji) ======
     Stały pasek na dole ekranu, ukrywamy tylko na desktop      */
  .mobile-app-bar {
    display: flex;
  }
}

/* app-bar-btn i pozostałe globalne style */
.app-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  text-decoration: none;
  transition: color .15s;
}
.app-bar-btn:hover, .app-bar-btn.active {
  color: var(--ink);
}
.app-bar-btn .bar-icon {
  font-size: 1.3rem;
  line-height: 1;
}

/* ---- Bardzo małe ekrany (iPhone SE, Fold zamknięty) ---- */
@media (max-width: 370px) {
  h1 {
    font-size: 1.9rem;
  }
  .card {
    padding: 18px 14px 16px;
    border-radius: 16px;
  }
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .occasion-grid {
    gap: 6px;
  }
  .occasion-card {
    padding: 12px 4px 10px;
    border-radius: 14px;
  }
  .occasion-emoji {
    font-size: 1.7rem;
  }
  .style-list .style-chip {
    padding: 13px 13px;
  }
  .btn {
    padding: 12px 16px;
    font-size: .82rem;
  }
}

/* ---- Wymuś brak hover efektów na touch ---- */
@media (hover: none) and (pointer: coarse) {
  .occasion-card:hover {
    transform: none;
    box-shadow: none;
  }
  .style-chip:hover {
    transform: none !important;
  }
  .btn-primary:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(26,16,16,.2);
  }
  .btn-gold:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(245,200,66,.4);
  }
  .format-card:hover {
    transform: none;
    box-shadow:
      0 6px 0 0 #b0bcd4,
      0 10px 24px rgba(80,100,140,.15),
      inset 0 1px 0 rgba(255,255,255,.85);
  }
  .photo-thumb:hover {
    border-color: transparent;
  }
  /* Active states dla touch — szybkie, responsywne */
  .occasion-card:active {
    transform: scale(.97);
    transition: transform .1s;
  }
  .style-chip:active {
    transform: translateY(2px) !important;
    transition: transform .1s !important;
  }
  .btn:active {
    transform: scale(.97) !important;
    transition: transform .1s !important;
  }
}
/* ---- TRIMMER WIDEO ---- */
.photo-thumb-wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
.trim-toggle-btn{width:100%;background:rgba(245,200,66,0.12);border:1px solid rgba(245,200,66,0.3);border-top:none;border-radius:0 0 10px 10px;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;padding:4px 6px;cursor:pointer;transition:background .15s;text-align:center}
.trim-toggle-btn:hover{background:rgba(245,200,66,0.22)}
.trim-panel{background:rgba(26,16,16,0.06);border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px}
.trim-row{display:flex;align-items:center;gap:6px}
.trim-label{font-size:.68rem;font-weight:700;color:var(--muted);min-width:16px;letter-spacing:.04em;text-transform:uppercase}
.trim-range{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:var(--border);outline:none;cursor:pointer}
.trim-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.trim-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);cursor:pointer}
.trim-time{font-size:.68rem;font-weight:600;color:var(--ink);min-width:28px;text-align:right}

/* ---- PASEK POSTĘPU — transition płynny ---- */
.progress-fill{transition:width .6s ease-out}

/* ---- KROK 4: btn4next jako Generuj film ---- */
#btn4next.btn-generate{background:linear-gradient(135deg,var(--gold),#e8a800);color:var(--ink);font-weight:700}

/* ---- TRIM MODAL ---- */
.trim-modal{position:fixed;inset:0;z-index:3000;background:rgba(26,16,16,0.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s}
.trim-modal.open{opacity:1}
.trim-modal-box{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px 28px 24px;max-width:480px;width:100%;box-shadow:0 24px 80px rgba(26,16,16,.25);position:relative;animation:slideIn .3s ease}
.trim-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);line-height:1;padding:4px 8px;border-radius:8px;transition:background .15s}
.trim-modal-close:hover{background:rgba(0,0,0,.07)}
.trim-modal-title{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:16px;font-weight:700}
.trim-video{width:100%;border-radius:12px;background:#000;max-height:220px;object-fit:contain;display:block;margin-bottom:8px}
.trim-time-display{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);font-weight:600;margin-bottom:14px;padding:0 2px}
.trim-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.trim-modal-info{font-size:.76rem;color:var(--muted);text-align:center;margin-top:4px}
.trim-badge{position:absolute;bottom:4px;left:4px;background:rgba(245,200,66,.9);color:var(--ink);font-size:9px;font-weight:700;border-radius:4px;padding:1px 5px;pointer-events:none;letter-spacing:.03em}
@media(max-width:520px){.trim-modal-box{padding:20px 16px 18px;border-radius:16px}.trim-video{max-height:160px}}

/* ---- RENDER OVERLAY (serwer) ---- */
#renderOverlay{
  position:fixed;inset:0;z-index:4000;
  background:rgba(14,8,8,0.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:none;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .3s ease;
}
#renderOverlay.ro-open{opacity:1}
.ro-box{
  display:flex;flex-direction:column;align-items:center;
  gap:0;max-width:400px;width:100%;text-align:center;
}
/* Arc SVG */
.ro-arc-wrap{position:relative;width:140px;height:140px;margin-bottom:24px}
.ro-arc-svg{width:140px;height:140px;transform:rotate(-90deg)}
.ro-arc-bg{fill:none;stroke:rgba(245,200,66,0.12);stroke-width:8}
.ro-arc-fill{
  fill:none;stroke:var(--gold);stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:314;stroke-dashoffset:314;
  transition:stroke-dashoffset .8s ease;
}
.ro-arc-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;line-height:1;
  transition:all .4s ease;
  color:var(--gold);
}
.ro-arc-icon.ro-done-icon{
  font-size:2.8rem;
  animation:roCheckPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes roCheckPop{0%{transform:scale(0.4);opacity:0}100%{transform:scale(1);opacity:1}}
/* Procenty */
.ro-pct{
  font-family:'DM Sans',sans-serif;font-size:3rem;font-weight:800;
  color:#fff;letter-spacing:-.03em;line-height:1;margin-bottom:12px;
}
/* Wiadomość */
.ro-msg{
  font-size:.95rem;color:rgba(255,255,255,0.65);font-weight:400;
  min-height:1.4em;line-height:1.5;margin-bottom:20px;
  transition:opacity .2s;
}
/* Pasek */
.ro-bar-wrap{
  width:100%;height:4px;background:rgba(245,200,66,0.15);
  border-radius:2px;overflow:hidden;margin-bottom:20px;
}
.ro-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--gold),#ffdb4d);
  border-radius:2px;width:0%;transition:width .8s ease;
}
/* Info */
.ro-sub{
  font-size:.78rem;color:rgba(255,255,255,0.35);
  line-height:1.7;max-width:300px;
}
/* Done state */
.ro-done{
  display:none;flex-direction:column;align-items:center;
  gap:12px;margin-top:8px;animation:slideIn .4s ease;
}
.ro-download-btn{
  font-size:1.05rem;padding:14px 36px;
  box-shadow:0 0 30px rgba(245,200,66,0.4);
}
.ro-new-btn{color:rgba(255,255,255,0.55);border-color:rgba(255,255,255,0.15)}
.ro-new-btn:hover{color:#fff;border-color:rgba(255,255,255,0.35)}
/* Konfetti przy done */
#renderOverlay.ro-confetti::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(245,200,66,0.18) 0%,transparent 70%);
  pointer-events:none;animation:roGlow 1.5s ease forwards;
}
@keyframes roGlow{0%{opacity:0}50%{opacity:1}100%{opacity:.4}}
@media(max-width:480px){
  .ro-pct{font-size:2.4rem}
  .ro-arc-wrap{width:120px;height:120px}
  .ro-arc-svg{width:120px;height:120px}
  .ro-arc-icon{font-size:2rem}
}

/* ---- RENDER OVERLAY — stan Gotowe ---- */
.ro-arc-fill.ro-arc-done{
  stroke:#ffdb4d;
  filter:drop-shadow(0 0 8px rgba(255,219,77,0.6));
  transition:stroke .4s ease, stroke-dashoffset .6s ease, filter .4s ease;
}
.ro-pct.ro-pct-done{
  font-size:1.8rem;
  color:var(--gold);
  transition:font-size .3s ease, color .3s ease, opacity .2s;
}
.newsletter-optin{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:16px;
  padding:12px 14px;
  background:rgba(245,200,66,.08);
  border:1px solid rgba(245,200,66,.30);
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  transition:background .2s,border-color .2s;
}
.newsletter-optin:hover{
  background:rgba(245,200,66,.14);
  border-color:rgba(245,200,66,.5);
}
.newsletter-optin input[type="checkbox"]{
  width:20px;
  height:20px;
  margin-top:1px;
  flex-shrink:0;
  accent-color:#c8900a;
  cursor:pointer;
}
.newsletter-optin-text{
  font-size:.82rem;
  line-height:1.55;
  color:var(--ink);
}

/* ====== PRZYCISK UDOSTĘPNIJ (overlay "Gotowe") ====== */
.ro-share-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;
  padding:12px 28px;border-radius:99px;cursor:pointer;
  color:var(--gold);
  background:rgba(245,200,66,0.10);
  border:1.5px solid rgba(245,200,66,0.45);
  transition:background .2s,border-color .2s,transform .2s;
}
.ro-share-btn:hover{
  background:rgba(245,200,66,0.18);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.ro-share-btn:disabled{opacity:.6;cursor:default;transform:none}

/* ====== PANEL UDOSTĘPNIANIA (fallback desktop) ====== */
#shareSheet{
  position:fixed;inset:0;z-index:5000;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .25s ease;
}
@media(min-width:600px){ #shareSheet{align-items:center} }
#shareSheet.ss-open{opacity:1}
.ss-backdrop{
  position:absolute;inset:0;
  background:rgba(14,8,8,0.75);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ss-box{
  position:relative;z-index:1;
  width:100%;max-width:400px;
  background:#fff;
  border-radius:24px 24px 0 0;
  padding:24px 20px 20px;
  box-shadow:0 -10px 50px rgba(0,0,0,0.4);
  transform:translateY(40px);transition:transform .3s cubic-bezier(.34,1.3,.64,1);
}
@media(min-width:600px){ .ss-box{border-radius:24px;transform:scale(.94)} }
#shareSheet.ss-open .ss-box{transform:translateY(0)}
@media(min-width:600px){ #shareSheet.ss-open .ss-box{transform:scale(1)} }
.ss-title{
  font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;
  color:var(--ink);text-align:center;margin-bottom:6px;
}
.ss-hint{
  font-size:.78rem;color:#8a7d72;text-align:center;line-height:1.5;
  margin:0 auto 18px;max-width:320px;
}
.ss-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;
}
.ss-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 4px;border-radius:14px;cursor:pointer;
  background:#f6f2ec;border:none;text-decoration:none;
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;color:var(--ink);
  transition:background .15s,transform .15s;
}
.ss-item:hover{background:#efe7dc;transform:translateY(-2px)}
.ss-ic{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.05rem;font-weight:700;line-height:1;
}
.ss-download{
  width:100%;font-size:.98rem;padding:13px;margin-bottom:8px;
}
.ss-close{
  width:100%;background:none;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;color:#8a7d72;
  padding:8px;border-radius:12px;transition:background .15s;
}
.ss-close:hover{background:#f6f2ec}

/* Stan "Skopiowano" przycisku udostępniania */
.ro-share-btn.ro-share-copied{
  background:rgba(245,200,66,0.22);
  border-color:var(--gold);
  color:var(--gold);
}
/* ===== GRUPA DIAG = SEKCJA (zwijalna) ===== */
.caption-diag-section{align-items:center}
.caption-collage-wrap{width:auto;height:44px}
.caption-collage{border-radius:6px;display:block;box-shadow:0 1px 4px rgba(26,16,16,.25)}
.caption-sec-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;padding-top:1px}
.caption-sec-title{font-family:'DM Sans',sans-serif;font-size:.86rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.caption-sec-sub{font-size:.7rem;font-weight:600;color:var(--muted)}
.caption-sec-toggle{flex-shrink:0;width:30px;height:30px;border:none;background:rgba(245,200,66,.18);border-radius:8px;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.caption-sec-toggle:hover{background:rgba(245,200,66,.4)}
.caption-sec-toggle .chev{display:block;line-height:1;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.caption-diag-section.open .caption-sec-toggle .chev{transform:rotate(180deg)}
.caption-diag-section.open{border-bottom-left-radius:0;border-bottom-right-radius:0}
.caption-subrow{display:flex;align-items:flex-start;gap:10px;padding:8px 12px 8px 24px;position:relative;background:rgba(245,200,66,.035);border-left:1.5px solid rgba(245,200,66,.45);border-right:1.5px solid rgba(245,200,66,.45);animation:subRise .2s ease}
.caption-subrow.last{border-bottom:1.5px solid rgba(245,200,66,.45);border-bottom-left-radius:12px;border-bottom-right-radius:12px;padding-bottom:11px}
.caption-subrow.active-slide{background:rgba(245,200,66,.13)}
.caption-sub-rail{position:absolute;left:12px;top:0;bottom:0;width:2px;background:rgba(245,200,66,.5)}
.caption-subrow.last .caption-sub-rail{bottom:50%}
@keyframes subRise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}