:root { --bg: #121212; --panel: #1e1e1e; --accent: #00d2d3; --text: #eee; --border: #333; }
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }

.app-layout { display: grid; grid-template-columns: 320px 1fr; height: 100vh; }
.sidebar { background: var(--panel); border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.brand h1 { margin: 0; color: #fff; } .brand span { color: var(--accent); }
.panel { background: #252525; padding: 15px; border-radius: 6px; }
.panel h3 { margin: 0 0 10px 0; color: var(--accent); font-size: 0.9rem; }

.drop-zone { border: 2px dashed #444; padding: 20px; text-align: center; position: relative; cursor: pointer; }
.drop-zone:hover { border-color: var(--accent); }
.drop-zone input { position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.thumb { width: 100%; margin-top: 10px; border-radius: 4px; }
.hidden { display: none !important; }

.input-row { display: flex; gap: 10px; }
.grp { flex: 1; margin-bottom: 10px; }
.grp label { display: block; font-size: 0.75rem; color: #aaa; margin-bottom: 4px; }
.grp input[type="number"] { width: 100%; background: #111; border: 1px solid #444; color: #fff; padding: 8px; }
.grp input[type="range"] { width: 100%; cursor: pointer; }

.btn-step { width: 100%; padding: 12px; border: none; font-weight: bold; cursor: pointer; background: var(--accent); color: #000; margin-bottom: 10px; }
.btn-step:disabled { background: #444; color: #777; cursor: not-allowed; }
.sub-actions { display: flex; gap: 10px; }
.btn-green { background: #2ecc71; flex:1; padding:10px; border:none; cursor:pointer; font-weight:bold;}
.btn-grey { background: #555; flex:1; padding:10px; border:none; cursor:pointer; color:#fff;}

.viewport { display: flex; padding: 20px; gap: 20px; background: #000; height: 100vh; overflow: hidden; }
.view-panel { flex: 1; display: flex; flex-direction: column; background: #111; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.panel-header { padding: 0 15px; background: #222; border-bottom: 1px solid #333; height: 50px; flex-shrink: 0; display: flex; align-items: center;}
.panel-header h2 { margin: 0; font-size: 1rem; color: #ddd; line-height: 1; }

.preview-box { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.white-bg { background: #fff; overflow: auto; }
.black-bg { background: #000; }
#svg-container svg { max-width: 95%; height: auto; display: block; margin: auto; }

.split-row { display: flex; flex-direction: row; flex: 1; overflow: hidden; height: 100%; }
#canvas-container { flex: 3; height: 100%; position: relative; border-right: 1px solid var(--border); }
canvas { display: block; cursor: grab; width: 100%; height: 100%; }
canvas:active { cursor: grabbing; }
textarea { flex: 1; height: 100%; background: #080808; color: #0f0; border: none; padding: 10px; font-family: monospace; resize: none; font-size: 0.75rem; overflow-y: auto; white-space: pre; }

@media (max-width: 900px) {
    .app-layout { display: flex; flex-direction: column; height: auto; overflow: auto; }
    .viewport { flex-direction: column; height: auto; }
    .split-row { flex-direction: column; height: 500px; }
    .view-panel { height: 500px; margin-bottom: 20px; }
}