:root { color-scheme: light; font-family: Inter, "Segoe UI", sans-serif; color: #243342; background: #eef2f3; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 6px; padding: 10px 12px; background: #e4e9ec; }
button:disabled { cursor: not-allowed; opacity: .55; }
button.primary { color: white; background: #27864b; }
button.danger { color: white; background: #c94a40; }
button.coach { color: white; background: #7d3c98; width: 100%; }
.error { color: #b93228; min-height: 1.2em; }
[hidden] { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: min(420px, 100%); background: white; border-radius: 12px; padding: 28px; box-shadow: 0 12px 45px #1d2b3620; }
.auth-card h1 { margin-bottom: 0; }
.auth-tabs, .button-row { display: flex; gap: 8px; }
.auth-tabs button { flex: 1; }
.auth-tabs button.active { color: white; background: #27864b; }
form, .tab-content { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; font-weight: 600; }
label.check { flex-direction: row; align-items: center; font-weight: 400; }
input, select, textarea { width: 100%; border: 1px solid #c7d0d5; border-radius: 6px; padding: 9px; background: white; }
textarea { min-height: 90px; resize: vertical; }
.topbar { height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: #233342; color: white; }
.alpha-badge { margin-left: 8px; padding: 2px 6px; font-size: .7rem; border-radius: 8px; background: #27864b; }
.link-btn { color: white; background: transparent; }
.workspace { display: flex; justify-content: center; gap: 28px; padding: 28px; }
.board-section { display: flex; gap: 12px; align-items: flex-start; }
#board-wrapper { width: min(600px, calc(100vw - 470px)); flex: 0 0 auto; }
#board { width: 100%; }
#eval-bar-container { width: 28px; aspect-ratio: 1 / 21.4; min-height: 300px; background: #20262b; position: relative; overflow: hidden; border-radius: 4px; }
#eval-bar-fill { position: absolute; bottom: 0; width: 100%; height: 50%; background: white; transition: height .25s; }
#eval-score-text { position: absolute; z-index: 2; width: 100%; padding-top: 5px; text-align: center; font-size: .68rem; font-weight: bold; color: #e8eef1; mix-blend-mode: difference; }
#game-status-line, #variation-nav { margin-top: 10px; padding: 10px; text-align: center; background: white; border-radius: 7px; }
#variation-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
#sidebar { width: 390px; min-height: 610px; background: white; border-radius: 10px; box-shadow: 0 6px 24px #1d2b361a; overflow: hidden; }
.tabs-header { display: flex; overflow-x: auto; background: #e9edef; }
.tab-btn { flex: 1; border-radius: 0; background: transparent; padding: 13px 9px; white-space: nowrap; }
.tab-btn.active { color: #20723f; background: white; box-shadow: inset 0 -3px #27864b; }
.tab-content { display: none; padding: 18px; }
.tab-content.active { display: flex; }
.tab-content h3 { margin: 0; }
.hint { margin: 0; color: #61717d; font-size: .85rem; }
.move-history { max-height: 230px; overflow: auto; display: grid; grid-template-columns: 32px 1fr 1fr; gap: 4px; }
.move-number { padding: 7px 3px; color: #7b8992; }
.move-btn { padding: 7px; text-align: left; background: #f1f4f5; }
.move-btn.user-move::after { content: " •"; color: #27864b; }
.move-btn.selected { color: white; background: #27864b; }
.button-row > * { flex: 1; }
.analysis-output { border-left: 4px solid #27864b; padding: 12px; background: #f3f8f5; }
.quality { font-weight: 700; text-transform: uppercase; }
.candidate { display: block; width: 100%; margin: 6px 0; text-align: left; background: white; border: 1px solid #cbd8d0; }
#coach-commentary { white-space: pre-wrap; line-height: 1.45; }
.thread { margin-top: 10px; border: 1px solid #d8dfe2; border-radius: 7px; padding: 10px; }
.thread h4 { margin: 0 0 5px; }
.message { margin: 6px 0; padding: 7px; border-radius: 5px; background: #f2f5f6; white-space: pre-wrap; }
.message strong { display: block; font-size: .75rem; color: #61717d; }
.highlight-hint { box-shadow: inset 0 0 4px 4px #f1c40f !important; }
@media (max-width: 950px) {
    .workspace { flex-direction: column; align-items: center; padding: 14px; }
    #board-wrapper { width: min(600px, calc(100vw - 60px)); }
    #sidebar { width: min(600px, calc(100vw - 28px)); }
}