* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #070912;
  --card: rgba(17, 23, 43, .82);
  --card-light: rgba(255,255,255,.045);
  --border: rgba(255,255,255,.09);
  --purple: #7c6cff;
  --purple-light: #9b90ff;
  --text: #ffffff;
  --muted: #8d97b2;
  --muted-2: #66718d;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(124,108,255,.24),
      transparent 35%
    ),
    radial-gradient(
      circle at 100% 50%,
      rgba(76,88,180,.10),
      transparent 35%
    ),
    var(--bg);

  color: var(--text);
  padding: 28px 18px 40px;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}


/* ================= HERO ================= */

.hero {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 34px;
}

.brand {
  display: inline-block;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -.7px;
  margin-bottom: 18px;
}

.brand span {
  color: var(--purple-light);
}

.hero-badge {
  width: fit-content;
  margin: 0 auto 22px;

  display: flex;
  align-items: center;
  gap: 7px;

  padding: 7px 12px;

  border: 1px solid rgba(124,108,255,.2);
  border-radius: 999px;

  background: rgba(124,108,255,.08);

  color: #aaa4ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55e6a5;
  box-shadow: 0 0 12px rgba(85,230,165,.7);
}

.hero h1 {
  font-size: clamp(46px, 8vw, 78px);
  line-height: .98;
  letter-spacing: -4px;
  font-weight: 850;
}

.hero h1 span {
  color: var(--purple-light);
}

.hero p {
  max-width: 540px;
  margin: 19px auto 0;
  color: #99a3bd;
  font-size: 16px;
  line-height: 1.5;
}


/* ================= MAIN ================= */

main {
  width: 100%;
  max-width: 520px;
  margin: auto;
}


/* ================= NAV ================= */

.main-nav {
  display: flex;
  gap: 5px;

  padding: 5px;
  margin-bottom: 14px;

  border-radius: 17px;
  border: 1px solid var(--border);

  background: rgba(15,21,40,.82);
  backdrop-filter: blur(18px);
}

.nav-button {
  flex: 1;

  height: 45px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;

  border: 0;
  border-radius: 12px;

  background: transparent;
  color: #7f89a5;

  font-size: 14px;
  font-weight: 750;

  cursor: pointer;

  transition: .2s ease;
}

.nav-button span {
  font-size: 16px;
}

.nav-button:hover {
  color: white;
}

.nav-button.active {
  background: linear-gradient(
    135deg,
    #8173ff,
    #6e60ec
  );

  color: white;

  box-shadow:
    0 7px 25px rgba(124,108,255,.22);
}


/* ================= TABS ================= */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================= CARDS ================= */

.swap-card,
.portfolio-card {
  padding: 22px;

  border: 1px solid var(--border);
  border-radius: 27px;

  background:
    linear-gradient(
      145deg,
      rgba(24,31,56,.9),
      rgba(12,17,32,.9)
    );

  backdrop-filter: blur(22px);

  box-shadow:
    0 30px 90px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* ================= HEADINGS ================= */

.card-heading,
.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-heading {
  margin-bottom: 20px;
}

.eyebrow {
  display: block;

  color: #6f7a98;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;

  margin-bottom: 4px;
}

.card-heading h2,
.portfolio-header h2 {
  font-size: 25px;
  letter-spacing: -.7px;
}

.wallet-status {
  color: #9ca6c0;
  font-size: 12px;
}


/* ================= TOKEN BOX ================= */

.token-box {
  padding: 17px;

  border-radius: 20px;

  background:
    rgba(255,255,255,.045);

  border: 1px solid rgba(255,255,255,.065);

  transition: .2s ease;
}

.token-box:focus-within {
  border-color: rgba(124,108,255,.35);
  background: rgba(124,108,255,.045);
}

.box-label {
  display: flex;
  justify-content: space-between;

  color: #8993ae;
  font-size: 12px;

  margin-bottom: 10px;
}

.box-label b {
  color: white;
  font-weight: 650;
}

.token-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.token-row input {
  width: 100%;
  min-width: 0;

  background: transparent;
  border: none;
  outline: none;

  color: white;

  font-size: 31px;
  font-weight: 650;

  letter-spacing: -1px;
}

.token-row input::placeholder {
  color: #525d78;
}

.token-select {
  position: relative;
}

.token-button {
  min-width: 126px;
  height: 50px;

  padding: 0 13px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;

  background: rgba(255,255,255,.065);
  color: white;

  font-size: 14px;
  font-weight: 750;

  cursor: pointer;

  transition: .2s ease;
}

.token-button:hover {
  background: rgba(124,108,255,.16);
  border-color: rgba(124,108,255,.5);
}

.arrow {
  color: #8993ad;
  font-size: 17px;
}


/* ================= TOKEN MENU ================= */

.token-menu {
  position: absolute;
  z-index: 100;

  right: 0;
  top: calc(100% + 8px);

  width: 180px;

  display: none;

  padding: 7px;

  border-radius: 17px;

  background: #131a31;
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 25px 60px rgba(0,0,0,.55);
}

.token-menu.show {
  display: block;
  animation: menuIn .15s ease;
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.token-menu button {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px;

  border: none;
  border-radius: 11px;

  background: transparent;
  color: white;

  text-align: left;

  cursor: pointer;
}

.token-menu button:hover {
  background: rgba(124,108,255,.15);
}


/* ================= SWITCH ================= */

.switch-button {
  position: relative;
  z-index: 5;

  display: block;

  width: 43px;
  height: 43px;

  margin: -12px auto;

  border-radius: 50%;

  border: 3px solid #11182d;

  background:
    linear-gradient(
      145deg,
      #8b7fff,
      #6c5deb
    );

  color: white;

  font-size: 21px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 8px 25px rgba(0,0,0,.3);

  transition: .25s ease;
}

.switch-button:hover {
  transform: rotate(180deg);
}


/* ================= RATE ================= */

.rate-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 22px;
  padding: 13px 14px;

  border-radius: 15px;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);
}

