:root{
  --app-width:568px;
  --bg:#02070c;
  --panel:#07131c;
  --panel2:#0a1d2b;
  --text:#effcff;
  --muted:#82a6b5;
  --cyan:#0cf5ff;
  --cyan2:#00bfea;
  --blue:#066fca;
  --gold:#eac65d;
  --gold2:#ffb52f;
  --line:#143449;
  --nav-h:83px;
  --side:15px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#000;color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.phone-shell{position:relative;width:100%;max-width:var(--app-width);min-height:100dvh;margin:0 auto;background:linear-gradient(180deg,#02070c 0%,#031019 52%,#02070c 100%);overflow-x:hidden;box-shadow:0 0 0 1px rgba(12,245,255,.06),0 0 42px rgba(0,118,202,.08)}
.topbar{position:sticky;top:0;z-index:30;background:rgba(3,13,20,.985);backdrop-filter:blur(8px);border-top:1px solid rgba(234,198,93,.22);border-bottom:1px solid rgba(12,245,255,.09)}
.toprow{height:68px;display:flex;align-items:center;justify-content:space-between;padding:7px var(--side) 2px}
.brand-btn{border:0;background:transparent;padding:0;width:144px;height:54px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
.brand-logo{display:block;width:139px;height:49px;object-fit:contain}
.top-actions{display:flex;align-items:center;gap:11px;white-space:nowrap}
.plain-btn,.icon-btn{border:0;background:transparent;color:#f5fdff;padding:8px 2px;font-size:17px}
.plain-btn:hover,.icon-btn:hover{color:var(--cyan)}
.signup-btn{border:1px solid rgba(234,198,93,.75);border-radius:9px;color:#06121a;background:linear-gradient(180deg,#f4db7a 0%,#e5b73d 100%);box-shadow:0 0 15px rgba(234,198,93,.18),inset 0 1px 0 rgba(255,255,255,.45);padding:11px 17px;font-size:17px;font-weight:700}
.icon-btn{font-size:24px;line-height:1}.download-icon{font-size:29px;color:var(--gold);font-weight:700}
.category-row{height:52px;display:flex;align-items:center;gap:26px;padding:0 var(--side);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:1px solid rgba(12,245,255,.08)}
.category-row::-webkit-scrollbar{display:none}
.category{position:relative;flex:0 0 auto;border:0;background:transparent;color:#a7c6d1;font-size:17px;padding:15px 0 13px;white-space:nowrap}
.category:hover{color:#dffbff}
.category.active{color:var(--cyan);text-shadow:0 0 12px rgba(12,245,255,.35)}
.category.active::after{content:"";position:absolute;left:50%;bottom:3px;width:24px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--gold));box-shadow:0 0 8px rgba(12,245,255,.35);transform:translateX(-50%)}
.search-trigger{margin-left:0;flex:0 0 auto;border:0;background:transparent;color:#b9d5df;font-size:31px;line-height:1;padding:3px 1px 3px 4px}
.search-trigger:hover{color:var(--cyan)}
.search-panel{display:flex;gap:8px;padding:9px var(--side) 11px;background:#06131c;border-top:1px solid rgba(12,245,255,.08)}
.search-panel[hidden]{display:none}
.search-panel input{width:100%;border:1px solid #17435a;background:#01070b;color:#fff;border-radius:9px;padding:11px 13px;outline:none;box-shadow:inset 0 0 0 1px rgba(12,245,255,.03)}
.search-panel input:focus{border-color:var(--cyan2);box-shadow:0 0 0 2px rgba(12,245,255,.08)}
.search-panel button{width:42px;border:1px solid #1d4960;border-radius:9px;background:#0a2230;color:#fff;font-size:26px}
.content{padding:7px var(--side) 0}
.media-banner{width:100%;margin:0 0 10px;overflow:hidden;border:1px solid rgba(12,245,255,.16);border-radius:7px;background:#000;box-shadow:0 4px 15px rgba(0,0,0,.28),0 0 0 1px rgba(234,198,93,.035)}
.media-banner-video{display:block;width:100%;aspect-ratio:1956/804;height:auto;object-fit:cover;background:#000}
.featured-wrap{margin-bottom:11px}
.featured-card,.video-card{border:0;background:transparent;color:inherit;padding:0;text-align:left;width:100%}
.thumb{position:relative;width:100%;overflow:hidden;background:#06131c;border:1px solid rgba(12,245,255,.11);border-radius:10px;box-shadow:0 5px 16px rgba(0,0,0,.18)}
.featured-card .thumb{aspect-ratio:1.88/1;border-radius:0;border-left-color:rgba(234,198,93,.2);border-right-color:rgba(234,198,93,.2)}
.video-card .thumb{aspect-ratio:1.67/1}
.thumb img{width:100%;height:100%;display:block;object-fit:cover}
.duration{position:absolute;right:6px;bottom:6px;padding:5px 8px;border:1px solid rgba(12,245,255,.18);border-radius:8px;background:rgba(2,13,20,.84);color:#fff;font-family:Georgia,serif;font-size:16px;line-height:1;box-shadow:0 0 10px rgba(0,0,0,.26)}
.title{display:block;margin-top:7px;color:#dffaff;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.featured-card .title{font-size:18px;margin-top:8px;color:#f6ffff}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.video-card{min-width:0}
.video-card .title{font-size:16px}
.end-space{height:112px}
.bottom-nav{position:fixed;left:50%;bottom:0;z-index:40;width:100%;max-width:var(--app-width);height:var(--nav-h);transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);padding:7px 8px max(8px,env(safe-area-inset-bottom));background:linear-gradient(90deg,#06131d,#082231 48%,#06131d);border-top:1px solid rgba(234,198,93,.24);box-shadow:0 -8px 20px rgba(0,0,0,.42),0 -1px 0 rgba(12,245,255,.06)}
.nav-item{border:0;background:transparent;color:#688797;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:16px}
.nav-item.active{color:var(--gold);text-shadow:0 0 10px rgba(234,198,93,.22)}
.nav-icon{width:34px;height:34px;display:grid;place-items:center;line-height:1;color:inherit}
.nav-svg{width:34px;height:34px;display:block;overflow:visible;color:inherit}
.nav-item .nav-svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.nav-item.active .nav-svg{filter:drop-shadow(0 0 6px rgba(234,198,93,.22))}
.nav-item.active[data-nav="media"] .nav-svg-media{color:var(--gold)}
.nav-item:not(.active) .nav-svg{opacity:.88}
.watch-view{padding:10px var(--side) 0}
.watch-view[hidden]{display:none}
.back-btn{border:0;background:transparent;color:var(--gold);padding:5px 0 12px;font-size:17px}
.fake-player{position:relative;aspect-ratio:16/9;background:#010407;overflow:hidden;border:1px solid rgba(12,245,255,.12);border-radius:4px}
.fake-player img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:1px solid rgba(12,245,255,.7);border-radius:50%;background:rgba(2,12,18,.65);color:#fff;font-size:27px;padding-left:6px;box-shadow:0 0 22px rgba(12,245,255,.18)}
.watch-view h1{font-size:22px;margin:12px 0 6px;color:#effcff}.watch-view h2{font-size:18px;margin:18px 0 10px;color:#dffaff}.watch-meta{display:flex;gap:8px;color:#7fa4b4;font-size:14px}.watch-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.watch-actions button{border:1px solid #174057;background:#071925;color:#bfeef5;border-radius:8px;padding:10px 4px}
.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.74);display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal{position:relative;width:min(390px,100%);padding:24px 20px 20px;border:1px solid rgba(12,245,255,.2);border-radius:15px;background:#06131c;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.55)}.modal-x{position:absolute;right:9px;top:7px;border:0;background:transparent;color:#fff;font-size:27px}.modal-logo{width:190px;height:70px;object-fit:contain}.modal h2{margin:5px 0 6px;color:#effcff}.modal p{margin:0 0 14px;color:#89a7b3;font-size:14px}.modal input{width:100%;margin:6px 0;padding:11px;border:1px solid #17435a;background:#01070b;color:#fff;border-radius:8px}.modal-primary{width:100%;margin-top:8px;border:1px solid rgba(234,198,93,.72);border-radius:8px;padding:11px;background:linear-gradient(180deg,#f4db7a,#e5b73d);color:#06121a;font-weight:800}
@media (max-width:410px){:root{--side:10px}.toprow{height:62px}.brand-btn{width:121px;height:49px}.brand-logo{width:119px;height:46px}.top-actions{gap:7px}.plain-btn{font-size:15px}.signup-btn{padding:9px 13px;font-size:15px}.icon-btn{font-size:21px}.category-row{gap:21px;height:48px}.category{font-size:15px}.search-trigger{font-size:28px}.title,.featured-card .title{font-size:15px}.video-card .title{font-size:14px}.grid{gap:12px 9px}.duration{font-size:14px;padding:4px 7px}.bottom-nav{height:78px}.nav-item{font-size:14px}.nav-icon,.nav-svg{width:31px;height:31px}}

/* Discount / activity page */
.discount-view{padding:0 var(--side)}
.discount-view[hidden]{display:none}
.discount-head{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(12,245,255,.08)}
.discount-head h1{font-size:20px;margin:0;color:#f4fdff;letter-spacing:.2px}
.discount-history{border:0;background:transparent;color:var(--gold);font-size:14px;padding:8px 0}
.discount-tabs{height:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-items:end;border-bottom:1px solid rgba(12,245,255,.08);margin-bottom:12px}
.discount-tab{position:relative;height:47px;border:0;background:transparent;color:#6f93a3;font-size:16px;font-weight:700}
.discount-tab.active{color:var(--cyan)}
.discount-tab.active::after{content:"";position:absolute;left:50%;bottom:-1px;width:40px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--gold));transform:translateX(-50%);box-shadow:0 0 10px rgba(12,245,255,.28)}
.discount-list{display:flex;flex-direction:column;gap:13px}
.promo-card{overflow:hidden;border:1px solid rgba(12,245,255,.12);border-radius:10px;background:#06131c;box-shadow:0 8px 20px rgba(0,0,0,.24)}
.promo-art{position:relative;height:154px;padding:17px 18px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate}
.promo-art::before,.promo-art::after{content:"";position:absolute;border-radius:50%;z-index:-1;filter:blur(1px)}
.promo-art::before{width:165px;height:165px;right:-39px;top:-50px;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 22px rgba(255,255,255,.025),0 0 0 46px rgba(255,255,255,.018)}
.promo-art::after{width:135px;height:135px;right:34px;bottom:-85px;background:radial-gradient(circle,rgba(234,198,93,.28),transparent 64%)}
.promo-art-a{background:linear-gradient(135deg,#06375c 0%,#087b9f 55%,#07dbe5 100%)}
.promo-art-b{background:linear-gradient(135deg,#071f45 0%,#0b52a2 54%,#0aa9dd 100%)}
.promo-art-c{background:linear-gradient(135deg,#182448 0%,#3a2e68 55%,#1a9bbd 100%)}
.promo-art-d{background:linear-gradient(135deg,#0b2530 0%,#0c6b7b 50%,#b29032 120%)}
.promo-kicker{width:max-content;margin-bottom:7px;padding:3px 8px;border:1px solid rgba(255,255,255,.28);border-radius:20px;background:rgba(0,0,0,.13);color:#e9fbff;font-size:10px;font-weight:800;letter-spacing:1.3px}
.promo-art strong{color:#fff;font-size:22px;line-height:1.05;letter-spacing:.3px;text-shadow:0 2px 12px rgba(0,0,0,.22)}
.promo-value{color:#ffe27a;font-size:33px;font-weight:900;line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.promo-note{margin-top:4px;color:#e7fcff;font-size:12px}
.promo-body{min-height:76px;padding:11px 12px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#071722,#06121b)}
.promo-body h2{margin:0 0 4px;color:#effcff;font-size:15px}
.promo-body p{margin:0;color:#7899a7;font-size:12px;line-height:1.35}
.promo-btn{flex:0 0 auto;border:1px solid rgba(234,198,93,.72);border-radius:17px;background:linear-gradient(180deg,#f4dc7a,#dba93a);color:#06121a;font-size:12px;font-weight:800;padding:7px 16px;box-shadow:0 3px 10px rgba(234,198,93,.12)}
.promo-btn:active{transform:translateY(1px)}
@media(max-width:410px){.promo-art{height:140px;padding:15px}.promo-art strong{font-size:20px}.promo-value{font-size:30px}.promo-body{padding:10px}.promo-body h2{font-size:14px}.promo-body p{font-size:11px}.promo-btn{padding:7px 13px}}

/* Content Admin integration */
.watch-player-wrap{position:relative;width:100%}
.watch-player{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid rgba(12,245,255,.12);border-radius:4px}
.watch-player[hidden]{display:none}
.fake-player[hidden]{display:none}
.no-video-note{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 11px;border:1px solid rgba(12,245,255,.18);border-radius:8px;background:rgba(0,0,0,.72);color:#d8f8ff;font-size:12px;text-align:center}
.empty-result{grid-column:1/-1;color:#7899a7;padding:20px 4px;margin:0}