/* ============================================================
   ATLAS ONE — Page-Specific Styles
   ============================================================ */

/* ---- Revenue / Forecast ---- */
.rv-seg { display: inline-flex; align-items: center; gap: 4px; }
.rv-seg-btn { border: 1px solid var(--grey-200); background: var(--white); color: var(--grey-600); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; }
.rv-seg-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.rv-seg-label { font-size: 11px; color: var(--grey-400); margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.rv-growth { display: flex; align-items: center; gap: 8px; }
.rv-growth-label { font-size: 12px; color: var(--grey-600); white-space: nowrap; }
.rv-growth input[type=range] { width: 120px; accent-color: var(--blue); }

.rv-fc-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.rv-fc-chip { flex: 1; min-width: 120px; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 10px 14px; }
.rv-fc-chip-label { font-size: 11px; color: var(--grey-500); font-weight: 600; }
.rv-fc-chip-value { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; margin-top: 2px; }

.rv-chart-svg { width: 100%; height: auto; display: block; font-family: 'Inter', sans-serif; }

/* Button styled as an inline link (e.g. client name in the invoices table) */
button.rv-link { border: none; background: none; padding: 0; font: inherit; color: var(--blue); cursor: pointer; }
button.rv-link:hover { text-decoration: underline; }

/* Month range picker (Revenue + Invoices) */
.rv-month-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-month-filter label { font-size: 12px; color: var(--grey-600); display: inline-flex; align-items: center; gap: 5px; }
.rv-month-filter input[type=month] { font-family: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--grey-200); border-radius: var(--radius-sm); color: var(--grey-800); }

/* Outgoings — category bar chart */
.rv-obar-wrap { margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--grey-100); }
.rv-obar-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.rv-obar-row { display: grid; grid-template-columns: 170px 1fr 160px; align-items: center; gap: 12px; padding: 9px 0; }
.rv-obar-label { font-size: 13px; color: var(--grey-700); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-obar-track { height: 18px; background: var(--grey-100); border-radius: 4px; overflow: hidden; margin-left: 2px; }
.rv-obar-fill { height: 100%; border-radius: 4px; min-width: 2px; }
.rv-obar-val { font-size: 13px; color: var(--grey-600); text-align: right; font-variant-numeric: tabular-nums; }
.rv-obar-prev { display: block; font-size: 11px; color: var(--grey-400); margin-top: 2px; }
@media (max-width: 640px) { .rv-obar-row { grid-template-columns: 110px 1fr 96px; gap: 8px; } .rv-obar-label, .rv-obar-val { font-size: 12px; } }

/* Outgoings — total row equal in size to entries */
.rv-out-table .rv-out-total td { border-top: 2px solid var(--grey-200); background: var(--grey-50); }
.rv-out-table .rv-out-total:hover { background: var(--grey-50); }

/* Invoices summary on Revenue page */
.rv-inv-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rv-inv-card { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 12px 14px; }
.rv-inv-val { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.rv-inv-val.kpi-green { color: var(--green); } .rv-inv-val.kpi-amber { color: var(--amber); }
.rv-inv-lbl { font-size: 11px; color: var(--grey-500); font-weight: 600; margin-top: 2px; }
@media (max-width: 640px) { .rv-inv-summary { grid-template-columns: 1fr; } }
.rv-legend { display: flex; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.rv-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey-600); }
.rv-leg-line { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.rv-leg-line.dashed { background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; }
/* Revenue-page legend: one row with dividers between items. The #rv-chart anchor
   raises specificity so this wins over the report donut's .rv-legend (column). */
#rv-chart + .rv-legend { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; }
#rv-chart + .rv-legend .rv-leg { padding: 0 14px; border-right: 1px solid var(--grey-200); }
#rv-chart + .rv-legend .rv-leg:first-child { padding-left: 0; }
#rv-chart + .rv-legend .rv-leg:last-child { padding-right: 0; border-right: none; }

.rv-clientads { display: flex; flex-direction: column; gap: 14px; }
.rv-ca-row { border: 1px solid var(--grey-100); border-radius: var(--radius-sm); padding: 12px 14px; }
.rv-ca-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rv-ca-name { border: none; background: none; padding: 0; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--blue); cursor: pointer; }
.rv-ca-name:hover { text-decoration: underline; }
.rv-ca-figs { font-size: 12px; color: var(--grey-600); }
.rv-bar { height: 8px; background: var(--grey-100); border-radius: 5px; overflow: hidden; margin: 8px 0; }
.rv-bar-fill { height: 100%; background: var(--blue); border-radius: 5px; }
.rv-plats { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-plat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--grey-700); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 20px; padding: 3px 9px; }
.rv-plat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--grey-400)); }

/* Invoice modal — typed line items (type · platform · item · desc · qty · price · ×) */
.iv-items-head, .iv-item { display: grid; grid-template-columns: 110px 100px 1.2fr 1.4fr 56px 76px 28px; gap: 6px; align-items: center; }
.iv-items-head { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-400); padding: 0 2px 4px; }
.iv-item { margin-bottom: 6px; }
.iv-item .form-input, .iv-item .form-select { padding: 6px 8px; font-size: 12px; }
.iv-i-del { border: none; background: var(--grey-100); color: var(--grey-500); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 16px; line-height: 1; }
.iv-i-del:hover { background: var(--red-light, #FEE2E2); color: var(--red); }
.iv-items-actions { display: flex; gap: 8px; margin-top: 6px; }
.iv-totals { margin-top: 12px; border-top: 1px solid var(--grey-200); padding-top: 10px; }
.iv-tot-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--grey-600); padding: 3px 0; }
.iv-tot-row strong { color: var(--grey-800); font-variant-numeric: tabular-nums; }
.iv-tot-grand { font-size: 16px; color: var(--navy); border-top: 1px solid var(--grey-200); margin-top: 4px; padding-top: 8px; }
.iv-tot-grand strong { color: var(--navy); font-weight: 800; }
@media (max-width: 720px) { .iv-items-head { display: none; } .iv-item { grid-template-columns: 1fr 1fr; } }

/* Invoice status filter chips */
.iv-status-filter { display: flex; gap: 4px; flex-wrap: wrap; }

/* Invoice view popup */
.iv-view-wrap { max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-sm); }
.modal.modal-lg { max-width: 880px; width: 94vw; }

/* ---- Coming Soon Placeholder ---- */
.coming-soon-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.coming-soon-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.coming-soon-desc {
  font-size: 13px;
  color: var(--grey-400);
  max-width: 360px;
  line-height: 1.6;
}

/* ---- Dashboard ---- */
.dashboard-welcome {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 20px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-welcome-text h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.dashboard-welcome-text p {
  font-size: 13px;
  opacity: 0.75;
}

.dashboard-welcome-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 20px;
}

/* Dashboard headline cards (top-right): Cleo blue, white text */
.rev-cards { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rev-card {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 132px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.rev-card-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 4px; white-space: nowrap; }
.rev-card-value { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.rev-card-extra { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }
@media (max-width: 600px) { .rev-cards { justify-content: flex-start; } .rev-card { flex: 1; min-width: 100px; } }

/* ---- Client Profile ---- */
.client-profile-header {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.client-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.client-profile-meta { flex: 1; min-width: 0; }

.client-profile-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.client-profile-sub {
  font-size: 13px;
  color: var(--grey-500);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.client-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.profile-back { margin-bottom: 12px; }

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}
.profile-field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 4px;
}
.profile-field-value {
  font-size: 13px;
  color: var(--grey-800);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--blue);
  background: var(--blue-light);
  border-radius: 20px;
  padding: 3px 10px;
}
.profile-lead-banner {
  font-size: 12.5px;
  color: var(--grey-700);
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.profile-actions-row { margin-top: 18px; }

@media (max-width: 600px) {
  .profile-grid { grid-template-columns: 1fr; }
  .client-profile-header { flex-direction: column; }
  .client-profile-actions { width: 100%; }
  .client-profile-actions .btn { flex: 1; justify-content: center; }
}

/* ---- Client / company pickers ---- */
.picker-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--grey-200); border-radius: var(--radius); }
.picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--grey-100);
  padding: 10px 14px; cursor: pointer; font-family: inherit;
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: var(--blue-light); }
.picker-item-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.picker-item-sub { font-size: 11px; color: var(--grey-400); margin-top: 1px; }

