:root{
  --bg:#f6f6f8;
  --panel:#ffffff;
  --text:#111;
  --accent:#2b8;
  --muted:#666;
  --grid-gap:1px;
}

[data-theme="dark"]{
  --bg:#121212;
  --panel:#1e1f22;
  --text:#e6e6e6;
  --muted:#bbb;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;}
body{background:var(--bg);color:var(--text);display:flex;flex-direction:column}
header{padding:12px;background:var(--panel);display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,0.06)}
header h1{margin:0;font-size:1.1rem}
.controls-top{display:flex;gap:8px;align-items:center}

main{display:flex;flex:1;gap:12px;padding:12px}
.sidebar{width:320px;max-width:40%;display:flex;flex-direction:column;gap:12px}
.canvas-area{flex:1;display:flex;flex-direction:column;align-items:center}

.palette,.colors,.tools,.groups,.export{background:var(--panel);padding:10px;border-radius:6px;border:1px solid rgba(0,0,0,0.06)}
.char-grid{display:grid;grid-template-columns:repeat(8,28px);gap:6px;padding:6px;max-height:150px;overflow:auto}
.char-grid button{height:28px;border-radius:4px;border:1px solid rgba(0,0,0,0.08);background:#fff}
.char-grid button.active{outline:2px solid var(--accent)}

.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.swatches button{width:28px;height:28px;border-radius:4px;border:1px solid rgba(0,0,0,0.08)}

.tool-buttons{display:flex;gap:6px;flex-wrap:wrap}
.tool-buttons button{padding:6px 8px}
.tool-buttons button.active{background:var(--accent);color:white}

#grid-wrapper{overflow:auto;border:1px solid rgba(0,0,0,0.08);background:var(--panel);padding:12px;border-radius:6px}
#grid{display:grid;touch-action:none;user-select:none;transform-origin:0 0}
.cell{
  display:flex;align-items:center;justify-content:center;
  border:var(--grid-gap) solid rgba(0,0,0,0.06);
  overflow:hidden;
}
.cell .glyph{display:inline-block;transform-origin:center center;transition:transform .08s}
.cell.selected{outline:2px dashed #999;z-index:2}

.statusbar{width:100%;padding:6px 12px;text-align:left;color:var(--muted)}

.sidebar h2{margin:0 0 6px 0;font-size:0.95rem}

@media (max-width:900px){
  main{flex-direction:column}
  .sidebar{width:100%}
}