.app{max-width:400px;margin:0 auto;padding:16px;font-family:system-ui,-apple-system,sans-serif}.app-header{text-align:center;margin-bottom:24px}.app-header h1{font-size:20px;margin:0 0 8px;color:#1f2937}.status{font-size:12px;color:#059669;margin:0}.queue-panel{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.now-speaking,.up-next,.completed{padding:16px;border-bottom:1px solid #e5e7eb}.now-speaking{background-color:#ecfdf5}.now-speaking h2{color:#059669;font-size:16px;margin:0 0 8px}.up-next h2,.completed h2{font-size:16px;margin:0 0 8px;color:#374151}.controls{padding:16px;text-align:center;display:flex;gap:8px;justify-content:center}.start-button,.shuffle-button{background-color:#2563eb;color:#fff;border:none;padding:12px 16px;border-radius:6px;font-size:14px;cursor:pointer;flex:1;max-width:120px}.shuffle-button{background-color:#6b7280}.start-button:hover{background-color:#1d4ed8}.shuffle-button:hover{background-color:#4b5563}.error-container{min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;padding:20px}.error-content{background:white;border-radius:12px;padding:32px;max-width:600px;box-shadow:0 20px 25px -5px #0000001a}.error-content h1{text-align:center;color:#1f2937;margin-bottom:24px;font-size:28px}.error-box{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:20px;margin-bottom:24px}.error-box h2{color:#dc2626;margin:0 0 12px;font-size:18px}.error-box p{color:#7f1d1d;margin:0 0 16px}.instructions,.features{background:#f8fafc;border-radius:8px;padding:20px;margin:20px 0}.instructions h3,.features h3{color:#1e40af;margin:0 0 12px;font-size:16px}.instructions ol{margin:0;padding-left:20px;color:#374151}.instructions li{margin-bottom:8px}.features ul{margin:0;padding-left:20px;color:#374151}.features li{margin-bottom:6px}.loading-container{min-height:100vh;background:linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}.loading-container h1{font-size:32px;margin-bottom:32px}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:24px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container h2{font-size:24px;margin-bottom:12px}.loading-container p{font-size:16px;opacity:.8}*{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-color:#f9fafb}#root{width:100%;min-height:100vh}