:root {
  color-scheme: dark;
  --bg: #0e1014;
  --panel: #171a21;
  --panel-2: #1d212b;
  --line: #2a303d;
  --text: #e8ebf1;
  --muted: #9aa3b2;
  --accent: #4f8cff;
  --accent-hover: #6b9dff;
  --danger: #ff5a5a;
  --ok: #3ecf8e;
  --inset: #11141a;
  --radius: 12px;
  --radius-s: 8px;
  /* Spacing scale. Two tiers: --gap between sibling blocks inside a card
     (boxes, tiles, the rows of the EQ editor), --gap-l between cards and
     around section rules. --gap-s / --gap-m are for controls within a row. */
  --gap-s: 8px;
  --gap: 10px;
  --gap-m: 12px;
  --gap-l: 16px;
  --font: "Segoe UI", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

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

.appHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.appTitle h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.appSubtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.connectArea {
  display: flex;
  align-items: center;
  gap: 10px;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.statusPill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.statusPill.connected {
  color: var(--ok);
  border-color: #2c4a3e;
}

.statusPill.connected::before { background: var(--ok); }

/* Firmware verdict shown in the pill once the version has been read. */
.statusPill.latest {
  color: var(--ok);
  border-color: #2c4a3e;
}

.statusPill.latest::before { background: var(--ok); }

.statusPill.outdated {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}

.statusPill.outdated::before { background: var(--danger); }

/* ---------- tabs (folder style: active tab merges into the panel) ---------- */

.tabBar {
  display: flex;
  gap: 6px;
}

.tabButton {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 11px 20px;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  transition: color 0.15s, background 0.15s;
}

.tabButton:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.tabButton.active {
  color: var(--text);
  background: var(--panel);
}

.tabPanel {
  background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 16px;
  margin-bottom: 24px;
}

/* ---------- cards (one step lighter than the tab surface) ---------- */

.card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: var(--gap-l);
}

.tabPanel > .card:last-child,
.tabPanel > div > .card:last-child {
  margin-bottom: 0;
}

.cardHead {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-bottom: var(--gap-l);
}

.cardHead h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

h3 {
  margin: 14px 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- help tooltip ---------- */

.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--inset);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  cursor: help;
  position: relative;
  user-select: none;
  flex: none;
}

.help:hover,
.help:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  outline: none;
}

.help:hover::after,
.help:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: min(280px, 72vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.55;
  z-index: 20;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  white-space: normal;
}

/* ---------- mode switch ---------- */

.modeSwitchRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.modeLabel {
  font-size: 0.95rem;
  color: var(--muted);
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex: none;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}

.slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s, background 0.2s;
}

.switch input:checked + .slider {
  background: #263650;
  border-color: var(--accent);
}

.switch input:checked + .slider::before {
  transform: translateX(24px);
  background: var(--accent);
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.statusInline {
  color: var(--muted);
  font-size: 0.88rem;
  margin-left: auto;
}

/* ---------- forms ---------- */

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: var(--gap);
  align-items: center;
}

.fieldGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  margin-bottom: 0;
}

.field { display: grid; gap: 6px; }

.fieldWide { grid-column: 1 / -1; }

.field > span {
  color: var(--muted);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inlineField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 9px 12px;
  color: var(--text);
  background: var(--inset);
  font: inherit;
  font-size: 0.92rem;
}

input[type="file"] { padding: 7px 10px; }

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

.eqChannelRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}

.eqLinkField {
  margin-left: 10px;
}

/* L/R channel switch: always "colored" - blue for L, red for R */
#eqChannelSwitch + .slider {
  background: #22304a;
  border-color: var(--accent);
}

#eqChannelSwitch + .slider::before {
  background: var(--accent);
}

#eqChannelSwitch:checked + .slider {
  background: #46262c;
  border-color: var(--danger);
}

#eqChannelSwitch:checked + .slider::before {
  background: var(--danger);
}

