#root{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh}.loginForm{max-width:420px;margin:4rem auto;padding:3rem;background:var(--bg-secondary);border-radius:16px;box-shadow:0 4px 6px -1px var(--shadow),0 2px 4px -1px var(--shadow)}.loginForm h1{font-size:2rem;margin-bottom:.5rem;text-align:center}.loginForm h4{text-align:center;margin-bottom:2rem}.loginForm form{display:flex;flex-direction:column;gap:1.25rem}.inputText{padding:.875rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;width:100%;background:var(--bg-primary);color:var(--text-primary);transition:all .2s}.inputText:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #dc26261a}.inputText::placeholder{color:var(--text-secondary)}button{padding:.875rem 1.5rem;margin:0;border:none;border-radius:8px;background-color:var(--primary);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px var(--shadow)}button:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow)}button:active:not(:disabled){background-color:var(--primary-active);transform:translateY(0);box-shadow:0 1px 2px var(--shadow)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}button.secondary{background-color:var(--bg-tertiary);color:var(--text-primary);box-shadow:0 1px 2px var(--shadow)}button.secondary:hover:not(:disabled){background-color:var(--border-color)}button.danger{background-color:var(--danger)}button.danger:hover:not(:disabled){background-color:var(--danger-hover)}.error-message{color:#721c24;background-color:#f8d7da;border:1px solid #f5c6cb;padding:1rem;border-radius:8px;margin:1rem 0;text-align:center}@media(prefers-color-scheme:dark){.error-message{color:#f8d7da;background-color:#721c24;border-color:#491217}}.loading-message{color:var(--text-secondary);padding:2rem;text-align:center;font-size:1.125rem}.home-container{max-width:900px;margin:0 auto}.home-header{text-align:center;margin-bottom:3rem;padding-bottom:2rem;border-bottom:2px solid var(--border-color)}.home-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--primary) 0%,#ef4444 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.program-selector{background:var(--bg-secondary);padding:2rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 2px 4px var(--shadow)}.selector-row{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}.selector-group{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.5rem}.selector-group label{font-weight:600;font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.selector-group select{padding:.875rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:all .2s}.selector-group select:hover:not(:disabled){border-color:var(--primary)}.selector-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #dc26261a}.selector-group select:disabled{opacity:.6;cursor:not-allowed}.load-button{align-self:flex-end;padding:.875rem 2rem;white-space:nowrap}.now-playing{background:linear-gradient(135deg,var(--primary) 0%,#ef4444 100%);color:#fff;padding:1rem 1.5rem;border-radius:12px;margin-bottom:2rem;text-align:center;font-weight:600;font-size:1.125rem;box-shadow:0 4px 6px var(--shadow)}.player-container{background:var(--bg-secondary);padding:2rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 2px 4px var(--shadow)}.footer-actions{display:flex;justify-content:center;gap:1rem;padding-top:2rem;border-top:2px solid var(--border-color)}@media(max-width:768px){#root{padding:1rem}.loginForm{margin:2rem auto;padding:2rem 1.5rem}.home-header h1{font-size:2rem}.program-selector{padding:1.5rem}.selector-row{flex-direction:column}.selector-group{min-width:100%}.load-button{width:100%}.player-container{padding:1.5rem}.footer-actions{flex-direction:column}.footer-actions button{width:100%}}@media(max-width:480px){.home-header h1{font-size:1.75rem}.now-playing{font-size:1rem;padding:.875rem 1rem}}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;font-weight:400;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #212529;--text-secondary: #6c757d;--border-color: #dee2e6;--shadow: rgba(0, 0, 0, .1);--primary: #dc2626;--primary-hover: #b91c1c;--primary-active: #991b1b;--danger: #dc3545;--danger-hover: #bb2d3b;--success: #198754;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(prefers-color-scheme:dark){:root{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #3d3d3d;--text-primary: #f8f9fa;--text-secondary: #adb5bd;--border-color: #495057;--shadow: rgba(0, 0, 0, .3)}}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-primary)}h1{font-size:2.5rem;line-height:1.2;font-weight:700;margin:0 0 1rem;color:var(--text-primary)}h2{font-size:1.75rem;font-weight:600;margin:0 0 .75rem}h4{font-size:1rem;font-weight:400;margin:0 0 1.5rem;color:var(--text-secondary)}a{font-weight:500;color:var(--primary);text-decoration:none;transition:color .2s}a:hover{color:var(--primary-hover)}button{border-radius:8px;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px var(--shadow)}button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}input,select{font-family:inherit}