:root{
  --c0:#121212;--c1:#1b1b1b;--c2:#232323;--c3:#2c2c2c;--c4:#383838;--c5:#4a4a4a;
  --tx:#ececec;--tx2:#a8a8a8;--tx3:#6f6f6f;
  --acc:#ff6a3d;--acc-h:#ff8156;--acc-soft:rgba(255,106,61,.14);
  --ok:#3ecf8e;--warn:#f5a524;--bad:#f87171;
  --r:6px;
  font:12px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--c0);color:var(--tx);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
kbd{font:10.5px ui-monospace,Menlo,monospace;background:var(--c3);border:1px solid var(--c4);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--tx2)}

.app{display:grid;grid-template-rows:46px minmax(0,1fr) 30px;height:100vh}

/* ---------- top bar */
.top{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px;padding:0 10px 0 12px;background:var(--c1);border-bottom:1px solid #000}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;white-space:nowrap}
.logo{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--acc);color:#fff}
.badge{font-size:10.5px;font-weight:500;color:var(--tx2);background:var(--c3);border-radius:20px;padding:2px 8px}
.badge.edit{color:var(--acc);background:var(--acc-soft)}
.tgroup{display:flex;align-items:center;gap:4px}
.tgroup.center{justify-content:center;gap:8px}
.tgroup.right{gap:8px}
.sep{width:1px;height:18px;background:var(--c4);margin:0 4px}

.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r);border:1px solid var(--c4);background:var(--c3);font-weight:500;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:var(--c4)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx2)}
.btn.ghost:hover{background:var(--c3);color:var(--tx)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc-h)}
.btn.sm{height:26px;padding:0 10px;font-size:11.5px}
.btn svg{flex:none}
.ibtn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r);border:0;background:transparent;color:var(--tx2)}
.ibtn:hover{background:var(--c3);color:var(--tx)}
.ibtn:disabled{opacity:.3;pointer-events:none}

.seg{display:inline-flex;background:var(--c0);border:1px solid var(--c3);border-radius:var(--r);padding:2px;gap:2px}
.seg button{border:0;background:transparent;color:var(--tx2);height:24px;min-width:28px;padding:0 8px;border-radius:4px;display:inline-grid;place-items:center;font-size:11.5px;white-space:nowrap}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--c4);color:var(--tx)}

.dd{position:relative}
.menu{position:absolute;top:34px;left:0;z-index:20;min-width:230px;background:var(--c2);border:1px solid var(--c4);border-radius:8px;padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:5px;padding:7px 10px}
.menu button small{display:block;color:var(--tx3);font-size:11px}
.menu button:hover{background:var(--c3)}

/* ---------- layout */
.main{display:grid;grid-template-columns:minmax(0,1fr) 296px;min-height:0}
.stage{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;background:var(--c1);border-bottom:1px solid #000}
.tb-group{display:flex;align-items:center;gap:1px;padding:2px;border-radius:7px;background:var(--c0);border:1px solid var(--c3)}
.tb-label{font-size:10.5px;color:var(--tx3);padding:0 6px 0 5px;text-transform:uppercase;letter-spacing:.05em}
.tb-group button{width:28px;height:26px;border:0;border-radius:5px;background:transparent;color:var(--tx2);display:grid;place-items:center}
.tb-group button:hover{background:var(--c3);color:var(--tx)}
.tb-group button.danger:hover{color:var(--bad)}
.tb-group button.txt{font-size:13px}
.tb-group button.on{background:var(--acc-soft);color:var(--acc)}
.toolbar.nosel .tb-group button{opacity:.45}

.linkbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--c2);border-bottom:1px solid #000}
.linkbar input[type=text]{flex:1;max-width:420px;height:28px;border-radius:var(--r);border:1px solid var(--c4);background:var(--c0);padding:0 10px;outline:none}
.linkbar input[type=text]:focus{border-color:var(--acc)}
.chk{display:inline-flex;align-items:center;gap:6px;color:var(--tx2);white-space:nowrap}
.chk input{accent-color:var(--acc)}

