/* =========================================================
   Patton Allen — Agent Portal
   Palette mirrors the monthly report: deep navy chrome + amber
   ========================================================= */
:root {
  --topbar-h: 78px;
  --navy-950: #0a1429;
  --navy-900: #0f1e3d;
  --navy-800: #162849;
  --navy-700: #1e3359;
  --navy-600: #2b436e;
  --navy-500: #3b547f;
  --navy-400: #6b7e9d;
  --navy-300: #a8b4c9;
  --navy-200: #d1d8e3;
  --navy-100: #e8ecf2;

  --cream-50: #faf8f4;
  --cream-100: #f3efe7;
  --cream-200: #e7e0d2;

  --ink-900: #0f1625;
  --ink-700: #34405a;
  --ink-500: #5e6a85;
  --ink-400: #8a94a8;
  --ink-300: #b8c0d0;

  --amber: #f5a524;
  --amber-soft: #fdd77a;
  --amber-deep: #d48813;

  --teal: #12857a;
  --magenta: #b23a7a;
  --purple: #6a4bb5;
  --sky: #2b7bb9;

  --good: #15835a;
  --bad: #b4392a;

  --line: #e4e0d6;
  --line-strong: #cfc8b8;

  --shadow-sm: 0 1px 2px rgba(15, 22, 37, 0.05), 0 1px 1px rgba(15, 22, 37, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 22, 37, 0.06), 0 2px 4px rgba(15, 22, 37, 0.04);
  --shadow-lg: 0 20px 40px -12px rgba(15, 22, 37, 0.14), 0 8px 16px -6px rgba(15, 22, 37, 0.08);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink-900);
  background: var(--cream-50);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { text-decoration: none; }
.svg-icon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.15em; }
/* Font Awesome glyphs (components/fa_icons.html): height-driven, width: auto keeps each glyph's native aspect ratio. */
.fa-svg { height: 1em; width: auto; flex: 0 0 auto; vertical-align: -0.125em; fill: currentColor; }
.btn-white-on-dark { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.btn-white-on-dark:hover { background: rgba(255,255,255,0.14); }
.toggle { position: relative; }
.toggle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.settings-nav a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 13px;
}
.settings-nav a:hover, .settings-nav a.on { background: #fff; color: var(--navy-900); box-shadow: var(--shadow-sm); }
.photo-upload .ph.initials {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: var(--navy-900);
  font-weight: 700;
  font-size: 22px;
}
.hosted-report-frame {
  width: 100%;
  min-height: 1200px;
  border: 0;
  background: #fff;
  display: block;
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--navy-900);
  color: var(--navy-200);
  border-right: 1px solid rgba(255,255,255,0.04);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}
.sidebar .brand-logo {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}
.sidebar .brand .mark {
  width: 36px; height: 36px;
  border: 1.5px solid var(--cream-50);
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream-50);
  font-size: 15px;
  letter-spacing: -0.5px;
}
.sidebar .brand .wordmark {
  font-family: var(--font-display);
  color: var(--cream-50);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.15;
}
.sidebar .brand .wordmark small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.28em;
  opacity: 0.6;
  font-weight: 500;
  margin-top: 2px;
}

.sidebar .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar .nav-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-400);
  padding: 14px 10px 6px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy-200);
  transition: background 0.15s, color 0.15s;
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.nav-item.active {
  background: rgba(245, 165, 36, 0.12);
  color: var(--amber);
}
.nav-item.active .nav-icon { color: var(--amber); }
.nav-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--navy-300); }
.nav-item:hover .nav-icon { color: #fff; }

.sidebar .account-menu { position: relative; margin-top: auto; }
.sidebar .agent-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.sidebar .account-menu .agent-chip {
  width: 100%;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.sidebar .account-menu .agent-chip:hover { background: rgba(255,255,255,0.06); }
.account-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.account-panel form { margin: 0; }
.account-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-900);
  cursor: pointer;
  text-align: left;
}
.account-item:hover { background: var(--line); }
.account-signout { color: #b4232a; }
.agent-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: var(--navy-900);
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.05em;
  flex: 0 0 34px;
  overflow: hidden;
}
.agent-chip .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
}
.agent-chip .info { min-width: 0; flex: 1; }
.agent-chip .info .n { font-size: 12.5px; color: #fff; font-weight: 600; line-height: 1.2; }
.agent-chip .info .r { font-size: 10.5px; color: var(--navy-300); margin-top: 1px; }

/* ---------- Main area ---------- */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--cream-50);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 32px;
  background: var(--cream-50);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar .page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}
.topbar .page-title small {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 3px;
}
.topbar .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav-toggle { display: none; }

.search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 280px;
  color: var(--ink-500);
}
.search input {
  border: 0; outline: none; flex: 1; background: transparent;
  font-size: 13px; color: var(--ink-900);
}
.search input::placeholder { color: var(--ink-400); }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-700);
  position: relative;
}
.icon-btn:hover { background: var(--cream-100); color: var(--navy-900); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  border: 2px solid #fff;
}

.content { padding: 28px 32px 60px; max-width: 1380px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  transition: background 0.12s, border 0.12s, color 0.12s;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--navy-900); color: #fff; }
.btn-primary:hover { background: var(--navy-800); }
.btn-amber { background: var(--amber); color: var(--navy-900); }
.btn-amber:hover { background: var(--amber-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy-800); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--cream-100); }
.btn-text { background: transparent; color: var(--navy-800); padding: 8px 10px; }
.btn-text:hover { color: var(--amber-deep); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 6px; }
.btn-sm svg { width: 12px; height: 12px; }
.btn:disabled,
.rail-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.btn:disabled:hover,
.rail-btn:disabled:hover {
  background: #fff;
  border-color: var(--line);
  color: var(--navy-800);
}

.notification-menu { position: relative; }
.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.notification-panel h5 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.notification-item {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.notification-item:first-of-type { border-top: 0; }
.notification-item b {
  display: block;
  font-size: 12.5px;
  color: var(--navy-900);
}
.notification-item span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-500);
}

.notice {
  padding: 11px 12px;
  border: 1px solid rgba(43,123,185,0.18);
  border-radius: 8px;
  background: rgba(43,123,185,0.06);
  color: var(--ink-700);
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 14px;
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-h {
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.card-h h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--navy-900);
  letter-spacing: -0.005em;
}
.card-h h3 small {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500); font-weight: 500; margin-bottom: 3px;
}
.card-body { padding: 18px; }

