/* Pit-wall telemetry styling.

   Taken from an F1 strategy dashboard: one flat grey field with no panels or
   cards on it - structure comes from hairline rules and whitespace alone -
   square corners, and a strict two-accent palette. Cyan and amber carry all the meaning there - almost no
   red or green appears - so here cyan reads as improved and amber as worse,
   with red reserved for actual errors.

   Every module is the same shape: a tiny tracked-out uppercase label, then a
   large light numeral. That repetition is what makes the original scannable at
   a glance, which is the point when you are reading it in a hurry. */

:root {
  --bg: #2f353d;          /* the single field colour; nothing sits on top of it */
  --line: #454d57;        /* hairline rules do all the dividing */
  --line-soft: #3b424b;
  --fill: rgba(255, 255, 255, 0.05);  /* inputs only, so they read as editable */

  --text: #e9edf1;
  --muted: #98a3ae;
  --dim: #78838f;

  --cyan: #4fc3f7;
  --cyan-deep: #1c5f80;
  --amber: #ffc94d;
  --amber-deep: #8a6a20;
  --red: #ff6b6b;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 14px/1.4 var(--sans);
  background: var(--bg);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #7dd6ff; }

/* --- the label/value module, used everywhere --------------------------- */

.label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.value {
  font-weight: 200;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.value.sm { font-size: 20px; font-weight: 300; }
.value .unit { font-size: 11px; color: var(--muted); margin-left: 4px; letter-spacing: 0.04em; }

.stat { padding: 2px 0; }
.stat .value { margin-top: 3px; }

/* --- header ------------------------------------------------------------ */

header.bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 500; /* above Leaflet's panes, which top out at 400 */
}
header.bar .brand {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
/* The same treatment as the brand mark: the version is a stamp on the
   document, not part of its name. It is here to be matched against the one the
   watch shows in its track picker. */
header.bar .version {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
header.bar h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 200;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}
@media (max-width: 700px) {
  header.bar h1 { font-size: 20px; letter-spacing: 0.08em; }
}
header.bar .spacer { flex: 1; }
/* Sized with the title rather than beside it as a label: at this scale the
   chevron reads as "back" without the word. */
header.bar .back {
  font-size: 28px;
  font-weight: 200;
  line-height: 1;
  color: var(--cyan);
  margin-right: -6px;
}
header.bar .back:hover { color: #7dd6ff; text-decoration: none; }
@media (max-width: 700px) { header.bar .back { font-size: 20px; } }

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

button, select, input {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 11px;
  font: 500 11px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
select { text-transform: none; letter-spacing: 0.02em; font-size: 12px; background: var(--fill); }
input { background: var(--fill); }
button:hover { border-color: var(--cyan); color: #fff; }
button.primary {
  background: var(--cyan);
  color: #0d222c;
  border-color: var(--cyan);
  font-weight: 700;
}
button.primary:hover { background: #7dd6ff; }
button.danger { color: var(--red); border-color: transparent; }
button.danger:hover { border-color: var(--red); }
button:disabled { opacity: 0.35; cursor: default; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 16px; }

/* --- home lists: tracks and drivers ------------------------------------ */

/* The section label is the only thing separating the two lists on the home
   page, so it gets air above it rather than a rule - the cards already carry
   hairlines and a third one here would read as a box. */
.list-head { margin: 0; padding: 0; }
.list-head + .track-list { margin-bottom: 34px; }

.track-list { border-top: 1px solid var(--line-soft); }
.track-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
}
.track-card:hover .name { color: var(--cyan); }
.track-card .name {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.track-card .spacer { flex: 1; }
.track-card .stat { text-align: right; min-width: 62px; }
/* Driver cards open an editor instead of navigating, so they are divs and have
   to be told to look like something you can click. */
.track-card.clickable { cursor: pointer; }
.track-card.clickable:focus-visible { outline: 1px solid var(--cyan); outline-offset: -1px; }
.track-card .sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.02em;
}

/* --- forms in a modal --------------------------------------------------- */

.field-form { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; }
.field { display: block; }
.field input {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: text;
}
.field input[type="number"] { font-family: var(--mono); text-align: right; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; min-width: 0; }
.field-actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.field-actions .spacer { flex: 1; }

/* --- map --------------------------------------------------------------- */

#map {
  height: 44vh;
  min-height: 280px;
  background: #262b32;
  border-bottom: 1px solid var(--line);
}
.leaflet-container { background: #262b32; font-family: var(--sans); }

/* Satellite imagery arrives in full colour, which fights the flat grey field.
   Desaturate it, then tint it back toward the interface blue: sepia lays down
   a warm cast and hue-rotate swings it round to blue, which is the only way to
   tint with CSS filters alone.

   Applied to the tile pane only. The overlay pane above it carries the traces
   and gates, so those keep their true cyan and amber and stay readable against
   the muted ground. */
.leaflet-tile-pane {
  filter: grayscale(1) brightness(0.72) contrast(1.08)
          sepia(0.55) hue-rotate(175deg) saturate(1.35);
}

/* Once the track itself is drawn, the imagery is background rather than
   subject: pushed right down so the dark outline reads as the track and the
   photograph only says where you are. */
#map.has-outline .leaflet-tile-pane {
  filter: grayscale(1) brightness(0.34) contrast(0.75)
          sepia(0.55) hue-rotate(175deg) saturate(0.9);
}

.corner-label {
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 237, 241, 0.55);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: auto !important;
}
.leaflet-control-attribution {
  background: rgba(47, 53, 61, 0.8) !important;
  color: var(--dim) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-bar a {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* --- session strip: hero stats, like the reference's top row ----------- */

.session-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  /* Deliberately not overflow-x:auto - that clips the session menu. */
}
.session-bar > * {
  padding: 44px 44px 46px 0;
  flex: 0 0 auto;
}
.session-bar > *:first-child { padding-left: 20px; }
.session-bar .picker-cell { min-width: 280px; }

/* Custom select. The closed state has to read as the page's title, not as a
   form field, which no amount of styling gets out of the native control. */
.dd { position: relative; }

.dd-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px 0 0;
  margin-top: 3px;
  background: none;
  border: none;
  border-radius: 0;
  text-transform: none;
  letter-spacing: -0.01em;
  /* Same size as the hero numbers beside it, but bold, so the session reads as
     the heading for the row of stats it sits in front of. */
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--cyan);
  text-align: left;
  cursor: pointer;
}
.dd-trigger:hover { color: #7dd6ff; }
.dd-trigger:disabled { color: var(--dim); cursor: default; }

.dd-caret {
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--cyan);
  margin-top: 4px;
}
.dd-trigger:hover .dd-caret { border-top-color: var(--cyan); }
.dd-trigger[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

.dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  z-index: 600;
  min-width: 260px;
  padding: 4px 0;
  background: #262c34;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.dd-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.dd-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.dd-item.chosen { color: var(--cyan); font-weight: 600; }
.session-bar .grow { flex: 1; min-width: 120px; }

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

.panels {
  display: grid;
  /* The lap list is a narrow column of times; the right side carries the
     sections table and four channel charts, so it gets the room. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
}
.panels > * + * { border-left: 1px solid var(--line-soft); }
.right-col > .panel + .panel { border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) {
  .panels { grid-template-columns: 1fr; }
  .panels > * + * { border-left: none; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .panels { grid-template-columns: 1fr; }
  #map { height: 36vh; }
  .value { font-size: 24px; }
}

.panel { min-width: 0; }
.panel > h2 {
  margin: 0;
  padding: 9px 14px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.panel > h2 .qualifier { color: var(--cyan); letter-spacing: 0.1em; }

/* --- tables ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; }
th {
  padding: 18px 22px 9px;
  text-align: left;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
td {
  padding: 11px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  font-size: 13px;
}
tbody tr:last-child td { border-bottom: none; }
td.num, th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Square number chip, as used for the driver numbers in the reference. */
.chip {
  display: inline-block;
  min-width: 20px;
  padding: 2px 4px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--fill);
  color: var(--muted);
  border-radius: 2px;
}
tr.selected .chip { background: var(--cyan); color: #0d222c; font-weight: 700; }

tr.lap { cursor: pointer; }
tr.lap:hover td { background: rgba(255, 255, 255, 0.04); }
tr.lap.selected td { background: rgba(79, 195, 247, 0.09); }
tr.lap.invalid td { color: var(--dim); }
tr.lap.invalid td.num { text-decoration: line-through; }

/* --- tags: two-tone, matching the reference's cyan/amber system -------- */

.tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.tag.best { background: var(--cyan); color: #0d222c; }
.tag.improved { background: rgba(79, 195, 247, 0.16); color: var(--cyan); }
.tag.worse { background: rgba(255, 201, 77, 0.16); color: var(--amber); }
.tag.silent { background: var(--fill); color: var(--dim); }
.tag.off { background: transparent; color: var(--dim); border: 1px solid var(--line); }

.good { color: var(--cyan); }
.bad { color: var(--amber); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }

/* --- bar meter: the thin throttle/brake bars ---------------------------- */

.meter {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
  min-width: 46px;
}
.meter span {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--cyan);
}
.meter.worse span { background: var(--amber); }

/* --- misc -------------------------------------------------------------- */

/* --- editor: drawing steps --------------------------------------------- */

/* While the map is waiting for a click, the grab hand is a lie - you are
   placing a point, not panning. Leaflet sets cursor on .leaflet-grab and
   swaps it again mid-drag, so these have to outrank both. */
#map.drawing,
#map.drawing .leaflet-grab,
#map.drawing .leaflet-interactive,
#map.drawing.leaflet-dragging .leaflet-grab { cursor: crosshair; }

/* Handles are for grabbing, not placing, even mid-draw. */
.edge-handle {
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #21262d;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.edge-handle.left { background: var(--cyan); }
.edge-handle.right { background: var(--amber); }
#map .edge-handle,
#map.drawing .edge-handle { cursor: grab; }
#map .edge-handle:active { cursor: grabbing; }

button.arming {
  background: var(--amber);
  border-color: var(--amber);
  color: #2a2007;
  font-weight: 700;
}
#outline-status.complete { color: var(--cyan); }

.editor input[type="range"] { width: 200px; padding: 0; }
.width-readout {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  min-width: 52px;
}

/* --- AI coach: button and modal ---------------------------------------- */

.coach-cell { display: flex; flex-direction: column; }
.coach-button {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 14px;
  background: rgba(79, 195, 247, 0.12);
  border-color: rgba(79, 195, 247, 0.45);
  color: var(--cyan);
  font-weight: 600;
}
.coach-button:hover:not(:disabled) { background: rgba(79, 195, 247, 0.2); color: #7dd6ff; }
.coach-button .icon { width: 13px; height: 13px; stroke: currentColor; fill: none;
  stroke-width: 1.4; stroke-linejoin: round; }
.coach-button:disabled { color: var(--dim); border-color: var(--line); background: none; }

.modal { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
/* Author styles beat the browser's [hidden] rule, so `display: flex` above
   would keep the modal on screen no matter what the close button did. */
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 13, 17, 0.72); }
.modal-panel {
  position: relative;
  width: min(780px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #2a3038;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 {
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.modal-close {
  flex: 0 0 auto;
  padding: 2px 9px;
  font-size: 18px;
  line-height: 1;
  border-color: transparent;
  color: var(--muted);
}
.modal-body { padding: 4px 24px 24px; overflow-y: auto; }

.coach-state { padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }
.coach-state .label { margin-bottom: 10px; color: var(--dim); }
.coach-state button { margin-top: 16px; }

/* A quiet pulse while the model is working, so a minute of waiting does not
   look like a hang. */
.coach-working { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); margin-right: 8px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.finding {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}
.finding-mark {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--dim);
}
.finding.high .finding-mark { background: var(--amber); }
.finding.medium .finding-mark { background: var(--muted); }
.finding.good .finding-mark { background: var(--cyan); }
.finding-body { min-width: 0; flex: 1; }
.finding-title { font-size: 15px; font-weight: 500; color: var(--text); }
.finding-detail { margin-top: 5px; font-size: 13px; color: var(--muted); line-height: 1.55; }

.coach-focus {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 3px;
  background: rgba(79, 195, 247, 0.07);
}
.coach-focus .label { color: var(--cyan); }
.coach-focus p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }

.coach-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.coach-warning {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--amber);
  font-size: 12px;
  color: var(--amber);
  line-height: 1.5;
}

/* --- scrubber ---------------------------------------------------------- */

.scrubber { padding: 18px 22px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }

.scrub-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 14px;
  min-height: 34px;
}
.scrub-readouts .stat .value {
  font-size: 19px;
  font-weight: 300;
  margin-top: 1px;
}
.scrub-readouts .stat .value .unit { font-size: 10px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid var(--bg);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid var(--bg);
}
input[type="range"]:disabled { opacity: 0.3; cursor: default; }

/* --- channel charts ---------------------------------------------------- */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chart-cell {
  padding: 20px 22px 22px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.chart-cell:nth-child(2n) { border-right: none; }
.chart-cell:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 620px) {
  .chart-grid { grid-template-columns: 1fr; }
  .chart-cell { border-right: none; }
  .chart-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

/* Flex rather than vertical-align: the icon is 13px in a 9px line box, so
   nudging it by eye only ever lands right at one font size. */
.chart-cell .label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.label .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-cell > div { position: relative; margin-top: 10px; }
.chart-cell svg { display: block; }

.chart-key {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.chart-key i { display: inline-block; width: 7px; height: 2px; margin-right: 5px; vertical-align: middle; }

.chart-empty {
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--dim);
  border: 1px dashed var(--line-soft);
  padding: 0 10px;
}

.empty {
  padding: 26px 14px;
  color: var(--dim);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.error {
  margin: 0;
  padding: 11px 16px;
  border-bottom: 1px solid var(--red);
  color: var(--red);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.hint {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.hint.active { color: var(--amber); }

/* --- editor ------------------------------------------------------------ */

.editor .row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.editor .row .note {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.editor input[type="text"] {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  min-width: 110px;
  width: 100%;
}
.editor input[type="number"] {
  text-transform: none;
  width: 74px;
  font-family: var(--mono);
  text-align: right;
}
.editor input[type="checkbox"], .editor input[type="radio"] {
  width: 14px; height: 14px; padding: 0; accent-color: var(--cyan);
}
.editor td { padding: 5px 10px; }
.save-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}