* {
  box-sizing: border-box;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

/* Campaign v1 — 战役工作区 */
.campaign-workspace {
  display: grid;
  gap: 24px;
}

.campaign-workspace-head,
.campaign-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.campaign-workspace-head h2,
.campaign-detail-head h2 {
  margin: 4px 0 8px;
}

.campaign-workspace-head p:last-child,
.campaign-detail-head p {
  margin: 0;
  color: var(--text-muted, #746f7c);
}

.campaign-workspace-status:empty {
  display: none;
}

.campaign-workspace-status {
  padding: 11px 14px;
  border-radius: 14px;
  background: #f4f0fb;
  color: #6847c8;
}

.campaign-workspace-status.is-success {
  background: #eef8f2;
  color: #28724b;
}

.formal-campaign-group,
.formal-campaign-closed,
.campaign-detail-panel {
  padding: 24px;
  border: 1px solid #e8e2ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--elev-1);
  color: #312a36;
}

.formal-campaign-group h3,
.formal-campaign-closed summary,
.formal-campaign-card h3,
.campaign-detail-panel h2,
.campaign-detail-panel h3,
.campaign-detail-panel strong,
.formal-campaign-card .formal-campaign-stats strong {
  color: #312a36;
}

.formal-campaign-card .text-button,
.campaign-detail-panel .text-button {
  color: #6847c8;
}

.formal-campaign-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.formal-campaign-group-title h3,
.formal-campaign-group-title span {
  margin: 0;
}

.formal-campaign-group-title > span,
.formal-campaign-closed > summary span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1edf5;
  color: #6f6675;
  font-size: 12px;
}

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

.formal-campaign-card {
  display: grid;
  grid-template-columns: max-content minmax(150px, 1.2fr) minmax(145px, 0.8fr) minmax(155px, 0.8fr) minmax(130px, 1fr) minmax(190px, auto);
  grid-template-areas: "status identity schedule stats activity actions";
  align-items: center;
  gap: 8px 14px;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid #e7e0eb;
  border-radius: 14px;
  background: #faf8fb;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.formal-campaign-card:hover {
  transform: translateY(-2px);
  border-color: #b9a8d8;
  box-shadow: 0 12px 24px rgba(104, 71, 200, 0.1);
}

.formal-campaign-card.is-closed {
  background: #f5f3f5;
  opacity: 0.88;
}

.formal-campaign-stats,
.campaign-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.formal-campaign-card h3,
.formal-campaign-card p {
  margin: 0;
}

.formal-campaign-card p {
  min-height: 0;
  color: #746f7c;
}

.formal-campaign-identity {
  display: grid;
  grid-area: identity;
  gap: 2px;
  min-width: 0;
}

.formal-campaign-identity h3,
.formal-campaign-identity p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formal-campaign-status {
  display: inline-flex;
  grid-area: status;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.formal-campaign-status.is-active {
  background: #eee8fb;
  color: #6847c8;
}

.formal-campaign-status.is-closed {
  background: #e9e6e9;
  color: #716b73;
}

.formal-campaign-stats span {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.formal-campaign-stats strong {
  font-size: 16px;
}

.formal-campaign-stats small {
  color: #837c87;
}

.campaign-light-action,
.formal-campaign-card .campaign-light-action {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d8cee2;
  border-radius: 10px;
  background: #fff;
  color: #6847c8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.campaign-detail-actions .campaign-light-action {
  width: auto;
}

.formal-campaign-card .formal-campaign-schedule {
  display: grid;
  grid-area: schedule;
  gap: 1px;
  min-width: 0;
}

.formal-campaign-card .formal-campaign-schedule strong,
.formal-campaign-card .formal-campaign-schedule span,
.formal-campaign-card .formal-campaign-schedule small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formal-campaign-card .formal-campaign-schedule small {
  color: #8a828d;
  font-weight: 500;
}

.formal-campaign-card .formal-campaign-stats {
  display: grid;
  grid-area: stats;
  grid-template-columns: repeat(3, minmax(42px, 1fr));
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.formal-campaign-row-actions {
  display: flex;
  grid-area: actions;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.formal-campaign-row-actions > .text-button,
.formal-campaign-row-actions > .campaign-light-action {
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.formal-campaign-closed > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
}

.formal-campaign-closed[open] > summary {
  margin-bottom: 18px;
}

.campaign-first-run {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 64px 24px;
  border: 1px dashed #cfc3d8;
  border-radius: 18px;
  background: #faf8fb;
  text-align: center;
}

.campaign-first-run > span {
  color: #6847c8;
  font-size: 32px;
}

.campaign-first-run h3,
.campaign-first-run p {
  margin: 0;
}

.campaign-empty-state {
  margin: 0;
  padding: 24px;
  color: #7e7782;
}

.campaign-detail-panel {
  scroll-margin-top: 20px;
}

.campaign-detail-head > div:nth-child(2) {
  flex: 1;
}

.campaign-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr);
  gap: 20px;
  margin-top: 24px;
}

.campaign-member-panel,
.campaign-timeline-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid #ebe6ee;
  border-radius: 14px;
  background: #faf9fa;
}

.campaign-member-table .avatar,
.campaign-closeout-row .avatar,
.campaign-next-round-members .avatar {
  width: 38px;
  height: 38px;
}

.campaign-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.campaign-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  padding-bottom: 18px;
}

.campaign-timeline li > span {
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #6847c8;
}

.campaign-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: #d9cee6;
}

.campaign-timeline li div {
  display: grid;
  gap: 4px;
}

.campaign-timeline small {
  color: #8a828d;
}

.outreach-campaign-control {
  display: flex;
  align-items: end;
  gap: 16px;
}

.outreach-campaign-control label,
.pipeline-campaign-filter {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #756d7a;
}

.outreach-campaign-control select,
.pipeline-campaign-filter select {
  min-width: 190px;
}

.live-more-menu,
.creator-more-menu {
  position: relative;
}

#creators .creator-list-card:has(.creator-more-menu[open]),
#creators .creator-more-menu[open] {
  z-index: 30;
}

#creators .creator-list-card:last-child .creator-more-menu > div {
  top: auto;
  bottom: calc(100% + 6px);
}

.live-more-menu summary {
  padding: 8px 10px;
  border: 1px solid #ded6e4;
  border-radius: 10px;
  background: #fff;
  color: #5f5863;
  cursor: pointer;
  list-style: none;
}

.live-more-menu > div {
  position: absolute;
  z-index: 8;
  right: 0;
  top: calc(100% + 6px);
  min-width: 150px;
  padding: 8px;
  border: 1px solid #e1d9e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--elev-1);
}

.live-more-menu button {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: #f6f2fa;
  color: #6847c8;
  text-align: left;
  cursor: pointer;
}

.formal-campaign-dialog-card,
.campaign-picker-dialog-card,
.campaign-closeout-dialog-card,
.campaign-next-round-dialog-card {
  width: min(720px, calc(100vw - 32px));
}

.campaign-closeout-dialog-card {
  width: min(920px, calc(100vw - 32px));
}

.dialog-inline-status:not(:empty) {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5effa;
  color: #6847c8;
}

.campaign-picker-create {
  justify-self: start;
  margin-top: 10px;
}

.campaign-closeout-list {
  display: grid;
  gap: 12px;
  max-height: 58vh;
  overflow: auto;
}

.campaign-closeout-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.4fr) 1fr;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e8e1ec;
  border-radius: 14px;
  background: #faf9fa;
}

.campaign-closeout-row > div:first-child,
.campaign-next-round-members label > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campaign-closeout-row > div:first-child span,
.campaign-next-round-members label > span {
  min-width: 0;
}

.campaign-closeout-row > div:first-child span {
  display: grid;
}

.campaign-closeout-dimensions {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
}

.campaign-closeout-dimensions label {
  display: grid;
  gap: 4px;
  color: #6f6872;
  font-size: 12px;
}

.campaign-mini-stars {
  display: flex;
  gap: 2px;
}

.campaign-mini-stars button {
  padding: 0;
  border: 0;
  background: none;
  color: #d8d2da;
  font-size: 18px;
  cursor: pointer;
}

.campaign-mini-stars button.is-active {
  color: #d59b3d;
}

.campaign-next-round-members {
  display: grid;
  gap: 8px;
  max-height: 36vh;
  overflow: auto;
}

.campaign-next-round-members label {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e8e1ec;
  border-radius: 10px;
}

.campaign-next-round-members label small {
  margin-left: auto;
  color: #7e7681;
}

@media (max-width: 900px) {
  .campaign-detail-grid,
  .campaign-closeout-row {
    grid-template-columns: 1fr;
  }

  .campaign-workspace-head,
  .campaign-detail-head,
  .campaign-detail-actions,
  .outreach-campaign-control {
    align-items: stretch;
    flex-direction: column;
  }
}

body {
  margin: 0;
  font-family: var(--brand-font);
  line-height: 1.45;
  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;
  /* 280px 是品牌块还在侧栏里时定的宽。品牌搬进顶栏、图标补进菜单项之后，
     用户说太宽——收到 232px（样机的窄度），最长的「联系人工客服」也放得下。 */
  grid-template-columns: 232px 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: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-right: 1px solid rgba(226, 210, 255, 0.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.sidebar-toggle {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(226, 210, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.sidebar-toggle:hover {
  background: rgba(143, 92, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.26);
}

.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: 14px;
  box-shadow: var(--elev-1);
}

.brand-account-trigger {
  border: 1px solid rgba(255, 255, 255, 0.58);
}

.brand-account-trigger:hover,
.brand-account-trigger[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--elev-1);
}

.account-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 8px;
  z-index: 20;
  width: 286px;
  padding: 8px;
  border: 1px solid rgba(226, 210, 255, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(143, 92, 255, 0.28), transparent 38%),
    linear-gradient(180deg, rgba(40, 20, 62, 0.99), rgba(18, 8, 32, 0.99)),
    var(--nav);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(18px);
}

.account-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 28px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border-left: 1px solid rgba(226, 210, 255, 0.2);
  border-top: 1px solid rgba(226, 210, 255, 0.2);
  background: rgba(40, 20, 62, 0.99);
}

.account-menu[hidden] {
  display: none;
}

.account-menu-current {
  padding: 13px 14px;
  border: 1px solid rgba(226, 210, 255, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
}

.account-menu-current span,
.account-menu-current small,
.account-menu-item small,
.remembered-account small,
.account-switch-heading,
.account-menu-notice,
.account-empty {
  color: rgba(216, 202, 233, 0.7);
}

.account-menu-current span,
.account-switch-heading {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-menu-current strong {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.account-menu-current small,
.account-menu-item small,
.remembered-account small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.account-menu-actions {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.account-menu-item,
.remembered-account {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

.account-menu-item:hover,
.remembered-account:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.085);
}

.account-menu-item--danger {
  color: rgba(255, 201, 218, 0.92);
}

.account-menu-item--danger:hover {
  background: rgba(255, 79, 141, 0.16);
}

.account-switch-panel {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(226, 210, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 3, 18, 0.28);
}

.account-switch-panel[hidden] {
  display: none;
}

.remembered-account {
  display: block;
  background: rgba(255, 255, 255, 0.05);
}

.remembered-account span {
  display: block;
  overflow-wrap: anywhere;
}

.account-empty,
.account-menu-notice {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.account-menu-notice {
  margin-top: 10px;
  padding: 8px 10px 2px;
  border-top: 1px solid rgba(226, 210, 255, 0.1);
}

.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: 10px;
}

.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: 11px;
  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: 8px;
}

.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: 10px;
  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: 10px;
  background: rgba(255, 255, 255, 0.04);
}

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

.main {
  /* 横向 20、竖向 28。原来是四边 28，加上侧栏 280，内容左缘落在 308——
     再叠上某些视图自己的 clamp(18px, 4vw, 64px)（1440 下 57.6px），
     就出现了 308 / 366 / 367 三种不同的左缘。同一个应用里页边距不一致，
     翻页时会有"画面在跳"的感觉，这比留白宽窄本身更伤。 */
  padding: 28px 20px;
  min-width: 0;
}

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

.server-sync-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 189, 103, 0.42);
  border-radius: 10px;
  background: rgba(255, 189, 103, 0.15);
  color: #fff3d9;
  font-size: 13px;
  font-weight: 600;
}

.server-sync-notice[hidden] {
  display: none;
}

.server-sync-notice button {
  border: 0;
  background: transparent;
  color: #fff6df;
  font-size: 12px;
  font-weight: 700;
}

.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;
  /* 紫色发光去掉：它属于"炫"而不是"克制"。
     .page-head h1 早就写了 text-shadow: none，说明这个判断一直都在，
     只是别处的裸 h1 还留着。 */
  text-shadow: none;
}

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

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

.section-heading-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.nav-count-badge,
.section-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ff4f8d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.nav-count-badge[hidden],
.section-count-badge[hidden] {
  display: none;
}

.section-count-badge {
  vertical-align: middle;
}

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

.primary-button {
  background: linear-gradient(120deg, #8f5cff 0%, #a74dff 50%, #ff4f8d 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(143, 92, 255, 0.28);
}

.danger-button {
  color: #ffd0dc;
  border-color: rgba(255, 79, 141, 0.45);
  background: rgba(255, 79, 141, 0.11);
}

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

.ghost-button {
  background: rgba(255, 255, 255, 0.03);
  color: #ede0ff;
}

.ghost-button.danger {
  color: #ffd0dc;
  border-color: rgba(255, 79, 141, 0.5);
  background: rgba(255, 79, 141, 0.12);
}

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

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

.view.active {
  display: block;
}

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

.metric-card,
.workspace-panel,
.database-banner,
.creator-card,
.contract-card,
.calendar-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  /* 阴影去掉：这些卡片都压在有色底上，明暗差已经分层，
     再加阴影是同一件事做两遍。见文件后段「卡片分层」那段注释。 */
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.metric-card {
  padding: 16px;
  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;
  /* 下沉面上不能用白字。#1f2a3a 是这一页正文色，已在文件里大量使用。 */
  color: #1f2a3a;
}

.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;
  /* 原来是 minmax(320px,.85fr) minmax(360px,1.15fr)——两列最小和加间距 = 696px，
     而侧栏展开、视口 1024 时这一栏只有 689px，右边那张卡越界 7px。
     和相似页那处是同一个病：minmax 的下限定得比容器还宽，
     就会在某个特定宽度突然溢出，而在你常用的宽度下看不出来。 */
  grid-template-columns: minmax(260px, 0.85fr) minmax(280px, 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: 16px;
  align-items: center;
  padding: 16px;
  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: minmax(0, 140px) minmax(176px, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 18px;
}

.donut-chart {
  position: relative;
  width: 100%;
  max-width: 140px;
  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;
}

#dashboard .donut-chart strong {
  color: #ffffff;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(143, 92, 255, 0.34);
}

#dashboard .donut-chart span {
  color: #dccbff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 46px;
  position: absolute;
}

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

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

.legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}

.legend-row i { flex: none; }
.legend-row span { flex: 0 1 auto; white-space: nowrap; }

/* margin-left:auto 把数字推到右边；放不下时它整块换行，而不是压到名字上。
   tabular-nums 让四行的数字竖着对齐——等宽数字之前没开，
   129 / 97 / 187 / 4 的字宽不同，四行看起来是歪的。 */
.legend-row strong {
  flex: none;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.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: 10px;
  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: 22px;
}

.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: 10px;
  background: rgba(255, 255, 255, 0.055);
  padding: 16px;
  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: 22px;
  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: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

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

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

.dashboard-zerendo-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #e8ddff;
  border-radius: 18px;
  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: 12px;
  font-weight: 700;
  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: 8px;
}

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

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

.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: 700;
  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: 16px;
  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: 700;
}

.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: 16px;
  align-items: center;
  min-height: 136px;
  padding: 14px 16px 14px 0;
  border: 1px solid #e8ddff;
  border-radius: 18px;
  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: 12px;
  font-weight: 700;
  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: 16px;
  margin: 16px 0;
}

.attribution-summary-card {
  padding: 16px;
  border: 1px solid #ecf0f6;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #fbf8ff);
  box-shadow: var(--elev-1);
}

.attribution-summary-card span,
.attribution-api-card span {
  display: block;
  color: #98a1b1;
  font-size: 12px;
  font-weight: 700;
  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: 16px;
  border: 1px solid #edf0f6;
  border-radius: 14px;
  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: 8px;
  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: 15px;
}

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

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

.attribution-builder-grid label {
  display: grid;
  gap: 8px;
  color: #7f8a9d;
  font-size: 12px;
  font-weight: 700;
}

.attribution-builder-grid input,
.attribution-builder-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: #1f2a3a;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.attribution-builder-grid input:focus,
.attribution-builder-grid select:focus {
  border-color: #7544d7;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(117, 68, 215, 0.12);
}

.attribution-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.attribution-actions .muted {
  margin: 0;
}

.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: 700;
}

.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: 600;
  text-align: center;
}

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

.settlement-panel {
  margin-top: 16px;
}

.settlement-builder-grid {
  grid-template-columns: minmax(240px, 420px);
}

.settlement-rule-note {
  margin: 12px 0 0;
}

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

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

.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: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.affiliate-table tfoot td {
  padding: 13px 14px;
  border-top: 1px solid #eadcff;
  background: #fbf7ff;
  color: #4c347a;
  font-weight: 700;
  text-align: left;
}

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

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

.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: 600;
  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: 700;
}

.affiliate-status.approved,
.affiliate-status.payable,
.affiliate-status.paid {
  background: #f2fff8;
  color: #20885b !important;
}

.affiliate-status.pending {
  background: #fff8e8;
  color: #996100 !important;
}

.affiliate-status.reversed {
  background: #fff1f3;
  color: #c13d53 !important;
}

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

.affiliate-row-actions .text-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.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: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  padding: 16px;
  text-align: left;
}

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

.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 0 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: none;   /* 卡片分层收敛：靠底色和发丝边分层，不叠阴影 */
}

.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;
  letter-spacing: 0;   /* 字号交给 .page-head 统一管，这里不再单独放大 */
}

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

.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: none;   /* 卡片分层收敛：靠底色和发丝边分层，不叠阴影 */
}

.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: 8px;
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  color: #172033;
  background: transparent;
  font-weight: 700;
}

.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: 10px;
  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.linkedin {
  background: #0a66c2;
  font-size: 12px;
  font-weight: 700;
}

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

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

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

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

#discovery input,
#discovery select,
#discovery textarea {
  color: #172033;
  border-color: #e1e6ee;
  background: #fff;
  box-shadow: var(--elev-1);
}

#discovery .smart-filter-grid select,
#discovery .smart-filter-grid input {
  min-height: 48px;
  border-radius: 14px;
  font-size: 15px;
}

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

.ai-mode-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 22px;
  padding: 8px;
  border: 1px solid #e3e7ef;
  border-radius: 999px;
  background: #f1f3f7;
  box-shadow: var(--elev-1);
}

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

.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: 15px;
}

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

.live-search-panel {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e1e6ee;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--elev-1);
  text-align: left;
}

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

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

.search-diagnostics {
  margin: -4px 0 14px;
  color: #64748b;
  font-size: 12px;
}

.search-diagnostics summary {
  width: fit-content;
  cursor: pointer;
  color: #5b32b8;
  font-weight: 600;
}

.search-diagnostics p {
  margin: 8px 0 0;
  line-height: 1.7;
}

#liveSearchResults.tiktok-results {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: start;
}

#liveSearchResults > .live-empty-result,
#liveSearchResults > .zerendo-search-state {
  grid-column: 1 / -1;
}

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

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

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

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

.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-results-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e6e9f0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

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

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

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

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

.live-empty-result {
  padding: 16px;
  border: 1px dashed #d8deea;
  border-radius: 10px;
  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: 16px;
  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 #e1e6ee;
  border-radius: 10px;
  color: #172033;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

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

.utility-card,
#creators .creator-list-panel {
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-1);
}

.utility-card {
  padding: 16px;
}

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

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

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

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

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

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

.list-header h2 {
  margin: 4px 0 0;
  color: #172033;
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.011em;
}

.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: 8px;
  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: 16px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: var(--elev-1);
}

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

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

.reputation-filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  margin: 0 0 14px;
  border: 1px solid #e5ddff;
  border-radius: 14px;
  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: 14px;
  background: transparent;
  color: #6d7082;
  font-weight: 700;
  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: 8px;
  text-align: left;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--elev-1);
  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: 600;
}

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

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

#creators .filter-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 0.9fr);
  border-color: #e1e6ee;
  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: #e1e6ee;
  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: 14px;
  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: 16px;
  padding: 16px;
  border: 1px solid #e4d7ff;
  border-radius: 18px;
  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: 8px;
}

#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: 12px;
  font-weight: 700;
}

#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: 14px;
  background: rgba(255, 255, 255, 0.76);
}

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

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

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

#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: 8px;
  align-items: center;
}

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

#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: 600;
  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: 32px;
  border: 1px dashed #d9c9ff;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: #7d8798;
  font-weight: 700;
  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: 700;
  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: 14px;
}

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

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

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

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

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

#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: 700;
}

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

#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: 12px;
  font-weight: 700;
}

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

.list-status-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  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 .row-action {
  width: 100%;
  min-height: 30px;
  border: 1px solid #d9e0eb;
  border-radius: 999px;
  color: #172033;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

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

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

#creators .creator-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
}

#creators .creator-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px 18px;
  border: 1px solid #e2d8f7;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(143, 92, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #fff 0%, #fbf9ff 100%);
  box-shadow: 0 12px 30px rgba(52, 37, 84, 0.08);
  cursor: pointer;
}

#creators .creator-list-card:hover {
  border-color: rgba(143, 92, 255, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(52, 37, 84, 0.13);
}

#creators .creator-card-check {
  display: none;
}

#creators .creator-row-main {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-start;
  min-width: 0;
}

#creators .creator-identity {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  flex: 0 1 230px;
  min-width: 200px;
}

#creators .creator-row-stats {
  display: grid;
  flex: 1 1 340px;
  min-width: 300px;
  gap: 8px;
}

#creators .creator-row-side {
  display: grid;
  flex: 1 1 220px;
  min-width: 200px;
  gap: 8px;
}

#creators .creator-identity .avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

#creators .creator-list-card .creator-profile-copy strong,
#creators .creator-list-card .creator-profile-copy .creator-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-list-card .creator-profile-copy > span {
  display: block;
  max-width: 100%;
  margin: 3px 0 6px;
  overflow: hidden;
  color: #6f7a8d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  max-width: none;
  margin-top: 6px;
}

#creators .creator-card-badges .chip,
#creators .creator-card-badges .list-status-chip {
  padding: 4px 7px;
  font-size: 11px;
}

#creators .creator-card-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#creators .creator-market-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 0;
}

#creators .creator-market-section .niche-badge {
  max-width: 100%;
  padding: 6px 10px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-market-section .project-pill-list,
#creators .creator-market-section .creator-contact-flags {
  min-width: 0;
  margin: 0;
}

#creators .creator-list-card .creator-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

#creators .creator-list-card .creator-metric-grid > span {
  display: grid;
  min-width: 0;
  min-height: 68px;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(142, 92, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 243, 255, 0.92));
  box-shadow: 0 10px 24px rgba(60, 35, 102, 0.08);
}

#creators .creator-list-card .creator-metric-grid > span:nth-child(3) {
  border-color: rgba(255, 62, 165, 0.28);
  background: linear-gradient(180deg, rgba(255, 245, 251, 0.98), rgba(255, 232, 246, 0.9));
}

#creators .creator-list-card .creator-metric-grid > span:nth-child(4) {
  border-color: rgba(42, 190, 132, 0.26);
  background: linear-gradient(180deg, rgba(241, 255, 249, 0.98), rgba(229, 251, 242, 0.92));
}

#creators .creator-list-card .creator-metric-grid strong,
#creators .creator-list-card .creator-metric-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-list-card .creator-metric-grid strong {
  color: #121a2b;
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

#creators .creator-list-card .creator-metric-grid small {
  margin-top: 4px;
  color: #748094;
  font-size: 12px;
  font-weight: 700;
}

#creators .creator-content-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-height: 76px;
  margin-top: 0;
  overflow: hidden;
}

#creators .creator-quality-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#creators .creator-list-card .creator-rating-line,
#creators .creator-list-card .creator-quote-line {
  display: grid;
  min-width: 0;
  min-height: 56px;
  align-content: start;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid #eadfff;
  border-radius: 14px;
  background: rgba(248, 244, 255, 0.88);
}

#creators .creator-list-card .creator-rating-line strong,
#creators .creator-list-card .creator-quote-line strong {
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-list-card .creator-rating-line span:not(.rating-stars):not(.star-on):not(.star-off),
#creators .creator-list-card .creator-quote-line span,
#creators .creator-list-card .creator-quote-line small {
  overflow: hidden;
  color: #7d8798;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
}

#creators .creator-list-card .creator-quote-line span {
  display: -webkit-box;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

#creators .creator-row-side em {
  overflow: hidden;
  color: #8b5cf6;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid #edf0f7;
}

#creators .creator-card-footer > span {
  flex: 1 1 220px;
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-list-card .creator-row-actions {
  display: flex;
  flex: 1 1 560px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  min-width: 0;
}

#creators .creator-list-card .row-action,
#creators .creator-list-card .favorite-button {
  width: auto;
  min-width: 70px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

#creators .creator-list-card .favorite-button {
  border-color: #fde2cc;
  background: #fff8f0;
  color: #d97706;
  font-weight: 700;
}

#creators .creator-list-card .favorite-button.active {
  border-color: transparent;
  background: linear-gradient(135deg, #fde7c5, #ffd9b0);
  color: #a8520f;
}

#creators .creator-list-card .favorite-button:hover {
  background: #fff1de;
}

/* Creator list compact command area */
#creators .creator-list-panel {
  max-width: 1320px;
  padding: 24px;
}

#creators .list-header {
  align-items: flex-start;
  margin-bottom: 18px;
}

#creators .list-header h2 {
  /* 跟随 .list-header 的统一尺度，不再单独放大 */
  line-height: 1.18;
}

#creators .list-header p:last-child {
  max-width: 560px;
  font-size: 15px;
}

#creators .creator-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid #e7def9;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(143, 92, 255, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(70, 44, 95, 0.06);
}

#creators .creator-stat-card {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "label value"
    "note value";
  column-gap: 8px;
  min-width: 132px;
  flex: 1 1 132px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #edf0f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

#creators .creator-stat-card span {
  grid-area: label;
  color: #6f7a8d;
  font-size: 12px;
  font-weight: 700;
}

#creators .creator-stat-card strong {
  grid-area: value;
  justify-self: end;
  margin: 0;
  color: #172033;
  font-size: 22px;
  line-height: 1;
}

#creators .creator-stat-card small {
  grid-area: note;
  color: #98a1b1;
  font-size: 12px;
  font-weight: 600;
}

#creators .reputation-filter-bar {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px;
  box-shadow: none;
}

#creators .project-pill-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #e7e0f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(45, 34, 78, 0.04);
}

#creators .project-pill-bar-label {
  min-width: 76px;
}

#creators .project-pill-bar-label .eyebrow {
  color: #8a819b;
  font-size: 12px;
  letter-spacing: 0.08em;
}

#creators .project-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
}

#creators .project-pill {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  white-space: nowrap;
}

#creators .filter-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(340px, auto);
  gap: 16px;
  align-items: center;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid #e7e0f7;
  border-radius: 14px;
  background: #fff;
}

#creators .filter-summary strong {
  font-size: 18px;
}

#creators .filter-summary span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

#creators .filter-summary .list-filters {
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  width: auto;
}

#creators .filter-summary .list-filters select {
  min-height: 38px;
  border-radius: 10px;
}

#creators #platformGrid,
#creators .project-overview {
  display: none;
}

#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 {
  min-height: calc(100vh - 132px);
  padding: 28px 0 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 {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  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: 15px;
}

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

.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: 600;
  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: 10px;
  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: 8px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--surface-soft);
}

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: 10px;
  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: 8px;
}

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

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

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

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

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

.project-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  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: 700;
}

.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;
}

.star-half {
  color: transparent;
  background: linear-gradient(90deg, #ffd166 50%, rgba(255, 255, 255, 0.28) 50%);
  background-clip: text;
  -webkit-background-clip: text;
}

.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: 600;
}

.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);
}

.chip.linkedin {
  background: rgba(10, 102, 194, 0.14);
  color: #0a66c2;
}

.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: 600;
}

.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: 16px;
  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: 10px;
  padding: 12px;
  min-height: 500px;
}

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

.creator-card {
  padding: 16px;
  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: 10px;
  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: 8px;
  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: 10px;
  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: 600;
}

.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: 14px;
  background:
    radial-gradient(circle at 12% 0, rgba(117, 68, 215, 0.09), transparent 34%),
    #f8f6fc;
  box-shadow: var(--elev-1);
}

.contract-document {
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  padding: 26px 44px 64px;
  background: #fff;
  box-shadow: var(--elev-1);
}

.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: 24px;
  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: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.contract-document h2 {
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  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: 10px;
  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: var(--elev-1);
}

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

.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: 84px;
  padding: 7px 8px 6px;
  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: var(--cal-accent-soft);
}

.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: var(--cal-accent);
}

.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 var(--cal-event-base-line);
  border-radius: 10px;
  color: #151515;
  background: var(--cal-event-base-soft);
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendar-event.ready {
  border-left-color: var(--cal-event-ready-line);
  background: var(--cal-event-ready-soft);
}

.calendar-event.revision {
  border-left-color: var(--cal-event-revision-line);
  background: var(--cal-event-revision-soft);
}

.calendar-event.done {
  border-left-color: var(--cal-completed);
  background: var(--cal-completed-soft);
}

.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: 8px;
  align-items: start;
  background: #fff;
  border-color: #dedede;
  box-shadow: var(--elev-1);
}

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

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

.dialog-card {
  width: min(760px, calc(100vw - 24px));
  /* <dialog> 的 UA 限高约 100%-6px-2em（≈100vh-38px）。卡片限高一旦超过它，
     dialog 和卡片就两层各滚各的。所有卡片限高都要压在 100vh-72px 以内，
     滚动只留在卡片这一层（tests/dialog-height-guards.test.mjs 有守卫）。 */
  max-height: calc(100vh - 72px);
  overflow: auto;
  background: var(--surface);
  border-radius: 10px;
  padding: 24px;
  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);
}

/* 上面这三条（4289 起）是给夜间深色卡片写的：.dialog-card 的底色跟着 --surface 走，
   夜间是 rgba(21,11,39,.86)，压白字没问题。但日间 --surface 是 #ffffff，其余弹窗
   都各自打过浅色补丁，只剩下面这三个漏了，于是整张卡片白字压白底——浏览器实测
   标题和字段名 1.00、输入框里打的字 1.09、占位提示 1.04，等于整个弹窗不可用。

   字段名不在这里修：全站靠 `label span{color:var(--muted)}`(764) 统一取色，
   这三个弹窗原来写成裸文本节点才掉出那套机制，已在 index.html 里包回 <span>，
   跟日历弹窗(f01b82d)同一个修法。这里只补 label span 管不到的标题和输入框。

   都交回 token，不钉死颜色：这三个弹窗的卡片是跟着主题翻的，钉死会让夜间穿帮。
   var(--ink) 夜间是 #f4eeff，跟原来的 #fff 几乎同色，夜间外观不变。 */
.dialog-card.formal-campaign-dialog-card .section-heading h2,
.dialog-card.campaign-picker-dialog-card .section-heading h2,
.dialog-card.manual-confirmation-dialog-card .section-heading h2,
.dialog-card.formal-campaign-dialog-card input,
.dialog-card.formal-campaign-dialog-card select,
.dialog-card.formal-campaign-dialog-card textarea,
.dialog-card.campaign-picker-dialog-card select,
.dialog-card.manual-confirmation-dialog-card input,
.dialog-card.manual-confirmation-dialog-card textarea {
  color: var(--ink);
}

/* 两个类都在同一个元素上（class="dialog-card formal-campaign-dialog-card"），
   所以是 (0,2,1)，稳稳压过 (0,1,1) 的 .dialog-card ::placeholder，不靠行序。 */
.dialog-card.formal-campaign-dialog-card input::placeholder,
.dialog-card.formal-campaign-dialog-card textarea::placeholder,
.dialog-card.manual-confirmation-dialog-card input::placeholder,
.dialog-card.manual-confirmation-dialog-card textarea::placeholder {
  color: var(--muted);
}

.creator-dialog-section {
  display: grid;
  gap: 16px;
  margin: 12px 0 18px;
}

.creator-form-grid {
  margin: 0;
}

.recent-views-block {
  display: grid;
  gap: 8px;
}

.recent-views-block textarea {
  min-height: 86px;
}

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

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

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

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

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

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

#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: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

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

.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: 22px;
  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: 8px;
  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: 600;
}

.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: 8px;
  align-items: center;
  padding: 8px;
  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: 12px;
  font-weight: 600;
}

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

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

#creatorDialog .dialog-card {
  width: min(980px, calc(100vw - 40px));
  max-height: min(860px, calc(100vh - 72px));
  padding: 16px;
  border: 1px solid rgba(198, 174, 255, 0.26);
  border-radius: 14px;
}

#creatorDialog .section-heading {
  margin-bottom: 4px;
}

#creatorDialog .section-heading h2 {
  font-size: 22px;
}

#creatorDialog .section-heading .eyebrow {
  font-size: 12px;
}

#creatorDialog .creator-dialog-section {
  gap: 8px;
  margin: 10px 0 14px;
}

#creatorDialog .creator-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#creatorDialog .creator-form-grid label {
  gap: 8px;
  font-size: 13px;
}

#creatorDialog .creator-form-grid label.full {
  grid-column: 1 / -1;
}

#creatorDialog .dialog-card input,
#creatorDialog .dialog-card select,
#creatorDialog .dialog-card textarea {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
}

#creatorDialog .dialog-card textarea {
  min-height: 74px;
}

#creatorDialog .dialog-card select[multiple] {
  min-height: 76px;
  padding: 8px;
}

#creatorDialog .recent-views-block textarea {
  min-height: 62px;
}

#creatorDialog .creator-dialog-details {
  padding: 12px;
  border: 1px solid rgba(198, 174, 255, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

#creatorDialog .creator-dialog-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
}

#creatorDialog .creator-dialog-details summary small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .creator-dialog-details .form-grid {
  margin-top: 12px;
}

#creatorDialog .rating-section {
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
}

#creatorDialog .rating-grid {
  gap: 8px;
}

#creatorDialog .star-field {
  padding: 8px;
}

#creatorDialog .rating-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

#creatorDialog .rating-history-list {
  max-height: 132px;
}

#creatorDialog .rating-history-item {
  grid-template-columns: minmax(100px, 0.8fr) minmax(120px, 0.8fr) minmax(0, 1.2fr);
}

#creatorDialog .dialog-actions {
  position: sticky;
  bottom: -18px;
  margin: 12px -18px -18px;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(198, 174, 255, 0.22);
  background: rgba(31, 20, 48, 0.96);
  backdrop-filter: blur(16px);
}

@media (max-width: 900px) {
  #creatorDialog .creator-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cooperation follow-up: clickable stage chart with identity-only drilldown. */
#pipeline {
  gap: 16px;
}

#pipeline.active {
  display: grid;
}

#pipeline .pipeline-overview-panel {
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid #e7e2f2;
  border-radius: 18px;
  background: #fff;
}

#pipeline .pipeline-overview-heading {
  margin-bottom: 18px;
}

#pipeline .pipeline-overview-heading h2 {
  margin: 3px 0 5px;
  color: #20283a;
  font-size: 22px;
}

#pipeline .pipeline-overview-heading p:last-child {
  margin: 0;
  color: #7b8495;
  font-size: 13px;
}

#pipeline .pipeline-stage-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(108px, 1fr));
  gap: 8px;
  min-width: 590px;
  padding: 12px 4px 18px;
  overflow-x: auto;
}

#pipeline .pipeline-chart-stage {
  --pipeline-stage-color: #8f5cff;
  display: grid;
  grid-template-rows: 26px 122px 24px;
  gap: 8px;
  min-width: 0;
  padding: 10px 9px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #6d7482;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

#pipeline .pipeline-chart-stage.stage-1 { --pipeline-stage-color: #ae6aeb; }
#pipeline .pipeline-chart-stage.stage-2 { --pipeline-stage-color: #d65dba; }
#pipeline .pipeline-chart-stage.stage-3 { --pipeline-stage-color: #ef6b91; }
#pipeline .pipeline-chart-stage.stage-4 { --pipeline-stage-color: #35a877; }

#pipeline .pipeline-chart-stage:hover,
#pipeline .pipeline-chart-stage.is-selected {
  border-color: color-mix(in srgb, var(--pipeline-stage-color) 34%, #ffffff);
  background: color-mix(in srgb, var(--pipeline-stage-color) 7%, #ffffff);
  transform: translateY(-2px);
}

#pipeline .pipeline-chart-stage:focus-visible {
  outline: 3px solid rgba(143, 92, 255, 0.24);
  outline-offset: 2px;
}

#pipeline .pipeline-chart-stage > strong {
  color: #20283a;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

#pipeline .pipeline-chart-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 122px;
  overflow: hidden;
  border-bottom: 1px solid #dfe3ea;
  background: repeating-linear-gradient(to top, transparent 0 29px, #eef0f4 29px 30px);
}

#pipeline .pipeline-chart-plot i {
  display: block;
  width: clamp(34px, 54%, 64px);
  height: var(--pipeline-bar-height);
  min-height: 8px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pipeline-stage-color) 72%, #ffffff), var(--pipeline-stage-color));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pipeline-stage-color) 18%, transparent);
  transition: height 220ms ease;
}

#pipeline .pipeline-chart-label {
  color: #4f5868;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

#pipeline .pipeline-chart-stage.is-selected .pipeline-chart-label {
  color: var(--pipeline-stage-color);
}

#pipeline .pipeline-stage-drilldown {
  padding: 16px;
  border: 1px solid #e8eaf0;
  border-radius: 14px;
  background: #fafbfc;
}

#pipeline .pipeline-stage-drilldown-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

#pipeline .pipeline-stage-drilldown-head span {
  color: #9199a7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

#pipeline .pipeline-stage-drilldown-head h3 {
  margin: 3px 0 0;
  color: #242c3d;
  font-size: 18px;
}

#pipeline .pipeline-stage-drilldown-head > strong {
  color: #6d4da5;
  font-size: 13px;
}

#pipeline .pipeline-creator-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

#pipeline .pipeline-creator-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 60px;
  padding: 9px 11px;
  border: 1px solid #e5e7ec;
  border-radius: 14px;
  background: #fff;
}

#pipeline .pipeline-creator-identity .avatar,
#pipeline .pipeline-creator-identity .avatar-image {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

#pipeline .pipeline-creator-identity > strong {
  min-width: 0;
  overflow: hidden;
  color: #283143;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipeline .pipeline-stage-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px;
  border: 1px dashed #d9dce4;
  border-radius: 14px;
  color: #9098a6;
  text-align: center;
}

#pipeline .agent-advice-panel {
  margin: 0;
}

@media (max-width: 760px) {
  #pipeline .pipeline-stage-chart {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
    min-width: 530px;
  }

  #pipeline .pipeline-creator-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sidebar account and support utilities live at the bottom, where users expect settings. */
.sidebar-footer {
  position: relative;
  z-index: 32;
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 210, 255, 0.12);
}

.sidebar-footer-action {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: rgba(240, 232, 250, 0.82);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}

.sidebar-footer-action:hover,
.sidebar-footer-action[aria-expanded="true"] {
  border-color: rgba(226, 210, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.sidebar-footer-icon.material-icons-round {
  flex: 0 0 auto;
  width: 22px;
  color: rgba(223, 205, 245, 0.88);
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.sidebar-footer .account-menu {
  top: auto;
  right: auto;
  bottom: calc(100% + 12px);
  left: 0;
  max-height: min(620px, calc(100vh - 240px));
  overflow-y: auto;
}

.sidebar-footer .account-menu::before {
  top: auto;
  bottom: -7px;
  left: 22px;
  transform: rotate(225deg);
}

body.sidebar-collapsed .sidebar-footer {
  width: 100%;
  position: sticky;
  bottom: 0;
  justify-items: center;
  padding: 10px 0 2px;
  background: linear-gradient(180deg, rgba(34, 16, 52, 0.18), rgba(34, 16, 52, 0.96) 28%);
}

body.sidebar-collapsed .sidebar-footer-action {
  width: 66px;
  min-height: 54px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 7px 4px;
  text-align: center;
}

body.sidebar-collapsed .sidebar-footer-label {
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

body.sidebar-collapsed .sidebar-footer-icon.material-icons-round {
  width: auto;
  font-size: 22px;
}

body.sidebar-collapsed .sidebar-footer .account-menu {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 18px;
  left: 108px;
  z-index: 1000;
  max-height: calc(100vh - 36px);
}

body.sidebar-collapsed .sidebar-footer .account-menu::before {
  display: none;
}

@media (min-width: 761px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  .sidebar .nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .sidebar .nav-list::-webkit-scrollbar {
    display: none;
  }

  body.sidebar-collapsed .sidebar-footer {
    position: relative;
    bottom: auto;
  }
}

@media (max-width: 760px) {
  .sidebar-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
  }

  .sidebar-footer .account-menu,
  body.sidebar-collapsed .sidebar-footer .account-menu {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: auto;
    left: 16px;
    width: auto;
    max-height: calc(100vh - 32px);
  }
}

@media (max-width: 520px) {
  #pipeline .pipeline-creator-list {
    grid-template-columns: 1fr;
  }
}

/* Creator detail: white, compact, rating-first hierarchy */
#creatorDialog {
  color-scheme: light;
}

#creatorDialog .dialog-card {
  width: min(1080px, calc(100vw - 32px));
  max-width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 72px);
  padding: 0 22px;
  border: 1px solid #e2e5eb;
  border-radius: 18px;
  background: #ffffff;
  color: #20283a;
  box-shadow: var(--elev-1);
  overflow-x: hidden;
  overflow-y: auto;
}

#creatorDialog .section-heading:first-child {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: 0 -22px 12px;
  padding: 16px 74px 14px 22px;
  border-bottom: 1px solid #e7e9ee;
  background: #ffffff;
  backdrop-filter: none;
}

#creatorDialog .section-heading:first-child .eyebrow {
  color: #8b65c8;
}

#creatorDialog .section-heading:first-child h2 {
  color: #20283a;
  font-size: 22px;
  line-height: 1.2;
}

#creatorDialog #closeDialogBtn {
  position: sticky;
  top: 10px;
  width: 40px;
  height: 40px;
  margin-top: -2px;
  border: 1px solid #ddd8e8;
  border-radius: 14px;
  background: #f7f4fc;
  color: #53337e;
  box-shadow: none;
}

#creatorDialog #closeDialogBtn:hover {
  background: #efe9f8;
  color: #5b32b8;
  transform: none;
}

#creatorDialog .creator-dialog-section {
  gap: 8px;
  margin: 10px 0;
}

#creatorDialog .creator-rating-priority {
  margin-top: 0;
}

#creatorDialog .rating-section {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #ddd5ed;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(57, 43, 84, 0.07);
}

#creatorDialog .rating-section .section-heading {
  margin: 0;
}

#creatorDialog .rating-section .section-heading h2 {
  color: #20283a;
  font-size: 18px;
}

#creatorDialog .rating-section .eyebrow {
  color: #8b65c8;
}

#creatorDialog #ratingPreview {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f4f0fb;
  color: #68429d;
  font-size: 13px;
}

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

#creatorDialog .star-field {
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #e7e9ee;
  border-radius: 10px;
  background: #fafbfc;
}

#creatorDialog .star-field span {
  color: #626c7d;
  font-size: 12px;
}

#creatorDialog .star-input {
  gap: 2px;
}

#creatorDialog .star-button {
  color: #d6dae2;
  font-size: 18px;
}

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

#creatorDialog .rating-entry-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px;
}

#creatorDialog .rating-entry-grid label {
  display: grid;
  gap: 4px;
  color: #4f596b;
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .rating-entry-grid textarea {
  min-height: 40px;
  resize: vertical;
}

#creatorDialog .rating-history-panel {
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e7e9ee;
  border-radius: 10px;
  background: #fafbfc;
}

#creatorDialog .rating-history-head strong {
  color: #30394b;
}

#creatorDialog .rating-history-head span,
#creatorDialog .rating-history-empty,
#creatorDialog .rating-history-item span,
#creatorDialog .rating-history-item p {
  color: #7a8494;
}

#creatorDialog .rating-history-list {
  max-height: 88px;
}

#creatorDialog .rating-history-item {
  padding: 7px 8px;
  border-color: #e4e7ec;
  background: #ffffff;
}

#creatorDialog .rating-history-item strong,
#creatorDialog .rating-history-score b {
  color: #30394b;
}

#creatorDialog .creator-summary-section {
  margin: 8px 0 12px;
}

#creatorDialog .creator-ai-summary {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #ded5ef;
  border-radius: 14px;
  background: #f7f4fc;
  box-shadow: none;
}

#creatorDialog .creator-ai-heading {
  display: flex;
  gap: 8px;
  align-items: center;
}

#creatorDialog .creator-ai-heading img {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  border: 1px solid #e2daef;
  border-radius: 50%;
  background: #ffffff;
}

#creatorDialog .creator-ai-heading span {
  display: grid;
  width: auto;
  gap: 2px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #573581;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

#creatorDialog .creator-ai-heading span small {
  padding: 0;
  background: transparent;
  color: #8b79a5;
  font-size: 11px;
  font-weight: 700;
}

#creatorDialog .creator-ai-summary > strong {
  color: #20283a;
  font-size: 15px;
  line-height: 1.3;
}

#creatorDialog .creator-ai-summary > p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

#creatorDialog .creator-ai-summary .creator-ai-next {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ebe5f5;
  color: #6b4d91;
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .creator-profile-section {
  padding: 12px 14px 14px;
  border: 1px solid #e7e9ee;
  border-radius: 14px;
  background: #ffffff;
}

#creatorDialog .creator-profile-section > .section-heading {
  margin: 0;
}

#creatorDialog .creator-profile-section > .section-heading h2 {
  color: #20283a;
  font-size: 18px;
}

#creatorDialog .creator-profile-section > .section-heading .eyebrow {
  color: #8b65c8;
}

#creatorDialog .creator-update-meta {
  margin: -2px 0 4px;
  color: #7a8494;
  font-size: 12px;
}

#creatorDialog .creator-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#creatorDialog .creator-form-grid label,
#creatorDialog .dialog-card label,
#creatorDialog .dialog-card .section-heading h2,
#creatorDialog .dialog-card .star-field span {
  color: #30394b;
}

#creatorDialog .creator-form-grid label {
  gap: 4px;
  font-size: 12px;
}

#creatorDialog .dialog-card input,
#creatorDialog .dialog-card select,
#creatorDialog .dialog-card textarea {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #dfe3e9;
  border-radius: 10px;
  background: #fbfcfd;
  color: #20283a;
  font-size: 13px;
}

#creatorDialog .dialog-card input:focus,
#creatorDialog .dialog-card select:focus,
#creatorDialog .dialog-card textarea:focus {
  border-color: #9c7ac8;
  outline: 2px solid rgba(139, 101, 200, 0.13);
}

#creatorDialog .dialog-card input::placeholder,
#creatorDialog .dialog-card textarea::placeholder {
  color: #a0a7b4;
}

#creatorDialog .dialog-card select[multiple],
#creatorDialog #creatorProjectsInput {
  min-height: 48px;
  max-height: 58px;
  padding: 5px 8px;
  background: #fbfcfd;
}

#creatorDialog #creatorProjectsInput option {
  padding: 3px 5px;
  color: #30394b;
}

#creatorDialog .creator-platform-note {
  margin: -2px 0 0;
  color: #7a8494;
  font-size: 11px;
  line-height: 1.4;
}

#creatorDialog .creator-dialog-details {
  padding: 10px 12px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fafbfc;
}

#creatorDialog .creator-dialog-details summary {
  color: #30394b;
  font-size: 13px;
}

#creatorDialog .creator-dialog-details summary small {
  color: #7a8494;
  font-size: 11px;
}

#creatorDialog .creator-dialog-empty,
#creatorDialog .trend-line-card,
#creatorDialog .creator-dialog-post-card {
  border-color: #e4e7ec;
  background: #fafbfc;
  color: #4f596b;
}

#creatorDialog .creator-dialog-post-card strong,
#creatorDialog .trend-line-card strong,
#creatorDialog .trend-line-card span {
  color: #30394b;
}

#creatorDialog .dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 12;
  margin: 12px -22px 0;
  padding: 11px 22px 13px;
  border-top: 1px solid #e7e9ee;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}

#creatorDialog .dialog-actions .ghost-button {
  border-color: #dfe3e9;
  background: #ffffff;
  color: #4f596b;
}

#creatorDialog .dialog-actions .danger {
  border-color: #efb2c9;
  color: #bb2d60;
}

@media (max-width: 900px) {
  #creatorDialog .dialog-card {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    max-height: calc(100vh - 72px);
    padding: 0 14px;
  }

  #creatorDialog .section-heading:first-child {
    margin: 0 -14px 10px;
    padding: 14px 62px 12px 14px;
  }

  #creatorDialog .rating-grid,
  #creatorDialog .creator-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  #creatorDialog .dialog-actions {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

/* Creator detail workflow final size lock */
#creatorDialog .dialog-card #creatorProjectsInput {
  min-height: 40px;
  max-height: 40px;
}

@media (max-width: 560px) {
  #creatorDialog .rating-grid,
  #creatorDialog .creator-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  #creatorDialog .creator-form-grid {
    grid-template-columns: 1fr;
  }
}

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

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

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

.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: 8px;
  margin-top: 16px;
}

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

.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: 600;
}

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

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

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

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

  .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: 16px;
  }

  .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: 14px;
  padding: 8px;
}
/* Sidebar stays fixed while content scrolls — standard SaaS pattern */
.sidebar {
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* 2 ── Account actions live behind the Zeren logo to avoid accidental sidebar exits */

/* 3 ── Topbar: reduce eyebrow visual noise, let the title breathe */
.topbar .eyebrow {
  font-size: 11px;
  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: 15px; }

/* 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: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.list-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  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;
}

.auto-refresh-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(65, 211, 158, 0.34);
  border-radius: 999px;
  background: rgba(65, 211, 158, 0.08);
  color: #167a5b;
  font-size: 12px;
  font-weight: 600;
}

.auto-refresh-status.is-off {
  border-color: #d9e0ea;
  background: #f7f9fc;
  color: #7a8494;
}

/* 清空筛选 — 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: 10px;
  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; }
}

/* Collaboration lifecycle hard gates and evidence-first controls. */
#pipeline .pipeline-stage-chart {
  grid-template-columns: none;
  grid-auto-columns: minmax(116px, 1fr);
  grid-auto-flow: column;
  min-width: 0;
  scrollbar-color: #b9a8df transparent;
}

#pipeline .pipeline-chart-stage {
  grid-template-rows: 24px 82px 22px;
}

#pipeline .pipeline-chart-plot {
  min-height: 82px;
}

#pipeline .pipeline-creator-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

#pipeline .pipeline-creator-identity {
  display: grid;
  align-items: stretch;
  gap: 8px;
  min-height: 148px;
  padding: 12px;
}

#pipeline .pipeline-creator-open {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #283143;
  text-align: left;
  cursor: pointer;
}

#pipeline .pipeline-creator-open span,
#pipeline .pipeline-creator-open strong,
#pipeline .pipeline-creator-open small {
  display: block;
  min-width: 0;
}

#pipeline .pipeline-creator-open strong,
#pipeline .pipeline-creator-open small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipeline .pipeline-creator-open small {
  margin-top: 4px;
  color: #737d8e;
  font-size: 12px;
}

#pipeline .pipeline-creator-identity > p {
  margin: 0;
  color: #4f596a;
  font-size: 12px;
  line-height: 1.45;
}

#pipeline .pipeline-creator-identity > p span {
  display: block;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 700;
}

#pipeline .pipeline-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#pipeline .pipeline-card-footer > span {
  overflow: hidden;
  color: #6c7585;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipeline .pipeline-card-footer select {
  min-height: 34px;
  border: 1px solid #d8dce6;
  border-radius: 10px;
  background: #fff;
  color: #4b365f;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-table-section {
  overflow-x: auto;
  scrollbar-color: #baa8dd transparent;
}

#favorites .favorite-status-badge.needs-data {
  background: #fff0e3;
  color: #9a4c08;
}

#favorites .favorite-select-control.needs-email input:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.sender-setup-callout {
  border-color: #e3c27d;
  background: #fffaf0;
}

.sender-setup-callout strong {
  color: #6f4500;
}

.sender-setup-callout p {
  color: #4f5968;
}

#contracts .contract-card {
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1fr) minmax(280px, 1.15fr) auto;
}

#contracts .contract-file-row {
  flex-wrap: wrap;
}

#contracts .contract-schedule-badge {
  flex-basis: 100%;
  color: #9a4c08;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

#contracts .contract-schedule-badge.is-ready {
  color: #137454;
}

.manual-confirmation-dialog-card {
  width: min(720px, calc(100vw - 32px));
}

.manual-confirmation-target {
  margin: 0 0 12px;
  color: #3b2c51;
  font-size: 15px;
  font-weight: 700;
}

.manual-confirmation-warning {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #e3c27d;
  border-radius: 14px;
  background: #fffaf0;
  color: #4f5968;
  font-size: 12px;
  line-height: 1.5;
}

.manual-confirmation-warning strong {
  color: #6f4500;
}

@media (max-width: 1180px) {
  #contracts .contract-card {
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr) auto;
  }
}

@media (max-width: 760px) {
  #pipeline .pipeline-creator-list,
  #contracts .contract-card {
    grid-template-columns: 1fr;
  }
}
/* System settings: full-page workspace, replacing the former sidebar popover. */
.sidebar-footer-action[aria-current="page"] {
  border-color: rgba(226, 210, 255, 0.24);
  background: linear-gradient(135deg, rgba(143, 92, 255, 0.3), rgba(255, 61, 110, 0.18));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body[data-current-view="settings"] .main {
  padding-right: 20px;
  padding-bottom: 24px;
}

#settings {
  color: #172033;
}

#settings .settings-shell {
  min-height: calc(100vh - 96px);
  overflow: hidden;
  border: 1px solid rgba(222, 226, 235, 0.9);
  border-radius: 18px;
  background: #f7f8fb;
  box-shadow: var(--elev-1);
}

#settings .settings-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 18px 26px;
  border-bottom: 1px solid #e6e9ef;
  background: #fff;
}

#settings .settings-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#settings .settings-page-head .eyebrow,
#settings .settings-kicker {
  margin: 0 0 7px;
  color: #7d5bd1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#settings .settings-page-head h2,
#settings .settings-section-head h3,
#settings .payout-calculator h4 {
  margin: 0;
  color: #151d2e;
  letter-spacing: -0.02em;
}

#settings .settings-page-head h2 {
  font-size: 22px;
  line-height: 1.2;
}

#settings .settings-page-head p,
#settings .settings-section-head p,
#settings .payout-calculator p,
#settings .payout-flow p,
#settings .settings-coming-soon p,
#settings .payout-provider-card p,
#settings .payout-fee-card p {
  margin: 6px 0 0;
  color: #747e8e;
  font-size: 13px;
  line-height: 1.55;
}

#settings .settings-section-head p {
  margin-top: 4px;
  font-size: 12px;
}

#settings .settings-status-pill,
#settings .settings-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eef8f3;
  color: #2e8d63;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#settings .settings-status-pill .material-icons-round {
  font-size: 15px;
}

#settings .settings-layout {
  display: block;
}

#settings .settings-nav {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid #e0dcec;
  border-radius: 14px;
  background: #f4f2f9;
}

#settings .settings-nav-item[hidden] {
  display: none;
}

#settings .settings-nav-item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #626b7b;
  text-align: left;
  box-shadow: none;
}

#settings .settings-nav-item > .material-icons-round {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: 18px;
}

#settings .settings-nav-item strong,
#settings .settings-nav-item small {
  display: block;
}

#settings .settings-nav-item strong {
  font-size: 13px;
  font-weight: 700;
}

#settings .settings-nav-item small {
  display: none;
}

#settings .settings-nav-item:hover {
  background: #e9e4f5;
  color: #4a2f92;
}

#settings .settings-nav-item.active {
  background: #6847c8;
  color: #fff;
  box-shadow: 0 5px 12px rgba(104, 71, 200, 0.24);
}

#settings .settings-nav-item.active strong {
  color: #fff;
  font-weight: 600;
}

#settings .settings-content {
  min-width: 0;
  min-height: calc(100vh - 240px);
  padding: 22px 26px 26px;
  background: #fff;
}

#settings .settings-panel[hidden] {
  display: none;
}

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

#settings .settings-section-head h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

#settings .settings-draft-badge {
  background: #f0ebfb;
  color: #6e45c1;
}

#settings .settings-draft-badge--warning {
  background: #fff4df;
  color: #a66a13;
}

#settings .settings-account-grid,
#settings .credit-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#settings .settings-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-content: center;
  min-width: 0;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid #e2e6ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-1);
}

#settings .credit-metric-grid article {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 84px;
  padding: 12px 16px;
  border: 1px solid #e2e6ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-1);
}

#settings .settings-summary-card > .material-icons-round {
  display: grid;
  grid-row: 1 / 4;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #eef3ff;
  color: #5079dc;
  font-size: 18px;
}

#settings .settings-summary-card--primary {
  border-color: #d7caf1;
  background: linear-gradient(145deg, #faf8ff, #fff);
}

#settings .settings-summary-card--primary > .material-icons-round {
  background: #efe8fb;
  color: #7043c5;
}

#settings .credit-metric-grid small,
#settings .payout-provider-card small,
#settings .payout-fee-card small {
  display: block;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 600;
}

#settings .settings-summary-card small {
  display: block;
  grid-column: 2;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 600;
}

#settings .settings-summary-card strong {
  display: block;
  grid-column: 2;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1b2333;
  font-size: 15px;
  line-height: 1.2;
}

#settings .credit-metric-grid strong {
  display: block;
  max-width: none;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #1b2333;
  font-size: 18px;
  line-height: 1.1;
}

#settings .settings-summary-card p {
  display: block;
  grid-column: 2;
  margin: 3px 0 0;
  color: #7e8795;
  font-size: 12px;
  line-height: 1.45;
}

#settings .credit-metric-grid span {
  display: block;
  margin: 3px 0 0;
  color: #7e8795;
  font-size: 12px;
  line-height: 1.45;
}

#settings .settings-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

#settings .settings-account-actions .ghost-button {
  min-height: 34px;
  padding: 0 12px;
  border-color: #dbe0e8;
  background: #fff;
  color: #4b5568;
}

#settings .settings-account-actions .ghost-button.danger {
  margin-left: 0;
  border-color: #ffd4dc;
  color: #c74460;
}

#settings .settings-account-switch {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #f7f8fa;
}

#settings .settings-account-switch[hidden] {
  display: none;
}

#settings .settings-inline-head strong,
#settings .settings-inline-head small {
  display: block;
}

#settings .settings-inline-head strong {
  color: #2d3546;
  font-size: 13px;
}

#settings .settings-inline-head small {
  margin-top: 3px;
  color: #87909e;
  font-size: 12px;
}

#settings .settings-remembered-accounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

#settings .remembered-account {
  display: block;
  padding: 11px 12px;
  border: 1px solid #dde2ea;
  border-radius: 10px;
  background: #fff;
  color: #364052;
}

#settings .remembered-account span,
#settings .remembered-account small {
  display: block;
}

#settings .remembered-account small {
  margin-top: 4px;
  color: #9098a5;
  font-size: 11px;
}

#settings .account-empty {
  color: #87909e;
}

#settings .settings-inline-notice {
  margin: 7px 0 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #828a98;
  font-size: 12px;
  font-weight: 600;
}

#settings .settings-team-area {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#settings .settings-team-area[hidden] {
  display: none;
}

/* 团队子分区用下划线式标签，明确低于顶部实心导航一级 */
#settings .team-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e6e9ef;
  border-radius: 0;
  background: transparent;
}

#settings .team-tab {
  min-height: 36px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #798394;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

#settings .team-tab:hover {
  color: #4a2f92;
}

#settings .team-tab.active {
  border-bottom-color: #6847c8;
  background: transparent;
  color: #3f2a7d;
  font-weight: 700;
  box-shadow: none;
}

#settings .team-side-form {
  gap: 8px;
  padding: 16px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #f8f9fc;
}

#settings .team-side-form h3,
#settings .team-list-head strong,
#settings .team-user-row strong,
#settings .team-share-row strong {
  color: #242d3d;
}

#settings .team-side-form label {
  color: #5d6675;
  font-size: 12px;
}

#settings .team-side-form input,
#settings .team-side-form select,
#settings .team-user-row select {
  min-height: 38px;
  font-size: 13px;
  border-color: #d8dee7;
  background: #fff;
  color: #273043;
}

#settings .team-side-form select option,
#settings .team-user-row select option {
  background: #fff;
  color: #273043;
}

#settings .team-user-row,
#settings .team-share-row,
#settings .team-empty {
  border-color: #e1e6ee;
  background: #fff;
}

#settings .team-user-row span,
#settings .team-user-row small,
#settings .team-share-row span,
#settings .team-empty {
  color: #768090;
}

#settings .team-grid {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#settings .team-list-wrap {
  min-width: 0;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e4e8ef;
  border-radius: 14px;
  background: #f8f9fc;
}

#settings .team-list-head {
  gap: 12px;
  align-items: center;
}

#settings .team-list-head strong {
  font-size: 15px;
  font-weight: 700;
}

#settings .team-list-head .ghost-button,
#settings .team-share-head .ghost-button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #cfc4e8;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font-weight: 600;
  opacity: 1;
  box-shadow: 0 3px 10px rgba(61, 44, 97, 0.06);
}

#settings .team-side-form > .primary-button {
  justify-self: start;
  width: fit-content;
  min-height: 38px;
  padding: 0 18px;
}

/* 设置页统一用实心紫动作按钮，不用全局的紫粉渐变 */
#settings .primary-button {
  border-color: transparent;
  background: #6847c8;
  color: #fff;
  box-shadow: 0 8px 20px rgba(104, 71, 200, 0.2);
}

#settings .primary-button:hover:not(:disabled) {
  background: #563a9e;
}

#settings .primary-button:disabled {
  background: #eeecf4;
  color: #a9a3b8;
  box-shadow: none;
}

#settings .team-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "identity controls actions";
  gap: 8px 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
}

#settings .team-user-identity {
  grid-area: identity;
  min-width: 0;
}

#settings .team-user-identity strong,
#settings .team-user-identity span,
#settings .team-user-login {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settings .team-user-identity strong,
#settings .team-user-identity > span {
  display: block;
}

#settings .team-user-identity strong {
  font-size: 13px;
}

#settings .team-user-identity > span {
  margin-top: 1px;
  font-size: 12px;
}

/* 内测身份和最近登录并排成一行，身份区控制在两三行内 */
#settings .team-user-identity small {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  vertical-align: middle;
}

#settings .team-user-tester-code + .team-user-login::before {
  content: "·";
  margin: 0 6px;
  color: #b6bdc9;
}

#settings .team-user-controls {
  grid-area: controls;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#settings .team-user-controls select {
  width: auto;
  min-width: 96px;
  min-height: 34px;
  padding: 0 30px 0 10px;
  border-radius: 10px;
  font-size: 12px;
}

#settings .team-user-controls .team-user-brand {
  max-width: 150px;
}

#settings .team-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* 分享行与成员行、邀请行统一为「身份 | 状态 | 操作」单行结构 */
#settings .team-share-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
}

#settings .team-share-row > div {
  min-width: 0;
}

#settings .team-share-row strong,
#settings .team-share-row > div span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settings .team-share-row strong {
  font-size: 13px;
}

#settings .team-share-row > div span {
  margin-top: 1px;
  font-size: 12px;
}

#settings .team-share-row > .text-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d8ddea;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font-weight: 600;
  opacity: 1;
  white-space: nowrap;
}

#settings .team-share-row > .text-button.danger {
  border-color: #f0c4ce;
  background: #fff3f5;
  color: #bd3555;
}

#settings .team-row-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#settings .team-row-actions .text-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d8ddea;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font-weight: 600;
  opacity: 1;
  white-space: nowrap;
}

#settings .team-row-actions .text-button:hover {
  border-color: #b9a9dc;
  background: #f7f3ff;
}

#settings .team-row-actions .text-button.danger {
  border-color: #f0c4ce;
  background: #fff3f5;
  color: #bd3555;
}

#settings .team-user-list,
#settings .team-share-list {
  display: grid;
  gap: 8px;
}

/* 老板视角：左边成员列表，右边该成员的只读名单 */
#settings .team-overview-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#settings .team-overview-members,
#settings .team-overview-creators {
  display: grid;
  gap: 8px;
  max-height: 460px;
  overflow: auto;
}

#settings .team-overview-member {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

#settings .team-overview-member:hover {
  border-color: #c4b6e6;
  background: #f9f7ff;
}

#settings .team-overview-member.is-active {
  border-color: #6847c8;
  background: #f4f0ff;
}

#settings .team-overview-member-name {
  color: #242d3d;
  font-size: 13px;
  font-weight: 700;
}

#settings .team-overview-member-meta,
#settings .team-overview-member-count {
  color: #768090;
  font-size: 12px;
  font-weight: 600;
}

#settings .team-overview-creator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #fff;
}

#settings .team-overview-creator strong {
  display: block;
  overflow: hidden;
  color: #242d3d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settings .team-overview-creator > div > span {
  color: #768090;
  font-size: 12px;
}

#settings .team-overview-creator-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: #5a6478;
  font-size: 12px;
  font-weight: 600;
}

#settings .team-overview-creator .text-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d9d0ee;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  opacity: 1;
}

@media (max-width: 1100px) {
  #settings .team-overview-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

#settings .team-status.active {
  background: #e8f7ef;
  color: #27805a;
}

#settings .team-status.pending {
  background: #fff1d9;
  color: #9b6519;
}

#settings .team-status.disabled {
  background: #eef0f4;
  color: #77808e;
}

#settings .credit-balance-card {
  border-color: #d5caf1;
  background: #faf8ff;
}

#settings .credit-package-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

#settings .credit-package {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 110px;
  padding: 14px 16px;
  border: 1px solid #dde2e9;
  border-radius: 14px;
  background: #fff;
  color: #2f384a;
  text-align: left;
}

#settings .credit-package:hover,
#settings .credit-package.active {
  border-color: #9d7dde;
  background: #fbf9ff;
  box-shadow: 0 8px 24px rgba(105, 68, 184, 0.1);
}

#settings .credit-package span {
  color: #7148c3;
  font-size: 12px;
  font-weight: 700;
}

#settings .credit-package strong {
  font-size: 15px;
}

#settings .credit-package small {
  color: #858e9d;
  font-size: 12px;
}

#settings .settings-coming-soon {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #f7f8fa;
}

#settings .settings-coming-soon > .material-icons-round {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: #eee8fb;
  color: #7146c5;
}

#settings .settings-coming-soon strong {
  color: #283143;
}

#settings .settings-coming-soon .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

#settings .payout-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.6fr);
  gap: 16px;
}

#settings .payout-provider-card,
#settings .payout-fee-card,
#settings .payout-calculator {
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-1);
}

#settings .payout-provider-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
}

#settings .payout-provider-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 14px;
  background: #e9f2ff;
  color: #3d74cf;
}

#settings .payout-provider-card strong {
  display: block;
  margin-top: 3px;
  color: #20293a;
  font-size: 15px;
}

#settings .payout-method-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#settings .payout-method-list span {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid #e2ddef;
  border-radius: 999px;
  background: #f8f7fc;
  color: #4c4368;
  font-size: 12px;
  font-weight: 700;
}

#settings .payout-provider-card .ghost-button:disabled {
  cursor: not-allowed;
  border-color: #dfe3e9;
  color: #929aa7;
  opacity: 0.85;
}

#settings .payout-fee-card {
  padding: 16px;
  border-color: #dfd3f3;
  background: #faf8ff;
}

#settings .payout-fee-card strong {
  display: block;
  margin-top: 14px;
  color: #6638bc;
  font-size: 38px;
  line-height: 1;
}

#settings .payout-calculator {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 0.65fr) minmax(230px, 0.8fr);
  gap: 20px;
  align-items: center;
  margin-top: 16px;
  padding: 20px;
}

#settings .payout-calculator label {
  display: grid;
  gap: 8px;
  color: #5e6878;
  font-size: 12px;
  font-weight: 600;
}

#settings .payout-calculator input {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #d8dee7;
  border-radius: 10px;
  background: #fff;
  color: #20293a;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

#settings .payout-calculator dl {
  margin: 0;
}

#settings .payout-calculator dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #eceef2;
  color: #687284;
  font-size: 12px;
}

#settings .payout-calculator dt,
#settings .payout-calculator dd {
  margin: 0;
}

#settings .payout-calculator dd {
  color: #20293a;
  font-weight: 700;
}

#settings .payout-calculator .payout-total {
  border-bottom: 0;
  color: #4f2d98;
  font-weight: 700;
}

#settings .payout-calculator .payout-total dd {
  color: #6838bc;
  font-size: 15px;
}

#settings .payout-calculator > small {
  grid-column: 1 / -1;
  color: #9098a5;
  font-size: 11px;
}

#settings .payout-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#settings .payout-flow article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 16px;
  border: 1px solid #e1e5ec;
  border-radius: 14px;
  background: #f8f9fb;
}

#settings .payout-flow article > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #e8e0f7;
  color: #6638b8;
  font-size: 12px;
  font-weight: 700;
}

#settings .payout-flow strong {
  color: #283143;
  font-size: 12px;
}

@media (max-width: 1100px) {
  #settings .settings-page-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #settings .settings-head-actions {
    align-items: flex-start;
    width: 100%;
  }

  #settings .team-grid {
    grid-template-columns: 1fr;
  }

  #settings .team-side-form {
    width: 100%;
    max-width: 480px;
  }

  #settings .payout-overview,
  #settings .payout-calculator {
    grid-template-columns: 1fr;
  }

  #settings .team-user-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "controls"
      "actions";
  }

  #settings .team-user-controls,
  #settings .team-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  body[data-current-view="settings"] .main {
    padding-right: 12px;
    padding-left: 12px;
  }

  #settings .settings-shell {
    border-radius: 14px;
  }

  #settings .settings-page-head {
    gap: 12px;
    min-height: 0;
    padding: 16px 18px;
  }

  #settings .settings-status-pill {
    display: none;
  }

  #settings .settings-nav {
    display: flex;
    width: 100%;
    padding: 4px;
  }

  #settings .settings-nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    text-align: center;
  }

  #settings .settings-content {
    padding: 18px 14px;
  }

  #settings .settings-account-actions .ghost-button,
  #settings .settings-coming-soon .primary-button,
  #settings .payout-provider-card .ghost-button {
    width: auto;
    margin-left: 0;
  }

  #settings .settings-account-grid,
  #settings .credit-metric-grid,
  #settings .credit-package-list,
  #settings .payout-flow {
    grid-template-columns: 1fr;
  }

  #settings .settings-coming-soon,
  #settings .payout-provider-card {
    grid-template-columns: 1fr;
  }
}


/* ──────────────────────────────────────────────────────────
   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: 14px;
  background: #fff;
  border: 1px solid #ecf0f6;
  box-shadow: var(--elev-1);
  overflow: hidden;
}

/* Header row: airier, lighter, more breathable */
#creators thead th {
  height: auto;
  padding: 16px 18px;
  background: #fafbfd;
  color: #8e98a8;
  font-size: 12px;
  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: 16px;
}
#creators .creator-cell .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 15px;
  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: 12px;
  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;
}

/* 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; }
#creators .star-half {
  background: linear-gradient(90deg, #ffd166 50%, #e3e7ee 50%);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Filter summary panel: lighter card */
#creators .filter-summary {
  border-radius: 14px;
  border: 1px solid #ecf0f6;
  background: #fff;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--elev-1);
}

/* 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: 15px;
}

/* ──────────────────────────────────────────────────────────
   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: 10px;
  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: 12px;
  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: 8px;
  padding: 16px;
  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: 8px;
  flex-wrap: wrap;
}
.contract-card-title .creator-link,
.contract-card-title strong {
  font-size: 15px;
  font-weight: 600;
  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: 12px;
  font-weight: 600;
  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: 12px;
  font-weight: 600;
  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: 12px;
  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: 8px;
  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: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(143, 92, 255, 0.18);
  border: 1px solid rgba(143, 92, 255, 0.42);
  color: #c5b7ff;
  font-size: 12px;
  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: 12px;
  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: 10px;
  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: 8px;
}
.project-select-row select { flex: 1; min-width: 0; }
.project-select-row .icon-action {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  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;
}

/* 已删：原来这里有一条带五个 !important 的规则，把按钮钉在 38px 高——
   那是按钮还挤在筛选行末格时的决定（"明显但不撑高"）。
   现在按钮整宽独占一行，前提没了，规则也就该走了。
   查这个问题花的时间比写整个表单还长：!important 压过任何选择器优先级，
   而按钮的新规则完整加载、优先级最高、看起来毫无问题。 */

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

/* 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: 15px !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: 15px !important;
  border-radius: 8px !important;
}

.recent-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #7a8494;
  font-size: 12px;
  font-weight: 600;
}

.recent-search-row[hidden] {
  display: none;
}

.recent-search-row > span {
  white-space: nowrap;
}

.recent-search-chips {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.recent-search-chip {
  display: inline-flex;
  align-items: center;
  max-width: min(280px, 100%);
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.recent-search-chip button {
  min-height: 30px;
  border: 0;
  background: transparent;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
}

.recent-search-chip button:first-child {
  min-width: 0;
  padding: 0 10px 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-search-remove {
  width: 28px;
  padding: 0;
  color: #8a95a7 !important;
  border-left: 1px solid #edf0f5 !important;
}

.recent-search-remove:hover {
  color: #d92d7d !important;
  background: #fff3f8 !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: 10px;
  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: 16px;
  padding: 14px 18px;
  margin: 0 0 12px;
  border-radius: 14px;
  border: 1px solid #ecf0f6;
  background: linear-gradient(180deg, #fbfbff, #fff);
  box-shadow: var(--elev-1);
}

.project-pill-bar-label {
  flex-shrink: 0;
}
.project-pill-bar-label .eyebrow {
  font-size: 11px;
  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: 8px;
  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: 10px;
  background: #f1f3f8;
  color: #6b7585;
  font-size: 12px;
  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: var(--elev-1);
}

.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: 12px;
  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: 14px;
  width: fit-content;
}

.outreach-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  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: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 700;
}
.outreach-tab.active .outreach-tab-badge {
  background: rgba(255, 255, 255, 0.24);
}

.outreach-tab-status {
  font-size: 12px;
  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: 16px;
}
.outreach-pane[hidden] { display: none; }

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

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

.compose-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(226, 210, 255, 0.1);
  border-radius: 14px;
}
.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: 8px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 210, 255, 0.1);
}
.compose-side-label strong {
  font-size: 15px;
  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: 12px !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: 12px;
  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: 8px;
}
.compose-field span {
  font-size: 12px;
  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: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  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: 16px;
  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: 8px;
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
}

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

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

.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: 16px;
  margin: 14px 0 18px;
}

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

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

/* 这是白底弹窗：撤掉 .dialog-card 的暗色主题白字，否则文字与卡片同色看不见 */
.sender-settings-dialog-card .section-heading h2,
.sender-settings-dialog-card .sender-account-card-head strong {
  color: #1f2a3a;
}

.sender-settings-dialog-card .eyebrow {
  color: #6847c8;
}

.sender-settings-dialog-card .muted,
.sender-settings-dialog-card label,
.sender-settings-dialog-card .email-settings-grid label {
  color: #5a6478;
}

.sender-settings-dialog-card .email-settings-grid label > span {
  color: #414c60;
  font-weight: 600;
}

.sender-settings-dialog-card input,
.sender-settings-dialog-card select {
  min-height: 42px;
  border: 1px solid #d8dee7;
  border-radius: 10px;
  background: #fff;
  color: #1f2a3a;
  font-size: 13px;
}

.sender-settings-dialog-card input::placeholder {
  color: #98a1b1;
}

.sender-settings-dialog-card select option {
  background: #fff;
  color: #1f2a3a;
}

.sender-settings-dialog-card .icon-button {
  border: 1px solid #dfe3ea;
  background: #fff;
  color: #5a6478;
  font-size: 18px;
  line-height: 1;
}

.sender-settings-dialog-card .icon-button:hover {
  border-color: #c4b6e6;
  background: #f7f4ff;
  color: #4a2f92;
}

.sender-settings-dialog-card .ghost-button {
  border: 1px solid #cfc4e8;
  background: #fff;
  color: #5b32b8;
  font-weight: 600;
  opacity: 1;
}

.sender-settings-dialog-card .primary-button {
  border-color: transparent;
  background: #6847c8;
  color: #fff;
  box-shadow: 0 8px 20px rgba(104, 71, 200, 0.2);
}

.sender-settings-dialog-card .dialog-actions {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 28%);
}

.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: 700;
}

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

.sender-setup-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 209, 102, 0.45);
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.12);
}

.sender-setup-callout[hidden] {
  display: none;
}

.sender-setup-callout strong {
  display: block;
  color: #ffd166;
  font-size: 15px;
  font-weight: 700;
}

.sender-setup-callout p {
  margin: 4px 0 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.55;
}

.sender-setup-callout .primary-button {
  min-height: 38px;
  padding: 0 18px;
  white-space: nowrap;
}

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

.sender-account-card {
  padding: 16px;
  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: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #efe7ff;
}

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

.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: 14px;
  background: #fbf8ff;
}

.cc-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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: 700;
}

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

.recipients-action-row {
  display: flex;
  gap: 8px;
  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: 14px;
  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: 8px;
  font-size: 12px;
  font-weight: 700;
}
.sent-ok { color: #43d39e; }
.sent-fail { color: #ff8a8a; }

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

.sent-email-recipients {
  font-size: 12px;
  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: 600;
  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: 10px;
  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: 13px;
  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: 14px;
  width: fit-content;
}
.contracts-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  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: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  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 */
/* 卡片分层（2026-08-25 收敛）
   Lucie：「卡片的框感」+「卡中卡」都要改，参考 McLeuker 的克制。
   实测改前：22 类卡片同时有 边框+阴影+圆角，37 处卡中卡。

   根子就在这条规则：#dashboard .workspace-panel（外层面板）和
   #dashboard .metric-card（面板里的内层卡）原本写在**同一条选择器**里，
   同底色同边框同阴影——代码里从来没把它们当成两个层级，
   于是内层卡是"白卡贴在白卡上"，只能靠一圈边框被看见。

   McLeuker 的做法是用**底色**分层、不靠描边。拆成两条：
   - 外层：白底压在 #f6f4fb 页面底上本就有明暗差 → 只留发丝边，去阴影。
     边框和阴影在同一个元素上是同一件事做两遍。
   - 内层：改用已有的 --surface-soft（就是页面底色）做"下沉面"，
     去边框去阴影 → 它靠比周围白底暗一点被看见。

   一个颜色都没新增，用的都是 tokens 里已有的值。
   弹窗 .dialog-card 不在此列——它浮在遮罩上，阴影是它表达"浮起"的唯一手段。 */
#outreach .workspace-panel,
#pipeline .workspace-panel,
#pipeline .kanban-column,
#contracts .workspace-panel,
#calendar .workspace-panel,
#calendar .calendar-workspace,
#dashboard .workspace-panel,
#dashboard .database-banner,
#attribution .workspace-panel,
#similarity .workspace-panel {
  background: #fff;
  border: 1px solid #ecf0f6;
  box-shadow: none;
  color: #1f2a3a;
  backdrop-filter: none;
}

/* 内层卡：下沉面，不描边 */
#dashboard .metric-card {
  /* 写死浅色：--surface-soft 只在 day 主题定义，夜间未定义会回落成
     近乎透明，压在白卡上文字掉到 2.6:1（实测）。 */
  background: #f6f4fb;
  border: 1px solid transparent;
  box-shadow: none;
  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;
}

/* 页头 eyebrow 的最终保证：统一走 --muted。
   特异性 (0,3,0)，压得过 `.smart-search-panel .eyebrow` 这类 (0,2,0) 的
   面板级覆盖，而且不靠"写在后面"——靠文件顺序赢的规则，
   下次有人插一条就又坏了。
   只命中页头里的 eyebrow：.smart-search-panel 里还有「已有关系」
   「线上发现结果」两个 eyebrow 在页头之外，它们保持原样。 */
.page-head .page-head-copy .eyebrow { color: var(--muted); }

/* 原来这里把 7 个页面的 eyebrow 压成 #98a1b1（实测 2.39:1），
   而没被点名的 Campaign / 网红名单走基础规则 var(--muted)＝#737d8e（3.81:1）。
   同一个页头组件在不同页面呈现三种颜色，正是「拼凑感」的来源之一。
   已移除 eyebrow 选择器，统一回它自己的 token；不新增任何颜色。
   metric-card span 留着——它不是 eyebrow。 */
#dashboard .metric-card span {
  /* 卡片改成浅灰下沉面后，#98a1b1 实测掉到 2.39:1。
     #5b6376 是文件里已有的值，在 #f6f4fb 上 6.02:1。 */
  color: #5b6376;
  font-weight: 600;
}

#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: 10px;
  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: 14px;
  padding: 16px;
}

#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: 15px;
  font-weight: 600;
  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: 13px;
}
#pipeline .creator-card p {
  color: #6b7585;
  font-size: 12px;
  margin: 4px 0;
}
#pipeline .creator-card .card-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
#pipeline .creator-card .ghost-button {
  background: #fff;
  border: 1px solid #e1e6ee;
  color: #6b7585;
  font-size: 12px;
  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: 12px;
  padding: 5px 10px;
  min-height: auto;
}
#pipeline .creator-card .star-disp { font-size: 12px; }

/* ─── Calendar overrides ─── */
#calendar {
  --cal-accent: #6847c8;
  --cal-accent-deep: #563a9e;
  --cal-accent-soft: #f1eefa;
  --cal-accent-line: #ddd3f2;
  --cal-accent-shadow: rgba(104, 71, 200, 0.22);
  --cal-accent-button-shadow: rgba(104, 71, 200, 0.2);
  --cal-accent-today-line: rgba(104, 71, 200, 0.45);
  --cal-accent-progress-end: #8b6ed6;
  --cal-disabled-bg: #efedf4;
  --cal-disabled-ink: #a9a3b8;
  --cal-summary-soft: #fbfaff;
  --cal-rose-soft: #f7eff2;
  --cal-rose-ink: #86505f;
  --cal-rose: #b07a8c;
  --cal-blue-soft: #eef3f7;
  --cal-blue-ink: #48627a;
  --cal-blue: #7793ab;
  --cal-sand-soft: #f8f3e9;
  --cal-sand-ink: #8a6d3b;
  --cal-sand: #c2a36b;
  --cal-sage-soft: #eef5f1;
  --cal-sage-ink: #4e6e62;
  --cal-sage: #7fa392;
  --cal-danger-ink: #a64d62;
  --cal-danger-line: #ecdfe4;
  --cal-danger-hover-line: #c2697c;
  --cal-danger-hover-soft: #f9eff2;
  --cal-panel-soft: #f6f5fa;
  --cal-panel-line: #e2ddef;
  --cal-event-base-line: #8f88d9;
  --cal-event-base-soft: #e6e4f6;
  --cal-event-ready-line: #7f8fd0;
  --cal-event-ready-soft: #e2e6f5;
  --cal-event-revision-line: #c98da1;
  --cal-event-revision-soft: #f5e6ea;
  --cal-completed: #5e9a7e;
  --cal-completed-soft: #e9f3ee;
  color: #1f2a3a;
}
#calendar .calendar-workspace { padding: 24px; border-radius: 14px; }
/* 月份坐在页面底上（不再有工具条自己的浅色底），颜色必须跟主题走。
   夜间不能只靠全局 h2 的白字：还有一条按页面点名的分组规则
   `#outreach h2, …, #calendar h2 { #1f2a3a }`（那些 h2 都在白面板上，
   唯独月份是例外），特异性 (1,0,1) 会把它压深——实测夜间 1.45:1。
   这里用 (1,1,1) 显式接管两个主题。 */
#calendar .calendar-month-switch h2 { color: #fff; }
html[data-theme="day"] #calendar .calendar-month-switch h2 { color: #1f2a3a; }
#calendar .calendar-head-actions .icon-button,
#calendar .calendar-head-actions .ghost-button {
  background: #f3f5fa;
  border: 1px solid #e1e6ee;
  color: #1f2a3a;
}
#calendar .calendar-head-actions .icon-button:hover,
#calendar .calendar-head-actions .ghost-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: var(--cal-accent-soft);
  color: var(--cal-accent);
}
#calendar .calendar-day.today {
  background: var(--cal-accent-soft);
}
#calendar .calendar-event {
  background: var(--cal-event-base-soft);
  color: #5b32b8;
  border: 1px solid var(--cal-event-base-line);
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
}
#calendar .calendar-event.ready {
  border-color: var(--cal-event-ready-line);
  background: var(--cal-event-ready-soft);
}
#calendar .calendar-event.revision {
  border-color: var(--cal-event-revision-line);
  background: var(--cal-event-revision-soft);
}
#calendar .calendar-event.done {
  border-color: var(--cal-completed);
  background: var(--cal-completed-soft);
}

/* ─── Dashboard overrides ─── */
#dashboard .metric-card {
  padding: 18px 20px;
}
#dashboard .metric-card strong {
  color: #1f2a3a;
  font-size: 28px;
}
#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: 12px;
  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: 12px;
  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: 15px; }
}

/* ──────────────────────────────────────────────────────────
   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: 13px;
  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: 12px;
  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: 600;
}

.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: 8px;
  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: 15px;
  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: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #98a1b1;
}
.lm-login-title {
  margin: 8px 0 24px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #18181b;
}

.lm-form {
  display: grid;
  gap: 16px;
  margin: 0;
}
.lm-form[hidden] {
  display: none;
}
.lm-form label {
  display: grid;
  gap: 8px;
}
.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: 13px;
  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: 15px;
  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-google-alert {
  margin: 0 0 18px;
  padding: 11px 13px;
  border: 1px solid #f2c5c5;
  border-radius: 12px;
  background: #fff5f5;
  color: #b42318;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lm-google-alert[hidden],
.lm-google-options[hidden] {
  display: none;
}

.lm-google-options {
  display: grid;
  gap: 14px;
  margin-top: 2px;
}

.lm-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #aaa4b0;
  font-size: 12px;
}

.lm-auth-divider::before,
.lm-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ebe7f0;
}

.lm-google-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #d8d3df;
  border-radius: 14px;
  background: #fff;
  color: #29242f;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.lm-google-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.lm-google-button:hover {
  border-color: #b9afc5;
  background: #fcfbfd;
}

.lm-google-button:focus-visible {
  outline: none;
  border-color: #7a45d1;
  box-shadow: 0 0 0 4px rgba(122, 69, 209, 0.11);
}

.lm-terms {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  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: 24px;
}
.lm-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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: 11px;
  font-weight: 600;
}

/* ─── 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: 12px;
  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: 15px;
  letter-spacing: -0.01em;
}

.lm-visual-brand span {
  margin-top: 3px;
  font-size: 11px;
  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: 12px;
  font-weight: 600;
  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: 15px;
  line-height: 1.6;
}

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

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

.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: 14px;
  font-size: 15px;
}

.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: 14px;
  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: 16px;
  margin-top: 22px;
  padding: 15px 16px;
  border: 1px solid #ebe7f0;
  border-radius: 14px;
  background: #faf9fc;
  color: #77717f;
  font-size: 12px;
}

.lm-support a,
.lm-panel .lm-terms a {
  color: #6836bc;
  font-weight: 600;
  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: 11px;
}

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

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

.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: 12px;
    margin-bottom: 58px;
    color: #181322;
    font-size: 15px;
  }

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

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

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

#discovery .discovery-shell {
  min-height: calc(100vh - 102px);
  padding: 18px 0 28px;
}

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

.smart-search-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.zerendo-search-coach {
  position: relative;
  display: block;
  width: min(380px, 38%);
  min-height: 112px;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid rgba(216, 198, 252, 0.68);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(0, 231, 255, 0.12), transparent 38%),
    radial-gradient(circle at 100% 0, rgba(255, 54, 184, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(250, 244, 255, 0.94));
  box-shadow: 0 16px 40px rgba(65, 42, 92, 0.08);
}

.zerendo-search-coach::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #8a5cff, #ff3bb7, #00e4ff);
  animation: zerendo-coach-scan 4.6s ease-in-out infinite;
}

.zerendo-coach-copy {
  position: relative;
  z-index: 1;
}

.zerendo-search-coach strong {
  display: block;
  margin-bottom: 8px;
  color: #6736bd;
  font-size: 12px;
  font-weight: 700;
}

.zerendo-coach-live {
  position: relative;
  min-height: 34px;
  margin: 0 0 8px;
  color: #2f2546;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.zerendo-coach-live span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: zerendo-coach-line 9s ease-in-out infinite;
}

.zerendo-coach-live span:nth-child(2) {
  animation-delay: 3s;
}

.zerendo-coach-live span:nth-child(3) {
  animation-delay: 6s;
}

.zerendo-search-coach ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zerendo-search-coach li {
  position: relative;
  padding-left: 20px;
  color: #5f697a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.search-control-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(226, 210, 255, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(172, 137, 255, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.78);
  box-shadow: none;   /* 卡片分层收敛：靠底色和发丝边分层，不叠阴影 */
}

.search-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ai-mode-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  min-height: 64px;
}

.zerendo-search-coach li::before {
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #7544d7, #e13f9d);
  color: #fff;
  content: counter(list-item);
  font-size: 11px;
  font-weight: 700;
}

@keyframes zerendo-coach-line {
  0%, 8% {
    opacity: 0;
    transform: translateY(6px);
  }
  13%, 28% {
    opacity: 1;
    transform: translateY(0);
  }
  34%, 100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes zerendo-coach-scan {
  0%, 100% {
    opacity: 0.35;
    transform: translateX(-18%);
  }
  50% {
    opacity: 0.95;
    transform: translateX(18%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zerendo-search-coach::before,
  .zerendo-coach-live span {
    animation: none;
  }

  .zerendo-coach-live span:first-child {
    opacity: 1;
    transform: none;
  }
}

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

/* 原来这里把标题钉在 clamp(30px, 3vw, 42px)，比统一规格大一档。
   42px 在这种很空的页面上成立，但全站统一之后它就成了唯一的例外。 */
#discovery .smart-search-copy h2 {
  line-height: 1.05;
}

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

#discovery .platform-tabs {
  display: flex;
  width: fit-content;
  margin: 0;
  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 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

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

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

.zerendo-mode-assistant img {
  position: absolute;
  left: -8px;
  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: 12px;
  font-weight: 600;
  line-height: 1.35;
}

#discovery .ai-search-box {
  min-height: auto;
  margin-top: 0;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

@media (max-width: 900px) {
  .smart-search-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .zerendo-search-coach {
    width: 100%;
  }

  .search-control-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-mode-row {
    justify-content: space-between;
    width: 100%;
  }

  #discovery .smart-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

  #discovery .smart-filter-grid {
    grid-template-columns: 1fr;
  }

  .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: 10px;
  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: 8px;
  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: 16px;
  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: 12px;
  font-weight: 700;
  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-state-copy .zerendo-eta-line {
  color: #6847c8;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.zerendo-state-copy .zerendo-eta-line:empty {
  display: none;
}

.zerendo-state-copy .zerendo-eta-hint {
  color: #98a1b1;
  font-size: 12px;
}

.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: 4px;
  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: 600;
  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: 16px;
  padding: 16px;
  border: 1px solid rgba(117, 68, 215, 0.14);
  border-radius: 18px;
  background: rgba(250, 248, 253, 0.92);
  text-align: left;
}

.library-search-panel[hidden] {
  display: none;
}

.library-search-panel .section-heading {
  margin-bottom: 0;
  gap: 12px;
  padding: 0 2px;
}

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

.library-search-panel .section-heading h3 {
  margin: 3px 0 0;
  color: #202a3f;
  font-size: 15px;
  line-height: 1.25;
}

.library-search-panel .section-actions span {
  color: #8b95a8;
  font-size: 12px;
  font-weight: 600;
}

.library-search-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

#discovery .library-result-card {
  display: grid;
  gap: 12px;
  flex: 0 0 min(320px, 82vw);
  scroll-snap-align: start;
  padding: 12px;
  border: 1px solid rgba(117, 68, 215, 0.18);
  border-radius: 14px;
  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-result-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

#discovery .library-result-main .avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

#discovery .library-result-main .live-result-title {
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#discovery .library-result-main .live-result-title strong {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#discovery .library-result-main p {
  margin-top: 3px;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-compact-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.library-compact-stats span {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(244, 239, 255, 0.86);
  color: #8b7aa8;
  font-size: 12px;
  font-weight: 600;
}

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

#discovery .library-card-actions button {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#discovery .library-card-actions .ghost-button {
  color: #fff;
  background: #172033;
  box-shadow: none;
}

.library-search-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  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: 11px;
  font-weight: 700;
}

#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: 15px;
}

.zerendo-page-guide {
  position: relative;
  display: flex;
  align-items: center;
  width: min(560px, calc(100% - 48px));
  min-height: 92px;
  margin: 38px 0 18px 48px;
  padding: 16px 20px 16px 132px;
  overflow: visible;
  border: 1px solid rgba(207, 190, 255, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 8%, rgba(219, 236, 255, 0.58), transparent 30%),
    linear-gradient(135deg, #fdfbff 0%, #f7f1ff 100%);
  box-shadow: none;   /* 卡片分层收敛：靠底色和发丝边分层，不叠阴影 */
}

.zerendo-page-guide img {
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 118px;
  height: 136px;
  margin: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 16px rgba(44, 31, 75, 0.14));
}

.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: 700;
  line-height: 1.35;
}

.zerendo-page-guide span {
  color: #687386;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

#similarity .similarity-controls {
  /* 原来是 160px minmax(260px,1fr) minmax(360px,1.08fr) 170px——
     四列的最小值加间距 = 160+260+360+170+48 = 998px，
     而这一栏在 1280 视口下只有 956px，按钮直接被挤出卡片右边。
     固定像素列 + 大 minmax 下限就是会在某个宽度突然溢出的写法。
     把下限降到四列在窄屏也放得下（160+140+160+140+48 = 648px），
     富余的宽度仍按 1fr / 1.08fr 分配，宽屏下观感不变。 */
  grid-template-columns: minmax(140px, 160px) minmax(140px, 1fr) minmax(160px, 1.08fr) minmax(140px, 170px);
  align-items: start;
  gap: 16px;
  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: 700;
}

#similarity .similarity-controls input,
#similarity .similarity-controls select {
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #fff;
  color: #172033;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--elev-1);
}

#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: 14px;
}

.reference-match-status {
  display: block;
  margin-top: 7px;
  color: #8a819b;
  font-size: 12px;
  font-weight: 600;
  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: 16px;
  margin-top: 18px;
}

#similarity .similar-card {
  border-color: #e1e6ee;
  border-radius: 14px;
  background: #fff;
  color: #172033;
  box-shadow: var(--elev-1);
}

#similarity .similar-card strong {
  color: #172033;
}

#similarity .similar-card p,
#similarity .similar-card small {
  color: #667085;
}

#similarity .similar-card span {
  color: #7040ce;
}

#similarity .similar-results {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
}

#similarity .similar-card {
  display: grid;
  gap: 16px;
  min-height: 272px;
  padding: 16px;
  border: 1px solid rgba(226, 210, 255, 0.9);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(143, 92, 255, 0.08), transparent 36%),
    #fff;
  box-shadow: 0 16px 34px rgba(60, 44, 94, 0.08);
}

#similarity .similar-card:hover {
  border-color: rgba(143, 92, 255, 0.48);
  transform: translateY(-1px);
}

#similarity .similar-card-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

#similarity .similar-card-head .avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

#similarity .similar-card-head strong,
#similarity .similar-card-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#similarity .similar-card-head strong {
  margin: 3px 0 2px;
  color: #172033;
  font-size: 18px;
  font-weight: 700;
}

#similarity .similar-card-head small {
  color: #7d8798;
  font-size: 12px;
  font-weight: 600;
}

#similarity .similar-match-chip {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  margin: 0;
  padding: 0 9px;
  border-radius: 999px;
  background: #efe7ff;
  color: #7040ce;
  font-size: 12px;
  font-weight: 700;
}

#similarity .similar-card-meta,
#similarity .similar-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#similarity .similar-card-meta > span:not(.platform-chip):not(.list-status-chip),
#similarity .similar-status-row span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #f6f3fb;
  color: #6f7a8d;
  font-size: 12px;
  font-weight: 700;
}

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

#similarity .similar-metrics span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #eef1f7;
  border-radius: 14px;
  background: #fbfcff;
}

#similarity .similar-metrics strong,
#similarity .similar-metrics small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#similarity .similar-metrics strong {
  color: #172033;
  font-size: 15px;
  font-weight: 700;
}

#similarity .similar-metrics small {
  color: #8a95a7;
  font-size: 11px;
  font-weight: 700;
}

#similarity .similar-card-reason {
  display: -webkit-box;
  min-height: 40px;
  margin: 0;
  overflow: hidden;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#similarity .similar-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#similarity .similar-card-actions button,
#similarity .similar-card-actions a.text-button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  justify-content: center;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* 卡片是白底，全局 .text-button 的浅紫（#e5d7ff）在这里几乎看不见 */
#similarity .similar-card-actions .text-button {
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
  opacity: 1;
}

#similarity .similar-card-actions .text-button:hover {
  border-color: #b9a9dc;
  background: #f7f3ff;
  color: #4a2792;
}

#similarity .similar-card-actions .ghost-button {
  color: #fff;
  background: linear-gradient(135deg, #8a5cff, #ec3f9d);
  box-shadow: none;
}

.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: 34px;
}

.favorites-controls {
  display: grid;
  /* 原来是 repeat(4, minmax(160px, 1fr))：四列最小和加间距 = 688px，
     而右侧面板打开后主栏只剩 649px，第四个筛选框直接被挤出卡片。
     auto-fit 让它按容器实际宽度决定放几列——放不下就换行，不会溢出。 */
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 14px 16px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #e7def9;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;   /* 卡片分层收敛：靠底色和发丝边分层，不叠阴影 */
}

.favorites-controls label,
.favorite-status {
  display: grid;
  gap: 8px;
  color: #7b8698;
  font-size: 12px;
  font-weight: 700;
}

.favorites-controls select,
.favorite-status select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #fff;
  color: #172033;
  font: inherit;
  font-weight: 600;
  padding: 0 14px;
}

.favorites-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #e5eaf2;
  border-radius: 18px;
  background: #fff;
}

.favorite-card {
  display: grid;
  grid-template-columns: 28px minmax(260px, 320px) minmax(360px, 1fr) 156px;
  gap: 16px;
  align-items: center;
  min-height: 142px;
  padding: 16px 18px;
  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 #e1e6ee;
  border-radius: 10px;
  background: #fff;
}

.favorite-profile-panel {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid #eef1f7;
  border-radius: 14px;
  background: #fbfcff;
}

.favorite-profile-panel .avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.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: 15px;
}

.favorite-profile-copy > span {
  margin-top: 4px;
  color: #7c8798;
  font-size: 13px;
  font-weight: 600;
}

.favorite-profile-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  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: 12px;
  font-weight: 700;
}

.favorite-main-panel {
  min-width: 0;
}

.favorite-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.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: 15px;
}

.favorite-row-head small {
  color: #8a95a7;
  font-size: 12px;
  font-weight: 700;
}

.favorite-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.favorite-source-badge.library {
  background: #efe7ff;
  color: #7040ce;
}

.favorite-source-badge.online {
  background: #ffe5f1;
  color: #d92d7d;
}

.favorite-quick-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.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: 11px;
  font-weight: 700;
}

.favorite-side-actions {
  display: grid;
  gap: 12px;
}

.favorite-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.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: 15px;
}

.favorite-meta-grid small {
  margin-top: 3px;
  color: #8a95a7;
  font-size: 12px;
  font-weight: 700;
}

.favorite-reason {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.favorite-actions {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  padding-top: 2px;
}

.favorite-actions button,
.favorite-actions a,
.favorite-side-actions .ghost-button,
.favorite-side-actions .text-button {
  min-height: 34px;
  justify-content: center;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.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: 18px;
  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 {
    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;
  }

}

@media (max-width: 640px) {
  .favorites-controls,
  .favorites-empty {
    grid-template-columns: 1fr;
  }

  .zerendo-page-guide {
    width: 100%;
    min-height: 0;
    margin-left: 0;
    padding: 12px 12px 12px 72px;
    border: 1px solid #e6ecf5;
    background: #fbf8ff;
    box-shadow: var(--elev-1);
  }

  .zerendo-page-guide img {
    left: 8px;
    width: 58px;
    height: 72px;
    margin: 0;
  }

  .zerendo-page-guide strong,
  .zerendo-page-guide span {
    display: block;
  }

  .favorites-page-panel {
    padding: 16px;
  }

  .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;
  }

  .favorite-quick-metrics {
    grid-template-columns: 1fr;
  }

  .zerendo-search-state {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .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: 8px;
  }
}

/* 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: 14px;
  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: 11px;
  font-weight: 700;
  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: 12px;
  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: 10px;
  background: #fff;
  color: #6637bd;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  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: 12px;
  font-weight: 600;
  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: var(--elev-1);
}

#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: 22px;
}

#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: 600;
}

#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: 16px;
  align-items: stretch;
  padding: 16px 18px 16px 14px;
  overflow: hidden;
  border: 1px solid #e8eaf1;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-1);
}

#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: 14px;
  color: #523092;
  background: linear-gradient(145deg, #f6f1ff, #eee7fc);
}

#calendar .calendar-task-date span,
#calendar .calendar-task-date em {
  color: #8269ad;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

#calendar .calendar-task-date strong {
  margin: 2px 0;
  color: #392160;
  font-size: 28px;
  line-height: 1;
}

#calendar .calendar-task-main {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr);
  gap: 16px;
  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: 14px;
}

#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: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#calendar .calendar-task-content strong {
  font-size: 15px;
}

#calendar .calendar-task-meta {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 9px;
  color: #798293;
  font-size: 12px;
}

#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: 11px;
  font-weight: 700;
}

#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: 12px;
  font-weight: 600;
  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: 16px;
  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: 14px;
  color: #7544d7;
  background: #efe7ff;
  font-size: 22px;
}

#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: 28px;
  }

  #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: 700;
  cursor: pointer;
}

#calendar .calendar-mode-switch button.active {
  color: #fff;
  background: var(--cal-accent);
  box-shadow: 0 8px 18px var(--cal-accent-shadow);
}

#calendar .calendar-new-campaign-btn {
  min-height: 42px;
  padding: 0 16px;
  white-space: nowrap;
  box-shadow: 0 10px 24px var(--cal-accent-button-shadow);
}

#calendar .primary-button {
  background: var(--cal-accent);
  box-shadow: 0 10px 24px var(--cal-accent-shadow);
}

#calendar .primary-button:hover {
  background: var(--cal-accent-deep);
}

#calendar .primary-button:disabled {
  background: var(--cal-disabled-bg);
  color: var(--cal-disabled-ink);
  box-shadow: none;
}

.commerce-filter-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #e5dff2;
  border-radius: 999px;
  color: #756784;
  background: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
}

.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: 16px;
}

#calendar .campaign-calendar-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 16px;
}

#calendar .campaign-calendar-summary article {
  padding: 18px 20px;
  border: 1px solid #ece8f7;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, var(--cal-summary-soft));
  box-shadow: var(--elev-1);
}

#calendar .campaign-calendar-summary span {
  display: block;
  color: #8d95a5;
  font-size: 12px;
  font-weight: 700;
  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: 16px;
  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: 22px;
}

#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: 8px;
}

#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: 8px;
  min-height: 24px;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid rgba(117, 68, 215, 0.14);
  border-radius: 10px;
  color: #4f2e92;
  background: #f2edff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#calendar .calendar-campaign-event b {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--cal-accent);
  font-size: 11px;
}

#calendar .calendar-campaign-event.completed {
  color: #287253;
  background: #eaf8f1;
}

#calendar .calendar-campaign-event.completed b {
  background: var(--cal-completed);
}

#calendar .calendar-campaign-event.draft {
  color: #647086;
  background: #f3f5f9;
}

#calendar .calendar-campaign-event.draft b {
  background: #8390a3;
}

#calendar .calendar-campaign-event.color-1 {
  color: var(--cal-rose-ink);
  background: var(--cal-rose-soft);
}

#calendar .calendar-campaign-event.color-1 b {
  background: var(--cal-rose);
}

#calendar .calendar-campaign-event.color-2 {
  color: var(--cal-blue-ink);
  background: var(--cal-blue-soft);
}

#calendar .calendar-campaign-event.color-2 b {
  background: var(--cal-blue);
}

#calendar .calendar-campaign-event.color-3 {
  color: var(--cal-sand-ink);
  background: var(--cal-sand-soft);
}

#calendar .calendar-campaign-event.color-3 b {
  background: var(--cal-sand);
}

#calendar .calendar-campaign-event.color-4 {
  color: var(--cal-sage-ink);
  background: var(--cal-sage-soft);
}

#calendar .calendar-campaign-event.color-4 b {
  background: var(--cal-sage);
}

#calendar .commerce-event {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid #d9cdf6;
  border-radius: 10px;
  color: #4f2e92;
  background: #f2edff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#calendar .commerce-event em {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  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: 11px;
}

#calendar .holiday-reminder {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  padding: 2px 7px;
  overflow: hidden;
  border: 1px solid #e7e2f1;
  border-radius: 10px;
  color: #70677f;
  background: rgba(248, 246, 252, 0.92);
  font-size: 11px;
  font-weight: 600;
  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: 11px;
}

#calendar .holiday-reminder em {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 11px;
  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: 16px;
}

#calendar .campaign-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #e8eaf1;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-1);
}

#calendar .campaign-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--cal-accent);
}

#calendar .campaign-card.color-1::before { background: var(--cal-rose); }
#calendar .campaign-card.color-2::before { background: var(--cal-blue); }
#calendar .campaign-card.color-3::before { background: var(--cal-sand); }
#calendar .campaign-card.color-4::before { background: var(--cal-sage); }

#calendar .campaign-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#calendar .campaign-card-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

#calendar .campaign-delete-button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--cal-danger-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cal-danger-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#calendar .campaign-delete-button:hover {
  border-color: var(--cal-danger-hover-line);
  background: var(--cal-danger-hover-soft);
}

#calendar .campaign-card-head span {
  display: block;
  margin-bottom: 4px;
  color: #9aa3b2;
  font-size: 12px;
  font-weight: 700;
}

#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: 11px;
  font-weight: 700;
}

#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: 8px;
}

#calendar .campaign-card-grid span {
  padding: 8px;
  border-radius: 14px;
  background: #f8f7fb;
}

#calendar .campaign-card-grid b,
#calendar .campaign-card-grid em {
  display: block;
}

#calendar .campaign-card-grid b {
  color: #263247;
  font-size: 15px;
}

#calendar .campaign-card-grid em {
  margin-top: 3px;
  color: #8a93a5;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

#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, var(--cal-accent), var(--cal-accent-progress-end));
}

#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: 11px;
  font-weight: 700;
  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: 18px;
  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;
}

/* ═══════════════════════════════════════════════════════
   Zerendo Brand Unification — 筛选优先 · AI 语气统一
   ════════════════════════════════════════════════════ */

.workflow-mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.workflow-mini-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(228, 213, 255, 0.32);
  background: rgba(255, 255, 255, 0.03);
  color: #c3afdd;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.workflow-mini-step--active {
  color: #fff;
  background: linear-gradient(110deg, rgba(143, 92, 255, 0.42), rgba(255, 79, 184, 0.35));
  border-color: rgba(255, 255, 255, 0.44);
}

.side-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(226, 210, 255, 0.2);
  border-radius: 14px;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(143, 92, 255, 0.2), rgba(255, 61, 110, 0.12)),
    var(--nav);
  border-right-color: rgba(226, 210, 255, 0.16);
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 88px minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  padding: 20px 12px;
  gap: 16px;
  overflow-x: hidden;
}

body.sidebar-collapsed .brand {
  display: grid;
  justify-items: center;
  gap: 8px;
}

body.sidebar-collapsed .account-menu {
  top: 62px;
  left: 70px;
}

body.sidebar-collapsed .brand > div:nth-child(2) {
  display: none;
}

body.sidebar-collapsed .brand-logo-frame {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

body.sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
  width: 32px;
  height: 28px;
}

body.sidebar-collapsed .nav-list {
  gap: 8px;
}

body.sidebar-collapsed .nav-group {
  gap: 8px;
}

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-subitem {
  position: relative;
  min-height: 58px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px 5px;
  text-align: center;
  font-size: 0;
  line-height: 1;
}

body.sidebar-collapsed .nav-item::before,
body.sidebar-collapsed .nav-subitem::before {
  content: attr(data-icon);
  display: block;
  color: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

body.sidebar-collapsed .nav-item::after,
body.sidebar-collapsed .nav-subitem::after {
  content: attr(data-short);
  display: block;
  color: currentColor;
  opacity: 0.82;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

body.sidebar-collapsed .nav-item > span:not(.nav-lock) {
  display: none;
}

body.sidebar-collapsed .nav-lock {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 14px;
  height: 14px;
  font-size: 11px;
}

body.sidebar-collapsed .nav-sublist {
  margin: 0;
  padding-left: 0;
  border-left: 0;
  gap: 8px;
}

.nav-item,
.nav-subitem {
  border-radius: 10px;
}

.nav-item:hover,
.nav-item.active,
.nav-subitem:hover,
.nav-subitem.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

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

  body.sidebar-collapsed .sidebar {
    height: auto;
    padding: 16px;
  }

  body.sidebar-collapsed .brand {
    display: flex;
    justify-content: space-between;
  }

  body.sidebar-collapsed .nav-list {
    grid-template-columns: repeat(6, minmax(72px, 1fr));
  }
}

.primary-button:focus-visible,
.ghost-button:focus-visible,
.text-button:focus-visible,
.list-action-btn:focus-visible,
.project-pill:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(143, 92, 255, 0.35);
}

/* Collapsed sidebar polish: keep the rail clean and align compact nav with the expanded menu rhythm. */
body.sidebar-collapsed .app-shell {
  grid-template-columns: 96px minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  overflow-y: auto;
  scrollbar-width: none;
}

body.sidebar-collapsed .sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.sidebar-collapsed .brand {
  align-content: start;
}

body.sidebar-collapsed .nav-list {
  width: 100%;
  align-content: start;
  justify-items: center;
}

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-subitem {
  width: 66px;
  min-height: 58px;
  margin-inline: auto;
}

body.sidebar-collapsed .nav-sublist {
  width: 100%;
}

/* Discovery workspace fit: the three creator-search subviews should breathe into one viewport after sidebar collapse. */
body.sidebar-collapsed[data-current-view="discovery"] .main,
body.sidebar-collapsed[data-current-view="similarity"] .main,
body.sidebar-collapsed[data-current-view="favorites"] .main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.sidebar-collapsed[data-current-view="discovery"] #discovery,
body.sidebar-collapsed[data-current-view="similarity"] #similarity,
body.sidebar-collapsed[data-current-view="favorites"] #favorites {
  flex: 1;
  min-height: calc(100vh - 118px);
}

body.sidebar-collapsed[data-current-view="discovery"] #discovery .search-control-card,
body.sidebar-collapsed[data-current-view="similarity"] #similarity .workspace-panel,
body.sidebar-collapsed[data-current-view="favorites"] #favorites .workspace-panel {
  min-height: calc(100vh - 188px);
}

/* Creator search pages should use the visible desktop viewport in both expanded and collapsed nav states. */
@media (min-width: 761px) {
  body[data-current-view="discovery"] .main,
  body[data-current-view="similarity"] .main,
  body[data-current-view="favorites"] .main {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-current-view="discovery"] .topbar,
  body[data-current-view="similarity"] .topbar,
  body[data-current-view="favorites"] .topbar {
    flex: 0 0 auto;
  }

  body[data-current-view="discovery"] #discovery,
  body[data-current-view="similarity"] #similarity,
  body[data-current-view="favorites"] #favorites {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* 原来写的是 > :first-child——那时候第一个孩子就是装着全部内容的大卡。
     加了页头之后它套到页头上，把一个 154px 高的标题撑成 654px，
     内容被顶到视口底部。:first-child 就是会在往上加东西时坏掉的写法，
     改成指名道姓：该撑满的是内容面板，不是页头。 */
  body[data-current-view="discovery"] #discovery > .discovery-shell,
  body[data-current-view="similarity"] #similarity > .similarity-page-panel,
  body[data-current-view="favorites"] #favorites > .favorites-page-panel {
    min-height: 100%;
  }
}

/* Collapsed account menu: render outside the narrow rail so login/switch/recharge/logout stay clickable. */
body.sidebar-collapsed .brand-account-trigger {
  position: relative;
  z-index: 35;
}

body.sidebar-collapsed .account-menu {
  position: fixed;
  top: 22px;
  left: 108px;
  z-index: 1000;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#discovery .search-control-card,
#discovery .zerendo-search-coach,
#discovery .zerendo-mode-assistant,
#discovery .zerendo-search-state,
#discovery .zerendo-state-copy {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(249, 244, 255, 0.88));
  border-color: rgba(143, 92, 255, 0.26);
}

#discovery .smart-search-hero {
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  padding-left: 16px;
}

/* Unified Creator Search IA
   Keep Smart Search, Library Match and Shortlist on the same visual grid. */
#discovery .discovery-shell,
#similarity,
#favorites {
  min-height: calc(100vh - 132px);
  padding: 36px 0 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: var(--elev-1);
}

#discovery .smart-search-panel,
#similarity .similarity-page-panel,
#favorites .favorites-page-panel {
  max-width: 1180px;
  margin: 0 auto 30px;
}

#similarity .similarity-page-panel,
#favorites .favorites-page-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#discovery .smart-search-hero,
#similarity .section-heading,
#favorites .section-heading {
  display: flex;
  min-height: 136px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

#similarity .section-heading {
  margin-bottom: 14px;
}

#discovery .smart-search-copy,
#similarity .section-heading > div,
#favorites .section-heading > div {
  max-width: 650px;
}

#discovery .smart-search-copy .eyebrow,
#similarity .section-heading .eyebrow,
#favorites .section-heading .eyebrow {
  margin: 0 0 5px;
  /* color 已移除：它带 id（1,2,0），把 discovery 的页头 eyebrow 压成 #8491a7，
     而其它页是 var(--muted)——同一个组件两种颜色。排版属性保留。 */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 这条是分组选择器，前两轮删覆写时漏掉了——一个 id 选择器的优先级
   （0,1,1,1）压过 .page-head h2（0,0,1,1），所以 discovery 一直还是 42px。
   #similarity / #favorites 那两段已经改用 .page-head，选择器不再匹配，
   留着也没用，一并去掉。字号交给统一规格。 */
#discovery .smart-search-copy h2 {
  margin: 0;
  color: #172033;
  line-height: 1.05;
  letter-spacing: 0;
}

#discovery .smart-search-copy p:not(.eyebrow),
#similarity .section-heading p:not(.eyebrow),
#favorites .section-heading p:not(.eyebrow) {
  max-width: 650px;
  margin: 12px 0 0;
  color: #6f7a8d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

#similarity .section-heading .ghost-button,
#favorites .section-heading .ghost-button {
  flex: 0 0 auto;
}

#similarity .zerendo-page-guide,
#favorites .zerendo-page-guide {
  width: 100%;
  min-height: 74px;
  margin: 0 0 18px;
  padding: 14px 18px 14px 82px;
  overflow: hidden;
  border-color: rgba(143, 92, 255, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(0, 231, 255, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(249, 244, 255, 0.88));
  box-shadow: 0 14px 30px rgba(65, 42, 92, 0.07);
}

#similarity .zerendo-page-guide img,
#favorites .zerendo-page-guide img {
  left: 14px;
  bottom: -4px;
  width: 58px;
  height: 72px;
}

#similarity .zerendo-page-guide strong,
#favorites .zerendo-page-guide strong {
  color: #33234f;
  font-size: 15px;
}

#similarity .zerendo-page-guide span,
#favorites .zerendo-page-guide span {
  color: #6f7a8d;
  font-size: 12px;
}

#discovery .search-control-card,
#similarity .similarity-controls,
#favorites .favorites-controls {
  margin-top: 0;
  border: 1px solid rgba(226, 210, 255, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(172, 137, 255, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 46px rgba(70, 44, 95, 0.08);
}

#similarity .similarity-controls,
#favorites .favorites-controls {
  padding: 16px;
}

#discovery .platform-tabs {
  background: rgba(20, 9, 40, 0.3);
  border: 1px solid rgba(226, 210, 255, 0.2);
  padding: 8px;
}

#discovery .platform-choice {
  border-color: rgba(226, 210, 255, 0.28);
  background: rgba(255, 255, 255, 0.02);
}

#discovery .platform-choice:hover,
#discovery .platform-choice.active {
  background: linear-gradient(135deg, rgba(143, 92, 255, 0.28), rgba(255, 79, 184, 0.24));
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
}

#creators .table-wrap,
#pipeline .pipeline-board,
#contracts .workspace-panel,
#outreach .workspace-panel,
#calendar .campaign-card,
#calendar .calendar-overview-panel,
#dashboard .workspace-panel,
#dashboard .risk-item,
#attribution .workspace-panel {
  border-color: rgba(226, 210, 255, 0.2);
}

#creators .creator-cell .avatar,
#creators .creator-cell .avatar-image {
  box-shadow: var(--elev-1);
}

#creators thead th {
  background: var(--surface-soft);
  color: #b9aac8;
}

#creators tbody td {
  color: #e8dfff;
}

#creators .project-pill {
  background: rgba(255, 255, 255, 0.04);
  color: #e8ddff;
  border-color: rgba(228, 213, 255, 0.4);
}

#creators .project-pill.active {
  color: #fff;
  background: linear-gradient(120deg, #7f49ff 0%, #b84cff 35%, #f84aa8 100%);
  border-color: rgba(255, 255, 255, 0.32);
}

#discovery .zerendo-suggestion-actions button {
  border-color: rgba(143, 92, 255, 0.34);
  background: #fff;
}

#discovery .zerendo-suggestion-actions button:hover {
  border-color: rgba(255, 79, 184, 0.5);
  background: #f4effd;
}

.workspace-panel,
.metric-card,
.contract-card,
.creator-card,
.calendar-item {
  backdrop-filter: blur(14px);
}
/* Creator database refinement: make selection, summary, and edit modal easier to understand. */
#creators .creator-card-check {
  width: auto;
  min-width: 74px;
  height: 32px;
  padding: 0 10px;
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(132, 88, 255, 0.22);
  color: #6f5a91;
  box-shadow: 0 10px 26px rgba(62, 24, 107, 0.08);
}

#creators .creator-card-check::after {
  content: "选入群发";
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#creators .creator-card-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #8d4df7;
}

#creatorDialog .dialog-card {
  max-width: min(1080px, calc(100vw - 40px));
  max-height: calc(100vh - 72px);
  overflow: auto;
  padding: 24px;
}

#creatorDialog .section-heading:first-child {
  position: sticky;
  top: -22px;
  z-index: 9;
  margin: -22px -22px 16px;
  padding: 18px 76px 14px 22px;
  background:
    linear-gradient(135deg, rgba(28, 13, 45, 0.98), rgba(39, 21, 62, 0.94)),
    radial-gradient(circle at top right, rgba(255, 62, 165, 0.18), transparent 34%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
}

#creatorDialog .section-heading:first-child h3 {
  /* 达人档案弹窗的标题是达人名字（数据），38px 会让长名字换行 */
  font-size: clamp(21px, 1.7vw, 26px);
  font-weight: 600;
  line-height: 1.2;
}

#creatorDialog #closeDialogBtn {
  position: sticky;
  top: 14px;
  z-index: 20;
  float: right;
  width: 46px;
  height: 46px;
  margin-top: -4px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.96);
  color: #3b205d;
  box-shadow: var(--elev-1);
}

#creatorDialog #closeDialogBtn:hover {
  background: #ffffff;
  color: #ee3d9a;
  transform: translateY(-1px);
}

#creatorDialog .creator-ai-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(180, 132, 255, 0.34);
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 62, 165, 0.18), transparent 34px),
    linear-gradient(135deg, rgba(141, 77, 247, 0.14), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#creatorDialog .creator-ai-summary span {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #d9c2ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

#creatorDialog .creator-ai-summary strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.25;
}

#creatorDialog .creator-ai-summary p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  line-height: 1.55;
}

#creatorDialog #creatorProjectsInput {
  min-height: 54px;
  max-height: 72px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
}

#creatorDialog #creatorProjectsInput option {
  padding: 4px 6px;
}

@media (max-width: 780px) {
  #creatorDialog .dialog-card {
    max-width: calc(100vw - 18px);
    max-height: calc(100vh - 72px);
    padding: 16px;
  }

  #creatorDialog .section-heading:first-child {
    top: -16px;
    margin: -16px -16px 14px;
    padding: 16px 68px 12px 16px;
  }
}


#creatorDialog .creator-ai-summary small {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 600;
}


/* Candidate shortlist content-first view: recent posts are the primary scan surface. */
#favorites .favorites-grid {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(221, 226, 236, 0.95);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 56px rgba(45, 31, 78, 0.08);
}

#favorites .favorite-content-table {
  min-width: 0;
  overflow: visible;
}

#favorites .favorite-bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e4dcff;
  border-radius: 14px;
  background: #fbf9ff;
}

/* 挂载点必须"透明"：sticky 只能在父元素盒子内滑动，
   而这个 wrapper 只有工具栏自身的高度（67px），等于零行程。
   display:contents 让它从盒模型里消失，工具栏直接归滚动容器管。 */
#favorites #favoritesBulkBarHost { display: contents; }

#favorites .favorite-bulk-bar.active {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(92, 62, 135, 0.12);
}

#favorites .favorite-bulk-bar strong,
#favorites .favorite-bulk-bar span {
  display: block;
}

#favorites .favorite-bulk-bar strong {
  color: #182033;
  font-size: 15px;
  font-weight: 700;
}

#favorites .favorite-bulk-bar span {
  margin-top: 2px;
  color: #7c8496;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#favorites .favorite-bulk-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e4dcff;
  border-radius: 14px;
  background: #fbf9ff;
  color: #6542c6;
  font-size: 13px;
  font-weight: 600;
}

#favorites .favorite-table-section {
  display: grid;
  gap: 8px;
}

#favorites .favorite-table-section + .favorite-table-section,
#favorites .favorite-done-panel {
  margin-top: 14px;
}

#favorites .favorite-section-title,
#favorites .favorite-done-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 4px;
  color: #344054;
}

#favorites .favorite-section-title strong,
#favorites .favorite-done-toggle span {
  font-size: 15px;
  font-weight: 700;
}

#favorites .favorite-section-title span,
#favorites .favorite-done-toggle small {
  color: #7a8494;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-done-toggle {
  width: 100%;
  border: 1px solid #e3e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 0 14px;
}

#favorites .favorite-section-empty {
  padding: 16px;
  border: 1px dashed #d9e0ea;
  border-radius: 14px;
  background: #fbfcff;
  color: #7a8494;
  font-size: 13px;
  font-weight: 600;
}

/* 五列流体。原来是七列定宽（44+260+410+170+170+130+160 + 6×16 = 1478px），
   1440 的屏幕装不下，操作按钮被推到视口外 471px——她得往右划半天才点得到。
   两处并列：粉丝/均播并进「候选人」栏（它本来就是这个人的属性），
   项目/Campaign 并进「状态」栏（两者都是这条记录的归属状态）。信息一条没少。
   定宽只剩勾选框和操作列，其余用 minmax 让它们跟着容器缩——
   这样窄栏（侧栏展开、笔记本屏）也不会重新长出横向滚动条。 */
#favorites .favorite-content-header,
#favorites .favorite-content-row {
  display: grid;
  grid-template-columns: 44px minmax(230px, 1.4fr) minmax(200px, 1.6fr) minmax(190px, 1.3fr) 150px;
  align-items: center;
  gap: 14px;
}

#favorites .favorite-content-header {
  min-height: 60px;
  padding: 0 18px;
  border-bottom: 1px solid #e8ecf3;
  background: rgba(255, 255, 255, 0.94);
  color: #768096;
  font-size: 13px;
  font-weight: 700;
}

#favorites .favorite-content-row {
  min-height: 126px;
  padding: 14px 18px;
  border-bottom: 1px solid #e8ecf3;
  background: #fff;
}

#favorites .favorite-content-row:last-child {
  border-bottom: 0;
}

#favorites .favorite-content-row:hover {
  background: linear-gradient(90deg, rgba(248, 245, 255, 0.82), #fff 34%);
}

#favorites .favorite-row-select {
  justify-self: center;
}

#favorites .favorite-select-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #768096;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-select-control input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #7f55e8;
  cursor: pointer;
}

#favorites .favorite-select-control.needs-email input {
  opacity: 0.55;
}

#favorites .favorite-profile-panel {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 12px;
  border-radius: 14px;
  background: #f4f5f8;
}

#favorites .favorite-profile-panel .avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

#favorites .favorite-profile-copy strong {
  display: block;
  max-width: 170px;
  overflow: hidden;
  color: #172033;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#favorites .favorite-profile-copy > span {
  display: block;
  max-width: 170px;
  margin: 5px 0 8px;
  overflow: hidden;
  color: #7b8496;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#favorites .favorite-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#favorites .favorite-profile-tags > span:not(.chip) {
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff;
  color: #596579;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-latest-content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#favorites .favorite-content-strip {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

#favorites .favorite-content-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 64px;
  overflow: hidden;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  background: #f2f4f8;
  color: #9aa4b5;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--elev-1);
}

#favorites .favorite-content-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#favorites .favorite-content-thumb.is-empty {
  background: repeating-linear-gradient(135deg, #f8f9fc, #f8f9fc 8px, #edf1f7 8px, #edf1f7 16px);
}

#favorites .favorite-latest-content p {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #6b7588;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#favorites .favorite-tag-cell,
#favorites .favorite-project-cell,
#favorites .favorite-fans-cell,
#favorites .favorite-actions {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

/* 状态栏里的几枚徽标横向排、允许折行：竖着排要占五行，
   整行就被撑到 170px 高，一屏看不了几个人。 */
#favorites .favorite-tag-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* 粉丝/均播原来独占一列 130px。它是这个人的属性，跟名字放一起更好读，
   也把那 130px 还给了操作列。 */
#favorites .favorite-profile-metrics {
  color: #6b7588;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 项目/Campaign 原来也独占一列 170px，现在收成状态栏里的一行小字 */
#favorites .favorite-project-line {
  overflow: hidden;
  color: #6b7588;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#favorites .favorite-tag-cell .favorite-source-badge,
#favorites .favorite-tag-cell .niche-badge {
  width: fit-content;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#favorites .favorite-status-badge {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

#favorites .favorite-status-badge.todo {
  background: #f2ecff;
  color: #6d3fd6;
}

#favorites .favorite-status-badge.ready {
  background: #fff3d8;
  color: #9a5a00;
}

#favorites .favorite-status-badge.contacted {
  background: #e8f4ff;
  color: #1467a8;
}

#favorites .favorite-status-badge.converted {
  background: #e9fbf4;
  color: #137454;
}

#favorites .favorite-status-badge.rejected {
  background: #fff1f5;
  color: #c02a6f;
}

#favorites .favorite-updated-at {
  color: #8a93a4;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-status select {
  width: 138px;
  min-height: 34px;
  padding: 0 28px 0 10px;
  border-radius: 10px;
  font-size: 12px;
}

#favorites .favorite-project-cell span {
  max-width: 145px;
  overflow: hidden;
  padding: 5px 9px;
  border-radius: 10px;
  background: #f2f4f7;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#favorites .favorite-project-cell small {
  max-width: 150px;
  overflow: hidden;
  color: #8a93a4;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#favorites .favorite-fans-cell strong {
  color: #172033;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#favorites .favorite-fans-cell small {
  color: #7b8496;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-actions {
  justify-items: start;
}

#favorites .favorite-actions button,
#favorites .favorite-actions a,
#favorites .favorite-actions .missing-link {
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7f55e8;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

#favorites .favorite-actions .danger {
  color: #ee3d8d;
}

@media (max-width: 760px) {
  #favorites .favorites-grid {
    overflow-x: auto;
  }
}

/* Fixed desktop app frame: prevent body scroll from exposing the background below the workspace. */
@media (min-width: 761px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .sidebar {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main {
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body[data-current-view="discovery"] .main,
  body[data-current-view="similarity"] .main,
  body[data-current-view="favorites"] .main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 20px;
    overflow: hidden;
  }

  body[data-current-view="discovery"] #discovery,
  body[data-current-view="similarity"] #similarity,
  body[data-current-view="favorites"] #favorites {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-current-view="discovery"] #discovery .discovery-shell,
  body[data-current-view="similarity"] #similarity > .workspace-panel,
  body[data-current-view="favorites"] #favorites > .workspace-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-current-view="discovery"] #discovery .smart-search-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-current-view="discovery"] #discovery .smart-search-hero {
    flex: 0 0 auto;
  }

  body[data-current-view="discovery"] #discovery .search-control-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Fixed frame correction: keep the pale workspace in one screen, but let its content scroll inside. */
@media (min-width: 761px) {
  body[data-current-view="discovery"] #discovery,
  body[data-current-view="similarity"] #similarity,
  body[data-current-view="favorites"] #favorites {
    overflow: hidden;
  }

  body[data-current-view="discovery"] #discovery .discovery-shell,
  body[data-current-view="similarity"] #similarity > .workspace-panel,
  body[data-current-view="favorites"] #favorites > .workspace-panel {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  body[data-current-view="discovery"] #discovery .smart-search-panel {
    min-height: 100%;
    height: auto;
    overflow: visible;
  }

  body[data-current-view="discovery"] #discovery .search-control-card {
    flex: 0 0 auto;
    min-height: auto;
    justify-content: flex-start;
  }

  body[data-current-view="discovery"] #discovery .search-control-card,
  body[data-current-view="similarity"] #similarity .workspace-panel,
  body[data-current-view="favorites"] #favorites .workspace-panel {
    max-height: 100%;
  }
}

/* Final attribution module overrides must stay at the end of the stylesheet. */
#attribution .attribution-builder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#attribution .attribution-builder-grid label {
  display: grid;
  gap: 8px;
  color: #7f8a9d;
  font-size: 12px;
  font-weight: 700;
}

#attribution .attribution-builder-grid input,
#attribution .attribution-builder-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: #1f2a3a;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

#attribution .attribution-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

#attribution .affiliate-table {
  min-width: 1180px;
}

#attribution .affiliate-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#attribution .affiliate-row-actions .text-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

#attribution .affiliate-status.approved,
#attribution .affiliate-status.payable,
#attribution .affiliate-status.paid {
  background: #f2fff8;
  color: #20885b !important;
}

#attribution .affiliate-status.pending {
  background: #fff8e8;
  color: #996100 !important;
}

#attribution .affiliate-status.reversed {
  background: #fff1f3;
  color: #c13d53 !important;
}

@media (max-width: 980px) {
  #attribution .attribution-hero,
  #attribution .attribution-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 680px) {
  #attribution .attribution-summary-grid,
  #attribution .attribution-builder-grid,
  #attribution .tracking-method-list,
  #attribution .attribution-flow,
  #attribution .attribution-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Creator content wall + metric trends */
.list-action-btn small {
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.72;
  white-space: nowrap;
}

#creators .red-creator-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-value-with-trend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.metric-trend {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.metric-trend.up {
  color: #0f8f5f;
  background: #e6f8ef;
}

.metric-trend.down {
  color: #c8374a;
  background: #fff0f2;
}

.metric-trend.neutral {
  color: #7d8798;
  background: #eef2f7;
}

#creators .creator-content-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

#creators .creator-content-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.18;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid rgba(142, 92, 255, 0.18);
  border-radius: 10px;
  background: #f3f5f9;
}

#creators .creator-content-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#creators .creator-content-thumb span {
  position: absolute;
  inset: auto 4px 4px;
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 10px;
  background: rgba(18, 26, 43, 0.76);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-content-thumb.is-empty {
  display: none;
}

#creators .creator-content-placeholder {
  width: 100%;
  min-height: 44px;
  margin-top: 9px;
  border: 1px dashed #d7deea;
  border-radius: 10px;
  background: #fbfcff;
  color: #7d8798;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#creators .creator-content-placeholder:disabled {
  cursor: wait;
  opacity: 0.58;
}

.live-post-thumb span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(18, 26, 43, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creatorDialog .creator-dialog-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(198, 174, 255, 0.32);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 600;
}

#creatorDialog .creator-dialog-post-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#creatorDialog .creator-dialog-post-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(198, 174, 255, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: inherit;
  text-decoration: none;
}

#creatorDialog .creator-dialog-post-image {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

#creatorDialog .creator-dialog-post-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#creatorDialog .creator-dialog-post-placeholder {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .creator-dialog-post-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#creatorDialog .creator-dialog-post-card small,
#creatorDialog .creator-dialog-post-card em {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creatorDialog .creator-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#creatorDialog .trend-line-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(198, 174, 255, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #91f0c4;
}

#creatorDialog .trend-line-card > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

#creatorDialog .trend-line-card strong {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

#creatorDialog .trend-line-card span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .trend-line-card svg {
  width: 100%;
  max-width: 260px;
  height: 60px;
}

#creatorDialog .trend-line-card circle {
  fill: currentColor;
}

#creatorDialog .trend-line-card.is-empty {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 680px) {
  #creators .creator-list-card .creator-row-actions,
  #creators .red-creator-actions,
  #creatorDialog .creator-dialog-post-grid,
  #creatorDialog .creator-trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #creators .creator-content-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.creator-update-meta {
  margin: -4px 0 14px;
  color: #7a8494;
  font-size: 12px;
  font-weight: 600;
}

.team-dialog-card {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  overflow: auto;
  background: rgb(26, 15, 46);
  border: 1px solid rgba(226, 210, 255, 0.16);
}

#teamManagementDialog .icon-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(226, 210, 255, 0.24);
  color: #ede0ff;
  line-height: 1;
}

#teamManagementDialog .icon-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.team-tabs {
  display: inline-flex;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 4px;
  border: 1px solid rgba(226, 210, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.team-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #a99cc4;
  font-weight: 700;
}

.team-tab.active {
  background: rgba(143, 92, 255, 0.32);
  color: #fff;
  box-shadow: var(--elev-1);
}

.team-tab-panel {
  display: none;
}

.team-tab-panel.active {
  display: block;
}

.team-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.team-side-form,
.team-list-wrap {
  display: grid;
  gap: 12px;
}

.team-side-form {
  padding: 16px;
  border: 1px solid rgba(226, 210, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.team-side-form h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
}

.team-side-form label {
  display: grid;
  gap: 8px;
  color: #cdbcf2;
  font-size: 12px;
  font-weight: 600;
}

.team-side-form input,
.team-side-form select,
.team-user-row select {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(226, 210, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font: inherit;
  font-size: 13px;
}

.team-side-form select option,
.team-user-row select option {
  background: #1d1030;
  color: #fff;
}

.team-temp-password[hidden] {
  display: none;
}

.team-temp-password {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(82, 214, 149, 0.4);
  border-radius: 10px;
  background: rgba(82, 214, 149, 0.12);
  color: #8fe7b8;
  font-size: 12px;
  font-weight: 600;
}

.team-list-head,
.team-user-row,
.team-share-row {
  display: grid;
  gap: 12px;
  align-items: center;
}

.team-list-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.team-list-head strong {
  color: #fff;
}

.team-user-row {
  grid-template-columns: minmax(150px, 1.3fr) 104px minmax(0, 130px) auto minmax(0, 130px) auto;
}

.team-share-row {
  grid-template-columns: minmax(220px, 1fr) 90px auto auto;
}

.team-user-row,
.team-share-row,
.team-empty {
  padding: 12px;
  border: 1px solid rgba(226, 210, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.team-user-row strong,
.team-share-row strong {
  display: block;
  color: #fff;
  font-size: 13px;
}

.team-user-row span,
.team-user-row small,
.team-share-row span,
.team-empty {
  color: #b4a6d6;
  font-size: 12px;
  font-weight: 600;
}

.team-user-row > div:first-child span,
.team-user-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-status {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.team-status.active {
  background: rgba(82, 214, 149, 0.16);
  color: #7ee2b4;
}

.team-status.pending {
  background: rgba(255, 193, 84, 0.16);
  color: #ffcf7d;
}

.team-status.disabled {
  background: rgba(255, 255, 255, 0.08);
  color: #a99cc4;
}

.team-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}

.team-row-actions .text-button {
  min-height: 32px;
  padding: 0 8px;
}

.text-button.danger {
  color: #ff9ab8;
}

.share-body {
  min-height: 100vh;
  background: #f4f7fb;
  color: #172033;
}

.share-shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.share-hero,
.share-section,
.share-invalid {
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-1);
}

.share-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
}

.share-hero h1 {
  margin: 4px 0 8px;
  font-size: 34px;
}

.share-hero p,
.share-hero span {
  margin: 0;
  color: #667085;
  font-weight: 600;
}

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

.share-metrics article {
  padding: 16px;
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  background: #fff;
}

.share-metrics span {
  color: #7a8494;
  font-size: 12px;
  font-weight: 700;
}

.share-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.share-section {
  margin-top: 14px;
  padding: 24px;
}

.share-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.share-section-head h2 {
  margin: 0;
  font-size: 18px;
}

.share-creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.share-creator-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  background: #fbfcff;
}

.share-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.share-creator-card strong {
  display: block;
  font-size: 15px;
}

.share-creator-card span,
.share-creator-card dt,
.share-creator-card dd {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.share-creator-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.share-creator-card dd {
  margin: 2px 0 0;
  color: #172033;
}

.share-content-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.share-content-item {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  border-radius: 14px;
  background: #e9eef5;
  color: #fff;
}

.share-content-item img,
.share-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  background: linear-gradient(135deg, #dfe7f1, #f6f8fb);
}

.share-content-item span {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.68);
  font-size: 12px;
  font-weight: 700;
}

.share-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

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

.share-list-row,
.share-empty {
  padding: 12px;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  background: #fbfcff;
}

.share-list-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
}

.share-list-row time {
  color: #7544d7;
  font-weight: 700;
}

.share-list-row strong {
  display: block;
  font-size: 13px;
}

.share-list-row span,
.share-empty {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.share-invalid {
  width: min(520px, calc(100vw - 32px));
  margin: 18vh auto 0;
  padding: 28px;
  text-align: center;
}

@media (max-width: 820px) {
  .team-grid,
  .team-user-row,
  .team-share-row,
  .share-two-column,
  .share-hero {
    grid-template-columns: 1fr;
  }

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

/* Creator data confidence lifecycle */
.creator-confidence-badge,
.creator-source-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

.creator-confidence-badge {
  min-width: 23px;
  height: 23px;
  padding: 0 7px;
}

/* Beta invitation activation and owner management. */
.lm-secondary {
  min-height: 44px;
  border: 1px solid #ded9e6;
  border-radius: 14px;
  background: #fff;
  color: #6335b7;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lm-secondary:hover {
  border-color: #bca9dc;
  background: #faf7ff;
}

.lm-secondary:focus-visible,
.lm-support button:focus-visible {
  outline: 3px solid rgba(122, 69, 209, 0.2);
  outline-offset: 2px;
}

.lm-panel .lm-form .lm-code-input {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
}

.lm-support {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.lm-support button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #6836bc;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lm-support button:hover {
  text-decoration: underline;
}

.lm-support-divider {
  color: #c5bdcd;
}

#settings .team-form-hint {
  margin: -2px 0 2px;
  color: #77808e;
  font-size: 12px;
  line-height: 1.55;
}

.team-invite-result[hidden],
#settings .team-invite-result[hidden] {
  display: none;
}

#settings .team-invite-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #c9b9e8;
  border-radius: 14px;
  background: #f8f4ff;
}

#settings .team-invite-result p,
#settings .team-invite-result small {
  margin: 0;
}

#settings .team-invite-result p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #362553;
  font-size: 12px;
}

#settings .team-invite-result p span,
#settings .team-invite-result small {
  color: #786a8e;
  font-size: 12px;
  line-height: 1.45;
}

#settings .team-invite-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

#settings .team-invite-copy-row code,
#settings .team-invite-url {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #56309f;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settings .team-invite-copy-row code {
  letter-spacing: 0.08em;
}

#settings .team-invite-copy-row .text-button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #cfc4e8;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font-weight: 600;
}

#settings .team-invite-list {
  display: grid;
  gap: 8px;
}

#settings .team-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "identity status actions";
  gap: 8px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #fff;
}

/* 创建/激活时间并进身份区，行结构与成员行保持一致 */
#settings .team-invite-identity small {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  vertical-align: middle;
}

#settings .team-invite-identity .team-invite-date::before {
  content: "·";
  margin: 0 6px;
  color: #b6bdc9;
}

#settings .team-invite-identity {
  grid-area: identity;
  min-width: 0;
}

#settings .team-invite-identity strong,
#settings .team-invite-identity > span {
  display: block;
}

#settings .team-invite-identity strong,
#settings .team-invite-identity > span,
#settings .team-invite-identity small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settings .team-invite-identity strong {
  color: #242d3d;
  font-size: 13px;
}

#settings .team-invite-identity span,
#settings .team-invite-identity small,
#settings .team-invite-date,
#settings .team-user-tester-code {
  color: #768090;
  font-size: 12px;
  font-weight: 600;
}

#settings .team-invite-identity small,
#settings .team-user-tester-code {
  margin-top: 5px;
}

#settings .team-user-tester-code {
  color: #6941b5;
}

#settings .team-invite-row > .team-status {
  grid-area: status;
}

#settings .team-invite-date {
  white-space: nowrap;
}

#settings .team-invite-row > .team-row-actions {
  grid-area: actions;
}

@media (max-width: 760px) {
  #settings .team-invite-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "status"
      "actions";
  }

  #settings .team-invite-row > .team-row-actions {
    justify-content: flex-start;
  }

  #settings .team-invite-copy-row {
    grid-template-columns: 1fr;
  }
}

.creator-confidence-badge--a {
  border-color: #aad9bd;
  background: #edf9f1;
  color: #176c39;
}

.creator-confidence-badge--b {
  border-color: #e8cc8e;
  background: #fff8e8;
  color: #8a5710;
}

.creator-confidence-badge--c {
  border-color: #d7dbe2;
  background: #f3f4f6;
  color: #667085;
}

.creator-source-chip {
  min-height: 23px;
  padding: 3px 8px;
  border-color: #ddd5ee;
  background: #f7f4fc;
  color: #6a4aa0;
}

.creator-update-meta.is-stale {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid #f1d58a;
  border-radius: 10px;
  background: #fff9e8;
  color: #875d00;
}

/* P6: content-first live result cards, screening pools, background search */
.live-result-card.v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e4e8f0;
  border-radius: 14px;
  background: #fff;
}

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

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

.live-result-card.v2 .live-result-header .avatar {
  grid-row: auto;
  align-self: start;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.live-result-card.v2 .live-result-id {
  min-width: 0;
}

.live-result-card.v2 .live-result-id strong {
  display: block;
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-result-card.v2 .live-result-id p {
  margin: 2px 0 0;
  overflow: hidden;
  color: #7d8798;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-result-card.v2 .live-headline-stats {
  grid-column: 3;
  display: flex;
  gap: 16px;
  text-align: right;
}

.live-result-card.v2 .live-headline-stats span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.live-result-card.v2 .live-headline-stats strong {
  color: #172033;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.live-result-card.v2 .live-headline-stats small {
  color: #8b95a8;
  font-size: 11px;
  font-weight: 700;
}

.live-result-card.v2 .live-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  max-height: 26px;
  overflow: hidden;
}

.live-tag-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 9px;
  border: 1px solid #e1e6ee;
  border-radius: 999px;
  background: #f6f8fc;
  color: #4c5a70;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-tag-chip.accent {
  border-color: rgba(142, 92, 255, 0.32);
  background: #f4eeff;
  color: #6636d9;
}

.live-tag-chip.score {
  border-color: rgba(255, 61, 110, 0.28);
  background: #fff0f4;
  color: #d22c5c;
}

.live-result-card.v2 .live-media-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.live-result-card.v2 .live-media-preview .live-media-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  border: 1px solid #e8edf4;
  background: #f3f5f9;
}

.live-result-card.v2 .live-media-preview .live-media-thumb:nth-child(n + 3) {
  display: none;
}

.live-result-card.v2 .live-media-preview .live-media-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.live-result-card.v2 .live-media-preview .live-post-thumb span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 20, 28, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.live-result-card.v2 .live-media-preview.is-empty {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 2px;
  min-height: 64px;
  border: 1px dashed #e1e6ee;
  border-radius: 10px;
  color: #8b95a8;
  font-size: 12px;
}

.live-result-card.v2 .live-media-preview.is-empty span {
  color: #8a6ad8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-result-card.v2 .live-media-preview.is-empty strong {
  margin-top: 4px;
  color: #273147;
  font-size: 15px;
}

.live-result-card.v2 .live-media-preview.is-empty small {
  margin-top: 2px;
  color: #7d8798;
  font-weight: 600;
}

.live-result-card.v2 .live-result-summary {
  display: -webkit-box;
  margin: 0;
  min-height: 0;
  max-height: 40px;
  overflow: hidden;
  color: #46536a;
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.live-result-card.v2 .live-review-line {
  margin: -4px 0 0;
  color: #ad6800;
  font-size: 12px;
  font-weight: 700;
}

.live-result-card.v2 .live-result-actions.v2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #eef1f6;
}

@media (max-width: 980px) {
  #liveSearchResults.tiktok-results {
    grid-template-columns: 1fr;
  }
}

.live-result-card.v2 .live-result-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.live-result-card.v2 .live-result-links .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 8px;
  color: #172033;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.live-result-card.v2 .live-screen-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.screen-action-btn {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid #e1e6ee;
  background: #fff;
  color: #5a6578;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.12s, background 0.12s;
}

.screen-action-btn:hover {
  transform: translateY(-1px);
}

.screen-action-btn.no {
  color: #5a6578;
}

.screen-action-btn.no:hover {
  border-color: #c8374a;
  color: #c8374a;
  background: #fff5f6;
}

.screen-action-btn.save {
  border-color: rgba(255, 61, 110, 0.4);
  background: linear-gradient(135deg, #ff3d6e, #ff6f9d);
  color: #fff;
}

.screen-action-btn.save:disabled {
  border-color: #e1e6ee;
  background: #f2f4f9;
  color: #9aa4b5;
  cursor: default;
}

.live-screen-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
}

.live-screen-tabs button {
  padding: 7px 14px;
  border: 1px solid #e1e6ee;
  border-radius: 999px;
  background: #fff;
  color: #5a6578;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.live-screen-tabs button.active {
  border-color: rgba(142, 92, 255, 0.45);
  background: #f4eeff;
  color: #5b2fd0;
}

.live-screen-tabs button span {
  margin-left: 4px;
  opacity: 0.75;
}

.live-screen-refresh {
  border-color: rgba(91, 50, 184, 0.38);
  background: linear-gradient(135deg, rgba(91, 50, 184, 0.08), rgba(193, 74, 155, 0.1));
  color: #5b32b8;
  box-shadow: 0 8px 20px rgba(91, 50, 184, 0.1);
}

.live-screen-refresh:hover:not(:disabled) {
  border-color: rgba(91, 50, 184, 0.58);
  background: linear-gradient(135deg, rgba(91, 50, 184, 0.14), rgba(193, 74, 155, 0.16));
  transform: translateY(-1px);
}

.live-screen-refresh:disabled {
  border-color: #e1e5ed;
  background: #f3f4f7;
  color: #9ba3b2;
  box-shadow: none;
  cursor: not-allowed;
}

.live-result-card[data-screen="no"] {
  opacity: 0.86;
}

#deepSearchPill {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 260;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(142, 92, 255, 0.4);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(60, 35, 102, 0.22);
  cursor: pointer;
  text-align: left;
}

#deepSearchPill .pill-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(142, 92, 255, 0.25);
  border-top-color: #8e5cff;
  animation: deep-pill-spin 0.9s linear infinite;
}

@keyframes deep-pill-spin {
  to { transform: rotate(360deg); }
}

#deepSearchPill .pill-copy {
  display: grid;
  gap: 1px;
}

#deepSearchPill .pill-copy strong {
  color: #172033;
  font-size: 12px;
  font-weight: 700;
}

#deepSearchPill .pill-copy small {
  color: #7d8798;
  font-size: 12px;
}

#globalToastHost {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 300;
  display: grid;
  gap: 8px;
}

.global-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 11px 12px 11px 16px;
  border: 1px solid rgba(142, 92, 255, 0.35);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(60, 35, 102, 0.2);
  color: #172033;
  font-size: 12px;
  font-weight: 700;
}

.global-toast .toast-action {
  padding: 5px 12px;
  border: none;
  border-radius: 999px;
  background: #8e5cff;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.global-toast .toast-close {
  border: none;
  background: none;
  color: #9aa4b5;
  font-size: 15px;
  cursor: pointer;
}

.nav-alert-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: #ff3d6e;
  box-shadow: 0 0 0 3px rgba(255, 61, 110, 0.2);
}

/* Creator Discovery navigation split */
.zr-nav-section {
  display: grid;
  gap: 8px;
}

.zr-nav-label {
  display: block;
  margin: 0 12px 2px;
  color: rgba(216, 202, 233, 0.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.zr-nav-label--operations {
  margin-top: 2px;
}

.zr-nav-divider {
  height: 1px;
  margin: 2px 10px 0;
  background: linear-gradient(90deg, rgba(226, 210, 255, 0.28), rgba(226, 210, 255, 0));
}

.zr-nav-ai {
  position: relative;
  overflow: hidden;
}

.zr-nav-ai::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.zr-nav-ai-badge {
  display: inline-flex;
  min-width: 28px;
  min-height: 20px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: linear-gradient(135deg, #7a4be1, #c14a9b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#discovery .smart-search-hero {
  grid-template-columns: minmax(0, 1fr);
}

#discovery .smart-search-copy {
  max-width: 760px;
}

#discovery .search-control-head {
  justify-content: flex-start;
}

#discovery .discovery-keyword-field {
  grid-column: span 2;
}

#discovery .discovery-keyword-field input {
  min-height: 44px;
}

.zr-placeholder {
  min-height: 320px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

body.sidebar-collapsed .zr-nav-label,
body.sidebar-collapsed .zr-nav-divider {
  display: none;
}

body.sidebar-collapsed .zr-nav-section {
  gap: 8px;
}

body.sidebar-collapsed .zr-nav-ai-badge {
  display: none;
}

@media (max-width: 760px) {
  #discovery .discovery-keyword-field {
    grid-column: 1 / -1;
  }
}

/* Zerendo Agent Search */
.zr-page {
  --zr-primary: #5b32b8;
  --zr-accent: #c14a9b;
  --zr-ink: #1d1930;
  --zr-muted: #69647a;
  --zr-border: #e9e3f2;
  --zr-soft: #f8f5fc;
  display: grid;
  gap: 24px;
  width: min(100%, 1240px);
  margin: 0 auto;
}

.zr-page [hidden] {
  display: none !important;
}

.zr-panel,
.zr-scope-card,
.zr-candidate-card,
.zr-report-header {
  border: 1px solid var(--zr-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;   /* 卡片分层收敛：靠底色和发丝边分层，不叠阴影 */
}

.zr-panel {
  /* 原来是 clamp(24px, 4vw, 44px)。vw 看的是**视口**：1240 视口下算出 44px，
     两边吃掉 88px——而主栏此刻只有 664px。改用 cqi（容器内联尺寸的 1%），
     跟着主栏走：主栏 664px 时约 26px，主栏宽了才回到 44px。 */
  padding: clamp(20px, 4cqi, 44px);
}

.zr-kicker {
  display: block;
  color: var(--zr-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.zr-hero,
.zr-live-update {
  display: grid;
  /* 144→96px：实测这一页内容要到 825px 才出现（92% 屏高）。
     插画是氛围不是信息，不该吃掉五分之一屏。 */
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.zr-hero-character,
.zr-live-update img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.zr-speech {
  position: relative;
  padding: 16px 20px;
  border: 1px solid #e8ddf7;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #faf7ff 55%, #fff7fb 100%);
}

.zr-speech::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) rotate(45deg);
  border-left: 1px solid #e8ddf7;
  border-bottom: 1px solid #e8ddf7;
  background: #fff;
}

.zr-speech h2,
.zr-progress-header h2,
.zr-report-header h2,
.zr-scope-title h3 {
  margin: 6px 0 8px;
  color: var(--zr-ink);
}

.zr-speech h2 {
  /* 和 .page-head 同一档。它是引导语不是页面标题，
     37px 时英文要换两行、还盖过下面整页表单。 */
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.011em;
}

.zr-speech p,
.zr-report-header p,
.zr-empty-report p {
  margin: 0;
  color: var(--zr-muted);
  line-height: 1.65;
}

.zr-goal-field {
  display: grid;
  gap: 8px;
  margin-top: 32px;
}

.zr-goal-field > label,
.zr-field > span,
.zr-platform-fieldset legend {
  color: var(--zr-ink);
  font-size: 15px;
  font-weight: 700;
}

.zr-goal-field textarea,
.zr-field input {
  width: 100%;
  border: 1px solid #dcd3e9;
  border-radius: 14px;
  background: #fff;
  color: var(--zr-ink);
  outline: none;
}

.zr-goal-field textarea {
  min-height: 144px;
  padding: 18px 20px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.65;
}

.zr-field input {
  min-height: 48px;
  padding: 0 14px;
}

.zr-goal-field textarea:focus,
.zr-field input:focus,
.zr-check-row:focus-within,
.zr-platform-option:focus-within {
  border-color: var(--zr-primary);
  box-shadow: 0 0 0 3px rgba(91, 50, 184, 0.14);
}

.zr-goal-field small,
.zr-field small,
.zr-check-row small,
.zr-platform-option small {
  color: var(--zr-muted);
  font-size: 12px;
  line-height: 1.5;
}

.zr-form-error {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #f2c4cd;
  border-radius: 14px;
  background: #fff4f6;
  color: #a31d38;
  font-size: 13px;
  font-weight: 600;
}

.zr-advanced {
  margin-top: 24px;
  border: 1px solid var(--zr-border);
  border-radius: 18px;
  background: var(--zr-soft);
}

.zr-advanced summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: var(--zr-ink);
  cursor: pointer;
  font-weight: 700;
}

.zr-advanced summary span {
  color: var(--zr-muted);
  font-size: 12px;
  font-weight: 700;
}

.zr-advanced-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(280px, 1fr);
  gap: 20px;
  padding: 0 18px 20px;
}

.zr-field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.zr-check-row {
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e4ddec;
  border-radius: 14px;
  background: #fff;
}

.zr-check-row input,
.zr-candidate-select input,
.zr-bulk-select input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--zr-primary);
}

.zr-check-row span {
  display: grid;
  gap: 4px;
}

.zr-check-row strong {
  color: var(--zr-ink);
  font-size: 13px;
}

.zr-platform-fieldset {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.zr-platform-options {
  display: grid;
  /* minmax(0, 1fr) 允许列无限收缩：主栏变窄后每列只剩 125px，
     而选项里的 logo + 文字 + 勾选标记放不下，.zr-platform-copy 被压到 12px 宽、
     文字竖着排成一列。给下限 + auto-fit，放不下就换成两行两列。 */
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.zr-platform-option {
  position: relative;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 42px 14px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f6f4fb;   /* 内层卡：下沉面。写死不用 --surface-soft——
     那个 token 只在 day 主题里定义，夜间未定义会回落成近乎透明的值，
     压在硬编码的白卡上文字掉到 2.6:1（实测）。这几页本就整页钉浅色。 */
  cursor: pointer;
  user-select: none;
  box-shadow: 0 7px 18px rgba(61, 37, 83, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.zr-platform-option:hover {
  border-color: rgba(91, 50, 184, 0.34);
  box-shadow: 0 12px 28px rgba(61, 37, 83, 0.1);
  transform: translateY(-2px);
}

.zr-platform-option.is-selected {
  border-color: rgba(91, 50, 184, 0.68);
  background: linear-gradient(135deg, #faf7ff 0%, #fff8fc 100%);
  /* 只留 2px 描边环，去掉 14px/30px 的扩散阴影：
     选中态要"看得出来"，不需要"浮起来"。 */
  box-shadow: 0 0 0 2px rgba(91, 50, 184, 0.12);
}

.zr-platform-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.zr-platform-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  accent-color: var(--zr-primary);
}

.zr-platform-option .zr-platform-logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 18px;
  box-shadow: var(--elev-1);
}

.zr-platform-option .zr-platform-logo.linkedin {
  font-size: 15px;
}

.zr-platform-option .zr-platform-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.zr-platform-option .zr-platform-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #ded5e8;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 13px;
  font-weight: 700;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.zr-platform-option.is-selected .zr-platform-check {
  border-color: transparent;
  background: linear-gradient(135deg, #5b32b8, #c14a9b);
  color: #fff;
  transform: scale(1.04);
}

.zr-run-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid #eadff2;
  border-radius: 18px;
  background: linear-gradient(135deg, #fbf8ff, #fff8fc);
}

.zr-cost-hint {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.zr-cost-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--zr-primary), var(--zr-accent));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.zr-cost-hint p {
  min-width: 0;
  display: grid;
  gap: 4px;
  margin: 0;
}

.zr-cost-hint strong {
  color: var(--zr-ink);
  font-size: 13px;
}

.zr-cost-hint small {
  color: var(--zr-muted);
  font-size: 12px;
}

.zr-start-button {
  min-width: 132px;
  min-height: 48px;
  flex: 0 0 auto;
}

.zr-progress-header,
.zr-report-header,
.zr-scope-title,
.zr-candidate-actions,
.zr-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 报告卡是白底，全局 .text-button/.ghost-button 的浅色在这里看不见 */
.zr-candidate-actions .text-button,
.zr-bulk-bar .text-button,
.zr-candidate-actions .ghost-button,
.zr-bulk-bar .ghost-button,
.zr-report-header .ghost-button,
.zr-report-header .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #d9d0ee;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font-weight: 700;
  text-decoration: none;
  opacity: 1;
  box-shadow: none;
}

.zr-candidate-actions .text-button:hover,
.zr-bulk-bar .text-button:hover,
.zr-candidate-actions .ghost-button:hover:not(:disabled),
.zr-bulk-bar .ghost-button:hover:not(:disabled),
.zr-report-header .ghost-button:hover,
.zr-report-header .text-button:hover {
  border-color: #b9a9dc;
  background: #f7f3ff;
  color: #4a2792;
}

.zr-candidate-actions .ghost-button:disabled,
.zr-bulk-bar .ghost-button:disabled {
  border-color: #e2e6ee;
  background: #f4f6fa;
  color: #96a0b1;
}

.zr-bulk-bar label,
.zr-bulk-bar .zr-bulk-count {
  color: #414c60;
  font-weight: 600;
}

.zr-progress-header h2,
.zr-report-header h2 {
  font-size: clamp(22px, 2.5vw, 30px);
}

.zr-cancel-button {
  min-height: 44px;
}

.zr-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 34px 0 14px;
  padding: 0;
  list-style: none;
}

.zr-steps li {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #8d8799;
  text-align: center;
}

.zr-steps li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #ded7e6;
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.zr-steps li strong {
  font-size: 12px;
  line-height: 1.35;
}

.zr-steps li.is-current,
.zr-steps li.is-done {
  color: var(--zr-primary);
}

.zr-steps li.is-current > span,
.zr-steps li.is-done > span {
  border-color: transparent;
  background: linear-gradient(135deg, var(--zr-primary), var(--zr-accent));
  color: #fff;
}

.zr-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee9f4;
}

.zr-progress-track > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--zr-primary), var(--zr-accent));
  transition: transform 240ms ease-out;
}

.zr-live-update {
  grid-template-columns: 112px minmax(0, 1fr);
  margin-top: 28px;
}

.zr-speech--compact {
  padding: 20px 22px;
}

.zr-speech--compact strong {
  display: block;
  margin-bottom: 5px;
  color: var(--zr-ink);
}

.zr-report {
  display: grid;
  gap: 20px;
}

.zr-report-header {
  padding: 24px 28px;
}

.zr-report-header .ghost-button {
  min-height: 44px;
}

.zr-scope-card {
  padding: 22px 24px;
}

.zr-scope-title h3 {
  margin-bottom: 0;
}

.zr-completeness {
  padding: 7px 11px;
  border: 1px solid #b9e0c9;
  border-radius: 999px;
  background: #effaf3;
  color: #18733c;
  font-size: 12px;
  font-weight: 700;
}

.zr-completeness.is-incomplete {
  border-color: #efcc9d;
  background: #fff7eb;
  color: #9a5310;
}

.zr-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.zr-scope-item {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--zr-soft);
}

.zr-scope-item dt {
  color: var(--zr-muted);
  font-size: 12px;
  font-weight: 600;
}

.zr-scope-item dd {
  margin: 5px 0 0;
  color: var(--zr-ink);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.zr-platform-scope-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.zr-platform-scope {
  padding: 16px;
  border: 1px solid #e6dcef;
  border-radius: 14px;
  background: #fff;
}

.zr-platform-scope.is-incomplete {
  border-color: #efcc9d;
  background: #fffaf2;
}

.zr-platform-scope header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zr-platform-scope header span {
  color: #7c5bbd;
  font-size: 12px;
  font-weight: 700;
}

.zr-platform-scope p,
.zr-platform-scope small {
  color: var(--zr-muted);
  font-size: 12px;
  line-height: 1.45;
}

.zr-platform-scope ul {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--zr-ink);
  font-size: 12px;
  line-height: 1.55;
}

.creator-platform-note {
  margin: -2px 0 2px;
  color: #6f7890;
  font-size: 12px;
}

[data-linkedin-inapplicable][hidden] {
  display: none;
}

.search-control-card.is-linkedin-mode .smart-filter-grid {
  grid-template-columns: minmax(180px, 0.8fr) minmax(320px, 1.6fr) minmax(160px, 0.6fr);
}

.linkedin-evidence-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.linkedin-evidence-links > span {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.linkedin-evidence-links a {
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef6ff;
  color: #0a66c2;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.zr-stop-reason {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff7eb;
  color: #8a4b12;
  font-size: 13px;
  font-weight: 600;
}

.zr-candidate-grid {
  display: grid;
  gap: 16px;
}

.zr-candidate-card {
  padding: 24px;
}

.zr-candidate-header {
  display: grid;
  grid-template-columns: 28px 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}

.zr-candidate-select {
  min-width: 28px;
  min-height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.zr-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid #ede5f6;
  border-radius: 18px;
  background: #f7f2fc;
  object-fit: cover;
  color: var(--zr-primary);
  font-size: 18px;
  font-weight: 700;
}

.zr-candidate-identity {
  min-width: 0;
}

.zr-candidate-identity h3,
.zr-candidate-identity p {
  margin: 0;
}

.zr-candidate-identity h3 {
  color: var(--zr-ink);
  font-size: 18px;
}

.zr-candidate-identity p {
  margin-top: 3px;
  color: var(--zr-muted);
  font-size: 13px;
}

.zr-candidate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.zr-candidate-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--zr-soft);
  color: #665e74;
  font-size: 11px;
  font-weight: 600;
}

.creator-storage-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid #d8dce5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.creator-storage-badge.is-pool {
  background: #f1f2f5;
  color: #6f7480;
}

.creator-storage-badge.is-formal {
  border-color: transparent;
  background: linear-gradient(135deg, #5b32b8, #c14a9b);
  color: #fff;
  box-shadow: 0 5px 12px rgba(91, 50, 184, 0.18);
}

.zr-total-score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 4px;
  text-align: right;
}

.zr-total-score span {
  grid-column: 1 / -1;
  color: var(--zr-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zr-total-score strong {
  color: var(--zr-ink);
  font-size: 28px;
  line-height: 1;
}

.zr-total-score small {
  color: var(--zr-muted);
  font-size: 12px;
}

.zr-confidence {
  padding: 7px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.zr-confidence--a {
  border-color: #aad9bd;
  background: #edf9f1;
  color: #176c39;
}

.zr-confidence--b {
  border-color: #e8cc8e;
  background: #fff8e8;
  color: #8a5710;
}

.zr-confidence--c {
  border-color: #d7c9e7;
  background: #f8f3fc;
  color: #654980;
}

.zr-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.zr-metrics > div {
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--zr-soft);
}

.zr-metrics span {
  display: block;
  color: var(--zr-muted);
  font-size: 11px;
  font-weight: 600;
}

.zr-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--zr-ink);
  font-size: 15px;
}

.zr-metrics .is-ready {
  color: #18733c;
}

.zr-metrics .is-missing {
  color: #8a6370;
}

.zr-dimensions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.zr-dimension {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid #eee8f4;
  border-radius: 14px;
}

.zr-dimension > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.zr-dimension span,
.zr-dimension strong {
  color: var(--zr-ink);
  font-size: 12px;
  font-weight: 700;
}

.zr-dimension-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece7f2;
}

.zr-dimension-track span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--zr-primary), var(--zr-accent));
}

.zr-dimension small {
  color: var(--zr-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.zr-recommendation,
.zr-evidence {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee8f4;
}

.zr-recommendation > span,
.zr-evidence > span {
  color: var(--zr-muted);
  font-size: 12px;
  font-weight: 700;
}

.zr-recommendation p {
  margin: 0;
  color: var(--zr-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.zr-evidence > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zr-evidence a {
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 10px;
  background: #f5f0fb;
  color: var(--zr-primary);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.zr-candidate-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.zr-candidate-actions > :first-child {
  margin-right: auto;
}

.zr-candidate-actions .ghost-button,
.zr-candidate-actions .primary-button {
  min-height: 44px;
}

.zr-missing-value {
  color: var(--zr-muted);
  font-size: 12px;
}

.zr-empty-report {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 220px;
  padding: 28px;
  border: 1px dashed #d9cce8;
  border-radius: 18px;
  background: #fff;
}

.zr-empty-report img {
  object-fit: contain;
}

.zr-empty-report strong {
  color: var(--zr-ink);
}

.zr-bulk-bar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  padding: 14px 16px;
  border: 1px solid #ded2ec;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 50px rgba(45, 26, 73, 0.16);
  backdrop-filter: blur(12px);
}

.zr-bulk-select {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--zr-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.zr-bulk-bar > span {
  color: var(--zr-muted);
  font-size: 12px;
  font-weight: 600;
}

.zr-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zr-bulk-actions button {
  min-height: 44px;
}

.zr-action-status {
  min-height: 22px;
  margin: -8px 4px 0;
  color: var(--zr-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.zr-page button:disabled,
.zr-page input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 1080px) {
  .zr-dimensions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .zr-candidate-header {
    grid-template-columns: 28px 56px minmax(0, 1fr) auto;
  }

  .zr-confidence {
    grid-column: 3 / -1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .zr-panel {
    padding: 20px;
    border-radius: 18px;
  }

  .zr-hero,
  .zr-live-update {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
  }

  .zr-speech {
    padding: 16px;
  }

  .zr-speech::before {
    left: -8px;
    width: 14px;
    height: 14px;
  }

  .zr-speech h2 {
    font-size: 22px;
  }

  .zr-advanced-grid,
  .zr-platform-options,
  .zr-scope-grid,
  .zr-metrics,
  .zr-dimensions {
    grid-template-columns: 1fr;
  }

  .zr-platform-fieldset {
    grid-column: auto;
  }

  .zr-run-confirm,
  .zr-progress-header,
  .zr-report-header,
  .zr-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .zr-start-button,
  .zr-cancel-button {
    width: 100%;
  }

  .zr-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .zr-steps li {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .zr-candidate-header {
    grid-template-columns: 28px 52px minmax(0, 1fr);
    align-items: start;
  }

  .zr-avatar {
    width: 52px;
    height: 52px;
  }

  .zr-total-score,
  .zr-confidence {
    grid-column: 3;
    justify-self: start;
    text-align: left;
  }

  .zr-total-score {
    margin-top: 8px;
  }

  .zr-candidate-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .zr-candidate-actions > :first-child {
    margin-right: 0;
  }

  .zr-recommendation,
  .zr-evidence {
    grid-template-columns: 1fr;
  }

  .zr-bulk-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .zr-action-status {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zr-progress-track > span {
    transition: none;
  }
}

/* Dashboard · Zerendo action advice */
.agent-advice-panel {
  margin-top: 16px;
}

.agent-advice-heading {
  align-items: flex-start;
}

.agent-advice-intro {
  margin: 6px 0 0;
}

.agent-advice-input {
  margin-top: 18px;
  border: 1px solid #e8e4f1;
  border-radius: 14px;
  background: #faf9fc;
}

.agent-advice-input > summary,
.agent-advice-priority > summary,
.agent-advice-compliance > summary {
  cursor: pointer;
  list-style: none;
}

.agent-advice-input > summary::-webkit-details-marker,
.agent-advice-priority > summary::-webkit-details-marker,
.agent-advice-compliance > summary::-webkit-details-marker {
  display: none;
}

.agent-advice-input > summary {
  padding: 13px 15px;
  color: #5b32b8;
  font-size: 13px;
  font-weight: 600;
}

.agent-advice-input > summary::after {
  content: "＋";
  float: right;
}

.agent-advice-input[open] > summary::after {
  content: "－";
}

#agentAdviceForm {
  padding: 0 15px 15px;
}

.agent-advice-goal-field,
.agent-advice-field-grid label {
  display: grid;
  gap: 8px;
  color: #4b5565;
  font-size: 12px;
  font-weight: 600;
}

.agent-advice-goal-field textarea,
.agent-advice-field-grid input,
.agent-advice-field-grid select {
  width: 100%;
  border: 1px solid #dde2ea;
  border-radius: 10px;
  background: #fff;
  color: #1f2a3a;
}

.agent-advice-goal-field textarea {
  min-height: 88px;
  padding: 11px 12px;
  resize: vertical;
}

.agent-advice-field-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(140px, 0.8fr));
  gap: 12px;
  margin-top: 12px;
}

.agent-advice-field-grid input,
.agent-advice-field-grid select {
  min-height: 40px;
  padding: 8px 10px;
}

.agent-advice-result {
  margin-top: 18px;
}

.agent-advice-empty,
.agent-advice-loading,
.agent-advice-error {
  border: 1px dashed #ddd6eb;
  border-radius: 14px;
  background: #fbfaff;
  color: #737b88;
}

.agent-advice-empty {
  padding: 16px;
  text-align: center;
}

.agent-advice-loading {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
}

.agent-advice-loading img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.agent-advice-loading strong,
.agent-advice-loading p {
  display: block;
  margin: 0 0 5px;
}

.agent-advice-error {
  padding: 16px;
  border-color: #f4c7cc;
  background: #fff7f8;
}

.agent-advice-error strong {
  color: #b42335 !important;
}

.agent-advice-error p {
  margin: 5px 0 12px;
}

.agent-advice-result-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 15px 16px;
  border: 1px solid #e7e0f3;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8f5ff, #fff8fc);
}

.agent-advice-result-head > div {
  display: grid;
  gap: 8px;
}

.agent-advice-result-head time {
  color: #8a93a1;
  font-size: 12px;
  white-space: nowrap;
}

.agent-advice-source,
.agent-advice-owner {
  width: fit-content;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.agent-advice-source {
  padding: 4px 9px;
  background: linear-gradient(135deg, #5b32b8, #c14a9b);
  color: #fff;
}

.agent-advice-source.is-local {
  background: #e8eaf0;
  color: #5e6674;
}

.agent-advice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 16px;
  margin-top: 18px;
}

.agent-advice-layout h3,
.agent-advice-questions h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.agent-advice-priority,
.agent-advice-compliance {
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  background: #fff;
}

.agent-advice-priority + .agent-advice-priority,
.agent-advice-compliance + .agent-advice-compliance {
  margin-top: 8px;
}

.agent-advice-priority > summary,
.agent-advice-compliance > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 11px 12px;
  color: #3d4654;
  font-size: 12px;
  font-weight: 600;
}

.agent-advice-priority > summary > span {
  padding: 3px 7px;
  border-radius: 10px;
  background: #eee9fb;
  color: #5b32b8;
}

.agent-advice-priority.is-p0 > summary > span {
  background: #fce7e9;
  color: #b42335;
}

.agent-advice-priority > summary small,
.agent-advice-compliance > summary small {
  margin-left: auto;
  color: #969eaa;
}

.agent-advice-action-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.agent-advice-action {
  padding: 12px;
  border-radius: 10px;
  background: #f8f9fb;
}

.agent-advice-action-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}

.agent-advice-owner {
  padding: 3px 8px;
  background: #ece7fb;
  color: #5b32b8;
}

.agent-advice-owner.is-legal {
  background: #fce7e9;
  color: #b42335;
}

.agent-advice-owner.is-operations {
  background: #e2f0ff;
  color: #1769aa;
}

.agent-advice-action time,
.agent-advice-action small {
  color: #8a93a1;
  font-size: 12px;
}

.agent-advice-action strong {
  font-size: 13px;
}

.agent-advice-action p {
  margin: 6px 0;
  font-size: 12px;
}

.agent-advice-compliance > ul,
.agent-advice-compliance > p {
  margin: 0;
  padding: 0 28px 12px;
  color: #5e6674;
  font-size: 12px;
}

.agent-advice-compliance > ul {
  display: grid;
  gap: 8px;
}

.agent-advice-risks {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #f1d58a;
  border-radius: 14px;
  background: #fff9e8;
}

.agent-advice-risks strong {
  color: #875d00 !important;
}

.agent-advice-risks p {
  margin: 6px 0 0;
  color: #795e22 !important;
  font-size: 12px;
}

.agent-advice-questions {
  margin-top: 16px;
}

.agent-advice-questions ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #5e6674;
  font-size: 12px;
}

.agent-advice-footnote {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #edf0f4;
}

.agent-advice-footnote p {
  margin: 4px 0;
  color: #969eaa !important;
  font-size: 12px;
}

@media (max-width: 820px) {
  .agent-advice-heading,
  .agent-advice-result-head {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-advice-heading .primary-button {
    width: 100%;
  }

  .agent-advice-field-grid,
  .agent-advice-layout {
    grid-template-columns: 1fr;
  }
}

/* Zerendo input alignment and required platform selection */
#zerendo .zr-platform-required {
  min-width: 0;
  margin-top: 24px;
  padding: 14px 18px 18px;
  border: 1px solid var(--zr-border);
  border-radius: 18px;
  background: var(--zr-soft);
}

#zerendo .zr-platform-required legend {
  padding: 0 8px;
}

#zerendo .zr-required-mark {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eee7fb;
  color: var(--zr-primary);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

#zerendo .zr-platform-required .zr-platform-options {
  margin-top: 8px;
}

#zerendo .zr-platform-required .zr-platform-option {
  min-height: 92px;
  align-items: center;
  padding: 17px 42px 17px 17px;
}

#zerendo .zr-platform-required .zr-platform-option strong {
  color: var(--zr-ink);
  font-size: 15px;
  letter-spacing: -0.01em;
}

#zerendo .zr-platform-required .zr-platform-option small {
  overflow: hidden;
  text-overflow: ellipsis;
}

#zerendo .zr-advanced summary {
  outline: none;
}

#zerendo .zr-advanced summary:focus-visible {
  border-radius: 18px;
  box-shadow: 0 0 0 3px rgba(91, 50, 184, 0.14);
}

#zerendo .zr-advanced-grid {
  align-items: stretch;
}

#zerendo .zr-advanced .zr-field,
#zerendo .zr-advanced .zr-check-row {
  min-height: 116px;
  padding: 16px;
  border: 1px solid #e4ddec;
  border-radius: 14px;
  background: #fff;
}

#zerendo .zr-advanced .zr-check-row {
  align-items: center;
}

#zerendo .zr-run-confirm {
  justify-content: flex-end;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Library Match header: keep Zerendo and his speech card inside the right column. */
/* 已删：#similarity .section-heading —— 页头统一后这一处改用 .page-head，
   这条选择器再也匹配不到任何元素。 */


#similarity .section-heading > .similarity-heading-copy {
  max-width: 540px;
}

#similarity .section-heading > .similarity-heading-assistant {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 112px;
  padding-top: 0;
}

#similarity .similarity-guide {
  position: relative;
  display: block;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 16px 144px 16px 22px;
  overflow: visible;
  border-color: rgba(143, 92, 255, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 32%, rgba(210, 228, 255, 0.5), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #faf7ff 60%, #f5efff 100%);
}

#similarity .similarity-guide::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-right: 1px solid rgba(143, 92, 255, 0.2);
  border-bottom: 1px solid rgba(143, 92, 255, 0.2);
  background: #fbf8ff;
  transform: rotate(45deg);
}

#similarity .similarity-guide img {
  left: auto;
  right: 6px;
  bottom: 0;
  width: 122px;
  height: 126px;
  object-fit: contain;
  object-position: center bottom;
}

#similarity .similarity-guide-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#similarity .similarity-guide .similarity-guide-kicker {
  color: #7c4ee4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#similarity .similarity-guide strong {
  color: #20283a;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.28;
}

#similarity .similarity-guide-copy > span:last-child {
  max-width: 360px;
  color: #6f7a8d;
  font-size: 12px;
  line-height: 1.55;
}

#similarity .similarity-empty-message {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 980px) {
  #similarity .section-heading {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 16px;
  }

  #similarity .similarity-heading-assistant {
    min-height: 126px;
  }
}

@media (max-width: 760px) {
  #zerendo .zr-platform-required {
    padding: 16px;
  }

  #zerendo .zr-advanced .zr-field,
  #zerendo .zr-advanced .zr-check-row {
    min-height: 0;
  }

  #similarity .similarity-guide {
    min-height: 112px;
    padding: 18px 118px 18px 18px;
    border-radius: 18px;
  }

  #similarity .similarity-guide img {
    right: 0;
    bottom: 0;
    width: 112px;
    height: 120px;
  }

  #similarity .similarity-guide strong {
    font-size: 18px;
  }

  #similarity .similarity-guide-copy > span:last-child {
    font-size: 12px;
  }
}

/* Shortlist hero: mirror the clean left/right hierarchy used by Library Match. */
#favorites .section-heading.favorites-heading {
  display: grid;
  grid-template-columns: minmax(360px, 0.84fr) minmax(480px, 1.16fr);
  min-height: 142px;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: 8px;
  padding-left: 16px;
}

#favorites .favorites-heading-copy {
  max-width: 540px;
}

#favorites .favorites-heading-assistant {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 112px;
}

#favorites .section-heading-actions {
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 18px;
}

#favorites .section-heading-actions .favorites-export-button,
#favorites .section-heading-actions .favorites-search-button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#favorites .section-heading-actions .favorites-export-button {
  border: 1px solid rgba(91, 50, 184, 0.48);
  background: rgba(255, 255, 255, 0.84);
  color: #5b32b8;
  box-shadow: 0 10px 24px rgba(91, 50, 184, 0.1);
}

#favorites .section-heading-actions .favorites-export-button:hover {
  border-color: #8f5cff;
  background: #f8f3ff;
  color: #4b249f;
  transform: translateY(-2px);
}

#favorites .section-heading-actions .favorites-search-button {
  border-color: transparent;
  background: linear-gradient(120deg, #6f3bd7 0%, #a946d7 54%, #e5489e 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(116, 56, 222, 0.24);
}

#favorites .section-heading-actions .favorites-search-button:hover {
  background: linear-gradient(120deg, #5b32b8 0%, #9b3dc9 54%, #d83c8f 100%);
  box-shadow: 0 18px 34px rgba(116, 56, 222, 0.3);
  transform: translateY(-2px);
}

#favorites .favorites-guide {
  position: relative;
  display: block;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 16px 144px 16px 22px;
  overflow: visible;
  border-color: rgba(143, 92, 255, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 32%, rgba(210, 228, 255, 0.5), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #faf7ff 60%, #f5efff 100%);
}

#favorites .favorites-guide::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-right: 1px solid rgba(143, 92, 255, 0.2);
  border-bottom: 1px solid rgba(143, 92, 255, 0.2);
  background: #fbf8ff;
  transform: rotate(45deg);
}

#favorites .favorites-guide img {
  left: auto;
  right: 6px;
  bottom: 0;
  width: 142px;
  height: 146px;
  object-fit: contain;
  object-position: center bottom;
}

#favorites .favorites-guide-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#favorites .favorites-guide .favorites-guide-kicker {
  color: #7c4ee4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#favorites .favorites-guide strong {
  color: #20283a;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.28;
}

#favorites .favorites-guide-copy > span:last-child {
  max-width: 360px;
  color: #6f7a8d;
  font-size: 12px;
  line-height: 1.55;
}

#favorites .favorites-controls {
  margin-top: 0;
  padding: 14px 16px;
}

@media (max-width: 760px) {
  #favorites .section-heading.favorites-heading {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 16px;
    padding: 16px 0 0;
  }

  #favorites .section-heading-actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 14px;
  }

  #favorites .section-heading-actions .favorites-export-button,
  #favorites .section-heading-actions .favorites-search-button {
    flex: 1 1 140px;
  }

  #favorites .favorites-guide {
    min-height: 112px;
    padding: 18px 118px 18px 18px;
    border-radius: 18px;
  }

  #favorites .favorites-guide img {
    right: 0;
    bottom: 0;
    width: 126px;
    height: 132px;
  }

  #favorites .favorites-guide strong {
    font-size: 18px;
  }

  #favorites .favorites-guide-copy > span:last-child {
    font-size: 12px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  #favorites .section-heading.favorites-heading {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 16px;
  }

  #favorites .favorites-heading-assistant {
    min-height: 126px;
  }
}

/* Campaign audit report */
.campaign-audit-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
}

.campaign-audit-dialog::backdrop {
  background: rgba(20, 10, 36, 0.72);
  backdrop-filter: blur(7px);
}

.campaign-audit-dialog-card {
  width: 100%;
  max-height: min(92vh, 980px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 50, 184, 0.16);
  border-radius: 28px;
  background: #f8f7fb;
  box-shadow: var(--elev-1);
}

.campaign-audit-dialog-heading {
  margin: 0;
  padding: 24px 28px 18px;
  border-bottom: 1px solid rgba(91, 50, 184, 0.12);
  background:
    radial-gradient(circle at 90% 20%, rgba(193, 74, 155, 0.12), transparent 34%),
    linear-gradient(135deg, #fff, #faf7ff);
}

.campaign-audit-dialog-heading h2 {
  margin-bottom: 0;
}

.campaign-audit-body {
  max-height: calc(min(92vh, 980px) - 96px);
  padding: 24px 28px 34px;
  overflow: auto;
}

.campaign-audit-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(91, 50, 184, 0.1);
}

.campaign-audit-card-actions .primary-button {
  margin-left: auto;
  min-height: 40px;
  padding: 9px 16px;
}

.campaign-audit-card-actions .primary-button:disabled,
#settlementAuditBtn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.2);
}

#calendar .campaign-audit-card-actions .text-button {
  color: var(--cal-accent);
}

#calendar .campaign-audit-card-actions .text-button:disabled {
  color: var(--cal-disabled-ink);
}

.campaign-audit-readiness,
.campaign-audit-grade,
.campaign-audit-cache-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.campaign-audit-readiness.grade-a,
.campaign-audit-grade.grade-a {
  color: #18734f;
  background: #e7f8f0;
  border: 1px solid #bcebd6;
}

.campaign-audit-readiness.grade-b,
.campaign-audit-grade.grade-b {
  color: #8b6500;
  background: #fff5d7;
  border: 1px solid #f2d98b;
}

.campaign-audit-readiness.grade-c,
.campaign-audit-grade.grade-c {
  color: #687184;
  background: #eef0f5;
  border: 1px solid #d9dde7;
}

.campaign-audit-cache-badge {
  color: #6e45c7;
  background: #f1eaff;
}

.campaign-audit-progress {
  display: grid;
  gap: 24px;
  min-height: 420px;
  align-content: center;
  padding: 36px;
  border: 1px solid rgba(91, 50, 184, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, rgba(197, 230, 255, 0.55), transparent 28%),
    linear-gradient(135deg, #fff, #faf5ff);
}

.campaign-audit-progress-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.campaign-audit-progress-head img {
  width: 88px;
  height: 100px;
  object-fit: contain;
}

.campaign-audit-progress-head div {
  display: grid;
  gap: 4px;
}

.campaign-audit-progress-head span {
  color: #7d51de;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campaign-audit-progress-head strong {
  color: #20283a;
  font-size: 22px;
}

.campaign-audit-step-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.campaign-audit-step-track div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid #e1dce9;
  border-radius: 14px;
  color: #8b91a0;
  background: rgba(255, 255, 255, 0.74);
}

.campaign-audit-step-track span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ece8f2;
  font-size: 12px;
}

.campaign-audit-step-track .is-active,
.campaign-audit-step-track .is-complete {
  color: #4f2fa1;
  border-color: rgba(124, 78, 228, 0.35);
  background: #f6f0ff;
}

.campaign-audit-step-track .is-active span,
.campaign-audit-step-track .is-complete span {
  color: #fff;
  background: linear-gradient(135deg, #5b32b8, #c14a9b);
}

.campaign-audit-progress-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e3ef;
}

.campaign-audit-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5b32b8, #c14a9b);
}

.campaign-audit-progress > .ghost-button {
  justify-self: end;
}

.campaign-audit-report {
  display: grid;
  gap: 16px;
}

.campaign-audit-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #392066, #6e2a76 58%, #9d356f);
}

.campaign-audit-report-head h3 {
  margin: 2px 0 7px;
  font-size: clamp(24px, 3vw, 36px);
}

.campaign-audit-report-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.campaign-audit-report-head .eyebrow {
  color: #e9ddff;
}

.campaign-audit-report-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campaign-audit-section {
  padding: 24px;
  border: 1px solid rgba(91, 50, 184, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(46, 27, 72, 0.05);
}

.campaign-audit-section-heading,
.campaign-audit-detail > summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.campaign-audit-section-heading {
  margin-bottom: 18px;
}

.campaign-audit-section-heading span,
.campaign-audit-detail > summary span {
  color: #8b5ae6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.campaign-audit-section-heading h3 {
  margin: 0;
  color: #20283a;
  font-size: 18px;
}

.campaign-audit-summary-section blockquote {
  margin: 0 0 20px;
  padding: 18px 20px;
  border-left: 4px solid #7c4ee4;
  border-radius: 0 14px 14px 0;
  color: #20283a;
  background: #f8f4ff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
}

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

.campaign-audit-statement-group {
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7f8fb;
}

.campaign-audit-statement-group strong {
  display: block;
  margin-bottom: 7px;
  color: #3d4658;
  font-size: 12px;
}

.campaign-audit-statement-group ul,
.campaign-audit-snapshot ul {
  margin: 0;
  padding-left: 18px;
}

.campaign-audit-statement-group li,
.campaign-audit-snapshot li {
  margin: 5px 0;
  color: #5e687a;
}

.campaign-audit-statement-group.is-observation { background: #edf8f3; }
.campaign-audit-statement-group.is-inference { background: #f0f4ff; }
.campaign-audit-statement-group.is-hypothesis { background: #fff7e6; }
.campaign-audit-statement-group.is-pending { background: #f6f0ff; }

.campaign-audit-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.campaign-audit-number-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e8e2ef;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #faf8fd);
}

.campaign-audit-number-grid span {
  color: #737c8e;
  font-size: 12px;
}

.campaign-audit-number-grid strong {
  color: #20283a;
  font-size: 22px;
}

.campaign-audit-number-grid.compact {
  max-width: 500px;
  margin: 14px 0;
}

.campaign-audit-basis,
.campaign-audit-disclaimer {
  margin: 14px 0 0;
  color: #7c8493;
  font-size: 12px;
}

.campaign-audit-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #e8e3ee;
  border-radius: 14px;
}

.campaign-audit-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.campaign-audit-table-wrap th,
.campaign-audit-table-wrap td {
  padding: 11px 12px;
  border-bottom: 1px solid #eeeaf2;
  color: #4f5869;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}

.campaign-audit-table-wrap th {
  color: #656e80;
  background: #f7f5fa;
  font-weight: 600;
}

.campaign-audit-table-wrap td strong,
.campaign-audit-table-wrap td small {
  display: block;
}

.campaign-audit-table-wrap a {
  color: #7244cc;
  font-weight: 600;
}

.campaign-audit-priority {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  padding: 4px 7px;
  border-radius: 999px;
  font-weight: 700;
}

.campaign-audit-priority.p0 { color: #9b2843; background: #ffe8ed; }
.campaign-audit-priority.p1 { color: #704400; background: #fff0c7; }
.campaign-audit-priority.p2 { color: #4e607c; background: #edf1f7; }

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

.campaign-audit-claims-grid > article {
  padding: 16px;
  border-radius: 14px;
}

.campaign-audit-claims-grid .is-highlight { background: #edf9f4; }
.campaign-audit-claims-grid .is-problem { background: #fff4eb; }
.campaign-audit-claims-grid h4 { margin: 0 0 12px; }
.campaign-audit-claims-grid article > div { padding: 12px 0; border-top: 1px solid rgba(50, 54, 68, 0.08); }
.campaign-audit-claims-grid p { margin: 6px 0 0; color: #616a7a; font-size: 13px; }
.campaign-audit-claims-grid p b { margin-right: 7px; color: #343c4d; }

.campaign-audit-detail {
  padding: 0;
  overflow: hidden;
}

.campaign-audit-detail > summary {
  padding: 19px 22px;
  cursor: pointer;
  list-style: none;
}

.campaign-audit-detail > summary::-webkit-details-marker {
  display: none;
}

.campaign-audit-detail > summary::after {
  content: "＋";
  margin-left: auto;
  color: #8154d8;
  font-size: 18px;
}

.campaign-audit-detail[open] > summary::after {
  content: "−";
}

.campaign-audit-detail-body {
  padding: 0 22px 24px;
  border-top: 1px solid #eee9f2;
}

.campaign-audit-lead {
  color: #2e3748;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.campaign-audit-data-note,
.campaign-audit-unlock {
  padding: 11px 13px;
  border: 1px solid #f0d383;
  border-radius: 14px;
  color: #785300;
  background: #fff8df;
  font-size: 12px;
}

.campaign-audit-fact-grid,
.campaign-audit-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.campaign-audit-fact-grid span,
.campaign-audit-readiness-grid article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: #f6f5f9;
}

.campaign-audit-fact-grid b,
.campaign-audit-readiness-grid span {
  color: #7a8291;
  font-size: 12px;
}

.campaign-audit-readiness-grid p {
  margin: 0;
  color: #737c8c;
  font-size: 12px;
}

.campaign-audit-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.campaign-audit-funnel span {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 15px 8px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f1eaff, #faf8ff);
}

.campaign-audit-funnel b { color: #5d36b2; font-size: 22px; }
.campaign-audit-funnel em { color: #747d8d; font-size: 12px; font-style: normal; }

.campaign-audit-blockers,
.campaign-audit-compliance-list,
.campaign-audit-recommendations {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.campaign-audit-blockers article,
.campaign-audit-compliance-list article,
.campaign-audit-recommendations article {
  padding: 14px 16px;
  border: 1px solid #e6e1eb;
  border-radius: 14px;
  background: #faf9fc;
}

.campaign-audit-blockers span,
.campaign-audit-compliance-list span {
  margin-left: 8px;
  color: #7d54d1;
  font-size: 12px;
  font-weight: 600;
}

.campaign-audit-blockers p,
.campaign-audit-compliance-list p {
  margin: 6px 0;
  color: #606979;
}

.campaign-audit-compliance-list article.is-pass { border-left: 4px solid #38a579; }
.campaign-audit-compliance-list article.is-fail { border-left: 4px solid #d65c58; }
.campaign-audit-compliance-list article.is-unknown { border-left: 4px solid #9aa1ad; }

.campaign-audit-recommendations article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
}

.campaign-audit-recommendations article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5b32b8, #c14a9b);
  font-weight: 700;
}

.campaign-audit-recommendations p {
  margin: 5px 0;
  color: #626b7b;
}

.campaign-audit-recommendations aside {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #f4f1f8;
}

.campaign-audit-grade-definitions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.campaign-audit-grade-definitions p {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: #f5f3f8;
  color: #626b7b;
  font-size: 12px;
}

.campaign-audit-grade-definitions b {
  margin-right: 6px;
  color: #6740bd;
  font-size: 18px;
}

.campaign-audit-snapshot,
.campaign-audit-error {
  padding: 24px;
  border: 1px solid rgba(91, 50, 184, 0.14);
  border-radius: 18px;
  background: #fff;
}

.campaign-audit-snapshot .campaign-audit-report-head {
  margin: -24px -24px 22px;
  border-radius: 22px 22px 0 0;
}

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

.campaign-audit-snapshot-grid article {
  padding: 16px;
  border-radius: 14px;
  background: #f7f5fa;
}

.campaign-audit-snapshot-grid h4 {
  margin: 0 0 12px;
}

.campaign-audit-snapshot-grid li span {
  display: block;
  margin-top: 3px;
  color: #7b8392;
  font-size: 12px;
}

.campaign-market-brief {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #e7e1ed;
  border-radius: 14px;
  background: #fff;
}

.campaign-market-brief-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.campaign-market-brief-head h4,
.campaign-market-brief-head p { margin: 0; }
.campaign-market-brief-head h4 { margin-top: 3px; }
.campaign-market-brief-head p:not(.eyebrow) { margin-top: 5px; color: #747d8d; font-size: 12px; }

.campaign-market-status {
  flex: none;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0edf4;
  color: #665d72;
  font-size: 11px;
  font-weight: 700;
}

.campaign-market-status.is-ready { background: #e6f4ed; color: #247451; }

.campaign-market-scope {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid #ece8f0;
  border-radius: 12px;
  background: #ece8f0;
}

.campaign-market-scope > div {
  min-width: 0;
  padding: 10px 11px;
  background: #faf9fb;
}

.campaign-market-scope > .is-wide { grid-column: 1 / -1; }
.campaign-market-scope dt { color: #8a8294; font-size: 10.5px; }
.campaign-market-scope dd { margin: 4px 0 0; color: #30293b; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }

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

.campaign-market-modules article,
.campaign-market-questions {
  padding: 11px 12px;
  border: 1px solid #ece8f0;
  border-radius: 11px;
  background: #fff;
}

.campaign-market-modules strong,
.campaign-market-questions strong { font-size: 12px; }
.campaign-market-modules p { margin: 4px 0 0; color: #747d8d; font-size: 11.5px; line-height: 1.45; }
.campaign-market-questions { margin-top: 12px; }
.campaign-market-questions ul { margin: 8px 0 0; padding-left: 18px; color: #5f6877; font-size: 11.5px; }

.campaign-market-evidence {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid #efecf2;
  color: #8a8294;
  font-size: 11px;
  line-height: 1.45;
}

.campaign-audit-error {
  display: grid;
  gap: 8px;
  color: #80304d;
  background: #fff6f8;
}

.campaign-audit-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

@media (max-width: 820px) {
  .campaign-audit-body {
    padding: 16px;
  }

  .campaign-audit-dialog-heading,
  .campaign-audit-section,
  .campaign-audit-progress {
    padding: 16px;
  }

  .campaign-audit-report-head,
  .campaign-audit-statement-grid,
  .campaign-audit-claims-grid,
  .campaign-audit-snapshot-grid,
  .campaign-audit-grade-definitions {
    grid-template-columns: 1fr;
  }

  .campaign-market-brief-head { display: grid; }
  .campaign-market-scope,
  .campaign-market-modules { grid-template-columns: 1fr; }
  .campaign-market-scope > .is-wide { grid-column: auto; }

  .campaign-audit-report-head {
    display: grid;
  }

  .campaign-audit-step-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-audit-funnel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .campaign-audit-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-audit-card-actions .primary-button {
    margin-left: 0;
  }
}

/* Campaign audit client PDF export */
.campaign-audit-export-dialog {
  width: min(600px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
}

.campaign-audit-export-dialog::backdrop {
  background: rgba(20, 10, 36, 0.68);
  backdrop-filter: blur(6px);
}

.campaign-audit-export-card {
  width: 100%;
  padding: 28px;
  border: 1px solid rgba(91, 50, 184, 0.18);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(37, 18, 68, 0.28);
}

.campaign-audit-export-card .section-heading {
  margin-bottom: 10px;
}

.campaign-audit-fee-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  margin: 22px 0;
  padding: 16px;
  border: 1px solid rgba(91, 50, 184, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(91, 50, 184, 0.05), rgba(193, 74, 155, 0.05));
}

.campaign-audit-fee-option input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: #6b3bc0;
}

.campaign-audit-fee-option span,
.campaign-audit-fee-option strong,
.campaign-audit-fee-option small {
  display: block;
}

.campaign-audit-fee-option strong {
  color: #221832;
}

.campaign-audit-fee-option small {
  margin-top: 5px;
  color: #746b80;
  line-height: 1.55;
}

.campaign-audit-print-frame {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Inner-beta search usage and provider health. */
.search-usage-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #e4d9f8;
  border-radius: 14px;
  color: #493466;
  background: #faf7ff;
  font-size: 13px;
  font-weight: 700;
}

.search-usage-banner[hidden],
.admin-usage-card[hidden] {
  display: none !important;
}

.search-usage-banner::before {
  content: "i";
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5b32b8, #c14a9b);
  font: 800 12px/1 system-ui, sans-serif;
}

.search-usage-banner.is-warning {
  border-color: #efc46e;
  color: #774c00;
  background: #fff7e2;
}

.search-usage-banner.is-warning::before {
  content: "!";
  background: #d58a0b;
}

.search-usage-banner.is-exhausted {
  border-color: #e6b2b9;
  color: #8c2838;
  background: #fff1f3;
}

.admin-usage-card {
  display: grid;
  grid-template-columns: minmax(200px, .45fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 16px;
}

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

.admin-usage-stat {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f6f4fb;   /* 内层卡：下沉面。写死不用 --surface-soft——
     那个 token 只在 day 主题里定义，夜间未定义会回落成近乎透明的值，
     压在硬编码的白卡上文字掉到 2.6:1（实测）。这几页本就整页钉浅色。 */
}

.admin-usage-stat span,
.admin-usage-stat small {
  display: block;
  color: #7a7185;
  font-size: 12px;
}

.admin-usage-stat strong {
  display: block;
  margin: 4px 0 2px;
  color: #2c1f3b;
  font-size: 18px;
}

.admin-usage-stat.is-warning {
  border-color: #efc46e;
  background: #fff7e2;
}

.zr-usage-hint {
  margin: 0;
  color: #675c77;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .admin-usage-card,
  .admin-usage-summary {
    grid-template-columns: 1fr;
  }
}

/* Creator list readability and alignment repair.
   Keep every existing action, but give controls a stable visual rhythm. */
#creators .creator-list-panel {
  max-width: 1480px;
}

#creators .list-header {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(540px, 680px);
  gap: 24px;
  align-items: start;
}

#creators .list-header > div:first-child > p:not(.eyebrow) {
  color: #667085;
}

#creators .list-action-btn {
  min-height: 42px;
  height: auto;
  padding: 8px 14px;
}

#creators #refreshBatchBtn small {
  display: inline;
}

#creators .project-pill {
  border-color: #dfe3eb;
  background: #fff;
  color: #4b5668;
}

#creators .project-pill:hover {
  border-color: #8f5cff;
  background: #faf7ff;
  color: #5b32b8;
}

#creators .project-pill.active {
  border-color: transparent;
  color: #fff;
}

#creators .filter-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

#creators .filter-summary > div:first-child {
  min-width: 0;
}

#creators .filter-summary .list-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) max-content;
  gap: 8px;
  width: 100%;
}

#creators .filter-summary .list-filters select {
  width: 100%;
  min-width: 0;
  max-width: none;
}

#creators .creator-list-card .creator-metric-grid strong {
  overflow: visible;
  font-size: clamp(16px, 1.2vw, 22px);
  letter-spacing: -0.02em;
  text-overflow: clip;
}

#creators .creator-list-card .metric-value-with-trend {
  width: 100%;
}

#creators .creator-card-footer {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(540px, auto);
  align-items: center;
}

#creators .creator-list-card .creator-row-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 1fr));
  gap: 8px;
  width: 100%;
}

#creators .creator-list-card .row-action,
#creators .creator-list-card .favorite-button {
  justify-content: center;
  width: 100%;
  min-width: 0;
}

/* 「去私信」等链接型操作按钮：与 button 版 .row-action 完全同观感 */
#creators a.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

#creators .creator-more-menu .row-action.danger {
  border-color: #f0c4ce;
  background: #fff5f7;
  color: #bd3555;
}

#creators .creator-more-menu .row-action.danger:hover {
  border-color: #d9647c;
  background: #ffeaef;
}

@media (max-width: 1180px) {
  #creators .list-header {
    grid-template-columns: minmax(0, 1fr);
  }

  #creators .filter-summary .list-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #creators .filter-reset-link {
    justify-content: center;
    min-height: 36px;
  }

  #creators .creator-card-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  #creators .creator-list-card .creator-row-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #creators .filter-summary .list-filters,
  #creators .creator-list-card .creator-row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Creator list: clear EasyKOL-inspired data rows ─── */
#creators .creator-list-panel {
  padding: 20px;
}

#creators .list-header {
  grid-template-columns: minmax(280px, .72fr) minmax(650px, 1.28fr);
  gap: 20px;
  margin-bottom: 10px;
}

#creators .list-header h2 {
  font-size: 34px;
}

#creators .list-header p:last-child {
  margin-top: 5px;
  font-size: 13px;
}

#creators .list-action-btn {
  min-height: 38px;
  padding: 6px 10px;
  font-size: 12px;
}

#creators #refreshBatchBtn small {
  display: none;
}

#creators .creator-stat-grid {
  display: none;
}

#creators .reputation-filter-bar {
  margin-bottom: 8px;
}

#creators .project-pill-bar {
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 14px;
}

#creators .project-pill {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

#creators .filter-summary {
  grid-template-columns: minmax(210px, .72fr) minmax(0, 2.28fr);
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
}

#creators .filter-summary strong {
  font-size: 15px;
}

#creators .filter-summary span {
  margin-top: 2px;
  font-size: 12px;
}

#creators .filter-summary .list-filters {
  grid-template-columns: repeat(5, minmax(0, 1fr)) max-content;
  gap: 8px;
}

#creators .filter-summary .list-filters select {
  min-height: 34px;
  font-size: 12px;
}

#creators .creator-database-wrap {
  overflow: visible;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  background: #fff;
}

#creators .creator-list-columns,
#creators .creator-row-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) minmax(260px, 1.65fr) minmax(170px, .82fr) minmax(190px, 1fr) minmax(150px, .72fr);
  gap: 16px;
  align-items: center;
}

#creators .creator-list-columns {
  min-height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid #e9ecf2;
  background: #f8f9fb;
  color: #71798a;
  font-size: 12px;
  font-weight: 600;
}

#creators .creator-card-grid {
  display: block;
  padding: 0;
}

#creators .creator-list-card {
  position: relative;
  display: block;
  min-height: 118px;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid #eceef3;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transition: background-color 150ms ease;
}

#creators .creator-list-card:last-child {
  border-bottom: 0;
  border-radius: 0 0 16px 16px;
}

#creators .creator-list-card:hover {
  border-color: #eceef3;
  background: #f8fbff;
  box-shadow: none;
  transform: none;
}

#creators .creator-identity {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  align-items: center;
}

#creators .creator-identity .avatar {
  width: 56px;
  height: 56px;
  border: 1px solid #e6e9ef;
  border-radius: 50%;
  box-shadow: none;
}

#creators .creator-list-card .creator-profile-copy strong,
#creators .creator-list-card .creator-profile-copy .creator-link {
  font-size: 15px;
  font-weight: 600;
}

#creators .creator-list-card .creator-profile-copy > span {
  margin: 3px 0 5px;
  color: #6f7787;
  font-size: 12px;
}

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

#creators .creator-list-card .creator-meta-row .chip {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
}

#creators .creator-list-card .creator-meta-row small {
  overflow: hidden;
  color: #818897;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-row-content {
  min-width: 0;
}

#creators .creator-row-content .creator-content-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  margin: 0;
}

#creators .creator-row-content .creator-content-thumb {
  aspect-ratio: 1.46 / 1;
  min-height: 60px;
  border: 1px solid #e2e6ed;
  border-radius: 10px;
  background: #f3f5f8;
}

#creators .creator-row-content .creator-content-thumb span {
  display: none;
}

#creators .creator-row-content .creator-content-strip:not(:has(.creator-content-thumb:not(.is-empty)))::after {
  content: "暂无内容数据";
  display: grid;
  min-height: 62px;
  grid-column: 1 / -1;
  place-items: center;
  border: 1px dashed #d9dee8;
  border-radius: 10px;
  background: #fafbfc;
  color: #8a92a1;
  font-size: 12px;
  font-weight: 600;
}

#creators .creator-row-content .creator-content-placeholder {
  min-height: 62px;
  margin: 0;
  border-color: #d9dee8;
  background: #fafbfc;
  color: #8a92a1;
  font-weight: 600;
}

#creators .creator-row-stats {
  display: grid;
  min-width: 0;
  gap: 8px;
}

#creators .creator-list-card .creator-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#creators .creator-list-card .creator-metric-grid > span {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#creators .creator-list-card .creator-metric-grid strong {
  overflow: visible;
  color: #182033;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-overflow: clip;
}

#creators .creator-list-card .creator-metric-grid small {
  margin: 0;
  color: #8a92a1;
  font-size: 11px;
  font-weight: 600;
}

#creators .creator-row-stats > p {
  margin: 0;
  overflow: hidden;
  color: #606a7a;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-row-side {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#creators .creator-row-side strong,
#creators .creator-row-side span,
#creators .creator-row-side small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-email-value {
  color: #7d8594;
  font-size: 12px;
  font-weight: 600;
}

#creators .creator-email-value.is-ready {
  color: #167a57;
}

#creators .creator-row-side > span {
  color: #30394b;
  font-size: 12px;
  font-weight: 600;
}

#creators .creator-row-side > small {
  color: #8a92a1;
  font-size: 12px;
}

#creators .creator-list-card .creator-row-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(58px, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}

#creators .creator-list-card .row-action,
#creators .creator-list-card .favorite-button,
#creators .creator-more-menu summary {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  background: #fff;
  color: #394254;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#creators .creator-list-card .row-action.primary {
  border-color: #dcd4f4;
  background: #f3efff;
  color: #5b32b8;
}

#creators .creator-more-menu {
  position: relative;
  grid-column: 1 / -1;
}

#creators .creator-more-menu summary {
  width: 100%;
  cursor: pointer;
  list-style: none;
}

#creators .creator-more-menu summary::-webkit-details-marker {
  display: none;
}

#creators .creator-more-menu > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 150px;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--elev-1);
}

#creators .creator-more-menu:not([open]) > div {
  display: none;
}

#creators .creator-more-menu .row-action,
#creators .creator-more-menu .favorite-button {
  width: 100%;
}

@media (max-width: 1180px) {
  #creators .list-header,
  #creators .filter-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  #creators .filter-summary .list-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #creators .creator-list-columns,
  #creators .creator-row-main {
    grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1.25fr) minmax(160px, .8fr) minmax(170px, .9fr);
  }

  #creators .creator-list-columns span:last-child {
    display: none;
  }

  #creators .creator-list-card .creator-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #creators .creator-more-menu {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  #creators .creator-list-columns {
    display: none;
  }

  #creators .creator-list-card {
    padding: 16px;
  }

  #creators .creator-row-main {
    grid-template-columns: minmax(0, 1fr) minmax(140px, .65fr);
    gap: 16px;
  }

  #creators .creator-identity,
  #creators .creator-row-content {
    grid-column: 1 / -1;
  }

  #creators .creator-list-card .creator-row-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  #creators .creator-row-main {
    grid-template-columns: minmax(0, 1fr);
  }

  #creators .creator-row-stats,
  #creators .creator-row-side,
  #creators .creator-list-card .creator-row-actions {
    grid-column: 1;
  }
}

/* Creator list: reference-style identity card + content rail */
#creators .creator-list-panel,
#creators .creator-database-wrap,
#creators .creator-card-grid,
#creators .creator-list-card,
#creators .creator-row-main,
#creators .creator-showcase,
#creators .creator-row-content,
#creators .creator-row-actions {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#creators .creator-list-panel {
  overflow-x: clip;
}

#creators .creator-database-wrap {
  overflow: clip;
  border: 1px solid #e6e9ef;
  border-radius: 18px;
  background: #fff;
}

#creators .creator-card-grid {
  display: block;
  width: 100%;
  padding: 0;
}

#creators .creator-list-card {
  display: block;
  width: 100%;
  min-height: 174px;
  padding: 20px;
  border: 0;
  border-bottom: 1px solid #e1e6ee;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

#creators .creator-list-card:last-child {
  border-bottom: 0;
}

#creators .creator-list-card:hover {
  border-color: #e1e6ee;
  background: #fafbfe;
  box-shadow: none;
  transform: none;
}

#creators .creator-row-main {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) 96px;
  gap: 16px;
  align-items: stretch;
}

#creators .creator-identity-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e1e6ee;
  border-radius: 18px;
  background: #f4f5f8;
}

#creators .creator-identity-card .avatar {
  width: 72px;
  height: 72px;
  border: 1px solid #e1e6ee;
  border-radius: 50%;
  box-shadow: none;
}

#creators .creator-identity-card .creator-profile-copy,
#creators .creator-identity-card .creator-name-line {
  min-width: 0;
}

#creators .creator-identity-card .creator-name-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-identity-card .creator-profile-copy strong,
#creators .creator-identity-card .creator-profile-copy .creator-link {
  display: block;
  overflow: hidden;
  color: #1d2639;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-identity-card .creator-profile-copy > span {
  display: block;
  overflow: hidden;
  margin: 5px 0 10px;
  color: #768094;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-identity-card .creator-meta-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#creators .creator-identity-card .creator-meta-row .chip,
#creators .creator-identity-card .creator-meta-row small {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #596377;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#creators .creator-showcase {
  display: grid;
  align-content: center;
  gap: 8px;
}

#creators .creator-row-content .creator-content-strip {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

#creators .creator-row-content .creator-content-thumb {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: .78 / 1;
  overflow: hidden;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #f1f3f7;
}

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

#creators .creator-row-content .creator-content-thumb span {
  display: none;
}

#creators .creator-row-content .creator-content-placeholder {
  display: grid;
  width: 100%;
  min-height: 112px;
  margin: 0;
  place-items: center;
  border: 1px dashed #d9dee8;
  border-radius: 14px;
  background: #f8f9fb;
  color: #818a9b;
  font-size: 12px;
  font-weight: 600;
}

#creators .creator-data-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0;
  overflow: hidden;
  color: #737d90;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#creators .creator-data-line > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#creators .creator-data-line > span + span::before {
  content: "\00b7";
  margin: 0 8px;
  color: #b0b6c2;
}

#creators .creator-data-line strong {
  color: #4c566b;
  font-weight: 600;
}

#creators .creator-data-line .creator-email-value {
  flex: 1 1 130px;
  color: #818a9b;
}

#creators .creator-data-line .creator-email-value.is-ready {
  color: #147a56;
}

#creators .creator-list-card .creator-row-actions {
  position: relative;
  display: grid;
  width: 96px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(34px, 1fr));
  gap: 8px;
  align-self: stretch;
}

#creators .creator-list-card .row-action,
#creators .creator-list-card .favorite-button,
#creators .creator-more-menu summary {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  background: #fff;
  color: #394254;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#creators .creator-list-card .row-action.primary {
  border-color: #ded5f5;
  background: #f3efff;
  color: #5b32b8;
}

#creators .creator-more-menu {
  position: relative;
  grid-column: 1;
  min-width: 0;
}

#creators .creator-more-menu summary {
  cursor: pointer;
  list-style: none;
}

#creators .creator-more-menu summary::-webkit-details-marker {
  display: none;
}

#creators .creator-more-menu > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 150px;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--elev-1);
}

#creators .creator-more-menu:not([open]) > div {
  display: none;
}

@media (max-width: 1180px) {
  #creators .creator-row-main {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  }

  #creators .creator-list-card .creator-row-actions {
    width: 100%;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(36px, auto);
  }

  #creators .creator-more-menu {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  #creators .creator-list-panel {
    padding: 16px;
  }

  #creators .creator-list-card {
    padding: 16px;
  }

  #creators .creator-row-main {
    grid-template-columns: minmax(0, 1fr);
  }

  #creators .creator-identity-card,
  #creators .creator-showcase,
  #creators .creator-list-card .creator-row-actions {
    grid-column: 1;
  }

  #creators .creator-row-content .creator-content-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Creator detail final cascade lock */
#creatorDialog .dialog-card {
  width: min(1080px, calc(100vw - 32px));
  max-width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 72px);
  padding: 0 22px;
  border: 1px solid #e2e5eb;
  border-radius: 18px;
  background: #ffffff;
  color: #20283a;
  box-shadow: var(--elev-1);
  overflow-x: hidden;
  overflow-y: auto;
}

#creatorDialog .section-heading:first-child {
  top: 0;
  margin: 0 -22px 12px;
  padding: 16px 74px 14px 22px;
  border-bottom: 1px solid #e7e9ee;
  background: #ffffff;
  backdrop-filter: none;
}

#creatorDialog .section-heading:first-child h2,
#creatorDialog .creator-ai-summary > strong,
#creatorDialog .creator-profile-section > .section-heading h2,
#creatorDialog .rating-section .section-heading h2,
#creatorDialog .creator-dialog-post-card strong,
#creatorDialog .trend-line-card strong,
#creatorDialog .trend-line-card span {
  color: #20283a;
}

#creatorDialog #closeDialogBtn,
#creatorDialog #closeDialogBtn:hover {
  top: 10px;
  width: 40px;
  height: 40px;
  margin-top: -2px;
  border: 1px solid #ddd8e8;
  border-radius: 14px;
  background: #f7f4fc;
  color: #53337e;
  box-shadow: none;
  transform: none;
}

#creatorDialog .creator-ai-summary {
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #ded5ef;
  border-radius: 14px;
  background: #f7f4fc;
  box-shadow: none;
}

#creatorDialog .creator-ai-heading span,
#creatorDialog .creator-ai-heading span small {
  width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Creator detail: analysis, metrics, review workflow */
#creatorDialog .creator-detail-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 12px;
}

#creatorDialog .creator-detail-overview .creator-dialog-section,
#creatorDialog .creator-detail-overview .creator-summary-section {
  margin: 0;
}

#creatorDialog .creator-detail-overview .creator-ai-summary {
  height: 100%;
}

#creatorDialog .creator-overall-rating-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #ded5ef;
  border-radius: 14px;
  background: #fff;
}

#creatorDialog .creator-overall-rating-card .eyebrow {
  margin: 0;
  color: #8b65c8;
}

#creatorDialog .creator-overall-rating-card h2 {
  margin: 0;
  color: #20283a;
  font-size: 18px;
}

#creatorDialog .creator-overall-rating-card #ratingPreview {
  display: flex;
  gap: 4px;
  align-items: center;
  width: fit-content;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: #68429d;
  font-size: 15px;
}

#creatorDialog .creator-overall-rating-card #ratingPreview span:last-child {
  margin-left: 6px;
  color: #20283a;
  font-weight: 700;
}

#creatorDialog #ratingOverviewMeta {
  margin: 0;
  color: #7a8494;
  font-size: 12px;
  line-height: 1.45;
}

#creatorDialog .creator-profile-section > .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#creatorDialog .creator-refresh-button {
  min-height: 34px;
  padding: 7px 11px;
  border-color: #d8caed;
  background: #f7f4fc;
  color: #68429d;
  font-size: 12px;
  white-space: nowrap;
}

#creatorDialog .creator-brand-field {
  grid-column: span 2;
}

#creatorDialog .dialog-card select[multiple],
#creatorDialog #creatorProjectsInput {
  min-height: 40px;
  max-height: 40px;
  padding: 4px 8px;
}

#creatorDialog .creator-metric-field small,
#creatorDialog .creator-predicted-fee small {
  color: #8a93a2;
  font-size: 11px;
  line-height: 1.35;
}

#creatorDialog .creator-predicted-fee output {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #ded5ef;
  border-radius: 10px;
  background: #f7f4fc;
  color: #573581;
  font-size: 13px;
  font-weight: 700;
}

#creatorDialog #creatorTrendSection {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
}

#creatorDialog #creatorTrendSection > .section-heading {
  margin: 0;
}

#creatorDialog #creatorTrendSection > .section-heading h2 {
  color: #20283a;
  font-size: 18px;
}

#creatorDialog .creator-trend-source {
  display: grid;
  justify-items: end;
  gap: 2px;
}

#creatorDialog .creator-trend-source strong {
  color: #4f596b;
  font-size: 12px;
}

#creatorDialog .creator-trend-source span {
  max-width: 410px;
  color: #8a93a2;
  font-size: 11px;
  text-align: right;
}

#creatorDialog .creator-trend-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#creatorDialog .creator-trend-kpis article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e7e9ee;
  border-radius: 10px;
  background: #fafbfc;
}

#creatorDialog .creator-trend-kpis span,
#creatorDialog .creator-trend-kpis small {
  overflow: hidden;
  color: #8a93a2;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creatorDialog .creator-trend-kpis strong {
  overflow: hidden;
  color: #20283a;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

#creatorDialog .trend-line-card {
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
}

#creatorDialog .trend-line-card svg {
  width: 100%;
  height: 54px;
  color: #8b65c8;
}

#creatorDialog .creator-metric-table {
  overflow: hidden;
  border: 1px solid #e7e9ee;
  border-radius: 10px;
}

#creatorDialog .creator-metric-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 0.8fr) 1fr;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border-top: 1px solid #edf0f3;
  color: #626c7d;
  font-size: 11px;
}

#creatorDialog .creator-metric-row:first-child {
  border-top: 0;
}

#creatorDialog .creator-metric-row strong {
  color: #30394b;
  font-size: 11px;
}

#creatorDialog .creator-metric-head {
  min-height: 30px;
  background: #fafbfc;
  color: #8a93a2;
  font-weight: 600;
}

#creatorDialog .creator-rating-priority {
  margin-top: 12px;
}

#creatorDialog .rating-readonly-note {
  color: #8a93a2;
  font-size: 11px;
}

#creatorDialog .creator-collaboration-review,
#creatorDialog .creator-rating-history-readonly {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
}

#creatorDialog .creator-collaboration-review > .section-heading {
  margin: 0;
}

#creatorDialog .creator-collaboration-review h2 {
  color: #20283a;
  font-size: 18px;
}

#creatorDialog .creator-collaboration-brand {
  display: grid;
  grid-column: auto;
  gap: 4px;
  color: #5f6878;
  font-size: 12px;
  font-weight: 700;
}

#creatorDialog .creator-collaboration-brand #creatorProjectsInput {
  width: 100%;
  min-height: 42px;
  max-height: 52px;
}

#creatorDialog .last-collaboration-summary {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px;
}

#creatorDialog .last-collaboration-summary > div {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid #e7e9ee;
  border-radius: 10px;
  background: #fafbfc;
}

#creatorDialog .last-collaboration-summary span,
#creatorDialog .last-collaboration-summary p {
  margin: 0;
  color: #7a8494;
  font-size: 11px;
  line-height: 1.45;
}

#creatorDialog .last-collaboration-summary strong {
  color: #30394b;
  font-size: 13px;
}

#creatorDialog .creator-rating-history-readonly .rating-history-head > div {
  display: grid;
  gap: 2px;
}

#creatorDialog .creator-rating-history-readonly .rating-history-head small {
  color: #8a93a2;
  font-size: 11px;
}

#creatorDialog .creator-rating-history-readonly .rating-history-list {
  max-height: 180px;
}

@media (max-width: 860px) {
  #creatorDialog .creator-detail-overview {
    grid-template-columns: 1fr;
  }

  #creatorDialog .creator-trend-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #creatorDialog .creator-trend-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  #creatorDialog .creator-form-grid,
  #creatorDialog .rating-grid,
  #creatorDialog .rating-entry-grid,
  #creatorDialog .last-collaboration-summary {
    grid-template-columns: 1fr;
  }

  #creatorDialog .creator-brand-field {
    grid-column: 1;
  }

  #creatorDialog .creator-metric-row {
    grid-template-columns: 1fr repeat(3, 0.7fr);
  }

  #creatorDialog .creator-metric-row > :last-child {
    display: none;
  }
}

#creatorDialog .creator-ai-heading span {
  color: #573581;
  font-size: 12px;
  letter-spacing: 0;
}

#creatorDialog .creator-ai-heading span small {
  color: #8b79a5;
  font-size: 11px;
}

#creatorDialog .creator-ai-summary > p {
  color: #667085;
  font-size: 12px;
}

#creatorDialog .creator-ai-summary .creator-ai-next {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ebe5f5;
  color: #6b4d91;
  font-size: 12px;
}

#creatorDialog #creatorProjectsInput {
  min-height: 48px;
  max-height: 58px;
  background: #fbfcfd;
  color: #20283a;
}

#creatorDialog .dialog-actions {
  bottom: 0;
  margin: 12px -22px 0;
  padding: 11px 22px 13px;
  border-top: 1px solid #e7e9ee;
  background: rgba(255, 255, 255, 0.98);
}

@media (max-width: 900px) {
  #creatorDialog .dialog-card {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    max-height: calc(100vh - 72px);
    padding: 0 14px;
  }

  #creatorDialog .section-heading:first-child {
    margin: 0 -14px 10px;
    padding: 14px 62px 12px 14px;
  }

  #creatorDialog .dialog-actions {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

/* Creator list header: calm two-column hierarchy with status in the right rail. */
#creators .list-header {
  grid-template-columns: minmax(390px, 0.78fr) minmax(0, 1.22fr);
  gap: 28px;
  align-items: stretch;
}

#creators .list-header-copy,
#creators .list-header-tools {
  min-width: 0;
}

#creators .list-header-copy .creator-list-description {
  max-width: none;
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}

#creators .list-header-tools {
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 12px;
  height: 100%;
  justify-items: stretch;
}

#creators .list-header-tools .auto-refresh-status {
  align-self: end;
  justify-self: end;
  max-width: 100%;
  margin: 0;
  white-space: nowrap;
}

/* 2026-08-05 visual cleanup: keep the operational screens aligned and legible. */
#discovery .live-search-panel .section-actions .text-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(91, 50, 184, 0.28);
  border-radius: 10px;
  background: #f7f2ff;
  color: #5b32b8;
  font-size: 13px;
  font-weight: 700;
  opacity: 1;
}

#discovery .live-search-panel .section-actions .text-button:hover {
  border-color: #8f5cff;
  background: #eee5ff;
  color: #43208f;
}

#favorites .favorite-section-title {
  justify-content: flex-start;
  gap: 8px;
  min-height: 42px;
  padding: 0 8px;
}

#favorites .favorite-section-title strong {
  font-size: 18px;
}

#favorites .favorite-section-title > span {
  display: inline-grid;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #9a4dff, #f0448f);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* 表头的「全选」比一个勾选框宽，所以第一列在这里放到 68px。
   其余沿用上面那条五列流体模板——两条规则同特异性，后者胜出，
   写死列宽会把上面的修复整个抵消掉。 */
#favorites .favorite-content-header,
#favorites .favorite-content-row {
  grid-template-columns: 68px minmax(230px, 1.4fr) minmax(200px, 1.6fr) minmax(190px, 1.3fr) 150px;
}

#favorites .favorite-select-all {
  justify-self: start;
  min-width: 64px;
  white-space: nowrap;
}

#favorites .favorite-select-all span {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

#creators .list-header-tools {
  grid-template-rows: max-content minmax(58px, 1fr);
  gap: 8px;
}

#creators .list-header-tools .auto-refresh-status {
  align-self: end;
  margin: 18px 0 8px;
  padding: 7px 12px;
}

#outreach #paneSettings .workspace-panel {
  padding: 24px 28px;
}

#outreach .sender-settings-toolbar {
  grid-template-columns: minmax(300px, 1fr) minmax(250px, 320px) auto;
  align-items: end;
  gap: 16px;
}

#outreach .sender-settings-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#outreach .email-cadence-summary {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #dcd2f2;
  border-radius: 14px;
  background: #f8f5ff;
  color: #5b32b8;
}

#outreach .email-cadence-summary strong {
  font-size: 13px;
  font-weight: 700;
}

#outreach .email-cadence-summary span {
  color: #6d7280;
  font-size: 12px;
  line-height: 1.45;
}

#outreach #openSenderSettingsDialogBtn {
  min-height: 44px;
  padding-inline: 20px;
  white-space: nowrap;
}

#pipeline .agent-advice-result[hidden] {
  display: none !important;
}

#contracts #paneStorage .workspace-panel {
  padding: 22px 24px;
}

#contracts #paneStorage .section-heading {
  align-items: center;
  margin-bottom: 8px;
}

#contracts .contract-storage-help {
  margin: 0 0 16px;
  font-size: 13px;
}

#contracts .contract-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

#contracts .contract-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.15fr) minmax(190px, 0.75fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: none;
}

#contracts .contract-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#contracts .contract-card-identity .avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  font-size: 15px;
}

#contracts .contract-card-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#contracts .contract-card-title .creator-link,
#contracts .contract-card-title > strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contracts .contract-card-title small {
  overflow: hidden;
  color: #8b94a3;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contracts .contract-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  min-width: 0;
  font-size: 12px;
}

#contracts .contract-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contracts .contract-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
}

#contracts .contract-file-row .contract-filename {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contracts .contract-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#contracts .contract-card-actions .ghost-button,
#contracts .contract-card-actions .contract-upload-btn,
#contracts .contract-card-actions .contract-file-link {
  min-height: 36px;
  margin: 0;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

#calendar .campaign-card-head-actions {
  padding-right: 38px;
}

#calendar .campaign-delete-button {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border-color: var(--cal-danger-line);
  border-radius: 50%;
  background: #fff;
  color: var(--cal-danger-ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

#calendar .campaign-calendar-panel,
#calendar .campaign-calendar-board {
  background: var(--cal-panel-soft);
}

#calendar .campaign-board-heading {
  border-bottom-color: var(--cal-panel-line);
  background:
    radial-gradient(circle at 16% 0, rgba(117, 68, 215, 0.12), transparent 34%),
    #f5f0f8;
}

#calendar .calendar-weekdays {
  background: #ece6f1;
}

#calendar .campaign-month-grid {
  background: #ddd6e5;
  gap: 1px;
}

#calendar .campaign-month-grid .calendar-day {
  border: 0;
  background: #faf7fb;
}

#calendar .campaign-month-grid .calendar-day:nth-child(even) {
  background: #f7f3f9;
}

#calendar .campaign-month-grid .calendar-day.muted {
  background: #f0ebf3;
  color: #9390a0;
}

#calendar .campaign-month-grid .calendar-day.today {
  background: var(--cal-accent-soft);
  box-shadow: inset 0 0 0 2px var(--cal-accent-today-line);
}

@media (max-width: 1180px) {
  #outreach .sender-settings-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  }

  #outreach #openSenderSettingsDialogBtn {
    grid-column: 2;
  }

  #contracts .contract-card {
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr) auto;
  }

  #contracts .contract-file-row {
    display: none;
  }
}

@media (max-width: 760px) {
  #favorites .favorite-content-header,
  #favorites .favorite-content-row {
    grid-template-columns: 60px minmax(180px, 1.3fr) minmax(150px, 1.2fr) minmax(160px, 1.2fr) 130px;
    gap: 10px;
  }

  #outreach .sender-settings-toolbar {
    grid-template-columns: 1fr;
  }

  #outreach #openSenderSettingsDialogBtn {
    grid-column: auto;
    width: 100%;
  }

  #contracts .contract-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #contracts .contract-file-row {
    display: flex;
  }

  #contracts .contract-card-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


@media (max-width: 1180px) {
  #creators .list-header {
    grid-template-columns: minmax(0, 1fr);
  }

  #creators .list-header-copy .creator-list-description {
    white-space: normal;
  }

  #creators .list-header-tools {
    grid-template-rows: auto;
  }
}

@media (max-width: 720px) {
  #creators .list-header-tools .auto-refresh-status {
    align-self: auto;
    justify-self: start;
    white-space: normal;
  }
}

/* Final lifecycle overrides live after the legacy screen-specific layers. */
#pipeline .pipeline-stage-chart {
  grid-template-columns: none;
  grid-auto-columns: minmax(116px, 1fr);
  grid-auto-flow: column;
  min-width: 0;
  overflow-x: auto;
  scrollbar-color: #b9a8df transparent;
}

#pipeline .pipeline-chart-stage { grid-template-rows: 24px 82px 22px; }
#pipeline .pipeline-chart-plot { min-height: 82px; }
#pipeline .pipeline-creator-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

#pipeline .pipeline-creator-identity {
  display: grid;
  align-items: stretch;
  gap: 8px;
  min-height: 148px;
  padding: 12px;
}

#pipeline .pipeline-creator-open {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #283143;
  text-align: left;
  cursor: pointer;
}

#pipeline .pipeline-creator-open span,
#pipeline .pipeline-creator-open strong,
#pipeline .pipeline-creator-open small { display: block; min-width: 0; }

#pipeline .pipeline-creator-open strong,
#pipeline .pipeline-creator-open small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipeline .pipeline-creator-open small { margin-top: 4px; color: #737d8e; font-size: 12px; }
#pipeline .pipeline-creator-identity > p { margin: 0; color: #4f596a; font-size: 12px; line-height: 1.45; }
#pipeline .pipeline-creator-identity > p span { display: block; color: #8a93a3; font-size: 11px; font-weight: 700; }

#pipeline .pipeline-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#pipeline .pipeline-card-footer > span {
  overflow: hidden;
  color: #6c7585;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipeline .pipeline-card-footer select {
  min-height: 34px;
  border: 1px solid #d8dce6;
  border-radius: 10px;
  background: #fff;
  color: #4b365f;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

#favorites .favorite-table-section { overflow-x: auto; scrollbar-color: #baa8dd transparent; }
#favorites .favorite-status-badge.needs-data { background: #fff0e3; color: #9a4c08; }
#favorites .favorite-select-control.needs-email input:disabled { cursor: not-allowed; opacity: 0.38; }

#outreach .sender-setup-callout { border-color: #e3c27d; background: #fffaf0; }
#outreach .sender-setup-callout strong { color: #6f4500; }
#outreach .sender-setup-callout p { color: #4f5968; }

#contracts .contract-card {
  grid-template-columns: minmax(180px, 0.8fr) minmax(200px, 1fr) minmax(220px, 1.1fr);
}

#contracts .contract-file-row { display: flex; flex-wrap: wrap; }
#contracts .contract-card-actions {
  grid-column: 2 / -1;
  flex-wrap: wrap;
  min-width: 0;
}
#contracts .contract-schedule-badge { flex-basis: 100%; color: #9a4c08; font-size: 11px; font-weight: 600; line-height: 1.35; }
#contracts .contract-schedule-badge.is-ready { color: #137454; }

.manual-confirmation-dialog-card { width: min(720px, calc(100vw - 32px)); }
.manual-confirmation-target { margin: 0 0 12px; color: #3b2c51; font-size: 15px; font-weight: 700; }
.manual-confirmation-warning {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #e3c27d;
  border-radius: 14px;
  background: #fffaf0;
  color: #4f5968;
  font-size: 12px;
  line-height: 1.5;
}
.manual-confirmation-warning strong { color: #6f4500; }

@media (max-width: 1180px) {
  #contracts .contract-card { grid-template-columns: minmax(190px, 0.8fr) minmax(220px, 1.2fr); }
  #contracts .contract-file-row { display: flex; }
  #contracts .contract-card-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 760px) {
  #pipeline .pipeline-creator-list,
  #contracts .contract-card { grid-template-columns: 1fr; }
  #contracts .contract-card-actions { grid-column: auto; justify-content: flex-start; }
}

/* ── Campaign v1 显示修复（放文件末尾：同权重下按源码顺序取胜） ────────── */

/* 收尾评分弹窗整体转浅色：行底是 #faf9fa，深色 dialog-card 会让文字全白不可见 */
#campaignCloseoutDialog .dialog-card {
  border: 1px solid #e3e0e8;
  background: #fff;
  color: #312a36;
}

#campaignCloseoutDialog .dialog-card h2 { color: #312a36; }
#campaignCloseoutDialog .dialog-card .eyebrow { color: #8a7fa8; }
#campaignCloseoutDialog .dialog-card .muted { color: #746f7c; }
#campaignCloseoutDialog label { color: #5a5462; }
#campaignCloseoutDialog .icon-button { color: #746f7c; }

#campaignCloseoutDialog .campaign-closeout-row strong { color: #312a36; }
#campaignCloseoutDialog .campaign-closeout-row small { color: #746f7c; }
#campaignCloseoutDialog .campaign-closeout-row b { color: #5b32b8; }

#campaignCloseoutDialog .text-button,
#campaignCloseoutDialog .ghost-button {
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
  opacity: 1;
}

#campaignCloseoutDialog .text-button:hover,
#campaignCloseoutDialog .ghost-button:hover {
  border-color: #b9a9dc;
  background: #f7f3ff;
  color: #4a2792;
}

/* Campaign 详情成员表：全局 .table-wrap 是深紫底，嵌在白面板里名字深字压深底不可见 */
.campaign-detail-panel .table-wrap {
  border: 1px solid #e3e0e8;
  background: #fff;
}

.campaign-detail-panel .table-wrap th {
  background: #f5f3f7;
  color: #6f6872;
}

.campaign-detail-panel .table-wrap td {
  border-color: #eceaf0;
  color: #4a4452;
}

.campaign-detail-panel .table-wrap td strong { color: #312a36; }
.campaign-detail-panel .table-wrap td small { color: #746f7c; }

.campaign-detail-panel .table-wrap .text-button,
.campaign-detail-panel .table-wrap .ghost-button {
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
  opacity: 1;
}

/* ── Campaign v1 polish：所有新增规则只追加在文件末尾 ─────────────── */

/* 空时间线不进入 16px 节点列，整行承载可读提示。 */
.campaign-timeline li.is-empty {
  display: block;
  padding: 6px 0;
  color: #746f7c;
  line-height: 1.5;
}

/* 白卡动作统一使用浅色按钮契约，避免被全局深色按钮覆盖。 */
.formal-campaign-card .text-button {
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
  opacity: 1;
}

.formal-campaign-card .text-button:hover {
  border-color: #b9a9dc;
  background: #f7f3ff;
  color: #4a2792;
}

.formal-campaign-card-meta {
  display: grid;
  grid-area: activity;
  gap: 2px;
  min-width: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 12px;
}

.formal-campaign-card-meta span { color: #8a828d; }
.formal-campaign-card-meta strong {
  overflow: hidden;
  color: #4a4452;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* “开下一轮”与删除确认都采用浅色弹窗，成员分数在两种行底上均可读。 */
#campaignNextRoundDialog .dialog-card,
#campaignDeleteConfirmDialog .dialog-card {
  border: 1px solid #e3e0e8;
  background: #fff;
  color: #312a36;
}

#campaignNextRoundDialog .dialog-card h2,
#campaignNextRoundDialog .dialog-card h3,
#campaignNextRoundDialog .dialog-card strong,
#campaignDeleteConfirmDialog .dialog-card h2,
#campaignDeleteConfirmDialog .dialog-card strong { color: #312a36; }

#campaignNextRoundDialog .eyebrow,
#campaignDeleteConfirmDialog .eyebrow { color: #8a7fa8; }
#campaignNextRoundDialog label,
#campaignDeleteConfirmDialog p { color: #5a5462; }
#campaignNextRoundDialog .icon-button,
#campaignDeleteConfirmDialog .icon-button { color: #746f7c; }
#campaignNextRoundDialog .campaign-next-round-members small { color: #5b32b8; }

#campaignNextRoundDialog .ghost-button,
#campaignDeleteConfirmDialog .ghost-button {
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
  opacity: 1;
}

.formal-campaign-dialog-card .campaign-delete-editor-button { margin-right: auto; }
.formal-campaign-dialog-card .campaign-delete-editor-button,
#campaignDeleteConfirmDialog .text-button.danger {
  border: 1px solid #efc8ce;
  background: #fff;
  color: #b42336;
  opacity: 1;
}

.formal-campaign-dialog-card .campaign-delete-editor-button:hover,
#campaignDeleteConfirmDialog .text-button.danger:hover {
  border-color: #dc9eaa;
  background: #fff4f5;
  color: #8f1728;
}

/* 上面两条给「删除 Campaign」定的是白芯片 + 深红字（#b42336 / 悬停 #8f1728），
   但只有 (0,2,0)/(0,3,0)，日间被 html[data-theme="day"] .text-button.danger 压回
   #d64f78 —— 白芯片上实测 4.00:1，16px/600 不够 AA 的 4.5。隔壁
   #campaignDeleteConfirmDialog 那条带 id 没被压，于是同一种「删 Campaign」按钮
   在编辑弹窗和确认弹窗里是两个红。这里让日间也用回本来写好的色值，不新增配色。
   多带一个 .dialog-card 是必要的：只写 html[data-theme="day"] .formal-campaign-dialog-card
   .campaign-delete-editor-button 跟那条全局日间规则同为 (0,3,1)，打平之后按行序，
   全局那条在文件更靠后，照样赢。两个类都在同一个元素上，凑成 (0,4,1) 才稳。 */
html[data-theme="day"] .dialog-card.formal-campaign-dialog-card .campaign-delete-editor-button {
  color: #b42336;
}

html[data-theme="day"] .dialog-card.formal-campaign-dialog-card .campaign-delete-editor-button:hover {
  color: #8f1728;
}

.campaign-delete-confirm-card { width: min(520px, calc(100vw - 32px)); }

/* 「开下一轮」弹窗转浅色时漏掉了输入框：全局 .dialog-card input 是白字，预填文字全隐形 */
#campaignNextRoundDialog input,
#campaignNextRoundDialog select,
#campaignNextRoundDialog textarea {
  border-color: #e3e0e8;
  background: #faf9fa;
  color: #312a36;
}

#campaignNextRoundDialog input::placeholder { color: #9a93a5; }

/* 编辑弹窗（深底）里的「删除 Campaign」：白芯片突兀，改为深底危险按钮 */
.campaign-delete-editor-button {
  border: 1px solid rgba(255, 124, 142, 0.4);
  background: transparent;
  color: #ff9aab;
}

.campaign-delete-editor-button:hover {
  border-color: rgba(255, 124, 142, 0.7);
  background: rgba(255, 124, 142, 0.12);
  color: #ffb3c0;
}

/* 按账号直查：与「搜索网红」同格并排，白卡上的浅色按钮（白底 #fff / 字 #5b32b8 / 边框 #d9d0ee） */
.discovery-search-actions {
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  align-self: end;
}

.handle-lookup-button {
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.handle-lookup-button:hover:not(:disabled) {
  background: #f4efff;
  border-color: #b9a6e8;
}

.handle-lookup-button:focus-visible {
  outline: 2px solid #5b32b8;
  outline-offset: 2px;
}

.handle-lookup-button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.discovery-lookup-hint {
  margin: -8px 0 14px;
  color: #6b5f86;
  font-size: 12px;
  line-height: 1.6;
}

/* ── 同行评价：共享匿名口碑层（仅追加，避免被历史深色规则覆盖） ── */
.creator-peer-reviews,
.peer-review-dialog-card {
  background: #fff;
  color: #1f1833;
  border: 1px solid #e3dcf2;
}

.creator-peer-reviews[hidden] {
  display: none;
}

.peer-review-summary {
  color: #5b32b8;
  font-size: 13px;
  font-weight: 600;
}

.peer-review-privacy-note {
  margin: 0 0 14px;
  color: #6b5f86;
  font-size: 13px;
  line-height: 1.6;
}

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

.peer-review-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed #d9d0ee;
  border-radius: 14px;
  background: #faf8ff;
  color: #6b5f86;
  font-size: 13px;
}

.peer-review-item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e4ddf1;
  border-radius: 14px;
  background: #fff;
  color: #251c3a;
}

.peer-review-item-head,
.peer-review-item-head > div,
.peer-review-editor-head,
.peer-review-editor-actions,
.peer-review-public-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.peer-review-item-head > div:first-child {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.peer-review-item-head strong,
.peer-review-item-head b,
.peer-review-editor-head strong,
.peer-review-public-summary strong {
  color: #251c3a;
}

.peer-review-item-head small,
.peer-review-editor-head small,
.peer-review-price {
  color: #756a8d;
}

.peer-review-stars {
  display: inline-flex;
  color: #d6cce8;
  letter-spacing: 1px;
}

.peer-review-stars .is-active {
  color: #8a4be0;
}

.peer-review-dimensions,
.peer-review-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.peer-review-dimensions span,
.peer-review-tag-row span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4efff;
  color: #5b32b8;
  font-size: 12px;
  font-weight: 700;
}

.peer-review-comment,
.peer-review-price {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.peer-review-comment {
  color: #382f4d;
}

.peer-review-delete {
  justify-self: end;
}

.peer-review-editor {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #ded5ef;
  border-radius: 14px;
  background: #fbf9ff;
  color: #251c3a;
}

.peer-review-rating-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.peer-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.peer-review-tags legend {
  width: 100%;
  margin-bottom: 7px;
  color: #5a506f;
  font-size: 12px;
  font-weight: 700;
}

.peer-review-tags label,
.campaign-closeout-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #d9d0ee;
  border-radius: 999px;
  background: #fff;
  color: #5b32b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.peer-review-tags input,
.campaign-closeout-share input {
  accent-color: #6d3bc2;
}

.peer-review-fields {
  display: grid;
  grid-template-columns: minmax(170px, 0.4fr) minmax(260px, 1fr);
  gap: 12px;
}

.peer-review-fields label {
  display: grid;
  gap: 8px;
  color: #5a506f;
  font-size: 12px;
  font-weight: 700;
}

.peer-review-fields select,
.peer-review-fields textarea {
  width: 100%;
  border: 1px solid #d9d0ee;
  border-radius: 10px;
  background: #fff;
  color: #251c3a;
}

.peer-review-editor-actions .ghost-button,
.peer-review-badge {
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
}

.peer-review-badge {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.peer-review-badge:hover,
.peer-review-badge:focus-visible,
.peer-review-editor-actions .ghost-button:hover {
  background: #f4efff;
  border-color: #b9a6e8;
}

.campaign-closeout-row .campaign-closeout-share {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
  border-color: #d9d0ee;
  background: #fff;
  color: #5b32b8;
}

.peer-review-dialog-card {
  width: min(720px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 72px));
  overflow: auto;
}

.peer-review-dialog-body {
  display: grid;
  gap: 16px;
}

.peer-review-public-summary {
  padding: 16px;
  border-radius: 14px;
  background: #f4efff;
  color: #5b32b8;
}

@media (max-width: 760px) {
  .peer-review-rating-grid,
  .peer-review-fields {
    grid-template-columns: 1fr;
  }

  .peer-review-editor-head,
  .peer-review-editor-actions,
  .peer-review-item-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 同行评价区是白卡，全局 .text-button.danger 的浅粉（#ff9ab8）在这里几乎隐形 */
.peer-review-delete.danger,
.peer-review-delete {
  border: 1px solid #f0c9d5;
  border-radius: 10px;
  padding: 0 10px;
  min-height: 30px;
  background: #fff;
  color: #b42336;
  font-weight: 600;
  opacity: 1;
}

.peer-review-delete:hover {
  border-color: #dc9aa9;
  background: #fdf2f4;
  color: #8f1b2b;
}

/* 合作标签：原来被 flex 压扁成 96px，中文逐字断行成三行。
   改成不收缩、不断行的胶囊，并用整块底色表达选中，去掉笨重的原生方框。 */
.peer-review-tags label {
  position: relative;
  flex: 0 0 auto;
  gap: 0;
  padding: 8px 14px;
  border-color: #e2dced;
  color: #6b6478;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.peer-review-tags label input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.peer-review-tags label:hover {
  border-color: #cfc3e8;
  background: #faf8ff;
  color: #55496b;
}

.peer-review-tags label:has(input:checked) {
  border-color: #6847c8;
  background: #f2ecff;
  color: #4a2792;
}

.peer-review-tags label:has(input:checked)::before {
  content: "✓";
  margin-right: 5px;
  font-weight: 700;
}

.peer-review-tags label:has(input:focus-visible) {
  outline: 2px solid #6847c8;
  outline-offset: 2px;
}

/* 负面标签选中时用赭红，和好评的紫色分开，扫一眼就知道口碑偏向 */
.peer-review-tags label[data-tone="warn"]:has(input:checked) {
  border-color: #c98a92;
  background: #fdf2f3;
  color: #a03340;
}

.peer-review-tags label[data-tone="warn"]:hover {
  border-color: #e2c3c7;
  background: #fdf7f8;
  color: #8f5560;
}

/* 同行评价此前是方角贴边（radius 0 / padding 0），和邻居的 14px 圆角卡片不是一套 */
#creatorDialog .creator-peer-reviews {
  padding: 16px;
  border-radius: 14px;
}

/* 合作品牌 + 发布日期并排，别让两个短字段各占一整行 */
#creatorDialog .collaboration-basics {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#creatorDialog .collaboration-basics .creator-collaboration-brand,
#creatorDialog .collaboration-basics .creator-collaboration-publish {
  margin: 0;
}

#creatorDialog .collaboration-basics #creatorProjectsInput {
  min-height: 74px;
}

@media (max-width: 720px) {
  #creatorDialog .collaboration-basics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 合作评价中心：Amazon 式两栏（左总览 / 右标签+列表）────────────────── */
#creatorDialog .creator-reviews-hub {
  padding: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  color: #251c3a;
}

#creatorDialog .reviews-hub-note {
  color: #746a8d;
  font-size: 12px;
  font-weight: 700;
}

#creatorDialog .reviews-hub-layout {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}

#creatorDialog .reviews-hub-aside {
  display: grid;
  gap: 12px;
  padding-right: 20px;
  border-right: 1px solid #eceaf2;
}

#creatorDialog .reviews-hub-score p {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 4px 0 2px;
}

#creatorDialog .reviews-hub-score strong {
  color: #251c3a;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

#creatorDialog .reviews-hub-score span {
  color: #8a8199;
  font-size: 13px;
  font-weight: 600;
}

#creatorDialog .reviews-hub-score small {
  color: #746a8d;
  font-size: 12px;
  font-weight: 700;
}

#creatorDialog .reviews-hub-star-row i {
  color: #ddd7e6;
  font-size: 15px;
  font-style: normal;
}

#creatorDialog .reviews-hub-star-row i.is-on { color: #d59b3d; }
#creatorDialog .reviews-hub-star-row.is-large i { font-size: 18px; }

#creatorDialog .reviews-hub-bars {
  display: grid;
  gap: 4px;
}

#creatorDialog .reviews-hub-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  color: #6b6478;
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .reviews-hub-bar em {
  height: 11px;
  border: 1px solid #e2dced;
  border-radius: 4px;
  background: #f7f5fb;
  overflow: hidden;
}

#creatorDialog .reviews-hub-bar i {
  display: block;
  height: 100%;
  background: #6847c8;
}

#creatorDialog .reviews-hub-bar b { text-align: right; }

#creatorDialog .reviews-hub-split {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid #eceaf2;
  color: #5a5268;
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .reviews-hub-write { width: 100%; }

#creatorDialog .reviews-hub-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

#creatorDialog .reviews-hub-tags strong {
  display: block;
  margin-bottom: 7px;
  color: #3b3450;
  font-size: 12px;
  font-weight: 600;
}

#creatorDialog .reviews-hub-tags div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#creatorDialog .reviews-hub-tags span {
  padding: 5px 11px;
  border: 1px solid #e2dced;
  border-radius: 999px;
  background: #faf8ff;
  color: #4a2792;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#creatorDialog .reviews-hub-tags span[data-tone="warn"] {
  border-color: #ecd3d7;
  background: #fdf5f6;
  color: #a03340;
}

#creatorDialog .reviews-hub-tags b { font-weight: 700; }

#creatorDialog .reviews-hub-block {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #eceaf2;
}

#creatorDialog .reviews-hub-main > .reviews-hub-block:first-of-type {
  padding-top: 0;
  border-top: 0;
}

#creatorDialog .reviews-hub-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

#creatorDialog .reviews-hub-block-head strong {
  color: #3b3450;
  font-size: 13px;
  font-weight: 600;
}

#creatorDialog .reviews-hub-editor-wrap {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #eceaf2;
}

#creatorDialog .reviews-hub-editor-wrap[hidden] { display: none; }

/* 历次评分并进来后不再是独立卡片，去掉自带的框 */
#creatorDialog .reviews-hub-block .rating-history-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 860px) {
  #creatorDialog .reviews-hub-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #creatorDialog .reviews-hub-aside {
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid #eceaf2;
  }
}

/* ── 名单表格视图：挑投放名单时横向比数据 ─────────────────────────────── */
#creators .creator-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid #e2e5ec;
  border-radius: 10px;
  background: #f5f6f9;
}

#creators .creator-view-toggle button {
  min-height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6b6478;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#creators .creator-view-toggle button.is-active {
  background: #fff;
  color: #5b32b8;
  box-shadow: var(--elev-1);
}

#creators .creator-table-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  color: #5a5468;
  font-size: 12px;
  font-weight: 600;
}

#creators .creator-table-bulk.is-active {
  border-color: #cbbcf0;
  background: #f8f5ff;
  color: #4a2792;
}

#creators .creator-table-bulk div {
  display: flex;
  gap: 8px;
}

#creators .creator-table-bulk .ghost-button,
#creators .creator-table-bulk .text-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #d9d0ee;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
}

#creators .creator-table-bulk button:disabled {
  border-color: #e6e8ee;
  background: #f6f7f9;
  color: #a7a2b3;
  cursor: not-allowed;
}

#creators .creator-table-scroll {
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  overflow-x: auto;
}

#creators .creator-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

#creators .creator-data-table th {
  padding: 10px 12px;
  border-bottom: 1px solid #e8eaef;
  background: #f7f8fa;
  color: #6b6478;
  font-weight: 600;
  white-space: nowrap;
}

#creators .creator-data-table th.is-sortable { cursor: pointer; user-select: none; }
#creators .creator-data-table th.is-sortable:hover { color: #4a2792; }
#creators .creator-data-table th.is-sorted { color: #5b32b8; }

#creators .creator-data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f0f1f5;
  color: #454055;
  vertical-align: middle;
}

#creators .creator-data-table tr:last-child td { border-bottom: 0; }
#creators .creator-data-table tr.is-selected td { background: #faf8ff; }
#creators .creator-data-table tbody tr:hover td { background: #f8f9fb; }

#creators .creator-data-table .align-left { text-align: left; }
#creators .creator-data-table .align-right { text-align: right; }
#creators .creator-data-table .align-center { text-align: center; }

#creators .creator-table-name strong {
  display: block;
  max-width: 190px;
  overflow: hidden;
  color: #251c3a;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#creators .creator-table-name small {
  color: #8a8199;
  font-size: 12px;
}

#creators .creator-data-table b { color: #251c3a; font-weight: 600; }
#creators .creator-table-has-email { color: #1d7a5f; font-weight: 600; }
#creators .creator-table-no-email { color: #a7a2b3; }

#creators .creator-table-check { width: 34px; text-align: center; }
#creators .creator-table-check input { width: 14px; height: 14px; }

#creators .creator-data-table .text-button {
  border: 1px solid #d9d0ee;
  border-radius: 10px;
  padding: 0 10px;
  min-height: 28px;
  background: #fff;
  color: #5b32b8;
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
}

/* 切换按钮要和统计文字同排，不能自己占一个网格格子（会把筛选下拉挤成一坨） */
#creators .creator-summary-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* 表格里的头像 */
#creators .creator-table-name > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#creators .creator-table-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid #e8e4f0;
  border-radius: 50%;
  object-fit: cover;
  background: #f4f2f8;
}

#creators .creator-table-avatar.is-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f6486;
  font-size: 12px;
  font-weight: 600;
}

/* 切换按钮不许被压窄换行：让统计文字去收缩，按钮保持原尺寸 */
#creators .creator-summary-block > div:first-child { min-width: 0; }

#creators .creator-summary-block .creator-view-toggle { flex-shrink: 0; }

#creators .creator-view-toggle button {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Campaign 两合一：成员 / 进度共享工作区（仅追加） ── */
.campaign-unified-tabs {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid #d9d0ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(71, 45, 120, 0.08);
}

.campaign-unified-tabs button {
  min-width: 112px;
  padding: 10px 20px;
  border: 1px solid #d9d0ee;
  border-radius: 10px;
  background: #fff;
  color: #5b32b8;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.campaign-unified-tabs button:hover,
.campaign-unified-tabs button:focus-visible {
  border-color: #d9d0ee;
  background: #f7f3ff;
}

.campaign-unified-tabs button.is-active {
  border-color: #6d3bc2;
  background: #6d3bc2;
  color: #fff;
}

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

.campaign-unified-pane[data-campaign-workspace-pane="progress"]:not([hidden]) {
  display: grid;
  gap: 16px;
  min-width: 0;
}

#pipeline .pipeline-overview-panel,
#campaigns [data-campaign-workspace-pane="members"] .agent-advice-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#pipeline .pipeline-stage-chart {
  width: 100%;
  max-width: 100%;
}

#pipeline .pipeline-campaign-filter select {
  border-color: #d9d0ee;
  background: #fff;
  color: #251c3a;
  color-scheme: light;
}

.formal-campaign-schedule,
.campaign-detail-schedule {
  color: #6b5f86 !important;
  font-size: 12px !important;
  font-weight: 700;
}

.campaign-schedule-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid #d9d0ee;
  border-radius: 14px;
  background: #fff;
  color: #251c3a;
}

.campaign-schedule-notice strong {
  display: block;
  color: #251c3a;
}

.campaign-schedule-notice p {
  margin: 4px 0 0;
  color: #6b5f86;
  font-size: 13px;
}

.campaign-schedule-notice .ghost-button {
  flex: 0 0 auto;
  border-color: #d9d0ee;
  background: #fff;
  color: #5b32b8;
}

@media (max-width: 760px) {
  .campaign-unified-tabs {
    display: flex;
    width: 100%;
  }

  .campaign-unified-tabs button {
    flex: 1;
    min-width: 0;
  }

  .campaign-schedule-notice {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── Campaign · 合作进度看板 ────────────────────────────────────────────────
   原来这里是"一次只看一个阶段"的抽屉：阶段是筛选条件，一次只显示管道的一段，
   看不出人堆在哪儿；每张卡还各挂一个 11 选项的下拉，47 个人就是 47 个下拉。
   看板把阶段变成**位置**——11 条泳道横向排开，分布一眼可见，推进就是把卡拖过去。

   配色一律沿用本页原有的那套，没有新增任何色值：
     面板底 #fafbfc / 卡片 #ffffff / 描边 #e8eaf0 · #e5e7ec
     正文 #283143 / 次要 #737d8e · #8a93a3 / 强调 #6d4da5
     泳道色标复用柱状图那五个 --pipeline-stage-color（stage-N 类名也照搬），
     所以看板和上面那排柱子天然对得上。
   放在文件末尾是因为 #pipeline 这一块前面有好几处互相覆盖的规则，
   要稳定生效只能压在最后。 */

#pipeline .pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(236px, 1fr);
  gap: 12px;
  min-width: 0;
  padding-bottom: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* 这里**故意不写** scroll-behavior: smooth，滚动一律瞬时。
     实测在无头 Chrome 里只要它生效，赋值 scrollLeft 就完全不动（关掉立刻正常，
     JS 侧的 behavior:"smooth" 同理）。为一个我没法验证的动画，把"点柱子跳转"
     变成"点了没反应"，不划算。瞬时跳转也无所谓 prefers-reduced-motion。 */
  scrollbar-color: #b9a8df transparent;
}

#pipeline .pipeline-lane {
  --pipeline-stage-color: #8f5cff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e8eaf0;
  border-radius: 14px;
  background: #fafbfc;
  transition: border-color 160ms ease, background 160ms ease;
}

/* 与柱状图同源的五个色相，序号一一对应 */
#pipeline .pipeline-lane.stage-1 { --pipeline-stage-color: #ae6aeb; }
#pipeline .pipeline-lane.stage-2 { --pipeline-stage-color: #d65dba; }
#pipeline .pipeline-lane.stage-3 { --pipeline-stage-color: #ef6b91; }
#pipeline .pipeline-lane.stage-4 { --pipeline-stage-color: #35a877; }

#pipeline .pipeline-lane.is-focused {
  border-color: color-mix(in srgb, var(--pipeline-stage-color) 34%, #ffffff);
  background: color-mix(in srgb, var(--pipeline-stage-color) 6%, #ffffff);
}

/* 高亮直接写在拿到 .is-drop-target 的那个元素上（就是泳道内容区）。
   原来这里并排写了 `.pipeline-lane.is-drop-target` 和一条 `:has()`：前者永远不匹配
   （JS 从来没把这个类加到 .pipeline-lane 上），而选择器列表不是 forgiving 的——
   不支持 :has() 的浏览器会把**整条规则**丢掉，那个看似兜底的写法等于零。不需要 :has()。 */
#pipeline .pipeline-lane-body.is-drop-target {
  background: color-mix(in srgb, var(--pipeline-stage-color) 10%, #ffffff);
  outline: 2px dashed var(--pipeline-stage-color);
  outline-offset: -2px;
}

#pipeline .pipeline-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 9px;
  border-left: 3px solid var(--pipeline-stage-color);
}

#pipeline .pipeline-lane-head h3 {
  margin: 0;
  overflow: hidden;
  color: #283143;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipeline .pipeline-lane-head span {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pipeline-stage-color) 12%, #ffffff);
  color: var(--pipeline-stage-color);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#pipeline .pipeline-lane-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 84px;
  /* 泳道内部自己滚。不封顶的话，47 个人的"等待回复"能拉到近 8000px 高，
     旁边十条空泳道全被推到屏幕外——看板"一眼看见分布"的意义就没了。
     封顶之后整块板高度稳定，横向扫一眼就知道人堆在哪。 */
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-right: 2px;
  border-radius: 14px;
  scrollbar-width: thin;
  scrollbar-color: #cfc2ea transparent;
  transition: background 160ms ease;
}

/* 泳道里卡片是竖着排的，覆盖掉外面那套"网格 + 300px 最小宽"的规则 */
#pipeline .pipeline-board .pipeline-creator-identity {
  /* flex 子项默认 flex-shrink:1——泳道一封顶，47 张卡就会被压扁到互相重叠。
     卡片高度必须由内容决定，压缩交给泳道自己滚。 */
  flex: 0 0 auto;
  min-height: 0;
  cursor: grab;
}

/* 泳道只有 236px 宽，下拉不设上限就会把负责人挤成一个字母（实测只剩 22px）。 */
#pipeline .pipeline-board .pipeline-card-footer > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #737d8e;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pipeline .pipeline-board .pipeline-card-footer > select {
  flex: 0 1 104px;
  min-width: 0;
}

#pipeline .pipeline-board .pipeline-creator-identity:active { cursor: grabbing; }

#pipeline .pipeline-board .pipeline-creator-identity.is-dragging {
  opacity: 0.45;
  border-color: var(--pipeline-stage-color);
}

#pipeline .pipeline-board .pipeline-stage-empty {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 18px 10px;
  border: 1px dashed #d9dce4;
  border-radius: 14px;
  color: #9098a6;
  font-size: 12px;
}

/* 窄屏：泳道固定宽度，靠横向滚动，不再被挤成一条 */
@media (max-width: 760px) {
  #pipeline .pipeline-board {
    grid-auto-columns: minmax(212px, 212px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #pipeline .pipeline-lane,
  #pipeline .pipeline-lane-body,
  #pipeline .pipeline-board .pipeline-creator-identity { transition: none; }
}

/* 整块板没有任何合作记录时的空态。11 个一模一样的虚线框只会让人去拖一个不存在的东西。 */
#pipeline .pipeline-board.is-empty {
  display: block;
}

#pipeline .pipeline-board-empty {
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed #d9dce4;
  border-radius: 14px;
  background: #fafbfc;
  color: #737d8e;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* 只给读屏用的播报行：看板本身已经把变化画出来了，再占一行视觉空间是重复。 */
#pipeline .pipeline-board-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 首页「今天该做什么」 ────────────────────────────────────────────────
   原来的总览只有统计图表：能告诉你库里有多少人，回答不了今天先做哪件事。
   配色一律沿用本页已有的那套（面板 #fff / 容器 #fafbfc / 描边 #e8eaf0 · #e5e7ec /
   正文 #283143 / 次要 #737d8e · #8a93a3 / 强调 #6d4da5），
   三张卡的色调复用管道柱状图那三个既有色相（#ef6b91 卡住 / #d65dba 待确认 /
   #35a877 正常），没有新增任何色值。 */

#dashboard .today-panel {
  display: grid;
  gap: 16px;
}

#dashboard .today-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

#dashboard .today-card {
  --today-tone: #8f5cff;
  display: grid;
  gap: 4px;
  padding: 14px 15px;
  border: 1px solid #e5e7ec;
  border-left: 3px solid var(--today-tone);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

#dashboard .today-card.tone-risk { --today-tone: #ef6b91; }
#dashboard .today-card.tone-warn { --today-tone: #d65dba; }
#dashboard .today-card.tone-ok   { --today-tone: #35a877; }

#dashboard .today-card:hover {
  border-color: color-mix(in srgb, var(--today-tone) 40%, #ffffff);
  background: color-mix(in srgb, var(--today-tone) 5%, #ffffff);
  transform: translateY(-1px);
}

#dashboard .today-card:focus-visible {
  outline: 2px solid var(--today-tone);
  outline-offset: 2px;
}

#dashboard .today-card-label {
  color: #737d8e;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#dashboard .today-card-count {
  color: var(--today-tone);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

#dashboard .today-card small { color: #8a93a3; font-size: 12px; }

/* 空状态：数字位置显示破折号而不是 0——
   「0 件事要处理」和「数据没读到」是两回事，用同一个 0 表示就是在说谎。 */
#dashboard .today-card.is-blank { --today-tone: #e1e6ee; cursor: default; }
#dashboard .today-card.is-blank .today-card-count { color: #9098a6; }

#dashboard .today-actions { display: flex; flex-wrap: wrap; gap: 8px; }

#dashboard .today-action {
  padding: 8px 14px;
  border: 1px solid #e5e7ec;
  border-radius: 999px;
  background: #fafbfc;
  color: #283143;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

#dashboard .today-action:hover { border-color: #6d4da5; background: #fff; color: #6d4da5; }

#dashboard .today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
}

/* 管道横排。11 段竖着列要滚一屏，而这块要回答的是「哪一段堆人了」——
   那是个对比问题，对比得并排才看得出来。窄屏放不下就横向滚，不折行：
   折行会把「顺序」这条信息弄丢，而管道的顺序本身就是信息。 */
#dashboard .today-funnel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(74px, 1fr);
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

#dashboard .today-funnel-step {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px 9px 9px;
  border: 1px solid #e9ecf1;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

#dashboard .today-funnel-step:hover { border-color: #6d4da5; background: #fdfcff; }
#dashboard .today-funnel-step:focus-visible { outline: 2px solid #8f5cff; outline-offset: 2px; }

#dashboard .today-funnel-count {
  color: #283143;
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#dashboard .today-funnel-label {
  overflow: hidden;
  color: #737d8e;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard .today-funnel-stall { color: #ef6b91; font-size: 11px; font-weight: 600; }

/* 有卡住记录的那一段整段标出来。「报价谈判 9 人」本身不说明问题，
   「其中 3 个超过 7 天没动」才是现在要去看它的理由。 */
#dashboard .today-funnel-step.has-stall { border-color: #f6c9d6; background: #fffafb; }
#dashboard .today-funnel-step.has-stall .today-funnel-count { color: #d64f78; }
#dashboard .today-funnel-step.has-stall .today-funnel-bar > i { background: linear-gradient(90deg, #f0839f, #ef6b91); }

/* 0 的段压暗但保留位置：管道的形状是信息，缺哪一段要看得见；
   同时它不该和有人的段抢注意力。 */
#dashboard .today-funnel-step.is-zero { border-color: #f0f2f6; background: #fcfcfd; cursor: default; }
#dashboard .today-funnel-step.is-zero .today-funnel-count { color: #a2aab8; }
#dashboard .today-funnel-step.is-zero .today-funnel-label { color: #98a1b1; }
#dashboard .today-funnel-step.is-zero:hover { border-color: #f0f2f6; background: #fcfcfd; }

#dashboard .today-funnel-legend {
  margin: 10px 0 0;
  color: #8a93a3;
  font-size: 12px;
}

#dashboard .today-funnel-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #eef0f5;
  overflow: hidden;
}

#dashboard .today-funnel-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ae6aeb, #8f5cff);
}

#dashboard .today-schedule { display: grid; gap: 8px; }

#dashboard .today-schedule-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #ecf0f6;
}

#dashboard .today-schedule-row:last-child { border-bottom: 0; }
#dashboard .today-schedule-date { color: #6d4da5; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
#dashboard .today-schedule-name { overflow: hidden; color: #283143; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#dashboard .today-schedule-row small { grid-column: 2; color: #8a93a3; font-size: 12px; }

#dashboard .today-campaigns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 8px;
}

#dashboard .today-campaign {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid #e5e7ec;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

#dashboard .today-campaign:hover { border-color: #6d4da5; transform: translateY(-1px); }

#dashboard .today-campaign-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

#dashboard .today-campaign-head > strong {
  overflow: hidden;
  color: #283143;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard .today-campaign-head > em {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

#dashboard .today-campaign-risk { background: #fdeaf0; color: #d64f78; }
#dashboard .today-campaign-ok { background: #e9f7f0; color: #2f8f66; }

#dashboard .today-campaign-meta {
  color: #737d8e;
  font-size: 12px;
  line-height: 1.45;
}

/* 进度分母用成员数，不用合作记录数：成员是这个 Campaign 打算做多少人，
   合作记录只是已建档的那部分——拿后者当分母，一个刚起步的 Campaign 会显示 100%。 */
#dashboard .today-campaign-progress {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

#dashboard .today-campaign-progress small { color: #8a93a3; font-size: 11.5px; font-variant-numeric: tabular-nums; }

#dashboard .today-campaign-bar {
  height: 6px;
  border-radius: 999px;
  background: #eef0f5;
  overflow: hidden;
}

#dashboard .today-campaign-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ae6aeb, #8f5cff);
}

#dashboard .today-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

/* 日期单独占右上。原来它拼在副标题末尾，和「今天有 N 件事」抢同一句话的重音——
   一句话只能有一个重点，而这句的重点是那个 N。 */
#dashboard .today-date {
  flex: none;
  margin: 0;
  padding-top: 2px;
  color: #8a93a3;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#dashboard .today-activity-title {
  margin: 18px 0 8px;
  color: #283143;
  font-size: 13px;
  font-weight: 600;
}

/* 最近动态读的是 campaign.activity —— Campaign 详情页右侧那条时间线的同一份数据，
   首页只是把各个 Campaign 的合成一条流。没有新增任何采集。 */
#dashboard .today-activity {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#dashboard .today-activity > li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f6;
}

#dashboard .today-activity > li:last-child { border-bottom: 0; }

#dashboard .today-activity-dot {
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 999px;
  background: #c3aee8;
}

#dashboard .today-activity strong {
  display: block;
  color: #283143;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

#dashboard .today-activity small { color: #9098a6; font-size: 11.5px; }
#dashboard .today-activity time { color: #9098a6; font-size: 11.5px; white-space: nowrap; }
#dashboard .today-activity .today-empty { grid-column: 1 / -1; border-bottom: 0; }

#dashboard .today-quick { display: grid; gap: 12px; }

#dashboard .today-ask {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid #e5e7ec;
  border-radius: 999px;
  background: #fbfaff;
}

#dashboard .today-ask:focus-within { border-color: #8f5cff; background: #fff; }

#dashboard .today-ask-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ae6aeb, #8f5cff);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

#dashboard .today-ask input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #283143;
  font-size: 13px;
}

#dashboard .today-ask input:focus { outline: none; }
#dashboard .today-ask input::placeholder { color: #a3aab8; }
#dashboard .today-ask .primary-button { padding: 7px 18px; font-size: 12.5px; }

#dashboard .today-empty {
  margin: 0;
  padding: 18px 12px;
  border: 1px dashed #d9dce4;
  border-radius: 14px;
  color: #9098a6;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 900px) {
  #dashboard .today-grid { grid-template-columns: minmax(0, 1fr); }
  #dashboard .today-hero { flex-direction: column; gap: 6px; }
  #dashboard .today-funnel { grid-auto-columns: minmax(72px, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard .today-card,
  #dashboard .today-action,
  #dashboard .today-funnel-step,
  #dashboard .today-campaign { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   清爽白天版（可切换，不替换原来那套）
   ══════════════════════════════════════════════════════════════════════
   为什么只需要改这么点：这套 UI 其实**本来就是浅色的**——内容面板早就是白底深字，
   "深色"只来自两处外壳：body 那层深紫渐变，和侧栏的 #0e0820。
   所以白天版不是重做主题，是把外壳也调成白天，让整屏读起来是一个安静的浅色平面。

   杂乱感的来源被逐条去掉：
   - body 上那两层 48px 网格纹 + 两团径向光晕 —— 白天版整个撤掉，换成一块干净的底。
   - 侧栏的紫粉渐变 + 选中项的渐变填充加内描边 —— 换成一层淡紫填充 + 紫字，安静得多。
   - 白底面板浮在深底上时靠强描边分离；白天版底色本身带一点薰衣草偏色，
     面板用极轻的阴影就能浮起来，描边可以更淡。

   配色都从她现有的品牌色推出来，没有另起一套：
     主色仍是 #8f5cff / #6d4da5（原样）；正文 #283143、次要 #737d8e（原样）；
     底色 #f6f4fb 是把主色掺进白里得到的偏色中性，不是随手挑的灰。
   状态色（绿/黄/红/粉）与所有面板内部一律不动。 */

html[data-theme="day"] body {
  color: #283143;
  background: #f6f4fb;
  background-size: auto;
}

html[data-theme="day"] .sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, #8f5cff 6%, #ffffff), #ffffff);
  color: #283143;
  border-right: 1px solid #e9e4f5;
}

html[data-theme="day"] .brand strong { color: #2a2140; }
html[data-theme="day"] .brand span { color: #8a8299; }

html[data-theme="day"] .sidebar-toggle {
  border-color: #e1dcf0;
  background: #fbfaff;
  color: #6d4da5;
}

html[data-theme="day"] .zr-nav-label { color: #9a92ad; }
html[data-theme="day"] .zr-nav-divider { background: #ece7f7; }

html[data-theme="day"] .nav-item { color: #5b6376; }

/* 选中态：一层淡紫填充 + 紫字。原来那套是渐变填充加一圈内描边，
   在浅底上会显得很吵——白天版要的是"安静地指出你在哪儿"。 */
html[data-theme="day"] .nav-item.active,
html[data-theme="day"] .nav-item:hover {
  color: #6d4da5;
  background: color-mix(in srgb, #8f5cff 11%, #ffffff);
  box-shadow: none;
}

html[data-theme="day"] .nav-item-locked { color: #9aa1b1; }
html[data-theme="day"] .nav-lock { background: #efeaf9; color: #7d6aa8; }

html[data-theme="day"] .sidebar-footer { border-top-color: #ece7f7; }
html[data-theme="day"] .sidebar-footer-action { color: #5b6376; }
html[data-theme="day"] .sidebar-footer-action:hover,
html[data-theme="day"] .sidebar-footer-action[aria-expanded="true"] {
  background: color-mix(in srgb, #8f5cff 10%, #ffffff);
  color: #6d4da5;
}

/* 顶部页面标题原来是浅字压在深底上 */
html[data-theme="day"] .topbar,
html[data-theme="day"] .view-title,
html[data-theme="day"] main > header,
html[data-theme="day"] .main > header { color: #283143; }

/* 面板：底色变浅之后，靠极轻的阴影浮起来，描边可以更淡——这是"清爽"的关键一步。 */
html[data-theme="day"] .workspace-panel {
  border-color: #ece9f4;
  box-shadow: var(--elev-1);
}

/* 白天版：外壳上那些原本"浅字压深底"的地方必须翻过来。
   页面大标题原色是 rgba(216,210,235,.86)——在深底上很好看，
   放到 #f6f4fb 的浅底上对比度只有 1.34，基本读不出来。
   这类问题只在真浏览器里切过去看才会发现，光看 CSS 是看不出的。 */
html[data-theme="day"] .main > .topbar h1,
html[data-theme="day"] body:not([data-current-view="creators"]) .main > .topbar h1 {
  color: #2a2140;
}

html[data-theme="day"] .topbar { border-bottom-color: #e9e4f5; }

html[data-theme="day"] .zr-nav-label { color: #7a7290; }

html[data-theme="day"] .sidebar-footer-icon.material-icons-round { color: #8b7fb0; }

html[data-theme="day"] .server-sync-notice { color: #5b6376; }

/* 白天版 · 日历：让整块日历读起来是一张干净的白表。
   原来两处让它显脏：表头那条淡紫横条，以及"非本月"格子的整块灰底。
   非本月不该靠一块灰来区分——**用文字深浅区分就够了**，
   底色一律留白，格线负责结构。 */
html[data-theme="day"] #calendar .calendar-weekdays,
html[data-theme="day"] .calendar-weekdays {
  background: #ffffff;
  border-bottom: 1px solid #e8eaf0;
}

html[data-theme="day"] .calendar-weekdays strong { color: #8a93a3; }

html[data-theme="day"] #calendar .calendar-day,
html[data-theme="day"] .calendar-day {
  background: #ffffff;
  border-color: #eef0f5;
  color: #283143;
}

/* 非本月：只淡化文字，不铺灰底 */
html[data-theme="day"] #calendar .calendar-day.muted,
html[data-theme="day"] .calendar-day.muted {
  background: #ffffff;
  color: #98a1b1;   /* 原 #b3b9c6 = 1.97:1，数字读不出来。弱化是为了让它退后，不是让它消失 */
}

/* 今天：一圈淡紫，不填深色 */
html[data-theme="day"] #calendar .calendar-day.is-today,
html[data-theme="day"] #calendar .calendar-day.today,
html[data-theme="day"] .calendar-day.today {
  background: color-mix(in srgb, #8f5cff 6%, #ffffff);
}

html[data-theme="day"] .calendar-grid { background: #ffffff; }

/* 白天版 · 日历格子必须真的是白的。
   前面那条 `html[data-theme="day"] #calendar .calendar-day` 打不过
   `#calendar .campaign-month-grid .calendar-day:nth-child(even)`——
   后者是 1 id + 2 class + 1 伪类，比我那条多一个 class，特异性更高。
   这就是「样式写了没生效」最常见的原因：不是没写，是被更具体的选择器压着。
   所以这里必须把 .campaign-month-grid 一起写进选择器，逐条对位覆盖。

   顺带把斑马纹去掉：日历本来就有格线，再叠一层深浅交替只是噪音——
   日期格该是一张干净的白表。 */
html[data-theme="day"] #calendar .campaign-month-grid .calendar-day,
html[data-theme="day"] #calendar .campaign-month-grid .calendar-day:nth-child(even) {
  background: #ffffff;
  box-shadow: inset -1px -1px 0 #eef0f5;
}

html[data-theme="day"] #calendar .campaign-month-grid .calendar-day.muted {
  background: #ffffff;
  color: #b3b9c6;
}

html[data-theme="day"] #calendar .campaign-month-grid .calendar-day.today {
  background: color-mix(in srgb, #8f5cff 6%, #ffffff);
}

/* ── 白天版 · 主按钮统一成一个紫 ────────────────────────────────────────
   扫全站发现三处「主/选中」按钮各用各的紫：
     同步飞书 #5b32b8 · 日历切换 #6847c8 · Campaign 标签 #6d3bc2
   问题不是"深"——在浅底上，饱和紫的实心按钮正是重点该在的地方；
   问题是**同一个角色三个颜色**，眼睛会以为它们是三种不同的东西。

   统一成 #6847c8：三者里居中，白字对比度约 6.2:1（小字也够），
   比 #5b32b8 轻，不会在白底上砸出一块黑。
   只在白天版生效，原版一个字节都没动。 */
html[data-theme="day"] .list-action-primary,
html[data-theme="day"] .campaign-unified-tabs button.is-active {
  border-color: #6847c8;
  background: #6847c8;
  color: #ffffff;
}

html[data-theme="day"] .list-action-primary:hover,
html[data-theme="day"] .campaign-unified-tabs button.is-active:hover {
  background: #7757d4;
  border-color: #7757d4;
}

/* 阴影也跟着统一，原来是按各自的紫调的 */
html[data-theme="day"] .list-action-primary {
  box-shadow: 0 4px 14px rgba(104, 71, 200, 0.22);
}

/* ══════════════════════════════════════════════════════════════════════
   白天版 · 从 token 层翻，而不是一个组件一个组件补
   ══════════════════════════════════════════════════════════════════════
   邮件外联、合同资料这些页面残留深色框架，根因是它们读的是
   var(--surface) / var(--ink) / var(--muted) / var(--line)——
   这些 token 一直是给深色底设计的。逐个组件去覆盖是没完的（而且总会漏一个，
   漏掉的那个恰恰是用户会点开的那个）；**token 本来就是为这件事存在的**，
   在这里翻一次，所有读它的组件一起翻。

   状态色也必须翻：--green #41d39e、--amber #ffbd67 这种是给深底配的浅色，
   压到白底上对比度不到 2:1，等于看不见。换成仓库里已有的深一档同色相
   （#35a877 / #c14a9b / #ef6b91 / #6847c8），不引入新色相。 */
html[data-theme="day"] {
  --ink: #283143;
  --muted: #737d8e;
  --line: #e8eaf0;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f6f4fb;
  --soft: rgba(143, 92, 255, 0.08);
  --nav: #ffffff;
  --shadow: 0 10px 30px rgba(40, 49, 67, 0.07);
  --green: #35a877;
  --blue: #6847c8;
  --amber: #c1861f;
  --red: #ef6b91;
  --violet: #6847c8;
  --magenta: #c14a9b;
}

/* 上面翻了 token，但这几处的底色是写死的 rgba(31,20,48)，读不到 token。
   它们是同一套「分段控件 / 卡片」外壳，统一处理。 */
html[data-theme="day"] .outreach-tabs,
html[data-theme="day"] #outreach .outreach-tabs,
html[data-theme="day"] .contracts-tabs {
  background: #ffffff;
  border-color: #e8eaf0;
}

html[data-theme="day"] .outreach-tab,
html[data-theme="day"] .contracts-tab { color: #737d8e; }

html[data-theme="day"] .outreach-tab:hover,
html[data-theme="day"] .contracts-tab:hover {
  color: #6847c8;
  background: color-mix(in srgb, #8f5cff 8%, #ffffff);
}

/* 选中态和别处的分段控件统一：实心紫 + 白字。
   页面内的分段控件是"我在看哪一块"的强选择，和侧栏导航那种安静的高亮不是一回事。 */
html[data-theme="day"] .outreach-tab.active,
html[data-theme="day"] .contracts-tab.active {
  background: #6847c8;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="day"] .contract-card,
html[data-theme="day"] .sent-email-card,
html[data-theme="day"] .calendar-item {
  background: #ffffff;
  border-color: #e8eaf0;
  color: #283143;
}

html[data-theme="day"] #creatorDialog .dialog-actions {
  background: #fbfaff;
  border-top-color: #e8eaf0;
}

html[data-theme="day"] #creators thead th {
  background: #f6f4fb;
  color: #5b6376;
}

/* ── 品牌块：别把 18 个字符塞进 170px ──────────────────────────────────
   侧栏 280px、品牌块实际有 231px 可用，但 .brand strong 被写死 max-width:170px，
   于是「ZEREN INFLUENCE.ai」硬生生折成两行，副标题再折两行——四行挤在一起。
   放开宽度、各自压成一行，就干净了。 */
/* 改名成 Zerendo.ai 之后字数少了一半，可用宽 130px 绰绰有余，
   字号回到 15px（原来的大小）。之前压到 12.5px 是为了塞下
   "ZEREN INFLUENCE.ai"——那串在 14px 下要 147px，会被截成 "ZEREN INFLUEN…"。
   截断产品名比折行更糟：折行只是丑，截断是把名字说错了。 */
.brand { gap: 8px; }
.brand-logo-frame { flex: 0 0 38px; width: 38px; height: 38px; }

.brand strong {
  max-width: none;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand span {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand > div:not(.brand-logo-frame) { min-width: 0; flex: 1 1 auto; }

/* ── 页面标题不再说两遍 ────────────────────────────────────────────────
   顶栏那行标题和每个页面自己的标题说的是同一件事——
   三个页面逐字重复（智能搜索 / 候选名单 / 系统设置），
   其余也只是换了个说法（「网红名单」对「网红名单管理」）。
   顶栏那行留在 DOM 里给读屏当页面名，视觉上收掉：既不重复，也省出一截高度。
   （不是 display:none——那样读屏就听不到页面名了。） */
/* 必须带上 body 前缀并显式清掉 min-height：
   `body:not([data-current-view="creators"]) .main > .topbar` 那条设了 min-height:34px，
   特异性比裸的 `.main > .topbar` 高，光写 height:1px 是压不住的。
   这是这份样式表里第三次同类问题——写了没生效，先查特异性，别急着怀疑代码。 */
body .main > .topbar,
body:not([data-current-view="creators"]) .main > .topbar,
body[data-current-view="creators"] .main > .topbar {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 网红名单 · 「更多」收纳 ────────────────────────────────────────────
   六个同等分量的按钮排一排，眼睛没有落点。日常常用的只有同步和导出，
   其余四个偶尔为之——尤其「批量刷新」要花钱，不该和导出并排随手点。
   用 <details> 而不是自己写菜单：原生就支持键盘和 Esc，不需要额外 JS，
   也不会有"点外面关不掉"这类自造 bug。 */
.list-more { position: relative; }

.list-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.list-more > summary::-webkit-details-marker { display: none; }

.list-more-caret { font-size: 12px; transition: transform 160ms ease; }
.list-more[open] .list-more-caret { transform: rotate(180deg); }

.list-more-menu {
  position: absolute;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 244px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--elev-1);
}

.list-more-group {
  margin: 6px 8px 2px;
  color: #8a93a3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.list-more-group:first-child { margin-top: 2px; }

.list-more-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #283143;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.list-more-item:hover { background: #f6f4fb; }
.list-more-item .list-action-icon { color: #6847c8; font-size: 15px; line-height: 1.4; }
.list-more-item small { display: block; margin-top: 2px; color: #8a93a3; font-size: 12px; font-weight: 500; }

/* 白天版的抬升三档。深色底上的阴影浓度直接搬到浅底上会糊成一块脏灰，
   浅色界面靠的是"很轻但边界清楚"。 */
html[data-theme="day"] {
  /* 页面标题的唯一尺度。1440 下 27px；上限 28 是为了超宽屏也不膨胀——
     标题变大不会让页面更清楚，只会更吵。要调整整套标题只改这一行。 */
  --type-page-title: clamp(23px, 1.85vw, 28px);

  /* 卡片分层收敛（2026-08-25，Lucie：参考 McLeuker 的克制）
     --elev-1 是全站 48 处「贴在页面上的卡片」的阴影来源。这些卡片都压在
     #f6f4fb 的页面底上、并且各自都有发丝边——明暗差 + 边框已经分了层，
     再叠阴影是同一件事做三遍，也就是「框感」的来源。
     归零即可，48 处一起安静，而且这是可逆的一行。
     elev-2/3 保留：它们是设置面板和浮层下拉，浮起感是它们的功能。 */
  --elev-1: none;
  --elev-2: 0 4px 14px rgba(40, 49, 67, 0.07);
  --elev-3: 0 16px 40px rgba(40, 49, 67, 0.13);
}

/* 折叠态的白天版。折叠时图标和缩写标签原来写死 #fff，浅底上直接消失；
   已改成跟 .nav-item 的颜色走（各主题只在一处定义）。剩下这两处是折叠态独有的：
   footer 那层深紫渐变，和 nav-group 之间的分隔。 */
html[data-theme="day"] body.sidebar-collapsed .sidebar-footer,
html[data-theme="day"] .sidebar-collapsed .sidebar-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 28%);
  border-top-color: #ece7f7;
}

html[data-theme="day"] .sidebar-collapsed .nav-item.active,
html[data-theme="day"] .sidebar-collapsed .nav-subitem.active {
  color: #6d4da5;
  background: color-mix(in srgb, #8f5cff 12%, #ffffff);
}

html[data-theme="day"] .sidebar-collapsed .nav-subitem { color: #6f7789; }

/* .text-button 的基础色是 #e5d7ff——深底上的浅紫。白天版从没覆盖过它，
   于是全站 54 处「查看全部 / 写评价 ›」在浅底上是 1.36:1，等于隐形。
   这不是首页独有的问题，所以改在全局，不在 #dashboard 里补。 */
html[data-theme="day"] .text-button {
  color: #6d4da5;
  font-weight: 600;
}

html[data-theme="day"] .text-button:hover { color: #52357f; text-decoration: underline; }
html[data-theme="day"] .text-button.danger { color: #d64f78; }
html[data-theme="day"] .text-button.danger:hover { color: #b53a60; }

/* 标题右侧那颗「全部 ›」是次要动作，不该和 h2 一个字号。 */
#dashboard .section-heading .text-button { font-size: 12.5px; }

/* 全局 h1/h2 的基础色是 #fff（深色版留下的），白天版只覆盖了 topbar 那一处。
   于是任何没被面板规则兜住的标题，在浅底上就是白字——Campaign 页那个 h2 实测 1.09:1。
   在这里给个白天版的兜底；面板里已有的更高优先级规则不受影响。
   h1 那层紫色外发光也一并去掉：它是为深底设计的，浅底上只会把字糊掉。 */
html[data-theme="day"] h1,
html[data-theme="day"] h2 {
  color: #283143;
  text-shadow: none;
}

/* .ghost-button 同 .text-button：基础色是深底上的浅紫，浅底上 1.26:1。 */
html[data-theme="day"] .ghost-button {
  border: 1px solid #e1dcf0;
  background: #fbfaff;
  color: #52357f;
}

html[data-theme="day"] .ghost-button:hover:not(:disabled) { border-color: #8f5cff; background: #fff; }

/* 禁用态要看得出"不能点"，但不能看不见写的是什么。 */
html[data-theme="day"] .ghost-button:disabled,
html[data-theme="day"] .primary-button:disabled {
  background: #f1f2f5;
  border-color: #e5e7ec;
  color: #7b8494;
  cursor: not-allowed;
}

/* 禁用态的报告按钮实测 2.1:1——写的是什么都看不清。
   禁用要传达的是"现在不能点"，不是"这行字不重要"。 */
html[data-theme="day"] .primary-button.campaign-audit-trigger:disabled,
html[data-theme="day"] .campaign-audit-card-actions .primary-button:disabled {
  background: #f1f2f5;
  border: 1px solid #e5e7ec;
  color: #6c7686;
  cursor: not-allowed;
}

/* 漏斗里 0 的那几段：压暗到 2.28 还是偏淡，再抬一档到 3 以上。 */
#dashboard .today-funnel-step.is-zero .today-funnel-count { color: #848da0; }

/* ══════════════════════════════════════════════════════════════════════
   全站统一页头 .page-head
   ══════════════════════════════════════════════════════════════════════
   改造前有 5 套页头写法：
     A workspace-panel + section-heading   similarity / favorites / outreach / contracts
     B workspace-panel + 自定义 hero        dashboard / attribution
     C 裸头 flex 行                          creators / campaigns
     D 自定义 shell + 色带式页头              settings / calendar
     E 营销式大 hero                          discovery / zerendo
   同一层级的页面标题字号跨了 18px → 54px，视觉重量差 3 倍；
   eyebrow 有三套实现；右上角动作有五套 class 体系。
   这就是「像拼凑起来的」的来源——不是配色，是同一个东西被写了五遍。

   基准取「智能搜索」页（用户指定）：裸页头 + 一叠干净的圆角卡。
   唯一从基准改动的数值：标题上限 42px → 38px。
   42px 在智能搜索那种很空的页面上成立，但在网红名单这类密集页面上会压住内容。
   配色一个都没动。 */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  max-width: 1180px;
  margin-bottom: 18px;
}

.page-head-copy { min-width: 0; }

.page-head .eyebrow {
  margin: 0 0 5px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.page-head h1,
.page-head h2 {
  margin: 0;
  /* 1440 下 27px（原 37px）。上限 28 是为了超宽屏也不膨胀——
     标题变大并不会让页面更清楚，只会让它更吵。 */
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.011em;
  text-shadow: none;
}

.page-head-sub {
  margin: 7px 0 0;
  max-width: 62ch;          /* 副标题超过这个长度就该拆成两句，不该拉成一条横幅 */
  color: #8995aa;
  font-size: 14.5px;
  /* 常规字重。副标题是补充说明，不是第二个重点——
     700 会和标题抢重音，一句话里两个重点等于没有重点。 */
  font-weight: 400;
  line-height: 1.5;
}

/* 右上角的动作。原来五套 class 各自定位，这里只管排布，
   按钮本身仍用既有的 .primary-button / .ghost-button，不新增按钮样式。 */
.page-head-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 日历页头右侧：‹ 2026年8月 › 今天 [国家] [+新建]。
   月份是工具条状态不是页面标题，字号压到 17px，
   tabular-nums 让翻月时"8月"换"12月"不跳宽。 */
.calendar-head-actions { align-items: center; }
#calendar .page-head { margin-bottom: 8px; }
#calendar .calendar-page { gap: 12px; }
.calendar-month-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.calendar-month-switch h2 {
  margin: 0;
  min-width: 92px;
  text-align: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.calendar-head-actions .commerce-filter-control select { width: auto; }

/* 右侧的小泽泽气泡等辅助块。三个视图原来各写一套 class，
   这里统一给宽度约束，内部样式保持各自的。 */
.page-head-aside {
  flex: none;
  width: min(380px, 38%);
}

@media (max-width: 900px) {
  .page-head { flex-direction: column; gap: 12px; }
  .page-head-aside { width: 100%; }
}

/* ── 设置页：四块摊平后各自成卡，卡的规格照基准页的 .search-control-card ── */
.settings-shell > .settings-layout .settings-panel {
  display: block;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #e9e4f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--elev-2);
}

.settings-shell > .settings-layout .settings-panel:last-child { margin-bottom: 0; }

html[data-theme="day"] .page-head-sub { color: #737d8e; }

/* zerendo 保留自己的 grid 版式（见 index.html 里的说明），
   只把标题字号拉到和全站一致——统一的是排版尺度，不是布局。 */
#zerendo .zr-speech h2 { font-size: var(--type-page-title); }

/* 顶栏那个 #viewTitle 原来是全站唯一的页面标题（12 个视图自己都只有 h2）。
   现在每个视图都有了自己的 h1，它就成了同一句话说两遍——
   实测一页出现两个可见 h1、文案完全相同。
   元素留着（JS 一直在给它写 textContent），只是不再显示；
   顶栏的下边框和内边距一并去掉，否则会剩一条空线。 */
.main > .topbar h1 { display: none; }

.main > .topbar {
  padding: 0;
  border-bottom: 0;
}

/* ── 多选筛选（语言 / 类目）───────────────────────────────────────
   真相源是隐藏的 <select multiple>，这里只是它的显示层。
   配色一律沿用现有 token，没有新增颜色。 */
.chip-select { position: relative; }

.chip-select-field {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f6f4fb;   /* 内层卡：下沉面。写死不用 --surface-soft——
     那个 token 只在 day 主题里定义，夜间未定义会回落成近乎透明的值，
     压在硬编码的白卡上文字掉到 2.6:1（实测）。这几页本就整页钉浅色。 */
  cursor: pointer;
  text-align: left;
}

.chip-select-field:hover { border-color: #cfc3ea; }
.chip-select-field[aria-expanded="true"] { border-color: #8f5cff; }
.chip-select-field:focus-visible { outline: 2px solid #8f5cff; outline-offset: 2px; }

.chip-select-placeholder { flex: 1; color: #a2aabc; font-size: 15px; }
.chip-select-caret { margin-left: auto; color: #9098a6; font-size: 13px; }

.chip-select-field .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: #f2eefc;
  color: #4b3d6b;
  font-size: 13px;
  white-space: nowrap;
}

.chip-select-field .chip i {
  font-style: normal;
  color: #8a7fb0;
  cursor: pointer;
  line-height: 1;
}

.chip-select-field .chip i:hover { color: #5b32b8; }
.chip-select-field .chip-more { background: #f1f2f5; color: #6c7686; }

.chip-select-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 240px;
  padding: 10px;
  border: 1px solid #e5e7ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--elev-3);
}

.chip-select-search {
  width: 100%;
  min-height: 38px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid #e5e7ec;
  border-radius: 10px;
  font-size: 14px;
}

.chip-select-search:focus { outline: none; border-color: #8f5cff; }

/* 列表限高：类目有几十个，不限高会顶穿视口，
   而下面还有「开始搜索」按钮需要够得着。 */
.chip-select-options { max-height: 260px; overflow-y: auto; }

.chip-select-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 9px;
  color: #283143;
  font-size: 14px;
  cursor: pointer;
}

.chip-select-option:hover { background: #faf8ff; }
.chip-select-option input { width: 16px; height: 16px; accent-color: #6d4da5; }
.chip-select-empty { margin: 0; padding: 14px 8px; color: #9098a6; font-size: 13px; text-align: center; }

/* ── chip-select 内部的 span 不是字段名 ──────────────────────────
   这几个 span 显示的是「当前值」「候选项」「已选标签」，
   但它们长在 <label> 里，于是被两条「字段名」规则一起捡走了体裁：
   `label span`(873) 的 uppercase + 700，和
   `#discovery label span`(2090) 的 #7d8798 + 12px 灰。
   中文没有大小写、12px 和 15px 的差别也不刺眼，所以这两条错配
   从来没显形过；一进英文界面立刻变成 ALL REGIONS / ALL LANGUAGES
   在吼，下拉选项则缩成灰色小字，看着像禁用态。
   这跟 7616 要把 `.project-select-row` 排除掉是同一类问题：
   span 长在 label 里，不等于它就是这个 label 的字段名。

   选择器带 #discovery 是为了压过 2090 的 ID——不加压不过去；
   chip-select 目前只用在这一页（app.js 三处 setupChipSelect 全在智能搜索）。
   占位色从 #7d8798 换成 #5b6376：前者压在 #f6f4fb 上只有 3.32:1，
   15px 正文过不了 AA；#5b6376 是文件里已有的值（日历弹窗同款），5.51:1。
   「All regions」是这个控件当前真正生效的值，不是禁用态，就该读得清。 */
#discovery .chip-select-placeholder {
  margin-bottom: 0;
  color: #5b6376;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#discovery .chip-select-option > span {
  margin-bottom: 0;
  color: #283143;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#discovery .chip-select-field .chip {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* 「⌄」也是 label 里的 span：字段名规则的 margin-bottom:4px 会把它顶偏 */
#discovery .chip-select-caret {
  margin-bottom: 0;
  color: #9098a6;
  font-weight: 500;
}

/* ── 智能搜索表单：按参考稿的节奏 ────────────────────────────────
   三列一行、标签在上、关键词整宽、主按钮整宽。
   平台 logo 标签保持原样不动（用户明确要求保留真实 Logo）。 */
#discovery .smart-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 18px 20px;
}

#discovery .smart-filter-grid .discovery-keyword-field { grid-column: 1 / -1; }

/* 粉丝数量：两个数字输入框加一个箭头。
   原来是 5 个预设档位，而「1–5 万」这种真实需求跨了两档，选哪个都不对。 */
#discovery .range-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

#discovery .range-inputs > i {
  color: #a2aabc;
  font-size: 15px;
  font-style: normal;
}

/* number 输入框的上下箭头在这里只会添乱：区间是打字填的，不是点出来的 */
#discovery .range-inputs input::-webkit-outer-spin-button,
#discovery .range-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#discovery .range-inputs input { -moz-appearance: textfield; text-align: left; }

/* 额度行：搜索是花钱的动作，按钮上方就该看得见还剩多少、这次花几次 */
#discovery .discovery-meta {
  margin: 16px 0 12px;
  color: #8a93a3;
  font-size: 12.5px;
  text-align: center;
}

/* 主按钮整宽。原来它和「按账号直查」并排，两个同宽的按钮等于没有主次——
   而「开始搜索」是这一页唯一要人点的东西。 */
#discovery .discovery-search-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  /* 基础规则里有一条 align-self: end——那是它还在 .smart-filter-grid 里
     当单元格时写的，用来和同排输入框的底部对齐。
     现在它是 .search-control-card（列向 flex）的直接子元素，
     align-self: end 的含义变成了「交叉轴末端」= 靠右且收缩到内容宽，
     于是整宽按钮实测只有 90px。规则写死了它当时所在的上下文，
     元素一搬家就坏——和之前那条 > :first-child 是同一类问题。 */
  align-self: stretch;
  width: 100%;
}

#discovery .discovery-search-actions .smart-search-button {
  width: 100%;
  /* height: auto 不能省：.smart-search-button 有两条规则，后一条写死了
     height: 38px。min-height 压不过显式的 height——只改 min-height 的话
     按钮会一直是 38 高，而 CSS 不会有任何报错提示你这一条没生效。 */
  height: auto;
  min-height: 56px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
}

#discovery .discovery-search-actions .handle-lookup-button {
  justify-self: center;
  border: 0;
  background: none;
  color: #6d4da5;
  font-size: 13px;
  cursor: pointer;
}

#discovery .discovery-search-actions .handle-lookup-button:hover { text-decoration: underline; }

@media (max-width: 900px) {
  #discovery .smart-filter-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   全局顶栏 + 侧栏调整（照样机框架）
   ══════════════════════════════════════════════════════════════════════
   品牌从侧栏搬进顶栏，侧栏只剩导航；收缩按钮挪到侧栏底部。
   顶栏横跨整个视口（含侧栏上方）——这正是样机和旧版最大的骨架差别。 */
.app-shell {
  grid-template-rows: auto minmax(0, 1fr);
}

.global-topbar {
  position: sticky;
  z-index: 60;
  top: 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 20px;
  background: rgba(14, 8, 32, 0.96);
  border-bottom: 1px solid rgba(226, 210, 255, 0.14);
}

.global-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.global-topbar-brand .brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
}

.global-topbar-name { display: grid; line-height: 1.15; }
.global-topbar-name strong { color: #fff; font-size: 15px; letter-spacing: 0.01em; }
.global-topbar-name span { color: rgba(226, 216, 255, 0.6); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* 当前 Campaign 药丸：读 rememberedCampaignId()，和智能搜索页同一个记忆 */
.global-topbar-campaign {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 380px;
  padding: 7px 14px;
  border: 1px solid rgba(226, 210, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #efe9fc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.global-topbar-campaign-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-topbar-campaign > span:last-child { color: rgba(226, 216, 255, 0.55); }

.global-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.global-topbar-todo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(226, 210, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #efe9fc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.global-topbar-todo > b {
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ef6b91;
  color: #fff;
  font-size: 11.5px;
  text-align: center;
}

/* 侧栏贴在顶栏下面。原来 top:0 / height:100vh——顶栏占了第一行之后，
   不改这两个值的话侧栏会钻到顶栏底下、底部被切掉 58px。 */
.sidebar {
  top: 58px;
  height: calc(100vh - 58px);
}

/* 底部收缩按钮：结构照 footer-action，旧的圆形小按钮样式全部不再适用 */
.sidebar-footer .sidebar-toggle {
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  background: transparent;
}

body.sidebar-collapsed .sidebar-footer .sidebar-toggle {
  width: 66px;
  height: auto;
  margin: 0;
}

/* ── 白天版 ── */
html[data-theme="day"] .global-topbar {
  background: #ffffff;
  border-bottom-color: #e9e4f5;
}

html[data-theme="day"] .global-topbar-name strong { color: #2a2140; }
html[data-theme="day"] .global-topbar-name span { color: #8a8299; }

html[data-theme="day"] .global-topbar-campaign {
  border-color: #e1dcf0;
  background: #f7f4fd;
  color: #4b3d6b;
}

html[data-theme="day"] .global-topbar-campaign:hover { border-color: #8f5cff; background: #fff; }
html[data-theme="day"] .global-topbar-campaign > span:last-child { color: #9a92ad; }

html[data-theme="day"] .global-topbar-todo {
  border-color: #e1dcf0;
  background: #fff;
  color: #4b3d6b;
}

html[data-theme="day"] .global-topbar-todo:hover { border-color: #8f5cff; color: #6d4da5; }
html[data-theme="day"] .global-topbar-todo > b { background: #ef6b91; color: #fff; }

@media (max-width: 900px) {
  .global-topbar { flex-wrap: wrap; padding: 8px 14px; }
  .global-topbar-name span { display: none; }
  .global-topbar-campaign { max-width: 220px; }
  /* 窄屏下顶栏会折行变高，侧栏的固定 58px 偏移不再成立；
     放弃 sticky 侧栏，跟着文档流走。 */
  .sidebar { top: 0; height: auto; }
}

/* 展开态的导航图标（照样机）。图标一直都在每个按钮的 data-icon 里，
   原来只有收起成窄栏时才画出来，展开后就只剩文字——样机是两种状态都有。
   固定 20px 宽让 12 个图标竖着对成一列，文字左沿才齐。 */
.nav-item::before {
  content: attr(data-icon);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.72;
}

.nav-item.active::before { opacity: 1; }

/* 收起态维持原样：那套自己管大小和布局，这里只把展开态引入的两个值还原 */
body.sidebar-collapsed .nav-item::before { width: auto; opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   右侧小泽泽待处理面板（样机的 Companion 栏）
   ══════════════════════════════════════════════════════════════════════
   .app-shell 的第三列。列宽写 auto：面板 hidden 时列自动塌成 0，
   不用为开/合维护两套栅格模板。 */
.app-shell {
  grid-template-columns: 232px minmax(0, 1fr) auto;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 96px minmax(0, 1fr) auto;
}

/* 三个区域的格子全部指名道姓。之前只给面板写了 grid-row: 2、列让它自动排——
   但 grid 自动布局会先安置带显式行号的元素，面板抢走了第 1 列，
   侧栏被挤成 37px。自动排布 + 部分显式定位就是会出这种事，干脆全显式。 */
.sidebar { grid-column: 1; grid-row: 2; }
.main { grid-column: 2; grid-row: 2; }

/* [hidden] 只是浏览器默认样式里的 display:none，优先级低到任何显式
   display 都压得过它——下面这行 display:flex 就把 hidden 悄悄打败了，
   面板"合上"之后还占着 304px 的列。必须自己把 hidden 写回来。 */
.zr-companion[hidden] { display: none; }

.zr-companion {
  grid-column: 3;
  grid-row: 2;
  position: sticky;
  top: 58px;
  display: flex;
  flex-direction: column;
  width: 304px;
  height: calc(100vh - 58px);
  overflow: hidden;
  padding: 14px 0 0;
  background: rgba(14, 8, 32, 0.96);
  border-left: 1px solid rgba(226, 210, 255, 0.14);
}

.zr-companion-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 12px;
}

.zr-companion-head img { flex: none; border-radius: 12px; background: #fff; object-fit: contain; }
.zr-companion-title { display: grid; min-width: 0; line-height: 1.3; }
.zr-companion-title strong { color: #fff; font-size: 14px; }
.zr-companion-title span { color: rgba(226, 216, 255, 0.6); font-size: 12px; }

.zr-companion-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(226, 210, 255, 0.24);
  border-radius: 9px;
  background: transparent;
  color: #efe9fc;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.zr-companion-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
  overscroll-behavior: contain;
}

.zr-companion-body { display: grid; }

.zr-companion-summary {
  --summary-tone: #8f5cff;
  padding: 10px 0;
  border-bottom: 1px solid rgba(226, 210, 255, 0.12);
}

.zr-companion-summary.tone-risk { --summary-tone: #ba6f86; }
.zr-companion-summary.tone-warn { --summary-tone: #9476b8; }
.zr-companion-summary.tone-ok   { --summary-tone: #66927e; }

.zr-companion-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}

.zr-companion-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--summary-tone); }
.zr-companion-summary-head strong { color: #efe9fc; font-size: 13px; font-weight: 650; }
.zr-companion-summary-head b { color: rgba(226, 216, 255, 0.66); font-size: 12px; font-variant-numeric: tabular-nums; }

.zr-companion-summary-head .text-button { margin-left: auto; padding: 2px 0; font-size: 11.5px; }

.zr-companion-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 8px;
  width: 100%;
  padding: 5px 0 5px 12px;
  border: 0;
  border-bottom: 1px solid rgba(226, 210, 255, 0.1);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.zr-companion-row:last-child { border-bottom: 0; }
.zr-companion-row strong { overflow: hidden; color: #e6deef; font-size: 12.5px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.zr-companion-row time { color: rgba(226, 216, 255, 0.62); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zr-companion-row small { grid-column: 1 / -1; color: rgba(226, 216, 255, 0.55); font-size: 11.5px; }

.zr-companion-empty { margin: 2px 0 0; color: rgba(226, 216, 255, 0.5); font-size: 12px; }
.zr-companion-more { margin: 6px 0 0; color: rgba(226, 216, 255, 0.6); font-size: 11.5px; }

.zr-companion-rest { padding: 10px 0 12px; }
.zr-companion-rest p { margin: 0; color: rgba(226, 216, 255, 0.66); font-size: 12.5px; line-height: 1.5; }

.zr-planner-chat { margin-top: 14px; padding-top: 4px; }
.zr-planner-chat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.zr-planner-chat-head > div { display: grid; gap: 2px; min-width: 0; }
.zr-planner-kicker { color: rgba(205, 191, 228, 0.52); font-size: 9px; font-weight: 750; letter-spacing: 0.09em; line-height: 1.2; }
.zr-planner-chat-head h2 { margin: 0; color: #f3eef8; font-size: 13px; font-weight: 680; line-height: 1.35; }
.zr-planner-chat-head .text-button { flex: none; padding: 0 0 1px; color: rgba(226, 216, 255, 0.58); font-size: 10.5px; }
.zr-planner-chat-head .text-button:disabled { opacity: 0.45; cursor: default; }

.zr-planner-thread { display: grid; gap: 10px; margin-top: 10px; }
.zr-planner-messages { display: grid; gap: 10px; }
.zr-planner-intro,
.zr-planner-message { min-width: 0; overflow-wrap: anywhere; }
.zr-planner-intro,
.zr-planner-message.is-assistant {
  position: relative;
  justify-self: start;
  width: calc(100% - 32px);
  margin-left: 32px;
  padding: 9px 10px;
  border-radius: 4px 12px 12px;
  background: rgba(246, 244, 251, 0.1);
}
.zr-planner-intro::before,
.zr-planner-message.is-assistant::before {
  position: absolute;
  top: 0;
  left: -32px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #fff url("./assets/zerendo-tip.png") center / cover no-repeat;
  content: "";
}
#zrPlannerMessages > .zr-planner-message.is-assistant + .zr-planner-message.is-assistant::before,
#zrPlannerMessages:has(.zr-planner-message.is-summary:last-child) ~ #agentAdviceResult .zr-planner-message.is-assistant::before { display: none; }
.zr-planner-speaker { display: block; margin-bottom: 3px; color: rgba(226, 216, 255, 0.62); font-size: 10.5px; font-weight: 700; }
.zr-planner-intro p,
.zr-planner-message p { margin: 0; color: #f4eff9; font-size: 13px; line-height: 1.5; }
.zr-planner-message.is-user { justify-self: end; max-width: 84%; padding: 9px 10px; border-radius: 12px 4px 12px 12px; background: rgba(143, 92, 255, 0.22); }
.zr-planner-message.is-user p { color: #fff; }
.zr-planner-message.is-invalid p { color: #f0e7f7; }
.zr-planner-analyze { margin-top: 7px; padding: 7px 9px; border: 1px solid rgba(199, 179, 232, 0.26); border-radius: 9px; background: rgba(199, 179, 232, 0.09); color: #eee7f8; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.zr-planner-analyze:hover,
.zr-planner-analyze:focus-visible { border-color: rgba(199, 179, 232, 0.48); outline: none; }
.zr-planner-analyze:disabled { opacity: 0.55; cursor: wait; }

.zr-planner-chips { display: flex; flex-wrap: nowrap; gap: 5px; margin-left: 32px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.zr-planner-chips::-webkit-scrollbar { display: none; }
.zr-planner-chips[hidden] { display: none; }
.zr-planner-chips button { display: inline-flex; flex: none; align-items: center; max-width: 190px; padding: 4px 7px; border: 0; border-radius: 999px; background: rgba(198, 181, 226, 0.14); color: rgba(242, 236, 248, 0.88); font: inherit; font-size: 10.5px; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.zr-planner-chips button span { margin-right: 3px; color: rgba(226, 216, 255, 0.54); }
.zr-planner-chips button b { margin-left: 3px; color: #7fb498; font-size: 10px; }
.zr-planner-chips button:hover,
.zr-planner-chips button:focus-visible { background: rgba(198, 181, 226, 0.23); outline: none; }

.zr-planner-composer {
  display: block;
  flex: none;
  padding: 6px 12px 10px;
  border-top: 1px solid rgba(226, 210, 255, 0.14);
  background: rgba(14, 8, 32, 0.98);
}
.zr-planner-disclaimer { margin: 0 0 5px; overflow: hidden; color: rgba(226, 216, 255, 0.48); font-size: 11px; letter-spacing: -0.02em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.zr-planner-composer-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: end; gap: 7px; }
.zr-planner-composer textarea { width: 100%; min-height: 32px; max-height: 82px; resize: none; padding: 7px 11px; border: 1px solid rgba(226, 210, 255, 0.18); border-radius: 17px; background: rgba(255, 255, 255, 0.06); color: #f3eef8; font: inherit; font-size: 12px; line-height: 1.4; overflow-y: auto; }
.zr-planner-composer textarea::placeholder { color: rgba(226, 216, 255, 0.42); }
.zr-planner-composer textarea:focus { border-color: rgba(190, 163, 232, 0.52); outline: none; }
.zr-planner-composer button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #6d4da5; color: #fff; cursor: pointer; }
.zr-planner-composer button:hover,
.zr-planner-composer button:focus-visible { background: #5d3f91; outline: none; }
.zr-planner-composer .material-icons-round { font-size: 17px; }

.zr-planner-support-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 5px 7px; border: 1px solid rgba(199, 179, 232, 0.24); border-radius: 8px; color: #eee7f8; font-size: 11px; font-weight: 650; text-decoration: none; }
.zr-planner-support-link:hover,
.zr-planner-support-link:focus-visible { border-color: rgba(199, 179, 232, 0.48); color: #fff; outline: none; }
.zr-planner-support-link .material-icons-round { flex: none; font-size: 12px; }
.zr-planner-transient { display: grid; gap: 10px; }
.zr-planner-transient[hidden] { display: none; }

.zr-planner-thread .agent-advice-result { display: grid; gap: 9px; margin: 0; }
.zr-planner-thread .agent-advice-result[hidden] { display: none; }
.zr-planner-thread .agent-advice-result-head { display: grid; gap: 5px; margin: 0; padding: 0 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.zr-planner-thread .agent-advice-result-head > div { display: grid; gap: 4px; }
.zr-planner-thread .agent-advice-result-head time { color: rgba(226, 216, 255, 0.56); font-size: 10px; }
.zr-planner-thread .agent-advice-layout { grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 7px; }
.zr-planner-thread .agent-advice-priority,
.zr-planner-thread .agent-advice-compliance { border: 0; border-radius: 0; background: transparent; }
.zr-planner-thread .agent-advice-priority > summary,
.zr-planner-thread .agent-advice-compliance > summary,
.zr-planner-thread .agent-advice-layout h3 { color: #f2edf8; }
.zr-planner-thread .agent-advice-action { padding: 7px; background: rgba(255, 255, 255, 0.05); }
.zr-planner-thread .agent-advice-action strong,
.zr-planner-thread .agent-advice-action p,
.zr-planner-thread .agent-advice-compliance > ul,
.zr-planner-thread .agent-advice-compliance > p { color: rgba(244, 239, 249, 0.84); }
.zr-planner-thread .agent-advice-risks,
.zr-planner-thread .agent-advice-questions,
.zr-planner-thread .agent-advice-footnote { margin-top: 8px; }
.zr-planner-thread .agent-advice-loading { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0; border: 0; background: transparent; }
.zr-planner-thread .agent-advice-loading strong { color: #e9e2f2; font-size: 12px; }
.zr-planner-thread .agent-advice-error { padding: 0; border: 0; background: transparent; }

.zr-planner-thread .campaign-planner-draft-actions { display: flex; width: calc(100% - 32px); flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 32px; padding: 9px 10px; border: 0; border-radius: 4px 12px 12px; background: rgba(246, 244, 251, 0.1); }
.zr-planner-thread .campaign-planner-draft-actions[hidden] { display: none; }
.zr-planner-thread .campaign-planner-draft-actions .primary-button,
.zr-planner-thread .campaign-planner-draft-actions .text-button { min-height: 30px; padding: 6px 8px; font-size: 10.5px; }

/* ── 白天版 ── */
html[data-theme="day"] .zr-companion { background: #ffffff; border-left-color: #e9e4f5; }
html[data-theme="day"] .zr-companion-title strong { color: #2a2140; }
html[data-theme="day"] .zr-companion-title span { color: #8a8299; }
html[data-theme="day"] .zr-companion-close { border-color: #e1dcf0; color: #6d4da5; background: #fbfaff; }
html[data-theme="day"] .zr-companion-close:hover { border-color: #8f5cff; }
html[data-theme="day"] .zr-companion-summary { border-bottom-color: #f0edf5; }
html[data-theme="day"] .zr-companion-summary-head strong { color: #283143; }
html[data-theme="day"] .zr-companion-summary-head b { color: #8a93a3; }
html[data-theme="day"] .zr-companion-row { border-bottom-color: #f0f2f6; }
html[data-theme="day"] .zr-companion-row:hover strong { color: #6d4da5; }
html[data-theme="day"] .zr-companion-row strong { color: #283143; }
html[data-theme="day"] .zr-companion-row time { color: #9098a6; }
html[data-theme="day"] .zr-companion-row small { color: #8a93a3; }
html[data-theme="day"] .zr-companion-empty { color: #9098a6; }
html[data-theme="day"] .zr-companion-more { color: #8a93a3; }
html[data-theme="day"] .zr-companion-rest p { color: #737d8e; }
html[data-theme="day"] .zr-planner-kicker { color: #9b91a6; }
html[data-theme="day"] .zr-planner-chat-head h2 { color: #30283b; }
html[data-theme="day"] .zr-planner-chat-head .text-button,
html[data-theme="day"] .zr-planner-speaker { color: #8d8398; }
html[data-theme="day"] .zr-planner-intro,
html[data-theme="day"] .zr-planner-message.is-assistant { background: #f6f4fb; }
html[data-theme="day"] .zr-planner-intro p,
html[data-theme="day"] .zr-planner-message p { color: #3e3549; }
html[data-theme="day"] .zr-planner-message.is-user { background: #f2eefc; }
html[data-theme="day"] .zr-planner-message.is-user p { color: #3e3151; }
html[data-theme="day"] .zr-planner-message.is-invalid p { color: #7a4a63; }
html[data-theme="day"] .zr-planner-analyze { border-color: #dcd2e8; background: #f7f3fb; color: #5d3f91; }
html[data-theme="day"] .zr-planner-chips button { background: #f2eefc; color: #5c5365; }
html[data-theme="day"] .zr-planner-chips button span { color: #968c9f; }
html[data-theme="day"] .zr-planner-composer { border-top-color: #e9e4ef; background: #fff; }
html[data-theme="day"] .zr-planner-disclaimer { color: #8d8497; }
html[data-theme="day"] .zr-planner-support-link { border-color: #dcd2e8; color: #5f438c; }
html[data-theme="day"] .zr-planner-composer textarea { border-color: #ddd6e7; background: #fbfafc; color: #30283b; }
html[data-theme="day"] .zr-planner-composer textarea::placeholder { color: #9c93a5; }
html[data-theme="day"] .zr-planner-thread .agent-advice-result-head time { color: #8a8294; }
html[data-theme="day"] .zr-planner-thread .agent-advice-priority > summary,
html[data-theme="day"] .zr-planner-thread .agent-advice-compliance > summary,
html[data-theme="day"] .zr-planner-thread .agent-advice-layout h3 { color: #3e3549; }
html[data-theme="day"] .zr-planner-thread .agent-advice-action { background: rgba(109, 77, 165, 0.05); }
html[data-theme="day"] .zr-planner-thread .agent-advice-action strong,
html[data-theme="day"] .zr-planner-thread .agent-advice-action p,
html[data-theme="day"] .zr-planner-thread .agent-advice-compliance > ul,
html[data-theme="day"] .zr-planner-thread .agent-advice-compliance > p { color: #5e5668; }
html[data-theme="day"] .zr-planner-thread .agent-advice-loading strong { color: #3e3549; }
html[data-theme="day"] .zr-planner-thread .campaign-planner-draft-actions { background: #f6f4fb; }

/* 窄屏改成覆盖式抽屉：内容本来就挤，再挤掉 304px 就没法用了 */
@media (max-width: 1180px) {
  .zr-companion {
    position: fixed;
    z-index: 80;
    top: 58px;
    right: 0;
    bottom: 0;
    height: auto;
    box-shadow: -18px 0 48px rgba(20, 10, 40, 0.18);
  }
}

/* ── 在库相似并入小泽泽找人页 ── */
.zr-library-panel { margin-top: 16px; }

.zr-library-head { margin-bottom: 12px; }
.zr-library-head h2 { margin: 0 0 4px; font-size: 18px; }
.zr-library-head p { margin: 0; color: var(--zr-muted, #746f7c); font-size: 13px; }

.zr-library-sync {
  margin-top: 6px !important;
  color: #6d4da5 !important;
  font-weight: 600;
}

/* 并入后旧页级规则不再适用的部分：块内的 workspace-panel 去掉双重卡壳 */
#zerendo .similarity-page-panel {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════════════
   主栏容器查询
   ══════════════════════════════════════════════════════════════════════
   右侧面板打开后，主栏在 1240 视口下只剩 664px——比手机横屏还窄。
   而这三个页面所有的 @media 断点都是按**视口**写的：视口 1240 看着很宽，
   断点一个都不触发，于是页面按"宽屏"排版挤在一个窄栏里。
   容器查询让它们按自己真正的可用宽度响应，这才是根因所在。

   .main 里没有 position:fixed 元素、所有弹窗都在 .main 之外
   （实测确认），所以 container-type 引入的包含块变化没有波及面。 */
.main {
  container-type: inline-size;
  container-name: maincol;
}

#creators .page-head h1 {
  color: #283143;
  font-size: var(--type-page-title, clamp(23px, 1.85vw, 28px));
}

/* 主栏窄于 720px（右面板打开时的常见状态）：单列优先 */
@container maincol (max-width: 720px) {
  #discovery .smart-filter-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  #discovery .donut-layout,
  #discovery .platform-tabs { grid-template-columns: minmax(0, 1fr); }

  #zerendo .zr-hero { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  #zerendo .similarity-controls { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  #zerendo .similarity-controls .primary-button { grid-column: 1 / -1; margin-top: 0; }

  #favorites .favorites-controls { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* 主栏窄于 560px：所有多列一律拉直，横向滚动交给各自的 table-wrap */
@container maincol (max-width: 560px) {
  #discovery .smart-filter-grid,
  #zerendo .similarity-controls,
  #favorites .favorites-controls { grid-template-columns: minmax(0, 1fr); }

  #zerendo .zr-hero { grid-template-columns: minmax(0, 1fr); }
  #zerendo .zr-hero-character { justify-self: start; width: 88px; }
  #zerendo .zr-platform-options { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   窄主栏下的三处收尾（右侧面板打开后暴露出来的）
   ══════════════════════════════════════════════════════════════════════
   这三处我第一轮的检查都没抓到——判据只看「越过视图边界」和「文字竖排」，
   而它们分别是：单元格内文字溢出、嵌套双滚动条、图挤掉文案。
   记在这里，下次写检查脚本要覆盖这三类。 */

/* ① 平台选项：格子宽度够了，但固定开销吃掉太多——
   右内边距 42px 是给右上角勾选标记留的位置，logo 40px，
   剩给文案的只有 77px，而「Instagram」需要 88px，文字直接溢出格子。
   窄栏下把勾选标记缩小并收回内边距，文案就够了。 */
@container maincol (max-width: 900px) {
  #zerendo .zr-platform-required .zr-platform-option { padding: 14px 14px 14px 14px; }
  #zerendo .zr-platform-option .zr-platform-check {
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  #zerendo .zr-platform-copy strong { font-size: 13.5px; }

  #creators .creator-list-panel,
  #creators .creator-list-card { padding: 16px; }

  #creators .creator-row-content .creator-content-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Global restraint pass: keep navigation readable and reserve color for actions. */
.nav-item {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.zr-nav-ai > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-count-badge,
.nav-lock,
.zr-nav-ai-badge {
  flex: 0 0 auto;
}

.zr-nav-ai::after { display: none; }

.zr-nav-ai-badge {
  border-color: transparent;
  background: #7650b8;
}

.primary-button {
  border-color: #6847c8;
  background: #6847c8;
  box-shadow: none;
}

.primary-button:hover:not(:disabled) {
  border-color: #5939b2;
  background: #5939b2;
  box-shadow: none;
  transform: none;
}

.nav-alert-dot { box-shadow: none; }

/* ② 候选名单曾经有嵌套双滚动条，当时的解法是让表格按 max-content 撑开，
   把两条滚动条并成一条。但那只是把「滚两次」改成「滚一次」，
   横向滚动本身还在——她还是得往右划才够得到操作按钮。
   现在网格改成流体五列（见 13716 那条），表格跟着容器缩，
   一条滚动条也不需要了。max-content 必须一起撤掉：留着它，
   流体列会被内容重新撑宽，改了等于没改。 */
#favorites .favorite-content-table {
  min-width: 0;
}

/* ③ 小泽泽气泡：aside 是 min(380px, 38%)，主栏一窄它跟着缩到 267px，
   减去给插画留的 144px 右内边距，文案只剩 99px——折成 9 行，盒子撑到 208px 高。
   窄栏下让插画退场，把宽度还给文字：这块的价值是那句建议，不是那张图。 */
@container maincol (max-width: 980px) {
  #favorites .favorites-guide { padding: 14px 18px; min-height: 0; }
  #favorites .favorites-guide img { display: none; }
  #similarity .similarity-guide img,
  #zerendo .similarity-guide img { display: none; }

  #creators .page-head {
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }

  #creators .page-head h1 { white-space: nowrap; }

  #creators .creators-head-actions {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  #creators .list-actions { max-width: 100%; }

  #creators .filter-summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  #creators .filter-summary .list-filters {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    width: 100%;
  }

  #creators .filter-reset-link {
    justify-content: center;
    min-height: 34px;
  }

  #creators .creator-row-main {
    grid-template-columns: minmax(0, 1fr);
  }

  #creators .creator-list-card .creator-row-actions {
    width: 100%;
    grid-column: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(36px, auto);
  }

  #creators .creator-more-menu { grid-column: auto; }

  #campaigns .formal-campaign-card {
    grid-template-columns: max-content minmax(0, 1fr) minmax(245px, auto);
    grid-template-areas:
      "status identity actions"
      "schedule stats activity";
    min-height: 0;
  }

  #campaigns .formal-campaign-row-actions {
    flex-wrap: wrap;
    justify-self: end;
  }

  #campaigns .formal-campaign-card .formal-campaign-stats {
    align-self: stretch;
  }
}

@container maincol (max-width: 720px) {
  #campaigns .formal-campaign-card {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "status identity"
      "schedule schedule"
      "stats stats"
      "activity activity"
      "actions actions";
  }

  #campaigns .formal-campaign-row-actions {
    justify-self: stretch;
    justify-content: flex-start;
  }
}

/* ④ 全局浮层压住右面板：#deepSearchPill(z 260) 和 #globalToastHost(z 300)
   都挂在 body 上、position:fixed，而右面板是 sticky 且没写 z-index。
   面板铺开时它们会盖在上面——搜索进行中右面板底部的卡片点不到。
   这两个浮层是动态创建的（此刻不在 DOM），属于隐患而非现症，
   给面板一个高于它们的层级先堵住。 */
.zr-companion { z-index: 320; }

/* ── 在库优先：规则而非面板 ── */
.zr-library-title { display: flex; align-items: center; gap: 9px; }

.zr-library-flag {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ae6aeb, #8f5cff);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 手动模式收进折叠：默认是自动规则，手动是偶尔为之 */
.zr-library-manual { margin-top: 14px; }

.zr-library-manual > summary {
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid #e1dcf0;
  border-radius: 999px;
  color: #6d4da5;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.zr-library-manual > summary::-webkit-details-marker { display: none; }
.zr-library-manual > summary:hover { border-color: #8f5cff; background: #fbfaff; }
.zr-library-manual[open] > summary { margin-bottom: 12px; }

/* ── 身份色兜底头像 ──────────────────────────────────────────────
   库里 470 人存了 avatarUrl，但都是 TikTok / Instagram 的带签名临时链接、
   已全部过期（实测 382/382 → 403）。真人头像要重新抓才回得来。
   在那之前每个人至少有一个稳定可辨认的头像位，颜色由 handle 确定性推出。 */
.avatar-identity {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--av-from), var(--av-to));
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(30, 16, 60, 0.25);
}

/* ── 库内推荐：横向滑动，一次 5 个 ── */
#similarity .similar-results {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 1fr);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
}

#similarity .similar-results > .similar-card {
  scroll-snap-align: start;
  min-width: 0;
}

/* 滑动条做细一点：它是常驻的，太粗会一直抢注意力 */
#similarity .similar-results::-webkit-scrollbar { height: 8px; }
#similarity .similar-results::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d9d2ec;
}
#similarity .similar-results::-webkit-scrollbar-track { background: transparent; }

/* ── 内容结算：三张概览卡（照样机的 grid3） ── */
/* 结算规则说明。原来是页头里一张 371px 的大卡（含 166px 的图），
   把页头撑到 554px＝78% 屏高。挪到「计算结算」旁边并压扁：
   那句话讲的就是这个按钮按下去会怎么算。
   色板和圆角沿用 .attribution-zerendo-card，不新增颜色。 */
.settlement-rule-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e8ddff;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #fbf8ff 58%, #f6efff);
}
.settlement-rule-card img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
}
.settlement-rule-card strong {
  display: block;
  color: #283143;
  font-size: 13.5px;
  font-weight: 700;
}
.settlement-rule-card p {
  margin: 3px 0 0;
  color: #5a6478;
  font-size: 12px;
  line-height: 1.55;
}
.settlement-rule-card .settlement-rule-note {
  margin-top: 5px;
  color: #737d8e;
  font-size: 11.5px;
}

.settlement-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.settlement-summary-card {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border-radius: 16px;
  box-shadow: none;
}

/* 底色和边框要排除主卡：第一张是紫色渐变卡，靠 .is-primary 上色。
   不排除的话它会被刷成浅灰下沉面，上面的白字掉到 1.09:1——整张卡隐形。 */
.settlement-summary-card:not(.is-primary) {
  border: 1px solid transparent;
  background: #f6f4fb;   /* 下沉面。写死不用 --surface-soft——那个 token
     只在 day 主题里定义，夜间未定义会回落成近乎透明的值，
     压在硬编码的白卡上文字掉到 2.6:1（实测）。这几页本就整页钉浅色。 */
}

.settlement-summary-card > span {
  color: #737d8e;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.settlement-summary-card > strong {
  color: #283143;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.settlement-summary-card > p { margin: 0; color: #8a93a3; font-size: 12px; line-height: 1.45; }

/* 第一张是要付出去的钱，给它品牌色底——这一页的重点就是这个数 */
.settlement-summary-card.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #6f3bd7, #8f5cff);
}

/* 这三条必须带 #attribution 前缀。页面级的
   `#attribution p:not(.eyebrow):not(.muted)` 带 ID（1,2,1），
   会压过不带 ID 的 `.settlement-summary-card.is-primary > p`（0,2,1），
   于是紫底主卡上的说明是灰字，实测 1.16:1、数值 2.68:1。
   加上 ID 抬到 (1,3,1) 才赢得了。 */
#attribution .settlement-summary-card.is-primary > span { color: rgba(255, 255, 255, 0.82); }
#attribution .settlement-summary-card.is-primary > strong { color: #fff; }
#attribution .settlement-summary-card.is-primary > p { color: rgba(255, 255, 255, 0.86); }

/* 结算与报告：内容结算与全球付款是两个可切换页面。 */
#attribution {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

@media (min-width: 761px) {
  body[data-current-view="attribution"] .main {
    height: calc(100vh - 58px);
  }
}

#attribution .settlement-page-head {
  align-items: flex-start;
}

#attribution .settlement-page-head .page-head-actions {
  flex: 0 0 auto;
  padding-top: 4px;
}

#attribution .settlement-tabs {
  margin-bottom: 16px;
}

#attribution .settlement-tab-pane,
#attribution .settlement-table-secondary {
  min-width: 0;
}

#attribution .settlement-tab-pane[hidden],
#attribution .settlement-table-secondary[hidden] {
  display: none;
}

#attribution .settlement-table-secondary {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

#attribution #payoutPanel { margin-top: 0; }

/* 内容结算表按只读客户报告模板收敛：三张浅紫指标卡 + 一张干净表格。 */
#attribution .settlement-report-page .settlement-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

#attribution .settlement-report-page .settlement-summary-card {
  min-height: 88px;
  align-content: center;
  padding: 15px 18px;
  border: 1px solid #ebe6f4;
  border-radius: 13px;
  background: #f5f1fb;
}

#attribution .settlement-report-page .settlement-summary-card > strong {
  margin-top: 2px;
  font-size: 26px;
}

#attribution .settlement-report-page .settlement-summary-card:first-child > strong {
  color: #6335bd;
}

#attribution .settlement-report-page .settlement-summary-card > p {
  line-height: 1.3;
}

#attribution .settlement-report-table-panel {
  padding: 10px 14px 0;
  border: 1px solid #ebe7f1;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(55, 42, 79, 0.07);
}

#attribution .settlement-report-table-panel .settlement-table-wrap {
  border: 0;
  border-radius: 0;
}

#attribution .settlement-config {
  margin-top: 4px;
  border-top: 1px solid #eeeaf3;
  color: #6f7888;
  font-size: 12px;
}

#attribution .settlement-config > summary {
  width: fit-content;
  padding: 11px 2px 12px;
  color: #6847c8;
  font-weight: 700;
  cursor: pointer;
}

#attribution .settlement-config-body {
  display: grid;
  gap: 12px;
  padding: 2px 0 14px;
}

#attribution .settings-section-head h3 {
  margin: 0;
  color: #151d2e;
  letter-spacing: -0.02em;
}

#attribution .settings-section-head p,
#attribution .payout-flow p {
  margin: 5px 0 0;
  color: #747e8e;
  font-size: 12px;
  line-height: 1.45;
}

#attribution .payout-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#attribution .payout-summary-grid .settlement-summary-card {
  min-width: 0;
  align-content: start;
}

#attribution .payout-method-card .ghost-button {
  justify-self: start;
  margin-top: 8px;
}

#attribution .payout-method-card .ghost-button:disabled {
  cursor: not-allowed;
  color: #929aa7;
  opacity: 0.85;
}

#attribution .payout-method-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

#attribution .payout-method-list span {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #e2ddef;
  border-radius: 999px;
  background: #f8f7fc;
  color: #4c4368;
  font-size: 11px;
  font-weight: 700;
}

#attribution .payout-fee-card > strong {
  margin-top: 10px;
  color: #6638bc;
  font-size: 38px;
}

#attribution .payout-calculator label {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  color: #5e6878;
  font-size: 12px;
  font-weight: 600;
}

#attribution .payout-calculator input {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #d8dee7;
  border-radius: 9px;
  background: #fff;
  color: #20293a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

#attribution .payout-calculator dl { margin: 2px 0 0; }

#attribution .payout-calculator dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #e6e3ed;
  color: #687284;
  font-size: 12px;
}

#attribution .payout-calculator dt,
#attribution .payout-calculator dd { margin: 0; }

#attribution .payout-calculator dd {
  color: #20293a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#attribution .payout-calculator .payout-total { border-bottom: 0; font-weight: 700; }
#attribution .payout-calculator .payout-total dd { color: #6838bc; }

#attribution .payout-calculator > small {
  color: #858e9d;
  font-size: 10.5px;
  line-height: 1.45;
}

#attribution .payout-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border-block: 1px solid #e1e5ec;
}

#attribution .payout-flow article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 10px 14px;
}

#attribution .payout-flow article + article { border-left: 1px solid #e1e5ec; }

#attribution .payout-flow article > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #e8e0f7;
  color: #6638b8;
  font-size: 11px;
  font-weight: 700;
}

#attribution .payout-flow strong { color: #283143; font-size: 12px; }

#attribution .settlement-table {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
  font-size: 12px;
}

#attribution .settlement-table th,
#attribution .settlement-table td {
  height: 46px;
  padding: 9px 10px;
}

#attribution .settlement-table th {
  color: #7f8796;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#attribution .settlement-table th:nth-child(n + 3),
#attribution .settlement-table td:nth-child(n + 3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#attribution .settlement-table th:first-child { width: 23%; }
#attribution .settlement-table th:nth-child(2) { width: 27%; }

#attribution .settlement-creator-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

#attribution .settlement-creator-avatar {
  position: relative;
  display: grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #e9def8;
  color: #6847c8;
  font-size: 10px;
  font-weight: 700;
}

#attribution .settlement-creator-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#attribution .settlement-creator-cell > span:last-child,
#attribution .settlement-content-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#attribution .settlement-creator-cell strong,
#attribution .settlement-content-cell strong {
  overflow: hidden;
  color: #273043;
  font-size: 11.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#attribution .settlement-creator-cell small,
#attribution .settlement-content-cell small {
  overflow: hidden;
  color: #8a92a0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#attribution .settlement-table tfoot td {
  color: #5f6877;
  font-weight: 700;
}

#attribution .settlement-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

@container maincol (max-width: 980px) {
  #attribution .payout-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

@container maincol (max-width: 520px) {
  #attribution .settlement-report-page .settlement-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

@container maincol (max-width: 680px) {
  #attribution .settlement-page-head { flex-direction: column; }
  #attribution .payout-flow { grid-template-columns: minmax(0, 1fr); }
  #attribution .payout-flow article + article {
    border-top: 1px solid #e1e5ec;
    border-left: 0;
  }
}

/* ── 账号设置：从侧栏「系统」组挪到顶栏，紧邻「待处理」 ──
   它仍带 .nav-item（要继续吃那个给所有 nav-item 绑的全局处理器和
   active 态同步），所以这里必须把侧栏那套 nav-item 样式逐条覆盖掉，
   否则它会带着侧栏的宽度、内边距和 ::before 图标跑到顶栏上。 */
.global-topbar .global-topbar-settings {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(226, 210, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #efe9fc;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* 语言开关：和顶栏其他按钮同一族，但更窄——它只有两个字。 */
.global-topbar-lang {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.global-topbar-lang:hover { background: rgba(255, 255, 255, 0.12); }
html[data-theme="day"] .global-topbar-lang {
  border-color: #e1e6ee;
  background: #f3f5fa;
  color: #1f2a3a;
}
html[data-theme="day"] .global-topbar-lang:hover { background: #e9edf4; }

/* 侧栏折叠态给 nav-item 加的图标伪元素在这里是多余的——按钮里已有真图标 */
.global-topbar .global-topbar-settings::before,
.global-topbar .global-topbar-settings::after { content: none; }

.global-topbar .global-topbar-settings .material-icons-round { font-size: 17px; }
.global-topbar .global-topbar-settings:hover { border-color: rgba(226, 210, 255, 0.5); }

/* 当前就在设置页时给个选中态，和侧栏原来的 active 表达一致 */
.global-topbar .global-topbar-settings[aria-current="page"] {
  border-color: #8f5cff;
  background: rgba(143, 92, 255, 0.18);
}

html[data-theme="day"] .global-topbar .global-topbar-settings {
  border-color: #e1dcf0;
  background: #fff;
  color: #4b3d6b;
}

html[data-theme="day"] .global-topbar .global-topbar-settings:hover { border-color: #8f5cff; color: #6d4da5; }

html[data-theme="day"] .global-topbar .global-topbar-settings[aria-current="page"] {
  border-color: #8f5cff;
  background: color-mix(in srgb, #8f5cff 12%, #ffffff);
  color: #6d4da5;
}

/* 窄屏只留图标：顶栏放不下两个带文字的按钮 */
@media (max-width: 900px) {
  .global-topbar .global-topbar-settings-label { display: none; }
  .global-topbar .global-topbar-settings { padding: 7px 10px; }
}

/* Campaign 概况：从总览页搬过来，位置在标签条之上 */
#campaigns .campaign-overview-panel { margin-bottom: 16px; }

/* ── 全部 Campaign 概况：压扁到约 1/4 屏 ──
   原来是"简报大卡 + 四张竖排指标卡 + 整宽按钮"三段竖着堆，占掉大半屏，
   而它只是个概况——真正要操作的战役卡还在下面。
   改成一行：简报在左、四个数横排在右、日历入口收成文字链接。 */
#campaigns .campaign-overview-panel { padding: 14px 16px; }

#campaigns .campaign-overview-panel .section-heading { margin-bottom: 10px; }
#campaigns .campaign-overview-panel .section-heading h2 { font-size: 15px; }
#campaigns .campaign-overview-panel .eyebrow { font-size: 10.5px; }

#campaigns .dashboard-zerendo-report {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

/* 简报卡：吉祥物缩小，文字压到两行 */
#campaigns .dashboard-zerendo-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

#campaigns .dashboard-zerendo-card img { width: 46px; height: 46px; }
#campaigns .dashboard-zerendo-card span { font-size: 10.5px; }
#campaigns .dashboard-zerendo-card strong { font-size: 13px; line-height: 1.35; }
#campaigns .dashboard-zerendo-card p { margin: 2px 0 0; font-size: 11.5px; }

/* 四个数横排成一行，不再是 2×2 大卡 */
#campaigns .campaign-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

#campaigns .campaign-report-grid article { padding: 8px 10px; }
#campaigns .campaign-report-grid article span { font-size: 10.5px; }
#campaigns .campaign-report-grid article strong { font-size: 18px; }
#campaigns .campaign-report-grid article p { margin: 1px 0 0; font-size: 10.5px; }

/* 整宽渐变大按钮收成文字链接：它只是个跳转，不是这一页的主动作 */
#campaigns .dashboard-report-link {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #6d4da5;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}

#campaigns .dashboard-report-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  #campaigns .dashboard-zerendo-report { grid-template-columns: minmax(0, 1fr); }
  #campaigns .campaign-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Campaign 行内报告动作与编辑、下一轮并列，容器变窄时整组自然换行。 */
#campaigns .formal-campaign-card .campaign-audit-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#campaigns .formal-campaign-card .campaign-audit-readiness {
  flex: 0 0 auto;
  white-space: nowrap;
}

#campaigns .formal-campaign-card .campaign-audit-card-actions .primary-button,
#campaigns .formal-campaign-card .campaign-audit-card-actions .text-button {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: 0;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   合并后的排期日历
   ══════════════════════════════════════════════════════════════════════
   原来是「Campaign 日历」和「网红发布排期」两个互斥模式，各画一套月网格。
   两套格子结构本来就同构（同一个 days 数组、同一层 wrapper），
   合并后只留一套，六类事件的 chip 拼进同一个格子，用颜色区分。 */

/* 五类事件的显示开关，照 macOS 日历左侧的日历列表 */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ece7f7;
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid #e5e7ec;
  border-radius: 999px;
  background: #fff;
  color: #8a93a3;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* 关掉的那一类整体褪色，色点变空心——一眼看出"这类被收起了" */
.calendar-legend-item > i {
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.calendar-legend-item.is-on { border-color: #d9d2ec; color: #4b3d6b; }
.calendar-legend-item.is-on > i { background: currentColor; }

.calendar-legend-item[data-calendar-layer="campaign"].is-on { color: #6d4da5; }
.calendar-legend-item[data-calendar-layer="creator"].is-on { color: #3f8ae0; }
.calendar-legend-item[data-calendar-layer="custom"].is-on { color: #d99018; }
.calendar-legend-item[data-calendar-layer="commerce"].is-on { color: #ef6b91; }
.calendar-legend-item[data-calendar-layer="holiday"].is-on { color: #7d8492; }

.calendar-legend-item[hidden] { display: none; }

/* 键盘现在能进日历了（回车开弹窗、方向键走格子），焦点环不能交给
   系统强调色——UA 橙环对白格实测只有 2.4:1。#6d4da5 是弹窗里已验证的值。 */
#calendar .calendar-day:focus-visible {
  outline: 2px solid #6d4da5;
  outline-offset: -2px;
}

.calendar-legend-hint { margin-left: auto; color: #737d8e; font-size: 11.5px; }

/* 自定义事项的 chip。颜色由用户选，走 --entry-color；没选就用品牌紫 */
#calendar .calendar-entry {
  --entry-color: #8f5cff;
  display: block;
  overflow: hidden;
  padding: 2px 6px;
  border-left: 3px solid var(--entry-color);
  border-radius: 4px;
  background: color-mix(in srgb, var(--entry-color) 12%, #ffffff);
  color: #283143;
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar .calendar-entry > b { margin-right: 4px; color: var(--entry-color); font-variant-numeric: tabular-nums; }

#calendar .calendar-entry.is-done { opacity: 0.55; text-decoration: line-through; }

/* Campaign 档期是跨列的连续条，不再只在起止日各塞一个孤立 chip。
   每跨一周拆成一段，但左右边缘会保留「仍在继续」的平直切口。 */
#calendar .campaign-month-grid .calendar-day {
  min-height: calc(92px + var(--calendar-week-lanes, 0) * 20px);
}

#calendar .campaign-month-grid .calendar-date { margin-bottom: 2px; }

#calendar .campaign-month-grid .calendar-events {
  margin-top: calc(var(--calendar-week-lanes, 0) * 20px + 4px);
}

#calendar .calendar-campaign-span {
  align-self: start;
  z-index: 4;
  display: block;
  min-width: 0;
  height: 18px;
  margin: calc(36px + var(--calendar-span-lane, 0) * 20px) 2px 0;
  padding: 1px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: #d9c6ff;
  color: #3f237c;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 3px 0 0 #7544d7;
  cursor: pointer;
}

#calendar .calendar-campaign-span.starts-here { border-radius: 8px 3px 3px 8px; }
#calendar .calendar-campaign-span.ends-here { border-radius: 3px 8px 8px 3px; }
#calendar .calendar-campaign-span.starts-here.ends-here { border-radius: 8px; }
#calendar .calendar-campaign-span.continues-before { box-shadow: none; }
#calendar .calendar-campaign-span:focus-visible {
  outline: 2px solid #4f2e92;
  outline-offset: 1px;
}

#calendar .calendar-campaign-span.completed {
  color: #25654a;
  background: #cfeede;
  box-shadow: inset 3px 0 0 #2d8a64;
}

#calendar .calendar-campaign-span.draft {
  color: #5b6376;
  background: #e5e8ee;
  box-shadow: inset 3px 0 0 #7d8492;
}

/* 格子可双击：给个手势提示，但不要 hover 就变色——
   日历一屏 42 格，每格都响应会很吵 */
#calendar .calendar-day[data-calendar-date] { cursor: cell; }

/* ── 新建/编辑弹层 ── */
#calendarEntryDialog .calendar-entry-card {
  display: grid;
  gap: 12px;
  width: min(460px, 92vw);
  /* 钉死浅色：跟着 --surface 走会在夜间变成深卡片浮在白日历上 */
  background: #fff;
  /* 让原生日期/时间选择器也按浅色渲染，否则夜间弹出的是深色小面板 */
  color-scheme: light;
}
#calendarEntryDialog .dialog-head h2 { color: #283143; }
#calendarEntryDialog textarea { resize: vertical; }
#calendarEntryDialog .ghost-button {
  border: 1px solid #d9d0ee;
  background: #fff;
  color: #5b32b8;
}
/* #bd3555 而不是 #d64f78：白底上 4.0:1 差 AA 一步，#bd3555 已在别处用，5.5:1 */
#calendarEntryDialog .text-button.danger { color: #bd3555; }
#calendarEntryDialog .dialog-head .eyebrow { color: #8a7fa8; }
/* .dialog-card 那套（4289 起）把 label 刷成 #fff、占位刷成半透明白，是给夜间深卡片写的。
   卡片钉成白底之后必须一并覆盖，否则字段名和占位提示都是白字压白底。
   字段名本身走 label span（764 的 var(--muted)），这里只兜占位。 */
#calendarEntryDialog input::placeholder,
#calendarEntryDialog textarea::placeholder { color: #737d8e; }

.calendar-entry-kind { display: flex; gap: 8px; }
.calendar-entry-kind label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e5e7ec;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}
.calendar-entry-kind label:has(input:checked) { border-color: #8f5cff; background: #faf8ff; color: #6d4da5; font-weight: 600; }
.calendar-entry-kind input {
  /* 全局 input{width:100%;padding:11px 12px} 会把单选圆钮撑成 150px，
     把标签文字挤到竖排。radio 不需要那套输入框样式，逐条复位。 */
  width: auto;
  min-width: 0;
  flex: none;
  margin: 0;
  padding: 0;
  accent-color: #6d4da5;
}
/* label span 的全局规则(871)带 display:block，会让文字另起一行，
   在这个横向胶囊里必须复位；uppercase 对中文无效但对将来的英文标签会生效。 */
.calendar-entry-kind label span {
  color: #5b6376;
  display: inline;
  text-transform: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.calendar-entry-kind label:has(input:checked) span { color: #6d4da5; font-weight: 600; }

.calendar-entry-field { display: grid; gap: 5px; font-size: 12px; font-weight: 600; }
/* 同上：锁死浅色，别跟 --muted 在夜间翻成浅紫 */
/* #5b6376 而不是 #737d8e：12px 小字要过 AA 得 4.5:1，
   #737d8e 实测 4.16 差一点。#5b6376 是文件里已有的值，6.02:1。 */
.calendar-entry-field > span { color: #5b6376; }
.calendar-entry-field input,
.calendar-entry-field select,
.calendar-entry-field textarea {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #e5e7ec;
  border-radius: 10px;
  color: #283143;
  font-size: 13.5px;
  font-weight: 400;
}
.calendar-entry-field input:focus,
.calendar-entry-field textarea:focus { outline: none; border-color: #8f5cff; }

.calendar-entry-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* [hidden] 只是 UA 样式表里的 display:none，会被 .calendar-entry-field 的
   display:grid 按特异性打赢——这个仓库刚在右侧伴随面板上栽过一次同样的跟头。
   显式写一条，别指望 [hidden] 自己生效。 */
.calendar-entry-field[hidden] { display: none; }
.calendar-entry-row[hidden] { display: none; }
/* 节假日模式收起「结束日期」后别留空洞 */
.calendar-entry-row:has(.calendar-entry-field[hidden]) { grid-template-columns: minmax(0, 1fr); }


.calendar-entry-colors { display: flex; align-items: center; gap: 7px; }
.calendar-entry-colors button {
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--sw);
  cursor: pointer;
}
.calendar-entry-colors button.is-picked { border-color: #283143; }

/* 标题行：名称当主角 + 颜色收在右边（macOS 的做法）。
   原来颜色独占一整行、吃掉 67% 的内容宽度，而它是这个表单里最不重要的字段。 */
.calendar-entry-hero {
  display: flex;
  /* 窄屏下色点整组换到下一行，别把名称挤到 8 个字就断字 */
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #ece7f5;
  padding-bottom: 8px;
}
.calendar-entry-hero[hidden] { display: none; }
.calendar-entry-hero .calendar-entry-field { flex: 1; min-width: 180px; }
.calendar-entry-hero .calendar-entry-colors { flex: none; gap: 6px; margin-left: auto; }

/* 无边框输入：macOS 那种"填空"观感，靠底线而不是方框分隔。
   注意不是把边框去掉就完事——全局 input 有 background 和 padding，
   不复位的话会剩一个灰色色块，比有边框还难看。 */
.calendar-entry-field.is-hero input,
.calendar-entry-field.is-quiet textarea {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
}
.calendar-entry-field.is-hero input {
  font-size: 17px;
  font-weight: 600;
  color: #283143;
}
.calendar-entry-field.is-quiet textarea {
  font-size: 13px;
  border-top: 1px solid #ece7f5;
  padding-top: 8px;
}
/* 无边框之后焦点必须另给一个看得见的样式，否则键盘用户完全不知道自己在哪。 */
.calendar-entry-field.is-hero input:focus-visible,
.calendar-entry-field.is-quiet textarea:focus-visible {
  outline: 2px solid #6d4da5;
  outline-offset: 2px;
  border-radius: 4px;
}

.calendar-entry-echo {
  margin: -4px 0 0;
  color: #5b32b8;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 17px;
  min-height: 17px;
}
.calendar-entry-note { margin: -4px 0 0; color: #737d8e; font-size: 12px; }
.calendar-entry-note[hidden] { display: none; }
.calendar-entry-colors[hidden] { display: none; }

.calendar-entry-error { margin: 0; min-height: 18px; color: #d64f78; font-size: 12px; }
.calendar-entry-actions { display: flex; align-items: center; gap: 8px; }
/* 用 margin-left:auto 而不是 space-between：删除按钮在新建时是 hidden，
   space-between 少了一个孩子就会把取消/保存甩到左下角。 */
.calendar-entry-actions > div { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 640px) {
  .calendar-entry-row { grid-template-columns: minmax(0, 1fr); }
  .calendar-legend-hint { margin-left: 0; width: 100%; }
}

/* ── 排期页工具条：月份 + 控件一行，图层条独立一行 ──
   第一版把图层条塞进了 .calendar-toolbar（flex-wrap: nowrap 的一行），
   月份、控件、图层三样硬挤在一行，各自内部再折行——
   「2026年」和「8月」被拆成两行，控件也折成两排。 */
#calendar .calendar-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* 月份标题不许被压到换行：它是这一页的锚点 */
#calendar #calendarMonthLabel {
  white-space: nowrap;
  font-size: 19px;
}

#calendar .calendar-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 电商节筛选：标签和下拉一行，不要竖着叠 */
#calendar .commerce-filter-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#calendar .commerce-filter-control > span { font-size: 12px; }
#calendar .commerce-filter-control select { min-height: 36px; }
#calendar .calendar-controls .primary-button { white-space: nowrap; }

/* 图层条独立一行，贴在工具条下面 */
#calendar .calendar-legend {
  margin-top: 0;
  padding: 12px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Campaign v2 · compact brief + master/detail member workspace
   ══════════════════════════════════════════════════════════════════════ */
#campaigns .campaign-brief-panel {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 12px;
}

#campaigns .dashboard-zerendo-report {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

#campaigns .dashboard-zerendo-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#campaigns .dashboard-zerendo-card img {
  width: 40px;
  height: 40px;
}

#campaigns .dashboard-zerendo-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#campaigns .dashboard-zerendo-card span { font-size: 9.5px; }
#campaigns .dashboard-zerendo-card strong {
  overflow: hidden;
  color: #251c3a;
  font-size: 12.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#campaigns .dashboard-zerendo-card p {
  overflow: hidden;
  margin: 0;
  color: #746b84;
  font-size: 10.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#campaigns .campaign-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

#campaigns .campaign-report-grid article {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  padding: 3px 6px;
  border: 0;
  border-radius: 8px;
  background: #f7f4fb;
  box-shadow: none;
}

#campaigns .campaign-report-grid article span { font-size: 9.5px; }
#campaigns .campaign-report-grid article strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#campaigns .campaign-report-grid article p { display: none; }

#campaigns .dashboard-report-link {
  grid-column: auto;
  width: auto;
  min-height: 26px;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: #6d4da5;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}

#campaigns .campaign-advice-disclosure {
  border-top: 1px solid #ece7f4;
}

#campaigns .campaign-advice-summary {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 4px 0;
  color: #312a36;
  cursor: pointer;
  list-style: none;
}

#campaigns .campaign-advice-summary::-webkit-details-marker { display: none; }

#campaigns .campaign-advice-summary > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#campaigns .campaign-advice-summary b { font-size: 12.5px; }
#campaigns .campaign-advice-summary small {
  color: #8b8198;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#campaigns .campaign-advice-summary .primary-button {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 11px;
}

#campaigns .campaign-advice-body {
  padding: 10px 4px 4px;
  border-top: 1px solid #f0ecf5;
}

#campaigns .campaign-advice-body .agent-advice-intro {
  margin: 0;
  color: #746b84;
  font-size: 12px;
}

#campaigns .campaign-advice-body .agent-advice-input { margin-top: 10px; }
#campaigns .campaign-advice-body .agent-advice-result { margin-top: 10px; }

#campaigns .campaign-workspace {
  display: grid;
  gap: 10px;
}

#campaigns .campaign-master-detail {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(360px, 0.95fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

#campaigns .campaign-workspace-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#campaigns .formal-campaign-group,
#campaigns .formal-campaign-closed,
#campaigns .campaign-detail-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e7e1ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

#campaigns .formal-campaign-group-title { margin-bottom: 8px; }
#campaigns .formal-campaign-group-title h3 { font-size: 13px; }
#campaigns .formal-campaign-closed[open] > summary { margin-bottom: 8px; }
#campaigns .formal-campaign-closed > summary { font-size: 12.5px; }

#campaigns .formal-campaign-grid { gap: 4px; }

#campaigns .formal-campaign-card {
  display: grid;
  grid-template-columns: max-content minmax(95px, 1fr) minmax(128px, 0.7fr) max-content;
  grid-template-areas: "status identity stats actions";
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: none;
}

#campaigns .formal-campaign-card:hover {
  border-color: #ddd2ec;
  background: #faf8fd;
  box-shadow: none;
  transform: none;
}

#campaigns .formal-campaign-card.is-selected {
  border-color: #ddd1f0;
  background: #f1ebfb;
}

#campaigns .formal-campaign-card.is-closed { background: #f8f6f8; }
#campaigns .formal-campaign-card.is-closed.is-selected { background: #eee9f4; }

#campaigns .formal-campaign-status {
  padding: 4px 7px;
  font-size: 10px;
}

#campaigns .formal-campaign-identity { gap: 1px; }
#campaigns .formal-campaign-identity h3 { font-size: 12.5px; }
#campaigns .formal-campaign-identity p { font-size: 10.5px; }

#campaigns .formal-campaign-card .formal-campaign-stats {
  display: grid;
  grid-area: stats;
  grid-template-columns: repeat(3, minmax(36px, 1fr));
  gap: 4px;
}

#campaigns .formal-campaign-card .formal-campaign-stats span { text-align: center; }
#campaigns .formal-campaign-card .formal-campaign-stats strong { font-size: 13px; }
#campaigns .formal-campaign-card .formal-campaign-stats small { font-size: 9px; }

#campaigns .formal-campaign-row-actions { grid-area: actions; }
#campaigns .formal-campaign-row-actions > .text-button {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 10.5px;
}

#campaigns .campaign-first-run {
  min-height: 260px;
  align-content: center;
  padding: 30px 20px;
}

#campaigns .campaign-detail-panel {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 130px);
  overflow: auto;
}

#campaigns .campaign-detail-head {
  display: grid;
  gap: 10px;
}

#campaigns .campaign-detail-head h2 {
  margin: 5px 0 3px;
  font-size: 18px;
}

#campaigns .campaign-detail-head p { font-size: 11.5px; }

#campaigns .campaign-detail-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

#campaigns .campaign-detail-actions .primary-button,
#campaigns .campaign-detail-actions .campaign-light-action,
#campaigns .campaign-detail-actions .text-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11.5px;
}

#campaigns .campaign-detail-audit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid #eee9f3;
  border-bottom: 1px solid #eee9f3;
}

#campaigns .campaign-detail-audit > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#campaigns .campaign-detail-audit strong { font-size: 12.5px; }
#campaigns .campaign-detail-audit small {
  color: #7c7484;
  font-size: 10.5px;
  line-height: 1.35;
}

#campaigns .campaign-detail-audit .campaign-audit-card-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

#campaigns .campaign-detail-audit .campaign-audit-readiness { white-space: nowrap; }

#campaigns .campaign-detail-audit .primary-button,
#campaigns .campaign-detail-audit .text-button {
  min-height: 30px;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  font-size: 10.5px;
  white-space: nowrap;
}

#campaigns .campaign-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

#campaigns .campaign-member-panel,
#campaigns .campaign-timeline-panel {
  padding: 10px;
  border-radius: 10px;
}

#campaigns .campaign-detail-empty {
  display: grid;
  min-height: 330px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px;
  color: #766e80;
  text-align: center;
}

#campaigns .campaign-detail-empty > span {
  color: #7955c8;
  font-size: 30px;
}

#campaigns .campaign-detail-empty h2,
#campaigns .campaign-detail-empty p { margin: 0; }

@container maincol (max-width: 980px) {
  #campaigns .campaign-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #campaigns .campaign-master-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  #campaigns .campaign-detail-panel {
    position: static;
    max-height: none;
  }
}

@container maincol (max-width: 720px) {
  #campaigns .dashboard-zerendo-report { grid-template-columns: minmax(0, 1fr); }
  #campaigns .dashboard-zerendo-card { grid-template-columns: 40px minmax(0, 1fr); }
  #campaigns .dashboard-report-link { display: none; }
  #campaigns .formal-campaign-card {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "status identity actions"
      "stats stats stats";
  }
}