.controls-panel{display:flex;align-items:center}.btn-start-large{padding:14px 32px;font-size:var(--font-size-xl);border-radius:var(--radius-full)}.controls-group{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}@media(max-width:480px){.controls-group{gap:var(--space-xs)}.controls-group .btn{font-size:var(--font-size-xs);padding:5px 10px}.controls-group .btn-start-large{font-size:var(--font-size-base);padding:8px 16px}}.settings-panel{padding:var(--space-lg)}.settings-title{font-size:var(--font-size-base);font-weight:600;margin-bottom:var(--space-md);color:var(--color-text)}.settings-grid{display:flex;flex-direction:column;gap:var(--space-md)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.setting-number{width:72px;text-align:center;padding:4px 8px;font-size:var(--font-size-sm)}.setting-range-group{display:flex;align-items:center;gap:var(--space-sm);flex:1;max-width:160px}.setting-range-value{font-size:var(--font-size-xs);color:var(--color-text-secondary);min-width:36px;text-align:right;font-weight:500}@media(max-width:640px){.settings-panel{padding:var(--space-md)}}.score-panel{padding:var(--space-lg)}.score-title{font-size:var(--font-size-base);font-weight:600;margin-bottom:var(--space-md);color:var(--color-text)}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.score-item{display:flex;flex-direction:column;align-items:center;padding:var(--space-sm) var(--space-xs);border-radius:var(--radius-md);background:var(--color-surface-alt)}.score-value{font-size:var(--font-size-lg);font-weight:700;color:var(--color-text)}.score-label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:500}.score-correct .score-value{color:var(--color-success)}.score-wrong .score-value{color:var(--color-error)}@media(max-width:640px){.score-panel{padding:var(--space-md)}}.training-page{display:flex;flex-direction:column;gap:var(--space-lg)}.training-controls{display:flex;align-items:center;justify-content:center}.training-content{display:grid;grid-template-columns:1fr 280px;gap:var(--space-lg);align-items:start}.training-main{display:flex;flex-direction:column;gap:var(--space-lg)}.sequence-card{padding:var(--space-xl) var(--space-2xl);text-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center}.sequence-idle{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.sequence-idle-icon{width:80px;height:80px;margin-bottom:var(--space-xs);filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.sequence-idle-text{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text)}.sequence-idle-hint{font-size:var(--font-size-sm);color:var(--color-text-muted)}.sequence-progress{width:100%;display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.sequence-progress-bar{flex:1;height:6px;background:var(--color-surface-alt);border-radius:var(--radius-full);overflow:hidden}.sequence-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-accent),#f97316);border-radius:var(--radius-full);transition:width .3s ease}.sequence-progress-text{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);white-space:nowrap}.sequence-display{display:flex;align-items:center;justify-content:center;min-height:100px}.sequence-operation{font-size:var(--font-size-5xl);font-weight:800;color:var(--color-text);letter-spacing:-1px;line-height:1}.sequence-operation.complete{font-size:var(--font-size-2xl);color:var(--color-success)}.soroban-toggle-btn{align-self:center}.training-soroban{display:flex;justify-content:center;padding:var(--space-lg) 0}.training-sidebar{display:flex;flex-direction:column;gap:var(--space-lg);position:sticky;top:72px}.training-page.focus-mode .training-content{grid-template-columns:1fr}.training-page.focus-mode .sequence-card{min-height:320px}.training-page.focus-mode .sequence-operation{font-size:6rem}@media(max-width:768px){.training-content{grid-template-columns:1fr}.training-sidebar{position:static;flex-direction:row;flex-wrap:wrap}.training-sidebar>*{flex:1;min-width:240px}}@media(max-width:480px){.sequence-card{padding:var(--space-lg);min-height:160px}.sequence-operation{font-size:var(--font-size-4xl)}.training-page.focus-mode .sequence-operation{font-size:var(--font-size-5xl)}.training-sidebar{flex-direction:column}.training-sidebar>*{min-width:auto}}
