:root {
  --ink: #f8f3ff;
  --muted: #a99abf;
  --line: rgba(226, 210, 255, 0.16);
  --surface: rgba(31, 20, 48, 0.84);
  --surface-strong: rgba(46, 28, 70, 0.94);
  --soft: rgba(151, 71, 255, 0.12);
  --nav: #120b1f;
  --green: #43d39e;
  --blue: #9b6cff;
  --amber: #ffb454;
  --red: #ff3d6e;
  --violet: #8f5cff;
  --magenta: #ff4fb8;
  --shadow: 0 24px 70px rgba(6, 2, 18, 0.34);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 0%, rgba(143, 92, 255, 0.26), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(255, 61, 110, 0.2), transparent 30%),
    linear-gradient(135deg, #0b0713 0%, #1a0f2b 46%, #250d22 100%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  min-height: 100vh;
}


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

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(143, 92, 255, 0.18), rgba(255, 61, 110, 0.08)),
    var(--nav);
  color: #f8fafb;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-right: 1px solid rgba(226, 210, 255, 0.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo-frame {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 235, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(6, 2, 18, 0.28);
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: contrast(1.08) saturate(0.9);
}

.brand strong {
  display: block;
  max-width: 170px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.15;
}

.brand span,
.side-panel p,
.eyebrow,
label span {
  color: var(--muted);
}

.sidebar .brand span,
.sidebar .side-panel p,
.sidebar .panel-label {
  color: #a8b2ba;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  color: #cfc4e3;
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
}

.nav-lock {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f3ecff;
  font-size: 10px;
  line-height: 1;
}

.nav-item-locked {
  color: rgba(207, 196, 227, 0.82);
}

.nav-item-locked:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.nav-item-locked .nav-lock {
  margin-left: auto;
}

body[data-attribution-access="allowed"] [data-view="attribution"] .nav-lock {
  display: none;
}

.nav-item.active,
.nav-item:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(143, 92, 255, 0.32), rgba(255, 61, 110, 0.22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.nav-group {
  display: grid;
  gap: 6px;
}

.nav-parent {
  margin-bottom: 0;
}

.nav-sublist {
  display: grid;
  gap: 4px;
  margin: -2px 0 8px 18px;
  padding-left: 12px;
  border-left: 1px solid rgba(226, 210, 255, 0.18);
}

.nav-subitem {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(207, 196, 227, 0.72);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.nav-subitem:hover,
.nav-subitem.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.side-panel {
  margin-top: auto;
  border: 1px solid rgba(226, 210, 255, 0.16);
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.panel-label,
.eyebrow,
label span {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.main {
  padding: 28px;
  min-width: 0;
}

.topbar {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(226, 210, 255, 0.1);
}

.topbar,
.section-heading,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 30px rgba(143, 92, 255, 0.2);
}

h2 {
  font-size: 20px;
  color: #fff;
}

.top-actions,
.dialog-actions > div {
  display: flex;
  gap: 10px;
}

.primary-button,
.ghost-button,
.danger-button,
.text-button,
.icon-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-weight: 700;
}

.primary-button {
  background: linear-gradient(135deg, var(--violet), var(--red));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(255, 61, 110, 0.24);
}

.danger-button {
  color: var(--red);
}

.text-button {
  border: 0;
  color: #d9c6ff;
  background: transparent;
}

.icon-button {
  width: 40px;
  padding: 0;
  font-size: 24px;
}

.view {
  display: none;
  margin-top: 28px;
}

.view.active {
  display: block;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
}

.metric-card,
.workspace-panel,
.database-banner,
.creator-card,
.contract-card,
.calendar-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.metric-card {
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.metric-card::before,
.database-banner::before,
.workspace-panel::before {
  content: "";
  display: block;
  height: 2px;
  margin: -18px -18px 16px;
  background: linear-gradient(90deg, var(--violet), var(--red));
  opacity: 0.86;
}

.metric-card strong {
  display: block;
  margin-top: 12px;
  font-size: 32px;
  color: #fff;
}

.metric-card span {
  color: var(--muted);
  font-size: 13px;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 16px;
  margin-top: 16px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(360px, 1.15fr);
  gap: 16px;
  margin-top: 16px;
}

.workspace-panel {
  padding: 20px;
}

.database-banner {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.database-banner strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  color: #fff;
}

.database-banner p:last-child {
  color: var(--muted);
  line-height: 1.5;
}

.compact-pipeline,
.platform-grid,
.stage-track,
.risk-list,
.contract-grid,
.calendar-list,
.similar-results {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.donut-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}

.donut-chart {
  position: relative;
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 38px rgba(143, 92, 255, 0.24);
}

.donut-chart::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: #171022;
  border: 1px solid rgba(226, 210, 255, 0.12);
}

.donut-chart strong,
.donut-chart span {
  position: relative;
  z-index: 1;
}

.donut-chart strong {
  font-size: 34px;
  line-height: 1;
}

.donut-chart span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 42px;
  position: absolute;
}

.chart-legend {
  display: grid;
  gap: 10px;
}

.legend-row,
.bar-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.legend-row i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.legend-row span,
.bar-row span {
  color: #eadff8;
}

.legend-row strong,
.bar-row strong {
  color: #fff;
}

.bar-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.bar-row {
  grid-template-columns: 140px minmax(0, 1fr) 38px;
}

.stage-track {
  grid-template-columns: repeat(7, minmax(88px, 1fr));
}

.stage-pill {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  text-align: left;
  padding: 12px;
}

.stage-pill span,
.stage-pill strong {
  position: relative;
  z-index: 1;
  display: block;
}

.stage-pill span {
  color: var(--muted);
  font-size: 12px;
}

.stage-pill strong {
  margin-top: 8px;
  font-size: 24px;
}

.stage-pill i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--violet), var(--red));
}

.platform-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  margin-bottom: 16px;
}

.platform-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 14px;
  text-align: left;
  box-shadow: none;
  color: var(--ink);
}

.platform-card.active {
  border-color: rgba(255, 79, 184, 0.68);
  background: linear-gradient(135deg, rgba(143, 92, 255, 0.28), rgba(255, 61, 110, 0.16));
  box-shadow: inset 0 0 0 1px rgba(255, 79, 184, 0.18), 0 16px 34px rgba(143, 92, 255, 0.18);
}

.platform-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  color: #fff;
}

.platform-card span:last-child {
  color: var(--muted);
  font-size: 13px;
}

#creators .platform-card {
  color: #172033;
  background: #fff;
}

#creators .platform-card strong {
  color: #172033;
}

#creators .platform-card span:last-child {
  color: #7d8798;
}

#creators .platform-card.active strong {
  color: #172033;
}

#creators .platform-card.active span:last-child {
  color: #7d8798;
}

#creators .platform-card.active .chip {
  color: #9b245f;
  background: rgba(255, 79, 184, 0.14);
}

.stage-row {
  display: grid;
  grid-template-columns: 130px 1fr 54px;
  gap: 12px;
  align-items: center;
}

.bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--red));
}

.risk-item,
.calendar-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.risk-item strong,
.calendar-item strong {
  display: block;
  margin-bottom: 6px;
}

.dashboard-zerendo-report {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.dashboard-zerendo-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #e8ddff;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 12%, rgba(148, 211, 255, 0.24), transparent 38%),
    linear-gradient(135deg, #fff, #fbf8ff 58%, #f6efff);
  box-shadow: 0 18px 44px rgba(92, 62, 135, 0.12);
}

.dashboard-zerendo-card img {
  width: 116px;
  height: 136px;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 16px 22px rgba(48, 38, 82, 0.16));
}

.dashboard-zerendo-card span,
.campaign-report-grid span {
  display: block;
  color: #7c4ee4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-zerendo-card strong {
  display: block;
  margin-top: 6px;
  color: #1f2a3a;
  font-size: 18px;
  line-height: 1.35;
}

.dashboard-zerendo-card p {
  margin: 8px 0 0;
  color: #687386;
  font-size: 13px;
  line-height: 1.55;
}

.campaign-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.campaign-report-grid article {
  padding: 14px;
  border: 1px solid #edf0f6;
  border-radius: 16px;
  background: #fff;
}

.campaign-report-grid strong {
  display: block;
  margin-top: 6px;
  color: #1f2a3a;
  font-size: 24px;
}

.campaign-report-grid p {
  margin: 4px 0 0;
  color: #7a8494;
  font-size: 12px;
}

.dashboard-report-link {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #7438de, #e33f9a);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(116, 56, 222, 0.18);
}

.dashboard-report-link:hover {
  transform: translateY(-1px);
}

.attribution-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 18px;
  align-items: center;
  overflow: visible;
}

.attribution-hero h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
}

.attribution-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}

.locked-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 6px 11px;
  border: 1px solid #eadcff;
  border-radius: 999px;
  background: #fbf7ff;
  color: #7046c6;
  font-size: 12px;
  font-weight: 900;
}

.attribution-hero p {
  max-width: 760px;
  line-height: 1.7;
}

.attribution-zerendo-card {
  position: relative;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 136px;
  padding: 14px 16px 14px 0;
  border: 1px solid #e8ddff;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 12%, rgba(148, 211, 255, 0.24), transparent 42%),
    linear-gradient(135deg, #fff, #fbf8ff 58%, #f6efff);
  box-shadow: 0 18px 44px rgba(92, 62, 135, 0.12);
  overflow: visible;
}

.attribution-zerendo-card img {
  width: 138px;
  height: 166px;
  object-fit: cover;
  object-position: center top;
  margin-left: -14px;
  margin-top: -36px;
  margin-bottom: -14px;
  filter: drop-shadow(0 16px 22px rgba(48, 38, 82, 0.16));
}

.attribution-zerendo-card span {
  color: #7c4ee4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.attribution-zerendo-card strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.35;
}

.attribution-zerendo-card p {
  margin: 7px 0 0;
  color: #687386;
  font-size: 13px;
  line-height: 1.55;
}

.attribution-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.attribution-summary-card {
  padding: 18px;
  border: 1px solid #ecf0f6;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #fbf8ff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.attribution-summary-card span,
.attribution-api-card span {
  display: block;
  color: #98a1b1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.attribution-summary-card strong {
  display: block;
  margin-top: 7px;
  font-size: 34px;
}

.attribution-summary-card p,
.attribution-api-card p,
.tracking-method-list p,
.attribution-flow p {
  margin: 6px 0 0;
  color: #6b7585;
  line-height: 1.55;
}

.attribution-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
}

.attribution-api-grid,
.tracking-method-list,
.attribution-flow,
.attribution-field-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

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

.attribution-api-card,
.tracking-method-list article,
.attribution-flow article {
  padding: 15px;
  border: 1px solid #edf0f6;
  border-radius: 16px;
  background: #fff;
}

.attribution-api-card.is-ready {
  border-color: #c9f3df;
  background: linear-gradient(135deg, #fff, #f2fff8);
}

.attribution-api-card.is-pending {
  border-color: #eadcff;
  background: linear-gradient(135deg, #fff, #fbf7ff);
}

.attribution-api-card strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 22px;
}

.attribution-api-card strong::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #b8bfd0;
}

.attribution-api-card.is-ready strong::before {
  background: #35bd78;
}

.attribution-api-card.is-pending strong::before {
  background: #9f63f5;
}

.tracking-method-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tracking-method-list strong {
  font-size: 16px;
}

.attribution-flow-panel,
.attribution-fields-panel {
  margin-top: 16px;
}

.attribution-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.attribution-flow article span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7438de, #e33f9a);
  font-weight: 900;
}

.attribution-flow strong {
  display: block;
  margin-top: 12px;
}

.attribution-field-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.attribution-field-grid span {
  padding: 12px 14px;
  border: 1px solid #eadcff;
  border-radius: 999px;
  background: #fbf7ff;
  color: #61409f;
  font-weight: 800;
  text-align: center;
}

.affiliate-links-panel {
  margin-top: 16px;
}

.affiliate-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid #edf0f6;
  border-radius: 16px;
  background: #fff;
}

.affiliate-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
  color: #1f2a3a;
  font-size: 14px;
}

.affiliate-table th,
.affiliate-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #eef1f6;
  text-align: left;
  vertical-align: middle;
}

.affiliate-table th {
  color: #7f8a9d;
  background: #fafbfe;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.affiliate-table tr:last-child td {
  border-bottom: 0;
}

.affiliate-table td strong,
.affiliate-table td span,
.affiliate-table td small,
.affiliate-table td code {
  display: block;
}

.affiliate-table td strong {
  font-size: 14px;
}

.affiliate-table td span,
.affiliate-table td small {
  margin-top: 4px;
  color: #7b8495;
  font-size: 12px;
}

.affiliate-table code {
  max-width: 320px;
  padding: 0;
  overflow: hidden;
  color: #5d36bb;
  background: transparent;
  font-family: inherit;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affiliate-status {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 0 !important;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fbf7ff;
  color: #7046c6 !important;
  font-size: 12px;
  font-weight: 900;
}

.affiliate-empty {
  color: #7b8495;
  text-align: center !important;
}

.similarity-panel {
  margin-bottom: 16px;
}

.similarity-controls {
  display: grid;
  grid-template-columns: 160px minmax(240px, 1fr) minmax(220px, 0.9fr) 170px;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.similar-results {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.similar-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  padding: 14px;
  text-align: left;
}

.similar-card span {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.similar-card strong {
  display: block;
  color: #fff;
  margin-bottom: 6px;
}

.similar-card p,
.similar-card small {
  color: var(--muted);
  line-height: 1.45;
}

#discovery {
  color: #172033;
}

.discovery-shell {
  min-height: calc(100vh - 132px);
  margin: 0;
  padding: 36px clamp(18px, 4vw, 64px) 46px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 79, 184, 0.09), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(143, 92, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #fbfaf8 0%, #f7f5fb 54%, #f4f1f8 100%);
  box-shadow: 0 28px 80px rgba(6, 2, 18, 0.18);
}

.smart-search-panel {
  max-width: 1120px;
  margin: 0 auto 30px;
  text-align: center;
}

.smart-search-panel .eyebrow {
  color: #8491a7;
}

.smart-search-panel h2 {
  margin: 0;
  color: #172033;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: 0;
}

.smart-search-panel > p {
  margin: 16px 0 26px;
  color: #98a3b8;
  font-weight: 800;
}

.platform-tabs {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  padding: 14px 22px;
  border-radius: 18px;
  border: 1px solid rgba(226, 210, 255, 0.42);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 18px 46px rgba(71, 45, 91, 0.09);
}

.platform-tabs.requires-selection {
  border-color: rgba(216, 54, 79, 0.72);
  box-shadow: 0 0 0 3px rgba(216, 54, 79, 0.12), 0 18px 46px rgba(71, 45, 91, 0.09);
}

.platform-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  color: #172033;
  background: transparent;
  font-weight: 900;
}

.platform-choice.active {
  background: #fff;
  box-shadow: 0 10px 28px rgba(71, 45, 91, 0.12);
}

.platform-icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
}

.platform-icon.youtube {
  background: #ff0033;
}

.platform-icon.tiktok {
  background: #050505;
}

.platform-icon.instagram {
  background: linear-gradient(135deg, #7c3aed, #f97316);
}

.platform-icon.all {
  background: #64748b;
}

.smart-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 22px;
  margin: 0 auto 22px;
  text-align: left;
}

.smart-search-button {
  min-height: 60px;
  border-radius: 10px;
  font-size: 17px;
  box-shadow: 0 18px 38px rgba(255, 61, 110, 0.24);
}

#discovery label span {
  color: #7d8798;
  font-weight: 800;
}

#discovery input,
#discovery select,
#discovery textarea {
  color: #172033;
  border-color: #dfe4ec;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.04);
}

#discovery input::placeholder,
#discovery textarea::placeholder {
  color: #a2aabc;
}

.ai-mode-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 22px;
  padding: 6px;
  border: 1px solid #e3e7ef;
  border-radius: 999px;
  background: #f1f3f7;
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08);
}

.ai-mode-toggle button {
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  color: #727d90;
  background: transparent;
  font-weight: 900;
}

.ai-mode-toggle .active {
  color: #172033;
  background: #fff;
}

