:root{
  --bg1:#335cff; --bg2:#7fb0ff;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:#fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, 'Noto Sans', sans-serif;
  background: linear-gradient(180deg, var(--bg2), var(--bg1)) fixed;
}
.app{max-width:980px; margin:0 auto; padding:16px 12px 84px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 10px}
.brand{display:flex; gap:10px; align-items:center}
.brand img{width:32px; height:32px; border-radius:50%}
.lang{padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28)}
.lang select{background:transparent; color:#fff; border:none; outline:none}
.badge{padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28)}
.card{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:var(--radius); backdrop-filter:blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.09), inset 0 -10px 30px rgba(255,255,255,.06)}
.btn-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:760px){ .btn-grid{grid-template-columns:repeat(3,1fr);} }
.btn{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px; cursor:pointer; transition:.2s transform, .2s box-shadow}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.12)}
.btn .icon{width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background: radial-gradient(100% 100% at 0% 0%, #a9c2ff 0%, #6b92ff 60%, #3b5dff 100%);
  border:1px solid rgba(255,255,255,.6)}
.btn span{font-weight:700}
.banner{overflow:hidden; margin:16px 0}
.banner img{width:100%; height:220px; object-fit:cover; border-radius:var(--radius); display:block}
.countdown{padding:10px 0 0; text-align:center; font-weight:800; letter-spacing:.6px; color:#dbe5ff}
.section-title{margin:12px 6px; font-size:18px; font-weight:800; color:#eef2ff}
.task-card{display:flex; gap:14px; padding:14px; position:relative; align-items:center}
.task-thumb{width:100px; height:80px; border-radius:14px; overflow:hidden; flex:0 0 auto}
.task-thumb img{width:100%; height:100%; object-fit:cover}
.task-body{flex:1}
.price{font-size:22px; font-weight:900}
.desc{font-size:12px; color:#e8eeff; margin-top:6px; line-height:1.35}
.cta{display:flex; gap:8px; margin-top:10px}
.pill{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.45)}
.lock{position:absolute; right:10px; top:10px; width:58px; height:58px}
.bottom-nav{position:fixed; left:0; right:0; bottom:0; padding:10px 6px; background:linear-gradient(180deg, rgba(30,60,140,.0), rgba(30,60,140,.42)), rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.24); backdrop-filter:blur(8px)}
.navbar{max-width:980px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.tab{padding:10px 8px; text-align:center; color:#e3ecff; font-size:12px}
.tab .ico{width:24px; height:24px; margin:0 auto 4px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.5)}
.tab.active{color:#fff; font-weight:800}
.small{font-size:12px; color:#d7e2ff}
.header-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}