.company-choose { display: flex; gap: 8px; align-items: center; }
.company-panel { margin-top: 8px; border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 8px; background: var(--grey-50); }
.company-options { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.company-opt {
  text-align: left; width: 100%; background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm); padding: 7px 10px; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--grey-800);
}
.company-opt:hover { border-color: var(--blue); background: var(--blue-light); }
.company-opt-new { color: var(--blue); font-weight: 600; }

/* ---- Client engagements editor ---- */
.eng-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); margin-bottom: 12px; }
.eng-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.eng-card { border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; background: var(--grey-50); }
.eng-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.eng-card-head input { flex: 1; font-weight: 600; }
.eng-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }

/* ---- Outreach Campaigns ---- */
.campaign-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 4px; }
.campaign-card { border: 1px solid var(--grey-200); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.campaign-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); border-color: var(--grey-300); }
.campaign-card-open { padding: 16px 16px 10px; cursor: pointer; }
.campaign-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.campaign-card-name { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.3; }
.campaign-card-meta { font-size: 11px; color: var(--grey-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.campaign-card-angle { font-size: 12.5px; color: var(--grey-600); line-height: 1.5; margin-bottom: 12px; }
.campaign-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--grey-100); padding-top: 12px; }
.campaign-metric { text-align: center; }
.campaign-metric-value { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1; }
.campaign-metric-value.kpi-green { color: var(--green); }
.campaign-metric-label { font-size: 9.5px; color: var(--grey-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
.campaign-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--grey-100); background: var(--grey-50); border-radius: 0 0 var(--radius) var(--radius); }

.campaign-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.campaign-detail-angle { font-size: 13px; color: var(--grey-600); font-style: italic; }
.campaign-metrics-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.campaign-metrics-bar .campaign-metric { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 14px 10px; }
.campaign-metrics-bar .campaign-metric-value { font-size: 22px; }
@media (max-width: 700px) { .campaign-metrics-bar { grid-template-columns: repeat(3, 1fr); } }

/* ---- Assign Leads picker ---- */
.assign-list { max-height: 44vh; overflow-y: auto; border: 1px solid var(--grey-200); border-radius: var(--radius); }
.assign-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--grey-100); cursor: pointer; }
.assign-row:last-child { border-bottom: none; }
.assign-row:hover { background: var(--blue-light); }
.assign-info { display: flex; flex-direction: column; min-width: 0; }
.assign-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.assign-sub { font-size: 11px; color: var(--grey-400); margin-top: 1px; }

/* ---- Lead Finder briefs ---- */
.brief-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 4px; }
.brief-card { border: 1px solid var(--grey-200); border-radius: var(--radius); background: var(--white); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.brief-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.brief-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.brief-card-name { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.3; }
.brief-card-meta { font-size: 11px; color: var(--grey-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.brief-card-body { font-size: 12.5px; color: var(--grey-700); line-height: 1.5; }
.brief-card-sources { display: flex; flex-direction: column; gap: 3px; }
.brief-source { font-size: 12px; color: var(--blue); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-source:hover { text-decoration: underline; }
.brief-card-notes { font-size: 12px; color: var(--grey-500); line-height: 1.5; border-left: 3px solid var(--grey-200); padding-left: 10px; }
.brief-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--grey-100); padding-top: 10px; margin-top: 2px; }

/* ---- Credit Tracker ---- */
.form-input-sm { padding: 6px 8px; font-size: 13px; height: auto; }
.credit-table td { vertical-align: middle; }
.credit-table input.credit-input[type="number"] { max-width: 110px; }
.credit-remaining { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.credit-remaining.kpi-green { color: var(--green); }
.credit-remaining.kpi-amber { color: var(--amber); }
.credit-remaining.kpi-red { color: var(--red); }

/* ---- Retainer renewal indicator (separate from health dot) ---- */
.expiry-wrap { display: inline-flex; align-items: center; gap: 7px; }
.expiry-bar { display: inline-block; width: 5px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.expiry-bar.green { background: var(--green); }
.expiry-bar.amber { background: var(--amber); }
.expiry-bar.red   { background: var(--red); }
.expiry-text { font-size: 11px; color: var(--grey-500); white-space: nowrap; }
.expiry-text.strong { font-weight: 700; }
.expiry-text.strong.amber { color: var(--amber); }
.expiry-text.strong.red   { color: var(--red); }

/* ---- Dashboard period selector ---- */
.period-block { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.period-select { min-width: 150px; }
@media (max-width: 600px) { .period-block { align-items: stretch; width: 100%; } }

/* ---- Team Chat ---- */
.chat-identity { display: inline-flex; align-items: center; gap: 8px; }
.chat-identity-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-400); }
.chat-username { width: 130px; }
.chat-banner {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--grey-700);
  background: var(--blue-light); border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px; margin-bottom: 16px; line-height: 1.5;
}
.chat-layout { display: grid; grid-template-columns: 200px 1fr 200px; gap: 16px; height: calc(100vh - 250px); min-height: 420px; }
/* Online users panel */
.chat-online { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 10px; overflow-y: auto; }
.chat-online-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); padding: 6px 8px 10px; }
.chat-online-member { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast); }
.chat-online-member:hover:not(.chat-online-me) { background: var(--blue-light); }
.chat-online-me { cursor: default; opacity: 0.75; }
.chat-online-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #F0F0F0; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-online-me .chat-online-avatar { background: var(--grey-400); }
.chat-online-info { min-width: 0; }
.chat-online-name { font-size: 12px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-online-status { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--grey-400); margin-top: 1px; }
.chat-online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.chat-channels { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 10px; overflow-y: auto; }
.chat-channels-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); padding: 6px 8px; }
.chat-channel { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.chat-channel:hover { background: var(--grey-50); }
.chat-channel.active { background: var(--blue-light); }
.chat-channel-hash { color: var(--grey-400); font-weight: 700; }
.chat-channel.active .chat-channel-hash { color: var(--blue); }
.chat-channel-name { font-size: 13px; font-weight: 600; color: var(--navy); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel-del { border: none; background: none; color: var(--grey-300); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.chat-channel-del:hover { color: var(--red); }

.chat-main { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; }
.chat-thread-head { padding: 12px 16px; border-bottom: 1px solid var(--grey-200); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chat-thread-title { font-size: 14px; font-weight: 700; color: var(--navy); }
.chat-thread-desc { font-size: 12px; color: var(--grey-400); }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-empty { text-align: center; color: var(--grey-400); font-size: 13px; margin: auto; }
.chat-msg { max-width: 78%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; }
.chat-msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; padding: 0 2px; }
.chat-msg.mine .chat-msg-meta { flex-direction: row-reverse; }
.chat-msg-author { font-size: 12px; font-weight: 700; color: var(--navy); }
.chat-msg-time { font-size: 10.5px; color: var(--grey-400); }
.chat-msg-bubble { font-size: 13px; line-height: 1.5; color: var(--grey-800); background: var(--grey-100); border-radius: 12px; padding: 8px 12px; word-wrap: break-word; }
.chat-msg.mine .chat-msg-bubble { background: var(--blue); color: var(--white); }
.chat-composer-wrap { position: relative; border-top: 1px solid var(--grey-200); }
.chat-composer { display: flex; gap: 8px; padding: 12px 16px; align-items: flex-end; }
.chat-input { flex: 1; resize: none; max-height: 120px; font-family: inherit; font-size: 13px; padding: 9px 12px; border: 1px solid var(--grey-300); border-radius: var(--radius-sm); line-height: 1.4; }
.chat-input:focus { outline: none; border-color: var(--blue); }
.chat-send { flex-shrink: 0; }

/* @mention + #file in messages */
.chat-mention { color: var(--blue); font-weight: 700; background: var(--blue-light); border-radius: 4px; padding: 0 3px; }
.chat-msg.mine .chat-mention { color: var(--white); background: rgba(255,255,255,0.22); }
.chat-msg-file { margin-top: 4px; }
.chat-file-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-light); border: 1px solid var(--blue); border-radius: 8px; padding: 5px 10px; text-decoration: none; }
.chat-file-chip:hover { background: var(--blue); color: var(--white); }
.chat-msg.mine .chat-msg-file { text-align: right; }

/* Staged file attachment above the composer */
.chat-attach { padding: 0 16px; }
.chat-attach:not(:empty) { padding: 10px 16px 0; }
.chat-attach-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--grey-800); background: var(--grey-100); border-radius: 8px; padding: 5px 10px; }
.chat-attach-remove { border: none; background: none; color: var(--grey-400); font-size: 15px; line-height: 1; cursor: pointer; }
.chat-attach-remove:hover { color: var(--red); }