.canvas{overflow:auto;padding:34px 28px 28px;background:radial-gradient(circle,#262626 1px,transparent 1.2px) 0 0/18px 18px,var(--c0)}
.device{margin:0 auto;width:100%;max-width:1060px;transition:width .28s cubic-bezier(.2,.8,.2,1),max-width .28s}
.device.tablet{max-width:768px}
.device.mobile{max-width:390px}
.dev-label{font-size:10.5px;color:var(--tx3);margin:0 0 8px 2px;letter-spacing:.04em;text-transform:uppercase}
.page{background:#fff;color:#334155;border-radius:10px;padding:36px 32px;min-height:180px;font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.45);color-scheme:light}
.device.mobile .page{padding:24px 16px}
.page.dark{background:#0a0a0a;color:#d4d4d4;color-scheme:dark}
.hint{max-width:1060px;margin:14px auto 0;text-align:center;color:var(--tx3);font-size:11.5px}

/* editor-only cell affordances (never exported) */
.page .wtb{margin:0}
.page .v{display:block;outline:none;min-height:1.45em;cursor:text;word-break:normal}
.page .v:empty::before{content:attr(data-ph);opacity:.32;pointer-events:none}
.page td,.page th{cursor:text}
.page .is-col{background-image:linear-gradient(rgba(255,106,61,.06),rgba(255,106,61,.06))}
.page .is-sel{box-shadow:inset 0 0 0 2px var(--acc)!important}

/* ---------- side panel */
.panel{background:var(--c1);border-left:1px solid #000;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--c3)}
.tabs button{flex:1;border:0;background:transparent;color:var(--tx2);padding:7px 0 9px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--tx)}
.tabs button.on{color:var(--tx);border-bottom-color:var(--acc)}
.panes{overflow:auto;min-height:0}
.pane{display:none;padding:2px 0 24px}
.pane.on{display:block}
.sec{padding:12px 14px;border-bottom:1px solid var(--c2)}
.sec h3{margin:0 0 10px;font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
.sec h3 .lnk{border:0;background:none;color:var(--tx3);font-size:11px;text-transform:none;letter-spacing:0;padding:0}
.sec h3 .lnk:hover{color:var(--acc)}
.fld{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:8px;min-height:30px;margin-bottom:4px}
.fld>label{color:var(--tx2);font-size:11.5px}
.fld.full{grid-template-columns:1fr}
.fld .seg{width:100%}
.fld .seg button{flex:1;padding:0 4px}
.ctl{display:flex;align-items:center;gap:8px;min-width:0}
.ctl input[type=text],.ctl input[type=number],.ctl select{width:100%;height:28px;border-radius:var(--r);border:1px solid var(--c3);background:var(--c0);padding:0 8px;outline:none;min-width:0}
.ctl input:focus,.ctl select:focus{border-color:var(--acc)}
.ctl input[type=range]{flex:1;accent-color:var(--acc);min-width:0}
.ctl .num{width:52px;text-align:right;color:var(--tx2);font-variant-numeric:tabular-nums;font-size:11px}
.swatch{position:relative;width:28px;height:28px;border-radius:var(--r);border:1px solid var(--c4);overflow:hidden;flex:none}
.swatch input{position:absolute;inset:-8px;width:44px;height:44px;border:0;padding:0;cursor:pointer;opacity:0}
.swatch span{position:absolute;inset:0}
.ctl .hex{font-family:ui-monospace,Menlo,monospace;font-size:11px;text-transform:uppercase}
.sw{position:relative;width:32px;height:18px;flex:none}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:20px;background:var(--c4);transition:background .15s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+span{background:var(--acc)}
.sw input:checked+span::after{transform:translateX(14px)}
.sw input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.fld.tog{grid-template-columns:1fr auto}

.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.theme{border:1px solid var(--c3);background:var(--c0);border-radius:8px;padding:6px;text-align:left}
.theme:hover{border-color:var(--c5)}
.theme.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.theme .mini{display:grid;grid-template-rows:9px 7px 7px 7px;gap:0;border-radius:4px;overflow:hidden;height:34px;margin-bottom:6px}
.theme .mini i{display:block}
.theme b{font-weight:500;font-size:11px;color:var(--tx2)}
.theme.on b{color:var(--tx)}

.colinfo{color:var(--tx3);font-size:11.5px;line-height:1.5}
textarea#codeOut,textarea#importIn{width:100%;height:190px;resize:vertical;border-radius:var(--r);border:1px solid var(--c3);background:var(--c0);padding:8px;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx2);outline:none}
textarea#importIn{height:110px}
textarea:focus{border-color:var(--acc)}
.row-btns{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.muted{color:var(--tx3);font-size:11px}
.muted.warn{color:var(--warn)}
.note{color:var(--tx3);font-size:11px;margin:8px 0 0}
.file{position:relative;overflow:hidden}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- footer */
.foot{display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--c1);border-top:1px solid #000;color:var(--tx3);font-size:11px}
.status b{color:var(--tx2);font-weight:500}
.status .warn{color:var(--warn)}
.credits{display:inline-flex;align-items:center;gap:14px}
.help{color:var(--tx2);text-decoration:none;font-weight:500}
.help:hover{color:var(--acc)}
.bmc{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;border-radius:20px;background:#ffdd00;color:#111;font-weight:600;text-decoration:none;font-size:11px}
.bmc:hover{background:#ffe633}
.credit{display:inline-flex;align-items:center;gap:6px;color:var(--tx3);text-decoration:none}
.credit a{color:inherit;text-decoration:none}
.credit b{color:var(--tx2);font-weight:600}
.credit a:hover b{color:var(--tx)}

.toast{position:fixed;left:50%;bottom:46px;transform:translate(-50%,12px);background:#fafafa;color:#111;padding:9px 14px;border-radius:8px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(560px,90vw);text-align:center;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .main{grid-template-columns:1fr}
  .panel{border-left:0;border-top:1px solid #000;max-height:45vh}
  .top{grid-template-columns:auto 1fr auto}
  .tgroup.center{display:none}
}