.ai-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  border: 1px solid rgba(226, 210, 255, 0.55);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(71, 45, 91, 0.13);
}

.ai-search-box input {
  border: 0 !important;
  box-shadow: none !important;
  font-size: 16px;
}

.ai-search-box button {
  min-height: 56px;
  border-radius: 8px;
  background: #172033;
  box-shadow: none;
}

.live-search-panel {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e0e5ed;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 46px rgba(31, 41, 55, 0.08);
  text-align: left;
}

.live-search-panel h3 {
  margin: 4px 0 0;
  color: #172033;
  font-size: 24px;
}

#discovery .live-search-panel .api-status {
  margin: 14px 0;
  color: #64748b;
  border-color: #e0e5ed;
  background: #f8fafc;
}

#discovery .live-result-card {
  display: grid;
  gap: 14px;
  background: #fff;
}

#discovery .live-result-card strong,
#discovery .live-result-card p {
  color: #172033;
}

#discovery .live-result-card.needs-review {
  border-color: #f2c94c;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 62%);
}

#discovery .live-result-card.is-importing {
  opacity: 0.82;
}

#discovery .live-result-card.is-imported {
  border-color: rgba(37, 160, 108, 0.44);
  background: linear-gradient(180deg, #f0fbf6 0%, #ffffff 64%);
}

#discovery .live-result-card.is-favorited,
#discovery .library-result-card.is-favorited {
  border-color: rgba(37, 160, 108, 0.34);
  background: linear-gradient(180deg, #f4fbf7 0%, #ffffff 64%);
}

.review-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff3c4;
  color: #8a5b00;
  font-size: 11px;
  font-weight: 900;
}

.imported-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dff8ec;
  color: #187651;
  font-size: 11px;
  font-weight: 900;
}

.favorite-saved-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eaf8f1;
  color: #187651;
  font-size: 11px;
  font-weight: 900;
}

.live-result-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.live-result-header .avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.live-result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.live-result-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-result-header p,
.live-result-summary {
  margin-top: 4px;
  color: #64748b !important;
  font-size: 13px;
  line-height: 1.45;
}

.live-result-summary {
  min-height: 38px;
}

.live-decision-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
  color: #475569;
  background: #eef2f7;
  font-size: 12px;
  font-weight: 900;
}

.live-decision-badge.strong {
  color: #0f6f4c;
  background: #dff8ec;
}

.live-decision-badge.good {
  color: #5b3cc4;
  background: #ede7ff;
}

.live-decision-badge.pending {
  color: #8a5b00;
  background: #fff3c4;
}

.live-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.live-metric-tile {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #e6eaf1;
  border-radius: 8px;
  background: #f8fafc;
}

.live-metric-tile span {
  display: block;
  margin-bottom: 5px;
  color: #7d8798;
  font-size: 11px;
  font-weight: 900;
}

.live-metric-tile strong {
  display: block;
  overflow: hidden;
  color: #172033 !important;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-metric-tile.accent {
  border-color: rgba(143, 92, 255, 0.24);
  background: #f5f0ff;
}

.live-metric-tile.wide {
  grid-column: span 2;
}

.live-secondary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #7d8798;
  font-size: 12px;
  font-weight: 800;
}

.live-secondary-stats span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5f9;
}

@media (max-width: 760px) {
  .live-result-header {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .live-result-header .avatar {
    width: 52px;
    height: 52px;
  }

  .live-decision-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

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

  .live-metric-tile.wide {
    grid-column: 1 / -1;
  }
}

.live-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.live-results-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e6e9f0;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.live-results-pagination[hidden] {
  display: none;
}

.live-results-pagination .ghost-button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
}

.live-results-pagination .ghost-button:disabled {
  cursor: default;
  opacity: 0.45;
}

#discovery .live-result-actions .text-button {
  color: #172033;
  font-weight: 900;
}

#discovery .live-result-actions .ghost-button {
  color: #ffffff;
  border-color: transparent;
  background: #172033;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.18);
}

#discovery .live-result-actions .ghost-button:hover {
  color: #ffffff;
  background: #0f172a;
}

#discovery .live-result-actions .ghost-button:disabled {
  cursor: default;
  color: #187651;
  background: #dff8ec;
  box-shadow: none;
}

.missing-link {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 800;
}

.live-empty-result {
  padding: 14px;
  border: 1px dashed #d8deea;
  border-radius: 8px;
  color: #64748b;
  background: #f8fafc;
}

.live-empty-result.review-note {
  border-color: #f2c94c;
  color: #5f4100;
  background: #fff8df;
}

.live-empty-result.error-note {
  border-color: #ff9aa8;
  color: #8a1230;
  background: #fff1f4;
}

.creator-tools-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto 18px;
}

.backend-api-panel {
  display: none;
}

.project-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
}

.icon-action {
  min-height: 44px;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  color: #172033;
  background: #fff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.icon-action:hover {
  border-color: #172033;
  background: #f8fafc;
}

.utility-card,
#creators .creator-list-panel {
  border: 1px solid #e0e5ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(31, 41, 55, 0.07);
}

.utility-card {
  padding: 16px;
}

.utility-card summary {
  cursor: pointer;
  color: #172033;
  font-weight: 900;
}

.compact-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

#discovery .tool-card,
#discovery .tiktok-result-card,
#discovery .similar-card {
  border-color: #e0e5ed;
  background: #f8fafc;
}

#discovery .api-status {
  color: #7d8798;
  border-color: #e0e5ed;
  background: #f8fafc;
}

#creators .creator-list-panel {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}

.list-header h2 {
  margin: 4px 0 0;
  color: #172033;
  font-size: 34px;
}

.list-header p:last-child {
  margin: 8px 0 0;
  color: #7d8798;
  font-weight: 700;
}

.list-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  width: min(620px, 100%);
}

.list-actions {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

.creator-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
  margin: 22px 0 14px;
}

.creator-stat-card {
  padding: 14px;
  border: 1px solid #e0e5ed;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 10px 26px rgba(31, 41, 55, 0.05);
}

.creator-stat-card span,
.creator-stat-card small {
  display: block;
  color: #7d8798;
  font-size: 12px;
  font-weight: 800;
}

.creator-stat-card strong {
  display: block;
  margin: 8px 0 4px;
  color: #172033;
  font-size: 26px;
}

.reputation-filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  margin: 0 0 14px;
  border: 1px solid #e5ddff;
  border-radius: 16px;
  background: rgba(248, 244, 255, 0.9);
  box-shadow: 0 12px 30px rgba(107, 70, 193, 0.08);
}

.reputation-filter-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #6d7082;
  font-weight: 900;
  cursor: pointer;
}

.reputation-filter-bar button strong {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff;
  color: #5b32b8;
  font-size: 12px;
}

.reputation-filter-bar button.active {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #e044aa);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.18);
}

.reputation-filter-bar button.active strong {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.project-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.project-overview-card {
  display: grid;
  gap: 7px;
  text-align: left;
  border: 1px solid #e0e5ed;
  border-radius: 14px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 41, 55, 0.06);
  cursor: pointer;
}

.project-overview-card:hover {
  border-color: rgba(255, 79, 184, 0.5);
  box-shadow: 0 16px 34px rgba(143, 92, 255, 0.12);
}

.project-overview-card span,
.project-overview-card small {
  color: #7d8798;
  font-size: 12px;
  font-weight: 800;
}

.project-overview-card strong {
  color: #172033;
  font-size: 17px;
}

.project-overview-card em {
  color: #4f3fa3;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

#creators .filter-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 0.9fr);
  border-color: #e0e5ed;
  background: #f8fafc;
}

#creators .filter-summary strong,
#creators .creator-link,
#creators td {
  color: #172033;
}

#creators .filter-summary span,
#creators th,
#creators .creator-cell span {
  color: #7d8798;
}

#creators .table-wrap {
  border-color: #e0e5ed;
  background: #fff;
  box-shadow: none;
}

#creators th,
#creators td {
  border-bottom-color: #eef1f6;
}

#creators tr:hover td {
  background: #f7f9fc;
}

#creators .creator-database-wrap {
  overflow: auto;
  border: 1px solid #dde4ef;
  border-radius: 16px;
  background: #fff;
}

#creators .red-creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#creators .red-creator-grid[hidden] {
  display: none;
}

#creators .red-creator-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e4d7ff;
  border-radius: 22px;
  background: linear-gradient(150deg, #fff 0%, #fbf8ff 62%, #f6efff 100%);
  box-shadow: 0 18px 44px rgba(90, 63, 155, 0.12);
  cursor: pointer;
}

#creators .red-creator-card:hover {
  transform: translateY(-2px);
  border-color: #cbb8ff;
  box-shadow: 0 22px 54px rgba(90, 63, 155, 0.16);
}

#creators .red-creator-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

#creators .red-creator-card .creator-profile-card {
  width: auto;
  min-width: 0;
  flex: 1;
  background: rgba(255, 255, 255, 0.72);
}

#creators .red-creator-card .creator-profile-copy strong,
#creators .red-creator-card .creator-profile-copy .creator-link {
  max-width: 135px;
}

#creators .red-creator-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#creators .red-creator-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f5f0ff;
  color: #6f55c8;
  font-size: 11px;
  font-weight: 900;
}

#creators .red-creator-tags span.is-ready {
  background: #e8f8f1;
  color: #14875d;
}

#creators .red-creator-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#creators .red-creator-metrics span,
#creators .red-creator-review,
#creators .red-creator-note {
  border: 1px solid #eee7ff;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

#creators .red-creator-metrics span {
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 11px;
}

#creators .red-creator-metrics strong {
  color: #172033;
  font-size: 18px;
  font-weight: 950;
}

#creators .red-creator-metrics small {
  color: #8a96aa;
  font-size: 11px;
  font-weight: 900;
}

#creators .red-creator-review,
#creators .red-creator-note {
  display: grid;
  gap: 8px;
  padding: 12px;
}

#creators .red-creator-review > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

#creators .red-creator-review strong,
#creators .red-creator-note strong {
  color: #172033;
  font-size: 14px;
  font-weight: 950;
}

#creators .red-creator-review span:not(.star-on):not(.star-off),
#creators .red-creator-note span,
#creators .red-creator-note small {
  color: #7d8798;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

#creators .red-star-line {
  font-size: 13px;
  letter-spacing: 0.06em;
}

#creators .red-creator-projects .project-empty {
  display: inline-flex;
}

#creators .red-creator-actions {
  display: grid;
  grid-template-columns: 1fr 0.78fr 0.78fr;
  gap: 8px;
}

#creators .red-empty-state {
  grid-column: 1 / -1;
  padding: 30px;
  border: 1px dashed #d9c9ff;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  color: #7d8798;
  font-weight: 900;
  text-align: center;
}

#creators .visual-creator-table {
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
}

#creators .visual-creator-table th {
  height: 58px;
  padding: 14px 12px;
  border-bottom: 1px solid #e4e9f1;
  background: #fbfcff;
  color: #7d8798;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

#creators .visual-creator-table td {
  height: 112px;
  padding: 12px;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
  color: #172033;
}

#creators .visual-creator-table .select-col {
  width: 42px;
  text-align: center;
}

#creators .creator-row-check {
  width: 18px;
  height: 18px;
  accent-color: #172033;
}

#creators .creator-visual-row:hover td {
  background: #fbfcff;
}

#creators .creator-profile-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 275px;
  min-height: 76px;
  padding: 12px;
  border-radius: 14px;
  background: #f4f6fa;
}

#creators .creator-profile-card .avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

#creators .creator-profile-copy {
  min-width: 0;
}

#creators .creator-profile-copy strong,
#creators .creator-profile-copy .creator-link {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  color: #172033;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-profile-copy > span {
  display: block;
  max-width: 185px;
  margin: 3px 0 6px;
  overflow: hidden;
  color: #7d8798;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

#creators .creator-meta-row small {
  color: #748195;
  font-size: 12px;
  font-weight: 900;
}

#creators .creator-media-strip {
  display: grid;
  grid-template-columns: repeat(6, 46px);
  gap: 6px;
  min-width: 306px;
}

#creators .creator-media-thumb-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 62px;
  overflow: hidden;
  border: 1px solid #e5eaf2;
  border-radius: 12px;
  background: #f2f4f8;
  color: #9aa5b6;
  font-size: 11px;
  font-weight: 900;
}

#creators .creator-media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#creators .creator-media-thumb-wrap.is-empty {
  background: repeating-linear-gradient(135deg, #f7f8fb, #f7f8fb 7px, #eef2f7 7px, #eef2f7 14px);
}

#creators .creator-tag-stack,
#creators .creator-review-stack,
#creators .creator-status-stack,
#creators .creator-row-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

#creators .niche-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: #ffe6ef;
  color: #ff3d6e;
  font-size: 12px;
  font-weight: 900;
}

#creators .creator-contact-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#creators .creator-contact-flags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f3f5f9;
  color: #8994a5;
  font-size: 11px;
  font-weight: 900;
}

#creators .creator-contact-flags span.is-ready {
  background: #e8f8f1;
  color: #14875d;
}

#creators .creator-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 8px;
  min-width: 210px;
}

#creators .creator-metric-grid span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  background: #fbfcff;
}

#creators .creator-metric-grid strong {
  color: #172033;
  font-size: 17px;
  font-weight: 950;
}

#creators .creator-metric-grid small {
  color: #7d8798;
  font-size: 11px;
  font-weight: 900;
}

#creators .creator-review-stack {
  min-width: 175px;
  max-width: 230px;
}

#creators .creator-rating-line,
#creators .creator-quote-line {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid #eadfff;
  border-radius: 12px;
  background: rgba(248, 244, 255, 0.88);
}

#creators .creator-rating-line strong,
#creators .creator-quote-line strong {
  color: #172033;
  font-size: 13px;
  font-weight: 950;
}

#creators .creator-rating-line span,
#creators .creator-quote-line span,
#creators .creator-quote-line small {
  color: #7d8798;
  font-size: 11px;
  font-weight: 850;
}

#creators .creator-quote-line span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}

#creators .creator-review-stack em {
  color: #8b5cf6;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.list-status-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.list-status-chip.red {
  color: #a21caf;
  background: #fae8ff;
  border: 1px solid #f0abfc;
}

.list-status-chip.black {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.list-status-chip.normal {
  color: #5b6170;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

#creators .creator-status-stack {
  width: 165px;
}

#creators .creator-status-stack span:not(.status) {
  color: #172033;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

#creators .creator-status-stack small {
  color: #7d8798;
  font-size: 11px;
  font-weight: 800;
}

#creators .creator-row-actions {
  min-width: 112px;
}

#creators .row-action {
  width: 100%;
  min-height: 30px;
  border: 1px solid #d9e0eb;
  border-radius: 999px;
  color: #172033;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

#creators .row-action.primary {
  border-color: #d8dcff;
  color: #3a2f86;
  background: #eef0ff;
}

#creators .row-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

#creators .favorite-button {
  width: 100%;
  border-color: #ffd166;
  color: #8a5d00;
  background: #fff8df;
}

#creators .favorite-button.active {
  color: #24180a;
  background: #ffd166;
}

#creators .visual-creator-table .chip,
#creators .visual-creator-table .rating-badge {
  color: #3a2f86;
  background: #eef0ff;
}

#creators .visual-creator-table .rating-badge.top {
  color: #087a54;
  background: #e8f8f1;
}

#creators .visual-creator-table .rating-badge.good {
  color: #4f3fa3;
  background: #f0eaff;
}

#creators .visual-creator-table .rating-badge.low {
  color: #9b5b00;
  background: #fff2d9;
}

#creators .empty-row {
  padding: 42px;
  text-align: center;
  color: #7d8798;
  font-weight: 900;
}

#creators {
  min-height: calc(100vh - 132px);
  padding: 28px clamp(18px, 4vw, 64px) 42px;
  border-radius: 10px;
  background: #f7f8fb;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.tiktok-api-panel {
  margin-bottom: 18px;
}

.api-grid,
.tiktok-tool-grid,
.tiktok-results {
  display: grid;
  gap: 12px;
}

.api-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 14px;
}

.api-grid > div,
.tool-card,
.tiktok-result-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.api-grid p,
.tool-card p,
.api-status {
  color: var(--muted);
  line-height: 1.5;
}

