.buying-costs { background:#fff; border:1px solid #dce4e4; border-radius:12px; padding:20px; margin:20px 0; min-width:0; }
.nearby-upgrade, .nearby-places .nearby-upgrade, #comparison-table .nearby-upgrade { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin-top:.5rem; padding:.65rem 1rem; border-radius:.4rem; background:#246655; color:white; font-size:.875rem; font-weight:600; text-decoration:none; }
.nearby-upgrade:hover, .nearby-places .nearby-upgrade:hover, #comparison-table .nearby-upgrade:hover { background:#1c5143; }
.nearby-upgrade:focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
.cost-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.cost-heading h2 { font-size:1.25rem; font-weight:700; margin:0; }
.cost-modes { display:flex; gap:4px; padding:3px; background:#f1f5f9; border-radius:8px; }
.buying-costs button { min-height:40px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:6px; color:#1d4ed8; background:#fff; cursor:pointer; font:inherit; font-size:.875rem; }
.cost-modes button { border-color:transparent; background:transparent; }
.cost-modes button[aria-pressed=true] { background:#1d4ed8; color:#fff; }
.cost-note, .cost-missing, .cost-error { font-size:.78rem; line-height:1.5; margin:8px 0; color:#64748b; }
.cost-missing { color:#85540e; } .cost-error { color:#b91c1c; }
.cost-editor { border-top:1px solid #e2e8f0; padding:10px 0; }
.cost-editor summary { cursor:pointer; color:#1d4ed8; font-size:.875rem; font-weight:600; min-height:28px; }
.cost-editor fieldset { margin:12px 0; border:0; padding:0; } .cost-editor legend { font-weight:600; margin:8px 0; }
.cost-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:10px 0; }
.cost-inputs .cost-inputs { grid-column:1/-1; margin:0; }
.cost-inputs label { display:flex; flex-direction:column; gap:5px; font-size:.8rem; color:#475569; min-width:0; }
.cost-inputs input, .cost-inputs select { min-width:0; width:100%; min-height:42px; border:1px solid #cbd5e1; background:#fff; border-radius:6px; padding:8px; color:#0f172a; }
.buying-costs :is(button,input,select,summary):focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
.cost-note a { color:#1d4ed8; text-decoration:underline; }
.cost-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:16px; }
.cost-card { min-width:0; } .cost-card h3 { font-size:.9rem; font-weight:600; margin-bottom:8px; }
.cost-lines { margin:0; font-size:.85rem; }
.cost-lines > [hidden], .buying-costs [hidden] { display:none!important; }
#comparison-table .cost-total-row { background:#eff6ff; }
#comparison-table .cost-total-row strong { color:#1d4ed8; font-size:1rem; }
.cost-lines > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:12px; padding:9px 0; border-bottom:1px solid #edf1f5; align-items:start; }
.cost-lines dt { color:#475569; } .cost-lines dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; color:#0f172a; }
.cost-lines small { display:block; font-size:.7rem; color:#64748b; margin-top:3px; line-height:1.4; font-weight:400; }
.cost-unit { color:#64748b; font-size:.7rem; }
.cost-lines .cost-total { border-top:2px solid #cbd5e1; border-bottom:0; margin-top:6px; font-weight:700; }
.cost-total dt { color:#0f172a; } .cost-total dd { color:#1d4ed8; }
.cost-table-wrap { overflow:auto; max-width:100%; grid-column:1/-1; border:1px solid #dce4e4; border-radius:8px; }
.cost-table-wrap table { border-collapse:collapse; min-width:100%; } .cost-table-wrap th,.cost-table-wrap td { padding:14px; min-width:270px; vertical-align:top; text-align:left; border-bottom:1px solid #e2e8f0; }
.cost-table-wrap th { background:#f8fafc; font-size:.85rem; } .cost-table-wrap th:first-child { min-width:150px; }
.cost-preview > p { grid-column:1/-1; } .cost-result-assumptions { padding:12px 16px; margin:12px 0; background:#eff6ff; border-radius:8px; font-size:.85rem; }
#comparison-table .cost-lines small { margin-top:3px; } #comparison-table .cost-lines > div { grid-template-columns:minmax(70px,1fr) minmax(0,1.3fr); }
@media(max-width:700px) { .cost-preview { grid-template-columns:1fr; gap:16px; } }
@media(max-width:440px) { .buying-costs { padding:16px; } .cost-inputs { grid-template-columns:1fr; } }