/* ---------- Badges / pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--cream-100);
  color: var(--ink-700);
  border: 1px solid var(--line);
}
.pill-amber { background: rgba(245,165,36,0.12); color: var(--amber-deep); border-color: rgba(245,165,36,0.25); }
.pill-good { background: rgba(21,131,90,0.1); color: var(--good); border-color: rgba(21,131,90,0.22); }
.pill-navy { background: var(--navy-900); color: var(--amber); border-color: transparent; }
.pill-sky { background: rgba(43,123,185,0.1); color: var(--sky); border-color: rgba(43,123,185,0.22); }
.pill-muted { background: transparent; border-color: var(--line); color: var(--ink-500); }

/* Admin reports management table */
.check-row { display: flex; flex-wrap: wrap; gap: 14px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-700); }
[data-generation-activity] { margin-bottom: 24px; }
.gen-county { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--ink-500); }
.gen-job { padding: 12px 0; border-bottom: 1px solid var(--line); }
.gen-job:last-child { border-bottom: 0; }
.gen-job-head { display: flex; align-items: center; justify-content: space-between; }
.gen-job-counties { margin-top: 4px; }
.pill-bad { background: rgba(180,57,42,0.1); color: var(--bad); border-color: rgba(180,57,42,0.22); }
.snapshot-status { font-size: 12.5px; min-height: 18px; margin: 2px 0 6px; }
.snapshot-status.ok { color: var(--good); }
.snapshot-status.warn { color: var(--bad); }
.admin-reports td { vertical-align: middle; }
.admin-reports .row-actions { display: flex; gap: 8px; align-items: center; }
.admin-reports .row-actions form { margin: 0; }
.btn-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; line-height: 1;
  border-radius: 8px;
  font-size: 12px; font-weight: 500;
  background: var(--cream-100); color: var(--ink-700);
  border: 1px solid var(--line); cursor: pointer;
}
.btn-mini:hover { background: var(--cream-200, var(--cream-100)); border-color: var(--ink-300, var(--line)); }
.btn-danger { color: var(--bad, #b4232a); border-color: rgba(180,35,42,0.25); background: rgba(180,35,42,0.06); }
.btn-danger:hover { background: rgba(180,35,42,0.12); border-color: rgba(180,35,42,0.4); }

.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
}

/* ---------- Dashboard ---------- */
.greeting {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.greeting h1 {
  font-family: var(--font-display);
  font-size: 32px;
  margin: 0;
  font-weight: 500;
  color: var(--navy-900);
  letter-spacing: -0.015em;
}
.greeting h1 em {
  font-style: italic;
  color: var(--amber-deep);
}
.greeting p {
  margin: 5px 0 0;
  color: var(--ink-500);
  font-size: 13.5px;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}

/* Featured report */
.featured {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-radius: var(--r-xl);
  color: #fff;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 320px;
}
.featured::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(245,165,36,0.18), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(43,123,185,0.2), transparent 55%);
  pointer-events: none;
}
.featured .inner {
  padding: 28px 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.featured .eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
}
.featured h2 {
  font-family: var(--font-display);
  margin: 10px 0 6px;
  font-size: 38px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.featured h2 em {
  font-style: italic;
  color: var(--amber);
}
.featured .sub {
  color: var(--navy-300);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.featured .chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.featured .chip {
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 11.5px;
  color: #fff;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.featured .actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.featured .actions .btn-amber { box-shadow: 0 6px 18px rgba(245,165,36,0.3); }

.featured .thumb {
  position: relative;
  background: var(--navy-950);
  border-left: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
}
.thumb-report {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 210/297;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  overflow: hidden;
  transform: rotate(-3deg);
  transition: transform 0.35s ease;
}
.thumb-report:hover { transform: rotate(0deg) scale(1.02); }

/* Mini report previews */
.mini-report {
  width: 100%;
  min-height: 100%;
  color: var(--ink-900);
  background: #fff;
}
.mini-report.image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.mini-report.image-preview .image-fallback { display: none; min-height: 100%; }
.mini-report.image-preview.is-broken img { display: none; }
.mini-report.image-preview.is-broken .image-fallback { display: block; }
.data-preview {
  display: flex;
  flex-direction: column;
  font-size: 6px;
}
.mini-cover {
  min-height: 38%;
  padding: 12px 13px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(15,30,61,0.96), rgba(22,40,73,0.96)),
    linear-gradient(90deg, rgba(245,165,36,0.35), transparent);
  position: relative;
  overflow: hidden;
}
.mini-cover::after {
  content: "";
  position: absolute;
  right: -18%;
  top: 10%;
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
}
.data-preview.henderson .mini-cover {
  background:
    linear-gradient(135deg, rgba(15,30,61,0.96), rgba(22,73,71,0.94)),
    linear-gradient(90deg, rgba(54,179,168,0.3), transparent);
}
.mini-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 1;
  font-size: 5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.mini-brand .mm-img {
  height: 13px;
  width: auto;
  max-width: 58px;
  object-fit: contain;
}
.mini-date {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  color: var(--amber);
  font-size: 7px;
  font-weight: 600;
}
.data-preview.henderson .mini-date { color: #8be0d6; }
.mini-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 0.92;
  margin-top: 4px;
  letter-spacing: 0;
}
.mini-title em {
  font-style: italic;
  color: #fff;
}
.mini-sub {
  position: relative;
  z-index: 1;
  margin-top: 7px;
  font-size: 5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.mini-body {
  padding: 10px 11px 11px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-kpis {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: 6px;
}
.mini-kpi {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 7px 6px;
  min-width: 0;
}
.mini-kpi.primary {
  background: var(--cream-50);
  border-color: var(--cream-200);
}
.mini-kpi span,
.mini-stat-strip span {
  display: block;
  color: var(--ink-500);
  font-size: 5px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mini-kpi strong {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  color: var(--navy-900);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-kpi:not(.primary) strong { font-size: 15px; }
.mini-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.mini-stat-strip div {
  border-bottom: 2px solid var(--cream-200);
  padding-bottom: 5px;
}
.data-preview.henderson .mini-stat-strip div { border-bottom-color: rgba(54,179,168,0.35); }
.mini-stat-strip b {
  display: block;
  margin-top: 2px;
  color: var(--navy-900);
  font-size: 10px;
  line-height: 1;
}
.mini-section-label {
  font-size: 5.5px;
  color: var(--navy-900);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 1px;
}
.mini-band-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mini-band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px;
  height: 10px;
  border-radius: 3px;
  padding: 0 5px;
  background: var(--cream-100);
  color: var(--ink-600);
  font-size: 5px;
}
.mini-band b {
  color: var(--navy-900);
  font-size: 5.5px;
}
.mini-band.seller { background: rgba(32,166,116,0.12); }
.mini-band.buyer { background: rgba(43,123,185,0.12); }
.mini-band.balanced { background: rgba(245,165,36,0.14); }
.mini-band.hosted {
  background: rgba(15,30,61,0.06);
  border: 1px solid rgba(15,30,61,0.08);
}
.mini-band.hosted b { color: var(--amber-deep); }

/* Stat tiles like the report */
.stat-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 14px;
}
.stat-tile .l {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
}
.stat-tile .l svg { width: 11px; height: 11px; }
.stat-tile .l svg.fa-svg { width: auto; height: 12px; }
.stat-tile .v {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: 7px;
}
.stat-tile .v small {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 500;
  margin-left: 3px;
}
.stat-tile .d { font-size: 11px; margin-top: 3px; color: var(--ink-500); }
.stat-tile .d.up { color: var(--good); }
.stat-tile .d.down { color: var(--bad); }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.qa {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: left;
  transition: border 0.15s, transform 0.15s;
  display: flex; flex-direction: column; gap: 6px;
}
.qa:hover {
  border-color: var(--amber);
  transform: translateY(-1px);
}
.qa .qa-icn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--cream-100);
  display: grid; place-items: center;
  color: var(--navy-800);
}
.qa .qa-icn svg { width: 16px; height: 16px; }
.qa h4 {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--navy-900);
  font-weight: 600;
}
.qa p { margin: 0; color: var(--ink-500); font-size: 11.5px; line-height: 1.4; }

/* Activity feed */
.activity {
  display: flex; flex-direction: column;
}
.activity-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 11px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}
.activity-item:first-child { border-top: 0; }
.activity-item .ic {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-100);
  color: var(--navy-800);
  flex: 0 0 28px;
}
.activity-item .ic svg { width: 13px; height: 13px; }
.activity-item .t { font-size: 12.5px; color: var(--ink-900); line-height: 1.4; }
.activity-item .t b { color: var(--navy-900); font-weight: 600; }
.activity-item .m { font-size: 11px; color: var(--ink-400); margin-top: 2px; }
.activity-item .time { font-size: 11px; color: var(--ink-400); white-space: nowrap; }

