/* ===========================================================
   1VELA — Design System
   Mobile-first frontend. Font: Manrope (single family, weight
   range carries the hierarchy). Palette drawn from the brand
   mark: deep vela-green with a warm gold reserved for money
   the user has *earned* (challenge prizes, premium badge).
   =========================================================== */

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

:root{
  /* -- brand -- */
  --vela-900:#003D35;
  --vela-800:#00564B;
  --vela-700:#00695C;   /* primary, sampled from logo mark */
  --vela-600:#00806F;
  --vela-500:#149685;
  --vela-400:#3FB09E;
  --vela-100:#E3F3EF;
  --vela-50:#F3FAF8;

  /* -- gold: reserved for money earned / prizes, never chrome -- */
  --gold-600:#B8860B;
  --gold-500:#D4A017;
  --gold-100:#FBF1D9;

  /* -- neutrals -- */
  --ink-900:#0E1B18;
  --ink-700:#33443F;
  --ink-500:#5B6D68;
  --ink-300:#9BACA7;
  --line:#E1EAE7;
  --line-soft:#EDF3F1;
  --bg:#F6FAF9;
  --surface:#FFFFFF;

  /* -- status -- */
  --ok:#1B8A5A;
  --ok-bg:#E7F6EE;
  --warn:#B4700A;
  --warn-bg:#FDF1DF;
  --err:#C23B3B;
  --err-bg:#FBEAEA;

  /* -- shape / motion -- */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --shadow-1:0 1px 2px rgba(14,27,24,.06);
  --shadow-2:0 8px 24px rgba(0,61,53,.10);
  --ease:cubic-bezier(.4,0,.2,1);

  --tap:48px; /* minimum comfortable tap target */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2.5px solid var(--vela-500);
  outline-offset:2px;
}

/* ===================== APP SHELL ===================== */
.app{
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  background:var(--bg);
  position:relative;
  display:flex;
  flex-direction:column;
}

/* top bar used on dashboard-type screens */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  background:var(--vela-700);
  color:#fff;
}
.topbar .brand{display:flex;align-items:center;gap:10px}
.topbar .brand img{height:22px;width:auto;filter:brightness(0) invert(1)}
.topbar-greeting{display:flex;flex-direction:column;gap:2px}
.topbar-greeting small{opacity:.78;font-size:12.5px;font-weight:500}
.topbar-greeting strong{font-size:15px;font-weight:700}
.icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  border:none;color:#fff;position:relative;cursor:pointer;
}
.icon-btn .dot{
  position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--gold-500);border:1.5px solid var(--vela-700);
}

/* plain header for auth-style screens (register/login/payment/terms) */
.authbar{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px 6px;
}
.authbar .back{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--ink-700);
  cursor:pointer;flex:none;
}
.authbar .logo-wrap{display:flex;align-items:center;gap:8px}
.authbar img{height:30px;width:auto}

.content{
  flex:1;
  padding:20px 20px 100px;
}
.content.no-tabbar{padding-bottom:32px}
.content.narrow{padding-top:8px}

/* ===================== TYPE ===================== */
.page-title{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink-900)}
.page-sub{font-size:14px;color:var(--ink-500);margin-top:6px;line-height:1.5}
.section-label{font-size:13px;font-weight:700;color:var(--ink-700);margin:0 0 10px 2px}
.eyebrow{font-size:12.5px;font-weight:600;color:var(--vela-600)}

/* ===================== FORMS ===================== */
.field{margin-bottom:16px}
.field label{
  display:block;font-size:13px;font-weight:600;color:var(--ink-700);
  margin-bottom:7px;
}
.input-wrap{position:relative}
.input,
select.input{
  width:100%;
  height:var(--tap);
  padding:0 16px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  font-size:15px;
  font-family:inherit;
  color:var(--ink-900);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
  appearance:none;
  -webkit-appearance:none;
}
.input::placeholder{color:var(--ink-300)}
.input:focus{
  border-color:var(--vela-600);
  box-shadow:0 0 0 4px var(--vela-100);
  outline:none;
}
.input-wrap.has-icon .input{padding-right:48px}
.input-wrap .icon-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:none;background:transparent;
  display:grid;place-items:center;color:var(--ink-500);cursor:pointer;
}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6D68' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:42px;
}
.hint{font-size:12.5px;color:var(--ink-500);margin-top:6px}

