:root{--panel-w:320px;--footer-h:50px;--bg:#0f0f12;--panel:#1e1e23;--panel2:#32323d;--green:#149050;--text:#f0f0f4;}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Consolas,monospace}body{user-select:none}#view{position:absolute;left:0;top:0;width:calc(100% - var(--panel-w));height:calc(100% - var(--footer-h));background:#0f0f12;image-rendering:pixelated;outline:none;cursor:crosshair}#panel{position:absolute;right:0;top:0;width:var(--panel-w);height:100%;overflow-y:auto;background:var(--panel);border-left:1px solid #3a3a45;padding:8px 10px 70px}#status{position:absolute;left:0;bottom:0;width:calc(100% - var(--panel-w));height:var(--footer-h);background:#0a0a0c;color:#bbb;padding:16px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button,.button-like{background:#3d3d4b;color:white;border:0;border-radius:4px;padding:6px 7px;font:bold 10px Arial,sans-serif;cursor:pointer;display:inline-block;text-align:center}button:hover,.button-like:hover{filter:brightness(1.15)}button.active,button.on{background:#149050}.top-row{display:grid;grid-template-columns:78px 48px 72px 82px;gap:6px;margin-bottom:8px}.top-row button:nth-child(3){background:#454a78}.top-row button:nth-child(4){background:#28643c}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}.tool-grid button{height:24px;font-size:10px}.row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.small-gap button{height:22px}.help-lines{color:#64c878;font-size:11px;line-height:14px;margin:7px 0}hr{border:0;border-top:1px solid #3b3b48;margin:9px 0}h3{margin:7px 0 5px;color:#bfbfc8;font-size:13px}.paint-controls{display:flex;align-items:center;gap:7px;font-size:11px}.swatch{display:inline-block;width:24px;height:16px;border:1px solid #777;background:#808080;vertical-align:middle}.checker{background:repeating-linear-gradient(90deg,#fff 0 3px,#555 3px 6px)}.palette-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.road-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.road-colors button{height:46px}.palette-page{display:grid;grid-template-columns:1fr 42px 42px 42px;gap:4px;align-items:center;margin-top:8px;font-size:11px}.paint-palette{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;margin-top:5px}.color-cell{aspect-ratio:1;border:1px solid #282832}.color-cell.selected{outline:2px solid white;outline-offset:-2px}.tile-head{display:grid;grid-template-columns:1fr 45px 58px 58px;gap:4px;align-items:center}.tile-head span{font-size:11px;color:#bbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-browser{display:grid;grid-template-columns:repeat(3,78px);gap:4px;margin-top:6px}.tile-item{width:78px;height:78px;background:#33333e;border-radius:4px;border:2px solid transparent;position:relative;overflow:hidden;padding:4px}.tile-item.active{border-color:#00ff96}.tile-item img{width:66px;height:58px;object-fit:contain;image-rendering:pixelated}.tile-label{position:absolute;left:2px;right:2px;bottom:2px;background:rgba(0,0,0,.75);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.folder{background:#37466f}.folder:before{content:"";display:block;width:56px;height:34px;margin:14px auto 0;background:#667bb5;border-radius:4px;box-shadow:-18px -8px 0 -4px #7589c3}.hidden{display:none}dialog{border:2px solid #000;border-radius:10px;padding:15px;min-width:430px;background:#fbfbff;color:#111;font-family:Arial,sans-serif}dialog label{display:block;margin:8px 0}dialog textarea,dialog input,dialog select{width:100%;margin-top:4px}dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0}.source-grid label{display:block}.button-like input{display:none}


/* Python-style background loader dialog */
.bg-dialog{padding:0;border:2px solid #111;border-radius:8px;background:#1e1e24;color:#d0d0d8;min-width:820px;max-width:95vw;}
.bg-dialog::backdrop{background:rgba(0,0,0,.45)}
.bg-dialog form{margin:0}
.bg-dialog-grid{display:grid;grid-template-columns:340px minmax(420px,1fr);gap:10px;padding:12px;background:#1e1e24}
.bg-left{background:#1e1e24;color:#d0d0d8}
.bg-left h2{margin:0 0 8px;font:700 18px Consolas,monospace;color:#f0f0f6}
.bg-left h3{margin:9px 0 4px;color:#d0d0d8;font:700 12px Consolas,monospace}
.bg-source-list{border:1px solid #30303a;background:#2a2a34;padding:4px;margin:0 0 8px}
.bg-source-list label{display:grid;grid-template-columns:22px 92px 1fr;align-items:center;gap:3px;color:#d0d0d8;font:10px Consolas,monospace;padding:2px 4px}
.bg-source-list.compact label{grid-template-columns:22px 110px 1fr}
.bg-source-list b{font-size:11px;color:#eee}
.bg-source-list span{color:#888898}
.bg-box{border:1px solid #444454;margin:6px 0;padding:7px;background:#1e1e24}
.bg-box p{margin:2px 0 5px;color:#aaa;font-size:10px}
.bg-box label{display:block;font-size:10px;color:#d0d0d8}
.bg-box input{width:100%;background:#2a2a34;color:#eee;border:1px solid #444454;border-radius:3px;padding:5px;margin-top:3px;font:10px Consolas,monospace}
.bg-box button{margin-top:5px}
.bg-selected{color:#44cc88;font:700 11px Consolas,monospace;margin:2px 0 5px;min-height:14px}
.bg-row{display:flex;align-items:center;gap:12px;margin:6px 0;font:10px Consolas,monospace}
.bg-row input[type=number]{width:48px;background:#2a2a34;color:#eee;border:1px solid #444454;border-radius:3px;padding:3px}
.bg-actions{display:flex;gap:8px;padding:0;margin:12px 0 0}
.bg-actions button:first-child{background:#14805e;flex:1;font-size:12px;padding:8px}
.bg-actions button:last-child{background:#602020;padding:8px}
.bg-right{background:#111118;padding:4px}
.bg-map-head{display:flex;align-items:center;gap:5px;color:#888898;font:10px Consolas,monospace;margin-bottom:4px}
.bg-map-head span:first-child{flex:1}
.bg-map-head button{background:#2a2a3a;min-width:26px}
#pickerMap{display:block;width:100%;height:380px;background:#1a1a22;border:1px solid #333348;cursor:crosshair;image-rendering:auto}
.picker-coord{height:18px;color:#666688;font:10px Consolas,monospace;margin:4px 2px}
.hidden{display:none!important}