:root{
  --bg:#F6F6F3;
  --panel:#FFFFFF;
  --ink:#0B0D10;
  --ink-2:#1B1F24;
  --muted:#6B7280;
  --muted-2:#9AA1AB;
  --line:#ECECE8;
  --line-2:#E4E4DF;
  --chip:#F1F1EC;
  --accent:oklch(0.52 0.18 268);
  --accent-soft:oklch(0.96 0.03 268);
  --accent-ink:oklch(0.38 0.16 268);
  --up:oklch(0.64 0.14 150);
  --up-soft:oklch(0.95 0.05 150);
  --down:oklch(0.60 0.19 25);
  --down-soft:oklch(0.96 0.04 25);
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 0 rgba(15,17,21,.02), 0 1px 2px rgba(15,17,21,.04);
  --shadow-lg:0 1px 0 rgba(15,17,21,.03), 0 10px 24px -12px rgba(15,17,21,.15);
  --shadow-float:0 1px 0 rgba(15,17,21,.03), 0 22px 36px -24px rgba(15,17,21,.24);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --dur-press:140ms;
  --dur-fast:180ms;
  --dur-med:260ms;
  --dur-slow:620ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
  overflow-x:hidden;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:0;height:0}

@keyframes fadeRise{
  from{
    opacity:0;
    transform:translate3d(0,18px,0) scale(.985);
    filter:blur(10px);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

@keyframes fadeSlideRight{
  from{
    opacity:0;
    transform:translate3d(-14px,0,0);
    filter:blur(8px);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}

@keyframes heroFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-16px,20px,0) scale(1.07)}
}

@keyframes heroGridDrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-18px,-12px,0)}
}

@keyframes heroPulse{
  0%,100%{opacity:.2;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.38;transform:translate3d(-10px,12px,0) scale(1.08)}
}

.c-up{color:var(--up)}
.c-down{color:var(--down)}
.t-right{text-align:right}

/* =================== SHELL =================== */
.shell{display:flex;min-height:100vh}