.step-list{ display:flex; flex-direction:column; gap:12px }
.step-row.highlight{ background:var(--gold-50,#FFF8E1); border-radius:10px; padding:8px 10px; margin:0 -10px }
.step-row.highlight .num{ background:#FBC834; color:#5C4400 }
.copy-btn{
  margin-left:8px; border:1px solid var(--line); background:var(--surface); color:var(--vela-700);
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:8px; cursor:pointer; vertical-align:middle;
}
.copy-btn:hover{ background:var(--vela-50) }

.network-list{ display:flex; flex-direction:column; gap:10px }
.network-card{ border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:var(--surface) }
.network-card.open{ border-color:var(--vela-200) }
.network-head{
  width:100%; display:flex; align-items:center; gap:12px; padding:13px 14px;
  background:none; border:none; cursor:pointer; text-align:left; font-family:inherit;
}
.network-logo{
  flex:none; width:44px; height:44px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px; border:1px solid var(--line-soft); overflow:hidden;
}
.network-logo img{ width:100%; height:100%; object-fit:contain; padding:5px }
.network-meta{ flex:1; display:flex; flex-direction:column }
.network-meta strong{ font-size:14px; color:var(--ink-900) }
.network-meta small{ font-size:12px; color:var(--ink-500); margin-top:1px }
.network-chevron{ flex:none; color:var(--ink-300); transition:transform .2s }
.network-card.open .network-chevron{ transform:rotate(180deg); color:var(--vela-600) }
.network-body{ padding:0 16px 16px; border-top:1px solid var(--line-soft) }
.network-body .step-list{ margin-top:14px }
.step-row{ display:flex; align-items:flex-start; gap:10px }
.step-row .num{
  flex:none; width:22px; height:22px; border-radius:50%; background:var(--vela-100); color:var(--vela-800);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-top:1px;
}
.step-row p{ font-size:13.5px; line-height:1.5; color:var(--ink-700) }
.hint.err{color:var(--err)}

.checkline{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;color:var(--ink-700);line-height:1.5;
  margin:6px 0 22px;
}
.checkline input{
  width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--vela-700);
}
.checkline a{color:var(--vela-700);font-weight:700}

/* ===================== BUTTONS ===================== */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:var(--tap);
  border-radius:var(--r-md);
  border:none;font-size:15.5px;font-weight:700;
  cursor:pointer;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), opacity .12s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:linear-gradient(135deg,var(--vela-600),var(--vela-800));
  color:#fff;box-shadow:0 6px 16px rgba(0,105,92,.28);
}
.btn-primary:hover{background:linear-gradient(135deg,var(--vela-500),var(--vela-700))}
.btn-secondary{background:var(--vela-100);color:var(--vela-800)}
.btn-outline{background:transparent;border:1.5px solid var(--line);color:var(--ink-700)}
.btn-ghost{background:transparent;color:var(--vela-700)}
.btn-danger{background:var(--err-bg);color:var(--err)}
.btn-sm{height:38px;font-size:13.5px;border-radius:10px;padding:0 14px;width:auto}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px}

.link-row{
  text-align:center;font-size:13.5px;color:var(--ink-500);margin-top:18px;
}
.link-row a{color:var(--vela-700);font-weight:700}

/* ===================== CARDS ===================== */
.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:18px;
}
.card + .card{margin-top:14px}

/* balance hero card */
.balance-card{
  background:linear-gradient(155deg,var(--vela-700),var(--vela-800) 70%);
  color:#fff;border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow-2);
}
.balance-card .row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
}
.balance-card .row + .row{border-top:1px solid rgba(255,255,255,.14)}
.balance-card .label{font-size:12.5px;font-weight:600;opacity:.8}
.balance-card .amount{font-size:20px;font-weight:800;letter-spacing:-.01em}
.balance-card .amount.gold{color:var(--gold-500)}
.balance-card .eye{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;border:none;color:#fff;cursor:pointer;
}

