/* Layout: topbar → centered header → 2-col block (settings | totals, no gap, rounded) → full-width timesheet card.
   Deliberately dark-only, as in the reference calculator. */
:root {
  --bg: #0A0A0A;
  --panel: #0D0D0D;
  --divider: #1E1E1E;
  --line: rgba(255, 255, 255, 0.10);
  --fg: #FAFAFA;
  --muted: #A1A1AA;
  --dim: #52525B;
  --control: #3F3F46;
  --track: #27272A;
  --tile: rgba(39, 39, 42, 0.5);
  --field: #141414;
  --field-line: #262626;
  --accent: #FF5656;
  --accent-hover: #FF6B6B;
  --accent-soft: rgba(255, 86, 86, 0.14);
  --grad-a: #EC4899;
  --grad-b: #F97316;
  --ok: #4ADE80;
  --weekend: rgba(255, 255, 255, 0.028);
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.mono { font-family: var(--font-mono); }

.brand {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: 1px;
}
.boot { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- buttons & fields ---------- */
.btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.06); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 600; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ghost { border-color: transparent; color: var(--muted); height: 36px; padding: 0 12px; }
.btn-ghost:hover { color: var(--fg); }
.btn-ghost[aria-pressed="true"] { color: var(--fg); border-color: var(--line); }
.btn-wide { width: 100%; height: 44px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: none; }

.field { display: grid; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .cell-input {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--field-line);
  background: var(--field);
  width: 100%;
  min-width: 0;
}
.field input:focus, .field select:focus, .cell-input:focus { outline: none; border-color: var(--accent); }
.pw-row { display: flex; gap: 8px; }
.pw-row input { flex: 1; }

.link-btn {
  border: 0;
  background: none;
  padding: 2px 0;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn.muted { color: var(--muted); }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(255, 86, 86, 0.45);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ---------- auth ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-block: 48px;
  padding-inline: 16px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px;
  display: grid;
  gap: 16px;
}
.auth-card h1 { margin: 0; font-size: 36px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.auth-lead { margin: 0; color: var(--muted); }
.auth-form { display: grid; gap: 16px; margin-top: 8px; }
.auth-hint { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 86, 86, 0.45);
  background: var(--accent-soft);
  font-size: 14px;
}
@media (max-width: 480px) { .auth-card { padding: 28px 24px; } }

/* ---------- topbar ---------- */
.topbar { border-bottom: 1px solid var(--divider); }
.topbar-in {
  max-width: 80rem;
  margin: 0 auto;
  padding-block: 14px;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (min-width: 768px) { .topbar-in { padding-inline: 64px; } }
.whoami { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.who-name { font-size: 14px; }

/* ---------- sections ---------- */
#timesheet-section, #admin-section {
  max-width: 80rem;
  margin: 0 auto;
  padding-block: 48px 64px;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  #timesheet-section, #admin-section { padding-block: 80px 112px; padding-inline: 64px; }
}

.sec-head { text-align: center; display: grid; gap: 16px; margin-bottom: 48px; }
.sec-head h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 768px) { .sec-head h1 { font-size: 36px; } }
@media (min-width: 1024px) { .sec-head h1 { font-size: 48px; } }

/* ---------- calculator block ---------- */
.calc {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 1024px) { .calc { grid-template-columns: 1fr 1fr; } }

.calc-form { background: var(--panel); padding: 32px; min-width: 0; }
@media (min-width: 1024px) { .calc-form { padding: 48px; } }

.f-sec { padding-block: 32px; }
.f-sec.first { padding-top: 0; }
.f-sec.last { padding-bottom: 0; }
.f-sec:not(.first) { border-top: 1px solid var(--divider); }
.f-sec h3, .h3-row { margin: 0 0 20px; font-size: 18px; font-weight: 500; line-height: 1.35; }
.h3-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.h3-row h3 { margin: 0; }
.acc { color: var(--accent); }

.opts { display: grid; gap: 14px; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 24px; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt .lbl { min-width: 0; }
.opt .price {
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.radio {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--control);
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease;
}
.radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.opt input:checked + .radio { border-color: var(--accent); }
.opt input:checked + .radio::after { transform: scale(1); }

.check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--control);
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.15s ease; }
.opt input:checked + .check { background: var(--accent); border-color: var(--accent); }
.opt input:checked + .check svg { opacity: 1; }
.opt input:focus-visible + .radio, .opt input:focus-visible + .check { outline: 2px solid var(--accent); outline-offset: 3px; }
.opt:hover .radio, .opt:hover .check { border-color: var(--muted); }
.opt input:checked + .radio, .opt:hover input:checked + .radio, .opt:hover input:checked + .check { border-color: var(--accent); }

