/* Supermart — editorial SaaS dizajn. Fraunces display + Manrope body. */
@font-face{font-family:'Fraunces';src:url(/assets/fonts/Fraunces.ttf) format('truetype');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Manrope';src:url(/assets/fonts/Manrope.ttf) format('truetype');font-weight:200 800;font-display:swap;}

:root{
  --paper:#f7f4ee; --paper2:#fffdf9; --ink:#14201b; --ink2:#46514a;
  --green:#1f4a3d; --green-d:#163328; --gold:#c8892f; --gold-l:#e0a13c;
  --line:#e3ddd0; --line2:#d4ccbb; --ok:#2e7d57; --err:#b4452f;
  --shadow:0 1px 2px rgba(20,32,27,.04),0 12px 32px rgba(20,32,27,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.02em;line-height:1.05}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;border-bottom:1px solid var(--line);background:var(--paper2);position:sticky;top:0;z-index:20}
.topbar img{height:48px;display:block}
.topbar .right{display:flex;align-items:center;gap:18px;font-size:14px;color:var(--ink2)}
.pill{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--green);color:var(--paper);padding:6px 12px;border-radius:100px}

/* ---- layout ---- */
.shell{max-width:1240px;margin:0 auto;padding:36px 32px 80px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.h-xl{font-size:46px;margin:8px 0 6px}
.sub{color:var(--ink2);font-size:16px;max-width:620px}

/* ---- card / panel ---- */
.panel{background:var(--paper2);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:26px}
.grid{display:grid;gap:24px}
@media(min-width:980px){.cols{grid-template-columns:1.05fr .95fr}}

/* ---- forms ---- */
label{display:block;font-size:13px;font-weight:700;margin:0 0 7px;color:var(--ink)}
.field{display:flex;gap:10px}
input[type=text],input[type=url],input[type=email],input[type=password],select{
  width:100%;padding:13px 15px;border:1px solid var(--line2);border-radius:11px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);transition:border .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,74,61,.12)}
.btn{appearance:none;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:11px;background:var(--green);color:var(--paper);
  transition:transform .08s,background .15s;white-space:nowrap}
.btn:hover{background:var(--green-d)}.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{background:#fff;border-color:var(--green)}
.btn.gold{background:var(--gold)}.btn.gold:hover{background:#b1761f}

/* ---- steps ---- */
.steps{display:flex;gap:8px;margin:26px 0 18px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink2)}
.step .n{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--ink2);
  display:grid;place-items:center;font-size:12px}
