:root{
  --primary:#4f46e5; --primary-dark:#4338ca; --success:#16a34a; --danger:#dc2626;
  --warn:#f59e0b; --bg:#f4f5fb; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
  --border:#e7e8f2; --radius:16px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{text-decoration:none;color:inherit;}
.container{max-width:1100px;margin:0 auto;padding:0 16px;}
.main-content{padding:24px 16px 60px;min-height:70vh;}

/* Topbar */
.topbar{background:linear-gradient(135deg,#ffffff,#f5f4ff);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{font-weight:800;font-size:1.3rem;background:linear-gradient(135deg,#4f46e5,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;}
.brand span{background:linear-gradient(135deg,#4f46e5,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.7;}
.nav{display:flex;align-items:center;gap:16px;}
.nav a{color:var(--muted);font-weight:600;font-size:.92rem;transition:.2s;}
.nav a:hover{color:var(--primary);}
.coin-pill{background:linear-gradient(135deg,#fde68a,#fbbf24);color:#78350f;padding:6px 14px;border-radius:20px;font-weight:800;box-shadow:0 2px 6px rgba(251,191,36,.4);}
.hamburger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;}

/* Buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:12px;border:none;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:#fff;font-weight:700;cursor:pointer;transition:.2s;font-size:1rem;
  box-shadow:0 4px 12px rgba(79,70,229,.3);}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(79,70,229,.4);}
.btn:disabled{background:#c7c9d9;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-outline{background:#fff;color:var(--primary);border:2px solid var(--primary);box-shadow:none;}
.btn-block{width:100%;}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 12px rgba(220,38,38,.3);}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 12px rgba(22,163,74,.3);}
.btn-link{color:var(--danger)!important;}
.btn-spin{background:linear-gradient(135deg,#f59e0b,#ec4899);box-shadow:0 4px 12px rgba(236,72,153,.35);}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  box-shadow:0 2px 10px rgba(30,20,80,.05);transition:.2s;}
.grid{display:grid;gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.grid-3,.grid-2{grid-template-columns:1fr;} .hamburger{display:block;}
  .nav{position:absolute;top:64px;right:0;background:#fff;flex-direction:column;width:220px;
    border:1px solid var(--border);border-radius:0 0 0 12px;padding:14px;display:none;gap:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.1);}
  .nav.open{display:flex;}}

.stat-card{text-align:center;color:#fff;border:none;}
.stat-card .num{font-size:2.1rem;font-weight:800;}
.stat-card .label{font-size:.88rem;margin-top:4px;opacity:.9;}
.stat-card:nth-child(1){background:linear-gradient(135deg,#6366f1,#8b5cf6);}
.stat-card:nth-child(2){background:linear-gradient(135deg,#f59e0b,#f97316);}
.stat-card:nth-child(3){background:linear-gradient(135deg,#10b981,#059669);}
.grad-purple{background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;}
.grad-orange{background:linear-gradient(135deg,#f59e0b,#f97316)!important;}
.grad-green{background:linear-gradient(135deg,#10b981,#059669)!important;}

/* Wallet hero */
.wallet-hero{background:linear-gradient(135deg,#4f46e5,#7c3aed,#ec4899);color:#fff;text-align:center;
  border:none;box-shadow:0 8px 24px rgba(124,58,237,.35);}
.wallet-hero .label{opacity:.85;font-weight:600;}
.wallet-hero .amount{font-size:2.6rem;font-weight:800;margin:8px 0 18px;}
.wallet-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* Forms */
.form-group{margin-bottom:16px;}
label{display:block;margin-bottom:6px;font-weight:600;font-size:.9rem;}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:1rem;
  transition:.2s;background:#fbfbff;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);background:#fff;}
input:disabled{background:#f3f4f6;color:var(--muted);}
.auth-box{max-width:420px;margin:30px auto;}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.9rem;}
.alert-error{background:#fef2f2;color:var(--danger);border:1px solid #fecaca;}
.alert-success{background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0;}
.muted{color:var(--muted);}
.text-center{text-align:center;}

/* Task tiles */
.task-tile{display:block;text-align:center;padding:36px 20px;color:#fff!important;border:none;}
.task-tile .icon{font-size:2.8rem;margin-bottom:10px;}
.task-tile h3{margin:6px 0;}
.task-tile p{opacity:.9;}
.task-tile:hover{transform:translateY(-4px);}
a.task-tile:nth-of-type(1),.grid-3 a.task-tile:nth-child(1){background:linear-gradient(135deg,#6366f1,#4338ca);}
.grid-3 a.task-tile:nth-child(2){background:linear-gradient(135deg,#f97316,#ec4899);}
.grid-3 a.task-tile:nth-child(3){background:linear-gradient(135deg,#10b981,#0d9488);}

/* Captcha */
.captcha-box{font-size:1.8rem;font-weight:800;text-align:center;
  background:linear-gradient(135deg,#eef2ff,#f5f3ff);color:var(--primary-dark);padding:26px;
  border-radius:14px;letter-spacing:2px;margin-bottom:18px;}

/* Spin wheel */
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;}
.wheel-outer{position:relative;width:280px;height:280px;}
.wheel{position:relative;width:100%;height:100%;border-radius:50%;border:8px solid #fff;
  box-shadow:0 0 0 4px var(--primary),0 10px 30px rgba(79,70,229,.35);
  transition:transform 4s cubic-bezier(.17,.67,.32,1.02);
  background:conic-gradient(#6366f1 0deg 45deg,#ec4899 45deg 90deg,#f59e0b 90deg 135deg,#10b981 135deg 180deg,
  #6366f1 180deg 225deg,#ec4899 225deg 270deg,#f59e0b 270deg 315deg,#10b981 315deg 360deg);}
.wheel-pointer{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:2rem;z-index:5;}
.seg{position:absolute;top:14%;left:50%;transform-origin:0 130px;color:#fff;font-weight:800;font-size:.95rem;
  text-shadow:0 1px 3px rgba(0,0,0,.35);}
.s1{transform:translateX(-50%) rotate(22deg) translateY(0);}
.s2{transform:translateX(-50%) rotate(67deg);}
.s3{transform:translateX(-50%) rotate(112deg);}
.s4{transform:translateX(-50%) rotate(157deg);}
.s5{transform:translateX(-50%) rotate(202deg);}
.s6{transform:translateX(-50%) rotate(247deg);}
.s7{transform:translateX(-50%) rotate(292deg);}
.s8{transform:translateX(-50%) rotate(337deg);}

/* Scratch card */
.scratch-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;}
.scratch-card{position:relative;width:300px;height:170px;border-radius:14px;overflow:hidden;
  box-shadow:0 8px 24px rgba(16,185,129,.25);}
.scratch-reward{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#10b981,#059669);}
.scratch-cover{position:absolute;inset:0;cursor:pointer;}

/* Modal / Ad popup */
.modal-overlay{position:fixed;inset:0;background:rgba(17,10,40,.65);display:none;align-items:center;
  justify-content:center;z-index:100;padding:16px;}
.modal-overlay.active{display:flex;}
.modal-box{background:#fff;border-radius:20px;max-width:480px;width:100%;padding:26px;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.3);}
.ad-container{min-height:250px;background:linear-gradient(135deg,#f3f4f6,#eef2ff);border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin:16px 0;overflow:hidden;}
.ad-timer{font-weight:700;color:var(--primary);margin-bottom:14px;}

/* Table */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:.9rem;}
th{background:#f7f7fd;font-weight:700;color:var(--muted);}
.badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:700;}
.badge-pending{background:#fef3c7;color:#92400e;}
.badge-approved,.badge-completed,.badge-active{background:#dcfce7;color:#166534;}
.badge-rejected,.badge-blocked,.badge-expired{background:#fee2e2;color:#991b1b;}

.table-responsive{overflow-x:auto;}
.footer{text-align:center;padding:20px 0;color:var(--muted);font-size:.85rem;}