/* ---------- Library ---------- */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.library-inline-search {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-500);
}
.library-inline-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
}
.seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.seg button,
.seg a {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  color: var(--ink-700);
  font-weight: 500;
}
.seg button.on,
.seg a.on { background: var(--navy-900); color: #fff; }

.select {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-700);
  font-weight: 500;
}
.select svg { width: 13px; height: 13px; color: var(--ink-500); }

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-700);
  font-size: 12.5px;
}
.search-chip b {
  color: var(--navy-900);
  font-weight: 600;
}
.search-chip a {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--ink-500);
  font-weight: 700;
}
.search-chip a:hover {
  color: var(--navy-900);
  background: #fff;
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.empty-state {
  margin: 56px auto 0;
  max-width: 420px;
  text-align: center;
  color: var(--ink-500);
}
.empty-state h3 {
  margin: 0 0 8px;
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
}
.empty-state p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
}
.lib-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: border 0.15s, transform 0.15s, box-shadow 0.2s;
  display: flex; flex-direction: column;
  text-align: left;
}
.lib-card:hover {
  border-color: var(--navy-900);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Stretched link — the whole card opens the report viewer (same as "View").
   The action buttons sit above this overlay so "Full Report" keeps its own link. */
.lib-card .lib-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.lib-card .row-actions { position: relative; z-index: 2; }
.lib-card .thumb-wrap {
  aspect-ratio: 210/297;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 28px -22px rgba(15,30,61,0.55);
  display: flex; align-items: stretch;
}
.lib-card .thumb-wrap .mini-report { width: 100%; }
.lib-card .meta {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.lib-card .meta .m-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--navy-900);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lib-card .meta .m-sub {
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
}

.lib-kpis {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 8px;
  margin-top: 12px;
}
.lib-kpis div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--cream-50);
}
.lib-kpis span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-kpis b {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.05;
  color: var(--navy-900);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-card .row-actions {
  margin-top: 12px;
  display: flex; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.lib-card .row-actions .btn-sm { flex: 1; justify-content: center; }

/* ---------- Report viewer ---------- */
.viewer-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.viewer-main {
  min-width: 0;
}

.viewer-mode-bar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.vm-title {
  color: var(--navy-900);
  font-weight: 700;
  font-size: 13.5px;
}
.vm-sub {
  color: var(--ink-500);
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.4;
}
.viewer-note,
.inline-note {
  margin-top: 10px;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.5;
}
.inline-note {
  margin: 0;
  padding: 12px 18px;
  background: var(--cream-50);
  border-top: 1px solid var(--line);
}

.report-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Public shared-report page (the email "View the full report" destination). */
.public-report-wrap {
  max-width: 880px;
  margin: 24px auto;
  padding: 0 16px;
}
.public-report-wrap .report {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Standalone report used as the PDF-export source (report_print.html). Only the
   print rendering matters for the export; this just keeps an on-screen visit sane. */
.report-doc { background: var(--cream-50); }
.report-doc-wrap { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.report-doc-wrap .report {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* The report itself — faithful compact reproduction of layout */
.report {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-900);
  background: #fff;
}
.rep-header {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  color: #fff;
  padding: 22px 28px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
}
.rep-logo {
  display: flex; align-items: center; gap: 12px;
  padding-right: 20px;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.rep-logo-img {
  height: 46px;
  width: auto;
  display: block;
  max-width: 200px;
  object-fit: contain;
}
.rep-logo .mk {
  width: 46px; height: 46px;
  border: 1.5px solid #fff;
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.rep-logo .wm {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.1;
}
.rep-logo .wm small {
  font-family: var(--font-ui);
  display: block; font-size: 10px;
  letter-spacing: 0.3em;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 2px;
}

.rep-title {
  text-align: center;
}
.rep-title h1 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.rep-title h1 em { color: var(--amber); font-style: italic; font-weight: 700; }
.rep-title .s {
  font-size: 10.5px; letter-spacing: 0.28em;
  color: var(--navy-200);
  margin-top: 4px; font-weight: 500;
  text-transform: uppercase;
}
/* POWERED BY line lives inside the title block so it stays centered directly
   under the title (the title is centered in the space right of the logo, not
   the full header). */
.rep-title::after {
  content: "POWERED BY PATTON ALLEN MARKET INTELLIGENCE";
  display: block;
  margin-top: 12px;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.3);
  font-weight: 500;
}
.rep-title .tags { margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.rep-title .tags span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 11px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Agent branding band - appears only if branding is on */
.rep-brand-band {
  background: var(--cream-50);
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
}
.rep-brand-band.is-disabled {
  opacity: .48;
}
.rep-brand-band .ph {
  width: 54px; height: 54px; border-radius: 50%;
  overflow: hidden; flex: 0 0 54px;
  background: linear-gradient(135deg, var(--cream-200), var(--cream-100));
  display: grid; place-items: center;
  color: var(--ink-500);
  font-size: 10px;
  position: relative;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.rep-brand-band .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
}
.rep-brand-band .info { flex: 1; }
.rep-brand-band .info .n {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--navy-900);
  font-weight: 500;
}
.rep-brand-band .info .t {
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1px;
}
.rep-brand-band .agent-logo {
  /* Wider than tall so horizontal/landscape logos get room; object-fit: contain
     preserves aspect ratio, so square logos still cap at the 44px height. */
  max-width: 150px;
  max-height: 44px;
  display: grid;
  place-items: center;
}
.rep-brand-band .agent-logo.is-empty {
  display: none;
}
.rep-brand-band .agent-logo img {
  max-width: 150px;
  max-height: 44px;
  object-fit: contain;
}
.rep-brand-band .contact {
  text-align: right;
  font-size: 12px;
  color: var(--ink-700);
  line-height: 1.55;
}
.rep-brand-band .contact b { color: var(--navy-900); font-weight: 600; }

.rep-section {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}
.rep-section:last-child { border-bottom: 0; }
.rep-section h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--navy-900);
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 7px;
}
.rep-section .sub-l {
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
  padding-left: 10px;
  border-left: 2px solid var(--teal);
  margin: 14px 0 10px;
}
.rep-section .sub-l em { color: var(--ink-400); font-style: normal; font-weight: 400; margin-left: 6px; }

.rep-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.rep-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.rep-insight {
  border: 1px solid var(--line);
  border-left: 3px solid;
  border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
}
.rep-insight.pink { border-left-color: var(--magenta); }
.rep-insight.purple { border-left-color: var(--purple); }
.rep-insight.sky { border-left-color: var(--sky); }
.rep-insight.teal { border-left-color: var(--teal); }
.rep-insight .hd {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-500);
  font-weight: 600;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 5px;
}
.rep-insight.pink .hd { color: var(--magenta); }
.rep-insight.purple .hd { color: var(--purple); }
.rep-insight.sky .hd { color: var(--sky); }
.rep-insight.teal .hd { color: var(--teal); }
.rep-insight .hl {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--navy-900);
  letter-spacing: -0.005em;
}
.rep-insight.pink .hl { color: var(--magenta); }
.rep-insight.purple .hl { color: var(--purple); }
.rep-insight.sky .hl { color: var(--sky); }
.rep-insight.teal .hl { color: var(--teal); }
.rep-insight .bd {
  font-size: 11px; color: var(--ink-700); margin-top: 5px; line-height: 1.5;
}

/* Price range table */
.rep-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 8px; }
.rep-table thead th {
  text-align: left;
  padding: 10px 6px 10px 0;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-500);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}
