/* App UI on top of main.css: wallet picker, connected wallet chip, toasts, the CA pill and small additions. Uses main.css tokens. */

.modal-back{align-items:center;animation:fade .15s ease-out;background:rgba(3,4,8,.78);display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:100}
.modal{animation:rise .18s ease-out;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 30px 80px -24px rgba(0,0,0,.9),0 0 0 1px rgba(61,123,255,.08);color:var(--text);max-width:400px;padding:22px;width:100%}
.modal-head{align-items:center;display:flex;margin-bottom:8px}
.modal-head h3{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.03em;margin:0}
.modal-x{background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;color:var(--soft);font-size:18px;height:32px;line-height:1;margin-left:auto;width:32px}
.modal-x:hover{border-color:var(--line-3);color:var(--text)}
.wallet-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.wallet-opt{align-items:center;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;color:var(--text);display:flex;font-family:var(--sans);font-size:15px;font-weight:600;gap:12px;padding:11px 14px;text-align:left;transition:border-color .15s,background-color .15s;width:100%}
.wallet-opt:hover{background:var(--panel-3);border-color:rgba(61,123,255,.6)}
.wallet-opt:active{transform:translateY(1px)}
.wallet-opt .w-ico{border-radius:9px;color:#fff;display:grid;flex:none;font-size:15px;font-weight:800;height:34px;place-items:center;width:34px}
.wallet-opt .w-tag{color:var(--dim);font-size:12px;font-weight:500;margin-left:auto}

.wallet-chip{position:relative}
.wallet-menu{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.9);color:var(--text);display:flex;flex-direction:column;min-width:230px;padding:6px;position:absolute;right:0;top:calc(100% + 10px);z-index:50}
.wallet-menu .wm-head{border-bottom:1px solid var(--line);margin-bottom:4px;padding:8px 10px 10px}
.wallet-menu a,.wallet-menu button{background:none;border:0;border-radius:9px;color:var(--soft);font-family:var(--sans);font-size:14px;font-weight:500;padding:8px 10px;text-align:left}
.wallet-menu a:hover,.wallet-menu button:hover{background:var(--panel-2);color:var(--text)}

.toasts{bottom:18px;display:flex;flex-direction:column;gap:8px;left:50%;position:fixed;transform:translateX(-50%);z-index:120}
.toast{animation:rise .18s ease-out;background:var(--panel-3);border:1px solid rgba(61,123,255,.5);border-radius:12px;box-shadow:0 16px 40px -16px rgba(0,0,0,.9);color:var(--text);font-size:13px;font-weight:500;padding:10px 14px}

/* the token's contract address in the nav */
.nav-ca{display:flex;flex:none;margin-right:-6px}
.nav-ca:empty{display:none}
.ca-pill{align-items:center;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);display:inline-flex;font-family:var(--sans);font-size:13px;font-weight:600;gap:8px;height:38px;padding:0 12px 0 6px;white-space:nowrap}
button.ca-pill{cursor:pointer;transition:border-color .15s,background-color .15s}
button.ca-pill:hover{background:var(--panel-3);border-color:var(--line-3)}
button.ca-pill:active{transform:translateY(1px)}
.ca-pill svg{color:var(--muted);flex:none}
.ca-tag{background:var(--flame);border-radius:6px;color:var(--on-accent);flex:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 6px}
@media (max-width:720px){.nav-ca{justify-content:center;margin:0;order:4;width:100%}.ca-pill{height:36px}}

.statsbar .off{animation:none;background:var(--dim);box-shadow:none}
.chart-empty{align-items:center;color:var(--dim);display:flex;font-size:13px;font-weight:500;height:120px;justify-content:center}
.btn.busy{opacity:.6;pointer-events:none}
.kv-list{display:flex;flex-direction:column;font-size:13px;gap:6px}
.kv-list div{display:flex;gap:12px;justify-content:space-between}
.tape li.fresh{animation:flash 1.2s ease-out}
.pos-row .btn{font-size:13px;padding:6px 12px}
.paper-note{color:var(--dim);font-size:12px;margin-top:10px}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes flash{from{background:rgba(61,123,255,.16)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.modal-back,.modal,.toast,.tape li.fresh{animation:none}}