/* ========================================================================
   LUMINA — Settings modal (Preferences + Project Save/Load + Diagnostics)
   ======================================================================== */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

const SETTINGS_TABS = [
  { id: "general",   label: "General",   icon: "⚙" },
  { id: "audio",     label: "Audio I/O", icon: "♪" },
  { id: "video",     label: "Video I/O", icon: "▣" },
  { id: "midi",      label: "MIDI / OSC", icon: "▤" },
  { id: "output",    label: "Outputs",   icon: "▦" },
  { id: "project",   label: "Project",   icon: "💾" },
  { id: "shortcuts", label: "Shortcuts", icon: "⌨" },
  { id: "about",     label: "About",     icon: "ⓘ" },
];

const SHORTCUTS = [
  { key: "Space", action: "Play / Pause audio" },
  { key: "Esc", action: "Exit fullscreen / cast mode" },
  { key: "1-8", action: "Trigger clip on selected row (Live Loops)" },
  { key: "Q-W-E-R-T-Y-U-I", action: "Trigger clips row 2" },
  { key: "A-S-D-F-G-H-J-K", action: "Trigger clips row 3" },
  { key: "Z-X-C-V-B-N-M", action: "Trigger clips row 4" },
  { key: "L", action: "Toggle Live mode" },
  { key: "B", action: "PANIC blackout output" },
  { key: "Cmd/Ctrl + S", action: "Save project" },
  { key: "Cmd/Ctrl + O", action: "Open project" },
];

const RESOLUTIONS = ["1280x720", "1920x1080", "2560x1440", "3840x2160", "1080x1920", "1080x1080", "2048x2048", "1280x1280"];

