/* Extracted from page_panels/livestream.php block 1 */
:root{
        --wls-card: rgba(8,10,14,0.62);
        --wls-border: rgba(255,255,255,0.10);
        --wls-text: rgba(255,255,255,0.92);
        --wls-muted: rgba(255,255,255,0.70);
        --wls-shadow: 0 24px 80px rgba(0,0,0,0.62);
    }
    .wls-watch{ position:relative; min-height:calc(100vh - var(--ww-nav-height, 0px)); background:#000; color:var(--wls-text); padding:2.75rem 1.1rem 3.5rem; overflow:hidden; }
    .wls-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
    .wls-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .wls-overlay{ position:absolute; inset:0; background:radial-gradient(1100px 760px at 18% 10%, rgba(0,0,0,0.18), rgba(0,0,0,0.82) 60%, rgba(0,0,0,0.92) 100%), linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0.84)); }
    .wls-noise{ position:absolute; inset:0; opacity:0.10; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); background-size:220px 220px; }
    .wls-inner{ position:relative; z-index:2; max-width:1520px; margin:0 auto; }
    .wls-panel{ border-radius:2px; background:var(--wls-card); border:1px solid var(--wls-border); backdrop-filter:blur(12px); box-shadow:var(--wls-shadow); position:relative; overflow:hidden; }
    .wls-chat-compose{ overflow:visible; z-index:30; }
    .wls-panel::before{ content:""; position:absolute; inset:-2px; background:radial-gradient(700px 350px at 30% 20%, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%); opacity:0.75; pointer-events:none; }
    .wls-topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.85rem 1rem; margin-bottom:1.1rem; }
    .wls-back,.wls-pill,.wls-meta a{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 0.8rem; border-radius:2px; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.22); color:rgba(255,255,255,0.82); text-decoration:none; font-weight:900; font-size:0.82rem; white-space:nowrap; }
    .wls-back:hover,.wls-meta a:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.22); }
    .wls-topmeta{ display:flex; gap:0.45rem; flex-wrap:wrap; justify-content:flex-end; }
    .wls-pill{ text-transform:uppercase; letter-spacing:0.02em; color:rgba(255,255,255,0.76); }
    .wls-pill.live{ background:rgba(216,42,42,0.88); border-color:rgba(255,255,255,0.18); color:#fff; }
    .wls-player-panel{ padding:1rem; }
    .wls-player-shell{ position:relative; z-index:2; border-radius:2px; overflow:hidden; border:1px solid rgba(255,255,255,0.10); background:#000; }
    .wls-player{ width:100%; aspect-ratio:16 / 9; height:auto; display:block; object-fit:contain; background:#000; }
    .wls-controls{ display:grid; grid-template-columns:auto auto minmax(160px, 1fr) auto; gap:0.6rem; align-items:center; padding:0.7rem; border-top:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.74); backdrop-filter:blur(12px); }
    .wls-control-btn{ min-height:36px; padding:0 0.85rem; border-radius:2px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.92); font:inherit; font-weight:900; cursor:pointer; }
    .wls-control-btn:hover{ background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.24); }
    .wls-play{ background:rgba(255,255,255,0.86); color:rgba(0,0,0,0.92); border-color:rgba(255,255,255,0.86); }
    .wls-volume{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:0.65rem; align-items:center; min-width:0; color:rgba(255,255,255,0.76); font-size:0.78rem; font-weight:900; text-transform:uppercase; }
    .wls-volume input{ width:100%; accent-color:#fff; }
    .wls-player-fallback{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; gap:0.9rem; padding:2rem; text-align:center; color:rgba(255,255,255,0.74); background:rgba(0,0,0,0.70); }
    .wls-player-fallback[hidden]{ display:none; }
    .wls-empty{ position:relative; z-index:2; display:grid; place-items:center; gap:0.9rem; padding:2rem; text-align:center; color:rgba(255,255,255,0.74); }
    .wls-empty h1,.wls-player-fallback p{ margin:0; }
    .wls-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 1.05rem; border-radius:2px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.92); font-weight:900; text-decoration:none; }
    .wls-btn-primary{ background:rgba(255,255,255,0.86); color:rgba(0,0,0,0.92); border-color:rgba(255,255,255,0.86); }
    .wls-live-bottom{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.1rem; margin-top:1.1rem; align-items:start; }
    .wls-left-stack{ display:grid; gap:0.85rem; min-width:0; }
    .wls-stream-links{ padding:1rem 1.05rem; }
    .wls-url-list{ position:relative; z-index:2; display:grid; gap:0.7rem; }
    .wls-url-list label{ display:grid; gap:0.35rem; }
    .wls-url-list span{ color:rgba(255,255,255,0.62); font-size:0.78rem; font-weight:900; text-transform:uppercase; }
    .wls-url-list input{ width:100%; border-radius:2px; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.30); color:rgba(255,255,255,0.90); padding:0.7rem 0.8rem; font:inherit; font-size:0.84rem; outline:none; }
    .wls-url-list input:focus{ border-color:rgba(255,255,255,0.34); background:rgba(0,0,0,0.42); }
    .wls-recommend{ padding:1rem 1.05rem 1.05rem; min-height:360px; }
    .wls-recommend-head{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.8rem; }
    .wls-recommend-head h2{ margin:0; font-size:1.05rem; font-weight:900; }
    .wls-recommend-head span{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:26px; padding:0 0.6rem; border-radius:2px; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.22); font-weight:900; }
    .wls-recommend-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.85rem; }
    .wls-stream-card{ color:rgba(255,255,255,0.90); text-decoration:none; border-radius:2px; overflow:hidden; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.22); }
    .wls-stream-card:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.06); }
    .wls-stream-thumb{ position:relative; aspect-ratio:16 / 9; background:#000; }
    .wls-stream-thumb video{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; opacity:1; transition:opacity 0.18s ease; }
    .wls-stream-thumb.is-loading video{ opacity:0; }
    .wls-stream-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.62); font-weight:900; text-transform:uppercase; letter-spacing:0.05em; background:rgba(255,255,255,0.06); background-position:center; background-size:cover; }
    .wls-stream-thumb.has-screenshot .wls-stream-fallback{ color:transparent; background-image:linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.28)), var(--stream-shot); }
    .wls-stream-info{ padding:0.8rem 0.85rem 0.9rem; display:grid; gap:0.35rem; }
    .wls-stream-info strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .wls-stream-info span{ color:rgba(255,255,255,0.64); font-weight:900; font-size:0.82rem; }
    .wls-empty-small{ position:relative; z-index:2; min-height:120px; display:grid; place-items:center; padding:1rem; color:rgba(255,255,255,0.62); font-weight:900; text-align:center; }
    .wls-chat-wrap{ position:relative; display:grid; gap:0.85rem; min-width:0; }
    .wls-chat-compose{ position:relative; z-index:50; overflow:visible; padding:1rem 1.05rem; }
    .wls-chat-head{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.8rem; }
    .wls-chat-head h2{ margin:0; font-size:1.05rem; font-weight:900; }
    .wls-chat-tools{ position:relative; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:0.55rem; flex-wrap:wrap; }
    .wls-chat-head span{ color:rgba(255,255,255,0.58); font-weight:900; font-size:0.78rem; text-align:right; }
    .wls-mini-btn{ min-height:30px; padding:0 0.7rem; border-radius:2px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.90); font:inherit; font-size:0.78rem; font-weight:900; cursor:pointer; }
    .wls-mini-btn:hover{ background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.24); }
    .wls-chat-form{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:0.7rem; align-items:end; }
    .wls-chat-editor{ width:100%; min-height:76px; border-radius:2px; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.30); color:rgba(255,255,255,0.92); padding:0.75rem 0.85rem; outline:none; font:inherit; overflow:auto; line-height:1.45; }
    .wls-chat-editor:focus{ border-color:rgba(255,255,255,0.34); background:rgba(0,0,0,0.42); }
    .wls-chat-editor:empty::before{ content:attr(data-placeholder); color:rgba(255,255,255,0.45); pointer-events:none; }
    .wls-editor-sticker{ display:inline-block; width:42px; height:42px; object-fit:contain; margin:0 0.2rem; vertical-align:middle; filter:drop-shadow(0 8px 12px rgba(0,0,0,0.34)); }
    .wls-chat-actions{ display:grid; gap:0.45rem; }
    .wls-sticker-menu{ position:relative; min-width:0; }
    .wls-sticker-menu > .wls-btn{ width:100%; }
    .wls-sticker-selection{ grid-column:1 / -1; min-height:40px; border-radius:2px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.22); padding:0.55rem; color:rgba(255,255,255,0.70); font-weight:900; }
    .wls-sticker-selection img{ width:42px; height:42px; object-fit:contain; vertical-align:middle; margin-right:0.55rem; }
    .wls-sticker-popup{ position:absolute; right:0; top:calc(100% + 0.45rem); z-index:90; width:min(420px, 88vw); max-height:260px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)); gap:0.45rem; padding:0.6rem; border-radius:2px; border:1px solid rgba(255,255,255,0.16); background:rgba(5,7,10,0.98); box-shadow:0 22px 70px rgba(0,0,0,0.72); backdrop-filter:blur(12px); }
    .wls-sticker-popup[hidden]{ display:none !important; }
    .wls-sticker-btn{ height:58px; border-radius:2px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); padding:0.25rem; cursor:pointer; }
    .wls-sticker-btn:hover,.wls-sticker-btn.is-selected{ border-color:rgba(255,255,255,0.34); background:rgba(255,255,255,0.13); }
    .wls-sticker-btn img{ width:100%; height:100%; object-fit:contain; display:block; }
    .wls-chat-login{ position:relative; z-index:2; color:rgba(255,255,255,0.70); font-weight:900; }
    .wls-chat-list-card{ min-height:360px; max-height:520px; padding:0.9rem; z-index:1; }
    .wls-chat-list{ position:relative; z-index:2; max-height:480px; overflow:auto; display:flex; flex-direction:column; gap:0.65rem; padding-right:0.25rem; }
    .wls-chat-message{ border-radius:2px; border:1px solid rgba(255,255,255,0.09); background:rgba(0,0,0,0.24); padding:0.7rem 0.75rem; opacity:1; }
    .wls-chat-message:nth-child(n+5){ opacity:0.82; }
    .wls-chat-message:nth-child(n+9){ opacity:0.62; }
    .wls-chat-message:nth-child(n+14){ opacity:0.42; }
    .wls-chat-message:nth-child(n+22){ opacity:0.26; }
    .wls-chat-line{ display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center; color:rgba(255,255,255,0.80); line-height:1.45; overflow-wrap:anywhere; }
    .wls-chat-meta{ display:inline-flex; gap:0.45rem; align-items:center; color:rgba(255,255,255,0.62); font-weight:900; font-size:0.78rem; }
    .wls-chat-user{ color:rgba(255,255,255,0.92); }
    .wls-chat-text{ color:rgba(255,255,255,0.80); }
    .wls-chat-sticker{ display:inline-block; max-width:48px; max-height:48px; object-fit:contain; vertical-align:middle; filter:drop-shadow(0 10px 14px rgba(0,0,0,0.38)); }
    .wls-obs-card{ padding:1rem 1.05rem; }
    .wls-obs-url{ position:relative; z-index:2; width:100%; border-radius:2px; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.30); color:rgba(255,255,255,0.90); padding:0.75rem 0.85rem; font:inherit; font-size:0.86rem; outline:none; }
    .wls-obs-url:focus{ border-color:rgba(255,255,255,0.34); background:rgba(0,0,0,0.42); }
    .wls-head{ padding:1rem 1.05rem; margin-top:1.1rem; }
    .wls-head h1{ position:relative; z-index:2; margin:0 0 0.55rem; font-weight:900; letter-spacing:-0.02em; font-size:clamp(1.35rem, 2.6vw, 1.9rem); line-height:1.08; }
    .wls-meta{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center; color:rgba(255,255,255,0.72); font-weight:900; font-size:0.86rem; }
    @media (max-width:1200px){ .wls-recommend-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
    @media (max-width:980px){ .wls-live-bottom{ grid-template-columns:1fr; } }
    @media (max-width:720px){
        .wls-watch{ padding:2.4rem 1rem 3.2rem; }
        .wls-topbar{ align-items:flex-start; flex-direction:column; }
        .wls-player-panel{ padding:0.7rem; }
        .wls-controls{ grid-template-columns:1fr 1fr; }
        .wls-volume{ grid-column:1 / -1; }
        .wls-recommend-grid{ grid-template-columns:1fr; }
        .wls-chat-form{ grid-template-columns:1fr; }
        .wls-chat-actions{ grid-template-columns:1fr 1fr; }
        .wls-chat-head{ flex-direction:column; }
        .wls-chat-head span{ text-align:left; }
    }