:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --line: #e3e8ef;
  --text: #1f2933;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-d: #1d4ed8;
  --accent: #0f9d77;
  --danger: #dc2626;
  --soft: #eef2ff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-size: 18px; font-weight: 700; color: var(--primary); }
.tabs { display: flex; gap: 8px; justify-content: space-between; width: 100%; }
.tab {
  border: none; background: transparent; padding: 9px 16px;
  border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--muted);
  flex: 1 1 0; text-align: center; white-space: nowrap;
}
.tab:hover { background: var(--soft); }
.tab.active { background: var(--primary); color: #fff; }

main { padding: 24px; max-width: 1100px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px; margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card h2 { margin: 0 0 16px; font-size: 17px; }
.card h3 { margin: 18px 0 10px; font-size: 15px; }

.params { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.params.seniority-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 16px; background: #f0fdfa; padding: 12px; border-radius: 10px; margin-bottom: 14px; }
.params.seniority-row label { flex: 1 1 0; min-width: 0; }
.params.mixed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.params.triple-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: #f0fdfa;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.params.triple-row .calc-label { flex-direction: column; align-items: stretch; gap: 4px; }
.params.triple-row .calc-label .label-text { width: auto; }
.params.triple-row .calc-label > input { max-width: none; width: 100%; }
.params.coeff-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: #f0fdfa; padding: 12px; border-radius: 10px; margin-bottom: 14px; }

/* 基本信息合并块：三行做在一起，底色统一，行间距缩小 */
.basic-group {
  background: #f0fdfa;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}
.basic-group .triple-row,
.basic-group .coeff-row,
.basic-group .seniority-row {
  background: transparent;
  padding: 0;
  margin-bottom: 8px;
}
.basic-group .seniority-row { margin-bottom: 0; }
.params.mixed-row:last-of-type, .params.coeff-row:last-of-type { margin-bottom: 14px; }
.fld-hint { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.params label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; }
.params label.calc-label { flex-direction: row; align-items: center; gap: 8px; }
.params label.calc-label .label-text { width: 124px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.params label.calc-label .calc-input { flex: 1; min-width: 0; }
.params label.calc-label > input { flex: 1; min-width: 0; width: auto; }
.params input, .params select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--text); min-width: 0; width: 100%;
}
.params input:focus, .params select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

.coeff-hint {
  font-size: 13px; color: var(--muted); line-height: 1.8;
  margin: 0; padding: 10px 12px; background: #f8fafc; border-radius: 8px;
}
.coeff-hint:empty { display: none; }
.coeff-hint b { color: var(--text); }

.desc-edit { margin: 4px 0 10px; }
.desc-edit label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.desc-edit textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; line-height: 1.6; color: var(--text); resize: vertical; min-height: 70px;
}
.desc-edit textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

.save-desc-actions { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.save-desc-actions button.primary { padding: 9px 18px; font-size: 14px; }

.cat-block { margin-bottom: 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cat-head { background: var(--soft); padding: 8px 12px; font-weight: 600; font-size: 14px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cat-table th, .cat-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.cat-table input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.cat-table .amt { width: 120px; }
.cat-table .del { color: var(--danger); cursor: pointer; border: none; background: none; font-size: 16px; }
.add-row { margin: 6px 0 10px 12px; }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
button.primary {
  background: var(--primary); color: #fff; border: none; padding: 9px 18px;
  border-radius: 8px; cursor: pointer; font-size: 14px;
}
button.primary:hover { background: var(--primary-d); }
.actions button:not(.primary) {
  background: #fff; border: 1px solid var(--line); padding: 9px 16px;
  border-radius: 8px; cursor: pointer; font-size: 14px;
}
.msg { font-size: 13px; color: var(--accent); }

.result-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.result-tbl td { padding: 10px 12px; border: 1px solid var(--line); }
.result-tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.result-tbl tr.big td { font-size: 16px; background: var(--soft); }
.formula { margin-top: 12px; font-size: 12px; color: var(--muted); }
.auto-note {
  margin: 4px 0 14px; padding: 8px 12px; border-radius: 8px;
  background: #fff7e6; border: 1px solid #ffe1a8; color: #9a6700; font-size: 13px;
}
.auto-note:empty { display: none; }

.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#hist-search { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; min-width: 240px; }
.hide-sm { display: table-cell; }

.table-wrap { overflow-x: auto; }
.hist-controls { display: flex; gap: 8px; align-items: center; }
.hist-controls select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: #fff; color: var(--text); }
#hist-tbl, #unreported-tbl { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
#hist-tbl th, #hist-tbl td, #unreported-tbl th, #unreported-tbl td {
  border-bottom: 1px solid var(--line); text-align: right;
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
#hist-tbl th, #hist-tbl td { padding: 7px 8px; }
#unreported-tbl th, #unreported-tbl td { padding: 9px 8px; font-size: 14px; }
#hist-tbl th:first-child, #hist-tbl td:first-child,
#unreported-tbl th:first-child, #unreported-tbl td:first-child { text-align: left; }
#hist-tbl th:nth-child(1) { width: 16%; }
#hist-tbl th:nth-child(2) { width: 24%; }
#hist-tbl th:nth-child(3) { width: 26%; }
#hist-tbl th:nth-child(4) { width: 34%; }
#unreported-tbl th:nth-child(1) { width: 30%; }
#unreported-tbl th:nth-child(2) { width: 18%; }
#unreported-tbl th:nth-child(3) { width: 18%; }
#unreported-tbl th:nth-child(4) { width: 28%; }
#unreported-tbl th:nth-child(5) { width: 6%; }
#hist-tbl .actual-input {
  width: 100%; max-width: 120px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 14px; text-align: right; color: var(--text);
  font-variant-numeric: tabular-nums;
}
#hist-tbl .actual-input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
/* 其他信息可编辑表格 */
.unreported-edit-tbl { table-layout: auto; }
.unreported-edit-tbl .am { width: 100px; }
.unreported-edit-tbl th:last-child, .unreported-edit-tbl td:last-child { width: 36px; text-align: center; }
#unreported-tbl input { width: 100%; min-width: 0; font-size: 14px; }
#unreported-tbl .unp-nm { min-width: 80px; }
#unreported-tbl .unp-nt { min-width: 60px; }
/* 表头按输入框位置居中，避免偏右 */
#unreported-tbl th { text-align: center; font-size: 13px; }
/* 其他信息折叠标题字号与工资参数一致 */
#unp-head { font-size: 17px; }
#hist-tbl tbody tr { cursor: pointer; }
#hist-tbl tbody tr:hover, #unreported-tbl tbody tr:hover { background: var(--soft); }
#hist-tbl .oplink, #hist-tbl .opdel { white-space: nowrap; margin-right: 8px; }
.empty { text-align: center; color: var(--muted); padding: 16px; }
.oplink { color: var(--primary); cursor: pointer; }
.opdel { color: var(--danger); cursor: pointer; }

.hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.hint-list { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.hint-list li { margin-bottom: 4px; }
.hint-list b { color: var(--text); }
.linkbtn { color: var(--primary); text-decoration: none; font-size: 14px; }
.linkbtn:hover { text-decoration: underline; }

.sum-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.sum-card { flex: 1; min-width: 160px; background: var(--soft); border-radius: 10px; padding: 16px; }
.sum-card .v { font-size: 24px; font-weight: 700; color: var(--primary); }
.sum-card .k { font-size: 13px; color: var(--muted); margin-top: 4px; }

.chart { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bar-row .bl { width: 60px; color: var(--muted); }
.bar-track { flex: 1; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.bar-fill { height: 22px; background: linear-gradient(90deg,#2563eb,#0f9d77); border-radius: 6px; }
.bar-row .bv { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.hidden { display: none; }
.modal-box { background: #fff; border-radius: 12px; width: min(640px, 94vw); max-height: 86vh; overflow: auto; padding: 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 17px; }
#modal-close { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.detail-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; table-layout: fixed; }
.detail-tbl th, .detail-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.detail-tbl .num { text-align: right; }
.detail-tbl tr.big td { background: var(--soft); font-weight: 600; }
.detail-summary { margin-bottom: 16px; }
.detail-summary .num { font-variant-numeric: tabular-nums; }
#modal-body h3 { margin: 18px 0 10px; font-size: 14px; color: var(--text); }
#modal-body h3:first-child { margin-top: 0; }
.salary-summary {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding: 14px 16px; background: var(--soft);
  border-radius: 10px; font-size: 14px; color: var(--muted);
}
.salary-summary b { font-size: 22px; color: var(--primary); font-variant-numeric: tabular-nums; }

/* 未报提成表样式已并入上方统一表格规则 */

.calc-input { position: relative; display: block; }
.calc-input input { flex: 1; min-width: 90px; width: 100%; padding-right: 34px; }
.calc-open {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.calc-open:hover { background: #dbe4ff; }

.calc-box { background: #fff; border-radius: 12px; width: min(320px, 92vw); padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
#calc-display {
  width: 100%; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 18px; text-align: right;
  background: #f9fafb; color: var(--text);
}
.calc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px;
}
.calc-grid .calc-blank { pointer-events: none; }
.calc-grid button {
  padding: 10px 0; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; font-size: 15px; cursor: pointer; color: var(--text);
}
.calc-grid button:hover { background: var(--soft); }
.calc-grid button.calc-fn { background: #f3f4f6; color: var(--muted); font-size: 13px; }
.calc-grid button[data-key="+"], .calc-grid button[data-key="-"], .calc-grid button[data-key="*"], .calc-grid button[data-key="/"], .calc-grid button.calc-eq {
  background: #eff6ff; color: var(--primary); font-weight: 600;
}
.calc-grid button.calc-eq { background: var(--primary); color: #fff; border-color: var(--primary); }
.calc-grid button.calc-eq:hover { background: var(--primary-d); }
.calc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.calc-actions button { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; }
.calc-actions button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.calc-actions button:not(.primary) { color: var(--text); }

.result-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.result-head h2 { margin: 0; font-size: 17px; }
.toggle-icon { font-size: 14px; color: var(--muted); }
.result-body { transition: max-height .25s ease, opacity .25s ease, padding .25s ease; }
.result-body.collapsed { max-height: 0; opacity: 0; overflow: hidden; padding: 0; margin: 0; }

/* 年份 / 月份 选择器（同一行） */
.month-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.month-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.yr-control { display: flex; flex-direction: column; }
.mo-control { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.yr-control select, .mo-control select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--text); background: #fff; min-width: 96px; width: 100%;
}

/* 历史查询卡片布局（桌面与手机统一，压缩间距使 12 个月一屏可见） */
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; align-content: start; }
.hist-grid .empty { grid-column: 1 / -1; }
.hist-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; cursor: pointer; transition: background .15s; }
.hist-card:hover { background: var(--soft); }
.hist-card:active { background: var(--soft); }
.hist-card .hc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.hist-card .hc-month { font-weight: 600; font-size: 14px; }
.hist-card .hc-salary { font-size: 12px; color: var(--muted); }
.hist-card .hc-actual { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.hist-card .hc-actual .actual-input { flex: 1; width: 100%; max-width: none; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; background: #fff; }
.hist-card .hc-actual .actual-input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.hist-card .hc-actions { display: flex; gap: 12px; font-size: 13px; }

/* 计算结果卡片 */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.result-big {
  background: var(--soft); border-radius: 10px; padding: 14px; text-align: center;
}
.result-big.secondary { background: #f0fdfa; }
.result-label { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.result-num { font-size: 26px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.result-big.secondary .result-num { color: var(--accent); }
.result-sub {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: var(--bg); border-radius: 10px; padding: 12px; margin-bottom: 12px;
}
.sub-item { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.sub-item b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }

/* 响应式：手机端 */
@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
  .brand { font-size: 16px; text-align: center; }
  .tabs { justify-content: space-between; gap: 6px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 7px 10px; font-size: 14px; flex: 1 1 0; }
  main { padding: 12px; }
  .card { padding: 14px; border-radius: 10px; margin-bottom: 14px; }
  .card h2 { font-size: 16px; margin-bottom: 12px; }
  .params { gap: 10px; }
  .params.mixed-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .params.triple-row, .params.coeff-row { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
  .params.triple-row .calc-label, .params.coeff-row .calc-label { flex-direction: column; align-items: stretch; gap: 3px; }
  .params.triple-row .calc-label .label-text, .params.coeff-row .calc-label .label-text { width: auto; font-size: 11px; line-height: 1.2; }
  .params.coeff-row .calc-input { width: 100%; }
  .params.triple-row input { padding: 6px 6px; font-size: 13px; }
  .params.coeff-row input { padding: 6px 34px 6px 6px; font-size: 13px; }
  .params.coeff-row .calc-open { font-size: 14px; right: 3px; }
  .params.mixed-row:last-of-type, .params.coeff-row:last-of-type { margin-bottom: 12px; }
  .params label.calc-label .label-text { width: 96px; font-size: 12px; }
  .params label.calc-label { gap: 6px; }
  .params.seniority-row { gap: 10px; }
  .params label { font-size: 12px; }
  .params input, .params select { padding: 7px 8px; font-size: 14px; min-width: 0; width: 100%; }
  .params.coeffs { padding: 10px; }
  .coeff-hint { font-size: 12px; padding: 8px 10px; }

  .month-row { flex-direction: row; align-items: flex-end; gap: 10px; }
  .yr-control, .mo-control { flex: 1; min-width: 0; }
  .yr-control select, .mo-control select { width: 100%; font-size: 13px; padding: 7px 8px; }

  /* 手机端历史查询：2 列卡片网格，全年一屏可见 */
  .hist-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .result-grid { grid-template-columns: 1fr; gap: 10px; }
  .result-num { font-size: 22px; }
  .result-sub { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; }
  .sub-item b { font-size: 13px; }

  .cat-block { margin-bottom: 8px; }
  .cat-head { padding: 7px 10px; font-size: 13px; }
  .cat-table th, .cat-table td { padding: 5px 6px; font-size: 12px; }
  .cat-table input { padding: 6px 6px; font-size: 14px; }
  .cat-table .amt { width: 90px; }
  .cat-table .del { font-size: 14px; padding: 2px 4px; }
  .add-row { margin: 6px 0 8px 10px; font-size: 13px; }

  .actions { flex-wrap: wrap; gap: 8px; }
  button.primary, .actions button:not(.primary) { padding: 8px 14px; font-size: 14px; flex: 1; min-width: 100px; }

  .hide-sm { display: none !important; }
  .hist-controls { width: 100%; }
  .hist-controls select, #hist-search { width: 100%; min-width: 0; }
  .row-between { flex-direction: column; align-items: stretch; gap: 8px; }
  #hist-tbl, #unreported-tbl { table-layout: auto; font-size: 14px; }
  #hist-tbl th, #hist-tbl td, #unreported-tbl th, #unreported-tbl td { padding: 9px 6px; }
  #hist-tbl th, #hist-tbl td { padding: 7px 6px; }
  #hist-tbl th:nth-child(n) { width: auto; }
  #unreported-tbl th:nth-child(n) { width: auto; }
  #unreported-tbl .am { width: 70px; }
  #unreported-tbl .unp-nm { min-width: 90px; }
  #hist-tbl th:first-child, #hist-tbl td:first-child,
  #unreported-tbl th:first-child, #unreported-tbl td:first-child { text-align: center; }
  #hist-tbl .oplink, #hist-tbl .opdel, #unreported-tbl .oplink, #unreported-tbl .opdel { margin-right: 4px; }
  #hist-tbl .actual-input { max-width: 80px; font-size: 13px; padding: 4px 6px; }
  .unreported-row input { font-size: 13px; min-width: 0; }
  .unreported-row input[type="number"] { max-width: 80px; }
  .unreported-row { gap: 6px; }
  .detail-tbl { font-size: 12px; }
  .detail-tbl th, .detail-tbl td { padding: 7px 5px; }
  .salary-summary { padding: 12px; margin-top: 14px; }
  .salary-summary b { font-size: 18px; }
  .modal-box { padding: 14px; }

  .sum-cards { gap: 10px; }
  .sum-card { min-width: calc(50% - 8px); padding: 12px; }
  .sum-card .v { font-size: 18px; }
  .sum-card .k { font-size: 12px; }
  .bar-row .bl { width: 44px; font-size: 12px; }
  .bar-row .bv { width: 72px; font-size: 12px; }
  .bar-fill { height: 18px; }

  .calc-box { padding: 12px; }
  .calc-grid button { padding: 8px 0; font-size: 14px; }
  #calc-display { font-size: 16px; padding: 8px 10px; }

  .modal-box { padding: 14px; width: 94vw; }
}

/* 超小屏 */
@media (max-width: 380px) {
  .result-sub { grid-template-columns: repeat(2, 1fr); }
  .cat-table th:nth-child(3), .cat-table td:nth-child(3) { display: none; }
  .cat-table th:nth-child(4), .cat-table td:nth-child(4) { display: table-cell; }
}

/* 新建年度按钮 */
.yr-inline { display: flex; gap: 6px; align-items: center; }
.yr-control .yr-inline select { flex: 1; min-width: 0; width: auto; }
.yr-add {
  flex: 0 0 auto; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--soft); color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.yr-add:hover { background: #dbe4ff; }
.hist-controls #sum-year { width: auto; flex: 1; min-width: 0; }

/* 年终奖分类块折叠 */
.cat-head.collapsible { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.cat-toggle { font-size: 11px; transition: transform .15s; }
.cat-block.collapsed .cat-table,
.cat-block.collapsed .add-row,
.cat-block.collapsed .collapsible-body { display: none; }


/* ---------- 多用户：通用隐藏 / 顶栏用户 ---------- */
.hidden { display: none !important; }

.user-box {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  text-decoration: underline;
}

/* ---------- 全屏登录页 ---------- */
.login-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #1a1a2e 75%, #16213e 100%);
  background-size: 400% 400%;
  animation: loginBgShift 12s ease infinite;
}
@keyframes loginBgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  margin: 24px;
  padding: 36px 28px 28px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.login-brand {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 24px;
  letter-spacing: 1px;
}
.login-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.l-tab {
  flex: 1;
  padding: 10px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  color: var(--muted);
  transition: all .2s ease;
}
.l-tab:hover { background: var(--soft); }
.l-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.l-field {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.l-field input {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text);
  background: #fafbfc;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.l-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  background: #fff;
}
.l-msg {
  min-height: 20px;
  font-size: 13px;
  margin: 2px 0 16px;
  color: var(--danger);
}
.l-submit {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 4px;
  transition: background .2s, transform .1s;
}
.l-submit:hover { background: var(--primary-d); }
.l-submit:active { transform: scale(0.98); }

/* 应用主体容器（未登录时隐藏） */
.app-container.hidden { display: none !important; }

/* ---------- 登录 / 注册遮罩（已废弃，保留兼容） ---------- */
.auth-overlay { display: none !important; }

/* ---------- 数据管理按钮 ---------- */
.file-btn {
  background: #fff;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 14px;
}
.file-btn:hover { background: rgba(37, 99, 235, 0.08); }