:root {
      --brand: #051d5e;
      --brand-2: #0a2c82;
      --brand-3: #123c9c;
      --brand-orange: #FFA412;
      --brand-orange-tint: #FFF3DF;
      --brand-orange-ink: #9a6500;
      --brand-gray: #E6E6E6;
      --bg: #f7faff;
      --panel: #ffffff;
      --ink: #1b2748;
      --muted: #5a6680;
      --line: #e6ecf6;
      --line-strong: #d9e0ed;
      --accent: #0a2c82;
      --accent2: #123c9c;
      --bad: #b42318;
      --good: #087443;
      --warn: #b86b00;
      --text: var(--ink);
      --surface: #ffffff;
      --surface-muted: #f8fbff;
      --radius: 8px;
      --shadow: 0 1px 3px rgba(5, 29, 94, .04);
      --shadow-lg: 0 6px 20px rgba(5, 29, 94, .07);
    }
    * { box-sizing: border-box; }
    body {
      margin:0;
      background: var(--bg);
      color:var(--ink);
      font:15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }
    h1, h2, h3, h4, h5, h6,
    .nav-chip,
    .stat b,
    .kpi-card__value {
      font-family: Rubik, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }
    a { color:var(--accent); text-decoration:none; font-weight:600; }
    a:hover { color:var(--brand-3); }
    .wrap { width:100%; max-width:min(1260px, calc(100vw - 32px)); margin:0 auto; padding:28px 0 56px; position:relative; min-width:0; }
    .wrap > * { min-width:0; }
    .wrap:has(.legal-tasks-page),
    .wrap:has(.legal-workspace-page),
    .wrap:has(.legal-bitrix-page),
    .wrap:has(.legal-casebook-page),
    .wrap:has(.o2-page),
    .wrap:has(.legal-document-page) {
      max-width:min(1720px, calc(100vw - 36px));
    }
    .nav {
      display:flex;
      gap:18px;
      align-items:center;
      justify-content:space-between;
      padding:14px 28px;
      background:var(--brand);
      color:var(--surface);
      border-bottom:3px solid var(--brand-orange);
    }
    .brand { display:flex; align-items:center; gap:16px; min-width:0; color:var(--surface); }
    .brand img { width:auto; max-width:42vw; height:40px; display:block; }
    .brand span { padding-left:16px; border-left:1px solid var(--line); font-weight:700; letter-spacing:.01em; white-space:nowrap; color:var(--brand); }
    .nav-right { display:flex; align-items:center; gap:16px; color:var(--surface); font-size:14px; }
    .nav a { color:var(--surface); }
    .nav-profile-link {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:34px;
      padding:7px 11px;
      border:1px solid color-mix(in srgb, var(--surface) 32%, transparent);
      border-radius:8px;
      color:var(--surface);
      font-weight:700;
      white-space:nowrap;
    }
    .nav-profile-link:hover {
      background:color-mix(in srgb, var(--surface) 12%, transparent);
      color:var(--surface);
    }
    .nav-exit { border:1px solid color-mix(in srgb, var(--surface) 32%, transparent); border-radius:8px; padding:7px 12px; color:var(--surface); }
    .nav-exit:hover { background:color-mix(in srgb, var(--surface) 12%, transparent); color:var(--surface); }
    .nav .muted { color:color-mix(in srgb, var(--surface) 74%, transparent); }
    .nav .nav-user b { color:var(--surface); }
    .curator-nav {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 28px;
      background:#ffffff;
      border-bottom:1px solid var(--line);
      position:sticky;
      top:0;
      z-index:10;
    }
    .desktop-nav-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      width:100%;
      min-width:0;
    }
    .mobile-nav-menu { display:none; }
    .curator-links, .history-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .nav-chip {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:32px;
      border:1px solid #c8d3e5;
      border-radius:8px;
      padding:6px 10px;
      background:#f8fbff;
      color:var(--brand);
      font-weight:700;
      font-size:14px;
      box-shadow:none;
    }
    .nav-group {
      position:relative;
      display:inline-flex;
      min-width:0;
    }
    .nav-group summary {
      list-style:none;
      cursor:pointer;
      gap:8px;
      user-select:none;
    }
    .nav-group summary::-webkit-details-marker {
      display:none;
    }
    .nav-group-summary::after {
      content:"";
      width:7px;
      height:7px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:rotate(45deg) translateY(-1px);
      flex:0 0 auto;
    }
    .nav-group[open] .nav-group-summary {
      background:var(--brand-orange);
      border-color:var(--brand-orange);
      color:var(--brand);
    }
    .nav-group[open] .nav-group-summary::after {
      transform:rotate(225deg) translateY(-1px);
    }
    .nav-group-menu {
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      z-index:40;
      display:grid;
      gap:6px;
      min-width:210px;
      max-width:min(300px, calc(100vw - 32px));
      overflow:auto;
      padding:8px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#ffffff;
      box-shadow:0 18px 40px rgba(5,29,94,.14);
    }
    .nav-group-menu .nav-chip {
      width:100%;
      justify-content:flex-start;
      text-align:left;
      white-space:normal;
    }
    .nav-button { cursor:pointer; font:inherit; }
    h1 { margin:0 0 14px; font-size:28px; line-height:1.15; color:var(--brand); font-weight:700; letter-spacing:0; }
    h2 { margin:24px 0 10px; font-size:19px; color:var(--brand); font-weight:600; }
    .panel {
      background:#ffffff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:22px 24px;
      margin:14px 0;
      box-shadow:var(--shadow);
      min-width:0;
    }
    .panel h2:first-child { margin-top:0; }
    .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
    .stats-grid { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
    .stat {
      background:#fff;
      border:1px solid var(--line);
      border-left:3px solid var(--brand-3);
      border-radius:var(--radius);
      padding:14px 16px;
      box-shadow:var(--shadow);
    }
    .stat b { display:block; font-size:24px; color:var(--brand); line-height:1.1; margin-bottom:4px; font-weight:700; }
    a.stat { color:var(--ink); }
    .stat-link { display:block; transition:transform .12s, border-color .12s, box-shadow .12s; }
    .stat-link:hover { transform:translateY(-1px); border-color:var(--brand-3); box-shadow:var(--shadow-lg); }
    .month-close-panel {
      border-left:5px solid var(--brand-3);
      background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    }
    .month-close-panel h2 {
      margin:4px 0 6px;
    }
    .month-close-panel.is-ready,
    .month-close-panel.is-closed {
      border-left-color:var(--good);
    }
    .month-close-panel.is-blocked {
      border-left-color:var(--warn);
    }
    .month-close-route-notice {
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin:0 0 12px;
      border:1px solid var(--line);
      border-left:5px solid var(--brand-3);
      border-radius:var(--radius);
      background:#fff;
      padding:10px 12px;
      box-shadow:var(--shadow);
    }
    .month-close-route-notice b {
      color:var(--ink);
      white-space:nowrap;
    }
    .month-close-route-notice span {
      color:var(--muted);
    }
    .month-close-route-notice.good {
      border-left-color:var(--good);
      background:#f2fbf5;
    }
    .month-close-route-notice.warn {
      border-left-color:var(--warn);
      background:#fff8eb;
    }
    .month-close-main {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
    }
    .month-close-kicker {
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .month-close-status {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .month-close-badge {
      display:inline-flex;
      align-items:center;
      min-height:28px;
      border-radius:999px;
      padding:5px 10px;
      font-size:13px;
      font-weight:800;
      background:#eef4ff;
      color:var(--brand);
    }
    .month-close-badge.good {
      background:#e9f8ef;
      color:var(--good);
    }
    .month-close-badge.warn {
      background:var(--brand-orange-tint);
      color:var(--brand-orange-ink);
    }
    .month-close-action {
      display:flex;
      justify-content:flex-end;
      min-width:190px;
    }
    .month-close-action form {
      margin:0;
    }
    .month-close-action button[disabled] {
      cursor:not-allowed;
      opacity:.68;
      background:#eef2f7;
      color:#657189;
    }
    .month-close-disabled-help {
      margin-top:16px;
      border:1px solid #f1d49b;
      border-radius:var(--radius);
      background:#fff8eb;
      color:#664100;
      padding:12px 14px;
    }
    .month-close-disabled-help b {
      display:block;
      margin-bottom:6px;
      color:#583900;
    }
    .month-close-disabled-help ul {
      margin:0;
      padding-left:18px;
    }
    .month-close-disabled-help li + li {
      margin-top:4px;
    }
    .month-close-approvals .legal-task-table td,
    .month-close-recent-approvals .legal-task-table td,
    .month-close-overview-page .legal-task-table td {
      vertical-align:top;
    }
    .month-close-recent-approvals {
      margin-top:14px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      padding:12px;
    }
    .month-close-history-head {
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
      margin-bottom:8px;
    }
    .month-close-history-head h3 { margin:0; font-size:16px; }
    .month-close-history-table { min-width:680px; }
    .month-close-history-compact-date { display:none; }
    .month-close-history-controls {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      align-items:end;
      margin:8px 0;
    }
    .month-close-history-controls label { display:grid; gap:3px; min-width:0; }
    .month-close-history-controls label span { color:var(--muted); font-size:11px; }
    .month-close-history-controls input,
    .month-close-history-controls select { width:100%; min-width:0; margin:0; min-height:36px; padding:6px 8px; }
    .month-close-history-controls button,
    .month-close-history-pagination button {
      min-height:36px;
      padding:6px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
      color:var(--ink);
      white-space:nowrap;
      cursor:pointer;
    }
    .month-close-history-pagination {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-top:8px;
    }
    .month-close-history-pagination > div { display:flex; align-items:center; gap:6px; }
    .month-close-history-pagination button { min-height:32px; padding:4px 8px; }
    .month-close-history-pagination button:disabled { opacity:.5; cursor:not-allowed; }
    .month-close-overview-page .legal-task-table-wrap {
      overflow-x:auto;
    }
    .month-close-filter-form {
      display:grid;
      grid-template-columns:minmax(110px, 140px) minmax(220px, 1fr) minmax(130px, 150px) minmax(130px, 150px) auto;
      gap:8px;
      align-items:end;
      min-width:min(100%, 840px);
    }
    .month-close-filter-form input,
    .month-close-filter-form select {
      margin:0;
    }
    .month-close-filter-form button {
      min-height:40px;
      white-space:nowrap;
    }
    .month-close-table {
      min-width:1280px;
      table-layout:auto;
      font-size:13px;
    }
    .month-close-table th,
    .month-close-table td {
      overflow-wrap:anywhere;
      vertical-align:top;
    }
    .month-close-table th {
      white-space:nowrap;
    }
    .month-close-compact-page {
      gap:12px;
    }
    .month-close-compact-page .panel {
      margin:0;
      padding:16px;
    }
    .month-close-compact-hero {
      display:grid;
      gap:12px;
      border-left:5px solid var(--brand-3);
      background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    }
    .month-close-compact-head {
      display:grid;
      grid-template-columns:minmax(0, 1fr);
      gap:14px;
      align-items:start;
    }
    .month-close-compact-title h1,
    .payments-compact-head h1 {
      margin:2px 0 6px;
    }
    .month-close-compact-title p,
    .payments-compact-head p {
      margin:0;
      max-width:620px;
    }
    .month-close-compact-page .month-close-filter-form {
      display:flex;
      flex-wrap:wrap;
      align-items:end;
      gap:8px;
      width:100%;
      min-width:0;
    }
    .month-close-compact-page .month-close-filter-form > * {
      min-width:0;
      flex:1 1 180px;
      max-width:260px;
    }
    .month-close-compact-page .month-close-filter-form > .month-close-paid-date-filter-group {
      flex:2 1 360px;
      max-width:520px;
    }
    .month-close-compact-page .month-close-filter-form > button {
      flex:0 1 140px;
      min-width:0;
    }
    .month-close-compact-page .month-close-paid-date-filter-group { min-width:0; }
    .month-close-compact-page .month-close-paid-date-filter { min-width:0; }
    .month-close-compact-page .month-close-paid-date-filter input { box-sizing:border-box; }
    .month-close-compact-page .month-close-filter-form input,
    .month-close-compact-page .month-close-filter-form select {
      min-height:36px;
      padding:8px 10px;
      font-size:13px;
    }
    .month-close-compact-page .month-close-filter-form button {
      min-height:36px;
      padding:8px 13px;
    }
    .month-close-summary-grid {
      gap:8px;
    }
    .month-close-summary-grid .home-summary-card {
      padding:10px 12px;
      box-shadow:none;
      background:#ffffff;
    }
    .month-close-summary-grid .home-summary-card b {
      font-size:22px;
      margin-top:2px;
    }
    .month-close-sales-office-summary {
      display:grid;
      gap:8px;
      margin:0;
    }
    .month-close-office-summary-head h2 {
      margin:0 0 3px;
      font-size:18px;
    }
    .month-close-office-summary-head p {
      margin:0;
      font-size:13px;
    }
    .month-close-office-summary-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
      gap:8px;
    }
    .month-close-office-summary-card {
      display:grid;
      gap:4px;
      padding:12px 14px;
      box-shadow:none;
    }
    .month-close-office-summary-card h3 {
      margin:0;
      color:var(--brand-1);
      font-size:15px;
    }
    .month-close-office-summary-card h3 a,
    .month-close-office-stat-link {
      color:inherit;
      text-decoration:none;
    }
    .month-close-office-summary-card h3 a:hover,
    .month-close-office-summary-card h3 a:focus-visible,
    .month-close-office-stat-link:hover,
    .month-close-office-stat-link:focus-visible {
      color:var(--brand-1);
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .month-close-office-stat-link:focus-visible,
    .month-close-office-summary-card h3 a:focus-visible {
      outline:2px solid var(--brand-1);
      outline-offset:2px;
      border-radius:3px;
    }
    .month-close-office-summary-card b {
      font-size:16px;
    }
    .month-close-office-summary-card p {
      margin:0;
      color:var(--muted);
      font-size:12px;
    }
    .month-close-kvit-office-view .month-close-office-group-row th {
      padding:9px 12px;
      color:var(--brand-1);
      background:#edf3fc;
      font-size:13px;
      text-align:left;
    }
    .month-close-two-period-panel {
      margin:0;
      padding:0;
      overflow:hidden;
    }
    .month-close-two-period-toggle {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      min-height:58px;
      padding:12px 16px;
      cursor:pointer;
      list-style:none;
    }
    .month-close-two-period-toggle::-webkit-details-marker { display:none; }
    .month-close-two-period-toggle::after {
      content:'⌄';
      flex:0 0 auto;
      color:var(--brand-3);
      font-size:20px;
      font-weight:800;
      line-height:1;
      transform:rotate(-90deg);
      transition:transform .15s ease;
    }
    .month-close-two-period-panel[open] .month-close-two-period-toggle::after {
      transform:rotate(0);
    }
    .month-close-two-period-toggle:focus-visible {
      outline:3px solid #8fb5ff;
      outline-offset:-3px;
    }
    .month-close-two-period-toggle > span:first-child {
      display:grid;
      gap:3px;
    }
    .month-close-two-period-toggle strong { font-size:17px; }
    .month-close-two-period-toggle small { color:var(--muted); }
    .month-close-two-period-count {
      flex:0 0 auto;
      padding:5px 10px;
      border-radius:999px;
      color:#102c68;
      background:#edf3ff;
      font-size:13px;
      font-weight:700;
    }
    .month-close-two-period-content {
      padding:0 16px 14px;
    }
    .month-close-two-period-content > .muted {
      margin:0 0 8px;
    }
    .month-close-action-queues {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      padding:12px;
      border-left:5px solid var(--brand-3);
      background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    }
    .month-close-action-queue {
      min-width:0;
      padding:12px 14px;
      border:1px solid #dce5f1;
      border-radius:12px;
      background:#fff;
    }
    .month-close-action-queue-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:8px;
    }
    .month-close-action-queue-head h2 { margin:0; font-size:17px; }
    .month-close-action-queue-head > span {
      display:inline-flex;
      min-width:28px;
      min-height:28px;
      align-items:center;
      justify-content:center;
      padding:2px 8px;
      border-radius:999px;
      color:#102c68;
      background:#edf3ff;
      font-weight:800;
    }
    .month-close-action-queue ul {
      display:grid;
      gap:5px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .month-close-action-queue-item {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-width:0;
      padding:8px 0;
      border-top:1px solid #edf0f5;
    }
    .month-close-action-queue-item > span {
      display:grid;
      min-width:0;
      gap:2px;
    }
    .month-close-action-queue-item b,
    .month-close-action-queue-item a { overflow-wrap:anywhere; }
    .month-close-action-queue-item small { color:var(--muted); }
    .month-close-action-queue-item a {
      flex:0 0 auto;
      font-size:13px;
      font-weight:700;
    }
    .month-close-action-queue > .muted { margin:0; }
    .month-close-action-queues-empty {
      padding:8px 12px;
      gap:8px;
    }
    .month-close-action-queues-empty .month-close-action-queue {
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:4px 12px;
      padding:4px 8px;
      border:0;
      background:transparent;
    }
    .month-close-action-queues-empty .month-close-action-queue-head {
      margin:0;
    }
    .month-close-action-queues-empty .month-close-action-queue > .muted {
      font-size:13px;
    }
    .month-close-two-period-table {
      min-width:760px;
      table-layout:fixed;
    }
    .month-close-two-period-table th:first-child,
    .month-close-two-period-table td:first-child {
      width:22%;
      min-width:190px;
    }
    .month-close-two-period-table th:not(:first-child),
    .month-close-two-period-table td:not(:first-child) {
      width:39%;
    }
    .month-close-compare-cell {
      display:flex;
      flex-wrap:wrap;
      gap:5px 12px;
      align-items:center;
      line-height:1.45;
    }
    .month-close-compare-clicked,
    .month-close-compare-muted,
    .month-close-compare-open {
      display:inline-flex;
      align-items:center;
      width:max-content;
      padding:3px 8px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      white-space:normal;
    }
    .month-close-compare-clicked { color:#17633b; background:#e8f7ef; }
    .month-close-compare-muted { color:#67748a; background:#f0f3f8; }
    .month-close-compare-open { color:#75520a; background:#fff4d6; }
    .month-close-compare-cell > span:not(:first-child) { font-size:13px; }
    .month-close-table-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .month-close-table-head h2 {
      margin:0 0 3px;
      font-size:18px;
    }
    .month-close-table-head p {
      margin:0;
      font-size:13px;
    }
    .month-close-compact-page .month-close-table th,
    .month-close-compact-page .month-close-table td {
      padding:8px 10px;
      font-size:12.5px;
    }
    .month-close-compact-page .month-close-table th.mc-col-name,
    .month-close-compact-page .month-close-table td.mc-col-name { min-width:200px; max-width:250px; }
    .month-close-compact-page .month-close-table th.mc-col-supervisor,
    .month-close-compact-page .month-close-table td.mc-col-supervisor { min-width:150px; max-width:210px; }
    .month-close-compact-page .month-close-table th.mc-col-formula,
    .month-close-compact-page .month-close-table td.mc-col-formula { min-width:190px; max-width:320px; }
    .month-close-compact-page .month-close-final-salary-form {
      min-width:160px;
      max-width:220px;
      gap:6px;
    }
    .month-close-role-director .month-close-table,
    .month-close-role-banking .month-close-table {
      width:max-content;
      min-width:100%;
      table-layout:auto;
    }
    .month-close-role-director .month-close-table th,
    .month-close-role-banking .month-close-table th {
      white-space:nowrap;
    }
    .month-close-role-director .month-close-table td,
    .month-close-role-banking .month-close-table td {
      overflow-wrap:normal;
    }
    .month-close-role-director .month-close-table .mc-col-name,
    .month-close-role-director .month-close-table td.mc-col-name,
    .month-close-role-banking .month-close-table .mc-col-name,
    .month-close-role-banking .month-close-table td.mc-col-name {
      min-width:240px;
      max-width:300px;
    }
    .month-close-role-director .month-close-table .mc-col-amount,
    .month-close-role-banking .month-close-table .mc-col-amount { min-width:180px; }
    .month-close-role-director .month-close-table .month-close-payment-cell,
    .month-close-role-banking .month-close-table .month-close-payment-cell {
      min-width:280px;
      max-width:360px;
      white-space:normal;
    }
    .month-close-role-director .month-close-table .mc-col-status,
    .month-close-role-banking .month-close-table .mc-col-status {
      min-width:160px;
      white-space:nowrap;
    }
    .month-close-role-director .month-close-table .mc-col-supervisor,
    .month-close-role-banking .month-close-table .mc-col-supervisor {
      min-width:190px;
      max-width:250px;
    }
    .month-close-role-director .month-close-table .mc-col-action,
    .month-close-role-banking .month-close-table .mc-col-action {
      min-width:150px;
      white-space:nowrap;
    }
    .month-close-role-director .month-close-table .month-close-danger-action,
    .month-close-role-banking .month-close-table .month-close-danger-action {
      min-width:140px;
      white-space:nowrap;
    }
    .month-close-role-director .month-close-table .mc-col-action button,
    .month-close-role-banking .month-close-table .mc-col-action button,
    .month-close-role-director .month-close-table .month-close-danger-action button,
    .month-close-role-banking .month-close-table .month-close-danger-action button,
    .month-close-role-director .month-close-table .month-close-danger-action summary,
    .month-close-role-banking .month-close-table .month-close-danger-action summary {
      white-space:nowrap;
    }
    .month-close-role-banking .month-close-table .mc-col-card {
      width:132px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:12px;
    }
    .month-close-final-salary-editor {
      display:grid;
      gap:6px;
      min-width:0;
    }
    .month-close-final-salary-current .month-close-calc-summary {
      min-width:0;
      max-width:100%;
    }
    .month-close-final-salary-details {
      min-width:0;
      max-width:260px;
    }
    .month-close-final-salary-details summary {
      cursor:pointer;
      color:var(--brand);
      font-size:12px;
      font-weight:800;
    }
    .month-close-final-salary-details .month-close-final-salary-form {
      min-width:0;
      max-width:260px;
      margin-top:8px;
    }
    .month-close-final-salary-proposal {
      display:grid;
      gap:4px;
      margin-top:8px;
      color:var(--muted);
      font-size:12px;
    }
    .month-close-final-salary-proposal .month-close-calc-summary {
      min-width:0;
      max-width:100%;
    }
    .month-close-compact-page .month-close-pagination {
      margin-top:10px;
    }
    .month-close-table th.mc-col-name,
    .month-close-table td.mc-col-name { min-width:220px; max-width:280px; }
    .month-close-table th.mc-col-position,
    .month-close-table td.mc-col-position { min-width:150px; max-width:210px; }
    .month-close-table th.mc-col-supervisor,
    .month-close-table td.mc-col-supervisor { min-width:170px; max-width:230px; }
    .month-close-table th.mc-col-status,
    .month-close-table td.mc-col-status { min-width:130px; white-space:nowrap; }
    .month-close-table th.mc-col-note,
    .month-close-table td.mc-col-note { min-width:150px; max-width:220px; }
    .month-close-table th.mc-col-date,
    .month-close-table td.mc-col-date { min-width:128px; white-space:nowrap; }
    .month-close-table th.mc-col-approver,
    .month-close-table td.mc-col-approver { min-width:170px; max-width:230px; }
    .month-close-table th.mc-col-card,
    .month-close-table td.mc-col-card { min-width:170px; white-space:nowrap; }
    .month-close-table th.mc-col-calc-type,
    .month-close-table td.mc-col-calc-type { min-width:96px; white-space:nowrap; }
    .month-close-table th.mc-col-formula,
    .month-close-table td.mc-col-formula { min-width:220px; max-width:360px; }
    .month-close-table th.mc-col-amount,
    .month-close-table td.mc-col-amount { min-width:150px; white-space:nowrap; }
    .month-close-table th.mc-col-payment,
    .month-close-table td.month-close-payment-cell { min-width:250px; max-width:310px; white-space:normal; }
    .month-close-table th.mc-col-gd-note,
    .month-close-table td.mc-col-gd-note { min-width:260px; max-width:340px; }
    .month-close-table th[class^="mc-col-"],
    .month-close-table td[class^="mc-col-"],
    .month-close-table td.month-close-payment-cell {
      width:auto;
    }
    .month-close-summary-link {
      color:inherit;
      text-decoration:none;
    }
    .month-close-summary-link:hover {
      border-color:var(--accent);
      box-shadow:0 10px 24px rgba(37,99,235,.12);
    }
    .month-close-pagination {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-top:14px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:13px;
    }
    .month-close-pagination nav {
      display:flex;
      gap:6px;
      align-items:center;
      flex-wrap:wrap;
    }
    .month-close-pagination a,
    .month-close-pagination .is-active {
      min-width:32px;
      min-height:32px;
      padding:7px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      text-align:center;
      text-decoration:none;
      color:var(--text);
      background:#fff;
    }
    .month-close-pagination .is-active {
      border-color:var(--accent);
      background:rgba(37,99,235,.08);
      font-weight:700;
    }
    .month-close-pagination-note {
      margin:12px 0 0;
    }
    .month-close-muted-cell {
      color:var(--muted);
      text-align:center;
    }
    .month-close-calc-form,
    .month-close-final-salary-form,
    .month-close-note-form {
      display:grid;
      gap:8px;
      min-width:240px;
      max-width:360px;
    }
    .month-close-approve-form {
      display:grid;
      gap:10px;
      min-width:min(100%, 280px);
      max-width:420px;
    }
    .month-close-approval-table th,
    .month-close-approval-table td {
      vertical-align:top;
    }
    .month-close-approvals .legal-task-table-wrap {
      overflow-x:visible;
      border:0;
      background:transparent;
    }
    .month-close-approvals .legal-task-table {
      width:100%;
      min-width:0;
    }
    .month-close-approvals {
      container-type:inline-size;
    }
    .month-close-approvals-head {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:10px 16px;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .month-close-approvals-head h3 {
      margin:0;
    }
    .month-close-approval-search {
      display:grid;
      gap:3px;
      width:min(100%, 250px);
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }
    .month-close-approval-search input {
      min-height:34px;
      padding:7px 10px;
      font-size:13px;
    }
    .month-close-approval-search-form {
      display:flex;
      align-items:center;
      gap:6px;
    }
    .month-close-approval-search-form input { flex:1; min-width:0; }
    .month-close-approval-search-form button { min-height:34px; padding:6px 10px; white-space:nowrap; }
    .month-close-approval-search-empty {
      margin:10px 0 0;
    }
    .month-close-approval-person {
      width:30%;
      min-width:220px;
      color:var(--ink);
    }
    .month-close-approval-person-name {
      display:block;
      font-weight:800;
      line-height:1.3;
    }
    .month-close-org-marker {
      display:inline-grid;
      place-items:center;
      width:18px;
      height:18px;
      margin-left:6px;
      border-radius:999px;
      background:#0f766e;
      color:#fff;
      font-size:11px;
      font-weight:900;
      line-height:1;
      vertical-align:1px;
    }
    .month-close-entity-marker {
      display:inline-block;
      max-width:180px;
      margin-left:6px;
      padding:2px 7px;
      border:1px solid #b8d8d2;
      border-radius:999px;
      background:#eff8f5;
      color:#17675e;
      font-size:10px;
      font-weight:800;
      line-height:1.2;
      vertical-align:1px;
    }
    .month-close-approval-person-meta,
    .month-close-employee-context {
      display:grid;
      gap:2px;
      margin-top:5px;
      color:var(--muted);
      font-size:12px;
      font-weight:600;
      line-height:1.35;
    }
    .month-close-approval-person-meta span,
    .month-close-employee-context span {
      overflow-wrap:anywhere;
    }
    .month-close-approved-amount {
      margin:6px 0 0;
      color:var(--ink, #18243a);
      font-size:13px;
    }
    .month-close-approval-card {
      white-space:nowrap;
    }
    .month-close-approval-card {
      width:1%;
      min-width:132px;
      max-width:160px;
      overflow:hidden;
      text-overflow:ellipsis;
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:12px;
      letter-spacing:.01em;
    }
    .month-close-approval-action {
      min-width:0;
      width:auto;
    }
    .month-close-approval-details {
      display:grid;
      gap:8px;
      min-width:0;
    }
    .month-close-approval-action-stack {
      display:grid;
      gap:8px;
      min-width:0;
    }
    .month-close-revoke-lower-approval {
      min-height:34px;
      padding:7px 10px;
      font-size:12px;
    }
    @container (min-width: 680px) {
      .month-close-approval-table {
        table-layout:fixed;
      }
      .month-close-approval-person-column { width:40%; }
      .month-close-approval-action-column { width:60%; }
      .month-close-approval-table.has-card .month-close-approval-person-column { width:30%; }
      .month-close-approval-table.has-card .month-close-approval-card-column { width:142px; }
      .month-close-approval-table.has-card .month-close-approval-action-column { width:auto; }
      .month-close-approval-person {
        width:auto;
        min-width:0;
      }
      .month-close-approval-action .month-close-approve-form {
        max-width:none;
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:end;
      }
      .month-close-approval-action .month-close-approve-form-calculation {
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:end;
      }
      .month-close-approval-action .month-close-approve-form-calculation .month-close-calc-form {
        max-width:none;
        min-width:0;
      }
      .month-close-approval-action .month-close-approve-form-calculation .month-close-decision-card {
        grid-template-columns:minmax(250px, .9fr) minmax(280px, 1.1fr);
        align-items:end;
      }
      .month-close-approval-action .month-close-approve-form-calculation .month-close-mini-label,
      .month-close-approval-action .month-close-approve-form-calculation .month-close-decision-card > p {
        grid-column:1 / -1;
      }
      .month-close-approval-action .month-close-approve-form-calculation .month-close-calc-fields {
        grid-column:1;
      }
      .month-close-approval-action .month-close-approve-form-calculation .month-close-formula-label {
        grid-column:2;
      }
      .month-close-approval-action-stack > .month-close-revoke-form {
        justify-self:start;
      }
    }
    .month-close-termination-context {
      display:grid;
      gap:3px;
      margin:0;
      color:var(--text);
      font-size:13px;
      line-height:1.35;
    }
    .month-close-termination-context span {
      display:block;
    }
    .month-close-calc-form textarea,
    .month-close-final-salary-form textarea,
    .month-close-note-form textarea {
      min-height:64px;
      resize:vertical;
    }
    .month-close-calc-form p,
    .month-close-note-form p {
      margin:0;
    }
    .month-close-proposed-before-final {
      display:grid;
      gap:6px;
      padding:10px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#f8fafc;
    }
    .month-close-proposal-card {
      border-color:#bfdbfe;
      border-left:4px solid var(--brand-3);
      background:linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    }
    .month-close-decision-card {
      display:grid;
      gap:8px;
      padding:10px;
      border:1px solid #bbf7d0;
      border-left:4px solid var(--good);
      border-radius:8px;
      background:linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    }
    .month-close-mini-label {
      display:inline-flex;
      width:max-content;
      max-width:100%;
      align-items:center;
      gap:6px;
      padding:3px 8px;
      border-radius:999px;
      background:#e0f2fe;
      color:#075985;
      font-size:11px;
      font-weight:900;
      letter-spacing:.02em;
      text-transform:uppercase;
    }
    .month-close-decision-card .month-close-mini-label {
      background:#dcfce7;
      color:#166534;
    }
    .month-close-proposal-card small {
      color:var(--muted);
      line-height:1.35;
    }
    .month-close-calc-fields {
      display:grid;
      grid-template-columns:minmax(110px, .8fr) minmax(120px, 1fr);
      gap:8px;
      align-items:end;
    }
    .month-close-calc-fields label,
    .month-close-formula-label {
      display:grid;
      gap:4px;
      margin:0;
      color:var(--muted);
      font-size:12px;
      font-weight:800;
    }
    .month-close-calc-fields input,
    .month-close-calc-fields select,
    .month-close-formula-label textarea {
      margin:0;
      width:100%;
    }
    .month-close-approve-button {
      justify-self:start;
      min-height:38px;
      padding:9px 16px;
      background:linear-gradient(135deg, var(--brand) 0%, #0f766e 100%);
      box-shadow:0 8px 18px rgba(15, 118, 110, .18);
    }
    .month-close-approval-table .month-close-approve-button {
      border-radius:8px;
    }
    .month-close-note-form button {
      justify-self:start;
    }
    .month-close-final-salary-form {
      min-width:180px;
      max-width:260px;
    }
    .month-close-final-salary-form input,
    .month-close-final-salary-form select,
    .month-close-final-salary-form textarea {
      padding:7px 9px;
      font-size:12px;
    }
    .month-close-final-salary-form textarea {
      min-height:52px;
    }
    .month-close-final-salary-form button {
      min-height:30px;
      padding:6px 10px;
      justify-self:start;
    }
    .month-close-payment-cell p {
      margin:4px 0 6px;
    }
    .month-close-payment-context {
      display:grid;
      gap:2px;
      line-height:1.3;
    }
    .month-close-payment-form {
      margin:8px 0 0;
    }
    .month-close-payment-proof-details {
      max-width:420px;
      border:1px solid var(--line, #dbe3f0);
      border-radius:14px;
      padding:8px 10px;
      color:var(--ink);
    }
    .month-close-payment-proof-details summary { cursor:pointer; font-weight:700; }
    .month-close-payment-proof-details[open] { padding:12px; }
    .month-close-payment-proof-details label { display:grid; gap:7px; margin:14px 0; }
    .month-close-payment-proof-details input[type=file] { max-width:100%; }
    .month-close-payment-proof-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
    .month-close-paid-date-filter { display:grid; gap:4px; min-width:120px; }
    .month-close-paid-date-filter input { min-width:0; }
    .month-close-paid-date-filter-group {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:6px;
      min-width:210px;
    }
    .month-close-paid-date-filter { font-size:11px; }
    .month-close-paid-date-filter input { width:100%; font-size:12px; padding:7px 6px; }
    .month-close-payment-form button {
      padding:6px 10px;
      min-height:32px;
    }
    .month-close-calc-summary {
      display:grid;
      gap:6px;
      min-width:160px;
      max-width:340px;
    }
    .month-close-calc-summary b {
      font-size:16px;
      color:var(--ink);
    }
    .month-close-cm-source {
      display:grid;
      gap:8px;
      margin:0 0 10px;
      padding:9px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#f8fafc;
      min-width:280px;
      max-width:560px;
    }
    .month-close-cm-source summary {
      cursor:pointer;
      color:var(--ink);
    }
    .month-close-cm-source p { margin:0; }
    .month-close-cm-source-warning {
      padding:8px 10px;
      border:1px solid #f1d49b;
      border-left:4px solid var(--warn);
      border-radius:7px;
      background:#fff8eb;
      color:#664100;
      font-size:12px;
      line-height:1.4;
    }
    .month-close-cm-inputs-form { display:grid; gap:8px; }
    .month-close-cm-input-grid {
      display:grid;
      grid-template-columns:repeat(3, minmax(112px, 1fr));
      gap:7px;
    }
    .month-close-cm-input-grid label {
      display:grid;
      gap:3px;
      margin:0;
      color:var(--muted);
      font-size:11px;
      font-weight:800;
    }
    .month-close-cm-input-grid input { margin:0; width:100%; padding:6px 8px; }
    .month-close-cm-inputs-form button { justify-self:start; min-height:34px; padding:7px 10px; }
    .month-close-formula {
      color:var(--muted);
      font-size:13px;
      line-height:1.35;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
    }
    .payments-page {
      display:grid;
      gap:12px;
    }
    .payments-page .panel {
      margin:0;
      padding:16px;
    }
    .payments-compact-hero {
      display:grid;
      gap:12px;
      border-left:5px solid var(--brand-3);
      background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    }
    .payments-compact-head {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .payments-page .payment-section-tabs {
      justify-content:flex-end;
      margin:0;
    }
    .payments-page .stats-grid {
      grid-template-columns:repeat(5, minmax(0, 1fr));
      gap:8px;
    }
    .payments-page .stat {
      min-height:66px;
      padding:10px 12px;
      box-shadow:none;
      background:#ffffff;
    }
    .payments-page .stat b {
      font-size:20px;
      margin-bottom:2px;
    }
    .payments-controls-grid {
      display:grid;
      grid-template-columns:minmax(220px, .7fr) minmax(420px, 1.3fr);
      gap:12px;
      align-items:start;
    }
    .payments-controls-grid:empty {
      display:none;
    }
    .payments-controls-grid .payment-imports-panel:only-child {
      grid-column:1 / -1;
    }
    .payments-page .payment-upload-form,
    .payments-page .payment-report-filters,
    .payments-page .payment-periods {
      min-width:0;
    }
    .payments-page .payment-upload-form h2,
    .payments-page .payment-report-filters h2,
    .payments-page .payment-periods h2,
    .payments-page .payment-report-table h2 {
      margin:0 0 6px;
      font-size:18px;
    }
    .payments-page .payment-upload-form label,
    .payments-page .payment-report-filters label {
      margin:8px 0 4px;
      font-size:13px;
    }
    .payment-upload-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
      gap:8px;
      align-items:end;
    }
    .payments-page .payment-upload-grid input,
    .payments-page .payment-upload-grid select,
    .payments-page input[type="file"] {
      min-height:36px;
      padding:8px 10px;
      font-size:13px;
    }
    .payments-page .payment-final-check {
      min-height:36px;
      margin:8px 0 0;
    }
    .payments-page .toolbar {
      margin-top:10px;
    }
    .payments-page .toolbar button,
    .payments-page .toolbar .button {
      min-height:36px;
      padding:8px 13px;
    }
    .payments-page .payment-periods .curator-links {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      max-height:126px;
      overflow:auto;
    }
    .payment-imports-panel {
      padding:14px;
    }
    .payment-panel-head {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .payment-panel-head h2 {
      margin:0 0 3px;
    }
    .payment-panel-head p {
      margin:0;
      font-size:13px;
    }
    .payment-import-list {
      display:grid;
      gap:6px;
      max-height:238px;
      overflow:auto;
      padding-right:4px;
    }
    .payment-import-row {
      display:flex;
      align-items:stretch;
      gap:6px;
      min-width:0;
    }
    .payment-import-row > .payment-import-item {
      flex:1;
      min-width:0;
    }
    .payment-import-action {
      display:flex;
      align-items:center;
      margin:0;
    }
    .payment-import-action button {
      white-space:nowrap;
      min-height:38px;
      padding:7px 9px;
    }
    .payment-import-item {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-height:46px;
      padding:8px 10px;
      border:1px solid #dbe6f4;
      border-radius:8px;
      background:#f9fbff;
      color:#13264b;
      text-decoration:none;
    }
    .payment-import-item:hover {
      border-color:#9eb8df;
      background:#f4f8ff;
    }
    .payment-import-item.active {
      border-color:#1d6fdc;
      background:#eef6ff;
      box-shadow:inset 3px 0 0 #1d6fdc;
    }
    .payment-import-item span:first-child {
      display:grid;
      gap:2px;
      min-width:0;
    }
    .payment-import-item b,
    .payment-import-item small {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .payment-import-item small {
      color:#64748b;
      font-size:12px;
      font-weight:600;
    }
    .payments-page .payment-periods .nav-chip,
    .payments-page .payment-section-tabs .nav-chip {
      min-height:34px;
      padding:7px 10px;
      font-size:13px;
    }
    .payments-page .payment-report-table .cabinet-zone-head {
      align-items:center;
      margin-bottom:8px;
    }
    .payments-page .payment-report-table .cabinet-zone-head h2 {
      margin:0 0 3px;
    }
    .payments-page .payment-report-table .cabinet-zone-head p {
      margin:0;
      font-size:13px;
    }
    .payments-page .payments-table {
      font-size:13px;
    }
    .payments-page .payments-table th,
    .payments-page .payments-table td {
      padding:8px 10px;
    }
    .payment-employment-dot {
      display:inline-block;
      width:10px;
      height:10px;
      border-radius:50%;
      vertical-align:middle;
      background:#94a3b8;
      box-shadow:0 0 0 3px rgba(148, 163, 184, .16);
    }
    .payment-employment-dot.is-active {
      background:#16a34a;
      box-shadow:0 0 0 3px rgba(22, 163, 74, .14);
    }
    .payment-employment-dot.is-inactive {
      background:#dc2626;
      box-shadow:0 0 0 3px rgba(220, 38, 38, .14);
    }
    .payments-page .table-sort-button {
      min-height:28px;
      padding:4px 6px;
      font-size:12px;
    }
    @media (max-width: 1380px) {
      .month-close-compact-page .month-close-filter-form button {
        width:100%;
      }
    }
    @media (max-width: 1180px) {
      .payments-controls-grid {
        grid-template-columns:1fr;
      }
      .month-close-compact-page .month-close-filter-form {
        gap:8px;
      }
      .month-close-compact-page .month-close-filter-form button {
        width:100%;
      }
      .month-close-action-queues { grid-template-columns:1fr; }
      .payments-page .stats-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 820px) {
      .month-close-compact-page .month-close-filter-form {
        display:grid;
        grid-template-columns:minmax(0, 1fr);
      }
      .month-close-compact-page .month-close-filter-form > *,
      .month-close-compact-page .month-close-filter-form > .month-close-paid-date-filter-group,
      .month-close-compact-page .month-close-filter-form > button {
        flex:none;
        width:100%;
        max-width:none;
      }
      .payments-page .stats-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .month-close-approval-table {
        font-size:14px;
      }
      .month-close-approval-table tr {
        border-left:4px solid var(--brand-3);
      }
      .month-close-approval-table td {
        grid-template-columns:minmax(92px, 28%) minmax(0, 1fr);
        gap:8px;
      }
      .month-close-approval-action {
        min-width:0;
      }
      .month-close-approve-form {
        max-width:none;
      }
      .month-close-proposed-before-final,
      .month-close-decision-card {
        padding:9px;
      }
      .month-close-cm-input-grid { grid-template-columns:repeat(2, minmax(110px, 1fr)); }
      .payments-compact-head {
        flex-direction:column;
      }
      .payments-page .payment-section-tabs {
        justify-content:flex-start;
        width:100%;
      }
      .payments-page .payment-section-tabs .nav-chip {
        flex:1 1 auto;
        justify-content:center;
      }
    }
    @media (max-width: 520px) {
      .payments-page .stats-grid {
        grid-template-columns:1fr;
      }
      .month-close-calc-fields {
        grid-template-columns:1fr;
      }
      .month-close-mini-label {
        width:100%;
        justify-content:center;
        text-align:center;
      }
    }
    label { display:block; font-weight:600; margin:12px 0 6px; color:#293557; }
    input, select, textarea {
      width:100%;
      border:1px solid var(--line-strong);
      border-radius:8px;
      padding:10px 12px;
      font:inherit;
      background:#fff;
      color:var(--ink);
      outline:none;
      transition:border-color .15s, box-shadow .15s;
    }
    input:focus, select:focus, textarea:focus { border-color:var(--brand-3); box-shadow:0 0 0 3px rgba(18,60,156,.12); }
    select.field-error, input.field-error, textarea.field-error { border-color:var(--bad); box-shadow:0 0 0 3px rgba(180,35,24,.14); background:#fff7f6; }
    textarea { min-height:132px; resize:vertical; }
    button, .button {
      display:inline-block;
      border:0;
      border-radius:8px;
      padding:10px 16px;
      background:var(--brand);
      color:#fff;
      font-weight:600;
      cursor:pointer;
      box-shadow:0 1px 2px rgba(5,29,94,.18);
      transition:background .12s, box-shadow .12s;
    }
    button:hover, .button:hover { background:var(--brand-2); box-shadow:0 2px 6px rgba(5,29,94,.20); }
    .secondary { background:#ffffff; color:var(--brand); border:1px solid var(--line-strong); box-shadow:none; }
    .secondary:hover { background:#f4f7fd; color:var(--brand-2); }
    .button.disabled,
    .button.disabled:hover {
      background:#f3f5f9;
      color:#8a95aa;
      border-color:#d8dfec;
      box-shadow:none;
      cursor:not-allowed;
    }
    .danger-lite {
      background:#fff8f6;
      color:var(--bad);
      border:1px solid #f2c8c1;
      box-shadow:none;
    }
    .danger-lite:hover {
      background:#fff0ee;
      color:var(--bad);
      box-shadow:0 2px 7px rgba(180,35,24,.10);
    }
    .danger-action-form {
      display:flex;
      justify-content:flex-end;
      margin:0;
      padding-left:12px;
    }
    .danger-action-form .danger-lite {
      min-height:34px;
      padding:7px 12px;
      border-width:1.5px;
      font-weight:700;
    }
    .employee-termination-details {
      position:relative;
      display:inline-block;
      margin:0;
    }
    .employee-termination-summary {
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:7px 12px;
      border-radius:8px;
      font-weight:700;
      cursor:pointer;
      list-style:none;
      white-space:nowrap;
    }
    .employee-termination-summary::-webkit-details-marker { display:none; }
    .employee-termination-details .employee-termination-form {
      display:grid;
      gap:8px;
      width:min(330px, calc(100vw - 48px));
      margin-top:8px;
      padding:12px;
      border:1px solid #f2c8c1;
      border-radius:8px;
      background:#fff;
      box-shadow:var(--shadow-lg);
    }
    .employee-danger-action .employee-termination-form,
    .month-close-danger-action .employee-termination-form {
      position:absolute;
      z-index:6;
      right:0;
      top:100%;
      padding-left:12px;
    }
    .employee-danger-action .employee-termination-details[open] { z-index:7; }
    .employee-danger-action .employee-termination-form {
      position:static;
    }
    /* The month-close table has horizontal scrolling.  Keep a dismissal form
       above that scrolling container, otherwise its amount field is clipped. */
    .month-close-danger-action .month-close-termination-details[open]::before {
      content:"";
      position:fixed;
      z-index:40;
      inset:0;
      background:rgba(20, 31, 54, .28);
    }
    .month-close-danger-action .month-close-termination-details[open] .employee-termination-form {
      position:fixed;
      z-index:41;
      top:50%;
      right:auto;
      left:50%;
      display:grid;
      width:min(420px, calc(100vw - 32px));
      max-height:calc(100dvh - 32px);
      margin:0;
      padding:16px;
      overflow-y:auto;
      overscroll-behavior:contain;
      transform:translate(-50%, -50%);
    }
    .month-close-danger-action .month-close-termination-details[open] .employee-termination-cancel {
      justify-self:end;
      grid-row:1;
      grid-column:1;
      min-height:30px;
      padding:5px 9px;
      font-size:12px;
    }
    .month-close-danger-action .month-close-termination-details[open] .employee-termination-form .employee-termination-meta {
      padding-right:78px;
    }
    .employee-termination-form .employee-termination-meta {
      line-height:1.4;
    }
    .employee-termination-form label {
      display:grid;
      gap:4px;
      margin:0;
      font-size:12px;
    }
    .employee-termination-form input {
      margin:0;
      min-height:34px;
      padding:6px 8px;
      font-size:13px;
    }
    .employee-termination-form button {
      justify-self:start;
    }
    td.employee-danger-action,
    th.employee-danger-action,
    td.month-close-danger-action,
    th.month-close-danger-action {
      background:#fffaf9;
      border-left:1px solid #f3d4ce;
      text-align:right;
      min-width:132px;
    }
    .muted { color:var(--muted); }
    .pill { display:inline-flex; align-items:center; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:700; background:#eef4ff; color:var(--brand); white-space:nowrap; }
    .pill.ok { background:#edf9f2; color:var(--good); }
    .pill.warn { background:#fff7e8; color:var(--warn); }
    .pill.bad { background:#fff0ee; color:var(--bad); }
    .status-pill {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:26px;
      border:1px solid var(--line);
      border-radius:999px;
      padding:4px 10px;
      background:var(--brand-gray);
      color:var(--brand);
      font-family:Rubik, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size:12px;
      font-weight:700;
      line-height:1.2;
      white-space:nowrap;
    }
    .status-pill.action,
    .status-pill.urgent,
    .status-pill.bad {
      border-color:var(--brand-orange);
      background:var(--brand-orange);
      color:var(--brand);
    }
    .status-pill.warn {
      border-color:var(--brand-orange);
      background:var(--brand-orange-tint);
      color:var(--brand);
    }
    .status-pill.info,
    .status-pill.ok {
      border-color:var(--line-strong);
      background:var(--surface-muted);
      color:var(--brand);
    }
    .status-pill.neutral,
    .status-pill.muted {
      border-color:var(--brand-gray);
      background:var(--brand-gray);
      color:var(--brand);
    }
    .standard-checklist { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:8px; margin-top:8px; }
    .standard-checklist .check-row { display:flex; gap:9px; align-items:flex-start; margin:0; border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; font-weight:700; }
    .standard-checklist input[type=checkbox] { width:auto; margin-top:3px; }
    table {
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .table-scroll {
      max-width:100%;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      border-radius:var(--radius);
    }
    .table-scroll > table {
      margin:0;
    }
    .table-scroll::-webkit-scrollbar {
      height:10px;
    }
    .table-scroll::-webkit-scrollbar-track {
      background:#edf3fb;
      border-radius:999px;
    }
    .table-scroll::-webkit-scrollbar-thumb {
      background:#c4d1e3;
      border:2px solid #edf3fb;
      border-radius:999px;
    }
    .employee-directory-filter-row {
      display:grid;
      grid-template-columns:minmax(240px, 1.5fr) repeat(2, minmax(160px, 1fr)) auto auto;
      align-items:center;
      gap:8px;
      margin:12px 0 14px;
    }
    .employee-directory-filter-row > * { min-width:0; }
    .employee-directory-table-scroll { overflow-x:auto; }
    .employee-org-editor-table { table-layout:fixed; }
    .employee-org-editor-table th,
    .employee-org-editor-table td { padding:9px 10px; font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
    .employee-org-editor-table th:nth-child(1) { width:54px; }
    .employee-org-editor-table th:nth-child(2) { width:190px; }
    .employee-org-editor-table th:nth-child(3) { width:150px; }
    .employee-org-editor-table th:nth-child(4) { width:170px; }
    .employee-org-editor-table th:nth-child(5) { width:180px; }
    .employee-org-editor-table th:nth-child(6) { width:105px; }
    .employee-org-editor-table th:nth-child(7) { width:112px; }
    .employee-org-editor-trigger { min-height:34px; padding:6px 10px; white-space:nowrap; }
    .employee-org-editor-popover {
      position:fixed;
      inset:0;
      margin:auto;
      width:min(620px, calc(100vw - 28px));
      max-width:calc(100vw - 28px);
      max-height:calc(100vh - 28px);
      overflow:auto;
      padding:16px;
      border:1px solid var(--line-strong);
      border-radius:8px;
      background:var(--surface);
      color:var(--ink);
      box-shadow:0 24px 70px rgba(5,29,94,.22);
    }
    .employee-org-editor-popover:popover-open { display:block; }
    .employee-org-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
    .employee-org-editor-heading h3 { min-width:0; margin:0; color:var(--brand); font-size:17px; line-height:1.3; }
    .employee-org-editor-close { display:inline-grid; place-items:center; flex:0 0 auto; width:32px; height:32px; min-height:32px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:20px; box-shadow:none; }
    .employee-org-editor-form { display:grid; gap:12px; }
    .employee-org-editor-fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 12px; }
    .employee-org-editor-form label { display:grid; min-width:0; gap:4px; color:var(--muted); font-size:12px; font-weight:700; line-height:1.3; }
    .employee-org-editor-form .input { min-width:0; width:100%; min-height:38px; padding:8px 10px; font-size:14px; }
    .employee-org-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:10px; border-top:1px solid var(--line); }
    .employee-org-editor-footer p { max-width:390px; margin:0; line-height:1.4; }
    .employee-org-editor-footer .button { flex:0 0 auto; min-height:38px; white-space:nowrap; }
    @media (max-width:980px) {
      .employee-directory-filter-row { grid-template-columns:minmax(0, 1fr) minmax(160px, 1fr); }
      .employee-directory-filter-row input[type='search'] { grid-column:1 / -1; }
      .employee-org-editor-table { min-width:860px; }
    }
    @media (max-width:640px) {
      .employee-directory-filter-row { grid-template-columns:minmax(0, 1fr); }
      .employee-directory-filter-row input[type='search'] { grid-column:auto; }
      .employee-org-editor-popover { padding:14px; }
      .employee-org-editor-fields { grid-template-columns:minmax(0, 1fr); }
      .employee-org-editor-footer { align-items:stretch; flex-direction:column; gap:10px; }
      .employee-org-editor-footer .button { width:100%; }
      .employee-org-editor-table { width:100%; min-width:0; table-layout:auto; }
      .employee-org-editor-table tbody tr { margin-bottom:8px; }
      .employee-org-editor-table td { grid-template-columns:minmax(82px, 30%) minmax(0, 1fr); gap:8px; padding:7px 10px; }
      .employee-org-editor-table td:nth-child(1) { display:none; }
      .employee-org-editor-trigger { width:100%; }
    }
    @media (max-width:780px) {
      .employee-directory-table-scroll { overflow-x:auto; }
      .employee-danger-action .employee-termination-form {
        position:static;
      }
    }
    th, td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; }
    th { background:#f7faff; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:0; }
    tr:last-child td { border-bottom:0; }
    .table-sort-button {
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:0;
      padding:0;
      border:0;
      background:transparent;
      color:inherit;
      box-shadow:none;
      font:inherit;
      font-weight:700;
      text-align:left;
      cursor:pointer;
    }
    .table-sort-button:hover {
      background:transparent;
      color:var(--brand);
      box-shadow:none;
    }
    .table-sort-button::after {
      content:"↕";
      color:#8a96ad;
      font-size:11px;
      line-height:1;
    }
    .table-sort-button.active[data-sort-dir="asc"]::after {
      content:"↑";
      color:var(--brand);
    }
    .table-sort-button.active[data-sort-dir="desc"]::after {
      content:"↓";
      color:var(--brand);
    }
    .history-detail-row td { background:#fbfdff; padding-top:0; }
    .history-detail {
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
      padding:12px;
      margin-top:2px;
    }
    .history-detail summary { cursor:pointer; color:var(--brand); font-weight:700; }
    .history-detail h3 { margin:14px 0 6px; color:var(--brand); font-size:16px; }
    .call-text {
      white-space:pre-wrap;
      max-height:260px;
      overflow:auto;
      border:1px solid var(--line);
      border-radius:8px;
      background:#f7faff;
      padding:12px;
      margin:6px 0 0;
    }
    .ai-summary-box {
      white-space:pre-wrap;
      border-left:5px solid var(--brand-2);
      background:#f7faff;
      border-radius:8px;
      padding:12px;
    }
    .click-row { cursor:pointer; }
    .click-row:hover td { background:#f7faff; }
    .badge { display:inline-block; padding:4px 9px; border-radius:8px; font-size:12px; font-weight:700; background:#e9eef8; color:var(--brand); }
    .correct { color:var(--good); }
    .incorrect { color:var(--bad); }
    .card-question { border-top:3px solid #edf3ff; padding-top:18px; margin-top:18px; }
    .small { font-size:13px; }
    .danger { color:var(--bad); font-weight:700; }
    .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0; }
    .step { display:block; border:1px solid var(--line); border-radius:8px; padding:14px; background:#fff; color:var(--muted); font-weight:500; }
    .step b { display:block; color:var(--brand); margin-bottom:4px; }
    a.step:hover { border-color:var(--brand-3); box-shadow:var(--shadow-lg); }
    .step.active { border-color:var(--brand); box-shadow:var(--shadow-lg); }
    .step.done { background:#edf3ff; color:var(--brand); }
    .progress-wrap { height:12px; border-radius:999px; background:#dce5f4; overflow:hidden; margin:14px 0 8px; }
    .progress-bar { height:100%; width:0; background:linear-gradient(90deg, var(--brand), var(--brand-2)); transition:width .2s ease; }
    .toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0; }
    .inline-form {
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin:0;
    }
    .registration-invites-header {
      border:1px solid #d7e4fb;
      border-radius:8px;
      background:#ffffff;
      padding:14px 20px;
      box-shadow:var(--shadow);
    }
    .invite-dashboard {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .invite-dashboard h1 {
      margin:0 0 2px;
    }
    .invite-dashboard .kicker {
      margin-bottom:4px;
    }
    .invite-stats {
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:8px;
    }
    .invite-stat {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:28px;
      border-radius:999px;
      padding:5px 12px;
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
    }
    .invite-stat.ok { background:#e9f8ef; color:var(--good); }
    .invite-stat.warn { background:#fff3dc; color:#a35a00; }
    .invite-stat.info { background:#edf3ff; color:var(--brand-3); }
    .invite-create-panel {
      border-top:4px solid var(--brand-3);
      background:#fff;
    }
    .invite-movement-panel {
      border-top:4px solid var(--good);
    }
    .invite-panel-heading {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:12px;
    }
    .invite-panel-heading h2 {
      margin-top:2px;
    }
    .invite-panel-heading p {
      margin:4px 0 0;
    }
    .invite-panel-badge {
      display:inline-flex;
      align-items:center;
      min-height:30px;
      border-radius:999px;
      padding:5px 11px;
      background:#edf7f1;
      color:var(--good);
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
    }
    .invite-onboarding-action {
      flex-direction:column;
      align-items:flex-end;
      gap:5px;
    }
    .invite-onboarding-action button {
      min-height:36px;
      padding:8px 14px;
      white-space:nowrap;
    }
    .invite-form-grid {
      display:grid;
      grid-template-columns:minmax(220px, 1.15fr) minmax(200px, .95fr) minmax(280px, 1.35fr) minmax(190px, auto);
      gap:12px;
      align-items:end;
    }
    .invite-form-grid label {
      margin:0;
    }
    .invite-form-grid .form-actions {
      margin:0;
    }
    .invite-form-grid .form-actions button {
      width:100%;
      min-height:44px;
      white-space:nowrap;
    }
    .invite-unit-field select {
      border-color:#9bb7ef;
      background:#f8fbff;
      font-weight:700;
    }
    .invite-created-inline {
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:12px;
      align-items:end;
      margin-top:12px;
      border:1px solid #cfe1f8;
      border-radius:8px;
      background:#f8fbff;
      padding:12px 14px;
    }
    .invite-created-inline .kicker {
      color:var(--good);
      margin-bottom:4px;
    }
    .invite-created-inline .copyable-input {
      margin:0;
      min-height:38px;
      font-weight:800;
    }
    .invite-created-actions {
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:flex-end;
    }
    .invite-created-actions .button,
    .invite-created-actions button {
      min-height:36px;
      padding:8px 14px;
    }
    .invite-table-wrap {
      overflow-x:auto;
    }
    .invite-table {
      min-width:980px;
      table-layout:fixed;
    }
    .invite-table th,
    .invite-table td {
      vertical-align:middle;
    }
    .invite-table th:nth-child(1),
    .invite-table td:nth-child(1) { width:21%; }
    .invite-table th:nth-child(2),
    .invite-table td:nth-child(2) { width:22%; }
    .invite-table th:nth-child(3),
    .invite-table td:nth-child(3) { width:16%; }
    .invite-table th:nth-child(4),
    .invite-table td:nth-child(4) { width:25%; }
    .invite-table th:nth-child(5),
    .invite-table td:nth-child(5) { width:16%; }
    .invite-next-step b {
      display:block;
      color:var(--brand);
      margin-bottom:2px;
    }
    .invite-action-cell {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }
    .invite-details {
      position:relative;
    }
    .invite-details summary {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:34px;
      border:1px solid #b9c8dd;
      border-radius:8px;
      background:#fff;
      color:var(--brand);
      padding:7px 12px;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      list-style:none;
    }
    .invite-details summary::-webkit-details-marker {
      display:none;
    }
    .invite-detail-box {
      position:absolute;
      right:0;
      z-index:5;
      min-width:280px;
      max-width:360px;
      margin-top:8px;
      border:1px solid #d5e1f2;
      border-radius:8px;
      background:#fff;
      padding:12px;
      box-shadow:var(--shadow-lg);
      color:var(--text);
      font-size:13px;
      line-height:1.45;
    }
    .invite-onboarding-history {
      min-width:190px;
      text-align:right;
    }
    .invite-onboarding-history summary {
      display:inline-flex;
      align-items:center;
      min-height:34px;
      border:1px solid #cfdced;
      border-radius:8px;
      background:#fff;
      color:var(--brand);
      padding:7px 12px;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      list-style:none;
    }
    .invite-onboarding-history summary::-webkit-details-marker {
      display:none;
    }
    .invite-onboarding-history .invite-table-wrap {
      position:absolute;
      right:28px;
      z-index:4;
      max-width:440px;
      margin-top:8px;
      border:1px solid #d5e1f2;
      border-radius:8px;
      background:#fff;
      padding:10px;
      box-shadow:var(--shadow-lg);
      text-align:left;
    }
    .invite-unit-card {
      display:grid;
      gap:3px;
      border:1px solid #bfd2f6;
      border-left:5px solid var(--brand-3);
      border-radius:8px;
      background:linear-gradient(135deg, #f8fbff 0%, #ffffff 66%);
      padding:10px 12px;
      box-shadow:0 1px 3px rgba(5,29,94,.05);
    }
    .invite-unit-eyebrow {
      color:var(--brand-3);
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .invite-unit-title {
      color:var(--brand);
      font-size:15px;
      line-height:1.25;
    }
    .invite-unit-meta {
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .invite-revoke-form button {
      min-height:34px;
      padding:7px 11px;
      white-space:nowrap;
    }
    .home-page { display:grid; gap:16px; }
    .home-task-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .home-task-head h2 { margin:4px 0 0; }
    .home-task-metrics { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
    .home-task-metrics span { display:inline-flex; gap:8px; align-items:center; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:13px; }
    .home-task-metrics b { color:var(--text); font-size:16px; }
    .home-task-list { list-style:none; margin:0; padding:0; }
    .home-task-row { display:flex; justify-content:space-between; align-items:center; gap:10px 16px; padding:11px 0; border-top:1px solid var(--line); }
    .home-task-row > div { min-width:0; }
    .home-task-row b { display:block; overflow-wrap:anywhere; }
    .home-task-row div > a { color:var(--text); text-decoration:none; }
    .home-task-row div > a:hover { text-decoration:underline; }
    .home-task-row span { color:var(--muted); font-size:13px; }
    .home-task-row .home-task-due { white-space:nowrap; }
    .home-task-row .home-task-overdue { color:var(--bad); font-weight:700; }
    .home-task-empty { margin:4px 0 0; }
    .home-hero {
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(280px, 420px);
      gap:16px;
      align-items:stretch;
      margin-bottom:2px;
    }
    .home-hero-identity { grid-template-columns:minmax(0, 1fr); }
    .home-hero > div {
      min-width:0;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--surface);
      padding:22px;
      box-shadow:var(--shadow);
    }
    .home-hero h1 { margin:4px 0 6px; }
    .home-hero p { margin:0; color:var(--muted); }
    .home-hero .home-identity-description { margin-top:10px; }
    .home-eyebrow {
      display:inline-flex;
      color:var(--brand);
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .home-work-time {
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:6px;
    }
    .home-work-time span,
    .home-summary-card span,
    .home-action-sub {
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .home-work-time strong {
      color:var(--brand);
      font-size:28px;
      line-height:1.12;
    }
    .home-summary-grid {
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
    }
    .home-activity-summary {
      display:grid;
      grid-template-columns:minmax(220px, .68fr) minmax(0, 2fr);
      gap:12px;
      padding-top:4px;
    }
    .home-activity-summary .home-work-time,
    .home-activity-summary .home-summary-card {
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--surface);
      box-shadow:var(--shadow);
    }
    .home-activity-summary .home-work-time { padding:16px; }
    .home-summary-card {
      min-width:0;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--surface);
      padding:16px;
      box-shadow:var(--shadow);
    }
    .home-summary-card b {
      display:block;
      margin-top:4px;
      color:var(--brand);
      font-size:20px;
      line-height:1.2;
    }
    .home-actions-panel { margin:0; }
    .home-action-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:10px;
    }
    .home-action-tile {
      display:grid;
      gap:5px;
      min-height:82px;
      align-content:center;
      border:1px solid var(--line);
      border-radius:8px;
      background:var(--surface-muted);
      padding:14px;
      color:var(--ink);
      box-shadow:none;
    }
    .home-action-tile:hover {
      border-color:var(--brand-3);
      background:#fff;
      color:var(--ink);
      box-shadow:var(--shadow);
    }
    .home-action-tile.primary {
      border-color:color-mix(in srgb, var(--brand) 35%, var(--line));
      background:#eef6ff;
    }
    .home-action-tile.sales {
      border-color:#fed7aa;
      background:#fff7ed;
    }
    .home-action-title {
      color:var(--brand);
      font-weight:800;
    }
    .developer-viewer-home .warn-panel {
      border-color:#fbbf24;
      border-left:5px solid #f59e0b;
      background:#fffbeb;
    }
    .home-dev-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:12px;
    }
    .home-dev-section {
      display:grid;
      gap:10px;
      min-width:0;
      border:1px solid #d8e4f6;
      border-top:4px solid var(--brand-2);
      border-radius:8px;
      background:#fff;
      padding:18px;
      box-shadow:var(--shadow);
    }
    .home-dev-section h2 {
      margin:0;
      color:var(--brand);
      font-size:21px;
      line-height:1.2;
    }
    .home-dev-section p {
      margin:0;
      color:var(--muted);
      font-weight:700;
      line-height:1.45;
    }
    .home-dev-section .toolbar {
      margin:4px 0 0;
    }
    .sales-checkpoints-page {
      display:grid;
      gap:18px;
    }
    .sales-checkpoints-hero {
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(240px, 340px);
      gap:18px;
      align-items:stretch;
      border:1px solid #cfe2ff;
      border-radius:12px;
      padding:22px;
      background:linear-gradient(135deg, #eef6ff 0%, #ffffff 48%, #fff7ed 100%);
      box-shadow:var(--shadow);
    }
    .sales-checkpoints-hero h1 {
      margin:6px 0 8px;
      color:var(--brand);
      font-size:32px;
      line-height:1.1;
    }
    .sales-checkpoints-hero p {
      max-width:720px;
      margin:0;
      color:var(--muted);
      font-size:16px;
    }
    .sales-checkpoints-target {
      display:grid;
      align-content:center;
      gap:8px;
      border:1px solid #fde68a;
      border-radius:12px;
      padding:18px;
      background:#fffbeb;
      color:#92400e;
    }
    .sales-checkpoints-target b {
      color:#b45309;
      font-size:34px;
      line-height:1;
    }
    .sales-checkpoints-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:12px;
    }
    .sales-checkpoints-grid article {
      border:1px solid var(--line);
      border-top:5px solid var(--brand-3);
      border-radius:10px;
      background:#fff;
      padding:16px;
      box-shadow:var(--shadow);
    }
    .sales-checkpoints-grid article:nth-child(2) { border-top-color:#f59e0b; }
    .sales-checkpoints-grid article:nth-child(3) { border-top-color:#059669; }
    .sales-checkpoints-grid article:nth-child(4) { border-top-color:#7c3aed; }
    .sales-checkpoints-grid span {
      display:block;
      color:var(--muted);
      font-weight:800;
      font-size:13px;
      text-transform:uppercase;
    }
    .sales-checkpoints-grid b {
      display:block;
      margin:6px 0;
      color:var(--brand);
      font-size:20px;
    }
    .sales-checkpoints-grid p {
      margin:0;
      color:var(--muted);
    }
    .sales-checkpoints-image-panel {
      overflow:hidden;
    }
    .sales-checkpoints-image {
      display:block;
      width:100%;
      height:auto;
      margin-top:14px;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fff;
    }
    .sales-regulations-image-panel {
      overflow:hidden;
    }
    .sales-regulations-image {
      display:block;
      width:100%;
      height:auto;
      margin-top:14px;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fff;
    }
    .sales-regulations-text > summary {
      cursor:pointer;
      font-weight:800;
      color:var(--brand);
    }
    .sales-regulations-text[open] > summary {
      margin-bottom:10px;
    }
    .quick-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; align-items:end; }
    .voice-control { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; }
    .voice-button { background:#fff; color:var(--brand); border:1px solid #c8d3e5; box-shadow:none; padding:8px 12px; }
    .voice-button.recording { background:#fff7f6; color:var(--bad); border-color:#f0b8b0; }
    .speak-controls { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
    .speak-button.speaking { background:#fff7e8; color:var(--warn); border-color:#f3c780; }
    .simulator-thread { display:grid; gap:10px; margin:14px 0; }
    .sim-turn { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff; }
    .sim-turn.client { border-left:5px solid var(--brand); background:#f7faff; }
    .sim-turn.manager { border-left:5px solid var(--good); }
    .sim-role { display:block; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
    .simulator-wait { display:none; border-left:5px solid var(--warn); }
    .simulator-wait.active { display:block; }
    .voice-wave {
      display:none;
      align-items:center;
      gap:3px;
      height:28px;
      min-width:104px;
      padding:4px 9px;
      border:1px solid #c8d3e5;
      border-radius:8px;
      background:#f8fbff;
    }
    .voice-wave span {
      display:block;
      width:4px;
      height:8px;
      border-radius:999px;
      background:var(--brand);
      opacity:.85;
      transform-origin:center;
    }
    .voice-control.recording .voice-wave { display:flex; }
    .voice-control.recording .voice-wave span { animation:voiceWave .82s ease-in-out infinite; }
    .voice-wave span:nth-child(2) { animation-delay:.08s; }
    .voice-wave span:nth-child(3) { animation-delay:.16s; }
    .voice-wave span:nth-child(4) { animation-delay:.24s; }
    .voice-wave span:nth-child(5) { animation-delay:.32s; }
    .voice-wave span:nth-child(6) { animation-delay:.40s; }
    .voice-wave span:nth-child(7) { animation-delay:.48s; }
    .voice-wave span:nth-child(8) { animation-delay:.56s; }
    @keyframes voiceWave {
      0%, 100% { transform:scaleY(.55); opacity:.45; }
      50% { transform:scaleY(2.7); opacity:1; }
    }
    .upload-note { background:#f7faff; border:1px dashed #9db3da; border-radius:8px; padding:14px; }
    .upload-dropzone {
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:150px;
      margin:12px 0;
      padding:24px;
      border:2px dashed #9db3da;
      border-radius:8px;
      background:#f7faff;
      color:var(--muted);
      text-align:center;
      font-weight:600;
      cursor:pointer;
      transition:border-color .15s ease, background .15s ease, color .15s ease;
    }
    .upload-dropzone:hover,
    .upload-dropzone.dragover {
      border-color:var(--brand);
      background:#edf4ff;
      color:var(--ink);
    }
    .upload-dropzone input { display:none; }
    .upload-file-list {
      display:none;
      margin:8px 0 0;
      padding:10px 12px;
      border:1px solid #d8e1f0;
      border-radius:8px;
      background:#fff;
      color:var(--ink);
      font-size:13px;
      line-height:1.45;
    }
    .upload-file-list.active { display:block; }
    .upload-progress {
      display:none;
      align-items:center;
      gap:10px;
      margin-top:10px;
      padding:12px 14px;
      border:1px solid #c8d3e5;
      border-radius:8px;
      background:#f7faff;
      color:var(--ink);
      font-weight:600;
    }
    .upload-progress.active { display:flex; }
    .upload-error {
      display:none;
      margin-top:10px;
      padding:12px 14px;
      border:1px solid #f0b8b0;
      border-radius:8px;
      background:#fff7f6;
      color:var(--bad);
      font-weight:700;
    }
    .upload-error.active { display:block; }
    .upload-spinner {
      width:18px;
      height:18px;
      border:3px solid #d7e0ef;
      border-top-color:var(--brand);
      border-radius:50%;
      animation:spin .8s linear infinite;
      flex:0 0 auto;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .pass-banner { border-left:6px solid var(--good); }
    .pass-banner.fail { border-left-color:var(--bad); }
    .pass-banner.pending { border-left-color:var(--warn); }
    .retake-banner {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border:1px solid #f0b8b0;
      border-left:5px solid var(--bad);
      background:#fff7f6;
      color:var(--ink);
      box-shadow:var(--shadow);
    }
    .retake-banner__content {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    .retake-banner__label {
      display:inline-flex;
      align-items:center;
      min-height:26px;
      border-radius:999px;
      padding:4px 10px;
      background:#fff0ee;
      color:var(--bad);
      font-size:12px;
      line-height:1;
      font-weight:800;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .retake-banner__actions {
      display:flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
    }
    .retake-banner__action {
      padding:8px 12px;
      white-space:nowrap;
    }
    .retake-banner__dismiss {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:34px;
      min-width:34px;
      height:34px;
      min-height:34px;
      padding:0;
      border:1px solid #f0b8b0;
      border-radius:8px;
      background:#fff;
      color:var(--bad);
      box-shadow:none;
      font-size:22px;
      line-height:1;
    }
    .retake-banner__dismiss:hover {
      background:#fff0ee;
      color:#8a1f1f;
      box-shadow:none;
    }
    .retake-banner[hidden] { display:none; }
    .login-shell {
      min-height:calc(100vh - 72px);
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
      align-items:center;
      gap:34px;
      padding:30px 0;
      width:100%;
      max-width:100%;
      min-width:0;
      box-sizing:border-box;
    }
    .login-hero {
      color:#fff;
      background:linear-gradient(135deg, #031548 0%, var(--brand) 62%, var(--brand-2) 100%);
      border-radius:8px;
      padding:42px;
      min-height:480px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      position:relative;
      box-shadow:0 10px 32px rgba(5,29,94,.14);
    }
    .login-brand-pattern {
      position:absolute;
      right:-200px;
      bottom:-250px;
      width:360px;
      height:520px;
      opacity:.98;
      z-index:0;
      pointer-events:none;
    }
    .login-brand-pattern::before,
    .login-brand-pattern::after,
    .login-brand-pattern span {
      content:"";
      position:absolute;
      inset:0;
      clip-path:polygon(0 0, 52% 50%, 0 100%, 31% 100%, 83% 50%, 31% 0);
    }
    .login-brand-pattern::before {
      left:-86px;
      background:#e6e6e6;
      opacity:.95;
    }
    .login-brand-pattern::after {
      left:-20px;
      background:#ffa412;
    }
    .login-brand-pattern span {
      left:142px;
      width:150px;
      background:#fff;
      opacity:.92;
    }
    .login-hero::after {
      content:"";
      position:absolute;
      right:-80px;
      bottom:-100px;
      width:360px;
      height:360px;
      background:url("/assets/nssd-mark.png") center/contain no-repeat;
      opacity:.08;
    }
    .login-logo { width:min(360px, 78vw); height:auto; position:relative; z-index:1; }
    .login-title { position:relative; z-index:1; max-width:620px; }
    .login-title h1 { color:#fff; font-size:42px; margin-bottom:14px; }
    .login-title p { color:rgba(255,255,255,.78); font-size:18px; margin:0; max-width:390px; }
    .login-card {
      align-self:center;
      width:100%;
      max-width:460px;
      min-width:0;
      justify-self:center;
      box-sizing:border-box;
    }
    .login-card.panel { padding:22px 24px; }
    .login-card form, .login-card input, .login-card select, .login-card button {
      min-width:0;
      max-width:100%;
      box-sizing:border-box;
    }
    .login-card-brand {
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }
    .login-card-brand img {
      width:42px;
      height:42px;
      object-fit:contain;
      flex:none;
    }
    .login-card h1 { margin-bottom:10px; }
    .login-card h2 { margin-top:22px; }
    .login-profile {
      margin-top:14px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#f8fbff;
      overflow:hidden;
    }
    .login-profile summary {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:11px 12px;
      color:var(--brand);
      font-weight:700;
      cursor:pointer;
      list-style:none;
    }
    .login-profile summary::-webkit-details-marker { display:none; }
    .login-profile summary::after {
      content:"";
      width:10px;
      height:10px;
      flex:none;
      border-right:2px solid var(--brand);
      border-bottom:2px solid var(--brand);
      transform:rotate(45deg) translateY(-2px);
      transition:transform .15s ease;
    }
    .login-profile[open] summary::after { transform:rotate(225deg) translateY(-2px); }
    .login-profile-fields {
      padding:0 12px 12px;
      border-top:1px solid var(--line);
    }
    .login-profile:not([open]) .login-profile-fields { display:none; }
    .login-submit-row { margin:16px 0 0; }
    .login-submit-row button { width:100%; }
    .login-help-row { margin:10px 0 0; font-size:14px; }
    .login-help-row a { color:var(--brand); font-weight:700; }
    .platform-about { max-width:900px; margin:22px auto 48px; display:grid; gap:16px; }
    .platform-about-hero {
      padding:32px 36px;
      border-radius:8px;
      background:linear-gradient(135deg, #031548 0%, var(--brand) 100%);
      color:#fff;
    }
    .platform-about-hero .kicker { color:#a9d9ff; }
    .platform-about-hero h1 { color:#fff; margin:0 0 14px; }
    .platform-about-hero p { max-width:72ch; margin:0; line-height:1.6; }
    .platform-about-section.panel { margin:0; padding:24px 28px; }
    .platform-about-section h2 { margin:0 0 14px; }
    .platform-about-section p { line-height:1.55; }
    .platform-about-section p:last-of-type { margin-bottom:0; }
    .platform-about-section .button { margin-top:18px; }
    .ok-note { color:var(--ok); background:#eefbf3; border:1px solid #bfe9cd; border-radius:8px; padding:10px 12px; }
    .kicker { color:var(--brand-2); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700; margin-bottom:8px; }
    @media (max-width: 820px) {
      body { font-size:16px; background:#f6f8fc; }
      body::before { display:none; }
      .nav { align-items:flex-start; flex-direction:column; }
      .nav-right { width:100%; justify-content:space-between; align-items:flex-start; gap:10px; font-size:14px; }
      .nav-profile-link { min-height:34px; padding:6px 9px; }
      .curator-nav { position:static; align-items:stretch; flex-direction:column; padding:8px 14px; gap:8px; }
      .history-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
      .curator-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
      .curator-links .nav-chip, .history-controls .nav-chip { min-width:0; width:100%; padding-left:6px; padding-right:6px; min-height:40px; font-size:13px; }
      .curator-links .nav-group { width:100%; display:block; }
      .curator-links .nav-group-summary { width:100%; min-height:40px; }
      .nav-group-menu {
        position:static;
        min-width:0;
        max-width:none;
        margin-top:6px;
        box-shadow:none;
      }
      .nav-group-menu .nav-chip { justify-content:center; text-align:center; }
      .brand span { display:none; }
      .brand img { width:auto; max-width:68vw; height:38px; }
      .wrap { max-width:100%; padding:16px 10px 34px; }
      h1 { font-size:27px; line-height:1.14; }
      h2 { font-size:20px; line-height:1.2; }
      .panel { padding:14px; margin:12px 0; box-shadow:0 8px 22px rgba(5,29,94,.07); }
      .grid, .quick-form, .steps, .standard-checklist, .home-hero, .home-summary-grid, .home-activity-summary { grid-template-columns:1fr; gap:10px; }
      .invite-dashboard { align-items:flex-start; flex-direction:column; }
      .invite-stats { justify-content:flex-start; }
      .invite-panel-heading { flex-direction:column; }
      .invite-form-grid { grid-template-columns:1fr; }
      .invite-panel-badge { white-space:normal; }
      .invite-onboarding-action { align-items:stretch; width:100%; }
      .invite-created-inline { grid-template-columns:1fr; }
      .invite-created-actions { justify-content:stretch; }
      .invite-created-actions .button, .invite-created-actions button { flex:1 1 auto; text-align:center; }
      .invite-action-cell { display:grid; grid-template-columns:1fr; align-items:stretch; }
      .invite-action-cell .inline-form, .invite-action-cell button { width:100%; }
      .invite-details summary { width:100%; }
      .invite-detail-box { position:static; min-width:0; max-width:none; }
      .invite-onboarding-history { width:100%; text-align:left; }
      .invite-onboarding-history summary { width:100%; justify-content:center; }
      .invite-onboarding-history .invite-table-wrap { position:static; max-width:none; margin-top:8px; }
      .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
      .stat { padding:12px; }
      .stat b { font-size:24px; }
      .retake-banner { align-items:stretch; flex-direction:column; }
      .retake-banner__content { align-items:flex-start; flex-direction:column; }
      .retake-banner__actions { width:100%; }
      .retake-banner__action { flex:1 1 auto; text-align:center; }
      .retake-banner__dismiss { width:44px; min-width:44px; height:44px; min-height:44px; }
      .login-shell { grid-template-columns:1fr; }
      .login-hero { min-height:300px; padding:26px; }
      .login-title h1 { font-size:34px; }
      .toolbar { display:grid; grid-template-columns:1fr; gap:8px; align-items:stretch; }
      .toolbar .button, .toolbar button { width:100%; text-align:center; min-height:44px; }
      button, .button, input, select, textarea { min-height:44px; }
      textarea { min-height:150px; }
      .call-text { max-height:430px; font-size:15px; }
      table {
        display:block;
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
      }
      table thead, table tbody, table tr, table td { display:block; width:100%; }
      table tr {
        margin:0 0 12px;
        border:1px solid var(--line);
        border-radius:8px;
        background:#fff;
        box-shadow:0 8px 22px rgba(5,29,94,.07);
        overflow:hidden;
      }
      table tr.mobile-table-head { display:none; }
      table th { display:none; }
      table td {
        display:grid;
        grid-template-columns:minmax(105px, 34%) minmax(0, 1fr);
        gap:10px;
        padding:10px 12px;
        border-bottom:1px solid var(--line);
        overflow-wrap:anywhere;
      }
      table td:last-child { border-bottom:0; }
      table td::before {
        content:attr(data-label);
        color:var(--muted);
        font-size:12px;
        line-height:1.25;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.02em;
      }
      table td:not([data-label]) { grid-template-columns:1fr; }
      table td:not([data-label])::before { display:none; }
      .page-view-row-meta { display:inline-block; }
      table td a:not(.button):not(.nav-chip):not(.test-progress-chip) {
        display:inline-flex;
        align-items:center;
        min-height:36px;
      }
      .program-switch .nav-chip { min-height:40px; }
      .sales-checkpoints-hero { grid-template-columns:1fr; }
    }
    @media (max-width: 520px) {
      .nav { padding:12px 14px; }
      .nav-right { flex-direction:column; }
      .nav-exit { width:100%; text-align:center; }
      .curator-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .history-controls { grid-template-columns:1fr; }
      .stats-grid { grid-template-columns:1fr; }
      .login-hero { display:none; }
      .login-shell { min-height:auto; padding:0; overflow:hidden; }
      .login-card { max-width:none; }
      .login-card.panel { padding:16px; margin:0; }
      .login-card-brand { align-items:flex-start; }
      .login-card-brand img { width:38px; height:38px; }
      .login-card h1 { font-size:24px; }
      .login-profile summary { align-items:flex-start; }
      .platform-about { margin:0 auto 24px; gap:12px; }
      .platform-about-hero { padding:24px 20px; }
      .platform-about-section.panel { padding:18px 20px; }
      table td { grid-template-columns:1fr; gap:4px; }
      table td::before { margin-bottom:2px; }
    }

/* --- Round 1 additions: accessibility + reduced motion --- */
.correct::before { content: "✓\00a0"; font-weight: 700; }
.incorrect::before { content: "✕\00a0"; font-weight: 700; }
.pill.ok::before { content: "✓\00a0"; }
.pill.bad::before { content: "✕\00a0"; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .stat-link:hover { transform: none !important; }
}

/* --- Round 3: empty state pattern --- */
tr.empty-row td {
  background: #fafcff;
  text-align: center;
  padding: 28px 20px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.empty-state[hidden] {
  display: none;
}
.empty-state::before {
  content: "";
  width: 32px;
  height: 24px;
  border: 2px solid #c8d3e5;
  border-top-color: #9db3da;
  border-radius: 6px;
  background:
    linear-gradient(135deg, transparent 46%, #c8d3e5 47% 53%, transparent 54%) center/100% 100% no-repeat,
    #fff;
  opacity: .95;
  margin-bottom: 4px;
}
.empty-state-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}
.empty-state-hint {
  color: var(--muted);
  font-size: 13px;
  max-width: 460px;
}
@media (max-width: 820px) {
  .month-close-main {
    flex-direction:column;
  }
  .month-close-action {
    justify-content:flex-start;
    min-width:0;
  }
  tr.empty-row td { padding: 22px 14px; }
  .empty-state::before { width: 28px; height: 21px; }
}

/* --- Round 5: highlighted action tiles for dashboard primary CTAs --- */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 4px 0 14px;
}
.action-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.action-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-3);
  color: var(--ink);
}
.action-tile-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.action-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-tile-title { font-weight: 700; color: var(--brand); font-size: 15px; }
.action-tile-sub { font-size: 13px; color: var(--muted); font-weight: 400; }
/* Per-action accent colors */
.action-tile.training      { border-left-color: var(--brand-3); }
.action-tile.simulator     { border-left-color: var(--good); }
.action-tile.simulator .action-tile-title { color: var(--good); }
.action-tile.helper        { border-left-color: #f5a623; }
.action-tile.helper .action-tile-title { color: #a86700; }
.action-tile.tests         { border-left-color: var(--good); }
.action-tile.tests .action-tile-title { color: var(--good); }
.action-tile.tests.test-status-passed {
  border-color: #bfe8cf;
  border-left-color: var(--good);
  background: linear-gradient(135deg, #effbf4 0%, #ffffff 100%);
}
.action-tile.tests.test-status-passed .action-tile-title,
.action-tile.tests.test-status-passed .action-tile-icon {
  color: var(--good);
}
.action-tile.tests.test-status-retake {
  border-color: #efc1bb;
  border-left-color: var(--bad);
  background: linear-gradient(135deg, #fff6f5 0%, #ffffff 100%);
}
.action-tile.tests.test-status-retake .action-tile-title,
.action-tile.tests.test-status-retake .action-tile-icon {
  color: var(--bad);
}
.action-tile.tests.test-status-pending,
.action-tile.tests.test-status-draft {
  border-color: #f2d19b;
  border-left-color: var(--warn);
  background: linear-gradient(135deg, #fffaf0 0%, #ffffff 100%);
}
.action-tile.tests.test-status-pending .action-tile-title,
.action-tile.tests.test-status-pending .action-tile-icon,
.action-tile.tests.test-status-draft .action-tile-title,
.action-tile.tests.test-status-draft .action-tile-icon {
  color: #9a5d00;
}
.action-tile.tests.test-status-todo {
  border-left-color: var(--brand-3);
}
.action-tile.tests.test-status-todo .action-tile-title {
  color: var(--brand);
}
.action-tile.tests.test-status-locked {
  border-color: #dbe3ef;
  border-left-color: #aab6c6;
  background: #f6f8fb;
}
.action-tile.tests.test-status-locked .action-tile-title,
.action-tile.tests.test-status-locked .action-tile-icon {
  color: #687487;
}
.action-tile.onboarding    { border-left-color: #7c5cff; }
.action-tile.onboarding .action-tile-title { color: #5d43d6; }
.action-tile.forbidden     { border-left-color: var(--warn); }
.action-tile.forbidden .action-tile-title { color: var(--warn); }
.action-tile.api           { border-left-color: #0f766e; }
.action-tile.api .action-tile-title { color: #0f766e; }
.action-tile.tasks         { border-left-color: #7c3aed; }
.action-tile.tasks .action-tile-title { color: #6d28d9; }
.forbidden-rule-grid {
  display: grid;
  gap: 12px;
  margin: 12px 0 22px;
}
.forbidden-rule-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid #d8e2f1;
  border-left: 5px solid var(--warn);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.forbidden-rule-part {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e1e8f3;
  border-radius: 8px;
  background: #f9fbff;
}
.forbidden-rule-part b {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.forbidden-rule-part span {
  display: block;
  color: #273452;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.forbidden-rule-part.danger {
  border-color: #efc1bb;
  background: #fff6f5;
}
.forbidden-rule-part.danger b { color: var(--bad); }
.forbidden-rule-part.bad {
  border-color: #f2d19b;
  background: #fffaf0;
}
.forbidden-rule-part.bad b { color: #9a5d00; }
.forbidden-rule-part.good {
  border-color: #bfe8cf;
  background: #edf9f2;
}
.forbidden-rule-part.good b { color: var(--good); }
.action-tile.is-complete {
  border-color: #bfe8cf;
  border-left-color: var(--good);
  background: linear-gradient(135deg, #effbf4 0%, #ffffff 100%);
}
.action-tile.is-complete .action-tile-title,
.action-tile.is-complete .action-tile-icon {
  color: var(--good);
}
.action-tile.is-complete .action-tile-sub {
  color: #3c6f54;
}
.action-tile.is-disabled {
  background: #f6f8fb;
  border-color: #dbe3ef;
  border-left-color: #aab6c6;
  box-shadow: none;
  color: #687487;
}
.action-tile.is-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #dbe3ef;
}
.action-tile.is-disabled .action-tile-title,
.action-tile.is-disabled .action-tile-icon {
  color: #687487;
}
.route-progress-panel {
  border-left: 5px solid var(--good);
}
.route-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.route-progress-head h2 {
  margin: 0 0 4px;
}
.route-progress-head p {
  margin: 0;
}
.route-progress-head strong {
  color: var(--brand);
  font-size: 32px;
  line-height: 1;
}
.route-progress-wrap {
  margin-top: 12px;
}
.route-progress-wrap .progress-bar {
  background: linear-gradient(90deg, var(--good), #66c98b);
}
.certificate-route-card {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  min-height: 172px;
  border: 1px solid #dfe6f2;
  border-left: 5px solid #ffa412;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,164,18,.10), rgba(5,29,94,.04)),
    #fff;
  box-shadow: var(--shadow);
}
.certificate-route-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}
.certificate-route-card summary::-webkit-details-marker { display: none; }
.certificate-route-copy,
.certificate-route-lock {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.certificate-route-kicker {
  color: #a86700;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.certificate-route-title {
  color: var(--brand);
  font-size: 20px;
  font-weight: 800;
}
.certificate-route-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.certificate-route-badge {
  flex: none;
  border-radius: 999px;
  background: rgba(30, 124, 74, .11);
  color: var(--good);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
}
.certificate-route-reveal {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(220px, .9fr);
  gap: 18px;
  align-items: center;
  padding: 0 20px 20px;
}
.certificate-route-actions p { margin-top: 0; color: var(--muted); }
.certificate-route-locked-preview {
  position: absolute;
  inset: 14px 16px;
  filter: blur(5px);
  opacity: .58;
  transform: scale(1.02);
  pointer-events: none;
}
.certificate-route-card.is-locked {
  min-height: 190px;
  cursor: default;
}
.certificate-route-card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.46);
  z-index: 1;
}
.certificate-route-card.is-locked .certificate-route-lock {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
}
.certificate-mini-preview {
  position: relative;
  min-height: 132px;
  border: 1px solid #e2e8f2;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(5,29,94,.12) 0 8px, transparent 8px calc(100% - 8px), rgba(255,164,18,.25) calc(100% - 8px)),
    radial-gradient(circle at 50% -30%, #ffffff 0, #fff8e9 45%, #f4f7fc 100%);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.72);
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
}
.certificate-mini-logo {
  position: absolute;
  top: 12px;
  left: 16px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
.certificate-mini-title {
  color: var(--brand);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .18em;
}
.certificate-mini-rule {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffa412, transparent);
  margin-top: -10px;
}
.certificate-mini-name {
  color: var(--brand);
  font-size: 16px;
  font-weight: 800;
}
.certificate-mini-role,
.certificate-mini-score {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.next-step-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  border-left: 6px solid var(--brand-3);
  background:
    linear-gradient(135deg, rgba(255, 164, 18, .14), rgba(255,255,255,0) 38%),
    #fff;
}
.next-step-panel[hidden] { display: none; }
.next-step-panel.test,
.next-step-panel.final { border-left-color: var(--good); }
.next-step-panel.attention { border-left-color: var(--warn); }
.next-step-panel.done { border-left-color: var(--brand); }
.next-step-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
}
.next-step-dismiss:hover {
  background: #eef3ff;
  color: var(--brand);
  box-shadow: none;
}
.next-step-icon {
  width: 58px;
  height: 58px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef3ff;
  color: var(--brand);
  font-size: 30px;
  flex: none;
}
.next-step-label {
  display: inline-flex;
  align-items: center;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.next-step-body h2 {
  margin: 3px 0 5px;
  color: var(--brand);
}
.next-step-body p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.next-step-button {
  white-space: normal;
  text-align: center;
}
.cabinet-zone {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cabinet-zone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cabinet-zone-head h2 { margin: 0; }
.cabinet-zone-head p { margin: 6px 0 0; }
.manager-dashboard-page {
  display: grid;
  gap: 12px;
}
.manager-dashboard-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.manager-dashboard-title-row h1 {
  margin: 0;
}
.manager-dashboard-jump-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.manager-dashboard-jump-links .button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}
.manager-dashboard-overview {
  display: grid;
  grid-template-columns: minmax(270px, .85fr) minmax(380px, 1.4fr);
  gap: 12px;
  align-items: stretch;
}
.manager-dashboard-overview .route-progress-panel {
  height: 100%;
  margin: 0;
  padding: 16px 18px;
}
.manager-dashboard-page .route-progress-head {
  gap: 10px;
}
.manager-dashboard-page .route-progress-head h2 {
  font-size: 18px;
}
.manager-dashboard-page .route-progress-head strong {
  font-size: 30px;
}
.manager-dashboard-page .route-progress-wrap {
  margin-top: 10px;
}
.manager-dashboard-stats-card {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.manager-dashboard-stats-card .stats-grid {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.manager-dashboard-stats-card .stats-grid--with-sales-helper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.manager-dashboard-page .stat {
  min-height: 72px;
  padding: 12px 14px;
}
.manager-dashboard-page .stat b {
  font-size: 22px;
}
.manager-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 12px;
  align-items: start;
}
.manager-dashboard-main-flow,
.manager-dashboard-side-flow {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.manager-dashboard-page .panel {
  margin: 0;
  padding: 18px;
}
.manager-dashboard-approvals-panel {
  min-width: 0;
  padding: 16px !important;
}
.manager-dashboard-approvals-panel .month-close-approvals {
  width: 100%;
}
.manager-dashboard-side-flow .panel {
  padding: 16px;
}
.manager-dashboard-page .cabinet-zone {
  gap: 10px;
}
.manager-dashboard-page .cabinet-zone-head {
  align-items: center;
  gap: 12px;
}
.manager-dashboard-page .cabinet-zone-head h2 {
  font-size: 18px;
}
.manager-dashboard-page .cabinet-zone-head p {
  font-size: 13px;
  line-height: 1.35;
}
.manager-dashboard-page .testing-zone-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #bfe8cf;
  border-radius: 999px;
  background: #f4fbf7;
  color: var(--good);
  font-size: 13px;
  white-space: nowrap;
}
.manager-dashboard-page .testing-zone-status b {
  margin-left: 4px;
}
.learning-route-panel {
  position: relative;
}
.learning-route-anchor {
  position: absolute;
  top: -10px;
}
.manager-dashboard-page .learning-route-head {
  align-items: flex-start;
}
.learning-route-summary {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 7px;
  align-items: baseline;
  padding: 7px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  background: #f7f9fc;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}
.learning-route-summary b {
  color: var(--brand);
  font-size: 14px;
}
.learning-route-disclosure {
  border-top: 1px solid var(--line);
}
.learning-route-disclosure:first-of-type {
  margin-top: 4px;
}
.learning-route-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 8px 2px;
  cursor: pointer;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}
.learning-route-disclosure > summary::-webkit-details-marker {
  display: none;
}
.learning-route-disclosure > summary::before {
  content: "›";
  order: 3;
  color: var(--muted);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  transition: transform .15s ease;
}
.learning-route-disclosure[open] > summary::before {
  transform: rotate(90deg);
}
.learning-route-disclosure > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}
.manager-dashboard-page .learning-route-disclosure .learning-route-rows {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 10px;
  overflow: hidden;
  border: 1px solid #e2e8f2;
  border-radius: 6px;
}
.manager-dashboard-page .learning-route-rows .action-tile,
.manager-dashboard-page .learning-route-rows .attempt-review-link {
  min-height: 58px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #e8edf4;
  border-left: 4px solid var(--brand-3);
  border-radius: 0;
  box-shadow: none;
}
.manager-dashboard-page .learning-route-rows .action-tile:last-child,
.manager-dashboard-page .learning-route-rows .attempt-review-link:last-child {
  border-bottom: 0;
}
.manager-dashboard-page .learning-route-rows .action-tile:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(37, 86, 181, .14);
}
.manager-dashboard-page .learning-route-rows .action-tile-icon {
  font-size: 20px;
}
.manager-dashboard-page .learning-route-rows .action-tile-title {
  font-size: 14px;
}
.manager-dashboard-page .learning-route-rows .action-tile-sub {
  font-size: 12px;
}
.manager-dashboard-page .learning-route-rows .attempt-review-link {
  width: 100% !important;
}
.manager-dashboard-page .learning-route-rows .attempt-review-link .button {
  min-height: 34px;
  font-size: 12px;
}
.manager-dashboard-page .action-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
}
.manager-dashboard-page .action-tile {
  min-height: 76px;
  padding: 12px 14px;
}
.manager-dashboard-page .action-tile-icon {
  font-size: 22px;
}
.manager-dashboard-page .action-tile-sub {
  font-size: 12px;
  line-height: 1.35;
}
.manager-dashboard-page .month-close-main {
  gap: 12px;
}
.manager-dashboard-page .month-close-panel h2 {
  font-size: 18px;
}
.manager-dashboard-page .month-close-action {
  min-width: 150px;
}
.manager-dashboard-side-flow .month-close-main {
  flex-direction: column;
}
.manager-dashboard-side-flow .month-close-action {
  justify-content: stretch;
  width: 100%;
}
.manager-dashboard-side-flow .month-close-action button,
.manager-dashboard-side-flow .month-close-action form {
  width: 100%;
}
.manager-dashboard-side-flow .month-close-recent-approvals {
  margin-top: 12px;
  padding: 10px;
  overflow: hidden;
}
.manager-dashboard-side-flow .month-close-recent-approvals .month-close-history-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}
.manager-dashboard-side-flow .month-close-recent-approvals .legal-task-table-wrap {
  overflow: hidden;
}
.manager-dashboard-side-flow .month-close-history-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.manager-dashboard-side-flow .month-close-history-table th,
.manager-dashboard-side-flow .month-close-history-table td {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.manager-dashboard-side-flow .month-close-history-table th:nth-child(2),
.manager-dashboard-side-flow .month-close-history-table td:nth-child(2),
.manager-dashboard-side-flow .month-close-history-table th:nth-child(3),
.manager-dashboard-side-flow .month-close-history-table td:nth-child(3) {
  display: none;
}
.manager-dashboard-side-flow .month-close-history-compact-date {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
}
.manager-dashboard-side-flow .month-close-history-controls {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.manager-dashboard-side-flow .month-close-history-order { grid-column:1 / -1; }
.manager-dashboard-side-flow .month-close-history-controls button { justify-self:start; }
.manager-dashboard-side-flow .month-close-history-table th:first-child,
.manager-dashboard-side-flow .month-close-history-table td:first-child {
  width: 42%;
}
.manager-dashboard-side-flow .month-close-history-table th:nth-child(4),
.manager-dashboard-side-flow .month-close-history-table td:nth-child(4) {
  width: 58%;
}
.manager-dashboard-side-flow .action-grid {
  grid-template-columns: 1fr;
}
.manager-dashboard-page .legal-task-cabinet-summary {
  justify-content: flex-start;
}
.manager-dashboard-page table {
  font-size: 13px;
}
@media (max-width: 1100px) {
  .manager-dashboard-overview,
  .manager-dashboard-layout {
    grid-template-columns: 1fr;
  }
  .manager-dashboard-side-flow {
    order: -1;
  }
  .manager-dashboard-stats-card .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .manager-dashboard-title-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .manager-dashboard-jump-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .manager-dashboard-jump-links .button {
    width: 100%;
    text-align: center;
  }
  .manager-dashboard-page .panel {
    padding: 14px;
  }
  .manager-dashboard-page .action-grid,
  .manager-dashboard-stats-card .stats-grid {
    grid-template-columns: 1fr;
  }
  .manager-dashboard-page .learning-route-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .learning-route-summary {
    width: 100%;
    grid-template-columns: auto 1fr auto 1fr;
  }
  .learning-route-disclosure > summary {
    align-items: flex-start;
  }
  .learning-route-disclosure > summary small {
    white-space: normal;
  }
}
.legal-task-cabinet-panel.has-active-tasks {
  border-left: 5px solid var(--warn);
}
.legal-task-cabinet-panel.has-urgent-tasks {
  border-left-color: var(--bad);
  box-shadow: 0 14px 30px rgba(184, 57, 43, .12);
}
.legal-task-cabinet-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.legal-import-lifecycle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.legal-import-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.legal-import-source-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.legal-import-source-card:has(input:checked) {
  border-color: var(--brand);
  box-shadow: inset 4px 0 0 var(--brand);
  background: #f7fbff;
}
.legal-import-source-card strong {
  color: var(--brand);
}
.legal-import-source-card span {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
}
.legal-import-review-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.legal-import-alias-list,
.legal-import-problem-list {
  display: grid;
  gap: 10px;
}
.legal-import-alias-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.4fr) auto;
  gap: 12px;
  align-items: end;
  padding: 10px 12px;
  border-left: 4px solid var(--warn);
  background: #fffaf0;
}
.legal-import-alias-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.legal-import-alias-row > div .muted {
  flex-basis: 100%;
  font-size: 12px;
}
.legal-import-problem-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  background: #fff;
}
.legal-import-problem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.legal-import-problem-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legal-import-skip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.legal-import-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}
.legal-import-technical-report {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.legal-import-technical-report summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 700;
}
@media (max-width: 1100px) {
  .legal-import-edit-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .legal-import-alias-row {
    grid-template-columns: 1fr 1fr;
  }
  .legal-import-alias-row .button {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 680px) {
  .legal-import-edit-grid,
  .legal-import-alias-row {
    grid-template-columns: 1fr;
  }
  .legal-import-alias-row .button {
    grid-column: 1;
  }
  .legal-import-problem-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
.testing-zone { border-left: 5px solid var(--good); }
.learning-zone { border-left: 5px solid var(--brand-3); }
/* Primary tile: filled brand background for the main call-to-action */
.action-tile.primary {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-left: 4px solid var(--brand-3);
  box-shadow: var(--shadow);
}
.action-tile.primary .action-tile-title { color: #fff; }
.action-tile.primary .action-tile-sub   { color: rgba(255,255,255,.78); }
.action-tile.primary:hover {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
/* Buttons styled as tiles need their default <button> padding/border reset */
button.action-tile {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-3);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
button.action-tile.primary { border-color: var(--brand); border-left-color: var(--brand-3); }
@media (max-width: 820px) {
  .action-grid { grid-template-columns: 1fr; }
  .action-tile { padding: 14px; }
  .forbidden-rule-card {
    grid-template-columns: 1fr;
  }
  .route-progress-head {
    align-items: stretch;
    flex-direction: column;
  }
  .route-progress-head strong {
    font-size: 28px;
  }
  .certificate-route-reveal { grid-template-columns: 1fr; }
  .certificate-route-card summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .certificate-route-card.is-locked { min-height: 220px; }
  .next-step-panel {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .next-step-button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .next-step-dismiss {
    grid-column: 3;
    grid-row: 1;
  }
  .onboarding-reading-hero { flex-direction: column; }
  .onboarding-resource-stack { align-items: stretch; }
}

.training-material-link {
  align-self: flex-start;
  margin-top: 8px;
}

.onboarding-page {
  display: grid;
  gap: 18px;
}
.onboarding-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid #d8e2f1;
  border-left: 6px solid var(--brand-3);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 58%, #eef7f1 100%);
  box-shadow: var(--shadow);
}
.onboarding-hero-panel.os {
  border-left-color: var(--good);
  background: linear-gradient(135deg, #ffffff 0%, #f5fbf7 58%, #f4f1ff 100%);
}
.onboarding-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.onboarding-hero-copy h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  color: var(--brand);
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}
.onboarding-hero-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 26px;
}
.onboarding-hero-copy p {
  max-width: 760px;
  margin: 0;
  color: #4d5a70;
  font-size: 16px;
  line-height: 1.55;
}
.onboarding-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.onboarding-presentation-button,
a.button.onboarding-presentation-button,
a.button.onboarding-presentation-button:visited {
  border: 1px solid #ef9f28;
  background: linear-gradient(135deg, #ffb13d 0%, #f07a2a 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(240, 122, 42, .28);
}
.onboarding-presentation-button:hover,
a.button.onboarding-presentation-button:hover {
  border-color: #df641b;
  background: linear-gradient(135deg, #ffc05a 0%, #df641b 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(240, 122, 42, .34);
}
.onboarding-presentation-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 120px;
  padding: 18px;
  border: 1px solid #c8d8ee;
  border-left: 5px solid var(--brand-3);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.onboarding-presentation-card:hover {
  border-color: var(--brand-3);
  box-shadow: var(--shadow-lg);
}
.onboarding-presentation-card.static {
  pointer-events: none;
}
.onboarding-presentation-card b {
  display: block;
  color: var(--brand);
  font-size: 18px;
  margin-bottom: 4px;
}
.onboarding-presentation-card small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.onboarding-presentation-card.full-material-card {
  border-color: #f4b763;
  border-left-color: #f07a2a;
  background: linear-gradient(135deg, #fffaf0 0%, #fff4de 100%);
}
.onboarding-presentation-card.full-material-card:hover {
  border-color: #df641b;
  background: linear-gradient(135deg, #fff7e6 0%, #ffe7bf 100%);
}
.onboarding-presentation-card.full-material-card .onboarding-resource-icon {
  background: #fff;
  box-shadow: 0 10px 22px rgba(240, 122, 42, .18);
}
.onboarding-presentation-card.full-material-card b {
  color: #9a4a0f;
}
.full-material-panel {
  margin: 16px 0;
}
.full-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.onboarding-section-head.compact {
  margin-bottom: 10px;
}
.onboarding-section-head.compact h2 {
  font-size: 22px;
  margin: 4px 0 0;
}
.material-completion-hint {
  align-self: center;
  padding: 10px 12px;
  border: 1px solid #f4b763;
  border-radius: 8px;
  background: #fff7e6;
  color: #9a4a0f;
  font-weight: 700;
}
.material-viewer-page {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
}
.material-viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow);
}
.material-viewer-top .badge {
  display: none;
}
.material-viewer-top h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
}
.material-file-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.material-viewer-top .toolbar {
  gap: 6px;
}
.material-viewer-top .button,
.material-viewer-top button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
}
.material-video-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  box-shadow: none;
}
.material-video-title {
  flex: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.material-video-list {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}
.material-video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--brand);
  box-shadow: none;
}
.material-video-link:hover {
  color: var(--brand-3);
  background: #fff;
  border-color: #c8d3e5;
}
.material-video-link b {
  font-size: 13px;
  white-space: nowrap;
}
.material-video-link small {
  opacity: .9;
  font-size: 12px;
  white-space: nowrap;
}
.material-viewer-shell {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.material-fullscreen-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: var(--radius);
  background: var(--brand-3);
  color: var(--brand);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(5,29,94,.24);
}
.material-fullscreen-button:hover {
  background: #ffb733;
  color: var(--brand);
  box-shadow: 0 12px 34px rgba(5,29,94,.30);
}
.material-frame-fallback {
  position: absolute;
  left: 14px;
  right: 220px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  padding: 10px 12px;
  border: 1px solid #b8d4ff;
  border-left: 5px solid var(--brand-2);
  border-radius: var(--radius);
  background: rgba(255,255,255,.96);
  color: var(--brand);
  box-shadow: 0 12px 34px rgba(5,29,94,.18);
}
.material-frame-fallback[hidden] {
  display: none;
}
.material-frame-fallback b {
  flex: none;
}
.material-frame-fallback span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.material-frame-fallback .button {
  flex: none;
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}
.material-exit-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: var(--radius);
  background: var(--bad);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(180,35,24,.24);
}
.material-exit-button:visited {
  color: #fff;
}
.material-exit-button:hover {
  background: #8f1d14;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(180,35,24,.30);
}
.material-loader {
  position: absolute;
  inset: 1px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 7px;
  background: #f8fbff;
  color: var(--brand);
  text-align: center;
  transition: opacity .22s ease, visibility .22s ease;
}
.material-loader b {
  font-size: 16px;
}
.material-loader span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.material-loader.is-soft {
  background: rgba(248,251,255,.86);
}
.material-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.material-viewer-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.personal-data-watermarked {
  height: min(76vh, 860px);
}
.personal-data-form {
  display: grid;
  gap: 16px;
}
.personal-data-consent-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 16px;
  border: 1px solid #cdd9e8;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  box-shadow: 0 10px 24px rgba(23, 44, 77, .08);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.personal-data-consent-card:hover {
  border-color: #8fb3dc;
  box-shadow: 0 14px 30px rgba(23, 44, 77, .12);
}
.personal-data-check-input,
.workplace-mobile-games-radio,
.avatar-preset-card input {
  /* Keep native controls focusable without inheriting input { width: 100% }. */
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.personal-data-check-mark {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border: 2px solid #9fb1c7;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.personal-data-check-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 8px;
  height: 15px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.85);
  transition: opacity .16s ease, transform .16s ease;
}
.personal-data-check-input:focus-visible + .personal-data-check-mark {
  outline: 3px solid rgba(36, 115, 184, .25);
  outline-offset: 3px;
}
.personal-data-check-input:checked + .personal-data-check-mark {
  border-color: #0b7a53;
  background: #0b7a53;
  box-shadow: inset 0 0 0 3px #0b7a53, 0 8px 18px rgba(11, 122, 83, .22);
  transform: translateY(-1px);
}
.personal-data-check-input:checked + .personal-data-check-mark::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.personal-data-consent-card:has(.personal-data-check-input:checked) {
  border-color: #8bc6a8;
  background: linear-gradient(180deg, #fbfffd 0%, #f1fbf5 100%);
}
.workplace-mobile-games-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.workplace-mobile-games-illustration {
  width: min(100%, 580px);
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid #cdd9e8;
  border-radius: 8px;
  background: #e6f4f7;
}
.workplace-mobile-games-illustration img {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  object-position: center;
}
.workplace-mobile-games-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 72px;
  margin: 0;
  padding: 12px;
  border: 1px solid #cdd9e8;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.35;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.workplace-mobile-games-option:hover {
  border-color: #8fb3dc;
  box-shadow: 0 6px 16px rgba(23, 44, 77, .09);
}
.workplace-mobile-games-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid #9fb1c7;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.workplace-mobile-games-copy {
  font-size: 14px;
  font-weight: 700;
}
.workplace-mobile-games-radio:focus-visible + .workplace-mobile-games-mark {
  outline: 3px solid rgba(36, 115, 184, .25);
  outline-offset: 3px;
}
.workplace-mobile-games-radio:checked + .workplace-mobile-games-mark {
  border-color: #0b7a53;
  background: #0b7a53;
  box-shadow: inset 0 0 0 3px #fff;
}
.workplace-mobile-games-option:has(.workplace-mobile-games-radio:checked) {
  border-color: #72b995;
  background: #f1fbf5;
  box-shadow: 0 6px 16px rgba(11, 122, 83, .12);
}
@media (max-width: 720px) {
  .workplace-mobile-games-options {
    grid-template-columns: 1fr;
  }
  .workplace-mobile-games-illustration img {
    max-height: 180px;
  }
}
.personal-data-check-copy {
  display: grid;
  gap: 6px;
  color: var(--ink);
  line-height: 1.45;
}
.personal-data-check-copy b {
  font-size: 16px;
}
.personal-data-check-copy small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.personal-data-code-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid #d7e1ed;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-weight: 800;
  white-space: nowrap;
}
.material-text-viewer {
  white-space: pre-wrap;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.65;
  height: 100%;
  overflow: auto;
  user-select: text;
}
@media (max-width: 720px) {
  .material-viewer-page {
    padding: 3px;
    gap: 3px;
  }
  .material-viewer-top {
    align-items: stretch;
    flex-direction: column;
    min-height: auto;
  }
  .material-viewer-top .toolbar {
    width: 100%;
  }
  .material-viewer-top .toolbar .button,
  .material-viewer-top .toolbar button {
    flex: 1 1 0;
    text-align: center;
  }
  .material-viewer-top h1 {
    font-size: 15px;
  }
  .material-fullscreen-button {
    top: 10px;
    right: 10px;
    min-height: 44px;
    padding: 10px 13px;
    font-size: 14px;
  }
  .material-frame-fallback {
    left: 10px;
    right: 10px;
    bottom: 64px;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    max-width: none;
  }
  .material-frame-fallback .button {
    width: 100%;
    justify-content: center;
  }
  .material-exit-button {
    right: 10px;
    bottom: 10px;
    min-height: 44px;
    padding: 10px 13px;
    font-size: 14px;
  }
  .material-video-panel {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }
}
.onboarding-route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.onboarding-route-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}
.onboarding-route-step {
  min-width: 0;
  min-height: 92px;
  padding: 14px;
  border: 1px solid #d8e2f1;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.onboarding-route-step:nth-child(1) { border-left: 5px solid #2f80ed; }
.onboarding-route-step:nth-child(2) { border-left: 5px solid #8b5cf6; }
.onboarding-route-step:nth-child(3) { border-left: 5px solid #18a058; }
.onboarding-route-step:nth-child(4) { border-left: 5px solid #f59e0b; }
.onboarding-route-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  line-height: 1;
  border-radius: 8px;
  background: #f4f7fd;
  color: var(--brand);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 10px;
}
.onboarding-route-step.done .onboarding-route-icon {
  background: #eaf7f0;
  color: var(--good);
}
.onboarding-route-step.current {
  border-color: #9ec5fe;
  background: #f7fbff;
}
.onboarding-route-step.current .onboarding-route-icon {
  background: #eaf3ff;
  color: #1d62b7;
}
.onboarding-route-step.todo {
  background: #fbfcfe;
}
.onboarding-route-step em {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.onboarding-route-step b {
  display: block;
  color: var(--brand);
  font-size: 14px;
  margin-bottom: 3px;
}
.onboarding-route-step small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.onboarding-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}
.onboarding-section-head h2 {
  margin: 6px 0 0;
  color: var(--brand);
}
.onboarding-reading-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.onboarding-reading-hero p { margin: 8px 0 0; }
.onboarding-resource-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: min(360px, 100%);
}
.onboarding-resource-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-3);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.onboarding-resource-link:hover {
  border-color: var(--brand-3);
  box-shadow: var(--shadow-lg);
}
.onboarding-resource-link b {
  display: block;
  color: var(--brand);
  font-size: 15px;
}
.onboarding-resource-link span span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
.onboarding-resource-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #edf3ff;
  color: var(--brand);
  font-size: 18px;
  font-weight: 800;
}
.onboarding-lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.onboarding-lesson-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid #d8e2f1;
  border-left: 5px solid var(--brand-3);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.onboarding-lesson-card.theme-1 { border-left-color: #2f80ed; background: #f8fbff; }
.onboarding-lesson-card.theme-2 { border-left-color: #18a058; background: #f7fcf9; }
.onboarding-lesson-card.theme-3 { border-left-color: #8b5cf6; background: #fbf9ff; }
.onboarding-lesson-card.theme-4 { border-left-color: #f59e0b; background: #fffaf1; }
.onboarding-lesson-card.theme-5 { border-left-color: #ef4444; background: #fff7f7; }
.onboarding-lesson-card.theme-6 { border-left-color: #0891b2; background: #f2fbfd; }
.onboarding-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.onboarding-card-top > .badge {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}
.onboarding-card-meta {
  display: inline-flex;
  align-items: center;
  flex: 1 1 150px;
  gap: 8px;
  min-width: 0;
}
.onboarding-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  line-height: 1;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 4px rgba(5,29,94,.12);
  font-size: 22px;
}
.onboarding-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  line-height: 1;
  border-radius: 8px;
  background: #f4f7fd;
  color: var(--brand);
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.onboarding-lesson-card.theme-1 .onboarding-step { background: #eaf3ff; color: #1d62b7; }
.onboarding-lesson-card.theme-2 .onboarding-step { background: #e8f7ef; color: #137947; }
.onboarding-lesson-card.theme-3 .onboarding-step { background: #f1ebff; color: #6541c7; }
.onboarding-lesson-card.theme-4 .onboarding-step { background: #fff1d7; color: #9a5d00; }
.onboarding-lesson-card.theme-5 .onboarding-step { background: #ffe8e8; color: #b42318; }
.onboarding-lesson-card.theme-6 .onboarding-step { background: #def7fb; color: #09677e; }
.onboarding-lesson-card h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
}
.onboarding-lesson-card ul,
.onboarding-bullet-list {
  margin: 0;
  padding-left: 18px;
}
.onboarding-lesson-card li,
.onboarding-bullet-list li {
  margin: 7px 0;
  line-height: 1.5;
}
.onboarding-next-step,
.onboarding-gate {
  border-left: 5px solid var(--brand-3);
}
.onboarding-next-step.ok { border-left-color: var(--good); }
.onboarding-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid #d8e2f1;
  border-left: 5px solid var(--brand-3);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.onboarding-cta.ok {
  border-left-color: var(--good);
  background: #f7fcf9;
}
.onboarding-cta b {
  display: block;
  color: var(--brand);
  margin-bottom: 4px;
}
.onboarding-cta span {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}
.onboarding-complete-form {
  margin: 0;
  flex-shrink: 0;
}
.onboarding-gate {
  padding-left: 14px;
}
.onboarding-gate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.onboarding-test-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.onboarding-test-form { margin: 0; }
.onboarding-test-disabled {
  cursor: pointer;
  background: #f7f8fb;
  border-color: #dce3ef;
  border-left-color: #b8c2d4;
  color: var(--muted);
  box-shadow: none;
  user-select: none;
}
.onboarding-test-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #dce3ef;
}
.onboarding-test-disabled:focus-visible {
  outline: 3px solid rgba(36, 99, 235, .24);
  outline-offset: 3px;
}
.onboarding-test-disabled .action-tile-title { color: #687487; }
.onboarding-test-disabled .action-tile-icon { opacity: .7; }
.disabled-tile-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1200;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 16px;
  border-radius: var(--radius);
  background: #162033;
  color: #fff;
  box-shadow: 0 18px 42px rgba(14, 24, 42, .28);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .18s ease, transform .18s ease;
}
.disabled-tile-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 640px) {
  .disabled-tile-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    transform: translateY(14px);
  }
  .disabled-tile-toast.is-visible { transform: translateY(0); }
}
.onboarding-active-test {
  display: grid;
  gap: 12px;
}
.learning-test-action {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.test-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.repeat-attempt-form {
  margin: 0;
}
.repeat-attempt-button {
  white-space: nowrap;
}

.tests-compact,
.tests-status-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.tests-compact h2,
.tests-status-panel h2 { margin-top:0; }
.tests-compact p,
.tests-status-panel p { margin:6px 0 0; }
.tests-status-panel > div:first-child { min-width:0; }
.tests-status-panel #test-start {
  flex:0 0 min(360px, 100%);
  width:min(360px, 100%);
}
.tests-status-panel #test-start form { margin-top:0 !important; }
.tests-status-panel #test-start .action-grid { margin-bottom:0; }
.onboarding-tests-panel {
  align-items: stretch;
  flex-direction: column;
}
.onboarding-tests-panel #test-start {
  flex: 1 1 auto;
  width: 100%;
}
.onboarding-tests-panel .onboarding-test-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 0;
}
@media (max-width: 820px) {
  .onboarding-hero-panel { grid-template-columns: 1fr; padding: 20px; }
  .onboarding-hero-copy h1 { font-size: 28px; }
  .onboarding-hero-actions { width: 100%; }
  .onboarding-hero-actions .button { flex: 1 1 160px; text-align: center; }
  .onboarding-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onboarding-section-head { align-items: flex-start; flex-direction: column; }
  .onboarding-cta { align-items: stretch; flex-direction: column; }
  .onboarding-complete-form button { width: 100%; }
  .tests-compact,
  .tests-status-panel {
    align-items:stretch;
    flex-direction:column;
  }
  .tests-status-panel #test-start { width:100%; }
  .onboarding-gate-head { flex-direction: column; }
}

@media (max-width: 420px) {
  .onboarding-route { grid-template-columns: 1fr; }
  .onboarding-lesson-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Program switcher chips (lightweight replacement of program_tabs buttons) --- */
.program-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.program-switch .label { font-weight: 600; color: var(--muted); margin-right: 4px; }
.program-switch .nav-chip { min-height: 28px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.nav-chip.active {
  background: var(--brand-orange);
  color: var(--brand);
  border-color: var(--brand-orange);
}
.nav-chip.active:hover {
  background: var(--brand-orange);
  color: var(--brand);
}
.nav-chip.chat-nav-unread {
  background:#fff7e8;
  border-color:#f0c36d;
  color:var(--warn);
}
.nav-chip.disabled {
  cursor: default;
  background: #f3f6fa;
  border-color: #d7e0ec;
  color: #8190a5;
  box-shadow: none;
}
.nav-chip.disabled:hover {
  background: #f3f6fa;
  color: #8190a5;
}

/* --- Nav user info: stack name on top, role + email below in muted small text --- */
.nav-user {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
}
.nav-user b { color: var(--brand); font-weight: 600; font-size: 14px; }
.nav-user .small { color: var(--muted); font-size: 12px; }
.nav-avatar-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex:none;
}
.user-avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  background:#edf3fb;
  border:2px solid #fff;
  box-shadow:0 4px 12px rgba(5,29,94,.12);
  color:var(--brand);
  font-weight:800;
}
.nav-avatar-img {
  width:38px;
  height:38px;
  font-size:13px;
}
.avatar-large {
  width:92px;
  height:92px;
  font-size:28px;
}
.rating-manager-cell {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
}
.rating-avatar {
  width:38px;
  height:38px;
  font-size:13px;
  flex:none;
}
.avatar-profile-row {
  display:flex;
  align-items:center;
  gap:16px;
  margin:10px 0 18px;
}

.legal-document-review-input,
.legal-document-review-add-form input,
.legal-document-review-add-form select,
.legal-document-review-add-form textarea {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.legal-document-review-add-form {
  display:grid;
  grid-template-columns:minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(150px, .8fr) 90px minmax(260px, 1.4fr) auto;
  gap:10px;
  align-items:start;
  margin-top:14px;
}
.legal-document-review-text {
  max-height:420px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media (max-width: 980px) {
  .legal-document-review-add-form {
    grid-template-columns:1fr;
  }
}

.ops-maintenance-panel textarea {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.operator-status-page {
  max-width:760px;
}
.operator-status-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.operator-status-card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  min-height:150px;
  padding:16px;
  border:1px solid #dce5f0;
  border-left-width:6px;
  border-radius:8px;
  background:#fff;
  box-shadow:0 6px 18px rgba(5,29,94,.06);
}
.operator-status-card.ok { border-left-color:var(--ok); }
.operator-status-card.warn { border-left-color:var(--warn); }
.operator-status-card.bad { border-left-color:var(--bad); }
.operator-status-card strong {
  display:block;
  margin:5px 0 8px;
  font-size:24px;
  line-height:1.15;
  color:var(--brand);
  overflow-wrap:anywhere;
}
.operator-status-title {
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
}
.operator-status-card p {
  margin:8px 0 0;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.maintenance-page {
  min-height:60vh;
  display:grid;
  place-items:center;
}
.maintenance-box {
  max-width:620px;
  padding:30px;
  border:1px solid #dce5f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 24px rgba(5,29,94,.08);
}

/* --- Unified operational shell: persistent left navigation --- */
body.app-has-sidebar {
  min-width: 0;
  background: #f4f7fb;
}
.app-has-sidebar .app-frame {
  min-width: 0;
}
.app-has-sidebar {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}
.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 70;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #06235e 0%, #061d50 100%);
  color: #dbe8ff;
  box-shadow: 8px 0 24px rgba(5, 29, 94, .10);
}
@media (min-width: 1041px) {
  /* The sidebar scrolls internally. A sticky scroll container follows itself,
     not the page, so long pages used to leave the navigation behind. */
  .app-has-sidebar .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 244px;
    height: 100dvh;
    max-height: 100dvh;
  }
  .app-has-sidebar .app-frame { grid-column: 2; }
}
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  min-height: 88px;
  padding: 19px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.sidebar-brand img {
  display: block;
  width: 142px;
  max-width: 100%;
  height: auto;
}
.sidebar-brand-caption {
  color: rgba(222,234,255,.82);
  font-size: 11px;
  line-height: 1.3;
}
.sidebar-section-label {
  padding: 19px 22px 9px;
  color: rgba(222, 234, 255, .58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-sidebar .curator-nav,
.app-sidebar .sidebar-nav,
.app-sidebar .desktop-nav-row,
.app-sidebar .curator-links {
  display: block;
  width: 100%;
}
.app-sidebar .curator-nav {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding: 0 10px 18px;
  border: 0;
  background: transparent;
}
.app-sidebar .nav-chip,
.app-sidebar .nav-group-summary {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  margin: 1px 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #dbe8ff;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}
.app-sidebar .nav-chip:hover,
.app-sidebar .nav-group-summary:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.app-sidebar .nav-chip.is-active {
  border-color: rgba(158, 208, 255, .9);
  background: #0b4d9f;
  color: #fff;
  box-shadow: inset 3px 0 0 #ffad20;
}
.app-sidebar .nav-icon {
  display: inline-flex;
  width: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: #9ec8ff;
  font-size: 17px;
  font-weight: 700;
}
.app-sidebar .nav-label { min-width: 0; overflow-wrap: anywhere; }
.app-sidebar .nav-badge {
  display:inline-flex;
  min-width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  padding:0 6px;
  border-radius:999px;
  background:#B42318;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.app-sidebar .nav-group-summary--with-badge::after { margin-left:8px; }
.app-sidebar .nav-group { display: block; width: 100%; }
.app-sidebar .nav-group summary { list-style: none; }
.app-sidebar .nav-group summary::-webkit-details-marker { display: none; }
.app-sidebar .nav-group-summary::after {
  margin-left: auto;
  border-color: currentColor;
}
.app-sidebar .nav-group[open] .nav-group-summary {
  border-color: transparent;
  background: rgba(255,255,255,.07);
  color: #fff;
}
.app-sidebar .nav-group-menu {
  position: static;
  display: grid;
  gap: 0;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 2px 0 6px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
}
.app-sidebar .nav-group-menu .nav-chip {
  min-height: 36px;
  padding: 7px 10px;
  color: rgba(224,235,255,.86);
  font-size: 13px;
}
.app-sidebar .nav-group-menu .nav-icon { font-size: 13px; }
@media (min-width: 1041px) {
  .app-sidebar .nav-chip,
  .app-sidebar .nav-group-summary {
    gap: 0;
  }
  .app-sidebar .nav-icon {
    display: none;
  }
}
.sidebar-version {
  margin: auto 20px 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(222,234,255,.48);
  font-size: 11px;
}
.app-topbar.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 14px;
  padding: 10px 26px;
  border-bottom: 1px solid #e1e8f2;
  background: rgba(255,255,255,.96);
  color: var(--ink);
  box-shadow: 0 1px 5px rgba(5,29,94,.04);
  backdrop-filter: blur(12px);
}
.app-topbar .nav-right { margin-left: auto; color: var(--ink); }
.app-topbar .nav-user { min-width: 0; text-align: left; }
.app-topbar .nav-user b { color: var(--ink); }
.app-topbar .nav-profile-link,
.app-topbar .nav-exit {
  border-color: #dce5f0;
  color: var(--brand);
}
.app-topbar .nav-profile-link:hover,
.app-topbar .nav-exit:hover { background: #f1f6fd; color: var(--brand); }
.topbar-page-title {
  min-width: 0;
  overflow: hidden;
  color: var(--brand);
  font-family: Rubik, Inter, sans-serif;
  font-size: 18px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sidebar-toggle,
.sidebar-scrim { display: none; }
.app-has-sidebar .wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 28px 48px;
}
.app-has-sidebar .wrap:has(.legal-tasks-page),
.app-has-sidebar .wrap:has(.legal-workspace-page),
.app-has-sidebar .wrap:has(.legal-bitrix-page),
.app-has-sidebar .wrap:has(.legal-casebook-page),
.app-has-sidebar .wrap:has(.o2-page),
.app-has-sidebar .wrap:has(.legal-document-page) { max-width: none; }
.app-has-sidebar .panel {
  border-color: #dfe7f1;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(5,29,94,.045);
}
.app-has-sidebar .panel > h1:first-child,
.app-has-sidebar .panel > h2:first-child { margin-top: 0; }
.app-has-sidebar h1 { font-size: clamp(24px, 2vw, 30px); letter-spacing: -.015em; }
.app-has-sidebar .grid { gap: 12px; }
.app-has-sidebar .stat,
.app-has-sidebar .home-summary-card,
.app-has-sidebar .kpi-card {
  border-color: #dfe7f1;
  border-radius: 9px;
  box-shadow: none;
}
.app-has-sidebar table { border-color: #dfe7f1; }
.app-has-sidebar table th { background: #f7f9fc; color: #55627a; }
@media (max-width: 1040px) {
  .app-has-sidebar { display: block; }
  .app-sidebar {
    position: fixed;
    left: 0;
    width: min(82vw, 310px);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    border: 0;
    background: rgba(5, 18, 51, .38);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .sidebar-toggle {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e3f0;
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    cursor: pointer;
    font-size: 20px;
  }
  .app-topbar.nav { padding: 9px 16px; }
  .app-has-sidebar .wrap { padding: 20px 18px 40px; }
}
@media (max-width: 700px) {
  .app-topbar .nav-profile-link { display: none; }
  .app-topbar .nav-user { display: none; }
  .app-topbar .nav-right { gap: 8px; }
  .app-topbar .nav-exit { padding: 7px 9px; font-size: 13px; }
  .app-has-sidebar .wrap { padding: 16px 10px 34px; }
  .app-has-sidebar .panel { padding: 14px; }
}
@media print {
  .app-sidebar,
  .app-topbar,
  .sidebar-scrim { display: none !important; }
  .app-has-sidebar { display: block; }
  .app-has-sidebar .wrap { padding: 0; }
}

/* Expenses and sales interviews: these pages shipped with class names that had
   no styles at all, so their hero, button rows and forms rendered as bare
   inline text.  Base styles below are additive - nothing else in the platform
   uses these selectors. */
.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sales-plan-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.sales-plan-hero > div { min-width: 0; }
.sales-plan-hero h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; }
.sales-plan-hero p { margin: 0; color: var(--muted); }
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.sales-interview-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Fields line up by their labels.  Bottom alignment made every field in a row
     depend on the tallest one, so a neighbour changing height shifted the
     others - a field could visibly float up while being used. */
  align-items: start;
  gap: 14px 16px;
  margin: 0;
}
.sales-interview-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.sales-interview-form label.wide { grid-column: 1 / -1; }
.sales-interview-form .input,
.sales-interview-form input,
.sales-interview-form select,
.sales-interview-form textarea { width: 100%; color: var(--ink); font-weight: 400; }
.sales-interview-form button { justify-self: start; align-self: end; }

/* The general director reads the registry for one number first: the total. */
.expense-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.expense-total-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.expense-total-value { color: var(--brand); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.expense-amount-hero {
  margin: 2px 0 8px !important;
  color: var(--brand) !important;
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.expense-amount-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
table tfoot th {
  background: #f7faff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.expense-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.expense-action .input { flex: 1 1 260px; min-width: 0; }
.expense-pagination { margin-top: 14px; }
@media (max-width: 700px) {
  .sales-plan-hero { padding: 16px; }
  .sales-plan-hero h1 { font-size: 22px; }
  .expense-total { align-items: flex-start; }
  .expense-amount-hero { font-size: 26px; }
  .button-row > .button { flex: 1 1 100%; text-align: center; }
}
.expense-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.expense-checkbox input { width: auto; }
.expense-by-category { margin-top: 16px; }
.expense-by-category summary { cursor: pointer; }
.expense-by-category .table-scroll { margin-top: 12px; }
.expense-history { margin: 0; padding-left: 18px; }
.expense-history li { margin-bottom: 10px; }
.panel.ok {
  border-left: 4px solid var(--good);
  background: #f4fbf7;
}
.expense-next-step {
  border-left: 4px solid var(--brand-orange);
  background: var(--brand-orange-tint);
}

.task-center { display: grid; gap: 8px; }
.task-overdue-notice, .home-task-overdue-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 14px;
  padding: 9px 11px;
  border: 1px solid #efc1bc;
  border-left: 4px solid var(--bad);
  border-radius: 8px;
  background: #fff6f5;
  color: var(--ink);
  font-size: 13px;
}
.home-task-overdue-notice { margin: 0 0 12px; }
.task-overdue-notice b, .home-task-overdue-notice b { color: var(--bad); }
.task-overdue-notice a, .home-task-overdue-notice a { color: var(--brand-2); white-space: nowrap; }
.task-direction-tabs { display: flex; gap: 3px; overflow-x: auto; border-bottom: 1px solid var(--line, #e4e8ed); }
.task-direction-tabs a { flex: 0 0 auto; padding: 7px 10px; border-radius: 7px 7px 0 0; color: var(--muted, #687486); text-decoration: none; font-size: 13px; font-weight: 650; }
.task-direction-tabs a[aria-current="page"] { color: var(--brand); background: #edf3ff; box-shadow: inset 0 -2px var(--brand-orange); }
.task-data-warning {
  padding: 9px 12px;
  border: 1px solid #ecd4a3;
  border-radius: 12px;
  background: #fff9eb;
  color: #664b16;
  font-size: 13px;
}
.task-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.task-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--line, #e4e8ed);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: inherit;
  text-decoration: none;
}
.task-summary-card:hover, .task-summary-card:focus-visible, .task-summary-card[aria-current] {
  border-color: var(--brand-3);
  box-shadow: 0 0 0 2px rgba(18, 60, 156, .16);
}
.task-filter-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0; }
.task-filter-heading h2 { margin: 0; overflow-wrap: anywhere; }
.task-filter-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 700; }
.task-filter-count { color: var(--muted, #687486); font-size: 12px; font-weight: 500; }
.task-filter-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; align-items: end; }
.task-filter-form label { display: grid; gap: 6px; min-width: 0; }
.task-filter-form select, .task-filter-form input { width: 100%; min-width: 0; }
.task-filter-search { grid-column: span 2; }
.task-filter-team { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 8px !important; }
.task-filter-team input { width: auto !important; }
.task-filter-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.task-summary-card span { color: var(--muted, #687486); font-size: 11px; line-height: 1.2; }
.task-summary-card b { font-size: 18px; line-height: 1; }
.task-summary-card--danger b { color: #a73535; }
.task-summary-card--warning b { color: #9a6400; }
.task-summary-card--review b { color: var(--brand-3); }
.task-create-panel > summary, .task-recipient-panel > summary, .task-workload > summary { cursor: pointer; font-weight: 700; }
.task-recipient-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-recipient-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #edf3ff; color: var(--brand); font-size: 12px; }
.task-recipient-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.task-recipient-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-recipient-row form { margin: 0; }
.task-recipient-add { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.task-recipient-add label { display: grid; gap: 6px; min-width: min(280px, 100%); }
.task-assignee-picker { display: grid; gap: 6px; min-width: 0; }
.task-assignee-picker > label { display: grid; gap: 6px; }
.task-assignee-picker input[type='search'], .task-assignee-picker select { width: 100%; min-width: 0; }
.task-assignee-selected { color: var(--muted, #687486); }
.task-assignee-empty { color: #8b5700; }
.task-create-form { margin-top: 10px; }
.task-create-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .42fr); gap: 9px 12px; align-items: end; }
.task-create-assignee, .task-create-description, .task-create-submit { grid-column: 1 / -1; }
.task-create-title, .task-create-due { min-width: 0; }
.task-create-submit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-scope-help { margin: 7px 0 0; }
.task-scope-help > summary { cursor: pointer; color: var(--muted, #687486); font-size: 12px; }
.task-scope-help .task-scope-note { margin: 6px 0 0; }
.task-create-form label, .task-action-form label { display: grid; gap: 6px; }
.task-create-form textarea, .task-action-form textarea { min-height: 62px; resize: vertical; }
.task-form-hint { margin: 0; color: var(--muted, #687486); font-size: 13px; }
.task-scope-note { margin: 10px 0; color: var(--muted, #687486); font-size: 13px; }
.task-list { display: grid; gap: 9px; }
.task-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line, #e4e8ed);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.task-card--overdue { border-left: 4px solid #c34141; }
.task-escalation { margin: 10px 0 0; color: #8a4b08; font-size: 13px; font-weight: 600; }
.task-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.task-card-head h3 { margin: 0 0 5px; font-size: 16px; }
.task-status { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #edf1f5; color: #435166; font-size: 12px; }
.task-status--awaiting_review { background: #edf3ff; color: var(--brand); }
.task-status--returned { background: #fff2dc; color: #8b5700; }
.task-status--done { background: #e6f5ec; color: #267346; }
.task-status--cancelled { background: #f0f0f0; color: #6d737a; }
.task-due { flex: 0 0 auto; color: var(--muted, #687486); font-size: 13px; }
.task-due--overdue { color: #a73535; font-weight: 700; }
.task-description { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-participants { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted, #687486); font-size: 13px; }
.task-actions { display: grid; gap: 10px; }
.task-management-actions { border-top: 1px solid var(--line, #e4e8ed); padding-top: 7px; }
.task-management-actions > summary { cursor: pointer; color: var(--muted, #687486); font-size: 13px; font-weight: 600; }
.task-management-action-list { display: grid; gap: 10px; margin-top: 10px; }
.task-delegation-chain { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 12px; padding: 8px 10px; border: 1px solid #d5e3f5; border-radius: 8px; background: #f3f7fd; color: #344155; font-size: 12px; }
.task-delegation-chain--source { background: #f8fafd; }
.task-delegation-chain-main, .task-delegation-chain-next { display: grid; gap: 2px; min-width: 0; }
.task-delegation-chain-main b { color: #233e68; }
.task-delegation-chain-main > span, .task-delegation-chain-next small { color: var(--muted, #687486); }
.task-delegation-chain-next { text-align: right; }
.task-delegation-chain a { font-weight: 650; }
.task-delegation-chain .task-status { padding: 2px 5px; font-size: 10px; }
.task-delegate-panel { border: 1px solid #c9d9f0; border-radius: 8px; background: #f8faff; }
.task-delegate-panel > summary { position: relative; display: grid; gap: 2px; padding: 9px 30px 9px 10px; color: #234877; cursor: pointer; list-style: none; }
.task-delegate-panel > summary::-webkit-details-marker { display: none; }
.task-delegate-panel > summary::after { position: absolute; right: 11px; top: 10px; content: '▾'; font-size: 14px; }
.task-delegate-panel[open] > summary::after { transform: rotate(180deg); }
.task-delegate-panel > summary > span { font-size: 12px; font-weight: 700; }
.task-delegate-panel > summary > small { color: var(--muted, #687486); font-size: 11px; }
.task-delegate-form { display: grid; gap: 8px; padding: 9px 10px 10px; border-top: 1px solid #dbe7f5; }
.task-delegate-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .65fr); gap: 8px; }
.task-delegate-form label { display: grid; gap: 4px; min-width: 0; font-size: 11px; font-weight: 650; }
.task-delegate-form select, .task-delegate-form input, .task-delegate-form textarea { width: 100%; min-width: 0; }
.task-delegate-form textarea { min-height: 58px; resize: vertical; }
.task-delegate-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.task-delegate-footer small { flex: 1 1 175px; color: var(--muted, #687486); line-height: 1.35; }
.task-delegate-footer button { flex: 0 0 auto; }
.task-delegate-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border: 1px dashed #c9d9f0; border-radius: 8px; background: #f8faff; font-size: 11px; }
.task-delegate-empty strong { color: #234877; }
.task-delegate-empty span { color: var(--muted, #687486); }
.task-delegate-empty a { margin-left: auto; font-weight: 650; white-space: nowrap; }
@media (max-width: 520px) {
  .task-delegation-chain-next { text-align: left; }
  .task-delegate-fields { grid-template-columns: 1fr; }
  .task-delegate-footer button { width: 100%; }
}
.task-telegram-connect--linked { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 2px 0; border-top: 1px solid var(--line, #e4e8ed); color: var(--muted, #687486); font-size: 12px; }
.task-telegram-connect--linked b { color: #267346; font-size: 12px; }
.task-action-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.task-action-form label { flex: 1 1 280px; }
.task-action-form button { flex: 0 0 auto; }
.task-deadline-request summary, .task-deadline-history summary { cursor: pointer; color: var(--brand-2); font-weight: 600; }
.task-deadline-form { margin-top: 10px; }
.task-deadline-pending { margin: 0; padding: 12px; border-color: var(--line-strong); }
.task-deadline-pending p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-deadline-decisions { display: grid; gap: 9px; }
.task-deadline-history ol { display: grid; gap: 9px; margin: 10px 0 0; padding-left: 22px; }
.task-deadline-history li p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-history summary { cursor: pointer; color: var(--muted, #687486); font-size: 13px; }
.task-history ol { display: grid; gap: 9px; margin: 10px 0 0; padding-left: 22px; }
.task-history-event { padding-left: 2px; }
.task-history-event time { display: inline-block; margin-right: 7px; color: var(--muted, #687486); font-size: 12px; font-variant-numeric: tabular-nums; }
.task-history li p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-workload .table-scroll { margin-top: 12px; }
.task-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px; }
.task-pagination a { font-weight: 700; }
.task-checklist, .task-attachments { border-top: 1px solid var(--line, #e4e8ed); padding-top: 7px; }
.task-checklist summary, .task-attachments summary { cursor: pointer; color: #4d5969; font-size: 13px; font-weight: 650; }
.task-checklist summary span, .task-attachments summary span { color: var(--muted, #687486); font-weight: 500; }
.task-checklist ul, .task-attachments ul { display: grid; gap: 4px; margin: 7px 0; padding: 0; list-style: none; }
.task-checklist-item { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.task-checklist-item form { margin: 0; }
.task-checklist-toggle { min-width: 25px; min-height: 25px; padding: 0; border: 1px solid var(--line, #d8dee6); border-radius: 6px; background: #fff; }
.task-checklist-item .is-done { color: var(--muted, #687486); text-decoration: line-through; }
.task-checklist-add, .task-attachment-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; }
.task-checklist-add input { flex: 1 1 220px; min-width: 0; }
.task-attachment-upload small { flex-basis: 100%; color: var(--muted, #687486); font-size: 11px; }
.task-attachments li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
@media (max-width: 900px) {
  .task-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .task-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-filter-form { grid-template-columns: 1fr 1fr; }
  .task-filter-search, .task-filter-actions { grid-column: 1 / -1; }
  .task-create-grid { grid-template-columns: 1fr; }
  .task-create-assignee, .task-create-title, .task-create-due, .task-create-description, .task-create-submit { grid-column: 1; }
  .task-card { padding: 9px; }
  .task-card-head { display: grid; }
  .task-action-form { display: grid; }
  .task-action-form label, .task-action-form button { width: 100%; }
  .task-summary-card { min-height: 40px; padding: 7px; }
  .task-summary-card b { font-size: 17px; }
  .task-filter-form { gap: 8px; }
  .task-telegram-connect--linked { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Task center: compact hierarchy, strong scan paths, and mobile-first controls. */
.task-center { gap: 10px; min-width: 0; color: var(--ink, #233044); }
.task-center > .panel { margin: 0; padding: 12px 14px; box-shadow: 0 2px 8px #18243a0a; }
.task-direction-tabs { gap: 4px; scrollbar-width: thin; }
.task-direction-tabs a { padding: 8px 12px; border-radius: 8px 8px 0 0; white-space: nowrap; }
.task-direction-tabs a:hover { background: #f6f7fa; color: var(--ink, #233044); }
.task-direction-tabs a[aria-current="page"] { border: 1px solid var(--line, #e4e8ed); border-bottom-color: #fff; margin-bottom: -1px; color: var(--brand); background: #fff; box-shadow: inset 0 2px var(--brand-orange); }
.task-data-warning { padding: 7px 10px; border-radius: 8px; background: #fffbf2; font-size: 12px; line-height: 1.4; }
.task-summary-grid { gap: 7px; }
.task-summary-card { min-height: 48px; padding: 8px 10px; border-radius: 9px; transition: border-color .14s, background .14s, box-shadow .14s; }
.task-summary-card:hover, .task-summary-card:focus-visible { border-color: var(--brand-3); background: #f7faff; }
.task-summary-card[aria-current] { border-color: var(--brand-3); background: #edf3ff; box-shadow: inset 0 0 0 1px rgba(18, 60, 156, .16); }
.task-summary-card span { font-size: 11px; line-height: 1.25; }
.task-summary-card b { flex: 0 0 auto; font-size: 19px; font-variant-numeric: tabular-nums; }
.task-filter-panel { padding: 10px 12px !important; }
.task-filter-panel > summary { list-style-position: inside; }
.task-filter-title { display: inline-flex; align-items: center; gap: 7px; }
.task-filter-form { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.task-filter-form label { gap: 5px; font-size: 12px; font-weight: 600; }
.task-filter-heading { align-items: baseline; margin: 2px 0 0; color: var(--brand, #243c67); }
.task-filter-heading h2 { margin: 0; font-size: 18px; }
.task-result-count { color: var(--muted, #687486); font-size: 12px; font-weight: 500; white-space: nowrap; }
.task-create-panel, .task-recipient-panel, .task-workload { padding: 0 !important; overflow: clip; }
.task-create-panel > summary, .task-recipient-panel > summary, .task-workload > summary { padding: 11px 13px; list-style-position: inside; }
.task-create-panel[open] > summary, .task-recipient-panel[open] > summary, .task-workload[open] > summary { border-bottom: 1px solid var(--line, #e4e8ed); background: #fbfcfe; }
.task-create-panel > form, .task-create-panel > .task-scope-help, .task-recipient-panel > :not(summary), .task-workload > :not(summary) { margin-left: 13px; margin-right: 13px; }
.task-recipient-list { margin-top: 8px; margin-bottom: 8px; }
.task-recipient-row { padding: 7px 0; border-bottom: 1px solid #eef0f4; }
.task-recipient-add { margin-bottom: 12px; }
.task-assignee-picker { grid-template-columns: minmax(180px, .7fr) minmax(220px, 1fr); gap: 5px 10px; align-items: center; }
.task-assignee-picker > label { gap: 5px; font-size: 12px; font-weight: 600; }
.task-assignee-picker > .task-form-hint, .task-assignee-selected, .task-assignee-empty { grid-column: 1 / -1; }
.task-create-form { margin-top: 12px; margin-bottom: 13px; }
.task-create-grid { grid-template-columns: minmax(0, 1fr) minmax(180px, .36fr); gap: 10px 14px; }
.task-create-submit { gap: 12px; }
.task-create-submit button { min-width: 150px; }
.task-create-form label, .task-action-form label { gap: 5px; font-size: 12px; font-weight: 600; }
.task-create-form textarea, .task-action-form textarea { min-height: 58px; }
.task-form-hint { font-size: 11px; line-height: 1.4; font-weight: 400; }
.task-scope-note { margin: 8px 0; font-size: 12px; }
.task-list { gap: 8px; min-width: 0; }
.task-list > .task-filter-heading { margin: 4px 0 2px; }
.task-card { gap: 10px; padding: 13px 14px; border-radius: 11px; box-shadow: 0 2px 8px #18243a0a; min-width: 0; scroll-margin-top: 18px; }
.task-card--overdue { border-inline-start: 4px solid #c34141; padding-inline-start: 11px; }
.task-card:target { border-color: var(--brand-3); box-shadow: 0 0 0 3px rgba(18, 60, 156, .16); }
.task-escalation { margin: 0; font-size: 12px; }
.task-card-head { align-items: flex-start; gap: 14px; }
.task-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; min-width: 0; }
.task-card-title h3 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.task-status { padding: 3px 8px; font-size: 11px; line-height: 1.35; white-space: nowrap; }
.task-due { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 8px; border-radius: 7px; background: #f4f6f9; color: #435166; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.task-due span { color: var(--muted, #687486); font-size: 10px; font-weight: 500; }
.task-due--overdue { background: #fff0f0; color: #a73535; }
.task-due--overdue span { color: #a73535; }
.task-description { color: #344155; font-size: 13px; line-height: 1.5; }
.task-participants { gap: 7px 20px; color: #344155; font-size: 12px; }
.task-participants > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.task-participants small { color: var(--muted, #687486); font-size: 11px; }
.task-actions { gap: 8px; padding-top: 2px; }
.task-management-actions { padding-top: 7px; }
.task-management-actions > summary, .task-deadline-request summary, .task-deadline-history summary { font-size: 12px; }
.task-management-action-list { gap: 8px; margin-top: 8px; }
.task-telegram-connect--linked { margin-top: 0; padding-top: 9px; font-size: 11px; }
.task-telegram-connect--linked b { font-size: 11px; }
.task-action-form { gap: 7px 9px; }
.task-action-form--start button, .task-action-form--submit button, .task-action-form--accept button { border-color: var(--brand); background: var(--brand); color: #fff; }
.task-action-form--start button:hover, .task-action-form--submit button:hover, .task-action-form--accept button:hover { border-color: var(--brand-2); background: var(--brand-2); }
.task-action-form--return button { border-color: #d9a23a; background: #fff8e8; color: #704b08; }
.task-history summary { font-size: 12px; }
.task-history ol, .task-deadline-history ol { gap: 8px; margin-top: 8px; }
.task-history-event time { font-size: 11px; }
.task-workload .table-scroll { margin: 0 13px 12px; }
.task-workload a { color: var(--brand-2); font-weight: 650; text-underline-offset: 3px; }
.task-workload a:hover, .task-workload a:focus-visible { color: var(--brand); text-decoration-thickness: 2px; }
.task-workload-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.task-workload-zero { color: var(--muted, #687486); }
.task-checklist, .task-attachments { border-top-color: #eef0f4; }
.task-checklist summary, .task-attachments summary { font-size: 12px; }
.task-checklist summary span, .task-attachments summary span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.task-checklist-item, .task-attachments li { font-size: 12px; }
@media (max-width: 980px) {
  .task-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .task-center { gap: 8px; }
  .task-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .task-summary-card { min-height: 42px; padding: 7px 8px; }
  .task-summary-card span { font-size: 10px; }
  .task-summary-card b { font-size: 17px; }
  .task-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .task-filter-search, .task-filter-actions { grid-column: 1 / -1; }
  .task-filter-actions button { flex: 1 1 auto; }
  .task-create-grid { grid-template-columns: 1fr; }
  .task-create-assignee, .task-create-title, .task-create-due, .task-create-description, .task-create-submit { grid-column: 1; }
  .task-assignee-picker { grid-template-columns: 1fr; }
  .task-assignee-picker > .task-form-hint, .task-assignee-selected, .task-assignee-empty { grid-column: 1; }
  .task-card { gap: 9px; padding: 11px; }
  .task-card--overdue { padding-inline-start: 8px; }
  .task-card-head { display: grid; gap: 8px; }
  .task-card-title h3 { font-size: 15px; }
  .task-due { justify-self: start; }
  .task-action-form { display: grid; }
  .task-action-form label, .task-action-form button, .task-create-submit button { width: 100%; }
  .task-create-submit { align-items: stretch; }
  .task-result-count { font-size: 11px; }
  .task-telegram-connect--linked { align-items: center; flex-direction: row; gap: 6px; }
}

/* Compact employee task workspace: short rows and one selected detail pane. */
.task-center { gap: 8px; }
.task-summary-grid { gap: 5px; }
.task-summary-card { min-height: 38px; padding: 5px 8px; border-radius: 7px; }
.task-summary-card b { font-size: 16px; }
.task-toolbar { display: flex; align-items: center; gap: 8px; }
.task-search-form { display: flex; flex: 1 1 auto; min-width: 0; gap: 6px; }
.task-search-form input { flex: 1 1 auto; min-width: 0; }
.task-new-link { flex: 0 0 auto; padding: 8px 11px; border-radius: 7px; background: var(--brand-orange); color: var(--brand); text-decoration: none; font-weight: 650; }
.task-new-link:hover, .task-new-link:focus-visible { background: var(--brand-orange-tint); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-orange); }
.task-anchor { display: block; scroll-margin-top: 18px; }
.task-filter-panel { padding: 7px 11px !important; }
.task-filter-panel > summary { font-size: 12px; }
.task-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); align-items: start; gap: 10px; min-width: 0; }
.task-workspace--empty { grid-template-columns: 1fr; }
.task-list-panel, .task-detail-panel { min-width: 0; border: 1px solid var(--line, #e4e8ed); border-radius: 9px; background: var(--surface, #fff); overflow: hidden; }
.task-list-columns, .task-list-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px 108px; gap: 8px; align-items: center; }
.task-list-columns { padding: 8px 10px; border-bottom: 1px solid var(--line, #e4e8ed); background: #fafbfe; color: var(--muted, #687486); font-size: 11px; }
.task-list-rows { margin: 0; padding: 0; list-style: none; }
.task-list-rows li + li { border-top: 1px solid var(--line, #e4e8ed); }
.task-list-row { min-height: 50px; padding: 6px 10px; border-left: 3px solid transparent; color: var(--ink, #233044); text-decoration: none; font-size: 12px; }
.task-list-row:hover, .task-list-row:focus-visible { background: #fafbfe; color: var(--ink, #233044); }
.task-list-row[aria-current='true'] { border-left-color: var(--brand-3); background: #edf3ff; }
.task-list-row--overdue:not([aria-current='true']) { border-left-color: #c34141; }
.task-list-row-main { display: grid; min-width: 0; gap: 2px; }
.task-list-row-main strong, .task-list-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-list-row-main strong { font-size: 12px; font-weight: 650; }
.task-list-row-main small { color: var(--muted, #687486); font-size: 11px; }
.task-list-row-due { white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-list-row-due--overdue { color: #a73535; font-weight: 700; }
.task-list-row .task-status { justify-self: start; padding: 3px 6px; border-radius: 5px; font-size: 10px; }
.task-detail-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.task-detail-panel .task-card { border: 0; border-radius: 0; box-shadow: none; padding: 13px; }
.task-detail-panel .task-card--overdue { border-left: 0; padding-left: 13px; }
.task-detail-panel .task-card[hidden] { display: none; }
.task-detail-panel .task-card-head h3 { font-size: 16px; }
.task-detail-panel .task-description { font-size: 12px; }
.task-detail-panel .task-action-form label { flex-basis: 100%; }
.task-list-panel .task-pagination { border-top: 1px solid var(--line, #e4e8ed); }
.task-list-panel > .panel.muted { margin: 0; border: 0; box-shadow: none; }
.task-bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--line, #e4e8ed); font-size: 11px; color: var(--muted, #687486); }
.task-bulk-toolbar select { min-width: 150px; max-width: 220px; padding: 5px; font-size: 12px; }
.task-bulk-toolbar button { padding: 5px 9px; font-size: 12px; }
.task-list-item--bulk { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: stretch; }
.task-list-item--bulk .task-bulk-check { display: grid; place-items: center; margin: 0; }
.task-list-item--bulk .task-list-row { min-width: 0; }
.task-work-time { padding: 5px 0; border-top: 1px solid var(--line, #e4e8ed); font-size: 12px; }
.task-work-time strong { font-variant-numeric: tabular-nums; }
.task-work-time span { color: var(--muted, #687486); }
.task-comments { border-top: 1px solid var(--line, #e4e8ed); padding-top: 7px; font-size: 12px; }
.task-comments summary { cursor: pointer; font-weight: 650; }
.task-comments ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 7px; }
.task-comments li { border-bottom: 1px solid var(--line, #e4e8ed); padding-bottom: 6px; }
.task-comments time { color: var(--muted, #687486); }
.task-comments p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 3px 0; }
.task-comment-form { display: grid; gap: 5px; }
.task-comment-form textarea { min-height: 58px; }
.task-comment-form button { justify-self: start; }
.task-bulk-confirm { max-width: 720px; margin: 18px auto; padding: 20px; border: 1px solid var(--line, #e4e8ed); border-radius: 9px; background: var(--surface, #fff); }
.task-bulk-confirm li { margin: 5px 0; }
@media (max-width: 900px) {
  .task-workspace { grid-template-columns: 1fr; }
  .task-detail-panel { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .task-toolbar { flex-wrap: wrap; }
  .task-search-form { flex-basis: 100%; }
  .task-list-columns, .task-list-row { grid-template-columns: minmax(0, 1fr) 78px; }
  .task-list-columns span:last-child, .task-list-row .task-status { display: none; }
}

/* Task creation and personal recipients sit above the list only while opened. */
.task-quick-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 7px; }
.task-recipient-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line, #e4e8ed); border-radius: 7px; background: var(--surface, #fff); color: var(--ink, #233044); text-decoration: none; font-size: 13px; font-weight: 650; }
.task-recipient-link:hover, .task-recipient-link:focus-visible { border-color: var(--brand-3); background: #f7faff; color: var(--brand); }
.task-recipient-link .task-recipient-count { min-width: 19px; height: 19px; }
.task-top-panels { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(270px, 1fr); align-items: start; gap: 8px; min-width: 0; }
.task-top-panels:not(:has(.task-create-panel[open], .task-recipient-panel[open], .task-anchor:target)) { display: none; }
.task-top-panels .task-anchor { display: none; }
.task-top-panels details.task-create-panel:not([open]), .task-top-panels details.task-recipient-panel:not([open]) { display: none; }
.task-top-panels .task-anchor:target + details:not([open]) { display: block; }
.task-top-panels:not(:has(.task-recipient-panel[open])) { grid-template-columns: 1fr; }
.task-top-panels:not(:has(.task-create-panel[open])) .task-recipient-panel { max-width: 420px; }
.task-top-panels > .panel { margin: 0; min-width: 0; }
.task-top-panels .task-create-panel > summary, .task-top-panels .task-recipient-panel > summary { padding: 8px 11px; font-size: 14px; font-weight: 650; }
.task-top-panels .task-create-panel > .task-scope-help { margin-top: 7px; }
.task-top-panels .task-create-form { margin-top: 8px; margin-bottom: 10px; }
.task-top-panels .task-create-grid { grid-template-columns: minmax(0, 1.15fr) minmax(170px, .9fr) minmax(130px, .6fr); gap: 7px 9px; align-items: start; }
.task-top-panels .task-create-title { grid-column: 1; }
.task-top-panels .task-create-assignee { grid-column: 2; min-width: 0; }
.task-top-panels .task-create-due { grid-column: 3; }
.task-top-panels .task-create-description, .task-top-panels .task-create-submit { grid-column: 1 / -1; }
.task-top-panels .task-create-grid input, .task-top-panels .task-create-grid select, .task-top-panels .task-create-grid textarea { width: 100%; min-width: 0; }
.task-top-panels .task-create-form textarea { min-height: 54px; }
.task-top-panels .task-create-submit { justify-content: space-between; align-items: center; }
.task-top-panels .task-create-submit button { order: 2; min-width: 140px; }
.task-top-panels .task-create-submit .task-form-hint { order: 1; max-width: 330px; }
.task-top-panels .task-assignee-picker { display: grid; grid-template-columns: 1fr; gap: 4px; }
.task-top-panels .task-assignee-picker > label, .task-top-panels .task-assignee-picker > .task-assignee-search { grid-column: 1; min-width: 0; }
.task-top-panels .task-assignee-search > summary { color: var(--brand-2); cursor: pointer; font-size: 11px; font-weight: 500; }
.task-top-panels .task-assignee-search input { margin-top: 5px; width: 100%; }
.task-top-panels .task-assignee-selected { display: none; }
.task-top-panels .task-assignee-empty { font-size: 11px; }
.task-top-panels .task-recipient-panel > .task-scope-note { margin-top: 8px; margin-bottom: 8px; }
.task-top-panels .task-recipient-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; margin-bottom: 8px; }
.task-top-panels .task-recipient-add .task-assignee-picker { min-width: 0; }
.task-top-panels .task-recipient-add button { margin-bottom: 1px; }
.task-top-panels .task-recipient-list { max-height: 186px; overflow-y: auto; margin-top: 0; margin-bottom: 10px; border-top: 1px solid var(--line, #e4e8ed); }
.task-top-panels .task-recipient-row { min-height: 33px; padding: 4px 0; gap: 5px; font-size: 12px; }
.task-top-panels .task-recipient-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-top-panels .task-recipient-row button { padding: 4px 6px; font-size: 11px; }
@media (max-width: 1050px) {
  .task-top-panels { grid-template-columns: 1fr; }
  .task-top-panels:not(:has(.task-create-panel[open])) .task-recipient-panel { max-width: none; }
}
@media (max-width: 700px) {
  .task-top-panels .task-create-grid { grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr); }
  .task-top-panels .task-create-title { grid-column: 1; }
  .task-top-panels .task-create-assignee { grid-column: 2; }
  .task-top-panels .task-create-due { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .task-quick-actions { justify-content: stretch; }
  .task-quick-actions > a { flex: 1 1 auto; justify-content: center; }
  .task-top-panels .task-create-grid { grid-template-columns: 1fr; }
  .task-top-panels .task-create-title, .task-top-panels .task-create-assignee, .task-top-panels .task-create-due { grid-column: 1; }
  .task-top-panels .task-create-submit button { order: 1; width: 100%; }
  .task-top-panels .task-create-submit .task-form-hint { order: 2; }
}

/* Leader task dashboard: all numbers reuse the task visibility scope. */
.task-lead-dashboard { display: grid; gap: 8px; min-width: 0; }
.task-lead-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.task-lead-heading h2 { margin: 0; color: var(--brand); font-size: 18px; line-height: 1.25; }
.task-lead-heading p { margin: 2px 0 0; color: var(--muted, #687486); font-size: 11px; }
.task-lead-live { flex: 0 0 auto; color: var(--muted, #687486); font-size: 11px; }
.task-lead-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.task-lead-metric { display: flex; justify-content: space-between; align-items: end; gap: 5px; min-width: 0; min-height: 51px; padding: 8px 10px; border: 1px solid var(--line, #e4e8ed); border-radius: 9px; background: var(--surface, #fff); color: var(--ink, #233044); text-decoration: none; }
.task-lead-metric:hover, .task-lead-metric:focus-visible, .task-lead-row:hover, .task-lead-row:focus-visible, .task-lead-load-row:hover, .task-lead-load-row:focus-visible, .task-lead-priority-row:hover, .task-lead-priority-row:focus-visible { background: #f5f8ff; color: var(--brand); }
.task-lead-metric span { color: var(--muted, #687486); font-size: 11px; line-height: 1.25; }
.task-lead-metric b { font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.task-lead-metric--overdue b { color: #aa3939; }
.task-lead-metric--review b { color: var(--brand); }
.task-lead-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 8px; }
.task-lead-panel { min-width: 0; padding: 9px 11px; border: 1px solid var(--line, #e4e8ed); border-radius: 9px; background: var(--surface, #fff); }
.task-lead-panel h3 { margin: 0 0 5px; color: var(--brand); font-size: 13px; }
.task-lead-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 43px; padding: 6px 0; border-top: 1px solid var(--line, #e4e8ed); color: var(--ink, #233044); text-decoration: none; }
.task-lead-row-main { min-width: 0; }
.task-lead-row-main strong, .task-lead-row-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-lead-row-main strong { font-size: 12px; font-weight: 650; }
.task-lead-row-main small { color: var(--muted, #687486); font-size: 10px; }
.task-lead-pill { flex: 0 0 auto; padding: 3px 6px; border-radius: 6px; background: #edf3ff; color: var(--brand); font-size: 10px; font-weight: 650; }
.task-lead-empty { margin: 9px 0; color: var(--muted, #687486); font-size: 12px; }
.task-lead-load-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(80px, 1.4fr) 28px; align-items: center; gap: 7px; min-height: 31px; border-top: 1px solid var(--line, #e4e8ed); color: var(--ink, #233044); text-decoration: none; font-size: 11px; }
.task-lead-load-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-lead-load-track { display: flex; height: 8px; overflow: hidden; border-radius: 8px; background: #edf1f7; }
.task-lead-load-track i { display: block; height: 100%; }
.task-lead-load-overdue { background: #c34141; }
.task-lead-load-current { background: var(--brand-3); }
.task-lead-load-row b { text-align: right; font-variant-numeric: tabular-nums; }
.task-lead-legend { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; color: var(--muted, #687486); font-size: 10px; }
.task-lead-legend i { width: 7px; height: 7px; border-radius: 50%; background: #c34141; }
.task-lead-legend i:nth-of-type(2) { margin-left: 7px; background: var(--brand-3); }
.task-lead-priorities { padding-bottom: 4px; }
.task-lead-priorities-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.task-lead-priorities-head a { color: var(--brand-3); font-size: 11px; white-space: nowrap; }
.task-lead-priority-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(85px, .55fr) 82px 111px; align-items: center; gap: 7px; min-height: 33px; padding: 5px 0; border-top: 1px solid var(--line, #e4e8ed); color: var(--ink, #233044); text-decoration: none; font-size: 11px; }
.task-lead-priority-row strong, .task-lead-priority-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-lead-priority-row strong { font-weight: 650; }
.task-lead-priority-row > time { font-variant-numeric: tabular-nums; }
.task-lead-priority-row .task-lead-late { color: #aa3939; font-weight: 650; }
.task-lead-priority-row .task-status { justify-self: start; font-size: 10px; }
@media (max-width: 900px) {
  .task-lead-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-lead-columns { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .task-lead-heading { align-items: flex-start; }
  .task-lead-live { display: none; }
  .task-lead-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-lead-row-main small { white-space: normal; }
  .task-lead-priority-row { grid-template-columns: minmax(0, 1fr) 80px; }
  .task-lead-priority-row > span, .task-lead-priority-row > .task-status { display: none; }
}

/* Личный кабинет: компактная композиция вокруг действующих рабочих блоков. */
.home-page { gap:12px; }
.home-page > .panel { margin:0; }
.home-page .home-hero-identity > div {
  position:relative;
  display:flex;
  min-height:176px;
  flex-direction:column;
  justify-content:center;
  padding:18px 26px;
  overflow:hidden;
  border:1px solid #ebe4d8;
  border-radius:12px;
  background:
    linear-gradient(90deg, #fcf9f3 0%, rgba(252,249,243,.98) 30%, rgba(252,249,243,.72) 53%, rgba(252,249,243,0) 78%),
    url('/assets/home-workspace-hero.jpg') right center / cover no-repeat;
  box-shadow:0 6px 20px rgba(11,27,86,.045);
}
.home-page .home-hero-identity > div::before {
  content:"";
  position:absolute;
  top:12px;
  left:26px;
  width:30px;
  height:3px;
  border-radius:3px;
  background:#d99a35;
}
.home-page .home-hero-identity .home-eyebrow {
  color:#925d17;
  font-size:11px;
  letter-spacing:.1em;
}
.home-page .home-hero-identity h1 {
  margin:4px 0 3px;
  color:#0b1b56;
  font-size:clamp(26px, 2.2vw, 33px);
  letter-spacing:-.035em;
}
.home-page .home-hero-identity p {
  max-width:570px;
  color:#59657d;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.home-page .home-hero-identity .home-identity-description { margin-top:4px; }
.home-hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.home-hero-actions .button {
  min-height:32px;
  padding:6px 12px;
  border-color:#0b1b56;
  border-radius:8px;
  background:#0b1b56;
  color:#fff;
  font-size:12px;
}
.home-hero-actions .button.secondary {
  border-color:#d6d9e2;
  background:rgba(255,255,255,.84);
  color:#0b1b56;
}
.home-overview {
  display:grid;
  grid-template-columns:minmax(0, 1.8fr) minmax(320px, .8fr);
  align-items:stretch;
  gap:0;
  overflow:hidden;
  border:1px solid #e3e6eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 20px rgba(11,27,86,.045);
}
.home-overview--single { grid-template-columns:minmax(0, 1fr); }
.home-overview > * { min-width:0; margin:0; }
.home-overview--single .home-workspaces { border-left:0; }
.home-overview--single .home-workspaces__links { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.home-page .home-employee-tasks,
.home-page .home-workspaces,
.home-page .month-close-panel,
.home-page .home-activity-summary .home-work-time,
.home-page .home-summary-card {
  border-radius:12px;
  box-shadow:0 6px 20px rgba(11,27,86,.04);
}
.home-page .home-employee-tasks {
  padding:16px 20px;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.home-page .home-task-head h2,
.home-workspaces h2 { color:#0b1b56; }
.home-page .home-task-head h2 { margin-top:2px; }
.home-page .home-task-head .button { min-height:32px; padding:6px 12px; }
.home-page .home-task-metrics { gap:6px; margin:9px 0; }
.home-page .home-task-metrics span { max-width:100%; gap:6px; padding:5px 8px; font-size:12px; overflow-wrap:anywhere; }
.home-page .home-task-metrics b { font-size:14px; overflow-wrap:anywhere; }
.home-page .home-task-row { min-height:51px; padding:7px 0; }
.home-page .home-task-row b { font-size:13px; }
.home-page .home-task-row span { font-size:12px; }
.home-page .home-task-row .home-task-due { flex:0 0 108px; max-width:108px; white-space:normal; overflow-wrap:anywhere; text-align:right; }
.home-workspaces {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border:0;
  border-left:1px solid #e3e6eb;
  border-radius:0 !important;
  background:#fbfaf8;
  box-shadow:none !important;
}
.home-workspaces__heading h2 {
  margin:2px 0 1px;
  color:#0b1b56;
  font-size:17px;
  letter-spacing:-.025em;
}
.home-workspaces__heading p { margin:0; color:#657087; font-size:11px; }
.home-workspaces__heading .home-eyebrow { color:#925d17; font-size:10px; letter-spacing:.1em; }
.home-workspaces__links { display:grid; align-content:start; grid-auto-rows:minmax(65px, auto); gap:7px; flex:1; }
.home-workspace-card {
  position:relative;
  display:flex;
  min-height:65px;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  padding:9px 12px;
  overflow:hidden;
  border:1px solid #e9e4dc;
  border-radius:8px;
  background-color:#fcf9f3;
  background-repeat:no-repeat;
  background-position:center, right center;
  background-size:cover, 45% auto;
  color:#0b1b56;
  text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.home-workspace-card::before {
  content:"";
  position:absolute;
  top:0;
  left:12px;
  width:20px;
  height:3px;
  background:#daa243;
  border-radius:0 0 4px 4px;
}
.home-workspace-card--tasks {
  background-image:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 37%, rgba(255,255,255,.7) 66%, rgba(255,255,255,.06) 100%), url('/assets/home-workspace-tasks.jpg');
}
.home-workspace-card--legal {
  background-image:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 37%, rgba(255,255,255,.7) 66%, rgba(255,255,255,.06) 100%), url('/assets/home-workspace-legal.jpg');
}
.home-workspace-card--documents {
  background-image:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 37%, rgba(255,255,255,.7) 66%, rgba(255,255,255,.06) 100%), url('/assets/home-workspace-documents.jpg');
}
.home-workspace-card--month {
  background-image:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 37%, rgba(255,255,255,.7) 66%, rgba(255,255,255,.06) 100%), url('/assets/home-workspace-month.jpg');
}
.home-workspace-card__title,
.home-workspace-card__detail { position:relative; z-index:1; max-width:75%; }
.home-workspace-card__title { font-size:13px; font-weight:800; line-height:1.15; }
.home-workspace-card__detail { margin-top:3px; color:#59657d; font-size:11px; line-height:1.3; }
.home-workspace-card__arrow { position:absolute; right:12px; bottom:8px; color:#8d5c1b; font-size:16px; }
.home-workspace-card:hover,
.home-workspace-card:focus-visible {
  border-color:#d9ae70;
  box-shadow:0 8px 20px rgba(11,27,86,.1);
  color:#0b1b56;
  transform:translateY(-1px);
}
.home-workspace-card:focus-visible { outline:2px solid #d99a35; outline-offset:2px; }
.home-page .month-close-panel { padding:16px 20px; border-color:#ede5da; background:linear-gradient(110deg, #fff 0%, #fffdf9 100%); }
.home-page .month-close-kicker { color:#925d17; }
.home-page .month-close-status { margin-top:6px; }
.home-page .month-close-disabled-help { margin-top:10px; padding:9px 12px; }
.home-page > .legal-task-cabinet-panel { padding:14px 20px; }
.home-page .home-activity-summary { gap:8px; padding-top:0; }
.home-page .home-summary-grid { gap:8px; }
.home-page .home-activity-summary .home-work-time,
.home-page .home-summary-card { padding:12px 14px; }
.home-page .home-work-time strong { font-size:22px; }
.home-page .home-summary-card b { font-size:17px; }
.home-page .home-activity-summary .home-work-time,
.home-page .home-summary-card { border-color:#e9e6e2; }
.home-page .home-summary-card { border-top:3px solid #e4bd7b; }
@media (max-width: 1240px) {
  .home-overview { grid-template-columns:minmax(0, 1fr); }
  .home-workspaces__links { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .home-workspaces { border-top:1px solid #e3e6eb; border-left:0; }
}
@media (max-width: 760px) {
  .home-page .home-hero-identity > div {
    min-height:0;
    padding:22px 16px 16px;
    background:
      linear-gradient(90deg, rgba(252,249,243,.98) 0%, rgba(252,249,243,.94) 72%, rgba(252,249,243,.75) 100%),
      url('/assets/home-workspace-hero.jpg') right center / cover no-repeat;
  }
  .home-page .home-hero-identity > div::before { left:16px; top:11px; }
  .home-page .home-employee-tasks { padding:14px; }
  .home-workspaces { padding:14px; }
  .home-workspaces__links { grid-template-columns:minmax(0, 1fr); }
  .home-workspace-card { min-height:65px; background-size:cover, 42% auto; }
  .home-page > .legal-task-cabinet-panel .cabinet-zone-head { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:7px; }
  .home-page > .legal-task-cabinet-panel .cabinet-zone-head > div { display:contents; }
  .home-page > .legal-task-cabinet-panel .cabinet-zone-head h2 { grid-column:1; grid-row:1; }
  .home-page > .legal-task-cabinet-panel .cabinet-zone-head p { grid-column:1 / -1; grid-row:2; margin:0; }
  .home-page > .legal-task-cabinet-panel .cabinet-zone-head .button { grid-column:2; grid-row:1; padding:7px 9px; font-size:12px; white-space:nowrap; }
  .home-page .home-task-row .home-task-due { flex-basis:86px; max-width:86px; }
}

/* Approval queue: one compact decision card per request for every approver. */
.month-close-approvals .month-close-approval-table {
  border-collapse:separate;
  border-spacing:0 10px;
  background:transparent;
}
.month-close-approvals .month-close-approval-table th {
  position:static;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] td {
  padding:16px 18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] td:first-child {
  border-left:1px solid var(--line);
  border-radius:8px 0 0 8px;
}
.month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] td:last-child {
  border-right:1px solid var(--line);
  border-radius:0 8px 8px 0;
}
.month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row]:hover td {
  background:#fbfefd;
}
.month-close-approval-person-name { font-size:17px; }
.month-close-approval-person-role {
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.month-close-approval-kind {
  display:inline-block;
  margin-top:9px;
  padding:3px 9px;
  border:1px solid #b8d8d2;
  border-radius:999px;
  background:#eff8f5;
  color:#17675e;
  font-size:11px;
  font-weight:800;
  line-height:1.3;
}
.month-close-approval-kind--termination {
  border-color:#efd6c5;
  background:#fff3ed;
  color:#9b501d;
}
.month-close-approval-person-details,
.month-close-termination-details { margin-top:8px; }
.month-close-approval-person-details summary,
.month-close-termination-details summary {
  width:max-content;
  max-width:100%;
  color:#315d77;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.month-close-approval-person-details .month-close-approval-person-meta,
.month-close-termination-details .month-close-termination-context {
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fbfc;
}
.month-close-approval-action .month-close-approve-form { max-width:none; }
.month-close-approval-action .month-close-approval-details { gap:7px; }
.month-close-approval-action .month-close-termination-payout { max-width:300px; }
.month-close-approval-action .month-close-termination-payout input {
  width:100%;
  margin:4px 0 0;
  color:var(--ink);
  font-size:19px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.month-close-approval-action .month-close-approve-button {
  min-width:130px;
  border-radius:8px;
  box-shadow:none;
}
.month-close-approval-card { vertical-align:middle !important; }
@media (max-width: 820px) {
  .month-close-approvals .month-close-approval-table { border-spacing:0; }
  .month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] {
    margin-bottom:10px;
    border:1px solid var(--line);
    border-left:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
  }
  .month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] td {
    display:block;
    width:100%;
    min-width:0;
    padding:13px 14px;
    border:0;
    border-radius:0;
  }
  .month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] td:first-child,
  .month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] td:last-child {
    border:0;
    border-radius:0;
  }
  .month-close-approvals .month-close-approval-table tr[data-month-close-approval-search-row] td + td {
    border-top:1px solid var(--line);
  }
  .month-close-approvals .month-close-approval-table td::before { display:none; }
  .month-close-approval-action .month-close-approve-form { grid-template-columns:minmax(0, 1fr) auto; }
}
@media (max-width: 520px) {
  .month-close-approval-action .month-close-approve-form { grid-template-columns:1fr; }
  .month-close-approval-action .month-close-approve-button { width:100%; }
}