/* Autocomplete popup */
.chat-ac { position: absolute; bottom: 100%; left: 16px; right: 16px; margin-bottom: 6px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden; z-index: 30; max-height: 240px; overflow-y: auto; }
.chat-ac-head { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); padding: 8px 12px 4px; }
.chat-ac-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.chat-ac-item.active, .chat-ac-item:hover { background: var(--blue-light); }
.chat-ac-icon { width: 20px; text-align: center; color: var(--blue); font-weight: 700; }
.chat-ac-label { font-size: 13px; font-weight: 600; color: var(--navy); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ac-sub { font-size: 11px; color: var(--grey-400); }
.chat-ac-empty { padding: 10px 12px; font-size: 12px; color: var(--grey-400); }

/* Members modal */
.member-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.member-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--grey-200); border-radius: var(--radius-sm); }
.member-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.member-you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); background: var(--blue-light); padding: 2px 8px; border-radius: 20px; }
.member-remove { border: none; background: none; color: var(--grey-300); font-size: 16px; line-height: 1; cursor: pointer; }
.member-remove:hover { color: var(--red); }

/* Sidebar @mention badge */
.nav-item-mentions { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: var(--white); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 700px) {
  .chat-layout { grid-template-columns: 1fr; height: auto; }
  .chat-channels { display: flex; gap: 6px; overflow-x: auto; }
  .chat-online { display: none; }
  .chat-main { height: 60vh; }
  .chat-msg { max-width: 88%; }
}

/* ---- Project Kanban board ---- */
.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
/* Equal-width columns: each flexes to fill the board so all five match. */
.kanban-col { flex: 1 1 0; min-width: 240px; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 250px); }

/* Fixed board header — stays put while the board scrolls. */
.pb-header-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--grey-100);
  /* Bleed left/right only — a negative TOP margin pulls the board up under the
     header and hides the kanban column heads, so keep top at 0. */
  margin: 0 calc(-1 * var(--content-padding)) 0;
  padding: var(--content-padding) var(--content-padding) 12px;
}

/* Priority summary (top-right of the board header) */
/* Profile thumbnails (project team + task assignees) */
.pb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; border: 2px solid var(--white); text-transform: uppercase; }
.pb-avatar-client { font-style: normal; }
.pb-avatar-stack { display: inline-flex; align-items: center; }
.pb-avatar-stack .pb-avatar:not(:first-child) { margin-left: -8px; }
.pb-team { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; }
.pb-team-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-400); }
.kanban-card-foot .pb-avatar { width: 22px; height: 22px; font-size: 9px; }
.kanban-card-foot .kanban-assignee { display: inline-flex; align-items: center; gap: 6px; }
.tk-members { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tk-member { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-700); cursor: pointer; }
.tk-member input { width: 15px; height: 15px; }