/* =================== SIDEBAR =================== */
.sidebar{
  width:244px;flex:0 0 244px;
  padding:24px 18px 22px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar__brand{
  display:flex;align-items:center;gap:10px;padding:4px 8px 24px;
  opacity:0;animation:fadeSlideRight var(--dur-slow) var(--ease-out) 40ms forwards;
}
.sidebar__mark{
  width:28px;height:28px;border-radius:8px;background:var(--ink);
  display:grid;place-items:center;color:#fff;
}
.sidebar__name{font-weight:600;letter-spacing:-.3px;font-size:15px}
.sidebar__tag{
  font-size:9px;font-weight:500;letter-spacing:.5px;
  padding:2px 5px;background:var(--chip);border-radius:4px;
  margin-left:4px;color:var(--muted);vertical-align:middle;
}
.sidebar__section{
  font-size:10.5px;font-weight:600;letter-spacing:.8px;
  color:var(--muted-2);padding:0 10px 8px;
  opacity:0;animation:fadeSlideRight var(--dur-slow) var(--ease-out) 110ms forwards;
}
.sidebar__section + .sidebar__nav ~ .sidebar__section{padding-top:22px}

.sidebar__nav{
  display:flex;flex-direction:column;gap:2px;
  opacity:0;animation:fadeSlideRight var(--dur-slow) var(--ease-out) 160ms forwards;
}
.sidebar__section + .sidebar__nav + .sidebar__section + .sidebar__nav{
  animation-delay:220ms;
}
.navitem{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;text-align:left;
  font-size:13.5px;font-weight:450;color:var(--ink-2);
  background:transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.navitem:hover{background:var(--chip)}
.navitem.is-active{background:var(--ink);color:#fff;font-weight:500}
.navitem.is-active:hover{background:var(--ink)}
.navitem__icon{display:inline-flex}
.navitem__icon svg{width:18px;height:18px}
.navitem__badge{
  margin-left:auto;font-size:10.5px;padding:1px 7px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);
}
.navitem.is-active .navitem__badge{background:rgba(255,255,255,.14);color:#fff}

.sidebar__profile{
  margin-top:auto;padding:14px;border-radius:12px;
  background:var(--chip);border:1px solid var(--line-2);
  display:flex;align-items:center;gap:10px;
  opacity:0;animation:fadeSlideRight var(--dur-slow) var(--ease-out) 280ms forwards;
}
.sidebar__profile-meta{line-height:1.2;display:flex;flex-direction:column}
.sidebar__profile-name{font-size:13px;font-weight:500}
.sidebar__profile-role{font-size:11px;color:var(--muted)}
.sidebar__logout{
  margin-left:auto;color:var(--muted);display:inline-flex;
  transition:
    transform var(--dur-fast) var(--ease-out),
    color var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}

.avatar{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  font-weight:600;font-size:13px;color:#fff;
}
.avatar--dark{background:var(--ink)}
.avatar--accent{background:var(--accent);width:28px;height:28px;font-size:12px}

/* =================== MAIN =================== */
.main{flex:1;min-width:0}

/* =================== HEADER =================== */
.header{
  display:flex;align-items:center;gap:20px;
  padding:20px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(246,246,243,.85);
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
}
.header--search-open{z-index:22}
.header__title-group{
  display:flex;flex-direction:column;gap:4px;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 70ms forwards;
}
.crumb{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.crumb__sep{color:var(--muted-2)}
.crumb__current{color:var(--ink-2)}
.header__title-row{display:flex;align-items:baseline;gap:10px}
.header__title{margin:0;font-size:22px;font-weight:600;letter-spacing:-.5px}
.header__date{font-size:12px;color:var(--muted)}

.searchbar{
  margin-left:auto;width:340px;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--line-2);
  border-radius:10px;background:#fff;
  color:var(--muted);
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 120ms forwards;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease;
}
.searchbar input{
  flex:1;border:0;outline:0;font-size:13px;background:transparent;color:var(--ink);
  font-family:inherit;
}
.searchbar kbd{
  font-size:10.5px;color:var(--muted);
  border:1px solid var(--line-2);padding:1px 5px;border-radius:4px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
}

.header__actions{
  display:flex;align-items:center;gap:6px;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 170ms forwards;
}
.mobile-search{display:none}
.iconbtn{
  position:relative;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--line-2);background:#fff;
  display:grid;place-items:center;color:var(--ink-2);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.iconbtn:hover{background:var(--chip)}
.iconbtn__badge{
  position:absolute;top:6px;right:6px;min-width:14px;height:14px;padding:0 3px;
  background:var(--down);color:#fff;border-radius:999px;
  font-size:9px;font-weight:600;display:grid;place-items:center;
  border:2px solid #fff;
}
.iconbtn__badge[hidden]{display:none}

.cta{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:10px;
  background:var(--ink);color:#fff;
  font-size:13px;font-weight:500;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 220ms forwards;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.cta:hover{background:#000}

.userchip{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px 6px 6px;border:1px solid var(--line-2);
  border-radius:999px;background:#fff;font-size:13px;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 270ms forwards;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.userchip:hover{background:var(--chip)}

/* =================== CONTENT =================== */
.content{padding:28px 32px 40px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-bottom:20px}
.grid:last-child{margin-bottom:0}
.content > .grid:nth-of-type(1){--grid-delay:120ms}
.content > .grid:nth-of-type(2){--grid-delay:210ms}
.content > .grid:nth-of-type(3){--grid-delay:300ms}
.content > .grid:nth-of-type(4){--grid-delay:390ms}
.content > .grid:nth-of-type(5){--grid-delay:480ms}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  grid-column:span 12;
  min-width:0;
  opacity:0;
  animation:fadeRise var(--dur-slow) var(--ease-out) forwards;
  will-change:transform,opacity,filter;
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}
.grid > .card:nth-child(1){animation-delay:calc(var(--grid-delay, 120ms) + 0ms)}
.grid > .card:nth-child(2){animation-delay:calc(var(--grid-delay, 120ms) + 55ms)}
.grid > .card:nth-child(3){animation-delay:calc(var(--grid-delay, 120ms) + 110ms)}
.grid > .card:nth-child(4){animation-delay:calc(var(--grid-delay, 120ms) + 165ms)}
.card--span3{grid-column:span 3}
.card--span4{grid-column:span 4}
.card--span5{grid-column:span 5}
.card--span8{grid-column:span 8}

.card__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;gap:14px;
}
.card__title-group{display:flex;flex-direction:column;gap:2px;min-width:0}
.card__eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.8px;color:var(--muted-2)}
.card__title{font-size:14px;font-weight:600;letter-spacing:-.1px;color:var(--ink)}

.dotmenu{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;color:var(--muted);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
.dotmenu:hover{background:var(--chip)}

.textbtn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);
  transition:
    transform var(--dur-fast) var(--ease-out),
    color var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}
.textbtn:hover{color:var(--ink)}
.textbtn--muted{color:var(--muted);font-size:11.5px}

.chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:999px;font-size:11px;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.chip--up{background:var(--up-soft);color:var(--up)}
.chip--down{background:var(--down-soft);color:var(--down)}
.chip--up-on-dark{
  background:rgba(120,240,170,.18);color:oklch(0.90 0.15 150);
}

/* =================== HERO =================== */
.card--hero{
  grid-column:span 8;
  padding:0;overflow:hidden;position:relative;
  background:linear-gradient(135deg, oklch(0.28 0.10 268) 0%, oklch(0.38 0.17 276) 55%, oklch(0.55 0.19 290) 100%);
  color:#fff;border:1px solid oklch(0.30 0.10 268);
  box-shadow:var(--shadow-lg);
}
.card--hero::after{
  content:"";
  position:absolute;
  inset:auto -8% -34% 28%;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.24), transparent 62%);
  filter:blur(26px);
  opacity:.24;
  pointer-events:none;
  animation:heroPulse 11s var(--ease-in-out) infinite;
}
.hero__grid{
  position:absolute;inset:0;width:100%;height:100%;opacity:.08;pointer-events:none;
  animation:heroGridDrift 18s linear infinite alternate;
}
.hero__glow{
  position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, oklch(0.80 0.15 290 / 0.35), transparent 60%);
  pointer-events:none;
  animation:heroFloat 10s var(--ease-in-out) infinite alternate;
  will-change:transform,opacity;
}
.hero__inner{padding:26px 28px;position:relative}
.hero__top{display:flex;align-items:center;justify-content:space-between}
.hero__eyebrow{
  font-size:12px;opacity:.75;letter-spacing:.2px;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 220ms forwards;
}
.hero__tools{
  display:flex;gap:6px;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 260ms forwards;
}
.pill{
  padding:5px 10px;border-radius:999px;font-size:11px;
  border:1px solid var(--line-2);background:#fff;color:var(--muted);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.pill:hover{background:var(--chip);color:var(--ink)}
.pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill--ghost{
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.pill--ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.pill--icon{padding:5px;display:inline-flex;align-items:center;justify-content:center}

.hero__balance{
  display:flex;align-items:flex-end;gap:14px;margin-top:10px;flex-wrap:wrap;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 310ms forwards;
}
.hero__amount{
  font-size:52px;font-weight:600;letter-spacing:-1.6px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero__decimals{opacity:.55;font-weight:500}
.hero__delta{padding-bottom:8px;display:flex;align-items:center;gap:8px}
.hero__delta-sub{font-size:11px;opacity:.55}

.hero__stats{
  display:flex;gap:36px;margin-top:24px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  align-items:center;flex-wrap:wrap;
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 380ms forwards;
}
.hero__stat{display:flex;flex-direction:column;gap:4px}
.hero__stat-k{font-size:11px;opacity:.6;letter-spacing:.2px}
.hero__stat-v{font-size:16px;font-weight:500;letter-spacing:-.2px;color:#fff}
.hero__stat-v--accent{color:oklch(0.92 0.12 150)}
.hero__spacer{flex:1;min-width:0}
.hero__actions{display:flex;gap:8px;flex-wrap:wrap}
.quickbtn{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.16);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.quickbtn:hover{background:rgba(255,255,255,.16)}
.quickbtn--primary{background:#fff;color:var(--ink);border-color:#fff}
.quickbtn--primary:hover{background:#f2f2ee}

/* =================== MARKET =================== */
.market{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.market__tile{
  padding:12px 14px;border-radius:10px;
  background:var(--chip);border:1px solid var(--line-2);
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-med) var(--ease-out),
    background-color var(--dur-fast) ease;
}
.market__k{font-size:11px;color:var(--muted)}
.market__v-row{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.market__v{font-size:18px;font-weight:600;letter-spacing:-.5px}
.market__sub{font-size:11px;color:var(--up)}
.market__delta{margin-top:6px}

/* =================== STAT CARDS =================== */
.stat--clickable{
  cursor:pointer;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-med) var(--ease-out);
}
.stat--clickable:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.stat__top{display:flex;align-items:center;justify-content:space-between}
.stat__label{font-size:12px;color:var(--muted)}
.stat__body{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.stat__value{font-size:26px;font-weight:600;letter-spacing:-.8px}
.stat__sub{font-size:11px;color:var(--muted)}
.stat__spark{margin-top:10px}

/* =================== PERFORMANCE =================== */
.perf__tools{display:flex;align-items:center;gap:12px}
.legend{
  display:flex;align-items:center;gap:14px;
  padding-right:14px;border-right:1px solid var(--line);
}
.legend__item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.legend__swatch{width:14px;height:2px;background:var(--accent)}
.legend__swatch--dashed{
  background:transparent;
  background-image:linear-gradient(to right,var(--muted-2) 50%, transparent 50%);
  background-size:4px 2px;
  height:2px;
}
.segmented{
  display:inline-flex;padding:3px;background:var(--chip);
  border-radius:10px;border:1px solid var(--line-2);
}
.segmented--sm{border-radius:8px}
.segmented__btn{
  padding:5px 11px;border-radius:7px;font-size:11.5px;font-weight:500;
  color:var(--muted);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.segmented--sm .segmented__btn{padding:4px 10px;font-size:11px;border-radius:6px}
.segmented__btn.is-active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

.perf__summary{display:flex;align-items:flex-end;gap:14px;margin:-4px 0 4px;flex-wrap:wrap}
.perf__value{font-size:34px;font-weight:600;letter-spacing:-1.2px}
.perf__meta{display:flex;align-items:center;gap:8px;padding-bottom:8px}
.perf__sub{font-size:11px;color:var(--muted)}
.perf__chart{width:100%}
.perf__chart svg{display:block;width:100%;cursor:crosshair}

/* =================== ALLOCATION =================== */
.alloc{display:flex;align-items:center;gap:24px;padding:8px 0;flex-wrap:wrap}
.alloc__donut{position:relative;flex:0 0 auto}
.alloc__donut .donut-center{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;
}
.alloc__donut .donut-center-k{font-size:11px;color:var(--muted)}
.alloc__donut .donut-center-v{font-size:20px;font-weight:600;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.alloc__list{flex:1;min-width:180px;display:flex;flex-direction:column;gap:10px}
.alloc__row{
  display:flex;align-items:center;gap:8px;font-size:12px;
  transition:
    transform var(--dur-fast) var(--ease-out),
    color var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}
.alloc__swatch{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.alloc__label{font-weight:500}
.alloc__value{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}

/* =================== WATCHLIST =================== */
.wl__head, .wl__row{
  display:grid;
  grid-template-columns:1.4fr 1fr .8fr 1fr;
  align-items:center;
}
.wl__head{
  padding:6px 4px;font-size:10.5px;font-weight:600;letter-spacing:.6px;
  color:var(--muted-2);border-bottom:1px solid var(--line);
}
.wl__head .t-right, .wl__head > div:nth-child(n+2){text-align:right}
.wl__row{
  padding:12px 4px;border-bottom:1px solid var(--line);
  cursor:pointer;border-radius:8px;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}
.wl__row:last-child{border-bottom:0}
.wl__row:hover{background:color-mix(in oklch, var(--chip) 50%, transparent)}
.wl__row.is-selected{background:var(--chip)}
.wl__asset{display:flex;align-items:center;gap:10px}
.wl__asset-name{font-size:13px;font-weight:500}
.wl__asset-sym{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.wl__price{text-align:right;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.wl__change{text-align:right}
.wl__spark{display:flex;justify-content:flex-end}

.token{
  border-radius:999px;display:grid;place-items:center;
  font-weight:700;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;
}

/* =================== MOVERS =================== */
.movers{display:flex;flex-direction:column;gap:10px}
.mover{
  display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:8px;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease;
}
.mover--clickable{cursor:pointer}
.mover--clickable:hover{background:color-mix(in oklch, var(--chip) 50%, transparent)}
.mover__meta{line-height:1.2}
.mover__name{font-size:12.5px;font-weight:500}
.mover__price{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.mover__change{margin-left:auto}

/* =================== NEWS =================== */
.news{display:flex;flex-direction:column;gap:14px}
.news__item{
  display:flex;gap:12px;padding:4px 0;
  transition:
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) ease;
}
.news__thumb{
  width:44px;height:44px;border-radius:8px;background:var(--chip);
  flex:0 0 44px;display:grid;place-items:center;border:1px solid var(--line-2);
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}
.news__thumb span{width:24px;height:6px;background:var(--ink);border-radius:2px;opacity:.8}
.news__body{flex:1;min-width:0}
.news__tag{font-size:10px;font-weight:600;letter-spacing:.8px;color:var(--accent-ink)}
.news__title{font-size:13px;font-weight:500;line-height:1.35;margin-top:3px;color:var(--ink-2)}
.news__time{font-size:11px;color:var(--muted);margin-top:3px}

/* =================== TRANSACTIONS =================== */
.tx__filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tx__head, .tx__row{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  align-items:center;
}
.tx__head{
  padding:8px 4px;font-size:10.5px;font-weight:600;letter-spacing:.6px;
  color:var(--muted-2);border-bottom:1px solid var(--line);
}
.tx__head > div:last-child{text-align:right}
.tx__row{
  padding:14px 4px;border-bottom:1px solid var(--line);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}
.tx__row:last-child{border-bottom:0}
.tx__asset{display:flex;align-items:center;gap:10px}
.tx__asset-name{font-size:13px;font-weight:500}
.tx__asset-time{font-size:11px;color:var(--muted)}
.tx__type{
  display:inline-block;padding:3px 8px;border-radius:6px;
  font-size:11px;font-weight:500;
}
.tx__type--buy{background:var(--up-soft);color:var(--up)}
.tx__type--sell, .tx__type--withdraw{background:var(--down-soft);color:var(--down)}
.tx__type--stake, .tx__type--receive{background:var(--accent-soft);color:var(--accent-ink)}
.tx__amount{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.tx__amount small{color:var(--muted);font-weight:500}
.tx__value{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.tx__status{text-align:right}
.tx__status-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;
}
.tx__status-chip--done{background:var(--chip);color:var(--ink-2)}
.tx__status-chip--pending{background:var(--accent-soft);color:var(--accent-ink)}
.tx__status-dot{width:6px;height:6px;border-radius:999px}
.tx__status-chip--done .tx__status-dot{background:var(--up)}
.tx__status-chip--pending .tx__status-dot{background:var(--accent)}

/* =================== INSIGHTS =================== */
.insights{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.mini{
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}
.mini__k{font-size:11px;color:var(--muted)}
.mini__v{font-size:18px;font-weight:600;letter-spacing:-.5px;margin-top:4px}
.mini__sub{font-size:11px;color:var(--muted-2);margin-top:2px}
.insights__foot{border-top:1px solid var(--line);padding-top:14px}
.insights__label{font-size:12px;color:var(--muted);margin-bottom:8px}

/* =================== FOOT =================== */
.foot{
  margin-top:40px;padding:20px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;color:var(--muted);
  opacity:0;animation:fadeRise var(--dur-slow) var(--ease-out) 620ms forwards;
}
.foot__links{display:flex;gap:20px}
.foot__links a:hover{color:var(--ink)}

/* =================== EMPTY STATE =================== */
.empty{padding:80px 32px;display:grid;place-items:center}
.empty__box{text-align:center;max-width:420px}
.empty__icon{
  width:48px;height:48px;border-radius:12px;background:var(--chip);
  display:grid;place-items:center;margin:0 auto 18px;
  border:1px solid var(--line-2);color:var(--muted);
}
.empty__title{margin:0;font-size:22px;font-weight:600;letter-spacing:-.4px}
.empty__copy{color:var(--muted);font-size:13px;line-height:1.5;margin-top:8px}
.btn-dark{
  margin-top:18px;padding:9px 16px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn-dark:hover{background:#000}

/* =================== TOAST =================== */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  padding:10px 16px;background:var(--ink);color:#fff;
  border-radius:10px;font-size:13px;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:10px;z-index:50;
  animation:toastIn 320ms var(--ease-out);
}
.toast[hidden]{display:none}
.toast__dot{width:6px;height:6px;border-radius:999px;background:var(--up)}
@keyframes toastIn{
  from{opacity:0;transform:translate(-50%,10px) scale(.96);filter:blur(8px)}
  to{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}
}

@media (hover: hover) and (pointer: fine){
  .card:not(.card--hero):hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-float);
    border-color:var(--line-2);
  }
  .card--hero:hover{
    transform:translateY(-3px);
    box-shadow:0 1px 0 rgba(15,17,21,.03), 0 18px 32px -18px rgba(51,44,120,.45);
  }
  .card--hero:hover .hero__glow{opacity:.9}
  .market__tile:hover{
    transform:translateY(-3px);
    border-color:color-mix(in oklch, var(--accent) 14%, var(--line-2));
    box-shadow:var(--shadow);
  }
  .iconbtn:hover,
  .cta:hover,
  .userchip:hover,
  .quickbtn:hover,
  .pill:hover,
  .dotmenu:hover,
  .btn-dark:hover,
  .sidebar__close:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow);
  }
  .quickbtn--primary:hover{box-shadow:0 10px 18px -14px rgba(255,255,255,.8)}
  .searchbar:focus-within{
    transform:translateY(-1px);
    border-color:color-mix(in oklch, var(--accent) 26%, var(--line-2));
    box-shadow:0 10px 22px -18px rgba(84,74,160,.35), 0 0 0 4px color-mix(in oklch, var(--accent) 10%, white);
  }
  .navitem:hover{transform:translateX(3px)}
  .sidebar__logout:hover{transform:translateX(2px);color:var(--ink)}
  .segmented__btn:hover{transform:translateY(-1px)}
  .wl__row:hover,
  .mover--clickable:hover{transform:translateX(4px)}
  .tx__row:hover{
    transform:translateX(4px);
    background:color-mix(in oklch, var(--chip) 44%, transparent);
  }
  .news__item:hover{transform:translateX(4px)}
  .news__item:hover .news__thumb{
    transform:translateY(-1px);
    border-color:color-mix(in oklch, var(--accent) 16%, var(--line-2));
  }
  .mini:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
    border-color:var(--line-2);
  }
  .alloc__row:hover{transform:translateX(4px)}
}

.iconbtn:active,
.cta:active,
.userchip:active,
.pill:active,
.quickbtn:active,
.navitem:active,
.dotmenu:active,
.segmented__btn:active,
.btn-dark:active,
.sidebar__close:active,
.sidebar__logout:active{
  transform:scale(.97);
}

@media (prefers-reduced-motion: reduce){
  .sidebar__brand,
  .sidebar__section,
  .sidebar__nav,
  .sidebar__profile,
  .header__title-group,
  .searchbar,
  .header__actions,
  .cta,
  .userchip,
  .mobile-menu,
  .card,
  .hero__eyebrow,
  .hero__tools,
  .hero__balance,
  .hero__stats,
  .foot,
  .toast,
  .hero__grid,
  .hero__glow,
  .card--hero::after{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .card,
  .market__tile,
  .iconbtn,
  .cta,
  .userchip,
  .pill,
  .quickbtn,
  .navitem,
  .dotmenu,
  .segmented__btn,
  .wl__row,
  .mover,
  .news__item,
  .mini,
  .tx__row,
  .btn-dark,
  .searchbar,
  .alloc__row{
    transition-duration:1ms !important;
  }
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1200px){
  .card--hero{grid-column:span 12}
  .card--span8{grid-column:span 12}
  .card--span5{grid-column:span 12}
  .card--span4{grid-column:span 6}
  .card--span3{grid-column:span 6}
}
@media (max-width: 860px){
  .sidebar{display:none}
  .header{padding:16px 20px;flex-wrap:wrap;gap:12px}
  .searchbar{width:100%;order:3}
  .content{padding:20px 20px 32px}
  .card--span3, .card--span4, .card--span5, .card--span8{grid-column:span 12}
  .perf__tools{flex-direction:column;align-items:flex-start;gap:10px}
  .legend{border-right:0;padding-right:0}
  .market{grid-template-columns:1fr 1fr}
  .insights{grid-template-columns:1fr 1fr}
  .foot{flex-direction:column;gap:10px;text-align:center}
  .userchip > span:not(.avatar){display:none}
}

.mobile-menu,
.sidebar__close,
.sidebar-backdrop{display:none}
.header__title-group{min-width:0}
.stat__label-wrap{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.stat__label-wrap .token,
.perf__asset .token{flex:0 0 auto}
.perf__asset{
  display:inline-flex;align-items:center;gap:10px;min-width:0;
}
.token{overflow:hidden;flex:0 0 auto}
.token--img{background:transparent;border:0;padding:0}
.token--img img{
  display:block;width:100%;height:100%;object-fit:contain;
}
.tx__cell{min-width:0}
.tx__cell--status{text-align:right}
body.has-drawer{overflow:hidden}

@media (max-width: 860px){
  .shell{display:block;min-height:100dvh}
  .sidebar{
    display:flex;
    position:fixed;top:0;left:0;bottom:0;
    width:min(86vw,320px);height:100dvh;
    padding:20px 16px 18px;
    background:var(--bg);
    z-index:40;
    transform:translateX(-105%);
    transition:transform .32s var(--ease-drawer), box-shadow .32s var(--ease-drawer);
    box-shadow:none;
  }
  .sidebar.is-open{
    transform:translateX(0);
    box-shadow:var(--shadow-lg);
  }
  .sidebar__brand{padding-bottom:18px}
  .sidebar__close{
    width:30px;height:30px;border-radius:9px;
    margin-left:auto;border:1px solid var(--line-2);
    background:#fff;color:var(--muted);
    display:inline-flex;align-items:center;justify-content:center;
  }
  .sidebar__close:hover{background:var(--chip);color:var(--ink)}
  .sidebar-backdrop{
    position:fixed;inset:0;
    background:rgba(11,13,16,.36);z-index:30;
  }
  .sidebar-backdrop[hidden]{display:none}
  .sidebar-backdrop:not([hidden]){display:block}
  .mobile-menu{display:grid;flex:0 0 auto}
  .header{padding:16px 20px;gap:12px}
  .header__title-group{order:1;flex:1}
  .header__title-row{flex-wrap:wrap}
  .header__actions{order:2;margin-left:auto}
  .cta{order:3}
  .userchip{order:4}
  .searchbar{order:5;margin-left:0}
}

@media (max-width: 640px){
  .header{
    padding:12px 14px 14px;
    gap:10px;
    align-items:flex-start;
    row-gap:8px;
  }
  .content{padding:16px 14px 28px}
  .grid{gap:14px;margin-bottom:14px}
  .card{padding:18px}
  .crumb{display:none}
  .header__title-group{
    order:1;
    flex:1 1 auto;
    min-width:0;
  }
  .header__title-row{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .header__title{
    font-size:18px;
    line-height:.98;
    letter-spacing:-.65px;
    max-width:10ch;
  }
  .header__date{font-size:11px}
  .header__actions{
    order:2;
    margin-left:0;
    gap:8px;
  }
  .header__actions .iconbtn:not([data-bell]):not(.mobile-search){display:none}
  .mobile-search{display:grid}
  .userchip{display:none}
  .cta{
    order:3;
    margin-left:auto;
    flex:0 0 auto;
    justify-content:center;
    padding:0 14px;
    min-width:132px;
    height:40px;
  }
  .searchbar{
    position:absolute;
    left:14px;
    right:14px;
    top:calc(100% + 8px);
    width:auto;
    margin:0;
    padding:12px 14px;
    border-radius:14px;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px) scale(.985);
    animation:none;
    box-shadow:0 22px 44px -30px rgba(15,17,21,.24);
  }
  .searchbar input{min-width:0}
  .searchbar kbd{display:none}
  .header--search-open{
    padding-bottom:78px;
    box-shadow:0 12px 28px -24px rgba(15,17,21,.14);
  }
  .header--search-open .searchbar{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .header--search-open .mobile-search{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
    box-shadow:0 12px 22px -18px rgba(15,17,21,.34);
  }
  .hero__inner{padding:22px 20px}
  .hero__top{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .hero__amount{font-size:40px}
  .hero__stats{gap:18px}
  .hero__actions{width:100%}
  .quickbtn{flex:1;justify-content:center}
  .market{grid-template-columns:1fr}
  .insights{grid-template-columns:1fr}
  .perf__summary{gap:10px}
  .legend{gap:10px;flex-wrap:wrap}
  .segmented{flex-wrap:wrap}
  .wl__head,
  .tx__head{display:none}
  .wl__row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;
    padding:14px 0;
    border-radius:0;
  }
  .wl__asset{grid-column:1 / 2;min-width:0}
  .wl__price{grid-column:2 / 3;align-self:start}
  .wl__change{grid-column:1 / 2;justify-self:start}
  .wl__spark{grid-column:2 / 3;align-self:end}
  .wl__spark svg{width:84px;height:auto}
  .tx__row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px;
    padding:14px 0;
  }
  .tx__asset{grid-column:1 / -1}
  .tx__cell--type{grid-column:1 / 2;justify-self:start}
  .tx__cell--amount{grid-column:2 / 3;justify-self:end;text-align:right}
  .tx__cell--value{grid-column:1 / 2}
  .tx__cell--status{grid-column:2 / 3;justify-self:end}
  .tx__amount,
  .tx__value{font-size:12.5px}
  .alloc{gap:18px}
  .foot__links{flex-wrap:wrap;justify-content:center;gap:12px}
}

@media (max-width: 420px){
  .sidebar{width:min(90vw,320px)}
  .header{padding:12px 12px 14px}
  .header__title{font-size:17px;max-width:9ch}
  .header__actions{gap:6px}
  .cta{min-width:120px;padding:0 12px}
  .searchbar{left:12px;right:12px}
  .hero__amount{font-size:34px}
  .hero__stats{flex-direction:column;align-items:flex-start}
  .hero__actions{flex-direction:column}
  .quickbtn{width:100%}
  .wl__row{grid-template-columns:1fr}
  .wl__price,
  .wl__change,
  .wl__spark{grid-column:1 / -1}
  .wl__price,
  .wl__change{justify-self:start;text-align:left}
  .wl__spark{display:none}
  .tx__row{grid-template-columns:1fr}
  .tx__asset,
  .tx__cell--type,
  .tx__cell--amount,
  .tx__cell--value,
  .tx__cell--status{
    grid-column:1 / -1;
    justify-self:start;
    text-align:left;
  }
  .tx__status{text-align:left}
}