/* Skákakademían v2.2 — Chess MRI, What-if branches, personal coach and local Stockfish */
body { font-size: 16px; }
.pro-board-grid,.teaching-board,.board-shell { grid-template-rows: repeat(8,minmax(0,1fr))!important; }
.pro-square,.teach-square,.board-square { min-height: 0; height: 100%; }
.topbar { height: 82px; padding-inline: 24px; }
.brand { gap: 14px; min-width: 285px; }.brand-mark { width: 48px; height: 48px; font-size: 32px; }.brand strong { font-size: 18px; }.brand small { font-size: 10.5px; }
.top-status { font-size: 13px; }.profile-chip { min-width: 200px; padding: 10px 12px; }.profile-chip strong { font-size: 15px; }.profile-chip small { font-size: 12px; }
.sidebar { top: 82px; width: 255px; padding: 22px 16px; }.main-content { width: calc(100% - 255px); margin-left: 255px; }
.sidebar nav { gap: 9px; }.sidebar nav button,.sidebar nav a { min-height: 68px; padding: 11px 13px; }.sidebar nav strong { font-size: 16px; }.sidebar nav small { font-size: 12px; }.sidebar nav .nav-icon { font-size: 23px; }.sidebar nav b { font-size: 15px; }
.sidebar-engine { padding: 16px; }.sidebar-engine span strong { font-size: 15px; }.sidebar-engine span small,.sidebar-engine > small { font-size: 11.5px; }.sidebar-footer { font-size: 11px; }
.section-tag,.eyebrow { font-size: 12px!important; }.page-heading p,.pro-page-heading p { font-size: 15px; }.local-badge,.engine-status { font-size: 12px; }
.panel-title,.pro-card-title { min-height: 58px; font-size: 16px; }.panel-title button,.pro-card-title button { font-size: 12px; }.panel-title em,.pro-card-title em { font-size: 11px; }
.main-content button:not(.pro-square) { font-size: 13px; }.main-content input,.main-content textarea,.main-content select { font-size: 14px; }
.daily-content h3 { font-size: 17px; }.daily-content p { font-size: 13px; }.daily-content button { font-size: 13px; }
.feature-card strong { font-size: 17px; }.feature-card small { font-size: 12px; }.card-kicker { font-size: 10px; }
.setup-card label { font-size: 14px; }.setup-card label small { font-size: 11px; }.setup-card input,.setup-card textarea,.profiles-card input { font-size: 14px; }.setup-card textarea { line-height: 1.55; }
.tournament-layout { font-size: 15px; }.tournament-layout p,.tournament-layout .muted-center { font-size: 13px; line-height: 1.55; }.tournament-layout small { font-size: 11.5px; }.empty-state h2 { font-size: 23px; }.tournament-actions button { font-size: 13px; }
.pairing-card h3,.standings-card h3 { font-size: 17px; }.standings-list { font-size: 14px; }
.profile-hero span { font-size: 11px; }.profile-hero p { font-size: 14px; }.profile-stats article small { font-size: 11px; }.profile-list strong { font-size: 14px; }.profile-list small { font-size: 11.5px; }.profile-list i { font-size: 10px; }