.prio-summary { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.prio-summary-item { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 4px 11px 4px 5px; display: inline-flex; align-items: center; gap: 5px; }
.prio-summary-count { font-size: 11px; font-weight: 800; background: rgba(255,255,255,0.65); border-radius: 10px; padding: 0 6px; min-width: 18px; text-align: center; }
.prio-summary-item.prio-low    { background: var(--grey-100); color: var(--grey-600); }
.prio-summary-item.prio-medium { background: #FEF3C7; color: #B45309; }
.prio-summary-item.prio-high   { background: #FFEDD5; color: #C2410C; }
.prio-summary-item.prio-urgent { background: #FEE2E2; color: #DC2626; }
.kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
.kanban-col-title { font-size: 13px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.kanban-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kanban-dot.grey { background: var(--grey-400); } .kanban-dot.blue { background: var(--blue); }
.kanban-dot.purple { background: var(--purple); } .kanban-dot.amber { background: var(--amber); }
.kanban-dot.green { background: var(--green); }
.kanban-col-count { font-size: 11px; font-weight: 700; color: var(--grey-400); background: var(--grey-200); border-radius: 20px; padding: 1px 8px; }
.kanban-add { margin-left: auto; border: none; background: none; color: var(--grey-400); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 4px; width: 24px; height: 24px; }
.kanban-add:hover { background: var(--grey-200); color: var(--blue); }
.kanban-col-body { padding: 0 8px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 36px; }
.kanban-col-body.drag-over { background: var(--blue-light); border-radius: var(--radius-sm); outline: 2px dashed var(--blue); outline-offset: -4px; }

.kanban-card { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.kanban-card:hover { border-color: var(--grey-300); box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.kanban-card.dragging { opacity: 0.5; }
.kanban-card-top { display: flex; align-items: flex-start; gap: 8px; }
.kanban-card-title { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.35; flex: 1; }
.kanban-card-menu { border: none; background: none; color: var(--grey-400); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 4px; }
.kanban-card-menu:hover { background: var(--grey-100); color: var(--navy); }
.kanban-card-desc { font-size: 12px; color: var(--grey-500); line-height: 1.4; margin-top: 5px; }
.kanban-subs { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.kanban-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey-700); cursor: pointer; }
.kanban-sub input { accent-color: var(--green); cursor: pointer; }
.kanban-sub-done { text-decoration: line-through; color: var(--grey-400); }
.kanban-sub-more { font-size: 11px; color: var(--blue); font-weight: 600; margin-top: 1px; }
.kanban-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.kanban-assignee { font-size: 11px; color: var(--grey-600); font-weight: 600; }
.kanban-due { font-size: 11px; color: var(--grey-500); }
.kanban-progress { font-size: 11px; color: var(--grey-500); font-weight: 600; }
.prio { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 20px; padding: 2px 8px; margin-left: auto; }
.prio.prio-low    { background: var(--grey-100); color: var(--grey-600); }
.prio.prio-medium { background: #FEF3C7; color: #B45309; }
.prio.prio-high   { background: #FFEDD5; color: #C2410C; }
.prio.prio-urgent { background: #FEE2E2; color: #DC2626; }

.kanban-menu-pop { position: fixed; z-index: 100; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.14); min-width: 150px; overflow: hidden; padding: 4px; }
.kanban-menu-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; font-size: 13px; color: var(--grey-800); cursor: pointer; border-radius: var(--radius-sm); font-family: inherit; }
.kanban-menu-item:hover { background: var(--grey-50); }
.kanban-menu-item.danger { color: var(--red); }
.kanban-menu-item.danger:hover { background: var(--red-light, #FEE2E2); }

/* ---- Content Calendar (monthly grid) ---- */
.cal-nav { display: flex; align-items: center; gap: 6px; }
/* Prominent Auto-Plan call-to-action */
.cv-autoplan-btn {
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  margin-right: 6px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30);
}
.cv-autoplan-btn:hover { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.40); }
.cal-month-label { font-size: 14px; font-weight: 700; color: var(--navy); min-width: 140px; text-align: center; }
.cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-wd { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-400); text-align: center; padding: 2px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(104px, 1fr); gap: 6px; }
.cal-cell { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 5px 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-height: 104px; transition: border-color var(--transition-fast); }
.cal-cell:hover { border-color: var(--blue); }
.cal-cell.out { background: var(--grey-50); }
.cal-cell.out .cal-daynum { color: var(--grey-300); }
.cal-cell.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--grey-600); }
.cal-cell.today .cal-daynum { color: var(--blue); }
.cal-add { border: none; background: none; color: var(--grey-300); font-size: 15px; line-height: 1; cursor: pointer; width: 20px; height: 20px; border-radius: 4px; opacity: 0; }
.cal-cell:hover .cal-add { opacity: 1; }
.cal-add:hover { background: var(--blue-light); color: var(--blue); }
.cal-cell-body { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-chip { display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; border: 1px solid var(--grey-200); background: var(--white); border-left: 3px solid var(--chip, var(--grey-400)); border-radius: 4px; padding: 3px 6px; cursor: pointer; font-family: inherit; }
.cal-chip:hover { background: var(--grey-50); }
.cal-chip.posted { opacity: 0.7; }
.cal-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chip, var(--grey-400)); flex-shrink: 0; }
.cal-chip-text { font-size: 11px; font-weight: 600; color: var(--navy); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-time { color: var(--grey-500); font-weight: 700; }
.cal-chip-flag { font-size: 10px; }
@media (max-width: 700px) {
  .cal-grid { grid-auto-rows: minmax(64px, 1fr); gap: 3px; }
  .cal-cell { min-height: 64px; }
  .cal-chip-text { display: none; }
  .cal-wd { font-size: 9px; }
}

/* ---- Content Auto-Plan ---- */
.ap-count { font-size: 11px; font-weight: 600; color: var(--blue); background: var(--blue-light); border-radius: 20px; padding: 1px 8px; margin-left: 6px; }
.ap-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; }
@media (max-width: 600px) { .ap-platforms { grid-template-columns: 1fr 1fr; } }
.ap-seg { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ap-seg .ap-rate, .ap-seg .ap-num { width: 64px; flex: 0 0 auto; }
.ap-seg .ap-unit { width: 92px; flex: 0 0 auto; }
.ap-seg-txt { font-size: 13px; color: var(--grey-600); }
.ap-seg-remove { border: none; background: none; color: var(--grey-300); font-size: 18px; line-height: 1; cursor: pointer; }
.ap-seg-remove:hover { color: var(--red); }
.ap-preview { margin-top: 6px; font-size: 13px; color: var(--grey-500); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 12px 14px; line-height: 1.5; }
.ap-preview.active { background: var(--blue-light); border-color: var(--blue); color: var(--grey-800); }
.ap-preview-row { margin-bottom: 2px; }
.ap-preview-row strong { color: var(--navy); }
.ap-warn { margin-top: 6px; color: var(--red); font-weight: 600; }
.ap-note { margin-top: 6px; color: var(--grey-500); }

/* ---- Report view (charts + KPIs) ---- */
.rv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 760px) { .rv-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .rv-kpis { grid-template-columns: 1fr; } }
.rv-kpi { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 14px 16px; }
.rv-kpi-label { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey-400); margin-bottom: 6px; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.rv-kpi-val { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.rv-kpi-val.kpi-green { color: var(--green); } .rv-kpi-val.kpi-red { color: var(--red); } .rv-kpi-val.kpi-blue { color: var(--blue); }
.rv-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-500); margin: 4px 0 10px; }

/* Cost-efficiency info tooltip */
.rv-info { position: relative; display: inline-flex; color: var(--grey-300); cursor: help; font-size: 11px; }
.rv-info .rv-tip { position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%); width: 190px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; padding: 8px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 30; box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.15)); }
.rv-info:hover .rv-tip, .rv-info:focus .rv-tip { opacity: 1; }
.rv-cost-kpi:nth-child(4n+1) .rv-tip { left: 0; transform: none; }

.rv-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) { .rv-charts { grid-template-columns: 1fr; } }
.rv-chart { padding: 18px 20px; }
.rv-chart-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.no-data { font-size: 13px; color: var(--grey-400); padding: 20px 0; text-align: center; }

.rv-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rv-donut { flex-shrink: 0; }
.rv-donut-center { font-size: 15px; font-weight: 800; fill: var(--navy); }
.rv-donut-sub { font-size: 10px; font-weight: 600; fill: var(--grey-400); text-transform: uppercase; letter-spacing: 0.05em; }
.rv-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; }
.rv-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rv-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rv-legend-label { color: var(--grey-700); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-legend-val { font-weight: 700; color: var(--navy); }

.rv-bars { display: flex; flex-direction: column; gap: 10px; }
.rv-bar-row { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 10px; }
.rv-bar-label { font-size: 12px; color: var(--grey-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar-track { background: var(--grey-100); border-radius: 6px; height: 18px; overflow: hidden; }
.rv-bar-fill { height: 100%; border-radius: 6px; min-width: 3px; transition: width var(--transition-fast); }
.rv-bar-val { font-size: 12px; font-weight: 700; color: var(--navy); text-align: right; }

/* Totals row — prominent + aligned with the table cells */
.rv-table tfoot .rv-total-row td { font-weight: 800; font-size: 14px; color: var(--navy); border-top: 2px solid var(--blue); background: var(--blue-light, #EFF4FF); padding: 12px; }
.rv-table tfoot .rv-total-row td:first-child { padding-left: 16px; }
.rv-table tfoot .rv-total-row td:last-child { padding-right: 16px; }

/* Impressions vs Reach grouped bars */
.rv-ir-legend { display: flex; gap: 16px; margin-bottom: 12px; font-size: 12px; color: var(--grey-600); }
.rv-ir-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rv-ir-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rv-ir-group { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; }
.rv-ir-bars { display: flex; flex-direction: column; gap: 4px; }
.rv-ir-row { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 8px; }
.rv-ir-row .rv-bar-track { height: 13px; }

/* Clickable content link in the breakdown table */
.rv-content-link { color: var(--blue); text-decoration: none; font-weight: 600; }
.rv-content-link:hover { text-decoration: underline; }

/* Combined finance bar (Budget & Spend) */
.rv-finance { padding: 16px 20px; margin-bottom: 16px; }
.rv-finance-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rv-finance-summary { font-size: 13px; color: var(--grey-600); }
.rv-finance-summary strong { color: var(--navy); font-weight: 700; }
.rv-finance-bar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; background: var(--grey-100); }
.rv-finance-seg { height: 100%; min-width: 2px; transition: width var(--transition-fast); }
.rv-finance-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.rv-finance-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey-700); }
.rv-finance-leg i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.rv-finance-leg strong { color: var(--navy); font-weight: 700; }

/* ============================================================
   REPORT — premium dashboard styling (scoped to .report-canvas)
   ============================================================ */
.report-canvas > * { margin-bottom: 22px; }
.report-canvas > *:last-child { margin-bottom: 0; }
.report-canvas > .rv-section-label { margin: 2px 0 12px; font-size: 12px; color: var(--grey-500); }

/* Elevated cards: soft shadow, big radius, no hard border */
.report-canvas .card,
.report-canvas .rv-finance,
.report-canvas .rv-baseline-card,
.report-canvas .table-wrapper {
  border: none;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .04);
}
.report-canvas .rv-chart,
.report-canvas .rv-finance,
.report-canvas .rv-baseline-card { padding: 22px 24px; }
.report-canvas .rv-charts { gap: 22px; }
.report-canvas .table-wrapper { padding: 8px; overflow: hidden; }
.report-canvas .table-toolbar { padding: 14px 16px; border-bottom: 1px solid var(--grey-100); }
.report-canvas .rv-table tbody td { padding-top: 13px; padding-bottom: 13px; }

/* Stat cards (highlight metrics) */
.rv-stats { gap: 16px; }
.rv-stat { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .04); }
.rv-stat-ico { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rv-stat-ico svg { width: 22px; height: 22px; }
.rv-stat-text { display: flex; flex-direction: column; min-width: 0; }
.rv-stat-val { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.1; }
.rv-stat-label { font-size: 12px; color: var(--grey-500); font-weight: 600; margin-top: 3px; }

/* Cost-efficiency cards get the elevated look; baseline tiles stay flat (nested) */
.report-canvas .rv-kpi { border: none; border-radius: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .04); padding: 16px 18px; }
.report-canvas .rv-baseline-summary .rv-kpi { box-shadow: none; background: var(--grey-50); border-radius: 12px; padding: 14px 16px; }

