/* =========================
   Nix Funding Portal UI — V2 “Aurora Bento”
   Premium feel: gradient borders, bento grid, command palette, toasts
   Pure CSS, responsive, no framework
   ========================= */

*,
*::before,
*::after { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
a { text-decoration: none; color: inherit; }
button, input, select { font: inherit; }
img, svg { max-width: 100%; display: block; }
:where(button, a, input, select):focus-visible {
  outline: 3px solid rgba(63, 210, 212, .55);
  outline-offset: 2px;
  border-radius: 14px;
}

/* ---- Theme tokens ---- */
:root{
  --bg0:#1b1d22;
  --bg1:#1e2026;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --muted2:rgba(255,255,255,.46);

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.085);
  --stroke: rgba(255,255,255,.12);

  --brand:#3fd2d4;
  --brand2:#2ab8ba;
  --warn:#ffd166;
  --bad:#ff6b6b;
  --good:#2ee59d;

  --shadow: 0 22px 70px rgba(0,0,0,.52);
  --shadow2: 0 14px 38px rgba(0,0,0,.35);
  --r: 20px;
  --r2: 14px;

  --sidebar: 280px;
  --topbar: 74px;
  --container: 1180px;

  --grid-gap: 14px;
}

[data-theme="light"]{
  color-scheme: light;
  --bg0:#f0fafa;
  --bg1:#e6f7f5;
  --text:rgba(10,18,32,.92);
  --muted:rgba(10,18,32,.65);
  --muted2:rgba(10,18,32,.48);

  --card: rgba(10,18,32,.06);
  --card2: rgba(10,18,32,.09);
  --stroke: rgba(10,18,32,.14);

  --shadow: 0 20px 55px rgba(12,18,30,.22);
  --shadow2: 0 12px 32px rgba(12,18,30,.16);
}

/* ---- Aurora background + subtle grid ---- */
.v2-bg{
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(ellipse 900px 600px at 20% 0%, rgba(63,210,212,.14), transparent 65%),
    radial-gradient(ellipse 700px 500px at 80% 20%, rgba(42,184,186,.08), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(27,29,34,.90), transparent 55%),
    linear-gradient(160deg, #1b1d22 0%, #1e2228 50%, #1b1d22 100%);
  position: relative;
  overflow-x: hidden;
}

.v2-bg::after {
  /* animated aurora sheen */
  content: "";
  position: fixed; /* <--- CHANGED from absolute */
  inset: -50%;     /* Increased slightly to ensure coverage during bounce */
  background:
    conic-gradient(from 140deg,
      rgba(63,210,212,.0),
      rgba(63,210,212,.10),
      rgba(42,184,186,.10),
      rgba(27,29,34,.08),
      rgba(63,210,212,.0));
  filter: blur(52px);
  opacity: .45;
  transform: translate3d(0,0,0);
  animation: aurora 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0; /* Ensures it doesn't overlap interactive elements if stacking contexts get complex */
}
@keyframes aurora{
  from { transform: translate(-3%, -2%) rotate(-8deg); }
  to   { transform: translate(3%, 2%) rotate(10deg); }
}

/* ---- Layout helpers ---- */
.container{ width: min(var(--container), calc(100% - 26px)); margin: 0 auto; }
.row{ display:flex; align-items:center; gap: 12px; }
.col{ display:flex; flex-direction:column; gap: 12px; }
.space{ justify-content:space-between; }
.wrap{ flex-wrap:wrap; }
.hide-sm{ display:block; }
@media (max-width: 760px){ .hide-sm{ display:none; } }

/* ---- Premium card with gradient border ---- */
.card{
  position: relative;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow2);
  border: 1px solid transparent;
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(63,210,212,.50),
    rgba(42,184,186,.35),
    rgba(63,210,212,.20));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .45;
  pointer-events:none;
}
.card.pad{ padding: 18px; }
.card.soft{ background: var(--card2); }

.kicker{ color: var(--muted2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.h1{ margin:0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; }
.h2{ margin:0; font-size: 18px; letter-spacing: -0.01em; }
.p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 12px;
}
.dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--good); }
.dot.warn{ background: var(--warn); }
.dot.bad{ background: var(--bad); }


/* ---- Buttons (with subtle shine) ---- */


/* Divider */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
}

.divider span {
  white-space: nowrap;
}

.sso-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.sso-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

.sso-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}



/* ---- Buttons (with subtle shine) ---- */
.btn{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  overflow:hidden;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); }
.btn:active{ transform: translateY(0px); }
.btn::after{
  /* shine sweep */
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform: rotate(18deg) translateX(-60%);
  opacity: 0;
  transition: opacity .2s ease;
}
.btn:hover::after{ opacity: .85; animation: shine .9s ease; }
@keyframes shine{ to { transform: rotate(18deg) translateX(65%); } }

