:root,[data-theme=dark]{--bg: #0e0f10;--panel: #141517;--panel-2: #212325;--border: #2d3338;--border-hover: rgba(255, 255, 255, .18);--text: #f5f5f5;--muted: #9da5b6;--accent: #00f889;--accent-text: #00f889;--accent-border: rgba(0, 248, 137, .35);--primary: #00f889;--primary-text: #0e0f10;--focus-border: rgba(0, 248, 137, .55);--focus-ring: rgba(0, 248, 137, .18);--danger: #e02020;--radius: 14px;--shadow: rgba(0, 0, 0, .45);--topbar-bg: rgba(14, 15, 16, .85);--code-bg: rgba(255, 255, 255, .06);--chip-bg: rgba(255, 255, 255, .06);--badge-bg: rgba(0, 0, 0, .55);--badge-border: rgba(255, 255, 255, .12);--badge-live-bg: rgba(0, 248, 137, .22);--badge-live-border: rgba(0, 248, 137, .35);--hero-bg: linear-gradient(135deg, rgba(0, 248, 137, .16) 0%, rgba(2, 127, 128, .12) 100%)}[data-theme=light]{--bg: #f5f5f5;--panel: #ffffff;--panel-2: #f0f1f2;--border: #c9cedc;--border-hover: rgba(20, 21, 23, .22);--text: #141517;--muted: #697183;--accent: #00f889;--accent-text: #027f80;--accent-border: rgba(2, 127, 128, .35);--primary: #00f889;--primary-text: #0e0f10;--focus-border: rgba(2, 127, 128, .55);--focus-ring: rgba(2, 127, 128, .16);--danger: #e02020;--radius: 14px;--shadow: rgba(0, 0, 0, .1);--topbar-bg: rgba(245, 245, 245, .85);--code-bg: rgba(0, 0, 0, .05);--chip-bg: rgba(0, 0, 0, .05);--badge-bg: rgba(0, 0, 0, .55);--badge-border: rgba(255, 255, 255, .12);--badge-live-bg: rgba(0, 248, 137, .22);--badge-live-border: rgba(0, 248, 137, .35);--hero-bg: linear-gradient(135deg, rgba(0, 248, 137, .18) 0%, rgba(2, 127, 128, .1) 100%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}a{color:var(--accent-text);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;border:none;padding:8px 16px;border-radius:10px;font-size:14px;font-weight:500;background:var(--panel-2);color:var(--text);border:1px solid var(--border);transition:all .15s ease}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}button:active:not(:disabled){transform:translateY(0);filter:brightness(.95)}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:14px}input,textarea,select{transition:border-color .15s ease,box-shadow .15s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--focus-border);box-shadow:0 0 0 3px var(--focus-ring)}.container{max-width:1200px;margin:0 auto;padding:20px}.card{background:var(--panel);border-radius:var(--radius);padding:16px;margin-bottom:16px;border:1px solid var(--border);transition:border-color .2s ease,box-shadow .2s ease}.card:hover{border-color:var(--border-hover)}.card-interactive{cursor:pointer}.card-interactive:hover{border-color:var(--accent-border);box-shadow:0 4px 12px #0003}.status-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;color:var(--primary-text)}.status-badge.queued{background:#5cbffb}.status-badge.showing{background:#f2da00}.status-badge.answered{background:var(--accent)}.status-badge.skipped{background:#9da5b6}.status-badge.blocked{background:var(--danger);color:#fff}.topbar{position:sticky;top:0;z-index:20;background:var(--topbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.topbar-inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:.2px;color:var(--text)}.brand:hover{text-decoration:none}.topbar-search{flex:1;display:flex;justify-content:center}.search-input{width:min(560px,100%)}.page-header code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--code-bg);color:var(--text)}.stream-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}@media (max-width: 1100px){.stream-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 820px){.stream-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 520px){.stream-grid{grid-template-columns:1fr}}.stream-card{display:block;border-radius:var(--radius);overflow:hidden;background:var(--panel);border:1px solid var(--border);transition:transform .12s ease,border-color .12s ease}.stream-card.stream-card-disabled{opacity:.62;cursor:not-allowed}.stream-card:hover{transform:translateY(-2px);border-color:var(--accent-border);text-decoration:none}.stream-card.stream-card-disabled:hover{transform:none;border-color:var(--border)}.stream-thumb{position:relative;aspect-ratio:16 / 9;background:#0a0a0a;overflow:hidden}.stream-thumb img{width:100%;height:100%;object-fit:cover;display:block}.stream-thumb-fallback{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);font-weight:700;letter-spacing:.4px;background:linear-gradient(135deg,#00f88929,#027f801f)}.stream-badges{position:absolute;top:10px;left:10px;display:flex;gap:8px}.badge{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;border:1px solid var(--badge-border);background:var(--badge-bg);color:var(--text)}.badge-live{background:var(--badge-live-bg);border-color:var(--badge-live-border)}.badge-offline{background:#e020202e;border-color:#e0202059}.badge-checking{background:#ffffff0f;border-color:#ffffff24}.badge-platform{background:#ffffff0f}.stream-meta{padding:12px 12px 14px}.stream-title{font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.stream-creator{margin-top:6px;color:var(--muted);font-size:13px}.stream-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:12px;color:var(--text);background:var(--chip-bg);border:1px solid var(--border);padding:3px 8px;border-radius:999px}.viewer-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}@media (max-width: 980px){.viewer-grid{grid-template-columns:1fr}}.viewer-main,.viewer-side{min-width:0}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{animation:skeleton-shimmer 1.5s infinite}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.6}.empty-state-title{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--text)}.empty-state-description{font-size:14px;color:var(--muted);max-width:320px;line-height:1.5}.empty-state-action{margin-top:20px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.animate-fade-in{animation:fade-in .2s ease}.animate-slide-up{animation:slide-up .25s ease}.animate-slide-in-right{animation:slide-in-right .25s ease}.animate-scale-in{animation:scale-in .2s ease}.animate-pulse,.badge-live{animation:pulse 2s ease-in-out infinite}.modal-backdrop{animation:fade-in .15s ease}.modal-content{animation:scale-in .2s ease}.tab-content{animation:fade-in .15s ease}.status-badge.showing{animation:pulse 1.5s ease-in-out infinite}