:root{
  --bg:#0a0f14;
  --bg-soft:#0d1420;
  --card:#131b26;
  --card-hover:#182233;
  --border:#232e3d;
  --primary:#10b981;
  --primary-dark:#059669;
  --primary-soft:rgba(16,185,129,0.12);
  --accent:#6366f1;
  --accent-soft:rgba(99,102,241,0.14);
  --text:#f1f5f9;
  --text-dim:#8b98a9;
  --danger:#f87171;
  --warn:#fbbf24;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

body{
background:
  radial-gradient(circle at 15% 0%, rgba(16,185,129,0.10), transparent 40%),
  radial-gradient(circle at 85% 15%, rgba(99,102,241,0.10), transparent 40%),
  var(--bg);
color:var(--text);
min-height:100vh;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px;
background:rgba(13,20,32,0.85);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:100;
}

.logo{
font-size:22px;
font-weight:800;
background:linear-gradient(90deg,var(--primary),var(--accent));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:0.2px;
}

.nav a{
color:white;
text-decoration:none;
margin-left:20px;
font-weight:500;
}

header a.login{
background:var(--card);
border:1px solid var(--border);
padding:8px 16px;
border-radius:999px;
font-weight:600;
font-size:13px;
color:var(--text) !important;
text-decoration:none;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
padding:30px 0;
}

.hero{
text-align:center;
padding:40px 20px 24px;
}

.hero h1{
font-size:30px;
font-weight:700;
margin-bottom:8px;
}

.hero p{
font-size:15px;
color:var(--text-dim);
margin-bottom:20px;
}

.start,.btn{
display:inline-block;
padding:14px 32px;
border-radius:14px;
background:linear-gradient(90deg,var(--primary),var(--primary-dark));
color:#04140e;
text-decoration:none;
font-weight:700;
transition:.25s;
box-shadow:0 8px 24px -8px rgba(16,185,129,0.55);
border:none;
cursor:pointer;
}

.start:hover,.btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px -8px rgba(16,185,129,0.7);
}

.btn.back{
background:var(--card);
color:var(--text);
box-shadow:none;
border:1px solid var(--border);
font-weight:600;
}

.btn.back:hover{
border-color:var(--primary);
transform:none;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:14px;
margin-top:24px;
}

.card{
background:var(--card);
border:1px solid var(--border);
border-radius:16px;
padding:20px;
transition:.25s;
}

.card:hover{
transform:translateY(-4px);
border-color:var(--primary);
box-shadow:0 12px 28px -12px rgba(16,185,129,0.35);
}

.card h2{
background:linear-gradient(90deg,var(--primary),var(--accent));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:6px;
font-size:26px;
}

.tasks{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:14px;
padding:0 16px 16px;
max-width:1200px;
margin:0 auto;
}

.task{
background:linear-gradient(180deg, var(--card), var(--bg-soft));
padding:20px;
border-radius:18px;
border:1px solid var(--border);
transition:.2s;
position:relative;
overflow:hidden;
}

.task::before{
content:"";
position:absolute;
top:0; left:0;
width:4px; height:100%;
background:linear-gradient(180deg,var(--primary),var(--accent));
opacity:0.85;
}

.task:hover{
border-color:var(--primary);
transform:translateY(-3px);
box-shadow:0 14px 32px -16px rgba(16,185,129,0.4);
}

.task h3{
font-size:17px;
margin-bottom:6px;
}

.task h1{
font-size:32px;
font-weight:800;
color:var(--primary);
}

.task p{
color:var(--text-dim);
font-size:14px;
line-height:1.5;
}

.task .status{
display:inline-block;
background:var(--accent-soft);
color:var(--accent);
padding:3px 10px;
border-radius:999px;
font-size:12px;
font-weight:600;
margin-top:6px;
}

.reward{
color:var(--primary);
font-weight:700;
margin-top:8px;
font-size:15px;
}

input,textarea,select{
width:100%;
padding:14px;
margin-top:12px;
background:var(--bg-soft);
border:1px solid var(--border);
border-radius:12px;
color:var(--text);
font-size:15px;
}

input:focus,textarea:focus,select:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px var(--primary-soft);
}

button{
padding:14px 24px;
border:none;
border-radius:12px;
background:linear-gradient(90deg,var(--primary),var(--primary-dark));
color:#04140e;
font-size:15px;
font-weight:700;
cursor:pointer;
margin-top:16px;
transition:.2s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px -10px rgba(16,185,129,0.6);
}

