/* ANK Wallet mobile layout: 390 × 844. Positions below are measured from the
   content origin, 44px below the device top. Native controls stay editable. */
:root { --soft:#f2f5fb; }
button,input,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
input::placeholder { color:var(--muted); opacity:1; }
[hidden] { display:none!important; }
.device { position:relative; min-height:844px; height:100dvh; padding-top:44px; padding-bottom:max(23px,env(safe-area-inset-bottom)); overflow:visible; }
.device.is-setup { min-height:844px; }
.sheet,.setup-page { position:relative; flex:1; padding:0 24px; min-height:0; overflow:visible; }
.setup-page .sheet,.setup-body,.dock { display:contents; }
.setup-page .sheet > *, .sheet > * { flex-shrink:0; }
.page-head,.setup-bar { position:absolute; top:3px; left:24px; right:24px; height:44px; min-height:44px; display:flex; align-items:center; gap:12px; }
.page-head h1,.setup-bar h1 { font-size:20px; line-height:26px; letter-spacing:0; }
button.back,.setup-bar .icon-btn { width:38px; height:38px; min-width:38px; padding:10px; border:0; background:#fff; border-radius:50%; display:grid; place-items:center; }
.page-title { position:absolute; top:8px; left:24px; right:24px; padding:0; }
.page-title h1 { font-size:26px; line-height:36px; letter-spacing:0; }
.display { font-size:26px; line-height:1.32; letter-spacing:0; margin:0; }
.lead { font-size:12px; line-height:20px; }
.muted { font-size:11px; line-height:17px; }
.icon { width:20px; height:20px; }
.bubble { width:36px; height:36px; display:grid!important; flex:none!important; border-radius:50%; }
.bubble .icon { width:20px; height:20px; filter:var(--blue-icon); }
.bubble.ok .icon { filter:brightness(0) saturate(100%) invert(43%) sepia(39%) saturate(799%) hue-rotate(115deg) brightness(91%) contrast(89%); }
.bubble.bad .icon,.info-box.bad .icon { filter:brightness(0) saturate(100%) invert(47%) sepia(26%) saturate(1321%) hue-rotate(304deg) brightness(94%) contrast(89%); }
:root { --blue-icon:brightness(0) saturate(100%) invert(30%) sepia(85%) saturate(2466%) hue-rotate(214deg) brightness(98%) contrast(96%); }
button.primary,a.primary { height:54px; min-height:54px; font-size:14px; border-radius:16px; }
.primary .icon { width:20px; height:20px; }
button.primary:not(.secondary):not(.ghost) .icon { filter:brightness(0) invert(1); }
button.ghost,button.primary.ghost { background:#e4eaf4; color:#8b96ab; }
.info-box { margin:0; min-height:55px; border-radius:16px; padding:13px 16px; gap:10px; font-size:11px; line-height:17px; font-weight:400; }
.info-box .icon { width:16px; height:16px; margin:0; filter:var(--blue-icon); }
.info-box.bad { background:#fff0f2; color:var(--down); }
.info-box.bad .icon { filter:none; }
.menu,.asset,.tx { box-shadow:none; border:0; }
.menu { height:68px; margin:0; padding:13px; border-radius:18px; gap:12px; }
.menu strong,.asset-name strong,.tx-main strong { font-size:13px; line-height:18px; }
.menu small,.asset-name .muted,.tx-main .muted { font-size:10px; line-height:16px; }
.menu > .icon:last-child { width:16px; height:16px; margin-left:auto; flex:none; }
.menu .bubble { width:36px; height:36px; aspect-ratio:1; }
.menu > span:not(.bubble):not(.coin) { gap:0; }
.menu > .coin { flex:none; display:grid; }
.coin,.coin img { width:38px; height:38px; }
.coin.big,.coin.big img { width:48px; height:48px; }
.coin-row .coin,.coin-row .coin img { width:30px; height:30px; }
.asset { height:75px; border-radius:0; padding:12px; margin:0; background:transparent; border-bottom:1px solid var(--line); gap:14px; }
.asset-values { gap:2px; font-size:13px; line-height:18px; flex:none; }
.asset-values .muted { font-size:11px; line-height:16px; }
.search { margin:0; }
.search input { min-height:46px; height:46px; font-size:12px; padding-left:45px; border-radius:16px; }
.search .icon { top:14px; left:16px; }
.field { margin:0; font-size:12px; line-height:18px; }
.field input { display:block; height:58px; min-height:58px; margin-top:8px; font-size:14px; padding:16px; border-radius:16px; }
.field .search { margin-top:8px; }
.field .search input { margin:0; padding-left:16px; padding-right:48px; }
.field .search > button { top:9px; }
.field .search > button .icon { filter:var(--blue-icon); }
.chips { gap:8px; margin:0; padding:0; scrollbar-width:none; }
.chip { height:32px; min-height:32px; padding:0 18px; font-size:11px; font-weight:700; }
.speed { gap:8px; }
.speed button { min-height:32px; height:32px; font-size:11px; padding:0 10px; }
.tabs { flex:none; height:68px; padding:8px 0 10px; gap:0; align-items:flex-start; }
.tab { flex:1; gap:7px; font-size:10px; font-weight:400; line-height:14px; padding:0; }
.tab.on { font-weight:700; }
.bubble-tab { height:29px; width:46px; display:grid; place-items:center; }
.tab.on .bubble-tab { padding:0; }
.tab .icon { width:21px; height:21px; opacity:.62; }
.tab.on .icon { opacity:1; }
.section-head { margin:0; }
.section-head h2,.sheet > h2 { font-size:18px; line-height:25px; }
.text-btn { font-size:11px; }
.empty-hero { padding:0; text-align:center; }
.empty-hero .bubble { width:68px; height:68px; margin:0 auto 12px; }
.empty-hero .bubble .icon { width:32px; height:32px; }
.empty-hero h2 { font-size:19px; line-height:25px; margin:0 0 6px; }
.empty-hero p { font-size:12px; line-height:20px; max-width:285px; margin:auto; }
.empty-card { padding:24px; text-align:center; }
.empty-card strong,.empty-card p { display:block; margin-bottom:16px; }
.empty-card button { color:var(--primary); min-height:44px; }
.facts { margin:0; padding:15px 16px; border-radius:20px; box-shadow:none; }
.facts div { min-height:40px; padding:10px 0; font-size:12px; line-height:20px; }
.facts strong { overflow-wrap:anywhere; }
.hero-amount { padding:0; }
.hero-amount > .coin,.hero-amount > .bubble { margin-left:auto; margin-right:auto; }
.hero-amount .total { font-size:32px; line-height:42px; letter-spacing:0; }
.pin-dots { gap:24px; margin:0; }
.pin-dots span { width:14px; height:14px; border:1px solid #94a3bb; }
.pinpad,.keypad { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; }
.pinpad button,.keypad button { height:57px; padding:0; font-size:24px; font-weight:400; display:grid; place-items:center; }
.pinpad .icon,.keypad .icon { width:24px; height:24px; }
.word-grid { list-style:none; padding:0; gap:10px 12px; margin:0; }
.word-grid label,.word-grid li { min-height:46px; height:46px; padding:7px 10px; border-radius:13px; justify-content:flex-start; }
.word-grid span,.word-grid li em { font-size:9px; line-height:12px; }
.word-grid input { font-size:12px; line-height:17px; min-width:0; }
.word-grid strong { font-size:12px; line-height:18px; text-align:center; overflow-wrap:anywhere; }
.feedback { position:absolute; top:91px; left:24px; right:24px; z-index:15; pointer-events:none; }
.feedback:empty { display:none; }
.feedback .notice,.feedback .error { box-shadow:0 4px 24px #101c3920; }
.setup-page .error,.setup-page .notice { position:absolute; left:24px; right:24px; top:55px; z-index:10; }
.end { font-size:11px; line-height:18px; font-weight:700; }

/* 01 / 02 / 03 — welcome, restore, unlock */
[data-view=welcome] .brand-row { position:absolute; top:11px; left:24px; right:24px; height:52px; }
[data-view=welcome] .logo { width:190px; height:52px; }
[data-view=welcome] .logo { position:relative; }
[data-view=welcome] .logo img { position:absolute; width:42px; height:42px; left:-3px; top:6px; }
[data-view=welcome] .logo strong { position:absolute; left:44px; top:5px; font-size:17px; line-height:23px; }
[data-view=welcome] .logo small { position:absolute; left:45px; top:29px; font-size:9px; line-height:12px; color:var(--muted); }
[data-view=welcome] .pill { width:90px; height:32px; padding:8px 0; text-align:center; font-size:11px; letter-spacing:0; background:#fff; white-space:nowrap; }
[data-view=welcome] .hero { position:absolute; top:107px; left:30px; width:calc(100% - 60px); max-width:none; height:276px; object-fit:contain; margin:0; }
[data-view=welcome] h1 { position:absolute; top:386px; left:24px; right:24px; margin:0; font-size:29px; line-height:39px; letter-spacing:0; }
[data-view=welcome] .lead { position:absolute; top:478px; left:24px; right:24px; font-size:13px; }
[data-view=welcome] .coin-row { position:absolute; top:521px; left:24px; gap:19px; margin:0; }
[data-view=welcome] #create { position:absolute; bottom:110px; left:24px; width:calc(100% - 48px); }
[data-view=welcome] #create .icon { position:absolute; right:18px; }
[data-view=welcome] #restore { position:absolute; bottom:44px; left:24px; width:calc(100% - 48px); }
[data-view=welcome] .fine { position:absolute; bottom:11px; left:24px; right:24px; font-size:10px; line-height:15px; }
[data-view=welcome] .fine .icon { width:12px; height:12px; opacity:.6; }
[data-view=restore] .hero,[data-view=create-backup] .hero,[data-view=backup] .hero { position:absolute; top:71px; left:calc(50% - 72px); width:144px; height:128px; margin:0; object-fit:contain; }
[data-view=restore] .display { position:absolute; top:203px; left:24px; right:24px; font-size:25px; line-height:33px; }
[data-view=restore] .lead { position:absolute; top:283px; left:24px; right:24px; }
[data-view=restore] .word-grid { position:absolute; top:323px; left:24px; right:24px; gap:10px 12px; }
[data-view=restore] .word-grid label { height:48px; }
[data-view=restore] .info-box { position:absolute; top:582px; left:24px; right:24px; min-height:62px; }
[data-view=restore] #restore-next,[data-view=backup-confirm] #quiz-next,[data-view=create-backup] #create-next { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
[data-view=unlock] .center-logo { position:absolute; width:40px; height:40px; top:60px; left:calc(50% - 20px); margin:0; }
[data-view=unlock] h1 { position:absolute; top:151px; left:0; right:0; margin:0; font-size:25px; line-height:34px; letter-spacing:0; }
[data-view=unlock] .lead { position:absolute; top:195px; left:0; right:0; font-size:12px; }
[data-view=unlock] .pin-dots { position:absolute; top:251px; left:0; right:0; }
[data-view=unlock] .pinpad { position:absolute; top:320px; left:24px; right:24px; }
[data-view=unlock] #bio { position:absolute; bottom:84px; left:24px; width:calc(100% - 48px); }
[data-view=unlock] #restore { position:absolute; bottom:27px; left:24px; width:calc(100% - 48px); min-height:44px; font-size:12px; }
[data-view=unlock] .wallet-pick { position:absolute; top:218px; left:24px; right:24px; margin:0; transform:translateY(-4px); }
[data-view=unlock]:has(.wallet-pick button) .pin-dots { top:271px; }

/* 04–07 — portfolio, asset catalogue and asset details */
[data-view=home] .wallet-head { position:absolute; top:7px; left:24px; right:24px; height:38px; margin:0; gap:12px; }
[data-view=home] .wallet-head .bubble,[data-view=home] .wallet-head .round { width:38px; height:38px; border:0; }
[data-view=home] .wallet-head strong { font-size:14px; line-height:19px; }
[data-view=home] .wallet-head small { font-size:10px; line-height:18px; }
[data-view=home] .balance-card { position:absolute; top:67px; left:24px; right:24px; height:173px; padding:20px; margin:0; background:linear-gradient(135deg,#234cdb,#11234d); }
.balance-top { font-size:12px; line-height:18px; font-weight:400; color:#b7c8fa; }
button.eye { position:absolute; right:12px; top:7px; }
button.eye .icon { width:18px; height:18px; opacity:.8; filter:brightness(0) invert(1); }
.balance-card .total { position:absolute; left:20px; top:50px; font-size:33px; line-height:45px; letter-spacing:0; margin:0; }
.balance-card .soft { position:absolute; top:99px; left:20px; color:#bbcbf4; font-size:12px; line-height:18px; }
.balance-card .soft + .soft,.balance-card .change { position:absolute; top:128px; left:20px; font-size:11px; line-height:16px; }
.balance-card .sync-stamp { position:absolute; top:150px; left:20px; margin:0; color:#bbcbf4; font-size:9px; line-height:12px; }
.actions { position:absolute; left:24px; right:24px; top:257px; margin:0; }
.action { width:74px; padding:0; gap:8px; font-size:11px; line-height:20px; }
.action-icon { width:50px; height:50px; border:0; box-shadow:none; }
[data-view=home] .section-head { position:absolute; top:349px; left:24px; right:24px; height:30px; }
[data-view=home] .empty-hero { position:absolute; top:400px; left:24px; right:24px; }
[data-view=home] .empty-hero .bubble { margin-bottom:12px; }
[data-view=home] .empty-hero h2 { margin-bottom:6px; }
[data-view=home] .empty-hero p { width:100%; }
[data-view=home] .sheet > .primary { position:absolute; top:598px; left:24px; width:calc(100% - 48px); }
[data-view=home] .holdings { position:absolute; top:392px; left:24px; right:24px; max-height:310px; overflow:auto; }
[data-view=home] .holdings .asset { height:69px; }
[data-view=home] .holdings .info-box { margin-top:20px; }
/* Network notices and holdings share document flow so variable text cannot overlap. */
[data-view=home].device { height:auto; min-height:max(844px,100dvh); }
[data-view=home] .home-content { padding-top:349px; padding-bottom:28px; display:flex; flex-direction:column; gap:16px; }
[data-view=home] .home-content .section-head { position:static; height:auto; margin:0; }
[data-view=home] .home-content .empty-hero { position:static; margin:4px 0 8px; }
[data-view=home] .home-content .holdings { position:static; max-height:none; overflow:visible; }
[data-view=home] .home-content > .primary { margin:0; width:100%; }
[data-view=home] .wallet-head > span:not(.grow) { flex:1; min-width:0; }
[data-view=home] .wallet-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-view=home] .wallet-head .grow { display:none; }
.tron-activation { display:flex; gap:10px; padding:16px; border:1px solid #dbe6ff; border-radius:18px; background:#edf3ff; color:#28456e; }
.tron-activation > .icon { flex:none; width:18px; height:18px; margin-top:2px; }
.tron-activation > div { min-width:0; }
.tron-activation strong { display:block; font-size:13px; line-height:20px; }
.tron-activation p { margin:5px 0 10px; font-size:12px; line-height:19px; }
.tron-activation .text-btn { display:flex; align-items:center; gap:4px; padding:0; text-align:left; white-space:normal; font-size:12px; line-height:19px; }
.tron-activation .text-btn .icon { flex:none; width:14px; height:14px; }
[data-view=wallet-name] .wallet-name-setup { padding-top:94px; display:flex; flex-direction:column; gap:20px; }
.wallet-name-setup > .bubble { width:66px; height:66px; }
.wallet-name-setup h1 { margin:0; font-size:27px; line-height:36px; }
.wallet-name-setup .lead { margin:0; font-size:14px; line-height:23px; }
.wallet-name-setup .field { margin:8px 0 0; font-size:13px; }
.wallet-name-setup input { font-size:16px; }
.wallet-name-setup .name-hint { margin:-12px 0 4px; font-size:12px; color:var(--muted); }
.wallet-name-setup .primary { margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; }
[data-view=wallet-name] .wallet-name-setup .error { position:static; margin:0; }
[data-view=assets] .search { position:absolute; top:61px; left:24px; right:24px; }
[data-view=assets] .chips { position:absolute; top:124px; left:24px; right:24px; }
[data-view=assets] .eyebrow { position:absolute; top:177px; left:24px; margin:0; font-size:10px; letter-spacing:0; line-height:16px; }
[data-view=assets] #asset-box { position:absolute; top:206px; left:24px; right:24px; bottom:16px; overflow:auto; scrollbar-width:none; }
[data-view=asset] .hero-amount { position:absolute; top:77px; left:24px; right:24px; }
[data-view=asset] .hero-amount .total { margin:14px 0 8px; }
[data-view=asset] .hero-amount .muted { font-size:15px; line-height:20px; }
[data-view=asset] .hero-amount .chip { margin-top:15px; font-weight:400; }
[data-view=asset] .actions { top:265px; }
[data-view=asset] .facts { position:absolute; top:365px; left:24px; right:24px; min-height:114px; }
[data-view=asset] .sheet > .muted { position:absolute; top:494px; left:24px; font-size:10px; }
[data-view=asset] #copy-asset { position:absolute; top:526px; left:24px; width:calc(100% - 48px); }
[data-view=asset] .section-head { position:absolute; top:612px; left:24px; right:24px; }
[data-view=asset] .sheet > .lead,[data-view=asset] .asset-moves { position:absolute; top:650px; left:24px; right:24px; max-height:70px; overflow:auto; }
[data-view=asset] #hide-asset,[data-view=asset] #show-asset { position:absolute; bottom:18px; left:24px; width:calc(100% - 48px); }

/* 08–15 — transfer and receive */
[data-view=send] #send { display:contents; }
[data-view=send] #send > .menu { position:absolute; top:68px; left:24px; width:calc(100% - 48px); height:69px; }
[data-view=send] #send > .lead { position:absolute; top:158px; left:24px; }
[data-view=send] .amount-row { position:absolute; top:181px; left:24px; right:24px; margin:0; height:61px; gap:12px; }
.amount-row .pay-amount { min-width:0; }
[data-view=send] .pay-amount { width:135px; font-size:41px; line-height:54px; letter-spacing:0; outline:none; }
[data-view=send] .pay-amount::placeholder { color:var(--ink); }
[data-view=send] .amount-row .unit { font-size:17px; padding:0; font-weight:400; }
[data-view=send] button.maks { font-size:11px; min-height:30px; padding:0 15px; background:#fff; }
[data-view=send] #send > .muted:not(#worth) { position:absolute; top:235px; left:24px; right:24px; padding-bottom:19px; border-bottom:1px solid var(--line); }
[data-view=send] #send > .field { position:absolute; top:284px; left:24px; right:24px; }
[data-view=send] #send > .chips { position:absolute; top:386px; left:24px; right:24px; }
[data-view=send] .keypad { position:absolute; top:428px; left:24px; right:24px; }
[data-view=send] #send > .primary { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
.fee-options:not(:empty) { position:absolute; top:424px; left:24px; right:24px; z-index:2; }
.fee-options .hint { font-size:10px; margin-top:6px; color:var(--muted); }
[data-view=send]:has(.fee-options:not(:empty)) .keypad { top:516px; }
[data-view=send]:has(.fee-options:not(:empty)) .sheet { min-height:840px; }
.scan { position:absolute; top:385px; left:24px; right:24px; z-index:5; background:var(--bg); }
[data-view=book] .search { position:absolute; top:68px; left:24px; right:24px; }
[data-view=book] #book-list { position:absolute; top:216px; left:24px; right:24px; bottom:200px; overflow:auto; }
[data-view=book] .empty-hero .bubble { margin-bottom:12px; }
[data-view=book] .empty-hero p { max-width:290px; }
[data-view=book] .sheet > .chips { position:absolute; top:130px; left:24px; right:24px; }
[data-view=book] .sheet > .primary { position:absolute; bottom:129px; left:24px; width:calc(100% - 48px); }
[data-view=book] .sheet > .info-box { position:absolute; bottom:45px; left:24px; right:24px; height:66px; }
[data-view=book-add] #book-add { display:contents; }
[data-view=book-add] #book-add > .field { position:absolute; top:80px; left:24px; right:24px; }
[data-view=book-add] .field-label { position:absolute; top:185px; left:24px; margin:0; font-size:12px; }
[data-view=book-add] #book-chain-next { position:absolute; top:213px; left:24px; width:calc(100% - 48px); height:58px; border:1px solid var(--line); }
[data-view=book-add] #book-add > .field:has([name=address]) { top:290px; }
.icon-slot { position:absolute; right:15px; top:19px; filter:var(--blue-icon); }
[data-view=book-add] .info-box { position:absolute; top:426px; left:24px; right:24px; min-height:62px; }
[data-view=book-add] #book-add > .primary { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
[data-view=send-review] .sheet > .lead { position:absolute; top:86px; left:24px; }
[data-view=send-review] .display { position:absolute; top:110px; left:24px; right:24px; font-size:33px; line-height:45px; }
[data-view=send-review] .sheet > .chip { position:absolute; top:175px; left:24px; font-weight:400; }
[data-view=send-review] .facts { position:absolute; top:239px; left:24px; right:24px; padding-top:14px; }
[data-view=send-review] .facts div { min-height:34px; padding:7px 0; border:0; }
[data-view=send-review] .facts div:last-child { border-top:1px solid var(--line); padding-top:16px; margin-top:5px; }
[data-view=send-review] .info-box { position:absolute; top:480px; left:24px; right:24px; min-height:62px; }
[data-view=send-review] #confirm { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
[data-view=sent] .hero-amount { position:absolute; top:155px; left:16px; right:16px; }
[data-view=sent] .hero-amount > .bubble { width:104px; height:104px; margin-bottom:25px; }
[data-view=sent] .hero-amount > .bubble .icon { width:44px; height:44px; }
[data-view=sent] .display { font-size:23px; line-height:32px; margin-bottom:4px; }
[data-view=sent] .hero-amount .total { font-size:26px; line-height:36px; }
[data-view=sent] .hero-amount .lead { font-size:11px; margin-top:12px; }
[data-view=sent] .facts { position:absolute; top:409px; left:24px; right:24px; min-height:145px; }
[data-view=sent] .facts div { border:0; min-height:38px; }
[data-view=sent] .info-box { position:absolute; top:585px; left:24px; right:24px; }
[data-view=sent] .sheet > .primary { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
[data-view=receive] .sheet > .menu { position:absolute; top:69px; left:24px; width:calc(100% - 48px); height:66px; }
[data-view=receive] .qr-card { position:absolute; top:162px; left:calc(50% - 123px); width:246px; height:258px; padding:25px; margin:0; box-shadow:none; border:1px solid var(--line); border-radius:24px; text-align:center; }
.qr { width:196px; height:196px; margin:0 auto 8px; }
.qr-card p { text-transform:uppercase; font-size:10px; font-weight:700; }
.receive-address { position:absolute; top:438px; left:24px; right:24px; font-size:10px; line-height:16px; text-align:center; overflow-wrap:anywhere; color:var(--muted); }
[data-view=receive] .pair { position:absolute; top:476px; left:24px; right:24px; gap:12px; }
[data-view=receive] .pair .primary { font-size:12px; }
[data-view=receive] .pair .icon { width:18px; height:18px; }
[data-view=receive] .field { position:absolute; top:552px; left:24px; right:24px; }
[data-view=receive] .info-box { position:absolute; top:674px; left:24px; right:24px; min-height:62px; }
[data-view=receive] #receive-worth { position:absolute; top:646px; left:24px; }
[data-view=receive] #asked { position:absolute; top:630px; left:24px; }
[data-view=pick] .search { position:absolute; top:68px; left:24px; right:24px; }
[data-view=pick] .chips { position:absolute; top:133px; left:24px; right:24px; }
[data-view=pick] .chip { padding:0 15px; }
[data-view=pick] .info-box { position:absolute; top:188px; left:24px; right:24px; }
[data-view=pick] #pick-list { position:absolute; top:266px; left:24px; right:24px; bottom:20px; overflow:auto; scrollbar-width:none; }
[data-view=pick] .asset { height:78px; }
[data-view=deposit] .display { position:absolute; top:68px; left:24px; right:24px; }
[data-view=deposit] .sheet > .lead { position:absolute; top:112px; left:24px; right:24px; }
.deposit-networks { position:absolute; top:166px; left:24px; right:24px; display:grid; gap:13px; }
.deposit-networks .menu { height:75px; padding:16px; gap:16px; }
.deposit-networks .menu strong { font-size:15px; }
.deposit-networks .menu small { font-size:11px; }
[data-view=deposit] .info-box { position:absolute; top:564px; left:24px; right:24px; min-height:62px; }

/* 16–20 / 32–33 — swaps, history and transaction states */
[data-view=swap] .sheet > .lead,[data-view=swap-insufficient] .sheet > .lead { position:absolute; top:54px; left:24px; right:24px; }
[data-view=swap] #swap { display:contents; }
.pay-card { box-shadow:none; border-radius:24px; padding:16px; margin:0; }
[data-view=swap] #swap > .pay-card { position:absolute; top:100px; left:24px; right:24px; height:146px; }
[data-view=swap] #swap > .pay-card:has(#swap-guess-amount) { top:287px; height:119px; }
.pay-top { font-size:12px; margin:0; gap:0; line-height:18px; }
.pay-top .muted { font-size:11px; }
[data-view=swap] .amount-row { margin:22px 0 0; height:40px; gap:8px; }
[data-view=swap] .pay-amount { font-size:34px; letter-spacing:0; line-height:44px; }
[data-view=swap] .amount-row > .coin { margin-left:auto; }
[data-view=swap] .amount-row > strong:last-child:not(.pay-amount) { font-size:14px; }
[data-view=swap] .coin,[data-view=swap] .coin img { width:30px; height:30px; }
[data-view=swap] #swap-max { padding:0; margin-top:18px; line-height:16px; }
[data-view=swap] #swap > .swap-mid { position:absolute; top:253px; left:calc(50% - 23px); margin:0; }
[data-view=swap] #swap > .info-box { position:absolute; top:426px; left:24px; right:24px; min-height:62px; }
[data-view=swap] #swap > .field-label { position:absolute; top:517px; left:24px; margin:0; font-size:12px; }
[data-view=swap] #swap > .field { position:absolute; top:537px; left:24px; right:24px; }
[data-view=swap] #swap-preview,[data-view=swap-insufficient] #swap-preview { position:absolute; bottom:23px; left:24px; width:calc(100% - 48px); }
[data-view=swap] #swap-guess { font-size:10px; margin-top:4px; }
[data-view=swap-review] .swap-stack { display:contents; }
[data-view=swap-review] .pay-card { position:absolute; top:84px; left:24px; right:24px; height:184px; }
.swap-line { font-size:22px; line-height:30px; gap:14px; }
.swap-arrow { margin:18px 0 18px 9px; }
.swap-arrow .icon { filter:var(--blue-icon); }
[data-view=swap-review] .facts { position:absolute; top:300px; left:24px; right:24px; min-height:183px; }
[data-view=swap-review] .facts div { border:0; min-height:36px; padding:8px 0; }
[data-view=swap-review] .info-box { position:absolute; top:517px; left:24px; right:24px; min-height:62px; }
[data-view=swap-review] #swap-confirm { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
[data-view=swap-insufficient] #swap { display:contents; }
[data-view=swap-insufficient] .pay-card { position:absolute; top:106px; left:24px; right:24px; height:188px; }
[data-view=swap-insufficient] .pay-card > .muted { font-size:12px; }
[data-view=swap-insufficient] .amount-row { margin:22px 0 16px; }
[data-view=swap-insufficient] .pay-amount { font-size:28px; letter-spacing:0; line-height:36px; }
[data-view=swap-insufficient] .amount-row { gap:8px; }
[data-view=swap-insufficient] .amount-row .pay-amount { flex:1; width:0; }
[data-view=swap-insufficient] .amount-row > strong { font-size:28px; }
[data-view=swap-insufficient] .amount-row .coin { margin-left:auto; }
[data-view=swap-insufficient] .down { font-size:12px; }
[data-view=swap-insufficient] .field { margin-top:12px; }
[data-view=swap-insufficient] .field input { min-height:40px; height:40px; padding:8px; margin:0; }
[data-view=swap-insufficient] .info-box { position:absolute; top:335px; left:24px; right:24px; min-height:62px; }
[data-view=swap-insufficient] #swap > .secondary { position:absolute; top:460px; left:24px; width:calc(100% - 48px); }
[data-view=activity] .search { position:absolute; top:67px; left:24px; right:24px; }
[data-view=activity] .chips { position:absolute; top:134px; left:24px; right:24px; }
[data-view=activity] .chip { width:80px; justify-content:center; }
[data-view=activity] .activity-list { position:absolute; top:185px; left:24px; right:24px; bottom:26px; overflow:auto; scrollbar-width:none; }
[data-view=activity] .activity-list:has(.empty-hero) { top:256px; bottom:180px; }
[data-view=activity] .empty-hero .bubble { margin-bottom:12px; }
[data-view=activity] .empty-hero p { max-width:260px; }
[data-view=activity] .sheet > .primary { position:absolute; top:562px; left:24px; width:calc(100% - 48px); }
[data-view=activity] .sheet:has(.tx) > .primary { top:auto; bottom:12px; height:44px; min-height:44px; }
[data-view=activity] .sheet:has(.tx) .activity-list { bottom:66px; }
.day { font-size:10px; line-height:16px; margin:0 0 16px; letter-spacing:0; }
.tx { height:75px; margin:0 0 12px; padding:13px; border-radius:18px; }
.tx .asset-values { font-size:11px; }
.tx .asset-values span:last-child { font-size:9px; font-weight:400; }
.tx .tx-main strong { font-size:12px; }
[data-view=detail] .hero-amount { position:absolute; top:87px; left:24px; right:24px; }
[data-view=detail] .hero-amount .bubble { width:76px; height:76px; margin-bottom:21px; }
[data-view=detail] .hero-amount .bubble .icon { width:34px; height:34px; }
[data-view=detail] .hero-amount .total { font-size:29px; }
[data-view=detail] .hero-amount .chip { margin-top:12px; font-weight:700; color:var(--muted); }
[data-view=detail] .facts { position:absolute; top:293px; left:24px; right:24px; min-height:271px; }
[data-view=detail] .facts div { border:0; }
[data-view=detail] .info-box { position:absolute; top:597px; left:24px; right:24px; }
[data-view=detail] .sheet > .primary { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
[data-view=failed] .hero-amount { position:absolute; top:122px; left:12px; right:12px; }
[data-view=failed] .hero-amount .bubble { width:104px; height:104px; margin-bottom:30px; }
[data-view=failed] .hero-amount .bubble .icon { width:42px; height:42px; }
[data-view=failed] .display { font-size:23px; line-height:32px; margin-bottom:18px; }
[data-view=failed] .hero-amount .lead { font-size:11px; line-height:21px; }
[data-view=failed] .info-box { position:absolute; top:377px; left:24px; right:24px; min-height:62px; }
[data-view=failed] .sheet > .primary { position:absolute; bottom:97px; left:24px; width:calc(100% - 48px); }
[data-view=failed] .sheet > .secondary { bottom:31px; }

/* 21–31 — wallet management, security and onboarding */
[data-view=wallets] .wallet-list { position:absolute; top:68px; left:24px; right:24px; max-height:82px; overflow:auto; }
[data-view=wallets] .wallet-list .muted { flex:none; font-size:11px; }
[data-view=wallets] .wallet-list .menu > .muted { margin-right:16px; }
[data-view=wallets] .sheet > h2 { position:absolute; top:155px; left:24px; right:24px; }
[data-view=wallets] .sheet > .menu { position:absolute; top:199px; left:24px; width:calc(100% - 48px); }
[data-view=wallets] .sheet > .menu[data-panel=addresses] { top:278px; }
[data-view=wallets] .sheet > .menu[data-panel=security] { top:357px; }
[data-view=wallets] #add-wallet { top:436px; }
[data-view=wallets] .info-box { position:absolute; top:543px; left:24px; right:24px; min-height:62px; }
[data-view=wallets] .end { position:absolute; top:651px; left:24px; right:24px; margin:0; }
[data-view=rename] .field { position:absolute; top:92px; left:24px; right:24px; }
[data-view=rename] .lead { position:absolute; top:194px; left:24px; right:24px; font-size:11px; }
[data-view=rename] #rename { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
[data-view=addresses] .sheet > .lead { position:absolute; top:66px; left:24px; right:24px; }
.address-list { position:absolute; top:113px; left:24px; right:24px; display:grid; gap:16px; }
.addr-card.menu { height:101px; position:relative; padding:16px; display:block; text-align:left; }
.addr-card.menu > .coin { position:absolute; top:16px; left:16px; }
.addr-card.menu > strong { position:absolute; left:63px; top:22px; font-size:14px; }
.addr-card.menu > .icon { position:absolute; top:25px; right:20px; filter:var(--blue-icon); }
.addr-card.menu small { position:absolute; left:16px; right:16px; bottom:17px; font-size:10px; line-height:15px; font-family:Wallet,Arial,sans-serif; }
[data-view=addresses] .info-box { position:absolute; top:623px; left:24px; right:24px; min-height:62px; }
[data-view=security] #change-pin { position:absolute; top:75px; left:24px; width:calc(100% - 48px); }
[data-view=security] h2 { position:absolute; top:174px; left:24px; }
[data-view=security] .sheet > .lead { position:absolute; top:209px; left:24px; right:24px; }
[data-view=security] .speed { position:absolute; top:246px; left:24px; right:24px; }
[data-view=security] #backup { position:absolute; top:318px; left:24px; width:calc(100% - 48px); }
[data-view=security] .info-box { position:absolute; top:429px; left:24px; right:24px; min-height:62px; }
[data-view=security] #lock { position:absolute; top:539px; left:24px; width:calc(100% - 48px); }
[data-view=security] #wipe { position:absolute; top:665px; left:24px; right:24px; min-height:44px; }
[data-view=pin] .hero-amount { position:absolute; top:88px; left:16px; right:16px; }
[data-view=pin] .hero-amount .bubble { width:66px; height:66px; margin-bottom:35px; }
[data-view=pin] .display { font-size:22px; line-height:32px; margin:0 0 12px; }
[data-view=pin] .lead { font-size:11px; }
[data-view=pin] .pin-dots { position:absolute; top:282px; left:0; right:0; }
[data-view=pin] .sheet > .pinpad { position:absolute; top:348px; left:24px; right:24px; }
[data-view=pin] .sheet > .info-box { position:absolute; top:619px; left:24px; right:24px; min-height:58px; }
[data-view=backup] .display,[data-view=create-backup] .display { position:absolute; top:202px; left:24px; right:24px; font-size:23px; }
[data-view=create-backup] .display { font-size:25px; }
[data-view=backup] .sheet > .lead,[data-view=create-backup] .lead { position:absolute; top:248px; left:24px; right:24px; }
[data-view=create-backup] .lead { font-size:11px; }
[data-view=backup] .word-grid,[data-view=create-backup] .word-grid { position:absolute; top:297px; left:24px; right:24px; }
[data-view=backup] .word-grid li { height:47px; }
[data-view=create-backup] .word-grid { top:294px; }
[data-view=backup] .sheet > .info-box,[data-view=create-backup] .info-box { position:absolute; top:565px; left:24px; right:24px; min-height:62px; }
[data-view=create-backup] .info-box { top:560px; }
[data-view=backup] #backup-auth,[data-view=backup] #hide-words { position:absolute; bottom:24px; left:24px; width:calc(100% - 48px); }
.auth-overlay { position:fixed; inset:0; z-index:30; background:#101c3966; display:grid; place-items:center; padding:20px; }
.auth-dialog { width:min(342px,100%); border-radius:24px; padding:24px; background:var(--bg); text-align:center; position:relative; }
.auth-dialog h2 { font-size:20px; margin:48px 0 24px; }
.auth-dialog .round { position:absolute; top:12px; right:12px; }
.auth-dialog .pin-dots { margin-bottom:20px; }
.auth-dialog .error { font-size:12px; }
[data-view=add] .hero { position:absolute; top:80px; left:calc(50% - 98px); width:196px; height:170px; object-fit:contain; margin:0; }
[data-view=add] .display { position:absolute; top:267px; left:24px; right:24px; font-size:27px; line-height:35px; }
[data-view=add] .lead { position:absolute; top:357px; left:24px; right:24px; }
[data-view=add] #create { position:absolute; top:438px; left:24px; width:calc(100% - 48px); }
[data-view=add] #restore { position:absolute; top:519px; left:24px; width:calc(100% - 48px); }
[data-view=add] .info-box { position:absolute; top:638px; left:24px; right:24px; min-height:65px; }
[data-view=create-pin] .sheet > .bubble,[data-view=confirm-pin] .sheet > .bubble { position:absolute; top:84px; left:calc(50% - 33px); width:66px; height:66px; }
[data-view=create-pin] .sheet > .bubble .icon,[data-view=confirm-pin] .sheet > .bubble .icon,[data-view=pin] .hero-amount .bubble .icon { width:28px; height:28px; }
[data-view=create-pin] .pin-screen h1,[data-view=confirm-pin] .pin-screen h1 { position:absolute; top:170px; left:16px; right:16px; margin:0; font-size:24px; line-height:33px; }
[data-view=create-pin] .pin-screen .lead,[data-view=confirm-pin] .pin-screen .lead { position:absolute; top:216px; left:16px; right:16px; font-size:11px; }
[data-view=create-pin] .pin-dots,[data-view=confirm-pin] .pin-dots { position:absolute; top:272px; left:0; right:0; }
[data-view=create-pin] .pinpad,[data-view=confirm-pin] .pinpad { position:absolute; top:347px; left:24px; right:24px; }
[data-view=create-pin] .pin-screen .lead:last-child,[data-view=confirm-pin] .pin-screen .lead:last-child { top:auto; bottom:99px; }
[data-view=backup-confirm] .display { position:absolute; top:77px; left:24px; right:24px; font-size:23px; }
[data-view=backup-confirm] .lead { position:absolute; top:123px; left:24px; right:24px; }
[data-view=backup-confirm] .field { position:absolute; top:175px; left:24px; right:24px; }
[data-view=backup-confirm] .field:has(.quiz-word):nth-of-type(2) { top:285px; }
[data-view=backup-confirm] .field:has(.quiz-word):nth-of-type(3) { top:395px; }
[data-view=backup-confirm] .info-box { position:absolute; top:544px; left:24px; right:24px; min-height:62px; }

/* Shorter phones scroll the page without compressing controls; wider devices
   retain the supplied mobile composition. Native safe areas are respected. */
@media (max-width:374px) {
 .sheet,.setup-page { padding-left:18px; padding-right:18px; }
 [data-view=welcome] h1 { font-size:26px; }
 .page-head h1,.setup-bar h1 { font-size:18px; }
 .menu strong { font-size:12px; }
 .menu small { font-size:9px; }
 .pin-dots { gap:20px; }
 .chip { padding:0 13px; }
 [data-view=pick] .chip { padding:0 10px; }
}
@media (prefers-reduced-motion:no-preference) { button { transition:background-color .12s; } }

/* ANK Wallet / ANKWORKS product identity. */
[data-view=welcome] .logo img { width:46px; height:46px; left:-4px; top:2px; }
[data-view=welcome] .logo strong { left:48px; top:5px; font-size:19px; line-height:25px; letter-spacing:-.5px; white-space:nowrap; }
[data-view=welcome] .logo strong span { font-weight:400; }
[data-view=welcome] .logo small { left:49px; top:31px; font-size:8px; line-height:12px; letter-spacing:.55px; }
.product-signature strong { display:block; font-size:11px; line-height:18px; }
.product-signature a { display:block; width:fit-content; margin:1px auto 0; min-height:24px; color:var(--muted); font-size:10px; line-height:24px; font-weight:400; text-decoration:none; }
.product-signature a:hover { color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
