:root {
  color-scheme: light;
  --bg: #f4f6f5;
  --panel: #ffffff;
  --panel-muted: #f8faf9;
  --ink: #16211d;
  --muted: #68756f;
  --line: #dfe7e2;
  --accent: #176b62;
  --accent-2: #2f6fb1;
  --accent-soft: #e6f3f1;
  --warn: #a05d00;
  --warn-soft: #fff2d9;
  --danger: #a33434;
  --danger-soft: #ffe5e5;
  --ok: #207348;
  --ok-soft: #e5f5ec;
  --shadow: 0 16px 42px rgba(24, 42, 34, 0.14);
  --radius: 8px;
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 18px;
  --control-compact: 32px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}

html {
  scrollbar-color: rgba(23, 107, 98, 0.32) transparent;
  scrollbar-width: thin;
}

body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(23, 107, 98, 0.32);
  background-clip: content-box;
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(23, 107, 98, 0.48);
  background-clip: content-box;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

button:focus,
input[type="checkbox"]:focus {
  outline: none;
}

button:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible) {
  box-shadow: none;
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(23, 107, 98, 0.16);
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width, 220px) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: var(--sidebar-width, 220px);
  height: 100dvh;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  background: #fbfcfb;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  margin-bottom: 16px;
  padding: 0 8px;
  color: var(--ink);
  background: transparent;
  font-weight: 800;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.brand:hover {
  color: var(--accent);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: var(--radius);
  color: #ffffff;
  background: var(--accent);
}

.workspace-switch,
.workspace-current {
  display: grid;
  gap: 6px;
  margin: -6px 0 12px;
  padding: 8px;
  border: 1px solid rgba(143, 199, 187, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.workspace-switch > span,
.workspace-current {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.workspace-switch > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.workspace-switch select {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(143, 199, 187, 0.72);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.workspace-current {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.workspace-current strong,
.workspace-current small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-current strong {
  color: var(--ink);
  font-size: 12px;
}

.workspace-current small {
  font-size: 11px;
}

.workspace-compact-wrap {
  position: relative;
  display: grid;
  justify-content: center;
  margin: -6px 0 12px;
}

.workspace-compact-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(143, 199, 187, 0.5);
  border-radius: 10px;
  color: var(--accent);
  background: rgba(232, 248, 244, 0.84);
  cursor: pointer;
}

.workspace-compact-btn.active,
.workspace-compact-btn:hover {
  color: #ffffff;
  background: var(--accent);
}

.workspace-popover {
  position: fixed;
  left: calc(var(--sidebar-width, 76px) + 8px);
  top: 58px;
  z-index: 40;
  display: grid;
  gap: 5px;
  width: 210px;
  padding: 8px;
  border: 1px solid rgba(143, 199, 187, 0.56);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 45px rgba(35, 55, 49, 0.18);
}

.workspace-popover button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.workspace-popover button:hover,
.workspace-popover button.active {
  border-color: rgba(143, 199, 187, 0.62);
  background: rgba(232, 248, 244, 0.86);
}

.workspace-popover strong,
.workspace-popover small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-popover small {
  color: var(--muted);
  font-size: 11px;
}

.emergency-actions {
  margin-top: 8px;
}

.emergency-actions summary {
  width: max-content;
  color: #8a3f3f;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.emergency-actions .row-action {
  margin-top: 7px;
  min-height: 34px;
}

.side-nav {
  display: grid;
  gap: 6px;
}

.nav-btn,
.ghost-btn,
.primary-btn,
.danger-btn,
.quiet-btn,
.chip,
.icon-btn,
.tab-btn,
.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}

.nav-btn {
  justify-content: flex-start;
  width: 100%;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
}

.nav-btn.active,
.nav-btn:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

.sidebar-footer {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 7px;
}

.user-pill {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--accent-2);
  font-weight: 800;
}

.user-meta {
  min-width: 0;
}

.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--panel);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.sidebar-footer .quiet-btn {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 750;
}

.sidebar-collapse-btn:hover {
  border-color: #bcd1ca;
  color: var(--accent);
  background: var(--accent-soft);
}

.sidebar-collapse-btn .icon {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  background: transparent;
  cursor: col-resize;
}

.sidebar-resizer:hover,
.is-resizing-sidebar .sidebar-resizer {
  background: rgba(23, 107, 98, 0.12);
}

.sidebar-compact .brand {
  justify-content: center;
  padding: 0;
}

.sidebar-compact .sidebar {
  padding-inline: 6px;
}

.sidebar-compact .sidebar-footer {
  left: 6px;
  right: 6px;
}

.sidebar-compact .brand span:not(.brand-mark),
.sidebar-compact .nav-btn span,
.sidebar-compact .user-meta,
.sidebar-compact .sidebar-footer .quiet-btn span,
.sidebar-compact .sidebar-collapse-btn span,
.sidebar-compact .workspace-current span:not(:first-child),
.sidebar-compact .workspace-switch {
  display: none;
}

.sidebar-compact .workspace-current {
  display: flex;
  justify-content: center;
  min-height: 36px;
  margin: -6px 0 12px;
  padding: 0;
  border-radius: 10px;
}

.sidebar-compact .nav-btn {
  justify-content: center;
  padding: 0;
}

.sidebar-compact .user-pill {
  display: flex;
  justify-content: center;
  min-height: 36px;
  padding: 0;
}

.sidebar-compact .sidebar-collapse-btn {
  width: 100%;
  min-height: 36px;
  padding: 0;
}

.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.user-role,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.main {
  grid-column: 2;
  min-width: 0;
  padding: 16px 12px 22px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: 13px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

.page-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.top-actions .primary-btn,
.top-actions .ghost-btn {
  min-height: 31px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 720;
  line-height: 1;
}

.theme-switch-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 0 9px 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 5px rgba(18, 84, 76, 0.05);
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.theme-switch-card:hover {
  border-color: #a9cec8;
  color: var(--ink);
  background: var(--panel-muted);
  transform: translateY(-1px);
}

.theme-switch-card.active {
  border-color: #77c5ba;
  color: var(--accent);
  background: var(--accent-soft);
}

.theme-choice-button {
  min-height: 30px;
  padding: 0 8px 0 10px;
  gap: 7px;
  font-size: 11.5px;
}

.theme-choice-button .theme-switch {
  width: 31px;
  height: 18px;
}

.theme-choice-button .theme-switch span {
  width: 12px;
  height: 12px;
}

.theme-switch {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #dce6e2;
  box-shadow:
    inset 0 1px 2px rgba(24, 42, 34, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.84);
}

.theme-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(24, 42, 34, 0.28);
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.theme-switch-card.active .theme-switch {
  background: var(--accent);
}

.theme-switch-card.active .theme-switch span {
  transform: translateX(15px);
}

.theme-choice-button.active .theme-switch span {
  transform: translateX(13px);
}

.detail-panel-switch-card {
  min-height: 30px;
  padding: 0 8px 0 10px;
  gap: 7px;
  font-size: 11.5px;
}

.detail-panel-switch-card .theme-switch {
  width: 31px;
  height: 18px;
}

.detail-panel-switch-card .theme-switch span {
  width: 12px;
  height: 12px;
}

.detail-panel-switch-card.active .theme-switch span {
  transform: translateX(13px);
}

.top-actions .primary-btn {
  border: 1px solid #0d6c62;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.08)),
    var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 2px 5px rgba(18, 84, 76, 0.1);
}

.top-actions .ghost-btn {
  border-color: #cfdcd7;
  background:
    linear-gradient(180deg, #ffffff, #f6faf8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(21, 67, 59, 0.03),
    0 2px 5px rgba(18, 84, 76, 0.06);
}

.top-actions .primary-btn:hover,
.top-actions .ghost-btn:hover {
  transform: translateY(-1px);
}

.top-actions .primary-btn:active,
.top-actions .ghost-btn:active {
  transform: translateY(0);
}

.top-actions .icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.primary-btn {
  padding: 0 14px;
  color: #ffffff;
  background: var(--accent);
  font-weight: 750;
}

.primary-btn:hover {
  background: #0f5b53;
}

.ghost-btn,
.quiet-btn,
.row-action {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--panel);
}

.ghost-btn {
  padding: 0 12px;
}

.quiet-btn {
  padding: 0 11px;
  color: var(--muted);
}

.ghost-btn:hover,
.quiet-btn:hover,
.row-action:hover {
  border-color: #c8d5cf;
  background: var(--panel-muted);
}

.danger-action {
  border-color: #f0c7c7;
  color: var(--danger);
}

.danger-action:hover {
  border-color: #e59e9e;
  background: var(--danger-soft);
}

.quick-return-btn {
  border: 1px solid #9ec8e8;
  padding: 0 12px;
  color: #165c8a;
  background: #eef8ff;
}

.quick-return-btn:hover {
  border-color: #78b5df;
  background: #dff1ff;
}

.danger-action.delete-locked,
.danger-btn.delete-locked {
  border-color: #cfd8d5;
  color: #7b8884;
  background:
    linear-gradient(180deg, #f7faf9, #edf2f0);
  box-shadow: none;
}

.danger-action.delete-locked:hover,
.danger-btn.delete-locked:hover {
  border-color: #cfd8d5;
  background:
    linear-gradient(180deg, #f7faf9, #edf2f0);
}

.restore-action {
  border-color: #a7d2ca;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 800;
}

.restore-action:hover {
  border-color: #76bcb1;
  background: #ddf1ee;
}

.deleted-accounting-note {
  border-color: #e6d2b0;
  color: #7a5a18;
  background: #fff8e8;
}

.deleted-accounting-note .section-title {
  color: #7a5a18;
}

.danger-btn {
  padding: 0 12px;
  border: 1px solid #b73131;
  color: #ffffff;
  background: #c83737;
  font-weight: 800;
}

.danger-btn:hover {
  border-color: #9f2b2b;
  background: #ad2f2f;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 9px;
  margin-bottom: 10px;
}

.search-wrap {
  position: relative;
}

.search-wrap .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

.search-input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  outline: none;
}

.search-input:focus,
.field input:not([type="checkbox"]):focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chip,
.tab-btn {
  padding: 0 11px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel);
  white-space: nowrap;
}

.chip.active,
.tab-btn.active {
  border-color: #a9cec8;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 750;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 9px;
}

.metric {
  min-height: 50px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.metric-value {
  font-size: 20px;
  font-weight: 850;
}

.metric-label {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, var(--detail-width, 420px));
  gap: 12px;
  align-items: start;
}

.phones-content-grid.detail-panel-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.placeholder-panel {
  display: flex;
  align-items: center;
  min-height: 132px;
  padding: var(--space-lg);
}

.placeholder-content {
  max-width: 620px;
}

.placeholder-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: var(--space-xs);
  padding: 0 8px;
  border: 1px solid #cde0db;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.placeholder-content h2 {
  margin: 0 0 var(--space-xs);
  font-size: 18px;
  line-height: 1.25;
}

.placeholder-content p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.clients-panel {
  min-height: 0;
}

.clients-panel .empty-state {
  min-height: 132px;
}

.clients-table-wrap {
  max-height: calc(100vh - 198px);
}

.clients-table {
  min-width: 680px;
  table-layout: fixed;
}

.clients-table th,
.clients-table td {
  padding: 2px 9px;
  vertical-align: middle;
  font-size: 11.5px;
  line-height: 1.12;
}

.clients-table tbody tr {
  height: 36px;
}

.clients-table th:nth-child(1),
.clients-table td:nth-child(1) {
  width: 220px;
}

.clients-table th:nth-child(2),
.clients-table td:nth-child(2) {
  width: 170px;
}

.clients-table th:nth-child(3),
.clients-table td:nth-child(3) {
  width: 66px;
  text-align: center;
}

.clients-table th:nth-child(5),
.clients-table td:nth-child(5) {
  width: 156px;
  padding-right: 10px;
}

.clients-table td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-cell {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.client-cell strong {
  overflow: hidden;
  font-weight: 800;
  font-size: 11.6px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-cell span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  width: 100%;
}

.client-actions .row-action {
  min-height: 24px;
  padding: 0 7px;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
}

.client-actions .row-action .icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}

.admin-page {
  display: grid;
  gap: 12px;
}

.admin-metrics {
  margin-bottom: 0;
}

.admin-metric {
  min-height: 58px;
}

.admin-metric-hint {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.admin-notice {
  padding: 10px 12px;
  border: 1px solid #bfe0db;
  border-radius: var(--radius);
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 760;
}

.admin-notice.warning {
  border-color: #e7c783;
  color: #805200;
  background: #fff6df;
}

.admin-section {
  overflow: hidden;
}

.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-muted);
}

.admin-section-head h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.admin-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.admin-section-head > span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #b7d7d2;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 850;
}

.admin-table-wrap {
  overflow: auto;
  max-height: 46vh;
}

.admin-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
}

.admin-table th,
.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--panel);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-clickable-row {
  cursor: pointer;
  transition:
    background 140ms ease,
    color 140ms ease;
}

.admin-clickable-row:hover,
.admin-clickable-row.selected {
  background: var(--accent-soft);
}

.admin-clickable-row.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-user-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-user-cell strong,
.admin-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-cell strong {
  white-space: nowrap;
  font-weight: 850;
}

.admin-user-cell span,
.admin-subline {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.admin-mono,
.admin-secret {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  font-weight: 780;
}

.admin-secret {
  display: inline-flex;
  max-width: 100%;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #d9e5e0;
  border-radius: 6px;
  background: #f7faf9;
  color: var(--ink);
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 1px 3px 1px 0;
  padding: 0 7px;
  border: 1px solid #d6e1dd;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.admin-pill.ok {
  border-color: #9fd1c8;
  color: var(--accent);
  background: var(--accent-soft);
}

.admin-user-inspector {
  padding: 12px;
}

.admin-user-inspector.empty {
  min-height: 118px;
}

.admin-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-inspector-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.admin-inspector-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-inspector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.admin-inspector-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.admin-inspector-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-muted);
  font-size: 12px;
  font-weight: 720;
}

.admin-inspector-meta b {
  margin-left: 4px;
  color: var(--ink);
}

.admin-inspector-table {
  max-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.finance-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.finance-tab {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background:
    linear-gradient(180deg, #ffffff, #f6faf8);
  font-weight: 760;
  cursor: default;
}

.finance-tab.active {
  border-color: #9cc9c2;
  color: var(--accent);
  background: var(--accent-soft);
}

.finance-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 12px;
}

.finance-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}

.finance-overview-card {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid rgba(143, 199, 187, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 249, 0.86));
}

.finance-overview-card span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.finance-overview-card strong {
  color: var(--ink);
  font-size: 18px;
}

.finance-overview-card small {
  color: var(--muted);
  font-size: 12px;
}

.finance-metric .metric-value {
  font-size: 18px;
}

.finance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 12px;
  align-items: start;
}

.finance-layout.single {
  grid-template-columns: minmax(0, 1fr);
}

.finance-side {
  display: grid;
  gap: 12px;
}

.finance-panel {
  padding: 14px;
}

.finance-panel.compact {
  padding: 12px;
}

.finance-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.finance-section-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.finance-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.finance-table {
  min-width: 980px;
}

.finance-table td span {
  color: var(--muted);
  font-size: 12px;
}

.finance-list {
  display: grid;
  gap: 7px;
}

.finance-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.finance-list-row strong,
.finance-list-row span {
  display: block;
}

.finance-list-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.finance-list-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.ai-base-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 12px;
  align-items: start;
}

.ai-base-panel,
.ai-base-side {
  padding: 14px;
}

.ai-base-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.ai-base-metric {
  min-height: 48px;
  padding: 8px 10px;
  background: #f6fbf9;
}

.ai-base-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 10px;
}

.ai-base-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 4px;
}

.ai-base-card {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 249, 0.96));
  box-shadow: 0 8px 18px rgba(22, 83, 74, 0.05);
}

.ai-base-card-head,
.ai-base-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ai-base-card-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.ai-base-card-head span,
.ai-base-card-foot {
  color: var(--muted);
  font-size: 12px;
}

.ai-base-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #9fd0c7;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.ai-base-badge.muted {
  border-color: #d8e5df;
  color: var(--muted);
  background: #f7faf9;
}

.ai-base-badge.source {
  border-color: #f0cf7d;
  color: #8a6200;
  background: #fff7d9;
}

.ai-base-text {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.ai-base-result {
  padding: 8px 10px;
  border: 1px solid #d9eee8;
  border-radius: 8px;
  color: #1d4e47;
  background: #f4fbf9;
  font-size: 13px;
}

.ai-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.ai-keywords mark {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: #eef6f3;
  font-size: 11px;
  font-weight: 750;
}

.ai-base-side {
  display: grid;
  gap: 10px;
}

.ai-base-side h2 {
  margin: 0;
  font-size: 17px;
}

.ai-base-side p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.ai-base-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.positive-money {
  color: var(--ok);
}

.negative-money {
  color: var(--danger);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 10px;
  align-items: start;
}

.settings-panel {
  padding: 10px;
}

.settings-form,
.settings-list {
  display: grid;
}

.settings-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.settings-list {
  gap: 8px;
}

.settings-form > * {
  min-width: 0;
}

.settings-summary-strip {
  display: contents;
}

.settings-summary-strip span {
  display: grid;
  gap: 2px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #f8fbfa;
  font-size: 12px;
  line-height: 1.2;
}

.settings-summary-strip strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.settings-list,
.profile-settings,
.finance-settings-list,
.integration-settings {
  display: contents;
}

.integration-settings {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.integration-settings .settings-field {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  column-gap: 0;
  grid-column: auto;
}

.integration-settings .settings-field > span,
.integration-settings .settings-field > input,
.integration-settings .settings-field > small {
  grid-column: 1;
}

.integration-settings .inline-check {
  grid-column: 1;
  grid-row: auto;
  align-self: end;
  justify-self: start;
}

.settings-field,
.settings-note {
  min-height: 92px;
  min-width: 0;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f5fbf9;
}

.settings-field {
  display: grid;
  grid-template-rows: auto minmax(29px, auto) minmax(0, 1fr);
  align-content: start;
}

.settings-field span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}

.settings-field input:not([type="checkbox"]) {
  width: 100%;
  min-height: 29px;
  padding-block: 4px;
  border-color: #b9d8d3;
  background: #ffffff;
  box-shadow: inset 2px 0 0 var(--accent);
}

.settings-field input[name^="telegram."] {
  max-width: none;
}

.settings-field select {
  width: 100%;
  min-height: 29px;
  padding-block: 4px;
  font-size: 13px;
}

.settings-field .field-note {
  font-size: 11px;
  line-height: 1.2;
}

.settings-note {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.finance-settings-list .settings-note {
  grid-column: auto;
}

.settings-note strong {
  color: var(--accent);
  font-size: 12px;
  line-height: 1.15;
}

.settings-form .primary-btn {
  justify-self: start;
  grid-column: 1 / -1;
  min-height: 34px;
  font-size: 13px;
}

.settings-grid > .detail {
  padding: 12px;
}

.settings-grid > .detail .detail-head {
  padding-bottom: 10px;
}

.settings-grid > .detail .detail-title {
  font-size: 15px;
}

.settings-grid > .detail .detail-body {
  gap: 8px;
  font-size: 13px;
}

.settings-grid > .detail .kv {
  padding: 6px 0;
}

.settings-grid > .detail p {
  font-size: 12px;
  line-height: 1.35;
}

.inline-check {
  display: inline-grid;
  grid-template-columns: 16px minmax(0, auto);
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.inline-check input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid #9fcfc8;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #ffffff 0%, #edf8f5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(23, 107, 98, 0.08),
    0 1px 2px rgba(24, 42, 34, 0.08);
  cursor: pointer;
}

.inline-check input::after {
  width: 8px;
  height: 5px;
  border: solid #ffffff;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.inline-check input:checked {
  border-color: #0f5b53;
  background:
    linear-gradient(180deg, #238276 0%, #176b62 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    0 2px 4px rgba(23, 107, 98, 0.18);
}

.inline-check input:checked::after {
  opacity: 1;
}

.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 244px);
}

table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.phones-table {
  min-width: 1060px;
  table-layout: fixed;
}

.phones-table .col-order {
  width: 58px;
}

.phones-table .col-status {
  width: 96px;
}

.phones-table .col-dates {
  width: 145px;
}

.phones-table .col-phone {
  width: 160px;
}

.phones-table .col-master {
  width: 84px;
}

.phones-table .col-misc {
  width: 112px;
}

.phones-table .col-updated {
  width: 88px;
}

.phones-table th:nth-child(1),
.phones-table td:nth-child(1) {
  width: 58px;
  padding-right: 4px;
}

.phones-table th:nth-child(2),
.phones-table td:nth-child(2) {
  width: 96px;
  padding-inline: 4px;
  text-align: center;
}

.phones-table td:nth-child(2) {
  vertical-align: middle;
}

.phones-table td:nth-child(2) .status-badge,
.phones-table td:nth-child(2) .status-picker {
  margin-inline: auto;
}

.phones-table th:nth-child(2) .sort-header {
  position: relative;
  justify-content: center;
  text-align: center;
}

.phones-table th:nth-child(2) .sort-indicator {
  position: absolute;
  right: 0;
}

.phones-table th:nth-child(3),
.phones-table td:nth-child(3) {
  width: 145px;
  padding-left: 2px;
  padding-right: 6px;
  white-space: nowrap;
}

.phones-table th:nth-child(4),
.phones-table td:nth-child(4) {
  width: 160px;
  padding-inline: 6px;
}

.phones-table th:nth-child(5),
.phones-table td:nth-child(5) {
  padding-left: 3px;
}

.phones-table th:nth-child(6),
.phones-table td:nth-child(6) {
  width: 84px;
  padding-inline: 5px;
}

.phones-table th:nth-child(7),
.phones-table td:nth-child(7) {
  width: 112px;
  padding-inline: 4px;
}

.phones-table th:nth-child(8),
.phones-table td:nth-child(8) {
  width: 88px;
  padding-inline: 5px;
}

th,
td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 12.6px;
}

