/* ── Busy / click feedback ──────────────────────────────────────────────────
   #busy-bar: page-level indicator that at least one apiFetch() call is in
   flight, since this app has no page loads to fall back on for "is it doing
   something." .btn-pressed: fires the instant a button/select is clicked,
   independent of whether that click starts a network call, so the click
   itself always visibly registers. body.busy dims+disables controls for the
   (usually sub-second) duration of an in-flight request, mainly to block
   accidental double-submits. ────────────────────────────────────────────── */
#busy-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green-dim), var(--green-hi));
  z-index: 2000;
  opacity: 0;
  transition: width .2s ease, opacity .2s ease;
}
#busy-bar.active {
  width: 70%;
  opacity: 1;
  transition: width 2.5s cubic-bezier(.1,.6,.2,1), opacity .2s ease;
}
body.busy .abtn,
body.busy .action-select,
body.busy .action-panel select,
body.busy .action-panel input,
body.busy .nbtn {
  opacity: .55;
  pointer-events: none;
  cursor: wait;
}
.abtn, .nbtn, .action-select { transition: all .15s, transform .08s; }
.btn-pressed { transform: scale(.94); filter: brightness(1.3); }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg:          #080808;
  --surf:        #0e0e0e;
  --surf2:       #141414;
  --surf3:       #1a1a1a;
  --border:      #222;
  --border-g:    rgba(22,163,74,.18);
  --green:       #16a34a;
  --green-hi:    #22c55e;
  --green-dim:   #15803d;
  --green-glow:  rgba(22,163,74,.12);
  --green-glow2: rgba(22,163,74,.06);
  --text:        #d4d4d4;
  --text-dim:    #6b7280;
  --text-faint:  #374151;
  --red:         #ef4444;
  --red-dim:     rgba(239,68,68,.15);
  --amber:       #f59e0b;
  --amber-dim:   rgba(245,158,11,.15);
  --blue:        #3b82f6;
  --teal:        #14b8a6;
  --purple:      #a855f7;
  --orange:      #f97316;
  --yellow:      #eab308;
  --font:        'Courier New', Courier, monospace;
  --font-serif:  Georgia, 'Times New Roman', serif;
  --r:           2px;
  --hh:          60px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
a { color: var(--green-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; }
#main { flex: 1; overflow: hidden; position: relative; }
.view { display: none; height: 100%; overflow-y: auto; }
.view.active { display: flex; flex-direction: column; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
#topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--hh);
  padding: 0 20px;
  background: var(--surf);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}
#topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: .4;
}

.brand { display: flex; align-items: center; gap: 10px; align-self: flex-start; }
.brand-logo {
  height: 72px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1);
}
.brand-mark {
  font-size: 18px;
  font-weight: bold;
  color: var(--green-hi);
  background: var(--green-glow);
  border: 1px solid var(--border-g);
  padding: 4px 8px;
  letter-spacing: 2px;
}
.brand-name { font-size: 16px; letter-spacing: 3px; color: var(--text); font-weight: bold; }
.brand-sub  { font-size: 13px; letter-spacing: 2px; color: var(--text-dim); margin-top: 1px; }

.hstats { display: flex; align-items: center; gap: 16px; margin-left: 8px; }
.hstat  { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.hstat-n { font-size: 22px; font-weight: bold; color: var(--text); letter-spacing: -1px; }
.hstat-l { font-size: 13px; letter-spacing: 2px; color: var(--text-dim); }
.hstat-red  .hstat-n { color: var(--red); }
.hstat-amber .hstat-n { color: var(--amber); }
.hsep { width: 1px; height: 28px; background: var(--border); }

nav { margin-left: auto; display: flex; gap: 4px; }
.nbtn {
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  letter-spacing: 1.5px;
  transition: all .15s;
  border-radius: var(--r);
}
.nbtn:hover { border-color: var(--green-dim); color: var(--text); }
.outlook-badge {
  border-color: var(--amber);
  color: var(--amber);
}
.outlook-badge.outlook-pending {
  border-color: var(--green);
  color: var(--green-hi);
  box-shadow: 0 0 10px var(--green-glow);
}
.nbtn.active {
  background: var(--green-glow);
  border-color: var(--green);
  color: var(--green-hi);
  box-shadow: 0 0 10px var(--green-glow);
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress-wrap {
  padding: 12px 20px 0;
  flex-shrink: 0;
}
.progress-label {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.progress-label span { color: var(--green-hi); }
.progress-bar {
  height: 3px;
  background: var(--surf3);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-dim), var(--green-hi));
  transition: width .4s ease;
  box-shadow: 0 0 8px var(--green);
}

/* ── Review layout ──────────────────────────────────────────────────────── */
#view-review.busy {
  pointer-events: none;
  opacity: .65;
}
.review-body {
  display: flex;
  flex: 1;
  gap: 0;
  overflow: hidden;
  padding: 16px 16px 0;
  min-height: 0;
}
.review-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  padding-right: 16px;
}
.review-sidebar {
  width: 220px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: 16px;
}

