* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1f2328; background: #f6f8fa; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: #fff; padding: 32px 28px; border-radius: 12px; width: 320px; box-shadow: 0 8px 32px rgba(15,20,30,.08); }
.login-card h1 { margin: 0 0 20px; font-size: 18px; }
.login-card label { display: block; font-size: 12px; color: #6a737d; margin: 12px 0 4px; }
.login-card input { width: 100%; padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 6px; }
.login-card input:focus { outline: 2px solid #0969da; outline-offset: -1px; border-color: transparent; }
.login-card button { width: 100%; margin-top: 18px; padding: 9px 12px; background: #1f883d; color: #fff; border: none; border-radius: 6px; font-weight: 600; }
.login-card button:hover { background: #1a7f37; }
.login-card .err { color: #cf222e; margin-top: 12px; font-size: 13px; min-height: 18px; }

/* ---- shell ---- */
.app { display: grid; grid-template-columns: 1fr 460px; grid-template-rows: 48px 1fr; height: 100vh; transition: grid-template-columns .15s; }
.app.no-selection { grid-template-columns: 1fr 0; }
.app.no-selection .detail-pane { display: none; }
.topbar { grid-column: 1 / -1; background: #24292f; color: #fff; display: flex; align-items: center; padding: 0 16px; gap: 10px; }
.topbar h1 { font-size: 14px; margin: 0; font-weight: 600; }
.topnav { display: flex; gap: 2px; margin-left: 8px; }
.nav-link { padding: 6px 12px; border-radius: 6px; font-size: 13px; opacity: .65; }
.nav-link:hover { opacity: 1; background: #2d333b; }
.nav-link.active { opacity: 1; background: #2d333b; font-weight: 500; }
.topbar .spacer { flex: 1; }

.metrics-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #2d333b; color: #adbac7; border-radius: 6px; font-size: 12px; cursor: pointer; user-select: none; margin-left: 8px; }
.metrics-toggle:hover { background: #444c56; color: #fff; }
.metrics-toggle input { margin: 0; cursor: pointer; }
.metrics-toggle input:checked + span { color: #fff; font-weight: 500; }

.topbar .period { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.topbar .period select { background: #2d333b; color: #fff; border: 1px solid #444c56; border-radius: 4px; padding: 3px 6px; }
.topbar .who { font-size: 12px; opacity: .8; }
.btn-topbar { background: #1f883d; color: #fff; border: none; padding: 5px 12px; border-radius: 6px; font-weight: 500; font-size: 13px; }
.btn-topbar:hover { background: #1a7f37; }
.btn-topbar.ghost { background: transparent; border: 1px solid #444c56; }
.btn-topbar.ghost:hover { background: #2d333b; }

/* ---- canvas (org chart) ---- */
.canvas-pane { position: relative; background:
    linear-gradient(#eef1f4 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, #eef1f4 1px, transparent 1px) 0 0/24px 24px,
    #fafbfc;
  overflow: hidden; border-right: 1px solid #d0d7de; }
.org-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.org-svg:active { cursor: grabbing; }
.canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1f2328; font-size: 16px; pointer-events: none; }
.hint { position: absolute; left: 12px; bottom: 8px; font-size: 11px; color: #6a737d; pointer-events: none; max-width: 60%; }

/* ---- node card (SVG) ---- */
.node-card { cursor: pointer; }
/* .card-bg: stroke и fill задаются inline-атрибутами (светофор + пользовательский цвет) */
.node-card.selected .card-bg { stroke: #0969da !important; stroke-width: 2.5 !important; filter: drop-shadow(0 4px 12px rgba(9,105,218,.25)); }
.node-card.dragging .card-bg { opacity: .4; }
.node-card.drop-target .card-bg { stroke: #1f883d !important; stroke-width: 3 !important; fill: #d2f5dd !important; }
/* .accent теперь раскрашивается inline-атрибутом fill (светофор по среднему %) */
.node-card .num { font: 700 11px -apple-system, sans-serif; fill: #57606a; pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.node-card .pos-name { font: 600 13px -apple-system, sans-serif; fill: #1f2328; pointer-events: none; }
.node-card .holder-name { font: 12px -apple-system, sans-serif; fill: #57606a; pointer-events: none; }
.node-card .result-text { font: italic 11px -apple-system, sans-serif; fill: #6a737d; pointer-events: none; }
.node-card .fn-text { font: 10px -apple-system, sans-serif; fill: #57606a; pointer-events: none; }
.node-card .metric-line { font: 11px -apple-system, sans-serif; pointer-events: none; }
.node-card .metric-line.main { font-weight: 600; }
.node-card .metric-name { fill: #1f2328; }
.node-card .metric-val { fill: #1f2328; font-variant-numeric: tabular-nums; }
.node-card .metric-pct.good { fill: #1a7f37; }
.node-card .metric-pct.warn { fill: #9a6700; }
.node-card .metric-pct.bad  { fill: #cf222e; }
.node-card .add-btn { fill: #1f883d; cursor: pointer; }
.node-card .add-btn:hover { fill: #1a7f37; }
.node-card .add-btn-text { fill: #fff; font: 700 16px -apple-system, sans-serif; pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.node-card .badge-bg { fill: #d2f5dd; }
.node-card .badge-text { fill: #1a7f37; font: 700 10px -apple-system, sans-serif; text-anchor: middle; dominant-baseline: central; }

.org-link { fill: none; stroke: #afb8c1; stroke-width: 1.5; }

/* ---- detail pane ---- */
.detail-pane { overflow: auto; padding: 20px; background: #fff; }
.detail-pane .empty { color: #6a737d; padding: 80px 16px; text-align: center; line-height: 1.6; }
.detail-pane .crumb { color: #6a737d; font-size: 12px; margin-bottom: 16px; word-wrap: break-word; }
.detail-pane .position-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.detail-pane .position-form label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6a737d; }
.detail-pane .position-form input, .detail-pane .position-form textarea { padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 6px; font-family: inherit; }
.detail-pane .position-form input:focus, .detail-pane .position-form textarea:focus { outline: none; border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,.2); }
.detail-pane .position-form textarea { resize: vertical; min-height: 60px; }
.detail-pane .position-form .row-cols { display: flex; gap: 8px; }
.detail-pane .position-form .row-cols > * { flex: 1; }
.detail-pane .position-form .row-cols input.num { max-width: 90px; flex: 0 0 90px; }
.detail-pane .position-form .row-actions { display: flex; gap: 8px; margin-top: 4px; }

.color-palette-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; flex-wrap: wrap; }
.color-picker { width: 32px; height: 30px; padding: 0; border: 1px solid #d0d7de; border-radius: 4px; background: #fff; cursor: pointer; }
.color-clear { padding: 4px 8px; font-size: 12px; line-height: 1; }
.color-presets { display: flex; gap: 4px; align-items: center; }
.preset-btn { width: 20px; height: 20px; padding: 0; border: 1px solid #d0d7de; border-radius: 50%; cursor: pointer; }
.preset-btn:hover { transform: scale(1.15); }
.preset-btn.on { border: 2px solid #1f2328; }

.btn-danger { background: transparent; color: #cf222e; border: 1px solid #cf222e; padding: 6px 12px; border-radius: 6px; font-weight: 500; }
.btn-danger:hover { background: #cf222e; color: #fff; }
.btn-secondary { background: #fff; color: #24292f; border: 1px solid #d0d7de; padding: 6px 12px; border-radius: 6px; }
.btn-secondary:hover { background: #f3f4f6; }
.btn-primary { background: #1f883d; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 500; }
.btn-primary:hover { background: #1a7f37; }

.metrics-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #d0d7de; border-radius: 8px; overflow: hidden; margin-top: 8px; font-size: 13px; table-layout: fixed; }
.metrics-table th, .metrics-table td { padding: 4px 6px; border-bottom: 1px solid #eaeef2; text-align: left; vertical-align: middle; }
.metrics-table th { background: #f6f8fa; font-size: 11px; color: #6a737d; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.metrics-table tr:last-child td { border-bottom: none; }
.metrics-table input[type="text"], .metrics-table input[type="number"], .metrics-table select { width: 100%; padding: 3px 4px; border: 1px solid transparent; background: transparent; border-radius: 4px; font-size: 12px; min-width: 0; }
.metrics-table input[type="number"] { font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.metrics-table input[type="number"]::-webkit-inner-spin-button,
.metrics-table input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.metrics-table input[type="text"]:hover, .metrics-table input[type="number"]:hover, .metrics-table select:hover { border-color: #d0d7de; background: #fff; }
.metrics-table input[type="text"]:focus, .metrics-table input[type="number"]:focus, .metrics-table select:focus { border-color: #0969da; background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(9,105,218,.2); }
.metrics-table .num { text-align: right; width: 88px; }
.metrics-table .num input { text-align: right; }
.metrics-table .pct { text-align: right; font-variant-numeric: tabular-nums; width: 50px; font-weight: 600; }
.metrics-table .pct.good { color: #1a7f37; font-weight: 600; }
.metrics-table .pct.warn { color: #9a6700; }
.metrics-table .pct.bad { color: #cf222e; font-weight: 600; }
.metrics-table .actions-col { width: 78px; white-space: nowrap; text-align: right; padding-right: 4px !important; }
.metrics-table .actions-col button { background: transparent; border: 1px solid transparent; color: #6a737d; padding: 2px 5px; font-size: 14px; cursor: pointer; line-height: 1; border-radius: 3px; }
.metrics-table .actions-col button:hover { background: #f3f4f6; border-color: #d0d7de; color: #1f883d; }
.metrics-table .actions-col button:hover { color: #cf222e; }
.metrics-table .name-cell { display: flex; align-items: center; gap: 4px; }
.metrics-table .tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; vertical-align: middle; }
.metrics-table .tag.main { background: #d2f5dd; color: #1a7f37; }
.metrics-table .tag.inv  { background: #fff1c4; color: #9a6700; }
.metrics-table .tag.fmla { background: #e7e1ff; color: #6639ba; }
.metrics-table .tag.prem { background: #dcfce7; color: #166534; }
.metrics-table .err-row td { background: #ffebe9; color: #cf222e; font-size: 11px; padding: 4px 10px; }

.metric-history { background: #fafbfc; border-top: 1px solid #d0d7de; }
.metric-history > td { padding: 8px 12px; }
.hist-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; font-size: 12px; color: #57606a; }
.hist-add label { font-size: 11px; color: #6a737d; text-transform: uppercase; letter-spacing: .04em; }
.hist-add input { padding: 4px 6px; border: 1px solid #d0d7de; border-radius: 4px; font-size: 12px; }
.hist-empty { color: #6a737d; font-size: 12px; padding: 6px 0; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hist-table th { background: #f6f8fa; font-size: 10px; color: #6a737d; font-weight: 600; text-transform: uppercase; padding: 4px 6px; text-align: left; border-bottom: 1px solid #eaeef2; }
.hist-table td { padding: 4px 6px; border-bottom: 1px solid #eaeef2; }
.hist-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hist-table .actions-col button { background: transparent; border: none; color: #6a737d; padding: 2px 6px; font-size: 14px; cursor: pointer; }
.hist-table .actions-col button:hover { color: #cf222e; }

.metric-edit { background: #f6f8fa; border-top: 1px solid #d0d7de; }
.metric-edit td { padding: 8px 12px; }
.metric-edit .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric-edit label { font-size: 11px; color: #6a737d; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 2px; }
.metric-edit input, .metric-edit select, .metric-edit textarea { width: 100%; padding: 5px 7px; border: 1px solid #d0d7de; border-radius: 4px; font-size: 12px; font-family: inherit; }
.metric-edit textarea { min-height: 50px; resize: vertical; }
.metric-edit .check-row { display: flex; gap: 16px; align-items: center; }
.metric-edit .check-row label { display: flex; align-items: center; gap: 4px; font-size: 12px; text-transform: none; letter-spacing: 0; color: #1f2328; cursor: pointer; margin: 0; }

.section-head { margin-top: 24px; display: flex; align-items: center; gap: 8px; }
.section-head h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6a737d; flex: 1; font-weight: 600; }

.chart-wrap { background: #fff; border: 1px solid #d0d7de; border-radius: 8px; padding: 12px; margin-top: 8px; height: 240px; position: relative; }
.chart-wrap canvas { max-height: 210px; }
.chart-empty { color: #6a737d; text-align: center; padding-top: 80px; }
.metric-select { padding: 5px 8px; border: 1px solid #d0d7de; border-radius: 6px; font-size: 13px; background: #fff; }

.modal-overlay { position: fixed; inset: 0; background: rgba(15,20,30,.55); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-card { background: #fff; border-radius: 12px; width: 560px; max-width: 96vw; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-head { display: flex; align-items: center; padding: 16px 22px; border-bottom: 1px solid #eaeef2; }
.modal-head h2 { margin: 0; font-size: 18px; flex: 1; }
.modal-close { background: transparent; border: none; font-size: 24px; cursor: pointer; color: #6a737d; padding: 0 4px; }
.modal-close:hover { color: #1f2328; }
.modal-body { padding: 18px 22px; }
.modal-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6a737d; margin: 0 0 10px; font-weight: 600; }
.team-row, .invite-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #eaeef2; gap: 10px; font-size: 14px; }
.team-row:last-child, .invite-row:last-child { border-bottom: none; }
.team-name { flex: 1; }
.team-name b { display: block; }
.team-name span { color: #6a737d; font-size: 12px; }
.role-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.role-badge.owner { background: #d2f5dd; color: #1a7f37; }
.role-badge.admin { background: #ddf4ff; color: #0969da; }
.role-badge.member { background: #f6f8fa; color: #57606a; }
.role-badge.viewer { background: #fff8c5; color: #9a6700; }
.invite-form { display: flex; gap: 8px; margin-bottom: 10px; }
.invite-form input { flex: 1; padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 6px; }
.invite-form select { padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; }
.invite-row .url-box { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 11px; background: #f6f8fa; padding: 4px 8px; border-radius: 4px; border: 1px solid #d0d7de; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; user-select: all; }
.btn-mini { background: transparent; border: 1px solid #d0d7de; padding: 4px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.btn-mini:hover { background: #f3f4f6; }
.btn-mini.danger { color: #cf222e; border-color: #cf222e; }
.btn-mini.danger:hover { background: #cf222e; color: #fff; }

.toast { position: fixed; right: 16px; bottom: 16px; background: #24292f; color: #fff; padding: 10px 14px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 360px; z-index: 1000; }

/* ====== KPI page ====== */
.kpi-shell { padding: 20px 24px; max-width: 1400px; margin: 0 auto; }
.kpi-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-sum-card { background: #fff; border: 1px solid #d0d7de; border-radius: 10px; padding: 14px 18px; }
.kpi-sum-card .k { font-size: 11px; color: #6a737d; text-transform: uppercase; letter-spacing: .04em; }
.kpi-sum-card .v { font-size: 24px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi-sum-card.good .v { color: #1a7f37; }
.kpi-sum-card.warn .v { color: #9a6700; }
.kpi-sum-card.bad  .v { color: #cf222e; }

.kpi-table { width: 100%; background: #fff; border: 1px solid #d0d7de; border-radius: 10px; overflow: hidden; border-collapse: collapse; }
.kpi-table th { background: #f6f8fa; padding: 10px 12px; font-size: 11px; font-weight: 600; color: #6a737d; text-transform: uppercase; letter-spacing: .04em; text-align: left; border-bottom: 1px solid #d0d7de; }
.kpi-table td { padding: 10px 12px; border-bottom: 1px solid #eaeef2; font-size: 14px; vertical-align: middle; }
.kpi-table tr:last-child td { border-bottom: none; }
.kpi-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.kpi-table .num.good { color: #1a7f37; font-weight: 600; }
.kpi-table .num.warn { color: #9a6700; font-weight: 600; }
.kpi-table .num.bad  { color: #cf222e; font-weight: 600; }
.kpi-table .num-col { font-weight: 700; color: #57606a; width: 40px; text-align: center; }
.kpi-table .holder-col { font-weight: 500; min-width: 160px; }
.kpi-table .holder-col b { display: block; }
.kpi-table .pos-col { color: #57606a; min-width: 180px; }
.kpi-table .bar-col { width: 200px; }
.kpi-table .metrics-cell { min-width: 240px; }
.kpi-mini-metric { display: flex; gap: 8px; font-size: 12px; padding: 2px 0; }
.kpi-mini-metric .mm-name { color: #57606a; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-mini-metric .mm-val { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.kpi-mini-metric .mm-val.good { color: #1a7f37; }
.kpi-mini-metric .mm-val.warn { color: #9a6700; }
.kpi-mini-metric .mm-val.bad { color: #cf222e; }

/* inline-редактирование */
.kpi-add-emp { display: flex; gap: 8px; margin-bottom: 16px; }
.kpi-add-emp input { flex: 1; padding: 8px 12px; border: 1px solid #d0d7de; border-radius: 6px; font-size: 14px; }
.inline-input { padding: 4px 6px; border: 1px solid transparent; background: transparent; border-radius: 4px; font-size: 14px; width: 100%; font-family: inherit; }
.inline-input:hover { border-color: #d0d7de; background: #fff; }
.inline-input:focus { outline: none; border-color: #0969da; background: #fff; box-shadow: 0 0 0 2px rgba(9,105,218,.2); }
.inline-input.num-inp { text-align: right; font-variant-numeric: tabular-nums; max-width: 110px; }

.kpi-metrics-row td { padding: 0 !important; background: #fafbfc; }
.kpi-metrics-wrap { padding: 10px 16px 14px 60px; }
.kpi-metrics-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #d0d7de; border-radius: 8px; overflow: hidden; }
.kpi-metrics-table th { background: #f6f8fa; padding: 6px 10px; font-size: 11px; color: #6a737d; font-weight: 600; text-transform: uppercase; text-align: left; }
.kpi-metrics-table td { padding: 6px 10px; border-top: 1px solid #eaeef2; font-size: 13px; vertical-align: middle; }
.kpi-metrics-table tr:first-child td { border-top: none; }
.kpi-metrics-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.weight-warn { background: #fff8c5; color: #9a6700; padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; font-size: 13px; }

.kpi-bar { background: #eaeef2; border-radius: 4px; height: 10px; overflow: hidden; position: relative; }
.kpi-bar-fill { height: 100%; transition: width .3s; }
.kpi-bar-fill.good { background: #1f883d; }
.kpi-bar-fill.warn { background: #bf8700; }
.kpi-bar-fill.bad  { background: #cf222e; }

/* ====== mobile (≤768px) ====== */
@media (max-width: 768px) {
  /* шапка: меньше отступов, мелкий текст, переносы */
  .topbar { padding: 0 8px; gap: 6px; flex-wrap: wrap; height: auto; min-height: 48px; padding: 6px 8px; }
  .topbar h1 { font-size: 13px; }
  .topnav { gap: 0; margin-left: 0; }
  .nav-link { padding: 4px 8px; font-size: 12px; }
  .btn-topbar { padding: 4px 8px; font-size: 12px; }
  .topbar .who { display: none; }
  .topbar .period { font-size: 11px; gap: 3px; }
  .topbar .period select { padding: 2px 4px; font-size: 11px; }
  .metrics-toggle { font-size: 11px; padding: 3px 6px; }
  /* кнопка "Команда" / "Вписать" — иконки без текста */
  #team-btn, #fit-btn { font-size: 0; }
  #team-btn::before { content: '👥'; font-size: 14px; }
  #fit-btn::before { content: '⤢'; font-size: 14px; }

  /* приложение: одна колонка + правая панель в виде слайдера снизу */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .canvas-pane { border-right: none; border-bottom: 1px solid #d0d7de; height: 60vh; }
  .detail-pane { padding: 12px; max-height: 40vh; overflow-y: auto; border-top: 1px solid #d0d7de; }
  .hint { font-size: 10px; max-width: 90%; }

  /* модал — на мобильном на весь экран */
  .modal-card { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }

  /* таблица метрик: уменьшить колонки */
  .metrics-table { font-size: 12px; }
  .metrics-table th, .metrics-table td { padding: 3px 4px; }
  .metrics-table .num { width: 60px; }
  .metrics-table .actions-col { width: 60px; }

  /* dashboard: одна колонка */
  .dash-shell { padding: 10px; }
  .dash-controls { gap: 6px; font-size: 12px; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .kpi { padding: 10px; }
  .kpi .v { font-size: 22px; }
  .dash-grid { grid-template-columns: 1fr; gap: 8px; }

  /* лендинг */
  .hdr-wrap { padding: 10px 14px; gap: 10px; }
  .logo { font-size: 16px; }
  .hdr-nav { display: none; }
  .hero { padding: 40px 14px 30px; }
  .hero h1 { font-size: 26px; }
  .hero .lead { font-size: 14px; }
  .hero-bullets { font-size: 12px; gap: 12px; }
  section { padding: 30px 14px; }
  section h2 { font-size: 22px; }
  .features .grid, .types-grid { grid-template-columns: 1fr; gap: 10px; }
  .features article { padding: 14px; }
  .cta-block { padding: 30px 14px; margin: 30px 8px; }
  .ftr-wrap { flex-direction: column; align-items: flex-start; }

  /* регистрация/логин/приглашение */
  .login-card { width: 92vw !important; padding: 22px 18px; }
  .login-card h1 { font-size: 16px; }
}

/* супер-узкие (≤420px) */
@media (max-width: 420px) {
  .topnav { width: 100%; justify-content: center; order: 99; }
  .topbar > .spacer { display: none; }
}
.toast.show { opacity: 1; }
.toast.err { background: #cf222e; }

details.help { margin-top: 12px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #57606a; }
details.help summary { cursor: pointer; color: #0969da; font-weight: 500; }
details.help code { background: #fff; padding: 1px 4px; border-radius: 3px; font-family: ui-monospace, monospace; }
details.help ul { margin: 8px 0 0 16px; padding: 0; }

/* ---- dashboard ---- */
.dash-shell { padding: 20px 24px; max-width: 1600px; margin: 0 auto; }
.dash-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.dash-controls select, .dash-controls label { font-size: 13px; }
.dash-controls .ctrl { display: flex; align-items: center; gap: 6px; }
.dash-controls .ctrl input[type="checkbox"] { margin-right: 4px; }

.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { background: #fff; border: 1px solid #d0d7de; border-radius: 10px; padding: 16px 18px; }
.kpi .v { font-size: 28px; font-weight: 700; line-height: 1.1; }
.kpi .l { font-size: 12px; color: #6a737d; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.kpi.green .v { color: #1a7f37; }
.kpi.red   .v { color: #cf222e; }
.kpi.amber .v { color: #9a6700; }

.dash-pending { background: #fff8c5; border: 1px solid #fbbf24; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.dash-pending .pending-empty { color: #1a7f37; font-size: 14px; font-weight: 500; }
.pending-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pending-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: #9a6700; flex: 1; }
.pending-date { font-size: 12px; color: #6a737d; }
.pending-list { display: flex; flex-direction: column; gap: 6px; }
.pending-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #fff; border-radius: 6px; border: 1px solid #fde68a; }
.pending-row .pending-name { flex: 1; min-width: 0; }
.pending-row .pending-metric { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.pending-row .pending-metric .badge { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.pending-row .pending-metric .badge.main { background: #d2f5dd; color: #1a7f37; }
.pending-row .pending-metric .badge.inv { background: #fff1c4; color: #9a6700; }
.pending-row .pending-where { font-size: 11px; color: #6a737d; margin-top: 1px; }
.pending-row .pending-inputs { display: flex; gap: 6px; align-items: center; }
.pending-row input { padding: 5px 7px; border: 1px solid #d0d7de; border-radius: 5px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.pending-save { padding: 5px 12px !important; font-size: 12px !important; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dash-card { background: #fff; border: 1px solid #d0d7de; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.dash-card .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dash-card .title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.dash-card .pct-big { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dash-card .pct-big.good { color: #1a7f37; }
.dash-card .pct-big.warn { color: #9a6700; }
.dash-card .pct-big.bad  { color: #cf222e; }
.dash-card .sub { font-size: 11px; color: #6a737d; }
.dash-card .who-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #57606a; }
.dash-card .who-line .badge { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.dash-card .who-line .badge.main { background: #d2f5dd; color: #1a7f37; }
.dash-card .who-line .badge.inv { background: #fff1c4; color: #9a6700; }
.dash-card .vals { display: flex; gap: 16px; font-size: 12px; color: #57606a; }
.dash-card .vals b { color: #1f2328; }
.dash-card .mini-chart { height: 70px; }