.rate-label {
  display: block;

  color: #737e9a;
  font-size: 11px;

  margin-bottom: 4px;
}

.rate-box strong {
  display: block;

  color: white;

  font-size: 13px;
}

.live-pill,
.network-pill {
  padding: 5px 8px;

  border-radius: 999px;

  background: rgba(78,220,159,.08);

  border: 1px solid rgba(78,220,159,.14);

  color: #64dfab;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
}

.quote-status {
  min-height: 20px;

  margin: 11px 0;

  text-align: center;

  color: #8c85ff;
  font-size: 12px;
}


/* ================= BUTTONS ================= */

.connect-button,
.swap-button {
  width: 100%;
  height: 55px;

  border: none;
  border-radius: 16px;

  font-size: 15px;
  font-weight: 750;

  cursor: pointer;

  transition: .2s ease;
}

.connect-button {
  background: white;
  color: #0e1425;
}

.connect-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(255,255,255,.08);
}

.swap-button {
  margin-top: 9px;

  background:
    linear-gradient(
      135deg,
      #8173ff,
      #6c5deb
    );

  color: white;

  box-shadow:
    0 10px 30px rgba(124,108,255,.18);
}

.swap-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 14px 35px rgba(124,108,255,.28);
}

.swap-button:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}


/* ================================================= */
/* PORTFOLIO */
/* ================================================= */

.portfolio-card {
  overflow: hidden;
}

.portfolio-header {
  margin-bottom: 18px;
}

.refresh-button {
  width: 43px;
  height: 43px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.09);

  background: rgba(255,255,255,.05);

  color: white;

  font-size: 22px;

  cursor: pointer;

  transition: .25s ease;
}

.refresh-button:hover {
  background: rgba(124,108,255,.15);
  border-color: rgba(124,108,255,.35);
}


/* ================= TOTAL ================= */

.portfolio-total-card {
  position: relative;

  overflow: hidden;

  padding: 20px;

  border-radius: 21px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(124,108,255,.24),
      transparent 45%
    ),
    rgba(124,108,255,.08);

  border: 1px solid rgba(124,108,255,.15);
}

.total-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: #929cb7;
  font-size: 12px;
}

.portfolio-total {
  margin-top: 9px;

  font-size: 39px;
  font-weight: 800;

  letter-spacing: -1.8px;
}

.portfolio-status {
  margin-top: 8px;

  color: #7e89a5;
  font-size: 11px;
}


/* ================= WALLET ================= */

.portfolio-wallet {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 12px;
  padding: 13px 14px;

  border-radius: 17px;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
}

.wallet-icon {
  width: 37px;
  height: 37px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 11px;

  background: rgba(124,108,255,.12);

  color: #9b90ff;

  font-size: 18px;
}

.wallet-info {
  min-width: 0;
  flex: 1;
}

.wallet-info span,
.wallet-info strong {
  display: block;
}

.wallet-info span {
  color: #68738f;
  font-size: 10px;
  margin-bottom: 3px;
}

.wallet-info strong {
  color: #e9ebf5;

  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connection-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #4f5a72;
}

.connection-dot.connected {
  background: #57dfa6;
  box-shadow: 0 0 12px rgba(87,223,166,.55);
}


