* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: var(--font-family);
}

.start-panel {
  max-width: 520px;
  margin: 48px auto;
  background: var(--panel-bg);
  padding: 24px;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}

.start-form { display: grid; gap: 16px; }
.start-form label { display: grid; gap: 6px; }
input, select, button { font: inherit; padding: 8px 10px; }
button { cursor: pointer; color: var(--button-text); }
button:disabled, input:disabled { cursor: default; opacity: .48; }

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.compact-header h1 {
  font-size: var(--title-size);
  margin: 0;
  opacity: var(--title-opacity);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-letter-spacing);
}

.session-info { opacity: .7; font-size: 14px; }
.app-workspace { display: flex; gap: var(--workspace-gap); align-items: flex-start; }
.puzzle-panel { display: grid; gap: 22px; }

.board-grid {
  display: grid;
  grid-template-columns: repeat(9, var(--cell-size));
  grid-template-rows: repeat(9, var(--cell-size));
  border: var(--grid-outer-border);
  background: var(--grid-line-color);
  width: max-content;
  border-radius: var(--grid-radius);
  overflow: hidden;
  box-shadow: var(--grid-shadow);
}

.board-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  text-align: center;
  font-size: var(--cell-value-size);
  border: 1px solid var(--cell-border-color);
  background: var(--cell-bg);
  color: var(--cell-text);
  padding: 0;
  resize: none;
  overflow: hidden;
  font-family: var(--cell-font-family);
}

.board-cell:nth-child(3n) { border-right-width: var(--subgrid-border-width); }
.board-cell:nth-child(9n) { border-right-width: 1px; }
.board-cell:nth-child(n+19):nth-child(-n+27),
.board-cell:nth-child(n+46):nth-child(-n+54) { border-bottom-width: var(--subgrid-border-width); }

.board-cell.is-candidate {
  font-size: var(--cell-candidate-size);
  font-weight: 700;
  color: var(--candidate-text);
  text-align: left;
  vertical-align: top;
  padding: var(--candidate-padding);
}

.board-cell.is-given { font-weight: var(--given-weight); color: var(--given-text); }
.board-cell.has-conflict { background: var(--conflict-bg); outline: var(--conflict-outline); }
.board-cell.is-marked { background: var(--marked-bg); color: var(--marked-text); box-shadow: var(--marked-shadow); }
.board-cell.is-selected { outline: var(--selected-outline); }
.board-cell.is-scan-blocked { opacity: var(--scan-blocked-opacity); }
.board-cell.is-scan-forced { transform: scale(1.04); font-weight: 800; }
.board-cell.is-match { background: var(--match-bg); outline: var(--match-outline); color: var(--match-text); }

.tool-panel {
  min-width: var(--tool-panel-width);
  padding-top: 4px;
  display: grid;
  gap: var(--tool-panel-gap);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--tool-button-width));
  gap: var(--control-gap);
}

.select-action-control {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 8px;
  align-items: stretch;
}

.control-button,
.tool-grid button,
.secondary-controls button,
.select-action-control,
.primary-action,
.select-action-control button,
.select-action-control select {
  min-height: var(--control-height);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  border-radius: var(--control-radius);
  box-shadow: var(--control-shadow);
  font-size: var(--control-font-size);
  white-space: normal;
  line-height: 1.15;
}

.select-action-control select { text-align: center; padding: 0 8px; }
.status-message { min-height: 28px; font-size: var(--status-size); color: var(--status-color); }
.status-message[data-kind="error"] { color: var(--status-error); }

.secondary-controls {
  display: grid;
  grid-template-columns: repeat(2, var(--secondary-button-width));
  gap: var(--control-gap);
  margin-top: var(--secondary-controls-margin-top);
}

.option-panel { display: grid; gap: 20px; max-width: var(--option-panel-width); margin-left: 6px; }
.option-row { font-size: var(--option-font-size); display: flex; align-items: center; gap: 10px; }
.option-row input { width: 24px; height: 24px; }
.option-row.is-disabled { opacity: .6; }
.primary-action { width: 280px; justify-self: center; margin-top: 30px; }

@media (max-width: 1200px) {
  body:not(.theme-modern) {
    --workspace-gap: 36px;
    --cell-size: 58px;
    --cell-value-size: 32px;
    --cell-candidate-size: 13px;
    --tool-button-width: 220px;
    --secondary-button-width: 260px;
    --tool-panel-width: 460px;
    --tool-panel-gap: 160px;
  }
}