:root{--primary:#6c5ce7;--primary-light:#a29bfe;--secondary:#fd79a8;--accent:#fdcb6e;--success:#00b894;--bg:#f8f9ff;--bg-card:#fff;--text:#2d3436;--text-light:#636e72;--border:#dfe6e9;--shadow:0 4px 20px #6c5ce71a;--radius:16px;--radius-sm:10px;color:var(--text);background:var(--bg);font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,sans-serif;font-size:16px;line-height:1.6}*{box-sizing:border-box}body{margin:0;padding:0}#root{min-height:100vh}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:12px 28px;font-family:inherit;font-size:16px;font-weight:600;transition:all .2s}.btn-primary:hover{background:#5a4bd1;transform:translateY(-1px);box-shadow:0 4px 12px #6c5ce74d}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-large{border-radius:var(--radius);padding:16px 40px;font-size:20px}.btn-ghost{color:var(--primary);border:2px solid var(--primary-light);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:8px 20px;font-family:inherit;font-size:14px;transition:all .2s}.btn-ghost:hover{background:var(--primary-light);color:#fff}.btn-back{color:var(--text-light);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-family:inherit;font-size:15px}.btn-back:hover{color:var(--primary)}.link-btn{color:var(--primary);cursor:pointer;font-size:inherit;background:0 0;border:none;font-family:inherit;text-decoration:underline}.link-btn:hover{color:#5a4bd1}.login-page{background:linear-gradient(135deg,#6c5ce7 0%,#a29bfe 50%,#fd79a8 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--bg-card);border-radius:24px;width:100%;max-width:420px;padding:40px 36px;box-shadow:0 20px 60px #00000026}.login-header{text-align:center;margin-bottom:32px}.login-mascot{margin-bottom:8px;font-size:56px;display:block}.login-header h1{color:var(--primary);margin:0 0 4px;font-size:28px;font-weight:700}.login-header p{color:var(--text-light);font-size:15px}.form-group{margin-bottom:20px}.form-group label{color:var(--text);margin-bottom:6px;font-size:15px;font-weight:600;display:block}.form-group input[type=text],.form-group input[type=password]{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);width:100%;padding:12px 16px;font-family:inherit;font-size:16px;transition:border-color .2s}.form-group input:focus{border-color:var(--primary);outline:none}.form-group input[type=range]{width:100%;accent-color:var(--primary)}.age-stage{text-align:center;color:var(--primary);margin-top:4px;font-size:14px;font-weight:600;display:block}.login-card .btn-primary{width:100%;margin-top:8px;font-size:18px}.switch-mode{text-align:center;color:var(--text-light);margin-top:20px;font-size:14px}.error-msg{color:#d63031;border-radius:var(--radius-sm);background:#ffeaa7;margin-bottom:12px;padding:10px 16px;font-size:14px}.home-page{min-height:100vh}.home-header{background:linear-gradient(135deg, var(--primary), var(--secondary));flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:24px 32px;display:flex}.home-header h1{color:#fff;margin:0;font-size:24px;font-weight:700}.home-header .subtitle{color:#ffffffd9;margin:0;font-size:14px}.header-actions{gap:8px;display:flex}.header-actions .btn-ghost{color:#fff;border-color:#ffffff80}.header-actions .btn-ghost:hover{background:#fff3}.header-actions .btn-primary{color:var(--primary);background:#fff}.header-actions .btn-primary:hover{background:#f0e6ff}.intro-banner{text-align:center;padding:40px 32px 20px}.intro-banner h2{color:var(--text);margin:0 0 8px;font-size:28px}.intro-banner p{color:var(--text-light);font-size:16px}.stage-filter{flex-wrap:wrap;justify-content:center;gap:10px;padding:0 32px 24px;display:flex}.filter-btn{background:var(--bg-card);border:2px solid var(--border);cursor:pointer;color:var(--text-light);border-radius:24px;padding:8px 20px;font-family:inherit;font-size:15px;transition:all .2s}.filter-btn:hover{border-color:var(--primary-light)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.course-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:900px;margin:0 auto;padding:0 32px 40px;display:grid}.course-card{background:var(--bg-card);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow);border:2px solid #0000;padding:24px;transition:all .25s}.course-card:hover{border-color:var(--primary-light);transform:translateY(-2px);box-shadow:0 8px 30px #6c5ce726}.course-card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.stage-badge{color:var(--primary);font-size:13px;font-weight:600}.duration{color:var(--text-light);background:var(--bg);border-radius:12px;padding:2px 10px;font-size:12px}.course-card h3{color:var(--text);margin:0 0 8px;font-size:18px}.course-card p{color:var(--text-light);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:16px;font-size:14px;display:-webkit-box;overflow:hidden}.course-card .btn-primary{width:100%}.loading-text,.empty-text{text-align:center;color:var(--text-light);grid-column:1/-1;padding:40px}.course-page{flex-direction:column;min-height:100vh;display:flex}.course-header{background:linear-gradient(135deg, var(--primary), var(--primary-light));align-items:center;gap:16px;padding:14px 20px;display:flex}.course-header h2{color:#fff;flex:1;margin:0;font-size:18px}.course-header .btn-back{color:#fffc;font-size:14px}.course-header .btn-back:hover{color:#fff}.duration-badge{color:#fff;background:#fff3;border-radius:12px;padding:4px 12px;font-size:13px}.course-body{flex:1;height:calc(100vh - 56px);display:flex}.unit-sidebar{background:var(--bg-card);border-right:1px solid var(--border);flex-shrink:0;width:240px;padding:16px;overflow-y:auto}.unit-sidebar h3{color:var(--text-light);border-bottom:1px solid var(--border);margin:0 0 12px;padding-bottom:8px;font-size:14px}.unit-btn{border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:2px solid #0000;align-items:flex-start;gap:10px;width:100%;margin-bottom:6px;padding:10px 12px;font-family:inherit;transition:all .2s;display:flex}.unit-btn:hover{background:var(--bg)}.unit-btn.active{border-color:var(--primary-light);background:#6c5ce714}.unit-index{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex}.unit-btn.active .unit-index{background:var(--secondary)}.unit-info strong{margin-bottom:2px;font-size:14px;display:block}.unit-info small{color:var(--text-light);font-size:12px}.course-main{flex-direction:column;flex:1;min-width:0;display:flex}.unit-intro{flex:1;justify-content:center;align-items:center;display:flex}.intro-card{text-align:center;max-width:400px;padding:40px}.intro-icon{margin-bottom:16px;font-size:64px;display:block}.intro-card h3{margin:0 0 12px;font-size:24px}.core-goal{color:var(--primary);margin-bottom:8px;font-size:15px;font-weight:600}.intro-hint{color:var(--text-light);margin-bottom:24px;font-size:14px}.chat-area{flex-direction:column;flex:1;min-height:0;display:flex}.chat-messages{flex-direction:column;flex:1;gap:12px;padding:20px;display:flex;overflow-y:auto}.chat-welcome{text-align:center;padding:40px 20px}.welcome-icon{margin-bottom:8px;font-size:48px;display:block}.chat-welcome p{color:var(--text);font-size:16px}.chat-welcome .hint{color:var(--text-light);margin-top:4px;font-size:13px}.chat-bubble{gap:10px;max-width:85%;animation:.3s fadeInUp;display:flex}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ai-bubble{align-self:flex-start}.user-bubble{flex-direction:row-reverse;align-self:flex-end}.bubble-avatar{background:var(--bg);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;display:flex}.bubble-content{border-radius:18px;padding:12px 16px;font-size:15px;line-height:1.5;position:relative}.ai-bubble .bubble-content{background:var(--bg-card);border:1px solid var(--border);border-top-left-radius:6px}.user-bubble .bubble-content{background:var(--primary);color:#fff;border-top-right-radius:6px}.bubble-content p{margin:0}.typing-cursor{color:var(--primary);font-weight:700;animation:.7s infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.typing-indicator{align-self:flex-start;gap:6px;padding:12px 16px;display:flex}.typing-indicator .dot{background:var(--primary-light);border-radius:50%;width:8px;height:8px;animation:1.4s infinite dotPulse}.typing-indicator .dot:nth-child(2){animation-delay:.2s}.typing-indicator .dot:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,60%,to{opacity:.4;transform:scale(.8)}30%{opacity:1;transform:scale(1.2)}}.chat-input-bar{border-top:1px solid var(--border);background:var(--bg-card);align-items:center;gap:10px;padding:14px 20px;display:flex}.chat-input-bar input{border:2px solid var(--border);background:var(--bg);border-radius:24px;flex:1;padding:12px 16px;font-family:inherit;font-size:15px}.chat-input-bar input:focus{border-color:var(--primary);outline:none}.send-btn{cursor:pointer;background:var(--primary);color:#fff;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.send-btn:hover{background:#5a4bd1}.send-btn:disabled{opacity:.5;cursor:not-allowed}.voice-input{align-items:center;gap:6px;display:flex}.voice-btn-main{cursor:pointer;background:var(--secondary);color:#fff;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;transition:all .2s;display:flex}.voice-btn-main:hover{background:#e8608d}.voice-btn-main:disabled{opacity:.5;cursor:not-allowed}.voice-btn-main.listening{background:#e17055;animation:1.2s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #e1705580}50%{box-shadow:0 0 0 12px #e1705500}}.listening-indicator{color:var(--secondary);white-space:nowrap;align-items:center;gap:3px;font-size:12px;display:flex}.wave-bar{background:var(--secondary);border-radius:2px;width:3px;height:14px;animation:.8s ease-in-out infinite alternate wave}.wave-bar:nth-child(2){animation-delay:.1s}.wave-bar:nth-child(3){animation-delay:.2s}.wave-bar:nth-child(4){animation-delay:.3s}@keyframes wave{0%{height:6px}to{height:18px}}.voice-error{color:#d63031;white-space:nowrap;font-size:11px}.preview-panel{background:var(--bg-card);border-left:1px solid var(--border);flex-shrink:0;width:280px;padding:16px;overflow-y:auto}.preview-panel h3{color:var(--text-light);margin:0 0 12px;font-size:14px}.preview-placeholder{background:var(--bg);border:2px dashed var(--border);border-radius:var(--radius);height:200px;color:var(--text-light);flex-direction:column;justify-content:center;align-items:center;font-size:14px;display:flex}.preview-placeholder span{margin-bottom:8px;font-size:36px}.empty-state{color:var(--text-light);flex:1;justify-content:center;align-items:center;font-size:16px;display:flex}.profile-page{min-height:100vh}.profile-content{max-width:500px;margin:0 auto;padding:32px 20px}.profile-card{text-align:center;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:24px;padding:32px}.avatar{margin-bottom:12px;font-size:64px}.profile-card h3{margin:0 0 4px;font-size:24px}.profile-card p{color:var(--text-light)}.profile-section{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:24px;padding:24px}.profile-section h3{margin:0 0 12px;font-size:18px}.profile-content .btn-primary{width:100%}.loading-page{min-height:100vh;color:var(--text-light);flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:18px;display:flex}.summary-page{flex-direction:column;min-height:100vh;display:flex}.summary-header{background:linear-gradient(135deg, var(--success), #55efc4);justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.summary-header h2{color:#fff;margin:0;font-size:18px;font-weight:700}.summary-header .btn-back{color:#ffffffd9}.summary-header .btn-back:hover{color:#fff}.summary-header .btn-ghost{color:#fff;background:#ffffff26;border-color:#ffffff4d}.summary-header .btn-ghost:hover{background:#ffffff40}.summary-content{flex:1;width:100%;max-width:600px;margin:0 auto;padding:32px 20px}.summary-unit-info{text-align:center;margin-bottom:32px}.summary-icon{margin-bottom:8px;font-size:48px;display:block}.summary-unit-info h3{color:var(--text);margin:0 0 6px;font-size:22px}.summary-unit-info p{color:var(--text-light);margin:0;font-size:14px}.summary-empty{text-align:center;padding:48px 20px}.summary-empty span{margin-bottom:12px;font-size:48px;display:block}.summary-empty p{color:var(--text-light);margin-bottom:24px}.summary-loading{text-align:center;padding:60px 20px}.gen-spinner{border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;margin:0 auto 16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.summary-loading p{color:var(--text-light);font-size:15px}.summary-cards{flex-direction:column;gap:16px;display:flex}.summary-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);border-left:4px solid var(--primary);padding:24px}.highlights-card{border-left-color:#fdcb6e}.training-card{border-left-color:var(--primary)}.exercise-card{border-left-color:var(--success)}.summary-card .card-icon{margin-bottom:8px;font-size:28px;display:block}.summary-card h4{color:var(--text);margin:0 0 8px;font-size:16px}.summary-card p{color:var(--text-light);margin:0;font-size:15px;line-height:1.7}.summary-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px;display:flex}.generate-prompt{border-radius:var(--radius);text-align:center;background:linear-gradient(135deg,#fdcb6e,#f8e71c);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:16px 20px;display:flex}.generate-prompt span{font-size:24px}.generate-prompt p{color:var(--text);margin:0;font-size:14px;font-weight:600}.generate-prompt .btn-primary{color:var(--text);background:#fff;padding:8px 20px;font-size:14px}.generate-prompt .btn-primary:hover{background:#fff8e1}.preview-toolbar{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.preview-title{color:var(--text);font-size:13px;font-weight:600}.btn-sm{padding:4px 12px;font-size:12px}.preview-frame-wrapper{border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;overflow:hidden}.preview-iframe{border:none;width:100%;height:240px}.preview-generating{text-align:center;padding:40px 20px}.preview-generating .gen-spinner{margin-bottom:12px}.preview-generating p{color:var(--text-light);font-size:13px}.gen-error{color:#d63031;text-align:center;margin-top:8px;font-size:13px}.site-footer{text-align:center;background:var(--bg-card);border-top:1px solid var(--border);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:16px 20px;display:flex}.beian-item a{color:var(--text-light);align-items:center;gap:4px;font-size:12px;text-decoration:none;display:inline-flex}.beian-item a:hover{color:var(--primary)}.beian-icon{flex-shrink:0;width:16px;height:16px}.beian-divider{color:var(--border);font-size:12px}@media (width<=900px){.course-body{flex-direction:column}.unit-sidebar{border-right:none;border-bottom:1px solid var(--border);width:100%;max-height:160px}.preview-panel{border-left:none;border-top:1px solid var(--border);width:100%;max-height:200px}.home-header{text-align:center;flex-direction:column}.course-list{grid-template-columns:1fr}}