:root{
  --accent1:#7c3aed;        /* violet */
  --accent2:#ec4899;        /* pink   */
  --accent:#7c3aed;
  --bg:#f4f4f7;
  --panel:#ffffff;
  --ink:#15131c;
  --muted:#8b8794;
  --line:#ececf1;
  --shadow:0 8px 30px rgba(20,15,40,.12);
  --grad:linear-gradient(135deg,var(--accent1),var(--accent2));
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.app{position:fixed;inset:0;display:flex;flex-direction:column;height:100%}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 8px) 14px 8px;
  background:var(--panel);border-bottom:1px solid var(--line);z-index:20;
}
.tb-left{display:flex;gap:8px}
.tb-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f1eef9;color:var(--accent1)}
.tb-btn:active{transform:scale(.94)}
.tb-btn.pro{background:var(--grad);color:#fff;position:relative}
.tb-btn.pro::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.brand{
  flex:1;text-align:center;font-weight:800;font-size:18px;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.export-btn{
  padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;color:#fff;
  background:var(--grad);box-shadow:0 4px 14px rgba(124,58,237,.35);
}
.export-btn:active{transform:scale(.96)}

/* ---------- stage ---------- */
.stage-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:14px;min-height:0}
.stage-pad{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}
.stage{position:relative;max-width:100%;max-height:100%;box-shadow:var(--shadow);border-radius:6px;overflow:hidden;touch-action:none}
.stage canvas{display:block;max-width:100%;max-height:100%}
.overlay{position:absolute;inset:0;pointer-events:none}

/* overlay objects (text / stickers) */
.obj{position:absolute;pointer-events:auto;transform-origin:center center;will-change:transform;touch-action:none}
.obj .obj-content{display:inline-block;white-space:pre;line-height:1.05;text-align:center}
.obj.sticker .obj-content{font-size:54px}
.obj.selected{outline:1.5px dashed var(--accent);outline-offset:4px;border-radius:2px}
.obj .handle{position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);display:none;place-items:center;color:var(--accent1)}
.obj.selected .handle{display:grid}
.obj .h-del{top:-13px;left:-13px;color:#e23}
.obj .h-scale{bottom:-13px;right:-13px}
.obj .handle svg{width:15px;height:15px}

/* per-cell HUD */
.cell-hud{position:absolute;left:0;right:0;bottom:10px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;pointer-events:none}
.cell-hud[hidden]{display:none}
.hud-btn{pointer-events:auto;width:44px;height:44px;border-radius:50%;background:rgba(20,15,30,.78);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.hud-zoom{pointer-events:auto;width:46%;max-width:220px;accent-color:var(--accent1)}

.empty-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;pointer-events:none}
.empty-hint h2{margin:6px 0 0;font-size:20px}
.empty-hint p{margin:0;color:var(--muted);font-size:14px;max-width:240px}
.eh-emoji{font-size:54px}
.eh-btn{pointer-events:auto;margin-top:14px;padding:12px 24px;border-radius:999px;color:#fff;font-weight:700;background:var(--grad);box-shadow:0 6px 18px rgba(124,58,237,.35)}
.empty-hint[hidden]{display:none}

/* ---------- bottom tab bar ---------- */
.tabbar{
  display:flex;background:var(--panel);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);z-index:25;
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;color:var(--muted);font-size:10.5px;font-weight:600}
.tab svg{width:23px;height:23px}
.tab.active{color:var(--accent1)}
.tab:active{transform:scale(.92)}

/* ---------- sliding sheet ---------- */
.sheet{
  position:absolute;left:0;right:0;bottom:calc(58px + var(--safe-b));z-index:24;
  background:var(--panel);border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(20,15,40,.12);
  max-height:46vh;display:flex;flex-direction:column;
  animation:sheetUp .22s cubic-bezier(.2,.8,.2,1);
}
.sheet[hidden]{display:none}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 8px;font-weight:700;font-size:15px}
.sheet-close{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f1f0f5;color:var(--muted)}
.sheet-body{padding:4px 16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* layout grid */
.lay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lay-cell{aspect-ratio:1;border-radius:12px;background:#f4f3f8;border:1.5px solid var(--line);padding:7px;display:grid;place-items:stretch}
.lay-cell.active{border-color:var(--accent1);background:#f3effe}
.lay-cell:active{transform:scale(.95)}
.lay-mini{position:relative;width:100%;height:100%}
.lay-mini i{position:absolute;background:#cbc6da;border-radius:2px}
.lay-cell.active .lay-mini i{background:var(--accent1)}

/* generic horizontal chip rows */
.chip-row{display:flex;gap:9px;overflow-x:auto;padding:4px 0 6px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:#f3f2f7;font-weight:600;font-size:13px;color:#4a4658;white-space:nowrap;border:1.5px solid transparent}
.chip.active{background:#f3effe;border-color:var(--accent1);color:var(--accent1)}
.chip:active{transform:scale(.95)}

/* swatches */
.swatch-row{display:flex;flex-wrap:wrap;gap:11px;padding:4px 0}
.swatch{width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);position:relative}
.swatch.active{box-shadow:0 0 0 2.5px var(--accent1)}
.swatch:active{transform:scale(.92)}
.swatch.custom{display:grid;place-items:center;color:var(--muted);background:#f3f2f7;box-shadow:0 0 0 1.5px var(--line)}
.swatch.custom svg{width:18px;height:18px}
.swatch.none{display:grid;place-items:center;color:#c33;background:#fff;box-shadow:0 0 0 1.5px var(--line)}
.swatch.none svg{width:22px;height:22px;stroke:#d34}

/* sliders panel */
.slider-block{padding:8px 0}
.slider-block label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#4a4658;margin-bottom:6px}
.slider-block input[type=range]{width:100%;accent-color:var(--accent1)}

/* photos panel */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.photo-thumb{aspect-ratio:1;border-radius:12px;overflow:hidden;background:#f3f2f7;position:relative}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.photo-thumb.add{display:grid;place-items:center;color:var(--accent1);border:1.5px dashed #d6d1e6}
.photo-thumb.add svg{width:26px;height:26px}
.photo-thumb .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.photo-thumb .rm svg{width:12px;height:12px}

/* sticker grid */
.sticker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sticker-grid button{aspect-ratio:1;font-size:26px;border-radius:10px;background:#faf9fc;display:grid;place-items:center}
.sticker-grid button:active{transform:scale(.9);background:#f1eef9}
.sticker-cat{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}
.sticker-cat button{flex:0 0 auto;font-size:20px;width:40px;height:34px;border-radius:9px;background:#f3f2f7}
.sticker-cat button.active{background:#f3effe;box-shadow:inset 0 0 0 1.5px var(--accent1)}

/* font picker */
.font-row{display:flex;gap:9px;overflow-x:auto;padding:2px 0 8px}
.font-row button{flex:0 0 auto;padding:8px 15px;border-radius:10px;background:#f3f2f7;font-size:16px;border:1.5px solid transparent}
.font-row button.active{border-color:var(--accent1);background:#f3effe}

/* ---------- modals ---------- */
.modal-scrim{position:fixed;inset:0;z-index:60;background:rgba(20,15,30,.5);display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(2px)}
.modal-scrim[hidden]{display:none}
.modal{
  width:100%;max-width:460px;background:var(--panel);border-radius:22px 22px 0 0;
  padding:20px 18px calc(20px + var(--safe-b));position:relative;
  animation:sheetUp .25s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow-y:auto;
}
@media(min-width:520px){.modal-scrim{align-items:center}.modal{border-radius:22px}}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:#f1f0f5;color:var(--muted);display:grid;place-items:center;z-index:2}
.modal h3{margin:2px 0 16px;font-size:19px;text-align:center}
.export-preview{display:flex;justify-content:center;margin-bottom:16px}
.export-preview img{max-width:100%;max-height:42vh;border-radius:10px;box-shadow:var(--shadow)}
.export-actions{display:flex;flex-direction:column;gap:11px}
.opt{text-align:left;border-radius:16px;padding:14px 16px;border:1.5px solid var(--line);background:#fff}
.opt:active{transform:scale(.99)}
.opt-pro{border-color:transparent;background:linear-gradient(135deg,#f3effe,#fdeef7);box-shadow:inset 0 0 0 1.5px rgba(124,58,237,.35)}
.opt-main{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15.5px}
.opt-pro .opt-price{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:17px}
.opt-sub{color:var(--muted);font-size:12.5px;margin-top:3px;font-weight:500}
.unlocked-note{margin-top:14px;text-align:center;color:#16a34a;font-weight:700;font-size:14px}
.export-foot{text-align:center;color:var(--muted);font-size:11.5px;margin:14px 0 0}

/* --- Go Pro / plans --- */
.pro-badge{display:inline-block;background:var(--grad);color:#fff;font-weight:800;font-size:11px;letter-spacing:.08em;padding:4px 12px;border-radius:999px;margin:0 auto 6px;display:table}
#planMain h3,#planSignin h3{margin:2px 0 14px}
.perks{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:7px}
.perks li{font-size:14px;color:#3a3646;font-weight:600}
.plan-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.plan{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;text-align:left;background:#fff}
.plan.active{border-color:transparent;background:linear-gradient(135deg,#f3effe,#fdeef7);box-shadow:inset 0 0 0 2px var(--accent1)}
.plan:active{transform:scale(.99)}
.plan .p-name{font-weight:700;font-size:15.5px}
.plan .p-sub{font-size:12px;color:var(--muted);margin-top:2px}
.plan .p-price{font-weight:800;font-size:16px;text-align:right;white-space:nowrap}
.plan .p-badge{display:inline-block;background:#22c55e;color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.plan .p-right{display:flex;align-items:center;gap:10px}
.plan .p-radio{width:20px;height:20px;border-radius:50%;border:2px solid #cdc7da;flex:0 0 auto;display:grid;place-items:center}
.plan.active .p-radio{border-color:var(--accent1)}
.plan.active .p-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent1)}
.email-in{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font-family:inherit;font-size:16px;outline:none;-webkit-user-select:text;user-select:text;margin-bottom:12px}
.email-in:focus{border-color:var(--accent1)}
.email-in[hidden]{display:none}
.alt-line{text-align:center;margin-top:16px;font-size:13.5px;color:var(--muted)}
.linkbtn{color:var(--accent1);font-weight:700;font-size:13.5px}
.modal-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 16px}
.sent-note{margin-top:14px;text-align:center;color:#16a34a;font-weight:700;font-size:14px}
.sent-note[hidden]{display:none}

/* --- account --- */
.acct-email{text-align:center;font-weight:700;font-size:16px;margin-bottom:4px;word-break:break-all}
.acct-status{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:20px}
.acct-status .pill{display:inline-block;padding:3px 12px;border-radius:999px;font-weight:700;font-size:12.5px}
.acct-status .pill.pro{background:#dcfce7;color:#15803d}
.acct-status .pill.free{background:#f1f0f5;color:#6b6777}
.acct-actions{display:flex;flex-direction:column;gap:10px}
.acct-actions button{padding:13px;border-radius:999px;font-weight:700;font-size:14.5px}
.acct-actions .primary{color:#fff;background:var(--grad);box-shadow:0 6px 18px rgba(124,58,237,.3)}
.acct-actions .ghost{background:#f3f2f7;color:#4a4658}
.acct-actions .danger{background:#fdecec;color:#e23}

/* text modal */
.text-modal textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px;font-family:inherit;
  font-size:16px;resize:none;outline:none;-webkit-user-select:text;user-select:text;
}
.text-modal textarea:focus{border-color:var(--accent1)}
.field-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 8px}
.text-modal-actions{display:flex;gap:10px;margin-top:18px}
.add-text{flex:1;padding:14px;border-radius:999px;color:#fff;font-weight:700;background:var(--grad);box-shadow:0 6px 18px rgba(124,58,237,.3)}
.del-text{padding:14px 20px;border-radius:999px;font-weight:700;color:#e23;background:#fdecec}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(76px + var(--safe-b));transform:translateX(-50%);z-index:90;background:#15131c;color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);animation:toastIn .2s ease}
.toast[hidden]{display:none}
@keyframes toastIn{from{opacity:0;transform:transl(-50%,8px)}to{opacity:1}}

/* ---------- onboarding ---------- */
.onboarding{position:fixed;inset:0;z-index:200;background:#fff;display:flex;flex-direction:column;padding-top:var(--safe-t)}
.onboarding[hidden]{display:none}
.ob-skip{position:absolute;top:calc(var(--safe-t) + 12px);right:14px;z-index:3;color:var(--muted);font-weight:600;font-size:14px;padding:6px 10px}
.ob-viewport{flex:1;overflow:hidden}
.ob-track{display:flex;height:100%;transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.ob-slide{min-width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 26px}
.ob-slide h2{font-size:25px;margin:24px 0 8px;letter-spacing:-.02em}
.ob-slide p{color:var(--muted);font-size:15px;line-height:1.55;max-width:300px;margin:0}
.ob-art{width:min(70vw,250px);height:min(70vw,250px);display:grid;flex:0 0 auto}
.mc{position:relative;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:8px;background:linear-gradient(135deg,#a18cd1,#fbc2eb);border-radius:24px;box-shadow:var(--shadow)}
.mc i{border-radius:13px;display:block}
.mc-pill{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-6deg);background:#fff;color:#15131c;font-family:'Caveat',cursive;font-size:27px;font-weight:600;padding:3px 15px;border-radius:11px;box-shadow:0 3px 10px rgba(0,0,0,.18);white-space:nowrap}
.mc-emoji{position:absolute;right:4%;top:6%;font-size:42px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.ob-layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;height:auto}
.ob-layouts .lay-cell{aspect-ratio:1}
.ob-deco{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;font-size:48px;width:min(82vw,300px);height:auto}
.mc-pill.alt,.mc-pill.alt2{position:static;transform:rotate(-4deg)}
.mc-pill.alt2{transform:rotate(3deg);font-size:23px}
.ob-dots{display:flex;gap:8px;justify-content:center;padding:12px}
.ob-dots i{width:8px;height:8px;border-radius:50%;background:#dcd7e8;transition:.22s}
.ob-dots i.on{background:var(--accent1);width:22px;border-radius:6px}
.ob-next{margin:0 24px calc(20px + var(--safe-b));padding:16px;border-radius:999px;color:#fff;font-weight:700;font-size:16px;background:var(--grad);box-shadow:0 8px 22px rgba(124,58,237,.35)}
.ob-next:active{transform:scale(.98)}
.ob-pay{justify-content:flex-start;padding-top:34px}
.ob-pay .pro-badge{margin-bottom:8px}
.ob-pay h2{margin-top:0}
.ob-pay .perks{margin:16px 0 18px;text-align:left}
.ob-pay .plan-list{width:100%;max-width:380px;margin-bottom:14px}
.ob-pay .add-text{flex:0 0 auto;width:100%;max-width:380px}
.ob-free{margin-top:14px;color:var(--muted);font-weight:600;font-size:14px;padding:8px}

/* loading veil */
.loading-veil{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-weight:600;font-size:14px}
.loading-veil[hidden]{display:none}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid #e9e6f2;border-top-color:var(--accent1);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}