/* ASER.TRADE: the wallet control (wallet.js), the real buy/sell panel (trade.js) and the transaction tray (app.js). */

/* ---------- top bar: Connect wallet ---------- */
.topbar-right { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.wal { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.wal-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-control); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-3); color: var(--color-ink); font: 600 12px var(--font-body); cursor: pointer; white-space: nowrap; }
.wal-btn svg { width: 15px; height: 15px; }
.wal-btn:hover { border-color: var(--color-muted); background: var(--color-paper-4); }
.wal-btn:disabled { opacity: .6; cursor: wait; }
.wal-connect { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.wal-connect:hover { background: var(--color-focus); border-color: var(--color-focus); }
.wal-on .wal-addr { font-family: var(--font-outlier); font-size: 11.5px; color: var(--color-ink-2); }
.wal-on .wal-sol { font-size: 11.5px; color: var(--color-accent); }
.wal-on.open { border-color: var(--color-accent); }
.wal-ic { width: 16px; height: 16px; border-radius: 4px; }
.wal-pr { height: 18px; }
.wal-menu { position: absolute; top: 36px; right: 0; z-index: var(--z-modal); width: 280px; display: grid; gap: 4px; padding: 10px; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-3); box-shadow: 0 20px 50px -20px #000; }
.wal-mhead { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px; border-bottom: var(--rule-hair) solid var(--color-rule); }
.wal-mhead .wal-ic { width: 28px; height: 28px; border-radius: 7px; }
.wal-mhead svg { width: 22px; height: 22px; color: var(--color-muted); }
.wal-mhead div { display: grid; min-width: 0; }
.wal-mhead b { font-size: 13px; }
.wal-mhead .mono { font-family: var(--font-outlier); font-size: 10.5px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wal-mrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; font-size: 12px; color: var(--color-muted); }
.wal-mrow b { color: var(--color-ink); font-family: var(--font-outlier); }
.wal-mbtn { display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: var(--radius-control); border: 0; background: transparent; color: var(--color-ink-2); font: 500 12.5px var(--font-body); cursor: pointer; text-decoration: none; }
.wal-mbtn:hover { background: var(--color-paper-4); color: var(--color-ink); text-decoration: none; }
.wal-mbtn.danger { color: var(--color-down); }
.wal-mtog { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; font-size: 12.5px; color: var(--color-ink-2); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); margin: 2px 0; }
.wal-mtog small { display: block; font-size: 11px; color: var(--color-muted); }
.wal-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; border: 0; background: var(--color-rule-2); cursor: pointer; padding: 0; }
.wal-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out); }
.wal-sw.on { background: var(--color-warn); }
.wal-sw.on i { transform: translateX(14px); background: var(--color-on-fill); }

/* ---------- the wallet selector ---------- */
.wal-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(0, 0, 0, .66); backdrop-filter: blur(4px); padding: 16px; }
.wal-box { width: min(420px, 100%); border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-3); padding: 16px; display: grid; gap: 10px; }
.wal-bhead { display: flex; align-items: center; justify-content: space-between; }
.wal-bhead h2 { margin: 0; font: 600 16px var(--font-display); }
.wal-note, .wal-foot { margin: 0; font-size: 12px; color: var(--color-muted); line-height: 1.45; }
.wal-list { display: grid; gap: 6px; }
.wal-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-control); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-4); color: var(--color-ink); font: 600 13.5px var(--font-body); cursor: pointer; text-align: left; }
.wal-item:hover { border-color: var(--color-accent); }
.wal-item img, .wal-item svg { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.wal-item small { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-up); }
.wal-item.busy, .wal-item:disabled { opacity: .6; cursor: wait; }
.wal-none { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-control); border: var(--rule-hair) dashed var(--color-rule-2); font-size: 12.5px; color: var(--color-ink-2); }
.wal-none b { color: var(--color-ink); }
.wal-get { display: flex; gap: 8px; margin-top: 4px; }
.wal-err { margin: 0; font-size: 12px; color: var(--color-down); }

