:root{
  --bg:#0a0906;--panel:#13120e;--panel2:#17150f;--text:#f4f0e5;--muted:#9a9484;
  --gold:#e2bd63;--gold2:#f4d788;--line:rgba(226,189,99,.14);--soft:rgba(255,255,255,.03);
  --green:#86d7a3;--red:#f18b83;--shadow:0 18px 60px rgba(0,0,0,.35);--sidebar-w:250px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
a{color:inherit;text-decoration:none}

.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{background:#0d0c09;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.brand .eye{font-size:26px;color:var(--gold2)}
.brand b{display:block;font-size:14px;letter-spacing:.06em}
.brand small{color:var(--muted);font-size:10px;letter-spacing:.12em}
.nav-label{display:block;color:var(--muted);font-size:10px;letter-spacing:.14em;margin:18px 6px 8px}
.side-link{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;color:var(--muted);
  padding:10px 10px;border-radius:9px;font-size:13.5px;cursor:pointer;margin-bottom:2px}
.side-link:hover{background:var(--soft);color:var(--text)}
.side-link.active{background:linear-gradient(180deg,rgba(226,189,99,.16),rgba(226,189,99,.06));color:var(--gold2);font-weight:700}
.side-link em{margin-left:auto;font-style:normal;background:var(--soft);border-radius:20px;padding:1px 7px;font-size:11px;color:var(--muted)}
.sidebar-foot{margin-top:auto;color:var(--muted);font-size:11px;padding:10px}

/* ---------- Top bar ---------- */
.main{min-width:0}
.topbar2{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;background:rgba(10,9,6,.86);backdrop-filter:blur(14px)}
.crumb{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.crumb b{color:var(--text)}
.topbar-right{display:flex;align-items:center;gap:12px}
.season-pill{font-size:11px;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:20px}
.btn{border:1px solid var(--gold);background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1b1508;border-radius:10px;
  padding:11px 16px;font-weight:800;cursor:pointer;display:inline-block}
.btn.wide{width:100%}
.content{padding:28px 36px;max-width:1680px;margin:0 auto}

/* ---------- Shared panels ---------- */
.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.kicker{display:block;font-size:11px;letter-spacing:.14em;color:var(--gold2);margin-bottom:8px}
.muted{color:var(--muted)}
.gold{color:var(--gold2)!important}
h1{font-size:32px;margin:0 0 8px}
h2{font-size:24px;margin:0 0 6px}
h3{margin:0 0 4px}
.top-gap{margin-top:22px}

/* ---------- Dashboard hero ---------- */
.hero2{padding:26px}
.hero2-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.hero2-row p{max-width:520px}
.hero2-stat{text-align:right}
.hero2-stat b{display:block;font-size:30px;color:var(--gold2)}
.hero2-stat span{font-size:11px;color:var(--muted);letter-spacing:.1em}
.hero2-banner{position:relative;margin-top:22px;border-radius:14px;overflow:hidden;padding:34px;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.hero2-banner::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(90deg,rgba(6,5,3,.96) 0%,rgba(6,5,3,.88) 22%,rgba(6,5,3,.45) 46%,rgba(6,5,3,.05) 62%),linear-gradient(0deg,rgba(6,5,3,.75) 0%,rgba(6,5,3,0) 40%),url('assets/hero-bg.jpg');
  background-size:cover;background-position:78% 32%}
.hero2-banner h2{font-size:30px;line-height:1.25;margin:8px 0;max-width:480px}
.hero2-banner p.muted{max-width:420px}
.hero2-banner em{font-style:normal;color:var(--gold2)}
.hero2-banner .btn{margin-top:14px;width:fit-content}
.hero2-banner-tag{position:absolute;right:24px;bottom:20px;font-size:11px;letter-spacing:.1em;color:var(--muted)}

/* ---------- Countdown ---------- */
.countdown-bar{margin-top:18px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.countdown-bar>div:first-child b{display:block;font-size:15px;margin-top:2px}
.countdown{display:flex;gap:22px}
.countdown div{text-align:center}
.countdown b{display:block;font-size:22px;color:var(--gold2)}
.countdown span{font-size:10px;color:var(--muted);letter-spacing:.1em}
.countdown-date{text-align:right;font-size:12px}
.countdown-date b{display:block;color:var(--gold2)}
.countdown-date small{color:var(--muted)}

/* ---------- Stat grid ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.stat-card{padding:18px}
.stat-card b{display:block;font-size:26px;margin:4px 0}
.stat-card small{color:var(--muted);font-size:11px}

/* ---------- Block heads ---------- */
.block-head{display:flex;justify-content:space-between;align-items:center;margin-top:30px;margin-bottom:12px}
.small-action{background:var(--soft);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:9px 13px;font-size:12.5px;cursor:pointer}
.small-action.done{background:rgba(134,215,163,.14);color:var(--green);border-color:rgba(134,215,163,.3)}

/* ---------- Connect cards ---------- */
.connect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.connect-card{padding:18px;display:flex;flex-direction:column;gap:8px}
.connect-card-top{display:flex;justify-content:space-between;align-items:center}
.connect-card .service{font-size:20px;color:var(--gold2)}
.xp-pill{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:3px 9px;font-size:11px;color:var(--gold2)}
.connect-card small{color:var(--muted)}
.connect-card button{margin-top:8px}

/* ---------- Two col cards ---------- */
.two-col-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.two-card{padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer}
.two-card .service{font-size:20px}
.two-card b{display:block}
.two-card small{color:var(--muted)}
.two-card .arrow{margin-left:auto;color:var(--muted)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;margin-top:12px}
table{width:100%;border-collapse:collapse;min-width:560px}
th{text-align:left;font-size:11px;letter-spacing:.08em;color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--line)}
td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.empty-block{text-align:center;padding:50px 20px!important}
.empty-block .trophy{font-size:26px;display:block;margin-bottom:8px}
.empty-block small{display:block;color:var(--muted);margin-top:4px}
.access-pill{border-radius:20px;padding:3px 10px;font-size:11px;border:1px solid var(--line)}
.access-pill.wl{color:var(--gold2);border-color:rgba(226,189,99,.4)}
.access-pill.fcfs{color:var(--green);border-color:rgba(134,215,163,.35)}
.access-pill.public{color:var(--muted)}

/* ---------- Forms / inputs ---------- */
.input{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text)}
.daily-row{display:flex;gap:10px;margin-top:10px}
.daily-row .input{flex:1}
.daily-requirement{margin:12px 0 0;padding:11px 13px;border:1px solid rgba(226,189,99,.28);border-radius:10px;background:rgba(226,189,99,.07);color:var(--text);font-size:13px}
.daily-requirement strong{color:var(--gold2)}
.block{padding:22px}

/* ---------- Progress / mini stats ---------- */
.progress{height:8px;background:var(--soft);border-radius:20px;overflow:hidden;margin:14px 0}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));width:0%;transition:width .4s}
.mini-stats{display:flex;gap:30px}
.mini-stats div{display:flex;flex-direction:column}
.mini-stats strong{font-size:20px}
.mini-stats span{color:var(--muted);font-size:11px}