.phones-table th,
.phones-table td {
  padding: 3px 6px;
  font-size: 12.2px;
}

.phones-table td {
  vertical-align: middle;
  line-height: 1.2;
}

.phones-table td:nth-child(1),
.phones-table td:nth-child(2),
.phones-table td:nth-child(3),
.phones-table td:nth-child(4),
.phones-table td:nth-child(5),
.phones-table td:nth-child(6),
.phones-table td:nth-child(7),
.phones-table td:nth-child(8) {
  overflow: hidden;
}

.desktop-device-line {
  display: grid;
  grid-template-rows: auto auto 1fr auto 1fr;
  gap: 0;
  min-width: 0;
  height: 52px;
  align-content: stretch;
  overflow: hidden;
}

.phones-table .desktop-device-line strong,
.phones-table .desktop-device-line .muted {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phones-table td:nth-child(4) strong {
  font-size: 12.5px;
  line-height: 1.12;
}

.phones-table td:nth-child(4) .muted {
  font-size: 11px;
  line-height: 1.12;
}

.table-client-chip {
  display: block;
  grid-row: 4;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  min-height: 14px;
  margin: 0;
  padding: 0 5px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid #d7e8e3;
  border-bottom: 1px solid #d7e8e3;
  border-radius: 0 4px 4px 0;
  color: #53635f;
  background: linear-gradient(90deg, rgba(248, 251, 250, 0.94), rgba(248, 251, 250, 0.72));
  font-size: 9.8px;
  font-weight: 760;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-device-line,
.mobile-client-line,
.mobile-issue-line {
  display: none;
}

.phones-table tbody tr {
  height: 58px;
}

.phones-table .issue-preview-cell {
  width: auto;
  max-width: 420px;
  vertical-align: middle;
}

.ticket-issue-stack {
  display: grid;
  align-content: center;
  gap: 3px;
  height: 38px;
  max-height: 38px;
  overflow: hidden;
}

.table-issue-preview {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phones-table .ticket-no {
  min-height: 20px;
  gap: 4px;
  align-items: center;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fbfcfb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sort-header {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  min-height: 22px;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.sort-header:hover,
.sort-header.active {
  color: var(--accent);
}

.sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  min-width: 12px;
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover,
tbody tr.selected {
  background: var(--panel-muted);
}

.master-color-mint {
  --master-row-bg: #eefbf7;
  --master-row-bg-hover: #e6f7f2;
  --master-row-line: #73b9aa;
}

.master-color-sky {
  --master-row-bg: #edf7fc;
  --master-row-bg-hover: #e4f1f8;
  --master-row-line: #76aeca;
}

.master-color-sage {
  --master-row-bg: #f1f8ef;
  --master-row-bg-hover: #e9f2e6;
  --master-row-line: #86ad78;
}

.master-color-lavender {
  --master-row-bg: #f5f2fc;
  --master-row-bg-hover: #eee9f8;
  --master-row-line: #a693c8;
}

.master-color-peach {
  --master-row-bg: #fff4ee;
  --master-row-bg-hover: #f9ece4;
  --master-row-line: #d4a083;
}

.master-color-sand {
  --master-row-bg: #f8f4e7;
  --master-row-bg-hover: #f1ecd9;
  --master-row-line: #c1aa68;
}

.phones-table tbody tr.master-colored-row {
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--master-row-line) 16%, transparent), color-mix(in srgb, var(--master-row-line) 4%, transparent) 46%, color-mix(in srgb, var(--master-row-line) 12%, transparent)),
    var(--panel);
  outline: 0;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--master-row-line) 12%, transparent);
}

.phones-table tbody tr.master-colored-row:hover,
.phones-table tbody tr.master-colored-row.selected {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--master-row-line) 22%, transparent), color-mix(in srgb, var(--master-row-line) 7%, transparent) 46%, color-mix(in srgb, var(--master-row-line) 16%, transparent)),
    var(--panel-muted);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--master-row-line) 16%, transparent);
}

.phones-table tbody tr.master-colored-row > td {
  background: transparent;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--master-row-line) 58%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--master-row-line) 48%, transparent);
}

.phones-table tbody tr.master-colored-row > td:first-child {
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--master-row-line) 72%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--master-row-line) 58%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--master-row-line) 48%, transparent);
}

.phones-table tbody tr.master-colored-row > td:last-child {
  box-shadow:
    inset -1px 0 0 color-mix(in srgb, var(--master-row-line) 72%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--master-row-line) 58%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--master-row-line) 48%, transparent);
}

.phones-table tbody tr.ai-draft-row {
  position: relative;
  background:
    linear-gradient(90deg, rgba(48, 164, 255, 0.11), rgba(120, 224, 255, 0.035) 46%, rgba(48, 164, 255, 0.095)),
    var(--panel);
  outline: 0;
  box-shadow: inset 0 0 14px rgba(47, 172, 255, 0.08);
}

.phones-table tbody tr.ai-draft-row:hover,
.phones-table tbody tr.ai-draft-row.selected {
  background:
    linear-gradient(90deg, rgba(48, 164, 255, 0.15), rgba(120, 224, 255, 0.055) 46%, rgba(48, 164, 255, 0.13)),
    var(--panel-muted);
  box-shadow: inset 0 0 16px rgba(47, 172, 255, 0.12);
}

.phones-table tbody tr.ai-draft-row > td {
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(42, 188, 255, 0.62),
    inset 0 -1px 0 rgba(42, 188, 255, 0.52);
}

.phones-table tbody tr.ai-draft-row > td:first-child {
  box-shadow:
    inset 1px 0 0 rgba(42, 188, 255, 0.74),
    inset 0 1px 0 rgba(42, 188, 255, 0.62),
    inset 0 -1px 0 rgba(42, 188, 255, 0.52);
}

.phones-table tbody tr.ai-draft-row > td:last-child {
  box-shadow:
    inset -1px 0 0 rgba(42, 188, 255, 0.74),
    inset 0 1px 0 rgba(42, 188, 255, 0.62),
    inset 0 -1px 0 rgba(42, 188, 255, 0.52);
}

.ticket-no {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 20px;
  padding: 0 8px;
  border: 2px solid var(--status-ring, transparent);
  border-radius: 999px;
  color: var(--status-ink, var(--ink));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.28) 42%, rgba(0, 0, 0, 0.025) 100%),
    var(--status-bg, var(--panel-muted));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 2px 0 rgba(255, 255, 255, 0.68),
    inset 0 -2px 0 rgba(0, 0, 0, 0.035),
    0 1px 2px rgba(24, 42, 34, 0.08);
  font-size: 9.8px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.status-control {
  cursor: pointer;
}

.status-control:hover {
  filter: brightness(0.97);
  box-shadow: 0 0 0 3px rgba(23, 107, 98, 0.12);
}

.status-action-badge {
  cursor: pointer;
  gap: 5px;
}

.status-action-badge .icon {
  width: 13px;
  height: 13px;
}

.choice-picker {
  position: relative;
  display: inline-flex;
}

.choice-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  display: grid;
  gap: 4px;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.choice-option {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.choice-option:hover,
.choice-option.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 800;
}

.status-picker .status-control {
  white-space: nowrap;
}

.status-new {
  --status-ink: #31455f;
  --status-bg: #e7eef8;
  --status-ring: #b7c9e0;
}

.status-ready,
.status-away,
.status-transfer {
  --status-ink: var(--warn);
  --status-bg: var(--warn-soft);
  --status-ring: #e6bd62;
}

.status-transfer {
  --status-ring: #dfb154;
}

.status-ready,
.status-transfer,
.status-returning {
  font-size: 10.6px;
  padding-inline: 10px;
}

.status-progress,
.status-check {
  --status-ink: var(--accent-2);
  --status-bg: #e7f0fb;
  --status-ring: #9bbde3;
}

.status-returning {
  --status-ink: #7c4d12;
  --status-bg: #fff0c7;
  --status-ring: #deb15b;
}

.status-done,
.status-returned,
.status-closed {
  --status-ink: var(--ok);
  --status-bg: var(--ok-soft);
  --status-ring: #9dcfb8;
}

.status-deleted {
  --status-ink: #66736f;
  --status-bg: #eef2f1;
  --status-ring: #c5cfcc;
}

.status-hold {
  --status-ink: var(--danger);
  --status-bg: var(--danger-soft);
  --status-ring: #ebb1b1;
}

.date-pair {
  --date-ink: #40534f;
  --date-bg: #f6faf8;
  --date-line: #cbdcd7;
  display: inline-grid;
  grid-template-columns: max-content max-content max-content;
  gap: 0;
  width: max-content;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--date-line);
  border-radius: 6px;
  background: var(--date-bg);
  box-shadow:
    inset 2px 0 0 var(--date-line),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

.date-pair-item {
  display: grid;
  gap: 1px;
  min-width: 43px;
  padding: 3px 5px 3px 6px;
}

.date-pair-item + .date-pair-item {
  border-left: 1px dashed color-mix(in srgb, var(--date-line) 72%, #ffffff);
}

.date-pair-days {
  min-width: 27px;
  justify-items: center;
  padding-inline: 4px;
}

.date-pair span {
  color: color-mix(in srgb, var(--date-ink) 66%, #ffffff);
  font-size: 7.1px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.date-pair strong {
  color: var(--date-ink);
  font-size: 9.4px;
  font-weight: 760;
  line-height: 1.1;
  white-space: nowrap;
}

.date-pair-days strong {
  font-size: 9.6px;
  font-weight: 850;
}

.date-pair-ok {
  --date-ink: #176b45;
  --date-bg: #effbf3;
  --date-line: #74c795;
}

.date-pair-watch {
  --date-ink: #83600c;
  --date-bg: #fff8dd;
  --date-line: #e4be4d;
}

.date-pair-due {
  --date-ink: #9a4e0d;
  --date-bg: #fff0df;
  --date-line: #ef9f44;
}

.date-pair-overdue {
  --date-ink: #a53636;
  --date-bg: #fff0f0;
  --date-line: #e28b8b;
}

.date-pair-moved {
  --date-ink: #176b62;
  --date-bg: #eef9f6;
  --date-line: #8fc7bb;
}

.inventory-layout .detail {
  max-height: calc(100vh - 182px);
}

.part-model-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 0 8px;
  margin: -2px 0 8px;
  scrollbar-width: thin;
}

.part-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #cfe0dc;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  font-weight: 850;
  cursor: pointer;
}

.part-model-chip strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
}

.part-model-chip span {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1;
}

.part-model-chip.active {
  border-color: #83c5ba;
  color: var(--accent);
  background: var(--accent-soft);
}

.parts-table {
  min-width: 860px;
}

.parts-table td {
  vertical-align: middle;
}

.parts-table td:first-child {
  vertical-align: top;
}

.part-table-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.part-thumb {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid #d6e3df;
  border-radius: 6px;
  background: #f5f8f7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.part-thumb.has-image {
  border-color: #b9d8d1;
  background: #ffffff;
}

.part-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.part-table-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.part-table-text strong,
.part-table-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-table-note {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-photo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.part-photo-upload {
  min-height: 28px;
  padding-inline: 9px;
  font-size: 12px;
}

.part-photo-empty {
  padding: 10px;
  border: 1px dashed #bfd9d3;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fbfa;
  font-size: 12px;
  line-height: 1.3;
}

.part-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--part-ring, var(--line));
  border-radius: 999px;
  color: var(--part-ink, var(--ink));
  background: var(--part-bg, var(--panel-muted));
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.part-stock {
  --part-ink: var(--ok);
  --part-bg: var(--ok-soft);
  --part-ring: #b7dacd;
}

.part-reserved {
  --part-ink: var(--warn);
  --part-bg: var(--warn-soft);
  --part-ring: #e6bd62;
}

.part-sent {
  --part-ink: #245f9f;
  --part-bg: #e7eef8;
  --part-ring: #b8cce6;
}

.part-used {
  --part-ink: var(--accent);
  --part-bg: var(--accent-soft);
  --part-ring: #9cc9c2;
}

.part-sold {
  --part-ink: #6b4f14;
  --part-bg: #fff4cf;
  --part-ring: #e6ca72;
}

.part-writeoff {
  --part-ink: var(--danger);
  --part-bg: var(--danger-soft);
  --part-ring: #f0c7c7;
}

.part-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.part-actions .row-action {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 9px;
  white-space: nowrap;
  font-size: 12.5px;
}

.parts-voice-modal {
  width: min(980px, calc(100vw - 28px));
}

.supplier-modal {
  width: min(1040px, calc(100vw - 28px));
}

.supplier-manager {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr);
  gap: 14px;
}

.supplier-list,
.supplier-form {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.supplier-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  max-height: 520px;
  overflow: auto;
}

.supplier-list-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 4px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.supplier-list-head strong {
  color: var(--ink);
  font-size: 22px;
}

.supplier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--panel-muted);
  text-align: left;
  cursor: pointer;
}

.supplier-row.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.supplier-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.supplier-row strong,
.supplier-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-row small {
  color: var(--muted);
  font-size: 12px;
}

.supplier-row em {
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  text-align: center;
  font-style: normal;
  font-weight: 850;
}

.supplier-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.supplier-form h3 {
  margin: 0;
  font-size: 18px;
}

.supplier-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.part-form-voice-toggle {
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.part-form-voice-toggle.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.part-form-voice-toggle.listening {
  border-color: #c83737;
  color: #ffffff;
  background: #c83737;
  box-shadow: 0 0 0 4px rgba(200, 55, 55, 0.16);
}

.part-form-voice-toggle.pending {
  border-color: #d7a331;
  color: #8a5f00;
  background: #fff6da;
}

.part-inline-voice {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #bfe5dd;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f3fffc, #fbfefd);
}

.part-inline-voice-head,
.part-inline-voice-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.part-inline-voice-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.part-inline-voice-head strong {
  color: var(--accent);
  font-size: 15px;
}

.part-inline-voice-head span,
.part-inline-voice-actions span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.part-inline-voice-field {
  margin: 0;
}

.part-inline-voice .parts-voice-wrap textarea {
  min-height: 92px;
}

.parts-voice-status {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid #cfe5df;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.25;
}

.modal-head .modal-head-status {
  flex: 1 1 360px;
  justify-content: flex-start;
  max-width: 560px;
  margin-left: auto;
}

.parts-voice-status.show {
  display: flex;
}

.parts-voice-status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}

.parts-voice-status[data-state="recording"] {
  border-color: rgba(200, 55, 55, 0.34);
  color: #8f2c2c;
  background: #fff1f1;
}

.parts-voice-status[data-state="recording"]::before {
  background: #c83737;
  animation: voicePulse 900ms ease-in-out infinite;
}

.parts-voice-status[data-state="processing"],
.parts-voice-status[data-state="starting"],
.parts-voice-status[data-state="stopping"] {
  border-color: #edd392;
  color: #7b5b13;
  background: #fff8e5;
}

.parts-voice-status[data-state="processing"]::before,
.parts-voice-status[data-state="starting"]::before,
.parts-voice-status[data-state="stopping"]::before {
  border: 2px solid rgba(123, 91, 19, 0.28);
  border-top-color: #b98a1a;
  background: transparent;
  animation: voiceSpin 720ms linear infinite;
}

.parts-voice-status[data-state="error"] {
  border-color: rgba(200, 55, 55, 0.28);
  color: #8f2c2c;
  background: #fff4f4;
}

@keyframes voiceSpin {
  to {
    transform: rotate(360deg);
  }
}

.part-inline-voice-actions .primary-btn {
  flex: 0 0 132px;
  min-height: 36px;
  white-space: nowrap;
}

.part-inline-voice-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cfe5df;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.part-inline-voice-preview-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 850;
}

.part-inline-voice-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.part-inline-voice-preview-grid div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #d8e9e4;
  border-radius: 7px;
  background: #fff;
}

.part-inline-voice-preview-grid span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.part-inline-voice-preview-grid strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .modal-head {
    flex-wrap: wrap;
  }

  .modal-head .modal-head-status {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }

  .part-inline-voice-head,
  .part-inline-voice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .part-inline-voice-actions .primary-btn {
    flex-basis: auto;
    width: 100%;
  }

  .part-inline-voice-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#parts-voice-form .modal-foot .primary-btn[type="submit"] {
  flex: 0 0 184px;
  min-width: 184px;
  white-space: nowrap;
}

#donor-phone-form .modal-foot .primary-btn[type="submit"] {
  flex: 0 0 224px;
  min-width: 224px;
  white-space: nowrap;
}

#parts-voice-confirm-form .modal-foot .primary-btn[type="submit"] {
  flex: 0 0 238px;
  min-width: 238px;
  white-space: nowrap;
}

.parts-voice-wrap textarea {
  min-height: 150px;
  padding-right: 56px;
}

.parts-voice-hint {
  padding: 10px 12px;
  border: 1px solid #cfe5df;
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel-muted);
  font-size: 13px;
  line-height: 1.35;
}

.donor-source-card,
.donor-blueprint {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #bfe5dd;
  border-radius: 8px;
  background: linear-gradient(180deg, #f2fffc, #fbfefd);
}

.donor-source-card {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
}

.donor-source-card div,
.donor-blueprint > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.donor-source-card strong,
.donor-blueprint strong {
  color: var(--accent);
  font-size: 15px;
}

.donor-source-card span,
.donor-blueprint span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.donor-source-card > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #bfe5dd;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 800;
  white-space: nowrap;
}

.donor-pricing-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: -2px 0 10px;
  padding: 10px 12px;
  border: 1px solid #ecd69f;
  border-radius: 8px;
  background: #fff8e8;
  color: #2b2a20;
}

.donor-pricing-card > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dcb85d;
  border-radius: 8px;
  color: #9a6a0a;
  background: #fff2ca;
}

.donor-pricing-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.donor-pricing-card strong {
  color: #533f0c;
  font-size: 13px;
  line-height: 1.25;
}

