:root{--bg: #0d1017;--bg-card: #151a24;--bg-card-2: #1b2130;--text: #e8ecf3;--text-dim: #9aa4b8;--accent: #6ee7b7;--accent-2: #7dd3fc;--danger: #f87171;--radius: 16px;--border: 1px solid #232b3d}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:1100px;margin:0 auto;padding:1rem 1rem 3rem;display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0 1.25rem}.logo{font-weight:700;letter-spacing:.22em;font-size:1.05rem}.badge{font-size:.8rem;padding:.3rem .7rem;border-radius:999px;border:var(--border)}.badge-live{color:var(--accent);animation:pulse 2.4s infinite}.badge-gen{color:var(--accent-2)}.badge-paused{color:var(--text-dim)}.badge-error{color:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.banner{background:#232b3d;border:var(--border);border-radius:var(--radius);padding:.6rem .9rem;margin-bottom:.9rem;color:var(--text-dim);font-size:.9rem}.banner-ok{color:var(--accent)}.card{background:var(--bg-card);border:var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}.card h2{margin:0 0 1rem;font-size:1.6rem;font-weight:700}.card h3{margin:0 0 .9rem;font-size:1.05rem;font-weight:600}.muted{color:var(--text-dim)}.player-card{background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));padding:1.75rem 1.25rem}.player-topic h2{font-size:clamp(1.4rem,4vw,2.2rem);margin:0}.hosts{display:flex;gap:1rem;margin-top:.6rem}.host{font-size:.8rem;letter-spacing:.18em;color:var(--text-dim)}.transport{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem}.play-btn{width:54px;height:54px;border-radius:50%;border:none;background:var(--accent);color:#06281c;font-size:1.2rem;cursor:pointer;flex:0 0 auto}.progress-wrap{position:relative;flex:1}.progress-wrap input[type=range]{width:100%;opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}.progress-bar{height:6px;border-radius:999px;background:#2a3346;overflow:hidden}.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s linear}.time{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:.85rem;white-space:nowrap}.volume-row{display:flex;align-items:center;gap:.75rem;margin-top:.9rem}.volume-row input{flex:0 1 200px;accent-color:var(--accent)}.vol-label{font-size:.8rem;color:var(--text-dim)}.now-playing{margin-top:1.25rem}.np-label{font-size:.72rem;letter-spacing:.2em;color:var(--accent-2);margin-bottom:.25rem}.np-title{font-size:1.05rem;font-weight:600}.np-host{color:var(--text-dim);font-size:.9rem;margin-top:.3rem}.columns{display:grid;gap:1rem;grid-template-columns:1fr}.question-form{display:flex;gap:.5rem}.question-form input{flex:1;background:var(--bg);border:var(--border);border-radius:12px;color:var(--text);padding:.7rem .9rem;font-size:.95rem}.question-form input:focus{outline:2px solid var(--accent-2)}.question-form button{border:none;border-radius:12px;background:var(--accent);color:#06281c;font-weight:600;padding:0 1.1rem;cursor:pointer}.question-form button:disabled{opacity:.5;cursor:default}.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.chip{background:var(--bg-card-2);border:var(--border);color:var(--text-dim);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;cursor:pointer}.chip:hover{color:var(--text)}.chip.static{cursor:default;display:inline-flex;gap:.4rem;align-items:center}.chip.static button{background:none;border:none;color:var(--text-dim);cursor:pointer}.question-list{list-style:none;margin:1rem 0 0;padding:0}.question-list li{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem 0;border-bottom:var(--border);font-size:.9rem}.q-text{color:var(--text)}.q-status{color:var(--text-dim);white-space:nowrap}.q-answered .q-status{color:var(--accent)}.q-in_progress .q-status{color:var(--accent-2)}.src-summary{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.src-badge{font-size:.75rem;color:var(--text-dim);border:var(--border);border-radius:999px;padding:.2rem .6rem}.src-list{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}.src-item{padding:.6rem 0;border-bottom:var(--border)}.src-title{color:var(--text);text-decoration:none;font-size:.92rem;display:block}.src-title:hover{color:var(--accent-2);text-decoration:underline}.src-meta{display:flex;gap:.6rem;margin-top:.2rem;font-size:.75rem;color:var(--text-dim);flex-wrap:wrap}.src-type{border-radius:6px;padding:.05rem .45rem;font-weight:600}.src-youtube .src-type{background:#3f1212;color:#ff8f8f}.src-wikipedia .src-type{background:#10243e;color:#93c5fd}.src-rss .src-type{background:#2b2410;color:#fbbf24}.src-other .src-type{background:#232b3d;color:var(--text-dim)}.create-card{max-width:640px;margin:2rem auto}.create-topic{width:100%;background:var(--bg);border:var(--border);border-radius:12px;color:var(--text);font-size:1.1rem;padding:.85rem 1rem}.create-topic:focus,.keyword-row input:focus{outline:2px solid var(--accent-2)}.keyword-row{display:flex;gap:.5rem;margin-top:.75rem}.keyword-row input{flex:1;background:var(--bg);border:var(--border);border-radius:12px;color:var(--text);padding:.6rem .9rem}.duration-row{border:none;display:flex;gap:.5rem;margin:1.25rem 0 0;padding:0;flex-wrap:wrap}.duration-row legend{color:var(--text-dim);font-size:.85rem;margin-bottom:.5rem;padding:0;width:100%}.duration-row label{border:var(--border);border-radius:999px;padding:.4rem .9rem;cursor:pointer;font-size:.9rem;color:var(--text-dim)}.duration-row label input{display:none}.duration-row label.active{border-color:var(--accent);color:var(--accent)}.create-card .primary{margin-top:1.5rem;width:100%;border:none;border-radius:12px;background:var(--accent);color:#06281c;font-weight:700;font-size:1rem;padding:.85rem;cursor:pointer}.create-card .primary:disabled{opacity:.5;cursor:default}.footer{margin-top:auto;padding-top:2rem;color:#4b5568;font-size:.75rem;text-align:center}@media (min-width: 860px){.columns{grid-template-columns:1.2fr 1fr;align-items:start}}