/* ---------- NFT grid ---------- */
.nft-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nft{padding:0;overflow:hidden}
.nft-art{aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle,rgba(226,189,99,.18),transparent 70%)}
.nft-rank{font-size:11px;color:var(--gold2);letter-spacing:.08em}
.nft-meta{padding:10px 12px;display:flex;justify-content:space-between;font-size:12.5px}
.nft-meta span{color:var(--muted)}

/* ---------- Tabs ---------- */
.tab{display:none}
.tab.active{display:block}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal.open{display:flex}
.modal-card{position:relative;width:min(420px,100%);padding:26px}
.modal-card .close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer}
.modal-card .input{margin:12px 0}
.modal-card small{display:block;color:var(--muted);font-size:11px;margin-top:12px}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;flex-direction:row;flex-wrap:nowrap;align-items:center;padding:10px 12px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:thin}
  .brand{flex:0 0 auto;margin:0 10px 0 0;padding-right:10px;border-right:1px solid var(--line)}
  .brand .eye{font-size:20px}
  .nav-group{display:flex;flex:0 0 auto;flex-wrap:nowrap;gap:4px}
  .nav-label{display:none}
  .side-link{width:auto;white-space:nowrap;margin:0;padding:8px 10px}
  .sidebar-foot{display:none}
  .stat-grid,.connect-grid,.two-col-cards,.nft-grid{grid-template-columns:1fr 1fr}
  .hero2-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .stat-grid,.connect-grid,.two-col-cards,.nft-grid{grid-template-columns:1fr}
  .content{padding:18px}
  .countdown{gap:12px}
  .daily-row{flex-direction:column}
  .topbar2{padding:0 14px}
  .topbar-right{gap:7px}
  .season-pill{display:none}
  .brand small{display:none}
}