:root {
    --paper: #fff6e9;
    --cream: #f3dfc2;
    --ink: #22170f;
    --muted: #735d4d;
    --line: rgba(47, 29, 17, .18);
    --orange: #d86424;
    --orange-dark: #9e3915;
    --charcoal: #281d17;
    --success: #1d7a4d;
    --danger: #a23b2d;
}

* { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
body { min-height: 100svh !important; display: block !important; padding: 0 !important; background: var(--paper) !important; color: var(--ink) !important; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 9px; background: var(--orange); z-index: 20; }

header { width: 100% !important; max-width: none !important; min-height: 76px; margin: 0 !important; padding: 18px clamp(18px, 6vw, 92px) !important; border-bottom: 1px solid var(--line); background: rgba(255, 246, 233, .94); }
.logo, .brand { color: var(--ink) !important; background: none !important; -webkit-text-fill-color: var(--ink) !important; font-size: 1.05rem !important; font-weight: 900 !important; letter-spacing: .04em; }
.logo-icon, .brand img { width: 35px !important; height: 35px !important; border-radius: 3px !important; filter: none !important; object-fit: cover; }
.logo-badge, .tag { border: 1px solid var(--orange) !important; border-radius: 0 !important; background: transparent !important; color: var(--orange-dark) !important; -webkit-text-fill-color: var(--orange-dark) !important; font-size: .68rem !important; font-weight: 900 !important; letter-spacing: .08em !important; }

.btn, .button { min-height: 44px; border: 1px solid var(--orange) !important; border-radius: 2px !important; padding: 10px 14px !important; background: var(--orange) !important; box-shadow: none !important; color: #fffaf2 !important; font-weight: 850 !important; }
.btn:hover, .button:hover { transform: none !important; filter: none !important; background: var(--orange-dark) !important; box-shadow: none !important; }
.btn-secondary, .button.secondary { border-color: var(--line) !important; background: transparent !important; color: var(--ink) !important; }
.btn-secondary:hover, .button.secondary:hover { background: var(--cream) !important; }
.btn-claim { background: var(--success) !important; border-color: var(--success) !important; }
.btn-claim:hover { background: #125837 !important; }

.bridge-card { width: min(100% - 32px, 720px) !important; max-width: none !important; margin: clamp(40px, 7vw, 84px) auto !important; padding: clamp(22px, 4vw, 42px) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: #fffaf2 !important; box-shadow: 12px 12px 0 var(--cream) !important; backdrop-filter: none !important; }
.card-header { margin-bottom: 28px !important; }
.card-title { font-size: clamp(1.5rem, 3vw, 2.1rem) !important; font-weight: 900 !important; letter-spacing: 0 !important; }
.network-row { min-height: 104px; padding: 18px 20px !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--paper) !important; }
.network-row:first-of-type { border-left: 5px solid var(--orange); }
.network-label, .input-header { color: var(--muted) !important; font-weight: 750 !important; letter-spacing: .05em !important; }
.network-name { color: var(--ink) !important; font-size: 1.05rem !important; }
.chain-logo { width: 27px !important; height: 27px !important; border-radius: 3px !important; }
.swap-icon-box { margin: -17px 0 !important; }
.swap-btn { width: 38px !important; height: 38px !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; background: var(--charcoal) !important; color: #fff7e9 !important; box-shadow: none !important; }
.swap-btn:hover { transform: rotate(180deg) !important; background: var(--orange) !important; color: white !important; }

.input-group { margin: 28px 0 !important; padding: 20px !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: #fffaf2 !important; }
.input-header { margin-bottom: 14px !important; }
.amount-input, input { color: var(--ink) !important; font-size: 2rem !important; font-weight: 900 !important; }
.amount-input::placeholder, input::placeholder { color: #bca995 !important; }
.token-badge { border-radius: 0 !important; background: var(--cream) !important; color: var(--ink) !important; }
.step-progress { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--paper) !important; }
.step-item { color: var(--muted) !important; }
.step-item.active { color: var(--orange-dark) !important; }
.step-item.completed { color: var(--success) !important; }
.step-dot { border-radius: 0 !important; background: #d6c6b5 !important; }
.step-item.active .step-dot { background: var(--orange) !important; box-shadow: none !important; }
.step-item.completed .step-dot { background: var(--success) !important; }
.status-box, .status { border-radius: 0 !important; }
.status-box.success, .status.ok { background: #e2f0e5 !important; border: 1px solid #94c7a2 !important; color: #145c36 !important; }
.status-box.error, .status.error { background: #f9e1db !important; border: 1px solid #d99c8e !important; color: #872d1f !important; }

main { width: min(100% - 32px, 720px) !important; margin: clamp(42px, 7vw, 82px) auto !important; }
main > h1 { color: var(--ink) !important; font-size: clamp(2rem, 5vw, 3.3rem) !important; font-weight: 900 !important; }
.lead, .details { color: var(--muted) !important; }
.panel { padding: clamp(22px, 4vw, 36px) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: #fffaf2 !important; box-shadow: 12px 12px 0 var(--cream) !important; }
.metric { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--paper) !important; }
.metric span, label { color: var(--muted) !important; font-weight: 750 !important; }
.metric strong { color: var(--ink) !important; }
.input-wrap { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--paper) !important; }
.max { border-radius: 0 !important; background: var(--cream) !important; color: var(--orange-dark) !important; }
.summary { border-left: 4px solid var(--orange) !important; background: #fff0df !important; color: var(--ink) !important; }
code { color: var(--orange-dark) !important; }

@media (max-width: 700px) {
    header { align-items: flex-start !important; flex-direction: column; gap: 14px !important; }
    header > div:last-child { width: 100%; flex-wrap: wrap; }
    header .btn, header .button { flex: 1 1 auto; }
    .bridge-card { width: min(100% - 24px, 720px) !important; margin-top: 32px !important; }
    .network-facts, .balances { grid-template-columns: 1fr !important; }
}