/* TechNext Drip Studio — the app around the canvas. Light only, in the technext.asia system. */
:root{
  --blue:#3167CA; --blue-700:#1E4691; --blue-300:#6FA0F5; --blue-100:#DDE7F8; --blue-050:#EAF0FB;
  --ink:#1F1F3D; --body:#4C4C63; --label:#5C5C73; --muted:#8888A0; --line:#E4E4EC; --paper:#FFFFFF; --alt:#F5F6FA; --well:#E9ECF4;
  --odoo:#714B67; --ok:#137A4A; --ok-050:#E8F5EE; --red:#B3271E; --red-050:#FCEDEC;
  --font-display:"Plus Jakarta Sans",Inter,"Segoe UI",sans-serif;
  --font-body:Inter,"Segoe UI",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(31,31,61,.06),0 10px 28px -18px rgba(31,31,61,.35);
  --r:12px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--alt);color:var(--body);font:400 14px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0;letter-spacing:-.01em}

.app{display:grid;grid-template-rows:60px 1fr;height:100%}
.top{display:flex;align-items:center;gap:10px;padding:0 18px;min-width:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:5}
.top .brand{display:flex;align-items:center;gap:12px}
.top .brand img{height:26px}
.top .brand h1{font-size:16px;font-weight:700;padding-left:12px;border-left:1px solid var(--line)}
.top .sp{flex:1}
.notice{font-size:12.5px;color:#7A5200;background:#FFF4D6;border:1px solid #F3DE9E;border-radius:999px;padding:5px 12px;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.btn:not(.drip *){display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}
.btn:not(.drip *):hover{background:var(--alt);border-color:#D5D8E4}
.btn:not(.drip *):active{transform:scale(.97)}
.btn:not(.drip *).primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn:not(.drip *).primary:hover{background:var(--blue-700);border-color:var(--blue-700)}
.btn:not(.drip *).ghost{border-color:transparent;background:transparent}
.btn:not(.drip *).ghost:hover{background:var(--well)}
.btn:not(.drip *).danger{color:var(--red)}
.btn:not(.drip *).danger:hover{background:var(--red-050);border-color:#F2C9C5}
.btn:not(.drip *) svg{width:16px;height:16px}
.btn:not(.drip *).sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn:not(.drip *).icon{width:30px;padding:0;justify-content:center}

.shell{display:grid;grid-template-columns:232px 1fr;min-height:0}
.shell.editing{grid-template-columns:232px 1fr 360px}

/* category rail */
.rail{background:var(--paper);border-right:1px solid var(--line);overflow:auto;padding:14px 10px 24px}
.rail h2{font:700 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 10px 8px}
.rail h2:first-child{margin-top:4px}
.cat{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;text-align:left;cursor:pointer;color:var(--ink);font-weight:500}
.cat:hover{background:var(--alt)}
.cat.on{background:var(--blue-050);color:var(--blue-700);font-weight:700}
.cat .n{margin-left:auto;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--well);color:var(--label);font:600 11.5px/1.3 var(--font-body);text-align:center;font-variant-numeric:tabular-nums}
.cat.on .n{background:var(--blue);color:#fff}
.cat .n.zero{background:none;color:#B4B6C6}
.cat .dot{width:8px;height:8px;border-radius:50%;background:var(--blue-300);flex:none}
.cat[data-group="Odoo"] .dot{background:var(--odoo)}
.cat[data-group="AI & Nexi"] .dot{background:var(--blue)}
.cat[data-group="TechNext"] .dot{background:#21B799}
.cat[data-group="Industries"] .dot{background:#F2A93B}

/* gallery */
.main{min-width:0;min-height:0;overflow:auto;position:relative}
.gallery{padding:24px 28px 40px}
.gal-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.gal-head h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.gal-head p{margin:4px 0 0;color:var(--label);max-width:70ch}
.gal-head .sp{flex:1}
.grid:not(.drip *){display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);outline:1px solid var(--line);transition:transform .2s var(--ease),box-shadow .2s}
.thumb.r45{aspect-ratio:4/5}
.card:hover .thumb{transform:translateY(-2px);box-shadow:0 2px 6px rgba(31,31,61,.06),0 22px 40px -22px rgba(31,31,61,.45)}
.thumb .drip{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.card .meta{display:flex;align-items:center;gap:8px;padding:0 2px}
.card .meta b{color:var(--ink);font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{flex:none;padding:2px 8px;border-radius:999px;background:var(--well);color:var(--label);font:600 11px/1.5 var(--font-body)}
.card.new .thumb{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#fff 0 12px,#F7F8FC 12px 24px);outline:2px dashed #C9D3EA;box-shadow:none;color:var(--blue-700)}
.card.new .thumb span{display:grid;justify-items:center;gap:8px;font:700 15px/1.3 var(--font-display)}
.card.new .thumb svg{width:34px;height:34px}
.empty{padding:26px;border-radius:14px;background:var(--paper);border:1px dashed #C9D3EA;color:var(--label);max-width:640px}

/* editor */
.editor{display:grid;grid-template-rows:auto 1fr;height:100%;min-height:0}
.ed-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.ed-bar .title{flex:1 1 120px;min-width:0;font:700 15px/1.2 var(--font-display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-bar .sp{display:none}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--well);gap:2px}
.seg button{height:28px;padding:0 10px;border:0;border-radius:8px;background:none;font-weight:600;font-size:12.5px;color:var(--label);cursor:pointer}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(31,31,61,.12)}
.canvas-wrap{position:relative;display:grid;place-items:center;padding:24px 28px 46px;min-height:0;overflow:hidden;
  background:radial-gradient(circle at 1px 1px,#D9DDE8 1px,transparent 1.2px) 0 0/18px 18px,var(--alt)}
.canvas-box{position:relative;box-shadow:0 2px 6px rgba(31,31,61,.08),0 40px 80px -40px rgba(31,31,61,.5);border-radius:6px;overflow:hidden;background:#fff}
.canvas-box .drip{position:absolute;left:0;top:0;transform-origin:0 0}
.canvas-box .L:hover{outline:2px dashed rgba(49,103,202,.45);outline-offset:4px}
.canvas-box.dragging,.canvas-box.dragging .L{cursor:grabbing}
.canvas-box.drop{box-shadow:0 0 0 6px rgba(49,103,202,.4),0 40px 80px -40px rgba(31,31,61,.5)}
.hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;color:var(--muted);background:rgba(255,255,255,.9);padding:4px 12px;border-radius:999px;white-space:nowrap}

/* inspector */
.insp{background:var(--paper);border-left:1px solid var(--line);overflow:auto;min-height:0}
.sec{padding:16px 16px 18px;border-bottom:1px solid var(--line)}
.sec h3{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:12px}
.sec h3 small{margin-left:auto;font:500 11.5px var(--font-body);color:var(--muted)}
.f:not(.drip *){display:grid;gap:5px;margin-bottom:10px;align-content:start}
.f:not(.drip *) input,.f:not(.drip *) select,.f:not(.drip *) textarea{margin:0;box-sizing:border-box}
.f:not(.drip *):last-child{margin-bottom:0}
.f:not(.drip *) > span{font:600 11.5px/1.2 var(--font-body);color:var(--label);letter-spacing:.02em}
.f:not(.drip *) input[type=text],.f:not(.drip *) input[type=number],.f:not(.drip *) select,.f:not(.drip *) textarea{width:100%;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:13.5px}
.f:not(.drip *) textarea{height:auto;min-height:84px;padding:8px 10px;line-height:1.4;resize:vertical}
.f:not(.drip *) textarea.code{font:12px/1.45 ui-monospace,Consolas,monospace;min-height:120px}
.f:not(.drip *) input:focus,.f:not(.drip *) select:focus,.f:not(.drip *) textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,103,202,.15)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.chk{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--blue)}
.help{font-size:12px;color:var(--muted);line-height:1.45;margin:6px 0 0}
.help code{font:11.5px ui-monospace,Consolas,monospace;background:var(--well);padding:1px 5px;border-radius:4px;color:var(--ink)}

.layers{display:grid;gap:4px}
.lrow{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 8px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.lrow:hover{background:var(--alt)}
.lrow.on{background:var(--blue-050);border-color:#C9D8F5}
.lrow .ty{flex:none;width:66px;font:700 11px/1.4 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--blue-700)}
.lrow .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:13px}
.lrow.off .tx,.lrow.off .ty{opacity:.4}
.lrow .btn.icon{height:26px;width:26px}
.add{display:flex;gap:8px;margin-top:10px}
.add select{flex:1}

.confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-top:10px;border-radius:10px;background:var(--red-050);color:var(--red);font-weight:600}

/* dialog */
.dlg{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(31,31,61,.35);padding:16px}
.dlg-card{width:min(560px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--paper);border-radius:16px;box-shadow:0 40px 80px -30px rgba(31,31,61,.6);padding:22px}
.dlg-card h2{font-size:19px;font-weight:800;margin-bottom:4px}
.dlg-card > p{margin:0 0 16px;color:var(--label)}
.tpls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.tpl{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-align:left;cursor:pointer}
.tpl:hover{border-color:#C9D8F5;background:var(--blue-050)}
.tpl.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,103,202,.15)}
.tpl b{color:var(--ink);font-weight:700}
.tpl span{font-size:12.5px;color:var(--label);line-height:1.35}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;box-shadow:0 20px 40px -20px rgba(31,31,61,.7)}

.export-host{position:fixed;left:-20000px;top:0;pointer-events:none}

@media (max-width:1100px){
  .shell.editing{grid-template-columns:1fr 340px}
  .shell.editing .rail{display:none}
}
@media (max-width:760px){
  body{overflow:auto}
  .app{height:auto;min-height:100%}
  .shell,.shell.editing{grid-template-columns:1fr}
  .rail{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .rail form{display:none}
  .top{padding:0 16px}
  .top .btn{height:32px;padding:0 10px;font-size:12.5px}
  #reset{display:none}
  .rail h2{display:none}
  .cat{width:auto;flex:none;white-space:nowrap}
  .shell.editing .rail{display:none}
  .gallery{padding:18px 16px 32px}
  .canvas-wrap{min-height:70vw;padding:16px}
  .insp{border-left:0;border-top:1px solid var(--line)}
  .notice{display:none}
  .top .brand h1{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:760px){.hint{display:none}}

/* ---------- v2: top bar ---------- */
.topacts{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.savestate{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--font-body);color:var(--ok);white-space:nowrap}
.savestate::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.savestate[data-kind="saving"]{color:var(--label)}
.savestate[data-kind="error"]{color:var(--red)}
.savestate[data-kind="readonly"]{color:var(--muted)}
.btn:not(.drip *) svg[fill="currentColor"]{width:15px;height:15px}

/* ---------- v2: element library in the rail ---------- */
.rail-help{margin:-2px 10px 6px;font-size:12px;color:var(--muted)}
.el{display:block;width:100%;padding:7px 10px;border:0;border-radius:8px;background:none;text-align:left;font-weight:500;color:var(--ink);cursor:pointer}
.el:hover{background:var(--blue-050);color:var(--blue-700)}
.el-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 4px}
.el.nexi{display:grid;justify-items:center;gap:2px;padding:6px 2px;border:1px solid var(--line);background:var(--paper);font-size:11px;color:var(--label)}
.el.nexi img{height:46px;width:auto}
.el.nexi:hover{border-color:#C9D8F5}

/* ---------- v2: canvas selection, handles, guides, toolbar ---------- */
.canvas-box .L,.canvas-box .d-copy{cursor:move}
.canvas-box .d-copy:hover{outline:2px dashed rgba(49,103,202,.45);outline-offset:6px}
.canvas-box .ed-sel{outline:calc(3px * var(--inv,1)) solid #3167CA!important;outline-offset:calc(4px * var(--inv,1))}
.canvas-box [contenteditable]{outline:calc(2px * var(--inv,1)) dashed #FFC83D;outline-offset:calc(3px * var(--inv,1));cursor:text;caret-color:#3167CA}
.hdl{position:absolute;z-index:99;width:calc(18px * var(--inv,1) / var(--ls,1));height:calc(18px * var(--inv,1) / var(--ls,1));border-radius:50%;background:#fff;
  border:calc(3px * var(--inv,1) / var(--ls,1)) solid #3167CA;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hdl-se{right:calc(-13px * var(--inv,1) / var(--ls,1));bottom:calc(-13px * var(--inv,1) / var(--ls,1));cursor:nwse-resize}
.hdl-rot{left:50%;top:calc(-42px * var(--inv,1) / var(--ls,1));transform:translateX(-50%);cursor:grab;background:#3167CA}
.hdl-rot::after{content:"";position:absolute;left:50%;top:100%;width:calc(2px * var(--inv,1) / var(--ls,1));height:calc(22px * var(--inv,1) / var(--ls,1));background:#3167CA;transform:translateX(-50%)}
.guides{position:absolute;inset:0;pointer-events:none;z-index:4}
.guides i{position:absolute;background:#FF3D8B}
.guides .gv{width:1px}.guides .gh{height:1px}
.tools{position:absolute;z-index:6;display:flex;align-items:center;gap:2px;padding:4px;border-radius:10px;background:var(--ink);box-shadow:0 12px 26px -12px rgba(31,31,61,.7)}
.tools button,.tools select{height:28px;padding:0 10px;border:0;border-radius:7px;background:none;color:#fff;font:600 12.5px/1 var(--font-body);cursor:pointer;white-space:nowrap}
.tools button:hover{background:rgba(255,255,255,.14)}
.tools button.danger{color:#FF9D93}
.tools select{background:rgba(255,255,255,.12)}
.tools select option{color:var(--ink)}
.pop{position:absolute;z-index:7;width:min(380px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:auto;padding:12px 14px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(31,31,61,.55)}
.pop-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pop-h b{font:700 14px/1 var(--font-display);color:var(--ink);text-transform:capitalize}
.pop .f textarea{min-height:64px}
.pop-f{display:flex;justify-content:flex-end}
.sel-sec{background:#FBFCFF}
.insp details summary{cursor:pointer;font-weight:600;color:var(--label)}

/* ---------- v2: gallery drafts ---------- */
.sec-h{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.sec-h h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.sec-h .sp{flex:1}
.gallery .grid + .sec-h{margin-top:28px}
.card{display:flex;flex-direction:column;gap:10px}
.card .thumb{display:block;width:100%;padding:0;border:0;cursor:pointer}
.draft-act{display:flex;gap:6px;padding:0 2px}
.draft-act .btn{flex:1;justify-content:center}
.empty b{color:var(--ink)}

/* ---------- v2: dialogs ---------- */
.dlg-card.wide{width:min(720px,100%)}
.dlg-card h2{display:flex;align-items:center;gap:8px}
.dlg-card h2 svg{width:20px;height:20px;color:var(--blue)}
.tpls{max-height:44vh;overflow:auto;padding:2px}
.angles{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.angles .chk{font-size:13px}
.angles .chk.dim{opacity:.55}
.est{margin-top:4px;padding:10px 12px;border-radius:10px;background:var(--blue-050);color:var(--blue-700);font-size:13px;line-height:1.5}
.est .muted{color:var(--label)}
.est .warn{margin:8px 0 0;color:#7A5200;font-weight:600}
.gbar{height:8px;border-radius:4px;background:var(--well);overflow:hidden;margin:14px 0 4px}
.gbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#6FA0F5,#3167CA);transition:width .4s var(--ease)}
.usage-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.usage-sum span{padding:12px;border-radius:12px;background:var(--alt);border:1px solid var(--line)}
.usage-sum small{display:block;font:600 11.5px/1.2 var(--font-body);color:var(--label)}
.usage-sum b{display:block;margin-top:6px;font:800 20px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto;max-height:40vh;border:1px solid var(--line);border-radius:10px}
.tbl table{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{position:sticky;top:0;background:var(--alt);font-weight:700;color:var(--label)}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums}
.btn:not(.drip *):disabled{opacity:.5;cursor:not-allowed}
@media (max-width:760px){.usage-sum{grid-template-columns:1fr 1fr}.angles{grid-template-columns:1fr}.savestate{display:none}}

/* ---------- v3 editor ---------- */
.canvas-box .L.locked{pointer-events:none}
.canvas-wrap.zoomed{overflow:auto;place-items:start center}
.marq{position:absolute;z-index:5;border:1.5px solid #3167CA;background:rgba(49,103,202,.1);border-radius:3px;pointer-events:none}
.tools .tl-l{padding:0 8px;color:#B9C4DA;font:600 12px/1 var(--font-body);white-space:nowrap}
.tools button.on{background:rgba(255,255,255,.2)}
.tools button.sw{width:26px;padding:0;display:grid;place-items:center}
.tools button.sw::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.tools svg{display:block}
.ctx{position:fixed;z-index:80;min-width:200px;padding:6px;border-radius:12px;background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(31,31,61,.5)}
.ctx button{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:none;text-align:left;font:500 13.5px/1.2 var(--font-body);color:var(--ink);cursor:pointer}
.ctx button:hover{background:var(--alt)}
.ctx button.danger{color:var(--red)}
.design .chips{display:flex;flex-wrap:wrap;gap:5px}
.design .chips button{height:28px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:600 12px/1 var(--font-body);color:var(--label);cursor:pointer}
.design .chips button:hover{border-color:#C9D8F5;color:var(--blue-700)}
.design .chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.design .pals{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pal-sw{width:30px;height:30px;border-radius:50%;border:2px solid #fff;cursor:pointer;box-shadow:0 0 0 1px var(--line);background:radial-gradient(circle at 25% 30%,var(--a) 0 35%,transparent 36%),radial-gradient(circle at 75% 35%,var(--b) 0 35%,transparent 36%),radial-gradient(circle at 50% 80%,var(--c) 0 40%,transparent 41%),var(--base)}
.pal-sw.on{box-shadow:0 0 0 2px var(--blue)}
.design .btn svg{width:14px;height:14px}
textarea.bad{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(179,39,30,.15)!important}
.starters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:52vh;overflow:auto;padding:2px}
.stc{display:grid;gap:4px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-align:left;cursor:pointer}
.stc:hover{border-color:#C9D8F5;background:var(--blue-050)}
.stc-t{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--alt)}
.stc-t .drip{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.stc b{font:700 13px/1.25 var(--font-display);color:var(--ink)}
.stc small{font-size:11.5px;line-height:1.35;color:var(--label)}
.el-grid.props{grid-template-columns:repeat(4,1fr)}
.sel:not(.drip *){height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:500 12.5px var(--font-body)}
.gal-head .sel{height:36px;border-radius:10px}
.card .meta .btn.save{margin-left:auto;flex:none;gap:5px}
.card .meta .btn.save svg{width:14px;height:14px}
.btn:not(.drip *) svg{width:16px;height:16px;flex:none}
.chips.accs{gap:8px}
.acc-sw{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.acc-sw.on{box-shadow:0 0 0 2px var(--blue)}
.savestate[data-kind="toobig"]{color:var(--red)}
.el.prop svg{width:44px;height:44px;display:block}
.el.prop span{font-size:10px}

/* v7: bigger handles, a width handle, lifted elements while dragging, background generation */
.hdl{width:calc(22px * var(--inv,1) / var(--ls,1));height:calc(22px * var(--inv,1) / var(--ls,1))}
.hdl-se{right:calc(-15px * var(--inv,1) / var(--ls,1));bottom:calc(-15px * var(--inv,1) / var(--ls,1))}
.hdl-e{right:calc(-11px * var(--inv,1) / var(--ls,1));top:50%;width:calc(14px * var(--inv,1) / var(--ls,1));height:calc(36px * var(--inv,1) / var(--ls,1));border-radius:calc(7px * var(--inv,1) / var(--ls,1));transform:translateY(-50%);cursor:ew-resize}
.canvas-box .L.lift{z-index:9990!important}
.genpill{display:inline-flex;align-items:center;gap:10px;position:relative;height:32px;padding:0 12px;border-radius:10px;background:var(--blue-050);color:var(--blue-700);font:600 12.5px var(--font-body);overflow:hidden;max-width:min(52vw,520px)}
.genpill i{position:absolute;left:0;top:0;bottom:0;background:rgba(49,103,202,.16);transition:width .4s}
.genpill span{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genpill button{position:relative;flex:none;height:22px;padding:0 8px;border:0;border-radius:6px;background:#fff;color:var(--blue-700);font:600 11.5px var(--font-body);cursor:pointer}
.genbanner{position:fixed;left:50%;top:14px;z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(92vw,760px);padding:10px 12px 10px 16px;border-radius:14px;background:var(--ink);color:#fff;font:600 13.5px/1.35 var(--font-body);box-shadow:0 24px 50px -20px rgba(31,31,61,.7);animation:bannerIn .35s var(--ease)}
.genbanner svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:#FFC83D}
.genbanner.err{background:#B3271E}
.genbanner .btn.ghost{color:#fff;border-color:transparent}
.genbanner .btn.ghost:hover{background:rgba(255,255,255,.14)}
@keyframes bannerIn{from{transform:translate(-50%,-20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
/* selection handles sit in an overlay over the canvas: never clipped, always on top */
.hdls{position:absolute;inset:0;pointer-events:none;z-index:7}
.hdls .hdl{position:absolute;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #3167CA;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hdls .hdl-se{cursor:nwse-resize}
.hdls .hdl-cw{border-radius:6px;cursor:ew-resize}
.hdls .hdl-e{width:14px;height:34px;border-radius:7px;cursor:ew-resize}
.hdls .hdl-rot{background:#3167CA;cursor:grab}
.hdls .hdl-rot::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:26px;background:#3167CA;transform:translateX(-50%)}
.canvas-box.dragging ~ .hdls{opacity:.9}

/* v8: save queue pill and gallery selection */
.genpill.save{background:#E6F5EC;color:#1B6B3A}
.genpill.save i{background:rgba(27,107,58,.16)}
.genpill.save button{color:#1B6B3A}
.card{position:relative}
.card .pick{position:absolute;left:10px;top:10px;z-index:3;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;box-shadow:0 2px 8px rgba(31,31,61,.28);cursor:pointer}
.card .pick input{width:17px;height:17px;margin:0;cursor:pointer;accent-color:var(--blue-700)}
.card.picked .thumb{outline:3px solid var(--blue-700)}
.pickbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 16px;padding:10px 12px;border-radius:12px;background:var(--blue-050);font:600 13px var(--font-body);color:var(--ink)}
.pickbar .sp{flex:1}
.pickbar .btn.ghost{color:var(--blue-700)}


/* v9: Canva-style selection frame, handles and the full context menu */
.canvas-box .ed-sel{outline:none!important}
.canvas-box.multi .ed-sel{outline:calc(2px * var(--inv,1)) solid rgba(49,103,202,.55)!important;outline-offset:calc(3px * var(--inv,1))}
.canvas-box .L{cursor:default}
.canvas-box .L:hover,.canvas-box .d-copy:hover{cursor:move}
.canvas-box .L:hover{outline:calc(1.5px * var(--inv,1)) dashed rgba(49,103,202,.5);outline-offset:calc(3px * var(--inv,1))}
.hdls{overflow:visible}
.hdls .hdl{width:auto;height:auto;border-radius:0;background:none;border:0;box-shadow:none}
.selframe{position:absolute;pointer-events:none;border:2px solid #3167CA;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.75)}
.selframe.multi{border-style:dashed}
.selframe .hdl{position:absolute;pointer-events:auto;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:4px;background:#fff;border:2px solid #3167CA;box-shadow:0 1px 4px rgba(31,31,61,.3);transition:transform .12s}
.selframe .hdl::before{content:"";position:absolute;inset:-9px}
.selframe .hdl:hover{transform:scale(1.25)}
.selframe .h-nw{left:0;top:0}.selframe .h-ne{left:100%;top:0}.selframe .h-se{left:100%;top:100%}.selframe .h-sw{left:0;top:100%}
.selframe .h-e,.selframe .h-w{top:50%;width:10px;height:30px;margin:-15px 0 0 -5px;border-radius:5px}
.selframe .h-e{left:100%}.selframe .h-w{left:0}
.selframe.nowidth .h-e,.selframe.nowidth .h-w,.selframe.copy .h-nw,.selframe.copy .h-ne,.selframe.copy .h-se,.selframe.copy .h-sw,.selframe.copy .h-rot,.selframe.cam .h-rot,.selframe.cam .h-e,.selframe.cam .h-w{display:none}
.selframe .h-rot{left:50%;top:calc(100% + 28px);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:grid;place-items:center;color:#3167CA;cursor:grab}
.selframe .h-rot:hover{transform:scale(1.12)}
.selframe .h-rot svg{width:14px;height:14px}
.selframe .h-rot::after{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:15px;background:#3167CA;transform:translateX(-50%)}
.selframe .rot-badge{position:absolute;left:50%;top:calc(100% + 50px);transform:translateX(-50%) rotate(calc(-1 * var(--rot,0deg)));padding:3px 8px;border-radius:6px;background:#1F1F3D;color:#fff;font:600 12px var(--font-body);white-space:nowrap;pointer-events:none}
.canvas-box.dragging ~ .hdls .selframe .hdl{opacity:.35}
.canvas-box.dragging ~ .hdls .selframe .rot-badge{opacity:1}
.ctx{min-width:236px;padding:6px;font:500 13.5px/1.2 var(--font-body);user-select:none}
.ctx hr{margin:5px 6px;border:0;border-top:1px solid var(--line)}
.ctx .it{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px 8px 30px;border:0;border-radius:8px;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.ctx .it.head{color:var(--muted);font-size:12px;cursor:default}
.ctx .it>span{flex:1}
.ctx .it kbd{font:500 11.5px var(--font-body);color:var(--muted)}
.ctx .it.on::before{content:"";position:absolute;left:11px;top:50%;width:6px;height:10px;border:solid var(--blue-700);border-width:0 2px 2px 0;transform:translateY(-60%) rotate(45deg)}
.ctx .it .sw{position:absolute;left:9px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px rgba(31,31,61,.2)}
.ctx .it.on .sw{box-shadow:0 0 0 2px var(--blue-700)}
.ctx .it.on .sw~span{font-weight:600}
.ctx .it.on:has(.sw)::before{display:none}
.ctx button.it:hover,.ctx .it.sub:hover>.lab,.ctx .it.sub.open>.lab{background:var(--alt)}
.ctx .it.danger{color:var(--red)}
.ctx .it.sub{padding:0;display:block;cursor:default}
.ctx .it.sub>.lab{display:flex;align-items:center;width:100%;padding:8px 10px 8px 30px;border:0;border-radius:8px;background:none;text-align:left;font:inherit;color:var(--ink);cursor:default}
.ctx .it.sub>.lab .arr{margin-left:auto;color:var(--muted);font-size:16px;line-height:1}
.ctx .ctx-sub{display:none;position:absolute;left:calc(100% - 4px);top:-6px;z-index:1;min-width:210px;max-height:min(70vh,540px);overflow:auto;padding:6px;border-radius:12px;background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(31,31,61,.5)}
.ctx .it.sub:hover>.ctx-sub,.ctx .it.sub.open>.ctx-sub{display:block}
.ctx.flip .ctx-sub{left:auto;right:calc(100% - 4px)}
.ctx .ctx-sub.up{top:auto;bottom:-6px}

/* v10: no floating toolbar, no native drag or text selection on the canvas, one outline on the selected element */
.tools{display:none!important}
.canvas-wrap{-webkit-user-select:none;user-select:none}
.canvas-box img,.canvas-box svg{-webkit-user-drag:none;user-select:none}
.canvas-box [contenteditable]{-webkit-user-select:text;user-select:text}
.canvas-box .L.ed-sel:hover,.canvas-box .d-copy.ed-sel:hover,.canvas-box.dragging .L:hover{outline:none!important}

/* v11: save destination (Google Drive / this computer) and the In Drive link */
.sel.dest:not(.drip *){max-width:250px}
.gal-head .sel.dest:not(.drip *){height:36px;border-radius:10px}
.card .meta .indrive{margin-left:auto;font:600 12px/1 var(--font-body);color:var(--ok);text-decoration:none;padding:6px 8px;border-radius:7px;background:var(--ok-050);white-space:nowrap}
.card .meta .indrive:hover{text-decoration:underline}
.card .meta .indrive + .save{margin-left:6px}