:root{--bg: #121212;--surface: #1d1d1d;--surface-2: #262626;--text: #eaeaea;--muted: #9a9a9a;--primary: #5b8def;--danger: #e05656;--radius: 16px}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input,select{font-family:inherit}.page{min-height:100%;width:100%}.center{display:flex;align-items:center;justify-content:center;padding:16px}.muted{color:var(--muted)}.small{font-size:.8rem}.card{background:var(--surface);border:1px solid #2d2d2d;border-radius:var(--radius);padding:28px 24px;width:100%}.gate-card{max-width:380px}.gate-header{text-align:center;margin-bottom:24px}.icon-lock{font-size:40px}.gate-header h1{font-size:1.3rem;margin:8px 0 4px}.field{display:block;margin-bottom:8px}.field-label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px}.field-input{display:flex;align-items:center;background:var(--surface-2);border:1px solid #333;border-radius:10px;overflow:hidden}.field-input input{flex:1;min-width:0;background:transparent;border:none;color:var(--text);padding:14px;font-size:1rem;outline:none}.field-toggle{background:transparent;border:none;color:var(--muted);padding:0 14px;cursor:pointer;font-size:1.1rem}.error-text{color:var(--danger);font-size:.85rem;margin:4px 0 0}.btn{border:none;border-radius:10px;padding:14px 20px;font-size:1rem;font-weight:600;cursor:pointer}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-block{width:100%;margin-top:16px}.btn-text{background:transparent;border:1px solid #3a3a3a;color:var(--muted);border-radius:999px;padding:8px 16px;font-size:.8rem;cursor:pointer}.btn-text:disabled{opacity:.6;cursor:not-allowed}.report-btn{align-self:center}.spinner{width:40px;height:40px;border-radius:50%;border:3px solid #333;border-top-color:var(--primary);animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.viewer-page{display:flex;flex-direction:column}.player-wrap{width:100%;background:#000}.player-ratio{position:relative;width:100%;padding-top:56.25%;margin:0 auto}.player-frame{position:absolute;inset:0;width:100%;height:100%;border:0}@media(min-width:481px){.player-wrap{max-width:380px;margin:0 auto}.player-ratio{max-width:380px}}.external-player{padding-top:32px;padding-bottom:8px}.external-card{max-width:340px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.external-card .channel-logo-box,.external-card .channel-logo-fallback{width:64px;height:64px}.external-channel-label{font-size:1.1rem}.controls{width:100%;max-width:720px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:10px}.controls-row{display:flex;align-items:center;gap:8px}.controls-info{flex:1;min-width:0;text-align:center;overflow:hidden}.channel-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:none;background:var(--surface-2);color:var(--text);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-icon:disabled{opacity:.35;cursor:not-allowed}.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;max-height:46vh;overflow-y:auto;padding:4px 2px 2px;-webkit-overflow-scrolling:touch}.channel-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:12px;background:var(--surface-2);border:2px solid transparent;cursor:pointer;color:var(--text)}.channel-tile.active{border-color:var(--primary);background:#233355}.channel-logo-box{width:40px;height:40px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;padding:4px;box-sizing:border-box}.channel-logo{max-width:100%;max-height:100%;object-fit:contain}.channel-logo-fallback{width:40px;height:40px;border-radius:8px;background:#333;color:var(--muted);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}.channel-tile-label{font-size:.68rem;line-height:1.15;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.welcome-banner{align-self:center;background:#1e5c33;color:#d6f5e0;border:1px solid #2f8a4e;padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:600}.modal-overlay{position:fixed;inset:0;z-index:200;background:#000000bf;display:flex;align-items:center;justify-content:center;padding:16px}.modal-card{max-width:400px;width:100%}.modal-title{font-size:1.1rem;margin:0 0 14px;text-align:center}.modal-list{margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:.88rem;color:var(--text);line-height:1.4}