.rep-table tbody td {
  padding: 9px 6px 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-700);
}
.rep-table tbody tr:hover td { background: var(--cream-100); }
.rep-table tbody td:first-child { font-weight: 600; color: var(--navy-900); }
.rep-table tbody td.num { font-variant-numeric: tabular-nums; }
.rep-table .lev { font-weight: 600; }
.rep-table .lev.s { color: var(--magenta); }
.rep-table .lev.b { color: var(--sky); }
.rep-table .lev.bal { color: var(--teal); }
.rep-table tfoot td {
  background: rgba(43,123,185,0.08);
  color: var(--sky);
  font-weight: 600;
  font-size: 12px;
  padding: 11px 6px 11px 0;
  border-top: 2px solid var(--sky);
  border-bottom: 0;
}
.rep-footer {
  padding: 16px 28px;
  background: var(--cream-50);
  text-align: center;
  font-size: 10px;
  color: var(--ink-500);
  line-height: 1.6;
}
.rep-footer b { color: var(--navy-900); font-weight: 600; }

/* Action rail next to report */
.action-rail {
  position: sticky;
  top: var(--topbar-h);
  display: flex; flex-direction: column;
  gap: 12px;
}
.rail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
}
.rail-card h4 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
}
.rail-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  background: #fff;
  transition: border 0.15s, background 0.15s;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--navy-800);
}
.rail-btn:last-child { margin-bottom: 0; }
.rail-btn:hover { border-color: var(--amber); background: var(--cream-50); }
.rail-btn .r-ic {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--cream-100);
  color: var(--navy-800);
  display: grid; place-items: center;
  flex: 0 0 30px;
}
.rail-btn .r-ic svg { width: 15px; height: 15px; }
.rail-btn .lbl { font-size: 13px; line-height: 1.2; }
.rail-btn .d { font-size: 11px; color: var(--ink-500); font-weight: 500; margin-top: 1px; }
.rail-btn.disabled,
.rail-btn:disabled {
  opacity: 0.64;
  cursor: not-allowed;
}

.rail-card.navy {
  background: linear-gradient(160deg, var(--navy-900), var(--navy-800));
  color: #fff;
  border: 0;
}
.rail-card.navy h4 { color: var(--amber); }
.rail-card.navy .k { font-family: var(--font-display); font-size: 28px; color: #fff; font-weight: 500; }
.rail-card.navy .k small { font-family: var(--font-ui); font-size: 12px; color: var(--navy-300); font-weight: 500; margin-left: 4px; }
.rail-card.navy .bar {
  margin-top: 12px;
  height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.rail-card.navy .bar span { display: block; height: 100%; background: var(--amber); border-radius: inherit; }
.rail-card.navy .sub { color: var(--navy-300); font-size: 11.5px; margin-top: 8px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15,30,61,0.42);
}
.modal-card {
  width: min(620px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.preview-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.preview-row span {
  color: var(--ink-500);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.preview-row b {
  color: var(--navy-900);
  font-weight: 600;
}
.email-preview-frame {
  width: 100%;
  height: 420px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.preview-message {
  margin: 14px 0;
  padding: 14px;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-50);
  color: var(--ink-800);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.modal-backdrop[hidden] {
  display: none !important;
}

/* ---------- Branding crop modal ---------- */
.crop-modal {
  width: min(560px, 100%);
}
.crop-stage {
  height: min(380px, 55vh);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.crop-stage img {
  display: block;
  max-width: 100%;
}
.crop-hint {
  margin: 12px 0 14px;
  line-height: 1.55;
}
/* Round mask for the headshot so the crop preview matches the circular avatar
   rendering everywhere it's consumed (is-round goes on the backdrop element).
   Cropper still exports a square image. */
.modal-backdrop.is-round .cropper-view-box,
.modal-backdrop.is-round .cropper-face {
  border-radius: 50%;
}

/* ---------- Clients ---------- */
.clients-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}
.client-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}
.client-list-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  background: var(--cream-50);
  color: var(--ink-700);
  transition: border 0.15s, box-shadow 0.15s, transform 0.15s;
}
.client-list-card:hover,
.client-list-card.on {
  border-color: var(--navy-900);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.cl-top,
.cl-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cl-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--navy-900);
  border: 1px solid var(--line);
}
.client-list-card h4 {
  margin: 12px 0 4px;
  color: var(--navy-900);
  font-size: 14px;
}
.client-list-card p {
  margin: 0 0 12px;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.45;
}
.cl-actions {
  color: var(--ink-500);
  font-size: 11.5px;
}
.linkish {
  color: var(--navy-900);
  font-weight: 700;
}
.mini-search {
  min-width: 260px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ink-500);
}
.mini-search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  font-size: 12.5px;
}
.list-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 18px;
}
.list-filter a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.list-filter a.on {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.contact-table {
  border-top: 1px solid var(--line);
}
.contact-row {
  display: grid;
  grid-template-columns: 34px minmax(230px, 1.3fr) minmax(150px, 0.8fr) minmax(160px, 0.8fr);
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.contact-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  background: var(--cream-100);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 12px;
}
.contact-name {
  color: var(--navy-900);
  font-weight: 700;
  font-size: 13px;
}
.contact-email,
.contact-activity span {
  color: var(--ink-500);
  font-size: 11.5px;
  margin-top: 2px;
}
.contact-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.contact-activity {
  text-align: right;
  font-size: 12px;
}
.contact-activity b {
  color: var(--navy-900);
  display: block;
}
.empty-state.compact {
  margin: 32px auto;
}
.client-form .field {
  margin-bottom: 12px;
}

/* ---------- Branding setup ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.two-col + .card { margin-top: 24px; }
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
  font-weight: 600;
}
/* Info tooltip (e.g. the "i" next to the New contact Name label) */
.field label.with-tip { display: flex; align-items: center; gap: 6px; }
.info-tip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; line-height: 0;
  color: var(--ink-400); cursor: help;
}
.info-tip:hover, .info-tip:focus-visible { color: var(--navy-900); }
.info-tip:focus { outline: none; }
.info-bubble {
  position: absolute; top: calc(100% + 9px); left: -6px;
  z-index: 30; width: max-content; max-width: 200px;
  background: var(--navy-900); color: #fff;
  text-transform: none; letter-spacing: normal; font-weight: 500;
  font-size: 11.5px; line-height: 1.45; text-align: left;
  padding: 8px 10px; border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s ease;
  pointer-events: none;
}
.info-bubble::after {
  content: ""; position: absolute; bottom: 100%; left: 12px;
  border: 5px solid transparent; border-bottom-color: var(--navy-900);
}
.info-tip:hover .info-bubble, .info-tip:focus .info-bubble, .info-tip:focus-within .info-bubble {
  opacity: 1; visibility: visible;
}
.input, .textarea, .select-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  color: var(--ink-900);
  outline: none;
  transition: border 0.12s, box-shadow 0.12s;
}
.input:focus, .textarea:focus, .select-field:focus {
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px rgba(15,30,61,0.08);
}
.textarea { min-height: 70px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.photo-upload {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--cream-50);
  transition: border 0.15s;
}
.photo-upload:hover { border-color: var(--amber); }
.photo-upload.is-dragover {
  border-style: solid;
  border-color: var(--amber);
  background: rgba(245, 165, 36, 0.08);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.18);
}
/* Don't let the dropped image hijack pointer/drag events from child elements. */
.photo-upload.is-dragover * { pointer-events: none; }
.photo-upload .ph {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cream-200), var(--cream-100));
  display: grid; place-items: center;
  color: var(--ink-500);
  font-size: 11px;
  flex: 0 0 80px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.photo-upload .ph.logo-ph {
  border-radius: 10px;
}
.photo-upload .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload .info h5 {
  margin: 0; font-size: 13.5px;
  color: var(--navy-900);
  font-weight: 600;
}
.photo-upload .info p { margin: 3px 0 10px; font-size: 12px; color: var(--ink-500); }
.upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.selected-file {
  max-width: 190px;
  color: var(--ink-500);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remove-asset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: 11.5px;
  cursor: pointer;
}
.remove-asset input {
  accent-color: var(--navy-900);
}

