:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-background:#eeecf4;--color-surface:#fff;--color-surface-subtle:#f8f6ff;--color-header:#f8f6ff;--color-sidebar:#eceaf3;--color-text:#1f1b2d;--color-text-muted:#716b7d;--color-text-subtle:#9a94a6;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-light:#eee8ff;--color-accent:#ec4899;--color-border:#e2dfe9;--color-border-light:#ece9f1;--color-success:#10b981;--gradient-brand:linear-gradient(135deg, #633cff 0%, #8b3df5 55%, #ec4899 100%);--content-max-width:1200px;--header-height:72px;--sidebar-width:200px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--border-radius-sm:6px;--border-radius-md:8px;--border-radius:12px;--border-radius-lg:16px;--shadow-sm:0 1px 3px #1f1b2d0f;--shadow-md:0 4px 16px #1f1b2d14;--shadow-lg:0 8px 30px #1f1b2d1a;--transition-fast:.15s ease;--transition-normal:.25s ease}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-background:#171421;--color-surface:#211d2d;--color-surface-subtle:#29233a;--color-header:#1b1726;--color-sidebar:#1c1827;--color-text:#f7f5fb;--color-text-muted:#aaa3b8;--color-text-subtle:#81798f;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-light:#362758;--color-accent:#f05aa6;--color-border:#393247;--color-border-light:#302a3c;--color-success:#34d399;--gradient-brand:linear-gradient(135deg, #7048ff 0%, #9b4df5 55%, #ec4899 100%);--shadow-sm:0 1px 3px #0003;--shadow-md:0 4px 16px #00000047;--shadow-lg:0 8px 30px #0000005c}*{box-sizing:border-box}html{color:var(--color-text);background-color:var(--color-background);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-width:320px;margin:0}button,input,select{font:inherit}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.app-layout{background:var(--color-background);min-height:100vh;color:var(--color-text)}.app-header{z-index:100;height:var(--header-height);background:var(--color-header);border-bottom:1px solid var(--color-border);position:sticky;top:0}.app-header__inner{height:100%;padding:0 var(--spacing-lg);justify-content:space-between;align-items:center;display:flex}.app-header__brand{align-items:center;line-height:1;display:inline-flex}.app-header__brand-image{width:auto;height:42px;display:block}.app-header__brand-image--dark,:root[data-theme=dark] .app-header__brand-image--light{display:none}:root[data-theme=dark] .app-header__brand-image--dark{display:block}.app-header__actions{align-items:center;gap:var(--spacing-sm);margin-left:auto;display:flex}.theme-toggle{width:40px;height:40px;color:var(--color-text-muted);border:1px solid var(--color-border);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.theme-toggle:hover{color:var(--color-primary);background:var(--color-primary-light);border-color:var(--color-primary)}.theme-toggle:active{transform:scale(.94)}.theme-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.theme-toggle svg{flex-shrink:0;display:block}.app-layout__body{min-height:calc(100vh - var(--header-height));align-items:flex-start;display:flex}.app-sidebar{top:var(--header-height);width:var(--sidebar-width);height:calc(100vh - var(--header-height));padding:var(--spacing-lg) var(--spacing-md);background:var(--color-sidebar);border-right:1px solid var(--color-border);flex-shrink:0;position:sticky;overflow-y:auto}.app-sidebar__nav{gap:var(--spacing-xs);flex-direction:column;display:flex}.app-sidebar__link{align-items:center;gap:var(--spacing-sm);min-height:44px;padding:0 var(--spacing-md);border-radius:var(--border-radius-md);color:var(--color-text);transition:background-color var(--transition-fast), color var(--transition-fast);font-size:15px;font-weight:500;display:flex}.app-sidebar__link:hover{background:var(--color-primary-light);color:var(--color-primary)}.app-sidebar__link--active{background:var(--color-primary-light);color:var(--color-primary);font-weight:700}.app-layout__main{min-width:0;padding:var(--spacing-xl);flex:1}.app-layout__main>main{width:100%;max-width:var(--content-max-width);margin:0 auto}.bottom-navigation{display:none}@media (width<=720px){.app-layout{--header-height:60px}.app-header__inner{padding:0 var(--spacing-md)}.app-header__brand-image{height:36px}.app-header__actions{gap:var(--spacing-xs)}.theme-toggle{width:36px;height:36px}.theme-toggle svg{width:20px;height:20px}.app-sidebar{display:none}.app-layout__body{display:block}.app-layout__main{padding:var(--spacing-md) var(--spacing-md) calc(80px + env(safe-area-inset-bottom))}.bottom-navigation{z-index:100;min-height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--color-header);border-top:1px solid var(--color-border);grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #0000000f}.bottom-navigation__link{min-width:0;padding:var(--spacing-xs);color:var(--color-text-muted);transition:color var(--transition-fast), background-color var(--transition-fast);flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex}.bottom-navigation__link:hover{color:var(--color-primary);background:var(--color-primary-light)}.bottom-navigation__link--active,.bottom-navigation__link--active .bottom-navigation__icon{color:var(--color-primary)}.bottom-navigation__icon{font-size:20px;line-height:1}.bottom-navigation__label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:10px;font-weight:600;overflow:hidden}}.home-page{gap:var(--spacing-lg);flex-direction:column;display:flex}.home-hero{padding:var(--spacing-xl);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#fff 0%,#f5f0ff 60%,#fdf2f8 100%);position:relative;overflow:hidden}.home-hero:after{content:"";background:var(--gradient-brand);opacity:.08;border-radius:50%;width:220px;height:220px;position:absolute;top:-70px;right:-50px}.home-hero__title{z-index:1;color:var(--color-text);letter-spacing:-.02em;margin:0;font-size:28px;line-height:1.3;position:relative}.home-hero__description{z-index:1;margin:var(--spacing-sm) 0 0;color:var(--color-text-muted);font-size:14px;position:relative}:root[data-theme=dark] .home-hero{border-color:var(--color-border);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#262136 0%,#2d2540 55%,#3a294d 100%)}:root[data-theme=dark] .home-hero:after{background:var(--gradient-brand);opacity:.16}:root[data-theme=dark] .home-hero__title{color:var(--color-text)}:root[data-theme=dark] .home-hero__description{color:var(--color-text-muted)}.home-section{padding:var(--spacing-lg);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.home-section__header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.home-section__title{align-items:center;gap:var(--spacing-sm);margin:0;font-size:20px;line-height:1.4;display:flex}.home-section__title-icon{color:var(--color-primary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.home-ranking__tabs{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);display:flex}.home-ranking__tab{min-height:36px;padding:0 var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);background:var(--color-surface);color:var(--color-text-muted);font:inherit;cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);font-size:14px;font-weight:600}.home-ranking__tab:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.home-ranking__tab:disabled{background:var(--gradient-brand);color:#fff;box-shadow:var(--shadow-sm);cursor:default;border-color:#0000}.home-content-grid{gap:var(--spacing-lg);grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);display:grid}.home-content-grid .clip-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.home-status{padding:var(--spacing-lg) var(--spacing-md);color:var(--color-text-muted);text-align:center;margin:0}#ranking,#broadcasters,#games{scroll-margin-top:calc(var(--header-height) + var(--spacing-lg))}@media (width<=720px){.home-page{gap:var(--spacing-md)}.home-hero{padding:var(--spacing-lg)}.home-hero__title{font-size:20px}.home-hero__description{font-size:13px}.home-section{padding:var(--spacing-md)}.home-section__title{font-size:18px}.home-content-grid{gap:var(--spacing-md);grid-template-columns:1fr}.home-ranking__tabs{margin-bottom:var(--spacing-md)}.home-ranking__tab{min-height:40px}}@media (width<=380px){.home-hero__title{font-size:18px}}.clip-grid{gap:var(--spacing-md);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.clip-card{border:1px solid var(--color-border-light);border-radius:var(--border-radius);background:var(--color-surface);min-width:0;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast);overflow:hidden}.clip-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.clip-card__thumbnail-link{display:block}.clip-card__thumbnail{aspect-ratio:16/9;background:var(--color-surface-subtle);position:relative;overflow:hidden}.clip-card__image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal)}.clip-card:hover .clip-card__image{transform:scale(1.03)}.clip-card__image-placeholder{width:100%;height:100%;color:var(--color-text-muted);justify-content:center;align-items:center;font-size:13px;display:flex}.clip-card__rank{z-index:2;color:#fff;clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);width:26px;height:30px;box-shadow:var(--shadow-sm);border-radius:4px 4px 2px 2px;justify-content:center;align-items:center;padding-bottom:3px;font-size:13px;font-weight:700;line-height:1;display:flex;position:absolute;top:8px;left:8px}.clip-card__rank:after{content:none}.clip-card__rank--1{background:#f5b51b}.clip-card__rank--2{background:#a6a8b1}.clip-card__rank--3{background:#c7743e}.clip-card__play{color:#fff;width:42px;height:42px;transition:background var(--transition-fast), transform var(--transition-fast);background:#000000ad;border-radius:50%;justify-content:center;align-items:center;font-size:17px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.clip-card:hover .clip-card__play{background:var(--color-primary);transform:translate(-50%,-50%)scale(1.08)}.clip-card__body{padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-md)}.clip-card__title{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:14px;font-weight:700;line-height:1.4;display:-webkit-box;overflow:hidden}.clip-card__title a:hover{color:var(--color-primary)}.clip-card__broadcaster{margin:var(--spacing-xs) 0 0;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.clip-card__meta{align-items:center;gap:var(--spacing-xs);margin:var(--spacing-xs) 0 0;color:var(--color-text-muted);font-size:12px;display:flex}.clip-card__game{margin:var(--spacing-xs) 0 0;color:var(--color-text-subtle);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}@media (width<=1200px){.clip-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=960px){.clip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=720px){.clip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=480px){.clip-grid{grid-template-columns:1fr}}.broadcaster-ranking__list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.broadcaster-ranking__item{align-items:center;gap:var(--spacing-sm);min-height:64px;padding:var(--spacing-sm) 0;border-bottom:1px solid var(--color-border-light);grid-template-columns:32px minmax(0,1fr) auto;display:grid}.broadcaster-ranking__item:last-child{border-bottom:none}.broadcaster-ranking__rank{border-radius:var(--border-radius-sm);background:var(--color-surface-subtle);width:26px;height:26px;color:var(--color-text-muted);justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.broadcaster-ranking__item:first-child .broadcaster-ranking__rank{color:#fff;background:#fbbf24}.broadcaster-ranking__item:nth-child(2) .broadcaster-ranking__rank{color:#fff;background:#a8a8b3}.broadcaster-ranking__item:nth-child(3) .broadcaster-ranking__rank{color:#fff;background:#c47a44}.broadcaster-ranking__profile{align-items:center;gap:var(--spacing-sm);min-width:0;display:flex}.broadcaster-ranking__avatar,.broadcaster-ranking__avatar-placeholder{border-radius:50%;flex-shrink:0;width:40px;height:40px}.broadcaster-ranking__avatar{object-fit:cover}.broadcaster-ranking__avatar-placeholder{background:var(--color-primary-light);color:var(--color-primary);justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.broadcaster-ranking__name{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.broadcaster-ranking__profile:hover .broadcaster-ranking__name{color:var(--color-primary)}.broadcaster-ranking__stats{flex-direction:column;align-items:flex-end;gap:2px;display:flex}.broadcaster-ranking__views{color:var(--color-text);white-space:nowrap;font-size:13px;font-weight:600}.broadcaster-ranking__clips{color:var(--color-text-muted);white-space:nowrap;font-size:12px}.popular-games__list{gap:var(--spacing-md);grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.popular-games__item{align-items:center;gap:var(--spacing-sm);min-width:0;padding:var(--spacing-sm);border:1px solid var(--color-border-light);border-radius:var(--border-radius);background:var(--color-surface);box-shadow:var(--shadow-sm);display:flex;position:relative}.popular-games__rank{top:var(--spacing-xs);left:var(--spacing-xs);border-radius:var(--border-radius-sm);color:#fff;z-index:1;background:#000000a6;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex;position:absolute}.popular-games__image-wrapper{border-radius:var(--border-radius-md);background:var(--color-surface-subtle);flex-shrink:0;width:64px;height:86px;overflow:hidden}.popular-games__image{object-fit:cover;width:100%;height:100%}.popular-games__image-placeholder{width:100%;height:100%;color:var(--color-text-muted);text-align:center;justify-content:center;align-items:center;font-size:11px;display:flex}.popular-games__content{gap:var(--spacing-xs);flex-direction:column;min-width:0;display:flex}.popular-games__name{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.4;display:-webkit-box;overflow:hidden}.popular-games__clips{color:var(--color-text-muted);font-size:12px}@media (width<=1200px){.popular-games__list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=960px){.popular-games__list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=720px){.popular-games__list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=480px){.popular-games__list{grid-template-columns:1fr}}.broadcaster-detail{gap:var(--spacing-lg);flex-direction:column;display:flex}.broadcaster-detail__profile{padding:var(--spacing-lg);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.broadcaster-detail__profile-content{align-items:center;gap:var(--spacing-lg);display:flex}.broadcaster-detail__avatar,.broadcaster-detail__avatar-placeholder{border-radius:50%;flex-shrink:0;width:112px;height:112px}.broadcaster-detail__avatar{object-fit:cover}.broadcaster-detail__avatar-placeholder{background:var(--color-primary-light);color:var(--color-primary);justify-content:center;align-items:center;font-size:28px;font-weight:700;display:flex}.broadcaster-detail__profile-info{min-width:0}.broadcaster-detail__name{letter-spacing:-.02em;margin:0;font-size:28px;line-height:1.3}.broadcaster-detail__login-name{margin:var(--spacing-xs) 0 0;color:var(--color-text-muted);font-size:14px}.broadcaster-detail__status-badge{align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-surface-subtle);color:var(--color-text-muted);border-radius:999px;font-size:13px;font-weight:600;display:inline-flex}.broadcaster-detail__live-indicator{background:var(--color-text-subtle);border-radius:50%;width:8px;height:8px}.broadcaster-detail__live-indicator--live{background:var(--color-success)}.broadcaster-detail__clips{padding:var(--spacing-lg);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.broadcaster-detail__clips-header{justify-content:space-between;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);display:flex}.broadcaster-detail__clips-title{margin:0;font-size:22px;line-height:1.4}.broadcaster-detail__sort-tabs{gap:var(--spacing-sm);display:flex}.broadcaster-detail__sort-tab{min-height:36px;padding:0 var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);background:var(--color-surface);color:var(--color-text-muted);font:inherit;cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);font-size:14px;font-weight:600}.broadcaster-detail__sort-tab:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.broadcaster-detail__sort-tab:disabled{background:var(--gradient-brand);color:#fff;box-shadow:var(--shadow-sm);cursor:default;border-color:#0000}.broadcaster-detail__pagination{justify-content:center;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-xl);display:flex}.broadcaster-detail__pagination-button{min-width:72px;min-height:38px;padding:0 var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer;transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);font-size:14px;font-weight:600}.broadcaster-detail__pagination-button:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary)}.broadcaster-detail__pagination-button:disabled{color:var(--color-text-subtle);background:var(--color-surface-subtle);cursor:default}.broadcaster-detail__pagination-current{min-width:64px;color:var(--color-text-muted);text-align:center;font-size:14px;font-weight:600}.broadcaster-detail__status{padding:var(--spacing-xl);color:var(--color-text-muted);text-align:center;margin:0}@media (width<=720px){.broadcaster-detail__profile-content{align-items:flex-start}.broadcaster-detail__avatar,.broadcaster-detail__avatar-placeholder{width:80px;height:80px}.broadcaster-detail__name{font-size:22px}.broadcaster-detail__clips-header{flex-direction:column;align-items:flex-start}.broadcaster-detail__sort-tabs{width:100%}.broadcaster-detail__sort-tab{flex:1}}.clip-player{justify-content:center;display:flex}.clip-player__card{width:100%;max-width:1100px;padding:var(--spacing-lg);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.clip-player__header{margin-bottom:var(--spacing-lg)}.clip-player__title{letter-spacing:-.02em;margin:0;font-size:24px;line-height:1.4}.clip-player__frame-wrapper{aspect-ratio:16/9;border-radius:var(--border-radius);background:#000;width:100%;position:relative;overflow:hidden}.clip-player__frame{border:0;width:100%;height:100%;position:absolute;inset:0}.clip-player__status{padding:var(--spacing-xl);color:var(--color-text-muted);text-align:center;margin:0}@media (width<=720px){.clip-player__card{padding:var(--spacing-md)}.clip-player__header{margin-bottom:var(--spacing-md)}.clip-player__title{font-size:20px}}