:root {
  --deep: #481d1c;
  --deep-2: #481d1c;
  --teal: #ff3b30;
  --accent: #61616e;
  --bg: #efeff1;
  --card: #efeff1;
  --text: #27272c;
  --muted: #717180;
  --border: #e3e3e7;
  --soft-teal: #bfdfca;
  --soft-orange: #ffb3ad;
  --danger: #ff3b30;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body {
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
body.modal-open { overflow: hidden; }
body.equipment-embed { padding-bottom: 0; }
body.equipment-embed { display: flex; min-height: 100dvh; flex-direction: column; }
body.equipment-embed main { max-width: none; margin-block: auto; padding: 14px 12px 20px; }
body.equipment-embed .page-heading { margin-bottom: 12px; }
@media (min-width: 768px) {
  body.equipment-embed main {
    width: min(100% - 48px, 1120px);
    max-width: 1120px;
    margin: auto;
    padding: 18px 0 24px;
  }
}
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }

.topbar {
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}
.topbar a { color: var(--deep-2); font-size: 17px; font-weight: 800; text-decoration: none; }

main { max-width: 720px; margin: 0 auto; padding: 20px 16px 32px; }
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.page-heading > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.page-heading h1 { margin: 0; color: var(--deep-2); font-size: 24px; letter-spacing: -.05em; }
#setup-count { color: var(--teal); font-size: 12px; font-weight: 900; }
.add-button {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--deep);
  box-shadow: 0 3px 9px rgba(72, 29, 28, 0.12);
  color: #efeff1;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}
