@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@500;600&display=swap');

:root {
  --black: #0a0a0a;
  --charcoal: #1c1c1e;
  --charcoal-2: #2a2a2d;
  --grey-700: #4a4a4d;
  --grey-500: #767678;
  --grey-300: #b6b6b8;
  --grey-200: #d8d8da;
  --grey-100: #ececed;
  --grey-50: #f6f6f7;
  --white: #ffffff;
  --line: #e3e3e5;
  --line-strong: #cfcfd1;
  --accent: #0a0a0a;
  --danger: #9b2c2c;
  --danger-bg: #fbebeb;
  --success: #1f6b3f;
  --success-bg: #eaf4ee;
  --warn: #8a5a12;
  --warn-bg: #fbf1de;
  --radius: 3px;
  --sidebar-w: 236px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; margin: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.app-shell { display: flex; min-height: 100vh; }

.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--black);
  color: var(--grey-200);
  display: flex;
  flex-direction: column;
  padding: 28px 0 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  padding: 0 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-brand .brand-mark {
  width: 44px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}
.sidebar-brand .brand-name { font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: -0.01em; line-height: 1.2; }
.sidebar-brand .sub { font-size: 9px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }
.sidebar-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-500);
  padding: 20px 24px 10px;
}
.sidebar-nav a, .sidebar-client-link, .sidebar-add-client {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 24px;
  font-size: 13.5px;
  color: var(--grey-200);
  border-left: 2px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-nav a:hover, .sidebar-client-link:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.sidebar-nav a.active, .sidebar-client-link.active { color: var(--white); border-left-color: var(--white); background: rgba(255,255,255,0.06); }
.sidebar-nav .nav-icon { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-nav .nav-badge { margin-left: auto; }
.sidebar-clients { max-height: 240px; overflow-y: auto; }
.client-avatar {
  width: 22px; height: 22px; border-radius: var(--radius); flex-shrink: 0;
  background: rgba(255,255,255,0.08); color: var(--grey-200);
  font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.client-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-add-client { color: var(--grey-500); padding-top: 9px; margin-top: 4px; }
.sidebar-add-client:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.client-avatar-ghost { background: transparent; border: 1px dashed rgba(255,255,255,0.25); color: var(--grey-500); font-size: 13px; }
.sidebar-footer { margin-top: auto; padding: 16px 24px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.user-avatar {
  width: 26px; height: 26px; border-radius: var(--radius); flex-shrink: 0;
  background: rgba(255,255,255,0.1); color: var(--white);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-user { font-size: 12.5px; color: var(--grey-200); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-row:hover .sidebar-user { color: var(--white); }
.sidebar-logout { font-size: 12.5px; color: var(--grey-300); }
.sidebar-logout:hover { color: var(--white); }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; padding: 40px 48px 80px; max-width: 1180px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 24px; }
.page-header h1 { font-size: 24px; }
.page-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-500); margin-bottom: 6px; }
.page-subtitle { color: var(--grey-500); font-size: 13.5px; margin-top: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  border-radius: var(--radius); border: 1px solid var(--black);
  background: var(--black); color: var(--white); cursor: pointer;
  transition: opacity 0.12s ease;
}
.btn:hover { opacity: 0.82; }
.btn-secondary { background: var(--white); color: var(--black); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--grey-50); opacity: 1; }
.btn-ghost { background: transparent; color: var(--black); border-color: transparent; padding: 9px 10px; }
.btn-ghost:hover { background: var(--grey-50); opacity: 1; }
.btn-danger { background: var(--white); color: var(--danger); border-color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 22px;
}
.client-card {
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: var(--radius);
  transition: border-color 0.12s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.client-card:hover { border-color: var(--line-strong); }
.client-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.client-card h3 { font-size: 18px; }
.client-card-meta { display: flex; gap: 22px; }
.client-card-meta .stat-num { font-size: 20px; font-weight: 600; }
.client-card-meta .stat-label { font-size: 11px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.06em; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.Active { background: var(--success); }
.status-dot.Paused { background: var(--warn); }
.status-dot.Closed { background: var(--grey-500); }
.status-pill { font-size: 11px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line-strong); color: var(--grey-700); display: inline-flex; align-items: center; }

/* ---------- Stat row ---------- */
.stat-row { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.stat-cell { flex: 1; padding: 18px 22px; border-right: 1px solid var(--line); }
.stat-cell:last-child { border-right: none; }
.stat-cell .num { font-size: 26px; font-weight: 600; }
.stat-cell .label { font-size: 11.5px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.stat-cell.alert .num { color: var(--danger); }

/* ---------- Home: Needs Attention, priority groups ---------- */
.attn-panel { border: 1px solid #f0d6d6; background: #fdf6f6; border-radius: var(--radius); margin-bottom: 28px; }
.attn-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0d6d6; }
.attn-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #f2dede; }
.attn-row:last-child { border-bottom: none; }
.attn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }
.attn-dot.is-overdue { background: var(--danger); }
.badge-overdue-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 20px; background: var(--danger-bg); color: var(--danger); font-weight: 500; }
.priority-group-header { padding: 9px 16px; background: var(--grey-50); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.priority-group-header.priority-High { color: var(--danger); }
.priority-group-header.priority-Medium { color: var(--warn); }
.priority-group-header.priority-Low { color: var(--grey-700); }

/* ---------- Team: roles & per-client access ---------- */
.role-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; display: inline-flex; align-items: center; font-weight: 500; }
.role-badge.role-owner { background: var(--black); color: var(--white); }
.role-badge.role-admin { background: var(--grey-100); color: var(--charcoal); }
.role-badge.role-executive { background: var(--grey-50); color: var(--grey-500); border: 1px solid var(--line); }
.access-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.access-grid { display: grid; grid-template-columns: 1fr repeat(3, 90px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 480px; }
.access-grid > div { padding: 10px 12px; font-size: 12.5px; border-bottom: 1px solid var(--grey-100); display: flex; align-items: center; }
.access-grid > div:nth-last-child(-n+4) { border-bottom: none; }
.access-head { background: var(--grey-50); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-500); font-weight: 500; justify-content: center; }
.access-head:first-child { justify-content: flex-start; }
.access-radio { justify-content: center; }

/* ---------- Calendar / Activity Board ---------- */
.legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dot-meeting { background: var(--black); }
.dot-action { background: var(--warn); }
.dot-action.overdue { background: var(--danger); }
.dot-decision { background: var(--grey-700); }
.dot-milestone { background: var(--success); }
.dot-log-signin { background: var(--black); }
.dot-log-document { background: var(--grey-500); }
.dot-log-access { background: var(--danger); }
.dot-log-other { background: var(--grey-300); }

.log-day-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey-500); margin-bottom: 10px; }
.log-day-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.log-entry { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--grey-100); align-items: flex-start; }
.log-entry:last-child { border-bottom: none; }
.log-entry-client { background: var(--success-bg); border-left: 3px solid var(--success); }
.log-entry-dot-col { padding-top: 5px; }
.log-entry-action { font-size: 13.5px; font-weight: 600; }
.log-entry-time { font-size: 11.5px; color: var(--grey-500); white-space: nowrap; }
.badge-log-client { background: var(--white); border: 1px solid var(--success); color: var(--success); font-weight: 500; }