/* ---------- the real panel (trade.js) ---------- */
.tp-real { margin-left: auto; font: 700 10.5px var(--font-body); letter-spacing: .08em; color: var(--color-up); border: 1px solid color-mix(in oklch, var(--color-up) 55%, transparent); border-radius: 4px; padding: 2px 6px; }
.tp-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-muted); }
.tp-mode .wal-sw { width: 28px; height: 16px; }
.tp-mode .wal-sw i { width: 12px; height: 12px; }
.tp-mode .wal-sw.on i { transform: translateX(12px); }
.tp-connect { display: grid; gap: 10px; justify-items: start; padding: 14px; border: 1px dashed var(--color-rule-2); border-radius: var(--radius-control); font-size: 13px; color: var(--color-ink-2); }
.tp-connect b { color: var(--color-ink); }
.tp-connect .wal-connect { height: 34px; padding: 0 16px; font-size: 13px; }
.tp-connect small { font-size: 11.5px; color: var(--color-muted); }
.tp-bal { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--color-muted); }
.tp-bal b { color: var(--color-ink-2); font-family: var(--font-outlier); font-weight: 600; }
.tp-set { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); font-size: 11.5px; color: var(--color-muted); }
.tp-set label { display: grid; gap: 3px; }
.tp-set input, .tp-set select { width: 100%; background: var(--color-paper-4); border: 1px solid var(--color-rule-2); border-radius: 4px; color: var(--color-ink); font: 600 12px var(--font-outlier); padding: 4px 6px; }
.tp-set .tp-seg { display: inline-flex; gap: 4px; }
.tp-gear { margin-left: auto; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--color-rule); background: transparent; color: var(--color-muted); font: 600 11.5px var(--font-body); cursor: pointer; }
.tp-gear.on, .tp-gear:hover { color: var(--color-ink); border-color: var(--color-rule-2); }
.tq-fee { color: var(--color-up) !important; }
.tq-warn { color: var(--color-warn); font-size: 11.5px; margin-top: 6px; }
.tq-note { color: var(--color-muted); font-size: 11.5px; margin-top: 6px; }
.tq-det { margin-top: 6px; }
.tq-det summary { cursor: pointer; font-size: 11.5px; color: var(--color-muted); list-style: none; }
.tq-det summary::before { content: "▸ "; font-size: 10px; }
.tq-det[open] summary::before { content: "▾ "; }
.tq-det[open] summary { margin-bottom: 4px; }
.tq-det .tq-grid { font-size: 11.5px; }
.tp-balnote { flex-basis: 100%; font-size: 11px; color: var(--color-warn); line-height: 1.3; }
.tp-total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-rule); font-size: 12px; color: var(--color-muted); }
.tp-total b { color: var(--color-ink); font-family: var(--font-outlier); }
.tp-status { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-control); border: 1px solid var(--color-rule-2); background: var(--color-paper-3); font-size: 12.5px; color: var(--color-ink-2); }
.tp-status.ok { border-color: color-mix(in oklch, var(--color-up) 55%, var(--color-rule)); }
.tp-status.bad { border-color: color-mix(in oklch, var(--color-down) 55%, var(--color-rule)); }
.tp-status.wait { border-color: color-mix(in oklch, var(--color-warn) 55%, var(--color-rule)); }
.tp-status b { color: var(--color-ink); }
.tp-status .st-row { display: flex; align-items: center; gap: 8px; }
.tp-status .st-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-muted); flex: none; }
.tp-status.wait .st-row i { background: var(--color-warn); animation: tp-pulse 1s infinite alternate; }
.tp-status.ok .st-row i { background: var(--color-up); }
.tp-status.bad .st-row i { background: var(--color-down); }
@keyframes tp-pulse { from { opacity: .35; } to { opacity: 1; } }
.tp-status ul { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--color-muted); }
.tp-status ul b { font-family: var(--font-outlier); font-weight: 600; color: var(--color-ink-2); }
.tp-status .st-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-status .st-acts a, .tp-status .st-acts button { font-size: 12px; }
.tp-status .mono { font-family: var(--font-outlier); font-size: 11px; color: var(--color-muted); }
.tp-go.real-buy { background: var(--color-up); }
.tp-go.real-sell { background: var(--color-down); }