/* Finance hero */
.report-canvas .rv-finance-bar { height: 34px; border-radius: 10px; }
.rv-finance-figures { display: flex; gap: 36px; flex-wrap: wrap; margin-bottom: 18px; }
.rv-fin-num { font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.05; }
.rv-fin-num.kpi-red { color: var(--red); }
.rv-fin-num.rv-fin-muted { color: var(--grey-400); }
.rv-fin-cap { font-size: 12px; color: var(--grey-500); font-weight: 600; margin-top: 4px; }
.report-canvas .rv-finance-legend { margin-top: 14px; }
.report-canvas .rv-finance-leg { background: var(--grey-50); border-radius: 20px; padding: 5px 12px; }

/* Composed grid — intentional, varied widths */
.rv-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; margin-bottom: 22px; align-items: stretch; }
@media (max-width: 920px) { .rv-grid-3 { grid-template-columns: 1fr; } }
.rv-grid-2 { display: grid; grid-template-columns: 1fr 1.7fr; gap: 22px; align-items: stretch; }
@media (max-width: 920px) { .rv-grid-2 { grid-template-columns: 1fr; } }

/* Grouped metric card (Reach & Delivery / Engagement / Conversion) */
.rv-group { padding: 22px 24px; }
.rv-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.rv-group-title { font-size: 14px; font-weight: 700; color: var(--navy); }
.rv-group-figs { display: flex; gap: 30px; flex-wrap: wrap; }
.rv-group-num { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.05; }
.rv-group-lbl { font-size: 12px; color: var(--grey-500); font-weight: 600; margin-top: 4px; }

