/* =====================================================
   UREARN — modern mobile UI (Telegram Mini App)
===================================================== */
:root{
    --bg:#070d18; --bg2:#0b1424; --card:#101b2e; --card2:#14233a;
    --line:rgba(255,255,255,.08); --text:#f2f6fc; --muted:#8fa3bb;
    --blue:#3b8cff; --blue2:#5b6cff; --green:#34d399; --gold:#fbbf24;
    --red:#fb7185; --purple:#a78bfa;
    --r:18px; --nav-h:68px;
    --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);min-height:100%}
body{
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:15px;line-height:1.45;color:var(--text);-webkit-font-smoothing:antialiased;
    background:
      radial-gradient(900px 420px at 85% -10%,rgba(91,108,255,.18),transparent 60%),
      radial-gradient(700px 380px at -10% 0%,rgba(59,140,255,.12),transparent 60%),
      var(--bg);
    background-attachment:fixed;
}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation;transition:transform .12s,opacity .15s,background .15s}
button:active:not(:disabled){transform:scale(.97)}
button:disabled{cursor:not-allowed;opacity:.5}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hidden{display:none!important}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.sm{width:18px;height:18px}.ico.lg{width:26px;height:26px}

#app{max-width:560px;margin:0 auto;padding:16px 16px calc(var(--nav-h) + var(--safe-b) + 28px)}
.screen{animation:in .28s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:11px}
.logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:19px;
    background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 8px 20px rgba(59,140,255,.35)}
.brand b{display:block;font-size:17px;letter-spacing:.2px}
.brand small{color:var(--muted);font-size:12px}
.icon-btn{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--text)}
.backbar{display:flex;align-items:center;gap:6px;margin:0 0 14px;color:var(--blue);font-weight:600;padding:6px 8px 6px 0}