/* ── Prospect card ──────────────────────────────────────────────────────── */
.pcard {
  background: var(--surf);
  border: 1px solid var(--border);
  border-top: 2px solid var(--green);
  position: relative;
  overflow: hidden;
  /* Never let flex squeeze the card shorter than its content: with
     overflow:hidden that silently clips the action bar / SAVE buttons
     with no scrollbar. Overflowing review-main instead makes it scroll. */
  flex-shrink: 0;
  animation: card-in .2s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 40px var(--green-glow2);
}
.pcard-access   { border-top-color: var(--red); }
.pcard-reengage { border-top-color: var(--yellow); }
.pcard-checkin  { border-top-color: var(--green-hi); }
@keyframes card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px);
  pointer-events: none;
}

.pcard-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pcard-edit-contact {
  position: absolute;
  top: 14px;
  right: 20px;
}
.pcard-name {
  font-family: var(--font-serif);
  font-size: 26px;
  color: #fff;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.pcard-loc { font-size: 16px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 10px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }

.pcard-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.field-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field-lbl { font-size: 14px; letter-spacing: 2px; color: var(--text-faint); }
.field-val { font-size: 18px; color: var(--text); }
.field-val.monospace { font-family: var(--font); }

/* ── Due date coloring ──────────────────────────────────────────────────── */
.date-overdue { color: var(--red) !important; }
.date-overdue::after { content: ' ⚠'; }
.date-today   { color: var(--amber) !important; }
.date-future  { color: var(--green-hi) !important; }
.date-none    { color: var(--text-dim) !important; }

/* ── Collapsible notes ──────────────────────────────────────────────────── */
.notes-section { border-top: 1px solid var(--border); padding-top: 12px; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.contact-row:last-child { border-bottom: none; }
.contact-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-name { font-size: 15px; color: var(--text); }
.contact-role { font-size: 13px; color: var(--text-dim); }
.contact-chip { font-size: 11px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; cursor: pointer; }
.contact-row-detail { display: flex; gap: 12px; font-size: 13px; color: var(--text-dim); flex-wrap: wrap; }
.contact-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.contact-more-hint { color: var(--text-faint); font-size: 13px; }
.contact-more-hint:hover { color: var(--text-dim); text-decoration: underline; }
.notes-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 0;
  margin-bottom: 6px;
}
.notes-toggle .arrow { transition: transform .2s; display: inline-block; }
.notes-toggle.open .arrow { transform: rotate(90deg); }
.notes-body {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notes-body.expanded {
  display: block;
  -webkit-line-clamp: unset;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 8px;
}
.notes-more {
  font-size: 13px;
  color: var(--green-dim);
  background: none;
  border: none;
  padding: 2px 0;
  letter-spacing: 1px;
  cursor: pointer;
}
.notes-more:hover { color: var(--green-hi); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: bold;
  border-radius: var(--r);
  border: 1px solid;
}
.badge-blue    { color: var(--blue);   border-color: rgba(59,130,246,.3);  background: rgba(59,130,246,.08); }
.badge-green   { color: var(--green-hi); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.badge-teal    { color: var(--teal);   border-color: rgba(20,184,166,.3);  background: rgba(20,184,166,.08); }
.badge-purple  { color: var(--purple); border-color: rgba(168,85,247,.3);  background: rgba(168,85,247,.08); }
.badge-orange  { color: var(--orange); border-color: rgba(249,115,22,.3);  background: rgba(249,115,22,.08); }
.badge-yellow  { color: var(--yellow); border-color: rgba(234,179,8,.3);   background: rgba(234,179,8,.08); }
.badge-dkgreen { color: #4ade80;       border-color: rgba(74,222,128,.3);  background: rgba(74,222,128,.08); }
.badge-gray    { color: var(--text-dim); border-color: var(--border);      background: var(--surf2); }
.badge-red     { color: var(--red);    border-color: rgba(239,68,68,.3);   background: rgba(239,68,68,.08); }
.badge-amber   { color: var(--amber);  border-color: rgba(245,158,11,.3);  background: rgba(245,158,11,.08); }

.temp-hot  { color: var(--red);   border-color: rgba(239,68,68,.3);  background: rgba(239,68,68,.08); }
.temp-warm { color: var(--amber); border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); }
.temp-cold { color: var(--blue);  border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.08); }

.pill-kent  { color: var(--green-hi); border-color: var(--border-g); background: var(--green-glow); }
.pill-vince { color: var(--purple);   border-color: rgba(168,85,247,.3); background: rgba(168,85,247,.08); }

/* ── Action bar ─────────────────────────────────────────────────────────── */
.action-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 16px;
  flex-shrink: 0;
}
.action-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }

