:root{
  --bg:#f7f9ff;
  --ink:#10183c;
  --ink2:#273355;
  --muted:#6f7b9a;
  --muted2:#929bb1;
  --line:rgba(67,84,137,.10);
  --glass:rgba(255,255,255,.76);
  --glass2:rgba(255,255,255,.90);
  --shadow:0 20px 52px rgba(69,80,137,.10);
  --shadow2:0 12px 30px rgba(69,80,137,.075);
  --cyan:#39d9ec;
  --blue:#4d8eff;
  --violet:#8c62f6;
  --pink:#ef6ec9;
  --mint:#37d5b3;
  --amber:#ffba39;
  --red:#ff6475;
  --sidebar:246px;
  --radius:26px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ink);
  font-size:15px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 13% 8%,rgba(54,216,235,.15),transparent 25%),
    radial-gradient(circle at 85% 12%,rgba(139,97,246,.14),transparent 28%),
    radial-gradient(circle at 77% 78%,rgba(239,109,201,.11),transparent 29%),
    linear-gradient(145deg,#f8fcff 0%,#f7f7ff 52%,#fff8fc 100%);
}
body:before{
  content:"";
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-image:radial-gradient(rgba(98,112,170,.13) .7px,transparent .7px);
  background-size:30px 30px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 84%);
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
img{max-width:100%}
[hidden]{display:none!important}

.vf-app{min-height:100vh}
.vf-sidebar{
  position:fixed; z-index:45;
  left:16px; top:16px; bottom:16px;
  width:var(--sidebar);
  display:flex; flex-direction:column;
  padding:18px 14px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.92);
  border-radius:31px;
  background:rgba(255,255,255,.85);
  box-shadow:0 22px 60px rgba(72,84,142,.12);
  backdrop-filter:blur(25px) saturate(160%);
}
.vf-sidebar::-webkit-scrollbar{width:0}
.vf-brand{display:flex;align-items:center;gap:11px;padding:5px 8px 18px}
.vf-brand-mark{
  width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:15px;color:#fff;font-size:22px;font-weight:950;
  transform:rotate(-6deg);
  background:linear-gradient(145deg,var(--cyan),var(--blue) 38%,var(--violet) 69%,var(--pink));
  box-shadow:inset 0 2px 3px rgba(255,255,255,.65),0 13px 28px rgba(111,104,235,.23);
}
.vf-brand-name{font-size:22px;font-weight:950;letter-spacing:-.8px}
.vf-brand-name b{color:#8068ef}
.vf-brand-sub{display:block;max-width:135px;margin-top:2px;color:var(--muted);font-size:9px;line-height:1.3}
.vf-nav-label{padding:10px 11px 6px;color:#97a0b6;font-size:9px;font-weight:950;letter-spacing:.16em}
.vf-nav{display:grid;gap:4px}
.vf-nav a{
  min-height:46px;display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-radius:15px;color:#465374;font-size:13px;font-weight:760;
  transition:.22s var(--ease)
}
.vf-nav a svg{width:19px;height:19px;stroke-width:1.9}
.vf-nav a:hover{transform:translateX(2px);background:rgba(123,106,241,.07);color:#583ed2}
.vf-nav a.active{
  color:#fff;
  background:linear-gradient(95deg,#3fd2ef,#7389ff 43%,#9d67f4 73%,#ed70c9);
  box-shadow:0 13px 28px rgba(112,106,235,.22)
}
.vf-pro{
  position:relative;overflow:hidden;margin-top:auto;padding:15px;
  border:1px solid rgba(137,108,246,.12);border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,239,255,.90))
}
.vf-pro:after{
  content:"";position:absolute;width:105px;height:105px;right:-30px;bottom:-55px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,104,205,.32),transparent 68%)
}
.vf-pro strong{display:block;font-size:13px}
.vf-pro p{margin:6px 0 12px;color:var(--muted);font-size:10px;line-height:1.45}
.vf-pro button{
  width:100%;min-height:37px;border:0;border-radius:12px;color:#fff;font-size:10px;font-weight:900;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--pink));
  box-shadow:0 10px 24px rgba(112,106,235,.18)
}