/* Cost-efficiency stacked card (sits next to Before the Ads) */
.rv-coststack { padding: 22px 24px; display: flex; flex-direction: column; }
.rv-coststack-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.rv-cost-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--grey-100); }
.rv-cost-row:first-child { padding-top: 4px; }
.rv-cost-row:last-child { border-bottom: none; padding-bottom: 0; }
.rv-cost-rl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-600); font-weight: 500; }
.rv-cost-rv { font-size: 16px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Breakdown scroll — keep the scrollbar off the totals row */
.rv-table-scroll { overflow-x: auto; padding-bottom: 10px; }

/* Charts — more internal breathing room */
.report-canvas .rv-chart { padding: 24px 26px; }
.report-canvas .rv-chart-title { margin-bottom: 18px; }
.report-canvas .rv-baseline-summary { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Status as a coloured dot (#6) */
.rv-status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

/* Top Content card with metric dropdown (#8) */
.rv-topcontent-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.rv-top-select { width: auto; min-width: 150px; padding: 7px 12px; font-size: 13px; }

/* Bigger fonts + spacing across the report (#2, #5) */
.report-canvas .rv-group-num { font-size: 30px; }
.report-canvas .rv-group-figs { gap: 38px; }
.report-canvas .rv-group-lbl { font-size: 13px; }
.report-canvas .rv-group-head { margin-bottom: 22px; }
.report-canvas .rv-fin-num { font-size: 32px; }
.report-canvas .rv-fin-cap { font-size: 13px; }
.report-canvas .rv-finance-figures { gap: 44px; }
.report-canvas .rv-chart-title { font-size: 15px; }
.report-canvas .rv-bars { gap: 16px; }
.report-canvas .rv-bar-label { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.report-canvas .rv-bar-label .rv-plat-ico { width: 16px; height: 16px; }
.report-canvas .rv-bar-val { font-size: 13px; }
.report-canvas .rv-bar-track { height: 20px; }
.report-canvas .rv-plat-cell .rv-plat-ico { width: 18px; height: 18px; }
.report-canvas .rv-cost-rl { font-size: 14px; }
.report-canvas .rv-cost-rv { font-size: 17px; }
.report-canvas .rv-legend-row { font-size: 13.5px; }
.report-canvas .rv-table thead th { font-size: 11px; }
.report-canvas .rv-table tbody td { font-size: 14px; padding-top: 14px; padding-bottom: 14px; }
.report-canvas .rv-table tfoot .rv-total-row td { font-size: 15px; }

/* Centre every breakdown-table cell (#1) */
.report-canvas .rv-table th,
.report-canvas .rv-table td { text-align: center; }
.report-canvas .rv-table .td-actions { justify-content: center; }
.report-canvas .rv-plat-cell { justify-content: center; }

/* Consistent card header — icon chip + Inter-bold 15px title (#7, #10) */
/* Card head: blue icon floats top-left, overlapping the card edge — same size
   and placement as the dashboard home stat cards (.dash-stat-icon). */
.rv-vcard, .rv-coststack, .rv-chart { position: relative; overflow: visible; }
.rv-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; min-height: 46px; padding-left: 74px; }
.rv-card-title { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin-right: auto; }
.rv-card-head .rv-stat-ico { position: absolute; top: -18px; left: 16px; width: 60px; height: 60px; border-radius: 14px; }
.rv-card-head .rv-stat-ico svg { width: 28px; height: 28px; }
/* Breakdown-table toolbar keeps an inline icon (its wrapper clips overflow). */
.table-toolbar .rv-card-head { padding-left: 0; min-height: 0; margin-bottom: 0; }
.table-toolbar .rv-card-head .rv-stat-ico { position: static; top: auto; left: auto; width: 40px; height: 40px; border-radius: 11px; }
.table-toolbar .rv-card-head .rv-stat-ico svg { width: 20px; height: 20px; }

/* Row of 4 equal vertical cards (#8) */
.rv-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; margin-top: 35px; }
@media (max-width: 1100px) { .rv-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rv-grid-4 { grid-template-columns: 1fr; } }
.rv-vcard { padding: 22px 24px; display: flex; flex-direction: column; }
.rv-vcard-figs { display: flex; flex-direction: column; gap: 18px; }
.rv-vfig-num { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.1; }
.rv-vfig-num.kpi-red { color: var(--red); }
.rv-vfig-num.rv-fin-muted { color: var(--grey-400); }
.rv-vfig-lbl { font-size: 13px; color: var(--grey-500); font-weight: 600; margin-top: 4px; }
/* Budget & Spend — thicker 3-colour segmented bar at the card foot */
.report-canvas .rv-finance-bar.rv-finance-bar-card { height: 22px; border-radius: 8px; margin-top: 20px; }
.rv-vcard { min-height: 230px; }

/* Audience "View" hint (#5) */
.rv-hint { color: var(--blue); font-weight: 600; cursor: help; }

/* View-only shared report (no sidebar / no header) */
.viewonly-mode .sidebar,
.viewonly-mode .sidebar-backdrop,
.viewonly-mode .header { display: none !important; }
.rv-shared-tag { color: var(--blue); font-weight: 600; }
.rv-share-note { font-size: 12px; color: var(--grey-500); margin-top: 10px; line-height: 1.5; }

/* Report objective toggle (#11) */
.rv-objective { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv-objective-label { font-size: 13px; font-weight: 700; color: var(--navy); }
.rv-objective-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rv-obj-pill { border: 1px solid var(--grey-200); background: #fff; color: var(--grey-600); font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; cursor: pointer; }
.rv-obj-pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.rv-obj-pill:disabled { cursor: default; opacity: .6; }
.rv-objective-note { font-size: 11px; color: var(--grey-400); }

/* Campaign phases */
.rv-phases { padding: 22px 24px; }
.rv-phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .rv-phase-grid { grid-template-columns: 1fr; } }
.rv-phase-col { border: 1px solid var(--grey-100); border-radius: 12px; padding: 16px; }
.rv-phase-name { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.rv-phase-spend { font-size: 18px; font-weight: 800; color: var(--navy); }
.rv-phase-of { font-size: 12px; font-weight: 500; color: var(--grey-500); }
.rv-phases .rv-bar { margin: 9px 0 4px; }
.rv-phase-metrics { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--grey-600); }
.rv-phase-metrics strong { color: var(--navy); }

/* Members page */
.mb-name { display: inline-flex; align-items: center; gap: 9px; }
.mb-name-text { display: inline-flex; flex-direction: column; line-height: 1.3; }
.mb-email { font-size: 11px; font-weight: 500; color: var(--grey-500); }
.mb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mb-status { display: inline-flex; align-items: center; gap: 6px; }
.mb-access { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin-top: 6px; }
@media (max-width: 560px) { .mb-access { grid-template-columns: 1fr; } }

/* +X% trend chip (metric cards + before/after) */
.rv-trend { font-size: 11px; font-weight: 700; white-space: nowrap; }
.rv-trend.up { color: var(--blue); }
.rv-trend.down { color: var(--red); }

/* ── Report premium pass: blue buttons, vertical budget bar, hover bars ── */
/* All report action buttons share the nav-blue */
.report-actions .btn {
  background: var(--blue);
  color: #F0F0F0;
  border: 1px solid var(--blue);
}
.report-actions .btn:hover:not(:disabled) { background: var(--blue-hover); border-color: var(--blue-hover); }

/* Roomier spacing (≈ +15px per line) */
.report-canvas > * { margin-bottom: 32px; }
.report-canvas .rv-bars { gap: 22px; }
.report-canvas .rv-vcard-figs { gap: 16px; }
.report-canvas .rv-cost-row { padding-top: 11px; padding-bottom: 11px; }
.report-canvas .rv-table tbody td { padding-top: 18px; padding-bottom: 18px; }
.rv-grid-4, .rv-grid-3 { gap: 22px; }

/* Bar hover tooltips (Top Content + Platform Compare) */
.rv-bar-row { position: relative; }
.rv-bar-tip {
  position: absolute; bottom: calc(100% + 6px); left: 124px; z-index: 8;
  min-width: 150px; background: var(--navy); color: #fff; font-size: 11px; line-height: 1.5;
  padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow-soft); pointer-events: none;
  opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease;
}
.rv-bar-row:hover .rv-bar-tip { opacity: 1; transform: translateY(0); }
.rv-bar-tip strong { font-weight: 700; }

/* Vertical column graph (Top Content + Platform Compare) — fills the card */
.rv-platcompare, .rv-topcontent { display: flex; flex-direction: column; }
.rv-platcompare #rv-plat-bars, .rv-topcontent #rv-top-bars { flex: 1; display: flex; }
/* Line graph (Top Content + Platform Compare) — matches the Rev/Forecast chart */
.rv-line-inner { position: relative; flex: 1; width: 100%; display: flex; align-items: stretch; }
.rv-line-svg { width: 100%; height: auto; display: block; align-self: center; }
.rv-line-svg .rvl-hit { cursor: pointer; }
.rv-line-svg a { cursor: pointer; }
.rv-line-tip { left: 0; }

/* Vertical Budget & Spend bar */
.rv-finance-v .rv-vfin { display: flex; gap: 18px; align-items: stretch; margin-top: 4px; }
.rv-vfin-bar {
  position: relative; width: 56px; min-height: 150px; flex-shrink: 0;
  background: var(--grey-100); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.rv-vfin-seg { width: 100%; transition: height var(--transition); }
.rv-vfin-spent { background: var(--blue); }
.rv-vfin-over { background: var(--red); }
.rv-vfin-rem { background: #C9DCFB; }
.rv-vfin-line { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--navy); }
.rv-vfin-line span { position: absolute; right: 2px; top: -16px; font-size: 9px; font-weight: 700; color: var(--navy); }
.rv-vfin-figs { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: 1; }
.rv-vfin-fig { display: flex; flex-direction: column; }
.rv-vfin-num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.rv-vfin-lbl { font-size: 12px; color: var(--grey-500); font-weight: 600; margin-top: 3px; }

/* Before → After line graph — graph fills the card so it matches its neighbour's height */
.report-canvas .rv-baseline-card { display: flex; flex-direction: column; margin-bottom: 0; }
.rv-baseline-card #rv-ba-inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rv-ba-headline { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px; }
.rv-ba-svg { width: 100%; flex: 1; min-height: 180px; height: auto; display: block; font-family: 'Inter', sans-serif; }
.rv-ba-pt { font-size: 13px; font-weight: 800; fill: var(--navy); }
.rv-ba-axis { font-size: 11px; font-weight: 600; fill: var(--grey-400); }

/* Arrow dropdown (Top Content / Platform Compare) (#2, #3) */
.rv-dd { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.rv-dd-current { font-size: 13px; font-weight: 600; color: var(--grey-600); }
.rv-dd-arrow { border: none; background: var(--grey-100); border-radius: 7px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--grey-600); }
.rv-dd-arrow svg { width: 15px; height: 15px; }
.rv-dd-arrow:hover { background: var(--grey-200); color: var(--navy); }
.rv-dd-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--grey-200); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); padding: 6px; min-width: 168px; z-index: 40; display: none; flex-direction: column; }
.rv-dd-menu.open { display: flex; }
.rv-dd-opt { border: none; background: none; text-align: left; font-family: inherit; font-size: 13px; color: var(--grey-700); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.rv-dd-opt:hover { background: var(--grey-50); color: var(--navy); }

/* Platform cell — flat black company logo + name */
.rv-plat-cell { display: inline-flex; align-items: center; gap: 7px; }
.rv-plat-ico { width: 15px; height: 15px; flex-shrink: 0; color: #0f172a; }

/* Column editor */
.rv-colgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
@media (max-width: 560px) { .rv-colgrid { grid-template-columns: repeat(2, 1fr); } }
.rv-coltoggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--grey-700); cursor: pointer; }
.rv-col-del { border: none; background: none; color: var(--grey-400); cursor: pointer; font-size: 15px; line-height: 1; margin-left: auto; padding: 0 4px; }
.rv-col-del:hover { color: var(--red); }
.rv-addcol { display: flex; gap: 8px; margin-top: 14px; }
.rv-addcol .form-input { flex: 1; }

/* Before the Ads — baseline / lift */
.rv-baseline-card { padding: 18px 20px; margin-bottom: 16px; }
.rv-baseline-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.rv-baseline-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .rv-baseline-summary { grid-template-columns: repeat(2, 1fr); } }
.rv-baseline-note { font-size: 11px; color: var(--grey-400); margin-top: 10px; line-height: 1.5; }
.rv-lift { font-weight: 800; color: var(--green); }
.bl-plat { border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
.bl-plat-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 13px; }

/* ---- Settings ---- */
.settings-section {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.settings-section-desc {
  font-size: 12px;
  color: var(--grey-400);
  margin-bottom: 16px;
  line-height: 1.5;
}

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

/* Security & Compliance list */
.set-comp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.set-comp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--grey-200);
  border-radius: var(--radius); background: var(--grey-50);
}
.set-comp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-comp-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.set-comp-sub { font-size: 12px; color: var(--grey-500); }
.set-comp-status { white-space: nowrap; flex-shrink: 0; }

.settings-danger {
  border-color: var(--red-mid);
}

.settings-danger .settings-section-title {
  color: var(--red);
}