.abtn {
  box-sizing: border-box;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--border);
  background: var(--surf2);
  color: var(--text);
  font-size: 15px;
  letter-spacing: 1.5px;
  border-radius: var(--r);
  transition: all .15s;
  white-space: nowrap;
}
.abtn:hover { border-color: var(--green-dim); color: var(--green-hi); background: var(--green-glow2); }
.abtn-small { height: 26px; padding: 0 10px; font-size: 12px; letter-spacing: 1px; }
.abtn-primary {
  border-color: var(--green);
  color: var(--green-hi);
  background: var(--green-glow);
}
.abtn-primary:hover { background: rgba(22,163,74,.2); box-shadow: 0 0 10px var(--green-glow); }
.abtn-skip {
  border-color: var(--border);
  color: var(--text-dim);
  margin-left: auto;
}
.abtn-skip:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.abtn-danger:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.abtn-email { border-color: #1d4ed8; color: #60a5fa; }
.abtn-email:hover { border-color: #3b82f6; color: #93c5fd; background: rgba(59,130,246,.08); }
.abtn-email:disabled { opacity: .4; cursor: not-allowed; }
.panel-email-to { font-family: 'Courier New', monospace; color: var(--text-dim); font-size: 16px; }

.action-select {
  box-sizing: border-box;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surf2);
  color: var(--text);
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: var(--r);
  transition: border-color .15s;
}
.action-select:hover { border-color: var(--green-dim); }
.action-select option { background: var(--surf2); }

.action-panel {
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
  display: none;
  gap: 8px;
  flex-direction: column;
}
.action-panel.open { display: flex; animation: panel-in .15s ease; }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }

.action-panel textarea {
  background: var(--surf3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--r);
  font-size: 15px;
  resize: vertical;
  min-height: 60px;
  width: 100%;
}
.action-panel textarea:focus { outline: none; border-color: var(--green-dim); }
.action-panel input[type="text"],
.action-panel input[type="date"] {
  box-sizing: border-box;
  height: 38px;
  background: var(--surf3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 10px;
  border-radius: var(--r);
  font-size: 15px;
}
.action-panel input:focus { outline: none; border-color: var(--green-dim); }
.action-panel input.input-error { border-color: var(--red); }
.panel-row { display: flex; gap: 8px; align-items: center; }
.panel-lbl { font-size: 12px; letter-spacing: 2px; color: var(--text-dim); white-space: nowrap; }
/* min-width:0 overrides the flex-item default of min-width:auto, which
   otherwise refuses to shrink below content's intrinsic width - a native
   datetime-local input is wider than the 220px sidebar has room for,
   and it silently overflows past the viewport's right edge. */
.panel-row input { flex: 1; min-width: 0; }

/* structured review-action controls (cold / lost / won / schedule meeting) */
.action-panel input[type="datetime-local"],
.action-panel select {
  box-sizing: border-box;
  height: 38px;
  background: var(--surf3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 10px;
  border-radius: var(--r);
  font-size: 15px;
}
.action-panel input[type="datetime-local"]:focus,
.action-panel select:focus { outline: none; border-color: var(--green-dim); }
.panel-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.panel-hint code { font-family: 'Courier New', monospace; color: var(--amber); }
.abtn-cold:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.abtn-lost { color: var(--text-dim); }
.abtn-lost:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.abtn-won { border-color: var(--green-dim); color: var(--green-hi); }
.abtn-won:hover { background: var(--green-glow); box-shadow: 0 0 10px var(--green-glow); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar-group { margin-bottom: 16px; }
.sidebar-group-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-faint);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sidebar-item {
  padding: 6px 8px;
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--r);
  border-left: 2px solid transparent;
  margin-bottom: 2px;
  transition: all .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-item:hover { background: var(--surf2); color: var(--text); }
.sidebar-item.current {
  background: var(--green-glow);
  border-left-color: var(--green);
  color: var(--green-hi);
}
.sidebar-item.overdue   { border-left-color: var(--red); color: var(--text-dim); }
.sidebar-item.today     { border-left-color: var(--amber); color: var(--text-dim); }
.sidebar-item.cold-call { border-left-color: var(--blue); color: var(--text-dim); }
.sidebar-item.action-access   { border-left-color: var(--red); color: var(--text-dim); }
.sidebar-item.action-reengage { border-left-color: var(--yellow); color: var(--text-dim); }
.sidebar-item.action-checkin  { border-left-color: var(--green-hi); color: var(--text-dim); }

/* ── Session done ───────────────────────────────────────────────────────── */
.session-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
  animation: card-in .3s ease;
}
.done-icon { font-size: 48px; }
.done-title {
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--green-hi);
}
.done-stats { display: flex; gap: 32px; }
.done-stat { text-align: center; }
.done-stat .n { font-size: 32px; font-weight: bold; color: var(--text); }
.done-stat .l { font-size: 12px; letter-spacing: 2px; color: var(--text-dim); }

