:root{--color-bg:#0b0b0f;--color-surface:#15151c;--color-surface-2:#1d1d27;--color-border:#2a2a36;--color-text:#f4f4f6;--color-text-muted:#a3a3b2;--color-accent:#8b5cf6;--color-accent-2:#38bdf8;--bottom-nav-height:64px}*{box-sizing:border-box}html,body{margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--color-bg);min-height:100vh;color:var(--color-text);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Noto Sans Thai,Sarabun,sans-serif;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.app-main{min-height:100vh;padding:calc(env(safe-area-inset-top,0px) + 16px) max(16px, env(safe-area-inset-right,0px)) calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px) + 20px) max(16px, env(safe-area-inset-left,0px));width:100%;max-width:960px;margin:0 auto}.page{flex-direction:column;gap:20px;display:flex}.page-header{padding:4px 0 8px}.page-header__title{margin:0;font-size:1.5rem;font-weight:700}.page-header__subtitle{color:var(--color-text-muted);margin:4px 0 0;font-size:.9rem}.dev-banner{z-index:30;color:#111827;text-align:center;background:#f59e0b;padding:8px 16px;font-size:.8rem;font-weight:700;position:sticky;top:0}.bottom-nav{z-index:20;border-top:1px solid var(--color-border);padding-bottom:env(safe-area-inset-bottom,0px);background:#0b0b0ff0;position:fixed;bottom:0;left:0;right:0}.bottom-nav__list{grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;display:grid}.bottom-nav__link{min-height:var(--bottom-nav-height);color:var(--color-text-muted);touch-action:manipulation;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:.68rem;display:flex}.bottom-nav__link--active{color:var(--color-accent-2)}.bottom-nav__icon{background:var(--color-surface-2);border-radius:8px;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;display:flex}.bottom-nav__link--active .bottom-nav__icon{background:#38bdf829}.home-hero{padding:12px 0 8px}.home-hero__eyebrow{color:var(--color-accent);letter-spacing:.08em;margin:0;font-size:.75rem;font-weight:700}.home-hero__title{margin:6px 0 4px;font-size:1.9rem;line-height:1.2}.home-hero__subtitle{color:var(--color-text-muted);margin:0 0 16px;font-size:.9rem}.home-section{flex-direction:column;gap:10px;display:flex}.home-section__title{margin:0;font-size:1.05rem;font-weight:700}.home-section__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid;overflow-x:hidden}.category-grid{flex-wrap:wrap;gap:8px;display:flex}.category-chip{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:999px;padding:8px 12px;font-size:.82rem}.poster-card{flex-direction:column;gap:6px;min-width:0;display:flex}.poster-card__art{aspect-ratio:2/3;color:#ffffffe6;border-radius:14px;justify-content:center;align-items:center;width:100%;font-size:1.6rem;font-weight:800;display:flex;overflow:hidden}.poster-card__art--slate{background:linear-gradient(145deg,#334155,#0f172a)}.poster-card__art--violet{background:linear-gradient(145deg,#8b5cf6,#312e81)}.poster-card__art--blue{background:linear-gradient(145deg,#38bdf8,#1e3a8a)}.poster-card__art--teal{background:linear-gradient(145deg,#2dd4bf,#134e4a)}.poster-card__art--amber{background:linear-gradient(145deg,#f59e0b,#7c2d12)}.poster-card__art--rose{background:linear-gradient(145deg,#fb7185,#881337)}.poster-card__title{margin:0;font-size:.9rem;font-weight:700}.poster-card__subtitle{color:var(--color-text-muted);margin:0;font-size:.74rem}.search-shell{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:6px}.search-shell__input{width:100%;min-height:44px;color:var(--color-text);font:inherit;background:0 0;border:0;border-radius:10px;outline:none;padding:0 10px}.placeholder-panel{border:1px dashed var(--color-border);background:var(--color-surface);color:var(--color-text-muted);text-align:center;border-radius:14px;padding:24px 16px}.auth-panel{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;flex-direction:column;gap:10px;padding:16px;display:flex}.auth-panel--signed-in{align-items:flex-start}.auth-panel__hint{color:var(--color-text-muted);margin:0;font-size:.9rem}.auth-panel__identity{margin:0;font-size:1rem}.auth-panel__meta{color:var(--color-text-muted);margin:0;font-size:.85rem}.auth-panel__dev-badge{color:#111827;background:#f59e0b;border-radius:999px;padding:3px 8px;font-size:.7rem;font-weight:800}.auth-panel__button{border:1px solid var(--color-border);background:var(--color-surface-2);width:100%;min-height:46px;color:var(--color-text);touch-action:manipulation;border-radius:12px;padding:0 14px;font-weight:700}.auth-panel__button--primary{color:#04150b;background:#06c755;border-color:#06c755}.auth-panel__button--dev{color:#fff;background:#7c2d12;border-color:#f59e0b}.auth-panel__dev{border-top:1px solid var(--color-border);margin-top:6px;padding-top:12px}.auth-panel__dev-label{color:#f59e0b;letter-spacing:.06em;margin:0 0 8px;font-size:.72rem;font-weight:800}.auth-panel__dev-row{flex-wrap:wrap;gap:8px;display:flex}.auth-panel__dev-row .auth-panel__button{width:auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (min-width:700px){.home-section__row{grid-template-columns:repeat(4,minmax(0,1fr))}.app-main{padding-left:24px;padding-right:24px}}.poster-card__link{display:block}.poster-card__art{background:var(--color-surface-2);position:relative}.poster-card__image{object-fit:cover;width:100%;height:100%;display:block}.poster-card__meta{padding-top:6px}.home-section__empty{color:var(--color-text-muted);margin:0;font-size:.85rem}.home-hero__backdrop{aspect-ratio:16/9;background:var(--color-surface-2);border-radius:16px;margin-bottom:14px;position:relative;overflow:hidden}.home-hero__backdrop-image{object-fit:cover;width:100%;height:100%;display:block}.home-hero__meta{color:var(--color-accent-2);margin:0 0 14px;font-size:.85rem}.button-primary{background:var(--color-accent-2);color:#04151d;touch-action:manipulation;border:0;border-radius:12px;justify-content:center;align-items:center;min-height:46px;padding:0 16px;font-weight:800;display:inline-flex}.button-primary:disabled{opacity:.55}.search-shell{align-items:stretch;gap:8px;display:flex}.search-shell__button{flex:none}.content-detail{gap:16px}.content-detail__hero{aspect-ratio:16/9;background:var(--color-surface-2);border-radius:16px;position:relative;overflow:hidden}.content-detail__backdrop{object-fit:cover;width:100%;height:100%;display:block}.content-detail__top{align-items:flex-start;gap:16px;display:flex}.content-detail__poster{border-radius:14px;flex:none;width:140px;height:auto}.content-detail__info{flex:1;min-width:0}.content-detail__title{margin:0 0 8px;font-size:1.5rem;line-height:1.25}.content-detail__meta{color:var(--color-text-muted);margin:0 0 6px;font-size:.9rem}.content-detail__preview{color:var(--color-accent-2);margin:8px 0 0;font-size:.9rem}.content-detail__description{margin:0;line-height:1.6}.admin-shell{flex-direction:column;gap:16px;display:flex}.admin-header{flex-direction:column;gap:10px;display:flex}.admin-header__eyebrow{color:var(--color-accent);letter-spacing:.06em;margin:0;font-size:.75rem;font-weight:800}.admin-header__nav{flex-wrap:wrap;gap:8px;display:flex}.admin-header__nav a{border:1px solid var(--color-border);background:var(--color-surface);border-radius:999px;padding:8px 12px;font-size:.84rem}.admin-card-grid{grid-template-columns:1fr;gap:12px;display:grid}.admin-card{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;flex-direction:column;gap:6px;padding:16px;display:flex}.admin-card span{color:var(--color-text-muted);font-size:.86rem}.admin-table{flex-direction:column;gap:12px;display:flex}.admin-row{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;grid-template-columns:80px 1fr;gap:12px;padding:12px;display:grid}.admin-row__poster{object-fit:cover;border-radius:10px;width:80px;height:120px}.admin-row__body{min-width:0}.admin-row__title{margin:0 0 4px;font-size:1rem}.admin-row__meta,.admin-row__status{color:var(--color-text-muted);margin:0 0 4px;font-size:.85rem}.admin-row__action{grid-column:1/-1;width:100%}.admin-gate{border:1px dashed var(--color-border);background:var(--color-surface);border-radius:16px;flex-direction:column;gap:12px;padding:24px 16px;display:flex}.admin-form{flex-direction:column;gap:14px;display:flex}.admin-form__field{flex-direction:column;gap:6px;font-size:.9rem;display:flex}.admin-form__field input,.admin-form__field textarea,.admin-form__field select{border:1px solid var(--color-border);background:var(--color-surface);width:100%;min-height:44px;color:var(--color-text);font:inherit;border-radius:10px;padding:10px}.admin-form__asset{border:1px solid var(--color-border);background:var(--color-surface);border-radius:14px;flex-direction:column;gap:8px;padding:12px;display:flex}.admin-form__asset-title{margin:0;font-weight:700}.admin-form__hint{color:var(--color-text-muted);margin:0;font-size:.78rem}.admin-form__preview{align-items:flex-end;gap:12px;display:flex}.admin-form__preview img{object-fit:cover;border-radius:10px}.admin-form__actions{flex-direction:column;gap:10px;display:flex}.admin-form__errors{color:#fecaca;background:#f871711a;border:1px solid #f87171;border-radius:12px;margin:0;padding:12px 12px 12px 28px}.admin-form__success{color:#a7f3d0;background:#34d3991f;border:1px solid #34d399;border-radius:12px;margin:0;padding:10px 12px}.admin-form__status{color:var(--color-text-muted);margin:0;font-size:.85rem}@media (min-width:700px){.admin-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-row{grid-template-columns:80px 1fr auto;align-items:center}.admin-row__action{grid-column:auto;width:auto}}.video-player{width:100%;scroll-margin-bottom:calc(var(--bottom-nav-height) + 16px);flex-direction:column;gap:8px;display:flex}.video-player__mount{background:#000;border-radius:14px;width:100%;max-width:100%;position:relative;overflow:hidden}.video-player__mount .video-js{width:100%;height:100%}.video-player__mount video{object-fit:contain}.video-player .vjs-big-play-button{border-color:var(--color-accent-2);background:#0b0b0fc7}.video-player__title{margin:0;font-size:.9rem;font-weight:700}.video-player__error{color:#fca5a5;margin:0;font-size:.85rem}.playback-panel{flex-direction:column;gap:8px;display:flex}.playback-panel__note{color:var(--color-text-muted);margin:0;font-size:.78rem}@media (max-width:699px){.video-player__mount,.video-player__mount .video-js,.video-player__mount video{max-height:min(44vh,100vh - 400px)}}.video-js.vjs-fullscreen,.video-js:fullscreen,.video-player__mount:fullscreen,.video-player__mount:fullscreen .video-js,.video-player__mount:fullscreen video,.video-js.vjs-fullscreen .vjs-tech,.video-js:fullscreen .vjs-tech{aspect-ratio:auto!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important}.video-js.vjs-fullscreen .vjs-tech,.video-js:fullscreen .vjs-tech,.video-player__mount:fullscreen video{object-fit:contain!important;object-position:center!important}.progress-card__bar{background:var(--color-surface-2);border-radius:999px;width:100%;height:4px;margin-top:6px;overflow:hidden}.progress-card__fill{background:var(--color-accent-2);border-radius:999px;height:100%}.wallet-balance{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;flex-direction:column;gap:8px;padding:20px 16px;display:flex}.wallet-balance__label{color:var(--color-text-muted);margin:0;font-size:.85rem}.wallet-balance__value{color:var(--color-accent-2);margin:0;font-size:2.4rem;font-weight:800;line-height:1}.wallet-balance__note{color:var(--color-text-muted);margin:0;font-size:.78rem}.wallet-ledger{flex-direction:column;gap:10px;display:flex}.wallet-ledger__list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.ledger-entry{border:1px solid var(--color-border);background:var(--color-surface);border-radius:12px;justify-content:space-between;gap:12px;padding:12px;display:flex}.ledger-entry__label{margin:0 0 4px;font-size:.92rem;font-weight:700}.ledger-entry__reason,.ledger-entry__meta p{color:var(--color-text-muted);margin:0;font-size:.78rem}.ledger-entry__meta{text-align:right}.ledger-entry__credit{color:#34d399;font-weight:700}.ledger-entry__debit{color:#fb7185;font-weight:700}.paywall{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;display:flex}.paywall__info,.paywall__note{color:var(--color-text-muted);margin:0;font-size:.8rem}.paywall__reached{color:var(--color-accent-2);margin:0;font-weight:700}.paywall__button{background:var(--color-accent-2);color:#0b0b0f;cursor:pointer;border:none;border-radius:999px;padding:12px 18px;font-weight:700}.paywall__button:disabled{opacity:.6;cursor:default}.paywall__error{color:#fb7185;margin:0;font-weight:700}.playback-state{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;display:flex}.playback-state__message{color:var(--color-text-muted);margin:0}.admin-row__actions{flex-direction:column;align-items:stretch;gap:8px;display:flex}.admin-gate__note{color:var(--color-text-muted);margin:8px 0 0;font-size:.78rem}.admin-dev-bar{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding:12px 16px;font-size:.8rem;display:flex}.poster-dropzone{border:2px dashed var(--color-border);background:var(--color-surface);text-align:center;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;display:flex}.poster-dropzone--active{border-color:var(--color-accent-2)}.poster-dropzone__title{margin:0;font-weight:700}.poster-dropzone__hint{color:var(--color-text-muted);margin:0 0 8px;font-size:.78rem}.category-inline{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.category-inline input,.category-inline select{flex:180px}