/* task / menu grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
  padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;cursor:pointer;transition:border-color .15s var(--ease);
}
.tile:hover{border-color:var(--vela-400)}
.tile .ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--vela-100);color:var(--vela-700);
}
.tile span{font-size:11.5px;font-weight:700;color:var(--ink-700)}
.tile .pay{font-size:10.5px;color:var(--vela-600);font-weight:600}

/* quick action row (home/withdraw/transfer/myaccount) */
.quick-actions{display:flex;background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden}
.quick-actions a{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;font-size:11.5px;font-weight:700;color:var(--ink-700)}
.quick-actions a + a{border-left:1px solid var(--line-soft)}
.quick-actions a .ic{width:34px;height:34px;border-radius:10px;background:var(--vela-50);display:grid;place-items:center;color:var(--vela-700)}

/* referral / team card */
.ref-card{
  background:var(--vela-900);color:#fff;border-radius:var(--r-lg);
  padding:18px;position:relative;overflow:hidden;
}
.ref-card::after{
  content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,var(--vela-600) 0%,transparent 70%);opacity:.5;
  pointer-events:none;
}
.ref-card .link-box{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  background:rgba(255,255,255,.1);border-radius:12px;padding:8px 10px;
}
.ref-card .link-box span{flex:1;font-size:12.5px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-card .link-box button{
  background:var(--gold-500);color:var(--vela-900);border:none;border-radius:8px;
  padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer;flex:none;
}

/* ===================== BOTTOM NAV ===================== */
.tabbar{
  position:sticky;bottom:0;left:0;right:0;z-index:30;
  display:flex;background:var(--surface);border-top:1px solid var(--line);
  padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 6px);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 2px;border-radius:12px;color:var(--ink-300);font-size:10.5px;font-weight:700;
}
.tabbar a.active{color:var(--vela-700);background:var(--vela-50)}
.tabbar svg{width:21px;height:21px}

/* ===================== LISTS / TABLES ===================== */
.list-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 4px;border-bottom:1px solid var(--line-soft);
}
.list-item:last-child{border-bottom:none}
.list-item .avatar{
  width:38px;height:38px;border-radius:50%;background:var(--vela-100);color:var(--vela-800);
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;
}
.list-item .meta{flex:1;min-width:0}
.list-item .meta strong{display:block;font-size:14px;font-weight:700;color:var(--ink-900)}
.list-item .meta small{display:block;font-size:12px;color:var(--ink-500);margin-top:2px}
.list-item .side{text-align:right;flex:none}
.list-item .side strong{display:block;font-size:13.5px;font-weight:800}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.ok::before{background:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.warn::before{background:var(--warn)}
.badge.err{background:var(--err-bg);color:var(--err)}
.badge.err::before{background:var(--err)}
.badge.muted{background:var(--line-soft);color:var(--ink-500)}
.badge.muted::before{background:var(--ink-300)}

.tabs{display:flex;gap:8px;background:var(--vela-50);padding:5px;border-radius:12px;margin-bottom:16px}
.tabs button{
  flex:1;border:none;background:transparent;padding:10px 6px;border-radius:9px;
  font-size:13px;font-weight:700;color:var(--ink-500);cursor:pointer;
}
.tabs button.active{background:var(--surface);color:var(--vela-800);box-shadow:var(--shadow-1)}

.search-bar{
  display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:0 14px;height:46px;margin-bottom:16px;
}
.search-bar svg{flex:none;color:var(--ink-300)}
.search-bar input{border:none;outline:none;flex:1;font-size:14px;font-family:inherit;background:transparent}

.divider{height:1px;background:var(--line-soft);margin:18px 0}

.empty-state{
  text-align:center;padding:40px 12px;color:var(--ink-500);
}
.empty-state .ic{
  width:56px;height:56px;border-radius:16px;background:var(--vela-50);color:var(--vela-500);
  display:grid;place-items:center;margin:0 auto 14px;
}
.empty-state strong{display:block;color:var(--ink-800);font-size:15px;margin-bottom:4px}
.empty-state p{font-size:13px;line-height:1.5}

/* progress bar (weekly challenge) */
.progress{height:8px;border-radius:99px;background:var(--vela-100);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--gold-500);border-radius:99px}