.calendar-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.cal-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.cal-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-dow { background: var(--grey-50); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-500); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--grey-100); }
.cal-cell { min-height: 150px; min-width: 0; padding: 12px; border-right: 1px solid var(--grey-100); border-bottom: 1px solid var(--grey-100); cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.cal-grid .cal-cell { min-height: 108px; padding: 8px; }
.cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: var(--grey-50); }
.cal-cell.out { color: var(--grey-300); background: #fcfcfc; }
.cal-cell.today { background: var(--grey-50); }
.cal-cell.selected { outline: 2px solid var(--black); outline-offset: -2px; }
.cal-cell.has-overdue { border-left: 3px solid var(--danger); }
.cal-strip-dow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-500); font-weight: 600; }
.cal-daynum { font-size: 15px; font-weight: 600; }
.cal-grid .cal-daynum { font-size: 12px; font-weight: 500; }
.cal-daynum-today { width: 26px; height: 26px; border-radius: 999px; background: var(--black); color: var(--white); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.cal-type-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cal-type-count { display: flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 600; color: var(--grey-700); }
.cal-type-count .legend-dot { margin-right: 0; }
.cal-chip { font-size: 10.5px; padding: 3px 6px; border-radius: 3px; display: flex; align-items: center; gap: 6px; background: var(--grey-50); color: var(--charcoal); min-width: 0; }
.cal-chip-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1; }
.cal-chip-count { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--grey-700); background: var(--white); border: 1px solid var(--line); border-radius: 20px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.cal-more { font-size: 10px; color: var(--grey-500); padding-left: 6px; }

.agenda-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--grey-100); }
.agenda-item:last-child { border-bottom: none; }
.agenda-dot-col { padding-top: 4px; }
.agenda-title { font-size: 13px; font-weight: 500; }
.agenda-meta { font-size: 11.5px; color: var(--grey-500); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.owner-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--charcoal); font-weight: 500; }
.owner-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--grey-100); color: var(--grey-700); font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Sub nav (client tabs) ---------- */
.subnav { display: flex; gap: 0; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 28px; flex-wrap: wrap; }
.subnav a { padding: 9px 8px; font-size: 12px; color: var(--grey-500); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav a:hover { color: var(--black); }
.subnav a.active { color: var(--black); border-bottom-color: var(--black); font-weight: 500; }
.subnav button.tab-btn { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 8px; font: inherit; font-size: 12px; color: var(--grey-500); cursor: pointer; white-space: nowrap; }
.subnav button.tab-btn:hover { color: var(--black); }
.subnav button.tab-btn.active { color: var(--black); border-bottom-color: var(--black); font-weight: 500; }

.link-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ---------- Tables / lists ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-500); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table td { padding: 13px 14px; border-bottom: 1px solid var(--grey-100); font-size: 13.5px; vertical-align: top; }
.table tr:hover td { background: var(--grey-50); }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table select { min-width: 152px; padding: 6px 26px 6px 8px; background-position: right 8px center; font-size: 12.5px; }

.status-pill-select { border-radius: 20px; width: 100%; }

/* ---------- Action items: card-row list ---------- */
.action-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.action-row { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--grey-100); border-left: 3px solid transparent; transition: background 0.12s ease; }
.action-row:last-child { border-bottom: none; }
.action-row:hover { background: var(--grey-50); }
.action-row.priority-High { border-left-color: var(--danger); }
.action-row.priority-Medium { border-left-color: var(--warn); }
.action-row.priority-Low { border-left-color: var(--line-strong); }
.action-row.is-overdue { border-left-color: var(--danger); background: var(--danger-bg); }
.action-row.is-overdue:hover { background: var(--danger-bg); }
.action-row.is-completed { opacity: 0.55; }
.action-row-main { flex: 1; min-width: 0; }
.action-row-task { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.action-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 7px; font-size: 11.5px; color: var(--grey-700); }
.action-row-meta .sep { color: var(--line-strong); }
.action-row-meta .muted { color: var(--grey-500); }
.action-row-meta a:hover { text-decoration: underline; }
.action-avatar { width: 16px; height: 16px; border-radius: var(--radius); background: var(--grey-100); color: var(--grey-700); font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.action-row-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.action-row-side .status-pill-select { width: auto; min-width: 150px; }
.action-edit-panel { background: var(--grey-50); padding: 20px; border-bottom: 1px solid var(--grey-100); }
.action-list .action-row:last-child + .action-edit-panel { border-bottom: none; }

/* ---------- Notify Client: button + modal ---------- */
.notify-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 500; border-radius: 20px;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--charcoal);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.notify-btn:hover { background: var(--grey-50); }
.notify-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.notify-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10,10,10,0.45);
  z-index: 40; align-items: flex-start; justify-content: center; padding: 60px 20px;
  overflow-y: auto;
}
.notify-modal-overlay.show { display: flex; }
.notify-modal {
  width: 560px; max-width: 100%; background: var(--white); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(10,10,10,0.18);
}
.notify-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.notify-modal-eyebrow { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warn); margin-bottom: 4px; }
.notify-modal-eyebrow.state-completed { color: var(--success); }
.notify-modal-title { font-size: 14.5px; font-weight: 700; }
.notify-modal-subtitle { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.notify-modal-close { background: none; border: none; color: var(--grey-500); font-size: 18px; cursor: pointer; line-height: 1; padding: 0; }
.notify-modal-close:hover { color: var(--black); }
.notify-modal-body { padding: 20px; }
.notify-modal-loading { padding: 40px 20px; text-align: center; color: var(--grey-500); font-size: 13px; }
.notify-modal-error { padding: 14px 16px; background: var(--danger-bg); color: var(--danger); border-radius: 6px; font-size: 13px; line-height: 1.55; }

.tmpl-block { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.tmpl-block:last-child { margin-bottom: 0; }
.tmpl-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--grey-50); border-bottom: 1px solid var(--line); }
.tmpl-head-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.tmpl-head-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 11.5px; font-weight: 500; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--white); color: var(--charcoal); cursor: pointer; }
.copy-btn:hover { background: var(--grey-50); }
.copy-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.tmpl-body { padding: 16px; font-size: 13px; line-height: 1.65; color: var(--charcoal); white-space: pre-wrap; }
.tmpl-subject-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--grey-50); border-bottom: 1px solid var(--line); }
.tmpl-subject-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmpl-body-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.tmpl-body-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.65; color: var(--charcoal); white-space: pre-wrap; }
.tmpl-body-row .copy-btn { flex-shrink: 0; }
.notify-portal-link { color: var(--black); text-decoration: underline; word-break: break-all; }

