:root {
  color-scheme: light;
  --page: #f4f4f1;
  --surface: #ffffff;
  --surface-subtle: #f7f7f5;
  --ink: #1d1f20;
  --muted: #6d7175;
  --line: #d9dad7;
  --line-strong: #b9bbb7;
  --accent: #2459d6;
  --safe: #20835d;
  --safe-bg: #eaf6f0;
  --mine: #c3423f;
  --mine-bg: #fbefee;
  --best: #c18413;
  --best-bg: #fff5df;
  --guess: #a86608;
  --guess-bg: #fff7e8;
  --cell-size: clamp(42px, 5.7vw, 60px);
  --sl-color-primary-600: #2459d6;
  --sl-color-primary-500: #3569df;
  --sl-input-border-color: #cfd1cd;
  --sl-input-border-color-hover: #aeb1ac;
  --sl-input-border-color-focus: #2459d6;
  --sl-focus-ring-color: rgba(36, 89, 214, .28);
  --sl-border-radius-small: 5px;
  --sl-border-radius-medium: 7px;
  --sl-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: #cbd9fb; color: #14244b; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sl-font-sans);
  font-size: 14px;
}

button, input { font: inherit; }
button { color: inherit; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p, dl, dd { margin: 0; }

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 48px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(29, 31, 32, .08);
}