.donor-pricing-card small {
  color: #75674a;
  font-size: 12px;
  line-height: 1.35;
}

.donor-blueprint-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.donor-blueprint-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #c8e8e1;
  border-radius: 999px;
  color: var(--accent);
  background: var(--panel);
  font-size: 12px;
  font-weight: 750;
}

.parts-voice-transcript {
  margin-bottom: 10px;
}

.parts-voice-list {
  display: grid;
  gap: 10px;
}

.parts-voice-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfe5df;
  border-radius: 8px;
  background: #fbfefd;
}

.parts-voice-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.parts-voice-item-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.parts-voice-item-head strong {
  color: var(--ink);
  font-size: 14px;
}

.parts-voice-item-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.parts-voice-remove-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid #f1c7c5;
  border-radius: 8px;
  color: #a13d3d;
  background: #fffafa;
  cursor: pointer;
}

.parts-voice-remove-btn:hover {
  border-color: #e68c88;
  color: #c93030;
  background: #fff0ef;
}

.parts-voice-remove-btn svg {
  width: 17px;
  height: 17px;
}

.donor-part-photo-slot {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 74px;
}

.donor-part-edit-grid {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.donor-part-edit-grid .donor-part-photo-slot {
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  gap: 3px;
  min-height: 0;
}

.donor-part-edit-grid .donor-part-photo-btn {
  width: 100%;
  height: 100%;
  min-height: 118px;
}

.donor-part-photo-label {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.donor-part-edit-grid .donor-part-photo-meta {
  position: absolute;
  right: 6px;
  top: 6px;
  justify-content: center;
  text-align: center;
  padding: 2px 4px;
  border-radius: 7px;
  background: rgba(244, 251, 248, 0.88);
}

.donor-part-photo-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px dashed #9ac9bc;
  border-radius: 8px;
  color: var(--ok);
  background: #f4fbf8;
  cursor: pointer;
  overflow: hidden;
}

.donor-part-photo-btn:hover {
  border-style: solid;
  background: #ecf8f3;
}

.donor-part-photo-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.donor-part-photo-collage {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 2px;
}

.donor-part-photo-collage.count-1 {
  grid-template-columns: 1fr;
}

.donor-part-photo-collage.count-2,
.donor-part-photo-collage.count-3,
.donor-part-photo-collage.count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.donor-part-photo-collage img {
  min-width: 0;
  min-height: 0;
  border-radius: 4px;
}

.donor-part-photo-btn > b {
  position: absolute;
  right: 6px;
  bottom: 6px;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  font-size: 12px;
}

.donor-part-photo-empty {
  display: grid;
  place-items: center;
  gap: 8px;
}

.donor-part-photo-btn .icon {
  width: 22px;
  height: 22px;
}

.donor-part-photo-btn small {
  font-size: 11px;
  font-weight: 800;
}

.donor-part-photo-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.donor-part-photo-meta .quiet-btn {
  width: 30px;
  height: 30px;
  padding: 0;
}

.parts-voice-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.parts-voice-fields .field {
  gap: 3px;
}

.parts-voice-fields .field span {
  font-size: 11px;
}

.parts-voice-fields .field input,
.parts-voice-fields .field select {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 13px;
}

.return-action {
  border-color: #b7dacd;
  color: var(--ok);
  background: var(--ok-soft);
}

.return-action:hover {
  border-color: #8fc4ae;
  background: #d9f0e4;
}

.empty-state {
  padding: 34px;
  color: var(--muted);
  text-align: center;
}

.detail {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(23, 107, 98, 0.32) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.detail::-webkit-scrollbar {
  width: 8px;
}

.detail::-webkit-scrollbar-track {
  background: transparent;
}

.detail::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(23, 107, 98, 0.32);
  background-clip: content-box;
}

.detail::-webkit-scrollbar-thumb:hover {
  background: rgba(23, 107, 98, 0.48);
  background-clip: content-box;
}

.detail-scroll-content {
  min-width: 0;
}

@media (min-width: 1181px) {
  .phones-content-grid > .panel:first-child .table-wrap {
    max-height: none;
    overflow: visible;
  }

  .phones-content-grid > .detail {
    --detail-content-gap: 12px;
    --detail-scroll-gap: 22px;
    overflow-y: scroll;
  }

  .phones-content-grid > .detail > .detail-scroll-content {
    margin-inline: var(--detail-content-gap) var(--detail-scroll-gap);
  }

  .phones-content-grid > .detail > :not(.detail-resizer):not(.detail-scroll-content) {
    margin-inline: var(--detail-content-gap) var(--detail-scroll-gap);
  }

  .phones-content-grid > .detail .detail-head {
    padding-inline: 0;
  }

  .phones-content-grid > .detail .detail-body {
    padding-inline: 0;
  }
}

.detail-resizer {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  z-index: 4;
  width: 10px;
  border-radius: 8px;
  background: transparent;
  cursor: col-resize;
}

.detail-resizer::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.detail-resizer:hover::before,
.is-resizing-detail .detail-resizer::before {
  background: rgba(23, 107, 98, 0.36);
}

.is-resizing-detail {
  cursor: col-resize;
  user-select: none;
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, max-content);
  align-items: flex-start;
  gap: 10px;
  padding: 10px 26px 10px 11px;
  border-bottom: 1px solid var(--line);
}

.detail-head-main {
  min-width: 0;
}

.detail-status-slot {
  display: flex;
  justify-content: flex-end;
  min-width: 96px;
}

.detail-status-slot .status-badge {
  max-width: 100%;
  white-space: nowrap;
}

.detail-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

.detail-issue {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.detail-body {
  display: grid;
  gap: 9px;
  padding: 11px;
}

.detail.ai-draft-detail {
  border-color: rgba(31, 156, 255, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(130, 222, 255, 0.34),
    0 0 18px rgba(48, 164, 255, 0.2),
    var(--shadow);
}

.detail.ai-draft-detail .detail-head {
  background:
    linear-gradient(90deg, rgba(48, 164, 255, 0.08), rgba(120, 224, 255, 0.025) 58%, transparent),
    var(--panel);
}

.section-title {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.kv {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 7px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}

.kv span:first-child {
  color: var(--muted);
}

.kit {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.detail-body section .kit {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.kit-item {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--panel-muted);
  font-size: 12px;
  font-weight: 750;
}

.kit-item.on {
  border-color: #b7dacd;
  color: var(--ok);
  background: var(--ok-soft);
}

.table-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 2px 5px;
  width: 96px;
  max-width: 100%;
  max-height: 43px;
  min-height: 20px;
  margin: 0 auto;
  overflow: hidden;
}

.table-diagnostics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  max-height: 18px;
  overflow: hidden;
}

.compact-kit {
  gap: 4px;
}

.compact-kit .kit-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 9.1px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.table-diagnostics .kit-item {
  min-height: 16px;
  padding-inline: 5px;
}

.table-flags .kit-item {
  min-height: 13px;
  width: 88px;
  max-width: 88px;
  padding: 0 4px;
}

.compact-preconditions {
  max-width: 210px;
}

.compact-preconditions .precondition-item,
.table-flags .precondition-item {
  border-color: #e3c46b;
  color: #86610b;
  background: #fff6d6;
  font-size: 8.4px;
}

.compact-preconditions .precondition-item.danger.on,
.table-flags .precondition-item.danger.on {
  border-color: #df8d8d;
  color: #a53636;
  background: #fff0f0;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.detail-actions .row-action {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 9px;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 720;
}

.detail-actions .clone-action {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #b9d8d3;
}

.detail-actions .clone-action:hover {
  border-color: #8ebeb5;
  background: #d9eeeb;
}

.detail-actions .movement-action {
  color: #145f56;
  background: #edf8f5;
  border-color: #acd3cd;
}

.detail-actions .movement-action:hover {
  border-color: #83bbb2;
  background: #dff1ee;
}

.detail-actions .resource-action,
.detail-actions .part-action,
.detail-actions .work-action {
  border-color: #d5e3df;
  color: #18322d;
  background: #ffffff;
}

.detail-actions .resource-action:hover,
.detail-actions .part-action:hover,
.detail-actions .work-action:hover {
  border-color: #a9cec7;
  background: #f3fbf9;
}

.detail-actions .report-editor-action {
  border-color: #bdd5ea;
  color: #1f5c89;
  background: #f3f8fd;
}

.detail-actions .report-editor-action:hover {
  border-color: #81b7e1;
  background: #e6f2fc;
}

.detail-actions .diagnostic-act-action {
  grid-column: 1 / -1;
  border-color: #b7d7ce;
  color: #176b62;
  background: #eef9f7;
}

.detail-actions .diagnostic-act-action:hover {
  border-color: #7bbeb0;
  background: #dff3ef;
}

.detail-actions .knowledge-action {
  margin-top: 4px;
}

.detail-actions .issue-action {
  margin-top: 4px;
  border-color: #e0c077;
  color: #8a640e;
  background: #fff6da;
}

.detail-actions .issue-action-wide {
  grid-column: 1 / -1;
}

.detail-actions .issue-action:hover {
  border-color: #c9982c;
  background: #ffefbf;
}

.detail-actions .icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

.mini-action {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 12px;
  white-space: nowrap;
}

.work-accounting {
  display: grid;
  gap: 8px;
}

.work-list,
.linked-parts {
  display: grid;
  gap: 6px;
}

.work-item,
.linked-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfdfc;
}

.work-item.done {
  border-color: #b7dacd;
  background: var(--ok-soft);
}

.work-item strong,
.linked-part span:first-child {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 780;
}

.work-item span,
.work-item small,
.work-money span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
}

.work-money {
  min-width: 70px;
  text-align: right;
}

.work-money b,
.linked-part b {
  color: var(--ink);
  font-size: 11.5px;
}

.work-actions {
  display: inline-flex;
  gap: 4px;
}

.icon-action {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--accent);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-action:hover {
  background: var(--accent-soft);
}

.linked-part {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  padding: 5px 7px;
}

.linked-part .icon-action {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.unlink-part-action {
  color: var(--danger);
}

.unlink-part-action:hover {
  border-color: #efb6b6;
  color: var(--danger);
  background: #fff4f4;
}

.work-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-totals span {
  padding: 5px 7px;
  border: 1px solid #b9d8d3;
  border-radius: 7px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 760;
}

.work-totals .work-total-net,
.resource-summary .resource-summary-net {
  border-color: #88bbb1;
  color: var(--ink);
  background: #e8f5f1;
}

.ticket-tax-note {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.resource-modal {
  width: min(1160px, calc(100vw - 34px));
  max-height: calc(100dvh - 36px);
}

.resource-modal .modal-head > div:not(.modal-head-actions) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.resource-modal .modal-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.resource-head-save {
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.resource-modal .modal-head-actions .quiet-btn {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 10px;
}

.resource-modal .modal-head-actions .resource-back-btn {
  color: var(--accent);
  background: #f7fbf9;
}

.resource-modal .modal-head-actions .resource-close-btn {
  color: #a33a3a;
  border-color: #efc5c5;
  background: #fff7f7;
}

.resource-modal .modal-head-actions .resource-close-btn:hover {
  color: #8f2c2c;
  border-color: #e5aaaa;
  background: #fff0f0;
}

.resource-head-save .icon,
.resource-modal .modal-head-actions .quiet-btn .icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.resource-subtitle {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.resource-modal-body {
  display: grid;
  gap: 10px;
}

.resource-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.resource-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #cde0db;
  border-radius: 999px;
  color: var(--muted);
  background: #f7fbf9;
  font-size: 12px;
  font-weight: 780;
}

.resource-summary b {
  color: var(--ink);
  margin-inline: 2px;
}

.resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.resource-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-muted);
}

.resource-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.resource-panel-head h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.resource-panel-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.resource-inline-form {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #cfe2dd;
  border-radius: 8px;
  background: #ffffff;
}

.resource-inline-form.compact {
  gap: 6px;
}

.resource-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.resource-submit {
  justify-self: end;
  min-height: 32px;
}

.resource-master-pay-field.is-disabled span {
  color: var(--muted);
}

.resource-work-category-field.is-locked span,
.resource-master-pay-field.is-disabled span {
  color: var(--muted);
}

.resource-work-category-field.is-locked input,
.resource-master-pay-field.is-disabled input {
  color: var(--muted);
  background: #f4f8f6;
  cursor: not-allowed;
}

.supplier-quick-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: -1px;
}

.supplier-quick-chip {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #badbd2;
  border-radius: 999px;
  background: #eefaf6;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.supplier-quick-chip:hover,
.supplier-quick-chip:focus-visible {
  border-color: var(--accent);
  background: #e0f4ee;
}

.resource-block {
  display: grid;
  gap: 6px;
}

.resource-block-title {
  color: #173f39;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.resource-list {
  display: grid;
  gap: 4px;
}

.resource-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(64px, max-content) max-content;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.resource-row > div:first-child {
  min-width: 0;
}

.resource-row.done {
  border-color: #b7dacd;
  background: var(--ok-soft);
}

.resource-row.available {
  border-color: #c9dfda;
}

.resource-row.part-row {
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
}

.resource-row.part-row strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.2px;
  line-height: 1.15;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.resource-row strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-part-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.resource-part-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.resource-row span,
.resource-row small,
.resource-money span {
  display: block;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.18;
}

.resource-part-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-part-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 7px;
  min-width: 0;
}

.resource-part-prices b {
  color: var(--ink);
  font-size: 11.5px;
}

.resource-part-prices span {
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.18;
}

.resource-money {
  min-width: 64px;
  justify-self: end;
  text-align: right;
}

.resource-money b {
  color: var(--ink);
  font-size: 11.5px;
}

.resource-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  justify-self: end;
}

.resource-row.linked .resource-row-actions {
  min-width: 0;
}

.resource-row-actions .part-status {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding-inline: 10px;
  font-size: 12px;
}

.resource-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #b7d8d0;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.resource-state-pill .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.resource-row-actions .icon-action {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
}

.resource-attach-btn {
  width: 154px;
  justify-self: end;
  min-height: 34px;
  padding-inline: 9px;
  color: var(--accent);
  background: var(--accent-soft);
}

.resource-mini-action,
.resource-row.part-row .resource-attach-btn {
  align-self: center;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  flex: 0 0 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 7px;
  justify-self: end;
}

.resource-row.part-row .resource-attach-btn .icon,
.resource-mini-action .icon {
  width: 16px;
  height: 16px;
}

.resource-empty {
  padding: 9px;
  border: 1px dashed #cbdcd7;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  line-height: 1.35;
}

.compact-note {
  font-size: 12px;
}

.detail-lock-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.48;
}

.log {
  display: grid;
  gap: 9px;
}

.log-item {
  padding-left: 12px;
  border-left: 3px solid #b9d8d3;
}

.log-text {
  font-size: 14px;
}

.log-time {
  color: var(--muted);
  font-size: 12px;
}

.master-updates {
  display: grid;
  gap: 7px;
}

.master-update {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f6fbf9;
  font-size: 13px;
}

.master-update span {
  color: var(--muted);
  font-size: 12px;
}

.master-card .detail-body {
  gap: 10px;
}

.master-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.specialty-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.specialty-pill {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #cde0db;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 800;
}

.master-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.master-actions .row-action {
  min-height: 32px;
}

.specialty-checks {
  gap: 8px 10px;
}

.master-color-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.master-color-choice {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--master-row-line) 55%, var(--line));
  border-radius: 10px;
  color: var(--ink);
  background: var(--master-row-bg);
  font-weight: 800;
  cursor: pointer;
}

.master-color-choice:hover,
.master-color-choice:has(input:checked) {
  border-color: var(--master-row-line);
  background: var(--master-row-bg-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--master-row-line) 36%, transparent);
}

.master-color-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.master-color-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--master-row-line) 78%, #ffffff);
  border-radius: 999px;
  background: var(--master-row-line);
  box-shadow: inset 0 0 0 3px var(--master-row-bg);
}

.master-color-choice strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-muted);
}

.master-note-tabs {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.master-note-tab {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  background: var(--panel);
}

.master-note-tab.active {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-soft);
}

.master-diagnosis-hidden {
  display: none;
}

.master-quick-note-field,
.master-diagnosis-note-field,
.master-price-field {
  min-width: 0;
}

.master-quick-note-wrap textarea {
  min-height: 84px;
  resize: vertical;
}

.master-save-btn {
  justify-self: stretch;
}

.master-detail-actions {
  margin-top: 8px;
}

.approval-request-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e1bd5c;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff8e6, #fffdf6);
}

.approval-request-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.approval-request-head .section-title {
  margin: 0;
}

.approval-request-head span,
.approval-decision {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.approval-request-head strong {
  flex: 0 0 auto;
  color: #7b5300;
  font-size: 18px;
}

.approval-request-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.approval-request-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.master-ticket-modal {
  max-width: min(980px, calc(100vw - 42px));
}

.master-ticket-body {
  display: grid;
  gap: 12px;
}

.master-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.master-stage-grid .field textarea {
  min-height: 58px;
}

.compact-stage-grid .field input,
.compact-stage-grid .field select {
  min-height: 32px;
}

.handoff-card,
.accept-box {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #f1d094;
  border-radius: var(--radius);
  background: #fff8e8;
}

.accept-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.accept-box strong {
  font-size: 14px;
}

.accept-box span {
  color: var(--muted);
  font-size: 13px;
}

.master-form-handoff-blocked .master-stage-grid,
.master-form-handoff-blocked > .field:not(:first-of-type),
.master-form-handoff-blocked > label.field,
.master-form-handoff-blocked > button[data-action="save-master"] {
  opacity: 0.52;
}

.master-handoff-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 64;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(620px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid #9fcfc6;
  border-radius: 10px;
  background: rgba(246, 255, 252, 0.98);
  box-shadow: 0 18px 44px rgba(24, 42, 34, 0.18);
}

.master-handoff-toast strong,
.master-handoff-toast span,
.master-handoff-toast small {
  display: block;
}

.master-handoff-toast strong {
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
}

.master-handoff-toast span,
.master-handoff-toast small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.master-handoff-toast-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.handoff-preview-modal {
  width: min(920px, calc(100vw - 42px));
}

.handoff-preview-body {
  display: grid;
  gap: 12px;
}

.handoff-preview-hero {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #bfe5dd;
  border-radius: 8px;
  background: #f2fffc;
}

.handoff-preview-hero strong {
  color: var(--accent);
  font-size: 17px;
  font-weight: 900;
}

.handoff-preview-hero span,
.handoff-preview-note,
.handoff-preview-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.handoff-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
  align-items: start;
}

.handoff-preview-main {
  display: grid;
  gap: 12px;
}

.handoff-preview-photos {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.handoff-preview-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.handoff-preview-photo {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.handoff-preview-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.handoff-preview-foot {
  justify-content: space-between;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.field {
  display: grid;
  gap: 5px;
}

.field.full {
  grid-column: 1 / -1;
}

.form-grid.device-not-ready > :not(.device-picker):not(.device-lock-note):not(.device-early-field):not(.imei-history-panel) {
  pointer-events: none;
  opacity: 0.38;
}

.device-lock-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #d8e5df;
  border-radius: var(--radius);
  color: var(--muted);
  background: #f6faf8;
  font-size: 13px;
  font-weight: 750;
}

.field > span,
.field label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.field-note {
  margin-top: -2px;
  color: var(--muted);
  font-size: 12px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1.5px solid #c8d8d3;
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  outline: none;
  font-weight: 560;
}

.field textarea {
  min-height: 64px;
  overflow: hidden;
  resize: none;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.strong-field > span,
.strong-field > label {
  color: #173f39;
  font-weight: 850;
}

.strong-field input:not([type="checkbox"]),
.strong-field select,
.strong-field textarea {
  border-color: #8fc7bb;
  border-width: 1.8px;
  background: #fcfffe;
  box-shadow:
    inset 0 0 0 1px rgba(24, 123, 111, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.85);
  font-weight: 650;
}

.hidden {
  display: none !important;
}

.readonly-field-value {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1.8px solid #cde0db;
  border-radius: 8px;
  background: #f7fbf9;
  color: var(--muted);
  font-weight: 700;
}

.status-master-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  align-items: start;
  min-width: 0;
}

.status-master-row .field {
  min-width: 0;
}

.client-assistant {
  display: grid;
  gap: 7px;
  margin-top: -4px;
}

.client-assistant:empty {
  display: none;
}

.imei-history-panel {
  display: grid;
  gap: 0;
  margin-top: -2px;
}

.imei-history-panel:empty {
  display: none;
}

.imei-history-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(47, 111, 177, 0.32);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 10% 0%, rgba(79, 153, 255, 0.13), transparent 32%),
    rgba(244, 249, 255, 0.88);
  box-shadow: inset 3px 0 0 rgba(47, 111, 177, 0.62);
}