/* Preview header used in branding */
.preview-head {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ---------- Send & track ---------- */
.send-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 24px;
}

.recipient-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  gap: 14px;
}
.recipient-row:first-child { border-top: 0; }
.rr-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.rr-left .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-100);
  color: var(--navy-800);
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px;
  flex: 0 0 36px;
}
.rr-left .n { font-size: 13px; color: var(--navy-900); font-weight: 600; line-height: 1.2; }
.rr-left .e { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.rr-status { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-500); }
.rr-status .pill { font-variant-numeric: tabular-nums; }
.rr-status .tm { font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }

.send-compose {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.tag-row.recipient-enhanced { display: none; }
.js-enabled .tag-row.recipient-enhanced { display: flex; }
/* Locked greeting line above the message box — visually the first line of the
   email, rendered per recipient at send time, so it can't be edited (or doubled). */
.message-greeting {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-bottom: 1px dashed var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--cream-100);
  font-size: 13.5px;
}
.message-greeting .merge-token {
  font-weight: 700;
  color: var(--navy-900);
  background: rgba(245, 165, 36, 0.18);
  border-radius: 6px;
  padding: 1px 7px;
}
.message-greeting .hint { font-size: 11.5px; color: var(--ink-400); }
.message-greeting + .textarea.has-greeting {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.recipient-fallback {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-800);
  resize: vertical;
}
.js-enabled .recipient-fallback { display: none; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; min-height: 38px; background: #fff; border: 1px solid var(--line); border-radius: 8px; align-items: center; }
.tag {
  padding: 3px 8px 3px 10px;
  background: var(--cream-100);
  border-radius: 999px;
  font-size: 12px;
  color: var(--navy-900);
  display: inline-flex; align-items: center; gap: 4px;
}
.tag .x {
  color: var(--ink-400);
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 1;
  font-size: inherit;
}
.tag-row input { flex: 1; min-width: 120px; border: 0; outline: none; font-size: 13px; padding: 3px; }

.track-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.ts-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
}
.ts-tile .l { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; }
.ts-tile .v { font-family: var(--font-display); font-size: 26px; color: var(--navy-900); font-weight: 500; margin-top: 4px; }
.ts-tile .v.amber { color: var(--amber-deep); }
.ts-tile .v.teal { color: var(--teal); }
.ts-tile .v.sky { color: var(--sky); }
.card-h .report-select { width: auto; max-width: 240px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--navy-900); }

/* ---------- Social studio ---------- */
.social-grid {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 20px;
  align-items: start;
}
.stat-picker {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 10px;
  max-height: 640px; overflow: auto;
}
.sp-item {
  padding: 11px 12px;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left;
  font-size: 12.5px; color: var(--ink-700);
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.sp-item:hover { background: var(--cream-50); }
.sp-item.on { background: rgba(245,165,36,0.1); border-color: rgba(245,165,36,0.3); color: var(--navy-900); }
.sp-item .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); font-weight: 600; }
.sp-item .v { font-family: var(--font-display); font-size: 18px; color: var(--navy-900); font-weight: 500; }

.canvas-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.canvas-shell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.format-tabs {
  display: inline-flex; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px;
}
.format-tabs button {
  padding: 8px 14px;
  font-size: 12.5px;
  border-radius: 7px;
  color: var(--ink-700);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.format-tabs button.on { background: var(--navy-900); color: #fff; }

/* =========================================================
   Social card — editorial system (square / story / facebook)
   Hero auto-sizes to stat shape (short / medium / currency-md / currency-lg)
   Accent flows from --accent (set per-card by JS swatch picker)
   ========================================================= */
.social-card {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
  font-family: var(--font-ui);
  isolation: isolate;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);
}
.social-card.sq    { width: 420px; height: 420px; }
.social-card.story { width: 260px; height: 462px; }
.social-card.fb    { width: 460px; height: 241px; }

/* Atmosphere — restrained accent glow + navy depth */
.social-card .card-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 90% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 70% 50% at 5% 100%, rgba(43,67,110,0.55), transparent 65%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
}
/* Faint editorial-paper grain */
.social-card .card-noise {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.7; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.social-card .inner {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: grid;
}

/* Editorial type system (shared) */
.social-card .eb {
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent);
}
.social-card .ttl {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.0; letter-spacing: -0.01em;
  color: #fff;
}
.social-card .ttl em {
  font-style: italic; font-weight: 400;
  color: color-mix(in srgb, var(--accent) 70%, #fff);
}
.social-card .hero {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: #fff;
  display: flex; align-items: baseline; gap: 0.16em;
  white-space: nowrap;
  justify-content: center;
}
.social-card .hero .unit {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.social-card .cap {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  color: var(--navy-200);
  line-height: 1.35;
  letter-spacing: 0.005em;
}

/* Hairline gold rule */
.social-card .g-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 55%, transparent) 12%, color-mix(in srgb, var(--accent) 55%, transparent) 88%, transparent 100%);
}

/* Signature block — agent left, firm right, baseline-aligned */
.social-card .sig {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.social-card .sig .av {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  color: var(--navy-900); font-weight: 700; font-size: 11px;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 3px rgba(255,255,255,0.06);
  flex: none;
}
.social-card .sig .av img {
  width: 100%; height: 100%; object-fit: cover; object-position: 35% center;
  display: block;
}
.social-card .sig .who { min-width: 0; }
.social-card .sig .who .n {
  font-size: 11.5px; font-weight: 600; line-height: 1.2;
  color: #fff;
}
.social-card .sig .who .r {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy-300);
  margin-top: 3px;
}
.social-card .sig .firm img.firm-logo {
  height: 35px; width: auto; display: block; opacity: 0.95;
  object-fit: contain;
}

