/* Chhobi Studio — UI */
:root{
  --bg:#17171b; --bg2:#1e1e24; --panel:#232329; --panel2:#2a2a32; --line:#35353f;
  --ink:#e6e6ec; --ink2:#a2a2b0; --ink3:#70707e;
  --acc:#4f8ef7; --acc2:#3a7ae0; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --stage:#121216; --sh:0 10px 34px rgba(0,0,0,.5);
  --tool:52px; --pan:302px; --top:46px; --opt:40px; --stat:26px;
  --r:9px;
}
[data-theme=light]{
  --bg:#f2f3f6; --bg2:#ffffff; --panel:#ffffff; --panel2:#f5f6f9; --line:#dde0e7;
  --ink:#1b1e26; --ink2:#5a616e; --ink3:#8a91a0;
  --stage:#c9ccd4; --sh:0 10px 30px rgba(20,25,40,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink); overflow:hidden;
  font:14px/1.45 'Hind Siliguri','Noto Sans Bengali',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.app{display:grid;grid-template-rows:var(--top) var(--opt) 1fr var(--stat);height:100dvh}
svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
button,input,select,textarea{font:inherit;color:inherit}
.grow{flex:1}
.hidden-c{display:none}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--bg2);border-bottom:1px solid var(--line);min-width:0}
.brand{display:flex;align-items:center;gap:7px;font-size:15px;text-decoration:none;color:var(--ink);padding-right:6px;white-space:nowrap}
.brand b{font-weight:800}
.brand-dot{width:16px;height:16px;border-radius:5px;background:conic-gradient(from 210deg,#f43f5e,#f59e0b,#22c55e,#3b82f6,#a855f7,#f43f5e);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset}
.menubar{display:flex;align-items:center;gap:1px;min-width:0}
.menu{position:relative}
.mbtn{background:none;border:0;padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--ink2);white-space:nowrap}
.mbtn:hover,.menu.open .mbtn{background:var(--panel2);color:var(--ink)}
.mlist{position:absolute;top:calc(100% + 5px);left:0;min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);padding:6px;margin:0;list-style:none;display:none;z-index:60;max-height:70vh;overflow:auto}
.menu.open .mlist{display:block}
.mlist li button{display:flex;width:100%;align-items:center;gap:12px;background:none;border:0;padding:8px 10px;border-radius:7px;cursor:pointer;text-align:start}
.mlist li button:hover{background:var(--acc);color:#fff}
.mlist li button span{flex:1}
.mlist kbd{font:11px/1 ui-monospace,monospace;color:var(--ink3);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:3px 5px}
.mlist li button:hover kbd{color:#fff;background:rgba(255,255,255,.16);border-color:transparent}
.mlist .sep{height:1px;background:var(--line);margin:5px 4px}
.tb-right{margin-inline-start:auto;display:flex;align-items:center;gap:5px}
.tb-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:none;border:0;cursor:pointer;color:var(--ink2)}
.tb-icon:hover{background:var(--panel2);color:var(--ink)}
.tb-icon.danger:hover{background:var(--bad);color:#fff}
.tb-icon:disabled{opacity:.35;cursor:default}
[data-theme=dark] .ic-light,[data-theme=light] .ic-dark{display:none}
.lang-btn{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink2)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink3)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--acc2)}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad);color:#fff}
.btn.big{padding:11px 16px;border-radius:10px}
.btn.wide{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:default}
.link{background:none;border:0;color:var(--acc);cursor:pointer;font-size:12px;padding:2px 4px}