/* ── Prospects table ────────────────────────────────────────────────────── */
#view-prospects { padding: 16px; flex-direction: column; gap: 12px; }

.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search-input {
  background: var(--surf);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  font-size: 15px;
  border-radius: var(--r);
  width: 240px;
  font-family: var(--font);
}
.search-input:focus { outline: none; border-color: var(--green-dim); }
.search-input::placeholder { color: var(--text-faint); }

.filter-chip {
  padding: 5px 12px;
  background: var(--surf);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: var(--r);
  transition: all .15s;
}
.filter-chip:hover { border-color: var(--green-dim); color: var(--text); }
.filter-chip.active { background: var(--green-glow); border-color: var(--green); color: var(--green-hi); }

.filter-select {
  background: var(--surf);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 10px;
  font-size: 13px;
  border-radius: var(--r);
  letter-spacing: 1px;
  font-family: var(--font);
}
.filter-select option { background: var(--surf2); }

.prospects-table { width: 100%; border-collapse: collapse; }
.prospects-table th {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-faint);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surf);
  position: sticky;
  top: 0;
  z-index: 10;
}
.prospects-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  vertical-align: top;
}
.prospects-table tr:nth-child(even) td { background: var(--surf); }
.prospects-table tr.overdue-row td:first-child { border-left: 2px solid var(--red); }
.prospects-table tr:hover td { background: var(--surf2); cursor: pointer; }
.prospects-table tr.expanded td { background: var(--surf2); }

.expand-detail {
  background: var(--surf2);
  border-left: 2px solid var(--green);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.expand-detail td { padding: 0 !important; border: none !important; background: transparent !important; }

.td-name { font-size: 16px; color: var(--text); }
.td-city { font-size: 14px; color: var(--text-dim); }
.td-step { font-size: 14px; }
.td-date { font-size: 14px; white-space: nowrap; }
.td-activity { font-size: 14px; color: var(--text-dim); }

/* ── Lead routing ───────────────────────────────────────────────────────── */
#view-routing {
  align-items: center;
  justify-content: center;
}
.routing-card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-top: 2px solid var(--green);
  padding: 48px 64px;
  text-align: center;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 0 40px var(--green-glow2);
}
.routing-title {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.routing-label {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--text);
  margin-bottom: 36px;
}
.routing-btns { display: flex; gap: 16px; justify-content: center; }
.routing-btn {
  flex: 1;
  max-width: 160px;
  padding: 20px;
  font-size: 18px;
  letter-spacing: 2px;
  border: 2px solid var(--border);
  background: var(--surf2);
  color: var(--text-dim);
  transition: all .2s;
  border-radius: var(--r);
}
.routing-btn:hover { border-color: var(--green-dim); color: var(--text); background: var(--green-glow2); }
.routing-btn.active {
  border-color: var(--green);
  color: var(--green-hi);
  background: var(--green-glow);
  box-shadow: 0 0 20px var(--green-glow);
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
/* Above .modal-overlay (z-index 1000) -- error toasts fired from inside an
   open modal (e.g. the post-inspection wizard's validation errors) must
   render on top of it, or they're invisible and a blocked action looks like
   a dead button. */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1100; }
.toast {
  padding: 10px 16px;
  border: 1px solid;
  font-size: 15px;
  letter-spacing: .5px;
  border-radius: var(--r);
  opacity: 0;
  transform: translateX(12px);
  transition: all .25s ease;
  max-width: 300px;
}
.toast.visible { opacity: 1; transform: translateX(0); }
.toast-success { background: var(--surf2); border-color: var(--green); color: var(--green-hi); }
.toast-error   { background: var(--surf2); border-color: var(--red);   color: var(--red); }
.toast-info    { background: var(--surf2); border-color: var(--border); color: var(--text-dim); }

/* ── Key hint ───────────────────────────────────────────────────────────── */
.key-hint {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-faint);
  padding: 6px 0 0;
}
.key-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surf3);
}

/* ── Dashboard home ─────────────────────────────────────────────────────── */
#view-dashboard { padding: 20px 32px; flex-direction: column; gap: 16px; overflow-y: auto; height: 100%; }

