#varallisuuslaskuri {
  width: 100%;
  isolation: isolate;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2933;
  background: #f4f6f8;
  font-synthesis: none;
}
#varallisuuslaskuri,
#varallisuuslaskuri * { box-sizing: border-box; }
#varallisuuslaskuri button,
#varallisuuslaskuri input,
#varallisuuslaskuri textarea,
#varallisuuslaskuri select { font: inherit; }
#varallisuuslaskuri button { cursor: pointer; }
#varallisuuslaskuri [hidden] { display: none !important; }

#varallisuuslaskuri .app-shell {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 42px;
  display: grid;
  gap: 20px;
}

#varallisuuslaskuri .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
#varallisuuslaskuri .page-header-content { flex: 1 1 auto; min-width: 0; max-width: 760px; }
#varallisuuslaskuri .eyebrow {
  margin: 0 0 5px;
  color: #52616b;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#varallisuuslaskuri h1,
#varallisuuslaskuri h2,
#varallisuuslaskuri h3,
#varallisuuslaskuri p { margin-top: 0; }
#varallisuuslaskuri h1 { margin-bottom: 0; font-size: clamp(1.45rem, 2.2vw, 2.15rem); line-height: 1.15; }
#varallisuuslaskuri h2 { margin-bottom: 0; font-size: 1.05rem; }
#varallisuuslaskuri h3 { margin: 0 0 8px; font-size: .82rem; color: #52616b; text-transform: uppercase; letter-spacing: .05em; }
#varallisuuslaskuri .page-intro { margin: 10px 0 0; color: #65737e; font-size: .9rem; line-height: 1.55; }
#varallisuuslaskuri .header-actions { display: flex; gap: 8px; flex: 0 0 auto; align-self: flex-end; }

#varallisuuslaskuri #calculatorForm { display: grid; gap: 20px; }
#varallisuuslaskuri .setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

#varallisuuslaskuri .panel,
#varallisuuslaskuri .summary-card {
  background: #fff;
  border: 1px solid #dfe4e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
#varallisuuslaskuri .panel { padding: 18px; }
#varallisuuslaskuri .panel-heading { margin-bottom: 16px; }
#varallisuuslaskuri .panel-heading p { margin: 5px 0 0; color: #65737e; font-size: .83rem; line-height: 1.4; }

#varallisuuslaskuri .field-grid { display: grid; gap: 13px 12px; }
#varallisuuslaskuri .field-grid-assets { --asset-side-column: 170px; grid-template-columns: minmax(0, 1fr) var(--asset-side-column); }
#varallisuuslaskuri .settings-grid { grid-template-columns: 1fr 1fr; }
#varallisuuslaskuri .field { display: grid; gap: 6px; min-width: 0; font-size: .86rem; font-weight: 600; }
#varallisuuslaskuri .field small,
#varallisuuslaskuri .checkbox-field small { display: block; color: #73808a; font-weight: 400; line-height: 1.35; }
#varallisuuslaskuri .field-help-placeholder { visibility: hidden; }
#varallisuuslaskuri .compact-field { align-self: start; }
#varallisuuslaskuri .asset-options-toggle-field { align-self: start; }
#varallisuuslaskuri .asset-options-toggle-label { visibility: hidden; }
#varallisuuslaskuri .asset-options-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
#varallisuuslaskuri .asset-options-toggle-icon { font-size: 1.2rem; line-height: 1; transition: transform .16s ease; }
#varallisuuslaskuri .asset-options-toggle[aria-expanded="true"] .asset-options-toggle-icon { transform: rotate(90deg); }
#varallisuuslaskuri .active-capital-options { grid-column: 1 / -1; padding: 12px 13px; border: 1px solid #e1e6ea; border-radius: 9px; background: #fafbfc; }
#varallisuuslaskuri .active-capital-options > p { margin: 0; color: #65737e; font-size: .76rem; line-height: 1.45; }
#varallisuuslaskuri .active-capital-options-grid { display: grid; grid-template-columns: minmax(0,1fr) var(--asset-side-column); gap: 12px; align-items: start; margin-top: 11px; }
#varallisuuslaskuri .slider-field { gap: 7px; }
#varallisuuslaskuri .range-slider { width: 100%; margin: 4px 0 0; accent-color: #263c47; cursor: pointer; }
#varallisuuslaskuri .slider-limits { display: flex; justify-content: space-between; color: #73808a; font-size: .75rem; font-weight: 400; }

