/* kechie.b Big Update F — transaction UX, receipts, indexer and graduation */
.f-transaction-cockpit{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:14px}.f-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px}.f-mode-tabs button,.f-slippage button{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);padding:10px;border-radius:12px}.f-mode-tabs button.active,.f-slippage button.active{border-color:rgba(130,246,173,.45);background:rgba(130,246,173,.1);color:#82f6ad}.f-amount{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.f-amount span{font-weight:900}.f-slippage{display:flex;gap:7px;flex-wrap:wrap}.f-quote-box{display:grid;gap:6px}.f-quote-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07)}.f-quote-row.total{border-bottom:0;font-size:15px}.f-lock{padding:12px;border-radius:14px;background:rgba(255,211,105,.07);border:1px solid rgba(255,211,105,.22);color:#ffd369}.f-stage-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.f-stage{padding:10px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.03);min-height:88px}.f-stage b,.f-stage small{display:block}.f-stage small{color:var(--muted);margin-top:4px}.f-receipt-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.f-state{padding:7px 10px;border-radius:999px;border:1px solid rgba(130,246,173,.3);color:#82f6ad;font-weight:900}.f-receipt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:16px 0}.f-receipt-grid>div{padding:11px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.03);min-width:0}.f-receipt-grid span,.f-receipt-grid b{display:block}.f-receipt-grid span{color:var(--muted);font-size:11px}.f-receipt-grid b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.f-timeline{display:grid;gap:0;margin:18px 0}.f-step{display:grid;grid-template-columns:20px 1fr;gap:9px;min-height:54px}.f-step>span{width:11px;height:11px;border-radius:50%;background:#82f6ad;margin-top:4px;box-shadow:0 18px 0 -5px #82f6ad}.f-step small{display:block;color:var(--muted);margin-top:3px}.f-indexer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.f-indexer-card{padding:12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03)}.f-indexer-card b,.f-indexer-card span{display:block}.f-indexer-card span{color:var(--muted);font-size:11px;margin-top:3px}
@media(max-width:900px){.f-transaction-cockpit{grid-template-columns:1fr}.f-stage-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.f-stage-grid{grid-template-columns:repeat(2,1fr)}.f-receipt-grid,.f-indexer-grid{grid-template-columns:1fr}}