/* Zillchain — design system v2 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy: #101534;
  --navy-soft: #1B2255;
  --violet: #6952E8;
  --violet-soft: #8B7BFF;
  --amber: #FFB238;
  --coral: #FF6B57;
  --mint: #3DDC97;
  --ink: #14162B;
  --slate: #6B7086;
  --slate-light: #9CA0B4;
  --paper: #F7F7FB;
  --line: rgba(20,22,43,0.09);
  --line-on-dark: rgba(255,255,255,0.14);
  --radius: 16px;
  --radius-sm: 10px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.display{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  color: var(--ink);
  margin:0;
}

.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; text-decoration:none; }

/* ===== Split-screen auth shell ===== */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 46% 54%;
}
@media (max-width: 940px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-aside{ display:none; }
}

/* ---- Left brand panel ---- */
.auth-aside{
  position:relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-soft) 55%, #2B2C6B 100%);
  overflow:hidden;
  padding: 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color: white;
}
.auth-aside::before{
  content:'';
  position:absolute;
  top:-20%; right:-25%;
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(105,82,232,0.55) 0%, rgba(105,82,232,0) 70%);
  border-radius:50%;
  animation: float1 14s ease-in-out infinite;
}
.auth-aside::after{
  content:'';
  position:absolute;
  bottom:-15%; left:-15%;
  width:420px; height:420px;
  background: radial-gradient(circle, rgba(255,178,56,0.35) 0%, rgba(255,178,56,0) 70%);
  border-radius:50%;
  animation: float2 18s ease-in-out infinite;
}
@keyframes float1{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(-30px, 40px); }
}
@keyframes float2{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(20px, -30px); }
}

.aside-brand{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:22px;
}
.aside-brand .dot{ width:9px;height:9px;border-radius:50%; background: var(--amber); }

.aside-body{ position:relative; z-index:2; max-width: 420px; }
.aside-body h1{
  font-size:38px;
  line-height:1.12;
  color:white;
  margin-bottom:18px;
}
.aside-body p{
  color: rgba(255,255,255,0.68);
  font-size:16px;
  margin-bottom: 32px;
}

.aside-card{
  position:relative; z-index:2;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  animation: rise .5s ease both;
}
@keyframes rise{ from{ opacity:0; transform: translateY(10px);} to{opacity:1; transform:translateY(0);} }
.aside-card .who{ font-size:13px; color: rgba(255,255,255,0.8); }
.aside-card .task{ font-size:11px; color: rgba(255,255,255,0.45); margin-top:2px; }
.aside-card .amt{ font-family:'IBM Plex Mono', monospace; color: var(--mint); font-weight:600; font-size:14px; }