#varallisuuslaskuri .input-with-unit {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c9d1d8;
  border-radius: 8px;
  background: #fff;
}
#varallisuuslaskuri .input-with-unit:focus-within { border-color: #536c7a; box-shadow: 0 0 0 3px rgba(83,108,122,.12); }
#varallisuuslaskuri .input-with-unit input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 9px 10px; background: transparent; }
#varallisuuslaskuri .input-with-unit > span { padding-right: 10px; color: #65737e; font-size: .8rem; font-weight: 500; white-space: nowrap; }
#varallisuuslaskuri .input-with-unit input:disabled { color: #66717a; background: #eef1f3; }

#varallisuuslaskuri .standalone-select,
#varallisuuslaskuri .investment-fee-controls select {
  width: 100%; min-width: 0; padding: 9px 8px; border: 1px solid #c9d1d8; border-radius: 8px;
  background: #fff; color: #44525b;
}
#varallisuuslaskuri .standalone-select:focus,
#varallisuuslaskuri .investment-fee-controls select:focus { outline: 0; border-color: #536c7a; box-shadow: 0 0 0 3px rgba(83,108,122,.12); }

#varallisuuslaskuri .investment-fee-field { grid-column: 1 / -1; min-width: 0; }
#varallisuuslaskuri .investment-fee-controls { display: flex; gap: 10px; align-items: center; }
#varallisuuslaskuri .investment-fee-controls .input-with-unit { flex: 0 0 145px; }
#varallisuuslaskuri .investment-fee-controls select { flex: 1; font-size: .82rem; }

#varallisuuslaskuri .collapsible-settings { margin-top: 14px; border: 1px solid #dbe3e7; border-radius: 10px; background: #f8fafb; overflow: hidden; }
#varallisuuslaskuri .collapsible-settings > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; color: #253943; font-size: .9rem; font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
#varallisuuslaskuri .collapsible-settings > summary::-webkit-details-marker { display: none; }
#varallisuuslaskuri .collapsible-settings > summary small { margin-left: auto; color: #73808a; font-size: .72rem; font-weight: 500; }
#varallisuuslaskuri .collapsible-settings > summary::after { content: '›'; color: #65737e; font-size: 1.25rem; line-height: 1; transform: rotate(0deg); transition: transform .16s ease; }
#varallisuuslaskuri .collapsible-settings[open] > summary { border-bottom: 1px solid #dbe3e7; }
#varallisuuslaskuri .collapsible-settings[open] > summary::after { transform: rotate(90deg); }
#varallisuuslaskuri .collapsible-settings-content { padding: 14px; }
#varallisuuslaskuri .collapsible-settings-intro { margin: 0; color: #65737e; font-size: .78rem; line-height: 1.45; }
#varallisuuslaskuri .tax-settings { margin-top: 18px; }
#varallisuuslaskuri .tax-subsection { margin-top: 14px; padding: 14px; border: 1px solid #dbe3e7; border-radius: 8px; background: #fff; }
#varallisuuslaskuri .tax-subsection-heading h4 { margin: 0; color: #253943; font-size: .88rem; }
#varallisuuslaskuri .tax-subsection-heading p { margin: 4px 0 0; color: #65737e; font-size: .75rem; line-height: 1.45; }
#varallisuuslaskuri .tax-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
#varallisuuslaskuri .tax-mode-field { grid-column: 1 / -1; }
#varallisuuslaskuri .rental-tax-setting .checkbox-field { margin-top: 12px; }
#varallisuuslaskuri .tax-rate-field { margin-top: 14px; padding-top: 14px; border-top: 1px solid #dbe3e7; }

#varallisuuslaskuri .checkbox-field {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin-top: 16px; font-size: .84rem; line-height: 1.35;
}
#varallisuuslaskuri .checkbox-field input { width: 18px; height: 18px; margin: 1px 0 0; }

