:root {
  --bg: #080b10;
  --panel: #0e131b;
  --panel-2: #121923;
  --panel-3: #171f2b;
  --line: #222c39;
  --text: #eef4ff;
  --muted: #8592a6;
  --accent: #7a8cff;
  --accent-2: #a96cff;
  --good: #59d69a;
  --danger: #ff6d78;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; border-right: 1px solid var(--line); background: #090d13; display: flex; flex-direction: column; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 7px 24px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.brand strong, .brand span { display: block; }
.brand span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.nav-tabs { display: grid; gap: 6px; }
.nav-tab { width: 100%; border: 0; background: transparent; color: var(--muted); border-radius: 9px; padding: 11px 12px; text-align: left; cursor: pointer; display: flex; gap: 10px; }
.nav-tab:hover { background: var(--panel); color: var(--text); }
.nav-tab.active { background: var(--panel-2); color: white; box-shadow: inset 2px 0 0 var(--accent); }
.sidebar-footer { margin-top: auto; padding: 12px 8px; color: var(--muted); font-size: 11px; display: flex; gap: 8px; align-items: center; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px var(--good); }
.workspace { min-width: 0; }
.panel { display: none; }
.panel.active { display: block; }
.topbar { height: 94px; padding: 20px 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 10px; letter-spacing: .14em; font-weight: 800; }
h1 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
h2 { margin: 0; font-size: 14px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.name-input, input, select { border: 1px solid var(--line); color: var(--text); background: #0a0f16; border-radius: 8px; outline: none; }
.name-input { width: 160px; padding: 9px 11px; }
input, select { width: 100%; padding: 9px 10px; margin-top: 6px; }
input:focus, select:focus { border-color: #5664ba; box-shadow: 0 0 0 3px rgba(122,140,255,.09); }
.button, .mini-button, .icon-button { border: 1px solid var(--line); cursor: pointer; }
.button { border-radius: 8px; padding: 9px 14px; font-weight: 700; }
.button.primary { border-color: transparent; background: linear-gradient(135deg, #6378ff, #8c64ff); }
.button.primary:hover { filter: brightness(1.08); }
.button.ghost { background: var(--panel-2); }
.button:disabled { opacity: .55; cursor: default; }
.builder-grid { padding: 20px; display: grid; grid-template-columns: minmax(300px, 390px) 1fr; gap: 16px; }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: 13px; overflow: hidden; }
.controls-card { padding: 17px; align-self: start; max-height: calc(100vh - 134px); overflow: auto; }
.card-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.card-heading span { color: var(--muted); font-size: 11px; }
.form-grid { display: grid; gap: 11px; }
.form-grid.two { grid-template-columns: repeat(2, 1fr); }
label { color: var(--muted); font-size: 11px; font-weight: 650; }
.toggles { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 0 2px; }
.toggles label { display: flex; align-items: center; gap: 6px; }
.toggles input { width: auto; margin: 0; }
.object-title { margin-top: 22px; }
.object-add-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mini-button { background: var(--panel-3); border-radius: 7px; padding: 7px 8px; font-size: 11px; }
.mini-button:hover { border-color: #46536a; }
.object-list { display: grid; gap: 8px; margin-top: 10px; }
.object-item { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #0b1017; }
.object-row { display: flex; justify-content: space-between; align-items: center; }
.object-summary { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.icon-button { background: transparent; border: 0; color: var(--muted); font-size: 18px; }
.icon-button:hover { color: var(--danger); }
.viewport-card { min-width: 0; }
.viewport-toolbar { height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.viewport-toolbar strong, .viewport-toolbar span { display: block; }
.viewport-toolbar strong { font-size: 12px; }
.viewport-toolbar span { color: var(--muted); font-size: 10px; margin-top: 2px; }
.viewport-badges { display: flex; gap: 5px; }
.viewport-badges span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; margin: 0; }
.viewport-wrap { position: relative; min-height: 520px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, #151c28 0, #0a0e14 55%, #070a0f 100%); }
#preview-canvas, #result-video { width: min(100%, 1100px); max-height: 70vh; object-fit: contain; }
#preview-canvas { display: block; }
#result-video { display: none; background: black; }
.empty-preview { position: absolute; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.empty-preview span { color: var(--muted); font-size: 12px; }
.orb { width: 42px; height: 42px; margin-bottom: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b6c2ff, #6574ff 45%, #3a225f); box-shadow: 0 0 50px rgba(122,140,255,.28); }
.job-card { border-top: 1px solid var(--line); padding: 14px 16px; background: #0a0f16; }
.job-card.hidden { display: none; }
.job-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.job-row.muted { color: var(--muted); margin-top: 7px; }
.progress-track { height: 6px; margin-top: 9px; background: #1d2632; border-radius: 999px; overflow: hidden; }
.progress-bar { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .25s ease; }
.tool-layout { padding: 20px; display: grid; grid-template-columns: 300px minmax(400px, 720px); gap: 16px; align-items: start; }
.list-card, .editor-card { padding: 17px; }
.selection-list { display: grid; gap: 6px; }
.selection-item { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #0b1017; cursor: pointer; }
.selection-item:hover, .selection-item.active { border-color: #4d5b74; background: var(--panel-2); }
.selection-item strong, .selection-item span { display: block; }
.selection-item span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.ball-preview { height: 180px; margin: 15px 0; border: 1px dashed #2d3949; border-radius: 10px; display: grid; place-items: center; background: #0a0f16; }
#ball-preview-dot { width: 80px; height: 80px; border-radius: 50%; background: #5082ff; box-shadow: 0 0 35px rgba(80,130,255,.25); }
.segment-heading { margin-top: 20px; }
.segment-list { display: grid; gap: 8px; margin-bottom: 14px; }
.segment-row { display: grid; grid-template-columns: 110px repeat(4, 1fr) 32px; gap: 7px; align-items: end; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.segment-row input, .segment-row select { margin-top: 4px; }
@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 78px 1fr; }
  .brand > div:last-child, .nav-tab { font-size: 0; }
  .nav-tab span { font-size: 16px; }
  .nav-tab { justify-content: center; }
  .sidebar-footer span:last-child { display: none; }
  .builder-grid, .tool-layout { grid-template-columns: 1fr; }
  .controls-card { max-height: none; }
}

/* --- Simulation Builder / Runner separation --- */
.builder-viewport { min-height: 560px; }
.builder-note {
  border-top: 1px solid var(--line);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  background: #0a0f16;
  font-size: 11px;
}
.builder-note span { color: var(--muted); text-align: right; }

.runner-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.runner-library-card {
  padding: 17px;
  max-height: calc(100vh - 134px);
  overflow: auto;
}
.runner-preview-card { min-width: 0; }
.runner-list { gap: 8px; }
.runner-sim-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.runner-sim-main { padding: 11px; min-width: 0; }
.runner-sim-main strong,
.runner-sim-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runner-sim-main span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.runner-sim-item .delete-simulation { height: 100%; min-height: 50px; }
.runner-viewport { min-height: 560px; }
#runner-canvas { width: min(100%, 1100px); max-height: 70vh; object-fit: contain; display: block; }
.runner-details {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: #0a0f16;
}
.runner-details > div { padding: 13px 15px; border-right: 1px solid var(--line); }
.runner-details > div:last-child { border-right: 0; }
.runner-details span,
.runner-details strong { display: block; }
.runner-details span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.runner-details strong { margin-top: 4px; font-size: 12px; }
.small-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
  border: 1px dashed #2d3949;
  border-radius: 9px;
  color: var(--muted);
}
.small-empty strong { color: var(--text); font-size: 12px; }
.small-empty span { font-size: 10px; }

@media (max-width: 1050px) {
  .runner-grid { grid-template-columns: 1fr; }
  .runner-library-card { max-height: none; }
}

@media (max-width: 700px) {
  .runner-details { grid-template-columns: repeat(2,1fr); }
  .builder-note { flex-direction: column; }
  .builder-note span { text-align: left; }
}

/* --- Ball Builder / Pair Force Builder --- */
.ball-builder-layout {
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 860px);
  gap: 16px;
  align-items: start;
}
.ball-library-card,
.ball-editor-card,
.force-segments-card { padding: 17px; }
.tool-hint,
.muted-copy,
.parameter-help { color: var(--muted); font-size: 11px; line-height: 1.55; }
.tool-hint { margin: -2px 0 14px; }
.ball-type-list { gap: 8px; }
.ball-type-item {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.ball-list-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 16px rgba(255,255,255,.06);
}
.editor-section-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.editor-section-title > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.editor-section-title span { color: var(--muted); font-size: 11px; }
.ball-editor-main {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(280px, 1fr);
  gap: 30px;
  align-items: stretch;
}
.ball-fields { display: grid; gap: 15px; align-content: start; }
.field-unit { float: right; font-weight: 500; color: #647288; }
.color-control { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 10px; align-items: center; margin-top: 6px; }
.color-control input[type="color"] { margin: 0; width: 74px; height: 42px; padding: 3px; cursor: pointer; }
.color-control span { color: var(--muted); font-size: 11px; }
.ball-preview-panel { min-width: 0; }
.preview-label-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.preview-label-row strong { font-size: 12px; }
.preview-label-row span { color: var(--muted); font-size: 10px; }
.ball-preview {
  height: 310px;
  margin: 9px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #090e15;
  background-size: 24px 24px;
  overflow: hidden;
}
#ball-preview-dot { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }
.editor-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.button.ghost-danger { color: #ff8b94; background: rgba(255,109,120,.04); }
.button.ghost-danger:not(:disabled):hover { border-color: rgba(255,109,120,.45); background: rgba(255,109,120,.08); }

.force-builder-layout {
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,360px);
  gap: 16px;
  align-items: start;
}
.force-graph-card { min-width: 0; }
.force-graph-toolbar {
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pair-controls { display: flex; align-items: center; gap: 8px; }
.pair-controls select { width: 92px; margin: 0; padding: 7px 9px; }
.pair-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.pair-arrow { color: var(--muted); }
.graph-legend { display: flex; gap: 14px; color: var(--muted); font-size: 10px; }
.graph-legend span { display: flex; align-items: center; gap: 6px; }
.graph-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-positive { background: #59d69a; }
.legend-negative { background: #ff6d78; }
.force-canvas-wrap { position: relative; min-height: 560px; background: #0a0f16; }
#force-graph { display: block; width: 100%; height: 560px; cursor: crosshair; }
.force-axis-label { position: absolute; pointer-events: none; color: #9cabbf; font-size: 10px; font-weight: 700; }
.force-y-label { top: 12px; left: 14px; }
.force-x-label { right: 18px; bottom: 12px; }
.graph-readout {
  min-height: 42px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}
.force-segments-card {
  max-height: calc(100vh - 134px);
  overflow: auto;
}
.force-segment-list { display: grid; gap: 7px; }
.force-segment-item {
  width: 100%;
  border: 1px solid var(--line);
  background: #0b1017;
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.force-segment-item:hover,
.force-segment-item.active { border-color: #566886; background: var(--panel-2); }
.force-segment-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.force-segment-item strong,
.force-segment-item span { display: block; }
.force-segment-item strong { font-size: 11px; letter-spacing: .03em; }
.force-segment-item span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.force-segment-item small { color: #aab5c7; font-size: 10px; text-align: right; }
.force-empty { min-height: 128px; }
.segment-actions { margin-top: 12px; display: grid; gap: 8px; }
.full-width { width: 100%; }
.button.secondary { background: var(--panel-3); }
.segment-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.force-library-divider { border-top: 1px solid var(--line); margin: 20px 0 15px; }
.force-pair-list { gap: 7px; }
.force-pair-item strong { font-size: 11px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,5,9,.74);
  backdrop-filter: blur(5px);
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  width: min(100%, 560px);
  border: 1px solid #344257;
  background: #0d131c;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(0,0,0,.5);
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 { font-size: 17px; }
.modal-close { font-size: 24px; }
.segment-base-fields,
.segment-parameter-fields { padding: 18px 20px 0; }
.segment-parameter-fields { padding-top: 14px; }
.parameter-help { margin: 8px 0 0; }
.validation-message {
  margin: 14px 20px 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,109,120,.35);
  background: rgba(255,109,120,.07);
  color: #ff9aa2;
  border-radius: 8px;
  font-size: 11px;
}
.validation-message.hidden { display: none; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 20px 20px;
}

@media (max-width: 1200px) {
  .force-builder-layout { grid-template-columns: 1fr; }
  .force-segments-card { max-height: none; }
  .ball-builder-layout { grid-template-columns: 260px minmax(0,1fr); }
}
@media (max-width: 900px) {
  .ball-builder-layout { grid-template-columns: 1fr; }
  .ball-editor-main { grid-template-columns: 1fr; }
  .force-canvas-wrap { min-height: 440px; }
  #force-graph { height: 440px; }
}
@media (max-width: 650px) {
  .force-graph-toolbar,
  .graph-readout { align-items: flex-start; flex-direction: column; }
  .pair-controls { width: 100%; flex-wrap: wrap; }
  .pair-controls select { flex: 1; min-width: 90px; }
  .editor-footer-row { align-items: stretch; flex-direction: column; }
}


/* ===============================================================
   Simulation Builder V2 — mirrors the desktop builder workflow
   =============================================================== */
.simulation-builder-page { padding: 18px 20px 24px; display: grid; gap: 14px; }
.builder-top-actions { flex-wrap: wrap; justify-content: flex-end; }
.builder-preview-card { min-width: 0; }
.builder-preview-toolbar { min-height: 48px; padding: 9px 12px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.builder-preview-toolbar > div { min-width:0; }
.builder-preview-toolbar strong { display:block; font-size:12px; margin-bottom:4px; }
.builder-preview-toolbar span { display:block; color:var(--muted); font-size:10px; line-height:1.4; white-space:normal; }
.builder-canvas-wrap { position:relative; height: min(54vh, 620px); min-height:390px; overflow:hidden; background:#070a0f; cursor:default; }
#preview-canvas { width:100%; height:100%; max-height:none; display:block; user-select:none; }
.builder-world-readout { position:absolute; top:10px; left:12px; z-index:2; padding:5px 8px; border-radius:6px; background:rgba(5,8,12,.76); border:1px solid rgba(116,137,165,.22); color:#b8c6d8; font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; pointer-events:none; }
.builder-preview-footer { min-height:38px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 12px; color:var(--muted); font-size:10px; }
.simulation-builder-bottom { display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:14px; align-items:stretch; }
.builder-settings-card,.builder-objects-card { padding:15px; min-width:0; }
.wide-field { display:grid; gap:6px; color:var(--muted); font-size:11px; margin-bottom:12px; }
.wide-field input { width:100%; }
.compact-grid { gap:9px 10px; }
.builder-toggle-stack { display:grid; gap:8px; margin-top:12px; font-size:11px; color:#d9e2ef; }
.builder-toggle-stack label { display:flex; align-items:center; gap:8px; }
.builder-save-strip { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.builder-object-list { min-height:150px; max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#090d13; }
.builder-object-row { display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; align-items:center; padding:9px 10px; border-bottom:1px solid rgba(111,130,154,.13); cursor:pointer; }
.builder-object-row:last-child { border-bottom:0; }
.builder-object-row:hover { background:#101722; }
.builder-object-row.selected { background:#10223b; box-shadow:inset 3px 0 0 #5f9cff; }
.builder-object-index { width:23px; height:23px; border-radius:6px; display:grid; place-items:center; background:#161e2a; color:#8fa2b8; font-size:10px; }
.builder-object-copy { min-width:0; display:grid; gap:3px; }
.builder-object-copy strong { font-size:11px; text-transform:capitalize; }
.builder-object-copy span { color:var(--muted); font:10px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.builder-object-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.object-action-spacer { flex:1 1 18px; }
.danger-mini { color:#ff8d91; }
.builder-object-empty { min-height:110px; border:1px dashed var(--line); border-radius:8px; margin-top:0; }
.object-modal-card { width:min(680px,calc(100vw - 32px)); }
.object-modal-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.object-modal-fields label { display:grid; gap:6px; color:var(--muted); font-size:11px; }
.object-modal-fields input,.object-modal-fields select { width:100%; }
.object-modal-fields .object-checkbox-field { grid-column:1/-1; display:flex; align-items:center; gap:8px; color:#d9e2ef; }
.object-modal-fields .object-checkbox-field input { width:auto; }
.load-simulation-card { width:min(620px,calc(100vw - 32px)); }
.builder-load-list { max-height:350px; overflow:auto; margin-top:14px; }
.builder-load-item { display:grid; gap:4px; cursor:pointer; }
.builder-load-item strong { font-size:12px; }
.builder-load-item span { color:var(--muted); font-size:10px; }
@media (max-width: 1050px){
  .simulation-builder-bottom { grid-template-columns:1fr; }
  .builder-canvas-wrap { height:470px; }
}
@media (max-width: 720px){
  .builder-canvas-wrap { min-height:330px; height:44vh; }
  .builder-preview-toolbar { align-items:flex-start; }
  .builder-preview-footer { align-items:flex-start; flex-direction:column; }
  .object-modal-fields { grid-template-columns:1fr; }
  .builder-save-strip { grid-template-columns:1fr; }
}
.builder-zoom-controls { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.builder-preview-toolbar .builder-zoom-controls span { display:inline-block; min-width:46px; text-align:center; color:var(--text); font-size:11px; font-variant-numeric:tabular-nums; }
.builder-zoom-controls .mini-button { min-width:34px; }
#preview-canvas { touch-action:none; }

/* Per-object color override in Simulation Builder dialogs */
.object-modal-fields .object-color-field { grid-column:1/-1; }
.object-color-control { display:grid; grid-template-columns:110px auto 1fr; gap:10px; align-items:center; }
.object-color-swatch { width:110px; height:42px; border:1px solid var(--border); border-radius:8px; cursor:pointer; position:relative; overflow:hidden; background:transparent; }
.object-color-swatch::after { content:"Choose color"; position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:10px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.9); }
.object-color-note { color:var(--muted); font-size:10px; font-weight:500; }
@media (max-width:760px){ .object-color-control { grid-template-columns:82px 1fr; } .object-color-note { grid-column:1/-1; } }

.color-picker-card { width:min(560px,calc(100vw - 32px)); }
.custom-color-picker { display:grid; gap:14px; margin-top:18px; }
.object-color-grid {
  position:relative; height:300px; border-radius:12px; overflow:hidden; cursor:crosshair;
  border:1px solid var(--border);
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(0 100% 50%));
  touch-action:none; user-select:none;
}
.object-color-grid-cursor {
  position:absolute; width:18px; height:18px; border:2px solid #fff; border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.45);
  transform:translate(-50%,-50%); pointer-events:none; left:100%; top:50%;
}
.object-color-hue {
  position:relative; height:22px; border-radius:999px; cursor:pointer; border:1px solid var(--border);
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  touch-action:none; user-select:none;
}
.object-color-hue-cursor {
  position:absolute; top:50%; width:12px; height:30px; border:2px solid #fff; border-radius:5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 2px 5px rgba(0,0,0,.4);
  transform:translate(-50%,-50%); pointer-events:none; left:0%;
}
.color-picker-bottom-row { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; }
.custom-color-preview.compact { height:48px; border-radius:9px; border:1px solid var(--border); background:#b50000; }
.color-hex-field.compact { display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center; color:var(--muted); font-size:11px; }
.color-hex-field.compact input { width:100%; }
@media (max-width:620px){ .object-color-grid{height:240px;} }

/* ================================================================
   SIMULATION RUNNER - LOCAL PHYSICS PLAYBACK
   ================================================================ */
.runner-playback {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: #0a0f16;
}
.runner-playback.hidden { display: none; }
.button.compact { padding: 8px 11px; min-height: 34px; }
.runner-scrubber { width: 100%; min-width: 0; }
.runner-time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .runner-playback { grid-template-columns: auto auto 1fr; }
  .runner-time { grid-column: 1 / -1; text-align: right; }
}


/* --- Simulation Runner overlap result --- */
.runner-overlap-notice {
  border-top: 1px solid var(--line);
  padding: 12px 15px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: #0a0f16;
}
.runner-overlap-notice.hidden { display: none; }
.runner-overlap-notice strong { font-size: 12px; }
.runner-overlap-notice span { color: var(--muted); font-size: 11px; }
.runner-overlap-notice.detected {
  background: rgba(255,109,120,.08);
  border-top-color: rgba(255,109,120,.35);
}
.runner-overlap-notice.detected strong { color: #ff8d96; }
.runner-overlap-notice.clear {
  background: rgba(89,214,154,.07);
  border-top-color: rgba(89,214,154,.3);
}
.runner-overlap-notice.clear strong { color: var(--good); }

/* ================================================================
   SIMULATION RUNNER - TIME SERIES ANALYSIS
   ================================================================ */
.runner-analysis {
  margin: 0 20px 24px;
  display: grid;
  gap: 12px;
}
.runner-analysis.hidden { display: none; }
.runner-analysis-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 0;
}
.runner-analysis-heading h2 { margin: 0; font-size: 17px; }
.runner-analysis-heading .eyebrow { margin-bottom: 4px; }
.runner-analysis-heading > span { color: var(--muted); font-size: 10px; }
.runner-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.metric-card { min-width: 0; overflow: hidden; }
.metric-card-header {
  min-height: 52px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.metric-card-header strong,
.metric-card-header span { display: block; }
.metric-card-header strong { font-size: 12px; }
.metric-card-header div > span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.metric-current {
  color: #dbe5f3;
  font: 10px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-align: right;
  white-space: nowrap;
}
.metric-chart {
  width: 100%;
  height: 260px;
  display: block;
  background: #080c12;
}
@media (max-width: 1050px) {
  .runner-analysis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .runner-analysis { margin-left: 12px; margin-right: 12px; }
  .runner-analysis-heading { align-items: flex-start; flex-direction: column; }
  .metric-chart { height: 230px; }
}