.aside-foot{
  position:relative; z-index:2;
  display:flex; gap:28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.aside-stat .val{ font-family:'IBM Plex Mono', monospace; font-size:20px; color:white; }
.aside-stat .label{ font-size:12px; color: rgba(255,255,255,0.5); margin-top:2px; }

/* ---- Right form panel ---- */
.auth-main{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 32px;
}
.auth-card{
  width:100%;
  max-width: 440px;
}
.card-brand{
  display:flex; align-items:center; gap:8px;
  font-family:'Manrope', sans-serif; font-weight:800; font-size:19px;
  margin-bottom: 36px;
}
.card-brand .dot{ width:8px;height:8px;border-radius:50%; background: var(--coral); }

.auth-card h1{ font-size:28px; margin-bottom:8px; }
.auth-card .sub{ color: var(--slate); font-size:14.5px; margin-bottom:30px; }

.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:7px;
  color: var(--ink);
}
.field-input-wrap{ position:relative; }
.field input, .field select{
  width:100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family:'Inter', sans-serif;
  font-size:15px;
  background: white;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus{
  outline:none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(105,82,232,0.12);
}
.field .hint{ font-size:12.5px; color: var(--slate-light); margin-top:7px; line-height:1.5; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight:700;
  font-family:'Manrope', sans-serif;
  font-size:15px;
  cursor:pointer;
  border:none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{
  background: linear-gradient(135deg, var(--violet) 0%, #5A3FE0 100%);
  color:white;
  box-shadow: 0 8px 24px -8px rgba(105,82,232,0.6);
  width:100%;
}
.btn-primary:hover{ box-shadow: 0 12px 28px -8px rgba(105,82,232,0.7); }

.auth-footer{
  text-align:center;
  margin-top: 28px;
  font-size:14px;
  color: var(--slate);
}
.auth-footer a{ color: var(--violet); font-weight:700; }
.auth-footer .sep{ margin: 14px 0; color: var(--slate-light); font-size: 13px; }

.alert{
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size:14px;
  margin-bottom: 20px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.alert-error{ background: rgba(255,107,87,0.09); border:1px solid rgba(255,107,87,0.3); color:#B8351A; }
.alert-success{ background: rgba(61,220,151,0.1); border:1px solid rgba(61,220,151,0.35); color:#1E7A45; }
.alert-warning{ background: rgba(255,178,56,0.12); border:1px solid rgba(255,178,56,0.4); color:#8A6416; }

.code-input{
  letter-spacing:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:22px;
  text-align:center;
  font-weight:600;
}

/* ---- Utility card (forgot/reset/verify — no split aside) ---- */
.util-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 15% 15%, rgba(105,82,232,0.08), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(255,178,56,0.08), transparent 45%),
    var(--paper);
}
.util-card{
  width:100%;
  max-width: 440px;
  background:white;
  border:1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 30px 70px -35px rgba(16,21,52,0.25);
}

/* ---- Dashboard (kept simple, matches system) ---- */
.dash-nav{
  background: var(--navy);
  padding: 18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.dash-nav .brand{ color:white; font-family:'Manrope',sans-serif; font-weight:800; font-size:19px; display:flex; align-items:center; gap:8px;}
.dash-nav .brand .dot{ width:8px;height:8px;border-radius:50%; background: var(--amber); }
.dash-nav a.logout{ color: rgba(255,255,255,0.7); font-size:14px; font-weight:600; }
.dash-nav a.logout:hover{ color:white; }

.dash-wrap{ max-width: 1000px; margin: 0 auto; padding: 48px 32px; }
.dash-wrap h1{ font-size:30px; margin-bottom:6px; }
.dash-wrap .ref{ color: var(--slate); margin-bottom:36px; }

.dash-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width:760px){ .dash-grid{ grid-template-columns:1fr; } }
.dash-card{
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:28px;
}
.dash-card .label{ font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color: var(--slate-light); margin-bottom:12px; display:block; }
.dash-card h3{ font-size:26px; }

/* ===== App shell (sidebar layout for logged-in pages) ===== */
.app-shell{ display:grid; grid-template-columns: 240px 1fr; min-height:100vh; }
@media (max-width: 860px){ .app-shell{ grid-template-columns: 1fr; } .app-sidebar{ display:none; } }

.app-sidebar{
  background: var(--navy);
  color: white;
  padding: 28px 20px;
  display:flex; flex-direction:column;
}
.app-sidebar .brand{ display:flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif; font-weight:800; font-size:19px; margin-bottom:36px; padding: 0 8px; }
.app-sidebar .brand .dot{ width:8px;height:8px;border-radius:50%; background: var(--amber); }
.app-sidebar nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.app-sidebar nav a{
  padding: 12px 14px;
  border-radius: 10px;
  color: rgba(255,255,255,0.6);
  font-size:14.5px;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
  transition: background .15s ease, color .15s ease;
}
.app-sidebar nav a:hover{ background: rgba(255,255,255,0.06); color:white; }
.app-sidebar nav a.active{ background: rgba(105,82,232,0.25); color:white; }
.app-sidebar .logout-link{
  padding: 12px 14px;
  color: rgba(255,255,255,0.45);
  font-size:14px;
  font-weight:600;
}
.app-sidebar .logout-link:hover{ color:white; }

.app-main{ padding: 40px; }
@media (max-width: 860px){ .app-main{ padding: 24px 18px; } }
.app-main h1{ font-size:28px; margin-bottom:6px; }
.app-main .page-sub{ color: var(--slate); margin-bottom: 32px; font-size:14.5px; }

/* Mobile top bar (shown only under 860px) */
.mobile-topbar{ display:none; }
@media (max-width:860px){
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    background: var(--navy); color:white; padding:16px 20px;
  }
  .mobile-topbar .brand{ display:flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif; font-weight:800; }
  .mobile-topbar .brand .dot{ width:7px;height:7px;border-radius:50%; background: var(--amber); }
  .mobile-topbar a{ color: rgba(255,255,255,0.7); font-size:13px; font-weight:600; }
}

/* ===== Wallet summary cards ===== */
.wallet-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom: 36px; }
@media (max-width:700px){ .wallet-row{ grid-template-columns:1fr; } }
.wallet-card{
  border-radius: 18px;
  padding: 26px 28px;
  color: white;
  position:relative;
  overflow:hidden;
}
.wallet-card.task{ background: linear-gradient(135deg, #6952E8 0%, #4B36C4 100%); }
.wallet-card.referral{ background: linear-gradient(135deg, #FF6B57 0%, #E8503C 100%); }
.wallet-card .wc-label{ font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.75; margin-bottom:10px; display:block; }
.wallet-card .wc-amount{ font-family:'Manrope', sans-serif; font-weight:800; font-size:30px; margin-bottom:14px; }
.wallet-card .wc-note{ font-size:12.5px; opacity:0.8; }
.wallet-card .wc-btn{
  display:inline-block; margin-top:14px;
  background: rgba(255,255,255,0.18);
  padding: 9px 18px; border-radius: 999px;
  font-size:13px; font-weight:700;
}
.wallet-card .wc-btn:hover{ background: rgba(255,255,255,0.28); }

/* ===== Task cards ===== */
.task-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .task-grid{ grid-template-columns:1fr; } }
.task-card{
  background:white; border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display:flex; flex-direction:column; gap:14px;
}
.task-icon{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  background: rgba(105,82,232,0.1);
}
.task-card h3{ font-size:17px; }
.task-card p{ color:var(--slate); font-size:13.5px; margin:0; flex:1; }
.task-reward{ font-family:'IBM Plex Mono', monospace; color: var(--mint); font-size:13px; font-weight:600; }
.task-status{ font-size:12.5px; font-weight:700; padding: 6px 12px; border-radius:999px; display:inline-block; width:fit-content; }
.task-status.done{ background: rgba(61,220,151,0.12); color:#1E7A45; }
.task-status.available{ background: rgba(105,82,232,0.1); color: var(--violet); }
.task-status.locked{ background: rgba(20,22,43,0.06); color: var(--slate); }

/* ===== Daily check-in ===== */
.checkin-box{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius: 20px;
  padding: 40px;
  text-align:center;
  color:white;
  max-width: 460px;
}
.checkin-box .streak-emoji{ font-size:44px; margin-bottom:12px; }
.checkin-box h2{ color:white; font-size:22px; margin-bottom:8px; }
.checkin-box p{ color: rgba(255,255,255,0.65); font-size:14px; margin-bottom:24px; }
.checkin-box .btn-primary{ width:auto; padding: 14px 36px; }

/* ===== Lucky spin wheel ===== */
.spin-wrap{ display:flex; flex-direction:column; align-items:center; gap:28px; max-width:420px; }
.wheel-outer{
  width:260px; height:260px; border-radius:50%;
  background: conic-gradient(
    var(--violet) 0deg 60deg, var(--coral) 60deg 120deg, var(--amber) 120deg 180deg,
    var(--mint) 180deg 240deg, var(--violet-soft) 240deg 300deg, #4B36C4 300deg 360deg
  );
  position:relative;
  box-shadow: 0 24px 60px -20px rgba(105,82,232,0.5);
  transition: transform 3.5s cubic-bezier(0.15, 0.85, 0.25, 1);
}
.wheel-outer::after{
  content:'';
  position:absolute; inset:14px;
  background: white; border-radius:50%;
}
.wheel-pointer{
  width:0; height:0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid var(--ink);
  margin-bottom: -6px;
  z-index:2;
}
.spin-result{ font-family:'Manrope', sans-serif; font-weight:800; font-size:24px; color: var(--violet); min-height:32px; }

/* ===== Mining ===== */
.mine-wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; max-width: 420px; }
.mine-button{
  width: 200px; height:200px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--violet-soft), var(--violet) 60%, #4B36C4 100%);
  border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:white;
  box-shadow: 0 20px 50px -18px rgba(105,82,232,0.6);
  transition: transform .08s ease;
  font-family:'Manrope',sans-serif;
}
.mine-button:active{ transform: scale(0.94); }
.mine-button:disabled{ background: #C7C9D6; box-shadow:none; cursor:not-allowed; }
.mine-button .mb-title{ font-weight:800; font-size:16px; }
.mine-button .mb-sub{ font-size:12px; opacity:0.75; margin-top:4px; }

.mine-progress{ width:100%; }
.mine-progress-track{ background: var(--line); border-radius:999px; height:10px; overflow:hidden; }
.mine-progress-fill{ background: linear-gradient(90deg, var(--violet), var(--coral)); height:100%; transition: width .2s ease; }
.mine-progress-label{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--slate); margin-top:8px; }

.mine-cooldown{ text-align:center; }
.mine-cooldown .timer{ font-family:'IBM Plex Mono', monospace; font-size:28px; color: var(--coral); }

/* ===== Withdrawal ===== */
.withdraw-tabs{ display:flex; gap:8px; margin-bottom:28px; background: var(--line); padding:5px; border-radius:12px; width:fit-content; }
.withdraw-tab{ padding: 10px 20px; border-radius:9px; font-size:13.5px; font-weight:700; cursor:pointer; color: var(--slate); }
.withdraw-tab.active{ background:white; color: var(--ink); box-shadow: 0 2px 8px rgba(20,22,43,0.08); }

.withdraw-history{ margin-top: 40px; }
.wd-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 0; border-bottom:1px solid var(--line);
  font-size:14px;
}
.wd-status{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:0.03em; }
.wd-status.pending{ background: rgba(255,178,56,0.15); color:#8A6416; }
.wd-status.approved, .wd-status.paid{ background: rgba(61,220,151,0.12); color:#1E7A45; }
.wd-status.rejected{ background: rgba(255,107,87,0.1); color:#B8351A; }

/* ===== Profile ===== */
.profile-card{ background:white; border:1px solid var(--line); border-radius: var(--radius); padding:32px; max-width:560px; }
.avatar-circle{
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, var(--violet), var(--coral));
  color:white; font-family:'Manrope',sans-serif; font-weight:800; font-size:24px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}