.imei-history-card.loading,
.imei-history-card.warning {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.imei-history-card.warning {
  border-color: rgba(214, 156, 42, 0.42);
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 rgba(214, 156, 42, 0.72);
}

.imei-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.imei-history-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.imei-history-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-2);
  font-size: 14px;
  font-weight: 900;
}

.imei-history-head span,
.imei-history-privacy {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.imei-history-head b {
  flex: 0 0 auto;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 900;
}

.imei-history-section {
  display: grid;
  gap: 6px;
}

.imei-history-section-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.imei-history-item {
  width: 100%;
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
  padding: 8px 9px;
  border: 1px solid rgba(143, 199, 187, 0.48);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.74);
}

.imei-history-item.own:hover,
.imei-history-item.own:focus-visible {
  border-color: rgba(47, 111, 177, 0.58);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 3px rgba(47, 111, 177, 0.12);
  outline: none;
}

.imei-history-item > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.imei-history-item strong {
  color: var(--ink);
  font-weight: 900;
}

.imei-history-item span,
.imei-history-item small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.imei-history-item p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.imei-history-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #a9cec8;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 820;
  text-decoration: none;
}

.imei-history-contact .icon {
  width: 14px;
  height: 14px;
}

.client-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 7px;
}

.client-suggestion,
.client-save-prompt,
.client-saved-note {
  border: 1px solid rgba(143, 199, 187, 0.55);
  border-radius: var(--radius);
  background: rgba(243, 251, 248, 0.72);
}

.client-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 5px 10px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  opacity: 0.82;
  box-shadow: 0 5px 12px rgba(11, 91, 79, 0.04);
}

.client-suggestion:hover,
.client-suggestion:focus-visible,
.client-suggestion.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  opacity: 0.94;
  outline: none;
}

.client-suggestion.active {
  box-shadow: inset 3px 0 0 rgba(11, 122, 107, 0.78), 0 7px 16px rgba(11, 91, 79, 0.08);
}

.client-suggestion span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.client-suggestion strong,
.client-save-prompt strong {
  font-weight: 760;
}

.client-suggestion small {
  color: var(--muted);
  font-size: 12px;
}

.client-suggestion b {
  color: var(--accent);
  font-size: 12px;
  white-space: nowrap;
}

.client-suggestion em {
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.client-save-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px 7px 10px;
  color: var(--muted);
  font-size: 13px;
}

.client-save-prompt .row-action {
  min-height: 30px;
  padding: 0 10px;
  border-color: #a9d4cb;
  color: var(--accent);
  background: #ffffff;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.client-saved-note {
  padding: 8px 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.voice-wrap {
  position: relative;
}

.voice-wrap input,
.voice-wrap textarea,
.predictive-wrap textarea {
  padding-right: 44px;
}

.predictive-wrap {
  position: relative;
}

.predictive-wrap textarea {
  position: relative;
  z-index: 1;
  background: transparent;
}

.predictive-ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 72px;
  padding: 7px 44px 7px 10px;
  border: 1px solid transparent;
  color: #9aa5a0;
  font: inherit;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.predictive-base {
  color: transparent;
}

.voice-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #a9cec8;
  border-radius: 50%;
  color: var(--accent);
  background: #ffffff;
  cursor: pointer;
  line-height: 0;
  transform: translateY(-50%);
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.voice-btn .icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.inline-voice-btn {
  width: 26px;
  height: 26px;
  right: 7px;
}

.inline-voice-btn .icon {
  width: 15px;
  height: 15px;
}

.predictive-wrap .voice-btn,
.voice-wrap:has(textarea) .voice-btn {
  top: auto;
  bottom: 8px;
  transform: none;
}

.voice-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.voice-btn.listening {
  border-color: #c83737;
  color: #ffffff;
  background: #c83737;
  box-shadow: 0 0 0 4px rgba(200, 55, 55, 0.16);
}

.voice-btn.pending {
  border-color: #d7a331;
  color: #8a5f00;
  background: #fff6da;
  box-shadow: 0 0 0 4px rgba(215, 163, 49, 0.13);
}

@keyframes voicePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.55);
    opacity: 1;
  }
}

.return-voice-field {
  gap: 5px;
}

.return-voice-wrap textarea {
  min-height: 76px;
  padding-right: 48px;
}

.return-ai-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.return-ai-preview span {
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid #a9cec8;
  border-radius: 999px;
  color: #176b62;
  background: #edf9f6;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.15;
}

.return-final-summary {
  display: grid;
  gap: 8px;
}

.return-final-summary section {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #d7e6e1;
  border-radius: 8px;
  background: #f8fbfa;
}

.return-final-summary h3 {
  margin: 0;
  color: #173f39;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.return-final-summary ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.return-final-summary li {
  display: grid;
  gap: 2px;
}

.return-final-summary strong {
  color: var(--ink);
  font-weight: 850;
}

.return-final-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.return-final-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.return-final-money div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.issue-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  margin-top: -4px;
}

.issue-hint {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #cfdcd8;
  border-radius: var(--radius);
  color: var(--muted);
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
}

.issue-hint:hover,
.issue-hint:focus-visible {
  border-color: #9cc9c2;
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.device-picker {
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-muted);
}

.device-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #a9cec8;
  border-radius: var(--radius);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.device-compact-title {
  display: grid;
  gap: 3px;
}

.device-compact-title span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.device-compact-title strong {
  color: #0f3f3a;
  font-size: 15px;
}

.device-compact .row-action {
  border-color: #9cc9c2;
  color: var(--accent);
  background: #ffffff;
  font-weight: 800;
}

.device-compact .row-action:hover {
  border-color: var(--accent);
  background: #d8eeeb;
}

.device-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.device-picker-head strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-tabs {
  display: flex;
  gap: 5px;
}

.device-kind-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.other-device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.other-device-grid .field:nth-child(3) {
  grid-column: 1 / -1;
}

.device-tabs .tab-btn {
  min-height: 30px;
  padding: 0 10px;
}

.device-kind-tabs .tab-btn {
  min-height: 36px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
}

.auth-tabs {
  display: flex;
  gap: 8px;
}

.device-panel {
  display: none;
  gap: 5px;
  overflow: visible;
  padding-right: 2px;
}

.device-panel.active {
  display: flex;
  flex-wrap: wrap;
}

.device-panel[data-device-panel="model"].active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
}

.pick-btn {
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: #ffffff;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}

.model-pick {
  width: 100%;
  min-height: 28px;
  justify-content: center;
  padding: 0 5px;
  color: #3f524d;
  background: #f8fcfb;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.pick-btn.active,
.pick-btn:hover {
  border-color: #9cc9c2;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 750;
}

.color-pick {
  border-color: rgba(22, 33, 29, 0.18);
  color: var(--pick-ink);
  background: var(--pick-bg);
}

.color-pick.active,
.color-pick:hover {
  border-color: var(--accent);
  color: var(--pick-ink);
  background: var(--pick-bg);
  box-shadow: 0 0 0 3px rgba(23, 107, 98, 0.18);
}

.drafts {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f5fbf9;
}

.draft-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.draft-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.draft-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.draft-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 6px;
  justify-content: end;
}

.empty-inbox p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.kit-field {
  margin-bottom: 10px;
}

.form-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
  margin-top: -2px;
}

.intake-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px 12px;
}

.intake-main-text,
.intake-diagnosis-text,
.intake-quick-flags {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.intake-layout .field {
  min-width: 0;
}

.intake-layout textarea {
  min-height: 92px;
}

.intake-quick-flags {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 5px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.intake-flags-title {
  justify-self: start;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1;
}

.intake-flags-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 6px 7px;
  width: 100%;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(125, 190, 178, 0.45);
  border-radius: 10px;
  background: rgba(247, 252, 250, 0.66);
}

.intake-flags-panel .check-card {
  width: 100%;
  justify-content: center;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11.7px;
}

.intake-flags-panel .check-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-fields-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: end;
}

.form-section-grid .compact-check-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.form-section-grid .compact-check-section > label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1;
}

.form-section-grid .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.form-section-grid .check-card {
  min-height: 24px;
  padding: 3px 9px;
}

.compact-check-section {
  display: flex;
  align-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.compact-check-section > label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.check-card {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid #9bcfc2;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.38) 46%, rgba(24, 123, 111, 0.08) 100%),
    #e9f8f4;
  color: #315c52;
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 0 rgba(23, 107, 98, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 3px 8px rgba(20, 78, 70, 0.08);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.intake-quick-flags .checks {
  gap: 6px;
}

.basic-check-section .checks {
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
}

.camera-check-section .checks {
  flex-wrap: nowrap;
}

.intake-quick-flags .compact-check-section {
  min-width: 0;
}

.intake-quick-flags .camera-check-section {
  flex: 0 0 auto;
}

.intake-quick-flags .basic-check-section {
  flex: 1 1 auto;
  min-width: min(100%, 520px);
}

.intake-quick-flags .basic-check-section .checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.intake-quick-flags .check-card {
  min-height: 24px;
  padding: 3px 9px;
  border-color: #90cbbd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -3px 0 rgba(23, 107, 98, 0.11),
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 4px 10px rgba(20, 78, 70, 0.1);
}

.intake-quick-flags .check-card:has(input:checked),
.form-section-grid .check-card:has(input:checked) {
  transform: none;
}

.check-card:hover {
  border-color: #77bdb0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.42) 46%, rgba(24, 123, 111, 0.1) 100%),
    #e4f7f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -2px 0 rgba(23, 107, 98, 0.1),
    0 4px 10px rgba(20, 78, 70, 0.1);
}

.check-card:has(input:checked) {
  border-color: #d3a318;
  color: #382900;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 245, 175, 0.46) 43%, rgba(149, 105, 0, 0.13) 100%),
    #ffd957;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -3px 0 rgba(151, 103, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 5px 12px rgba(145, 108, 0, 0.16);
}

.check-card.danger-check {
  border-color: #e2b9b9;
  color: #7d3a3a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.4) 46%, rgba(187, 57, 57, 0.09) 100%),
    #fff1f1;
}

.check-card.warning-check:has(input:checked) {
  border-color: #bf8b13;
  color: #3a2800;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 226, 138, 0.45) 44%, rgba(171, 104, 0, 0.15) 100%),
    #ffc84d;
}

.check-card.danger-check:has(input:checked) {
  border-color: #c83a3a;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(70, 0, 0, 0.14) 100%),
    #d43d3d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(100, 0, 0, 0.18),
    0 5px 13px rgba(178, 48, 48, 0.22);
}

.check-card.danger-check input:checked {
  border-color: #8e2424;
  background:
    linear-gradient(180deg, #ef6868, #9e2424);
}

.check-card:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(20, 78, 70, 0.12),
    0 1px 2px rgba(20, 78, 70, 0.06);
}

.check-card input {
  appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #98caba;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 2px rgba(20, 78, 70, 0.08);
}

.check-card input::after {
  width: 8px;
  height: 5px;
  border: solid #ffffff;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.check-card input:checked {
  border-color: #9b7410;
  background:
    linear-gradient(180deg, #c79a17, #9b7410);
}

.check-card input:checked::after {
  opacity: 1;
}

.precondition-item.danger.on {
  border-color: #e0a0a0;
  color: #a53636;
  background: #fff0f0;
  font-weight: 850;
}

.camera-flag.warning.on,
.basic-flag.on {
  border-color: #d9bd6b;
  color: #715006;
  background: #fff3cf;
}

.autosave-state {
  flex: 1 1 auto;
  min-width: 120px;
  color: var(--muted);
  font-size: 13px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.photo-upload {
  position: relative;
  min-width: 116px;
  min-height: 34px;
  padding: 0 10px;
  overflow: hidden;
  cursor: pointer;
}

.photo-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.photo-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.photo-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
}

.photo-card img,
.photo-open img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--panel-muted);
}

.photo-card figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
  min-height: 34px;
  padding: 5px 6px;
  color: var(--muted);
  font-size: 12px;
}

.photo-card figcaption span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.part-photo-grid {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.part-photo-card img {
  aspect-ratio: 1;
}

.part-photo-card figcaption {
  grid-template-columns: minmax(0, 1fr);
  min-height: 28px;
}

.part-photo-card figcaption small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-ai-note {
  grid-column: 1;
  display: block;
  overflow: hidden;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card figcaption .quiet-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex: 0 0 34px;
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 28, 23, 0.72);
}

.lightbox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.lightbox-head,
.lightbox-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lightbox-head strong,
.lightbox-foot span {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lightbox-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  touch-action: pan-y;
}

.lightbox-media img {
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: calc(100dvh - 92px);
  border-radius: var(--radius);
  background: #101615;
  object-fit: contain;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(10, 18, 16, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: 0.46;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(10, 18, 16, 0.32);
  opacity: 0.82;
}

.lightbox-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.lightbox-nav:disabled {
  display: none;
}

.lightbox-nav svg {
  width: 24px;
  height: 24px;
}

.lightbox-nav-prev {
  left: 10px;
}

.lightbox-nav-next {
  right: 10px;
}

.lightbox-media > span {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 1;
  min-width: 42px;
  padding: 4px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(10, 18, 16, 0.3);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 28, 23, 0.45);
}

.modal {
  width: min(900px, calc(100vw - 36px));
  max-height: min(94vh, 900px);
  overflow: auto;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.modal-head,
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.modal-foot .modal-action-btn {
  flex: 0 0 124px;
  min-height: 36px;
  padding: 0 12px;
  gap: 7px;
  font-size: 14px;
  font-weight: 780;
}

.modal-foot .modal-action-btn .icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.return-checklist-modal .modal-foot {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
}

.return-checklist-modal .modal-foot .autosave-state {
  min-width: 0;
}

.return-checklist-modal .modal-foot .modal-action-btn {
  flex-basis: auto;
  min-width: 0;
  min-height: 36px;
  white-space: nowrap;
}

.return-checklist-modal .modal-foot .primary-btn[type="submit"] {
  min-width: 286px;
  padding-inline: 18px;
}

.modal-title {
  margin: 0;
  font-size: 18px;
}

.modal-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.ticket-report-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.report-print-btn,
.report-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #bfd9d2;
  border-radius: var(--radius);
  color: var(--accent);
  background: #f8fcfb;
  font-weight: 820;
  cursor: pointer;
}

.report-print-btn:hover,
.report-type-btn:hover,
.report-type-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.report-print-btn .icon,
.report-type-btn .icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.modal-body {
  padding: 12px;
}

.ticket-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(840px, calc(100vw - 36px));
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

.ticket-modal-with-side {
  width: min(1240px, calc(100vw - 28px));
}

.ticket-editor-layout {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.ticket-modal-with-side .ticket-editor-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
}

.ticket-modal-side {
  position: sticky;
  top: 0;
  display: grid;
  gap: 10px;
  max-height: calc(100dvh - 116px);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-muted);
  overflow: auto;
  scrollbar-width: thin;
}

.ticket-modal-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ticket-modal-side-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ticket-modal-side-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.ticket-modal-side-head span,
.ticket-modal-side .compact-note {
  color: var(--muted);
  font-size: 12px;
}

.ticket-modal-side .row-action {
  min-height: 30px;
  padding-inline: 10px;
  white-space: nowrap;
}

.ticket-modal-side section {
  min-width: 0;
}

.ticket-modal-side p {
  margin: 0;
  color: var(--ink);
  line-height: 1.35;
}

.side-mini-list {
  display: grid;
  gap: 6px;
}

.side-mini-list > div {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.side-mini-list strong {
  color: var(--ink);
  font-size: 12.5px;
}

.side-mini-list span {
  color: var(--muted);
  font-size: 11.5px;
}

.ticket-modal-side .side-log .log-item {
  padding-left: 9px;
}

.ticket-modal .modal-head,
.ticket-modal .modal-foot {
  padding: 6px 12px;
}

.ticket-modal .modal-title {
  font-size: 16px;
  line-height: 1.15;
}

.ticket-modal .modal-body {
  min-height: 0;
  padding: 6px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ticket-modal .form-grid {
  gap: 4px 8px;
}

.ticket-modal .device-compact {
  gap: 7px;
  min-height: 46px;
  padding: 5px 9px;
  border-radius: 9px;
}

.ticket-modal .device-compact-title {
  gap: 2px;
}

.ticket-modal .device-compact-title span {
  font-size: 10.5px;
}

.ticket-modal .device-compact-title strong {
  font-size: 13px;
  line-height: 1.15;
}

.ticket-modal .device-compact .row-action {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.ticket-modal .field {
  gap: 2px;
}

.ticket-modal .field > span,
.ticket-modal .field label {
  font-size: 11.5px;
}

.ticket-modal .field input:not([type="checkbox"]),
.ticket-modal .field select,
.ticket-modal .field textarea {
  min-height: 29px;
  padding: 4px 8px;
}

.ticket-modal .readonly-field-value {
  min-height: 29px;
  padding: 4px 8px;
  line-height: 1.2;
}

.ticket-modal .status-master-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
}

.ticket-modal .intake-layout {
  gap: 5px 8px;
}

.ticket-modal .date-fields-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  align-items: start;
}

.ticket-modal .date-fields-row .field {
  gap: 2px;
  min-width: 0;
}

.ticket-modal .date-fields-row .field > span {
  color: #173f39;
  font-size: 12px;
  font-weight: 900;
}

.ticket-modal .date-fields-row .field input {
  font-weight: 850;
}

.ticket-modal .intake-main-text,
.ticket-modal .intake-diagnosis-text,
.ticket-modal .intake-quick-flags {
  gap: 4px;
}

.ticket-modal .intake-layout textarea {
  min-height: 62px;
}

.ticket-modal .voice-btn {
  width: 24px;
  height: 24px;
}

.ticket-modal .inline-voice-btn {
  width: 22px;
  height: 22px;
}

.ticket-modal .voice-btn .icon {
  width: 15px;
  height: 15px;
}

.ticket-modal .voice-wrap textarea,
.ticket-modal .predictive-wrap textarea {
  padding-right: 38px;
}

.ticket-modal .predictive-wrap .voice-btn,
.ticket-modal .voice-wrap:has(textarea) .voice-btn {
  top: auto;
  right: 8px;
  bottom: 8px;
  transform: none;
}

.ticket-modal .intake-flags-panel {
  gap: 4px 5px;
  padding: 4px 7px;
}

.ticket-modal .intake-flags-panel .check-card,
.ticket-modal .form-section-grid .check-card {
  min-height: 24px;
  padding: 3px 9px;
  font-size: 11.7px;
}

.ticket-modal .check-card input {
  flex: 0 0 15px;
  width: 15px;
  min-width: 15px;
  max-width: 15px;
  height: 15px;
  min-height: 0;
  max-height: 15px;
  padding: 0;
}

.ticket-modal .form-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  align-items: start;
  margin-top: -4px;
}

.ticket-modal .form-section-grid > .compact-check-section {
  min-width: 0;
}

.ticket-modal .form-section-grid .checks {
  gap: 4px;
}

.ticket-modal .compact-check-section {
  gap: 4px;
}

.ticket-modal .compact-check-section > label,
.ticket-modal .form-section-grid .compact-check-section > label,
.ticket-modal .intake-flags-title {
  font-size: 11px;
}

