.wallet-page { --wallet-line: #30424e; --wallet-muted: #a6b6c2; --wallet-panel: #111c26; --wallet-text: #ecf3f7; color: var(--wallet-text); display: grid; gap: 24px; }
[data-theme="light"] .wallet-page { --wallet-line: #ccdade; --wallet-muted: #536a76; --wallet-panel: #fff; --wallet-text: #193340; }
[data-theme="light"] .wallet-page .wallet-success { color: #146b45; } [data-theme="light"] .wallet-page .wallet-error { color: #a32235; }
.wallet-summary { display: flex; gap: 32px; justify-content: space-between; align-items: center; background: var(--wallet-panel); border: 1px solid var(--wallet-line); border-radius: 20px; padding: 32px; }
.wallet-summary h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 600; margin: 12px 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }.wallet-summary h2 small { font-size: .45em; color: var(--wallet-muted); }
.wallet-eyebrow { letter-spacing: .1em; font-size: 10px; color: var(--wallet-muted); }
.wallet-page p { line-height: 1.7; color: var(--wallet-muted); font-size: 14px; }.wallet-page .wallet-note { font-size: 12px; }
.wallet-page dl { display: grid; gap: 10px; font-size: 13px; }.wallet-page dl > div { display: flex; gap: 20px; justify-content: space-between; }.wallet-page dt { color: var(--wallet-muted); }.wallet-page dd { font-variant-numeric: tabular-nums; }
.wallet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }.wallet-panel { border: 1px solid var(--wallet-line); border-radius: 16px; padding: 24px; background: var(--wallet-panel); min-width: 0; }.wallet-panel > h2 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }.wallet-panel > p { margin-bottom: 18px; }.wallet-panel > :last-child { margin-bottom: 0; }
.wallet-form { display: grid; gap: 16px; margin: 20px 0; }.wallet-form label { display: grid; gap: 8px; font-size: 13px; }.wallet-form :is(input:not([type="hidden"]),select) { border: 1px solid var(--wallet-line); background: transparent; color: var(--wallet-text); padding: 12px; min-height: 46px; min-width: 0; width: 100%; border-radius: 9px; font-size: 16px; }.wallet-form option { background: var(--wallet-panel); }.wallet-form button { min-height: 46px; }
.wallet-models { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 14px; margin: 22px 0; }.wallet-model { padding: 20px; border: 1px solid var(--wallet-line); border-radius: 12px; overflow-wrap: anywhere; }.wallet-model h3 { font-size: 14px; font-weight: 600; }.wallet-model header span { color: var(--wallet-muted); font-size: 12px; }.wallet-estimate { display: block; font-size: 22px; margin: 20px 0 6px; }.wallet-model dl { margin-top: 15px; }.wallet-price { font-size: 20px !important; margin-top: 10px; }
.wallet-model-id { display: block; margin-top: 2px; font-size: 11px; color: var(--wallet-muted); overflow-wrap: anywhere; }
.vio-buy-estimates { display: grid; gap: 10px; }
.vio-buy-estimates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vio-buy-estimates li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; }
.vio-buy-estimates li img { flex: none; width: 24px; height: 24px; padding: 3px; box-sizing: border-box; border-radius: 7px; background: #fff; object-fit: contain; }
.vio-buy-estimates li b { font-variant-numeric: tabular-nums; }
.vio-buy-estimates li small { margin-left: auto; text-align: right; color: var(--app-muted); overflow-wrap: anywhere; }
.wallet-empty { padding: 20px 0; }.wallet-error, .wallet-success { border: 1px solid; padding: 12px 16px; border-radius: 9px; }.wallet-page .wallet-error { color: #e68e99; }.wallet-page .wallet-success { color: #69cda1; }
.wallet-page table { width: 100%; font-size: 13px; text-align: left; }.wallet-page :is(td,th) { padding: 14px 12px; border-bottom: 1px solid var(--wallet-line); white-space: nowrap; }.wallet-page th { color: var(--wallet-muted); font-weight: 500; }
.wallet-page :focus-visible { outline: 2px solid #53c6ff; outline-offset: 3px; }
@media(max-width:700px) { .wallet-grid { grid-template-columns: 1fr; }.wallet-summary { flex-direction: column; align-items: stretch; padding: 24px; }.wallet-panel { padding: 20px; } }