/* ---------- options bar ---------- */
.optionsbar{display:flex;align-items:center;background:var(--bg2);border-bottom:1px solid var(--line);padding:0 10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.opt{display:none;align-items:center;gap:9px;white-space:nowrap;min-height:var(--opt)}
.opt.on{display:flex}
.olabel{color:var(--ink2);font-size:12.5px}
.odiv{width:1px;height:18px;background:var(--line);margin:0 3px;flex:none}
.opt label{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-size:12.5px}
.num{width:66px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.sel{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 6px;max-width:190px}
.sel.wide{width:100%;max-width:none}
.txtin{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;min-width:150px}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.seg button{background:none;border:0;border-radius:6px;padding:4px 10px;cursor:pointer;color:var(--ink2);font-size:12.5px}
.seg button.on{background:var(--acc);color:#fff}
.seg.big button{padding:7px 14px;font-size:13.5px;font-weight:600}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.chk input{accent-color:var(--acc);width:15px;height:15px}
.swatch-lbl input[type=color]{width:30px;height:24px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
input[type=color]{-webkit-appearance:none;appearance:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
input[type=range]{accent-color:var(--acc);width:112px;height:18px}
.opt output{font:12px ui-monospace,monospace;color:var(--ink2);width:32px;text-align:end}
.pick-sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:#000}

/* ---------- workspace ---------- */
.workspace{display:grid;grid-template-columns:var(--tool) 1fr var(--pan);min-height:0}
.toolbar{background:var(--bg2);border-inline-end:1px solid var(--line);padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:3px;overflow:auto}
.tool{position:relative;width:40px;height:38px;border-radius:8px;background:none;border:0;cursor:pointer;color:var(--ink2);display:grid;place-items:center}
.tool:hover{background:var(--panel2);color:var(--ink)}
.tool.on{background:var(--acc);color:#fff}
.tool i{position:absolute;right:3px;bottom:1px;font:9px/1 ui-monospace,monospace;font-style:normal;opacity:.55}
.stage{position:relative;background:var(--stage);overflow:hidden;touch-action:none}
#view{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage.t-move #view{cursor:move}.stage.t-hand #view{cursor:grab}.stage.t-hand.dragging #view{cursor:grabbing}
.stage.t-select #view,.stage.t-crop #view,.stage.t-shape #view{cursor:crosshair}
.stage.t-picker #view{cursor:crosshair}.stage.t-text #view{cursor:text}
.stage.t-zoom #view{cursor:zoom-in}
.stage.t-brush #view,.stage.t-eraser #view,.stage.t-fill #view{cursor:none}
.stage.panning #view{cursor:grabbing !important}

.welcome{position:absolute;inset:0;display:grid;place-items:center;padding:20px;overflow:auto}
.wl-card{max-width:560px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 28px;box-shadow:var(--sh)}
.wl-ic{width:52px;height:52px;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.wl-card h1{margin:12px 0 6px;font-size:26px}
.wl-card p{margin:0 0 18px;color:var(--ink2)}
.wl-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.wl-note{margin-top:18px !important;font-size:12.5px;color:var(--ink3)}
.drop-hint{position:absolute;inset:12px;border:2.5px dashed var(--acc);border-radius:16px;display:none;place-items:center;background:rgba(79,142,247,.12);font-size:20px;font-weight:700;pointer-events:none;z-index:20}
.stage.dropping .drop-hint{display:grid}

/* ---------- panels ---------- */
.panels{background:var(--bg2);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.ptabs{display:flex;border-bottom:1px solid var(--line);padding:4px 4px 0;gap:2px}
.ptab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:0;border-bottom:2px solid transparent;padding:8px 4px;cursor:pointer;color:var(--ink2);font-size:12.5px}
.ptab.on{color:var(--ink);border-bottom-color:var(--acc)}
.pclose{margin:2px}
.pbody{display:none;overflow:auto;padding:10px;flex:1;min-height:0}
.pbody.on{display:block}
.pgroup{border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin-bottom:10px;background:var(--panel)}
.pgh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12.5px;color:var(--ink2)}
.pgh b{color:var(--ink);font-size:13px}
.row{display:flex;gap:8px;align-items:center}
.srow{display:flex;align-items:center;gap:8px;margin:5px 0}
.srow label{flex:0 0 78px;font-size:12.5px;color:var(--ink2);cursor:pointer}
.srow input[type=range]{flex:1;width:auto;min-width:0}
.srow output{font:11.5px ui-monospace,monospace;color:var(--ink2);width:36px;text-align:end;flex:none}
.srow.changed label{color:var(--acc);font-weight:600}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.presets button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 4px;font-size:11.5px;cursor:pointer;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.presets button:hover{border-color:var(--acc);color:var(--ink)}
.presets button.on{background:var(--acc);border-color:var(--acc);color:#fff}

.layer-actions{display:flex;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px;flex-wrap:wrap}
.layer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.layer-item{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer}
.layer-item.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,var(--panel))}
.layer-thumb{width:38px;height:38px;border-radius:6px;flex:none;background-color:#fff;background-image:linear-gradient(45deg,#d8d8de 25%,transparent 25%),linear-gradient(-45deg,#d8d8de 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8d8de 75%),linear-gradient(-45deg,transparent 75%,#d8d8de 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.layer-thumb canvas{max-width:100%;max-height:100%;display:block}
.layer-meta{flex:1;min-width:0}
.layer-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-sub{font-size:11px;color:var(--ink3)}
.layer-vis{color:var(--ink2)}
.layer-item.hidden .layer-name{opacity:.45;text-decoration:line-through}

.hist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hist-list li button{width:100%;text-align:start;background:none;border:0;border-radius:7px;padding:7px 9px;cursor:pointer;color:var(--ink2);font-size:12.5px;display:flex;gap:8px;align-items:center}
.hist-list li button:hover{background:var(--panel2)}
.hist-list li.on button{background:var(--acc);color:#fff}
.hist-list li.future button{opacity:.42}
.hist-list .hn{font:11px ui-monospace,monospace;opacity:.6}

/* ---------- status ---------- */
.statusbar{display:flex;align-items:center;gap:9px;padding:0 10px;background:var(--bg2);border-top:1px solid var(--line);font-size:11.5px;color:var(--ink2);overflow:hidden;white-space:nowrap}
.sdiv{width:1px;height:12px;background:var(--line)}
.stmsg{color:var(--acc)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:16px;backdrop-filter:blur(2px)}
.modal.on{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);width:min(560px,100%);max-height:92dvh;display:flex;flex-direction:column}
.wide-sheet{width:min(880px,100%)}
.sh-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line);font-size:15px}
.sh-body{padding:15px;overflow:auto}
.sh-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:12px 15px;border-top:1px solid var(--line)}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.frow label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink2)}
.frow label.chk{flex-direction:row;align-items:center}
.frow input[type=number],.frow input[type=text]{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:120px}
.frow input[type=color]{width:44px;height:36px;border:1px solid var(--line);border-radius:8px;background:none}
.lockchk{align-self:flex-end;padding-bottom:8px}
.hint{color:var(--ink3);font-size:12px;margin:4px 0}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chips button{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12px;cursor:pointer;color:var(--ink2)}
.chips button:hover{border-color:var(--acc);color:var(--ink)}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:7px;margin-bottom:6px}
.preset-grid button{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px;cursor:pointer;text-align:start;color:var(--ink)}
.preset-grid button:hover{border-color:var(--acc)}
.preset-grid small{display:block;color:var(--ink3);font-size:11px}
.anchor-wrap{display:flex;align-items:center;gap:14px;margin-top:6px}
.anchor{display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px);gap:3px}
.anchor button{background:var(--panel2);border:1px solid var(--line);border-radius:5px;cursor:pointer}
.anchor button.on{background:var(--acc);border-color:var(--acc)}
.ex-body{display:grid;grid-template-columns:250px 1fr;gap:16px}
.ex-prev{display:flex;flex-direction:column;gap:8px}
.ex-canvas{background:var(--panel2);border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;min-height:150px;padding:10px;overflow:hidden}
.ex-canvas canvas{max-width:100%;max-height:220px;display:block;border-radius:4px;
  background-color:#fff;background-image:linear-gradient(45deg,#e2e2e8 25%,transparent 25%),linear-gradient(-45deg,#e2e2e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e2e8 75%),linear-gradient(-45deg,transparent 75%,#e2e2e8 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
.ex-meta{font-size:12px;color:var(--ink2);text-align:center;line-height:1.7}
.ex-meta b{color:var(--ink)}
.fgroup{margin-bottom:13px}
.fgroup .olabel{display:block;margin-bottom:5px}
.name-row input{flex:1;width:auto}
.ext{color:var(--ink3);font:13px ui-monospace,monospace}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.keys div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink2);border-bottom:1px dashed var(--line);padding:4px 0}
.keys kbd{font:11px ui-monospace,monospace;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink)}