#varallisuuslaskuri .desktop-numpad-setting,
#varallisuuslaskuri .desktop-numpad { display: none; }
#varallisuuslaskuri .desktop-numpad {
  position: fixed;
  z-index: 10000;
  width: 218px;
  padding: 8px;
  border: 1px solid #c9d1d8;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(25,39,47,.24);
}
#varallisuuslaskuri .desktop-numpad-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 1px 2px 7px 7px;
  color: #253943;
  cursor: move;
  user-select: none;
}
#varallisuuslaskuri .desktop-numpad-heading strong {
  min-width: 0;
  overflow: hidden;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#varallisuuslaskuri .desktop-numpad-close {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #65737e;
  font-size: 1.35rem;
  line-height: 1;
}
#varallisuuslaskuri .desktop-numpad-close:hover { background: #eef2f4; color: #253943; }
#varallisuuslaskuri .desktop-numpad-keys { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
#varallisuuslaskuri .desktop-numpad-keys button {
  min-height: 43px;
  padding: 6px;
  border: 1px solid #d5dce1;
  border-radius: 8px;
  background: #f7f9fa;
  color: #253943;
  font-size: 1rem;
  font-weight: 700;
}
#varallisuuslaskuri .desktop-numpad-keys button:hover { border-color: #aebbc3; background: #eef2f4; }
#varallisuuslaskuri .desktop-numpad-keys button:active { background: #e2e8eb; transform: translateY(1px); }

@media (min-width: 781px) and (any-hover: hover) and (any-pointer: fine) {
  #varallisuuslaskuri .desktop-numpad-setting { display: grid; }
  #varallisuuslaskuri .desktop-numpad:not([hidden]) { display: block; }
}

#varallisuuslaskuri .property-module-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1fr) calc(var(--asset-side-column) - 14px);
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid #e1e6ea;
  border-radius: 9px;
  background: #fafbfc;
}
#varallisuuslaskuri .property-module-row .button { width: 100%; min-width: 0; padding-inline: 8px; font-size: .82rem; }
#varallisuuslaskuri .property-module-info { display: grid; gap: 3px; min-width: 0; }
#varallisuuslaskuri .property-module-info strong { font-size: .86rem; color: #253943; }
#varallisuuslaskuri .property-module-info small { color: #73808a; font-size: .76rem; line-height: 1.35; }
#varallisuuslaskuri .property-module-row.is-active { background: #fff; border-color: #cfd8de; }

#varallisuuslaskuri .button {
  border-radius: 8px; padding: 9px 13px; border: 1px solid transparent;
  font-weight: 700; font-size: .86rem;
}
#varallisuuslaskuri .button-primary { background: #263c47; color: #fff; }
#varallisuuslaskuri .button-primary:hover { background: #1c2f38; }
#varallisuuslaskuri .button-secondary { background: #fff; color: #263c47; border-color: #c9d1d8; }
#varallisuuslaskuri .button-secondary:hover { background: #f7f8f9; }
#varallisuuslaskuri .button-danger { background: #a33a3a; color: #fff; border-color: #a33a3a; }
#varallisuuslaskuri .button-danger:hover { background: #892f2f; }
#varallisuuslaskuri .cashflow-panel-heading {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
#varallisuuslaskuri .cashflow-helper-toggle { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#varallisuuslaskuri .cashflow-helper-toggle-icon { font-size: 1.2rem; line-height: 1; transition: transform .16s ease; }
#varallisuuslaskuri .cashflow-helper-toggle[aria-expanded="true"] .cashflow-helper-toggle-icon { transform: rotate(90deg); }
#varallisuuslaskuri .cashflow-helper-panel { margin-bottom: 14px; }
#varallisuuslaskuri .cashflow-fill {
  display: grid; gap: 8px; padding: 12px 13px;
  border: 1px solid #e4e9ed; border-radius: 9px; background: #fafbfc;
}
#varallisuuslaskuri .cashflow-helper-intro { margin: 0; color: #65737e; font-size: .76rem; line-height: 1.45; }
#varallisuuslaskuri .cashflow-fill-fields {
  display: grid; grid-template-columns: auto minmax(130px,1fr) minmax(130px,1fr) auto;
  gap: 10px; align-items: end;
}
#varallisuuslaskuri .cashflow-expense-helper-button { white-space: nowrap; }
#varallisuuslaskuri .cashflow-fill-fields > label { display: grid; gap: 5px; color: #44525b; font-size: .8rem; font-weight: 600; }
#varallisuuslaskuri .cashflow-fill-input {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  overflow: hidden; border: 1px solid #c9d1d8; border-radius: 8px; background: #fff;
}
#varallisuuslaskuri .cashflow-fill-input:focus-within { border-color: #536c7a; box-shadow: 0 0 0 3px rgba(83,108,122,.12); }
#varallisuuslaskuri .cashflow-fill-input input { width: 100%; min-width: 0; padding: 9px 10px; border: 0; outline: 0; background: transparent; }
#varallisuuslaskuri .cashflow-fill-input > span { padding-right: 10px; color: #65737e; font-size: .78rem; white-space: nowrap; }
#varallisuuslaskuri .cashflow-fill-actions { display: flex; gap: 8px; align-items: center; }

