/* VaultFi fee referrals • light native dashboard theme V1.2.
   Frontend only: no reward or payment logic. */
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#182746;background:#f5f8ff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:#182746;background:radial-gradient(ellipse at 4% 1%,rgba(68,205,244,.17),transparent 34%),radial-gradient(ellipse at 99% 8%,rgba(176,103,242,.13),transparent 38%),linear-gradient(155deg,#f1f9ff 0%,#fafaff 57%,#fff6fc 100%)}
a{color:inherit}
.shell{max-width:1120px;margin:0 auto;padding:23px clamp(19px,4vw,43px) 55px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.back,.toplink{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#fff;border:1px solid #dde4f6;border-radius:13px;box-shadow:0 4px 14px rgba(47,64,121,.06);color:#44557a;min-height:39px;padding:8px 14px;font-weight:750}
.back{font-size:23px;min-width:39px;padding:3px 10px}
.brand{display:flex;align-items:center;gap:9px;color:#152342;text-decoration:none;font-size:21px;font-weight:850;letter-spacing:-.7px}
.brand-accent{color:#7a58e9}
.mark{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,#2bd3e5,#6574f5 55%,#ce52d6);box-shadow:0 6px 16px rgba(99,91,227,.18)}
.toplink{margin-left:auto;font-size:11px}
.hero{max-width:none;margin:0 0 17px;padding:29px clamp(20px,3.7vw,38px);border:1px solid #d9e3fc;border-radius:25px;background:radial-gradient(circle at 90% 10%,rgba(113,105,237,.11),transparent 44%),linear-gradient(120deg,#fff,#f3f9ff 53%,#f5f0ff);box-shadow:0 12px 33px rgba(57,77,146,.08)}
.eyebrow,.section-label{color:#6559d6;letter-spacing:.11em;font-size:10px;font-weight:850;text-transform:uppercase}
.hero h1{font-size:clamp(37px,5.7vw,61px);line-height:1.065;letter-spacing:-.052em;color:#162443;font-weight:870;margin:10px 0 13px}
.hero h1 em{font-style:normal;background:linear-gradient(95deg,#18b8df 0%,#6664f6 49%,#d14ac8 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero p{max-width:780px;font-size:13px;line-height:1.72;color:#5e6f8d;margin:0}
.hero-small{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.pill,.chip{border:1px solid #d6d8fc;border-radius:30px;background:#f1f0ff;color:#5846bc;padding:8px 11px;font-size:10px;font-weight:820}
.balance{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:12px;padding:28px;border:1px solid rgba(142,171,247,.52);border-radius:24px;color:#fff;background:linear-gradient(115deg,#396ce4 0%,#645ae9 51%,#9955d6 100%);box-shadow:0 17px 35px rgba(81,91,199,.19),inset 0 1px rgba(255,255,255,.35)}
.balance:before{content:"";position:absolute;right:-87px;top:-145px;width:350px;height:350px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:radial-gradient(circle,rgba(255,255,255,.15),transparent 67%);pointer-events:none}
.balance>*{position:relative}
.balance .section-label{color:#e6efff}
.total{font-size:clamp(38px,6vw,61px);font-weight:900;letter-spacing:-.055em;margin:7px 0 5px;color:#fff;font-variant-numeric:tabular-nums}
.total small{font-size:15px;color:#e0ebff;letter-spacing:0}
.sub{font-size:11px;color:#e3eaff}
.ring{height:91px;width:91px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:5px solid rgba(255,255,255,.35);border-left-color:#69f4e1;border-radius:50%;background:rgba(8,23,76,.12)}
.ring span{font-weight:880;font-size:23px}.ring small{font-size:10px;color:#e5efff}
.progress{grid-column:1/-1;background:#ffffff40;height:9px;border-radius:99px;overflow:hidden}
.progress div{height:100%;width:0;background:linear-gradient(90deg,#6df7dd,#bdf7ff);border-radius:inherit;transition:width .3s}
.balance-info{grid-column:1/-1;display:flex;justify-content:space-between;gap:9px;font-size:12px;color:#eff4ff}
.balance-info strong{white-space:nowrap;color:#fff}
.fine{grid-column:1/-1;margin:2px 0 0;color:#e7f0ff;font-size:11px;line-height:1.55}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0 23px}
.metrics article{min-width:0;display:flex;flex-direction:column;gap:7px;padding:19px 17px;border:1px solid #e0e7f7;border-radius:17px;background:linear-gradient(145deg,#fff,#f7f9ff);box-shadow:0 7px 18px rgba(49,69,132,.065)}
.metrics article span{font-size:11px;color:#687996;font-weight:650}
.metrics b{font-size:25px;font-weight:850;letter-spacing:-.045em;color:#233653;font-variant-numeric:tabular-nums}
.metrics small{font-size:10px;color:#7a89a4;line-height:1.45}
.panel{margin:15px 0;padding:clamp(19px,3vw,29px);border:1px solid #e0e6f6;border-radius:22px;background:linear-gradient(150deg,#fff,#fbfcff);box-shadow:0 10px 29px rgba(42,59,117,.06)}
.heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.heading h2{color:#1a2a4b;margin:5px 0 13px;font-size:23px;letter-spacing:-.035em}
.panel p{font-size:12px;color:#687993;line-height:1.7}
.linkrow{display:flex;gap:8px;margin:19px 0 10px}
.linkrow input{width:100%;min-width:0;border:1px solid #d3def4;background:#f5f8ff;color:#23365d;border-radius:12px;padding:13px;font-size:12px;outline-color:#6c64ec}
.linkrow button,.primary{border:0;border-radius:13px;background:linear-gradient(110deg,#25bfdc,#6374f5 52%,#aa5ae1);box-shadow:0 7px 18px rgba(80,100,205,.18);color:#fff;font-weight:850;padding:13px 18px;cursor:pointer}
.linkrow button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.primary{width:100%;margin-top:7px;min-height:47px}.primary[hidden]{display:none}
.message{font-size:12px;min-height:19px;margin-top:8px;color:#405db0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.steps div{min-width:0;border-radius:15px;background:linear-gradient(145deg,#f4f8ff,#f5f0ff);border:1px solid #e3e5f9;padding:15px;display:flex;flex-direction:column;gap:9px}
.steps b{font-size:19px;color:#5c6bef}.steps strong{font-size:13px;color:#233552}.steps span{font-size:11px;color:#647692;line-height:1.5}
.example{margin-top:17px;padding:16px;border-radius:15px;background:linear-gradient(145deg,#eaf9ff,#f1eeff);border:1px solid #cddff6;line-height:1.65;color:#223552}
.example>span{display:block;color:#4c62c0;font-size:10px;letter-spacing:.07em;font-weight:850;margin-bottom:5px}.example div{font-size:13px}.example small{font-size:10px;color:#667994}
.item{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:14px 0;border-bottom:1px solid #e6eaf5}.item:last-child{border:0}.item strong{display:block;color:#233552;font-size:12px;margin-bottom:6px}.item small{display:block;color:#7a88a1;font-size:10px;line-height:1.5}.item b{color:#059d85;font-size:13px;white-space:nowrap}.item a{color:#4259be!important}
.empty{padding:20px 4px;color:#7989a3;font-size:12px}
footer{padding:22px 0;font-size:11px;color:#73829e;line-height:1.8}footer a{color:#5d58d0;font-weight:700}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #6558e8;outline-offset:3px}
@media(max-width:600px){
  .shell{max-width:520px;padding:13px 14px calc(42px + env(safe-area-inset-bottom,0px))}
  .top{margin-bottom:15px}.toplink{padding:8px 10px;font-size:10px}
  .hero{border-radius:20px;padding:21px 19px}.hero h1{font-size:39px}.hero p{font-size:12px}
  .balance{padding:19px;border-radius:20px}.total{font-size:39px}.ring{width:70px;height:70px}.ring span{font-size:19px}
  .metrics{gap:7px;margin:12px 0 17px}.metrics article{padding:13px 9px;gap:6px}.metrics b{font-size:19px}.metrics article span{font-size:10px}.metrics small{font-size:9px}
  .panel{padding:18px;border-radius:18px}.heading h2{font-size:20px}.chip{font-size:9px;white-space:normal;text-align:center}
  .steps{grid-template-columns:1fr}.steps div{flex-direction:row;align-items:center}.steps span{margin-left:auto;max-width:47%}
  .linkrow input{padding:11px;font-size:11px}.linkrow button{padding:10px 13px}
}
@media(max-width:350px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics article:last-child{grid-column:1/-1}.hero h1{font-size:34px}.chip{display:none}}
@media(prefers-reduced-motion:reduce){.progress div{transition:none}}