:root {
  color-scheme: dark;
  --bg: #0d1116;
  --rail: #111721;
  --panel: #252d38;
  --panel-2: #27313e;
  --panel-3: #202833;
  --line: #394555;
  --line-soft: #303a46;
  --muted: #9aa7b6;
  --text: #eef3f7;
  --amber: #d89038;
  --amber-2: #f0c36f;
  --cyan: #4db7c7;
  --green: #62c692;
  --rose: #d76b83;
  --blue: #7aa2f7;
}

.icon-rail {
  position: relative;
  background: var(--rail);
  border-right: 1px solid #26303b;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 58px;
  gap: 10px;
  padding: 12px 8px;
  overflow: visible;
  z-index: 10;
}
.icon-rail::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 58px;
  background: var(--rail);
  border-right: 1px solid #26303b;
  z-index: -1;
  transition: width 180ms ease;
}
.icon-rail:hover::after, .icon-rail:focus-within::after { width: 182px; }
.rail-button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 4px;
  padding: 0;
  color: #aeb8c5;
  background: transparent;
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 11px;
  font-weight: 800;
  transition: width 180ms ease, padding 180ms ease, justify-content 180ms ease, gap 180ms ease;
}
.rail-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.85; }
.rail-button[href="/salary-rows.html"], .rail-button[href="salary-rows.html"] { display: none; }
.rail-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: max-width 180ms ease, opacity 140ms ease, transform 180ms ease; }
.icon-rail:hover .rail-button, .icon-rail:focus-within .rail-button { width: 166px; justify-content: flex-start; gap: 10px; padding: 8px 12px; }
.icon-rail:hover .rail-label, .icon-rail:focus-within .rail-label { max-width: 132px; opacity: 1; transform: translateX(0); }
.rail-button.active { color: #10151c; background: var(--amber-2); }

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 1px solid #3d4855; background: #2c3542; color: var(--text); cursor: pointer; }
button:hover, button:focus-visible, input:focus-visible, select:focus-visible { border-color: var(--amber); outline: none; }

.page-header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: #121821;
  border-bottom: 1px solid #26303b;
}
.page-header h1 { margin: 2px 0 0; font-size: 16px; line-height: 1; color: #dce4ed; }
.eyebrow, .metric-label, .overlay-label, label, th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.header-status { display: grid; gap: 3px; justify-items: end; font-size: 11px; color: var(--muted); }
.header-status strong { color: #dce4ed; font-size: 12px; }


.overview-shell {
  height: calc(100vh - 77px);
  min-height: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #111619;
  background-size: 64px 64px, 64px 64px, 100% 100%;
}
.plain-overview { overflow: auto; }
.plain-overview .landing-stage {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0;
  grid-template-rows: auto auto;
}
.plain-overview .landing-hero {
  min-height: 230px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}
.plain-overview .landing-copy h2 { max-width: 760px; }
.plain-overview .landing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.payslip-shell {
  display: grid;
  grid-template-columns: 58px 300px minmax(760px, 1fr) 360px;
  height: calc(100vh - 58px);
  min-height: 662px;
  overflow: hidden;
}
.control-panel, .detail-panel { background: var(--panel); overflow: hidden auto; }
.control-panel { border-right: 1px solid #10161d; }
.detail-panel { border-left: 1px solid #10161d; padding: 18px; display: grid; align-content: start; gap: 14px; }
.metric-card, .mini-panel, .detail-card, .focus-panel, .salary-graph-panel, .payslip-list-panel, .tax-return-panel, .table-panel {
  border: 1px solid var(--line);
  background: var(--panel-3);
  border-radius: 4px;
}
.metric-card { margin: 14px; padding: 16px; display: grid; gap: 6px; }
.primary-metric strong { font-size: 34px; line-height: 1; overflow-wrap: anywhere; }
.primary-metric span:last-child, .mini-panel { color: var(--muted); font-size: 12px; }
.filter-group { display: grid; gap: 13px; padding: 14px; }
label { display: grid; gap: 7px; }

.filter-block { display: grid; gap: 7px; }
.filter-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-title { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.mini-action { min-height: 24px; padding: 0 8px; border-radius: 3px; font-size: 10px; font-weight: 800; }
.year-filter-list,
.graph-field-list {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid #566273;
  border-radius: 2px;
}
.graph-field-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 112px;
  overflow: auto;
}
.year-filter-option,
.graph-field-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #dce4ed;
  font-size: 12px;
  font-weight: 750;
  text-transform: none;
}
.year-filter-option input,
.graph-field-option input {
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  accent-color: var(--amber-2);
}
.year-filter-option span { overflow: hidden; text-overflow: ellipsis; }
.year-slider-card { display: grid; gap: 11px; min-width: 0; }
.year-slider-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.year-slider-readout strong { color: var(--amber-2); font-size: 14px; letter-spacing: 0; text-transform: none; }
.year-slider-stack { --thumb-size: 17px; position: relative; height: 34px; margin: 0 2px; }
.year-slider-track { position: absolute; left: calc(var(--thumb-size) / 2); right: calc(var(--thumb-size) / 2); top: 15px; height: 5px; border-radius: 999px; background: #151c24; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); overflow: hidden; }
.year-slider-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--amber-2), #4db7c7); }
.year-range-input { position: absolute; inset: 0; width: 100%; min-height: 34px; padding: 0; border: 0; background: transparent; pointer-events: none; appearance: none; }
.year-range-input:focus-visible { outline: 0; }
.year-range-input::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.year-range-input::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; margin-top: -6px; border-radius: 50%; border: 2px solid #111619; background: var(--amber-2); box-shadow: 0 0 0 2px rgba(240,195,111,.22); pointer-events: auto; cursor: pointer; }
.year-range-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(240,195,111,.42); }
.year-range-input::-moz-range-track { height: 5px; background: transparent; }
.year-range-input::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #111619; background: var(--amber-2); box-shadow: 0 0 0 2px rgba(240,195,111,.22); pointer-events: auto; cursor: pointer; }
.year-range-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(240,195,111,.42); }
.year-range-input.range-end::-webkit-slider-thumb { background: #4db7c7; box-shadow: 0 0 0 2px rgba(77,183,199,.22); }
.year-range-input.range-end::-moz-range-thumb { background: #4db7c7; box-shadow: 0 0 0 2px rgba(77,183,199,.22); }
.year-slider-scale { display: flex; justify-content: space-between; gap: 6px; color: #9aa7b6; font-size: 10px; font-weight: 850; }
.graph-field-list { grid-template-columns: 1fr; max-height: none; }
.graph-field-option span { display: inline-flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; }
.graph-field-option i { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
input, select { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid #566273; border-radius: 2px; min-height: 36px; padding: 7px 9px; }
.filter-action { width: 100%; min-height: 38px; border-radius: 3px; font-size: 12px; font-weight: 800; }
.mini-panel { margin: 0 14px 14px; padding: 14px; display: grid; gap: 10px; }
.source-summary { display: grid; gap: 8px; color: #dce4ed; }
.source-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.source-row strong { text-align: right; min-width: 0; overflow-wrap: anywhere; }

.payslip-workspace { display: grid; min-width: 0; min-height: 0; overflow: hidden; }


.landing-stage {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 18px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 28% 22%, rgba(216,144,56,.12), transparent 30%),
    radial-gradient(circle at 78% 12%, rgba(77,183,199,.10), transparent 26%),
    #111619;
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%, 100% 100%;
}
.landing-hero {
  border: 1px solid var(--line);
  background: rgba(32,40,51,.94);
  border-radius: 4px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 24px;
  align-items: stretch;
  min-width: 0;
}
.landing-copy { display: grid; align-content: center; gap: 12px; min-width: 0; }
.landing-copy h2 {
  color: var(--text);
  font-size: clamp(28px, 4vw, 54px);
  line-height: .98;
  max-width: 760px;
}
.landing-copy p { color: #c4ccd5; font-size: 15px; line-height: 1.5; max-width: 720px; }
.landing-latest {
  border: 1px solid #44505f;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 18px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  min-width: 0;
}
.landing-latest strong {
  color: var(--amber-2);
  font-size: clamp(34px, 4vw, 58px);
  line-height: .95;
  overflow-wrap: anywhere;
}
.landing-latest span:last-child { color: #c4ccd5; font-size: 13px; line-height: 1.4; }
.landing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.landing-metric {
  border: 1px solid var(--line);
  background: var(--panel-3);
  border-radius: 4px;
  padding: 16px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.landing-metric strong { color: var(--text); font-size: 24px; line-height: 1.05; overflow-wrap: anywhere; }
.landing-metric span:last-child { color: var(--muted); font-size: 12px; line-height: 1.35; }
.landing-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}
.landing-action {
  border: 1px solid #44505f;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 18px;
  display: grid;
  gap: 10px;
  min-width: 0;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.landing-action:hover, .landing-action:focus-visible {
  border-color: var(--amber-2);
  background: #2f3846;
  outline: none;
  transform: translateY(-1px);
}
.landing-action strong { color: var(--text); font-size: 18px; line-height: 1.2; }
.landing-action span:last-child { color: #c4ccd5; font-size: 13px; line-height: 1.45; }

.page-stage {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 28% 22%, rgba(216,144,56,.10), transparent 30%),
    radial-gradient(circle at 78% 12%, rgba(77,183,199,.09), transparent 26%),
    #111619;
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%, 100% 100%;
}
.single-panel { display: grid; }
.page-panel-fill { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.page-overview .single-panel { grid-template-columns: minmax(420px, 720px); align-content: start; }
.page-graph .single-panel { grid-template-columns: minmax(0, 1fr); }
.page-payslips .single-panel { grid-template-columns: minmax(0, 1fr); }
.page-tax .single-panel { grid-template-columns: minmax(0, 1fr); }
.page-rows { grid-template-rows: minmax(0, 1fr); }
.table-page-panel { height: 100%; }
.page-graph .salary-graph svg { min-height: 430px; }
.page-payslips .payslip-card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.page-tax .tax-return-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.page-tax .tax-return-grid { max-height: none; min-height: 0; }

.register-stage {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(460px, 1.28fr);
  grid-template-rows: minmax(245px, .92fr) minmax(210px, 1fr);
  gap: 18px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 28% 22%, rgba(216,144,56,.10), transparent 30%),
    radial-gradient(circle at 78% 12%, rgba(77,183,199,.09), transparent 26%),
    #111619;
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%, 100% 100%;
}
.focus-panel, .salary-graph-panel, .payslip-list-panel, .tax-return-panel { padding: 18px; min-width: 0; overflow: hidden; }
.focus-panel { display: grid; align-content: space-between; gap: 20px; background: rgba(32,40,51,.94); grid-row: 1 / span 2; }
.salary-graph-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(32,40,51,.94); }
.payslip-list-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
h2, h3, p { margin: 0; }
h2 { font-size: 16px; line-height: 1.25; }
.focus-panel p { margin-top: 8px; color: #c4ccd5; font-size: 13px; line-height: 1.45; max-width: 48ch; overflow-wrap: anywhere; }
.focus-number { color: var(--amber-2); font-size: clamp(42px, 4.2vw, 68px); font-weight: 850; line-height: .92; white-space: nowrap; max-width: 100%; overflow: hidden; }
.focus-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.focus-stat { border: 1px solid #3d4855; background: var(--panel-2); padding: 12px; border-radius: 3px; display: grid; gap: 5px; min-width: 0; overflow: hidden; }
.focus-stat strong { font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.focus-stat span { color: var(--muted); font-size: 11px; }
.panel-header-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panel-header-row.compact { margin: 0; padding: 14px 16px 10px; }
.scope-pill { border: 1px solid #44505f; background: var(--panel-2); color: #c7d1dc; border-radius: 3px; padding: 6px 8px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.payslip-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 12px; min-height: 0; overflow: auto; padding-right: 2px; }
.payslip-card { position: relative; display: grid; gap: 7px; min-width: 0; padding: 14px; border-radius: 4px; text-align: left; background: var(--panel-2); border: 1px solid #44505f; color: var(--text); }
.page-payslips .payslip-card:nth-child(n+3)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  border-top: 1px solid rgba(154,167,182,.22);
}
.payslip-card:hover, .payslip-card.active { border-color: var(--amber-2); background: #2f3846; }
.payslip-card-date { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.payslip-card strong { color: var(--green); font-size: 24px; line-height: 1; overflow-wrap: anywhere; }
.payslip-card span { min-width: 0; overflow-wrap: anywhere; }
.payslip-card-file { color: #c4ccd5; font-size: 12px; }
.empty-state { color: #c4ccd5; font-size: 13px; }
.tax-return-panel { grid-column: 1 / -1; background: rgba(32,40,51,.94); }
.tax-return-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 12px; max-height: none; min-height: 0; height: 100%; overflow: auto; padding-right: 2px; }
.tax-return-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; height: 100%; gap: 12px; padding: 14px; border: 1px solid #44505f; border-radius: 4px; background: var(--panel-2); min-width: 0; min-height: 0; }
.tax-return-card strong { display: block; margin-top: 5px; color: var(--blue); font-size: 24px; line-height: 1; overflow-wrap: anywhere; }
.tax-return-card-estimated { border-color: rgba(240,195,111,.58); background: #2d2b22; }
.tax-return-card-estimated strong { color: var(--amber-2); }
.tax-return-card .detail-row { grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr); }
.tax-return-card dt, .tax-return-card dd { font-size: 10px; }
.pdf-action-disabled { border-color: #59616b; color: #9aa4ae; background: #303740; cursor: not-allowed; pointer-events: none; opacity: .7; text-align: center; }

.salary-graph { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.salary-graph svg { width: 100%; height: 100%; min-height: 190px; display: block; overflow: visible; }

.graph-node-detail {
  border: 1px solid #44505f;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr);
  gap: 16px;
  min-width: 0;
}
.graph-node-detail:empty { display: none; }
.graph-node-detail h3 { color: var(--amber-2); font-size: 20px; line-height: 1.1; text-transform: none; }
.graph-node-detail p { color: #c4ccd5; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.graph-node-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.graph-node-grid div {
  border-left: 1px solid var(--line-soft);
  padding-left: 10px;
  min-width: 0;
}
.graph-node-grid dt { font-size: 10px; }
.graph-node-grid dd { text-align: left; font-size: 15px; overflow-wrap: anywhere; }
.graph-node-grid .graph-range-change { margin-top: 4px; color: #c4ccd5; font-size: 11px; font-weight: 800; }

.graph-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; color: #c4ccd5; font-size: 11px; font-weight: 800; }
.graph-legend span { display: inline-flex; align-items: center; gap: 6px; }
.graph-legend i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.grid-line { stroke: rgba(220,228,237,.14); stroke-width: 1; }
.axis-label { fill: #9aa7b6; font-size: 10px; font-weight: 700; }
.x-axis-label { font-size: 9px; }
.salary-line { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.salary-line.primary { stroke-width: 3; opacity: 1; }
.salary-line.actual { stroke-width: 2.8; opacity: .95; }
.salary-line.projection { stroke-dasharray: 8 7; opacity: .58; }
.salary-point { fill: var(--panel-3); stroke: currentColor; stroke-width: 2.5; cursor: pointer; }
.salary-point.net { color: var(--green); }
.salary-point.actual { color: #4db7c7; }
.salary-point.gross { color: #7aa2f7; }
.salary-point.taxable { color: #f0c36f; }
.salary-point.secondary-point { opacity: .82; }
.salary-point.active { fill: #e25555; stroke: #ffb0a8; stroke-width: 3; opacity: 1; }
.salary-point.projected { fill: #111619; stroke: currentColor; stroke-dasharray: 3 3; cursor: pointer; }
.salary-point.projected.active { fill: #e25555; stroke: #ffb0a8; }
.projection-swatch { background: transparent !important; border: 2px dashed var(--amber-2); }
.projected-label { fill: var(--amber-2); }
.context-event line { stroke: var(--event-color); stroke-width: 3; stroke-linecap: round; opacity: .74; }
.context-event circle { fill: var(--event-color); stroke: #111619; stroke-width: 2; }
.context-event text { fill: #dce4ed; font-size: 9px; font-weight: 850; pointer-events: none; }
.context-demarcation line { stroke: var(--event-color); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .48; }
.context-demarcation text { fill: #c4ccd5; font-size: 9px; font-weight: 850; pointer-events: none; }
.salary-increase-marker line { stroke: #ff8f70; stroke-width: 1.5; stroke-dasharray: 2 5; opacity: .55; }
.salary-increase-marker circle { fill: #ff8f70; stroke: #111619; stroke-width: 2; }
.gratification-marker line { stroke: #f472b6; stroke-width: 2; stroke-dasharray: 7 5; opacity: .62; }
.gratification-marker circle { fill: #f472b6; stroke: #111619; stroke-width: 2; }

.table-panel { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; overflow: hidden; }
.table-wrap { height: calc(100% - 62px); overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th, td { padding: 10px 12px; border-top: 1px solid var(--line-soft); text-align: left; font-size: 12px; }
td { color: #dce4ed; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.active { background: rgba(240,195,111,.10); }
.file-pill { display: inline-block; max-width: 220px; overflow-wrap: anywhere; color: #c7d1dc; }
.amount-net { color: var(--green); }
.amount-actual { color: var(--cyan); }
.amount-gross { color: var(--blue); }
.amount-taxable { color: var(--amber-2); }
.amount-down { color: var(--rose); }

.detail-card { padding: 16px; display: grid; gap: 12px; }
.selected-card h2 { color: var(--amber-2); font-size: 28px; overflow-wrap: anywhere; }
dl { margin: 0; display: grid; gap: 10px; }
.detail-row { display: grid; grid-template-columns: minmax(84px, .7fr) minmax(0, 1.3fr); gap: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
dt { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
dd { margin: 0; color: #dce4ed; font-weight: 750; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.mix-bars { display: grid; gap: 12px; }
.mix-row { display: grid; gap: 6px; }
.mix-top { display: flex; justify-content: space-between; gap: 12px; color: #dce4ed; font-size: 12px; }
.mix-track { height: 10px; border-radius: 2px; background: #1b222c; overflow: hidden; }
.mix-fill { height: 100%; border-radius: 2px; }
#salaryNotes { color: #c4ccd5; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.pdf-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 16px;
  border: 1px solid var(--border);
  background: #2c3847;
  color: var(--text);
  text-decoration: none;
  font-weight: 850;
}
.pdf-action:hover { border-color: var(--amber); color: var(--amber-2); }

@media (max-width: 1240px) {
  
.payslip-shell { grid-template-columns: 58px 280px minmax(640px, 1fr) 320px; }
  
.register-stage { grid-template-columns: minmax(300px, .72fr) minmax(400px, 1.28fr); }
  .focus-number { font-size: clamp(38px, 3.7vw, 58px); }
}
@media (max-width: 980px) {
  
.payslip-shell { grid-template-columns: 58px 250px minmax(0, 1fr); }
  .detail-panel { display: none; }
  
.register-stage { grid-template-columns: 1fr; grid-template-rows: auto; }
  .focus-panel { grid-row: auto; }
}
@media (max-width: 720px) {
  .page-header { align-items: flex-start; height: auto; min-height: 72px; padding: 12px 14px; gap: 12px; }
  .header-status { justify-items: start; }
  
.payslip-shell { display: block; height: auto; min-height: 0; overflow: visible; }
  .icon-rail { position: sticky; top: 0; width: 100%; height: 60px; min-height: 60px; max-height: 60px; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #26303b; }
  .icon-rail::after { display: none; }
  .rail-button, .icon-rail:hover .rail-button, .icon-rail:focus-within .rail-button { width: auto; min-width: 42px; height: 42px; min-height: 42px; padding: 8px 10px; gap: 8px; }
  .rail-label, .icon-rail:hover .rail-label, .icon-rail:focus-within .rail-label { max-width: 120px; opacity: 1; transform: none; }
  .control-panel { border-right: 0; overflow: visible; }
  .payslip-workspace { display: block; overflow: visible; }
  
.register-stage { padding: 14px; }
  .focus-subgrid { grid-template-columns: 1fr; }
  .table-panel { min-height: 420px; }
}

body[data-page="graph"] .payslip-shell {
  grid-template-columns: 58px 300px minmax(760px, 1fr);
}
body[data-page="tax"] .payslip-shell {
  grid-template-columns: 58px minmax(0, 1fr);
}
body[data-page="tax"] .payslip-workspace,
body[data-page="tax"] .page-stage,
body[data-page="tax"] .tax-return-panel {
  min-height: 0;
  height: 100%;
}
body[data-page="tax"] .page-stage {
  overflow: hidden;
}
body[data-page="graph"] .detail-panel {
  display: none;
}
body[data-page="graph"] .payslip-workspace,
body[data-page="graph"] .page-stage,
body[data-page="graph"] .salary-graph-panel,
body[data-page="graph"] .salary-graph {
  min-height: 0;
  height: 100%;
}
body[data-page="graph"] .page-stage {
  overflow: hidden;
}
body[data-page="graph"] .salary-graph-panel {
  padding: 18px;
  gap: 14px;
}
body[data-page="graph"] .salary-graph svg {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}
@media (max-width: 1240px) {
  body[data-page="graph"] .payslip-shell {
    grid-template-columns: 58px 280px minmax(640px, 1fr);
  }
}

@media (max-width: 980px) {
  .graph-node-detail { grid-template-columns: 1fr; }
  .graph-node-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .graph-node-grid { grid-template-columns: 1fr; }
  .page-payslips .payslip-card:nth-child(n+2)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    border-top: 1px solid rgba(154,167,182,.22);
  }
}

@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
  }

  body[data-page="overview"] .overview-shell {
    display: block;
    height: auto;
    min-height: calc(100svh - 72px);
    overflow: visible;
  }

  body[data-page="overview"] .overview-shell > .icon-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid #26303b;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="overview"] .overview-shell > .icon-rail::after {
    display: none;
  }

  body[data-page="overview"] .overview-shell > .icon-rail .rail-button,
  body[data-page="overview"] .overview-shell > .icon-rail:hover .rail-button,
  body[data-page="overview"] .overview-shell > .icon-rail:focus-within .rail-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
  }

  body[data-page="overview"] .overview-shell > .icon-rail .rail-label,
  body[data-page="overview"] .overview-shell > .icon-rail:hover .rail-label,
  body[data-page="overview"] .overview-shell > .icon-rail:focus-within .rail-label {
    max-width: 120px;
    opacity: 1;
    transform: none;
  }

  body[data-page="overview"] .plain-overview {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body[data-page="overview"] .plain-overview .landing-stage {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 14px;
    overflow: visible;
  }

  body[data-page="overview"] .plain-overview .landing-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 16px;
    gap: 16px;
  }

  body[data-page="overview"] .plain-overview .landing-grid {
    grid-template-columns: 1fr;
  }
}