:root {
  --bg: #0d0e14;
  --bg-accent: radial-gradient(circle at top left, rgba(124, 90, 240, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(43, 33, 82, 0.3), transparent 26%),
    linear-gradient(160deg, #0a0b11 0%, #0e0f16 52%, #12131c 100%);
  --panel: rgba(19, 20, 28, 0.86);
  --panel-border: rgba(255, 255, 255, 0.07);
  --text: #f4f4fa;
  --muted: #b9b9d0;
  --accent: #7c5af0;
  --accent-strong: #9b7bff;
  --accent-soft: rgba(124, 90, 240, 0.16);
  --success: #4ade80;
  --warning: #facc15;
  --danger: #f87171;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --radius: 24px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  background: var(--bg);
}


* {
  scrollbar-color: rgba(255, 255, 255, 0.9) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

@media (max-width: 520px) {
  ::-webkit-scrollbar {
    display: none;
  }
  * {
    scrollbar-width: none;
  }
}

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

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}

body.auth-locked .protected-content {
  display: none !important;
}

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

.app-shell {
  width: min(100vw - 20px, 1960px);
  margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 0 calc(120px + env(safe-area-inset-bottom));
}

.app-shell:has(#dashboardPage:not(.is-hidden)) {
  width: min(100vw - 20px, 2100px);
}

.app-shell:has(#spreadsheetPage:not(.is-hidden)),
.app-shell:has(#expensesPage:not(.is-hidden)),
.app-shell:has(#mercuryPricingPage:not(.is-hidden)) {
  width: min(100vw - 20px, 1960px);
}

/* CRM — bleed to all four edges, no nav padding */
html:has(#crmPage:not(.is-hidden)),
body:has(#crmPage:not(.is-hidden)) {
  overflow: hidden;
}
/* The logo banner is static-flow and would push a 100vh #crmPage into
   overflow, so the shell becomes a flex column: logo keeps its natural
   height, CRM takes the rest. No hard-coded logo height needed.
   The .hero dock is position:fixed and costs no layout, so it is left
   alone — it reveals on top-edge hover like every other page. */
.app-shell:has(#crmPage:not(.is-hidden)) {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.app-shell:has(#crmPage:not(.is-hidden)) #pageLogoButton,
.app-shell:has(#crmPage:not(.is-hidden)) #mobileDashboardLogoButton {
  flex-shrink: 0;
  margin-top: 12px;
}
#crmPage {
  flex: 1;
  min-height: 0;
  height: auto;
  /* .dashboard's top margin collapses up through #appShell and the mount,
     pushing the whole page down 10px and creating a 10px body scroll. */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* override .dashboard { align-items: start } */
  overflow: hidden;
}
#crmPage .crm-shell {
  flex: 1;
  min-height: 0;
  height: auto; /* override calc(100vh - 56px) */
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
}
.auth-shell.is-visible {
  animation: auth-shell-fadein 0.45s ease forwards;
}
@keyframes auth-shell-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-panel {
  width: min(460px, 100%);
  padding: 32px;
}

.auth-logo {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 10px auto 14px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32));
}

.auth-title {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin-bottom: 10px;
  text-align: center;
}

#loginScreen .panel-kicker {
  text-align: center;
}

.auth-copy {
  color: var(--muted);
  margin-bottom: 22px;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}

.password-icon {
  width: 18px;
  height: 18px;
}

.login-error {
  margin: 0;
  color: var(--danger);
}

.hero,
.panel,
.stat-card {
  backdrop-filter: blur(18px);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  position: relative;
}

.stat-card-actionable {
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.stat-card-actionable:hover,
.stat-card-actionable:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(22, 18, 31, 0.94);
  box-shadow:
    var(--shadow),
    0 16px 28px -18px rgba(255, 255, 255, 0.32),
    0 8px 18px -14px rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  outline: none;
}

.stat-card-actionable.stat-card-danger:hover,
.stat-card-actionable.stat-card-danger:focus-visible {
  border-color: rgba(138, 45, 45, 0.7);
  box-shadow:
    var(--shadow),
    0 16px 28px -18px rgba(138, 45, 45, 0.52),
    0 8px 18px -14px rgba(138, 45, 45, 0.36);
}

.stat-card-actionable.stat-card-warning:hover,
.stat-card-actionable.stat-card-warning:focus-visible {
  border-color: rgba(194, 143, 51, 0.7);
  box-shadow:
    var(--shadow),
    0 16px 28px -18px rgba(194, 143, 51, 0.52),
    0 8px 18px -14px rgba(194, 143, 51, 0.36);
}

.stat-card-actionable.stat-card-success:hover,
.stat-card-actionable.stat-card-success:focus-visible {
  border-color: rgba(124, 90, 240, 0.7);
  box-shadow:
    var(--shadow),
    0 16px 28px -18px rgba(124, 90, 240, 0.52),
    0 8px 18px -14px rgba(124, 90, 240, 0.36);
}

.stat-card.stat-card-danger {
  border-color: rgba(138, 45, 45, 0.62);
}

.stat-card.stat-card-warning {
  border-color: rgba(194, 143, 51, 0.62);
}

.stat-card.stat-card-success {
  border-color: rgba(124, 90, 240, 0.62);
}

.dashboard-stat-popover {
  position: fixed;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(7, 12, 9, 0.97);
  border: 1px solid rgba(139, 139, 168, 0.24);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 140ms ease;
  z-index: 9999;
}

.dashboard-stat-popover.is-visible {
  opacity: 1;
  visibility: visible;
}

.dashboard-stat-popover-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
  white-space: nowrap;
}

.dashboard-stat-popover-row {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  white-space: nowrap;
}

.dashboard-stat-popover-row span:first-child {
  color: var(--text-muted);
}

.dashboard-stat-popover-row span:last-child {
  font-weight: 500;
  text-align: right;
}



.hero {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(var(--app-header-translate, 0px));
  z-index: 80;
  isolation: isolate;
  border-radius: calc(var(--radius) + 8px);
  margin: 0;
  padding: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  width: min(100vw - 20px, 2100px);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease, filter 260ms ease;
  will-change: transform, opacity, filter;
}

.hero.is-collapsed {
  --app-header-translate: calc(-100% - 24px);
  opacity: 0.02;
  filter: blur(2px);
}

.header-reveal-zone {
  position: fixed;
  top: 0;
  left: 0;
  /* Leave room for the fixed To-Do launcher so hovering it doesn't trigger the header. */
  right: 120px;
  height: 48px;
  z-index: 79;
}

.eyebrow,
.panel-kicker,
.save-status,
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
}

.eyebrow,
.panel-kicker {
  color: var(--accent-strong);
  margin: 0 0 8px;
}

.eyebrow {
  font-size: 26px;
  letter-spacing: 0.04em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 0.98;
  margin-bottom: 10px;
}

.hero-copy {
  max-width: 700px;
  color: var(--muted);
  margin-bottom: 0;
}

.hero-actions {
  display: flex;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

/* macOS-style header toolbar */
.hero.mac-toolbar {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(24, 22, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.15);
}

.mac-toolbar-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: unset;
}

.mac-toolbar-left,
.mac-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mac-toolbar-left {
  justify-content: flex-start;
}

.mac-toolbar-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mac-toolbar-right {
  justify-content: flex-end;
}

.mac-app-button {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 14px;
}

.mac-app-button.compact-button {
  width: 62px;
  padding: 0 10px;
  height: 46px;
}

.mac-app-label {
  display: none;
}

.mac-app-button .menu-trigger-icon {
  width: 22px;
  height: 22px;
}

.mac-app-emoji {
  font-size: 22px;
  line-height: 1;
  display: block;
}

.mac-toolbar-center .mac-app-button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mac-toolbar-center .mac-app-button:hover,
.mac-toolbar-center .mac-app-button:focus-visible {
  background: rgba(124, 90, 240, 0.12);
  border-color: rgba(155, 123, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 18px -14px rgba(124, 90, 240, 0.55);
}

/* Old layout rule no longer applies */
#openDashboardButton {
  margin-right: 0;
}

.todo-widget {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}

.todo-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: 999px;
  box-shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.todo-launcher .menu-trigger-icon {
  width: 77.34375px;
  height: 77.34375px;
}

.todo-launcher-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ff6b73 0%, #ff2d55 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  border: 1.5px solid rgba(14, 12, 18, 0.92);
  box-shadow: 0 5px 12px rgba(255, 45, 85, 0.3);
}

.todo-popover {
  width: min(360px, calc(100vw - 28px));
  max-height: min(70vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(139, 139, 168, 0.22);
  background: rgba(14, 12, 18, 0.98);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.92);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  pointer-events: none;
}

.todo-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.todo-popover-heading {
  margin-bottom: 12px;
}

.todo-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(4, 9, 6, 0.42);
}

.todo-tab {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: transparent;
  color: rgba(204, 200, 213, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.todo-tab:hover,
.todo-tab:focus-visible {
  color: var(--text);
  outline: none;
}

.todo-tab.is-active {
  background: rgba(124, 90, 240, 0.2);
  color: #f0eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.todo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  margin-bottom: 14px;
  min-width: 0;
}

.todo-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.todo-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 16, 26, 0.72);
  min-width: 0;
  cursor: grab;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.todo-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.todo-item-checkmark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(167, 160, 182, 0.4);
  background: rgba(10, 8, 14, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.todo-item-checkmark::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}

.todo-item-text {
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.todo-item-content {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.todo-item-status {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.todo-item-status.is-done {
  color: var(--success);
}

.todo-item.is-complete .todo-item-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(228, 216, 255, 0.72);
}

.todo-priority-selector,
.todo-item-priority-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  justify-self: end;
}

.todo-item-assignee {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  min-width: 0;
}

.todo-item-assignee select {
  max-width: 150px;
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 139, 168, 0.34);
  background: rgba(12, 10, 18, 0.92);
  color: var(--text);
}

.todo-item-assignee select:focus-visible {
  outline: 1px solid rgba(167, 139, 250, 0.7);
  outline-offset: 1px;
}

.todo-priority-button {
  border: 0;
  background: transparent;
  color: rgba(163, 157, 177, 0.42);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 3px;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  transition: color 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.todo-priority-button:hover,
.todo-priority-button:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

.todo-priority-button.is-priority-1.is-active,
.todo-priority-button.is-priority-1:hover,
.todo-priority-button.is-priority-1:focus-visible {
  color: var(--warning);
}

.todo-priority-button.is-priority-2.is-active,
.todo-priority-button.is-priority-2:hover,
.todo-priority-button.is-priority-2:focus-visible {
  color: #ff9d3b;
}

.todo-priority-button.is-priority-3.is-active,
.todo-priority-button.is-priority-3:hover,
.todo-priority-button.is-priority-3:focus-visible {
  color: var(--danger);
}

.todo-item-delete,
.todo-item-delete.button,
.todo-item-delete.button-secondary,
.todo-item-delete.icon-only-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.92);
  transition: color 140ms ease;
}

.todo-item-delete:hover,
.todo-item-delete:focus-visible,
.todo-item-delete.button:hover,
.todo-item-delete.button:focus-visible,
.todo-item-delete.button-secondary:hover,
.todo-item-delete.button-secondary:focus-visible,
.todo-item-delete.icon-only-button:hover,
.todo-item-delete.icon-only-button:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--danger);
}

.todo-item-delete[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.todo-item-delete .action-icon {
  width: 13px;
  height: 13px;
}

.todo-item.is-complete {
  border-color: rgba(124, 90, 240, 0.34);
  background: rgba(21, 16, 32, 0.92);
}

.todo-item.is-complete .todo-item-checkmark {
  border-color: rgba(124, 90, 240, 0.7);
  background: rgba(124, 90, 240, 0.2);
  color: #e9e2ff;
}

.todo-item.is-complete .todo-item-checkmark::after {
  opacity: 1;
}

.todo-item.is-complete .todo-item-text {
  color: rgba(228, 216, 255, 0.95);
}

.todo-item.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.todo-item.is-drop-target {
  border-color: rgba(124, 90, 240, 0.58);
}

.dashboard-launcher-panel {
  overflow: visible;
  margin-top: 0;
}

#dashboardPage .dashboard-launcher-panel .app-launcher-grid {
  justify-items: center;
}

#dashboardPage .dashboard-launcher-panel .app-launcher-tile {
  width: 118px;
  min-height: 132px;
  padding: 6px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 10px;
}

#dashboardPage .dashboard-launcher-panel .app-launcher-tile:hover,
#dashboardPage .dashboard-launcher-panel .app-launcher-tile:focus-visible {
  transform: translateY(-4px) scale(1.03);
  background: transparent;
  box-shadow: none;
}

#dashboardPage .dashboard-launcher-panel .app-launcher-icon {
  width: 87px;
  height: 87px;
  border-radius: 26px;
}

#dashboardPage .dashboard-launcher-panel .app-launcher-icon .menu-trigger-icon {
  width: 42px;
  height: 42px;
}

.mobile-dashboard-logo-button {
  display: none;
}

.mobile-logout-button {
  display: none;
}

.hard-refresh-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body, inherit);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hard-refresh-btn:active {
  background: rgba(124, 90, 240, 0.08);
  color: var(--accent);
  border-color: rgba(124, 90, 240, 0.3);
}

.app-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
}

.settings-launcher-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.app-launcher-tile {
  position: relative;
  border: 1px solid rgba(139, 139, 168, 0.22);
  border-radius: 22px;
  min-height: 132px;
  padding: 18px 14px 16px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(22, 18, 30, 0.92), rgba(10, 8, 14, 0.86));
  color: var(--text);
  box-shadow:
    0 18px 36px -28px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  text-align: center;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.app-launcher-tile:hover,
.app-launcher-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(155, 123, 255, 0.42);
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(30, 24, 45, 0.96), rgba(12, 10, 18, 0.9));
  box-shadow:
    0 24px 42px -28px rgba(124, 90, 240, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  outline: none;
}

.app-launcher-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  /* neutral dark fill — the purple lives in the border */
  background: rgba(19, 20, 28, 0.85);
  border: 1.5px solid rgba(124, 90, 240, 0.55);
  box-shadow: 0 14px 26px -20px rgba(0, 0, 0, 0.8);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.app-launcher-tile:hover .app-launcher-icon,
.app-launcher-tile:focus-visible .app-launcher-icon {
  border-color: #9b7bff;
  background: rgba(124, 90, 240, 0.16);
  box-shadow: 0 18px 32px -18px rgba(124, 90, 240, 0.55);
}

.app-launcher-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  line-height: 1;
  transform: translateY(1px);
  filter: saturate(1.05);
}

.app-launcher-icon .menu-trigger-icon {
  width: 28px;
  height: 28px;
}

.app-launcher-label {
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.app-launcher-tile .todo-launcher-count {
  top: 10px;
  right: 10px;
}

.todo-page-panel {
  max-width: 760px;
  margin: 0 auto;
}

.todo-page-panel .todo-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.todo-page-panel .todo-list {
  max-height: none;
  overflow: visible;
}

.menu-wrap {
  position: relative;
  z-index: 25;
}

.menu-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 14px;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--panel-border);
  background: rgba(14, 12, 18, 0.98);
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.menu-wrap:hover .menu-panel,
.menu-wrap:focus-within .menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}

.menu-item:hover {
  background: var(--accent-soft);
}

.button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--accent);
  color: #0b0811;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  background: var(--accent-strong);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.button-secondary {
  background: #1b1723;
  color: var(--text);
}

.button-danger {
  background: var(--danger);
}

.icon-trigger {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.icon-trigger[data-tooltip]::after,
.icon-only-button[data-tooltip]::after,
.filter-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7, 12, 9, 0.96);
  border: 1px solid rgba(139, 139, 168, 0.24);
  color: var(--text);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: max-content;
  max-width: min(180px, calc(100vw - 24px));
  white-space: normal;
  word-break: normal;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 40;
}

.inventory-filter-chips .filter-chip[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.icon-trigger[data-tooltip]:hover::after,
.icon-trigger[data-tooltip]:focus-visible::after,
.icon-only-button[data-tooltip]:hover::after,
.icon-only-button[data-tooltip]:focus-visible::after,
.filter-chip[data-tooltip]:hover::after,
.filter-chip[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#openModalButton[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

#toggleSearchButton[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

#createInvoiceButton[data-tooltip]::after,
#addToInvoiceButton[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 60;
}

#openExpensesModalButton[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 50;
}

.menu-trigger-icon {
  width: 18px;
  height: 18px;
}

.compact-button {
  padding: 12px 14px;
  white-space: nowrap;
}

.file-button input {
  display: none;
}

.stats-grid {
  margin: 24px 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  overflow: visible;
}

#statsGrid {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}

.metrics-section {
  display: grid;
  gap: 0;
}

.metrics-section-heading {
  margin-bottom: 8px;
}

.metrics-section-heading h2 {
  margin-bottom: 0;
  font-size: 1.1rem;
}

.metrics-section .stats-grid {
  margin: 0;
}

.stat-card {
  border-radius: var(--radius);
  padding: 18px 20px;
}

.dashboard-activity-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  position: relative;
  z-index: 30;
  isolation: isolate;
}

.dashboard-analysis-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.dashboard-activity-panel {
  min-width: 0;
  height: 100%;
}

.dashboard-profit-breakdown-panel {
  min-width: 0;
  height: 100%;
}


.dashboard-profit-combined-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}


.dashboard-profit-trend-panel {
  min-width: 0;
  margin-top: 18px;
}

.dashboard-weekly-profit-panel {
  margin-top: 18px;
  min-width: 0;
}

.dashboard-weekly-profit-panel .profit-chart {
  min-height: 520px;
}

.dashboard-weekly-profit-panel .profit-chart-canvas {
  min-height: 520px;
  grid-template-rows: minmax(400px, 1fr) auto;
}

.dashboard-weekly-profit-panel .profit-chart-plot {
  padding-top: 40px;
}

.dashboard-weekly-profit-panel .profit-chart-bar-wrap {
  height: 280px;
}

.dashboard-weekly-profit-panel .profit-chart-value {
  min-height: 44px;
}

.dashboard-activity-panel:nth-of-type(2) .panel-heading {
  justify-content: flex-start;
  text-align: left;
}

.dashboard-activity-panel:nth-of-type(2) .panel-heading > div {
  width: 100%;
}

.dashboard-activity-panel:nth-of-type(2) .panel-heading h2 {
  text-align: left;
}

.dashboard-overview-heading {
  width: 100%;
}

.dashboard-overview-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-overview-week-filter {
  justify-content: flex-end;
}

.dashboard-weekly-metrics-heading {
  width: 100%;
}

.dashboard-weekly-metrics-title-row {
  display: grid;
  gap: 10px;
  justify-items: start;
  text-align: left;
}

.dashboard-weekly-metrics-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  width: auto;
  flex-wrap: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(4, 9, 6, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  flex-wrap: nowrap;
}

.dashboard-weekly-metrics-toggle .filter-chip {
  flex: 0 0 auto;
  min-width: 0;
  min-height: auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(204, 200, 213, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

.dashboard-weekly-metrics-toggle .filter-chip:hover,
.dashboard-weekly-metrics-toggle .filter-chip:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

.dashboard-weekly-metrics-toggle .filter-chip.is-active {
  background: rgba(124, 90, 240, 0.2);
  color: #f0eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dashboard-weekly-metrics-title-row h2 {
  margin: 0;
}

#metricsYearFilters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto;
  flex-wrap: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(4, 9, 6, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#metricsYearFilters .filter-chip {
  flex: 0 0 auto;
  min-width: 0;
  min-height: auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(204, 200, 213, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

#metricsYearFilters .filter-chip:hover,
#metricsYearFilters .filter-chip:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

#metricsYearFilters .filter-chip.is-active {
  background: rgba(124, 90, 240, 0.2);
  color: #f0eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#metricsScopeFilters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto;
  flex-wrap: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(4, 9, 6, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#metricsScopeFilters .filter-chip {
  flex: 0 0 auto;
  min-width: 0;
  min-height: auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(204, 200, 213, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

#metricsScopeFilters .filter-chip:hover,
#metricsScopeFilters .filter-chip:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

#metricsScopeFilters .filter-chip.is-active {
  background: rgba(124, 90, 240, 0.2);
  color: #f0eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dashboard-weekly-profit-note {
  margin: 6px 0 0;
  max-width: 900px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.dashboard-weekly-profit-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 2px 0 18px;
  position: relative;
  z-index: 2;
}

.dashboard-weekly-profit-total {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--success);
  line-height: 1.05;
}

.dashboard-weekly-profit-label {
  color: var(--muted);
  font-size: 0.92rem;
}

.dashboard-category-speed-panel {
  margin-top: 18px;
  min-width: 0;
}

.dashboard-profit-breakdown-card {
  display: grid;
  gap: 18px;
}

.dashboard-profit-breakdown-content {
  display: grid;
  /* Compact layout for half-width panel: stack chart + legend. */
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.dashboard-profit-breakdown-chart-wrap {
  display: grid;
  justify-items: center;
  align-items: start;
  min-width: 0;
  overflow: visible;
}

.dashboard-profit-breakdown-chart {
  display: block;
  width: min(100%, 560px);
  height: auto;
  overflow: visible;
}

.dashboard-profit-breakdown-center-label {
  fill: rgba(240, 237, 247, 0.72);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-profit-breakdown-center-value {
  fill: var(--success);
  font-size: 16px;
  font-weight: 700;
}

.dashboard-profit-breakdown-slice-label {
  fill: rgba(240, 237, 247, 0.92);
  font-size: 11px;
  pointer-events: none;
}

.dashboard-profit-breakdown-slice-label-main {
  font-weight: 700;
}

.dashboard-profit-breakdown-slice-label-sub {
  fill: rgba(240, 237, 247, 0.68);
  font-weight: 600;
}

.dashboard-profit-breakdown-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.dashboard-profit-breakdown-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-profit-breakdown-legend {
  display: grid;
  gap: 10px;
}

.dashboard-profit-breakdown-legend-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(19, 20, 28, 0.72);
  border: 1px solid rgba(139, 139, 168, 0.18);
}

.dashboard-profit-breakdown-legend-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dashboard-profit-breakdown-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.dashboard-profit-breakdown-legend-label {
  color: var(--text);
  font-weight: 600;
  min-width: 0;
}

.dashboard-profit-breakdown-legend-values {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--text);
  font-weight: 600;
}

.dashboard-profit-breakdown-legend-percent {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.dashboard-profit-breakdown-empty {
  display: grid;
  gap: 18px;
}

.dashboard-category-speed-card {
  display: grid;
  gap: 18px;
}

.dashboard-category-speed-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dts-invoices-model-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 0.88rem;
}

.dts-invoices-model-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dts-invoices-model-table thead th:last-child,
.dts-invoices-model-table tbody td:last-child {
  text-align: center;
}


.dts-invoices-model-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dts-invoices-model-table tbody tr:last-child {
  border-bottom: none;
}

.dts-invoices-model-table tbody td {
  padding: 9px 10px;
  color: var(--text);
}

.dts-invoices-model-table tbody td:last-child {
  text-align: right;
  color: var(--accent-strong);
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-category-speed-list {
  display: grid;
  gap: 10px;
}

.dashboard-category-speed-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(19, 20, 28, 0.72);
  border: 1px solid rgba(139, 139, 168, 0.18);
}

.dashboard-category-speed-row.is-fastest {
  border-color: rgba(124, 90, 240, 0.38);
  box-shadow: inset 0 0 0 1px rgba(124, 90, 240, 0.12);
}

.dashboard-category-speed-rank {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 90, 240, 0.14);
  color: var(--accent-strong);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dashboard-category-speed-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-category-speed-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.dashboard-category-speed-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(217, 178, 77, 0.14);
  color: #d9b24d;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-category-speed-sub {
  color: var(--muted);
  font-size: 0.92rem;
}

.dashboard-category-speed-values {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.dashboard-category-speed-empty {
  display: grid;
  gap: 18px;
}

.dashboard-calendar-shell {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  overflow: visible;
  position: relative;
  z-index: 40;
  isolation: isolate;
}

.dashboard-calendar-card {
  display: grid;
  gap: 16px;
  padding: 20px 18px 18px;
  border-radius: 24px;
  background: #26292f;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 40px -28px rgba(0, 0, 0, 0.7);
  overflow: visible;
  position: relative;
  z-index: 41;
}

.dashboard-calendar-left-section,
.dashboard-calendar-right-section {
  align-content: start;
  min-width: 0;
}

.dashboard-calendar-left-section {
  flex: 1 1 auto;
}

.dashboard-calendar-right-section {
  flex: 0 0 320px;
  width: 320px;
}

.dashboard-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-calendar-month-wrap {
  display: grid;
  gap: 4px;
}

.dashboard-calendar-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f3f5f7;
}

.dashboard-calendar-month {
  font-size: 0.9rem;
  font-weight: 500;
  color: #a3aab2;
}

.dashboard-calendar-subcopy {
  color: #818892;
  font-size: 0.84rem;
}

.dashboard-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-calendar-mode-row {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  padding: 0;
  background: transparent;
  border: 0;
  gap: 18px;
}

.dashboard-calendar-button {
  min-height: auto;
  min-width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: color 140ms ease, transform 140ms ease, text-shadow 140ms ease, opacity 140ms ease;
  opacity: 0.82;
}

.dashboard-calendar-button:hover,
.dashboard-calendar-button:focus-visible {
  color: var(--accent-strong);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translateY(-1px);
  text-shadow: 0 0 14px rgba(124, 90, 240, 0.42);
  opacity: 1;
  outline: none;
}

.dashboard-calendar-segment {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 2px 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.dashboard-calendar-segment.is-active {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(124, 90, 240, 0.55);
  text-underline-offset: 5px;
}

.dashboard-calendar-segment:hover,
.dashboard-calendar-segment:focus-visible {
  color: var(--text);
  outline: none;
  opacity: 1;
}

.dashboard-calendar-main {
  min-width: 0;
  overflow: visible;
  position: relative;
  z-index: 41;
}

.dashboard-calendar-ui {
  display: grid;
  gap: 12px;
  padding: 6px 4px 2px;
  border-radius: 18px;
  background: rgba(11, 9, 17, 0.36);
  overflow: visible;
  position: relative;
  z-index: 41;
}

#dashboardCalendarPanel {
  overflow: visible;
}

.dashboard-calendar-weekdays-row,
.dashboard-calendar-week {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(56px, 1fr)) !important;
  gap: 8px;
  width: 100%;
}

.dashboard-calendar-weeks {
  display: grid;
  gap: 8px;
  width: 100%;
}

.dashboard-calendar-metrics {
  display: grid;
  gap: 12px;
  align-content: start;
}

.dashboard-calendar-metrics-header {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.dashboard-calendar-weekday {
  color: #7f878f;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 6px;
}

.dashboard-calendar-day {
  min-height: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 16px;
  background: #2a2f36;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  position: relative;
  overflow: visible;
  z-index: 41;
}

.dashboard-calendar-day:hover,
.dashboard-calendar-day:focus-within {
  z-index: 1001;
}

.dashboard-calendar-day-popover {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, calc(-100% - 10px));
  width: clamp(260px, 60vw, 380px);
  max-width: min(380px, 88vw);
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(22, 26, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  backdrop-filter: blur(14px);
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-calendar-day-popover.is-below {
  top: auto;
  bottom: 0;
  transform: translate(-50%, calc(100% + 10px));
}

.dashboard-calendar-day-popover.is-left {
  left: 0;
  transform: translate(0, calc(-100% - 10px));
}

.dashboard-calendar-day-popover.is-right {
  left: auto;
  right: 0;
  transform: translate(0, calc(-100% - 10px));
}

.dashboard-calendar-day-popover.is-below.is-left {
  left: 0;
  transform: translate(0, calc(100% + 10px));
}

.dashboard-calendar-day-popover.is-below.is-right {
  left: auto;
  right: 0;
  transform: translate(0, calc(100% + 10px));
}

.dashboard-calendar-day:hover .dashboard-calendar-day-popover,
.dashboard-calendar-day:focus-within .dashboard-calendar-day-popover {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 14px));
}

.dashboard-calendar-day:hover .dashboard-calendar-day-popover.is-left,
.dashboard-calendar-day:focus-within .dashboard-calendar-day-popover.is-left {
  transform: translate(0, calc(-100% - 14px));
}

.dashboard-calendar-day:hover .dashboard-calendar-day-popover.is-right,
.dashboard-calendar-day:focus-within .dashboard-calendar-day-popover.is-right {
  transform: translate(0, calc(-100% - 14px));
}

.dashboard-calendar-day:hover .dashboard-calendar-day-popover.is-below,
.dashboard-calendar-day:focus-within .dashboard-calendar-day-popover.is-below {
  transform: translate(-50%, calc(100% + 14px));
}

.dashboard-calendar-day:hover .dashboard-calendar-day-popover.is-below.is-left,
.dashboard-calendar-day:focus-within .dashboard-calendar-day-popover.is-below.is-left {
  transform: translate(0, calc(100% + 14px));
}

.dashboard-calendar-day:hover .dashboard-calendar-day-popover.is-below.is-right,
.dashboard-calendar-day:focus-within .dashboard-calendar-day-popover.is-below.is-right {
  transform: translate(0, calc(100% + 14px));
}

.dashboard-calendar-day-popover-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.dashboard-calendar-day-popover-total {
  color: rgba(243, 245, 247, 0.95);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-calendar-day-popover-subtitle {
  color: rgba(163, 170, 178, 0.92);
  font-size: 0.78rem;
  margin-bottom: 10px;
}

.dashboard-calendar-day-popover-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.dashboard-calendar-day-popover-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(243, 245, 247, 0.9);
}

.dashboard-calendar-day-popover-list li span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-calendar-day-popover-list li span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard-calendar-day-popover-more {
  margin-top: 8px;
  color: rgba(163, 170, 178, 0.9);
  font-size: 0.78rem;
}

.dashboard-calendar-day.has-activity.intensity-1 {
  background: #39236b;
}

.dashboard-calendar-day.has-activity.intensity-2 {
  background: #3c2376;
}

.dashboard-calendar-day.has-activity.intensity-3 {
  background: #3c1695;
}

.dashboard-calendar-day.has-activity.intensity-4 {
  background: #440fbe;
}

.dashboard-calendar-day.is-today {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.dashboard-calendar-day.is-empty {
  background: rgba(42, 47, 54, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.dashboard-calendar-day-body {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-items: center;
}

.dashboard-calendar-day-number {
  font-weight: 700;
  font-size: 1.02rem;
  color: #dee4e8;
  line-height: 1;
}

.dashboard-calendar-day-count {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(225, 222, 233, 0.6);
  line-height: 1;
}

.dashboard-calendar-summary-card {
  display: grid;
  gap: 10px;
  min-height: 116px;
  align-content: start;
}

.dashboard-calendar-summary-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-calendar-summary-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 90, 240, 0.14);
  color: var(--accent-strong);
  font-size: 0.95rem;
  font-weight: 700;
}

.dashboard-calendar-summary-label {
  margin: 0;
}

.dashboard-calendar-summary-value {
  margin: 0;
  font-size: 1.35rem;
}

.dashboard-calendar-summary-accent {
  color: var(--accent-strong);
  font-size: 1.08rem;
  font-weight: 700;
}

.dashboard-performance-card {
  display: grid;
  gap: 18px;
  padding: 6px 2px 2px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dashboard-performance-summary {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  text-align: center;
  width: min(100%, 940px);
  margin: 0 auto;
}

.dashboard-performance-metric {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  justify-items: center;
}

.dashboard-performance-metric:first-child .dashboard-performance-metric-value {
  color: var(--text);
}

.dashboard-performance-metric.is-accent .dashboard-performance-metric-value {
  color: #d9b24d;
}

.dashboard-performance-metric-value {
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent-strong);
}

.dashboard-performance-metric-label {
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 500;
}

.dashboard-performance-metric-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 2px;
  opacity: 0.7;
}

.dashboard-performance-toolbar {
  display: flex;
  justify-content: center;
}

.dashboard-performance-month-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text);
}

.dashboard-performance-month-wrap .dashboard-calendar-month {
  font-size: 1.14rem;
  color: rgba(240, 237, 247, 0.98);
}

.dashboard-performance-month-wrap .dashboard-calendar-button:hover,
.dashboard-performance-month-wrap .dashboard-calendar-button:focus-visible {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(124, 90, 240, 0.42);
}

.dashboard-performance-chart-wrap {
  border-radius: 22px;
  background: rgba(124, 90, 240, 0.08);
  border: 1px solid rgba(139, 139, 168, 0.18);
  padding: 18px 14px 12px;
  overflow: hidden;
}

.dashboard-performance-chart {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

.dashboard-performance-gridline {
  stroke: rgba(139, 139, 168, 0.2);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.dashboard-performance-gridline.is-vertical {
  stroke: rgba(139, 139, 168, 0.12);
}

.dashboard-performance-axis-label {
  fill: rgba(240, 237, 247, 0.92);
  font-size: 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
}

.dashboard-performance-axis-line {
  stroke: rgba(240, 237, 247, 0.36);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.dashboard-performance-axis-line.is-x-axis,
.dashboard-performance-axis-line.is-y-axis {
  stroke: rgba(240, 237, 247, 0.42);
}

.dashboard-performance-area {
  fill: transparent;
}

.dashboard-performance-area.is-sales {
  fill: rgba(155, 123, 255, 0.12);
}

.dashboard-performance-area.is-profit {
  fill: rgba(217, 178, 77, 0.10);
}

.dashboard-performance-line {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-performance-line.is-sales {
  stroke: var(--accent);
  filter: drop-shadow(0 0 8px rgba(124, 90, 240, 0.16));
}

.dashboard-performance-line.is-profit {
  stroke: #d9b24d;
  filter: drop-shadow(0 0 6px rgba(217, 178, 77, 0.18));
}

.dashboard-performance-line.is-net {
  stroke: rgba(240, 237, 247, 0.92);
  filter: drop-shadow(0 0 6px rgba(240, 237, 247, 0.12));
}

.dashboard-performance-point {
  stroke-width: 2.5;
  fill: rgba(11, 8, 17, 0.98);
}

.dashboard-performance-point.is-sales {
  stroke: var(--accent);
}

.dashboard-performance-point.is-profit {
  stroke: #d9b24d;
}

.dashboard-performance-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--muted);
}

.dashboard-performance-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.96rem;
}

.dashboard-performance-legend-item.is-sales {
  color: var(--accent);
}

.dashboard-performance-legend-item.is-profit {
  color: #d9b24d;
}

.dashboard-performance-legend-item.is-net {
  color: rgba(240, 237, 247, 0.92);
}

.dashboard-performance-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.dashboard-performance-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 220px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: rgba(10, 14, 11, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  color: rgba(240, 237, 247, 0.96);
  font-size: 12px;
  pointer-events: none;
}

.dashboard-performance-tooltip .perf-tooltip-date {
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  color: rgba(240, 237, 247, 0.92);
}

.dashboard-performance-tooltip .perf-tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.dashboard-performance-tooltip .perf-tooltip-key {
  color: rgba(240, 237, 247, 0.78);
}

.dashboard-performance-tooltip .perf-tooltip-val {
  font-variant-numeric: tabular-nums;
}

.dashboard-performance-tooltip .perf-tooltip-row.is-sales .perf-tooltip-val {
  color: #7c5af0;
}

.dashboard-performance-tooltip .perf-tooltip-row.is-profit .perf-tooltip-val {
  color: #d9b24d;
}

.dashboard-performance-tooltip .perf-tooltip-row.is-net .perf-tooltip-val {
  color: rgba(240, 237, 247, 0.92);
}

@media (max-width: 980px) {
  .dashboard-activity-row {
    grid-template-columns: 1fr;
  }

  .dashboard-analysis-row {
    grid-template-columns: 1fr;
  }

  .dashboard-category-speed-summary {
    grid-template-columns: 1fr;
  }

  .dashboard-category-speed-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .dashboard-category-speed-values {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
    gap: 4px;
  }

  .dashboard-profit-breakdown-content {
    grid-template-columns: 1fr;
  }

  .dashboard-profit-breakdown-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboard-calendar-shell {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dashboard-performance-summary {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .dashboard-calendar-right-section {
    flex: none;
    width: auto;
  }

  .dashboard-calendar-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 8px 0 4px;
}

.stat-meta {
  color: var(--muted);
  font-size: 0.92rem;
}

.metrics-chart-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 8px;
}

.expenses-chart-grid {
  margin-bottom: 18px;
}

.metrics-filters {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.expenses-filters {
  display: flex;
  justify-content: flex-start;
  margin: 4px 0 14px;
}

.expenses-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .inventory-pagination {
    justify-content: center;
  }
}

.expenses-page-size {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.expenses-page-size select {
  width: auto;
  min-width: 78px;
}

.expenses-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.power-list-grid {
  display: grid;
  gap: 22px;
  overflow: visible;
}

.daily-action-list {
  display: grid;
  gap: 12px;
}

.daily-action-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 16, 26, 0.72);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.daily-action-item:hover {
  border-color: rgba(124, 90, 240, 0.32);
  background: rgba(23, 19, 32, 0.88);
}

.daily-action-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.daily-action-checkmark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(167, 160, 182, 0.4);
  background: rgba(10, 8, 14, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.daily-action-checkmark::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}

.daily-action-text {
  min-width: 0;
  color: var(--text);
  font-weight: 500;
}

.daily-action-edit,
.daily-action-delete {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 8px;
  justify-self: end;
  position: relative;
  z-index: 1;
}

.daily-action-edit[data-tooltip]::after,
.daily-action-delete[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.daily-action-edit .action-icon,
.daily-action-delete .action-icon {
  width: 13px;
  height: 13px;
}

.daily-action-item.is-complete {
  border-color: rgba(124, 90, 240, 0.34);
  background: rgba(21, 16, 32, 0.92);
}

.daily-action-item.is-complete .daily-action-checkmark {
  border-color: rgba(124, 90, 240, 0.7);
  background: rgba(124, 90, 240, 0.2);
  color: #e9e2ff;
}

.daily-action-item.is-complete .daily-action-checkmark::after {
  opacity: 1;
}

.daily-action-item.is-complete .daily-action-text {
  color: rgba(228, 216, 255, 0.95);
}

.dashboard-subsection {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(139, 139, 168, 0.18);
  display: grid;
  gap: 14px;
}

.dashboard-subsection-heading {
  margin-bottom: 0;
}

.dashboard-subsection h3 {
  margin: 0;
}

.reachout-log-list {
  display: grid;
  gap: 12px;
  max-height: 760px;
  overflow-y: auto;
  overflow-x: visible;
  padding-top: 6px;
  padding-right: 4px;
}

.reachout-log-item {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 16, 26, 0.72);
}

.reachout-log-item.is-clickable {
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.reachout-log-item.is-clickable:hover,
.reachout-log-item.is-clickable:focus-within {
  z-index: 2;
  border-color: rgba(155, 123, 255, 0.34);
  background: rgba(24, 20, 33, 0.84);
  transform: translateY(-1px);
}

.reachout-goal-counter {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.reachout-goal-counter.is-below-target {
  color: var(--danger);
}

.reachout-goal-counter.is-near-target {
  color: var(--warning);
}

.reachout-goal-counter.is-at-target {
  color: var(--success);
}

.reachout-log-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.reachout-log-title {
  font-weight: 600;
  color: var(--text);
}

.reachout-log-offer {
  color: var(--muted);
  font-size: 0.92rem;
}

.reachout-log-followup,
.reachout-log-notes {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.reachout-log-followup.is-due-today {
  color: var(--danger);
  font-weight: 700;
}

.reachout-log-followup.is-due-soon {
  color: var(--warning);
  font-weight: 700;
}

.reachout-log-actions {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.reachout-log-action-button {
  min-width: 72px;
}

.reachout-log-actions .icon-only-button[data-tooltip]::after {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateX(-50%) translateY(-4px);
}

.reachout-log-actions .icon-only-button[data-tooltip]:hover::after,
.reachout-log-actions .icon-only-button[data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

.reachout-log-details-grid {
  margin-bottom: 8px;
}

.reachout-history-list {
  display: grid;
  gap: 20px;
}

.reachout-history-group {
  display: grid;
  gap: 14px;
}

.reachout-history-header {
  display: grid;
  gap: 4px;
}

.reachout-history-header .panel-kicker,
.reachout-history-header h3 {
  margin: 0;
}

.reachout-history-items {
  display: grid;
  gap: 12px;
}

.reachout-history-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.reachout-history-pagination .pagination-size-label {
  margin-right: auto;
}

.reachout-history-pagination .expenses-pagination-controls {
  margin-left: auto;
}

.reachout-details-grid .detail-card {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 16, 26, 0.72);
}

.reachout-details-grid .detail-label {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.reachout-details-grid .detail-value {
  color: var(--text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.detail-input {
  width: 100%;
  border: 1px solid rgba(139, 139, 168, 0.24);
  border-radius: 12px;
  background: rgba(11, 9, 15, 0.92);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

.detail-input:focus {
  outline: 0;
  border-color: rgba(155, 123, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(155, 123, 255, 0.12);
}

.detail-textarea {
  resize: vertical;
  min-height: 110px;
}

.reachout-details-actions {
  justify-content: flex-end;
}

.reachout-details-action-button {
  padding: 6px 10px;
  font-size: 0.78rem;
  min-height: 32px;
}

.reachout-delete-actions {
  justify-content: flex-end;
}

.reachout-delete-action-button {
  padding: 6px 10px;
  font-size: 0.78rem;
  min-height: 32px;
}

.detail-input.is-due-today {
  border-color: rgba(216, 87, 87, 0.55);
  color: var(--danger);
}

.detail-input.is-due-soon {
  border-color: rgba(233, 185, 73, 0.5);
  color: var(--warning);
}

.power-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

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

.power-list-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.power-list-title-row h2 {
  margin: 0;
}

.power-list-inline-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.power-list-inline-filter {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font: inherit;
  cursor: pointer;
  line-height: 1;
}

.power-list-inline-filter:hover,
.power-list-inline-filter.is-active {
  color: var(--accent-strong);
}

.power-list-inline-separator {
  color: rgba(167, 160, 182, 0.45);
}

.power-list-section {
  display: grid;
  gap: 14px;
}

.power-list-section-header {
  display: block;
}

.power-list-section-title {
  display: grid;
  gap: 4px;
}

.power-list-section-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.power-list-section-header .panel-kicker {
  margin: 0;
}

.power-list-section-header h3 {
  margin: 0;
}

.power-list-section-title-button {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.power-list-section-title-button:hover,
.power-list-section-title-button:focus-visible {
  color: var(--accent-strong);
  outline: none;
}

.power-section-toggle {
  flex: 0 0 auto;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--muted);
}

.power-section-toggle:hover,
.power-section-toggle:focus-visible {
  background: transparent;
  color: var(--accent-strong);
}

.power-list-section-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  overflow: visible;
  justify-content: start;
}
.power-list-section-grid:has(.power-link-card--multi) {
  grid-template-columns: 1fr;
}

.power-link-card {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 220px;
  max-width: 320px;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.power-link-card:has(.power-link-menu[open]) {
  z-index: 35;
}

.power-link-card:hover,
.power-link-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(124, 90, 240, 0.34);
  background: rgba(19, 16, 26, 0.96);
  outline: none;
}

.power-link-card.is-dragging {
  opacity: 0.55;
  transform: scale(0.985);
}

.power-link-card.is-drop-target {
  border-color: rgba(124, 90, 240, 0.58);
  background: rgba(24, 19, 34, 0.98);
}

.power-link-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.power-link-card-head .stat-label {
  min-width: 0;
  padding-top: 4px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.power-link-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 36;
}

.power-link-menu summary {
  list-style: none;
}

.power-link-menu summary::-webkit-details-marker {
  display: none;
}

.power-link-menu-trigger {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 10px;
  padding: 0;
}

.power-link-menu-trigger .menu-trigger-icon {
  width: 14px;
  height: 14px;
}

.power-link-menu-trigger[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.power-link-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(12, 10, 17, 0.98);
  border: 1px solid rgba(139, 139, 168, 0.2);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);
  display: grid;
  gap: 6px;
  z-index: 40;
}

.power-link-menu-panel .menu-item {
  width: 100%;
  text-align: left;
}

/* Multi-platform power link cards — full-width rows */
.power-link-card--multi {
  cursor: default;
  min-width: 0;
  max-width: 100%;
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.power-link-card--multi:hover,
.power-link-card--multi:focus-visible {
  cursor: default;
  transform: none;
}
.power-link-card--multi .power-link-card-head {
  padding-bottom: 4px;
}
.power-link-pills {
  display: flex;
  gap: 8px;
  padding: 0 10px 12px;
}
.power-link-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 6px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
}
.power-link-pill--fb {
  background: rgba(24, 119, 242, 0.12);
  color: #4a9eff;
  border-color: rgba(24, 119, 242, 0.25);
}
.power-link-pill--fb:hover {
  background: #1877f2;
  color: #fff;
}
.power-link-pill--ou {
  background: rgba(9, 184, 157, 0.12);
  color: #09b89d;
  border-color: rgba(9, 184, 157, 0.25);
}
.power-link-pill--ou:hover {
  background: #09b89d;
  color: #fff;
}
.power-link-pill--cl {
  background: rgba(124, 92, 238, 0.12);
  color: #9b82f5;
  border-color: rgba(124, 92, 238, 0.25);
}
.power-link-pill--cl:hover {
  background: #7c5cee;
  color: #fff;
}

.metrics-month-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  justify-content: center;
}

.metrics-week-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  justify-content: center;
}

.metrics-month-filter select {
  width: auto;
  min-width: 190px;
}

.metrics-week-filter select {
  width: auto;
  min-width: 190px;
}

.metrics-chart-panel {
  padding: 20px;
}

.metrics-chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.metrics-chart-heading h2 {
  margin-bottom: 0;
  font-size: 1.1rem;
}

.spend-breakdown-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.spend-year-pills {
  opacity: 0.75;
  font-size: 0.72rem;
}

.spend-pill {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.spend-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.spend-pill.is-active {
  background: rgba(124, 90, 240, 0.18);
  border-color: rgba(124, 90, 240, 0.4);
  color: var(--success);
}

.profit-chart {
  min-height: 360px;
  position: relative;
  z-index: 1;
}

.profit-chart-canvas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(280px, 1fr) auto;
  gap: 12px 16px;
  min-height: 360px;
}

.profit-chart-axis {
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profit-chart-axis-y {
  align-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.profit-chart-axis-x {
  grid-column: 2;
  text-align: center;
}

.profit-chart-plot {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 24px 12px 0;
  border-left: 1px solid rgba(139, 139, 168, 0.22);
  border-bottom: 1px solid rgba(139, 139, 168, 0.22);
  overflow-x: auto;
  overflow-y: hidden;
}

.profit-chart-baseline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(163, 157, 177, 0.28);
  pointer-events: none;
}

.profit-chart-column {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 100%;
  overflow: hidden;
}

.profit-chart-value {
  font-size: 0.84rem;
  text-align: center;
  color: var(--muted);
  min-height: 40px;
  display: grid;
  align-items: end;
}

.profit-chart-value.is-positive {
  color: #9b7bff;
}

.profit-chart-value.is-negative {
  color: var(--danger);
}

.profit-chart-bar-wrap {
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.profit-chart-bar-wrap.has-negative {
  align-items: stretch;
  position: relative;
}

.profit-chart-bar-wrap.has-negative .profit-chart-bar {
  position: absolute;
  left: 50%;
  width: min(42px, 100%);
  transform: translateX(-50%);
}

.profit-chart-bar {
  width: min(42px, 100%);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(155, 123, 255, 0.95), rgba(109, 77, 224, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.profit-chart-bar.is-negative {
  background: linear-gradient(180deg, rgba(239, 112, 112, 0.95), rgba(180, 58, 58, 0.62));
}

.profit-chart-bar-wrap.has-negative .profit-chart-bar.is-positive {
  bottom: 50%;
  border-radius: 14px 14px 0 0;
}

.profit-chart-bar-wrap.has-negative .profit-chart-bar.is-negative {
  top: 50%;
  border-radius: 0 0 14px 14px;
}

.profit-chart-label {
  text-align: center;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.35;
  word-break: break-word;
}

.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 10px;
}

.page-logo-banner {
  display: block;
  width: fit-content;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

.page-logo-banner img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(139, 139, 168, 0.2),
    0 0 24px rgba(124, 90, 240, 0.14);
}

#dashboardPage {
  min-height: calc(100svh - 110px);
  align-content: center;
  justify-content: center;
  padding-top: 0;
}

.dashboard-top-row {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  overflow: visible;
}

.dashboard-bookmarks-panel {
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px 4px;
  border-radius: 10px;
}

.bookmarks-strip {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  min-height: 32px;
}

.dashboard-bookmarks-panel #addBookmarkButton {
  align-self: flex-start;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  font-size: 0.8rem;
}

.bookmarks-bar-wrap {
  flex: 1 1 auto;
  overflow: visible;
}

.bookmarks-bar {
  display: flex;
  align-items: stretch;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 100%;
  max-height: 56px;
  padding-bottom: 0;
}

.bookmark-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 16, 26, 0.78);
  color: var(--text);
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  font-size: 0.78rem;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.bookmark-chip:hover,
.bookmark-chip:focus-visible {
  border-color: rgba(124, 90, 240, 0.34);
  background: rgba(22, 18, 31, 0.94);
  outline: none;
}

.bookmark-chip.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.bookmark-chip.is-drop-target {
  border-color: rgba(124, 90, 240, 0.58);
}

.bookmark-chip-title {
  font-weight: 600;
  line-height: 1.1;
}

.bookmark-favicon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.bookmark-menu-trigger {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 140ms ease;
  cursor: pointer;
}

.bookmark-menu-trigger .menu-trigger-icon {
  width: 9px;
  height: 9px;
}

.bookmark-chip:hover .bookmark-menu-trigger,
.bookmark-chip:focus-visible .bookmark-menu-trigger,
.bookmark-chip:focus-within .bookmark-menu-trigger {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dashboard-lists-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.7fr);
  gap: 20px;
  align-items: start;
}

.dashboard-daily-panel {
  height: 100%;
}

#addDailyActionButton,
#addReachoutLogButton,
#addPowerLinkButton {
  min-width: 32px;
  min-height: 32px;
  padding: 6px 10px;
}

#openReachoutLogPageButton,
#addPowerSectionButton {
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.panel {
  border-radius: var(--radius);
  padding: 24px;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
  z-index: 220;
}

.modal.is-open {
  align-items: center;
  justify-items: center;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  touch-action: none;
}

/* Disable backdrop-filter on modals that contain the DTP so iOS Safari
   doesn't composite the blur above the fixed-position date picker */
#lotRecallCheckModal .modal-backdrop {
  backdrop-filter: none;
}

.modal-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(92vh, 980px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

#inventoryModal .modal-panel {
  width: min(1180px, calc(100vw - 40px));
}

.dropdown-manager-panel {
  width: min(760px, 100%);
}

.modal#accountModal .dropdown-manager-panel,
#accountModal .dropdown-manager-panel {
  width: min(1040px, calc(100vw - 40px));
}

.metrics-panel {
  width: min(1200px, 100%);
}

.spreadsheet-wrap {
  max-height: 72vh;
  overflow-x: auto;
}

.spreadsheet-page-wrap {
  max-height: none;
}

#spreadsheetPage .panel,
#mercuryPricingPage .panel,
#expensesPage .panel {
  padding: 18px;
}

#mercuryPricingPage .panel {
  overflow: visible;
}

.mercury-pricing-shell {
  display: grid;
  gap: 14px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px 18px;
}

.mercury-pricing-panel {
  display: contents;
}

.mercury-pricing-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(89, 84, 100, 0.32);
  background: rgba(13, 18, 25, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

.mercury-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mercury-pricing-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mercury-pricing-heading h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.mercury-pricing-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.mercury-topbar-pill {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(93, 143, 104, 0.22);
  background: rgba(19, 16, 25, 0.96);
  color: #a58ce0;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: right;
}

.mercury-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.dts-pricing-shell .mercury-topbar-pill {
  max-width: 360px;
}

.dts-pricing-shell .mercury-pricing-topbar {
  border-color: rgba(114, 106, 131, 0.34);
  background: linear-gradient(180deg, rgba(12, 18, 15, 0.98), rgba(10, 14, 12, 0.96));
}

.dts-pricing-shell .mercury-pricing-heading h2 {
  font-size: 1.08rem;
}

.dts-pricing-search-topbar {
  flex-shrink: 0;
  width: 100%;
  max-width: 280px;
}

.dts-pricing-shell .mercury-pricing-subtitle {
  color: #a8b3bf;
  font-size: 0.78rem;
}

.dts-pricing-shell .mercury-pricing-legend-row {
  gap: 10px;
}

.dts-section-card {
  gap: 10px;
}

.dts-section-header-rows {
  display: grid;
  gap: 6px;
}

.dts-section-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dts-header-pill {
  background: rgba(18, 24, 21, 0.98);
  color: #ab92e4;
  border-color: rgba(167, 139, 250, 0.22);
}

.dts-section-notes .mercury-note-pill {
  background: rgba(24, 22, 29, 0.98);
  color: #e1d8f5;
  border-color: rgba(145, 215, 155, 0.2);
}

.dts-recall-pill {
  background: rgba(248, 113, 113, 0.12) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
  font-weight: 700;
}

/* ── DTS price table — mirrors flipstaff.co/resources/dts-price-guide.html ── */
.dts-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dts-pricing-table thead tr {
  background: #374151;
}

table.dts-pricing-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 8px 10px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: none;
  white-space: nowrap;
}

table.dts-pricing-table thead th:first-child {
  text-align: left;
}

.dts-tier-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.dts-tier-date {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #6b7280;
}

.dts-pricing-table thead th:last-child {
  border-right: none;
}

.dts-pricing-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.dts-pricing-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.dts-pricing-table tbody tr:hover td {
  background: rgba(125, 239, 161, 0.04);
}

table.dts-pricing-table td {
  padding: 8px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

.dts-pricing-table td:last-child {
  border-right: none;
}

table.dts-pricing-table .mercury-row-label {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: #f9fafb;
}

.dts-price-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
  text-align: center;
}

.dts-offer-value {
  color: #9f7def;
  font-weight: 700;
  font-size: 13px;
}

.dts-offer-value-damaged {
  color: #a78bfa;
}

.dts-mercury-ref {
  color: #9ca3af;
  font-size: 10px;
}

.dts-badge {
  font-weight: 700;
  font-size: 11px;
}

.dts-badge-ask {
  color: #fbbf24;
}

.dts-badge-stop {
  color: #f87171;
}

.mercury-pricing-toolbar {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.mercury-pricing-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 10px;
  align-items: center;
}

.dts-pricing-toolbar-row-solo {
  grid-template-columns: 1fr;
}

.dts-pricing-toolbar-row-solo .mercury-pricing-search {
  justify-self: end;
}

.mercury-pricing-control-group {
  display: grid;
  gap: 6px;
}

.mercury-condition-group {
  justify-self: stretch;
}

.mercury-pricing-search {
  display: grid;
  gap: 6px;
  justify-self: end;
  width: 100%;
  max-width: 320px;
}

.mercury-pricing-search span,
.mercury-pricing-tab-label {
  color: #9ca6b5;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mercury-pricing-search input {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(87, 98, 115, 0.42);
  background: rgba(23, 30, 39, 0.98);
}

.dts-pricing-shell .mercury-pricing-search input {
  border-color: rgba(114, 106, 131, 0.34);
  background: rgba(18, 24, 21, 0.96);
}

.mercury-pricing-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.mercury-pricing-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mercury-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mercury-tab {
  border-radius: 999px;
  border-color: rgba(81, 92, 108, 0.7);
  background: rgba(23, 30, 39, 0.96);
  color: #c7ceda;
  font-size: 0.78rem;
  padding: 7px 11px;
}

.mercury-tab-small {
  padding-inline: 10px;
}

.mercury-tab.is-active {
  border-color: rgba(167, 139, 250, 0.55);
  background: #a78bfa;
  color: #0b0811;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.18);
}

.mercury-pricing-legend {
  display: grid;
  gap: 12px;
}

.mercury-pricing-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mercury-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(89, 84, 100, 0.28);
  font-size: 0.72rem;
  font-weight: 700;
}

.mercury-legend-chip-ok {
  background: rgba(37, 24, 66, 0.95);
  color: #9cf0ac;
}

.mercury-legend-chip-warn {
  background: rgba(72, 26, 30, 0.95);
  color: #ff9da3;
}

.mercury-pricing-legend-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mercury-legend-card {
  display: grid;
  gap: 6px;
  min-height: 152px;
  padding: 14px 15px;
  border-radius: 14px;
  border: 1px solid rgba(90, 105, 113, 0.28);
  background: rgba(22, 27, 36, 0.96);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.mercury-legend-card strong {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mercury-legend-card p {
  margin: 0;
  color: #c2c9d6;
  font-size: 0.77rem;
  line-height: 1.45;
}

.mercury-legend-card-green {
  background: rgba(30, 24, 43, 0.96);
}

.mercury-legend-card-gold {
  background: rgba(44, 38, 19, 0.96);
}

.mercury-legend-card-maroon {
  background: rgba(41, 26, 27, 0.96);
}

.mercury-legend-card-plum {
  background: rgba(39, 26, 42, 0.96);
}

.mercury-legend-card-slate {
  background: rgba(24, 29, 35, 0.96);
}

.mercury-legend-card-small {
  grid-column: 1 / span 1;
  min-height: 112px;
}

/* ── DTS legend dots + rule cards — mirrors flipstaff.co/resources/dts-price-guide.html ── */
.dts-legend-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  color: #e6edf8;
}

.dts-legend-dot-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dts-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dts-legend-dot-green {
  background: #9f7def;
}

.dts-legend-dot-muted {
  background: #9ca3af;
}

.dts-legend-dot-red {
  background: #f87171;
}

.dts-legend-dot-yellow {
  background: #fbbf24;
}

.dts-legend-dot-purple {
  background: #a78bfa;
}

.dts-rules-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dts-static-note {
  color: #9ca3af;
  font-size: 0.78rem;
}

.mercury-device-grade-row {
  margin-top: 4px;
  margin-bottom: 4px;
}

.dts-rule-card {
  min-height: 0;
}

.dts-rule-card strong {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.dts-rule-card p {
  color: #c2c9d6;
}

.dts-rule-card p b {
  color: #f9fafb;
}

.dts-rule-card-green {
  background: rgba(125, 239, 161, 0.08);
  border-color: rgba(125, 239, 161, 0.25);
}

.dts-rule-card-green strong {
  color: #9f7def;
}

.dts-rule-card-yellow {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.25);
}

.dts-rule-card-yellow strong {
  color: #fbbf24;
}

.dts-rule-card-red {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
}

.dts-rule-card-red strong {
  color: #f87171;
}

.dts-recall-banner {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #f87171;
}

.dts-recall-banner a {
  color: #f87171;
  font-weight: 700;
  text-decoration: underline;
}

.dts-recall-banner b {
  color: #fca5a5;
}

.dts-recall-banner .dts-recall-icon {
  font-size: 14px;
  line-height: 1;
  margin-top: 1px;
  flex-shrink: 0;
}

.mercury-empty-guide {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(89, 84, 100, 0.28);
  background: rgba(22, 27, 36, 0.96);
  color: #dbe2ee;
}

.mercury-empty-guide strong {
  display: block;
  margin-bottom: 6px;
  color: #a78bfa;
}

.mercury-empty-guide p {
  margin: 0;
  color: #b8c2d2;
}

.mercury-view-shell {
  display: grid;
  gap: 14px;
}

.mercury-phone-section {
  display: grid;
  gap: 8px;
}

.mercury-sheet-section {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.mercury-sheet-section-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-end;
}

.mercury-sheet-kicker {
  margin: 0 0 5px;
  color: #a58ce0;
  font-size: 0.78rem;
  font-weight: 800;
  border-left: 3px solid #a58ce0;
  padding-left: 8px;
}

.mercury-sheet-section h3 {
  margin: 0;
  font-size: 0.98rem;
}

.mercury-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mercury-sheet-preview {
  margin: 0;
  color: #95a2b5;
  font-size: 0.78rem;
}

.mercury-block-list {
  display: grid;
  gap: 12px;
}

.mercury-section-card {
  display: grid;
  gap: 8px;
}

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

.mercury-block-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}

.mercury-block-title-row h3 {
  margin: 0;
  font-size: 0.92rem;
  color: #dde4ef;
}

.mercury-block-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mercury-note-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(89, 84, 100, 0.26);
  background: rgba(21, 26, 34, 0.96);
  color: #a5b0bf;
  font-size: 0.74rem;
}

.mercury-block-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(74, 85, 101, 0.35);
  background: rgba(18, 24, 33, 0.96);
}

.mercury-pricing-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.mercury-pricing-table th,
.mercury-pricing-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(75, 87, 102, 0.22);
  white-space: nowrap;
  text-align: left;
}

.mercury-pricing-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(31, 37, 46, 0.98);
  color: #97a2b2;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mercury-pricing-table tbody tr:hover td {
  background: rgba(26, 33, 43, 0.98);
}

.mercury-row-label {
  font-weight: 800;
  color: #e6edf8;
}

.mercury-offer-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(125, 239, 161, 0.1);
  color: #9f7def;
  font-weight: 800;
}

.mercury-offer-value.mercury-offer-warn {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
}

.mercury-offer-badge {
  color: #fca5a5;
  font-weight: 800;
}

table.mercury-phone-table td:not(:first-child),
table.mercury-phone-table th:not(:first-child) {
  text-align: center;
}

.mercury-storage-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mercury-storage-main {
  font-weight: 800;
}

.mercury-storage-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(89, 84, 100, 0.32);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.mercury-storage-chip-unlocked {
  background: rgba(40, 20, 88, 0.96);
  border-color: rgba(88, 206, 122, 0.38);
  color: #d0bff7;
}

.mercury-storage-chip-empty {
  min-width: 10px;
  padding-inline: 5px;
}

.mercury-storage-chip-locked {
  background: rgba(108, 28, 37, 0.96);
  border-color: rgba(255, 121, 136, 0.38);
  color: #ffd1d7;
}

.mercury-phone-table tbody td:nth-child(2) {
  color: #d7dfeb;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .mercury-pricing-toolbar-row {
    grid-template-columns: 1fr;
  }

  .mercury-pricing-legend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mercury-pricing-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .mercury-topbar-pill {
    text-align: left;
  }

  .mercury-pricing-summary-row {
    flex-direction: column;
    align-items: stretch;
  }

  .mercury-pricing-actions {
    justify-content: flex-start;
  }

  .mercury-pricing-legend-grid {
    grid-template-columns: 1fr;
  }
}

#spreadsheetPage .table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#spreadsheetPage table {
  width: max-content;
  min-width: max-content;
}

#spreadsheetPage th,
#spreadsheetPage td {
  white-space: nowrap;
}

#expensesPage table {
  min-width: 0;
}

.expenses-tile-grid {
  display: none;
  gap: 14px;
  margin-top: 18px;
}

.expense-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(139, 139, 168, 0.22);
  background:
    radial-gradient(circle at 15% 0%, rgba(124, 90, 240, 0.09), transparent 40%),
    linear-gradient(160deg, rgba(20, 16, 30, 0.98), rgba(8, 12, 9, 0.97));
  box-shadow:
    0 16px 36px -28px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.expense-tile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.expense-tile-header-left {
  min-width: 0;
  flex: 1;
}

.expense-tile-date {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 4px;
}

.expense-tile-vendor {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expense-tile-amount {
  flex-shrink: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--success);
  line-height: 1;
  padding-top: 2px;
}

.expense-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.expense-tile-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.expense-tile-badge-category {
  background: rgba(99, 179, 237, 0.13);
  color: #63b3ed;
  border: 1px solid rgba(99, 179, 237, 0.22);
}

.expense-tile-badge-for {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.22);
}

.expense-tile-badge-invoice {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.expense-tile-description {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expense-tile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 139, 168, 0.12);
}

.expense-tile-receipts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.expense-delete-button {
  flex: 0 0 auto;
  color: var(--danger);
}

/* Upload label hidden in table view, shown in tile view */
.expense-upload-label {
  display: none;
}

.expense-tile .expense-receipts-upload,
.expense-tile .expense-delete-button {
  min-height: 40px;
  border-radius: 10px;
}

.expense-tile .expense-receipts-upload {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px dashed rgba(139, 139, 168, 0.4);
  border-radius: 10px;
  color: var(--text-secondary);
  justify-content: center;
}

.expense-tile .expense-receipts-upload .expense-upload-label {
  display: inline;
}

.expense-tile .expense-receipts-upload:hover,
.expense-tile .expense-receipts-upload:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(155, 123, 255, 0.06);
}

.expense-tile .expense-delete-button {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Make the upload button full-width when no receipts yet (just button + empty text) */
.expense-tile .expense-receipts-wrap:not(:has(.expense-receipts-grid)) .expense-receipts-upload {
  width: 100%;
}

.expense-tile:hover,
.expense-tile:focus-within {
  border-color: rgba(155, 123, 255, 0.34);
  box-shadow:
    0 28px 50px -36px rgba(124, 90, 240, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.expense-receipt-card {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  cursor: zoom-in;
  border: 1px solid rgba(139, 139, 168, 0.18);
}

.expense-receipt-card .item-info-photo-thumb {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}

.expense-receipt-card.item-info-photo-card-file {
  padding: 8px 6px;
}

.expense-receipts-empty {
  color: var(--muted);
  font-size: 0.82rem;
  padding: 6px 0;
}

.expense-actions-cell {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.expense-actions-cell .expense-delete-button {
  margin-left: auto;
}

#itemInfoModal .modal-panel {
  width: min(calc(100vw - 40px), 1440px);
  max-height: min(90dvh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(139, 139, 168, 0.22);
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 90, 240, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(19, 16, 27, 0.94), rgba(7, 12, 9, 0.9));
  box-shadow:
    0 22px 42px -34px rgba(0, 0, 0, 0.86),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#invoiceGroupModal .modal-panel {
  width: min(calc(100vw - 40px), 1440px);
  max-height: min(90dvh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(139, 139, 168, 0.22);
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 90, 240, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(19, 16, 27, 0.94), rgba(7, 12, 9, 0.9));
  box-shadow:
    0 22px 42px -34px rgba(0, 0, 0, 0.86),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#addInvoiceItemsModal .modal-panel {
  overflow-x: auto;
}

#addInvoiceItemsModal .table-wrap {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

#invoiceGroupModal .modal-heading {
  text-align: left;
  padding: 0;
  margin-bottom: 4px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#invoiceGroupModal .panel-kicker,
#invoiceGroupModal #invoiceGroupTitle {
  text-align: left;
}

#invoiceGroupModal .item-info-section-header {
  justify-content: flex-end;
}

#invoiceGroupModal .item-info-section-header h3 {
  margin-right: auto;
}

#invoiceGroupModal .item-info-fields {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

#invoiceGroupModal .item-info-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

#invoiceGroupModal .item-info-section-card {
  gap: 10px;
}

#invoiceGroupModal .item-info-summary-top {
  margin-bottom: 12px;
}

.invoice-group-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.invoice-group-summary-tile {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(139, 139, 168, 0.22);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.invoice-group-summary-tile.is-editable {
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.invoice-group-summary-tile.is-editable:hover,
.invoice-group-summary-tile.is-editable:focus-visible {
  border-color: rgba(155, 123, 255, 0.46);
  background: rgba(155, 123, 255, 0.08);
  transform: translateY(-1px);
}

.invoice-group-summary-tile.is-editing {
  cursor: default;
  border-color: rgba(155, 123, 255, 0.48);
  background: rgba(155, 123, 255, 0.08);
  box-shadow:
    0 20px 38px -30px rgba(124, 90, 240, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.invoice-group-summary-tile span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-group-summary-tile strong {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.invoice-group-summary-editor {
  display: grid;
  gap: 8px;
}

.invoice-group-summary-editor-field {
  width: 100%;
}

.invoice-group-summary-editor-wrap {
  min-width: 0;
}

.invoice-group-summary-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.invoice-group-summary-editor-today {
  justify-self: start;
}

.invoice-group-item-list {
  max-height: none;
  overflow-x: auto;
}

.invoice-group-item-table {
  width: 100%;
}

.invoice-group-item-table .inventory-tile-action-delete {
  color: #f87171;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}

.invoice-group-item-table .inventory-tile-action-delete:hover {
  color: #fca5a5;
}

.invoice-group-item-table .inventory-tile-action-return {
  color: var(--color-accent, #9b7bff);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  margin-right: 6px;
}

.invoice-group-item-table .inventory-tile-action-return:hover {
  opacity: 0.75;
}

.invoice-item-actions-cell {
  white-space: nowrap;
}

.invoice-returns-heading {
  margin: 20px 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, rgba(255,255,255,0.5));
}

.invoice-returns-table tbody tr td {
  opacity: 0.75;
}

.invoice-items-filter-bar {
  display: flex;
  width: fit-content;
  margin: 0 auto 12px;
}

/* Return item popup */
.return-item-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.return-item-popup {
  background: var(--color-surface, #1b1a1f);
  border: 1px solid var(--color-border, rgba(255,255,255,0.12));
  border-radius: 14px;
  padding: 24px;
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto;
}
.return-item-popup-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.return-item-popup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.return-item-popup-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
}
.return-item-popup-field span {
  opacity: 0.7;
  font-weight: 500;
}
.return-item-popup-field input,
.return-item-popup-field textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.15));
  background: var(--color-input-bg, rgba(255,255,255,0.06));
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.return-item-popup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.invoice-group-item-row {
  cursor: pointer;
  transition: background 140ms ease;
}

.invoice-group-item-row:hover,
.invoice-group-item-row:focus-visible {
  background: rgba(155, 123, 255, 0.08);
  outline: none;
}

.add-invoice-item-price-input {
  width: 100px;
}

#itemInfoModal .spreadsheet-wrap {
  display: none;
}

#itemInfoModal .modal-heading {
  position: relative; /* override sticky — panel is overflow:hidden so sticky is a no-op but causes iOS hit-test mismatches */
  padding: 0 0 16px 0;
  margin: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 48px;
}

#itemInfoModal .item-info-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

#itemInfoIntakeSummary:not(.is-hidden) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 12px;
}

#itemInfoModal .item-info-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(60dvh, 640px);
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

/* ── Hero ─────────────────────────────────────────────── */
.item-info-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-info-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.item-info-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}

.item-info-status-instock {
  background: rgba(124, 90, 240, 0.14);
  color: var(--success);
}

.item-info-status-sold {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.item-info-type-badge {
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(139, 139, 168, 0.22);
  padding: 2px 9px;
  border-radius: 6px;
}

.item-info-hero-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.item-info-hero-ids {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: monospace;
  letter-spacing: 0.02em;
}

/* ── KPI bar ──────────────────────────────────────────── */
.item-info-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.item-info-kpi {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 139, 168, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-info-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.item-info-kpi-val {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.item-info-kpi-val.item-info-kpi-empty {
  color: rgba(163, 157, 177, 0.35);
  font-weight: 400;
}

/* ── Section cards ────────────────────────────────────── */
#itemInfoModal .item-info-section-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#itemInfoModal .item-info-section-header,
#invoiceGroupModal .item-info-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-info-sec-bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

#itemInfoModal .item-info-section-header h3 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

#itemInfoModal .item-info-section-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(139, 139, 168, 0.22);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(139, 139, 168, 0.22);
}

#itemInfoModal .item-info-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 13px;
  background: rgba(19, 20, 28, 0.9);
  text-align: left;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  cursor: pointer;
  min-height: 58px;
  transition: background 0.1s;
}

#itemInfoModal .item-info-field.is-editable:hover {
  background: rgba(124, 90, 240, 0.06);
}

#itemInfoModal .item-info-field.is-editing {
  display: flex;
  flex-direction: column;
  cursor: default;
  background: rgba(155, 123, 255, 0.05);
}

#itemInfoModal .item-info-field.is-readonly {
  cursor: default;
}

#itemInfoModal .item-info-field-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}

#itemInfoModal .item-info-field-value {
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
  font-size: 0.88rem;
  line-height: 1.3;
}

#itemInfoModal .item-info-field-value.is-empty {
  color: rgba(163, 157, 177, 0.35);
  font-weight: 400;
}

#itemInfoModal .item-info-field.intake-field-required {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.4);
}
#itemInfoModal .item-info-field.intake-field-required .item-info-field-label {
  color: #f87171;
}
#itemInfoModal .item-info-field.intake-field-required .item-info-field-value {
  color: #f87171;
}

#itemInfoModal .item-info-field.lot-recall-flagged {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.35);
}
#itemInfoModal .item-info-field.lot-recall-flagged .item-info-field-label,
#itemInfoModal .item-info-field.lot-recall-flagged .item-info-field-value {
  color: #f87171;
}
#itemInfoModal .item-info-field.lot-recall-safe .item-info-field-value {
  color: #4ade80;
}
.item-info-lot-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.item-info-lot-badge.is-recalled {
  background: rgba(239,68,68,0.18);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.3);
}
.item-info-lot-badge.is-safe {
  background: rgba(124,90,240,0.12);
  color: #4ade80;
  border: 1px solid rgba(124,90,240,0.2);
}

#itemInfoModal .item-info-field-control,
#itemInfoModal .item-info-field-inline-editor {
  width: 100%;
}

#itemInfoModal .item-info-field-input,
#itemInfoModal .item-info-field textarea,
#itemInfoModal .item-info-field select {
  width: 100%;
  max-width: 100%;
}

#itemInfoModal .item-info-field textarea {
  min-height: 108px;
}

#itemInfoModal .item-info-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}
#itemInfoModal .item-info-editor-actions[hidden] {
  display: none;
}

#itemInfoModal .item-info-field-inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#itemInfoModal th,
#itemInfoModal td {
  white-space: nowrap;
}

/* ── Intake Summary Panel (item detail page) ───────────────────────────── */
.intake-summary-panel {
  margin: 20px 0 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.intake-summary-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 16px;
  background: var(--color-panel-bg);
  border-bottom: 1px solid var(--color-border);
}
.intake-summary-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intake-summary-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.intake-summary-title {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.intake-summary-device {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.intake-summary-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}
.intake-summary-badge.is-pass {
  background: rgba(155,123,255,0.12);
  color: #4ade80;
  border: 1px solid rgba(155,123,255,0.25);
}
.intake-summary-badge.is-warn {
  background: rgba(250,204,21,0.12);
  color: #facc15;
  border: 1px solid rgba(250,204,21,0.25);
}
.intake-summary-date {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.intake-summary-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intake-summary-section {
  padding: 0 0 8px;
}
.intake-summary-section + .intake-summary-section {
  margin-top: 10px;
}
.intake-summary-section-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text);
  background: var(--color-panel-bg);
  padding: 8px 16px 7px 13px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid #4ade80;
  margin: 0;
}
.intake-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intake-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--color-border);
}
.intake-summary-row:last-child { border-bottom: none; }
.intake-summary-row--warn { background: rgba(250,204,21,0.05); margin: 0 -16px; padding: 6px 16px; }
.intake-summary-row--bad  { background: rgba(248,113,113,0.06); margin: 0 -16px; padding: 6px 16px; }
.intake-summary-q {
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
}
.intake-summary-a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.intake-summary-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.intake-summary-dot.is-good { background: #4ade80; }
.intake-summary-dot.is-warn { background: #facc15; }
.intake-summary-dot.is-bad  { background: #f87171; }

.item-info-tab-bar {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel-bg);
}
.item-info-tab {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.item-info-tab:hover { color: var(--color-text); }
.item-info-tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent, #4ade80);
}

.item-info-photos-section {
  margin-top: 6px;
  display: grid;
  gap: 10px;
  width: 100%;
  align-self: stretch;
  grid-column: 1 / -1;
}

.item-info-docs-section {
  gap: 12px;
}

.item-info-docs-summary {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.item-info-docs-subsection {
  display: grid;
  gap: 8px;
}

.item-info-photos-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.item-info-photos-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.item-info-photos-heading {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.item-info-download-all-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--accent-strong);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(124, 90, 240, 0.28);
  background: rgba(124, 90, 240, 0.07);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.item-info-download-all-button:hover {
  background: rgba(124, 90, 240, 0.14);
}

.item-info-download-all-button .action-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.item-info-photos-upload {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--accent-strong);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(124, 90, 240, 0.28);
  background: rgba(124, 90, 240, 0.07);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.item-info-photos-upload:hover {
  background: rgba(124, 90, 240, 0.14);
}

.item-info-photos-upload .action-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.item-info-photos-grid {
  display: flex;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.item-info-photos-empty {
  color: var(--muted);
  font-size: 0.92rem;
}
.item-info-photos-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 28px 16px;
  border: 1.5px dashed var(--color-border);
  border-radius: 10px;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.item-info-photos-upload-empty:hover {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(155,123,255,0.04);
}
.item-info-photos-upload-empty svg {
  width: 28px;
  height: 28px;
  opacity: 0.7;
}
.item-info-photos-upload-empty span {
  font-size: 0.8rem;
  font-weight: 500;
}

.item-info-photo-card {
  position: relative;
  width: 88px;
  height: 88px;
  display: block;
  border-radius: 14px;
  border: 0;
  overflow: visible;
  text-decoration: none;
  cursor: zoom-in;
  transition: transform 140ms ease, z-index 140ms ease;
  z-index: 1;
  background: transparent;
  padding: 0;
}

.item-info-photo-card:hover,
.item-info-photo-card:focus-within {
  z-index: 120;
  transform: translateY(-2px);
}

.item-info-photo-delete {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 12, 9, 0.88);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
  z-index: 4;
}

.item-info-photo-card:hover .item-info-photo-delete,
.item-info-photo-card:focus-within .item-info-photo-delete {
  opacity: 1;
  pointer-events: auto;
}

.item-info-photo-delete:hover,
.item-info-photo-delete:focus-visible {
  background: rgba(104, 12, 18, 0.96);
  color: #fff;
  transform: translateY(-1px);
}

.item-info-photo-delete span {
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-1px);
}

.return-intake-form {
  display: grid;
  gap: 16px;
}

.return-intake-step {
  display: grid;
  gap: 14px;
}

.return-intake-selected-summary {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(19, 16, 26, 0.74);
  border: 1px solid rgba(139, 139, 168, 0.18);
}

.return-intake-candidate-list {
  display: grid;
  gap: 10px;
}

.return-intake-candidate {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 16, 26, 0.74);
  color: var(--text);
}

.return-intake-candidate:hover,
.return-intake-candidate:focus-visible,
.return-intake-candidate.is-selected {
  border-color: rgba(132, 209, 146, 0.34);
  background: rgba(23, 18, 34, 0.92);
}

.return-intake-candidate-title {
  font-weight: 600;
}

.return-intake-candidate-meta {
  color: var(--muted);
  font-size: 0.84rem;
}

.return-intake-actions {
  justify-content: flex-end;
}

.return-intake-photo-field {
  display: grid;
  gap: 8px;
}

.return-intake-photo-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.return-intake-photo-status {
  color: var(--muted);
  font-size: 0.88rem;
}

.item-info-photo-card-file {
  border: 1px solid rgba(139, 139, 168, 0.24);
  background: rgba(13, 11, 17, 0.96);
  padding: 10px 8px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  overflow: hidden;
}

.item-info-photo-file-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warning);
}

.item-info-photo-file-name {
  width: 100%;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
  overflow-wrap: anywhere;
}

.item-info-photo-thumb {
  width: 88px;
  height: 88px;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(139, 139, 168, 0.24);
  background: rgba(9, 14, 11, 0.9);
}

.kit-group-header-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kit-group-header-cell .kit-group-toggle {
  flex: 1 1 auto;
}

.kit-group-docs-inline {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

.kit-group-docs-inline svg {
  width: 14px;
  height: 14px;
}

.invoice-docs-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-docs-preview-section {
  display: grid;
  gap: 10px;
}

.invoice-docs-preview-frame-wrap {
  border-radius: 18px;
  border: 1px solid rgba(139, 139, 168, 0.22);
  background: rgba(6, 10, 7, 0.78);
  overflow: hidden;
  min-height: 380px;
}

.invoice-docs-preview-frame {
  display: block;
  width: 100%;
  min-height: 380px;
  border: 0;
  background: #fff;
}

.invoice-docs-upload-button {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  background: rgba(27, 23, 35, 0.82);
}

.invoice-doc-placeholder {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px dashed rgba(139, 139, 168, 0.34);
  background: rgba(9, 14, 11, 0.72);
  color: rgba(244, 243, 247, 0.82);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.table-inline-editor {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-inline-editor-field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(139, 139, 168, 0.34);
  background: rgba(8, 12, 9, 0.9);
  color: var(--text);
  padding: 6px 10px;
  font: inherit;
  outline: none;
}

td.is-inline-editing {
  padding-top: 6px;
  padding-bottom: 6px;
}

td.is-inline-editing,
td.is-inline-editing * {
  cursor: text;
}

.expense-receipts-cell {
  padding: 10px 12px;
}

.expense-receipts-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.expense-receipts-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.item-info-floating-preview {
  position: fixed;
  width: 420px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 18px;
  background: rgba(8, 12, 9, 0.98);
  border: 1px solid rgba(139, 139, 168, 0.24);
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.82);
  pointer-events: none;
  z-index: 1200;
}

.item-info-floating-preview-media {
  width: 100%;
  max-height: min(480px, calc(100vh - 64px));
  display: block;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(4, 8, 5, 0.96);
}

.modal-heading {
  position: sticky;
  top: 0;
  padding-right: 58px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  background: rgba(19, 20, 28, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
}

.modal-heading .panel-kicker,
.modal-heading h1,
.modal-heading h2,
.modal-heading h3 {
  text-align: left;
}

.modal-heading .modal-actions {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-close-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.modal-close-x:hover,
.modal-close-x:focus-visible {
  background: rgba(139, 139, 168, 0.15);
  color: var(--text);
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #1b1723;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, background 140ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  transform: translateY(-1px);
  background: rgba(124, 90, 240, 0.18);
}

.ci-remove-item {
  width: 26px;
  height: 26px;
  font-size: 1rem;
  opacity: 0.5;
  transition: opacity 0.12s, background 0.12s;
}
.ci-remove-item:hover {
  opacity: 1;
  background: rgba(220, 60, 60, 0.18);
  transform: none;
}

.icon-button svg {
  width: 16px;
  height: 16px;
  display: block;
}

body.modal-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.panel-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.save-status {
  color: var(--muted);
}

.form-section + .form-section {
  margin-top: 22px;
}

.is-hidden {
  display: none !important;
}

/* SOP Library */
.sop-library-shell {
  display: flex;
  gap: 14px;
  align-items: stretch;
  /* Give the SOP shell room to render a full-page style document preview. */
  min-height: calc(100vh - 210px);
}

.va-glossary-page-panel {
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(109, 147, 255, 0.11), transparent 34%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 30%),
    rgba(7, 12, 9, 0.72);
}

.va-glossary-standalone {
  min-height: 100vh;
}

.va-glossary-standalone-shell {
  padding-top: 24px;
  padding-bottom: 40px;
}

.va-glossary-standalone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.va-glossary-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.va-glossary-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

.va-glossary-brand strong,
.va-glossary-brand small {
  display: block;
}

.va-glossary-brand strong {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.va-glossary-brand small {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.va-glossary-header-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin-left: auto;
  width: 48px;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: rgba(19, 20, 28, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: width 200ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.va-glossary-header-search.is-open {
  width: min(280px, 70vw);
  border-radius: 14px;
  border-color: rgba(167, 139, 250, 0.44);
  background: rgba(30, 25, 40, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.24);
}

.va-glossary-header-search-input {
  width: 0;
  min-width: 0;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  flex: 1 1 auto;
  transition: width 200ms ease, max-width 200ms ease, opacity 160ms ease, padding 200ms ease;
}

.va-glossary-header-search.is-open .va-glossary-header-search-input {
  width: auto;
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  padding: 0 14px 0 16px;
}

.va-glossary-header-search .search-static-icon {
  pointer-events: auto;
}

.va-glossary-header-search-trigger {
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: none;
  transition: color 180ms ease, transform 180ms ease;
}

.va-glossary-header-search-trigger:hover,
.va-glossary-header-search-trigger:focus-visible {
  color: #a78ce6;
  transform: translateY(-1px);
}

.va-glossary-header-search.is-open .va-glossary-header-search-trigger {
  color: #a78bfa;
}

.va-glossary-header-search.is-open .va-glossary-header-search-trigger:hover,
.va-glossary-header-search.is-open .va-glossary-header-search-trigger:focus-visible {
  color: #a78ce6;
}

.va-glossary-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 22px 18px;
  margin-bottom: 16px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(7, 12, 9, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.26);
}

.va-glossary-search-wrap {
  width: 100%;
  display: none;
  gap: 10px;
}

.va-glossary-search-wrap.is-open {
  display: grid;
}

.va-glossary-search-wrap .search-wrap {
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  padding: 0 16px;
  min-height: 62px;
  border-radius: 20px;
}

.va-glossary-search-wrap .search-wrap:not(.is-open) .search-input {
  width: 0;
  min-width: 0;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border: 0;
}

.va-glossary-search-wrap .search-wrap.is-open {
  width: 100%;
  max-width: none;
}

.va-glossary-search-wrap .search-input {
  width: 100%;
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  padding: 20px 0;
  overflow: visible;
  white-space: normal;
}

.va-glossary-search-wrap .search-wrap:not(.is-open) {
  gap: 0;
}

.va-glossary-search-wrap .search-wrap:not(.is-open) .search-static-icon {
  margin: 0;
}

.va-glossary-search-wrap .search-wrap .search-input:focus,
.va-glossary-search-wrap .search-wrap .search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.va-glossary-header-search-input:focus,
.va-glossary-header-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.va-glossary-header-search-input::-webkit-search-cancel-button,
.va-glossary-header-search-input::-webkit-search-decoration,
.va-glossary-header-search-input::-webkit-search-results-button,
.va-glossary-header-search-input::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
}

.va-glossary-hero-copy {
  min-width: 0;
  max-width: 760px;
}

.va-glossary-hero-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3rem);
  letter-spacing: -0.04em;
}

.va-glossary-hero-text {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.55;
}

.va-glossary-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.va-glossary-meta-card {
  min-width: 90px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 4px;
  justify-items: start;
}

.va-glossary-meta-value {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.va-glossary-meta-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.va-glossary-sidebar {
  position: sticky;
  top: 102px;
  align-self: flex-start;
}

.va-glossary-sidebar-note {
  margin: 0 0 10px;
  padding: 0 6px 6px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.va-glossary-content {
  padding-top: 18px;
}

.va-glossary-viewer {
  gap: 0;
}

.va-glossary-intro {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.065);
  color: var(--muted);
}

.va-glossary-intro p {
  margin: 0;
  line-height: 1.55;
}

.va-glossary-section {
  padding: 18px 0 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  scroll-margin-top: 124px;
}

.va-glossary-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.va-glossary-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.va-glossary-section-head .panel-kicker {
  margin: 0;
}

.va-glossary-section-head h4 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.va-glossary-grid {
  columns: 2;
  column-gap: 12px;
}

.va-glossary-item {
  display: block;
  position: relative;
  padding: 14px 16px 16px;
  width: 100%;
  margin: 0 0 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.075);
  overflow: hidden;
  min-height: 68px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.va-glossary-item[open] {
  border-color: rgba(167, 139, 250, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.va-glossary-item-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.va-glossary-item-summary::-webkit-details-marker {
  display: none;
}

.va-glossary-item-summary .sop-library-item-type {
  margin: 0;
}

.va-glossary-item-summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: #a78bfa;
  font-size: 1rem;
  line-height: 1;
  width: 1em;
  text-align: center;
  display: inline-block;
  transition: transform 180ms ease, color 180ms ease;
}

.va-glossary-item[open] .va-glossary-item-summary::after {
  color: #a78bfa;
  transform: rotate(180deg);
}

.va-glossary-term-hint {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.va-glossary-item[open] .va-glossary-term-hint {
  color: var(--accent-2, #8562d6);
}

.va-glossary-item-body {
  display: none;
  position: static;
  padding: 12px 16px 16px;
  margin-top: 12px;
  border-top: 1px solid rgba(167, 139, 250, 0.16);
}

.va-glossary-item[open] .va-glossary-item-body {
  display: block;
}

.va-glossary-item-definition {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.sop-library-content-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.sop-library-sidebar {
  flex: 0 0 260px;
  width: 260px;
  padding: 12px 10px;
  border-radius: 18px;
  background: rgba(10, 14, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.sop-library-sidebar .panel-heading {
  margin-bottom: 10px;
  padding: 0 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sop-library-sidebar-body {
  display: grid;
  gap: 4px;
  padding: 8px 2px 2px;
}

.sop-library-category-group {
  display: grid;
  gap: 6px;
}

.sop-library-category-group.is-hidden {
  display: grid;
}

#sopLibraryPage.is-searching .sop-library-category-group.is-search-match .sop-library-category {
  opacity: 1;
}

#sopLibraryPage.is-searching .sop-library-category-group:not(.is-search-match) .sop-library-category {
  opacity: 0.78;
}

.sop-library-category-group.sop-flash .sop-library-category {
  animation: sopFlashPulse 720ms ease;
}

@keyframes sopFlashPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(155, 123, 255, 0.0);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(155, 123, 255, 0.18);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(155, 123, 255, 0.0);
  }
}

.sop-library-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px 7px 10px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sop-library-category:hover,
.sop-library-category:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  outline: none;
}

.sop-library-category-group.is-active .sop-library-category {
  background: rgba(155, 123, 255, 0.14);
  border-color: rgba(155, 123, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sop-library-category-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sop-library-category-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: rgba(244, 243, 247, 0.72);
}

.sop-library-category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.sop-library-category.is-editing .sop-library-category-name {
  overflow: visible;
  text-overflow: clip;
}

.sop-library-category.is-editing {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.sop-library-category-rename-input {
  width: min(190px, 100%);
  max-width: 100%;
  height: 22px;
  margin-left: 0;
  display: inline-block;
  border-radius: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 10, 0.78);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  outline: none;
}

.sop-library-category-rename-input:focus {
  border-color: rgba(155, 123, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(155, 123, 255, 0.12);
}

.sop-library-category-chevron {
  font-size: 0.9rem;
  color: rgba(225, 222, 233, 0.56);
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.sop-library-category-delete {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: rgba(240, 237, 247, 0.62);
  margin-left: auto;
}

.sop-library-category-delete svg {
  width: 18px;
  height: 18px;
  display: block;
}

.sop-library-category-delete:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(237, 74, 74, 0.9);
}

.sop-library-category-group.is-open .sop-library-category-chevron {
  transform: rotate(0deg);
}

.sop-library-category-items {
  display: none;
  gap: 10px;
  padding-left: 18px;
}

.sop-library-category-group.is-open .sop-library-category-items {
  display: grid;
}

.sop-library-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
}

.sop-library-content .panel-heading {
  margin-bottom: 12px;
}

.sop-library-toolbar-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.sop-library-toolbar-row-floating {
  margin-bottom: 0;
  padding: 0 4px;
  position: absolute;
  top: -52px;
  right: 0;
  z-index: 2;
}

#sopUploadModal .modal-panel {
  max-width: 520px;
}

.sop-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}

.sop-library-search-wrap.search-wrap.is-open {
  width: min(320px, 100%);
  max-width: min(320px, 100%);
}

.sop-library-search-wrap.search-wrap.is-open .search-input {
  width: min(270px, calc(100% - 42px));
  max-width: calc(100% - 42px);
}

.sop-library-content-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sop-library-items {
  display: grid;
  gap: 10px;
}

/* SOP document items (shown under each category). */
.sop-library-item {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 9px 40px 9px 10px;
  text-align: left;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
}

.sop-library-item[draggable="true"] {
  cursor: grab;
}

.sop-library-item.is-dragging {
  opacity: 0.55;
}

.sop-library-item.is-drop-target {
  border-color: rgba(155, 123, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(155, 123, 255, 0.16) inset;
}

.sop-library-item:hover,
.sop-library-item:focus-visible {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
  outline: none;
}

.sop-library-item.is-selected {
  background: rgba(155, 123, 255, 0.12);
  border-color: rgba(155, 123, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sop-library-item-type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sop-library-item-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  position: relative;
}

.sop-library-item.is-editing .sop-library-item-title {
  overflow: visible;
}

.sop-library-item-rename-input {
  width: min(210px, 100%);
  max-width: 100%;
  height: 22px;
  display: inline-block;
  border-radius: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 10, 0.78);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  outline: none;
}

.sop-library-item-rename-input:focus {
  border-color: rgba(155, 123, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(155, 123, 255, 0.12);
}

.sop-library-item-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: rgba(244, 243, 247, 0.72);
}

.sop-library-item-delete svg {
  width: 16px;
  height: 16px;
  display: block;
}

.sop-library-item-delete:hover,
.sop-library-item-delete:focus-visible {
  color: rgba(255, 107, 107, 0.96);
  outline: none;
}

/* Account modal split layout (Finder-ish). */
.account-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: stretch;
}

.account-users {
  border-radius: 16px;
  background: rgba(10, 14, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 10px 10px 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.account-users-header {
  padding: 0 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 8px;
}

.account-users-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-users-list {
  display: grid;
  gap: 2px;
  padding: 4px 2px 2px;
  overflow: auto;
  align-content: start;
  grid-auto-rows: max-content;
}

.account-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-weight: 700;
  cursor: default;
}

.account-user-row.is-button {
  cursor: pointer;
}

.account-user-row.is-button:hover,
.account-user-row.is-button:focus-visible {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.055);
  outline: none;
}

.account-user-row.is-active {
  background: rgba(155, 123, 255, 0.12);
  border-color: rgba(155, 123, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 18px rgba(0, 0, 0, 0.18);
}

.account-user-avatar-wrap {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-user-avatar-wrap-admin {
  background: radial-gradient(circle at 30% 30%, rgba(255,214,120,0.14), rgba(255,255,255,0.03));
  border-color: rgba(255, 214, 120, 0.18);
}

.account-user-avatar {
  width: 18px;
  height: 18px;
  display: block;
  color: rgba(244, 243, 247, 0.68);
}

.account-user-avatar-admin {
  color: rgba(255, 214, 120, 0.82);
}

.account-user-row.is-active .account-user-avatar {
  color: rgba(155, 123, 255, 0.95);
}

.account-user-row.is-active .account-user-avatar-admin {
  color: rgba(255, 214, 120, 0.95);
}

.account-content {
  min-width: 0;
  border-radius: 16px;
  padding: 12px;
  background: rgba(10, 14, 12, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.account-content .inline-editor {
  gap: 14px;
}

.account-content .inline-editor-actions {
  justify-content: flex-end;
  margin-top: 2px;
}

.account-access-panel {
  margin-top: 16px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(10, 14, 12, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.account-access-panel.is-hidden {
  display: none;
}

.account-access-heading {
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 10px;
}

.account-access-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 10px;
  justify-items: stretch;
}

.account-permissions-group {
  margin-top: 10px;
}

.account-role-field {
  margin-top: 10px;
  margin-bottom: 6px;
}

.account-permissions-group .panel-kicker {
  margin-bottom: 6px;
}

/* ── Page Visibility Modal ─────────────────────────────────────────────── */
.pv-description {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: -4px 0 14px;
}
.pv-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
}
.pv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.pv-row:hover { background: var(--color-surface-2, rgba(255,255,255,0.05)); }
.pv-label { font-size: 0.85rem; font-weight: 500; }
.pv-toggle { position: relative; display: flex; align-items: center; }
.pv-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.pv-track {
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-border);
  transition: background 0.18s;
  flex-shrink: 0;
}
.pv-checkbox:checked + .pv-track { background: #4ade80; }
.pv-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  margin-left: 3px;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.pv-checkbox:checked + .pv-track .pv-thumb { transform: translateX(18px); }

.account-permission-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: stretch;
  width: 100%;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  user-select: none;
  text-align: left;
}

.account-permission-pill input {
  accent-color: rgba(155, 123, 255, 0.95);
  margin: 0;
  flex: 0 0 auto;
}

.account-permission-pill:hover {
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 860px) {
  .account-shell {
    grid-template-columns: 1fr;
  }
  .account-content {
    padding: 10px;
  }
}

.sop-viewer {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 16px;
  background: rgba(22, 18, 31, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  overflow: auto;
}

.sop-viewer-docx {
  max-width: 860px;
  margin: 0 auto;
  color: rgba(240, 237, 247, 0.94);
  font-size: 0.98rem;
  line-height: 1.5;
}

.sop-viewer-docx p {
  margin: 0.65em 0;
}

.sop-viewer-docx h1,
.sop-viewer-docx h2,
.sop-viewer-docx h3 {
  margin: 0.9em 0 0.45em;
  line-height: 1.2;
}

.sop-viewer-docx table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
}

.sop-viewer-docx td,
.sop-viewer-docx th {
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 8px 10px;
  vertical-align: top;
}

.sop-viewer-docx img {
  max-width: 100%;
  height: auto;
}

.sop-viewer-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sop-viewer-header-titles {
  min-width: 0;
}

.sop-viewer-header-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.sop-viewer-header .panel-kicker {
  margin-bottom: 6px;
}

.sop-viewer-body {
  min-height: 0;
}


.sop-viewer-iframe {
  width: 100%;
  height: calc(100vh - 270px);
  min-height: 640px;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
}

.sop-viewer-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sop-viewer-video {
  width: 100%;
  max-height: 62vh;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

.sop-viewer-doc h4 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.sop-viewer-doc p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.4;
}

.sop-viewer-media {
  display: grid;
  place-items: center;
  min-height: 280px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 900px) {
  .sop-library-shell {
    flex-direction: column;
  }

  .va-glossary-standalone-shell {
    padding-top: 14px;
    padding-bottom: 24px;
  }

  .va-glossary-standalone-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .va-glossary-page-panel {
    padding: 14px;
    border-radius: 22px;
  }

  .va-glossary-hero {
    padding: 18px;
  }

  .va-glossary-hero-meta {
    justify-content: flex-start;
  }

  .va-glossary-grid {
    columns: 1;
  }

  .sop-library-sidebar {
    flex: 0 0 auto;
    width: 100%;
  }

  .va-glossary-sidebar {
    position: static;
  }

  .sop-library-toolbar {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
}

.wizard-progress,
.wizard-nav {
  display: none;
}

#inventoryForm.wizard-active .wizard-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin-bottom: 18px;
  min-width: 0;
}

.wizard-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wizard-title-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.wizard-title-row h3 {
  margin-bottom: 0;
  line-height: 1.15;
}

.wizard-title-tools {
  display: none;
}

.wizard-title-tools.is-active {
  display: inline-flex;
  align-items: baseline;
}

.wizard-title-add-button {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 1em;
  line-height: 1;
  vertical-align: baseline;
}

.wizard-title-add-button:hover {
  background: transparent;
  color: var(--accent);
  transform: none;
}

.wizard-title-add-button::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.wizard-header-tools {
  display: none;
  grid-column: 1 / -1;
  min-width: 0;
}

.wizard-header-tools.is-active {
  display: block;
}

.wizard-header-tools .wizard-choice-search {
  display: block;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

#soldItemForm.wizard-active .wizard-progress {
  display: block;
  margin-bottom: 18px;
}

#expensesForm.wizard-active .wizard-progress {
  display: block;
  margin-bottom: 18px;
}

#inventoryForm.wizard-active .wizard-step {
  display: none;
}

#inventoryForm.wizard-active .wizard-step.is-active {
  display: block;
}

#inventoryForm.wizard-active .wizard-step h3,
#inventoryForm.wizard-active .wizard-question {
  display: none;
}

#inventoryForm.wizard-active .wizard-question.is-active {
  display: grid;
}

#inventoryForm.wizard-active .field-grid,
#inventoryForm.wizard-active .field-grid.single-column {
  grid-template-columns: 1fr;
}

#inventoryForm.wizard-active .wizard-choice-question select {
  display: none;
}

#inventoryForm.wizard-active .wizard-nav {
  display: flex;
}

#soldItemForm.wizard-active .wizard-nav {
  display: flex;
}

/* ── iOS Wizard Sheet (Mark Sold) ──────────────────────────────────────────── */
#soldItemModal .modal-backdrop {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ios-wizard-sheet {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  max-height: min(88vh, 680px);
  display: flex;
  flex-direction: column;
  background: rgba(24, 24, 26, 0.96);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.1);
}

/* Nav bar */
.ios-wizard-nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 16px 0;
  gap: 8px;
  flex-shrink: 0;
}

.ios-wizard-cancel {
  background: none;
  border: none;
  font-size: 0.95rem;
  color: rgba(235,235,245,0.6);
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  justify-self: start;
  transition: color 120ms;
}
.ios-wizard-cancel:hover { color: rgba(235,235,245,0.9); }

.ios-wizard-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0;
}

.ios-wizard-step-count {
  font-size: 0.8rem;
  color: rgba(235,235,245,0.4);
  text-align: right;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

/* Progress bar */
.ios-wizard-progress-track {
  height: 3px;
  background: rgba(255,255,255,0.08);
  margin: 14px 16px 0;
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}

.ios-wizard-progress-bar {
  height: 100%;
  background: #6034c7;
  border-radius: 99px;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

/* Question area */
.ios-wizard-question-area {
  flex: 1;
  overflow-y: auto;
  padding: 28px 20px 12px;
  -webkit-overflow-scrolling: touch;
}

/* Hide questions by default, show active one */
#soldItemModal .sold-question {
  display: none;
  flex-direction: column;
  gap: 12px;
}
#soldItemModal .sold-question.is-active {
  display: flex;
}

.ios-wizard-q-label {
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Inputs */
.ios-wizard-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 1.05rem;
  color: #fff;
  outline: none;
  transition: border-color 150ms, background 150ms;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.ios-wizard-input::placeholder { color: rgba(235,235,245,0.3); }
.ios-wizard-input:focus {
  border-color: #6034c7;
  background: rgba(124,90,240,0.06);
}
.ios-wizard-input option { background: #1c1c1e; }

/* Sale date row */
#soldItemModal .inline-input-action {
  display: flex;
  gap: 10px;
  align-items: center;
}
#soldItemModal .inline-input-action .ios-wizard-input {
  flex: 1;
}

.ios-wizard-today-btn {
  flex-shrink: 0;
  background: rgba(124,90,240,0.15);
  border: 1px solid rgba(124,90,240,0.3);
  border-radius: 10px;
  color: #6034c7;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms;
}
.ios-wizard-today-btn:hover { background: rgba(124,90,240,0.25); }

/* Footer nav */
.ios-wizard-footer {
  display: flex !important;
  gap: 10px;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  border-top: 0.5px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.ios-wizard-back-btn,
.ios-wizard-next-btn {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 140ms, background 140ms;
}

.ios-wizard-back-btn {
  background: rgba(255,255,255,0.08);
  color: rgba(235,235,245,0.8);
}
.ios-wizard-back-btn:hover { background: rgba(255,255,255,0.13); }
.ios-wizard-back-btn:disabled { opacity: 0.3; pointer-events: none; }

.ios-wizard-next-btn {
  background: #6034c7;
  color: #000;
}
.ios-wizard-next-btn:hover { background: #572fb3; }
.ios-wizard-next-btn.is-hidden { display: none; }

/* Override the old wizard-nav display rule for this form */
#soldItemModal #soldItemForm.wizard-active .wizard-nav { display: flex; }

#expensesForm.wizard-active .wizard-nav {
  display: flex;
}

#wizardStepTitle::after {
  content: attr(data-section);
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}

.wizard-choice-grid {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  min-width: 0;
}

.wizard-choice-search {
  display: none;
}

#inventoryForm.wizard-active .wizard-question.is-active .wizard-choice-search {
  display: block;
  margin-bottom: 12px;
}

#inventoryForm.wizard-active .wizard-question.is-active .wizard-choice-grid {
  display: grid;
}

.wizard-choice-card {
  border: 1px solid rgba(139, 139, 168, 0.24);
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(19, 20, 28, 0.78);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wizard-choice-card:hover,
.wizard-choice-card:focus-visible {
  border-color: rgba(155, 123, 255, 0.72);
  background: rgba(124, 90, 240, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.wizard-choice-card.is-selected {
  border-color: rgba(155, 123, 255, 0.82);
  background: rgba(124, 90, 240, 0.18);
  box-shadow: 0 0 0 1px rgba(124, 90, 240, 0.18);
  color: var(--accent-strong);
}

.dts-lead-combobox {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.dts-lead-combobox input {
  flex: 1 1 auto;
  min-width: 0;
}

.dts-lead-picker-button {
  flex: 0 0 auto;
  width: 44px;
  border: 1px solid rgba(139, 139, 168, 0.24);
  border-radius: 16px;
  background: rgba(19, 20, 28, 0.78);
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.dts-lead-picker-button svg {
  width: 16px;
  height: 16px;
}

.dts-lead-picker-button:hover,
.dts-lead-picker-button:focus-visible {
  border-color: rgba(155, 123, 255, 0.72);
  background: rgba(124, 90, 240, 0.12);
  transform: translateY(-1px);
}

.dts-lead-picker {
  position: fixed;
  z-index: 9999;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(139, 139, 168, 0.24);
  border-radius: 18px;
  background: rgba(9, 7, 15, 0.98);
  box-shadow: var(--shadow);
}

.dts-lead-picker.is-hidden {
  display: none;
}

.dts-lead-picker-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.dts-lead-picker-option:hover,
.dts-lead-picker-option:focus-visible {
  background: rgba(124, 90, 240, 0.12);
  color: var(--accent-strong);
}

.dts-lead-picker-empty {
  padding: 10px 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

.dts-photo-ocr-question {
  gap: 12px;
}

.dts-photo-ocr-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 20, 28, 0.72);
}

.dts-photo-ocr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dts-photo-ocr-preview {
  display: grid;
  place-items: center;
  min-height: 140px;
  border-radius: 16px;
  border: 1px dashed rgba(139, 139, 168, 0.28);
  background: rgba(7, 12, 9, 0.34);
  overflow: hidden;
}

.dts-photo-ocr-preview img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
}

.dts-photo-ocr-output {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  white-space: pre-wrap;
}

.lead-source-repeat-banner {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(99, 179, 237, 0.35);
  background: rgba(99, 179, 237, 0.08);
}

.lead-source-repeat-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.lead-source-repeat-count-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: #63b3ed;
  line-height: 1;
}

.lead-source-repeat-count-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #63b3ed;
}

.lead-source-repeat-hint {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(99, 179, 237, 0.75);
}

/* ── Scan Label bar ── */
.dts-scan-label-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

#inventoryForm.wizard-active .dts-scan-label-bar {
  justify-content: center;
  margin-bottom: 0;
}

#inventoryForm.wizard-active .dts-scan-label-bar h3 {
  display: none;
}
.dts-scan-label-btn[hidden] { display: none; }
.dts-scan-label-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dts-scan-label-btn:active { background: var(--accent); color: #fff; }

.dts-ocr-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* ── Scan chip bar (appears above field-grid after a label scan) ── */
.dts-scan-chip-bar {
  border: 1.5px solid rgba(251,191,36,0.3);
  border-radius: 10px;
  background: rgba(251,191,36,0.06);
  padding: 10px 12px 12px;
  margin-bottom: 14px;
  position: relative;
}
.dts-scan-chip-bar[hidden] { display: none; }
.dts-scan-chip-hint {
  font-size: 0.74rem;
  font-weight: 600;
  color: #fbbf24;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dts-scan-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dts-scan-chip.is-used {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s, transform 0.25s;
}
.dts-scan-chip.is-flash {
  background: rgba(251,191,36,0.4);
  border-color: #fbbf24;
  transition: background 0.1s;
}
.dts-scan-chip-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(251,191,36,0.55);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.dts-scan-chip-close:hover { color: #fbbf24; }
/* Highlight the currently targeted field */
.dts-scan-target {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(251,191,36,0.25) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dts-ocr-chip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fbbf24;
  white-space: nowrap;
}
.dc-scan-status {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.dc-scan-status.is-scanning {
  color: var(--accent);
  animation: lot-recall-scan-pulse 1.1s ease-in-out infinite;
}
.dc-scan-status.is-no-results {
  color: #fbbf24;
}

.dts-ocr-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.dts-ocr-chip:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: rgba(251, 191, 36, 0.8);
}
.dts-ocr-chip.is-selected {
  background: rgba(251, 191, 36, 0.28);
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
}

.wizard-question.has-ocr-suggestion input,
.wizard-question.has-ocr-suggestion select,
.wizard-question.has-ocr-suggestion textarea {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18);
}

.sold-item-form .sold-question {
  display: none;
}

.sold-item-form .sold-question.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Invoice modal tables — horizontal scroll on mobile */
#addInvoiceItemsModal .table-wrap,
.sold-item-form .sold-question .table-wrap {
  min-width: 0; /* grid items default to min-width:auto which prevents scroll; override to allow table-wrap to shrink and scroll */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
#addInvoiceItemsModal table,
.sold-item-form .sold-question table {
  min-width: 480px;
}

#expensesForm .expense-question {
  display: none;
}

#expensesForm .expense-question.is-active {
  display: grid;
}

/* ── Expense Drafts ──────────────────────────────────────────────────────── */
.expense-drafts-toggle-btn {
  position: relative;
  font-size: 0.8rem;
  padding: 4px 10px;
}
.expense-drafts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 99px;
  background: #9b7bff;
  color: #0c0716;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.expense-drafts-panel {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 16px;
}

.expense-question-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.expense-add-vendor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,.55);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.expense-add-vendor-btn:hover {
  border-color: rgba(155,123,255,.7);
  color: #9b7bff;
  background: rgba(155,123,255,.08);
}

.form-section h3 {
  margin-bottom: 12px;
  font-size: 1rem;
}

.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mode-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 20, 28, 0.72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.mode-card span {
  color: var(--muted);
  font-size: 0.92rem;
}

.mode-option {
  position: relative;
  display: block;
}

.mode-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.mode-option span {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  background: rgba(19, 20, 28, 0.72);
  color: var(--text);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.mode-option input:checked + span {
  border-color: rgba(124, 90, 240, 0.7);
  background: rgba(124, 90, 240, 0.14);
  color: var(--accent-strong);
}

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

.single-column {
  grid-template-columns: 1fr;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Account permission rows are labels, but should render as left-aligned pills (not the global label grid). */
label.account-permission-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 0.92rem;
}

label.account-permission-pill input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

label.account-permission-pill span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-input-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

input,
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid rgba(139, 139, 168, 0.22);
  background: rgba(19, 20, 28, 0.92);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 220ms ease, background 220ms ease;
}
input[type="date"] { appearance: none; -webkit-appearance: none; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(155, 123, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(124, 90, 240, 0.14);
}

input.required-missing,
select.required-missing,
textarea.required-missing {
  border-color: rgba(239, 112, 112, 0.92);
  box-shadow: 0 0 0 2px rgba(239, 112, 112, 0.22);
}

.item-type-icon-select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.item-type-icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.item-type-icon-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 12px 10px;
  border: 1px solid rgba(139, 139, 168, 0.24);
  background: rgba(19, 20, 28, 0.92);
  border-radius: 16px;
  color: var(--text);
  text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.item-type-icon-option:hover,
.item-type-icon-option:focus-visible {
  border-color: rgba(124, 90, 240, 0.56);
  background: rgba(30, 25, 40, 0.96);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.item-type-icon-option.is-selected {
  border-color: rgba(124, 90, 240, 0.72);
  background: rgba(124, 90, 240, 0.14);
  color: var(--accent-strong);
}

.item-type-icon-option span:last-child {
  font-size: 12px;
  line-height: 1.25;
}

.item-type-icon-glyph {
  font-size: 24px;
  line-height: 1;
}

input[type="date"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.95;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

.form-actions,
.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-actions {
  margin-top: 24px;
}

.power-section-form-actions {
  justify-content: flex-end;
}

#dailyActionForm .field-grid {
  grid-template-columns: minmax(0, 1fr);
}

#dailyActionInput {
  width: 100%;
}

.daily-action-form-actions {
  justify-content: flex-end;
}

.power-section-action-button {
  padding: 6px 10px;
  font-size: 0.78rem;
  min-height: 32px;
}

.toolbar {
  justify-content: flex-end;
}

.table-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 3;
  min-width: 0;
}

.search-wrap {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  border-radius: 999px;
  background: #1b1723;
  overflow: visible;
  border: 1px solid rgba(139, 139, 168, 0.22);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.search-wrap.is-open {
  width: min(262px, 100%);
  max-width: min(262px, 100%);
  border-color: rgba(139, 139, 168, 0.32);
  box-shadow: none;
}

.search-wrap .icon-trigger {
  border-radius: 0;
  background: transparent;
  flex: 0 0 auto;
}

.search-static-icon {
  pointer-events: none;
}

.search-wrap .icon-trigger:focus,
.search-wrap .icon-trigger:focus-visible,
.search-wrap .search-input:focus,
.search-wrap .search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.search-wrap .search-input {
  width: 0;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  border: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: width 180ms ease, opacity 180ms ease, padding 180ms ease, border-color 180ms ease;
}

.search-wrap.is-open .search-input {
  width: min(220px, calc(100% - 42px));
  min-width: 0;
  max-width: calc(100% - 42px);
  padding-left: 14px;
  padding-right: 14px;
  border-color: rgba(139, 139, 168, 0.22);
  opacity: 1;
  pointer-events: auto;
}

.va-glossary-search-wrap .search-wrap,
.va-glossary-search-wrap .search-wrap.is-open {
  display: flex;
  width: 100%;
  max-width: none;
  align-items: center;
  justify-content: flex-start;
}

.va-glossary-search-wrap .search-wrap .search-input,
.va-glossary-search-wrap .search-wrap.is-open .search-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  opacity: 1;
  pointer-events: auto;
}

.inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.inventory-tools {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  flex-wrap: nowrap;
  margin-left: auto;
}

.inventory-tools > button,
.inventory-tools > .menu-wrap,
.inventory-tools > .search-wrap {
  flex: 0 0 auto;
}

#createInvoiceButton,
#addToInvoiceButton,
#openModalButton {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Add to Invoice modal */
.ati-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.ati-step {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 20px;
}
.ati-prices-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  margin: 0 -20px;
  padding: 0 20px;
}
.ati-prices-table-wrap .create-invoice-table {
  min-width: 480px;
}
.ati-step.is-hidden {
  display: none;
}
.ati-invoice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 0;
}
.ati-invoice-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--border);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, border-left-color 0.14s;
  position: relative;
}
.ati-invoice-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ati-invoice-row:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  border-left-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.ati-invoice-row.is-selected {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ati-invoice-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ati-invoice-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ati-invoice-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
}
.ati-invoice-row.is-selected .ati-invoice-num {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.ati-invoice-customer {
  font-size: 0.92rem;
  font-weight: 600;
}
.ati-invoice-details {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  opacity: 0.55;
}
.ati-invoice-sep {
  opacity: 0.4;
}
.ati-invoice-count {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ati-invoice-count-pill {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--border);
  padding: 1px 7px;
  border-radius: 20px;
  opacity: 1;
  color: var(--text);
}
.ati-invoice-row.is-selected .ati-invoice-count-pill {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.ati-invoice-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: border-color 0.14s, background 0.14s;
}
.ati-invoice-row.is-selected .ati-invoice-check {
  background: var(--accent);
  border-color: var(--accent);
}
.ati-invoice-check svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.12s;
}
.ati-invoice-row.is-selected .ati-invoice-check svg {
  opacity: 1;
}
.create-invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
.create-invoice-table th,
.create-invoice-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.create-invoice-table thead th {
  opacity: 0.6;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modal-section-hint {
  font-size: 0.87rem;
  opacity: 0.7;
  margin-bottom: 14px;
}

.checklist-toolbar-button {
  white-space: nowrap;
}

.inventory-table-settings {
  position: relative;
  z-index: 35;
}

.inventory-settings-panel {
  min-width: 240px;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  border-radius: 16px;
  background: rgba(14, 12, 18, 0.99);
  z-index: 80;
  text-align: left;
}

.inventory-settings-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
  text-align: center;
}

.inventory-column-toggle-list {
  display: grid;
  gap: 6px;
  justify-items: stretch;
}

.inventory-column-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  justify-items: start;
  text-align: left;
}

.inventory-column-toggle:hover {
  background: rgba(124, 90, 240, 0.1);
}

.inventory-column-toggle input {
  accent-color: var(--accent);
  margin: 0;
  justify-self: start;
}

.inventory-column-toggle span {
  display: block;
  width: 100%;
  justify-self: start;
  text-align: left;
}

.inventory-column-toggle.is-disabled {
  opacity: 0.5;
}

.inventory-table-settings:hover .inventory-settings-panel,
.inventory-table-settings:focus-within .inventory-settings-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
}

.inventory-table-settings.is-open .inventory-settings-panel,
.inventory-table-settings.is-open:focus-within .inventory-settings-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.inventory-filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.inventory-view-menu-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin-right: auto;
  border-radius: 14px;
  flex: 0 0 auto;
}

body.modal-open .inventory-view-menu-button {
  display: none !important;
}

.inventory-view-menu-button .menu-trigger-icon {
  width: 20px;
  height: 20px;
}

.inventory-view-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 205;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.inventory-view-drawer-backdrop.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.inventory-view-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 206;
  width: min(340px, calc(100vw - 42px));
  height: auto;
  padding: calc(max(22px, env(safe-area-inset-top)) + 28px) 18px max(22px, env(safe-area-inset-bottom));
  border-right: 1px solid rgba(139, 139, 168, 0.24);
  background:
    radial-gradient(circle at 20% 0%, rgba(124, 90, 240, 0.16), transparent 34%),
    linear-gradient(160deg, rgba(18, 15, 25, 0.98), rgba(5, 10, 7, 0.98));
  box-shadow: 28px 0 54px -34px rgba(0, 0, 0, 0.88);
  transform: translateX(-104%);
  transition: transform 220ms cubic-bezier(0.2, 0.82, 0.22, 1);
  overflow-y: auto;
  pointer-events: none;
}

.inventory-view-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.inventory-view-drawer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 46px;
  margin-bottom: 18px;
  position: relative;
}

.inventory-view-drawer-heading > div {
  padding-right: 52px;
}

.inventory-view-drawer-heading h2 {
  margin: 0;
  color: var(--text);
}

.inventory-view-drawer-heading > button {
  position: absolute;
  top: -34px;
  right: 0;
}

.inventory-view-drawer .inventory-filter-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.inventory-view-drawer .filter-chip {
  width: 100%;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  text-align: left;
}

@media (min-width: 901px) {
  .inventory-view-menu-button {
    display: none;
  }

  body.modal-open .inventory-view-menu-button {
    display: none !important;
  }

  .inventory-view-drawer-backdrop {
    display: none !important;
  }

  .inventory-view-drawer {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    height: auto;
    padding: 0;
    border-right: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important;
    transition: none;
    overflow: visible;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }

  .inventory-view-drawer-heading {
    display: none;
  }

  .inventory-view-drawer .inventory-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .inventory-view-drawer .filter-chip {
    width: auto;
    min-width: 0;
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    text-align: center;
  }
}

#sharedInventoryPanel .inventory-table-wrap {
  display: none;
}

#sharedInventoryPanel .panel-heading {
  flex-direction: row;
  align-items: center;
}

#sharedInventoryPanel .inventory-tools {
  margin-left: 0;
  flex-shrink: 0;
  width: auto;
}

#sharedInventoryPanel .inventory-heading {
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.inventory-tile-view-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

@media (min-width: 769px) {
  .inventory-tile-view-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
    padding: 4px 0 2px;
  }
}

.inventory-title-legend-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.dts-exp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin-top: 4px;
}
.dts-exp-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.dts-exp-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dts-exp-dot.is-good  { background: #4ade80; }
.dts-exp-dot.is-warn  { background: #facc15; }
.dts-exp-dot.is-bad   { background: #f87171; }
.dts-exp-dot.is-none  { background: #6b7280; }
.dts-exp-legend-count { font-size: 0.7rem; opacity: 0.75; }

/* ── Create Invoice model-group header ─────────────────────────────────── */
.create-invoice-select-header {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 0;
}
.invoice-mg-group-header td {
  background: var(--color-surface-raised, var(--color-panel-bg));
  padding: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.invoice-mg-group-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 10px;
}

/* ── DTS Model-Group view ──────────────────────────────────────────────── */
.dts-model-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0;
  grid-column: 1 / -1;
}
.dts-model-group {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.dts-mg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface-raised, var(--color-panel-bg));
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.dts-mg-model {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text);
}
.dts-mg-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-pill-bg, rgba(128,128,128,0.12));
  border-radius: 20px;
  padding: 2px 8px;
}
.dts-mg-refs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: auto;
}
.dts-mg-ref-tag {
  font-size: 0.68rem;
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted);
  background: var(--color-pill-bg, rgba(128,128,128,0.1));
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.02em;
}
.dts-mg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.dts-mg-thead-row th {
  text-align: center;
  padding: 6px 12px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface-raised, var(--color-panel-bg));
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#createInvoiceButton.is-ref-group-selected {
  color: #4ade80;
  border-color: #4ade80;
  box-shadow: 0 0 0 1px #4ade8040;
}
.dts-item-tile.is-selected {
  border-color: #4ade80 !important;
  box-shadow: 0 0 0 2px #4ade8030, 0 22px 42px -34px rgba(0,0,0,0.86), inset 0 1px 0 rgba(255,255,255,0.06);
}
.dts-mg-row {
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.dts-mg-row:hover { background: var(--color-hover-bg, rgba(128,128,128,0.07)); }
.dts-mg-row.is-selected { background: rgba(155, 123, 255, 0.08); }
.dts-mg-row.is-selected:hover { background: rgba(155, 123, 255, 0.13); }
.dts-mg-row + .dts-mg-row { border-top: 1px solid var(--color-border); }
.dts-mg-row.is-exp-red .dts-mg-check { border-left: 3px solid #f87171; }
.dts-mg-row.is-exp-yellow .dts-mg-check { border-left: 3px solid #facc15; }
.dts-mg-row.is-exp-green .dts-mg-check { border-left: 3px solid #4ade80; }
.dts-mg-table th,
.dts-mg-table td { padding: 6px 12px; text-align: center; }
.dts-mg-table .dts-mg-check,
.dts-mg-table .dts-mg-check-th { width: 40px; text-align: center; padding: 6px 8px; }
/* Age + checkbox grouped on the right of the tile-top row */
.dts-tile-top-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dts-mg-checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.dts-mg-checkbox:hover {
  border-color: #9b7bff;
}
#dtsGroupByModelToggle.is-active {
  border-color: #9b7bff;
  color: #9b7bff;
  box-shadow: 0 0 0 1px #9b7bff40;
}
#dtsGroupByModelToggle.is-active:hover {
  color: #fff;
}
.dts-mg-checkbox:checked {
  background: #7c5af0;
  border-color: #7c5af0;
  box-shadow: 0 0 0 3px rgba(155, 123, 255, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23071209' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}
/* In group-view rows the checkbox is visual-only (row handles the click) */
.dts-mg-table .dts-mg-checkbox {
  pointer-events: none;
  margin: 0 auto;
}
.dts-mg-cell {
  padding: 8px 12px;
  color: var(--color-text);
  white-space: nowrap;
}
.dts-mg-exp { color: var(--color-text-muted); }
.dts-mg-mo-left { font-variant-numeric: tabular-nums; }
.dts-mg-mo { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); }
.dts-mg-mo.is-expired { color: #f87171; }
.dts-mg-mo.is-tier-green { color: #4ade80; }
.dts-mg-mo.is-tier-yellow { color: #facc15; }
.dts-mg-mo.is-tier-red { color: #f87171; }
.dts-mg-lead { color: var(--color-text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

.inventory-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.inventory-tile-empty {
  grid-column: 1 / -1;
}

.inventory-item-tile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-height: 230px;
  padding: 18px;
  border: 1px solid rgba(139, 139, 168, 0.22);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 90, 240, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(19, 16, 27, 0.94), rgba(7, 12, 9, 0.9));
  box-shadow:
    0 22px 42px -34px rgba(0, 0, 0, 0.86),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/* When a photo wrap is present it's absolutely positioned; reserve space above content */
.inventory-item-tile:has(.inv-tile-photo-wrap) {
  padding-top: calc(148px + 12px);
}

.inventory-invoice-tile .inventory-item-tile-main p {
  font-size: 0.84rem;
}

.inventory-invoice-tile .inventory-item-tile-meta,
.inventory-invoice-tile .inventory-item-tile-money {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-item-tile:hover,
.inventory-item-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(155, 123, 255, 0.42);
  box-shadow:
    0 28px 50px -36px rgba(124, 90, 240, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  outline: none;
}

.inventory-item-tile.is-unlisted {
  border-color: rgba(224, 113, 113, 0.42);
}

.inventory-item-tile.is-listed {
  border-color: rgba(99, 223, 116, 0.42);
  box-shadow:
    0 28px 50px -36px rgba(124, 90, 240, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.inventory-item-tile.is-exp-green {
  border-color: rgba(155, 123, 255, 0.55);
}

.inventory-item-tile.is-exp-yellow {
  border-color: rgba(251, 191, 36, 0.6);
}

.inventory-item-tile.is-exp-red {
  border-color: rgba(248, 113, 113, 0.65);
}

.inventory-item-tile.is-exp-green:hover,
.inventory-item-tile.is-exp-green:focus-visible {
  border-color: rgba(155, 123, 255, 0.75);
}

.inventory-item-tile.is-exp-yellow:hover,
.inventory-item-tile.is-exp-yellow:focus-visible {
  border-color: rgba(251, 191, 36, 0.8);
}

.inventory-item-tile.is-exp-red:hover,
.inventory-item-tile.is-exp-red:focus-visible {
  border-color: rgba(248, 113, 113, 0.85);
}

/* ── Tile save-status badge ─────────────────────────────────── */
/* ── Save recovery banner ───────────────────────────────────────────────── */
/* ── Recovery Log page ─────────────────────────────────────────────────── */
.recovery-log-panel {
  max-width: 640px;
  margin: 0 auto;
}
.recovery-log-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}
.recovery-log-loading {
  color: var(--muted);
  font-size: 0.85rem;
}
.rl-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rl-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rl-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rl-dot--pending { background: #f5a623; box-shadow: 0 0 6px rgba(245,166,35,.6); }
.rl-dot--ok      { background: #63df74; box-shadow: 0 0 6px rgba(99,223,116,.4); }
.rl-section-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
.rl-empty-state {
  font-style: italic;
}
.rl-card {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.rl-card--pending {
  border-color: rgba(245,166,35,.25);
  background: rgba(245,166,35,.05);
}
.rl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.rl-card-time {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.rl-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.rl-badge--pending   { background: rgba(245,166,35,.15); color: #f5a623; border: 1px solid rgba(245,166,35,.3); }
.rl-badge--recovered { background: rgba(99,223,116,.15);  color: #63df74; border: 1px solid rgba(99,223,116,.3); }
.rl-badge--dismissed { background: rgba(255,255,255,.07); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }
.rl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rl-pill {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.09);
}
.rl-pill strong {
  font-weight: 700;
  color: var(--text);
}
.rl-empty-summary {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}
.rl-recover-now-btn {
  align-self: flex-start;
  background: #63df74;
  color: #111;
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 4px;
}
.rl-recover-now-btn:hover { background: #4fcf60; }
.rl-clear-btn {
  font-size: 0.75rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
}
.rl-clear-btn:hover { color: var(--danger); }
.rl-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}
.rl-history-item {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,.025);
}
.rl-history-item:nth-child(even) {
  background: rgba(255,255,255,.045);
}
.rl-history-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rl-history-time {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: auto;
}
.rl-history-sessions {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}
.rl-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.rl-detail-group {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}
.rl-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,.04);
  list-style: none;
  gap: 10px;
}
.rl-detail-summary::-webkit-details-marker { display: none; }
.rl-detail-summary::before {
  content: "▶";
  font-size: 0.6rem;
  color: var(--muted);
  transition: transform .18s ease;
  flex-shrink: 0;
}
details[open] > .rl-detail-summary::before {
  transform: rotate(90deg);
}
.rl-detail-summary:hover { background: rgba(255,255,255,.07); }
.rl-detail-label {
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 500;
  flex: 1;
}
.rl-detail-count {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 1px 8px;
  color: var(--muted);
  flex-shrink: 0;
}
.rl-item-list {
  border-top: 1px solid rgba(255,255,255,.06);
  max-height: 260px;
  overflow-y: auto;
}
.rl-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.rl-item-row:last-child { border-bottom: none; }
.rl-item-row:nth-child(even) { background: rgba(255,255,255,.025); }
.rl-item-name {
  font-size: 0.78rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-item-meta {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.rl-no-detail {
  font-size: 0.73rem;
  color: var(--muted);
  font-style: italic;
  margin: 4px 0 0;
}

/* ── Save recovery UI ──────────────────────────────────────────────────── */
.save-recovery-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #18161d;
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: 14px;
  box-shadow: 0 6px 32px rgba(0,0,0,.6);
  max-width: min(420px, 92vw);
  width: 100%;
}
.save-recovery-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.save-recovery-icon {
  font-size: 1.1rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.save-recovery-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.save-recovery-title {
  font-size: 0.85rem;
  color: #f5a623;
  line-height: 1.3;
}
.save-recovery-multi-note {
  font-size: 0.75rem;
  color: rgba(245,166,35,.65);
}
.save-recovery-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recovery-pill {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(245,166,35,.12);
  color: #e8c97a;
  border: 1px solid rgba(245,166,35,.2);
}
.recovery-pill strong {
  font-weight: 700;
  color: #f5c842;
}
.save-recovery-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.save-recovery-msg {
  font-size: 0.85rem;
  color: #f5a623;
}
.save-recovery-msg--warn {
  color: #ef9f4a;
}
.save-recovery-btn {
  font-size: 0.8rem;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
}
.save-recovery-btn--recover {
  background: #63df74;
  color: #111;
}
.save-recovery-btn--recover:hover { background: #4fcf60; }
.save-recovery-btn--dismiss {
  background: rgba(255,255,255,.08);
  color: #9db1a0;
}
.save-recovery-btn--dismiss:hover { background: rgba(255,255,255,.13); }
.save-recovery-btn--dismiss-confirm {
  background: rgba(239,112,112,.18);
  color: #ef7070;
}
.save-recovery-btn--dismiss-confirm:hover { background: rgba(239,112,112,.28); }
.save-recovery-btn--back {
  background: rgba(255,255,255,.08);
  color: #9db1a0;
}
.save-recovery-btn--back:hover { background: rgba(255,255,255,.13); }

/* Recovery sheet overlay */
.save-recovery-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.save-recovery-sheet {
  background: #161d17;
  border: 1px solid rgba(245,166,35,.35);
  border-radius: 18px 18px 0 0;
  padding: 24px 20px 28px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.save-recovery-sheet-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.save-recovery-sheet-icon {
  font-size: 2rem;
  line-height: 1;
}
.save-recovery-sheet-title {
  font-size: 1rem;
  font-weight: 700;
  color: #edf7ee;
  margin: 0;
}
.save-recovery-sheet-when {
  font-size: 0.78rem;
  color: #f5a623;
  margin: 3px 0 0;
}
.save-recovery-sheet-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
}
.recovery-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  font-size: 0.85rem;
}
.recovery-sheet-row:nth-child(even) {
  background: rgba(255,255,255,.055);
}
.recovery-sheet-label {
  color: #c8d9ca;
}
.recovery-sheet-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #edf7ee;
  background: rgba(124,90,240,.15);
  border: 1px solid rgba(124,90,240,.25);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.8rem;
}
.save-recovery-sheet-older {
  font-size: 0.78rem;
  color: rgba(245,166,35,.7);
  margin: 0;
}
.save-recovery-sheet-note {
  font-size: 0.78rem;
  color: #7a9480;
  margin: 0;
  line-height: 1.5;
}
.save-recovery-sheet-btns {
  display: flex;
  gap: 10px;
}
.save-recovery-sheet-btn--recover {
  flex: 1;
  padding: 12px;
  background: #63df74;
  color: #111;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.save-recovery-sheet-btn--recover:hover { background: #4fcf60; }
.save-recovery-sheet-btn--cancel {
  padding: 12px 18px;
  background: rgba(255,255,255,.08);
  color: #9db1a0;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.save-recovery-sheet-btn--cancel:hover { background: rgba(255,255,255,.13); }

/* Recovery success/error toast */
.save-recovery-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  padding: 10px 20px;
  background: #1a2b1c;
  border: 1px solid rgba(155,123,255,.4);
  border-radius: 10px;
  font-size: 0.85rem;
  color: #9b7bff;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  animation: recoveryToastIn .2s ease, recoveryToastOut .3s ease 3.7s forwards;
  white-space: nowrap;
}
.save-recovery-toast--error {
  border-color: rgba(239,112,112,.4);
  color: #ef7070;
  background: #2b1a1a;
}
@keyframes recoveryToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes recoveryToastOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Recovery progress toast ─────────────────────────────────────────────── */
.save-recovery-progress {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 999999;
  min-width: 240px;
  max-width: 340px;
  padding: 12px 18px 14px;
  background: #14111c;
  border: 1px solid rgba(155,123,255,.25);
  border-radius: 12px;
  box-shadow: 0 6px 28px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: recoveryToastIn .22s ease;
}
.save-recovery-progress--out {
  animation: recoveryProgressOut .35s ease forwards;
}
.save-recovery-progress__label {
  font-size: 0.83rem;
  color: rgba(255,255,255,.75);
  letter-spacing: .01em;
  transition: color .3s ease;
}
.save-recovery-progress--done .save-recovery-progress__label {
  color: #63df74;
}
.save-recovery-progress--error .save-recovery-progress__label {
  color: #ef7070;
}
.save-recovery-progress__track {
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.save-recovery-progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3db85a, #63df74);
  animation: recoveryBarIndeterminate 1.4s ease-in-out infinite;
  transition: none;
}
.save-recovery-progress--done .save-recovery-progress__bar {
  animation: none;
  background: #63df74;
}
.save-recovery-progress--error .save-recovery-progress__bar {
  animation: none;
  width: 100% !important;
  background: #ef7070;
}
@keyframes recoveryBarIndeterminate {
  0%   { width: 0%;   margin-left: 0%; }
  40%  { width: 60%;  margin-left: 20%; }
  70%  { width: 30%;  margin-left: 65%; }
  100% { width: 0%;   margin-left: 100%; }
}
@keyframes recoveryProgressOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(6px); }
}

.tile-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Hide the status pill while the badge is present */
.inventory-item-tile-top:has(.tile-save-badge) .inventory-item-status-pill {
  display: none;
}
.tile-save-badge--pending {
  background: rgba(245, 166, 35, 0.14);
  color: #f5a623;
  border: 1px solid rgba(245, 166, 35, 0.35);
  animation: badge-pulse 1.1s ease-in-out infinite;
}
.tile-save-badge--saved {
  background: rgba(155, 123, 255, 0.14);
  color: #4ade80;
  border: 1px solid rgba(155, 123, 255, 0.3);
  animation: badge-fadeout 15s ease forwards;
}
.tile-save-badge--error {
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}
@keyframes badge-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes badge-fadeout {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.inventory-item-tile.intake-ready {
  border-color: #4ade80 !important;
}
.inventory-item-tile.intake-ready:hover,
.inventory-item-tile.intake-ready:focus-visible {
  border-color: rgba(155,123,255,0.75) !important;
}
.inventory-item-tile.intake-missing {
  border-color: #f87171 !important;
  background: linear-gradient(160deg, rgba(248,113,113,0.06) 0%, transparent 60%);
}
.inventory-item-tile.intake-missing:hover,
.inventory-item-tile.intake-missing:focus-visible {
  border-color: rgba(248,113,113,0.75) !important;
}
.intake-missing-banner {
  padding: 5px 10px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f87171;
  border-top: 1px solid rgba(248,113,113,0.2);
  background: rgba(248,113,113,0.06);
  border-radius: 0 0 8px 8px;
  text-align: center;
}

.inventory-item-tile.local-pickup-missing {
  border-color: #f87171 !important;
}
.inventory-item-tile.local-pickup-missing:hover,
.inventory-item-tile.local-pickup-missing:focus-visible {
  border-color: rgba(248, 113, 113, 0.75) !important;
}
.inventory-item-tile.local-pickup-complete {
  border-color: #63df74 !important;
}
.inventory-item-tile.local-pickup-complete:hover,
.inventory-item-tile.local-pickup-complete:focus-visible {
  border-color: rgba(99, 223, 116, 0.75) !important;
}
.local-pickup-import-actions {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.local-pickup-import-btn {
  width: 100%;
  text-align: center;
  background: #9b7bff !important;
  color: #111 !important;
  font-weight: 600;
}
.local-pickup-import-btn:hover {
  background: #754fcf !important;
}
.local-pickup-delete-btn {
  width: 100%;
  text-align: center;
  background: rgba(248,113,113,0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248,113,113,0.35) !important;
  font-weight: 600;
}
.local-pickup-delete-btn:hover {
  background: rgba(248,113,113,0.28) !important;
}

/* Bulk move bar */
.dts-bulk-move-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.dts-bulk-move-bar.is-hidden { display: none; }

.dts-bulk-select-all-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.dts-bulk-select-all-checkbox {
  width: 15px;
  height: 15px;
  accent-color: #9b7bff;
  cursor: pointer;
}
.dts-bulk-selected-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  min-width: 70px;
}
.dts-bulk-move-btn {
  background: #9b7bff !important;
  color: #111 !important;
  font-weight: 600;
  margin-left: auto;
}
.dts-bulk-move-btn:hover:not(:disabled) { background: #754fcf !important; }
.dts-bulk-move-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dts-bulk-local-only-btn {
  background: transparent !important;
}
.dts-bulk-local-only-btn:hover {
  background: rgba(255,255,255,.08) !important;
}
.dts-bulk-local-only-btn--text {
  width: auto !important;
  height: auto !important;
  padding: 6px 14px !important;
  font-size: 0.8rem;
  font-weight: 600;
}
.dts-bulk-local-only-btn--text:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tile select checkbox */
.inventory-tile-select-wrap {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.inventory-tile-select {
  width: 17px;
  height: 17px;
  accent-color: #9b7bff;
  cursor: pointer;
}

/* Ineligible tiles in bulk mode — missing info */
.inventory-item-tile.bulk-ineligible {
  opacity: 0.45;
  pointer-events: none;
}
.inventory-item-tile.bulk-ineligible .inventory-tile-select-wrap {
  display: none;
}

.filter-chip-divider {
  width: 1px;
  height: 24px;
  background: var(--border, rgba(255,255,255,0.15));
  margin: 0 4px;
  align-self: center;
  display: inline-block;
}

@media (max-width: 900px) {
  .inventory-view-drawer .filter-chip-divider {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }
}

.inventory-item-tile.is-unlisted .inventory-item-tile-main h3,
.inventory-item-tile.is-unlisted .inventory-item-tile-main p {
  color: #e07171;
}

.inventory-item-tile-top,
.inventory-item-tile-money,
.inventory-item-tile-meta {
  display: flex;
  gap: 10px;
}

.inventory-item-tile-top {
  align-items: center;
  justify-content: space-between;
}

.inventory-item-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 90, 240, 0.14);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inventory-item-status-pill.is-needs-shipping,
.inventory-item-status-pill.is-return {
  background: rgba(194, 143, 51, 0.16);
  color: var(--warning);
}

.inventory-item-status-pill.is-paid,
.inventory-item-status-pill.is-delivered {
  background: rgba(124, 90, 240, 0.18);
  color: var(--success);
}

.inventory-item-status-pill.is-exp-green {
  background: rgba(155, 123, 255, 0.18);
  color: #9b7bff;
}

.inventory-item-status-pill.is-exp-yellow {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

.inventory-item-status-pill.is-exp-red {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.dts-exp-date-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.dts-exp-date-tag.is-exp-green {
  background: rgba(155, 123, 255, 0.16);
  color: #9b7bff;
}

.dts-exp-date-tag.is-exp-yellow {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}

.dts-exp-date-tag.is-exp-red {
  background: rgba(248, 113, 113, 0.16);
  color: #f87171;
}

.inventory-item-age {
  color: var(--muted);
  font-size: 0.82rem;
}

.inventory-item-tile-main h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.15;
}

.inventory-item-tile-main p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.dts-mg-lead-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dts-mg-info-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 700;
  font-family: serif;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: border-color 0.12s, color 0.12s;
}
.dts-mg-info-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.dts-mg-lot-recalled {
  color: #f87171;
  font-weight: 700;
  cursor: help;
}
.tile-lot-recalled {
  color: #f87171;
  font-weight: 700;
  cursor: help;
}
.invoice-lot-recalled {
  color: #f87171;
  font-weight: 700;
  cursor: help;
}

.inventory-item-tile-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Transit tile tracking section ───────────────────────────────────────── */
.transit-tile-tracking {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface-alt, rgba(255,255,255,0.04));
  border-radius: 8px;
  border: 1px solid var(--border);
}
.transit-tile-tracking-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.transit-tile-carrier-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.transit-tile-tn {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transit-tile-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--accent, #4f8ef7);
  opacity: 0.8;
  text-decoration: none;
}
.transit-tile-link:hover { opacity: 1; }
.transit-tile-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}
.transit-tile-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
}
.transit-tile-status-dot.is-checking { background: var(--muted); opacity: 0.5; }
.transit-tile-status-dot.is-transit  { background: #4f8ef7; }
.transit-tile-status-dot.is-delivered { background: #34c759; }
.transit-tile-status-dot.is-exception { background: #ff453a; }
.transit-tile-status-dot.is-unknown        { background: var(--muted); }
.transit-tile-status-dot.is-out-for-delivery { background: #ff9f0a; }
.transit-status-link {
  color: var(--accent, #4f8ef7);
  text-decoration: none;
  font-size: 0.78rem;
}
.transit-status-link:hover { text-decoration: underline; }
.transit-tile-no-tracking {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.tracking-tile-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent, #4f8ef7);
  text-decoration: none;
  margin-left: 4px;
  opacity: 0.75;
}
.tracking-tile-link:hover { opacity: 1; }

.inventory-item-tile-meta,
.inventory-item-tile-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .dts-item-tile .inventory-item-tile-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .dts-item-tile .inventory-item-tile-meta,
  .dts-item-tile .inventory-item-tile-money {
    display: contents;
  }
}

.inventory-item-tile-meta div,
.inventory-item-tile-money div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.inventory-item-tile-meta span,
.inventory-item-tile-money span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.inventory-item-tile-meta strong,
.inventory-item-tile-money strong {
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.inventory-item-tile-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.inventory-invoice-tile .inventory-item-tile-actions {
  width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
}

.inventory-invoice-tile .inventory-item-tile-actions .inventory-tile-action-button {
  flex: 0 0 auto;
}

.inventory-item-tile-actions .inventory-tile-action-button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(27, 23, 35, 0.9);
  color: var(--accent-strong);
}

.inventory-item-tile-actions .inventory-tile-action-button[data-action="delete"] {
  color: var(--danger);
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-listed {
  color: var(--success);
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-listed.is-active {
  background: rgba(36, 27, 56, 0.98);
}

.inventory-item-tile-actions .inventory-tile-action-button[data-action="duplicate"] {
  color: var(--accent-strong);
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-duplicate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 12px;
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-duplicate .action-icon {
  width: 14px;
  height: 14px;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 12px;
  color: var(--danger);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-delete .action-icon {
  width: 14px;
  height: 14px;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 12px;
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-upload .action-icon {
  width: 14px;
  height: 14px;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-return {
  color: var(--warning);
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-received {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 12px;
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-received .action-icon {
  width: 14px;
  height: 14px;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-shipped {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 12px;
  color: var(--warning);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-item-tile-actions .inventory-tile-action-button.inventory-tile-action-shipped .action-icon {
  width: 14px;
  height: 14px;
}

.inventory-invoice-tile .inventory-item-tile-actions .inventory-tile-action-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-item-tile-actions .inventory-tile-action-button:hover,
.inventory-item-tile-actions .inventory-tile-action-button:focus-visible {
  transform: translateY(-1px);
  background: rgba(38, 33, 48, 0.98);
}

.item-detail-page-panel {
  overflow: visible;
}

.item-detail-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.item-detail-table-wrap table {
  width: max-content;
  min-width: max-content;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-chip.is-active {
  background: var(--accent);
  color: #0b0811;
}

#showReturnsButton.is-active {
  background: var(--danger);
  color: var(--text);
}

#showReturnsButton:hover {
  background: var(--danger);
  color: var(--text);
}

.filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.filter-chip-count.warning {
  background: #000;
  color: var(--warning);
}

.filter-chip-count.danger {
  background: #000;
  color: var(--danger);
}

.filter-chip-count.success {
  background: #000;
  color: var(--success);
}

.filter-chip-count.neutral {
  background: #000;
  color: var(--text);
}

.manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 20px;
}

.manager-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dropdown-option-list {
  display: grid;
  gap: 10px;
}

.transfer-section {
  display: grid;
  gap: 10px;
}

.transfer-section-title {
  margin: 8px 4px 2px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.option-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  border-radius: 16px;
  background: rgba(19, 20, 28, 0.72);
}

.option-row-name {
  word-break: break-word;
}

.option-row-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#powerSectionList {
  display: grid;
  gap: 12px;
}

.payment-value {
  color: var(--text);
  justify-content: flex-end;
  text-align: right;
}

.payment-edit-row {
  align-items: center;
}

.payment-field-wrap {
  min-width: min(320px, 100%);
}

.payment-field-wrap input,
.payment-field-wrap select {
  text-align: left;
}

.invoice-settings-panel {
  width: min(1180px, 100%);
  margin: 0 auto;
}

#settingsPage .panel-heading .panel-kicker,
#settingsPage .panel-heading h1,
#settingsPage .panel-heading h2,
#invoiceSettingsPage .panel-heading .panel-kicker,
#invoiceSettingsPage .panel-heading h1,
#invoiceSettingsPage .panel-heading h2 {
  text-align: left;
}

.invoice-settings-form {
  display: grid;
  gap: 24px;
}

.invoice-settings-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invoice-settings-city-row {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.6fr) minmax(120px, 0.7fr) minmax(160px, 0.9fr);
  grid-column: 1 / -1;
}

.invoice-settings-name-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

.invoice-settings-wide {
  grid-column: 1 / -1;
}

#paymentOptionsPreview {
  resize: none;
  cursor: default;
  opacity: 0.72;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  line-height: 1.6;
  background: var(--input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.invoice-settings-compiled-note {
  font-size: 0.75rem;
  opacity: 0.5;
  font-weight: 400;
  margin-left: 4px;
}

.invoice-settings-footer {
  display: grid;
  gap: 14px;
}

.invoice-settings-footer .form-actions {
  justify-content: flex-end;
}

.invoice-settings-companies {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  border-radius: 18px;
  background: rgba(19, 20, 28, 0.72);
}

.invoice-settings-section-heading {
  margin-bottom: 0;
}

.invoice-settings-companies-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.invoice-company-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.invoice-company-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  border-radius: 16px;
  background: rgba(14, 12, 19, 0.72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.invoice-company-card.is-active {
  border-color: rgba(155, 123, 255, 0.56);
  box-shadow: 0 0 0 1px rgba(155, 123, 255, 0.18) inset;
}

.invoice-company-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.invoice-company-card-body {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.invoice-company-form {
  padding: 16px;
  border: 1px solid rgba(139, 139, 168, 0.18);
  border-radius: 16px;
  background: rgba(12, 10, 16, 0.68);
}

.search-input,
.status-filter {
  min-width: 220px;
}

.table-wrap {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: visible;
  border-radius: 18px;
  border: 1px solid rgba(139, 139, 168, 0.18);
}

.kit-group-row td {
  background: rgba(19, 16, 26, 0.96);
  border-bottom: 1px solid rgba(139, 139, 168, 0.14);
  vertical-align: middle;
}

.kit-group-row:hover td,
.kit-group-row:focus-within td {
  background: rgba(26, 22, 34, 0.98);
}

.kit-group-child-row td {
  background: rgba(12, 10, 18, 0.96);
}

.kit-group-child-row:hover td,
.kit-group-child-row:focus-within td {
  background: rgba(16, 14, 22, 0.98);
}

.kit-group-main-cell {
  padding: 0;
}

.kit-group-toggle {
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.kit-group-toggle:focus-visible {
  outline: none;
}

.kit-group-chevron {
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  font-size: 1rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.kit-group-title {
  display: block;
  font-weight: 700;
  color: var(--accent-strong);
}

#inventoryPage:not(.sold-view):not(.returns-view):not(.payouts-view) .kit-group-title {
  color: var(--text);
}

.kit-group-title.is-warning {
  color: var(--warning);
}

.kit-group-title.is-danger {
  color: var(--danger);
}

.kit-group-title-wrap {
  display: grid;
  gap: 2px;
}

.kit-group-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.kit-group-meta {
  display: block;
  color: var(--muted);
  min-width: 0;
  margin-top: 2px;
}

.kit-group-metric-label {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kit-group-metric-value {
  display: block;
  font-weight: 700;
}

.kit-group-cell,
.kit-group-spacer {
  text-align: center;
}

.kit-group-actions {
  text-align: right;
  padding-right: 10px;
}

.kit-group-actions .icon-button {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
}

.kit-group-cell {
  padding: 12px;
}

.kit-group-child-row td:first-child {
  position: relative;
  padding-left: 28px;
}

.kit-group-child-row td:first-child::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(163, 157, 177, 0.46);
}

.spreadsheet-editable-cell {
  cursor: pointer;
  transition: background 140ms ease;
}

.spreadsheet-editable-cell:hover {
  background: rgba(124, 90, 240, 0.08);
}

.spreadsheet-readonly-cell {
  color: var(--muted);
}

#spreadsheetBody td input,
#spreadsheetBody td select,
#spreadsheetBody td textarea {
  width: 100%;
  min-width: 120px;
}

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

#inventoryPage table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

th,
td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(139, 139, 168, 0.14);
  vertical-align: top;
}

#inventoryPage th,
#inventoryPage td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.clickable-cell {
  position: relative;
  cursor: pointer;
  transition: background 140ms ease;
}

.clickable-cell:hover,
.clickable-cell:focus-within {
  z-index: 20;
}

.clickable-cell:hover {
  background: rgba(124, 90, 240, 0.08);
}

.inventory-flag-column {
  text-align: center;
}

.inventory-flag-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  font-weight: 700;
  color: #e07171;
}

.inventory-flag-cell.is-checked {
  color: #815fd0;
}

.inventory-inline-select {
  width: 100%;
  max-width: 110px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(19, 20, 28, 0.72);
  color: var(--text);
  font: inherit;
}

.inventory-inline-select:disabled {
  opacity: 0.55;
}

.inventory-row-unlisted td {
  color: #e07171 !important;
}

.inventory-row-unlisted td.clickable-cell:hover,
.inventory-row-unlisted td.clickable-cell:focus-within {
  color: #e07171 !important;
}

.inventory-row-unlisted td * {
  color: #e07171 !important;
}

.inventory-row-unlisted .inventory-flag-cell {
  color: #e07171 !important;
}

.inventory-row-unlisted .inventory-flag-cell.is-checked {
  color: #5fd07b !important;
}

thead,
thead tr {
  background: #171320;
}

thead th {
  position: sticky;
  top: 0;
  background: #171320;
  z-index: 12;
  background-clip: padding-box;
  box-shadow:
    inset 0 -1px 0 rgba(139, 139, 168, 0.14),
    0 1px 0 rgba(11, 9, 15, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: center;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#inventoryPage thead,
#inventoryPage thead tr,
#inventoryPage thead th {
  background: #171320;
}

#inventoryPage thead th {
  top: 0;
  z-index: 12;
  box-shadow:
    inset 0 -1px 0 rgba(139, 139, 168, 0.14),
    0 1px 0 rgba(11, 9, 15, 0.96);
}

tbody tr {
  position: relative;
}

tbody tr:hover,
tbody tr:focus-within {
  z-index: 8;
}

.spreadsheet-column-header {
  cursor: grab;
  user-select: none;
}

.spreadsheet-column-header.is-dragging {
  opacity: 0.45;
}

.table-sort-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}

.table-sort-button.is-active {
  color: var(--accent-strong);
}

.table-sort-button::after {
  content: "";
  display: inline-block;
  width: 0;
}

.table-sort-button.is-active[data-direction="asc"]::after {
  content: " ↑";
}

.table-sort-button.is-active[data-direction="desc"]::after {
  content: " ↓";
}

#inventoryPage thead th[data-column-key] {
  cursor: grab;
  position: relative;
}

#inventoryPage th[data-column-key="actions"],
#inventoryPage td[data-column-key="actions"] {
  min-width: 132px;
  width: 132px;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  border-right: 1px solid rgba(139, 139, 168, 0.18);
}

#inventoryPage thead th[data-column-key].is-dragging {
  opacity: 0.45;
}

.inventory-column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  z-index: 20;
}

.inventory-column-resize-handle::before {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(163, 157, 177, 0.34);
  transition: background 140ms ease;
}

.inventory-column-resize-handle:hover::before,
.inventory-column-resize-handle:focus-visible::before {
  background: rgba(124, 90, 240, 0.9);
}

#inventoryPage thead th[data-column-key="actions"] .inventory-column-resize-handle {
  display: none;
}

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

.mono {
  font-family: "IBM Plex Mono", monospace;
}

.tracking-inline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tracking-status-popover {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(7, 12, 9, 0.97);
  border: 1px solid rgba(139, 139, 168, 0.24);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.78rem;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 140ms ease;
  z-index: 32;
}

.tracking-status-popover strong {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.tracking-inline:hover .tracking-status-popover,
.tracking-inline:focus-within .tracking-status-popover {
  opacity: 1;
  visibility: visible;
}

.tracking-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
}

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

.model-cell-wrap {
  position: relative;
  display: inline-grid;
  gap: 4px;
  justify-items: center;
}

.model-cell-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.model-status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(54, 38, 92, 0.16);
  color: var(--success);
  flex: 0 0 auto;
}

.model-status-indicator.warning {
  background: rgba(141, 91, 22, 0.16);
  color: var(--warning);
}

.model-status-indicator.danger {
  background: rgba(138, 45, 45, 0.16);
  color: var(--danger);
}

.model-status-popover {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(7, 12, 9, 0.97);
  border: 1px solid rgba(139, 139, 168, 0.24);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 140ms ease;
  z-index: 15;
}

.clickable-cell:hover .model-status-popover,
.clickable-cell:focus-within .model-status-popover,
.kit-group-toggle:hover .model-status-popover,
.kit-group-toggle:focus-visible .model-status-popover {
  opacity: 1;
  visibility: visible;
}

.kit-group-status-popover {
  left: 12px;
  right: auto;
  transform: none;
  z-index: 18;
}

.profit-breakdown-cell {
  position: relative;
}

.profit-breakdown-cell[data-profit-breakdown]:not([data-profit-breakdown=""]) {
  cursor: help;
}

.profit-breakdown-cell[data-profit-breakdown]:not([data-profit-breakdown=""]):hover::after,
.profit-breakdown-cell[data-profit-breakdown]:not([data-profit-breakdown=""]):focus-within::after {
  content: attr(data-profit-breakdown);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(7, 12, 9, 0.97);
  border: 1px solid rgba(139, 139, 168, 0.24);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-line;
  text-align: left;
  z-index: 15;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge.success {
  background: rgba(54, 38, 92, 0.12);
  color: var(--success);
}

.badge.warning {
  background: rgba(141, 91, 22, 0.12);
  color: var(--warning);
}

.badge.danger {
  background: rgba(138, 45, 45, 0.12);
  color: var(--danger);
}

.exp-months.warning {
  color: var(--warning);
}

.exp-months.danger {
  color: var(--danger);
}

.profit-positive {
  color: var(--success);
}

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

.row-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.inline-editor {
  display: grid;
  gap: 10px;
}

.inline-editor-field {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.inline-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  cursor: pointer;
  padding: 0;
}

.icon-only-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.icon-only-button[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.row-actions .icon-only-button[data-tooltip]::after {
  top: calc(100% + 8px);
  bottom: auto;
}

.icon-only-button[data-action="delete"] {
  color: var(--danger);
}

.action-icon {
  width: 16px;
  height: 16px;
}

.empty-state {
  text-align: center;
  vertical-align: middle;
  padding: 40px 18px;
  color: var(--muted);
}

.changelog-details {
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100vw - 18px, 100%);
    padding-top: 12px;
  }

  .hero,
  .panel {
    padding: 18px;
    border-radius: 20px;
  }

  .modal {
    padding: 10px;
  }

  .modal-panel {
    max-height: 95vh;
  }

  .hero,
  .panel-heading {
    flex-direction: column;
  }

  .dashboard-top-row {
    grid-template-columns: 1fr;
  }

  .dashboard-lists-row {
    grid-template-columns: 1fr;
  }

  .toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .toolbar > * {
    flex: 1 1 100%;
  }

  .stats-grid,
  .field-grid,
  .mode-switch {
    grid-template-columns: 1fr;
  }

  .inline-input-action {
    grid-template-columns: 1fr;
  }

  .manager-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .app-shell {
    width: min(100vw - 14px, 100%);
    padding: 12px 0 140px;
  }

  .hero,
  .panel {
    padding: 16px;
    border-radius: 18px;
  }

  .hero {
    gap: 14px;
  }

  .panel-heading,
  .table-toolbar,
  .metrics-filters {
    flex-direction: column;
    align-items: center;
  }

  .metrics-chart-heading {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .metrics-chart-heading > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .spend-breakdown-controls {
    align-items: center;
  }

  .dashboard-weekly-metrics-title-row {
    justify-items: center;
    text-align: center;
  }

  .dashboard-weekly-metrics-toggle {
    display: inline-flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    max-width: 100%;
    align-self: center;
  }

  .dashboard-weekly-metrics-toggle .filter-chip {
    width: auto;
    min-width: 0;
  }

  .hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    justify-content: stretch;
    align-items: start;
  }

  .hero-actions > *,
  .inventory-filter-chips > *,
  .table-toolbar > * {
    flex: 1 1 auto;
  }


  .metrics-filters > * {
    align-self: center;
  }

  .hero-actions > * {
    min-width: 0;
  }

  .hero-actions .icon-trigger[data-tooltip]::after,
  .icon-trigger[data-tooltip]::after,
  .icon-only-button[data-tooltip]::after,
  .filter-chip[data-tooltip]::after {
    display: none !important;
    content: none !important;
  }

  .hero-actions .menu-wrap {
    width: auto;
  }

  .hero-actions .icon-trigger {
    width: 100%;
    height: auto;
    min-height: 64px;
    padding: 10px 8px 8px;
    border-radius: 16px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
  }

  .hero-actions .menu-panel {
    left: auto;
    right: 0;
    width: min(220px, calc(100vw - 28px));
  }

  .inventory-filter-chips {
    width: 100%;
  }

  .filter-chip {
    justify-content: center;
  }

  .inventory-tools {
    width: 100%;
    justify-content: flex-end;
  }

  .search-wrap {
    width: auto;
    justify-content: flex-start;
  }

  .search-wrap.is-open .search-input {
    width: min(100%, 220px);
    min-width: 0;
  }

  .table-toolbar {
    margin-bottom: 12px;
  }

  .table-toolbar #openExpensesModalButton {
    align-self: flex-end;
  }

  #expensesYearFilters {
    display: none;
  }

  .expense-question .inline-input-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .expense-question .inline-input-action > input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .expense-question .inline-input-action > button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .row-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .status-stack {
    justify-content: flex-start;
  }

  .modal {
    padding: 8px;
  }

  .modal-panel,
  #inventoryModal .modal-panel,
  #itemInfoModal .modal-panel,
  .dropdown-manager-panel,
  .metrics-panel {
    width: min(calc(100vw - 16px), 100%);
    max-height: 96vh;
  }

  #inventoryForm.wizard-active .wizard-progress {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .wizard-header-actions {
    justify-content: space-between;
  }

  .wizard-header-actions > * {
    flex: 1 1 0;
  }

  .wizard-title-row {
    justify-content: space-between;
    align-items: flex-start;
  }

  .wizard-header-tools .wizard-choice-search {
    width: 100%;
  }

  .mode-switch,
  .field-grid,
  .stats-grid,
  .metrics-chart-grid {
    grid-template-columns: 1fr;
  }

  #inventoryPage .table-wrap {
    overflow: visible;
    border: 0;
  }

  #inventoryPage table,
  #inventoryPage thead,
  #inventoryPage tbody {
    display: block;
  }

  #inventoryPage thead {
    display: none;
  }

  #inventoryPage tbody {
    display: grid;
    gap: 14px;
  }

  #inventoryPage tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(139, 139, 168, 0.18);
    background: rgba(19, 16, 26, 0.96);
  }

  #inventoryPage td {
    display: grid;
    gap: 6px;
    padding: 0;
    border: 0;
    text-align: left;
    vertical-align: top;
    min-width: 0;
  }

  #inventoryPage td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #inventoryPage td[data-label="SKU"],
  #inventoryPage td[data-label="Model"],
  #inventoryPage td[data-label="Status"],
  #inventoryPage td[data-label="Tracking"],
  #inventoryPage td[data-label="Actions"],
  #inventoryPage .kit-group-main-cell {
    grid-column: 1 / -1;
  }

  #inventoryPage td[data-label="Actions"] {
    justify-items: center;
    padding-top: 4px;
  }

  #inventoryPage td[data-label="Actions"] .icon-only-button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(27, 23, 35, 0.9);
  }

  #inventoryPage td[data-label="Actions"] .action-icon {
    width: 18px;
    height: 18px;
  }

  #inventoryPage td[data-label="Actions"]::before,
  #inventoryPage .kit-group-main-cell::before {
    display: none;
  }

  #inventoryPage .kit-group-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #inventoryPage .kit-group-spacer {
    display: none;
  }

  #inventoryPage .kit-group-toggle {
    justify-content: flex-start;
    text-align: left;
    padding: 0;
  }

  #inventoryPage .kit-group-cell {
    padding: 0;
    text-align: left;
  }

  #inventoryPage .kit-group-child-row td:first-child {
    padding-left: 0;
  }

  #inventoryPage .kit-group-child-row td:first-child::before {
    display: none;
  }

  #cellEditorModal .modal-heading {
    position: sticky;
    padding-right: 52px;
  }

  #inventoryModal .modal-heading {
    position: sticky;
    padding-right: 52px;
  }

  #soldItemModal .modal-heading,
  #deleteConfirmModal .modal-heading {
    position: sticky;
    padding-right: 52px;
  }

  #cellEditorModal .modal-actions {
    position: absolute;
    top: 0;
    right: 0;
  }

  #inventoryModal .modal-actions {
    position: absolute;
    top: 0;
    right: 0;
  }

  #soldItemModal .modal-actions,
  #deleteConfirmModal .modal-actions {
    position: absolute;
    top: 0;
    right: 0;
  }

  #cellEditorModal .panel-heading {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  #inventoryModal .panel-heading {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  #soldItemModal .panel-heading,
  #deleteConfirmModal .panel-heading {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
}

.checklist-shell {
  padding: 28px;
}

.checklist-heading {
  align-items: flex-start;
}

.checklist-subcopy {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 60ch;
}

.checklist-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  margin-top: 22px;
}

.checklist-sidebar {
  display: grid;
  gap: 14px;
  align-content: start;
}

.checklist-sidebar-header {
  display: grid;
  gap: 8px;
}

.checklist-progress-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: var(--text);
}

.status-pill.is-success {
  color: var(--success);
}

.status-pill.is-warning {
  color: var(--warning);
}

.status-pill.is-danger {
  color: var(--danger);
}

.checklist-session-list {
  display: grid;
  gap: 12px;
}

.checklist-session-card {
  width: 100%;
  border: 1px solid var(--panel-border);
  background: rgba(10, 8, 14, 0.78);
  color: var(--text);
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  display: grid;
  gap: 8px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.checklist-session-card:hover,
.checklist-session-card:focus-visible,
.checklist-session-card.is-active {
  border-color: rgba(155, 123, 255, 0.45);
  background: rgba(18, 15, 25, 0.96);
  transform: translateY(-1px);
  outline: none;
}

.checklist-session-card-top,
.checklist-session-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.checklist-session-title {
  font-weight: 700;
}

.checklist-session-type,
.checklist-session-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.checklist-main {
  display: grid;
  gap: 18px;
}

.checklist-meta-grid,
.checklist-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.checklist-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.checklist-field {
  display: grid;
  gap: 8px;
}

.checklist-field span {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.checklist-summary-card {
  border-radius: 20px;
  padding: 18px;
  background: rgba(10, 8, 14, 0.78);
  border: 1px solid var(--panel-border);
}

.checklist-summary-card.is-success {
  border-color: rgba(99, 223, 116, 0.34);
}

.checklist-summary-card.is-warning {
  border-color: rgba(217, 178, 77, 0.34);
}

.checklist-summary-card.is-danger {
  border-color: rgba(239, 112, 112, 0.34);
}

.checklist-summary-label,
.checklist-summary-detail {
  margin: 0;
  color: var(--muted);
}

.checklist-summary-card h3 {
  margin: 10px 0 6px;
  font-size: 1.45rem;
}

.checklist-notes-panel,
.checklist-section-panel {
  background: rgba(10, 8, 14, 0.78);
}

.checklist-overall-notes,
.checklist-step-note {
  width: 100%;
  min-height: 110px;
  resize: vertical;
}

.checklist-notes-heading,
.checklist-section-heading {
  align-items: flex-start;
}

.checklist-sections {
  display: grid;
  gap: 16px;
}

.daily-opening-checklist-panel {
  border: 1px solid rgba(139, 139, 168, 0.2);
  background: rgba(10, 8, 14, 0.82);
  border-radius: 18px;
  overflow: hidden;
  padding-bottom: 2px;
  width: min(100%, 648px);
  margin: 12px auto 0;
}

.daily-opening-checklist-panel > summary {
  list-style: none;
  cursor: pointer;
  min-height: 76px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 0.98rem;
}

.daily-opening-checklist-panel > summary::-webkit-details-marker {
  display: none;
}

.daily-opening-checklist-panel > summary::marker,
.daily-opening-checklist-subsection > summary::marker {
  content: "";
}

.daily-opening-checklist-heading {
  margin: 0;
}

.daily-opening-checklist-heading h2 {
  font-size: 0.98rem;
  line-height: 1.2;
}

.daily-opening-checklist-heading .panel-kicker {
  margin-bottom: 2px;
}

.daily-opening-checklist-toggle {
  display: none !important;
}

.daily-opening-checklist-panel:not([open]) .daily-opening-checklist-body {
  display: none;
}

.daily-opening-checklist-body {
  display: grid;
  gap: 14px;
  padding: 0 12px 14px;
  width: min(100%, 648px);
  margin: 0 auto;
}

.daily-opening-checklist-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.daily-opening-checklist-steps {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.daily-opening-checklist-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(139, 139, 168, 0.2);
  background: rgba(17, 14, 23, 0.82);
  border-radius: 16px;
  padding: 13px 14px;
}

.daily-opening-checklist-step-number {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(124, 90, 240, 0.14);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: "IBM Plex Mono", monospace;
}

.daily-opening-checklist-steps li p,
.daily-opening-checklist-watchouts p {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
}

.daily-opening-checklist-subsection {
  margin-top: 12px;
  border: 1px solid rgba(139, 139, 168, 0.2);
  background: rgba(10, 8, 14, 0.82);
  border-radius: 18px;
  overflow: hidden;
  width: min(100%, 648px);
  margin-left: auto;
  margin-right: auto;
}

.daily-opening-checklist-subsection summary {
  list-style: none;
  cursor: pointer;
  min-height: 76px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 0.98rem;
}

.daily-opening-checklist-subsection summary::-webkit-details-marker {
  display: none;
}

.daily-opening-checklist-subsection summary::after {
  content: "+";
  color: var(--accent-strong);
  font-size: 1.2rem;
  line-height: 1;
  margin-left: auto;
}

.daily-opening-checklist-subsection[open] summary::after {
  content: "–";
}

.daily-opening-checklist-subsection-body {
  display: grid;
  gap: 14px;
  padding: 0 12px 14px;
  width: min(100%, 648px);
  margin: 0 auto;
}

.daily-opening-checklist-intake-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.daily-opening-checklist-intake-steps > li {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(139, 139, 168, 0.2);
  background: rgba(17, 14, 23, 0.82);
  border-radius: 16px;
  padding: 13px 14px;
}

.daily-opening-checklist-intake-steps strong {
  color: var(--text);
  display: block;
  line-height: 1.35;
  font-size: 0.95rem;
}

.daily-opening-checklist-intake-steps ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--text);
  line-height: 1.5;
  font-size: 0.93rem;
}

.daily-opening-checklist-watchouts {
  border: 1px solid rgba(217, 178, 77, 0.7);
  background: rgba(54, 40, 8, 0.16);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  gap: 8px;
}

.daily-opening-checklist-watchouts-title {
  padding: 14px 16px 0;
  color: var(--warning);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.daily-opening-checklist-watchouts-body {
  display: grid;
  gap: 8px;
  padding: 0 16px 14px;
}

.daily-opening-checklist-watchouts-body p {
  color: #f4d47b;
  font-size: 0.93rem;
  line-height: 1.45;
}

.daily-opening-checklist-panel > summary::after,
.daily-opening-checklist-subsection > summary::after {
  content: "+";
  color: var(--accent-strong);
  font-size: 1.2rem;
  line-height: 1;
  margin-left: auto;
}

.daily-opening-checklist-panel[open] > summary::after,
.daily-opening-checklist-subsection[open] > summary::after {
  content: "–";
}

.checklist-step-list {
  display: grid;
  gap: 14px;
}

.checklist-step-card {
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 18px;
  background: rgba(17, 14, 23, 0.82);
  display: grid;
  gap: 16px;
}

.checklist-step-card.is-pass {
  border-color: rgba(155, 123, 255, 0.36);
}

.checklist-step-card.is-issue {
  border-color: rgba(217, 178, 77, 0.42);
}

.checklist-step-card.is-locked {
  border-color: rgba(239, 112, 112, 0.42);
}

.checklist-step-card.is-na {
  border-color: rgba(163, 157, 177, 0.26);
  opacity: 0.86;
}

.checklist-step-copy {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.checklist-step-index {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(124, 90, 240, 0.12);
  border: 1px solid rgba(124, 90, 240, 0.22);
  color: var(--accent-strong);
  font-weight: 700;
}

.checklist-step-copy h4 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.checklist-step-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.checklist-step-controls {
  display: grid;
  gap: 12px;
}

.checklist-status-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checklist-status-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
}

.checklist-status-button.is-active[data-status="pass"] {
  border-color: rgba(155, 123, 255, 0.44);
  color: var(--success);
}

.checklist-status-button.is-active[data-status="pending"] {
  border-color: rgba(163, 157, 177, 0.3);
  color: var(--muted);
}

.checklist-status-button.is-active[data-status="issue"] {
  border-color: rgba(217, 178, 77, 0.44);
  color: var(--warning);
}

.checklist-status-button.is-active[data-status="locked"] {
  border-color: rgba(239, 112, 112, 0.44);
  color: var(--danger);
}

.checklist-status-button.is-active[data-status="na"] {
  border-color: rgba(163, 157, 177, 0.38);
  color: var(--muted);
}

@media (max-width: 1180px) {
  .checklist-layout,
  .checklist-meta-grid,
  .checklist-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  html {
    max-width: 100%;
    min-height: 100dvh;
    background: var(--bg);
  }

  body {
    max-width: 100%;
    overflow-x: hidden;
    min-width: 0;
    min-height: 100dvh;
    background: var(--bg);
  }

  .app-shell,
  .app-shell:has(#dashboardPage:not(.is-hidden)),
  .app-shell:has(#spreadsheetPage:not(.is-hidden)),
  .app-shell:has(#expensesPage:not(.is-hidden)) {
    width: 100%;
    padding: 20px 8px 28px;
  }

  .hero.mac-toolbar {
    display: none !important;
  }

  .header-reveal-zone {
    display: none !important;
  }

  .page-logo-banner {
    display: none;
  }

  .mobile-dashboard-logo-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background:
      radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.22), transparent 38%),
      linear-gradient(145deg, rgba(27, 22, 39, 0.9), rgba(9, 7, 13, 0.72));
    box-shadow:
      0 22px 42px -30px rgba(0, 0, 0, 0.82),
      0 16px 34px -26px rgba(124, 90, 240, 0.62),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    cursor: pointer;
  }

  .mobile-dashboard-logo-button img {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .mobile-dashboard-logo-button:hover,
  .mobile-dashboard-logo-button:focus-visible {
    transform: translateY(-1px);
    box-shadow:
      0 26px 46px -30px rgba(0, 0, 0, 0.86),
      0 18px 38px -24px rgba(124, 90, 240, 0.78),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
    outline: none;
  }

  .mac-toolbar-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .mac-toolbar-left,
  .mac-toolbar-right {
    flex: 0 0 auto;
    gap: 8px;
  }

  .mac-toolbar-center {
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px;
    gap: 6px;
  }

  .mac-toolbar-center::-webkit-scrollbar {
    display: none;
  }

  .mac-app-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 16px;
    font-size: 0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.13);
  }

  .hero.mac-toolbar .hero-actions .mac-app-button,
  .hero.mac-toolbar .hero-actions .icon-trigger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
  }

  .hero.mac-toolbar .icon-trigger[data-tooltip]::after {
    display: none !important;
    content: none !important;
  }

  .mac-app-button.compact-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }

  .mac-app-button .menu-trigger-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
  }

  .mac-toolbar .menu-panel {
    top: auto;
    bottom: calc(100% + 12px);
    right: 0;
  }

  .todo-widget {
    top: 16px;
    right: 10px;
    z-index: 70;
  }

  .todo-launcher {
    width: 48px;
    height: 48px;
  }

  .todo-popover {
    width: min(360px, calc(100vw - 20px));
    max-height: min(70vh, 560px);
  }

  .dashboard {
    gap: 14px;
    margin-top: 0;
  }

  .page-logo-banner {
    margin: 12px 0 10px;
  }

  .page-logo-banner img {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  #dashboardPage {
    min-height: calc(100svh - 150px);
    align-content: center;
    justify-content: center;
    padding-top: 0;
  }

  #dashboardPage .dashboard-launcher-panel {
    width: min(100%, 430px);
    margin: 0 auto;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .app-launcher-grid,
  .settings-launcher-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .app-launcher-tile {
    min-height: 104px;
    padding: 12px 8px 10px;
    border-radius: 18px;
    gap: 9px;
  }

  .app-launcher-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .app-launcher-icon .menu-trigger-icon {
    width: 23px;
    height: 23px;
  }

  .app-launcher-emoji {
    font-size: 1.55rem;
  }

  #dashboardPage .dashboard-launcher-panel .app-launcher-tile {
    width: 108px;
    min-height: 122px;
    padding: 4px 2px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #dashboardPage .dashboard-launcher-panel .app-launcher-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
  }

  #dashboardPage .dashboard-launcher-panel .app-launcher-icon .menu-trigger-icon {
    width: 35px;
    height: 35px;
  }

  #dashboardPage .dashboard-launcher-panel .app-launcher-emoji {
    font-size: 1.95rem;
  }

  #dashboardPage .dashboard-launcher-panel .mobile-logout-button {
    display: grid;
  }

  .app-launcher-label {
    font-size: 0.78rem;
  }

  .dashboard-activity-row,
  .dashboard-analysis-row,
  .dashboard-lists-row,
  .dashboard-top-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .panel {
    padding: 14px;
    border-radius: 16px;
  }

  .panel-heading {
    gap: 10px;
    margin-bottom: 14px;
  }

  .stats-grid,
  #statsGrid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .stat-card {
    padding: 14px;
    border-radius: 14px;
    min-width: 0;
  }

  .stat-value {
    font-size: clamp(1.35rem, 8vw, 2rem);
    line-height: 1.05;
  }

  .stat-label,
  .stat-meta {
    overflow-wrap: anywhere;
  }

  .dashboard-calendar-card,
  .dashboard-calendar-shell,
  .dashboard-profit-breakdown-content,
  .dashboard-performance-card {
    grid-template-columns: 1fr;
  }

  .dashboard-calendar-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
  }

  .dashboard-calendar-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .dashboard-calendar-left-section,
  .dashboard-calendar-right-section {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
  }

  .dashboard-calendar-main {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: stretch !important;
    overflow: visible;
  }

  .dashboard-calendar-ui {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 5px !important;
    padding: 5px 2px 2px;
  }

  .dashboard-calendar-weekdays-row,
  .dashboard-calendar-week {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .dashboard-calendar-weeks {
    gap: 3px !important;
  }

  .dashboard-calendar-weekday {
    font-size: 0.58rem !important;
    padding-bottom: 3px !important;
  }

  .dashboard-calendar-day {
    min-height: 38px;
    padding: 4px 3px !important;
    border-radius: 9px !important;
  }

  .dashboard-calendar-day-number {
    top: 4px !important;
    right: 4px !important;
    font-size: 0.62rem !important;
  }

  .dashboard-calendar-day-count {
    font-size: 0.55rem !important;
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }

  .dashboard-calendar-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .dashboard-calendar-summary-card {
    padding: 12px !important;
  }

  .dashboard-calendar-summary-value {
    font-size: clamp(1rem, 5.5vw, 1.35rem) !important;
    overflow-wrap: anywhere;
  }

  .dashboard-performance-chart-wrap,
  .dashboard-profit-breakdown-chart-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .dashboard-performance-chart,
  .dashboard-profit-breakdown-chart {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto;
    display: block;
  }

  .dashboard-performance-card {
    width: 100%;
    min-width: 0;
  }

  .dashboard-performance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 560px);
  }

  .dashboard-performance-metric {
    min-width: 0;
    text-align: center;
  }

  .dashboard-performance-metric-value {
    font-size: clamp(1.05rem, 5.5vw, 1.55rem);
    overflow-wrap: anywhere;
  }

  #metricsYearFilters {
    width: auto !important;
    max-width: 100%;
    align-self: center;
  }

  #metricsScopeFilters {
    width: auto !important;
    max-width: 100%;
    align-self: flex-start;
  }

  .metrics-filters > #metricsScopeFilters {
    align-self: center;
  }

  .dashboard-weekly-metrics-toggle {
    width: auto !important;
    max-width: 100%;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

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

  .inventory-view-drawer .inventory-filter-chips {
    grid-template-columns: 1fr;
  }

  .filter-chip {
    min-width: 0;
    min-height: 42px;
    justify-content: center;
    padding: 9px 8px;
    white-space: normal;
    text-align: center;
  }

  .inventory-view-drawer .filter-chip {
    justify-content: space-between;
    text-align: left;
  }

  .filter-chip-count {
    min-width: 26px;
    padding: 4px 6px;
  }

  .inventory-tools {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    overflow-x: visible;
  }

  #sharedInventoryPanel .panel-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #sharedInventoryPanel .inventory-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  #sharedInventoryPanel .inventory-tools {
    justify-content: flex-start;
  }

  #searchWrap {
    grid-column: auto;
    justify-self: auto;
    margin-left: 0;
    flex: 0 0 auto;
  }

  #openModalButton {
    grid-column: auto;
    justify-self: auto;
    flex: 0 0 auto;
    order: 3;
  }

  #searchWrap {
    order: 1;
  }

  .search-wrap,
  .search-wrap.is-open {
    width: auto;
    max-width: 100%;
  }

  .search-wrap:not(.is-open) {
    width: 44px;
    min-width: 44px;
  }

  .search-wrap:not(.is-open) .search-input {
    width: 0;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .search-wrap.is-open .search-input {
    width: 100%;
  }

  .inventory-tools > button,
  .inventory-tools > .menu-wrap {
    min-width: 0;
  }

  .inventory-table-settings {
    display: none !important;
  }

  #createInvoiceButton {
    min-width: 0;
  }

  /* ── Group-by-model mobile card layout ─────────────────────── */
  .dts-model-groups {
    padding: 8px 0;
    gap: 12px;
  }

  .dts-mg-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .dts-mg-refs {
    margin-left: 0;
    width: 100%;
  }

  /* ── Group-by-model mobile card layout ────────────────────── */

  .dts-mg-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 8px;
  }

  .dts-mg-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
  }

  .dts-mg-card.is-selected {
    border-color: rgba(155, 123, 255, 0.5);
    background: rgba(155, 123, 255, 0.04);
  }

  /* Left stripe — checkbox + expiry color */
  .dts-mg-card-check {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 3px solid transparent;
    background: rgba(128, 128, 128, 0.06);
  }

  .dts-mg-card.is-exp-red    .dts-mg-card-check { border-right-color: #f87171; }
  .dts-mg-card.is-exp-yellow .dts-mg-card-check { border-right-color: #facc15; }
  .dts-mg-card.is-exp-green  .dts-mg-card-check { border-right-color: #4ade80; }

  /* Body — stacked rows of 2 fields each */
  .dts-mg-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .dts-mg-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-border);
  }

  .dts-mg-card-row:last-child { border-bottom: none; }

  .dts-mg-card-field {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    min-width: 0;
  }

  .dts-mg-card-field + .dts-mg-card-field {
    border-left: 1px solid var(--color-border);
  }

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

  .dts-mg-card-field--full + .dts-mg-card-field--full {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .dts-mg-card-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: 3px;
    white-space: nowrap;
  }

  .dts-mg-card-val {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* ─────────────────────────────────────────────────────────── */

  .inventory-view-menu-button {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 18px);
    left: calc(env(safe-area-inset-left) + 10px);
    z-index: 260;
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.82);
  }

  .inventory-view-drawer {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    padding-top: calc(max(22px, env(safe-area-inset-top)) + 18px);
  }

  .inventory-heading {
    flex-direction: column;
    align-items: stretch;
  }

  #inventoryPage .table-wrap,
  #dtsPage .table-wrap {
    overflow: visible;
    border: 0;
  }

  #inventoryPage table,
  #inventoryPage thead,
  #inventoryPage tbody,
  #dtsPage table,
  #dtsPage thead,
  #dtsPage tbody {
    display: block;
  }

  #inventoryPage thead,
  #dtsPage thead {
    display: none;
  }

  #inventoryPage tbody,
  #dtsPage tbody {
    display: grid;
    gap: 12px;
  }

  #inventoryPage tr,
  #dtsPage tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(139, 139, 168, 0.18);
    background: rgba(19, 16, 26, 0.96);
  }

  #inventoryPage td,
  #dtsPage td {
    display: grid;
    gap: 5px;
    padding: 0;
    border: 0;
    text-align: left;
    vertical-align: top;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #inventoryPage td::before,
  #dtsPage td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #inventoryPage td[data-label="SKU"],
  #inventoryPage td[data-label="Model"],
  #inventoryPage td[data-label="Status"],
  #inventoryPage td[data-label="Tracking"],
  #inventoryPage td[data-label="Actions"],
  #inventoryPage .kit-group-main-cell,
  #dtsPage td[data-label="SKU"],
  #dtsPage td[data-label="Invoice #"],
  #dtsPage td[data-label="Model"],
  #dtsPage td[data-label="Tracking to Buyer"],
  #dtsPage td[data-label="Actions"],
  #dtsPage .kit-group-main-cell {
    grid-column: 1 / -1;
  }

  #inventoryPage td[data-label="Actions"],
  #dtsPage td[data-label="Actions"] {
    justify-items: center;
    padding-top: 4px;
  }

  #inventoryPage td[data-label="Actions"]::before,
  #inventoryPage .kit-group-main-cell::before,
  #dtsPage td[data-label="Actions"]::before,
  #dtsPage .kit-group-main-cell::before {
    display: none;
  }

  #inventoryPage .kit-group-row,
  #dtsPage .kit-group-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #inventoryPage .kit-group-spacer,
  #dtsPage .kit-group-spacer {
    display: none;
  }

  #inventoryPage .kit-group-main-cell,
  #dtsPage .kit-group-main-cell,
  #inventoryPage .kit-group-cell,
  #dtsPage .kit-group-cell {
    display: block;
    padding: 0;
    text-align: left;
  }

  #inventoryPage .kit-group-toggle,
  #dtsPage .kit-group-toggle {
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    width: 100%;
  }

  #inventoryPage .kit-group-child-row td:first-child,
  #dtsPage .kit-group-child-row td:first-child {
    padding-left: 0;
  }

  #inventoryPage .kit-group-child-row td:first-child::before,
  #dtsPage .kit-group-child-row td:first-child::before {
    display: none;
  }

  .modal {
    padding: 6px;
    display: grid;
    place-items: center;
  }

  .modal-panel,
  #inventoryModal .modal-panel,
  #itemInfoModal .modal-panel,
  #accountModal .dropdown-manager-panel,
  .dropdown-manager-panel,
  .metrics-panel {
    width: calc(100vw - 12px);
    max-height: min(92dvh, calc(100dvh - 24px));
    border-radius: 16px;
  }

  #itemInfoModal .modal-panel {
    overflow-x: hidden;
    overflow-y: auto;
  }

  #itemInfoModal .item-info-fields {
    max-height: none;
  }

  .invoice-settings-grid,
  .invoice-settings-city-row {
    grid-template-columns: 1fr;
  }

  .invoice-settings-companies-layout {
    grid-template-columns: 1fr;
  }

  .invoice-settings-city-row {
    grid-column: auto;
  }

  #itemInfoModal .item-info-field-inline-actions,
  #itemInfoModal .item-info-editor-actions {
    justify-content: stretch;
  }

  #itemInfoModal .item-info-field-inline-actions .button,
  #itemInfoModal .item-info-editor-actions .button {
    width: 100%;
  }

  #itemInfoModal .spreadsheet-wrap,
  #spreadsheetPage .table-wrap,
  #expensesPage .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .form-actions,
  .inline-editor-actions,
  .item-info-editor-actions,
  .wizard-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .form-actions .button,
  .inline-editor-actions .button,
  .item-info-editor-actions .button,
  .wizard-nav .button {
    width: 100%;
    justify-content: center;
  }

  input,
  select,
  textarea,
  button,
  .button {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  :root {
    --radius: 16px;
  }

  .app-shell,
  .app-shell:has(#dashboardPage:not(.is-hidden)),
  .app-shell:has(#spreadsheetPage:not(.is-hidden)),
  .app-shell:has(#expensesPage:not(.is-hidden)) {
    padding: 14px 6px 140px;
  }

  .hero.mac-toolbar {
    display: flex !important;
    width: calc(100vw - 12px);
    padding: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .mac-toolbar-center .mac-app-button {
    flex-direction: column;
    height: auto;
    min-height: 52px;
    gap: 3px;
    padding: 6px 4px 5px;
  }

  .mac-app-label {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    line-height: 1;
    color: inherit;
    opacity: 0.82;
  }

  .mac-toolbar-grid {
    justify-content: center;
    gap: 5px;
  }

  .mac-toolbar-center {
    flex: 1 1 auto;
    gap: 5px;
    padding: 3px;
  }

  .mac-toolbar-right {
    flex: 0 0 auto;
    gap: 5px;
  }

  .mac-toolbar-left {
    gap: 5px;
  }

  .mac-app-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 13px;
    font-size: 0;
  }

  .hero.mac-toolbar .hero-actions .mac-app-button,
  .hero.mac-toolbar .hero-actions .icon-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .mac-app-button {
    font-size: 1rem;
  }

  .mac-app-button.compact-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex-direction: column;
    padding: 6px 4px 5px;
    gap: 3px;
  }

  .mac-app-button .menu-trigger-icon {
    width: 18px;
    height: 18px;
  }

  .todo-widget {
    top: 12px;
    right: 8px;
  }

  .todo-launcher {
    width: 44px;
    height: 44px;
  }

  .dashboard-calendar-card {
    padding: 12px 10px !important;
  }

  .dashboard-calendar-header,
  .dashboard-calendar-mode-row {
    max-width: 100% !important;
  }

  .dashboard-calendar-month {
    font-size: 1rem;
  }

  .dashboard-calendar-weekdays-row,
  .dashboard-calendar-week {
    gap: 2px !important;
  }

  .dashboard-calendar-day {
    min-height: 34px;
    padding: 3px 2px !important;
    border-radius: 8px !important;
  }

  .dashboard-calendar-day-number {
    font-size: 0.56rem !important;
  }

  .dashboard-calendar-day-count {
    font-size: 0.48rem !important;
  }

  .dashboard-calendar-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-performance-summary {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 12px;
    border-radius: 14px;
  }

  #inventoryForm.wizard-active {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #wizardProgress {
    display: contents;
  }

  #wizardHeaderActions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
  }

  #wizardHeaderActions .button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 9px 12px;
    font-size: 0.92rem;
  }

  #inventoryForm.wizard-active .wizard-step.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #inventoryForm.wizard-active .wizard-step.is-active > .field-grid,
  #inventoryForm.wizard-active .wizard-step.is-active > .field-grid.single-column {
    order: 1;
  }

  #inventoryForm.wizard-active .wizard-step.is-active > #wizardHeaderActions {
    order: 2;
    margin-top: 4px;
  }
  .stats-grid,
  #statsGrid {
    grid-template-columns: 1fr;
  }

  .app-launcher-grid,
  .settings-launcher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-filter-chips {
    grid-template-columns: 1fr;
  }

  #inventoryPage tr,
  #dtsPage tr {
    grid-template-columns: 1fr;
  }

  #inventoryPage td,
  #dtsPage td {
    grid-column: 1 / -1;
  }

  .dashboard-performance-chart,
  .dashboard-profit-breakdown-chart {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #expensesPage .table-wrap {
    display: none;
  }

  #expensesPage .table-toolbar .file-button {
    display: none;
  }

  #expensesForm .wizard-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #expensesForm .wizard-nav .button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
    font-size: 0.92rem;
  }

  .expenses-tile-grid {
    display: grid;
  }

  .dashboard-calendar-ui {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .auth-shell {
    padding: 12px;
    min-height: 100dvh;
    place-items: center;
  }

  .auth-panel {
    padding: 20px;
    margin: auto;
  }

  .auth-logo {
    width: 104px;
    height: 104px;
  }
}

/* ── VA Training Page ─────────────────────────────────────── */

.va-training-page-panel {
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(109, 147, 255, 0.11), transparent 34%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 30%),
    rgba(7, 12, 9, 0.72);
}

.va-training-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 22px 18px;
  margin-bottom: 24px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(7, 12, 9, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.26);
}

.va-training-hero-copy .panel-title {
  margin: 4px 0 6px;
}

.va-training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.va-training-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(7, 12, 9, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  color: inherit;
  font-family: inherit;
}

.va-training-tile:hover {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(7, 12, 9, 0.7);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

.va-training-tile:active {
  transform: translateY(0);
}

.va-training-tile-day {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #7ca3ff);
  opacity: 0.85;
}

.va-training-tile-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text, #eae8ed);
}

.va-training-tile-icon {
  font-size: 1.4rem;
  opacity: 0.55;
  margin-top: 2px;
}

/* VA Training video modal */

.va-training-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.va-training-modal.is-hidden {
  display: none;
}

.va-training-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.va-training-modal-box {
  position: relative;
  z-index: 1;
  width: min(900px, 95vw);
  background: rgba(10, 15, 12, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.va-training-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.va-training-modal-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text, #eae8ed);
}

.va-training-modal-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.va-training-modal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

/* ── Driver Page ─────────────────────────────────────────────────────────────── */
.driver-order-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* ── Driver order card tile ───────────────────────────────────────── */
.driver-order-card {
  background: rgba(19, 20, 28, 0.72);
  border: 1px solid rgba(139, 139, 168, 0.22);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Hero */
.doc-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}
.doc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(155,123,255,0.15);
  color: #9b7bff;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.doc-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-hero-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.doc-order-num {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}
.doc-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.doc-meta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.doc-meta-chip--warn {
  color: #f87171;
  border-color: rgba(248,113,113,0.3);
  background: rgba(248,113,113,0.06);
}

/* Address */
.doc-address {
  font-size: 0.85rem;
  color: var(--text);
  padding: 0 16px 10px;
  line-height: 1.4;
}

/* Items row */
.doc-items-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(155,123,255,0.05);
  border-top: 1px solid rgba(139,139,168,0.15);
  border-bottom: 1px solid rgba(139,139,168,0.15);
}
.doc-item-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.doc-item-pill {
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(155,123,255,0.1);
  color: #bca3f5;
  border: 1px solid rgba(155,123,255,0.2);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-total {
  font-size: 1rem;
  font-weight: 800;
  color: #9b7bff;
  white-space: nowrap;
}

/* Notes */
.doc-notes {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 8px 16px 0;
  line-height: 1.4;
}

/* Actions */
.doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
  align-items: center;
}
.doc-delete-btn {
  color: #f87171 !important;
  margin-left: auto;
}

/* Legacy selectors still used elsewhere */
.driver-order-name { display: block; font-weight: 600; font-size: 1rem; }
.driver-order-time { display: block; font-size: 0.8rem; color: var(--muted); }
.driver-order-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.driver-order-card-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.driver-order-address { font-size: 0.9rem; color: var(--text); margin: 0; }
.driver-order-desc { font-size: 0.875rem; color: var(--muted); margin: 0; }
.driver-order-notes { margin: 0; }
/* ── GHL appointment cards ────────────────────────────────────────── */
.ghl-appt-card {
  border-color: rgba(96, 165, 250, 0.25);
  background: rgba(96, 165, 250, 0.04);
}
.ghl-appt-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #60a5fa;
  padding: 6px 16px 12px;
  opacity: 0.8;
}
/* ── End driver order card tile ───────────────────────────────────── */

.driver-items-section {
  display: flex;
  flex-direction: column;
}

.driver-items-section .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.driver-items-section .table-wrap::-webkit-scrollbar {
  height: 4px;
}

#driverItemsTable {
  min-width: 405px;
}

.driver-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.driver-items-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

#driverItemsTable td input,
#driverItemsTable td select {
  width: 100%;
  min-width: 0;
  padding: 5px 5px;
  font-size: 0.75rem;
  background: rgba(19, 20, 28, 0.6);
  border: 1px solid rgba(139, 139, 168, 0.2);
  border-radius: 6px;
  color: var(--text);
}
#driverItemsTable th,
#driverItemsTable td {
  padding: 4px 3px;
  font-size: 0.75rem;
  white-space: nowrap;
}

#driverItemsTable td input:focus {
  outline: none;
  border-color: rgba(155, 123, 255, 0.5);
}

.driver-date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 4px;
}

.driver-date-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.driver-date-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.driver-date-nav .icon-button {
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px 8px;
  color: var(--accent-strong);
}

#driverPage .panel-heading,
#driverOrderLogModal .panel-heading {
  flex-direction: row;
  align-items: center;
}
#driverPage .panel-heading .modal-actions {
  flex-shrink: 0;
}
#driverPage .todo-tabs {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#driverPage .todo-tab {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  #driverPage .todo-tabs {
    max-width: 100%;
    gap: 3px;
    padding: 3px;
  }
  #driverPage .todo-tab {
    padding: 10px 4px;
    font-size: 0.78rem;
  }
}

/* ── Order Detail redesign ────────────────────────────────────────── */
.odd-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}
.odd-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.odd-status-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 999px;
  padding: 3px 12px;
}
.odd-total {
  font-size: 1.35rem;
  font-weight: 800;
  color: #9b7bff;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.odd-total-old {
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  text-decoration: line-through;
  opacity: 0.55;
}
.odd-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.odd-hero-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(155,123,255,0.18);
  color: #9b7bff;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.odd-hero-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.odd-hero-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}
.odd-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.odd-info-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.odd-info-card--full {
  grid-column: 1 / -1;
}
.odd-info-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.odd-info-value {
  font-size: 0.9rem;
  font-weight: 500;
  word-break: break-word;
}
.odd-info-value.odd-missing {
  color: #f87171;
}
.odd-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odd-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.odd-detail-th {
  padding: 6px 10px;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}
.odd-detail-td {
  padding: 8px 10px;
  white-space: nowrap;
}
.odd-footer {
  padding-top: 4px;
}

/* Items card list (read-only) */
.odd-item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odd-item-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odd-item-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.odd-item-card-model {
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1;
  min-width: 0;
}
.odd-item-card-offer {
  font-weight: 800;
  font-size: 1rem;
  color: #9b7bff;
  white-space: nowrap;
}
.odd-item-card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 12px;
}
.odd-item-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.odd-item-field-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.odd-item-field-value {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Pickup confirmation cards (editable) */
.dc-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dc-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.dc-card--confirmed {
  border-color: rgba(99,223,116,0.45);
  background: rgba(99,223,116,0.04);
}
.dc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dc-card-num {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dc-card-confirm-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.dc-card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dc-card-field--wide {
  grid-column: 1 / -1;
}
.dc-card-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-field-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.dc-card-footer {
  padding-top: 2px;
}
.dc-condition-opt {
  padding: 9px 12px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dc-condition-opt:last-child {
  border-bottom: none;
}
.dc-condition-opt:hover,
.dc-condition-opt.is-selected {
  background: rgba(155,123,255,0.12);
  color: #9b7bff;
}
.dc-date-trigger,
.dc-condition-trigger {
  color: #f4f3f7;
}
.dc-cpm-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dc-cpm-card:hover {
  background: rgba(155,123,255,0.12);
  color: #9b7bff;
  border-color: rgba(155,123,255,0.35);
}
.dc-cpm-card.is-selected {
  background: rgba(155,123,255,0.18);
  color: #9b7bff;
  border-color: #9b7bff;
}
.dc-mpm-opt {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 11px 12px;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.dc-mpm-opt:last-child {
  border-bottom: none;
}
.dc-mpm-opt:hover {
  background: rgba(155,123,255,0.1);
  color: #9b7bff;
}
.dc-mpm-opt.is-selected {
  background: rgba(155,123,255,0.15);
  color: #9b7bff;
  font-weight: 700;
}
/* ── Price picker modal ──────────────────────────────── */
.dc-ppm-panel {
  background: rgba(19,20,28,0.98);
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.dc-ppm-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 16px 0 20px;
}
.dc-ppm-symbol {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--muted);
}
.dc-ppm-value {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  min-width: 2ch;
  text-align: center;
}
.dc-ppm-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.dc-ppm-key {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
  padding: 16px 0;
  cursor: pointer;
  transition: background 0.12s;
  touch-action: manipulation;
}
.dc-ppm-key:hover,
.dc-ppm-key:active {
  background: rgba(255,255,255,0.15);
}
.dc-ppm-key--wide {
  color: var(--muted);
  font-size: 1rem;
}
.dc-ppm-key--back {
  font-size: 1.1rem;
}
.dc-ppm-confirm {
  width: 100%;
  margin-top: 4px;
}
/* ── Change log ─────────────────────────────────────── */
.dc-log-wrap {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.dc-log-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.dc-log-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.dc-log-row {
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dc-log-row:last-child { border-bottom: none; }
.dc-log-row:nth-child(odd) { background: rgba(255,255,255,0.01); }
.dc-log-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dc-log-by {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}
.dc-log-time {
  font-size: 0.68rem;
  color: var(--muted);
}
.dc-log-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dc-log-item {
  font-size: 0.7rem;
  color: var(--muted);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-log-field {
  font-size: 0.7rem;
  color: var(--muted);
}
.dc-log-field::before { content: "·"; margin-right: 4px; opacity: 0.4; }
.dc-log-change {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.dc-log-from {
  font-size: 0.7rem;
  text-decoration: line-through;
  color: var(--muted);
}
.dc-log-arrow {
  font-size: 0.65rem;
  color: var(--muted);
}
.dc-log-to {
  font-size: 0.75rem;
  font-weight: 700;
  color: #9b7bff;
}
.dc-dpm-panel {
  background: rgba(19,20,28,0.98);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  width: min(92vw, 420px);
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.dc-dpm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dc-dpm-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.dc-date-step-label {
  padding: 8px 12px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dc-date-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
}
.dc-date-grid-months {
  grid-template-columns: repeat(2, 1fr);
}
.dc-date-grid-days {
  grid-template-columns: repeat(7, 1fr);
}
.dc-date-opt {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 11px 6px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.dc-date-opt:hover,
.dc-date-opt.is-selected {
  background: rgba(155,123,255,0.15);
  color: #9b7bff;
  font-weight: 700;
}
/* ── End Order Detail redesign ────────────────────────────────────── */

#driverOrderDetailModal .driver-detail-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
#driverOrderDetailModal .driver-detail-table-scroll::-webkit-scrollbar {
  display: none;
}
#driverOrderDetailModal .driver-detail-table-scroll table {
  min-width: 480px;
  width: 100%;
}

#driverPage .driver-date-nav {
  justify-content: center;
  gap: 16px;
}

#driverOrderModal .modal-panel {
  overflow-y: auto;
  max-height: 90vh;
  scrollbar-width: none;
}
#driverOrderModal .modal-panel::-webkit-scrollbar {
  display: none;
}
#driverPettyCashModal .modal-panel {
  overflow-y: visible;
  overflow: visible;
  max-height: none;
}

/* ── Mobile Inventory FAB ────────────────────────────────────────────────────── */
.mobile-inv-fab { display: none; }

/* ── Mobile Dock ─────────────────────────────────────────────────────────── */
.mobile-dock { display: none; }
.mobile-dock[hidden] { display: none !important; }

@media (max-width: 900px) {
  #dashboardOpenInventoryButton,
  #dashboardOpenDtsButton,
  #dashboardOpenExpensesButton,
  #dashboardOpenMetricsButton { display: none; }

  #driverPage .todo-tabs { display: none; }

  /* To-do page heading: left-align on mobile */
  #todoPage .todo-popover-heading,
  #todoPage .todo-popover-heading h2,
  #todoPage .todo-popover-heading .panel-kicker {
    text-align: left;
    align-items: flex-start;
  }

  /* Metrics & activity headings: left-align on mobile */
  .dashboard-activity-panel .panel-heading,
  .dashboard-activity-panel .panel-heading > div,
  .dashboard-activity-panel .panel-heading h2,
  .dashboard-activity-panel .panel-heading .panel-kicker,
  .dashboard-weekly-profit-panel .panel-heading,
  .dashboard-weekly-profit-panel .panel-heading > div,
  .dashboard-weekly-profit-panel .panel-heading h2,
  .dashboard-weekly-profit-panel .panel-heading .panel-kicker,
  .dashboard-weekly-metrics-heading,
  .dashboard-weekly-metrics-heading h2,
  .dashboard-weekly-metrics-heading .panel-kicker,
  .dashboard-analysis-row .panel-heading,
  .dashboard-analysis-row .panel-heading > div,
  .dashboard-analysis-row .panel-heading h2,
  .dashboard-analysis-row .panel-heading .panel-kicker,
  .dashboard-profit-breakdown-panel .panel-heading > div,
  .dashboard-profit-breakdown-panel .panel-heading h2,
  .dashboard-profit-breakdown-panel .panel-heading .panel-kicker {
    text-align: left;
    align-items: flex-start;
  }

  .dashboard-profit-combined-heading {
    flex-direction: column;
    align-items: center;
  }

  .dashboard-profit-combined-heading > div:first-child {
    text-align: left;
    align-self: flex-start;
  }

  .spend-breakdown-controls {
    align-items: center;
    width: 100%;
  }

  /* To-do items: stack assignee dropdown onto second row */
  .todo-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .todo-item-checkmark  { grid-column: 1; grid-row: 1; }
  .todo-item-content    { grid-column: 2; grid-row: 1; }
  .todo-item-priority-group { grid-column: 3; grid-row: 1; }
  .todo-item-delete     { grid-column: 4; grid-row: 1; }
  .todo-item-assignee   {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }
  .todo-item-assignee select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .mobile-dock {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    z-index: 942;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
  }
  .mobile-dock.is-hidden-modal {
    transform: translateY(calc(100% + 14px + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }
  .mobile-dock-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(19, 20, 28, 0.82);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    padding: 8px 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.25);
    width: 100%;
    justify-content: space-evenly;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .mobile-dock-inner::-webkit-scrollbar { display: none; }
  .mobile-dock-inner.is-scrollable .mobile-dock-btn {
    flex: 0 0 calc(25% - 6px);
    min-width: calc(25% - 6px);
  }
  .mobile-dock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    flex: 1;
    min-width: 56px;
    flex-shrink: 0;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
  }
  .mobile-dock-btn:active {
    background: rgba(124, 90, 240, 0.18);
  }
  .mobile-dock-btn.is-active {
    background: rgba(124, 90, 240, 0.18);
  }
  .mobile-dock-btn.is-active .mobile-dock-label {
    color: var(--accent, #4ade80);
  }
  .mobile-dock-btn.is-active .mobile-dock-emoji {
    filter: drop-shadow(0 0 4px rgba(124, 90, 240, 0.5));
    transform: translateZ(0);
  }
  .mobile-dock-emoji {
    font-size: 1.55rem;
    line-height: 1;
    display: block;
  }
  .mobile-dock-label {
    font-size: 0.64rem;
    font-weight: 600;
    color: rgba(240, 237, 247, 0.65);
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 768px) {
  /* Hide the three individual toolbar buttons — FAB replaces them */
  #addToInvoiceButton,
  #createInvoiceButton,
  #openModalButton { display: none !important; }

  .mobile-inv-fab {
    display: block;
    position: fixed;
    bottom: 24px;
    right: 16px;
    z-index: 950;
    transition: opacity 0.28s ease, transform 0.28s ease;
  }

  body.modal-open .mobile-inv-fab {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
  }

  /* Raise FAB above the dock when the dock is visible */
  body:has(#mobileDock:not([hidden])) .mobile-inv-fab {
    bottom: calc(24px + 75px + 14px + env(safe-area-inset-bottom));
  }

  /* Ensure hidden attribute always wins over display:block */
  .mobile-inv-fab[hidden] { display: none !important; }

  .mobile-inv-fab-toggle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent, #4ade80);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    color: #0b0812;
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), background 0.15s;
    position: relative;
    z-index: 1;
  }

  .mobile-inv-fab-toggle:active { transform: scale(0.93); }

  .mobile-inv-fab-icon--close { display: none; }
  .mobile-inv-fab-toggle[aria-expanded="true"] .mobile-inv-fab-icon--plus  { display: none; }
  .mobile-inv-fab-toggle[aria-expanded="true"] .mobile-inv-fab-icon--close { display: block; }
  .mobile-inv-fab-toggle[aria-expanded="true"] { transform: rotate(0deg); background: rgba(155,123,255,0.18); color: var(--accent, #4ade80); box-shadow: 0 0 0 1px var(--accent, #4ade80), 0 4px 18px rgba(0,0,0,0.3); }

  .mobile-inv-fab-menu {
    position: absolute;
    bottom: 62px;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .mobile-inv-fab-menu:not([hidden]) {
    display: flex;
  }

  .mobile-inv-fab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 28px;
    background: var(--panel-bg, #111);
    border: 1px solid var(--color-border);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
    transition: background 0.12s, border-color 0.12s;
  }

  .mobile-inv-fab-item:active { background: var(--color-hover-bg); }

  .mobile-inv-fab-item--primary {
    background: rgba(155, 123, 255, 0.12);
    border-color: rgba(155, 123, 255, 0.4);
    color: #4ade80;
  }

  .mobile-inv-fab-item--primary:active { background: rgba(155, 123, 255, 0.22); }

  /* Backdrop to close menu on outside tap */
  .mobile-inv-fab-backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }
  .mobile-inv-fab-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
/* ── Driver Petty Cash ───────────────────────────────────────────────────────── */
.driver-petty-cash-bar {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
  box-sizing: border-box;
  width: 100%;
}

.driver-petty-cash-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(19, 20, 28, 0.78);
  border: 1px solid rgba(139, 139, 168, 0.3);
  border-radius: 20px;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.driver-petty-cash-btn:hover,
.driver-petty-cash-btn:focus-visible {
  border-color: rgba(99, 223, 116, 0.55);
  background: rgba(99, 223, 116, 0.07);
  outline: none;
}
.driver-petty-cash-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.driver-petty-cash-amount {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.driver-petty-cash-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(139, 139, 168, 0.18);
}
.driver-petty-cash-balance-label {
  font-size: 0.88rem;
  color: var(--text-muted);
}
.driver-petty-cash-balance-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.driver-petty-cash-error {
  font-size: 0.85rem;
  color: #f87171;
  text-align: center;
}
.log-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.log-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.log-pagination-controls .icon-button {
  font-size: 1.1rem;
  padding: 2px 8px;
  line-height: 1;
}
.log-pagination-controls .icon-button:disabled {
  opacity: 0.3;
  cursor: default;
}
.log-page-size-select {
  background: var(--surface, rgba(19,20,28,0.6));
  border: 1px solid rgba(139,139,168,0.2);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 4px 6px;
  width: auto;
}
.log-page-num-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(139,139,168,0.3);
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.log-page-num-btn:hover {
  background: rgba(139,139,168,0.15);
  border-color: rgba(139,139,168,0.6);
}
.log-page-num-btn.active {
  background: var(--accent, #7c5af0);
  border-color: var(--accent, #7c5af0);
  color: #000;
  font-weight: 700;
}
.log-page-ellipsis {
  color: var(--muted);
  padding: 0 2px;
  font-size: 0.85rem;
  line-height: 28px;
}

.petty-cash-log-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(139, 139, 168, 0.18);
  padding-top: 12px;
}
.petty-cash-log-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
}
.petty-cash-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.petty-cash-log-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.petty-cash-log-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  font-size: 0.83rem;
  padding: 5px 0;
  border-bottom: 1px solid rgba(139, 139, 168, 0.1);
}
.petty-cash-log-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.petty-cash-log-desc {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.petty-cash-log-date { color: var(--text-muted); font-size: 0.76rem; }
.petty-cash-log-amount { font-weight: 600; white-space: nowrap; }
.petty-cash-log-add { color: #4ade80; }
.petty-cash-log-deduct { color: #f87171; }
.petty-cash-log-balance { color: var(--text); font-weight: 500; white-space: nowrap; }
.petty-cash-log-delete-btn {
  background: none;
  border: none;
  color: rgba(248, 113, 113, 0.5);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s;
}
.petty-cash-log-delete-btn:hover { color: #f87171; }
#pettyCashDeleteModal .modal-panel {
  overflow-y: visible;
  overflow: visible;
  max-height: none;
}

/* ── Driver Date/Time Picker ─────────────────────────────────────────────────── */
.driver-dt-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: rgba(19, 20, 28, 0.78);
  border: 1px solid rgba(139, 139, 168, 0.24);
  border-radius: 16px;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  margin-top: 4px;
}
.driver-dt-trigger:hover,
.driver-dt-trigger:focus-visible {
  border-color: rgba(155, 123, 255, 0.5);
  outline: none;
}
.driver-dt-trigger-icon { font-size: 1rem; }

.expiration-months-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.driver-dtp {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: rgba(9, 7, 15, 0.98);
  border: 1px solid rgba(139, 139, 168, 0.28);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.driver-dtp.is-hidden { display: none; }

.driver-dtp-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.driver-dtp-month-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.driver-dtp-cal-nav .icon-button {
  font-size: 1.4rem;
  color: var(--accent-strong);
  padding: 2px 6px;
}

.driver-dtp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0 2px;
}

.driver-dtp-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.driver-dtp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.82rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text);
  transition: background 120ms ease;
}
.driver-dtp-day:hover { background: rgba(155, 123, 255, 0.15); }
.driver-dtp-day.is-today { color: var(--accent-strong); font-weight: 700; }
.driver-dtp-day.is-selected { background: var(--accent-strong); color: #0f0a1a; font-weight: 700; }
.driver-dtp-day.is-other-month { color: rgba(255,255,255,0.2); cursor: default; }
.driver-dtp-day.is-other-month:hover { background: transparent; }

.driver-dtp-time-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 4px 0 0;
}
.driver-dtp-time-label {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: var(--muted);
  gap: 3px;
  flex: 1;
}
.driver-dtp-time-label select {
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(139, 139, 168, 0.24);
  background: rgba(19, 20, 28, 0.78);
  color: var(--text);
  font-size: 0.9rem;
  width: 100%;
}
.driver-dtp-time-sep {
  font-size: 1.2rem;
  color: var(--muted);
  padding-bottom: 8px;
}
.driver-dtp-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.driver-address-link {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.driver-address-link:hover {
  opacity: 0.8;
}

/* Prevent iOS auto-zoom on input focus (triggered when font-size < 16px) */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Upload progress toast */
#uploadProgressToast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(19,20,28,0.96);
  border: 1px solid rgba(155,123,255,0.3);
  border-radius: 12px;
  padding: 12px 18px;
  min-width: 240px;
  max-width: 90vw;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  transition: opacity 0.3s ease;
}
#uploadProgressToast.hidden { opacity: 0; pointer-events: none; }
.upt-label { font-size: 0.85rem; color: var(--text); font-weight: 600; }
.upt-bar-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.upt-bar-fill { height: 100%; border-radius: 999px; background: #9b7bff; width: 0%; transition: width 0.2s ease; }
.upt-bar-fill.error { background: #f87171; }
.upt-status { font-size: 0.75rem; color: var(--muted); }

/* ── Resources tab bar ─────────────────────────────────────────────────── */
.resources-tab-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 12px 2px;
  margin: 0 auto;
  max-width: 100%;
}
.resources-tab-bar::-webkit-scrollbar { display: none; }
.resources-tab-bar.is-hidden {
  display: none;
}
.resources-tab-bar .resources-tab {
  flex: 0 0 auto;
  min-width: 0;
  min-height: auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(204, 200, 213, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}
.resources-tab-bar .resources-tab:hover,
.resources-tab-bar .resources-tab:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}
.resources-tab-bar .resources-tab.is-active {
  background: rgba(124, 90, 240, 0.2);
  color: #f0eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Auth loading overlay ──────────────────────────────────────────────── */
.auth-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0912;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.auth-loading-overlay[hidden] { display: none !important; }
.auth-loading-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}
.auth-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.auth-loading-logo-wrap {
  width: 108px;
  height: 108px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,0.18), transparent 40%),
    linear-gradient(145deg, rgba(27, 22, 39,0.9), rgba(9, 7, 13,0.72));
  box-shadow:
    0 0 0 1px rgba(155,123,255,0.18),
    0 22px 48px -24px rgba(0,0,0,0.9),
    0 0 40px -8px rgba(124,90,240,0.35);
  animation: auth-logo-pulse 2.2s ease-in-out infinite;
}
.auth-loading-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
@keyframes auth-logo-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 1px rgba(155,123,255,0.18), 0 22px 48px -24px rgba(0,0,0,0.9), 0 0 40px -8px rgba(124,90,240,0.35); }
  50%       { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(155,123,255,0.35), 0 22px 48px -24px rgba(0,0,0,0.9), 0 0 60px -4px rgba(124,90,240,0.55); }
}
.auth-loading-dots {
  display: flex;
  gap: 8px;
}
.auth-loading-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(155,123,255,0.7);
  animation: auth-dot-bounce 1.2s ease-in-out infinite;
}
.auth-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.auth-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes auth-dot-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1.15); opacity: 1; }
}
.auth-loading-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(204, 200, 213,0.45);
  margin: 0;
}


/* ── Price Guidelines Page ───────────────────────────────────────────────── */
.pg-shell {
  max-width: 1372px;
  margin: 0 auto;
  padding: 20px 14px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.pg-header {
  text-align: center;
  padding: 4px 0 2px;
}
.pg-title {
  margin: 0 0 2px;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.pg-subtitle {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-rule-banner {
  display: inline-block;
  background: var(--warning);
  color: #1a1200;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 24px;
  border-radius: 5px;
}

/* Three columns */
.pg-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 12px;
}
.pg-categories .pg-category-teal {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .pg-categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pg-categories { grid-template-columns: 1fr; }
}

.pg-category {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.07);
}

/* Colored top header stripe per category */
.pg-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}
.pg-category-green .pg-cat-header  { background: #251a40; }
.pg-category-blue  .pg-cat-header  { background: #122355; }
.pg-category-purple .pg-cat-header { background: #281650; }

.pg-cat-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 900;
  flex-shrink: 0;
  color: #fff;
}
.pg-category-green  .pg-cat-num  { background: #7c5af0; }
.pg-category-blue   .pg-cat-num  { background: #2e7cf6; }
.pg-category-purple .pg-cat-num  { background: #7c4fff; }

.pg-cat-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

/* "USE MERCURY PRICING" method badge */
.pg-cat-method {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.pg-category-green  .pg-cat-method { background: rgba(124,90,240,0.18);  color: #9b7bff; }
.pg-category-blue   .pg-cat-method { background: rgba(46,124,246,0.18); color: #7ab2ff; }
.pg-category-purple .pg-cat-method { background: rgba(124,79,255,0.18); color: #b49fff; }

/* Body content */
.pg-cat-body {
  background: #100d16;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Offer block: label + big value */
.pg-offer-block {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pg-offer-block:last-child { border-bottom: none; padding-bottom: 0; }
.pg-offer-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.pg-offer-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.pg-offer-icon-tag    { background: rgba(124,90,240,0.2);  }
.pg-offer-icon-shield { background: rgba(46,124,246,0.2); }
.pg-offer-icon-dollar { background: rgba(124,79,255,0.2); }
.pg-offer-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.pg-offer-value {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
}
.pg-offer-value-sm {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.pg-offer-never {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Large deals callout */
.pg-large-deals {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px 10px;
}
.pg-large-deals-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 3px;
}
.pg-large-deals-value {
  font-size: 0.82rem;
  color: var(--text);
}

/* Steps (Everything Else) */
.pg-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
}
.pg-step:last-child { border-bottom: none; padding-bottom: 0; }
.pg-step-num {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b49fff;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 40px;
}

/* Example boxes — sit inside the category, bottom */
.pg-example {
  background: rgba(0,0,0,0.35);
  padding: 10px 14px 12px;
}
.pg-example-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 5px;
}
.pg-category-green  .pg-example-badge { background: #7c5af0; color: #090610; }
.pg-category-blue   .pg-example-badge { background: #2e7cf6; color: #fff; }
.pg-category-purple .pg-example-badge { background: #7c4fff; color: #fff; }

.pg-example-ref {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.pg-example-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pg-example-arrow { color: var(--muted); font-size: 1.2rem; }
.pg-example-chip {
  flex: 1;
  border-radius: 7px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
.pg-category-green  .pg-example-chip { background: #251a40; }
.pg-category-blue   .pg-example-chip { background: #122355; }
.pg-example-chip-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.pg-example-chip-val {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}
.pg-example-note {
  margin: 6px 0 0;
  font-size: 0.62rem;
  color: var(--muted);
  text-align: center;
}

/* Everything Else example — horizontal flow */
.pg-example-flow {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.pg-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 46px;
  text-align: center;
}
.pg-flow-num {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(124,79,255,0.35);
  color: #b49fff;
  font-size: 0.58rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-flow-label {
  font-size: 0.55rem;
  color: var(--muted);
  line-height: 1.2;
}
.pg-flow-step strong { font-size: 0.8rem; font-weight: 900; color: var(--text); }
.pg-flow-step-accent strong { color: #b49fff; }
.pg-flow-sublabel { font-size: 0.55rem; color: var(--muted); }
.pg-flow-arrow { color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }
.pg-example-formula {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}
.pg-example-formula strong { color: #b49fff; }

/* Bottom row: negotiation + cheat sheet */
.pg-category-amber .pg-cat-header  { background: #3a2a00; }
.pg-category-amber .pg-cat-num     { background: #d97706; }
.pg-category-amber .pg-cat-method  { background: rgba(251,191,36,0.15); color: #fbbf24; }
.pg-category-amber .pg-cat-body    { background: #1a1200; }
.pg-category-teal  .pg-cat-header  { background: #012a2a; }
.pg-category-teal  .pg-cat-num     { background: #0d9488; }
.pg-category-teal  .pg-cat-method  { background: rgba(13,148,136,0.15); color: #2dd4bf; }
.pg-category-teal  .pg-cat-body    { background: #001818; }
.pg-category-teal .pg-cat-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.pg-nib-section {
  padding: 12px 14px;
  flex: 1 1 180px;
}
.pg-nib-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2dd4bf;
  margin-bottom: 8px;
}
.pg-nib-list {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-nib-list li {
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.4;
}
.pg-nib-section-profit,
.pg-nib-section-rules {
  border-top: 1px solid rgba(13,148,136,0.25);
}
.pg-nib-rules-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-nib-rules-list li {
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.4;
}
.pg-nib-pricing {
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.5;
}
.pg-nib-never {
  font-weight: 700;
  color: #f87171;
}
.pg-nib-example {
  display: block;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.pg-nib-profit-range {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2dd4bf;
}
.pg-nib-profit-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.pg-pm-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pg-pm-thead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 2px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(251,191,36,0.6);
}
.pg-pm-thead span:last-child { text-align: right; }
.pg-pm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem;
}
.pg-pm-row:last-child { border-bottom: none; }
.pg-pm-device {
  color: var(--text);
}
.pg-pm-amount {
  font-weight: 800;
  color: #fbbf24;
  text-align: right;
}
.pg-bottom {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .pg-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pg-bottom { grid-template-columns: 1fr; }
}
/* Offer Calculator */
.pg-calc {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.pg-calc-header {
  padding: 10px 14px;
  background: #0f1f1a;
  border-bottom: 1px solid var(--color-border);
}
.pg-calc-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.pg-calc-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pg-calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-calc-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.pg-calc-select,
.pg-calc-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg, #0a0a0a);
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: inherit;
}
.pg-calc-result {
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pg-calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.pg-calc-result-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.pg-calc-result-val {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pg-calc-result-val.is-start { color: #4ade80; }
.pg-calc-result-val.is-max   { color: #fb923c; }
.pg-calc-result-val.is-warn  { color: #f87171; }
.pg-calc-note {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.pg-calc-increments {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.pg-calc-increments-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.pg-calc-increments-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-calc-inc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, #4ade80 calc(var(--inc-pct, 0%) * 0.12), transparent);
  border: 1px solid color-mix(in srgb, #4ade80 calc(var(--inc-pct, 0%) * 0.25), var(--color-border));
}
.pg-calc-inc-step {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}
.pg-calc-inc-val {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, #4ade80 var(--inc-pct, 0%), #fb923c);
}

.pg-section-title {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.pg-neg-rules {
  background: #100d16;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pg-neg-rule {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.35;
}
.pg-neg-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  flex-shrink: 0;
}
.pg-neg-icon-green  { background: #7c5af0; color: #090610; }
.pg-neg-icon-yellow { background: var(--warning); color: #1a1200; }
.pg-neg-icon-red    { background: var(--danger);  color: #fff; }

.pg-neg-warn {
  background: rgba(239,112,112,0.08);
  border: 1px solid rgba(239,112,112,0.22);
  border-radius: 8px;
  padding: 10px 12px;
}
.pg-neg-warn-title {
  margin: 0 0 5px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pg-neg-warn ul {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pg-neg-warn li { font-size: 0.76rem; color: var(--text); }

/* Cheat sheet */
.pg-cheat-sheet {
  background: #100d16;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px;
  overflow-x: auto;
}
.pg-cheat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.pg-cheat-table th {
  text-align: center;
  padding: 5px 10px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pg-cheat-table td {
  padding: 9px 10px;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
  text-align: center;
}
.pg-cheat-table tr:last-child td { border-bottom: none; }
.pg-cheat-cat {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pg-cheat-cat-green  { background: rgba(124,90,240,0.18);  color: #9b7bff; }
.pg-cheat-cat-blue   { background: rgba(46,124,246,0.18); color: #7ab2ff; }
.pg-cheat-cat-purple { background: rgba(124,79,255,0.18); color: #b49fff; }
.pg-cheat-cat-teal   { background: rgba(13,148,136,0.18);  color: #2dd4bf; }
.pg-cheat-val-green  { color: #9b7bff; font-weight: 800; }
.pg-cheat-val-blue   { color: #7ab2ff; font-weight: 800; }
.pg-cheat-val-big { font-size: 1.1rem; font-weight: 900; }

/* Reminder strip */
.pg-reminder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #1a1200;
  border: 1px solid rgba(217,178,77,0.3);
  border-radius: 10px;
  padding: 12px 20px;
}
.pg-reminder-icon { font-size: 1rem; }
.pg-reminder-label {
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--warning);
}
.pg-reminder-item {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}
.pg-reminder-sep { color: rgba(217,178,77,0.4); }

/* ── Negotiation SOP Page ────────────────────────────────────────────────── */
#negSopPage { padding: 0; overflow: hidden; }
.ns-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}
/* Sidebar */
.ns-nav {
  width: 200px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.ns-nav-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 6px;
}
.ns-nav-btn {
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.3;
}
.ns-nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.ns-nav-btn.is-active { background: rgba(155,123,255,0.12); color: #9b7bff; font-weight: 600; }
/* Content area */
.ns-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 32px 36px 48px;
}
.ns-section { display: none; }
.ns-section.is-active { display: block; }
.ns-heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}
.ns-subheading {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 28px;
  line-height: 1.5;
}
.ns-subheading-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.ns-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 14px;
}
/* Quote blocks */
.ns-quote {
  font-size: 0.92rem;
  font-style: italic;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid rgba(155,123,255,0.5);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  line-height: 1.55;
  color: var(--text);
}
.ns-quote-sm {
  font-size: 0.84rem;
  font-style: italic;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid rgba(255,255,255,0.15);
  border-radius: 0 6px 6px 0;
  padding: 7px 12px;
  line-height: 1.5;
  color: var(--text);
}
.ns-q-soft   .ns-quote-sm, .ns-q-soft   { border-left-color: #9b7bff; }
.ns-q-medium .ns-quote-sm, .ns-q-medium { border-left-color: #60a5fa; }
.ns-q-hard   .ns-quote-sm, .ns-q-hard   { border-left-color: #f87171; }
.ns-aside {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: normal;
}
/* Tags */
.ns-tag { display: inline-block; font-size: 0.65rem; font-weight: 700; font-style: normal; padding: 1px 7px; border-radius: 4px; margin-left: 8px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.05em; }
.ns-tag-soft   { background: rgba(155,123,255,0.2);  color: #9b7bff; }
.ns-tag-medium { background: rgba(96,165,250,0.2);  color: #60a5fa; }
.ns-tag-hard   { background: rgba(248,113,113,0.2); color: #f87171; }
/* Customer levels */
.ns-level-block {
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.ns-level-block.ns-level-1 { background: rgba(155,123,255,0.06);  border-color: rgba(155,123,255,0.18); }
.ns-level-block.ns-level-2 { background: rgba(250,204,21,0.06);  border-color: rgba(250,204,21,0.18); }
.ns-level-block.ns-level-3 { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.18); }
.ns-level-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ns-level-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ns-level-1 .ns-level-badge { background: rgba(155,123,255,0.2);  color: #9b7bff; }
.ns-level-2 .ns-level-badge { background: rgba(250,204,21,0.2);  color: #facc15; }
.ns-level-3 .ns-level-badge { background: rgba(248,113,113,0.2); color: #f87171; }
.ns-level-vibe { font-size: 0.85rem; color: var(--muted); }
.ns-level-signs-label, .ns-level-response-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 12px 0 7px;
}
.ns-level-sign {
  font-size: 0.84rem;
  font-style: italic;
  color: var(--muted);
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  margin-bottom: 5px;
}
.ns-level-tip {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}
/* Steps (Framework) */
.ns-steps { display: flex; flex-direction: column; gap: 0; }
.ns-step {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ns-step:last-child { border-bottom: none; }
.ns-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(155,123,255,0.15);
  color: #9b7bff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.ns-step-body { flex: 1; min-width: 0; }
.ns-step-name { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.ns-step-desc { font-size: 0.87rem; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.ns-step-examples { display: flex; flex-direction: column; gap: 7px; }
/* Scripts list */
.ns-script-list { display: flex; flex-direction: column; gap: 12px; }
.ns-script-item { display: flex; align-items: flex-start; gap: 14px; }
.ns-script-num {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 26px;
  padding-top: 12px;
}
/* Offer blocks */
.ns-offer-blocks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.ns-offer-block {
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid transparent;
}
.ns-offer-soft   { background: rgba(155,123,255,0.08);  border-color: rgba(155,123,255,0.22); }
.ns-offer-medium { background: rgba(96,165,250,0.08);  border-color: rgba(96,165,250,0.22); }
.ns-offer-hard   { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.22); }
.ns-offer-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ns-offer-soft .ns-offer-label   { color: #9b7bff; }
.ns-offer-medium .ns-offer-label { color: #60a5fa; }
.ns-offer-hard .ns-offer-label   { color: #f87171; }
.ns-offer-script { font-size: 1rem; font-style: italic; margin-bottom: 6px; }
.ns-offer-note { font-size: 0.82rem; color: var(--muted); }
.ns-rule-box {
  background: rgba(217,178,77,0.07);
  border: 1px solid rgba(217,178,77,0.22);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}
.ns-rule-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #d9b24d; margin-bottom: 10px; }
/* Pull backs */
.ns-pullback-list { display: flex; flex-direction: column; gap: 10px; }
.ns-pullback-item { display: flex; align-items: flex-start; gap: 14px; }
.ns-pb-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 10px;
  white-space: nowrap;
}
.ns-pb-soft    { background: rgba(155,123,255,0.15);  color: #9b7bff; }
.ns-pb-medium  { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.ns-pb-hard    { background: rgba(248,113,113,0.15); color: #f87171; }
.ns-pb-neutral { background: rgba(255,255,255,0.08); color: var(--muted); }
/* Mindset list */
.ns-mindset-list { display: flex; flex-direction: column; gap: 12px; }
.ns-mindset-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ns-mindset-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(155,123,255,0.15);
  color: #9b7bff;
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Phase timeline */
.ns-phase-timeline { display: flex; flex-direction: column; gap: 14px; }
.ns-pt-item {
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid transparent;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ns-pt-blue  { background: rgba(96,165,250,0.07);  border-color: rgba(96,165,250,0.2); }
.ns-pt-orange { background: rgba(217,119,6,0.08);  border-color: rgba(217,119,6,0.22); }
.ns-pt-dark  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.ns-pt-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 2px;
  white-space: nowrap;
}
.ns-pt-blue .ns-pt-badge   { background: rgba(96,165,250,0.2);  color: #60a5fa; }
.ns-pt-orange .ns-pt-badge { background: rgba(251,146,60,0.2);   color: #fb923c; }
.ns-pt-dark .ns-pt-badge   { background: rgba(255,255,255,0.1);  color: var(--muted); }
.ns-pt-body { flex: 1; min-width: 0; }
.ns-pt-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 5px; }
.ns-pt-desc { font-size: 0.86rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.ns-pt-examples { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.ns-pt-tip {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  margin-top: 4px;
}
/* Responsive */
@media (max-width: 680px) {
  .ns-nav { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 10px 8px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .ns-layout { flex-direction: column; }
  .ns-nav-title { display: none; }
  .ns-nav-btn { width: auto; font-size: 0.78rem; padding: 6px 10px; }
  .ns-content { padding: 20px 16px 40px; }
}

/* ── Glossary Page ───────────────────────────────────────────────────────── */
.glos-shell {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.glos-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.glos-title {
  margin: 0 0 2px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}
.glos-subtitle {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.glos-search {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 8px 14px;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.glos-search:focus { border-color: var(--accent); }
.glos-search::placeholder { color: var(--muted); }

/* Filter pills */
.glos-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.glos-filter {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.glos-filter:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.glos-filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #090610;
}

/* Card grid */
.glos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.glos-card {
  background: rgba(16, 13, 22,0.75);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, transform 0.12s;
}
.glos-card:hover {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.glos-card.is-hidden { display: none; }

/* Category badge on card */
.glos-card-cat {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  align-self: flex-start;
}
.glos-cat-lead-flow  { background: rgba(155,123,255,0.12);  color: #9b7bff; }
.glos-cat-crm        { background: rgba(46,124,246,0.12);  color: #7ab2ff; }
.glos-cat-pricing    { background: rgba(217,178,77,0.12);  color: #d9b24d; }
.glos-cat-dts        { background: rgba(239,112,112,0.12); color: #ef7070; }
.glos-cat-operations { background: rgba(124,79,255,0.12);  color: #b49fff; }
.glos-cat-core       { background: rgba(255,255,255,0.07); color: var(--muted); }

.glos-card-term {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.glos-card-def {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.glos-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 40px 0;
}

/* ── Training Page ───────────────────────────────────────────────────────── */
.trn-shell {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trn-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.trn-title {
  margin: 0 0 2px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}
.trn-subtitle {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.trn-meta-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  padding: 5px 14px;
}

/* Card grid */
.trn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.trn-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(16, 13, 22,0.75);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s, transform 0.12s;
  padding: 0;
}
.trn-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.trn-card:active { transform: translateY(0); }

.trn-card-top {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.trn-day-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(124,90,240,0.14);
  color: var(--accent-strong);
}

.trn-card-body {
  padding: 14px 16px;
  flex: 1;
}
.trn-card-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.trn-card-footer {
  padding: 10px 16px 14px;
}
.trn-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

.pg-neg-icon-blue { background: rgba(46,124,246,0.25); color: #7ab2ff; }

.dts-source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.dts-source-link:hover { color: var(--accent); }

/* ── Device Intake Checklist Wizard ──────────────────────────────────────── */
.device-intake-panel {
  max-width: 520px;
  width: 100%;
}
.device-intake-body {
  padding: 8px 0 4px;
}
.device-intake-prompt {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.device-intake-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.device-intake-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: var(--color-panel-bg);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
  text-align: center;
  line-height: 1.3;
}
.device-intake-choice:hover {
  border-color: var(--accent);
  background: var(--color-hover-bg, rgba(128,128,128,0.07));
  box-shadow: 0 0 0 1px var(--accent);
}
.device-intake-choice > span {
  display: block;
  font-size: 0.82rem;
  margin-top: 4px;
}
.intake-device-logo {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}
.intake-device-logo--wide {
  width: 80px;
  height: 20px;
}
.intake-draft-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intake-draft-logo .intake-device-logo {
  width: 22px;
  height: 22px;
}
.device-intake-storage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.device-intake-storage-choice {
  padding: 18px 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.device-intake-storage-choice.is-selected {
  border-color: #4ade80;
  background: rgba(155,123,255,0.08);
  color: #4ade80;
  box-shadow: 0 0 0 1px #4ade8040;
}
.device-intake-imei-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.device-intake-imei-input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-panel-bg);
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
}
.device-intake-imei-input:focus {
  outline: none;
  border-color: var(--accent);
}
.device-intake-scan-btn {
  flex-shrink: 0;
}
.device-intake-summary-imei {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-panel-bg);
}
.device-intake-summary-imei strong {
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
}
.device-intake-model-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.device-intake-model-choice {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--color-border);
  background: var(--color-panel-bg);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s;
}
.device-intake-model-choice:hover {
  border-color: var(--accent);
  background: var(--color-hover-bg, rgba(128,128,128,0.06));
}
.device-intake-model-choice.is-selected {
  border-color: #4ade80;
  background: rgba(155,123,255,0.08);
  color: #4ade80;
  font-weight: 600;
}
.device-intake-progress-wrap {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.device-intake-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.device-intake-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.device-intake-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
  user-select: none;
}
.device-intake-item:hover {
  border-color: var(--accent);
  background: var(--color-hover-bg, rgba(128,128,128,0.06));
}
.device-intake-item.is-checked {
  border-color: #4ade80;
  background: rgba(155,123,255,0.06);
}
.device-intake-item input[type="checkbox"] {
  display: none;
}
.device-intake-item-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.3);
  margin-top: 1px;
  transition: background 0.14s, border-color 0.14s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-intake-item.is-checked .device-intake-item-check {
  background: #4ade80;
  border-color: #4ade80;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}
.device-intake-item-label {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text);
}
.device-intake-item.is-checked .device-intake-item-label {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(155,123,255,0.5);
}
.device-intake-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}
.device-intake-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  transition: background 0.13s;
}
.device-intake-quick-link:hover {
  background: rgba(155,123,255,0.08);
}
.device-intake-nav-summary {
  flex-wrap: wrap;
  gap: 8px;
}
/* Drafts row on step 0 */
.intake-drafts-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: var(--text-1, #fff);
  transition: background 0.15s;
}
.intake-drafts-row:hover { background: var(--surface-3, rgba(255,255,255,0.08)); }
.intake-drafts-row-label { flex: 1; font-weight: 500; }
.intake-drafts-row-count {
  background: var(--accent, #f59e0b);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 7px;
  line-height: 18px;
}
.intake-drafts-row-chevron { color: var(--text-3, #888); font-size: 18px; line-height: 1; }
/* Drafts list view */
.intake-drafts-list-wrap { display: flex; flex-direction: column; gap: 0; }
.intake-drafts-back { align-self: flex-start; margin-bottom: 14px; }
.intake-draft-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.intake-draft-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
}
.intake-draft-emoji { font-size: 20px; flex-shrink: 0; }
.intake-draft-logo { flex-shrink: 0; color: var(--color-text-muted, #888); }
.intake-draft-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.intake-draft-label { font-size: 14px; font-weight: 600; color: var(--text-1, #fff); }
.intake-draft-sub { font-size: 12px; color: var(--text-2, #aaa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intake-draft-date { font-size: 11px; color: var(--text-3, #777); }
.intake-draft-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.intake-draft-delete {
  background: none;
  border: none;
  color: var(--text-3, #666);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}
.intake-draft-delete:hover { color: var(--danger, #ef4444); background: rgba(239,68,68,0.1); }
/* Option tile grid (checklist questions) */
.device-intake-option-grid {
  display: grid;
  gap: 10px;
}
.device-intake-option {
  padding: 16px 10px;
  font-size: 0.9rem;
  font-weight: 500;
  flex-direction: row;
  gap: 0;
}
.device-intake-option.is-selected.is-good {
  border-color: #4ade80;
  background: rgba(74,222,128,0.10);
  color: #4ade80;
  box-shadow: 0 0 0 1px #4ade8040;
}
.device-intake-option.is-selected.is-warn {
  border-color: #facc15;
  background: rgba(250,204,21,0.09);
  color: #facc15;
  box-shadow: 0 0 0 1px #facc1540;
}
.device-intake-option.is-selected.is-bad {
  border-color: #f87171;
  background: rgba(248,113,113,0.09);
  color: #f87171;
  box-shadow: 0 0 0 1px #f8717140;
}
.device-intake-option.is-selected.is-neutral {
  border-color: var(--color-text-muted);
  background: rgba(128,128,128,0.10);
  color: var(--color-text-muted);
}
.device-intake-summary-device-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 4px;
}
.device-intake-summary-device-row > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.8em;
  background: var(--color-border, rgba(255,255,255,0.15));
  margin: 0 10px;
  vertical-align: middle;
}
.device-intake-summary-model {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
.device-intake-summary-storage {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.device-intake-summary-storage strong {
  color: var(--color-text);
}
/* Summary */
.device-intake-summary-pass {
  padding: 14px 16px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4ade80;
  margin-bottom: 12px;
}
.device-intake-summary-warn {
  margin-bottom: 10px;
}
.device-intake-summary-warn-label {
  font-weight: 600;
  color: #facc15;
  margin-bottom: 8px;
  font-size: 0.88rem;
  text-align: center;
}
.device-intake-summary-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.device-intake-summary-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.device-intake-summary-section-label {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.device-intake-summary-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.device-intake-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-panel-bg);
}
.device-intake-summary-q {
  color: var(--color-text-muted);
  flex: 1;
}
.device-intake-summary-a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

/* ── Lot Recall Quick-Check Modal ──────────────────────────────────────────── */
.lot-recall-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}
.lot-recall-check-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid var(--panel);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 0;
}
.lot-recall-check-input:focus { border-color: var(--accent); }
.lot-recall-scan-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 10px;
  border: 2px solid var(--panel);
  background: var(--panel);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.lot-recall-scan-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }

.lot-recall-check-result {
  border-radius: 10px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.lot-recall-check-result.is-safe,
.lot-recall-check-result.is-recalled,
.lot-recall-check-result.is-empty,
.lot-recall-check-result.is-expiry {
  display: flex;
}
.lot-recall-check-result.is-expiry {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 6px 0;
}
.lot-recall-check-result.is-safe {
  background: rgba(124,90,240,0.12);
  color: #4ade80;
  border: 1.5px solid rgba(124,90,240,0.25);
}
.lot-recall-check-result.is-recalled {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border: 1.5px solid rgba(239,68,68,0.3);
}
.lot-recall-check-result.is-empty {
  background: var(--panel);
  color: var(--muted);
  border: 1.5px solid transparent;
}
.lot-recall-check-result.is-scanning {
  display: flex;
  background: var(--panel);
  color: var(--accent);
  border: 1.5px solid rgba(155,123,255,0.2);
  animation: lot-recall-scan-pulse 1.1s ease-in-out infinite;
}
@keyframes lot-recall-scan-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.lot-recall-check-result.is-no-results {
  display: flex;
  background: rgba(251,191,36,0.08);
  color: #fbbf24;
  border: 1.5px solid rgba(251,191,36,0.2);
}

/* ── Lot Recall links ─────────────────────────────────────────────────────── */
.lot-recall-links {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lot-recall-links-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.lot-recall-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.lot-recall-link:hover { background: var(--accent); color: #fff; }
.lot-recall-link-icon {
  width: 14px;
  height: 14px;
  opacity: 0.55;
  flex-shrink: 0;
}
.lot-recall-link:hover .lot-recall-link-icon { opacity: 1; }

/* ── Known Bad Lots list ──────────────────────────────────────────────────── */
.lot-recall-known-bad {
  margin-top: 16px;
}
.lot-recall-known-bad-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lot-recall-known-bad-list li {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  color: #f87171;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}

.lot-recall-links-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(124,90,240,0.08);
  border-radius: 7px;
  border: 1px solid rgba(124,90,240,0.2);
}

/* ── Live manufacturer recall rows ───────────────────────────────────────── */
.lot-recall-live-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.lot-recall-live-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--panel);
  border: 1.5px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.lot-recall-live-row[data-status="recalled"] {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
}
.lot-recall-live-row[data-status="ok"] {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.2);
}
.lot-recall-live-brand {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.lot-recall-live-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.lot-recall-live-row[data-status="recalled"] .lot-recall-live-status { color: #f87171; }
.lot-recall-live-row[data-status="ok"]       .lot-recall-live-status { color: #4ade80; }
.lot-recall-live-row[data-status="skip"]     .lot-recall-live-status { color: var(--muted); font-weight: 400; }

/* ── OCR Camera Overlay ───────────────────────────────────────────────────── */
.ocr-cam-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
}
.ocr-cam-overlay[hidden] { display: none; }
.ocr-cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Semi-dark vignette so viewfinder box pops */
.ocr-cam-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}
.ocr-cam-ui {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 20px 0;
}
.ocr-cam-viewfinder {
  width: 92%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* Label above the box */
.ocr-cam-viewfinder::before {
  content: 'Place label inside the box';
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.ocr-cam-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  /* Cutout effect — dark outside, clear inside */
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.52);
}
/* Corner brackets */
.ocr-cam-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(255,255,255,0.7);
  border-style: solid;
  border-radius: 5px;
  transition: border-color 0.25s;
}
.ocr-cam-corner.tl { top: -1px;    left: -1px;   border-width: 4px 0 0 4px; }
.ocr-cam-corner.tr { top: -1px;    right: -1px;  border-width: 4px 4px 0 0; }
.ocr-cam-corner.bl { bottom: -1px; left: -1px;   border-width: 0 0 4px 4px; }
.ocr-cam-corner.br { bottom: -1px; right: -1px;  border-width: 0 4px 4px 0; }
/* Focus state colours */
.ocr-cam-frame[data-focus="mid"]    .ocr-cam-corner { border-color: #fbbf24; }
.ocr-cam-frame[data-focus="good"]   .ocr-cam-corner { border-color: #4ade80; }
.ocr-cam-frame[data-focus="locked"] .ocr-cam-corner { border-color: #4ade80; opacity: 0.7; }
/* Solid border outline of the scan box */
.ocr-cam-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.25);
  pointer-events: none;
}
/* Green pulse when focus is locked */
.ocr-cam-frame[data-focus="good"]::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 14px;
  border: 2px solid #4ade80;
  animation: ocr-focus-pulse 0.75s ease-out infinite;
  pointer-events: none;
}
@keyframes ocr-focus-pulse {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.05); }
}
.ocr-cam-hint {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0,0,0,0.85);
  margin: 0;
  min-height: 22px;
}
.ocr-cam-controls {
  position: relative;
  z-index: 1;
  padding: 16px 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ocr-cam-shutter {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 4px solid rgba(255,255,255,0.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 4px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}
.ocr-cam-shutter:active { transform: scale(0.91); background: #fff; }

.lot-recall-exp-section {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lot-recall-exp-trigger {
  width: 100%;
  margin-top: 2px;
}
.lot-recall-exp-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
}
.lot-recall-exp-chips[hidden] { display: none; }
.lot-recall-copy-btn[hidden] { display: none; }
.lot-recall-copy-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border-radius: 8px;
  background: var(--panel);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
}
.lot-recall-copy-btn:active { background: var(--accent); color: #fff; }

/* ── Client Book ─────────────────────────────────────────────────────────── */
/* ── Client Book ───────────────────────────────────────────────────────────── */

.cb-shell {
  display: flex;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* ── Avatar shared ── */
.cb-row-avatar,
.cb-detail-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  background: hsl(var(--cb-av-hue, 150), 28%, 22%);
  color: hsl(var(--cb-av-hue, 150), 55%, 70%);
  user-select: none;
}

/* ── Left panel ── */
.cb-left {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  background: rgba(0,0,0,0.12);
}

.cb-no-clients {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 20px 14px;
}

.cb-client-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 10px 10px 8px;
  border-radius: 9px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  color: var(--text);
}
.cb-client-row:hover {
  background: rgba(255,255,255,0.05);
}
.cb-client-row.is-active {
  background: rgba(255,255,255,0.07);
  border-left-color: var(--accent, #4ade80);
}

.cb-row-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}

.cb-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cb-client-row-name {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cb-client-row-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 0.73rem;
}

.cb-row-profit { font-weight: 600; }
.cb-client-row-count { color: var(--muted); }
.cb-profit-pos { color: #4ade80; }
.cb-profit-neg { color: #f87171; }

/* ── Tags ── */
.cb-tag {
  font-size: 0.63rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cb-tag-repeat { background: rgba(250,204,21,0.12); color: #facc15; }
.cb-tag-dts    { background: rgba(96,165,250,0.12); color: #60a5fa; }

/* ── Right panel ── */
.cb-right {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

.cb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--muted);
  opacity: 0.5;
}

.cb-detail-inner {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 860px;
}

/* ── Profile header ── */
.cb-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.cb-detail-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.cb-profile-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cb-detail-name {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.cb-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.cb-days-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  align-self: flex-start;
}
.cb-days-ok   { background: rgba(74,222,128,0.12); color: #4ade80; }
.cb-days-warn { background: rgba(250,204,21,0.12); color: #facc15; }
.cb-days-old  { background: rgba(248,113,113,0.12); color: #f87171; }

/* ── Two-column body ── */
.cb-detail-cols {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.cb-col-profile {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cb-col-data {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Section wrapper ── */
.cb-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-section-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Contact card ── */
.cb-contact-fields {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
}

.cb-phone-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.cb-phone-label,
.cb-notes-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding: 9px 11px;
  min-width: 56px;
  border-right: 1px solid var(--border);
  letter-spacing: 0.02em;
}

.cb-phone-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  padding: 9px 11px;
  outline: none;
  min-width: 0;
}
.cb-phone-input:focus { background: rgba(255,255,255,0.03); }

.cb-notes-row {
  display: flex;
  align-items: flex-start;
}
.cb-notes-label { padding-top: 10px; }
.cb-notes-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  padding: 9px 11px;
  outline: none;
  resize: none;
  min-height: 80px;
  box-sizing: border-box;
  line-height: 1.5;
  min-width: 0;
}
.cb-notes-input:focus { background: rgba(255,255,255,0.03); }

/* ── Cadence widget ── */
.cb-cadence-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.cb-cadence-widget svg { flex-shrink: 0; opacity: 0.6; }
.cb-cadence-widget strong { color: var(--text); font-weight: 600; }

/* ── Stats 2×2 grid ── */
.cb-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cb-stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cb-stat-card-label {
  font-size: 0.67rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cb-stat-card-val {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cb-stat-card-sub {
  font-size: 0.72rem;
  color: var(--muted);
}

/* ── Prediction card ── */
.cb-pred-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,0.025);
}
.cb-pred-card.cb-pred-soon    { border-color: rgba(250,204,21,0.35); background: rgba(250,204,21,0.04); }
.cb-pred-card.cb-pred-overdue { border-color: rgba(96,165,250,0.3);  background: rgba(96,165,250,0.04); }

.cb-pred-eyebrow {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cb-pred-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cb-pred-date     { font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.cb-pred-countdown { font-size: 0.8rem; color: var(--accent, #4ade80); }
.cb-pred-overdue-label { color: #60a5fa; }
.cb-pred-conf {
  display: flex;
  align-items: center;
  gap: 3px;
}
.cb-pred-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.cb-pred-dot-on  { background: var(--accent, #4ade80); }
.cb-pred-dot-off { background: rgba(255,255,255,0.15); }
.cb-pred-conf-lbl { font-size: 0.72rem; color: var(--muted); margin-left: 5px; }

/* ── Items table ── */
.cb-items-title { font-size: 0.9rem; font-weight: 600; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cb-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.cb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.cb-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 600;
}
.cb-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.cb-table tbody tr:last-child td { border-bottom: none; }
.cb-table tbody tr:hover td { background: rgba(255,255,255,0.025); }
.cb-cell-pos { color: #4ade80; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-cell-neg { color: #f87171; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 780px) {
  .cb-shell { flex-direction: column; height: auto; }
  .cb-left { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--border); background: none; }
  .cb-right { height: auto; }
  .cb-detail-inner { padding: 16px; gap: 16px; }
  .cb-detail-cols { flex-direction: column; }
  .cb-col-profile { width: 100%; }
  .cb-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── CRM Page ────────────────────────────────────────────────────────────── */
.crm-shell { display: flex; height: calc(100vh - 56px); overflow: hidden; }

/* Left rail */
.crm-left { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-primary); }
.crm-left-head { padding: 12px 12px 8px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.crm-title { font-size: 12px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 7px; letter-spacing: 0.02em; }
.crm-search-bar { display: flex; align-items: center; gap: 6px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 9px; }
.crm-search-icon { flex-shrink: 0; color: var(--text-muted); }
.crm-search-input { border: none; background: transparent; font-size: 12px; color: var(--text-primary); outline: none; flex: 1; width: 0; font-family: inherit; }
.crm-search-input::placeholder { color: var(--text-muted); }
.crm-stage-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.crm-stab { font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--border); cursor: pointer; color: var(--text-secondary); background: transparent; font-family: inherit; line-height: 1.4; }
.crm-stab.is-active { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }
.crm-lead-list { flex: 1; overflow-y: auto; padding: 6px; }
.crm-add-lead-bar { padding: 8px 10px; border-top: 1px solid var(--border); }
.crm-add-lead-btn { width: 100%; font-size: 12px; font-weight: 500; padding: 7px 10px; border-radius: var(--radius); border: 1px dashed var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; }
.crm-add-lead-btn:hover { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); border-style: solid; }

/* Lead rows */
.crm-lead-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 8px; border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; }
.crm-lead-row:hover { background: var(--hover); }
.crm-lead-row.is-active { background: var(--hover); border-left-color: #1877F2; }
.crm-lav { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; position: relative; }
.crm-fb-badge { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: #1877F2; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg-primary); }
.crm-fb-badge svg { display: block; }
.crm-lbody { flex: 1; min-width: 0; }
.crm-lname { font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-lmeta { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.crm-ltime { font-size: 10px; color: var(--text-muted); flex-shrink: 0; padding-top: 1px; }
.crm-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: #1877F2; flex-shrink: 0; }

/* Stage pills */
.crm-stage-pill { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.crm-pill-new { background: rgba(234,179,8,0.15); color: #ca8a04; }
.crm-pill-contacted { background: var(--accent-subtle); color: var(--accent); }
.crm-pill-quoted { background: rgba(139,92,246,0.12); color: #7c3aed; }
.crm-pill-won { background: rgba(34,197,94,0.12); color: #16a34a; }
.crm-pill-lost { background: rgba(239,68,68,0.1); color: #dc2626; }

/* Right panel */
.crm-right { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-secondary); overflow: hidden; }
.crm-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); }
.crm-empty-state svg { opacity: 0.3; }
.crm-empty-state p { font-size: 13px; }

/* Detail header */
.crm-rhead { padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--bg-primary); flex-shrink: 0; }
.crm-rav { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; position: relative; }
.crm-rhead-info { flex: 1; min-width: 0; }
.crm-rhead-name { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-rhead-sub { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.crm-rhead-sub svg { flex-shrink: 0; }
.crm-rhead-actions { display: flex; gap: 6px; flex-shrink: 0; }
.crm-btn-sm { font-size: 11px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; font-family: inherit; }
.crm-btn-sm:hover { background: var(--hover); }
.crm-btn-won { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #16a34a; }
.crm-btn-won:hover { background: rgba(34,197,94,0.18); }

/* Stage tracker bar */
.crm-stage-bar { padding: 10px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--bg-primary); flex-shrink: 0; }
.crm-stage-step { display: flex; align-items: center; flex: 1; }
.crm-stage-node { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.crm-stage-node:hover .crm-stage-circle { border-color: var(--accent); }
.crm-stage-circle { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 1.5px solid var(--border); color: var(--text-muted); background: transparent; transition: border-color 0.15s; }
.crm-stage-circle.is-done { background: #6d4de0; border-color: #6d4de0; color: #fff; }
.crm-stage-circle.is-current { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.crm-stage-lbl { font-size: 9px; color: var(--text-muted); white-space: nowrap; }
.crm-stage-lbl.is-done { color: #6d4de0; }
.crm-stage-lbl.is-current { color: var(--accent); font-weight: 500; }
.crm-stage-line { flex: 1; height: 1.5px; background: var(--border); margin: 0 3px 12px; }
.crm-stage-line.is-done { background: #6d4de0; }

/* Body columns */
.crm-body-cols { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.crm-thread-col { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.crm-thread-source { padding: 7px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--bg-primary); }
.crm-source-tag { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); background: var(--bg-secondary); padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); }
.crm-source-label { font-size: 11px; color: var(--text-muted); }
.crm-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.crm-msg { display: flex; gap: 8px; align-items: flex-end; }
.crm-msg.is-them { flex-direction: row; }
.crm-msg.is-us { flex-direction: row-reverse; }
.crm-msg-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; flex-shrink: 0; }
.crm-bubble { max-width: 75%; padding: 8px 11px; border-radius: 12px; font-size: 12px; line-height: 1.5; word-break: break-word; }
.crm-msg.is-them .crm-bubble { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 12px 12px 12px 2px; }
.crm-msg.is-us .crm-bubble { background: #1877F2; color: #fff; border-radius: 12px 12px 2px 12px; }
.crm-msg-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; padding-bottom: 2px; }
.crm-post-ref { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 4px; display: flex; gap: 8px; align-items: flex-start; }
.crm-post-icon { width: 34px; height: 34px; border-radius: 4px; background: var(--accent-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-post-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 500; }
.crm-post-text { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.crm-reply-bar { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--bg-primary); }
.crm-reply-input { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; padding: 7px 12px; font-size: 12px; color: var(--text-primary); outline: none; font-family: inherit; }
.crm-reply-input:focus { border-color: var(--accent); }
.crm-send-btn { width: 30px; height: 30px; border-radius: 50%; background: #1877F2; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; flex-shrink: 0; }
.crm-send-btn:hover { background: #166fe5; }
.crm-send-btn svg { display: block; }

/* Info sidebar */
.crm-info-col { width: 196px; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-primary); }
.crm-info-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.crm-info-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 9px; }
.crm-info-row { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 7px; }
.crm-info-row svg { flex-shrink: 0; margin-top: 1px; color: var(--text-muted); }
.crm-info-val { font-size: 11.5px; color: var(--text-primary); line-height: 1.4; }
.crm-info-val.is-muted { color: var(--text-muted); font-style: italic; }
.crm-info-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; font-size: 12px; color: var(--text-primary); outline: none; font-family: inherit; }
.crm-info-input:focus { border-color: var(--accent); }
.crm-activity { display: flex; flex-direction: column; gap: 8px; }
.crm-act-item { display: flex; gap: 7px; align-items: flex-start; }
.crm-act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong, var(--border)); flex-shrink: 0; margin-top: 4px; }
.crm-act-dot.is-fb { background: #1877F2; }
.crm-act-dot.is-note { background: #ca8a04; }
.crm-act-dot.is-stage { background: var(--accent); }
.crm-act-text { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.crm-act-time { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.crm-note-textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; font-size: 12px; color: var(--text-primary); outline: none; font-family: inherit; resize: vertical; min-height: 60px; line-height: 1.4; }
.crm-note-textarea:focus { border-color: var(--accent); }

/* Add lead modal */
.crm-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; display: flex; align-items: center; justify-content: center; }
.crm-modal { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 340px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.crm-modal-title { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.crm-modal-field { display: flex; flex-direction: column; gap: 5px; }
.crm-modal-field label { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.crm-modal-input { background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; color: var(--text-primary); outline: none; font-family: inherit; }
.crm-modal-input:focus { border-color: var(--accent); }
.crm-modal-select { background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; color: var(--text-primary); outline: none; font-family: inherit; }
.crm-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.crm-modal-cancel { font-size: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.crm-modal-save { font-size: 12px; padding: 6px 14px; border: none; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; font-family: inherit; font-weight: 500; }
.crm-modal-save:hover { opacity: 0.9; }

/* FB status bar */
.crm-fb-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 10px; }
.crm-fb-status-inner { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.crm-fb-disconnected { background: rgba(24,119,242,0.06); }
.crm-fb-connected { background: rgba(124,90,240,0.06); }
.crm-fb-status-bar span { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-fb-setup-btn { font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 20px; border: 1px solid #1877F2; background: #1877F2; color: #fff; cursor: pointer; white-space: nowrap; font-family: inherit; flex-shrink: 0; }
.crm-fb-setup-btn:hover { background: #166fe5; }
.crm-fb-disconnect-btn { font-size: 11px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; white-space: nowrap; font-family: inherit; }
.crm-fb-disconnect-btn:hover { border-color: #dc2626; color: #dc2626; }

/* FB setup wizard */
.crm-wizard-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.crm-wizard { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 520px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,0.4); max-height: 90vh; }
.crm-wizard-header { padding: 20px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.crm-wizard-header-text { flex: 1; }
.crm-wizard-eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #1877F2; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.crm-wizard-title { font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.crm-wizard-close { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; line-height: 1; }
.crm-wizard-close:hover { background: var(--hover); color: var(--text-primary); }
.crm-wizard-progress { display: flex; gap: 4px; padding: 16px 24px 0; flex-shrink: 0; }
.crm-wizard-pip { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background 0.2s; }
.crm-wizard-pip.is-done { background: #1877F2; }
.crm-wizard-pip.is-active { background: #1877F2; opacity: 0.5; }
.crm-wizard-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.crm-wizard-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.crm-wizard-steps { display: flex; flex-direction: column; gap: 12px; }
.crm-wizard-step { display: flex; gap: 12px; align-items: flex-start; }
.crm-wizard-step-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(24,119,242,0.12); color: #1877F2; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.crm-wizard-step-body { flex: 1; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.crm-wizard-step-body strong { color: var(--text-primary); font-weight: 500; }
.crm-wizard-step-body a { color: #1877F2; text-decoration: none; }
.crm-wizard-step-body a:hover { text-decoration: underline; }
.crm-wizard-field { display: flex; flex-direction: column; gap: 5px; }
.crm-wizard-field label { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.crm-wizard-field small { font-size: 11px; color: var(--text-muted); }
.crm-wizard-input { background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 11px; font-size: 13px; color: var(--text-primary); outline: none; font-family: inherit; width: 100%; }
.crm-wizard-input:focus { border-color: #1877F2; }
.crm-wizard-input.is-error { border-color: #dc2626; }
.crm-wizard-error { font-size: 12px; color: #dc2626; padding: 8px 11px; background: rgba(239,68,68,0.08); border-radius: var(--radius); border: 1px solid rgba(239,68,68,0.2); }
.crm-wizard-success { font-size: 12px; color: #16a34a; padding: 8px 11px; background: rgba(34,197,94,0.08); border-radius: var(--radius); border: 1px solid rgba(34,197,94,0.2); display: flex; align-items: center; gap: 7px; }
.crm-wizard-info-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.crm-wizard-info-box strong { color: var(--text-primary); font-weight: 500; }
.crm-wizard-code { font-family: monospace; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 8px 11px; font-size: 12px; color: var(--text-primary); word-break: break-all; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-wizard-copy-btn { font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; white-space: nowrap; font-family: inherit; flex-shrink: 0; }
.crm-wizard-copy-btn:hover { color: var(--text-primary); }
.crm-wizard-done-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(124,90,240,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; }
.crm-wizard-done-title { font-size: 16px; font-weight: 600; color: var(--text-primary); text-align: center; }
.crm-wizard-done-sub { font-size: 13px; color: var(--text-secondary); text-align: center; line-height: 1.5; }
.crm-wizard-footer { padding: 0 24px 20px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }
.crm-wizard-back { font-size: 12px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.crm-wizard-back:hover { background: var(--hover); }
.crm-wizard-next { font-size: 12px; font-weight: 500; padding: 7px 18px; border-radius: var(--radius); border: none; background: #1877F2; color: #fff; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.crm-wizard-next:hover { background: #166fe5; }
.crm-wizard-next:disabled { opacity: 0.5; cursor: not-allowed; }
.crm-wizard-spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: crm-spin 0.7s linear infinite; }
@keyframes crm-spin { to { transform: rotate(360deg); } }

/* ── CRM Redesign additions ───────────────────────────────────────────────── */

/* Lead list rows */
.crm-lname-row { display: flex; align-items: center; gap: 4px; }
.crm-lname { font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.crm-ltime { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.crm-lpreview { font-size: 11px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-sms-badge { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: #6d4de0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg-primary); font-size: 7px; font-weight: 700; color: #fff; }

/* Main content area */
.crm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* View toggle bar */
.crm-view-bar { display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--bg-primary); flex-shrink: 0; gap: 6px; height: 40px; }
.crm-view-tabs { display: flex; gap: 2px; flex: 1; }
.crm-vtab { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: var(--radius); border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; white-space: nowrap; }
.crm-vtab:hover { background: var(--hover); color: var(--text-primary); }
.crm-vtab.is-active { background: var(--accent-subtle); color: var(--accent); }
.crm-pipeline-cfg-btn { font-size: 11px; padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; }
.crm-pipeline-cfg-btn:hover { background: var(--hover); color: var(--text-primary); }
.crm-pipeline-cfg-btn.is-hidden { display: none; }

/* View panels container */
.crm-view-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.crm-view-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.crm-view-panel.is-active { display: flex; }
#crmDetail { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-secondary); }

/* Profile column (right, replaces info-col for the new layout) */
.crm-profile-col { width: 275px; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-primary); border-left: 1px solid var(--border); }
.crm-profile-head-section { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }
.crm-profile-stats { display: flex; gap: 5px; margin-bottom: 10px; }
.crm-profile-stat { flex: 1; text-align: center; background: var(--bg-secondary); border-radius: var(--radius); padding: 8px 4px; }
.crm-profile-stat-val { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.crm-profile-stat-val.is-pos { color: #16a34a; }
.crm-profile-stat-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; line-height: 1.2; }
.crm-profile-action-row { display: flex; gap: 5px; }
.crm-profile-action-btn { flex: 1; font-size: 11px; font-weight: 500; padding: 6px 6px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 3px; transition: background 0.12s, color 0.12s; white-space: nowrap; }
.crm-profile-action-btn:hover { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }
.crm-profile-section { padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }

/* Orders list */
.crm-orders-list { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; }
.crm-order-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.crm-order-info { flex: 1; min-width: 0; }
.crm-order-name { font-size: 11.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-order-date { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.crm-order-profit { font-size: 12px; font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.crm-order-profit.is-pos { color: #16a34a; }
.crm-order-profit.is-neg { color: #dc2626; }

/* Upcoming appointment banner */
.crm-appt-upcoming { display: flex; align-items: center; gap: 7px; padding: 6px 18px; font-size: 11.5px; color: var(--text-secondary); background: var(--accent-subtle); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.crm-appt-upcoming svg { flex-shrink: 0; color: var(--accent); }

/* Per-message channel badges */
.crm-msg-wrap { display: flex; flex-direction: column; max-width: 75%; }
.crm-msg.is-us .crm-msg-wrap { align-items: flex-end; }
.crm-msg.is-them .crm-msg-wrap { align-items: flex-start; }
.crm-bubble { padding: 8px 11px; border-radius: 12px; font-size: 12px; line-height: 1.5; word-break: break-word; }
.crm-msg.is-them .crm-bubble { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 12px 12px 12px 2px; }
.crm-msg.is-us .crm-bubble { background: #1877F2; color: #fff; border-radius: 12px 12px 2px 12px; }
.crm-msg-foot { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.crm-msg.is-us .crm-msg-foot { flex-direction: row-reverse; }
.crm-channel-tag { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; flex-shrink: 0; }
.crm-channel-fb { background: #1877F2; color: #fff; }
.crm-channel-sms { background: #6d4de0; color: #fff; }

/* Reply bar channel select */
.crm-reply-channel { font-size: 11px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; color: var(--text-secondary); font-family: inherit; cursor: pointer; flex-shrink: 0; max-width: 96px; }
.crm-source-sms { border-color: rgba(22,163,74,0.35) !important; }
.crm-source-sms svg { color: #6d4de0; }

/* Pipeline board */
.crm-pipeline-board { flex: 1; display: flex; gap: 10px; padding: 12px; overflow-x: auto; overflow-y: hidden; background: var(--bg-secondary); align-items: flex-start; }
.crm-pipeline-col { flex: 0 0 194px; display: flex; flex-direction: column; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: calc(100vh - 178px); }
.crm-pipeline-col-head { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.crm-pipeline-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-pipeline-col-name { font-size: 11.5px; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; }
.crm-pipeline-col-count { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--bg-secondary); color: var(--text-muted); flex-shrink: 0; }
.crm-pipeline-cards { flex: 1; overflow-y: auto; padding: 7px; display: flex; flex-direction: column; gap: 6px; transition: background 0.12s; min-height: 48px; }
.crm-pipeline-cards.is-drag-over { background: var(--accent-subtle); border-radius: 6px; }
.crm-pipeline-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; cursor: pointer; transition: box-shadow 0.12s, opacity 0.12s; }
.crm-pipeline-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-color: var(--accent); }
.crm-pipeline-card.is-dragging { opacity: 0.45; }
.crm-pipeline-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.crm-pipeline-card-name { font-size: 12px; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-pipeline-card-profit { font-size: 10px; font-weight: 600; color: #16a34a; margin-bottom: 3px; }
.crm-pipeline-card-time { font-size: 10px; color: var(--text-muted); }
.crm-pipeline-empty-col { font-size: 11px; color: var(--text-muted); text-align: center; padding: 16px 8px; font-style: italic; }

/* Pipeline config modal rows */
.crm-pscfg-row { display: flex; align-items: center; gap: 7px; }
.crm-pscfg-color { width: 28px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; flex-shrink: 0; }
.crm-pscfg-input { flex: 1; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; font-size: 12px; color: var(--text-primary); outline: none; font-family: inherit; }
.crm-pscfg-input:focus { border-color: var(--accent); }
.crm-pscfg-del { width: 26px; height: 26px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-pscfg-del:hover:not(:disabled) { border-color: #dc2626; color: #dc2626; }
.crm-pscfg-del:disabled { opacity: 0.3; cursor: not-allowed; }
.crm-pscfg-add-btn { width: 100%; padding: 6px; font-size: 12px; border: 1px dashed var(--border); border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.crm-pscfg-add-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Audit view */
.crm-audit-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 18px 20px; gap: 16px; background: var(--bg-secondary); }
.crm-audit-head { flex-shrink: 0; }
.crm-audit-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.crm-audit-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.crm-audit-ranges { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; flex-shrink: 0; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.crm-audit-range { display: flex; flex-direction: column; gap: 6px; }
.crm-audit-range-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.crm-audit-range-inputs { display: flex; align-items: center; gap: 7px; }
.crm-audit-range-sep { font-size: 11px; color: var(--text-muted); }
.crm-audit-vs { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; align-self: flex-end; padding-bottom: 6px; }
.crm-audit-results { flex-shrink: 0; }
.crm-audit-cols { display: flex; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.crm-audit-col { flex: 1; min-width: 0; }
.crm-audit-col-head { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.crm-audit-col-period { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.crm-audit-col-dates { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.crm-audit-divider { width: 1px; background: var(--border); flex-shrink: 0; }
.crm-audit-metric { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--border); gap: 8px; }
.crm-audit-metric:last-child { border-bottom: none; }
.crm-audit-metric-lbl { font-size: 12px; color: var(--text-secondary); }
.crm-audit-metric-val { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Order profit preview */
.crm-order-profit-preview { font-size: 13px; font-weight: 600; padding: 8px 11px; border-radius: var(--radius); text-align: center; }
.crm-order-profit-preview.is-pos { background: rgba(34,197,94,0.1); color: #16a34a; }
.crm-order-profit-preview.is-neg { background: rgba(239,68,68,0.08); color: #dc2626; }

@media (max-width: 1100px) {
  .crm-profile-col { width: 190px; }
}
@media (max-width: 860px) {
  .crm-profile-col { display: none; }
  .crm-info-col { display: none; }
  .crm-thread-col { border-right: none; }
}
@media (max-width: 600px) {
  .crm-left { width: 180px; }
  .crm-rhead-actions { display: none; }
  .crm-view-bar { padding: 0 8px; }
  .crm-vtab { font-size: 11px; padding: 5px 8px; }
}

/* ── CRM Premium Dark Theme ─────────────────────────────────────────────── */
/*
  All overrides are scoped to #crmPage so no other page is affected.
  We re-define the global CSS custom properties locally so every existing
  .crm-* rule picks up the new palette automatically.
*/

#crmPage {
  /* base palette */
  --bg-primary:   #13141c;
  --bg-secondary: #0d0e14;
  --border:       rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --hover:        rgba(255,255,255,0.05);
  --input-bg:     #1b1d28;
  --text-primary:   #f4f4fa;
  --text-secondary: #b9b9d0; /* ~9.5:1 on --bg-primary */
  --text-muted:     #8e8ea8; /* ~5.7:1 — was #52526a at ~2.5:1, unreadable */
  --radius: 10px;

  /* purple accent replaces the green */
  --accent:        #7c5af0;
  --accent-subtle: rgba(124,90,240,0.13);
  /* Lighter purple for TEXT — --accent itself is only ~4:1 on the dark ground */
  --accent-text:   #b99dff;

  /* crm-specific tokens */
  --crm-active-from:  #6b3ef5;
  --crm-active-via:   #9b5cf6;
  --crm-active-to:    #c084fc;
  --crm-send-from:    #6b3ef5;
  --crm-send-to:      #a855f7;

  background: var(--bg-secondary);
  /* Force near-white base text so nothing inherits dark from .dashboard */
  color: var(--text-primary);
}

/* ── Global text color reset inside CRM ────────────────────
   .dashboard sets a dark color; override everything to inherit
   and give interactive elements a purple hover.
   NOTE: #crmPage itself is deliberately NOT in this selector — it
   would override its own `color: var(--text-primary)` above (same
   specificity, later in the file) and inherit the app's near-white
   from .app-shell, which breaks the light theme.               */
#crmPage * { color: inherit; }

/* Near-white for all readable text nodes */
#crmPage .crm-title,
#crmPage .crm-search-input,
#crmPage .crm-lname,
#crmPage .crm-lpreview,
#crmPage .crm-ltime,
#crmPage .crm-rhead-name,
#crmPage .crm-rhead-sub,
#crmPage .crm-stage-lbl,
#crmPage .crm-source-label,
#crmPage .crm-bubble,
#crmPage .crm-msg-time,
#crmPage .crm-post-text,
#crmPage .crm-reply-input,
#crmPage .crm-info-label,
#crmPage .crm-info-val,
#crmPage .crm-order-name,
#crmPage .crm-order-date,
#crmPage .crm-act-text,
#crmPage .crm-act-time,
#crmPage .crm-profile-stat-val,
#crmPage .crm-profile-stat-lbl,
#crmPage .crm-empty-state p,
#crmPage .crm-fb-status-bar { color: var(--text-primary); }

/* Slightly dimmer for secondary text */
#crmPage .crm-btn-sm,
#crmPage .crm-add-lead-btn,
#crmPage .crm-stab,
#crmPage .crm-vtab,
#crmPage .crm-profile-action-btn,
#crmPage .crm-reply-channel { color: var(--text-secondary); }

/* Purple on hover for all clickable text/buttons */
#crmPage .crm-stab:hover,
#crmPage .crm-vtab:hover,
#crmPage .crm-btn-sm:hover,
#crmPage .crm-add-lead-btn:hover,
#crmPage .crm-profile-action-btn:hover,
#crmPage .crm-lead-row:hover .crm-lname,
#crmPage .crm-lead-row:hover .crm-lpreview,
#crmPage .crm-info-input:focus,
#crmPage .crm-note-textarea:focus { color: var(--accent-text); }

/* Active tab stays white, not purple */
#crmPage .crm-stab.is-active,
#crmPage .crm-vtab.is-active { color: var(--text-primary); }

/* Active lead row keeps white text (gradient bg) */
#crmPage .crm-lead-row.is-active .crm-lname,
#crmPage .crm-lead-row.is-active .crm-lpreview,
#crmPage .crm-lead-row.is-active .crm-ltime { color: #fff; }

/* Inputs */
#crmPage .crm-info-input,
#crmPage .crm-note-textarea { color: var(--text-primary); }

/* ── Left panel ─── */
#crmPage .crm-left {
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
}
#crmPage .crm-left-head {
  border-bottom: 1px solid var(--border);
  padding: 14px 12px 10px;
}
#crmPage .crm-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#crmPage .crm-search-bar {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
#crmPage .crm-stage-tabs {
  border-bottom: 1px solid var(--border);
  gap: 3px;
  padding: 8px 8px;
}
#crmPage .crm-stab {
  font-size: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 4px 9px;
  border-radius: 6px;
}
#crmPage .crm-stab.is-active {
  background: rgba(124,90,240,0.22);
  color: var(--accent-text);
  border: none;
}
#crmPage .crm-add-lead-btn {
  border: 1px dashed rgba(255,255,255,0.12);
  color: var(--text-muted);
  border-radius: 8px;
}
#crmPage .crm-add-lead-btn:hover {
  background: rgba(124,90,240,0.14);
  color: var(--crm-active-via);
  border-color: var(--accent);
}

/* ── Lead rows ─── */
#crmPage .crm-lead-row {
  border-radius: 10px;
  border-left: none;
  padding: 10px 9px;
  transition: background 0.14s;
  border: 1px solid transparent;
}
#crmPage .crm-lead-row:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
}
#crmPage .crm-lead-row.is-active {
  background: linear-gradient(135deg, var(--crm-active-from) 0%, var(--crm-active-via) 55%, var(--crm-active-to) 100%);
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(107,62,245,0.4);
}
#crmPage .crm-lead-row.is-active .crm-lname,
#crmPage .crm-lead-row.is-active .crm-ltime,
#crmPage .crm-lead-row.is-active .crm-lpreview {
  color: rgba(255,255,255,0.95);
}
/* stage pill on active row */
#crmPage .crm-lead-row.is-active .crm-stage-pill {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
#crmPage .crm-lpreview { color: var(--text-muted); font-size: 11px; }

/* ── FB / SMS badges on avatars ─── */
#crmPage .crm-fb-badge  { border-color: var(--bg-primary); }
#crmPage .crm-sms-badge { border-color: var(--bg-primary); }

/* ── View bar ─── */
#crmPage .crm-view-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  height: 44px;
}
#crmPage .crm-vtab {
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 5px 12px;
  gap: 6px;
}
#crmPage .crm-vtab:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
#crmPage .crm-vtab.is-active {
  background: rgba(124,90,240,0.16);
  color: #b99dff;
}
#crmPage .crm-vtab.is-active svg { opacity: 1; }

/* ── Detail header ─── */
#crmPage .crm-rhead {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
#crmPage .crm-rhead-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
#crmPage .crm-rhead-sub  { color: var(--text-muted); }
#crmPage .crm-btn-sm {
  border-color: var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 11px;
}
#crmPage .crm-btn-sm:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
#crmPage .crm-btn-won {
  background: rgba(124,90,240,0.14);
  border-color: rgba(124,90,240,0.35);
  color: #b99dff;
}
#crmPage .crm-btn-won:hover { background: rgba(124,90,240,0.24); }

/* ── Stage progress bar ─── */
#crmPage .crm-stage-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}
#crmPage .crm-stage-circle {
  border-color: rgba(255,255,255,0.1);
  color: var(--text-muted);
  font-size: 9px;
}
#crmPage .crm-stage-lbl { color: var(--text-muted); font-size: 9px; }
#crmPage .crm-stage-line { background: rgba(255,255,255,0.08); }

/* ── Thread ─── */
#crmPage .crm-thread-source {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
#crmPage .crm-source-tag {
  background: rgba(24,119,242,0.12);
  border-color: rgba(24,119,242,0.25);
  color: #74a8ff;
}
#crmPage .crm-source-sms {
  background: rgba(124,90,240,0.1) !important;
  border-color: rgba(124,90,240,0.25) !important;
  color: #926ee7 !important;
}
#crmPage .crm-thread {
  background: var(--bg-secondary);
}
#crmPage .crm-msg.is-them .crm-bubble {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text-primary);
}
#crmPage.crm-theme-light .crm-msg.is-them .crm-bubble {
  background: #eceef3; /* sits just off the white thread ground */
}
#crmPage .crm-msg.is-us .crm-bubble {
  background: linear-gradient(135deg, var(--crm-send-from), var(--crm-send-to));
  color: #fff;
  border-radius: 14px 14px 3px 14px;
}
/* reply bar */
#crmPage .crm-reply-bar {
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  gap: 8px;
}
#crmPage .crm-reply-input {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text-primary);
  border-radius: 10px;
}
#crmPage .crm-reply-input:focus { border-color: rgba(124,90,240,0.5); box-shadow: 0 0 0 3px rgba(124,90,240,0.08); }
#crmPage .crm-reply-channel {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text-secondary);
  border-radius: 8px;
}
#crmPage .crm-send-btn {
  background: linear-gradient(135deg, var(--crm-send-from), var(--crm-send-to));
  box-shadow: 0 2px 10px rgba(107,62,245,0.45);
  border-radius: 50%;
}
#crmPage .crm-send-btn:hover { opacity: 0.88; }

/* ── Channel tags in thread ─── */
#crmPage .crm-channel-fb  { background: rgba(24,119,242,0.85);  }
#crmPage .crm-channel-sms { background: rgba(124,90,240,0.85); }

/* ── Profile column ─── */
#crmPage .crm-profile-col {
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
}
#crmPage .crm-profile-head-section {
  border-bottom: 1px solid var(--border);
}
#crmPage .crm-profile-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
#crmPage .crm-profile-stat-val { color: var(--text-primary); }
#crmPage .crm-profile-stat-val.is-pos { color: #7eeaab; }
#crmPage .crm-profile-action-btn {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--text-secondary);
  border-radius: 8px;
}
#crmPage .crm-profile-action-btn:hover {
  background: rgba(124,90,240,0.16);
  color: #b99dff;
  border-color: rgba(124,90,240,0.4);
}
#crmPage .crm-profile-section { border-bottom: 1px solid var(--border); }
#crmPage .crm-info-label {
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
#crmPage .crm-info-input {
  background: var(--input-bg);
  border-color: var(--border);
  border-radius: 8px;
  color: var(--text-primary);
}
#crmPage .crm-info-input:focus { border-color: rgba(124,90,240,0.5); }
#crmPage .crm-note-textarea {
  background: var(--input-bg);
  border-color: var(--border);
  border-radius: 8px;
  color: var(--text-primary);
}
#crmPage .crm-note-textarea:focus { border-color: rgba(124,90,240,0.5); }
#crmPage .crm-info-val { color: var(--text-secondary); font-size: 11.5px; }

/* ── Order rows ─── */
#crmPage .crm-order-name { color: var(--text-primary); }
#crmPage .crm-order-date { color: var(--text-muted); }
#crmPage .crm-order-profit.is-pos { color: #7eeaab; }
#crmPage .crm-order-profit.is-neg { color: #f87171; }

/* ── Activity log ─── */
#crmPage .crm-act-text  { color: var(--text-secondary); }
#crmPage .crm-act-time  { color: var(--text-muted); }
#crmPage .crm-act-dot   { background: rgba(255,255,255,0.15); }
#crmPage .crm-act-dot.is-fb    { background: #1877F2; }
#crmPage .crm-act-dot.is-note  { background: #f59e0b; }
#crmPage .crm-act-dot.is-stage { background: var(--accent); }

/* ── Appointment banner ─── */
#crmPage .crm-appt-upcoming {
  background: rgba(124,90,240,0.1);
  border-bottom: 1px solid rgba(124,90,240,0.2);
  color: #b99dff;
}

/* ── FB status bar ─── */
#crmPage .crm-fb-status-bar {
  border-bottom: 1px solid var(--border);
  padding: 7px 16px;
}
#crmPage .crm-fb-disconnected { background: rgba(24,119,242,0.05); }
#crmPage .crm-fb-connected    { background: rgba(124,90,240,0.05); }
#crmPage .crm-fb-status-bar span { color: var(--text-muted); }


/* ── Legibility — bump all CRM font sizes up ~2px ─── */
#crmPage .crm-title              { font-size: 14px; }
#crmPage .crm-search-input       { font-size: 14px; }
#crmPage .crm-stab               { font-size: 12px; }
#crmPage .crm-add-lead-btn       { font-size: 13px; }
#crmPage .crm-lav                { font-size: 13px; }
#crmPage .crm-lname              { font-size: 14px; }
#crmPage .crm-lpreview           { font-size: 12px; }
#crmPage .crm-ltime              { font-size: 12px; }
#crmPage .crm-stage-pill         { font-size: 11px; }
#crmPage .crm-rhead-name         { font-size: 16px; }
#crmPage .crm-rhead-sub          { font-size: 13px; }
#crmPage .crm-btn-sm             { font-size: 13px; }
#crmPage .crm-stage-circle       { font-size: 12px; width: 26px; height: 26px; }
#crmPage .crm-stage-lbl          { font-size: 11px; }
#crmPage .crm-source-tag         { font-size: 13px; }
#crmPage .crm-source-label       { font-size: 13px; }
#crmPage .crm-bubble             { font-size: 14px; }
#crmPage .crm-msg-time           { font-size: 12px; }
#crmPage .crm-post-lbl           { font-size: 11px; }
#crmPage .crm-post-text          { font-size: 13px; }
#crmPage .crm-reply-input        { font-size: 14px; }
#crmPage .crm-reply-channel      { font-size: 13px; }
#crmPage .crm-info-label         { font-size: 11px; }
#crmPage .crm-info-val           { font-size: 13px; }
#crmPage .crm-info-input         { font-size: 13px; }
#crmPage .crm-note-textarea      { font-size: 13px; }
#crmPage .crm-act-text           { font-size: 13px; }
#crmPage .crm-act-time           { font-size: 12px; }
#crmPage .crm-profile-stat-val   { font-size: 15px; }
#crmPage .crm-profile-stat-lbl   { font-size: 12px; }
#crmPage .crm-order-name         { font-size: 13px; }
#crmPage .crm-order-date         { font-size: 12px; }
#crmPage .crm-order-profit       { font-size: 13px; }
#crmPage .crm-profile-action-btn { font-size: 13px; }
#crmPage .crm-vtab               { font-size: 13px; }
#crmPage .crm-fb-status-bar      { font-size: 13px; }
#crmPage .crm-fb-setup-btn       { font-size: 13px; }
#crmPage .crm-fb-disconnect-btn  { font-size: 13px; }
#crmPage .crm-empty-state p      { font-size: 15px; }

/* ── Pipeline board ─── */
#crmPage .crm-pipeline-board {
  background: var(--bg-secondary);
  gap: 10px;
  padding: 14px;
}
#crmPage .crm-pipeline-col {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
}
#crmPage .crm-pipeline-col-head {
  border-bottom: 1px solid var(--border);
}
#crmPage .crm-pipeline-col-name  { color: var(--text-primary); font-weight: 500; }
#crmPage .crm-pipeline-col-count {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border-radius: 20px;
}
#crmPage .crm-pipeline-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
#crmPage .crm-pipeline-card:hover {
  background: rgba(124,90,240,0.1);
  border-color: rgba(124,90,240,0.3);
  box-shadow: 0 2px 14px rgba(107,62,245,0.18);
}
#crmPage .crm-pipeline-card-name  { color: var(--text-primary); }
#crmPage .crm-pipeline-card-time  { color: var(--text-muted); }
#crmPage .crm-pipeline-card-profit { color: #7eeaab; }
#crmPage .crm-pipeline-empty-col  { color: var(--text-muted); }
#crmPage .crm-pipeline-cards.is-drag-over { background: rgba(124,90,240,0.08); border-radius: 8px; }

/* ── Audit view ─── */
#crmPage .crm-audit-content    { background: var(--bg-secondary); }
#crmPage .crm-audit-title      { color: var(--text-primary); }
#crmPage .crm-audit-subtitle   { color: var(--text-muted); }
#crmPage .crm-audit-ranges {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
}
#crmPage .crm-audit-range-label { color: var(--text-muted); }
#crmPage .crm-audit-vs { color: var(--text-muted); }
#crmPage .crm-audit-cols {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
}
#crmPage .crm-audit-col-head   { background: rgba(255,255,255,0.03); }
#crmPage .crm-audit-col-period { color: var(--text-primary); }
#crmPage .crm-audit-col-dates  { color: var(--text-muted); }
#crmPage .crm-audit-divider    { background: var(--border); }
#crmPage .crm-audit-metric     { border-bottom-color: var(--border); }
#crmPage .crm-audit-metric:hover { background: rgba(255,255,255,0.025); }
#crmPage .crm-audit-metric-lbl { color: var(--text-secondary); }
#crmPage .crm-audit-metric-val { color: var(--text-primary); }

/* ── Modals ─── */
#crmPage ~ .crm-modal-backdrop,
.crm-modal-backdrop {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
.crm-modal {
  background: #181922;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.crm-modal-title { color: #eeeef5; }
.crm-modal-field label { color: #8b8ba8; }
.crm-modal-input, .crm-modal-select {
  background: #1b1d28;
  border: 1px solid rgba(255,255,255,0.1);
  color: #eeeef5;
  border-radius: 9px;
}
.crm-modal-input:focus, .crm-modal-select:focus { border-color: rgba(124,90,240,0.55); box-shadow: 0 0 0 3px rgba(124,90,240,0.1); }
.crm-modal-cancel {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #8b8ba8;
  border-radius: 8px;
}
.crm-modal-cancel:hover { background: rgba(255,255,255,0.1); color: #eeeef5; }
.crm-modal-save {
  background: linear-gradient(135deg, #6b3ef5, #a855f7);
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(107,62,245,0.4);
}
.crm-modal-save:hover { opacity: 0.9; box-shadow: 0 4px 18px rgba(107,62,245,0.5); }

/* ══════════════════════════════════════════════════════════
   CLIENT PROFILE MODAL  (.cpf-*)
   Full-screen overlay, dark premium, reference: Claudia Mills
   ══════════════════════════════════════════════════════════ */
.cpf-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cpf-modal {
  background: #13141c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* header bar */
.cpf-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cpf-modal-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #7c5af0;
}
.cpf-modal-header-actions { display: flex; align-items: center; gap: 8px; }
.cpf-hdr-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  padding: 7px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); color: #c0c0d8;
  transition: background 0.12s, color 0.12s;
}
.cpf-hdr-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
.cpf-hdr-btn-primary {
  background: linear-gradient(135deg, #6b3ef5, #a855f7);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 10px rgba(107,62,245,0.4);
}
.cpf-hdr-btn-primary:hover { opacity: 0.88; }
.cpf-close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: #6b6b85; font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.cpf-close-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* body layout */
.cpf-body {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}

/* LEFT column */
.cpf-left {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow-y: auto; padding: 28px 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.cpf-avatar-wrap { display: flex; justify-content: center; }
.cpf-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
  box-shadow: 0 0 0 4px rgba(124,90,240,0.2), 0 4px 16px rgba(0,0,0,0.3);
}
.cpf-identity { text-align: center; }
.cpf-name {
  font-size: 20px; font-weight: 700; color: #eeeef5; letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.cpf-role { font-size: 12px; color: #8b8ba8; margin-bottom: 10px; }
.cpf-stage-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 4px 12px; border-radius: 20px; border: 1px solid;
}
.cpf-stats-row {
  display: flex; gap: 6px; justify-content: center;
}
.cpf-stat {
  flex: 1; text-align: center; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 10px 6px;
}
.cpf-stat-val { font-size: 18px; font-weight: 700; color: #eeeef5; }
.cpf-stat-val.is-pos { color: #7eeaab; }
.cpf-stat-val.is-neg { color: #f87171; }
.cpf-stat-lbl { font-size: 10px; color: #52526a; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }

/* info block */
.cpf-info-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 14px;
}
.cpf-info-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: #52526a; margin-bottom: 10px;
}
.cpf-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 8px;
}
.cpf-info-row:last-child { border-bottom: none; }
.cpf-info-lbl { font-size: 12px; color: #52526a; flex-shrink: 0; }
.cpf-info-val { font-size: 12px; color: #c0c0d8; text-align: right; display: flex; align-items: center; gap: 5px; }

/* projected card */
.cpf-proj-card {
  background: linear-gradient(135deg, rgba(107,62,245,0.15), rgba(168,85,247,0.1));
  border: 1px solid rgba(124,90,240,0.25);
  border-radius: 12px; padding: 14px; text-align: center;
}
.cpf-proj-val { font-size: 22px; font-weight: 700; color: #b99dff; }
.cpf-proj-lbl { font-size: 11px; color: #8b8ba8; margin-top: 2px; }

/* RIGHT column */
.cpf-right {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
}
.cpf-tabs {
  display: flex; gap: 0; padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cpf-tab {
  font-size: 13px; font-weight: 500; font-family: inherit;
  padding: 14px 16px; cursor: pointer;
  border: none; background: transparent; color: #6b6b85;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 6px;
  transition: color 0.12s;
}
.cpf-tab:hover { color: #c0c0d8; }
.cpf-tab.is-active { color: #eeeef5; border-bottom-color: #7c5af0; }
.cpf-tab-count {
  font-size: 11px; font-weight: 600;
  background: rgba(124,90,240,0.2); color: #b99dff;
  padding: 1px 6px; border-radius: 20px;
}

/* panels */
.cpf-panel { display: none; flex: 1; flex-direction: column; overflow-y: auto; padding: 20px 24px; gap: 8px; }
.cpf-panel.is-active { display: flex; }
.cpf-panel-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.cpf-panel-count { font-size: 12px; color: #6b6b85; font-weight: 500; }
.cpf-add-btn {
  font-size: 12px; font-weight: 600; font-family: inherit;
  padding: 5px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(124,90,240,0.15); border: 1px solid rgba(124,90,240,0.3);
  color: #b99dff; transition: background 0.12s;
}
.cpf-add-btn:hover { background: rgba(124,90,240,0.25); }

/* deals */
.cpf-deal-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.1s;
}
.cpf-deal-row:hover { background: rgba(255,255,255,0.06); }
.cpf-deal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cpf-deal-body { flex: 1; min-width: 0; }
.cpf-deal-title { font-size: 13px; font-weight: 500; color: #eeeef5; }
.cpf-deal-meta { font-size: 11px; color: #52526a; margin-top: 2px; }
.cpf-deal-badge {
  font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; flex-shrink: 0;
}
.cpf-deal-badge.is-pos { background: rgba(126,234,171,0.12); color: #7eeaab; }
.cpf-deal-badge.is-neg { background: rgba(248,113,113,0.12); color: #f87171; }

/* timeline */
.cpf-tl-list { display: flex; flex-direction: column; gap: 12px; }
.cpf-tl-row { display: flex; gap: 12px; align-items: flex-start; }
.cpf-tl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.cpf-tl-body { flex: 1; }
.cpf-tl-text { font-size: 13px; color: #c0c0d8; line-height: 1.4; }
.cpf-tl-time { font-size: 11px; color: #52526a; margin-top: 2px; }

/* appointment */
.cpf-appt-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: rgba(124,90,240,0.08);
  border: 1px solid rgba(124,90,240,0.2);
}
.cpf-appt-title { font-size: 13px; font-weight: 500; color: #c0c0d8; }
.cpf-appt-time { font-size: 12px; color: #7c5af0; margin-top: 3px; }

/* notes */
.cpf-notes-ta {
  width: 100%; flex: 1; min-height: 160px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 14px;
  font-size: 13px; color: #eeeef5; font-family: inherit;
  line-height: 1.6; resize: vertical; outline: none;
}
.cpf-notes-ta::placeholder { color: #52526a; }
.cpf-notes-ta:focus { border-color: rgba(124,90,240,0.45); box-shadow: 0 0 0 3px rgba(124,90,240,0.08); }

/* empty row */
.cpf-empty-row { font-size: 13px; color: #52526a; padding: 16px 0; text-align: center; }

/* ── Repeat / DTS lead badges ── */
.crm-lead-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 20px;
  margin-left: 6px; vertical-align: middle;
  line-height: 1.4; white-space: nowrap; flex-shrink: 0;
}
.crm-lead-badge-repeat {
  background: rgba(124,90,240,0.18);
  border: 1px solid rgba(124,90,240,0.4);
  color: #b99dff;
}
.crm-lead-badge-dts {
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.35);
  color: #fcd34d;
}
/* In profile modal */
.cpf-name-badges {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 6px; flex-wrap: wrap;
}
.cpf-name-badges .crm-lead-badge {
  font-size: 11px; padding: 3px 10px; margin-left: 0;
}

/* View Profile button styling */
#crmPage .crm-view-profile-btn {
  background: rgba(124,90,240,0.14);
  border-color: rgba(124,90,240,0.35);
  color: #b99dff !important;
  font-weight: 600;
}
#crmPage .crm-view-profile-btn:hover {
  background: rgba(124,90,240,0.24);
  color: #fff !important;
}

/* ── Pipeline config modal ─── */
.crm-pscfg-input {
  background: #1b1d28;
  border-color: rgba(255,255,255,0.1);
  color: #eeeef5;
  border-radius: 8px;
}
.crm-pscfg-del { background: transparent; border-color: rgba(255,255,255,0.1); color: #52526a; border-radius: 6px; }
.crm-pscfg-del:hover:not(:disabled) { border-color: rgba(239,68,68,0.5); color: #f87171; }
.crm-pscfg-add-btn { border-color: rgba(255,255,255,0.1); color: #52526a; border-radius: 8px; }
.crm-pscfg-add-btn:hover { border-color: rgba(124,90,240,0.45); color: #b99dff; }

/* ── Profit preview ─── */
.crm-order-profit-preview.is-pos { background: rgba(34,197,94,0.1); color: #7eeaab; border: 1px solid rgba(34,197,94,0.2); }
.crm-order-profit-preview.is-neg { background: rgba(239,68,68,0.08); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* ── Empty state ─── */
#crmPage .crm-empty-state p { color: var(--text-muted); }
#crmPage .crm-empty-state svg { opacity: 0.15; }

/* ── Post ref card ─── */
#crmPage .crm-post-ref {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  border-radius: 10px;
}
#crmPage .crm-post-lbl  { color: var(--text-muted); }
#crmPage .crm-post-text { color: var(--text-secondary); }
#crmPage .crm-post-icon { background: rgba(124,90,240,0.15); }

/* ── Scrollbar ─── */
#crmPage ::-webkit-scrollbar        { width: 4px; height: 4px; }
#crmPage ::-webkit-scrollbar-track  { background: transparent; }
#crmPage ::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.1); border-radius: 2px; }
#crmPage ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── DTS Return Picker Modal ─────────────────────────────────────────────── */
.dts-rp-panel { display: flex; flex-direction: column; height: min(80vh, 700px); max-height: 80vh; overflow: hidden; }
#dtsReturnPickerModal .panel-heading { justify-content: flex-start !important; align-items: flex-start !important; flex-direction: row !important; }
#dtsReturnPickerModal .panel-kicker,
#dtsReturnPickerModal h2 { text-align: left !important; }
.dts-rp-slider-wrap { flex: 1; min-height: 0; overflow: hidden; }
.dts-rp-slider {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.dts-rp-slider.is-slid { transform: translateX(-50%); }
.dts-rp-pane { width: 50%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dts-rp-search-wrap { padding: 12px 16px 8px; }
.dts-rp-search {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
.dts-rp-search:focus { border-color: rgba(155,123,255,0.5); }
.dts-rp-list { flex: 1; overflow-y: auto; padding: 0 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.dts-rp-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dts-rp-invoice-row:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.dts-rp-invoice-num { font-weight: 700; font-size: 0.9rem; }
.dts-rp-invoice-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.dts-rp-invoice-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(155,123,255,0.12);
  color: #9b7bff;
  border-radius: 6px;
  padding: 3px 8px;
}
.dts-rp-pane-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dts-rp-item-title { font-weight: 700; font-size: 0.95rem; }
.dts-rp-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 11px 14px;
}
.dts-rp-item-info { flex: 1; min-width: 0; }
.dts-rp-item-name { font-size: 0.9rem; font-weight: 600; }
.dts-rp-item-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.dts-rp-return-btn {
  flex-shrink: 0;
  background: rgba(248,113,113,0.12);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.dts-rp-return-btn:hover { background: rgba(248,113,113,0.22); }
.dts-rp-empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 0.88rem; }

/* ── Pricing skeleton loader ── */
@keyframes pricing-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.pricing-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 16px;
}
.pricing-skeleton-row {
  height: 18px;
  border-radius: 6px;
  width: 60%;
  background: linear-gradient(90deg, var(--color-surface-raised, #1e2120) 25%, var(--color-surface, #27252b) 50%, var(--color-surface-raised, #1e2120) 75%);
  background-size: 600px 100%;
  animation: pricing-shimmer 1.4s infinite linear;
}
.pricing-skeleton-row.wide { width: 90%; }
.pricing-skeleton-row.med  { width: 75%; }

/* ── Appointment Confirmation Page ──────────────────────────────────────── */
.ac-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ac-header {
  text-align: center;
  background: linear-gradient(135deg, rgba(20, 15, 30,0.95), rgba(14, 10, 22,0.98));
  border: 1px solid rgba(139,139,168,0.3);
  border-radius: 16px;
  padding: 22px 28px 18px;
}
.ac-title {
  font-size: 1.45rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin-bottom: 6px;
}
.ac-subtitle {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Body */
.ac-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ac-flow-arrow {
  text-align: left;
  padding-left: 52px;
  font-size: 1.4rem;
  color: rgba(139,139,168,0.45);
  line-height: 1.1;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Row = time badge + step card + outcomes */
.ac-row {
  display: grid;
  grid-template-columns: 72px 1fr 260px;
  gap: 12px;
  align-items: start;
}

/* Time badge */
.ac-time-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  gap: 5px;
  min-height: 70px;
}
.ac-time-icon { font-size: 1.3rem; }
.ac-time-blue   { background: rgba(37,99,235,0.22); color: #93c5fd; border: 1px solid rgba(37,99,235,0.3); }
.ac-time-orange { background: rgba(234,88,12,0.22); color: #fdba74; border: 1px solid rgba(234,88,12,0.3); }
.ac-time-red    { background: rgba(185,28,28,0.22); color: #fca5a5; border: 1px solid rgba(185,28,28,0.3); }

/* Step card */
.ac-step {
  border-radius: 12px;
  border: 1px solid rgba(139,139,168,0.2);
  background: rgba(13, 10, 20,0.7);
  overflow: hidden;
}
.ac-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ac-step-blue   .ac-step-head { background: rgba(37,99,235,0.18); border-bottom: 1px solid rgba(37,99,235,0.2); color: #93c5fd; }
.ac-step-orange .ac-step-head { background: rgba(234,88,12,0.18); border-bottom: 1px solid rgba(234,88,12,0.2); color: #fdba74; }
.ac-step-red    .ac-step-head { background: rgba(185,28,28,0.18); border-bottom: 1px solid rgba(185,28,28,0.2); color: #fca5a5; }
.ac-step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(37,99,235,0.35);
  color: #93c5fd;
  font-size: 1rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ac-step-num-orange { background: rgba(234,88,12,0.35); color: #fdba74; }
.ac-step-num-red    { background: rgba(185,28,28,0.4);  color: #fca5a5; }
.ac-step-title { color: inherit; }
.ac-step-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ac-send-label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; }
.ac-message-bubble {
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.86rem;
  color: var(--color-text);
  line-height: 1.5;
}
.ac-message-red {
  background: rgba(185,28,28,0.1);
  border-color: rgba(185,28,28,0.25);
}

/* No-show steps */
.ac-noshow-steps { display: flex; flex-direction: column; gap: 4px; }
.ac-noshow-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.4;
}
.ac-noshow-icon { flex-shrink: 0; }
.ac-noshow-arrow { font-size: 0.9rem; color: rgba(255,255,255,0.2); padding-left: 6px; }

/* Outcomes column */
.ac-outcomes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-outcome {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.ac-outcome-green { background: rgba(53, 21, 128,0.1);  border: 1px solid rgba(53, 21, 128,0.25); }
.ac-outcome-red   { background: rgba(185,28,28,0.1);  border: 1px solid rgba(185,28,28,0.22); }
.ac-outcome-gold  { background: rgba(180,130,0,0.1);  border: 1px solid rgba(251,191,36,0.25); }
.ac-outcome-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
}
.ac-outcome-title { font-weight: 700; font-size: 0.82rem; color: var(--color-text); }
.ac-outcome-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
}
.ac-icon-green { background: rgba(53, 21, 128,0.4);  color: #a686ef; }
.ac-icon-red   { background: rgba(185,28,28,0.4);  color: #fca5a5; }
.ac-icon-gold  { background: rgba(251,191,36,0.2); color: #fbbf24; font-size: 0.85rem; }
.ac-icon-phone { background: rgba(53, 21, 128,0.3);  color: #a686ef; font-size: 0.85rem; }
.ac-green { color: #a686ef; }
.ac-gold  { color: #fbbf24; }
.ac-crm-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 0.8rem; color: var(--color-text-muted);
}

/* Reminders */
.ac-reminders {
  background: linear-gradient(135deg, rgba(50,20,90,0.35), rgba(30,12,60,0.4));
  border: 1px solid rgba(147,51,234,0.25);
  border-radius: 14px;
  padding: 20px 22px;
}
.ac-reminders-title {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c4b5fd;
  margin-bottom: 16px;
}
.ac-reminders-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.ac-reminder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  min-width: 130px;
  flex: 1;
  max-width: 180px;
}
.ac-reminder-icon { font-size: 1.4rem; }
.ac-reminder-item strong { font-size: 0.8rem; color: var(--color-text); }
.ac-reminder-item span  { font-size: 0.74rem; color: var(--color-text-muted); line-height: 1.4; }
.ac-reminders-footer {
  text-align: center;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.03em;
}

/* Responsive */
@media (max-width: 900px) {
  .ac-row { grid-template-columns: 60px 1fr; }
  .ac-outcomes { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .ac-outcome { flex: 1; min-width: 140px; }
  .ac-flow-arrow { padding-left: 36px; }
  .ac-reminders-grid { gap: 16px; }
}

/* ── Lead Handling Page ─────────────────────────────────────────────────── */
.lh-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Header */
.lh-header {
  text-align: center;
  background: linear-gradient(135deg, rgba(20, 15, 30,0.95) 0%, rgba(14, 10, 22,0.98) 100%);
  border: 1px solid rgba(139,139,168,0.3);
  border-radius: 16px;
  padding: 24px 28px 20px;
}
.lh-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 6px;
}
.lh-subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.lh-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px 16px;
}
.lh-banner-sep { color: rgba(255,255,255,0.2); }

/* Body layout */
.lh-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

/* Flow */
.lh-flow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lh-arrow {
  text-align: center;
  font-size: 1.4rem;
  color: rgba(139,139,168,0.5);
  line-height: 1.2;
  padding: 2px 0;
}

/* Step cards */
.lh-step {
  border-radius: 14px;
  border: 1px solid rgba(139,139,168,0.2);
  background: rgba(13, 10, 20,0.7);
  overflow: hidden;
}
.lh-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.lh-step-head-blue  { background: rgba(37,99,235,0.18); border-bottom: 1px solid rgba(37,99,235,0.2); }
.lh-step-head-red   { background: rgba(185,28,28,0.18); border-bottom: 1px solid rgba(185,28,28,0.2); }
.lh-step-head-green { background: rgba(53, 21, 128,0.22); border-bottom: 1px solid rgba(53, 21, 128,0.2); }
.lh-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(37,99,235,0.35);
  color: #93c5fd;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lh-step-head-red .lh-step-num { background: rgba(185,28,28,0.4); color: #fca5a5; }
.lh-step-icon-x {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(185,28,28,0.4);
  color: #fca5a5;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lh-step-icon-check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(53, 21, 128,0.45);
  color: #a686ef;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lh-step-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lh-step-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.lh-step-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lh-step-body-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

/* Callout (anchored offer) */
.lh-callout {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.6;
}
.lh-callout-blue {
  background: rgba(37,99,235,0.1);
  border: 1px solid rgba(37,99,235,0.22);
  color: var(--color-text-muted);
}
.lh-callout-green {
  background: rgba(53, 21, 128,0.1);
  border: 1px solid rgba(53, 21, 128,0.25);
  color: var(--color-text-muted);
}
.lh-callout-green .lh-callout-label { color: #a686ef; }
.lh-callout-amber {
  background: rgba(180,83,9,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  color: var(--color-text-muted);
}
.lh-callout-amber .lh-callout-label { color: #fbbf24; }
.lh-cross-sell-quote {
  margin-top: 8px;
  font-style: italic;
  font-weight: 600;
  color: var(--color-text);
}
.lh-model-examples {
  padding-left: 16px;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.lh-callout-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #93c5fd;
  margin-bottom: 8px;
}

/* Follow-up list in step 2 */
.lh-followup-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}
.lh-followup-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.lh-followup-badge {
  background: rgba(37,99,235,0.25);
  color: #93c5fd;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 1px;
}
.lh-followup-emoji { flex-shrink: 0; }

/* Seen box in step 2 */
.lh-seen-box {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  min-width: 160px;
}
.lh-seen-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.lh-seen-quote {
  font-style: italic;
  color: var(--color-text);
  margin-top: 6px;
}

/* Ask pill */
.lh-ask-pill {
  background: rgba(185,28,28,0.25);
  border: 1px solid rgba(185,28,28,0.35);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fca5a5;
  text-align: center;
  flex-shrink: 0;
}
.lh-ask-pill-sm {
  background: rgba(37,99,235,0.2);
  border-color: rgba(37,99,235,0.3);
  color: #93c5fd;
  font-size: 0.88rem;
}

/* Emphasize box */
.lh-emphasize-box {
  flex: 1;
  background: rgba(185,28,28,0.08);
  border: 1px solid rgba(185,28,28,0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  min-width: 160px;
}
.lh-emphasize-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fca5a5;
  margin-bottom: 8px;
}
.lh-emphasize-box ul {
  padding-left: 14px;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.5;
}
.lh-emphasize-heart {
  font-size: 0.82rem;
  color: #f87171;
  font-weight: 600;
  margin-top: 4px;
}

/* Don't box (step 4) */
.lh-dont-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}
.lh-dont-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fca5a5;
  margin-bottom: 6px;
}
.lh-dont-box ul {
  padding-left: 14px;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lh-dont-box strong { color: var(--color-text); }

/* Tips box */
.lh-tips-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  min-width: 140px;
}
.lh-tips-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a686ef;
  margin-bottom: 6px;
}
.lh-tips-box ul {
  padding-left: 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Checklist (step 6) */
.lh-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex: 1;
}
.lh-checklist li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.lh-check { flex-shrink: 0; }
.lh-check-note { font-size: 0.78rem; color: rgba(255,255,255,0.35); }

/* Lock-in box */
.lh-lockin-box {
  background: rgba(53, 21, 128,0.12);
  border: 1px solid rgba(53, 21, 128,0.25);
  border-radius: 10px;
  padding: 14px;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  text-align: center;
  min-width: 130px;
  flex-shrink: 0;
}
.lh-lockin-icon { font-size: 1.5rem; margin-bottom: 6px; }
.lh-lockin-label { font-weight: 700; color: #a686ef; margin-bottom: 6px; font-size: 0.9rem; }

/* Sidebar */
.lh-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lh-sb-card {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(139,139,168,0.2);
}
.lh-sb-card-dark { background: rgba(13, 10, 20,0.7); }
.lh-sb-card-red  { background: rgba(25,8,8,0.75); border-color: rgba(185,28,28,0.25); }
.lh-sb-card-gold { background: rgba(20,16,4,0.8); border-color: rgba(251,191,36,0.2); }
.lh-sb-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text);
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 12px;
  text-align: center;
}
.lh-sb-card-red .lh-sb-title  { color: #fca5a5; background: rgba(185,28,28,0.18); }
.lh-sb-card-gold .lh-sb-title { color: #fbbf24; background: rgba(251,191,36,0.1); }

/* Follow-up rows in sidebar */
.lh-fu-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: 8px;
}
.lh-fu-row:last-child { margin-bottom: 0; }
.lh-fu-badge {
  background: rgba(37,99,235,0.25);
  color: #93c5fd;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 1px;
}
.lh-fu-emoji { flex-shrink: 0; }
.lh-fu-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.35);
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.lh-fu-group-label:first-of-type {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}

/* Seen */
.lh-sb-seen {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.lh-sb-eye { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }

/* Objections */
.lh-obj-block {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(185,28,28,0.15);
}
.lh-obj-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.lh-obj-q {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lh-obj-emoji { font-size: 1rem; }
.lh-obj-reply-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fca5a5;
  margin-bottom: 5px;
}
.lh-obj-reply {
  background: rgba(185,28,28,0.12);
  border-left: 3px solid rgba(185,28,28,0.4);
  border-radius: 0 6px 6px 0;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 5px;
}
.lh-obj-list {
  padding-left: 16px;
  margin: 0 0 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.lh-obj-bullets {
  list-style: disc;
  padding-left: 16px;
  margin: 0 0 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.lh-obj-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  font-style: italic;
}

/* Booking checklist */
.lh-booking-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.lh-booking-row:last-of-type { border-bottom: none; }
.lh-booking-icon { flex-shrink: 0; }
.lh-booking-label { flex-shrink: 0; font-weight: 600; color: var(--color-text); }
.lh-booking-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px;
  margin-left: 4px;
}
.lh-booking-done {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #a686ef;
}

/* Golden rules */
.lh-golden-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.lh-star { margin-right: 4px; }

/* Goal bar */
.lh-goal-bar {
  background: linear-gradient(135deg, rgba(20, 15, 30,0.95) 0%, rgba(14, 10, 22,0.98) 100%);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lh-goal-trophy { font-size: 2rem; flex-shrink: 0; }
.lh-goal-text { flex-shrink: 0; }
.lh-goal-headline {
  font-size: 0.95rem;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lh-goal-headline strong { color: #fbbf24; }
.lh-goal-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 3px;
}
.lh-goal-pillars {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.lh-goal-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  min-width: 80px;
}
.lh-goal-pillar-icon { font-size: 1.3rem; }
.lh-goal-pillar strong { font-size: 0.72rem; color: var(--color-text); }
.lh-goal-pillar span  { font-size: 0.68rem; color: var(--color-text-muted); line-height: 1.3; }

/* Responsive */
@media (max-width: 900px) {
  .lh-body { grid-template-columns: 1fr; }
  .lh-sidebar { order: -1; }
  .lh-step-body-row { flex-direction: column; }
  .lh-goal-pillars { justify-content: flex-start; }
  .lh-goal-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Inventory photo column ──────────────────────────────────────────────── */
.inv-photos-th {
  width: 72px;
  min-width: 60px;
  text-align: center;
  padding: 6px 4px;
}
.inv-photos-td {
  width: 72px;
  min-width: 60px;
  padding: 4px 6px;
  text-align: center;
  vertical-align: middle;
}
.inv-photo-thumb-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  color: var(--color-text, #ccc);
  transition: background 0.15s;
}
.inv-photo-thumb-btn:hover { background: var(--panel-border, rgba(255,255,255,.07)); }
.inv-photo-thumb-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  overflow: visible;
  background: var(--panel-border, rgba(255,255,255,.06));
  flex-shrink: 0;
}
.inv-photo-thumb-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.inv-photo-thumb-placeholder {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  opacity: 0.45;
}
.inv-photo-count-badge {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: var(--accent, #7c5af0);
  color: #000;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 5px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.inv-photo-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--color-text-muted, #888);
  transition: transform 0.2s;
  transform: rotate(0deg);
}
.inv-photo-chevron.is-open { transform: rotate(90deg); }
.inv-row-expanded { background: var(--panel, #130e1f) !important; }

/* Expand row */
.inv-photo-expand-row { display: none; }
.inv-photo-expand-row.is-open { display: table-row; }
.inv-photo-expand-td {
  padding: 0;
  background: var(--panel, #130e1f);
  border-bottom: 2px solid var(--accent, #7c5af0);
}

/* Loading state */
.inv-expand-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  color: var(--color-text-muted, #888);
  font-size: 0.85rem;
}
.inv-expand-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--accent, #7c5af0);
  border-radius: 50%;
  animation: inv-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes inv-spin { to { transform: rotate(360deg); } }

/* No-photo state */
.inv-expand-nophoto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: var(--color-text-muted, #888);
  font-size: 0.85rem;
}
.inv-expand-nophoto-icon { font-size: 1.3rem; opacity: 0.5; }
.inv-expand-add-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--panel-border, rgba(255,255,255,.12));
  color: var(--accent, #7c5af0);
  padding: 5px 14px;
  border-radius: 5px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.inv-expand-add-btn:hover { background: var(--panel-border, rgba(255,255,255,.07)); }

/* ── Mobile carousel ──────────────────────────────────────────────────────── */
.inv-expand-carousel {
  display: flex;
  flex-direction: column;
}
.inv-carousel-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000;
  max-height: 260px;
}
.inv-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.inv-carousel-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 260px;
  overflow: hidden;
}
.inv-expand-media {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
}
.inv-expand-file-badge {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--panel-border, rgba(255,255,255,.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted, #888);
  letter-spacing: .05em;
}
.inv-carousel-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.55);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  width: 32px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, opacity 0.15s;
  z-index: 2;
}
.inv-carousel-arr[data-dir="prev"] { left: 4px; }
.inv-carousel-arr[data-dir="next"] { right: 4px; }
.inv-carousel-arr:disabled { opacity: 0.25; pointer-events: none; }
.inv-carousel-arr:hover:not(:disabled) { background: rgba(0,0,0,.78); }
.inv-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
.inv-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: background 0.15s, transform 0.15s;
}
.inv-carousel-dot.is-active { background: #fff; transform: scale(1.25); }
.inv-expand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--panel, #130e1f);
}
.inv-expand-count { font-size: 0.78rem; color: var(--color-text-muted, #888); }
.inv-expand-addphoto-btn {
  background: none;
  border: 1px solid var(--panel-border, rgba(255,255,255,.12));
  color: var(--accent, #7c5af0);
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s;
}
.inv-expand-addphoto-btn:hover { background: var(--panel-border, rgba(255,255,255,.07)); }

/* ── Desktop filmstrip + detail panel ────────────────────────────────────── */
.inv-expand-desktop {
  display: flex;
  gap: 0;
}
.inv-expand-filmstrip-wrap {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 12px 14px;
  border-right: 1px solid var(--panel-border, rgba(255,255,255,.08));
}
.inv-expand-filmstrip-label {
  font-size: 0.72rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.inv-expand-filmstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border, rgba(255,255,255,.12)) transparent;
}
.inv-film-card {
  flex: 0 0 auto;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-border, rgba(255,255,255,.06));
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-film-card:hover { border-color: var(--accent, #7c5af0); transform: scale(1.04); }
.inv-film-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inv-film-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted, #888);
  letter-spacing: .05em;
}
.inv-film-zoom {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.7rem;
  background: rgba(0,0,0,.6);
  color: #fff;
  border-radius: 3px;
  padding: 1px 3px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.inv-film-card:hover .inv-film-zoom { opacity: 1; }
.inv-film-add {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border-radius: 6px;
  background: none;
  border: 1.5px dashed var(--panel-border, rgba(255,255,255,.18));
  color: var(--color-text-muted, #888);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.75rem;
  transition: border-color 0.15s, color 0.15s;
}
.inv-film-add:hover { border-color: var(--accent, #7c5af0); color: var(--accent, #7c5af0); }
.inv-film-add span:first-child { font-size: 1.4rem; line-height: 1; }

/* Detail sidebar */
.inv-expand-detail {
  flex: 0 0 200px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-expand-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--panel-border, rgba(255,255,255,.06));
  padding-bottom: 5px;
}
.inv-expand-detail-key { color: var(--color-text-muted, #888); flex-shrink: 0; }
.inv-expand-detail-val { color: var(--color-text, #ddd); text-align: right; font-size: 0.8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-expand-detail-actions { margin-top: auto; padding-top: 6px; }
.inv-expand-open-btn {
  width: 100%;
  padding: 7px 0;
  border-radius: 5px;
  background: var(--accent, #7c5af0);
  color: #000;
  font-weight: 700;
  font-size: 0.82rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.inv-expand-open-btn:hover { background: var(--accent-s, #9b7bff); }

/* Responsive: collapse detail panel on narrow screens */
@media (max-width: 679px) {
  .inv-expand-desktop { flex-direction: column; }
  .inv-expand-filmstrip-wrap { border-right: none; border-bottom: 1px solid var(--panel-border, rgba(255,255,255,.08)); }
  .inv-expand-detail { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .inv-expand-detail-row { flex: 1 1 calc(50% - 7px); flex-direction: column; gap: 1px; }
  .inv-expand-detail-val { text-align: left; }
  .inv-expand-detail-actions { flex: 1 1 100%; }
}

/* ── Inventory tile photo thumbnail ─────────────────────────────────────── */
.inv-tile-photo-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 148px;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 8px 20px 4px rgba(0,0,0,0.55);
}
.inv-tile-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(7,12,9,0.92) 100%
  );
  pointer-events: none;
}
.inv-tile-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124,90,240,.03);
}
.inv-tile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, opacity .2s ease;
}
button.inv-tile-photo-wrap:hover .inv-tile-photo-img,
button.inv-tile-photo-wrap:focus-visible .inv-tile-photo-img {
  transform: scale(1.04);
  opacity: 1;
}
.inv-tile-photo-placeholder {
  font-size: 2rem;
  opacity: 0.25;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.inv-tile-photo-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
  background: rgba(7,12,9,.72);
  color: rgba(255,255,255,.9);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 20px;
  padding: 3px 8px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.10);
}

/* ── Electronics tile grid: thumbnail on each card ───────────────────────── */

/* Row hover + open state */
#inventoryPage tbody tr[data-item-id]:not(.inv-photo-expand-row):hover {
  background: rgba(124,90,240,0.04);
}
#inventoryPage tbody tr[data-item-id].inv-row-expanded {
  background: rgba(124,90,240,0.05) !important;
}

/* Thumbnail: always visible, accent border on hover/open */
#inventoryPage tbody tr[data-item-id]:hover .inv-photo-thumb-wrap,
#inventoryPage tbody tr[data-item-id].inv-row-expanded .inv-photo-thumb-wrap {
  border: 1.5px solid rgba(124,90,240,0.45);
}
.inv-photo-thumb-wrap {
  border: 1.5px solid var(--panel-border, rgba(92, 80, 120,0.20));
  border-radius: 9px;
  width: 46px;
  height: 46px;
}
.inv-photo-thumb-img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
}
.inv-photo-thumb-placeholder {
  width: 46px;
  height: 46px;
}

/* Expand panel: concept-2 inner style */
.inv-photo-expand-td {
  background: rgba(14, 10, 22,0.98) !important;
  border-top: 1px solid var(--panel-border, rgba(92, 80, 120,0.20));
  border-bottom: 2px solid var(--accent, #7c5af0);
}
.inv-expand-desktop {
  animation: c2ExpandIn .18s ease both;
}
@keyframes c2ExpandIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Concept-2 filmstrip cards: taller, 4:3 */
.inv-film-card {
  width: 148px;
  height: 111px;
}
.inv-expand-filmstrip {
  scrollbar-color: rgba(124,90,240,.3) transparent;
}
.inv-expand-filmstrip::-webkit-scrollbar { height: 4px; }
.inv-expand-filmstrip::-webkit-scrollbar-thumb { background: rgba(124,90,240,.3); border-radius: 4px; }

/* ── Tile photo button ───────────────────────────────────────────────────── */
button.inv-tile-photo-wrap {
  cursor: pointer;
  background: none;
  padding: 0;
  text-align: center;
}
button.inv-tile-photo-wrap:hover .inv-tile-photo-img { opacity: 0.88; }
.inv-tile-photo-view-hint {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
  color: rgba(255,255,255,.9);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 8px 6px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
button.inv-tile-photo-wrap:hover .inv-tile-photo-view-hint,
button.inv-tile-photo-wrap:focus-visible .inv-tile-photo-view-hint { opacity: 1; }

/* ── Tile info button — inline next to title ─────────────────────────────── */
.inv-tile-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
  background: none;
  border: none;
  color: rgba(155,123,255,.55);
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, transform .15s;
  flex-shrink: 0;
}
.inv-tile-info-btn:hover {
  color: #9b7bff;
  transform: scale(1.15);
}
.inventory-item-tile { position: relative; }
.inventory-item-tile-main h3 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* ── Photo gallery overlay ───────────────────────────────────────────────── */
#tilePhotoGalleryOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
#tilePhotoGalleryOverlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.tpg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
}
.tpg-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(92vw, 860px);
  max-height: 92vh;
  background: #100c1a;
  border: 1px solid rgba(92, 80, 120,.25);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
}
.tpg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(92, 80, 120,.18);
  flex-shrink: 0;
}
.tpg-title {
  font-weight: 700;
  font-size: .9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0edf7;
}
.tpg-counter {
  font-size: .78rem;
  color: #9187a8;
  flex-shrink: 0;
}
.tpg-close {
  background: none;
  border: none;
  color: #9187a8;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: color .12s, background .12s;
  flex-shrink: 0;
}
.tpg-close:hover { background: rgba(255,255,255,.08); color: #f0edf7; }
.tpg-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a080f;
  overflow: hidden;
}
.tpg-media {
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
  display: block;
}
.tpg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #534a68;
  font-size: .85rem;
  padding: 40px;
}
.tpg-empty { font-size: 2rem; }
.tpg-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 1.5px dashed rgba(155,123,255,0.3);
  border-radius: 12px;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  margin: 20px;
  width: calc(100% - 40px);
}
.tpg-upload-empty:hover {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(155,123,255,0.04);
}
.tpg-upload-empty svg {
  width: 36px;
  height: 36px;
  opacity: 0.7;
}
.tpg-upload-empty span {
  font-size: 0.88rem;
  font-weight: 500;
}

.tpg-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(92, 80, 120,.15);
  flex-shrink: 0;
  background: #0d0a15;
}
.tpg-arr {
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #f0edf7;
  font-size: 1.4rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.tpg-arr:hover:not(:disabled) { background: rgba(124,90,240,.15); color: #9b7bff; }
.tpg-arr:disabled { opacity: .25; pointer-events: none; }
.tpg-thumbs {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,90,240,.25) transparent;
}
.tpg-thumbs::-webkit-scrollbar { height: 3px; }
.tpg-thumbs::-webkit-scrollbar-thumb { background: rgba(124,90,240,.25); border-radius: 3px; }
.tpg-thumb {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid transparent;
  background: rgba(255,255,255,.05);
  padding: 0;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.tpg-thumb:hover { border-color: rgba(155,123,255,.4); transform: scale(1.04); }
.tpg-thumb.is-active { border-color: #7c5af0; }
.tpg-thumb-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.tpg-loading {
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.tpg-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: #7c5af0;
  border-radius: 50%;
  animation: inv-spin .7s linear infinite;
}
.tpg-download-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--accent-strong);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(124, 90, 240, 0.28);
  background: rgba(124, 90, 240, 0.07);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tpg-download-all:hover { background: rgba(124, 90, 240, 0.14); }
.tpg-download-all svg { flex-shrink: 0; }

/* ── Expenses date-range toggle bar ─────────────────────────────────────── */
.expenses-range-toggle {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(139,139,168,.22);
  width: fit-content;
}
.expenses-range-btn {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(139,139,168,.18);
  color: rgba(189, 180, 210,.65);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.expenses-range-btn:last-child { border-right: none; }
.expenses-range-btn:hover { background: rgba(124,90,240,.08); color: #b8a8de; }
.expenses-range-btn.is-active {
  background: rgba(124,90,240,.15);
  color: #9b7bff;
  font-weight: 700;
}
@media (max-width: 600px) {
  .expenses-range-toggle {
    width: 100%;
    flex-wrap: wrap;
    border-radius: 12px;
  }
  .expenses-range-btn {
    flex: 1 1 auto;
    min-width: calc(33.33% - 1px);
    padding: 8px 4px;
    font-size: 0.7rem;
    text-align: center;
  }
}

/* ── Mobile metrics tile overrides ─────────────────────────────────────── */
@media (max-width: 640px) {
  /* 2-column grid for all stat cards in the metrics overview */
  #dashboardStatsGrid,
  #dashboardFinancialsGrid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  /* Compact horizontal card: label top, value big, meta tiny */
  #dashboardStatsGrid .stat-card,
  #dashboardFinancialsGrid .stat-card,
  #dashboardFinancialsGrid .stat-card-has-tip {
    padding: 14px 14px 12px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  #dashboardStatsGrid .stat-label,
  #dashboardFinancialsGrid .stat-label {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #dashboardStatsGrid .stat-value,
  #dashboardFinancialsGrid .stat-value {
    font-size: clamp(1.1rem, 5.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 4px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #dashboardStatsGrid .stat-meta,
  #dashboardFinancialsGrid .stat-meta {
    font-size: 0.62rem;
    line-height: 1.3;
    opacity: 0.55;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Success accent: left border stripe instead of full background tint */
  #dashboardStatsGrid .stat-card.stat-card-success,
  #dashboardFinancialsGrid .stat-card.stat-card-success,
  #dashboardFinancialsGrid .stat-card-has-tip.stat-card-success {
    border-left: 3px solid rgba(124,90,240,.55);
  }

  /* Inventory Cost tooltip: show below on mobile (no room above) */
  #dashboardFinancialsGrid .stat-card-tip {
    top: calc(100% + 8px);
    bottom: auto;
  }
  #dashboardFinancialsGrid .stat-card-tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--panel-border);
  }

  /* Range toggle: allow wrapping into two neat rows */
  .metrics-range-wrap {
    width: 100%;
  }

  /* Dashboard activity/analysis rows go single column on mobile */
  .dashboard-activity-row,
  .dashboard-analysis-row {
    grid-template-columns: 1fr;
  }
}

/* ── Metrics custom date range picker ───────────────────────────────────── */
.metrics-range-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}
.metrics-custom-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  background: #130e1d;
  border: 1px solid rgba(139,139,168,.28);
  border-radius: 12px;
  padding: 14px 16px;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  animation: metrics-range-in .15s ease;
  min-width: 280px;
}
.metrics-custom-dropdown:not([hidden]) {
  display: flex;
}
@keyframes metrics-range-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.metrics-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.metrics-custom-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: rgba(152, 140, 180,.7);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.metrics-custom-date {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(139,139,168,.28);
  border-radius: 8px;
  color: #d5cde8;
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color .14s;
  color-scheme: dark;
  width: 100%;
}
.metrics-custom-date:focus { border-color: rgba(124,90,240,.5); }
.metrics-custom-sep {
  color: rgba(152, 140, 180,.4);
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 16px;
}
.metrics-custom-apply {
  background: rgba(124,90,240,.15);
  border: 1px solid rgba(124,90,240,.3);
  border-radius: 8px;
  color: #9b7bff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 0;
  cursor: pointer;
  width: 100%;
  transition: background .14s;
}
.metrics-custom-apply:hover { background: rgba(124,90,240,.25); }

/* ── Financials subsection divider ──────────────────────────────────────── */
/* Stat card loading animation */
.stat-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 1em;
}
.stat-loading-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: stat-dot-pulse 1.2s ease-in-out infinite;
}
.stat-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.stat-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes stat-dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
  40%           { opacity: 0.9; transform: scale(1); }
}

.dashboard-financials-divider {
  border: none;
  border-top: 1px solid rgba(139,139,168,.14);
  margin: 18px 0 14px;
}
.dashboard-financials-grid {
  padding-top: 2px;
}

/* Inventory Cost hover tooltip */
.stat-card-has-tip {
  cursor: default;
  overflow: visible;
}
.stat-card-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 10px 14px;
  z-index: 9999;
  pointer-events: none;
}
.stat-card-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--panel-border);
}
.stat-card-has-tip:hover {
  z-index: 100;
}
.stat-card-has-tip:hover .stat-card-tip,
.stat-card-tip.is-open {
  display: block;
}
.stat-card-tip.is-open {
  position: fixed !important;
  top: auto !important;
  bottom: auto;
  left: auto;
  transform: none;
  z-index: 99999;
  min-width: 220px;
  pointer-events: none;
  background: rgba(16, 13, 22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.stat-card-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: .78rem;
  padding: 3px 0;
  color: var(--text-secondary, rgba(255,255,255,.55));
}
.stat-card-tip-row + .stat-card-tip-row {
  border-top: 1px solid rgba(139,139,168,.12);
}
.stat-card-tip-row span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--text, #eae8f0);
  font-weight: 500;
}

/* Performance section scope toggle layout */
.dashboard-activity-panel:nth-of-type(2) .panel-heading {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
}
.dashboard-activity-panel:nth-of-type(2) .panel-heading > div:first-child {
  width: auto;
}
#perfScopeToggle {
  width: fit-content;
  align-self: center;
}

/* ── Account Credentials page ───────────────────────────────────────────── */
.cred-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}
.cred-header {
  margin-bottom: 28px;
}
.cred-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.cred-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.cred-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cred-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cred-card-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.cred-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
a.cred-card-name:hover {
  color: var(--accent);
  text-decoration: underline;
}
.cred-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cred-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cred-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
.cred-value {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
  font-family: var(--font-mono, monospace);
  word-break: break-all;
  min-height: 1em;
}
.cred-value:empty::before {
  content: "—";
  color: var(--text-muted);
  font-family: inherit;
  opacity: 0.5;
}
.cred-value-masked {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
.cred-reveal-btn,
.cred-copy-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  padding: 0;
}
.cred-reveal-btn svg,
.cred-copy-btn svg {
  width: 15px;
  height: 15px;
}
.cred-reveal-btn:hover,
.cred-copy-btn:hover {
  color: var(--accent);
  background: rgba(124, 90, 240, 0.08);
  border-color: rgba(124, 90, 240, 0.2);
}
.cred-copy-btn.is-copied {
  color: var(--success, #7c5af0);
}

/* ── Switch Accounts Panel ───────────────────────────────────────────────── */
#switchAccountsMenu {
  position: relative;
}
.switch-accounts-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface-2, var(--panel-bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 6px;
  z-index: 9000;
  display: none;
}
.switch-accounts-panel.is-open {
  display: block;
}
.switch-accounts-header {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 6px;
}
.switch-accounts-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  transition: background 0.12s;
}
.switch-accounts-item:hover {
  background: var(--hover-bg, rgba(255,255,255,0.06));
}
.switch-accounts-item.is-active {
  background: rgba(124,90,240,0.08);
  color: var(--accent);
}
.switch-accounts-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.switch-accounts-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.switch-accounts-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(124,90,240,0.12);
  border-radius: 4px;
  padding: 1px 5px;
}
.switch-accounts-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Impersonation Banner ────────────────────────────────────────────────── */
.impersonation-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 14px;
  background: rgba(255, 170, 0, 0.12);
  border-bottom: 1px solid rgba(255, 170, 0, 0.3);
  color: #e6a800;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  z-index: 8000;
}
.impersonation-banner.is-hidden {
  display: none;
}
.impersonation-banner svg {
  flex-shrink: 0;
  opacity: 0.8;
}
.impersonation-banner strong {
  font-weight: 700;
}
.impersonation-exit-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255,170,0,0.4);
  border-radius: 5px;
  color: #e6a800;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 8px;
  transition: background 0.12s;
  white-space: nowrap;
}
.impersonation-exit-btn:hover {
  background: rgba(255,170,0,0.15);
}

/* ── Credential inline editing ───────────────────────────────────────────── */
.cred-inline-input {
  flex: 1;
  min-width: 0;
  background: var(--input-bg, var(--surface-2, rgba(255,255,255,0.06)));
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 6px;
  outline: none;
  width: 100%;
}
[data-cred-field]:not(:has(input)) {
  cursor: text;
}

/* ── Calendar Page ───────────────────────────────────────────────────────── */
.calendar-date-label {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 20px 4px;
  color: var(--text);
}

.calendar-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 20px 12px;
}

.cal-filter-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid var(--chip-color, #888);
  color: var(--chip-color, #888);
  background: transparent;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s;
}
.cal-filter-chip.is-active {
  background: color-mix(in srgb, var(--chip-color) 15%, transparent);
  opacity: 1;
}

/* Month grid container */
.calendar-list {
  padding: 0 20px 24px;
}

.cal-grid-wrap {
  overflow-x: auto;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border, rgba(255,255,255,0.08));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  overflow: hidden;
  min-width: 560px;
}

.cal-grid-header {
  background: var(--surface-2, rgba(255,255,255,0.04));
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #888);
  padding: 8px 4px;
}

.cal-grid-cell {
  background: var(--surface, var(--bg, #111));
  min-height: 72px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-grid-cell:hover {
  background: var(--surface-2, rgba(255,255,255,0.06));
}
.cal-grid-cell--empty {
  background: var(--surface, var(--bg, #111));
  opacity: 0.4;
  cursor: default;
}
.cal-grid-cell.is-today .cal-day-num {
  color: var(--accent, #4ade80);
  font-weight: 700;
}
.cal-grid-cell.is-selected {
  background: color-mix(in srgb, var(--accent, #4ade80) 10%, transparent);
  outline: 1px solid var(--accent, #4ade80);
  outline-offset: -1px;
}

.cal-day-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cal-day-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--accent, #4ade80);
  color: #000;
  border-radius: 8px;
  padding: 0 5px;
  line-height: 16px;
}

.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Day detail panel */
.cal-day-detail {
  margin-top: 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-day-detail.is-hidden { display: none; }

.cal-day-detail-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

/* Appointment cards */
.cal-appt-card {
  border-left: 3px solid var(--status-color, #888);
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cal-appt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cal-appt-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.cal-appt-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-appt-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted, #888);
}

.cal-appt-cal { font-style: italic; }

.cal-appt-address,
.cal-appt-phone {
  font-size: 12px;
  color: var(--muted, #888);
}

.cal-appt-notes {
  font-size: 12px;
  color: var(--muted, #888);
  white-space: pre-wrap;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  padding-top: 6px;
  margin-top: 2px;
}

/* ── iOS-style alert dialog ────────────────────────────────────────────────── */
#deleteConfirmModal .ios-alert-backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ios-alert-dialog {
  position: relative;
  width: min(270px, calc(100vw - 48px));
  background: rgba(28, 28, 30, 0.94);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.12);
}

.ios-alert-body {
  padding: 20px 16px 16px;
  text-align: center;
}

.ios-alert-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 5px;
  letter-spacing: -0.01em;
}

.ios-alert-message {
  font-size: 0.82rem;
  color: rgba(235, 235, 245, 0.6);
  margin: 0;
  line-height: 1.4;
}

.ios-alert-actions {
  display: flex;
  border-top: 0.5px solid rgba(255, 255, 255, 0.15);
}

.ios-alert-btn {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 120ms ease;
  border-radius: 0;
  white-space: nowrap;
}

.ios-alert-btn + .ios-alert-btn {
  border-left: 0.5px solid rgba(255, 255, 255, 0.15);
}

.ios-alert-btn:active { background: rgba(255,255,255,0.08); }

.ios-alert-btn-cancel {
  color: rgba(235, 235, 245, 0.85);
  font-weight: 400;
}

.ios-alert-btn-destructive {
  color: #ff453a;
  font-weight: 600;
}

@media (prefers-color-scheme: light) {
  .ios-alert-dialog {
    background: rgba(242, 242, 247, 0.95);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(0,0,0,0.12);
  }
  .ios-alert-title { color: #000; }
  .ios-alert-message { color: rgba(60, 60, 67, 0.6); }
  .ios-alert-actions { border-top-color: rgba(0,0,0,0.15); }
  .ios-alert-btn + .ios-alert-btn { border-left-color: rgba(0,0,0,0.15); }
  .ios-alert-btn-cancel { color: rgba(60,60,67,0.9); }
}


/* ── Inventory Add Item Drafts Panel ─────────────────────────────────────── */
.inv-drafts-panel {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.inv-drafts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.inv-drafts-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.inv-drafts-empty {
  color: var(--text-secondary, rgba(255,255,255,0.4));
  font-size: 0.88rem;
  margin: 0;
}

.inv-draft-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inv-draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-secondary, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
}

.inv-draft-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inv-draft-label {
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-draft-date {
  font-size: 0.78rem;
  color: var(--text-secondary, rgba(255,255,255,0.4));
}

.inv-draft-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}


/* ── Database Viewer ────────────────────────────────────────────────── */
.db-viewer-panel { display: flex; flex-direction: column; height: 100%; }
.db-viewer-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
  margin-top: 16px;
}
.db-viewer-sidebar {
  border-right: 1px solid var(--border-color, rgba(255,255,255,0.08));
  overflow-y: auto;
  padding: 8px 0;
}
.db-viewer-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; }
.db-viewer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-primary, #fff);
  cursor: pointer;
  text-align: left;
  width: 100%;
  gap: 8px;
  transition: background 0.12s;
}
.db-viewer-item:hover { background: var(--hover-bg, rgba(255,255,255,0.06)); }
.db-viewer-item.is-selected { background: var(--accent-subtle, rgba(99,179,237,0.15)); }
.db-viewer-item-name { font-size: 0.875rem; font-weight: 500; flex: 1; }
.db-viewer-item-meta { font-size: 0.75rem; color: var(--text-secondary, rgba(255,255,255,0.4)); white-space: nowrap; }

.db-viewer-preview {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.db-viewer-preview-header { display: flex; flex-direction: column; gap: 4px; }
.db-viewer-preview-name { font-size: 1.1rem; font-weight: 600; margin: 0; }
.db-viewer-preview-file { font-size: 0.8rem; color: var(--text-secondary, rgba(255,255,255,0.4)); margin: 0; font-family: var(--font-mono, monospace); }

.db-viewer-table-wrap { overflow-x: auto; }
.db-viewer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.db-viewer-table th {
  text-align: center;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, rgba(255,255,255,0.4));
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.db-viewer-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05)); text-align: center; }
.db-viewer-table tr:last-child td { border-bottom: none; }
.db-viewer-table tr:hover td { background: var(--hover-bg, rgba(255,255,255,0.03)); }
.db-viewer-key { font-family: var(--font-mono, monospace); font-size: 0.82rem; }
.db-viewer-type { color: var(--text-secondary, rgba(255,255,255,0.4)); font-size: 0.8rem; }
.db-viewer-count { font-variant-numeric: tabular-nums; }
.db-viewer-size { font-variant-numeric: tabular-nums; color: var(--text-secondary, rgba(255,255,255,0.4)); font-size: 0.8rem; }
.db-viewer-action { color: var(--text-secondary, rgba(255,255,255,0.3)); font-size: 0.9rem; text-align: right; padding-right: 8px; }
.db-viewer-key-row:hover .db-viewer-action { color: var(--accent, #63B3ED); }
.db-viewer-cell { font-family: var(--font-mono, monospace); font-size: 0.78rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.db-viewer-back-key { margin-bottom: 8px; }

.db-viewer-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.07));
  gap: 12px;
}
.db-viewer-page-info { font-size: 0.8rem; color: var(--text-secondary, rgba(255,255,255,0.4)); margin: 0; padding: 8px 0; }
.db-viewer-page-btns { display: flex; gap: 8px; }

.db-viewer-loading,
.db-viewer-empty {
  color: var(--text-secondary, rgba(255,255,255,0.35));
  font-size: 0.875rem;
  padding: 24px 12px;
  text-align: center;
}

/* ── CRM Calendar Panel ───────────────────────────────────────────── */
.crm-cal-panel {
  width: 381px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bg-primary); border-left: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
}
#crmPage .crm-cal-panel {
  background: var(--bg-secondary); border-left: 1px solid rgba(255,255,255,0.07);
}
#crmPage .crm-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 8px; flex-shrink: 0;
}
#crmPage .crm-cal-month-lbl {
  font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em;
}
#crmPage .crm-cal-nav {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  font-size: 20px; padding: 2px 6px; border-radius: 6px; line-height: 1;
  transition: color 0.15s, background 0.15s;
}
#crmPage .crm-cal-nav:hover { color: var(--accent-text); background: rgba(124,90,240,0.12); }
#crmPage .crm-cal-filter-row {
  display: flex; gap: 6px; padding: 0 12px 10px; flex-shrink: 0;
}
#crmPage .crm-cal-filter-btn {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--text-secondary); transition: all 0.15s;
}
#crmPage .crm-cal-filter-btn:hover { color: var(--accent-text); border-color: rgba(124,90,240,0.4); }
#crmPage .crm-cal-filter-btn.is-active {
  background: rgba(124,90,240,0.18); border-color: rgba(124,90,240,0.45);
  color: var(--accent-text);
}
#crmPage .crm-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 0; padding: 0 10px; flex-shrink: 0;
}
#crmPage .crm-cal-dow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--text-muted); text-align: center; padding: 4px 0 6px;
}
#crmPage .crm-cal-cell { display: flex; flex-direction: column; align-items: center; padding: 2px; min-height: 30px; }
#crmPage .crm-cal-day {
  cursor: pointer; border-radius: 6px; width: 28px; height: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; transition: background 0.12s;
}
#crmPage .crm-cal-day:hover { background: rgba(255,255,255,0.06); }
#crmPage .crm-cal-num { font-size: 12px; color: var(--text-primary); line-height: 1; }
#crmPage .crm-cal-day.is-today .crm-cal-num { color: var(--accent); font-weight: 700; }
#crmPage .crm-cal-day.is-selected { background: rgba(124,90,240,0.2); }
#crmPage .crm-cal-day.is-selected .crm-cal-num { color: var(--accent-text); font-weight: 600; }
#crmPage .crm-cal-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); margin-top: 2px; flex-shrink: 0;
}
#crmPage .crm-cal-day.is-selected .crm-cal-dot { background: var(--accent-text); }
#crmPage .crm-cal-day-section {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  border-top: 1px solid rgba(255,255,255,0.07); margin-top: 8px; padding-top: 10px;
}
#crmPage .crm-cal-day-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 14px 8px;
}
#crmPage .crm-cal-appt-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; }
#crmPage .crm-cal-empty { font-size: 12px; color: var(--text-muted); padding: 10px 14px; }
#crmPage .crm-cal-appt-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px;
  border-radius: 8px; margin: 0 6px; transition: background 0.12s;
  cursor: default;
}
#crmPage .crm-cal-appt-row:hover { background: rgba(255,255,255,0.04); }
#crmPage .crm-cal-appt-time {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
  padding-top: 2px; min-width: 48px; flex-shrink: 0;
}
#crmPage .crm-cal-appt-body { flex: 1; min-width: 0; }
#crmPage .crm-cal-appt-title { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#crmPage .crm-cal-appt-lead { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#crmPage .crm-cal-appt-status {
  font-size: 10px; font-weight: 600; padding: 3px 6px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06); color: var(--text-secondary);
  cursor: pointer; flex-shrink: 0; appearance: none; -webkit-appearance: none;
  max-width: 88px; text-align: center;
}
#crmPage .crm-cal-appt-status:focus { outline: none; border-color: rgba(124,90,240,0.5); }

@media (max-width: 900px) {#crmPage .crm-cal-panel { display: none; }
}

/* ── CRM Calendar Book Button ────────────────────────────────────── */
#crmPage .crm-cal-book-bar {
  padding: 12px 12px 4px;
  flex-shrink: 0;
}
#crmPage .crm-cal-book-btn {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 9px 14px;
  background: rgba(124,90,240,0.18); border: 1px solid rgba(124,90,240,0.4);
  border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--accent-text); transition: background 0.15s, border-color 0.15s;
  justify-content: center;
}
#crmPage .crm-cal-book-btn:hover {
  background: rgba(124,90,240,0.28); border-color: rgba(124,90,240,0.6);
}

/* ── CRM Search Hit Highlight ────────────────────────────────────── */
.crm-search-hit {
  background: rgba(124,90,240,0.32);
  color: #d8c9ff;
  border-radius: 3px;
  padding: 0 1px;
}

/* ── Dashboard tile drag & drop reordering ───────────────────────── */
.app-launcher-tile { touch-action: manipulation; }
.app-launcher-tile.is-tile-dragging {
  position: fixed;
  z-index: 9999;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  transform: scale(1.06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  cursor: grabbing;
}
.app-launcher-grid.is-reordering { cursor: grabbing; }
.app-launcher-grid.is-reordering .app-launcher-tile:not(.is-tile-dragging) {
  transition: transform 0.16s ease;
}
@media (prefers-reduced-motion: reduce) {
  .app-launcher-tile.is-tile-dragging { transform: none; }
  .app-launcher-grid.is-reordering .app-launcher-tile:not(.is-tile-dragging) { transition: none; }
}

/* ── CRM Settings gear + modal ───────────────────────────────────── */
.crm-settings-gear {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); padding: 5px; border-radius: 7px;
  transition: color 0.15s, background 0.15s;
}
.crm-settings-gear:hover { color: var(--accent-text); background: rgba(124,90,240,0.12); }

.crm-set-modal {
  width: min(860px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-primary); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,0.6);
}
.crm-set-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.crm-set-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text);
}
.crm-set-body { display: flex; min-height: 0; flex: 1; }
.crm-set-nav {
  width: 190px; flex-shrink: 0; padding: 14px 10px;
  display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid rgba(255,255,255,0.07); overflow-y: auto;
}
.crm-set-navbtn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  border-radius: 9px; font-size: 13px; font-family: inherit; text-align: left;
  color: var(--text-secondary); transition: background 0.14s, color 0.14s;
}
.crm-set-navbtn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.crm-set-navbtn.is-active { background: rgba(124,90,240,0.2); color: var(--accent-text); font-weight: 600; }

.crm-set-content { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px 24px; }
.crm-set-panel { display: none; flex-direction: column; gap: 2px; }
.crm-set-panel.is-active { display: flex; }

.crm-set-secure-note {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 13px; margin-bottom: 16px;
  background: rgba(124,90,240,0.1); border: 1px solid rgba(124,90,240,0.28);
  border-radius: 10px; font-size: 12px; line-height: 1.5; color: var(--text-secondary);
}
.crm-set-secure-note svg { flex-shrink: 0; margin-top: 1px; color: var(--accent-text); }
.crm-set-secure-note code {
  font-family: var(--font-mono, monospace); font-size: 11px;
  background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px;
}

.crm-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.crm-set-row-stack { flex-direction: column; align-items: stretch; gap: 7px; }
.crm-set-row-toggle { cursor: pointer; }
.crm-set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-set-label { font-size: 13px; color: var(--text-primary); }
.crm-set-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.crm-set-input, .crm-set-select, .crm-set-textarea {
  background: var(--input-bg); border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 13px;
  padding: 7px 10px; outline: none; transition: border-color 0.15s;
}
.crm-set-input, .crm-set-select { width: 210px; flex-shrink: 0; }
.crm-set-textarea { width: 100%; min-height: 62px; resize: vertical; line-height: 1.5; }
.crm-set-input:focus, .crm-set-select:focus, .crm-set-textarea:focus { border-color: rgba(124,90,240,0.6); }

.crm-set-switch {
  width: 40px; height: 23px; border-radius: 20px; flex-shrink: 0;
  background: rgba(255,255,255,0.13); position: relative; cursor: pointer;
  transition: background 0.18s;
}
.crm-set-switch.is-on { background: #7c5af0; }
.crm-set-switch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.crm-set-knob {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform 0.18s;
}
.crm-set-switch.is-on .crm-set-knob { transform: translateX(17px); }

.crm-set-guide { margin-bottom: 14px; border: 1px solid rgba(255,255,255,0.09); border-radius: 11px; overflow: hidden; }
.crm-set-guide-sum {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--accent-text);
  background: rgba(124,90,240,0.09); transition: background 0.14s;
}
.crm-set-guide-sum::-webkit-details-marker { display: none; }
.crm-set-guide-sum:hover { background: rgba(124,90,240,0.16); }
.crm-set-guide-body { padding: 13px 15px 15px; border-top: 1px solid rgba(255,255,255,0.07); }
.crm-set-guide-intro { font-size: 12px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.5; }
.crm-set-guide-steps { margin: 0; padding-left: 19px; display: flex; flex-direction: column; gap: 7px; }
.crm-set-guide-steps li { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.crm-set-guide-steps b { color: var(--text-primary); font-weight: 600; }
.crm-set-guide-steps code {
  font-family: var(--font-mono, monospace); font-size: 11px;
  background: rgba(0,0,0,0.32); padding: 1px 5px; border-radius: 4px; color: var(--text-secondary);
}

.crm-set-wizard-btn {
  width: 100%; padding: 10px 14px; margin-bottom: 16px;
  background: rgba(124,90,240,0.18); border: 1px solid rgba(124,90,240,0.42);
  border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--accent-text); font-family: inherit; transition: background 0.15s;
}
.crm-set-wizard-btn:hover { background: rgba(124,90,240,0.28); }

@media (max-width: 720px) {
  .crm-set-body { flex-direction: column; }
  .crm-set-nav {
    width: 100%; flex-direction: row; overflow-x: auto;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .crm-set-navbtn { white-space: nowrap; }
  .crm-set-row { flex-direction: column; align-items: stretch; gap: 7px; }
  .crm-set-row-toggle { flex-direction: row; align-items: center; }
  .crm-set-input, .crm-set-select { width: 100%; }
}

/* ── CRM light theme ─────────────────────────────────────────────
   The CRM palette is entirely tokens, so a light mode is a token
   swap. Applied to #crmPage and to modals (which mount on <body>).
   Contrast targets match the dark theme: body >=9:1, muted >=5.5:1. */
#crmPage.crm-theme-light,
.cpf-overlay.crm-theme-light,
.crm-modal-backdrop.crm-theme-light {
  --bg-primary:   #ffffff;
  --bg-secondary: #f4f4f8;
  --border:        rgba(15,16,24,0.10);
  --border-strong: rgba(15,16,24,0.18);
  --hover:         rgba(15,16,24,0.045);
  --input-bg:      #ffffff;
  --text-primary:   #16171f; /* ~16:1 on white */
  --text-secondary: #4a4b5c; /* ~9.1:1 */
  --text-muted:     #6b6c80; /* ~5.6:1 */

  --accent:        #6b3ef5;
  --accent-subtle: rgba(107,62,245,0.10);
  --accent-text:   #5a2fd8; /* ~7.2:1 on white — the dark theme's #b99dff fails here */

  --crm-active-from: #6b3ef5;
  --crm-active-via:  #8b5cf6;
  --crm-active-to:   #a855f7;
  --crm-send-from:   #6b3ef5;
  --crm-send-to:     #a855f7;
}

/* Borders written as white alphas for the dark ground would vanish on white */
#crmPage.crm-theme-light .crm-cal-panel,
#crmPage.crm-theme-light .crm-left,
#crmPage.crm-theme-light .crm-main { border-color: var(--border); }
#crmPage.crm-theme-light .crm-cal-day-section,
#crmPage.crm-theme-light .crm-cal-header { border-top-color: var(--border); }
#crmPage.crm-theme-light .crm-cal-day:hover { background: var(--hover); }
#crmPage.crm-theme-light .crm-cal-appt-row:hover { background: var(--hover); }
#crmPage.crm-theme-light .crm-cal-filter-btn,
#crmPage.crm-theme-light .crm-cal-appt-status {
  background: rgba(15,16,24,0.04); border-color: var(--border);
}
/* :not(.is-active) so hover doesn't outrank the active row's gradient */
#crmPage.crm-theme-light .crm-vtab:not(.is-active):hover,
#crmPage.crm-theme-light .crm-lead-row:not(.is-active):hover { background: var(--hover); }
#crmPage.crm-theme-light .crm-add-lead-btn { border-color: var(--border-strong); }

.crm-set-modal.crm-theme-light,
.cpf-overlay.crm-theme-light .crm-set-modal,
.cpf-overlay.crm-theme-light .cpf-modal {
  border-color: var(--border);
  box-shadow: 0 28px 70px rgba(15,16,24,0.22);
}
.cpf-overlay.crm-theme-light .crm-set-nav { border-right-color: var(--border); }
.cpf-overlay.crm-theme-light .crm-set-header { border-bottom-color: var(--border); }
.cpf-overlay.crm-theme-light .crm-set-row { border-bottom-color: var(--border); }
.cpf-overlay.crm-theme-light .crm-set-guide { border-color: var(--border); }
.cpf-overlay.crm-theme-light .crm-set-guide-body { border-top-color: var(--border); }
.cpf-overlay.crm-theme-light .crm-set-navbtn:hover { background: var(--hover); }
.cpf-overlay.crm-theme-light .crm-set-switch { background: rgba(15,16,24,0.18); }
.cpf-overlay.crm-theme-light .crm-set-guide-steps code,
.cpf-overlay.crm-theme-light .crm-set-secure-note code {
  background: rgba(15,16,24,0.07); color: var(--accent-text);
}
/* Dimmer scrim over a light page */
.cpf-overlay.crm-theme-light { background: rgba(15,16,24,0.35); }

/* ── CRM Unread filter tab ───────────────────────────────────────── */
#crmPage .crm-stab-unread { display: inline-flex; align-items: center; gap: 5px; }
#crmPage .crm-stab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 20px; font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--accent); color: #fff;
}
#crmPage .crm-stab-unread.is-active .crm-stab-count { background: var(--accent-text); color: #1b1230; }

/* ── CRM Settings: Facebook connection row ───────────────────────── */
.crm-set-fb-status {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--hover);
}
.crm-set-fb-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-muted);
}
.crm-set-fb-dot.is-on { background: #7c5af0; }
.crm-set-fb-text { font-size: 13px; color: var(--text-secondary); flex: 1; min-width: 140px; }
.crm-set-fb-text b { color: var(--text-primary); font-weight: 600; }
.crm-set-fb-btn {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: rgba(124,90,240,0.18); border: 1px solid rgba(124,90,240,0.42);
  color: var(--accent-text); transition: background 0.15s;
}
.crm-set-fb-btn:hover { background: rgba(124,90,240,0.28); }
.crm-set-fb-btn.is-danger {
  background: rgba(220,38,38,0.14); border-color: rgba(220,38,38,0.4); color: #f87171;
}
.crm-set-fb-btn.is-danger:hover { background: rgba(220,38,38,0.24); }

/* ── CRM Audit: card tiles + per-period conversation lists ───────── */
#crmPage .crm-audit-results { flex-shrink: 0; }
#crmPage .crm-audit-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  background: none; border: none; border-radius: 0; overflow: visible;
}
#crmPage .crm-audit-period {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
#crmPage .crm-audit-period .crm-audit-col-head {
  display: flex; align-items: baseline; gap: 9px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-secondary);
}
#crmPage .crm-audit-col-period {
  font-size: 13px; font-weight: 700; color: var(--accent-text);
  background: var(--accent-subtle); border-radius: 6px; padding: 2px 9px;
}
#crmPage .crm-audit-col-dates { font-size: 11px; color: var(--text-muted); margin: 0; }

#crmPage .crm-audit-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; padding: 14px 16px;
}
#crmPage .crm-audit-tile {
  background: var(--hover); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 11px; min-width: 0;
}
#crmPage .crm-audit-tile-val {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1.2;
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
}
#crmPage .crm-audit-tile-lbl {
  font-size: 10.5px; color: var(--text-muted); margin-top: 3px;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3;
}
#crmPage .crm-audit-delta { font-size: 10px; font-weight: 700; white-space: nowrap; }
#crmPage .crm-audit-delta.is-up { color: #7c5af0; }
#crmPage .crm-audit-delta.is-down { color: #f87171; }

#crmPage .crm-audit-conv-head {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
#crmPage .crm-audit-conv-n {
  background: var(--accent-subtle); color: var(--accent-text);
  border-radius: 20px; padding: 1px 7px; font-size: 10px; letter-spacing: 0;
}
#crmPage .crm-audit-conv-list {
  display: flex; flex-direction: column;
  max-height: 320px; overflow-y: auto;
}
#crmPage .crm-audit-conv {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 16px; border: none; background: none; cursor: pointer;
  text-align: left; font-family: inherit;
  border-top: 1px solid var(--border); transition: background 0.13s;
}
#crmPage .crm-audit-conv:first-child { border-top: none; }
#crmPage .crm-audit-conv:hover { background: var(--hover); }
#crmPage .crm-audit-conv-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
#crmPage .crm-audit-conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#crmPage .crm-audit-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#crmPage .crm-audit-conv-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#crmPage .crm-audit-conv-time { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }
#crmPage .crm-audit-conv-meta { display: flex; align-items: center; gap: 7px; }
#crmPage .crm-audit-conv-count { font-size: 10.5px; color: var(--text-muted); }
#crmPage .crm-audit-conv-prev {
  font-size: 11.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#crmPage .crm-audit-conv-empty { padding: 16px; font-size: 12px; color: var(--text-muted); }

@media (max-width: 1000px) {
  #crmPage .crm-audit-cols { grid-template-columns: 1fr; }
}

/* ── CRM Log Order modal: category + line items ──────────────────── */
.crm-order-modal { width: min(560px, 94vw); }
.crm-ord-cat { display: flex; gap: 7px; }
.crm-ord-cat-btn {
  flex: 1; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.15s;
}
.crm-ord-cat-btn:hover { color: var(--accent-text); border-color: rgba(124,90,240,0.4); }
.crm-ord-cat-btn.is-active {
  background: rgba(124,90,240,0.2); border-color: rgba(124,90,240,0.5); color: var(--accent-text);
}

.crm-ord-lines { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.crm-ord-line {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 11px; background: rgba(255,255,255,0.02);
}
.crm-ord-line-main { display: flex; align-items: flex-end; gap: 8px; }
.crm-ord-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-ord-f > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.crm-ord-f-model { flex: 1 1 auto; min-width: 0; }
.crm-ord-f-qty { width: 68px; flex: 0 0 auto; }
.crm-ord-f-offer { width: 104px; flex: 0 0 auto; }
.crm-ord-f input, .crm-ord-f select { width: 100%; min-width: 0; }
.crm-ord-del {
  flex: 0 0 auto; width: 26px; height: 30px; border-radius: 7px; cursor: pointer;
  background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.3);
  color: #f87171; font-size: 12px; line-height: 1;
}
.crm-ord-del:hover { background: rgba(220,38,38,0.24); }
.crm-ord-line-sub {
  font-size: 11px; color: var(--text-muted); margin-top: 6px;
  font-variant-numeric: tabular-nums; min-height: 13px;
}
.crm-ord-add {
  align-self: flex-start; margin-top: 9px; padding: 7px 13px;
  border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: inherit; background: none;
  border: 1px dashed rgba(124,90,240,0.45); color: var(--accent-text);
  transition: background 0.15s;
}
.crm-ord-add:hover { background: rgba(124,90,240,0.14); }
.crm-ord-total {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  background: rgba(124,90,240,0.12); border: 1px solid rgba(124,90,240,0.28);
}
.crm-ord-total:empty { display: none; }
.crm-ord-total-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
}
.crm-ord-total-val {
  font-size: 19px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.crm-ord-total-sub { font-size: 11px; color: var(--text-muted); margin-left: auto; }

@media (max-width: 560px) {
  .crm-ord-line-main { flex-wrap: wrap; }
  .crm-ord-f-model { flex: 1 1 100%; }
  .crm-ord-f-qty, .crm-ord-f-offer { flex: 1 1 0; width: auto; }
}

/* ── CRM message bubble width ────────────────────────────────────
   The cap was two nested 75% limits (wrap × bubble ≈ 56% of the row),
   which made long messages wrap early. Let the wrap be the single
   constraint so bubbles run ~60% wider before wrapping. */
#crmPage .crm-msg-wrap { max-width: 90%; }
#crmPage .crm-bubble { max-width: 100%; }

/* ── CRM conversation header ─────────────────────────────────────
   With five action buttons the info block was being crushed: the
   name truncated to a few characters and the subtitle wrapped to
   six lines. Let the actions keep their size and wrap as a unit,
   and let the name/subtitle ellipsis instead of squeezing. */
#crmPage .crm-rhead { flex-wrap: wrap; align-items: center; }
#crmPage .crm-rhead-info { flex: 1 1 180px; min-width: 0; }
#crmPage .crm-rhead-name,
#crmPage .crm-rhead-sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#crmPage .crm-rhead-actions {
  flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end;
  margin-left: auto;
}

/* ── Log Order: model add button + payment method cards ──────────── */
.crm-ord-model-row { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.crm-ord-model-row select { flex: 1; min-width: 0; }
.crm-ord-model-add {
  flex: 0 0 auto; width: 30px; border-radius: 8px; cursor: pointer;
  font-size: 16px; line-height: 1; font-family: inherit;
  background: rgba(124,90,240,0.16); border: 1px solid rgba(124,90,240,0.4);
  color: var(--accent-text); transition: background 0.15s;
}
.crm-ord-model-add:hover { background: rgba(124,90,240,0.3); }

.crm-ord-pay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.crm-ord-pay-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.15s; min-width: 0;
}
.crm-ord-pay-btn:hover { border-color: rgba(124,90,240,0.45); color: var(--accent-text); }
.crm-ord-pay-btn.is-active {
  background: rgba(124,90,240,0.2); border-color: rgba(124,90,240,0.6);
  color: var(--accent-text);
}
.crm-ord-pay-icon { font-size: 18px; line-height: 1; }
.crm-ord-pay-lbl {
  font-size: 11px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Driver appointment rows (CRM lead-list styling) ──────────────
   The driver page sits outside #crmPage, so it doesn't inherit the
   CRM palette tokens — these values mirror the lead-list look. */
.driver-appt-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 11px; margin-bottom: 6px;
  border-radius: 10px; border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  transition: background 0.14s, border-color 0.14s;
}
.driver-appt-row:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.09);
}
.driver-appt-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.driver-appt-body { flex: 1; min-width: 0; }
.driver-appt-name-row { display: flex; align-items: baseline; gap: 8px; }
.driver-appt-name {
  font-size: 14px; font-weight: 600; color: #eeeef5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.driver-appt-time {
  /* match the order title */
  font-size: 14px; font-weight: 600; color: #eeeef5;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.driver-appt-meta {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px; flex-wrap: wrap;
}
.driver-appt-pill {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.driver-appt-prev {
  font-size: 12px; color: rgba(238,238,245,0.6); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.driver-appt-sub { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.driver-appt-sub:empty { display: none; }
.driver-appt-link {
  font-size: 11.5px; color: rgba(238,238,245,0.6);
  text-decoration: none; border-bottom: 1px dotted rgba(238,238,245,0.28);
}
.driver-appt-link:hover { color: #987dd8; border-bottom-color: #987dd8; }
.driver-appt-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 2px;
}
.driver-appt-btn {
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; font-family: inherit; white-space: nowrap;
  background: rgba(124,90,240,0.16); border: 1px solid rgba(124,90,240,0.4);
  color: #987dd8; transition: background 0.15s;
}
.driver-appt-btn:hover { background: rgba(124,90,240,0.28); }
.driver-appt-btn.is-danger {
  background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.32);
  color: #f87171; padding: 6px 9px;
}
.driver-appt-btn.is-danger:hover { background: rgba(220,38,38,0.24); }

@media (max-width: 560px) {
  .driver-appt-row { flex-wrap: wrap; }
  .driver-appt-actions { width: 100%; justify-content: flex-end; }
}

/* ── Book Appointment: inline order builder ──────────────────────── */
.crm-appt-order {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-top: 2px;
}
.crm-appt-order-sum {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 13px; font-weight: 600;
  color: var(--accent-text); background: rgba(124,90,240,0.09);
}
.crm-appt-order-body {
  padding: 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.crm-appt-order-hint {
  margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}

/* ── CRM pipeline selector bar ───────────────────────────────────── */
#crmPage .crm-pipe-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-primary); flex-shrink: 0;
}
#crmPage .crm-pipe-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#crmPage .crm-pipe-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.15s;
}
#crmPage .crm-pipe-tab:hover { color: var(--accent-text); border-color: rgba(124,90,240,0.4); }
#crmPage .crm-pipe-tab.is-active {
  background: rgba(124,90,240,0.2); border-color: rgba(124,90,240,0.55); color: var(--accent-text);
}
#crmPage .crm-pipe-tab-n {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
  background: rgba(255,255,255,0.1);
}
#crmPage .crm-pipe-tab.is-active .crm-pipe-tab-n { background: rgba(124,90,240,0.35); }
#crmPage .crm-pipe-add {
  padding: 5px 11px; border-radius: 20px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit; background: none;
  border: 1px dashed rgba(124,90,240,0.45); color: var(--accent-text);
  transition: background 0.15s;
}
#crmPage .crm-pipe-add:hover { background: rgba(124,90,240,0.14); }
#crmPage .crm-pipe-bar-actions { margin-left: auto; display: flex; gap: 6px; }

/* ── Opportunity cards ───────────────────────────────────────────── */
#crmPage .crm-pipeline-col-value {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  padding: 0 10px 6px; font-variant-numeric: tabular-nums;
}
#crmPage .crm-opp-card {
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 11px; margin-bottom: 7px; cursor: pointer;
  transition: border-color 0.14s, transform 0.1s, box-shadow 0.14s;
}
#crmPage .crm-opp-card:hover {
  border-color: rgba(124,90,240,0.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
#crmPage .crm-opp-card.is-dragging { opacity: 0.5; transform: scale(0.97); }
#crmPage .crm-opp-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  line-height: 1.35; margin-bottom: 7px;
}
#crmPage .crm-opp-lead { display: flex; align-items: center; gap: 6px; min-width: 0; }
#crmPage .crm-opp-av {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
}
#crmPage .crm-opp-lead-name {
  font-size: 11.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#crmPage .crm-opp-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 8px;
}
#crmPage .crm-opp-value {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
#crmPage .crm-opp-time { font-size: 10.5px; color: var(--text-muted); }
#crmPage .cpf-opp-row { cursor: pointer; }
#crmPage .cpf-opp-row:hover { background: rgba(255,255,255,0.04); }
.cpf-opp-row { cursor: pointer; }

/* ── CRM lead status selector ────────────────────────────────────
   Replaces the old numbered progression bar: the lead's status is a
   flat set of states, not a pipeline the lead advances through. */
#crmPage .crm-stage-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px;
}
#crmPage .crm-status-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted); margin-right: 3px;
}
#crmPage .crm-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 20px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; font-family: inherit; white-space: nowrap;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.14s;
}
#crmPage .crm-status-chip:hover {
  background: rgba(255,255,255,0.07); color: var(--text-primary);
}
#crmPage .crm-status-chip.is-current { font-weight: 700; }
#crmPage .crm-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; opacity: 0.55;
}
#crmPage .crm-status-chip.is-current .crm-status-dot { opacity: 1; }

/* ── Client-type labels (DTS / Electronics) ──────────────────────── */
.crm-lead-badge-elec {
  background: rgba(96,165,250,0.15);
  border: 1px solid rgba(96,165,250,0.38);
  color: #93c5fd;
}
/* Compact in the lead list so long names still fit */
#crmPage .crm-lname-row .crm-lead-badge {
  font-size: 8.5px; padding: 1px 5px; margin-left: 4px; flex-shrink: 0;
}
#crmPage .crm-lead-row.is-active .crm-lname-row .crm-lead-badge {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

/* ── Opportunity card edit affordance ────────────────────────────── */
#crmPage .crm-opp-card { position: relative; }
#crmPage .crm-opp-edit {
  position: absolute; top: 7px; right: 7px;
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid transparent;
  color: var(--text-muted); opacity: 0; transition: opacity 0.14s, color 0.14s, background 0.14s;
}
#crmPage .crm-opp-card:hover .crm-opp-edit { opacity: 1; }
#crmPage .crm-opp-edit:focus-visible { opacity: 1; outline: 2px solid var(--accent-text); outline-offset: 1px; }
#crmPage .crm-opp-edit:hover {
  background: rgba(124,90,240,0.22); color: var(--accent-text);
}
/* Keep the title clear of the button */
#crmPage .crm-opp-card .crm-opp-title { padding-right: 24px; }

/* ── Lead row: status inline to the right of the name ────────────── */
#crmPage .crm-lname-row {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
#crmPage .crm-lname-row .crm-lname { flex: 0 1 auto; min-width: 0; }
#crmPage .crm-lname-row .crm-stage-pill { flex: 0 0 auto; }
#crmPage .crm-lname-row .crm-ltime { margin-left: auto; flex-shrink: 0; }
#crmPage .crm-lname-row .crm-unread-dot { flex-shrink: 0; }
/* Active row keeps the pill readable on the purple gradient */
#crmPage .crm-lead-row.is-active .crm-lname-row .crm-stage-pill {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}

/* ── Lead filters: All + Unread chips, statuses in a dropdown ────── */
#crmPage .crm-stage-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; flex-wrap: nowrap;
}
#crmPage .crm-stage-tabs .crm-stab { flex: 0 0 auto; }
#crmPage .crm-status-filter {
  flex: 1 1 auto; min-width: 0;
  padding: 5px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text-secondary); outline: none; transition: all 0.15s;
}
#crmPage .crm-status-filter:hover,
#crmPage .crm-status-filter:focus { border-color: rgba(124,90,240,0.55); }
#crmPage .crm-status-filter.is-active {
  background: rgba(124,90,240,0.2); border-color: rgba(124,90,240,0.55);
  color: var(--accent-text);
}

/* ── CRM Settings: appointment slot preview ──────────────────────── */
.crm-set-slot-preview { margin-top: 12px; }
.crm-set-slot-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.crm-set-slot-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 132px; overflow-y: auto;
}
.crm-set-slot {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: rgba(124,90,240,0.14); border: 1px solid rgba(124,90,240,0.28);
  color: var(--accent-text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── CRM Automations ─────────────────────────────────────────────── */
#crmPage .crm-gear-lbl { font-size: 12px; font-weight: 600; margin-left: 5px; }
#crmPage .crm-settings-gear#crmAutomationsBtn { padding: 5px 10px 5px 7px; }

#crmPage .crm-auto-page {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--bg-secondary); overflow: hidden;
}
#crmPage .crm-auto-page.is-hidden { display: none; }
#crmPage .crm-auto-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-primary); flex-shrink: 0;
}
#crmPage .crm-auto-back {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 15px; line-height: 1;
}
#crmPage .crm-auto-back:hover { color: var(--accent-text); border-color: rgba(124,90,240,0.45); }
#crmPage .crm-auto-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
#crmPage .crm-auto-count {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: var(--accent-subtle); color: var(--accent-text);
}
#crmPage .crm-auto-new {
  margin-left: auto; padding: 8px 15px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  background: rgba(124,90,240,0.2); border: 1px solid rgba(124,90,240,0.5);
  color: var(--accent-text); transition: background 0.15s;
}
#crmPage .crm-auto-new:hover { background: rgba(124,90,240,0.32); }

#crmPage .crm-auto-list { flex: 1; overflow-y: auto; padding: 14px 18px; }
#crmPage .crm-auto-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 11px;
  background: var(--bg-primary); border: 1px solid var(--border);
  transition: border-color 0.14s, background 0.14s;
}
#crmPage .crm-auto-row:hover { border-color: rgba(124,90,240,0.45); background: var(--hover); }
#crmPage .crm-auto-row-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
#crmPage .crm-auto-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#crmPage .crm-auto-sub { font-size: 11.5px; color: var(--text-muted); }
#crmPage .crm-auto-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
#crmPage .crm-auto-toggle {
  width: 36px; height: 21px; border-radius: 20px; flex-shrink: 0; cursor: pointer;
  background: rgba(255,255,255,0.14); position: relative; transition: background 0.18s;
}
#crmPage .crm-auto-toggle.is-on { background: #6d4de0; }
#crmPage .crm-auto-knob {
  position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform 0.18s;
}
#crmPage .crm-auto-toggle.is-on .crm-auto-knob { transform: translateX(15px); }

.crm-auto-mini {
  padding: 5px 10px; border-radius: 7px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.14s;
}
.crm-auto-mini:hover:not(:disabled) { color: var(--accent-text); border-color: rgba(124,90,240,0.45); }
.crm-auto-mini:disabled { opacity: 0.35; cursor: default; }
.crm-auto-mini.is-danger { color: #f87171; }
.crm-auto-mini.is-danger:hover { background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.4); }

#crmPage .crm-auto-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
#crmPage .crm-auto-empty-icon { font-size: 34px; margin-bottom: 10px; }
#crmPage .crm-auto-empty p { margin: 0 0 6px; font-size: 14px; color: var(--text-secondary); }
#crmPage .crm-auto-empty-sub { font-size: 12px !important; max-width: 380px; margin: 0 auto !important; line-height: 1.55; }

/* ── Builder ──────────────────────────────────────────────────────── */
.crm-autob {
  width: min(720px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,0.6);
}
.crm-autob-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-secondary); flex-shrink: 0;
}
.crm-autob-name {
  flex: 1; min-width: 160px; padding: 7px 11px; border-radius: 8px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text-primary); outline: none;
}
.crm-autob-name:focus { border-color: rgba(124,90,240,0.55); }
.crm-autob-head-actions { display: flex; align-items: center; gap: 10px; }
.crm-autob-enable { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.crm-autob-canvas { flex: 1; overflow-y: auto; padding: 20px 22px 28px; }

.crm-auto-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
}
.crm-auto-card.is-trigger { border-color: rgba(124,90,240,0.45); background: rgba(124,90,240,0.07); }
.crm-auto-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.crm-auto-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 20px;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: rgba(255,255,255,0.08); color: var(--text-secondary);
}
.crm-auto-badge.is-trigger { background: rgba(124,90,240,0.25); color: var(--accent-text); }
.crm-auto-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; }
.crm-auto-card-tools { display: flex; gap: 5px; margin-left: auto; }
.crm-auto-card-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; }
.crm-auto-card-body { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.crm-auto-card-body:empty { display: none; }
.crm-auto-pick { flex: 1; min-width: 0; }

.crm-auto-f { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.crm-auto-f > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.crm-auto-row-f { display: flex; gap: 9px; }
.crm-auto-ta { min-height: 60px; resize: vertical; line-height: 1.5; font-family: inherit; }
.crm-auto-hint { font-size: 11px; color: var(--text-muted); }

.crm-auto-conn { display: flex; flex-direction: column; align-items: center; gap: 0; }
.crm-auto-line { width: 2px; height: 14px; background: var(--border); }
.crm-auto-plus {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); border: 1px dashed rgba(124,90,240,0.5);
  color: var(--accent-text); font-size: 14px; line-height: 1; font-family: inherit;
  transition: background 0.14s;
}
.crm-auto-plus:hover { background: rgba(124,90,240,0.18); }
.crm-auto-plus.is-end {
  width: auto; height: auto; border-radius: 20px; padding: 6px 14px;
  font-size: 12px; font-weight: 600;
}

.crm-auto-cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 12px 0 7px;
}
.crm-auto-pickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.crm-auto-pickbtn {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.14s;
}
.crm-auto-pickbtn:hover {
  background: rgba(124,90,240,0.16); border-color: rgba(124,90,240,0.5); color: var(--accent-text);
}
.crm-auto-pickicon { font-size: 15px; flex-shrink: 0; }

@media (max-width: 560px) {
  .crm-auto-pickgrid { grid-template-columns: 1fr; }
  .crm-auto-row-f { flex-direction: column; }
}

/* ── Modal layering ──────────────────────────────────────────────
   .crm-modal-backdrop (z 200) opened from inside a .cpf-overlay
   (z 9999) — e.g. the automation builder's "Add a step" picker —
   rendered BEHIND it. Any backdrop that follows an open overlay in
   the DOM must stack above it. */
.cpf-overlay ~ .crm-modal-backdrop,
#crmAutoPicker {
  z-index: 10000;
}

/* ── Automation builder: cancellation rules + history ────────────── */
.crm-autob-rules {
  padding: 12px 18px 14px; border-top: 1px solid var(--border);
  background: var(--bg-secondary); flex-shrink: 0;
}
.crm-autob-rules-lbl {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 9px;
}
.crm-autob-rule {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 12.5px; color: var(--text-secondary);
  padding: 6px 10px; margin-bottom: 5px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  transition: border-color 0.14s, background 0.14s;
  white-space: nowrap;
}
.crm-autob-rule:last-child { margin-bottom: 0; }
.crm-autob-rule:hover { border-color: rgba(124,90,240,0.4); }
.crm-autob-rule:has(input:checked) {
  border-color: rgba(124,90,240,0.55); background: rgba(124,90,240,0.12);
  color: var(--text-primary);
}
.crm-autob-rule input {
  accent-color: #7c5af0; flex-shrink: 0; margin: 0;
  /* the app styles inputs at width:100% — pin the checkbox to its real size */
  width: 15px; height: 15px;
}

.crm-autoh {
  width: min(680px, 95vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,0.6);
}
.crm-autoh-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-secondary); flex-shrink: 0;
}
.crm-autoh-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.crm-autoh-body { flex: 1; overflow-y: auto; padding: 10px 14px 18px; }
.crm-autoh-run { border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; overflow: hidden; }
.crm-autoh-sum {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  padding: 10px 13px; flex-wrap: wrap;
}
.crm-autoh-sum::-webkit-details-marker { display: none; }
.crm-autoh-sum:hover { background: var(--hover); }
.crm-autoh-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-autoh-contact { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.crm-autoh-status { font-size: 11.5px; font-weight: 600; }
.crm-autoh-when { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.crm-autoh-steps {
  border-top: 1px solid var(--border); padding: 9px 13px 11px;
  display: flex; flex-direction: column; gap: 5px; background: var(--bg-secondary);
}
.crm-autoh-line { font-size: 12px; color: var(--text-secondary); display: flex; gap: 9px; }
.crm-autoh-time { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── Client profile: Automations tab ─────────────────────────────── */
.cpf-auto-list { display: flex; flex-direction: column; gap: 7px; }
.cpf-auto-run { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cpf-auto-sum {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 9px 12px; flex-wrap: wrap;
}
.cpf-auto-sum::-webkit-details-marker { display: none; }
.cpf-auto-sum:hover { background: var(--hover); }
.cpf-auto-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.cpf-auto-sec {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 6px 0 2px;
}
.cpf-auto-sec:first-child { margin-top: 0; }

/* ── Order line: grade / carrier / condition row ─────────────────── */
.crm-ord-line-extra {
  display: flex; gap: 8px; margin-top: 8px; align-items: flex-end;
}
.crm-ord-line-extra .crm-ord-f { flex: 0 0 auto; width: 118px; }
.crm-ord-line-extra .crm-ord-f-notes { flex: 1 1 auto; width: auto; min-width: 0; }
.crm-ord-line-extra select, .crm-ord-line-extra input { width: 100%; min-width: 0; }
@media (max-width: 560px) {
  .crm-ord-line-extra { flex-wrap: wrap; }
  .crm-ord-line-extra .crm-ord-f { flex: 1 1 45%; width: auto; }
}

/* ── Calendar appointment edit button ────────────────────────────── */
#crmPage .crm-cal-appt-edit {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid transparent;
  color: var(--text-muted); transition: color 0.14s, background 0.14s;
}
#crmPage .crm-cal-appt-edit:hover {
  background: rgba(124,90,240,0.2); color: var(--accent-text);
}

/* ── Client profile: Bill of Sales ───────────────────────────────── */
.cpf-bos-add { margin-left: auto; }
.cpf-info-title { display: flex; align-items: center; gap: 8px; }
.cpf-bos-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cpf-bos-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--border); color: var(--text-secondary);
  transition: border-color 0.14s, background 0.14s;
}
.cpf-bos-row:hover { border-color: rgba(124,90,240,0.45); background: var(--hover); }
.cpf-bos-title {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpf-bos-date { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }

/* ── Book Appointment: two-column layout ─────────────────────────
   The order builder made the single-column modal taller than the
   viewport. Details go left; the order builder goes right; each
   column scrolls independently under a shared action bar. */
.crm-appt-modal {
  width: min(920px, 96vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.crm-appt-cols {
  display: flex; gap: 18px; flex: 1; min-height: 0;
}
.crm-appt-col-left, .crm-appt-col-right {
  flex: 1; min-width: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 2px;
}
.crm-appt-col-right .crm-appt-order { margin-top: 0; }
.crm-appt-modal .crm-modal-actions { flex-shrink: 0; margin-top: 12px; }
@media (max-width: 760px) {
  .crm-appt-cols { flex-direction: column; overflow-y: auto; }
  .crm-appt-col-left, .crm-appt-col-right { overflow: visible; flex: 0 0 auto; }
}

/* In the two-column appointment modal the order section must be allowed to
   overflow so the RIGHT COLUMN becomes the scroll container — its own
   overflow:hidden (for rounded corners) was clipping the payment cards. */
.crm-appt-col-right .crm-appt-order { overflow: visible; }

/* ── Driver page: CRM dark-purple theme ──────────────────────────
   The driver page inherits the app's green tokens; re-scope them to
   the CRM palette so every var()-based component follows, then patch
   the components that hardcode green. */
html:has(#driverPage:not(.is-hidden)),
body:has(#driverPage:not(.is-hidden)) {
  background: #0d0e14;
}
#driverPage {
  --bg: #0d0e14;
  --panel: #13141c;
  --panel-border: rgba(255, 255, 255, 0.07);
  --text: #f4f4fa;
  --muted: #b9b9d0;
  --accent: #7c5af0;
  --accent-strong: #9b7bff;
  --accent-soft: rgba(124, 90, 240, 0.16);
  --success: #4ade80;
  --warning: #facc15;
  --danger: #f87171;
  color: var(--text);
}
#driverPage .panel {
  background: var(--panel);
  border-color: var(--panel-border);
}
#driverPage .driver-order-card {
  background: #13141c;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
#driverPage .driver-order-card:hover { border-color: rgba(124, 90, 240, 0.4); }

/* Tabs — pill style like the CRM view tabs */
#driverPage .todo-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border-radius: 20px;
}
#driverPage .todo-tab:hover { color: #b99dff; border-color: rgba(124, 90, 240, 0.4); }
#driverPage .todo-tab.is-active {
  background: rgba(124, 90, 240, 0.2);
  border-color: rgba(124, 90, 240, 0.55);
  color: #b99dff;
}

/* Appointment rows (already CRM-styled) — greens → purple */
#driverPage .driver-appt-btn {
  background: rgba(124, 90, 240, 0.16);
  border-color: rgba(124, 90, 240, 0.4);
  color: #b99dff;
}
#driverPage .driver-appt-btn:hover { background: rgba(124, 90, 240, 0.28); }
#driverPage .driver-appt-link:hover { color: #b99dff; border-bottom-color: #b99dff; }
#driverPage .driver-appt-row {
  background: #13141c;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
#driverPage .driver-appt-row:hover { border-color: rgba(124, 90, 240, 0.4); }

/* Date nav + generic buttons pick up --accent automatically; keep the
   primary add button clearly purple. */
#driverPage .button:not(.button-secondary) {
  background: linear-gradient(135deg, #6b3ef5, #a855f7);
  border-color: transparent;
  color: #fff;
}

/* Cash On Hand pill — CRM styling */
#driverPage .driver-petty-cash-btn {
  background: #13141c;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
#driverPage .driver-petty-cash-btn:hover,
#driverPage .driver-petty-cash-btn:focus-visible {
  border-color: rgba(124, 90, 240, 0.55);
  background: rgba(124, 90, 240, 0.1);
}
#driverPage .driver-petty-cash-label {
  color: #b9b9d0;
  font-weight: 600;
}
#driverPage .driver-petty-cash-amount { color: #b99dff; }

#crmPage .crm-cal-book-bar.is-hidden { display: none; }

/* ── CRM Customers view ──────────────────────────────────────────── */
#crmPage .crm-cust-content { flex: 1; min-height: 0; display: flex; overflow: hidden; }
#crmPage .crm-cust-cols { display: flex; flex: 1; min-height: 0; width: 100%; }
#crmPage .crm-cust-list {
  width: 320px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border); background: var(--bg-primary);
  padding: 10px;
}
#crmPage .crm-cust-sec {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 4px 6px;
}
#crmPage .crm-cust-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 5px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid transparent; text-align: left; font-family: inherit;
  transition: background 0.13s, border-color 0.13s;
}
#crmPage .crm-cust-row:hover { background: var(--hover); border-color: var(--border); }
#crmPage .crm-cust-row.is-active {
  background: rgba(124,90,240,0.16); border-color: rgba(124,90,240,0.45);
}
#crmPage .crm-cust-av { width: 30px; height: 30px; font-size: 11px; }
#crmPage .crm-cust-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#crmPage .crm-cust-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#crmPage .crm-cust-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
#crmPage .crm-cust-pos { color: #4ade80; font-weight: 700; }
#crmPage .crm-cust-neg { color: #f87171; font-weight: 700; }
#crmPage .crm-cust-detail { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 20px; background: var(--bg-secondary); }
#crmPage .crm-cust-dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#crmPage .crm-cust-dhead > div { flex: 1; min-width: 0; }
#crmPage .crm-cust-av-lg { width: 46px; height: 46px; font-size: 15px; }
#crmPage .crm-cust-dname { font-size: 17px; font-weight: 700; color: var(--text-primary); }
#crmPage .crm-cust-dsub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
#crmPage .crm-cust-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
#crmPage .crm-cust-items { display: flex; flex-direction: column; }
.crm-cust-back { display: none; }
@media (max-width: 900px) {
  #crmPage .crm-cust-cols { position: relative; overflow: hidden; }
  #crmPage .crm-cust-list {
    width: 100%;
    max-height: none;
    border-right: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #crmPage .crm-cust-detail {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: var(--bg-primary);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #crmPage .crm-cust-cols.crm-cust-open .crm-cust-list {
    transform: translateX(-28%);
    opacity: 0.25;
  }
  #crmPage .crm-cust-cols.crm-cust-open .crm-cust-detail {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  #crmPage .crm-cust-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--accent-subtle);
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
}

/* Phone in the driver tile title — link into the CRM conversation */
.driver-appt-phone {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: #b99dff; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.driver-appt-phone:hover { color: #d8c9ff; }

#crmPage .crm-cust-search { padding: 2px 2px 8px; }
#crmPage .crm-cust-search input { width: 100%; }

/* ── Collapsible lead search ─────────────────────────────────────
   Idle: a small rounded box with just the magnifier. Expands on
   focus (or while it holds a query) and collapses back on blur. */
#crmPage .crm-search-bar {
  width: 40px;
  min-width: 40px;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.22s ease;
}
#crmPage .crm-search-bar:focus-within,
#crmPage .crm-search-bar:has(.crm-search-input:not(:placeholder-shown)) {
  width: 100%;
  cursor: default;
}
#crmPage .crm-search-bar .crm-search-input {
  opacity: 0;
  transition: opacity 0.15s ease 0.08s;
}
#crmPage .crm-search-bar:focus-within .crm-search-input,
#crmPage .crm-search-bar:has(.crm-search-input:not(:placeholder-shown)) .crm-search-input {
  opacity: 1;
}

/* Collapsed search: icon centered in the box, box on the right edge */
#crmPage .crm-left-head { align-items: flex-end; }
#crmPage .crm-search-bar { justify-content: center; }
#crmPage .crm-search-bar:focus-within,
#crmPage .crm-search-bar:has(.crm-search-input:not(:placeholder-shown)) {
  justify-content: flex-start;
}
/* While collapsed the (invisible) input must not eat the row, or the icon
   sits off-centre */
#crmPage .crm-search-bar { gap: 0; }
#crmPage .crm-search-bar:focus-within,
#crmPage .crm-search-bar:has(.crm-search-input:not(:placeholder-shown)) { gap: 6px; }
#crmPage .crm-search-bar .crm-search-input { flex: 0 0 0px; min-width: 0; padding: 0; }
#crmPage .crm-search-bar:focus-within .crm-search-input,
#crmPage .crm-search-bar:has(.crm-search-input:not(:placeholder-shown)) .crm-search-input { flex: 1 1 auto; }

/* Kill the app-wide green focus glow inside the CRM search bar; the bar's
   own expansion is the focus affordance. */
#crmPage .crm-search-input:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}
#crmPage .crm-search-bar:focus-within { border-color: rgba(124, 90, 240, 0.55); }

/* Demo-mode badge in the CRM view bar */
#crmPage .crm-mode-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: rgba(250, 204, 21, 0.14); border: 1px solid rgba(250, 204, 21, 0.4);
  color: #facc15; margin-right: 4px;
}

/* ── Audit conversation reader (slide-over) ──────────────────────── */
#crmPage #crmAuditPanel { position: relative; overflow: hidden; }
#crmPage .crm-audit-content { transition: transform 0.28s ease, opacity 0.28s ease; }
#crmPage .crm-audit-content.is-slid { transform: translateX(-10%); opacity: 0.25; pointer-events: none; }
#crmPage .crm-audit-reader {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: var(--bg-secondary);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
#crmPage .crm-audit-reader.is-open { transform: translateX(0); }
#crmPage .crm-audit-reader-head {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-primary);
}
#crmPage .crm-audit-back {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit; white-space: nowrap;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.14s;
}
#crmPage .crm-audit-back:hover { color: var(--accent-text); border-color: rgba(124,90,240,0.45); }
#crmPage .crm-audit-reader-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
#crmPage .crm-audit-reader-thread {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Audit: side-by-side lead-source percent split (Paid / Organic / Repeat) */
#crmPage .crm-audit-split {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px 16px 0;
}
#crmPage .crm-audit-split-cell {
  background: var(--hover); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 11px; text-align: center;
}
#crmPage .crm-audit-split-sub { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* Internal notes in the thread — yellow, clearly not a sent message */
#crmPage .crm-bubble.is-note,
#crmPage .crm-msg.is-us .crm-bubble.is-note {
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.4);
  color: #fde68a;
}

/* Outbound SMS — green, so channel is readable at a glance
   (FB stays purple, notes yellow) */
#crmPage .crm-msg.is-us .crm-bubble.is-sms {
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #fff;
}

/* Outbound Facebook — Messenger blue */
#crmPage .crm-msg.is-us .crm-bubble.is-fb {
  background: linear-gradient(135deg, #1462c4, #1877F2);
  color: #fff;
}

#crmPage .crm-channel-plain {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}

/* ── Lead list sort ──────────────────────────────────────────────── */
#crmPage .crm-head-row { display: flex; align-items: center; justify-content: flex-end; gap: 7px; width: 100%; }
#crmPage .crm-sort-wrap { position: relative; flex-shrink: 0; }
#crmPage .crm-sort-btn {
  width: 30px; height: 30px; border-radius: var(--radius); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text-muted); transition: color 0.15s, border-color 0.15s;
}
#crmPage .crm-sort-btn:hover { color: var(--accent-text); border-color: rgba(124,90,240,0.5); }
#crmPage .crm-sort-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 150px; padding: 5px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}
#crmPage .crm-sort-menu.is-hidden { display: none; }
#crmPage .crm-sort-menu button {
  text-align: left; padding: 7px 11px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: none; border: none; color: var(--text-secondary);
}
#crmPage .crm-sort-menu button:hover { background: var(--hover); color: var(--text-primary); }
#crmPage .crm-sort-menu button.is-active { background: rgba(124,90,240,0.16); color: var(--accent-text); }

/* ── Settings: FB multi-page rows + Twilio number picker ─────────── */
.crm-set-fb-status { flex-direction: column; align-items: stretch; }
.crm-set-fb-pagerow { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.crm-set-fb-pagerow .crm-set-fb-text { flex: 1; }
.crm-set-fb-id { font-size: 10.5px; color: var(--text-muted); margin-left: 6px; }
.crm-set-fb-status > .crm-set-fb-btn { align-self: flex-start; margin-top: 8px; }

.crm-set-twnum { margin-top: 4px; }
.crm-set-twnum-list { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.crm-set-twnum-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 8px 11px; border-radius: 9px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.14s;
}
.crm-set-twnum-row:hover { border-color: rgba(124,90,240,0.45); }
.crm-set-twnum-row.is-active {
  background: rgba(124,90,240,0.14); border-color: rgba(124,90,240,0.55);
  color: var(--text-primary);
}
.crm-set-twnum-num { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-set-twnum-name { font-size: 11.5px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-set-twnum-nosms {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: rgba(220,38,38,0.14); color: #f87171;
}

#crmPage .crm-cal-appt-row[data-appt-id] { cursor: pointer; }

/* ── Driver item-confirmation window ─────────────────────────────── */
.drv-cf-modal { width: min(760px, 96vw); max-height: 90vh; display: flex; flex-direction: column; }
.drv-cf-head, .drv-cf-row {
  display: grid;
  grid-template-columns: 24px 1.6fr 0.9fr 58px 76px 100px 118px;
  gap: 7px; align-items: center;
}
.drv-cf-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 2px 6px;
}
.drv-cf-head span:last-child { grid-column: 7; }
.drv-cf-rows { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.drv-cf-row {
  padding: 7px 6px; border-radius: 9px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  grid-template-rows: auto auto;
}
.drv-cf-row.is-checked { border-color: rgba(155,123,255,0.45); background: rgba(155,123,255,0.06); }
.drv-cf-check { width: 15px !important; height: 15px; accent-color: #4ade80; margin: 0; }
.drv-cf-row input, .drv-cf-row select { width: 100%; min-width: 0; padding: 5px 7px; font-size: 12px; }
.drv-cf-status {
  grid-column: 2 / -1; grid-row: 2; font-size: 11px; min-height: 0;
}
.drv-cf-status:empty { display: none; }
.drv-cf-recalled { color: #f87171; font-weight: 700; }
.drv-cf-expired { color: #f87171; font-weight: 600; }
.drv-cf-months { color: #4ade80; font-weight: 600; }
.drv-cf-months.is-short { color: #facc15; }
@media (max-width: 700px) {
  .drv-cf-head { display: none; }
  .drv-cf-row { grid-template-columns: 24px 1fr 1fr; }
  .drv-cf-row .drv-cf-model { grid-column: 2 / -1; }
}

/* Expiry tier colors in the confirm window — mirror the DTS inventory rules */
.drv-cf-months.is-tier-green  { color: #4ade80; }
.drv-cf-months.is-tier-yellow { color: #facc15; }
.drv-cf-months.is-tier-red    { color: #f87171; }

.drv-cf-modal .crm-modal-save:disabled {
  opacity: 0.4; cursor: not-allowed; filter: saturate(0.5);
}

.drv-btn-complete {
  background: rgba(74, 222, 128, 0.16) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: #4ade80 !important;
}
.drv-btn-complete:hover { background: rgba(74, 222, 128, 0.28) !important; }

.drv-btn-noshow {
  background: rgba(249, 115, 22, 0.14) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #f97316 !important;
}
.drv-btn-noshow:hover { background: rgba(249, 115, 22, 0.26) !important; }


/* ── CRM mobile layout (dock-driven views + sliding conversation) ───────── */
.crm-mob-back { display: none; }

@media (max-width: 900px) {
  #crmPage .crm-shell {
    position: relative;
    overflow: hidden;
    /* Full height: the 56px header and page logo are hidden on mobile, and
       the dock overlays (auto-hidden) so the list reaches the screen bottom */
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
  }
  #crmPage .crm-lead-list {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Messages mode (default): the conversation list fills the screen; the
     main panel (thread) sits off-canvas to the right. */
  #crmPage .crm-left {
    width: 100%;
    border-right: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #crmPage .crm-main {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--bg-primary);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #crmPage.crm-thread-open .crm-left {
    transform: translateX(-28%);
    opacity: 0.25;
  }
  #crmPage.crm-thread-open .crm-main {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Pipeline / Customers / Audit mode: main panel shown in place */
  #crmPage.crm-mob-main .crm-left { display: none; }
  #crmPage.crm-mob-main .crm-main {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  /* Calendar mode: the calendar panel becomes the whole screen */
  #crmPage.crm-mob-calendar .crm-left,
  #crmPage.crm-mob-calendar .crm-main { display: none; }
  #crmPage.crm-mob-calendar .crm-cal-panel {
    display: flex;
    width: 100%;
    max-width: none;
    border-left: none;
  }

  /* The dock replaces the in-page view tabs on mobile */
  #crmPage .crm-view-tabs { display: none; }

  /* Back button: lives in the top bar, left aligned, only while a
     conversation is open */
  #crmPage.crm-thread-open .crm-mob-back {
    display: inline-flex;
    user-select: none;
    -webkit-user-select: none;
    align-items: center;
    gap: 6px;
    margin: 0 auto 0 0;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--accent-subtle);
    color: var(--accent);
    cursor: pointer;
  }
}


/* ── CRM mobile: auto-hiding dock + hidden page logo ────────────────────── */
@media (max-width: 900px) {
  /* Dock starts off-screen on the CRM page; scroll-up slides it in */
  .mobile-dock.dock-autohide:not(.dock-shown) {
    transform: translateY(calc(100% + 14px + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  /* The big page logo is dead weight on small screens — the dock's
     Dashboard icon replaces it while the CRM page is open */
  body:has(#crmPage:not(.is-hidden)) .page-logo-banner,
  body:has(#crmPage:not(.is-hidden)) .mobile-dashboard-logo-button {
    display: none !important;
  }
}


/* ── CRM mobile: compact "+" new-lead button pinned top-left ────────────── */
@media (max-width: 900px) {
  #crmPage .crm-left { position: relative; }
  #crmPage .crm-add-lead-bar {
    position: absolute;
    top: 9px;
    left: 10px;
    padding: 0;
    border-top: none;
    width: auto;
    z-index: 6;
  }
  #crmPage .crm-add-lead-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0;            /* hides the "+ New Lead" label */
    border-style: solid;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #crmPage .crm-add-lead-btn::before {
    content: "+";
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
  }
}


/* ── CRM mobile: Automations lives in the dock; hide the top-bar button on
   the pipeline / customers views (crm-mob-main) ─────────────────────────── */
@media (max-width: 900px) {
  #crmPage.crm-mob-main #crmAutomationsBtn,
  #crmPage.crm-thread-open #crmAutomationsBtn { display: none; }
}


/* ── CRM mobile: expanding the search hides the "+" button ──────────────── */
@media (max-width: 900px) {
  #crmPage .crm-add-lead-bar { transition: opacity 0.18s ease; }
  #crmPage .crm-left:has(.crm-search-bar:focus-within) .crm-add-lead-bar,
  #crmPage .crm-left:has(.crm-search-input:not(:placeholder-shown)) .crm-add-lead-bar {
    opacity: 0;
    pointer-events: none;
  }
}


/* ── CRM mobile: automations page — dock handles navigation, no back arrow ── */
@media (max-width: 900px) {
  #crmPage .crm-auto-back { display: none; }
}


/* ── CRM mobile: demo-mode badge centered in the top bar ────────────────── */
@media (max-width: 900px) {
  #crmPage .crm-view-bar { position: relative; }
  #crmPage .crm-mode-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}


/* ── CRM mobile: hide the appointment edit pencil (tap the row to edit) ─── */
@media (max-width: 900px) {
  #crmPage .crm-cal-appt-edit { display: none; }
}


/* ── CRM mobile: lead-actions dropdown in the conversation header ───────── */
.crm-rhead-menu-wrap { display: none; }
@media (max-width: 900px) {
  /* dropdown replaces the desktop header buttons */
  #crmPage .crm-rhead-actions { display: none; }
  #crmPage .crm-rhead-menu-wrap {
    display: block;
    position: relative;
    margin-left: auto;
    z-index: 210; /* above its own backdrop */
  }
  #crmPage .crm-rhead-menu-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #crmPage .crm-rhead-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 168px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    z-index: 211;
  }
  #crmPage .crm-rhead-menu.is-hidden { display: none; }
  #crmPage .crm-rhead-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }
  #crmPage .crm-rhead-menu button:active { background: var(--accent-subtle); color: var(--accent); }

  /* Blur + dim the rest of the page while open — same treatment as the
     DTS inventory view drawer backdrop */
  #crmPage .crm-rhead-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 209;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 180ms ease, visibility 180ms ease;
  }
  #crmPage .crm-rhead-menu-backdrop.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}


/* ── Driver mobile: Cash On Hand as a full-screen page ──────────────────── */
.drv-cash-back { display: none; }
@media (max-width: 900px) {
  #driverPage { transition: transform 0.3s ease, opacity 0.3s ease; }
  #driverPage.drv-cash-open { transform: translateX(-28%); opacity: 0.25; }

  #driverPettyCashModal .modal-backdrop { display: none; }
  #driverPettyCashModal { pointer-events: none; }
  #driverPettyCashModal .modal-panel {
    pointer-events: auto;
    position: fixed;
    inset: 0;
    margin: 0;
    max-width: none !important;
    width: 100% !important;
    height: 100%;
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    overflow-y: auto;
  }
  #driverPettyCashModal.is-open .modal-panel {
    transform: translateX(0);
    opacity: 1;
  }
  #driverPettyCashModal #closePettyCashModalButton { display: none; }
  #driverPettyCashModal .drv-cash-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 10px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(124, 90, 240, 0.12);
    color: #a78bfa;
    cursor: pointer;
    align-self: flex-start;
    user-select: none;
    -webkit-user-select: none;
  }
}


/* ── Cash On Hand modal: CRM purple color scheme ────────────────────────── */
#driverPettyCashModal {
  --bg: #0d0e14;
  --panel: #13141c;
  --panel-border: rgba(255, 255, 255, 0.07);
  --text: #f4f4fa;
  --text-muted: #b9b9d0;
  --muted: #b9b9d0;
  --accent: #7c5af0;
  --accent-strong: #9b7bff;
  --accent-soft: rgba(124, 90, 240, 0.16);
  color: var(--text);
}
#driverPettyCashModal .modal-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
}
#driverPettyCashModal .panel-kicker { color: var(--accent-strong); }
#driverPettyCashModal h2 { color: var(--text); }
#driverPettyCashModal .icon-button { color: var(--text-muted); }
#driverPettyCashModal input {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text);
}
#driverPettyCashModal input::placeholder { color: rgba(185, 185, 208, 0.55); }
#driverPettyCashModal input:focus {
  border-color: rgba(124, 90, 240, 0.55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 90, 240, 0.16);
}
#driverPettyCashModal .button {
  background: var(--accent);
  border: none;
  color: #fff;
}
#driverPettyCashModal .button:hover { background: var(--accent-strong); }
#driverPettyCashModal .button.button-secondary {
  background: var(--accent-soft);
  border: 1px solid rgba(124, 90, 240, 0.4);
  color: var(--accent-strong);
}
#driverPettyCashModal .driver-petty-cash-balance-row,
#driverPettyCashModal .petty-cash-log-section { border-color: rgba(255, 255, 255, 0.08); }
#driverPettyCashModal .petty-cash-log-row { border-color: rgba(255, 255, 255, 0.06); }
#driverPettyCashModal .driver-petty-cash-balance-value { color: var(--accent-strong); }
#driverPettyCashModal .log-page-num-btn {
  border-color: rgba(124, 90, 240, 0.35);
  color: var(--text);
}
#driverPettyCashModal .log-page-num-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
#driverPettyCashModal .log-page-num-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#driverPettyCashModal .log-page-size-select {
  background: var(--bg);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

#driverPettyCashModal .panel-heading,
#driverPettyCashModal .modal-heading {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}


/* ── Table headers: bright purple so they read as headers, not body text ── */
thead th,
.dts-mg-thead-row th,
.dts-invoices-model-table thead th,
.create-invoice-table thead th,
.mercury-pricing-table thead th,
table.dts-pricing-table thead th,
.spreadsheet-column-header,
.inventory-column-header {
  color: #bda6ff !important;
}


/* ── iPhone: pin the CRM to the exact viewport, clear of notch + home bar ── */
@media (max-width: 900px) {
  /* Fixed full-viewport shell: immune to page padding/margins and iOS URL-bar
     height math — top bar sits below the notch, reply bar above the home bar */
  #crmPage .crm-shell {
    position: fixed;
    inset: 0;
    height: auto;
    z-index: 40;
    background: var(--bg);
    padding-top: env(safe-area-inset-top, 0px);
  }
  #crmPage .crm-auto-page {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    background: var(--bg);
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* reply bar: keep clear of the home indicator */
  #crmPage .crm-reply-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  /* full-screen cash-on-hand page gets the same insets */
  #driverPettyCashModal .modal-panel {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* No dock inside an open conversation */
  body:has(#crmPage:not(.is-hidden).crm-thread-open) .mobile-dock {
    display: none !important;
  }

  /* ── Client profile: full-screen, single column ── */
  .cpf-overlay { padding: 0 !important; align-items: stretch !important; }
  .cpf-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: none;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .cpf-modal-header { padding: 12px 14px; }
  /* One natural page scroll: identity card, then pills, then content */
  .cpf-body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cpf-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 16px 14px;
    gap: 12px;
    flex-shrink: 0;
    overflow: visible;
  }
  .cpf-right { width: 100%; display: block; overflow: visible; }
  .cpf-panel.is-active { display: flex; overflow: visible; flex: none; }
  /* Tabs become wrapping pill chips — all visible, thumb-sized targets */
  .cpf-tabs {
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 14px;
  }
  .cpf-tab {
    padding: 9px 14px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.04);
    color: #b9b9d0;
    font-size: 13px;
  }
  .cpf-tab.is-active {
    background: rgba(124, 90, 240, 0.2);
    border-color: rgba(124, 90, 240, 0.65);
    color: #cfc0ff;
    border-bottom-color: rgba(124, 90, 240, 0.65);
  }
  .cpf-panel { padding: 14px; padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}


@media (max-width: 900px) {
  #crmPage .crm-sort-menu { left: auto; right: 0; }
}