:root{--primary: #9D4EDD;--primary-light: #C77DFF;--secondary: #FF9E00;--bg-gradient: linear-gradient(135deg, #F8F9FA 0%, #E0AAFF 100%);--card-bg: rgba(255, 255, 255, .85);--text-main: #240046;--text-muted: #5A189A;--shadow: 0 8px 32px rgba(157, 78, 221, .15)}*{box-sizing:border-box;margin:0;padding:0;font-family:"system-ui",sans-serif}body{background:var(--bg-gradient);min-height:100vh;color:var(--text-main);overflow-x:hidden}.app-container{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative}.main-content{padding:20px;flex:1;display:flex;flex-direction:column}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#ffffff80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}.cloud-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-weight:500}.spin{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.streak-badge{background:linear-gradient(45deg,#ff9e00,#ff6d00);color:#fff;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700;box-shadow:0 2px 10px #ff9e004d}.toast{position:fixed;top:70px;left:50%;transform:translate(-50%);background:#3c096c;color:#fff;padding:10px 20px;border-radius:30px;font-size:14px;z-index:100;box-shadow:0 4px 15px #0003;white-space:nowrap}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;padding:24px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.5)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;padding:14px 24px;border-radius:16px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #9d4edd66}.btn-primary:active{transform:scale(.96)}.btn-primary:disabled{opacity:.7;cursor:not-allowed}.hero-section{text-align:center;margin-bottom:30px;margin-top:20px}.hero-icon-wrapper{width:80px;height:80px;background:linear-gradient(135deg,#ff9e00,#ff6d00);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 10px 25px #ff9e0066}.hero-section h1{font-size:28px;margin-bottom:8px;color:#10002b}.subtitle{color:var(--text-muted);font-size:14px}.input-group{display:flex;gap:10px;margin-bottom:24px}.song-input{flex:1;padding:14px 20px;border-radius:16px;border:2px solid rgba(157,78,221,.2);font-size:16px;outline:none;transition:border-color .3s;background:#ffffffe6}.song-input:focus{border-color:var(--primary)}.plan-preview{margin-bottom:24px}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.05);padding-bottom:12px}.duration-tag{display:flex;align-items:center;gap:4px;font-size:12px;background:#e0aaff;color:#3c096c;padding:4px 10px;border-radius:12px;font-weight:700}.step-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.step-item{display:flex;align-items:center;gap:16px}.step-num{width:32px;height:32px;background:var(--primary-light);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.step-info{flex:1}.step-info h4{font-size:15px;margin-bottom:4px}.step-info p{font-size:12px;color:var(--text-muted)}.step-time{font-size:13px;font-weight:700;color:var(--primary)}.btn-start-huge{width:100%;background:#10002b;color:#fff;border:none;padding:18px;border-radius:20px;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 8px 20px #10002b4d;transition:transform .2s}.btn-start-huge:active{transform:scale(.98)}.history-section h3{font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--text-muted)}.history-list{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px}.history-card{background:#fff;padding:12px 16px;border-radius:12px;min-width:120px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000000d}.h-song{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h-score{color:var(--secondary);font-size:12px;font-weight:700}.view-practice{display:flex;flex-direction:column;align-items:center;padding-top:20px}.progress-container{width:100%;margin-bottom:30px}.progress-bar-bg{height:8px;background:#ffffff80;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .3s ease}.progress-text{text-align:center;font-size:14px;color:var(--text-muted);font-weight:700}.active-step-card{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:40px;padding:40px 20px}.wave-icon{margin-bottom:20px;color:var(--primary)}.wave-bar{transform-origin:bottom}.wave-bar.active{animation:wave 1s ease-in-out infinite alternate}@keyframes wave{0%{transform:scaleY(.5)}to{transform:scaleY(1.5)}}.active-step-card h2{font-size:24px;margin-bottom:12px}.step-desc{color:var(--text-muted);margin-bottom:30px;line-height:1.5}.timer-display{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center}.timer-ring{width:100%;height:100%;transform:rotate(-90deg);position:absolute;top:0;left:0}.ring-bg{fill:none;stroke:#9d4edd1a;stroke-width:6}.ring-progress{fill:none;stroke:var(--primary);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear}.time-text{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;color:#10002b;z-index:1}.controls{display:flex;gap:24px;align-items:center;margin-bottom:40px}.btn-icon{width:72px;height:72px;border-radius:50%;background:var(--primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 20px #9d4edd66;transition:transform .2s}.btn-icon:active{transform:scale(.9)}.btn-icon.secondary{width:56px;height:56px;background:#fff;color:var(--primary);box-shadow:0 5px 15px #0000001a}.tip-bubble{background:#ffffffb3;padding:12px 20px;border-radius:20px;font-size:14px;color:var(--text-muted);border:1px dashed var(--primary-light)}.view-completed{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:40px}.trophy-container{margin-bottom:20px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.gradient-text{font-size:32px;background:linear-gradient(90deg,#ff9e00,#9d4edd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:30px}.score-card{width:100%;padding:30px;margin-bottom:30px}.score-label{font-size:16px;color:var(--text-muted);margin-bottom:10px}.score-value{font-size:64px;font-weight:700;color:var(--primary);margin-bottom:20px;line-height:1;text-shadow:2px 4px 10px rgba(157,78,221,.2)}.stars{display:flex;justify-content:center;gap:8px}.encouragement{font-size:16px;color:var(--text-muted);font-style:italic;margin-bottom:40px;padding:0 20px}