.calc-app { padding-bottom: var(--space-20); }.calc .grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 980px) {.calc .grid { grid-template-columns: 1fr; } }.calc .results { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }.calc .panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}.calc .panel-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }.calc .panel-head { margin-bottom: var(--space-5); }.calc .panel-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }.calc .panel-foot { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); }.calc /* ---------- inputs ---------- */
.inputs { position: sticky; top: 78px; }
@media (max-width: 980px) {.calc .inputs { position: static; } }.calc .inputs .panel-title { margin-bottom: var(--space-5); }.calc .group-head {
  font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
  margin-top: var(--space-6); margin-bottom: var(--space-4);
  padding-top: var(--space-4); border-top: 1px solid var(--color-divider);
}.calc .field { margin-bottom: var(--space-4); min-width: 0; }.calc .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; }.calc .field label {
  display: block; font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); margin-bottom: 6px; letter-spacing: .01em;
}.calc .field-row .field label { min-height: 2.4em; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 4px; }.calc .field label .unit { font-weight: 400; color: var(--color-text-faint); text-transform: none; letter-spacing: 0; }.calc input[type="number"], .calc select {
  width: 100%; padding: 9px 11px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}.calc input[type="number"]:hover, .calc select:hover { border-color: var(--color-text-faint); }.calc input[type="number"]:focus, .calc select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}.calc select { appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 51%, calc(100% - 11px) 51%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}.calc .input-affix { position: relative; }.calc .input-affix .affix {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm); color: var(--color-text-faint); pointer-events: none; font-weight: 500;
}.calc .input-affix input { padding-left: 24px; }.calc .hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 6px; line-height: 1.45; }.calc .hint-tight { margin-top: 4px; margin-bottom: var(--space-4); padding-left: 25px; }.calc .check { display: flex; gap: 9px; align-items: flex-start; font-size: var(--text-sm); cursor: pointer; color: var(--color-text-muted); }.calc .check input { margin-top: 3px; accent-color: var(--color-primary); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }.calc .check span { line-height: 1.4; }.calc .is-disabled { opacity: .4; pointer-events: none; }.calc .est {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-copper); background: color-mix(in srgb, var(--color-copper) 13%, transparent);
  border-radius: 3px; padding: 1px 4px; vertical-align: 1.5px; cursor: help;
}.calc .reset {
  width: 100%; margin-top: var(--space-5); padding: 9px;
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}.calc .reset:hover { background: var(--color-surface-offset); color: var(--color-text); }.calc /* ---------- headline KPI ---------- */
.headline {
  background: var(--color-surface-deep);
  border-color: color-mix(in srgb, var(--color-amber) 24%, transparent);
  color: #f2e9da;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-6); align-items: center;
}
@media (max-width: 720px) {.calc .headline { grid-template-columns: 1fr; } }.calc .kpi-label { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: #b3a288; font-weight: 600; }.calc .kpi-huge {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); line-height: 1;
  letter-spacing: -.025em; color: var(--color-amber);
  margin: var(--space-3) 0 var(--space-2);
}.calc .kpi-sub { font-size: var(--text-sm); color: #b3a288; }.calc .kpi-sub span { color: #e4d7c1; font-weight: 600; }.calc .headline-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 190px; }
@media (max-width: 720px) {.calc .headline-side { flex-direction: row; min-width: 0; }.calc .headline-side .mini { flex: 1; } }.calc .mini { border-left: 2px solid color-mix(in srgb, var(--color-amber) 40%, transparent); padding-left: var(--space-4); }.calc .mini-label { font-size: var(--text-xs); color: #b3a288; letter-spacing: .04em; }.calc .mini-value { font-size: var(--text-lg); font-weight: 600; color: #f2e9da; margin-top: 2px; }.calc /* ---------- verdict ---------- */
.verdict-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }.calc .verdict-tag {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-full);
  background: var(--color-primary-soft); color: var(--color-primary);
}.calc .verdict[data-mode="sell"] .verdict-tag { background: var(--color-alert-soft); color: var(--color-alert); }.calc .verdict[data-mode="hold"] .verdict-tag { background: var(--color-good-soft); color: var(--color-good); }
/* Whole verdict panel tints with the outcome: red when selling wins, green when holding wins, neutral when it is a wash. */
.calc .verdict { transition: background-color .25s ease, border-color .25s ease; }
.calc .verdict[data-mode="sell"] { background: color-mix(in srgb, var(--color-alert-soft) 55%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-alert) 30%, transparent); }
.calc .verdict[data-mode="sell"] .verdict-tag { background: color-mix(in srgb, var(--color-alert) 14%, transparent); }
.calc .verdict[data-mode="sell"] .compare { border-top-color: color-mix(in srgb, var(--color-alert) 22%, transparent); }
.calc .verdict[data-mode="sell"] .compare-divider { background: color-mix(in srgb, var(--color-alert) 22%, transparent); }
.calc .verdict[data-mode="hold"] { background: color-mix(in srgb, var(--color-good-soft) 55%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-good) 30%, transparent); }
.calc .verdict[data-mode="hold"] .verdict-tag { background: color-mix(in srgb, var(--color-good) 14%, transparent); }
.calc .verdict[data-mode="hold"] .compare { border-top-color: color-mix(in srgb, var(--color-good) 22%, transparent); }
.calc .verdict[data-mode="hold"] .compare-divider { background: color-mix(in srgb, var(--color-good) 22%, transparent); }
.calc .verdict[data-mode="hold"] .compare-col.accent .compare-value { color: var(--color-good); }
.calc .verdict[data-mode="sell"] .compare-col.accent .compare-value { color: var(--color-alert); }
.calc .verdict h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: -.015em; }.calc .verdict-body { color: var(--color-text-muted); max-width: 74ch; margin-bottom: var(--space-6); font-size: var(--text-sm); line-height: 1.65; }.calc .compare {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-5); align-items: stretch;
  padding-top: var(--space-5); border-top: 1px solid var(--color-divider);
}
@media (max-width: 780px) {.calc .compare { grid-template-columns: 1fr; gap: var(--space-5); }.calc .compare-divider { display: none; } }.calc .compare-divider { width: 1px; background: var(--color-divider); }.calc .compare-label { font-size: var(--text-xs); letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; }.calc .compare-value { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; margin: var(--space-2) 0 4px; }.calc .compare-col.accent .compare-value { color: var(--color-primary); }.calc .compare-note { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.45; }.calc /* ---------- headline split + profit view ---------- */
.kpi-split { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font-size: var(--text-xs); color: #b3a288; }.calc .kpi-split b { color: #e4d7c1; font-weight: 600; }.calc .profit { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-offset); border: 1px solid var(--color-border); }.calc .profit[hidden] { display: none; }.calc .profit-label { font-size: var(--text-xs); letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-3); }.calc .profit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 780px) {.calc .profit-grid { grid-template-columns: 1fr; gap: var(--space-4); } }.calc .profit-value { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; color: var(--color-good); }.calc .profit-value.neg { color: var(--color-alert); }.calc .profit-note { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.45; margin-top: 2px; }.calc .profit-head { color: var(--color-text-muted); font-weight: 600; margin: 0 0 2px; }.calc /* ---------- charts ---------- */
.chart-box { position: relative; height: 300px; }
@media (max-width: 560px) {.calc .chart-box { height: 260px; } }.calc /* ---------- table ---------- */
.table-scroll { overflow-x: auto; margin: 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1); padding: 0 var(--space-6) var(--space-6); }.calc table { font-size: var(--text-sm); min-width: 640px; }.calc th, .calc td { text-align: right; padding: 9px 10px; white-space: nowrap; }.calc th:first-child, .calc td:first-child, .calc th:nth-child(2), .calc td:nth-child(2) { text-align: left; }.calc thead th {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-border);
}.calc tbody tr { border-bottom: 1px solid var(--color-divider); }.calc tbody tr:last-child { border-bottom: none; background: var(--color-surface-offset); font-weight: 600; }.calc tbody td.strong { font-weight: 600; }.calc tbody td.dim { color: var(--color-text-muted); }.calc /* ---------- sources ---------- */
.sources { margin-top: var(--space-6); }.calc .sources .panel-title { margin-bottom: var(--space-3); }.calc .sources-intro { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 82ch; margin-bottom: var(--space-6); }.calc .sources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--space-6); }.calc .sources-grid h3 { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }.calc .sources-grid p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; }.calc .disclaimer {
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs); color: var(--color-text-faint); max-width: 82ch;
}

/* ---------- footer ---------- */