.list-item { padding: 14px 0; border-bottom: 1px solid var(--grey-100); }
.list-item:last-child { border-bottom: none; }

/* ---------- Tags/badges ---------- */
.badge { font-size: 11px; padding: 2px 9px; border-radius: 20px; display: inline-flex; align-items: center; font-weight: 500; }
.nav-badge { font-size: 10.5px; background: var(--white); color: var(--black); border-radius: 20px; padding: 1px 7px; font-weight: 600; }
.badge-priority-High { background: var(--danger-bg); color: var(--danger); }
.badge-priority-Medium { background: var(--warn-bg); color: var(--warn); }
.badge-priority-Low { background: var(--grey-100); color: var(--grey-700); }
.badge-status { background: var(--grey-100); color: var(--grey-700); }
.badge-status-Completed { background: var(--success-bg); color: var(--success); }
.badge-status-Confirmed { background: var(--success-bg); color: var(--success); }
.badge-status-Needs.Confirmation, .badge-needs-confirmation { background: var(--warn-bg); color: var(--warn); }
.badge-overdue { background: var(--danger-bg); color: var(--danger); }
.badge-type { background: var(--grey-100); color: var(--grey-700); }
.badge-fact { background: var(--grey-100); color: var(--grey-700); }
.badge-observation { background: var(--warn-bg); color: var(--warn); }
.overdue-text { color: var(--danger); font-weight: 500; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; color: var(--charcoal); }
.form-hint { font-size: 12px; color: var(--grey-500); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-family: inherit;
  background: var(--white);
  color: var(--black);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea { resize: vertical; min-height: 120px; }
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover,
input[type=date]:hover, input[type=datetime-local]:hover, input[type=search]:hover,
select:hover, textarea:hover { border-color: var(--grey-500); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

/* Custom chevron in place of the native OS arrow, which looks inconsistent
   across browsers next to our flat field chrome. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select::-ms-expand { display: none; }
select[disabled] { cursor: not-allowed; }

/* Date/datetime pickers - the field chrome now matches everything else;
   just tidy up the native calendar glyph's click target and hover state. */
input[type=date], input[type=datetime-local] { cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 3px;
  margin-left: 4px;
  border-radius: 2px;
  opacity: 0.6;
  transition: opacity 0.12s ease, background 0.12s ease;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=datetime-local]:hover::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--grey-100);
}

.form-row { display: flex; gap: 16px; }
.form-row > * { flex: 1; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- Timeline ---------- */
.timeline-entry { display: flex; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.timeline-entry:first-child { padding-top: 0; }
.timeline-date-col { width: 130px; flex-shrink: 0; }
.timeline-date-col .date { font-weight: 600; font-size: 14px; }
.timeline-date-col .type { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-participants { font-size: 12.5px; color: var(--grey-500); margin-bottom: 10px; }
.timeline-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-500); margin: 14px 0 6px; }
.timeline-body ul.bullets li { position: relative; padding-left: 14px; margin-bottom: 5px; font-size: 13.5px; }
.timeline-body ul.bullets li:before { content: '-'; position: absolute; left: 0; color: var(--grey-500); }

/* ---------- Auth ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--grey-50); }
.auth-card { width: 380px; max-width: calc(100vw - 40px); padding: 40px 36px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-sizing: border-box; }
.auth-card-brand { width: 44px; height: 44px; display: block; margin: 0 auto 8px; }
.auth-card-brand-name { text-align: center; font-size: 15px; font-weight: 700; color: var(--black); }
.auth-sub { text-align: center; color: var(--grey-500); font-size: 12.5px; margin-bottom: 28px; }

/* ---------- Auth: split-screen login ---------- */
.auth-split { min-height: 100vh; display: flex; }
.auth-left {
  flex: 1 1 46%; position: relative; overflow: hidden; display: flex; color: var(--white);
  background: linear-gradient(155deg, #050505 0%, var(--charcoal) 55%, var(--charcoal-2) 100%);
}
.auth-left::before {
  content: ""; position: absolute; top: -10%; right: -15%; width: 60%; height: 130%;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.05) 48%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.05) 52%, transparent 60%);
  transform: rotate(8deg);
}
.auth-left-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 64px; width: 100%; box-sizing: border-box; }
.auth-left-brand { display: flex; align-items: center; gap: 14px; }
.auth-left-brand-mark { width: 38px; height: 38px; display: block; flex-shrink: 0; }
.auth-left-brand-name { font-size: 18px; font-weight: 700; color: var(--white); letter-spacing: -0.01em; line-height: 1.2; }
.auth-left-brand-sub { font-size: 10px; color: var(--grey-300); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.auth-left-tagline { font-size: 11px; color: var(--grey-300); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-left-nav { display: flex; flex-direction: column; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-300); margin-top: 44px; }
.auth-left-mid { margin: auto 0; }
.auth-left-rule { width: 40px; height: 2px; background: var(--white); margin-bottom: 24px; }
.auth-left-mid h1 { font-size: 36px; line-height: 1.18; font-weight: 600; margin: 0 0 20px 0; }
.auth-left-mid p { font-size: 14px; color: var(--grey-300); line-height: 1.5; margin: 0; }
.auth-left-stats { display: flex; gap: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); }
.auth-left-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); font-weight: 600; }
.auth-left-stat-value { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-300); margin-top: 3px; }

