/* NFC Crypto app screens (lib/features/shell, lib/features/nfc, lib/features/send). */
.carousel { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 18px 9% 14px; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .slide { flex: 0 0 82%; scroll-snap-align: center; display: grid; place-items: center; padding: 0 4px; transition: transform .25s, opacity .25s; }
.carousel .slide .card { width: 100%; max-width: 270px; cursor: pointer; }
.carousel .slide.far { transform: scale(.88); opacity: .55; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--active); transition: width .2s, background .2s; }
.dots i.on { width: 18px; background: #fff; }
.caption { text-align: center; color: var(--muted); font-size: 12px; margin-top: 8px; }
.status { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; padding: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.status > div { padding: 12px 0; }
.status > div:nth-child(n+3) { border-top: 1px solid var(--border); }
.status .k { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; }
.qa button:hover { border-color: var(--outline); background: var(--raised); }
.spender { width: 100%; text-align: left; margin-bottom: 10px; }
.spender .top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.spender .top b { flex: 1; }
.meterrow + .meterrow { margin-top: 10px; }
.meterrow .mr { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.meterrow .mr b { font-weight: 600; }
.meterrow .mr span { font: 12.5px var(--mono); color: var(--muted); }
.meterrow.over .mr span { color: var(--warning); }
.ev .ic { width: 24px; display: grid; place-items: center; }
.ev .ic.ok { color: var(--success); }
.ev .ic.bad { color: var(--danger); }
.protect { margin-top: 20px; }
.protect h3 { margin: 0 0 6px; font-size: 16px; }
.protect p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* home */
.homehead { display: flex; align-items: center; gap: 10px; padding: 8px 16px 6px 20px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; font: 600 13px var(--mono); color: var(--muted); }
.homehead .w { flex: 1; font-size: 18px; font-weight: 600; }
.bal { margin-top: 8px; padding: 20px; border-radius: 26px; background: linear-gradient(160deg, #1d1d1f, #111112); border: 1px solid var(--border); }
.bal .k { font: 600 12px var(--mono); letter-spacing: .18em; color: var(--muted); }
.bal .v { font-size: 46px; font-weight: 700; letter-spacing: -1.4px; margin: 12px 0 6px; }
.dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.dock button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.dock button span { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--border); }
.dock button:first-child span { background: #fff; color: #000; }
.homecard { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.homecard .card { width: 104px; flex: none; }
.asset .glyph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--mono); background: var(--raised); border: 1px solid var(--outline); }
.asset .amt { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.asset .amt small { display: block; color: var(--muted); font-size: 11.5px; }

/* card detail */
.detail-card { width: 78%; margin: 6px auto 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.stats div { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.stats small { display: block; color: var(--muted); font-size: 12px; }
.stats b { font: 600 15px var(--mono); }
.rolepanel h3 { margin: 0 0 4px; font-size: 20px; }
.rolepanel p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.finish { display: flex; flex-wrap: wrap; gap: 8px; }
.finish button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border-radius: 999px; border: 1px solid var(--outline); font-size: 13px; font-weight: 600; color: var(--muted); }
.finish button i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); }
.finish button[aria-pressed="true"] { color: #fff; border-color: #fff; }

/* send wizard (UnifiedSendWizardScreen) */
.steph { padding: 0 20px; }
.steph .bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.steph .bar i { height: 2px; background: var(--border); }
.steph .bar i.on { background: #fff; }
.steph .lbl { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--muted); }
.field { border: 1px solid var(--outline); border-radius: 16px; padding: 14px; background: var(--surface); }
.field input { width: 100%; background: none; border: 0; outline: 0; font: 13.5px/1.5 var(--mono); }
.field .addr { font: 14px/1.6 var(--mono); word-break: break-all; min-height: 22px; }
.field .addr.ph { color: var(--faint); }
.helper { color: var(--muted); font-size: 12px; margin: 8px 2px 14px; }
.amount { text-align: center; padding: 26px 0 6px; }
.amount .v { font-size: 52px; font-weight: 700; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; }
.amount .v.ph { color: var(--active); }
.amount .u { font: 13px var(--mono); color: var(--muted); margin-top: 6px; }
.err { color: var(--warning); font-size: 13px; text-align: center; margin-top: 8px; min-height: 18px; }
.review .big { text-align: center; padding: 18px 0 4px; font-size: 38px; font-weight: 700; letter-spacing: -1px; }
.review .big small { font-size: 18px; color: var(--muted); font-weight: 600; }
.cardnote { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px; border-radius: 20px; background: linear-gradient(150deg, #2a2a2d, #111112); border: 1px solid var(--outline); }
.cardnote .mini { width: 56px; height: 36px; border-radius: 7px; flex: none; background: linear-gradient(135deg, #3a3a3c, #0a0a0b); border: 1px solid rgba(255, 255, 255, .16); display: grid; place-items: end; padding: 5px; }
.cardnote b { display: block; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.cardnote span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.bottom { flex: none; padding: 12px 20px 26px; background: var(--bg); border-top: 1px solid var(--border); }
.done { text-align: center; padding: 40px 10px 0; }
.done .ok { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #000; }
.done h2 { margin: 0 0 8px; }
.done p { color: var(--muted); margin: 0 auto 6px; max-width: 300px; font-size: 14px; line-height: 1.45; }

/* lock screen (NfcCardGateScreen) */
.lock { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; text-align: center; }
.lock h2 { margin: 18px 0 8px; font-size: 24px; }
.lock p { color: var(--muted); margin: 0 auto 22px; max-width: 300px; line-height: 1.45; }
.lock .link { margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.swapbox { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.swapbox .k { color: var(--muted); font-size: 12px; }
.swapbox .v { display: flex; justify-content: space-between; align-items: center; font-size: 28px; font-weight: 700; margin-top: 6px; }
.swapbox .v span { font-size: 15px; padding: 6px 12px; border-radius: 999px; background: var(--raised); }
.swapmid { display: grid; place-items: center; margin: -10px 0; position: relative; z-index: 1; }
.swapmid span { width: 40px; height: 40px; border-radius: 12px; background: var(--raised); border: 3px solid var(--bg); display: grid; place-items: center; }