/* oneco studio: visual interface builder */
:root{
  --bg:#080d1c; --bg2:#0d1229; --panel:#11163a; --panel2:#171d48; --line:rgba(180,179,211,.13); --line2:rgba(180,179,211,.24);
  --accent:#a78bfa; --accent2:#c4b5fd; --soft:rgba(167,139,250,.14); --text:#f5f5fa; --text2:#b4b3d3; --text3:#8e8db2;
  --ok:#5fe0b7; --warn:#ffc46b; --bad:#ff8fb1;
  --e:cubic-bezier(.22,.8,.24,1); --top:56px; --lw:280px; --rw:300px;
  --body:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font:400 14px/1.45 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

.app{display:grid;grid-template-columns:var(--lw) 1fr var(--rw);grid-template-rows:var(--top) 1fr;height:100vh;height:100dvh}
.top{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:rgba(13,18,41,.92);backdrop-filter:blur(10px);z-index:20}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 16px var(--body);letter-spacing:-.02em;flex:none}
.brand svg{width:34px;height:18px}
.brand span{color:var(--text2);font-weight:600}
.pname{min-width:80px;width:200px;flex:0 1 200px;background:transparent;border:1px solid transparent;border-radius:10px;padding:7px 10px;font-weight:700}
.pname:hover{border-color:var(--line2)}.pname:focus{outline:none;border-color:var(--accent);background:var(--bg2)}
.grp{display:flex;align-items:center;gap:4px}
.grp.topacts{margin-left:auto;gap:8px}
.ib{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--text2);transition:background .15s,color .15s}
.ib:hover{background:var(--panel2);color:var(--text)}
.ib:disabled{opacity:.35;cursor:default;background:none}
.ib svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zoom span{min-width:46px;text-align:center;font:500 12px var(--mono);color:var(--text2)}
.seg{display:flex;padding:3px;border-radius:12px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{width:38px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--text3)}
.seg button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.seg button[aria-pressed="true"]{background:var(--soft);color:var(--accent2);box-shadow:inset 0 0 0 1px rgba(167,139,250,.4)}
.saved{font:500 11px var(--mono);color:var(--text3);white-space:nowrap}
.tb{height:36px;padding:0 14px;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);font-weight:600;white-space:nowrap;transition:background .15s}
.tb:hover{background:var(--panel2)}
.tb.pri{background:var(--accent);color:#0b0d1f;box-shadow:0 6px 20px -8px rgba(167,139,250,.8)}
.tb.pri:hover{background:var(--accent2)}
.tb:disabled{opacity:.6;cursor:progress}
.menu-w{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;padding:6px;border-radius:14px;background:#151a40;box-shadow:inset 0 0 0 1px var(--line2),0 20px 40px -10px #000;display:none;z-index:50;max-height:70dvh;overflow:auto}
.menu.open{display:block}
.menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:9px;text-align:left;color:var(--text2)}
.menu button:hover{background:var(--panel2);color:var(--text)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 2px}
.menu .lbl{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:6px 10px 2px}
.menu small{color:var(--text3);font:500 10.5px var(--mono)}

/* panels */
.left,.right{background:var(--bg2);overflow:auto;z-index:10}
.left{border-right:1px solid var(--line)}
.right{border-left:1px solid var(--line)}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:8px;position:sticky;top:0;background:var(--bg2);z-index:2;border-bottom:1px solid var(--line)}
.tabs button{padding:8px 4px;border-radius:9px;font-size:12px;font-weight:600;color:var(--text3)}
.tabs button[aria-selected="true"]{background:var(--soft);color:var(--text)}
.pane{padding:12px}
.hint{font-size:12px;color:var(--text3);margin-bottom:10px}
.pal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pal-item{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);cursor:grab;user-select:none;touch-action:none;transition:box-shadow .15s,transform .15s var(--e);text-align:left}
.pal-item:hover{box-shadow:inset 0 0 0 1px rgba(167,139,250,.5);transform:translateY(-1px)}
.pal-item:active{cursor:grabbing}
.pal-item .pi{width:100%;height:34px;border-radius:8px;background:var(--bg);display:grid;place-items:center;color:var(--accent2)}
.pal-item .pi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pal-item span{font-size:12px;font-weight:600;color:var(--text2)}
.ghost{position:fixed;z-index:200;pointer-events:none;padding:10px 14px;border-radius:12px;background:var(--accent);color:#0b0d1f;font-weight:700;font-size:13px;box-shadow:0 14px 30px -8px rgba(0,0,0,.7);transform:translate(-50%,-50%)}

/* stage + canvas */
.stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0,#141a42,var(--bg) 70%)}
.cv-wrap{position:absolute;inset:0;overflow:auto;padding:40px;touch-action:pan-x pan-y}
.cv-size{position:relative;margin:0 auto}
.cv{position:absolute;left:0;top:0;background:#0f1430;border-radius:14px;box-shadow:0 0 0 1px var(--line2),0 40px 80px -40px #000;transform-origin:top left;
  background-image:radial-gradient(rgba(180,179,211,.09) 1px,transparent 1px);background-size:16px 16px}
.cv.pv{background-image:none}
.empty{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;display:grid;gap:6px;color:var(--text3);pointer-events:none;max-width:320px}
.empty b{color:var(--text2);font-size:16px}
.guide{position:absolute;background:var(--bad);z-index:9999;pointer-events:none}
.guide.v{width:1px;top:0;bottom:0}.guide.h{height:1px;left:0;right:0}

/* elements on canvas */
.el{position:absolute;touch-action:none;user-select:none}
.el .in{width:100%;height:100%;overflow:hidden;border-radius:var(--r,12px);background:var(--bgc,transparent);color:var(--fc,var(--text));padding:var(--pad,0px);font-size:var(--fs,14px);font-weight:var(--fw,400);line-height:var(--lh,1.4);text-align:var(--ta,left);border:var(--bd,0);box-shadow:var(--sh,none)}
.el.sel{outline:2px solid var(--accent);outline-offset:2px;z-index:9000!important}
.el:not(.sel):hover{outline:1px dashed rgba(167,139,250,.55);outline-offset:2px}
.cv.pv .el{outline:none!important;cursor:default}
.el.anim{animation:pop .28s var(--e)}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.hd{position:absolute;width:14px;height:14px;border-radius:4px;background:#fff;box-shadow:0 0 0 2px var(--accent);display:none;z-index:2}
.el.sel .hd{display:block}
.hd.tl{left:-8px;top:-8px;cursor:nwse-resize}.hd.tr{right:-8px;top:-8px;cursor:nesw-resize}.hd.bl{left:-8px;bottom:-8px;cursor:nesw-resize}.hd.br{right:-8px;bottom:-8px;cursor:nwse-resize}
.hd.l{left:-8px;top:calc(50% - 7px);cursor:ew-resize}.hd.r{right:-8px;top:calc(50% - 7px);cursor:ew-resize}.hd.t{top:-8px;left:calc(50% - 7px);cursor:ns-resize}.hd.b{bottom:-8px;left:calc(50% - 7px);cursor:ns-resize}
.cv.pv .hd{display:none!important}
.el .badge{position:absolute;left:0;top:-22px;font:500 10px var(--mono);color:var(--accent2);background:var(--bg);padding:2px 6px;border-radius:6px;white-space:nowrap;display:none}
.el.sel .badge{display:block}
.cv.pv .badge{display:none!important}
.el .act{position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--warn);color:#0b0d1f;font:800 11px var(--body);display:grid;place-items:center}
.cv.pv .el .act{display:none}

/* element visuals */
.x-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;font-weight:700;border-radius:inherit}
.x-btn.primary{background:var(--accent);color:#0b0d1f}
.x-btn.secondary{box-shadow:inset 0 0 0 1px var(--line2);color:var(--text)}
.x-btn.ghost{color:var(--accent2)}
.x-btn.danger{background:#ff6f9a;color:#fff}
.cv.pv .x-btn{cursor:pointer}.cv.pv .x-btn:active{transform:scale(.97)}
.x-h{font-weight:800;letter-spacing:-.02em}
.x-card{display:flex;flex-direction:column;gap:8px;height:100%}
.x-card .ic{width:36px;height:36px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--accent2);font-size:18px}
.x-card b{font-size:1.1em}.x-card p{color:var(--text2);font-size:.92em}
.x-table{width:100%;border-collapse:collapse;font-size:.9em}
.x-table th{text-align:left;font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:8px 10px;border-bottom:1px solid var(--line2)}
.x-table td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--text2)}
.x-chart{display:flex;flex-direction:column;height:100%;gap:8px}
.x-chart b{font-size:.95em}
.x-chart svg{flex:1;width:100%;min-height:0}
.x-list{display:grid;gap:6px}
.x-list div{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04)}
.x-list div::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.x-field{display:grid;gap:6px}
.x-field label{font-size:.82em;color:var(--text2)}
.x-field .f{height:40px;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line2);display:flex;align-items:center;padding:0 12px;color:var(--text3)}
.x-form{display:flex;flex-direction:column;gap:10px;height:100%}
.x-form .s{margin-top:auto;height:40px;border-radius:10px;background:var(--accent);color:#0b0d1f;font-weight:700;display:grid;place-items:center}
.x-search{height:100%;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:inherit;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line2);color:var(--text3)}
.x-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;height:100%}
.x-chips span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);font-size:.88em}
.x-chips span.on{background:var(--accent);color:#0b0d1f;box-shadow:none}
.x-drop{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-radius:inherit;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line2)}
.x-side{height:100%;display:flex;flex-direction:column;gap:4px;padding:12px;background:rgba(255,255,255,.03);border-radius:inherit}
.x-side div{padding:10px 12px;border-radius:10px;color:var(--text2)}
.x-side div.on{background:var(--soft);color:var(--text)}
.x-side .lg{font-weight:800;color:var(--text);margin-bottom:8px}
.x-bnav{height:100%;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,.04);border-radius:inherit}
.x-bnav div{display:grid;justify-items:center;gap:3px;font-size:.78em;color:var(--text3)}
.x-bnav div i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 2px currentColor}
.x-bnav div.on{color:var(--accent2)}
.x-modal{height:100%;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:inherit;background:#171d48;box-shadow:0 30px 60px -20px #000,inset 0 0 0 1px var(--line2)}
.x-modal b{font-size:1.1em}.x-modal p{color:var(--text2)}
.x-modal .s{margin-top:auto;align-self:flex-end;padding:9px 16px;border-radius:10px;background:var(--accent);color:#0b0d1f;font-weight:700}
.x-tabs{height:100%;display:flex;gap:4px;align-items:center;padding:4px;border-radius:inherit;background:rgba(255,255,255,.04)}
.x-tabs span{flex:1;text-align:center;padding:8px;border-radius:9px;color:var(--text2);font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-tabs span.on{background:var(--panel2);color:var(--text)}
.cv.pv .x-tabs span,.cv.pv .x-chips span,.cv.pv .x-bnav div,.cv.pv .x-side div{cursor:pointer}
.x-kpi{display:flex;flex-direction:column;justify-content:center;height:100%;gap:4px}
.x-kpi span{color:var(--text2);font-size:.85em}.x-kpi b{font-size:1.8em;letter-spacing:-.03em}.x-kpi i{font-style:normal;color:var(--ok);font-size:.85em}
.x-img{height:100%;border-radius:inherit;background:linear-gradient(135deg,#2a2170,#123f6e);display:grid;place-items:center;color:rgba(255,255,255,.65);font-size:.85em}
.x-div{height:100%;display:flex;align-items:center}.x-div i{height:1px;width:100%;background:var(--line2)}
.x-alert{height:100%;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:inherit}
.x-alert.info{background:rgba(111,180,255,.1);box-shadow:inset 0 0 0 1px rgba(111,180,255,.35)}
.x-alert.ok{background:rgba(95,224,183,.1);box-shadow:inset 0 0 0 1px rgba(95,224,183,.35)}
.x-alert.warn{background:rgba(255,196,107,.1);box-shadow:inset 0 0 0 1px rgba(255,196,107,.35)}
.x-alert.error{background:rgba(255,143,177,.1);box-shadow:inset 0 0 0 1px rgba(255,143,177,.35)}
.x-prod{display:flex;flex-direction:column;gap:8px;height:100%}
.x-prod .ph{flex:1;border-radius:10px;background:linear-gradient(135deg,#3a2d9a,#1a1e45);min-height:0}
.x-prod b{font-size:.95em}.x-prod span{color:var(--accent2);font-weight:700}
.x-prod .s{height:36px;border-radius:10px;background:var(--accent);color:#0b0d1f;font-weight:700;display:grid;place-items:center;font-size:.88em;flex:none}
.x-emp{display:flex;align-items:center;gap:12px;height:100%}
.x-emp i{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#a78bfa,#3a2d9a);flex:none}
.x-emp b{display:block}.x-emp span{color:var(--text2);font-size:.88em}
.x-order{display:flex;flex-direction:column;gap:6px;height:100%}
.x-order .r{display:flex;justify-content:space-between;align-items:center}
.x-order .st{padding:3px 10px;border-radius:999px;font:500 11px var(--mono);background:rgba(255,196,107,.12);color:var(--warn)}
.x-order p{color:var(--text2);font-size:.88em}
.x-stats{display:flex;gap:10px;height:100%}
.x-stats div{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.04);min-width:0}
.x-stats span{color:var(--text2);font-size:.82em}.x-stats b{font-size:1.4em}

/* right panel: properties */
.rhead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg2);z-index:2}
#closeProps{display:none}
.props-empty{padding:18px 14px;color:var(--text3)}
.sec{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.sec h4{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text3)}
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.row.two{grid-template-columns:1fr 1fr}
.fld{display:grid;gap:4px;min-width:0}
.fld>span{font-size:11.5px;color:var(--text2)}
.fld input,.fld select,.fld textarea{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:7px 9px;font-size:13px}
.fld input[type=color]{padding:2px;height:34px}
.fld textarea{min-height:64px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.chk{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--text2)}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.vis{display:flex;gap:14px;flex-wrap:wrap}
.mini{display:flex;gap:6px;flex-wrap:wrap}
.mini button{padding:6px 10px;border-radius:8px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--text2)}
.mini button:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.mini button.danger{color:var(--bad)}

/* templates, products, notes */
.tpls{display:grid;gap:10px}
.tpl{text-align:left;border-radius:14px;padding:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:6px;transition:box-shadow .15s}
.tpl:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.tpl .th{height:84px;border-radius:9px;background:var(--bg);position:relative;overflow:hidden}
.tpl .th i{position:absolute;border-radius:3px;background:rgba(167,139,250,.35)}
.tpl .th i.k{background:rgba(255,255,255,.12)}
.tpl b{font-size:13px}.tpl span{font-size:11.5px;color:var(--text3)}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font:500 12px var(--mono);color:var(--text2)}
.pchip svg{width:15px;height:15px;color:var(--accent2)}
.pchip svg *{animation:none!important}
.pchip[aria-pressed="true"]{background:var(--soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.schema{margin-top:12px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.schema svg{width:100%;height:auto}
.schema .nd{cursor:pointer}
.schema .nd circle{fill:#171d48;stroke:var(--line2);stroke-width:1.5}
.schema .nd.pick circle{stroke:var(--warn);stroke-width:2.5}
.schema .nd text{fill:var(--text);font:600 10px var(--mono);text-anchor:middle;pointer-events:none}
.schema line{stroke:var(--accent);stroke-width:2}
.links{display:grid;gap:6px;margin-top:10px}
.lnk{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;padding:8px;border-radius:10px;background:var(--panel)}
.lnk b{font:600 11.5px var(--mono)}
.lnk input{grid-column:1/-1;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;font-size:12px}
.sub{font-size:12px;color:var(--text3);margin:8px 0}
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.qchips button{padding:6px 10px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--text2);text-align:left}
.qchips button:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.notes{width:100%;min-height:200px;background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:10px;resize:vertical}

/* context toolbar */
.ctx{position:fixed;z-index:60;display:flex;gap:2px;padding:4px;border-radius:12px;background:#151a40;box-shadow:inset 0 0 0 1px var(--line2),0 12px 30px -8px #000}
.ctx button{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--text2)}
.ctx button:hover{background:var(--panel2);color:var(--text)}
.ctx button.danger:hover{color:var(--bad)}
.ctx svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* overlays */
.ov{position:fixed;inset:0;z-index:100;background:rgba(4,6,16,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.dlg{width:min(980px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:22px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2),0 40px 80px -30px #000;padding:24px;animation:rise .3s var(--e)}
@keyframes rise{from{transform:translateY(12px);opacity:0}}
.dlg.sm{width:min(480px,100%)}
.dlg h2{font:800 22px var(--body);letter-spacing:-.02em}
.dlg h3{font:700 15px var(--body);margin:18px 0 10px}
.dlg .lead{color:var(--text2);margin:6px 0 18px}
.dlg .cols{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.dlg .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px}
.startgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.bpv{border-radius:14px;background:#0f1430;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px var(--line)}
.bpv .cv{position:absolute;box-shadow:none}
.blist{display:grid;gap:8px;font-size:13px}
.blist h4{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-top:8px;display:flex;justify-content:space-between;align-items:center}
.blist .it{padding:8px 10px;border-radius:10px;background:var(--panel)}
.blist .it small{color:var(--text3);display:block}
.blist .edit{color:var(--accent2);font:600 11px var(--body);text-transform:none;letter-spacing:0;text-decoration:underline}
.sfrm{display:grid;gap:12px}
.sfrm label{display:grid;gap:5px;font-size:12px;color:var(--text2)}
.sfrm input,.sfrm textarea{background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;font-size:16px}
.sfrm input:focus,.sfrm textarea:focus{outline:none;border-color:var(--accent)}
.sfrm .consent{grid-template-columns:auto 1fr;align-items:start;gap:10px;font-size:13px}
.sfrm .consent input{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;padding:0}
.sfrm .err{color:var(--bad);font-size:13px;min-height:1em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.okbox{text-align:center;padding:16px 0}
.okbox .id{display:inline-block;margin:12px 0;padding:8px 14px;border-radius:10px;background:var(--soft);font:600 16px var(--mono);color:var(--accent2)}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.pv-modal{position:fixed;inset:0;z-index:120;background:rgba(4,6,16,.6);display:grid;place-items:center;padding:16px}
.pv-modal .box{width:min(420px,100%);border-radius:18px;background:#171d48;padding:22px;box-shadow:0 30px 60px -20px #000;display:grid;gap:10px;animation:rise .25s var(--e)}
.pv-modal .box p{color:var(--text2)}
.pv-modal .box .tb{justify-self:end}
.pv-bar{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:14px;background:#151a40;box-shadow:inset 0 0 0 1px var(--line2),0 20px 40px -10px #000;font-size:13px;color:var(--text2);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);opacity:0;z-index:300;padding:10px 16px;border-radius:12px;background:#1d2350;box-shadow:inset 0 0 0 1px var(--line2);transition:all .25s var(--e);pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.fab{display:none}

/* preview mode hides editor chrome */
.app.pvmode{grid-template-columns:0 1fr 0}
.app.pvmode .left,.app.pvmode .right{display:none}
.app.pvmode .top .hist,.app.pvmode .top .zoom{visibility:hidden}
.app.pvmode .fab{display:none!important}

/* tablet / phone: panels become sheets */
@media (max-width:1100px){:root{--lw:240px;--rw:260px}.saved{display:none}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .pname{width:110px;flex-basis:110px}
  .zoom,.hist{display:none}
  .grp.topacts .tb{padding:0 10px;font-size:12.5px}
  .left{position:fixed;left:0;right:0;bottom:0;height:62dvh;border-radius:20px 20px 0 0;border:0;box-shadow:0 -20px 50px -10px #000;transform:translateY(105%);transition:transform .3s var(--e);z-index:30}
  .left.open{transform:none}
  .right{position:fixed;top:var(--top);right:0;bottom:0;width:min(360px,92vw);transform:translateX(105%);transition:transform .3s var(--e);box-shadow:-20px 0 50px -10px #000;z-index:30}
  .right.open{transform:none}
  #closeProps{display:grid}
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:25;width:56px;height:56px;border-radius:18px;background:var(--accent);color:#0b0d1f;box-shadow:0 12px 30px -8px rgba(167,139,250,.8)}
  .fab svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.4;fill:none}
  .cv-wrap{padding:16px 12px 110px}
  .pal{grid-template-columns:repeat(3,1fr)}
  .dlg{padding:18px}
  .dlg .cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand span{display:none}
  .pname{width:84px;flex-basis:84px}
  .seg button{width:32px}
  .grp.topacts{gap:4px}
  #briefBtn{display:none}
  .menu{right:-60px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:560px){
  .top{gap:6px;padding:0 8px}
  .pname{flex:1 1 0;width:0;min-width:0}
  .grp.topacts{flex:none;margin-left:0;gap:4px}
  .grp.topacts #previewBtn,.grp.topacts #briefBtn{display:none}
  .grp.topacts .tb{padding:0 10px}
  #projBtn span{display:none}
  #projBtn::after{content:"⋯";font-size:18px;line-height:1}
}