:root {
  color-scheme: light;
  --background: #f7faff;
  --surface: #ffffff;
  --surface-muted: #eef5fc;
  --text: #152235;
  --text-muted: #66758a;
  --border: #dce7f2;
  --blue: #1769aa;
  --blue-dark: #0e4f83;
  --blue-soft: #e2f0fc;
  --shadow: 0 18px 45px rgba(29, 77, 115, 0.1);
  --paper: var(--background);
  --canvas: var(--surface);
  --grid: #e3ebf2;
  --grid-axis: #b7c7d5;
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --load: #c4381f;
  --reaction: #0d7c74;
  --couple: #a8661a;
  --select: var(--blue);
  --tension: #1f5fa8;
  --compression: #c4381f;
  --ok-bg: #e0f1ea;
  --ok-ink: #0b5d4f;
  --warn-bg: #f8edd5;
  --warn-ink: #7a4b08;
  --error-bg: #f9e2dd;
  --error-ink: #8f2412;
  --info-bg: #e2f0fc;
  --info-ink: #34506b;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0d141c;
  --surface: #141e29;
  --surface-muted: #1a2a39;
  --text: #f1f6fb;
  --text-muted: #9eafc0;
  --border: #293b4c;
  --blue: #5aabeb;
  --blue-dark: #86c5f3;
  --blue-soft: #183950;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  --canvas: #101923;
  --grid: #213140;
  --grid-axis: #405468;
  --load: #ff8a80;
  --reaction: #6fd6c0;
  --couple: #f2a35c;
  --tension: #6fd6ff;
  --compression: #ff8a80;
  --ok-bg: #18382f;
  --ok-ink: #8fe3bf;
  --warn-bg: #3b3020;
  --warn-ink: #f2c879;
  --error-bg: #3d2525;
  --error-ink: #ff9b92;
  --info-bg: #1d3042;
  --info-ink: #b5d5f0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --background: #0d141c;
    --surface: #141e29;
    --surface-muted: #1a2a39;
    --text: #f1f6fb;
    --text-muted: #9eafc0;
    --border: #293b4c;
    --blue: #5aabeb;
    --blue-dark: #86c5f3;
    --blue-soft: #183950;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
    --canvas: #101923;
    --grid: #213140;
    --grid-axis: #405468;
    --load: #ff8a80;
    --reaction: #6fd6c0;
    --couple: #f2a35c;
    --tension: #6fd6ff;
    --compression: #ff8a80;
    --ok-bg: #18382f;
    --ok-ink: #8fe3bf;
    --warn-bg: #3b3020;
    --warn-ink: #f2c879;
    --error-bg: #3d2525;
    --error-ink: #ff9b92;
    --info-bg: #1d3042;
    --info-ink: #b5d5f0;
  }
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 15px/1.6 var(--sans);
  transition: background-color 0.25s ease, color 0.25s ease;
}

button, a { -webkit-tap-highlight-color: transparent; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- layout ---------- */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px 20px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
}

.top {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header-top {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.07em;
  text-decoration: none;
  transition: color 0.2s ease;
}

.logo span { color: var(--blue); }

.logo:hover { color: var(--blue); }

.theme-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--blue);
  background: var(--surface-muted);
  transform: rotate(12deg);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.05em; }