.errmsg{font-size:13.5px;line-height:1.75;color:var(--ink)}
.errmsg b{color:var(--ink)}
.errmsg ul{margin:8px 0 0;padding-inline-start:20px}
.errmsg li{margin:5px 0;color:var(--ink2)}
.errinfo{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font:11.5px ui-monospace,monospace;color:var(--ink3);word-break:break-all}
.berr{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:60px;transform:translate(-50%,20px);background:#111;color:#fff;padding:10px 16px;border-radius:24px;font-size:13px;opacity:0;pointer-events:none;transition:.22s;z-index:200;box-shadow:var(--sh);max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.busy{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:300;color:#fff}
.busy.on{display:flex}
.spin{width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.only-mobile{display:none}
.mobile-bar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){ :root{--pan:262px} }
@media (max-width:860px){
  :root{--top:48px;--opt:44px;--stat:0px}
  .only-mobile{display:inline-flex}
  .only-desk{display:none}
  .statusbar{display:none}
  .app{grid-template-rows:var(--top) var(--opt) 1fr}
  .menubar{position:absolute;top:var(--top);inset-inline-start:0;background:var(--panel);border:1px solid var(--line);border-radius:0 0 12px 0;flex-direction:column;align-items:stretch;padding:6px;z-index:70;display:none;box-shadow:var(--sh);min-width:190px}
  .menubar.open{display:flex}
  .menubar .mbtn{text-align:start}
  .mlist{position:static;display:none;box-shadow:none;border:0;background:var(--panel2);margin:2px 0 6px}
  .menu.open .mlist{display:block}
  .workspace{grid-template-columns:1fr}
  .toolbar{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);flex-direction:row;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:5px;z-index:40;max-width:94vw;overflow-x:auto;display:none}
  .toolbar.open{display:flex}
  .panels{position:absolute;left:0;right:0;bottom:0;top:auto;height:56dvh;border:1px solid var(--line);border-radius:16px 16px 0 0;z-index:50;transform:translateY(102%);transition:transform .25s;box-shadow:var(--sh)}
  .panels.open{transform:none}
  .mobile-bar{display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg2);border-top:1px solid var(--line);position:fixed;bottom:0;left:0;right:0;z-index:45;padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bar button{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:7px 2px;color:var(--ink2);cursor:pointer}
  .mobile-bar i{font-style:normal;font-size:10.5px}
  .stage{padding-bottom:56px}
  .app{padding-bottom:0}
  .workspace{margin-bottom:56px}
  .ex-body{grid-template-columns:1fr}
  .ex-canvas canvas{max-height:150px}
  .keys{grid-template-columns:1fr}
  .tb-right .btn span{display:none}
  .brand{font-size:14px}
  .toast{bottom:80px}
}
@media (max-width:420px){ .brand-txt{display:none} .pgtitle{display:none} }