/* ---- CSV Import ---- */
#import-stage .card { margin-bottom: 16px; }

.import-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 36px 24px;
  border: 2px dashed var(--grey-300);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.import-drop.dragging { border-color: var(--blue); background: var(--blue-light); }
.import-drop-title { font-size: 15px; font-weight: 700; color: var(--navy); }
.import-drop-desc { font-size: 12.5px; color: var(--grey-500); max-width: 420px; line-height: 1.5; margin-bottom: 4px; }

.import-help .import-steps { margin: 0; padding-left: 18px; font-size: 13px; color: var(--grey-600); line-height: 1.7; }

.import-filebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.import-filename { font-size: 14px; font-weight: 600; color: var(--navy); }

.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.map-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; }
.map-field { font-size: 12px; font-weight: 600; color: var(--grey-600); }
.map-req { font-size: 10px; color: var(--blue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.import-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.import-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.import-stat {
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
}
.import-stat-num { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; }
.import-stat-num.kpi-green { color: var(--green); }
.import-stat-num.kpi-amber { color: var(--amber); }
.import-stat-num.kpi-red { color: var(--red); }
.import-stat-label { font-size: 11px; color: var(--grey-500); font-weight: 500; line-height: 1.3; }

.import-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--grey-500);
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  line-height: 1.5;
}

.import-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.import-chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--grey-700);
  background: var(--grey-100);
  border-radius: 20px;
  padding: 3px 10px;
}

@media (max-width: 700px) {
  .map-grid { grid-template-columns: 1fr; }
}

/* ── Profile Page ──────────────────────────────────── */
.profile-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
.profile-avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  gap: 4px;
}
.profile-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--blue);
  color: #F0F0F0;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
}
.profile-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.profile-avatar-role {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 2px;
}
.profile-details-card { padding: 24px; }

/* Avatar crop / reframe */
.crop-wrap { display: flex; flex-direction: column; align-items: center; }
.crop-frame {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: var(--grey-100);
  cursor: grab;
  touch-action: none;
  box-shadow: 0 0 0 3px var(--blue-light);
}
.crop-frame:active { cursor: grabbing; }
.crop-frame img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
#crop-zoom { width: 260px; }
@media (max-width: 700px) {
  .profile-layout { grid-template-columns: 1fr; }
}

/* ── Notifications Page ────────────────────────────── */
.notif-card { padding: 14px 10px; }
.notif-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-400);
  padding: 6px 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #F0F0F0;
  background: var(--blue);
  border-radius: 20px;
  padding: 2px 8px;
}
.notif-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.notif-row:hover { background: var(--grey-50); }
.notif-unread { background: var(--blue-light); }
.notif-unread:hover { background: var(--blue-light); }
.notif-unread::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.notif-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-ico svg { width: 18px; height: 18px; }
.notif-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--navy); }
.notif-body { font-size: 12px; color: var(--grey-500); line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--grey-400); white-space: nowrap; flex-shrink: 0; padding-top: 2px; }

/* ── Revenue chart hover tooltip ───────────────────── */
.rv-hit { cursor: pointer; pointer-events: all; }
.rv-chart-tip {
  position: absolute;
  z-index: 5;
  min-width: 168px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 8px 10px;
  pointer-events: none;
}
.rv-tip-title { font-size: 11px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.rv-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--grey-600);
  padding: 1px 0;
}
.rv-tip-row strong { margin-left: auto; color: var(--navy); font-variant-numeric: tabular-nums; }
.rv-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rv-tip-lbl { white-space: nowrap; }

/* ── Settings: platform logo preview ───────────────── */
.settings-logo-preview {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.settings-logo-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-400);
}
.settings-logo-preview img {
  height: 34px;
  max-width: 200px;
  object-fit: contain;
  /* Show it as it appears in the sidebar: white silhouette on blue. */
  background: var(--blue);
  filter: brightness(0) invert(1);
  border-radius: var(--radius);
  padding: 10px 16px;
}

/* ── Ideas Library (Proposals page) ────────────────── */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.idea-card { padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.idea-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.idea-card-client { font-size: 11px; color: var(--grey-500); }
.idea-card-title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.idea-card-summary { font-size: 12.5px; color: var(--grey-500); line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idea-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--grey-100); }
.idea-link-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.idea-view-meta { display: flex; align-items: center; gap: 10px; }
.idea-view-links { display: flex; flex-direction: column; gap: 6px; }
.idea-view-link { font-size: 13px; color: var(--blue); font-weight: 600; padding: 8px 10px; background: var(--blue-light); border-radius: var(--radius-sm); }
.idea-view-link:hover { background: var(--blue-mid); }
.idea-tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 4px 0 8px; max-height: 140px; overflow-y: auto; }
.idea-view-mbs { display: flex; flex-wrap: wrap; gap: 10px; }
.idea-view-mb { border: 1px solid var(--grey-200); background: var(--white); border-radius: var(--radius); padding: 6px; cursor: pointer; width: 110px; text-align: center; }
.idea-view-mb img { width: 100%; height: 70px; object-fit: cover; border-radius: var(--radius-sm); display: block; margin-bottom: 4px; }
.idea-view-mb span { font-size: 11px; color: var(--navy); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Adspend page ──────────────────────────────────── */
.as-chart-wrap { overflow-x: auto; padding: 6px 0 2px; }
.as-chart { width: 100%; min-width: 560px; height: 300px; display: block; }
.as-legend { display: flex; gap: 18px; padding: 10px 4px 2px; font-size: 12px; color: var(--grey-500); }
.as-leg { display: inline-flex; align-items: center; gap: 6px; }
.as-leg-sq { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.as-client-link { border: none; background: transparent; color: var(--navy); font-weight: 600; cursor: pointer; padding: 0; }
.as-client-link:hover { color: var(--blue); text-decoration: underline; }
.as-quote-list { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.as-quote-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--grey-200); border-radius: var(--radius); background: var(--grey-50); }
.as-quote-main { flex: 1; min-width: 0; font-size: 13px; }
.as-quote-bud { font-size: 12px; font-weight: 600; color: var(--grey-600); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Settings: Bug Log ─────────────────────────────── */
.bug-log-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; max-height: 280px; overflow-y: auto; }
.bug-log-row { border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--grey-50); }
.bug-log-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bug-log-msg { font-size: 12.5px; color: var(--navy); font-family: monospace; word-break: break-word; }
.bug-log-src { font-size: 11px; margin-top: 2px; font-family: monospace; }
.bug-log-row.bug-fixed { opacity: 0.6; }
.bug-log-row.bug-fixed .bug-log-msg { text-decoration: line-through; }
.bug-log-actions { display: flex; gap: 6px; margin-top: 6px; }

/* ── Settings: Services management ─────────────────── */
.svc-cfg-row { display: grid; grid-template-columns: 1fr 160px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 600px) { .svc-cfg-row { grid-template-columns: 1fr auto; } }

/* ── Settings: View Mode cards ─────────────────────── */
.vm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 6px; }
.vm-card {
  text-align: left; border: 1px solid var(--grey-200); background: var(--white); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; transition: all var(--transition-fast);
}
.vm-card:hover { border-color: var(--blue-mid); }
.vm-card.active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-light); }
.vm-card-name { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.vm-card-desc { font-size: 11.5px; color: var(--grey-500); line-height: 1.4; }

/* Sidebar "viewing as" banner */
.sidebar-viewmode {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 8px 12px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12); color: var(--white);
  font-size: 10.5px; line-height: 1.3;
}
.sidebar-viewmode strong { font-size: 12px; }
.sidebar-viewmode-exit {
  border: 1px solid rgba(255,255,255,0.4); background: transparent; color: var(--white);
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; cursor: pointer; white-space: nowrap;
}
.sidebar-viewmode-exit:hover { background: rgba(255,255,255,0.18); }

