:root {
    color-scheme: light;
    --bg: #ece8e0;
    --panel: rgba(255, 254, 250, 0.96);
    --panel-soft: #f5f1e9;
    --line: #cbbfa9;
    --line-strong: #aa936c;
    --text: #172235;
    --muted: #606775;
    --gold: #93600b;
    --gold-dark: #6c4300;
    --green: #20704f;
    --red: #a1372f;
    --blue: #315f92;
    --shadow: 0 18px 44px rgba(48, 40, 28, 0.12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
    background:
        radial-gradient(circle at 8% 3%, rgba(177, 128, 43, 0.2), transparent 30%),
        radial-gradient(circle at 94% 8%, rgba(49, 95, 146, 0.13), transparent 24%),
        linear-gradient(145deg, #f7f3ec, var(--bg));
}

button, input, textarea { font: inherit; }

.page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.back-link {
    color: var(--gold-dark);
    font-size: 0.82rem;
    text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

h1, h2, p { margin-top: 0; }
h1 { margin: 8px 0 6px; font-size: clamp(1.7rem, 4vw, 2.55rem); letter-spacing: -0.04em; }
h2 { margin: 0; font-size: 1.12rem; }
.topbar p { margin-bottom: 0; color: var(--muted); }

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.trust-badges span,
.privacy-note {
    padding: 6px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--gold-dark);
    background: rgba(255, 250, 238, 0.8);
    font-size: 0.72rem;
    white-space: nowrap;
}

.warning-card,
.card,
.metric {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.warning-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 13px 16px;
    margin-bottom: 14px;
    border-left: 5px solid var(--green);
    border-radius: 12px;
}

.warning-card strong { color: var(--green); white-space: nowrap; }
.warning-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.86rem; }

.card {
    min-width: 0;
    padding: 20px;
    border-radius: 14px;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.eyebrow {
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.help { color: var(--muted); line-height: 1.65; font-size: 0.86rem; }

.start-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0 0 14px;
    list-style: none;
    counter-reset: start-step;
}

.start-guide li {
    position: relative;
    min-width: 0;
    padding: 11px 11px 11px 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-soft);
    counter-increment: start-step;
}

.start-guide li::before {
    position: absolute;
    top: 11px;
    left: 11px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--gold);
    content: counter(start-step);
    font-size: 0.68rem;
    font-weight: 800;
}

.start-guide strong,
.start-guide span { display: block; }
.start-guide strong { font-size: 0.78rem; }
.start-guide span { margin-top: 3px; color: var(--muted); font-size: 0.68rem; line-height: 1.45; }

textarea {
    display: block;
    width: 100%;
    min-height: 210px;
    padding: 14px;
    resize: vertical;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--text);
    background: #fff;
    font: 0.82rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
    outline: none;
}

textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(147, 96, 11, 0.13); }

.address-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--text);
    background: #fff;
    font: 0.86rem ui-monospace, SFMono-Regular, Consolas, monospace;
    outline: none;
}

.address-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(147, 96, 11, 0.13); }

.no-address-list {
    padding: 10px 12px;
    margin: 12px 0;
    border: 1px solid #9fc5b3;
    border-radius: 9px;
    color: #245a43;
    background: #edf8f3;
    font-size: 0.82rem;
    line-height: 1.55;
}

.setup-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0 0 14px;
    list-style: none;
}

.setup-progress-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: var(--panel-soft);
}

.setup-progress-step > span {
    display: grid;
    width: 28px;
    height: 28px;
    grid-row: span 2;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #a6a19a;
    font-size: 0.75rem;
    font-weight: 850;
}

