/* Satsuma × Spice Flow Phase 2 — AccountDisplay + account modals, themed to host tokens */

.ad-wrap{position:relative;margin-left:12px}
.ad-pill{display:flex;align-items:center;gap:6px;background:#17181b;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 11px;font-size:13.5px;white-space:nowrap;font-weight:600;color:var(--text-100);cursor:pointer;font-family:inherit}
.ad-pill:hover{border-color:rgba(247,147,26,.4)}
.ad-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none}
.ad-total{color:var(--text-300);font-weight:500}
.ad-chev{color:var(--text-400);font-size:10px}

.ad-panel{position:absolute;top:calc(100% + 10px);right:0;width:340px;background:#0c0c0e;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px;display:none;z-index:80;box-shadow:0 18px 48px rgba(0,0,0,.65);max-height:74vh;overflow-y:auto}
.ad-panel.open{display:block}
.ad-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ad-name{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.ad-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(34,197,94,.12);color:#4ade80;border-radius:999px;padding:2.5px 9px;font-size:11px;font-weight:600}
.ad-badge-dot{width:6px;height:6px;border-radius:50%;background:#10b981}
.ad-mode{display:inline-flex;align-items:center;gap:6px;background:#161616;border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--text-200);cursor:pointer;font-family:inherit}
.ad-mode:hover{border-color:rgba(247,147,26,.45)}
.ad-mode-dot{width:7px;height:7px;border-radius:50%;flex:none}
.ad-big{font-size:28px;font-weight:700;margin:6px 0 2px}
.ad-break{font-size:12.5px;color:var(--text-400);margin-bottom:10px}
.ad-addr{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-300)}
.ad-copy{background:#1a1a1a;border:none;border-radius:7px;padding:3px 9px;font-size:11px;color:var(--text-300);cursor:pointer;font-family:inherit}
.ad-copy:hover{color:var(--text-100)}
.ad-divider{height:1px;background:rgba(255,255,255,.07);margin:14px 0 10px}
.ad-sec{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-400);margin:12px 2px 8px;display:flex;justify-content:space-between;align-items:center}
.ad-sec-total{color:var(--text-300);text-transform:none;letter-spacing:0;font-size:12px}
.ad-row{display:flex;align-items:center;gap:11px;padding:7px 4px;border-radius:10px}
.ad-row:hover{background:rgba(255,255,255,.035)}
.ad-row-ic{position:relative;width:30px;height:30px;flex:none;display:flex;align-items:center}
.ad-row-chain{position:absolute;right:-3px;bottom:-3px;border:2px solid #0c0c0e;border-radius:50%;display:flex}
.ad-row-meta{flex:1;min-width:0}
.ad-row-sym{font-size:13.5px;font-weight:700}
.ad-row-sub{font-size:11.5px;color:var(--text-400)}
.ad-row-amt{text-align:right;font-size:13px;font-weight:600}
.ad-row-usd{font-size:11.5px;color:var(--text-400);font-weight:400}
.ad-pos-val{color:#4ade80}
.ad-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ad-btn{border-radius:11px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;border:none}
.ad-btn.primary{background:linear-gradient(180deg,#f5a93d,#e8920f);color:#241303}
.ad-btn.ghost{background:#161616;border:1px solid rgba(255,255,255,.1);color:var(--text-100)}
.ad-btn.ghost:hover{background:#1d1d1d}

/* account modals */
.sp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:flex-start;justify-content:center;z-index:120}
.sp-overlay.open{display:flex}
.sp-modal{margin-top:90px;width:440px;max-width:94vw;background:#0b0b0c;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;font-size:17.5px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.06)}
.sp-x{background:none;border:none;color:var(--text-300);font-size:15px;cursor:pointer;font-family:inherit}
.sp-body{padding:20px 24px 22px;position:relative}
.sp-row-label{font-size:12.5px;color:var(--text-300);margin-bottom:7px}
.sp-select{display:flex;align-items:center;gap:11px;width:100%;background:#101010;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;cursor:pointer;font-family:inherit;color:var(--text-100);text-align:left}
.sp-select:hover{border-color:rgba(247,147,26,.45)}
.sp-sel-ic{position:relative;display:flex;align-items:center;flex:none}
.sp-sel-chain{position:absolute;right:-4px;bottom:-4px;border:2px solid #101010;border-radius:50%;display:flex}
.sp-sel-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.sp-sel-meta b{font-size:14.5px}
.sp-sel-meta span{font-size:11.5px;color:var(--text-400)}
.sp-sel-bal{font-size:12px;color:var(--text-300);white-space:nowrap}
.sp-sel-chev{color:var(--text-400);font-size:10px}
.sp-pop{display:none;position:absolute;left:24px;right:24px;background:#121214;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px;z-index:10;box-shadow:0 14px 36px rgba(0,0,0,.6);max-height:240px;overflow-y:auto}
.sp-pop.open{display:block}
.sp-pop-row{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;border-radius:9px;padding:9px 10px;cursor:pointer;font-family:inherit;color:var(--text-100);text-align:left}
.sp-pop-row:hover{background:rgba(255,255,255,.05)}
.sp-recv{margin-top:4px;font-size:13px;color:var(--text-300);padding:2px 2px 0}
.sp-fees{margin-top:12px;background:#101010;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.sp-fees div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-300)}
.sp-fees div span:last-child{color:var(--text-200);font-weight:600}
.sp-cta{margin-top:14px;width:100%;border:none;border-radius:12px;padding:15px;font-size:15px;font-weight:700;font-family:inherit;background:#131313;color:var(--text-400);cursor:not-allowed}
.sp-cta.on{background:linear-gradient(180deg,#f5a93d,#e8920f);color:#241303;cursor:pointer}
.sp-powered{margin-top:12px;text-align:center;font-size:11.5px;color:var(--text-400)}
.sp-powered a{color:var(--text-300);text-decoration:none}

/* modal amount card reuse (pages that don't define .amt-card get it here) */
.sp-body .amt-card{background:#101010;border:1px solid rgba(247,147,26,.4);border-radius:13px;padding:14px 16px;margin-bottom:12px}
.sp-body .amt-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sp-body .amt-card .tk{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.sp-body .amt-card .bal{font-size:12.5px;color:var(--text-400)}
.sp-body .amt-card .bal b{color:var(--text-200);font-weight:600}
.sp-body .amt-card input{width:100%;background:none;border:none;outline:none;color:var(--text-100);font-size:28px;font-weight:600;font-family:inherit}
.sp-body .pct-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:4px}
.sp-body .pct-row button{background:#161616;border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:10px;font-size:13px;color:var(--text-200);cursor:pointer;font-family:inherit}
.sp-body .pct-row button:hover{background:#1d1d1d}

/* host-native inline fee block (swap card, add-liquidity) — host tx-details voice */
.fee-lines{margin-top:6px;background:#101010;border-radius:12px;padding:11px 16px;display:flex;flex-direction:column;gap:6px}
.fee-lines div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-400)}
.fee-lines div span:last-child{color:var(--text-300)}
.fee-attrib{font-size:11px;color:var(--text-400);text-align:right;margin-top:2px}

/* source chain badge inside host token pills */
.token-pill .src-chain{position:absolute;right:8px;bottom:-3px;border:2px solid #101010;border-radius:50%;display:flex}
.token-pill{position:relative}

/* ---------- shared Select-a-token modal (host shape + SDK chain chips) ---------- */
.as-overlay{position:fixed;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;z-index:130}
.as-overlay.open{display:flex}
.as-modal{margin-top:64px;width:620px;max-width:94vw;background:#0c0c0e;border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;max-height:82vh}
.as-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px}
.as-head h3{font-size:18px;font-weight:700;margin:0}
.as-x{background:none;border:none;color:var(--text-300);font-size:15px;cursor:pointer;font-family:inherit}
.as-search-wrap{padding:8px 24px 4px;border-top:1px solid rgba(255,255,255,.05)}
.as-search{display:flex;align-items:center;gap:10px;background:#141415;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 14px}
.as-search input{flex:1;background:none;border:none;outline:none;color:var(--text-100);font-size:14.5px;font-family:inherit}
.as-search input::placeholder{color:var(--text-400)}
.as-pop-label{padding:14px 24px 8px;font-size:13.5px;color:var(--text-300)}
.as-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:0 24px}
.as-chip{display:flex;align-items:center;gap:9px;background:#141415;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:9px 11px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text-100);position:relative}
.as-chip:hover{background:#1b1b1d}
.as-chip .nm{font-size:13.5px;font-weight:700;line-height:1.15;display:block}
.as-chip .sb{font-size:10.5px;color:var(--text-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58px;display:block}
.as-chip.dis{opacity:.45}
.as-chip .soon{position:absolute;top:-7px;right:-4px;background:#d8a23a;color:#241303;font-size:8.5px;font-weight:800;border-radius:6px;padding:2px 5px;letter-spacing:.04em}
.as-chains{display:flex;gap:8px;padding:14px 24px 2px;flex-wrap:wrap}
.as-chain-chip{display:flex;align-items:center;gap:7px;background:#141415;border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--text-300);cursor:pointer;font-family:inherit}
.as-chain-chip:hover{color:var(--text-100)}
.as-chain-chip.act{border-color:rgba(247,147,26,.6);color:var(--primary-100);background:rgba(247,147,26,.08)}
.as-list{margin-top:10px;border-top:1px solid rgba(255,255,255,.05);overflow-y:auto;padding:8px;flex:1;min-height:160px}
.as-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:12px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--text-100)}
.as-row:hover{background:#141415}
.as-row.dim{cursor:default}
.as-row .ic{position:relative;width:36px;height:36px;flex:none;display:flex;align-items:center}
.as-row .ic .cb{position:absolute;right:-3px;bottom:-1px;border:2px solid #0c0c0e;border-radius:50%;display:flex}
.as-row .meta{flex:1;min-width:0}
.as-row .sym{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px}
.as-row .sym .cp{color:var(--text-400);font-size:11px}
.as-row .nm{font-size:12.5px;color:var(--text-400);margin-top:2px}
.as-row .bal{text-align:right;font-size:14px;color:var(--text-200);font-weight:600}
.as-row .usd{font-size:11.5px;color:var(--text-400);font-weight:400;margin-top:2px}

/* faint spice-ledger tag + info affordance (Zentra feedback 2026-06-09) */
.spice-tag{color:var(--text-400);font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.spice-tag:hover{color:var(--text-300)}
.spice-info{font-size:11px;color:var(--text-400)}
.spice-tag:hover .spice-info{color:var(--primary-100)}