.month-nav { display: inline-flex; align-items: center; gap: 6px; }
.month-nav .m-name { min-width: 9.5em; text-align: center; color: var(--accent); font-weight: 500; }
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn svg { width: 16px; height: 16px; }

.slider {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0 var(--p), var(--track) var(--p) 100%);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  transition: transform 0.15s ease;
}
.slider:active::-webkit-slider-thumb { transform: scale(1.1); }
.slider::-moz-range-track { height: 8px; border-radius: 999px; background: var(--track); }
.slider::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
.slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- totals column ---------- */
.calc-result {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 32px;
}
@media (min-width: 1024px) {
  .calc-result { padding: 48px; border-radius: 0 16px 16px 0; }
  .calc.tall .calc-result { min-height: 717.98px; }
}
.res-head h3 { margin: 0 0 10px; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.res-head p { margin: 0; color: var(--muted); max-width: 60ch; }
.rates {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.rates:empty { display: none; }
.rates b { color: var(--fg); font-weight: 500; }

.cards { display: grid; gap: 16px; }
.card { border-radius: 16px; padding: 24px; display: grid; gap: 12px; background: var(--tile); }
.card .c-title { margin: 0; font-size: 16px; font-weight: 500; }
.card .c-big {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.card .c-sub { margin: 0; font-size: 14px; color: var(--muted); }
.card.hero { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); color: #FFFFFF; }
.card.hero .c-big { font-size: 48px; }
.card.hero .c-sub { color: rgba(255, 255, 255, 0.9); }
.card.hero .c-split { margin: 0; font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 480px) {
  .card .c-big { font-size: 30px; }
  .card.hero .c-big { font-size: 38px; }
}

/* ---------- timesheet & panels ---------- */
.sheet, .panel {
  margin-top: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.panel:first-of-type { margin-top: 0; }
.sheet-head, .panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--divider);
}
.sheet-head h2, .panel-head h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.sheet-head .sub, .panel-head .sub {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-note { margin: 0; padding: 16px 32px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--muted); }
.head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.status[data-s="saved"]::before { background: var(--ok); }
.status[data-s="saving"]::before, .status[data-s="error"]::before { background: var(--accent); }

.inline-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--divider);
  background: rgba(255, 255, 255, 0.015);
}
.form-title { margin: 0; font-weight: 500; grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.role-hint { margin: 0; font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
@media (min-width: 900px) {
  .emp-form { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; }
  .user-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .user-form .form-actions { grid-column: 1 / -1; }
}

.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
table.ts, table.list {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
}
.ts th, .ts td, .list th, .list td {
  padding: 0;
  border-bottom: 1px solid var(--divider);
  text-align: center;
  white-space: nowrap;
}
.ts thead th, .list thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding-block: 10px;
}
.ts .c-name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  text-align: left;
  padding: 10px 16px 10px 32px;
  min-width: 230px;
  max-width: 260px;
  border-right: 1px solid var(--divider);
}
.ts thead .c-name { letter-spacing: 0.08em; text-transform: uppercase; }
.ts tbody th.c-name { font-weight: 400; }
.emp { display: flex; align-items: center; gap: 8px; }
.emp-text { min-width: 0; }
.emp-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.emp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}
.row-acts { margin-left: auto; display: flex; gap: 2px; flex: none; }
.rm {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.rm svg { width: 14px; height: 14px; }
.ts tbody tr:hover .rm, .rm:focus-visible { opacity: 1; }
.rm:hover { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
.rm:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .rm { opacity: 0.7; } }
.confirm { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }

.ts .c-day { width: 44px; min-width: 44px; }
.ts thead .c-day .dn { display: block; font-size: 13px; color: var(--fg); }
.ts thead .c-day .wd { display: block; font-size: 10px; color: var(--muted); }
.ts .wkend { background: var(--weekend); }
.ts thead .c-day.wkend .dn { color: var(--muted); }
.ts thead .c-day.today { box-shadow: inset 0 2px 0 var(--accent); }
.ts thead .c-day.today .dn { color: var(--accent); font-weight: 600; }

.cell input {
  display: block;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  border-radius: 0;
}
.cell input::placeholder { color: var(--control); }
.cell input:hover { background: rgba(255, 255, 255, 0.05); }
.cell input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(255, 86, 86, 0.08); }
.cell input[readonly] { cursor: default; }
.cell input[readonly]:hover { background: transparent; }
.cell.long input { color: var(--accent); background: var(--accent-soft); }