.tiktok-tool-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tool-card {
  display: grid;
  gap: 12px;
}

.tool-card h3 {
  margin: 0;
  font-size: 16px;
}

.api-status {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tiktok-results {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(8, minmax(126px, 160px));
  gap: 12px;
  margin-bottom: 16px;
}

.creator-list-panel {
  margin-top: 16px;
}

.filter-drawer {
  margin-top: 12px;
}

.filter-drawer summary {
  cursor: pointer;
  color: #fff;
  font-weight: 800;
  padding: 10px 0 14px;
}

.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.filter-summary strong {
  display: block;
  color: #fff;
}

.filter-summary span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

label {
  display: grid;
  gap: 6px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--ink);
  background: rgba(11, 7, 19, 0.52);
}

input::placeholder,
textarea::placeholder {
  color: #77688d;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(143, 92, 255, 0.42);
  border-color: rgba(255, 79, 184, 0.46);
}

.table-wrap {
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1280px;
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

td {
  color: #eadff8;
}

tr:hover td {
  background: rgba(143, 92, 255, 0.11);
}

.creator-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creator-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(143, 92, 255, 0.9), rgba(255, 61, 110, 0.88));
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
}

.avatar-image {
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.creator-link {
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.creator-link:hover {
  color: var(--magenta);
  text-decoration: underline;
}

.project-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 150px;
}

.project-pill,
.project-more,
.project-empty {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 900;
}

.project-pill {
  color: #3a2f86;
  background: #eef0ff;
  border: 1px solid #d8dcff;
}

.project-more {
  color: #8f5cff;
  background: rgba(143, 92, 255, 0.12);
}

.project-empty {
  color: #7d8798;
  background: #f4f6fb;
}

.rating-stars {
  display: inline-flex;
  gap: 1px;
  color: #ffd166;
  font-size: 13px;
  white-space: nowrap;
}

.rating-stars.muted {
  color: rgba(255, 255, 255, 0.28);
}

.rating-stars.good {
  color: #7ce3b8;
}

.rating-stars.low {
  color: #ff8a8a;
}

.star-off {
  color: rgba(255, 255, 255, 0.28);
}

.star-on {
  color: #ffd166;
}

.favorite-button {
  min-width: 72px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 999px;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.favorite-button.active {
  color: #24180a;
  background: #ffd166;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(226, 210, 255, 0.12);
  color: #e9ddff;
  font-weight: 700;
  font-size: 12px;
}

.chip.green {
  background: rgba(67, 211, 158, 0.14);
  color: var(--green);
}

.chip.amber {
  background: rgba(255, 180, 84, 0.14);
  color: var(--amber);
}

.chip.blue {
  background: rgba(143, 92, 255, 0.18);
  color: var(--blue);
}

.chip.red {
  background: rgba(255, 61, 110, 0.16);
  color: var(--red);
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(226, 210, 255, 0.12);
  color: #e9ddff;
  font-size: 12px;
  font-weight: 800;
}

.rating-badge.top {
  background: rgba(67, 211, 158, 0.14);
  color: var(--green);
}

.rating-badge.good {
  background: rgba(155, 108, 255, 0.18);
  color: #d9c6ff;
}

.rating-badge.low {
  background: rgba(255, 180, 84, 0.14);
  color: var(--amber);
}

.rating-badge.muted {
  color: var(--muted);
}

.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 10px;
}

.kanban-column {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 500px;
}

.kanban-column h2 {
  font-size: 15px;
  margin-bottom: 12px;
}

.creator-card {
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: none;
}

.creator-card p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.card-actions button {
  flex: 1;
  min-height: 34px;
}

.contract-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.contract-card {
  padding: 16px;
  box-shadow: none;
}

.contract-card p {
  color: var(--muted);
  margin: 8px 0 14px;
  line-height: 1.5;
}

.contract-links {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 12px;
}

.contract-links a {
  color: #fff;
  word-break: break-all;
}

.contract-template-actions {
  display: grid;
  grid-template-columns: 150px auto auto;
  gap: 10px;
  align-items: center;
}

.contract-builder {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 16px;
  margin-top: 16px;
}

.contract-form-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.contract-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.contract-form-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.contract-form-grid input,
.contract-form-grid select,
.contract-form-grid textarea {
  width: 100%;
}

.contract-template-output {
  margin: 14px 0 18px;
  min-height: 320px;
  color: #1b1720;
  line-height: 1.55;
}

.contract-preview {
  overflow-x: auto;
  padding: 28px;
  border: 1px solid rgba(117, 68, 215, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0, rgba(117, 68, 215, 0.09), transparent 34%),
    #f8f6fc;
  box-shadow: 0 20px 50px rgba(6, 2, 18, 0.2);
}

.contract-document {
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  padding: 26px 44px 64px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(31, 20, 48, 0.08);
}

.contract-doc-header,
.contract-party-grid,
.contract-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.contract-doc-header {
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 92px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(117, 68, 215, 0.22);
}

.contract-logo-block img {
  display: block;
  width: min(112px, 100%);
  height: auto;
}

.contract-title-block {
  text-align: right;
}

.contract-title-block p:last-child {
  margin-top: 8px;
  color: #6f6576;
}

.contract-kicker {
  margin-bottom: 4px;
  color: #6f6576;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.contract-document h2 {
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.18;
}

.contract-document h3 {
  margin: 18px 0 8px;
  color: #111;
  font-size: 15px;
}

.contract-document p {
  margin: 0 0 10px;
  color: #25212b;
}


.contract-party-grid {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(117, 68, 215, 0.16);
}

.contract-party-card {
  min-height: 198px;
  padding: 18px 20px;
  border: 1px solid rgba(117, 68, 215, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 0, rgba(117, 68, 215, 0.08), transparent 34%),
    linear-gradient(180deg, #fbf8ff, #f7f2ff);
}

.contract-clauses {
  margin-bottom: 30px;
}

.contract-signature-party {
  display: grid;
  grid-template-rows: auto 118px auto;
  gap: 8px;
}

.signature-box {
  box-sizing: border-box;
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #111;
  color: #111;
}

.signature-box strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
}

.signature-box span,
.signature-box em {
  color: #555;
}

.signature-box em {
  font-style: normal;
}

.empty-signature {
  background: #fbf8ff;
}

.contract-signature-date {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 0 !important;
}

.contract-signature-date span,
.contract-signature-date strong {
  color: #25212b;
  font: inherit;
  font-weight: 500;
}

.contract-score {
  margin-top: 10px;
}

.review-comment {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.calendar-workspace {
  max-width: 1320px;
  min-height: auto;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #dedede;
  border-radius: 18px;
  color: #202124;
  background: #f7f7f8;
  box-shadow: 0 22px 50px rgba(31, 41, 55, 0.12);
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  background: linear-gradient(90deg, #f1f1f2, #ded9e8);
  border-bottom: 1px solid #d9d9dc;
}

.calendar-toolbar h2 {
  margin: 4px 0 0;
  color: #33343a;
  font-size: 24px;
}

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

.calendar-controls .icon-button,
.calendar-controls .ghost-button {
  color: #33343a;
  border-color: #c7c8ce;
  background: rgba(255, 255, 255, 0.7);
}

.calendar-board {
  overflow: auto;
  background: #fff;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  min-width: 760px;
  border-bottom: 2px solid #dedede;
}

.calendar-weekdays strong {
  padding: 13px 14px;
  text-align: center;
  color: #242424;
  font-size: 18px;
  border-right: 1px solid #dedede;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  min-width: 760px;
}

.calendar-day {
  display: grid;
  align-content: start;
  min-height: 108px;
  padding: 10px 8px 8px;
  border: 0;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  border-radius: 0;
  background: #fbfbfc;
  color: #242424;
  text-align: left;
}

.calendar-day.muted {
  color: #9aa0a6;
  background: #f5f5f6;
}

.calendar-day.today {
  background: #d8f4e8;
}

.calendar-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 30px;
  height: 26px;
  margin-bottom: 14px;
  padding: 0 8px;
  border-radius: 999px;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
}

.calendar-day.today .calendar-date {
  color: #fff;
  background: #21a879;
}

.calendar-events {
  display: grid;
  gap: 4px;
}

.calendar-event {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 23px;
  padding: 3px 8px;
  overflow: hidden;
  border-left: 5px solid #9b98ff;
  border-radius: 6px;
  color: #151515;
  background: #dddafe;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendar-event.ready {
  border-left-color: #7c8cff;
  background: #d7ddff;
}

.calendar-event.revision {
  border-left-color: #ff7a9d;
  background: #ffe0e8;
}

.calendar-event.done {
  border-left-color: #21a879;
  background: #dff6ea;
}

.calendar-event b {
  flex: 0 0 auto;
}

.calendar-more-events {
  color: #6b7280;
  font-size: 12px;
}

.calendar-agenda {
  padding: 18px 24px 26px;
}

.calendar-agenda h2 {
  margin: 4px 0 0;
  color: #33343a;
}

.calendar-agenda .calendar-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.calendar-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  background: #fff;
  border-color: #dedede;
  box-shadow: 0 12px 32px rgba(31, 41, 55, 0.08);
}

dialog {
  border: 0;
  padding: 0;
  background: transparent;
}

dialog::backdrop {
  background: rgba(6, 2, 18, 0.72);
}

.dialog-card {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: var(--surface);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.dialog-card label,
.dialog-card .section-heading h2,
.dialog-card .star-field span {
  color: #fff;
}

.dialog-card input,
.dialog-card select,
.dialog-card textarea {
  color: #fff;
}

.dialog-card select[multiple] {
  min-height: 96px;
}

.dialog-card select[multiple] option {
  padding: 6px 8px;
}

.dialog-card input::placeholder,
.dialog-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.form-grid.compact {
  margin: 12px 0 0;
}

.form-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.form-section .section-heading h2 {
  font-size: 17px;
}

.rating-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.rating-section .section-heading h2 {
  font-size: 17px;
}

#ratingPreview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
}

.rating-help {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.star-field {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.star-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.star-input {
  display: flex;
  gap: 4px;
}

.star-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.24);
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}

.star-button:hover,
.star-button.active {
  color: #ffd166;
}

.star-button:hover {
  transform: translateY(-1px);
}

.rating-history-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(198, 174, 255, 0.38);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.rating-history-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.rating-history-head strong {
  color: var(--text);
  font-size: 13px;
}

.rating-history-head span,
.rating-history-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.rating-history-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.rating-history-empty {
  margin: 0;
}

.rating-history-item {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(145px, 0.8fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(198, 174, 255, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.rating-history-item strong,
.rating-history-score b {
  color: var(--text);
  font-size: 13px;
}

.rating-history-item span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.rating-history-score {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rating-history-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.outreach-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.14fr);
  gap: 18px;
}

.email-settings-grid,
.email-compose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.email-settings-grid label,
.email-compose-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.email-settings-grid input,
.email-settings-grid select,
.email-compose-grid input,
.email-compose-grid textarea {
  width: 100%;
}

.email-compose-grid textarea {
  min-height: 260px;
  resize: vertical;
}

.translation-tool {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.translation-tool label {
  margin: 0;
}

.translation-tool button {
  min-height: 54px;
  padding-inline: 22px;
}

.email-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.translation-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(67, 211, 158, 0.26);
  border-radius: 8px;
  background: rgba(67, 211, 158, 0.08);
  color: #f8fff9;
  font-weight: 800;
}

.translation-confirm input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.outreach-recipients-panel {
  margin-top: 18px;
}

.recipient-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.recipient-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--magenta);
}

.full {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 14px;
  }

  .nav-list {
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    overflow-x: auto;
  }

  .side-panel {
    display: none;
  }

  .metrics-grid,
  .split-layout,
  .dashboard-grid,
  .toolbar,
  .similarity-controls,
  .platform-grid,
  .stage-track,
  .database-banner,
  .smart-filter-grid,
  .creator-tools-row,
  .list-header,
  .list-filters,
  .compact-tools,
  .creator-stat-grid,
  .outreach-layout,
  .email-settings-grid,
  .email-compose-grid {
    grid-template-columns: 1fr;
  }

  .platform-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .ai-search-box {
    grid-template-columns: 1fr;
  }

  .donut-layout {
    grid-template-columns: 1fr;
  }

  .calendar-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 18px;
  }

  .topbar,
  .section-heading,
  .dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions,
  .dialog-actions > div {
    width: 100%;
  }

  .top-actions button,
  .dialog-actions button {
    flex: 1;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .rating-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   UX REFINEMENTS — staging v2
   ════════════════════════════════════════════════════ */

/* 1 ── Sidebar brand: tighten logo to free vertical space */
.brand-logo-frame {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  padding: 7px;
}
/* Sidebar stays fixed while content scrolls — standard SaaS pattern */
.sidebar {
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* 2 ── Sidebar logout: session action lives here, not in the data toolbar */
.sidebar-logout {
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(168, 178, 186, 0.7);
  text-align: left;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, background .15s;
  letter-spacing: 0;
}
.sidebar-logout:hover {
  color: #fff;
  background: rgba(255, 61, 110, 0.14);
}

/* 3 ── Topbar: reduce eyebrow visual noise, let the title breathe */
.topbar .eyebrow {
  font-size: 10px;
  opacity: 0.45;
  letter-spacing: .12em;
  margin-bottom: 2px;
}
h1 { font-size: clamp(26px, 3.2vw, 40px); }

/* 4 ── Topbar actions: separator between utility buttons and primary CTA */
.action-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(226, 210, 255, 0.18);
  align-self: center;
  flex-shrink: 0;
}
.top-actions { gap: 8px; }

/* 5 ── Nav items: slightly tighter padding for cleaner list */
.nav-item { padding: 10px 14px; font-size: 14px; }

/* 6 ── Kanban: right-fade shadow signals horizontal scroll */
#pipeline { position: relative; }
#pipeline::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(to right, transparent, rgba(12, 7, 24, 0.75));
  pointer-events: none;
  z-index: 2;
  border-radius: 0 6px 6px 0;
}
/* Hide fade when fully scrolled right */
.kanban { scroll-behavior: smooth; }

/* 7 ── Kanban cards: "前一步" is secondary — visually quieter */
.card-actions .ghost-button {
  color: rgba(207, 196, 227, 0.55);
  border-color: rgba(226, 210, 255, 0.12);
  font-size: 12px;
}
.card-actions .ghost-button:hover { color: #cfc4e3; border-color: rgba(226, 210, 255, 0.3); }

/* 8 ── Side-panel: subtle top border to separate from logout */
.side-panel { margin-bottom: 6px; }

/* ──────────────────────────────────────────────────────────
   9 ── 网红名单 action buttons (on light card background)
   Old `.text-button` (transparent + light-purple ink) was
   invisible on cream/white cards. These buttons get proper
   contrast: filled primary + outlined secondary.
   ────────────────────────────────────────────────────────── */

.list-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.list-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.list-action-btn:active { transform: translateY(1px); }
.list-action-btn:disabled { opacity: 0.55; cursor: wait; }

.list-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  line-height: 1;
}

/* Primary (同步飞书) — filled deep-violet, white text */
.list-action-primary {
  background: #5b32b8;
  color: #fff;
  border: 1px solid #5b32b8;
  box-shadow: 0 4px 14px rgba(91, 50, 184, 0.22);
}
.list-action-primary:hover {
  background: #6d3fd6;
  border-color: #6d3fd6;
}

/* Secondary (整理去重) — outlined deep-violet */
.list-action-secondary {
  background: #fff;
  color: #5b32b8;
  border: 1px solid rgba(91, 50, 184, 0.45);
}
.list-action-secondary:hover {
  background: rgba(91, 50, 184, 0.06);
  border-color: #5b32b8;
}
.list-action-secondary .list-action-icon {
  background: rgba(91, 50, 184, 0.12);
  color: #5b32b8;
}

/* 清空筛选 — moved next to filter dropdowns, lives as a quiet link */
.filter-reset-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #7d6cb3;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  align-self: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.filter-reset-link:hover {
  color: #5b32b8;
  background: rgba(91, 50, 184, 0.08);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Filter container: let the reset link wrap to its own row if needed */