#varallisuuslaskuri .cashflow-comparison { display: grid; gap: 7px; width: 100%; min-width: 0; }
#varallisuuslaskuri .cashflow-comparison-head,
#varallisuuslaskuri .cashflow-comparison-row { display: grid; gap: 7px; align-items: center; min-width: 0; }
#varallisuuslaskuri .cashflow-layout-simple .cashflow-comparison-head,
#varallisuuslaskuri .cashflow-layout-simple .cashflow-comparison-row {
  grid-template-columns: 95px 72px minmax(130px,1fr) minmax(130px,1fr) minmax(125px,.9fr);
}
#varallisuuslaskuri .cashflow-layout-home .cashflow-comparison-head,
#varallisuuslaskuri .cashflow-layout-home .cashflow-comparison-row {
  grid-template-columns: 90px 70px minmax(120px,1fr) minmax(120px,1fr) minmax(120px,.9fr) minmax(125px,.9fr) minmax(120px,.85fr);
}
#varallisuuslaskuri .cashflow-layout-rental .cashflow-comparison-head,
#varallisuuslaskuri .cashflow-layout-rental .cashflow-comparison-row {
  grid-template-columns: 88px 68px minmax(110px,.9fr) minmax(110px,.85fr) minmax(110px,.9fr) minmax(120px,.9fr) minmax(120px,.9fr) minmax(115px,.85fr);
}
#varallisuuslaskuri .cashflow-layout-both .cashflow-comparison-head,
#varallisuuslaskuri .cashflow-layout-both .cashflow-comparison-row {
  grid-template-columns: 82px 64px minmax(100px,.9fr) minmax(100px,.8fr) minmax(100px,.9fr) minmax(105px,.85fr) minmax(110px,.85fr) minmax(110px,.85fr) minmax(105px,.8fr);
}
#varallisuuslaskuri .cashflow-comparison-head { color: #65737e; font-size: .72rem; font-weight: 700; }
#varallisuuslaskuri .cashflow-comparison-row { padding: 7px 0; border-top: 1px solid #edf0f2; }
#varallisuuslaskuri .cashflow-period-title { font-size: .8rem; white-space: nowrap; }
#varallisuuslaskuri .cashflow-head-select { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
#varallisuuslaskuri .cashflow-head-select select { width: 58px; min-width: 0; padding: 4px 5px; border: 1px solid #c9d1d8; border-radius: 6px; background: #fff; color: #44525b; font-size: .72rem; font-weight: 700; }
#varallisuuslaskuri .cashflow-table-field,
#varallisuuslaskuri .cashflow-year-cell { min-width: 0; }
#varallisuuslaskuri .cashflow-year-cell .input-with-unit input { padding-inline: 7px; }
#varallisuuslaskuri .cashflow-output-cell {
  min-width: 0; padding: 8px 9px; border-radius: 7px; background: #f7f9fa; color: #44525b;
}
#varallisuuslaskuri .cashflow-output-cell strong { display: block; text-align: right; font-size: .8rem; white-space: nowrap; }
#varallisuuslaskuri .cashflow-surplus-cell { background: #f3f6f7; }
#varallisuuslaskuri .cashflow-surplus-cell.is-positive strong { color: #27623d; }
#varallisuuslaskuri .cashflow-surplus-cell.is-negative strong { color: #8a3434; }
#varallisuuslaskuri .cashflow-mobile-label { display: none; }
#varallisuuslaskuri .cashflow-period-note { margin: 9px 0 0; color: #73808a; font-size: .75rem; line-height: 1.4; }

#varallisuuslaskuri .investment-behavior-settings {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#varallisuuslaskuri .investment-behavior-settings .surplus-investment-setting {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#varallisuuslaskuri .surplus-investment-setting .slider-field {
  max-width: 280px;
}

#varallisuuslaskuri .investment-behavior-settings .checkbox-field {
  margin-top: 23px;
}

#varallisuuslaskuri .message {
  padding: 11px 13px; border-radius: 8px; border: 1px solid #d7a32d;
  background: #fff8e7; color: #6f5010; font-size: .88rem;
}
#varallisuuslaskuri .message.error { border-color: #c75d5d; background: #fff0f0; color: #7b2929; }

