/* SatsWallet DS2 - componentes (E1, 09/out/2026). Depende de ds2-tokens.css. Sem telas: telas entram na E2. */
/* Base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body,[data-theme]{background:var(--bg);color:var(--text)}
body{font:400 15px/1.45 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:22px}h2{font-size:17px}h3{font-size:15px}
p,dl{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--text-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:18px;height:18px}
.stack>*+*{margin-top:var(--s4)}
.section-t{font:600 13px/1 var(--f-text);color:var(--text-2);margin:var(--s5) 0 var(--s2);letter-spacing:.02em}

/* Botao */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s5);border-radius:var(--r-pill);border:1px solid transparent;font:600 15px/1 var(--f-text);cursor:pointer;transition:background var(--dur) var(--ease),opacity var(--dur);text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn.block{width:100%}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-secondary{background:var(--bg-2);color:var(--text);border-color:var(--border)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-danger{background:transparent;color:var(--err);border-color:var(--err)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:active:not(:disabled){opacity:.82}
.icon-btn{width:var(--tap);height:var(--tap);display:inline-grid;place-items:center;border-radius:var(--r-pill);border:0;background:transparent;color:var(--text);cursor:pointer}
.icon-btn:hover{background:var(--bg-2)}

/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4)}
.card.flush{padding:0;overflow:hidden}

/* Campo */
.field{display:block}
.field label{display:block;font-weight:500;font-size:14px;margin-bottom:var(--s2)}
.field .ctl{display:flex;align-items:center;gap:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s1) var(--s1) var(--s1) var(--s4);min-height:52px}
.field .ctl:focus-within{border-color:var(--text)}
.field input,.field textarea{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:16px;padding:var(--s3) 0}
.field textarea{resize:none;height:76px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-2);opacity:1}
.field .hint{font-size:13px;color:var(--text-2);margin-top:var(--s2)}
.field .msg{display:none;align-items:center;gap:6px;font-size:13px;color:var(--err);margin-top:var(--s2)}
.field.bad .ctl{border-color:var(--err)}
.field.bad .msg{display:flex}

/* Aba / segmentado */
.tabs{display:flex;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px}
.tab{flex:1;min-height:44px;min-width:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 14px/1 var(--f-text);cursor:pointer;padding:0 var(--s3);white-space:nowrap}
.tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.tabs.inline{display:inline-flex}
.tabs.inline .tab{flex:none}

/* Chip */
.chip{min-height:44px;padding:0 var(--s3);border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg-2);color:var(--text);font:500 14px/1 var(--f-text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.chip[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips .chip{flex:1 1 auto}

/* Selo BTC/XBT, troca de cadeia e netpill */
.cbadge{font:600 12px/1 var(--f-display);letter-spacing:.08em;padding:6px 10px;border-radius:var(--r-pill);border:1px solid var(--text);color:var(--text)}
.cbadge.xbt{background:var(--text);color:var(--bg)}
.chainsw{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-pill);padding:2px;gap:2px}
.chainsw button{min-height:44px;min-width:48px;padding:0 10px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:600 13px/1 var(--f-display);letter-spacing:.06em;cursor:pointer}
.chainsw button[aria-selected="true"]{background:var(--bg-2);color:var(--text)}
.netpill{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--text-2)}
.netpill svg{width:13px;height:13px}

/* Lista / linha */
.list{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s3) var(--s4);border:0;border-top:1px solid var(--border);width:100%;background:transparent;text-align:left;cursor:pointer;color:var(--text)}
.list>li:first-child>.row,.list>.row:first-child{border-top:0}
.list>li.sep>.row{border-top:6px solid var(--bg-2)}
.row:hover{background:var(--bg-2)}
.row .ic{width:40px;height:40px;border-radius:12px;background:var(--bg-2);display:grid;place-items:center;flex:none}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font-weight:500}
.row .tx span{display:block;color:var(--text-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .val{font-weight:500;text-align:right;white-space:nowrap}
.row .val span{display:block;color:var(--text-2);font-size:13px;font-weight:400}
.row .val.off,.row .chev{color:var(--text-2)}
.pos{color:var(--ok)}

/* Revisao (kv) */
.kv{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--border);margin:0}
.kv:first-child{border-top:0}
.kv dt{color:var(--text-2)}
.kv dd{margin:0;text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere}
.kv.total dd{font-family:var(--f-display);font-size:19px;font-weight:600}
.kv.coin dd{font:600 15px/1.2 var(--f-display);letter-spacing:.04em}

/* Aviso */
.note{display:flex;gap:var(--s3);align-items:flex-start;border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:14px;border:1px solid var(--border);background:var(--bg-2)}
.note.err{background:var(--err-bg);border-color:transparent;color:var(--err)}
.note.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.note.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}

/* Navegacao (5 icones) */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--col);display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:20}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;background:transparent;color:var(--text-2);font:500 11px/1.1 var(--f-text);cursor:pointer;border-radius:12px}
.nav button[aria-current="page"]{color:var(--text)}
.nav button[aria-current="page"] svg{stroke:var(--accent)}
.nav .scan svg{width:26px;height:26px}