.leader-row{display:flex;align-items:center;gap:12px;padding:10px 4px}
.leader-rank{
  width:26px;height:26px;border-radius:8px;background:var(--vela-50);color:var(--vela-700);
  display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;
}
.leader-row.top1 .leader-rank{background:var(--gold-500);color:#fff}

/* transaction id / mono figures */
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ===================== MODAL / SHEET (mock only) ===================== */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(14,27,24,.45);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease);
}
.sheet-overlay.open{opacity:1;pointer-events:auto}
.sheet{
  width:100%;max-width:480px;background:var(--surface);border-radius:20px 20px 0 0;
  padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 20px);
  transform:translateY(16px);transition:transform .2s var(--ease);
}
.sheet-overlay.open .sheet{transform:translateY(0)}
.sheet .handle{width:36px;height:4px;background:var(--line);border-radius:99px;margin:0 auto 16px}

/* toast (mock only) */
.toast{
  position:fixed;left:50%;bottom:100px;transform:translate(-50%,12px);
  /* Deliberately NOT var(--ink-900) — that token flips to near-white in
     dark mode (see shell.css :root[data-theme="dark"]), which would put
     white text on a near-white background here. This pill is meant to
     look the same dark-on-any-theme, so it gets its own fixed color. */
  background:#1B2E29;color:#fff;padding:12px 18px;border-radius:12px;
  font-size:13.5px;font-weight:600;z-index:60;opacity:0;pointer-events:none;
  transition:all .2s var(--ease);max-width:88%;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===================== DESKTOP / ADMIN SHELL ===================== */
.admin-shell{display:flex;min-height:100dvh;max-width:1280px;margin:0 auto;background:var(--bg)}
.admin-sidebar{
  width:240px;flex:none;background:var(--vela-900);color:#fff;
  padding:22px 16px;display:flex;flex-direction:column;gap:4px;
}
.admin-sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 24px}
.admin-sidebar .brand img{height:20px;filter:brightness(0) invert(1)}
.admin-nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.68);
}
.admin-nav a.active{background:rgba(255,255,255,.1);color:#fff}
.admin-nav a svg{width:18px;height:18px;flex:none}
.admin-sidebar .admin-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 28px;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:10;
}
.admin-content{padding:26px 28px 60px}
.admin-mobilebar{display:none}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px}
.stat-card .label{font-size:12.5px;color:var(--ink-500);font-weight:600}
.stat-card .value{font-size:21px;font-weight:800;margin-top:8px}
.stat-card .delta{font-size:11.5px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:3px}
.stat-card .delta.up{color:var(--ok)}
.stat-card .delta.down{color:var(--err)}

.table-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.table-card .table-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;
}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:11.5px;text-transform:none;font-weight:700;color:var(--ink-500);
  padding:12px 20px;border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
tbody td{padding:14px 20px;font-size:13.5px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--vela-50)}
.row-user{display:flex;align-items:center;gap:10px}
.table-scroll{overflow-x:auto}

.pagination{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:12px;flex-wrap:wrap}
.pagination .pg-btns{display:flex;gap:6px}
.pagination button{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:700;color:var(--ink-700);cursor:pointer;
}
.pagination button.active{background:var(--vela-700);color:#fff;border-color:var(--vela-700)}

/* responsive: collapse admin sidebar to bottom bar on mobile */
@media (max-width:900px){
  .admin-sidebar{display:none}
  .admin-content{padding:18px 16px 90px}
  .admin-topbar{padding:14px 16px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .admin-mobilebar{
    display:flex;position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);
    padding:8px 4px calc(env(safe-area-inset-bottom,0px) + 8px);
  }
  .admin-mobilebar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--ink-300);padding:6px 2px;border-radius:10px}
  .admin-mobilebar a.active{color:var(--vela-700);background:var(--vela-50)}
  .admin-mobilebar svg{width:19px;height:19px}
}
@media (max-width:520px){
  .grid-3{gap:9px}
}