.audio-player{max-width:800px;margin:0 auto;padding:24px;background:#fff;border-radius:12px;box-shadow:0 2px 12px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.player-header{margin-bottom:24px}.player-header h1{font-size:24px;font-weight:600;margin:0 0 8px;color:#1a1a1a}.instructor{color:#666;font-size:14px;margin:0}.waveform{height:120px;background:#f5f5f5;border-radius:8px;margin-bottom:16px;cursor:pointer;position:relative;overflow:hidden}.waveform-bars{display:flex;align-items:center;height:100%;gap:2px;padding:0 8px}.waveform-bar{flex:1;background:#06c;border-radius:2px;min-height:4px}.waveform-progress{position:absolute;top:0;left:0;height:100%;background:#0066cc4d;pointer-events:none}.progress-section{display:flex;align-items:center;gap:12px;margin-bottom:24px}.time{font-size:14px;color:#666;min-width:45px}.progress-bar{flex:1;height:6px;background:#e0e0e0;border-radius:3px;cursor:pointer;position:relative}.progress-fill{height:100%;background:#06c;border-radius:3px;transition:width .1s linear}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:#06c;border:2px solid white;border-radius:50%;box-shadow:0 2px 4px #0003}.controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:24px}.control-btn{background:#fff;border:2px solid #e0e0e0;border-radius:50%;width:48px;height:48px;font-size:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#f5f5f5;border-color:#06c}.play-btn{width:64px;height:64px;background:#06c;border-color:#06c;color:#fff;font-size:24px}.play-btn:hover{background:#0052a3;border-color:#0052a3}.settings{display:flex;gap:32px;margin-bottom:24px;padding:16px;background:#f9f9f9;border-radius:8px}.speed-control,.volume-control{flex:1}.settings label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#333}.speed-buttons{display:flex;gap:8px}.speed-btn{flex:1;padding:8px 16px;background:#fff;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s}.speed-btn:hover{border-color:#06c}.speed-btn.active{background:#06c;color:#fff;border-color:#06c}.volume-control input[type=range]{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#06c;cursor:pointer}.volume-control input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#06c;cursor:pointer;border:none}.tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:2px solid #e0e0e0}.tab{padding:12px 24px;background:none;border:none;font-size:14px;font-weight:500;color:#666;cursor:pointer;position:relative;transition:color .2s}.tab:hover,.tab.active{color:#06c}.tab.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#06c}.transcript{max-height:400px;overflow-y:auto;padding:16px;background:#f9f9f9;border-radius:8px}.transcript-segment{display:flex;gap:12px;padding:12px;margin-bottom:8px;background:#fff;border-radius:6px;cursor:pointer;transition:all .2s;border:2px solid transparent}.transcript-segment:hover{border-color:#06c}.transcript-segment.active{background:#e6f2ff;border-color:#06c}.transcript-time{font-size:12px;font-weight:600;color:#06c;min-width:50px}.transcript-text{flex:1;font-size:14px;line-height:1.5;color:#333}.share-btn{background:none;border:none;font-size:16px;cursor:pointer;opacity:.5;transition:opacity .2s}.share-btn:hover{opacity:1}.chapters{padding:16px}.chapter-card{padding:16px;margin-bottom:12px;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.chapter-card:hover{border-color:#06c}.chapter-card.active{background:#e6f2ff;border-color:#06c}.chapter-card h3{margin:0 0 8px;font-size:16px;color:#1a1a1a}.chapter-card p{margin:0;font-size:14px;color:#666}@media (max-width: 768px){.audio-player{padding:16px}.settings{flex-direction:column;gap:16px}.player-header h1{font-size:20px}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f7fa}.App{min-height:100vh}.app-header{background:#06c;color:#fff;padding:16px 24px;box-shadow:0 2px 4px #0000001a}.app-header h1{margin:0;font-size:24px;font-weight:600}.app-main{padding:32px 16px}