/* ---------- Square (1:1) ---------- */
.social-card.sq .inner {
  padding: 32px 32px 28px;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:
    "eb"
    "ttl"
    "hero"
    "cap"
    "rule"
    "sig";
  row-gap: 10px;
}
.social-card.sq .g-eb   { grid-area: eb; }
.social-card.sq .g-ttl  { grid-area: ttl; font-size: 22px; }
.social-card.sq .g-hero { grid-area: hero; display: grid; place-items: center; }
.social-card.sq .g-cap  { grid-area: cap; font-size: 11.5px; max-width: 92%; }
.social-card.sq .g-rule { grid-area: rule; margin: 6px 0 4px; }
.social-card.sq .g-sig  { grid-area: sig; }
.social-card.sq .hero[data-shape="short"]       { font-size: 130px; }
.social-card.sq .hero[data-shape="medium"]      { font-size: 110px; }
.social-card.sq .hero[data-shape="currency-md"] { font-size: 92px; }
.social-card.sq .hero[data-shape="currency-lg"] { font-size: 74px; }
.social-card.sq .hero[data-shape="short"] .unit  { font-size: 46px; }
.social-card.sq .hero[data-shape="medium"] .unit { font-size: 40px; }
.social-card.sq .sig .firm img.firm-logo { height: 38px; }

/* ---------- Story (9:16) ---------- */
.social-card.story .inner {
  padding: 36px 28px 30px;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:
    "eb"
    "ttl"
    "hero"
    "cap"
    "rule"
    "sig";
  row-gap: 12px;
}
.social-card.story .g-eb   { grid-area: eb; }
.social-card.story .g-ttl  { grid-area: ttl; font-size: 22px; line-height: 1.02; }
.social-card.story .g-hero { grid-area: hero; display: grid; place-items: center; }
.social-card.story .g-cap  { grid-area: cap; font-size: 12px; line-height: 1.4; }
.social-card.story .g-rule {
  grid-area: rule; width: 60%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent) 0%, transparent 100%);
}
.social-card.story .g-sig  { grid-area: sig; }
.social-card.story .hero[data-shape="short"]       { font-size: 100px; }
.social-card.story .hero[data-shape="medium"]      { font-size: 84px; }
.social-card.story .hero[data-shape="currency-md"] { font-size: 70px; }
.social-card.story .hero[data-shape="currency-lg"] { font-size: 56px; }
.social-card.story .hero[data-shape="short"] .unit  { font-size: 34px; }
.social-card.story .hero[data-shape="medium"] .unit { font-size: 28px; }
.social-card.story .sig .firm img.firm-logo { height: 33px; }

/* ---------- Facebook (1.91:1) ---------- */
/* Two-column layout with a hairline vertical rule between */
.social-card.fb .inner {
  padding: 24px 28px;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "eb   vr  hero"
    "ttl  vr  hero"
    "cap  vr  hero"
    ".    vr  rule"
    ".    vr  sig";
  column-gap: 22px;
  row-gap: 6px;
}
.social-card.fb .g-eb   { grid-area: eb; }
.social-card.fb .g-ttl  { grid-area: ttl; font-size: 20px; line-height: 1.05; }
.social-card.fb .g-cap  { grid-area: cap; font-size: 10.5px; line-height: 1.4; }
.social-card.fb .g-hero { grid-area: hero; display: grid; place-items: center; }
.social-card.fb .g-rule { grid-area: rule; margin: 4px 0; }
.social-card.fb .g-sig  { grid-area: sig; }
.social-card.fb .inner::before {
  content: "";
  grid-area: vr;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent) 18%, color-mix(in srgb, var(--accent) 45%, transparent) 82%, transparent);
}
.social-card.fb .hero[data-shape="short"]       { font-size: 76px; }
.social-card.fb .hero[data-shape="medium"]      { font-size: 64px; }
.social-card.fb .hero[data-shape="currency-md"] { font-size: 50px; }
.social-card.fb .hero[data-shape="currency-lg"] { font-size: 40px; }
.social-card.fb .hero[data-shape="short"] .unit  { font-size: 26px; }
.social-card.fb .hero[data-shape="medium"] .unit { font-size: 22px; }
.social-card.fb .sig { gap: 8px; }
.social-card.fb .sig .av { width: 28px; height: 28px; }
.social-card.fb .sig .who .n { font-size: 10px; }
.social-card.fb .sig .who .r { font-size: 7.5px; letter-spacing: 0.16em; }
.social-card.fb .sig .firm img.firm-logo { height: 28px; }

.social-tools {
  display: flex; flex-direction: column; gap: 12px;
}
.tool-group {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 14px 16px;
}
.tool-group h5 {
  margin: 0 0 10px;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 600;
}
.swatch-row { display: flex; gap: 6px; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.swatch.on { box-shadow: 0 0 0 2px var(--navy-900); }

/* ---------- Settings ---------- */
.settings-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.settings-nav {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: var(--topbar-h);
}
.settings-nav a {
  text-align: left;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink-700);
  font-weight: 500;
}
.settings-nav a:hover { background: var(--cream-100); }
.settings-nav a.on { background: var(--navy-900); color: #fff; }

.toggle {
  width: 36px; height: 20px; border-radius: 99px;
  background: var(--line-strong);
  position: relative; cursor: pointer;
  flex: 0 0 36px;
  transition: background 0.15s;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: var(--shadow-sm);
}
.toggle.on { background: var(--navy-900); }
.toggle.on::after { transform: translateX(16px); }

.opt-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.opt-row:first-child { border-top: 0; }
.opt-row .opt-t { flex: 1; }
.opt-row .opt-t h5 { margin: 0; font-size: 13.5px; color: var(--navy-900); font-weight: 600; }
.opt-row .opt-t p { margin: 2px 0 0; font-size: 12px; color: var(--ink-500); line-height: 1.45; }

/* ---------- Login (landing gate) ---------- */
.login {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 100vh;
}
.login-art {
  background: linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
  color: #fff;
  padding: 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-art::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(245,165,36,0.3), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(43,123,185,0.25), transparent 55%);
}
.login-art .lp-brand {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
}
.login-art .lp-brand-logo {
  height: 50px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
.login-art .lp-brand .mk {
  width: 50px; height: 50px;
  border: 1.5px solid #fff; border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.login-art .lp-brand .wm {
  font-family: var(--font-display); font-size: 17px;
  letter-spacing: 0.14em; font-weight: 600;
}
.login-art .lp-brand .wm small { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.28em; opacity: 0.7; margin-top: 2px; font-weight: 500; }
.login-art .hero {
  position: relative; z-index: 1;
}
.login-art .hero .eb { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.login-art .hero h1 {
  font-family: var(--font-display);
  margin: 14px 0 12px;
  font-size: 50px; font-weight: 500;
  line-height: 1.03; letter-spacing: -0.015em;
}
.login-art .hero h1 em { color: var(--amber); font-style: italic; }
.login-art .hero p { max-width: 420px; color: var(--navy-200); font-size: 14px; line-height: 1.6; }
.login-art .feats { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; position: relative; z-index: 1; }
.login-art .feats .f { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--navy-200); }
.login-art .feats .f svg { width: 14px; height: 14px; color: var(--amber); }
.login-art .foot { position: relative; z-index: 1; font-size: 11px; color: var(--navy-400); letter-spacing: 0.08em; }

.login-form {
  padding: 60px; display: flex; flex-direction: column; justify-content: center;
  max-width: 500px; width: 100%; margin: 0 auto;
}
.login-form h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  margin: 0 0 6px; color: var(--navy-900); letter-spacing: -0.01em;
}
.login-form .sub { color: var(--ink-500); margin: 0 0 28px; font-size: 13.5px; }
.login-form .ft { font-size: 12px; color: var(--ink-500); margin-top: 18px; }
.login-form .ft a { color: var(--navy-900); font-weight: 600; text-decoration: none; }
.login-form .divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0;
  color: var(--ink-400); font-size: 11px; letter-spacing: 0.1em;
}
.login-form .divider::before, .login-form .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ---------- Tweaks panel ---------- */
.tweaks-panel {
  position: fixed; right: 20px; bottom: 20px;
  width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 100;
  font-size: 13px;
}
.tweaks-panel h5 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.tweaks-panel h5 span { color: var(--navy-900); font-size: 13px; text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 500; }
.tweak-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; gap: 12px; }
.tweak-row label { font-size: 12.5px; color: var(--ink-700); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: var(--navy-900); color: #fff;
  padding: 12px 20px;
  border-radius: 99px;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  z-index: 200;
  animation: toastIn 0.25s ease;
}
.toast svg { color: var(--amber); width: 16px; height: 16px; }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Utilities ---------- */
.hstack { display: flex; align-items: center; gap: 10px; }
.vstack { display: flex; flex-direction: column; gap: 10px; }
.sep { height: 1px; background: var(--line); margin: 12px 0; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-500); }
.small { font-size: 12px; }
.ts-mono { font-variant-numeric: tabular-nums; }

