*{box-sizing:border-box}
:root{
  --fg:#0f0; --dim:#0a4; --panel:#031; --edge:#063; --accent:#18e018;
}
body{color:var(--fg);}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;border-bottom:1px solid var(--edge);background:#001a0a
}
.topbar .brand{font-weight:700}
.topbar .muted{opacity:.7}
.topbar .actions button,
.topbar .actions select{margin-right:6px;background:#031;color:var(--fg);border:1px solid var(--edge);padding:4px 8px;cursor:pointer}
.workspace{display:grid;grid-template-columns:280px 1fr 300px;height:calc(100vh - 38px)}
.sidebar{
  border-right:1px solid var(--edge);background:#010a05;padding:8px;overflow:auto
}
.sidebar.right{border-right:0;border-left:1px solid var(--edge)}
.section-title{font-weight:700;margin:4px 0 6px 0;color:#9f9}
.tools label,.layers label{display:block;margin:2px 0}
.row{margin:6px 0}
.palette-grid{display:grid;grid-template-columns:repeat(8,22px);gap:6px}
.palette-grid button{
  width:22px;height:22px;border:1px solid #333;cursor:pointer;outline:none
}
.canvas-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
#canvas{image-rendering:pixelated;background:#001a0a;border:1px solid var(--edge)}
.statusline{
  position:absolute;left:8px;bottom:8px;background:rgba(0,34,17,.75);
  border:1px solid var(--edge);padding:2px 6px;border-radius:4px;font-size:12px
}
.tileset-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile-btn{
  border:1px solid var(--edge);background:#021;color:var(--fg);cursor:pointer;padding:6px;text-align:center
}
.tile-btn .char{display:block;font-size:18px;line-height:1}
.tile-btn .meta{display:block;font-size:10px;opacity:.8}
.map-meta input{width:100%;margin:2px 0;background:#021;color:var(--fg);border:1px solid var(--edge);padding:4px}
.zoom select{background:#021;color:var(--fg);border:1px solid var(--edge);padding:2px 6px}