*{box-sizing:border-box}:root{--accent:#e89580}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f5f5;color:#111}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 24px;background:#fff;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:10}.brand{display:flex;gap:14px;align-items:center}.brand-mark{width:44px;height:44px;border-radius:14px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px}.topbar h1{margin:0;font-size:26px}.topbar p{margin:4px 0 0;color:#666}.header-actions{display:flex;gap:10px;flex-wrap:wrap}.panel{max-width:1180px;margin:24px auto;padding:0 18px}.hidden{display:none!important}.grid{display:grid;gap:18px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:#fff;border:1px solid #ddd;border-radius:16px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}label{display:block;font-weight:700;margin:12px 0 6px}input,textarea{width:100%;padding:12px;border:1px solid #bbb;border-radius:10px;margin-top:6px;font-size:16px;background:#fff;font-family:inherit}.hint{color:#666;line-height:1.45}.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;line-height:1.45}.check input{width:auto;margin-top:3px}button,.link-button{background:var(--accent);color:#fff;border:0;border-radius:999px;padding:13px 18px;font-weight:800;cursor:pointer;margin:8px 8px 8px 0;font-size:15px;text-decoration:none;display:inline-block}.secondary{background:#111}.danger{background:#777}.import-label{border:1px dashed #bbb;border-radius:12px;padding:12px;background:#fafafa}.preview-wrap{margin-top:24px;background:#fff;border:1px solid #ddd;border-radius:16px;padding:18px;overflow:auto}canvas{max-width:100%;height:auto;border:1px solid #ddd;background:#fff;border-radius:10px}.upload-card h4{margin:0 0 10px}.cropbox{position:relative;width:100%;aspect-ratio:4/5;border:2px dashed #bbb;border-radius:14px;overflow:hidden;background:#fafafa;display:flex;align-items:center;justify-content:center;color:#777;text-align:center;min-height:260px;touch-action:none}.cropbox img{position:absolute;max-width:none;user-select:none;transform-origin:center}.controls{display:grid;gap:10px;margin-top:12px}.controls label{font-size:13px;margin:0}.controls input[type=range]{width:100%;accent-color:var(--accent)}.sticky-actions{margin:18px 0;background:#fff;border:1px solid #ddd;border-radius:16px;padding:12px;position:sticky;bottom:10px;z-index:3;box-shadow:0 6px 18px rgba(0,0,0,.08)}.mobile-step{display:none;font-weight:900;color:var(--accent);margin:20px 0 8px}.participant-hero{text-align:center;background:#fff;border:1px solid #ddd;border-radius:16px;padding:22px;margin-bottom:16px}.instructions-card summary{font-weight:900;cursor:pointer;font-size:18px}.instructions-text{white-space:pre-line;line-height:1.5;font-size:15px;margin-top:14px}code{background:#eee;padding:2px 5px;border-radius:5px}@media(max-width:800px){.two,.three{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.header-actions{width:100%}.panel{padding:0 12px}.card{padding:16px}.mobile-step{display:block}button,.link-button{width:100%;text-align:center;margin:6px 0}.cropbox{min-height:320px}}
/* v8: canvas exports at 2x resolution for sharper downloaded images while displaying responsively. */

.adjust-btn,.done-adjust{
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:11px 14px;
  font-weight:800;
  cursor:pointer;
  margin-top:10px;
  width:100%;
}
.done-adjust{background:#111;}
.controls.hidden{display:none!important;}

.save-help{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:18px;
  padding:18px;
  margin:18px 0;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  text-align:center;
}
.save-help h3{margin:0 0 8px;font-size:22px}
.save-help img{
  max-width:100%;
  height:auto;
  border:1px solid #ddd;
  border-radius:12px;
  margin:12px auto;
  display:block;
}
.save-buttons{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.save-note{font-size:14px;line-height:1.45;color:#555;text-align:left;background:#f8f8f8;border-radius:12px;padding:12px;margin-top:12px}
@media(max-width:800px){.save-buttons{grid-template-columns:1fr}}


/* Hide Templavo top header for participant experience */
body.participant-mode .topbar{
  display:none !important;
}

body.participant-mode{
  padding-top:0 !important;
}
#templateSelect{display:block;width:100%;max-width:420px;margin:8px 0 22px;padding:12px;border:1px solid #bbb;border-radius:10px;background:#fff;font-size:16px}
#shareableLink{overflow-wrap:anywhere;line-height:1.5}
.participant-hero.duo-hero{
  background:#f8fcef url("assets/motiv8duo-header-bg.png") center / cover no-repeat;
  border-color:#cfe6bd;
  padding:38px 24px 30px;
}
.hero-logo{display:block;width:min(100%,520px);height:auto;margin:0 auto 16px}
.duo-hero h2{margin:0;font-size:clamp(21px,3vw,30px);line-height:1.2}
@media(max-width:600px){
  .participant-hero.duo-hero{padding:30px 16px 24px}
  .hero-logo{width:min(100%,320px);margin-bottom:14px}
}

.save-subtitle{
  font-size:16px;
  line-height:1.5;
  color:#444;
  margin-top:10px;
}

.save-help{
  border:1px solid #e5c0b5 !important;
  background:#fffdfc !important;
}

.save-buttons button{
  font-size:17px;
}

.save-note{
  font-size:15px !important;
  line-height:1.6 !important;
  background:#f7f7f7 !important;
}


/* v18 stable: keep Step 3 save buttons in DOM for JavaScript, but hide them visually */
.hidden-step-save{
  display:none !important;
}

.hidden-canvas{
  position:absolute !important;
  left:-99999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.pollunit-cta{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:18px;
  padding:22px;
  margin:18px 0 30px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.pollunit-cta h3{
  margin:0 0 8px;
  font-size:24px;
}

.pollunit-cta p{
  color:#444;
  line-height:1.5;
  font-size:16px;
}

.pollunit-button{
  display:inline-block;
  width:100%;
  max-width:420px;
  background:var(--accent);
  color:#fff;
  font-weight:900;
  font-size:18px;
  text-decoration:none;
  border-radius:999px;
  padding:16px 20px;
  margin:10px auto;
}

.pollunit-note{
  background:#f7f7f7;
  border-radius:12px;
  padding:12px;
  font-size:14px !important;
  text-align:left;
}