.fee-detail-trigger { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 2px 0; background: transparent; color: inherit; cursor: pointer; font: inherit; white-space: nowrap; }
.fee-detail-trigger:hover { color: var(--primary); }
.fee-detail-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
.fee-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(720px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.fee-drawer[open] { display: flex; flex-direction: column; animation: slidein .2s ease-out; }
.fee-drawer::backdrop { background: hsl(222.2 47.4% 11.2% / .35); }
.fee-drawer .dialog__hd { border-bottom: 1px solid var(--border); flex-shrink: 0; }
.fee-drawer .dialog__bd { padding: 20px; min-height: 0; }
.fee-drawer .dialog__ft { border-radius: 0; flex-shrink: 0; }
.fee-drawer__overview { padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--muted); }
.fee-drawer__amount { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fee-drawer .trace { padding: 0; }
.fee-drawer dl { overflow-wrap: anywhere; }
.fee-drawer .step__t { flex-wrap: wrap; }
@media (max-width: 600px) { .table-wrap .pin-l, .table-wrap .pin-r { position: static; } .fee-drawer .kv--cols2 { grid-template-columns: 100px minmax(0, 1fr); } .fee-drawer .dialog__bd { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .fee-drawer[open] { animation: none; } }