.list-filters {
  align-items: center;
}

@media (max-width: 720px) {
  .list-action-btn { padding: 0 11px; font-size: 12px; }
  .list-action-icon { display: none; }
}

/* ──────────────────────────────────────────────────────────
   10 ── 网红名单 / Creator list — EasyKOL-style visual refresh
   Visual-only: keeps every existing column and behaviour, just
   gives each row breathing room, rounded card edges, a bigger
   round avatar, and quieter separators.
   ────────────────────────────────────────────────────────── */

/* Container: white card with rounded corners and soft shadow */
#creators .table-wrap {
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ecf0f6;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* Header row: airier, lighter, more breathable */
#creators thead th {
  height: auto;
  padding: 16px 18px;
  background: #fafbfd;
  color: #8e98a8;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #ecf0f6;
}

/* Body rows: card-like with generous padding + quieter dividers */
#creators tbody td {
  padding: 22px 18px;
  border-bottom: 1px solid #f1f4f9;
  vertical-align: middle;
  color: #1f2a3a;
}
#creators tbody tr:last-child td { border-bottom: 0; }

/* Hover: subtle lift, no more "highlighter blue" background */
#creators tbody tr {
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
#creators tbody tr:hover td {
  background: #fafbfd;
}

/* Avatar: bigger, rounded, with a subtle ring like EasyKOL */
#creators .creator-cell {
  align-items: center;
  gap: 14px;
}
#creators .creator-cell .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 16px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #eef1f7;
  flex-shrink: 0;
}
#creators .creator-cell .avatar.avatar-image {
  background: #f3f5f9;
}

/* Name & handle typography */
#creators .creator-cell .creator-name-line strong,
#creators .creator-cell .creator-name-line .creator-link {
  font-size: 15px;
  font-weight: 700;
  color: #1f2a3a;
  letter-spacing: -0.005em;
}
#creators .creator-cell span {
  font-size: 12.5px;
  color: #98a1b1;
  margin-top: 3px;
}

/* Platform / niche / contact / status chips on light bg need dark text */
#creators td .chip,
#creators td .platform-chip {
  color: #1f2a3a;
}

/* Bigger / clearer follower number */
#creators tbody td:nth-child(5) {
  font-size: 15px;
  font-weight: 700;
  color: #1f2a3a;
}

/* Status / 互动率 / 下一步 cells: keep them readable but quieter */
#creators tbody td:nth-child(6),
#creators tbody td:nth-child(8),
#creators tbody td:nth-child(10) {
  color: #4b5668;
  font-size: 13px;
}

/* Favourite button on the light background */
#creators .favorite-button {
  border-color: #fde2cc;
  background: #fff8f0;
  color: #d97706;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 14px;
  min-width: auto;
  white-space: nowrap;
}
#creators .favorite-button.active {
  background: linear-gradient(135deg, #fde7c5, #ffd9b0);
  color: #a8520f;
  border-color: transparent;
}
#creators .favorite-button:hover {
  background: #fff1de;
}

/* Star rating badge: better contrast on light card */
#creators .rating-stars {
  font-size: 12px;
}
#creators .rating-stars.muted { color: #d4d9e2; }
#creators .star-off { color: #e3e7ee; }

/* Filter summary panel: lighter card */
#creators .filter-summary {
  border-radius: 12px;
  border: 1px solid #ecf0f6;
  background: #fff;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* Platform overview cards: a touch lighter borders */
#creators .platform-card {
  border-radius: 14px;
  border-color: #ecf0f6;
}
#creators .platform-card.active {
  border-color: #5b32b8;
  box-shadow: 0 0 0 2px rgba(91, 50, 184, 0.12);
}

/* Empty state row stays subtle */
#creators .empty-row {
  text-align: center;
  padding: 48px 16px;
  color: #98a1b1;
  font-size: 14px;
}

/* ──────────────────────────────────────────────────────────
   11 ── 邮件外联 manual recipients block
   ────────────────────────────────────────────────────────── */
.manual-recipients-block {
  display: block;
  margin-top: 8px;
}
.manual-recipients-block textarea {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 7, 20, 0.55);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.manual-recipients-block small.muted {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────
   12 ── 合同资料 — contract cards with signed-state visuals
   Card highlights once a signed contract file is attached.
   ────────────────────────────────────────────────────────── */
.contract-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(226, 210, 255, 0.18);
  background: rgba(31, 20, 48, 0.72);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.contract-card.is-signed {
  border-color: rgba(67, 211, 158, 0.42);
  background:
    linear-gradient(180deg, rgba(67, 211, 158, 0.07), rgba(67, 211, 158, 0)),
    rgba(31, 20, 48, 0.72);
  box-shadow: 0 0 0 1px rgba(67, 211, 158, 0.18) inset;
}

.contract-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.contract-card-title .creator-link,
.contract-card-title strong {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.contract-card-title .creator-link:hover { text-decoration: underline; }

.contract-signed-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(67, 211, 158, 0.16);
  color: #43d39e;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(67, 211, 158, 0.34);
}
.contract-pending-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 180, 84, 0.12);
  color: #ffb454;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 180, 84, 0.34);
}

.contract-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 12.5px;
  color: var(--muted);
}
.contract-meta strong {
  display: inline;
  margin-right: 4px;
  color: #c5b7e0;
  font-weight: 700;
}

.contract-file-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(226, 210, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
}
.contract-card.is-signed .contract-file-row {
  border-style: solid;
  border-color: rgba(67, 211, 158, 0.28);
  background: rgba(67, 211, 158, 0.06);
}

.contract-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(143, 92, 255, 0.18);
  border: 1px solid rgba(143, 92, 255, 0.42);
  color: #c5b7ff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.contract-upload-btn:hover {
  background: rgba(143, 92, 255, 0.28);
  border-color: rgba(143, 92, 255, 0.6);
}

.contract-filename {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contract-card.is-signed .contract-filename {
  color: #d8f3e6;
  font-weight: 600;
}

.contract-file-link {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700;
  color: #43d39e !important;
  text-decoration: none;
}
.contract-file-link:hover {
  background: rgba(67, 211, 158, 0.1) !important;
}

/* ──────────────────────────────────────────────────────────
   13 ── 筛选器视觉压缩（搜索页 + 名单页）
   原则：减少视觉噪音、缩小占用空间、保留全部信息。
   - 标签变小、变轻（800 → 600，11px）
   - 输入框降低 padding、去掉重阴影
   - 行间距从 22px 收紧到 12px
   - 搜索按钮放在筛选下面但居中明显
   ────────────────────────────────────────────────────────── */

/* 搜索页：智能筛选区域 */
.smart-filter-grid {
  gap: 12px 14px;
  margin: 4px 0 18px;
}

.smart-filter-grid label > span:not(.project-select-row) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #8b95a8;
  margin-bottom: 4px;
  display: block;
}

#discovery .smart-filter-grid select,
#discovery .smart-filter-grid input {
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: none;
  border-color: #e1e6ee;
  transition: border-color 0.12s, box-shadow 0.12s;
}
#discovery .smart-filter-grid select:hover,
#discovery .smart-filter-grid input:hover {
  border-color: #b9c1d1;
}
#discovery .smart-filter-grid select:focus,
#discovery .smart-filter-grid input:focus {
  border-color: #5b32b8;
  box-shadow: 0 0 0 3px rgba(91, 50, 184, 0.12);
  outline: none;
}

/* 项目选择行：让 + 按钮紧贴 select 而不是占满 */
.project-select-row {
  display: flex;
  gap: 6px;
}
.project-select-row select { flex: 1; min-width: 0; }
.project-select-row .icon-action {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #e1e6ee;
  background: #fff;
  color: #5b32b8;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.project-select-row .icon-action:hover {
  background: rgba(91, 50, 184, 0.08);
  border-color: #5b32b8;
}

/* 搜索按钮：占满最后一行的最后一格，明显但不撑高 */
.smart-search-button {
  min-height: 38px !important;
  height: 38px;
  align-self: end;
  font-size: 13px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(255, 61, 110, 0.22) !important;
  padding: 0 18px !important;
}

/* AI 模式切换：更紧凑 */
.ai-mode-toggle {
  margin: 8px 0 10px;
  display: inline-flex;
  background: #f3f5fa;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.ai-mode-toggle button {
  border: 0;
  background: transparent;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7585;
  cursor: pointer;
}
.ai-mode-toggle button.active {
  background: #fff;
  color: #5b32b8;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* AI 搜索框：单独一行，主要 CTA 在右 */
.ai-search-box {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  margin-top: 4px;
}
.ai-search-box input {
  min-height: 42px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid #e1e6ee !important;
}
.ai-search-box .primary-button {
  min-height: 42px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

/* ─── 名单页：筛选行紧凑化 ─── */
#creators .list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: auto;
}
#creators .list-filters select {
  min-height: 36px;
  padding: 0 28px 0 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid #e1e6ee;
  background-color: #fff;
  color: #1f2a3a;
  cursor: pointer;
  min-width: 130px;
}
#creators .list-filters select:hover {
  border-color: #b9c1d1;
}
#creators .list-filters select:focus {
  border-color: #5b32b8;
  box-shadow: 0 0 0 3px rgba(91, 50, 184, 0.12);
  outline: none;
}

/* Active-filter-look: 当 select 非"all"时给个紫色描边强调 */
#creators .list-filters select:not([data-value="all"]):not([data-default="true"]) {
  border-color: #b8a3eb;
  background: rgba(91, 50, 184, 0.05);
  color: #5b32b8;
  font-weight: 600;
}

/* 筛选汇总卡片：更紧凑 */
#creators .filter-summary {
  padding: 12px 14px;
  margin-bottom: 12px;
}
#creators .filter-summary strong {
  font-size: 13px;
  font-weight: 700;
}
#creators .filter-summary span {
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────
   14 ── Project pill bar (网红名单页项目筛选)
   按项目分组的横向 pill 栏，让"项目"成为运营管理的一等公民。
   ────────────────────────────────────────────────────────── */
.project-pill-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 12px;
  border-radius: 14px;
  border: 1px solid #ecf0f6;
  background: linear-gradient(180deg, #fbfbff, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.project-pill-bar-label {
  flex-shrink: 0;
}
.project-pill-bar-label .eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #98a1b1;
  text-transform: uppercase;
}

.project-pills {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.project-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 14px;
  border-radius: 999px;
  border: 1px solid #e2e7ef;
  background: #fff;
  color: #4b5668;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.05s;
}
.project-pill:hover {
  border-color: #b8a3eb;
  color: #5b32b8;
}
.project-pill:active { transform: translateY(1px); }

.project-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #f1f3f8;
  color: #6b7585;
  font-size: 11px;
  font-weight: 700;
}

.project-pill.active {
  background: linear-gradient(135deg, #5b32b8, #7b3fd9);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(91, 50, 184, 0.28);
}
.project-pill.active .project-pill-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.project-pill-all.active {
  background: linear-gradient(135deg, #1f2a3a, #303d54);
  box-shadow: 0 4px 14px rgba(31, 42, 58, 0.28);
}

.project-pill-unassigned {
  border-style: dashed;
  border-color: #d8dde5;
  color: #8b95a8;
}
.project-pill-unassigned.active {
  background: linear-gradient(135deg, #6b7585, #8b95a8);
  border-style: solid;
  color: #fff;
}

.project-pill-add {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px dashed #d8dde5;
  background: transparent;
  color: #5b32b8;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.project-pill-add:hover {
  border-color: #5b32b8;
  background: rgba(91, 50, 184, 0.06);
  border-style: solid;
}

@media (max-width: 720px) {
  .project-pill-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .project-pill-bar-label { text-align: left; }
}

/* ──────────────────────────────────────────────────────────
   15 ── Email outreach — tabs + side-by-side compose + history
   ────────────────────────────────────────────────────────── */

/* Tabs nav */
.outreach-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  background: rgba(31, 20, 48, 0.62);
  border: 1px solid rgba(226, 210, 255, 0.16);
  border-radius: 12px;
  width: fit-content;
}

.outreach-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.outreach-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.outreach-tab.active {
  background: linear-gradient(135deg, rgba(143, 92, 255, 0.32), rgba(255, 61, 110, 0.22));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.outreach-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
}
.outreach-tab.active .outreach-tab-badge {
  background: rgba(255, 255, 255, 0.24);
}

.outreach-tab-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.outreach-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.outreach-pane[hidden] { display: none; }

/* ─── Compose split (中文 ↔ 翻译 左右排布) ─── */
.compose-panel { padding: 22px; }

.compose-split {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 6px;
}

.compose-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(226, 210, 255, 0.1);
  border-radius: 12px;
}
.compose-side-zh {
  background: rgba(255, 100, 100, 0.04);
  border-color: rgba(255, 100, 100, 0.18);
}
.compose-side-translated {
  background: rgba(100, 100, 255, 0.04);
  border-color: rgba(143, 92, 255, 0.22);
}

.compose-side-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 210, 255, 0.1);
}
.compose-side-label strong {
  font-size: 14px;
  color: #fff;
  font-weight: 700;
}
.compose-side-flag { font-size: 18px; }

.compose-language-select {
  margin-left: auto;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(226, 210, 255, 0.2) !important;
  background: rgba(12, 7, 20, 0.55) !important;
  color: var(--ink) !important;
}

.compose-translate-btn {
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8f5cff, #c14a9b);
  color: #fff;
  border: 0;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.05s, filter 0.12s;
  box-shadow: 0 4px 14px rgba(143, 92, 255, 0.32);
}
.compose-translate-btn:hover { filter: brightness(1.08); }
.compose-translate-btn:active { transform: translateY(1px); }

.compose-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compose-field span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.02em;
}
.compose-field input,
.compose-field textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(12, 7, 20, 0.65);
  border: 1px solid rgba(226, 210, 255, 0.14);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
}
.compose-field input:focus,
.compose-field textarea:focus {
  border-color: rgba(143, 92, 255, 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(143, 92, 255, 0.12);
}

.compose-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.compose-divider-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(143, 92, 255, 0.18);
  color: #c5b7ff;
  font-size: 18px;
  font-weight: 700;
  border: 1px solid rgba(143, 92, 255, 0.34);
}

.compose-translation-status {
  margin-top: 4px;
  font-size: 12px !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: center;
}

/* ─── Send panel (confirm + send button) ─── */
.send-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
}
.send-actions {
  justify-content: center;
}
.send-primary-btn {
  min-height: 44px !important;
  padding: 0 28px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
}

.send-from-field,
.send-interval-field {
  display: grid;
  gap: 7px;
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
}

.send-from-field span,
.send-interval-field span {
  color: #7d8798;
  font-size: 12px;
  font-weight: 900;
}

.send-from-field select,
.send-interval-field select {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 800;
}

.send-from-field small,
.send-interval-field small {
  font-size: 12px;
  line-height: 1.45;
}

.send-cc-archive-card {
  width: min(100%, 520px);
  margin: 0 auto;
}

.sender-settings-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: end;
  gap: 18px;
  margin: 14px 0 18px;
}

.sender-settings-toolbar .muted {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.sender-settings-dialog-card {
  width: min(1120px, calc(100vw - 36px));
  max-height: min(88vh, 920px);
  padding: 24px;
}

.sender-settings-dialog-card .sender-account-list {
  max-height: 58vh;
  overflow: auto;
  padding-right: 6px;
}

.sender-settings-dialog-card .dialog-actions {
  position: sticky;
  bottom: -24px;
  margin: 18px -24px -24px;
  padding: 16px 24px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface) 28%);
}

.active-sender-field,
.cc-archive-card {
  display: grid;
  gap: 8px;
}

.active-sender-field span,
.cc-archive-toggle span {
  color: #9f8bbf;
  font-size: 12px;
  font-weight: 900;
}

.active-sender-field select {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}

.sender-account-list {
  display: grid;
  gap: 16px;
}

.sender-account-card {
  padding: 18px;
  border: 1px solid #e8ddff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(117, 68, 215, 0.07), transparent 34%),
    linear-gradient(135deg, #fff, #fbf8ff);
  box-shadow: 0 8px 24px rgba(87, 59, 126, 0.05);
}

.sender-account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #efe7ff;
}