.ticket-modal [name="publicDescription"] {
  min-height: 40px;
}

.ticket-modal .drafts {
  gap: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 8px;
}

.ticket-modal .empty-inbox p {
  display: none;
  font-size: 11px;
  line-height: 1.25;
}

.ticket-modal .device-picker-head {
  font-size: 11.5px;
}

.ticket-modal .modal-foot .modal-action-btn {
  min-height: 30px;
  flex-basis: 108px;
  padding: 0 9px;
  font-size: 12.5px;
}

.ticket-modal .autosave-state {
  font-size: 11.5px;
}

@media (max-width: 860px), (max-height: 720px) {
  .ticket-modal {
    min-height: 0;
    max-height: calc(100dvh - 16px);
  }

  .ticket-modal-with-side {
    width: min(100%, calc(100vw - 16px));
  }

  .ticket-modal-with-side .ticket-editor-layout {
    grid-template-columns: 1fr;
  }

  .ticket-modal-side {
    position: static;
    max-height: none;
  }

  .ticket-modal .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  .master-handoff-toast {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    grid-template-columns: 1fr;
  }

  .master-handoff-toast-actions,
  .accept-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ticket-modal {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }
}

.movement-modal {
  width: min(1180px, calc(100vw - 40px));
  max-height: min(88dvh, 920px);
}

.knowledge-modal {
  width: min(980px, calc(100vw - 40px));
  max-height: min(86dvh, 820px);
}

.report-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 40px));
  max-height: min(92dvh, 900px);
  overflow: hidden;
}

.report-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.report-builder {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.report-editor,
.report-preview-shell {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-muted);
}

.report-editor {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
}

.report-editor-hint {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid #b7d9d2;
  border-radius: var(--radius);
  color: var(--muted);
  background: #eef9f7;
  font-size: 12.5px;
  line-height: 1.35;
}

.report-editor-hint strong {
  color: var(--ink);
  font-size: 13px;
}

.report-editor textarea {
  min-height: 92px;
  resize: vertical;
}

.report-section-picker {
  display: grid;
  gap: 8px;
}

.report-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.report-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-weight: 760;
  cursor: pointer;
}

.report-section-toggle input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--accent);
}

.report-preview-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.report-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.report-preview-toolbar strong {
  color: var(--ink);
}

.report-preview {
  min-height: 0;
  padding: 14px;
  overflow: auto;
  background: #eef2f0;
}

.report-page {
  display: grid;
  gap: 12px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 22px;
  border: 1px solid #dce5e1;
  border-radius: var(--radius);
  background: #ffffff;
  color: #121917;
  box-shadow: 0 14px 28px rgba(25, 37, 33, 0.1);
}

.report-page-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #18231f;
}

.report-page-head span {
  color: #176b62;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.report-page-head h3 {
  margin: 4px 0;
  font-size: 23px;
  line-height: 1.08;
}

.report-page-head p,
.report-page-number span {
  margin: 0;
  color: #62716a;
}

.report-page-number {
  text-align: right;
  white-space: nowrap;
}

.report-page-number strong {
  display: block;
  font-size: 22px;
}

.report-note {
  padding: 9px 11px;
  border: 1px solid #b7d9d2;
  border-radius: var(--radius);
  background: #eef9f7;
  color: #17332e;
}

.report-section {
  display: grid;
  gap: 7px;
}

.report-section h4 {
  margin: 0;
  color: #60716a;
  font-size: 12px;
  font-weight: 860;
  text-transform: uppercase;
}

.report-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dce5e1;
  border-radius: var(--radius);
}

.report-kv-grid div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid #e9efec;
}

.report-kv-grid span,
.report-text-block span,
.report-list-item span,
.report-empty {
  color: #63736c;
}

.report-kv-grid strong,
.report-list-item strong,
.report-list-item b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.report-text-block,
.report-list-item {
  padding: 9px 10px;
  border: 1px solid #dce5e1;
  border-radius: var(--radius);
}

.report-text-block p,
.report-list-item p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report-tags span {
  padding: 3px 8px;
  border: 1px solid #b7d9d2;
  border-radius: 999px;
  color: #176b62;
  background: #eef9f7;
  font-size: 12px;
  font-weight: 820;
}

.report-list {
  display: grid;
  gap: 7px;
}

.report-list-item strong,
.report-list-item span,
.report-list-item b {
  display: block;
}

.report-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.report-photo-grid figure {
  margin: 0;
}

.report-photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #dce5e1;
  border-radius: 6px;
}

.report-photo-grid figcaption {
  margin-top: 3px;
  color: #63736c;
  font-size: 10px;
}

.report-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.report-signatures div {
  display: grid;
  align-content: end;
  min-height: 56px;
  border-bottom: 1px solid #121917;
}

.report-signatures span {
  color: #63736c;
  font-size: 12px;
}

.diagnostic-extra-page {
  gap: 10px;
}

.diagnostic-act-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #18231f;
}

.diagnostic-act-head > div {
  display: grid;
  gap: 3px;
}

.diagnostic-act-head span,
.diagnostic-act-head small {
  color: #63736c;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.diagnostic-act-head strong {
  font-size: 25px;
  line-height: 1.05;
}

.diagnostic-act-head p {
  margin: 0;
  color: #63736c;
}

.diagnostic-act-head b {
  color: #176b62;
  font-size: 22px;
  text-align: right;
}

.diagnostic-act-block {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dce5e1;
  border-radius: 8px;
  background: #ffffff;
}

.diagnostic-act-block h4 {
  margin: 0;
  color: #60716a;
  font-size: 12px;
  font-weight: 860;
  text-transform: uppercase;
}

.diagnostic-act-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.diagnostic-act-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e2ebe7;
  border-radius: 7px;
  background: #f8fbfa;
}

.diagnostic-act-grid span,
.diagnostic-act-block h4 {
  overflow-wrap: anywhere;
}

.diagnostic-act-grid span {
  color: #63736c;
  font-size: 11px;
}

.diagnostic-act-grid strong,
.diagnostic-act-fixed,
.report-inline-print {
  color: #121917;
  font-weight: 760;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.diagnostic-act-fixed {
  margin: 0;
}

.report-inline-field {
  width: 100%;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid #b7d9d2;
  border-radius: 6px;
  background: #fbfefe;
  color: #121917;
  font: inherit;
  font-weight: 700;
  box-shadow: inset 2px 0 0 #176b62;
}

.report-inline-field.multiline {
  min-height: 68px;
  resize: vertical;
  line-height: 1.35;
}

.report-inline-field:focus {
  outline: 2px solid rgba(23, 107, 98, 0.18);
  border-color: #176b62;
}

.report-foot {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  align-items: center;
}

.report-foot .autosave-state {
  min-width: 0;
}

.report-foot .modal-action-btn {
  flex-basis: auto;
  min-width: 0;
  white-space: nowrap;
}

.report-print-action {
  color: var(--accent);
  border-color: #bfd9d2;
}

.handoff-master-modal {
  width: min(520px, calc(100vw - 32px));
}

.handoff-master-note {
  margin-bottom: 10px;
  color: var(--muted);
}

.handoff-master-list {
  display: grid;
  gap: 8px;
}

.handoff-master-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid #bfd9d2;
  border-radius: var(--radius);
  background: #f5fbf9;
  box-shadow: 0 2px 0 rgba(11, 117, 103, 0.12);
}

.handoff-master-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.handoff-master-option .avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-weight: 800;
}

.handoff-master-option strong,
.handoff-master-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handoff-master-option small {
  color: var(--muted);
  font-size: 12px;
}

.movement-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.movement-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.movement-system-toggle {
  min-height: 34px;
  padding: 0 9px 0 11px;
}

.movement-system-toggle .theme-switch {
  width: 31px;
  height: 18px;
}

.movement-system-toggle .theme-switch span {
  width: 12px;
  height: 12px;
}

.movement-system-toggle.active .theme-switch span {
  transform: translateX(13px);
}

.movement-body {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.knowledge-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}

.knowledge-intro {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f5fbf9;
}

.knowledge-intro strong {
  color: var(--accent);
}

.knowledge-intro span,
.knowledge-muted {
  color: var(--muted);
  font-size: 13px;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knowledge-grid section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.knowledge-card {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: rgba(231, 245, 240, 0.68);
}

.knowledge-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-card-head strong {
  min-width: 0;
  color: var(--accent);
}

.knowledge-card-head span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.knowledge-card p {
  margin: 0;
  line-height: 1.35;
}

.knowledge-digest {
  display: grid;
  gap: 0;
}

.knowledge-digest-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px dashed #c7ddd7;
}

.knowledge-digest-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.knowledge-digest-row:last-child {
  padding-bottom: 0;
}

.knowledge-digest-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.knowledge-digest-text {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.knowledge-result {
  padding-top: 6px;
  border-top: 1px dashed #c7ddd7;
  color: var(--muted);
  font-size: 13px;
}

.knowledge-empty,
.knowledge-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f8fcfa;
}

.knowledge-error {
  border-color: #f0c7c7;
  color: var(--danger);
  background: #fff7f7;
}

.movement-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.movement-summary div {
  display: grid;
  gap: 2px;
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f5fbf9;
}

.movement-summary strong {
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.movement-summary span {
  color: var(--muted);
  font-size: 12px;
}

.movement-section {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.movement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.movement-photos-panel,
.movement-chat-panel {
  min-height: 0;
  padding: 10px;
  border: 1px solid #d6e6e2;
  border-radius: var(--radius);
  background: #fbfdfc;
}

.movement-chat-full {
  min-height: 0;
}

.compact-section-head {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 0;
}

.movement-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  align-content: start;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

.movement-photo,
.movement-thumb {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
}

.movement-photo {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.movement-photo img,
.movement-thumb img {
  width: 100%;
  object-fit: cover;
  background: #eef5f2;
}

.movement-photo img {
  aspect-ratio: 1 / 1;
}

.movement-photo span {
  padding: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movement-timeline {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #dcebe7;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 16%, rgba(30, 127, 111, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(231, 245, 240, 0.7), rgba(255, 255, 255, 0.92)),
    #f4faf8;
}

.movement-event {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: min(68%, 660px);
}

.movement-event.movement-status,
.movement-event.movement-note {
  width: min(64%, 760px);
}

.movement-event.movement-photo,
.movement-event.movement-voice {
  width: min(56%, 420px);
  border: 0;
  background: transparent;
  cursor: default;
  overflow: visible;
}

.movement-event.movement-photoAlbum {
  width: min(68%, 620px);
  border: 0;
  background: transparent;
  cursor: default;
  overflow: visible;
}

.movement-event:hover {
  filter: brightness(0.99);
}

.movement-event.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.movement-event.other {
  align-self: flex-start;
}

.movement-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 5px 14px rgba(10, 91, 79, 0.11);
}

.movement-photo .movement-mark,
.movement-photoAlbum .movement-mark,
.movement-photo .icon,
.movement-photoAlbum .icon {
  color: var(--accent);
}

.movement-event-body {
  display: grid;
  gap: 5px;
  min-width: 0;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d5e6e2;
  border-radius: 13px 13px 13px 4px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(29, 39, 36, 0.05);
}

.movement-event.mine .movement-event-body {
  border-color: #b8ded6;
  border-radius: 13px 13px 4px 13px;
  background: #eaf8f4;
}

.movement-status .movement-event-body,
.movement-note .movement-event-body {
  display: block;
  padding: 4px 7px;
  border-color: rgba(125, 190, 178, 0.5);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 4px 12px rgba(29, 39, 36, 0.035);
}

.movement-status.mine .movement-event-body,
.movement-note.mine .movement-event-body {
  background: rgba(234, 248, 244, 0.76);
}

.movement-status .movement-mark,
.movement-note .movement-mark {
  width: 20px;
  height: 20px;
  opacity: 0.62;
  box-shadow: 0 2px 8px rgba(10, 91, 79, 0.07);
}

.movement-status .movement-mark .icon,
.movement-note .movement-mark .icon {
  width: 13px;
  height: 13px;
}

.movement-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.movement-event-head span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.movement-event-head time,
.movement-event-meta,
.voice-note-card small {
  color: var(--muted);
  font-size: 11px;
}

.movement-event-text {
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.38;
  white-space: pre-wrap;
}

.movement-compact-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  white-space: nowrap;
}

.movement-compact-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.6px;
  line-height: 1.18;
  text-overflow: ellipsis;
}

.movement-compact-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1;
}

.movement-mini-card,
.voice-note-card {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid #cde0db;
  border-radius: 8px;
  background: #f6fbf9;
  color: var(--muted);
  font-size: 12px;
}

.voice-note-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--accent);
  font-size: 12px;
  font-weight: 760;
}

.voice-note-head .icon {
  width: 15px;
  height: 15px;
}

.movement-chat-photo {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cde0db;
  border-radius: 12px;
  background: #eef5f2;
  cursor: pointer;
}

.movement-chat-photo img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

.movement-photo-album {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  overflow: hidden;
  border: 1px solid #cde0db;
  border-radius: 12px;
  background: #eef5f2;
}

.movement-photo-album:has(.movement-photo-tile:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.movement-photo-album:has(.movement-photo-tile:first-child:last-child) {
  grid-template-columns: 1fr;
}

.movement-photo-tile {
  position: relative;
  min-height: 118px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #e7f2ef;
  cursor: pointer;
}

.movement-photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 118px;
  object-fit: cover;
}

.movement-photo-tile span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 850;
  background: rgba(13, 61, 53, 0.48);
}

.movement-thumb {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  max-width: 280px;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 760;
}

.movement-thumb img {
  height: 64px;
}

.movement-thumb span {
  padding: 0 8px;
}

.movement-audio {
  width: 100%;
  max-width: 520px;
}

.audio-rate-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.audio-rate-btn {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #bfdad4;
  border-radius: 7px;
  background: #ffffff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(10, 91, 79, 0.04);
}

.audio-rate-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 3px 9px rgba(10, 91, 79, 0.13);
}

.voice-file-note {
  color: var(--muted);
  font-size: 12px;
}

.movement-empty {
  padding: 18px;
  border: 1px dashed #cde0db;
  border-radius: var(--radius);
  color: var(--muted);
  background: #f8fbfa;
  text-align: center;
}

.movement-foot {
  justify-content: flex-end;
}

.login-screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 48px);
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(6, 43, 39, 0.86), rgba(8, 57, 51, 0.62)),
    url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=80")
      center/cover;
}

.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.2), transparent 38%);
  pointer-events: none;
}

.login-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 3vw, 36px);
  color: #ffffff;
  pointer-events: none;
}

.login-art .brand {
  width: fit-content;
  min-height: 44px;
  margin-bottom: 0;
  padding: 6px 13px 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #f7fffb;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.login-art .brand:hover {
  color: #ffffff;
}

.login-art .brand-mark {
  color: #ffffff;
  background: rgba(23, 123, 111, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.login-art h1 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.04;
  text-wrap: balance;
}

.login-art p {
  max-width: 460px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}

.login-presentation-link {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(23, 123, 111, 0.72);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 800;
  pointer-events: auto;
  backdrop-filter: blur(12px);
}

.login-presentation-link:hover {
  color: #ffffff;
  background: rgba(23, 123, 111, 0.9);
}

.login-presentation-link .icon {
  width: 18px;
  height: 18px;
}

.login-panel {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 13px;
  width: min(430px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(205, 224, 219, 0.86);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
}

.login-panel-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.login-panel-head .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
}

.login-panel .page-title {
  font-size: 22px;
}

.login-panel .page-subtitle {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.3;
}

.account-list {
  display: grid;
  gap: 10px;
}

.account-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}

.account-card.active {
  border-color: #91c7c0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.account-card strong {
  display: block;
}

.login-box {
  display: grid;
  gap: 11px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.auth-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 4px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f6faf8;
}

.auth-methods .tab-btn,
.auth-tabs .tab-btn {
  min-height: 32px;
  padding: 0 10px;
}

.auth-tabs {
  gap: 7px;
  padding: 4px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #f6faf8;
}

.auth-inner-form {
  display: grid;
  gap: 10px;
}

.email-code-actions {
  display: grid;
  grid-template-columns: minmax(120px, auto) 44px minmax(0, 1fr);
  gap: 8px;
}

.email-code-resend-btn {
  min-width: 44px;
  padding: 0;
}

.auth-note {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #cdebe5;
  border-radius: 8px;
  color: var(--muted);
  background: #f4fbf9;
  line-height: 1.45;
  font-size: 13px;
}

.social-auth {
  display: grid;
  gap: 9px;
}

.social-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.social-divider::before,
.social-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.social-auth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #cfdcd7;
  border-radius: var(--radius);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f6faf8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -2px 0 rgba(21, 67, 59, 0.04),
    0 2px 5px rgba(18, 84, 76, 0.06);
  font-weight: 730;
  cursor: pointer;
}

.social-btn span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #ffffff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 850;
}

.social-btn:hover {
  border-color: #b9d3cc;
  color: var(--accent);
  transform: translateY(-1px);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: min(380px, calc(100vw - 36px));
  padding: 13px 14px;
  border: 1px solid #cde0db;
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.confirm-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 65;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(430px, calc(100vw - 36px));
  padding: 10px;
  border: 1px solid #bddad4;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(24, 42, 34, 0.16);
}

.confirm-toast-text {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.32;
}