.auth-right { flex: 1 1 54%; display: flex; flex-direction: column; background: var(--white); }
.auth-right-inner { flex: 1; display: flex; flex-direction: column; padding: 56px 80px; max-width: 560px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.auth-right-top { text-align: right; font-size: 12px; color: var(--grey-500); }
.auth-form-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-500); margin-bottom: 8px; }
.auth-form-wrap h2 { font-size: 30px; font-weight: 600; line-height: 1.22; margin: 0 0 32px 0; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-icon { position: absolute; left: 12px; color: var(--grey-500); pointer-events: none; }
.auth-input-wrap input { width: 100%; box-sizing: border-box; padding: 11px 40px 11px 38px; font-size: 13.5px; border: 1px solid var(--line); border-radius: var(--radius); }
.auth-input-wrap input:focus { outline: none; border-color: var(--black); }
.auth-input-toggle { position: absolute; right: 10px; background: none; border: none; cursor: pointer; color: var(--grey-500); display: flex; align-items: center; padding: 4px; }
.auth-input-toggle:hover { color: var(--black); }
.auth-submit { width: 100%; justify-content: center; gap: 8px; padding: 13px; font-size: 14px; margin-top: 8px; }
.auth-secure-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--grey-500); margin-top: 20px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-divider span { font-size: 11px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
a.auth-submit { justify-content: center; text-decoration: none; margin-top: 16px; }
.auth-right-footer { text-align: center; font-size: 11.5px; color: var(--grey-500); padding-top: 24px; }

@media (max-width: 900px) {
  .auth-left { display: none; }
  .auth-right { flex: 1 1 100%; }
  .auth-right-inner { padding: 40px 24px; }
}

/* ---------- Flash ---------- */
.flash { padding: 11px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 18px; border: 1px solid; }
.flash-success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.flash-error { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.flash-info { background: var(--grey-100); color: var(--charcoal); border-color: transparent; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 56px 24px; color: var(--grey-500); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty-state h3 { color: var(--black); margin-bottom: 8px; font-size: 15px; }
.empty-state p { font-size: 13px; margin-bottom: 18px; }

/* ---------- Reports / Portal ---------- */
.badge-status-completed { background: var(--success-bg); color: var(--success); }
.badge-status-in-progress { background: var(--warn-bg); color: var(--warn); }
.badge-status-upcoming { background: var(--grey-100); color: var(--grey-700); }

.toggle-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.toggle-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle-track { position: absolute; inset: 0; background: var(--grey-200); border-radius: 999px; transition: background 0.15s ease; }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left 0.15s ease; }
.toggle-switch input:checked ~ .toggle-track { background: var(--black); }
.toggle-switch input:checked ~ .toggle-track .toggle-knob { left: 16px; }
.toggle-switch input:focus-visible ~ .toggle-track { box-shadow: 0 0 0 3px rgba(10,10,10,0.15); }

.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 28px; text-align: center; transition: border-color 0.12s ease, background 0.12s ease; }
.dropzone:hover { border-color: var(--black); background: var(--grey-50); }

/* ---------- Milestone detail: two-column layout, type picker, collapsible details ---------- */
.milestone-layout { display: flex; gap: 40px; align-items: flex-start; }
.milestone-layout .main-col { width: 840px; max-width: 100%; flex-shrink: 0; }
.milestone-layout .side-col { flex: 1; min-width: 280px; }
@media (max-width: 1280px) {
  .milestone-layout { flex-direction: column; }
  .milestone-layout .main-col { width: 100%; }
}

.details-card { border: 1px solid var(--line); border-radius: var(--radius); }
.details-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 13.5px; font-weight: 500; color: var(--black); }
.details-card summary::-webkit-details-marker { display: none; }
.details-card summary .chevron { transition: transform 0.12s ease; }
.details-card[open] summary { border-bottom: 1px solid var(--line); }
.details-card[open] summary .chevron { transform: rotate(180deg); }
.details-card .details-body { padding: 18px; }

.row-expand-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; color: var(--grey-500); }
.row-expand-btn:hover { color: var(--black); }
.row-expand-btn .chevron { transition: transform 0.12s ease; }
.row-expand-btn.open .chevron { transform: rotate(90deg); }

.milestone-optional-section { border-top: 1px solid var(--grey-100); margin-top: 20px; padding-top: 20px; }
.reveal-link { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--black); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.reveal-link:hover { color: var(--grey-700); }

.doc-upload-bar { margin-bottom: 20px; }
.doc-upload-bar form { display: flex; align-items: flex-end; gap: 14px; width: 100%; }
.doc-upload-bar .form-group { flex: 1; min-width: 0; margin-bottom: 0; }
/* The global select padding (10px) is taller than a 34px box can hold, which
   clipped the text; keep the vertical padding at zero so the height governs. */
.doc-upload-bar select { height: 38px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.doc-upload-bar .btn { height: 38px; box-sizing: border-box; padding: 0 18px; flex-shrink: 0; }
/* The drop box is itself a <label>, so undo the generic ".form-group label"
   block/margin rules that were pushing it out of line with the selects. */
.doc-upload-bar .form-group label.doc-upload-box {
  width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px; margin: 0;
  font-size: 12.5px; font-weight: 400;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--grey-500);
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.doc-upload-bar .form-group label.doc-upload-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-upload-bar .form-group label.doc-upload-box:hover { border-color: var(--black); background: var(--grey-50); color: var(--black); }
.doc-upload-box {
  width: 100%; height: 38px; box-sizing: border-box; padding: 0 10px; font-size: 12.5px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--grey-500);
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.doc-upload-box:hover { border-color: var(--black); background: var(--grey-50); color: var(--black); }
.doc-file-icon { width: 30px; height: 30px; border-radius: var(--radius); background: var(--grey-50); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--grey-500); }
.doc-file-cell { display: flex; align-items: center; gap: 10px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--grey-700); cursor: pointer; }
.icon-btn:hover { border-color: var(--black); color: var(--black); background: var(--grey-50); }

