/* Guided mode: simple three-step card maker */
.dcq{--ink:#101828;--mut:#667085;--line:#E4E7EC;--acc:#145C63;--acc2:#E6F1F3;position:fixed;inset:0;z-index:2147483640;display:flex;flex-direction:column;background:#F7F8FA;color:var(--ink);font:400 15px/1.4 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;height:100vh;height:100dvh}
.dcq[hidden]{display:none}
.dcq *{box-sizing:border-box}
:where(.dcq) button{font-family:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.dcq button:focus-visible,.dcq input:focus-visible,.dcq textarea:focus-visible{outline:3px solid #E8590C;outline-offset:2px}
.dcq-top{display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:#fff;min-height:58px}
.dcq-ib{width:42px;height:42px;border-radius:50%;border:0;background:#F2F4F7;display:grid;place-items:center}
.dcq-ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.dcq-ttl b{font:600 17px Inter,system-ui,sans-serif;letter-spacing:-.01em}.dcq-ttl span{font-size:12px;color:var(--mut)}
.dcq-ghost{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid #D0D5DD;background:#fff;font:600 13px Inter,system-ui,sans-serif;color:#344054}
.dcq-bar{height:3px;background:#E4E7EC}.dcq-bar i{display:block;height:100%;background:var(--acc);border-radius:0 3px 3px 0;transition:width .25s}
.dcq-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:10px 16px 0;gap:10px}
.dcq-prev{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;container-type:size}
.dcq-prev canvas{width:min(100cqw,calc(100cqh*.8));height:auto;aspect-ratio:4/5;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.12),0 14px 36px rgba(16,24,40,.2)}
.dcq-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(16,24,40,.25);display:grid;place-items:center;z-index:2}
.dcq-nav.l{left:0}.dcq-nav.r{right:0}
.dcq-name{display:flex;align-items:baseline;justify-content:center;gap:8px}.dcq-name b{font:600 16px Inter,system-ui,sans-serif}.dcq-name small{color:var(--mut);font-size:12.5px}
.dcq-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dcq-thumbs button{padding:0;border:2px solid transparent;border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px #D0D5DD}
.dcq-thumbs button.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.dcq-thumbs canvas{display:block;width:100%;height:auto;aspect-ratio:4/5}
.dcq-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);display:grid;gap:10px}
.dcq-foot.row{grid-template-columns:1fr 2fr}
.dcq-pri,.dcq-sec{min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;font:600 16px Inter,system-ui,sans-serif}
.dcq-pri{border:0;background:var(--acc);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.2)}.dcq-pri:active{filter:brightness(.92)}
.dcq-sec{border:1.5px solid var(--acc);background:#fff;color:var(--acc)}
.dcq-link{border:0;background:none;color:var(--acc);font:600 14px Inter,system-ui,sans-serif;min-height:36px;padding:0 6px}
.dcq-links{display:flex;justify-content:space-around}
/* step 2 */
.dcq-body.form{padding:8px 16px 0;gap:8px;overflow:auto}
.dcq-prev.sm{flex:0 0 clamp(150px,30dvh,260px)}
.dcq-form{display:grid;gap:10px;padding-bottom:12px}
.dcq-form h4{margin:4px 0 0;font:700 12px Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.dcq-chips{display:flex;flex-wrap:wrap;gap:8px}
.dcq-chips button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid #D0D5DD;background:#fff;font:600 14px Inter,system-ui,sans-serif}
.dcq-chips button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.dcq-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dcq-two label,.dcq-wl{display:flex;flex-direction:column;gap:5px;font:600 12px Inter,system-ui,sans-serif;letter-spacing:.04em;color:var(--mut)}
.dcq input,.dcq textarea{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid #D0D5DD;border-radius:12px;background:#fff;font:400 16px/1.4 Inter,system-ui,sans-serif;color:var(--ink)}
.dcq textarea{min-height:92px;resize:none}
.dcq input:focus,.dcq textarea:focus{border-color:var(--acc)}
.dcq-sug{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:12px;border:1.5px dashed var(--acc);background:var(--acc2);color:var(--acc);font:600 15px Inter,system-ui,sans-serif}
.dcq-toast{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top));transform:translate(-50%,-8px);padding:11px 16px;border-radius:12px;background:#101828;color:#fff;font:600 14px Inter,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.dcq-toast.on{opacity:1;transform:translate(-50%,0)}
.dcq-open{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--acc,#145C63);background:#E6F1F3;color:#145C63;font:600 13px Inter,system-ui,sans-serif;cursor:pointer}
@media (min-width:861px){
  .dcq{align-items:center;background:#F2F4F7}
  .dcq>*:not(.dcq-toast){width:min(560px,100%)}
  .dcq-top{border-radius:0}
  .dcq-body{padding-top:14px}
  .dcq-foot{border-top:1px solid var(--line)}
}
@media (max-width:860px){.dcs-title span{display:none}.dcs-title b{white-space:nowrap;font-size:16px}}

.dcq-stp{font:600 13px Inter,system-ui,sans-serif;color:var(--mut);padding-right:6px}
.dcq-name{justify-content:space-between;align-items:center}
.dcq-name small{margin-left:8px}
.dcq-pill{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #D0D5DD;background:#fff;font:600 13px Inter,system-ui,sans-serif;color:#344054}
.dcq-pill.on{background:var(--acc2);border-color:var(--acc);color:var(--acc)}
.dcq-body.form{overflow:hidden}
.dcq-form{flex:1 1 auto;min-height:0;overflow:auto;gap:12px;align-content:start;padding:2px 2px 12px}
.dcq-f{display:flex;flex-direction:column;gap:6px;font:600 13px Inter,system-ui,sans-serif;color:#475467;letter-spacing:0}
.dcq-lr{display:flex;align-items:center;justify-content:space-between}
.dcq-lr label{font:600 13px Inter,system-ui,sans-serif;color:#475467}
.dcq select{width:100%;min-height:50px;padding:0 14px;border:1.5px solid #D0D5DD;border-radius:12px;background:#fff;font:400 16px Inter,system-ui,sans-serif;color:var(--ink)}
.dcq-sug{display:flex;align-items:center;gap:5px;min-height:34px;padding:0 12px;border-radius:999px;border:0;background:var(--acc2);color:var(--acc);font:600 13px Inter,system-ui,sans-serif}
.dcq-prev.sm{flex:0 0 clamp(150px,34dvh,280px)}
.dcq-sheet{position:fixed;inset:0;z-index:5;background:rgba(16,24,40,.5);display:flex;align-items:flex-end;justify-content:center}
.dcq-sh{width:min(560px,100%);max-height:82dvh;display:flex;flex-direction:column;background:#fff;border-radius:20px 20px 0 0;padding:6px 16px calc(14px + env(safe-area-inset-bottom))}
.dcq-sh header{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.dcq-sh header b{font:600 17px Inter,system-ui,sans-serif}
.dcq-ib.sm{width:36px;height:36px}
.dcq-pg{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;align-content:start;gap:10px;overflow:auto;min-height:0;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.dcq-pic{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#EEF0F3;aspect-ratio:3/4;box-shadow:0 0 0 1px #D0D5DD}
.dcq-pic.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.dcq-pic img{display:block;width:100%;height:100%;object-fit:cover}
.dcq-pic em{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 4px;font:600 11px Inter,system-ui,sans-serif;font-style:normal;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:center}
.dcq-pic.own{display:grid;place-items:center;background:var(--acc2);font:600 13px Inter,system-ui,sans-serif;color:var(--acc);padding:8px;text-align:center}
.dcq-sh .more{margin-top:8px;min-height:46px;font-size:15px}
.dcq-nt{grid-column:1/-1;color:var(--mut);text-align:center;padding:20px}
/* customise (step 4) */
.dcq-tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:12px;background:#EAECF0}
.dcq-tabs button{min-height:40px;border:0;border-radius:9px;background:transparent;font:600 14px Inter,system-ui,sans-serif;color:#475467}
.dcq-tabs button.on{background:#fff;color:var(--acc);box-shadow:0 1px 3px rgba(16,24,40,.15)}
.dcq-form h4{display:flex;justify-content:space-between;align-items:baseline}
.dcq-form h4 small{font:600 12px Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
.dcq-sws{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.dcq-sws button{aspect-ratio:1;padding:0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #D0D5DD;font:600 11px Inter,system-ui,sans-serif;color:#475467;background:#fff}
.dcq-sws button.on{box-shadow:0 0 0 2.5px var(--acc)}
.dcq-sec.wide{width:100%;min-height:46px;font-size:15px}
.dcq-fonts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dcq-fonts button{min-height:50px;border:1.5px solid #D0D5DD;border-radius:12px;background:#fff;font-size:18px;color:var(--ink)}
.dcq-fonts button.on{border-color:var(--acc);background:var(--acc2);color:var(--acc)}
.dcq-seg{display:grid;grid-template-columns:64px 1fr 64px;gap:8px;align-items:center;text-align:center;font:600 14px Inter,system-ui,sans-serif;color:#475467}
.dcq-seg button{min-height:48px;border:1.5px solid #D0D5DD;border-radius:12px;background:#fff;font:700 18px Inter,system-ui,sans-serif;color:var(--ink)}
.dcq-stk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dcq-stk button{aspect-ratio:1;padding:10px;border:1.5px solid #D0D5DD;border-radius:12px;background:#fff}
.dcq-stk img{width:100%;height:100%;object-fit:contain;display:block}
.dcq textarea.s{min-height:64px}
.dcq-body.form:has(.dcq-tabs) .dcq-prev.sm{flex:0 0 clamp(130px,27dvh,240px)}
/* roomier, clearly scrollable forms on phones */
.dcq-body.form .dcq-prev.sm{flex:0 0 clamp(120px,23dvh,210px)}
.dcq-body.form:has(.dcq-tabs) .dcq-prev.sm{flex:0 0 clamp(110px,21dvh,190px)}
.dcq-form{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:30px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
.dcq-body.form{overflow:hidden}
/* no-scroll layout: the card preview takes whatever room is left; controls never scroll */
.dcq-body.form{overflow:hidden;gap:8px;padding-bottom:6px}
.dcq-body.form .dcq-prev.sm,.dcq-body.form:has(.dcq-tabs) .dcq-prev.sm{flex:1 1 0;min-height:70px}
.dcq-form{flex:0 0 auto;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:0 0 4px;gap:8px;touch-action:auto}
.dcq-form.fixed{min-height:178px;align-content:start}
.dcq input,.dcq select{min-height:44px;padding:0 12px}
.dcq textarea{min-height:58px;padding:8px 12px}
.dcq-f{gap:4px;font-size:12px}
.dcq-two{gap:8px}
.dcq-tabs{grid-template-columns:repeat(6,1fr);gap:2px;padding:3px}
.dcq-tabs button{min-height:38px;font-size:12.5px;padding:0;border-radius:8px}
.dcq-sws{gap:8px}.dcq-sws.s7{grid-template-columns:repeat(7,1fr)}.dcq-sws.s6{grid-template-columns:repeat(6,1fr)}
.dcq-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dcq-g4 button{min-height:46px;padding:0 4px;border:1.5px solid #D0D5DD;border-radius:12px;background:#fff;font:600 13.5px Inter,system-ui,sans-serif;color:var(--ink)}
.dcq-g4 button.on{border-color:var(--acc);background:var(--acc2);color:var(--acc)}
.dcq-stk{gap:8px}.dcq-stk button{aspect-ratio:1.3;padding:6px}
.dcq-sk{font:600 13px Inter,system-ui,sans-serif;color:#475467;min-height:26px}
.dcq-seg{grid-template-columns:60px 1fr 60px}.dcq-seg button{min-height:44px}
.dcq-sec.wide{min-height:44px}
.dcq-foot{padding-top:10px;gap:8px}
@media (max-height:640px){.dcq-top{min-height:50px}.dcq-pri,.dcq-sec{min-height:46px}}
/* sticker slots */
.dcq-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dcq-slots button{min-height:40px;padding:0 2px;border:1.5px solid #D0D5DD;border-radius:10px;background:#fff;font:600 11.5px Inter,system-ui,sans-serif;color:#475467;position:relative}
.dcq-slots button.on{border-color:var(--acc);background:var(--acc2);color:var(--acc)}
.dcq-slots button.has::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.dcq-stk{grid-template-columns:repeat(5,1fr)}
.dcq-stk button{aspect-ratio:1;padding:6px}
.dcq-stk button.on{border-color:var(--acc);background:var(--acc2)}
.dcq-stk button.tx{font:600 12px Inter,system-ui,sans-serif;color:#475467;padding:2px;line-height:1.15}
.dcq-stk button.tx.on{color:var(--acc)}
.dcq-form.fixed{min-height:186px}
/* sticker strip: two rows, swipe sideways */
.dcq-stk{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,60px);grid-auto-columns:60px;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;padding:0 0 6px;scrollbar-width:thin;margin:0 -2px;scroll-padding:0 2px}
.dcq-stk button{aspect-ratio:auto;width:60px;height:60px;padding:6px}
.dcq-stk button.tx{padding:2px}
.dcq-stk img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* live stickers */
.dcq-stk button.lv{position:relative;background:linear-gradient(160deg,#1B1740,#3A2A6B);border-color:#3A2A6B}
.dcq-stk button.lv.on{border-color:#F6C022;box-shadow:0 0 0 1.5px #F6C022}
.dcq-stk button.lv::after{content:"LIVE";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font:700 7.5px Inter,system-ui,sans-serif;letter-spacing:.08em;color:#FFE08A}
.dcq-stk button.lv img{height:calc(100% - 8px);margin-top:-2px}
/* animate switch */
.dcq-pills{display:flex;gap:8px;flex:0 0 auto}
.dcq-name>div:first-child{min-width:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.dcq-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dcq-pill{padding:0 10px}
.dcq-pill.on{background:#E6F1F3}
/* mobile audit: every control reaches 44px; the toast wraps inside the screen instead of the right half only */
@media (max-width:999px){
.dcq-ib,.dcq-ib.sm{width:44px;height:44px}
.dcq-ghost,.dcq-pill,.dcq-open,.dcq-chips button,.dcq-tabs button,.dcq-slots button,.dcq-link,.dcq-sug{min-height:44px}
.dcq-toast{width:max-content;max-width:calc(100vw - 32px);text-align:center}
/* colour dots: tracks of 44px or more; a seventh dot wraps to a second row on 320px screens instead of shrinking */
.dcq-sws,.dcq-sws.s6,.dcq-sws.s7{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:4px}
.dcq-sws button{width:100%;max-width:56px;justify-self:center}
}