:root{
  --bg:#f3f5fa; --panel:#ffffff; --panel2:#f4f6fb; --line:rgba(20,30,60,.10);
  --text:#1d2540; --dim:#6b7590; --acc1:#0ea5e9; --acc2:#6366f1;
  --grad:linear-gradient(135deg,#0ea5e9,#6366f1);
  --rec:#e11d48; --radius:12px;
  --shadow-sm:0 1px 3px rgba(20,30,60,.07);
  --shadow-md:0 6px 22px rgba(20,30,60,.10);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(99,102,241,.08),transparent),
  radial-gradient(900px 500px at -10% 110%,rgba(14,165,233,.07),transparent),
  var(--bg);
  color:var(--text);font-size:14px;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

.btn svg,.tile svg,.tabbar svg,.el-item svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fillico{fill:currentColor!important;stroke:none!important}

/* ---------- motion keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.25}}
@keyframes slideUp{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeSlide{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes popIn{0%{transform:scale(.86);opacity:0}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes shimmerX{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:20;box-shadow:var(--shadow-sm)}
.logo{display:flex;align-items:center;gap:10px}
.logo div{display:flex;flex-direction:column;line-height:1.15}
.logo b{font-size:15px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{font-size:10.5px;color:var(--dim)}
.topbar-actions{display:flex;gap:8px;align-items:center}

.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:8px 13px;
  border-radius:var(--radius);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s,background .16s;box-shadow:var(--shadow-sm)}
.btn svg{width:16px;height:16px}
.btn:hover{border-color:var(--acc1);transform:translateY(-1px);box-shadow:0 4px 14px rgba(14,165,233,.18)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.icon{width:40px;height:40px;justify-content:center;padding:0}
.btn.rec{background:linear-gradient(135deg,#f43f5e,#fb7185);border:none;color:#fff;box-shadow:0 4px 18px rgba(244,63,94,.30)}
.btn.rec:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.rec .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}

/* ---------- layout ---------- */
.layout{flex:1;display:grid;grid-template-columns:236px 1fr;min-height:0}
.panel-col{background:var(--panel);overflow-y:auto;min-height:0}
.tools{border-right:1px solid var(--line)}
.side{border-left:1px solid var(--line)}
.pgroup{padding:15px;border-bottom:1px solid var(--line);animation:fadeSlide .35s ease both}
.pgroup:nth-child(2){animation-delay:.05s}
.pgroup:nth-child(3){animation-delay:.1s}
.pgroup h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:11px;font-weight:700}

.tile{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;margin-bottom:8px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);
  cursor:pointer;font-family:inherit;text-align:left;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s,box-shadow .18s}
.tile:hover{border-color:var(--acc1);transform:translateY(-2px);box-shadow:0 6px 18px rgba(14,165,233,.14)}
.tile:hover svg{transform:scale(1.15) rotate(-4deg)}
.tile:active{transform:translateY(0) scale(.98)}
.tile svg{width:21px;height:21px;color:var(--acc1);flex-shrink:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.tile div{display:flex;flex-direction:column;gap:1px}
.tile b{font-size:13px}
.tile span{font-size:10.5px;color:var(--dim)}

.shape-grid{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  color:var(--text);cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s}
.chip:hover{border-color:var(--acc2);transform:translateY(-1px) scale(1.04);box-shadow:0 3px 10px rgba(99,102,241,.16)}
.chip:active{transform:scale(.96)}

select,input[type=number],input[type=text],input[type=email],input[type=password],textarea,input[type=file]{width:100%;background:var(--panel2);
  border:1px solid var(--line);color:var(--text);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:13px;transition:border-color .15s,box-shadow .15s}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--acc1);box-shadow:0 0 0 3px rgba(14,165,233,.14)}
input[type=color]{width:100%;height:34px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:3px;cursor:pointer}
input[type=file]{padding:6px;font-size:11.5px}
textarea{resize:vertical;min-height:64px}
.fld{display:block;font-size:11.5px;color:var(--dim);margin-bottom:9px;font-weight:600}
.fld>*{margin-top:4px}
.fld.chk{display:flex;align-items:center;gap:8px;color:var(--text);font-size:12.5px}
.fld.chk input{width:16px;height:16px;margin:0;accent-color:var(--acc1)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hint{font-size:11px;color:var(--dim);line-height:1.55}

/* ---------- stage ---------- */
.stage-wrap{display:flex;flex-direction:column;min-width:0;min-height:0}
.stage-scroll{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px 14px 76px;min-height:0;position:relative;
  background-image:radial-gradient(rgba(20,30,60,.08) 1px,transparent 1px);background-size:22px 22px}
#stage{border-radius:8px;box-shadow:0 14px 44px rgba(20,30,60,.18);touch-action:none;cursor:grab}
#stage.dragging{cursor:grabbing}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;
  background:rgba(243,245,250,.85);backdrop-filter:blur(4px);font-weight:600;color:var(--dim);z-index:5}
.loading[hidden]{display:none}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc1);animation:spin 0.8s linear infinite}

/* demo preview badge */
.demo-badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:linear-gradient(135deg,rgba(14,165,233,.94),rgba(99,102,241,.94));color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;box-shadow:0 6px 20px rgba(14,165,233,.35);
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both;pointer-events:none;white-space:nowrap}
.demo-badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.demo-badge[hidden]{display:none}
.stage-scroll:has(.selbar:not([hidden])) .demo-badge{opacity:0;transition:opacity .2s}