.chanLabel { transition: color 0.15s; }
.chanL.active { color: var(--accent); font-weight: 600; }
.chanR.active { color: var(--danger); font-weight: 600; }

.gainSide {
  color: var(--muted);
  font-size: 0.85rem;
}

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

/* --preset-color is set per selected slot so the whole editor picks up the
   colour the body LED shows for that preset. */
.presetCard {
  border-color: var(--preset-color, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--preset-color, transparent) 22%, transparent);
}

.presetChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.presetChip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 8px 6px 7px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--inset);
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
}

.presetChip:hover { border-color: var(--chip-color); }

.presetChip .chipDot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--chip-color) 60%, transparent);
}

.presetChip.selected {
  border-color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 16%, var(--inset));
  color: var(--text);
}

.presetChip.off .chipDot {
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}

.presetChip.off { opacity: 0.65; }

.presetChip .chipActive {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--panel-2);
}

.presetDivider {
  height: 1px;
  background: var(--line);
  margin: var(--gap-l) 0;
}

/* id selector so this wins over the later .eqPower.on rule used by the EQ bands */
#presetEnable.on {
  color: var(--preset-color, var(--accent));
  border-color: var(--preset-color, var(--accent));
  background: color-mix(in srgb, var(--preset-color, var(--accent)) 22%, var(--inset));
}

/* Each setting is its own box. minmax(190px) against the ~620px card interior
   tops out at three across, and folds to two then one as the window narrows. */
.settingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
}

.settingBox {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
  padding: 12px 14px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

.settingBoxLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}

.settingBox select { width: 100%; min-width: 0; padding-left: 10px; padding-right: 6px; }

/* Sound mode: same box styling, just full width because of the EQ inside. */
.settingBoxFull { margin-top: var(--gap); }

.settingBoxHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  flex-wrap: wrap;
}

/* Governs the whole preset, so it is a banner rather than one of the boxes.
   It also carries the write button: the two are the pair a user acts on. */
.presetEnableBanner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-m);
  padding: 12px 14px;
  margin-bottom: var(--gap);
  border: 1px solid var(--preset-color, var(--line));
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--preset-color, transparent) 10%, var(--inset));
}

.presetEnableText {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  margin-right: auto;
}

.presetEnableTitle { font-size: 0.98rem; font-weight: 600; }

.presetEnableState {
  font-size: 0.8rem;
  color: var(--muted);
}

.presetSyncActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.presetSyncActions button { white-space: nowrap; }

/* The write/read pair is one control group, so both carry the preset's colour
   the same way. The dark label keeps enough contrast on the light themes
   (yellow, green) as well as the dark ones. */
#btnPresetWrite,
#btnPresetRead {
  background: var(--preset-color, var(--accent));
  border-color: var(--preset-color, var(--accent));
  color: var(--bg);
}

#btnPresetWrite:hover:not(:disabled),
#btnPresetRead:hover:not(:disabled) {
  background: color-mix(in srgb, var(--preset-color, var(--accent)) 82%, #fff);
  border-color: color-mix(in srgb, var(--preset-color, var(--accent)) 82%, #fff);
}

/* "In sync with the device": the colour stays, just faded back - the same
   treatment the EQ editor gets while the preset is in native mode. */
#btnPresetWrite:disabled,
#btnPresetRead:disabled {
  opacity: 0.35;
}

/* A preset edited but not yet written keeps a marker on its chip. */
.presetChip.dirty .chipDot::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
  border: 1px solid var(--panel-2);
}

.switchGroup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.switchSide {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Preset-coloured controls. Scoped to the preset's own settings by id: the EQ
   editor keeps its own fixed colours (L = blue, R = red) so the channel switch
   reads the same whichever preset is selected. */
#presetSoundMode:checked + .slider,
#presetGain:checked + .slider {
  background: color-mix(in srgb, var(--preset-color, var(--accent)) 35%, var(--inset));
  border-color: var(--preset-color, var(--accent));
}

