/* Uses the base dashboard theme; no external dependencies. */
[data-panel="compute"] { display: grid; gap: 1.25rem; }
[data-panel="compute"][hidden] { display: none !important; }
.compute-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.compute-metrics article { display: flex; flex-direction: column; gap: .35rem; }
.compute-metrics article strong { font-size: clamp(1.1rem, 2vw, 1.65rem); font-variant-numeric: tabular-nums; }
.compute-metrics article span { color: var(--text-muted, #758193); font-size: .8rem; }
.compute-tabs { display: flex; flex-wrap: wrap; gap: .65rem; }
.compute-tabs button { display: inline-block; border: 1px solid var(--line, #dae2eb); padding: .55rem .85rem; border-radius: 10px; color: inherit; text-decoration: none; font-size: .85rem; }
.compute-tabs button:focus-visible { outline: 3px solid #377cb7; outline-offset: 2px; }
.compute-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.compute-subcard { border: 1px solid var(--line, #dce3e9); border-radius: 12px; padding: 1rem; min-width: 0; }
.compute-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.compute-heading h3 { margin: 0; }
.compute-status { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.compute-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.compute-meta { overflow-wrap: anywhere; padding: .7rem; font-size: .82rem; background: var(--panel-alt, rgba(110,125,150,.07)); border-radius: 8px; }
.compute-check { display: flex; gap: .5rem; align-items: flex-start; }
.compute-check input { width: auto; margin-top: .2rem; }
.compute-quote { padding: .8rem 1rem; border: 1px solid var(--line, #dce3e9); border-radius: 10px; }
.compute-rows { display: grid; gap: .6rem; }
.compute-row { padding: .85rem 0; border-top: 1px solid var(--line, #dce3e9); display: flex; align-items: start; gap: 1rem; justify-content: space-between; overflow-wrap: anywhere; }
.compute-row strong { font-size: .9rem; }
.compute-row small { display: block; opacity: .7; margin-top: .25rem; }
.compute-row button { flex: 0 0 auto; }
@media (max-width: 1000px) { .compute-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compute-two-column { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .compute-metrics, .compute-form-grid { grid-template-columns: 1fr; } .compute-row { flex-direction: column; } }