.sender-account-card-head strong {
  color: #1f2a3a;
  font-size: 16px;
  font-weight: 900;
}

.sender-account-card-head .ghost-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  white-space: nowrap;
}

.cc-archive-card {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #e8ddff;
  border-radius: 16px;
  background: #fbf8ff;
}

.cc-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.cc-archive-toggle input {
  width: 17px;
  height: 17px;
  accent-color: #7544d7;
}

.cc-archive-card > input {
  max-width: 420px;
}

.email-schedule-dialog-card {
  width: min(520px, calc(100vw - 36px));
}

.schedule-dialog-field {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.schedule-dialog-field span {
  color: #7d8798;
  font-size: 12px;
  font-weight: 900;
}

.schedule-dialog-field select {
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 850;
}

.recipients-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ─── Sent email history list ─── */
.sent-email-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sent-email-card {
  padding: 16px 18px;
  border: 1px solid rgba(226, 210, 255, 0.12);
  border-radius: 12px;
  background: rgba(31, 20, 48, 0.68);
}

.sent-email-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.sent-email-time {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sent-email-stats {
  display: inline-flex;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}
.sent-ok { color: #43d39e; }
.sent-fail { color: #ff8a8a; }

.sent-email-subject {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.sent-email-recipients {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sent-email-receipt {
  margin: 8px 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(143, 92, 255, 0.12);
  color: #cdbfff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.sent-email-body-toggle summary {
  cursor: pointer;
  font-size: 12px;
  color: #c5b7ff;
  padding: 6px 0;
  list-style: none;
}
.sent-email-body-toggle summary::-webkit-details-marker { display: none; }
.sent-email-body-toggle summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
.sent-email-body-toggle[open] summary::before {
  transform: rotate(90deg);
}

.sent-email-body {
  margin: 8px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
  color: #d8d2eb;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 13px;
}

/* Responsive: stack the compose split on narrow viewports */
@media (max-width: 980px) {
  .compose-split {
    grid-template-columns: 1fr;
  }
  .compose-divider {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}

/* ──────────────────────────────────────────────────────────
   16 ── Filter summary layout fix (网红名单)
   Old grid columns forced filters into a narrow 451px right column,
   causing dropdowns to stack vertically. Flexible row keeps them
   on one line and wraps gracefully on narrow viewports.
   ────────────────────────────────────────────────────────── */
#creators .filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
#creators .filter-summary > div:first-child {
  flex: 0 0 auto;
  min-width: 220px;
}
#creators .filter-summary .list-filters {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
#creators .filter-summary .list-filters select {
  flex: 0 1 auto;
  max-width: 180px;
}

/* ──────────────────────────────────────────────────────────
   17 ── Topbar compaction (#1)
   The H1 page title was clamp(28px, 4vw, 44px) and the eyebrow
   "INFLUENCE RELATIONSHIP MANAGEMENT" was repeated junk on every
   page, forcing users to scroll before reaching usable content.
   New compact bar: small inline title + action buttons, no eyebrow.
   ────────────────────────────────────────────────────────── */
.main > .topbar {
  padding: 12px 0 14px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(226, 210, 255, 0.08);
}

/* Hide the repeated eyebrow on every page header */
.main > .topbar .eyebrow { display: none; }

/* Inline the page title — small, calm, gets out of the way */
.main > .topbar h1 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  text-shadow: none;
  color: #d8d2eb;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Reduce the main padding so the content sits closer to the nav */
.main {
  padding-top: 20px;
}

/* ──────────────────────────────────────────────────────────
   18 ── Email outreach simplification (#2)
   User feedback: scrolling 102 creators to pick recipients is
   slow and clunky. Hide the recipients table + select-all/clear
   buttons. Keep only the manual email input as the recipient
   entry point. Make it bigger and more prominent.
   ────────────────────────────────────────────────────────── */
#outreach #emailRecipientTable,
#outreach .table-wrap,
#outreach .recipients-action-row,
#outreach #emailRecipientSummary {
  display: none !important;
}

/* Promote manual recipients to primary input — bigger, friendlier */
#outreach .manual-recipients-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
#outreach .manual-recipients-block > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
#outreach .manual-recipients-block textarea {
  min-height: 90px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────
   19 ── Contracts page tabs (#3)
   Split 自动生成合同模板 (form + preview) from 合同文件保存 (signed
   contract storage cards) into two tabs to make each easier to scan.
   Same tab visual language as the outreach tabs.
   ────────────────────────────────────────────────────────── */
.contracts-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  background: rgba(31, 20, 48, 0.62);
  border: 1px solid rgba(226, 210, 255, 0.16);
  border-radius: 12px;
  width: fit-content;
}
.contracts-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.contracts-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}
.contracts-tab.active {
  background: linear-gradient(135deg, rgba(143, 92, 255, 0.32), rgba(255, 61, 110, 0.22));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.contracts-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
}
.contracts-tab.active .contracts-tab-badge {
  background: rgba(255, 255, 255, 0.24);
}

.contracts-pane[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────
   20 ── White-theme overrides for ALL operation views
   网红搜索 / 网红名单 已经是白色卡片风格。其他视图
   (邮件外联 / 合作跟进 / 合同资料 / 发布排期 / 总览) 之前是深紫色，
   现在统一变成白色操作面板。侧栏和顶栏保留品牌深色。
   ────────────────────────────────────────────────────────── */

#outreach,
#pipeline,
#contracts,
#calendar,
#dashboard,
#attribution,
#similarity {
  color: #1f2a3a;
  padding: 0;
}

/* All workspace panels → white card */
#outreach .workspace-panel,
#pipeline .workspace-panel,
#pipeline .kanban-column,
#contracts .workspace-panel,
#calendar .workspace-panel,
#calendar .calendar-workspace,
#dashboard .workspace-panel,
#dashboard .metric-card,
#dashboard .database-banner,
#attribution .workspace-panel,
#similarity .workspace-panel {
  background: #fff;
  border: 1px solid #ecf0f6;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px rgba(15, 23, 42, 0.04);
  color: #1f2a3a;
  backdrop-filter: none;
}

/* The top gradient line over .metric-card / .workspace-panel still looks good — keep */

/* Headings + section labels → dark */
#outreach h2,
#outreach h3,
#outreach strong,
#pipeline h2,
#pipeline h3,
#pipeline strong,
#contracts h2,
#contracts h3,
#contracts strong,
#calendar h2,
#calendar h3,
#calendar strong,
#dashboard h2,
#dashboard h3,
#dashboard strong,
#attribution h2,
#attribution h3,
#attribution strong,
#similarity h2,
#similarity h3,
#similarity strong,
#outreach .compose-side-label strong {
  color: #1f2a3a;
}

#outreach .eyebrow,
#pipeline .eyebrow,
#contracts .eyebrow,
#calendar .eyebrow,
#dashboard .eyebrow,
#attribution .eyebrow,
#similarity .eyebrow,
#dashboard .metric-card span {
  color: #98a1b1;
  font-weight: 700;
}

#outreach .muted,
#pipeline .muted,
#contracts .muted,
#calendar .muted,
#dashboard .muted,
#attribution .muted,
#similarity .muted,
#outreach p:not(.eyebrow):not(.muted),
#contracts p:not(.eyebrow):not(.muted),
#dashboard p:not(.eyebrow):not(.muted),
#attribution p:not(.eyebrow):not(.muted) {
  color: #6b7585;
}

/* Form inputs across all converted views */
#outreach input,
#outreach select,
#outreach textarea,
#contracts input,
#contracts select,
#contracts textarea {
  background: #fff;
  border: 1px solid #e1e6ee;
  color: #1f2a3a;
  font-weight: 500;
  box-shadow: none;
}
#outreach input::placeholder,
#outreach textarea::placeholder,
#contracts input::placeholder,
#contracts textarea::placeholder {
  color: #b0b8c5;
}
#outreach input:focus,
#outreach select:focus,
#outreach textarea:focus,
#contracts input:focus,
#contracts select:focus,
#contracts textarea:focus {
  border-color: #5b32b8;
  box-shadow: 0 0 0 3px rgba(91, 50, 184, 0.12);
  outline: none;
}

/* ─── Outreach-specific overrides ─── */
#outreach .compose-side {
  background: #fbfbfd;
  border: 1px solid #e8ecf3;
}
#outreach .compose-side-zh {
  background: #fff5f5;
  border-color: #fad9d9;
}
#outreach .compose-side-translated {
  background: #f6f3ff;
  border-color: #d9cfeb;
}
#outreach .compose-side-label {
  border-bottom: 1px solid #e8ecf3;
}
#outreach .compose-side-label strong {
  color: #1f2a3a;
}
#outreach .compose-side-zh .compose-side-label {
  border-bottom-color: #fad9d9;
}
#outreach .compose-side-translated .compose-side-label {
  border-bottom-color: #d9cfeb;
}
#outreach .compose-divider-arrow {
  background: #f3eeff;
  color: #5b32b8;
  border: 1px solid #d9cfeb;
}
#outreach .compose-translation-status {
  color: #6b7585 !important;
  background: transparent !important;
}
#outreach .compose-language-select {
  background: #fff !important;
  color: #1f2a3a !important;
  border: 1px solid #e1e6ee !important;
}

/* Outreach tabs nav stays glossy-dark — looks good against white below */
#outreach .outreach-tabs {
  background: rgba(31, 20, 48, 0.7);
}

/* Outreach status pill colors */
#outreach .api-status {
  background: #f3f5fa;
  color: #6b7585;
  border-radius: 8px;
  padding: 8px 12px;
}
#outreach .api-status.error { background: #fff0f1; color: #d8364f; }
#outreach .api-status.success { background: #ebf9f3; color: #25a06c; }

/* Ghost & text buttons on white surfaces need dark ink */
#outreach .ghost-button,
#contracts .ghost-button {
  background: #f3f5fa;
  border: 1px solid #e1e6ee;
  color: #1f2a3a;
  font-weight: 600;
}
#outreach .ghost-button:hover,
#contracts .ghost-button:hover {
  background: #e9edf4;
  border-color: #b8a3eb;
}
#outreach .text-button,
#contracts .text-button {
  color: #5b32b8;
  background: transparent;
}
#outreach .text-button:hover,
#contracts .text-button:hover {
  background: rgba(91, 50, 184, 0.06);
}

/* Sent email cards */
#outreach .sent-email-card {
  background: #fff;
  border: 1px solid #ecf0f6;
}
#outreach .sent-email-subject { color: #1f2a3a; }
#outreach .sent-email-recipients { color: #6b7585; }
#outreach .sent-email-time { color: #98a1b1; }
#outreach .sent-email-receipt {
  background: #f3edff;
  color: #6842bd;
}
#outreach .sent-email-body {
  background: #fafbfd;
  color: #4b5668;
  border: 1px solid #ecf0f6;
}
#outreach .empty-state { color: #98a1b1; }

/* ─── Contracts-specific overrides ─── */
#contracts .contract-form-panel {
  background: #fafbfd;
  border: 1px solid #ecf0f6;
  border-radius: 12px;
  padding: 18px;
}

#contracts .contract-template-output {
  background:
    radial-gradient(circle at 12% 0, rgba(117, 68, 215, 0.09), transparent 34%),
    #f8f6fc;
  border: 1px solid #e9e0f7;
  color: #1f2a3a;
}

#contracts .contract-template-note {
  grid-column: 1 / -1;
  overflow: hidden;
  margin-top: 8px;
  color: #6f7890;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contracts .contract-card {
  background: #fff;
  border: 1px solid #ecf0f6;
  color: #1f2a3a;
}
#contracts .contract-card.is-signed {
  border-color: #b6e5cb;
  background: linear-gradient(180deg, #f3fbf7, #fff);
  box-shadow: 0 0 0 1px rgba(67, 161, 118, 0.16) inset;
}
#contracts .contract-card-title .creator-link,
#contracts .contract-card-title strong {
  color: #1f2a3a;
}
#contracts .contract-meta {
  color: #6b7585;
}
#contracts .contract-meta strong {
  color: #4b5668;
}
#contracts .contract-file-row {
  background: #fafbfd;
  border-color: #e1e6ee;
}
#contracts .contract-card.is-signed .contract-file-row {
  background: #ebf9f3;
  border-color: #b6e5cb;
}
#contracts .contract-upload-btn {
  background: #f3eeff;
  border: 1px solid #d9cfeb;
  color: #5b32b8;
}
#contracts .contract-upload-btn:hover {
  background: #e8e0fc;
  border-color: #5b32b8;
}
#contracts .contract-filename { color: #6b7585; }
#contracts .contract-card.is-signed .contract-filename { color: #25a06c; }
#contracts .contract-signed-badge {
  background: #ebf9f3;
  color: #25a06c;
  border-color: #b6e5cb;
}
#contracts .contract-pending-badge {
  background: #fff7e6;
  color: #b67a00;
  border-color: #ffd980;
}

/* ─── Pipeline (Kanban) overrides ─── */
#pipeline .kanban-column {
  padding: 16px 14px;
  border-radius: 14px;
}
#pipeline .kanban-column h2 {
  color: #4b5668;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ecf0f6;
}
#pipeline .creator-card {
  background: #fafbfd;
  border: 1px solid #ecf0f6;
  color: #1f2a3a;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
}
#pipeline .creator-card strong {
  color: #1f2a3a;
  font-size: 13.5px;
}
#pipeline .creator-card p {
  color: #6b7585;
  font-size: 12px;
  margin: 4px 0;
}
#pipeline .creator-card .card-actions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
}
#pipeline .creator-card .ghost-button {
  background: #fff;
  border: 1px solid #e1e6ee;
  color: #6b7585;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  min-height: auto;
}
#pipeline .creator-card .ghost-button:hover { color: #1f2a3a; border-color: #b8a3eb; }
#pipeline .creator-card .primary-button {
  font-size: 11px;
  padding: 5px 10px;
  min-height: auto;
}
#pipeline .creator-card .star-disp { font-size: 12px; }

/* ─── Calendar overrides ─── */
#calendar {
  color: #1f2a3a;
}
#calendar .calendar-workspace { padding: 22px; border-radius: 16px; }
#calendar .calendar-toolbar h2 { color: #1f2a3a; }
#calendar .calendar-toolbar button {
  background: #f3f5fa;
  border: 1px solid #e1e6ee;
  color: #1f2a3a;
}
#calendar .calendar-toolbar button:hover { background: #e9edf4; }
#calendar .calendar-grid,
#calendar .calendar-day {
  border-color: #ecf0f6;
}
#calendar .calendar-weekday {
  color: #98a1b1;
  font-weight: 700;
}
#calendar .calendar-day {
  background: #fff;
  color: #4b5668;
}
#calendar .calendar-day.is-today {
  background: #ebf9f3;
  color: #25a06c;
}
#calendar .calendar-event {
  background: #f3eeff;
  color: #5b32b8;
  border: 1px solid #d9cfeb;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
}

/* ─── Dashboard overrides ─── */
#dashboard .metric-card {
  padding: 18px 20px;
}
#dashboard .metric-card strong {
  color: #1f2a3a;
  font-size: 28px;
}
#dashboard .metric-card span {
  color: #98a1b1;
}
#dashboard .workspace-panel { padding: 20px; }
#dashboard .bar-row span:first-child { color: #4b5668; font-weight: 600; }
#dashboard .bar-row strong { color: #1f2a3a; }
#dashboard .bar { background: #f1f3f8; }
#dashboard .stage-pill {
  background: #fafbfd;
  border: 1px solid #ecf0f6;
  color: #4b5668;
}
#dashboard .stage-pill strong { color: #1f2a3a; }
#dashboard .risk-item {
  background: #fff;
  border: 1px solid #ecf0f6;
  color: #1f2a3a;
}
#dashboard .risk-item strong { color: #1f2a3a; }
#dashboard .risk-item p { color: #6b7585; }
#dashboard .legend-row span { color: #4b5668; }
#dashboard .legend-row strong { color: #1f2a3a; }

