/* MTA DX Designer. Dark like the game's own screen, so the layout you draw reads true. */
:root{color-scheme:dark;--bg:#0f1318;--panel:#161c23;--raised:#1d252e;--line:#2b3742;--text:#eef3f7;--muted:#a1b0bd;--quiet:#78899a;--gold:#d6b25d;--gold-strong:#ecc86f;--blue:#6fb3e0;--radius:12px;font-family:Tahoma,Verdana,Arial,sans-serif;font-size:15px;line-height:1.55}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-strong);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.stage:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3,p,ul{margin:0}
button,input,select,textarea{font:inherit;color:var(--text)}
button{cursor:pointer}
code,pre{font-family:Consolas,"Cascadia Code",monospace;font-size:13px}
code{background:var(--raised);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#e4d6ac}
.skip-link{position:absolute;left:-9999px;background:var(--gold);color:#12150f;padding:10px 14px;border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0;z-index:40}

.topbar{border-bottom:1px solid var(--line);background:var(--panel)}
.topbar-inner{max-width:1400px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand-mark{width:36px;height:36px;border-radius:9px;background:var(--gold);color:#12150f;display:grid;place-items:center;font-weight:800}
.brand-copy{display:flex;flex-direction:column;line-height:1.25}
.brand-copy span{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--quiet)}
.nav{margin-left:auto;display:flex;gap:15px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:14px}
.nav a:hover{color:var(--text);text-decoration:none}

main{max-width:1400px;margin:0 auto;padding:18px 18px 50px}
.intro{max-width:78ch}
h1{font-size:clamp(25px,3.4vw,34px);line-height:1.15;letter-spacing:-.5px}
.lede{color:var(--muted);margin-top:10px}

.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.group.push{margin-left:auto}
.btn{background:var(--gold);color:#12150f;border:1px solid var(--gold);border-radius:9px;padding:7px 12px;font-weight:700;white-space:nowrap}
.btn:hover{background:var(--gold-strong)}
.btn.ghost{background:transparent;color:var(--gold);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold);background:rgba(214,178,93,.08)}
.btn[disabled]{opacity:.45;cursor:default}
.check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.small{font-size:12px;color:var(--quiet)}
input,select,textarea{background:#0c1116;border:1px solid var(--line);border-radius:8px;padding:7px 9px;min-width:0}
select{padding-right:6px}
.link{background:none;border:0;color:var(--gold);text-decoration:underline;padding:0}
.inline-file{color:var(--gold);text-decoration:underline;cursor:pointer}

.app{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-top:14px;align-items:start}
.stage-wrap{min-width:0}
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#11161c;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center}
.stage-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}
.parts,.handles{position:absolute;inset:0}
.handles{pointer-events:none}
.part{position:absolute;pointer-events:auto;cursor:move}
.part.locked{cursor:not-allowed}
.part.hidden{display:none}
.part .text-inner{width:100%;height:100%;display:flex;overflow:hidden;padding:0 2px}
.part .image-inner{width:100%;height:100%;border:1px dashed rgba(255,255,255,.45);display:grid;place-items:center;font-size:11px;color:rgba(255,255,255,.7);background-size:100% 100%;background-repeat:no-repeat}
.part svg{overflow:visible;display:block}
.selection{position:absolute;border:1px solid var(--blue);pointer-events:none}
.handle{position:absolute;width:10px;height:10px;background:var(--blue);border:1px solid #06121b;border-radius:2px;pointer-events:auto;cursor:nwse-resize}
.handle.n,.handle.s{cursor:ns-resize}
.handle.e,.handle.w{cursor:ew-resize}
.handle.ne,.handle.sw{cursor:nesw-resize}
.handle.dot{border-radius:50%;cursor:move}
.stage-note{color:var(--quiet);font-size:13px;margin-top:9px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;max-height:calc(56.25vw - 20px);min-height:320px;overflow:auto}
.panel h2{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--quiet);margin:16px 0 8px}
.panel h2:first-child{margin-top:0}
.layers{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.layers li{display:grid;grid-template-columns:auto minmax(0,1fr) repeat(5,auto);gap:4px;align-items:center;background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:5px 7px;font-size:13px}
.layers li.on{border-color:var(--blue)}
.layers .kind{font-size:11px;color:var(--quiet);text-transform:uppercase;letter-spacing:.6px}
.layers b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.layers button{background:none;border:0;color:var(--muted);padding:2px 4px;border-radius:5px;font-size:13px}
.layers button:hover{color:var(--gold);background:rgba(214,178,93,.1)}
.layers .empty{display:block;color:var(--quiet);font-size:13px;background:none;border:0;padding:0}

.fields{display:grid;grid-template-columns:auto 1fr;gap:7px 8px;align-items:center;font-size:13px}
.fields label{color:var(--quiet);font-size:12px}
.fields input[type=text],.fields input[type=number],.fields select,.fields textarea{width:100%}
.fields .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fields .wide{grid-column:1 / -1}
.fields textarea{resize:vertical;min-height:52px;font-family:inherit}
.colour-row{display:flex;gap:8px;align-items:center}
.colour-row input[type=color]{width:42px;height:32px;padding:2px;background:none;border:1px solid var(--line);border-radius:7px}
.colour-row input[type=range]{flex:1}

.output{margin-top:22px}
.out-head{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.out-head h2{font-size:20px}
.code{background:#0b0f14;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:10px;white-space:pre;overflow:auto;max-height:340px;color:#dfe8ee}
.note{color:var(--quiet);font-size:13px;margin-top:8px}

.prose{max-width:76ch;margin-top:34px}
.prose h2{font-size:20px;margin:24px 0 8px}
.prose p{color:var(--muted);margin-top:10px}

.foot{border-top:1px solid var(--line);background:var(--panel);margin-top:40px}
.foot-inner{max-width:1400px;margin:0 auto;padding:15px 18px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--quiet)}
.foot a{color:var(--muted)}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--gold);color:#12150f;font-weight:700;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%)}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .panel{max-height:none}
  .nav{width:100%;margin-left:0}
  .group.push{margin-left:0}
  main{padding:16px 14px 40px}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}