.confirm-toast-actions {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.confirm-toast .quiet-btn,
.confirm-toast .primary-btn {
  min-height: 30px;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 820;
}

.mobile-only {
  display: none;
}

.mobile-logout {
  color: var(--danger);
}

@media (max-width: 1180px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-summary-strip,
  .settings-list,
  .profile-settings,
  .finance-settings-list,
  .integration-settings {
    display: contents;
  }

  .settings-form {
    grid-template-columns: 1fr;
  }

  .integration-settings .settings-field {
    grid-template-columns: 1fr;
    grid-column: 1;
  }

  .integration-settings .inline-check {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .finance-layout {
    grid-template-columns: 1fr;
  }

  .ai-base-layout {
    grid-template-columns: 1fr;
  }

  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail {
    position: static;
    max-height: none;
  }

  .detail-resizer {
    display: none;
  }
}

@media (max-width: 1420px) and (min-width: 1181px) {
  .detail-actions .row-action {
    padding: 0 7px;
    font-size: 12px;
  }
}

@media (max-width: 860px) {
  html {
    font-size: 13px;
  }

  .detail-panel-switch-card {
    display: none;
  }

  .app-shell {
    display: block;
    min-height: 100dvh;
  }

  .sidebar {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 15;
    width: 100%;
    height: auto;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(24, 42, 34, 0.08);
  }

  .brand {
    width: max-content;
    min-height: 32px;
    margin-bottom: 7px;
    padding: 0;
    font-size: 14px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .side-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar,
  .chips::-webkit-scrollbar {
    display: none;
  }

  .nav-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  .side-nav .mobile-only {
    display: inline-flex;
  }

  .mobile-logout {
    border: 1px solid #f0c7c7;
    color: var(--danger);
    background: #fff7f7;
  }

  .sidebar-footer {
    display: none;
  }

  .sidebar-resizer {
    display: none;
  }

  .main {
    padding: 12px 10px 18px;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  .top-actions {
    justify-content: flex-start;
    gap: 7px;
  }

  .admin-table-wrap {
    max-height: 58vh;
  }

  .admin-table {
    min-width: 880px;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .metric {
    min-height: 48px;
  }

  .toolbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 2px;
  }

  .chip {
    flex: 0 0 auto;
    min-height: 34px;
  }

  .content-grid {
    grid-template-rows: minmax(210px, 34dvh) auto;
    gap: 10px;
  }

  .phones-content-grid {
    grid-template-rows: auto auto;
  }

  .content-grid > .panel:first-child {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: clamp(210px, 34dvh, 330px);
    min-height: 210px;
    max-height: 34dvh;
    padding: 6px;
    border: 1.5px solid #afd8d1;
    background:
      linear-gradient(180deg, rgba(239, 250, 247, 0.95), rgba(250, 253, 252, 0.96));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.72),
      0 4px 12px rgba(24, 42, 34, 0.06);
    overflow: hidden;
  }

  .phones-content-grid > .panel:first-child {
    height: auto;
    min-height: 0;
    max-height: 34dvh;
  }

  .table-wrap {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    border: 0;
    border-radius: 8px;
    background: transparent;
  }

  .phones-content-grid > .panel:first-child .table-wrap {
    height: auto;
    max-height: calc(34dvh - 12px);
  }

  table,
  tbody,
  tr,
  td {
    display: block;
  }

  table {
    min-width: 0;
  }

  .finance-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .finance-overview {
    grid-template-columns: 1fr;
  }

  .ai-base-panel,
  .ai-base-side {
    padding: 10px;
  }

  .ai-base-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .ai-base-toolbar {
    grid-template-columns: 1fr;
  }

  .ai-base-list {
    max-height: none;
  }

  .finance-panel {
    padding: 10px;
  }

  .parts-voice-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-table {
    min-width: 760px;
  }

  .phones-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: 10px;
    padding: 0;
  }

  tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(76px, max-content);
    grid-template-areas: "ticket-summary ticket-status";
    gap: 3px 8px;
    align-items: center;
    min-height: 72px;
    padding: 10px 12px 10px 24px;
    max-width: 100%;
    border: 1px solid #dce8e5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(24, 42, 34, 0.07);
    overflow: hidden;
  }

  tbody tr::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 12px;
    width: 2px;
    border-radius: 999px;
    background: #6fcfc4;
    content: "";
  }

  tbody tr.selected {
    border-color: #bfe9e2;
    background: #f1fffc;
    box-shadow: 0 12px 28px rgba(24, 42, 34, 0.08);
  }

  tbody tr.selected::before {
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    border-radius: 8px 0 0 8px;
    background: #19a99a;
  }

  .phones-table tbody tr.ai-draft-row,
  .phones-table tbody tr.ai-draft-row:hover,
  .phones-table tbody tr.ai-draft-row.selected {
    border-color: rgba(42, 188, 255, 0.82);
    background:
      linear-gradient(90deg, rgba(48, 164, 255, 0.14), rgba(121, 229, 255, 0.045) 58%, rgba(48, 164, 255, 0.12)),
      var(--panel);
    outline: 0;
    box-shadow:
      inset 0 0 0 1px rgba(139, 228, 255, 0.46),
      inset 0 0 16px rgba(48, 164, 255, 0.1),
      0 10px 24px rgba(24, 42, 34, 0.07);
  }

  .phones-table tbody tr.ai-draft-row::after {
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(88, 209, 255, 0.72);
    border-radius: 7px;
    box-shadow:
      inset 0 0 14px rgba(48, 164, 255, 0.12);
    content: "";
    pointer-events: none;
  }

  .phones-table tbody tr.ai-draft-row::before {
    background: #39bfff;
    box-shadow: none;
  }

  .phones-table tbody tr.master-colored-row,
  .phones-table tbody tr.master-colored-row:hover,
  .phones-table tbody tr.master-colored-row.selected {
    border-color: color-mix(in srgb, var(--master-row-line) 76%, #ffffff);
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--master-row-line) 18%, transparent), color-mix(in srgb, var(--master-row-line) 5%, transparent) 58%, color-mix(in srgb, var(--master-row-line) 14%, transparent)),
      var(--panel);
    outline: 0;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--master-row-line) 38%, transparent),
      inset 0 0 16px color-mix(in srgb, var(--master-row-line) 12%, transparent),
      0 10px 24px rgba(24, 42, 34, 0.07);
  }

  .phones-table tbody tr.master-colored-row::after {
    position: absolute;
    inset: 3px;
    border: 1px solid color-mix(in srgb, var(--master-row-line) 68%, transparent);
    border-radius: 7px;
    box-shadow:
      inset 0 0 14px color-mix(in srgb, var(--master-row-line) 13%, transparent);
    content: "";
    pointer-events: none;
  }

  .phones-table tbody tr.master-colored-row::before {
    background: var(--master-row-line);
    box-shadow: none;
  }

  td {
    padding: 0;
    border-bottom: 0;
    font-size: 13px;
  }

  .phones-table td:nth-child(1) {
    display: none;
  }

  .phones-table td:nth-child(2) {
    grid-area: ticket-status;
    align-self: center;
    justify-self: end;
    width: auto;
    padding: 0;
  }

  .phones-table td:nth-child(4) {
    grid-area: ticket-summary;
    align-self: center;
    width: auto;
    min-width: 0;
    padding: 0;
    overflow: hidden;
  }

  .phones-table td:nth-child(5) {
    display: none;
  }

  .phones-table td:nth-child(3),
  .phones-table td:nth-child(6),
  .phones-table td:nth-child(7),
  .phones-table td:nth-child(8) {
    display: none;
  }

  .desktop-device-line {
    display: none;
  }

  .phones-table .mobile-device-line {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 880;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phones-table .mobile-client-line {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10.8px;
    font-weight: 760;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phones-table .mobile-issue-line {
    display: block;
    max-width: 100%;
    margin-top: 1px;
    overflow: hidden;
    color: #7c8783;
    font-size: 10.2px;
    font-weight: 650;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phones-table .ticket-no {
    gap: 4px;
    min-height: 24px;
    font-size: 12px;
    white-space: nowrap;
  }

  .phones-table .ticket-no .icon {
    width: 15px;
    height: 15px;
  }

  .phones-table td:nth-child(4) strong,
  .phones-table td:nth-child(4) .muted {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phones-table .status-badge {
    min-height: 24px;
    padding: 0 10px;
    font-size: 10.5px;
    white-space: nowrap;
  }

  .phones-table .issue-preview-cell {
    width: auto;
    max-width: none;
  }

  .phones-table .ticket-issue-stack {
    min-height: 0;
    max-height: 24px;
    gap: 0;
  }

  .phones-table .table-issue-preview {
    max-width: 100%;
    font-size: 12.5px;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .clients-table tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 76px;
    gap: 2px 8px;
    padding: 8px 10px 8px 20px;
  }

  .clients-table td {
    display: block;
    min-width: 0;
  }

  .clients-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .clients-table td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    color: var(--muted);
  }

  .clients-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    color: var(--ink);
    font-weight: 800;
  }

  .clients-table td:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 100%;
    padding-right: 86px;
  }

  .clients-table td:nth-child(5) {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    justify-self: end;
  }

  .clients-table .client-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: flex-end;
    gap: 4px;
    width: auto;
  }

  .clients-table .client-actions .row-action {
    width: 28px;
    min-height: 22px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  .clients-table .client-actions .row-action .icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .detail-actions .row-action {
    min-height: 36px;
  }

  .detail {
    border-color: #cde0db;
  }

  .section-head {
    align-items: flex-start;
  }

  .photo-upload {
    min-width: 108px;
  }

  .login-screen {
    grid-template-columns: 1fr;
  }

  .login-art {
    min-height: auto;
  }

  .login-art > div:last-child {
    display: grid;
    gap: 6px;
    align-self: center;
    width: min(390px, calc(100vw - 28px));
    margin: 0 auto 8px;
    padding: 0 14px;
    text-align: center;
  }

  .login-art h1 {
    max-width: none;
    font-size: 20px;
    line-height: 1.14;
  }

  .login-art p {
    max-width: none;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .login-presentation-link {
    justify-self: center;
    margin-top: 4px;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  body,
  .app-shell,
  .main,
  .content-grid,
  .content-grid > .panel:first-child,
  .table-wrap,
  .phones-table,
  .phones-table tbody,
  .phones-table tbody tr {
    max-width: 100%;
    overflow-x: hidden;
  }

  .phones-table tbody tr {
    grid-template-columns: minmax(0, 1fr) minmax(76px, max-content);
    grid-template-areas: "ticket-summary ticket-status";
    min-height: 72px;
    gap: 3px 8px;
    padding: 10px 12px 10px 24px;
  }

  .phones-table td:nth-child(1),
  .phones-table td:nth-child(3),
  .phones-table td:nth-child(5),
  .phones-table td:nth-child(6),
  .phones-table td:nth-child(7),
  .phones-table td:nth-child(8) {
    display: none;
  }

  .phones-table td:nth-child(2) {
    grid-area: ticket-status;
    align-self: center;
    justify-self: end;
    width: auto;
    padding: 0;
  }

  .phones-table td:nth-child(4) {
    grid-area: ticket-summary;
    align-self: center;
    width: auto;
    padding: 0;
  }

  .phones-table .ticket-no {
    font-size: 11.5px;
  }

  .phones-table td:nth-child(4) strong,
  .phones-table td:nth-child(4) .muted {
    display: none;
  }

  .phones-table .mobile-device-line {
    font-size: 12.8px;
    font-weight: 880;
    line-height: 1.15;
  }

  .phones-table .mobile-client-line {
    font-size: 10.4px;
  }

  .phones-table .mobile-issue-line {
    font-size: 10px;
  }
}

@media (max-width: 620px) {
  html,
  body,
  #app,
  .app-shell,
  .main,
  .modal-backdrop,
  .modal,
  .modal-body,
  .form-grid,
  .form-section-grid,
  .field,
  .field.full,
  .intake-layout,
  .intake-main-text,
  .intake-diagnosis-text,
  .intake-quick-flags,
  .status-master-row,
  .date-fields-row,
  .compact-check-section,
  .checks {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  body,
  .modal,
  .modal-body {
    touch-action: pan-y;
  }

  .main,
  .login-panel,
  .login-art {
    padding: 12px;
  }

  .page-title {
    font-size: 20px;
  }

  .part-model-strip {
    gap: 5px;
    margin: -2px -2px 8px;
    padding: 0 2px 6px;
    scrollbar-width: none;
  }

  .part-model-strip::-webkit-scrollbar {
    display: none;
  }

  .part-model-chip {
    min-height: 25px;
    padding: 0 8px;
    gap: 4px;
  }

  .part-model-chip strong {
    font-size: 11px;
  }

  .part-model-chip span {
    font-size: 9.5px;
  }

  .login-screen {
    padding: 12px;
  }

  .login-panel {
    width: min(100%, 390px);
    padding: 14px;
  }

  .social-auth-grid {
    grid-template-columns: 1fr;
  }

  .email-code-actions {
    grid-template-columns: 1fr;
  }

  .admin-metrics {
    grid-template-columns: 1fr;
  }

  .admin-section-head {
    align-items: flex-start;
  }

  .content-grid {
    grid-template-rows: minmax(205px, 32dvh) auto;
  }

  .inventory-layout {
    grid-template-rows: minmax(410px, 58dvh) auto;
  }

  .phones-content-grid {
    grid-template-rows: auto auto;
  }

  .content-grid > .panel:first-child {
    height: clamp(205px, 32dvh, 310px);
    min-height: 205px;
    max-height: 32dvh;
  }

  .inventory-layout > .panel:first-child {
    height: clamp(410px, 58dvh, 640px);
    min-height: 410px;
    max-height: 58dvh;
  }

  .inventory-layout > .panel:first-child .table-wrap {
    height: 100%;
    max-height: none;
  }

  .parts-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .parts-table thead {
    display: none;
  }

  .parts-table tbody {
    display: grid;
    gap: 5px;
  }

  .parts-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 4px 8px;
    align-items: center;
    min-height: 46px;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
  }

  .parts-table tr.selected {
    border-color: #87c9bd;
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .parts-table td {
    display: none;
    padding: 0;
    border: 0;
    font-size: 11px;
  }

  .parts-table td:first-child,
  .parts-table td:nth-child(2) {
    display: block;
  }

  .parts-table td:first-child {
    min-width: 0;
  }

  .parts-table td:nth-child(2) {
    justify-self: end;
  }

  .part-table-item {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
  }

  .part-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .part-table-text {
    gap: 1px;
  }

  .part-table-text strong {
    font-size: 12.2px;
    line-height: 1.15;
  }

  .part-table-text span {
    font-size: 10.6px;
    line-height: 1.15;
  }

  .part-table-note {
    font-size: 9.8px;
  }

  .parts-table .part-status {
    min-height: 20px;
    padding: 0 7px;
    font-size: 10px;
  }

  .phones-content-grid > .panel:first-child {
    height: auto;
    min-height: 0;
    max-height: 32dvh;
  }

  .phones-content-grid > .panel:first-child .table-wrap {
    height: auto;
    max-height: calc(32dvh - 12px);
  }

  .login-art .brand {
    min-height: 38px;
    padding: 5px 10px 5px 6px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .parts-voice-fields {
    grid-template-columns: 1fr;
  }

  .donor-part-edit-grid {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
  }

  .donor-part-photo-slot {
    grid-template-columns: 62px minmax(0, 1fr);
    min-height: 62px;
  }

  .donor-part-edit-grid .donor-part-photo-slot {
    grid-template-columns: 1fr;
  }

  .donor-part-photo-btn {
    width: 62px;
    height: 62px;
  }

  .donor-part-edit-grid .donor-part-photo-btn {
    width: 74px;
    min-height: 118px;
  }

  .status-master-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ticket-modal .status-master-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
  }

  .field input,
  .field select,
  .field textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }

  input:not([type="checkbox"]),
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }

  .intake-layout {
    grid-template-columns: 1fr;
  }

  .intake-layout textarea {
    min-height: 82px;
  }

  .date-fields-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ticket-modal .date-fields-row {
    gap: 6px;
  }

  .date-fields-row .field {
    gap: 4px;
  }

  .date-fields-row .field > span {
    font-size: 11.5px;
  }

  .date-fields-row .field input {
    width: 100%;
    min-height: 32px;
    padding: 4px 7px;
    text-align: center;
  }

  .master-stage-grid {
    grid-template-columns: 1fr;
  }

  .modal-body {
    padding: 10px;
  }

  .movement-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .movement-layout {
    grid-template-columns: 1fr;
  }

  .movement-photo-grid {
    max-height: none;
  }

  .movement-timeline {
    max-height: none;
    overflow: visible;
    padding: 10px;
  }

  .checks {
    gap: 8px;
  }

  .intake-quick-flags {
    justify-items: stretch;
    gap: 6px;
    padding: 6px;
  }

  .intake-flags-title {
    justify-self: center;
  }

  .intake-flags-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    padding: 6px;
  }

  .camera-check-section .checks,
  .basic-check-section .checks,
  .intake-quick-flags .basic-check-section .checks {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
  }

  .intake-quick-flags .check-card {
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .form-section-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ticket-modal .form-section-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .resource-layout,
  .resource-form-row,
  .resource-row {
    grid-template-columns: 1fr;
  }

  .resource-money {
    width: 100%;
    justify-self: stretch;
    text-align: left;
  }

  .resource-row-actions,
  .resource-attach-btn {
    width: 100%;
    justify-self: stretch;
  }

  .resource-row-actions {
    justify-content: flex-start;
  }

  .resource-row.part-row {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .resource-row.part-row .resource-attach-btn,
  .resource-row.part-row .resource-mini-action {
    width: 28px;
    min-width: 28px;
    justify-self: end;
  }

  .resource-submit {
    justify-self: stretch;
  }

  .device-picker-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .draft-card,
  .draft-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .modal-backdrop {
    padding: 0;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .ticket-modal .modal-head {
    align-items: flex-start;
  }

  .modal-head-actions {
    gap: 6px;
  }

  .ticket-report-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(230px, 58vw);
  }

  .report-print-btn {
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .movement-backdrop {
    align-items: stretch;
    justify-items: stretch;
    padding: 8px;
    overflow: hidden;
  }

  .movement-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    min-height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    border-radius: 12px;
  }

  .knowledge-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    min-height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    border-radius: 12px;
  }

  .report-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    min-height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    border-radius: 12px;
  }

  .report-modal .modal-head {
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .report-head-actions {
    gap: 6px;
  }

  .report-type-btn {
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .report-builder {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(260px, 1fr);
    overflow-y: auto;
  }

  .report-editor {
    overflow: visible;
  }

  .report-section-grid {
    grid-template-columns: 1fr 1fr;
  }

  .report-preview-shell {
    min-height: 320px;
  }

  .report-preview {
    padding: 10px;
  }

  .report-page {
    padding: 16px;
  }

  .report-page-head,
  .report-signatures {
    grid-template-columns: 1fr;
    display: grid;
  }

  .report-page-number {
    text-align: left;
  }

  .report-kv-grid {
    grid-template-columns: 1fr;
  }

  .report-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-foot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .report-foot .autosave-state {
    grid-column: 1 / -1;
    order: -1;
  }

  .report-foot .modal-action-btn {
    width: 100%;
  }

  .knowledge-body {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
  }

  .knowledge-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .knowledge-card {
    padding: 8px 9px;
  }

  .knowledge-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .knowledge-digest-row {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
  }

  .movement-modal .modal-head {
    min-width: 0;
    padding: 10px 12px;
  }

  .movement-modal .modal-head > div:not(.movement-head-actions) {
    min-width: 0;
    overflow: hidden;
  }

  .movement-head-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .movement-system-toggle {
    min-height: 30px;
    padding: 0 7px 0 8px;
    font-size: 11px;
  }

  .movement-modal .modal-title {
    overflow: hidden;
    max-width: 100%;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .movement-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .movement-body {
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
  }

  .movement-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .movement-summary div {
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
  }

  .movement-summary strong {
    font-size: 16px;
  }

  .movement-layout,
  .movement-chat-full,
  .movement-chat-panel {
    min-width: 0;
    min-height: 0;
  }

  .movement-chat-panel {
    padding: 7px;
    overflow: hidden;
    border-radius: 10px;
  }

  .movement-timeline {
    gap: 6px;
    max-height: none;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    border-radius: 10px;
  }

  .movement-event,
  .movement-event.movement-status,
  .movement-event.movement-note,
  .movement-event.movement-photo,
  .movement-event.movement-voice,
  .movement-event.movement-photoAlbum {
    width: 100%;
    max-width: 100%;
    gap: 6px;
  }

  .movement-event.mine,
  .movement-event.other {
    align-self: stretch;
  }

  .movement-event-body {
    min-width: 0;
    padding: 7px 8px;
  }

  .movement-status .movement-event-body,
  .movement-note .movement-event-body {
    padding: 4px 6px;
  }

  .movement-compact-line {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    width: 100%;
    white-space: nowrap;
  }

  .movement-compact-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 112px);
    white-space: nowrap;
  }

  .movement-compact-meta {
    flex: 0 0 auto;
    justify-self: auto;
    font-size: 10px;
    white-space: nowrap;
  }

  .movement-mark {
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }

  .movement-mark .icon {
    width: 14px;
    height: 14px;
  }

  .movement-foot {
    padding: 8px;
  }

  .modal-foot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .modal-foot .autosave-state {
    grid-column: 1 / -1;
    order: -1;
    min-width: 0;
  }

  .modal-foot .modal-action-btn {
    width: 100%;
    flex-basis: auto;
    min-width: 0;
    min-height: 36px;
    padding: 0 8px;
    white-space: nowrap;
  }

  .modal-foot .danger-btn[data-action="delete-ticket"],
  .modal-foot .danger-btn[data-action="delete-part"],
  .modal-foot .danger-btn[data-action="delete-work"],
  .modal-foot .danger-btn[data-action="delete-master"] {
    grid-column: 1;
    grid-row: 2;
  }

  .modal-foot .quiet-btn[data-action="close-modal"] {
    grid-column: 2;
    grid-row: 2;
  }

  .modal-foot .primary-btn[type="submit"] {
    grid-column: 3;
    grid-row: 2;
  }

  #parts-voice-form .modal-foot .primary-btn[type="submit"],
  #donor-phone-form .modal-foot .primary-btn[type="submit"],
  #parts-voice-confirm-form .modal-foot .primary-btn[type="submit"] {
    flex-basis: auto;
    min-width: 0;
  }

  .return-checklist-modal .modal-foot {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }

  .return-checklist-modal .modal-foot .autosave-state {
    grid-column: auto;
    grid-row: auto;
    order: 0;
  }

  .return-checklist-modal .modal-foot .quiet-btn[data-action="close-modal"],
  .return-checklist-modal .modal-foot .primary-btn[type="submit"] {
    grid-column: auto;
    grid-row: auto;
  }

  .return-checklist-modal .modal-foot .primary-btn[type="submit"] {
    min-width: 0;
  }

  .report-foot .quiet-btn[data-action="close-modal"] {
    grid-column: 1;
    grid-row: 2;
  }

  .report-foot .report-print-action {
    grid-column: 2;
    grid-row: 2;
  }

  .report-foot .primary-btn[type="submit"] {
    grid-column: 3;
    grid-row: 2;
  }

  .lightbox-backdrop {
    padding: 0;
  }

  .lightbox {
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .lightbox-media img {
    max-height: calc(100dvh - 74px);
  }

  .lightbox-nav {
    width: 34px;
    height: 48px;
    background: rgba(10, 18, 16, 0.14);
    opacity: 0.38;
  }

  .lightbox-nav-prev {
    left: 6px;
  }

  .lightbox-nav-next {
    right: 6px;
  }

  .confirm-toast {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    grid-template-columns: 1fr;
  }

  .confirm-toast-actions {
    justify-content: flex-end;
  }
}

:root:is([data-theme="dark"], [data-theme="black"]) {
  color-scheme: dark;
  --bg: #0f1413;
  --panel: #171f1d;
  --panel-muted: #1d2926;
  --ink: #e5eeea;
  --muted: #96a9a4;
  --line: #2b3a36;
  --accent: #6ed8cc;
  --accent-2: #8abcf5;
  --accent-soft: rgba(110, 216, 204, 0.15);
  --warn: #efc66f;
  --warn-soft: rgba(239, 198, 111, 0.15);
  --danger: #ef8585;
  --danger-soft: rgba(239, 133, 133, 0.15);
  --ok: #77d89d;
  --ok-soft: rgba(119, 216, 157, 0.15);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
}

:root[data-theme="black"] {
  --bg: #000000;
  --panel: #050505;
  --panel-muted: #0d0d0d;
  --ink: #f1f3f2;
  --muted: #9da4a1;
  --line: #222222;
  --accent: #f2f4f3;
  --accent-2: #c9d1d8;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --warn: #e8c46e;
  --warn-soft: rgba(232, 196, 110, 0.14);
  --danger: #f18b8b;
  --danger-soft: rgba(241, 139, 139, 0.14);
  --ok: #e0e5e3;
  --ok-soft: rgba(255, 255, 255, 0.1);
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.72);
}