/* Guarantees the daily-driver row (stats + top priority + review CTA) always
   claims the full visible window before anything below it (breakdowns) is
   even considered -- so START REVIEW never ends up needing a scroll to reach,
   no matter how tall the breakdowns section below gets. */
.dash-fold { display: flex; flex-direction: column; gap: 16px; height: 100%; flex-shrink: 0; }

.dash-stat-row { display: flex; gap: 16px; flex: 0 0 auto; }
.dash-stat {
  flex: 1;
  background: var(--surf);
  border: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s;
  min-width: 0;
}
.dash-stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green-dim);
  opacity: 0;
  transition: opacity .15s;
}
.dash-stat:hover { border-color: var(--green-dim); }
.dash-stat:hover::after { opacity: 1; }
.dash-stat.danger::after  { background: var(--red); opacity: 1; }
.dash-stat.warn::after    { background: var(--amber); opacity: 1; }
.dash-stat.money { border-color: var(--border-g); background: linear-gradient(180deg, var(--surf), rgba(22,163,74,.04)); }
.dash-stat.money::after   { background: var(--green-hi); opacity: 1; }
.dash-stat-n {
  font-size: 34px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-stat.danger .dash-stat-n { color: var(--red); }
.dash-stat.warn   .dash-stat-n { color: var(--amber); }
.dash-stat.money  .dash-stat-n { color: var(--green-hi); }
.dash-stat-n.small { font-size: 22px; letter-spacing: -.5px; }
.dash-stat.next-insp::after { background: var(--amber); opacity: 1; }
.dash-stat-l {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-row { display: flex; gap: 16px; flex: 1; min-height: 0; }
.dash-panel {
  background: var(--surf);
  border: 1px solid var(--border);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-panel-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-panel-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }

.dash-review-cta {
  flex: 0 0 320px;
  min-height: 0;
  background: var(--surf);
  border: 1px solid var(--border);
  border-top: 3px solid var(--green);
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  box-shadow: 0 0 40px var(--green-glow2);
}
.dash-cta-label { font-size: 14px; letter-spacing: 2px; color: var(--text-dim); }
.dash-cta-title { font-family: var(--font-serif); font-size: 22px; color: #fff; }
.dash-cta-stats { display: flex; flex-direction: column; gap: 6px; }
.dash-cta-stat { font-size: 16px; color: var(--text-dim); display: flex; gap: 8px; }
.dash-cta-stat .n { color: var(--text); font-weight: bold; min-width: 28px; }
.dash-cta-btn {
  margin-top: auto;
  padding: 14px 24px;
  background: var(--green-glow);
  border: 1px solid var(--green);
  color: var(--green-hi);
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  border-radius: var(--r);
  font-family: var(--font);
}
.dash-cta-btn:hover {
  background: rgba(22,163,74,.25);
  box-shadow: 0 0 20px var(--green-glow);
}

.dash-priority-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.dash-priority-item:last-child { border-bottom: none; }
.dash-priority-item:hover { color: var(--green-hi); }
.dpi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.dpi-dot.overdue { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dpi-dot.today   { background: var(--amber); }
.dpi-dot.other   { background: var(--text-faint); }
.dpi-name { font-size: 17px; color: var(--text); flex: 1; }
.dpi-meta { font-size: 15px; color: var(--text-dim); }
.dpi-date { font-size: 15px; white-space: nowrap; }

.status-row { display: flex; align-items: center; gap: 10px; }
.status-bar-wrap { flex: 1; height: 4px; background: var(--surf3); border-radius: 2px; overflow: hidden; }
.status-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }
.status-count { font-size: 16px; color: var(--text-dim); min-width: 32px; text-align: right; }
.status-name { font-size: 15px; color: var(--text-dim); min-width: 160px; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.mt4  { margin-top: 4px; }
.mt8  { margin-top: 8px; }
.empty-state { padding: 48px; text-align: center; color: var(--text-faint); font-size: 14px; letter-spacing: 2px; }

/* ── Modal overlay ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--surf);
  border: 1px solid var(--border);
  border-top: 2px solid var(--green);
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  box-shadow: 0 8px 48px rgba(0,0,0,.6), 0 0 40px var(--green-glow);
}

.modal-head {
  font-size: 16px;
  letter-spacing: 2.5px;
  color: var(--green-hi);
  margin-bottom: 4px;
}
.modal-sub {
  font-family: var(--font-serif);
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}
.modal-queue-note {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--amber);
  margin-top: -12px;
  margin-bottom: 16px;
}
.modal-section {
  margin-bottom: 20px;
}
.modal-section.hidden { display: none; }
.modal-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}
.modal-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.outlook-code {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--green-hi);
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  text-align: center;
  margin: 10px 0 16px;
}
.modal-input {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 16px;
  border-radius: var(--r);
  margin-bottom: 6px;
}
.modal-input:focus {
  outline: none;
  border-color: var(--green-dim);
}
.modal-footer {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal-footer.hidden { display: none; }

/* ── Meeting type toggle ─────────────────────────────────────────────────── */
.mtg-type-row { display: flex; gap: 8px; }
.mtg-type-btn {
  flex: 1;
  padding: 12px;
  background: var(--surf2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 1.5px;
  border-radius: var(--r);
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mtg-type-btn:hover { border-color: var(--green-dim); color: var(--text); }
.mtg-type-btn.active {
  background: var(--green-glow);
  border-color: var(--green);
  color: var(--green-hi);
}
.mtg-type-icon { font-size: 13px; }

/* ── SOP warning ─────────────────────────────────────────────────────────── */
.sop-warning {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.3);
  border-left: 3px solid var(--amber);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--r);
  margin-bottom: 16px;
}
.sop-warning.hidden { display: none; }
.sop-icon { font-size: 18px; color: var(--amber); }
.sop-text { font-size: 15px; color: var(--text-dim); line-height: 1.5; }
.sop-text strong { color: var(--amber); }
.sop-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── DM contact rows ─────────────────────────────────────────────────────── */
.dm-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 6px;
}
.dm-row .modal-input { margin-bottom: 0; flex: 1; }
.dm-remove {
  padding: 8px 10px;
  background: var(--surf3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 17px;
  border-radius: var(--r);
  flex-shrink: 0;
}
.dm-remove:hover { color: var(--red); border-color: var(--red); }

/* ── Outcome buttons ─────────────────────────────────────────────────────── */
.outcome-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.outcome-btn {
  padding: 10px 16px;
  background: var(--surf2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 1.5px;
  border-radius: var(--r);
  transition: all .15s;
}
.outcome-btn:hover { border-color: var(--green-dim); color: var(--text); }
.outcome-btn.selected { background: var(--green-glow); border-color: var(--green); color: var(--green-hi); }
.outcome-win.selected  { background: rgba(34,197,94,.12); border-color: var(--green-hi); color: var(--green-hi); }
.outcome-hold.selected { background: rgba(245,158,11,.12); border-color: var(--amber); color: var(--amber); }
.outcome-loss.selected { background: rgba(239,68,68,.12); border-color: var(--red); color: var(--red); }

/* ── Meeting badges on cards ─────────────────────────────────────────────── */
.badge-mtg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 13px;
  letter-spacing: 1.2px;
  font-weight: bold;
  border-radius: var(--r);
  border: 1px solid;
}
.badge-mtg-insp {
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.4);
  color: var(--blue);
}
.badge-mtg-prop {
  background: rgba(168,85,247,.1);
  border-color: rgba(168,85,247,.4);
  color: var(--purple);
}
.badge-mtg-past {
  background: rgba(245,158,11,.12);
  border-color: var(--amber);
  color: var(--amber);
  animation: mtg-pulse 2s ease-in-out infinite;
}
@keyframes mtg-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* ── Schedule button in action bar ──────────────────────────────────────── */
.abtn-mtg {
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.35);
  color: var(--blue);
}
.abtn-mtg:hover {
  background: rgba(59,130,246,.2);
  border-color: var(--blue);
}

/* ── Tasks ─────────────────────────────────────────────────────────────── */
.tasks-badge { font-size:.8rem; background:#ef4444; color:#fff; border-radius:999px; padding:1px 6px; margin-left:4px; vertical-align:middle; }
.tasks-body { max-width:700px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
.tasks-add-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.todo-text-input { background:#1a1a1a; border:1px solid #333; color:#e5e5e5; border-radius:6px; padding:8px 12px; font-size:.95rem; outline:none; }
.todo-text-input:focus { border-color:#3b82f6; }
.todo-group { background:#111; border:1px solid #222; border-radius:8px; padding:12px 16px; }
.todo-group-name { font-size:.8rem; font-weight:700; letter-spacing:.08em; color:#6b7280; margin-bottom:10px; text-transform:uppercase; }
.todo-item { display:flex; align-items:flex-start; gap:10px; padding:6px 0; border-bottom:1px solid #1a1a1a; }
.todo-item:last-child { border-bottom:none; }
.todo-check { background:none; border:1px solid #444; color:#6b7280; border-radius:4px; width:22px; height:22px; cursor:pointer; flex-shrink:0; font-size:14px; display:flex; align-items:center; justify-content:center; }
.todo-check:hover { border-color:#22c55e; color:#22c55e; }
.todo-text { font-size:.95rem; color:#d1d5db; line-height:1.4; padding-top:2px; }

/* ── Accounts view ──────────────────────────────────────────────────────── */
#view-accounts { padding: 16px; flex-direction: column; gap: 12px; }

.acct-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.acct-count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
}

.acct-table-wrap {
  overflow-x: auto;
  flex: 1;
  overflow-y: auto;
}
.acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.acct-th {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-faint);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surf);
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}
.acct-th.sortable { cursor: pointer; user-select: none; }
.acct-th.sortable:hover { color: var(--text-dim); }
.acct-th.sort-active { color: var(--green-hi); }

.acct-td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}
.acct-row:nth-child(even) .acct-td { background: rgba(255,255,255,.018); }
.acct-row { cursor: pointer; }
.acct-row:hover .acct-td { background: var(--surf2); }

/* Row urgency tinting */
.acct-row-overdue .acct-td {
  background: rgba(239,68,68,.06) !important;
  border-bottom-color: rgba(239,68,68,.15);
}
.acct-row-overdue:hover .acct-td { background: rgba(239,68,68,.12) !important; }
.acct-row-today .acct-td {
  background: rgba(245,158,11,.05) !important;
  border-bottom-color: rgba(245,158,11,.12);
}
.acct-row-today:hover .acct-td { background: rgba(245,158,11,.1) !important; }

/* Account name cell — merged visual for multi-location accounts */
.acct-name {
  font-size: 15px;
  font-weight: bold;
  color: var(--text);
  min-width: 160px;
  border-left: 2px solid transparent;
}
.acct-name-multi {
  border-left-color: var(--green-dim);
}
.acct-name-cont {
  /* continuation row — blank cell */
  border-left: 2px solid var(--border);
}

.acct-ls    { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.acct-dm    { text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--text-faint); }
.acct-dm-yes { color: var(--green-hi) !important; font-weight: bold; }
.acct-phone { white-space: nowrap; font-size: 13px; }
.acct-email { font-size: 12px; }
.acct-next  { min-width: 180px; font-size: 13px; }
.acct-date  { font-size: 12px; margin-left: 6px; white-space: nowrap; }
.acct-notes { font-size: 12px; color: var(--text-dim); max-width: 220px; word-break: break-word; }

/* ── Email thread + signature preview (added 2026-06-30) ───────────────────── */
.thread-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.thread-empty { padding: 10px; color: var(--muted, #888); font-size: 13px; }
.thread-item { border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; background: var(--bg); }
.thread-head { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.thread-arrow { font-weight: 700; opacity: .8; }
.thread-subj { font-weight: 600; font-size: 13px; flex: 1; }
.thread-meta { font-size: 11px; color: var(--muted, #888); white-space: nowrap; }
.thread-preview { font-size: 12px; color: var(--muted, #999); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-body { font-size: 13px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); line-height: 1.45; }
.thread-body-frame { display: block; width: 100%; height: 420px; border: 0; border-radius: 4px; background: #fff; }
.thread-reply { margin-top: 8px; }
.thread-unread { color: #e0492f; font-size: 10px; vertical-align: middle; }
.sig-preview { flex: 1; border: 1px dashed var(--border); border-radius: 4px; padding: 8px; font-size: 12px; background: #fff; color: #242424; overflow-x: auto; max-height: 140px; overflow-y: auto; }

/* ── Pipeline tab (v1 view-only; see ROADMAP "Pipeline tab spec") ─────────── */
.pl-wrap { padding: 20px 24px; }
.pl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-toolbar .pl-filters { display: flex; gap: 8px; margin-left: auto; }
.pl-toolbar select, .pl-toolbar input[type=search] {
  background: var(--surf2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  font-size: 13px; padding: 7px 10px; font-family: var(--font);
}

.pl-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 16px; }
.pl-kpi { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px 10px; }
.pl-kpi .n { font-size: 26px; font-weight: bold; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.pl-kpi .l { font-size: 11px; letter-spacing: 2px; color: var(--text-dim); margin-top: 2px; }
.pl-kpi.money .n { color: var(--green-hi); }
.pl-kpi.money { border-color: var(--border-g); background: linear-gradient(180deg, var(--surf), rgba(22,163,74,.04)); }

.pl-sec-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 10px; }
.pl-sec-title { font-size: 13px; letter-spacing: 3px; color: var(--text-dim); }
.pl-sec-rule { flex: 1; height: 1px; background: var(--border); align-self: center; }
.pl-sec-count { font-size: 13px; color: var(--text-faint); }
.pl-bd-toggle { background: none; border: none; color: var(--text-dim); font-size: 12px; letter-spacing: 2px; padding: 0; cursor: pointer; font-family: var(--font); }
.pl-bd-toggle:hover { color: var(--green-hi); }

.pl-breakdowns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pl-breakdowns.hidden { display: none; }
.pl-bd { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; overflow-x: auto; }
.pl-bd h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: 2px; color: var(--text-dim); font-weight: normal; }
.pl-bd table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pl-bd th { text-align: left; color: var(--text-faint); font-weight: normal; letter-spacing: 1px; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--border); }
.pl-bd td { padding: 3px 8px 3px 0; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pl-bd td:first-child { color: var(--text); }
.pl-bd th.num, .pl-bd td.num { text-align: right; }

.pl-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.pl-caret { color: var(--text-faint); display: inline-block; width: 14px; transition: transform .15s; }
.pl-row.open .pl-caret { transform: rotate(90deg); color: var(--green-hi); }
.loc-chip { display: inline-block; font-size: 10px; letter-spacing: 1px; color: var(--teal); border: 1px solid rgba(20,184,166,.35); border-radius: var(--r); padding: 0 5px; margin-left: 7px; vertical-align: middle; background: rgba(20,184,166,.08); font-weight: normal; }
.dm-chip { display: inline-block; font-size: 9px; letter-spacing: 1px; color: var(--green-hi); border: 1px solid rgba(34,197,94,.35); border-radius: var(--r); padding: 0 4px; margin-left: 6px; vertical-align: middle; background: rgba(34,197,94,.08); }
.contact-dm { color: var(--green-hi); }
.pl-bb .acct-td { opacity: .55; }
.pl-bb .acct-row:hover .acct-td { opacity: 1; }
.pl-divider-row td { padding: 26px 10px 8px !important; border-bottom: 1px solid var(--border) !important; background: none !important; cursor: default !important; }

.pl-xp > td { background: var(--surf2) !important; border-bottom: 1px solid var(--border-g); padding: 0 !important; white-space: normal; max-width: none; }
.pl-xp-inner { padding: 16px 18px 14px 34px; }
.pl-xp-line { font-size: 14px; margin-bottom: 3px; color: var(--text); }
.pl-xp-line .xl { display: inline-block; min-width: 86px; font-size: 11px; letter-spacing: 2px; color: var(--text-faint); }
.pl-xp-line .sep { color: var(--text-faint); padding: 0 6px; }
.pl-xp-line b { color: var(--green-hi); }
.pl-xp-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.pl-xp-foot .spacer { flex: 1; }

@media (max-width: 900px) {
  .pl-kpis { grid-template-columns: repeat(3, 1fr); }
  .pl-breakdowns { grid-template-columns: 1fr; }
}

/* ── Compact mode for short viewports (laptop screens) ──────────────────────
   Desk monitor gets the full-size layout; under ~840px of viewport height
   everything scales down so the review card + full action bar fit without
   scrolling. review-main still scrolls as a fallback for tall panels. */
@media (max-height: 840px) {
  #topbar { padding-top: 6px; padding-bottom: 6px; }
  .brand-logo { height: 44px; }
  .hstat-n { font-size: 17px; }
  .hstat-l { font-size: 11px; }
  .nbtn { padding: 5px 12px; font-size: 12px; }

  .progress-wrap { padding: 8px 20px 0; }
  .progress-label { font-size: 11px; margin-bottom: 4px; }
  .review-body { padding: 10px 16px 0; }

  .pcard-head { padding: 10px 16px 8px; }
  .pcard-name { font-size: 20px; margin-bottom: 2px; }
  .pcard-loc { font-size: 13px; margin-bottom: 6px; }
  .pcard-body { padding: 10px 16px; gap: 8px; }
  .badge { padding: 2px 8px; font-size: 12px; letter-spacing: 1px; }
  .field-lbl { font-size: 11px; letter-spacing: 1.5px; }
  .field-val { font-size: 15px; }
  .notes-section { padding-top: 8px; }
  .notes-body { font-size: 13px; line-height: 1.5; }

  .action-bar { gap: 6px; padding: 8px 0 12px; }
  .abtn { height: 31px; padding: 0 12px; font-size: 13px; letter-spacing: 1px; }
  .action-select { height: 31px; font-size: 12px; }
  .action-panel input[type="text"],
  .action-panel input[type="date"],
  .action-panel input[type="datetime-local"],
  .action-panel select { height: 31px; font-size: 13px; }
  .action-panel textarea { font-size: 13px; min-height: 48px; }
  .sig-preview { max-height: 90px; }

  .key-hint { display: none; }

  .sidebar-item { padding: 4px 8px; font-size: 12px; }
  .sidebar-group { margin-bottom: 10px; }
}