#varallisuuslaskuri .summary-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#varallisuuslaskuri .summary-card { padding: 15px 16px; min-width: 0; }
#varallisuuslaskuri .summary-card span { display: block; color: #65737e; font-size: .78rem; font-weight: 700; margin-bottom: 7px; }
#varallisuuslaskuri .summary-card strong { display: block; font-size: clamp(1.25rem,2vw,1.7rem); overflow-wrap: anywhere; }
#varallisuuslaskuri .summary-card small { display: block; color: #7a8790; margin-top: 5px; font-size: .76rem; }

#varallisuuslaskuri .chart-panel { min-height: 470px; }
#varallisuuslaskuri .chart-wrap { position: relative; height: 390px; width: 100%; }
#varallisuuslaskuri #wealthChart { width: 100%; height: 100%; display: block; }
#varallisuuslaskuri .chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; color: #52616b; font-size: .78rem; }
#varallisuuslaskuri .chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
#varallisuuslaskuri .legend-line { display: inline-block; width: 26px; border-top: 2px solid #304855; }
#varallisuuslaskuri .legend-line.solid { border-top-color: #2563eb; }
#varallisuuslaskuri .legend-line.dashed { border-top-style: dashed; border-top-color: #e8590c; }
#varallisuuslaskuri .legend-line.dotted { border-top-style: dotted; border-top-color: #7c3aed; }
#varallisuuslaskuri .legend-line.home-housing { border-top-color: #16a34a; border-top-style: dashed; }
#varallisuuslaskuri .legend-line.rental-housing { border-top-color: #db2777; border-top-style: dotted; }
#varallisuuslaskuri .legend-line.other { border-top-color: #0891b2; border-top-style: dashed; }
#varallisuuslaskuri .chart-options { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf0f2; color: #52616b; font-size: .78rem; }
#varallisuuslaskuri .chart-options > span { font-weight: 700; }
#varallisuuslaskuri .chart-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#varallisuuslaskuri .chart-options input { width: 16px; height: 16px; margin: 0; }

#varallisuuslaskuri .report-panel { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 28px; }
#varallisuuslaskuri .report-panel > .panel-heading { grid-column: 1 / -1; margin-bottom: -4px; }
#varallisuuslaskuri .report-column { display: grid; gap: 22px; align-content: start; }
#varallisuuslaskuri .report-group dl { margin: 0; display: grid; }
#varallisuuslaskuri .report-group dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 7px 0; border-bottom: 1px solid #edf0f2; }
#varallisuuslaskuri .report-group dt { min-width: 0; color: #44525b; font-size: .82rem; }
#varallisuuslaskuri .report-group dd { margin: 0; font-size: .82rem; font-weight: 700; text-align: right; white-space: nowrap; }
#varallisuuslaskuri .report-note { margin: 9px 0 0; color: #73808a; font-size: .72rem; line-height: 1.45; }

#varallisuuslaskuri .data-dialog { width: min(680px,calc(100% - 28px)); border: 0; border-radius: 12px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.22); }
#varallisuuslaskuri .data-dialog::backdrop { background: rgba(19,29,35,.48); }
#varallisuuslaskuri .dialog-card { padding: 18px; }
#varallisuuslaskuri .dialog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
#varallisuuslaskuri .dialog-heading p { margin: 5px 0 0; color: #65737e; font-size: .82rem; line-height: 1.45; }
#varallisuuslaskuri #dialogHelp { white-space: pre-line; }
#varallisuuslaskuri .icon-button { border: 0; background: transparent; font-size: 1.65rem; line-height: 1; color: #65737e; padding: 0 2px; }
#varallisuuslaskuri .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
#varallisuuslaskuri .dialog-action-spacer { flex: 1 1 auto; }
#varallisuuslaskuri .data-dialog textarea { width: 100%; resize: vertical; margin-top: 16px; padding: 11px; border: 1px solid #c9d1d8; border-radius: 8px; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size: .8rem; line-height: 1.45; }