/* Folha (sheet) */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:var(--col);transform:translate(-50%,105%);background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;border:1px solid var(--border);border-bottom:0;padding:var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));z-index:50;transition:transform var(--dur-sheet) var(--ease);max-height:calc(88vh - env(safe-area-inset-top,0px));max-height:calc(88dvh - env(safe-area-inset-top,0px));overflow:auto}
.sheet.on{transform:translate(-50%,0)}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--border);margin:6px auto var(--s3)}
.sheet .sh-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.sheet .sh-top h2{flex:1}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,12px);background:var(--text);color:var(--bg);padding:var(--s3) var(--s4);border-radius:var(--r-pill);font-weight:500;font-size:14px;display:flex;align-items:center;gap:var(--s2);opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur) var(--ease);z-index:60;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Skeleton */
.skel{background:var(--bg-2);border-radius:8px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(127,127,127,.12),transparent);transform:translateX(-100%);animation:ds2-sh 1.2s infinite}
@keyframes ds2-sh{to{transform:translateX(100%)}}
.skel-row{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);min-height:60px}
.skel.ln{height:12px}.skel.ln.w40{width:40%}.skel.ln.w60{width:60%}.skel.ln.w25{width:25%}
.skel.av{width:40px;height:40px;border-radius:12px;flex:none}
/* ===== E2: casca, Inicio, Atividade (prototipo v22; inline do prototipo virou classe) ===== */
.app{max-width:var(--col);margin:0 auto;min-height:100dvh;background:var(--bg);position:relative;padding-bottom:calc(76px + env(safe-area-inset-bottom));padding-top:env(safe-area-inset-top,0px);padding-left:max(0px,calc(env(safe-area-inset-left,0px) - max(0px,(100vw - var(--col))/2)));padding-right:max(0px,calc(env(safe-area-inset-right,0px) - max(0px,(100vw - var(--col))/2)))} /* safe-area (11/out): topo abaixo do relogio/notch; lados so quando a coluna encosta na borda */
@media (min-width:768px){.app{border-left:1px solid var(--border);border-right:1px solid var(--border)}}
.top{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);min-height:60px}
.top h1{flex:1;min-width:0}
.brand{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* barra do Inicio em tela estreita ou com zoom do Safari (relato 09/out): controles nao encolhem, a marca cede */
.top>.chainsw,.top>.icon-btn{flex:none}
@media (max-width:374px){.top{gap:var(--s1)}.brand{font-size:14px;letter-spacing:.06em}}
@media (max-width:299px){.top>.brand{display:none}.top>.chainsw{margin-right:auto}.top>.chainsw button{min-width:44px;padding:0 8px}}
@media (max-width:239px){.screen>.top{margin:0 calc(-1 * var(--s2))}.top>.icon-btn{width:44px;height:44px}}
.screen{display:none;padding:0 var(--s4) var(--s5)}
.screen.on{display:block}
.screen>.top,.screen>.hero{padding-left:0;padding-right:0}
.hero{padding:var(--s5) var(--s4) var(--s4);text-align:left}
.amount{font-family:var(--f-display);font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-.02em;margin:var(--s2) 0 var(--s1);word-break:break-word}
.amount small{font-size:20px;font-weight:500;color:var(--text-2);margin-left:6px}
.amount small.pre{margin:0 6px 0 0}
.hero .tabs.inline{margin-top:12px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.actions .btn{text-decoration:none}
.card.rails{margin-top:8px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between}
.sec-head .btn-ghost{padding:0 8px}
.tabs.hf{margin-bottom:16px;overflow-x:auto}
a.row{text-decoration:none}
.empty{text-align:center;padding:var(--s7) var(--s4)}
.empty .ic{width:56px;height:56px;border-radius:18px;background:var(--bg-2);display:grid;place-items:center;margin:0 auto var(--s4);color:var(--text-2)}
.empty p{margin:6px 0 20px}
a.btn,a.icon-btn,.nav a{text-decoration:none}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;color:var(--text-2);border-radius:12px}
@media (max-width:370px){.amount{font-size:38px}.tabs.inline .tab{padding:0 10px}}
@media (min-width:1024px){body{padding:var(--s5) 0}.app{border-radius:28px;border:1px solid var(--border);min-height:calc(100dvh - 48px);overflow:hidden}}
/* E2 R1 (Vera B1/B3): selo de situacao da linha e aviso de falha de carga */
.st{font-style:normal;font-weight:600}
.st.err{color:var(--err)}
.st.warn{color:var(--warn)}
.row.failed>.ic{color:var(--err)}
.me-err{flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.me-err>span{flex:1 1 200px}
.me-err .btn{min-height:44px}
.empty .btn[data-retry]{min-height:44px}
/* E2 R2 (Vera/Argos): total parcial e saldo desatualizado */
.bal-part{margin:0 0 var(--s3)}
.amount.stale,.stale .val{color:var(--text-2)}
/* E3 Receber (prototipo v22 :120-128, :91, :209-216; atributo inline do prototipo virou classe) */
.netgrid{display:flex;flex-wrap:wrap;gap:var(--s2)}
.netgrid .chip{flex:1 1 auto;justify-content:center}
.netgrid .chip[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.block{width:100%}
.center{text-align:center}
.left{text-align:left}
.qr{background:#FFFFFF;border-radius:var(--r-md);padding:14px;width:min(240px,70vw);aspect-ratio:1;margin:0 auto;border:1px solid var(--border)}
.qr svg{display:block;width:100%;height:100%}
.code{font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-2);overflow-wrap:anywhere;text-align:center}
.field .ctl .unit{padding-right:12px}
.btn[disabled]{opacity:.55;cursor:default}