:root { color-scheme: dark; --ink:#e7eef8; --muted:#8291a8; --faint:#526177; --line:rgba(157,180,211,.16); --cyan:#53d7e8; --blue:#4799ff; --red:#ff5f6d; --green:#73e0a9; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:#060d18; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
.app-shell { width:min(1500px,100%); min-height:100vh; margin:0 auto; padding:0 30px; }
.topbar { min-height:94px; display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line); }
.brand-mark { position:relative; width:42px; height:42px; border:1px solid rgba(83,215,232,.45); border-radius:50%; }
.brand-mark::before,.brand-mark::after,.brand-mark span,.brand-mark i { content:""; position:absolute; inset:8px; border:1px solid rgba(83,215,232,.65); border-radius:50%; transform:rotate(58deg) scaleX(.38); }
.brand-mark::after { transform:rotate(-58deg) scaleX(.38); }
.brand-mark span { transform:scaleY(.38); }
.brand-mark i { inset:18px; border:0; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.title-block p,.eyebrow { margin:0 0 5px; color:var(--cyan); font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; text-transform:uppercase; }
.title-block h1 { margin:0; font-size:clamp(19px,2vw,25px); line-height:1; letter-spacing:-.02em; }
.solver-state { margin-left:auto; color:var(--muted); font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.solver-state span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(115,224,169,.65); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 360px; min-height:calc(100vh - 144px); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.viewport-panel { min-width:0; padding:27px 28px 22px; }
.panel-heading,.control-heading { min-height:52px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.panel-heading h2,.control-heading h2 { margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.legend { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; white-space:nowrap; }
.legend span { width:9px; height:9px; border-radius:2px; }
.legend .negative { margin-left:10px; background:var(--blue); }
.legend .positive { background:var(--red); }
.canvas-wrap { position:relative; height:clamp(440px,64vh,720px); overflow:hidden; border:1px solid rgba(153,178,211,.2); background:#07111f; }
#field-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.coordinate-readout { position:absolute; top:13px; right:14px; padding:7px 9px; border:1px solid var(--line); background:rgba(4,10,18,.78); color:#aebbd0; font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; }
.canvas-help { position:absolute; left:14px; bottom:11px; margin:0; color:rgba(190,205,226,.55); font:500 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.equation-bar { display:flex; align-items:center; gap:7px; min-height:52px; padding:0 15px; border:1px solid var(--line); border-top:0; color:#a7b7cd; font:500 12px/1.2 Georgia,serif; }
.equation-bar .sigma { color:var(--cyan); font-size:24px; }
.equation-bar .units { margin-left:auto; color:var(--faint); font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.1em; }
.control-panel { padding:27px 23px 22px; border-left:1px solid var(--line); background:linear-gradient(180deg,rgba(15,29,47,.84),rgba(8,18,31,.84)); }
.quiet-button,.reset-button { border:1px solid var(--line); background:transparent; cursor:pointer; }
.quiet-button { padding:8px 11px; color:#aab8ca; font-size:11px; }
.quiet-button:hover,.reset-button:hover { border-color:rgba(83,215,232,.5); color:var(--cyan); }
.column-labels,.charge-row { display:grid; grid-template-columns:1.45fr .8fr .8fr .8fr 25px; align-items:center; gap:7px; }
.column-labels { padding:16px 9px 8px; color:var(--faint); font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; text-transform:uppercase; }
.charge-list { border-top:1px solid var(--line); }
.charge-row { min-height:58px; padding:9px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.012); }
.charge-name { display:flex; align-items:center; gap:8px; color:#c9d5e5; font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.charge-dot { width:9px; height:9px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.charge-row input { width:100%; height:31px; padding:0 5px; border:1px solid rgba(153,178,211,.17); border-radius:0; outline:0; background:#081423; color:#dce6f3; text-align:center; font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.charge-row input:focus { border-color:var(--cyan); }
.remove-charge { width:25px; height:30px; padding:0; border:0; background:transparent; color:var(--faint); cursor:pointer; }
.remove-charge:hover { color:var(--red); }
.readout-grid { display:grid; grid-template-columns:1fr 1fr; margin:24px 0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.readout-grid div { padding:12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.readout-grid span { display:block; margin-bottom:5px; color:var(--faint); font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.readout-grid strong { color:#bdcadd; font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.solve-button { width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border:1px solid var(--cyan); background:rgba(83,215,232,.08); color:#d7faff; cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.02em; }
.solve-button:hover { background:rgba(83,215,232,.14); }
.solve-button:disabled { opacity:.55; cursor:wait; }
.solve-button i { color:var(--cyan); font-size:18px; font-style:normal; }
.reset-button { width:100%; margin-top:9px; padding:10px; color:var(--muted); font-size:11px; }
.status-line { min-height:34px; margin:16px 2px 0; color:var(--muted); font:500 10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
footer { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#4f6076; font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
@media (max-width:900px) { .app-shell{padding:0 16px}.workspace{grid-template-columns:1fr}.control-panel{border-top:1px solid var(--line);border-left:0}.canvas-wrap{height:55vh;min-height:400px} }
@media (max-width:560px) { .app-shell{padding:0}.topbar{padding:0 16px}.solver-state,.legend{display:none}.viewport-panel,.control-panel{padding:20px 14px}.canvas-wrap{height:440px}footer{padding:14px;flex-wrap:wrap} }