/* ═══ TikTok Platform v5 ═══ */
/* --p (primary) ve --pd set edilir header'da inline style ile */
:root { --v:#6d28d9; --c:#06b6d4; --bl:#3b82f6; --o:var(--p); --r:#ef4444; --g:#22c55e; }

html.light {
    --bg:#f3f1fa;--bg2:#eae7f5;--card:#fff;--card2:#faf9fe;--bdr:#e5e2f0;
    --t1:#1a1a2e;--t2:#555567;--t3:#8e8ea0;
    --inp:#f0edf7;--inp-b:#ddd8ef;
    --nav:#fff;--nav-b:#ebe8f5;
    --shd:0 1px 8px rgba(0,0,0,.04);
}
html.dark {
    --bg:#08080d;--bg2:#0e0e16;--card:#111119;--card2:#17172a;--bdr:#1e1e30;
    --t1:#eeeef5;--t2:#9898ab;--t3:#5a5a6e;
    --inp:#131320;--inp-b:#252538;
    --nav:#0b0b12;--nav-b:#181828;
    --shd:0 1px 8px rgba(0,0,0,.35);
}

/* theme icon toggle */
html.light .t-dark-icon,html.light .t-dark-show{display:inline!important}
html.light .t-light-icon,html.light .t-light-show{display:none!important}
html.dark .t-dark-icon,html.dark .t-dark-show{display:none!important}
html.dark .t-light-icon,html.dark .t-light-show{display:inline!important}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
a{color:var(--p);text-decoration:none}
::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-thumb{background:rgba(139,92,246,.2);border-radius:3px}

/* ─── Topbar ──────── */
.topbar{position:sticky;top:0;z-index:100;background:var(--nav);border-bottom:1px solid var(--bdr);backdrop-filter:blur(12px)}
.topbar-in{max-width:430px;margin:0 auto;padding:.5rem 1rem;display:flex;align-items:center;justify-content:space-between}
.topbar-left{display:flex;align-items:center;gap:.5rem}
.topbar-logo{width:30px;height:30px;border-radius:.45rem;background:var(--p);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem}
.topbar-name{font-weight:700;font-size:.9rem;color:var(--t1)}
.topbar-img{height:28px;width:auto;object-fit:contain}
.topbar-sitename{font-weight:700;font-size:.95rem;color:var(--t1)}
.topbar-theme{width:34px;height:34px;border-radius:50%;background:var(--inp);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:.95rem;cursor:pointer;transition:all .15s}
.topbar-theme:hover{background:var(--card2);color:var(--p)}

/* ─── Toast ──────── */
.toast-box{position:fixed;top:.75rem;left:50%;transform:translateX(-50%);z-index:9999}
.toast-inner{padding:.6rem 1.1rem;border-radius:.6rem;font-size:.86rem;font-weight:500;display:flex;align-items:center;gap:.4rem;animation:ti .25s ease,to .25s ease 3.5s forwards;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.toast-success{background:#059669;color:#fff} .toast-danger{background:#dc2626;color:#fff} .toast-warning{background:#d97706;color:#fff}
@keyframes ti{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes to{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}

/* ─── Card ──────── */
.cd{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1.5rem;box-shadow:var(--shd)}
.glass-card{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1.5rem;box-shadow:var(--shd)}

/* ─── Input ──────── */
.inp{background:var(--inp);border:1px solid var(--inp-b);border-radius:.7rem;padding:.8rem 1rem;color:var(--t1);font-family:'Outfit',sans-serif;font-size:.93rem;width:100%;outline:0;transition:border .15s}
.inp::placeholder{color:var(--t3)} .inp:focus{border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 12%,transparent)}
.inp-g{display:flex;align-items:center;background:var(--inp);border:1px solid var(--inp-b);border-radius:.7rem;overflow:hidden;transition:border .15s}
.inp-g:focus-within{border-color:var(--p)}
.inp-g .pf{padding:0 .85rem;color:var(--t3);font-size:1.05rem;font-weight:500}
.inp-g input{flex:1;background:0;border:0;padding:.8rem .85rem .8rem 0;color:var(--t1);font-family:'Outfit',sans-serif;font-size:.93rem;outline:0}
.inp-g input::placeholder{color:var(--t3)}
/* compat */
.input-dark{background:var(--inp);border:1px solid var(--inp-b);border-radius:.7rem;padding:.8rem 1rem;color:var(--t1);font-family:'Outfit',sans-serif;font-size:.93rem;width:100%;outline:0}
.input-dark::placeholder{color:var(--t3)} .input-dark:focus{border-color:var(--p)}
.input-group-dark{display:flex;align-items:center;background:var(--inp);border:1px solid var(--inp-b);border-radius:.7rem;overflow:hidden}
.input-group-dark .prefix{padding:0 .85rem;color:var(--t3);font-size:1.05rem;font-weight:500}
.input-group-dark input{flex:1;background:0;border:0;padding:.8rem .85rem .8rem 0;color:var(--t1);font-family:'Outfit',sans-serif;font-size:.93rem;outline:0}
.input-group-dark input::placeholder{color:var(--t3)}

/* ─── Buttons ──────── */
.btn-p{background:var(--p);color:#fff;border:0;padding:.82rem 1.4rem;border-radius:.7rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.93rem;cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--p) 25%,transparent);width:100%;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .15s}
.btn-p:hover{filter:brightness(1.1);transform:translateY(-1px)} .btn-p:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-purple{background:var(--p);color:#fff;border:0;padding:.82rem 1.4rem;border-radius:.7rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.93rem;cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--p) 25%,transparent);width:100%;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .15s}
.btn-purple:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-c{background:linear-gradient(135deg,var(--c),var(--bl));color:#fff;border:0;padding:.82rem 1.4rem;border-radius:.7rem;font-family:'Outfit',sans-serif;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(6,182,212,.18);width:100%;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .15s}
.btn-c:hover{filter:brightness(1.08)}
.btn-cyan{background:linear-gradient(135deg,var(--c),var(--bl));color:#fff;border:0;padding:.82rem 1.4rem;border-radius:.7rem;font-family:'Outfit',sans-serif;font-weight:600;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:.45rem}
.btn-gh{background:var(--inp);border:1px solid var(--inp-b);color:var(--t2);padding:.7rem 1.4rem;border-radius:.7rem;font-family:'Outfit',sans-serif;font-weight:500;cursor:pointer;transition:all .15s}
.btn-gh:hover{background:var(--card2);color:var(--t1)}
.btn-ghost{background:var(--inp);border:1px solid var(--inp-b);color:var(--t2);padding:.7rem 1.4rem;border-radius:.7rem;font-family:'Outfit',sans-serif;font-weight:500;cursor:pointer}

/* ─── Login ──────── */
.login-w{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;overflow:hidden;background:var(--bg)}
.login-w::before,.login-w::after{content:'';position:absolute;width:350px;height:350px;border-radius:50%;filter:blur(100px);pointer-events:none}
.login-w::before{top:-180px;right:-180px;background:color-mix(in srgb,var(--p) 10%,transparent)}
.login-w::after{bottom:-180px;left:-180px;background:color-mix(in srgb,var(--p) 8%,transparent)}
.login-c{width:100%;max-width:420px;position:relative;z-index:1}
.login-badge{display:inline-flex;align-items:center;gap:.45rem;background:color-mix(in srgb,var(--p) 8%,transparent);border:1px solid color-mix(in srgb,var(--p) 15%,transparent);padding:.32rem .9rem;border-radius:999px;font-size:.83rem;color:var(--p)}
.login-title{font-size:1.75rem;font-weight:700;color:var(--p)}
/* compat */
.login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--bg)}
.login-card{width:100%;max-width:420px;position:relative;z-index:1}

/* ─── Stats ──────── */
.confirm-avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto;border:2px solid color-mix(in srgb,var(--p) 25%,transparent);background:color-mix(in srgb,var(--p) 6%,transparent)}
.confirm-avatar img{width:100%;height:100%;object-fit:cover}
.stat-row{display:flex;justify-content:center;gap:2rem}
.stat-item{text-align:center} .stat-item .value{font-size:1.1rem;font-weight:700;color:var(--t1)} .stat-item .label{font-size:.68rem;color:var(--t3)}
.credit-badge{display:inline-flex;align-items:center;gap:.3rem;background:color-mix(in srgb,var(--p) 8%,transparent);border:1px solid color-mix(in srgb,var(--p) 15%,transparent);padding:.32rem .7rem;border-radius:999px;font-weight:700;color:var(--p);font-size:.88rem}
.credit-badge .bi-star-fill{color:#facc15;font-size:.82rem}

/* ─── Page header ──────── */
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.ph h2{font-size:1.25rem;font-weight:700;color:var(--t1)}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.page-header h2{font-size:1.25rem;font-weight:700;color:var(--t1)}

/* ─── Task card ──────── */
.task-card{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;overflow:hidden;box-shadow:var(--shd)}
.task-image{aspect-ratio:4/3;background:color-mix(in srgb,var(--p) 4%,var(--bg));display:flex;align-items:center;justify-content:center}
.task-avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;border:2px solid color-mix(in srgb,var(--p) 18%,transparent);background:color-mix(in srgb,var(--p) 6%,transparent);position:relative;z-index:1}
.task-avatar img{width:100%;height:100%;object-fit:cover}
.task-body{padding:1.2rem}
.task-warning{font-size:.68rem;color:var(--t3);text-align:center;line-height:1.5}

/* ─── Package grid ──────── */
.pkg-grid,.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.pkg,.package-card{background:var(--card);border:1px solid var(--bdr);border-radius:.75rem;padding:.9rem;text-align:center;cursor:pointer;transition:all .15s;box-shadow:var(--shd)}
.pkg:hover,.package-card:hover{transform:translateY(-2px);border-color:var(--p)}
.pkg.off,.package-card.disabled{opacity:.4;pointer-events:none}
.pkg .amt,.package-card .amount{font-size:1.25rem;font-weight:700;color:var(--t1)}
.pkg .tp,.package-card .type{font-size:.68rem;color:var(--t3)}
.package-card-star{background:var(--card);border:1px solid var(--bdr);border-radius:.75rem;padding:.9rem;text-align:center;cursor:pointer;transition:all .15s;box-shadow:var(--shd)}
.package-card-star:hover{transform:translateY(-2px);border-color:var(--o)}

/* ─── Profile ──────── */
.prof-sum,.profile-summary{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;box-shadow:var(--shd)}
.prof-av,.profile-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;border:1px solid color-mix(in srgb,var(--p) 15%,transparent);background:color-mix(in srgb,var(--p) 6%,transparent);flex-shrink:0}
.prof-av img,.profile-avatar img{width:100%;height:100%;object-fit:cover}
.info-banner{background:color-mix(in srgb,var(--p) 5%,transparent);border:1px solid color-mix(in srgb,var(--p) 10%,transparent);border-radius:.7rem;padding:.7rem;display:flex;align-items:flex-start;gap:.45rem;margin-bottom:1.2rem;font-size:.83rem;color:var(--p)}

/* ─── Settings ──────── */
.sett,.settings-item,.sett-item{background:var(--card);border:1px solid var(--bdr);border-radius:.7rem;padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem;cursor:pointer;transition:background .15s;text-decoration:none;color:var(--t1);box-shadow:var(--shd)}
.sett:hover,.settings-item:hover,.sett-item:hover{background:var(--card2);color:var(--t1)}
.sett .sl,.settings-item .left,.sett-item .s-left{display:flex;align-items:center;gap:.7rem}
.sett .si,.sett-item .s-icon{color:var(--t3);font-size:1rem;width:18px;text-align:center}
.sett .sa,.sett-item .s-arrow{color:var(--t3)}
.slbl,.section-label{font-size:.83rem;font-weight:500;color:var(--t3);margin-bottom:.65rem;margin-top:1.2rem}

/* ─── Activity ──────── */
.act,.activity-item{background:var(--card);border:1px solid var(--bdr);border-radius:.7rem;padding:.9rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem;cursor:pointer;box-shadow:var(--shd);transition:background .15s}
.act:hover,.activity-item:hover{background:var(--card2)}
.act-l,.activity-left{display:flex;align-items:center;gap:.7rem}
.act-ic,.activity-icon{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--p) 8%,transparent);display:flex;align-items:center;justify-content:center;color:var(--p);font-size:.82rem}

/* ─── Orders ──────── */
.order-detail-card{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;overflow:hidden;box-shadow:var(--shd)}
.order-detail-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr)}
.order-icon{width:38px;height:38px;border-radius:.7rem;background:var(--p);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.order-progress{padding:.7rem 1rem;border-bottom:1px solid var(--bdr)}
.order-followers{padding:.7rem 1rem;border-bottom:1px solid var(--bdr)}
.follower-list{display:flex;flex-direction:column;gap:.45rem}
.follower-item{display:flex;align-items:center;gap:.45rem;padding:.3rem 0}
.follower-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--p) 5%,transparent);border:1px solid color-mix(in srgb,var(--p) 10%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.65rem;color:var(--p)}
.follower-avatar img{width:100%;height:100%;object-fit:cover}
.follower-info{display:flex;flex-direction:column;min-width:0;flex:1;font-size:.78rem}
.order-cost{padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between}
.order-card{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;overflow:hidden;box-shadow:var(--shd)}
.order-card .header{padding:1rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:.45rem;color:var(--o);font-weight:600}
.order-row{padding:1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr)}
.order-row:last-child{border-bottom:0}
.wallet-card{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1rem;display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;box-shadow:var(--shd)}
.wallet-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--pd));display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;flex-shrink:0}
.progress{background:var(--inp)!important}
.empty-state{text-align:center;padding:3rem 1rem}
.empty-icon{width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--p) 6%,transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.8rem;color:var(--p)}