.step.on .n{background:var(--green);color:#fff}.step.on{color:var(--ink)}
.step:not(:last-child):after{content:'';width:26px;height:1px;background:var(--line2);margin-left:4px}

/* ---- product grid ---- */
.prods-scroll{max-height:560px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--paper2) 0%,#fff 80%)}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:0}
.prods-scroll::-webkit-scrollbar{width:8px}
.prods-scroll::-webkit-scrollbar-track{background:transparent}
.prods-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.prods-scroll::-webkit-scrollbar-thumb:hover{background:var(--ink3)}
.prod{border:1px solid var(--line);border-radius:13px;padding:12px;cursor:pointer;background:#fff;
  transition:border .12s,box-shadow .12s;position:relative}
.prod:hover{border-color:var(--green)}
.prod.sel{border-color:var(--green);box-shadow:0 0 0 2px rgba(31,74,61,.18)}
.prod .pimg{width:100%;aspect-ratio:1;border-radius:8px;background:#f0ece2 center/contain no-repeat;margin-bottom:9px}
.prod .pn{font-size:13px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .pp{font-size:13px;color:var(--gold);font-weight:700;margin-top:4px}
.prod.sel:before{content:'✓';position:absolute;top:8px;right:8px;width:22px;height:22px;background:var(--green);
  color:#fff;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}

/* ---- preview ---- */
.preview-wrap{position:sticky;top:96px}
.canvas-box{background:repeating-conic-gradient(#efe9dd 0 25%,#f7f4ee 0 50%) 0/24px 24px;
  border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;place-items:center;min-height:300px}
.canvas-box img{max-width:100%;max-height:520px;border-radius:8px;box-shadow:0 18px 40px rgba(20,32,27,.18)}
.caption-box{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px}
.caption-box p{font-size:15px;white-space:pre-wrap}
.tags{margin-top:8px;color:var(--green);font-weight:600;font-size:14px}
.variant-row{display:flex;gap:8px;margin:12px 0}
.vbtn{flex:1;text-align:center;padding:10px;border:1px solid var(--line2);border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;background:#fff}
.vbtn.on{border-color:var(--green);background:var(--green);color:#fff}
.row{display:flex;gap:10px;margin-top:14px}
.muted{color:var(--ink2);font-size:13px}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:13px 22px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--shadow);opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ---- auth ---- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 80% at 80% 0,rgba(200,137,47,.10),transparent 50%),var(--paper)}
.auth .card{width:100%;max-width:420px}
.auth .logo{text-align:center;margin-bottom:26px}.auth .logo img{height:40px}
.auth h1{font-size:30px;text-align:center;margin-bottom:6px}
.auth .sub{text-align:center;margin:0 auto 22px}
.auth label{margin-top:14px}
.auth .btn{width:100%;margin-top:20px;justify-content:center;display:flex}
.auth .alt{text-align:center;margin-top:16px;font-size:14px;color:var(--ink2)}
.auth .alt a{color:var(--green);font-weight:700}
.err{background:#fbeae5;color:var(--err);border:1px solid #f1c9bd;padding:11px 14px;border-radius:10px;font-size:14px;margin-bottom:10px}

.brandbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.brandbar .sw{display:flex;align-items:center;gap:8px}
.brandbar input[type=color]{width:42px;height:42px;border:1px solid var(--line2);border-radius:10px;padding:2px;background:#fff;cursor:pointer}
.brandbar .mini{max-width:170px}

/* --- Kalendár pre drag plánovanie --- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.cal-head{font-size:11px;text-transform:uppercase;color:#888;text-align:center;padding:4px 0;font-weight:700;letter-spacing:.5px}
.cal-day{min-height:88px;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff;display:flex;flex-direction:column;gap:3px;font-size:12px;position:relative;transition:background .15s}
.cal-day.empty{background:transparent;border-color:transparent}
.cal-day.today{border-color:var(--green,#1a6b3c);box-shadow:inset 0 0 0 1px var(--green,#1a6b3c)}
.cal-day.dropzone{background:#f0f7f2;border-color:var(--green,#1a6b3c);border-style:dashed}
.cal-day .dnum{font-weight:700;color:#888;font-size:11px}
.cal-post{background:#1f4a3d;color:#fff;border-radius:5px;padding:3px 5px;font-size:10.5px;line-height:1.25;cursor:grab;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-post.fb{background:#1f4a3d}
.cal-post.ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.cal-post.failed{background:#b4452f}
.cal-post.draft{background:#9a6a14}

/* --- Dashboard kartičky --- */
.metric-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;flex:1;min-width:140px}
.metric-card .v{font-size:24px;font-weight:700;color:var(--green,#1a6b3c);line-height:1.1}
.metric-card .l{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.metric-row{display:flex;align-items:center;gap:14px;padding:10px;border-radius:8px;background:#faf7f0;margin-bottom:8px;font-size:13px}
.metric-row img{width:48px;height:48px;border-radius:6px;object-fit:cover}
.metric-row .caption{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metric-row .stats{display:flex;gap:14px;font-weight:600;color:#444}
.metric-row .stats span{display:flex;align-items:center;gap:4px}

/* ===== ONBOARDING WIZARD ===== */
.onboard-overlay{position:fixed;inset:0;background:rgba(20,32,27,.65);backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:onbFadeIn .3s ease-out}
@keyframes onbFadeIn{from{opacity:0}to{opacity:1}}
.onboard-modal{background:var(--paper2,#faf8f3);border-radius:20px;padding:32px;max-width:580px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);animation:onbSlideUp .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes onbSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.onboard-progress{height:4px;background:rgba(31,74,61,.1);border-radius:100px;margin-bottom:18px;overflow:hidden}
.onboard-progress-bar{height:100%;background:var(--gold,#c8892f);border-radius:100px;transition:width .4s ease-out}
.onboard-steps{display:flex;justify-content:space-between;margin-bottom:28px;position:relative}
.onboard-steps::before{content:'';position:absolute;top:14px;left:14px;right:14px;height:1px;background:rgba(31,74,61,.15);z-index:0}
.onboard-step{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid rgba(31,74,61,.2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink2);position:relative;z-index:1;transition:all .3s}
.onboard-step.active{background:var(--gold,#c8892f);border-color:var(--gold,#c8892f);color:#fff;transform:scale(1.1)}
.onboard-step.done{background:var(--green,#1f4a3d);border-color:var(--green,#1f4a3d);color:#fff}
.onboard-step.done::after{content:'✓';position:absolute}
.onboard-step.done > span{display:none}
.onboard-panel h3{font-size:20px;color:var(--ink)}
.onboard-features{display:flex;flex-direction:column;gap:10px}
.onboard-feat{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink2)}
.onboard-feat span{flex:1}
.onb-product{position:relative;border:2px solid rgba(31,74,61,.12);border-radius:10px;padding:8px;cursor:pointer;transition:all .2s;background:#fff}
.onb-product:hover{border-color:var(--gold,#c8892f)}
.onb-product.selected{border-color:var(--gold,#c8892f);box-shadow:0 0 0 3px rgba(200,137,47,.2)}
.onb-product img{width:100%;height:80px;object-fit:contain;border-radius:6px;background:#f0ece2;margin-bottom:6px}
.onb-product .name{font-size:11px;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.onb-product .price{font-size:11px;font-weight:700;color:var(--green);margin-top:2px}

@media (max-width: 640px){
  .onboard-modal{padding:22px;border-radius:14px}
  .onboard-panel h3{font-size:17px}
  #onbProductPick{grid-template-columns:repeat(2,1fr)!important}
}

/* ---- Payment method radio cards ---- */
.pm-option{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;margin-bottom:8px;background:#fff;transition:all .12s}
.pm-option:hover{border-color:var(--green)}
.pm-option:last-child{margin-bottom:0}
.pm-option input[type=radio]{margin:0;cursor:pointer;flex-shrink:0;width:auto}
.pm-option:has(input:checked){border-color:var(--green);box-shadow:0 0 0 2px rgba(31,74,61,.12)}
.pm-option.pm-only{cursor:default;background:var(--paper2)}
.pm-option.pm-only:hover{border-color:var(--line)}
.pm-info{flex:1}
.pm-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px}
.pm-desc{font-size:12px;color:var(--ink2);line-height:1.4}

/* ============ Content Calendar v2 ============ */
.cal-stats{display:flex;gap:14px;margin-bottom:12px;flex-wrap:wrap;font-size:12px}
.cal-stat{background:#faf8f3;border:1px solid var(--line);border-radius:8px;padding:8px 12px;flex:1;min-width:110px}
.cal-stat .v{font-size:18px;font-weight:700;color:var(--ink);display:block;line-height:1.1}
.cal-stat .l{color:var(--ink2);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.cal-stat.planned .v{color:#876b1c}
.cal-stat.published .v{color:#236b48}
.cal-stat.failed .v{color:#a03020}

.cal-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.cal-toolbar .nav{display:flex;align-items:center;gap:6px}
.cal-toolbar .nav strong{font-size:15px;text-transform:capitalize;min-width:160px;text-align:center;display:inline-block}
.cal-toolbar .filter{display:flex;gap:4px;margin-left:auto;background:#f0ece2;border-radius:8px;padding:2px}
.cal-toolbar .filter button{background:transparent;border:none;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--ink2);font-weight:500;transition:all .12s}
.cal-toolbar .filter button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06)}

.cal-day{min-height:110px;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff;display:flex;flex-direction:column;gap:3px;font-size:12px;position:relative;transition:all .12s;cursor:pointer}
.cal-day:hover:not(.empty){border-color:#a8c0b3}
.cal-day .dnum-wrap{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.cal-day .add-day{visibility:hidden;background:#f0ece2;border:none;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;color:#888;padding:0;display:flex;align-items:center;justify-content:center}
.cal-day:hover .add-day{visibility:visible}
.cal-day .add-day:hover{background:var(--green);color:#fff}
.cal-day.weekend{background:#fbf9f4}
.cal-day.past{opacity:.65}
.cal-day .more-link{font-size:10px;color:var(--green);font-weight:600;cursor:pointer;margin-top:2px}

.cal-post{position:relative;padding:3px 5px;padding-right:18px}
.cal-post .ptime{font-size:9px;opacity:.85;font-weight:600;display:inline-block;margin-right:3px}
.cal-post .pstat{position:absolute;right:3px;top:50%;transform:translateY(-50%);font-size:9px}
.cal-post.planned{background:#876b1c}
.cal-post.published{opacity:.7}

/* Day detail modal */
.day-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;overflow:auto;padding:30px 16px}
.day-modal.open{display:block}
.day-modal-inner{max-width:560px;margin:0 auto;background:#fff;border-radius:18px;padding:24px;position:relative}
.day-modal h3{margin:0 0 4px;font-family:'Fraunces',serif;font-size:22px}
.day-modal .day-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-height:60vh;overflow:auto}
.day-modal .day-post{display:flex;align-items:center;gap:12px;padding:10px;background:#faf8f3;border-radius:10px;border:1px solid var(--line)}
.day-modal .day-post img{width:54px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0}
.day-modal .day-post .info{flex:1;min-width:0}
.day-modal .day-post .info .h{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.day-modal .day-post .info .m{font-size:11px;color:var(--ink2);display:flex;gap:8px;align-items:center}
.day-modal .day-post .actions{display:flex;gap:4px}
.day-modal .day-post .actions button{background:transparent;border:1px solid #d8d2c2;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:11px}
.day-modal .day-post .actions button:hover{background:#f0ece2}

.platform-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.platform-badge.fb{background:#e3edf5;color:#1d5085}
.platform-badge.ig{background:linear-gradient(135deg,#fce4e6,#fde6d4);color:#9d2856}
.status-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.status-badge.planned{background:#fdf2cc;color:#876b1c}
.status-badge.published{background:#d4ebd9;color:#236b48}
.status-badge.failed{background:#fbe8e4;color:#a03020}
.status-badge.publishing{background:#d4e3ed;color:#1d5085}

/* ============ Image Library ============ */
.lib-filter-btn{transition:all .12s}
.lib-filter-btn:hover:not(.on){background:rgba(255,255,255,.5)}

.lib-card{position:relative;border-radius:10px;overflow:hidden;background:#faf8f3;border:1px solid var(--line);cursor:pointer;aspect-ratio:1;transition:all .12s;display:flex;flex-direction:column}
.lib-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.lib-card img{width:100%;height:100%;object-fit:cover;display:block;flex:1;min-height:0}
.lib-card .lib-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 40%,transparent 60%,rgba(0,0,0,.4) 100%);opacity:0;transition:opacity .15s;display:flex;flex-direction:column;justify-content:space-between;padding:8px}
.lib-card:hover .lib-overlay{opacity:1}
.lib-card .lib-badges{display:flex;gap:4px;flex-wrap:wrap}
.lib-card .lib-badge{background:rgba(0,0,0,.6);color:#fff;font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.lib-card .lib-badge.ai{background:#1f4a3d}
.lib-card .lib-badge.upload{background:#876b1c}
.lib-card .lib-badge.url{background:#5a3a8c}
.lib-card .lib-badge.product{background:#236b48}
.lib-card .lib-actions{display:flex;gap:4px;justify-content:flex-end;align-items:flex-end;flex:1}
.lib-card .lib-actions button{background:rgba(255,255,255,.95);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .12s;color:#333}
.lib-card .lib-actions button:hover{background:#fff;transform:scale(1.1)}
.lib-card .lib-actions button.del:hover{background:#fbe8e4;color:#a03020}
.lib-card .lib-actions button.fav{font-size:14px}
.lib-card .lib-actions button.fav.on{background:#fdf2cc;color:#876b1c}
.lib-card .lib-actions button.reuse{background:var(--green);color:#fff}
.lib-card .lib-actions button.reuse:hover{background:#0f2c25}

.lib-card .lib-fav-star{position:absolute;top:6px;left:6px;background:rgba(255,255,255,.9);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#876b1c;z-index:1}

.lib-card .lib-used{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600}

/* ============ Product card — selection clarity ============ */
/* "Selected" pre individuálnu grafiku — zelený border (current) */
.prod{transition:border-color .15s, box-shadow .15s}

/* "In batch series" — žltý border, vizuálne odlišný od selected */
.prod.in-batch{border-color:#c89a2e;box-shadow:0 0 0 2px rgba(200,154,46,.18)}
.prod.in-batch.sel{box-shadow:0 0 0 2px rgba(200,154,46,.18), inset 0 0 0 2px var(--green)}
.prod.in-batch:before{content:'📦';position:absolute;top:8px;right:8px;width:22px;height:22px;background:#c89a2e;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;z-index:2}
.prod.in-batch.sel:before{content:'📦 ✓';width:auto;padding:0 6px;font-size:10px}

.pcheck-wrap:hover{background:#fff !important;border-color:#c89a2e !important;color:#1a1a1a !important}
.prod.in-batch .pcheck-wrap{background:#c89a2e !important;color:#fff !important;border-color:#c89a2e !important}

/* Hover hint cez celú kartu */
.prod:not(.sel):not(.in-batch):hover{border-color:#a8c0b3;cursor:pointer}

/* ============ Quick Start Checklist ============ */
.qs-step{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:9px;font-size:13px;transition:all .15s;cursor:pointer}
.qs-step:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.qs-step.done{background:rgba(200,154,46,.18);border-color:rgba(200,154,46,.5)}
.qs-step.done .qs-icon{background:#c89a2e;color:#fff}
.qs-step.done .qs-label{text-decoration:line-through;opacity:.7}
.qs-icon{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:#fff;transition:all .15s}
.qs-label{font-weight:600;color:#fff;flex:1}
.qs-action{font-size:11px;color:#e3c97a;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.qs-step.done .qs-action{display:none}

/* Type picker (e-shop vs creator) */
.qs-type-card{transition:all .15s}
.qs-type-card:hover{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.4) !important;transform:translateY(-1px)}
.qs-type-card.active{background:linear-gradient(135deg,rgba(200,154,46,.25),rgba(200,154,46,.15)) !important;border-color:#c89a2e !important}
.qs-type-card.active::after{content:'✓ 'attr(data-mode);position:absolute;top:8px;right:10px;font-size:10px;color:#e3c97a;font-weight:700;text-transform:uppercase}
.qs-type-card{position:relative}

/* Tutorial video container (pre buduce videa) */
.tutorial-video{width:100%;aspect-ratio:16/9;border-radius:10px;border:none;background:#000;margin-top:12px}

/* ============ Help tooltip ============ */
.help-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#e8e4d8;color:#666;font-size:11px;font-weight:700;cursor:help;margin-left:6px;vertical-align:middle;font-family:Arial;transition:all .12s;border:1px solid #d8d2c2}
.help-tip:hover{background:#1f4a3d;color:#fff;border-color:#1f4a3d}
.help-tip-popover{position:absolute;background:#1f4a3d;color:#fff;padding:10px 14px;border-radius:8px;font-size:12px;line-height:1.5;max-width:280px;z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.18);pointer-events:none;opacity:0;transition:opacity .15s}
.help-tip-popover.show{opacity:1}
.help-tip-popover:before{content:'';position:absolute;top:-5px;left:12px;width:10px;height:10px;background:#1f4a3d;transform:rotate(45deg)}


/* Badge new pulse */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ============================================================
   MOBILE RESPONSIVITY — pridané jún 2026 po launch feedback
   ============================================================ */

/* Globálne fixy aby nič nepretekalo */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ============ TABLET (max 980px) ============ */
@media (max-width: 980px) {
  .shell { padding: 24px 18px 60px; }
  .topbar { padding: 14px 18px; }
  .topbar img { height: 38px; }
  .topbar .right { gap: 12px; font-size: 13px; }
  .h-xl { font-size: 34px; }
}

/* ============ MOBILE (max 768px) ============ */
@media (max-width: 768px) {

  /* ---- Topbar burger menu ---- */
  .topbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar img { height: 34px; }

  .topbar-burger {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 6px;
    cursor: pointer;
    margin-left: auto;
  }
  .topbar-burger span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all .2s;
  }
  .topbar-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar-burger.open span:nth-child(2) { opacity: 0; }
  .topbar-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .topbar .right {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
    padding: 14px 4px 6px;
    border-top: 1px solid var(--line);
    margin-top: 10px;
  }
  .topbar .right.open { display: flex !important; }
  .topbar .right > * {
    width: 100%;
    text-align: left;
  }
  .topbar .right a,
  .topbar .right > span,
  .topbar .right .pill {
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .topbar .right a:last-child,
  .topbar .right > *:last-child { border-bottom: none; }

  /* Email v topbar musí wrapnúť pri dlhom emaile */
  .topbar-email {
    word-break: break-all;
    font-size: 13px;
  }

  /* Pill + kredity + plus button v jednom riadku */
  .topbar .right .pill {
    display: inline-block;
    margin-bottom: 0;
    width: auto;
    text-align: center;
  }
  .topbar .right span:has(+ #topupOpenBtn),
  .topbar .right #topupOpenBtn {
    display: inline-flex;
    border-bottom: none;
  }

  /* ---- Layout ---- */
  .shell {
    padding: 18px 14px 60px;
  }
  .h-xl { font-size: 28px; }
  .sub { font-size: 15px; }
  .panel { padding: 18px 16px; border-radius: 14px; }

  .grid { gap: 16px; }
  .cols { grid-template-columns: 1fr !important; }

  /* ---- Forms ---- */
  .field {
    flex-direction: column;
    gap: 8px;
  }
  .field input, .field select, .field button {
    width: 100%;
  }
  input[type=text], input[type=url], input[type=email],
  input[type=password], select, textarea {
    font-size: 16px;  /* Predchádza auto-zoomu na iOS */
    padding: 11px 12px;
  }
  .btn { padding: 11px 16px; font-size: 14px; }

  /* ---- Toolbar tlačidlá — wrap grid ---- */
  /* Hľadá ich primárne v pravom stĺpci v preview-wrap */
  .preview-wrap .btn,
  .panel .btn.ghost {
    margin-bottom: 6px;
  }

  /* ---- Project switcher ---- */
  .proj-switcher,
  .proj-switcher-inner {
    flex-wrap: wrap;
    gap: 8px;
  }
  .proj-current {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 6px;
  }
  .proj-label {
    font-size: 11px;
    margin: 0;
    white-space: nowrap;
  }
  .proj-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ---- Modal dialogs ---- */
  .modal-overlay, [id$="Modal"], .topup-modal {
    padding: 0;
  }
  .modal-overlay > div,
  #topupModal > div,
  [role="dialog"] {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh;
  }

  /* Onboarding wizard krokov ---- */
  #qsSteps { grid-template-columns: 1fr !important; }
  #qsTypePicker > div { grid-template-columns: 1fr !important; }

  /* Quick Start widget header layout */
  #quickStart > div:first-child { gap: 10px; }
  #quickStart h3 { font-size: 18px; }

  /* ---- Mode switcher ---- */
  #modeSwitcher {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  #modeSwitcher .mode-tab {
    padding: 10px 8px !important;
    font-size: 13px !important;
    text-align: center;
  }

  /* ---- Creator panel ---- */
  #creatorStyleGrid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ---- Products grid ---- */
  .prods {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Preview canvas ---- */
  .preview-wrap {
    position: static;  /* Vypneme sticky preview na mobile */
    margin: 0 -2px;
  }
  .canvas-box, #canvasBox {
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  .canvas-box img, #canvasBox img {
    max-width: 100% !important;
    width: auto !important;
    max-height: 60vh !important;
    height: auto !important;
    border-radius: 10px;
    display: block;
    margin: 0 auto !important;
    box-shadow: 0 8px 20px rgba(20,32,27,.12);  /* menší shadow aby nepresahoval */
  }

  /* Caption box (text pod obrázkom) — overflow + zalomenie dlhých slov */
  .caption-box {
    margin-top: 12px;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 14px;
  }
  .caption-box p {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .tags {
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 13px;
  }
  /* Textarea pre editáciu caption — musí byť scroll-friendly */
  #capText, textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    word-break: break-word;
  }

  /* ---- Variant row buttons ---- */
  .variant-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .vbtn {
    flex: 1;
    min-width: calc(50% - 4px);
    text-align: center;
    font-size: 12px;
    padding: 8px 6px;
  }

  /* ---- Cards/tables — overflow handling ---- */
  .card, .scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    font-size: 12px;
  }
  th, td {
    padding: 6px 8px !important;
  }

  /* ---- Topup modal — €1 card */
  #topupModal h2 { font-size: 19px; }
  #topupModal h3 { font-size: 16px; }
  #topupModal .topup-pack {
    padding: 16px !important;
  }
  /* Hero card content stack — €1 prebije na dva riadky */
  #topupModal .topup-pack > div {
    flex-direction: column;
    align-items: stretch !important;
    text-align: left;
  }
  #topupModal .topup-pack > div > div:last-child {
    text-align: left !important;
  }

  /* ---- Templates modal — kategórie + grid stack ---- */
  #templatesModal > div {
    padding: 18px 14px !important;
  }
  #templatesModal > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Kategórie horizontálne scroll pre mobile namiesto vertical column */
  #templatesCats {
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 6px;
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
    border-bottom: 1px solid #eee;
  }
  #templatesCats > * {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px !important;
  }
  #templatesGrid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Iné modaly s vnoreným grid ---- */
  #calendarModal > div,
  #statsModal > div,
  #badgesModal > div,
  #brandKitModal > div,
  #utmBuilderModal > div,
  #galleryModal > div,
  #reviewsModal > div,
  #videosModal > div,
  #aiManagerModal > div {
    padding: 18px 14px !important;
  }
  /* Akýkoľvek inline grid s 2+ stĺpcami → 1fr na mobile */
  #calendarModal div[style*="grid-template-columns"],
  #statsModal div[style*="grid-template-columns"],
  #brandKitModal div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Calendar v2 — narrow */
  .cal-stats { gap: 6px; }
  .cal-stat { min-width: 100%; }
  .cal-toolbar { gap: 6px; }

  /* Cookie banner */
  .cookie-banner {
    padding: 12px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ============ SMALL MOBILE (max 480px) ============ */
@media (max-width: 480px) {
  .shell { padding: 14px 10px 60px; }
  .panel { padding: 14px 12px; }
  .h-xl { font-size: 24px; }

  .prods { grid-template-columns: 1fr !important; }
  #creatorStyleGrid { grid-template-columns: 1fr !important; }

  .topbar img { height: 28px; }
  .topbar { padding: 10px 12px; }

  /* Onboarding step bar */
  .onboard-step { font-size: 11px; padding: 5px 8px; }
}

/* Pulse highlight pri výbere produktu — vizuálny signál kde pozrieť */
.pulse-hl {
  animation: pulseHl 1.2s ease-out;
}
@keyframes pulseHl {
  0%   { box-shadow: 0 0 0 0 rgba(31,74,61,.6), 0 0 0 0 rgba(200,154,46,.4); }
  50%  { box-shadow: 0 0 0 8px rgba(31,74,61,.18), 0 0 0 16px rgba(200,154,46,.08); }
  100% { box-shadow: 0 0 0 0 rgba(31,74,61,0), 0 0 0 0 rgba(200,154,46,0); }
}