.type-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.type-card { position: relative; display: block; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.type-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-card:hover { border-color: var(--grey-500); }
.type-card.selected { border-color: var(--black); background: var(--grey-50); }
.type-card .type-card-title { font-size: 13.5px; font-weight: 500; color: var(--black); margin-top: 10px; }
.type-card .type-card-desc { font-size: 12px; color: var(--grey-500); margin-top: 4px; line-height: 1.5; }
.type-card.disabled { cursor: not-allowed; opacity: 0.6; }

.request-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }

.progress-track { height: 8px; background: var(--grey-100); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--black); }

.milestone-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--grey-100); }
.milestone-row:last-child { border-bottom: none; }
.milestone-dot { width: 9px; height: 9px; border-radius: 999px; margin-top: 6px; flex-shrink: 0; }
.milestone-dot.completed { background: var(--success); }
.milestone-dot.in-progress { background: var(--warn); }
.milestone-dot.upcoming { background: var(--grey-300); border: 1.5px solid var(--grey-300); }
.milestone-dot.rejected { background: var(--danger); }

/* ---------- Decisions: pending cards + month-grouped timeline ---------- */
.decision-card { border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; background: var(--white); }
.decision-card-pending { border-color: var(--warn); border-left: 3px solid var(--warn); background: var(--warn-bg); }
.decision-title { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.decision-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.decision-chip { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 9px; border-radius: 20px; background: var(--grey-50); border: 1px solid var(--line); color: var(--charcoal); }
.decision-card-pending .decision-chip { background: var(--white); }
.decision-context { font-size: 13px; color: var(--grey-700); line-height: 1.55; }
.decision-context-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.decision-month-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey-500); margin-bottom: 14px; }
.decision-timeline { position: relative; padding-left: 28px; }
.decision-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1.5px; background: var(--grey-200); }
.decision-timeline-item { position: relative; margin-bottom: 16px; }
.decision-timeline-item:last-child { margin-bottom: 0; }
.decision-timeline-dot { position: absolute; left: -28px; top: 18px; width: 11px; height: 11px; border-radius: 999px; background: var(--success-bg); border: 1.5px solid var(--success); }
.decision-edit-form { border-top: 1px solid var(--grey-100); margin-top: 14px; padding-top: 16px; }
.decision-edit-form .form-group { margin-bottom: 14px; }

.portal-topbar { height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.portal-container { max-width: 780px; margin: 0 auto; padding: 44px 20px 80px; }
.portal-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; color: var(--black); }
.portal-brand-mark { width: 24px; height: 24px; display: block; }
.next-up-card { border: 1px solid var(--black); border-radius: 4px; padding: 22px 24px; background: var(--grey-50); }

.review-mobile-card { display: none; }

@media (max-width: 600px) {
  .portal-topbar { height: auto; min-height: 56px; padding: 12px 20px; }
  .portal-brand { font-size: 13px; flex-wrap: wrap; row-gap: 2px; }
  .portal-signedin { display: none; }
  .portal-container { padding: 32px 16px 60px; }
  .next-up-card { padding: 18px; }

  .review-desktop-row { display: none; }
  .review-mobile-card { display: block; border: 1px solid var(--line); border-radius: 6px; padding: 16px; margin-bottom: 12px; }
  .review-mobile-card:last-child { margin-bottom: 0; }
  .review-mobile-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .review-mobile-meta .milestone-dot { margin-top: 0; }
  .review-mobile-date { font-size: 11.5px; color: var(--grey-500); }
  .review-mobile-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
  .review-mobile-card .badge { display: inline-block; margin-bottom: 10px; }
  .review-mobile-submitted { font-size: 12px; color: var(--grey-500); }
  .review-mobile-rejection { margin-top: 10px; padding: 10px 12px; background: var(--danger-bg); border-radius: 4px; font-size: 12px; color: var(--danger); line-height: 1.55; }
}