#varallisuuslaskuri .expense-dialog { width: min(620px,calc(100% - 28px)); max-height: 92vh; overflow: auto; }
#varallisuuslaskuri .expense-breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
#varallisuuslaskuri .expense-breakdown-field { display: grid; gap: 6px; min-width: 0; color: #44525b; font-size: .84rem; font-weight: 600; }
#varallisuuslaskuri .expense-breakdown-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 13px 0 4px; border-top: 1px solid #edf0f2; color: #44525b; font-size: .9rem; }
#varallisuuslaskuri .expense-breakdown-total strong { color: #253943; font-size: 1.05rem; }
#varallisuuslaskuri .expense-property-overview { margin-top: 16px; padding: 14px; border: 1px solid #dbe3e7; border-radius: 9px; background: #f8fafb; }
#varallisuuslaskuri .expense-property-overview h3,
#varallisuuslaskuri .expense-property-overview h4 { margin: 0; color: #253943; }
#varallisuuslaskuri .expense-property-overview h3 { font-size: .92rem; }
#varallisuuslaskuri .expense-property-overview h4 { font-size: .84rem; }
#varallisuuslaskuri .expense-overview-list { display: grid; margin: 8px 0 0; }
#varallisuuslaskuri .expense-overview-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 6px 0; border-bottom: 1px solid #e5eaed; }
#varallisuuslaskuri .expense-overview-list dt { color: #52616b; font-size: .79rem; }
#varallisuuslaskuri .expense-overview-list dd { margin: 0; color: #253943; font-size: .79rem; font-weight: 700; text-align: right; white-space: nowrap; }
#varallisuuslaskuri .expense-overview-list .expense-overview-total { border-bottom: 0; padding-top: 9px; }
#varallisuuslaskuri .expense-overview-total dt,
#varallisuuslaskuri .expense-overview-total dd { color: #253943; font-weight: 800; }
#varallisuuslaskuri .expense-rental-overview { margin-top: 13px; padding-top: 13px; border-top: 1px solid #dbe3e7; }
#varallisuuslaskuri .expense-rental-overview > p,
#varallisuuslaskuri .expense-overview-note,
#varallisuuslaskuri .expense-transfer-note { color: #6a7882; font-size: .75rem; line-height: 1.45; }
#varallisuuslaskuri .expense-rental-overview > p { margin: 4px 0 0; }
#varallisuuslaskuri .expense-overview-note { margin: 11px 0 0; }
#varallisuuslaskuri .expense-transfer-note { margin: 12px 0 0; }
#varallisuuslaskuri .expense-rental-net-positive { color: #27623d !important; }
#varallisuuslaskuri .expense-rental-net-negative { color: #8a3434 !important; }

