:root{
  --ink-950:#0b0d12;
  --ink-900:#12151d;
  --ink-800:#1a1f2b;
  --ink-700:#242b3a;
  --ink-600:#333c4f;
  --line:#2a3142;
  --text:#dfe3ee;
  --text-dim:#8890a6;
  --accent:#5eead4;
  --accent-strong:#2dd4bf;
  --accent-ink:#04201c;
  --danger:#f0648c;
  --focus:#7dd3fc;
}
*{box-sizing:border-box;}
html,body{
  width:100%;height:100%;margin:0;overflow:hidden;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  font-size:14px;background:var(--ink-950);color:var(--text);
  user-select:none;-webkit-user-select:none;touch-action:none;
}
button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--focus); outline-offset:1px;
}

#app{display:flex;flex-direction:row;height:100vh;width:100vw;}

/* ---------- Workspace (canvas + status bar) ---------- */
#workspace{
  flex:1;min-width:0;display:flex;flex-direction:column;height:100%;
}

#canvas-wrapper{
  flex:1;overflow:hidden;position:relative;cursor:crosshair;
  background-color:var(--ink-950);
  background-image:
    linear-gradient(45deg, var(--ink-900) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ink-900) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ink-900) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ink-900) 75%);
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0px;
}
#display-canvas{
  position:absolute;top:0;left:0;
  image-rendering:pixelated;image-rendering:crisp-edges;
  box-shadow:0 0 0 1px var(--line), 0 8px 30px rgba(0,0,0,.45);
}

#statusbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 14px;background:var(--ink-900);border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-dim);flex-shrink:0;gap:10px;
}
#statusbar span b{color:var(--text);font-weight:600;}

/* ---------- Sidebar toolbar ---------- */
#toolbar{
  order:2;width:220px;flex-shrink:0;height:100%;
  display:flex;flex-direction:column;gap:12px;
  padding:14px 12px;background:var(--ink-900);
  border-left:1px solid var(--line);overflow-y:auto;
}

.icon{width:15px;height:15px;flex-shrink:0;}

.brand{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;letter-spacing:.2px;color:var(--accent);
  font-size:15px;
}
.brand .icon{width:17px;height:17px;}

.divider{height:1px;width:100%;background:var(--line);flex-shrink:0;}

.group{display:flex;flex-direction:column;gap:6px;}
.group-label{font-size:11px;color:var(--text-dim);}

.group .row{display:flex;align-items:center;gap:6px;}
.group .row > button{flex:1;justify-content:center;}

button{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  padding:7px 11px;border:1px solid var(--ink-600);
  border-radius:7px;background:var(--ink-800);color:var(--text);
  cursor:pointer;font-size:13px;transition:background .12s, border-color .12s, color .12s;
  width:100%;
}
button:hover:not(:disabled){background:var(--ink-700);border-color:var(--accent);}
button:disabled{opacity:.35;cursor:default;}
button:disabled:hover{background:var(--ink-800);border-color:var(--ink-600);}

#history-group,#io-group{flex-direction:row;flex-wrap:wrap;}
#history-group button,#io-group button{width:auto;flex:1 1 auto;justify-content:center;}

.tool-btn.active{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;
}
.mirror-btn.active{
  background:var(--ink-600);border-color:var(--accent);color:var(--accent);
}

#color-swatch-wrap{
  position:relative;width:100%;height:32px;border-radius:7px;overflow:hidden;
  border:1px solid var(--ink-600);cursor:pointer;
}
#color-picker{
  position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
  border:none;padding:0;cursor:pointer;background:none;
}

label{font-size:12px;color:var(--text-dim);flex-shrink:0;}

#input-width,#input-height{
  width:100%;min-width:0;padding:6px 6px;border:1px solid var(--ink-600);border-radius:7px;
  background:var(--ink-800);color:var(--text);font-size:12.5px;text-align:center;
}
#zoom-select{
  flex:1;padding:6px 8px;border:1px solid var(--ink-600);border-radius:7px;
  background:var(--ink-800);color:var(--text);font-size:12.5px;
}

#file-input{display:none;}

@media (max-width:640px){
  #app{flex-direction:column;}
  #toolbar{
    order:2;width:100%;height:auto;max-height:46vh;
    flex-direction:column;border-left:none;border-top:1px solid var(--line);
  }
  #workspace{flex:1;min-height:0;}
}