/* ---------- Utility ---------- */
.muted { color: var(--grey-500); }
.small { font-size: 12px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-gap { display: flex; gap: 10px; align-items: center; }
.section { margin-bottom: 36px; }
.section-title { font-size: 15px; margin-bottom: 14px; }
.divider { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.pill-link { font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 20px; color: var(--grey-700); }
.pill-link.active { background: var(--black); color: var(--white); border-color: var(--black); }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; }
.filter-bar select, .filter-bar input { width: auto; padding: 7px 10px; font-size: 12.5px; }
.filter-bar select { padding-right: 30px; background-position: right 10px center; }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.needs-confirmation-tag { color: var(--warn); font-weight: 500; }
.transcript-box { white-space: pre-wrap; font-size: 13px; line-height: 1.7; background: var(--grey-50); padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); }
.extraction-card { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; background: var(--grey-50); }
.extraction-card .row { display: flex; gap: 10px; align-items: flex-start; }
.extraction-card input[type=checkbox] { margin-top: 4px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--grey-300); border-top-color: var(--black); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.copy-toast { position: fixed; bottom: 24px; right: 24px; background: var(--black); color: var(--white); padding: 10px 18px; border-radius: var(--radius); font-size: 13px; opacity: 0; transform: translateY(6px); transition: all 0.18s ease; pointer-events: none; }
.copy-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) {
  .doc-upload-bar form { flex-direction: column; align-items: stretch; }
  .doc-upload-bar .btn { width: 100%; justify-content: center; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 14px;
    height: 56px; padding: 0 20px; box-sizing: border-box;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 15; background: var(--white);
  }
  .mobile-topbar .brand { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
  .menu-toggle {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; background: none; border: 1px solid var(--line-strong);
    border-radius: var(--radius); color: var(--black); cursor: pointer; padding: 0;
  }
  .menu-toggle:hover { background: var(--grey-50); }

  .sidebar { position: fixed; top: 0; transform: translateX(-100%); z-index: 20; transition: transform 0.2s ease; }
  .sidebar.open { transform: translateX(0); }

  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 0; background: rgba(10,10,10,0.4); z-index: 19;
  }

  .app-shell { display: block; }
  .main { padding: 24px 20px 60px; max-width: 100%; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .stat-row { flex-wrap: wrap; }
  .stat-cell { flex: 1 1 50%; border-bottom: 1px solid var(--line); }

  .page-header { flex-wrap: wrap; }
  .page-header .flex-gap { flex-wrap: wrap; width: 100%; }
  .page-header .flex-gap form,
  .page-header .flex-gap input[type="search"],
  .page-header .flex-gap input[type="text"] { width: 100% !important; }

  .milestone-row { flex-wrap: wrap; }
  .milestone-row .flex-gap { flex-wrap: wrap; row-gap: 8px; }

  .form-row { flex-direction: column; gap: 12px; }

  .type-picker { grid-template-columns: 1fr; }

  .calendar-layout { grid-template-columns: 1fr; }
  .cal-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-cell { min-height: 130px; }
  .cal-grid { min-width: 640px; }
  .cal-grid .cal-cell { min-height: 88px; }

  .decision-pending-row { flex-direction: column; align-items: stretch; }
  .decision-pending-actions { width: 100%; }
  .decision-pending-actions form { flex: 1; }
  .decision-pending-actions form button { width: 100%; justify-content: center; }

  .action-row { flex-direction: column; align-items: stretch; }
  .action-row-side { width: 100%; justify-content: space-between; }
  .action-row-side .status-pill-select { flex: 1; min-width: 0; }
}

/* ---------- Data Room ---------- */
.dr-tabs-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pill-link, .dr-seg a, .dr-seg button { white-space: nowrap; }
.pill-count { font-size: 10.5px; font-weight: 600; margin-left: 6px; padding: 1px 7px; border-radius: 20px; background: var(--grey-100); color: var(--grey-700); }
.pill-link.active .pill-count { background: rgba(255,255,255,0.2); color: var(--white); }
.dr-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; font-size: 12px; font-weight: 500; background: var(--white); }
.dr-seg a, .dr-seg button { padding: 6px 12px; color: var(--grey-700); background: none; border: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dr-seg .on { background: var(--black); color: var(--white); }
.dr-seg .g.on { background: var(--success); }
.dr-seg button[disabled] { opacity: 0.45; cursor: not-allowed; }
.dr-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin-bottom: 18px; border: 1px solid #ecd9b0; background: var(--warn-bg); color: var(--warn); border-radius: 8px; font-size: 13px; line-height: 1.5; }
.dr-preview-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #e8edf9; color: #2b4a8b; font-size: 12.5px; border-radius: 8px 8px 0 0; }
.dr-preview-banner a { font-weight: 600; text-decoration: underline; }
.dr-preview-wrap { border: 1px solid var(--line); border-top: none; border-radius: 0 0 8px 8px; padding: 26px 28px 30px; }

.dr-start { border: 1px solid var(--line); border-radius: 10px; padding: 28px; }
.dr-start h3 { font-size: 16px; margin-bottom: 4px; }
.dr-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dr-start-card { text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; color: var(--black); transition: border-color 0.12s ease, background 0.12s ease; }
.dr-start-card:hover { border-color: var(--black); background: var(--grey-50); }
.dr-start-card span { font-size: 12px; color: var(--grey-500); line-height: 1.5; }

.dr-layout { display: flex; gap: 22px; align-items: flex-start; }
.dr-tree { width: 300px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.dr-tree-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-500); }
.dr-chip { font: inherit; font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 2px 9px; border-radius: 20px; border: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.dr-chip.vis { background: var(--success-bg); color: var(--success); }
.dr-chip.off { background: var(--grey-100); color: var(--grey-700); }
.dr-row { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: 5px; font-size: 13px; color: var(--charcoal); position: relative; border: 1.5px solid transparent; }
.dr-row:hover { background: var(--grey-50); }
.dr-row.sel { background: var(--grey-100); font-weight: 600; }
.dr-row.staff-only .dr-row-link { color: var(--grey-500); }
.dr-row.dragging { opacity: 0.45; }
.dr-row.drop-inside { background: #e8edf9; border-color: #2b4a8b; }
.dr-row.drop-before::before, .dr-row.drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; background: #2b4a8b; border-radius: 2px; }
.dr-row.drop-before::before { top: -2px; }
.dr-row.drop-after::after { bottom: -2px; }
.dr-row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.dr-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-row-count { margin-left: auto; font-size: 11px; color: var(--grey-500); font-weight: 400; padding-left: 6px; }
.dr-row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.dr-via { font-size: 10.5px; color: var(--grey-500); margin-right: 4px; white-space: nowrap; }
.dr-kebab { width: 24px; height: 24px; border-radius: 5px; border: 1px solid var(--line); background: var(--white); color: var(--grey-500); display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dr-row:hover .dr-kebab, .dr-kebab:focus-visible { display: flex; }
.dr-eye { width: 26px; height: 26px; border-radius: 5px; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dr-eye.on { color: var(--success); }
.dr-eye.off { color: var(--grey-300); }
.dr-eye.lock { color: var(--grey-300); opacity: 0.6; cursor: not-allowed; }
.dr-eye:not(.lock):hover { background: var(--grey-100); }
.dr-cbx { width: 14px; height: 14px; accent-color: var(--black); cursor: pointer; margin: 0; flex-shrink: 0; }
.dr-row .dr-row-check { display: none; }
.dr-row:hover .dr-row-check, .dr-tree.selecting .dr-row-check { display: block; }
.dr-row-new { padding-top: 5px; padding-bottom: 5px; gap: 8px; }
.dr-row-new input, .dr-rename { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 3px 6px; border: 1.5px solid var(--black); border-radius: 4px; }
.dr-hint { font-size: 10.5px; color: var(--grey-500); white-space: nowrap; }
.dr-new { width: 100%; margin-top: 6px; padding: 7px; font: inherit; font-size: 13px; color: var(--grey-500); background: none; border: 1px dashed var(--line-strong); border-radius: 5px; cursor: pointer; }
.dr-new:hover { color: var(--black); border-color: var(--black); }
.dr-unfiled { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 11px 13px; border: 1px solid #ecd9b0; background: var(--warn-bg); color: var(--warn); border-radius: 8px; font-size: 12.5px; }
.dr-unfiled span:last-child { font-weight: 600; }

.dr-bulkbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--black); color: var(--white); border-radius: 6px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; }
.dr-bulkbar-folders { margin: 0 0 8px; gap: 8px; padding: 7px 10px; }
.dr-bulk-btn { font: inherit; font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 4px; border: none; background: rgba(255,255,255,0.14); color: var(--white); cursor: pointer; }
.dr-bulk-btn.primary { background: var(--white); color: var(--charcoal); }
.dr-bulk-btn.dim { background: none; opacity: 0.8; }
.dr-folder-chip { font: inherit; font-size: 10.5px; font-weight: 500; padding: 2px 9px; border-radius: 20px; border: none; background: var(--grey-100); color: var(--grey-700); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; max-width: 240px; }
.dr-folder-chip.unfiled { background: var(--warn-bg); color: var(--warn); }
.dr-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.selected td { background: var(--grey-50); }

.dr-content { flex: 1; min-width: 0; }
.dr-content-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dr-crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--grey-500); flex-wrap: wrap; }
.dr-crumbs strong { color: var(--black); }
.dr-crumbs a:hover { text-decoration: underline; }
.dr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-vis-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--grey-50); margin-bottom: 14px; flex-wrap: wrap; }
.dr-vis-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--grey-100); color: var(--grey-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dr-vis-card.shown .dr-vis-icon { background: var(--success-bg); color: var(--success); }
.dr-vis-title { font-size: 13.5px; font-weight: 600; }
.dr-subfolders { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dr-subfolder { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--white); }
.dr-subfolder:hover { border-color: var(--black); }
.dr-subfolder.drop-inside { background: #e8edf9; border-color: #2b4a8b; }
.dr-drop { border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 12px; text-align: center; font-size: 12.5px; color: var(--grey-500); margin-bottom: 14px; }
.dr-drop.over { border-color: var(--black); background: var(--grey-50); color: var(--black); }
.dr-doc-row.dragging { opacity: 0.45; }
.dr-overview-stats { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.dr-overview-stats > div { flex: 1; padding: 16px 20px; border-right: 1px solid var(--line); }
.dr-overview-stats > div:last-child { border-right: none; }
.dr-overview-stats .num { font-size: 24px; font-weight: 600; }
.dr-overview-stats .label { font-size: 11px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.dr-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--black); color: var(--white); border-radius: 8px; padding: 11px 16px; font-size: 12.5px; display: flex; align-items: center; gap: 16px; box-shadow: 0 8px 24px rgba(10,10,10,0.25); max-width: calc(100vw - 32px); }
.dr-toast b { font-weight: 600; }
.dr-toast button { background: none; border: none; color: var(--white); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
.dr-pop { position: fixed; z-index: 50; background: var(--white); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(10,10,10,0.14); width: 250px; padding: 6px; max-height: 70vh; overflow-y: auto; }
.dr-pop.wide { width: 380px; padding: 0; }
.dr-pop-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-500); padding: 8px 10px 4px; }
.dr-pop-search { width: calc(100% - 12px); margin: 4px 6px 6px; padding: 7px 9px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 5px; box-sizing: border-box; }
.dr-pop-list hr { border: none; border-top: 1px solid var(--line); margin: 5px 0; }
.dr-pop-item { display: flex; align-items: center; width: 100%; text-align: left; font: inherit; font-size: 12.5px; color: var(--charcoal); background: none; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; }
.dr-pop-item:hover:not([disabled]) { background: var(--grey-50); }
.dr-pop-item[disabled] { opacity: 0.4; cursor: not-allowed; }
.dr-pop-item.danger { color: var(--danger); }
.dr-pop-item .k { margin-left: auto; font-size: 10.5px; color: var(--grey-500); }
.dr-share-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 6px; }
.dr-share-head .t { font-size: 14.5px; font-weight: 700; }
.dr-share-head .s { font-size: 12px; color: var(--grey-500); margin-top: 3px; }
.dr-x { background: none; border: none; font-size: 20px; line-height: 1; color: var(--grey-500); cursor: pointer; }
.dr-share-links { display: flex; align-items: center; gap: 14px; padding: 8px 18px; font-size: 12px; font-weight: 600; }
.dr-share-links button { background: none; border: none; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; color: var(--black); }
.dr-share-links button + button { color: var(--grey-500); }
.dr-share-links .prev { margin-left: auto; color: #2b4a8b; }
.dr-share-list { margin: 0 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dr-share-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--grey-100); font-size: 13px; }
.dr-share-row:last-child { border-bottom: none; }
.dr-share-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-share-row.off .n { color: var(--grey-500); }
.dr-share-row .c { font-size: 11px; color: var(--grey-500); }
.dr-share-row .toggle-switch input:checked ~ .toggle-track { background: var(--success); }
.dr-share-opt { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; font-size: 12px; color: var(--grey-700); cursor: pointer; }

