/* Dark-first color layer. Keep solver colors/data and the original layout intact.
   Load last: live style.css contains rules absent from older local snapshots. */
:root {
  color-scheme: dark;
  --bg: #0c141e;
  --bg-2: #101c28;
  --panel: #172534;
  --panel-2: #223548;
  --border: #3c5265;
  --border-2: #6b8296;
  --text: #f1f5f9;
  --muted: #b8c7d6;
  --muted-2: #a4b7c9;
  --accent: #83e7b9;
  --accent-2: #55d5a0;
  --accent-ink: #08281c;
  --g-blunder: #ff858b;
  --shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

body { background: radial-gradient(1000px 580px at 50% -220px, #213e48 0%, var(--bg) 70%) fixed, var(--bg); }
.topbar { background: rgba(12, 20, 30, .97); border-bottom-color: var(--border); }
.card, .showcase, .feature, .question-comments { box-shadow: 0 3px 14px rgba(0, 0, 0, .12); }
.nav-link.is-active { background: #213e3b; color: #a4f4ce; }
.mode-card.is-active { background: #203e39; }
.seg button.is-active { background: #2b4357; color: #fff; box-shadow: inset 0 0 0 1px var(--border-2); }
.btn-ghost, .icon-btn { background: var(--panel-2); border-color: var(--border-2); color: var(--text); }
.btn-ghost.is-active { background: #203e39; }
.text-input, .question-comments textarea { background: var(--bg-2); border-color: var(--border-2); }
.text-input::placeholder, .question-comments textarea::placeholder { color: var(--muted-2); opacity: 1; }
button, input, select, textarea { accent-color: var(--accent); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--accent); outline-offset: 3px; }
.switch-track { background: #43596b; box-shadow: inset 0 0 0 1px var(--border-2); }
.switch-track::after { background: #d6e1eb; }
.switch input:checked + .switch-track { background: #28624e; }
.btn-primary { box-shadow: 0 5px 18px rgba(85, 213, 160, .14); }
/* Account controls: one compact group, with a mint profile and quiet sign-out. */
.auth-area {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; max-width: 100%;
  padding: 4px; border: 1px solid var(--border); border-radius: 16px;
  background: #142230; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.auth-area:empty { display: none; }
.auth-area button {
  appearance: none; position: relative; min-height: 38px; margin: 0; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 11px; background: transparent;
  color: var(--muted); font: 600 13px/1.4 var(--font); white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.auth-area .auth-name {
  max-width: 180px; padding-left: 42px; overflow: hidden; text-overflow: ellipsis;
  background: #203d37; color: #d6ffec; border-color: #365c50; font-weight: 700;
}
.auth-area .auth-name::before {
  content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: #83e7b9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308281c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M5 20v-2a7 7 0 0 1 14 0v2'/%3E%3C/svg%3E") center / 17px no-repeat;
}
.auth-area .auth-name:hover { background: #294e43; border-color: var(--accent); }
.auth-area .auth-btn:hover { background: #263b4c; color: var(--text); }
.auth-area #btn-logout::before {
  content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H5v14h4m5-14 7 7-7 7m-6-7h13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth-area #btn-logout:hover { color: #ffb8ba; background: #3b2934; }
.auth-area #btn-login { padding-inline: 16px; background: #203d37; color: #d6ffec; border-color: #365c50; }
.auth-area button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.street-pill.current { background: #224238; color: #e4fff1; }
.street-pill.done { background: #1b342f; }
.history .h-item.raise, .history .h-item.bet, .history .h-item.allin,
.play-events .ev.raise, .play-events .ev.bet, .play-events .ev.allin { color: #ffbb92; }
.history .h-item.call, .history .h-item.check,
.play-events .ev.call, .play-events .ev.check { color: #97e7bf; }

/* Retain each action's solver hue, but darken its surface so white labels
   (including the small bet size) stay readable. No opacity on graded answers. */
.action-btn {
  border: 1px solid var(--c);
  background: linear-gradient(rgba(9, 20, 32, .52), rgba(9, 20, 32, .52)), var(--c);
  color: #fff;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2), inset 0 3px 0 var(--c);
}
.action-btn small { color: #edf3fa; opacity: 1; }
.action-btn:disabled { opacity: 1; filter: none; }
.action-btn.dim { opacity: 1; box-shadow: inset 0 2px 0 var(--c); }
.action-btn.is-chosen { outline: 3px solid #fff; outline-offset: -3px; }
.action-btn.is-best { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.action-btn.is-best::after { color: #fff; opacity: 1; }
.actions.is-waiting .action-btn { opacity: .75; filter: none; }

/* Main explanation is neutral text; reserve color for its heading and key idea. */
.explain, .hq-explain, .hq-explain-sum, .hq-explain-pts, .spot-desc { color: var(--text); }
.explain, .hq-explain { line-height: 1.85; }
.hq-explain { background: #1b2d3c; border-color: #496477; border-left: 3px solid var(--accent); }
.hq-explain-title, .explain strong, .hq-explain strong { color: #a4f4ce; }
.hq-explain-sample, .hq-explain-loading, .hq-explain-empty { color: var(--muted); }
.spot-desc .ctx { color: #ffdc8b; }
.sbar .track, .gbar .track, .combo-row .stack { background: #0b1621; border-color: var(--border); }
.rcell.empty { background: var(--bg-2); color: var(--muted-2); }
.rcell .tip, .toast { background: var(--panel-2); }
.qc-guest { background: var(--bg-2); }
.qc-links a:hover, .qc-links button:hover, .qc-item-actions button:hover { color: var(--text); text-decoration: underline; }

/* SVG presentation attributes are overridden without touching card suits,
   hand values, table geometry, or the active hero highlight. */
.table-svg .seat { opacity: 1; }
.table-svg .seat > rect[rx="12"] { fill: #263d4b; }
.table-svg .seat[opacity="0.55"] > rect[rx="12"],
.table-svg .seat[opacity="0.38"] > rect[rx="12"] { fill: #182733; stroke: #506474; }
.table-svg .seat[opacity="0.55"] > text,
.table-svg .seat[opacity="0.38"] > text { fill: #b8c7d6; }
.table-svg #felt stop[offset="0%"] { stop-color: #2c6655; }
.table-svg #felt stop[offset="70%"] { stop-color: #204b3f; }
.table-svg #felt stop[offset="100%"] { stop-color: #193b33; }
@keyframes seatFold { from { opacity: 1; } to { opacity: 1; } }

@media (max-width: 999px) {
  .setup-row > .seg { max-width: 100%; flex-wrap: wrap; }
  .actions.is-live {
    background: #142332;
    border-top: 1px solid var(--border-2);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .24);
  }
  .hq-explain, .explain { font-size: 14.5px; }
  .hq-explain-sample { font-size: 12px; }
}

@media (max-width: 680px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 8px; padding: 10px 12px; }
  .brand { font-size: 15px; gap: 6px; }
  .topbar > .nav { grid-column: 1 / -1; grid-row: 2; padding: 3px; border-radius: 12px; background: var(--bg-2); border: 1px solid #2c4153; }
  .topbar .nav-link { flex: 1; text-align: center; padding: 7px 8px; }
  .auth-area { grid-column: 2; grid-row: 1; margin-left: auto; border-radius: 14px; }
  .auth-area button { min-height: 38px; padding-inline: 9px; font-size: 12px; }
  .auth-area .auth-name { max-width: 116px; padding-left: 38px; }
  .auth-area .auth-name::before { left: 6px; width: 24px; height: 24px; }
  .auth-area #btn-logout::before { margin-right: 4px; width: 14px; }
}
@media (max-width: 359px) {
  .topbar .brand-name { display: none; }
}

@media (forced-colors: active) {
  .action-btn { border-color: ButtonText; }
  .action-btn.is-best, .mode-card.is-active { outline: 2px solid Highlight; }
}