/* v3.8: transport floats glued to the bottom of the canvas area */
.transport{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:10px;padding:8px 12px;width:min(660px,calc(100% - 24px));
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 10px 30px rgba(20,30,60,.16)}
.transport .btn.icon{background:var(--grad);border:none;color:#fff;box-shadow:0 4px 14px rgba(14,165,233,.35)}
.transport .btn.icon:hover{transform:translateY(-1px) scale(1.06)}
.transport .btn.icon.tbtn{background:var(--panel);color:inherit}
#scrub{flex:1;accent-color:var(--acc1);height:22px;min-width:60px}
.time{font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px;white-space:nowrap;font-weight:600}

/* ---------- element list (compact, v3.8) ---------- */
.el-list{list-style:none}
.el-item{display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid var(--line);
  border-radius:9px;margin-bottom:4px;cursor:pointer;background:var(--panel2);
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .15s,box-shadow .15s,opacity .15s;animation:fadeSlide .28s ease both}
.el-item:hover{border-color:rgba(14,165,233,.5)}
.el-item.sel{border-color:var(--acc1);box-shadow:0 0 0 1px var(--acc1),0 4px 12px rgba(14,165,233,.15);background:#fff}
.el-item .ic{width:15px;height:15px;color:var(--acc2);flex-shrink:0}
.el-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.el-item .dur{font-size:10px;color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}
.el-item button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;padding:3px 5px;border-radius:6px;transition:.15s}
.el-item button:hover{color:var(--text);background:rgba(20,30,60,.06)}
.el-item button.del:hover{color:var(--rec)}

/* ---------- tabbar (mobile) ---------- */
.tabbar{display:none}

/* ---------- record overlay ---------- */
.rec-overlay[hidden]{display:none}
.rec-overlay{position:fixed;inset:0;background:rgba(29,37,64,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:60}
.rec-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px 38px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:11px;font-weight:700;font-size:15px;box-shadow:var(--shadow-md);animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both}
.rec-dot{width:15px;height:15px;border-radius:50%;background:var(--rec);animation:pulse 1s infinite}
/* v3.4 export animation */
.rec-line{position:relative;width:210px;height:38px;margin:2px auto 0}
.rec-stroke{position:absolute;left:4px;right:4px;bottom:7px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#22d3ee,#818cf8,#f472b6);background-size:200% 100%;animation:recShine 2.2s linear infinite;opacity:.7}
.rec-pen{position:absolute;bottom:9px;left:0;font-size:26px;line-height:1;animation:recPen 1.7s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
@keyframes recPen{0%{left:2px;transform:rotate(-10deg)}50%{left:calc(100% - 32px);transform:rotate(8deg)}100%{left:2px;transform:rotate(-10deg)}}
.rec-track{width:min(300px,64vw);height:9px;border-radius:99px;background:rgba(148,163,184,.28);overflow:hidden}
#recBar{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#818cf8,#22d3ee);
  background-size:200% 100%;animation:recShine 1.4s linear infinite;transition:width .3s ease}
@keyframes recShine{0%{background-position:0 0}100%{background-position:200% 0}}
.rec-pct{font-size:13px;font-weight:800;color:#818cf8;letter-spacing:.4px}
.rec-stop{margin-top:10px;padding:8px 20px;border:1px solid rgba(248,113,113,.55);background:rgba(127,29,29,.25);color:#fca5a5;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer}
.rec-stop:hover{background:rgba(153,27,27,.4);color:#fecaca}
.rec-box.done .rec-stop{display:none}
.rec-box.done .rec-pen{animation:none;left:calc(100% - 32px)}
.rec-box.done #recBar{background:#10b981;animation:none}
.rec-box.done .rec-pct{color:#10b981}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .layout{display:flex;flex-direction:column}
  .side{transform:none;transition:none}
  .topbar{padding:8px 8px}
  .btn i{display:none}
  .btn.rec i.keep{display:inline;font-size:12px}
  .btn{padding:7px 9px}
  .btn.rec{padding:7px 10px;flex-shrink:0}
  .topbar-actions{gap:5px;flex-shrink:0}
  .logo{min-width:0}
  .logo span{display:none}
  .logo b{white-space:nowrap;font-size:14px;overflow:hidden;text-overflow:ellipsis}
  .stage-wrap{flex:1;min-height:0;padding-bottom:0}
  .stage-scroll{padding:10px 10px 66px}
  .transport{padding:6px 8px;gap:7px;bottom:8px;width:calc(100% - 16px)}
  .transport .btn.icon{width:34px;height:34px}
  .demo-badge{top:10px;left:10px;right:60px;transform:none;justify-content:center;white-space:normal;text-align:center;font-size:10.5px;padding:6px 11px}

  .tools,.side{display:none;position:fixed;left:0;right:0;bottom:58px;max-height:46dvh;overflow-y:auto;
    z-index:40;background:var(--panel);border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    box-shadow:0 -12px 40px rgba(20,30,60,.22)}
  .tools .pgroup,.side .pgroup{display:none}
  body[data-tab="add"] .tools{display:block;animation:slideUp .3s cubic-bezier(.22,1,.36,1) both}
  body[data-tab="add"] .tools .pgroup[data-mobile-tab="add"]{display:block}
  body[data-tab="settings"] .tools{display:block;animation:slideUp .3s cubic-bezier(.22,1,.36,1) both}
  body[data-tab="settings"] .tools .pgroup[data-mobile-tab="settings"]{display:block}
  body[data-tab="background"] .tools{display:block;animation:slideUp .3s cubic-bezier(.22,1,.36,1) both} /* v4.9.11: Background panel — Add/More jaisa same container + animation */
  body[data-tab="background"] .tools .pgroup[data-mobile-tab="background"]{display:block}
  body[data-tab="edit"] .side{display:block;animation:slideUp .3s cubic-bezier(.22,1,.36,1) both}
  body[data-tab="edit"] .side .pgroup[data-mobile-tab="edit"]{display:block}
  body[data-tab="list"] .side{display:block;animation:slideUp .3s cubic-bezier(.22,1,.36,1) both}
  body[data-tab="list"] .side .pgroup[data-mobile-tab="list"]{display:block}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:58px;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:45;box-shadow:0 -2px 12px rgba(20,30,60,.06)}
  .tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:none;color:var(--dim);font-family:inherit;font-size:10.5px;font-weight:700;cursor:pointer;
    position:relative;transition:color .2s}
  .tabbar button svg{width:19px;height:19px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
  .tabbar button.on{color:var(--acc1)}
  .tabbar button.on svg{transform:translateY(-2px) scale(1.18)}
  .tabbar button::after{content:'';position:absolute;top:0;left:50%;width:0;height:3px;border-radius:0 0 4px 4px;
    background:var(--grad);transform:translateX(-50%);transition:width .28s cubic-bezier(.22,1,.36,1)}
  .tabbar button.on::after{width:46%}
}
@media (min-width:901px){
  body{--is-desktop:1}
}

/* v2.4: drag-reorder + template modal */
.el-item .dragH{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--dim);font-weight:700;font-size:13px;letter-spacing:-1px;padding:2px 5px 2px 2px;flex-shrink:0}
.el-item .dragH:active{cursor:grabbing;color:var(--acc1)}
.el-item.dragging{opacity:.92;position:relative;z-index:6;box-shadow:0 8px 22px rgba(20,30,60,.25);border-color:var(--acc1)}
.el-item.drop{outline:2px dashed var(--acc1);outline-offset:2px}
.tpl-card{max-width:340px;width:90vw;text-align:left}
.tpl-card .fld{margin-top:10px}
.tpl-row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* v3.2: very narrow screens — logo icon only, export always visible */
@media (max-width:540px){
  .logo b{display:none}
  .logo svg{width:26px;height:26px}
}

/* ===== v3.3: font preview dropdown ===== */
.fontdd{position:relative}
.fontdd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  color:var(--text);cursor:pointer;font-size:15px;text-align:left}
.fontdd-btn svg{flex-shrink:0;color:var(--dim)}
.fontdd-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fontdd-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;max-height:260px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(20,30,60,.22);padding:4px}
.fontdd-list button{display:block;width:100%;background:none;border:none;text-align:left;cursor:pointer;
  color:var(--text);font-size:16px;padding:8px 10px;border-radius:7px}
.fontdd-list button:hover{background:var(--panel2)}
.fontdd-list button.on{background:rgba(34,211,238,.14);outline:1px solid rgba(34,211,238,.5)}

/* ===== v3.3: color palette + gradients ===== */
.pal{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.pal .sw{aspect-ratio:1;border:2px solid var(--line);border-radius:8px;cursor:pointer;padding:0;min-height:24px;
  transition:transform .12s,border-color .12s}
.pal .sw:hover{transform:scale(1.12)}
.pal .sw.on{border-color:#22d3ee;box-shadow:0 0 0 2px rgba(34,211,238,.35)}
.c2row{display:flex;gap:6px;align-items:center}
.c2row input{flex:1}
.c2row .c2off{padding:6px 10px;flex-shrink:0}

/* ---------- v3.5: visual pickers ---------- */
.hint-inline{font-size:10px;color:var(--acc2);text-transform:none;letter-spacing:0;font-weight:600;margin-left:6px}
.size-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.size-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:9px 4px 7px;
  background:linear-gradient(160deg,#f0f9ff,#eef2ff);border:1.5px solid var(--line);border-radius:var(--radius);
  cursor:pointer;font-family:inherit;transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s;min-height:78px}
.size-tile .ratio{display:block;background:linear-gradient(135deg,#bae6fd,#c7d2fe);border:1.5px solid #7dd3fc;border-radius:4px;transition:transform .18s}
.size-tile .nm{font-size:11px;font-weight:700;color:var(--text)}
.size-tile .sub{font-size:9.5px;color:var(--dim);font-weight:600}
.size-tile:hover{transform:translateY(-2px);border-color:var(--acc1);box-shadow:0 5px 14px rgba(14,165,233,.16)}
.size-tile:hover .ratio{transform:scale(1.1)}
.size-tile.on{border-color:var(--acc1);background:linear-gradient(160deg,#e0f2fe,#e0e7ff);box-shadow:0 0 0 2px rgba(14,165,233,.25),var(--shadow-sm)}
.size-tile.on .nm{color:#0369a1}

.bg-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} /* v4.9.11: panel me 2 cols mobile, 3 cols desktop */
@media(min-width:901px){.bg-pick{grid-template-columns:repeat(3,1fr)}}
.bg-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;
  background:var(--panel2);border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;font-family:inherit;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s}
.bg-tile canvas{width:100%;height:auto;border-radius:6px;border:1px solid rgba(20,30,60,.14);display:block}
.bg-tile .nm{font-size:9.5px;font-weight:700;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bg-tile:hover{transform:translateY(-2px);border-color:var(--acc2);box-shadow:0 5px 14px rgba(99,102,241,.15)}
.bg-tile.on{border-color:var(--acc1);box-shadow:0 0 0 2px rgba(14,165,233,.28),var(--shadow-sm);background:#eff8ff}
.bg-tile.on .nm{color:#0369a1}

/* v4.0: desktop pe vertical scroll, mobile pe horizontal (media query niche) */
.shape-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  max-height:216px;overflow-y:auto;overflow-x:hidden;padding:4px 4px 8px 2px;scrollbar-width:thin}
.shape-scroll::-webkit-scrollbar{width:6px;height:6px}
.shape-scroll::-webkit-scrollbar-thumb{background:rgba(99,102,241,.3);border-radius:99px}
@media (max-width:900px){
  .shape-scroll{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-columns:64px;
    max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:4px 2px 8px}
}
.shape-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px 5px;scroll-snap-align:start;
  border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-family:inherit;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s,background .16s}
.shape-tile:nth-child(6n+1){background:linear-gradient(160deg,#f0f9ff,#fff)}
.shape-tile:nth-child(6n+2){background:linear-gradient(160deg,#eef2ff,#fff)}
.shape-tile:nth-child(6n+3){background:linear-gradient(160deg,#fdf2f8,#fff)}
.shape-tile:nth-child(6n+4){background:linear-gradient(160deg,#f0fdf4,#fff)}
.shape-tile:nth-child(6n+5){background:linear-gradient(160deg,#fffbeb,#fff)}
.shape-tile:nth-child(6n+6){background:linear-gradient(160deg,#faf5ff,#fff)}
.shape-tile canvas{width:42px;height:28px;display:block}
.shape-tile .nm{font-size:9px;font-weight:700;color:var(--dim);white-space:nowrap}
.shape-tile:hover{transform:translateY(-2px) scale(1.06);border-color:var(--acc2);box-shadow:0 5px 12px rgba(99,102,241,.18)}
.shape-tile:active{transform:scale(.95)}
/* v4.3: hand-drawn icons */
.icon-tile{position:relative}
.icon-tile>svg{width:32px;height:32px;display:block}
.icon-tile .ipm{position:absolute;top:2px;right:3px;display:inline-flex;font-style:normal;pointer-events:none}
.icon-tile .ipm svg{width:12px;height:12px;fill:#f59e0b;filter:drop-shadow(0 1px 1px rgba(180,83,9,.35))}

/* ================= v3.6: transport undo/redo + pro timeline ================= */
.tbtn{background:var(--panel);border:1px solid var(--line);color:inherit;box-shadow:none}
.tbtn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}
.tbtn:disabled{opacity:.32;cursor:default;transform:none!important;box-shadow:none}
.tbtn:not(:disabled):hover{border-color:#818cf8}
.tl-wrap{border-top:1px solid var(--line);background:var(--panel);flex:none;overflow:visible;position:relative;z-index:12}
.tl-head{display:flex;align-items:center;gap:8px;padding:5px 12px}
.tl-title{font-size:12px;font-weight:800;letter-spacing:.4px}
.tl-hint{font-size:10.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75}
.tl-tgl{width:22px;height:22px;border:none;background:transparent;cursor:pointer;color:inherit;display:flex;align-items:center;justify-content:center;border-radius:6px}
.tl-tgl:hover{background:rgba(129,140,248,.14)}
.tl-tgl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.tl-wrap.closed .tl-tgl svg{transform:rotate(-90deg)}
.tl-wrap.closed .tl-body{display:none}
.tl-wrap.closed .tl-head{display:none}
/* v4.4: Canva-style pages strip */
.pg-strip{display:flex;align-items:center;gap:10px;padding:8px 12px 4px;overflow-x:auto;scrollbar-width:thin}
.pg-tile{position:relative;flex:none;width:86px;height:52px;border:2px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;transition:width .18s,height .18s,border-color .15s,box-shadow .15s}
.pg-tile:hover{border-color:#818cf8}
.pg-tile.act{border-color:#0ea5e9;box-shadow:0 2px 10px rgba(14,165,233,.25)}
.tl-wrap:not(.closed) .pg-tile.act{width:118px;height:68px}
.pg-tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pg-empty{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,rgba(129,140,248,.07) 0 8px,transparent 8px 16px)}
.pg-num{position:absolute;left:4px;bottom:3px;font-size:9.5px;font-weight:800;background:rgba(15,23,42,.72);color:#fff;border-radius:5px;padding:1px 5px;line-height:1.5;pointer-events:none}
.pg-acts{position:absolute;top:2px;right:2px;display:flex;gap:3px}
.pg-b{width:17px;height:17px;border:none;border-radius:5px;background:rgba(15,23,42,.72);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pg-b:hover{background:#0ea5e9}
.pg-b.pgx:hover{background:#ef4444}
.pg-add{flex:none;width:52px;height:52px;border:2px dashed var(--line);border-radius:8px;background:transparent;color:inherit;font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.pg-add:hover:not(:disabled){border-color:#0ea5e9;color:#0ea5e9}
.pg-add:disabled{opacity:.35;cursor:default}
.tl-addb{font-size:10.5px;font-weight:700;border:1px solid var(--line);background:transparent;border-radius:8px;padding:3px 9px;cursor:pointer;color:inherit}
.tl-addb:hover{border-color:#818cf8;color:#818cf8}
.tl-total{font-size:10.5px;font-weight:800;border:1px solid var(--line);background:transparent;border-radius:8px;padding:3px 9px;cursor:pointer;color:inherit;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-total:hover{border-color:#22d3ee;color:#0891b2}
/* total-duration dialog */
.dur-dlg{position:fixed;inset:0;margin:auto;height:fit-content;border:none;border-radius:16px;padding:18px 18px 15px;width:min(330px,92vw);box-shadow:0 24px 70px rgba(20,30,60,.35);background:var(--panel);color:var(--text)}
.dur-dlg::backdrop{background:rgba(15,20,40,.45);backdrop-filter:blur(3px)}
.dur-dlg h3{font-size:15px;margin-bottom:6px}
.dur-dlg .dd-note{font-size:11.5px;color:var(--muted);line-height:1.45;margin-bottom:12px}
.dur-dlg .dd-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.dur-dlg .dd-row input{flex:1;padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:15px;font-weight:700;background:var(--bg2,#fff);color:inherit}
.dur-dlg .dd-row input:focus{outline:none;border-color:#22d3ee}
.dur-dlg .dd-row span{font-size:12px;color:var(--muted);font-weight:600}
.dur-dlg .dd-btns{display:flex;gap:8px;justify-content:flex-end}
.dur-dlg .dd-btns .btn{padding:7px 15px;font-size:12.5px}
/* v3.8: single-line timeline — sab bars ek hi track pe (sequential timeline hai, overlap hota hi nahi) */
.tl-body{overflow:visible;padding:2px 14px 10px}
.tl-ruler-row{display:block;padding:0 2px}
.tl-ruler{position:relative;height:14px;overflow:hidden;cursor:pointer}
.tl-tick{position:absolute;top:0;height:100%;font-size:9px;opacity:.55;border-left:1px solid var(--line);padding-left:3px;pointer-events:none}
.tl-rowswrap{position:relative;padding:12px 2px 2px}
.tl-track{position:relative;height:34px;background:rgba(148,163,184,.14);border-radius:8px}
.tl-bar{position:absolute;top:3px;bottom:3px;background:linear-gradient(120deg,#38bdf8,#6366f1);border-radius:7px;min-width:18px;cursor:grab;
  display:flex;align-items:center;gap:5px;padding:0 13px 0 8px;touch-action:none;overflow:hidden;
  box-shadow:0 2px 6px rgba(56,116,248,.25);transition:box-shadow .15s}
.tl-bar:active{cursor:grabbing}
.tl-bar.sel{outline:2px solid #22d3ee;outline-offset:1px;box-shadow:0 4px 12px rgba(34,211,238,.35);z-index:2}
.tl-bar.sel::before{content:attr(data-st);position:absolute;top:-15px;left:2px;font-size:9px;font-weight:700;color:var(--text);opacity:.5;pointer-events:none}
.tl-bnm{flex:1;min-width:0;font-size:10px;color:#fff;font-weight:700;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-bd{font-size:9px;color:#fff;font-weight:800;opacity:.92;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-bar.sel::before{color:var(--text)}
.tl-grip{position:absolute;right:0;top:0;bottom:0;width:12px;cursor:ew-resize;background:rgba(255,255,255,.42);border-radius:0 7px 7px 0;touch-action:none}
.tl-grip::after{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:rgba(15,23,42,.35);border-radius:2px}
.tl-playhead{position:absolute;top:14px;bottom:0;width:2px;background:#ef4444;pointer-events:none;z-index:3;box-shadow:0 0 4px rgba(239,68,68,.5)}
/* live duration bubble — trim/move karte waqt finger ke upar, zoom ke saath */
.tl-bubble{position:absolute;top:-8px;z-index:6;transform:translate(-50%,-100%) scale(.7);opacity:0;pointer-events:none;
  background:rgba(15,23,42,.5);color:#fff;font-size:12px;font-weight:800;padding:4px 11px;border-radius:99px;
  white-space:nowrap;backdrop-filter:blur(3px);transition:transform .16s cubic-bezier(.34,1.56,.64,1),opacity .14s;font-variant-numeric:tabular-nums}
.tl-bubble.show{transform:translate(-50%,-100%) scale(1.25);opacity:1}
.tl-bubble[hidden]{display:block;visibility:hidden}
@media (max-width:900px){
  .tl-wrap{margin-bottom:58px}
  .tl-hint{display:none}
  .tl-track{height:38px}
  .tl-bubble{font-size:13px}
}

/* ===== v3.7: selection toolbar (outside canvas) ===== */
.selbar{position:absolute;top:10px;right:64px;z-index:26;display:flex;gap:7px;
  background:#fff;border:1px solid rgba(20,30,60,.14);border-radius:12px;padding:5px 6px;
  box-shadow:0 8px 26px rgba(20,30,60,.16)}
.selbar[hidden]{display:none}
.selbar button{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  font:600 12.5px/1 Inter,system-ui,sans-serif;color:#0f172a;background:#f1f5f9;
  padding:8px 12px;border-radius:8px;transition:background .15s}
.selbar button:hover{background:#e2e8f0}
.selbar button.danger{background:#fee2e2;color:#b91c1c}
.selbar button.danger:hover{background:#fecaca}
@media (max-width:900px){
  .selbar{top:auto;bottom:10px;left:50%;right:auto;transform:translateX(-50%)}
  .selbar button{padding:9px 13px;font-size:13px}
}

/* v3.7.4 admin: trial-block reason tag */
.whyTag{display:inline-block;margin-top:3px;font-size:10.5px;line-height:1.5;padding:1px 7px;border-radius:20px;
  background:#fdeaea;color:#a12d2d;border:1px solid #f6cfcf;white-space:nowrap}

/* ================= v3.8: Canva-style workspace ================= */
/* desktop: inspector docked panel hai — element select karo to smoothly khulta hai, canvas auto-adjust hota hai */
@media (min-width:901px){
  .layout{grid-template-columns:236px 1fr 0px;transition:grid-template-columns .32s cubic-bezier(.22,1,.36,1)}
  .layout:has(.side.open){grid-template-columns:236px 1fr 300px}
  .side{overflow:hidden;opacity:0;pointer-events:none;transition:opacity .22s}
  .side.open{opacity:1;pointer-events:auto}
  .side .pgroup{width:300px}
}
.insp-head{display:flex;align-items:center;justify-content:space-between}
#inspClose{border:none;background:transparent;color:var(--dim);cursor:pointer;font-size:12px;padding:3px 7px;border-radius:6px}
#inspClose:hover{background:rgba(20,30,60,.07);color:var(--text)}
@media (max-width:900px){#inspClose{display:none}}

/* layers floating button */
.layers-fab{position:absolute;top:12px;right:14px;z-index:9;width:40px;height:40px;border-radius:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s,box-shadow .18s;color:var(--acc2)}
.layers-fab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.layers-fab:hover{transform:translateY(-1px);border-color:var(--acc2);box-shadow:0 6px 16px rgba(99,102,241,.2)}
.layers-fab.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(14,165,233,.35)}
.layers-fab.on svg{transform:scale(1.08)}

/* v4.9.9: background popover — fixed position, anchored to the visible bg trigger (#tbBg mobile / #qaBg desktop) via JS */
.bg-pop{position:fixed;z-index:35;width:248px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 44px rgba(20,30,60,.2);padding:10px;opacity:0;pointer-events:none;transform:translateY(8px) scale(.97);transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .18s}
.bg-pop.open{opacity:1;pointer-events:auto;transform:none}
.bg-pop-head{display:flex;align-items:center;gap:6px;padding:2px 4px 8px;font-size:12px;font-weight:700;color:var(--acc2)}
.bg-pop-head svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bg-pop .bg-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:46dvh;overflow-y:auto}
@media(max-width:680px){.bg-pop{width:220px}}

/* layers panel — compact, spring slide-in */
.layers-panel{position:fixed;top:114px;right:14px;z-index:34;width:232px;max-height:min(52dvh,400px);overflow-y:auto;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 44px rgba(20,30,60,.2);padding:9px 9px 6px;
  transform:translateX(18px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.layers-panel.open{transform:none;opacity:1;pointer-events:auto}
.lp-head{display:flex;align-items:center;gap:6px;padding:2px 3px 8px}
.lp-head svg{width:15px;height:15px;stroke:var(--acc2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-head b{font-size:12px;letter-spacing:.02em}
.lp-head .hint{flex:1}
#lpClose{border:none;background:transparent;color:var(--dim);cursor:pointer;font-size:11px;padding:3px 7px;border-radius:6px}
#lpClose:hover{background:rgba(20,30,60,.07);color:var(--text)}
@media (max-width:900px){.layers-panel{top:auto;bottom:66px;right:8px;left:auto;width:236px;max-height:46dvh}}

/* drag-lift: uthaya hua layer file jaisa dikhe */
.el-item.dragging{opacity:.97;position:relative;z-index:8;transform:scale(1.045) rotate(.8deg);
  box-shadow:0 14px 30px rgba(20,30,60,.3);border-color:var(--acc1);background:#fff;cursor:grabbing;transition:box-shadow .15s}

/* ===== fullscreen play mode ===== */
.stage-wrap:fullscreen,.stage-wrap.fsmode{background:#0e1226}
.stage-wrap.fsmode{position:fixed;inset:0;z-index:70}
.stage-wrap:fullscreen .stage-scroll,.stage-wrap.fsmode .stage-scroll{background:#0e1226;background-image:none;padding:18px 18px 84px}
.stage-wrap:fullscreen .tl-wrap,.stage-wrap.fsmode .tl-wrap,
.stage-wrap:fullscreen .layers-fab,.stage-wrap.fsmode .layers-fab,
.stage-wrap:fullscreen .selbar,.stage-wrap.fsmode .selbar,
.stage-wrap:fullscreen .demo-badge,.stage-wrap.fsmode .demo-badge,
.stage-wrap:fullscreen .snd-icon,.stage-wrap.fsmode .snd-icon,
.stage-wrap:fullscreen .bg-pop,.stage-wrap.fsmode .bg-pop{display:none!important}
.stage-wrap:fullscreen .transport,.stage-wrap.fsmode .transport{background:rgba(15,23,42,.72);border-color:rgba(255,255,255,.14)}
.stage-wrap:fullscreen .transport .time,.stage-wrap.fsmode .transport .time{color:#cbd5e1}
.stage-wrap:fullscreen .transport .btn.icon.tbtn,.stage-wrap.fsmode .transport .btn.icon.tbtn{background:rgba(255,255,255,.12);color:#e2e8f0;border-color:transparent}
.stage-wrap:fullscreen #stage,.stage-wrap.fsmode #stage{box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* ===== v4.0: hand & tool picker ===== */
.hand-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.hp-op{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-family:inherit;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s}
.hp-op img{width:34px;height:44px;object-fit:contain;object-position:top;pointer-events:none}
.hp-op span{font-size:9.5px;font-weight:700;color:var(--muted)}
.hp-op:hover{transform:translateY(-2px);border-color:var(--acc2);box-shadow:0 5px 12px rgba(99,102,241,.16)}
.hp-op.on{border-color:var(--acc1);box-shadow:0 0 0 2px rgba(14,165,233,.28);background:#eff8ff}
.hp-op.on span{color:#0369a1}

/* ===== v4.0: canvas inline text editor (v4.16.1: resizable wrapper + chhote corner handles) ===== */
.inline-edit-wrap{position:absolute;z-index:40}
.inline-edit{position:absolute;inset:0;width:100%;height:100%;border:2px dashed #22d3ee;border-radius:10px;padding:8px;
  resize:none;overflow:hidden;line-height:1.28;box-shadow:0 10px 34px rgba(14,165,233,.25);outline:none;box-sizing:border-box}
.ie-h{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #0ea5e9;
  box-shadow:0 1px 4px rgba(14,165,233,.45);z-index:41;touch-action:none;box-sizing:border-box}
.ie-h.nw{left:-6px;top:-6px;cursor:nwse-resize}
.ie-h.se{right:-6px;bottom:-6px;cursor:nwse-resize}
.ie-h.ne{right:-6px;top:-6px;cursor:nesw-resize}
.ie-h.sw{left:-6px;bottom:-6px;cursor:nesw-resize}
@media (pointer:coarse){.ie-h::after{content:'';position:absolute;inset:-8px}} /* mobile: touch area bada, dikhne me chhota hi */

/* ===== v4.0: color picker button in palette ===== */
.sw-pick{position:relative;display:inline-flex}
.sw-pick input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.sw.pickb{display:inline-flex;align-items:center;justify-content:center;
  background:conic-gradient(#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444)}

/* ---- v4.1 ---- */
/* fullscreen center play/pause button */
.fs-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;
  width:78px;height:78px;border-radius:50%;border:2px solid rgba(255,255,255,.7);cursor:pointer;
  background:rgba(15,23,42,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;transition:opacity .3s ease;opacity:1}
.fs-play.fade{opacity:0;pointer-events:none}
.fs-play svg{width:36px;height:36px;fill:#fff}
.fs-play:active{transform:translate(-50%,-50%) scale(.94)}

/* premium font badge in dropdown */
.fontdd-list button{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fontdd-list button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fontdd-list .fpm{flex-shrink:0;display:inline-flex;align-items:center;font-style:normal;padding:0 1px}
.fontdd-list .fpm svg{width:15px;height:15px;fill:#f59e0b;filter:drop-shadow(0 1px 1px rgba(180,83,9,.35))}

/* ---- v4.2: fullscreen = professional video player ---- */
.stage-wrap:fullscreen .stage-scroll,.stage-wrap.fsmode .stage-scroll{padding:0;background:#000;background-image:none}
.stage-wrap:fullscreen .transport,.stage-wrap.fsmode .transport{display:none!important}
.stage-wrap:fullscreen #stage,.stage-wrap.fsmode #stage{border-radius:0;box-shadow:none}
.stage-scroll.nocur,.stage-scroll.nocur #stage{cursor:none}
.fs-bar{position:absolute;left:0;right:0;bottom:0;z-index:9;display:none;align-items:center;gap:10px;
  padding:26px 14px 10px;background:linear-gradient(transparent,rgba(0,0,0,.78));transition:opacity .25s}
.stage-wrap:fullscreen .fs-bar:not([hidden]),.stage-wrap.fsmode .fs-bar:not([hidden]){display:flex}
.fs-bar.fade{opacity:0;pointer-events:none}
.fs-bar button{width:36px;height:36px;border:none;background:transparent;color:#fff;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;border-radius:9px;padding:0}
.fs-bar button:hover{background:rgba(255,255,255,.16)}
#fsPp svg{width:22px;height:22px;fill:#fff}
#fsExit svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fs-bar span{color:#fff;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;flex:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#fsSeek{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.32);outline:none;margin:0;min-width:60px}
#fsSeek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#38bdf8;border:none;box-shadow:0 0 0 3px rgba(56,189,248,.28)}
#fsSeek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#38bdf8;border:none}

/* ================= v4.8 ================= */
/* AI prompt button — topbar highlight */
.btn.ai{background:linear-gradient(135deg,#0ea5e9,#6366f1);border:none;color:#fff;box-shadow:0 4px 16px rgba(99,102,241,.32)}
.btn.ai:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.ai svg{stroke:#fff;fill:none}

/* purane sidebar add-tiles hataye — ab canvas-attached quick-add hai */
.legacy-add{display:none!important}

/* quick-add: desktop = canvas ke left (vertical), mobile = canvas ke upar (horizontal) */
.quick-add{position:absolute;z-index:7;display:flex;flex-direction:column;gap:7px}
.quick-add button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:52px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);cursor:pointer;font-size:9.5px;font-weight:700;box-shadow:0 3px 10px rgba(30,41,59,.10);
  transition:transform .16s,border-color .16s,box-shadow .16s}
.quick-add button svg{width:19px;height:19px;stroke:var(--acc1);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.quick-add button:hover{border-color:var(--acc1);transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,165,233,.18)}
.quick-add button:active{transform:scale(.95)}
/* v4.9.7: sound toggle — bare corner icon, 60% opacity, no box */
.snd-icon{position:absolute;top:14px;right:62px;z-index:9;background:transparent;border:none;cursor:pointer;padding:6px;color:var(--acc2);opacity:.6;transition:opacity .18s,transform .18s;border-radius:8px}
.snd-icon:hover{opacity:1;transform:translateY(-1px)}
.snd-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snd-icon.muted{color:var(--dim);opacity:.5}
@media(max-width:680px){.snd-icon{top:10px;right:58px;padding:5px}.snd-icon svg{width:20px;height:20px}}
/* v4.9.9: desktop Background button in quickAdd (mobile uses tabbar #tbBg instead) */
#qaBg{display:none}
@media(min-width:901px){#qaBg{display:flex}}
@media (max-width:900px){
  .quick-add{flex-direction:row;gap:8px}
  .quick-add button{width:60px;height:40px;flex-direction:row;gap:5px;font-size:10.5px}
  .quick-add button svg{width:16px;height:16px}
}

/* total time — double-click editable, halka 30% visible edit box */
#timeTotal{border:1px dashed currentColor;border-radius:6px;padding:1px 6px;cursor:pointer;opacity:1;position:relative}
#timeTotal{border-color:rgba(100,116,139,.3)}
#timeTotal:hover{border-color:var(--acc1);color:#0891b2}

/* desktop: Shapes / Icons collapsed by default */
.sec-tgl{position:relative;user-select:none}
.tgl-ch{display:none}
@media (min-width:901px){
  .sec-tgl{cursor:pointer;padding-right:22px}
  .sec-tgl:hover{color:#0891b2}
  .tgl-ch{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:15px;height:15px;
    stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
  .sec-tgl.open .tgl-ch{transform:translateY(-50%) rotate(180deg)}
  .dsk-clps{display:none}
  .dsk-clps.open{display:grid}
}

/* layers: double-click rename input */
.nm-edit{width:100%;font:inherit;font-size:12px;font-weight:600;color:var(--text);background:var(--panel);
  border:1px solid var(--acc1);border-radius:6px;padding:2px 6px;outline:none}

/* mobile tabbar undo disabled */
.tabbar button:disabled{opacity:.38;pointer-events:auto}

/* AI prompt modal */
.ai-card{max-width:430px;width:92vw;text-align:left;gap:8px;max-height:88dvh;overflow-y:auto;padding:22px 24px}
.ai-h{margin:0;display:flex;align-items:center;gap:8px;font-size:15.5px;width:100%}
.ai-h svg{stroke:var(--acc2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ai-h button{margin-left:auto;border:none;background:transparent;color:var(--dim);font-size:15px;cursor:pointer;padding:4px 8px;border-radius:8px}
.ai-h button:hover{background:rgba(148,163,184,.15);color:var(--text)}
.ai-note{margin:0;font-size:11.5px;font-weight:500;color:var(--dim);line-height:1.5}
.ai-card .fld{width:100%;margin-bottom:2px}
.ai-card input[type="text"]{width:100%}
.ai-styles{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:5px}
.ai-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--line);background:transparent;cursor:pointer;text-align:left;color:var(--text);
  transition:border-color .15s,background .15s}
.ai-chip b{font-size:11.5px}
.ai-chip span{font-size:9.5px;color:var(--dim);font-weight:500}
.ai-chip:hover{border-color:var(--acc1)}
.ai-chip.on{border-color:var(--acc1);background:rgba(14,165,233,.08);box-shadow:0 0 0 1px var(--acc1) inset}
.ai-tpls{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ai-tpl{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;font-size:10.5px;font-weight:700;
  border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.08);color:#b45309;cursor:pointer;transition:transform .15s,background .15s}
.ai-tpl svg{stroke:#f59e0b;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-tpl:hover{background:rgba(245,158,11,.16);transform:translateY(-1px)}
.ai-out{width:100%;resize:vertical;min-height:86px;font-size:11.5px;line-height:1.55;font-weight:500;color:var(--text);
  background:rgba(148,163,184,.08);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:inherit}
.ai-card .tpl-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.ai-card .tpl-row .hint{font-size:10px}
@media (max-width:540px){
  .ai-styles{grid-template-columns:1fr 1fr}
  .ai-card{padding:18px 16px}
}
/* v4.8: quick-add ke liye reserved space — canvas overlap zero */
@media (min-width:901px){ .stage-scroll{padding-left:78px} }
@media (max-width:900px){
  .stage-scroll{padding-top:58px}
  .stage-scroll.demo-pad{padding-top:96px}
}

/* ===== v4.10: auto-save indicator ===== */
.save-badge{margin-left:6px;font-size:12px;font-weight:600;color:#34d399;opacity:0;transition:opacity .35s;pointer-events:none;white-space:nowrap;align-self:center}
.save-badge.on{opacity:1}
@media (max-width:640px){.save-badge{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:60;background:rgba(16,24,40,.85);padding:3px 10px;border-radius:999px}}

/* ===== v4.12.3: template previews + fullscreen edge-to-edge ===== */
.tile svg.tpl-pv{width:64px;height:36px;flex-shrink:0;border-radius:6px;background:#fff;border:1px solid var(--line,#e2e8f0);padding:1px}
.tile:hover svg.tpl-pv{transform:scale(1.06) rotate(0)}
/* fullscreen: koi padding/reserve nahi — canvas ratio ke saath poora screen bhare (left-right touch) */
.stage-wrap:fullscreen .stage-scroll,.stage-wrap.fsmode .stage-scroll{padding:0!important}

/* ===== v4.18.1: unified template grid — thumb @80% opacity, naam niche alag strip me ===== */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.tpl-grid button{overflow:hidden;display:flex;flex-direction:column;padding:0;border:1px solid var(--line,#d7dce4);border-radius:10px;background:#fff;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s}
.tpl-grid button:hover{border-color:#0ea5e9;transform:translateY(-1px);box-shadow:0 3px 10px rgba(14,165,233,.15)}
.tpl-grid button:hover img{opacity:1}
.tpl-grid button img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.8;pointer-events:none;border-bottom:1px solid var(--line,#d7dce4);transition:opacity .15s;background:#f8fafc}
.tpl-grid button i{display:flex;flex-direction:column;gap:1px;font-style:normal;padding:6px 8px 7px}
.tpl-grid button b{font-size:11.5px;color:#0f172a;line-height:1.25}
.tpl-grid button span{font-size:9.5px;color:#475569;line-height:1.25}

/* ---------- v4.17: mobile topbar overflow fix — Save video button kabhi cut na ho ---------- */
@media (max-width:900px){
  .topbar{gap:6px}
  .topbar-actions{gap:4px;flex-shrink:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .topbar-actions::-webkit-scrollbar{display:none}
  .topbar-actions .btn{padding:7px 8px;font-size:12px;white-space:nowrap}
  .topbar-actions .btn.rec{padding:7px 9px}
}
@media (max-width:480px){
  /* chhoti screen par label "Save" — button poora dikhe, scroll na karna pade */
  .btn.rec i.keep{font-size:0}
  .btn.rec i.keep::after{content:"Save";font-size:12px}
}
@media (max-width:480px){
  .btn.rec svg{display:none}
  .topbar{padding:8px 6px}
}
.fld[hidden]{display:none}

/* ===== v4.19: custom templates + image slots ===== */
/* v4.24: .tpl-card ka max-width:340px is dialog par bahut patla tha — buttons 3 line me
   toot rahe the. Ab poori chaudai + buttons ek hi line me. */
.cus-box{width:min(560px,94vw);max-width:min(560px,94vw);padding:24px 22px}
.cus-box .tpl-row{flex-wrap:wrap;gap:8px}
.cus-box .tpl-row .btn{white-space:nowrap}
#cusTa{width:100%;min-height:150px;font:11px/1.45 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line,#d7dce4);border-radius:8px;padding:8px;resize:vertical;background:#f8fafc;color:#0f172a;box-sizing:border-box}
.hint.err{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:7px 9px;margin:6px 0 0}
.tpl-grid button.cus-add{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border-style:dashed;border-color:#94a3b8;background:#f8fafc;min-height:96px;padding:8px}
.tpl-grid button.cus-add:hover{border-color:#0ea5e9;background:#f0f9ff}
.tpl-grid button.cus-add b{font-size:12px;color:#0369a1}
.tpl-grid button.cus-add span{font-size:9.5px;color:#64748b;text-align:center}
.tpl-grid button.my-tpl{position:relative}
.tpl-grid button.my-tpl canvas{display:block;width:100%;aspect-ratio:16/10;border-bottom:1px solid var(--line,#d7dce4)}
.my-del{position:absolute;top:4px;right:4px;z-index:2;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(15,23,42,.55);color:#fff;font-size:10px;text-decoration:none;font-style:normal;cursor:pointer}
.my-del:hover{background:#dc2626}
.hint.warn{color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 9px;margin:6px 0 0}

/* v4.24: template name/description inputs — textarea ke NEECHE, isliye JSON me scroll karke
   naam badalne ki zaroorat nahi rehti */
.cus-name{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cus-name label{font:600 11px/1.2 var(--ui,system-ui),sans-serif;color:#475569;letter-spacing:.02em}
.cus-name input{width:100%;font:13px/1.4 var(--ui,system-ui),sans-serif;border:1px solid var(--line,#d7dce4);
  border-radius:8px;padding:9px 10px;background:#fff;color:#0f172a;box-sizing:border-box}
.cus-name input::placeholder{color:#94a3b8}
.cus-name input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.15)}
@media (max-width:520px){.cus-name input{font-size:15px}} /* iOS zoom guard */

/* ===== v4.27 brand: header wordmark ka "Vid" hissa gradient me ===== */
.logo b .bVid{
  background:linear-gradient(135deg,#22d3ee,#6366f1);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#6366f1;
}