:root:is([data-theme="dark"], [data-theme="black"]) body {
  background: var(--bg);
}

:root:is([data-theme="dark"], [data-theme="black"]) {
  scrollbar-color: rgba(110, 216, 204, 0.34) transparent;
}

:root:is([data-theme="dark"], [data-theme="black"]) body::-webkit-scrollbar-thumb {
  background: rgba(110, 216, 204, 0.34);
  background-clip: content-box;
}

:root:is([data-theme="dark"], [data-theme="black"]) body::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 216, 204, 0.52);
  background-clip: content-box;
}

:root:is([data-theme="dark"], [data-theme="black"]) .sidebar,
:root:is([data-theme="dark"], [data-theme="black"]) th,
:root:is([data-theme="dark"], [data-theme="black"]) .choice-menu,
:root:is([data-theme="dark"], [data-theme="black"]) .photo-card,
:root:is([data-theme="dark"], [data-theme="black"]) .lightbox,
:root:is([data-theme="dark"], [data-theme="black"]) .account-card {
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .metric,
:root:is([data-theme="dark"], [data-theme="black"]) .ghost-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .quiet-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .row-action,
:root:is([data-theme="dark"], [data-theme="black"]) .chip,
:root:is([data-theme="dark"], [data-theme="black"]) .tab-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .user-pill,
:root:is([data-theme="dark"], [data-theme="black"]) .sidebar-collapse-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .search-input,
:root:is([data-theme="dark"], [data-theme="black"]) .field input:not([type="checkbox"]),
:root:is([data-theme="dark"], [data-theme="black"]) .field textarea,
:root:is([data-theme="dark"], [data-theme="black"]) .field select,
:root:is([data-theme="dark"], [data-theme="black"]) .issue-hint,
:root:is([data-theme="dark"], [data-theme="black"]) .social-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .client-save-prompt .row-action {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .admin-section-head,
:root:is([data-theme="dark"], [data-theme="black"]) .admin-table th,
:root:is([data-theme="dark"], [data-theme="black"]) .admin-secret,
:root:is([data-theme="dark"], [data-theme="black"]) .admin-pill {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .admin-notice {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  color: var(--accent);
  background: var(--accent-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .admin-notice.warning {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
  color: #f0c56f;
  background: rgba(160, 93, 0, 0.16);
}

:root:is([data-theme="dark"], [data-theme="black"]) .settings-field,
:root:is([data-theme="dark"], [data-theme="black"]) .settings-note {
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
  color: var(--muted);
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .settings-field span,
:root:is([data-theme="dark"], [data-theme="black"]) .settings-note strong {
  color: var(--accent);
}

:root:is([data-theme="dark"], [data-theme="black"]) .settings-field input:not([type="checkbox"]) {
  border-color: color-mix(in srgb, var(--line) 70%, var(--accent));
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--accent);
}

:root:is([data-theme="dark"], [data-theme="black"]) .settings-field input::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .finance-panel {
  border-color: var(--line);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .finance-tab {
  border-color: var(--line);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.12)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 2px 8px rgba(0, 0, 0, 0.14);
}

:root:is([data-theme="dark"], [data-theme="black"]) .finance-tab.active {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .finance-list-row {
  border-color: color-mix(in srgb, var(--line) 76%, var(--ink));
  color: var(--ink);
  background: var(--panel-muted);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .finance-list-row strong,
:root:is([data-theme="dark"], [data-theme="black"]) .finance-list-row b {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .finance-list-row span {
  color: var(--muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .top-actions .ghost-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .social-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .modal-foot .quiet-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .theme-switch-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.12)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.18);
}

:root:is([data-theme="dark"], [data-theme="black"]) .nav-btn.active,
:root:is([data-theme="dark"], [data-theme="black"]) .nav-btn:hover,
:root:is([data-theme="dark"], [data-theme="black"]) .chip.active,
:root:is([data-theme="dark"], [data-theme="black"]) .tab-btn.active,
:root:is([data-theme="dark"], [data-theme="black"]) tbody tr:hover,
:root:is([data-theme="dark"], [data-theme="black"]) tbody tr.selected,
:root:is([data-theme="dark"], [data-theme="black"]) .choice-option:hover,
:root:is([data-theme="dark"], [data-theme="black"]) .choice-option.active,
:root:is([data-theme="dark"], [data-theme="black"]) .issue-hint:hover,
:root:is([data-theme="dark"], [data-theme="black"]) .issue-hint:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) tbody tr {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

:root:is([data-theme="dark"], [data-theme="black"]) .content-grid > .panel:first-child {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-muted) 92%, var(--accent-soft)), var(--panel));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 8px 22px rgba(0, 0, 0, 0.24);
}

:root:is([data-theme="dark"], [data-theme="black"]) tbody tr:hover,
:root:is([data-theme="dark"], [data-theme="black"]) tbody tr.selected {
  border-color: rgba(110, 216, 204, 0.38);
  background: #1a2724;
}

:root:is([data-theme="dark"], [data-theme="black"]) tbody tr.selected::before {
  background: var(--accent);
}

:root:is([data-theme="dark"], [data-theme="black"]) .master-color-mint {
  --master-row-bg: color-mix(in srgb, #244a43 38%, var(--panel));
  --master-row-bg-hover: color-mix(in srgb, #2d5a52 46%, var(--panel));
  --master-row-line: #6fc8b8;
}

:root:is([data-theme="dark"], [data-theme="black"]) .master-color-sky {
  --master-row-bg: color-mix(in srgb, #244257 36%, var(--panel));
  --master-row-bg-hover: color-mix(in srgb, #2d5068 44%, var(--panel));
  --master-row-line: #7ab7d8;
}

:root:is([data-theme="dark"], [data-theme="black"]) .master-color-sage {
  --master-row-bg: color-mix(in srgb, #314a2e 36%, var(--panel));
  --master-row-bg-hover: color-mix(in srgb, #3c5938 44%, var(--panel));
  --master-row-line: #96c37f;
}

:root:is([data-theme="dark"], [data-theme="black"]) .master-color-lavender {
  --master-row-bg: color-mix(in srgb, #42375a 34%, var(--panel));
  --master-row-bg-hover: color-mix(in srgb, #50436b 42%, var(--panel));
  --master-row-line: #b4a1dc;
}

:root:is([data-theme="dark"], [data-theme="black"]) .master-color-peach {
  --master-row-bg: color-mix(in srgb, #5a392c 34%, var(--panel));
  --master-row-bg-hover: color-mix(in srgb, #6a4434 42%, var(--panel));
  --master-row-line: #e0aa88;
}

:root:is([data-theme="dark"], [data-theme="black"]) .master-color-sand {
  --master-row-bg: color-mix(in srgb, #554a2e 34%, var(--panel));
  --master-row-bg-hover: color-mix(in srgb, #655838 42%, var(--panel));
  --master-row-line: #d0bb72;
}

:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row,
:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row:hover,
:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row.selected {
  border-color: rgba(66, 190, 255, 0.72);
  background:
    linear-gradient(90deg, rgba(22, 111, 255, 0.18), rgba(38, 214, 255, 0.055) 52%, rgba(22, 111, 255, 0.15)),
    var(--panel);
  outline: 0;
  box-shadow: inset 0 0 16px rgba(47, 172, 255, 0.14);
}

:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row > td {
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(66, 190, 255, 0.62),
    inset 0 -1px 0 rgba(66, 190, 255, 0.48);
}

:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row > td:first-child {
  box-shadow:
    inset 1px 0 0 rgba(66, 190, 255, 0.78),
    inset 0 1px 0 rgba(66, 190, 255, 0.62),
    inset 0 -1px 0 rgba(66, 190, 255, 0.48);
}

:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row > td:last-child {
  box-shadow:
    inset -1px 0 0 rgba(66, 190, 255, 0.78),
    inset 0 1px 0 rgba(66, 190, 255, 0.62),
    inset 0 -1px 0 rgba(66, 190, 255, 0.48);
}

:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row::after {
  border-color: rgba(88, 209, 255, 0.72);
  box-shadow:
    inset 0 0 14px rgba(48, 164, 255, 0.14);
}

:root:is([data-theme="dark"], [data-theme="black"]) .phones-table tbody tr.ai-draft-row::before {
  background: #42beff;
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail.ai-draft-detail {
  border-color: rgba(66, 190, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(106, 219, 255, 0.32),
    0 0 18px rgba(32, 144, 255, 0.26);
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail.ai-draft-detail .detail-head {
  background:
    linear-gradient(90deg, rgba(22, 111, 255, 0.16), rgba(38, 214, 255, 0.045) 58%, transparent),
    var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail {
  scrollbar-color: rgba(110, 216, 204, 0.34) transparent;
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail::-webkit-scrollbar-thumb {
  background: rgba(110, 216, 204, 0.34);
  background-clip: content-box;
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 216, 204, 0.52);
  background-clip: content-box;
}

:root:is([data-theme="dark"], [data-theme="black"]) .primary-btn {
  color: #071211;
  background: #76dfd2;
}

:root:is([data-theme="dark"], [data-theme="black"]) .primary-btn:hover {
  background: #91ebe1;
}

:root:is([data-theme="dark"], [data-theme="black"]) .top-actions .primary-btn {
  border-color: #4cc9bb;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.08)),
    #72ded1;
}

:root:is([data-theme="dark"], [data-theme="black"]) .brand-mark,
:root:is([data-theme="dark"], [data-theme="black"]) .avatar {
  color: #071211;
  background: var(--accent);
}

:root:is([data-theme="dark"], [data-theme="black"]) .theme-switch-card.active {
  border-color: rgba(110, 216, 204, 0.72);
  color: var(--accent);
  background: rgba(110, 216, 204, 0.12);
}

:root:is([data-theme="dark"], [data-theme="black"]) .theme-switch {
  background: #364844;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.38);
}

:root:is([data-theme="dark"], [data-theme="black"]) .theme-switch-card.active .theme-switch {
  background: var(--accent);
}

:root:is([data-theme="dark"], [data-theme="black"]) .theme-switch span {
  background: #dfe9e5;
}

:root:is([data-theme="dark"], [data-theme="black"]) .table-client-chip {
  border-color: #354944;
  color: #b8c9c4;
  background: linear-gradient(90deg, rgba(18, 26, 24, 0.96), rgba(18, 26, 24, 0.7));
}

:root:is([data-theme="dark"], [data-theme="black"]) .status-badge {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 42%, rgba(0, 0, 0, 0.16) 100%),
    var(--status-bg, var(--panel-muted));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.25);
}

:root:is([data-theme="dark"], [data-theme="black"]) .status-new {
  --status-ink: #bfd4f2;
  --status-bg: rgba(138, 188, 245, 0.16);
  --status-ring: #496c97;
}

:root:is([data-theme="dark"], [data-theme="black"]) .status-progress,
:root:is([data-theme="dark"], [data-theme="black"]) .status-check {
  --status-ink: #9dccff;
  --status-bg: rgba(138, 188, 245, 0.16);
  --status-ring: #507aa8;
}

:root:is([data-theme="dark"], [data-theme="black"]) .status-returning,
:root:is([data-theme="dark"], [data-theme="black"]) .status-ready,
:root:is([data-theme="dark"], [data-theme="black"]) .status-away,
:root:is([data-theme="dark"], [data-theme="black"]) .status-transfer {
  --status-ink: #ffd98b;
  --status-bg: rgba(239, 198, 111, 0.16);
  --status-ring: #92733a;
}

:root:is([data-theme="dark"], [data-theme="black"]) .status-done,
:root:is([data-theme="dark"], [data-theme="black"]) .status-returned,
:root:is([data-theme="dark"], [data-theme="black"]) .status-closed {
  --status-ink: #96e4b2;
  --status-bg: rgba(119, 216, 157, 0.16);
  --status-ring: #4d8464;
}

:root:is([data-theme="dark"], [data-theme="black"]) .status-hold {
  --status-ink: #ffaaa7;
  --status-bg: rgba(239, 133, 133, 0.16);
  --status-ring: #955f60;
}

:root:is([data-theme="dark"], [data-theme="black"]) .date-pair {
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .date-pair-ok,
:root:is([data-theme="dark"], [data-theme="black"]) .date-pair-moved {
  --date-ink: #9ce0b4;
  --date-bg: rgba(119, 216, 157, 0.13);
  --date-line: #4f9b6a;
}

:root:is([data-theme="dark"], [data-theme="black"]) .date-pair-watch {
  --date-ink: #f4d681;
  --date-bg: rgba(239, 198, 111, 0.13);
  --date-line: #92733a;
}

:root:is([data-theme="dark"], [data-theme="black"]) .date-pair-due {
  --date-ink: #f5b36f;
  --date-bg: rgba(239, 159, 68, 0.14);
  --date-line: #a76e39;
}

:root:is([data-theme="dark"], [data-theme="black"]) .date-pair-overdue {
  --date-ink: #ffaaa7;
  --date-bg: rgba(239, 133, 133, 0.14);
  --date-line: #955f60;
}

:root:is([data-theme="dark"], [data-theme="black"]) .kit-item.on,
:root:is([data-theme="dark"], [data-theme="black"]) .part-stock,
:root:is([data-theme="dark"], [data-theme="black"]) .return-action,
:root:is([data-theme="dark"], [data-theme="black"]) .work-item.done {
  border-color: #467a5c;
  color: var(--ok);
  background: var(--ok-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .compact-preconditions .precondition-item,
:root:is([data-theme="dark"], [data-theme="black"]) .table-flags .precondition-item {
  border-color: #8e7135;
  color: #f4d681;
  background: rgba(239, 198, 111, 0.14);
}

:root:is([data-theme="dark"], [data-theme="black"]) .compact-preconditions .precondition-item.danger.on,
:root:is([data-theme="dark"], [data-theme="black"]) .table-flags .precondition-item.danger.on {
  border-color: #955f60;
  color: #ffaaa7;
  background: rgba(239, 133, 133, 0.14);
}

:root:is([data-theme="dark"], [data-theme="black"]) .danger-action,
:root:is([data-theme="dark"], [data-theme="black"]) .danger-btn {
  border-color: #8d4b4b;
  color: #ffc3c0;
  background: rgba(239, 133, 133, 0.12);
}

:root:is([data-theme="dark"], [data-theme="black"]) .icon-action {
  border-color: var(--line);
  color: var(--accent);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .icon-action:hover {
  background: var(--accent-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .unlink-part-action {
  color: #ffaaa7;
}

:root:is([data-theme="dark"], [data-theme="black"]) .unlink-part-action:hover {
  border-color: #955f60;
  color: #ffc3c0;
  background: rgba(239, 133, 133, 0.14);
}

:root:is([data-theme="dark"], [data-theme="black"]) .danger-btn {
  color: #fff2f1;
  background: #b84e4e;
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .clone-action,
:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .movement-action {
  border-color: #3b6963;
  color: var(--accent);
  background: var(--accent-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .resource-action,
:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .part-action,
:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .work-action,
:root:is([data-theme="dark"], [data-theme="black"]) .device-compact .row-action {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .report-editor-action {
  border-color: color-mix(in srgb, #60b7ff 42%, var(--line));
  color: #9ed4ff;
  background: rgba(32, 125, 205, 0.12);
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .report-editor-action:hover {
  border-color: #60b7ff;
  background: rgba(32, 125, 205, 0.2);
}

:root:is([data-theme="dark"], [data-theme="black"]) .detail-actions .issue-action {
  border-color: #6b5a2a;
  color: #f0d07d;
  background: rgba(239, 198, 111, 0.11);
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-hint,
:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-item,
:root:is([data-theme="dark"], [data-theme="black"]) .donor-source-card,
:root:is([data-theme="dark"], [data-theme="black"]) .donor-blueprint {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-item-head strong,
:root:is([data-theme="dark"], [data-theme="black"]) .donor-source-card strong,
:root:is([data-theme="dark"], [data-theme="black"]) .donor-blueprint strong {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .donor-blueprint-grid span,
:root:is([data-theme="dark"], [data-theme="black"]) .donor-source-card > span {
  border-color: var(--line);
  color: var(--accent);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .donor-pricing-card {
  border-color: #6b5a2a;
  color: #f4df9b;
  background: rgba(239, 198, 111, 0.11);
}

:root:is([data-theme="dark"], [data-theme="black"]) .donor-pricing-card > span {
  border-color: #6b5a2a;
  color: #f0d07d;
  background: rgba(239, 198, 111, 0.14);
}

:root:is([data-theme="dark"], [data-theme="black"]) .donor-pricing-card strong,
:root:is([data-theme="dark"], [data-theme="black"]) .donor-pricing-card small {
  color: #f4df9b;
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-remove-btn {
  border-color: #6f4040;
  color: #ffaaa7;
  background: rgba(239, 133, 133, 0.1);
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-remove-btn:hover {
  border-color: #955f60;
  color: #ffc3c0;
  background: rgba(239, 133, 133, 0.16);
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-fields .field input,
:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-fields .field select {
  border-color: var(--field-line);
  color: var(--ink);
  background: var(--field-bg);
}

:root:is([data-theme="dark"], [data-theme="black"]) .part-form-voice-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .part-form-voice-toggle.listening,
:root:is([data-theme="dark"], [data-theme="black"]) .voice-btn.listening {
  border-color: #ff7777;
  color: #ffffff;
  background: #b93434;
}

:root:is([data-theme="dark"], [data-theme="black"]) .part-form-voice-toggle.pending,
:root:is([data-theme="dark"], [data-theme="black"]) .voice-btn.pending {
  border-color: #c59a3a;
  color: #f2d28d;
  background: rgba(179, 124, 20, 0.18);
}

:root:is([data-theme="dark"], [data-theme="black"]) .part-inline-voice,
:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-status,
:root:is([data-theme="dark"], [data-theme="black"]) .part-inline-voice-preview {
  border-color: var(--line);
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-status[data-state="recording"] {
  border-color: rgba(255, 119, 119, 0.44);
  color: #ffc5c5;
  background: rgba(185, 52, 52, 0.16);
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-status[data-state="processing"],
:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-status[data-state="starting"],
:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-status[data-state="stopping"] {
  border-color: rgba(197, 154, 58, 0.48);
  color: #f2d28d;
  background: rgba(179, 124, 20, 0.16);
}

:root:is([data-theme="dark"], [data-theme="black"]) .parts-voice-status[data-state="error"] {
  border-color: rgba(255, 119, 119, 0.38);
  color: #ffc5c5;
  background: rgba(185, 52, 52, 0.13);
}

:root:is([data-theme="dark"], [data-theme="black"]) .part-inline-voice-preview-grid div {
  border-color: var(--line);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .part-inline-voice-preview-grid strong {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .device-compact,
:root:is([data-theme="dark"], [data-theme="black"]) .device-picker,
:root:is([data-theme="dark"], [data-theme="black"]) .auth-methods,
:root:is([data-theme="dark"], [data-theme="black"]) .auth-tabs,
:root:is([data-theme="dark"], [data-theme="black"]) .work-item,
:root:is([data-theme="dark"], [data-theme="black"]) .linked-part,
:root:is([data-theme="dark"], [data-theme="black"]) .resource-panel,
:root:is([data-theme="dark"], [data-theme="black"]) .resource-inline-form,
:root:is([data-theme="dark"], [data-theme="black"]) .resource-row,
:root:is([data-theme="dark"], [data-theme="black"]) .resource-empty,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-mini-card,
:root:is([data-theme="dark"], [data-theme="black"]) .photo-card img,
:root:is([data-theme="dark"], [data-theme="black"]) .photo-open img {
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .resource-summary span,
:root:is([data-theme="dark"], [data-theme="black"]) .resource-attach-btn {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .resource-inline-form,
:root:is([data-theme="dark"], [data-theme="black"]) .resource-row,
:root:is([data-theme="dark"], [data-theme="black"]) .resource-empty {
  border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="black"]) .device-lock-note {
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
  color: var(--muted);
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .device-lock-note .icon {
  color: var(--accent);
}

:root:is([data-theme="dark"], [data-theme="black"]) .device-compact-title strong {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .pick-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .model-pick {
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
  color: var(--ink);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .pick-btn.active,
:root:is([data-theme="dark"], [data-theme="black"]) .pick-btn:hover,
:root:is([data-theme="dark"], [data-theme="black"]) .model-pick.active,
:root:is([data-theme="dark"], [data-theme="black"]) .model-pick:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 54%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .voice-btn {
  border-color: #3b6963;
  color: var(--accent);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .return-ai-preview span {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .predictive-ghost {
  color: #667873;
}

:root:is([data-theme="dark"], [data-theme="black"]) .handoff-card,
:root:is([data-theme="dark"], [data-theme="black"]) .accept-box,
:root:is([data-theme="dark"], [data-theme="black"]) .deleted-accounting-note {
  border-color: #8e7135;
  color: #f4d681;
  background: rgba(239, 198, 111, 0.12);
}

:root:is([data-theme="dark"], [data-theme="black"]) .handoff-card .kv {
  border-bottom-color: color-mix(in srgb, var(--warn) 34%, var(--line));
}

:root:is([data-theme="dark"], [data-theme="black"]) .handoff-card .kv span:first-child,
:root:is([data-theme="dark"], [data-theme="black"]) .accept-box span {
  color: color-mix(in srgb, var(--warn) 36%, var(--muted));
}

:root:is([data-theme="dark"], [data-theme="black"]) .handoff-card .kv span:last-child,
:root:is([data-theme="dark"], [data-theme="black"]) .accept-box strong {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .auth-note {
  border-color: #3b6963;
  color: var(--muted);
  background: rgba(110, 216, 204, 0.08);
}

:root:is([data-theme="dark"], [data-theme="black"]) .modal-backdrop,
:root:is([data-theme="dark"], [data-theme="black"]) .lightbox-backdrop {
  background: rgba(3, 8, 7, 0.72);
}

:root:is([data-theme="dark"], [data-theme="black"]) .toast {
  background: rgba(19, 28, 25, 0.96);
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .confirm-toast {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: rgba(19, 28, 25, 0.97);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.48);
}

:root:is([data-theme="dark"], [data-theme="black"]) .confirm-toast .quiet-btn {
  border-color: color-mix(in srgb, var(--line) 76%, var(--ink));
  color: var(--ink);
  background: var(--panel-muted);
}

:root[data-theme="black"] tbody tr:hover,
:root[data-theme="black"] tbody tr.selected {
  border-color: #363636;
  background: #090909;
}

:root[data-theme="black"] tbody tr.selected {
  border-color: rgba(110, 216, 204, 0.56);
  background:
    linear-gradient(90deg, rgba(110, 216, 204, 0.14), rgba(255, 255, 255, 0.035) 48%, rgba(110, 216, 204, 0.08)),
    #090909;
  box-shadow:
    inset 0 0 0 1px rgba(110, 216, 204, 0.18),
    0 0 0 1px rgba(110, 216, 204, 0.12),
    0 0 18px rgba(110, 216, 204, 0.1);
}

:root[data-theme="black"] .phones-table tbody tr.selected > td {
  border-top: 1px solid rgba(110, 216, 204, 0.28);
  border-bottom-color: rgba(110, 216, 204, 0.28);
  background:
    linear-gradient(90deg, rgba(110, 216, 204, 0.13), rgba(255, 255, 255, 0.03) 46%, rgba(110, 216, 204, 0.06)),
    #080909;
}

:root[data-theme="black"] .phones-table tbody tr.selected > td:first-child {
  box-shadow: inset 4px 0 0 #6ed8cc;
}

:root[data-theme="black"] .phones-table tbody tr.selected > td:last-child {
  box-shadow: inset -1px 0 0 rgba(110, 216, 204, 0.24);
}

:root[data-theme="black"] tbody tr.selected::before {
  background: #6ed8cc;
  box-shadow: 0 0 14px rgba(110, 216, 204, 0.64);
}

:root[data-theme="black"] tbody tr::before {
  background: #e9eeee;
}

:root[data-theme="black"] .phones-table tbody tr.ai-draft-row,
:root[data-theme="black"] .phones-table tbody tr.ai-draft-row:hover,
:root[data-theme="black"] .phones-table tbody tr.ai-draft-row.selected {
  border-color: rgba(72, 184, 255, 0.78);
  background:
    linear-gradient(90deg, rgba(0, 78, 220, 0.22), rgba(0, 221, 255, 0.05) 52%, rgba(0, 78, 220, 0.18)),
    #050607;
  outline: 0;
  box-shadow: inset 0 0 16px rgba(47, 172, 255, 0.16);
}

:root[data-theme="black"] .phones-table tbody tr.ai-draft-row::before {
  background: #42beff;
  box-shadow: none;
}

:root[data-theme="black"] .detail.ai-draft-detail {
  border-color: rgba(72, 184, 255, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(98, 210, 255, 0.34),
    0 0 20px rgba(12, 121, 255, 0.32);
}

:root[data-theme="black"] .primary-btn,
:root[data-theme="black"] .top-actions .primary-btn {
  border-color: #d9d9d9;
  color: #050505;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(210, 210, 210, 0.9)),
    #f2f2f2;
}

:root[data-theme="black"] .primary-btn:hover {
  background: #ffffff;
}

:root[data-theme="black"] .brand-mark,
:root[data-theme="black"] .avatar {
  color: #050505;
  background: #f2f4f3;
}

:root[data-theme="black"] .theme-switch-card.active {
  border-color: #d8d8d8;
  color: #f2f4f3;
  background: rgba(255, 255, 255, 0.11);
}

:root[data-theme="black"] .theme-switch {
  background: #2a2a2a;
}

:root[data-theme="black"] .theme-switch-card.active .theme-switch {
  background: #f2f4f3;
}

:root[data-theme="black"] .theme-switch-card.active .theme-switch span {
  background: #050505;
}

:root[data-theme="black"] .table-client-chip {
  border-color: #303030;
  color: #c7cdca;
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.98), rgba(12, 12, 12, 0.68));
}

:root[data-theme="black"] .status-new,
:root[data-theme="black"] .status-progress,
:root[data-theme="black"] .status-check,
:root[data-theme="black"] .status-done,
:root[data-theme="black"] .status-returned,
:root[data-theme="black"] .status-closed {
  --status-ink: #e9eeee;
  --status-bg: rgba(255, 255, 255, 0.1);
  --status-ring: #656565;
}

:root[data-theme="black"] .date-pair-ok,
:root[data-theme="black"] .date-pair-moved {
  --date-ink: #e8ecea;
  --date-bg: rgba(255, 255, 255, 0.1);
  --date-line: #5c5c5c;
}

:root[data-theme="black"] .kit-item.on,
:root[data-theme="black"] .part-stock,
:root[data-theme="black"] .return-action,
:root[data-theme="black"] .work-item.done,
:root[data-theme="black"] .detail-actions .clone-action,
:root[data-theme="black"] .detail-actions .movement-action,
:root[data-theme="black"] .detail-actions .issue-action,
:root[data-theme="black"] .voice-btn {
  border-color: #555555;
  color: #f2f4f3;
  background: rgba(255, 255, 255, 0.1);
}

:root[data-theme="black"] .auth-note {
  border-color: #3a3a3a;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
}

:root[data-theme="black"] .modal-backdrop,
:root[data-theme="black"] .lightbox-backdrop {
  background: rgba(0, 0, 0, 0.82);
}

:root[data-theme="black"] .toast {
  background: rgba(5, 5, 5, 0.96);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-panel,
:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-side {
  border-color: var(--line);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-metric,
:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-card {
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
  background: var(--panel-muted);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-card-head strong,
:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-text {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-card-head span,
:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-card-foot,
:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-side p {
  color: var(--muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-result {
  border-color: color-mix(in srgb, var(--line) 70%, var(--accent));
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-badge {
  border-color: color-mix(in srgb, var(--line) 64%, var(--accent));
  color: var(--accent);
  background: var(--accent-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-badge.muted {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-base-badge.source {
  border-color: color-mix(in srgb, var(--warn) 54%, var(--line));
  color: var(--warn);
  background: var(--warn-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ai-keywords mark {
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 72%, var(--ink));
}

:root[data-theme="black"] .ai-base-card,
:root[data-theme="black"] .ai-base-metric {
  border-color: #242424;
  background: #0a0a0a;
}

:root[data-theme="black"] .finance-tab,
:root[data-theme="black"] .finance-list-row {
  border-color: #242424;
  color: #e9eeee;
  background: #0a0a0a;
}

:root[data-theme="black"] .finance-tab.active {
  border-color: #5f5f5f;
  color: #f2f4f3;
  background: rgba(255, 255, 255, 0.11);
}

:root[data-theme="black"] .ai-base-badge {
  border-color: #4a4a4a;
  color: #e9eeee;
  background: rgba(255, 255, 255, 0.09);
}

:root[data-theme="black"] .ai-base-badge.source {
  border-color: #806a3a;
  color: #e8c46e;
  background: rgba(232, 196, 110, 0.13);
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-modal,
:root:is([data-theme="dark"], [data-theme="black"]) .report-modal,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-modal .modal-head,
:root:is([data-theme="dark"], [data-theme="black"]) .report-modal .modal-head,
:root:is([data-theme="dark"], [data-theme="black"]) .report-modal .modal-foot,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-modal .modal-foot {
  border-color: var(--line);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-print-btn,
:root:is([data-theme="dark"], [data-theme="black"]) .report-type-btn {
  border-color: color-mix(in srgb, var(--line) 76%, var(--ink));
  color: var(--ink);
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-print-btn:hover,
:root:is([data-theme="dark"], [data-theme="black"]) .report-type-btn:hover,
:root:is([data-theme="dark"], [data-theme="black"]) .report-type-btn.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 46%, var(--panel-muted));
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-editor,
:root:is([data-theme="dark"], [data-theme="black"]) .report-preview-shell,
:root:is([data-theme="dark"], [data-theme="black"]) .report-section-toggle {
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-editor-hint {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  color: var(--muted);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-editor-hint strong {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-section-toggle {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-preview-toolbar {
  border-color: var(--line);
}

:root:is([data-theme="dark"], [data-theme="black"]) .report-preview {
  background: color-mix(in srgb, var(--panel) 84%, #ffffff 5%);
}

:root[data-theme="black"] .report-preview {
  background: #050505;
}

:root:is([data-theme="dark"], [data-theme="black"]) .knowledge-intro,
:root:is([data-theme="dark"], [data-theme="black"]) .knowledge-card,
:root:is([data-theme="dark"], [data-theme="black"]) .knowledge-empty {
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .knowledge-card {
  background: color-mix(in srgb, var(--panel-muted) 90%, var(--accent-soft));
}

:root:is([data-theme="dark"], [data-theme="black"]) .knowledge-digest-row,
:root:is([data-theme="dark"], [data-theme="black"]) .knowledge-result {
  border-color: color-mix(in srgb, var(--line) 74%, var(--muted));
}

:root:is([data-theme="dark"], [data-theme="black"]) .knowledge-error {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 36%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-summary div,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-chat-panel,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-empty {
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-timeline {
  border-color: color-mix(in srgb, var(--line) 82%, var(--ink));
  background:
    radial-gradient(circle at 18% 16%, rgba(110, 216, 204, 0.08), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-muted) 94%, var(--accent-soft)), var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-event-body {
  border-color: color-mix(in srgb, var(--line) 74%, var(--ink));
  color: var(--ink);
  background: var(--panel-muted);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-event.mine .movement-event-body {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--panel-muted));
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-status .movement-event-body,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-note .movement-event-body {
  border-color: color-mix(in srgb, var(--line) 70%, var(--muted));
  background: color-mix(in srgb, var(--panel) 78%, var(--panel-muted));
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-status.mine .movement-event-body,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-note.mine .movement-event-body {
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-mark {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-mini-card,
:root:is([data-theme="dark"], [data-theme="black"]) .voice-note-card,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-chat-photo,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-photo-album,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-photo-tile {
  border-color: color-mix(in srgb, var(--line) 72%, var(--ink));
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-compact-text,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-event-text {
  color: var(--ink);
}

:root:is([data-theme="dark"], [data-theme="black"]) .movement-compact-meta,
:root:is([data-theme="dark"], [data-theme="black"]) .movement-event-meta,
:root:is([data-theme="dark"], [data-theme="black"]) .voice-note-card small,
:root:is([data-theme="dark"], [data-theme="black"]) .voice-file-note {
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
}

:root:is([data-theme="dark"], [data-theme="black"]) .audio-rate-btn {
  border-color: color-mix(in srgb, var(--line) 72%, var(--ink));
  color: var(--ink);
  background: var(--panel);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .audio-rate-btn.active {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  color: var(--panel);
  background: var(--accent);
}

:root[data-theme="black"] .movement-timeline,
:root[data-theme="black"] .movement-summary div,
:root[data-theme="black"] .movement-chat-panel,
:root[data-theme="black"] .movement-empty,
:root[data-theme="black"] .movement-event-body {
  border-color: #242424;
  background: #0a0a0a;
}

:root[data-theme="black"] .movement-event.mine .movement-event-body {
  border-color: #4e4e4e;
  background: rgba(255, 255, 255, 0.09);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal {
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .modal-head,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .modal-foot {
  border-color: var(--line);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field > span,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field label,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .strong-field > span,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .strong-field > label,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .compact-check-section > label,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .form-section-grid .compact-check-section > label,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .intake-flags-title {
  color: var(--muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field input:not([type="checkbox"]),
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field select,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field textarea,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .strong-field input:not([type="checkbox"]),
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .strong-field select,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .strong-field textarea,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .readonly-field-value {
  border-color: color-mix(in srgb, var(--line) 74%, var(--ink));
  color: var(--ink);
  background: var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 1px 0 rgba(255, 255, 255, 0.025);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field input::placeholder,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .imei-history-card {
  border-color: color-mix(in srgb, var(--accent-2) 42%, var(--line));
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 36%),
    color-mix(in srgb, var(--panel-muted) 92%, var(--accent-soft));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-2) 72%, var(--line));
}

:root:is([data-theme="dark"], [data-theme="black"]) .imei-history-item {
  border-color: color-mix(in srgb, var(--line) 72%, var(--accent-2));
  background: color-mix(in srgb, var(--panel) 80%, var(--panel-muted));
}

:root:is([data-theme="dark"], [data-theme="black"]) .imei-history-card.warning {
  border-color: color-mix(in srgb, var(--warn) 46%, var(--line));
  background: color-mix(in srgb, var(--warn-soft) 40%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .field-note,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .autosave-state {
  color: var(--muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .device-compact,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .intake-flags-panel,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .drafts {
  border-color: color-mix(in srgb, var(--line) 82%, var(--ink));
  background: var(--panel-muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .device-compact {
  box-shadow: inset 3px 0 0 var(--accent);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .device-compact-title span {
  color: var(--muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .device-compact .row-action {
  border-color: color-mix(in srgb, var(--line) 70%, var(--ink));
  color: var(--ink);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card {
  border-color: color-mix(in srgb, var(--line) 82%, var(--ink));
  color: var(--muted);
  background: var(--panel);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card:hover {
  border-color: color-mix(in srgb, var(--line) 58%, var(--ink));
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-muted) 88%, var(--ink));
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--panel-muted));
  box-shadow: none;
  transform: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card.warning-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--warn) 54%, var(--line));
  color: var(--warn);
  background: var(--warn-soft);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card.danger-check {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  color: color-mix(in srgb, var(--danger) 72%, var(--muted));
  background: color-mix(in srgb, var(--danger-soft) 42%, var(--panel));
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card.danger-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--danger) 64%, var(--line));
  color: #ffc3c0;
  background: var(--danger-soft);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card input {
  border-color: color-mix(in srgb, var(--line) 64%, var(--ink));
  background: var(--panel-muted);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card input:checked {
  border-color: currentColor;
  background: currentColor;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .check-card input:checked::after {
  border-color: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .draft-card {
  border-color: var(--line);
  background: var(--panel);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .draft-card p,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .empty-inbox p,
:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .draft-meta {
  color: var(--muted);
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .voice-btn {
  border-color: color-mix(in srgb, var(--line) 62%, var(--ink));
  color: var(--ink);
  background: var(--panel-muted);
  box-shadow: none;
}

:root:is([data-theme="dark"], [data-theme="black"]) .ticket-modal .voice-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-soft);
}

:root[data-theme="black"] .ticket-modal .device-compact {
  box-shadow: inset 3px 0 0 #dfe4e2;
}

:root[data-theme="black"] .ticket-modal .check-card:has(input:checked) {
  border-color: #575757;
  color: #f1f3f2;
  background: rgba(255, 255, 255, 0.105);
}

:root[data-theme="black"] .ticket-modal .check-card.warning-check:has(input:checked) {
  border-color: #806a3a;
  color: #e8c46e;
  background: rgba(232, 196, 110, 0.13);
}

:root[data-theme="black"] .ticket-modal .check-card.danger-check:has(input:checked) {
  border-color: #8b5151;
  color: #f0b3b3;
  background: rgba(241, 139, 139, 0.13);
}

@media (max-width: 620px) {
  .supplier-manager {
    grid-template-columns: 1fr;
  }

  .supplier-list {
    max-height: 260px;
  }

  .imei-history-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .imei-history-item {
    grid-template-columns: 1fr;
  }
}