.fade-in { animation: fadeIn 0.22s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media print {
  body { background: #fff; }
  .sidebar,
  .topbar,
  .action-rail,
  .viewer-note,
  .viewer-mode-bar,
  .nav-scrim,
  .nav-toggle,
  .toast {
    display: none !important;
  }
  .app,
  .main,
  .content,
  .viewer-grid,
  .viewer-main,
  .report-wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
  }
  .hosted-report-frame {
    width: 100% !important;
    min-height: 10in !important;
    border: 0 !important;
  }

  /* --- Branded report PDF export (report_print.html) + branded-view print ---
     Full-bleed the report, force backgrounds/gradients to render, and control
     pagination so nothing splits mid-card or mid-row. */
  .report-doc,
  .report-doc-wrap {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  .report-doc-wrap .report {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .report,
  .report * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .rep-header,
  .rep-brand-band,
  .stat-tile,
  .rep-insight,
  .rep-footer { break-inside: avoid; }
  .rep-section h2 { break-after: avoid; }
  .rep-stats { break-inside: avoid; }

  /* The responsive breakpoints (@media max-width:1024/768) also match the letter
     page width and come later in the file, so they'd otherwise win — pin the
     report to its desktop (web-report) layout for the PDF. */
  .rep-stats { grid-template-columns: repeat(6, 1fr) !important; }
  .rep-insights { grid-template-columns: 1fr 1fr !important; }
  /* Six cards across a letter page are narrow — tighten so values (e.g. prices)
     don't wrap mid-number. */
  .stat-tile { padding: 10px 9px; }
  .stat-tile .l { font-size: 9px; }
  .stat-tile .v { font-size: 17px; white-space: nowrap; }

  /* Price table: 12 columns overflow letter width, so fit it to the page
     (fixed layout + wrap) instead of letting it clip. Flow across pages, never
     split a row, repeat the header row. */
  .table-scroll { overflow: visible !important; }
  .table-scroll .rep-table { min-width: 0 !important; }
  .rep-table {
    width: 100% !important;
    table-layout: fixed;
    font-size: 8.5px;
  }
  .rep-table th,
  .rep-table td {
    padding: 4px 4px;
    overflow-wrap: break-word;
  }
  /* Keep numeric cells from breaking mid-number (they fit the fixed column). */
  .rep-table td.num { white-space: nowrap; }
  .rep-table thead { display: table-header-group; }
  .rep-table tr { break-inside: avoid; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid var(--cream-50); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Client list / contact management ---------- */
.row-menu { margin-top: 8px; }
.row-menu > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 600;
  color: var(--navy-600); display: inline-flex; align-items: center; gap: 5px;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary::before { content: "⋯"; font-weight: 700; }
.row-menu[open] > summary::before { content: "×"; }
.row-menu .stack-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.row-menu .stack-form .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.assign-lists { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0; }
.assign-lists .check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-700); }
.contact-entry { border-bottom: 1px solid var(--line); padding: 14px 18px; }
.contact-entry .contact-row { border-bottom: 0; padding: 0; }
/* The topbar is sticky at top:0, so an un-offset :target anchor scrolls the row
   underneath it and the jump looks like it did nothing. */
.contact-entry { scroll-margin-top: calc(var(--topbar-h) + 16px); }
/* A brief flash, not a persistent fill: after a delete the anchor lands on a
   BYSTANDER row, and leaving that permanently shaded reads as "this one changed". */
.contact-entry:target { animation: rowSaved 1.4s ease-out; }

/* Bulk selection. The bar is a real form living OUTSIDE .contact-table; the row
   checkboxes join it with form="bulkContacts", so selection works with no JS.
   With JS the bar only appears once something is selected — same progressive
   enhancement idiom as .js-enabled .recipient-fallback above. */
.js-enabled .bulk-bar:not(.is-active) { display: none; }
.bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--line);
  background: var(--cream-50);
  position: sticky; top: var(--topbar-h); z-index: 9;
}
.bulk-bar .select-field { max-width: 190px; }
.bulk-count { font-size: 12px; font-weight: 700; color: var(--navy-900); margin-right: 2px; }
.bulk-danger { color: var(--bad); margin-left: auto; }
.contact-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
}
/* Select-all retired after an in-place edit changed which rows are shown: only a
   reload can produce a digest that matches what is actually on screen. */
.contact-head.is-stale { opacity: 0.55; }
.contact-check { justify-content: center; margin: 0; }
.contact-entry.just-saved { animation: rowSaved 1.4s ease-out; }
@keyframes rowSaved {
  from { background: var(--cream-100); }
  to { background: transparent; }
}

/* =========================================================
   Responsive — additive, desktop-preserving overrides.
   Breakpoints: 1024 tablet · 768 phone (off-canvas nav) · 480 small phone.
   At >=1025px none of these match, so desktop renders unchanged.
   ========================================================= */

/* Horizontally scrollable wrapper for dense tables (rep-table / admin-reports). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Tablet (<= 1024px): collapse asymmetric content grids ---------- */
@media (max-width: 1024px) {
  .dash-grid,
  .featured,
  .viewer-grid,
  .clients-layout,
  .send-grid,
  .social-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  /* Grid items default to min-width:auto and refuse to shrink below their
     content's min-content width, overflowing the collapsed track. Let them
     shrink so fixed-ish content (forms, pill rows, long emails) reflows. */
  .dash-grid > *,
  .featured > *,
  .viewer-grid > *,
  .clients-layout > *,
  .send-grid > *,
  .social-grid > *,
  .settings-grid > * { min-width: 0; }

  .stat-row,
  .rep-stats { grid-template-columns: repeat(3, 1fr); }

  /* Sticky rails are pointless once their column is full-width — let them flow. */
  .action-rail { position: static; }

  /* Social studio: stack the three panels; cap the stat picker height. */
  .stat-picker { max-height: 360px; }
}

