:root{--color-ink: #111111;--color-on-primary: #ffffff;--color-canvas: #ffffff;--color-soft-cloud: #f5f5f5;--color-charcoal: #39393b;--color-ash: #4b4b4d;--color-mute: #707072;--color-stone: #9e9ea0;--color-hairline: #cacacb;--color-hairline-soft: #e5e5e5;--color-sale: #d30005;--color-success: #007d48;--font-display: "Bebas Neue", "Inter", system-ui, sans-serif;--font-text: "Inter", system-ui, -apple-system, sans-serif;--radius-none: 0px;--radius-sm: 18px;--radius-md: 24px;--radius-lg: 30px;--radius-full: 9999px;--space-xxs: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 18px;--space-xl: 24px;--space-xxl: 30px;--space-section: 32px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--color-canvas);color:var(--color-ink);font-family:var(--font-text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}body.modal-open,body.watch-open{overflow:hidden}button,input{font-family:inherit}button{cursor:pointer;border:none;background:none}a{color:var(--color-ink)}::selection{background:var(--color-ink);color:var(--color-on-primary)}.app-shell{max-width:1440px;margin:0 auto;padding:0 var(--space-sm) var(--space-section)}.app-header{padding-top:var(--space-md);padding-bottom:var(--space-md)}.primary-nav{display:flex;align-items:center;gap:var(--space-sm);height:48px}.primary-nav__logo{width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-ink);color:var(--color-on-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-text);font-weight:700;font-size:12px;flex-shrink:0}.primary-nav__title{font-family:var(--font-text);font-weight:500;font-size:18px;color:var(--color-ink)}.search-wrap{position:relative;margin-top:var(--space-md)}.search-pill{width:100%;height:40px;padding:8px 40px 8px 16px;border-radius:var(--radius-md);border:none;background:var(--color-soft-cloud);color:var(--color-ink);font-family:var(--font-text);font-size:16px;outline:none}.search-pill:focus{background:var(--color-canvas);border:2px solid var(--color-ink);box-shadow:0 0 0 6px var(--color-soft-cloud)}.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:var(--radius-full);background:var(--color-hairline-soft);color:var(--color-ink);font-size:1.1rem;line-height:1}.stats-row{margin-top:var(--space-sm);font-family:var(--font-text);font-weight:500;font-size:12px;color:var(--color-mute)}.app-main{display:flex;flex-direction:column;gap:var(--space-lg)}.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm) var(--space-xs);transition:opacity .2s ease}.video-grid--loading{opacity:.5}.video-card{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--color-canvas)}.video-card__image{position:relative;aspect-ratio:9 / 16;background:var(--color-soft-cloud);overflow:hidden}.video-card__image img{width:100%;height:100%;object-fit:cover;display:block}.video-card__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--color-stone)}.video-card__badge{position:absolute;top:6px;right:6px;background:var(--color-sale);color:var(--color-on-primary);width:20px;height:20px;border-radius:var(--radius-full);font-size:.65rem;display:flex;align-items:center;justify-content:center}.video-card__meta{display:flex;flex-direction:column;gap:2px;padding:var(--space-sm) var(--space-xs) 0}.video-card__name{font-family:var(--font-text);font-weight:500;font-size:13px;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-card__sub{font-family:var(--font-text);font-weight:500;font-size:12px;color:var(--color-mute)}.empty-state{text-align:center;padding:var(--space-section) var(--space-lg);color:var(--color-mute)}.empty-state__icon{font-size:2.5rem;margin-bottom:var(--space-sm);opacity:.6}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-xs);flex-wrap:wrap}.page-btn{min-width:36px;height:36px;padding:0 12px;border-radius:var(--radius-full);border:1px solid var(--color-hairline);background:var(--color-canvas);color:var(--color-ink);font-family:var(--font-text);font-weight:500;font-size:13px;transition:transform .1s ease}.page-btn:disabled{opacity:.35;cursor:not-allowed}.page-btn:not(:disabled):active{transform:scale(.9)}.page-btn--active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-primary)}.page-ellipsis{color:var(--color-mute);padding:0 2px;font-size:13px}.watch-view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--color-canvas);display:flex;flex-direction:column;overflow-y:auto}.watch-view__top{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-sm);flex-shrink:0}.icon-circular{width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-soft-cloud);color:var(--color-ink);font-size:1.3rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-circular:active{transform:scale(.9)}.watch-view__title{font-family:var(--font-text);font-weight:500;font-size:14px;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.watch-view__player{width:100%;background:#000;flex-shrink:0}.watch-view__player--landscape{aspect-ratio:16 / 9}.watch-view__player--portrait{aspect-ratio:9 / 16;max-height:70vh}.watch-view__player video{width:100%;height:100%;display:block;object-fit:contain;background:#000}.watch-view__upnext{padding:var(--space-md) var(--space-sm)}.watch-view__upnext-label{font-family:var(--font-text);font-weight:500;font-size:14px;color:var(--color-ink);margin-bottom:var(--space-sm)}.upnext-strip{display:flex;gap:var(--space-sm);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--space-xs)}.upnext-strip::-webkit-scrollbar{display:none}.upnext-strip__loading{width:100px;height:140px;border-radius:var(--radius-sm);background:var(--color-soft-cloud);flex-shrink:0}.upnext-item{flex:0 0 auto;width:100px;display:flex;flex-direction:column;gap:var(--space-xs);text-align:left}.upnext-item__thumb{width:100px;height:140px;border-radius:var(--radius-sm);background:var(--color-soft-cloud);display:flex;align-items:center;justify-content:center;color:var(--color-stone);font-size:1.2rem}.upnext-item--active .upnext-item__thumb{outline:2px solid var(--color-ink);outline-offset:2px}.upnext-item__name{font-family:var(--font-text);font-weight:500;font-size:12px;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spinner-sm{display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid var(--color-hairline-soft);border-top-color:var(--color-ink);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:640px){.app-shell{padding-left:var(--space-lg);padding-right:var(--space-lg)}.video-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.primary-nav__title{font-size:20px}.watch-view__player--portrait{max-width:420px;margin:0 auto;max-height:80vh}}@media(min-width:1024px){.video-grid{grid-template-columns:repeat(5,1fr)}.watch-view{flex-direction:row}.watch-view__top{position:absolute;top:0;left:0;z-index:2}.watch-view__player{flex:1;align-self:center}.watch-view__player--portrait{max-width:480px;max-height:90vh}.watch-view__player--landscape{max-width:100%}.watch-view__upnext{width:320px;flex-shrink:0;overflow-y:auto}.upnext-strip{flex-direction:column;overflow-x:visible}.upnext-item{flex-direction:row;width:100%}.upnext-item__thumb{width:120px;height:90px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}