/* ── Contracts reminder chip ───────────────────────── */
.ct-remind {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 20px; margin-left: 6px; white-space: nowrap;
  animation: dash-pulse 2.4s ease-in-out infinite;
}
.ct-remind-amber { background: var(--amber-light); color: var(--amber); }
.ct-remind-red { background: var(--red-light); color: var(--red); }
@media (prefers-reduced-motion: reduce) { .ct-remind { animation: none; } }

/* ── Client profile: About tab ─────────────────────── */
.ab-contacts-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.ab-contact-row { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 700px) { .ab-contact-row { grid-template-columns: 1fr 1fr; } }

/* ── Team Calendar ─────────────────────────────────── */
.tc-nav { display: flex; align-items: center; gap: 8px; }
.tc-month { font-size: 14px; font-weight: 700; color: var(--navy); min-width: 130px; text-align: center; }
.tc-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .tc-layout { grid-template-columns: 1fr; } }

.tc-card { padding: 14px; }
.tc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tc-dow { margin-bottom: 6px; }
.tc-dow-cell {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--grey-400); text-align: center; padding: 2px 0;
}
.tc-cell {
  min-height: 125px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 5px;
  background: var(--white);
  overflow-y: auto;
}
.tc-views { margin-right: 4px; }
.tc-cell.tc-empty { background: transparent; border: none; }
.tc-cell.tc-today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.tc-daynum { font-size: 11px; font-weight: 700; color: var(--grey-500); margin-bottom: 4px; }
.tc-cell.tc-today .tc-daynum { color: var(--blue); }
.tc-chip {
  border-radius: 4px;
  padding: 3px 5px;
  margin-bottom: 4px;
  cursor: pointer;
  line-height: 1.2;
  overflow: hidden;
}
.tc-chip:hover { filter: brightness(0.97); }
.tc-chip[draggable="true"] { cursor: grab; }
.tc-chip[draggable="true"]:active { cursor: grabbing; }
.tc-chip-dragging { opacity: 0.4; }
.tc-cell.tc-cell-drop { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); background: var(--blue-light); }
.tc-chip-title { display: block; font-size: 10.5px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-chip-client { display: block; font-size: 9.5px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tc-side { padding: 16px; }
.tc-list { display: flex; flex-direction: column; gap: 2px; }
.tc-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border: none; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left; width: 100%;
}
.tc-list-row:hover { background: var(--grey-50); }
.tc-list-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tc-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tc-list-title { font-size: 12.5px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-list-sub { font-size: 11px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Assets / Moodboards ───────────────────────────── */
.as-filter { position: relative; }
#as-filter-btn { display: inline-flex; align-items: center; }
.as-filter-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  min-width: 150px; background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px; display: none;
}
.as-filter-menu.open { display: block; }
.as-filter-opt {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-size: 13px; color: var(--navy); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.as-filter-opt:hover { background: var(--grey-50); }
.as-filter-opt.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.as-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--grey-400); margin: 4px 0 10px;
}
.as-section-label ~ .as-section-label { margin-top: 22px; }
.mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.mb-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.mb-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.mb-card-cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 70px;
  gap: 2px;
  background: var(--grey-100);
  height: 140px;
  overflow: hidden;
}
.mb-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.mb-card-cover img:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.mb-card-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: var(--grey-400); font-size: 12px; }
.mb-card-foot { padding: 10px 12px; }
.mb-card-name { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-card-meta { font-size: 11px; color: var(--grey-500); margin-top: 2px; }

/* Pinterest-style masonry board */
.mb-board {
  column-count: 4;
  column-gap: 12px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 12px;
}
@media (max-width: 1100px) { .mb-board { column-count: 3; } }
@media (max-width: 760px) { .mb-board { column-count: 2; } }
.mb-board-img { width: 100%; margin: 0 0 12px; border-radius: 8px; display: block; break-inside: avoid; }

/* Moodboard editor thumbnails */
.mb-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.mb-edit-thumb { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1; background: var(--grey-100); }
.mb-edit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mb-edit-rm {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mb-edit-rm:hover { background: rgba(0,0,0,0.8); }

/* ── Content Calendar: important dates + media (#4) ── */
.cal-cell-key { background: linear-gradient(0deg, var(--white) 0%, var(--blue-light) 100%); }
.cal-keyday {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; border-left: 3px solid var(--blue-dark); background: var(--blue-light);
  border-radius: 4px; padding: 3px 6px; margin-bottom: 4px; line-height: 1.2;
}
.cal-keyday:hover { filter: brightness(0.97); }
.cal-keyday-type { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-dark); }
.cal-keyday-label { display: block; font-size: 10.5px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip-thumb { width: 100%; height: 34px; object-fit: cover; border-radius: 3px; display: block; margin-bottom: 3px; }
.cal-chip-row { display: flex; align-items: center; gap: 5px; width: 100%; }
.ce-preview { margin: 4px 0 8px; }
.ce-preview img, .ce-preview video { max-width: 100%; max-height: 200px; border-radius: 8px; display: block; }

/* ── Content Calendar: views + drag-drop ───────────── */
.cv-views { margin-right: 4px; }
.cal-cell.cal-cell-drop { outline: 2px dashed var(--blue); outline-offset: -2px; background: var(--blue-light); }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip-dragging { opacity: 0.4; }

/* List view */
.cv-list { padding: 8px 4px; }
.cv-list-day { padding: 6px 0; }
.cv-list-date { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-400); padding: 8px 12px 6px; }
.cv-list-date.cv-list-today { color: var(--blue-dark); }
.cv-list-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: transparent; border: none; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
}
.cv-list-row:hover { background: var(--grey-50); }
.cv-list-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cv-list-time { font-size: 12px; font-weight: 700; color: var(--grey-600); width: 48px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cv-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-list-plat { font-size: 13px; font-weight: 600; color: var(--navy); }
.cv-list-cap { font-size: 12px; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Year + quarter views */
.cv-quarter-row { display: flex; gap: 6px; margin-bottom: 14px; }
.cv-q-btn {
  border: 1px solid var(--grey-200); background: var(--white); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--grey-600); padding: 5px 14px; border-radius: 20px;
}
.cv-q-btn:hover { border-color: var(--blue-mid); color: var(--navy); }
.cv-q-btn.active { background: var(--blue); border-color: var(--blue); color: #F0F0F0; }
.cv-year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cv-quarter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .cv-year-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cv-year-grid, .cv-quarter-grid { grid-template-columns: repeat(2, 1fr); } }
.cv-mini { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 10px; }
.cv-mini-head { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 6px; cursor: pointer; }
.cv-mini-head:hover { color: var(--blue); }
.cv-mini-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 3px; }
.cv-mini-wd span { font-size: 8.5px; font-weight: 700; color: var(--grey-300); text-align: center; }
.cv-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cv-mini-day {
  font-size: 9.5px; color: var(--grey-600); text-align: center; line-height: 18px;
  height: 18px; border-radius: 50%; cursor: pointer;
}
.cv-mini-day.cv-mini-empty { cursor: default; }
.cv-mini-day:not(.cv-mini-empty):hover { background: var(--grey-100); }
.cv-mini-has { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); font-weight: 700; }
.cv-mini-today { background: var(--blue); color: #F0F0F0; font-weight: 700; }
.cv-mini-today.cv-mini-has { box-shadow: none; }

/* ── Kanban card image / GIF (#14) ─────────────────── */
.kanban-card-img { margin: 6px 0; border-radius: 6px; overflow: hidden; background: var(--grey-100); }
.kanban-card-img img { width: 100%; max-height: 160px; object-fit: cover; display: block; }
.tk-img-row { display: flex; gap: 8px; align-items: center; }
.tk-img-row .form-input { flex: 1; }
.tk-img-preview { margin-top: 8px; }
.tk-img-preview img { max-width: 100%; max-height: 180px; border-radius: 8px; display: block; margin-bottom: 6px; }
.kanban-assigned-by { display: block; font-size: 10px; color: var(--grey-400); font-weight: 500; margin-top: 1px; }