/* ---------- Pulse rows: real buy ---------- */
.realtag { display: inline-flex; align-items: center; font: 700 9.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-up); border: var(--rule-hair) solid color-mix(in oklch, var(--color-up) 50%, transparent); border-radius: var(--radius-chip); padding: 1px 5px; white-space: nowrap; }
.acts .realtag { font-size: 8.5px; padding: 0 4px; }
.qb.connect { color: var(--color-ink); }
.cp-qlabel.real { color: var(--color-up); }

/* ---------- the transaction tray (bottom right): every real operation of this session ---------- */
.txtray { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); display: grid; gap: 6px; width: min(340px, calc(100vw - 32px)); }
.txtray:empty { display: none; }
.tx-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 9px 12px; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule-2); background: color-mix(in oklch, var(--color-paper-3) 92%, transparent); backdrop-filter: blur(12px); font-size: 12px; color: var(--color-ink-2); box-shadow: 0 16px 40px -16px #000; }
.tx-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-warn); animation: tp-pulse 1s infinite alternate; }
.tx-item.ok i { background: var(--color-up); animation: none; }
.tx-item.bad i { background: var(--color-down); animation: none; }
.tx-item b { color: var(--color-ink); }
.tx-item small { display: block; color: var(--color-muted); font-size: 11px; }
.tx-item a { font-size: 11.5px; color: var(--color-accent); white-space: nowrap; }
.tx-item button.close { width: 20px; height: 20px; font-size: 11px; }
.tx-item .tx-r { display: flex; align-items: center; gap: 6px; }

/* ---------- chart frames: the row and the "Selectable" menu (trade.js, velas.js) ---------- */
.cp-chart .tc-head, .p-sec .tc-head { position: relative; }
.tc-more { min-width: 26px; }
.tc-menu { position: absolute; left: 0; top: 30px; z-index: 5; display: grid; grid-template-columns: repeat(2, auto); gap: 2px 10px; padding: 8px 10px; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-3); box-shadow: 0 16px 40px -16px #000; }
.tc-mhead { grid-column: 1 / -1; font: 600 10.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.tc-mhead small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.tc-mrow { display: flex; align-items: center; gap: 4px; }
.tc-mrow.on .tc-mpick { color: var(--color-ink); background: color-mix(in oklch, var(--color-accent) 18%, transparent); }
.tc-mpin { border: 0; background: transparent; color: var(--color-rule-2); font-size: 13px; cursor: pointer; padding: 2px 4px; }
.tc-mpin.on { color: var(--color-warn); }
.tc-mpick { border: 0; background: transparent; color: var(--color-ink-2); font: 600 12px var(--font-body); cursor: pointer; padding: 4px 8px; border-radius: 4px; min-width: 44px; text-align: left; }
.tc-mpick:hover { color: var(--color-ink); background: var(--color-paper-4); }

/* ---------- INSTANT: the session key (sesion.js) ---------- */
.ins-chip { padding: 0 9px; color: var(--color-warn); border-color: color-mix(in oklch, var(--color-warn) 50%, transparent); }
.ins-chip .num { font-size: 11.5px; }
.ins-warn { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-control); border: 1px solid color-mix(in oklch, var(--color-warn) 55%, var(--color-rule)); background: color-mix(in oklch, var(--color-warn) 8%, transparent); font-size: 12.5px; color: var(--color-ink-2); }
.ins-warn b { color: var(--color-warn); }
.ins-ack { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--color-ink-2); cursor: pointer; }
.ins-ack input { margin-top: 2px; }
.ins-lim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ins-lim label, .ins-field { display: grid; gap: 3px; font-size: 11.5px; color: var(--color-muted); }
.ins-lim input, .ins-field input { width: 100%; background: var(--color-paper-4); border: 1px solid var(--color-rule-2); border-radius: 4px; color: var(--color-ink); font: 600 13px var(--font-outlier); padding: 6px 8px; min-width: 0; }
.ins-lim small { font-size: 10.5px; }
.ins-seed { padding: 10px 12px; border-radius: var(--radius-control); border: 1px dashed var(--color-warn); background: var(--color-paper-4); font-size: 12.5px; color: var(--color-ink); overflow-wrap: anywhere; cursor: copy; }
.ins-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--color-muted); min-width: 0; }
.ins-row .sigc { overflow-wrap: anywhere; text-align: right; }
.ins-row b { color: var(--color-ink); }
.ins-warn-line { margin: 0; font-size: 11.5px; color: var(--color-warn); }
.ins-tog { border: 0; padding: 0; margin: 0; flex: 1; justify-content: flex-end; }
.ins-tog > span { font-size: 11.5px; text-align: right; }
.tp-ins { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: var(--radius-control); border: 1px solid color-mix(in oklch, var(--color-warn) 45%, var(--color-rule)); font-size: 11.5px; color: var(--color-ink-2); }
.tp-ins.off { border-color: var(--color-rule); color: var(--color-muted); }
.tp-ins b { color: var(--color-warn); }
.tp-ins button { font-size: 11.5px; }
.qb.ins, .cp-qbuy.ins { border-color: color-mix(in oklch, var(--color-warn) 60%, var(--color-rule)); color: var(--color-warn); }
.realtag.ins { color: var(--color-warn); border-color: color-mix(in oklch, var(--color-warn) 50%, transparent); }
@media (max-width: 480px) { .ins-lim { grid-template-columns: 1fr; } }

