:root { --bg:#f5f3ee; --ink:#1b2330; --muted:#737b87; --line:#d9d9d4; --blue:#3654d9; --orange:#ef704e; --paper:#fffefa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.page-shell { width:min(1180px,100%); min-height:100vh; margin:0 auto; padding:27px clamp(20px,5vw,70px) 65px; }
.topbar { padding-bottom:22px; border-bottom:1px solid var(--line); }
.topbar-main { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:15px; font-size:30px; font-weight:900; letter-spacing:-.07em; }
.brand-mark { position:relative; display:grid; place-items:center; width:56px; height:56px; border-radius:17px 17px 17px 5px; color:white; background:linear-gradient(145deg,#4664ee 0%,var(--blue) 62%,#253eb9 100%); box-shadow:6px 6px 0 rgba(54,84,217,.14); font-size:28px; font-weight:950; letter-spacing:-.08em; }
.brand-mark::after { content:""; position:absolute; top:9px; right:9px; width:10px; height:10px; border:2px solid #fff6; border-radius:50%; background:var(--orange); }
.beta-label { color:#9a9e9b; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.account-area { display:flex; align-items:center; gap:9px; }
.main-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:min(760px,100%); margin:22px auto 0; padding:6px; border:1px solid #dfe3ee; border-radius:14px; background:#edf0f7; }
.nav-button { display:flex; align-items:center; gap:11px; min-height:59px; padding:9px 16px; border:1px solid transparent; border-radius:10px; color:#7b8290; background:transparent; text-align:left; }
.nav-button:hover { color:var(--ink); background:#fff; }
.nav-button.is-active { border-color:#d8defd; color:var(--blue); background:#fff; box-shadow:0 4px 12px rgba(39,51,94,.11); }
.nav-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#8992a5; background:#e3e6ee; font-size:16px; line-height:1; }
.nav-button.is-active .nav-icon { color:white; background:var(--blue); box-shadow:3px 3px 0 #dbe1ff; }
.nav-button[data-dashboard-view="live"] .nav-icon { font-size:13px; }
.nav-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.nav-copy strong { color:inherit; font-size:12px; letter-spacing:-.02em; }
.nav-copy small { color:#9aa2b1; font-size:10px; font-weight:600; }
.auth-button { min-height:34px; padding:7px 10px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#f1f2ee; font-size:11px; font-weight:800; }
.auth-button:hover { border-color:var(--blue); color:var(--blue); background:#e9edff; }
.auth-dialog-panel { width:min(440px,100%); padding:32px; border-radius:14px; box-shadow:0 24px 80px rgba(21,27,45,.25); }
.auth-dialog-panel { overflow:hidden; }
#authDialog .auth-dialog-panel { display:grid; grid-template-columns:minmax(245px,.82fr) minmax(360px,1.18fr); width:min(820px,100%); max-height:min(650px,92vh); padding:0; border:1px solid #dfe3ec; border-radius:18px; background:#fffefa; box-shadow:0 30px 100px rgba(15,24,48,.28); }
.auth-dialog-showcase { position:relative; display:flex; flex-direction:column; min-height:500px; overflow:hidden; padding:31px 28px 27px; color:white; background:radial-gradient(circle at 110% -10%,#5069d8 0,#2d438e 28%,transparent 52%),linear-gradient(155deg,#202f5a 0%,#121a30 100%); }
.auth-dialog-showcase::before { content:""; position:absolute; right:-54px; bottom:-75px; width:245px; height:245px; border:1px solid #ffffff1c; border-radius:50%; box-shadow:0 0 0 24px #ffffff08,0 0 0 49px #ffffff05; }
.auth-dialog-brand { position:relative; z-index:1; display:flex; align-items:center; gap:10px; color:#fff; font-size:18px; font-weight:900; letter-spacing:-.06em; }.auth-dialog-brand .brand-mark { width:38px; height:38px; border-radius:12px 12px 12px 4px; box-shadow:4px 4px 0 #10182e66; font-size:19px; }.auth-dialog-brand .brand-mark::after { top:6px; right:6px; width:7px; height:7px; }
.auth-showcase-live { position:relative; z-index:1; display:flex; align-items:center; gap:7px; margin-top:69px; color:#d9eb73; font-size:9px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }.auth-showcase-live i { width:6px; height:6px; border-radius:50%; background:#45e35c; box-shadow:0 0 0 4px #45e35c1e; }
.auth-dialog-showcase h3 { position:relative; z-index:1; margin:15px 0 0; color:#fff; font-size:35px; line-height:.98; letter-spacing:-.08em; }.auth-dialog-showcase > p { position:relative; z-index:1; max-width:230px; margin:16px 0 0; color:#b9c4de; font-size:11px; line-height:1.5; }
.auth-showcase-points { position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:26px; }.auth-showcase-points span { display:flex; align-items:center; gap:10px; }.auth-showcase-points b { display:grid; place-items:center; width:23px; height:23px; border:1px solid #ffffff2b; border-radius:7px; color:#d9eb73; font-size:8px; }.auth-showcase-points strong { color:#edf1fb; font-size:10px; }.auth-showcase-orbit { position:absolute; z-index:0; border:1px solid #ffffff18; border-radius:50%; }.auth-showcase-orbit-a { right:-30px; top:158px; width:150px; height:150px; }.auth-showcase-orbit-b { right:12px; top:200px; width:65px; height:65px; border-color:#d9eb7355; }.auth-dialog-form { min-width:0; padding:35px 39px 25px; }.auth-dialog-form .screen-picker-heading h2 { font-size:29px; }.auth-dialog-form .screen-picker-help { max-width:390px; margin:10px 0 29px; font-size:12px; }.auth-dialog-form .auth-form { gap:15px; }.auth-dialog-form .auth-form label { gap:7px; font-size:11px; }.auth-dialog-form .auth-form input { min-height:45px; padding:10px 12px; border-color:#dfe3eb; border-radius:8px; background:#fbfcff; font-size:12px; }.auth-dialog-form .auth-form input::placeholder { color:#b3bac7; }.auth-dialog-form .auth-form input:focus { outline:3px solid #e5e9ff; border-color:var(--blue); background:white; }.auth-dialog-form .auth-form .primary-button { min-height:47px; margin-top:9px; border:0; border-radius:8px; box-shadow:0 7px 15px rgba(54,84,217,.17); }.auth-dialog-form .auth-switch-button { align-self:center; padding:3px 5px; color:var(--blue); font-size:10px; text-decoration:none; }.auth-dialog-form .auth-switch-button:hover { color:#263eb4; text-decoration:underline; }.auth-dialog-form .auth-switch-button span { color:#8993a7; font-weight:700; }.auth-dialog-footnote { display:flex; align-items:center; justify-content:center; gap:6px; margin:25px 0 0; color:#9ca4b2; font-size:9px; }.auth-lock { color:#6576bd; font-size:14px; }
.auth-form { display:flex; flex-direction:column; gap:13px; }
.auth-form label { display:flex; flex-direction:column; gap:6px; color:var(--ink); font-size:12px; font-weight:800; }
.auth-form input { width:100%; min-height:42px; padding:9px 10px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#fbfcf9; }
.auth-form input:focus { outline:2px solid rgba(54,84,217,.2); border-color:var(--blue); }
.auth-form small { color:var(--muted); font-size:10px; font-weight:500; line-height:1.4; }
.auth-form .primary-button { margin-top:4px; border:0; }
.auth-form-status { min-height:18px; margin:0; color:#b84c36; font-size:11px; line-height:1.4; }
.auth-switch-button { padding:4px; border:0; color:var(--blue); background:transparent; font-size:11px; font-weight:800; text-decoration:underline; }
.home-view { display:block; min-height:calc(100vh - 150px); padding:42px 0 20px; }
.dashboard-welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:34px; }
.dashboard-welcome h1 { max-width:700px; font-size:clamp(38px,5.4vw,68px); }
.welcome-dot { color:var(--orange); }
.dashboard-welcome .intro-text { max-width:570px; margin-top:18px; font-size:15px; }
.dashboard-welcome-actions { display:flex; flex:0 0 250px; flex-direction:column; gap:9px; }
.dashboard-welcome-actions .primary-button { display:grid; grid-template-columns:34px minmax(0,1fr) 14px; align-items:center; gap:9px; min-height:61px; margin:0; padding:11px 13px; border:0; border-radius:11px; text-align:left; box-shadow:0 9px 18px rgba(54,84,217,.2); }
.dashboard-welcome-actions .primary-button > span:not(.action-icon) { display:flex; flex-direction:column; gap:3px; }
.dashboard-welcome-actions .primary-button strong { font-size:12px; }
.dashboard-welcome-actions .primary-button small { color:#d8defc; font-size:10px; font-weight:600; }
.dashboard-welcome-actions .primary-button b { font-size:17px; }
.action-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--blue); background:#fff; font-size:17px; }
.dashboard-welcome-actions .secondary-action-button { width:100%; min-height:40px; border-radius:10px; }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:34px; }
.dashboard-stat { display:flex; align-items:center; gap:11px; min-height:76px; padding:14px 16px; border:1px solid #e0e3ed; border-radius:12px; background:rgba(255,254,250,.8); box-shadow:0 7px 18px rgba(39,51,94,.045); }
.stat-icon { display:grid; place-items:center; flex:0 0 auto; width:35px; height:35px; border-radius:10px; font-size:15px; font-weight:900; }
.stat-icon-blue { color:var(--blue); background:#e9edff; }
.stat-icon-green { color:#298861; background:#e4f6ec; }
.stat-icon-orange { color:#c7563b; background:#fff0eb; }
.dashboard-stat div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dashboard-stat small { color:#8d95a5; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.dashboard-stat strong { color:var(--ink); font-size:22px; letter-spacing:-.05em; }
.dashboard-stat:last-child strong { font-size:15px; letter-spacing:.04em; }
.stat-caption { margin-left:auto; color:#a2a8b4; font-size:10px; text-align:right; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(285px,.65fr); gap:13px; margin-top:13px; }
.dashboard-card { min-width:0; padding:21px; border:1px solid #dfe2eb; border-radius:14px; background:var(--paper); box-shadow:0 9px 23px rgba(39,51,94,.055); }
.dashboard-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.dashboard-card-heading .kicker { margin-bottom:6px; }
.dashboard-card h2 { margin:0; color:var(--ink); font-size:22px; letter-spacing:-.06em; }
.dashboard-card-heading p:not(.kicker) { margin:6px 0 0; color:var(--muted); font-size:11px; }
.text-action { display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:0; color:var(--blue); background:transparent; font-size:11px; font-weight:900; white-space:nowrap; }
.text-action:hover { color:#263eb4; }
.home-live-preview { display:flex; flex-direction:column; gap:8px; min-height:171px; margin-top:17px; }
.home-live-item { display:flex; align-items:center; gap:11px; min-width:0; padding:8px; border:1px solid #e4e7ef; border-radius:10px; background:#fafbfe; }
.home-live-thumb { position:relative; display:grid; place-items:center; flex:0 0 auto; width:104px; height:61px; overflow:hidden; border-radius:7px; color:white; background:linear-gradient(135deg,#273a78,#101827); }
.home-live-thumb-1 { background:linear-gradient(135deg,#803e62,#251b3f); }
.home-live-thumb-2 { background:linear-gradient(135deg,#2c826f,#172f42); }
.home-live-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(140deg,transparent 35%,rgba(255,255,255,.16)); }
.home-live-thumb > span { position:absolute; top:6px; left:7px; z-index:1; display:flex; align-items:center; gap:4px; font-size:7px; font-weight:900; letter-spacing:.08em; }
.home-live-thumb i { width:5px; height:5px; border-radius:50%; background:#45e35c; }
.home-live-thumb > b { z-index:1; font-size:16px; }
.home-live-copy { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; }
.home-live-copy strong { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.home-live-copy p,.home-live-copy small { overflow:hidden; margin:0; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.home-live-copy small { color:#9ca3b0; }
.home-live-item > button { display:grid; place-items:center; flex:0 0 auto; width:29px; height:29px; border:0; border-radius:8px; color:white; background:var(--blue); font-size:13px; }
.home-live-item > button:hover { background:#263eb4; }
.dashboard-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:5px; min-height:138px; padding:14px; border:1px dashed #d4d9e8; border-radius:10px; color:#939aaa; background:#fafbfe; text-align:center; }
.dashboard-empty strong { color:var(--ink); font-size:12px; }
.dashboard-empty > span:last-child { font-size:10px; }
.empty-orb { color:var(--blue); font-size:29px; line-height:1; }
.home-group-list { display:flex; flex-direction:column; gap:7px; min-height:171px; margin-top:15px; }
.home-group-item { display:flex; align-items:center; gap:9px; width:100%; min-width:0; padding:8px; border:1px solid transparent; border-radius:9px; color:var(--ink); background:#fafbfe; text-align:left; }
.home-group-item:hover { border-color:#d8defd; background:#f0f3ff; }
.home-group-avatar { display:grid; place-items:center; flex:0 0 auto; width:33px; height:33px; border-radius:10px 10px 10px 4px; color:white; background:linear-gradient(145deg,#5571ed,var(--blue)); font-size:9px; font-weight:950; }
.home-group-avatar-1 { background:linear-gradient(145deg,#f28a63,#d9573a); }.home-group-avatar-2 { background:linear-gradient(145deg,#8164ec,#5b43c8); }.home-group-avatar-3 { background:linear-gradient(145deg,#42b69e,#1c8b78); }
.home-group-item > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.home-group-item strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.home-group-item small { overflow:hidden; color:#929aaa; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.home-group-item > b { color:#a2a9b7; font-size:17px; font-weight:500; }
.dashboard-loading,.dashboard-mini-empty { display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:145px; color:#98a0ae; font-size:10px; }.dashboard-mini-empty > span { color:var(--blue); font-size:23px; }.dashboard-mini-empty strong { color:var(--ink); font-size:12px; }.dashboard-mini-empty small { color:#9aa2b0; font-size:10px; }
.dashboard-status { display:flex; align-items:center; gap:7px; margin-top:11px; padding-top:12px; border:0; border-top:1px solid #e8e9ee; color:#8f97a5; background:transparent; font-size:9px; text-align:left; }
.status-pulse { width:6px; height:6px; border-radius:50%; background:#45bf72; box-shadow:0 0 0 3px #45bf7222; }
.dashboard-bottom-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(285px,.65fr); gap:13px; margin-top:13px; }
.dashboard-quick-card { display:flex; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(135deg,#202d4d,#172139); }
.dashboard-quick-card h2,.dashboard-quick-card .kicker { color:white; }.dashboard-quick-card .kicker { color:#d9eb73; }.dashboard-quick-card p:not(.kicker) { max-width:320px; margin:7px 0 0; color:#aeb9cf; font-size:11px; line-height:1.45; }
.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; min-width:300px; }.quick-action { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:72px; padding:10px; border:1px solid #ffffff1e; border-radius:9px; color:white; background:#ffffff0b; text-align:left; }.quick-action:hover { border-color:#d9eb73; background:#ffffff18; }.quick-action > span { color:#d9eb73; font-size:16px; }.quick-action strong { font-size:10px; }.quick-action small { color:#aeb9cf; font-size:9px; }
.dashboard-tip-card { position:relative; overflow:hidden; background:linear-gradient(135deg,#fff6e8,#fffefa); }.dashboard-tip-card .tip-mark { position:absolute; top:15px; right:18px; color:#f2b85f; font-size:27px; }.dashboard-tip-card .kicker { color:#c57635; }.dashboard-tip-card h2 { font-size:25px; }.dashboard-tip-card p:not(.kicker) { max-width:220px; margin:8px 0 13px; color:#7b7d80; font-size:11px; line-height:1.45; }.tip-status { display:flex; align-items:center; gap:6px; color:#8c744e; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }.tip-status i { width:6px; height:6px; border-radius:50%; background:#e0a44f; }
.auth-gate { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.86fr); gap:clamp(42px,7vw,96px); align-items:center; min-height:calc(100vh - 150px); padding:42px 0 68px; }
.auth-gate-copy h1 { font-size:clamp(48px,7vw,86px); }
.auth-gate-actions { max-width:360px; margin-top:30px; }
.auth-gate-actions .primary-button { border:0; }
.auth-gate-actions p { margin:12px 0 0; color:var(--muted); font-size:11px; }
.auth-gate-card { padding:25px; border:1px solid #324265; border-radius:14px; color:white; background:linear-gradient(145deg,#223362,#101827); box-shadow:14px 14px 0 #deded7; }
.auth-gate-card h2 { margin:20px 0 22px; max-width:360px; font-size:29px; line-height:1.02; letter-spacing:-.06em; }
.auth-gate-screen { overflow:hidden; margin-bottom:25px; border:1px solid #ffffff2b; border-radius:9px; background:#111827; box-shadow:0 18px 40px #07102055; }
.fake-window-bar { display:flex; align-items:center; gap:6px; height:27px; padding:0 10px; color:#8995ae; background:#1b2742; font-size:8px; }
.fake-window-bar i { width:6px; height:6px; border-radius:50%; background:#ef704e; }.fake-window-bar i:nth-child(2) { background:#d9eb73; }.fake-window-bar i:nth-child(3) { background:#65d4a7; }.fake-window-bar span { margin-left:7px; }
.fake-video { position:relative; display:grid; place-items:center; aspect-ratio:16/8; background:radial-gradient(circle at 70% 30%,#42589a,#182340 45%,#0e1525); }.fake-play { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:white; background:#3654d9; font-size:13px; }.fake-live { position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:5px; color:#fff; font-size:8px; font-weight:900; letter-spacing:.1em; }.fake-live i { width:6px; height:6px; border-radius:50%; background:#45e35c; }
.fake-viewers { display:flex; justify-content:space-between; padding:12px; color:#9eabc4; font-size:9px; }.fake-viewers b { color:#45e35c; }.fake-viewers strong { color:#e3e8f3; }
.auth-gate-live { display:flex; align-items:center; gap:8px; color:#d9eb73; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.auth-gate-live i { width:7px; height:7px; border-radius:50%; background:#45e35c; }
.auth-feature { display:flex; gap:14px; padding:17px 0; border-top:1px solid #ffffff22; }
.auth-feature strong { color:#d9eb73; font-size:12px; }
.auth-feature span { display:flex; flex-direction:column; gap:5px; }
.auth-feature b { font-size:14px; }
.auth-feature small { color:#c1c9d9; font-size:11px; }
.kicker { margin:0 0 14px; color:var(--orange); font-size:10px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0; max-width:670px; font-size:clamp(44px,6.7vw,79px); line-height:.96; letter-spacing:-.08em; }
.intro-text { max-width:515px; margin:25px 0 0; color:var(--muted); font-size:18px; line-height:1.5; }
.start-card { position:relative; padding:28px; border:1px solid #cfcfc8; border-radius:8px; background:var(--paper); box-shadow:11px 11px 0 #e3e2dc; }
.start-card-mark { position:absolute; top:24px; right:27px; color:var(--orange); font-size:34px; }
.start-card h2 { margin:26px 0 12px; font-size:24px; letter-spacing:-.05em; }
.start-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.groups-panel { margin:0 auto 20px; padding:24px 0 0; border-top:1px solid var(--line); }
.groups-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.groups-heading-copy { min-width:0; }
.groups-heading h2 { margin:0; font-size:25px; letter-spacing:-.06em; }
.section-description { max-width:520px; margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.group-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:14px; margin-top:20px; }
.group-item { min-width:0; }
.group-card { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:168px; overflow:hidden; padding:19px; border:1px solid #d9dce9; border-radius:15px; background:linear-gradient(145deg,#fffefa 0%,#f7f8ff 100%); box-shadow:0 10px 24px rgba(39,51,94,.07); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.group-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--blue),#8295ff); }
.group-card-1::before { background:linear-gradient(90deg,#ef704e,#f6ad68); }
.group-card-2::before { background:linear-gradient(90deg,#684de0,#a88cff); }
.group-card-3::before { background:linear-gradient(90deg,#269c89,#79d8a6); }
.group-card:hover { transform:translateY(-3px); border-color:#b9c2ee; box-shadow:0 16px 30px rgba(39,51,94,.13); }
.group-card-top { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.group-icon { flex:0 0 auto; display:grid; place-items:center; width:47px; height:47px; border-radius:13px 13px 13px 5px; color:white; background:linear-gradient(145deg,#5571ed,var(--blue)); box-shadow:4px 4px 0 #dfe4ff; font-size:14px; font-weight:950; letter-spacing:.04em; }
.group-card-1 .group-icon { background:linear-gradient(145deg,#f28a63,#d9573a); box-shadow:4px 4px 0 #ffe4d8; }
.group-card-2 .group-icon { background:linear-gradient(145deg,#8164ec,#5b43c8); box-shadow:4px 4px 0 #e8e1ff; }
.group-card-3 .group-icon { background:linear-gradient(145deg,#42b69e,#1c8b78); box-shadow:4px 4px 0 #daf5e9; }
.group-meta { min-width:0; flex:1; }
.group-item strong,.group-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-item strong { margin-top:5px; font-size:16px; letter-spacing:-.03em; }
.group-item small { margin-top:4px; color:var(--muted); font-size:11px; }
.group-privacy { display:flex; align-items:center; gap:5px; color:#727d9d; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.group-privacy i { width:6px; height:6px; border-radius:50%; background:#8b9cff; box-shadow:0 0 0 3px #e6eaff; }
.group-role { flex:0 0 auto; padding:5px 7px; border:1px solid #e1e4ef; border-radius:999px; color:#737b87; background:#fff; font-size:9px; font-weight:900; text-transform:uppercase; }
.group-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:13px; border-top:1px solid #e6e8f0; }
.group-card-detail { color:#8b92a0; font-size:10px; }
.invite-button { display:inline-flex; align-items:center; gap:5px; padding:8px 10px; border:0; border-radius:7px; color:white; background:var(--blue); font-size:10px; font-weight:850; box-shadow:0 4px 10px rgba(54,84,217,.2); }
.invite-button span { font-size:12px; }
.invite-button:hover { background:#263eb4; transform:translateY(-1px); }
.group-empty { color:var(--muted); font-size:13px; }
.group-empty-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; min-height:168px; padding:27px; border:1px dashed #c7cce1; border-radius:15px; background:linear-gradient(145deg,#fbfcff,#f3f5ff); text-align:left; }
.group-empty-icon { color:var(--blue); font-size:25px; line-height:1; }
.group-empty-card strong { margin-top:1px; color:var(--ink); font-size:16px; }
.group-empty-card > span:not(.group-empty-icon) { max-width:350px; color:var(--muted); font-size:12px; line-height:1.45; }
.group-empty-card .secondary-action-button { align-self:flex-start; min-height:36px; margin-top:8px; padding:8px 11px; }
.community-panel { margin:0 auto 20px; padding:24px 0 0; border-top:1px solid var(--line); }
.community-fullscreen .page-shell { width:100%; max-width:none; padding-right:0; padding-left:0; }
.community-fullscreen .topbar { padding:22px clamp(24px,4vw,64px) 18px; }
.community-fullscreen .community-panel { min-height:calc(100vh - 176px); margin:0; padding:0; border-top:0; }
.community-fullscreen .community-layout { min-height:calc(100vh - 176px); border-right:0; border-left:0; border-radius:0; box-shadow:none; }
.community-fullscreen .community-content { min-height:calc(100vh - 267px); }
.community-layout { display:grid; grid-template-columns:270px minmax(0,1fr); min-height:445px; overflow:hidden; border:1px solid #dfe2ec; border-radius:17px; background:#fffefa; box-shadow:0 14px 32px rgba(39,51,94,.08); }
.community-sidebar { display:flex; flex-direction:column; min-width:0; padding:25px 18px 17px; color:#dce3f5; background:linear-gradient(160deg,#202c4b 0%,#151e35 100%); }
.community-sidebar .kicker { margin-bottom:6px; color:#d9eb73; }
.community-sidebar-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:0 6px 13px; border-bottom:1px solid #ffffff1c; }
.community-sidebar-heading h2 { margin:0; color:white; font-size:24px; letter-spacing:-.06em; }
.community-add-button { display:grid; place-items:center; width:31px; height:31px; border:1px solid #ffffff2b; border-radius:9px; color:white; background:#ffffff12; font-size:21px; line-height:1; }
.community-add-button:hover { border-color:#d9eb73; color:#172039; background:#d9eb73; }
.community-sidebar-note { margin:16px 6px 14px; color:#a9b5cf; font-size:11px; line-height:1.5; }
.community-group-list { display:flex; flex-direction:column; gap:5px; overflow:auto; }
.community-group-item { display:flex; align-items:center; gap:10px; width:100%; min-width:0; padding:9px 8px; border:1px solid transparent; border-radius:10px; color:#c4cde0; background:transparent; text-align:left; transition:background .16s ease,color .16s ease; }
.community-group-item:hover { color:white; background:#ffffff10; }
.community-group-item.is-active { border-color:#ffffff1f; color:white; background:#ffffff16; box-shadow:inset 3px 0 #d9eb73; }
.community-group-avatar { flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; border-radius:11px 11px 11px 4px; color:white; background:linear-gradient(145deg,#5571ed,#3654d9); font-size:11px; font-weight:950; letter-spacing:.04em; }
.community-group-avatar-1 { background:linear-gradient(145deg,#f28a63,#d9573a); }
.community-group-avatar-2 { background:linear-gradient(145deg,#8164ec,#5b43c8); }
.community-group-avatar-3 { background:linear-gradient(145deg,#42b69e,#1c8b78); }
.community-group-copy { display:flex; flex-direction:column; min-width:0; flex:1; gap:3px; }
.community-group-copy strong { overflow:hidden; color:inherit; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.community-group-copy small { overflow:hidden; color:#8996b3; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.community-group-arrow { color:#7d8aa8; font-size:18px; line-height:1; }
.community-group-item.is-active .community-group-arrow { color:#d9eb73; }
.community-sidebar-footer { display:flex; align-items:center; gap:7px; margin-top:auto; padding:13px 6px 0; border-top:1px solid #ffffff1c; color:#8491ad; font-size:10px; }
.community-status-dot { width:7px; height:7px; border-radius:50%; background:#45e35c; box-shadow:0 0 0 3px #45e35c1c; }
.community-workspace { min-width:0; background:#f9fafc; }
.community-workspace-header { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:91px; padding:20px 24px; border-bottom:1px solid #e4e6ee; background:#fffefa; }
.community-breadcrumb { margin:0 0 8px; color:#9299a7; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.community-breadcrumb span { margin:0 4px; color:#c3c7d0; }
.community-workspace-header h2 { margin:0; font-size:25px; letter-spacing:-.06em; }
.community-workspace-header p:not(.community-breadcrumb) { margin:5px 0 0; color:var(--muted); font-size:11px; }
.workspace-header-actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; }.workspace-presence,.workspace-live-count { display:flex; align-items:center; gap:5px; color:#818a99; font-size:9px; white-space:nowrap; }.workspace-presence i,.workspace-live-count i { width:6px; height:6px; border-radius:50%; background:#45bf72; box-shadow:0 0 0 3px #45bf7222; }.workspace-live-count i { background:#ef704e; box-shadow:0 0 0 3px #ef704e22; }.workspace-presence strong,.workspace-live-count strong { color:var(--ink); font-size:11px; }
.community-workspace-header .secondary-action-button { flex:0 0 auto; min-height:37px; padding:8px 12px; }
.community-workspace-header .secondary-action-button:disabled { cursor:not-allowed; opacity:.45; }
.community-content { display:grid; grid-template-columns:192px minmax(0,1fr) 220px; min-height:354px; }
.room-sidebar { padding:20px 10px; border-right:1px solid #e4e6ee; background:#f1f3f8; }
.room-sidebar-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.room-sidebar-top .room-label { margin:0 9px; }
.room-create-button { display:grid; place-items:center; width:23px; height:23px; padding:0; border:1px solid #d3d9e7; border-radius:7px; color:#69748a; background:#fff; font-size:17px; line-height:1; }
.room-create-button:hover { color:var(--blue); border-color:#aebbf0; background:#eef1ff; }
.room-list { display:flex; flex-direction:column; gap:4px; }
.room-list-empty { padding:12px 9px; color:#9ca3b0; font-size:10px; line-height:1.35; }
.room-label { margin:0 9px 9px; color:#9299a7; font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.room-item { display:flex; align-items:center; gap:8px; width:100%; min-height:35px; padding:8px 9px; border:0; border-radius:8px; color:#7a8294; background:transparent; font-size:11px; font-weight:750; text-align:left; }
.room-item:hover { color:var(--ink); background:#ffffffa8; }
.room-item.is-active { color:var(--blue); background:#fff; box-shadow:0 3px 9px rgba(39,51,94,.08); }
.room-hash { color:#a4aab7; font-size:16px; font-weight:500; }
.room-item.is-active .room-hash { color:var(--blue); }
.room-item small { margin-left:auto; color:#9ca3b0; font-size:10px; }
.room-start-button { display:flex; align-items:center; gap:7px; width:100%; margin-top:20px; padding:10px 9px; border:1px dashed #bbc3df; border-radius:8px; color:var(--blue); background:#e9edff; font-size:10px; font-weight:850; text-align:left; }
.room-start-button:hover { border-color:var(--blue); background:#dfe5ff; }
.room-dialog-panel { width:min(500px,100%); }
.room-dialog-panel .auth-form select { width:100%; min-height:42px; padding:9px 10px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fbfcf9; font:inherit; }
.room-dialog-panel .auth-form select:focus { outline:2px solid rgba(54,84,217,.2); border-color:var(--blue); }
.community-room-main { min-width:0; padding:26px 27px; }
.room-main-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.room-main-heading .kicker { margin-bottom:7px; }
.room-main-heading h3 { margin:0; font-size:24px; letter-spacing:-.06em; }
.room-main-heading p { max-width:450px; margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.room-online-state { display:flex; align-items:center; gap:6px; padding-top:2px; color:#6b744d; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.room-online-state i { width:7px; height:7px; border-radius:50%; background:#45bf72; box-shadow:0 0 0 3px #45bf7222; }
.room-hero { display:flex; align-items:center; gap:14px; margin-top:27px; padding:18px; border:1px solid #dfe4ff; border-radius:13px; background:linear-gradient(135deg,#eef1ff 0%,#f8f9ff 100%); }
.room-hero-icon { display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:12px; color:white; background:var(--blue); font-size:20px; box-shadow:4px 4px 0 #d3dafe; }
.room-hero strong { display:block; color:var(--ink); font-size:13px; }
.room-hero p { margin:5px 0 0; color:#707a90; font-size:11px; line-height:1.4; }
.room-hero .primary-button { flex:0 0 auto; width:auto; margin:0 0 0 auto; padding:10px 12px; border:0; font-size:11px; }
.room-activity { margin-top:24px; padding:16px 0 0; border-top:1px solid #e4e6ee; }
.activity-heading { display:flex; justify-content:space-between; color:#7f8795; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.activity-heading small { color:#adb3bf; font-size:10px; font-weight:700; letter-spacing:normal; text-transform:none; }
.room-activity > p { margin:13px 0 0; color:#9299a7; font-size:11px; }
.group-live-list { display:flex; flex-direction:column; gap:8px; margin-top:13px; }
.group-live-item { display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid #e1e5ef; border-radius:9px; background:#fff; }
.group-live-pulse { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#45bf72; box-shadow:0 0 0 4px #45bf7222; }
.group-live-item > div { display:flex; flex-direction:column; min-width:0; flex:1; gap:3px; }
.group-live-item strong { overflow:hidden; color:var(--ink); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.group-live-item small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.group-live-item button { padding:7px 10px; border:0; border-radius:6px; color:white; background:var(--blue); font-size:10px; font-weight:850; }
.group-live-item button:hover { background:#263eb4; }
.group-chat { margin-top:25px; padding-top:18px; border-top:1px solid #e4e6ee; }
.group-chat-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.group-chat-heading .kicker { margin-bottom:5px; }.group-chat-heading h4 { margin:0; color:var(--ink); font-size:16px; letter-spacing:-.04em; }.group-chat-heading > span { color:#a0a7b3; font-size:9px; }
.group-chat-list { display:flex; flex-direction:column; gap:11px; max-height:170px; overflow:auto; margin-top:13px; padding-right:4px; }
.chat-message { display:flex; gap:8px; min-width:0; }.chat-avatar { display:grid; place-items:center; flex:0 0 auto; width:26px; height:26px; border-radius:8px 8px 8px 3px; color:white; background:var(--blue); font-size:8px; font-weight:900; }.chat-message > div { min-width:0; }.chat-message-meta { display:flex; align-items:baseline; gap:7px; }.chat-message-meta strong { color:var(--ink); font-size:10px; }.chat-message-meta small { color:#a0a7b3; font-size:9px; }.chat-message p { margin:3px 0 0; color:#727b8a; font-size:10px; line-height:1.35; overflow-wrap:anywhere; }
.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:80px; padding:12px; border:1px dashed #d5dbe8; border-radius:9px; color:#9ca3b0; font-size:10px; text-align:center; }.chat-empty span { color:var(--blue); font-size:18px; }.chat-empty strong { color:var(--ink); font-size:11px; }.chat-empty small { font-size:9px; }
.group-chat-form { display:flex; gap:7px; margin-top:12px; }.group-chat-form input { min-width:0; flex:1; padding:9px 10px; border:1px solid #dfe3ed; border-radius:8px; color:var(--ink); background:#fff; font-size:10px; }.group-chat-form input:focus { outline:2px solid #dce3ff; border-color:var(--blue); }.group-chat-form button { display:grid; place-items:center; flex:0 0 auto; width:32px; border:0; border-radius:8px; color:white; background:var(--blue); font-size:17px; }.group-chat-form button:disabled { opacity:.55; cursor:wait; }
.group-members-rail { display:flex; flex-direction:column; min-width:0; padding:20px 13px 14px; border-left:1px solid #e4e6ee; background:#f3f5f9; }.members-rail-heading { display:flex; justify-content:space-between; align-items:center; margin:0 4px 13px; color:#858e9e; font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }.members-rail-heading strong { display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; color:#69748a; background:#e1e5ee; font-size:9px; letter-spacing:normal; }.group-member-list { display:flex; flex-direction:column; gap:9px; overflow:auto; }.group-member { display:flex; align-items:center; gap:7px; min-width:0; }.member-avatar { position:relative; display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:9px 9px 9px 3px; color:white; background:linear-gradient(145deg,#5571ed,var(--blue)); font-size:8px; font-weight:950; }.member-avatar-1 { background:linear-gradient(145deg,#ef8a62,#d9573a); }.member-avatar-2 { background:linear-gradient(145deg,#8164ec,#5b43c8); }.member-avatar-3 { background:linear-gradient(145deg,#42b69e,#1c8b78); }.group-member > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }.group-member strong,.group-member small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.group-member strong { color:var(--ink); font-size:9px; }.group-member small { color:#969eac; font-size:8px; }.group-member > i { width:6px; height:6px; border-radius:50%; background:#45bf72; box-shadow:0 0 0 3px #45bf7222; }.members-empty { padding:18px 5px; color:#9ca3b0; font-size:9px; line-height:1.4; text-align:center; }.members-rail-footer { display:flex; align-items:center; gap:6px; margin-top:auto; padding:12px 4px 0; border-top:1px solid #e1e4ec; color:#929aaa; font-size:8px; }
.community-empty { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:3px; padding:16px 9px; color:#9ca9c4; font-size:11px; line-height:1.4; }
.community-empty strong { color:#f4f7ff; font-size:12px; }
.community-empty .group-empty-icon { color:#d9eb73; }
.community-empty .secondary-action-button { min-height:34px; margin-top:5px; padding:7px 9px; color:#172039; background:#d9eb73; }
.live-channel-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:11px; margin-top:17px; }
.live-channel-card { display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--line); border-radius:7px; background:var(--paper); }
.live-channel-card h3 { margin:0; font-size:18px; letter-spacing:-.04em; }
.live-channel-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.live-channel-meta { display:flex; align-items:center; gap:7px; color:#6b744d; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.live-channel-actions { display:flex; gap:8px; }
.live-channel-actions button { flex:1; min-height:36px; padding:8px; border:1px solid var(--line); border-radius:5px; background:#f1f2ee; color:var(--ink); font-size:11px; font-weight:800; }
.live-channel-actions button:first-child { color:white; border-color:var(--blue); background:var(--blue); }
.live-empty-state { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-height:124px; padding:24px; border:1px dashed #cfd5e5; border-radius:12px; color:var(--muted); background:#fafbfe; }
.live-empty-state strong { color:var(--ink); font-size:14px; }
.live-empty-state span:last-child { font-size:11px; }
.live-empty-icon { color:var(--blue); font-size:27px; line-height:1; }
.tv-stream-settings { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px; padding:14px; border:1px solid var(--line); border-radius:7px; background:#f8f8f5; }
.primary-button,.secondary-action-button,.stop-button,.copy-button { display:flex; justify-content:space-between; align-items:center; min-height:44px; border-radius:5px; font-weight:800; }
.primary-button { width:100%; margin-top:25px; padding:11px 14px; color:white; background:var(--blue); }
.primary-button:hover { background:#263eb4; }
.start-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:25px; }
.start-actions .primary-button,.start-actions .secondary-action-button { width:100%; margin-top:0; padding:11px 14px; }
.secondary-action-button { justify-content:center; gap:9px; padding:10px 14px; border:1px solid var(--line); color:var(--ink); background:#f1f2ee; }
.secondary-action-button:hover { border-color:var(--blue); color:var(--blue); background:#e9edff; }
.audio-toggle { display:flex; align-items:flex-start; gap:10px; margin-top:18px; padding:11px 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#f8f8f5; cursor:pointer; }
.audio-toggle input { width:16px; height:16px; margin:1px 0 0; accent-color:var(--blue); }
.audio-toggle span { display:flex; flex-direction:column; gap:3px; }
.audio-toggle strong { font-size:12px; }
.audio-toggle small { color:var(--muted); font-size:10px; line-height:1.35; }
.small-status { margin-top:16px!important; color:#9b9e9d!important; font-size:11px!important; }
.hidden { display:none!important; }
.stream-view { padding-top:45px; }
.stream-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:25px; }
.stream-toolbar h1 { font-size:clamp(36px,5vw,58px); }
.stop-button { padding:10px 14px; color:#b84c36; border-color:#e5b7ab; background:#fff0eb; }
.stop-button:hover { color:white; border-color:var(--orange); background:var(--orange); }
.viewer-toolbar-actions { display:flex; align-items:center; gap:9px; }
.viewer-quality-control { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.viewer-quality-control select { padding:8px 9px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#f1f2ee; font-size:11px; font-weight:800; letter-spacing:normal; text-transform:none; }
.volume-control { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.volume-control input { width:75px; accent-color:var(--blue); }
.host-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:17px; }
.preview-frame,.viewer-frame { position:relative; overflow:hidden; min-height:500px; border:1px solid #c9cdd7; border-radius:8px; background:#192236; }
.preview-frame video,.viewer-frame video { display:block; width:100%; height:100%; min-height:500px; object-fit:contain; background:#192236; }
.live-badge { position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:4px; color:white; background:rgba(21,27,45,.78); font-size:11px; font-weight:800; text-transform:uppercase; }
.live-badge span { width:7px; height:7px; border-radius:50%; background:#ff806d; }
.share-panel { align-self:start; padding:25px; border:1px solid #cfcfc8; border-radius:8px; background:var(--paper); }
.share-panel h2 { margin:0 0 12px; font-size:25px; letter-spacing:-.06em; }
.share-panel p { color:var(--muted); font-size:13px; line-height:1.5; }
.link-row { display:flex; gap:7px; margin:22px 0; }
.link-row input { min-width:0; width:100%; padding:10px; border:1px solid var(--line); border-radius:4px; color:var(--muted); background:#f8f8f5; font-size:11px; }
.copy-button { justify-content:center; padding:10px 12px; color:white; background:var(--blue); }
.quality-control { display:flex; flex-direction:column; gap:7px; margin:2px 0 0; color:var(--muted); font-size:11px; font-weight:800; }
.quality-control select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#f8f8f5; font-size:12px; font-weight:700; }
.quality-control select:focus { outline:2px solid rgba(54,84,217,.2); border-color:var(--blue); }
.quality-status { margin:8px 0 0!important; color:#9b9e9d!important; font-size:10px!important; }
.host-audio-control { display:flex; align-items:flex-start; gap:10px; margin-top:18px; padding:11px 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#f8f8f5; cursor:pointer; }
.host-audio-control input { width:16px; height:16px; margin:1px 0 0; accent-color:var(--blue); }
.host-audio-control span { display:flex; flex-direction:column; gap:3px; }
.host-audio-control strong { font-size:12px; }
.host-audio-control small { color:var(--muted); font-size:10px; line-height:1.35; }
.viewer-count { display:flex; align-items:center; gap:8px; padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.count-dot { width:7px; height:7px; border-radius:50%; background:#70a445; }
.connection-status { padding:7px 10px; border-radius:4px; color:#6b744d; background:#e3ebc5; font-size:11px; font-weight:800; }
.viewer-frame { min-height:calc(100vh - 245px); display:grid; place-items:center; }
.viewer-frame video { min-height:calc(100vh - 245px); }
.viewer-frame:fullscreen { min-height:100vh; border:0; border-radius:0; }
.viewer-frame:fullscreen video { min-height:100vh; }
.player-timeline { position:absolute; right:16px; bottom:57px; left:16px; z-index:4; display:flex; align-items:center; gap:9px; color:#dce3f5; font-size:9px; font-weight:800; text-shadow:0 1px 3px #080b12; }
.player-timeline input { min-width:0; flex:1; height:4px; accent-color:#d9eb73; cursor:pointer; }
.player-timeline input:disabled { cursor:not-allowed; opacity:.45; }
.player-timeline span { flex:0 0 auto; min-width:42px; font-size:8px; letter-spacing:.04em; text-align:center; }
.player-controls { position:absolute; right:0; bottom:0; left:0; z-index:3; display:flex; align-items:center; gap:10px; min-height:62px; padding:18px 18px 13px; color:white; background:linear-gradient(transparent,rgba(5,8,15,.92)); }
.player-button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:5px; color:white; background:rgba(10,15,25,.7); font-size:15px; font-weight:900; }
.player-button:hover { background:var(--blue); }
.player-button:disabled { opacity:.55; cursor:not-allowed; }
.player-disabled { width:auto; padding:0 9px; font-size:11px; }
.player-live { display:flex; align-items:center; gap:6px; margin-left:2px; padding:0; border:0; color:white; background:transparent; font-size:11px; font-weight:900; letter-spacing:.08em; }
.player-live:hover { color:#d9eb73; }
.player-live i { width:7px; height:7px; border-radius:50%; background:#45e35c; box-shadow:0 0 0 3px rgba(69,227,92,.15); }
.player-spacer { flex:1; }
.player-settings { position:absolute; right:18px; bottom:65px; z-index:4; display:flex; flex-direction:column; gap:14px; min-width:220px; padding:15px; border:1px solid #465064; border-radius:7px; color:white; background:rgba(17,24,39,.96); box-shadow:0 14px 40px rgba(0,0,0,.3); }
.player-settings .viewer-quality-control { color:#cbd3e3; flex-direction:column; align-items:stretch; gap:7px; }
.player-settings .viewer-quality-control select { color:var(--ink); background:#f1f2ee; }
.player-settings .volume-control { color:#cbd3e3; justify-content:space-between; }
.viewer-empty { position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; color:white; text-align:center; }
.viewer-empty p { margin:0; color:#aeb7c9; font-size:13px; }
.empty-icon { color:#d9eb73; font-size:40px; }
.play-button { position:absolute; z-index:2; padding:12px 16px; border:0; border-radius:5px; color:white; background:var(--blue); font-weight:800; }
.screen-picker { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:24px; background:rgba(21,27,45,.48); }
.screen-picker-panel { width:min(780px,100%); max-height:90vh; overflow:auto; padding:26px; border:1px solid #cfd5e0; border-radius:9px; background:var(--paper); box-shadow:0 25px 90px rgba(21,27,45,.28); }
.screen-picker-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.screen-picker-heading h2 { margin:0; font-size:26px; letter-spacing:-.06em; }
.close-picker { width:34px; height:34px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:#f1f2ee; font-size:22px; line-height:1; }
.screen-picker-help { margin:10px 0 20px; color:var(--muted); font-size:13px; line-height:1.5; }
.screen-source-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:11px; }
.screen-source { display:flex; flex-direction:column; gap:6px; overflow:hidden; padding:8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fbfcf9; text-align:left; }
.screen-source:hover { border-color:var(--blue); box-shadow:0 0 0 3px rgba(54,84,217,.1); }
.screen-source img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:4px; background:#d9dde5; }
.screen-source-kind { color:var(--orange); font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.screen-source strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.quality-picker-panel { width:min(570px,100%); }
.quality-choice-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quality-choice { display:flex; flex-direction:column; gap:5px; padding:16px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fbfcf9; text-align:left; }
.quality-choice:hover,.quality-choice:focus { border-color:var(--blue); background:#e9edff; box-shadow:0 0 0 3px rgba(54,84,217,.1); outline:0; }
.quality-choice strong { font-size:14px; }
.quality-choice small { color:var(--muted); font-size:11px; line-height:1.4; }
body.popup-view { overflow:hidden; background:#111827; }
body.popup-view .page-shell { width:100%; min-height:100vh; padding:0; }
body.popup-view .topbar { display:none; }
body.popup-view .stream-view { padding-top:0; }
body.popup-view .stream-toolbar { display:none; }
body.popup-view .viewer-frame { min-height:100vh; border:0; border-radius:0; }
body.popup-view .viewer-frame video { min-height:100vh; }
body.popup-view #playerPopoutButton,body.popup-view #playerShareButton { display:none; }
.toast-region { position:fixed; right:24px; bottom:24px; z-index:30; max-width:min(360px,calc(100vw - 32px)); padding:12px 15px; border:1px solid #c9d1f5; border-radius:9px; color:#26376f; background:#eef1ff; box-shadow:0 14px 35px rgba(21,27,45,.18); font-size:12px; font-weight:750; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .18s ease,transform .18s ease; }
.toast-region.is-visible { opacity:1; transform:translateY(0); }
.toast-region[data-tone="success"] { border-color:#b7e1c8; color:#216541; background:#edfaf1; }
.toast-region[data-tone="error"] { border-color:#f0c0b5; color:#963e2f; background:#fff0eb; }
@media(max-width:800px) { .auth-gate,.home-view,.host-layout,.quality-choice-list,.tv-stream-settings { grid-template-columns:1fr; } .auth-gate,.home-view { align-content:center; min-height:auto; padding:70px 0; } .start-actions { grid-template-columns:1fr; } .stream-toolbar { align-items:flex-start; flex-direction:column; } .stream-toolbar button { width:100%; justify-content:center; } .viewer-toolbar-actions { width:100%; align-items:stretch; flex-direction:column; } .viewer-toolbar-actions .connection-status { text-align:center; } .preview-frame,.viewer-frame,.preview-frame video,.viewer-frame video { min-height:300px; } .viewer-frame,.viewer-frame video { min-height:calc(100vh - 300px); } }
@media(max-width:800px) { .topbar-main { align-items:flex-start; flex-wrap:wrap; gap:15px; } .main-nav { width:100%; margin:16px 0 0; } .nav-button { gap:7px; padding:8px 9px; } .nav-copy small { display:none; } .community-layout { grid-template-columns:1fr; } .community-sidebar { min-height:250px; } .community-sidebar-footer { margin-top:16px; } .community-content { grid-template-columns:1fr; } .room-sidebar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:13px 14px; border-right:0; border-bottom:1px solid #e4e6ee; } .room-sidebar-top { width:100%; margin-bottom:0; } .room-sidebar-top .room-label { width:auto; margin:0 5px 2px; } .room-item { width:auto; } .room-start-button { width:auto; margin:0 0 0 auto; } .community-workspace-header { align-items:flex-start; flex-direction:column; padding:18px; } .workspace-header-actions { width:100%; justify-content:space-between; }.community-workspace-header .secondary-action-button { width:auto; } .community-room-main { padding:22px 18px; } .room-main-heading { flex-direction:column; } .room-hero { align-items:flex-start; flex-wrap:wrap; } .room-hero .primary-button { width:100%; margin:3px 0 0; } .group-members-rail { min-height:145px; border-top:1px solid #e4e6ee; border-left:0; } }
@media(max-width:800px) { .home-view { padding-top:28px; } .dashboard-welcome { align-items:stretch; flex-direction:column; gap:22px; } .dashboard-welcome h1 { font-size:clamp(37px,11vw,55px); } .dashboard-welcome .intro-text { font-size:14px; } .dashboard-welcome-actions { flex-basis:auto; } .dashboard-stats { grid-template-columns:1fr; gap:8px; margin-top:24px; } .dashboard-stat { min-height:63px; } .dashboard-grid,.dashboard-bottom-grid { grid-template-columns:1fr; } .dashboard-card { padding:17px; } .dashboard-quick-card { align-items:stretch; flex-direction:column; } .quick-actions { grid-template-columns:1fr 1fr 1fr; min-width:0; } .quick-action { min-height:82px; } }
@media(max-width:470px) { .page-shell { padding-right:16px; padding-left:16px; } .brand { font-size:25px; }.brand-mark { width:47px; height:47px; font-size:23px; } .account-area { gap:6px; } .beta-label { display:none; } .nav-button { justify-content:center; min-height:48px; padding:7px 4px; }.nav-icon { width:26px; height:26px; }.nav-copy strong { font-size:10px; }.dashboard-stat .stat-caption { display:none; }.home-live-thumb { width:88px; height:56px; }.home-live-copy p { display:none; }.quick-actions { grid-template-columns:1fr; }.quick-action { min-height:56px; flex-direction:row; align-items:center; }.quick-action small { margin-left:auto; } }
.group-member > i { background:#c1c7d2; box-shadow:none; }.group-member > i.is-online { background:#45bf72; box-shadow:0 0 0 3px #45bf7222; }
@media(max-width:800px) { #authDialog .auth-dialog-panel { grid-template-columns:1fr; width:min(470px,100%); max-height:calc(100vh - 24px); overflow:auto; }.auth-dialog-showcase { min-height:220px; padding:24px 25px 20px; }.auth-showcase-live { margin-top:27px; }.auth-dialog-showcase h3 { margin-top:11px; font-size:29px; }.auth-dialog-showcase > p { max-width:350px; margin-top:10px; }.auth-showcase-points { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding-top:18px; }.auth-showcase-points span { align-items:flex-start; flex-direction:column; gap:5px; }.auth-showcase-points strong { font-size:9px; line-height:1.2; }.auth-dialog-form { padding:27px 25px 22px; }.auth-dialog-form .screen-picker-help { margin-bottom:23px; } }
@media(max-width:470px) { #authDialog .auth-dialog-panel { border-radius:14px; }.auth-dialog-showcase { min-height:205px; padding:20px 20px 17px; }.auth-dialog-brand { font-size:16px; }.auth-showcase-live { margin-top:22px; }.auth-dialog-showcase h3 { font-size:27px; }.auth-dialog-showcase > p { font-size:10px; }.auth-showcase-points b { width:20px; height:20px; }.auth-showcase-points strong { font-size:8px; }.auth-dialog-form { padding:23px 20px 18px; }.auth-dialog-form .screen-picker-heading h2 { font-size:26px; }.auth-dialog-footnote { margin-top:20px; font-size:8px; } }