:root{--md-primary: #6750A4;--md-on-primary: #FFFFFF;--md-primary-container: #EADDFF;--md-on-primary-container: #21005D;--md-secondary: #625B71;--md-on-secondary: #FFFFFF;--md-secondary-container: #E8DEF8;--md-on-secondary-container: #1D192B;--md-tertiary: #7D5260;--md-on-tertiary: #FFFFFF;--md-tertiary-container: #FFD8E4;--md-on-tertiary-container: #31111D;--md-error: #B3261E;--md-on-error: #FFFFFF;--md-error-container: #F9DEDC;--md-on-error-container: #410E0B;--md-background: #FFFBFE;--md-on-background: #1C1B1F;--md-surface: #FFFBFE;--md-on-surface: #1C1B1F;--md-surface-variant: #E7E0EC;--md-on-surface-variant: #49454F;--md-outline: #79747E;--md-outline-variant: #CAC4D0;--md-shadow: rgba(0, 0, 0, .15);--md-scrim: rgba(0, 0, 0, .32);--md-inverse-surface: #313033;--md-inverse-on-surface: #F4EFF4;--md-inverse-primary: #D0BCFF;--md-radius-sm: 8px;--md-radius-md: 12px;--md-radius-lg: 16px;--md-radius-xl: 28px;--md-elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);--md-elevation-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);--md-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);--bg-dark: #f5f5f5;--bg-panel: #ffffff;--bg-card: #fafafa;--bg-hover: #f0f0f0;--text-main: #1C1B1F;--text-dim: #49454F;--chalk-blue: #6750A4;--chalk-red: #B3261E;--chalk-green: #386A20;--chalk-yellow: #7D5260;--chalk-purple: #6750A4;--border: #CAC4D0;--success: #386A20;--danger: #B3261E;--primary: #6750A4}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--md-background);color:var(--md-on-background);-webkit-font-smoothing:antialiased}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--md-surface);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s ease}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center}.loading-spinner{width:48px;height:48px;border:4px solid var(--md-outline-variant);border-top-color:var(--md-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:14px;color:var(--md-on-surface-variant)}.app-header{height:56px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:var(--md-surface);border-bottom:1px solid var(--md-outline-variant);position:relative;z-index:100}.header-left{display:flex;align-items:center;gap:12px}.logo-icon{font-size:28px;color:var(--md-primary)}.app-header h1{font-size:18px;font-weight:600;color:var(--md-on-surface)}.header-right{display:flex;align-items:center;gap:8px}.main-content{display:flex;height:calc(100vh - 88px);overflow:hidden}.left-panel{width:280px;min-width:280px;background:var(--md-surface);border-right:1px solid var(--md-outline-variant);overflow-y:auto;display:flex;flex-direction:column;gap:0}.panel-section{padding:16px;border-bottom:1px solid var(--md-outline-variant)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-title{font-size:14px;font-weight:600;color:var(--md-on-surface)}.geometry-scroll{display:flex;flex-direction:column;gap:10px;max-height:40vh;overflow-y:auto}.geometry-card{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 14px;background:var(--md-surface-variant);border:2px solid transparent;border-radius:var(--md-radius-md);cursor:pointer;transition:all .2s ease;color:var(--md-on-surface);font-family:inherit;text-align:center;width:100%;min-height:64px}.geometry-card:hover{background:var(--md-secondary-container);border-color:var(--md-outline)}.geometry-card.active{background:var(--md-primary-container);border-color:var(--md-primary)}.geometry-card.expanded{flex-wrap:wrap}.geometry-thumbnail{width:40px;height:40px;border-radius:var(--md-radius-sm);overflow:hidden;flex-shrink:0;background:var(--md-surface);display:flex;align-items:center;justify-content:center}.geometry-thumbnail canvas{width:100%;height:100%}.geometry-card-info{flex:1;min-width:0;text-align:center}.geometry-card-name{font-size:13px;font-weight:500;color:var(--md-on-surface);text-align:center}.geometry-card-detail{font-size:11px;color:var(--md-on-surface-variant);margin-top:2px;text-align:center}.geometry-card-expand-icon{color:var(--md-on-surface-variant);transition:transform .2s}.geometry-card.expanded .geometry-card-expand-icon{transform:rotate(180deg)}.info-card-section{flex-shrink:0}.info-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.info-card-title-row{display:flex;align-items:center;gap:8px}.info-card-title-row h3{font-size:16px;font-weight:600;color:var(--md-on-surface)}.toggle-btn{width:28px;height:28px;background:transparent;border:none;border-radius:50%;color:var(--md-on-surface-variant);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.toggle-btn:hover{background:var(--md-surface-variant)}.info-card-body{display:flex;flex-direction:column;gap:12px}.info-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.info-stat{text-align:center;padding:10px;background:var(--md-surface-variant);border-radius:var(--md-radius-sm)}.info-stat-value{font-size:20px;font-weight:700;color:var(--md-primary)}.info-stat-label{font-size:11px;color:var(--md-on-surface-variant);margin-top:2px}.info-card-row{display:flex;justify-content:space-between;align-items:center}.info-card-label{font-size:12px;color:var(--md-on-surface-variant)}.info-card-actions{display:flex;flex-direction:column;gap:8px}.section-points-display{font-size:12px;color:var(--md-on-surface-variant);padding:4px 8px;background:var(--md-surface-variant);border-radius:var(--md-radius-sm)}.vertex-selector{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.vertex-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--md-surface-variant);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);color:var(--md-on-surface);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit}.vertex-btn:hover{background:var(--md-secondary-container);border-color:var(--md-secondary)}.vertex-btn.selected{background:var(--md-primary-container);border-color:var(--md-primary);color:var(--md-primary)}.center-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}#canvas-wrapper-practice{flex:1;position:relative;background:var(--md-background);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-md);overflow:hidden}#canvas-wrapper-practice canvas{width:100%;height:100%}.practice-left{width:50%;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--md-outline-variant);position:relative;z-index:2}.practice-right{width:50%;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:8px;position:relative;z-index:1}.tab-content{display:none;flex:1;flex-direction:column;overflow:hidden}.tab-content.active{display:flex}#tab-records{flex-direction:column;overflow:hidden}#tab-practice{flex-direction:row}.controls-bar{display:flex;align-items:center;gap:20px;padding:12px 20px;background:var(--md-surface);border-bottom:1px solid var(--md-outline-variant);overflow-x:auto;flex-shrink:0}.control-group{display:flex;flex-direction:column;gap:4px;min-width:fit-content}.control-label{font-size:11px;color:var(--md-on-surface-variant);white-space:nowrap}.btn-group{display:flex;gap:4px}.canvas-container{flex:1;position:relative;overflow:hidden;background:var(--md-background)}.canvas-container canvas{width:100%;height:100%}.coord-label,.edge-length-label{font-size:10px;color:#666;background:#ffffffd9;padding:2px 6px;border-radius:4px;pointer-events:none;white-space:nowrap;box-shadow:0 1px 3px #0000001a;transition:font-size .2s ease}.edge-length-label{color:#555}.unfold-control{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--md-surface);border-top:1px solid var(--md-outline-variant);flex-shrink:0}.unfold-slider-label{font-size:12px;color:var(--md-on-surface-variant);white-space:nowrap}.controls-hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:16px;padding:8px 16px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--md-outline-variant);border-radius:20px;font-size:12px;color:var(--md-on-surface-variant);z-index:10}.controls-hint-item{display:flex;align-items:center;gap:4px}.plane-indicator{position:absolute;bottom:48px;left:12px;display:flex;align-items:center;gap:8px;padding:6px 12px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--md-outline-variant);border-radius:16px;font-size:11px;color:var(--md-on-surface-variant);z-index:10}.right-panel{width:72px;min-width:72px;background:var(--md-surface);border-left:1px solid var(--md-outline-variant);display:flex;flex-direction:column}.tab-bar{display:flex;flex-direction:column;gap:4px;padding:8px;flex:1}.tab-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:transparent;border:none;border-radius:var(--md-radius-lg);cursor:pointer;transition:all .2s;color:var(--md-on-surface-variant);font-family:inherit}.tab-item:hover{background:var(--md-surface-variant)}.tab-item.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}.tab-icon{font-size:24px}.tab-label{font-size:11px;font-weight:500}.practice-panel{padding:12px 16px;background:var(--md-surface);border-bottom:1px solid var(--md-outline-variant);flex-shrink:0}.practice-header h3{font-size:14px;font-weight:600;color:var(--md-on-surface);margin-bottom:8px}.practice-options{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.practice-options .form-group{display:flex;align-items:center;gap:4px;margin:0;min-width:unset;flex:unset}.practice-options label{font-size:12px;white-space:nowrap}.practice-options .select{font-size:13px;padding:4px 8px;min-width:80px}.practice-btns{display:flex;gap:8px;width:100%;justify-content:flex-end}.form-group{display:flex;flex-direction:column;gap:2px;min-width:90px;flex:1}.form-group .select{padding:5px 8px;font-size:12px}.form-label{font-size:11px;color:var(--md-on-surface-variant);font-weight:500}.practice-stats{display:flex;gap:12px;align-items:center;padding:8px 0}.practice-stats .stat-item{display:flex;align-items:center;gap:4px;font-size:13px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-label{font-size:10px;color:var(--md-on-surface-variant)}.stat-value{font-size:14px;font-weight:700;color:var(--md-primary)}.btn-start-practice{padding:8px 16px;font-size:14px;flex-shrink:0;min-height:36px;display:inline-flex;align-items:center;justify-content:center}.options-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.question-container{flex:1;overflow-y:auto;padding:12px 16px;position:relative;z-index:2}.question-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--md-on-surface-variant);font-size:14px;gap:12px;opacity:.6}.question-item{background:var(--md-surface);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-md);padding:20px;margin-bottom:16px}.question-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.question-type{font-size:11px;padding:2px 8px;background:var(--md-primary-container);color:var(--md-on-primary-container);border-radius:12px}.question-difficulty{font-size:11px;padding:2px 8px;border-radius:12px}.question-difficulty.medium{background:#fff3e0;color:#ef6c00}.question-text{font-size:14px;line-height:1.6;color:var(--md-on-surface);margin-bottom:12px}.question-premise{font-size:13px;color:var(--md-on-surface-variant);margin-bottom:8px;padding:8px 12px;background:var(--md-surface-variant);border-radius:var(--md-radius-sm);border-left:3px solid var(--md-primary)}.question-claim{font-size:13px;font-weight:600;color:var(--md-primary);margin-bottom:12px}.question-geometry{font-size:11px;padding:2px 8px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);border-radius:12px}.answer-feedback{margin-top:12px;padding:12px;border-radius:var(--md-radius-md);animation:fadeIn .3s ease}.feedback-header{font-size:15px;font-weight:600;margin-bottom:8px}.answer-feedback.correct .feedback-header{color:#2e7d32}.answer-feedback.incorrect .feedback-header{color:#c62828}.feedback-detail{font-size:13px;color:var(--md-on-surface-variant);line-height:1.6}.feedback-detail p{margin-bottom:4px}.hint-display{margin-top:12px;padding:12px;background:#fff8e1;border:1px solid #ffe082;border-radius:var(--md-radius-md);animation:fadeIn .3s ease}.hint-content{display:flex;align-items:flex-start;gap:8px}.hint-step{font-size:12px;font-weight:600;color:#f57f17;white-space:nowrap}.hint-text{font-size:13px;color:var(--md-on-surface-variant);line-height:1.5}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.question-options{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.option-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--md-surface-variant);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);cursor:pointer;transition:all .2s}.option-item:hover{background:var(--md-secondary-container);border-color:var(--md-secondary)}.option-text{font-size:13px;color:var(--md-on-surface)}.question-actions{display:flex;gap:8px}.proof-toolbar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.proof-symbol-btn{width:36px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--md-surface-variant);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);color:var(--md-on-surface);font-size:14px;cursor:pointer;transition:all .2s;font-family:inherit}.proof-symbol-btn:hover{background:var(--md-secondary-container);border-color:var(--md-secondary)}.proof-textarea{width:100%;min-height:120px;padding:12px;background:var(--md-surface-variant);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);color:var(--md-on-surface);font-size:14px;font-family:inherit;resize:vertical;outline:none}.answer-result{margin-top:12px;padding:12px;border-radius:var(--md-radius-sm)}.answer-result.correct{background:#e8f5e9;border:1px solid #a5d6a7}.answer-result.incorrect{background:#fce4ec;border:1px solid #ef9a9a}.result-header{font-size:14px;font-weight:600;margin-bottom:8px}.answer-result.correct .result-header{color:#2e7d32}.answer-result.incorrect .result-header{color:#c62828}.result-detail{font-size:13px;line-height:1.6;color:var(--md-on-surface)}.practice-summary-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--md-scrim);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.practice-summary{background:var(--md-surface);border-radius:var(--md-radius-lg);padding:32px;min-width:300px;text-align:center;box-shadow:var(--md-elevation-3)}.practice-summary h3{font-size:20px;font-weight:600;color:var(--md-on-surface);margin-bottom:16px}.summary-stats{display:flex;flex-direction:column;gap:8px}.summary-stats p{font-size:14px;color:var(--md-on-surface-variant)}.wrong-panel{border-top:2px solid var(--md-error);background:var(--md-surface)}.wrong-toggle-group{display:flex;gap:8px;margin-bottom:16px}.wrong-toggle-group .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border:1px solid var(--md-outline);border-radius:var(--md-radius-md);background:transparent;color:var(--md-on-surface);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.wrong-toggle-group .btn:hover{background:var(--md-surface-variant)}.wrong-toggle-group .btn.active{background:var(--md-primary-container);border-color:var(--md-primary);color:var(--md-primary)}.wrong-toggle-group .btn[data-filter=wrong].active{background:var(--md-error-container);border-color:var(--md-error);color:var(--md-error)}.wrong-toggle-group .btn[data-filter=correct].active{background:#e8f5e9;border-color:#388e3c;color:#2e7d32}.wrong-toggle-group .material-symbols-rounded{font-size:18px}#wrong-records-list{overflow-y:auto;max-height:300px;padding:0;margin-top:12px}#wrong-records-list .record-item{border-left:3px solid var(--md-error);transition:all .2s ease}#wrong-records-list .record-item:hover{background:var(--md-surface-variant);transform:translate(4px)}#wrong-records-list .record-item.correct-item{border-left-color:#388e3c}#wrong-records-list .record-item.correct-item:hover{background:#e8f5e9}.wrong-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.wrong-stat-card{text-align:center;padding:16px;background:var(--md-error-container);border-radius:var(--md-radius-md);border:1px solid var(--md-error)}.wrong-stat-card:first-child .record-stat-value{color:var(--md-error)}.wrong-stat-card:last-child{background:#e8f5e9;border-color:#388e3c}.wrong-stat-card:last-child .record-stat-value{color:#2e7d32}.wrong-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--md-on-surface-variant);text-align:center}.wrong-empty-state .material-symbols-rounded{font-size:48px;margin-bottom:12px;opacity:.5}.wrong-empty-state p{font-size:14px;margin-top:8px}.wrong-empty-state .empty-state-title{font-size:16px;font-weight:500;color:var(--md-on-surface)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--md-on-surface-variant)}.empty-state-icon{width:48px;height:48px;margin-bottom:12px;opacity:.5}.empty-state-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}.empty-state-title{font-size:16px;font-weight:500;margin-bottom:4px}.empty-state-text{font-size:13px}.status-bar{height:32px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:var(--md-surface);border-top:1px solid var(--md-outline-variant);font-size:12px;color:var(--md-on-surface-variant)}.toast-container{position:fixed;top:64px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:8px}.toast{padding:12px 16px;border-radius:var(--md-radius-sm);font-size:13px;box-shadow:var(--md-elevation-2);animation:slideIn .3s ease;max-width:300px}.toast.info{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}.toast.success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}.toast.error{background:#fce4ec;color:#c62828;border:1px solid #ef9a9a}.toast.warning{background:#fff3e0;color:#ef6c00;border:1px solid #ffcc80}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--md-scrim);display:flex;align-items:center;justify-content:center;z-index:1000;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease}.settings-overlay.visible{visibility:visible;opacity:1}.settings-panel{background:var(--md-surface);border-radius:var(--md-radius-lg);width:90%;max-width:400px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--md-elevation-3)}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--md-outline-variant)}.settings-header h3{font-size:18px;font-weight:600;color:var(--md-on-surface)}.settings-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.settings-group{display:flex;flex-direction:column;gap:8px}.settings-group-title{font-size:12px;font-weight:600;color:var(--md-primary);text-transform:uppercase;letter-spacing:.5px}.settings-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.settings-item-label{font-size:14px;color:var(--md-on-surface)}.settings-item-desc{font-size:12px;color:var(--md-on-surface-variant);margin-top:2px}.switch{width:48px;height:28px;background:var(--md-outline);border-radius:14px;position:relative;cursor:pointer;transition:all .2s}.switch:after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;background:var(--md-surface);border-radius:50%;transition:all .2s}.switch.active{background:var(--md-primary)}.switch.active:after{left:24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border:1px solid var(--md-outline);border-radius:var(--md-radius-xl);background:transparent;color:var(--md-on-surface);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap}.btn:hover{background:var(--md-surface-variant)}.btn:active{transform:scale(.98)}.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--md-radius-sm)}.btn-primary{background:var(--md-primary);color:var(--md-on-primary);border-color:var(--md-primary)}.btn-primary:hover{background:#7965b3}.btn-outline{background:transparent;border-color:var(--md-outline);color:var(--md-primary)}.btn-outline:hover{background:var(--md-primary-container)}.btn-outline.active{background:var(--md-primary-container);border-color:var(--md-primary);color:var(--md-primary)}.btn-ghost{background:transparent;border-color:transparent;color:var(--md-on-surface-variant)}.btn-ghost:hover{background:var(--md-surface-variant)}.btn-icon{padding:8px;width:40px;height:40px}.btn-icon.btn-sm{width:32px;height:32px;padding:4px}.btn-block{width:100%}.slider{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--md-outline-variant);border-radius:2px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--md-primary);border-radius:50%;cursor:pointer;transition:transform .2s}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.select{width:100%;padding:8px 12px;background:var(--md-surface-variant);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);color:var(--md-on-surface);font-size:13px;font-family:inherit;cursor:pointer;outline:none;pointer-events:auto;user-select:auto;-webkit-user-select:auto}.select:focus{border-color:var(--md-primary)}.input{width:100%;padding:10px 12px;background:var(--md-surface-variant);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);color:var(--md-on-surface);font-size:14px;font-family:inherit;outline:none;pointer-events:auto;user-select:auto;-webkit-user-select:auto}.input:focus{border-color:var(--md-primary)}.records-panel{padding:12px 16px;background:var(--md-surface);border-bottom:1px solid var(--md-outline-variant);display:flex;flex-direction:column;flex-shrink:0}.records-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.records-header h3{font-size:14px;font-weight:600;color:var(--md-on-surface)}.records-actions{display:flex;gap:6px}.records-stats-grid{display:flex;gap:8px;margin-bottom:8px}.record-stat-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;background:var(--md-surface-variant);border-radius:var(--md-radius-md)}.record-stat-value{font-size:15px;font-weight:700;color:var(--md-primary)}.record-stat-label{font-size:10px;color:var(--md-on-surface-variant)}.chart-container{background:var(--md-surface);border-radius:var(--md-radius-md);border:1px solid var(--md-outline-variant);overflow:hidden;margin-bottom:0;max-height:80px}.chart-container canvas{width:100%;max-height:80px}.records-list{flex:1;overflow-y:auto;min-height:0}.record-item{display:flex;flex-direction:column;gap:6px;padding:10px 12px;margin-bottom:8px;background:var(--md-surface-variant);border-radius:var(--md-radius-md);font-size:13px}.record-header{display:flex;justify-content:space-between;align-items:center}.record-date{font-size:12px;color:var(--md-on-surface-variant)}.record-accuracy{font-size:12px;font-weight:600;color:var(--md-primary);background:var(--md-primary-container);padding:2px 8px;border-radius:10px}.record-detail{display:flex;gap:12px;font-size:12px;color:var(--md-on-surface-variant)}.wrong-panel{margin-top:12px}.wrong-toggle-group{display:flex;gap:6px;margin-bottom:8px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;gap:8px;color:var(--md-on-surface-variant)}.empty-state-icon svg{width:48px;height:48px;opacity:.3}.empty-state-title{font-size:15px;font-weight:500}.empty-state-text{font-size:13px;opacity:.7}.practice-left{width:40%;min-width:300px;border-right:1px solid var(--md-outline-variant);display:flex;flex-direction:column;overflow-y:auto}.practice-right{flex:1;display:flex;flex-direction:column;min-width:0}.question-container{flex:1;overflow-y:auto;padding:16px}.question-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 16px;color:var(--md-on-surface-variant);font-size:14px}.question-item{background:var(--md-surface);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-lg);padding:16px}.question-header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.question-number{font-size:13px;font-weight:600;color:var(--md-primary)}.question-type,.question-geometry{font-size:11px;padding:2px 8px;border-radius:10px;background:var(--md-surface-variant);color:var(--md-on-surface-variant)}.question-difficulty{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:500}.question-difficulty.easy{background:#e8f5e9;color:#2e7d32}.question-difficulty.medium{background:#fff3e0;color:#e65100}.question-difficulty.hard{background:#fce4ec;color:#c62828}.question-premise{font-size:14px;color:var(--md-on-surface);margin-bottom:8px;line-height:1.6;padding:8px 12px;background:var(--md-surface-variant);border-radius:var(--md-radius-sm)}.question-text{font-size:15px;color:var(--md-on-surface);line-height:1.7;margin-bottom:16px}.question-claim{font-size:14px;font-weight:500;color:var(--md-primary);margin-bottom:12px}.question-input{margin-bottom:12px}.question-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.option-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--md-surface-variant);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);cursor:pointer;transition:all .2s;font-size:14px}.option-item:hover{background:var(--md-primary-container);border-color:var(--md-primary)}.option-item input[type=radio]{accent-color:var(--md-primary)}.question-actions{display:flex;gap:8px;margin-top:12px}.answer-feedback{margin-top:12px;padding:12px 16px;border-radius:var(--md-radius-md);font-size:14px}.answer-feedback.correct{background:#e8f5e9;border:1px solid #a5d6a7}.answer-feedback.incorrect{background:#fce4ec;border:1px solid #ef9a9a}.feedback-header{font-weight:600;margin-bottom:8px;font-size:15px}.feedback-detail{font-size:13px;line-height:1.6;color:var(--md-on-surface)}.feedback-detail p{margin:4px 0}.hint-display{margin-top:12px;padding:10px 14px;background:#fff8e1;border:1px solid #ffe082;border-radius:var(--md-radius-md);font-size:13px}.hint-content{display:flex;gap:8px;align-items:flex-start}.hint-step{font-weight:600;color:#f57f17;white-space:nowrap}.hint-text{color:var(--md-on-surface);line-height:1.5}.proof-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;background:var(--md-surface-variant);border-radius:var(--md-radius-sm);margin-bottom:8px}.proof-symbol-btn{padding:4px 8px;font-size:13px;background:var(--md-surface);border:1px solid var(--md-outline-variant);border-radius:4px;cursor:pointer;transition:all .15s;font-family:inherit}.proof-symbol-btn:hover{background:var(--md-primary-container);border-color:var(--md-primary)}.proof-textarea{width:100%;min-height:100px;padding:10px 12px;background:var(--md-surface);border:1px solid var(--md-outline-variant);border-radius:var(--md-radius-sm);font-size:14px;font-family:inherit;color:var(--md-on-surface);resize:vertical;outline:none}.proof-textarea:focus{border-color:var(--md-primary)}.practice-summary-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--md-scrim);display:flex;align-items:center;justify-content:center;z-index:1000}.practice-summary{background:var(--md-surface);border-radius:var(--md-radius-lg);padding:24px;min-width:300px;max-width:400px;text-align:center}.practice-summary h3{font-size:18px;margin-bottom:16px}.summary-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--md-outline-variant);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--md-outline)}@media (max-width: 768px){.left-panel{display:none}.right-panel{width:56px;min-width:56px}.tab-label{display:none}.controls-bar{flex-wrap:wrap;gap:8px}#tab-practice{flex-direction:column}.practice-left{width:100%;max-height:50%;border-right:none;border-bottom:1px solid var(--md-outline-variant)}.practice-right{width:100%;flex:1;min-height:200px}.practice-options{gap:6px 8px}.practice-options .form-group{flex:1;min-width:80px}.practice-options .select{min-width:60px}.practice-btns{flex-wrap:wrap}}