.dr-master { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--grey-50); margin-bottom: 14px; }
.dr-master-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: #1c213e; flex-shrink: 0; }
.dr-master .toggle-switch input:checked ~ .toggle-track { background: var(--success); }
.toggle-switch.dr-dim { opacity: 0.55; }
.toggle-switch input:disabled ~ .toggle-track { opacity: 0.45; cursor: not-allowed; }

/* client-facing Data Room (portal and staff preview) */
.portal-tabs { display: flex; gap: 26px; padding: 0 32px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.portal-tabs a { padding: 14px 0; color: var(--grey-500); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.portal-tabs a.active { color: var(--black); font-weight: 600; border-bottom-color: var(--black); }
.drp-crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--grey-500); margin-bottom: 10px; }
.drp-crumbs strong { color: var(--black); }
.drp-crumbs a:hover { text-decoration: underline; }
.drp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.drp-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 5px; }
.drp-title { font-size: 24px; }
.drp-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 12px; color: var(--grey-500); background: var(--white); min-width: 240px; }
.drp-search input { border: none; outline: none; padding: 9px 0; font-size: 13px; width: 100%; background: none; }
.drp-sub { font-size: 13px; color: var(--grey-500); margin: 6px 0 22px; }
.drp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
.drp-folder { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; color: #1c213e; background: var(--white); transition: border-color 0.12s ease; }
.drp-folder:hover { border-color: var(--black); }
.drp-folder-name { font-size: 14px; font-weight: 600; color: var(--black); }
.drp-folder-meta { font-size: 11.5px; color: var(--grey-500); margin-top: 2px; }
.drp-list-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-500); margin: 24px 0 10px; }
.drp-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.drp-doc { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--grey-100); }
.drp-doc:last-child { border-bottom: none; }
.drp-doc-main { flex: 1; min-width: 0; }
.drp-doc-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drp-doc-meta { font-size: 11.5px; color: var(--grey-500); }
.drp-doc-meta a:hover { text-decoration: underline; }
.drp-doc-date { font-size: 12px; color: var(--grey-500); white-space: nowrap; }
.drp-empty { padding: 28px; text-align: center; color: var(--grey-500); font-size: 13px; border: 1px dashed var(--line-strong); border-radius: 8px; }