.vf-main{margin-left:calc(var(--sidebar) + 32px);padding:16px 18px 88px}
.vf-content{max-width:1550px;margin:0 auto}
.vf-topbar{
  position:sticky;top:10px;z-index:35;
  min-height:68px;display:flex;align-items:center;gap:12px;padding:9px 12px;
  border:1px solid rgba(255,255,255,.94);border-radius:22px;
  background:rgba(255,255,255,.80);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(26px) saturate(160%)
}
.vf-search{
  flex:1;max-width:710px;height:46px;display:flex;align-items:center;gap:10px;padding:0 15px;
  border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.89)
}
.vf-search svg{width:18px}
.vf-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}
.vf-top-spacer{flex:1}
.vf-currency{
  min-width:82px;height:43px;padding:0 10px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.91);color:var(--ink);font-size:12px;font-weight:850;outline:none
}
.vf-icon-btn{
  width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.91);color:#3f4c70;box-shadow:0 8px 20px rgba(70,82,130,.06)
}
.vf-icon-btn svg{width:18px}
.vf-bell{position:relative}
.vf-bell:after{
  content:"";position:absolute;right:8px;top:7px;width:7px;height:7px;border-radius:50%;
  background:#ff4fba;box-shadow:0 0 0 4px rgba(255,79,186,.10);animation:pulse 2s infinite
}
.vf-profile-chip{
  display:flex;align-items:center;gap:9px;padding:5px 10px;border:1px solid var(--line);
  border-radius:16px;background:rgba(255,255,255,.91)
}
.vf-avatar{
  width:35px;height:35px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:13px;font-weight:950;
  background:linear-gradient(145deg,#4bd7e9,#7484ff,#e46bc9)
}
.vf-profile-chip strong{display:block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.vf-profile-chip small{display:block;margin-top:1px;color:var(--muted);font-size:9px}

.vf-page{animation:pageIn .55s var(--ease) both}
.vf-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:27px 4px 19px}
.vf-eyebrow{color:#7968e9;font-size:10px;font-weight:950;letter-spacing:.22em}
.vf-title{margin:6px 0 4px;font-size:36px;line-height:1.04;letter-spacing:-1.5px}
.vf-title .gradient,.gradient{background:linear-gradient(90deg,#2ecfe8,#648cff,#9765f7,#e86fc8);-webkit-background-clip:text;color:transparent}
.vf-sub{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.vf-live{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;color:#0e8f6c;background:rgba(48,216,165,.11);font-size:10px;font-weight:900}
.vf-live i{width:7px;height:7px;border-radius:50%;background:#28cfa0;box-shadow:0 0 0 5px rgba(40,207,160,.10)}

.glass{
  border:1px solid rgba(255,255,255,.94);
  background:linear-gradient(145deg,rgba(255,255,255,.89),rgba(248,249,255,.76));
  box-shadow:var(--shadow);
  backdrop-filter:blur(23px) saturate(155%)
}
.vf-card{padding:20px;border-radius:var(--radius)}
.vf-grid{display:grid;gap:16px}
.vf-grid.two{grid-template-columns:minmax(0,1.42fr) minmax(330px,.58fr)}
.vf-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.vf-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

.hero{
  position:relative;overflow:hidden;min-height:270px;padding:27px;
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(285px,.78fr);align-items:center;
  border-radius:31px
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 76% 18%,rgba(44,220,237,.19),transparent 28%),
    radial-gradient(circle at 82% 76%,rgba(232,101,205,.16),transparent 31%),
    radial-gradient(circle at 45% 45%,rgba(126,101,244,.08),transparent 30%)
}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero-label{color:#7d86a3;font-size:10px;font-weight:950;letter-spacing:.15em}
.hero-balance{margin:10px 0 3px;color:var(--ink);font-size:50px;line-height:1;font-weight:950;letter-spacing:-2.3px}
.hero-change{margin-top:8px;color:#159c71;font-size:12px;font-weight:850}
.hero-change.muted{color:var(--muted)}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.btn{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;
  border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);
  box-shadow:0 8px 20px rgba(70,82,130,.06);font-size:11px;font-weight:900;transition:.22s var(--ease)
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(70,82,130,.11)}
.btn.primary{border-color:transparent;color:#fff;background:linear-gradient(90deg,var(--cyan),var(--blue) 36%,var(--violet) 70%,var(--pink));box-shadow:0 15px 34px rgba(113,104,239,.23)}
.btn.soft{background:linear-gradient(145deg,rgba(239,254,255,.96),rgba(247,239,255,.96))}
.btn svg{width:16px}

.hero-art{position:relative;min-height:210px;display:grid;place-items:center}
.v-orb{
  width:132px;height:132px;display:grid;place-items:center;position:relative;z-index:2;border-radius:40px;
  color:#fff;font-size:58px;font-weight:950;transform:rotate(-7deg);
  background:linear-gradient(145deg,#35d9e9,#668cff 42%,#8b63f8 70%,#ed6dcc);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.67),0 29px 64px rgba(102,109,225,.27),0 0 50px rgba(50,217,235,.15);
  animation:float 4.8s ease-in-out infinite
}
.v-orb:before,.v-orb:after{content:"";position:absolute;border:1px solid rgba(103,107,232,.15);border-radius:50%;z-index:-1}
.v-orb:before{width:195px;height:195px}.v-orb:after{width:248px;height:248px}
.coin-orb{
  position:absolute;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  font-size:19px;font-weight:950;box-shadow:inset 0 2px 2px rgba(255,255,255,.72),0 15px 32px rgba(72,83,133,.15);
  animation:drift 5.5s ease-in-out infinite
}
.coin-orb.btc{left:7%;top:12%;color:#bd7200;background:linear-gradient(145deg,#fff7dc,#ffc241)}
.coin-orb.eth{right:5%;top:14%;color:#fff;background:linear-gradient(145deg,#c8c6ff,#745eff)}
.coin-orb.sol{right:13%;bottom:6%;color:#fff;background:linear-gradient(145deg,#5de8e0,#6184ff,#8c55e7)}
.coin-orb.usdt{left:14%;bottom:8%;color:#fff;background:linear-gradient(145deg,#5fe7cb,#18aa88)}
.sparkles{position:absolute;inset:0;pointer-events:none}
.sparkles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 12px #7cf7ff;animation:twinkle 2.4s infinite}
.sparkles i:nth-child(1){left:22%;top:18%}.sparkles i:nth-child(2){left:70%;top:20%;animation-delay:.4s}.sparkles i:nth-child(3){left:35%;top:70%;animation-delay:.8s}.sparkles i:nth-child(4){left:83%;top:62%;animation-delay:1.1s}.sparkles i:nth-child(5){left:58%;top:8%;animation-delay:1.5s}

.portfolio-chart{width:100%;max-width:600px;height:112px;margin-top:11px;overflow:visible}
.portfolio-chart .grid line{stroke:rgba(84,100,150,.07);stroke-width:1}
.portfolio-chart .line{fill:none;stroke:url(#vfLine);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:540;stroke-dashoffset:540;animation:draw 1.6s .2s var(--ease) forwards}
.portfolio-chart .area{fill:url(#vfArea);opacity:.34}

.action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.action-card{
  position:relative;overflow:hidden;min-height:116px;padding:16px;border-radius:21px;color:#fff;
  box-shadow:0 15px 34px rgba(96,101,199,.16);transition:.24s var(--ease)
}
.action-card:hover{transform:translateY(-4px) scale(1.01)}
.action-card:after{content:"";position:absolute;width:96px;height:96px;right:-27px;bottom:-38px;border-radius:50%;background:rgba(255,255,255,.17)}
.action-card span{font-size:19px}.action-card strong{display:block;margin-top:13px;font-size:14px}.action-card small{display:block;margin-top:3px;font-size:10px;opacity:.9}
.action-card.blue{background:linear-gradient(145deg,#34d3ef,#4e8fff,#8a63f7)}
.action-card.purple{background:linear-gradient(145deg,#4f9bff,#9863fa,#eb6bcc)}
.action-card.pink{background:linear-gradient(145deg,#ff7c9f,#df5edf,#8c66fa)}
.action-card.mint{background:linear-gradient(145deg,#4ee0cb,#23b6c8,#5c8df7)}

.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.metric{
  min-height:72px;padding:13px 14px;display:flex;align-items:center;gap:11px;
  border:1px solid rgba(255,255,255,.93);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:var(--shadow2)
}
.metric-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,rgba(53,213,235,.15),rgba(138,99,247,.13));color:#6559dc;font-size:13px;font-weight:950}
.metric strong{display:block;font-size:15px}.metric small{display:block;margin-top:2px;color:var(--muted);font-size:10px}

.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-title h2{margin:0;font-size:18px;letter-spacing:-.35px}
.section-title p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.section-title a,.text-link{color:#6558dd;font-size:10px;font-weight:900}

.asset-list{display:grid;gap:9px}
.asset-card{
  min-height:78px;display:grid;grid-template-columns:50px minmax(0,1.05fr) minmax(105px,.55fr) minmax(110px,.6fr) minmax(100px,.55fr);
  gap:12px;align-items:center;padding:11px 13px;border:1px solid rgba(74,92,147,.07);border-radius:17px;
  background:rgba(251,252,255,.86);transition:.2s var(--ease)
}
.asset-card:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(71,84,139,.07)}
.asset-logo-wrap{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 9px 22px rgba(66,80,135,.10);overflow:visible}
.asset-logo{width:44px;height:44px;border-radius:50%;object-fit:contain;background:#fff}
.asset-logo-fallback{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:14px;font-weight:950;background:linear-gradient(145deg,#54d5eb,#7882ff,#bd66e9)}
.network-badge{
  position:absolute;right:-4px;bottom:-3px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;
  border:2px solid #fff;border-radius:999px;color:#596584;background:#eef2ff;font-size:7px;font-weight:950
}
.asset-main{min-width:0}.asset-main strong{display:block;font-size:13px}.asset-main small{display:block;margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset-stat{text-align:right;min-width:0}.asset-stat strong{display:block;font-size:12px;font-variant-numeric:tabular-nums}.asset-stat small{display:block;margin-top:3px;color:var(--muted);font-size:9px}
.asset-stat .up{color:#0ca16d}.asset-stat .down{color:#df4e69}
.asset-value{font-size:13px!important}
.asset-balance{font-size:12px!important}

.price-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;margin-top:12px;
  border-radius:15px;background:linear-gradient(145deg,rgba(236,253,255,.89),rgba(248,241,255,.91));color:#5f67a8;font-size:10px
}
.price-strip strong{color:var(--ink)}
.price-source{display:flex;align-items:center;gap:6px}
.price-source i{width:7px;height:7px;border-radius:50%;background:#32cfaa;box-shadow:0 0 0 4px rgba(50,207,170,.10)}

.radar{
  position:relative;overflow:hidden;min-height:280px;display:grid;place-items:center;border-radius:25px;
  background:
    radial-gradient(circle at 50% 50%,rgba(39,215,198,.14) 0 7%,transparent 8% 19%,rgba(70,162,238,.09) 20% 21%,transparent 22% 36%,rgba(126,105,242,.08) 37% 38%,transparent 39%),
    linear-gradient(145deg,rgba(249,255,255,.89),rgba(248,245,255,.88))
}
.radar:before{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid rgba(82,154,219,.18);
  background:conic-gradient(from 0deg,rgba(53,219,225,.42),transparent 21%);
  mask-image:radial-gradient(circle,transparent 0 9%,#000 10%);animation:spin 4s linear infinite
}
.radar:after{content:"";position:absolute;width:155px;height:155px;border-radius:50%;border:1px solid rgba(123,106,241,.18)}
.radar-core{width:66px;height:66px;z-index:2;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:25px;font-weight:950;background:linear-gradient(145deg,#50e4cb,#17ae8f);box-shadow:0 0 45px rgba(45,214,187,.34)}
.radar-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#39cfd6;box-shadow:0 0 0 7px rgba(57,207,214,.10);animation:pulse 2s infinite}
.radar-dot.d1{left:26%;top:40%}.radar-dot.d2{right:28%;top:31%;animation-delay:.5s;background:#7b6cf6}.radar-dot.d3{right:34%;bottom:24%;animation-delay:1s;background:#ff75c8}.radar-dot.d4{left:35%;bottom:29%;animation-delay:1.4s;background:#31d09b}

.donut{width:180px;height:180px;border-radius:50%;position:relative;background:conic-gradient(#8168f5 0 33%,#ffb832 33% 61%,#35d0ad 61% 76%,#4d9df7 76% 88%,#b765ec 88% 95%,#d9dde8 95% 100%);animation:growDonut 1s var(--ease) both}
.donut:after{content:"";position:absolute;inset:31px;border-radius:50%;background:rgba(255,255,255,.97);box-shadow:inset 0 0 22px rgba(83,97,148,.05)}
.donut-center{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;font-size:10px}.donut-center strong{display:block;font-size:16px}

.form-card{padding:21px;border-radius:26px}
.form-step{display:flex;align-items:center;gap:9px;margin:3px 0 10px;font-size:12px;font-weight:900}
.step-num{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:10px;background:linear-gradient(145deg,#36cce9,#5f84ff,#8e61f5)}
.field{margin-bottom:13px}.field label{display:block;margin:0 0 7px;color:#4d5a7a;font-size:10px;font-weight:900}
.control{min-height:52px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.89)}
.control input,.control select{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}
.amount-box{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(243,248,255,.87))}
.amount-value{font-size:44px;font-weight:950;letter-spacing:-2px}.amount-value small{font-size:17px;color:#5a6685;letter-spacing:0}
.percent-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.percent-row button{min-height:36px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.85);color:#536080;font-size:10px;font-weight:850}.percent-row button.active{color:#fff;border-color:transparent;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink))}
.notice{padding:13px;border-radius:15px;background:linear-gradient(145deg,rgba(235,253,255,.93),rgba(248,241,255,.94));color:#666ab6;font-size:10px;line-height:1.55}

.qr-wrap{
  position:relative;width:265px;height:265px;display:grid;place-items:center;margin:20px auto;padding:18px;
  border-radius:33px;background:#fff;border:1px solid rgba(92,104,159,.10);box-shadow:0 25px 54px rgba(71,83,137,.12)
}
.qr-wrap:before{content:"";position:absolute;inset:-10px;border-radius:39px;background:linear-gradient(135deg,rgba(51,215,236,.36),rgba(131,96,246,.28),rgba(238,108,203,.28));filter:blur(17px);z-index:-1;animation:pulseGlow 3s ease-in-out infinite}
.qr-wrap img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.receive-asset-showcase{display:flex;align-items:center;justify-content:center;gap:11px;margin:7px 0 2px}
.receive-asset-showcase img{width:48px;height:48px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 10px 24px rgba(70,82,135,.11)}
.receive-asset-showcase strong{display:block;font-size:13px}.receive-asset-showcase small{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.network-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.network-chip{
  min-height:58px;display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.84);color:var(--ink);font-size:10px;font-weight:900;transition:.2s var(--ease)
}
.network-chip:hover,.network-chip.active{transform:translateY(-2px);border-color:rgba(112,93,241,.34);box-shadow:0 10px 25px rgba(100,93,220,.10);background:linear-gradient(145deg,rgba(239,253,255,.96),rgba(248,240,255,.96))}
.network-chip img{width:34px;height:34px;border-radius:50%;object-fit:contain;background:#fff}
.address-box{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border:1px solid var(--line);border-radius:17px;background:rgba(248,250,255,.89)}
.address-box strong{display:block;max-width:670px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.address-box small{display:block;margin-bottom:4px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.copy-btn{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 11px;color:#405071;font-size:10px;font-weight:900}

.fee-card{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px;border:1px solid var(--line);border-radius:17px;background:rgba(250,252,255,.88)}
.fee-card strong{font-size:12px}.fee-card small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.fee-amount{text-align:right}

.offer-grid{display:grid;gap:9px}.offer{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:17px;background:rgba(252,253,255,.86)}.offer strong{font-size:12px}.offer small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.offer .rate{text-align:right;font-weight:900;font-size:11px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900}.badge.green{color:#108b69;background:rgba(44,209,159,.11)}.badge.purple{color:#6459d8;background:rgba(126,102,240,.10)}.badge.pink{color:#bb3a8a;background:rgba(239,105,198,.12)}

.reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.reward{padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.85);box-shadow:var(--shadow2)}.reward strong{display:block;margin-top:9px;font-size:12px}.reward small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.reward .reward-value{margin-top:10px;font-size:17px;font-weight:950}

.activity-list{display:grid;gap:7px}
.activity-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border-bottom:1px solid rgba(75,93,144,.07)}
.activity-item:last-child{border-bottom:0}
.activity-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,rgba(54,210,235,.13),rgba(139,97,246,.12));color:#6559dc;font-size:13px}
.activity-item strong{font-size:11px}.activity-item small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.activity-amount{text-align:right;font-size:10px;font-weight:850}

.empty-state{min-height:190px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:11px;line-height:1.5;border:1px dashed rgba(86,101,151,.12);border-radius:18px;background:rgba(251,252,255,.57)}
.empty-state strong{display:block;color:var(--ink);font-size:13px;margin-bottom:5px}

.market-ticker{
  position:fixed;z-index:28;left:calc(var(--sidebar) + 32px);right:18px;bottom:12px;height:44px;overflow:hidden;
  border:1px solid rgba(255,255,255,.92);border-radius:16px;background:rgba(255,255,255,.90);box-shadow:var(--shadow2);backdrop-filter:blur(18px)
}
.ticker-track{height:100%;display:flex;align-items:center;gap:28px;width:max-content;padding:0 18px;animation:ticker 34s linear infinite}
.ticker-item{display:flex;align-items:center;gap:7px;font-size:10px;white-space:nowrap}.ticker-item img{width:25px;height:25px;border-radius:50%;object-fit:contain;background:#fff}.ticker-item b{font-size:10px}.ticker-item .ticker-price{color:var(--muted);font-size:9px}

.vf-mobile-nav{display:none}.mobile-only{display:none}

.skeleton{position:relative;overflow:hidden;background:#edf1f9;border-radius:10px;color:transparent!important}
.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:shimmer 1.25s infinite}

@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-9px) rotate(-4deg)}}
@keyframes drift{50%{transform:translateY(-7px) translateX(4px)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.35)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.25);opacity:.55}}
@keyframes pulseGlow{50%{opacity:.55;transform:scale(1.02)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes growDonut{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes shimmer{100%{transform:translateX(100%)}}

@media(max-width:1200px){
  .vf-grid.two{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr minmax(235px,.55fr)}
  .asset-card{grid-template-columns:50px minmax(0,1fr) minmax(115px,.55fr) minmax(110px,.55fr)}
  .asset-card .asset-price-col{display:none}
}
@media(max-width:930px){
  :root{--sidebar:0px}
  body{font-size:16px}
  .vf-sidebar{display:none}
  .vf-main{margin-left:0;padding:9px 9px 96px}
  .vf-topbar{top:6px;min-height:62px;border-radius:20px}
  .vf-search{display:none}
  .vf-top-spacer{display:block}
  .vf-profile-chip small{display:none}
  .vf-profile-chip strong{max-width:85px}
  .vf-currency{min-width:74px;height:41px;font-size:11px}
  .vf-page-head{margin:21px 3px 14px;align-items:flex-start}
  .vf-title{font-size:31px}
  .vf-sub{font-size:12px}
  .hero{grid-template-columns:1fr;padding:20px;min-height:440px;border-radius:25px}
  .hero-balance{font-size:45px}
  .hero-art{min-height:178px}
  .v-orb{width:108px;height:108px;border-radius:32px;font-size:46px}
  .v-orb:before{width:158px;height:158px}.v-orb:after{width:207px;height:207px}
  .action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .network-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-grid.three,.vf-grid.four{grid-template-columns:1fr}
  .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desktop-only{display:none!important}.mobile-only{display:block}
  .asset-card{grid-template-columns:48px minmax(0,1fr) minmax(110px,.6fr)}
  .asset-card .asset-price-col,.asset-card .asset-change-col{display:none}
  .market-ticker{left:9px;right:9px;bottom:76px;height:38px}
  .vf-mobile-nav{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;z-index:50;left:8px;right:8px;bottom:7px;min-height:65px;padding:6px;
    border:1px solid rgba(255,255,255,.94);border-radius:23px;background:rgba(255,255,255,.91);
    box-shadow:0 18px 42px rgba(69,79,130,.15);backdrop-filter:blur(25px)
  }
  .vf-mobile-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:#56617f;font-size:9px;font-weight:850;border-radius:15px
  }
  .vf-mobile-nav a svg{width:21px;height:21px}
  .vf-mobile-nav a.active{color:#6e3fe6;background:linear-gradient(145deg,rgba(237,247,255,.96),rgba(245,237,255,.95))}
  .vf-mobile-nav a.center{
    transform:translateY(-14px);width:57px;height:57px;justify-self:center;border-radius:50%;color:#fff;
    background:linear-gradient(145deg,var(--cyan),var(--blue),var(--violet),var(--pink));
    box-shadow:0 12px 28px rgba(111,106,239,.28);border:3px solid rgba(255,255,255,.92)
  }
  .vf-mobile-nav a.center span{display:none}
}
@media(max-width:580px){
  .vf-main{padding-left:6px;padding-right:6px}
  .vf-topbar{padding:6px 7px}
  .vf-brand-mobile{display:flex!important;align-items:center;gap:7px}
  .vf-profile-chip{padding:4px 5px}.vf-profile-chip strong{display:none}
  .vf-page-head{flex-direction:column}
  .vf-title{font-size:28px}
  .vf-card{padding:15px;border-radius:22px}
  .hero{min-height:455px;border-radius:24px}
  .hero-balance{font-size:41px}
  .hero-actions{display:grid;grid-template-columns:repeat(2,1fr)}.hero-actions .btn{width:100%;padding:0 9px}
  .metrics{grid-template-columns:1fr 1fr}.metric{padding:11px}.metric-icon{width:36px;height:36px}.metric strong{font-size:13px}
  .action-card{min-height:101px}
  .section-title h2{font-size:17px}.section-title p{font-size:10px}
  .asset-card{grid-template-columns:47px minmax(0,1fr);padding:11px;min-height:82px}
  .asset-card .asset-balance-col{grid-column:2;text-align:left}.asset-card .asset-balance-col small{display:none}
  .asset-card .asset-value-col{grid-column:2;text-align:left}.asset-card .asset-price-col,.asset-card .asset-change-col{display:none}
  .network-chips{grid-template-columns:1fr 1fr}
  .qr-wrap{width:230px;height:230px}
  .address-box{align-items:stretch;flex-direction:column}.address-box .copy-btn{width:100%}
  .reward-grid{grid-template-columns:1fr 1fr}
  .amount-box{align-items:flex-start;flex-direction:column}.amount-value{font-size:39px}
  .percent-row{gap:5px}
  .market-ticker{display:none}
}


.vf-nav-logout{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border:0;
  border-radius:15px;
  background:transparent;
  color:#a73c5f;
  font-size:13px;
  font-weight:800;
  text-align:left;
  transition:.22s var(--ease);
}
.vf-nav-logout:hover{
  transform:translateX(2px);
  background:rgba(255,100,117,.08);
  color:#d83e62;
}
.vf-nav-logout svg{
  width:19px;
  height:19px;
  stroke-width:1.9;
}
.vf-refresh-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  color:#0e9b72;
  font-size:9px;
  font-weight:900;
}
.vf-refresh-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2dd1a4;
  box-shadow:0 0 0 4px rgba(45,209,164,.10);
  animation:pulse 1.8s infinite;
}
@media(max-width:930px){
  .vf-nav-logout{font-size:14px}
}


/* ===== VaultFi v52 ===== */
.asset-card.asset-clickable{cursor:pointer;position:relative}
.asset-card.asset-clickable:after{
  content:"›";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:#9aa3ba;font-size:22px;font-weight:800;opacity:0;transition:.2s var(--ease)
}
.asset-card.asset-clickable:hover:after{opacity:.9;right:4px}
.asset-card.asset-clickable:hover{
  border-color:rgba(116,95,241,.18);
  background:linear-gradient(145deg,rgba(248,254,255,.96),rgba(251,245,255,.96))
}
.market-live-pill{
  display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;
  background:rgba(45,211,164,.10);color:#0c906c;font-size:9px;font-weight:950
}
.market-live-pill i{
  width:7px;height:7px;border-radius:50%;background:#2dd2a5;
  box-shadow:0 0 0 5px rgba(45,210,165,.10);animation:pulse 1.4s infinite
}
.market-live-pill.offline{color:#9a691b;background:rgba(255,185,57,.12)}
.market-live-pill.offline i{background:#ffb939;box-shadow:0 0 0 5px rgba(255,185,57,.10)}

.asset-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:22px;align-items:center;min-height:270px;padding:26px;border-radius:30px
}
.asset-hero:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 78% 25%,rgba(58,216,237,.18),transparent 28%),
    radial-gradient(circle at 84% 77%,rgba(235,106,204,.14),transparent 30%),
    radial-gradient(circle at 45% 48%,rgba(130,101,244,.08),transparent 31%)
}
.asset-hero-main{position:relative;z-index:2;min-width:0}
.asset-identity{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.asset-identity .asset-logo-wrap{width:70px;height:70px}
.asset-identity .asset-logo,.asset-identity .asset-logo-fallback{width:66px;height:66px;font-size:21px}
.asset-identity .network-badge{min-width:23px;height:23px;font-size:8px}
.asset-identity h1{margin:0;font-size:31px;letter-spacing:-1px}
.asset-identity p{margin:4px 0 0;color:var(--muted);font-size:11px}
.asset-big-balance{margin:4px 0 5px;font-size:42px;line-height:1;font-weight:950;letter-spacing:-1.7px}
.asset-fiat{color:#4a5776;font-size:16px;font-weight:800}
.asset-price-line{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:10px;color:var(--muted);font-size:11px}
.asset-price-line strong{color:var(--ink)}
.asset-price-line .up{color:#0b9e6e;font-weight:900}
.asset-price-line .down{color:#d95068;font-weight:900}
.asset-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.asset-side-art{position:relative;z-index:2;min-height:195px;display:grid;place-items:center}
.asset-side-art .asset-logo-wrap{
  width:126px;height:126px;box-shadow:0 25px 60px rgba(73,84,139,.16),0 0 60px rgba(80,207,236,.15);
  animation:float 5s ease-in-out infinite
}
.asset-side-art .asset-logo,.asset-side-art .asset-logo-fallback{width:120px;height:120px;font-size:36px}
.asset-side-art:before,.asset-side-art:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(114,105,236,.14)}
.asset-side-art:before{width:185px;height:185px}.asset-side-art:after{width:238px;height:238px}
.asset-address-row{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 13px;border-radius:14px;
  background:rgba(247,249,255,.85);color:#56617e;font-size:9px
}
.asset-address-row strong{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}

.chart-card{padding:19px;border-radius:25px}
.chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.chart-tabs{display:flex;gap:6px;flex-wrap:wrap}
.chart-tabs button{
  min-width:43px;height:31px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.86);
  color:#65708e;font-size:9px;font-weight:900
}
.chart-tabs button.active{
  color:#fff;border-color:transparent;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet))
}
.live-chart{width:100%;height:250px;display:block;overflow:visible}
.live-chart .chart-grid line{stroke:rgba(79,95,147,.075);stroke-width:1}
.live-chart .chart-line{fill:none;stroke:url(#assetChartLine);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.live-chart .chart-area{fill:url(#assetChartArea);opacity:.35}
.chart-axis{display:flex;justify-content:space-between;margin-top:-3px;color:#9ba4ba;font-size:8px}
.chart-empty{min-height:230px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:11px}

.tx-list{display:grid;gap:9px}
.tx-card{
  display:grid;grid-template-columns:46px minmax(0,1.15fr) minmax(105px,.55fr) minmax(180px,.85fr) auto;
  gap:12px;align-items:center;padding:13px;border:1px solid rgba(74,92,147,.08);border-radius:17px;
  background:rgba(251,252,255,.87);transition:.2s var(--ease)
}
.tx-card:hover{transform:translateY(-1px);border-color:rgba(118,99,241,.16);box-shadow:0 10px 26px rgba(71,84,139,.07)}
.tx-dir{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;font-size:18px;font-weight:950}
.tx-dir.receive{color:#078c68;background:rgba(43,211,163,.12)}
.tx-dir.send{color:#b14568;background:rgba(239,103,133,.11)}
.tx-main strong{display:block;font-size:12px}
.tx-main small,.tx-meta small{
  display:block;margin-top:3px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.tx-amount{text-align:right}.tx-amount strong{display:block;font-size:12px}.tx-amount small{display:block;margin-top:3px;color:var(--muted);font-size:9px}
.tx-hash{min-width:0}
.tx-hash strong{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#4d5c7d;
  font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.tx-hash small{display:block;margin-top:3px;color:var(--muted);font-size:8px}
.tx-view{
  min-height:35px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;
  border:1px solid rgba(105,93,226,.12);border-radius:11px;
  background:linear-gradient(145deg,rgba(239,253,255,.93),rgba(247,240,255,.93));
  color:#5f54d6;font-size:9px;font-weight:900
}
.tx-provider-note{
  padding:12px 13px;margin-bottom:10px;border-radius:14px;background:rgba(255,185,57,.10);
  color:#8d641d;font-size:10px;line-height:1.5
}
.activity-filter{display:flex;gap:7px;flex-wrap:wrap}
.activity-filter button{
  min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#fff;
  color:#596581;font-size:9px;font-weight:900
}
.activity-filter button.active{color:#fff;border-color:transparent;background:linear-gradient(90deg,#38cee8,#7085fa,#a062f2)}

.send-asset-option{display:flex;align-items:center;gap:10px}
.send-selected-card{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:13px;border:1px solid var(--line);border-radius:17px;background:rgba(251,252,255,.87)
}
.send-selected-card .asset-logo-wrap{width:48px;height:48px}
.send-selected-card .asset-logo,.send-selected-card .asset-logo-fallback{width:44px;height:44px}

@media(max-width:930px){
  .asset-hero{grid-template-columns:1fr;min-height:470px}
  .asset-side-art{min-height:165px}
  .tx-card{grid-template-columns:43px minmax(0,1fr) auto}
  .tx-card .tx-hash{grid-column:2/4}
}
@media(max-width:580px){
  .asset-hero{padding:17px;min-height:470px}
  .asset-identity .asset-logo-wrap{width:61px;height:61px}
  .asset-identity .asset-logo,.asset-identity .asset-logo-fallback{width:57px;height:57px}
  .asset-identity h1{font-size:26px}
  .asset-big-balance{font-size:36px}
  .asset-fiat{font-size:15px}
  .asset-actions{display:grid;grid-template-columns:1fr 1fr}.asset-actions .btn{width:100%}
  .live-chart{height:210px}
  .tx-card{grid-template-columns:41px minmax(0,1fr)}
  .tx-card .tx-amount{grid-column:2;text-align:left}
  .tx-card .tx-hash{grid-column:2}
  .tx-card .tx-view{grid-column:1/3;width:100%}
}


/* ============================================
   VaultFi v56 — richer contrast / visual depth
   ============================================ */
:root{
  --bg:#eef3f9;
  --ink:#081534;
  --ink2:#1c2a4d;
  --muted:#53617d;
  --muted2:#77839d;
  --line:rgba(48,64,117,.16);
  --glass:rgba(247,250,255,.91);
  --glass2:rgba(251,252,255,.96);
  --shadow:0 22px 58px rgba(42,53,101,.15);
  --shadow2:0 12px 30px rgba(42,53,101,.10);
}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 7%,rgba(50,203,225,.18),transparent 27%),
    radial-gradient(circle at 86% 10%,rgba(130,91,238,.16),transparent 30%),
    radial-gradient(circle at 76% 78%,rgba(224,92,184,.11),transparent 30%),
    linear-gradient(145deg,#edf4f9 0%,#f0f1f8 50%,#f6eef4 100%);
}
body:before{
  opacity:.72;
  background-image:radial-gradient(rgba(55,70,123,.16) .75px,transparent .75px);
}
.vf-sidebar{
  border-color:rgba(52,67,119,.16);
  background:rgba(247,250,255,.96);
  box-shadow:0 24px 62px rgba(41,52,99,.16);
}
.vf-nav a{color:#32415f}
.vf-nav a:hover{background:rgba(106,87,225,.10)}
.vf-nav-label{color:#74809a}
.vf-brand-sub{color:#56637e}
.vf-topbar{
  border-color:rgba(52,67,119,.15);
  background:rgba(249,251,255,.95);
  box-shadow:0 15px 38px rgba(42,53,101,.13);
}
.vf-search,
.vf-currency,
.vf-icon-btn,
.vf-profile-chip{
  border-color:rgba(53,68,120,.15);
  background:#f9fbff;
  box-shadow:0 7px 18px rgba(43,54,101,.06);
}
.vf-search input{color:#182544}
.vf-search input::placeholder{color:#78849d}
.vf-sub,
.section-title p,
.asset-main small,
.asset-stat small,
.fee-card small,
.notice,
.activity-item small{
  color:#53617d;
}
.glass{
  border-color:rgba(55,69,122,.16);
  background:linear-gradient(145deg,rgba(251,252,255,.97),rgba(237,241,248,.94));
  box-shadow:0 22px 58px rgba(43,54,101,.14);
}
.vf-card,
.form-card{
  box-shadow:0 21px 55px rgba(43,54,101,.13);
}
.hero{
  border:1px solid rgba(55,69,122,.15);
  background:linear-gradient(145deg,#fbfcff,#edf1f8);
}
.action-card{
  box-shadow:0 18px 40px rgba(71,72,153,.22);
}
.metric{
  border-color:rgba(55,69,122,.14);
  background:linear-gradient(145deg,#fbfcff,#eef2f8);
  box-shadow:0 12px 28px rgba(44,55,102,.10);
}
.asset-card{
  border-color:rgba(56,70,122,.13);
  background:linear-gradient(145deg,#fafcff,#f0f3f8);
  box-shadow:0 7px 18px rgba(43,54,101,.055);
}
.asset-card:hover{
  border-color:rgba(94,75,210,.20);
  box-shadow:0 13px 30px rgba(48,58,112,.11);
}
.price-strip,
.notice{
  border:1px solid rgba(61,75,127,.10);
  background:linear-gradient(145deg,#eef9fb,#f2eff9);
}
.form-card{
  border:1px solid rgba(55,69,122,.16);
}
.control{
  border-color:rgba(55,70,122,.16);
  background:#f9fbff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.control input,
.control select{
  color:#14213f;
}
.amount-box{
  border-color:rgba(55,70,122,.16);
  background:linear-gradient(145deg,#fbfcff,#edf2f8);
  box-shadow:0 10px 26px rgba(44,55,103,.07);
}
.fee-card{
  border-color:rgba(55,70,122,.14);
  background:linear-gradient(145deg,#fafcff,#f0f3f8);
  box-shadow:0 7px 19px rgba(43,54,101,.055);
}
.radar{
  border:1px solid rgba(57,71,124,.12);
  background:
    radial-gradient(circle at 50% 50%,rgba(39,215,198,.17) 0 7%,transparent 8% 19%,rgba(70,162,238,.11) 20% 21%,transparent 22% 36%,rgba(126,105,242,.10) 37% 38%,transparent 39%),
    linear-gradient(145deg,#f7fcff,#eff1f8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 13px 30px rgba(44,55,102,.08);
}
.empty-state{
  color:#596682;
  border-color:rgba(55,70,122,.16);
  background:linear-gradient(145deg,rgba(248,250,254,.9),rgba(238,242,248,.8));
}
.market-ticker{
  border-color:rgba(55,69,122,.15);
  background:rgba(248,250,255,.96);
  box-shadow:0 13px 30px rgba(42,53,100,.13);
}
.vf-mobile-nav{
  border-color:rgba(55,69,122,.16);
  background:rgba(248,250,255,.97);
  box-shadow:0 17px 42px rgba(42,53,101,.18);
}
.convert-live-balance{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:7px;
  color:#43516f;
  font-size:11px;
  font-weight:800;
}
.convert-live-balance b{color:#111e3d}
.convert-live-balance i{
  width:6px;height:6px;border-radius:50%;
  background:#2ccda3;
  box-shadow:0 0 0 4px rgba(44,205,163,.10);
}
.convert-select-wrap{
  min-width:255px;
}
.convert-rate{
  font-variant-numeric:tabular-nums;
}
@media(max-width:930px){
  .vf-topbar{background:rgba(249,251,255,.97)}
  .vf-title{color:#091536}
}
@media(max-width:580px){
  .convert-select-wrap{min-width:100%;width:100%}
  .convert-select-wrap select{font-size:12px}
}


/* VaultFi v58 fee quote presentation */
.vf-fee-live{
  display:flex;
  align-items:center;
  gap:7px;
  color:#0c9b72;
  font-weight:900;
  font-size:10px;
}
.vf-fee-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2dcc9f;
  box-shadow:0 0 0 4px rgba(45,204,159,.10);
}
.vf-fee-breakdown{
  display:grid;
  gap:8px;
  margin-top:8px;
}
.vf-fee-row{
  min-height:68px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:13px 15px;
  border:1px solid rgba(55,70,122,.14);
  border-radius:18px;
  background:linear-gradient(145deg,#fafcff,#eef2f8);
  box-shadow:0 7px 19px rgba(43,54,101,.055);
}
.vf-fee-row strong,
.vf-fee-row small{
  display:block;
}
.vf-fee-row strong{
  font-size:12px;
  color:#0c1939;
}
.vf-fee-row small{
  margin-top:3px;
  color:#586581;
  font-size:10px;
  line-height:1.45;
}
.vf-fee-value{
  min-width:130px;
  text-align:right;
}
.vf-fee-value strong{
  font-size:13px;
}
.vf-fee-value small{
  font-size:9px;
}
.vf-quote-status{
  margin-top:10px;
  padding:11px 13px;
  border:1px solid rgba(52,160,129,.14);
  border-radius:15px;
  background:linear-gradient(145deg,#eefaf7,#f1f4fa);
  color:#35425f;
  font-size:10px;
  line-height:1.55;
}
.vf-quote-status b{color:#0b8d68}
.vf-quote-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
}
@media(max-width:620px){
  .vf-fee-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .vf-fee-value{
    min-width:0;
    text-align:left;
  }
}


/* VaultFi v60 — Futures trading workstation */
.trade-shell{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.72fr);gap:14px}
.trade-marketbar{display:grid;grid-template-columns:minmax(220px,1.2fr) repeat(5,minmax(110px,.7fr));gap:9px;align-items:stretch}
.trade-stat{padding:13px 14px;border:1px solid rgba(55,70,122,.14);border-radius:18px;background:linear-gradient(145deg,#fbfcff,#edf2f8);box-shadow:0 8px 20px rgba(43,54,101,.055)}
.trade-stat small,.trade-stat strong{display:block}.trade-stat small{color:#68738d;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.trade-stat strong{margin-top:5px;font-size:14px;color:#0b1838;font-variant-numeric:tabular-nums}
.trade-symbol{display:flex;align-items:center;gap:10px}.trade-symbol select{width:100%;border:0;background:transparent;color:#0c1938;font-size:18px;font-weight:950;outline:none}
.trade-live{display:inline-flex;align-items:center;gap:7px;color:#0a9b71;font-size:10px;font-weight:900}.trade-live i{width:7px;height:7px;border-radius:50%;background:#2dcc9f;box-shadow:0 0 0 4px rgba(45,204,159,.10)}
.trade-chart{position:relative;min-height:430px;padding:14px;border:1px solid rgba(55,70,122,.14);border-radius:24px;background:linear-gradient(145deg,#fbfcff,#eef2f8);box-shadow:0 18px 45px rgba(43,54,101,.11);overflow:hidden}
.trade-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.trade-chart-head h2{margin:0;font-size:16px}.trade-chart-head small{color:#65718b}
.trade-timeframes{display:flex;gap:5px;flex-wrap:wrap}.trade-timeframes button{min-width:36px;height:30px;border:1px solid rgba(55,70,122,.13);border-radius:10px;background:#f7f9fd;color:#52607c;font-size:9px;font-weight:900}.trade-timeframes button.active{color:#fff;border-color:transparent;background:linear-gradient(90deg,#4acfe3,#678cf5,#9065ef)}
.trade-canvas-wrap{height:350px;position:relative}.trade-canvas{width:100%;height:100%;display:block}.trade-chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#69758f;font-size:12px}
.order-panel{padding:16px;border:1px solid rgba(55,70,122,.15);border-radius:24px;background:linear-gradient(145deg,#fbfcff,#edf2f8);box-shadow:0 18px 45px rgba(43,54,101,.11)}
.order-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}.order-tabs button{height:42px;border:1px solid rgba(55,70,122,.13);border-radius:13px;background:#f7f9fd;color:#4f5d79;font-weight:900}.order-tabs button.active{background:linear-gradient(90deg,#45d2d9,#6b8cf5,#9165ef);color:#fff;border-color:transparent}
.trade-field{margin-top:11px}.trade-field label{display:flex;justify-content:space-between;gap:8px;color:#65718b;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.trade-field .control{margin-top:6px}.trade-field input,.trade-field select{font-size:13px}
.leverage-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:7px}.leverage-row button{height:33px;border:1px solid rgba(55,70,122,.13);border-radius:10px;background:#f7f9fd;color:#53617c;font-size:9px;font-weight:900}.leverage-row button.active{background:#162340;color:#fff}
.quote-card{margin-top:13px;padding:13px;border:1px solid rgba(55,70,122,.13);border-radius:17px;background:linear-gradient(145deg,#f9fbff,#edf2f8)}
.quote-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(55,70,122,.08);font-size:10px}.quote-row:last-child{border-bottom:0}.quote-row span{color:#68748e}.quote-row strong{color:#0b1838;font-variant-numeric:tabular-nums}
.trade-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.trade-buy,.trade-sell{height:48px;border:0;border-radius:15px;color:#fff;font-size:12px;font-weight:950;cursor:pointer}.trade-buy{background:linear-gradient(90deg,#2bc89b,#39bdb2)}.trade-sell{background:linear-gradient(90deg,#ef6f8a,#d95d9e)}.trade-buy:disabled,.trade-sell:disabled{opacity:.45;cursor:not-allowed}
.trade-note{margin-top:10px;padding:10px 11px;border-radius:13px;background:#f1f4fa;color:#5c6882;font-size:9px;line-height:1.5}
.trade-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.trade-table{overflow:auto}.trade-table table{width:100%;border-collapse:collapse;min-width:620px}.trade-table th,.trade-table td{padding:11px 9px;border-bottom:1px solid rgba(55,70,122,.08);text-align:left;font-size:9px}.trade-table th{color:#6b7790;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.trade-table td{color:#243150}.trade-empty{padding:32px 16px;text-align:center;color:#68748e;font-size:11px}
.spread-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(105,87,225,.09);color:#6657df;font-size:9px;font-weight:900}
@media(max-width:1180px){.trade-marketbar{grid-template-columns:repeat(3,1fr)}.trade-shell{grid-template-columns:1fr}.order-panel{position:relative}.trade-bottom{grid-template-columns:1fr}}
@media(max-width:680px){.trade-marketbar{grid-template-columns:1fr 1fr}.trade-marketbar .trade-stat:first-child{grid-column:1/-1}.trade-chart{min-height:350px}.trade-canvas-wrap{height:280px}.trade-actions{grid-template-columns:1fr}.trade-bottom{grid-template-columns:1fr}.order-panel{padding:13px}.trade-stat strong{font-size:13px}}