/* Outreach tabs label colors should still pop on the dark tab strip */
.outreach-tab { color: #a99abf; }
.outreach-tab.active { color: #fff; }

/* Contracts tabs same treatment */
.contracts-tab { color: #a99abf; }
.contracts-tab.active { color: #fff; }

/* ──────────────────────────────────────────────────────────
   21 ── Pipeline progress bar (合作跟进 顶部进度条)
   Horizontal chevron-style steps with arrows between them.
   The step with the most in-progress creators gets highlighted.
   ────────────────────────────────────────────────────────── */
.pipeline-progress-panel {
  padding: 18px 22px;
  margin-bottom: 14px;
}
.pipeline-progress-panel .eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #98a1b1;
}

.pipeline-progress {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pipeline-step {
  flex: 1;
  min-width: 110px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  padding: 10px 12px;
  background: #fafbfd;
  border: 1px solid #ecf0f6;
  border-radius: 10px;
  color: #6b7585;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pipeline-step-index {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ecf0f6;
  color: #98a1b1;
  font-size: 12px;
  font-weight: 700;
}
.pipeline-step-label {
  font-size: 13px;
  font-weight: 700;
  color: #1f2a3a;
}
.pipeline-step-count {
  grid-column: 3;
  grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: #1f2a3a;
  text-align: right;
}
.pipeline-step-pct {
  grid-column: 2 / span 2;
  grid-row: 2;
  font-size: 11px;
  color: #98a1b1;
  font-weight: 600;
}

.pipeline-step.is-active {
  background: linear-gradient(135deg, #f6f3ff, #fff5f8);
  border-color: #b8a3eb;
  box-shadow: 0 4px 14px rgba(91, 50, 184, 0.12);
}
.pipeline-step.is-active .pipeline-step-index {
  background: linear-gradient(135deg, #5b32b8, #c14a9b);
  color: #fff;
  border-color: transparent;
}
.pipeline-step.is-active .pipeline-step-label,
.pipeline-step.is-active .pipeline-step-count { color: #5b32b8; }

.pipeline-step.is-complete {
  background: linear-gradient(135deg, #ebf9f3, #fff);
  border-color: #b6e5cb;
}
.pipeline-step.is-complete .pipeline-step-index {
  background: #25a06c;
  color: #fff;
  border-color: transparent;
}
.pipeline-step.is-complete .pipeline-step-label { color: #1f2a3a; }
.pipeline-step.is-complete .pipeline-step-count { color: #25a06c; }

.pipeline-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  color: #cfd5e0;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}

@media (max-width: 980px) {
  .pipeline-progress { gap: 4px; }
  .pipeline-step { min-width: 96px; padding: 8px 10px; }
  .pipeline-step-label { font-size: 12px; }
  .pipeline-arrow { width: 14px; font-size: 14px; }
}

/* ──────────────────────────────────────────────────────────
   22 ── Contract storage search box
   ────────────────────────────────────────────────────────── */
.contract-search-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 14px;
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 999px;
  min-width: 280px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.contract-search-box:focus-within {
  border-color: #5b32b8;
  box-shadow: 0 0 0 3px rgba(91, 50, 184, 0.12);
}
.contract-search-icon {
  font-size: 13px;
  opacity: 0.6;
}
.contract-search-box input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  outline: none;
  padding: 6px 0 !important;
  font-size: 13.5px;
  color: #1f2a3a;
  box-shadow: none !important;
}
.contract-search-box input::placeholder {
  color: #b0b8c5;
}

/* ──────────────────────────────────────────────────────────
   23 ── Project pill bar — scaling for many projects
   When you have 10+ active projects, the wrap gets unwieldy.
   New behaviour: pill bar scrolls horizontally with a soft
   right-edge fade, "+ 新建项目" stays sticky at the right.
   ────────────────────────────────────────────────────────── */
.project-pill-bar {
  flex-wrap: nowrap;
  position: relative;
  align-items: stretch;
}

.project-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #d8dde5 transparent;
  padding: 2px 4px 6px 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%);
}
.project-pills::-webkit-scrollbar { height: 6px; }
.project-pills::-webkit-scrollbar-track { background: transparent; }
.project-pills::-webkit-scrollbar-thumb {
  background: #d8dde5;
  border-radius: 3px;
}
.project-pills::-webkit-scrollbar-thumb:hover { background: #b8c1d1; }

.project-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

.project-pill-add {
  flex-shrink: 0;
  align-self: center;
  margin-left: 4px;
}

/* Mobile / narrow viewport */
@media (max-width: 720px) {
  .project-pill-bar {
    flex-direction: column;
  }
  .project-pills {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ──────────────────────────────────────────────────────────
   24 ── Remove purple gradient strip on top of panels
   The 2px violet→red gradient line at the top of every .metric-card,
   .database-banner and .workspace-panel looked heavy and dated.
   Users felt it was visual noise. Disable it everywhere.
   ────────────────────────────────────────────────────────── */
.metric-card::before,
.database-banner::before,
.workspace-panel::before {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────
   25 ── Simplify pipeline "progress bar" to a single arrow strip
   Old: 7 chevron boxes with numbers/counts/percentages — too busy.
   New: one slim row with stage names separated by ›, no boxes.
   The kanban columns below already show counts; the arrow strip
   just clarifies workflow direction at a glance.
   ────────────────────────────────────────────────────────── */
.pipeline-progress-panel {
  padding: 14px 22px;
  margin-bottom: 14px;
}
.pipeline-progress-panel .eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #98a1b1;
}

.pipeline-campaign-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pipeline-campaign-head h2 {
  margin: 4px 0 0;
  color: #1f2a3a;
  font-size: 22px;
}

.pipeline-campaign-filter {
  min-width: 260px;
}

.pipeline-campaign-filter span {
  display: block;
  margin-bottom: 6px;
  color: #8d95a5;
  font-size: 12px;
  font-weight: 800;
}

.pipeline-progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  overflow: visible;
}

/* Slim stage label — just text, no card */
.pipeline-step {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #6b7585;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s;
  min-width: 0;
  box-shadow: none;
}

.pipeline-step-index,
.pipeline-step-count,
.pipeline-step-pct {
  display: none !important;
}

.pipeline-step-label {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

.pipeline-step.is-active {
  background: transparent;
  box-shadow: none;
  border: 0;
  color: #5b32b8;
}
.pipeline-step.is-active .pipeline-step-label {
  color: #5b32b8;
  font-weight: 700;
}

.pipeline-step.is-complete {
  background: transparent;
  border: 0;
}
.pipeline-step.is-complete .pipeline-step-label { color: #25a06c; }

.pipeline-arrow {
  display: inline-grid;
  place-items: center;
  width: 14px;
  color: #cfd5e0;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  user-select: none;
}

/* ──────────────────────────────────────────────────────────
   26 ── Remove the thick right-edge shadow on the Kanban
   The 56px dark gradient on top of #pipeline::after was meant
   as a horizontal-scroll hint but looked like an ugly shadow.
   Disable it — the natural horizontal scrollbar is enough.
   ────────────────────────────────────────────────────────── */
#pipeline::after { display: none !important; }

/* ──────────────────────────────────────────────────────────
   32 ── Login page · Plan B — minimal centered (Linear-style)
   ZEN-mode: one big centered white card, two halves inside.
   Restrained typography, soft greys, single accent gradient.
   ────────────────────────────────────────────────────────── */
.login-body-minimal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-items: stretch;
  place-items: stretch;
  min-height: 100vh;
  padding: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(143, 92, 255, 0.05), transparent 38%),
    #fafafb;
  color: #18181b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.lm-login {
  width: 100%;
  max-width: 320px;
}
.lm-login-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #98a1b1;
}
.lm-login-title {
  margin: 8px 0 24px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #18181b;
}

.lm-form {
  display: grid;
  gap: 14px;
  margin: 0;
}
.lm-form label {
  display: grid;
  gap: 6px;
}
.lm-form label > span {
  font-size: 12px;
  font-weight: 700;
  color: #52525b;
  letter-spacing: 0;
}
.lm-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  color: #18181b;
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.12s, box-shadow 0.12s;
  font-family: inherit;
}
.lm-form input::placeholder { color: #a1a1aa; }
.lm-form input:hover { border-color: #c4c4c8; }
.lm-form input:focus {
  border-color: #5b32b8;
  box-shadow: 0 0 0 4px rgba(91, 50, 184, 0.1);
  outline: none;
}

.lm-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  background: linear-gradient(110deg, #5b32b8 0%, #c14a9b 100%);
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(91, 50, 184, 0.22);
  transition: filter 0.12s, transform 0.05s;
  font-family: inherit;
}
.lm-submit:hover { filter: brightness(1.06); }
.lm-submit:active { transform: translateY(1px); }

.lm-msg {
  margin: 0;
  min-height: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.lm-msg.is-loading { color: #5b32b8; }
.lm-msg.is-error { color: #dc2626; }
.lm-msg.is-success { color: #16a34a; }

.lm-terms {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  color: #a1a1aa;
  line-height: 1.8;
}
.lm-terms a {
  color: #5b32b8;
  text-decoration: none;
  font-weight: 600;
}
.lm-terms a:hover { text-decoration: underline; }

/* ─── Footer (slim) ─── */
.lm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  background: #fff;
  border-top: 1px solid #ececef;
  font-size: 12px;
  color: #a1a1aa;
  flex-shrink: 0;
}
.lm-trust {
  display: flex;
  gap: 22px;
}
.lm-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #52525b;
  font-weight: 600;
}
.lm-trust .check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  font-size: 10px;
  font-weight: 800;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .lm-footer { flex-direction: column; gap: 8px; padding: 14px 20px; text-align: center; }
  .lm-trust { flex-wrap: wrap; justify-content: center; }
}

/* Login page: full-height editorial split layout */
.login-body-minimal {
  min-height: 100svh;
  overflow: hidden;
  background: #f8f7fb;
}

.login-body-minimal .lm-main {
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(420px, 0.72fr);
  place-items: stretch;
  padding: 0;
}

.lm-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #f2eef6;
}

.lm-hero-stage {
  position: absolute;
  top: 7%;
  left: 14%;
  width: 72%;
  aspect-ratio: 1;
}

.lm-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  opacity: 0.94;
  filter: saturate(0.92) contrast(0.96) brightness(1.025);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

.lm-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(27, 13, 49, 0.57) 0%, transparent 33%);
  pointer-events: none;
}

.lm-visual-brand {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 42px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-shadow: 0 1px 18px rgba(17, 6, 37, 0.42);
}

.lm-visual-brand img {
  width: 72px;
  height: 38px;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lm-visual-brand strong,
.lm-visual-brand span {
  display: block;
}

.lm-visual-brand strong {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.lm-visual-brand span {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.82;
}

.lm-visual-copy {
  position: absolute;
  z-index: 2;
  left: 46px;
  bottom: 42px;
  color: #fff;
}

.lm-visual-copy p {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.78;
}

.lm-visual-copy h1 {
  margin: 0;
  min-height: 1.2em;
  max-width: 760px;
  font-size: clamp(40px, 4.1vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-shadow: 0 4px 28px rgba(18, 8, 38, 0.4);
}

.lm-typing-text::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #d7b8ff);
  box-shadow: 0 0 14px rgba(222, 193, 255, 0.72);
  vertical-align: -0.05em;
  animation: lm-caret-blink 0.82s steps(1, end) infinite;
}

@keyframes lm-caret-blink {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

.lm-panel {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 52px clamp(42px, 5vw, 82px) 96px;
  background:
    radial-gradient(circle at 100% 0%, rgba(143, 92, 255, 0.11), transparent 32%),
    #fff;
}

.lm-panel .lm-login {
  width: 100%;
  max-width: 410px;
  margin: auto;
}

.lm-mobile-brand {
  display: none;
}

.lm-panel .lm-login-eyebrow {
  color: #7c5ac8;
  letter-spacing: 0.18em;
}

.lm-panel .lm-login-title {
  margin: 10px 0 8px;
  color: #181322;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.lm-login-intro {
  margin: 0 0 34px;
  color: #77717f;
  font-size: 14px;
  line-height: 1.6;
}

.lm-panel .lm-form {
  gap: 18px;
}

.lm-panel .lm-form label {
  gap: 9px;
}

.lm-panel .lm-form label > span {
  color: #37313e;
  font-size: 13px;
}

.lm-panel .lm-form input {
  min-height: 52px;
  padding: 0 16px;
  border-color: #ded9e6;
  border-radius: 12px;
  font-size: 14px;
}

.lm-panel .lm-form input:focus {
  border-color: #7a45d1;
  box-shadow: 0 0 0 4px rgba(122, 69, 209, 0.11);
}

.lm-panel .lm-submit {
  min-height: 52px;
  margin-top: 2px;
  border-radius: 12px;
  background: linear-gradient(110deg, #6632c7 0%, #9a3ddb 52%, #d548a7 100%);
  font-size: 15px;
  box-shadow: 0 12px 28px rgba(106, 49, 194, 0.24);
}

.lm-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding: 15px 16px;
  border: 1px solid #ebe7f0;
  border-radius: 12px;
  background: #faf9fc;
  color: #77717f;
  font-size: 12px;
}

.lm-support a,
.lm-panel .lm-terms a {
  color: #6836bc;
  font-weight: 750;
  text-decoration: none;
}

.lm-support a {
  flex-shrink: 0;
}

.lm-support a:hover,
.lm-panel .lm-terms a:hover {
  text-decoration: underline;
}

.lm-panel .lm-terms {
  margin-top: 18px;
  color: #aaa4b0;
}

.lm-panel .lm-footer {
  position: absolute;
  right: clamp(32px, 4vw, 64px);
  bottom: 24px;
  left: clamp(32px, 4vw, 64px);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 10px;
}

.lm-panel .lm-trust {
  gap: 15px;
}

.lm-panel .lm-trust > span {
  position: relative;
  color: #817b87;
  font-size: 10px;
  font-weight: 650;
}

.lm-panel .lm-trust > span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #43b77a;
  box-shadow: 0 0 0 3px rgba(67, 183, 122, 0.11);
}

@media (max-width: 1020px) {
  .login-body-minimal {
    overflow: auto;
  }

  .login-body-minimal .lm-main {
    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1.1fr);
  }

  .lm-hero-stage {
    top: 8%;
    left: 8%;
    width: 84%;
  }

  .lm-visual-copy {
    left: 30px;
  }

  .lm-visual-brand {
    left: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-typing-text::after {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .login-body-minimal .lm-main {
    min-height: 100svh;
    grid-template-columns: 1fr;
  }

  .lm-visual {
    display: none;
  }

  .lm-panel {
    min-height: 100svh;
    padding: 48px 24px 112px;
  }

  .lm-mobile-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 58px;
    color: #181322;
    font-size: 14px;
  }

  .lm-mobile-brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    padding: 4px;
    border: 1px solid #ebe7f0;
    border-radius: 12px;
    background: #fff;
  }

  .lm-panel .lm-footer {
    align-items: center;
    gap: 11px;
  }
}

/* Search workspace: compact first screen with the Zerendo assistant. */
#discovery.view {
  margin-top: 12px;
}

#discovery .discovery-shell {
  min-height: calc(100vh - 102px);
  padding: 18px clamp(18px, 3vw, 42px) 28px;
}

#discovery .smart-search-panel {
  max-width: 1180px;
  margin-bottom: 18px;
  text-align: left;
}

.smart-search-hero {
  margin-bottom: 10px;
}

.smart-search-copy .eyebrow {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: 0.16em;
}

#discovery .smart-search-copy h2 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
}

.smart-search-copy > p:last-child {
  margin: 8px 0 0;
  color: #8995aa;
  font-size: 14px;
  font-weight: 700;
}

#discovery .platform-tabs {
  display: flex;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 14px;
}

#discovery .platform-choice {
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
}

#discovery .platform-icon {
  width: 22px;
  height: 22px;
}

#discovery .smart-filter-grid {
  margin-top: 0;
  margin-bottom: 10px;
}

.ai-mode-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
  margin-top: -2px;
}

.zerendo-mode-assistant {
  position: relative;
  display: flex;
  align-items: center;
  width: 178px;
  height: 62px;
  flex: 0 0 178px;
  padding-left: 70px;
  border: 1px solid rgba(117, 68, 215, 0.14);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239, 248, 255, 0.88), rgba(248, 241, 255, 0.92));
}