@media (max-width: 960px) {
  .dr-layout { flex-direction: column; }
  .dr-tree { width: 100%; box-sizing: border-box; }
  .dr-content { width: 100%; }
  .dr-start-grid, .drp-grid { grid-template-columns: 1fr; }
  .dr-kebab { display: flex; }
  .dr-row .dr-row-check { display: none; }
  .dr-preview-wrap { padding: 20px 16px; }
  .portal-tabs { padding: 0 20px; }
  .dr-overview-stats { flex-wrap: wrap; }
  .dr-overview-stats > div { flex: 1 1 40%; }
  .drp-search { min-width: 0; width: 100%; box-sizing: border-box; }
}

/* ---- Team: deactivate / reactivate ---- */
.team-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.team-tab { font: inherit; font-size: 12.5px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); color: var(--grey-700); cursor: pointer; display: inline-flex; gap: 7px; white-space: nowrap; }
.team-tab i { font-style: normal; opacity: .65; }
.team-tab.active { background: var(--black); color: var(--white); border-color: var(--black); font-weight: 500; }
.team-member { display: flex; align-items: center; gap: 11px; }
.team-av { width: 32px; height: 32px; border-radius: 50%; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.team-av.off { background: var(--grey-200); color: var(--grey-500); }
.team-name { font-weight: 500; }
tr.row-deactivated > td { background: var(--grey-50); }
tr.row-deactivated .team-name { color: var(--grey-500); }
.chip-deactivated, .chip-active { font-size: 10.5px; font-weight: 500; padding: 2px 9px; border-radius: 20px; display: inline-flex; align-items: center; margin-left: 6px; }
.chip-deactivated { background: var(--danger-bg, #fbeaea); color: var(--danger); }
.chip-active { background: var(--success-bg, #eaf4ee); color: var(--success, #1f6b3f); margin-left: 0; }
.team-switch input:checked ~ .toggle-track { background: var(--success, #1f6b3f); }
.team-confirm { max-width: 520px; }
.team-reassign { background: var(--warn-bg, #fbf1de); padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.team-radio { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--charcoal); }
.team-radio select { padding: 5px 8px; font-size: 12.5px; }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--white); }
.team-account-card { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.team-account-card.is-off { border-color: var(--danger); }
.team-dim { opacity: .55; }
@media (max-width: 960px) { .table-wrap { overflow-x: auto; } }

/* ---- Data Room: service-based structure picker ---- */
.dr-nowrap, .btn, .btn-sm, .link-btn { white-space: nowrap; }
.dr-picker { display: flex; gap: 28px; align-items: flex-start; }
.dr-picker-main { flex: 1.5; min-width: 0; }
.dr-picker-preview { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--grey-50); padding: 18px; border-radius: var(--radius); }
.dr-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.dr-picker-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.dr-picker-actions .btn:disabled { opacity: .4; cursor: not-allowed; }
.dr-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dr-svc, .dr-scratch { text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 16px; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; font: inherit; color: var(--black); transition: border-color .12s ease, box-shadow .12s ease; }
.dr-svc:hover, .dr-scratch:hover { border-color: var(--grey-500); }
.dr-svc.sel, .dr-scratch.sel { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.dr-scratch { width: 100%; box-sizing: border-box; border-style: dashed; align-items: center; }
.dr-scratch.sel { border-style: solid; }
.dr-svc-ck { width: 18px; height: 18px; border: 1.5px solid var(--grey-300); border-radius: 3px; flex-shrink: 0; box-sizing: border-box; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.dr-svc-ck.round { border-radius: 50%; margin-top: 0; }
.dr-svc.sel .dr-svc-ck { background: var(--black); border-color: var(--black); }
.dr-svc.sel .dr-svc-ck::after { content: ""; width: 5px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.dr-scratch.sel .dr-svc-ck { border-color: var(--black); }
.dr-scratch.sel .dr-svc-ck::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--black); }
.dr-scratch-ic { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--grey-50); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--grey-700); flex-shrink: 0; }
.dr-svc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dr-svc-body strong { font-size: 14px; }
.dr-svc-desc { font-size: 12px; color: var(--grey-500); line-height: 1.5; }
.dr-svc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dr-svc-chips span { font-size: 10.5px; background: var(--grey-50); border: 1px solid var(--line); color: var(--grey-700); padding: 2px 8px; border-radius: 20px; }
.dr-or { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500); }
.dr-or::before, .dr-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dr-prev-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-size: 13px; }
.dr-prev-row.top { font-weight: 600; background: var(--white); margin-top: 6px; }
.dr-prev-row.sub { margin-left: 22px; }
.dr-prev-row.hid .n { color: var(--grey-500); }
.dr-prev-row .n { flex: 1; }
.dr-prev-row .c { font-size: 11px; color: var(--grey-500); font-weight: 400; }
.dr-prev-row .eye { color: var(--success); display: flex; }
.dr-prev-row .eye.off { color: var(--grey-300); }
.dr-prev-empty { border: 1px dashed var(--line-strong); padding: 24px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--grey-500); background: var(--white); }
.dr-prev-empty strong { color: var(--black); font-size: 13.5px; }
.dr-add-services { margin-left: auto; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--grey-700); }
.dr-add-services:hover { color: var(--black); text-decoration: underline; }
@media (max-width: 960px) { .dr-picker { flex-direction: column; } .dr-picker-main, .dr-picker-preview { width: 100%; flex: none; } .dr-svc-grid { grid-template-columns: 1fr; } }

.dr-bulk-btn.danger { background: transparent; color: #f2a3a3; border: 1px solid rgba(242,163,163,.5); }
.dr-bulk-btn.danger:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }
.dr-confirm { padding: 14px; width: 270px; }
.dr-confirm-title { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.dr-confirm p { font-size: 12px; color: var(--grey-700); line-height: 1.55; margin: 0 0 12px; }
.dr-confirm-actions { display: flex; align-items: center; gap: 12px; }