.ts .c-num { padding: 0 16px; text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.ts thead .c-num { text-transform: uppercase; letter-spacing: 0.04em; }
.ts .c-num.first { border-left: 1px solid var(--divider); }
.ts tbody .c-num.strong { color: var(--fg); font-weight: 600; }
.ts tbody .c-num.acc { color: var(--accent); }

.ts tr.grp .c-name {
  padding-top: 18px;
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ts tr.grp .c-name b { color: var(--fg); font-weight: 600; }

.ts tfoot td { border-bottom: 0; font-family: var(--font-mono); font-size: 13px; color: var(--fg); font-weight: 600; padding-block: 12px; }
.ts tfoot .c-name { font-family: var(--font-sans); font-size: 14px; }
.ts tfoot .c-day { font-weight: 500; color: var(--muted); }
.ts tfoot .c-day.has { color: var(--fg); }
.ts tfoot td.c-num { color: var(--fg); }

/* admin lists */
.list th, .list td { text-align: left; padding: 12px 16px; vertical-align: middle; }
.list th:first-child, .list td:first-child { padding-left: 32px; }
.list th:last-child, .list td:last-child { padding-right: 32px; }
.list thead th { text-transform: uppercase; letter-spacing: 0.06em; }
.list td.muted { color: var(--muted); }
.list .acts { display: flex; gap: 14px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.list .num { text-align: right; font-family: var(--font-mono); }
.list .cell-input { height: 36px; }
.list select.cell-input { padding-right: 28px; }
.list input.cell-input.rate { width: 110px; text-align: right; font-family: var(--font-mono); }
.list tbody tr:last-child td { border-bottom: 0; }
.days-list td.when { white-space: nowrap; }
.days-list td.note { color: var(--muted); font-size: 13px; white-space: normal; }
.days-list tr.long td.hrs { color: var(--accent); }
.days-list tfoot td { font-weight: 600; border-bottom: 0; }
.pw-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pw-inline input { width: 190px; }

.empty { padding: 56px 32px; text-align: center; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.empty strong { color: var(--fg); font-weight: 500; font-size: 16px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 18px 32px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
  color: var(--muted);
}
.legend span { display: inline-flex; align-items: flex-start; gap: 8px; }
.legend .sw { margin-top: 3px; flex: none; }
#legend-keys { flex-wrap: wrap; align-items: center; }
.sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.sw.long { background: var(--accent-soft); border-color: rgba(255, 86, 86, 0.4); }
.sw.wk { background: rgba(255, 255, 255, 0.07); }
kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--fg); }

@media (max-width: 640px) {
  .calc-form, .calc-result { padding: 24px; }
  .sheet-head, .panel-head, .inline-form, .legend, .panel-note { padding-inline: 20px; }
  .ts .c-name { padding-left: 16px; min-width: 176px; max-width: 190px; }
  .list th:first-child, .list td:first-child { padding-left: 20px; }
  .list th:last-child, .list td:last-child { padding-right: 20px; }
  .month-nav .m-name { min-width: 8.5em; }
}

/* ---------- toast ---------- */
.toasts {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 8px;
  z-index: 20;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  background: #18181B;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.2s ease-out;
}
.toast.error { border-color: rgba(255, 86, 86, 0.5); }
.toast .t-title { font-weight: 600; }
.toast .t-desc { color: var(--muted); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- v2: проекты, ставки, налоги, карточка сотрудника ---------- */
.ts .card-btn {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ts .card-btn:hover .emp-name { color: var(--accent); }
.ts .card-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ts tr.selected .c-name { box-shadow: inset 3px 0 0 var(--accent); }

.seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.seg button {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.seg button[aria-selected="true"] { background: var(--accent); color: #FFFFFF; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rates-grid { display: grid; grid-template-columns: 1fr; }
.rates-grid > div { min-width: 0; }
.rates-grid > div + div { border-top: 1px solid var(--divider); }
@media (min-width: 1100px) {
  .rates-grid { grid-template-columns: 1fr 1fr; }
  .rates-grid > div + div { border-top: 0; border-left: 1px solid var(--divider); }
}
.sub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 32px 8px;
}
.sub-head h3 { margin: 0; font-size: 16px; font-weight: 500; }

.fin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  padding: 24px 32px;
}
.fin-grid .field input { font-family: var(--font-mono); }
.fin-grid .hint { margin: 0; font-size: 12px; color: var(--muted); }

.cadj-form { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .cadj-form { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr) 140px; align-items: end; }
  .cadj-form .field.wide { grid-column: 1 / 4; }
}

.list input.cell-input.num-in { width: 100px; text-align: right; font-family: var(--font-mono); }
.list input.cell-input.date-in { width: 150px; font-family: var(--font-mono); }
.list input.cell-input.sm { width: 80px; text-align: right; font-family: var(--font-mono); }
.list .chk { width: 18px; height: 18px; accent-color: var(--accent); }
.list td.plus { color: var(--ok); }
.list td.minus { color: var(--accent); }

/* карточка сотрудника */
#emp-card .panel-head { align-items: flex-start; }
.card-sec { border-top: 1px solid var(--divider); }
.card-sec:first-of-type { border-top: 0; }
.card-sec .sub-head { padding-top: 20px; }
.balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--divider);
  border-block: 1px solid var(--divider);
}
.balance > div { background: var(--panel); padding: 16px 20px; display: grid; gap: 4px; }
.balance .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.balance .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.balance .v.neg { color: var(--accent); }
.balance .total { background: linear-gradient(90deg, rgba(236, 72, 153, 0.18), rgba(249, 115, 22, 0.18)); }
.pending { margin: 0; padding: 12px 32px 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); list-style: none; }
.pending li::before { content: "◷ "; color: var(--accent); }
.st {
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.st-open { color: var(--ok); border-color: rgba(74, 222, 128, 0.4); }
.st-full { color: var(--fg); }
.st-early_valid { color: var(--muted); }
.st-early_invalid { color: var(--accent); border-color: rgba(255, 86, 86, 0.45); }
.op-form { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .op-form { grid-template-columns: 150px 160px minmax(0, 1.4fr) 120px minmax(0, 1fr); align-items: end; }
  .op-form .field.wide { grid-column: 1 / 4; }
}
.op-form .ticket-only { display: contents; }
.check-field { display: flex; align-items: center; gap: 10px; height: 40px; font-size: 14px; }
.check-field input { width: 18px; height: 18px; accent-color: var(--accent); }
.card-actions { display: flex; gap: 8px; align-items: center; }
.small-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 12px 32px 20px; }
.small-form .field { min-width: 140px; }
@media (max-width: 640px) {
  .sub-head, .fin-grid, .small-form, .pending { padding-inline: 20px; }
}
.ts tbody .c-num.neg, .ts tfoot .c-num.neg { color: var(--accent); }
.muted { color: var(--muted); }
.boot-fail { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 440px; padding-inline: 16px; color: var(--fg); }
.boot-fail p { margin: 0; }
.boot-detail { font-family: var(--font-mono); font-size: 12px; color: var(--dim); }

