.operating-costs { display:grid; gap:16px; min-width:0; color:#203a34; }
.cost-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cost-head h1 { margin:0; font-size:26px; letter-spacing:-.04em; }
.cost-head p { margin:6px 0 0; color:#71857e; font-size:12px; }
.cost-tabs { display:flex; gap:4px; max-width:100%; overflow-x:auto; padding:5px; border:1px solid #dde7e1; border-radius:12px; background:white; }
.cost-tabs button { flex:0 0 auto; min-height:42px; padding:0 16px; border:0; border-radius:8px; background:transparent; color:#6a8177; font-size:12px; font-weight:650; transition:background-color .16s,color .16s; }
.cost-tabs button:hover { background:#f2f6f3; }
.cost-tabs button.active { background:#e5f1eb; color:#127467; }
.cost-tabs button:active { transform:translateY(1px); }
.operating-costs :is(button,a,select,input,.cost-table-scroll,summary):focus-visible { outline:2px solid #197b70; outline-offset:2px; }
.cost-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.cost-controls label { display:grid; gap:6px; color:#33574b; font-size:11px; font-weight:650; }
.cost-controls :is(input,select) { min-width:160px; height:40px; padding:0 12px; border:1px solid #d4e2da; border-radius:9px; background:white; color:#203a34; font:inherit; }
.cost-search { flex:0 1 260px; }
.cost-sync { margin-left:auto; color:#778980; font-size:10px; line-height:1.8; }
.cost-table-panel { min-width:0; padding:0; overflow:hidden; }
.cost-table-title { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:18px 20px; border-bottom:1px solid #e3ebe6; }
.cost-table-title h2 { margin:0; font-size:15px; }
.cost-table-title span { color:#7a8b83; font-size:11px; }
.cost-table-title a { margin-left:auto; color:#16786b; font-size:11px; }
.cost-table-scroll { max-width:100%; overflow:auto; max-height:65dvh; }
.cost-table-scroll table { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
.cost-table-scroll :is(th,td) { max-width:300px; min-width:150px; padding:14px 16px; border-right:1px solid #e6ece8; border-bottom:1px solid #e6ece8; vertical-align:middle; overflow-wrap:anywhere; white-space:normal; }
.cost-table-scroll th { position:sticky; top:0; z-index:2; max-width:240px; background:#eff5f1; color:#4a6558; font-size:11px; text-align:left; }
.cost-table-scroll :is(th,td):first-child { position:sticky; left:0; background:#f7faf8; min-width:180px; z-index:1; box-shadow:1px 0 #dce7df; }
.cost-table-scroll th:first-child { z-index:3; background:#eff5f1; }
.cost-table-scroll tr:nth-child(even) td:not(:first-child) { background:#fafcfb; }
.cost-number { text-align:right; font-variant-numeric:tabular-nums; }
.cost-missing { color:#9aa79e; }
.cost-pagination { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:14px 20px; color:#7a8b83; font-size:11px; }
.cost-source-note { color:#7b8d83; font-size:11px; line-height:1.8; }
.cost-source-note summary { cursor:pointer; width:fit-content; }
.cost-source-note p { max-width:80ch; }
.cost-error { padding:24px; border:1px solid #eed5c7; border-radius:12px; color:#945329; background:#fffaf5; }
.cost-skeleton { display:grid; gap:12px; padding:24px; border:1px solid #e2eae5; border-radius:12px; background:white; }
.cost-skeleton span { height:36px; border-radius:6px; background:#eef4f0; }
@media(max-width:640px) { .cost-head h1 { font-size:22px; } .cost-controls { display:grid; grid-template-columns:1fr 1fr; } .cost-controls label { min-width:0; } .cost-controls :is(input,select) { width:100%; min-width:0; min-height:44px; } .cost-sync { grid-column:1/-1; margin:0; } .cost-pagination { gap:8px; padding:12px; } .cost-tabs button { min-height:44px; } }
@media(prefers-reduced-motion:reduce) { .cost-tabs button { transition:none; } }