*{box-sizing:border-box}body{margin:0;background:#071626;color:#eef6ff;font-family:Inter,system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:480px;min-height:100dvh;margin:auto;padding:23px 18px 70px;background:linear-gradient(160deg,#061c2f,#061321);border-left:1px solid #16354d;border-right:1px solid #16354d}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.logo{display:flex;gap:11px;align-items:center;font-size:17px;font-weight:700;line-height:1.1}.mark{font-size:52px;line-height:.7;background:linear-gradient(90deg,#7242fa,#098cfb);color:transparent;background-clip:text}.tag{border:1px solid #2c5a80;border-radius:20px;padding:6px 9px;font-size:9px;letter-spacing:.07em;color:#9dbde1}h1{font-size:24px;letter-spacing:-.7px;margin:0 0 5px}h2{font-size:17px;margin:24px 0 12px}.muted,small{color:#9bb5d4}small{font-size:11px}.card{background:#0c263f;border:1px solid #1a405e;border-radius:16px;padding:16px;margin:15px 0}.hero{background:linear-gradient(125deg,#0754a4,#092e5b 70%,#082342);border-color:#1474c6}.balance{font-size:36px;font-weight:700;letter-spacing:-1.4px;margin:12px 0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.action{display:grid;place-items:center;gap:9px;padding:14px 3px;border:1px solid #234b6b;background:#102a44;border-radius:12px;color:white;font-size:12px}.action b{display:grid;place-items:center;width:35px;height:35px;background:#087efa;border-radius:9px;font-size:20px}.action:nth-child(2) b{background:#0cae7b}.action:nth-child(3) b{background:#8928de}.action:nth-child(4) b{background:#ec9018}input,select{width:100%;padding:13px;border:1px solid #315571;background:#0a2238;color:white;border-radius:9px;margin:7px 0 14px;font:inherit}label{display:block;color:#b5cde8;font-size:12px;margin-top:12px}button{cursor:pointer}.primary{border:1px solid #218eff;border-radius:9px;background:#096cd6;color:white;padding:13px 15px;font-weight:600;width:100%;margin:10px 0}.secondary{border:1px solid #315a7c;border-radius:9px;background:#112d48;color:#d4e8ff;padding:10px 12px}.row{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #21405a}.row:last-child{border-bottom:0}.coin{display:grid;place-items:center;background:#1462a6;width:38px;height:38px;border-radius:50%;font-weight:700}.right{margin-left:auto;text-align:right}.error{color:#ff8396}.notice{background:#122f4b;border:1px solid #2b5273;border-radius:10px;padding:12px;margin:12px 0;color:#c0d7ef;font-size:12px;line-height:1.5}.nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.nav button{border:1px solid #254965;background:#0e2b46;color:#c1daf5;border-radius:9px;padding:9px 12px}.nav button.on{background:#096cd6;color:white}footer{text-align:center;color:#8caacb;font-size:11px;line-height:1.5;margin-top:35px}

/* Infinity Wallet cryptocurrency assets */
.coin {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.coin img {
  width:36px;
  height:36px;
  object-fit:contain;
}

.row {
  transition:background .2s ease;
}

.row:hover {
  background:rgba(38,139,255,.07);
}

/* Cryptocurrency mini-chart layout fix */
.coin-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mini-chart-card {
  min-width: 0;
  padding: 16px;
  background: #102f4b;
  border: 1px solid #28506d;
  border-radius: 14px;
}

.mini-chart-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mini-chart-title img {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px;
  max-height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
}

.mini-chart-card svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 130px;
}

@media (max-width: 600px) {
  .coin-chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Portfolio chart styling */
.chart-panel {
  background: #102f4b;
  border: 1px solid #28506d;
  border-radius: 18px;
  padding: 24px;
  margin: 22px 0;
}

.chart-panel h2 {
  margin-top: 0;
}

.chart-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.chart-periods button {
  padding: 10px 17px;
  border: 1px solid #315675;
  border-radius: 9px;
  background: #102f4b;
  color: #dcecff;
  cursor: pointer;
  font-size: 14px;
}

.chart-periods button.period-active {
  background: #086bd8;
  border-color: #168cff;
  color: white;
}

.chart-interactive {
  position: relative;
}

#portfolio-svg {
  display: block;
  width: 100%;
  height: 220px;
}

.chart-tooltip {
  margin-top: 10px;
  padding: 10px;
  background: #173b5b;
  border-radius: 8px;
  color: white;
}

.chart-tooltip[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .chart-panel {
    padding: 16px;
  }
}

/* Portfolio display selector */
.portfolio-view-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0;
  padding: 5px;
  border-radius: 12px;
  background: #09233a;
}

.portfolio-view-selector button {
  padding: 12px 10px;
  border: 1px solid #28506d;
  border-radius: 9px;
  background: transparent;
  color: #cce3ff;
  cursor: pointer;
  font-weight: 600;
}

.portfolio-view-selector button.view-active {
  background: #086bd8;
  border-color: #168cff;
  color: white;
}

.portfolio-view-selector button:hover {
  border-color: #258bff;
}

@media (max-width: 480px) {
  .portfolio-view-selector button {
    font-size: 13px;
    padding: 10px 6px;
  }
}

.separate-holdings {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}

.separate-holdings[hidden],
.chart-interactive[hidden],
#portfolio-value[hidden],
#portfolio-change[hidden] {
  display: none !important;
}

.holding-chart-card {
  padding: 18px;
  background: #102f4b;
  border: 1px solid #315675;
  border-radius: 14px;
}

.holding-chart-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.holding-chart-title img {
  width: 32px;
  height: 32px;
}

.holding-chart-title span {
  margin-left: auto;
  color: #9ac9f7;
}

.holding-chart-svg {
  display: block;
  width: 100%;
  height: 120px;
  margin-top: 14px;
}

.receive-wallet {
  padding: 18px 0;
  border-bottom: 1px solid #28506d;
}

.receive-wallet:last-child {
  border-bottom: none;
}

.receive-wallet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.receive-wallet-header img {
  width: 38px;
  height: 38px;
}

.receive-wallet-header small {
  display: block;
  margin-top: 4px;
  color: #9ac9f7;
}

.receive-address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.receive-address code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 14px;
  background: #09233a;
  border: 1px solid #315675;
  border-radius: 9px;
}

.receive-address button {
  padding: 12px 16px;
  background: #086bd8;
  color: white;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}

@media(max-width: 480px) {
  .receive-address {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Transaction approval statuses */
.transaction-status {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
}

.status-pending {
  color: #ffcc66;
  background: rgba(255, 193, 7, 0.12);
}

.status-approved {
  color: #22d3a8;
  background: rgba(34, 211, 168, 0.12);
}

.status-rejected {
  color: #ff6877;
  background: rgba(255, 104, 119, 0.12);
}
/* Infinity Wallet V3 - Mobile bottom navigation */

.nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 10px 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #071d30;
    border: 1px solid #254760;
    border-radius: 16px 16px 0 0;
    box-sizing: border-box;
    margin: 0;
}

.nav button {
    width: 100%;
    min-width: 0;
    padding: 13px 2px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

.nav button.on {
    background: #0875dc;
    color: white;
}

body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
}