.phone {
  --pw: 300px;
  width: var(--pw);
  height: calc(var(--pw) * 2.1);
  font-size: calc(var(--pw) / 21.43);
  border-radius: 3.1em;
  padding: 0.55em;
  background: linear-gradient(150deg, #3a2c3e, #121014 40%, #2a1f2e);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2.5em 5em -1em rgba(0, 0, 0, 0.7), 0 0 6em -1em rgba(184, 92, 154, 0.35);
  flex: none;
}
.phone-screen {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 2.6em;
  overflow: hidden;
  background: radial-gradient(120% 50% at 80% -10%, rgba(184, 92, 154, 0.28), transparent 60%), #0D0B0F;
  color: #F5F0F4;
  font-family: var(--font-body);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
}
.phone-screen b { font-weight: 600; }
.phone-screen h4 { font-family: var(--font-display); font-size: 1.35em; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.phone-screen p { margin: 0; }
.s-status { display: flex; justify-content: space-between; align-items: center; padding: 0.95em 1.6em 0.3em; font-size: 0.78em; font-weight: 600; }
.s-island { width: 6.4em; height: 1.8em; border-radius: 1em; background: #000; }
.s-sys { display: flex; gap: 0.25em; align-items: center; }
.s-sys i { width: 0.3em; height: 0.75em; background: #F5F0F4; border-radius: 1px; }
.s-sys b { width: 1.6em; height: 0.75em; border: 1px solid #F5F0F4; border-radius: 0.2em; }
.s-pad { padding: 0.7em 1.15em 0; display: flex; flex-direction: column; gap: 0.7em; flex: 1; min-height: 0; }
.s-top { display: flex; justify-content: space-between; align-items: center; }
.s-mute { color: rgba(245, 240, 244, 0.55); font-size: 0.78em; }
.s-mute.c { text-align: center; }
.s-sm { font-size: 0.9em; }
.s-pink { color: var(--tk-blush); }
.s-up { color: #6FE0A8; font-size: 0.8em; }
.s-logo { width: 2.2em; height: 2.2em; display: block; }
.s-logo.sm { width: 1.7em; height: 1.7em; }
.s-logo svg, .s-art svg, .s-thumb svg, .s-hero svg { width: 100%; height: 100%; display: block; }
.s-search { background: #1A161C; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.9em; padding: 0.7em 0.9em; font-size: 0.78em; color: rgba(245, 240, 244, 0.45); }
.s-chips, .s-range, .s-seg { display: flex; gap: 0.4em; }
.s-chips span, .s-range span { font-size: 0.72em; padding: 0.4em 0.8em; border-radius: 99em; background: #1A161C; color: rgba(245, 240, 244, 0.7); }
.s-chips span.on, .s-range span.on { background: var(--tk-blush); color: #1A0B16; font-weight: 600; }
.s-card { background: #161219; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1.2em; overflow: hidden; }
.s-art { position: relative; height: 8.4em; }
.s-art.sm { height: 3.2em; width: 3.6em; border-radius: 0.7em; overflow: hidden; flex: none; }
.s-tag { position: absolute; left: 0.6em; top: 0.6em; font-size: 0.62em; padding: 0.3em 0.7em; border-radius: 99em; background: rgba(10, 10, 11, 0.6); backdrop-filter: blur(6px); }
.s-tag.r { left: auto; right: 0.6em; }
.s-cbody { padding: 0.75em 0.85em 0.85em; display: flex; flex-direction: column; gap: 0.35em; font-size: 0.92em; }
.s-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; }
.s-bar { height: 0.35em; background: #2A222E; border-radius: 1em; overflow: hidden; }
.s-bar i { display: block; height: 100%; background: var(--grad-aurora); border-radius: 1em; }
.s-mini { display: flex; gap: 0.7em; align-items: center; padding: 0.55em; font-size: 0.88em; }
.s-tabs { display: flex; justify-content: space-around; padding: 0.7em 0.6em 1.3em; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(13, 11, 15, 0.9); margin-top: auto; }
.s-tabs span { display: flex; flex-direction: column; align-items: center; gap: 0.3em; font-size: 0.62em; color: rgba(245, 240, 244, 0.45); }
.s-tabs span.on { color: var(--tk-blush); }
.s-tabs .ic { width: 1.7em; height: 1.7em; border-radius: 0.45em; border: 1.5px solid currentColor; }
.s-tabs .ic-1 { border-radius: 50%; }
.s-tabs .ic-2 { border-radius: 0.3em; height: 1.3em; margin: 0.2em 0; }
.s-tabs .ic-3 { border-radius: 50% 50% 0.4em 0.4em; }
.s-hero { position: relative; height: 12.5em; margin-top: -2.9em; flex: none; }
.s-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0D0B0F); }
.s-back { position: absolute; z-index: 2; left: 1em; top: 3.4em; width: 2em; height: 2em; border-radius: 50%; background: rgba(10, 10, 11, 0.6); display: grid; place-items: center; font-size: 1.1em; }
.s-back.in { position: static; background: #1A161C; }
.s-hero .s-tag { top: auto; bottom: 1.6em; left: 1.1em; z-index: 2; }
.s-eyebrow { font-family: var(--font-mono); font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tk-blush); }
.s-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.s-stats div { background: #161219; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.8em; padding: 0.55em 0.6em; display: flex; flex-direction: column; gap: 0.15em; }
.s-stats b { font-size: 1.05em; }
.s-stats span { font-size: 0.62em; color: rgba(245, 240, 244, 0.55); }
.s-amount { background: #161219; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1em; padding: 0.8em; display: flex; flex-direction: column; gap: 0.45em; }
.s-step { width: 2em; height: 2em; border-radius: 50%; background: #241D28; display: grid; place-items: center; }
.s-big { font-family: var(--font-display); font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; }
.s-btn { margin-top: auto; margin-bottom: 1.4em; border: 0; border-radius: 99em; padding: 0.95em; font: 600 0.95em var(--font-body); color: #1A0B16; background: var(--grad-aurora); }
.s-pill { font-size: 0.7em; padding: 0.4em 0.8em; border-radius: 99em; background: #1A161C; border: 1px solid rgba(255, 255, 255, 0.08); }
.s-balance { border-radius: 1.2em; padding: 0.9em 0.95em 0.75em; background: radial-gradient(90% 90% at 100% 0%, rgba(255, 151, 214, 0.25), transparent 60%), linear-gradient(160deg, #2A1A2E, #141016); border: 1px solid rgba(255, 151, 214, 0.18); display: flex; flex-direction: column; gap: 0.2em; }
.s-balance p { font-size: 0.72em; color: rgba(245, 240, 244, 0.6); }
.s-balance > b { font-family: var(--font-display); font-size: 1.75em; letter-spacing: -0.02em; }
.s-chart { width: 100%; height: 4.2em; margin-top: 0.3em; }
.s-label { font-size: 0.72em; color: rgba(245, 240, 244, 0.5); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
.s-asset, .s-tx, .s-method, .s-sum { display: flex; align-items: center; gap: 0.7em; font-size: 0.85em; }
.s-asset > div:nth-child(2), .s-tx > div, .s-method > div, .s-sum > div:last-child { display: flex; flex-direction: column; gap: 0.1em; flex: 1; min-width: 0; }
.s-asset .r { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1em; }
.s-thumb { width: 2.6em; height: 2.6em; border-radius: 0.7em; overflow: hidden; flex: none; }
.s-thumb.lg { width: 3.6em; height: 3.6em; }
.s-seg { background: #161219; border-radius: 99em; padding: 0.25em; }
.s-seg span { flex: 1; text-align: center; font-size: 0.75em; padding: 0.4em; border-radius: 99em; color: rgba(245, 240, 244, 0.6); }
.s-seg span.on { background: #2A222E; color: #fff; font-weight: 600; }
.s-cardviz { border-radius: 1.2em; padding: 0.95em; aspect-ratio: 1.62; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(70% 90% at 0% 0%, rgba(248, 185, 148, 0.55), transparent 60%), radial-gradient(80% 80% at 100% 100%, rgba(163, 91, 192, 0.8), transparent 60%), linear-gradient(135deg, #B85C9A, #3D2640); box-shadow: 0 1em 2em -1em rgba(184, 92, 154, 0.6); }
.s-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.s-actions span { display: flex; flex-direction: column; align-items: center; gap: 0.35em; font-size: 0.66em; color: rgba(245, 240, 244, 0.7); }
.s-actions i { font-style: normal; width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: #1A161C; border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.2em; }
.s-tx > i, .s-method > i { font-style: normal; width: 2.3em; height: 2.3em; border-radius: 0.7em; display: grid; place-items: center; background: #1A161C; font-weight: 700; flex: none; }
.s-tx > i.pk { background: var(--grad-aurora); color: #1A0B16; }
.s-sum { background: #161219; border-radius: 1em; padding: 0.6em; border: 1px solid rgba(255, 255, 255, 0.06); }
.s-total { display: flex; flex-direction: column; align-items: center; gap: 0.15em; padding: 0.4em 0; }
.s-method { padding: 0.6em 0.7em; border-radius: 0.9em; border: 1px solid rgba(255, 255, 255, 0.07); background: #121014; }
.s-method.on { border-color: rgba(255, 151, 214, 0.6); background: rgba(255, 151, 214, 0.07); }
.s-method.on > i { background: var(--tk-blush); color: #1A0B16; }
.s-radio { width: 1.1em; height: 1.1em; border-radius: 50%; border: 1.5px solid rgba(245, 240, 244, 0.35); flex: none; }
.s-method.on .s-radio { border: 0.35em solid var(--tk-blush); }