/* ================= SUMMARY ================= */

.portfolio-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 9px;

  margin-top: 9px;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 13px;

  border-radius: 17px;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);
}

.summary-icon {
  width: 33px;
  height: 33px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 10px;

  background: rgba(124,108,255,.09);

  color: #8e83ff;
  font-size: 15px;
}

.summary-card span,
.summary-card strong {
  display: block;
}

.summary-card span {
  color: #69748f;
  font-size: 10px;
  margin-bottom: 3px;
}

.summary-card strong {
  color: white;
  font-size: 14px;
}


/* ================= ASSETS HEADING ================= */

.assets-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin: 22px 2px 9px;

  color: #e8eaf3;

  font-size: 13px;
  font-weight: 700;
}

.assets-heading span:last-child {
  color: #68738f;
  font-size: 10px;
  font-weight: 500;
}


/* ================= ASSET ROW ================= */

.asset-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.asset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 13px;

  border-radius: 17px;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);

  transition: .2s ease;
}

.asset-row:hover {
  transform: translateY(-1px);

  background: rgba(124,108,255,.06);

  border-color:
    rgba(124,108,255,.16);
}

.asset-left {
  display: flex;
  align-items: center;
  gap: 11px;

  min-width: 0;
}

.asset-icon {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 13px;

  background: rgba(255,255,255,.07);

  font-size: 18px;
}

.sol-icon {
  background:
    linear-gradient(
      135deg,
      rgba(124,108,255,.2),
      rgba(78,68,190,.12)
    );

  color: #b0a8ff;
  font-size: 21px;
}

.asset-name {
  min-width: 0;
}

.asset-name strong,
.asset-name span {
  display: block;
}

.asset-name strong {
  color: #f1f2f7;
  font-size: 13px;
}

.asset-name span {
  margin-top: 3px;

  color: #68738f;
  font-size: 10px;
}

.asset-right {
  text-align: right;
  min-width: 100px;
}

.asset-right strong,
.asset-right span {
  display: block;
}

.asset-right strong {
  color: #f0f1f6;
  font-size: 13px;
}

.asset-right span {
  margin-top: 3px;

  color: #68738f;
  font-size: 10px;
}


/* ================= EMPTY ================= */

.portfolio-empty {
  padding: 24px 15px;
  margin-top: 10px;

  text-align: center;

  border-radius: 17px;

  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.08);
}

.portfolio-empty[hidden] {
  display: none;
}

.empty-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 10px;

  border-radius: 13px;

  background: rgba(124,108,255,.1);

  color: #8c82ff;

  font-size: 20px;
}

.portfolio-empty strong,
.portfolio-empty span {
  display: block;
}

.portfolio-empty strong {
  font-size: 13px;
}

.portfolio-empty span {
  margin-top: 5px;

  color: #69738c;
  font-size: 11px;
  line-height: 1.5;
}


/* ================= INFO ================= */

.info-section {
  display: grid;
  gap: 9px;

  margin-top: 14px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 13px;

  padding: 15px;

  border-radius: 18px;

  background: rgba(255,255,255,.025);

  border: 1px solid rgba(255,255,255,.055);
}

.info-icon {
  width: 39px;
  height: 39px;

  flex-shrink: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 12px;

  background: rgba(124,108,255,.08);

  font-size: 17px;
}

.info-card h3 {
  margin-bottom: 3px;

  font-size: 13px;
}

.info-card p {
  color: #6f7992;
  font-size: 11px;
  line-height: 1.45;
}


/* ================= FOOTER ================= */

footer {
  text-align: center;

  margin-top: 35px;

  color: #4f5870;

  font-size: 11px;
}


/* ================= LOADING ================= */

.refresh-button.loading {
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ================= MOBILE ================= */

@media (max-width: 520px) {

  body {
    padding: 20px 11px 35px;
  }

  .hero {
    margin-bottom: 25px;
  }

  .brand {
    margin-bottom: 17px;
  }

  .hero h1 {
    font-size: 46px;
    letter-spacing: -2.8px;
  }

  .hero p {
    font-size: 14px;
  }

  .swap-card,
  .portfolio-card {
    padding: 16px;
    border-radius: 23px;
  }

  .token-row input {
    font-size: 25px;
  }

  .token-button {
    min-width: 108px;
    padding: 0 9px;
  }

  .portfolio-total {
    font-size: 34px;
  }

  .asset-right {
    min-width: 90px;
  }

}

@media (max-width: 370px) {

  .token-row {
    gap: 6px;
  }

  .token-button {
    min-width: 98px;
    font-size: 12px;
  }

  .token-row input {
    font-size: 22px;
  }

}