#presetSoundMode:checked + .slider::before,
#presetGain:checked + .slider::before {
  background: var(--preset-color, var(--accent));
}

#presetDre,
#presetAutoMute,
#presetMuteOnSwitch,
#eqLinkCheckbox {
  accent-color: var(--preset-color, var(--accent));
}

/* Focus rings and the EQ save button follow the preset too. The write button
   sits outside #presetFields, so it keeps the app accent. */
#presetFields input:focus,
#presetFields select:focus,
#presetFields .secondaryButton:hover {
  border-color: var(--preset-color, var(--accent));
}

#presetCard .help:focus {
  outline-color: var(--preset-color, var(--accent));
}

/* disabled preset: everything below the power button is inert */
#presetFields.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- expanding sub-sections (EQ editor, THD editor) ---------- */

.thdEnableRow {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.expandSection {
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  margin-top: var(--gap);
  padding-top: var(--gap);
}

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

.expandHead h3 { margin: 0 0 6px; }

.checkField {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}

.checkField input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* ---------- buttons ---------- */

button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  padding: 9px 16px;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.primaryButton {
  background: var(--accent);
  color: #fff;
}

.primaryButton:hover { background: var(--accent-hover); }

.secondaryButton {
  background: var(--inset);
  color: var(--text);
  border-color: var(--line);
}

.secondaryButton:hover { border-color: var(--accent); }

button:disabled, select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- status lines ---------- */

.statusLine {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: var(--gap);
}

.hint {
  margin: var(--gap) 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- DEVICE value tiles ---------- */

.valueGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
}

.valueTile {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px 14px;
}

.valueLabel {
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.valueMain {
  font-size: 1.45rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.valueMain.valueSmall { font-size: 1.05rem; }

/* Active preset tile: the same colour dot the preset chips use. */
#deviceActivePreset {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

.presetDotInline {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--chip-color) 60%, transparent);
}

.valueSub {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- EQ section (inside a preset) ---------- */

/* Greyed rather than hidden: the box keeps its height, so stepping through
   presets with different sound modes does not make the page jump. */
#eqSection.inactive #eqSectionBody {
  opacity: 0.35;
  pointer-events: none;
}

#eqSectionBody {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  margin-top: var(--gap);
  padding-top: var(--gap);
}

.eqTopRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-l);
  flex-wrap: wrap;
  margin-bottom: var(--gap);
}

.eqBodyTitle {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: var(--gap);
}

.eqFileField {
  flex: 0 1 auto;
  min-width: 0;
}

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

.eqFileRow input[type="file"] { flex: 0 1 auto; width: max-content; max-width: 420px; min-width: 0; }
.eqFileRow button { white-space: nowrap; }

/* ---------- EQ graph ---------- */

.eqGraphWrap {
  position: relative;
  margin: var(--gap) 0;
}

.eqGraphTitle {
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

#eqGraph {
  display: block;
  width: 100%;
  height: 300px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  touch-action: none;
}