button:disabled{
opacity:0.5;
cursor:not-allowed;
transform:none;
box-shadow:none;
}

/* Secondary/destructive buttons inside admin cards */
.reject,.rejectWd,.rejectRef,.deleteTask{
background:linear-gradient(90deg,#f87171,#ef4444);
color:#2b0a0a;
}

.approve,.completeWd,.approveRef,.toggleTask{
background:linear-gradient(90deg,var(--primary),var(--primary-dark));
color:#04140e;
}

footer{
margin-top:50px;
padding:25px;
text-align:center;
color:var(--text-dim);
border-top:1px solid var(--border);
font-size:13px;
}

input::placeholder,textarea::placeholder{
    color:var(--text-dim);
}

a{
color:var(--primary);
text-decoration:none;
font-size:14px;
font-weight:500;
}

a:hover{
text-decoration:underline;
}

hr{
border:none;
border-top:1px solid var(--border);
margin:20px 0;
}

#profilePhoto{
border-radius:50%;
border:3px solid var(--primary);
object-fit:cover;
display:block;
margin:0 auto;
box-shadow:0 8px 24px -8px rgba(16,185,129,0.5);
}

.has-bottom-nav{
padding-bottom:84px;
}

.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
display:flex;
justify-content:space-around;
align-items:center;
background:rgba(13,20,32,0.92);
backdrop-filter:blur(12px);
border-top:1px solid var(--border);
padding:8px 4px max(8px, env(safe-area-inset-bottom));
z-index:200;
}

.bottom-nav a{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
text-decoration:none;
color:var(--text-dim);
font-size:11px;
font-weight:600;
padding:6px 10px;
border-radius:12px;
transition:.2s;
}

.bottom-nav a .nav-icon{
font-size:19px;
}

.bottom-nav a.active{
color:var(--primary);
background:var(--primary-soft);
}

.categoryTab{
flex:0 0 auto;
padding:8px 16px;
border-radius:999px;
border:1px solid var(--border);
background:var(--card);
color:var(--text-dim);
font-size:13px;
font-weight:600;
white-space:nowrap;
cursor:pointer;
transition:.2s;
}

.categoryTab.active{
background:linear-gradient(90deg,var(--primary),var(--primary-dark));
color:#04140e;
border-color:transparent;
}

/* ── Profile page ─────────────────────────────────────── */
.profile-hero{
text-align:center;
padding:36px 20px 8px;
}

.profile-hero #profilePhoto{
width:96px;
height:96px;
}

.profile-hero h2{
margin-top:14px;
font-size:20px;
font-weight:700;
}

.dim{
color:var(--text-dim);
font-size:13px;
}

.stat-card{
text-align:center;
}

.stat-label{
color:var(--text-dim);
font-size:13px;
font-weight:600;
margin-bottom:6px;
}

.stat-card h1{
font-size:26px;
}

.link-card{
display:flex;
align-items:center;
justify-content:space-between;
text-decoration:none;
color:var(--text);
cursor:pointer;
}

.link-card h3{
margin-bottom:4px;
}

.link-card p{
margin:0;
}

.link-card .chevron{
font-size:28px;
color:var(--text-dim);
margin-left:12px;
}

.link-card:hover .chevron{
color:var(--primary);
}

.code-box{
background:var(--bg-soft);
border:1px dashed var(--border);
border-radius:10px;
padding:12px;
margin:10px 0;
font-family:monospace;
font-size:13px;
word-break:break-all;
color:var(--primary);
}

#statsContainer .task h1,
.task h1#walletBalance,
.task h1#totalEarned,
.task h1#totalWithdrawn{
background:linear-gradient(90deg,var(--primary),var(--accent));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}

.install-app-btn{
position:fixed;
bottom:90px;
right:16px;
z-index:199;
padding:12px 18px;
margin:0;
border-radius:999px;
background:linear-gradient(90deg,var(--accent),var(--primary));
color:#fff;
font-size:13px;
font-weight:700;
box-shadow:0 10px 24px -8px rgba(99,102,241,0.6);
border:none;
}

.has-bottom-nav ~ .install-app-btn,
body.has-bottom-nav .install-app-btn{
bottom:90px;
}

body:not(.has-bottom-nav) .install-app-btn{
bottom:20px;
}