:root {
    --bg-color: #0f172a;
    --panel-bg: rgba(30, 41, 59, 0.95);
    --border-color: #475569;
    --highlight: #38b2ac;
    --text-main: #f8fafc;
}

* { box-sizing: border-box; }

body, html {
    margin: 0; padding: 0; background: var(--bg-color); color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh; overflow: hidden;
}

.btn-primary, .btn-secondary {
    display: inline-block; border: none; border-radius: 4px; padding: 9px 16px; font-size: 0.85rem;
    cursor: pointer; text-decoration: none; text-align: center; font-family: inherit;
}
.btn-primary { background: var(--highlight); color: #052e2b; font-weight: bold; }
.btn-primary:hover { background: #4fd1c9; }
.btn-secondary { background: #475569; color: white; }
.btn-secondary:hover { background: #64748b; }

#editor-header {
    display: flex; align-items: center; gap: 16px; padding: 12px 20px;
    background: var(--panel-bg); border-bottom: 1px solid var(--border-color);
}
#editor-header h1 { margin: 0; font-size: 1.15rem; color: var(--highlight); }
.editor-subtitle { margin: 0; flex: 1; font-size: 0.8rem; color: #94a3b8; }

#editor-body { display: flex; height: calc(100vh - 53px); }

#editor-sidebar {
    width: 250px; flex-shrink: 0; background: var(--panel-bg); border-right: 1px solid var(--border-color);
    padding: 14px; overflow-y: auto;
}
.editor-panel { margin-bottom: 22px; }
.editor-panel h2 {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8;
    margin: 0 0 10px 0;
}
.editor-hint { font-size: 0.72rem; color: #64748b; margin: 8px 0 0 0; line-height: 1.4; }

.size-inputs { display: flex; gap: 8px; margin-bottom: 10px; }
.size-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: #94a3b8; flex: 1; }
.size-inputs input {
    background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    color: var(--text-main); padding: 6px 8px; font-family: inherit; font-size: 0.85rem; width: 100%;
}

.field-label {
    display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: #94a3b8;
    margin-bottom: 10px;
}
.field-label input, .field-label select, #editor-export-panel select {
    background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    color: var(--text-main); padding: 6px 8px; font-family: inherit; font-size: 0.85rem; width: 100%;
}

#btn-apply-size, #btn-fill-all, #btn-clear-all, #btn-toggle-substation-mode { width: 100%; margin-bottom: 8px; }
#btn-toggle-substation-mode.active { background: #facc15; color: #1e1b06; font-weight: bold; }
#btn-toggle-substation-mode.active:hover { background: #fde047; }

.palette-swatch {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    padding: 7px 10px; margin-bottom: 6px; cursor: pointer; color: var(--text-main); font-family: inherit;
}
.palette-swatch:hover { border-color: var(--highlight); }
.palette-swatch.selected { border-color: var(--highlight); background: rgba(56, 178, 172, 0.18); }
.swatch-color { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.25); }
.swatch-color.swatch-empty {
    background-image:
        linear-gradient(45deg, #334155 25%, transparent 25%), linear-gradient(-45deg, #334155 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #334155 75%), linear-gradient(-45deg, transparent 75%, #334155 75%);
    background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    background-color: #1e293b;
}
.swatch-text { display: flex; flex-direction: column; }
.swatch-name { font-size: 0.8rem; font-weight: bold; }
.swatch-buildable { font-size: 0.68rem; color: #94a3b8; }

#editor-grid-viewport { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 24px; }
#editor-grid {
    position: relative; display: grid; background: rgba(20, 33, 51, 0.6); border: 1px solid var(--border-color);
    flex-shrink: 0; user-select: none;
}
.editor-cell {
    border: 1px solid rgba(71, 85, 105, 0.35); box-sizing: border-box; cursor: pointer;
    background-image:
        linear-gradient(45deg, #263449 25%, transparent 25%), linear-gradient(-45deg, #263449 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #263449 75%), linear-gradient(-45deg, transparent 75%, #263449 75%);
    background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-color: rgba(20, 33, 51, 0.6);
}
.editor-cell:hover { outline: 1px solid var(--highlight); outline-offset: -1px; }
.editor-cell { position: relative; }
.substation-badge {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; pointer-events: none; text-shadow: 0 0 2px #000, 0 0 2px #000;
}

#editor-export-panel {
    width: 320px; flex-shrink: 0; background: var(--panel-bg); border-left: 1px solid var(--border-color);
    padding: 14px; overflow-y: auto; display: flex; flex-direction: column;
}
#editor-export-panel h2 {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; margin: 0 0 10px 0;
}
#btn-copy-json { width: 100%; }
.copy-feedback { display: inline-block; margin-top: 8px; color: var(--highlight); font-size: 0.8rem; }
#export-json {
    margin-top: 12px; flex: 1; min-height: 300px; resize: vertical; background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-main); font-family: 'Consolas', monospace;
    font-size: 0.72rem; padding: 10px; user-select: text;
}

.hidden { display: none !important; }