/* Arrow Phase 7 — components added on top of the approved styles.css,
   using the same palette (--mint, --line, --panel, --muted). */

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.badge { display: inline-block; font-size: 11px; padding: 4px 9px; border-radius: 6px; font-weight: 600; }
.badge-ok { background: #073324; color: var(--mint); }
.badge-warn { background: #38200d; color: #ffc67a; }
.badge-danger { background: #311214; color: #ffb6b6; }
.badge-neutral, .badge-muted { background: #111a17; color: #b8c4c0; }

.status-warn { background: #ffc67a; box-shadow: 0 0 14px rgba(255, 198, 122, .55); }
.wallet-btn-warn { background: #ffc67a; }

.footer-disclaimer { flex-basis: 100%; margin: 0 0 16px; color: #66736f; font-size: 11px; line-height: 1.6; }
.site-footer { flex-wrap: wrap; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 1180px; }
.panel { border: 1px solid #1b2724; background: #080f0d; border-radius: 14px; padding: 22px; }
.panel h3 { margin: 0 0 14px; font-size: 18px; }
.panel .review-card { margin-bottom: 14px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.data-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid #1a2421; }
.data-table td { padding: 9px 6px; border-bottom: 1px solid #121a18; }
.data-table a { color: #9de6cb; }

progress { width: 100%; height: 10px; margin-bottom: 14px; accent-color: var(--mint); }

.toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #cbd4d1; margin: 14px 0; line-height: 1.6; }
.toggle input { margin-top: 4px; accent-color: var(--mint); }

.stage-list { display: grid; gap: 8px; margin: 18px 0 22px; }
.stage-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #17221f; border-radius: 10px; background: #060c0a; }
.stage-row > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1px solid #2f3b37; color: #8b9995; }
.stage-row div { display: flex; flex-direction: column; gap: 3px; }
.stage-row small { color: var(--muted); font-size: 12px; }
.stage-row small a { color: #9de6cb; }
.stage-ok > span { background: var(--mint); color: #06100d; border-color: var(--mint); }
.stage-neutral { border-color: #2a4a3f; }
.stage-neutral > span { color: var(--mint); border-color: var(--mint); }
.stage-danger > span { background: #311214; color: #ffb6b6; border-color: #5a2226; }

.flow-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.liquidity-panel { margin-top: 24px; }

/* The wallet picker uses the approved dropdown styling in styles.css unchanged. */

a.token-card, a.explore-card { display: block; }
a.explore-card { display: grid; }
.page-title h1 .muted { font-size: 28px; }

/* Phase 10 risk signals */
.risk-panel { max-width: 1180px; margin-bottom: 20px; }
.risk-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.risk-list li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: #cbd4d1; }

/* Phase 11 rehearsal: a button that cannot act must not look clickable */
button:disabled{opacity:.35;cursor:not-allowed}

/* Phase 13: token picture in the wizard */
.image-preview{display:flex;gap:14px;align-items:center;margin-top:12px}
.image-preview img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid #26312e;background:#050a09}
.image-preview div{display:flex;flex-direction:column;gap:8px;align-items:flex-start}

.token-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.launch-picture{width:88px;height:88px;object-fit:cover;border-radius:16px;border:1px solid #26312e;margin-bottom:12px;display:block}

/* Phase 13B: the risk disclosure every page carries */
.footer-risk{flex-basis:100%;order:4;margin-top:14px;padding-top:14px;border-top:1px solid var(--line,#1b2a36);color:#9fb3c2;font-size:12px;line-height:1.7;max-width:none}
.footer-risk strong{color:#eef4f7}

/* Phase 23: the picked picture, when it has not been read back yet */
.image-blank{width:72px;height:72px;border-radius:12px;border:1px dashed #26312e;background:#050a09}
.image-preview .mono{word-break:break-all}

/* Phase 23: Arrow's own file control — the browser's "No file chosen" cannot be reworded */
.file-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-pick label{cursor:pointer;margin:0}
.file-pick:focus-within label{outline:2px solid #2fd39a;outline-offset:2px}
.file-state{font-size:13px;color:#9fb3c2}
.file-state-done{color:#2fd39a}
.file-state-working{color:#d9c98a}
.file-state-failed{color:#ff8c8c}
.check-line{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:#9fb3c2;cursor:pointer}
.check-line input{width:auto;margin:0}

/* Phase 23: buying and selling are separate blocks, each with its own button */
.trade-side{border:1px solid #1b2a36;border-radius:14px;padding:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.trade-side label{margin:0}
.trade-side button{width:100%}
.trade-buy{border-color:#1f3b32}
.trade-sell{border-color:#33272b}
.trade-slippage{display:block;margin-top:4px}

/* Phase 23: the stand-in picture for a launch with none of its own */
.token-sprite{width:100%;height:100%;display:block;border-radius:inherit;image-rendering:pixelated}
.token-icon{overflow:hidden}

/* Phase 24: the trade panel — the fee, the balance and what is left, all visible before signing */
.grad-line{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#8aa79c;margin:0 0 14px;flex-wrap:wrap}
.grad-line strong{color:#2fd39a;font-weight:500}
.trade-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.trade-head strong{font-size:14px}
.trade-head span{margin-left:auto;font-size:11px;color:#8aa79c}
.amount-field{display:block;margin:0}
.amount-field > span{display:flex;align-items:center;gap:8px;border:1px solid #1d3b32;border-radius:10px;padding:8px 12px;background:#0a1714;margin-top:6px}
.amount-field input{flex:1;border:0;background:none;padding:0;font-size:18px;color:#e6f2ec;min-width:0}
.amount-field input:focus{outline:none}
.amount-field b{font-size:12px;color:#8aa79c;font-weight:400}
.trade-sell .amount-field > span{border-color:#3a2329}
.amount-chips{display:flex;gap:6px;flex-wrap:wrap}
.amount-chip{border:1px solid #1d3b32;border-radius:999px;background:none;color:#8aa79c;font-size:11px;padding:5px 12px;cursor:pointer;font-family:inherit}
.amount-chip:hover{border-color:#2fd39a;color:#2fd39a}
.amount-chip.chip-on{border-color:#2fd39a;color:#2fd39a}
.quote{border-top:1px solid #142722;padding-top:10px;font-size:12px;color:#8aa79c}
.quote > div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.quote strong{color:#e6f2ec;font-weight:400}
.sell-steps{display:flex;align-items:center;gap:6px;font-size:11px;color:#8aa79c}
.sell-steps i{width:17px;height:17px;border-radius:50%;border:1px solid #3a2329;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:10px}
.sell-steps i.step-done{background:#ff8c8c;border-color:#ff8c8c;color:#2a0509}
.sell-steps i.step-now{border-color:#ff8c8c;color:#ff8c8c}
.slippage-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:#8aa79c;margin-top:4px}
.slippage-own{display:flex;align-items:center;gap:4px;margin:0}
.slippage-own input{width:52px;padding:4px 8px;font-size:12px;background:#0a1714;border:1px solid #1d3b32;border-radius:999px;color:#e6f2ec}
.slippage-row small{width:100%;color:#6f8f84}

/* Phase 24: a review sits inside the block it belongs to */
.trade-side .review-card{margin:0}
.trade-side .flow-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.trade-side .flow-actions button{flex:1;min-width:120px}
.trade-side .info-card{margin:0}