#varallisuuslaskuri .property-dialog { width: min(980px,calc(100% - 28px)); max-height: 92vh; overflow: hidden; }
#varallisuuslaskuri .property-dialog-card { max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
#varallisuuslaskuri .property-dialog-body { min-height: 0; overflow-y: auto; padding: 2px 5px 2px 0; margin-top: 12px; }
#varallisuuslaskuri .property-section { padding: 14px 0; border-top: 1px solid #edf0f2; }
#varallisuuslaskuri .property-section:first-child { border-top: 0; padding-top: 2px; }
#varallisuuslaskuri .property-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#varallisuuslaskuri .property-rental-grid { grid-template-columns: 1fr 1fr; }
#varallisuuslaskuri .property-housing-transfer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 9px 0 13px; padding: 12px; border: 1px solid #d5e0e5; border-radius: 8px; background: #f5f8f9; }
#varallisuuslaskuri .property-housing-transfer strong { display: block; color: #253943; font-size: .82rem; }
#varallisuuslaskuri .property-housing-transfer p { margin: 3px 0 0; color: #65737e; font-size: .75rem; line-height: 1.4; }
#varallisuuslaskuri .property-housing-transfer .button { flex: 0 0 auto; }
#varallisuuslaskuri .property-tax-note { margin-top: 13px; padding: 11px 12px; border: 1px solid #dbe3e7; border-radius: 8px; background: #f8fafb; }
#varallisuuslaskuri .property-tax-note strong { display: block; color: #253943; font-size: .82rem; }
#varallisuuslaskuri .property-tax-note p { margin: 4px 0 0; color: #65737e; font-size: .76rem; line-height: 1.45; }
#varallisuuslaskuri .property-loan-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#varallisuuslaskuri .property-loan-toggle-row h3 { margin-bottom: 3px; }
#varallisuuslaskuri .property-loan-toggle-row p { margin: 0; color: #73808a; font-size: .78rem; }
#varallisuuslaskuri .switch-field { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: #44525b; font-size: .82rem; font-weight: 700; }
#varallisuuslaskuri .switch-field input { width: 18px; height: 18px; margin: 0; }
#varallisuuslaskuri #propertyMortgageFields { margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0f2; }
#varallisuuslaskuri .mortgage-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#varallisuuslaskuri .mortgage-interest-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf0f2; }
#varallisuuslaskuri .mortgage-subheading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
#varallisuuslaskuri .mortgage-subheading h3 { margin-bottom: 3px; }
#varallisuuslaskuri .mortgage-subheading p { margin: 0; color: #73808a; font-size: .76rem; line-height: 1.4; }
#varallisuuslaskuri .mortgage-interest-head,
#varallisuuslaskuri .mortgage-interest-row { display: grid; grid-template-columns: 130px minmax(140px,1fr) 32px; gap: 8px; align-items: center; }
#varallisuuslaskuri .mortgage-interest-head { margin-top: 11px; color: #73808a; font-size: .72rem; font-weight: 700; }
#varallisuuslaskuri .mortgage-interest-periods { display: grid; gap: 7px; margin-top: 5px; }
#varallisuuslaskuri .mortgage-interest-row > input { width: 100%; min-width: 0; padding: 9px 8px; border: 1px solid #c9d1d8; border-radius: 8px; background: #fff; }
#varallisuuslaskuri .mortgage-interest-row > input:disabled { background: #eef1f3; color: #66717a; }
#varallisuuslaskuri .mortgage-interest-remove { font-size: 1.3rem; }
#varallisuuslaskuri .mortgage-preview { margin-top: 15px; padding-top: 14px; border-top: 1px solid #edf0f2; }
#varallisuuslaskuri .mortgage-preview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
#varallisuuslaskuri .mortgage-preview-grid > div { padding: 10px; border: 1px solid #e1e6ea; border-radius: 8px; background: #fafbfc; min-width: 0; }
#varallisuuslaskuri .mortgage-preview-grid span { display: block; color: #73808a; font-size: .7rem; margin-bottom: 4px; }
#varallisuuslaskuri .mortgage-preview-grid strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
#varallisuuslaskuri .mortgage-schedule-details { margin-top: 10px; border: 1px solid #e1e6ea; border-radius: 8px; overflow: hidden; }
#varallisuuslaskuri .mortgage-schedule-details summary { padding: 10px 12px; cursor: pointer; color: #263c47; font-size: .8rem; font-weight: 700; background: #fafbfc; }
#varallisuuslaskuri .mortgage-table-wrap { max-height: 280px; overflow: auto; border-top: 1px solid #e1e6ea; }
#varallisuuslaskuri .mortgage-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
#varallisuuslaskuri .mortgage-table th,
#varallisuuslaskuri .mortgage-table td { padding: 7px 9px; border-bottom: 1px solid #edf0f2; text-align: right; white-space: nowrap; }
#varallisuuslaskuri .mortgage-table th { position: sticky; top: 0; background: #f7f9fa; z-index: 1; color: #52616b; }
#varallisuuslaskuri .mortgage-table th:first-child,
#varallisuuslaskuri .mortgage-table td:first-child { text-align: left; }
#varallisuuslaskuri .property-dialog-actions { flex: 0 0 auto; padding-top: 12px; border-top: 1px solid #edf0f2; background: #fff; margin-top: 10px; }

@media (max-width: 1120px) {
  #varallisuuslaskuri .cashflow-comparison-head { display: none; }
  #varallisuuslaskuri .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-simple .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-home .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-rental .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-both .cashflow-comparison-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 13px;
    border: 1px solid #e1e6ea;
    border-radius: 9px;
    background: #fafbfc;
  }
  #varallisuuslaskuri .cashflow-period-title { grid-column: 1 / -1; font-size: .86rem; }
  #varallisuuslaskuri .cashflow-mobile-label { display: block; margin-bottom: 5px; color: #73808a; font-size: .7rem; font-weight: 700; }
  #varallisuuslaskuri .cashflow-output-cell { padding: 8px 10px; background: #fff; border: 1px solid #e1e6ea; }
  #varallisuuslaskuri .cashflow-output-cell strong { text-align: left; }
}

@media (max-width: 900px) {
  #varallisuuslaskuri .setup-grid { grid-template-columns: 1fr; }
  #varallisuuslaskuri .summary-cards { grid-template-columns: 1fr; }
  #varallisuuslaskuri .report-panel { grid-template-columns: 1fr; }
  #varallisuuslaskuri .report-panel > .panel-heading { grid-column: 1; }
  #varallisuuslaskuri .chart-wrap { height: 350px; }
}

