:root {
  color-scheme: light;
  --cp-bg: #f8fafc;
  --cp-bg-elevated: #f8fafc;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f3f2f1;
  --cp-border: #e2e8f0;
  --cp-border-strong: #cbd5e1;
  --cp-text: #201f1e;
  --cp-text-muted: #334155;
  --cp-text-soft: #64748b;
  --cp-accent: #0078d4;
  --cp-accent-hover: #005a9e;
  --cp-accent-soft: #eef6fc;
  --cp-accent-fg: #ffffff;
  --cp-success: #16a34a;
  --cp-danger: #dc2626;
  --cp-warning: #f59e0b;
  --cp-link: #0078d4;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  --cp-overlay: rgba(255, 255, 255, 0.8);
  --cp-panel: rgba(255, 255, 255, 0.86);
  --cp-panel-strong: rgba(255, 255, 255, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.55);
  --cp-highlight: rgba(0, 120, 212, 0.12);
  --cp-table-header: #0078d4;
  --cp-table-header-text: #ffffff;
  --cp-table-header-border: #edebe9;
  --cp-table-row: #ffffff;
  --cp-table-row-alt: #cfe6fb;
  --cp-table-row-hover: #cfebd4;
  --cp-table-row-selected: #cfebd4;
  --cp-table-row-active-text: #201f1e;
  --cp-cloud-selected-bg: #cfe6fb;
  --cp-cloud-selected-icon: #005a9e;
  --cp-filter-button-bg: rgba(255, 255, 255, 0.2);
  --cp-filter-button-hover: rgba(255, 255, 255, 0.4);
  --cp-filter-active-text: #1e293b;
  --cp-filter-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #111111;
  --cp-bg-elevated: #111111;
  --cp-surface: #1b1a19;
  --cp-surface-soft: #252423;
  --cp-border: #252423;
  --cp-border-strong: #484644;
  --cp-text: #ffffff;
  --cp-text-muted: #cbd5e1;
  --cp-text-soft: #94a3b8;
  --cp-accent: #0078d4;
  --cp-accent-hover: #005a9e;
  --cp-accent-soft: rgba(0, 69, 120, 0.2);
  --cp-accent-fg: #ffffff;
  --cp-success: #4ade80;
  --cp-danger: #f87171;
  --cp-warning: #fbbf24;
  --cp-link: #60a5fa;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  --cp-overlay: rgba(17, 17, 17, 0.88);
  --cp-panel: rgba(27, 26, 25, 0.72);
  --cp-panel-strong: rgba(27, 26, 25, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.04);
  --cp-highlight: rgba(0, 120, 212, 0.22);
  --cp-table-row: #1b1a19;
  --cp-table-row-alt: #201f1e;
  --cp-table-row-hover: #11575b;
  --cp-table-row-selected: #11575b;
  --cp-table-row-active-text: #ffffff;
  --cp-cloud-selected-bg: #004578;
  --cp-cloud-selected-icon: #ffffff;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; color: var(--cp-text); background: var(--cp-bg-elevated); font: 14px/1.5 "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button, a, input, select { -webkit-tap-highlight-color: var(--cp-highlight); }
button { background: none; border: 0; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:hover:not(:disabled), .icon-button:hover { background: var(--cp-surface-soft); }
:focus-visible { outline: 2px solid var(--cp-link); outline-offset: 3px; }
a { color: var(--cp-link); }
svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.7; }
.topbar { min-height: 62px; background: var(--cp-surface); border-bottom: 1px solid var(--cp-border); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 40px; }
.header-notice { min-width: 0; color: var(--cp-text-soft); font-size: 11px; line-height: 1.5; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cp-text); font-size: 19px; font-weight: 500; }
.brand strong { font-weight: 750; }
.brand-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.brand-copy > span { white-space: nowrap; }
.brand small { color: var(--cp-text-soft); font-size: 11px; white-space: nowrap; }
.brand-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--cp-accent); background: var(--cp-accent-soft); flex-shrink: 0; }
.brand-symbol svg { width: 22px; height: 22px; }
.top-actions { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--cp-border); border-radius: 6px; color: var(--cp-text-muted); text-decoration: none; flex-shrink: 0; }
#theme { padding: 0; }
.theme-glyph { width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, #111 0 50%, #fff 50% 100%); }
main { max-width: 1800px; margin: auto; padding: 10px 40px 16px; }
.eyebrow { font-size: 10px; font-weight: 650; color: var(--cp-text-soft); margin: 0 0 6px; }
.sync-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-width: 0; }
#updated { font-size: 12px; color: var(--cp-text-soft); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--cp-border); border-radius: 6px; font-size: 12px; background: var(--cp-surface); white-space: nowrap; }
.button svg { width: 15px; height: 15px; }
.cloud-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.cloud-button { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 8px; text-align: left; transition: background .16s, border-color .16s; }
.cloud-card-heading { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 0; }
.cloud-card-heading > svg:first-child { width: 21px; height: 21px; color: var(--cp-text-soft); }
.cloud-name { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.cloud-name strong { font-size: 14px; font-weight: 650; }
.cloud-name small { font-size: 10px; color: var(--cp-text-soft); }
.cloud-button .currency { margin-left: 4px; font-size: 10px; color: var(--cp-text-soft); }
.cloud-check { color: var(--cp-accent); visibility: hidden; width: 18px; }
.cloud-button.active, .cloud-button.active:hover:not(:disabled) { border-color: var(--cp-accent); background: var(--cp-cloud-selected-bg); box-shadow: inset 0 0 0 1px var(--cp-accent); }
.cloud-button.active .cloud-card-heading > svg:first-child, .cloud-button.active .cloud-check { color: var(--cp-cloud-selected-icon); }
.cloud-button.active .cloud-check { visibility: visible; }
.cloud-card-stats { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; flex: 1; padding-left: 12px; border-left: 1px solid var(--cp-border); }
.cloud-card-stats > span { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.cloud-card-stats > span + span { border-left: 1px solid var(--cp-border); padding-left: 10px; }
.cloud-card-stats small { font-size: 11px; color: var(--cp-text-soft); }
.cloud-card-stats strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.account-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding-bottom: 10px; margin-bottom: 10px; }
.account-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-text-muted); white-space: nowrap; }
.account-label svg { width: 15px; height: 15px; }
.account-user { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--cp-text-soft); }
.account-toolbar .field { flex: 0 1 340px; min-width: 180px; max-width: 100%; height: 34px; }
.account-toolbar .button { padding: 6px 10px; }
.account-toolbar [hidden] { display: none !important; }
.account-status { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--cp-text-soft); }
.account-status.error { color: var(--cp-danger); }
.workspace { background: var(--cp-surface); border-top: 2px solid var(--cp-text); padding-top: 8px; min-width: 0; }
h2 { font-size: 17px; font-weight: 650; margin: 0; }
.filter-toolbar { overflow-x: auto; padding: 3px 3px 6px; margin: -3px -3px 4px; scrollbar-width: thin; }
.filters { --filter-height: 34px; --filter-width: 200px; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; min-width: 1520px; }
.search-field { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: var(--filter-height); border: 1px solid var(--cp-border); border-radius: 6px; flex: 1 1 var(--filter-width); min-width: 180px; }
.search-field svg { width: 16px; height: 16px; color: var(--cp-text-soft); }
.search-field input { border: 0; padding: 0; background: none; width: 100%; min-width: 0; outline-offset: 7px; font-size: 12px; }
.field { display: flex; align-items: center; border: 1px solid var(--cp-border); border-radius: 6px; height: 38px; min-width: 0; }
.field span { padding-left: 10px; font-size: 12px; white-space: nowrap; color: var(--cp-text-soft); }
.field select { background: none; border: 0; padding: 6px; width: 100%; min-width: 0; font-size: 12px; }
.filters .field { flex: 1 1 var(--filter-width); min-width: 180px; height: var(--filter-height); }
.filters .add-region { flex: 0 0 var(--filter-height); width: var(--filter-height); height: var(--filter-height); }
option { background: var(--cp-surface); }
.segmented { display: flex; align-items: center; border: 1px solid var(--cp-border); border-radius: 6px; padding: 2px; height: var(--filter-height); flex: 1 1 var(--filter-width); min-width: 180px; }
.segmented button { padding: 4px 8px; font-size: 12px; border-radius: 4px; height: 28px; flex: 1; }
.segmented .selected { color: var(--cp-accent); background: var(--cp-accent-soft); font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: nowrap; max-width: 220px; overflow-x: auto; scrollbar-width: thin; flex: 0 0 auto; }
.chip { display: flex; align-items: center; gap: 6px; height: var(--filter-height); background: var(--cp-surface-soft); border: 1px solid var(--cp-border); font-size: 11px; padding: 3px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.chip button { display: flex; padding: 1px; }
.chip svg { width: 12px; height: 12px; }
.ranges { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ranges label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--cp-text-muted); white-space: nowrap; }
.ranges input { width: 56px; height: var(--filter-height); border: 1px solid var(--cp-border); border-radius: 4px; padding: 4px 5px; font-size: 11px; background: var(--cp-surface); }
.text-button { color: var(--cp-link); padding: 4px 0; font-size: 11px; white-space: nowrap; }
.notices:empty { display: none; }
.notice { display: flex; gap: 8px; padding: 9px 12px; margin-bottom: 7px; font-size: 12px; color: var(--cp-text-muted); border-left: 2px solid var(--cp-warning); background: var(--cp-surface-soft); overflow-wrap: anywhere; }
.notice svg { width: 15px; height: 15px; margin-top: 2px; }
.notice.loading { border-color: var(--cp-link); }
.notice.error { border-color: var(--cp-danger); }
.table-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 11px; color: var(--cp-text-soft); gap: 8px 12px; }
.table-meta-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.result-total { white-space: nowrap; }
.result-total strong { color: var(--cp-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.table-meta-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.table-meta-actions .button { padding: 5px 10px; font-size: 11px; }
.table-meta b { color: var(--cp-accent); font-weight: 600; margin-left: 5px; }
.table-scroll { overflow: auto; max-height: 720px; min-height: 240px; border-top: 1px solid var(--cp-border); border-bottom: 1px solid var(--cp-border); }
table { border-collapse: separate; border-spacing: 0; width: 100%; white-space: nowrap; font-size: 12px; }
th { background: var(--cp-table-header); position: sticky; top: 0; z-index: 1; text-align: left; height: 42px; border-bottom: 1px solid var(--cp-table-header-border); font-size: 14px; color: var(--cp-table-header-text); font-weight: 700; padding: 0 12px; }
th button { display: inline-flex; align-items: center; gap: 6px; font-size: inherit; font-weight: inherit; padding: 10px 0; }
th svg { width: 12px; height: 12px; opacity: .5; }
th[aria-sort] button { color: var(--cp-table-header-text); }
th[aria-sort] svg { opacity: 1; }
th button:hover:not(:disabled) { background: var(--cp-table-header); }
.column-header { display: inline-flex; align-items: center; gap: 4px; }
th .column-filter-button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 3px; background: var(--cp-filter-button-bg); color: var(--cp-table-header-text); }
th .column-filter-button.active { background: var(--cp-table-header-text); color: var(--cp-filter-active-text); }
th .column-filter-button:hover:not(:disabled):not(.active) { background: var(--cp-filter-button-hover); }
th .column-filter-button.active:hover:not(:disabled) { background: var(--cp-table-header-text); }
th .column-filter-button svg { width: 12px; height: 12px; opacity: 1; }
.column-filter-panel { position: fixed; inset: auto; margin: 0; width: 250px; max-width: calc(100vw - 16px); max-height: min(440px, 70vh); padding: 12px; border: 1px solid var(--cp-border-strong); border-radius: 8px; background: var(--cp-surface); color: var(--cp-text); box-shadow: var(--cp-filter-shadow); overflow-y: auto; font-size: 12px; }
.column-filter-panel:popover-open { display: flex; flex-direction: column; gap: 8px; }
.column-filter-panel > strong { font-size: 12px; font-weight: 600; }
.column-filter-panel > input { width: 100%; padding: 5px 8px; border: 1px solid var(--cp-border-strong); border-radius: 5px; background: var(--cp-surface); font-size: 12px; }
.column-filter-commands { display: flex; gap: 10px; }
.column-filter-commands button { display: inline-flex; align-items: center; gap: 3px; padding: 1px 0; color: var(--cp-link); font-size: 11px; }
.column-filter-commands button:last-child { color: var(--cp-danger); }
.column-filter-commands svg { width: 12px; height: 12px; }
.column-filter-options { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; }
.column-filter-options label { display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.column-filter-options label:hover { background: var(--cp-surface-soft); }
.column-filter-options input { margin: 0; accent-color: var(--cp-accent); }
.column-filter-options small { margin-left: auto; color: var(--cp-text-soft); font-variant-numeric: tabular-nums; }
.column-filter-empty { margin: 4px 5px; color: var(--cp-text-soft); }
th:first-child, td:first-child { padding-left: 16px; }
td { padding: 12px; border-bottom: 1px solid var(--cp-border); height: 60px; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { background: var(--cp-table-row); }
tbody tr:nth-child(even) { background: var(--cp-table-row-alt); }
tbody tr:hover { background: var(--cp-table-row-hover); }
tbody tr.selected, tbody tr[aria-selected="true"] { background: var(--cp-table-row-selected); }
tbody tr:hover td, tbody tr.selected td, tbody tr[aria-selected="true"] td { color: var(--cp-table-row-active-text); }
td:first-child strong { font-family: Consolas, "Courier New", Courier, monospace; font-size: 12px; font-weight: 600; }
td small { display: block; margin-top: 2px; color: var(--cp-text-soft); font-size: 10px; }
.price { text-align: right; }
th.price button { justify-content: flex-end; }
td.price { font-family: Consolas, "Courier New", Courier, monospace; }
td.payg { font-weight: 600; }
.saving-rate { color: var(--cp-text-muted); font-weight: 500; }
.saving-rate.is-negative { color: var(--cp-danger); }
.missing { color: var(--cp-text-soft); font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 5px; color: var(--cp-text-muted); font-size: 11px; }
.status svg { width: 12px; height: 12px; }
.status.restricted { color: var(--cp-warning); }
.row-detail { border: 0; width: 26px; height: 26px; }
.empty-state { text-align: center; display: grid; justify-items: center; padding: 56px 16px; }
.empty-state > svg { width: 36px; height: 36px; color: var(--cp-text-soft); margin-bottom: 12px; }
.empty-state h3 { font-size: 15px; font-weight: 600; margin: 0 0 7px; }
.empty-state p { margin: 0; font-size: 12px; color: var(--cp-text-soft); max-width: 460px; }
.empty-state[hidden] { display: none; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 11px; color: var(--cp-text-soft); gap: 12px; }
.pagination > div { display: flex; align-items: center; gap: 10px; }
.pagination select { border: 1px solid var(--cp-border); border-radius: 4px; padding: 4px; margin: 0 6px; background: var(--cp-surface); }
.pagination .icon-button { width: 28px; height: 28px; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 10px; color: var(--cp-text-soft); }
footer span:first-child { display: flex; gap: 6px; align-items: flex-start; }
footer svg { width: 13px; height: 13px; margin-top: 1px; }
dialog { max-width: min(680px, calc(100vw - 32px)); width: 680px; max-height: 85vh; padding: 24px; border: 1px solid var(--cp-border); border-radius: 8px; background: var(--cp-surface); color: var(--cp-text); box-shadow: var(--cp-shadow); }
dialog::backdrop { background: var(--cp-overlay); }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--cp-border); padding-bottom: 18px; }
.compare-field { margin: 20px 0; }
#compare-dialog { max-width: min(440px, calc(100vw - 32px)); }
#detail-title { overflow-wrap: anywhere; font-family: Consolas, "Courier New", Courier, monospace; }
.detail-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 0; }
.detail-specs span { font-size: 11px; color: var(--cp-text-soft); display: block; }
.detail-specs strong { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; }
.detail-price { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--cp-border); }
.detail-total { text-align: right; flex-shrink: 0; }
.detail-price small { display: block; color: var(--cp-text-soft); font-size: 11px; margin-top: 4px; }
.detail-price strong { white-space: nowrap; }
.detail-note { font-size: 12px; color: var(--cp-text-muted); background: var(--cp-surface-soft); padding: 12px; margin-top: 16px; }
.detail-note p { margin: 0 0 8px; }
.detail-note p:last-child { margin-bottom: 0; }
.detail-source { font-size: 11px; overflow-wrap: anywhere; margin-top: 16px; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--cp-text); color: var(--cp-surface); padding: 10px 18px; border-radius: 6px; z-index: 10; max-width: calc(100vw - 32px); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
@media (prefers-reduced-motion: no-preference) { .cloud-switch { animation: appear .35s ease-out; } @keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } }
@media (min-width: 1500px) { td { padding-top: 14px; padding-bottom: 14px; } }
@media (max-width: 1280px) { .cloud-switch { grid-template-columns: minmax(0, 1fr); } .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; } .top-actions { grid-column: 2; grid-row: 1; } .header-notice { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 1100px) { main { padding: 10px 24px 16px; } .topbar { padding: 10px 24px; } footer { flex-direction: column; gap: 6px; } }
@media (max-width: 640px) {
  .header-notice { grid-column: 1 / -1; grid-row: 3; font-size: 10px; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; gap: 10px 8px; padding: 10px 16px; } .brand { grid-column: 1 / 3; grid-row: 1; font-size: 15px; gap: 8px; } .brand-copy { gap: 3px 8px; } .brand-symbol { width: 28px; height: 28px; } .brand small { font-size: 8px; } .top-actions { display: contents; } #theme { grid-column: 3; grid-row: 1; } .top-actions .icon-button { width: 30px; height: 30px; } .sync-controls { grid-column: 1 / 3; grid-row: 2; gap: 7px; } .sync-controls .button { font-size: 11px; padding: 6px 8px; }
  main { padding: 8px 16px; } .eyebrow { font-size: 9px; } #updated { font-size: 10px; }
  .cloud-switch { gap: 8px; margin-bottom: 10px; } .cloud-button { flex-wrap: wrap; padding: 10px 12px; gap: 8px; } .cloud-card-heading { width: 100%; gap: 8px; } .cloud-card-heading > svg:first-child { width: 18px; height: 18px; } .cloud-name strong { font-size: 13px; } .cloud-name small { font-size: 9px; } .cloud-button .currency { font-size: 9px; margin-left: auto; } .cloud-check { display: none; }
  .cloud-card-stats { flex-basis: 100%; gap: 8px; padding-left: 0; border-left: 0; } .cloud-card-stats > span { gap: 4px; } .cloud-card-stats > span + span { padding-left: 8px; } .cloud-card-stats small { font-size: 10px; } .cloud-card-stats strong { font-size: 13px; white-space: nowrap; }
  .table-meta { font-size: 10px; } .pagination { align-items: flex-start; flex-direction: column; } .pagination > div { width: 100%; justify-content: flex-end; } .pagination > div label { margin-right: auto; } .detail-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } dialog { padding: 18px; } .detail-price { font-size: 12px; }
}