.zerendo-mode-assistant img {
  position: absolute;
  left: -9px;
  bottom: 0;
  width: 84px;
  height: 84px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 10px rgba(44, 31, 75, 0.14));
}

.zerendo-mode-assistant span {
  color: #685b7c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

#discovery .ai-mode-toggle {
  margin: 0 0 7px;
  flex: 0 0 auto;
}

#discovery .ai-search-box {
  min-height: auto;
  margin-top: 0;
  padding: 8px;
  border-radius: 14px;
}

@media (max-width: 900px) {
  .zerendo-mode-assistant {
    width: 150px;
    flex-basis: 150px;
    padding-left: 62px;
  }

  .zerendo-mode-assistant img {
    width: 74px;
    height: 74px;
  }
}

@media (max-width: 640px) {
  #discovery .discovery-shell {
    padding: 16px;
  }

  #discovery .platform-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .ai-mode-row {
    align-items: center;
    gap: 8px;
  }

  .zerendo-mode-assistant {
    width: 74px;
    flex-basis: 74px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .zerendo-mode-assistant img {
    left: 0;
  }

  .zerendo-mode-assistant span {
    display: none;
  }
}

/* Login password visibility and trusted-device persistence controls. */
.lm-password-field {
  position: relative;
  display: block;
}

.lm-panel .lm-form .lm-password-field input {
  padding-right: 52px;
}

.lm-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #827a8c;
  cursor: pointer;
}

.lm-password-toggle:hover {
  color: #6736c5;
  background: #f4effc;
}

.lm-password-toggle:focus-visible {
  outline: 3px solid rgba(122, 69, 209, 0.18);
}

.lm-password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lm-password-toggle .lm-eye-hide,
.lm-password-toggle.is-visible .lm-eye-show {
  display: none;
}

.lm-password-toggle.is-visible .lm-eye-hide {
  display: block;
}

.lm-panel .lm-form .lm-remember-row {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 9px;
  margin-top: -7px;
  cursor: pointer;
}

.lm-panel .lm-form .lm-remember-row input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: #7340cc;
  box-shadow: none;
}

.lm-panel .lm-form .lm-remember-row > span {
  color: #746d7c;
  font-size: 12px;
  font-weight: 600;
}

/* Zerendo search lifecycle: loading analysis and useful empty results. */
.zerendo-search-state {
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 12px 24px 12px 10px;
  overflow: hidden;
  border: 1px solid rgba(124, 90, 200, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 22%, rgba(81, 190, 255, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 242, 255, 0.94));
  text-align: left;
}

.zerendo-state-visual {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 108px;
  place-items: end center;
}

.zerendo-state-visual img {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 118px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 18px rgba(42, 29, 76, 0.14));
}

.zerendo-state-copy > span:first-child {
  display: block;
  margin-bottom: 6px;
  color: #7544d7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.zerendo-state-copy h4 {
  margin: 0;
  color: #202a3f;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.35;
}

.zerendo-state-copy p {
  margin: 8px 0 0;
  color: #7d8799;
  font-size: 13px;
  line-height: 1.55;
}

.zerendo-search-state.is-loading .zerendo-state-visual img {
  animation: zerendo-analysis-float 2.2s ease-in-out infinite;
}

.zerendo-scan-ring {
  position: absolute;
  inset: 18px 8px 5px;
  border: 1px solid rgba(82, 191, 255, 0.32);
  border-radius: 50%;
  animation: zerendo-scan-pulse 1.8s ease-out infinite;
}

.zerendo-loading-dots {
  display: flex;
  gap: 5px;
  margin-top: 14px;
}

.zerendo-loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7544d7;
  animation: zerendo-dot 1.1s ease-in-out infinite;
}

.zerendo-loading-dots i:nth-child(2) { animation-delay: 0.16s; }
.zerendo-loading-dots i:nth-child(3) { animation-delay: 0.32s; }

.zerendo-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.zerendo-suggestion-actions button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(117, 68, 215, 0.2);
  border-radius: 999px;
  background: #fff;
  color: #6637bd;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.zerendo-suggestion-actions button:hover {
  border-color: #7544d7;
  background: #f4effd;
  transform: translateY(-1px);
}

#discovery .primary-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

@keyframes zerendo-analysis-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes zerendo-scan-pulse {
  0% { opacity: 0.2; transform: scale(0.82); }
  70% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes zerendo-dot {
  0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .zerendo-search-state.is-loading .zerendo-state-visual img,
  .zerendo-scan-ring,
  .zerendo-loading-dots i {
    animation: none;
  }
}

.library-search-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(117, 68, 215, 0.14);
  border-radius: 16px;
  background: rgba(250, 248, 253, 0.92);
  text-align: left;
}

.library-search-panel[hidden] {
  display: none;
}

.library-search-panel .section-heading {
  margin-bottom: 0;
}

.section-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.library-search-panel .section-heading h3 {
  margin: 3px 0 0;
  color: #202a3f;
  font-size: 16px;
}

.library-search-panel .section-actions span {
  color: #8b95a8;
  font-size: 11px;
}

.library-search-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

#discovery .library-result-card {
  flex: 0 0 min(330px, 88vw);
  scroll-snap-align: start;
  padding: 14px;
  border: 1px solid rgba(117, 68, 215, 0.18);
  border-radius: 12px;
  border-color: rgba(117, 68, 215, 0.18);
  background:
    linear-gradient(135deg, rgba(250, 247, 255, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 10px 24px rgba(61, 42, 91, 0.07);
}

.library-search-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  color: #7d8799;
  font-size: 12px;
}

.library-match-badge {
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: #eee7fb;
  color: #6736bd;
  font-size: 10px;
  font-weight: 900;
}

#similarity .similarity-page-panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px;
  border-color: rgba(226, 216, 255, 0.78);
  background:
    radial-gradient(circle at 12% 8%, rgba(229, 63, 154, 0.06), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(116, 56, 222, 0.09), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
  box-shadow: 0 24px 70px rgba(45, 34, 78, 0.16);
}

#similarity .section-heading {
  justify-content: flex-end;
  min-height: 0;
  margin-bottom: -6px;
}

#similarity .section-heading p:not(.eyebrow) {
  margin-top: 6px;
  color: #718096;
  font-size: 14px;
}

.zerendo-page-guide {
  position: relative;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  margin: 54px 0 22px;
  padding: 18px 24px 18px 12px;
  overflow: visible;
  border: 1px solid rgba(207, 190, 255, 0.55);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 10%, rgba(219, 236, 255, 0.58), transparent 24%),
    linear-gradient(135deg, #fcfbff 0%, #f8f3ff 100%);
  box-shadow: 0 12px 28px rgba(93, 63, 156, 0.08);
}

.zerendo-page-guide img {
  position: relative;
  width: 154px;
  height: 154px;
  margin: -72px 0 -26px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 18px rgba(44, 31, 75, 0.16));
}

.zerendo-page-guide div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.zerendo-page-guide strong,
.zerendo-page-guide span {
  display: block;
  max-width: none;
}

.zerendo-page-guide strong {
  color: #172033;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.zerendo-page-guide span {
  color: #687386;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
}

#similarity .similarity-controls {
  grid-template-columns: 160px minmax(260px, 1fr) minmax(360px, 1.08fr) 170px;
  align-items: start;
  gap: 14px;
  margin-top: 14px;
  padding: 18px 22px 20px;
  border: 1px solid #e6def8;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0, rgba(117, 68, 215, 0.08), transparent 30%),
    #fbf9ff;
}

#similarity .similarity-controls label {
  min-width: 0;
  gap: 8px;
}

#similarity .similarity-controls label > span {
  display: flex;
  min-height: 16px;
  align-items: center;
  color: #8a819b;
  font-size: 12px;
  font-weight: 900;
}

#similarity .similarity-controls input,
#similarity .similarity-controls select {
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #dfe5ef;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.04);
}

#similarity .similarity-controls input::placeholder {
  color: #a99fc1;
}

#similarity .similarity-controls .primary-button {
  align-self: start;
  height: 48px;
  min-height: 48px;
  margin-top: 24px;
  border-radius: 12px;
}

.reference-match-status {
  display: block;
  margin-top: 7px;
  color: #8a819b;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

@media (max-width: 980px) {
  #similarity .similarity-controls {
    grid-template-columns: 1fr 1fr;
  }

  #similarity .similarity-controls .primary-button {
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  #similarity .similarity-controls {
    grid-template-columns: 1fr;
  }

  #similarity .similarity-controls .primary-button {
    margin-top: 0;
  }
}

#similarity .similar-results {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

#similarity .similar-card {
  border-color: #e0e5ed;
  border-radius: 16px;
  background: #fff;
  color: #172033;
  box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06);
}

#similarity .similar-card strong {
  color: #172033;
}

#similarity .similar-card p,
#similarity .similar-card small {
  color: #667085;
}

#similarity .similar-card span {
  color: #7040ce;
}

.favorites-page-panel {
  min-height: calc(100vh - 160px);
  padding: 28px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 8%, rgba(229, 63, 154, 0.08), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(116, 56, 222, 0.12), transparent 32%),
    linear-gradient(180deg, #fff, #fbf8ff);
}

#favorites .section-heading p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 8px;
  color: #738196;
  line-height: 1.6;
}

.favorites-guide {
  margin-top: 14px;
  margin-left: 0;
}

.favorites-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #e7def9;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 38px rgba(116, 56, 222, 0.08);
}

.favorites-controls label,
.favorite-status {
  display: grid;
  gap: 8px;
  color: #7b8698;
  font-size: 12px;
  font-weight: 900;
}

.favorites-controls select,
.favorite-status select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dfe5ef;
  border-radius: 14px;
  background: #fff;
  color: #172033;
  font: inherit;
  font-weight: 800;
  padding: 0 14px;
}

.favorites-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.favorites-summary article {
  padding: 16px;
  border: 1px solid #eadffd;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(116, 56, 222, 0.08), transparent 34%),
    #fff;
}

.favorites-summary span,
.favorites-summary small {
  display: block;
  color: #8a95a7;
  font-size: 12px;
  font-weight: 900;
}

.favorites-summary strong {
  display: block;
  margin: 5px 0 3px;
  color: #172033;
  font-size: 30px;
  line-height: 1;
}

.favorites-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #e5eaf2;
  border-radius: 20px;
  background: #fff;
}

.favorite-card {
  display: grid;
  grid-template-columns: 32px minmax(250px, 380px) minmax(420px, 1fr) 180px;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #e8ecf3;
  background: #fff;
}

.favorite-card:last-child {
  border-bottom: 0;
}

.favorite-card.online {
  background: #fff;
}

.favorite-row-select {
  width: 18px;
  height: 18px;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  background: #fff;
}

.favorite-profile-panel {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: #f7f8fb;
}

.favorite-profile-panel .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.favorite-profile-copy {
  min-width: 0;
}

.favorite-profile-copy strong,
.favorite-profile-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-profile-copy strong {
  color: #172033;
  font-size: 18px;
}

.favorite-profile-copy > span {
  margin-top: 4px;
  color: #7c8798;
  font-size: 13px;
  font-weight: 800;
}

.favorite-profile-tags {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.favorite-profile-tags > span:not(.platform-chip) {
  width: auto;
  max-width: 92px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff;
  color: #566174;
  font-size: 11px;
  font-weight: 900;
}

.favorite-main-panel {
  min-width: 0;
}

.favorite-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.favorite-row-head div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.favorite-row-head strong,
.favorite-row-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-row-head strong {
  color: #172033;
  font-size: 16px;
}

.favorite-row-head small {
  color: #8a95a7;
  font-size: 12px;
  font-weight: 900;
}

.favorite-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.favorite-source-badge.library {
  background: #efe7ff;
  color: #7040ce;
}

.favorite-source-badge.online {
  background: #ffe5f1;
  color: #d92d7d;
}

.creator-media-strip {
  display: grid;
  grid-template-columns: repeat(6, 72px);
  gap: 10px;
  min-width: 0;
}

.creator-media-thumb-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 96px;
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 10px;
  background: #f2f4f8;
  color: #9aa5b6;
  font-size: 11px;
  font-weight: 900;
}

.creator-media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-media-thumb-wrap.is-empty {
  background: repeating-linear-gradient(135deg, #f7f8fb, #f7f8fb 7px, #eef2f7 7px, #eef2f7 14px);
}

.live-result-card .creator-media-strip {
  grid-template-columns: repeat(6, minmax(54px, 1fr));
}

.live-result-card .creator-media-thumb-wrap {
  width: 100%;
  height: 86px;
}

.favorite-quick-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.favorite-quick-metrics span {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
}

.favorite-quick-metrics strong,
.favorite-quick-metrics small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-quick-metrics strong {
  color: #172033;
  font-size: 13px;
}

.favorite-quick-metrics small {
  margin-top: 2px;
  color: #8a95a7;
  font-size: 10px;
  font-weight: 900;
}

.favorite-side-actions {
  display: grid;
  gap: 12px;
}

.favorite-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.favorite-meta-grid span {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #edf0f7;
  border-radius: 14px;
  background: #fbfcff;
}

.favorite-meta-grid strong,
.favorite-meta-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-meta-grid strong {
  color: #172033;
  font-size: 14px;
}

.favorite-meta-grid small {
  margin-top: 3px;
  color: #8a95a7;
  font-size: 11px;
  font-weight: 900;
}

.favorite-reason {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.favorite-actions {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  padding-top: 2px;
}

.text-button.danger {
  color: #d92d7d;
}

.favorites-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 24px;
  text-align: center;
  border: 1px solid #e4daf9;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(196, 224, 255, 0.5), transparent 32%),
    #fbf8ff;
}

.favorites-empty h3 {
  margin: 0 0 8px;
  color: #172033;
  font-size: 22px;
}

.favorites-empty p {
  max-width: 560px;
  margin: 0 auto 16px;
  color: #667085;
}

@media (max-width: 980px) {
  .favorites-controls,
  .favorites-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .favorite-card {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .favorite-main-panel,
  .favorite-side-actions {
    grid-column: 2;
  }

  .creator-media-strip {
    grid-template-columns: repeat(6, minmax(52px, 1fr));
  }

  .creator-media-thumb-wrap {
    width: 100%;
    height: 88px;
  }
}

@media (max-width: 640px) {
  .favorites-controls,
  .favorites-summary,
  .favorites-empty {
    grid-template-columns: 1fr;
  }

  .zerendo-page-guide {
    grid-template-columns: 52px minmax(0, 1fr);
    width: 100%;
    min-height: 0;
    margin-left: 0;
    padding: 12px;
    border: 1px solid #e6ecf5;
    background: #fbf8ff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  }

  .zerendo-page-guide img {
    width: 52px;
    height: 52px;
    margin: 0;
  }

  .zerendo-page-guide strong,
  .zerendo-page-guide span {
    display: block;
  }

  .favorites-page-panel {
    padding: 18px;
  }

  .favorite-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .favorite-row-select,
  .favorite-main-panel,
  .favorite-side-actions {
    grid-column: auto;
  }

  .favorite-row-select {
    display: none;
  }

  .favorite-profile-panel {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .favorite-profile-panel .avatar {
    width: 56px;
    height: 56px;
  }

  .favorite-row-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .creator-media-strip,
  .live-result-card .creator-media-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .creator-media-thumb-wrap,
  .live-result-card .creator-media-thumb-wrap {
    height: 96px;
  }

  .favorite-quick-metrics {
    grid-template-columns: 1fr;
  }

  .zerendo-search-state {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .zerendo-state-visual {
    min-height: 96px;
  }

  .zerendo-state-visual img {
    width: 96px;
    height: 96px;
  }

  .library-search-panel .section-heading {
    align-items: flex-start;
  }

  .section-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* Zerendo outreach helpers: Chinese draft expansion and send success. */
.zerendo-expand-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  padding: 10px 12px 10px 4px;
  overflow: hidden;
  border: 1px solid rgba(117, 68, 215, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 20%, rgba(88, 190, 255, 0.15), transparent 34%),
    linear-gradient(135deg, #fbf9ff, #f5f0ff);
}

.zerendo-expand-card img {
  align-self: end;
  width: 78px;
  height: 78px;
  object-fit: contain;
  object-position: center bottom;
}

.zerendo-expand-card span,
.zerendo-send-feedback span {
  display: block;
  margin-bottom: 3px;
  color: #7544d7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.zerendo-expand-card strong,
.zerendo-send-feedback strong {
  display: block;
  color: #273147;
  font-size: 13px;
}

.zerendo-expand-card p,
.zerendo-send-feedback p {
  margin: 4px 0 0 !important;
  color: #7d8799 !important;
  font-size: 11px;
  line-height: 1.45;
}

.zerendo-expand-card button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(117, 68, 215, 0.2);
  border-radius: 9px;
  background: #fff;
  color: #6637bd;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.zerendo-expand-card button:hover {
  border-color: #7544d7;
  background: #f2ebff;
}

.zerendo-send-feedback {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding: 10px 18px 10px 6px;
  overflow: hidden;
  border: 1px solid rgba(37, 160, 108, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 20%, rgba(91, 216, 166, 0.18), transparent 35%),
    linear-gradient(135deg, #f5fffa, #eefaf5);
}

.zerendo-send-feedback[hidden] {
  display: none;
}

.zerendo-send-feedback img {
  width: 94px;
  height: 94px;
  object-fit: contain;
  object-position: center bottom;
  animation: zerendo-success-pop 0.45s ease-out both;
}

.zerendo-send-feedback.is-success span {
  color: #249166;
}

.zerendo-send-feedback.is-error {
  border-color: rgba(213, 66, 86, 0.2);
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 148, 160, 0.2), transparent 35%),
    linear-gradient(135deg, #fff8f8, #fff0f2);
}

.zerendo-send-feedback.is-error span {
  color: #cc3f55;
}

.zerendo-send-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.zerendo-send-actions[hidden] {
  display: none;
}

.zerendo-send-actions button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(204, 63, 85, 0.22);
  border-radius: 999px;
  background: #fff;
  color: #cc3f55;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.zerendo-send-actions button:hover {
  border-color: rgba(204, 63, 85, 0.42);
  background: #fff5f6;
}

@keyframes zerendo-success-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .zerendo-expand-card {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .zerendo-expand-card img {
    width: 68px;
    height: 68px;
  }

  .zerendo-expand-card button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Publishing calendar: separate month grid and monthly task board. */
#calendar .calendar-page {
  display: grid;
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
}

#calendar .calendar-panel {
  overflow: hidden;
  border: 1px solid #e7eaf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(24, 19, 49, 0.08);
}

#calendar .calendar-workspace {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 18px;
}

#calendar .calendar-toolbar {
  padding: 18px 22px;
  border-bottom: 1px solid #eceef5;
  background:
    radial-gradient(circle at 80% 0, rgba(149, 101, 255, 0.11), transparent 32%),
    linear-gradient(135deg, #fff 0%, #fbf9ff 100%);
}

#calendar .calendar-toolbar h2 {
  text-transform: capitalize;
}

#calendar .calendar-board {
  background: #fff;
}

#calendar .calendar-agenda {
  padding: 24px;
}