@media (max-width: 780px) {
  #varallisuuslaskuri .app-shell { width: min(100% - 20px,680px); padding-top: 18px; }
  #varallisuuslaskuri .page-header { flex-direction: column; gap: 14px; }
  #varallisuuslaskuri .header-actions { width: 100%; align-self: stretch; flex-wrap: wrap; }
  #varallisuuslaskuri .header-actions .button { flex: 1 1 0; }
  #varallisuuslaskuri .cashflow-fill-fields { grid-template-columns: 1fr 1fr; }
  #varallisuuslaskuri .cashflow-expense-helper-button { grid-column: 1 / -1; justify-self: start; }
  #varallisuuslaskuri .cashflow-fill-actions { grid-column: 1 / -1; }
  #varallisuuslaskuri .property-dialog { width: min(720px,calc(100% - 18px)); max-height: 94vh; }
  #varallisuuslaskuri .property-dialog-card { max-height: 94vh; }
  #varallisuuslaskuri .mortgage-preview-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  #varallisuuslaskuri { max-width: 100%; overflow-x: hidden; }
  #varallisuuslaskuri .panel { padding: 14px; border-radius: 10px; }
  #varallisuuslaskuri .field-grid-assets,
  #varallisuuslaskuri .settings-grid,
  #varallisuuslaskuri .tax-settings-grid,
  #varallisuuslaskuri .property-form-grid,
  #varallisuuslaskuri .property-rental-grid,
  #varallisuuslaskuri .mortgage-form-grid,
  #varallisuuslaskuri .expense-breakdown-grid { grid-template-columns: 1fr; }
  #varallisuuslaskuri .field .field-help-placeholder { display: none; }
  #varallisuuslaskuri .asset-options-toggle-label { display: none; }
  #varallisuuslaskuri .active-capital-options-grid { grid-template-columns: 1fr; }
  #varallisuuslaskuri .compact-field { margin-left: 14px; padding-left: 10px; border-left: 2px solid #d9e1e7; }
  #varallisuuslaskuri .property-module-row { grid-template-columns: 1fr; }
  #varallisuuslaskuri .property-module-row .button { width: 100%; }
  #varallisuuslaskuri .investment-fee-controls { display: grid; grid-template-columns: 1fr; }
  #varallisuuslaskuri .investment-fee-controls .input-with-unit { flex: auto; }
  #varallisuuslaskuri .tax-mode-field { grid-column: 1; }
  #varallisuuslaskuri .cashflow-panel-heading { display: grid; }
  #varallisuuslaskuri .cashflow-helper-toggle { justify-self: start; }
  #varallisuuslaskuri .cashflow-fill-fields { grid-template-columns: 1fr; }
  #varallisuuslaskuri .cashflow-expense-helper-button,
  #varallisuuslaskuri .cashflow-fill-actions { grid-column: 1; flex-wrap: wrap; }
  #varallisuuslaskuri .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-simple .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-home .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-rental .cashflow-comparison-row,
  #varallisuuslaskuri .cashflow-layout-both .cashflow-comparison-row { grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px; }
  #varallisuuslaskuri .cashflow-year-cell { max-width: 130px; }
  #varallisuuslaskuri .surplus-investment-setting .slider-field { max-width: none; }
  #varallisuuslaskuri .investment-behavior-settings { grid-template-columns: 1fr; gap: 14px; }
  #varallisuuslaskuri .chart-panel { min-height: 410px; }
  #varallisuuslaskuri .chart-wrap { height: 300px; }
  #varallisuuslaskuri .property-loan-toggle-row,
  #varallisuuslaskuri .property-housing-transfer,
  #varallisuuslaskuri .mortgage-subheading { align-items: stretch; flex-direction: column; }
  #varallisuuslaskuri .mortgage-interest-head,
  #varallisuuslaskuri .mortgage-interest-row { grid-template-columns: 105px minmax(0,1fr) 30px; }
  #varallisuuslaskuri .mortgage-preview-grid { grid-template-columns: 1fr 1fr; }
  #varallisuuslaskuri .property-dialog-actions .dialog-action-spacer { display: none; }
  #varallisuuslaskuri .property-dialog-actions { justify-content: stretch; }
  #varallisuuslaskuri .property-dialog-actions .button { flex: 1 1 auto; }
  #varallisuuslaskuri .report-group dl > div { grid-template-columns: minmax(0,1fr) minmax(100px,auto); }
#varallisuuslaskuri #resetButton {
  flex-basis: 100%;
}

} /* max-width: 560px päättyy tähän */


@keyframes cashflowAttention {
  0%, 100% {
    border-color: #c9d1d8;
    box-shadow: 0 0 0 0 rgba(38, 60, 71, 0);
  }

  35%, 65% {
    border-color: #263c47;
    box-shadow: 0 0 0 5px rgba(38, 60, 71, 0.22);
  }
}

#varallisuuslaskuri .cashflow-attention {
  animation: cashflowAttention 0.8s ease-in-out 3;
}