/* ─── Bottom Nav (improved) ──────── */
.bnav{position:fixed;bottom:0;left:0;right:0;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding:.35rem .5rem max(.35rem,env(safe-area-inset-bottom));z-index:1000;background:var(--nav);border-top:1px solid var(--nav-b);backdrop-filter:blur(12px)}
.bnav-inner{display:flex!important;flex-direction:row!important;align-items:flex-end!important;justify-content:space-around!important;width:100%;max-width:430px}
.bnav-i{display:flex;flex-direction:column;align-items:center;padding:.35rem .5rem;color:var(--t3);text-decoration:none;font-size:.58rem;font-weight:500;transition:color .15s;gap:.15rem;min-width:52px}
.bnav-i i{font-size:1.2rem}
.bnav-i.on{color:var(--p)}
.bnav-i.on i{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--p) 40%,transparent))}
.bnav-c{position:relative;top:-.7rem;text-decoration:none}
.bnav-star{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--pd));display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;transition:all .2s;box-shadow:0 4px 16px color-mix(in srgb,var(--p) 30%,transparent)}
.bnav-c.on .bnav-star{box-shadow:0 4px 20px color-mix(in srgb,var(--p) 50%,transparent);transform:scale(1.08)}
.bnav-c:not(.on) .bnav-star{background:var(--card);color:var(--t3);box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid var(--bdr)}