/* ---------- Phone (<= 768px): off-canvas nav + single column ---------- */
@media (max-width: 768px) {
  :root { --topbar-h: 60px; }

  /* Sidebar leaves the grid and becomes a fixed slide-in drawer. */
  .app { display: block; min-height: 100dvh; }

  .js-enabled .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 264px;
    max-width: 84vw;
    height: 100vh;            /* fallback */
    height: 100dvh;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    will-change: transform;
    box-shadow: var(--shadow-lg);
    padding-left: max(14px, env(safe-area-inset-left));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .js-enabled .app.nav-open .sidebar { transform: translateX(0); }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 41, 0.5);
    z-index: 110;
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  .app.nav-open .nav-scrim { opacity: 1; }
  .nav-scrim[hidden] { display: none; }

  /* Hamburger lives in the topbar; 40px tap target. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy-900);
  }
  .nav-toggle:hover { background: var(--cream-100); }

  body.nav-locked { overflow: hidden; }

  /* Tighten chrome. */
  .topbar {
    padding: 12px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 12px;
  }
  .topbar .page-title { font-size: 18px; }
  .content { padding: 20px 16px 48px; max-width: none; }

  /* Topbar search is too wide for a phone — drop it (search lives on Library). */
  .search { display: none; }
  .library-inline-search { display: flex; }

  /* Remaining symmetric grids collapse to a single column. */
  .two-col,
  .field-row,
  .rep-insights,
  .quick-actions,
  .client-list-grid { grid-template-columns: 1fr; }

  /* Contact rows: stack name / tags / activity. */
  /* Keep the select checkbox as a gutter rather than giving it its own line. */
  .contact-row { grid-template-columns: 34px 1fr; gap: 4px 10px; }
  .contact-tags,
  .contact-activity { grid-column: 2; }
  .bulk-bar { position: static; }

  /* Send history rows: let the status pills wrap under the name, and keep
     long emails from forcing the row wider than the viewport. The .n/.e text
     lives in an unclassed flex child that needs min-width:0 to allow ellipsis. */
  .recipient-row { flex-wrap: wrap; }
  .rr-status { flex-wrap: wrap; }
  .rr-left > div { min-width: 0; }
  .rr-left .n,
  .rr-left .e { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Relax fixed-width filter inputs so they fit. */
  .mini-search,
  .list-filter { min-width: 0; width: 100%; }

  /* Settings nav becomes a horizontal scroll strip instead of a sticky rail. */
  .settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav a { white-space: nowrap; }

  /* Force dense tables to scroll rather than crush columns. */
  .table-scroll .rep-table { min-width: 760px; }
  .table-scroll .admin-reports { min-width: 640px; }

  /* Report header: stack logo over title; the auto/1fr/auto grid + 80px
     spacer overflows otherwise. Drop the spacer; flip the logo divider. */
  .rep-header { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 20px 18px 28px; }
  .rep-header > div[style] { display: none; }
  .rep-logo {
    justify-content: center;
    padding-right: 0; padding-bottom: 14px;
    border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .rep-title .tags { flex-wrap: wrap; }

  /* Enlarge primary tap targets. */
  .icon-btn { width: 40px; height: 40px; }
  .nav-item { padding: 12px 10px; }
  .btn { padding: 11px 14px; }

  /* Let the format selector and action button rows wrap instead of clipping. */
  .format-tabs { display: flex; flex-wrap: wrap; }
  .hstack { flex-wrap: wrap; }

  /* --------- Social Studio preview ---------
     Editor preview ONLY — the PNG export renders pages/social_card_only.html,
     which has no .canvas-wrap/.canvas-shell. Do NOT change the intrinsic
     .social-card.{sq,story,fb} dimensions or the export breaks.
     Use `zoom` (NOT transform): the cards have fixed px widths (420/260/460)
     that would otherwise force the collapsed grid column wider than the
     viewport. transform: scale shrinks pixels but leaves the layout box at
     full width, so the column still overflows and gets clipped. `zoom`
     reflows the box, so the card renders smaller AND takes a smaller footprint.
     :has() keys the zoom to the live format class the editor swaps. */
  .social-grid { grid-template-columns: minmax(0, 1fr); }
  .canvas-wrap { width: 100%; min-width: 0; }
  .canvas-shell { padding: 12px; }
  .canvas-shell:has(.social-card.sq)    { zoom: 0.72; }
  .canvas-shell:has(.social-card.story) { zoom: 0.92; }
  .canvas-shell:has(.social-card.fb)    { zoom: 0.66; }

  /* Backstop: prevent stray horizontal scroll from any un-caught fixed width.
     (Intended scroll lives inside .table-scroll, which is unaffected.) */
  html, body { overflow-x: hidden; }
}

/* ---------- Small phone (<= 480px) ---------- */
@media (max-width: 480px) {
  .stat-row,
  .rep-stats { grid-template-columns: repeat(2, 1fr); }
  .track-summary { grid-template-columns: 1fr; }

  .greeting { flex-direction: column; align-items: flex-start; gap: 12px; }
  .greeting h1 { font-size: 24px; }
  .featured h2 { font-size: 26px; }
}

/* ---------- Login page (standalone — no shell/drawer) ----------
   The desktop two-column split (>1024px) is unchanged. On narrower screens the
   navy brand panel is reused as a centered gradient "brand card" with a rounded
   base — keeping the logo, glow, and Playfair headline — with the sign-in form
   on cream below. Tablet keeps the headline + feature list; phone distills to
   logo + eyebrow + a tight headline. */
@keyframes loginRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--cream-50);
  }
  .login-art {
    padding: 44px 32px 40px;
    padding-top: max(44px, calc(env(safe-area-inset-top) + 30px));
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 22px;
    border-radius: 0 0 30px 30px;
  }
  .login-art .lp-brand { justify-content: center; animation: loginRise 0.5s ease both; }
  .login-art .lp-brand-logo { height: 56px; }
  .login-art .hero {
    display: flex; flex-direction: column; align-items: center;
    animation: loginRise 0.5s ease 0.08s both;
  }
  .login-art .hero h1 { font-size: 32px; margin: 14px 0 14px; max-width: 16ch; }
  .login-art .hero p { margin-inline: auto; font-size: 13.5px; }
  .login-art .feats { align-items: center; }
  .login-form {
    padding: 44px 24px 48px;
    max-width: 440px;
    justify-content: flex-start;
    animation: loginRise 0.5s ease 0.16s both;
  }
}

@media (max-width: 600px) {
  .login-art {
    padding: 34px 26px 30px;
    padding-top: max(34px, calc(env(safe-area-inset-top) + 22px));
    gap: 16px;
  }
  .login-art .lp-brand-logo { height: 48px; }
  .login-art .hero .eb { font-size: 10px; }
  .login-art .hero h1 { font-size: 24px; margin: 12px 0 0; max-width: 18ch; }
  .login-art .hero p,
  .login-art .feats,
  .login-art .foot { display: none; }
  .login-form { padding: 32px 20px 40px; }
  .login-form h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-art .lp-brand,
  .login-art .hero,
  .login-form { animation: none; }
}