:root {
  --bg: #f0f2ff;
  --primary: #6c3bff;
  --primary2: #8b5cf6;
  --accent: #00c896;
  --accent2: #00a878;
  --dark: #1a1240;
  --card: #ffffff;
  --text: #2d2d4e;
  --muted: #8888aa;
  --danger: #ff4757;
  --warn: #ffa502;
  --radius: 18px;
  --shadow: 0 4px 20px rgba(108,59,255,.12);
}
* { box-sizing:border-box; margin:0; padding:0; font-family:'Segoe UI',system-ui,sans-serif; }
body { background:var(--bg); color:var(--text); min-height:100vh; max-width:480px; margin:0 auto; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }
.topbar { background:linear-gradient(135deg,var(--primary),var(--primary2)); padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.topbar .logo { display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:1.1rem; }
.topbar .logo img { width:32px; border-radius:8px; }
.topbar .icons { display:flex; gap:14px; color:#fff; font-size:1.2rem; }
.topbar .icons a { color:#fff; position:relative; }
.badge { background:var(--danger); color:#fff; border-radius:50%; font-size:.65rem;
  width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  position:absolute; top:-6px; right:-6px; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; background:#fff; border-top:1px solid #e8e0ff;
  display:flex; justify-content:space-around; padding:10px 0 16px; z-index:100; }
.bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:.65rem; font-weight:500; }
.bottom-nav a.active { color:var(--primary); }
.page-content { padding:16px 16px 80px; }
.card { background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:14px; }
.balance-card { background:linear-gradient(135deg,var(--primary),var(--primary2));
  border-radius:var(--radius); padding:20px; color:#fff; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); }
.balance-card .label { font-size:.8rem; opacity:.8; }
.balance-card .amount { font-size:1.8rem; font-weight:700; }
.balance-card .plus-btn { background:rgba(255,255,255,.2); border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.quick-actions a { display:flex; flex-direction:column; align-items:center; gap:6px;
  background:#fff; border-radius:14px; padding:12px 6px; box-shadow:var(--shadow);
  font-size:.7rem; color:var(--text); font-weight:500; }
.qa-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.qa-icon.purple { background:#ede9ff; color:var(--primary); }
.qa-icon.green { background:#e0fff5; color:var(--accent); }
.qa-icon.blue { background:#e0f0ff; color:#0088cc; }
.qa-icon.orange { background:#fff3e0; color:#ff8800; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.stat-box { background:#fff; border-radius:12px; padding:10px 8px; text-align:center; box-shadow:var(--shadow); }
.stat-box .val { font-weight:700; font-size:.95rem; color:var(--primary); }
.stat-box .lbl { font-size:.6rem; color:var(--muted); margin-top:2px; }
.banner-slider { border-radius:var(--radius); overflow:hidden; margin-bottom:14px; position:relative; }
.banner-slider img { width:100%; height:160px; object-fit:cover; }
.slider-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; }
.dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); }
.dot.active { background:#fff; }
.btn { display:block; width:100%; padding:14px; border-radius:12px; border:none;
  font-size:1rem; font-weight:600; cursor:pointer; text-align:center; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff; }
.btn-accent { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-sm { padding:8px 16px; width:auto; font-size:.85rem; border-radius:10px; display:inline-block; }
.btn-danger { background:var(--danger); color:#fff; }
.plan-card { background:#fff; border-radius:var(--radius); padding:16px; margin-bottom:12px;
  box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; }
.plan-img { width:80px; height:70px; border-radius:12px; object-fit:cover; }
.plan-info { flex:1; }
.plan-name { font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:6px; }
.plan-badge { background:var(--danger); color:#fff; font-size:.6rem; padding:2px 7px; border-radius:20px; }
.plan-stats { display:flex; gap:14px; margin:6px 0; }
.plan-stat { font-size:.72rem; color:var(--muted); }
.plan-stat strong { display:block; color:var(--primary); font-size:.85rem; }
.video-card { background:#fff; border-radius:var(--radius); overflow:hidden; margin-bottom:12px; box-shadow:var(--shadow); }
.video-thumb { position:relative; }
.video-thumb img { width:100%; height:200px; object-fit:cover; }
.play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.9); border-radius:50%; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--primary); }
.video-info { padding:14px; }
.earn-badge { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  padding:6px 14px; border-radius:20px; font-size:.8rem; font-weight:600; display:inline-block; margin-top:8px; }
.tx-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0eeff; }
.tx-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.tx-icon.earn { background:#e0fff5; color:var(--accent); }
.tx-icon.dep { background:#e8e0ff; color:var(--primary); }
.tx-icon.wit { background:#ffe8e8; color:var(--danger); }
.tx-info { flex:1; }
.tx-info .title { font-weight:600; font-size:.85rem; }
.tx-info .date { font-size:.72rem; color:var(--muted); }
.tx-amount { font-weight:700; font-size:.9rem; }
.tx-amount.plus { color:var(--accent); }
.tx-amount.minus { color:var(--danger); }
.team-tree { text-align:center; padding:10px; }
.tree-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent));
  margin:0 auto 4px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; overflow:hidden; }
.tree-avatar img { width:100%; height:100%; object-fit:cover; }
.tree-row { display:flex; justify-content:center; gap:20px; margin-top:16px; }
.level-tabs { display:flex; gap:0; border:2px solid var(--primary); border-radius:12px; overflow:hidden; margin:12px 0; }
.level-tab { flex:1; padding:8px; text-align:center; font-size:.8rem; font-weight:600;
  background:transparent; color:var(--primary); cursor:pointer; border:none; }
.level-tab.active { background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff; }
.member-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f0eeff; }
.member-avatar { width:42px; height:42px; border-radius:50%; background:var(--bg); overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary); }
.member-info { flex:1; }
.member-info .name { font-weight:600; font-size:.85rem; }
.member-info .meta { font-size:.7rem; color:var(--muted); }
.member-earn { font-weight:700; font-size:.85rem; color:var(--accent); }
.level-tag { background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff; font-size:.6rem; padding:2px 7px; border-radius:20px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--dark); }
.form-control { width:100%; padding:13px 16px; border:2px solid #e8e0ff; border-radius:12px;
  font-size:.95rem; outline:none; transition:border .2s; background:#fff; }
.form-control:focus { border-color:var(--primary); }
select.form-control { appearance:none; }
.auth-wrap { min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:24px 20px; background:linear-gradient(160deg,var(--primary) 0%,var(--primary2) 40%,var(--bg) 70%); }
.auth-card { background:#fff; border-radius:24px; padding:28px 22px; box-shadow:0 8px 40px rgba(108,59,255,.2); }
.auth-logo { text-align:center; color:#fff; margin-bottom:24px; }
.auth-logo .app-name { font-size:1.8rem; font-weight:800; }
.auth-logo .tagline { font-size:.82rem; opacity:.85; }
.alert { padding:12px 16px; border-radius:10px; margin-bottom:12px; font-size:.85rem; }
.alert-success { background:#e0fff5; color:#00a878; border:1px solid #b0ffe8; }
.alert-error { background:#ffe8e8; color:var(--danger); border:1px solid #ffc8c8; }
.alert-info { background:#e8e0ff; color:var(--primary); border:1px solid #d0c0ff; }
.section-title { font-weight:700; font-size:1rem; color:var(--dark); margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:center; }
.section-title a { font-size:.78rem; color:var(--primary); }
.profile-header { text-align:center; padding:20px 0 10px; }
.profile-avatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent));
  margin:0 auto 10px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.status-badge { display:inline-block; padding:3px 12px; border-radius:20px; font-size:.72rem; font-weight:600; margin-top:4px; }
.status-badge.active { background:#e0fff5; color:var(--accent); }
.status-badge.suspended { background:#ffe8e8; color:var(--danger); }
.info-row { display:flex; justify-content:space-between; align-items:center;
  padding:13px 0; border-bottom:1px solid #f0eeff; font-size:.88rem; }
.info-row .lbl { color:var(--muted); }
.info-row .val { font-weight:600; }
.info-row .val.green { color:var(--accent); }
.wd-toggle { display:flex; border:2px solid var(--primary); border-radius:14px; overflow:hidden; margin-bottom:14px; }
.wd-tab { flex:1; padding:12px; text-align:center; font-weight:600; font-size:.9rem;
  background:transparent; color:var(--primary); cursor:pointer; border:none; }
.wd-tab.active { background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff; }
.pm-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.pm-item { background:#fff; border-radius:14px; padding:12px 6px; text-align:center;
  box-shadow:var(--shadow); font-size:.68rem; border:2px solid transparent; cursor:pointer; }
.pm-item.selected { border-color:var(--primary); }
.pm-item .pm-icon { font-size:1.4rem; margin-bottom:4px; }
.withdraw-time-box { background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:12px; padding:12px 16px; color:#fff; margin-bottom:14px; font-size:.85rem; }
.referral-box { background:linear-gradient(135deg,var(--primary),var(--primary2));
  border-radius:var(--radius); padding:16px; color:#fff; margin-bottom:14px; }
.ref-link-box { background:rgba(255,255,255,.15); border-radius:10px; padding:10px 14px;
  display:flex; justify-content:space-between; align-items:center; margin:10px 0;
  font-size:.8rem; word-break:break-all; }
.page-header { background:linear-gradient(135deg,var(--primary),var(--primary2));
  padding:16px 18px; color:#fff; display:flex; align-items:center; gap:12px; }
.page-header .back { font-size:1.3rem; }
.page-header h1 { font-size:1.1rem; font-weight:700; }
.chip-tabs { display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; padding-bottom:4px; }
.chip { padding:7px 16px; border-radius:20px; font-size:.8rem; font-weight:600;
  white-space:nowrap; cursor:pointer; border:none; }
.chip.active { background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff; }
.chip:not(.active) { background:#fff; color:var(--muted); border:1px solid #e8e0ff; }
.video-player-wrap { border-radius:var(--radius); overflow:hidden; background:#000; margin-bottom:14px; }
.video-player-wrap video { width:100%; max-height:240px; display:block; }
.watch-earn-card { background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:var(--radius); padding:20px; color:#fff; text-align:center; margin-bottom:14px; }
.watch-earn-card .earn-amt { font-size:2rem; font-weight:800; }
.tabs { display:flex; gap:0; border-bottom:2px solid #e8e0ff; margin-bottom:14px; }
.tab { flex:1; padding:10px; text-align:center; font-size:.82rem; font-weight:600;
  color:var(--muted); cursor:pointer; border:none; background:none; border-bottom:3px solid transparent; }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); }
/* Admin */
.admin-wrap { display:flex; min-height:100vh; max-width:100%; }
.admin-sidebar { background:var(--dark); color:#fff; width:220px; min-height:100vh; position:fixed; top:0; left:0; padding:0; z-index:200; overflow-y:auto; }
.admin-sidebar .a-logo { padding:20px; font-size:1.1rem; font-weight:800; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-sidebar nav a { display:flex; align-items:center; gap:10px; padding:12px 20px; color:rgba(255,255,255,.7); font-size:.85rem; }
.admin-sidebar nav a:hover,.admin-sidebar nav a.active { background:var(--primary); color:#fff; }
.admin-main { margin-left:220px; padding:24px; flex:1; }
.admin-topbar { background:#fff; padding:14px 24px; margin:-24px -24px 24px; box-shadow:0 2px 10px rgba(0,0,0,.05); display:flex; justify-content:space-between; align-items:center; }
.admin-card { background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow); margin-bottom:18px; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.admin-stat { background:#fff; border-radius:14px; padding:18px; box-shadow:var(--shadow); border-left:4px solid var(--primary); }
.admin-stat .val { font-size:1.5rem; font-weight:800; color:var(--primary); }
.admin-stat .lbl { font-size:.78rem; color:var(--muted); margin-top:4px; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
table th { background:#f8f6ff; padding:10px 12px; text-align:left; font-weight:600; color:var(--muted); }
table td { padding:10px 12px; border-bottom:1px solid #f0eeff; }
table tr:hover td { background:#fafaff; }
.badge-s { padding:3px 10px; border-radius:20px; font-size:.7rem; font-weight:600; display:inline-block; }
.badge-s.active,.badge-s.approved { background:#e0fff5; color:var(--accent); }
.badge-s.suspended,.badge-s.rejected { background:#ffe8e8; color:var(--danger); }
.badge-s.pending { background:#fff3e0; color:var(--warn); }
@media(max-width:768px){.admin-sidebar{display:none}.admin-main{margin-left:0}.admin-stat-grid{grid-template-columns:repeat(2,1fr)}}