.home-view{min-height:100vh;padding:var(--spacing-md)}.home-header{text-align:center;margin-bottom:var(--spacing-2xl)}.home-header h1{font-size:var(--font-size-2xl);color:var(--color-text-primary);margin:0;font-weight:600}.home-main{max-width:var(--content-max-width);margin:0 auto}.mode-selection h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);text-align:center;font-weight:600}.mode-category{margin-bottom:var(--spacing-xl)}.mode-category h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-secondary);font-weight:500}.mode-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.mode-card{padding:var(--spacing-lg);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;font-size:var(--font-size-base);text-align:center;font-weight:500;transition:all .2s}.mode-card:hover{background:var(--color-hover-bg);border-color:var(--color-accent)}.mode-card.selected{border-color:var(--color-accent);background:var(--color-accent);color:#fff}.mode-card-custom{background:var(--color-hover-bg)}.custom-config{margin:var(--spacing-xl) 0;padding:var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md)}.custom-config h3{font-size:var(--font-size-lg);margin-top:0;margin-bottom:var(--spacing-lg);font-weight:500}.config-group{margin-bottom:var(--spacing-lg)}.config-group>label:first-child{margin-bottom:var(--spacing-sm);font-weight:500;display:block}.radio-group,.checkbox-group{gap:var(--spacing-md);flex-wrap:wrap;display:flex}.radio-group label,.checkbox-group label{align-items:center;gap:var(--spacing-xs);cursor:pointer;display:flex}.config-group select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);background:var(--color-bg)}.training-settings{margin:var(--spacing-xl) 0;padding:var(--spacing-lg);background:var(--color-hover-bg);border-radius:var(--radius-md);gap:var(--spacing-lg);flex-wrap:wrap;align-items:center;display:flex}.setting-group{align-items:center;gap:var(--spacing-sm);display:flex}.setting-group label{font-weight:500}.setting-group select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);background:var(--color-bg)}.answer-rule-hint{margin:var(--spacing-lg) 0;padding:var(--spacing-md);border-left:4px solid var(--color-accent);border-radius:var(--radius-sm);background:#f8f9fa}.answer-rule-hint p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.action-buttons{gap:var(--spacing-md);margin-top:var(--spacing-xl);flex-wrap:wrap;justify-content:center;display:flex}.btn-primary,.btn-secondary{padding:var(--spacing-md) var(--spacing-xl);border:2px solid var(--color-accent);border-radius:var(--radius-md);font-size:var(--font-size-base);cursor:pointer;font-weight:600;transition:all .2s}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover:not(:disabled){background:#1e4067;border-color:#1e4067}.btn-primary:disabled{background:var(--color-disabled);border-color:var(--color-disabled);cursor:not-allowed;opacity:.6}.btn-secondary{background:var(--color-bg);color:var(--color-accent)}.btn-secondary:hover{background:var(--color-hover-bg)}.btn-large{padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-size-lg)}@media (width<=768px){.home-header h1{font-size:var(--font-size-xl)}.mode-grid{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.mode-card{padding:var(--spacing-md);font-size:var(--font-size-sm)}.training-settings{flex-direction:column;align-items:flex-start}.action-buttons{flex-direction:column;width:100%}.btn-primary,.btn-secondary{width:100%}}@media (width>=1024px){.mode-grid{grid-template-columns:repeat(4,1fr)}}.fraction{vertical-align:middle;margin:0 var(--spacing-sm);flex-direction:column;align-items:center;display:inline-flex}.fraction-numerator,.fraction-denominator{font-size:var(--font-size-2xl);padding:var(--spacing-xs) var(--spacing-sm);font-weight:500;line-height:1.2}.fraction-line{background-color:var(--color-text-primary);width:100%;min-width:60px;height:2px;margin:var(--spacing-xs) 0}.fraction-large .fraction-numerator,.fraction-large .fraction-denominator{font-size:var(--font-size-3xl);padding:var(--spacing-sm) var(--spacing-md)}.fraction-large .fraction-line{min-width:80px;height:3px;margin:var(--spacing-sm) 0}@media (width<=768px){.fraction-numerator,.fraction-denominator{font-size:var(--font-size-xl)}.fraction-line{min-width:50px}.fraction-large .fraction-numerator,.fraction-large .fraction-denominator{font-size:var(--font-size-2xl)}.fraction-large .fraction-line{min-width:60px}}.question-display{text-align:center;margin:var(--spacing-lg) 0;justify-content:center;align-items:center;min-height:100px;display:flex}.question-expression{font-size:var(--font-size-2xl);font-weight:500;line-height:1.4}.question-display-large .question-expression{font-size:var(--font-size-3xl)}.operand{font-variant-numeric:tabular-nums}.operator{color:var(--color-text-secondary);margin:0 var(--spacing-sm)}@media (width<=768px){.question-display{min-height:80px}.question-expression{font-size:var(--font-size-xl)}.question-display-large .question-expression{font-size:var(--font-size-2xl)}}.practice-view{background:var(--color-bg);min-height:100vh}.practice-container{max-width:var(--content-max-width);padding:var(--spacing-md);margin:0 auto}.practice-header{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.practice-title{font-size:var(--font-size-lg);font-weight:600}.btn-exit{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-sm)}.btn-exit:hover{background:var(--color-hover-bg);border-color:var(--color-text-secondary)}.practice-content{gap:var(--spacing-xl);grid-template-columns:200px 1fr;display:grid}.practice-stats{gap:var(--spacing-md);flex-direction:column;display:flex}.stat-item{padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-hover-bg)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);display:block}.stat-value{font-size:var(--font-size-xl);font-variant-numeric:tabular-nums;font-weight:600;display:block}.stat-correct{border-left:4px solid var(--color-success)}.stat-wrong{border-left:4px solid var(--color-error)}.stat-time{font-family:Courier New,monospace}.practice-main{flex:1}.question-section{max-width:var(--content-narrow-width);margin:0 auto}.question-number{text-align:center;font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-md);font-weight:500}.answer-rule{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.answer-input-section{align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-xl);flex-direction:column;display:flex}.answer-input{width:100%;max-width:300px;padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-xl);text-align:center;font-variant-numeric:tabular-nums}.answer-input:focus{border-color:var(--color-accent)}.answer-input.answered{background:var(--color-hover-bg)}.error-message{color:var(--color-error);font-size:var(--font-size-sm);font-weight:500}.btn-submit,.btn-next{padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-md);background:var(--color-accent);color:#fff;font-size:var(--font-size-lg);cursor:pointer;border:none;min-width:200px;font-weight:600}.btn-submit:hover,.btn-next:hover{background:#1e4067}.feedback{margin-top:var(--spacing-xl);padding:var(--spacing-lg);border-radius:var(--radius-md);border:2px solid;animation:.1s ease-out feedbackFadeIn}@keyframes feedbackFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.feedback-correct{border-color:var(--color-success);background:#f0f8f4}.feedback-wrong{border-color:var(--color-error);background:#fef5f5}.feedback-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);font-weight:600}.feedback-correct .feedback-title{color:var(--color-success)}.feedback-wrong .feedback-title{color:var(--color-error)}.feedback-details{font-size:var(--font-size-base);line-height:1.8}.feedback-details>div{margin-bottom:var(--spacing-xs)}.feedback-note{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-style:italic}@media (width<=1024px){.practice-content{grid-template-columns:1fr}.practice-stats{flex-flow:wrap}.stat-item{flex:1;min-width:100px}}@media (width<=768px){.practice-header{gap:var(--spacing-md);flex-direction:column;align-items:flex-start}.practice-stats{gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr)}.stat-value{font-size:var(--font-size-lg)}.answer-input{max-width:100%;font-size:var(--font-size-lg)}.btn-submit,.btn-next{width:100%;min-width:unset}}.result-view{background:var(--color-bg);min-height:100vh;padding:var(--spacing-md)}.result-container{max-width:var(--content-max-width);margin:0 auto}.result-header{text-align:center;margin-bottom:var(--spacing-2xl)}.result-header h1{font-size:var(--font-size-2xl);margin:0;font-weight:600}.result-main{gap:var(--spacing-2xl);flex-direction:column;display:flex}.result-summary h2,.question-times h2,.wrong-answers h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);font-weight:600}.question-times-grid{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.question-time-item{gap:var(--spacing-xs) var(--spacing-sm);padding:var(--spacing-md);border:1px solid var(--color-border);border-left:4px solid var(--color-success);border-radius:var(--radius-sm);grid-template-columns:1fr auto;display:grid}.question-time-item.is-wrong{border-left-color:var(--color-error)}.question-time-number{font-weight:600}.question-time-status{color:var(--color-success);font-size:var(--font-size-sm)}.question-time-item.is-wrong .question-time-status{color:var(--color-error)}.question-time-value{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;grid-column:1/-1}.summary-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.summary-item{padding:var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-hover-bg);text-align:center}.summary-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);display:block}.summary-value{font-size:var(--font-size-2xl);font-variant-numeric:tabular-nums;font-weight:600;display:block}.summary-correct{border-left:4px solid var(--color-success)}.summary-wrong{border-left:4px solid var(--color-error)}.summary-accuracy{border-left:4px solid var(--color-accent)}.wrong-list{gap:var(--spacing-lg);flex-direction:column;display:flex}.wrong-item{padding:var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg)}.wrong-item-header{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.wrong-item-number{color:var(--color-text-secondary);font-weight:600}.wrong-item-question{margin:var(--spacing-lg) 0}.wrong-item-answers{gap:var(--spacing-sm);flex-direction:column;display:flex}.answer-row{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);display:flex}.answer-label{min-width:100px;font-weight:500}.answer-value{font-weight:600;font-size:var(--font-size-lg);font-variant-numeric:tabular-nums}.answer-user{background:#fef5f5}.answer-user .answer-value{color:var(--color-error)}.answer-correct{background:#f0f8f4}.answer-correct .answer-value{color:var(--color-success)}.answer-result{background:var(--color-hover-bg)}.perfect-score{text-align:center;padding:var(--spacing-2xl)}.perfect-icon{margin-bottom:var(--spacing-md);font-size:64px}.perfect-score p{font-size:var(--font-size-xl);color:var(--color-success);margin:0;font-weight:500}.result-actions{gap:var(--spacing-md);margin-top:var(--spacing-xl);flex-wrap:wrap;justify-content:center;display:flex}.result-actions .btn-primary,.result-actions .btn-secondary{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-size:var(--font-size-base);cursor:pointer;font-weight:600;transition:all .2s}.result-actions .btn-primary{background:var(--color-accent);color:#fff;border:2px solid var(--color-accent)}.result-actions .btn-primary:hover{background:#1e4067;border-color:#1e4067}.result-actions .btn-secondary{background:var(--color-bg);color:var(--color-accent);border:2px solid var(--color-accent)}.result-actions .btn-secondary:hover{background:var(--color-hover-bg)}@media (width<=768px){.result-header h1{font-size:var(--font-size-xl)}.summary-grid{grid-template-columns:repeat(2,1fr)}.summary-value{font-size:var(--font-size-xl)}.answer-row{flex-direction:column;align-items:flex-start}.answer-label{min-width:unset}.result-actions{flex-direction:column;width:100%}.result-actions .btn-primary,.result-actions .btn-secondary{width:100%}}.history-view{background:var(--color-bg);min-height:100vh;padding:var(--spacing-md)}.history-container{max-width:var(--content-max-width);margin:0 auto}.history-header{margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.history-header h1{font-size:var(--font-size-2xl);margin:0;font-weight:600}.header-actions{gap:var(--spacing-md);display:flex}.btn-back,.btn-clear{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;font-size:var(--font-size-sm)}.btn-back{color:var(--color-accent);border-color:var(--color-accent)}.btn-back:hover{background:var(--color-hover-bg)}.btn-clear{color:var(--color-error);border-color:var(--color-error)}.btn-clear:hover{background:#fef5f5}.history-empty{text-align:center;padding:var(--spacing-2xl)}.history-empty p{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.history-empty .btn-primary{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);background:var(--color-accent);color:#fff;font-size:var(--font-size-base);cursor:pointer;border:none;font-weight:600}.history-empty .btn-primary:hover{background:#1e4067}.history-list{gap:var(--spacing-md);flex-direction:column;display:flex}.history-item{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);overflow:hidden}.history-item-header{align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);cursor:pointer;transition:background .2s;display:flex}.history-item-header:hover{background:var(--color-hover-bg)}.history-item-info{flex:1}.history-item-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-xs);font-weight:600}.history-item-meta{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.history-item-stats{gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.stat-badge{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm);white-space:nowrap;font-weight:500}.stat-total{background:var(--color-hover-bg);color:var(--color-text-primary)}.stat-correct{color:var(--color-success);background:#f0f8f4}.stat-wrong{color:var(--color-error);background:#fef5f5}.stat-accuracy{color:var(--color-accent);background:#eff6ff}.stat-time{background:var(--color-hover-bg);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.expand-icon{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.history-item-details{padding:var(--spacing-lg);background:var(--color-hover-bg);border-top:1px solid var(--color-border)}.history-item-details h4{font-size:var(--font-size-base);margin-top:0;margin-bottom:var(--spacing-md);font-weight:600}.wrong-answers-list{gap:var(--spacing-md);flex-direction:column;display:flex}.wrong-answer-item{padding:var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.answer-item-correct{border-left:4px solid var(--color-success)}.answer-item-wrong{border-left:4px solid var(--color-error)}.wrong-answer-number{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);font-weight:600}.wrong-answer-question{margin:var(--spacing-md) 0}.wrong-answer-info{font-size:var(--font-size-sm);line-height:1.8}.wrong-answer-info div{margin-bottom:var(--spacing-xs)}.text-correct{color:var(--color-success)}.no-wrong-answers{text-align:center;padding:var(--spacing-xl)}.no-wrong-answers p{font-size:var(--font-size-lg);color:var(--color-success);margin:0}@media (width<=768px){.history-header{align-items:flex-start;gap:var(--spacing-md);flex-direction:column}.history-header h1{font-size:var(--font-size-xl)}.header-actions{width:100%}.btn-back,.btn-clear{flex:1}.history-item-header{flex-direction:column;align-items:flex-start}.history-item-stats{width:100%}.expand-icon{align-self:center}}:root{--color-bg:#fff;--color-text-primary:#1a1a1a;--color-text-secondary:#666;--color-border:#e0e0e0;--color-accent:#2c5282;--color-success:#2d7a3e;--color-error:#c53030;--color-disabled:#a0a0a0;--color-hover-bg:#f5f5f5;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:4px;--radius-md:8px;--font-size-sm:14px;--font-size-base:16px;--font-size-lg:18px;--font-size-xl:24px;--font-size-2xl:32px;--font-size-3xl:48px;--content-max-width:1200px;--content-narrow-width:800px}*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:var(--font-size-base);color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;line-height:1.6}button{font-family:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}