:root{--bg:#171717;--panel:#1f1f1f;--bd:#2d2d2d;--green:#1e7d34;--greenL:#2ea043;--tx:#e9e9e9;--mut:#9a9a9a}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.5}
body.embed-mode{background:#000}
a{color:var(--greenL);text-decoration:none}a:hover{text-decoration:underline}

/* header - logo centered */
.site-header{background:#1a1a1a;border-bottom:1px solid var(--bd)}
.site-nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
.site-logo img{display:block;height:34px;width:auto}
.site-nav-links{margin-left:auto;display:flex;gap:18px}
.site-nav-links a{color:var(--tx);font-weight:600;font-size:14px}
.site-nav-links a:hover{color:var(--greenL);text-decoration:none}
.mobile-menu-toggle{display:none;background:none;border:0;color:var(--tx);width:34px;height:34px;cursor:pointer}
.mobile-menu-toggle svg{width:26px;height:26px}
.mobile-menu{position:fixed;inset:0;z-index:9999;background:#1a1a1a;padding:16px}
.mobile-menu[hidden]{display:none}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mobile-menu-close{background:none;border:0;color:var(--tx);width:34px;height:34px;cursor:pointer}
.mobile-menu-links a{display:block;color:var(--tx);font-size:18px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--bd)}

/* layout - centered column */
.site-main{max-width:1000px;margin:0 auto;padding:16px}
.site-main.is-embed{padding:0;max-width:none}
.layout{display:flex;flex-direction:column;align-items:center;gap:16px}
.is-embed .layout{gap:0}
.col-side{width:100%;max-width:900px}
.col-left{display:none}
.col-center{width:100%;max-width:900px}
.panel{background:var(--panel);border:1px solid var(--bd);border-radius:10px;overflow:hidden;width:100%}
.panel-empty{display:none}
.panel-player{padding:0}

/* player tabs */
.player-tabs{display:flex;border-bottom:1px solid var(--bd)}
.player-tab{flex:1;text-align:center;padding:12px;color:var(--mut);font-weight:600;font-size:14px;border-right:1px solid var(--bd)}
.player-tab:last-child{border-right:0}
.player-tab.is-active{background:var(--green);color:#fff}
.player-tab.is-disabled{opacity:.4;cursor:not-allowed}
.player-tab:hover:not(.is-active):not(.is-disabled){background:#252525;text-decoration:none}
.player-hint{text-align:center;font-size:12px;color:var(--mut);padding:8px}

/* stream frame 16:9 */
.stream-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.stream-frame iframe,.stream-frame>div,.stream-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* share row centered */
.share-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px}
.share-btn{background:none;border:0;cursor:pointer;padding:0;line-height:0}
.share-btn svg{width:34px;height:34px;border-radius:50%}

/* embed box */
.embed-box{margin:12px;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.embed-box-head{display:flex;align-items:center;justify-content:space-between;background:#252525;padding:8px 12px}
.embed-box-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--tx)}
.embed-box-title svg{width:16px;height:16px}
.embed-copy-btn{background:var(--green);color:#fff;border:0;border-radius:5px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer}
.embed-copy-btn:hover{background:var(--greenL)}
.embed-code-input{width:100%;background:#141414;color:#cdd6e4;border:0;padding:10px 12px;font-family:monospace;font-size:12px;resize:vertical}
.embed-box-help{font-size:11px;color:var(--mut);padding:6px 12px}

/* chat - 50% width, small height (10%) */
.panel-chat{padding:0;min-height:560px;max-width:100%;margin:0 auto}

/* footer centered */
.site-footer{text-align:center;padding:20px 16px;color:var(--mut);font-size:13px;border-top:1px solid var(--bd);margin-top:20px}
.site-footer a{color:var(--greenL)}
footer{text-align:center;padding:20px 16px;color:var(--mut);font-size:13px}
footer a{color:var(--greenL)}

@media(max-width:640px){
  .site-nav-links{display:none}
  .mobile-menu-toggle{display:block}
  .site-main{padding:8px}
  .panel-chat{max-width:100%}
}