*{box-sizing:border-box;margin:0;padding:0}:root{--topbar:48px;--tab-bar:44px;--in-tab:66px;--pad:14px;--board-size:min(
    calc(100vh - var(--topbar) - var(--tab-bar) - var(--in-tab) - var(--pad) * 2),
    calc(100vw - 340px - 28px - 32px - 20px)  
  );--cell:calc(var(--board-size) / 8);--panel-w:340px;--accent:#7ec8e3;--bg:#0f0f1a;--bg2:#1a1a2e;--border:#2a2a4a}body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:#e0e0e0;height:100vh;overflow:hidden;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}a:hover{opacity:.8}.topbar{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;height:48px;flex-shrink:0}.topbar h1{font-size:1.1rem;color:var(--accent);letter-spacing:2px}.topbar nav{margin-left:auto;display:flex;gap:20px}.topbar nav a{font-size:.78rem;color:#aaa}.topbar nav a:hover{color:#e0e0e0}#user-chip{display:none;align-items:center;gap:8px;text-decoration:none;margin-left:8px;background:#13132a;border:1px solid var(--border);border-radius:20px;padding:3px 10px 3px 4px}#user-chip:hover{border-color:var(--accent)}#uc-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;overflow:hidden;flex-shrink:0}#uc-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}#uc-title{font-size:.72rem;color:#f0c040;font-weight:700}#uc-name{font-size:.72rem;color:#e0e0e0}.page-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0 16px}.page-header{display:flex;align-items:center;gap:12px;padding:4px 0 0;flex-shrink:0}h2{font-size:1.1rem;font-weight:700;letter-spacing:.5px}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}.tab-btn{padding:5px 16px;border-radius:20px;border:1px solid var(--border);font-size:.78rem;font-weight:600;background:var(--bg2);color:#aaa;cursor:pointer;transition:all .15s}.tab-btn:hover{color:#e0e0e0}.tab-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}.tab-viewport{flex:1;min-height:0;overflow:hidden;position:relative;margin-top:4px}.tab-pane{display:none;position:absolute;inset:0}.tab-pane.active{display:flex;flex-direction:column}#tab-lines{overflow-y:auto;padding-bottom:16px}.panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:18px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.col{display:flex;flex-direction:column;gap:10px}label{font-size:.72rem;color:#888;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px}input,select,textarea{background:var(--bg);border:1px solid var(--border);color:#e0e0e0;padding:7px 10px;border-radius:6px;font-size:.85rem;font-family:inherit;width:100%}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent)}textarea{resize:vertical;min-height:60px;font-family:monospace}.btn{padding:8px 16px;border-radius:7px;border:none;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}.btn-primary{background:var(--accent);color:var(--bg)}.btn-primary:hover{background:#5fb0d0}.btn-secondary{background:#2a2a4a;color:#e0e0e0}.btn-secondary:hover{background:#3a3a5e}.btn-danger{background:#3a1010;color:#e05555}.btn-danger:hover{background:#5a1818}.btn-ghost{background:0 0;border:1px solid var(--border);color:#aaa;padding:6px 12px}.btn-ghost:hover{border-color:var(--accent);color:#e0e0e0}.icon-btn{background:#1e1e3a;border:1px solid var(--border);color:#aaa;border-radius:6px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .15s}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.board-grid{display:grid;grid-template-columns:repeat(8,var(--cell));grid-template-rows:repeat(8,var(--cell));border:2px solid #2a2a4a}.sq{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;user-select:none}.sq.light{background:#eeeed2}.sq.dark{background:#769656}.sq.highlight{outline:3px solid var(--accent);outline-offset:-3px}.sq.correct{background:#2a7a3a!important}.sq.wrong{background:#8a2a2a!important}.sq.hint-from{outline:3px solid #f0c040;outline-offset:-3px}.sq.last-move{background:rgba(126,200,227,.25)!important}.sq.browse-cur{outline:3px solid #b78fff;outline-offset:-3px}.sq img{width:86%;height:86%;pointer-events:none;display:block}.board-outer{display:flex;flex-direction:column;width:calc(var(--board-size) + 20px)}.board-with-rank{display:flex;align-items:flex-start}.rank-labels{display:flex;flex-direction:column;justify-content:space-around;height:var(--board-size);padding:0 4px 0 0;width:16px;flex-shrink:0}.rank-labels span{font-size:calc(var(--cell) * .2);color:#4a5568;font-weight:600;line-height:1;text-align:right}.file-labels{display:flex;width:var(--board-size);justify-content:space-around;padding:3px 0 0 0;margin-left:20px}.file-labels span{font-size:calc(var(--cell) * .2);color:#4a5568;font-weight:600;line-height:1}.board-page-layout{flex:1;display:grid;grid-template-columns:calc(var(--board-size) + 24px) 220px;gap:24px;align-items:flex-start;overflow:hidden;min-height:0}@media (max-width:900px){.board-page-layout{grid-template-columns:1fr;overflow-y:auto}}.info-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;height:calc(var(--board-size) + 20px);width:220px;overflow-y:auto}.info-panel-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.line-title{font-weight:700;font-size:.95rem;color:#e0e0e0;flex:1;min-width:0}.line-sub{font-size:.72rem;color:#666;margin-top:2px}.status-box{font-size:.9rem;padding:10px 14px;border-radius:8px;background:var(--bg);border:1px solid var(--border);min-height:42px}.status-box.ok{background:#1a3a2a;border-color:#2a7a3a;color:#70e090}.status-box.bad{background:#3a1010;border-color:#8a2a2a;color:#e05555}.status-box.info{background:#0f1a2a;border-color:#2a4a6a;color:var(--accent)}.move-list{font-family:monospace;font-size:.85rem;background:var(--bg);border:1px solid var(--border);padding:10px;border-radius:6px;flex:1;overflow-y:auto;color:#ccc;line-height:1.6;min-height:60px}.browse-moves{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px;font-family:monospace;font-size:.85rem;flex:1;overflow-y:auto;line-height:1.9;min-height:60px}.bm-pair{display:inline}.bm-num{color:#8a8aa5;margin-right:2px}.bm-san{display:inline-block;padding:1px 5px;border-radius:3px;cursor:pointer;color:#ccc;transition:background .1s}.bm-san:hover{background:#2a2a4a;color:#e0e0e0}.bm-san.active{background:var(--accent);color:#0f0f1a;font-weight:700}.bm-san.played{color:#999}.nav-btns{display:flex;gap:6px}.nav-btn{flex:1;padding:8px 4px;background:#1e1e3a;border:1px solid var(--border);color:#aaa;border-radius:6px;cursor:pointer;font-size:1rem;transition:all .15s;display:flex;align-items:center;justify-content:center}.nav-btn:hover{border-color:var(--accent);color:var(--accent)}.nav-btn:disabled{opacity:.3;cursor:default}.notes-box{background:#0f1a10;border:1px solid #1a2a1a;border-radius:6px;padding:10px 12px;font-size:.82rem;color:#88b898;line-height:1.5;white-space:pre-wrap}.notes-box:empty{display:none}.mode-seg{display:flex;gap:0;background:#0f0f1a;border:1px solid var(--border);border-radius:7px;overflow:hidden;flex-shrink:0}.mode-seg-btn{padding:5px 13px;font-size:.72rem;font-weight:600;border:none;background:0 0;color:#666;cursor:pointer;transition:all .15s}.mode-seg-btn.active{background:var(--accent);color:var(--bg)}.drill-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.drill-line-label{font-size:.92rem;font-weight:700;color:#e0e0e0}.drill-line-sub{font-size:.72rem;color:#666;margin-top:2px}.drill-meta{display:flex;align-items:center;gap:12px;flex-shrink:0}.drill-progress-track{width:110px;height:5px;background:#1e1e3a;border-radius:3px;overflow:hidden}.drill-progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s}.drill-progress-label{font-size:.72rem;color:#666;white-space:nowrap}.drill-timer{font-family:monospace;font-size:.9rem;color:#666;min-width:44px;text-align:center}.session-stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.sstat{display:flex;flex-direction:column;align-items:center;background:#12122a;border:1px solid var(--border);border-radius:8px;padding:6px 14px;min-width:64px}.sstat-val{font-size:1.2rem;font-weight:900;color:var(--accent);line-height:1}.sstat-lbl{font-size:.62rem;color:#8a8aa5;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}.sstat-val.green{color:#70e090}.sstat-val.red{color:#e07070}.drill-stat-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}.drill-stat{display:flex;flex-direction:column;align-items:center;background:#12122a;border:1px solid var(--border);border-radius:8px;padding:8px 14px;min-width:70px}.drill-stat-val{font-size:1.2rem;font-weight:900;color:var(--accent);line-height:1}.drill-stat-lbl{font-size:.65rem;color:#666;margin-top:3px;text-transform:uppercase;letter-spacing:.5px}.line-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:10px;justify-content:space-between}.line-card .left{flex:1;min-width:0}.line-card .pgn-line{font-family:monospace;font-size:.78rem;color:#aaa;margin-top:4px;white-space:pre-wrap;word-break:break-word}.line-card .lname{font-weight:600;font-size:.9rem}.line-card .eco{color:var(--accent);font-weight:700;font-size:.72rem;margin-right:6px}.line-card .notes-txt{font-size:.75rem;color:#888;margin-top:6px}.line-card .line-actions{display:flex;gap:6px;align-items:center}.color-tag{display:inline-block;padding:1px 7px;border-radius:3px;font-size:.66rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-right:6px}.color-tag.white{background:#e0e0e0;color:var(--bg)}.color-tag.black{background:var(--bg);color:#e0e0e0;border:1px solid #555}.session-complete{background:#0f1a10;border:1px solid #2a4a2a;border-radius:10px;padding:24px 28px;text-align:center}.session-complete .big-icon{font-size:2.5rem;margin-bottom:10px}.session-complete h3{color:#70c87a;font-size:1.1rem;margin-bottom:6px}.session-complete p{font-size:.85rem;color:#aaa}.line-result{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;margin-bottom:6px;font-size:.82rem}.line-result.pass{background:#1a2a1a;border:1px solid #2a4a2a}.line-result.fail{background:#2a1a1a;border:1px solid #4a2a2a}.line-result-icon{font-size:1rem}.line-result-name{flex:1;font-weight:600;color:#e0e0e0}.line-result-detail{color:#777;font-size:.72rem}.muted{color:#888;font-size:.78rem}.empty{padding:36px;text-align:center;color:#8a8aa5;font-size:.85rem}:root{--entry-cell:60px}.entry-board-grid{display:grid;grid-template-columns:repeat(8,var(--entry-cell));grid-template-rows:repeat(8,var(--entry-cell));border:2px solid var(--border)}.entry-sq{width:var(--entry-cell);height:var(--entry-cell);display:flex;align-items:center;justify-content:center;cursor:pointer}.entry-sq.light{background:#eeeed2}.entry-sq.dark{background:#769656}.entry-sq.highlight{outline:2px solid var(--accent);outline-offset:-2px}.entry-sq.last-move{background:rgba(126,200,227,.25)!important}.entry-sq img{width:82%;height:82%;pointer-events:none}.entry-board-layout{display:grid;grid-template-columns:calc(var(--entry-cell)*8 + 4px) 1fr;gap:20px;align-items:flex-start;margin-top:10px}@media (max-width:660px){.entry-board-layout{grid-template-columns:1fr}}.keyboard-hint{font-size:.7rem;color:#444;margin-top:4px}kbd{background:#1e1e3a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;font-size:.7rem}