.sub { max-width: 68ch; margin: 10px 0 0; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel {
  min-width: 0;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.panel h2 { margin: 0 0 12px; font-size: 1rem; letter-spacing: -0.02em; }
.panel h3 { margin: 16px 0 6px; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.panel h3:first-child { margin-top: 0; }

@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; padding: 20px; }
}

/* ---------- controls ---------- */

button, select, input { font: inherit; color: inherit; }

.btn, .tool {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:hover, .tool:hover { border-color: var(--blue); background: var(--surface-muted); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn[disabled]:hover { border-color: var(--line); }
.btn.danger { color: var(--error-ink); margin-top: 12px; }

.btn:focus-visible, .tool:focus-visible, input:focus-visible, select:focus-visible, #canvas:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.group { display: flex; gap: 4px; }
.views {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.tool[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.tool[aria-pressed="true"]:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.tool kbd { margin-left: 6px; font: 12px var(--mono); opacity: 0.6; }

.stage {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(29, 77, 115, 0.06);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

#canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
#canvas.tool-select { cursor: default; }
#canvas:not(.tool-select) { cursor: crosshair; }

.hintbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 8px; color: var(--muted); min-height: 1.5em; }
#notice { color: var(--error-ink); }

/* ---------- side panels ---------- */

.empty, .note { margin: 0; color: var(--muted); font-size: 0.875rem; }
.note { margin-top: 8px; }

.field { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 8px; margin-bottom: 6px; }
.field-input { display: flex; align-items: center; gap: 6px; }
.field-input input, .field-input select {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}
.unit { color: var(--muted); font-size: 0.85rem; min-width: 2.2em; }
.field-input select + .unit { display: none; }

.banner { margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; }
.banner.ok { background: var(--ok-bg); color: var(--ok-ink); }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.banner.error { background: var(--error-bg); color: var(--error-ink); }
.banner.info { background: var(--info-bg); color: var(--info-ink); }

.values { margin: 0; }
.values > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.values dt { font-weight: 600; }
.values dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.dir { color: var(--muted); }

.eqs {
  margin: 0;
  padding: 8px 10px;
  background: var(--surface-muted);
  border-radius: 8px;
  font: 0.85rem/1.7 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.check { margin: 0; font: 0.85rem/1.6 var(--mono); overflow-wrap: anywhere; }
.check.ok { color: var(--ok-ink); }
.check.error { color: var(--error-ink); }

/* ---------- drawing ---------- */

.grid line { stroke: var(--grid); stroke-width: 1; }
.grid line.axis { stroke: var(--grid-axis); stroke-width: 1.5; }
.grid text { fill: var(--muted); font: 11px var(--mono); }

.item { color: var(--ink); }
.item.force, .item.udl { color: var(--load); }
.item.moment { color: var(--couple); }
.item.selected { color: var(--select); }

.member .body { stroke: currentColor; stroke-width: 7; stroke-linecap: round; }
.member .joint { fill: var(--canvas); stroke: currentColor; stroke-width: 2.5; }

.hit { stroke: transparent; stroke-width: 18; fill: none; pointer-events: stroke; }
.hit-fill { fill: transparent; pointer-events: all; }

.sym { fill: var(--canvas); stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.ground { stroke: currentColor; stroke-width: 2.5; }
.hatch { stroke: currentColor; stroke-width: 1.5; }
.dot { fill: currentColor; }

.arrow line { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.arrow polygon, .arc-group polygon { fill: currentColor; }
.arc { fill: none; stroke: currentColor; stroke-width: 2.5; }
.udl-line { stroke: currentColor; stroke-width: 2; }

.reaction { color: var(--reaction); pointer-events: none; }

.label {
  font: 600 13px var(--mono);
  fill: currentColor;
  paint-order: stroke;
  stroke: var(--canvas);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.handle { fill: #fff; stroke: var(--select); stroke-width: 2; cursor: move; pointer-events: all; }

.preview { stroke: var(--select); stroke-width: 2.5; stroke-dasharray: 6 5; pointer-events: none; }
.preview-dot { fill: var(--select); pointer-events: none; }
.cursor { stroke: var(--select); stroke-width: 1.5; pointer-events: none; }
.coord { fill: var(--select); font: 12px var(--mono); pointer-events: none; }

/* ---------- internal force diagrams ---------- */

.dim { opacity: 0.35; pointer-events: none; }
.dpos { fill: rgba(37, 99, 235, 0.25); pointer-events: none; }
.dneg { fill: rgba(196, 56, 31, 0.25); pointer-events: none; }
.dline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.diagram-title { font: 700 16px var(--sans); fill: var(--ink); }
.diagram-sub { font: 13px var(--sans); fill: var(--muted); }
.diagram-note { font: 15px var(--sans); fill: var(--muted); }

/* ---------- modes ---------- */

body[data-mode="truss"] .frame-only { display: none; }
body:not([data-mode="truss"]) .truss-only { display: none; }

/* ---------- hinges ---------- */

.hinge-dot { fill: var(--canvas); stroke: currentColor; stroke-width: 2.5; }

/* ---------- truss ---------- */

.bar .body { stroke-width: 5; }
.item.bar-idle { color: var(--ink); }
.item.bar-tension { color: var(--tension); }
.item.bar-compression { color: var(--compression); }
.item.bar-zero { color: var(--muted); }
.bar-halo { stroke: var(--select); stroke-width: 15; stroke-opacity: 0.3; stroke-linecap: round; }
.joints { pointer-events: none; }
.joint-mark { fill: var(--canvas); stroke: var(--ink); stroke-width: 2; }
.joint-num { font: 600 11px var(--mono); fill: var(--ink); }

/* ---------- truss force map ---------- */

.forcemap { pointer-events: none; }
.fm { stroke-linecap: butt; }
.fm-pos { stroke: var(--tension); }
.fm-neg { stroke: var(--compression); }
.fm-zero { stroke: var(--muted); }
.fm-label { fill: var(--ink); }

/* ---------- units, zoom and dimensions ---------- */

.units { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.875rem; }
.units .btn { padding: 5px 8px; color: var(--ink); }

.zoombar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zbtn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 77, 115, 0.08);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.zbtn.wide { font-size: 0.8rem; }
.zbtn:hover { border-color: var(--blue); background: var(--surface-muted); }
.zbtn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.zbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

#canvas.panning { cursor: grabbing; }

.gridinfo { color: var(--muted); font: 0.8rem var(--mono); }

.dims { pointer-events: none; }
.dim-line, .dim-tick { stroke: var(--muted); stroke-width: 1.25; }
.dim-ext { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.dim-text {
  fill: var(--muted);
  font: 600 12px var(--mono);
  paint-order: stroke;
  stroke: var(--canvas);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.dim-unit { font-weight: 400; }
.grid-unit { fill: var(--muted); font: 11px var(--mono); }

@media (max-width: 560px) {
  .app { gap: 14px; padding: 14px; }
  .top { align-items: flex-start; }
  .actions { width: 100%; }
  .toolbar { gap: 8px; padding: 10px; }
  .group { flex-wrap: wrap; }
  .panel { padding: 16px; border-radius: 12px; }
  .field { grid-template-columns: minmax(0, 1fr) minmax(110px, 45%); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}