:root {
    --bg: #050816;
    --bg2: #090f24;
    --panel: rgba(15, 23, 42, .72);
    --panel-solid: #0f172a;
    --panel-soft: rgba(30, 41, 59, .62);
    --line: rgba(148, 163, 184, .16);
    --text: #edf3ff;
    --muted: #8fa3bf;
    --cyan: #22d3ee;
    --blue: #3b82f6;
    --green: #22c55e;
    --lime: #a3e635;
    --amber: #f59e0b;
    --pink: #ec4899;
    --red: #ef4444;
    --purple: #8b5cf6;
    --shadow: 0 22px 80px rgba(0, 0, 0, .42);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 10%, rgba(34, 211, 238, .16), transparent 28%),
        radial-gradient(circle at 90% 0%, rgba(139, 92, 246, .18), transparent 34%),
        radial-gradient(circle at 70% 80%, rgba(34, 197, 94, .10), transparent 30%),
        linear-gradient(135deg, #030712 0%, #08111f 45%, #050816 100%);
    overflow-x: hidden;
}
body::before {
    content: ""; position: fixed; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 85%); pointer-events: none; z-index: -1;
}
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
.app { display: grid; grid-template-columns: 285px 1fr; min-height: 100vh; gap: 18px; padding: 18px; }
.sidebar { position: sticky; top: 18px; height: calc(100vh - 36px); padding: 18px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.86)), radial-gradient(circle at 50% 0%, rgba(34,211,238,.16), transparent 38%); box-shadow: var(--shadow); backdrop-filter: blur(18px); display: flex; flex-direction: column; overflow: hidden; }
.logo { display: flex; align-items: center; gap: 13px; padding: 8px 8px 18px; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 900; letter-spacing: -.5px; }
.logo-badge { width: 46px; height: 46px; border-radius: 18px; display: grid; place-items: center; color: #001018; font-weight: 1000; background: linear-gradient(135deg, #67e8f9, #a3e635 55%, #facc15); box-shadow: 0 0 24px rgba(34,211,238,.28); }
.logo div div { color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0; }
.balance-box { margin: 18px 0; padding: 16px; border: 1px solid rgba(34,211,238,.2); border-radius: 24px; background: radial-gradient(circle at 20% 0%, rgba(34,211,238,.18), transparent 45%), linear-gradient(135deg, rgba(15,23,42,.96), rgba(8,47,73,.45)); }
.balance-box small { color: var(--muted); font-size: 12px; }
.balance-box strong { display: block; margin-top: 6px; font-size: 27px; letter-spacing: -.7px; }
.progress { height: 9px; margin-top: 14px; background: rgba(148,163,184,.12); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); box-shadow: 0 0 20px rgba(34,211,238,.45); }
.menu-title { color: var(--muted); text-transform: uppercase; letter-spacing: 1.3px; font-size: 11px; font-weight: 900; margin: 4px 10px 10px; }
.menu { display: grid; gap: 7px; overflow-y: auto; padding-right: 4px; }
.menu::-webkit-scrollbar { width: 4px; }
.menu::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius: 99px; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid transparent; border-radius: 18px; color: #b7c7dd; font-size: 14px; font-weight: 700; transition: .18s ease; }
.menu a:hover { transform: translateX(4px); color: white; background: rgba(148,163,184,.08); border-color: var(--line); }
.menu a.active { color: white; background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(139,92,246,.14)); border-color: rgba(34,211,238,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 12px 30px rgba(34,211,238,.06); }
.menu-icon { width: 31px; height: 31px; border-radius: 13px; display: grid; place-items: center; background: rgba(148,163,184,.11); border: 1px solid rgba(148,163,184,.12); }
.sidebar-bottom { margin-top: auto; padding-top: 14px; display: grid; gap: 10px; }
.daily { padding: 13px; border-radius: 19px; color: #fde68a; background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.04)); border: 1px solid rgba(245,158,11,.22); font-size: 13px; font-weight: 800; }
.logout { display: block; text-align: center; padding: 13px; border-radius: 19px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.24); color: #fecaca; font-weight: 800; }
.main { min-width: 0; }
.topbar { height: 76px; margin-bottom: 18px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 28px; background: rgba(15,23,42,.58); backdrop-filter: blur(18px); box-shadow: 0 16px 60px rgba(0,0,0,.22); }
.topbar > div:first-child { font-size: 15px; font-weight: 900; color: #dbeafe; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 999px; background: rgba(2,6,23,.55); border: 1px solid var(--line); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), var(--purple)); color: white; }
.content { padding-bottom: 40px; }
.page-title { margin: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -1.6px; }
.page-subtitle { margin-top: 10px; max-width: 720px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.section { margin-top: 22px; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 18px; font-weight: 950; letter-spacing: -.3px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { position: relative; padding: 20px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(15,23,42,.76), rgba(15,23,42,.48)); box-shadow: 0 18px 55px rgba(0,0,0,.22); backdrop-filter: blur(16px); overflow: hidden; }
.card::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%); pointer-events:none; opacity:.45; }
.card > * { position: relative; z-index: 1; }
.stat-card { min-height: 135px; }
.stat-icon { width: 42px; height: 42px; border-radius: 17px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.08); }
.bg-blue { background: rgba(59,130,246,.16); color:#93c5fd; }
.bg-green { background: rgba(34,197,94,.16); color:#86efac; }
.bg-yellow { background: rgba(245,158,11,.16); color:#fcd34d; }
.bg-purple { background: rgba(139,92,246,.16); color:#c4b5fd; }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.stat-value { margin-top: 6px; font-size: 25px; font-weight: 1000; letter-spacing: -.7px; }
.notice { padding: 19px 22px; border-radius: 24px; border: 1px solid rgba(245,158,11,.24); background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(15,23,42,.5)); color: #fde68a; line-height: 1.8; }
.task-card { min-height: 275px; isolation: isolate; }
.task-card.hot { border-color: rgba(34,211,238,.32); }
.task-card.hot::before { content:""; position:absolute; width:180px; height:180px; right:-70px; top:-80px; background: radial-gradient(circle, rgba(34,211,238,.28), transparent 68%); z-index:0; }
.hot-badge { position:absolute; top:16px; right:16px; padding:6px 10px; border-radius:999px; color:#06111d; background:linear-gradient(135deg,var(--lime),var(--cyan)); font-size:11px; font-weight:1000; letter-spacing:.3px; }
.task-head { display:flex; align-items:center; gap:13px; }
.task-logo { width:48px; height:48px; border-radius:19px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(34,211,238,.9), rgba(139,92,246,.9)); color:white; font-weight:1000; box-shadow:0 0 28px rgba(34,211,238,.16); }
.task-name { font-size:18px; font-weight:1000; }
.task-desc { margin-top:5px; color:var(--muted); font-size:13px; }
.reward-box { margin-top:22px; padding:16px; border:1px solid rgba(34,197,94,.18); border-radius:22px; background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,211,238,.07)); display:flex; align-items:center; justify-content:space-between; }
.reward-money { color:#86efac; font-size:28px; font-weight:1000; letter-spacing:-.8px; }
.task-actions { margin-top:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 16px; border:0; border-radius:16px; cursor:pointer; font-weight:950; transition:.18s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-full { width:100%; }
.btn-light { color:#03101b; background:linear-gradient(135deg,#e0f2fe,#bef264); box-shadow:0 12px 28px rgba(34,211,238,.14); }
.btn-blue { color:white; background:linear-gradient(135deg,#2563eb,#06b6d4); }
.btn-green { color:#031018; background:linear-gradient(135deg,#22c55e,#a3e635); }
.btn-red { color:#fff; background:linear-gradient(135deg,#ef4444,#f97316); }
.input,.select,textarea.input { width:100%; min-height:46px; padding:12px 14px; color:white; background:rgba(2,6,23,.5); border:1px solid var(--line); border-radius:17px; outline:none; }
.input:focus,.select:focus { border-color:rgba(34,211,238,.6); box-shadow:0 0 0 4px rgba(34,211,238,.08); }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:8px; color:#d7e6fb; font-size:13px; font-weight:850; }
.table { width:100%; border-collapse:separate; border-spacing:0 8px; }
.table th { color:var(--muted); text-transform:uppercase; letter-spacing:.7px; font-size:11px; text-align:left; padding:0 12px 8px; }
.table td { background:rgba(2,6,23,.36); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 12px; font-size:14px; }
.table td:first-child { border-left:1px solid var(--line); border-radius:16px 0 0 16px; }
.table td:last-child { border-right:1px solid var(--line); border-radius:0 16px 16px 0; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; }
.badge-green { background:rgba(34,197,94,.14); color:#86efac; }
.badge-blue { background:rgba(59,130,246,.14); color:#93c5fd; }
.badge-yellow { background:rgba(245,158,11,.14); color:#fcd34d; }
.badge-red { background:rgba(239,68,68,.14); color:#fecaca; }
.alert-success,.alert-error { padding:14px 16px; margin-bottom:16px; border-radius:20px; font-weight:800; }
.alert-success { color:#bbf7d0; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28); }
.alert-error { color:#fecaca; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.28); }
.mobile-wallet,.mobile-bottom-nav { display:none; }
.pagination { display:flex; gap:8px; flex-wrap:wrap; padding:0; list-style:none; }
.pagination a,.pagination span { padding:8px 11px; border-radius:12px; background:rgba(2,6,23,.45); border:1px solid var(--line); }
@media (max-width:1180px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:768px){
    body{background:radial-gradient(circle at 10% 0%,rgba(34,211,238,.18),transparent 35%),radial-gradient(circle at 90% 5%,rgba(163,230,53,.12),transparent 30%),linear-gradient(180deg,#020617 0%,#06111f 100%)}
    .app{display:block;padding:10px;min-height:100vh}.sidebar{display:none}.main{width:100%;margin:0;padding-bottom:86px}.topbar{position:sticky;top:10px;z-index:50;height:58px;margin-bottom:12px;padding:0 12px;border-radius:20px;background:rgba(15,23,42,.72);backdrop-filter:blur(20px)}
    .topbar>div:first-child{font-size:14px;max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.user-chip{padding:6px 8px 6px 6px;gap:7px}.user-chip strong{max-width:95px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.avatar{width:30px;height:30px;font-size:13px}
    .mobile-wallet{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:16px;border-radius:24px;background:radial-gradient(circle at 20% 0%,rgba(34,211,238,.24),transparent 45%),linear-gradient(135deg,rgba(15,23,42,.94),rgba(8,47,73,.55));border:1px solid rgba(34,211,238,.22);box-shadow:0 16px 44px rgba(0,0,0,.28)}
    .mobile-wallet span{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:3px}.mobile-wallet strong{display:block;font-size:24px;letter-spacing:-.7px}.mobile-wallet a{padding:10px 13px;border-radius:14px;background:linear-gradient(135deg,var(--lime),var(--cyan));color:#031018;font-weight:950;font-size:13px}
    .content{padding:0}.page-title{font-size:30px;letter-spacing:-1px;line-height:1.08}.page-subtitle{font-size:14px;line-height:1.55;margin-top:8px}.section{margin-top:16px}.section-title{font-size:16px;margin-bottom:10px}.grid,.grid-2,.grid-3,.grid-4{display:grid;grid-template-columns:1fr!important;gap:12px}.card{border-radius:24px;padding:16px;box-shadow:0 14px 38px rgba(0,0,0,.22)}
    .stat-card{min-height:unset;display:grid;grid-template-columns:42px 1fr;align-items:center;column-gap:12px;padding:15px}.stat-icon{margin:0;width:42px;height:42px}.stat-label{font-size:12px}.stat-value{font-size:22px;margin-top:2px}.notice{border-radius:22px;padding:15px;font-size:13px;line-height:1.65}.task-card{min-height:unset;padding:16px;border-radius:25px}.hot-badge{top:14px;right:14px;font-size:10px;padding:5px 8px}.task-head{gap:11px;padding-right:58px}.task-logo{width:44px;height:44px;border-radius:17px;font-size:13px}.task-name{font-size:16px}.task-desc{font-size:12px;line-height:1.4}.reward-box{margin-top:16px;padding:14px;border-radius:20px}.reward-money{font-size:25px}.btn{min-height:48px;border-radius:17px;font-size:14px}.input,.select{min-height:50px;border-radius:18px;font-size:15px}.table{min-width:680px}.card:has(.table){overflow-x:auto}.table th{font-size:10px;white-space:nowrap}.table td{font-size:13px;white-space:nowrap}.alert-success,.alert-error{border-radius:18px;padding:12px 13px;font-size:13px}
    .mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:100;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px;border-radius:26px;background:rgba(15,23,42,.82);border:1px solid rgba(148,163,184,.18);backdrop-filter:blur(22px);box-shadow:0 18px 55px rgba(0,0,0,.5)}
    .mobile-bottom-nav a{min-height:56px;border-radius:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#91a4bd;font-weight:900;transition:.16s ease}.mobile-bottom-nav a span{font-size:19px;line-height:1}.mobile-bottom-nav a small{font-size:10px;line-height:1}.mobile-bottom-nav a.active{color:#031018;background:linear-gradient(135deg,var(--lime),var(--cyan));box-shadow:0 8px 25px rgba(34,211,238,.22)}
}
@media (max-width:390px){.app{padding:8px}.page-title{font-size:27px}.mobile-wallet strong{font-size:22px}.mobile-bottom-nav{left:7px;right:7px;bottom:7px;border-radius:23px}.mobile-bottom-nav a{min-height:52px;border-radius:16px}.mobile-bottom-nav a span{font-size:17px}.mobile-bottom-nav a small{font-size:9px}.card{padding:14px}.task-head{padding-right:50px}}