.uc,.user-content{max-width:430px;margin:0 auto;padding:1rem 1rem 5.5rem}
.modal-content{background:var(--card)!important;border:1px solid var(--bdr)!important;border-radius:1rem!important;color:var(--t1)!important}

/* ═══ ADMIN ═══ */
.adm-wrap{display:flex;min-height:100vh}
.adm-side{width:240px;background:var(--card);border-right:1px solid var(--bdr);padding:.9rem;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.adm-brand{display:flex;align-items:center;gap:.45rem;padding:.4rem;margin-bottom:1.1rem;font-size:1.05rem;font-weight:700;color:var(--t1)}
.adm-brand-icon{width:30px;height:30px;border-radius:.45rem;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff}
.adm-user{display:flex;align-items:center;gap:.45rem;padding:.55rem;border-radius:.65rem;background:color-mix(in srgb,var(--p) 5%,transparent);margin-bottom:.9rem}
.adm-user-av{width:30px;height:30px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.adm-user-name{font-size:.82rem;font-weight:600;color:var(--t1)} .adm-user-role{font-size:.62rem;color:var(--t3)}
.adm-nav{flex:1;display:flex;flex-direction:column;gap:.15rem}
.adm-link{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:.6rem;font-size:.85rem;font-weight:500;color:var(--t2);text-decoration:none;transition:all .12s;background:0;border:0;cursor:pointer;width:100%;text-align:left}
.adm-link:hover{color:var(--t1);background:var(--card2)} .adm-link.on{background:color-mix(in srgb,var(--p) 8%,transparent);color:var(--p)}
.adm-link-red{color:var(--r)!important} .adm-link-red:hover{background:rgba(239,68,68,.05)!important}
.adm-bottom{padding-top:.4rem;border-top:1px solid var(--bdr);margin-top:.4rem;display:flex;flex-direction:column;gap:.15rem}
.adm-main{flex:1;padding:1.4rem;overflow-y:auto;background:var(--bg)}
.stat-card{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1.15rem;box-shadow:var(--shd)}
.stat-card-icon{width:38px;height:38px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;margin-bottom:.65rem;font-size:1rem;color:#fff}
.stat-card .number{font-size:1.65rem;font-weight:700;color:var(--t1)} .stat-card .label{font-size:.82rem;color:var(--t3)}
.admin-item{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1rem;display:flex;align-items:center;gap:1rem;margin-bottom:.65rem;box-shadow:var(--shd)}
.admin-item.inactive{opacity:.5}
.admin-item .avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;border:1px solid color-mix(in srgb,var(--p) 12%,transparent);background:color-mix(in srgb,var(--p) 5%,transparent);flex-shrink:0}
.admin-item .avatar img{width:100%;height:100%;object-fit:cover}
.admin-item .info{flex:1;min-width:0} .admin-item .info .name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)} .admin-item .info .meta{font-size:.73rem;color:var(--t3)}
.admin-item .actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.admin-order{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1.15rem;margin-bottom:.65rem;box-shadow:var(--shd)}
.admin-order .detail-row{background:var(--inp);border-radius:.65rem;padding:.65rem;margin:.65rem 0}
.admin-package{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;padding:1.15rem;box-shadow:var(--shd)} .admin-package.inactive{opacity:.5}