/* ---------- coin page: real position ---------- */
.cp-real { font-size: 9.5px; font-weight: 700; color: var(--color-up); border: 1px solid color-mix(in oklch, var(--color-up) 50%, transparent); border-radius: var(--radius-chip); padding: 0 4px; }
.cp-pos .cp-h .mono { margin-left: auto; font-size: 10px; color: var(--color-muted); text-transform: none; letter-spacing: 0; }
.cp-posnote { margin: 8px 0 0; font-size: 11.5px; color: var(--color-muted); line-height: 1.4; }
.cp-posnote a { color: var(--color-accent); }
.cp-possub { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-rule); }

@media (max-width: 700px) {
  .wal-on .wal-sol { display: none; }
  .wal-menu { width: 260px; }
}

/* ---------- narrow columns (the coin page's right column is 340 / 300 px): nothing clipped ----------
 * Labels may shorten with an ellipsis; amounts never. Rows of two pairs become one pair per row when the
 * panel is narrower than 400 px (container query; media query fallback for browsers without them). */
/* Selectors carry one extra class (.tp, .cp-side, .cp-chart) so they win over trade.css / coin.css whatever the
 * order the stylesheets end up loaded in (the shell loads them per page). */
.cp-side, .cp-card, #tradePanel, .cp-chart { container-type: inline-size; }
.cp-side .cp-card { overflow: hidden; }
.tp .tp-go { width: 100%; box-sizing: border-box; }
.tp .tp-slip, .tp .tp-amts { row-gap: 6px; }
.tp .tp-bal b, .tp .tp-bal small { overflow-wrap: anywhere; word-break: break-word; }
.cp-side .cp-posg { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.tp, .tp > * { min-width: 0; max-width: 100%; }
.tp .tp-tabs { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.tp .tp-tabs .tp-mode { margin-left: auto; }
.tp .tp-amts { flex-wrap: wrap; min-width: 0; }
.tp .tp-amt { flex: 1 1 44px; min-width: 44px; padding: 7px 6px; }
.tp .tp-custom { flex: 1 1 64px; min-width: 0; }
.tp .tp-custom input { min-width: 0; width: 100%; }
.tp .tp-custom span { flex: none; }
.tp .tp-bal { flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.tp .tp-bal b { white-space: normal; overflow-wrap: anywhere; text-align: right; flex: 1 1 auto; }
.tp .tp-slip { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.tp .tp-sl { flex: none; }
.tp .tq-main { flex-wrap: wrap; row-gap: 2px; }
.tp .tq-main b { white-space: nowrap; }
.tp .tq-grid { grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); }
.tp .tq-grid > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp .tq-grid > b { min-width: 0; white-space: nowrap; overflow: visible; text-overflow: clip; }
.tp .tp-total { flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.tp .tp-total b { white-space: nowrap; text-align: right; flex: 1 1 auto; }
.tp .tp-total b small { white-space: normal; }
.tp .tq-warn { overflow-wrap: anywhere; }
.tp .tp-status, .tp .tp-status * { min-width: 0; overflow-wrap: anywhere; }
.tp .tp-status ul b, .tp .tp-status .sigc { white-space: normal; }
.tp .tp-set { grid-template-columns: 1fr; }
.tp .tp-connect { min-width: 0; }
.tp .tp-go { white-space: normal; line-height: 1.25; }
/* the chart head: the readout shortens; the source label stays in the head, never under the price axis */
.cp-chart .tc-head, .p-sec .tc-head { position: relative; z-index: 2; flex-wrap: wrap; }
.cp-chart .tc-ohlc, .p-sec .tc-ohlc { flex: 1 1 140px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-chart .tc-src, .p-sec .tc-src { flex: none; }
.cp-chart .tc-canvas, .p-sec .tc-canvas { position: relative; z-index: 1; overflow: hidden; }
/* the 5-minute flow and the position grids: cells may shrink, figures are never cut */
.cp-side .cp-m5g > div, .cp-side .cp-posg > div { min-width: 0; }
.cp-side .cp-m5g b, .cp-side .cp-posg b { overflow: visible; text-overflow: clip; }
@container (max-width: 400px) {
  .tp .tq-grid { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .tp .tp-custom { flex-basis: 100%; }
  .cp-side .cp-m5g, .cp-side .cp-posg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a 300 px column seen at 125 % browser zoom (240 CSS px): one figure per row everywhere */
@container (max-width: 260px) {
  .cp-side .cp-m5g, .cp-side .cp-posg { grid-template-columns: minmax(0, 1fr); }
  .cp-side .cp-m5g > div, .cp-side .cp-posg > div { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .cp-side .cp-m5g > div > b, .cp-side .cp-posg > div > b { text-align: right; }
  .cp-side .cp-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1400px) {
    .cp-side .tp .tq-grid { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
    .cp-side .tp .tp-custom { flex-basis: 100%; }
    .cp-side .cp-m5g, .cp-side .cp-posg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* ---------- the quick-buy amounts editor (✎, app.js quickEditor) ---------- */
.chip.qedit { font-family: var(--font-outlier); }
.cp-qedit { padding: 6px 9px; color: var(--color-muted); border-color: var(--color-rule); }
.cp-qedit:hover { color: var(--color-ink); background: var(--color-paper-4); }
.qedit-pop { position: fixed; z-index: var(--z-modal); width: min(320px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-3); box-shadow: 0 20px 50px -20px #000; }
.qedit-head { display: grid; gap: 2px; }
.qedit-head b { font-size: 13px; }
.qedit-head small { color: var(--color-muted); font-size: 11.5px; line-height: 1.35; }
.qedit-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 2px 8px; font-size: 12px; color: var(--color-ink-2); }
.qedit-row .input { width: 100%; font-family: var(--font-outlier); }
.qedit-row .input.bad { border-color: var(--color-down); }
.qedit-row em { grid-column: 2; font-style: normal; font-size: 11px; color: var(--color-down); }
.qedit-row em:empty { display: none; }
.qedit-acts { display: flex; gap: 6px; align-items: center; }
.qedit-acts .grow { flex: 1; }
.qedit-acts .primary { background: var(--color-up); color: var(--color-paper); border-color: transparent; }
.qedit-acts .primary:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Instant: Deposit / Withdraw (sesion.js, phase 2) ---------- */
.ins-fund { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; }
.ins-fund .ins-field { margin: 0; }
.ins-fund .ins-field input { width: 100%; font-family: var(--font-outlier); }
.ins-progreso { font-size: 12px; color: var(--color-ink-2); margin: 6px 0 0; }
.ins-firmas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 480px) { .ins-fund { grid-template-columns: 1fr; } }