.add-button:active { transform: translateY(1px); }
.page-status {
  margin: 38px 0;
  padding: 20px;
  border: 1px dashed #d0d0d6;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.equipment-list { display: grid; gap: 14px; }

.equipment-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(72, 29, 28, 0.08);
  border-radius: 14px;
  background: #efeff1;
  box-shadow: 0 3px 14px rgba(72, 29, 28, 0.045);
}
.equipment-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--text);
}
.equipment-table th {
  padding: 7px 3px;
  border-bottom: 1px solid var(--border);
  background: rgba(239, 239, 241, 0.9);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.equipment-table td {
  min-width: 0;
  padding: 7px 3px;
  border-bottom: 1px solid #eeeeef;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
}
.equipment-table tbody tr:last-child td { border-bottom: 0; }
.equipment-table tbody tr.user-tone-1 td { background: #bfdfca; }
.equipment-table tbody tr.user-tone-2 td { background: #c5d1dc; }
.equipment-table tbody tr.user-tone-3 td { background: #ffb3ad; }
.equipment-table tbody tr.user-tone-4 td { background: #d1cae7; }
.equipment-table tbody tr.user-tone-1 td.eq-user { box-shadow: inset 4px 0 #ff3b30; color: #481d1c; }
.equipment-table tbody tr.user-tone-2 td.eq-user { box-shadow: inset 4px 0 #8e8e96; color: #8e8e96; }
.equipment-table tbody tr.user-tone-3 td.eq-user { box-shadow: inset 4px 0 #ff3b30; color: #ff3b30; }
.equipment-table tbody tr.user-tone-4 td.eq-user { box-shadow: inset 4px 0 #8b7bc4; color: #8b7bc4; }
.equipment-table tbody tr:nth-child(even) td { background: #efeff1; }
.equipment-table strong,
.equipment-table small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equipment-table strong { font-size: 10px; font-weight: 750; }
.equipment-table small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.equipment-table .eq-name { width: 37%; overflow-wrap: anywhere; text-align: left; }
.equipment-table .eq-type { width: 10%; }
.equipment-table .eq-lure { width: 18%; white-space: nowrap; }
.equipment-table .eq-line { width: 19%; white-space: nowrap; }
.equipment-table th.eq-lure { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.equipment-table td.eq-lure,
.equipment-table td.eq-line {
  color: var(--deep);
  font-size: 9px;
  letter-spacing: -.04em;
}
.equipment-table .eq-action { width: 16%; padding-right: 3px; }
.eq-editable-row { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.eq-editable-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.eq-action-controls {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
}
.eq-action-controls .equipment-source { margin-right: 0; }
.eq-action-controls button { padding: 0; }
.equipment-source { display: inline-block; margin-right: 5px; color: var(--teal); font-size: 9px; text-decoration: none; white-space: nowrap; }
.delete-button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.modal { position: fixed; z-index: 100; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(72, 29, 28, 0.52); backdrop-filter: blur(2px); }
.modal-panel {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 540px;
  max-height: min(92vh, 720px);
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #efeff1;
  box-shadow: 0 -14px 42px rgba(72, 29, 28, 0.18);
}
.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.modal-heading h2 { margin: 0; color: var(--deep-2); font-size: 20px; }
.modal-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #efeff1;
  color: var(--muted);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}
#equipment-form,
#combo-form { display: grid; }
#equipment-form > label,
#combo-form > label,
#rod-fields > label,
#reel-fields > label { display: block; margin: 0 0 7px; color: var(--deep); font-size: 12px; font-weight: 900; }
.manual-spec-fields {
  min-width: 0;
  margin: 2px 0 14px;
  padding: 12px;
  border: 1px solid #ffb1ac;
  border-radius: 10px;
}
.manual-spec-fields legend { padding: 0 5px; color: var(--deep); font-size: 12px; font-weight: 900; }
.manual-range-label { display: block; margin: 5px 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.manual-range-controls { display: grid; grid-template-columns: 1fr 16px 1fr; align-items: center; gap: 5px; margin-bottom: 9px; }
.manual-range-controls:last-child { margin-bottom: 0; }
.manual-range-controls > span { color: var(--muted); text-align: center; }
.manual-range-controls input { margin-bottom: 0 !important; }
#equipment-form input,
#equipment-form select,
#combo-form input,
#combo-form select {
  width: 100%;
  min-height: 47px;
  margin-bottom: 14px;
  padding: 0 12px;
  border: 1.5px solid #b5b5bd;
  border-radius: 10px;
  outline: 0;
  background: #efeff1;
  color: var(--text);
  font-size: 13px;
}
#equipment-form input:focus,
#equipment-form select:focus,
#combo-form input:focus,
#combo-form select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(72, 29, 28, 0.14);
}
.model-search { position: relative; margin-bottom: 14px; }
#equipment-form .model-search > input { margin-bottom: 0; }
#equipment-form .model-search > input.has-selection {
  border-color: var(--teal);
  background: #ffb1ac;
  color: var(--deep-2);
  font-weight: 900;
}
.model-results {
  overflow-y: auto;
  max-height: 310px;
  margin-top: 6px;
  border: 1px solid #ceced4;
  border-radius: 11px;
  background: #efeff1;
  box-shadow: 0 10px 28px rgba(72, 29, 28, 0.1);
}
.model-result {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: #efeff1;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.model-result + .model-result { border-top: 1px solid #e4e4e8; }
.model-result:active { background: var(--soft-teal); }
.model-result strong { display: block; font-size: 12px; line-height: 1.35; }
.model-result small { display: block; margin-top: 4px; color: var(--teal); font-size: 10px; font-weight: 700; }
.searching,
.search-error { margin: 0; padding: 14px 12px; color: var(--muted); font-size: 11px; }
.search-error { color: var(--danger); }

.direct-result { padding: 13px; background: #efeff1; }
.direct-kicker { margin: 0 0 5px; color: var(--teal); font-size: 10px; font-weight: 800; }
.direct-model-name { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.direct-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.direct-range-field {
  padding: 9px;
  border: 1px solid #ffb1ac;
  border-radius: 9px;
  background: #efeff1;
}
.direct-range-field > span { display: block; margin-bottom: 6px; color: var(--deep); font-size: 10px; font-weight: 900; }
.direct-range-controls { display: grid; grid-template-columns: 1fr 12px 1fr; align-items: center; gap: 3px; }
#equipment-form .direct-range-controls input {
  min-width: 0;
  min-height: 37px;
  margin: 0;
  padding: 0 5px;
  border-width: 1px;
  border-radius: 7px;
  font-size: 11px;
  text-align: center;
}
.direct-range-controls i { color: var(--muted); font-size: 10px; font-style: normal; text-align: center; }
.direct-spec-error { min-height: 15px; margin: 7px 0 0; color: var(--danger); font-size: 10px; font-weight: 800; }
.direct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.direct-actions button {
  min-height: 39px;
  padding: 0 9px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  background: var(--soft-teal);
  color: var(--deep);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}
.combo-section { margin-top: 14px; }
.combo-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.combo-heading h3 { margin: 0; color: var(--deep-2); font-size: 13px; font-weight: 800; }
#combo-count { color: var(--teal); font-size: 11px; font-weight: 900; }
.combo-add-button {
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--teal);
  border-radius: 9px;
  background: var(--soft-teal);
  color: var(--deep);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}
.combo-empty { margin: 0; color: var(--muted); font-size: 11px; }
.combo-list { display: grid; gap: 5px; }
.combo-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #efeff1;
  font-size: 11px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.combo-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.combo-name { flex: none; max-width: 32%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.combo-parts { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.combo-lure { flex: none; color: var(--deep); font-size: 10px; font-weight: 800; white-space: nowrap; }
.combo-line { flex: none; color: var(--teal); font-size: 10px; font-weight: 800; white-space: nowrap; }
.combo-line.combo-line-warning { color: var(--danger); }
.combo-move { display: flex; flex: none; gap: 2px; }
.combo-move-button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
}
.combo-move-button:disabled { cursor: default; opacity: .3; }
.combo-preview { min-height: 15px; margin: -4px 0 8px; color: var(--teal); font-size: 11px; font-weight: 800; }
.combo-preview.combo-line-warning { color: var(--danger); }
.form-status { min-height: 17px; margin: -3px 0 9px; color: var(--danger); font-size: 11px; font-weight: 700; }
.form-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 9px; }
.form-actions button { min-height: 47px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 900; }
.cancel-button { border: 1px solid var(--border); background: #efeff1; color: var(--muted); }
.save-button { border: 0; background: var(--deep); color: #efeff1; }
.save-button:disabled { cursor: wait; opacity: .6; }

nav.bottom {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -4px 15px rgba(72, 29, 28, 0.08);
  backdrop-filter: blur(12px);
}
nav.bottom a {
  flex: 1;
  padding: 14px 0 13px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
nav.bottom a.active { color: var(--deep); font-weight: 900; }

@media (max-width: 380px) {
  main { padding-right: 11px; padding-left: 11px; }
  .page-heading h1 { font-size: 22px; }
  .add-button { padding: 0 12px; font-size: 11px; }
  .direct-spec-grid { grid-template-columns: 1fr; }
  nav.bottom a { font-size: 10px; }
}

@media (min-width: 700px) {
  .modal { align-items: center; padding: 20px; }
  .modal-panel { border-radius: 20px; }
}

/* Keep the equipment page readable on the club's dark theme. */
body.bass-theme.theme-equipment .equipment-table-wrap {
  border-color: #45454d !important;
  background: #202025 !important;
}
body.bass-theme.theme-equipment .equipment-table { color: #efeff1; }
body.bass-theme.theme-equipment .equipment-table th {
  border-color: #45454d;
  background: #313137;
  color: #d1d1d7;
}
body.bass-theme.theme-equipment .equipment-table tbody tr td {
  border-color: #414149;
  background: #25252a;
  color: #efeff1;
}
body.bass-theme.theme-equipment .equipment-table tbody tr:nth-child(even) td { background: #2c2c32; }
body.bass-theme.theme-equipment .equipment-table tbody tr.eq-rod td { background: #282e37; }
body.bass-theme.theme-equipment .equipment-table tbody tr.eq-rod:nth-child(even) td { background: #282e37; }
body.bass-theme.theme-equipment .equipment-table tbody tr.eq-reel td { background: #24362d; }
body.bass-theme.theme-equipment .equipment-table tbody tr.eq-reel:nth-child(even) td { background: #24362d; }
body.bass-theme.theme-equipment .equipment-table td.eq-lure,
body.bass-theme.theme-equipment .equipment-table td.eq-line { color: #efeff1; }
body.bass-theme.theme-equipment .equipment-source { color: #5faf7a; }
body.bass-theme.theme-equipment .manual-spec-fields {
  border-color: #565660;
  background: #232328;
}
body.bass-theme.theme-equipment .manual-spec-fields legend { color: #efeff1; }
body.bass-theme.theme-equipment .manual-range-label,
body.bass-theme.theme-equipment .manual-range-controls > span { color: #c5c5cb; }
body.bass-theme.theme-equipment #equipment-form input,
body.bass-theme.theme-equipment #equipment-form select,
body.bass-theme.theme-equipment #combo-form input,
body.bass-theme.theme-equipment #combo-form select {
  border-color: #666672 !important;
  background: #26262b !important;
  color: #efeff1 !important;
  color-scheme: dark;
}
body.bass-theme.theme-equipment #combo-form input::placeholder,
body.bass-theme.theme-equipment #equipment-form input::placeholder { color: #b3b3bc; opacity: 1; }
body.bass-theme.theme-equipment #combo-form select option,
body.bass-theme.theme-equipment #equipment-form select option {
  background: #26262b;
  color: #efeff1;
}
body.bass-theme.theme-equipment .modal-panel {
  border-color: #45454d;
  background: #1c1c1f;
}
body.bass-theme.theme-equipment .modal-heading { border-color: #45454d; }
body.bass-theme.theme-equipment .modal-heading h2,
body.bass-theme.theme-equipment #equipment-form > label,
body.bass-theme.theme-equipment #combo-form > label { color: #efeff1; }
body.bass-theme.theme-equipment .form-status { color: #ffb1ac; }
body.bass-theme.theme-equipment .page-status { color: #d8d8dc; }
body.bass-theme.theme-equipment .cancel-button {
  border-color: #565660;
  background: #313137;
  color: #e1e1e5;
}

body.bass-theme.theme-equipment .equipment-range-chart {
  width: 100%;
  min-width: 0;
  padding: 11px 12px 10px;
  overflow: hidden;
  border: 1px solid #45454d;
  border-radius: 12px;
  background: #25252a;
  color: #efeff1;
}
body.bass-theme.theme-equipment .equipment-range-chart-title {
  margin: 0 0 8px;
  color: #efeff1;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
body.bass-theme.theme-equipment .equipment-range-chart-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
}
body.bass-theme.theme-equipment .equipment-range-chart-grid {
  stroke: #52525c;
  stroke-opacity: .72;
}
body.bass-theme.theme-equipment .equipment-range-chart-axis {
  fill: #c9c9cf;
  color: #c9c9cf;
  font-size: 10px;
}
body.bass-theme.theme-equipment .equipment-range-chart-label {
  fill: #efeff1;
  color: #efeff1;
  font-size: 11px;
  font-weight: 700;
}
body.bass-theme.theme-equipment .equipment-range-chart-bar-label {
  fill: #efeff1;
  color: #efeff1;
  font-size: 10px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(40, 46, 55, 0.45);
  stroke-linejoin: round;
  stroke-width: 1px;
}
body.bass-theme.theme-equipment .equipment-range-chart-range-label {
  fill: #e3e3e7;
  color: #e3e3e7;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 380px) {
  body.bass-theme.theme-equipment .equipment-range-chart { padding: 9px 8px; }
  body.bass-theme.theme-equipment .equipment-range-chart-title { font-size: 12px; }
}

body.bass-theme.theme-equipment .combo-heading h3 { color: #efeff1; }
body.bass-theme.theme-equipment #combo-count { color: #5faf7a; }
body.bass-theme.theme-equipment .combo-add-button {
  border-color: #5faf7a;
  background: #24362d;
  color: #bfdfca;
}
body.bass-theme.theme-equipment .combo-empty { color: #c5c5cb; }
body.bass-theme.theme-equipment .combo-card {
  border-color: #45454d;
  background: #25252a;
  color: #efeff1;
}
body.bass-theme.theme-equipment .combo-parts { color: #c5c5cb; }
body.bass-theme.theme-equipment .combo-lure { color: #ff3b30; }
body.bass-theme.theme-equipment .combo-line { color: #5faf7a; }
body.bass-theme.theme-equipment .combo-move-button { border-color: #45454d; color: #c5c5cb; }
body.bass-theme.theme-equipment .combo-preview { color: #5faf7a; }
body.bass-theme.theme-equipment .combo-line.combo-line-warning,
body.bass-theme.theme-equipment .combo-preview.combo-line-warning { color: #ffb1ac; }
/* ── Ultron flat ── */
@media (max-width: 600px) {
  #equipment-app { padding: 12px 0 80px !important; }
  #equipment-app > *:not(.equipment-table-wrap):not(.equipment-range-chart) { padding-left: 12px; padding-right: 12px; }
  .equipment-table-wrap, .equipment-range-chart { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .equipment-range-chart { padding: 12px !important; border-top: 1px solid #23232a !important; border-bottom: 0 !important; }
  .combo-section { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 600px) {
  html body #equipment-app #equipment-list { padding: 0 !important; }
  html body #equipment-app .equipment-table-wrap { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; background: transparent !important; }
}
@media (max-width: 600px) {
  html body #equipment-app .equipment-table th:first-child, html body #equipment-app .equipment-table td:first-child { padding-left: 12px !important; }
  html body #equipment-app .equipment-table th:last-child, html body #equipment-app .equipment-table td:last-child { padding-right: 12px !important; }
  html body #equipment-app .equipment-edit-hint { font-size: 12px !important; color: #8e8e96 !important; margin: 4px 0 10px !important; line-height: 1.5; }
}