/* Quake I Arena Map Generator — dark technical editor theme */
:root{
  --bg-0:#101216;
  --bg-1:#171a20;
  --bg-2:#1e222b;
  --bg-3:#262b36;
  --line:#323947;
  --text-0:#e8eaf0;
  --text-1:#9aa3b2;
  --accent:#f28c28;       /* quake ember */
  --accent-soft:#f28c2833;
  --ok:#4caf50;
  --warn:#e6c229;
  --err:#e53935;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,monospace;
  --sans:"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg-0);color:var(--text-0);font-family:var(--sans);font-size:13px;display:flex;flex-direction:column}

/* Header */
#app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg-1);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{font-family:var(--mono);font-weight:700;color:var(--bg-0);background:var(--accent);padding:2px 7px;border-radius:3px;letter-spacing:.05em}
#app-header h1{font-size:15px;font-weight:600;letter-spacing:.03em}
.status-chip{font-family:var(--mono);font-size:11px;padding:3px 10px;border-radius:12px;border:1px solid var(--line)}
.status-idle{color:var(--text-1)}
.status-busy{color:var(--warn);border-color:var(--warn)}
.status-ok{color:var(--ok);border-color:var(--ok)}
.status-err{color:var(--err);border-color:var(--err)}

/* Layout */
#layout{flex:1;display:grid;grid-template-columns:300px 1fr 340px;min-height:0}
.panel{background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
#panel-right{border-right:none;border-left:1px solid var(--line)}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-2);border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.panel-header h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.panel-header.mini h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-1)}
.collapse-icon{color:var(--text-1);font-size:10px}
.panel-body{flex:1;overflow-y:auto;padding:10px;min-height:0}
.panel.collapsed .panel-body{display:none}
#layout .panel.collapsed{grid-template-columns:auto}
#panel-left.collapsed{width:34px}
#panel-right.collapsed{width:34px}
#panel-left.collapsed .panel-header h2,#panel-right.collapsed .panel-header h2{display:none}
#layout:has(#panel-left.collapsed){grid-template-columns:34px 1fr 340px}
#layout:has(#panel-right.collapsed){grid-template-columns:300px 1fr 34px}
#layout:has(#panel-left.collapsed):has(#panel-right.collapsed){grid-template-columns:34px 1fr 34px}

/* Controls */
fieldset.group{border:1px solid var(--line);border-radius:5px;padding:8px 10px 10px;margin:10px 0}
fieldset.group legend{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-1);padding:0 5px}
.field{display:flex;flex-direction:column;gap:3px;margin:7px 0}
.field>span{color:var(--text-1);font-size:12px;display:flex;justify-content:space-between}
.field .value-readout{font-family:var(--mono);color:var(--accent);font-size:11px}
input[type=text],input[type=number],select{background:var(--bg-0);color:var(--text-0);border:1px solid var(--line);border-radius:3px;padding:5px 7px;font-family:var(--mono);font-size:12px;width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[type=range]{width:100%;accent-color:var(--accent)}
.btn{background:var(--bg-3);color:var(--text-0);border:1px solid var(--line);border-radius:4px;padding:7px 10px;font-size:12px;cursor:pointer;transition:background .12s}
.btn:hover:not(:disabled){background:#313847;border-color:#4a5468}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#14100a;font-weight:600}
.btn-primary:hover:not(:disabled){background:#ffa347}
.btn-accent{border-color:var(--accent);color:var(--accent)}
.btn-small{padding:4px 8px;font-size:11px}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.btn-row .btn{flex:1}
.mode-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.help-text{font-family:var(--mono);font-size:11px;color:var(--text-1);line-height:1.6}

/* Viewport */
#panel-center{display:flex;flex-direction:column;min-width:0;min-height:0}
#viewport-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 10px;background:var(--bg-1);border-bottom:1px solid var(--line)}
.toolbar-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.toggle-inline{display:flex;align-items:center;gap:5px;color:var(--text-1);font-size:11px;cursor:pointer;white-space:nowrap}
#viewport-wrap{flex:1;position:relative;min-height:0;background:#0a0c10}
#viewport{width:100%;height:100%;display:block}
#viewport-overlay{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:11px;color:var(--text-1);pointer-events:none;text-shadow:0 1px 2px #000}
#overlay-seed{color:var(--accent)}
#fp-help{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#000a;padding:10px 16px;border:1px solid var(--line);border-radius:5px;pointer-events:none}
#fp-help pre{font-family:var(--mono);font-size:11px;color:var(--text-0);line-height:1.7;text-align:center}
.hidden{display:none !important}
.floating-panel{position:absolute;top:10px;right:10px;width:190px;background:#12151bee;border:1px solid var(--line);border-radius:5px;max-height:calc(100% - 20px);display:flex;flex-direction:column;overflow:hidden}
.floating-panel .panel-body{padding:6px 10px}
.floating-panel.collapsed .panel-body{display:none}
#visibility-toggles label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-1);padding:2px 0;cursor:pointer}
#visibility-toggles .swatch{width:10px;height:10px;border-radius:2px;display:inline-block;border:1px solid #0006}
#status-bar{padding:5px 12px;background:var(--bg-1);border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--text-1);min-height:26px}
#status-bar.ok{color:var(--ok)} #status-bar.warn{color:var(--warn)} #status-bar.err{color:var(--err)}

/* Validation panel */
.validation-banner{padding:10px;border-radius:5px;font-weight:600;font-size:12px;margin-bottom:8px;border:1px solid var(--line)}
.state-idle{color:var(--text-1)}
.state-valid{background:#1c3320;color:var(--ok);border-color:var(--ok)}
.state-warning{background:#33301c;color:var(--warn);border-color:var(--warn)}
.state-fatal{background:#331c1c;color:var(--err);border-color:var(--err)}
#validation-stats table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
#validation-stats td{padding:2px 4px;border-bottom:1px solid #232833}
#validation-stats td:last-child{text-align:right;color:var(--text-0)}
#validation-stats td:first-child{color:var(--text-1)}
#validation-stats tr.stat-ok td:last-child{color:var(--ok)}
#validation-stats tr.stat-warn td:last-child{color:var(--warn)}
#validation-stats tr.stat-err td:last-child{color:var(--err)}
#validation-stats .stat-section td{color:var(--accent);text-transform:uppercase;font-size:10px;letter-spacing:.1em;padding-top:8px}
#validation-messages{margin-top:8px}
#validation-messages .msg{font-family:var(--mono);font-size:11px;padding:4px 6px;border-left:3px solid var(--line);margin:4px 0;background:var(--bg-2);word-break:break-word}
#validation-messages .msg.err{border-color:var(--err);color:#ff9b99}
#validation-messages .msg.warn{border-color:var(--warn);color:#efdb8c}
#map-preview{width:100%;height:260px;background:var(--bg-0);color:#b9c2d4;border:1px solid var(--line);border-radius:4px;font-family:var(--mono);font-size:10px;padding:8px;resize:vertical;white-space:pre}

/* Scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#3a4252}

/* Responsive */
@media (max-width:1100px){
  #layout{grid-template-columns:260px 1fr 300px}
}
@media (max-width:900px){
  html,body{overflow:auto}
  #layout{display:flex;flex-direction:column}
  .panel{border:none;border-bottom:1px solid var(--line)}
  #viewport-wrap{height:60vh}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* Per-setting lock buttons (Randomize never changes locked settings). */
.field-label{display:flex;align-items:center;gap:6px;justify-content:space-between}
/* Checkbox and color fields sit on one line with their label. */
.field-inline{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.field-inline>.field-label{flex:1}
.field-inline>input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.field-inline>input[type=color]{width:44px;height:24px;flex:0 0 auto;padding:1px;background:var(--bg-0);border:1px solid var(--line);border-radius:3px;cursor:pointer}
.lock-btn{background:none;border:1px solid var(--border,#333);border-radius:4px;cursor:pointer;
  font-size:11px;line-height:1;padding:2px 4px;opacity:.45;filter:grayscale(1)}
.lock-btn:hover{opacity:.9}
.lock-btn.locked{opacity:1;filter:none;border-color:var(--accent,#e8a33d)}