h1{font-size:26px;font-weight:800;letter-spacing:-.3px}
h2{font-size:17px;font-weight:700}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.4px;color:var(--blue);text-transform:uppercase;margin-bottom:6px}
.sub{color:var(--muted);font-size:14px;margin-top:4px}
.heading{margin:4px 0 18px}
.section{margin:22px 0 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.link-btn{color:var(--blue);font-weight:600;font-size:14px;padding:4px 0}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:22px;margin:16px 0;
    background:linear-gradient(135deg,#2563eb 0%,#5b4ee0 60%,#7c3aed 100%);box-shadow:0 18px 40px rgba(60,80,230,.28)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09)}
.hero::before{width:200px;height:200px;right:-70px;top:-100px}
.hero::after{width:120px;height:120px;right:50px;bottom:-70px}
.hero>*{position:relative;z-index:1}
.hero .label{font-size:12px;font-weight:700;letter-spacing:1.3px;color:rgba(255,255,255,.75)}
.hero .big{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px}
.hero .big small{font-size:14px;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.75)}
.hero p{margin-top:10px;color:rgba(255,255,255,.8);font-size:13px}

/* ---------- cards / lists ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.card h3{font-size:15px;margin-bottom:4px}
.card p.sub{margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.quick b{font-size:15px;display:block}.quick span.s{color:var(--muted);font-size:12.5px}
.chip-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}
.t-blue{background:rgba(59,140,255,.14);color:var(--blue)}.t-green{background:rgba(52,211,153,.14);color:var(--green)}
.t-gold{background:rgba(251,191,36,.14);color:var(--gold)}.t-purple{background:rgba(167,139,250,.15);color:var(--purple)}
.t-red{background:rgba(251,113,133,.14);color:var(--red)}

.task{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px;margin-bottom:10px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.task .body{flex:1;min-width:0}
.task b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task .meta{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reward{color:var(--green);font-weight:800;font-size:15px;white-space:nowrap}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700}
.b-green{background:rgba(52,211,153,.14);color:var(--green)}.b-gold{background:rgba(251,191,36,.14);color:var(--gold)}
.b-red{background:rgba(251,113,133,.14);color:var(--red)}.b-blue{background:rgba(59,140,255,.14);color:var(--blue)}

.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{flex:none;padding:9px 16px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:14px}
.filter.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- buttons / inputs ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 16px;border-radius:14px;font-weight:700;font-size:15px;
    background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 8px 20px rgba(59,140,255,.25)}
.btn.ghost{background:rgba(59,140,255,.12);color:var(--blue);box-shadow:none}
.btn.tg{background:#229ed9;box-shadow:none}
.btn.sm{width:auto;padding:10px 14px;font-size:14px;box-shadow:none}
.input{width:100%;padding:14px;border-radius:13px;border:1px solid var(--line);background:var(--bg2);font-size:16px;outline:none;letter-spacing:.5px}
.input:focus{border-color:var(--blue)}
.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;border:1.5px dashed rgba(59,140,255,.45);
    border-radius:16px;background:rgba(59,140,255,.05);cursor:pointer;text-align:center;color:var(--muted);font-size:13px}
.upload b{color:var(--text);font-size:15px}
.preview{margin-top:10px;border-radius:14px;overflow:hidden;background:#050a12}
.preview img{display:block;width:100%;max-height:300px;object-fit:contain}

/* ---------- steps ---------- */
.step{display:flex;gap:14px;padding:16px;margin-bottom:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.num{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:rgba(59,140,255,.14);color:var(--blue)}
.step.done .num{background:rgba(52,211,153,.16);color:var(--green)}
.step .sb{flex:1;min-width:0}.step h3{font-size:15px;margin-bottom:4px}.step p{color:var(--muted);font-size:13.5px;margin-bottom:12px}
.note{display:flex;gap:10px;padding:13px;border-radius:14px;font-size:13.5px;line-height:1.5;margin-top:8px}
.note.ok{background:rgba(52,211,153,.08);color:#7fdcb8}.note.warn{background:rgba(251,191,36,.08);color:#f3cf6b}.note.bad{background:rgba(251,113,133,.09);color:#f7a1ae}

/* ---------- referral / stats ---------- */
.linkbox{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:13px;background:var(--bg2);border:1px solid var(--line);margin:12px 0}
.linkbox span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#b9c8da;font-size:13.5px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:16px 8px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px}
.stat b{display:block;font-size:24px;font-weight:800}.stat span{color:var(--muted);font-size:12.5px}
.how{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.how:last-child{border:0}
.how .num{width:28px;height:28px;font-size:13px}.how b{font-size:14.5px}.how p{color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- activity / profile ---------- */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.row:last-child{border:0}.row .body{flex:1;min-width:0}.row b{display:block;font-size:14.5px}.row small{color:var(--muted);font-size:12.5px}
.plus{color:var(--green);font-weight:800}.minus{color:var(--red);font-weight:800}
.profile-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--blue2));overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.airdrop{background:linear-gradient(160deg,rgba(124,58,237,.18),rgba(59,140,255,.08));border:1px solid rgba(167,139,250,.25)}

/* ---------- states ---------- */
.skel{border-radius:var(--r);background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:sh 1.3s infinite;margin-bottom:12px}
@keyframes sh{to{background-position:-200% 0}}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ico{width:44px;height:44px;margin-bottom:12px;opacity:.7}.empty b{display:block;color:var(--text);font-size:16px;margin-bottom:6px}
.empty .btn{margin-top:16px;max-width:220px;margin-inline:auto}
.splash{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- nav / toast ---------- */
.bottom-nav{position:fixed;z-index:50;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);display:grid;grid-template-columns:repeat(4,1fr);
    padding:8px 8px calc(8px + var(--safe-b));background:rgba(9,16,29,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border-radius:14px;color:#6d819a;font-size:11.5px;font-weight:600}
.nav-item.on{color:var(--blue)}.nav-item.on .ico{stroke-width:2.2}
.toast{position:fixed;z-index:100;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 16px);transform:translate(-50%,16px);max-width:calc(100% - 32px);
    padding:12px 16px;border-radius:14px;background:#1b2e47;border:1px solid var(--line);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:translate(-50%,0)}.toast.err{background:#47202a}.toast.good{background:#14402f}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:360px){h1{font-size:23px}.hero .big{font-size:38px}}