:root {
  --theme-red: #d92d20;
  --theme-blue: #1d4ed8;
  --theme-red-rgb: 217, 45, 32;
  --theme-blue-rgb: 29, 78, 216;
  --road-cell-size: 18px;
  --road-circle-size: 12px;
  --road-circle-border-width: 2px;
  --road-numbered-size: 15px;
  --road-numbered-font-size: 7px;
  --road-compare-size: 15px;
  --road-compare-font-size: 10px;
  --road-header-font-size: 10px;
  --road-inline-judge-font-size: 28px;
  --point-road-cell-size: 24px;
  --point-road-judge-cell-height: 36px;
  --point-road-header-cell-height: 34px;
  --point-road-upper-cell-height: 30px;
  --point-road-upper-circle-size: 19px;
  --point-road-numbered-size: 20px;
  --point-road-upper-numbered-size: 23px;
  --point-road-numbered-font-size: 9px;
  --point-road-upper-numbered-font-size: 11px;
  --point-road-compare-size: 20px;
  --point-road-upper-compare-size: 23px;
  --point-road-compare-font-size: 13px;
  --point-road-upper-compare-font-size: 15px;
  --point-road-header-font-size: 16px;
  --point-road-judge-row-count: 2;
  --point-road-template-row-count: 0;
  --point-road-judge-spacer-row-count: 0;
  --point-road-judge-spacer-height: 5px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 10px;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

.board-section {
  margin-bottom: 16px;
}

.board-section:last-child {
  margin-bottom: 0;
}

.road-map {
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
  background-color: #f9f9f9;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sub-road-block {
  margin-top: 12px;
}

.sub-road-title {
  margin-bottom: 6px;
  padding-left: 2px;
  font-size: 13px;
  font-weight: 800;
  color: #475467;
}

.recommend-panel {
  margin-top: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #dfe6ee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recommend-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.recommend-chip {
  flex: 0 1 48%;
  max-width: 48%;
  min-width: 0;
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.recommend-chip-title {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.92;
}

.strategy-recommend-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.strategy-recommend-chip {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 2px;
  border-radius: 6px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.strategy-recommend-name {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.strategy-recommend-value {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.strategy-recommend-chip-neutral {
  color: #667085;
  background: #f2f4f7;
  border-color: #e4e7ec;
}

.strategy-recommend-chip-red {
  color: #ffffff;
  background: rgba(var(--theme-red-rgb), 0.92);
  border-color: rgba(var(--theme-red-rgb), 0.92);
}

.strategy-recommend-chip-blue {
  color: #ffffff;
  background: rgba(var(--theme-blue-rgb), 0.92);
  border-color: rgba(var(--theme-blue-rgb), 0.92);
}

.recommend-total {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 76px;
  padding: 0 2px;
  border-radius: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  text-align: right;
}

.recommend-total-label {
  align-self: flex-end;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.recommend-total-amount {
  align-self: flex-end;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.recommend-total-neutral {
  color: #667085;
  background: transparent;
}

.recommend-total-positive {
  color: var(--theme-red);
  background: transparent;
}

.recommend-total-negative {
  color: var(--theme-blue);
  background: transparent;
}

.recommend-amount {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.recommend-chip-neutral {
  color: #667085;
  background: #f2f4f7;
  border-color: #e4e7ec;
}

.recommend-chip-red {
  color: #ffffff;
  background: var(--theme-red);
  border-color: var(--theme-red);
}

.recommend-chip-blue {
  color: #ffffff;
  background: var(--theme-blue);
  border-color: var(--theme-blue);
}

.stats-display {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 2px;
}

.stats-display-bottom {
  margin-top: 10px;
}

.stat-item {
  text-align: left;
}

.stat-format {
  font-size: 24px;
  font-weight: bold;
}

.stat-total {
  color: #333;
}

.stat-banker {
  color: var(--theme-red);
}

.stat-player {
  color: var(--theme-blue);
}

.big-road-container {
  min-height: calc((var(--road-cell-size) * 6) + 4px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #ddd;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: relative;
}

.two-row-road-container {
  min-height: calc(
    var(--point-road-header-cell-height) +
    var(--point-road-upper-cell-height) +
    (var(--point-road-cell-size) * var(--point-road-template-row-count)) +
    (var(--point-road-judge-cell-height) * var(--point-road-judge-row-count)) +
    10px
  );
}

.sub-road-block + .sub-road-block {
  margin-top: 12px;
}

.big-road-grid {
  display: flex;
  flex-direction: row;
  border-left: 1px solid #aaa;
  border-top: 1px solid #aaa;
  min-width: 100%;
  will-change: transform;
}

.two-row-road-grid {
  min-height: calc(
    var(--point-road-header-cell-height) +
    var(--point-road-upper-cell-height) +
    (var(--point-road-cell-size) * var(--point-road-template-row-count)) +
    (var(--point-road-judge-cell-height) * var(--point-road-judge-row-count))
  );
}

.two-row-road-grid .road-cell {
  width: var(--point-road-cell-size);
  height: var(--point-road-cell-size);
}

.two-row-road-grid .point-road-judge-cell {
  height: var(--point-road-judge-cell-height);
}

.two-row-road-grid .point-road-header-grid-cell {
  height: var(--point-road-header-cell-height);
}

.two-row-road-grid .point-road-upper-cell {
  height: var(--point-road-upper-cell-height);
}

.two-row-road-grid .point-road-upper-cell .circle-marker {
  width: var(--point-road-upper-circle-size);
  height: var(--point-road-upper-circle-size);
}

.two-row-road-grid .point-road-upper-cell .circle-marker-numbered {
  width: var(--point-road-upper-numbered-size);
  height: var(--point-road-upper-numbered-size);
  font-size: var(--point-road-upper-numbered-font-size);
}

.two-row-road-grid .circle-marker-numbered {
  width: var(--point-road-numbered-size);
  height: var(--point-road-numbered-size);
  font-size: var(--point-road-numbered-font-size);
}

.two-row-road-grid .circle-marker-compare {
  width: var(--point-road-compare-size);
  height: var(--point-road-compare-size);
  font-size: var(--point-road-compare-font-size);
}

.two-row-road-grid .point-road-upper-cell .circle-marker-compare {
  width: var(--point-road-upper-compare-size);
  height: var(--point-road-upper-compare-size);
  font-size: var(--point-road-upper-compare-font-size);
}

.secondary-input-cell {
  padding: 2px;
  background: #f8fafc;
}

.secondary-template-cell {
  background: #f8fafc;
}

.secondary-template-judge-cell {
  background: #f8fafc;
}

.secondary-template-row-start {
  border-top: 2px solid var(--theme-red) !important;
}

.secondary-strategy-row-start {
  border-top: 2px solid var(--theme-red) !important;
}

.two-row-road-grid .point-road-header-text {
  font-size: var(--point-road-header-font-size);
}

.two-row-road-grid .inline-judge-marker {
  font-size: var(--road-inline-judge-font-size);
}

.two-row-road-grid .secondary-shoe-label-col {
  inset: var(--point-road-header-cell-height) 0 0 0;
}

.bead-road-container {
  min-height: calc(var(--point-road-header-cell-height) + (var(--point-road-cell-size) * var(--bead-road-row-count)) + 10px);
}

.bead-road-grid {
  min-height: calc(var(--point-road-header-cell-height) + (var(--point-road-cell-size) * var(--bead-road-row-count)));
}

.bead-road-grid .road-cell {
  width: var(--point-road-cell-size);
  height: var(--point-road-cell-size);
}

.bead-road-grid .point-road-header-grid-cell {
  height: var(--point-road-header-cell-height);
}

.bead-road-grid .point-road-header-text {
  font-size: var(--point-road-header-font-size);
}

.bead-road-grid .circle-marker {
  width: var(--point-road-upper-circle-size);
  height: var(--point-road-upper-circle-size);
}

.bead-road-grid .bead-road-shoe-label-col {
  inset: var(--point-road-header-cell-height) 0 0 0;
}

.point-road-header-cell {
  background-color: #eef3f8 !important;
}

.point-road-header-text {
  font-size: var(--road-header-font-size);
  font-weight: 900;
  color: #374151;
  line-height: 1;
  letter-spacing: 0.2px;
}

.road-column {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.road-cell {
  width: var(--road-cell-size);
  height: var(--road-cell-size);
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  background-color: #f9f9f9;
}

.cell-empty {
  background-color: #f9f9f9;
}

.circle-marker {
  width: var(--road-circle-size);
  height: var(--road-circle-size);
  border-radius: 50%;
  background-color: transparent;
  border: var(--road-circle-border-width) solid;
}

.circle-marker-numbered {
  width: var(--road-numbered-size);
  height: var(--road-numbered-size);
  border-width: var(--road-circle-border-width);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--road-numbered-font-size);
  font-weight: 700;
  line-height: 1;
}

.circle-marker-compare {
  width: var(--road-compare-size);
  height: var(--road-compare-size);
  border-width: var(--road-circle-border-width);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--road-compare-font-size);
  font-weight: 700;
  line-height: 1;
  border-radius: 3px;
}

.cell-red .circle-marker {
  border-color: var(--theme-red);
}

.cell-blue .circle-marker {
  border-color: var(--theme-blue);
}

.cell-red .circle-marker-numbered {
  color: var(--theme-red);
}

.cell-blue .circle-marker-numbered {
  color: var(--theme-blue);
}

.cell-red .circle-marker-compare {
  color: #fff;
  background-color: var(--theme-red);
  border-color: var(--theme-red);
}

.cell-blue .circle-marker-compare {
  color: #fff;
  background-color: var(--theme-blue);
  border-color: var(--theme-blue);
}

.inline-judge-cell {
  background-color: #f9f9f9;
}

.secondary-bet-amount {
  position: absolute;
  right: 1px;
  bottom: 1px;
  color: #667085;
  background: rgba(249, 249, 249, 0.94);
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.15px;
  padding: 1px 0 0 1px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.secondary-bet-amount-compact {
  font-size: 6px;
  letter-spacing: -0.25px;
}

.secondary-bet-amount-long {
  font-size: 5px;
  letter-spacing: -0.35px;
}

.point-road-judge-cell.has-bet-amount .inline-judge-symbol {
  position: absolute;
  top: 2px;
  left: 50%;
  font-size: 22px;
  font-weight: 700;
  transform: translateX(-50%);
  z-index: 1;
}

.point-road-judge-cell.has-bet-amount.inline-judge-preview-cell .inline-judge-marker {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.point-road-judge-cell.has-bet-amount .inline-judge-direction-dot {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
}

.point-road-judge-group-start {
  border-top: 3px solid #d92d20 !important;
}

.point-road-judge-spacer-cell {
  height: var(--point-road-judge-spacer-height);
  background: transparent;
  border-right: none;
  border-bottom: none;
}

.inline-judge-marker {
  display: flex;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", "Microsoft YaHei", "PingFang SC", sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.inline-judge-direction-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cfd7e3;
  flex: 0 0 7px;
}

.inline-judge-direction-dot-red {
  background: var(--theme-red);
}

.inline-judge-direction-dot-blue {
  background: var(--theme-blue);
}

.inline-judge-symbol {
  font-size: var(--road-inline-judge-font-size);
  font-weight: 500;
  transform: translateY(-1px) scale(0.88);
}

.inline-judge-symbol-red {
  color: var(--theme-red);
}

.inline-judge-symbol-blue {
  color: var(--theme-blue);
  font-weight: 400;
}

/* 分隔列样式（单列） */
.separator-col {
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.02) 100%);
}
/* 分隔列保留竖向分隔线，去掉横向线段（更美观） */
.separator-col .road-cell {
  border-bottom: none; /* 去掉横线 */
  /* 保留 border-right 竖线以保持列边界的节奏感 */
  background: transparent;
}
.shoe-label-col {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl; /* 竖排文字 */
  text-orientation: upright; /* 数字与标点竖直显示 */
  color: #555;
  font-size: 14px;
  letter-spacing: 6px; /* 上下间距更大更美观（竖排时生效） */
  line-height: 1; /* 避免额外行距干扰 */
  font-weight: 600;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.secondary-shoe-label-col {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 700;
  inset: var(--road-cell-size) 0 0 0;
}

/* 交替行列颜色，增强网格视觉效果（分隔列保持自身背景，不覆盖） */
.road-column:not(.separator-col):nth-child(even) .road-cell {
  background-color: #f2f2f2;
}

.road-column:not(.separator-col):nth-child(even) .road-cell:nth-child(even) {
  background-color: #f9f9f9;
}

.road-column:not(.separator-col):nth-child(odd) .road-cell:nth-child(even) {
  background-color: #f2f2f2;
}

/* 有内容的单元格覆盖上面的背景色 */
.cell-red,
.cell-blue {
  background-color: #fff !important;
}

/* 最新结果高亮 */
.latest-result {
  box-shadow: inset 0 0 0 2px #2ecc71;
}

/* 控制按钮区域 */
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-panel {
  padding: 15px 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.visually-hidden-road-section {
  display: none !important;
}

.strategy6-template-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.strategy6-template-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.strategy6-template-title {
  font-size: 15px;
  font-weight: 800;
  color: #344054;
}

.strategy6-template-meta {
  margin-top: 4px;
  font-size: 13px;
  color: #667085;
}

.strategy6-template-tip {
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--theme-red-rgb), 0.07), rgba(var(--theme-blue-rgb), 0.07));
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

.strategy6-template-input-row,
.strategy6-template-action-row {
  flex-wrap: wrap;
}

.strategy6-template-panel .btn-template,
.strategy6-template-panel .btn-template-action {
  min-width: 0;
  padding: 12px 14px;
  font-size: 14px;
}

.btn-template-blue {
  background: rgba(var(--theme-blue-rgb), 0.12);
  color: var(--theme-blue);
  border: 1px solid rgba(var(--theme-blue-rgb), 0.2);
}

.btn-template-red {
  background: rgba(var(--theme-red-rgb), 0.12);
  color: var(--theme-red);
  border: 1px solid rgba(var(--theme-red-rgb), 0.2);
}

.btn-template-blue:hover,
.btn-template-red:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.strategy6-template-block {
  margin-top: 0;
}

.strategy6-template-container {
  min-height: calc(var(--point-road-header-cell-height) + (var(--point-road-cell-size) * 6) + 10px);
}

.strategy6-template-grid {
  min-height: calc(var(--point-road-header-cell-height) + (var(--point-road-cell-size) * 6));
}

.strategy6-template-grid .road-cell {
  width: var(--point-road-cell-size);
  height: var(--point-road-cell-size);
}

.strategy6-template-grid .point-road-header-grid-cell {
  height: var(--point-road-header-cell-height);
}

.strategy6-template-grid .point-road-header-text {
  font-size: 12px;
}

.strategy6-template-grid .circle-marker {
  width: var(--point-road-upper-circle-size);
  height: var(--point-road-upper-circle-size);
}

.button-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.button-row-result {
  gap: 0;
  align-items: center;
}

.button-row-gap {
  flex: 0 0 20px;
  width: 20px;
  height: 1px;
}

.btn {
  padding: 20px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
  min-width: 120px;
  transition: all 0.2s ease;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.btn-input {
  min-width: 0;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 8px;
}

.btn:focus,
.btn:focus-visible {
  outline: none;
}

.btn-red {
  background-color: var(--theme-red);
  color: white;
}

.btn-blue {
  background-color: var(--theme-blue);
  color: white;
}

.btn-input.btn-red {
  background-color: var(--theme-red);
}

.btn-input.btn-blue {
  background-color: var(--theme-blue);
}

.btn-function {
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #dee2e6;
  padding: 10px 16px; /* 桌面端也略微收紧，和手机端风格一致 */
}

.btn:active {
  transform: scale(0.95);
}

.btn:hover {
  opacity: 0.9;
}

.btn-function:hover {
  background-color: #e9ecef;
}

/* 手机端优化 */
@media (max-width: 768px) {
  :root {
    --road-cell-size: 16px;
    --road-circle-size: 11px;
    --road-circle-border-width: 2px;
    --road-numbered-size: 13px;
    --road-numbered-font-size: 6px;
    --road-compare-size: 13px;
    --road-compare-font-size: 9px;
    --road-header-font-size: 9px;
    --road-inline-judge-font-size: 22px;
    --point-road-cell-size: 20px;
    --point-road-header-cell-height: 28px;
    --point-road-upper-cell-height: 25px;
    --point-road-upper-circle-size: 16px;
    --point-road-numbered-size: 17px;
    --point-road-upper-numbered-size: 20px;
    --point-road-numbered-font-size: 8px;
    --point-road-upper-numbered-font-size: 10px;
    --point-road-compare-size: 17px;
    --point-road-upper-compare-size: 20px;
    --point-road-compare-font-size: 11px;
    --point-road-upper-compare-font-size: 13px;
    --point-road-header-font-size: 14px;
    --point-road-judge-spacer-height: 4px;
  }

  body {
    padding: 5px;
  }

  .road-map {
    padding: 6px;
  }

  .big-road-container {
    min-height: calc((var(--road-cell-size) * 6) + 2px);
    padding: 1px;
  }

  .two-row-road-container {
    min-height: calc(
      var(--point-road-header-cell-height) +
      var(--point-road-upper-cell-height) +
      (var(--point-road-cell-size) * var(--point-road-template-row-count)) +
      (var(--point-road-judge-cell-height) * var(--point-road-judge-row-count)) +
      10px
    );
  }

  .two-row-road-grid {
    min-height: calc(
      var(--point-road-header-cell-height) +
      var(--point-road-upper-cell-height) +
      (var(--point-road-cell-size) * var(--point-road-template-row-count)) +
      (var(--point-road-judge-cell-height) * var(--point-road-judge-row-count))
    );
  }

  .bead-road-container {
    min-height: calc(var(--point-road-header-cell-height) + (var(--point-road-cell-size) * var(--bead-road-row-count)) + 10px);
  }

  .bead-road-grid {
    min-height: calc(var(--point-road-header-cell-height) + (var(--point-road-cell-size) * var(--bead-road-row-count)));
  }

  .sub-road-title {
    font-size: 12px;
    margin-bottom: 5px;
  }

  .recommend-panel {
    gap: 6px;
    padding: 5px 6px;
  }

  .recommend-list {
    gap: 6px;
  }

  .stats-display-bottom {
    margin-top: 8px;
  }

  .stat-format {
    font-size: 20px;
  }

  .recommend-chip {
    min-width: 0;
    width: auto;
    flex-basis: 46%;
    max-width: 46%;
    padding: 10px 10px;
    font-size: 20px;
  }

  .recommend-chip-title {
    font-size: 11px;
  }

  .strategy-recommend-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .strategy-recommend-chip {
    padding: 4px 1px;
  }

  .strategy-recommend-value {
    font-size: 10px;
  }

  .recommend-amount {
    font-size: 22px;
  }

  .recommend-total {
    min-width: 60px;
    padding: 0 1px;
  }

  .recommend-total-amount {
    font-size: 22px;
  }

  .btn {
    padding: 25px 25px;
    font-size: 18px;
    min-width: 140px;
  }

  .btn-input {
    min-width: 0;
    min-height: 52px;
    padding: 12px 14px;
  }

  /* 功能按钮（撤销/换桌/重置）在手机端更精致小巧 */
  .btn-function {
    padding: 8px 14px;
    font-size: 14px;
    min-width: 96px;
  }

  .button-row {
    gap: 8px;
  }

  .button-row-gap {
    flex-basis: 14px;
    width: 14px;
  }

  .strategy6-template-title {
    font-size: 14px;
  }

  .strategy6-template-meta,
  .strategy6-template-tip {
    font-size: 12px;
  }

  .strategy6-template-grid .point-road-header-text {
    font-size: 10px;
  }
}



/* 精美弹框样式 */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal.show {
  display: flex;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.modal-dialog {
  position: relative;
  width: min(90vw, 420px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  overflow: hidden;
  animation: modal-in 160ms ease-out;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #888;
}
.modal-close:hover {
  color: #333;
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  color: #555;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.settings-dialog {
  width: min(92vw, 460px);
}

.settings-modal-body {
  padding-top: 14px;
  padding-bottom: 14px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-form-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 12px;
}

.settings-label {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.settings-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  background: #fff;
  box-sizing: border-box;
}

.settings-modal-readonly .settings-label {
  color: #98a2b3;
}

.settings-input[readonly] {
  color: #98a2b3;
  background: #f2f4f7;
  border-color: #d0d5dd;
  cursor: not-allowed;
}

.settings-textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}

.settings-input:focus {
  outline: none;
  border-color: var(--theme-blue);
  box-shadow: 0 0 0 3px rgba(var(--theme-blue-rgb), 0.12);
}

.settings-input[readonly]:focus {
  border-color: #d0d5dd;
  box-shadow: none;
}

.modal-tip {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--theme-red-rgb), 0.08), rgba(var(--theme-blue-rgb), 0.08));
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.settings-modal-readonly .modal-tip {
  background: #f2f4f7;
  color: #98a2b3;
}

.btn:disabled,
.btn-disabled {
  background: #d0d5dd !important;
  color: #ffffff !important;
  cursor: not-allowed;
  opacity: 1;
}

.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid #eee;
}

.recommend-history-dialog {
  width: min(92vw, 560px);
}

.recommend-history-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommend-history-summary {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 800;
  background: #f2f4f7;
  color: #667085;
}

.recommend-history-summary-positive {
  color: var(--theme-red);
  background: rgba(var(--theme-red-rgb), 0.08);
}

.recommend-history-summary-negative {
  color: var(--theme-blue);
  background: rgba(var(--theme-blue-rgb), 0.08);
}

.recommend-history-list {
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.recommend-history-item {
  padding: 12px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fafbfc;
}

.recommend-history-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.recommend-history-order {
  font-size: 14px;
  font-weight: 800;
  color: #344054;
}

.recommend-history-meta {
  flex: 1 1 180px;
  font-size: 14px;
  color: #667085;
}

.recommend-history-profit {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.recommend-history-profit-positive {
  color: var(--theme-red);
}

.recommend-history-profit-negative {
  color: var(--theme-blue);
}

.recommend-history-profit-neutral {
  color: #667085;
}

.recommend-history-detail {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 14px;
  color: #475467;
}

.recommend-history-detail span {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
}

.recommend-history-strategies {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.recommend-history-strategy-item {
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2f6;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.recommend-history-strategy-item-red {
  background: rgba(var(--theme-red-rgb), 0.1);
  color: var(--theme-red);
}

.recommend-history-strategy-item-blue {
  background: rgba(var(--theme-blue-rgb), 0.1);
  color: var(--theme-blue);
}

.recommend-history-empty {
  padding: 28px 0;
  text-align: center;
  color: #98a2b3;
  font-size: 15px;
}

@media (max-width: 768px) {
  .modal {
    padding: 10px;
    align-items: flex-start;
  }

  .settings-dialog {
    width: min(96vw, 460px);
    max-height: calc(100dvh - 20px);
    margin: 0 auto;
  }

  .settings-modal-body {
    padding: 12px;
  }

  .settings-form-row {
    grid-template-columns: 64px 1fr;
    gap: 10px;
  }

  .settings-input {
    font-size: 16px;
  }
}

@keyframes modal-in {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 精简版：主要信息集中在一屏，长路单只在图内横向滚动。 */
body {
  color: #263244;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.container { width: 100%; max-width: 840px; }
.app-header, .road-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-header { padding: 6px 2px 16px; }
.app-header h1 { font-size: 18px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.edition-badge { font-size: 11px; font-weight: 600; color: #667085; padding: 3px 7px; background: #e9edf2; border-radius: 5px; white-space: nowrap; }
.edition-note { font-size: 11px; color: #667085; white-space: nowrap; }
.road-map { background: #fff; padding: 12px; border: 1px solid #e1e5eb; border-radius: 14px; box-shadow: 0 2px 8px #1f293706; margin-bottom: 12px; }
.road-heading { margin-bottom: 10px; flex-wrap: wrap; }
.road-heading h2 { font-size: 14px; font-weight: 700; }
.stat-format { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; }
.big-road-container { padding: 1px; border-color: #cfd5dd; border-radius: 6px; }
.road-hint { font-size: 10px; color: #667085; text-align: right; padding-top: 5px; }
.recommend-panel { margin-top: 12px; padding: 12px 0 0; border: 0; border-top: 1px solid #edf0f3; border-radius: 0; box-shadow: none; gap: 16px; align-items: stretch; }
.current-recommendation { flex: 1 1 55%; min-width: 0; }
.section-label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 8px; color: #667085; }
.recommend-chip { width: 100%; max-width: none; min-height: 56px; padding: 12px 8px; border-radius: 9px; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.recommend-direction { font-size: 16px; font-weight: 700; }
.recommend-amount { font-size: 26px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.recommend-total { flex: 1 1 40%; min-width: 0; max-width: 48%; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0; }
.recommend-total-label { font-size: 12px; font-weight: 650; }
.recommend-total-amount { font-size: 30px; line-height: 1.1; overflow-wrap: anywhere; max-width: 100%; font-variant-numeric: tabular-nums; }
.recommend-total-hint { color: #667085; font-size: 10px; }
.strategy-recommend-row { margin-top: 14px; gap: 6px; }
.strategy-recommend-chip { flex-direction: column; min-height: 52px; padding: 8px 3px; gap: 7px; border-radius: 7px; }
.strategy-recommend-name { font-size: 10px; font-weight: 600; opacity: .9; }
.strategy-recommend-value { font-size: 13px; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.controls { gap: 0; padding: 12px; border: 1px solid #e1e5eb; border-radius: 14px; background: #fff; }
.control-panel { padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
.control-panel + .control-panel { margin-top: 10px; }
.button-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.button-row-result { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btn { min-width: 0; min-height: 44px; padding: 10px 8px; }
.btn-input { min-height: 58px; padding: 14px; font-size: 23px; border-radius: 10px; }
.btn-function { font-size: 14px; border-radius: 8px; background: #f7f8fa; }
.btn:focus-visible, .recommend-total:focus-visible, .big-road-container:focus-visible, .modal-close:focus-visible { outline: 3px solid #64748b; outline-offset: 3px; }
.save-status { font-size: 12px; text-align: center; color: #526174; min-height: 18px; margin-top: 10px; }
.session-expiry { margin: 8px 0 2px; text-align: center; color: #667085; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.modal { padding: 12px; align-items: center; }
.modal-dialog, .settings-dialog { width: min(100%, 460px); max-height: calc(100dvh - 24px); }
.modal-title { font-size: 17px; }
.modal-header { padding: 10px 12px 10px 16px; }
.modal-close { width: 44px; height: 44px; flex: 0 0 44px; }
.settings-form-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.settings-label { font-size: 14px; }
.settings-textarea { min-height: 100px; font-size: 16px; }
.modal-tip { background: #f3f5f8; font-size: 13px; color: #596579; border-radius: 8px; }
.modal-footer .btn { flex: 1 1 0; }
.recommend-history-dialog { width: min(100%, 560px); }
.recommend-history-list { min-width: 0; }
.recommend-history-detail span, .recommend-history-strategy-item, .recommend-history-profit { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }

@media (min-width: 769px) {
  body { padding-top: 28px; }
  .app-header { padding-bottom: 18px; }
  .app-header h1 { font-size: 21px; }
  .road-map { padding: 18px; }
  .road-heading h2 { font-size: 16px; }
  .stat-format { font-size: 13px; }
  .controls { padding: 16px; }
  .strategy-recommend-chip { min-height: 58px; }
  .strategy-recommend-name { font-size: 11px; }
  .strategy-recommend-value { font-size: 15px; }
}

@media (max-width: 350px) {
  body { padding-left: 8px; padding-right: 8px; }
  .app-header h1 { font-size: 16px; gap: 6px; }
  .edition-note { font-size: 10px; }
  .road-map, .controls { padding: 10px; }
  .stat-format { gap: 6px; font-size: 11px; }
  .strategy-recommend-row { gap: 4px; }
  .strategy-recommend-value { font-size: 12px; }
  .recommend-total-amount { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .modal-dialog { animation: none; }
  .big-road-container { scroll-behavior: auto; }
}

/* Keep recommendation state available while removing the strategy strip from the UI. */
.strategy-recommend-row { display: none !important; }

/* 方格、空心圈、判定符号和红色分隔线沿用参考图的视觉形式。 */
.path-diagram { width: min(100%, 390px); margin: 0 auto; background: #fff; border: 1px solid #e1e5eb; border-radius: 14px; padding: 12px; box-shadow: 0 2px 8px #1f293706; }
.path-diagram-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.path-diagram-heading h2 { font-size: 15px; font-weight: 750; }
.path-diagram-heading span, .path-diagram-legend, .path-diagram-note { color: #667085; font-size: 11px; line-height: 1.5; }
.path-diagram-legend { margin-bottom: 9px; }
.path-diagram-note { margin-top: 8px; }
.path-diagram-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #bfc3c8; border-radius: 7px; }
.path-diagram-scroll:focus-visible { outline: 3px solid #64748b; outline-offset: 3px; }
.path-diagram-table { width: 100%; min-width: 275px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.path-diagram-table th, .path-diagram-table td { border: 1px solid #bfc3c8; text-align: center; vertical-align: middle; }
.path-diagram-table thead th { background: #f2f3f5; color: #344054; font-size: 24px; font-weight: 800; height: 43px; }
.path-diagram-table tbody + tbody .path-results td { border-top: 3px solid #c43c2f; }
.path-diagram-table .path-results td { height: 43px; }
.path-diagram-table .path-actions td { height: 67px; }
.path-circle { display: inline-block; width: 28px; height: 28px; border: 3px solid; border-radius: 50%; vertical-align: middle; }
.path-circle-red { border-color: #bc3d31; }
.path-circle-blue { border-color: #2456b4; }
.path-action { display: block; font-size: 39px; font-weight: 800; line-height: 1; }
.path-action-win { color: #2456b4; }
.path-action-loss { color: #bc3d31; }
.path-diagram-table .path-actions small { display: block; color: #667085; font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; }

/* 新布局：大路图、汇总、逐轮路径图、输入按钮依次排列。 */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.app-header { justify-content: center; padding: 10px 0 16px; }
.app-header h1 { display: block; font-size: clamp(22px, 5.8vw, 30px); font-weight: 800; text-align: center; }
.board-section { display: flex; flex-direction: column; gap: 14px; }
.road-map, .summary-card, .path-diagram, .controls { width: 100%; margin: 0; background: #fff; border: 1px solid #e1e5eb; border-radius: 16px; box-shadow: 0 2px 8px #1f293708; }
.road-map { padding: 12px; }
.summary-card { padding: 12px; }
.summary-card .recommend-panel { display: flex; align-items: stretch; gap: 14px; width: 100%; margin: 0; padding: 0; border: 0; }
.summary-card .current-recommendation { flex: 1 1 55%; min-width: 0; }
.summary-card .section-label { margin-bottom: 4px; font-size: 11px; }
.summary-card .recommend-chip { min-height: 90px; background: #f6f8ff; border: 1px solid #e4e8ef; }
.summary-card .recommend-total { flex: 1 1 40%; max-width: none; justify-content: center; }
.summary-card .recommend-total-amount { font-size: clamp(28px, 7vw, 40px); }
.path-diagram { max-width: none; padding: 12px; }
.path-diagram-scroll { max-height: min(60vh, 620px); overflow: auto; border-radius: 8px; }
.path-diagram-table { min-width: 275px; }
.path-diagram-table thead th { position: sticky; top: 0; z-index: 1; }
.controls { padding: 14px; }
.controls .button-row-tools { gap: 7px; }
.controls .button-row-tools .btn { min-height: 38px; font-size: 13px; }
.controls .button-row-result { gap: 14px; }
.controls .button-row-result .btn-input { min-height: 76px; font-size: 26px; }
.save-status { margin: -5px 0 0; }

@media (max-width: 480px) {
  .board-section { gap: 12px; }
  .summary-card .recommend-panel { gap: 9px; }
  .summary-card .recommend-chip { min-height: 76px; }
  .path-diagram-scroll { max-height: 53vh; }
  .controls .button-row-result .btn-input { min-height: 64px; }
}

/* 手绘图中的十条固定路径完整保留；左侧蓝线标记与最近输入结果相符的路径。 */
.path-section-title { margin: 0 0 8px; font-size: 15px; font-weight: 750; color: #344054; }
.path-reference-status { margin: 0 0 10px; min-height: 17px; color: #667085; font-size: 12px; }
.path-reference-scroll { max-height: none; }
.path-reference-match .path-results td:first-child { box-shadow: inset 4px 0 #2456b4; }

/* 截图顺序：连续方格表、庄闲大按钮、重置撤销设置。 */
.controls-input .btn-input { min-height: 76px; }
.controls-tools .btn-function { min-height: 52px; font-size: 16px; font-weight: 700; }
.round-history { width: 100%; border: 1px solid #e1e5eb; border-radius: 14px; background: #fff; color: #526174; }
.round-history > summary { padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 650; }
.round-history > .path-diagram { border: 0; border-top: 1px solid #e1e5eb; border-radius: 0 0 14px 14px; box-shadow: none; }
@media (max-width: 480px) {
  .controls-input .btn-input { min-height: 72px; }
  .controls-tools .btn-function { min-height: 48px; }
}

/* 参照手机截图的整页比例：窄边距、小方格大路、紧凑盈亏卡和大色块按钮。 */
body { background: #f8f9fb; }
.session-expiry { display: none; }
.save-status:empty { display: none; }
.road-map, .summary-card, .path-reference, .controls { border-color: #e4e7eb; box-shadow: 0 2px 6px #23324a0d; }
.summary-card { padding: 6px; }
.summary-card .recommend-panel { gap: 10px; }
.summary-card .current-recommendation { flex: 0 0 46%; }
.summary-card .section-label { display: none; }
.summary-card .recommend-chip { min-height: 58px; padding: 6px; border-radius: 9px; }
.summary-card .recommend-chip-red { background: #e52d20; color: #fff; border-color: #e52d20; }
.summary-card .recommend-chip-blue { background: #2d60d6; color: #fff; border-color: #2d60d6; }
.summary-card .recommend-chip-neutral { background: #f6f8ff; color: #5c6b80; border-color: #e1e6ef; }
.summary-card .recommend-direction { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.summary-card .recommend-chip-neutral::after { content: '0'; font-size: 34px; font-weight: 850; line-height: 1; }
.summary-card .recommend-amount { font-size: 34px; line-height: 1; }
.summary-card .recommend-total { align-items: flex-end; justify-content: center; gap: 4px; }
.summary-card .recommend-total-label { font-size: 16px; line-height: 1.1; }
.summary-card .recommend-total-amount { font-size: 35px; }
.summary-card .recommend-total-hint { display: none; }
.path-reference { padding: 8px; }
.path-reference .path-diagram-table thead th { height: 40px; font-size: 24px; }
.path-reference .path-results td { height: 40px; }
.path-reference .path-actions td { height: 58px; }
.path-reference .path-circle { width: 31px; height: 31px; }
.path-reference .path-action { font-size: 43px; }
.path-reference .path-actions small { font-size: 12px; }
.controls-input { padding: 14px 12px; }
.controls-input .button-row-result { gap: 30px; }
.controls-input .btn-input { min-height: 64px; color: transparent; }
.controls-input .btn-blue { background: #2f61d8; }
.controls-input .btn-red { background: #e52d20; }
.controls-tools { padding: 12px; }
.controls-tools .button-row-tools { gap: 9px; }
.controls-tools .button-row-tools .btn-function { min-height: 48px; font-size: 17px; }
@media (max-width: 768px) {
  body { padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); }
  .app-header { padding: 11px 0 15px; }
  .app-header h1 { font-size: 25px; }
  .board-section { gap: 14px; }
  .road-map { padding: 7px; }
  .path-reference { padding: 8px; }
}

/* 上方仅显示一行五格实时结果。 */
.path-live-strip-scroll { width: 100%; overflow: hidden; margin-bottom: 8px; border: 1px solid #bfc3c8; border-radius: 6px; }
.path-live-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
.path-live-strip-cell { height: 40px; min-width: 0; display: flex; align-items: center; justify-content: center; border-right: 1px solid #bfc3c8; }
.path-live-strip-cell:last-child { border-right: 0; }
.path-live-strip-cell .path-circle { width: 31px; height: 31px; border-width: 3px; }
.path-wait { display: block; color: #667085; font-size: 14px; font-weight: 750; line-height: 1; white-space: nowrap; }

/* 下方十条固定序列各有结果、与实时结果逐列比较、实时推荐三行。 */
.path-reference .path-judgements td { height: 58px; border-bottom: 3px solid #c43c2f; }
.path-reference .path-recommendations td { height: 50px; border-bottom: 3px solid #c43c2f; }
.path-reference .path-judgements .path-action { font-size: 43px; }
.path-recommendation { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; }
.path-recommendation-blue { color: #2456b4; }
.path-recommendation-red { color: #bc3d31; }
.path-end { display: block; color: #344054; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }

/* 手机竖向固定路径：大路图、推荐、庄闲按钮和工具固定在首屏，十条路径在中间滚动。 */
@media (max-width: 768px) {
  body {
    height: 100dvh;
    overflow: hidden;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }
  .container { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .app-header { flex: none; padding: 0 0 4px; }
  .app-header h1 { font-size: 18px; line-height: 1.15; }
  .board-section { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; margin: 0; overflow: hidden; }
  .road-map, .summary-card, .path-reference, .controls { border-radius: 9px; }
  .road-map { flex: none; padding: 4px; }
  .summary-card { flex: none; padding: 4px; }
  .summary-card .recommend-panel { gap: 7px; }
  .summary-card .recommend-chip { min-height: 44px; padding: 3px; }
  .summary-card .recommend-amount, .summary-card .recommend-chip-neutral::after { font-size: 27px; }
  .summary-card .recommend-total-label { font-size: 12px; }
  .summary-card .recommend-total-amount { font-size: 25px; }
  .controls-input { flex: none; padding: 4px; }
  .controls-input .button-row-result { gap: 7px; }
  .controls-input .btn-input { min-height: 50px; padding: 0; }
  .path-reference { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px; }
  .path-live-strip-scroll { flex: none; margin-bottom: 4px; }
  .path-live-strip-cell { height: 26px; }
  .path-live-strip-cell .path-circle { width: 18px; height: 18px; border-width: 2px; }
  .path-reference-scroll { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; border: 1px solid #bfc3c8; overscroll-behavior: contain; }
  .path-reference .path-diagram-table { display: table; width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
  .path-reference .path-diagram-table thead { display: table-header-group; }
  .path-reference .path-diagram-table thead th { height: 26px; font-size: 15px; position: sticky; top: 0; z-index: 1; }
  .path-reference .path-diagram-table tbody { display: table-row-group; overflow: visible; border: 0; }
  .path-reference .path-diagram-table tr { display: table-row; }
  .path-reference .path-diagram-table td { display: table-cell; min-width: 0; padding: 0; text-align: center; vertical-align: middle; border: 1px solid #bfc3c8; }
  .path-reference .path-results td, .path-reference .path-judgements td, .path-reference .path-recommendations td { height: 28px; }
  .path-reference .path-judgements td, .path-reference .path-recommendations td { border-bottom: 2px solid #c43c2f; }
  .path-reference .path-circle { width: 20px; height: 20px; border-width: 2px; }
  .path-reference .path-judgements .path-action { font-size: 26px; }
  .path-reference .path-recommendation, .path-reference .path-wait { font-size: 11px; line-height: 1; }
  .path-reference .path-end { font-size: 10px; line-height: 1; }
  .controls-tools { flex: none; padding: 4px; }
  .controls-tools .button-row-tools { gap: 5px; }
  .controls-tools .button-row-tools .btn-function { min-height: 38px; padding: 3px; font-size: 13px; }
}

@media (max-width: 768px) and (max-height: 640px) {
  body { padding: 2px; }
  .app-header { padding: 0; }
  .app-header h1 { font-size: 15px; }
  .board-section { gap: 3px; }
  .road-map, .summary-card, .controls { padding: 2px; }
  .summary-card .recommend-chip { min-height: 38px; }
  .summary-card .recommend-amount, .summary-card .recommend-chip-neutral::after { font-size: 23px; }
  .summary-card .recommend-total-label { font-size: 10px; }
  .summary-card .recommend-total-amount { font-size: 21px; }
  .controls-input .btn-input { min-height: 44px; }
  .controls-tools .button-row-tools .btn-function { min-height: 34px; }
  .path-reference { padding: 3px; }
  .path-live-strip-cell { height: 23px; }
  .path-live-strip-cell .path-circle { width: 16px; height: 16px; }
  .path-reference .path-results td, .path-reference .path-judgements td, .path-reference .path-recommendations td { height: 25px; }
  .path-reference .path-circle { width: 17px; height: 17px; }
  .path-reference .path-judgements .path-action { font-size: 23px; }
}