/* ---------- v3: дашборд (владелец) ---------- */
:root {
  /* палитра графиков: проверена на фоне #0D0D0D (скрипт validate_palette, тёмный режим) */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --v-labor: #9a9aa3;   /* сотрудникам */
  --v-taxes: #62626c;   /* налоги */
  --v-up: #3987e5;      /* к выплате */
  --v-grid: #1e1e1e;
  --v-axis: #383835;
  --v-ink: #898781;
}
.topnav { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; }
.topnav button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
}
.topnav button:hover { color: var(--fg); }
.topnav button[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: var(--fg); }
.topnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#dash-section { max-width: 80rem; margin: 0 auto; padding-block: 48px 64px; padding-inline: 16px; }
@media (min-width: 768px) { #dash-section { padding-block: 80px 112px; padding-inline: 64px; } }
.dash-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
.dash-filters .month-nav { margin-left: auto; }
@media (max-width: 640px) { .dash-filters .month-nav { margin-left: 0; } }

.kpis { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
  border-radius: 16px;
  padding: 20px;
  background: var(--tile);
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}
.kpi .k-label { margin: 0; font-size: 14px; color: var(--muted); }
.kpi .k-value { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .k-delta { margin: 0; font-size: 13px; color: var(--muted); }
.kpi .k-delta.good b { color: var(--ok); font-weight: 600; }
.kpi .k-delta.bad b { color: var(--accent); font-weight: 600; }
.kpi .k-delta b { color: var(--fg); font-weight: 600; }
.kpi svg { width: 100%; height: 34px; display: block; margin-top: 6px; }
.kpi.hero { grid-column: span 2; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); color: #FFFFFF; }
.kpi.hero .k-label, .kpi.hero .k-delta { color: rgba(255, 255, 255, 0.9); }
.kpi.hero .k-value { font-size: 48px; font-weight: 700; }
.kpi.hero .k-delta.good b, .kpi.hero .k-delta.bad b, .kpi.hero .k-delta b { color: #FFFFFF; }
@media (max-width: 559px) { .kpi.hero { grid-column: span 1; } .kpi.hero .k-value { font-size: 38px; } }

.dash-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 1100px) { .dash-grid { grid-template-columns: 1fr 1fr; } .dash-grid .wide { grid-column: span 2; } }
.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; min-width: 0; display: grid; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 4px; }
.chart-head h2 { margin: 0; font-size: 17px; font-weight: 500; }
.chart-head .sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.chart-head .link-btn { white-space: nowrap; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 24px 0; font-size: 13px; color: var(--muted); }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.legend-row i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-row i.line { height: 2px; width: 14px; border-radius: 2px; }
.chart-body { padding: 8px 12px 16px; min-width: 0; }
.chart-body svg { display: block; width: 100%; overflow: visible; }
.chart-body svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--v-ink); }
.chart-body svg text.focus { fill: var(--fg); font-weight: 600; }
.chart-body svg text.end { font-family: var(--font-sans); font-size: 12px; fill: var(--fg); font-weight: 600; }
.chart-body .hit { fill: transparent; cursor: pointer; }
.chart-body .hit:focus { outline: none; }
.chart-body .hit:focus-visible, .chart-body .hit.on { fill: rgba(255, 255, 255, 0.05); }
.chart-body .focus-band { fill: rgba(255, 86, 86, 0.07); }
.chart-body .table-wrap { margin: 4px 12px; }
.chart-empty { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px; }
.dash-grid + .panel, #dash-proj-table + .panel { margin-top: 16px; }
#dash-proj-table { margin-top: 16px; }
.list td.num, .list th.num { font-variant-numeric: tabular-nums; }
.list .delta-good { color: var(--ok); }
.list .delta-bad { color: var(--accent); }
.list tfoot td { font-weight: 600; border-bottom: 0; }

.viz-tip {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  min-width: 170px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #18181B;
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.viz-tip .t-head { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.viz-tip .t-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 8px; }
.viz-tip .t-row i { width: 12px; height: 2px; border-radius: 2px; }
.viz-tip .t-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-tip .t-row span { color: var(--muted); }

/* ---------- v4: траты, подбор ---------- */
.exp-form { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .exp-form { grid-template-columns: 150px 150px minmax(0, 1.2fr) 130px 150px; align-items: end; }
  .exp-form .field.wide { grid-column: 1 / 5; }
}
.list tr.auto td { color: var(--muted); }
.list .tag-shared { margin-left: 6px; }

/* ---------- отозванный доступ ---------- */
tr.revoked td { color: var(--muted); }
.tag-off { color: var(--accent); border-color: rgba(255, 86, 86, 0.45); }