:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #172033;
  background: #fff;
  font-variant-numeric: tabular-nums;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --text: #172033;
  --muted: #667085;
  --border: #dfe3e9;
  --border-strong: #cbd2dc;
  --surface: #fff;
  --surface-soft: #f7f8fa;
  --surface-control: #f4f6f8;
  --focus: 0 0 0 3px rgb(37 99 235 / 14%);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button, .download-button { cursor: pointer; }
button, input, select, summary, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: none; box-shadow: var(--focus);
}

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: 266px; padding: 66px 20px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: #f7f8fa; border-right: 1px solid #e7e9ed;
}
.sidebar h2 { margin: 0 0 24px; font-size: 21px; line-height: 1.25; letter-spacing: -.2px; }
.sidebar label, .field-label { display: grid; gap: 8px; margin: 0 0 19px; color: #475467; font-size: 13.5px; font-weight: 600; }
.sidebar input[type="number"], .sidebar select {
  width: 100%; height: 46px; padding: 9px 13px;
  border: 1px solid var(--border); border-radius: 9px; background: #fff;
  font-size: 15px; font-weight: 450; box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.sidebar input[type="number"]:hover, .sidebar select:hover { border-color: #b9c1cc; }
.sidebar input[type="number"]:focus, .sidebar select:focus { border-color: #8aaaf2; box-shadow: var(--focus); outline: none; }
.sidebar select option, .control-form select option, .add-item-form select option { font-size: 15px; }
.multi-select { position: relative; margin: -4px 0 16px; }
.multi-select summary {
  min-height: 76px; padding: 9px 10px; display: flex; align-items: flex-start; justify-content: space-between;
  list-style: none; border: 1px solid var(--border); border-radius: 9px; background: #fff; cursor: pointer;
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%); transition: border-color .16s ease, box-shadow .16s ease;
}
.multi-select summary:hover { border-color: #b9c1cc; }
.multi-select[open] summary { border-color: #8aaaf2; box-shadow: var(--focus); }
.multi-select summary::-webkit-details-marker { display: none; }
.year-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.year-pills span { padding: 5px 8px; border-radius: 5px; color: #fff; background: var(--accent); font-size: 14px; font-weight: 650; line-height: 1.25; }
.year-pills em { color: #6b7280; font-style: normal; padding-top: 6px; }
.chevron { padding: 3px 2px 0 8px; color: #667085; font-size: 20px; }
.multi-options {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: #fff; box-shadow: 0 10px 28px rgb(16 24 40 / 14%);
}
.multi-options label { display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px; border-radius: 6px; font-size: 15px; font-weight: 500; }
.multi-options label:hover { background: #f4f6f8; }
.multi-options input { width: 17px; height: 17px; accent-color: var(--accent); }
.cloud-button, .download-button, .sidebar-account a {
  border: 1px solid var(--border-strong); border-radius: 9px; background: #fff;
}
.cloud-button { width: 100%; min-height: 54px; padding: 9px 16px; font-size: 14.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 1px 2px rgb(16 24 40 / 4%); transition: border-color .16s ease, background .16s ease; }
.cloud-button:hover, .download-button:hover, .add-item-form button:hover { border-color: #aeb7c4; background: #f8fafc; }
.sidebar-account { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: #667085; font-size: 13px; }
.sidebar-account a { padding: 5px 9px; font-weight: 500; }
.sidebar-account form { margin: 0; }
.text-button { padding: 3px 0; border: 0; color: #175cd3; background: none; font-weight: 500; }
.text-button:hover, .sidebar-account a:hover { color: #0b4eb5; }

.report-main { margin-left: 266px; padding: 78px 48px 52px; }
.report-main > h1 { max-width: 1190px; margin: 0 auto 62px; color: #101828; font-size: 36px; line-height: 1.18; letter-spacing: -.6px; font-weight: 700; }
.report-main > .tabs, .report-main > .messages, .report-main > .tab-panel { max-width: 1190px; margin-left: auto; margin-right: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a { flex: none; padding: 10px 12px 11px; border-bottom: 2px solid transparent; color: #475467; font-size: 14px; font-weight: 550; white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.tabs a:first-child { padding-left: 0; padding-right: 16px; }
.tabs a:hover { color: #1d2939; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }
.tab-panel { padding-top: 20px; }
.caption { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.expander { margin: 0 0 14px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.expander > summary { padding: 8px 0; cursor: pointer; color: #344054; font-size: 14px; font-weight: 550; transition: color .15s ease; }
.expander > summary:hover { color: var(--accent); background: transparent; }
.expander[open] > summary { border-bottom: 0; background: transparent; }
.expander > summary::marker { font-size: 12px; }
.details-body { padding: 8px 0 12px; }
.add-item-form { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr) 150px; gap: 12px; align-items: end; padding: 8px 0 12px; }
.add-item-form label, .control-form label { display: grid; gap: 7px; color: #475467; font-size: 13px; font-weight: 600; }
.add-item-form input, .add-item-form select, .control-form select {
  width: 100%; min-height: 46px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-control);
  color: #1d2939; font-size: 15px; font-weight: 450; box-shadow: 0 1px 2px rgb(16 24 40 / 3%); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.add-item-form input:hover, .add-item-form select:hover, .control-form select:hover { border-color: #b9c1cc; background: #f8fafc; }
.add-item-form input:focus, .add-item-form select:focus, .control-form select:focus { border-color: #8aaaf2; background: #fff; box-shadow: var(--focus); outline: none; }
.add-item-form button, .primary, .download-button {
  min-height: 42px; padding: 9px 17px; border: 1px solid var(--border-strong); border-radius: 9px; background: #fff; font-size: 14.5px; font-weight: 600; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .05s ease;
}
.add-item-form .add-item-button { width: 100%; min-height: 46px; }
.add-item-form button:disabled { color: #9ba0aa; background: #f3f4f6; cursor: not-allowed; }
.primary { border-color: var(--accent); color: #fff; background: var(--accent); box-shadow: 0 1px 2px rgb(16 24 40 / 8%); }
.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.primary:active, .download-button:active, .cloud-button:active { transform: translateY(1px); }

.dataframe { width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 3%); }
.dataframe table { min-width: 100%; border-collapse: collapse; white-space: nowrap; }
.dataframe th, .dataframe td { height: 36px; padding: 6px 8px; border-right: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; text-align: right; font-size: 13px; font-weight: 430; }
.dataframe th { position: relative; color: #475467; background: #f8fafc; text-align: left; font-size: 12.5px; font-weight: 650; }
.dataframe tbody tr:not(.spacer-row):hover td { background-color: #fafbfc; }
.dataframe tr:last-child td { border-bottom: 0; }
.dataframe th:last-child, .dataframe td:last-child { border-right: 0; }
.dataframe th:first-child, .dataframe th:nth-child(2), .dataframe td:first-child, .dataframe td:nth-child(2) { text-align: left; }
.editor-frame { max-height: none; margin-top: 8px; overflow-x: auto; overflow-y: visible; --group-column-width: 192px; }
.editor-frame th, .editor-frame td { overflow: hidden; text-overflow: ellipsis; }
.editor-frame th { position: sticky; top: 0; z-index: 3; }
.editor-frame th:first-child, .editor-frame td:first-child { position: sticky; left: 0; width: var(--group-column-width); min-width: var(--group-column-width); max-width: var(--group-column-width); z-index: 2; background: #fff; }
.editor-frame th:first-child { z-index: 5; background: #f7f8fa; }
.editor-frame th:nth-child(2), .editor-frame td:nth-child(2) { position: sticky; left: var(--group-column-width); min-width: 400px; max-width: 400px; z-index: 2; background: #fff; }
.editor-frame th:nth-child(2) { z-index: 5; background: #f7f8fa; }
.editor-frame th:nth-child(n+3), .editor-frame td:nth-child(n+3) { min-width: 112px; }
.editor-frame th:last-child, .editor-frame td:last-child { min-width: 120px; }
.editor-frame td input:not([type="hidden"]) { display: block; width: 100%; min-width: 0; min-height: 26px; padding: 3px 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; text-align: right; font-size: 13px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.editor-frame td input:not([type="hidden"]):hover:not([readonly]) { border-color: #d7dce3; background: #fff; }
.editor-frame td input:not([type="hidden"]):focus { border-color: #8aaaf2; background: #fff; box-shadow: var(--focus); outline: none; }
.editor-frame td input[readonly] { color: #344054; }
.editor-frame .total { font-weight: 650; background: #fafbfc; }
.spacer-row td { height: 28px; border-bottom-color: #e4e7ec; color: #98a2b3; background: #fff; }
.column-resizer { position: absolute; top: 0; right: -4px; z-index: 10; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.column-resizer::after { content: ""; position: absolute; top: 7px; bottom: 7px; left: 4px; width: 1px; background: transparent; }
.dataframe th:hover > .column-resizer::after, .column-resizer.dragging::after { background: #98a2b3; }
body.resizing-columns { cursor: col-resize; user-select: none; }
.save-row { display: flex; gap: 20px; align-items: center; margin: 14px 0 22px; }

.metric-grid { display: grid; gap: 0; margin: 14px 0 30px; }
.metric-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { min-width: 0; padding: 4px 20px 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.metric span { display: block; margin-bottom: 7px; color: #667085; font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.metric strong { display: block; color: #101828; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.2; font-weight: 500; letter-spacing: -.25px; overflow-wrap: anywhere; }
.summary-title { margin: 20px 0 2px; color: #344054; font-size: 16px; line-height: 1.4; font-weight: 650; }
.month-metrics { margin-bottom: 32px; }
.section-title, .kpi-title { margin: 26px 0 14px; color: #101828; font-size: 22px; line-height: 1.3; letter-spacing: -.2px; }
.kpi-title { font-size: 23px; }
.calculation-frame { min-height: 260px; max-height: 320px; }

.control-form { display: grid; gap: 16px; margin: 0 0 16px; }
.control-form.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.control-form.single-control { grid-template-columns: 1fr; margin-top: 16px; }
.control-form .wide-control { grid-column: 1 / -1; }
.checkbox-control { display: flex !important; grid-template-columns: auto 1fr; align-items: center; justify-content: start; color: #344054 !important; font-size: 15.5px !important; font-weight: 500 !important; }
.checkbox-control input { width: 18px; height: 18px; margin: 0 7px 0 0; accent-color: var(--accent); }
.chart-frame { width: 100%; height: 560px; display: block; border: 0; border-radius: 0; background: #fff; }
.info, .notice, .message { margin: 16px 0; padding: 15px 16px; border-radius: 9px; font-size: 14.5px; line-height: 1.5; }
.info { border: 0; color: #175cd3; background: #eff6ff; }
.notice { border: 0; color: #854a0e; background: #fffaeb; }
.message { border: 1px solid #f1d67a; background: #fff7db; }
.message.success { border-color: #95d5b0; background: #e7f7ee; }
.message.error { border-color: #eba3a3; background: #fff0f0; }
.legacy-messages { width: min(1190px, calc(100% - 32px)); margin: 16px auto; }
.details-body .dataframe { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
.detail-frame { max-height: none; }
.comparison-frame table { white-space: nowrap; }
.kpi-frame { min-height: 0; max-height: none; overflow-x: visible; }
.kpi-frame table { width: 100%; min-width: 0; table-layout: fixed; white-space: normal; }
.kpi-frame th, .kpi-frame td { height: 34px; padding: 5px 5px; font-size: 11.5px; line-height: 1.25; overflow-wrap: anywhere; }
.kpi-frame th { font-size: 11px; }
.kpi-frame th:nth-child(1) { width: 7%; }
.kpi-frame th:nth-child(n+2):nth-child(-n+5) { width: 10%; }
.kpi-frame th:nth-child(6) { width: 12%; }
.kpi-frame th:nth-child(7) { width: 9%; }
.kpi-frame th:nth-child(8) { width: 12%; }
.kpi-frame th:nth-child(9) { width: 11%; }
.kpi-frame th:nth-child(10) { width: 9%; }
.logic-list p { margin: 9px 0; color: #344054; font-size: 14.5px; line-height: 1.55; }
.download-button { display: inline-flex; align-items: center; margin-top: 0; }

.login-card { width: min(430px, calc(100% - 32px)); margin: 10vh auto; padding: 30px; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgb(16 24 40 / 8%); }
.login-card h1 { margin: 0 0 8px; color: #101828; font-size: 30px; letter-spacing: -.35px; }
.login-card p { color: var(--muted); }
.login-card form { display: grid; gap: 16px; margin-top: 22px; }
.login-card label { display: grid; gap: 7px; color: #475467; font-size: 14px; font-weight: 600; }
.login-card input { min-height: 46px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px; font-size: 16px; }
.login-card input:focus { border-color: #8aaaf2; box-shadow: var(--focus); outline: none; }

@media (max-width: 1050px) {
  .sidebar { position: static; width: 100%; padding: 22px; }
  .sidebar #period-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sidebar h2, .sidebar .field-label, .sidebar-account { grid-column: 1 / -1; }
  .sidebar label { margin-bottom: 0; }
  .multi-select { margin: 0; }
  .cloud-button { min-height: 42px; align-self: end; }
  .sidebar-account { margin-top: 16px; }
  .report-main { margin-left: 0; padding: 42px 20px; }
  .report-main > h1 { margin-bottom: 42px; font-size: 32px; }
  .editor-frame th:first-child, .editor-frame td:first-child { position: static; }
  .editor-frame th:nth-child(2), .editor-frame td:nth-child(2) { left: 0; min-width: 310px; max-width: 310px; }
}
@media (max-width: 700px) {
  .sidebar #period-form, .control-form.two-columns, .add-item-form { grid-template-columns: 1fr; }
  .report-main { padding: 32px 14px; }
  .report-main > h1 { margin-bottom: 34px; font-size: 28px; }
  .metric-grid.five, .metric-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 8px; }
  .metric strong { font-size: 22px; }
  .editor-frame th:nth-child(2), .editor-frame td:nth-child(2) { position: static; min-width: 280px; max-width: 280px; }
  .kpi-frame { overflow-x: auto; }
  .kpi-frame table { min-width: 940px; }
}
