.mw-wrap{width:100%;max-width:760px;min-width:0;margin:0 auto;padding-block:18px;padding-inline:clamp(8px,2.5%,18px);overflow-x:clip;container:mw/inline-size}.mw-head{display:flex;min-width:0;align-items:center;gap:12px;margin-bottom:14px}.mw-head>div{min-width:0}.mw-head h2{margin:0;overflow-wrap:anywhere}.mw-head .btn{margin-left:auto;flex:0 0 auto}.mw-logo{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:#ff6600;color:white;font-size:30px;font-weight:900}.mw-net{display:inline-block;max-width:100%;color:#ff8a33;font:700 11px/1.2 var(--mono,monospace);letter-spacing:.09em;overflow-wrap:anywhere}.mw-warning{padding:12px 14px;margin:12px 0;border:1px solid rgba(255,102,0,.45);border-radius:12px;background:rgba(255,102,0,.1);font-size:13px;overflow-wrap:anywhere}.mw-balance,.mw-card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin:12px 0}.mw-balance{display:flex;flex-direction:column;gap:5px}.mw-balance>strong{max-width:100%;font-size:clamp(25px,7cqi,44px);line-height:1.12;color:#ff8a33;overflow-wrap:anywhere}.mw-balance strong small{font-size:.38em}.mw-actions{display:flex;gap:10px;margin:12px 0}.mw-actions>*{flex:1;min-width:0}.mw-card h3{margin:0 0 12px}.mw-address code,.mw-modal code{display:block;max-width:100%;white-space:normal;word-break:break-all;overflow-wrap:anywhere;padding:10px;background:var(--panel2);border-radius:8px;margin-bottom:10px}.mw-tx{display:grid;min-width:0;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--line)}.mw-tx:first-child{border-top:0}.mw-tx>span{min-width:0}.mw-tx small{display:block;color:var(--muted);overflow-wrap:anywhere}.mw-tx strong{max-width:100%;overflow-wrap:anywhere;text-align:end}.mw-dir{font-size:20px}.mw-dir.in{color:var(--green)}.mw-dir.out{color:#ff8a33}.mw-empty{color:var(--muted);padding:20px;text-align:center}.mw-syncing{border-color:rgba(255,138,51,.55)}.mw-syncing h3{color:#ff8a33}.mw-syncing p{margin:0;color:var(--muted);font-size:13px}.mw-tx-pending{opacity:.74}.mw-tx-pending b{font-style:italic}.mw-unavailable{text-align:center}.mw-modal{min-width:0;max-width:100%;overflow-wrap:anywhere}.mw-modal label{display:block;min-width:0;margin:12px 0;font-size:13px}.mw-modal label .input{display:block;width:100%;min-width:0;margin-top:6px;font-size:16px}.mw-qr{display:grid;place-items:center;width:100%;min-height:min(210px,65vw);margin:12px 0}.mw-qr img{display:block;width:min(208px,100%);height:auto;aspect-ratio:1;padding:8px;border-radius:10px;background:#fff}.mw-confirm{display:grid;min-width:0;gap:7px;margin:14px 0}.mw-confirm strong{max-width:100%;font-size:clamp(22px,7vw,26px);color:#ff8a33;overflow-wrap:anywhere}.mw-check{display:flex!important;gap:8px;align-items:flex-start}.mw-check input{flex:0 0 auto;margin-top:3px}
/* The wallet's send sheet must remain scrollable above an on-screen keyboard and clear notches/home
   indicators. The shared modal owns the scroll, while scroll-padding keeps a focused input/button
   from landing flush against the keyboard edge. */
.modal:has(.mw-modal){width:min(720px,calc(100vw - 24px));max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);min-width:0;overscroll-behavior:contain;scroll-padding-block:72px calc(28px + env(safe-area-inset-bottom))}
.modal-bg:has(.mw-modal){padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));overflow:hidden}
.mw-scan-stage{display:grid;place-items:center;gap:8px;width:100%;min-width:0;margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);overflow:hidden}.mw-scan-stage.hidden{display:none}.mw-scan-stage video{display:block;width:100%;max-width:360px;max-height:min(42dvh,320px);object-fit:cover;border-radius:9px;background:#000}.mw-scan-stage span{text-align:center;color:var(--muted);font-size:12px}
/* THE WALLET IS SIZED BY THE SPACE IT IS IN, NOT BY THE SCREEN.
   `#feed` is shared by every view, and on the windowed desktop that feed is inside an .osw window
   whose width has nothing to do with the viewport. Keyed on @media, the phone layout never fired
   there: measured in a 480px window on a 2560px screen, the balance stayed at 44px and wrapped to
   THREE LINES, Send/Receive stayed jammed side by side, and the transaction list kept its
   three-column grid. Same markup, same stylesheet, and it only looked right when the whole screen
   happened to be small. @container asks the right question. */
@container mw (max-width:600px){
  .mw-head{gap:8px}.mw-logo{flex-basis:42px;width:42px;height:42px;font-size:27px}
  .mw-balance,.mw-card{padding:14px}
  .mw-tx{grid-template-columns:28px minmax(0,1fr)}.mw-tx>strong{grid-column:2;text-align:start}
  .mw-actions{flex-direction:column}.mw-actions .btn{min-height:44px}}
@container mw (max-width:340px){
  .mw-head h2{font-size:19px}.mw-head .btn{padding-inline:8px}
  .mw-balance,.mw-card{padding:12px}.mw-warning{padding:10px}}
/* Viewport-only, and correctly so: the phone's safe areas and its bottom nav bar are facts about
   the SCREEN, and a modal is sized by the screen rather than by any window. */
@media(max-width:600px){
  .mw-wrap{padding:10px max(8px,env(safe-area-inset-right)) calc(74px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .modal:has(.mw-modal){padding:16px 14px}.mw-modal .mw-actions{gap:8px}.mw-modal .btn{min-height:44px}}
@media(max-width:340px){.mw-qr{min-height:0}.mw-qr img{width:min(196px,100%)}}
/* The transaction id under each row. Shown for every transfer that has one and always copyable —
   copying a txid leaks nothing, where opening it on an explorer tells that explorer who is looking
   at which payment. Both are plain buttons rather than links: leaving the app is PC.openExternal's
   job in all three shells, and the explorer button is gated on a one-time question first. */
.mw-tx .mw-txid{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:2px;font:11px/1.5 var(--mono,monospace)}
.mw-tx .mw-txid>button,.mw-tx .mw-txid>span{max-width:100%;overflow-wrap:anywhere}
.mw-tx .mw-txid>button{padding:0;border:0;background:none;font:inherit;color:#ff8a33;cursor:pointer;text-align:start}
.mw-tx-open{text-decoration:underline;text-underline-offset:2px}
.mw-tx-copy{color:var(--muted)!important;text-decoration:underline dotted;text-underline-offset:2px}
.mw-tx .mw-txid>button:hover,.mw-tx .mw-txid>button:focus-visible{filter:brightness(1.25)}
.mw-tx-id{color:var(--muted)}