.eqGraphTip {
  position: absolute;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

@media (max-width: 640px) {
  #eqGraph { height: 210px; }
}

/* ---------- EQ band strip (power + knobs per band) ---------- */

.eqBandsScroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.eqBandsRow {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.eqBands {
  display: flex;
  gap: 4px;
  flex: 1;
}

.eqBandLegend,
.eqBand {
  display: grid;
  grid-template-rows: 46px 62px 62px 62px;
  align-items: center;
  justify-items: center;
  row-gap: 2px;
}

.eqBandLegend {
  width: 34px;
}

.eqBandLegend span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.eqBand {
  flex: 1 1 44px;
  min-width: 44px;
  max-width: 72px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 4px 0 6px;
  transition: border-color 0.15s;
}

.eqBand.on {
  border-color: #33445f;
}

.eqBandHead {
  display: grid;
  justify-items: center;
  row-gap: 2px;
}

.eqBandNum {
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.eqBand.on .eqBandNum {
  color: var(--text);
}

.eqPower {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.eqPower svg {
  width: 13px;
  height: 13px;
}

.eqPower.on {
  color: var(--preset-color, var(--accent));
  border-color: var(--preset-color, var(--accent));
  background: color-mix(in srgb, var(--preset-color, var(--accent)) 22%, var(--inset));
}

.eqKnobBlock {
  display: grid;
  justify-items: center;
  row-gap: 3px;
}

.knob {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--muted);
  transform-origin: 1px 15px;
  transform: rotate(var(--knob-angle, 0deg));
}

.eqBand.on .knob::after {
  background: var(--preset-color, var(--accent));
}

input.knobValue {
  width: 40px;
  padding: 2px 1px;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
}

input.knobValue:hover:not(:disabled) {
  border-color: var(--line);
}

input.knobValue:focus {
  border-color: var(--preset-color, var(--accent));
  background: var(--panel-2);
  outline: none;
}

input.knobValue:disabled {
  opacity: 0.6;
  cursor: default;
}

.eqBand.on input.knobValue {
  color: var(--text);
}

.eqBand:not(.on) .knob {
  opacity: 0.45;
  cursor: default;
}

/* ---------- progress ---------- */

.progressWrap {
  display: grid;
  gap: 6px;
  flex: 1 1 260px;
}

.progressMeta {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.85rem;
}

.rowProgress { align-items: center; }

progress {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  accent-color: var(--accent);
}

/* ---------- toast (errors) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--danger);
  color: var(--text);
  border-radius: var(--radius-s);
  padding: 10px 16px;
  font-size: 0.88rem;
  max-width: min(560px, calc(100vw - 32px));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
}

/* ---------- EQ export dialog (download / SIGNAL PUB) ---------- */

.exportDialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.exportDialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.exportDialog form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding: 20px;
}

.exportDialog h2 {
  margin: 0;
  font-size: 1.1rem;
}

.exportFile {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.exportChoices {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.exportChoice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  text-align: left;
  background: var(--inset);
  color: var(--text);
  border-color: var(--line);
}

.exportChoice:hover { border-color: var(--accent); }

.exportChoiceTitle { font-weight: 600; }

.exportChoiceText {
  color: var(--muted);
  font-size: 0.85rem;
}

.exportFoot {
  display: flex;
  justify-content: flex-end;
}

code { color: var(--text); }

/* ---------- unsupported browser notice ---------- */

.unsupportedCard {
  margin-top: 48px;
}

.unsupportedCard h1 {
  margin: 0 0 var(--gap-l);
  font-size: 1.3rem;
}

.unsupportedCard p {
  margin: 0 0 var(--gap);
  line-height: 1.7;
}

.unsupportedCard ul {
  margin: 0 0 var(--gap);
  padding-left: 1.3em;
  line-height: 1.9;
}

.unsupportedCard .hint {
  margin-bottom: 0;
}

/* ---------- LED adjustment (共通設定) ---------- */

.ledAdjust {
  display: grid;
  gap: var(--gap-m);
  margin: var(--gap-s) 0 var(--gap-l);
}

.ledRow {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) 84px 96px;
  align-items: center;
  gap: var(--gap-m);
}

.ledLabel {
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  padding: 2px 0;
  color: var(--bg);
}

.ledLabelR { background: var(--danger); }
.ledLabelG { background: var(--ok); }
.ledLabelB { background: var(--accent); }

.ledRange {
  width: 100%;
  accent-color: var(--accent);
}

.ledRow[data-color="r"] .ledRange { accent-color: var(--danger); }
.ledRow[data-color="g"] .ledRange { accent-color: var(--ok); }
.ledRow[data-color="b"] .ledRange { accent-color: var(--accent); }

.ledNumber { width: 100%; }

.ledCurrent {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 520px) {
  .ledRow {
    grid-template-columns: 28px 1fr 72px;
  }
  .ledCurrent {
    grid-column: 2 / 4;
    text-align: left;
  }
}