/* ── Reset ─────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',sans-serif;background:#f0f2f5;color:#1a1a2e;min-height:100vh;padding-bottom:70px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}

/* ── Top Header ────────────────────────── */
.top-bar{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:100;}
.top-bar h2{font-size:1.05rem;flex:1;}
.top-bar .back-btn{font-size:1.3rem;cursor:pointer;background:none;border:none;color:#fff;}
.top-bar .icon-btn{font-size:1.2rem;background:none;border:none;color:#fff;cursor:pointer;}

/* ── Balance Card ──────────────────────── */
.balance-card{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-radius:16px;padding:24px;margin:16px;text-align:center;}
.balance-card .label{font-size:.8rem;opacity:.8;margin-bottom:4px;}
.balance-card .amount{font-size:2rem;font-weight:700;}
.balance-card .sub{font-size:.8rem;opacity:.75;margin-top:6px;}
.balance-row{display:flex;gap:12px;margin:0 16px 16px;}
.balance-mini{flex:1;background:#fff;border-radius:12px;padding:14px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.balance-mini .lbl{font-size:.72rem;color:#888;margin-bottom:4px;}
.balance-mini .val{font-size:1rem;font-weight:700;color:#1a1a2e;}

/* ── Cards ─────────────────────────────── */
.card{background:#fff;border-radius:14px;padding:16px;margin:0 16px 16px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.card-title{font-size:.85rem;color:#888;margin-bottom:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.section{margin:0 16px 16px;}

/* ── Grid Buttons ──────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 16px 16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 16px 16px;}
.grid-btn{background:#fff;border-radius:12px;padding:14px 8px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;transition:.2s;}
.grid-btn:hover{transform:translateY(-2px);}
.grid-btn .icon{font-size:1.6rem;display:block;margin-bottom:6px;}
.grid-btn .text{font-size:.72rem;color:#555;font-weight:600;}

/* ── Forms ─────────────────────────────── */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:.82rem;color:#666;margin-bottom:6px;font-weight:500;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:.95rem;background:#fff;outline:none;transition:.2s;}
.form-group input:focus,.form-group select:focus{border-color:#6366f1;}
.form-group .hint{font-size:.75rem;color:#999;margin-top:4px;}

/* ── Buttons ───────────────────────────── */
.btn{width:100%;padding:13px;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:.2s;}
.btn-primary{background:#6366f1;color:#fff;}
.btn-primary:hover{background:#4f46e5;}
.btn-success{background:#10b981;color:#fff;}
.btn-danger{background:#ef4444;color:#fff;}
.btn-outline{background:transparent;border:2px solid #6366f1;color:#6366f1;}
.btn-sm{padding:8px 16px;width:auto;font-size:.82rem;border-radius:8px;}

/* ── Alerts ────────────────────────────── */
.alert{padding:12px 14px;border-radius:10px;font-size:.85rem;margin:0 16px 12px;}
.alert-success{background:#d1fae5;color:#065f46;}
.alert-error{background:#fee2e2;color:#991b1b;}
.alert-info{background:#dbeafe;color:#1e40af;}

/* ── News Ticker ───────────────────────── */
.ticker{background:#fff3cd;padding:10px 16px;font-size:.82rem;color:#856404;overflow:hidden;white-space:nowrap;}
.ticker span{display:inline-block;animation:scroll 25s linear infinite;}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* ── List Items ────────────────────────── */
.list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f1f5f9;}
.list-item:last-child{border-bottom:none;}
.list-item .li-left .li-title{font-size:.9rem;font-weight:500;}
.list-item .li-left .li-sub{font-size:.75rem;color:#999;margin-top:2px;}
.list-item .li-right{text-align:right;}
.list-item .li-right .li-amount{font-size:.95rem;font-weight:700;}
.list-item .li-right .li-amount.green{color:#10b981;}
.list-item .li-right .li-amount.red{color:#ef4444;}

/* ── Badges ────────────────────────────── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;}
.badge-pending{background:#fef9c3;color:#854d0e;}
.badge-approved,.badge-active{background:#d1fae5;color:#065f46;}
.badge-rejected,.badge-expired{background:#fee2e2;color:#991b1b;}

/* ── VIP Plan Cards ────────────────────── */
.vip-card{background:#fff;border-radius:14px;padding:18px;margin:0 16px 12px;box-shadow:0 2px 8px rgba(0,0,0,.06);border-left:4px solid #6366f1;}
.vip-card h3{font-size:1rem;color:#1a1a2e;margin-bottom:8px;}
.vip-card .vip-row{display:flex;justify-content:space-between;font-size:.83rem;color:#666;margin-bottom:4px;}
.vip-card .vip-row span:last-child{font-weight:600;color:#1a1a2e;}
.vip-card .buy-btn{width:100%;margin-top:12px;}

/* ── Mining ────────────────────────────── */
.mining-box{text-align:center;padding:30px 16px;}
.mining-icon{font-size:5rem;display:block;margin-bottom:16px;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.mining-amount{font-size:2rem;font-weight:700;color:#6366f1;margin-bottom:8px;}
.mining-label{color:#888;font-size:.85rem;margin-bottom:20px;}

/* ── Team Levels ───────────────────────── */
.level-card{background:#fff;border-radius:12px;padding:14px 16px;margin:0 16px 10px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.level-num{width:40px;height:40px;border-radius:50%;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0;}
.level-info{flex:1;}
.level-info .name{font-weight:600;font-size:.9rem;}
.level-info .sub{font-size:.75rem;color:#999;}
.level-info .pct{color:#6366f1;font-weight:700;}

/* ── Profile ───────────────────────────── */
.profile-header{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:24px 16px;text-align:center;color:#fff;}
.avatar{width:72px;height:72px;border-radius:50%;background:#6366f1;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 10px;}
.profile-name{font-size:1.1rem;font-weight:700;}
.profile-id{font-size:.8rem;opacity:.7;margin-top:4px;}
.menu-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border-bottom:1px solid #f1f5f9;cursor:pointer;}
.menu-item .mi-icon{font-size:1.2rem;width:28px;text-align:center;}
.menu-item .mi-text{flex:1;font-size:.9rem;}
.menu-item .mi-arrow{color:#ccc;}

/* ── Invite ────────────────────────────── */
.invite-code-box{background:#f8f7ff;border:2px dashed #6366f1;border-radius:12px;padding:18px;text-align:center;margin:0 16px 16px;}
.invite-code{font-size:1.8rem;font-weight:700;color:#6366f1;letter-spacing:4px;margin-bottom:8px;}

/* ── Auth Pages ────────────────────────── */
.auth-page{min-height:100vh;background:linear-gradient(160deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.auth-logo{text-align:center;color:#fff;margin-bottom:32px;}
.auth-logo h1{font-size:1.8rem;font-weight:700;}
.auth-logo p{opacity:.7;font-size:.85rem;margin-top:4px;}
.auth-card{background:#fff;border-radius:20px;padding:28px 24px;width:100%;max-width:400px;}
.auth-card h2{font-size:1.15rem;margin-bottom:20px;color:#1a1a2e;}
.auth-link{text-align:center;margin-top:20px;font-size:.85rem;color:#666;}
.auth-link a{color:#6366f1;font-weight:600;}

/* ── Bottom Navigation ─────────────────── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;display:flex;height:60px;z-index:200;box-shadow:0 -4px 12px rgba(0,0,0,.08);}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;text-decoration:none;color:#aaa;transition:.2s;}
.nav-item.active{color:#6366f1;}
.nav-item .ni-icon{font-size:1.25rem;}
.nav-item .ni-text{font-size:.6rem;font-weight:600;}

/* ── Misc ───────────────────────────────── */
.text-center{text-align:center;}
.text-muted{color:#999;font-size:.85rem;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.divider{height:1px;background:#f1f5f9;margin:12px 0;}
.empty{text-align:center;padding:40px 16px;color:#bbb;}
.empty .ei{font-size:3rem;margin-bottom:8px;}