:root{
  --bg:#0d0f12; --panel:#15181d; --panel2:#1b2026; --line:#2b3139;
  --text:#f4f7f8; --muted:#9ba4ae; --green:#62e45f; --red:#ff493d;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;height:100%}
button,.filebtn,select,input,textarea{font:inherit}
button,.filebtn{
  border:1px solid var(--line);background:#20252c;color:#fff;border-radius:8px;padding:9px 10px;
  cursor:pointer;transition:.15s
}
button:hover,.filebtn:hover{background:#2a3139}
button.accent{background:var(--green);color:#071007;border-color:var(--green);font-weight:700}
button.danger{background:#351918;border-color:#6a2622;color:#ffaaa3;width:100%}
.filebtn input{display:none}
.filebtn{display:flex;justify-content:center;align-items:center}
.filebtn.wide{width:100%}
.topbar{
  height:64px;border-bottom:1px solid var(--line);background:#111419;display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:5
}
.brand{display:flex;gap:10px;align-items:center}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:250px minmax(340px,1fr) 300px;height:calc(100vh - 64px)}
.panel{background:var(--panel);overflow:auto;padding:14px;border-right:1px solid var(--line)}
.panel.right{border-right:0;border-left:1px solid var(--line)}
.panel section{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#d4dae0;margin:0 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.canvas-wrap{overflow:auto;position:relative;background:
  linear-gradient(45deg,#15191e 25%,transparent 25%),
  linear-gradient(-45deg,#15191e 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#15191e 75%),
  linear-gradient(-45deg,transparent 75%,#15191e 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0px}
.canvas-stage{width:max-content;margin:24px auto 70px;box-shadow:0 18px 60px #000;border:1px solid #303742}
canvas{display:block}
.zoomrow{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#111419;border:1px solid var(--line);padding:7px 10px;border-radius:10px;z-index:4}
.zoomrow span{min-width:54px;text-align:center;color:var(--muted)}
.layers{display:flex;flex-direction:column;gap:6px}
.layer{display:flex;gap:6px;align-items:center;background:#1d2228;border:1px solid #2a3038;border-radius:7px;padding:6px}
.layer span{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.layer button{padding:3px 6px;font-size:11px}
.props{display:flex;flex-direction:column;gap:9px}
.props label{font-size:12px;color:#cfd6dc;display:flex;flex-direction:column;gap:5px}
.props input,.props select,.props textarea{
  width:100%;background:#0f1216;border:1px solid #343b45;color:#fff;border-radius:6px;padding:7px
}
.props input[type=color]{height:38px;padding:3px}
.props input[type=range]{padding:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hidden{display:none!important}.muted{color:var(--muted);font-size:12px}.help{font-size:12px;line-height:1.65;color:var(--muted)}

@media(max-width:1050px){
  .layout{grid-template-columns:210px minmax(320px,1fr) 250px}
}
@media(max-width:820px){
  .topbar{height:auto;min-height:64px;align-items:flex-start;gap:8px;padding:10px}
  .top-actions{justify-content:flex-end}
  .layout{grid-template-columns:1fr;height:auto}
  .panel.left,.panel.right{border:0;border-bottom:1px solid var(--line)}
  .canvas-wrap{min-height:70vh}
  .canvas-stage{margin-top:14px}
  .zoomrow{position:sticky;bottom:8px;width:max-content;margin:0 auto 8px;transform:none;left:auto}
}

.ai-status{font-size:12px;line-height:1.4;color:#9ba4ae;background:#0f1216;border:1px solid #343b45;border-radius:6px;padding:8px}
.ai-status.working{color:#fff3b0}
.ai-status.ok{color:#9dff9a}
.ai-status.err{color:#ffaaa3}
details{border:1px solid #2b3139;border-radius:7px;padding:8px}
details summary{font-size:12px;color:#cfd6dc;cursor:pointer;margin-bottom:8px}
details button{width:100%;margin-bottom:8px}

.color-row{display:grid;grid-template-columns:58px 1fr;gap:7px;align-items:center}
.color-row input[type=color]{width:58px;height:38px}
.color-row select{height:38px}