#calendar .calendar-agenda-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

#calendar .calendar-agenda-heading h2 {
  margin: 4px 0 5px;
  font-size: 24px;
}

#calendar .calendar-agenda-summary {
  margin: 0;
  color: #7b8494;
  font-size: 13px;
}

#calendar .calendar-task-count {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #e5dcfa;
  border-radius: 999px;
  color: #6840bd;
  background: #f6f1ff;
  font-size: 12px;
  font-weight: 800;
}

#calendar .calendar-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-height: 690px;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-color: #cfc2ea transparent;
  scrollbar-width: thin;
}

#calendar .calendar-list::-webkit-scrollbar {
  width: 6px;
}

#calendar .calendar-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cfc2ea;
}

#calendar .calendar-task-card {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(240px, 300px);
  gap: 18px;
  align-items: stretch;
  padding: 16px 18px 16px 14px;
  overflow: hidden;
  border: 1px solid #e8eaf1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(38, 31, 69, 0.055);
}

#calendar .calendar-task-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #9270df;
}

#calendar .calendar-task-card.is-overdue::before {
  background: #e25769;
}

#calendar .calendar-task-card.is-today::before {
  background: #f59e38;
}

#calendar .calendar-task-card.is-upcoming::before {
  background: #7c5ce0;
}

#calendar .calendar-task-card.is-completed::before {
  background: #31aa76;
}

#calendar .calendar-task-date {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 96px;
  padding: 10px 6px;
  border-radius: 12px;
  color: #523092;
  background: linear-gradient(145deg, #f6f1ff, #eee7fc);
}

#calendar .calendar-task-date span,
#calendar .calendar-task-date em {
  color: #8269ad;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

#calendar .calendar-task-date strong {
  margin: 2px 0;
  color: #392160;
  font-size: 30px;
  line-height: 1;
}

#calendar .calendar-task-main {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}

#calendar .calendar-task-creator {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-width: 0;
}

#calendar .calendar-task-creator .avatar {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

#calendar .calendar-task-creator div {
  min-width: 0;
}

#calendar .calendar-task-creator strong,
#calendar .calendar-task-content strong {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar .calendar-task-creator strong {
  font-size: 15px;
}

#calendar .calendar-task-creator div span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #8992a2;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar .calendar-task-creator > .chip {
  grid-column: 2;
  width: fit-content;
}

#calendar .calendar-task-content {
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid #edf0f5;
}

#calendar .calendar-task-label,
#calendar .calendar-task-action p span {
  display: block;
  margin-bottom: 5px;
  color: #9aa3b2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#calendar .calendar-task-content strong {
  font-size: 14px;
}

#calendar .calendar-task-meta {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 9px;
  color: #798293;
  font-size: 11px;
}

#calendar .calendar-task-action {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: center;
  justify-content: end;
  gap: 8px;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid #edf0f5;
}

#calendar .calendar-timing-badge {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  color: #6840bd;
  background: #f2edff;
  font-size: 10px;
  font-weight: 900;
}

#calendar .is-overdue .calendar-timing-badge {
  color: #bd394d;
  background: #fff0f2;
}

#calendar .is-today .calendar-timing-badge {
  color: #ad650c;
  background: #fff4df;
}

#calendar .is-completed .calendar-timing-badge {
  color: #25845d;
  background: #eaf8f1;
}

#calendar .calendar-task-action p {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 2px 0 0;
  color: #596476;
  font-size: 12px;
  line-height: 1.45;
}

#calendar .calendar-task-open {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 0;
  border: 0;
  color: #6a3bc1;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

#calendar .calendar-task-open:hover {
  color: #402074;
  text-decoration: underline;
}

#calendar .calendar-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 150px;
  padding: 24px;
  border: 1px dashed #dcd5eb;
  border-radius: 14px;
  color: #778193;
  background: #fbfaff;
  text-align: left;
}

#calendar .calendar-empty-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  color: #7544d7;
  background: #efe7ff;
  font-size: 24px;
}

#calendar .calendar-empty-state strong {
  display: block;
  margin-bottom: 4px;
}

#calendar .calendar-empty-state p {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 1050px) {
  #calendar .calendar-task-card {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  #calendar .calendar-task-action {
    grid-column: 2;
    grid-template-columns: auto auto minmax(180px, 1fr) auto;
    justify-content: stretch;
    padding: 12px 0 0;
    border-top: 1px solid #edf0f5;
    border-left: 0;
  }

  #calendar .calendar-task-action p {
    grid-column: auto;
    margin: 0;
  }

  #calendar .calendar-task-action p span {
    display: inline;
    margin: 0 5px 0 0;
  }

  #calendar .calendar-task-open {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  #calendar .calendar-agenda {
    padding: 18px 14px;
  }

  #calendar .calendar-task-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding-right: 12px;
  }

  #calendar .calendar-task-date {
    min-height: 82px;
  }

  #calendar .calendar-task-date strong {
    font-size: 25px;
  }

  #calendar .calendar-task-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #calendar .calendar-task-content {
    padding: 10px 0 0;
    border-top: 1px solid #edf0f5;
    border-left: 0;
  }

  #calendar .calendar-task-action {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
  }

  #calendar .calendar-task-action p {
    grid-column: 1 / -1;
  }

  #calendar .calendar-task-open {
    grid-column: 1 / -1;
  }
}

/* Campaign calendar mode. */
#calendar .calendar-overview-panel {
  overflow: visible;
}

#calendar .calendar-overview-panel .calendar-toolbar {
  border: 0;
  border-radius: 18px;
}

#calendar .calendar-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#calendar .calendar-mode-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e5dff2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

#calendar .calendar-mode-switch button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: #756784;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

#calendar .calendar-mode-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, #7544d7, #e33f9a);
  box-shadow: 0 8px 18px rgba(117, 68, 215, 0.18);
}

#calendar .calendar-new-campaign-btn {
  min-height: 42px;
  padding: 0 16px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(227, 63, 154, 0.18);
}

.commerce-filter-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #e5dff2;
  border-radius: 999px;
  color: #756784;
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 900;
}

.commerce-filter-control select {
  min-height: 30px;
  border: 0;
  color: #35224f;
  background: transparent;
  font: inherit;
  font-size: 12px;
  outline: none;
}

#calendar[data-calendar-mode="creator"] .commerce-filter-control {
  display: none;
}

.campaign-dialog-card {
  width: min(640px, calc(100vw - 24px));
}

#calendar .calendar-mode-section[hidden] {
  display: none;
}

#calendar .campaign-calendar-section {
  display: grid;
  gap: 18px;
}

#calendar .campaign-calendar-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}

#calendar .campaign-calendar-summary article {
  padding: 18px 20px;
  border: 1px solid #ece8f7;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0, rgba(227, 63, 154, 0.11), transparent 34%),
    linear-gradient(135deg, #fff, #fbf9ff);
  box-shadow: 0 8px 24px rgba(38, 31, 69, 0.06);
}

#calendar .campaign-calendar-summary span {
  display: block;
  color: #8d95a5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#calendar .campaign-calendar-summary strong {
  display: block;
  margin-top: 6px;
  color: #1f2a3a;
  font-size: 28px;
}

#calendar .campaign-calendar-summary p {
  margin: 5px 0 0;
  color: #70798a;
  font-size: 12px;
}

#calendar .campaign-calendar-panel {
  padding: 0;
}

#calendar .campaign-board-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #edf0f5;
  background:
    radial-gradient(circle at 16% 0, rgba(117, 68, 215, 0.1), transparent 34%),
    #fff;
}

#calendar .campaign-board-heading h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

#calendar .campaign-board-heading p:not(.eyebrow) {
  max-width: none;
  margin: 6px 0 0;
  color: #7b8494;
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
}

#calendar .campaign-heading-meta {
  display: grid;
  justify-items: end;
  gap: 10px;
}

#calendar .campaign-heading-meta .commerce-filter-control {
  justify-self: end;
  background: #fbf8ff;
  white-space: nowrap;
}

#calendar .campaign-calendar-board {
  overflow-x: auto;
}

#calendar .calendar-campaign-event {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid rgba(117, 68, 215, 0.14);
  border-radius: 8px;
  color: #4f2e92;
  background: #f2edff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#calendar .calendar-campaign-event b {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: #7544d7;
  font-size: 9px;
}

#calendar .calendar-campaign-event.completed {
  color: #287253;
  background: #eaf8f1;
}

#calendar .calendar-campaign-event.completed b {
  background: #31aa76;
}

#calendar .calendar-campaign-event.draft {
  color: #647086;
  background: #f3f5f9;
}

#calendar .calendar-campaign-event.draft b {
  background: #8390a3;
}

#calendar .calendar-campaign-event.color-1 {
  color: #8b365f;
  background: #fff0f6;
}

#calendar .calendar-campaign-event.color-1 b {
  background: #e33f9a;
}

#calendar .calendar-campaign-event.color-2 {
  color: #245a87;
  background: #eef7ff;
}

#calendar .calendar-campaign-event.color-2 b {
  background: #438ac9;
}

#calendar .calendar-campaign-event.color-3 {
  color: #805d14;
  background: #fff7df;
}

#calendar .calendar-campaign-event.color-3 b {
  background: #d99422;
}

#calendar .calendar-campaign-event.color-4 {
  color: #365c55;
  background: #edfbf7;
}

#calendar .calendar-campaign-event.color-4 b {
  background: #2aa887;
}

#calendar .commerce-event {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid #d9cdf6;
  border-radius: 8px;
  color: #4f2e92;
  background: #f2edff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#calendar .commerce-event em {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar .commerce-event b {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: #7c5ce0;
  font-size: 9px;
}

#calendar .holiday-reminder {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 7px;
  overflow: hidden;
  border: 1px solid #e7e2f1;
  border-radius: 7px;
  color: #70677f;
  background: rgba(248, 246, 252, 0.92);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#calendar .holiday-reminder i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 2px solid #b49ee6;
  border-radius: 999px;
  background: #fff;
}

#calendar .holiday-reminder b {
  flex: 0 0 auto;
  color: #8d7da8;
  font-size: 9px;
}

#calendar .holiday-reminder em {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 9px;
  font-style: normal;
  opacity: 0.68;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar .campaign-list-panel {
  padding: 24px;
}

#calendar .campaign-list-panel .campaign-calendar-summary {
  margin: 18px 0;
}

#calendar .campaign-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

#calendar .campaign-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #e8eaf1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(38, 31, 69, 0.055);
}

#calendar .campaign-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #7544d7;
}

#calendar .campaign-card.color-1::before { background: #e33f9a; }
#calendar .campaign-card.color-2::before { background: #438ac9; }
#calendar .campaign-card.color-3::before { background: #d99422; }
#calendar .campaign-card.color-4::before { background: #2aa887; }

#calendar .campaign-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#calendar .campaign-card-head span {
  display: block;
  margin-bottom: 4px;
  color: #9aa3b2;
  font-size: 11px;
  font-weight: 900;
}

#calendar .campaign-card-head strong {
  display: block;
  margin: 0;
  font-size: 18px;
}

#calendar .campaign-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

#calendar .campaign-status.active {
  color: #6840bd;
  background: #f2edff;
}

#calendar .campaign-status.draft {
  color: #647086;
  background: #eef1f6;
}

#calendar .campaign-status.completed {
  color: #25845d;
  background: #eaf8f1;
}

#calendar .campaign-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#calendar .campaign-card-grid span {
  padding: 10px;
  border-radius: 12px;
  background: #f8f7fb;
}

#calendar .campaign-card-grid b,
#calendar .campaign-card-grid em {
  display: block;
}

#calendar .campaign-card-grid b {
  color: #263247;
  font-size: 14px;
}

#calendar .campaign-card-grid em {
  margin-top: 3px;
  color: #8a93a5;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

#calendar .campaign-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef1f7;
}

#calendar .campaign-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7544d7, #e33f9a);
}

#calendar .campaign-card p {
  margin: 0;
  color: #596476;
  font-size: 12px;
  line-height: 1.5;
}

#calendar .campaign-card p span {
  display: block;
  margin-bottom: 4px;
  color: #9aa3b2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  #calendar .calendar-overview-panel .calendar-toolbar,
  #calendar .campaign-board-heading,
  #calendar .calendar-agenda-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #calendar .calendar-controls {
    justify-content: flex-start;
  }

  #calendar .campaign-calendar-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1320px) {
  #creators .red-creator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  #creators .red-creator-grid {
    grid-template-columns: 1fr;
  }
}

/* Page-specific header actions: only the creator database owns import/export/create. */
body:not([data-current-view="creators"]) .main > .topbar .top-actions {
  display: none;
}

body:not([data-current-view="creators"]) .main > .topbar {
  min-height: 34px;
  padding: 4px 0 10px;
  border-bottom-color: rgba(226, 210, 255, 0.06);
}

body[data-current-view="creators"] .main > .topbar {
  padding: 10px 0 14px;
}

body:not([data-current-view="creators"]) .main > .topbar h1 {
  font-size: 17px;
  color: rgba(216, 210, 235, 0.86);
}

body:not([data-current-view="creators"]) .main {
  padding-top: 14px;
}

body:not([data-current-view="creators"]) .view.active {
  margin-top: 8px;
}

body[data-current-view="discovery"] .discovery-shell {
  margin-top: 0;
}