function SettingsModal({ open, onClose, settings, setSettings,
                         onSave, onLoad, onExportPreset, onImportPreset,
                         projectName, setProjectName }) {
  const [tab, setTab] = useStateS("general");
  const [audioDevices, setAudioDevices] = useStateS([]);
  const [midiDevices, setMidiDevices] = useStateS([]);
  const fileRef = useRefS(null);

  useEffectS(() => {
    if (!open) return;
    // List audio devices
    if (navigator.mediaDevices?.enumerateDevices) {
      navigator.mediaDevices.enumerateDevices().then(devs => {
        setAudioDevices(devs.filter(d => d.kind === "audioinput" || d.kind === "audiooutput"));
      });
    }
    // List MIDI devices
    if (navigator.requestMIDIAccess) {
      navigator.requestMIDIAccess().then(access => {
        const list = [];
        access.inputs.forEach(i => list.push({ id: i.id, name: i.name || "MIDI Input", kind: "in" }));
        access.outputs.forEach(o => list.push({ id: o.id, name: o.name || "MIDI Output", kind: "out" }));
        setMidiDevices(list);
      }).catch(() => {});
    }
  }, [open]);

  if (!open) return null;

  const upd = (patch) => setSettings(s => ({ ...s, ...patch }));

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}
        style={{
          width: "min(960px, 96vw)",
          maxHeight: "92vh",
          padding: 0,
          display: "grid", gridTemplateRows: "auto 1fr auto",
          overflow: "hidden",
        }}>
        {/* Header */}
        <div style={{
          padding: "14px 20px",
          borderBottom: "1px solid rgba(255,255,255,0.06)",
          display: "flex", alignItems: "center", gap: 12,
          background: "linear-gradient(180deg, var(--panel-hi), var(--panel))",
        }}>
          <div className="brand-mark" style={{ width: 32, height: 32, fontSize: 14 }}>L</div>
          <div style={{ flex: 1 }}>
            <div className="modal-title" style={{ fontSize: 14, margin: 0 }}>Settings</div>
            <div style={{ fontSize: 10, color: "var(--ink-faint)", fontFamily: "var(--font-mono)" }}>
              {SETTINGS_TABS.find(t => t.id === tab)?.label} · Lumina VJ Suite v2026.1
            </div>
          </div>
          <button className="nbtn compact" onClick={onClose}>✕</button>
        </div>

        {/* Body */}
        <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 0, minHeight: 0 }}>
          {/* Sidebar */}
          <div style={{
            borderRight: "1px solid rgba(255,255,255,0.06)",
            background: "linear-gradient(180deg, #14141a, #0a0a0c)",
            padding: 10,
            display: "flex", flexDirection: "column", gap: 3,
          }}>
            {SETTINGS_TABS.map(t => (
              <button key={t.id}
                onClick={() => setTab(t.id)}
                style={{
                  display: "flex", alignItems: "center", gap: 8,
                  padding: "8px 10px",
                  border: "none", borderRadius: 6,
                  background: tab === t.id
                    ? "linear-gradient(180deg, var(--panel-hi), var(--panel))"
                    : "transparent",
                  color: tab === t.id ? "var(--accent)" : "var(--ink-dim)",
                  textShadow: tab === t.id ? "0 0 4px var(--accent-glow)" : "none",
                  fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 600,
                  letterSpacing: "0.08em", textTransform: "uppercase",
                  cursor: "pointer", textAlign: "left",
                  boxShadow: tab === t.id ? "var(--nshadow-out-sm)" : "none",
                }}>
                <span style={{ fontSize: 14 }}>{t.icon}</span>
                {t.label}
              </button>
            ))}
          </div>

          {/* Content */}
          <div style={{ padding: 20, overflowY: "auto", maxHeight: "72vh" }}>
            {tab === "general" && (
              <Section title="General">
                <Row label="Project name">
                  <input value={projectName} onChange={e => setProjectName(e.target.value)} style={inpStyle} />
                </Row>
                <Row label="Theme">
                  <SegSeg value={settings.theme || "dark"} onChange={v => upd({ theme: v })} options={["dark", "light", "amber"]} />
                </Row>
                <Row label="Framerate cap">
                  <SegSeg value={settings.fps || "60"} onChange={v => upd({ fps: v })} options={["30", "60", "120", "unlocked"]} />
                </Row>
                <Row label="Density / quality">
                  <SegSeg value={settings.quality || "high"} onChange={v => upd({ quality: v })} options={["low", "med", "high", "ultra"]} />
                </Row>
                <Row label="Autosave">
                  <SegSeg value={settings.autosave || "off"} onChange={v => upd({ autosave: v })} options={["off", "1m", "5m", "15m"]} />
                </Row>
                <Row label="Language / lingua">
                  <SegSeg value={settings.lang || "en"} onChange={v => upd({ lang: v })} options={["en", "it", "es", "fr"]} />
                </Row>
                <Row label="Reduced motion">
                  <Flip value={!!settings.reducedMotion} onChange={v => upd({ reducedMotion: v })} />
                </Row>
                <Row label="Show tooltips">
                  <Flip value={settings.tooltips !== false} onChange={v => upd({ tooltips: v })} />
                </Row>
              </Section>
            )}

            {tab === "audio" && (
              <Section title="Audio Input / Output">
                <Row label="Input device">
                  <select style={inpStyle} value={settings.audioIn || ""}
                    onChange={e => upd({ audioIn: e.target.value })}>
                    <option value="">Default microphone</option>
                    {audioDevices.filter(d => d.kind === "audioinput").map(d => (
                      <option key={d.deviceId} value={d.deviceId}>{d.label || "Audio Input"}</option>
                    ))}
                  </select>
                </Row>
                <Row label="Output device">
                  <select style={inpStyle} value={settings.audioOut || ""}
                    onChange={e => upd({ audioOut: e.target.value })}>
                    <option value="">Default speakers</option>
                    {audioDevices.filter(d => d.kind === "audiooutput").map(d => (
                      <option key={d.deviceId} value={d.deviceId}>{d.label || "Audio Output"}</option>
                    ))}
                  </select>
                </Row>
                <Row label="Sample rate">
                  <SegSeg value={settings.sampleRate || "44100"} onChange={v => upd({ sampleRate: v })}
                    options={["44100", "48000", "88200", "96000"]} />
                </Row>
                <Row label="Buffer size">
                  <SegSeg value={settings.bufferSize || "512"} onChange={v => upd({ bufferSize: v })}
                    options={["128", "256", "512", "1024", "2048"]} />
                </Row>
                <Row label="FFT size">
                  <SegSeg value={settings.fftSize || "2048"} onChange={v => upd({ fftSize: v })}
                    options={["512", "1024", "2048", "4096", "8192"]} />
                </Row>
                <Row label="Master limiter">
                  <Flip value={settings.limiter !== false} onChange={v => upd({ limiter: v })} />
                </Row>
                <Row label="Auto-gain on input">
                  <Flip value={!!settings.autoGain} onChange={v => upd({ autoGain: v })} />
                </Row>
                <div style={{ padding: 10, marginTop: 14,
                  background: "rgba(75,230,255,0.04)", border: "1px solid rgba(75,230,255,0.15)",
                  borderRadius: 6, fontSize: 10, color: "var(--ink-dim)", lineHeight: 1.5 }}>
                  <b style={{ color: "var(--led-cyan)" }}>Tip:</b> if mic doesn't work, check browser permissions.
                  Lower buffer = lower latency but more CPU. Higher FFT = better frequency resolution but slower.
                </div>
              </Section>
            )}

            {tab === "video" && (
              <Section title="Video Output">
                <Row label="Output resolution">
                  <select style={inpStyle} value={settings.outRes || "1920x1080"}
                    onChange={e => upd({ outRes: e.target.value })}>
                    {RESOLUTIONS.map(r => <option key={r}>{r}</option>)}
                  </select>
                </Row>
                <Row label="Pixel ratio">
                  <SegSeg value={String(settings.pixelRatio || "auto")} onChange={v => upd({ pixelRatio: v })}
                    options={["1", "1.5", "2", "auto"]} />
                </Row>
                <Row label="Render quality">
                  <SegSeg value={settings.renderQ || "high"} onChange={v => upd({ renderQ: v })}
                    options={["draft", "med", "high", "best"]} />
                </Row>
                <Row label="Color space">
                  <SegSeg value={settings.colorSpace || "srgb"} onChange={v => upd({ colorSpace: v })}
                    options={["srgb", "p3", "rec2020"]} />
                </Row>
                <Row label="HDR (if supported)">
                  <Flip value={!!settings.hdr} onChange={v => upd({ hdr: v })} />
                </Row>
                <Row label="V-sync">
                  <Flip value={settings.vsync !== false} onChange={v => upd({ vsync: v })} />
                </Row>
                <Row label="Anti-aliasing">
                  <SegSeg value={settings.aa || "msaa4"} onChange={v => upd({ aa: v })}
                    options={["off", "fxaa", "msaa4", "msaa8"]} />
                </Row>
              </Section>
            )}

            {tab === "midi" && (
              <Section title="MIDI & OSC">
                <div style={{
                  padding: 10, marginBottom: 14,
                  background: "rgba(255,174,58,0.06)", border: "1px solid rgba(255,174,58,0.2)",
                  borderRadius: 6, fontSize: 10, color: "var(--ink-dim)", lineHeight: 1.5,
                }}>
                  <b style={{ color: "var(--accent)" }}>Web MIDI</b>: detected {midiDevices.length} device{midiDevices.length === 1 ? "" : "s"}.
                  Connect a USB-MIDI controller (pad grid, knob bank, keyboard) — it will appear here.
                </div>
                {midiDevices.length === 0 && (
                  <div style={{ padding: 16, textAlign: "center", color: "var(--ink-faint)", fontSize: 11 }}>
                    No MIDI devices detected.<br/>
                    <span style={{ fontSize: 10 }}>Connect a USB MIDI controller, then reopen Settings.</span>
                  </div>
                )}
                {midiDevices.map(d => (
                  <Row key={d.id} label={d.kind === "in" ? "MIDI In" : "MIDI Out"}>
                    <div style={{ flex: 1, padding: "5px 8px",
                      background: "linear-gradient(180deg,#0a0a0c,#14141a)",
                      borderRadius: 4, boxShadow: "var(--nshadow-in-sm)",
                      fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--led-cyan)",
                      textShadow: "0 0 3px var(--led-cyan-glow)",
                    }}>{d.name}</div>
                  </Row>
                ))}
                <Row label="MIDI learn mode">
                  <Flip value={!!settings.midiLearn} onChange={v => upd({ midiLearn: v })} />
                </Row>
                <Row label="OSC server port">
                  <input type="number" value={settings.oscPort || 9000}
                    onChange={e => upd({ oscPort: Number(e.target.value) })} style={inpStyle} />
                </Row>
                <Row label="OSC IP">
                  <input value={settings.oscHost || "127.0.0.1"}
                    onChange={e => upd({ oscHost: e.target.value })} style={inpStyle} />
                </Row>
                <Row label="OSC enabled">
                  <Flip value={!!settings.oscEnabled} onChange={v => upd({ oscEnabled: v })} />
                </Row>
                <Row label="DMX / Art-Net output">
                  <Flip value={!!settings.artnet} onChange={v => upd({ artnet: v })} />
                </Row>
              </Section>
            )}

            {tab === "output" && (
              <Section title="Outputs & Display Mapping">
                <Row label="Output mode">
                  <SegSeg value={settings.outMode || "single"} onChange={v => upd({ outMode: v })}
                    options={["single", "dual", "triple", "matrix"]} />
                </Row>
                <Row label="Primary display">
                  <SegSeg value={settings.primary || "preview"} onChange={v => upd({ primary: v })}
                    options={["preview", "live", "both"]} />
                </Row>
                <Row label="Cast / mirror">
                  <SegSeg value={settings.castTo || "fullscreen"} onChange={v => upd({ castTo: v })}
                    options={["fullscreen", "window", "ndi", "spout", "airplay"]} />
                </Row>
                <Row label="Keystone correction">
                  <Flip value={!!settings.keystone} onChange={v => upd({ keystone: v })} />
                </Row>
                <Row label="Edge blend">
                  <Flip value={!!settings.edgeBlend} onChange={v => upd({ edgeBlend: v })} />
                </Row>
                <Row label="Bezel compensation">
                  <Flip value={!!settings.bezel} onChange={v => upd({ bezel: v })} />
                </Row>
                <Row label="Stage safe area %">
                  <input type="number" min="0" max="20" value={settings.safe || 5}
                    onChange={e => upd({ safe: Number(e.target.value) })} style={inpStyle} />
                </Row>
                <Row label="Black on disconnect">
                  <Flip value={settings.blackOnDisconnect !== false} onChange={v => upd({ blackOnDisconnect: v })} />
                </Row>
              </Section>
            )}

            {tab === "project" && (
              <Section title="Project — Save, Load, Presets">
                <div style={{
                  padding: 14, marginBottom: 14,
                  background: "linear-gradient(180deg, var(--panel-hi), var(--panel))",
                  borderRadius: 8, boxShadow: "var(--nshadow-out-sm)",
                }}>
                  <div className="cap" style={{ marginBottom: 6 }}>Current Project</div>
                  <div style={{
                    fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700,
                    color: "var(--accent)", textShadow: "0 0 6px var(--accent-glow)",
                  }}>{projectName || "Untitled"}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--ink-faint)", marginTop: 4 }}>
                    Last modified: just now
                  </div>
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                  <button className="nbtn glow pressed" style={{ padding: "12px 16px", fontWeight: 700 }}
                    onClick={onSave}>
                    💾 Save Project (.lumina.json)
                  </button>
                  <input ref={fileRef} type="file" accept=".json,.lumina" hidden
                    onChange={e => e.target.files[0] && onLoad(e.target.files[0])} />
                  <button className="nbtn" style={{ padding: "12px 16px", fontWeight: 700 }}
                    onClick={() => fileRef.current.click()}>
                    📂 Load Project
                  </button>
                </div>

                <div style={{ marginTop: 14 }}>
                  <div className="cap" style={{ marginBottom: 6 }}>Project includes</div>
                  <div style={{
                    fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--ink-dim)",
                    lineHeight: 1.7, padding: "8px 10px",
                    background: "linear-gradient(180deg,#0a0a0c,#14141a)",
                    borderRadius: 6, boxShadow: "var(--nshadow-in-sm)",
                  }}>
                    ✓ Active visualizer + parameters<br/>
                    ✓ Behaviors (audio modulators)<br/>
                    ✓ FX chain (post-processing)<br/>
                    ✓ Cloner + Script<br/>
                    ✓ Settings preferences<br/>
                    ⚠ Imported media files NOT bundled (re-import per session)<br/>
                  </div>
                </div>

                <div className="cap" style={{ marginTop: 16, marginBottom: 6 }}>Presets</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                  <button className="nbtn compact" onClick={() => onExportPreset("behaviors")}>
                    ⬇ Export Behaviors
                  </button>
                  <button className="nbtn compact" onClick={() => onImportPreset("behaviors")}>
                    ⬆ Import Behaviors
                  </button>
                  <button className="nbtn compact" onClick={() => onExportPreset("fx")}>
                    ⬇ Export FX Chain
                  </button>
                  <button className="nbtn compact" onClick={() => onImportPreset("fx")}>
                    ⬆ Import FX Chain
                  </button>
                </div>

                <div className="cap" style={{ marginTop: 16 }}>Recent Projects</div>
                <div style={{
                  padding: 10, fontSize: 10, color: "var(--ink-faint)",
                  fontFamily: "var(--font-mono)",
                  background: "linear-gradient(180deg,#0a0a0c,#14141a)",
                  borderRadius: 6, boxShadow: "var(--nshadow-in-sm)",
                }}>
                  {(JSON.parse(localStorage.getItem("lumina_recent") || "[]")).slice(0, 5).map((r, i) => (
                    <div key={i} style={{ padding: "4px 0", borderBottom: i < 4 ? "1px solid rgba(255,255,255,0.04)" : "none" }}>
                      📄 {r}
                    </div>
                  )) || <div style={{ opacity: 0.5 }}>No recent projects.</div>}
                </div>
              </Section>
            )}

            {tab === "shortcuts" && (
              <Section title="Keyboard Shortcuts">
                <div style={{
                  fontSize: 11, color: "var(--ink-dim)", marginBottom: 14,
                }}>
                  Use these anywhere in the app for fast control.
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                  {SHORTCUTS.map((s, i) => (
                    <div key={i} style={{
                      display: "grid", gridTemplateColumns: "160px 1fr",
                      padding: "8px 0",
                      borderBottom: "1px solid rgba(255,255,255,0.04)",
                      alignItems: "center",
                    }}>
                      <div style={{
                        fontFamily: "var(--font-mono)", fontSize: 10,
                        color: "var(--accent)", textShadow: "0 0 3px var(--accent-glow)",
                        letterSpacing: "0.08em",
                      }}>
                        {s.key.split(" ").map((k, j) => (
                          <span key={j} style={{
                            padding: "2px 6px", margin: "0 2px",
                            background: "linear-gradient(180deg,#0a0a0c,#14141a)",
                            borderRadius: 3, boxShadow: "var(--nshadow-in-sm)",
                            display: "inline-block",
                          }}>{k}</span>
                        ))}
                      </div>
                      <div style={{ fontSize: 11, color: "var(--ink)" }}>{s.action}</div>
                    </div>
                  ))}
                </div>
              </Section>
            )}

            {tab === "about" && (
              <Section title="About Lumina">
                <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }}>
                  <div className="brand-mark" style={{ width: 56, height: 56, fontSize: 24 }}>L</div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800,
                      letterSpacing: "0.1em", color: "var(--ink)" }}>LUMINA</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-dim)" }}>
                      VJ Suite · v2026.1
                    </div>
                  </div>
                </div>
                <div style={{ fontSize: 11, color: "var(--ink-dim)", lineHeight: 1.6 }}>
                  <p>An audio-reactive visual performance suite. Built for live VJs, DJs, lighting designers, and motion artists.</p>
                  <div className="cap" style={{ marginTop: 14, marginBottom: 6 }}>Open Standards</div>
                  <ul style={{ marginLeft: 18, padding: 0 }}>
                    <li>Web Audio API · Web MIDI · WebGL via Three.js (MIT)</li>
                    <li>FLUX.1-schnell (Apache 2.0) recommended for AI</li>
                    <li>OSC / Art-Net (open protocols)</li>
                    <li>Project save format: JSON (open, portable)</li>
                  </ul>
                  <div className="cap" style={{ marginTop: 14, marginBottom: 6 }}>License</div>
                  <p>All Lumina output is yours — no watermark, no royalties, commercial use OK.</p>
                  <div className="cap" style={{ marginTop: 14, marginBottom: 6 }}>Diagnostics</div>
                  <DiagnosticsBlock />
                </div>
              </Section>
            )}
          </div>
        </div>

        {/* Footer */}
        <div style={{
          padding: "12px 20px",
          borderTop: "1px solid rgba(255,255,255,0.06)",
          background: "linear-gradient(180deg, var(--panel), var(--panel-lo))",
          display: "flex", justifyContent: "space-between", alignItems: "center",
        }}>
          <span style={{ fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--ink-faint)" }}>
            Settings auto-save to browser storage.
          </span>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="nbtn compact" onClick={() => setSettings({})}>Reset Defaults</button>
            <button className="nbtn glow pressed" onClick={onClose}>Done</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Section({ title, children }) {
  return (
    <div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 700,
        letterSpacing: "0.2em", textTransform: "uppercase",
        color: "var(--ink-dim)", marginBottom: 14,
        paddingBottom: 6,
        borderBottom: "1px solid rgba(255,255,255,0.06)",
      }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {children}
      </div>
    </div>
  );
}
function Row({ label, children }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "160px 1fr", gap: 14, alignItems: "center" }}>
      <span className="cap" style={{ fontSize: 9 }}>{label}</span>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>{children}</div>
    </div>
  );
}
function SegSeg({ value, onChange, options }) {
  return (
    <div className="chips" style={{ padding: 3, flex: 1 }}>
      {options.map(o => (
        <button key={o} className={`chip ${value === o ? "active" : ""}`}
          onClick={() => onChange(o)} style={{ padding: "5px 8px", fontSize: 9 }}>
          {o.toUpperCase()}
        </button>
      ))}
    </div>
  );
}
const inpStyle = {
  flex: 1,
  background: "linear-gradient(180deg,#0a0a0c,#14141a)",
  border: "none", borderRadius: 4, padding: "6px 8px",
  color: "var(--ink)", fontFamily: "var(--font-mono)", fontSize: 11,
  boxShadow: "var(--nshadow-in-sm)", outline: "none",
};
function DiagnosticsBlock() {
  const diag = {
    "User Agent": navigator.userAgent.slice(0, 60) + "…",
    "Web Audio": !!window.AudioContext || !!window.webkitAudioContext ? "✓ supported" : "✗ unavailable",
    "WebGL": !!document.createElement("canvas").getContext("webgl") ? "✓ supported" : "✗ unavailable",
    "Web MIDI": !!navigator.requestMIDIAccess ? "✓ supported" : "✗ unavailable",
    "Three.js": window.THREE ? `✓ ${window.THREE.REVISION}` : "✗ not loaded",
    "GLTFLoader": window.THREE?.GLTFLoader ? "✓" : "✗",
    "OBJLoader":  window.THREE?.OBJLoader ? "✓" : "✗",
    "PLYLoader":  window.THREE?.PLYLoader ? "✓" : "✗",
    "STLLoader":  window.THREE?.STLLoader ? "✓" : "✗",
  };
  return (
    <div style={{
      padding: 10, fontFamily: "var(--font-mono)", fontSize: 10,
      background: "linear-gradient(180deg,#0a0a0c,#14141a)",
      borderRadius: 6, boxShadow: "var(--nshadow-in-sm)",
      color: "var(--led-cyan)", textShadow: "0 0 3px var(--led-cyan-glow)",
      lineHeight: 1.7,
    }}>
      {Object.entries(diag).map(([k, v]) => (
        <div key={k} style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 8 }}>
          <span style={{ color: "var(--ink-dim)" }}>{k}</span>
          <span>{v}</span>
        </div>
      ))}
    </div>
  );
}

window.SettingsModal = SettingsModal;