.pro-board-mode-tabs { display: flex; gap: 8px; margin-bottom: 15px; }
.pro-board-mode-tabs button { min-height: 46px; padding: 0 18px; border: 1px solid rgba(126,168,201,.2); border-radius: 10px; color: #a4b8cc; background: rgba(9,24,40,.84); font-size: 14px!important; font-weight: 850; cursor: pointer; }
.pro-board-mode-tabs button.active { color: #07131c; border-color: var(--cyan-2); background: linear-gradient(135deg,var(--cyan-2),var(--cyan)); box-shadow: 0 10px 28px rgba(36,209,220,.16); }
.pro-board-workarea { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 12px; }
.pro-analysis-layout .pro-board-host { width: min(100%,55dvh,620px); }
.pro-editor-palette { display: none; grid-template-columns: repeat(2,48px); grid-auto-rows: 48px; gap: 7px; align-content: center; justify-content: center; }
.pro-board-panel[data-active-board-mode="editor"] .pro-board-workarea,.pro-board-panel[data-active-board-mode="teach"] .pro-board-workarea { grid-template-columns: 106px minmax(0,1fr); }
.pro-board-panel[data-active-board-mode="editor"] .pro-editor-palette,.pro-board-panel[data-active-board-mode="teach"] .pro-editor-palette { display: grid; }
.pro-editor-palette button { position: relative; width: 48px; height: 48px; padding: 2px; border: 1px solid rgba(131,174,206,.22); border-radius: 8px; color: #a9bdd0; background: #0c1e31; cursor: pointer; }
.pro-editor-palette button:hover,.pro-editor-palette button.active { border-color: var(--cyan); background: rgba(36,209,220,.13); box-shadow: inset 0 0 0 1px rgba(36,209,220,.18); }.pro-editor-palette svg { width: 100%; height: 100%; }.pro-editor-palette .editor-move-tool,.pro-editor-palette .editor-eraser { display: grid; place-items: center; font-size: 20px!important; }.pro-editor-palette span { position: absolute; right: 2px; bottom: 1px; font-size: 7px; font-weight: 850; }
.pro-editor-settings { display: none; align-items: center; gap: 7px; margin-bottom: 11px; padding: 10px; overflow-x: auto; border: 1px solid rgba(126,168,201,.15); border-radius: 9px; background: rgba(4,15,27,.45); white-space: nowrap; }
.pro-board-panel:not([data-active-board-mode="play"]) .pro-editor-settings { display: flex; }.pro-editor-settings button { min-height: 36px; padding: 0 10px; border: 1px solid rgba(126,168,201,.2); border-radius: 7px; color: #a9bdd0; background: #102238; font-size: 12px!important; font-weight: 800; cursor: pointer; }.pro-editor-settings button.active { color: #07131c; background: var(--cyan-2); border-color: var(--cyan-2); }.pro-editor-settings span,.pro-editor-settings label { color: #9db1c5; font-size: 12px; }.pro-editor-settings label { display: flex; align-items: center; gap: 4px; }.pro-editor-settings input { accent-color: var(--cyan); }
.pro-live-fen { display: none; margin: 10px 3px 0; padding: 8px 10px; border-radius: 7px; color: #8fa8bf; background: rgba(4,15,27,.55); overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }.pro-board-panel:not([data-active-board-mode="play"]) .pro-live-fen { display: block; }

.pro-toolbar button { font-size: 13px!important; }.pro-board-status { font-size: 13px; }.pro-board-status strong { font-size: 15px; }
.pro-card-title { font-size: 17px; }.pro-best small { font-size: 11px; }.pro-best p { font-size: 13px; }.pro-eval span { font-size: 13px; }.pro-move-list span { font-size: 13px; }.pro-import-card textarea { font-size: 13px; }.pro-import-message { font-size: 12px; }
.pro-mode-tabs button { font-size: 14px; }.pro-opening-list span { font-size: 10px; }.pro-opening-list strong { font-size: 14px; }.pro-opening-list small { font-size: 11.5px; }.pro-opening-family { font-size: 10px; }.pro-opening-head h2 { font-size: 22px; }.pro-opening-head p { font-size: 12px; }.pro-level { font-size: 10px; }.pro-training-feedback strong { font-size: 14px; }.pro-training-feedback span { font-size: 12px; }.pro-opening-notes small { font-size: 10px; }.pro-opening-notes p { font-size: 13px; }.pro-opening-moves button { font-size: 11px!important; }

/* Opening repertoire controls */
.pro-opening-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 0 12px 10px; }
.pro-opening-filters button { min-height: 38px; padding: 5px 7px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #9fb4c9; background: #0b1d30; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.pro-opening-filters button.active { color: #06131c; border-color: var(--cyan-2); background: linear-gradient(135deg,var(--cyan-2),var(--cyan)); }
.pro-level-filter { display: grid; gap: 6px; padding: 0 12px 11px; color: #91a8bf; font-size: 11px; font-weight: 800; }
.pro-level-filter select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; outline: 0; color: #dceaf6; background: #06111e; font: inherit; font-size: 12px; }
.pro-repertoire-progress { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; padding: 11px 12px 13px; border-block: 1px solid rgba(126,168,201,.12); color: #91a8bf; font-size: 11px; font-weight: 800; }
.pro-repertoire-progress strong { color: var(--cyan-2); }
.pro-repertoire-progress i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: #1a3047; }
.pro-repertoire-progress i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--amber),var(--cyan-2)); transition: width .25s ease; }
.pro-no-openings { margin: 18px 10px; color: #8da5bc; font-size: 12px; line-height: 1.5; text-align: center; }
.pro-opening-list { max-height: min(54dvh,590px); }

/* Interactive opening tree */
.pro-opening-tree-card { margin-top: 12px; padding: 13px; border: 1px solid rgba(126,168,201,.16); border-radius: 11px; background: linear-gradient(145deg,rgba(5,18,31,.76),rgba(12,30,47,.62)); }
.pro-tree-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.pro-tree-heading div { display: grid; gap: 3px; }.pro-tree-heading small { color: var(--cyan); letter-spacing: .11em; font-size: 10px; font-weight: 900; }.pro-tree-heading strong { color: #dceaf6; font-size: 13px; }.pro-tree-heading > span { color: #7f96ad; font-size: 11px; }
.pro-opening-tree { display: grid; gap: 7px; max-height: 330px; padding-right: 4px; overflow: auto; }
.pro-tree-root { width: max-content; padding: 8px 11px; border: 1px solid rgba(246,184,79,.25); border-radius: 8px; color: var(--amber); background: rgba(246,184,79,.07); font-size: 12px; font-weight: 850; }
.pro-tree-level { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 7px; padding-left: 7px; border-left: 2px solid rgba(36,209,220,.16); }
.pro-tree-level > span { padding-top: 8px; color: #718ba3; font-family: monospace; font-size: 11px; font-weight: 800; }.pro-tree-level > div { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-tree-level button { min-width: 68px; padding: 6px 9px; border: 1px solid rgba(126,168,201,.18); border-radius: 8px; color: #9db2c7; background: #0b1e31; text-align: left; cursor: pointer; transition: transform .15s ease,border-color .15s ease; }
.pro-tree-level button:hover { border-color: rgba(36,209,220,.55); transform: translateY(-1px); }.pro-tree-level button.active { color: #06131c; border-color: var(--cyan-2); background: linear-gradient(135deg,var(--cyan-2),#59d8d2); box-shadow: 0 5px 16px rgba(36,209,220,.13); }
.pro-tree-level button strong,.pro-tree-level button small { display: block; }.pro-tree-level button strong { font-size: 13px; }.pro-tree-level button small { margin-top: 2px; color: inherit; opacity: .72; font-size: 9px; }

/* Spaced repetition coach */
.pro-review-status > strong { display: block; margin-top: 7px; color: #dceaf6; font-size: 13px; line-height: 1.35; }.pro-review-status > div { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #839ab0; font-size: 10px; }
.pro-review-status > i { display: block; height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #1a3047; }.pro-review-status > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--amber),var(--cyan-2)); transition: width .25s ease; }
.pro-mode-tabs { flex-wrap: wrap; }.pro-mode-tabs [data-mode="review"] { border-color: rgba(246,184,79,.3); }.pro-mode-tabs [data-mode="review"].active { border-color: var(--amber); background: linear-gradient(135deg,var(--amber),#52d2d3); }
.pro-training-report { width: calc(100% - 24px); min-height: 40px; margin: 0 12px 12px; padding: 7px 10px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #a9bfd3; background: #0b1d30; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }.pro-training-report:hover { color: #07131c; border-color: var(--cyan-2); background: var(--cyan-2); }

/* Faster board feedback: isolate board paints and keep touch/click response crisp. */
.pro-board-frame,.pro-board-grid { contain: layout paint; }.pro-square { touch-action: manipulation; }.pro-piece-wrap { transition-duration: .055s!important; will-change: transform; }

/* Student game against local Stockfish */
.student-play-page { min-height: calc(100dvh - 104px); }
.student-play-heading h1 { max-width: 900px; }
.student-play-layout { display: grid; grid-template-columns: minmax(270px,.56fr) minmax(520px,1fr) minmax(300px,.62fr); align-items: start; gap: 16px; }
.student-play-layout > .panel { border-color: rgba(126,168,201,.2); background: linear-gradient(150deg,rgba(14,31,49,.97),rgba(7,19,32,.99)); box-shadow: 0 18px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03); }
.student-game-setup,.student-game-report,.student-board-card { overflow: hidden; }
.student-levels { display: grid; gap: 8px; padding: 13px; }
.student-levels button { display: grid; grid-template-columns: 34px 1fr; gap: 1px 9px; align-items: center; min-height: 62px; padding: 9px 11px; border: 1px solid rgba(126,168,201,.18); border-radius: 10px; color: #9eb3c8; background: rgba(5,17,29,.72); text-align: left; cursor: pointer; transition: border-color .15s ease,transform .15s ease,background .15s ease; }
.student-levels button:hover { border-color: rgba(36,209,220,.48); transform: translateY(-1px); }
.student-levels button.active { color: #07131c; border-color: var(--cyan-2); background: linear-gradient(135deg,var(--amber),var(--cyan-2)); box-shadow: 0 9px 24px rgba(36,209,220,.13); }
.student-levels button[data-student-level="master"],.student-levels button[data-student-level="international"],.student-levels button[data-student-level="grandmaster"] { border-color: rgba(246,184,79,.22); background: linear-gradient(145deg,rgba(246,184,79,.055),rgba(5,17,29,.76)); }
.student-levels button[data-student-level="maximum"] { border-color: rgba(139,124,255,.42); background: linear-gradient(145deg,rgba(139,124,255,.15),rgba(36,209,220,.07)); box-shadow: inset 0 0 24px rgba(139,124,255,.06); }
.student-levels button[data-student-level="maximum"] > span { color: #ded9ff; background: rgba(139,124,255,.24); }
.student-levels button[data-student-level="maximum"].active { color: #07131c; border-color: transparent; background: linear-gradient(135deg,#b7a9ff,var(--cyan-2)); box-shadow: 0 10px 30px rgba(139,124,255,.25); }
.student-levels button > span { grid-row: 1 / 3; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: inherit; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 950; }
.student-levels strong,.student-levels small { display: block; }.student-levels strong { font-size: 14px; }.student-levels small { opacity: .73; font-size: 10px; }
.student-level-note { min-height: 58px; margin: 0 13px 12px; padding: 11px; border: 1px solid rgba(126,168,201,.13); border-radius: 9px; color: #91a7bd; background: rgba(4,15,27,.5); font-size: 12px; line-height: 1.5; }
.student-color-choice { padding: 0 13px 13px; }.student-color-choice > span { display: block; margin-bottom: 7px; color: #8fa6bc; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }.student-color-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.student-color-choice button,.student-resign,.student-board-toolbar button { min-height: 41px; padding: 6px 9px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #a8bdd1; background: #0b1e31; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }.student-color-choice button.active { color: #07131c; border-color: var(--cyan-2); background: var(--cyan-2); }
.student-new-game { width: calc(100% - 26px)!important; margin: 0 13px 8px; min-height: 48px; }
.student-resign { width: calc(100% - 26px); margin: 0 13px 13px; }.student-resign:hover { color: #ff9da1; border-color: rgba(255,112,118,.42); background: rgba(255,112,118,.08); }
.student-board-card { padding-bottom: 13px; }.student-board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px 0; }.student-board-toolbar strong { display: flex; align-items: center; gap: 7px; color: #8fa7bd; font-size: 11px; }.student-board-toolbar strong i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(106,212,157,.65); }.student-board-toolbar strong.thinking i { background: var(--amber); animation: pulse 1s infinite; }
.student-board-host { width: min(calc(100% - 26px),59dvh,650px); margin: 12px auto 0; }
.student-game-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 11px 13px 0; padding: 10px 12px; border: 1px solid rgba(126,168,201,.15); border-radius: 9px; background: rgba(4,15,27,.52); }.student-game-status strong { color: #dceaf6; font-size: 14px; }.student-game-status span { color: #839ab0; font-size: 11px; text-align: right; }
.student-score-card { margin: 13px; padding: 13px; border: 1px solid rgba(246,184,79,.2); border-radius: 10px; background: linear-gradient(145deg,rgba(246,184,79,.08),rgba(36,209,220,.05)); }.student-score-card small,.student-score-card strong,.student-score-card span { display: block; }.student-score-card small { color: var(--amber); font-size: 9px; font-weight: 900; letter-spacing: .1em; }.student-score-card strong { margin-top: 5px; color: #e4edf6; font-size: 16px; }.student-score-card span { margin-top: 5px; color: #8fa7bd; font-size: 11px; line-height: 1.45; }
.student-move-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; max-height: 260px; margin: 0 13px; padding: 10px; overflow: auto; border: 1px solid rgba(126,168,201,.14); border-radius: 9px; background: rgba(4,15,27,.5); }.student-move-list span { padding: 5px 7px; border-radius: 6px; color: #acc0d3; background: rgba(126,168,201,.06); font-size: 11px; }.student-move-list span b { color: var(--amber); }.student-move-list span i { color: #dce9f5; font-style: normal; }.student-move-list .empty-moves { grid-column: 1 / -1; padding: 13px; color: #8098ae; text-align: center; }
.student-analysis-callout { display: grid; grid-template-columns: 38px 1fr; gap: 9px; margin: 12px 13px; padding: 12px; border: 1px solid rgba(36,209,220,.2); border-radius: 10px; background: rgba(36,209,220,.06); }.student-analysis-callout > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: #07131c; background: var(--cyan-2); font-size: 18px; font-weight: 950; }.student-analysis-callout strong { color: #dce9f5; font-size: 13px; }.student-analysis-callout p { margin: 4px 0 0; color: #8da5bb; font-size: 10.5px; line-height: 1.45; }
.student-analyze-game { width: calc(100% - 26px)!important; margin: 0 13px 13px; min-height: 50px; }.student-analyze-game:disabled { opacity: .42; cursor: not-allowed; filter: saturate(.3); }

/* Long opening lines stay readable at 15 full moves. */
.pro-line-card { max-height: 330px; overflow: auto; }.pro-opening-moves { align-content: start; }.pro-opening-moves button { min-height: 31px; }

@media (max-width: 1480px) and (min-width: 901px) { .student-play-layout { grid-template-columns: minmax(270px,.56fr) minmax(520px,1fr); }.student-game-report { grid-column: 1 / -1; }.student-move-list { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 900px) { .student-play-layout { grid-template-columns: 1fr; }.student-board-card { order: 1; }.student-game-setup { order: 2; }.student-game-report { order: 3; }.student-board-host { width: min(calc(100% - 18px),70dvh,680px); } }
@media (max-width: 620px) { .student-board-toolbar,.student-game-status { align-items: flex-start; flex-direction: column; }.student-game-status span { text-align: left; }.student-move-list { grid-template-columns: 1fr; } }

/* Personal daily chess coach */
.daily-coach-page { min-height: calc(100dvh - 104px); }.daily-coach-heading h1 { max-width: 900px; }
.daily-coach-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }
.daily-coach-stats article { display: grid; grid-template-columns: 43px 1fr; gap: 2px 10px; align-items: center; min-height: 76px; padding: 12px 14px; border: 1px solid rgba(126,168,201,.18); border-radius: 12px; background: linear-gradient(145deg,rgba(14,31,49,.94),rgba(7,19,32,.97)); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.daily-coach-stats article > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); font-size: 19px; font-weight: 950; }.daily-coach-stats small { color: #829ab1; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }.daily-coach-stats strong { overflow: hidden; color: #e2edf7; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.daily-coach-layout { display: grid; grid-template-columns: minmax(275px,.58fr) minmax(510px,1fr) minmax(285px,.62fr); align-items: start; gap: 16px; }.daily-coach-layout > .panel { border-color: rgba(126,168,201,.2); background: linear-gradient(150deg,rgba(14,31,49,.97),rgba(7,19,32,.99)); box-shadow: 0 18px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03); }
.daily-plan-card,.daily-board-card,.daily-insight-card { overflow: hidden; }.daily-task-list { display: grid; gap: 7px; padding: 12px; }.daily-task-list button { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; min-height: 58px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; color: #9eb3c7; background: rgba(4,15,27,.5); text-align: left; cursor: pointer; }.daily-task-list button:hover,.daily-task-list button.active { border-color: rgba(36,209,220,.38); background: rgba(36,209,220,.08); }.daily-task-list button.done { border-color: rgba(106,212,157,.22); }.daily-task-list button > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: var(--amber); background: rgba(246,184,79,.09); font-size: 12px; font-weight: 950; }.daily-task-list button.done > span { color: #07131c; background: var(--green); }.daily-task-list strong,.daily-task-list small { display: block; }.daily-task-list strong { color: #dce9f5; font-size: 13px; }.daily-task-list small { margin-top: 3px; color: #7f97ad; font-size: 10px; }
.daily-regenerate { width: calc(100% - 24px); min-height: 42px; margin: 0 12px 12px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #9fb5ca; background: #0b1d30; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }.daily-regenerate:hover { color: #07131c; border-color: var(--cyan-2); background: var(--cyan-2); }
.daily-task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px 0; }.daily-task-heading small { color: var(--amber); font-size: 9px; font-weight: 900; letter-spacing: .11em; }.daily-task-heading h2 { margin: 4px 0 3px; color: #e3edf7; font-size: 22px; }.daily-task-heading p { margin: 0; color: #849cb2; font-size: 11px; }.daily-task-heading > span { flex: none; padding: 6px 9px; border: 1px solid rgba(36,209,220,.22); border-radius: 8px; color: var(--cyan-2); background: rgba(36,209,220,.06); font-size: 11px; font-weight: 900; }
.daily-board-host { width: min(calc(100% - 28px),54dvh,600px); margin: 13px auto 0; }.daily-feedback { min-height: 61px; margin: 12px 13px 9px; padding: 11px 13px; border: 1px solid rgba(126,168,201,.16); border-radius: 9px; background: rgba(4,15,27,.55); }.daily-feedback strong,.daily-feedback span { display: block; }.daily-feedback strong { color: #dce9f5; font-size: 14px; }.daily-feedback span { margin-top: 4px; color: #8ea5bb; font-size: 11px; line-height: 1.45; }.daily-feedback.correct { border-color: rgba(106,212,157,.38); background: rgba(106,212,157,.08); }.daily-feedback.correct strong { color: var(--green); }.daily-feedback.wrong { border-color: rgba(255,112,118,.38); background: rgba(255,112,118,.08); animation: pro-shake .22s linear; }.daily-feedback.wrong strong { color: #ff9297; }
.daily-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0 13px 13px; }.daily-controls button { min-height: 42px; padding: 6px 9px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #a6bbcf; background: #0b1e31; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }.daily-controls button:hover { color: #07131c; border-color: var(--cyan-2); background: var(--cyan-2); }
.daily-insight-card > section { padding: 13px; border-bottom: 1px solid rgba(126,168,201,.12); }.daily-insight-card > section > small { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .1em; }.daily-motif-list,.daily-weak-list { display: grid; gap: 7px; margin-top: 9px; }.daily-motif-list article,.daily-weak-list article { display: grid; grid-template-columns: 31px 1fr; gap: 8px; align-items: center; min-height: 46px; padding: 7px 8px; border: 1px solid rgba(126,168,201,.12); border-radius: 8px; background: rgba(4,15,27,.45); }.daily-motif-list article > span,.daily-weak-list article > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 7px; color: var(--amber); background: rgba(246,184,79,.08); font-size: 10px; font-weight: 900; }.daily-motif-list strong,.daily-weak-list strong,.daily-weak-list small { display: block; }.daily-motif-list strong,.daily-weak-list strong { color: #d6e5f2; font-size: 11px; }.daily-weak-list small { margin-top: 2px; color: #7891a8; font-size: 9px; }.daily-motif-list i { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #193047; }.daily-motif-list i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--amber),var(--cyan-2)); }.daily-motif-list > p { color: #839bb1; font-size: 11px; line-height: 1.5; }
.daily-coach-message { display: grid; grid-template-columns: 37px 1fr; gap: 9px; margin: 12px; padding: 12px; border: 1px solid rgba(36,209,220,.18); border-radius: 9px; background: rgba(36,209,220,.05); }.daily-coach-message span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; color: #07131c; background: var(--cyan-2); font-size: 20px; }.daily-coach-message p { margin: 0; color: #93a9be; font-size: 10.5px; line-height: 1.5; }
@media (max-width: 1480px) and (min-width: 901px) { .daily-coach-layout { grid-template-columns: minmax(275px,.58fr) minmax(510px,1fr); }.daily-insight-card { grid-column: 1 / -1; }.daily-insight-card { display: grid; grid-template-columns: 1fr 1fr; }.daily-insight-card > .pro-card-title,.daily-coach-message { grid-column: 1 / -1; } }
@media (max-width: 1050px) { .daily-coach-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { .daily-coach-layout { grid-template-columns: 1fr; }.daily-board-card { order: 1; }.daily-plan-card { order: 2; }.daily-insight-card { order: 3; }.daily-board-host { width: min(calc(100% - 18px),68dvh,650px); } }
@media (max-width: 620px) { .daily-coach-stats { grid-template-columns: 1fr; }.daily-controls { grid-template-columns: 1fr; }.daily-task-heading { flex-direction: column; } }

/* Chess MRI and What-if laboratory */
.chess-mri-page { min-height: calc(100dvh - 104px); }.mri-heading h1 { max-width: 920px; }
.mri-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }.mri-summary article { display: grid; grid-template-columns: 43px 1fr; gap: 2px 10px; align-items: center; min-height: 76px; padding: 12px 14px; border: 1px solid rgba(126,168,201,.18); border-radius: 12px; background: linear-gradient(145deg,rgba(14,31,49,.95),rgba(7,19,32,.98)); }.mri-summary article > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); font-size: 19px; font-weight: 950; }.mri-summary small { color: #829ab1; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }.mri-summary strong { overflow: hidden; color: #e2edf7; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.mri-timeline-card { margin-bottom: 16px; overflow: hidden; }.mri-timeline { display: flex; align-items: flex-end; gap: 7px; min-height: 145px; padding: 14px; overflow-x: auto; }.mri-timeline button { position: relative; display: grid; grid-template-rows: 65px auto auto auto; justify-items: center; flex: 0 0 70px; min-height: 122px; padding: 5px 5px 8px; border: 1px solid rgba(126,168,201,.13); border-radius: 9px; color: #8ea5bb; background: rgba(4,15,27,.48); cursor: pointer; }.mri-timeline button:hover,.mri-timeline button.active { border-color: rgba(36,209,220,.5); background: rgba(36,209,220,.08); transform: translateY(-1px); }.mri-timeline button i { align-self: end; width: 17px; height: var(--mri-height); max-height: 62px; min-height: 12px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,var(--amber),#d87561); box-shadow: 0 0 14px rgba(246,184,79,.13); }.mri-timeline button.mistake i,.mri-timeline button.blunder i { background: linear-gradient(180deg,#ff9a78,#ff5962); }.mri-timeline button strong { margin-top: 5px; color: #dce9f5; font-size: 11px; }.mri-timeline button span { max-width: 62px; overflow: hidden; color: #9fb5c8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.mri-timeline button small { color: #ff9b8e; font-size: 9px; font-weight: 850; }
.mri-layout { display: grid; grid-template-columns: minmax(680px,1fr) minmax(300px,.4fr); align-items: start; gap: 16px; }.mri-main-column,.mri-side-column { display: grid; gap: 16px; }.mri-layout .panel { border-color: rgba(126,168,201,.2); background: linear-gradient(150deg,rgba(14,31,49,.97),rgba(7,19,32,.99)); box-shadow: 0 18px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03); }
.mri-compare-card { overflow: hidden; }.mri-compare-boards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 13px; }.mri-compare-boards > article { padding: 10px; border: 1px solid rgba(255,112,118,.2); border-radius: 11px; background: rgba(255,112,118,.045); }.mri-compare-boards > article.better { border-color: rgba(106,212,157,.24); background: rgba(106,212,157,.045); }.mri-compare-boards article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }.mri-compare-boards small { color: #ff959a; font-size: 9px; font-weight: 900; letter-spacing: .08em; }.mri-compare-boards .better small { color: var(--green); }.mri-compare-boards strong { color: #dce9f5; font-size: 11px; }.mri-actual-board,.mri-best-board { width: min(100%,410px); margin-inline: auto; }
.mri-explanation { display: grid; grid-template-columns: 46px 1fr; gap: 11px; margin: 0 13px 13px; padding: 13px; border: 1px solid rgba(36,209,220,.2); border-radius: 10px; background: rgba(36,209,220,.055); }.mri-explanation > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 10px; color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); font-size: 24px; }.mri-explanation strong { color: #dce9f5; font-size: 13px; }.mri-explanation p { margin: 4px 0 0; color: #95abc0; font-size: 11.5px; line-height: 1.55; }
.mri-whatif-card { overflow: hidden; }.mri-whatif-body { display: grid; grid-template-columns: minmax(420px,1fr) minmax(230px,.46fr); gap: 14px; align-items: center; padding: 14px; }.mri-whatif-board { width: min(100%,540px); margin-inline: auto; }.mri-whatif-side { padding: 14px; border: 1px solid rgba(139,124,255,.22); border-radius: 11px; background: linear-gradient(145deg,rgba(139,124,255,.08),rgba(36,209,220,.05)); }.mri-branch-badge { display: inline-block; padding: 5px 7px; border-radius: 6px; color: #b9adff; background: rgba(139,124,255,.1); font-size: 9px; font-weight: 900; letter-spacing: .08em; }.mri-whatif-side h2 { margin: 11px 0 5px; color: #e1ecf6; font-size: 21px; }.mri-whatif-side > p { margin: 0; color: #8da5bb; font-size: 11px; line-height: 1.55; }.mri-whatif-feedback { min-height: 68px; margin: 13px 0 9px; padding: 11px; border: 1px solid rgba(126,168,201,.15); border-radius: 9px; background: rgba(4,15,27,.5); }.mri-whatif-feedback strong,.mri-whatif-feedback span { display: block; }.mri-whatif-feedback strong { color: #dce9f5; font-size: 12px; }.mri-whatif-feedback span { margin-top: 4px; color: #839bb1; font-size: 10px; line-height: 1.45; }.mri-whatif-feedback.correct { border-color: rgba(106,212,157,.4); background: rgba(106,212,157,.08); }.mri-whatif-feedback.correct strong { color: var(--green); }.mri-whatif-feedback.wrong { border-color: rgba(255,112,118,.4); background: rgba(255,112,118,.08); animation: pro-shake .22s linear; }.mri-whatif-feedback.wrong strong { color: #ff9297; }.mri-whatif-side button { width: 100%; min-height: 43px; margin-top: 7px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #a6bbcf; background: #0b1e31; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }.mri-whatif-side .primary-button { color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); }
.mri-dna-card,.mri-heat-card,.mri-actions-card { overflow: hidden; }.mri-dna-visual { display: grid; grid-template-columns: 126px 1fr; gap: 12px; align-items: center; padding: 14px; }.mri-dna-ring { display: grid; width: 122px; height: 122px; place-content: center; border-radius: 50%; text-align: center; }.mri-dna-ring strong,.mri-dna-ring small { display: block; }.mri-dna-ring strong { color: #e3edf7; font-size: 25px; }.mri-dna-ring small { color: #829ab1; font-size: 9px; text-transform: uppercase; }.mri-dna-legend { display: grid; gap: 7px; }.mri-dna-legend article { display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; align-items: center; }.mri-dna-legend i { width: 8px; height: 8px; border-radius: 50%; }.mri-dna-legend span { color: #95abc0; font-size: 10px; }.mri-dna-legend strong { color: #dce9f5; font-size: 10px; }
.mri-heatmap { display: grid; grid-template-columns: repeat(8,1fr); width: calc(100% - 28px); max-width: 360px; aspect-ratio: 1; margin: 14px auto 10px; overflow: hidden; border: 1px solid rgba(126,168,201,.18); border-radius: 9px; }.mri-heat-square { position: relative; display: grid; place-items: center; background: rgba(255,102,106,calc(.04 + var(--heat) * .82)); }.mri-heat-square:nth-child(16n+1),.mri-heat-square:nth-child(16n+3),.mri-heat-square:nth-child(16n+5),.mri-heat-square:nth-child(16n+7),.mri-heat-square:nth-child(16n+10),.mri-heat-square:nth-child(16n+12),.mri-heat-square:nth-child(16n+14),.mri-heat-square:nth-child(16n+16) { box-shadow: inset 0 0 0 999px rgba(126,168,201,.08); }.mri-heat-square span { color: rgba(229,239,248,.64); font-size: 7px; font-weight: 800; }.mri-heat-card > p { margin: 0 14px 14px; color: #8199af; font-size: 10px; line-height: 1.45; }
.mri-actions-card { padding: 14px; }.mri-actions-card strong { color: #dce9f5; font-size: 14px; }.mri-actions-card p { margin: 5px 0 12px; color: #8da5bb; font-size: 11px; line-height: 1.5; }.mri-actions-card button { width: 100%; min-height: 40px; margin-top: 7px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #a6bbcf; background: #0b1e31; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }.mri-actions-card button:hover { color: #07131c; border-color: var(--cyan-2); background: var(--cyan-2); }
.mri-empty { display: grid; width: min(720px,100%); min-height: 370px; margin: 0 auto; padding: 34px; place-items: center; align-content: center; text-align: center; }.mri-empty > span { display: grid; width: 82px; height: 82px; place-items: center; border-radius: 50%; color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); font-size: 38px; }.mri-empty h2 { margin: 18px 0 7px; color: #e2edf7; font-size: 26px; }.mri-empty p { max-width: 520px; margin: 0 0 18px; color: #8ea5bb; font-size: 13px; line-height: 1.6; }.mri-empty button { min-height: 48px; padding: 0 20px; }
.pgn-card-actions { display: flex; align-items: center; gap: 5px; }.pgn-open-mri { color: var(--amber)!important; }.pgn-open-mri:disabled { opacity: .38; cursor: not-allowed; }
@media (max-width: 1450px) { .mri-layout { grid-template-columns: 1fr; }.mri-side-column { grid-template-columns: repeat(2,minmax(0,1fr)); }.mri-actions-card { grid-column: 1 / -1; } }
@media (max-width: 1050px) { .mri-summary { grid-template-columns: repeat(2,1fr); }.mri-whatif-body { grid-template-columns: 1fr; }.mri-whatif-side { max-width: 580px; margin-inline: auto; } }
@media (max-width: 760px) { .mri-compare-boards,.mri-side-column { grid-template-columns: 1fr; }.mri-actions-card { grid-column: auto; }.mri-actual-board,.mri-best-board { max-width: 520px; }.mri-dna-visual { grid-template-columns: 122px 1fr; } }
@media (max-width: 620px) { .mri-summary { grid-template-columns: 1fr; }.mri-layout { grid-template-columns: minmax(0,1fr); }.mri-whatif-body { padding: 9px; }.mri-dna-visual { grid-template-columns: 1fr; justify-items: center; }.mri-dna-legend { width: 100%; }.mri-explanation { grid-template-columns: 1fr; }.mri-timeline button { flex-basis: 64px; } }

/* PGN mistake lab */
.pgn-coach-page { min-height: calc(100dvh - 104px); }.pgn-coach-heading h1 { max-width: 900px; }
.pgn-coach-layout { display: grid; grid-template-columns: minmax(300px,.62fr) minmax(500px,1fr) minmax(300px,.68fr); align-items: start; gap: 16px; }.pgn-coach-layout > .panel { border-color: rgba(126,168,201,.2); background: linear-gradient(150deg,rgba(14,31,49,.96),rgba(7,19,32,.98)); box-shadow: 0 18px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03); }
.pgn-input-card { overflow: hidden; }.pgn-coach-input { width: calc(100% - 28px); min-height: 250px; margin: 14px; padding: 13px; resize: vertical; border: 1px solid rgba(126,168,201,.2); border-radius: 9px; outline: 0; color: #dbe9f6; background: #06111e; font-family: ui-monospace,monospace; font-size: 13px; line-height: 1.55; }.pgn-coach-input:focus { border-color: rgba(36,209,220,.62); box-shadow: 0 0 0 3px rgba(36,209,220,.07); }
.pgn-input-card > label { display: grid; gap: 7px; margin: 0 14px 13px; color: #98aec3; font-size: 12px; font-weight: 800; }.pgn-input-card select { min-height: 42px; padding: 0 10px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #dceaf6; background: #0a1b2d; font: inherit; font-size: 13px; }
.pgn-input-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin: 0 14px 14px; }.pgn-input-actions button,.pgn-exercise-controls button { min-height: 44px; padding: 6px 10px; border: 1px solid rgba(126,168,201,.22); border-radius: 9px; color: #abc0d4; background: #10243a; font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }.pgn-input-actions .primary-button { color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); }.pgn-input-actions button:disabled { opacity: .6; cursor: wait; }
.pgn-progress { display: grid; gap: 4px; margin: 0 14px 14px; padding: 12px; border: 1px solid rgba(126,168,201,.14); border-radius: 9px; background: rgba(4,15,27,.52); }.pgn-progress i { height: 7px; margin-bottom: 6px; overflow: hidden; border-radius: 99px; background: #1a3047; }.pgn-progress i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--amber),var(--cyan-2)); transition: width .2s ease; }.pgn-progress strong { color: #dce9f5; font-size: 13px; }.pgn-progress span { color: #839ab0; font-size: 11px; line-height: 1.45; }.pgn-progress.error { border-color: rgba(255,112,118,.35); }.pgn-progress.error strong { color: #ff9297; }
.pgn-exercise-card { padding-bottom: 13px; overflow: hidden; }.pgn-exercise-board { width: min(calc(100% - 26px),55dvh,590px); margin: 13px auto 0; }.pgn-exercise-feedback { min-height: 60px; margin: 12px 13px 9px; padding: 11px 13px; border: 1px solid rgba(126,168,201,.16); border-radius: 9px; background: rgba(4,15,27,.55); }.pgn-exercise-feedback strong,.pgn-exercise-feedback span { display: block; }.pgn-exercise-feedback strong { color: #dce9f5; font-size: 14px; }.pgn-exercise-feedback span { margin-top: 4px; color: #8ea5bb; font-size: 12px; line-height: 1.45; }.pgn-exercise-feedback.correct { border-color: rgba(106,212,157,.38); background: rgba(106,212,157,.08); }.pgn-exercise-feedback.correct strong { color: var(--green); }.pgn-exercise-feedback.wrong { border-color: rgba(255,112,118,.38); background: rgba(255,112,118,.08); animation: pro-shake .22s linear; }.pgn-exercise-feedback.wrong strong { color: #ff9297; }
.pgn-exercise-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 0 13px; }.pgn-exercise-controls button:hover { color: #07131c; border-color: var(--cyan-2); background: var(--cyan-2); }
.pgn-report-card { overflow: hidden; }.pgn-summary { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; }.pgn-summary article { padding: 11px; border: 1px solid rgba(126,168,201,.13); border-radius: 8px; background: rgba(4,15,27,.48); }.pgn-summary span,.pgn-summary strong { display: block; }.pgn-summary span { color: #7f97ad; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.pgn-summary strong { margin-top: 4px; color: #dce9f5; font-size: 14px; line-height: 1.35; }
.pgn-mistake-list { display: grid; gap: 7px; max-height: min(57dvh,620px); padding: 0 10px 12px; overflow: auto; }.pgn-mistake-list > p { padding: 16px 8px; color: #859cb2; font-size: 12px; line-height: 1.55; }.pgn-mistake-list button { width: 100%; padding: 11px; border: 1px solid transparent; border-radius: 9px; color: #9fb3c6; background: rgba(4,15,27,.45); text-align: left; cursor: pointer; }.pgn-mistake-list button:hover,.pgn-mistake-list button.active { border-color: rgba(36,209,220,.35); background: rgba(36,209,220,.08); }.pgn-mistake-list button span,.pgn-mistake-list button strong,.pgn-mistake-list button small { display: block; }.pgn-mistake-list button span { width: max-content; padding: 3px 6px; border-radius: 5px; color: #ffd28c; background: rgba(246,184,79,.1); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }.pgn-mistake-list button span.blunder { color: #ff9b9f; background: rgba(255,112,118,.11); }.pgn-mistake-list button span.inaccuracy { color: #8edee2; background: rgba(36,209,220,.09); }.pgn-mistake-list button strong { margin: 6px 0 3px; color: #dce9f5; font-size: 13px; }.pgn-mistake-list button small { color: #8299af; font-size: 10.5px; line-height: 1.4; }
.pgn-export-report { border: 0; color: var(--cyan); background: transparent; font-size: 11px!important; font-weight: 850; cursor: pointer; }

@media (max-width: 1450px) and (min-width: 901px) { .pgn-coach-layout { grid-template-columns: minmax(300px,.7fr) minmax(500px,1fr); }.pgn-report-card { grid-column: 1 / -1; }.pgn-summary { grid-template-columns: repeat(3,1fr); }.pgn-mistake-list { grid-template-columns: repeat(2,1fr); max-height: 420px; } }
@media (max-width: 900px) { .pgn-coach-layout { grid-template-columns: 1fr; }.pgn-exercise-card { order: 1; }.pgn-input-card { order: 2; }.pgn-report-card { order: 3; }.pgn-exercise-board { width: min(calc(100% - 18px),68dvh,650px); } }
@media (max-width: 620px) { .pgn-coach-input { min-height: 190px; }.pgn-input-actions,.pgn-exercise-controls { grid-template-columns: 1fr; }.pgn-summary { grid-template-columns: 1fr; }.pgn-mistake-list { max-height: 360px; } }

@media (max-width: 720px) {
  .pro-opening-filters { grid-template-columns: 1fr; }
  .pro-opening-filters button { font-size: 13px; }
  .pro-tree-heading { align-items: flex-start; flex-direction: column; }.pro-opening-tree { max-height: 270px; }.pro-tree-level { grid-template-columns: 30px 1fr; }.pro-tree-level button { min-width: 62px; }
}

@media (max-width: 1260px) and (min-width: 901px) {
  .sidebar { width: 240px; }.main-content { width: calc(100% - 240px); margin-left: 240px; }.sidebar nav strong { font-size: 15px; }
}
@media (max-width: 900px) {
  .sidebar { top: 74px; width: 255px; }.main-content { width: 100%; margin-left: 0; }.topbar { height: 74px; }.brand-mark { width: 42px; height: 42px; }.brand strong { font-size: 15px; }
  .pro-board-mode-tabs { display: grid; grid-template-columns: 1fr; }.pro-analysis-layout .pro-board-host { width: 100%; }.pro-board-panel[data-active-board-mode="editor"] .pro-board-workarea,.pro-board-panel[data-active-board-mode="teach"] .pro-board-workarea { grid-template-columns: 1fr; }.pro-editor-palette { grid-template-columns: repeat(7,minmax(38px,48px)); grid-auto-rows: 46px; overflow-x: auto; }.pro-editor-palette button { width: 46px; height: 46px; }
}
@media (max-width: 620px) {
  .brand small { display: none; }.pro-editor-palette { grid-template-columns: repeat(7,1fr); gap: 4px; }.pro-editor-palette button { width: 100%; height: auto; aspect-ratio: 1; }.pro-board-mode-tabs button { min-height: 44px; }.pro-editor-settings { align-items: flex-start; flex-wrap: wrap; white-space: normal; }
}

/* v2.3 — Blindskák og sjónþjálfun */
.vision-coach-page { min-height: calc(100dvh - 104px); }.vision-heading h1 { max-width: 920px; }.vision-heading p { max-width: 920px; }
.vision-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }.vision-summary article { display: grid; grid-template-columns: 46px 1fr; gap: 2px 11px; align-items: center; min-height: 82px; padding: 13px 15px; border: 1px solid rgba(126,168,201,.19); border-radius: 13px; background: linear-gradient(145deg,rgba(14,31,49,.96),rgba(7,19,32,.99)); box-shadow: inset 0 1px rgba(255,255,255,.025); }.vision-summary article > span { grid-row: 1 / 3; display: grid; width: 43px; height: 43px; place-items: center; border-radius: 11px; color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); font-size: 21px; font-weight: 950; }.vision-summary small { color: #829ab1; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }.vision-summary strong { color: #e4eef8; font-size: 20px; }
.vision-level-row { display: flex; align-items: stretch; gap: 8px; margin: 0 0 13px; padding: 9px; border: 1px solid rgba(126,168,201,.14); border-radius: 12px; background: rgba(5,17,29,.58); }.vision-level-row > span { display: flex; align-items: center; padding: 0 7px; color: #8ca3b9; font-size: 12px; font-weight: 800; }.vision-level-row button { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 7px 13px; border: 1px solid rgba(126,168,201,.18); border-radius: 9px; color: #a5b9cc; background: #0d2135; font: inherit; cursor: pointer; }.vision-level-row button strong { font-size: 13px; }.vision-level-row button small { color: #718ba3; font-size: 10px; }.vision-level-row button:hover,.vision-level-row button.active { color: #07131c; border-color: transparent; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); }.vision-level-row button.active small { color: rgba(5,20,27,.68); }
.vision-mode-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin-bottom: 15px; }.vision-mode-grid button { display: grid; grid-template-columns: 45px 1fr; grid-template-rows: 1fr 1fr; gap: 1px 10px; align-items: center; min-height: 74px; padding: 10px 12px; border: 1px solid rgba(126,168,201,.18); border-radius: 12px; color: #a9bdd0; background: linear-gradient(145deg,rgba(15,33,52,.96),rgba(8,20,34,.98)); text-align: left; font: inherit; cursor: pointer; transition: .18s ease; }.vision-mode-grid button > span { grid-row: 1 / 3; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(36,209,220,.18); border-radius: 10px; color: var(--cyan-2); background: rgba(36,209,220,.065); font-size: 22px; }.vision-mode-grid button strong { align-self: end; color: #d9e6f2; font-size: 13px; line-height: 1.15; }.vision-mode-grid button small { align-self: start; color: #738da4; font-size: 10px; }.vision-mode-grid button:hover,.vision-mode-grid button.active { border-color: rgba(36,209,220,.5); background: linear-gradient(145deg,rgba(23,55,71,.98),rgba(9,28,43,.99)); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }.vision-mode-grid button.active > span { color: #07131c; border-color: transparent; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); }
.vision-lab-layout { display: grid; grid-template-columns: minmax(650px,1fr) minmax(300px,.38fr); align-items: start; gap: 16px; }.vision-lab-layout .panel { border-color: rgba(126,168,201,.2); background: linear-gradient(150deg,rgba(14,31,49,.97),rgba(7,19,32,.99)); box-shadow: 0 18px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03); }.vision-stage-card { min-height: 720px; overflow: hidden; }.vision-stage { display: grid; min-height: 656px; padding: 14px; align-content: start; }.vision-side-column { display: grid; gap: 16px; }.vision-instruction-card { padding: 20px; }.vision-mode-icon { display: grid; width: 54px; height: 54px; margin-bottom: 14px; place-items: center; border-radius: 14px; color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); font-size: 27px; font-weight: 950; }.vision-instruction-card > small { color: var(--cyan-2); font-size: 10px; font-weight: 900; letter-spacing: .1em; }.vision-instruction-card h2 { margin: 7px 0 6px; color: #e2edf7; font-size: 24px; }.vision-instruction-card > p { margin: 0; color: #8ca4ba; font-size: 13px; line-height: 1.6; }
.vision-feedback { min-height: 86px; margin-top: 17px; padding: 13px; border: 1px solid rgba(126,168,201,.16); border-radius: 10px; background: rgba(4,15,27,.55); }.vision-feedback strong,.vision-feedback span { display: block; }.vision-feedback strong { color: #dce9f5; font-size: 14px; }.vision-feedback span { margin-top: 5px; color: #839bb1; font-size: 12px; line-height: 1.45; }.vision-feedback.correct { border-color: rgba(106,212,157,.42); background: rgba(106,212,157,.08); }.vision-feedback.correct strong { color: var(--green); }.vision-feedback.wrong { border-color: rgba(255,112,118,.42); background: rgba(255,112,118,.08); animation: pro-shake .22s linear; }.vision-feedback.wrong strong { color: #ff969b; }
.vision-record-card { overflow: hidden; }.vision-record-list { display: grid; gap: 8px; padding: 13px; }.vision-record-list article { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 9px; border-radius: 9px; background: rgba(4,15,27,.46); }.vision-record-list article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: var(--cyan-2); background: rgba(36,209,220,.08); font-size: 16px; }.vision-record-list strong { display: block; overflow: hidden; color: #aebfd0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.vision-record-list i { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #192f45; }.vision-record-list i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--amber),var(--cyan-2)); }.vision-record-list em { color: #7f98ae; font-size: 10px; font-style: normal; }.vision-tip-card { padding: 17px; border-color: rgba(139,124,255,.22)!important; background: linear-gradient(145deg,rgba(139,124,255,.08),rgba(36,209,220,.04))!important; }.vision-tip-card strong { color: #c9c2ff; font-size: 14px; }.vision-tip-card p { margin: 6px 0 0; color: #8ea5bb; font-size: 12px; line-height: 1.55; }
.vision-prompt { display: grid; justify-items: center; margin-bottom: 12px; text-align: center; }.vision-prompt small,.vision-calc-header small { color: var(--cyan-2); font-size: 10px; font-weight: 900; letter-spacing: .11em; }.vision-prompt > strong { margin: 2px 0; color: #f0f5fb; font-family: ui-monospace,monospace; font-size: 44px; line-height: 1.12; }.vision-prompt > span { color: #829bb2; font-size: 12px; }.vision-prompt.compact { grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; justify-items: start; gap: 2px 10px; padding: 11px 13px; border: 1px solid rgba(126,168,201,.14); border-radius: 10px; background: rgba(5,17,29,.5); text-align: left; }.vision-prompt.compact small { grid-column: 1; }.vision-prompt.compact strong { grid-column: 1; margin: 1px 0; font-family: inherit; font-size: 18px; }.vision-prompt.compact > span { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 66px; color: var(--amber); font-family: ui-monospace,monospace; font-size: 14px; font-weight: 850; text-align: center; }.vision-prompt button,.vision-calc-header > button,.vision-peek { grid-column: 3; grid-row: 1 / 3; align-self: center; min-height: 38px; padding: 7px 11px; border: 1px solid rgba(126,168,201,.22); border-radius: 8px; color: #a9bed0; background: #10243a; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }.vision-prompt button:hover,.vision-calc-header > button:hover,.vision-peek:hover { color: #07131c; border-color: var(--cyan-2); background: var(--cyan-2); }
.vision-board-host { width: min(100%,600px); margin-inline: auto; }.vision-board-host .pro-board-frame { box-shadow: 0 22px 55px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.05); }.vision-empty-board .pro-piece-wrap,.vision-pieces-hidden .pro-piece-wrap { opacity: 0!important; }.vision-pieces-hidden .pro-move-dot,.vision-blind-moves .pro-move-dot { display: none!important; }.vision-blind-moves .pro-square:not(.vision-focus) .pro-piece-wrap { opacity: 0!important; }.vision-blind-moves .pro-square.vision-focus { box-shadow: inset 0 0 0 4px rgba(36,209,220,.72); }.vision-pieces-hidden .pro-square.selected,.vision-blind-moves .pro-square.selected { box-shadow: inset 0 0 0 4px rgba(246,184,79,.72); }.vision-memory-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }.vision-memory-dots i { width: 9px; height: 9px; border-radius: 50%; background: #1b344b; }.vision-memory-dots i.active { background: var(--amber); box-shadow: 0 0 12px rgba(246,184,79,.5); }
.vision-calc-header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; margin-bottom: 12px; padding: 11px 13px; border: 1px solid rgba(126,168,201,.14); border-radius: 10px; background: rgba(5,17,29,.5); }.vision-calc-header > div:first-child strong,.vision-calc-header > div:first-child span { display: block; }.vision-calc-header > div:first-child strong { margin-top: 3px; color: #e2edf7; font-size: 18px; }.vision-calc-header > div:first-child span { margin-top: 2px; color: var(--amber); font-family: ui-monospace,monospace; font-size: 12px; font-weight: 850; }.vision-depth-select { display: flex; gap: 5px; }.vision-depth-select button { min-height: 38px; padding: 6px 9px; border: 1px solid rgba(126,168,201,.2); border-radius: 8px; color: #8fa7bd; background: #0d2033; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }.vision-depth-select button.active { color: #07131c; border-color: transparent; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); }.vision-calc-header > button { grid-column: auto; grid-row: auto; }.vision-calc-line { display: flex; justify-content: center; gap: 8px; margin: 11px 0 4px; }.vision-calc-line i { display: flex; align-items: center; gap: 6px; min-width: 75px; padding: 7px 9px; border: 1px solid rgba(126,168,201,.15); border-radius: 8px; color: #829ab0; background: rgba(4,15,27,.5); font-style: normal; }.vision-calc-line i b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #8ba4ba; background: #142c42; font-size: 10px; }.vision-calc-line i span { font-size: 11px; }.vision-calc-line i.active { border-color: rgba(246,184,79,.42); }.vision-calc-line i.active b { color: #07131c; background: var(--amber); }.vision-calc-line i.done { border-color: rgba(106,212,157,.35); color: var(--green); }.vision-calc-line i.done b { color: #07131c; background: var(--green); }.vision-peek { display: block; grid-column: auto; grid-row: auto; margin: 8px auto 0; }
.vision-complete { display: grid; min-height: 620px; padding: 35px; place-items: center; place-content: center; text-align: center; }.vision-complete > span { display: grid; width: 96px; height: 96px; margin-bottom: 14px; place-items: center; border-radius: 50%; color: #07131c; background: linear-gradient(135deg,var(--amber),var(--cyan-2)); box-shadow: 0 0 60px rgba(36,209,220,.2); font-size: 44px; }.vision-complete small { color: var(--cyan-2); font-size: 10px; font-weight: 900; letter-spacing: .12em; }.vision-complete h2 { margin: 6px 0; color: #e7f0f8; font-size: 31px; }.vision-complete p { max-width: 470px; margin: 0 0 18px; color: #8ea5bb; font-size: 13px; line-height: 1.6; }.vision-complete button { min-height: 48px; padding: 0 20px; }
@media (max-width: 1500px) { .vision-mode-grid { grid-template-columns: repeat(3,1fr); }.vision-lab-layout { grid-template-columns: minmax(580px,1fr) 300px; } }
@media (max-width: 1180px) { .vision-summary { grid-template-columns: repeat(2,1fr); }.vision-lab-layout { grid-template-columns: 1fr; }.vision-side-column { grid-template-columns: repeat(2,1fr); }.vision-tip-card { grid-column: 1 / -1; }.vision-stage-card { min-height: auto; }.vision-stage { min-height: 0; } }
@media (max-width: 760px) { .vision-mode-grid { grid-template-columns: repeat(2,1fr); }.vision-side-column { grid-template-columns: 1fr; }.vision-tip-card { grid-column: auto; }.vision-level-row { flex-wrap: wrap; }.vision-level-row > span { width: 100%; }.vision-calc-header { grid-template-columns: 1fr; }.vision-calc-header > button { grid-column: 1; }.vision-depth-select { flex-wrap: wrap; }.vision-prompt.compact { grid-template-columns: 1fr auto; }.vision-prompt.compact button { grid-column: 1 / -1; grid-row: 3; width: 100%; }.vision-calc-line { flex-wrap: wrap; } }
@media (max-width: 520px) { .vision-summary,.vision-mode-grid { grid-template-columns: 1fr; }.vision-level-row button { flex: 1; justify-content: center; padding-inline: 7px; }.vision-stage { padding: 8px; }.vision-mode-grid button { min-height: 68px; }.vision-prompt > strong { font-size: 35px; }.vision-complete { min-height: 460px; padding: 20px; } }

/* v2.5 — hraðvirk taflmenn og fullhæðar valmynd */
.sidebar {
  height: auto;
  max-height: calc(100dvh - 82px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 209, 220, .42) transparent;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: rgba(36, 209, 220, .34);
  background-clip: padding-box;
}
.sidebar nav, .sidebar-engine, .sidebar-footer { flex: 0 0 auto; }
.sidebar nav { padding-bottom: 8px; }
.sidebar-engine { margin-top: 12px; }
.sidebar-footer { margin-bottom: 8px; }

.pro-board-frame, .pro-board-grid, .teaching-board-frame, .teaching-board, .board-shell {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.pro-square, .teach-square, .board-square { -webkit-tap-highlight-color: transparent; }
.pro-piece-wrap, .teach-square .piece-icon, .piece-wrap {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.pro-piece-wrap { transition: filter .06s linear!important; }
.pro-piece-wrap.movable, .teach-square .piece-icon { cursor: grab; touch-action: none; }
.pro-piece-wrap.drag-source, .teach-square .piece-icon.drag-source { opacity: .16; }
.pro-drag-ghost {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .42));
  transform: translate3d(-200px, -200px, 0);
  will-change: transform;
}
.pro-drag-ghost .pro-piece, .pro-drag-ghost .piece-icon { width: 100%; height: 100%; }
.pro-piece-arrive { animation: pro-piece-arrive 105ms cubic-bezier(.2, .78, .25, 1); }
@keyframes pro-piece-arrive {
  from { transform: translate3d(var(--pro-move-x), var(--pro-move-y), 0) scale(.985); }
  to { transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 900px) {
  .sidebar { max-height: calc(100dvh - 74px); }
}