.btn.primary{
  border-color: rgba(255,255,255,.10);
  color: #06101d;
  font-weight: 850;
  background: linear-gradient(135deg, rgba(63,210,212,.95), rgba(42,184,186,.88));
}
.btn.ghost{ background: transparent; }
.btn.danger{
  background: rgba(255,107,107,.14);
  border-color: rgba(255,107,107,.30);
}
.pill{ border-radius: 999px; }

/* ---- Inputs with floating label ---- */
.fld{ position: relative; }
.inp{
  width: 100%;
  padding: 22px 14px 8px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
  min-height: 52px;
  box-sizing: border-box;
}
.inp::placeholder{ color: transparent; }

/* Static-label variant for select/date/phone — label sits above the field */
.inp-static{
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.inp-static:focus{ border-color: rgba(63,210,212,.52); }
.fld-static{ display:flex; flex-direction:column; gap:5px; }
.fld-label{ font-size:11px; color:var(--muted); padding-left:2px; letter-spacing:.04em; }
.lab{
  position: absolute;
  left: 14px;
  top: 50%; transform: translateY(-50%);
  color: var(--muted2);
  font-size: 13px;
  pointer-events:none;
  transform-origin: left top;
  transition: transform .12s ease, color .12s ease, top .12s ease;
}
.inp:focus{ border-color: rgba(63,210,212,.52); }
.inp:focus + .lab,
.inp:not(:placeholder-shown) + .lab{
  top: 8px;
  transform: scale(.86);
  color: var(--muted);
}

/* ---- Auth layout ---- */
.auth{
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 26px 0;
  position: relative;
}
.auth-grid{
  width: min(1120px, calc(100% - 26px));
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}
@media (max-width: 980px){
  .auth-grid{ grid-template-columns: 1fr; }
}
.hero{
  padding: 22px;
  border-radius: var(--r);
  background:
    radial-gradient(1000px 520px at 10% 10%, rgba(63,210,212,.12), transparent 60%),
    radial-gradient(900px 560px at 80% 20%, rgba(42,184,186,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 230deg,
    rgba(63,210,212,.0),
    rgba(63,210,212,.12),
    rgba(42,184,186,.10),
    rgba(63,210,212,.05),
    rgba(63,210,212,.0));
  filter: blur(38px);
  opacity: .55;
  animation: aurora 8s ease-in-out infinite alternate;
  pointer-events:none;
}
.brand{
  display:flex; align-items:center; justify-content:space-between;
  position: relative; z-index: 1;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  letter-spacing: .3px;
}
.logoMark{
  width: 14px; height: 14px; border-radius: 6px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 14px 50px rgba(63,210,212,.25);
}
.heroBody{ position: relative; z-index: 1; margin-top: 18px; }
.kpis{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 540px){ .kpis{ grid-template-columns: 1fr; } }
.kpiMini{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 14px;
}
.kpiMini .k{ color: var(--muted2); font-size: 12px; }
.kpiMini .v{ margin-top: 8px; font-size: 20px; font-weight: 900; }
.formCard{ padding: 20px; }

/* ---- App Shell ---- */
.shell{
  display:grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height:100vh;
}
@media (max-width: 980px){
  .shell{ grid-template-columns: 1fr; }
}
.sidebar{
  position: sticky; top:0; height: 100vh;
  padding: 14px;
  border-right: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
}
@media (max-width: 980px){
  .sidebar{
    position: fixed; left:0; top:0;
    width: min(86vw, var(--sidebar));
    transform: translateX(-110%);
    transition: transform .18s ease;
    z-index: 60;
    box-shadow: var(--shadow);
  }
  .sidebar.open{ transform: translateX(0); }
}
.nav{ margin-top: 14px; display:grid; gap: 8px; }
.nav a{
  display:flex; align-items:center; gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  color: var(--muted);
  border: 1px solid transparent;
}
.nav a:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.nav a.active{
  background: rgba(63,210,212,.10);
  border-color: rgba(63,210,212,.18);
  color: var(--text);
}

.topbar{
  position: sticky; top:0; z-index: 20;
  height: var(--topbar);
  border-bottom: 1px solid var(--stroke);
  background: rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
}
.topbarInner{
  height: 100%;
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
.search{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  min-width: 280px;
  max-width: 620px;
  width: 100%;
}
.search input{
  width: 100%;
  border:0; outline:0;
  background: transparent;
  color: var(--text);
}
.kbd{
  font-size: 12px;
  color: var(--muted2);
  border: 1px solid var(--stroke);
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}

.main{ min-width:0; }
.content{ padding: 16px 0 30px; }

/* ---- Bento grid ---- */
.bento{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--grid-gap);
}
@media (max-width: 980px){
  .bento{ grid-template-columns: 1fr; }
}
.span2{ grid-column: span 2; }
@media (max-width: 980px){ .span2{ grid-column: auto; } }

.statsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 980px){
  .statsGrid{ grid-template-columns: 1fr; }
}

/* ---- Progress bar ---- */
.prog{
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.prog > span{
  display:block; height:100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(63,210,212,.95), rgba(42,184,186,.88));
  transition: width .35s ease;
}

/* ---- Table ---- */
.tableWrap{ overflow:auto; border-radius: 16px; border: 1px solid var(--stroke); }
table{ width:100%; border-collapse: collapse; }
th, td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--stroke);
  font-size: 13px;
  text-align:left;
}
th{ color: var(--muted); background: rgba(255,255,255,.05); font-weight: 800; }
tr:last-child td{ border-bottom:0; }
.pos{ color: var(--good); font-weight: 800; }
.neg{ color: var(--bad); font-weight: 800; }