.setup-progress-step strong,
.setup-progress-step small { min-width: 0; }
.setup-progress-step strong { color: var(--text); font-size: 0.77rem; }
.setup-progress-step small { margin-top: 2px; font-size: 0.66rem; line-height: 1.35; }
.setup-progress-step.is-current { border-color: #c29643; background: #fff7e5; }
.setup-progress-step.is-current > span { background: var(--gold); }
.setup-progress-step.is-done { border-color: #9fc5b3; background: #edf8f3; }
.setup-progress-step.is-done > span { background: var(--green); }

.advanced-import {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.gas-setup-body { min-width: 0; }
.setup-stage {
    min-width: 0;
    padding: 16px;
    border: 1px solid #d2b477;
    border-radius: 11px;
    background: linear-gradient(135deg, #fffdf8, #f7f1e4);
}

.setup-stage-head {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.setup-stage-head > span {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--gold);
    font-size: 0.67rem;
    font-weight: 850;
}

.setup-stage-head h3 { margin: 0; font-size: 1rem; }
.setup-stage-head p { margin: 4px 0 0; color: var(--muted); font-size: 0.74rem; line-height: 1.5; }
.setup-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    gap: 10px;
}

.setup-fields label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.setup-fields input[type="number"] {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--text);
    background: #fff;
    font-size: 0.86rem;
    outline: none;
}

.setup-fields input:disabled { color: var(--muted); background: #f1f0ed; }
.gas-service-line { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 0.78rem; }
.gas-service-line strong { min-width: 0; overflow-wrap: anywhere; }
.state-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #999; }
.state-dot.is-good { background: var(--green); box-shadow: 0 0 0 4px rgba(32, 112, 79, 0.12); }
.state-dot.is-error { background: var(--red); box-shadow: 0 0 0 4px rgba(161, 55, 47, 0.12); }

.setup-primary-row,
.gas-copy-row,
.gas-funding-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: end;
}

.setup-primary-row { align-items: center; margin-top: 12px; }
.setup-primary-row > span { min-width: 220px; flex: 1 1 360px; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }
.gas-quote { min-width: 0; }
.gas-quote dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.gas-quote dl > div { min-width: 0; padding: 9px 10px; background: #fff; }
.gas-quote dl > div.is-wide { grid-column: span 2; }
.gas-quote dl > div.is-total { color: #694300; background: #fff7e4; }
.gas-quote dt { color: var(--muted); font-size: 0.67rem; }
.gas-quote dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 0.76rem; }
.gas-quote dd.gas-fee-value { color: #8a5c0c; font-weight: 850; }
.gas-copy-row { margin-bottom: 9px; }
.gas-assurance {
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid #86b89f;
    border-radius: 11px;
    background: linear-gradient(135deg, #f4fbf7, #edf7f2);
}

.gas-assurance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.gas-assurance-head > span {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--green);
    font-size: 0.65rem;
    font-weight: 850;
}

.gas-assurance-head strong { color: #1d5e43; font-size: 0.84rem; }
.gas-assurance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.gas-assurance-grid > div { min-width: 0; padding: 9px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.78); }
.gas-assurance-grid > div.is-wide { grid-column: span 2; }
.gas-assurance-grid strong,
.gas-assurance-grid span { display: block; }
.gas-assurance-grid strong { color: var(--text); font-size: 0.72rem; }
.gas-assurance-grid span { margin-top: 3px; color: var(--muted); font-size: 0.67rem; line-height: 1.5; }
.gas-assurance > p { margin: 10px 0 0; color: #315c49; font-size: 0.68rem; line-height: 1.55; }

.gas-funding-warning {
    margin: 0 0 10px;
    padding: 9px 11px;
    border: 1px solid #e3bc76;
    border-radius: 9px;
    background: #fff7e7;
    color: #704a13;
    font-size: 0.72rem;
    line-height: 1.5;
}

.funding-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: flex-start;
    padding: 10px 11px;
    margin: 0 0 10px;
    border: 1px solid #cba85f;
    border-radius: 9px;
    color: #62430f;
    background: #fffdf5;
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1.5;
}

.funding-consent input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--green);
}

.funding-consent:has(input:checked) {
    border-color: #86b89f;
    color: #1d5e43;
    background: #f0f9f4;
}

.choice-label { margin: 0 0 8px; color: var(--text); font-size: 0.74rem; font-weight: 800; }
.manual-funding { padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--line-strong); }
.manual-funding summary { cursor: pointer; color: var(--muted); font-size: 0.7rem; font-weight: 750; }
.manual-funding[open] summary { margin-bottom: 8px; }
.gas-manual-funding-warning {
    margin: 9px 0 0;
    padding: 9px 10px;
    border: 1px solid #e0a6a0;
    border-radius: 8px;
    color: #84332c;
    background: #fff1ef;
    font-size: 0.68rem;
    line-height: 1.55;
}
.gas-funding-row { align-items: stretch; }
.gas-funding-row input { min-width: 260px; flex: 1 1 420px; min-height: 44px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; font: 0.74rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.gas-balance-note,
.gas-safety-note { margin: 10px 0 0; color: var(--muted); font-size: 0.7rem; line-height: 1.55; }
.gas-balance-note.is-good { color: var(--green); font-weight: 750; }
.gas-balance-note.is-error { color: var(--red); font-weight: 750; }
.gas-safety-details { margin-top: 12px; }
.gas-safety-details summary { cursor: pointer; color: var(--gold-dark); font-size: 0.72rem; font-weight: 800; }
.setup-ready { border-color: #82b79f; background: linear-gradient(135deg, #f3fbf7, #e8f5ee); }
.setup-ready .setup-stage-head > span { background: var(--green); }
.setup-start-button { min-width: 220px; min-height: 50px; }
.setup-next-note { margin: 9px 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
.manual-gas-fallback { border-top-style: dashed; }

.advanced-import summary { cursor: pointer; color: var(--gold-dark); font-size: 0.82rem; font-weight: 800; }
.advanced-import[open] summary { margin-bottom: 12px; }

.import-actions,
.action-row,
.task-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.import-actions { margin-top: 12px; }
.import-actions > span { color: var(--muted); font-size: 0.78rem; }

.button {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 750;
    transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: 0.48; }
.button.primary { color: #fff; background: linear-gradient(135deg, #765012, #b47a1d); box-shadow: 0 8px 18px rgba(118, 80, 18, 0.2); }
.button.secondary { color: var(--text); border-color: var(--line-strong); background: #fff; }
.button.ghost { color: var(--gold-dark); border-color: var(--line); background: var(--panel-soft); }
.button.danger { color: var(--red); border-color: rgba(161, 55, 47, 0.35); background: #fff6f4; }
.button.small { min-height: 38px; padding: 0 11px; font-size: 0.75rem; }
.action-button { min-width: 178px; }
.action-row .button { min-height: 48px; }
.button.is-next-action {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #765012, #b47a1d);
    box-shadow: 0 8px 18px rgba(118, 80, 18, 0.2);
}

.message { min-height: 22px; margin-top: 9px; color: var(--red); font-size: 0.8rem; }
.message.is-good { color: var(--green); }

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 14px;
}

.workspace > * { min-width: 0; }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.metric { padding: 14px 16px; border-radius: 11px; }
.metric small, .metric strong { display: block; }
.metric small { color: var(--muted); font-size: 0.7rem; }
.metric strong { margin-top: 4px; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.gas-live-ledger {
    padding: 15px 16px;
    border: 1px solid #86b89f;
    border-radius: 13px;
    background: linear-gradient(135deg, #f7fcf9, #edf7f2);
    box-shadow: var(--shadow);
}

.gas-ledger-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.gas-ledger-head small,
.gas-ledger-head strong { display: block; }
.gas-ledger-head small { color: var(--green); font-size: 0.67rem; font-weight: 850; }
.gas-ledger-head strong { margin-top: 3px; font-size: 0.88rem; }
.gas-ledger-head > span { padding: 5px 9px; border-radius: 999px; color: #1d6044; background: #dcefe5; font-size: 0.68rem; font-weight: 850; white-space: nowrap; }
.gas-ledger-head > span.is-pending { color: #76510e; background: #fff0ca; }
.gas-ledger-head > span.is-complete { color: #fff; background: var(--green); }

.gas-live-ledger dl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 0;
    border: 1px solid #c8ddd2;
    border-radius: 9px;
    background: #c8ddd2;
}

.gas-live-ledger dl > div { min-width: 0; padding: 9px 10px; background: rgba(255, 255, 255, 0.9); }
.gas-live-ledger dl > div.is-wide { grid-column: span 5; }
.gas-live-ledger dl > div.is-refund dd { color: var(--green); font-weight: 850; }
.gas-live-ledger dl > div.is-fee dd { color: #8a5c0c; font-weight: 850; }
.gas-live-ledger dt { color: var(--muted); font-size: 0.65rem; }
.gas-live-ledger dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.gas-ledger-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
.gas-ledger-links a { color: var(--blue); font-size: 0.69rem; font-weight: 750; text-decoration: none; }
.gas-ledger-links a:hover { text-decoration: underline; }
.gas-ledger-details { margin-top: 8px; color: var(--muted); font-size: 0.66rem; }
.gas-ledger-details summary { cursor: pointer; color: #315c49; font-weight: 800; }
.gas-ledger-details p { margin: 7px 0 0; line-height: 1.5; }

.state-pill {
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--muted);
    background: #eceff2;
    font-size: 0.74rem;
    font-weight: 800;
}

.state-pill.is-ready { color: #604000; background: #f4dfb1; }
.state-pill.is-pending { color: var(--blue); background: #e3edf8; }
.state-pill.is-verified { color: var(--green); background: #dff0e8; }
.state-pill.is-blocked { color: var(--red); background: #f7e0dd; }

.guide-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.4fr);
    gap: 16px;
    align-items: center;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid #d2b477;
    border-radius: 11px;
    background: linear-gradient(135deg, #fff9eb, #f7f1e4);
}

.guide-card.is-blocked { border-color: #d99a95; background: #fff1ef; }
.guide-copy small,
.guide-copy strong { display: block; }
.guide-copy small { color: var(--gold); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; }
.guide-copy strong { margin-top: 3px; font-size: 1rem; }
.guide-copy p { margin: 5px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; }

.guide-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.guide-track li {
    min-width: 0;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 0.67rem;
}

.guide-track span {
    display: grid;
    width: 21px;
    height: 21px;
    margin: 0 auto 4px;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    background: #e7e4de;
    font-size: 0.66rem;
    font-weight: 800;
}

.guide-track li.is-done { color: var(--green); border-color: #a8c9ba; background: #edf8f3; }
.guide-track li.is-done span { color: #fff; background: var(--green); }
.guide-track li.is-current { color: var(--gold-dark); border-color: #c29643; background: #fff4d9; font-weight: 800; }
.guide-track li.is-current span { color: #fff; background: var(--gold); }
.guide-track li.is-blocked { color: var(--red); border-color: #d99a95; background: #fff1ef; font-weight: 800; }
.guide-track li.is-blocked span { color: #fff; background: var(--red); }

.chain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--line);
}

.operation-details {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.operation-details summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.operation-details[open] summary { margin-bottom: 10px; }
.operation-details .chain-grid { margin-bottom: 0; }

.chain-grid > div { min-width: 0; padding: 12px 14px; background: #fff; }
.chain-grid small, .chain-grid strong { display: block; }
.chain-grid small { margin-bottom: 5px; color: var(--muted); font-size: 0.7rem; }
.address { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8rem; }

.instruction {
    padding: 13px 14px;
    margin-bottom: 12px;
    border: 1px solid #d3b36f;
    border-radius: 9px;
    color: #5e430e;
    background: #fff7e5;
    line-height: 1.55;
}

.instruction.is-good { border-color: #82b79f; color: #17583d; background: #edf8f3; }
.instruction.is-error { border-color: #d99a95; color: #842d27; background: #fff1ef; }
.instruction.is-info { border-color: #9db6d1; color: #244f7f; background: #eff6fd; }

.preflight-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 15px 0 0;
}

.preflight-list > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); }
.preflight-list dt { color: var(--muted); font-size: 0.67rem; }
.preflight-list dd { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 0.75rem; font-weight: 750; }
.preflight-list dd.is-pass { color: var(--green); }
.preflight-list dd.is-fail { color: var(--red); }

.table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
th, td { padding: 10px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
tbody tr.is-current { background: #fff7e7; }
tbody tr.is-complete { color: #3f6656; }
.table-address { min-width: 220px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.72rem; }
.tx-link { color: var(--blue); text-decoration: none; }
.tx-link:hover { text-decoration: underline; }
.tx-link + .tx-link { display: block; margin-top: 4px; }

.task-more-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.task-more-actions summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.task-more-actions[open] summary { margin-bottom: 9px; }

.detail-card { font-size: 0.8rem; }
.detail-card summary { cursor: pointer; font-weight: 800; }
.detail-card dl { display: grid; gap: 9px; margin: 15px 0 0; }
.detail-card dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.detail-card dt { color: var(--muted); }
.detail-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

@media (max-width: 860px) {
    .page { width: min(100% - 18px, 1180px); padding-top: 14px; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .trust-badges { justify-content: flex-start; }
    .warning-card { grid-template-columns: 1fr; gap: 5px; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preflight-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .start-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-card { grid-template-columns: 1fr; }
    .gas-quote dl > div.is-wide { grid-column: span 2; }
    .gas-assurance-grid { grid-template-columns: 1fr; }
    .gas-assurance-grid > div.is-wide { grid-column: span 1; }
    .gas-live-ledger dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gas-live-ledger dl > div.is-wide { grid-column: span 2; }
    .setup-fields { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .page { width: calc(100% - 12px); padding: 8px 0 32px; }
    h1 { font-size: 1.55rem; line-height: 1.15; }
    h2 { font-size: 1rem; }
    .topbar { gap: 8px; margin-bottom: 10px; }
    .topbar p { font-size: 0.72rem; line-height: 1.35; }
    .trust-badges {
        width: 100%;
        flex-wrap: nowrap;
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }
    .trust-badges span { padding: 4px 7px; font-size: 0.64rem; }
    .warning-card { padding: 8px 10px; margin-bottom: 7px; }
    .warning-card strong { font-size: 0.8rem; white-space: normal; }
    .warning-card p { display: none; }
    body.has-active-job .topbar p,
    body.has-active-job .trust-badges,
    body.has-active-job .warning-card,
    body.has-active-job .metrics { display: none; }
    body.has-active-job .topbar h1 { margin-bottom: 0; font-size: 1.2rem; }
    .card { padding: 12px; border-radius: 11px; }
    .section-head { flex-direction: column; }
    .section-head { gap: 8px; margin-bottom: 10px; }
    .import-card > .section-head {
        align-items: center;
        flex-direction: row;
        gap: 6px;
        margin-bottom: 7px;
    }
    .import-card > .section-head .privacy-note { padding: 4px 6px; font-size: 0.58rem; }
    .import-card > .help { margin-bottom: 6px; font-size: 0.7rem; line-height: 1.4; }
    .help { font-size: 0.76rem; line-height: 1.55; }
    .no-address-list { padding: 8px 9px; margin: 9px 0; font-size: 0.74rem; }
    .setup-stage { padding: 12px; }
    .setup-stage-head { gap: 8px; margin-bottom: 10px; }
    .setup-stage-head h3 { font-size: 0.9rem; }
    .setup-stage-head p { font-size: 0.68rem; }
    .chain-grid { grid-template-columns: 1fr; }
    .action-row {
        position: sticky;
        z-index: 5;
        bottom: calc(6px + env(safe-area-inset-bottom));
        padding: 7px;
        margin: 0 -4px;
        border: 1px solid rgba(170, 147, 108, 0.65);
        border-radius: 11px;
        background: rgba(255, 254, 250, 0.96);
        box-shadow: 0 10px 28px rgba(48, 40, 28, 0.2);
        backdrop-filter: blur(8px);
    }
    .action-row .button { width: 100%; min-height: 50px; }
    .preflight-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        margin-top: 10px;
        padding-bottom: 3px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .preflight-list > div { flex: 0 0 124px; padding: 8px; scroll-snap-align: start; }
    .task-actions { width: 100%; }
    .start-guide { grid-template-columns: 1fr; }
    .setup-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .setup-progress-step {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 6px;
        padding: 7px 6px;
    }
    .setup-progress-step > span { width: 24px; height: 24px; }
    .setup-progress-step strong { font-size: 0.66rem; line-height: 1.25; }
    .setup-progress-step small { display: none; }
    .setup-primary-row .button,
    .setup-start-button,
    .gas-funding-row .button { width: 100%; }
    .setup-primary-row .button,
    .setup-start-button { min-height: 50px; }
    .gas-funding-row input { width: 100%; min-width: 0; }
    .gas-assurance-head,
    .gas-ledger-head { align-items: flex-start; flex-direction: column; }
    .gas-assurance { padding: 10px; }
    .gas-assurance-head { gap: 5px; margin-bottom: 8px; }
    .gas-assurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .gas-assurance-grid > div { padding: 8px; }
    .gas-assurance-grid > div.is-wide { grid-column: span 2; }
    .gas-assurance-grid strong { font-size: 0.67rem; }
    .gas-assurance-grid span { font-size: 0.62rem; line-height: 1.42; }
    .gas-assurance > p { font-size: 0.62rem; }
    .gas-quote dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gas-quote dl > div { padding: 8px; }
    .gas-quote dl > div.is-wide,
    .gas-quote dl > div.is-total { grid-column: span 2; }
    .gas-copy-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gas-copy-row .button.primary { grid-column: span 2; min-height: 50px; }
    .gas-copy-row .button.ghost { width: 100%; }
    .gas-live-ledger { padding: 11px; }
    .gas-live-ledger dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gas-live-ledger dl > div { padding: 8px; }
    .gas-live-ledger dl > div.is-wide { grid-column: span 2; }
    .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
    .metric { min-width: 0; padding: 9px 7px; }
    .metric small { font-size: 0.58rem; line-height: 1.25; }
    .metric strong { font-size: 0.92rem; }
    .guide-card { gap: 9px; padding: 10px; margin-bottom: 9px; }
    .guide-copy strong { font-size: 0.9rem; }
    .guide-copy p { font-size: 0.68rem; }
    .guide-track {
        display: flex;
        overflow-x: auto;
        gap: 5px;
        padding-bottom: 3px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .guide-track li {
        flex: 0 0 82px;
        padding: 7px 3px;
        font-size: 0.61rem;
        scroll-snap-align: center;
    }
    .guide-track span { width: 19px; height: 19px; }
    .instruction { padding: 10px 11px; margin-bottom: 8px; font-size: 0.78rem; }
    .operation-details { margin-top: 9px; }
    .task-card .section-head { align-items: stretch; }
    .task-primary-actions .button { width: 100%; min-height: 46px; }
    .table-wrap { overflow: visible; }
    table, tbody, tr, td { display: block; width: 100%; }
    thead { display: none; }
    tbody { display: grid; gap: 7px; }
    tbody tr {
        padding: 8px 9px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fff;
    }
    tbody tr.is-current { border-color: #c29643; background: #fff7e7; }
    tbody td {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
        padding: 5px 0;
        border-bottom: 1px dashed rgba(203, 191, 169, 0.7);
        font-size: 0.7rem;
    }
    tbody td:last-child { border-bottom: 0; }
    tbody td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 0.62rem;
        font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
    }
    .table-address { min-width: 0; font-size: 0.64rem; overflow-wrap: anywhere; }
    .task-more-actions .task-actions { display: grid; grid-template-columns: 1fr; }
    .detail-card dl > div { grid-template-columns: 1fr; gap: 3px; }
}
