* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; background: #14171c; color: #d8dae0; font: 14px/1.4 system-ui, sans-serif; }

#panel { width: 400px; max-width: 45vw; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #1c2027; border-right: 1px solid #2c313a; }
#panel h1 { margin: 0 0 4px; font-size: 18px; }
#panel label { font-size: 12px; color: #9aa0ac; }

select, textarea, button { font: inherit; color: inherit; background: #262b34; border: 1px solid #3a404b; border-radius: 4px; }
select, button { padding: 6px 10px; }
button { cursor: pointer; }
button:hover:not(:disabled) { background: #323945; }
button:disabled { opacity: 0.5; cursor: default; }
textarea { flex: 1; min-height: 160px; padding: 8px; resize: none; font: 13px/1.4 ui-monospace, Consolas, monospace; tab-size: 2; white-space: pre; }

.buttons { display: flex; gap: 8px; }
#status { margin: 0; color: #9aa0ac; font-size: 12px; white-space: pre-wrap; }
#error { margin: 0; color: #ff8a80; white-space: pre-wrap; font: 13px/1.4 system-ui, sans-serif; }
#error:empty { display: none; }

#centre { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
#toolbar, #statusbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #1c2027; }
#toolbar { border-bottom: 1px solid #2c313a; }
#statusbar { border-top: 1px solid #2c313a; color: #9aa0ac; font-size: 12px; flex-wrap: wrap; }
#toolbar .sep { width: 1px; align-self: stretch; background: #2c313a; margin: 0 4px; }
#scale { width: 80px; padding: 3px 6px; font: inherit; color: inherit; background: #262b34; border: 1px solid #3a404b; border-radius: 4px; }
#godot { margin-left: auto; color: #d8dae0; }
#drop { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 22px; background: rgba(20, 23, 28, 0.85); border: 3px dashed #6a7080; pointer-events: none; }
body.dragging #drop { display: flex; }

#colours { width: 200px; padding: 12px; overflow-y: auto; background: #1c2027; border-left: 1px solid #2c313a; }
#colours h2 { margin: 0 0 8px; font-size: 14px; }
#colour-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
#colour-list li { display: flex; align-items: center; gap: 8px; }
#colour-list .swatch { width: 18px; height: 18px; border-radius: 3px; border: 1px solid #3a404b; flex: none; }
#colour-list .count { margin-left: auto; color: #9aa0ac; }

#view { flex: 1; min-height: 0; position: relative; }
#view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Phase 3: editor */
#toolbar { flex-wrap: wrap; }
#toolbar button.active { background: #3b5f8a; border-color: #5a86bb; }
#toolbar label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #9aa0ac; }
#extrude { width: 56px; }
input[type="number"] { padding: 3px 6px; font: inherit; color: inherit; background: #262b34; border: 1px solid #3a404b; border-radius: 4px; }
#slicebar { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: #1c2027; border-bottom: 1px solid #2c313a; font-size: 12px; color: #9aa0ac; }
#slice { flex: 1; max-width: 360px; }
#cursor { min-width: 90px; }
#autosave { color: #ff8a80; }
#view canvas { cursor: crosshair; }
#colour-list li { padding: 2px 4px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; }
#colour-list li:hover { background: #262b34; }
#colour-list li.current { background: #2a3a52; border-color: #5a86bb; }
dialog { color: #d8dae0; background: #1c2027; border: 1px solid #3a404b; border-radius: 6px; max-width: 640px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog h2, dialog h3 { margin: 0 0 8px; }
dialog label { display: block; margin: 6px 0; }
dialog table { border-collapse: collapse; font-size: 13px; }
dialog td { padding: 2px 10px 2px 0; vertical-align: top; }
dialog pre { background: #14171c; padding: 8px; border-radius: 4px; overflow-x: auto; font-size: 12px; }
kbd { background: #262b34; border: 1px solid #3a404b; border-radius: 3px; padding: 0 4px; font: 12px ui-monospace, Consolas, monospace; }
#new-error { color: #ff8a80; min-height: 1.4em; }

/* Phase 4: tool options row, Text tool, palette matching */
#tool-options { display: flex; align-items: center; gap: 8px; padding: 4px 10px; min-height: 34px; background: #1c2027; border-bottom: 1px solid #2c313a; font-size: 12px; color: #9aa0ac; flex-wrap: wrap; }
#tool-options .options { display: none; align-items: center; gap: 10px; flex-wrap: wrap; }
#tool-options .options.shown { display: flex; }
#tool-options label { display: flex; align-items: center; gap: 4px; }
#tool-options .hint { color: #6f7684; }
#tool-options select { padding: 2px 6px; }
#text-string { width: 160px; padding: 3px 6px; font: 13px ui-monospace, Consolas, monospace; color: inherit; background: #262b34; border: 1px solid #3a404b; border-radius: 4px; }
#text-size, #text-depth { width: 52px; }
#palette-note { margin: 0 0 8px; font-size: 12px; color: #9aa0ac; }
#palette-note:empty { display: none; }
#snap { width: 100%; margin-bottom: 10px; }
#colour-list .off { color: #9aa0ac; font-family: ui-monospace, Consolas, monospace; }
#tool-options .problem { color: #ff8a80; }