.app-bar {
  min-height: 58px;
  padding: 9px 12px 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.product-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.product-icon { width: 22px; height: 22px; color: #3e4246; }
.product-title h1 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.product-title p { margin-top: 2px; color: var(--muted); font-size: 11px; }
.app-bar sl-button::part(base) { min-height: 32px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 690px; }
.board-panel { min-width: 0; padding: 24px 26px 28px; }
.analysis-panel { padding: 18px; border-left: 1px solid var(--line); background: var(--surface-subtle); }

.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-heading h2, .inspector-heading h2 { font-size: 14px; font-weight: 650; }
.panel-heading p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.counter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.counter sl-badge::part(base) { min-width: 28px; justify-content: center; background: #e8e9e6; color: #2d3032; font-variant-numeric: tabular-nums; }

.board-stage {
  padding: 24px 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fafaf8;
}
.board-wrap { width: fit-content; max-width: 100%; margin: 0 auto; }
.column-labels { display: grid; margin-left: 24px; color: #8a8e91; font-size: 10px; font-weight: 600; text-align: center; }
.column-labels span { width: var(--cell-size); }
.board-row { display: flex; }
.row-labels { display: grid; width: 24px; color: #8a8e91; font-size: 10px; font-weight: 600; text-align: center; }
.row-labels span { height: var(--cell-size); display: grid; place-items: center; }
.board {
  --cols: 8;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell-size));
  gap: 3px;
  padding: 5px;
  border: 1px solid #bfc1bd;
  border-radius: 6px;
  background: #d9dad7;
}

.cell {
  position: relative;
  width: var(--cell-size);
  height: var(--cell-size);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c5c7c3;
  border-radius: 4px;
  background: #eeefec;
  color: #55595d;
  cursor: pointer;
  font-weight: 650;
  font-size: clamp(17px, 2.4vw, 24px);
  box-shadow: 0 1px 1px rgba(29, 31, 32, .08);
  transition: background-color 90ms ease-out, border-color 90ms ease-out;
}
.cell:hover { background: #e5e6e2; border-color: #aeb1ac; }
.cell:focus-visible { z-index: 1; outline: 3px solid rgba(36, 89, 214, .28); outline-offset: 1px; }
.cell.editing { z-index: 2; box-shadow: inset 0 0 0 2px var(--accent); }
.cell.open { background: #fff; border-color: #e1e2df; box-shadow: none; cursor: default; }
.cell.flagged { color: var(--mine); background: var(--mine-bg); border-color: #e6bab7; }
.cell.flagged svg { width: 18px; height: 18px; }
.cell[data-value="1"] { color: #2865b3; }
.cell[data-value="2"] { color: #237455; }
.cell[data-value="3"] { color: #b33b38; }
.cell[data-value="4"] { color: #6751a5; }
.cell[data-value="5"], .cell[data-value="6"], .cell[data-value="7"], .cell[data-value="8"] { color: #815d19; }
.cell.safe-result { background: var(--safe-bg); border-color: #76b99e; }
.cell.mine-result { background: var(--mine-bg); border-color: #d98a86; }
.cell.best-result { outline: 2px solid var(--best); outline-offset: -2px; }
.cell.best-result::after {
  content: "BẤM";
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--best);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .06em;
}
.cell.guess-result { outline: 2px dashed var(--guess); outline-offset: -2px; }
.cell.guess-result::after {
  content: "ĐOÁN";
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--guess);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .06em;
}
.cell .prob { position: absolute; top: 3px; right: 4px; color: #73777a; font-size: 9px; font-weight: 600; }

.board-footer { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 11px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.legend-dot.safe { background: var(--safe); }
.legend-dot.mine { background: var(--mine); }
.legend-dot.best { background: var(--best); }
.legend-dot.guess { background: var(--guess); }
.shortcut { color: #8b8f92; font-size: 10px; }

sl-popup#cellPicker { z-index: 20; --arrow-color: var(--surface); }
.cell-picker {
  width: 276px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(29, 31, 32, .16), 0 2px 6px rgba(29, 31, 32, .08);
}
.cell-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cell-picker-heading strong, .cell-picker-heading span { display: block; }
.cell-picker-heading strong { font-size: 12px; font-weight: 650; }
.cell-picker-heading span, .cell-picker-heading small { color: var(--muted); font-size: 9px; }
.cell-picker-heading small { padding-top: 2px; white-space: nowrap; }
.cell-picker-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.picker-option { min-width: 0; width: 100%; }
.picker-option.wide { grid-column: span 2; }
.picker-option::part(base) { width: 100%; min-width: 0; min-height: 36px; padding-inline: 7px; background: #fff; border-color: #d2d4d0; box-shadow: none; font-weight: 650; }
.picker-option:hover::part(base) { border-color: #aeb1ac; background: #f6f6f4; }
.picker-option.current::part(base) { border-color: #7f9cdf; background: #edf2ff; color: #1e4bb5; }
.picker-option.n1 { color: #2865b3; } .picker-option.n2 { color: #237455; } .picker-option.n3 { color: #b33b38; } .picker-option.n4 { color: #6751a5; }
.flag-option { color: var(--mine); }
.flag-option svg { width: 15px; height: 15px; }

.inspector-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.live-status { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.live-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--safe); }
.status-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.status-block h3 { margin-bottom: 5px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.status-block p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.status-block.error h3 { color: var(--mine); }

.recommendation {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
  padding: 11px;
  border: 1px solid #9ac8b5;
  border-radius: 6px;
  background: var(--safe-bg);
}
.recommendation-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; background: #d2ebdf; color: #176445; }
.recommendation-icon svg { width: 18px; height: 18px; }
.recommendation span { display: block; color: #4e6f61; font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.recommendation strong { display: block; margin: 1px 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.recommendation p { color: #4e6f61; font-size: 11px; }
.recommendation.guess { border-color: #dfbf7d; background: var(--guess-bg); }
.recommendation.guess .recommendation-icon { background: #f4dfb6; color: #77500b; }
.recommendation.guess span, .recommendation.guess p { color: #765619; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.stats div { padding: 12px 8px; text-align: center; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dt { color: var(--muted); font-size: 10px; }
.stats dd { margin-top: 3px; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stats div:nth-child(1) dd { color: var(--safe); }
.stats div:nth-child(2) dd { color: var(--mine); }

.result-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section-heading h3 { font-size: 12px; font-weight: 650; }
.section-heading sl-button::part(base) { padding-inline: 2px; min-height: 24px; color: var(--accent); font-size: 11px; }
.certainty-list { display: grid; gap: 0; max-height: 178px; overflow: auto; scrollbar-color: #c5c7c3 transparent; scrollbar-width: thin; }
.certainty-item { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e8e9e6; color: #464a4d; font-size: 11px; }
.certainty-item:last-child { border-bottom: 0; }
.certainty-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.certainty-item.safe b { color: var(--safe); }
.certainty-item.mine b { color: var(--mine); }
.empty { color: var(--muted); font-size: 11px; line-height: 1.5; }

.settings { display: block; margin-top: 14px; }
.settings::part(base) { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.settings::part(header) { padding: 10px 11px; font-size: 12px; font-weight: 600; }
.settings::part(content) { padding: 2px 11px 11px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 9px; }
.settings-grid sl-input::part(form-control-label) { color: var(--muted); font-size: 10px; }
.settings-grid sl-input::part(input) { font-variant-numeric: tabular-nums; }
.full { width: 100%; }
.full::part(base) { width: 100%; justify-content: center; }
.sample-button { margin-top: 10px; }
.sample-button::part(base) { background: #fff; border-color: #bfc1bd; font-weight: 550; }
.privacy-note { margin-top: 10px; color: #8b8f92; font-size: 10px; text-align: center; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  padding: 9px 12px;
  border: 1px solid #44484a;
  border-radius: 6px;
  background: #292c2e;
  color: #fff;
  box-shadow: 0 8px 22px rgba(29, 31, 32, .16);
  font-size: 11px;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 900px) {
  .app-shell { width: min(100% - 20px, 720px); }
  .workspace { grid-template-columns: 1fr; }
  .analysis-panel { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 620px) {
  :root { --cell-size: clamp(34px, 10.3vw, 48px); }
  .app-shell { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .app-bar { position: sticky; top: 0; z-index: 3; }
  .product-title p { display: none; }
  .app-bar sl-button::part(label) { font-size: 0; }
  .app-bar sl-button svg { margin: 0; }
  .board-panel { padding: 18px 10px 22px; }
  .panel-heading { padding-inline: 4px; }
  .board-stage { padding: 14px 4px; }
  .board-footer { padding-inline: 4px; }
  .shortcut { display: none; }
  .cell-picker { width: min(276px, calc(100vw - 20px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}