/* ---- Dropdown ---- */
.dd{
  position: relative;
}
.ddPanel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 320px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow2);
  padding: 12px;
  display:none;
  z-index: 80;
}
.dd.open .ddPanel{ display:block; }

/* ---- Toasts ---- */
.toastZone{
  position: fixed;
  right: 14px;
  top: 14px;
  display:grid;
  gap: 10px;
  z-index: 120;
}
.toast{
  width: min(380px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow2);
  padding: 12px;
  display:flex; gap: 10px; align-items:flex-start;
  animation: toastIn .18s ease both;
}
@keyframes toastIn{ from{ transform: translateY(-8px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- Command palette ---- */
.paletteBack{
  position: fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:flex-start; justify-content:center;
  padding: 12vh 16px 16px;
  z-index: 140;
}
.paletteBack.open{ display:flex; }
.palette{
  width: min(720px, 100%);
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.paletteTop{
  padding: 14px;
  border-bottom: 1px solid var(--stroke);
}
.paletteList{
  max-height: 340px;
  overflow:auto;
}
.cmd{
  padding: 12px 14px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px;
  cursor:pointer;
}
.cmd:hover{ background: rgba(255,255,255,.06); }
.cmd small{ color: var(--muted2); }

/* ---- Mobile bottom nav ---- */
.mnav{ display:none; }
@media (max-width: 980px){
  .mnav{
    display:flex;
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(16px);
    z-index: 70;
  }
  .mnav a{
    flex:1; text-align:center;
    padding: 10px;
    border-radius: 14px;
    color: var(--muted);
    border: 1px solid transparent;
  }
  .mnav a.active{
    background: rgba(63,210,212,.10);
    border-color: rgba(63,210,212,.18);
    color: var(--text);
  }
}
/* ===== V2 Empty-State Enhancements ===== */

.emptyWrap{
  display:grid;
  gap: 10px;
}

.emptyHero{
  display:grid;
  gap: 14px;
}

.callout{
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  padding: 14px;
}

.illus{
  height: 130px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140px 90px at 25% 35%, rgba(63,210,212,.18), transparent 60%),
    radial-gradient(160px 100px at 75% 45%, rgba(42,184,186,.14), transparent 60%),
    radial-gradient(220px 120px at 50% 100%, rgba(63,210,212,.08), transparent 60%),
    rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.illus::after{
  content:"";
  position:absolute; inset:-40% -50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(18deg) translateX(-70%);
  animation: shine 2.2s ease-in-out infinite;
  opacity: .55;
}

.stepper{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.step{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.stepNum{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: #06101d;
  background: linear-gradient(135deg, rgba(63,210,212,.95), rgba(42,184,186,.88));
}
.stepTxt b{
  display:block;
  font-weight: 950;
}
.stepTxt small{
  display:block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.lockBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  color: var(--muted);
  font-size: 12px;
}
.lockIcon{
  width: 18px;
  height: 18px;
}

.skeleton{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.skeleton::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(18deg) translateX(-60%);
  animation: shine 1.6s ease-in-out infinite;
  opacity: .65;
}
.skelLine{ height: 12px; border-radius: 999px; }
.skelSm{ height: 10px; opacity: .9; }
.skelLg{ height: 16px; }

.emptyTable{
  display:grid;
  gap: 12px;
  padding: 14px;
}
.emptyRow{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px){
  .emptyRow{ grid-template-columns: 1fr; }
}

.dataHint{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.dataHint b{ font-weight: 950; }
.dataHint p{ margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
/* ================================
   Challenges page: plans grid
   ================================ */

.plansGrid{
  display:grid;
  gap:18px;
  align-items:stretch;
  /* auto-fit makes it responsive and prevents squish */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* On wide screens, lock it to 3 equal columns */
@media (min-width: 1200px){
  .plansGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Prevent grid children from overflowing and shrinking weirdly */
.plansGrid > .card{ min-width:0; }

/* Inside each plan card: make stats tiles responsive too */
.plansGrid .statsGrid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* When cards get narrower, switch to 2 columns */
@media (max-width: 1200px){
  .plansGrid .statsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* On mobile, stack stats vertically */
@media (max-width: 520px){
  .plansGrid{
    grid-template-columns: 1fr;
  }
  .plansGrid .statsGrid{
    grid-template-columns: 1fr;
  }
}