@media(max-width:480px){.pkg-grid,.package-grid{gap:.45rem}.pkg,.package-card,.package-card-star{padding:.7rem}.bnav-i{font-size:.52rem;padding:.15rem .25rem}}
@media(max-width:768px){.adm-side{position:fixed;left:-250px;z-index:1001;transition:left .25s;height:100vh}.adm-side.open{left:0}.adm-main{width:100%}}

/* ═══ EARN CARD — Yeni Tasarım ═══ */
.earn-card{background:var(--card);border:1px solid var(--bdr);border-radius:1rem;overflow:hidden;box-shadow:var(--shd)}
.earn-profile-area{width:100%;height:90px;background:linear-gradient(135deg,var(--p),var(--pd));position:relative}
.earn-avatar-wrap{width:72px;height:72px;border-radius:50%;border:3px solid var(--card);overflow:hidden;position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);background:var(--card);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.earn-avatar-wrap img{width:100%;height:100%;object-fit:cover}
.earn-avatar-wrap .avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--p) 10%,transparent)}
.earn-body{padding:2.8rem 1.2rem 1.2rem;text-align:center}
.earn-stats{display:flex;justify-content:center;gap:2.5rem;margin-bottom:1rem}
.earn-stat{text-align:center}
.earn-stat-val{display:block;font-size:1.1rem;font-weight:700;color:var(--t1)}
.earn-stat-lbl{display:block;font-size:.68rem;color:var(--t3)}
.earn-follow-btn{background:linear-gradient(135deg,var(--c),var(--bl));color:#fff;border:0;padding:.9rem 1.4rem;border-radius:.75rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:0 4px 14px rgba(6,182,212,.18);width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .15s;margin-bottom:.6rem}
.earn-follow-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.earn-verify-btn{background:var(--p);box-shadow:0 4px 14px color-mix(in srgb,var(--p) 25%,transparent)}
.earn-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.earn-action-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.85rem .8rem;border-radius:.7rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.88rem;cursor:pointer;border:0;text-decoration:none;transition:all .15s}
.earn-skip-btn{background:var(--inp);border:1px solid var(--inp-b);color:var(--t2)}
.earn-skip-btn:hover{background:var(--card2);color:var(--t1)}
.earn-video-btn{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;box-shadow:0 3px 12px color-mix(in srgb,var(--p) 20%,transparent)}
.earn-video-btn:hover{filter:brightness(1.1);transform:translateY(-1px);color:#fff}
.earn-reward{font-size:.78rem;opacity:.9}
.earn-warning{font-size:.68rem;color:var(--t3);text-align:center;line-height:1.5;margin:0}

/* ═══ MARKET TABS & PRODUCTS ═══ */
.market-tab{background:var(--inp);border:1px solid var(--inp-b);color:var(--t2);padding:.5rem .9rem;border-radius:.6rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.78rem;cursor:pointer;white-space:nowrap;transition:all .15s}
.market-tab:hover{background:var(--card2);color:var(--t1)}
.market-tab.active{background:var(--p);color:#fff;border-color:var(--p)}
.mkt-panel{display:none}.mkt-panel.active{display:block}
.product-card{background:var(--card);border:1px solid var(--bdr);border-radius:.85rem;overflow:hidden;cursor:pointer;transition:all .15s;box-shadow:var(--shd)}
.product-card:hover{transform:translateY(-2px);border-color:var(--p)}
.product-card.sold-out{opacity:.5;pointer-events:none}
.product-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:color-mix(in srgb,var(--p) 3%,var(--bg))}
.product-img img{width:100%;height:100%;object-fit:cover}
.product-img-empty{display:flex;align-items:center;justify-content:center}
.product-img-star{background:var(--p) !important}
.product-info{padding:.7rem}
.product-name{font-weight:600;font-size:.82rem;color:var(--t1);margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-desc{font-size:.65rem;color:var(--t3);margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-price{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.price-stars{display:inline-flex;align-items:center;gap:.2rem;font-weight:700;font-size:.82rem;color:var(--p)}
.price-stars .bi-star-fill{color:#facc15;font-size:.7rem}
.price-money{font-weight:600;font-size:.78rem;color:var(--t2)}
.product-stock-out{font-size:.65rem;font-weight:600;color:var(--r);margin-top:.2rem}