@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap";.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:62px;background:var(--color-navbar-bg);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.navbar-left{display:flex;align-items:center;gap:14px}.logo{display:flex;align-items:center;gap:8px;font-size:18px;font-family:var(--font-display);font-weight:700;letter-spacing:.2px;color:var(--color-text)}.logo-icon{color:var(--color-accent);font-size:22px}.logo:hover{text-decoration:none}.following-link,.browse-link{font-size:12px;color:var(--color-text-soft);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:7px 10px;border-radius:999px;border:1px solid transparent}.following-link:hover,.browse-link:hover{color:var(--color-text);background:var(--color-hover-tint);text-decoration:none}.following-link.active,.browse-link.active{color:var(--color-text);border-color:var(--color-border-strong);background:var(--color-hover-tint-medium)}.navbar-center{flex:1;max-width:520px;margin:0 20px}.search-form{display:flex;gap:8px;align-items:center;position:relative}.search-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.search-input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg-soft);color:var(--color-text);font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-focus-ring)}.search-input::placeholder{color:var(--color-input-placeholder)}.clear-search-button{border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-soft);border-radius:8px;font-size:12px;font-weight:700;padding:8px 10px}.clear-search-button:hover{color:var(--color-text);border-color:var(--color-border-strong);background:var(--color-bg-card-hover)}.search-button{width:38px;height:38px;padding:0;background:linear-gradient(145deg,var(--color-btn-gradient-from),var(--color-btn-gradient-to));border:none;border-radius:10px;color:var(--color-btn-text);cursor:pointer;transition:transform .2s ease,filter .2s ease;display:inline-flex;align-items:center;justify-content:center}.search-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.search-shortcut{color:var(--color-shortcut-text);font-size:11px;border:1px solid var(--color-border);border-radius:6px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}.navbar-right{display:flex;align-items:center;gap:16px}.settings-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:var(--color-text-soft);transition:color .2s ease,background .2s ease,transform .3s ease}.settings-link:hover{color:var(--color-text);background:var(--color-hover-tint);transform:rotate(45deg);text-decoration:none}.settings-link.active{color:var(--color-text);background:var(--color-hover-tint-medium)}.user-menu{display:flex;align-items:center;gap:12px}.user-name{font-weight:600;color:var(--color-text-soft)}.login-button{padding:8px 14px;background:linear-gradient(145deg,var(--color-login-gradient-from),var(--color-login-gradient-to));border:none;border-radius:10px;color:#fff;font-weight:700;cursor:pointer;transition:transform .2s ease,filter .2s ease;text-decoration:none;display:inline-flex;align-items:center}.login-button:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none}.login-short{display:none}.logout-button{padding:6px 12px;background:transparent;border:1px solid var(--color-border);border-radius:8px;color:var(--color-text-soft);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s ease}.logout-button:hover{background:var(--color-bg-card-hover);color:var(--color-text);border-color:var(--color-border-strong)}@media (max-width: 900px){.navbar{padding:0 8px;height:54px;gap:0}.navbar-left{flex-shrink:0}.navbar-center{flex:1;min-width:0;max-width:none;margin:0 8px}.search-input{padding:7px 9px;font-size:13px;min-width:0;border-radius:8px}.search-button{width:34px;height:34px;flex-shrink:0;border-radius:8px}.clear-search-button{padding:6px 8px;border-radius:7px}.search-shortcut,.logo-text,.following-link,.browse-link,.user-name{display:none}.navbar-right{flex-shrink:0}.login-button{padding:6px 9px;font-size:12px;white-space:nowrap;border-radius:8px}.login-button .login-full{display:none}.login-button .login-short{display:inline}.logout-button{padding:4px 8px;font-size:12px}}.pin-button{border:1px solid var(--color-border);background:var(--color-pin-bg);color:var(--color-text-soft);border-radius:6px;font-size:11px;font-weight:700;padding:4px 8px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:border-color .2s ease,background .2s ease,color .2s ease;flex-shrink:0}.pin-button:hover{border-color:var(--color-border-strong);color:var(--color-text);background:var(--color-pin-bg-hover)}.pin-button.pinned{border-color:var(--color-pin-pinned-border);color:var(--color-pin-pinned-text);background:var(--color-pin-pinned-bg)}.pin-button.icon-only{padding:4px;width:24px;height:24px;justify-content:center;border-radius:4px}.pin-button.icon-only svg{width:14px;height:14px}.pin-button.pin-button-search{margin-left:auto;font-size:12px}.sidebar{width:240px;background:var(--color-navbar-bg);border-right:1px solid var(--color-border);overflow-y:auto;flex-shrink:0;transition:width .18s ease}.sidebar.sidebar-collapsed{width:38px}.sidebar-section{border-bottom:1px solid var(--color-border);padding:8px 0}.sidebar-subheader{padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--color-accent)}.sidebar-header{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--color-border)}.sidebar-header-right{margin-left:auto;display:flex;align-items:center;gap:8px}.sidebar-header h3{font-size:14px;font-weight:600;color:var(--color-text-soft);text-transform:uppercase}.live-count{font-size:12px;color:var(--color-accent);font-weight:600}.sidebar-toggle-btn{width:24px;height:24px;border:1px solid var(--color-border);background:var(--color-bg-soft);color:var(--color-text);border-radius:6px;font-size:12px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}.sidebar-toggle-btn:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-strong)}.sidebar.sidebar-collapsed .sidebar-header{justify-content:center;padding:10px 6px;border-bottom:0}.sidebar.sidebar-collapsed .sidebar-header-right{margin-left:0}.sidebar-message{padding:20px;text-align:center;color:var(--color-text-soft);font-size:14px}.follows-list{padding:8px 0}.follow-item{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 16px;color:var(--color-text);transition:background .2s ease;position:relative}.follow-item:hover{background:var(--color-hover-tint);text-decoration:none}.follow-item.active{background:var(--color-hover-tint-active)}.follow-item.offline{opacity:.75}.follow-item.offline:hover{opacity:.85}.follow-avatar{width:32px;height:32px;flex-shrink:0}.avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}.avatar-fallback{width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,var(--color-avatar-from),var(--color-avatar-to));display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}.follow-info{flex:1;min-width:0}.follow-name{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.follow-game{font-size:12px;color:var(--color-text-soft);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.offline-label{font-size:12px;color:var(--color-text-soft);margin-top:1px}.sidebar-viewer-count{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--color-text-soft);flex-shrink:0}.sidebar-pin-btn{margin-left:4px;opacity:0;transform:scale(.9);transition:opacity .2s ease,transform .2s ease}.follow-item:hover .sidebar-pin-btn,.follow-item:focus-within .sidebar-pin-btn,.sidebar-pin-btn.pinned{opacity:1;transform:scale(1)}.follow-item .sidebar-pin-btn.pinned{opacity:1;transform:scale(1)}.sidebar-viewer-count .sidebar-live-dot,.follow-item .sidebar-live-dot{width:6px;height:6px;background:var(--color-live-dot);border-radius:50%;opacity:.9;animation:none!important;transition:none!important}.show-more-buttons{display:flex;flex-direction:column;padding:4px 16px 8px;gap:2px}.show-more-btn{background:none;border:none;color:var(--color-link);font-size:12px;font-weight:600;cursor:pointer;padding:6px 0;text-align:left}.show-more-btn:hover{color:var(--color-show-more-hover)}.sidebar-tooltip{position:fixed;transform:translateY(-50%);background:var(--color-navbar-bg);border:1px solid var(--color-border-strong);border-radius:8px;padding:8px 12px;min-width:200px;max-width:320px;z-index:10000;pointer-events:none;box-shadow:0 4px 12px #0000004d}.sidebar-tooltip:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--color-border-strong)}.sidebar-tooltip:after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--color-navbar-bg)}.sidebar-tooltip-title{font-size:13px;font-weight:600;color:var(--color-text);line-height:1.4;word-wrap:break-word;overflow-wrap:break-word}.sidebar-tooltip-game{font-size:12px;color:var(--color-text-soft);margin-top:4px}@media (max-width: 900px){.sidebar{display:none}}@media (pointer: coarse) and (max-height: 550px){.sidebar{display:none}}.mobile-tab-bar{display:none}@media (max-width: 900px){.mobile-tab-bar{position:fixed;left:0;right:0;bottom:0;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:var(--color-navbar-bg);border-top:1px solid var(--color-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:120}.mobile-tab-link{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;color:var(--color-text-soft);font-size:11px;font-weight:700;letter-spacing:.3px;text-decoration:none;position:relative}.mobile-tab-link:hover{text-decoration:none;color:var(--color-text)}.mobile-tab-link.active{color:var(--color-text);background:var(--color-hover-tint-subtle)}.mobile-tab-link.active:before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:999px;background:var(--color-accent)}}.toast-container{position:fixed;top:70px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 24px))}.toast{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;color:#f7fbff;animation:toast-slide-in .25s ease-out;box-shadow:var(--shadow-soft)}.toast-info{background:var(--color-bg-card);border:1px solid var(--color-border-strong)}.toast-success{background:#143327;border:1px solid #296a4d}.toast-error{background:#3c1e26;border:1px solid #7d3e4f}.toast-message{flex:1}.toast-close{background:none;border:none;color:#edf2f8b3;font-size:18px;cursor:pointer;padding:0 2px;line-height:1}.toast-close:hover{color:#fff}@keyframes toast-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 900px){.toast-container{left:12px;right:12px;top:auto;bottom:calc(66px + env(safe-area-inset-bottom));max-width:none}}.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.app-container{display:flex;flex:1;overflow:hidden;min-height:0}.main-content{flex:1;min-width:0;overflow-y:auto;padding:22px;background:linear-gradient(180deg,var(--color-content-overlay-from),var(--color-content-overlay-to))}.main-content-watch{overflow:hidden;padding:0}@media (max-width: 900px){.app-container{display:flex;flex-direction:column}.main-content{padding:16px 14px;padding-bottom:calc(66px + env(safe-area-inset-bottom))}.main-content-watch{padding:0;overflow:hidden;flex:1;min-height:0}}.app-watch-active .mobile-tab-bar{display:none!important}@media (max-width: 900px){.app-watch-active .sidebar{display:none!important}}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px;color:var(--color-text-soft)}.route-loading{min-height:40vh;display:grid;place-items:center;color:var(--color-text-soft);font-weight:600}.spinner{width:44px;height:44px;border:3px solid var(--color-spinner-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .9s linear infinite;box-shadow:0 0 0 4px var(--color-spinner-glow)}@keyframes spin{to{transform:rotate(360deg)}}:root,[data-theme=ocean]{--font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;--font-display: "Sora", "Plus Jakarta Sans", "Segoe UI", sans-serif;--color-bg: #0a0f14;--color-bg-elevated: #121a22;--color-bg-card: #16222d;--color-bg-card-hover: #1c2c39;--color-bg-soft: #111921;--color-text: #edf2f8;--color-text-soft: #9fb2c7;--color-border: #243648;--color-border-strong: #31506a;--color-accent: #3fb6ff;--color-accent-strong: #2f8fd0;--color-link: #71cbff;--color-danger: #ff5f5f;--color-success: #4adf86;--shadow-soft: 0 8px 30px rgba(0, 0, 0, .25);--color-input-bg: #0f171f;--color-input-placeholder: #7f95ad;--color-skeleton: #213241;--color-scrollbar-track: #101820;--color-scrollbar-thumb: #2a3f54;--color-scrollbar-hover: #395773;--color-navbar-bg: rgba(18, 26, 34, .82);--color-card-gradient-from: #15212c;--color-card-gradient-to: #13202a;--color-card-hover-from: #192835;--color-card-hover-to: #172633;--color-chip-bg: rgba(63, 182, 255, .12);--color-chip-text: #c8e9ff;--color-chip-border: var(--color-border-strong);--color-live-badge: #ff5f5f;--color-game-text: #8dd5ff;--color-stat-text: #d0efff;--color-avatar-from: #2f8fd0;--color-avatar-to: #1f6c9c;--color-pin-border: #4a4a55;--color-pin-text: #adadb8;--color-pin-active: #bf94ff;--color-pin-hover-text: #efeff1;--color-hover-tint: rgba(63, 182, 255, .08);--color-hover-tint-active: rgba(63, 182, 255, .16);--color-hover-tint-medium: rgba(63, 182, 255, .12);--color-hover-tint-subtle: rgba(63, 182, 255, .1);--color-link-hover: #9ddbff;--color-selection-bg: rgba(63, 182, 255, .28);--color-focus-ring: rgba(63, 182, 255, .2);--color-show-more-hover: #d0efff;--color-live-dot: #ff8d8d;--color-viewer-text: #b8cadb;--color-error-text: #ff9ba4;--color-live-pill-text: #ffd7d7;--color-live-badge-text: #ffd2d2;--color-btn-gradient-from: #2f8fd0;--color-btn-gradient-to: #2471a5;--color-btn-text: #f4fbff;--color-login-gradient-from: #2fa3d8;--color-login-gradient-to: #2484af;--color-shortcut-text: #7292b0;--color-placeholder-from: #0d151d;--color-placeholder-to: #0f1820;--color-content-overlay-from: rgba(12, 19, 26, .6);--color-content-overlay-to: rgba(12, 19, 26, .25);--color-spinner-border: #2a3f54;--color-spinner-glow: rgba(63, 182, 255, .09);--color-control-hover: rgba(113, 203, 255, .18);--color-control-border: rgba(113, 203, 255, .45);--color-control-border-subtle: rgba(113, 203, 255, .35);--color-control-border-focus: rgba(113, 203, 255, .85);--color-dvr-thumb: #3fb6ff;--color-rewind-hover: #8fd6ff;--color-pin-bg: rgba(30, 45, 59, .42);--color-pin-bg-hover: rgba(39, 58, 75, .56);--color-pin-pinned-border: #6fcfff;--color-pin-pinned-text: #d4efff;--color-pin-pinned-bg: rgba(63, 182, 255, .18);--color-option-active-bg: rgba(63, 182, 255, .06);--bg-gradient: radial-gradient(1200px 540px at 80% -10%, rgba(63, 182, 255, .17), transparent 65%), radial-gradient(1100px 560px at -5% 0%, rgba(74, 223, 134, .11), transparent 60%), var(--color-bg)}[data-theme=gray]{--color-bg: #111111;--color-bg-elevated: #1a1a1a;--color-bg-card: #212121;--color-bg-card-hover: #2a2a2a;--color-bg-soft: #181818;--color-text: #e8e8e8;--color-text-soft: #a0a0a0;--color-border: #2e2e2e;--color-border-strong: #444444;--color-accent: #3fb6ff;--color-accent-strong: #2f8fd0;--color-link: #71cbff;--color-danger: #ff5f5f;--color-success: #4adf86;--shadow-soft: 0 8px 30px rgba(0, 0, 0, .35);--color-input-bg: #151515;--color-input-placeholder: #777777;--color-skeleton: #2a2a2a;--color-scrollbar-track: #141414;--color-scrollbar-thumb: #3a3a3a;--color-scrollbar-hover: #505050;--color-navbar-bg: rgba(22, 22, 22, .85);--color-card-gradient-from: #1e1e1e;--color-card-gradient-to: #1a1a1a;--color-card-hover-from: #272727;--color-card-hover-to: #232323;--color-chip-bg: rgba(255, 255, 255, .07);--color-chip-text: #d0d0d0;--color-chip-border: var(--color-border-strong);--color-live-badge: #ff5f5f;--color-game-text: #7ec8f0;--color-stat-text: #d0d0d0;--color-avatar-from: #555555;--color-avatar-to: #3d3d3d;--color-pin-border: #4a4a4a;--color-pin-text: #a0a0a0;--color-pin-active: #bf94ff;--color-pin-hover-text: #e0e0e0;--color-hover-tint: rgba(255, 255, 255, .06);--color-hover-tint-active: rgba(255, 255, 255, .12);--color-hover-tint-medium: rgba(255, 255, 255, .09);--color-hover-tint-subtle: rgba(255, 255, 255, .07);--color-link-hover: #b0d8f0;--color-selection-bg: rgba(255, 255, 255, .15);--color-focus-ring: rgba(63, 182, 255, .2);--color-show-more-hover: #e0e0e0;--color-live-dot: #ff8d8d;--color-viewer-text: #b0b0b0;--color-error-text: #ff9ba4;--color-live-pill-text: #ffd7d7;--color-live-badge-text: #ffd2d2;--color-btn-gradient-from: #505050;--color-btn-gradient-to: #3d3d3d;--color-btn-text: #f0f0f0;--color-login-gradient-from: #555555;--color-login-gradient-to: #404040;--color-shortcut-text: #888888;--color-placeholder-from: #141414;--color-placeholder-to: #181818;--color-content-overlay-from: rgba(17, 17, 17, .6);--color-content-overlay-to: rgba(17, 17, 17, .25);--color-spinner-border: #3a3a3a;--color-spinner-glow: rgba(255, 255, 255, .06);--color-control-hover: rgba(255, 255, 255, .12);--color-control-border: rgba(255, 255, 255, .25);--color-control-border-subtle: rgba(255, 255, 255, .18);--color-control-border-focus: rgba(255, 255, 255, .5);--color-dvr-thumb: #3fb6ff;--color-rewind-hover: #b0d8f0;--color-pin-bg: rgba(50, 50, 50, .5);--color-pin-bg-hover: rgba(65, 65, 65, .6);--color-pin-pinned-border: #bf94ff;--color-pin-pinned-text: #e0d0ff;--color-pin-pinned-bg: rgba(191, 148, 255, .15);--color-option-active-bg: rgba(255, 255, 255, .04);--bg-gradient: radial-gradient(1200px 540px at 80% -10%, rgba(255, 255, 255, .03), transparent 65%), var(--color-bg)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font-body);background:var(--bg-gradient);color:var(--color-text);line-height:1.45;text-rendering:optimizeLegibility}a{color:var(--color-link);text-decoration:none;transition:color .2s ease}a:hover{color:var(--color-link-hover);text-decoration:none}button,input,select{font-family:inherit}button{cursor:pointer}input,select,button{accent-color:var(--color-accent)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}::selection{background:var(--color-selection-bg);color:var(--color-text)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border-radius:999px;border:2px solid var(--color-scrollbar-track)}::-webkit-scrollbar-thumb:hover{background:var(--color-scrollbar-hover)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}