*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Bai Jamjuree',system-ui,sans-serif;background:#f5f9ff;color:#081b45}button,input{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:196px 1fr;min-height:100vh}.sidebar{height:100vh;position:sticky;top:0;background:rgba(255,255,255,.98);border-right:1px solid #e6eef8;padding:20px 14px 96px;display:flex;flex-direction:column;z-index:25;box-shadow:8px 0 30px rgba(30,76,124,.035)}.app-brand{display:flex;align-items:center;gap:10px;padding:0 10px 20px;text-decoration:none}.app-brand img{width:44px;filter:drop-shadow(0 8px 16px rgba(20,120,255,.18))}.app-brand strong{font-size:19px;line-height:1}.app-brand span{display:block;color:#147cff}.sidebar nav{display:flex;flex-direction:column;gap:4px}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:#466381;font-weight:600;font-size:13px;cursor:pointer;transition:.18s ease}.sidebar nav a svg{width:19px;height:19px;color:#337fd0}.sidebar nav a.active,.sidebar nav a:hover{background:linear-gradient(90deg,#e4f2ff,#eef7ff);color:#0a72e7;box-shadow:inset 3px 0 0 #1685ff}.library-title{font-size:9px;letter-spacing:.16em;color:#a2b2c7;padding:17px 10px 8px}.library nav a{padding:8px 12px}.side-card{margin-top:auto;padding:16px;border-radius:16px;background:linear-gradient(155deg,#126dff,#34c7ef);color:#fff;box-shadow:0 18px 40px rgba(26,127,243,.22)}.side-card b{font-size:16px}.side-card small{display:block;margin:8px 0 14px;line-height:1.45}.side-card button{width:100%;border:0;background:#fff;color:#0b72e9;border-radius:10px;padding:10px 12px;font-weight:700}.workspace{min-width:0}.topbar{height:66px;display:flex;align-items:center;gap:10px;padding:9px 18px;background:rgba(255,255,255,.92);border-bottom:1px solid #e4edf8;position:sticky;top:0;z-index:20;backdrop-filter:blur(18px)}.back,.bell{width:38px;height:38px;border-radius:50%;border:1px solid #dce8f6;background:#fff;color:#52708e;display:grid;place-items:center}.search{display:flex;align-items:center;gap:9px;width:min(720px,58vw);background:#fff;border:1px solid #dbe8f6;border-radius:14px;padding:0 13px;box-shadow:0 7px 20px rgba(30,78,127,.04)}.search svg{width:18px;height:18px}.search input{height:42px;flex:1;border:0;background:transparent;outline:0;color:#163558}.search kbd{color:#8fa0b9;border:1px solid #dbe5f2;background:#f7fbff;border-radius:7px;padding:2px 6px}.bell{margin-left:auto}.account{display:flex;align-items:center;gap:8px}.account i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#147fff;color:#fff;font-style:normal}.account small{color:#8b9db0;line-height:1.15}.view{padding:14px 16px 105px;max-width:1750px;margin:auto}.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:14px}.main-col{min-width:0}.hero-carousel{height:270px;border-radius:20px;overflow:hidden;position:relative;box-shadow:0 20px 50px rgba(25,73,120,.14);background:#0a2149}.hero{position:absolute;inset:0;height:270px;overflow:hidden;background:#0a2149 var(--hero-desktop) center 28%/cover no-repeat;color:#fff;opacity:0;transform:scale(1.015);transition:opacity .55s ease,transform 1.2s ease;pointer-events:none}.hero.active{opacity:1;transform:scale(1);pointer-events:auto}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,17,49,.95) 0%,rgba(3,22,58,.77) 35%,rgba(6,34,71,.12) 67%,rgba(3,26,64,.3) 100%)}.hero-copy{position:relative;z-index:2;width:52%;padding:28px 32px}.hero-label{font-size:10px;font-weight:700;letter-spacing:.18em}.hero h1{font-size:42px;line-height:1.02;margin:10px 0 8px;max-width:610px}.hero p{font-size:13px;line-height:1.55;color:#dcecff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:520px}.hero-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.hero-tags span{font-size:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:5px 8px;border-radius:999px}.hero-actions{display:flex;gap:9px;margin-top:15px}.primary,.secondary{border:0;border-radius:12px;padding:11px 18px;font-weight:700;cursor:pointer}.primary{background:#1687ff;color:#fff;box-shadow:0 9px 22px rgba(22,135,255,.28)}.secondary{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.26)}.hero-carousel>.hero-dots{position:absolute;z-index:8;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px}.hero-carousel>.hero-dots button{width:8px;height:5px;border:0;border-radius:99px;background:rgba(255,255,255,.48);padding:0;transition:.2s}.hero-carousel>.hero-dots button.active{width:24px;background:#fff}.genres{display:flex;gap:9px;overflow:auto;padding:11px 0 3px;scrollbar-width:none}.genres::-webkit-scrollbar{display:none}.genre-pill{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-width:142px;background:#fff;border:1px solid #dce8f6;border-radius:14px;padding:9px 13px;color:#234866}.genre-pill i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-style:normal;background:#edf6ff;color:#147cff}.genre-pill b{display:block;font-size:12px}.genre-pill small{display:block;color:#91a2b7;font-size:9px}.section{margin-top:14px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:8px}.section-head h2{font-size:21px;margin:0;letter-spacing:-.02em}.section-head p{font-size:10px;color:#8a9eb7;margin:2px 0 0}.section-head a{color:#0b79ef;font-size:10px;font-weight:700}.film-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.film-card{cursor:pointer;min-width:0;transition:.2s ease}.film-card:hover{transform:translateY(-3px)}.film-card .thumb{aspect-ratio:16/9;border-radius:14px;background:#16345e center/cover no-repeat;position:relative;overflow:hidden;box-shadow:0 10px 24px rgba(35,79,123,.12)}.film-card .thumb:after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(transparent,rgba(4,13,30,.78))}.play{position:absolute;left:10px;bottom:9px;z-index:2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b73e6;box-shadow:0 6px 16px rgba(8,38,75,.22)}.play svg{width:17px}.duration{position:absolute;right:8px;top:8px;z-index:2;background:rgba(1,12,28,.82);color:#fff;padding:4px 7px;border-radius:7px;font-size:9px}.film-card b{display:block;margin-top:7px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.film-card small{color:#7990ab;font-size:10px}.content-split{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:14px;margin-top:12px}.short-wrap{min-width:0}.short-row{display:grid;grid-template-columns:repeat(8,minmax(82px,1fr));gap:8px}.short-card{cursor:pointer;min-width:0;transition:.2s ease}.short-card:hover{transform:translateY(-3px)}.short-card .thumb{aspect-ratio:9/16;border-radius:13px;background:#183762 center/cover no-repeat;position:relative;overflow:hidden;box-shadow:0 9px 20px rgba(35,79,123,.1)}.short-card b{display:block;margin-top:6px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right-rail{display:flex;flex-direction:column;gap:12px}.rail-card{background:#fff;border:1px solid #dce8f7;border-radius:18px;padding:13px;box-shadow:0 11px 28px rgba(34,82,130,.05)}.rail-card h3{font-size:16px;margin:0 0 9px;display:flex;justify-content:space-between;align-items:center}.rail-card h3 a{font-size:10px;color:#147cff}.for-you-item,.trend-item{display:grid;grid-template-columns:28px 70px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf3fa}.for-you-item:last-child,.trend-item:last-child{border-bottom:0}.for-you-item>span,.trend-item>span{font-size:11px;color:#6d84a2;text-align:center}.for-you-item img,.trend-item img{width:70px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.for-you-item b,.trend-item b{font-size:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.for-you-item small,.trend-item small{font-size:9px;color:#8da0b5}.rating{font-size:10px;color:#f6a400;font-weight:700}.popular-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.popular-chip{display:flex;align-items:center;gap:7px;background:#f7fbff;border-radius:10px;padding:9px;font-size:10px}.route-title{font-size:29px;margin:4px 0 3px}.route-sub{color:#8398b1;font-size:11px;margin-bottom:14px}.search-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.empty{padding:42px;text-align:center;background:#fff;border:1px dashed #cbdff3;border-radius:16px;color:#7990af}.watch-page{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:15px}.watch-main{min-width:0}.video-box{background:#020814;border-radius:19px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 24px 52px rgba(16,57,101,.2)}.video-box.vertical{aspect-ratio:auto;min-height:72vh;display:grid;place-items:center;background:#071427}.video-box iframe{width:100%;height:100%;border:0}.video-box.vertical iframe{width:min(430px,100%);aspect-ratio:9/16;height:auto}.watch-meta{padding:15px 3px}.watch-meta h1{font-size:27px;margin:5px 0 7px}.watch-meta p{color:#6e86a3;line-height:1.55;font-size:12px}.watch-tags{display:flex;gap:6px}.watch-tags span{font-size:9px;background:#e8f3ff;color:#0b73e7;padding:5px 8px;border-radius:99px}.queue{background:#fff;border:1px solid #dce8f7;border-radius:17px;padding:12px;position:sticky;top:80px;height:max-content}.queue h3{margin:0 0 7px}.queue-item{display:grid;grid-template-columns:88px 1fr;gap:9px;padding:8px 0;border-bottom:1px solid #edf3fa;cursor:pointer}.queue-item img{width:88px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.queue-item b{font-size:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.queue-item small{font-size:9px;color:#8da0b5}.cinema-dock{position:fixed;left:196px;right:0;bottom:0;height:72px;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border-top:1px solid #dfe9f5;display:grid;grid-template-columns:minmax(180px,260px) 1fr auto;align-items:center;gap:16px;padding:8px 18px;z-index:30;box-shadow:0 -12px 32px rgba(24,73,119,.08)}.dock-meta{display:flex;align-items:center;gap:10px;min-width:0}.dock-meta img{width:50px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.dock-meta b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-meta small{display:block;color:#8ea0b4;font-size:9px}.dock-controls{display:flex;align-items:center;justify-content:center;gap:12px}.dock-controls button{border:0;background:transparent;color:#25486c}.dock-controls .dock-play{width:42px;height:42px;border-radius:50%;background:#1a86ff;color:#fff;display:grid;place-items:center}.dock-progress{height:4px;border-radius:999px;background:#dfe8f4;overflow:hidden;min-width:220px}.dock-progress i{display:block;width:36%;height:100%;background:#1788ff}.dock-tools{display:flex;align-items:center;gap:10px;color:#52718f}.loading{padding:74px;text-align:center;color:#7d92ad}.hidden{display:none!important}@media(max-width:1250px){.home-layout{grid-template-columns:1fr}.right-rail{display:none}.film-row,.search-results{grid-template-columns:repeat(4,1fr)}.content-split{display:block}.short-row{grid-template-columns:repeat(7,1fr)}}@media(max-width:900px){.app-shell{grid-template-columns:78px 1fr}.app-brand strong,.sidebar nav span,.library-title,.side-card{display:none}.app-brand{justify-content:center;padding:0 0 14px}.sidebar nav a{justify-content:center;padding:10px}.sidebar nav a svg{width:20px;height:20px}.film-row,.search-results{grid-template-columns:repeat(3,1fr)}.short-row{grid-template-columns:repeat(6,1fr)}.cinema-dock{left:78px}}@media(max-width:640px){body{background:#f6f9fe}.app-shell{display:block;padding-bottom:62px}.sidebar{position:fixed;left:0;right:0;top:auto;bottom:0;height:62px;padding:0 8px;border-right:0;border-top:1px solid #e2ebf6;display:block;z-index:40}.app-brand,.library-title,.library,.side-card{display:none}.sidebar nav{height:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:2px}.sidebar nav a:nth-child(n+6){display:none}.sidebar nav a{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px;font-size:9px}.sidebar nav a span{display:block!important;font-size:8px}.sidebar nav a svg{width:19px;height:19px}.topbar{height:58px;padding:7px 9px}.back,.bell,.account{display:none}.search{width:100%;max-width:none}.view{padding:8px 8px 78px}.hero-carousel,.hero{height:220px}.hero{background-image:var(--hero-mobile);background-position:center center}.hero-copy{width:88%;padding:19px}.hero h1{font-size:29px}.hero p{font-size:11px}.genres{padding-top:9px}.genre-pill{min-width:130px}.film-row,.search-results{grid-template-columns:repeat(2,1fr);gap:8px}.short-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.short-card{min-width:106px;scroll-snap-align:start}.section-head h2{font-size:18px}.watch-page{display:block}.video-box{border-radius:13px}.watch-meta h1{font-size:19px}.queue{margin-top:12px}.route-title{font-size:24px}.cinema-dock{left:0;bottom:62px;height:58px;grid-template-columns:1fr auto;padding:6px 10px}.dock-controls{display:none}.dock-tools{display:none}.dock-meta img{width:44px}}
/* === v1.3 PREMIUM WATCH EXPERIENCE === */
body.watching .cinema-dock{display:none!important}
body.watching .view{padding-bottom:36px}
.watch-pro{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.watch-content{min-width:0}
.cinema-frame{width:100%;aspect-ratio:16/9;background:#020713;border-radius:22px;overflow:hidden;box-shadow:0 26px 70px rgba(21,62,105,.18);border:1px solid rgba(207,225,244,.9)}
.cinema-frame iframe{width:100%;height:100%;border:0;display:block}
.cinema-frame.is-vertical{aspect-ratio:auto;min-height:74vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#173457,#061323 70%)}
.cinema-frame.is-vertical iframe{width:min(440px,100%);height:auto;aspect-ratio:9/16}
.video-tags{display:flex;gap:6px;flex-wrap:wrap;margin:12px 2px 6px}.video-tags span{background:#eaf4ff;color:#1777df;border:1px solid #d9eaff;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:700}
.video-title-row{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;margin:4px 2px 8px}.video-title-row h1{font-size:27px;line-height:1.18;letter-spacing:-.025em;margin:0;max-width:78%}.video-stats{display:flex;gap:10px;white-space:nowrap;color:#6f86a2;font-size:10px}.video-stats b{color:#536e8f}
.creator-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #e4edf7;border-bottom:1px solid #e4edf7;padding:12px 0}.creator{display:flex;align-items:center;gap:9px}.creator-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#0c72ff,#35c9f1);color:#fff;font-weight:800;box-shadow:0 8px 18px rgba(20,124,245,.2)}.creator b{font-size:12px;display:block}.creator small{display:block;color:#8ca0b7;font-size:9px;margin-top:2px}.subscribe{border:0;background:#09214a;color:#fff;font-size:11px;font-weight:700;padding:10px 18px;border-radius:999px;margin-left:8px}.actions{display:flex;gap:7px}.actions button{height:38px;border:1px solid #dbe7f4;background:#fff;color:#315372;border-radius:999px;padding:0 13px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:10px}.actions svg{width:16px;height:16px}.actions button:hover{background:#eef7ff;border-color:#bfdbf7;color:#096dd8}
.video-desc{position:relative;margin-top:10px;padding:12px 14px;border:1px solid #deebf7;background:linear-gradient(180deg,#f9fcff,#f2f8ff);border-radius:13px;color:#617a97;font-size:11px}.video-desc b{color:#2e4f72}.video-desc p{margin:6px 0 0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-desc a{position:absolute;right:14px;bottom:10px;color:#0878ef;font-weight:700}
.related-section{margin-top:14px}.related-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.related-row .film-card .thumb{border-radius:12px}.related-row .film-card b{font-size:10.5px}
.watch-sidebar{display:flex;flex-direction:column;gap:12px;position:sticky;top:80px}.next-card,.watch-side-card{background:#fff;border:1px solid #dce8f6;border-radius:18px;padding:13px;box-shadow:0 14px 35px rgba(30,77,126,.06)}.next-head,.watch-side-card h3{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.next-head h3,.watch-side-card h3{font-size:16px;margin:0}.next-head label{display:flex;align-items:center;gap:7px;font-size:9px;color:#6f86a2;font-weight:600}.next-head input{display:none}.next-head label i{width:30px;height:17px;border-radius:99px;background:#d6e4f2;position:relative}.next-head label i:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;left:2px;top:2px;background:#fff;box-shadow:0 1px 4px #8da4bb}.next-head input:checked+i{background:#1483ff}.next-head input:checked+i:after{left:15px}.next-item{display:grid;grid-template-columns:112px 1fr 14px;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid #edf3f9;cursor:pointer}.next-item:last-child{border-bottom:0}.next-item img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:9px}.next-item b{font-size:10.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.next-item small,.next-item em{display:block;color:#8ca0b6;font-size:8.5px;font-style:normal;margin-top:2px}.next-item>span{color:#0f70dd;font-size:18px}
.watch-side-card h3 a{font-size:9px;color:#1179ec}.genre-mini{display:grid;grid-template-columns:1fr 1fr;gap:7px}.genre-mini button{border:0;background:#f4f9ff;border-radius:10px;padding:9px 7px;color:#2b4c6e;font-size:9.5px;font-weight:700;display:flex;align-items:center;gap:6px}.genre-mini button span{font-size:15px}.channel-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.channel-row div{text-align:center;min-width:0}.channel-row img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#eaf3fc}.channel-row b{display:block;font-size:8px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-row small{color:#8fa1b4}
@media(max-width:1180px){.watch-pro{grid-template-columns:1fr}.watch-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr}.next-card{grid-column:1/-1}.related-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.watch-pro{display:block}.cinema-frame{border-radius:13px;margin:0 -4px;width:calc(100% + 8px)}.video-title-row{display:block}.video-title-row h1{max-width:100%;font-size:20px}.video-stats{margin-top:6px}.creator-actions{display:block}.actions{margin-top:10px;overflow:auto;scrollbar-width:none}.actions button span{display:none}.actions button{min-width:40px;justify-content:center}.video-desc{font-size:10px}.watch-sidebar{display:block}.watch-sidebar>*{margin-top:10px}.related-row{display:flex;overflow:auto;gap:9px;scrollbar-width:none}.related-row .film-card{flex:0 0 70%}.next-item{grid-template-columns:105px 1fr 10px}.channel-row{grid-template-columns:repeat(5,64px);overflow:auto}.subscribe{padding:9px 13px}.creator-avatar{width:38px;height:38px}}
/* ===== Begoling Film v1.6 UI polish ===== */
:root{--bf-blue:#1687ff;--bf-navy:#061c37;--bf-navy2:#0a3158;--bf-line:#dce8f7;--bf-soft:#f5f9ff}
.view{padding-bottom:118px}
.content-split{grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.short-wrap{overflow:hidden}
.short-row{grid-template-columns:repeat(8,minmax(78px,1fr));gap:10px;overflow:hidden}
.short-card .thumb{border-radius:15px;border:1px solid rgba(213,228,244,.9);box-shadow:0 12px 28px rgba(32,77,122,.11)}
.short-card b{font-size:10.5px;line-height:1.25;color:#173a5e}
.rail-card{overflow:hidden;border-radius:20px;border:1px solid #dce8f7;padding:14px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 14px 34px rgba(31,76,121,.065)}
.rail-card h3{font-size:17px;margin-bottom:8px}
.trend-item,.for-you-item{grid-template-columns:30px 74px minmax(0,1fr) 34px;gap:9px;padding:9px 0;min-width:0}
.trend-item>span,.for-you-item>span{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:#eef5ff;color:#47729e;font-size:11px;font-weight:700}
.trend-item:nth-of-type(2)>span,.for-you-item:nth-of-type(2)>span{background:#fff1c8;color:#bf7d00}
.trend-item:nth-of-type(3)>span,.for-you-item:nth-of-type(3)>span{background:#eef3f8;color:#6f7f91}
.trend-item:nth-of-type(4)>span,.for-you-item:nth-of-type(4)>span{background:#ffe4d6;color:#c15a1f}
.trend-item img,.for-you-item img{width:74px;border-radius:10px;box-shadow:0 5px 12px rgba(21,57,95,.08)}
.trend-item>div,.for-you-item>div{min-width:0}
.trend-item b,.for-you-item b{font-size:10.5px;line-height:1.3;color:#15385a}
.trend-item small,.for-you-item small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circle-play{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border:1px solid #d7e8fb!important;border-radius:50%!important;background:linear-gradient(180deg,#f8fcff,#eaf5ff)!important;color:#0c7cf4!important;display:grid!important;place-items:center!important;box-shadow:0 5px 14px rgba(17,114,220,.12)!important;transition:.18s ease!important;overflow:hidden!important}
.circle-play:hover{transform:scale(1.08);background:#1787ff!important;color:#fff!important;border-color:#1787ff!important}
.circle-play svg{width:16px!important;height:16px!important;display:block!important}
.popular-chip{border:1px solid #edf3fa;background:#f8fbff;padding:10px;border-radius:12px}
/* premium floating cinema dock */
.cinema-dock{left:214px;right:18px;bottom:14px;height:78px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:linear-gradient(102deg,rgba(5,25,49,.985),rgba(8,47,84,.985));backdrop-filter:blur(22px);grid-template-columns:minmax(220px,320px) minmax(420px,1fr) minmax(190px,260px);gap:18px;padding:9px 16px;color:#fff;box-shadow:0 20px 50px rgba(4,27,54,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.dock-meta img{width:72px;height:45px;aspect-ratio:auto;border-radius:10px;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 18px rgba(0,0,0,.24)}
.dock-meta b{font-size:11.5px;color:#fff}
.dock-meta small{font-size:9px;color:#91abc7;margin-top:2px}
.dock-center{min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px}
.dock-transport{display:flex;align-items:center;gap:7px}
.dock-icon,.dock-tool{width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#bad2ea;display:grid;place-items:center;transition:.18s ease}
.dock-icon:hover,.dock-tool:hover{background:rgba(255,255,255,.09);color:#fff}
.dock-icon svg,.dock-tool svg{width:18px;height:18px}
.dock-play{width:48px!important;height:48px!important;border-radius:50%!important;background:linear-gradient(145deg,#1f9cff,#0d73ff)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 9px 24px rgba(15,126,255,.38)!important;display:grid!important;place-items:center!important;padding:0!important}
.dock-play:hover{transform:translateY(-1px) scale(1.04)}
.dock-play svg{width:22px;height:22px;margin-left:2px}
.dock-timeline{min-width:0;display:grid;grid-template-columns:auto minmax(100px,1fr) auto;align-items:center;gap:9px;color:#7898b8;font-size:8.5px}
.dock-progress{position:relative;height:4px;min-width:0;border-radius:999px;background:rgba(170,199,226,.27);overflow:visible}
.dock-progress i{width:36%;height:100%;border-radius:999px;background:linear-gradient(90deg,#1a91ff,#2ec8ff)}
.dock-progress b{position:absolute;left:36%;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);transform:translate(-50%,-50%)}
.dock-tools{justify-content:flex-end;gap:8px}
.dock-tool{border:0;padding:0}
.dock-volume{width:78px;height:4px;border-radius:999px;background:rgba(168,199,228,.28);overflow:hidden}
.dock-volume i{display:block;width:58%;height:100%;background:#27a7ff;border-radius:999px}
/* smoother scrollbars inside app */
*{scrollbar-width:thin;scrollbar-color:#b8cee4 transparent}
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#c1d4e7;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#9dbbd6}
@media(max-width:1450px){.home-layout{grid-template-columns:minmax(0,1fr) 292px}.content-split{grid-template-columns:minmax(0,1fr) 285px}.short-row{grid-template-columns:repeat(7,minmax(78px,1fr))}.cinema-dock{grid-template-columns:minmax(190px,260px) minmax(360px,1fr) minmax(150px,210px)}}
@media(max-width:1250px){.cinema-dock{left:92px;right:12px;grid-template-columns:minmax(180px,240px) 1fr auto}.dock-tools{display:none}.short-row{grid-template-columns:repeat(7,1fr)}}
@media(max-width:900px){.cinema-dock{left:88px;right:10px}.dock-center{grid-template-columns:auto 1fr}.dock-icon:first-child,.dock-icon:last-child{display:none}.content-split{display:block}.short-row{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.view{padding-bottom:132px}.cinema-dock{left:8px;right:8px;bottom:70px;height:64px;border-radius:16px;grid-template-columns:minmax(0,1fr) auto;padding:7px 10px}.dock-meta img{width:54px;height:34px}.dock-meta b{font-size:10px}.dock-center{display:flex}.dock-transport .dock-icon,.dock-timeline,.dock-tools{display:none!important}.dock-play{width:42px!important;height:42px!important}.short-row{overflow-x:auto;display:flex}.short-card{min-width:108px}.circle-play{width:30px!important;height:30px!important}}
/* === v1.7 HOME LAYOUT / RANKING / CINEMA DOCK FIX === */
.home-layout{grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.home-right-rail{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:#d6e6f7 transparent}
.home-right-rail::-webkit-scrollbar{width:5px}.home-right-rail::-webkit-scrollbar-thumb{background:#d6e6f7;border-radius:999px}
.main-col{overflow:hidden}.featured-section,.shorts-section,.latest-section{min-width:0}
.shorts-section{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,252,255,.7));border:1px solid #e4eef9;border-radius:18px;padding:13px 14px 14px;box-shadow:0 10px 28px rgba(37,86,135,.045)}
.shorts-section .section-head{margin-bottom:10px}.short-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;overflow:hidden}.short-card{min-width:0}.short-card .thumb{border-radius:14px;box-shadow:0 8px 22px rgba(30,72,115,.11)}.short-card b{font-size:10px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-card{overflow:hidden;border-radius:18px;padding:14px;background:rgba(255,255,255,.97);box-shadow:0 12px 32px rgba(33,79,124,.075)}.rail-card h3{font-size:17px;margin-bottom:10px}.trend-item,.for-you-item{grid-template-columns:30px 78px minmax(0,1fr) 34px;gap:9px;min-height:64px;padding:9px 0}.trend-item>span,.for-you-item>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#edf4fb;color:#55708e;font-weight:700}.trend-item:nth-of-type(2)>span,.for-you-item:nth-of-type(2)>span{background:#fff1be;color:#9c7000}.trend-item:nth-of-type(3)>span,.for-you-item:nth-of-type(3)>span{background:#eef3f8;color:#6f7f91}.trend-item:nth-of-type(4)>span,.for-you-item:nth-of-type(4)>span{background:#ffe4d6;color:#c15a1f}.trend-item img,.for-you-item img{width:78px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}.trend-item b,.for-you-item b{font-size:10.5px;line-height:1.32}.trend-item small,.for-you-item small{font-size:9px}.circle-play{appearance:none!important;-webkit-appearance:none!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;margin:0!important;border:1px solid #d7e8fb!important;border-radius:999px!important;background:#f1f8ff!important;color:#0b79ef!important;display:grid!important;place-items:center!important;box-shadow:0 5px 14px rgba(17,114,220,.10)!important}.circle-play svg{display:block!important;width:16px!important;height:16px!important;margin:0!important}.circle-play:hover{background:#1787ff!important;color:#fff!important;border-color:#1787ff!important;transform:translateY(-1px)}.rating{justify-self:end;white-space:nowrap}
.cinema-dock{left:210px!important;right:16px!important;bottom:14px!important;height:66px!important;border:1px solid rgba(26,78,129,.12)!important;border-radius:18px!important;background:rgba(255,255,255,.97)!important;color:#15385a!important;backdrop-filter:blur(22px)!important;grid-template-columns:minmax(220px,320px) minmax(360px,1fr) minmax(170px,220px)!important;gap:14px!important;padding:7px 14px!important;box-shadow:0 18px 48px rgba(24,67,111,.16)!important}.cinema-dock .dock-meta img{width:68px!important;height:44px!important;border-radius:9px!important;object-fit:cover!important;border:0!important;box-shadow:0 7px 18px rgba(14,57,99,.16)!important}.cinema-dock .dock-meta b{color:#15385a!important;font-size:11px!important}.cinema-dock .dock-meta small{color:#8298ae!important;font-size:9px!important}.cinema-dock .dock-center{display:grid!important;grid-template-columns:auto 1fr!important;gap:14px!important;align-items:center!important}.cinema-dock .dock-transport{gap:5px!important}.cinema-dock .dock-icon,.cinema-dock .dock-tool{width:30px!important;height:30px!important;border-radius:9px!important;color:#53708c!important}.cinema-dock .dock-icon:hover,.cinema-dock .dock-tool:hover{background:#edf6ff!important;color:#0b79ef!important}.cinema-dock .dock-play{width:44px!important;height:44px!important;background:linear-gradient(145deg,#1f9cff,#0d73ff)!important;color:#fff!important;box-shadow:0 8px 22px rgba(15,126,255,.3)!important}.cinema-dock .dock-timeline{color:#879bb0!important;gap:8px!important}.cinema-dock .dock-progress{height:4px!important;background:#e1ebf5!important}.cinema-dock .dock-progress i,.cinema-dock .dock-progress b{background:#1687ff!important}.cinema-dock .dock-tools{justify-content:flex-end!important;color:#54718e!important}.cinema-dock .dock-volume{background:#e5edf6!important}
@media(max-width:1280px){.home-layout{grid-template-columns:1fr}.home-right-rail{display:grid!important;position:static!important;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none!important;overflow:visible!important}.home-right-rail .genre-rail{grid-column:1/-1}.short-row{grid-template-columns:repeat(7,minmax(90px,1fr));overflow-x:auto;padding-bottom:4px}.cinema-dock{left:92px!important}}
@media(max-width:900px){.home-right-rail{grid-template-columns:1fr}.home-right-rail .genre-rail{grid-column:auto}.short-row{display:flex!important;overflow-x:auto!important}.short-card{min-width:108px!important}.cinema-dock{left:84px!important;right:10px!important;grid-template-columns:1fr auto!important}.cinema-dock .dock-center{display:none!important}.cinema-dock .dock-tools{display:flex!important}}
@media(max-width:640px){.shorts-section{padding:10px;border-radius:14px}.home-right-rail{display:none!important}.cinema-dock{left:8px!important;right:8px!important;bottom:70px!important;height:58px!important;border-radius:16px!important;padding:6px 10px!important;grid-template-columns:1fr auto!important}.cinema-dock .dock-meta img{width:56px!important;height:36px!important}.cinema-dock .dock-tools{gap:4px!important}.cinema-dock .dock-tool:not(:first-child){display:none!important}}
/* === v1.8 ADMIN SIDEBAR CLEANUP === */
.admin-side-links{margin-top:auto;padding:12px 4px 0;border-top:1px solid #e7eef7;display:flex;flex-direction:column;gap:5px}
.admin-side-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#47627e;text-decoration:none;font-size:13px;font-weight:600;transition:.18s ease}
.admin-side-link svg{width:18px;height:18px;color:#2584e8}
.admin-side-link:hover{background:#eef7ff;color:#0876e7}
body.admin-bar .sidebar .side-card{display:none!important}
@media(max-width:640px){.admin-side-links{display:none}}
/* v1.9 API fast-loader / error state */
.api-empty{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;color:#0b2b55}.api-empty-icon{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#e9f4ff,#dff7ff);color:#1685f8;font-size:26px;font-weight:800;box-shadow:0 12px 30px rgba(33,128,226,.12);margin-bottom:16px}.api-empty h2{margin:0 0 8px;font-size:25px}.api-empty p{margin:0 0 18px;color:#7890aa}.api-empty .primary{border:0;border-radius:14px;padding:12px 22px;background:linear-gradient(135deg,#1478ff,#22b9f3);color:#fff;font:700 14px Bai Jamjuree,sans-serif;cursor:pointer;box-shadow:0 10px 24px rgba(20,120,255,.22)}
/* === v2.1 LIGHT MOBILE PRO === */
.mobile-bottom-nav{display:none}
@media(max-width:760px){
:root{--bf-blue:#1487ff;--bf-cyan:#29c3f6;--bf-ink:#0b2143;--bf-muted:#758aa5;--bf-line:#e2edf8;--bf-card:#ffffff;--bf-bg:#f7fbff}
html,body{background:linear-gradient(180deg,#ffffff 0,#f5faff 42%,#eef7ff 100%)!important;color:var(--bf-ink)!important;overflow-x:hidden}
body{padding-bottom:148px}
.app-shell{display:block!important;min-height:100vh;background:transparent}
.sidebar{display:none!important}
.workspace{width:100%;min-width:0}
.topbar{height:auto!important;min-height:112px!important;padding:10px 14px 11px!important;display:grid!important;grid-template-columns:1fr auto auto!important;grid-template-rows:48px 44px!important;gap:8px!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid rgba(211,228,244,.9)!important;box-shadow:0 8px 28px rgba(27,80,130,.06)!important;backdrop-filter:blur(20px)!important}
.topbar:before{content:"Begoling Film";display:flex;align-items:center;font-size:20px;font-weight:800;letter-spacing:-.03em;color:#0a2147;white-space:nowrap}
.topbar:after{content:"▶";position:absolute;left:14px;top:16px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#27c7f6,#0d77ff);box-shadow:0 8px 20px rgba(20,126,245,.24);font-size:14px}
.topbar:before{padding-left:44px}
.topbar .back{display:none!important}
.topbar .bell{grid-column:2;grid-row:1;margin:0!important;width:40px;height:40px;background:#fff;border:1px solid var(--bf-line);box-shadow:0 7px 18px rgba(43,86,126,.06)}
.topbar .account{grid-column:3;grid-row:1;gap:0}
.topbar .account i{width:40px;height:40px;box-shadow:0 7px 18px rgba(20,126,245,.16)}
.topbar .account small{display:none}
.topbar .search{grid-column:1/-1;grid-row:2;width:100%!important;height:44px;border-radius:14px!important;background:#f8fbff!important;border:1px solid #dbe8f5!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;padding:0 12px!important}
.topbar .search input{height:42px;font-size:13px}
.topbar .search kbd{display:none}
.view{padding:12px 12px 160px!important;max-width:none!important}
.home-layout{display:block!important}
.home-right-rail{display:none!important}
.hero-carousel{height:510px!important;border-radius:24px!important;background:#eaf4ff!important;box-shadow:0 18px 48px rgba(20,70,120,.14)!important;border:1px solid rgba(207,225,244,.9)}
.hero{height:510px!important;background-image:var(--hero-mobile)!important;background-position:center 20%!important;background-size:cover!important}
.hero:after{background:linear-gradient(180deg,rgba(6,26,56,.06) 15%,rgba(6,26,56,.18) 42%,rgba(5,22,50,.9) 76%,rgba(4,18,43,.98) 100%)!important}
.hero-copy{position:absolute!important;left:0;right:0;bottom:0;width:100%!important;padding:26px 22px 30px!important}
.hero-label{font-size:10px!important;background:#ff3347;color:#fff;display:inline-flex;padding:5px 9px;border-radius:8px;letter-spacing:.1em}
.hero h1{font-size:34px!important;line-height:.98!important;margin:10px 0 8px!important;max-width:95%!important;text-shadow:0 2px 20px rgba(0,0,0,.22)}
.hero p{font-size:12.5px!important;line-height:1.5!important;color:#eef7ff!important;-webkit-line-clamp:3!important;max-width:95%!important}
.hero-tags{gap:6px!important;margin-top:10px!important}.hero-tags span{font-size:9px!important;padding:5px 8px!important;background:rgba(255,255,255,.12)!important}
.hero-actions{gap:8px!important;margin-top:14px!important}.hero-actions .primary,.hero-actions .secondary{flex:1;min-height:46px;border-radius:14px!important;font-size:12px!important}
.hero-actions .primary{background:linear-gradient(135deg,#0e7bff,#28c8f7)!important;box-shadow:0 12px 25px rgba(20,129,243,.32)!important}.hero-actions .secondary{background:rgba(255,255,255,.16)!important;backdrop-filter:blur(10px)}
.hero-carousel>.hero-dots{bottom:14px!important;left:auto!important;right:18px!important;transform:none!important}
.genres{gap:8px!important;padding:12px 0 2px!important;scroll-snap-type:x proximity}.genre-pill{min-width:112px!important;border-radius:15px!important;padding:8px 10px!important;scroll-snap-align:start;box-shadow:0 7px 20px rgba(34,81,128,.05)}.genre-pill i{width:31px!important;height:31px!important}.genre-pill b{font-size:11px!important}.genre-pill small{font-size:8px!important}
.section{margin-top:18px!important}.section-head{align-items:center!important;margin-bottom:10px!important}.section-head h2{font-size:21px!important}.section-head p{font-size:10px!important}.section-head a{font-size:10px!important}
.featured-section,.latest-section{background:rgba(255,255,255,.88);border:1px solid #e3edf7;border-radius:20px;padding:14px 12px 15px;box-shadow:0 12px 28px rgba(32,76,120,.05)}
.film-row{display:flex!important;overflow-x:auto!important;gap:10px!important;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}.film-row::-webkit-scrollbar{display:none}.film-card{flex:0 0 72%!important;scroll-snap-align:start}.film-card .thumb{border-radius:16px!important;box-shadow:0 10px 28px rgba(28,65,104,.13)!important}.film-card b{font-size:12px!important;margin-top:8px!important}.film-card small{font-size:9.5px!important}
.shorts-section{padding:14px 12px!important;border-radius:20px!important;background:rgba(255,255,255,.9)!important;border:1px solid #e3edf7!important;box-shadow:0 12px 28px rgba(32,76,120,.05)!important}.short-row{display:flex!important;overflow-x:auto!important;gap:9px!important;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}.short-row::-webkit-scrollbar{display:none}.short-card{flex:0 0 38%!important;min-width:124px!important;scroll-snap-align:start}.short-card .thumb{border-radius:16px!important;box-shadow:0 9px 24px rgba(25,66,107,.12)!important}.short-card b{font-size:10px!important}
.play{width:35px!important;height:35px!important;left:9px!important;bottom:9px!important}.duration{font-size:8px!important;border-radius:7px!important}
.route-title{font-size:26px!important;margin-top:6px!important}.route-sub{font-size:11px!important}.search-results{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.search-results .film-card{width:auto!important;flex:auto!important}
.watch-pro{display:block!important}.watch-content{min-width:0}.cinema-frame{border-radius:18px!important;margin:0!important;width:100%!important;box-shadow:0 18px 42px rgba(17,58,98,.18)!important}.cinema-frame.is-vertical{min-height:auto!important;background:#edf5ff!important;border:1px solid #dceaf7!important}.cinema-frame.is-vertical iframe{width:min(78vw,420px)!important}
.video-tags{margin-top:12px!important}.video-title-row h1{font-size:22px!important;line-height:1.18!important}.video-stats{font-size:9px!important;gap:8px!important;flex-wrap:wrap}.creator-actions{padding:10px 0!important}.creator{min-width:0}.creator b{font-size:12px!important}.creator small{font-size:9px!important}.subscribe{border-radius:12px!important;background:linear-gradient(135deg,#0f7fff,#27c2f4)!important;color:#fff!important;border:0!important;box-shadow:0 8px 18px rgba(20,127,240,.2)}
.actions{display:flex!important;gap:7px!important}.actions button{width:42px!important;height:42px!important;border-radius:13px!important;background:#f6faff!important;border:1px solid #dfebf6!important;color:#26608f!important}.video-desc{background:#f7fbff!important;border:1px solid #e0ecf7!important;border-radius:16px!important;padding:12px!important}.related-section{background:#fff;border:1px solid #e3edf7;border-radius:20px;padding:13px 12px}.related-row .film-card{flex:0 0 74%!important}
.watch-sidebar{display:block!important}.next-card,.watch-side-card{border-radius:20px!important;box-shadow:0 10px 26px rgba(28,72,115,.06)!important;margin-top:12px!important}.next-item{grid-template-columns:112px 1fr 12px!important}.next-item img{border-radius:10px!important}
.cinema-dock{left:8px!important;right:8px!important;bottom:78px!important;height:64px!important;border-radius:18px!important;padding:7px 10px!important;background:rgba(255,255,255,.96)!important;border:1px solid #dbe8f4!important;box-shadow:0 16px 42px rgba(21,67,111,.18)!important;grid-template-columns:minmax(0,1fr) auto!important;z-index:80!important}.cinema-dock .dock-meta img{width:58px!important;height:40px!important;border-radius:10px!important}.cinema-dock .dock-meta b{font-size:10px!important;max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cinema-dock .dock-center{display:flex!important}.cinema-dock .dock-transport .dock-icon,.cinema-dock .dock-timeline,.cinema-dock .dock-tools{display:none!important}.cinema-dock .dock-play{width:44px!important;height:44px!important}
.mobile-bottom-nav{position:fixed;left:8px;right:8px;bottom:8px;height:62px;display:grid!important;grid-template-columns:repeat(5,1fr);align-items:center;padding:5px 4px;background:rgba(255,255,255,.97);border:1px solid #dbe8f4;border-radius:20px;box-shadow:0 16px 42px rgba(21,67,111,.18);backdrop-filter:blur(20px);z-index:90}
.mobile-bottom-nav button{border:0;background:transparent;color:#7890a9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:8px;font-weight:600;min-width:0;height:50px;border-radius:14px;padding:4px}.mobile-bottom-nav button svg{width:20px;height:20px}.mobile-bottom-nav button.active{color:#0d7cf3;background:linear-gradient(180deg,#eef7ff,#e5f3ff)}
body.watching .cinema-dock{display:none!important}
body.watching{padding-bottom:76px}
}
@media(max-width:390px){
.hero-carousel,.hero{height:475px!important}.hero h1{font-size:30px!important}.hero-copy{padding:22px 18px 27px!important}.film-card{flex-basis:78%!important}.short-card{flex-basis:42%!important}.topbar:before{font-size:18px}.view{padding-left:10px!important;padding-right:10px!important}
}
/* === v2.2.0 REMOVE GLOBAL MINI PLAYER === */
.cinema-dock{display:none!important}
.view{padding-bottom:28px!important}
@media(max-width:640px){.view{padding-bottom:88px!important}}
/* ======================================================================
Begoling Film v2.4.0 — PREMIUM STREAMING UI
Presentation-only layer. YouTube/API catalog engine remains unchanged.
====================================================================== */
:root{
--bf-blue:#1484ff;
--bf-blue-2:#0a72f5;
--bf-cyan:#27c3f3;
--bf-ink:#071d48;
--bf-text:#17365f;
--bf-muted:#8196b2;
--bf-line:#dfeaf6;
--bf-card:#fff;
--bf-bg:#f5f9ff;
--bf-shadow:0 18px 50px rgba(35,78,124,.08);
--bf-radius:20px;
}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 72% -10%,rgba(33,142,255,.10),transparent 30%),linear-gradient(180deg,#fbfdff 0,#f5f9ff 40%,#f2f7fd 100%);color:var(--bf-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(20,132,255,.18);outline-offset:2px}
.view>.loading{min-height:55vh;display:grid;place-items:center;color:#6f88a8;font-weight:600}
.card-meta{display:flex!important;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden}
.card-meta>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-meta .view-meta{color:#8b9db5}
.short-meta{display:block;color:#879ab3;font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quality{position:absolute;left:9px;top:9px;z-index:3;background:linear-gradient(135deg,#1385ff,#28bff5);color:#fff;font-size:9px;font-weight:800;line-height:1;padding:5px 7px;border-radius:7px;box-shadow:0 5px 14px rgba(15,112,226,.22)}
.circle-play{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid #dceafa;background:#f8fbff;color:#1681f5;transition:.2s ease}.circle-play svg{width:16px}.circle-play:hover{background:#1484ff;color:#fff;border-color:#1484ff;transform:scale(1.04)}
.account-chevron{font-size:18px;color:#17365f;margin-left:0;transform:translateY(-2px)}
.side-premium{margin-top:auto;border:1px solid #f4dfb3;background:linear-gradient(145deg,#fffaf0,#fff4d9);border-radius:16px;padding:12px 12px 11px;box-shadow:0 12px 28px rgba(130,98,31,.07);position:relative;overflow:hidden}.side-premium:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-28px;top:-34px;background:rgba(255,189,53,.16)}.premium-crown{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;float:left;margin-right:9px;background:#ffd76e;color:#9c6800;font-size:15px}.side-premium b{display:block;font-size:12px;color:#674700;padding-top:1px}.side-premium small{display:block;clear:both;padding-top:8px;color:#9a7d44;font-size:9px;line-height:1.45}.side-premium button{width:100%;margin-top:9px;border:0;border-radius:10px;background:#fff;color:#8f640e;padding:8px 10px;font-size:10px;font-weight:700;box-shadow:0 5px 14px rgba(107,77,17,.08);display:flex;align-items:center;justify-content:space-between}.side-premium button:hover{background:#fffdf8}.admin-side-links{margin-top:8px!important}
.hero-nav{position:absolute;right:18px;bottom:18px;z-index:9;display:flex;gap:8px}.hero-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(5,19,43,.42);backdrop-filter:blur(10px);color:#fff;font-size:25px;line-height:1;display:grid;place-items:center;transition:.2s}.hero-nav button:hover{background:rgba(20,132,255,.85);border-color:transparent;transform:translateY(-1px)}
.rail-card small em{display:block;font-style:normal;color:#9aabc0;margin-top:2px}
.popular-chip{border:1px solid #e6eef7;cursor:pointer;font-family:inherit;color:#17365f;text-align:left;transition:.18s ease}.popular-chip:hover{background:#eef7ff;border-color:#cfe4fa;transform:translateY(-1px)}
@media(min-width:761px){
.app-shell{grid-template-columns:226px minmax(0,1fr);min-height:100vh}
.sidebar{height:100vh;overflow-y:auto;overscroll-behavior:contain;padding:18px 14px 20px;background:rgba(255,255,255,.97);border-right:1px solid rgba(219,232,246,.95);box-shadow:10px 0 35px rgba(35,77,120,.035);scrollbar-width:thin;scrollbar-color:#dbe7f4 transparent}
.app-brand{gap:11px;padding:2px 10px 19px}.app-brand img{width:45px}.app-brand strong{font-size:20px;letter-spacing:-.035em;color:#071d48}.app-brand strong span{color:#0c78f5;margin-top:2px}
.sidebar nav{gap:3px}.sidebar nav a{min-height:43px;padding:10px 12px;border-radius:13px;font-size:13px;color:#365b82;font-weight:600;transition:background .18s,color .18s,transform .18s,box-shadow .18s}.sidebar nav a svg{width:19px;height:19px;color:#1681f3;stroke-width:1.8}.sidebar nav a:hover{transform:translateX(2px);background:#f0f7ff;color:#0b6fe0;box-shadow:none}.sidebar nav a.active{background:linear-gradient(100deg,#e5f2ff,#f0f7ff);color:#0876ea;box-shadow:inset 3px 0 0 #1685ff}.library-title{padding:16px 10px 8px;font-size:9px;color:#9bacc0}.sidebar nav.library a{min-height:40px;padding-top:8px;padding-bottom:8px}
.workspace{min-width:0;background:transparent}
.topbar{height:74px;padding:11px 22px;gap:10px;background:rgba(250,253,255,.88);border-bottom:1px solid rgba(221,233,245,.92);box-shadow:0 5px 22px rgba(31,73,116,.035);backdrop-filter:blur(22px) saturate(130%)}
.back,.bell{width:42px;height:42px;border:1px solid #dce8f5;background:rgba(255,255,255,.95);color:#416a91;box-shadow:0 6px 18px rgba(40,78,116,.05);transition:.18s ease}.back:hover,.bell:hover{border-color:#c6dff7;color:#0b75e8;transform:translateY(-1px)}
.search{height:46px;width:min(790px,60vw);border:1px solid #d7e6f6;border-radius:15px;padding:0 14px;background:#fff;box-shadow:0 8px 24px rgba(30,77,124,.055)}.search span{display:grid;place-items:center;color:#1e5b91}.search input{height:44px;font-size:13px;color:#17365f}.search input::placeholder{color:#94a7bf}.search kbd{font-size:10px;color:#86a0bc;background:#f8fbff;border-color:#dbe8f5;padding:3px 7px}
.bell{margin-left:auto;color:#183e68}.account{gap:9px;padding:3px 3px 3px 5px;border-radius:14px;transition:.18s}.account:hover{background:#f2f7fd}.account i{width:42px;height:42px;background:linear-gradient(145deg,#1988ff,#0b70e9);font-weight:700;box-shadow:0 8px 18px rgba(20,126,245,.18)}.account small{font-size:10px;color:#8da0b6;line-height:1.25}.account small b{font-size:11px;color:#0d2850}
.view{padding:18px 20px 46px;max-width:1720px;margin:0 auto}
.home-layout{grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
.main-col{min-width:0}
.hero-carousel{height:340px;border-radius:21px;border:1px solid rgba(210,226,242,.45);box-shadow:0 22px 54px rgba(22,63,105,.16);isolation:isolate}
.hero{height:340px;background-position:center 28%}.hero:after{background:linear-gradient(90deg,rgba(3,15,39,.96) 0%,rgba(3,18,46,.84) 36%,rgba(5,28,62,.30) 61%,rgba(2,15,38,.20) 100%)}
.hero-copy{width:57%;padding:31px 33px 28px}.hero-label{display:inline-flex;padding:5px 9px;border-radius:8px;background:#1284ff;font-size:9px;letter-spacing:.09em;color:#fff;box-shadow:0 6px 15px rgba(15,123,239,.25)}.hero h1{font-family:'Bai Jamjuree',system-ui,sans-serif;font-size:43px;line-height:1.03;letter-spacing:-.04em;margin:11px 0 8px;max-width:600px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 4px 20px rgba(0,0,0,.2)}.hero p{font-size:12px;line-height:1.5;color:#e8f2ff;max-width:530px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-tags{margin-top:12px;gap:6px}.hero-tags span{font-size:9px;padding:5px 8px;background:rgba(18,34,58,.58);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(9px)}.hero-actions{margin-top:16px;gap:9px}.hero-actions .primary,.hero-actions .secondary{min-height:44px;padding:11px 19px;border-radius:13px;font-size:12px}.hero-actions .primary{background:linear-gradient(135deg,#1389ff,#0870ef 70%);box-shadow:0 10px 25px rgba(12,112,234,.32)}.hero-actions .primary:hover{filter:brightness(1.05);transform:translateY(-1px)}.hero-actions .secondary{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(12px)}
.hero-carousel>.hero-dots{left:50%;bottom:17px;gap:5px}.hero-carousel>.hero-dots button{height:5px;width:7px}.hero-carousel>.hero-dots button.active{width:21px;background:#1888ff}
.section{margin-top:17px;content-visibility:auto;contain-intrinsic-size:300px}.section-head{align-items:center;margin-bottom:9px}.section-head h2{font-size:21px;letter-spacing:-.035em;color:#071d48}.section-head p{font-size:9.5px;color:#8fa1b8;margin-top:3px}.section-head a{font-size:10px;color:#0b78ed;font-weight:700;cursor:pointer}.section-head a:hover{text-decoration:underline}
.short-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}.short-card{min-width:0}.short-card .thumb{border-radius:14px;box-shadow:0 9px 22px rgba(27,67,109,.11);border:1px solid rgba(218,231,244,.8);transition:transform .24s ease,box-shadow .24s ease}.short-card:hover{transform:none}.short-card:hover .thumb{transform:translateY(-3px);box-shadow:0 15px 28px rgba(27,67,109,.16)}.short-card .thumb:after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(transparent,rgba(1,12,28,.46));pointer-events:none}.short-card b{font-size:10.5px;line-height:1.25;margin-top:7px;color:#0d2a53;white-space:nowrap}.short-card .play{z-index:3;width:31px;height:31px;left:9px;bottom:9px}.short-card .duration{top:7px;right:7px;font-size:8px;background:rgba(1,12,28,.83);border:1px solid rgba(255,255,255,.16)}
.film-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.film-card{min-width:0}.film-card:hover{transform:none}.film-card .thumb{border-radius:14px;border:1px solid rgba(215,229,243,.82);box-shadow:0 9px 23px rgba(30,72,114,.11);transition:transform .24s ease,box-shadow .24s ease}.film-card:hover .thumb{transform:translateY(-3px);box-shadow:0 16px 32px rgba(30,72,114,.16)}.film-card .play{width:33px;height:33px;left:10px;bottom:9px}.film-card b{font-size:11.5px;color:#0c2a54;margin-top:7px;line-height:1.28}.film-card small{font-size:9px;margin-top:2px;color:#8497af}.film-card .duration{font-size:8px;top:7px;right:7px}
.home-right-rail{display:flex;flex-direction:column;gap:13px;position:sticky;top:91px}.rail-card{border-radius:19px;border:1px solid #dfeaf5;padding:14px 15px 12px;background:rgba(255,255,255,.94);box-shadow:0 12px 34px rgba(33,76,119,.055)}.rail-card h3{font-size:17px;color:#0a2148;margin-bottom:9px;letter-spacing:-.025em}.rail-card h3 a{font-size:9.5px;color:#0a78ed;cursor:pointer}.for-you-item,.trend-item{grid-template-columns:28px 76px minmax(0,1fr) auto;gap:8px;padding:10px 0}.for-you-item>span,.trend-item>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#edf5ff;color:#3673b8;font-weight:700}.trend-item:nth-of-type(2)>span,.for-you-item:nth-of-type(2)>span{background:#fff3cf;color:#9a6a00}.trend-item:nth-of-type(3)>span,.for-you-item:nth-of-type(3)>span{background:#eef4fb;color:#58718e}.trend-item:nth-of-type(4)>span,.for-you-item:nth-of-type(4)>span{background:#f7e5dc;color:#9f5231}.for-you-item img,.trend-item img{width:76px;border-radius:9px}.for-you-item b,.trend-item b{font-size:10.5px;line-height:1.25;color:#0c2b55}.for-you-item small,.trend-item small{display:block;font-size:8.5px;color:#91a3b8;margin-top:3px}.rating{font-size:10px;white-space:nowrap}.popular-grid{gap:8px}.popular-chip{min-height:39px;border-radius:11px;padding:8px 10px;font-size:9.5px;background:#f8fbff}.popular-chip span{font-size:14px}.popular-chip b{font-weight:600}
.route-title{color:#071d48;letter-spacing:-.04em}.search-results .film-card{min-width:0}
}
@media(min-width:761px) and (max-width:1450px){
.app-shell{grid-template-columns:208px minmax(0,1fr)}.sidebar{padding-left:11px;padding-right:11px}.app-brand strong{font-size:18px}.home-layout{grid-template-columns:minmax(0,1fr) 310px}.view{padding-left:15px;padding-right:15px}.hero-carousel,.hero{height:310px}.hero h1{font-size:36px}.hero-copy{padding:26px;width:60%}.short-row{gap:7px}.short-card b{font-size:9.5px}.for-you-item,.trend-item{grid-template-columns:25px 66px minmax(0,1fr) auto}.for-you-item img,.trend-item img{width:66px}
}
@media(min-width:761px) and (max-width:1180px){
.home-layout{grid-template-columns:1fr}.home-right-rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-right-rail .genre-rail{grid-column:1/-1}.popular-grid{grid-template-columns:repeat(3,1fr)}.hero-carousel,.hero{height:330px}.short-row{grid-template-columns:repeat(7,minmax(95px,1fr));overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.short-row::-webkit-scrollbar{display:none}.short-card{min-width:105px}.film-row{grid-template-columns:repeat(4,minmax(160px,1fr));overflow-x:auto;scrollbar-width:none}.film-row::-webkit-scrollbar{display:none}
}
@media(max-width:760px){
.side-premium{display:none}.account-chevron{display:none}.hero-nav{display:none}.card-meta{display:block!important}.card-meta .view-meta{display:block;margin-top:2px}.short-meta{font-size:8.5px}.quality{font-size:8px;padding:4px 6px}.latest-section{background:rgba(255,255,255,.88);border:1px solid #e3edf7;border-radius:20px;padding:14px 12px 15px;box-shadow:0 12px 28px rgba(32,76,120,.05)}
}
\n\n/* === v2.4.1 SIDEBAR FOOTER / PREMIUM CARD HOTFIX === */\n@media(min-width:761px){\n .sidebar{\n height:100vh;\n overflow:hidden!important;\n padding:0!important;\n display:flex;\n flex-direction:column;\n background:rgba(255,255,255,.985);\n }\n .sidebar-scroll{\n flex:1 1 auto;\n min-height:0;\n overflow-y:auto;\n overflow-x:hidden;\n overscroll-behavior:contain;\n padding:18px 14px 10px;\n scrollbar-width:thin;\n scrollbar-color:#dbe7f4 transparent;\n }\n .sidebar-scroll::-webkit-scrollbar{width:5px}\n .sidebar-scroll::-webkit-scrollbar-thumb{background:#dbe7f4;border-radius:99px}\n .sidebar-scroll::-webkit-scrollbar-track{background:transparent}\n .sidebar-footer{\n flex:0 0 auto;\n position:relative;\n z-index:3;\n padding:9px 14px 16px;\n background:linear-gradient(180deg,rgba(255,255,255,.72),#fff 18%);\n border-top:1px solid #e8f0f8;\n box-shadow:0 -10px 26px rgba(33,76,119,.045);\n }\n .side-premium{\n margin:0!important;\n width:100%;\n min-height:104px;\n border-radius:15px;\n padding:11px 11px 10px;\n display:grid;\n grid-template-columns:30px minmax(0,1fr);\n align-items:start;\n column-gap:9px;\n overflow:hidden;\n }\n .premium-crown{float:none!important;margin:0!important;width:30px;height:30px}\n .premium-copy{min-width:0;position:relative;z-index:2}\n .side-premium b{padding-top:1px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n .side-premium small{clear:none!important;padding-top:4px;font-size:8.7px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n .side-premium button{grid-column:1/-1;margin-top:8px;min-height:31px;padding:7px 9px}\n .admin-side-links{margin-top:8px!important;padding:8px 0 0!important;gap:3px!important}\n .admin-side-link{min-height:38px;padding:8px 10px!important}\n}\n@media(min-width:761px) and (max-width:1450px){\n .sidebar-scroll{padding-left:11px;padding-right:11px}\n .sidebar-footer{padding-left:11px;padding-right:11px}\n}\n@media(min-width:761px) and (max-height:780px){\n .sidebar-footer{padding-top:7px;padding-bottom:9px}\n .side-premium{min-height:54px;grid-template-columns:28px minmax(0,1fr);padding:9px 10px}\n .premium-crown{width:28px;height:28px}\n .side-premium small,.side-premium button{display:none!important}\n .side-premium b{display:block;line-height:28px;padding:0;font-size:11px}\n .admin-side-links{margin-top:6px!important;padding-top:6px!important}\n .admin-side-link{min-height:34px;padding:6px 9px!important}\n}\n@media(max-width:760px){\n .sidebar-scroll,.sidebar-footer{display:contents}\n}\n
/* ============================================================
Begoling Film UI 2.5 — Premium Streaming Design System
============================================================ */
:root{
--bf-blue:#147cff;
--bf-blue-2:#4da8ff;
--bf-ink:#071a3d;
--bf-muted:#7d91ab;
--bf-line:#e4edf8;
--bf-surface:rgba(255,255,255,.88);
--bf-surface-solid:#ffffff;
--bf-soft:#f5f9ff;
--bf-shadow:0 18px 50px rgba(22,65,110,.10);
--bf-shadow-soft:0 10px 28px rgba(22,65,110,.07);
--bf-radius:20px;
}
html{background:#f4f8fd}
body{
background:
radial-gradient(circle at 18% 4%,rgba(39,143,255,.08),transparent 28%),
radial-gradient(circle at 86% 12%,rgba(109,196,255,.08),transparent 24%),
linear-gradient(180deg,#f7fbff 0%,#f3f8fe 100%);
color:var(--bf-ink);
letter-spacing:-.01em;
}
button,a,input{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(20,124,255,.22);outline-offset:2px}
.app-shell{grid-template-columns:214px minmax(0,1fr);background:transparent}
/* Sidebar */
.sidebar{
width:214px;
height:100dvh;
padding:18px 12px 12px;
background:rgba(255,255,255,.93);
border-right:1px solid rgba(218,231,246,.9);
box-shadow:10px 0 36px rgba(29,73,119,.045);
backdrop-filter:blur(20px) saturate(150%);
overflow:hidden;
}
.sidebar-scroll{
min-height:0;
flex:1 1 auto;
overflow:auto;
padding-right:2px;
scrollbar-width:none;
}
.sidebar-scroll::-webkit-scrollbar{display:none}
.app-brand{padding:2px 10px 18px;gap:11px}
.app-brand img{width:46px;height:46px;filter:drop-shadow(0 9px 18px rgba(20,124,255,.2))}
.app-brand strong{font-size:19px;line-height:1.03;letter-spacing:-.025em}
.app-brand strong span{margin-top:3px}
.sidebar nav{gap:5px}
.sidebar nav a,.admin-side-link{
min-height:44px;
padding:11px 12px;
border-radius:14px;
color:#45617e;
font-size:13px;
font-weight:600;
transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.sidebar nav a svg,.admin-side-link svg{width:19px;height:19px;color:#3788da}
.sidebar nav a:hover,.admin-side-link:hover{
transform:translateX(2px);
background:#f1f7ff;
color:#0a70df;
box-shadow:none;
}
.sidebar nav a.active{
background:linear-gradient(135deg,#e9f4ff 0%,#f4f9ff 100%);
color:#0a72e7;
box-shadow:inset 0 0 0 1px rgba(20,124,255,.10),0 6px 18px rgba(20,124,255,.06);
}
.sidebar nav a.active:before{
content:"";
width:4px;
align-self:stretch;
margin:-5px 0 -5px -12px;
border-radius:0 8px 8px 0;
background:linear-gradient(180deg,#238cff,#0b6fe5);
}
.library-title{padding:18px 12px 8px;color:#9aacc1;font-size:9px;letter-spacing:.16em;font-weight:700}
.sidebar-footer{
flex:0 0 auto;
padding-top:10px;
background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 18%);
}
.side-premium{
position:relative;
overflow:hidden;
padding:13px;
border-radius:16px;
background:linear-gradient(135deg,#fff7df 0%,#fff1be 55%,#ffe8a1 100%);
border:1px solid rgba(219,169,48,.24);
box-shadow:0 12px 28px rgba(190,139,20,.12);
}
.side-premium:after{
content:"";
position:absolute;
width:90px;height:90px;border-radius:50%;
right:-35px;top:-45px;
background:rgba(255,255,255,.45);
}
.premium-crown{font-size:17px;color:#b67a00}
.premium-copy b{font-size:12px;color:#735000}
.premium-copy small{display:block;color:#98702a;font-size:9px;line-height:1.35;margin-top:3px}
.side-premium button{
margin-top:10px;
width:100%;
border:0;
border-radius:10px;
padding:8px 10px;
color:#795100;
background:rgba(255,255,255,.72);
font-size:10px;
font-weight:700;
}
.admin-side-links{margin-top:8px;display:grid;gap:4px}
.admin-side-link{display:flex;align-items:center;gap:12px;text-decoration:none}
/* Workspace / header */
.workspace{
min-width:0;
background:
radial-gradient(circle at 38% 0%,rgba(21,132,255,.045),transparent 29%),
transparent;
}
.topbar{
height:74px;
padding:12px 20px;
gap:9px;
border-bottom:1px solid rgba(221,232,244,.9);
background:rgba(248,251,255,.79);
backdrop-filter:blur(22px) saturate(160%);
box-shadow:0 6px 22px rgba(30,74,117,.035);
}
.back,.bell{
width:42px;height:42px;
border:1px solid #dce8f5;
background:rgba(255,255,255,.92);
color:#365875;
box-shadow:0 6px 18px rgba(28,75,120,.055);
transition:.2s ease;
}
.back:hover,.bell:hover{transform:translateY(-1px);border-color:#c8ddf3;color:#147cff;box-shadow:0 9px 22px rgba(20,124,255,.10)}
.search{
width:min(760px,60vw);
height:48px;
border-radius:16px;
border:1px solid rgba(210,226,243,.95);
background:rgba(255,255,255,.94);
box-shadow:0 10px 28px rgba(24,72,119,.055);
padding:0 15px;
}
.search input{height:46px;font-size:13px}
.search input::placeholder{color:#91a4bc}
.search kbd{background:#f4f8fd;color:#89a0b9;border-color:#d9e6f4}
.account{
padding:4px 7px 4px 4px;
border-radius:14px;
transition:.2s ease;
}
.account:hover{background:rgba(255,255,255,.8)}
.account i{
width:42px;height:42px;
background:linear-gradient(135deg,#1a8cff,#0d70e8);
box-shadow:0 8px 20px rgba(20,124,255,.24);
}
.account small{font-size:10px}
.account small b{font-size:11px;color:#102c50}
.account-chevron{color:#58728e}
/* Page canvas */
.view{
padding:20px 20px 110px;
max-width:1840px;
}
.home-layout{
grid-template-columns:minmax(0,1fr) 330px;
gap:18px;
}
.main-col{min-width:0}
/* Hero */
.hero-carousel{
height:338px;
border-radius:24px;
border:1px solid rgba(255,255,255,.8);
box-shadow:0 24px 60px rgba(17,55,98,.16);
isolation:isolate;
}
.hero{height:338px;background-position:center 30%}
.hero:before{
content:"";
position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(2,14,34,.18));
}
.hero:after{
background:
linear-gradient(90deg,rgba(2,14,36,.94) 0%,rgba(4,21,49,.82) 30%,rgba(5,28,60,.38) 58%,rgba(2,14,35,.16) 78%,rgba(2,14,35,.26) 100%),
linear-gradient(0deg,rgba(1,12,30,.38),transparent 38%);
}
.hero-copy{
z-index:3;
width:58%;
max-width:690px;
padding:46px 42px;
}
.hero-label{
display:inline-flex;
align-items:center;
gap:7px;
padding:6px 9px;
border-radius:999px;
background:rgba(30,137,255,.88);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 6px 18px rgba(16,112,223,.22);
font-size:9px;
letter-spacing:.13em;
}
.hero h1{
margin:15px 0 10px;
font-size:44px;
line-height:1.03;
letter-spacing:-.035em;
text-shadow:0 3px 18px rgba(0,0,0,.25);
}
.hero p{max-width:590px;color:#d8e7f7;font-size:12px;line-height:1.62}
.hero-tags{gap:6px;margin-top:12px}
.hero-tags span{
padding:5px 9px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.17);
backdrop-filter:blur(8px);
}
.hero-actions{margin-top:18px;gap:9px}
.hero-actions .primary,.hero-actions .secondary{min-height:42px;padding:0 17px;border-radius:12px}
.hero-actions .primary{
background:linear-gradient(135deg,#1990ff,#0d70e8);
box-shadow:0 10px 28px rgba(20,124,255,.28);
}
.hero-actions .primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.hero-actions .secondary{background:rgba(255,255,255,.12);backdrop-filter:blur(9px)}
.hero-nav{
position:absolute;
right:18px;bottom:17px;z-index:9;
display:flex;gap:8px;
}
.hero-nav button{
width:40px;height:40px;border-radius:50%;
border:1px solid rgba(255,255,255,.28);
background:rgba(8,20,43,.45);
color:#fff;
font-size:22px;
backdrop-filter:blur(10px);
}
.hero-nav button:hover{background:rgba(20,124,255,.75)}
.hero-carousel>.hero-dots{left:42px;bottom:22px;transform:none}
/* Sections */
.section{margin-top:18px}
.section-head{margin-bottom:10px;align-items:center}
.section-head h2{font-size:22px;letter-spacing:-.03em;color:#0a2149}
.section-head p{margin-top:3px;font-size:10px;color:#8ea2ba}
.section-head a{
padding:7px 9px;
border-radius:9px;
color:#0b73e6;
font-size:10px;
cursor:pointer;
}
.section-head a:hover{background:#eaf4ff}
.film-row{gap:13px}
.film-card{border-radius:16px}
.film-card .thumb{
border-radius:16px;
box-shadow:0 12px 30px rgba(24,65,108,.11);
border:1px solid rgba(255,255,255,.85);
transform:translateZ(0);
}
.film-card .thumb:before,
.short-card .thumb:before{
content:"";
position:absolute;inset:0;z-index:1;
border:1px solid rgba(255,255,255,.15);
border-radius:inherit;
pointer-events:none;
}
.film-card:hover .thumb,.short-card:hover .thumb{box-shadow:0 18px 38px rgba(19,66,113,.16)}
.film-card b{font-size:12px;margin-top:8px;color:#0d274c}
.film-card small{display:block;margin-top:2px;color:#8095ae}
.play{
width:34px;height:34px;
background:rgba(255,255,255,.96);
box-shadow:0 7px 20px rgba(7,34,70,.20);
}
.duration{top:9px;right:9px;background:rgba(3,15,34,.76);backdrop-filter:blur(7px)}
.short-row{grid-template-columns:repeat(7,minmax(90px,1fr));gap:11px}
.short-card .thumb{
border-radius:16px;
border:1px solid rgba(255,255,255,.9);
box-shadow:0 11px 26px rgba(24,65,108,.10);
}
.short-card b{font-size:10px;color:#163255}
/* Right rail */
.home-right-rail{gap:14px}
.rail-card{
border-radius:20px;
border:1px solid rgba(218,231,246,.95);
padding:15px;
background:rgba(255,255,255,.93);
box-shadow:var(--bf-shadow-soft);
}
.rail-card h3{font-size:16px;color:#0c2448}
.rail-card h3 a{padding:5px 7px;border-radius:8px}
.rail-card h3 a:hover{background:#eef6ff}
.for-you-item,.trend-item{
grid-template-columns:28px 76px minmax(0,1fr) auto;
gap:9px;
padding:10px 0;
}
.for-you-item>span,.trend-item>span{
width:25px;height:25px;border-radius:9px;
display:grid;place-items:center;
background:#eff6fd;color:#52708f;
font-weight:700;
}
.for-you-item:first-of-type>span,.trend-item:first-of-type>span{background:#e5f2ff;color:#1174e7}
.for-you-item img,.trend-item img{width:76px;border-radius:10px}
.for-you-item b,.trend-item b{font-size:10px;line-height:1.35;color:#163255}
.for-you-item small,.trend-item small{display:block;margin-top:3px}
.circle-play{
width:31px;height:31px;border-radius:50%;
border:1px solid #dbe8f5;background:#f8fbff;color:#147cff;
}
.popular-grid{gap:8px}
.popular-chip{
border:1px solid #e1ebf6;
background:linear-gradient(180deg,#fbfdff,#f6faff);
padding:10px;
border-radius:12px;
color:#31506f;
}
.popular-chip:hover{border-color:#cfe2f7;background:#eef7ff}
/* Watch page */
.watch-page{grid-template-columns:minmax(0,1fr) 350px;gap:18px}
.video-box{
border-radius:22px;
box-shadow:0 28px 65px rgba(13,47,86,.22);
border:1px solid rgba(255,255,255,.13);
}
.watch-meta{padding:18px 4px}
.watch-meta h1{font-size:28px;letter-spacing:-.03em}
.queue{
top:92px;
border-radius:20px;
padding:14px;
box-shadow:var(--bf-shadow-soft);
}
.queue-item img{border-radius:10px}
/* Route pages */
.route-title{font-size:31px;letter-spacing:-.035em;color:#092048}
.route-sub{color:#8297b0}
.search-results{gap:14px}
.empty,.api-empty{
border-radius:20px!important;
background:rgba(255,255,255,.9)!important;
border:1px dashed #cadff3!important;
box-shadow:0 12px 28px rgba(22,65,110,.05);
}
.loading{padding:70px 20px;text-align:center;color:#7189a4;font-size:12px}
/* Dock */
.cinema-dock{
left:214px;
height:76px;
padding:9px 20px;
background:rgba(255,255,255,.92);
border-top:1px solid rgba(218,231,246,.95);
backdrop-filter:blur(22px) saturate(160%);
box-shadow:0 -14px 38px rgba(21,66,109,.08);
}
/* Motion */
@media (prefers-reduced-motion:no-preference){
.film-card,.short-card,.back,.bell,.primary,.secondary,.popular-chip,.rail-card,.sidebar nav a{transition-duration:.22s}
}
/* Large desktop */
@media (min-width:1500px){
.app-shell{grid-template-columns:226px minmax(0,1fr)}
.sidebar{width:226px}
.cinema-dock{left:226px}
.view{padding-left:24px;padding-right:24px}
.home-layout{grid-template-columns:minmax(0,1fr) 350px;gap:20px}
.hero-carousel,.hero{height:360px}
.hero h1{font-size:48px}
.film-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Laptop height guard: keep premium/footer visible without clipping */
@media (max-height:820px) and (min-width:901px){
.sidebar{padding-top:12px}
.app-brand{padding-bottom:10px}
.sidebar nav{gap:2px}
.sidebar nav a,.admin-side-link{min-height:38px;padding:8px 11px}
.library-title{padding-top:10px}
.side-premium{padding:10px}
.premium-copy small{display:none}
.side-premium button{margin-top:7px;padding:7px 8px}
}
/* Tablet */
@media (max-width:1180px){
.app-shell{grid-template-columns:188px minmax(0,1fr)}
.sidebar{width:188px}
.cinema-dock{left:188px}
.home-layout{grid-template-columns:minmax(0,1fr) 292px}
.hero-carousel,.hero{height:300px}
.hero-copy{padding:36px 30px;width:64%}
.hero h1{font-size:36px}
.short-row{grid-template-columns:repeat(6,minmax(82px,1fr))}
.film-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Mobile */
@media (max-width:900px){
body{background:#f7faff}
.app-shell{display:block}
.sidebar{display:none}
.workspace{width:100%}
.topbar{
height:64px;
padding:9px 12px;
background:rgba(255,255,255,.88);
}
.back{display:none}
.search{width:auto;flex:1;height:44px;border-radius:14px}
.search input{height:42px}
.account small,.account-chevron{display:none}
.account i{width:38px;height:38px}
.view{padding:12px 12px 92px}
.home-layout,.content-split,.watch-page{display:block}
.home-right-rail{display:none}
.hero-carousel,.hero{height:330px;border-radius:20px}
.hero{background-image:var(--hero-mobile)!important;background-position:center 26%}
.hero:after{
background:
linear-gradient(0deg,rgba(2,13,31,.96) 0%,rgba(4,20,45,.68) 48%,rgba(4,20,45,.12) 78%),
linear-gradient(90deg,rgba(3,17,39,.25),transparent);
}
.hero-copy{
width:100%;max-width:none;
padding:0 20px 26px;
position:absolute;left:0;right:0;bottom:0;
}
.hero-label{font-size:8px}
.hero h1{font-size:30px;margin:10px 0 6px;max-width:95%}
.hero p{font-size:11px;-webkit-line-clamp:2;max-width:90%}
.hero-tags{display:none}
.hero-actions{margin-top:12px}
.hero-actions .primary,.hero-actions .secondary{min-height:40px;padding:0 15px}
.hero-carousel>.hero-dots{left:20px;bottom:14px;transform:none}
.hero-nav{right:14px;bottom:14px}
.hero-nav button{width:36px;height:36px}
.section{margin-top:16px}
.section-head h2{font-size:19px}
.short-row{
display:flex;
overflow:auto;
gap:10px;
padding:2px 1px 8px;
scroll-snap-type:x proximity;
scrollbar-width:none;
}
.short-row::-webkit-scrollbar{display:none}
.short-card{flex:0 0 132px;scroll-snap-align:start}
.film-row{
display:flex;
overflow:auto;
gap:11px;
padding:2px 1px 8px;
scroll-snap-type:x proximity;
scrollbar-width:none;
}
.film-row::-webkit-scrollbar{display:none}
.film-card{flex:0 0 76vw;max-width:310px;scroll-snap-align:start}
.route-title{font-size:25px}
.search-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.queue{margin-top:14px;position:static}
.video-box{border-radius:16px}
.watch-meta h1{font-size:22px}
.cinema-dock{display:none!important}
.mobile-nav{
left:10px!important;right:10px!important;bottom:10px!important;
border-radius:18px!important;
border:1px solid rgba(216,230,245,.95)!important;
background:rgba(255,255,255,.94)!important;
box-shadow:0 16px 40px rgba(19,62,105,.16)!important;
backdrop-filter:blur(20px)!important;
}
}
@media (max-width:560px){
.bell{display:none}
.topbar{gap:7px}
.view{padding-left:10px;padding-right:10px}
.hero-carousel,.hero{height:300px}
.hero h1{font-size:27px}
.hero p{max-width:100%}
.hero-nav{display:none}
.short-card{flex-basis:122px}
.film-card{flex-basis:82vw}
.search-results{grid-template-columns:1fr 1fr}
}
/* === v2.5.1 YouTube player compatibility === */
.cinema-frame{position:relative}
.player-compat{
position:absolute;
right:12px;
top:12px;
z-index:6;
display:flex;
gap:7px;
align-items:center;
padding:6px;
border:1px solid rgba(255,255,255,.13);
border-radius:12px;
background:rgba(4,16,35,.58);
box-shadow:0 8px 26px rgba(0,0,0,.18);
backdrop-filter:blur(12px);
opacity:.3;
transition:opacity .18s ease,transform .18s ease;
}
.cinema-frame:hover .player-compat,
.player-compat:focus-within{opacity:1}
.player-compat button,
.player-compat a{
height:30px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 10px;
border:1px solid rgba(255,255,255,.18);
border-radius:9px;
background:rgba(255,255,255,.10);
color:#fff;
text-decoration:none;
font-size:9px;
font-weight:700;
white-space:nowrap;
}
.player-compat button:hover,
.player-compat a:hover{background:rgba(20,124,255,.86);border-color:rgba(255,255,255,.28)}
@media (max-width:900px){
.player-compat{
right:8px;top:8px;
max-width:calc(100% - 16px);
overflow:auto;
opacity:.85;
scrollbar-width:none;
}
.player-compat::-webkit-scrollbar{display:none}
.player-compat button,.player-compat a{height:29px;padding:0 8px;font-size:8px}
}
/* ============================================================
Begoling Film v2.7 — Member Accounts, Auth Gate & Profile
============================================================ */
.account{cursor:pointer;user-select:none}
.member-lock{
position:absolute;left:9px;top:9px;z-index:4;
display:inline-flex;align-items:center;gap:5px;
min-height:24px;padding:0 8px;border-radius:999px;
background:rgba(4,18,39,.72);color:#fff;
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(8px);
font-size:8px;font-weight:700;letter-spacing:.02em;
box-shadow:0 7px 18px rgba(0,0,0,.16);
}
.member-lock.compact{left:8px;top:8px;min-width:24px;padding:0 6px;justify-content:center}
.actions button.active{
color:#0c72e6;background:#e9f4ff;border-color:#cce3fb;
box-shadow:inset 0 0 0 1px rgba(20,124,255,.05);
}
/* Auth modal */
body.auth-open{overflow:hidden}
.member-modal[hidden]{display:none!important}
.member-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px}
.member-modal-backdrop{
position:absolute;inset:0;
background:rgba(5,18,39,.58);
backdrop-filter:blur(12px) saturate(120%);
}
.member-auth-card{
position:relative;z-index:2;
width:min(920px,calc(100vw - 36px));
min-height:540px;
display:grid;grid-template-columns:.88fr 1.12fr;
overflow:hidden;
border:1px solid rgba(255,255,255,.62);
border-radius:30px;
background:#fff;
box-shadow:0 42px 120px rgba(5,26,55,.30);
}
.member-auth-close{
position:absolute;right:14px;top:14px;z-index:5;
width:36px;height:36px;border:1px solid #e0e9f4;border-radius:50%;
background:rgba(255,255,255,.9);color:#35506f;
font-size:22px;line-height:1;cursor:pointer;
box-shadow:0 8px 20px rgba(22,65,110,.08);
}
.member-auth-brand{
position:relative;overflow:hidden;
padding:52px 42px;
display:flex;flex-direction:column;justify-content:center;
color:#fff;
background:
radial-gradient(circle at 85% 18%,rgba(82,194,255,.42),transparent 32%),
radial-gradient(circle at 10% 92%,rgba(93,106,255,.30),transparent 30%),
linear-gradient(145deg,#0b3f8e,#0a6fe8 48%,#13a7e7);
}
.member-auth-brand:after{
content:"";position:absolute;width:260px;height:260px;border-radius:50%;
right:-150px;bottom:-120px;border:1px solid rgba(255,255,255,.16);
box-shadow:0 0 0 36px rgba(255,255,255,.04),0 0 0 72px rgba(255,255,255,.025);
}
.member-auth-logo{
width:58px;height:58px;display:grid;place-items:center;
border-radius:17px;background:rgba(255,255,255,.96);color:#147cff;
font-size:25px;box-shadow:0 16px 34px rgba(0,26,72,.22);
}
.member-auth-kicker{margin-top:28px;font-size:9px;letter-spacing:.18em;font-weight:700;color:#cde7ff}
.member-auth-brand h2{margin:10px 0 12px;font-size:39px;line-height:1.02;letter-spacing:-.045em}
.member-auth-brand h2 span{color:#bfe7ff}
.member-auth-brand p{margin:0;max-width:320px;font-size:12px;line-height:1.65;color:#e1efff}
.member-auth-benefits{display:grid;gap:10px;margin-top:27px;font-size:10px;color:#eef7ff}
.member-auth-benefits span{display:flex;align-items:center;gap:8px}
.member-auth-main{
padding:58px 56px 42px;
display:flex;flex-direction:column;justify-content:center;
background:
radial-gradient(circle at 100% 0%,rgba(39,152,255,.06),transparent 28%),
#fff;
}
.member-auth-tabs{
display:grid;grid-template-columns:1fr 1fr;gap:5px;
padding:4px;margin-bottom:22px;border-radius:13px;background:#f1f6fb;
}
.member-auth-tabs button{
border:0;border-radius:10px;padding:11px 12px;
background:transparent;color:#7086a0;font:700 11px 'Bai Jamjuree';cursor:pointer;
}
.member-auth-tabs button.active{background:#fff;color:#0c6fdc;box-shadow:0 6px 16px rgba(20,64,108,.08)}
.member-auth-main form{display:grid;gap:14px}
.member-auth-main form[hidden]{display:none!important}
.member-auth-main label{
display:grid;gap:6px;color:#294664;font-size:10px;font-weight:700;
}
.member-auth-main input:not([type="checkbox"]){
width:100%;height:46px;padding:0 13px;
border:1px solid #d9e6f3;border-radius:12px;
background:#fbfdff;color:#102b4d;
font:500 12px 'Bai Jamjuree';
outline:none;transition:.18s ease;
}
.member-auth-main input:not([type="checkbox"]):focus{
border-color:#85bdf5;background:#fff;box-shadow:0 0 0 4px rgba(20,124,255,.08);
}
.member-pass-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.member-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px!important;font-weight:500!important;color:#617892!important}
.member-check input{accent-color:#147cff}
.member-hp{position:absolute!important;left:-99999px!important;opacity:0!important;pointer-events:none!important}
.member-submit{
min-height:46px;border:0;border-radius:12px;
background:linear-gradient(135deg,#147cff,#12a9eb);
color:#fff;font:700 12px 'Bai Jamjuree';cursor:pointer;
box-shadow:0 12px 26px rgba(20,124,255,.23);
transition:.2s ease;
}
.member-submit:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(20,124,255,.28)}
.member-submit:disabled{opacity:.65;cursor:wait;transform:none}
.member-forgot{justify-self:center;color:#0e73e1;text-decoration:none;font-size:10px}
.member-terms{color:#8b9db1;font-size:9px;line-height:1.5;text-align:center}
.member-auth-message{
margin:-8px 0 14px;padding:10px 12px;border-radius:11px;
background:#fff2f2;border:1px solid #ffd7d7;color:#bf3030;font-size:10px;line-height:1.45;
}
.member-auth-message.ok{background:#effbf5;border-color:#ccefdc;color:#258454}
/* Toast */
.bf-toast{
position:fixed;right:22px;bottom:22px;z-index:10100;
max-width:min(360px,calc(100vw - 30px));
padding:12px 15px;border-radius:13px;
background:#0c2748;color:#fff;font-size:11px;font-weight:600;
box-shadow:0 18px 45px rgba(3,21,43,.25);
opacity:0;transform:translateY(14px);pointer-events:none;
transition:.22s ease;
}
.bf-toast.show{opacity:1;transform:none}
.bf-toast.error{background:#8f2c32}
/* Member gate */
.member-gate-page{
min-height:520px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:40px 20px;
border:1px solid #dfebf7;border-radius:24px;background:rgba(255,255,255,.86);
box-shadow:var(--bf-shadow-soft);
}
.member-gate-icon{
width:74px;height:74px;display:grid;place-items:center;border-radius:22px;
background:linear-gradient(145deg,#1a8dff,#0e70e8);color:#fff;
font-size:28px;font-weight:700;box-shadow:0 16px 34px rgba(20,124,255,.22);
}
.member-gate-page h1{margin:20px 0 7px;font-size:30px;letter-spacing:-.035em}
.member-gate-page p{margin:0;max-width:520px;color:#7b91aa;font-size:12px;line-height:1.6}
.member-gate-page button{
margin-top:20px;border:0;border-radius:12px;padding:12px 18px;
background:linear-gradient(135deg,#147cff,#12a7eb);color:#fff;
font:700 11px 'Bai Jamjuree';cursor:pointer;
}
/* Profile */
.profile-page{max-width:1320px;margin:0 auto;padding-bottom:40px}
.profile-hero{
position:relative;overflow:hidden;
display:flex;align-items:center;gap:20px;
min-height:180px;padding:28px 30px;
border:1px solid #dbe8f5;border-radius:26px;
background:
radial-gradient(circle at 85% 20%,rgba(45,164,255,.18),transparent 27%),
linear-gradient(135deg,#fff,#f2f8ff);
box-shadow:var(--bf-shadow-soft);
}
.profile-hero:after{
content:"";position:absolute;width:230px;height:230px;border-radius:50%;
right:-110px;bottom:-155px;border:1px solid rgba(20,124,255,.12);
box-shadow:0 0 0 28px rgba(20,124,255,.035),0 0 0 58px rgba(20,124,255,.022);
}
.profile-avatar{
width:94px;height:94px;flex:0 0 94px;
display:grid;place-items:center;border-radius:28px;
background:linear-gradient(145deg,#1787ff,#0c65d9);color:#fff;
font-size:38px;font-weight:700;
box-shadow:0 18px 38px rgba(20,124,255,.22);
}
.profile-identity{position:relative;z-index:2;min-width:0}
.profile-badge{
display:inline-flex;padding:5px 9px;border-radius:999px;
background:#e7f3ff;color:#0d73de;font-size:8px;font-weight:700;letter-spacing:.1em;
}
.profile-identity h1{margin:7px 0 5px;font-size:31px;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-identity p{margin:0;color:#788ea8;font-size:11px}
.profile-logout{
position:relative;z-index:2;margin-left:auto;
border:1px solid #d9e6f3;border-radius:12px;padding:10px 14px;
background:rgba(255,255,255,.86);color:#486784;
font:700 10px 'Bai Jamjuree';cursor:pointer;
}
.profile-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;
}
.profile-stats>div{
min-height:92px;padding:17px 18px;display:flex;flex-direction:column;justify-content:center;
border:1px solid #dfebf6;border-radius:18px;background:#fff;
box-shadow:0 9px 24px rgba(26,71,115,.05);
}
.profile-stats b{font-size:22px;line-height:1;color:#0b68d3}
.profile-stats span{margin-top:7px;color:#8497ad;font-size:9px;font-weight:600}
.profile-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}
.profile-card{
min-height:270px;padding:22px;
border:1px solid #dfebf6;border-radius:20px;background:#fff;
box-shadow:0 10px 28px rgba(26,71,115,.055);
}
.profile-card-kicker{color:#147cff;font-size:8px;letter-spacing:.13em;font-weight:700}
.profile-card h2{margin:6px 0 5px;font-size:20px;letter-spacing:-.025em}
.profile-card p{margin:0;color:#8598ae;font-size:10px;line-height:1.55}
.profile-card form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:22px}
.profile-card label{display:grid;gap:6px;color:#506b88;font-size:9px;font-weight:700}
.profile-card input{
height:42px;padding:0 12px;border:1px solid #dbe7f4;border-radius:11px;background:#f9fcff;
color:#1d3857;font:500 11px 'Bai Jamjuree';outline:none;
}
.profile-card input:focus{border-color:#8ac0f5;box-shadow:0 0 0 4px rgba(20,124,255,.07)}
.profile-card input:disabled{color:#899caf;background:#f4f7fa}
.profile-card form button,.profile-security>a{
min-height:42px;border:0;border-radius:11px;padding:0 14px;
display:inline-flex;align-items:center;justify-content:center;
background:#147cff;color:#fff;text-decoration:none;
font:700 10px 'Bai Jamjuree';cursor:pointer;
}
.profile-security{display:flex;flex-direction:column}
.profile-security>a{margin-top:22px;align-self:flex-start;background:#eef6ff;color:#0b6fdc;border:1px solid #d6e7f8}
.profile-security small{margin-top:auto;color:#91a2b5;font-size:9px;line-height:1.5}
.profile-collection{
margin-top:16px;padding:18px;
border:1px solid #dfebf6;border-radius:20px;background:rgba(255,255,255,.82);
}
.profile-film-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.profile-empty{
min-height:120px;display:grid;place-items:center;
color:#91a3b7;font-size:10px;text-align:center;
border:1px dashed #d5e4f2;border-radius:16px;background:#f9fcff;
}
.profile-empty.wide{grid-column:1/-1;min-height:230px}
.member-library-grid{margin-top:18px}
/* Mobile auth/profile */
@media(max-width:900px){
.member-modal{padding:10px;align-items:end}
.member-auth-card{
width:100%;max-height:calc(100dvh - 20px);min-height:0;
grid-template-columns:1fr;border-radius:26px;overflow:auto;
}
.member-auth-brand{padding:28px 24px 24px;min-height:230px;justify-content:flex-start}
.member-auth-logo{width:48px;height:48px;border-radius:14px;font-size:20px}
.member-auth-kicker{margin-top:18px}
.member-auth-brand h2{font-size:31px;margin:7px 0}
.member-auth-brand p{max-width:520px}
.member-auth-benefits{display:none}
.member-auth-main{padding:26px 22px 28px}
.member-auth-close{top:12px;right:12px}
.profile-hero{padding:20px;border-radius:22px;gap:14px}
.profile-avatar{width:72px;height:72px;flex-basis:72px;border-radius:22px;font-size:30px}
.profile-identity h1{font-size:24px}
.profile-logout{padding:9px 11px}
.profile-stats{grid-template-columns:1fr 1fr;gap:9px}
.profile-grid{grid-template-columns:1fr}
.profile-card{min-height:0}
.profile-film-row{display:flex;overflow:auto;gap:10px;padding-bottom:6px;scrollbar-width:none}
.profile-film-row::-webkit-scrollbar{display:none}
.profile-film-row .film-card{flex:0 0 72vw;max-width:290px}
}
@media(max-width:560px){
.member-modal{padding:0;align-items:stretch}
.member-auth-card{max-height:100dvh;height:100dvh;border:0;border-radius:0}
.member-auth-brand{min-height:190px;padding:24px 20px 18px}
.member-auth-brand h2{font-size:28px}
.member-auth-brand p{font-size:10px}
.member-auth-main{padding:22px 18px 30px}
.member-pass-grid{grid-template-columns:1fr}
.member-auth-tabs{margin-bottom:17px}
.bf-toast{left:12px;right:12px;bottom:86px;max-width:none;text-align:center}
.member-lock{font-size:7px;min-height:22px}
.profile-page{padding-bottom:76px}
.profile-hero{align-items:flex-start;flex-wrap:wrap;padding:18px}
.profile-avatar{width:64px;height:64px;flex-basis:64px;border-radius:19px;font-size:27px}
.profile-identity{flex:1;min-width:160px}
.profile-identity h1{font-size:21px}
.profile-identity p{font-size:9px;line-height:1.45}
.profile-logout{margin-left:78px}
.profile-stats>div{min-height:78px;padding:14px}
.profile-stats b{font-size:18px}
.profile-card{padding:18px}
.profile-card form{grid-template-columns:1fr;margin-top:18px}
.profile-card form button{width:100%}
.profile-collection{padding:14px}
.member-gate-page{min-height:calc(100dvh - 165px);border-radius:20px}
}
/* ============================================================
Begoling Film v2.7.1 — Premium Member Profile Refresh
============================================================ */
.profile-v271{max-width:1240px;margin:0 auto;padding:4px 0 52px}
.profile-cover{
position:relative;overflow:hidden;
border-radius:28px;
background:
linear-gradient(135deg,#061a3a 0%,#0b2f68 48%,#0f72df 100%);
box-shadow:0 26px 70px rgba(10,48,94,.20);
border:1px solid rgba(255,255,255,.08);
color:#fff;
}
.profile-cover:before{
content:"";position:absolute;inset:0;
background:
linear-gradient(115deg,rgba(255,255,255,.06),transparent 30%),
radial-gradient(circle at 84% 8%,rgba(91,194,255,.32),transparent 26%);
pointer-events:none;
}
.profile-cover-glow{position:absolute;border-radius:50%;pointer-events:none}
.profile-cover-glow.one{width:260px;height:260px;right:-110px;top:-120px;border:1px solid rgba(255,255,255,.13);box-shadow:0 0 0 30px rgba(255,255,255,.035),0 0 0 64px rgba(255,255,255,.02)}
.profile-cover-glow.two{width:150px;height:150px;left:42%;bottom:-110px;background:rgba(29,176,255,.12);filter:blur(4px)}
.profile-cover-main{
position:relative;z-index:2;
display:flex;align-items:center;gap:18px;
padding:26px 28px 22px;
}
.profile-avatar-wrap{position:relative;flex:0 0 auto}
.profile-v271 .profile-avatar{
width:84px;height:84px;flex-basis:84px;
border-radius:24px;
background:linear-gradient(145deg,#22a7ff,#116be9);
border:1px solid rgba(255,255,255,.34);
box-shadow:0 18px 40px rgba(2,20,48,.26),inset 0 1px 0 rgba(255,255,255,.24);
}
.profile-online{
position:absolute;right:2px;bottom:3px;width:15px;height:15px;border-radius:50%;
background:#39d98a;border:3px solid #0a2d62;box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.profile-v271 .profile-identity{color:#fff}
.profile-meta-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-v271 .profile-badge{
background:rgba(255,255,255,.12);color:#dff3ff;
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(8px);
}
.profile-verified{
display:inline-flex;align-items:center;gap:5px;
color:#bcefd6;font-size:8px;font-weight:700;
}
.profile-v271 .profile-identity h1{
margin:7px 0 3px;color:#fff;font-size:30px;line-height:1.05;
}
.profile-v271 .profile-identity p{color:#c9dcf1;font-size:10px}
.profile-joined{display:flex;align-items:center;gap:8px;margin-top:8px;color:#a8c4e4;font-size:8px}
.profile-joined i{width:3px;height:3px;border-radius:50%;background:#6fa8df}
.profile-cover-actions{
margin-left:auto;display:flex;align-items:center;gap:8px;position:relative;z-index:2;
}
.profile-edit,.profile-v271 .profile-logout{
min-height:38px;padding:0 13px;border-radius:11px;
font:700 9px 'Bai Jamjuree';cursor:pointer;transition:.18s ease;
}
.profile-edit{
border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;
backdrop-filter:blur(9px);
}
.profile-v271 .profile-logout{
margin:0;border:1px solid rgba(255,255,255,.12);background:rgba(5,19,42,.28);color:#cfe1f5;
}
.profile-edit:hover,.profile-v271 .profile-logout:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.profile-metrics{
position:relative;z-index:2;
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid rgba(255,255,255,.10);
background:rgba(3,18,41,.18);
backdrop-filter:blur(12px);
}
.profile-metrics button{
min-height:78px;border:0;border-right:1px solid rgba(255,255,255,.08);
display:grid;grid-template-columns:30px auto;grid-template-rows:auto auto;
align-content:center;justify-content:center;column-gap:9px;
background:transparent;color:#fff;cursor:pointer;
}
.profile-metrics button:last-child{border-right:0}
.profile-metrics button:hover{background:rgba(255,255,255,.05)}
.profile-metrics .metric-icon{
grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;
border-radius:9px;background:rgba(255,255,255,.10);color:#d9edff;font-size:15px;
}
.profile-metrics b{font-size:18px;line-height:1;color:#fff;text-align:left}
.profile-metrics small{margin-top:4px;color:#9fbddb;font-size:8px;text-align:left}
.profile-quickbar{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;
}
.profile-quickbar button{
min-height:68px;padding:12px 14px;
display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;
border:1px solid #dce8f4;border-radius:17px;
background:linear-gradient(180deg,#fff,#fbfdff);
box-shadow:0 9px 24px rgba(27,70,111,.045);
color:#173554;text-align:left;cursor:pointer;transition:.18s ease;
}
.profile-quickbar button:hover{transform:translateY(-2px);border-color:#c7def5;box-shadow:0 14px 30px rgba(25,77,128,.08)}
.profile-quickbar button>span{
width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
background:#eef6ff;color:#0f78e8;font-size:17px;
}
.profile-quickbar b{display:block;font-size:10px}
.profile-quickbar small{display:block;margin-top:3px;color:#8da0b4;font-size:8px}
.profile-quickbar i{font-style:normal;color:#9eb0c4;font-size:15px}
.profile-settings-grid{
display:grid;grid-template-columns:1.18fr .82fr;gap:12px;
margin-top:12px;scroll-margin-top:92px;
}
.profile-panel{
min-height:0;padding:20px;
border:1px solid #dce8f4;border-radius:19px;background:#fff;
box-shadow:0 10px 28px rgba(29,72,113,.05);
}
.profile-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.profile-panel-head h2{margin:5px 0 4px;font-size:18px;letter-spacing:-.025em}
.profile-panel-head p{margin:0;color:#8a9db2;font-size:9px;line-height:1.5}
.profile-panel-icon{
width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
border-radius:12px;background:#edf6ff;color:#157ae8;font-size:17px;
}
.profile-panel-main form{
display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
}
.profile-panel-main label{display:grid;gap:6px}
.profile-panel-main label>span{color:#58718c;font-size:8px;font-weight:700}
.profile-panel-main input{
height:42px;padding:0 11px;border:1px solid #dbe7f3;border-radius:11px;
background:#f9fcff;color:#1b3655;font:500 10px 'Bai Jamjuree';outline:none;
}
.profile-panel-main input:focus{border-color:#8dc3f7;box-shadow:0 0 0 4px rgba(20,124,255,.07);background:#fff}
.profile-panel-main input:disabled{color:#8da0b4;background:#f3f7fb}
.profile-form-foot{
grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;
}
.profile-form-foot small{color:#98a8ba;font-size:8px;line-height:1.45}
.profile-form-foot button{
min-height:38px;padding:0 14px;border:0;border-radius:10px;
background:linear-gradient(135deg,#147cff,#139ee9);color:#fff;
font:700 9px 'Bai Jamjuree';cursor:pointer;box-shadow:0 8px 18px rgba(20,124,255,.18);
}
.profile-form-foot button:disabled{opacity:.6;cursor:wait}
.profile-v271 .profile-security{display:block}
.profile-security-status{
display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px;
border:1px solid #dff0e8;border-radius:13px;background:#f5fcf8;
}
.profile-security-status>span{
width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
background:#dff7e9;color:#269664;font-weight:700;
}
.profile-security-status b{display:block;color:#315a49;font-size:9px}
.profile-security-status small{display:block;margin-top:3px;color:#7f9b8d;font-size:8px}
.profile-v271 .profile-security>a{
margin-top:12px;min-height:38px;padding:0 12px;border-radius:10px;
display:flex;align-items:center;justify-content:space-between;
background:#eef6ff;color:#0f72de;border:1px solid #d6e7f8;font-size:9px;
}
.profile-security-note{
margin-top:10px;padding-top:10px;border-top:1px solid #eef3f8;
color:#98a8b9;font-size:8px;line-height:1.45;
}
.profile-library{
margin-top:12px;padding:18px;
border:1px solid #dce8f4;border-radius:21px;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,252,255,.92));
box-shadow:0 10px 28px rgba(29,72,113,.045);
}
.profile-library-overview{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding-bottom:14px;border-bottom:1px solid #edf2f7;
}
.profile-library-overview h2{margin:4px 0 3px;font-size:19px;letter-spacing:-.025em}
.profile-library-overview p{margin:0;color:#8b9db0;font-size:9px}
.profile-library-overview>button{
border:1px solid #d8e7f5;border-radius:10px;padding:9px 11px;
background:#f6faff;color:#0e6fd9;font:700 8px 'Bai Jamjuree';cursor:pointer;
}
.profile-library-block{padding:15px 0;border-bottom:1px solid #edf2f7}
.profile-library-block:last-child{border-bottom:0;padding-bottom:0}
.profile-library-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.profile-library-title{display:flex;align-items:center;gap:9px}
.profile-library-title>span{
width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
background:#eef6ff;color:#1478e4;font-size:15px;
}
.profile-library-title h2{margin:0;font-size:13px}
.profile-library-title p{margin:2px 0 0;color:#96a6b7;font-size:8px}
.profile-library-head>button{
border:0;background:transparent;color:#1478e4;font:700 8px 'Bai Jamjuree';cursor:pointer;padding:6px;
}
.profile-v271 .profile-film-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.profile-v271 .profile-film-row .film-card b{font-size:10px}
.profile-v271 .profile-empty{
grid-column:1/-1;min-height:92px;
display:flex;flex-direction:column;gap:3px;
border:1px dashed #d5e3f1;border-radius:14px;background:#f9fcff;
}
.profile-v271 .profile-empty>span{font-size:18px;color:#6fa9df}
.profile-v271 .profile-empty>b{font-size:9px;color:#476682}
.profile-v271 .profile-empty>small{font-size:8px;color:#98a9ba}
@media(min-width:1500px){
.profile-v271{max-width:1320px}
.profile-cover-main{padding:30px 32px 24px}
.profile-v271 .profile-avatar{width:92px;height:92px;flex-basis:92px;font-size:40px}
.profile-v271 .profile-identity h1{font-size:34px}
}
@media(max-width:1000px){
.profile-settings-grid{grid-template-columns:1fr}
.profile-quickbar{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:760px){
.profile-v271{padding-top:0}
.profile-cover{border-radius:22px}
.profile-cover-main{align-items:flex-start;padding:20px;flex-wrap:wrap}
.profile-v271 .profile-avatar{width:72px;height:72px;flex-basis:72px;border-radius:21px;font-size:30px}
.profile-cover-actions{width:100%;margin-left:90px}
.profile-cover-actions button{flex:1}
.profile-metrics button{min-height:66px}
.profile-quickbar{grid-template-columns:1fr;gap:8px}
.profile-quickbar button{min-height:62px}
.profile-panel-main form{grid-template-columns:1fr}
.profile-form-foot{grid-column:1}
.profile-library{padding:14px}
.profile-library-overview{align-items:flex-start;flex-direction:column}
.profile-v271 .profile-film-row{
display:flex;overflow:auto;gap:10px;padding-bottom:5px;scrollbar-width:none;
}
.profile-v271 .profile-film-row::-webkit-scrollbar{display:none}
.profile-v271 .profile-film-row .film-card{flex:0 0 72vw;max-width:280px}
}
@media(max-width:520px){
.profile-cover-main{padding:18px 16px 16px}
.profile-v271 .profile-avatar{width:64px;height:64px;flex-basis:64px;border-radius:19px;font-size:27px}
.profile-v271 .profile-identity{flex:1;min-width:170px}
.profile-meta-line{gap:6px}
.profile-v271 .profile-identity h1{font-size:22px}
.profile-v271 .profile-identity p{font-size:9px;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-joined{font-size:7px;gap:6px;flex-wrap:wrap}
.profile-cover-actions{margin-left:0;width:100%}
.profile-metrics{grid-template-columns:repeat(3,1fr)}
.profile-metrics button{grid-template-columns:24px auto;column-gap:6px;min-height:62px}
.profile-metrics .metric-icon{width:24px;height:24px;font-size:12px}
.profile-metrics b{font-size:15px}
.profile-metrics small{font-size:7px}
.profile-quickbar button{padding:10px 12px}
.profile-panel{padding:16px;border-radius:17px}
.profile-panel-head h2{font-size:16px}
.profile-form-foot{align-items:stretch;flex-direction:column}
.profile-form-foot button{width:100%}
.profile-library{border-radius:18px}
}
/* === v2.7.2 Clean catalog tabs === */
.catalog-results-clean{padding-top:2px}
.catalog-results-clean .search-results{margin-top:0}
.catalog-results-clean .short-row{margin-top:18px}
.catalog-shorts-clean{margin-top:6px;padding-top:14px;border-top:1px solid #e8f0f8}
.catalog-loading{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8aa0b8;font-size:10px}
.catalog-loading span{width:30px;height:30px;border:3px solid #dce9f6;border-top-color:#147cff;border-radius:50%;animation:bfspin .8s linear infinite}
@keyframes bfspin{to{transform:rotate(360deg)}}
@media(max-width:900px){
.catalog-results-clean{padding-top:0}
.catalog-results-clean .search-results{gap:10px}
.catalog-shorts-clean{margin-top:10px;padding-top:10px}
}
/* ============================================================
Begoling Film v2.7.3 — Hot tab + Home discovery rail
============================================================ */
.home-discovery-rail{
display:flex;flex-direction:column;gap:12px;min-width:0;
}
.home-rail-shell,
.home-genre-card{
overflow:hidden;
border:1px solid #dce8f5;
border-radius:20px;
background:rgba(255,255,255,.94);
box-shadow:0 12px 32px rgba(28,74,118,.06);
}
.home-rail-section{padding:14px}
.home-rail-section+.home-rail-section{border-top:1px solid #edf2f7}
.home-rail-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
margin-bottom:10px;
}
.home-rail-head>div{min-width:0}
.home-rail-head span{
display:block;margin-bottom:3px;color:#1480ed;
font-size:7px;font-weight:800;letter-spacing:.13em;
}
.home-rail-head h3{
margin:0;color:#102b4d;font-size:15px;line-height:1.1;letter-spacing:-.02em;
}
.home-rail-head button{
flex:0 0 auto;border:0;background:transparent;color:#1777df;
padding:4px 0;font:700 8px 'Bai Jamjuree';cursor:pointer;
}
.home-rail-list{display:grid;gap:7px}
.home-rail-item{
min-width:0;display:grid;grid-template-columns:78px minmax(0,1fr) auto;
align-items:center;gap:9px;padding:7px;
border-radius:13px;cursor:pointer;transition:.18s ease;
}
.home-rail-item:hover{background:#f5f9fe;transform:translateX(2px)}
.home-rail-thumb{
position:relative;width:78px;aspect-ratio:16/9;overflow:hidden;border-radius:10px;
background:#dce8f5;
}
.home-rail-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.home-rail-rank{
position:absolute;left:5px;top:5px;min-width:20px;height:20px;padding:0 5px;
display:grid;place-items:center;border-radius:7px;
background:rgba(5,22,45,.72);color:#fff;font-size:8px;font-weight:800;
backdrop-filter:blur(7px);
}
.home-rail-play{
position:absolute;right:5px;bottom:5px;width:22px;height:22px;
display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);
color:#147cff;box-shadow:0 5px 12px rgba(6,30,62,.18);
}
.home-rail-play svg{width:11px;height:11px}
.home-rail-copy{min-width:0}
.home-rail-copy b{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
color:#163451;font-size:9px;line-height:1.35;
}
.home-rail-copy small{
display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#879bb1;font-size:7px;
}
.home-rail-copy em{display:block;margin-top:2px;color:#a0afbf;font-size:7px;font-style:normal}
.home-rail-rating{
align-self:start;margin-top:2px;white-space:nowrap;color:#f3a300;font-size:8px;
}
.home-rail-arrow{
width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
background:#edf6ff;color:#167ae7;font-size:16px;font-weight:500;
}
.home-rail-empty{padding:22px;text-align:center;color:#97a9bb;font-size:8px}
.home-genre-card{padding:14px}
.home-genre-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.home-genre-chip{
min-width:0;display:flex;align-items:center;gap:7px;padding:9px 10px;
border:1px solid #e2ebf5;border-radius:11px;background:#f8fbff;color:#365370;
font:600 8px 'Bai Jamjuree';cursor:pointer;transition:.18s ease;
}
.home-genre-chip:hover{background:#eef7ff;border-color:#cfe2f6}
.home-genre-chip span{font-size:12px}
.home-genre-chip b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-layout{grid-template-columns:minmax(0,1fr) 320px}
.home-right-rail{display:none!important}
/* Hot tab */
.hot-page{padding-top:1px}
.hot-feature-grid{
display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:11px;margin-bottom:14px;
}
.hot-feature-card{
position:relative;overflow:hidden;min-height:220px;border-radius:19px;
background:#17365d center/cover no-repeat;cursor:pointer;
box-shadow:0 16px 36px rgba(25,68,111,.12);
border:1px solid rgba(255,255,255,.86);
}
.hot-feature-card.hot-1{min-height:265px}
.hot-feature-shade{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(4,14,31,.05) 18%,rgba(4,14,31,.25) 48%,rgba(3,14,31,.92) 100%);
}
.hot-position{
position:absolute;left:12px;top:12px;z-index:2;
display:inline-grid;place-items:center;min-width:32px;height:28px;padding:0 8px;
border-radius:9px;background:rgba(8,28,58,.68);color:#fff;
border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(9px);
font-size:10px;font-weight:800;
}
.hot-feature-copy{
position:absolute;z-index:2;left:16px;right:16px;bottom:15px;color:#fff;
}
.hot-feature-copy small{
display:block;margin-bottom:5px;color:#a9d7ff;font-size:7px;font-weight:800;letter-spacing:.12em;
}
.hot-feature-copy b{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-size:16px;line-height:1.15;letter-spacing:-.02em;
}
.hot-1 .hot-feature-copy b{font-size:21px}
.hot-feature-copy p{
margin:5px 0 9px;color:#c9d9eb;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hot-feature-copy button{
min-height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;
border:0;border-radius:9px;background:#fff;color:#0a68d4;
font:700 8px 'Bai Jamjuree';cursor:pointer;
}
.hot-feature-copy button svg{width:12px;height:12px}
.hot-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-bottom:11px;padding:10px 12px;
border:1px solid #dce8f5;border-radius:14px;background:rgba(255,255,255,.82);
}
.hot-toolbar>div{display:grid;grid-template-columns:26px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.hot-toolbar>div>span{grid-row:1/3;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:#fff4e7}
.hot-toolbar b{font-size:10px;color:#183958}
.hot-toolbar small{margin-top:2px;color:#91a3b6;font-size:7px}
.hot-toolbar>button{
border:1px solid #d7e6f5;border-radius:9px;padding:8px 10px;
background:#f6faff;color:#0f72dc;font:700 8px 'Bai Jamjuree';cursor:pointer;
}
.hot-results{margin-top:0}
@media(max-width:1250px){
.home-layout{grid-template-columns:1fr}
.home-discovery-rail{display:none}
}
@media(max-width:1000px){
.hot-feature-grid{grid-template-columns:1.25fr 1fr}
.hot-feature-card.hot-3{display:none}
}
@media(max-width:700px){
.hot-feature-grid{
display:flex;overflow:auto;gap:9px;padding-bottom:5px;scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.hot-feature-grid::-webkit-scrollbar{display:none}
.hot-feature-card,.hot-feature-card.hot-1{
flex:0 0 82vw;min-height:210px;scroll-snap-align:start;
}
.hot-1 .hot-feature-copy b,.hot-feature-copy b{font-size:17px}
.hot-toolbar{padding:9px 10px}
.hot-toolbar small{display:none}
}
/* ============================================================
Begoling Film v2.7.4 — Clean embedded player
============================================================ */
.player-compat{display:none!important}
.clean-youtube{position:relative}
.clean-youtube iframe{background:#020713}
.bf-player-tools{
position:absolute;right:12px;bottom:12px;z-index:7;
display:flex;align-items:center;gap:7px;
padding:6px;border-radius:12px;
background:rgba(3,14,31,.50);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(12px);
box-shadow:0 8px 24px rgba(0,0,0,.18);
opacity:.22;
transition:opacity .18s ease,transform .18s ease;
}
.clean-youtube:hover .bf-player-tools,
.bf-player-tools:focus-within{opacity:.96}
.bf-player-tools button{
width:34px;height:34px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:10px;background:rgba(255,255,255,.08);color:#fff;
font:700 13px 'Bai Jamjuree';cursor:pointer;
transition:.16s ease;
}
.bf-player-tools button:hover{background:rgba(20,124,255,.88);border-color:rgba(255,255,255,.22)}
@media(max-width:760px){
.bf-player-tools{right:8px;bottom:8px;opacity:.75}
.bf-player-tools button{width:32px;height:32px}
}
/* ============================================================
Begoling Film v2.8 — Smart member experience
============================================================ */
/* Continue watching */
.continue-section{
padding:15px 15px 14px;
border:1px solid #dfeaf6;
border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.92));
box-shadow:0 12px 30px rgba(28,73,117,.05);
}
.continue-row{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
}
.continue-card{min-width:0;cursor:pointer;transition:.2s ease}
.continue-card:hover{transform:translateY(-3px)}
.continue-thumb{
position:relative;
overflow:hidden;
aspect-ratio:16/9;
border-radius:14px;
background:#16345e center/cover no-repeat;
box-shadow:0 10px 24px rgba(28,68,108,.11);
}
.continue-thumb:after{
content:"";position:absolute;inset:auto 0 0;height:44%;
background:linear-gradient(transparent,rgba(3,14,31,.76));
}
.continue-play{
position:absolute;left:9px;bottom:10px;z-index:3;
width:32px;height:32px;display:grid;place-items:center;
border-radius:50%;background:#fff;color:#0d72e1;
box-shadow:0 7px 18px rgba(4,27,56,.22);
}
.continue-play svg{width:16px;height:16px}
.continue-progress{
position:absolute;z-index:4;left:0;right:0;bottom:0;height:4px;
background:rgba(255,255,255,.28);
}
.continue-progress i{
display:block;height:100%;border-radius:0 999px 999px 0;
background:linear-gradient(90deg,#1681ff,#24c0f3);
}
.continue-thumb>small{
position:absolute;right:8px;bottom:9px;z-index:4;
padding:4px 6px;border-radius:7px;
background:rgba(4,18,39,.68);color:#fff;
font-size:7px;font-weight:700;backdrop-filter:blur(7px);
}
.continue-card>b{
display:block;margin-top:7px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#183653;font-size:10px;
}
.continue-card>span{display:block;margin-top:2px;color:#8da0b4;font-size:8px}
/* Search assistant */
.search{position:relative}
.search-assist{
position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;
overflow:hidden;padding:10px;
border:1px solid #dbe8f5;border-radius:16px;
background:rgba(255,255,255,.98);
box-shadow:0 24px 60px rgba(18,57,97,.16);
backdrop-filter:blur(20px);
}
.search-assist[hidden]{display:none!important}
.search-assist-head{
display:flex;align-items:center;justify-content:space-between;
padding:3px 4px 8px;
}
.search-assist-head b{color:#688099;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.search-assist-head button{
border:0;background:transparent;color:#8ba0b5;font:600 8px 'Bai Jamjuree';cursor:pointer;
}
.search-history-item{
width:100%;height:34px;padding:0 8px;
display:flex;align-items:center;gap:9px;
border:0;border-radius:9px;background:transparent;color:#35516e;
text-align:left;font:600 9px 'Bai Jamjuree';cursor:pointer;
}
.search-history-item:hover{background:#f3f8fe;color:#0f72de}
.search-history-item span{
width:24px;height:24px;display:grid;place-items:center;
border-radius:8px;background:#eef5fc;color:#67829d;
}
.search-suggest-item{
width:100%;padding:7px 8px;
display:grid;grid-template-columns:64px minmax(0,1fr) 22px;gap:9px;align-items:center;
border:0;border-radius:11px;background:transparent;color:#153452;text-align:left;cursor:pointer;
}
.search-suggest-item:hover{background:#f3f8fe}
.search-suggest-item img{
width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#e6eef7;
}
.search-suggest-item span{min-width:0}
.search-suggest-item b{
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;
}
.search-suggest-item small{display:block;margin-top:2px;color:#8da0b4;font-size:7px}
.search-suggest-item i{font-style:normal;color:#1780ec;font-size:10px}
.search-assist-empty{padding:20px 10px;text-align:center;color:#91a3b6;font-size:9px}
/* Notification center */
.bell{position:relative}
.bell-badge{
position:absolute;right:-2px;top:-2px;min-width:17px;height:17px;padding:0 5px;
display:grid;place-items:center;border-radius:999px;
background:#ff3d52;color:#fff;border:2px solid #fff;
font-size:7px;font-weight:800;line-height:1;
}
.bell-badge.is-empty{display:none}
.notification-panel{
position:fixed;right:84px;top:70px;z-index:90;
width:min(390px,calc(100vw - 28px));
overflow:hidden;
border:1px solid #dbe8f5;border-radius:20px;
background:rgba(255,255,255,.98);
box-shadow:0 30px 80px rgba(14,52,92,.18);
backdrop-filter:blur(22px);
}
.notification-panel[hidden]{display:none!important}
.notification-head{
display:flex;align-items:flex-start;justify-content:space-between;
padding:16px 16px 11px;border-bottom:1px solid #edf3f8;
}
.notification-head span{display:block;color:#1780ec;font-size:7px;font-weight:800;letter-spacing:.12em}
.notification-head h3{margin:4px 0 0;font-size:17px}
.notification-head button{
width:30px;height:30px;border:1px solid #e1ebf5;border-radius:9px;
background:#f8fbff;color:#617a94;font-size:17px;cursor:pointer;
}
.notification-list{padding:6px}
.notification-item{
width:100%;display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;
padding:8px;border:0;border-radius:13px;background:transparent;text-align:left;cursor:pointer;
}
.notification-item:hover{background:#f4f9fe}
.notification-item img{
width:86px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#e7eef6;
}
.notification-item span{min-width:0}
.notification-item b{display:block;color:#1680e9;font-size:7px}
.notification-item strong{
display:block;margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#193754;font-size:9px;
}
.notification-item small{display:block;margin-top:2px;color:#8da0b4;font-size:7px}
.notification-empty{padding:34px 16px;text-align:center;color:#93a5b7;font-size:9px}
.notification-footer{
width:100%;height:42px;border:0;border-top:1px solid #edf3f8;
background:#f8fbff;color:#0e72dc;font:700 9px 'Bai Jamjuree';cursor:pointer;
}
/* Personalization hint */
.home-rail-section .home-rail-head span{white-space:nowrap}
@media(max-width:1180px){
.continue-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.continue-card:nth-child(5){display:none}
}
@media(max-width:760px){
.continue-section{padding:13px 11px;border-radius:19px}
.continue-row{
display:flex;overflow-x:auto;gap:9px;padding-bottom:4px;
scroll-snap-type:x mandatory;scrollbar-width:none;
}
.continue-row::-webkit-scrollbar{display:none}
.continue-card{flex:0 0 72vw;max-width:285px;scroll-snap-align:start}
.search-assist{
position:fixed;left:12px;right:12px;top:108px;
max-height:58vh;overflow:auto;border-radius:17px;
}
.notification-panel{
right:10px;left:10px;top:66px;width:auto;max-height:74vh;overflow:auto;
}
}
/* ============================================================
Begoling Film v2.9 — Taste, Ratings & Follow
============================================================ */
.user-rating{
position:absolute;left:9px;top:9px;z-index:4;
display:inline-flex;align-items:center;gap:3px;
min-height:24px;padding:0 7px;border-radius:8px;
background:rgba(255,193,7,.94);color:#5d3a00;
font-size:8px;font-weight:800;
box-shadow:0 6px 16px rgba(76,45,0,.16);
}
.member-lock+.user-rating{top:38px}
.taste-section{
padding:14px 14px 15px;
border:1px solid #dce8f5;border-radius:20px;
background:
radial-gradient(circle at 100% 0%,rgba(39,160,255,.08),transparent 30%),
linear-gradient(180deg,#fff,#f8fbff);
box-shadow:0 12px 28px rgba(30,72,114,.05);
}
.taste-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.taste-chip{
min-width:0;padding:12px;
display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;
border:1px solid #dfeaf5;border-radius:14px;
background:#fbfdff;color:#284b6a;text-align:left;cursor:pointer;
transition:.18s ease;
}
.taste-chip:hover{transform:translateY(-2px);border-color:#c8dff4;background:#f4f9ff}
.taste-chip>span{
width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
background:#edf6ff;font-size:16px;
}
.taste-chip b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taste-chip small{color:#1478e4;font-size:8px;font-weight:700}
.subscribe.active{
background:#eaf6ff!important;color:#0e72dc!important;
border:1px solid #cfe5fb!important;
box-shadow:none!important;
}
.rating-actions{position:relative}
.rating-wrap{position:relative;display:flex}
.rating-wrap>button.active{
color:#a36a00!important;background:#fff6d8!important;border-color:#f2dc9a!important;
}
.rating-popover{
position:absolute;right:0;bottom:calc(100% + 10px);z-index:50;
width:240px;padding:14px;border:1px solid #dce8f5;border-radius:16px;
background:rgba(255,255,255,.98);
box-shadow:0 24px 60px rgba(12,47,84,.18);
backdrop-filter:blur(18px);
}
.rating-popover[hidden]{display:none!important}
.rating-popover>b{display:block;margin-bottom:10px;color:#1d3c59;font-size:10px}
.rating-stars{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.rating-stars button{
min-width:0!important;width:100%!important;height:38px!important;
padding:0!important;border-radius:10px!important;
background:#fff8de!important;border:1px solid #f0dda6!important;
color:#f3a900!important;font-size:17px!important;
}
.rating-stars button:hover{background:#fff0b8!important;transform:translateY(-1px)}
.rating-clear{
width:100%!important;margin-top:8px!important;height:30px!important;
background:#f7f9fc!important;color:#8496aa!important;border:1px solid #e6edf5!important;
font-size:8px!important;
}
/* Profile Taste Panel */
.profile-taste-panel{
margin-top:12px;padding:20px;
border:1px solid #dce8f4;border-radius:20px;
background:
radial-gradient(circle at 100% 0%,rgba(22,124,255,.07),transparent 28%),
linear-gradient(180deg,#fff,#fbfdff);
box-shadow:0 10px 28px rgba(29,72,113,.05);
}
.profile-taste-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
}
.profile-taste-head h2{margin:5px 0 4px;font-size:19px;letter-spacing:-.025em}
.profile-taste-head p{margin:0;color:#899db1;font-size:9px;line-height:1.5}
.profile-social-stats{
display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:220px;
}
.profile-social-stats>div{
min-height:62px;padding:11px 12px;
border:1px solid #e1ebf5;border-radius:14px;background:#f8fbff;
}
.profile-social-stats b{display:block;color:#0e73dc;font-size:17px;line-height:1}
.profile-social-stats span{display:block;margin-top:6px;color:#8fa1b4;font-size:8px}
.taste-picker{
display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px;
}
.taste-pick{
position:relative;min-width:0;min-height:54px;padding:10px;
display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;
border:1px solid #dfe9f4;border-radius:13px;background:#fafcff;
color:#34526d;text-align:left;cursor:pointer;transition:.18s ease;
}
.taste-pick:hover{border-color:#c6ddf3;background:#f4f9ff}
.taste-pick>span{
width:28px;height:28px;display:grid;place-items:center;border-radius:9px;
background:#edf6ff;font-size:13px;
}
.taste-pick b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taste-pick i{
display:none;position:absolute;right:7px;top:7px;
width:17px;height:17px;border-radius:50%;
background:#1582ef;color:#fff;font-style:normal;font-size:9px;
place-items:center;
}
.taste-pick.active{
border-color:#83bdf5;background:#eef7ff;
box-shadow:0 0 0 3px rgba(20,124,255,.06);
}
.taste-pick.active i{display:grid}
.profile-taste-foot{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-top:14px;padding-top:13px;border-top:1px solid #eef3f8;
}
.followed-preview{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.followed-preview small{color:#91a3b5;font-size:8px}
.followed-preview>span{
max-width:150px;padding:5px 8px;border-radius:999px;
background:#eef6ff;color:#426582;font-size:8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.profile-taste-foot>button{
flex:0 0 auto;min-height:38px;padding:0 14px;border:0;border-radius:10px;
background:linear-gradient(135deg,#147cff,#149de9);color:#fff;
font:700 9px 'Bai Jamjuree';cursor:pointer;
box-shadow:0 8px 18px rgba(20,124,255,.17);
}
.profile-taste-foot>button:disabled{opacity:.6;cursor:wait}
@media(max-width:1050px){
.taste-picker{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
.taste-row{display:flex;overflow:auto;gap:8px;scrollbar-width:none}
.taste-row::-webkit-scrollbar{display:none}
.taste-chip{flex:0 0 210px}
.rating-popover{position:fixed;left:12px;right:12px;bottom:82px;width:auto}
.profile-taste-head{display:block}
.profile-social-stats{margin-top:12px;min-width:0}
.taste-picker{grid-template-columns:1fr 1fr}
.profile-taste-foot{align-items:stretch;flex-direction:column}
.profile-taste-foot>button{width:100%}
}
@media(max-width:420px){
.taste-picker{grid-template-columns:1fr}
}
/* ============================================================
Begoling Film v3.0 — My Feed, Smart Collections & Levels
============================================================ */
/* My Feed */
.member-feed-page,.collections-page{max-width:1320px;margin:0 auto;padding-bottom:46px}
.member-feed-hero{
position:relative;overflow:hidden;min-height:260px;
display:flex;align-items:flex-end;padding:28px;
border-radius:24px;border:1px solid rgba(210,227,244,.9);
background:#0b2445 var(--feed-bg) center/cover no-repeat;
box-shadow:0 24px 60px rgba(17,55,95,.15);
}
.member-feed-shade{
position:absolute;inset:0;
background:
linear-gradient(90deg,rgba(3,14,31,.96) 0%,rgba(3,14,31,.75) 45%,rgba(3,14,31,.15) 100%),
linear-gradient(180deg,transparent 45%,rgba(3,14,31,.58));
}
.member-feed-copy{position:relative;z-index:2;max-width:650px;color:#fff}
.member-feed-copy>span,.collections-hero>div>span{
display:block;color:#77c5ff;font-size:8px;font-weight:800;letter-spacing:.15em
}
.member-feed-copy h1{
margin:7px 0 8px;font-size:32px;line-height:1.08;letter-spacing:-.035em;color:#fff
}
.member-feed-copy p{
margin:0;max-width:600px;color:#c5d8eb;font-size:10px;line-height:1.6
}
.member-feed-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.member-feed-tags button{
min-height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.16);
border-radius:999px;background:rgba(255,255,255,.09);color:#fff;
font:700 8px 'Bai Jamjuree';backdrop-filter:blur(8px);cursor:pointer
}
.member-feed-tags button:hover{background:rgba(255,255,255,.16)}
.smart-collection-block{
margin-top:13px;padding:16px;
border:1px solid #dce8f4;border-radius:20px;
background:linear-gradient(180deg,#fff,#fbfdff);
box-shadow:0 10px 28px rgba(29,72,113,.045)
}
.smart-collection-head{
display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px
}
.smart-collection-head>div{display:flex;align-items:center;gap:10px;min-width:0}
.smart-collection-head>div>span{
width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;
border-radius:11px;background:#edf6ff;color:#1478e4;font-size:15px
}
.smart-collection-head h2{margin:0;font-size:14px;color:#173654}
.smart-collection-head p{margin:2px 0 0;color:#92a4b6;font-size:8px}
.smart-collection-head button{
flex:0 0 auto;border:0;background:transparent;color:#1477df;
font:700 8px 'Bai Jamjuree';cursor:pointer
}
.smart-collection-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.smart-collection-empty{
grid-column:1/-1;min-height:96px;display:grid;place-items:center;
border:1px dashed #d6e4f1;border-radius:14px;background:#f9fcff;
color:#93a5b7;font-size:9px;text-align:center
}
/* Collections */
.collections-hero{
display:flex;align-items:center;justify-content:space-between;gap:24px;
min-height:190px;padding:26px 28px;
border-radius:24px;border:1px solid #dce8f5;
background:
radial-gradient(circle at 92% 10%,rgba(51,165,255,.13),transparent 26%),
linear-gradient(135deg,#fff,#f2f8ff);
box-shadow:0 16px 40px rgba(26,70,113,.07)
}
.collections-hero h1{
margin:6px 0 7px;font-size:28px;letter-spacing:-.035em;color:#102d4e
}
.collections-hero p{margin:0;color:#8499ae;font-size:10px}
.collections-summary{
display:grid;grid-template-columns:repeat(4,minmax(88px,1fr));gap:8px;min-width:430px
}
.collections-summary>div{
min-height:76px;padding:13px;
border:1px solid #dce8f5;border-radius:15px;background:rgba(255,255,255,.88)
}
.collections-summary b{display:block;color:#0f72de;font-size:20px;line-height:1}
.collections-summary span{display:block;margin-top:7px;color:#8ca0b5;font-size:8px}
/* Level & achievements */
.member-level-zone{
display:grid;grid-template-columns:1.08fr 1.92fr;gap:10px;margin-top:12px
}
.member-level-card{
min-height:124px;padding:16px;
display:grid;grid-template-columns:70px 1fr 70px;gap:14px;align-items:center;
border:1px solid #dce8f5;border-radius:19px;
background:
radial-gradient(circle at 100% 0%,rgba(22,124,255,.12),transparent 32%),
linear-gradient(135deg,#071d3d,#0d3f79);
color:#fff;box-shadow:0 16px 36px rgba(11,48,87,.13)
}
.member-level-badge{
width:70px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;
border-radius:20px;background:linear-gradient(145deg,#1687ff,#11a7e8);
border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 26px rgba(0,0,0,.17)
}
.member-level-badge small{font-size:6px;font-weight:800;letter-spacing:.14em;color:#d7efff}
.member-level-badge b{margin-top:2px;font-size:28px;line-height:1}
.member-level-copy{min-width:0}
.member-level-copy>span{display:block;color:#9fd2ff;font-size:7px;font-weight:800;letter-spacing:.12em}
.member-level-copy h2{margin:5px 0 8px;color:#fff;font-size:14px}
.member-xp{height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.13)}
.member-xp i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#23b7ff,#7fe0ff)}
.member-level-copy p{margin:5px 0 0;color:#9ebbd8;font-size:7px}
.member-streak{
min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;
border-left:1px solid rgba(255,255,255,.10)
}
.member-streak span{font-size:18px}
.member-streak b{margin-top:3px;font-size:20px;line-height:1}
.member-streak small{margin-top:4px;color:#9ebbd8;font-size:7px}
.member-badges{
display:grid;grid-template-columns:repeat(2,1fr);gap:8px
}
.member-badge-item{
min-height:58px;padding:9px 10px;
display:grid;grid-template-columns:34px 1fr 20px;gap:8px;align-items:center;
border:1px solid #dce8f5;border-radius:14px;background:#fff
}
.member-badge-item>span{
width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
background:#eef6ff;color:#1478e4;font-size:14px
}
.member-badge-item div{min-width:0}
.member-badge-item b{display:block;font-size:9px;color:#294965}
.member-badge-item small{display:block;margin-top:2px;color:#93a5b6;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-badge-item i{font-style:normal;color:#2ba971;font-size:11px}
.member-badge-item.locked{opacity:.48;filter:saturate(.55)}
.member-badge-item.locked i{color:#91a4b6}
/* Cinema mode */
body.cinema-focus{background:#061426}
body.cinema-focus .sidebar{opacity:.16;transition:.2s ease}
body.cinema-focus .topbar{background:rgba(7,22,43,.94);border-color:rgba(255,255,255,.07)}
body.cinema-focus .topbar .search{opacity:.22}
body.cinema-focus .topbar .back,
body.cinema-focus .topbar .bell,
body.cinema-focus .topbar .account{opacity:.25}
body.cinema-focus .view{background:#061426}
body.cinema-focus .watch-pro{grid-template-columns:1fr;max-width:1500px;margin:0 auto}
body.cinema-focus .watch-sidebar{display:none!important}
body.cinema-focus .cinema-frame{
max-height:calc(100vh - 125px);border-color:rgba(255,255,255,.09);
box-shadow:0 30px 90px rgba(0,0,0,.38)
}
body.cinema-focus .video-tags,
body.cinema-focus .video-title-row,
body.cinema-focus .creator-actions,
body.cinema-focus .video-desc,
body.cinema-focus .related-section{filter:brightness(.92)}
body.cinema-focus .video-title-row h1,
body.cinema-focus .video-stats b,
body.cinema-focus .creator b{color:#eaf4ff}
body.cinema-focus .video-stats,
body.cinema-focus .creator small{color:#7893ae}
body.cinema-focus .creator-actions{border-color:rgba(255,255,255,.08)}
body.cinema-focus .video-desc{
background:#0a213d;border-color:rgba(255,255,255,.08);color:#91a9c2
}
body.cinema-focus .actions button{background:#0a203b;border-color:rgba(255,255,255,.09);color:#c8ddf2}
body.cinema-focus [data-cinema-mode].active{background:#147cff!important;color:#fff!important;border-color:#147cff!important}
@media(max-width:1180px){
.smart-collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.smart-collection-grid .film-card:nth-child(5){display:none}
.member-level-zone{grid-template-columns:1fr}
}
@media(max-width:900px){
.collections-hero{display:block}
.collections-summary{margin-top:16px;min-width:0}
}
@media(max-width:760px){
.member-feed-hero{min-height:230px;padding:20px;border-radius:20px}
.member-feed-copy h1{font-size:25px}
.smart-collection-block{padding:13px;border-radius:18px}
.smart-collection-grid{
display:flex;overflow:auto;gap:9px;padding-bottom:4px;scrollbar-width:none
}
.smart-collection-grid::-webkit-scrollbar{display:none}
.smart-collection-grid .film-card{display:block!important;flex:0 0 72vw;max-width:280px}
.collections-hero{padding:20px;border-radius:20px}
.collections-hero h1{font-size:24px}
.collections-summary{grid-template-columns:1fr 1fr}
.member-level-card{grid-template-columns:58px 1fr}
.member-level-badge{width:58px;height:58px;border-radius:17px}
.member-level-badge b{font-size:23px}
.member-streak{
grid-column:1/-1;min-height:52px;border-left:0;border-top:1px solid rgba(255,255,255,.10);
flex-direction:row;gap:7px
}
.member-streak span{font-size:14px}
.member-streak b{font-size:17px}
.member-badges{grid-template-columns:1fr}
body.cinema-focus .sidebar{display:none!important}
body.cinema-focus .workspace{margin-left:0}
}
/* ============================================================
Begoling Film v3.1 — Watch Party & Custom Collections
============================================================ */
body.modal-open{overflow:hidden}
/* Custom collections */
.collections-create{
margin-top:14px;min-height:38px;padding:0 13px;
border:0;border-radius:11px;background:linear-gradient(135deg,#147cff,#16a8ea);
color:#fff;font:700 9px 'Bai Jamjuree';cursor:pointer;
box-shadow:0 9px 20px rgba(20,124,255,.18)
}
.custom-list-tools{display:flex;align-items:center;gap:6px}
.custom-list-tools button{
border:1px solid #dce8f4!important;border-radius:9px!important;
padding:7px 9px!important;background:#f8fbff!important;color:#56718c!important;
font:700 7px 'Bai Jamjuree'!important
}
.custom-list-tools button:last-child{color:#b34b56!important;background:#fff7f8!important;border-color:#f1dce0!important}
.custom-list-modal,.party-modal{
position:fixed;inset:0;z-index:10200;display:grid;place-items:center;padding:18px
}
.custom-list-modal[hidden],.party-modal[hidden]{display:none!important}
.custom-list-backdrop,.party-backdrop{
position:absolute;inset:0;background:rgba(4,17,37,.60);
backdrop-filter:blur(13px) saturate(120%)
}
.custom-list-card{
position:relative;z-index:2;width:min(520px,calc(100vw - 28px));
overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:24px;
background:#fff;box-shadow:0 34px 90px rgba(7,31,60,.28)
}
.custom-list-close,.party-close{
position:absolute;right:13px;top:13px;z-index:4;width:34px;height:34px;
display:grid;place-items:center;border:1px solid #e1eaf4;border-radius:50%;
background:#fff;color:#58718a;font-size:19px;cursor:pointer
}
.custom-list-head{padding:25px 25px 14px;background:linear-gradient(180deg,#f5faff,#fff)}
.custom-list-head>span,.party-card>header>span{
color:#147cff;font-size:7px;font-weight:800;letter-spacing:.14em
}
.custom-list-head h2,.party-card>header h2{margin:5px 0 4px;font-size:21px;letter-spacing:-.025em;color:#143453}
.custom-list-head p,.party-card>header p{margin:0;color:#8b9eb2;font-size:9px;line-height:1.5}
.custom-list-body{padding:8px 16px;max-height:340px;overflow:auto}
.custom-list-choice{
width:100%;min-height:58px;padding:8px 10px;
display:grid;grid-template-columns:38px 1fr 28px;align-items:center;gap:9px;
border:1px solid transparent;border-radius:13px;background:transparent;
color:#234561;text-align:left;cursor:pointer;transition:.16s ease
}
.custom-list-choice:hover{background:#f6faff;border-color:#e0ebf5}
.custom-list-choice.active{background:#eef7ff;border-color:#cbe3fa}
.custom-list-choice.manager{cursor:default}
.custom-list-icon{
width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
background:#edf6ff;color:#1479e5;font-size:15px
}
.custom-list-choice b{display:block;font-size:10px}
.custom-list-choice small{display:block;margin-top:3px;color:#91a3b6;font-size:8px}
.custom-list-choice>i{
width:26px;height:26px;display:grid;place-items:center;border-radius:9px;
background:#f0f6fc;color:#6d87a1;font-style:normal;font-size:11px
}
.custom-list-choice.active>i{background:#147cff;color:#fff}
.custom-list-empty{
min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;color:#8da1b5
}
.custom-list-empty>span{font-size:28px;color:#6ca9df}
.custom-list-empty>b{margin-top:7px;color:#47647f;font-size:10px}
.custom-list-empty>small{margin-top:3px;font-size:8px}
.custom-list-create{
display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 16px 18px;
border-top:1px solid #edf2f7
}
.custom-list-create input{
min-width:0;height:42px;padding:0 12px;border:1px solid #dce8f4;border-radius:11px;
background:#f9fcff;color:#1e3c59;font:500 10px 'Bai Jamjuree';outline:none
}
.custom-list-create input:focus{border-color:#84bdf4;box-shadow:0 0 0 4px rgba(20,124,255,.07);background:#fff}
.custom-list-create button{
border:0;border-radius:11px;padding:0 14px;background:#147cff;color:#fff;
font:700 9px 'Bai Jamjuree';cursor:pointer
}
/* Watch Party */
.party-card{
position:relative;z-index:2;width:min(720px,calc(100vw - 28px));
overflow:hidden;border:1px solid rgba(255,255,255,.70);border-radius:26px;
background:#fff;box-shadow:0 40px 110px rgba(5,28,58,.32)
}
.party-card>header{
padding:27px 28px 19px;
background:
radial-gradient(circle at 94% 0%,rgba(43,169,255,.18),transparent 29%),
linear-gradient(180deg,#f3f9ff,#fff)
}
.party-card [data-party-body]{padding:16px 20px 22px}
.party-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.party-start-grid>section{
min-height:235px;padding:20px;display:flex;flex-direction:column;
border:1px solid #dce8f5;border-radius:18px;background:linear-gradient(180deg,#fff,#f9fcff)
}
.party-start-grid>section>span{font-size:30px}
.party-start-grid h3{margin:10px 0 5px;font-size:16px;color:#193856}
.party-start-grid p{margin:0;color:#8da0b4;font-size:9px;line-height:1.55}
.party-start-grid>section>button{
margin-top:auto;min-height:40px;border:0;border-radius:11px;
background:linear-gradient(135deg,#147cff,#16a9ea);color:#fff;
font:700 9px 'Bai Jamjuree';cursor:pointer
}
.party-start-grid form{display:grid;gap:8px;margin-top:auto}
.party-start-grid input{
height:42px;padding:0 12px;text-align:center;letter-spacing:.18em;text-transform:uppercase;
border:1px solid #d8e6f4;border-radius:11px;background:#f9fcff;color:#183b5b;
font:800 13px 'Bai Jamjuree';outline:none
}
.party-start-grid form button{
min-height:40px;border:0;border-radius:11px;background:#0c2d55;color:#fff;
font:700 9px 'Bai Jamjuree';cursor:pointer
}
.party-active{display:grid;grid-template-columns:180px 1fr;gap:16px}
.party-code-box{
grid-row:1/3;padding:18px;display:flex;flex-direction:column;justify-content:center;
border-radius:17px;background:linear-gradient(145deg,#08214a,#0c65cd);color:#fff
}
.party-code-box small{font-size:7px;letter-spacing:.14em;color:#afd8ff}
.party-code-box b{margin:6px 0 12px;font-size:27px;letter-spacing:.14em}
.party-code-box button{
min-height:34px;border:1px solid rgba(255,255,255,.15);border-radius:9px;
background:rgba(255,255,255,.10);color:#fff;font:700 8px 'Bai Jamjuree';cursor:pointer
}
.party-room-title>span{display:block;color:#1680eb;font-size:7px;font-weight:800;letter-spacing:.12em}
.party-room-title h3{margin:4px 0 4px;font-size:15px;color:#193856}
.party-room-title p{margin:0;color:#8ea1b4;font-size:8px;line-height:1.5}
.party-people{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.party-people>div{
min-width:0;padding:8px;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;
border:1px solid #e2ebf5;border-radius:12px;background:#fafcff
}
.party-people i{
width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
background:linear-gradient(145deg,#1787ff,#0d70dd);color:#fff;font-style:normal;font-weight:800;font-size:11px
}
.party-people b{display:block;font-size:9px;color:#2d4b67;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-people small{display:block;margin-top:2px;color:#91a3b4;font-size:7px}
.party-people em{
padding:4px 6px;border-radius:999px;background:#eaf5ff;color:#0e72dc;
font-style:normal;font-size:6px;font-weight:800
}
.party-leave{
grid-column:2;justify-self:end;margin-top:6px;padding:8px 11px;
border:1px solid #efdfe2;border-radius:9px;background:#fff7f8;color:#b14e58;
font:700 8px 'Bai Jamjuree';cursor:pointer
}
.party-live-bar{
position:fixed;right:20px;bottom:20px;z-index:10120;
min-width:330px;max-width:440px;min-height:64px;padding:9px 10px;
display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:9px;
border:1px solid rgba(255,255,255,.12);border-radius:18px;
background:linear-gradient(135deg,rgba(5,25,51,.97),rgba(8,55,96,.97));
color:#fff;box-shadow:0 20px 55px rgba(4,25,50,.30);backdrop-filter:blur(18px)
}
.party-live-dot{
width:9px;height:9px;border-radius:50%;background:#39dc91;
box-shadow:0 0 0 5px rgba(57,220,145,.10)
}
.party-live-bar b{display:block;font-size:9px}
.party-live-bar span{display:block;margin-top:2px;color:#9dbbd8;font-size:7px}
.party-avatars{display:flex;align-items:center}
.party-avatars i{
width:27px;height:27px;margin-left:-6px;display:grid;place-items:center;
border:2px solid #0b345f;border-radius:50%;background:#167ff0;color:#fff;
font-style:normal;font-size:8px;font-weight:800
}
.party-avatars i:first-child{margin-left:0}
.party-live-bar>button{
border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 9px;
background:rgba(255,255,255,.08);color:#fff;font:700 7px 'Bai Jamjuree';cursor:pointer
}
@media(max-width:760px){
.custom-list-modal,.party-modal{padding:0;align-items:end}
.custom-list-card,.party-card{width:100%;max-height:92dvh;overflow:auto;border-radius:24px 24px 0 0}
.party-start-grid{grid-template-columns:1fr}
.party-start-grid>section{min-height:190px}
.party-active{grid-template-columns:1fr}
.party-code-box{grid-row:auto}
.party-leave{grid-column:1;width:100%}
.party-people{grid-template-columns:1fr}
.party-live-bar{
left:10px;right:10px;bottom:72px;min-width:0;max-width:none;
grid-template-columns:10px minmax(0,1fr) auto
}
.party-avatars{display:none}
.custom-list-tools{gap:4px}
}
/* ============================================================
Begoling Film v3.2 — Player Pro & Command Center
============================================================ */
body.command-open,
body.shortcut-open{overflow:hidden}
/* Command Center */
.command-trigger{
height:38px;min-width:46px;padding:0 9px;
display:inline-flex;align-items:center;justify-content:center;gap:4px;
border:1px solid #dce8f5;border-radius:11px;
background:rgba(255,255,255,.88);color:#54708c;
box-shadow:0 6px 18px rgba(23,65,107,.05);
font:700 8px 'Bai Jamjuree';cursor:pointer;transition:.18s ease
}
.command-trigger:hover{border-color:#bdd9f3;color:#0e75df;background:#f7fbff}
.command-trigger span{font-size:12px;color:#147cff}
.command-trigger b{font-size:8px}
.command-center,.shortcut-help{
position:fixed;inset:0;z-index:10400;display:grid;place-items:start center;
padding:9vh 18px 18px
}
.command-center[hidden],.shortcut-help[hidden]{display:none!important}
.command-backdrop,.shortcut-backdrop{
position:absolute;inset:0;background:rgba(4,17,37,.57);
backdrop-filter:blur(14px) saturate(120%)
}
.command-card{
position:relative;z-index:2;
width:min(690px,calc(100vw - 28px));max-height:78vh;overflow:hidden;
display:flex;flex-direction:column;
border:1px solid rgba(255,255,255,.68);border-radius:23px;
background:rgba(255,255,255,.985);
box-shadow:0 40px 120px rgba(5,30,61,.33)
}
.command-search{
min-height:62px;padding:10px 14px;
display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;
border-bottom:1px solid #eaf1f7
}
.command-search>span{
width:30px;height:30px;display:grid;place-items:center;border-radius:10px;
background:#edf6ff;color:#147cff;font-size:18px
}
.command-search input{
min-width:0;border:0;outline:none;background:transparent;color:#14324f;
font:600 14px 'Bai Jamjuree'
}
.command-search input::placeholder{color:#9aabba}
.command-search kbd,.command-card footer kbd,.shortcut-grid kbd{
min-width:25px;padding:4px 6px;border:1px solid #dce6f0;border-bottom-color:#c7d5e3;
border-radius:7px;background:#f8fafc;color:#6d8297;
box-shadow:0 1px 0 #cbd7e3;font:700 7px 'Bai Jamjuree';text-align:center
}
.command-results{padding:9px;overflow:auto;overscroll-behavior:contain}
.command-group+ .command-group{margin-top:8px;padding-top:8px;border-top:1px solid #edf2f7}
.command-group>small{
display:block;padding:5px 8px;color:#8ba0b4;
font-size:7px;font-weight:800;letter-spacing:.12em
}
.command-row,.command-film{
width:100%;min-height:54px;padding:7px 9px;
display:grid;grid-template-columns:36px minmax(0,1fr) 26px;align-items:center;gap:9px;
border:1px solid transparent;border-radius:12px;background:transparent;
color:#254661;text-align:left;cursor:pointer;transition:.14s ease
}
.command-row:hover,.command-row.selected,.command-film:hover,.command-film.selected{
background:#f2f8ff;border-color:#dbeaf8
}
.command-row>i{
width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
background:#edf6ff;color:#1379e7;font-style:normal;font-size:14px
}
.command-row span,.command-film span{min-width:0}
.command-row b,.command-film b{
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#1d3d5b;font-size:10px
}
.command-row em,.command-film em{
display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#92a4b6;font-style:normal;font-size:8px
}
.command-row>strong,.command-film>strong{color:#9aabba;font-size:10px;text-align:center}
.command-film{grid-template-columns:68px minmax(0,1fr) 26px}
.command-film img{
width:68px;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:#e8eef5
}
.command-empty{
padding:28px 15px;text-align:center;border:1px dashed #d8e5f2;border-radius:13px;
background:#f9fcff
}
.command-empty b{display:block;color:#46647f;font-size:10px}
.command-empty span{display:block;margin-top:4px;color:#93a5b7;font-size:8px}
.command-card footer{
min-height:42px;padding:8px 13px;
display:flex;align-items:center;gap:15px;flex-wrap:wrap;
border-top:1px solid #eaf1f7;background:#f9fbfd;color:#8296aa;font-size:7px
}
.command-card footer span{display:flex;align-items:center;gap:5px}
/* Shortcut overlay */
.shortcut-card{
position:relative;z-index:2;width:min(620px,calc(100vw - 28px));
padding:25px;border:1px solid rgba(255,255,255,.68);border-radius:23px;
background:#fff;box-shadow:0 40px 120px rgba(5,30,61,.33)
}
.shortcut-card>button{
position:absolute;right:13px;top:13px;width:34px;height:34px;
border:1px solid #e0e9f2;border-radius:50%;background:#fff;color:#678098;
font-size:18px;cursor:pointer
}
.shortcut-card>span{display:block;color:#147cff;font-size:7px;font-weight:800;letter-spacing:.14em}
.shortcut-card h2{margin:5px 0 17px;color:#173755;font-size:21px;letter-spacing:-.025em}
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shortcut-grid>div{
min-height:50px;padding:9px 10px;display:flex;align-items:center;gap:10px;
border:1px solid #e1eaf3;border-radius:12px;background:#fafcff
}
.shortcut-grid kbd{min-width:58px;padding:6px 7px}
.shortcut-grid b{color:#506c86;font-size:9px}
/* Continue Watching manager */
.continue-thumb{position:relative}
.continue-remove{
position:absolute;right:7px;top:7px;z-index:7;width:25px;height:25px;
display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:8px;
background:rgba(3,17,36,.63);color:#fff;font:700 14px/1 'Bai Jamjuree';
backdrop-filter:blur(9px);cursor:pointer;opacity:0;transform:translateY(-3px);transition:.16s ease
}
.continue-card:hover .continue-remove{opacity:1;transform:none}
.continue-remove:hover{background:#d94f5b}
/* Player Pro controls */
.bf-player-tools.pro{
right:12px;bottom:12px;gap:5px;padding:5px;
opacity:.28
}
.clean-youtube:hover .bf-player-tools.pro,.bf-player-tools.pro:focus-within{opacity:.98}
.bf-player-tools.pro button{
min-width:34px;width:auto;padding:0 8px;font-size:9px
}
.bf-player-tools.pro [data-bf-play],
.bf-player-tools.pro [data-bf-mute],
.bf-player-tools.pro [data-bf-fullscreen]{width:34px;padding:0}
.bf-speed{display:block}
.bf-speed select{
height:34px;padding:0 25px 0 9px;border:1px solid rgba(255,255,255,.12);border-radius:10px;
background:rgba(255,255,255,.08);color:#fff;
font:700 8px 'Bai Jamjuree';outline:none;cursor:pointer
}
.bf-speed select option{background:#0c2748;color:#fff}
/* Floating mini-player */
.mini-player-sentinel{height:1px;pointer-events:none}
.mini-player-placeholder{height:0;transition:height .12s ease}
.cinema-frame.is-mini-player{
position:fixed!important;right:22px!important;bottom:22px!important;left:auto!important;top:auto!important;
z-index:10080!important;width:min(420px,34vw)!important;height:auto!important;aspect-ratio:16/9!important;
margin:0!important;border-radius:16px!important;
box-shadow:0 28px 75px rgba(3,18,37,.38)!important;
animation:bfMiniIn .18s ease-out both
}
@keyframes bfMiniIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.cinema-frame.is-mini-player .bf-player-tools{
right:8px;bottom:8px;opacity:.8;transform:scale(.9);transform-origin:right bottom
}
.mini-player-chrome{
display:none;position:absolute;left:8px;top:8px;z-index:12;gap:5px
}
.is-mini-player .mini-player-chrome{display:flex}
.mini-player-chrome button{
width:30px;height:30px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.14);border-radius:9px;
background:rgba(3,17,36,.66);color:#fff;font:700 13px 'Bai Jamjuree';
backdrop-filter:blur(9px);cursor:pointer
}
.mini-player-chrome button:hover{background:#147cff}
body.mini-player-on .party-live-bar{bottom:22px;right:460px}
@media(max-width:900px){
.command-trigger{display:none}
.cinema-frame.is-mini-player{
right:10px!important;bottom:80px!important;width:min(360px,52vw)!important
}
body.mini-player-on .party-live-bar{right:10px;bottom:80px}
}
@media(max-width:620px){
.command-center,.shortcut-help{padding:0;align-items:end}
.command-card,.shortcut-card{
width:100%;max-height:92dvh;border-radius:24px 24px 0 0;border-bottom:0
}
.command-card{max-height:88dvh}
.shortcut-grid{grid-template-columns:1fr}
.continue-remove{opacity:1;transform:none}
.bf-player-tools.pro{left:8px;right:8px;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}
.bf-player-tools.pro::-webkit-scrollbar{display:none}
.bf-speed select{min-width:56px}
.cinema-frame.is-mini-player{
left:10px!important;right:10px!important;bottom:78px!important;
width:auto!important;max-width:none!important
}
body.mini-player-on .party-live-bar{display:none}
}
/* ============================================================
Begoling Film v3.3 — Community, Reviews & Reactions
============================================================ */
/* Watch-page reviews */
.watch-reviews{
margin-top:14px;padding:18px;
border:1px solid #dce8f5;border-radius:21px;
background:
radial-gradient(circle at 100% 0%,rgba(28,149,255,.06),transparent 25%),
linear-gradient(180deg,#fff,#fbfdff);
box-shadow:0 11px 30px rgba(27,70,111,.045)
}
.review-section-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding-bottom:13px;border-bottom:1px solid #edf2f7
}
.review-section-head>div>span,.community-section-head span,.review-composer-head>div>span{
display:block;color:#147cff;font-size:7px;font-weight:800;letter-spacing:.14em
}
.review-section-head h2,.community-section-head h2{
margin:4px 0 3px;color:#153552;font-size:18px;letter-spacing:-.025em
}
.review-section-head p,.community-section-head p{
margin:0;color:#8ea0b3;font-size:8px;line-height:1.5
}
.review-average{
min-width:92px;display:grid;grid-template-columns:auto 18px;grid-template-rows:auto auto;
align-items:center;justify-content:end;column-gap:5px;text-align:right
}
.review-average b{color:#173654;font-size:27px;line-height:1}
.review-average>span{color:#f5aa00;font-size:17px}
.review-average small{grid-column:1/3;margin-top:3px;color:#94a5b7;font-size:7px}
.review-composer{
margin-top:14px;padding:15px;
border:1px solid #dfeaf5;border-radius:17px;background:#f9fcff
}
.review-composer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.review-composer-head h3{margin:4px 0 3px;color:#183a58;font-size:13px}
.review-composer-head p{margin:0;color:#8da0b4;font-size:8px;line-height:1.45}
.review-score-pick{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.review-score-pick button{
width:27px;height:27px;border:0;background:transparent;color:#d3dde7;
font-size:17px;cursor:pointer;padding:0;transition:.14s ease
}
.review-score-pick button.active{color:#f4ad09;transform:translateY(-1px)}
.review-score-pick b{
margin-left:5px;padding:5px 7px;border-radius:8px;background:#fff3cd;color:#9a6b00;
font-size:8px
}
.review-composer textarea{
width:100%;min-height:104px;resize:vertical;margin-top:12px;padding:12px 13px;
border:1px solid #d9e6f3;border-radius:13px;background:#fff;color:#29465f;
font:500 10px/1.6 'Bai Jamjuree';outline:none
}
.review-composer textarea:focus{border-color:#83bdf6;box-shadow:0 0 0 4px rgba(20,124,255,.07)}
.review-compose-foot{display:flex;align-items:center;gap:12px;margin-top:10px}
.review-compose-foot label{
display:flex;align-items:center;gap:6px;color:#617a92;font-size:8px;cursor:pointer
}
.review-compose-foot input{accent-color:#147cff}
.review-compose-foot small{margin-left:auto;color:#98a9ba;font-size:7px}
.review-compose-foot>button{
min-height:36px;padding:0 13px;border:0;border-radius:10px;
background:linear-gradient(135deg,#147cff,#15a1e9);color:#fff;
font:700 8px 'Bai Jamjuree';cursor:pointer;
box-shadow:0 8px 18px rgba(20,124,255,.17)
}
.review-compose-foot>button:disabled{opacity:.6;cursor:wait}
.review-login-gate{
margin-top:14px;padding:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;
border:1px dashed #d7e5f3;border-radius:14px;background:#f9fcff
}
.review-login-gate b{color:#496681;font-size:9px}
.review-login-gate button{
border:0;border-radius:9px;padding:8px 10px;background:#147cff;color:#fff;
font:700 8px 'Bai Jamjuree';cursor:pointer
}
.review-list{display:grid;gap:9px;margin-top:13px}
.review-card{
padding:13px;border:1px solid #e0e9f3;border-radius:16px;background:#fff;
transition:.18s ease
}
.review-card:hover{border-color:#d2e2f2;box-shadow:0 9px 24px rgba(30,71,112,.055)}
.review-card>header{
display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px
}
.review-avatar{
width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
background:linear-gradient(145deg,#1787ff,#0c67d6);color:#fff;
font-size:12px;font-weight:800;box-shadow:0 8px 18px rgba(20,124,255,.16)
}
.review-who{min-width:0}
.review-who>div{display:flex;align-items:center;gap:6px;min-width:0}
.review-who b{
min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#264561;font-size:9px
}
.review-who span{
flex:0 0 auto;padding:3px 6px;border-radius:999px;background:#edf6ff;color:#0e73dc;
font-size:6px;font-weight:800
}
.review-who small{display:block;margin-top:3px;color:#96a6b7;font-size:7px}
.review-stars{color:#f2aa0b;font-size:10px;letter-spacing:.05em}
.review-content{
margin-top:10px;color:#4b6680;font-size:9px;line-height:1.65;white-space:pre-line
}
.review-content.is-spoiler{
filter:blur(7px);user-select:none;opacity:.75;max-height:72px;overflow:hidden
}
.review-spoiler{
width:100%;min-height:48px;margin-top:10px;padding:8px 10px;
display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:8px;
border:1px solid #f1e2c1;border-radius:12px;background:#fffbf1;color:#7f6430;text-align:left;cursor:pointer
}
.review-spoiler>span{grid-row:1/3;font-size:16px}
.review-spoiler b{font-size:8px}
.review-spoiler small{font-size:7px;color:#aa9369}
.review-card>footer{
display:flex;align-items:center;justify-content:space-between;gap:8px;
margin-top:11px;padding-top:9px;border-top:1px solid #f0f4f8
}
.review-reactions{display:flex;align-items:center;gap:5px}
.review-reactions button{
min-height:28px;padding:0 8px;display:flex;align-items:center;gap:4px;
border:1px solid #e2eaf3;border-radius:999px;background:#fafcff;color:#6d8499;
font:700 7px 'Bai Jamjuree';cursor:pointer
}
.review-reactions button.active{background:#edf6ff;border-color:#cbe2f9;color:#0e72dd}
.review-delete{
border:0;background:transparent;color:#b45c64;font:700 7px 'Bai Jamjuree';cursor:pointer
}
.review-empty,.review-loading{
min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;border:1px dashed #d8e5f2;border-radius:14px;background:#fafcff
}
.review-empty>span{font-size:22px;color:#7aaee0}
.review-empty>b{margin-top:6px;color:#4d6881;font-size:9px}
.review-empty>small,.review-loading p{margin-top:3px;color:#97a8b9;font-size:8px}
.review-loading span{
width:26px;height:26px;border:3px solid #e0eaf4;border-top-color:#147cff;border-radius:50%;
animation:bfspin .8s linear infinite
}
/* Community hub */
.community-page{max-width:1320px;margin:0 auto;padding-bottom:50px}
.community-hero{
position:relative;overflow:hidden;min-height:230px;padding:27px 29px;
display:flex;align-items:center;justify-content:space-between;gap:28px;
border-radius:26px;color:#fff;
background:
radial-gradient(circle at 88% 12%,rgba(80,193,255,.28),transparent 27%),
radial-gradient(circle at 18% 100%,rgba(65,103,255,.20),transparent 29%),
linear-gradient(135deg,#061936,#0b3670 52%,#0e76d9);
box-shadow:0 26px 65px rgba(12,51,94,.18)
}
.community-hero:after{
content:"";position:absolute;right:-120px;bottom:-180px;width:330px;height:330px;border-radius:50%;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 80px rgba(255,255,255,.018)
}
.community-hero>div:first-child{position:relative;z-index:2;max-width:680px}
.community-hero>div:first-child>span{
display:block;color:#a9dbff;font-size:8px;font-weight:800;letter-spacing:.16em
}
.community-hero h1{margin:7px 0 8px;color:#fff;font-size:32px;line-height:1.08;letter-spacing:-.035em}
.community-hero p{margin:0;max-width:610px;color:#c4d9ed;font-size:10px;line-height:1.6}
.community-hero-actions{display:flex;gap:8px;margin-top:16px}
.community-hero-actions button{
min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;
background:rgba(255,255,255,.10);color:#fff;font:700 8px 'Bai Jamjuree';
backdrop-filter:blur(8px);cursor:pointer
}
.community-hero-actions button:first-child{background:#fff;color:#0e6fd9}
.community-summary{
position:relative;z-index:2;min-width:360px;
display:grid;grid-template-columns:repeat(3,1fr);gap:8px
}
.community-summary>div{
min-height:86px;padding:14px;display:flex;flex-direction:column;justify-content:center;
border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.08);
backdrop-filter:blur(10px)
}
.community-summary b{font-size:23px;line-height:1;color:#fff}
.community-summary span{margin-top:7px;color:#b9d1e8;font-size:7px}
.community-ranking,.community-recent{
margin-top:13px;padding:18px;border:1px solid #dce8f5;border-radius:21px;
background:linear-gradient(180deg,#fff,#fbfdff);
box-shadow:0 10px 28px rgba(29,72,113,.045)
}
.community-section-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:13px}
.community-podium{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:11px
}
.podium-card{
position:relative;min-height:160px;padding:18px 14px 14px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
overflow:hidden;border:1px solid #deE9f4;border-radius:18px;background:#fff;text-align:center
}
.podium-card:before{
content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,124,255,.04),transparent 65%);
pointer-events:none
}
.podium-card.rank-1{border-color:#edd49a;background:linear-gradient(180deg,#fffaf0,#fff)}
.podium-rank{
position:absolute;left:9px;top:9px;padding:4px 7px;border-radius:8px;
background:#eef6ff;color:#1478e4;font-size:7px;font-weight:800
}
.rank-1 .podium-rank{background:#fff0c5;color:#956700}
.podium-avatar{
width:56px;height:56px;display:grid;place-items:center;border-radius:18px;
background:linear-gradient(145deg,#1889ff,#0d68d9);color:#fff;
font-size:21px;font-weight:800;box-shadow:0 12px 26px rgba(20,124,255,.17)
}
.rank-1 .podium-avatar{background:linear-gradient(145deg,#f3ba2f,#de8d12)}
.podium-card>b{margin-top:9px;color:#25455f;font-size:11px}
.podium-card>small{margin-top:3px;color:#8da0b4;font-size:7px}
.podium-card>div:last-child{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap;justify-content:center}
.podium-card>div:last-child span{
padding:4px 6px;border-radius:999px;background:#f1f6fb;color:#637c94;font-size:6px
}
.leaderboard-list{display:grid;gap:6px}
.leaderboard-row{
min-height:54px;padding:8px 10px;
display:grid;grid-template-columns:34px 36px minmax(0,1fr) auto;align-items:center;gap:8px;
border:1px solid #e3ebf4;border-radius:13px;background:#fff
}
.leaderboard-row>strong{color:#6d849a;font-size:9px;text-align:center}
.leaderboard-row>i{
width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
background:#edf6ff;color:#1478e4;font-style:normal;font-size:11px;font-weight:800
}
.leaderboard-row span{min-width:0}
.leaderboard-row b{display:block;color:#2b4a66;font-size:9px}
.leaderboard-row small{display:block;margin-top:2px;color:#93a5b7;font-size:7px}
.leaderboard-row em{color:#0e72dc;font:800 8px 'Bai Jamjuree'}
.community-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.community-review-wrap{
min-width:0;padding:10px;border:1px solid #e1eaf3;border-radius:17px;background:#fafcff
}
.community-review-film{
width:100%;padding:0 0 9px;margin-bottom:9px;
display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:9px;
border:0;border-bottom:1px solid #e7eef5;background:transparent;text-align:left;cursor:pointer
}
.community-review-film img{width:92px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#e7eef6}
.community-review-film span{min-width:0}
.community-review-film b{
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#26445f;font-size:9px
}
.community-review-film small{display:block;margin-top:3px;color:#92a4b6;font-size:7px}
.review-card.compact{padding:9px;border:0;background:transparent;box-shadow:none}
.review-card.compact:hover{box-shadow:none}
.review-card.compact .review-content{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.community-empty{
grid-column:1/-1;min-height:100px;display:grid;place-items:center;
border:1px dashed #d7e4f1;border-radius:14px;background:#fafcff;color:#93a5b7;font-size:8px
}
/* Profile social stats can now hold 3 cells */
.profile-social-stats{grid-template-columns:repeat(3,1fr);min-width:300px}
@media(max-width:1050px){
.community-hero{display:block}
.community-summary{margin-top:20px;min-width:0}
}
@media(max-width:760px){
.watch-reviews{padding:14px;border-radius:18px}
.review-section-head{align-items:center}
.review-composer-head{display:block}
.review-score-pick{margin-top:10px}
.review-compose-foot{align-items:flex-start;flex-wrap:wrap}
.review-compose-foot small{margin-left:0}
.review-compose-foot>button{margin-left:auto}
.review-card>header{grid-template-columns:36px minmax(0,1fr)}
.review-stars{grid-column:2;margin-top:-2px}
.review-card>footer{align-items:flex-start;flex-direction:column}
.review-reactions{flex-wrap:wrap}
.community-hero{padding:22px 20px;border-radius:21px}
.community-hero h1{font-size:25px}
.community-summary{grid-template-columns:1fr 1fr}
.community-summary>div:last-child{grid-column:1/-1}
.community-podium{display:flex;overflow:auto;gap:9px;scroll-snap-type:x mandatory;scrollbar-width:none}
.community-podium::-webkit-scrollbar{display:none}
.podium-card{flex:0 0 72vw;max-width:260px;scroll-snap-align:start}
.leaderboard-row{grid-template-columns:28px 34px minmax(0,1fr)}
.leaderboard-row>em{grid-column:3}
.community-review-grid{grid-template-columns:1fr}
.profile-social-stats{min-width:0;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:460px){
.community-summary{grid-template-columns:1fr}
.community-summary>div:last-child{grid-column:auto}
.profile-social-stats{grid-template-columns:1fr 1fr}
.profile-social-stats>div:last-child{grid-column:1/-1}
}
/* ============================================================
Begoling Film v3.4 — Mobile App UI & Download Experience
============================================================ */
.mobile-brand,.mobile-download,.mobile-app-promo{display:none}
body.download-open{overflow:hidden}
/* App download sheet */
.download-sheet{
position:fixed;inset:0;z-index:10550;display:grid;place-items:center;padding:18px
}
.download-sheet[hidden]{display:none!important}
.download-sheet-backdrop{
position:absolute;inset:0;background:rgba(4,17,37,.62);
backdrop-filter:blur(14px) saturate(120%)
}
.download-sheet-card{
position:relative;z-index:2;width:min(600px,calc(100vw - 28px));
overflow:hidden;border:1px solid rgba(255,255,255,.68);border-radius:26px;
background:#fff;box-shadow:0 42px 120px rgba(5,28,58,.34)
}
.download-sheet-close{
position:absolute;right:14px;top:14px;z-index:4;width:36px;height:36px;
display:grid;place-items:center;border:1px solid #dfE9f3;border-radius:50%;
background:rgba(255,255,255,.94);color:#5e7891;font-size:20px;cursor:pointer
}
.download-sheet-brand{
display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;
padding:27px 28px 20px;
background:
radial-gradient(circle at 90% 0%,rgba(40,174,255,.17),transparent 28%),
linear-gradient(180deg,#f3f9ff,#fff)
}
.download-sheet-logo{
width:58px;height:58px;display:grid;place-items:center;border-radius:18px;
background:linear-gradient(145deg,#1590ff,#11aee9);color:#fff;font-size:22px;
box-shadow:0 14px 30px rgba(20,124,255,.23)
}
.download-sheet-brand span{
display:block;color:#147cff;font-size:7px;font-weight:800;letter-spacing:.14em
}
.download-sheet-brand h2{
margin:5px 0 4px;color:#123452;font-size:21px;letter-spacing:-.025em
}
.download-sheet-brand p{margin:0;color:#8da0b4;font-size:9px;line-height:1.5}
.download-sheet-device{
margin:0 20px;padding:13px 14px;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;
border:1px solid #deE9f4;border-radius:15px;background:#f9fcff
}
.download-device-icon{
width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
background:#eaf5ff;color:#147cff;font-size:17px
}
.download-sheet-device small{display:block;color:#8ea1b5;font-size:6px;font-weight:800;letter-spacing:.12em}
.download-sheet-device b{display:block;margin-top:3px;color:#254660;font-size:11px}
.download-sheet-device p{margin:2px 0 0;color:#92a4b7;font-size:8px}
.download-sheet-actions{display:grid;gap:8px;padding:14px 20px}
.download-sheet-actions button{
min-height:44px;border-radius:12px;font:700 10px 'Bai Jamjuree';cursor:pointer
}
.download-primary{
border:0;background:linear-gradient(135deg,#147cff,#18a9ec);color:#fff;
box-shadow:0 10px 22px rgba(20,124,255,.20)
}
.download-secondary{border:1px solid #d9e7f5;background:#f8fbff;color:#2770aa}
.download-sheet-benefits{
display:flex;gap:7px;flex-wrap:wrap;padding:0 20px 22px;color:#7890a7;font-size:7px
}
.download-sheet-benefits span{
padding:5px 7px;border-radius:999px;background:#f2f7fc;border:1px solid #e5edf5
}
@media(max-width:760px){
:root{
--m-blue:#147cff;--m-cyan:#1db8ef;--m-ink:#102f4d;--m-muted:#8397ab;
--m-line:#deE9f4;--m-card:#fff;--m-bg:#f4f8fc
}
html,body{
width:100%;max-width:100%;overflow-x:hidden!important;
background:var(--m-bg)!important;color:var(--m-ink)!important
}
body{
padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;
-webkit-tap-highlight-color:transparent
}
.app-shell{display:block!important;min-height:100dvh!important;background:var(--m-bg)!important}
.sidebar{display:none!important}
.workspace{width:100%!important;min-width:0!important}
/* Real mobile app header */
.topbar{
position:sticky!important;top:0!important;z-index:120!important;
min-height:108px!important;height:auto!important;
padding:8px 12px 10px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto auto auto!important;
grid-template-rows:46px 44px!important;
column-gap:7px!important;row-gap:7px!important;
background:rgba(250,253,255,.96)!important;
border-bottom:1px solid rgba(214,229,243,.95)!important;
box-shadow:0 8px 24px rgba(24,67,109,.055)!important;
backdrop-filter:blur(22px) saturate(135%)!important
}
.topbar:before,.topbar:after{display:none!important;content:none!important}
.topbar .back{display:none!important}
.mobile-brand{
grid-column:1;grid-row:1;min-width:0;
display:flex!important;align-items:center;gap:8px;text-decoration:none;color:#0d2c4c
}
.mobile-brand img{
width:36px;height:36px;flex:0 0 36px;object-fit:contain;
filter:drop-shadow(0 7px 14px rgba(20,124,255,.16))
}
.mobile-brand span{display:flex;align-items:baseline;gap:4px;min-width:0}
.mobile-brand b,.mobile-brand strong{
font-size:16px;line-height:1;font-weight:800;letter-spacing:-.035em;white-space:nowrap
}
.mobile-brand strong{color:#147cff}
.mobile-download{
grid-column:2;grid-row:1;
min-height:36px;padding:0 10px;display:flex!important;align-items:center;gap:5px;
border:0;border-radius:11px;background:linear-gradient(135deg,#147cff,#19a9eb);
color:#fff;font:700 9px 'Bai Jamjuree';
box-shadow:0 8px 18px rgba(20,124,255,.20)
}
.mobile-download svg{width:14px;height:14px}
.mobile-download.is-ready:after{
content:"";width:6px;height:6px;border-radius:50%;background:#63e3a7;
box-shadow:0 0 0 3px rgba(99,227,167,.16)
}
.topbar .bell{
grid-column:3;grid-row:1;margin:0!important;
width:36px!important;height:36px!important;border-radius:11px!important;
background:#fff!important;border:1px solid var(--m-line)!important;
box-shadow:none!important
}
.topbar .bell svg{width:17px;height:17px}
.topbar .account{
grid-column:4;grid-row:1;display:flex!important;align-items:center!important;padding:0!important
}
.topbar .account i{
width:36px!important;height:36px!important;border-radius:11px!important;
font-size:12px!important;box-shadow:0 7px 16px rgba(20,124,255,.14)!important
}
.topbar .account small,.topbar .account-chevron{display:none!important}
.topbar .search{
grid-column:1/-1;grid-row:2;
width:100%!important;max-width:none!important;height:44px!important;
padding:0 12px!important;border:1px solid #d8e6f4!important;border-radius:14px!important;
background:#fff!important;box-shadow:0 5px 16px rgba(29,75,119,.035)!important
}
.topbar .search span{color:#5d7892!important}
.topbar .search svg{width:17px;height:17px}
.topbar .search input{
min-width:0;height:42px!important;font-size:13px!important;color:#183a58!important
}
.topbar .search input::placeholder{color:#95a6b7!important}
.topbar .search kbd{display:none!important}
.command-trigger{display:none!important}
/* Main mobile canvas */
.view{
width:100%!important;max-width:none!important;
padding:10px 10px calc(96px + env(safe-area-inset-bottom))!important;
margin:0!important
}
.home-layout,.main-col{display:block!important;width:100%!important;min-width:0!important}
.home-discovery-rail,.home-right-rail{display:none!important}
.section{margin-top:14px!important}
.section-head{
align-items:center!important;margin-bottom:9px!important;gap:9px!important
}
.section-head h2{
margin:0!important;color:#123351!important;font-size:17px!important;line-height:1.15!important;
letter-spacing:-.025em!important
}
.section-head p{
margin:3px 0 0!important;color:#8da0b3!important;font-size:9px!important;line-height:1.35!important
}
.section-head a{
flex:0 0 auto;padding:7px 8px!important;border-radius:9px!important;
background:#eef6ff!important;color:#0d73df!important;font-size:8px!important;text-decoration:none!important
}
/* Cinematic but compact mobile hero */
.hero-carousel{
width:100%!important;height:326px!important;border-radius:20px!important;
overflow:hidden!important;border:1px solid rgba(206,224,241,.95)!important;
background:#092344!important;box-shadow:0 16px 38px rgba(15,53,91,.15)!important
}
.hero{
height:326px!important;background-image:var(--hero-mobile)!important;
background-position:center 24%!important;background-size:cover!important
}
.hero:after{
background:
linear-gradient(180deg,rgba(4,17,37,.06) 22%,rgba(4,17,37,.34) 52%,rgba(3,14,31,.96) 100%)!important
}
.hero-copy{
position:absolute!important;left:0!important;right:0!important;bottom:0!important;
width:100%!important;max-width:none!important;padding:20px 17px 25px!important
}
.hero-label{font-size:8px!important;letter-spacing:.13em!important;color:#b7ddff!important}
.hero h1{
max-width:100%!important;margin:6px 0 6px!important;
font-size:25px!important;line-height:1.04!important;letter-spacing:-.035em!important
}
.hero p{
max-width:95%!important;margin:0!important;font-size:10px!important;line-height:1.45!important;
-webkit-line-clamp:2!important;color:#d4e4f4!important
}
.hero-tags{gap:5px!important;margin-top:8px!important}
.hero-tags span{
padding:4px 7px!important;font-size:7px!important;border-radius:999px!important;
background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.14)!important
}
.hero-tags span:nth-child(n+3){display:none!important}
.hero-actions{margin-top:10px!important;gap:7px!important}
.hero-actions .primary,.hero-actions .secondary{
min-height:38px!important;padding:0 13px!important;border-radius:10px!important;font-size:9px!important
}
.hero-carousel>.hero-dots{
left:auto!important;right:14px!important;bottom:14px!important;transform:none!important;gap:4px!important
}
.hero-carousel>.hero-dots button{width:6px!important;height:4px!important}
.hero-carousel>.hero-dots button.active{width:18px!important}
.hero-nav{display:none!important}
/* Persistent in-feed app download */
.mobile-app-promo{
display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;
margin-top:10px;padding:10px 11px;border:1px solid #d7e6f4;border-radius:16px;
background:
radial-gradient(circle at 100% 0%,rgba(32,171,255,.10),transparent 30%),
linear-gradient(135deg,#fff,#f5faff);
box-shadow:0 8px 22px rgba(25,69,111,.055)
}
.mobile-app-promo-icon{
width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
background:linear-gradient(145deg,#1487ff,#18b0ea);color:#fff;font-size:15px;
box-shadow:0 8px 17px rgba(20,124,255,.18)
}
.mobile-app-promo-copy{min-width:0}
.mobile-app-promo-copy span{
display:block;color:#147cff;font-size:6px;font-weight:800;letter-spacing:.12em
}
.mobile-app-promo-copy b{
display:block;margin-top:2px;color:#23445f;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mobile-app-promo-copy small{
display:block;margin-top:2px;color:#91a3b6;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mobile-app-promo>button{
min-height:34px;padding:0 10px;border:0;border-radius:10px;
background:#0e73dd;color:#fff;font:700 8px 'Bai Jamjuree';cursor:pointer
}
/* Cards: readable, dense and app-like */
.featured-section,.latest-section,.shorts-section,.continue-section,.taste-section{
padding:12px 11px 13px!important;border-radius:17px!important;
border:1px solid #e0eaf4!important;background:rgba(255,255,255,.92)!important;
box-shadow:0 8px 22px rgba(28,70,111,.04)!important
}
.film-row{
display:flex!important;overflow-x:auto!important;gap:9px!important;padding:1px 1px 5px!important;
scroll-snap-type:x proximity!important;scrollbar-width:none!important
}
.film-row::-webkit-scrollbar,.short-row::-webkit-scrollbar,.continue-row::-webkit-scrollbar{display:none!important}
.film-row .film-card{
flex:0 0 67vw!important;max-width:270px!important;min-width:0!important;scroll-snap-align:start!important
}
.film-card{transform:none!important}
.film-card .thumb{
border-radius:13px!important;border:1px solid rgba(216,231,244,.9)!important;
box-shadow:0 7px 18px rgba(23,63,102,.10)!important
}
.film-card b{
margin-top:6px!important;font-size:11px!important;line-height:1.32!important;color:#183a58!important
}
.film-card small,.card-meta{
margin-top:2px!important;font-size:8px!important;line-height:1.3!important;color:#8da0b4!important
}
.film-card .play{
width:30px!important;height:30px!important;left:8px!important;bottom:8px!important
}
.duration{top:7px!important;right:7px!important;font-size:7px!important;padding:3px 5px!important}
.member-lock{left:7px!important;top:7px!important;min-height:20px!important;font-size:6px!important;padding:0 6px!important}
.short-row{
display:flex!important;overflow-x:auto!important;gap:8px!important;padding:1px 1px 5px!important;
scroll-snap-type:x proximity!important;scrollbar-width:none!important
}
.short-card{
flex:0 0 34vw!important;min-width:112px!important;max-width:145px!important;scroll-snap-align:start!important
}
.short-card .thumb{
border-radius:14px!important;box-shadow:0 7px 18px rgba(24,65,106,.10)!important
}
.short-card b{
margin-top:6px!important;font-size:9px!important;line-height:1.3!important;color:#23445f!important
}
.short-meta{font-size:7px!important}
/* Catalog/search uses an efficient 2-column grid */
.catalog-results-clean{padding-top:0!important}
.search-results,.hot-results,.member-library-grid{
display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 8px!important
}
.search-results .film-card,.hot-results .film-card,.member-library-grid .film-card{
width:auto!important;max-width:none!important;min-width:0!important;flex:none!important
}
.search-results .film-card b,.hot-results .film-card b{
white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:29px!important
}
.route-title{font-size:21px!important;margin:4px 0 3px!important}
.route-sub{font-size:9px!important;margin-bottom:10px!important}
/* Continue Watching */
.continue-row{
display:flex!important;overflow:auto!important;gap:8px!important;padding-bottom:3px!important;
scroll-snap-type:x proximity!important;scrollbar-width:none!important
}
.continue-card{flex:0 0 72vw!important;max-width:285px!important;scroll-snap-align:start!important}
.continue-card>b{font-size:10px!important}
.continue-card>span{font-size:7px!important}
.continue-thumb{border-radius:13px!important}
/* Bottom navigation = mobile app chrome */
.mobile-bottom-nav{
position:fixed!important;left:8px!important;right:8px!important;
bottom:calc(7px + env(safe-area-inset-bottom))!important;
height:64px!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;
align-items:center!important;padding:5px!important;
border:1px solid rgba(212,228,242,.96)!important;border-radius:19px!important;
background:rgba(255,255,255,.96)!important;
box-shadow:0 16px 40px rgba(13,52,91,.16)!important;
backdrop-filter:blur(22px) saturate(135%)!important;z-index:1000!important
}
.mobile-bottom-nav button{
min-width:0!important;height:52px!important;padding:4px 2px!important;
display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
gap:2px!important;border:0!important;border-radius:13px!important;background:transparent!important;
color:#7f93a7!important;font-size:7px!important;font-weight:700!important
}
.mobile-bottom-nav button svg{width:19px!important;height:19px!important}
.mobile-bottom-nav button.active{
color:#0c75df!important;background:linear-gradient(180deg,#eef7ff,#e7f3ff)!important
}
.mobile-bottom-nav button.active svg{filter:drop-shadow(0 4px 7px rgba(20,124,255,.14))}
/* Watch page becomes a proper mobile player screen */
body.watching{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
body.watching .topbar{
min-height:58px!important;grid-template-rows:42px!important;padding-bottom:8px!important
}
body.watching .topbar .search{display:none!important}
body.watching .view{
padding:0 0 calc(90px + env(safe-area-inset-bottom))!important;background:#f4f8fc!important
}
body.watching .watch-pro{display:block!important;padding:0 11px 28px!important}
body.watching .cinema-frame{
width:calc(100% + 22px)!important;margin-left:-11px!important;
border-radius:0 0 16px 16px!important;border-left:0!important;border-right:0!important;border-top:0!important;
box-shadow:0 12px 30px rgba(9,39,72,.16)!important
}
.video-tags{margin:11px 0 6px!important;gap:5px!important}
.video-tags span{padding:4px 7px!important;font-size:7px!important}
.video-title-row{display:block!important;margin:5px 0 9px!important}
.video-title-row h1{
max-width:100%!important;font-size:19px!important;line-height:1.2!important;letter-spacing:-.02em!important
}
.video-stats{margin-top:6px!important;font-size:8px!important;gap:7px!important;flex-wrap:wrap!important}
.creator-actions{
display:block!important;padding:10px 0!important;border-color:#dfe8f2!important
}
.creator{width:100%!important;min-width:0!important}
.creator-avatar{width:38px!important;height:38px!important}
.creator b{font-size:10px!important}
.creator small{font-size:7px!important}
.subscribe{margin-left:auto!important;padding:8px 11px!important;font-size:8px!important;border-radius:10px!important}
.actions{
display:flex!important;gap:6px!important;margin-top:9px!important;padding-bottom:2px!important;
overflow-x:auto!important;scrollbar-width:none!important
}
.actions::-webkit-scrollbar{display:none!important}
.actions button{
width:auto!important;min-width:67px!important;height:38px!important;padding:0 9px!important;
border-radius:11px!important;justify-content:center!important;gap:4px!important;
background:#fff!important;border:1px solid #dce7f2!important;color:#41617d!important;
font-size:7px!important;white-space:nowrap!important
}
.actions button span{display:inline!important;font-size:7px!important}
.actions button svg{width:13px!important;height:13px!important}
.rating-wrap{flex:0 0 auto!important}
.video-desc{
margin-top:9px!important;padding:11px!important;border-radius:13px!important;
background:#fff!important;border:1px solid #e0e9f3!important;font-size:9px!important;line-height:1.55!important
}
.watch-reviews,.related-section,.next-card,.watch-side-card{
border-radius:16px!important;box-shadow:none!important
}
.watch-reviews{padding:12px!important}
.watch-sidebar{display:block!important}
.watch-sidebar>*{margin-top:10px!important}
.related-row{
display:flex!important;overflow:auto!important;gap:8px!important;scrollbar-width:none!important
}
.related-row::-webkit-scrollbar{display:none!important}
.related-row .film-card{flex:0 0 72vw!important;max-width:270px!important}
.next-item{grid-template-columns:102px minmax(0,1fr) 10px!important;gap:7px!important}
.next-item img{width:102px!important;border-radius:9px!important}
/* Profile / community cleanup */
.profile-v271,.community-page,.member-feed-page,.collections-page{padding-bottom:12px!important}
.profile-cover{border-radius:18px!important}
.profile-cover-main{padding:16px!important;gap:11px!important}
.profile-v271 .profile-avatar{
width:58px!important;height:58px!important;flex-basis:58px!important;border-radius:17px!important;font-size:23px!important
}
.profile-v271 .profile-identity h1{font-size:20px!important}
.profile-cover-actions{width:100%!important;margin-left:0!important;gap:6px!important}
.profile-edit,.profile-v271 .profile-logout{min-height:36px!important}
.profile-metrics button{min-height:60px!important}
.profile-quickbar{grid-template-columns:1fr!important;gap:7px!important}
.profile-quickbar button{min-height:58px!important}
.profile-panel,.profile-taste-panel,.profile-library{padding:14px!important;border-radius:16px!important}
.profile-social-stats{grid-template-columns:repeat(3,1fr)!important;min-width:0!important}
.profile-social-stats>div{min-height:58px!important;padding:9px!important}
.community-hero{padding:19px 16px!important;border-radius:18px!important}
.community-hero h1{font-size:22px!important}
.community-hero p{font-size:9px!important}
.community-ranking,.community-recent{padding:13px!important;border-radius:17px!important}
.community-section-head h2{font-size:16px!important}
.community-section-head p{font-size:8px!important}
/* Download sheet becomes a native-style bottom sheet */
.download-sheet{padding:0!important;align-items:end!important}
.download-sheet-card{
width:100%!important;max-height:92dvh!important;overflow:auto!important;
border-radius:24px 24px 0 0!important;border-bottom:0!important
}
.download-sheet-brand{grid-template-columns:52px 1fr!important;padding:23px 19px 16px!important}
.download-sheet-logo{width:52px!important;height:52px!important;border-radius:16px!important}
.download-sheet-brand h2{font-size:18px!important}
.download-sheet-brand p{font-size:8px!important}
.download-sheet-device{margin:0 14px!important}
.download-sheet-actions{padding:12px 14px!important}
.download-sheet-actions button{min-height:46px!important}
.download-sheet-benefits{padding:0 14px calc(20px + env(safe-area-inset-bottom))!important}
}
@media(max-width:420px){
.topbar{
padding-left:10px!important;padding-right:10px!important;
grid-template-columns:minmax(0,1fr) auto auto!important
}
.mobile-brand img{width:34px;height:34px;flex-basis:34px}
.mobile-brand b,.mobile-brand strong{font-size:14px}
.mobile-download{grid-column:2;padding:0 9px!important}
.topbar .bell{display:none!important}
.topbar .account{grid-column:3}
.hero-carousel,.hero{height:300px!important}
.hero-copy{padding:18px 15px 22px!important}
.hero h1{font-size:23px!important}
.hero p{font-size:9px!important}
.film-row .film-card{flex-basis:74vw!important}
.short-card{flex-basis:36vw!important}
.mobile-app-promo{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:9px}
.mobile-app-promo-icon{width:38px;height:38px}
.mobile-app-promo-copy small{display:none}
.mobile-app-promo>button{padding:0 8px}
.search-results,.hot-results,.member-library-grid{gap:10px 7px!important}
.search-results .film-card b,.hot-results .film-card b{font-size:10px!important;min-height:27px!important}
}
@media(max-width:340px){
.mobile-brand span{display:none!important}
.mobile-download span{display:none!important}
.mobile-download{width:36px!important;padding:0!important;justify-content:center!important}
.topbar{grid-template-columns:1fr auto auto!important}
.hero-carousel,.hero{height:280px!important}
.hero h1{font-size:21px!important}
}
/* ============================================================
Begoling Film v3.5 — Quick View & Mood Discovery
============================================================ */
body.quick-view-open{overflow:hidden}
/* Quick View button on cards */
.film-card .thumb{position:relative}
.quick-view-btn{
position:absolute;right:9px;bottom:9px;z-index:5;
width:30px;height:30px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.18);border-radius:10px;
background:rgba(4,17,36,.66);color:#fff;
font:800 11px 'Bai Jamjuree';cursor:pointer;
backdrop-filter:blur(10px);box-shadow:0 7px 16px rgba(0,0,0,.14);
opacity:0;transform:translateY(4px);transition:.18s ease
}
.film-card:hover .quick-view-btn{opacity:1;transform:none}
.quick-view-btn:hover{background:#147cff}
/* Mood discovery */
.mood-discovery{
margin-top:12px;padding:16px;
border:1px solid #dce8f5;border-radius:21px;
background:
radial-gradient(circle at 100% 0%,rgba(27,159,255,.09),transparent 29%),
linear-gradient(180deg,#fff,#f8fbff);
box-shadow:0 12px 30px rgba(26,69,111,.05)
}
.mood-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:11px
}
.mood-head>div>span{
display:block;color:#147cff;font-size:7px;font-weight:800;letter-spacing:.14em
}
.mood-head h2{margin:5px 0 3px;color:#123553;font-size:19px;letter-spacing:-.025em}
.mood-head p{margin:0;color:#8ca0b4;font-size:9px;line-height:1.45}
.surprise-me{
flex:0 0 auto;min-height:38px;padding:0 12px;
border:1px solid #d9e7f5;border-radius:11px;
background:#f5faff;color:#0e72dc;
font:700 8px 'Bai Jamjuree';cursor:pointer
}
.surprise-me:hover{background:#eaf5ff;border-color:#c9def4}
.mood-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mood-card{
min-width:0;min-height:76px;padding:11px;
display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:8px;
border:1px solid #dfe9f3;border-radius:15px;background:#fff;color:#284962;
text-align:left;cursor:pointer;transition:.18s ease
}
.mood-card:hover{transform:translateY(-2px);border-color:#c8dff4;box-shadow:0 9px 20px rgba(23,67,109,.08)}
.mood-card>i{
width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
background:#edf6ff;font-style:normal;font-size:17px
}
.mood-card span{min-width:0}
.mood-card b{
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#24445f;font-size:9px
}
.mood-card small{
display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#91a3b6;font-size:7px
}
.mood-card em{font-style:normal;color:#147cff;font-size:14px}
.mood-1>i{background:#eef7ff}
.mood-2>i{background:#fff6da}
.mood-3>i{background:#fff0e7}
.mood-4>i{background:#fff0f4}
.mood-5>i{background:#f4efff}
/* Quick View modal */
.quick-view-modal{
position:fixed;inset:0;z-index:10600;display:grid;place-items:center;padding:18px
}
.quick-view-modal[hidden]{display:none!important}
.quick-view-backdrop{
position:absolute;inset:0;background:rgba(4,16,34,.67);
backdrop-filter:blur(14px) saturate(120%)
}
.quick-view-card{
position:relative;z-index:2;width:min(820px,calc(100vw - 32px));
overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:26px;
background:#fff;box-shadow:0 45px 130px rgba(3,24,52,.38)
}
.quick-view-close{
position:absolute;right:14px;top:14px;z-index:10;
width:38px;height:38px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.16);border-radius:50%;
background:rgba(5,20,41,.58);color:#fff;font-size:20px;
backdrop-filter:blur(12px);cursor:pointer
}
.quick-view-visual{
position:relative;min-height:330px;background:#0a2241 center/cover no-repeat
}
.quick-view-shade{
position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(3,15,32,.04),rgba(3,15,32,.16) 35%,rgba(3,15,32,.88) 100%),
linear-gradient(90deg,rgba(3,15,32,.18),transparent 55%)
}
.quick-view-badge{
position:absolute;left:22px;top:21px;z-index:2;
padding:6px 8px;border-radius:8px;
background:rgba(5,22,46,.58);border:1px solid rgba(255,255,255,.12);
color:#c9e8ff;font-size:7px;font-weight:800;letter-spacing:.13em;
backdrop-filter:blur(10px)
}
.quick-view-title{
position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff
}
.quick-view-title h2{
margin:0;max-width:80%;color:#fff;font-size:30px;line-height:1.05;letter-spacing:-.035em
}
.quick-view-title p{margin:6px 0 0;color:#c8daeb;font-size:9px}
.quick-view-body{padding:18px 22px 21px}
.quick-view-meta{display:flex;gap:6px;flex-wrap:wrap}
.quick-view-meta span{
padding:5px 7px;border:1px solid #dfe9f3;border-radius:999px;
background:#f7fbff;color:#58728a;font-size:7px
}
.quick-view-desc{
margin:12px 0 0;max-width:760px;color:#61788f;font-size:9px;line-height:1.65
}
.quick-view-actions{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:15px
}
.quick-view-actions button{
min-height:39px;padding:0 12px;border-radius:11px;
font:700 8px 'Bai Jamjuree';cursor:pointer
}
.quick-play{
border:0;background:linear-gradient(135deg,#147cff,#18a7eb);color:#fff;
box-shadow:0 9px 20px rgba(20,124,255,.19)
}
.quick-save,.quick-fav,.quick-collection{
border:1px solid #dce7f2;background:#f8fbff;color:#496781
}
.quick-save.active,.quick-fav.active{background:#edf6ff;border-color:#c8e1fa;color:#0e72dc}
.quick-view-foot{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:15px;padding-top:12px;border-top:1px solid #edf2f7
}
.quick-view-foot span{color:#93a5b7;font-size:7px}
.quick-view-foot button{
border:0;background:transparent;color:#0e72dc;font:700 8px 'Bai Jamjuree';cursor:pointer
}
@media(max-width:1150px){
.mood-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
.mood-discovery{
margin-top:10px;padding:12px;border-radius:17px
}
.mood-head{align-items:center;margin-bottom:9px}
.mood-head h2{font-size:16px}
.mood-head p{font-size:8px}
.surprise-me{min-height:34px;padding:0 9px;font-size:7px}
.mood-grid{
display:flex;overflow-x:auto;gap:8px;padding-bottom:2px;
scroll-snap-type:x proximity;scrollbar-width:none
}
.mood-grid::-webkit-scrollbar{display:none}
.mood-card{
flex:0 0 196px;min-height:68px;grid-template-columns:34px minmax(0,1fr) 14px;
scroll-snap-align:start;padding:9px;border-radius:13px
}
.mood-card>i{width:34px;height:34px;border-radius:10px;font-size:15px}
.mood-card b{font-size:9px}
.mood-card small{font-size:7px}
.quick-view-btn{
opacity:1;transform:none;right:7px;bottom:7px;width:28px;height:28px;border-radius:9px
}
.quick-view-modal{padding:0;align-items:end}
.quick-view-card{
width:100%;max-height:92dvh;overflow:auto;border-radius:24px 24px 0 0;border-bottom:0
}
.quick-view-visual{min-height:230px}
.quick-view-badge{left:15px;top:15px}
.quick-view-title{left:16px;right:16px;bottom:16px}
.quick-view-title h2{max-width:88%;font-size:23px}
.quick-view-body{padding:14px 15px calc(18px + env(safe-area-inset-bottom))}
.quick-view-desc{font-size:8px}
.quick-view-actions{display:grid;grid-template-columns:1fr 1fr}
.quick-view-actions button{width:100%;min-height:40px;padding:0 8px}
.quick-play{grid-column:1/-1}
.quick-view-foot{align-items:flex-start}
}
@media(max-width:430px){
.mood-head{display:block}
.surprise-me{margin-top:8px}
.quick-view-title h2{font-size:21px}
}
/* ============================================================
Begoling Film v3.6 — Voice Search
============================================================ */
.voice-search-btn{
flex:0 0 auto;height:32px;min-width:32px;padding:0 8px;
display:inline-flex;align-items:center;justify-content:center;gap:5px;
border:1px solid #dce7f2;border-radius:10px;background:#f8fbff;color:#54708c;
font:700 7px 'Bai Jamjuree';cursor:pointer;transition:.16s ease
}
.voice-search-btn:hover{background:#edf6ff;border-color:#c9e0f7;color:#0e73dc}
.voice-search-btn.active{
background:#eaf5ff;border-color:#9ecdf8;color:#0d73df;
box-shadow:0 0 0 4px rgba(20,124,255,.08)
}
.voice-search-btn.voice-unavailable{opacity:.58}
.voice-mic-icon{
position:relative;width:14px;height:16px;display:block
}
.voice-mic-icon:before{
content:"";position:absolute;left:4px;top:0;width:6px;height:10px;
border:2px solid currentColor;border-radius:5px
}
.voice-mic-icon:after{
content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;
border:2px solid currentColor;border-top:0;border-radius:0 0 8px 8px
}
.voice-mic-icon i{
position:absolute;left:6px;bottom:0;width:2px;height:4px;background:currentColor;border-radius:2px
}
.voice-search-btn.active .voice-mic-icon{
animation:voiceMicPulse 1s ease-in-out infinite
}
@keyframes voiceMicPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.12)}
}
.voice-search-panel{
position:fixed;inset:0;z-index:10700;display:grid;place-items:center;padding:18px
}
.voice-search-panel[hidden]{display:none!important}
.voice-search-backdrop{
position:absolute;inset:0;background:rgba(3,15,33,.66);
backdrop-filter:blur(15px) saturate(125%)
}
.voice-search-card{
position:relative;z-index:2;width:min(560px,calc(100vw - 28px));
padding:30px 28px 24px;border:1px solid rgba(255,255,255,.68);border-radius:28px;
background:
radial-gradient(circle at 50% 0%,rgba(39,168,255,.13),transparent 34%),
linear-gradient(180deg,#fff,#f8fbff);
box-shadow:0 44px 120px rgba(4,27,58,.34);text-align:center
}
.voice-search-close{
position:absolute;right:13px;top:13px;width:36px;height:36px;
display:grid;place-items:center;border:1px solid #dfE8f2;border-radius:50%;
background:#fff;color:#688097;font-size:20px;cursor:pointer
}
.voice-search-status{display:flex;flex-direction:column;align-items:center}
.voice-orb{
position:relative;width:92px;height:92px;display:grid;place-items:center;margin-bottom:15px;
border-radius:50%;background:linear-gradient(145deg,#1488ff,#19b5ec);
box-shadow:0 18px 40px rgba(20,124,255,.22),0 0 0 12px rgba(20,124,255,.05)
}
.voice-orb:before{
content:"";width:24px;height:36px;border:4px solid #fff;border-radius:14px
}
.voice-orb:after{
content:"";position:absolute;left:31px;top:44px;width:30px;height:18px;
border:4px solid #fff;border-top:0;border-radius:0 0 18px 18px
}
.voice-orb i{
position:absolute;inset:-10px;border:1px solid rgba(20,124,255,.18);border-radius:50%;
opacity:0
}
body.voice-listening .voice-orb i:nth-child(1){animation:voiceWave 1.6s ease-out infinite}
body.voice-listening .voice-orb i:nth-child(2){animation:voiceWave 1.6s .45s ease-out infinite}
body.voice-listening .voice-orb i:nth-child(3){animation:voiceWave 1.6s .9s ease-out infinite}
@keyframes voiceWave{
0%{transform:scale(.88);opacity:.75}
100%{transform:scale(1.55);opacity:0}
}
.voice-search-status small{
color:#147cff;font-size:7px;font-weight:800;letter-spacing:.15em
}
.voice-search-status h2{
margin:6px 0 5px;color:#133553;font-size:22px;letter-spacing:-.025em
}
.voice-search-status p{
margin:0;max-width:420px;color:#8da0b4;font-size:9px;line-height:1.55
}
.voice-live-text{
min-height:54px;margin-top:18px;padding:13px 14px;
display:grid;place-items:center;border:1px solid #dce8f4;border-radius:15px;
background:#fff;color:#6c8399
}
.voice-live-text span{font-size:9px}
.voice-live-text strong{
color:#0e72dc;font-size:15px;line-height:1.35;font-weight:800
}
.voice-search-hint{
display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:12px
}
.voice-search-hint span{
padding:5px 7px;border-radius:999px;background:#eef6ff;color:#66819b;
font-size:7px;border:1px solid #e0ebf5
}
@media(max-width:760px){
.topbar .search{
grid-template-columns:auto minmax(0,1fr) auto!important
}
.topbar .search .voice-search-btn{
height:34px;min-width:34px;padding:0;border:0;border-radius:10px;
background:#eef6ff;color:#0e73dc
}
.topbar .search .voice-search-btn b{display:none}
.topbar .search>kbd{display:none!important}
.voice-search-panel{padding:0;align-items:end}
.voice-search-card{
width:100%;padding:27px 18px calc(24px + env(safe-area-inset-bottom));
border-radius:26px 26px 0 0;border-bottom:0
}
.voice-orb{width:82px;height:82px}
.voice-orb:before{width:22px;height:33px}
.voice-orb:after{left:28px;top:40px;width:27px;height:17px}
.voice-search-status h2{font-size:20px}
.voice-live-text strong{font-size:14px}
}
/* ============================================================
Begoling Film v3.6.1 — Voice Search reliability
============================================================ */
.voice-meter{
height:48px;margin:16px auto 0;padding:0 18px;
display:flex;align-items:center;justify-content:center;gap:5px;
border:1px solid #e2eaf3;border-radius:14px;background:#f8fbff;
overflow:hidden
}
.voice-meter i{
width:4px;height:9px;border-radius:999px;
background:linear-gradient(180deg,#31b7ff,#147cff);
opacity:.35;transform-origin:center;transition:height .08s linear,opacity .08s linear
}
.voice-meter i:nth-child(1),.voice-meter i:nth-child(12){height:calc(8px + (var(--voice-level,0) * 10px))}
.voice-meter i:nth-child(2),.voice-meter i:nth-child(11){height:calc(9px + (var(--voice-level,0) * 16px))}
.voice-meter i:nth-child(3),.voice-meter i:nth-child(10){height:calc(10px + (var(--voice-level,0) * 24px))}
.voice-meter i:nth-child(4),.voice-meter i:nth-child(9){height:calc(11px + (var(--voice-level,0) * 32px))}
.voice-meter i:nth-child(5),.voice-meter i:nth-child(8){height:calc(12px + (var(--voice-level,0) * 40px))}
.voice-meter i:nth-child(6),.voice-meter i:nth-child(7){height:calc(13px + (var(--voice-level,0) * 48px))}
.voice-audio-present .voice-meter i{opacity:.92}
.voice-search-hint span[data-state="ok"]{background:#edf9f3;color:#2d8a60;border-color:#d8efe3}
.voice-search-hint span[data-state="error"]{background:#fff3f4;color:#b04e59;border-color:#f0dce0}
.voice-recovery{
display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px
}
.voice-recovery[hidden]{display:none!important}
.voice-recovery button{
min-height:39px;border-radius:11px;font:700 8px 'Bai Jamjuree';cursor:pointer
}
.voice-recovery button:first-child{border:0;background:#147cff;color:#fff}
.voice-recovery button:last-child{border:1px solid #dce7f2;background:#fff;color:#55728d}
.voice-search-panel[data-voice-mode="error"] .voice-orb{
background:linear-gradient(145deg,#70859b,#8da0b4);
box-shadow:0 18px 40px rgba(40,58,76,.12),0 0 0 12px rgba(80,100,120,.05)
}
.voice-search-panel[data-voice-mode="done"] .voice-orb{
background:linear-gradient(145deg,#20b773,#38d49a)
}
@media(max-width:760px){
.voice-meter{height:44px;margin-top:14px;padding:0 12px}
.voice-recovery{grid-template-columns:1fr}
}
/* ============================================================
Begoling Film v3.6.2 — Home source resilience
============================================================ */
.api-empty-actions{
display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px
}
.api-empty-actions .secondary{
min-height:40px;padding:0 14px;border:1px solid #d9e7f5;border-radius:11px;
background:#f8fbff;color:#3273a8;font:700 9px 'Bai Jamjuree';cursor:pointer
}
.api-empty-actions .secondary:hover{background:#edf6ff;border-color:#c8def3}
@media(max-width:760px){
.api-empty-actions{display:grid;grid-template-columns:1fr;width:min(300px,100%);margin-left:auto;margin-right:auto}
.api-empty-actions button{width:100%}
}
/* ============================================================
Begoling Film v3.6.3 — Source Health & Fallback Catalog
============================================================ */
.source-empty{max-width:960px!important}
.source-health-card{
width:min(650px,calc(100% - 24px));margin:17px auto 0;padding:13px 14px;
display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;
border:1px solid #dce7f2;border-radius:15px;background:#f8fbff;text-align:left;
box-shadow:0 7px 22px rgba(28,70,111,.045)
}
.source-health-icon{
width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
background:#edf6ff;color:#147cff;font:800 15px 'Bai Jamjuree'
}
.source-health-card small{
display:block;color:#8197ad;font-size:6px;font-weight:800;letter-spacing:.13em
}
.source-health-card b{
display:block;margin-top:3px;color:#24445f;font-size:10px
}
.source-health-card p{
margin:3px 0 0;color:#8195a9;font-size:8px;line-height:1.45
}
.source-health-card em{
display:block;margin-top:5px;color:#9aabba;font:600 7px 'Bai Jamjuree'
}
.source-health-card[data-state="ok"]{
border-color:#d5ebdf;background:#f5fcf8
}
.source-health-card[data-state="ok"] .source-health-icon{
background:#e9f8f0;color:#2d9669
}
.source-health-card[data-state="warn"]{
border-color:#efdfb9;background:#fffaf0
}
.source-health-card[data-state="warn"] .source-health-icon{
background:#fff0c9;color:#9a700e
}
.source-health-card[data-state="error"]{
border-color:#efdadd;background:#fff8f8
}
.source-health-card[data-state="error"] .source-health-icon{
background:#fdebee;color:#b84e59
}
.source-empty .api-empty-actions{
width:min(720px,calc(100% - 24px));margin-left:auto;margin-right:auto
}
.source-empty .api-empty-actions button{min-height:42px}
@media(max-width:760px){
.source-health-card{
width:100%;grid-template-columns:38px minmax(0,1fr);padding:11px;border-radius:13px
}
.source-health-icon{width:38px;height:38px;border-radius:11px}
.source-empty .api-empty-actions{width:100%}
}
/* Premium resilient guest home */
.premium-guest-home{padding:6px 2px 44px}.guest-hero{position:relative;min-height:390px;border-radius:28px;overflow:hidden;background:#081a36 var(--guest-hero) center/cover no-repeat;box-shadow:0 26px 70px rgba(10,48,88,.16);display:flex;align-items:flex-end;padding:34px;color:#fff}.guest-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,14,35,.96) 0%,rgba(4,19,45,.83) 38%,rgba(4,24,54,.30) 68%,rgba(3,13,29,.58) 100%)}.guest-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,15,34,.06),rgba(4,15,34,.08) 42%,rgba(4,15,34,.62))}.guest-hero-copy{position:relative;z-index:2;max-width:650px}.guest-hero-copy>span{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;font-weight:800;color:#9fd0ff}.guest-hero-copy h1{font-size:46px;line-height:1.04;letter-spacing:-.045em;margin:12px 0 12px;max-width:680px}.guest-hero-copy p{max-width:600px;color:#d7e7f8;font-size:14px;line-height:1.65;margin:0}.guest-hero-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.guest-hero-actions button{width:auto;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer}.guest-watch{background:#1587ff!important;color:#fff!important;box-shadow:0 12px 30px rgba(21,135,255,.34)}.guest-discover{background:rgba(255,255,255,.13)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important}.guest-hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.guest-hero-meta span{font-size:10px;font-weight:700;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}.guest-signin-card{position:absolute;z-index:3;right:28px;bottom:28px;width:300px;background:rgba(255,255,255,.93);color:#173551;border:1px solid rgba(255,255,255,.88);border-radius:20px;padding:20px;box-shadow:0 24px 60px rgba(0,20,48,.24);backdrop-filter:blur(18px)}.guest-signin-card small{font-size:9px;letter-spacing:.16em;color:#1682f3;font-weight:800}.guest-signin-card h3{font-size:20px;line-height:1.15;margin:8px 0}.guest-signin-card p{color:#7087a0;font-size:11px;line-height:1.55;margin:0}.guest-signin-card button{margin-top:14px;background:#0d2f53;color:#fff;border-radius:12px;padding:11px 13px;font-weight:800}.guest-signin-card em{display:block;margin-top:9px;font-style:normal;font-size:9px;color:#8ba0b4;text-align:center}.guest-category-shell,.guest-content-panel{margin-top:18px;background:#fff;border:1px solid #e2ebf4;border-radius:22px;padding:18px;box-shadow:0 12px 34px rgba(25,73,120,.045)}.guest-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}.guest-section-title>div>span{font-size:9px;letter-spacing:.15em;color:#1480f2;font-weight:800}.guest-section-title h2{font-size:23px;letter-spacing:-.025em;margin:4px 0 0;color:#143653}.guest-section-title p{margin:3px 0 0;color:#8a9eb4;font-size:10px}.guest-section-title>button{width:auto;background:#f2f7fc;color:#1c568b;border:1px solid #e1ebf4;padding:8px 12px;border-radius:10px;font-size:10px;font-weight:800}.guest-category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.guest-category{min-height:104px!important;padding:14px!important;border:1px solid #e3edf7!important;background:linear-gradient(145deg,#f9fcff,#eef6ff)!important;color:#163b60!important;border-radius:16px!important;display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;text-align:left!important;position:relative;overflow:hidden;cursor:pointer;transition:.2s ease}.guest-category:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(34,82,130,.09)}.guest-category i{position:absolute;right:10px;top:7px;font-style:normal;font-size:32px;font-weight:900;color:rgba(20,110,205,.08)}.guest-category span b{display:block;font-size:13px}.guest-category span small{display:block;color:#8095aa;font-size:9px;margin-top:3px}.guest-category strong{position:absolute;right:12px;bottom:12px;color:#1684f4}.guest-category-2{background:linear-gradient(145deg,#fff8fb,#fff0f6)!important}.guest-category-3{background:linear-gradient(145deg,#f7f7fb,#eef0f6)!important}.guest-category-4{background:linear-gradient(145deg,#fffaf3,#fff3df)!important}.guest-category-5{background:linear-gradient(145deg,#f6fbff,#eaf7ff)!important}.guest-category-6{background:linear-gradient(145deg,#f7fff9,#ebf9ef)!important}.guest-film-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,260px));gap:16px;align-items:start}.guest-film-grid .film-card .thumb{border-radius:17px}.guest-film-grid .film-card b{font-size:13px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.guest-shorts-panel .short-row{grid-template-columns:repeat(auto-fit,minmax(110px,150px));justify-content:start}.guest-trust-row{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.guest-trust-row>div{background:#0c2138;color:#fff;border-radius:18px;padding:17px 18px;display:flex;align-items:center;gap:14px;min-height:82px}.guest-trust-row b{font-size:24px;color:#3aa0ff}.guest-trust-row strong{display:block;font-size:12px}.guest-trust-row small{display:block;color:#91a8bf;font-size:9px;margin-top:3px}
@media(max-width:1180px){.guest-category-grid{grid-template-columns:repeat(3,1fr)}.guest-signin-card{width:270px}.guest-hero-copy{max-width:56%}.guest-hero-copy h1{font-size:38px}}
@media(max-width:820px){.guest-hero{min-height:500px;padding:22px;align-items:flex-start}.guest-hero-copy{max-width:100%;padding-bottom:175px}.guest-hero-copy h1{font-size:34px}.guest-signin-card{left:20px;right:20px;bottom:20px;width:auto}.guest-category-grid{grid-template-columns:repeat(2,1fr)}.guest-trust-row{grid-template-columns:1fr}.guest-film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.premium-guest-home{padding:0}.guest-hero{border-radius:18px;min-height:530px}.guest-hero-copy h1{font-size:30px}.guest-category-shell,.guest-content-panel{border-radius:16px;padding:14px}.guest-category-grid{grid-template-columns:1fr 1fr}.guest-category{min-height:92px!important}.guest-film-grid{grid-template-columns:1fr 1fr;gap:10px}.guest-film-grid .film-card b{font-size:11px}}
/* Instant loading shells */
.instant-home-shell{padding:8px 2px 30px}.instant-hero{height:310px;border-radius:24px;background:linear-gradient(110deg,#eaf2fa 8%,#f7fbff 18%,#eaf2fa 33%);background-size:200% 100%;animation:bfshimmer 1.05s linear infinite;position:relative;overflow:hidden}.instant-hero span,.instant-hero i{position:absolute;left:34px;background:rgba(255,255,255,.75);border-radius:10px}.instant-hero span{width:38%;height:34px;bottom:92px}.instant-hero i:nth-of-type(1){width:50%;height:15px;bottom:66px}.instant-hero i:nth-of-type(2){width:24%;height:38px;bottom:20px}.instant-row,.instant-grid{display:grid;gap:14px;margin-top:16px}.instant-row{grid-template-columns:repeat(4,1fr)}.instant-row b,.instant-grid i{display:block;aspect-ratio:16/9;border-radius:16px;background:linear-gradient(110deg,#edf3f8 8%,#f9fcff 18%,#edf3f8 33%);background-size:200% 100%;animation:bfshimmer 1.05s linear infinite}.instant-grid{grid-template-columns:repeat(4,1fr)}@keyframes bfshimmer{to{background-position-x:-200%}}@media(max-width:820px){.instant-row,.instant-grid{grid-template-columns:repeat(2,1fr)}.instant-hero{height:260px}}
/* Account CTA polish v4.9.3 */
.account{
display:flex;
align-items:center;
gap:11px;
min-width:188px;
padding:8px 12px;
border:1px solid #dbe7f4;
border-radius:16px;
background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
box-shadow:0 7px 22px rgba(20,70,120,.065);
cursor:pointer;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.account:hover{
transform:translateY(-1px);
border-color:#b9d5f5;
background:#fff;
box-shadow:0 11px 28px rgba(20,70,120,.11);
}
.account i{
flex:0 0 42px;
width:42px;
height:42px;
border-radius:13px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#258cff 0%,#1768ee 100%);
color:#fff;
font-size:17px;
font-weight:800;
font-style:normal;
box-shadow:0 7px 18px rgba(31,126,244,.22);
}
.account small{
min-width:0;
color:#8a9db1;
font-size:10px;
line-height:1.15;
}
.account small b{
display:block;
margin-top:3px;
color:#173754;
font-size:13px;
line-height:1.2;
font-weight:800;
white-space:nowrap;
}
.account-chevron{
margin-left:auto;
color:#7f96ad;
font-size:13px;
transition:transform .2s ease;
}
.account:hover .account-chevron{transform:translateY(1px)}
@media(max-width:760px){
.account{min-width:0;padding:6px 8px;border-radius:13px}
.account i{width:38px;height:38px;flex-basis:38px;border-radius:11px}
.account small{display:none}
.account-chevron{display:none}
}
/* Guest multi-genre rails v4.9.4 */
.guest-rail-panel{overflow:hidden}
.guest-horizontal-rail{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(210px,260px);
gap:14px;
overflow-x:auto;
padding:2px 2px 8px;
scroll-snap-type:x proximity;
scrollbar-width:thin;
scrollbar-color:#c8d8e8 transparent;
}
.guest-horizontal-rail::-webkit-scrollbar{height:6px}
.guest-horizontal-rail::-webkit-scrollbar-thumb{background:#c8d8e8;border-radius:99px}
.guest-rail-card{
min-width:0;
cursor:pointer;
scroll-snap-align:start;
transition:transform .2s ease;
}
.guest-rail-card:hover{transform:translateY(-3px)}
.guest-rail-thumb{
position:relative;
aspect-ratio:16/9;
overflow:hidden;
border-radius:16px;
background:#132f51 center/cover no-repeat;
box-shadow:0 10px 24px rgba(25,72,118,.12);
}
.guest-rail-thumb:after{
content:"";
position:absolute;
inset:auto 0 0;
height:46%;
background:linear-gradient(transparent,rgba(4,14,30,.66));
pointer-events:none;
}
.guest-rail-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.guest-rail-play{
position:absolute;
z-index:3;
left:10px;
bottom:10px;
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:#fff;
color:#1177e8;
font-size:12px;
box-shadow:0 6px 16px rgba(6,31,61,.2);
}
.guest-rail-thumb em{
position:absolute;
z-index:3;
right:8px;
top:8px;
font-style:normal;
font-size:9px;
color:#fff;
background:rgba(3,15,33,.78);
border-radius:7px;
padding:4px 6px;
}
.guest-rail-card>b{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
margin-top:8px;
color:#173754;
font-size:12px;
line-height:1.35;
}
.guest-rail-card>small{
display:block;
margin-top:4px;
color:#8397ab;
font-size:9px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.guest-rail-skeleton{
display:block;
aspect-ratio:16/9;
border-radius:16px;
background:linear-gradient(110deg,#edf3f8 8%,#f9fcff 18%,#edf3f8 33%);
background-size:200% 100%;
animation:bfshimmer 1.05s linear infinite;
}
.guest-rail-empty{
grid-column:1/-1;
padding:22px;
border:1px dashed #d6e3ef;
border-radius:14px;
color:#8297ab;
background:#f9fcff;
font-size:11px;
}
@media(max-width:760px){
.guest-horizontal-rail{grid-auto-columns:minmax(170px,72vw);gap:10px}
.guest-rail-card>b{font-size:11px}
}
/* Guest density + cache refresh v4.9.6 */
.premium-guest-home .guest-content-panel{
padding:16px 16px 14px;
margin-top:14px;
border-radius:18px;
}
.premium-guest-home .guest-section-title{
margin-bottom:10px;
}
.premium-guest-home .guest-section-title h2{
font-size:20px;
}
.premium-guest-home .guest-section-title p{
font-size:9px;
}
.premium-guest-home .guest-horizontal-rail{
grid-auto-columns:minmax(180px,220px);
gap:12px;
padding-bottom:4px;
}
.premium-guest-home .guest-rail-thumb{
border-radius:14px;
}
.premium-guest-home .guest-rail-card>b{
margin-top:7px;
font-size:11px;
}
.premium-guest-home .guest-rail-card>small{
font-size:8.5px;
}
.guest-rating{
left:auto!important;
right:8px!important;
top:auto!important;
bottom:8px!important;
background:rgba(5,19,40,.84)!important;
color:#ffd761!important;
}
@media(min-width:1280px){
.premium-guest-home .guest-horizontal-rail{
grid-auto-columns:minmax(170px,1fr);
grid-template-columns:repeat(6,minmax(0,1fr));
grid-auto-flow:unset;
overflow:hidden;
}
.premium-guest-home .guest-horizontal-rail .guest-rail-card:nth-child(n+7){display:none}
}
@media(max-width:760px){
.premium-guest-home .guest-horizontal-rail{grid-auto-columns:68vw}
}