*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;background:#06091b;color:#f3f6ff}
body{overflow-x:hidden}
button{font:inherit;cursor:pointer}
.app-shell{min-height:100vh;background:radial-gradient(circle at 50% -12%,rgba(74,34,132,.52),transparent 34%),#06091b}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:rgba(7,10,28,.9);border-bottom:1px solid rgba(112,131,208,.18);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.menu-btn{width:38px;height:38px;background:transparent;border:0;padding:7px;display:grid;align-content:center;gap:5px}.menu-btn i{height:2px;width:21px;background:#7985a4;border-radius:3px}
.brand{font-size:25px;font-weight:800;letter-spacing:-1.4px}.brand span{color:#28e9c1}
.top-actions{display:flex;align-items:center;gap:2px}.top-actions button{width:35px;height:35px;border:0;background:transparent;color:#cbd2e8;font-size:12px;font-weight:700;border-radius:11px}.top-actions .bell{font-size:18px;position:relative}.bell em{position:absolute;width:6px;height:6px;background:#2beeb4;border-radius:50%;right:5px;top:5px}
.heading-row{display:flex;align-items:center;justify-content:space-between;padding:18px 14px 8px}.heading-row h1{font-size:17px;margin:0;font-weight:800}.heading-row span{font-size:11px;color:#7f8cae}.heading-row b{color:#23e4c0}
.rotation-bar{margin:0 12px 12px;padding:9px 12px;border:1px solid rgba(89,239,210,.16);border-radius:13px;background:rgba(18,27,58,.52);display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#7f8cae}.rotation-bar strong{font-weight:600}.rotation-bar b{color:#26e9bd}.live-dot{display:inline-block;width:6px;height:6px;background:#29e7b9;border-radius:50%;margin-right:5px;box-shadow:0 0 8px #29e7b9}
.ad-list{display:grid;gap:14px;padding:0 12px 95px;max-width:680px;margin:auto}.ad-card{overflow:hidden;border:1px solid rgba(119,237,239,.65);border-radius:23px;background:linear-gradient(180deg,#121a38,#0c1330);box-shadow:0 0 18px rgba(38,220,219,.07);animation:cardIn .35s ease both}.ad-media{height:190px;background:#111832;position:relative;overflow:hidden}.ad-media video{width:100%;height:100%;object-fit:cover;display:block}.sponsored-pill{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:20px;background:rgba(18,22,37,.84);color:#1ee6d0;font-size:8px;font-weight:800;letter-spacing:1px}.duration{position:absolute;right:8px;bottom:8px;padding:4px 7px;border-radius:7px;background:rgba(5,8,17,.82);font-size:9px}.ad-info{padding:13px}.ad-info h2{font-size:13px;margin:0 0 7px;font-weight:800;line-height:1.3}.ad-info p{font-size:10px;line-height:1.5;color:#909bb8;margin:0 0 13px}.ad-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.reward-btn,.watch-btn{height:37px;border:0;border-radius:22px;font-size:11px;font-weight:800}.reward-btn{background:#11e6a8;color:#061326}.watch-btn{background:linear-gradient(90deg,#ff4d48,#ff9711);color:#fff}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:64px;z-index:25;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(7,11,28,.94);border-top:1px solid rgba(123,140,207,.16);backdrop-filter:blur(18px)}.bottom-nav button{border:0;background:transparent;color:#68728d;font-size:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.bottom-nav strong{font-size:18px;font-weight:500}.bottom-nav .active{color:#26e8a8}
.overlay{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(1,3,13,.87);backdrop-filter:blur(8px)}.overlay.show{display:flex}
.watch-modal{width:min(100%,650px);max-height:94vh;overflow:auto;border:1.5px solid #8eeef0;border-radius:34px;background:#0c1430;box-shadow:0 0 48px rgba(85,236,241,.2);position:relative}.close-btn{position:absolute;right:15px;top:15px;width:45px;height:45px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(8,11,26,.78);color:#fff;font-size:34px;line-height:1;z-index:3}.modal-media{height:430px;background:#050816;position:relative}.modal-media video{width:100%;height:100%;object-fit:cover}.modal-media .sponsored-pill{left:24px;top:24px;font-size:12px;padding:11px 16px}.video-time{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 23px;border-radius:30px;background:rgba(6,9,20,.86);font-size:21px;font-weight:800;color:#35f064}
.modal-content{padding:27px 42px 34px}.modal-content h2{font-size:24px;margin:0 0 12px}.modal-content>p{color:#9da7c2;line-height:1.5;font-size:16px}.progress-track{height:15px;border-radius:20px;background:#202943;overflow:hidden;margin:24px 0 15px}.progress-track div{width:0;height:100%;background:#35ef65;border-radius:20px}.reward-line{color:#35ef64;font-size:18px;font-weight:800}.watch-hint{margin:17px 0!important}.claim-btn{width:100%;height:57px;border:0;border-radius:30px;background:#202943;color:#9ba5bf;font-size:16px;font-weight:800}.claim-btn.ready{background:#12e8a8;color:#061326;box-shadow:0 0 22px rgba(18,232,168,.2)}
.reward-modal{width:min(100%,680px);padding:50px 42px 45px;text-align:center;border:1.5px solid #dbe7ff;border-radius:34px;background:#0d1430;box-shadow:0 0 50px rgba(220,230,255,.2)}.success-icon{width:86px;height:86px;margin:0 auto 40px;border:7px solid #32ee63;border-radius:50%;display:grid;place-items:center;color:#32ee63;font-size:51px;font-weight:800;background:#18213e}.reward-modal h2{font-size:31px;margin:0 0 25px}.reward-modal>p{font-size:19px;line-height:1.5;color:#a6afc6}.earned{font-size:37px;color:#36ef5e;font-weight:800;margin:34px 0 42px}.continue-btn{width:100%;height:61px;border:0;border-radius:33px;background:#11e9a6;color:#061326;font-size:18px;font-weight:800}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.brand{font-size:23px}.topbar{height:64px}.ad-media{height:184px}.modal-media{height:48vh;min-height:290px;max-height:430px}.modal-content{padding:22px 24px 28px}.modal-content h2{font-size:21px}.modal-content>p{font-size:14px}.reward-modal{padding:40px 24px 30px}.success-icon{margin-bottom:30px}.reward-modal h2{font-size:26px}.reward-modal>p{font-size:17px}.earned{font-size:31px;margin:28px 0 35px}.rotation-bar{font-size:8px}}

.company{font-size:9px;color:#6f7d9f;margin:-3px 0 8px;font-weight:600}.modal-company{color:#2ce8bd;font-size:13px;font-weight:700;margin:-5px 0 12px}.continue-message{font-size:15px!important;color:#a5aec5!important;margin:-22px 0 30px!important}
.ad-media img{width:100%;height:100%;object-fit:cover;display:block}

.empty-state{margin:25px 0;padding:28px;text-align:center;border:1px solid rgba(119,237,239,.35);border-radius:22px;color:#8996b5;background:#101936}.ad-media video{background:#101936}


/* FINAL WATCH ADS UI */
.topbar{height:64px;padding:0 12px;gap:8px}
.back-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:76px;height:38px;padding:0 9px;border:1px solid rgba(92,239,220,.28);border-radius:19px;background:rgba(16,26,55,.8);color:#dce5fa;font-size:10px;font-weight:800;box-shadow:0 0 12px rgba(35,232,190,.08)}
.back-btn span{font-size:18px;line-height:1}.back-btn:hover{border-color:rgba(92,239,220,.7);box-shadow:0 0 18px rgba(35,232,190,.18)}
.top-spacer{width:76px}
.brand{font-size:17px;letter-spacing:-.55px;text-align:center;white-space:nowrap;flex:1}.brand span{color:#28e9c1}
.ads-intro{padding:15px 14px 4px;max-width:680px;margin:auto}.ads-intro h1{font-size:20px;margin:0 0 6px;font-weight:900}.ads-intro p{margin:0;color:#9aa6c2;font-size:11px;line-height:1.55;max-width:620px}.heading-row h2{font-size:14px;margin:0;font-weight:800}
.watch-modal{width:min(94vw,560px);max-height:88vh;overflow:hidden;display:flex;flex-direction:column}
.modal-media{height:min(35vh,300px);min-height:190px;flex:0 0 auto}.modal-media video,.modal-media img{width:100%;height:100%;object-fit:contain;background:#050816}.modal-content{padding:18px 25px 22px;overflow:auto}.modal-content h2{font-size:20px}.modal-content>p{font-size:13px}.progress-track{height:10px;margin:15px 0 11px}.watch-hint{margin:12px 0!important}.claim-btn{height:52px;flex:0 0 auto}
.overlay{padding:12px}
.reward-modal{width:min(94vw,560px);max-height:88vh;overflow:auto;padding:34px 28px 30px}.success-icon{width:72px;height:72px;font-size:43px;margin-bottom:25px}.reward-modal h2{font-size:26px;margin-bottom:18px}.reward-modal>p{font-size:16px}.earned{font-size:30px;margin:24px 0 27px}.continue-btn{height:55px}
@media(max-width:600px){.topbar{height:60px}.brand{font-size:13px}.back-btn{min-width:70px;font-size:9px}.top-spacer{width:70px}.ads-intro{padding:13px 13px 3px}.ads-intro h1{font-size:18px}.ads-intro p{font-size:10px}.watch-modal{width:96vw;max-height:90vh;border-radius:24px}.modal-media{height:220px;min-height:170px}.modal-content{padding:16px 18px 18px}.modal-content h2{font-size:18px;margin-bottom:8px}.modal-content>p{font-size:12px;margin:0 0 6px}.modal-company{font-size:11px}.progress-track{margin:12px 0 9px}.claim-btn{height:49px;font-size:14px}.close-btn{width:38px;height:38px;font-size:28px;right:10px;top:10px}.modal-media .sponsored-pill{left:12px;top:12px;font-size:10px;padding:8px 11px}.video-time{bottom:12px;font-size:16px;padding:7px 15px}.reward-modal{width:96vw;max-height:90vh;border-radius:24px;padding:30px 18px 24px}.reward-modal h2{font-size:23px}.reward-modal>p{font-size:14px}.earned{font-size:27px;margin:20px 0 23px}.continue-btn{height:51px}}

/* =========================================================
   PAID ADS — MOBILE FRAME LOCK + TOP PAYMENT NOTIFICATION
   ========================================================= */
html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
body { min-width: 0 !important; touch-action: pan-y; }
.app-shell { width: 100%; max-width: 100%; overflow-x: hidden; }
.topbar, main, .heading-row, .rotation-bar, .ads-intro { width: 100%; max-width: 100%; box-sizing: border-box; }
.ad-list { width: 100%; max-width: 680px; box-sizing: border-box; }
.ad-card, .ad-media, .ad-info { min-width: 0; max-width: 100%; }
.ad-media img, .ad-media video, .modal-media img, .modal-media video { max-width: 100%; }

.reward-modal { position: relative; }
.reward-close-btn {
  position: absolute; right: 14px; top: 12px; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%;
  background: rgba(255,255,255,.06); color: #fff; font-size: 25px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}

.ads-payment-toast {
  position: fixed;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 560px);
  min-height: 76px;
  padding: 11px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100000;
  border: 1px solid rgba(31,245,164,.68);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(6,24,33,.98), rgba(8,14,33,.98));
  box-shadow: 0 18px 55px rgba(0,0,0,.60), 0 0 14px rgba(31,245,164,.45), 0 0 34px rgba(31,245,164,.22);
  opacity: 0;
  pointer-events: none;
  transition: top .45s cubic-bezier(.175,.885,.32,1.275), opacity .22s ease;
}
.ads-payment-toast.show { top: 12px; opacity: 1; pointer-events: auto; animation: adsPaymentGlow 1.25s ease-in-out infinite alternate; }
.ads-payment-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; overflow: hidden; border: 1px solid rgba(31,245,164,.45); background: #071d32; }
.ads-payment-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.ads-payment-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.ads-payment-copy strong { color:#fff; font-size:13px; font-weight:900; line-height:1.2; }
.ads-payment-copy span { color:#b8c8d7; font-size:10.5px; line-height:1.3; }
.ads-payment-action { flex:0 0 auto; padding:9px 11px; border-radius:10px; background:#15d991; color:#032016; text-decoration:none; font-size:10px; font-weight:900; white-space:nowrap; box-shadow:0 0 13px rgba(21,217,145,.25); }
.ads-payment-close { width:28px; height:28px; flex:0 0 28px; border:0; background:transparent; color:#8291a9; font-size:20px; cursor:pointer; }
@keyframes adsPaymentGlow { from { box-shadow:0 18px 55px rgba(0,0,0,.60),0 0 9px rgba(31,245,164,.30),0 0 20px rgba(31,245,164,.14); } to { box-shadow:0 18px 55px rgba(0,0,0,.60),0 0 18px rgba(31,245,164,.65),0 0 38px rgba(31,245,164,.28); } }
@media (max-width: 600px) {
  .ads-payment-toast { width: calc(100vw - 16px); min-height: 70px; padding: 9px 10px; gap: 8px; border-radius: 16px; }
  .ads-payment-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
  .ads-payment-copy strong { font-size: 11.5px; }
  .ads-payment-copy span { font-size: 9.5px; }
  .ads-payment-action { padding: 8px 9px; font-size: 9px; }
  .ads-payment-close { width: 24px; height: 24px; flex-basis: 24px; font-size: 18px; }
}
html, body, .app-shell { overscroll-behavior-x: none; }