/* Internal explosive-materials library */
.materials-page { color: #23262b; }
.materials-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 5px 0 18px; }
.materials-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.materials-title-row h1 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.materials-internal-badge { padding: 5px 9px; border: 1px solid #f3d6df; border-radius: 7px; color: #ab3e60; background: #fff1f6; font-size: 11px; font-weight: 650; white-space: nowrap; }
.materials-header p { margin: 8px 0 0; color: #82858d; font-size: 13px; }
.materials-header > button { flex-shrink: 0; }
.materials-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 23px; margin-bottom: 19px; padding: 12px 15px; border: 1px solid #e5e8ed; border-radius: 10px; background: #fafbfc; font-size: 12px; color: #68717d; }
.materials-source > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #424c59; font-weight: 650; }
.materials-source i { width: 6px; height: 6px; border-radius: 50%; background: #00a8cd; }
.materials-source p { flex-basis: 100%; margin: 0; font-size: 11px; color: #838993; }
.materials-filters { padding: 19px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 3px 15px #1a233304; }
.materials-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.materials-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px; padding: 0 13px; border: 1px solid #dce0e6; border-radius: 9px; background: #fcfcfd; }
.materials-search:focus-within { border-color: #f17c9e; box-shadow: 0 0 0 3px #fb729916; }
.materials-search > span { color: #939aa5; font-size: 23px; line-height: 1; }
.materials-search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: #333b48; font: inherit; font-size: 13px; }
.materials-search input:focus { border: 0; outline: 0; box-shadow: none; }
.materials-search input::placeholder { color: #939aa5; }
.materials-search kbd { padding: 3px 6px; border: 1px solid #e4e6eb; border-radius: 4px; color: #a0a6af; font-family: inherit; font-size: 10px; white-space: nowrap; }
.materials-search-row > button { flex-shrink: 0; }
.materials-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 12px; }
.materials-filter { display: grid; min-width: 0; gap: 7px; }
.materials-filter > span { font-size: 11px; font-weight: 600; color: #737b87; }
.materials-filter select { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #e0e4ea; border-radius: 7px; background: #fff; color: #424a55; font: inherit; font-size: 12px; text-overflow: ellipsis; cursor: pointer; }
.materials-filter select:focus-visible { outline: 2px solid #f17c9e; outline-offset: 2px; }
.materials-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 21px 1px 14px; color: #858c98; font-size: 12px; }
.materials-results-bar strong { padding: 0 3px; color: #ed688e; font-size: 16px; font-variant-numeric: tabular-nums; }
.materials-results-bar > span:first-child { color: #555f6e; }
.materials-total { color: #9299a3; }
.materials-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.materials-card { min-width: 0; overflow: hidden; border: 1px solid #e7e9ee; border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s, transform .18s; }
.materials-card:hover { transform: translateY(-2px); border-color: #fac0d1; box-shadow: 0 8px 23px #4a2c3810; }
.materials-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.materials-card-link:focus-visible { outline: 3px solid #fb7299; outline-offset: -3px; }
.materials-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f3f7; }
.materials-cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #b1b7c1; font-size: 12px; }
.materials-cover img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.materials-cover img[hidden] { display: none; }
.materials-spend { position: absolute; top: 10px; right: 10px; padding: 5px 7px; border: 1px solid #ffffff30; border-radius: 6px; background: #192130cf; color: #fff; font-size: 10px; box-shadow: 0 2px 6px #00000012; }
.materials-spend b { margin-left: 3px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.materials-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; padding-left: 2px; border: 1px solid #ffffff80; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); background: #1720326b; color: #fff; font-size: 13px; transition: opacity .18s; }
.materials-card-link:hover .materials-play, .materials-card-link:focus-visible .materials-play { opacity: 1; }
.materials-card-body { padding: 13px 13px 10px; }
.materials-card-tags { display: flex; gap: 5px; height: 22px; overflow: hidden; align-items: flex-start; }
.materials-card-tags > span { display: block; min-width: 0; max-width: 58%; overflow: hidden; padding: 3px 6px; border-radius: 4px; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.materials-brand { color: #b55a75; background: #fff0f5; }
.materials-target { color: #5c829e; background: #eef6fc; }
.materials-card h3 { display: -webkit-box; height: 42px; overflow: hidden; margin: 8px 0 10px; color: #2d333c; font-size: 14px; font-weight: 650; line-height: 21px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.materials-author { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #798190; font-size: 11px; }
.materials-author > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.materials-result { flex-shrink: 0; color: #758398; font-size: 10px; }
.materials-result b { margin-left: 2px; color: #526579; font-size: 12px; font-variant-numeric: tabular-nums; }
.materials-result.is-roi b { color: #11856c; }
.materials-industry { overflow: hidden; margin: 7px 0 12px; color: #9299a3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.materials-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 11px 0; border-top: 1px solid #f0f1f4; border-bottom: 1px solid #f0f1f4; text-align: center; }
.materials-metrics dt { margin-bottom: 5px; color: #989eaa; font-size: 9px; white-space: nowrap; }
.materials-metrics dd { margin: 0; color: #4c5767; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.materials-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: #a1a7b1; font-size: 9px; }
.materials-card-foot > span:last-child { color: #969aa5; }
.materials-card-link:hover .materials-card-foot > span:last-child { color: #e3688b; }
.materials-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 10px; color: #8a929e; font-size: 12px; }
.materials-pagination > div { display: flex; align-items: center; gap: 16px; }
.materials-page button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.materials-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 290px; margin: 20px 0; padding: 35px 20px; border: 1px dashed #e0e4eb; border-radius: 12px; background: #ffffffb3; text-align: center; }
.materials-state strong { color: #505966; font-size: 16px; }
.materials-state p { max-width: 500px; margin: 10px 0 20px; color: #8d95a2; font-size: 13px; line-height: 1.7; }
.materials-empty-mark { margin-bottom: 10px; color: #bec6d0; font-size: 40px; }
.materials-loader { width: 26px; height: 26px; margin-bottom: 20px; border: 3px solid #ffe1ea; border-top-color: #ef7c9e; border-radius: 50%; animation: materials-spin .8s linear infinite; }
.materials-refresh-error { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 16px; padding: 10px 13px; border: 1px solid #f0dabb; border-radius: 9px; background: #fffaf1; color: #a0783e; font-size: 12px; }
.materials-refresh-error button { flex-shrink: 0; }
.materials-footnote { margin: 20px 0 0; color: #a1a8b2; font-size: 10px; line-height: 1.8; }
@keyframes materials-spin { to { transform: rotate(360deg); } }
@media (min-width: 1650px) { .materials-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .materials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .materials-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .materials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .materials-header { align-items: flex-start; }
  .materials-title-row h1 { font-size: 23px; }
  .materials-filters { padding: 14px; }
  .materials-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-search { gap: 7px; padding: 0 9px; }
  .materials-search input { font-size: 11px; }
  .materials-search kbd { display: none; }
  .materials-results-bar { font-size: 10px; }
  .materials-pagination { flex-direction: column; gap: 16px; }
  .materials-card-body { padding: 11px 10px 9px; }
}
@media (max-width: 480px) {
  .materials-grid { grid-template-columns: minmax(0, 1fr); }
  .materials-title-row { gap: 8px; }
  .materials-internal-badge { padding: 4px 6px; font-size: 10px; }
  .materials-header p { max-width: 190px; font-size: 11px; line-height: 1.6; }
  .materials-search-row { flex-wrap: wrap; }
  .materials-search { flex-basis: 100%; }
  .materials-search input { font-size: 12px; }
  .materials-results-bar { align-items: flex-start; flex-direction: column; gap: 7px; }
  .materials-metrics dt { font-size: 10px; }
  .materials-metrics dd { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .materials-card, .materials-play { transition: none; }
  .materials-loader { animation: none; }
}

:root {
  --red: #e91f45;
  --red-dark: #a50f2e;
  --coral: #ff6b62;
  --pink: #ff8caf;
  --ink: #27141a;
  --muted: #7c6970;
  --line: #f0d8dd;
  --paper: #fff8fa;
  --white: #ffffff;
  --green: #0f9f6e;
  --amber: #bc7400;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* Public /list customer acquisition page */
.public-list-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #182131;
  background:
    radial-gradient(circle at 88% 5%, rgba(54, 189, 235, 0.12), transparent 27rem),
    radial-gradient(circle at 12% 11%, rgba(251, 93, 122, 0.1), transparent 24rem),
    #ffffff;
}

.public-list-page * { box-sizing: border-box; }
.public-list-page button,
.public-list-page a { font: inherit; }

.public-list-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 78px;
  padding: 12px max(28px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid rgba(225, 230, 238, 0.9);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
}

.public-list-brand {
  display: inline-flex;
  justify-self: start;
  align-items: center;
}

.public-list-brand img {
  width: 164px;
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
}

.public-list-header nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.public-list-header nav a,
.public-login-link {
  color: #465266;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.public-list-header nav a:hover,
.public-login-link:hover { color: #e13e69; }

.public-header-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 14px;
}

.public-header-register,
.public-primary-btn,
.public-bottom-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #ffffff;
  background: linear-gradient(115deg, #f1537c, #fb6f70 72%);
  box-shadow: 0 13px 28px rgba(235, 63, 104, 0.23);
  text-decoration: none;
  cursor: pointer;
}

.public-header-register {
  min-height: 42px;
  padding: 9px 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 850;
}

.magicui-shimmer-button {
  --button-shimmer-color: rgba(255, 255, 255, 0.86);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(31, 43, 65, 0.16);
}

.magicui-shimmer-button::before {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -42%;
  z-index: 0;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--button-shimmer-color), transparent);
  filter: blur(1px);
  transform: skewX(-22deg);
  animation: publicButtonShimmer 2.8s ease-in-out infinite;
}

.magicui-shimmer-button .shimmer-button-content {
  position: relative;
  z-index: 1;
}

.public-outline-action.magicui-shimmer-button,
.public-bottom-action.magicui-shimmer-button {
  --button-shimmer-color: rgba(241, 83, 124, 0.36);
}

@keyframes publicButtonShimmer {
  0%, 18% { left: -42%; }
  72%, 100% { left: 118%; }
}

.public-hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.public-aurora {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.24;
  background:
    radial-gradient(ellipse at 14% 18%, rgba(201, 241, 255, 0.48), transparent 48%),
    radial-gradient(ellipse at 52% 23%, rgba(255, 220, 233, 0.46), transparent 52%),
    radial-gradient(ellipse at 88% 20%, rgba(233, 251, 255, 0.48), transparent 50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 58%, rgba(0, 0, 0, 0.72) 70%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0 58%, rgba(0, 0, 0, 0.72) 70%, transparent 86%);
  transform: translate3d(0, 0, 0);
}

.public-aurora.is-webgl-ready { background: none; }
.public-aurora canvas { display: block; width: 100%; height: 100%; background: transparent; }

.public-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  width: min(1320px, calc(100% - 56px));
  min-height: 660px;
  margin: 0 auto;
  padding: 82px 0 76px;
}

.public-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: #121a28;
  font-size: clamp(46px, 4.6vw, 66px);
  font-weight: 930;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.public-hero-copy h1 > span {
  display: block;
  white-space: nowrap;
}

.public-hero-split-title.split-parent {
  display: block;
  overflow: visible;
  text-align: left;
}

.public-hero-title-line {
  display: block;
  min-height: 1.08em;
  overflow: hidden;
}

.public-hero-title-text {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  overflow: visible;
  color: inherit;
  vertical-align: bottom;
  white-space: normal;
}

.public-hero-title-text.split-word { gap: 0; }
.public-hero-title-text .split-char {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--split-index) * 100ms);
}

.public-hero-copy > p {
  max-width: 650px;
  margin: 28px 0 0;
  color: #5e6b7f;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.75;
}

.shiny-text.public-hero-lead-shiny {
  --shiny-color: #5e6b7f;
  --shiny-shine-color: #ffffff;
  --shiny-spread: 120deg;
  --shiny-speed: 2s;
  --shiny-delay: 0s;
  white-space: normal;
  animation: publicHeroShinyTextSweep var(--shiny-speed) linear infinite;
}

@keyframes publicHeroShinyTextSweep {
  0% { background-position: 150% center; }
  100% { background-position: -50% center; }
}

.public-hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
}

.public-primary-btn,
.public-secondary-btn {
  min-height: 54px;
  padding: 13px 24px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 850;
}

.public-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dde3ec;
  color: #2f3b4e;
  background: #ffffff;
  text-decoration: none;
}

.public-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 21px;
  margin-top: 25px;
  color: #69768a;
  font-size: 13px;
  font-weight: 700;
}

.public-hero-proof span::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #42b8df;
  content: "";
  vertical-align: 2px;
}

.public-hero-visual {
  position: relative;
  min-height: 480px;
}

.public-hero-visual::before {
  position: absolute;
  inset: 8% 7%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #ffffff 0 18%, #ffeaf0 45%, #e6f8ff 76%, transparent 77%);
  filter: drop-shadow(0 36px 55px rgba(36, 67, 99, 0.12));
  content: "";
}

.public-hero-orbit {
  position: absolute;
  inset: 15% 11%;
  border: 1px solid rgba(111, 135, 165, 0.2);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.public-hero-orbit.orbit-two {
  inset: 26% 23%;
  border-color: rgba(236, 82, 119, 0.25);
  transform: rotate(19deg);
}

.public-hero-visual > article {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(330px, 64%);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.87);
  box-shadow: 0 26px 70px rgba(36, 56, 83, 0.16);
  backdrop-filter: blur(14px);
  transform: translate(-50%, -50%);
}

.public-hero-visual article small { color: #e4436d; font-size: 12px; font-weight: 850; }
.public-hero-visual article > strong { display: block; margin-top: 8px; color: #1d2839; font-size: 18px; }
.public-hero-visual article div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 22px; color: #667388; font-size: 11px; }
.public-hero-visual article div i { height: 4px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, #f45f82 72%, #e8edf4 72%); }
.public-hero-visual article div b { color: #28a5cf; }

.public-orbit-avatar {
  --avatar-patrol-x: 8px;
  --avatar-patrol-y: -4px;
  --avatar-return-x: -3px;
  --avatar-return-y: 4px;
  --avatar-motion-duration: 18s;
  --avatar-motion-delay: 0s;
  position: absolute;
  z-index: 3;
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  overflow: hidden;
  border: 5px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #fb6d88, #46bce4);
  box-shadow: 0 14px 32px rgba(45, 63, 90, 0.18);
  animation-name: publicAvatarBreathOrbit;
  animation-duration: var(--avatar-motion-duration);
  animation-delay: var(--avatar-motion-delay);
  animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
  will-change: transform, box-shadow;
}

.public-hero-stage.is-motion-active .public-orbit-avatar { animation-play-state: running; }

@keyframes publicAvatarBreathOrbit {
  0%, 100% {
    box-shadow: 0 14px 32px rgba(45, 63, 90, 0.18);
    transform: translate3d(0, 0, 0) scale(0.985);
  }
  36% {
    box-shadow: 0 20px 40px rgba(45, 63, 90, 0.24);
    transform: translate3d(var(--avatar-patrol-x), var(--avatar-patrol-y), 0) scale(1.025);
  }
  72% {
    box-shadow: 0 16px 35px rgba(45, 63, 90, 0.2);
    transform: translate3d(var(--avatar-return-x), var(--avatar-return-y), 0) scale(0.998);
  }
}

.public-orbit-avatar img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.public-orbit-avatar i { font-style: normal; font-weight: 900; }
.public-orbit-avatar-1 { --avatar-patrol-x: 10px; --avatar-patrol-y: -4px; --avatar-return-x: -3px; --avatar-return-y: 5px; --avatar-motion-duration: 17s; --avatar-motion-delay: -2.6s; top: 7%; left: 18%; width: 64px; height: 64px; }
.public-orbit-avatar-2 { --avatar-patrol-x: 6px; --avatar-patrol-y: 10px; --avatar-return-x: -5px; --avatar-return-y: -3px; --avatar-motion-duration: 21s; --avatar-motion-delay: -9.4s; top: 10%; right: 12%; width: 80px; height: 80px; }
.public-orbit-avatar-3 { --avatar-patrol-x: -4px; --avatar-patrol-y: 9px; --avatar-return-x: 5px; --avatar-return-y: -4px; --avatar-motion-duration: 19s; --avatar-motion-delay: -6.2s; top: 43%; left: 0; width: 76px; height: 76px; }
.public-orbit-avatar-4 { --avatar-patrol-x: -9px; --avatar-patrol-y: 5px; --avatar-return-x: 4px; --avatar-return-y: -4px; --avatar-motion-duration: 22s; --avatar-motion-delay: -13.5s; right: 0; bottom: 19%; width: 64px; height: 64px; }
.public-orbit-avatar-5 { --avatar-patrol-x: -8px; --avatar-patrol-y: -5px; --avatar-return-x: 4px; --avatar-return-y: 4px; --avatar-motion-duration: 18s; --avatar-motion-delay: -4.8s; bottom: 3%; left: 28%; width: 72px; height: 72px; }
.public-orbit-avatar-6 { --avatar-patrol-x: 8px; --avatar-patrol-y: 5px; --avatar-return-x: -4px; --avatar-return-y: -3px; --avatar-motion-duration: 16s; --avatar-motion-delay: -11.1s; top: 31%; right: 2%; width: 52px; height: 52px; border-width: 4px; }
.public-orbit-avatar-7 { --avatar-patrol-x: -7px; --avatar-patrol-y: 5px; --avatar-return-x: 3px; --avatar-return-y: -4px; --avatar-motion-duration: 20s; --avatar-motion-delay: -15.7s; right: 23%; bottom: 3%; width: 56px; height: 56px; border-width: 4px; }
.public-orbit-avatar-8 { --avatar-patrol-x: -6px; --avatar-patrol-y: -6px; --avatar-return-x: 5px; --avatar-return-y: 3px; --avatar-motion-duration: 15s; --avatar-motion-delay: -7.3s; bottom: 27%; left: 7%; width: 50px; height: 50px; border-width: 4px; }

.public-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1140px, calc(100% - 56px));
  margin: 0 auto;
  border-block: 1px solid #e8ecf2;
}

.public-stats article { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 13px; padding: 30px 20px; }
.public-stats article + article::before { position: absolute; top: 25%; bottom: 25%; left: 0; width: 1px; background: #e4e9f0; content: ""; }
.public-stats strong { color: #172033; font-size: clamp(31px, 3.2vw, 46px); font-weight: 930; letter-spacing: -0.04em; }
.public-stats span { color: #758095; font-size: 14px; font-weight: 750; }
.public-stat-sparkles { min-width: 0; overflow: visible; }
.public-stats .public-stat-sparkles::before {
  inset: -10px -15px;
  background:
    radial-gradient(circle at 22% 35%, rgba(241, 83, 124, 0.26), transparent 44%),
    radial-gradient(circle at 78% 56%, rgba(40, 172, 213, 0.24), transparent 48%);
  filter: blur(9px);
}
.public-stats .public-stat-sparkles .sparkles-text-content {
  color: #172033;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #172033;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: none;
  animation: none;
}
.public-stats .public-stat-sparkles .sparkle-star {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: #f1537c;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  font-size: 0;
}
.public-stats .public-stat-sparkles .sparkle-star-1 { top: -8px; left: 12%; background: #f1537c; box-shadow: none; filter: drop-shadow(0 0 5px rgba(241, 83, 124, 0.9)); }
.public-stats .public-stat-sparkles .sparkle-star-2 { top: 13%; right: -10px; background: #28acd5; box-shadow: none; filter: drop-shadow(0 0 5px rgba(40, 172, 213, 0.88)); animation-delay: 0.38s; }
.public-stats .public-stat-sparkles .sparkle-star-3 { bottom: -8px; left: 61%; background: #f59e0b; box-shadow: none; filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.86)); animation-delay: 0.76s; }
.public-stat-sparkle-4 { bottom: 16%; left: -10px; background: #7768eb; box-shadow: none; filter: drop-shadow(0 0 5px rgba(119, 104, 235, 0.84)); animation-delay: 1.05s; }

.public-section {
  width: min(1240px, calc(100% - 56px));
  margin: 0 auto;
  padding: 112px 0;
  scroll-margin-top: 90px;
}

.public-section-heading { max-width: 760px; margin-bottom: 45px; }
.public-advantages-heading { max-width: none; }
.public-advantages-heading h2 { white-space: nowrap; }
.public-section-heading h2,
.public-assurance-copy h2,
.public-bottom-cta h2 { margin: 0; color: #172033; font-size: clamp(32px, 4vw, 50px); font-weight: 920; letter-spacing: -0.045em; line-height: 1.18; }
.public-section-heading p { margin: 14px 0 0; color: #6c788c; font-size: 16px; line-height: 1.7; }

.public-advantage-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid #e6eaf1;
}

.public-advantage-list article { position: relative; min-height: 230px; padding: 31px 28px; }
.public-advantage-list article + article { border-left: 1px solid #e6eaf1; }
.public-advantage-list span { color: #e24a70; font-size: 12px; font-weight: 900; }
.public-advantage-list h3 { margin: 55px 0 10px; color: #202a3b; font-size: 20px; }
.public-advantage-list p { margin: 0; color: #6b778a; font-size: 14px; line-height: 1.75; }

.public-talent-section {
  width: 100%;
  padding-inline: max(28px, calc((100vw - 1240px) / 2));
  background: #f6f8fb;
}

.public-heading-row { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 24px; }
.public-heading-row > div { max-width: 760px; }
.public-outline-action {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border: 1px solid #d9e0e9;
  border-radius: 11px;
  color: #344154;
  background: #ffffff;
  font-weight: 820;
  text-decoration: none;
  cursor: pointer;
}

.public-track-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.public-track-filter button { min-height: 38px; padding: 8px 15px; border: 1px solid #e0e5ec; border-radius: 999px; color: #687589; background: #fff; font-size: 13px; font-weight: 780; cursor: pointer; }
.public-track-filter button.active { border-color: #f37896; color: #d93662; background: #fff1f5; }

.public-talent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.public-talent-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e9f0;
  border-radius: 19px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(35, 50, 72, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.public-talent-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(35, 50, 72, 0.12); }
.public-talent-case { position: relative; display: block; width: 100%; height: 204px; padding: 0; overflow: hidden; border: 0; color: #fff; background: linear-gradient(135deg, #ffc0d1, #a8e6f7); text-align: left; text-decoration: none; cursor: pointer; }
.public-talent-case:disabled { cursor: default; }
.public-talent-case img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.public-talent-card:hover .public-talent-case img { transform: scale(1.035); }
.public-case-fallback { display: grid; width: 100%; height: 100%; place-items: center; font-size: 48px; font-weight: 900; }
.public-talent-case > span:last-child { position: absolute; right: 13px; bottom: 13px; padding: 7px 10px; border-radius: 8px; background: rgba(20, 27, 39, 0.68); backdrop-filter: blur(7px); font-size: 11px; font-weight: 800; }
.public-talent-card-body { padding: 18px; }
.public-talent-profile { display: flex; align-items: center; gap: 11px; }
.public-talent-avatar { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #f06586, #43b8e0); }
.public-talent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.public-talent-avatar i { font-style: normal; font-weight: 900; }
.public-talent-profile h3 { margin: 0 0 3px; color: #212b3b; font-size: 17px; }
.public-talent-profile p { margin: 0; color: #7b8698; font-size: 12px; }
.public-talent-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.public-talent-tags span { padding: 5px 8px; border-radius: 6px; color: #536176; background: #f0f3f7; font-size: 11px; font-weight: 750; }
.public-talent-case-title { min-height: 42px; margin: 13px 0 0; overflow: hidden; color: #59667a; font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.public-talent-state { grid-column: 1 / -1; display: grid; min-height: 220px; place-items: center; border: 1px dashed #d8dee8; border-radius: 18px; color: #7a8697; background: #fff; }
.public-talent-state.error { align-content: center; gap: 10px; }
.public-talent-state.error p { margin: 0; }
.public-talent-state.error button { padding: 9px 14px; border: 0; border-radius: 9px; color: #fff; background: #e44a70; cursor: pointer; }

.public-feature-section { width: 100%; padding-inline: max(28px, calc((100vw - 1240px) / 2)); }
.public-feature-rail { display: grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); overflow-x: auto; border-block: 1px solid #e5eaf1; scrollbar-width: thin; }
.public-feature-rail > button,
.public-feature-rail > a { display: flex; min-height: 278px; flex-direction: column; align-items: flex-start; padding: 26px 22px; border: 0; border-right: 1px solid #e5eaf1; color: inherit; background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
.public-feature-rail > :first-child { border-left: 1px solid #e5eaf1; }
.public-feature-rail > button:hover,
.public-feature-rail > a:hover { background: #fafbfc; }
.public-feature-rail span { color: #df3f68; font-size: 11px; font-weight: 900; }
.public-feature-rail h3 { margin: 42px 0 10px; color: #222d3e; font-size: 18px; }
.public-feature-rail p { flex: 1; margin: 0; color: #717d90; font-size: 13px; line-height: 1.7; }

.public-process-section { width: 100%; padding-inline: max(28px, calc((100vw - 1240px) / 2)); color: #fff; background: #182233; }
.public-process-section .public-section-heading h2 { color: #fff; }
.public-process-section .public-section-heading p { color: #aeb8c7; }
.public-process-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.public-process-line article { position: relative; padding: 25px 26px 32px 0; border-top: 1px solid #405066; }
.public-process-line article:not(:last-child)::after { position: absolute; top: -4px; right: 18px; width: 7px; height: 7px; border-radius: 50%; background: #f05d81; content: ""; }
.public-process-line i { color: #f87897; font-size: 12px; font-style: normal; font-weight: 900; }
.public-process-line h3 { margin: 35px 0 8px; color: #fff; font-size: 18px; }
.public-process-line p { margin: 0; color: #aab4c4; font-size: 13px; line-height: 1.7; }

.public-assurance-section { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 90px; }
.public-assurance-copy p { margin: 20px 0 0; color: #69768a; font-size: 15px; line-height: 1.8; }
.public-assurance-copy button { margin-top: 23px; padding: 0; border: 0; color: #dc3d67; background: transparent; font-size: 14px; font-weight: 850; cursor: pointer; }
.public-assurance-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e3e8ef; }
.public-assurance-points span { display: flex; min-height: 128px; flex-direction: column; justify-content: space-between; padding: 24px; color: #697589; font-size: 13px; }
.public-assurance-points span:nth-child(odd) { border-right: 1px solid #e3e8ef; }
.public-assurance-points span:nth-child(-n + 2) { border-bottom: 1px solid #e3e8ef; }
.public-assurance-points b { color: #263145; font-size: 18px; }

.public-bottom-cta {
  display: grid;
  align-items: center;
  width: min(1240px, calc(100% - 56px));
  margin: 0 auto 92px;
  padding: 56px 62px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(118deg, #e94c74, #f36a73 52%, #28acd5 130%);
  box-shadow: 0 30px 72px rgba(229, 66, 105, 0.22);
}

.public-bottom-border-glow {
  --edge-proximity: 0;
  --edge-glow-opacity: 0;
  --color-glow-opacity: 0;
  --fill-glow-opacity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: 50;
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;
  --glow-color: hsl(40deg 80% 80% / 100%);
  --glow-color-60: hsl(40deg 80% 80% / 60%);
  --glow-color-40: hsl(40deg 80% 80% / 40%);
  --glow-color-20: hsl(40deg 80% 80% / 20%);
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--border-radius);
  transform: translate3d(0, 0, 0.01px);
}

.public-bottom-border-glow::before,
.public-bottom-border-glow::after,
.public-bottom-border-glow > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

.public-bottom-border-glow::before {
  z-index: 1;
  padding: 2px;
  background: conic-gradient(from var(--cursor-angle), #c084fc, #f472b6, #38bdf8, #c084fc);
  opacity: var(--color-glow-opacity, 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.public-bottom-border-glow::after {
  z-index: 0;
  background: conic-gradient(from var(--cursor-angle), transparent 0 38%, rgba(192, 132, 252, 0.12) 44%, rgba(244, 114, 182, 0.2) 50%, rgba(56, 189, 248, 0.14) 56%, transparent 62% 100%);
  opacity: var(--fill-glow-opacity, 0);
  mix-blend-mode: soft-light;
}

.public-bottom-border-glow > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  opacity: var(--edge-glow-opacity, 0);
  mix-blend-mode: plus-lighter;
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
}

.public-bottom-border-glow > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 6px var(--glow-color-60),
    inset 0 0 18px var(--glow-color-40),
    0 0 8px var(--glow-color-60),
    0 0 22px 2px var(--glow-color-40),
    0 0 42px 4px var(--glow-color-20);
}

.border-glow-inner.public-bottom-cta-inner {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: visible;
}

.public-bottom-cta h2 { color: #fff; font-size: clamp(29px, 3.4vw, 44px); }
.public-bottom-cta p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.public-bottom-action { flex: 0 0 auto; min-height: 54px; padding: 13px 22px; border-radius: 13px; color: #d83a63; background: #fff; box-shadow: none; font-size: 14px; font-weight: 900; }

.public-register-backdrop { z-index: 250; background: rgba(19, 27, 40, 0.63); }
.public-register-modal { position: relative; display: grid; grid-template-columns: minmax(250px, 0.72fr) minmax(420px, 1.28fr); width: min(900px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; border: 0; background: #fff; }
.public-register-close { position: absolute; z-index: 3; top: 15px; right: 16px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #e1e6ed; border-radius: 50%; color: #667386; background: #fff; font-size: 22px; cursor: pointer; }
.public-register-intro { padding: 52px 35px; color: #fff; background: linear-gradient(150deg, #202b3e, #172132 60%, #283b4e); }
.public-register-intro span { color: #ff91ab; font-size: 12px; font-weight: 850; }
.public-register-intro h2 { margin: 18px 0 13px; color: #fff; font-size: 32px; line-height: 1.28; }
.public-register-intro p { margin: 0; color: #bdc7d5; font-size: 14px; line-height: 1.75; }
.public-register-form-shell { min-width: 0; padding: 42px 38px 35px; }
.public-register-form-shell .auth-form { width: 100%; }
.public-register-form-shell .auth-panel-heading { display: none; }
.public-register-form-shell .auth-register-review .auth-panel-heading { display: block; }
.public-register-form-shell .auth-review-actions { margin-top: 18px; }

@media (max-width: 1100px) {
  .public-list-header { grid-template-columns: 1fr auto; }
  .public-list-header nav { display: none; }
  .public-hero { grid-template-columns: 1fr minmax(390px, 0.85fr); }
  .public-hero-copy h1 > span { white-space: normal; }
  .public-hero-title-text { flex-wrap: wrap; }
  .public-advantages-heading h2 { white-space: normal; }
  .public-advantage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-advantage-list article:nth-child(3) { border-left: 0; }
  .public-advantage-list article:nth-child(n + 3) { border-top: 1px solid #e6eaf1; }
  .public-talent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-assurance-section { gap: 50px; }
}

@media (max-width: 760px) {
  .public-list-header { min-height: 66px; gap: 10px; padding: 10px 14px; }
  .public-list-brand img { width: 120px; }
  .public-header-actions { gap: 8px; }
  .public-login-link { display: none; }
  .public-header-register { min-height: 40px; padding: 8px 13px; font-size: 12px; }
  .public-aurora { opacity: 0.20; }
  .public-hero { grid-template-columns: 1fr; width: min(100% - 30px, 620px); min-height: 0; padding: 64px 0 52px; }
  .public-hero-copy h1 { font-size: clamp(40px, 12vw, 57px); }
  .public-hero-copy h1 > span { white-space: normal; }
  .public-hero-copy > p { margin-top: 20px; font-size: 16px; }
  .public-hero-actions { align-items: stretch; flex-direction: column; }
  .public-primary-btn, .public-secondary-btn { width: 100%; }
  .public-hero-proof { display: grid; gap: 8px; }
  .public-hero-visual { min-height: 385px; }
  .public-orbit-avatar { width: 58px; height: 58px; border-width: 4px; }
  .public-orbit-avatar-2, .public-orbit-avatar-3 { width: 67px; height: 67px; }
  .public-orbit-avatar-6 { width: 46px; height: 46px; }
  .public-orbit-avatar-1 { --avatar-patrol-x: 5px; --avatar-patrol-y: -2px; --avatar-return-x: -2px; --avatar-return-y: 3px; --avatar-motion-duration: 19s; }
  .public-orbit-avatar-2 { --avatar-patrol-x: 3px; --avatar-patrol-y: 5px; --avatar-return-x: -3px; --avatar-return-y: -2px; --avatar-motion-duration: 24s; }
  .public-orbit-avatar-3 { --avatar-patrol-x: -2px; --avatar-patrol-y: 5px; --avatar-return-x: 3px; --avatar-return-y: -2px; --avatar-motion-duration: 22s; }
  .public-orbit-avatar-4 { --avatar-patrol-x: -5px; --avatar-patrol-y: 3px; --avatar-return-x: 2px; --avatar-return-y: -2px; --avatar-motion-duration: 24s; }
  .public-orbit-avatar-5 { --avatar-patrol-x: -4px; --avatar-patrol-y: -3px; --avatar-return-x: 2px; --avatar-return-y: 2px; --avatar-motion-duration: 21s; }
  .public-orbit-avatar-6 { --avatar-patrol-x: 4px; --avatar-patrol-y: 3px; --avatar-return-x: -2px; --avatar-return-y: -2px; --avatar-motion-duration: 18s; }
  .public-orbit-avatar-7, .public-orbit-avatar-8 { display: none; }
  .public-stats { grid-template-columns: 1fr; width: calc(100% - 30px); }
  .public-stats article { justify-content: space-between; padding: 20px 4px; }
  .public-stats article + article::before { top: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  .public-section { width: calc(100% - 30px); padding: 78px 0; }
  .public-section-heading { margin-bottom: 30px; }
  .public-section-heading h2, .public-assurance-copy h2 { font-size: 34px; }
  .public-advantage-list { grid-template-columns: 1fr; }
  .public-advantage-list article { min-height: 195px; border-left: 0 !important; border-top: 1px solid #e6eaf1; }
  .public-advantage-list article:first-child { border-top: 0; }
  .public-advantage-list h3 { margin-top: 35px; }
  .public-talent-section, .public-feature-section, .public-process-section { width: 100%; padding-inline: 15px; }
  .public-heading-row { align-items: flex-start; flex-direction: column; }
  .public-outline-action { width: 100%; }
  .public-track-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .public-track-filter button { flex: 0 0 auto; }
  .public-talent-grid { grid-template-columns: 1fr; }
  .public-talent-case { height: 210px; }
  .public-feature-rail { grid-template-columns: repeat(7, 210px); }
  .public-feature-rail > button,
  .public-feature-rail > a { min-height: 250px; }
  .public-process-line { grid-template-columns: 1fr; }
  .public-process-line article { padding: 22px 0; }
  .public-process-line article:not(:last-child)::after { top: auto; right: auto; bottom: -4px; left: 0; }
  .public-process-line h3 { margin-top: 16px; }
  .public-assurance-section { grid-template-columns: 1fr; gap: 35px; }
  .public-assurance-points span { min-height: 112px; padding: 18px; }
  .public-bottom-cta { width: calc(100% - 30px); margin-bottom: 55px; padding: 38px 25px; border-radius: 20px; }
  .border-glow-inner.public-bottom-cta-inner { align-items: stretch; flex-direction: column; }
  .public-bottom-action { width: 100%; }
  .public-register-backdrop { padding: 0; }
  .public-register-modal { grid-template-columns: 1fr; width: 100vw; max-height: 100dvh; min-height: 100dvh; border-radius: 0; }
  .public-register-intro { padding: 42px 22px 24px; }
  .public-register-intro h2 { max-width: calc(100% - 40px); font-size: 25px; }
  .public-register-form-shell { padding: 24px 18px 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-orbit-avatar {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .public-aurora canvas { display: none; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 148, 170, 0.34), transparent 30%),
    radial-gradient(circle at 88% 3%, rgba(255, 99, 99, 0.32), transparent 34%),
    linear-gradient(135deg, #fff5f7 0%, #fff 42%, #fff1f5 100%);
  min-height: 100vh;
}

.site-footer {
  width: 100%;
  padding: 10px 16px 12px;
  color: #3f4b5f;
  background: transparent;
  text-align: center;
  font-size: 12px;
  line-height: 1.75;
  font-weight: 800;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 16px rgba(255, 255, 255, 0.86);
}

.site-footer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer-disclaimer {
  margin-top: 2px;
}

.site-footer-police {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-footer-police-badge {
  width: 16px;
  height: auto;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

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

button {
  border: 0;
  cursor: pointer;
}

a {
  color: var(--red-dark);
  text-decoration: none;
}

.shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px;
  color: white;
  background: linear-gradient(115deg, #a80f2d, #e91f45 46%, #ff7b75);
  box-shadow: 0 18px 45px rgba(145, 15, 40, 0.22);
}

.topbar.compact-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.topbar.compact-topbar .nav {
  grid-column: 1;
  justify-self: stretch;
}

.topbar.compact-topbar .user-chip {
  grid-column: 2;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-weight: 900;
}

.brand-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
}

.brand-subtitle {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

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

.nav button,
.ghost-btn {
  color: white;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 10px 14px;
}

.nav button {
  position: relative;
  overflow: visible;
}

.nav-notification-dot {
  position: absolute;
  z-index: 3;
  top: 1px;
  right: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f0262f;
  box-shadow: 0 2px 7px rgba(240, 38, 47, .42);
  pointer-events: none;
}

.nav button.active .nav-notification-dot {
  top: -2px;
  right: 2px;
  border-color: #fff;
}

.nav button.active,
.ghost-btn:hover,
.nav button:hover {
  background: white;
  color: var(--red-dark);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.main {
  width: min(1440px, calc(100% - 48px));
  margin: 24px auto 48px;
}

.auth-wrap {
  width: min(1180px, calc(100% - 36px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 440px;
  align-items: center;
  gap: 42px;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 86px);
  line-height: 0.95;
  letter-spacing: 0;
  color: #97132e;
}

.hero-copy p {
  max-width: 680px;
  color: #5d3f48;
  font-size: 18px;
  line-height: 1.75;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.stat {
  padding: 18px;
  border: 1px solid rgba(233, 31, 69, 0.16);
  background: rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  backdrop-filter: blur(16px);
}

.stat strong {
  display: block;
  color: var(--red-dark);
  font-size: 28px;
}

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

.auth-panel,
.panel,
.card,
.drawer {
  background: rgba(255, 255, 255, 0.83);
  border: 1px solid rgba(233, 31, 69, 0.13);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(151, 19, 46, 0.13);
  backdrop-filter: blur(18px);
}

.auth-panel {
  padding: 26px;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: #f7e5e9;
  margin-bottom: 20px;
}

.tabs button {
  border-radius: 999px;
  padding: 11px;
  color: #81505d;
  background: transparent;
}

.tabs button.active {
  background: white;
  color: var(--red-dark);
  box-shadow: 0 8px 22px rgba(151, 19, 46, 0.12);
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.field label {
  color: #6b4651;
  font-size: 13px;
  font-weight: 700;
}

.field small {
  color: #8a929b;
  font-size: 12px;
  line-height: 1.45;
}

.field input,
.field select,
.field textarea,
.search-input {
  width: 100%;
  border: 1px solid #ecd0d7;
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: white;
  outline: none;
}

.field textarea {
  min-height: 86px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(233, 31, 69, 0.11);
}

.slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

input[type="range"] {
  accent-color: var(--red);
}

.primary-btn,
.secondary-btn,
.danger-btn,
.plain-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 800;
}

.primary-btn {
  color: white;
  background: linear-gradient(115deg, var(--red-dark), var(--red), var(--coral));
  box-shadow: 0 12px 28px rgba(233, 31, 69, 0.24);
}

.secondary-btn {
  color: var(--red-dark);
  background: #fff0f3;
  border: 1px solid #f1ccd4;
}

.danger-btn {
  color: #9a112c;
  background: #ffe7eb;
  border: 1px solid #f1b5c0;
}

.plain-btn {
  color: #6d4e56;
  background: white;
  border: 1px solid var(--line);
}

.plain-btn.danger-btn {
  color: #d22f52;
  background: #fff7fa;
  border-color: #ffd1dc;
}

.plain-btn.danger-btn:hover:not(:disabled) {
  color: #a51231;
  background: #ffeaf0;
  border-color: #ffb6c8;
}

.primary-btn:disabled,
.secondary-btn:disabled,
.danger-btn:disabled,
.plain-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.notice {
  border: 1px solid #ffd3dc;
  border-radius: 8px;
  padding: 12px 14px;
  color: #7e293a;
  background: #fff1f4;
  line-height: 1.6;
  font-size: 14px;
}

.grid {
  display: grid;
  gap: 18px;
}

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

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 18px;
}

.side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.side .panel {
  padding: 18px;
}

.panel {
  padding: 20px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-title h2,
.panel-title h3 {
  margin: 0;
}

.panel-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.toolbar .search-input {
  max-width: 360px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}

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

.talent-head {
  display: flex;
  gap: 13px;
  align-items: center;
}

.avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, #b41436, #ff5a66);
  flex: 0 0 auto;
}

.talent-name {
  margin: 0;
  font-size: 18px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 9px;
  color: #794553;
  background: #fff0f3;
  border: 1px solid #f4d3da;
  font-size: 12px;
  font-weight: 700;
}

.pill.ok {
  color: #08704e;
  background: #eafaf4;
  border-color: #c7ecdf;
}

.pill.warn {
  color: #8d5200;
  background: #fff5df;
  border-color: #f3ddb0;
}

.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.price {
  border-radius: 8px;
  padding: 12px;
  background: #fff7f8;
  border: 1px solid #f1d8de;
}

.price span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.price strong {
  display: block;
  margin-top: 3px;
  color: var(--red-dark);
  font-size: 18px;
}

.desc {
  color: #694d55;
  line-height: 1.58;
  min-height: 50px;
}

.card-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.table-wrap {
  overflow-x: auto;
}

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

th,
td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid #f0dce1;
  vertical-align: top;
  font-size: 14px;
}

th {
  color: #7c4955;
  background: #fff2f5;
  position: sticky;
  top: 0;
}

td input,
td select {
  width: 100%;
  min-width: 116px;
  border: 1px solid #efd3da;
  border-radius: 8px;
  padding: 9px;
}

.empty {
  padding: 34px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed #e8cbd2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

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

.folder-card {
  padding: 16px;
  border-left: 6px solid var(--folder-color, var(--red));
}

.folder-card h3 {
  margin: 0 0 8px;
}

.folder-toolbar {
  display: grid;
  grid-template-columns:
    minmax(170px, 1.05fr)
    minmax(180px, 0.82fr)
    minmax(145px, 0.72fr)
    minmax(170px, 0.95fr)
    minmax(190px, 0.9fr);
  gap: 10px;
  align-items: end;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.folder-toolbar .field {
  margin: 0;
}

.folder-filter-name,
.folder-filter-talent {
  min-width: 220px;
}

.folder-filter-color-field {
  min-width: 210px;
}

.folder-filter-colors {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid #dfe8ef;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.folder-filter-color-all,
.folder-filter-color-dot {
  flex: 0 0 auto;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.folder-filter-color-all {
  min-width: 42px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  color: #4b5563;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.folder-filter-color-dot {
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--swatch-color);
  box-shadow:
    0 0 0 1px #d1d5db,
    0 1px 2px rgba(15, 23, 42, 0.1);
}

.folder-filter-color-all:hover,
.folder-filter-color-dot:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.18),
    0 8px 16px rgba(15, 23, 42, 0.08);
}

.folder-filter-color-all.active,
.folder-filter-color-dot.active {
  border-color: #3b82f6;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.18),
    0 8px 16px rgba(15, 23, 42, 0.08);
}

.hs-dropdown {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
}

.hs-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.hs-dropdown-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-dropdown-toggle svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 0.18s ease;
}

.hs-dropdown:hover > .hs-dropdown-toggle,
.hs-dropdown:focus-within > .hs-dropdown-toggle {
  color: #111827;
  background: #f9fafb;
}

.hs-dropdown:hover > .hs-dropdown-toggle svg,
.hs-dropdown:focus-within > .hs-dropdown-toggle svg {
  transform: rotate(180deg);
}

.hs-dropdown-toggle:focus-visible,
.hs-dropdown-menu button:focus-visible,
.hs-dropdown-menu a:focus-visible {
  position: relative;
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.hs-dropdown-toggle:disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background: #f9fafb;
}

.hs-dropdown-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  min-width: 240px;
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  opacity: 0;
  transition: opacity 0.18s ease, margin 0.18s ease;
}

.hs-dropdown:hover > .hs-dropdown-menu,
.hs-dropdown:focus-within > .hs-dropdown-menu {
  display: block;
  opacity: 1;
}

.hs-dropdown-menu .p-1 {
  padding: 4px;
}

.hs-dropdown-menu .space-y-0\.5 > * + * {
  margin-top: 2px;
}

.hs-dropdown-menu button,
.hs-dropdown-menu a,
.folder-push-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  color: #374151;
  background: #ffffff;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.hs-dropdown-menu button:hover,
.hs-dropdown-menu a:hover {
  color: #111827;
  background: #f9fafb;
}

.folder-toolbar-dropdown {
  width: 100%;
}

.folder-toolbar-dropdown-button {
  justify-content: space-between;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
  text-align: left;
}

.folder-toolbar-dropdown-menu {
  width: max(100%, 240px);
  min-width: 240px;
}

.folder-toolbar-dropdown-menu button[aria-checked="true"] {
  color: #111827;
  background: #f9fafb;
}

.folder-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.folder-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(440px, 1.4fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 150px;
  padding: 18px;
  border-left: 0;
  border-top: 5px solid var(--folder-color, var(--red));
}

.folder-card-main h3 {
  margin: 0 0 10px;
  color: #18191c;
  font-size: 18px;
}

.folder-card-main .desc {
  margin: 0;
  color: #4d535a;
  font-weight: 800;
  line-height: 1.55;
}

.folder-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(58px, 1fr));
  gap: 0;
  min-width: 0;
  padding: 2px 0 0;
}

.folder-flow::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 18px;
  height: 2px;
  border-radius: 999px;
  background: #e7ebef;
}

.folder-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  color: #8a929b;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.folder-step i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dfe4ea;
  border-radius: 999px;
  color: #8a929b;
  background: #ffffff;
  font-style: normal;
  box-shadow: 0 0 0 5px #ffffff;
}

.folder-step b {
  line-height: 1.2;
  white-space: nowrap;
}

.folder-step.active {
  color: #0b8fc5;
}

.folder-step.active i {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #00aeec, #fb7299);
}

.folder-row-actions {
  justify-content: flex-end;
  min-width: 210px;
  margin-top: 0;
  padding-bottom: 0;
}

.admin-folder-page {
  padding: 22px;
}

.admin-folder-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-folder-title h2 {
  margin: 10px 0 6px;
  font-size: 24px;
  line-height: 1.15;
}

.admin-folder-title p {
  margin: 0;
  color: #61666d;
  font-weight: 700;
}

.admin-folder-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 8px;
  min-width: 260px;
  padding: 8px;
  border: 1px solid #e3e5e7;
  border-radius: 8px;
  background: #f8fbfd;
}

.admin-folder-summary span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
}

.admin-folder-summary strong {
  color: #18191c;
  font-size: 20px;
  line-height: 1;
}

.admin-folder-summary small {
  color: #8a929b;
  font-size: 12px;
  font-weight: 800;
}

.admin-folder-create {
  min-height: 42px;
  padding: 0 18px;
  white-space: nowrap;
}

.admin-folder-list {
  gap: 12px;
}

.admin-folder-row {
  grid-template-columns: minmax(240px, 0.9fr) minmax(520px, 1.4fr) minmax(230px, auto);
  min-height: 132px;
  padding: 16px;
  border-top-width: 4px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.admin-folder-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.admin-folder-title-line h3 {
  margin: 0;
}

.admin-folder-main .desc {
  min-height: 0;
}

.admin-folder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-folder-meta span {
  padding: 5px 9px;
  border: 1px solid #e3e5e7;
  border-radius: 999px;
  color: #61666d;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.admin-folder-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 8px;
  min-width: 230px;
}

.admin-push-select {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-push-select > span {
  color: #8a929b;
  font-size: 12px;
  font-weight: 900;
}

.folder-push-dropdown {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
}

.folder-push-control {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.folder-push-button,
.folder-push-arrow,
.folder-push-menu button {
  color: #374151;
  background: #ffffff;
  font-size: 14px;
  font-weight: 650;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.folder-push-button {
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
}

.folder-push-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  border-left: 1px solid #d1d5db;
}

.folder-push-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.folder-push-button:hover,
.folder-push-arrow:hover,
.folder-push-menu button:hover {
  color: #111827;
  background: #f9fafb;
}

.folder-push-button:focus-visible,
.folder-push-arrow:focus-visible,
.folder-push-menu button:focus-visible {
  position: relative;
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.folder-push-button:disabled,
.folder-push-arrow:disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background: #f9fafb;
}

.folder-push-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  width: 100%;
  min-width: 240px;
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.folder-push-dropdown:hover .folder-push-menu,
.folder-push-dropdown:focus-within .folder-push-menu {
  display: block;
}

.folder-push-menu button,
.folder-push-empty {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
}

.folder-push-empty {
  color: #6b7280;
  font-size: 13px;
  font-weight: 650;
}

.react-bits-folder-card {
  grid-template-columns: minmax(150px, 0.34fr) minmax(360px, 1fr) minmax(220px, auto);
  gap: 18px;
  align-items: center;
  min-height: 148px;
  padding: 16px;
  border-top: 0;
  border-left: 1px solid rgba(255, 177, 201, 0.72);
  overflow: visible;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--folder-color, #fb5d7a) 13%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 249, 252, 0.9) 54%, rgba(239, 250, 255, 0.86));
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
}

.react-bits-folder-visual-wrap {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 116px;
}

.react-bits-folder-preview {
  --folder-back-color: color-mix(in srgb, var(--folder-color, #fb5d7a) 88%, #1f2937 12%);
  --paper-1: #eceff3;
  --paper-2: #f6f8fb;
  --paper-3: #ffffff;
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 108px;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.34)),
    color-mix(in srgb, var(--folder-color, #fb5d7a) 11%, #ffffff 89%);
  cursor: pointer;
  overflow: visible;
}

.react-bits-folder-preview:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.96);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--folder-color, #fb5d7a) 34%, transparent);
}

.react-bits-folder {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 84px;
  transform-origin: center;
  transition: transform 0.2s ease-in;
}

.react-bits-folder-preview:hover .react-bits-folder,
.react-bits-folder-preview.open .react-bits-folder {
  transform: translateY(-8px);
}

.react-bits-folder__back {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 104px;
  height: 82px;
  border-radius: 0 10px 10px 10px;
  background: var(--folder-back-color);
  box-shadow: 0 18px 30px color-mix(in srgb, var(--folder-color, #fb5d7a) 28%, transparent);
}

.react-bits-folder__back::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 98%;
  left: 0;
  width: 32px;
  height: 11px;
  border-radius: 6px 6px 0 0;
  background: var(--folder-back-color);
}

.react-bits-paper {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 10%;
  display: grid;
  align-content: start;
  gap: 3px;
  width: 72%;
  height: 78%;
  padding: 9px 8px;
  border-radius: 10px;
  color: #1f2937;
  text-align: left;
  background: var(--paper-1);
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.1);
  transform: translate(-50%, 10%);
  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
  overflow: hidden;
}

.react-bits-paper strong {
  min-width: 0;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-bits-paper small {
  color: #7b8491;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-bits-paper-2 {
  width: 80%;
  height: 70%;
  background: var(--paper-2);
}

.react-bits-paper-3 {
  width: 90%;
  height: 60%;
  background: var(--paper-3);
}

.react-bits-folder__front {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 5px 10px 10px 10px;
  background: var(--folder-color, #fb5d7a);
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.react-bits-folder__front--right {
  transform-origin: bottom right;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 44% 100%);
  background: color-mix(in srgb, var(--folder-color, #fb5d7a) 91%, #ffffff 9%);
}

.react-bits-folder-preview:not(.open):hover .react-bits-paper {
  transform: translate(-50%, 0%);
}

.react-bits-folder-preview:hover .react-bits-folder__front,
.react-bits-folder-preview.open .react-bits-folder__front {
  transform: skew(15deg) scaleY(0.6);
}

.react-bits-folder-preview:hover .react-bits-folder__front--right,
.react-bits-folder-preview.open .react-bits-folder__front--right {
  transform: skew(-15deg) scaleY(0.6);
}

.react-bits-folder-preview.open .react-bits-paper-1 {
  transform: translate(calc(-120% + var(--magnet-x, 0px)), calc(-70% + var(--magnet-y, 0px))) rotate(-15deg);
}

.react-bits-folder-preview.open .react-bits-paper-1:hover {
  transform: translate(calc(-120% + var(--magnet-x, 0px)), calc(-70% + var(--magnet-y, 0px))) rotate(-15deg) scale(1.08);
}

.react-bits-folder-preview.open .react-bits-paper-2 {
  height: 80%;
  transform: translate(calc(10% + var(--magnet-x, 0px)), calc(-70% + var(--magnet-y, 0px))) rotate(15deg);
}

.react-bits-folder-preview.open .react-bits-paper-2:hover {
  transform: translate(calc(10% + var(--magnet-x, 0px)), calc(-70% + var(--magnet-y, 0px))) rotate(15deg) scale(1.08);
}

.react-bits-folder-preview.open .react-bits-paper-3 {
  height: 80%;
  transform: translate(calc(-50% + var(--magnet-x, 0px)), calc(-100% + var(--magnet-y, 0px))) rotate(5deg);
}

.react-bits-folder-preview.open .react-bits-paper-3:hover {
  transform: translate(calc(-50% + var(--magnet-x, 0px)), calc(-100% + var(--magnet-y, 0px))) rotate(5deg) scale(1.08);
}

.react-bits-folder-shadow {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 13px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--folder-color, #fb5d7a) 22%, transparent);
  filter: blur(13px);
}

.react-bits-folder-main {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
}

.react-bits-folder-main .admin-folder-title-line {
  margin-bottom: 0;
}

.react-bits-folder-main h3 {
  font-size: 20px;
  line-height: 1.2;
}

.react-bits-folder-price {
  color: #fb4b87;
  font-size: 26px;
  font-weight: 950;
  line-height: 1.05;
}

.react-bits-folder-main .desc {
  min-height: 0;
  margin: 0;
  color: #4b5563;
  font-size: 14px;
}

.react-bits-folder-card .admin-folder-meta {
  margin-top: 0;
}

.react-bits-folder-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.react-bits-folder-progress span {
  padding: 4px 8px;
  border: 1px solid #e8eef4;
  border-radius: 999px;
  color: #8a929b;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.react-bits-folder-progress span.active {
  border-color: color-mix(in srgb, var(--folder-color, #fb5d7a) 26%, #ffffff);
  color: #ffffff;
  background: linear-gradient(135deg, #00aeec, var(--folder-color, #fb5d7a));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--folder-color, #fb5d7a) 18%, transparent);
}

.react-bits-folder-card .admin-folder-actions {
  align-self: center;
}

.admin-folder-page {
  overflow: visible;
  border-color: rgba(255, 214, 226, 0.78);
  background:
    radial-gradient(circle at 9% 0%, rgba(251, 75, 135, 0.12), transparent 28%),
    radial-gradient(circle at 94% 12%, rgba(52, 201, 243, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.96);
}

.admin-folder-head {
  padding: 18px;
  border: 1px solid rgba(227, 239, 248, 0.94);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 244, 249, 0.86) 58%, rgba(239, 250, 255, 0.88)),
    radial-gradient(circle at 76% 34%, rgba(251, 75, 135, 0.12), transparent 34%);
  box-shadow: 0 18px 46px rgba(31, 41, 55, 0.06);
}

.admin-folder-title h2 {
  font-size: 28px;
}

.admin-folder-title p {
  max-width: 560px;
}

.admin-folder-summary {
  border-color: rgba(225, 237, 246, 0.92);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.admin-folder-create {
  min-height: 46px;
  border-radius: 999px;
  padding-inline: 22px;
  box-shadow: 0 16px 28px rgba(251, 75, 135, 0.18);
}

.admin-folder-list {
  gap: 18px;
  overflow: visible;
}

.react-bits-folder-card {
  position: relative;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(250px, 280px);
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  padding: 20px 20px 20px 18px;
  border: 1px solid #e7ebf0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.055);
}

.react-bits-folder-card::before {
  content: none;
}

.react-bits-folder-card:has(.react-bits-folder-preview.open) {
  min-height: 268px;
  z-index: 1000;
  overflow: visible;
}

.react-bits-folder-card:has(.react-bits-folder-preview.open) .react-bits-folder-visual-wrap {
  position: relative;
  z-index: 1001;
}

.react-bits-folder-preview.open {
  z-index: 1002;
}

.react-bits-folder-preview.open .react-bits-paper {
  z-index: 1003;
}

.react-bits-folder-visual-wrap {
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-height: 190px;
  padding-top: 20px;
  overflow: visible;
}

.react-bits-folder-preview {
  width: 184px;
  height: 142px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.48)),
    color-mix(in srgb, var(--folder-color, #fb5d7a) 10%, #ffffff 90%);
}

.react-bits-folder {
  width: 132px;
  height: 106px;
}

.react-bits-folder__back {
  width: 132px;
  height: 104px;
  border-radius: 0 14px 14px 14px;
}

.react-bits-folder__back::after {
  width: 42px;
  height: 14px;
  border-radius: 8px 8px 0 0;
}

.react-bits-paper {
  gap: 5px;
  padding: 12px 10px;
  border-radius: 12px;
}

.react-bits-paper strong {
  font-size: 11px;
}

.react-bits-paper small {
  font-size: 10px;
}

.react-bits-folder-main {
  align-content: stretch;
  gap: 13px;
  padding: 8px 0 2px;
}

.react-bits-folder-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px;
}

.react-bits-folder-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #e94f7a;
  background: #fde8f0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.folder-visual-kicker {
  margin: 0;
}

.react-bits-folder-main h3 {
  margin: 0;
  color: #101828;
  font-size: 30px;
  font-weight: 780;
  line-height: 1.18;
}

.react-bits-folder-price {
  align-self: start;
  padding: 2px 0 0;
  color: #e94f7a;
  background: transparent;
  font-size: 30px;
  font-weight: 760;
  line-height: 1.1;
  white-space: nowrap;
}

.shiny-text.folder-price-shiny {
  --shiny-color: #ff7691;
  --shiny-shine-color: #ffeddf;
  --shiny-spread: 85deg;
  --shiny-speed: 1.8s;
  --shiny-delay: 0s;
  animation-name: folderPriceShinySweep;
  animation-duration: calc(var(--shiny-speed) + var(--shiny-delay));
}

@keyframes folderPriceShinySweep {
  from {
    background-position: 150% center;
  }

  to {
    background-position: -50% center;
  }
}

/* 既有菜单型下拉也统一到同一套圆角、渐变选中与青色焦点语言。 */
.folder-toolbar-dropdown-button,
.folder-push-button,
.folder-deal-button {
  border-color: #dfe7ee;
  border-radius: 10px;
  color: #25303c;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 7px rgba(31, 48, 65, 0.025);
}

.hs-dropdown:hover > .hs-dropdown-toggle,
.hs-dropdown:focus-within > .hs-dropdown-toggle,
.folder-push-button:hover,
.folder-deal-button:hover {
  border-color: #79d0ef;
  color: #087ea9;
  background: #fcfeff;
  box-shadow: 0 0 0 4px rgba(32, 174, 229, 0.1);
}

.hs-dropdown-menu,
.folder-push-menu,
.folder-deal-menu {
  padding: 2px;
  border-color: rgba(190, 222, 234, 0.96);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 20px 48px rgba(31, 48, 65, 0.17), 0 4px 12px rgba(31, 48, 65, 0.07);
  backdrop-filter: blur(16px);
}

.hs-dropdown-menu .p-1,
.folder-push-menu .p-1,
.folder-deal-menu .p-1 {
  padding: 4px;
}

.hs-dropdown-menu button,
.hs-dropdown-menu a,
.folder-push-menu button,
.folder-deal-menu button,
.folder-push-empty {
  min-height: 36px;
  border-radius: 9px;
  color: #35404c;
  background: transparent;
  font-weight: 750;
}

.hs-dropdown-menu button:hover,
.hs-dropdown-menu a:hover,
.folder-push-menu button:hover,
.folder-deal-menu button:hover {
  color: #087ea9;
  background: #eff9fd;
}

.folder-toolbar-dropdown-menu button[aria-checked="true"],
.folder-deal-menu button[aria-checked="true"] {
  justify-content: space-between;
  color: #087ea9;
  background: linear-gradient(135deg, rgba(226, 247, 254, 0.98), rgba(255, 239, 246, 0.94));
}

.folder-toolbar-dropdown-menu button[aria-checked="true"]::after,
.folder-deal-menu button[aria-checked="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 4px;
  margin: 0 3px 3px 8px;
  border-bottom: 2px solid #1aa2cf;
  border-left: 2px solid #1aa2cf;
  transform: rotate(-45deg);
}

.react-bits-folder-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.react-bits-folder-info-row .desc {
  flex: 0 1 auto;
}

.react-bits-folder-card .admin-folder-meta {
  display: inline-flex;
  gap: 8px;
}

.react-bits-folder-card .admin-folder-meta span {
  padding: 5px 12px;
  border-color: #e5e9ef;
  color: #596170;
  background: #ffffff;
  font-size: 13px;
  font-weight: 650;
}

.folder-avatar-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}

.folder-static-avatars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.folder-static-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f4f7fb;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.folder-static-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: top;
}

.folder-color-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid #e5e9ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.folder-color-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--swatch-color);
  box-shadow: 0 0 0 1px #dbe2ea;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.folder-color-dot:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px #b7c1ce, 0 7px 14px rgba(15, 23, 42, 0.12);
}

.folder-color-dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}

.folder-color-dot.active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--swatch-color);
}

.folder-avatar-strip.empty-strip {
  color: #7b8492;
  font-size: 13px;
  font-weight: 650;
}

.react-bits-folder-progress {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 12px 0;
}

.react-bits-folder-progress::before,
.react-bits-folder-progress::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  display: block;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.react-bits-folder-progress::before {
  z-index: -1;
  background: #e5e7eb;
}

.react-bits-folder-progress::after {
  content: none;
}

.react-bits-folder-progress span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #4b5563;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
}

.react-bits-folder-progress i {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  color: #4b5563;
  background: #f3f4f6;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  line-height: 24px;
  box-shadow: none;
}

.react-bits-folder-progress b {
  display: block;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.react-bits-folder-progress span.active {
  color: #4b5563;
  background: #ffffff;
  box-shadow: none;
}

.react-bits-folder-progress span.current {
  background: #ffffff;
}

.react-bits-folder-progress span.active i {
  color: #4b5563;
  background: #f3f4f6;
  box-shadow: none;
}

.react-bits-folder-progress span.current i {
  transform: none;
  color: #ffffff;
  background: #3b82f6;
  box-shadow: none;
}

.folder-command-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  padding: 10px 0 10px 28px;
  border: 1px solid #e6f0f7;
  border-width: 0 0 0 1px;
  border-color: #e7ebf0;
  border-radius: 0;
  background: transparent;
}

.folder-action-buttons {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  overflow: hidden;
  border-radius: 4px;
  background: #ffffff;
}

.folder-action-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 40px;
  margin-left: -1px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  color: #374151;
  background: #ffffff;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.folder-action-icon-btn:first-child {
  margin-left: 0;
}

.folder-action-icon-btn-start {
  border-radius: 4px 0 0 4px;
}

.folder-action-icon-btn-end {
  border-radius: 0 4px 4px 0;
}

.folder-action-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.folder-action-icon-btn:hover {
  z-index: 1;
  color: #111827;
  background: #f9fafb;
}

.folder-action-icon-btn:focus-visible {
  z-index: 2;
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}

.folder-action-icon-btn:disabled {
  pointer-events: auto;
  opacity: 0.5;
  cursor: not-allowed;
}

.folder-command-panel .admin-push-select {
  display: grid;
  align-content: end;
  gap: 12px;
  min-width: 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid #e7ebf0;
  border-radius: 0;
  background: transparent;
}

.folder-command-panel .admin-push-select > span {
  color: #3f4652;
  font-size: 14px;
  font-weight: 720;
}

.folder-command-panel .folder-push-button {
  border-color: #dbe2ea;
  border-radius: 12px;
}

.folder-command-panel .folder-push-button {
  min-height: 48px;
}

.folder-command-panel .folder-push-button {
  padding-inline: 14px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 650;
}

.folder-command-panel .folder-push-menu {
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 60;
  width: 100%;
  border-color: #dbe2ea;
}

.client-folder-page {
  padding: 22px;
}

.folder-filter-toolbar {
  --folder-toolbar-control-bg: #fbfcfd;
  --folder-toolbar-control-border: #e3e5e7;
  --folder-toolbar-control-height: 46px;
  --folder-toolbar-control-radius: 8px;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(260px, 0.98fr)
    minmax(160px, 0.72fr)
    minmax(180px, 0.9fr)
    minmax(210px, 0.9fr);
  margin: 18px 0 0;
  padding: 14px;
  border-color: #e6f0f7;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.folder-filter-toolbar .field,
.folder-filter-toolbar .folder-filter-name,
.folder-filter-toolbar .folder-filter-talent,
.folder-filter-toolbar .folder-filter-color-field,
.folder-filter-toolbar .folder-toolbar-dropdown-field {
  min-width: 0;
}

.folder-filter-toolbar .field input,
.folder-filter-toolbar .folder-filter-colors,
.folder-filter-toolbar .folder-toolbar-dropdown-button {
  width: 100%;
  height: var(--folder-toolbar-control-height);
  min-height: var(--folder-toolbar-control-height);
  border: 1px solid var(--folder-toolbar-control-border);
  border-radius: var(--folder-toolbar-control-radius);
  background: var(--folder-toolbar-control-bg);
  color: #18191c;
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
}

.folder-filter-toolbar .field input {
  display: block;
  padding: 0 16px;
}

.folder-filter-toolbar .field input::placeholder {
  color: #8a929b;
}

.folder-filter-toolbar .field input:focus {
  border-color: var(--bili-blue);
  box-shadow: 0 0 0 4px rgba(0, 174, 236, 0.12);
}

.folder-filter-toolbar .folder-filter-colors {
  gap: 6px;
  min-width: 0;
  padding: 0 10px;
}

.folder-filter-toolbar .folder-filter-color-all {
  min-width: 42px;
  min-height: 28px;
}

.folder-filter-toolbar .folder-filter-color-dot {
  width: 22px;
  height: 22px;
}

.folder-filter-toolbar .folder-toolbar-dropdown-button {
  min-height: var(--folder-toolbar-control-height);
  color: #18191c;
  background: var(--folder-toolbar-control-bg);
  font-size: 14px;
  line-height: 20px;
}

.folder-filter-toolbar .folder-toolbar-dropdown-button {
  padding: 0 16px;
}

@media (max-width: 1120px) {
  .folder-filter-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .folder-filter-toolbar .folder-filter-color-field {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .folder-filter-toolbar .folder-filter-color-field {
    grid-column: auto;
  }
}

.client-folder-list {
  margin-top: 18px;
}

.client-folder-row {
  border-top-color: var(--folder-color, #fb5d7a);
}

.client-folder-actions {
  gap: 20px;
  justify-content: start;
  justify-items: start;
  text-align: left;
}

.client-folder-actions.folder-command-panel {
  padding: 10px 12px 10px 16px;
}

.client-folder-actions .folder-action-buttons {
  justify-self: start;
}

.client-folder-next-panel {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 22px 0 0;
  border-top: 1px solid #e6f0f7;
}

.client-folder-next-panel > span {
  width: 100%;
  color: #3f4652;
  font-size: 14px;
  font-weight: 720;
  text-align: left;
}

.client-folder-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: start;
  width: min(100%, 148px);
  min-height: 48px;
  border-radius: 12px;
  padding-inline: 14px;
  font-size: 15px;
  font-weight: 750;
}

.confetti-action-btn {
  border: 1px solid #ff7691;
  color: #ffffff;
  background: #ff5f84;
  box-shadow: 0 16px 30px rgba(255, 95, 132, 0.22);
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.confetti-action-btn:hover {
  color: #ffffff;
  border-color: #fb4b78;
  background: #fb4b78;
  box-shadow: 0 18px 34px rgba(251, 75, 120, 0.28);
  transform: translateY(-1px);
}

.confetti-action-btn:focus-visible {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 18px 34px rgba(251, 75, 120, 0.28);
}

.confetti-action-btn:active {
  transform: translateY(0);
}

.confetti-action-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.client-folder-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: min(100%, 148px);
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #dbe2ea;
  border-radius: 999px;
  color: #596170;
  background: #ffffff;
  font-size: 15px;
  font-weight: 750;
}

.modal.folder-talents-modal {
  width: min(1280px, calc(100vw - 56px));
  max-width: none;
  padding: 0;
  overflow: hidden;
}

.folder-talents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid #eef0f2;
  background: linear-gradient(180deg, #fff7fa 0%, #ffffff 100%);
}

.folder-talents-head h2 {
  margin: 6px 0 6px;
  color: #18191c;
  font-size: 24px;
}

.folder-talents-head p {
  margin: 0;
  color: #61666d;
  font-weight: 700;
}

.folder-total-badge {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--red-dark);
  font-size: 22px;
  font-weight: 950;
  white-space: nowrap;
}

.folder-total-badge small {
  color: #9499a0;
  font-size: 12px;
}

.folder-talents-table-wrap {
  max-height: min(58vh, 560px);
  margin: 0 24px;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  overflow: auto;
}

.folder-talents-table {
  width: 100%;
  min-width: 1120px;
}

.folder-talents-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 150px;
}

.folder-talents-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  color: #4d535a;
  border: 1px solid #e7ebef;
  border-radius: 8px;
  background: #fbfcfd;
  font-size: 12px;
  font-weight: 800;
}

.folder-talents-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid #eef0f2;
  background: #ffffff;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(58, 10, 23, 0.38);
}

.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 22px;
}

.client-login-notice-backdrop {
  background: rgba(24, 31, 43, 0.48);
}

.client-login-notice-modal {
  width: min(820px, calc(100vw - 44px));
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.client-login-notice-head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid #edf0f4;
  background: linear-gradient(135deg, #fff8fb 0%, #f8fbff 64%, #ffffff 100%);
}

.client-login-notice-head h2 {
  margin: 6px 0 0;
  color: #141923;
  font-size: 25px;
  line-height: 1.25;
}

.client-login-notice-body {
  display: grid;
  gap: 16px;
  max-height: min(58vh, 560px);
  padding: 22px 26px;
  overflow: auto;
  color: #10151d;
}

.client-login-notice-section h3 {
  margin: 0 0 8px;
  color: #05070a;
  font-size: 18px;
  line-height: 1.35;
}

.client-login-notice-section ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 24px;
}

.client-login-notice-section li,
.client-login-notice-section p {
  margin: 0;
  color: #1e2631;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 700;
}

.client-login-notice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 26px 20px;
  border-top: 1px solid #edf0f4;
  background: #fbfcfd;
}

.client-login-notice-footer p {
  margin: 0;
  color: #5c6675;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 800;
}

.client-login-notice-footer .primary-btn {
  flex: 0 0 auto;
}

/* Client help center */
.client-help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #e4e8ef;
  border-radius: 999px;
  background: #fff;
  color: #263244;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.client-help-trigger:hover {
  border-color: #fb7299;
  color: #df315f;
  transform: translateY(-1px);
}

.client-help-trigger span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #fff0f5;
  color: #e83f6d;
  font-size: 14px;
  font-weight: 900;
}

.client-help-trigger strong {
  font-size: 13px;
  font-weight: 850;
}

.workbench-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-help-backdrop {
  padding: 22px;
  background: rgba(21, 28, 39, 0.58);
}

.client-help-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, calc(100vw - 44px));
  height: min(780px, calc(100vh - 44px));
  max-height: calc(100vh - 44px);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
}

.client-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #e9edf3;
  background: linear-gradient(135deg, #fff5f8 0%, #f7faff 72%, #fff 100%);
}

.client-help-head h2 {
  margin: 5px 0 4px;
  color: #141923;
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.25;
}

.client-help-head p {
  margin: 0;
  color: #687386;
  font-size: 14px;
  line-height: 1.6;
}

.client-help-close {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #e2e7ee;
  border-radius: 50%;
  background: #fff;
  color: #667085;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.client-help-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 0;
}

.client-help-nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 14px;
  border-right: 1px solid #e9edf3;
  background: #f8fafc;
}

.client-help-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #596579;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.client-help-nav button i {
  color: #98a2b3;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.client-help-nav button.active {
  border-color: #ffd8e3;
  background: #fff;
  color: #d92f5c;
  box-shadow: 0 6px 18px rgba(28, 39, 55, 0.06);
}

.client-help-nav button.active i { color: #e83f6d; }

.client-help-body {
  min-width: 0;
  padding: 24px 26px 30px;
  overflow: auto;
  color: #273244;
}

.client-help-section-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
}

.client-help-section-head > span {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #fff0f5;
  color: #dc3562;
  font-size: 12px;
  font-weight: 900;
}

.client-help-section-head h2 { margin: 0 0 3px; color: #151b26; font-size: 22px; }
.client-help-section-head p { margin: 0; color: #758095; font-size: 14px; line-height: 1.55; }

.client-help-flow,
.client-help-todo-list {
  display: grid;
  gap: 10px;
}

.client-help-flow article,
.client-help-todo-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 15px;
  border: 1px solid #e8ecf2;
  border-radius: 13px;
  background: #fff;
}

.client-help-flow article > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #f2f5f9;
  color: #4d5c70;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.client-help-flow h3,
.client-help-card-grid h3 { margin: 0 0 4px; color: #202938; font-size: 15px; }
.client-help-flow p,
.client-help-card-grid p,
.client-help-todo-list p { margin: 0; color: #69758a; font-size: 13px; line-height: 1.6; }
.client-help-todo-list article { align-items: start; }
.client-help-todo-list article > b { color: #252f3f; font-size: 14px; }

.client-help-notice-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px solid #ffd4df;
  border-radius: 13px;
  background: linear-gradient(100deg, #fff5f8, #fff);
  color: #4a2733;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.client-help-notice-link span { font-size: 13px; font-weight: 800; }
.client-help-notice-link strong { color: #d92f5c; font-size: 13px; }

.client-help-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-help-card-grid article {
  display: flex;
  min-height: 156px;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #e8ecf2;
  border-radius: 14px;
  background: #fff;
}

.client-help-card-grid article p { flex: 1; margin-bottom: 13px; }

.client-help-faq {
  display: grid;
  gap: 10px;
}

.client-help-faq details {
  padding: 14px 16px;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  background: #fff;
}

.client-help-faq summary {
  color: #273244;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.client-help-faq p { margin: 10px 0 0; color: #69758a; font-size: 13px; line-height: 1.7; }

.client-help-notice-grid {
  display: grid;
  gap: 17px;
}

.client-help-notice-grid section {
  padding: 16px 18px;
  border: 1px solid #e7ebf1;
  border-radius: 13px;
  background: #fff;
}

.client-help-notice-grid h3 { margin: 0 0 8px; color: #222b39; font-size: 16px; }
.client-help-notice-grid ol { display: grid; gap: 6px; margin: 0; padding-left: 21px; }
.client-help-notice-grid li,
.client-help-notice-grid p { margin: 0; color: #596579; font-size: 13px; font-weight: 650; line-height: 1.75; }

.client-help-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 26px 18px;
  border-top: 1px solid #e9edf3;
  background: #fbfcfd;
}

.client-help-footer p { margin: 0; color: #707b8e; font-size: 12px; line-height: 1.5; }
.client-help-footer .primary-btn { flex: 0 0 auto; min-width: 112px; }

@media (max-width: 640px) {
  .client-login-notice-modal {
    width: calc(100vw - 28px);
  }

  .client-login-notice-head,
  .client-login-notice-body,
  .client-login-notice-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .client-login-notice-body {
    max-height: 60vh;
  }

  .client-login-notice-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .client-login-notice-footer .primary-btn {
    width: 100%;
  }

  .client-help-trigger {
    min-height: 34px;
    padding: 6px 9px;
  }

  .client-help-trigger strong { display: none; }
  .client-help-trigger span { width: 20px; height: 20px; }
  .workbench-head-actions { width: 100%; }
  .workbench-head-actions button { flex: 1; }
  .client-help-backdrop { padding: 0; }

  .client-help-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .client-help-head { padding: 18px 17px 14px; }
  .client-help-head h2 { font-size: 20px; }
  .client-help-head p { font-size: 12px; }

  .client-help-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .client-help-nav {
    flex-direction: row;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #e9edf3;
  }

  .client-help-nav button {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .client-help-nav button i { display: none; }
  .client-help-body { padding: 18px 15px 24px; }
  .client-help-section-head { margin-bottom: 15px; }
  .client-help-section-head > span { width: 34px; height: 34px; }
  .client-help-section-head h2 { font-size: 19px; }

  .client-help-flow article,
  .client-help-todo-list article {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .client-help-flow article > button,
  .client-help-todo-list article > button {
    grid-column: 2;
    justify-self: start;
  }

  .client-help-todo-list article > b { grid-column: 1 / -1; }
  .client-help-todo-list article > p,
  .client-help-todo-list article > button { grid-column: 1 / -1; }
  .client-help-card-grid { grid-template-columns: 1fr; }
  .client-help-card-grid article { min-height: 0; }
  .client-help-notice-link { align-items: flex-start; flex-direction: column; }

  .client-help-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 12px 15px 15px;
  }

  .client-help-footer .primary-btn { width: 100%; }
}

.payment-method-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(640px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  padding: 0;
  overflow: hidden;
}

.payment-method-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #edf2f7;
  background: linear-gradient(135deg, #fff7fa 0%, #f6fbff 58%, #ffffff 100%);
}

.payment-method-head h2 {
  margin: 4px 0 6px;
  color: #122033;
  font-size: 24px;
  line-height: 1.25;
}

.payment-method-head p {
  margin: 0;
  color: #607084;
  font-size: 13px;
  font-weight: 800;
}

.payment-method-status {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid #ffd1dc;
  border-radius: 999px;
  color: #e32d59;
  background: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(233, 63, 105, 0.12);
}

.payment-method-form {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px 0;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.payment-method-choice {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dceaf7;
  border-radius: 8px;
  background: #f7fbff;
}

.payment-method-choice p {
  margin: 0;
  color: #647386;
  line-height: 1.55;
}

.payment-method-select {
  display: grid;
  gap: 8px;
}

.payment-method-select > span {
  color: #172235;
  font-size: 13px;
  font-weight: 900;
}

.payment-method-select select {
  min-height: 42px;
  border-radius: 8px;
  background: #ffffff;
  font-weight: 900;
}

.self-order-advice-modal {
  width: min(820px, calc(100vw - 44px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
}

.payment-receipt-notice:not([hidden]) {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-color: #ffd3df;
  background: linear-gradient(180deg, #fff8fb, #ffffff);
}

.payment-receipt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.payment-receipt-kicker {
  display: block;
  margin-bottom: 3px;
  color: #0b8dbf;
  font-size: 12px;
  font-weight: 900;
}

.payment-receipt-title {
  color: #172235;
  font-size: 17px;
  line-height: 1.35;
}

.payment-receipt-copy-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 10px;
}

.payment-receipt-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid #f2d7df;
  border-radius: 8px;
  background: #ffffff;
}

.payment-receipt-table th,
.payment-receipt-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f6e2e8;
  color: #4b5565;
  text-align: left;
  line-height: 1.45;
  vertical-align: top;
  word-break: break-word;
}

.payment-receipt-table th {
  color: #152235;
  background: #fff6f9;
  font-weight: 900;
}

.payment-receipt-table td:first-child {
  width: 108px;
  color: #d8214b;
  font-weight: 900;
  white-space: nowrap;
}

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

.payment-receipt-tip {
  margin: 0;
  color: #7e293a;
  line-height: 1.55;
}

.payment-method-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 0 18px;
  border-top: 1px solid #eef0f2;
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.86), #ffffff 34%);
}

.opportunity-payment-locked {
  appearance: none;
  cursor: default;
  white-space: nowrap;
}

button.opportunity-payment-locked {
  cursor: pointer;
}

button.opportunity-payment-locked:hover {
  border-color: #8eddf8;
  background: #dff5ff;
}

.payment-receipt-summary p {
  color: #4f6175;
  font-weight: 800;
}

.self-order-advice-head {
  padding: 0;
  margin: 0;
}

.self-order-advice-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #edf2f7;
  background: linear-gradient(135deg, #fff7fa 0%, #f6fbff 52%, #ffffff 100%);
}

.self-order-advice-hero h2 {
  margin: 4px 0 6px;
  color: #122033;
  font-size: 24px;
  line-height: 1.25;
}

.self-order-advice-hero p {
  margin: 0;
  color: #607084;
  font-size: 13px;
  font-weight: 800;
}

.self-order-recommend-badge {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid #ffd1dc;
  border-radius: 999px;
  color: #e32d59;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(233, 63, 105, 0.12);
  font-size: 13px;
  font-weight: 900;
}

.self-order-advice-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  max-height: min(68vh, 640px);
  overflow: auto;
  padding: 18px 26px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.self-order-advice-section {
  display: grid;
  gap: 8px;
}

.self-order-advice-section h3 {
  margin: 0;
  color: #152235;
  font-size: 17px;
  line-height: 1.25;
}

.self-order-advice-section p,
.self-order-advice-summary p {
  margin: 0;
  color: #596475;
  line-height: 1.6;
}

.self-order-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid #d9ebff;
  border-radius: 8px;
  background: #f6fbff;
}

.self-order-focus-card strong {
  display: block;
  margin-bottom: 8px;
  color: #122033;
  font-size: 18px;
  line-height: 1.35;
}

.self-order-focus-card p {
  margin: 0;
  color: #536477;
  line-height: 1.65;
}

.self-order-highlight-grid {
  display: grid;
  gap: 8px;
}

.self-order-highlight-grid span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #dcecfb;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.self-order-highlight-grid b {
  color: #e32d59;
  font-size: 13px;
}

.self-order-highlight-grid small {
  color: #596b7f;
  line-height: 1.45;
}

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

.self-order-risk-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #e6eef6;
  border-radius: 8px;
  background: #ffffff;
}

.self-order-risk-card > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #e32d59;
  background: #fff0f5;
  font-size: 12px;
  font-weight: 900;
}

.self-order-risk-card strong {
  display: block;
  margin-bottom: 4px;
  color: #1d2b3a;
  font-size: 14px;
}

.self-order-risk-card p {
  margin: 0;
  color: #596475;
  line-height: 1.5;
}

.self-order-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.self-order-benefit-grid li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #ffffff;
}

.self-order-benefit-grid li:last-child {
  grid-column: 1 / -1;
}

.self-order-benefit-grid > li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #008fc4;
  background: #eaf8ff;
  font-size: 12px;
  font-weight: 900;
}

.self-order-benefit-grid strong {
  display: block;
  margin-bottom: 4px;
  color: #152235;
}

.self-order-benefit-grid p {
  margin: 0;
  color: #596475;
  line-height: 1.55;
}

.self-order-advice-summary {
  padding: 13px 16px;
  border: 1px solid #ffd1dc;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8fb, #ffffff);
}

.self-order-advice-summary strong {
  display: block;
  margin-bottom: 5px;
  color: #e32d59;
}

.self-order-advice-summary.service {
  border-color: #d8ebff;
  background: linear-gradient(180deg, #f7fbff, #ffffff);
}

.self-order-advice-summary.service strong {
  color: #0b7fb0;
}

.self-order-fit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.self-order-fit-list span {
  padding: 7px 10px;
  border: 1px solid #dbe7f2;
  border-radius: 999px;
  color: #40516a;
  background: #f7fbff;
  font-size: 13px;
  font-weight: 800;
}

.self-order-advice-actions {
  justify-content: flex-end;
  padding: 14px 26px 20px;
  margin: 0;
  border-top: 1px solid #eef0f2;
  background: linear-gradient(180deg, #ffffff, #fff8fb);
}

@media (max-width: 720px) {
  .self-order-advice-hero,
  .self-order-focus-card {
    grid-template-columns: 1fr;
  }

  .self-order-advice-hero {
    display: grid;
    padding: 22px 20px 16px;
  }

  .self-order-advice-body {
    padding: 16px 20px 18px;
  }

  .self-order-risk-grid,
  .self-order-benefit-grid {
    grid-template-columns: 1fr;
  }

  .self-order-benefit-grid li:last-child {
    grid-column: auto;
  }

  .self-order-advice-actions {
    padding: 14px 20px 18px;
  }
}

/* 全站统一下拉组件：原生 select 保留表单语义，视觉与交互由共享组件接管。 */
.xw-select {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.xw-select-native {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

.xw-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dfe7ee;
  border-radius: 10px;
  outline: 0;
  color: #25303c;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 7px rgba(31, 48, 65, 0.025);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.xw-select-trigger:hover:not(:disabled) {
  border-color: #bde4f2;
  background: #fcfeff;
}

.xw-select-trigger:focus-visible,
.xw-select.is-open .xw-select-trigger {
  border-color: #79d0ef;
  box-shadow: 0 0 0 4px rgba(32, 174, 229, 0.1);
}

.xw-select.is-invalid .xw-select-trigger {
  border-color: #f06a88;
  box-shadow: 0 0 0 4px rgba(240, 79, 116, 0.1);
}

.xw-select.is-disabled .xw-select-trigger,
.xw-select-trigger:disabled {
  color: #9aa3ad;
  background: #f5f7f9;
  cursor: not-allowed;
  opacity: 0.68;
}

.xw-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xw-select-chevron {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: #66717e;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease, stroke 180ms ease;
}

.xw-select.is-open .xw-select-chevron {
  transform: rotate(180deg);
  stroke: #1687b8;
}

.xw-select-menu {
  position: fixed;
  z-index: 2147483000;
  display: grid;
  gap: 3px;
  max-height: min(280px, calc(100vh - 24px));
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(190, 222, 234, 0.96);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(31, 48, 65, 0.17), 0 4px 12px rgba(31, 48, 65, 0.07);
  backdrop-filter: blur(16px);
  animation: xw-select-menu-enter 150ms ease-out;
}

.xw-select-menu.opens-up {
  transform-origin: bottom center;
}

.xw-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  color: #35404c;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.xw-select-option > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xw-select-option:hover:not(:disabled),
.xw-select-option:focus-visible {
  color: #087ea9;
  background: #eff9fd;
}

.xw-select-option:active:not(:disabled) {
  transform: scale(0.99);
}

.xw-select-option.is-selected {
  color: #087ea9;
  background: linear-gradient(135deg, rgba(226, 247, 254, 0.98), rgba(255, 239, 246, 0.94));
}

.xw-select-option:disabled {
  color: #a5adb7;
  cursor: not-allowed;
  opacity: 0.62;
}

.xw-select-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #1aa2cf;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 140ms ease, transform 140ms ease;
}

.xw-select-option.is-selected .xw-select-check {
  opacity: 1;
  transform: scale(1);
}

.xw-select.is-compact .xw-select-trigger,
.xw-select-menu.is-compact .xw-select-option {
  min-height: 32px;
  font-size: 11px;
}

.folder-filter-toolbar .xw-select.is-toolbar-filter,
.folder-filter-toolbar .xw-select.is-toolbar-filter .xw-select-trigger {
  width: 100%;
}

.folder-filter-toolbar .xw-select.is-toolbar-filter .xw-select-trigger {
  height: var(--folder-toolbar-control-height);
  min-height: var(--folder-toolbar-control-height);
  padding: 0 16px;
  border-color: var(--folder-toolbar-control-border);
  border-radius: var(--folder-toolbar-control-radius);
  color: #18191c;
  background: var(--folder-toolbar-control-bg);
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
}

.folder-filter-toolbar .xw-select.is-toolbar-filter.is-open .xw-select-trigger,
.folder-filter-toolbar .xw-select.is-toolbar-filter .xw-select-trigger:focus-visible {
  border-color: var(--bili-blue);
  color: #087ea9;
  background: #fcfeff;
  box-shadow: 0 0 0 4px rgba(0, 174, 236, 0.12);
}

.xw-select-menu.is-toolbar-filter {
  gap: 2px;
  padding: 5px;
}

.xw-select-menu.is-toolbar-filter .xw-select-option {
  min-height: 36px;
  padding: 0 11px;
  font-size: 13px;
}

.xw-select.is-compact .xw-select-trigger {
  padding: 0 9px;
  border-radius: 9px;
}

.xw-select-menu.is-compact .xw-select-option {
  padding: 0 9px;
}

.xw-select.is-calendar .xw-select-trigger {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
}

.xw-select-menu.is-calendar .xw-select-option {
  min-height: 34px;
  font-size: 12px;
}

.xw-select.is-pill {
  width: auto;
  min-width: 96px;
}

.xw-select.is-pill .xw-select-trigger {
  min-height: 28px;
  border-radius: 999px;
  font-size: 12px;
}

.staff-account-filter-field .xw-select-trigger {
  height: 38px;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
}

.folder-datepicker-selects .xw-select {
  width: 100%;
}

.account-form-grid .xw-select-trigger,
.staff-account-edit-grid .xw-select-trigger {
  min-height: 40px;
}

.payment-method-select .xw-select-trigger {
  min-height: 42px;
  font-weight: 900;
}

td .xw-select {
  min-width: 116px;
}

.talent-operator-assignment .xw-select {
  flex: 0 1 auto;
}

.sp-settings-grid .xw-select-trigger {
  min-height: 38px;
}

.sp-outline-binding > .xw-select {
  min-width: 0;
}

.sp-outline-binding .xw-select-trigger {
  min-height: 34px;
}

.sp-draft-actions .xw-select {
  width: auto;
  min-width: 142px;
}

.opportunity-account-assignment .xw-select {
  min-width: 112px;
}

@keyframes xw-select-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .xw-select-menu {
    animation: none;
  }

  .xw-select-chevron,
  .xw-select-check,
  .xw-select-option {
    transition: none;
  }
}

/* Keep the public registration surface wider than generic application modals. */
.modal.public-register-modal {
  width: min(900px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  padding: 0;
}

.modal-backdrop.public-register-backdrop {
  z-index: 250;
  padding: 20px;
}

@media (max-width: 760px) {
  .modal-backdrop.public-register-backdrop {
    padding: 0;
  }

  .modal.public-register-modal {
    width: 100vw;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }
}

/* Desktop drag-to-scroll for the catalog table's non-fixed data columns. */
@media (hover: hover) and (pointer: fine) {
  .rate-table-wrap .rate-table th:not(:first-child):not(.sticky-col-right),
  .rate-table-wrap .rate-table td:not(:first-child):not(.sticky-col-right) {
    cursor: grab;
  }

  .rate-table-wrap.is-dragging,
  .rate-table-wrap.is-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
  }
}

.post-opportunity-modal {
  position: relative;
  isolation: isolate;
  width: min(1040px, calc(100vw - 44px));
  max-width: none;
  padding: 0;
  border: 1px solid transparent;
  overflow: hidden;
}

.post-opportunity-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, #A07CFE, #FE8FB5, #FFBE7B, #A07CFE);
  background-size: 260% 260%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: opportunityShineBorder 4.8s linear infinite;
}

.post-opportunity-modal .post-opportunity-form-card {
  margin: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.post-opportunity-modal .post-opportunity-brief-studio {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 72px);
  overflow: hidden;
}

.post-opportunity-modal .brief-studio-grid {
  min-height: 0;
  overflow: auto;
}

@keyframes opportunityShineBorder {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 260% 50%;
  }
}

.hero-video-backdrop {
  z-index: 42;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(251, 114, 153, 0.18), transparent 32%),
    rgba(14, 16, 22, 0.72);
  backdrop-filter: blur(8px);
}

.hero-video-dialog {
  width: min(980px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(7, 12, 22, 0.38);
  animation: heroVideoFromCenter 0.22s ease-out both;
}

.hero-video-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eef0f2;
}

.hero-video-head h2 {
  margin: 7px 0 0;
  color: #18191c;
  font-size: 20px;
  line-height: 1.35;
}

.hero-video-head p {
  margin: 6px 0 0;
  color: #61666d;
  font-size: 13px;
  font-weight: 800;
}

.hero-video-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid #f1c9d5;
  border-radius: 999px;
  color: #e91f45;
  background: #fff5f8;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.hero-video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0c1020;
}

.hero-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-loading-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.video-loading-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0c1020;
}

.video-loading-poster {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background: #111827;
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease, visibility .34s ease;
}

.video-loading-poster-fallback,
.video-loading-poster > img,
.video-loading-poster-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-loading-poster-fallback {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .2);
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 103, 139, .38), transparent 34%),
    radial-gradient(circle at 78% 76%, rgba(67, 193, 235, .34), transparent 38%),
    linear-gradient(145deg, #252b3a, #0b0f18 70%);
  font-size: clamp(72px, 13vw, 170px);
  font-weight: 900;
}

.video-loading-poster > img {
  z-index: 1;
  object-fit: cover;
  transform: scale(1.015);
}

.video-loading-poster-shade {
  z-index: 2;
  background: linear-gradient(180deg, rgba(7, 11, 20, .22), rgba(7, 11, 20, .68));
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.video-loading-copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .42);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}

.video-loading-copy strong {
  margin-top: 14px;
  font-size: 16px;
  letter-spacing: .04em;
}

.video-loading-copy small {
  margin-top: 6px;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  font-weight: 700;
}

.video-loading-spinner {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(255, 255, 255, .28);
  border-top-color: #ff5d80;
  border-right-color: #48c8ef;
  border-radius: 999px;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .28));
  animation: videoLoadingSpin .82s linear infinite;
}

.video-loading-stage.is-video-ready .video-loading-poster {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-loading-stage.is-video-error .video-loading-copy {
  opacity: 0;
}

.video-loading-error {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(420px, calc(100% - 36px));
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  color: #fff;
  background: rgba(12, 16, 32, .76);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .3);
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.video-loading-error[hidden] {
  display: none;
}

.video-loading-error strong {
  font-size: 17px;
}

.video-loading-error > span {
  margin-top: 7px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.6;
}

.video-loading-error > div {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.video-loading-error .plain-btn {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

@keyframes videoLoadingSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .video-loading-spinner { animation-duration: 1.8s; }
  .video-loading-poster { transition-duration: .01ms; }
}

.hero-video-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: #ffffff;
  font-weight: 900;
}

@keyframes heroVideoFromCenter {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  max-width: 380px;
  padding: 14px 16px;
  color: white;
  border-radius: 8px;
  background: linear-gradient(115deg, var(--red-dark), var(--red));
  box-shadow: 0 18px 42px rgba(132, 12, 33, 0.25);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi {
  padding: 18px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #ba1838, #fa4d61);
}

.kpi:nth-child(2) {
  background: linear-gradient(135deg, #cf2546, #ff7a6e);
}

.kpi:nth-child(3) {
  background: linear-gradient(135deg, #9b1732, #df315d);
}

.kpi:nth-child(4) {
  background: linear-gradient(135deg, #d5453f, #ff9c7f);
}

.kpi strong {
  display: block;
  font-size: 28px;
}

.kpi span {
  font-size: 13px;
  opacity: 0.85;
}

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

.flow .step {
  padding: 8px 10px;
  border-radius: 999px;
  background: #f8e7eb;
  color: #79505a;
  font-size: 12px;
  font-weight: 800;
}

.flow .step.active {
  background: var(--red);
  color: white;
}

@media (max-width: 980px) {
  .auth-wrap,
  .dashboard,
  .grid.cols-2,
  .grid.cols-3 {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .kpi-row,
  .hero-stats {
    grid-template-columns: 1fr;
  }

  .main {
    width: min(100% - 24px, 1440px);
  }
}

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

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

  .hero-copy h1 {
    font-size: 40px;
  }
}

/* Bilibili-inspired visual refresh */
:root {
  --red: #fb5d7a;
  --red-dark: #d92d55;
  --coral: #ff7a70;
  --pink: #fb7299;
  --bili-blue: #00aeec;
  --bili-blue-soft: #e8f8ff;
  --ink: #18191c;
  --muted: #61666d;
  --line: #e3e5e7;
  --paper: #f6f7f8;
}

body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.78) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.78) 1px, transparent 1px),
    radial-gradient(circle at 12% 12%, rgba(251, 114, 153, 0.28), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(0, 174, 236, 0.24), transparent 28%),
    linear-gradient(180deg, #fff7fa 0%, #f6fbff 38%, #f7f8fa 100%);
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
}

#app {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

.app-surface {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.ambient-rays {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-rays::before {
  content: "";
  position: absolute;
  inset: -22vh -16vw -12vh -16vw;
  transform-origin: 92% 4%;
  background:
    conic-gradient(
      from 220deg at 92% 0%,
      transparent 0deg 8deg,
      rgba(251, 93, 122, 0.26) 12deg 18deg,
      transparent 22deg 28deg,
      rgba(0, 174, 236, 0.24) 32deg 40deg,
      transparent 46deg 360deg
    );
  filter: blur(10px);
  opacity: 0.72;
}

.ambient-rays::after {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 86% 8%, rgba(0, 174, 236, 0.22), transparent 30%),
    radial-gradient(circle at 15% 16%, rgba(251, 93, 122, 0.2), transparent 28%),
    radial-gradient(circle at 55% 104%, rgba(255, 255, 255, 0.9), transparent 32%);
  filter: blur(24px);
  opacity: 0.8;
}

.ambient-rays__beam {
  position: absolute;
  top: -18vh;
  right: -10vw;
  width: min(680px, 64vw);
  height: min(720px, 78vh);
  transform-origin: 100% 0%;
  clip-path: polygon(100% 0, 0 28%, 100% 100%);
  mix-blend-mode: screen;
  filter: blur(28px);
  opacity: 0.55;
}

.ambient-rays__beam--pink {
  background: linear-gradient(104deg, transparent 18%, rgba(251, 93, 122, 0.34), transparent 76%);
}

.ambient-rays__beam--blue {
  top: -12vh;
  right: -16vw;
  width: min(760px, 72vw);
  background: linear-gradient(118deg, transparent 24%, rgba(0, 174, 236, 0.28), transparent 82%);
}

.ambient-rays__halo {
  position: absolute;
  left: 7vw;
  top: 7vh;
  width: 34vw;
  min-width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(251, 114, 153, 0.24), transparent 62%),
    radial-gradient(circle at 70% 32%, rgba(0, 174, 236, 0.18), transparent 52%);
  filter: blur(18px);
  opacity: 0.65;
}

.shell,
.auth-wrap {
  position: relative;
  z-index: 2;
}

.site-footer {
  position: relative;
  z-index: 1;
}

@keyframes ambientRaysSweep {
  from {
    transform: rotate(-5deg) translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: rotate(6deg) translate3d(-2vw, 1.5vh, 0) scale(1.04);
  }
}

@keyframes ambientHaloDrift {
  from {
    transform: translate3d(-1.5vw, -0.6vh, 0) scale(1);
  }

  to {
    transform: translate3d(1.6vw, 1.2vh, 0) scale(1.03);
  }
}

@keyframes ambientBeamPulse {
  from {
    transform: rotate(-2deg) translate3d(0, 0, 0);
    opacity: 0.42;
  }

  to {
    transform: rotate(5deg) translate3d(-3vw, 2vh, 0);
    opacity: 0.68;
  }
}

@keyframes ambientHaloFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(2vw, 1.6vh, 0) scale(1.06);
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 260px;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(251, 93, 122, 0.92), rgba(255, 122, 112, 0.72) 44%, rgba(0, 174, 236, 0.64)),
    radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.48), transparent 18%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 78% 86%, 46% 68%, 20% 84%, 0 66%);
  opacity: 0.2;
}

.auth-wrap {
  position: relative;
  width: min(1240px, calc(100% - 36px));
  grid-template-columns: minmax(0, 1.12fr) 430px;
}

.hero-copy {
  position: relative;
  padding: 22px 0;
}

.hero-copy::before,
.hero-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(2px);
}

.hero-copy::before {
  width: 220px;
  height: 220px;
  right: 12%;
  top: 4%;
  background: radial-gradient(circle, rgba(0, 174, 236, 0.18), transparent 66%);
}

.hero-copy::after {
  width: 280px;
  height: 280px;
  left: -8%;
  bottom: 6%;
  background: radial-gradient(circle, rgba(251, 114, 153, 0.22), transparent 64%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 9px 14px;
  color: #be2348;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(251, 114, 153, 0.24);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(251, 114, 153, 0.12);
  font-weight: 800;
}

.hero-copy h1 {
  width: min(720px, 100%);
  color: #d8214b;
  background: none;
  text-shadow: 0 18px 42px rgba(251, 114, 153, 0.18);
}

.hero-copy p {
  color: #4d535a;
}

.hero-ribbons {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: min(720px, 100%);
  gap: 8px;
  margin-top: 20px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(227, 229, 231, 0.86);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 16px 34px rgba(24, 25, 28, 0.06);
  backdrop-filter: blur(16px);
}

.hero-ribbons::before {
  content: "";
  position: absolute;
  inset: 50% 28px auto;
  height: 2px;
  background: rgba(31, 155, 215, 0.18);
  transform: translateY(-50%);
}

.hero-ribbons span {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 120px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(227, 229, 231, 0.92);
  border-radius: 16px;
  color: #3f444a;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(24, 25, 28, 0.06);
  font-size: 13px;
  font-weight: 900;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.hero-ribbons span:hover {
  border-color: rgba(251, 114, 153, 0.34);
  box-shadow: 0 14px 30px rgba(24, 25, 28, 0.1);
  transform: translateY(-2px);
}

.hero-ribbons i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: #1f9bd7;
  box-shadow: 0 8px 18px rgba(0, 174, 236, 0.2);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}

.hero-ribbons b {
  font-weight: 900;
  white-space: nowrap;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 0 24px;
}

.hero-copy::before,
.hero-copy::after {
  display: none;
}

.hero-copy .hero-type-title {
  width: min(780px, 100%);
  margin: 0;
  color: #d8214b;
  background: none;
  font-size: 76px;
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 0 20px 48px rgba(251, 114, 153, 0.2);
}

.hero-title-line {
  display: block;
  min-height: 0.98em;
}

.hero-type-text {
  display: inline-block;
  max-width: none;
  overflow: visible;
  vertical-align: bottom;
  white-space: nowrap;
  color: inherit;
  background: none;
  animation: heroTypeReveal 0.32s ease both;
}

.hero-type-name {
  color: #d8214b;
}

.hero-type-system {
  color: #168fc8;
  animation-delay: 0.08s;
}

.hero-copy .hero-lead {
  max-width: 720px;
  margin: 20px 0 0;
  color: #808489;
  font-size: 13px;
  line-height: 1.78;
}

.hero-stats {
  width: min(720px, 100%);
  margin-top: 28px;
  gap: 12px;
}

.hero-stats .stat {
  min-height: 82px;
  padding: 16px 17px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 16px 38px rgba(24, 25, 28, 0.08);
  animation: heroStatFloatIn 0.42s ease both;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease;
  will-change: transform;
}

.hero-stats .stat:nth-child(2) {
  animation-delay: 0.06s;
}

.hero-stats .stat:nth-child(3) {
  animation-delay: 0.12s;
}

.hero-stats .stat:hover {
  border-color: rgba(251, 114, 153, 0.32);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 46px rgba(24, 25, 28, 0.12);
  transform: translateY(-4px);
}

.hero-stats .stat strong {
  font-size: 25px;
  line-height: 1;
}

@keyframes heroTypeReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroStatFloatIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-type-text {
    max-width: none;
    animation: none;
  }

  .hero-stats .stat {
    animation: none;
    transition: none;
  }

  .hero-stats .stat:hover {
    transform: none;
  }

  .hero-ribbons span {
    transition: none;
  }

  .hero-ribbons span:hover {
    transform: none;
  }
}

.stat,
.auth-panel,
.panel,
.card,
.drawer {
  border: 1px solid rgba(227, 229, 231, 0.88);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 34px rgba(24, 25, 28, 0.08);
}

.auth-panel {
  position: relative;
  overflow: hidden;
}

.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--pink), var(--red), var(--bili-blue));
}

.topbar {
  margin: 14px auto 0;
  width: min(1440px, calc(100% - 28px));
  border: 1px solid rgba(227, 229, 231, 0.9);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 40px rgba(24, 25, 28, 0.08);
  backdrop-filter: blur(20px);
}

.brand-mark {
  color: white;
  background:
    linear-gradient(135deg, var(--pink), var(--red) 52%, var(--bili-blue));
  box-shadow: 0 12px 24px rgba(251, 114, 153, 0.28);
  border-radius: 14px;
  letter-spacing: 0;
}

.brand-subtitle {
  color: #9499a0;
}

.nav {
  padding: 5px;
  border-radius: 999px;
  background: #f6f7f8;
  border: 1px solid #eef0f2;
}

.nav button,
.ghost-btn {
  color: #61666d;
  background: transparent;
  border: 0;
  min-height: 36px;
  padding: 8px 13px;
  font-weight: 800;
}

.nav button.active,
.nav button:hover {
  color: white;
  background: linear-gradient(110deg, var(--pink), var(--red));
  box-shadow: 0 8px 20px rgba(251, 114, 153, 0.24);
}

.ghost-btn {
  color: var(--red-dark);
  background: #fff0f4;
  border: 1px solid #ffd6df;
}

.user-chip .ghost-btn {
  min-height: 30px;
  padding: 5px 11px;
  font-size: 13px;
  line-height: 1;
}

.ghost-btn:hover {
  color: white;
  background: var(--red);
}

.main {
  position: relative;
  margin-top: 22px;
}

.tabs {
  background: #f1f2f3;
}

.tabs button {
  color: #61666d;
}

.tabs button.active {
  color: var(--red-dark);
}

.field label {
  color: #3f444a;
}

.field input,
.field select,
.field textarea,
.search-input,
td input,
td select {
  border-color: #e3e5e7;
  background: #fbfcfd;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus {
  border-color: var(--bili-blue);
  box-shadow: 0 0 0 4px rgba(0, 174, 236, 0.12);
}

input[type="range"] {
  accent-color: var(--pink);
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  flex: 0 0 auto;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background: #ffffff;
  clip-path: polygon(14% 48%, 0 62%, 39% 100%, 100% 17%, 85% 3%, 37% 70%);
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.14s ease;
}

input[type="checkbox"]:checked {
  border-color: #3b82f6;
  background: #3b82f6;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(59, 130, 246, 0.12);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 4px rgba(59, 130, 246, 0.18);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary-btn,
.secondary-btn,
.danger-btn,
.plain-btn {
  border-radius: 999px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.primary-btn:hover,
.secondary-btn:hover,
.danger-btn:hover,
.plain-btn:hover {
  transform: translateY(-1px);
}

.primary-btn {
  background: linear-gradient(110deg, var(--pink), var(--red) 62%, var(--coral));
  box-shadow: 0 10px 22px rgba(251, 114, 153, 0.24);
}

.secondary-btn {
  color: #008ac5;
  background: var(--bili-blue-soft);
  border-color: #b8eaff;
}

.danger-btn {
  color: #c9244b;
  background: #fff0f4;
  border-color: #ffd3de;
}

.plain-btn {
  color: #61666d;
  background: #ffffff;
  border-color: #e3e5e7;
}

.notice {
  color: #79414e;
  background: linear-gradient(180deg, #fff5f8, #ffffff);
  border-color: #ffd6df;
}

.panel {
  padding: 22px;
}

.panel-title h2,
.panel-title h3 {
  color: #18191c;
  letter-spacing: 0;
}

.panel-title h2 {
  position: relative;
  padding-left: 13px;
}

.panel-title h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pink), var(--bili-blue));
}

.toolbar {
  padding: 12px;
  border-radius: 18px;
  background: #f6f7f8;
}

.toolbar .search-input {
  max-width: 460px;
}

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

.talent-card {
  padding: 0;
  border-radius: 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.talent-card::before {
  content: "";
  display: block;
  height: 88px;
  background:
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.72), transparent 20%),
    linear-gradient(120deg, rgba(251, 114, 153, 0.95), rgba(255, 122, 112, 0.84) 48%, rgba(0, 174, 236, 0.76));
}

.talent-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 114, 153, 0.36);
  box-shadow: 0 20px 44px rgba(24, 25, 28, 0.12);
}

.talent-card > *:not(.talent-head) {
  margin-left: 18px;
  margin-right: 18px;
}

.talent-head {
  margin: -38px 18px 0;
  align-items: flex-end;
}

.avatar {
  width: 68px;
  height: 68px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--red), var(--bili-blue));
  box-shadow: 0 10px 24px rgba(24, 25, 28, 0.14);
  font-size: 20px;
}

.talent-name {
  font-size: 20px;
}

.meta {
  gap: 6px;
}

.pill {
  color: #61666d;
  background: #f6f7f8;
  border-color: #eef0f2;
}

.pill.ok {
  color: #008ac5;
  background: #e8f8ff;
  border-color: #ccefff;
}

.pill.warn {
  color: #d96b00;
  background: #fff7e7;
  border-color: #ffe3ac;
}

.price {
  background:
    linear-gradient(180deg, #ffffff, #fff8fa);
  border-color: #ffe0e7;
}

.price strong {
  color: #d8214b;
}

.desc {
  color: #4d535a;
}

.card-actions {
  padding-bottom: 18px;
}

th {
  color: #61666d;
  background: #f6f7f8;
}

td {
  border-bottom-color: #eef0f2;
}

.empty {
  color: #9499a0;
  border-color: #dfe3e6;
  background: #fbfcfd;
}

.folder-card {
  border-left: 0;
  border-top: 5px solid var(--folder-color, var(--pink));
  border-radius: 18px;
}

.toast {
  position: fixed;
  top: 92px;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 36px));
  min-height: 48px;
  padding: 12px 18px;
  color: #2f343a;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(24, 25, 28, 0.12);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
  font-weight: 800;
}

.toast::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #fb5d7a;
  box-shadow: 0 0 0 4px rgba(251, 93, 122, 0.12);
}

.kpi {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #fb7299, #fb5d7a);
}

.kpi::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -38px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.kpi:nth-child(2) {
  background: linear-gradient(135deg, #00aeec, #59d7ff);
}

.kpi:nth-child(3) {
  background: linear-gradient(135deg, #ff7a70, #fb7299);
}

.kpi:nth-child(4) {
  background: linear-gradient(135deg, #d8214b, #00aeec);
}

.flow .step {
  color: #61666d;
  background: #f1f2f3;
}

.flow .step.active {
  background: linear-gradient(110deg, var(--pink), var(--bili-blue));
}

@media (max-width: 980px) {
  .auth-wrap {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
    padding: 54px 0;
  }

  .hero-copy {
    padding: 10px 0 0;
  }

  .hero-copy .hero-type-title {
    font-size: 62px;
  }

  .topbar {
    width: min(100% - 20px, 1440px);
  }

  .nav {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .auth-wrap {
    width: min(100% - 24px, 1240px);
    padding: 32px 0;
  }

  .hero-copy .hero-type-title {
    font-size: 43px;
    line-height: 1.03;
  }

  .hero-copy .hero-lead {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.68;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .topbar {
    border-radius: 14px;
    padding: 14px;
  }

  .hero-ribbons {
    display: none;
  }
}

/* Huahuo-like rate card table */
.catalog-panel {
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
}

.catalog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 26px 18px;
  background:
    linear-gradient(135deg, rgba(255, 240, 246, 0.86), rgba(241, 250, 255, 0.92)),
    #ffffff;
  border-bottom: 1px solid #eef0f2;
}

.catalog-title-block {
  display: grid;
  gap: 6px;
}

.catalog-heading h2 {
  margin: 0;
  font-size: 20px;
  color: #18191c;
}

.catalog-heading p {
  margin: 0;
  color: #9499a0;
  font-size: 13px;
}

.catalog-metric-btn {
  min-width: 128px;
  color: #61666d;
}

.talent-import-btn {
  cursor: pointer;
  user-select: none;
}

.catalog-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px 18px;
  border-bottom: 1px solid #eef0f2;
  flex-wrap: wrap;
}

.catalog-filter .search-input {
  width: min(420px, 100%);
  background: #ffffff;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #61666d;
  background: #f6f7f8;
  border: 1px solid #eef0f2;
  font-size: 13px;
  font-weight: 800;
}

.filter-chip.active {
  color: #fb5d7a;
  background: #fff0f4;
  border-color: #ffd6df;
}

.discount-chip.active {
  color: #0f9f6e;
  background: #eafaf4;
  border-color: #bdebd8;
}

.rate-table-wrap {
  overflow-x: auto;
  background: #ffffff;
}

.rate-table {
  min-width: 1700px;
  border-collapse: separate;
  border-spacing: 0;
}

.rate-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 15px 16px;
  color: #9499a0;
  background: #f7f8fa;
  border-bottom: 1px solid #eef0f2;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.rate-table th:first-child,
.rate-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #ffffff;
  box-shadow: 12px 0 22px rgba(24, 25, 28, 0.04);
}

.rate-table th:first-child {
  background: #f7f8fa;
  z-index: 4;
}

.rate-table td {
  padding: 22px 16px;
  border-bottom: 1px solid #eef0f2;
  color: #3f444a;
  vertical-align: middle;
  background: #ffffff;
}

.talent-row:hover td,
.talent-row:hover td:first-child {
  background: #fff9fb;
}

.up-cell {
  width: 360px;
}

.up-info {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

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

.up-avatar-stack {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 62px;
}

.row-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  font-size: 16px;
  box-shadow: 0 8px 18px rgba(251, 114, 153, 0.18);
}

.featured-talent-btn {
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid #ffd18a;
  border-radius: 999px;
  color: #a15c00;
  background:
    linear-gradient(180deg, #fffaf0, #fff2d7),
    #fff7e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 7px 16px rgba(245, 158, 11, 0.12);
  font-size: 10px;
  font-weight: 900;
  line-height: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.featured-talent-btn.active {
  border-color: #ffb84d;
  color: #7c3f00;
  background:
    linear-gradient(180deg, #ffe9ad, #ffd670),
    #ffe19a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 8px 18px rgba(245, 158, 11, 0.2);
}

.featured-talent-btn:hover {
  transform: translateY(-1px);
}

.up-name-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: #18191c;
}

.up-name-line strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  white-space: nowrap;
}

.sparkles-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
}

.sparkles-text::before {
  content: "";
  position: absolute;
  inset: -5px -9px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 38%, rgba(255, 214, 102, 0.38), transparent 42%),
    radial-gradient(circle at 80% 40%, rgba(0, 174, 236, 0.18), transparent 48%);
  filter: blur(7px);
  opacity: 0.82;
  animation: sparklesTextGlow 2.2s ease-in-out infinite;
}

.sparkles-text-content {
  position: relative;
  z-index: 1;
  color: transparent;
  background: linear-gradient(90deg, #18191c 0%, #fb5d7a 28%, #f59e0b 52%, #00aeec 72%, #18191c 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.18);
  animation: sparklesTextSweep 2.4s linear infinite;
}

.sparkle-star {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.46),
    0 0 12px rgba(245, 158, 11, 0.8);
  animation: sparkleStarPop 1.5s ease-in-out infinite;
}

.sparkle-star-1 {
  top: -5px;
  left: 4%;
}

.sparkle-star-2 {
  top: 42%;
  right: -8px;
  animation-delay: 0.34s;
}

.sparkle-star-3 {
  bottom: -6px;
  left: 58%;
  animation-delay: 0.74s;
}

@keyframes sparklesTextSweep {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 220% 50%;
  }
}

@keyframes sparklesTextGlow {
  0%,
  100% {
    opacity: 0.54;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.98;
    transform: scale(1.04);
  }
}

@keyframes sparkleStarPop {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(0.58) rotate(0deg);
  }

  45% {
    opacity: 1;
    transform: scale(1.14) rotate(45deg);
  }
}

.verify-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00aeec;
  box-shadow: inset 0 0 0 3px #e8f8ff;
  flex: 0 0 auto;
}

.area-text {
  color: #9499a0;
  font-size: 12px;
}

.popularity-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  margin-top: 5px;
}

.popularity-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 12px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.popularity-badge-like {
  border-color: #ffc4d8;
  color: #d8214b;
  background: linear-gradient(180deg, #fff7fa, #ffeaf1);
}

.popularity-badge-folder {
  border-color: #bdeaff;
  color: #0077b6;
  background: linear-gradient(180deg, #f6fcff, #e8f8ff);
}

.up-tags,
.type-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.up-tags span,
.type-cell span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #008ac5;
  background: #e8f8ff;
  font-size: 12px;
  font-weight: 800;
}

.up-tags span:first-child,
.type-cell span:first-child {
  color: #fb5d7a;
  background: #fff0f4;
}

.up-info p {
  margin: 8px 0 0;
  color: #61666d;
  line-height: 1.45;
  font-size: 12px;
  max-width: 250px;
}

.case-thumb {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.5), transparent 28%),
    linear-gradient(135deg, #fb7299, #ff7a70 52%, #00aeec);
  box-shadow: 0 8px 18px rgba(24, 25, 28, 0.08);
  cursor: pointer;
  font-weight: 900;
}

.case-thumb:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.case-video-trigger {
  position: relative;
}

.case-video-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.24));
  opacity: 0;
  transition: opacity 0.18s ease;
}

.case-video-trigger:hover::after {
  opacity: 1;
}

.case-play-icon {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(24, 25, 28, 0.22);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.case-play-icon::before {
  content: "";
  margin-left: 2px;
  border-block: 5px solid transparent;
  border-left: 8px solid #fb5d7a;
}

.case-video-trigger:hover .case-play-icon,
.case-video-trigger:focus-visible .case-play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

.case-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.case-summary .case-thumb {
  flex: 0 0 70px;
  width: 70px;
  height: 46px;
  overflow: hidden;
}

.case-summary-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.case-summary-title {
  width: 100%;
  padding: 0;
  border: 0;
  color: #18191c;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.case-summary-title:hover {
  color: #00aeec;
}

.case-summary-title:disabled {
  color: #9499a0;
  cursor: not-allowed;
}

.case-summary-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: #61666d;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.case-summary-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 3px 6px;
  border: 1px solid #eef0f2;
  border-radius: 999px;
  background: #f7f8fa;
  white-space: nowrap;
}

.metric-strong {
  color: #3f444a;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.quote-cell {
  color: #fb5d7a;
  font-size: 18px;
  font-weight: 900;
  white-space: normal;
}

.rate-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.business-rate-actions {
  flex-direction: column;
  align-items: stretch;
}

.business-rate-actions button {
  width: 100%;
}

/* 单测脚本：单品事实表单与带货框架 */
.single-script-hero {
  background: linear-gradient(135deg, #fff 0%, #fff7fa 58%, #f3fbff 100%);
}

.single-product-facts-form {
  display: grid;
  gap: 20px;
}

.single-facts-text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.single-facts-text-grid label,
.single-fact-row label {
  display: grid;
  gap: 7px;
}

.single-facts-text-grid label > span,
.single-fact-row label > span {
  color: #616775;
  font-size: 12px;
  font-weight: 800;
}

.single-facts-text-grid textarea {
  min-height: 112px;
  resize: vertical;
}

.single-fact-section {
  padding: 16px;
  border: 1px solid #eceef3;
  border-radius: 16px;
  background: #fbfcfe;
}

.single-fact-section > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.single-fact-section h3 {
  margin: 0;
  color: #30343d;
  font-size: 15px;
}

.single-fact-section h3 em {
  color: #9399a6;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.single-fact-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px dashed #e3e6ed;
}

.single-fact-row:first-child {
  padding-top: 0;
  border-top: 0;
}

[data-single-rows="evidence"] .single-fact-row,
[data-single-rows="advantages"] .single-fact-row,
[data-single-rows="customFacts"] .single-fact-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.single-purchase-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.single-script-framework {
  overflow: hidden;
}

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

.single-framework-grid > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 142px;
  padding: 16px;
  border: 1px solid #f0e5ea;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #fff8fb);
}

.single-framework-grid > div > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  background: #fb5d7a;
  font-weight: 900;
}

.single-framework-grid strong {
  color: #343842;
  font-size: 14px;
}

.single-framework-grid small {
  color: #717784;
  line-height: 1.55;
}

.single-framework-grid em {
  margin-top: auto;
  color: #fb5d7a;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.single-framework-coverage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.single-framework-coverage > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  background: #fff;
}

.single-framework-coverage > span.covered {
  border-color: #bdebd4;
  background: #f3fff8;
}

.single-framework-coverage > span.not_applicable {
  background: #f6f7f9;
  color: #8c929f;
}

.single-framework-coverage > span.missing {
  border-color: #ffd0d9;
  background: #fff6f8;
}

.single-framework-coverage strong,
.single-framework-coverage small {
  font-size: 11px;
}

.single-outline-framework-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.single-outline-framework-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #d63f61;
  background: #fff0f4;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .single-framework-grid,
  .single-framework-coverage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .single-fact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .single-facts-text-grid,
  .single-purchase-fields,
  .single-framework-grid,
  .single-framework-coverage,
  .single-fact-row,
  [data-single-rows="evidence"] .single-fact-row,
  [data-single-rows="advantages"] .single-fact-row,
  [data-single-rows="customFacts"] .single-fact-row {
    grid-template-columns: 1fr;
  }
}

.rate-action-col {
  min-width: 188px;
}

.rate-action-icon-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #00a1d6;
  background: transparent;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.rate-action-gif {
  flex: 0 0 auto;
  width: var(--rate-gif-size, 88px);
  height: var(--rate-gif-size, 88px);
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: translate(var(--rate-gif-x, 0px), var(--rate-gif-y, 0px));
  transform-origin: center;
}

.rate-action-like {
  --rate-gif-size: 90px;
  --rate-gif-y: 0px;
}

.rate-action-favorite {
  --rate-gif-size: 94px;
  --rate-gif-y: 3px;
}

.rate-action-coin {
  --rate-gif-size: 110px;
  --rate-gif-y: 0px;
}

.rate-action-icon-btn:hover,
.rate-action-icon-btn:focus-visible {
  color: #fb5d7a;
  background: #fff0f4;
  transform: translateY(-1px);
}

.icon-btn,
.soft-pink-btn,
.hot-pink-btn {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 900;
  border: 0;
}

.icon-btn {
  color: #61666d;
  background: transparent;
}

.soft-pink-btn {
  color: #fb5d7a;
  background: #fff0f4;
}

.hot-pink-btn {
  color: #ffffff;
  background: #fb5d7a;
  box-shadow: 0 8px 18px rgba(251, 93, 122, 0.2);
}

.soft-pink-btn:hover,
.hot-pink-btn:hover,
.icon-btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .catalog-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .catalog-filter .search-input {
    width: 100%;
  }
}

/* Admin dashboard and latest workflow refinements */
.admin-dashboard {
  display: grid;
  gap: 18px;
}

.glowing-effect-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-opacity: 0;
  position: relative;
  isolation: isolate;
}

.glowing-effect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(251, 75, 135, 0.72), rgba(52, 201, 243, 0.5), rgba(255, 255, 255, 0.76));
  opacity: 0.54;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.glowing-effect-card > :not(.glowing-effect) {
  position: relative;
  z-index: 2;
}

.glowing-effect {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glow-opacity);
  background:
    radial-gradient(
      150px circle at var(--glow-x) var(--glow-y),
      rgba(251, 75, 135, 0.96),
      rgba(52, 201, 243, 0.66) 34%,
      rgba(255, 255, 255, 0.54) 56%,
      transparent 74%
    );
  filter: saturate(1.25);
  transition: opacity 0.18s ease;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.glowing-effect-card.is-glowing {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 24px 64px rgba(52, 201, 243, 0.1),
    0 18px 52px rgba(251, 75, 135, 0.1);
}

.dashboard-top-grid,
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(340px, 0.9fr);
  gap: 18px;
}

.dashboard-hero-card,
.dashboard-revenue-card,
.dashboard-task-card,
.dashboard-stat-card,
.dashboard-account-card {
  border-radius: 8px;
  border: 1px solid rgba(227, 229, 231, 0.9);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(24, 25, 28, 0.08);
}

.dashboard-revenue-card {
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  padding: 24px 28px 22px;
  background:
    radial-gradient(circle at 8% 8%, rgba(251, 93, 122, 0.1), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(0, 174, 236, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.96);
}

.admin-revenue-head,
.admin-revenue-body,
.admin-revenue-chart-head,
.admin-revenue-controls,
.admin-revenue-metrics {
  display: flex;
}

.admin-revenue-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-revenue-head h2 {
  margin: 0 0 5px;
  color: #22252b;
  font-size: 22px;
}

.admin-revenue-head p {
  margin: 0;
  color: #8a91a0;
  font-size: 12px;
  font-weight: 700;
}

.admin-revenue-controls {
  align-items: center;
  gap: 7px;
}

.admin-revenue-controls > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #e4e9f0;
  border-radius: 9px;
  color: #657087;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.admin-revenue-controls > button svg {
  width: 15px;
  height: 15px;
}

.admin-revenue-controls > button:hover:not(:disabled) {
  border-color: rgba(251, 93, 122, 0.45);
  color: #fb5d7a;
  background: #fff7fa;
}

.admin-revenue-controls > button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.admin-revenue-controls label {
  display: flex;
  align-items: center;
  min-height: 34px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #e4e9f0;
  border-radius: 9px;
  color: #8991a1;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 800;
}

.admin-revenue-controls input {
  width: 112px;
  border: 0;
  outline: 0;
  color: #323844;
  background: transparent;
  font: inherit;
}

.admin-revenue-body {
  align-items: stretch;
  min-width: 0;
  gap: 28px;
}

.admin-revenue-summary {
  display: flex;
  flex: 0 0 285px;
  flex-direction: column;
  min-width: 0;
  padding: 10px 0 2px;
}

.admin-revenue-summary > span {
  color: #7e8798;
  font-size: 12px;
  font-weight: 800;
}

.admin-revenue-summary > strong {
  margin-top: 6px;
  color: #fb477e;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.admin-revenue-metrics {
  align-items: stretch;
  flex-wrap: nowrap;
  padding-top: 22px;
}

.admin-revenue-metrics > div {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  gap: 3px;
  padding: 0 13px;
  border-left: 1px solid #edf0f4;
}

.admin-revenue-metrics > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.admin-revenue-metrics span,
.admin-revenue-metrics small {
  color: #979dab;
  font-size: 10px;
  font-weight: 750;
}

.admin-revenue-metrics strong {
  overflow: hidden;
  color: #333946;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-revenue-ranking {
  min-height: 164px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid #edf0f4;
}

.admin-revenue-ranking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-revenue-ranking-head > strong {
  color: #3f4653;
  font-size: 13px;
}

.admin-revenue-ranking-head > span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #fb5d7a;
  background: rgba(251, 93, 122, 0.09);
  font-size: 9px;
  font-weight: 900;
}

.admin-revenue-ranking-list {
  display: grid;
  gap: 10px;
}

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

.admin-revenue-rank {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 6px;
  color: #8790a0;
  background: #f0f3f7;
  font-size: 9px;
  font-weight: 900;
}

.admin-revenue-rank.rank-1 {
  color: #ad6c00;
  background: linear-gradient(145deg, #fff2b8, #ffd978);
}

.admin-revenue-rank.rank-2 {
  color: #687487;
  background: linear-gradient(145deg, #f4f6f9, #d9e0e9);
}

.admin-revenue-rank.rank-3 {
  color: #986242;
  background: linear-gradient(145deg, #ffe6d7, #efbd9e);
}

.admin-revenue-staff {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-revenue-staff > div {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 5px;
}

.admin-revenue-staff strong {
  overflow: hidden;
  color: #424957;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-revenue-staff small,
.admin-revenue-staff em {
  flex: 0 0 auto;
  color: #a1a8b5;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.admin-revenue-staff em {
  margin-left: auto;
}

.admin-revenue-staff > i {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0f2f6;
}

.admin-revenue-staff > i > b {
  display: block;
  width: var(--staff-revenue-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb638d, #4cbbed);
}

.admin-revenue-ranking-row > strong {
  color: #343b48;
  font-size: 11px;
  white-space: nowrap;
}

.admin-revenue-ranking-empty {
  display: grid;
  min-height: 112px;
  place-content: center;
  gap: 4px;
  color: #979fad;
  text-align: center;
}

.admin-revenue-ranking-empty strong {
  font-size: 11px;
}

.admin-revenue-ranking-empty span {
  color: #b0b6c1;
  font-size: 9px;
}

.admin-revenue-chart-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-revenue-chart-head {
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-revenue-chart-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.admin-revenue-chart-head strong {
  color: #414755;
  font-size: 13px;
}

.admin-revenue-chart-head span {
  color: #a0a6b2;
  font-size: 10px;
  font-weight: 700;
}

.admin-revenue-chart {
  position: relative;
  height: 304px;
  padding: 8px 4px 0;
  border-bottom: 1px solid #e7ebf1;
}

.admin-revenue-grid-lines {
  position: absolute;
  inset: 8px 4px 20px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

.admin-revenue-grid-lines i {
  border-top: 1px dashed rgba(211, 217, 226, 0.72);
}

.admin-revenue-bars {
  position: absolute;
  inset: 8px 4px 0;
  display: grid;
  grid-template-columns: repeat(var(--revenue-days, 31), minmax(3px, 1fr));
  align-items: end;
  gap: clamp(2px, 0.35vw, 5px);
}

.admin-revenue-day {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr 18px;
  align-self: stretch;
  min-width: 0;
  outline: 0;
}

.admin-revenue-day > i {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.admin-revenue-day b {
  width: 100%;
  max-width: 15px;
  height: var(--revenue-height);
  min-height: 0;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #fb5d8b 0%, #af82d8 48%, #35b9ef 100%);
  box-shadow: 0 5px 12px rgba(68, 175, 229, 0.15);
  transition: filter 0.16s ease, transform 0.16s ease;
}

.admin-revenue-day > span {
  align-self: end;
  overflow: visible;
  color: #adb2bd;
  font-size: 9px;
  text-align: center;
}

.admin-revenue-day:hover b,
.admin-revenue-day:focus b {
  filter: saturate(1.2) brightness(1.04);
  transform: translateY(-2px);
}

.admin-revenue-day::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% - 5px);
  z-index: 5;
  width: max-content;
  max-width: 230px;
  padding: 7px 9px;
  border-radius: 7px;
  color: #fff;
  background: rgba(35, 39, 49, 0.94);
  box-shadow: 0 8px 20px rgba(23, 28, 38, 0.18);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.admin-revenue-day:hover::after,
.admin-revenue-day:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.admin-revenue-empty {
  position: absolute;
  inset: 8px 4px 20px;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 4px;
  color: #8d96a6;
  text-align: center;
  pointer-events: none;
}

.admin-revenue-empty strong {
  font-size: 13px;
}

.admin-revenue-empty span {
  color: #afb5c0;
  font-size: 10px;
}

.dashboard-hero-card {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  padding: 34px 42px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 242, 247, 0.82) 42%, rgba(255, 255, 255, 0.2)),
    radial-gradient(circle at 78% 48%, rgba(251, 93, 122, 0.42), transparent 30%),
    linear-gradient(120deg, #f5f7ff 0%, #fff2f7 50%, #ffd4e0 100%);
}

.dashboard-hero-card::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -30px;
  width: 360px;
  height: 220px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(135deg, rgba(251, 114, 153, 0.92), rgba(0, 174, 236, 0.72));
  transform: rotate(-7deg);
  box-shadow: 0 24px 48px rgba(251, 93, 122, 0.22);
}

.window-dots {
  display: flex;
  gap: 9px;
  margin-bottom: 36px;
}

.window-dots span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fb7299;
}

.window-dots span:nth-child(2) {
  background: #ffc36a;
}

.window-dots span:nth-child(3) {
  background: #70d890;
}

.hero-card-copy {
  position: relative;
  z-index: 1;
}

.hero-card-copy p {
  margin: 0 0 10px;
  color: #fb5d7a;
  font-weight: 900;
}

.hero-card-copy h2 {
  margin: 0;
  color: #fb3f83;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  text-shadow: 0 4px 0 #ffffff;
}

.hero-card-copy strong {
  display: inline-flex;
  margin-top: 22px;
  padding: 12px 24px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(100deg, #2f83ff, #70b8ff);
  box-shadow: 0 12px 28px rgba(47, 131, 255, 0.26);
  font-size: 20px;
}

.hero-visual-card {
  position: absolute;
  z-index: 1;
  right: 86px;
  top: 58px;
  width: 170px;
  height: 150px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  transform: rotate(6deg);
  box-shadow: 0 18px 42px rgba(24, 25, 28, 0.12);
}

.hero-visual-card span {
  display: block;
  width: 92px;
  height: 10px;
  margin: 21px 28px;
  border-radius: 999px;
  background: #fb7299;
}

.hero-visual-card span:nth-child(2),
.hero-visual-card span:nth-child(3),
.hero-visual-card span:nth-child(4) {
  width: 116px;
}

.dashboard-task-card,
.dashboard-stat-card,
.dashboard-account-card {
  padding: 26px;
}

.task-tabs,
.dashboard-card-head {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 24px;
}

.task-tabs button {
  position: relative;
  padding: 0 0 12px;
  color: #18191c;
  background: transparent;
  font-size: 22px;
  font-weight: 900;
}

.task-tabs h2 {
  position: relative;
  margin: 0;
  padding: 0 0 12px;
  color: #fb5d7a;
  font-size: 22px;
  font-weight: 900;
}

.task-tabs h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: #fb5d7a;
}

.task-tabs button.active {
  color: #fb5d7a;
}

.task-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: #fb5d7a;
}

.task-tabs a {
  margin-left: auto;
  color: #9499a0;
  font-weight: 800;
}

.task-list {
  display: grid;
  gap: 14px;
}

.task-list button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 18px;
  border-radius: 8px;
  color: #61666d;
  background: #f3f9ff;
  text-align: left;
}

.task-list strong {
  color: #138dff;
  white-space: nowrap;
}

.dashboard-card-head {
  justify-content: space-between;
  gap: 12px;
}

.dashboard-overview-grid {
  gap: 14px;
}

.dashboard-overview-grid .dashboard-stat-card,
.dashboard-overview-grid .dashboard-account-card {
  padding: 16px 20px;
}

.dashboard-overview-grid .dashboard-card-head {
  margin-bottom: 10px;
}

.dashboard-overview-grid .dashboard-card-head h2,
.dashboard-overview-grid .dashboard-account-card h2 {
  font-size: 22px;
  line-height: 1.2;
}

.dashboard-card-head h2,
.dashboard-account-card h2 {
  margin: 0;
  color: #18191c;
  font-size: 26px;
}

.order-stat-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
  padding-top: 28px;
}

.dashboard-overview-grid .order-stat-strip {
  gap: 12px;
  padding-top: 10px;
}

.order-stat-strip div {
  display: grid;
  gap: 18px;
}

.dashboard-overview-grid .order-stat-strip div {
  gap: 8px;
}

.order-stat-strip span,
.dashboard-account-card p,
.account-balances span,
.balance-line span {
  color: #9499a0;
}

.order-stat-strip strong {
  color: #2f3338;
  font-size: 32px;
}

.dashboard-overview-grid .order-stat-strip strong {
  font-size: 26px;
  line-height: 1;
}

.dashboard-account-card {
  display: grid;
  align-content: start;
  gap: 18px;
}

.dashboard-overview-grid .dashboard-account-card {
  gap: 8px;
}

.dashboard-overview-grid .dashboard-account-card p {
  margin: 0;
  line-height: 1.4;
}

.account-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dashboard-overview-grid .account-balances {
  gap: 8px;
}

.account-balances div,
.balance-line {
  padding: 16px;
  border-radius: 8px;
  background: #fbfcfd;
}

.dashboard-overview-grid .account-balances div,
.dashboard-overview-grid .balance-line {
  padding: 10px 12px;
}

.account-balances strong {
  display: block;
  margin-top: 8px;
  color: #2f3338;
  font-size: 24px;
}

.balance-line strong {
  display: block;
  margin-top: 8px;
  color: #fb5d7a;
  font-size: 24px;
}

.dashboard-overview-grid .account-balances strong,
.dashboard-overview-grid .balance-line strong {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.1;
}

.dashboard-overview-grid .plain-btn {
  min-height: 36px;
  padding-block: 7px;
}

.dashboard-process-card,
.dashboard-rule-card {
  box-shadow: 0 14px 34px rgba(24, 25, 28, 0.08);
}

.dashboard-flow {
  gap: 10px;
}

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

.compact-btn {
  min-height: 40px;
  padding: 0 16px;
}

.tiny-btn {
  min-height: 32px;
  padding: 7px 11px;
  font-size: 13px;
}

.rate-table {
  min-width: 1700px;
}

.rate-table th:nth-child(9),
.rate-table td:nth-child(9),
.rate-table th:nth-child(10),
.rate-table td:nth-child(10) {
  width: 150px;
}

.rate-table th:nth-child(11),
.rate-table td:nth-child(11) {
  width: 210px;
}

.rate-table th.quote-col,
.rate-table td.quote-col {
  width: 190px;
}

.type-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.type-cell span {
  border-radius: 999px;
}

.metrics-modal {
  width: min(560px, calc(100% - 28px));
}

.metric-option-grid {
  display: grid;
  gap: 10px;
}

.metric-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.metric-option input {
  justify-self: center;
}

.metric-option span {
  display: grid;
  gap: 3px;
}

.metric-option strong {
  color: #18191c;
  font-size: 14px;
}

.metric-option small {
  color: #9499a0;
  font-size: 12px;
}

.editable-metric {
  color: #008ac5;
}

.talent-modal {
  width: min(760px, 100%);
}

.folder-builder-modal {
  width: min(980px, calc(100% - 28px));
  padding: 24px;
  background: rgba(255, 255, 255, 0.97);
}

.folder-builder-form {
  display: grid;
  gap: 14px;
}

.folder-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.folder-builder-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.folder-name-field {
  width: 100%;
  max-width: 384px;
  gap: 8px;
  margin: 0 0 0 auto;
}

.folder-name-field input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.folder-name-field input::placeholder {
  color: #9ca3af;
}

.folder-name-field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
  outline: none;
}

.folder-name-field input:disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (min-width: 640px) {
  .folder-name-field input {
    min-height: 50px;
    padding-block: 12px;
    font-size: 14px;
  }
}

.folder-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  gap: 14px;
  margin-top: 8px;
}

.folder-picker-column {
  min-height: 430px;
  padding: 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.folder-picker-column.picked {
  background: #fffafb;
  border-color: #ffd8e1;
}

.folder-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.folder-column-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.folder-column-head h3 {
  margin: 0;
}

.folder-column-title small {
  color: #9499a0;
  font-size: 12px;
  font-weight: 700;
}

.folder-column-head span {
  color: #9499a0;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.folder-talent-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: -2px 0 12px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  color: #9ca3af;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.folder-talent-search:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.folder-talent-search svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.folder-talent-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

.folder-talent-search input::placeholder {
  color: #9ca3af;
}

.folder-talent-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.folder-talent-option {
  display: grid;
  grid-template-columns: 20px 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.folder-talent-option.selected {
  grid-template-columns: 20px 38px minmax(0, 1fr) 98px 128px;
  border-color: #ffd3de;
  background: #ffffff;
}

.folder-talent-option:hover {
  border-color: #ccefff;
  background: #fbfdff;
}

.folder-talent-avatar {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background: #f6f7f8;
}

.folder-talent-avatar img,
.folder-talent-avatar .image-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.folder-talent-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.folder-talent-main strong {
  color: #18191c;
  font-size: 13px;
}

.folder-talent-main small,
.folder-date-field small,
.folder-deal-field small {
  color: #9499a0;
  font-size: 11px;
  font-weight: 800;
}

.folder-talent-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.folder-talent-prices b {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #7b8490;
  background: #f5f7fa;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.folder-talent-prices b.active {
  color: #fb4b78;
  background: #fff0f5;
}

.folder-date-field,
.folder-deal-field {
  display: grid;
  position: relative;
  gap: 4px;
}

.folder-date-field input {
  width: 100%;
  border: 1px solid #e3e5e7;
  border-radius: 8px;
  padding: 7px 8px;
  background: white;
  color: #3f444a;
  font-size: 12px;
}

.folder-deal-dropdown {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
}

.folder-deal-control {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.folder-deal-button,
.folder-deal-arrow,
.folder-deal-menu button {
  color: #374151;
  background: #ffffff;
  font-size: 12px;
  font-weight: 650;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.folder-deal-button {
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 9px;
  text-align: left;
}

.folder-deal-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  border-left: 1px solid #d1d5db;
}

.folder-deal-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.folder-deal-button:hover,
.folder-deal-arrow:hover,
.folder-deal-menu button:hover {
  color: #111827;
  background: #f9fafb;
}

.folder-deal-button:focus-visible,
.folder-deal-arrow:focus-visible,
.folder-deal-menu button:focus-visible {
  position: relative;
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.folder-deal-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  min-width: 112px;
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.folder-deal-dropdown:hover .folder-deal-menu,
.folder-deal-dropdown:focus-within .folder-deal-menu {
  display: block;
}

.folder-deal-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
}

.folder-deal-menu button[aria-checked="true"] {
  color: #111827;
  background: #f9fafb;
}

.folder-date-field input.hs-datepicker {
  min-height: 42px;
  padding: 11px 36px 11px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.folder-date-field input.hs-datepicker::placeholder {
  color: #9ca3af;
}

.folder-date-field input.hs-datepicker:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
  outline: none;
}

.folder-date-field input.hs-datepicker:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.folder-date-field::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 13px;
  width: 13px;
  height: 13px;
  border: 1.8px solid #111827;
  border-top-width: 3px;
  border-radius: 3px;
  opacity: 0.72;
  pointer-events: none;
}

.folder-date-field:has(input:disabled)::after {
  opacity: 0.32;
}

.folder-date-field input {
  min-width: 0;
}

.folder-datepicker-popover {
  position: fixed;
  z-index: 10020;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.folder-datepicker-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.folder-datepicker-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #374151;
  background: #ffffff;
  cursor: pointer;
}

.folder-datepicker-arrow:hover {
  color: #111827;
  background: #f9fafb;
}

.folder-datepicker-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.folder-datepicker-selects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 8px;
}

.folder-datepicker-selects select {
  min-width: 0;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 9px;
  color: #111827;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.folder-datepicker-weekdays,
.folder-datepicker-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.folder-datepicker-weekdays {
  margin-bottom: 6px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.folder-datepicker-days button,
.folder-datepicker-blank {
  width: 100%;
  aspect-ratio: 1;
}

.folder-datepicker-days button {
  border: 0;
  border-radius: 8px;
  color: #374151;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.folder-datepicker-days button:hover {
  color: #111827;
  background: #f3f4f6;
}

.folder-datepicker-days button.today {
  color: #2563eb;
  background: #eff6ff;
}

.folder-datepicker-days button.active {
  color: #ffffff;
  background: #3b82f6;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.24);
}

.folder-datepicker-days button:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  background: transparent;
}

.folder-checkout-bar {
  position: sticky;
  bottom: -24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px -24px -24px;
  padding: 14px 24px;
  border-top: 1px solid #eef0f2;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.folder-checkout-bar > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.folder-checkout-bar span,
.folder-checkout-bar small {
  color: #9499a0;
  font-size: 12px;
  font-weight: 800;
}

.folder-checkout-bar strong {
  color: #fb5d7a;
  font-size: 24px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .dashboard-top-grid,
  .dashboard-main-grid,
  .folder-picker-grid {
    grid-template-columns: 1fr;
  }

  .folder-builder-head {
    flex-direction: column;
    gap: 12px;
  }

  .folder-name-field {
    max-width: none;
    margin-left: 0;
  }

  .order-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-visual-card,
  .dashboard-hero-card::after {
    display: none;
  }

  .admin-revenue-body {
    gap: 20px;
  }

  .admin-revenue-summary {
    flex-basis: 255px;
  }
}

@media (max-width: 680px) {
  .dashboard-revenue-card {
    min-height: 0;
    padding: 20px 16px;
  }

  .admin-revenue-head,
  .admin-revenue-body {
    flex-direction: column;
  }

  .admin-revenue-head {
    margin-bottom: 14px;
  }

  .admin-revenue-controls {
    width: 100%;
  }

  .admin-revenue-controls label {
    flex: 1 1 auto;
    justify-content: center;
  }

  .admin-revenue-summary {
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .admin-revenue-metrics {
    margin-top: 0;
    padding-top: 18px;
  }

  .admin-revenue-metrics > div {
    flex: 1 1 0;
  }

  .admin-revenue-chart {
    height: 190px;
  }

  .admin-revenue-bars {
    gap: 2px;
  }

  .admin-revenue-day::after {
    display: none;
  }
}

/* Tightened resource table based on review comments */
.catalog-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px 8px;
}

.catalog-split-filters {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.catalog-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid #dce7ef;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
}

.catalog-search-field:focus-within {
  border-color: var(--bili-blue);
  box-shadow: 0 0 0 3px rgba(0, 174, 236, 0.12);
}

.catalog-search-field span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.catalog-search-field input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 0;
  padding: 0;
  color: #1f2937;
  background: transparent;
  outline: none;
  font-size: 13px;
}

.catalog-search-field input:focus-visible {
  outline: none;
  outline-offset: 0;
}

.catalog-name-filter {
  flex: 1.2 1 210px;
  max-width: 270px;
}

.catalog-uid-filter {
  flex: 0.85 1 150px;
  max-width: 190px;
}

.catalog-track-filter,
.catalog-content-type-filter,
.catalog-brand-filter,
.catalog-area-filter {
  flex: 1 1 170px;
  max-width: 220px;
}

.catalog-refresh-btn,
.catalog-clear-btn {
  order: 9;
  flex: 0 0 auto;
  align-self: flex-end;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.catalog-refresh-btn {
  margin-left: auto;
  border-color: rgba(0, 174, 236, 0.28);
  background: #eef9ff;
  color: #008ac5;
}

.catalog-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.create-folder-btn {
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  flex: 0 0 auto;
}

.catalog-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px 18px;
  border-bottom: 1px solid #eef0f2;
  flex-wrap: wrap;
}

.talent-list-export-btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 13px;
  border-color: rgba(251, 93, 122, 0.24);
  border-radius: 10px;
  color: #d92c50;
  background: linear-gradient(180deg, #ffffff, #fff7f9);
  box-shadow: 0 7px 16px rgba(216, 44, 80, 0.08);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.talent-list-export-btn:hover:not(:disabled) {
  border-color: rgba(251, 93, 122, 0.46);
  color: #c51f43;
  background: #fff1f5;
  box-shadow: 0 9px 20px rgba(216, 44, 80, 0.13);
  transform: translateY(-1px);
}

.talent-list-export-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.talent-list-export-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-filter-export-btn {
  margin-left: auto;
}

.likes-list-export-btn {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .catalog-filter-export-btn {
    width: 100%;
    margin-left: 0;
  }
}

.rate-table {
  min-width: 1780px;
  table-layout: fixed;
}

.rate-table th.brand-col,
.rate-table td.brand-cell {
  width: 160px;
}

.brand-cell span {
  display: -webkit-box;
  overflow: hidden;
  color: #555d68;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.table-scroll-hint {
  display: none;
}

.rate-table th {
  padding: 13px 12px;
  font-size: 12px;
}

.rate-table td {
  padding: 16px 12px;
}

.rate-table th:nth-child(1),
.rate-table td:nth-child(1) {
  width: 320px;
}

.rate-table th:nth-child(2),
.rate-table td:nth-child(2) {
  width: 260px;
}

.rate-table th:nth-child(3),
.rate-table td:nth-child(3) {
  width: 132px;
}

.rate-table th:nth-child(4),
.rate-table td:nth-child(4),
.rate-table th:nth-child(5),
.rate-table td:nth-child(5),
.rate-table th:nth-child(6),
.rate-table td:nth-child(6),
.rate-table th:nth-child(7),
.rate-table td:nth-child(7),
.rate-table th:nth-child(8),
.rate-table td:nth-child(8) {
  width: 112px;
}

.rate-table th:nth-child(9),
.rate-table td:nth-child(9),
.rate-table th:nth-child(10),
.rate-table td:nth-child(10) {
  width: 122px;
}

.rate-table th:nth-child(11),
.rate-table td:nth-child(11) {
  width: 180px;
}

.rate-table th.quote-col,
.rate-table td.quote-col {
  width: 190px;
}

.up-cell {
  width: 320px;
}

.up-info {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
}

.up-avatar-stack {
  width: 58px;
}

.row-avatar {
  width: 42px;
  height: 42px;
  overflow: hidden;
  text-decoration: none;
}

.row-avatar img,
.case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.row-avatar img + .image-fallback,
.case-thumb img + .image-fallback {
  display: none;
}

.row-avatar img[hidden] + .image-fallback,
.case-thumb img[hidden] + .image-fallback {
  display: grid;
}

.up-name-line strong {
  font-size: 14px;
}

.area-text {
  font-size: 11px;
}

.popularity-badge {
  min-height: 17px;
  padding: 2px 5px;
  font-size: 10px;
}

.up-tags,
.type-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.up-tags span,
.up-tags a,
.type-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 6px;
  color: #008ac5;
  background: #e8f8ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.up-tags span:first-child,
.type-tags span:first-child {
  color: #fb5d7a;
  background: #fff0f4;
}

.uid-link {
  text-decoration: none;
}

.uid-link:hover {
  color: #ffffff;
  background: #00aeec;
}

.up-info p {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.45;
  max-width: 225px;
}

.type-cell {
  display: table-cell;
  margin-top: 0;
  min-width: 0;
}

.type-tags {
  justify-content: flex-start;
}

.case-thumb {
  width: 50px;
  height: 38px;
  overflow: hidden;
}

.case-summary .case-thumb {
  width: 70px;
  height: 46px;
}

.case-summary-title {
  font-size: 12px;
}

.case-summary-stats span {
  min-height: 18px;
  padding: 3px 6px;
}

.metric-strong,
.quote-cell {
  font-size: 16px;
}

.rate-actions {
  justify-content: flex-start;
}

.rate-action-icon-btn,
.icon-btn,
.soft-pink-btn,
.hot-pink-btn {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 12px;
}

.rate-action-icon-btn {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

@media (max-width: 760px) {
  .catalog-search-row {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-split-filters {
    width: 100%;
  }

  .catalog-search-field {
    flex-basis: 100%;
    max-width: none;
  }

  .catalog-refresh-btn,
  .catalog-clear-btn {
    width: 100%;
  }

  .create-folder-btn {
    width: 100%;
  }
}

/* Final overrides for the expanded刊例 table and folder builder */
.rate-table {
  min-width: 1780px;
  table-layout: fixed;
}

.rate-table th.brand-col,
.rate-table td.brand-cell {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
}

.rate-table th:nth-child(9),
.rate-table td:nth-child(9),
.rate-table th:nth-child(10),
.rate-table td:nth-child(10) {
  width: 150px;
}

.rate-table th:nth-child(11),
.rate-table td:nth-child(11) {
  width: 210px;
}

.rate-table th.quote-col,
.rate-table td.quote-col {
  width: 190px;
}

.type-tags {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 7px;
  margin-top: 0;
}

.type-tags span {
  border-radius: 999px;
  line-height: 1.2;
}

.quote-stack {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-width: min(100%, 154px);
  width: max-content;
  max-width: 100%;
  white-space: normal;
}

.quote-stack strong {
  color: #3f444a;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.quote-stack strong.original-price {
  color: #61666d;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: #e62129;
}

.quote-stack .discount-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid #ffd0dc;
  border-radius: 999px;
  background: #fff3f6;
  white-space: nowrap;
}

.quote-stack .discount-line b {
  color: #d8214b;
  font-size: 11px;
  font-weight: 900;
}

.quote-stack small {
  color: #d8214b;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.quote-stack em {
  color: #9499a0;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.talent-modal {
  width: min(900px, calc(100% - 28px));
}

.talent-flow {
  display: grid;
  gap: 14px;
}

.talent-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.talent-step.compact-step {
  align-items: start;
}

.step-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #fb5d7a;
  background: #fff0f4;
  font-weight: 900;
}

.talent-step h3 {
  margin: 0;
  color: #18191c;
  font-size: 16px;
}

.talent-step p {
  margin: 5px 0 14px;
  color: #9499a0;
  font-size: 13px;
}

.talent-step .field {
  margin-bottom: 12px;
}

.action-field {
  align-content: end;
}

.action-field .secondary-btn {
  width: fit-content;
  min-width: 104px;
}

.auto-profile-preview,
.case-cover-preview {
  min-height: 82px;
  padding: 14px;
  border: 1px dashed #d6dde5;
  border-radius: 8px;
  color: #9499a0;
  background: #ffffff;
}

.auto-profile-preview.has-data,
.case-cover-preview.has-data {
  border-style: solid;
  border-color: #ccefff;
  background: #f4fbff;
}

.profile-preview-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.profile-avatar {
  width: 54px;
  height: 54px;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-preview-card strong {
  color: #18191c;
  font-size: 16px;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 7px 0;
}

.profile-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #008ac5;
  background: #e8f8ff;
  font-size: 12px;
  font-weight: 800;
}

.profile-preview-card p {
  margin: 0;
  color: #61666d;
  line-height: 1.5;
}

.case-cover-preview {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.case-cover-preview:not(.has-data) {
  display: flex;
}

.case-cover-preview img {
  width: 132px;
  height: 76px;
  object-fit: cover;
  border-radius: 8px;
}

.case-cover-preview span {
  font-weight: 800;
}

.discount-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  color: #3f444a;
  font-weight: 800;
}

.discount-toggle input {
  flex: 0 0 auto;
}

.discount-fields {
  display: none;
}

.discount-fields.is-visible,
.discount-toggle:has(input:checked) + .discount-fields {
  display: grid;
}

.discount-date-field {
  grid-column: 1 / -1;
  max-width: 260px;
}

.talent-save-bar {
  position: sticky;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px -22px -22px;
  padding: 14px 22px;
  border-top: 1px solid #eef0f2;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.talent-save-bar span {
  margin-right: auto;
  color: #fb5d7a;
  font-weight: 900;
}

.talent-modal {
  width: min(860px, calc(100% - 28px));
  padding: 20px;
}

.talent-modal .panel-title {
  margin-bottom: 14px;
}

.talent-flow {
  gap: 10px;
}

.talent-step {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
}

.step-index {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.talent-step h3 {
  font-size: 15px;
}

.talent-step p {
  margin: 3px 0 10px;
  font-size: 12px;
}

.talent-step .field {
  margin-bottom: 8px;
}

.talent-modal .field {
  gap: 5px;
}

.talent-modal .field label {
  font-size: 12px;
}

.talent-modal .field input,
.talent-modal .field select,
.talent-modal .field textarea {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.talent-modal .secondary-btn,
.talent-modal .primary-btn,
.talent-modal .plain-btn {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
}

.action-field .secondary-btn {
  min-width: 82px;
}

.uid-result-box,
.case-status-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px dashed #d6dde5;
  border-radius: 8px;
  color: #9499a0;
  background: #ffffff;
}

.uid-result-box.is-complete,
.case-status-box.is-complete {
  border-style: solid;
  border-color: #ccefff;
  background: #f5fcff;
}

.uid-result-box.is-loading,
.case-status-box.is-loading {
  border-color: #b7e6ff;
  background: #f7fcff;
}

.uid-result-box.is-invalid,
.case-status-box.is-invalid {
  border-style: solid;
  border-color: #ffd0da;
  background: #fff7f9;
}

.status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c7cbd1;
}

.status-dot.complete {
  background: #18b87a;
}

.status-dot.waiting {
  background: #20aee5;
}

.status-dot.invalid {
  background: #d8214b;
}

.status-copy {
  display: grid;
  gap: 2px;
}

.status-copy strong {
  color: #18191c;
  font-size: 13px;
}

.status-copy small {
  color: #9499a0;
  font-size: 12px;
}

.uid-account-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 100%;
  cursor: pointer;
}

.uid-account-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.uid-account-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb5d7a, #20aee5);
  color: #fff;
  font-weight: 900;
}

.uid-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uid-account-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.uid-account-main strong {
  color: #18191c;
  font-size: 14px;
}

.uid-account-main small {
  overflow: hidden;
  color: #9499a0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uid-account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.uid-account-meta b {
  max-width: 100%;
  overflow: hidden;
  padding: 2px 7px;
  border-radius: 999px;
  color: #61666d;
  background: #eef6fb;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uid-account-option em {
  padding: 4px 9px;
  border-radius: 999px;
  color: #0f9f6e;
  background: #eafaf4;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.uid-account-option em.is-partial {
  color: #a56800;
  background: #fff4d8;
}

.case-video-result {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.case-video-cover {
  display: grid;
  place-items: center;
  width: 86px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #eef6fb;
  color: #9499a0;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.case-video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-video-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.case-video-copy strong {
  overflow: hidden;
  color: #18191c;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-video-copy small {
  color: #9499a0;
  font-size: 12px;
}

.case-video-result em {
  padding: 4px 9px;
  border-radius: 999px;
  color: #0f9f6e;
  background: #eafaf4;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.talent-save-bar {
  justify-content: flex-end;
  margin: 12px -20px -20px;
  padding: 12px 20px;
}

.talent-save-bar span {
  display: none;
}

.preference-board {
  padding: 26px;
  box-shadow: 0 14px 34px rgba(24, 25, 28, 0.08);
}

.preference-board .dashboard-card-head p {
  margin: 7px 0 0;
  color: #9499a0;
  font-size: 13px;
}

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

.permission-panel {
  padding: 24px;
}

.permission-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 0;
}

.permission-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-width: 0;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f2;
}

.permission-search-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 1fr));
  gap: 8px;
}

.permission-search-field {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.permission-search-field span {
  color: #7d8794;
  font-size: 11px;
  font-weight: 800;
}

.permission-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #e3e9f1;
  border-radius: 8px;
  color: #18191c;
  background: rgba(255, 255, 255, 0.94);
  font: inherit;
  font-size: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.permission-search-field input:focus {
  border-color: #8ed8f2;
  box-shadow: 0 0 0 3px rgba(32, 174, 229, 0.1);
  outline: none;
}

.permission-search-field input::placeholder {
  color: #b5bac1;
}

.permission-search-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 36px;
  color: #9499a0;
  font-size: 11px;
  font-weight: 800;
}

.permission-search-meta strong {
  color: #1687b8;
  font-size: 13px;
}

.permission-search-empty {
  grid-column: 1 / -1;
  min-height: 150px;
}

.permission-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.permission-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #eef0f2;
  border-radius: 999px;
  color: #61666d;
  background: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
}

.permission-stats strong {
  color: #d8214b;
  font-size: 16px;
}

.permission-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.permission-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) 122px minmax(270px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(251, 252, 253, 0.94));
  box-shadow: 0 10px 22px rgba(24, 25, 28, 0.035);
}

.permission-user {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.permission-user > div {
  min-width: 0;
}

.permission-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #fb5d7a, #20aee5);
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(251, 93, 122, 0.18);
}

.permission-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.permission-name-line strong {
  overflow: hidden;
  color: #18191c;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-presence-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.staff-presence-badge i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.staff-presence-badge.is-online {
  border-color: #bcebd8;
  color: #14956b;
  background: #eefbf6;
}

.staff-presence-badge.is-online i {
  animation: staff-presence-pulse 1.8s ease-out infinite;
}

.staff-presence-badge.is-idle {
  border-color: #f7d99b;
  color: #b87812;
  background: #fff9e9;
}

.staff-presence-badge.is-offline {
  border-color: #dde3e9;
  color: #8b949f;
  background: #f6f8fa;
}

.staff-login-location {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 152px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #dbeaf3;
  border-radius: 999px;
  color: #567084;
  background: #f4f9fc;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.staff-login-location small {
  flex: 0 0 auto;
  color: #8a9aa7;
  font: inherit;
}

.staff-login-location span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes staff-presence-pulse {
  0%, 45% { box-shadow: 0 0 0 0 rgba(20, 149, 107, 0.28); }
  75%, 100% { box-shadow: 0 0 0 5px rgba(20, 149, 107, 0); }
}

.permission-user p {
  margin: 5px 0 0;
  overflow: hidden;
  color: #9499a0;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .staff-presence-badge.is-online i {
    animation: none;
  }
}

.permission-user-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.permission-user-activity span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid #e6f2f8;
  border-radius: 999px;
  color: #61666d;
  background: linear-gradient(135deg, #f7fbff, #fff7fa);
  white-space: nowrap;
}

.permission-user-activity small {
  color: #9499a0;
  font-size: 11px;
  font-weight: 800;
}

.permission-user-activity strong {
  color: #1687b8;
  font-size: 12px;
  font-weight: 900;
}

.permission-user-likes {
  display: grid;
  align-content: center;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid #dceef7;
  border-radius: 10px;
  color: #1687b8;
  background: linear-gradient(135deg, #f3fbff, #fff7fa);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.permission-user-likes:hover,
.permission-user-likes:focus-visible {
  border-color: #8ed8f2;
  box-shadow: 0 8px 18px rgba(32, 174, 229, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.permission-user-likes small,
.permission-user-likes span {
  color: #7d8794;
  font-size: 11px;
  font-weight: 800;
}

.permission-user-likes strong {
  font-size: 19px;
  line-height: 1.15;
}

.permission-user-likes em {
  margin-left: 2px;
  font-size: 11px;
  font-style: normal;
}

.permission-user-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.permission-user-summary span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  background: #f8fafc;
}

.permission-user-summary small {
  color: #9499a0;
  font-size: 11px;
  font-weight: 800;
}

.permission-user-summary strong {
  overflow: hidden;
  color: #2f3338;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-controls {
  display: grid;
  grid-template-columns: minmax(210px, 0.95fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
}

.permission-control {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.permission-control-label {
  color: #7d8794;
  font-size: 12px;
  font-weight: 800;
}

.permission-role-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid #e3e9f1;
  border-radius: 8px;
  background: #f6f8fb;
}

.permission-role-btn {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #61666d;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.permission-role-btn.active {
  border-color: #ffd0dc;
  color: #d8214b;
  background: #fff;
  box-shadow: 0 7px 16px rgba(216, 33, 75, 0.08);
}

.permission-role-btn:not(.active):hover {
  color: #2f3338;
  background: rgba(255, 255, 255, 0.72);
}

.permission-password-input {
  position: relative;
  display: block;
}

.permission-password-input::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #b8c1cc;
  transform: translateY(-50%);
}

.permission-controls input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  padding: 8px 12px 8px 28px;
  color: #18191c;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.permission-controls input:focus {
  border-color: #fb7299;
  box-shadow: 0 0 0 3px rgba(251, 114, 153, 0.12);
  outline: none;
}

.permission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.permission-actions .soft-pink-btn,
.permission-actions .plain-btn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}

.permission-delete-btn {
  border-color: #ffd1d8;
  color: #d8214b;
  background: #fff7f9;
}

.permission-delete-btn:hover {
  border-color: #fb5d7a;
  color: #a50f2e;
  background: #fff0f4;
}

.user-delete-modal {
  width: min(520px, calc(100vw - 36px));
}

.user-management-modal {
  width: min(680px, calc(100vw - 36px));
}

.user-management-form {
  display: grid;
  gap: 16px;
}

.user-management-password-field {
  grid-column: 1 / -1;
}

.user-management-notice {
  border-color: #d9eef8;
  color: #4f6f80;
  background: #f5fbfe;
}

.customer-likes-modal {
  width: min(860px, calc(100vw - 36px));
}

.customer-likes-list {
  display: grid;
  max-height: min(60vh, 560px);
  gap: 8px;
  overflow-y: auto;
}

.customer-like-item {
  display: grid;
  grid-template-columns: auto minmax(180px, 1.25fr) minmax(130px, 0.8fr) minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  background: #fff;
}

.customer-like-main,
.customer-like-preference,
.customer-like-note {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.customer-like-item small {
  overflow: hidden;
  color: #9499a0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-like-item strong {
  overflow: hidden;
  color: #2f3338;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-like-main > strong {
  color: #18191c;
  font-size: 14px;
}

.customer-like-missing {
  border-color: #f5dce3;
  background: #fff9fa;
}

.customer-likes-empty {
  min-height: 150px;
}

@media (max-width: 1400px) {
  .permission-search-fields {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 900px) {
  .permission-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .permission-title {
    flex-direction: column;
    align-items: stretch;
  }

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

  .permission-search-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-search-meta {
    justify-content: flex-start;
  }

  .permission-stats {
    justify-content: flex-start;
  }

  .permission-actions {
    justify-content: flex-start;
  }

  .permission-controls {
    grid-template-columns: 1fr;
  }

  .permission-user-summary {
    grid-template-columns: 1fr;
  }

  .permission-user-likes {
    width: 100%;
  }

  .customer-like-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .customer-like-preference,
  .customer-like-note {
    grid-column: 1 / -1;
  }

  .user-management-password-field {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .permission-search-fields {
    grid-template-columns: 1fr;
  }
}

.preference-column {
  min-height: 330px;
  padding: 10px;
  border: 1px solid rgba(227, 240, 248, 0.94);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(242, 249, 255, 0.5)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 40px rgba(31, 88, 142, 0.08);
  overflow: visible;
}

.tilted-card-figure {
  position: relative;
  perspective: 900px;
  transform-style: preserve-3d;
}

.tilted-card-inner {
  position: relative;
  transform: translateZ(0);
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.24s cubic-bezier(0.2, 0.82, 0.2, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.preference-tilted-inner {
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 14px;
  background:
    radial-gradient(circle at var(--tilt-x, 50%) var(--tilt-y, 32%), rgba(255, 255, 255, 0.82), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.9));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 14px 30px rgba(26, 49, 82, 0.06);
}

.preference-tilted-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--tilt-x, 50%) var(--tilt-y, 50%), rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(135deg, rgba(251, 75, 135, 0.12), transparent 38%, rgba(52, 201, 243, 0.16));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.preference-column.is-tilted .preference-tilted-inner {
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 24px 48px rgba(31, 88, 142, 0.14),
    0 18px 36px rgba(251, 75, 135, 0.08);
}

.preference-column.is-tilted .preference-tilted-inner::before {
  opacity: 1;
}

.preference-tilted-inner > * {
  position: relative;
  z-index: 1;
  transform: translateZ(22px);
}

.tilted-card-caption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  padding: 6px 11px;
  border: 1px solid rgba(251, 75, 135, 0.16);
  border-radius: 999px;
  color: #273246;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 28px rgba(31, 88, 142, 0.12);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.16s ease;
  will-change: transform, opacity;
}

@media (max-width: 640px) {
  .tilted-card-caption {
    display: none;
  }
}

.preference-column h3 {
  margin: 0 0 14px;
  color: #18191c;
  font-size: 17px;
}

.preference-list {
  display: grid;
  gap: 12px;
}

.preference-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(238, 240, 242, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 22px rgba(31, 88, 142, 0.035);
  transform: translateZ(18px);
}

.preference-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fb5d7a;
  background: #fff0f4;
  font-weight: 900;
}

.preference-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.preference-name {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.preference-name strong {
  min-width: 0;
  overflow: hidden;
  color: #18191c;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preference-name small,
.preference-main p {
  color: #9499a0;
  font-size: 12px;
}

.preference-main p {
  margin: 0;
}

.preference-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f2;
}

.preference-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fb5d7a;
}

.flow .step.active,
.dashboard-flow .step.active {
  color: #008ac5;
  background: #e8f8ff;
  border: 1px solid #b8eaff;
}

.likes-panel {
  padding: 24px;
}

.likes-list {
  display: grid;
  gap: 12px;
}

.like-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(260px, 1.05fr) minmax(238px, 0.8fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.like-card:hover {
  border-color: #ffd6df;
  box-shadow: 0 12px 28px rgba(24, 25, 28, 0.06);
}

.like-talent {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.like-avatar {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
  border: 0;
}

.like-avatar img,
.like-avatar .image-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.like-talent h3 {
  margin: 0;
  color: #18191c;
  font-size: 16px;
}

.like-talent p {
  margin: 5px 0 9px;
  color: #9499a0;
  font-size: 12px;
}

.like-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.like-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fbfcfd;
  border: 1px solid #eef0f2;
}

.like-price small {
  color: #9499a0;
  font-size: 11px;
  font-weight: 900;
}

.like-price strong {
  color: #3f444a;
  font-size: 14px;
  font-weight: 900;
}

.like-price strong.discount-price {
  color: #d8214b;
}

.like-price em {
  color: #9499a0;
  font-size: 12px;
  font-style: normal;
  text-decoration: line-through;
  text-decoration-color: #d8214b;
  text-decoration-thickness: 2px;
}

.like-case {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.like-case > span {
  color: #7d8793;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.like-case .case-summary {
  max-width: 100%;
}

.like-case .case-summary .case-thumb {
  flex-basis: 82px;
  width: 82px;
  height: 50px;
}

.like-fields {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 168px);
  gap: 10px;
  justify-content: start;
}

.like-fields .field {
  gap: 6px;
  margin: 0;
}

.likes-panel .field input.bg-layer.border-layer-line {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 253, 0.96)),
    #fbfcfd;
  color: #18191c;
  font-size: 13px;
  line-height: 18px;
  box-shadow: none;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.likes-panel .field input.bg-layer.border-layer-line::placeholder {
  color: #8a929b;
}

.likes-panel .field input.bg-layer.border-layer-line:hover {
  border-color: #cbd8e3;
  background: #ffffff;
}

.likes-panel .field input.bg-layer.border-layer-line:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: none;
}

.likes-panel .field input.bg-layer.border-layer-line:disabled {
  pointer-events: none;
  opacity: 0.5;
}

@media (min-width: 640px) {
  .likes-panel .field input.bg-layer.border-layer-line.sm\:py-3 {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

.like-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}

.like-actions .secondary-btn,
.like-actions .danger-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 6px 14px rgba(15, 23, 42, 0.06);
}

.like-actions .secondary-btn {
  min-width: 96px;
  border-color: #9ee5ff;
  color: #0077b6;
  background:
    linear-gradient(180deg, #f7fdff, #eaf8ff),
    #eefaff;
}

.like-actions .danger-btn {
  min-width: 84px;
  border-color: #ffc3d1;
  color: #d8214b;
  background:
    linear-gradient(180deg, #fff8fa, #fff0f4),
    #fff4f7;
}

.like-actions .secondary-btn:hover,
.like-actions .danger-btn:hover {
  transform: translateY(-1px);
}

.like-actions .secondary-btn:hover {
  border-color: #6ed7ff;
  color: #006b9f;
  background: #e9f9ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(0, 174, 236, 0.16);
}

.like-actions .danger-btn:hover {
  border-color: #ff9db4;
  color: #bf123d;
  background: #fff0f5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(216, 33, 75, 0.14);
}

.like-actions .secondary-btn:focus-visible,
.like-actions .danger-btn:focus-visible {
  outline: none;
}

.like-actions .secondary-btn:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(0, 174, 236, 0.22);
}

.like-actions .danger-btn:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(216, 33, 75, 0.18);
}

@media (max-width: 980px) {
  .like-card,
  .like-fields {
    grid-template-columns: 1fr;
  }

  .like-actions {
    justify-content: flex-start;
  }
}

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

.script-workbench {
  display: grid;
  gap: 10px;
}

.script-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid #e6edf4;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(24, 25, 28, 0.04);
}

.script-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  color: #006b91;
  background: #eefaff;
  font-size: 11px;
  font-weight: 900;
}

.script-hero h2 {
  margin: 6px 0 2px;
  color: #18191c;
  font-size: 24px;
  line-height: 1.18;
}

.script-hero p,
.script-muted {
  margin: 0;
  color: #6b7280;
  line-height: 1.45;
}

.script-hero-actions,
.script-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.script-workbench .primary-btn,
.script-workbench .secondary-btn,
.script-workbench .plain-btn {
  min-height: 36px;
  border-radius: 8px;
  padding: 8px 13px;
  box-shadow: none;
  font-size: 13px;
}

.script-workbench .primary-btn {
  background: #fb5d7a;
  box-shadow: 0 8px 18px rgba(251, 93, 122, 0.16);
}

.script-workbench .secondary-btn {
  color: #0078a8;
  border-color: #bdeaff;
  background: #eefaff;
}

.script-workbench .plain-btn {
  color: #4b5563;
  border-color: #dde3ea;
  background: #ffffff;
}

.script-status,
.script-error,
.script-warning {
  display: grid;
  gap: 6px;
}

.script-error {
  color: #a50f2e;
  border-color: #ffc2cd;
  background: #fff0f4;
}

.script-warning {
  margin: 16px 0;
  color: #805000;
  border-color: #ffe0a6;
  background: #fff8e8;
}

.script-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid #e6edf4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.script-steps span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  color: #6b7280;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.script-steps strong {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #9499a0;
  background: #eef0f2;
  font-size: 11px;
}

.script-steps span.done {
  color: #007a55;
  border-color: #b9ead8;
  background: #effbf6;
}

.script-steps span.done strong {
  color: #ffffff;
  background: #0f9f6e;
}

.script-workbench-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 12px;
  align-items: start;
}

.script-workbench-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.script-history-rail {
  position: sticky;
  top: 86px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  max-height: calc(100vh - 110px);
  padding: 16px;
  border: 1px solid #e8edf2;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(24, 25, 28, 0.04);
}

.script-history-head {
  margin: 0;
  align-items: flex-start;
}

.script-history-head h2 {
  font-size: 20px;
}

.script-history-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.script-history-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e7eef5;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.script-history-item.is-latest {
  border-color: #bdeaff;
  box-shadow: 0 8px 18px rgba(0, 138, 197, 0.08);
}

.script-history-top,
.script-history-foot,
.script-history-meta div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.script-history-top {
  justify-content: space-between;
}

.script-history-top strong {
  min-width: 0;
  overflow: hidden;
  color: #18191c;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-history-top span,
.script-history-meta dt,
.script-history-foot span {
  color: #8a929c;
  font-size: 12px;
  font-weight: 800;
}

.script-history-meta {
  display: grid;
  gap: 5px;
  margin: 0;
}

.script-history-meta dt {
  flex: 0 0 auto;
}

.script-history-meta dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-history-snippet {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.script-history-foot {
  justify-content: space-between;
  flex-wrap: wrap;
}

.script-history-foot em {
  border-radius: 999px;
  padding: 3px 7px;
  color: #0f7d5c;
  background: #effbf6;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.script-history-empty {
  min-height: 220px;
  align-content: center;
}

.script-history-empty strong {
  display: block;
  margin-bottom: 6px;
  color: #18191c;
}

.script-history-empty span {
  color: #7a8490;
  line-height: 1.6;
}

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

.script-grid-wide {
  align-items: start;
}

.script-card,
.script-output-card,
.script-report-card {
  padding: 18px;
  border: 1px solid #e8edf2;
  background: #ffffff;
}

.script-card .panel-title,
.script-output-card .panel-title,
.script-report-card .panel-title {
  margin-bottom: 12px;
}

.script-card .panel-title h2,
.script-output-card .panel-title h2,
.script-report-card .panel-title h2 {
  font-size: 21px;
}

.script-upload-form,
.script-bv-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.script-bv-form {
  align-items: end;
}

.script-bv-form .field {
  margin: 0;
}

.script-upload-form input[type="file"] {
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px dashed #c8d2dd;
  border-radius: 8px;
  background: #ffffff;
}

.script-upload-form input[type="file"]::file-selector-button {
  margin-right: 9px;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  color: #2f3338;
  background: #eef2f6;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.script-card textarea,
.script-output-card textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.65;
}

.script-empty {
  min-height: 86px;
  padding: 22px;
}

.script-product-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: #3f444a;
}

.script-product-head span {
  color: #008ac5;
  font-weight: 900;
}

.script-table-wrap {
  overflow: auto;
  border: 1px solid #eef0f2;
  border-radius: 8px;
}

.script-product-preview-wrap {
  max-height: 360px;
}

.script-product-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #ffffff;
}

.script-product-table th,
.script-product-table td {
  padding: 10px;
  border-bottom: 1px solid #eef0f2;
  color: #3f444a;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}

.script-product-table th {
  color: #18191c;
  background: #fbfcfd;
  font-size: 12px;
}

.script-product-table tr.is-main td {
  background: #effbf6;
}

.script-product-full-table {
  min-width: max(100%, 980px);
}

.script-product-full-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.script-product-full-table th:first-child,
.script-product-full-table td:first-child {
  position: sticky;
  left: 0;
  min-width: 150px;
  z-index: 1;
  background: #ffffff;
}

.script-product-full-table th:first-child {
  z-index: 3;
  background: #fbfcfd;
}

.script-product-full-table tr.is-main td:first-child {
  background: #effbf6;
}

.script-product-full-table td {
  min-width: 110px;
  max-width: 240px;
  word-break: break-word;
}

.script-model-chip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #e3edf5;
  border-radius: 8px;
  background: #fbfcfd;
}

.script-model-chip strong {
  color: #18191c;
  font-size: 14px;
}

.script-model-chip span {
  color: #7a8490;
  font-size: 13px;
  font-weight: 700;
}

.script-outline-list {
  display: grid;
  gap: 12px;
}

.script-outline-list.compact {
  max-height: 440px;
  overflow: auto;
  padding-right: 4px;
}

.script-outline-item {
  padding: 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.script-outline-item span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #006b91;
  font-size: 12px;
  font-weight: 900;
}

.script-outline-item h3,
.script-subtitle {
  margin: 0 0 8px;
  color: #18191c;
  font-size: 16px;
}

.script-outline-item p {
  margin: 0;
  color: #6b7280;
  line-height: 1.65;
}

.script-outline-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 10px;
}

.script-outline-badges em {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef7ff;
  color: #006b91;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.script-outline-meta {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}

.script-outline-meta div {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f5f9fc;
}

.script-outline-meta strong {
  color: #1f2937;
  font-size: 12px;
}

.script-outline-meta p {
  font-size: 13px;
}

.script-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.script-tags em,
.script-title-list span {
  border-radius: 999px;
  font-style: normal;
  font-weight: 800;
}

.script-tags em {
  padding: 5px 8px;
  color: #6d4b00;
  background: #fff4d8;
  font-size: 12px;
}

.script-title-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.script-extraction-card {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.script-extraction-card div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e3edf5;
  border-radius: 8px;
  background: #f8fbff;
}

.script-extraction-card strong {
  display: block;
  color: #18191c;
  font-size: 13px;
}

.script-extraction-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.script-extraction-card em,
.script-extraction-card span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef6ff;
  color: #24527a;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.script-title-list span {
  padding: 8px 12px;
  color: #a50f2e;
  background: #fff0f4;
}

.script-evidence-list {
  display: grid;
  gap: 10px;
  max-height: 440px;
  overflow: auto;
}

.script-evidence-list div {
  padding: 12px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.script-evidence-list strong {
  color: #18191c;
}

.script-evidence-list p {
  margin: 6px 0 0;
  color: #6b7280;
  line-height: 1.55;
}

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

.script-score {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.script-score span {
  color: #6b7280;
  font-weight: 900;
}

.script-score strong {
  color: #18191c;
  font-size: 38px;
  line-height: 1;
}

.script-score em {
  font-style: normal;
  font-weight: 900;
}

.script-score.good {
  border-color: #b9ead8;
  background: #effbf6;
}

.script-score.good em {
  color: #0f7d5c;
}

.script-score.warn,
.script-score.loose {
  border-color: #ffe0a6;
  background: #fff8e8;
}

.script-score.warn em,
.script-score.loose em {
  color: #a36400;
}

.script-score.danger {
  border-color: #ffc2cd;
  background: #fff0f4;
}

.script-score.danger em {
  color: #a50f2e;
}

.script-report-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.script-report-list p {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  color: #3f444a;
  background: #fbfcfd;
  line-height: 1.6;
}

.script-ai-summary {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid #cfefff;
  border-radius: 8px;
  color: #146a90;
  background: #f3fbff;
  font-weight: 900;
  line-height: 1.6;
}

.script-comparison-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.script-comparison-list h3 {
  margin: 0;
  color: #18191c;
  font-size: 15px;
}

.script-comparison-list article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.script-comparison-list strong {
  color: #17314f;
}

.script-comparison-list dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.script-comparison-list div {
  padding: 10px;
  border-radius: 7px;
  background: #fbfcfd;
}

.script-comparison-list dt {
  margin: 0 0 5px;
  color: #8a929b;
  font-size: 12px;
  font-weight: 900;
}

.script-comparison-list dd {
  margin: 0;
  color: #3f444a;
  line-height: 1.55;
}

.system-config-page {
  display: grid;
  gap: 20px;
}

.system-config-hero,
.system-config-form {
  padding: 26px;
  background: #ffffff;
}

.system-config-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 28px;
  min-height: 170px;
  border-color: rgba(0, 138, 197, 0.14);
}

.system-config-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(232, 248, 255, 0.9), rgba(255, 255, 255, 0.42)),
    radial-gradient(circle at 92% 16%, rgba(251, 93, 122, 0.18), transparent 28%);
  pointer-events: none;
}

.system-config-copy,
.system-config-hero-panel {
  position: relative;
  z-index: 1;
}

.system-config-hero h2 {
  margin: 12px 0 10px;
  color: #18191c;
  font-size: 34px;
  line-height: 1.1;
}

.system-config-hero p {
  margin: 0;
  color: #6b7280;
  line-height: 1.65;
}

.system-config-hero-panel {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(0, 138, 197, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 36px rgba(0, 92, 130, 0.08);
}

.system-config-hero-panel span {
  color: #006b91;
  font-size: 12px;
  font-weight: 900;
}

.system-config-hero-panel strong {
  color: #18191c;
  font-size: 42px;
  line-height: 1;
}

.system-config-hero-panel strong small {
  color: #9499a0;
  font-size: 20px;
}

.system-config-hero-panel p {
  color: #3f444a;
  font-size: 13px;
}

.system-config-hero-panel .secondary-btn {
  width: 100%;
  margin-top: 4px;
}

.system-config-form {
  display: grid;
  gap: 18px;
}

.system-config-form-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}

.system-config-form-head h2 {
  margin: 0 0 5px;
  color: #18191c;
  font-size: 24px;
}

.system-config-form-head p {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.system-config-form-head > span {
  max-width: 420px;
  padding: 8px 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  color: #6b7280;
  background: #fbfcfd;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-config-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.config-status-badge {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.config-status-badge i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #6b7280;
  background: #eef0f2;
  font-style: normal;
  font-weight: 900;
}

.config-status-badge span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
}

.config-status-badge strong {
  color: #a50f2e;
  font-size: 18px;
}

.config-status-badge small {
  display: block;
  min-height: 18px;
  color: #9499a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-status-badge.ready {
  border-color: #b9ead8;
  background: #effbf6;
}

.config-status-badge.ready i {
  color: #ffffff;
  background: #0f9f6e;
}

.config-status-badge.ready strong {
  color: #0f7d5c;
}

.system-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.system-config-section {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fbfcfd);
  box-shadow: 0 10px 24px rgba(24, 25, 28, 0.04);
}

.system-section-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-bottom: 2px;
}

.system-section-head > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #006b91;
  background: #e8f8ff;
  font-size: 13px;
  font-weight: 900;
}

.system-config-section h3 {
  margin: 0 0 4px;
  color: #18191c;
  font-size: 17px;
}

.system-section-head p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.system-config-section .field {
  margin: 0;
}

.system-config-section textarea {
  resize: vertical;
  min-height: 110px;
}

.config-clear-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
}

.config-inline-status {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  color: #6b7280;
  background: #fbfcfd;
  font-size: 12px;
  line-height: 1.5;
}

.config-inline-status.ok {
  color: #0f7d5c;
  border-color: #b9ead8;
  background: #effbf6;
}

.config-inline-status.warn {
  color: #a50f2e;
  border-color: #ffc2cd;
  background: #fff6f8;
}

.config-default-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  color: #7b8494;
  font-size: 12px;
  line-height: 1.55;
}

.system-section-foot {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.config-path-note {
  margin: 0;
  padding: 12px;
  border: 1px solid #f4d2da;
  border-radius: 8px;
  color: #7a3042;
  background: #fff6f8;
  font-size: 13px;
  line-height: 1.55;
}

.system-config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

/* 内部工具帮助中心与 SOP */
.help-center {
  --help-ink: #20242b;
  --help-muted: #6f7784;
  --help-line: #e4e8ed;
  --help-pink: #ed4264;
  --help-blue: #168eb8;
  --help-green: #118363;
  display: grid;
  gap: 18px;
  color: var(--help-ink);
  scroll-behavior: smooth;
}

/* 内部帮助入口：宽屏悬浮在导航框右侧，窄屏固定到右下角。 */
.internal-help-fab {
  position: fixed;
  top: 22px;
  left: calc(50% + 734px);
  z-index: 46;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 116px;
  min-height: 46px;
  padding: 6px 13px 6px 7px;
  border: 1px solid rgba(226, 229, 234, 0.94);
  border-radius: 999px;
  color: #59616d;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(35, 42, 52, 0.14);
  backdrop-filter: blur(18px);
  transform: none;
  transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.internal-help-fab:hover,
.internal-help-fab.active {
  color: #d73759;
  border-color: rgba(251, 93, 122, 0.42);
  box-shadow: 0 15px 34px rgba(237, 66, 100, 0.2);
  transform: translateY(-1px);
}

.internal-help-fab-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #fb7299, #f04468 62%, #21a8d8);
  box-shadow: 0 7px 16px rgba(237, 66, 100, 0.24);
}

.internal-help-fab-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.internal-help-fab strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 1759px) {
  .internal-help-fab {
    top: auto;
    right: 22px;
    bottom: 22px;
    left: auto;
    transform: none;
  }

}

@media (max-width: 720px) {
  .internal-help-fab {
    right: 14px;
    bottom: 16px;
    min-width: 0;
    width: 48px;
    min-height: 48px;
    padding: 7px;
  }

  .internal-help-fab-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .internal-help-fab strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.help-center-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
  min-height: 250px;
  padding: 38px 42px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 15%, rgba(22, 142, 184, 0.12), transparent 28%),
    radial-gradient(circle at 66% 110%, rgba(237, 66, 100, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

.help-center-hero-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.help-center-hero h1 {
  margin: 12px 0 14px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.help-center-hero h1 em {
  color: #fb5d7a;
  font-style: normal;
}

.help-center-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--help-muted);
  font-size: 14px;
  line-height: 1.75;
}

.help-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 19px;
}

.help-role-chips span {
  padding: 6px 9px;
  border: 1px solid rgba(225, 229, 235, 0.92);
  border-radius: 999px;
  color: #606976;
  background: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 800;
}

.help-hero-flow {
  align-self: center;
  display: grid;
  flex: 0 0 300px;
  gap: 4px;
  padding: 23px;
  border-radius: 20px;
  color: white;
  background: #242830;
  box-shadow: 0 20px 42px rgba(32, 36, 43, 0.18);
}

.help-hero-flow > small {
  color: #aeb5c0;
  font-size: 10px;
}

.help-hero-flow > strong {
  margin: 2px 0 10px;
  font-size: 18px;
}

.help-hero-flow ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: help-flow;
}

.help-hero-flow li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #eef0f3;
  font-size: 11px;
}

.help-hero-flow li::before {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #ffb1c6;
  background: rgba(251, 114, 153, 0.18);
  counter-increment: help-flow;
  content: counter(help-flow);
  font-size: 9px;
  font-weight: 900;
}

.help-hero-flow > em {
  justify-self: start;
  margin-top: 10px;
  padding: 5px 8px;
  border-radius: 7px;
  color: #ffb1c6;
  background: rgba(251, 114, 153, 0.12);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
}

.help-center-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.help-center-sidebar {
  position: sticky;
  top: 92px;
  padding: 15px;
  border-radius: 17px;
}

.help-center-sidebar-head {
  display: grid;
  gap: 2px;
  padding: 2px 4px 11px;
  border-bottom: 1px solid var(--help-line);
}

.help-center-sidebar-head span {
  font-size: 14px;
  font-weight: 900;
}

.help-center-sidebar-head small {
  color: var(--help-muted);
  font-size: 10.5px;
}

.help-center-sidebar nav {
  display: grid;
  gap: 5px;
  padding: 9px 0;
}

.help-center-sidebar nav button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--help-ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.help-center-sidebar nav button:hover {
  border-color: #f1d6dc;
  background: #fff6f8;
  transform: translateX(2px);
}

.help-center-sidebar nav button:focus-visible {
  border-color: #fb5d7a;
  outline: 3px solid rgba(251, 93, 122, 0.16);
}

.help-center-sidebar nav button i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #d43756;
  background: #ffedf1;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.help-center-sidebar nav button span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.help-center-sidebar nav button strong {
  font-size: 12px;
}

.help-center-sidebar nav button small {
  color: var(--help-muted);
  font-size: 9.5px;
}

.help-center-sidebar-note {
  padding: 11px;
  border: 1px solid #f0ddaa;
  border-radius: 11px;
  background: #fffaec;
}

.help-center-sidebar-note strong {
  color: #8b6100;
  font-size: 11px;
}

.help-center-sidebar-note p {
  margin: 4px 0 0;
  color: #7a6a45;
  font-size: 10.5px;
  line-height: 1.55;
}

.help-print-btn {
  width: 100%;
  margin-top: 9px;
  min-height: 34px;
  font-size: 10.5px;
}

.help-center-main {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.help-center-main > section {
  scroll-margin-top: 94px;
}

.help-start-card,
.help-sop-card,
.help-troubleshooting-card {
  padding: 24px;
  border-radius: 18px;
}

.help-section-title,
.help-sop-head,
.help-sop-head > div,
.help-prepare,
.help-admin-note {
  display: flex;
  align-items: center;
}

.help-section-title,
.help-sop-head {
  justify-content: space-between;
  gap: 18px;
}

.help-section-title > div {
  display: grid;
  gap: 3px;
}

.help-section-title > div > span {
  color: var(--help-pink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.help-section-title h2,
.help-sop-head h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
}

.help-section-title > p,
.help-sop-head p {
  margin: 0;
  color: var(--help-muted);
  font-size: 12px;
  line-height: 1.55;
}

.help-principle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.help-principle-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid #e6eaf0;
  border-radius: 13px;
  background: #fbfcfd;
}

.help-principle-grid article > i,
.help-sop-step > i,
.help-troubleshooting-steps li > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #d43756;
  background: #ffedf1;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.help-principle-grid strong {
  font-size: 12px;
}

.help-principle-grid p {
  margin: 3px 0 0;
  color: var(--help-muted);
  font-size: 11px;
  line-height: 1.62;
}

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

.help-choice-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e4e8ed;
  border-radius: 16px;
  background: #fbfcfd;
}

.help-choice-card > span {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 7px;
  color: #c93150;
  background: #ffedf1;
  font-size: 10px;
  font-weight: 900;
}

.help-choice-extraction > span {
  color: #137697;
  background: #eaf7fb;
}

.help-choice-card h3 {
  margin: 13px 0 5px;
  font-size: 17px;
}

.help-choice-card > p {
  min-height: 44px;
  margin: 0;
  color: var(--help-muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.help-choice-card > em {
  display: block;
  margin-top: 12px;
  color: #8a5e00;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.help-io-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
  margin-top: 15px;
}

.help-io-grid > div {
  padding: 10px;
  border-radius: 10px;
  background: white;
  box-shadow: inset 0 0 0 1px #e6e9ed;
}

.help-io-grid small,
.help-io-grid strong {
  display: block;
}

.help-io-grid small {
  margin-bottom: 3px;
  color: #9299a3;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.help-io-grid strong {
  font-size: 10px;
  line-height: 1.45;
}

.help-io-grid > i {
  align-self: center;
  color: #a0a7b0;
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.help-choice-actions,
.help-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.help-choice-actions {
  margin-top: 13px;
}

.help-choice-actions button,
.help-head-actions button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 10.5px;
}

.help-sop-card {
  --help-card-accent: var(--help-pink);
  border-top: 4px solid var(--help-card-accent);
}

.help-sop-comparison {
  --help-card-accent: #7e66c9;
}

.help-sop-content {
  --help-card-accent: var(--help-blue);
}

.help-sop-head > div {
  min-width: 0;
  gap: 12px;
}

.help-sop-index {
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  color: white;
  background: var(--help-card-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--help-card-accent) 24%, transparent);
  font-size: 12px;
  font-weight: 900;
}

.help-sop-head p {
  margin-top: 4px;
}

.help-sop-head .primary-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 14px;
  font-size: 12px;
}

.help-tool-tabs {
  display: flex;
  gap: 7px;
  margin-top: 18px;
  padding: 6px;
  border: 1px solid #e5e8ec;
  border-radius: 13px;
  background: #f7f8fa;
}

.help-tool-tabs > button {
  flex: 1 1 0;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #6b7380;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
}

.help-tool-tabs > button small {
  margin-left: 4px;
  color: #949ba4;
  font-size: 9.5px;
}

.help-tool-tabs > button.active {
  border-color: #f3ccd5;
  color: #c93150;
  background: white;
  box-shadow: 0 5px 14px rgba(40, 46, 54, 0.07);
}

.help-tool-tabs-blue > button.active {
  border-color: #c2dfeb;
  color: #127796;
}

.help-tool-panel[hidden] {
  display: none;
}

.help-flow-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 11px 0 6px;
}

.help-flow-strip span {
  position: relative;
  padding: 9px 7px;
  border-radius: 9px;
  color: #626b77;
  background: #f5f7f9;
  font-size: 9.5px;
  font-weight: 900;
  text-align: center;
}

.help-flow-strip span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -8px;
  z-index: 1;
  transform: translateY(-50%);
  color: #a8aeb6;
  content: "→";
}

.help-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 10px 0 4px;
}

.help-mode-grid article {
  padding: 12px;
  border: 1px solid #c9e2ec;
  border-radius: 11px;
  background: #eef8fb;
}

.help-mode-grid strong,
.help-mode-grid span {
  display: block;
}

.help-mode-grid strong {
  margin-bottom: 3px;
  color: #126f8e;
  font-size: 11px;
}

.help-mode-grid span {
  color: #5d7580;
  font-size: 9.5px;
  line-height: 1.5;
}

.help-prepare {
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 4px;
  padding: 10px 12px;
  border: 1px solid #e4e9ee;
  border-radius: 12px;
  background: #f8fafb;
}

.help-prepare strong {
  margin-right: 3px;
  font-size: 11px;
}

.help-prepare span {
  padding: 5px 8px;
  border-radius: 7px;
  color: #5e6672;
  background: white;
  box-shadow: inset 0 0 0 1px #e5e8ec;
  font-size: 10px;
  font-weight: 800;
}

.help-sop-steps {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.help-sop-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px dashed #dfe4ea;
}

.help-sop-step:last-child {
  border-bottom: 0;
}

.help-sop-step > i {
  position: relative;
  z-index: 1;
  color: white;
  background: var(--help-card-accent);
}

.help-sop-step > div {
  min-width: 0;
}

.help-sop-step h3 {
  margin: 0 0 5px;
  font-size: 14px;
}

.help-sop-step p {
  margin: 0;
  color: #555e6b;
  font-size: 12px;
  line-height: 1.75;
}

.help-sop-step em {
  display: block;
  margin-top: 7px;
  padding: 7px 9px;
  border-left: 3px solid color-mix(in srgb, var(--help-card-accent) 56%, white);
  border-radius: 0 7px 7px 0;
  color: #68717d;
  background: color-mix(in srgb, var(--help-card-accent) 5%, white);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.55;
}

.help-sop-bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  margin-top: 10px;
}

.help-completion,
.help-faq {
  min-width: 0;
  padding: 15px;
  border-radius: 13px;
}

.help-completion {
  border: 1px solid #bfe4d7;
  background: #f0faf6;
}

.help-faq {
  border: 1px solid #e4e8ed;
  background: #fbfcfd;
}

.help-completion h3,
.help-faq h3 {
  margin: 0 0 10px;
  font-size: 12px;
}

.help-completion h3 {
  color: #087356;
}

.help-completion ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-completion li {
  position: relative;
  padding-left: 19px;
  color: #52625c;
  font-size: 10.5px;
  line-height: 1.5;
}

.help-completion li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--help-green);
  font-size: 12px;
  font-weight: 900;
}

.help-faq details {
  border-top: 1px solid #e6e9ed;
}

.help-faq details:first-of-type {
  border-top: 0;
}

.help-faq summary {
  position: relative;
  padding: 9px 22px 9px 0;
  color: #3d444e;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 900;
  list-style: none;
}

.help-faq summary::-webkit-details-marker {
  display: none;
}

.help-faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 7px;
  color: #949ba4;
  font-size: 16px;
  line-height: 1;
}

.help-faq details[open] summary::after {
  content: "−";
}

.help-faq details p {
  margin: -1px 0 9px;
  color: var(--help-muted);
  font-size: 10.5px;
  line-height: 1.65;
}

.help-troubleshooting-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0 12px;
  padding: 0;
  list-style: none;
}

.help-troubleshooting-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e5e9ee;
  border-radius: 12px;
  background: #fbfcfd;
}

.help-troubleshooting-steps li > div {
  display: grid;
  gap: 3px;
}

.help-troubleshooting-steps strong {
  font-size: 11px;
}

.help-troubleshooting-steps span,
.help-admin-note span {
  color: var(--help-muted);
  font-size: 10.5px;
  line-height: 1.55;
}

.help-admin-note {
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #efd9df;
  border-radius: 11px;
  background: #fff7f9;
}

.help-admin-note strong {
  flex: 0 0 auto;
  color: #b5314b;
  font-size: 10.5px;
}

.help-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
  padding: 14px;
  border-radius: 14px;
  color: white;
  background: #242830;
}

.help-report-grid > div {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.help-report-grid strong,
.help-report-grid span {
  display: block;
}

.help-report-grid strong {
  margin-bottom: 3px;
  color: #ffb1c6;
  font-size: 9.5px;
}

.help-report-grid span {
  color: #eef0f3;
  font-size: 9.5px;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .help-hero-flow {
    flex-basis: 290px;
  }

  .help-center-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .help-sop-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .help-center-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .help-hero-flow {
    flex-basis: auto;
    width: min(100%, 420px);
  }

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

  .help-center-sidebar {
    position: static;
  }

  .help-center-sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .help-center-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-center-hero,
  .help-start-card,
  .help-sop-card,
  .help-troubleshooting-card {
    padding: 18px;
    border-radius: 16px;
  }

  .help-center-hero h1 {
    font-size: 40px;
  }

  .help-section-title,
  .help-sop-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .help-sop-head .primary-btn {
    width: 100%;
  }

  .help-principle-grid,
  .help-troubleshooting-steps,
  .help-choice-grid,
  .help-mode-grid,
  .help-report-grid {
    grid-template-columns: 1fr;
  }

  .help-choice-card > p {
    min-height: 0;
  }

  .help-head-actions,
  .help-head-actions button {
    width: 100%;
  }

  .help-tool-tabs {
    overflow-x: auto;
  }

  .help-tool-tabs > button {
    flex: 0 0 auto;
    min-width: 160px;
  }

  .help-flow-strip {
    grid-template-columns: 1fr;
  }

  .help-flow-strip span:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -9px;
    transform: translateX(50%) rotate(90deg);
  }

  .help-section-title > p {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .help-sop-head > div {
    align-items: flex-start;
  }

  .help-sop-step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
  }
}

/* 爆款二创 */
.remix-workbench { --remix-accent: #7657ff; --remix-soft: #f4f1ff; }
.remix-hero { background: linear-gradient(135deg, #fff 0%, #f8f5ff 58%, #eef8ff 100%); }
.remix-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 16px; margin-top: 16px; }
.remix-input-card form { display: grid; gap: 14px; }
.remix-input-card label { display: grid; gap: 7px; color: #2b3441; font-weight: 700; }
.remix-input-card input,
.remix-input-card select,
.remix-draft textarea { width: 100%; border: 1px solid #dfe4ec; border-radius: 12px; background: #fff; color: #1f2937; font: inherit; }
.remix-input-card input,
.remix-input-card select { min-height: 46px; padding: 0 13px; }
.remix-config-warning { margin: 12px 0 0; color: #aa5c00; font-size: 12px; }
.remix-voice-card > p { color: #4d5867; line-height: 1.75; }
.remix-voice-card > small { display: block; margin-top: 13px; color: #7b8490; line-height: 1.65; }
.remix-traits { display: flex; flex-wrap: wrap; gap: 7px; }
.remix-traits span { padding: 6px 9px; border-radius: 999px; background: var(--remix-soft); color: #5b43ca; font-size: 12px; }
.remix-progress { margin-top: 16px; }
.remix-progress > div { display: flex; justify-content: space-between; gap: 14px; }
.remix-progress progress { width: 100%; height: 9px; margin: 12px 0 7px; accent-color: var(--remix-accent); }
.remix-progress small { color: #7b8490; }
.remix-source { display: grid; gap: 5px; margin-top: 16px; }
.remix-source > span { color: var(--remix-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.remix-source > p { margin: 0; color: #596372; }
.remix-source > small { color: #89919c; }
.remix-ideas { margin-top: 16px; }
.remix-idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.remix-idea-grid article { display: flex; flex-direction: column; min-height: 255px; padding: 17px; border: 1px solid #e1e5ec; border-radius: 16px; background: #fff; }
.remix-idea-grid article.active { border-color: #9986ff; box-shadow: 0 12px 32px rgba(95, 72, 214, .12); }
.remix-idea-grid article > span { align-self: flex-start; padding: 4px 8px; border-radius: 999px; background: var(--remix-soft); color: #624ad0; font-size: 11px; font-weight: 800; }
.remix-idea-grid h3 { margin: 12px 0 8px; font-size: 17px; line-height: 1.45; }
.remix-idea-grid p { margin: 0; color: #515c6a; line-height: 1.7; }
.remix-idea-grid small { display: block; margin: 10px 0 16px; color: #8a929c; line-height: 1.55; }
.remix-idea-grid button { margin-top: auto; }
.remix-originality { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 16px; border-left: 4px solid #27a66e; }
.remix-originality.is-review { border-left-color: #e59b2e; }
.remix-originality.is-blocked { border-left-color: #d84f66; }
.remix-originality > div { min-width: 0; }
.remix-originality > div > span { color: #79828e; font-size: 12px; }
.remix-originality > div > strong { display: block; margin: 3px 0; font-size: 20px; }
.remix-originality > div > p { margin: 0; color: #6b7480; }
.remix-originality dl { display: flex; gap: 22px; margin: 0; }
.remix-originality dl div { text-align: right; }
.remix-originality dt { color: #87909a; font-size: 11px; }
.remix-originality dd { margin: 3px 0 0; font-size: 18px; font-weight: 800; }
.remix-draft { margin-top: 16px; }
.remix-draft .sp-card-head > div:last-child { display: flex; gap: 8px; }
.remix-draft textarea { min-height: 520px; margin-top: 14px; padding: 18px; line-height: 1.9; resize: vertical; }
.remix-draft-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.remix-draft-footer span { color: #7a8390; font-size: 12px; }
.remix-placeholders { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 13px; border-radius: 12px; background: #fff7e9; }
.remix-placeholders strong { width: 100%; color: #8b5b11; }
.remix-placeholders span { padding: 5px 8px; border-radius: 8px; background: #fff; color: #8b5b11; font-size: 12px; }

@media (max-width: 980px) {
  .remix-grid { grid-template-columns: 1fr; }
  .remix-idea-grid { grid-template-columns: 1fr; }
  .remix-idea-grid article { min-height: 0; }
  .remix-originality { align-items: flex-start; flex-direction: column; }
  .remix-originality dl { width: 100%; justify-content: space-between; }
  .remix-originality dl div { text-align: left; }
}

@media (max-width: 600px) {
  .remix-originality dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .remix-draft .sp-card-head { align-items: flex-start; flex-direction: column; }
  .remix-draft .sp-card-head > div:last-child { width: 100%; }
  .remix-draft .sp-card-head button { flex: 1; }
  .remix-draft textarea { min-height: 420px; }
}

@media (max-width: 340px) {
  .help-center-sidebar nav,
  .help-role-chips {
    grid-template-columns: 1fr;
  }
}

@media print {
  .internal-help-fab,
  .topbar,
  .help-center-sidebar,
  .help-choice-actions,
  .help-head-actions,
  .help-tool-tabs {
    display: none !important;
  }

  .help-center-layout {
    display: block;
  }

  .help-center-hero,
  .help-start-card,
  .help-sop-card,
  .help-troubleshooting-card {
    box-shadow: none !important;
  }

  .help-tool-panel[hidden] {
    display: block;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed #cfd4da;
  }

  .help-sop-step,
  .help-completion,
  .help-faq details,
  .help-report-grid {
    break-inside: avoid;
  }
}

.content-workbench {
  display: grid;
  gap: 20px;
}

.content-grid,
.content-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.content-card {
  padding: 24px;
}

.content-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 14px;
  align-items: end;
}

.content-search-form .field {
  margin: 0;
}

.content-cookie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.content-cookie span {
  color: #6b7280;
  font-size: 13px;
  font-weight: 900;
}

.content-cookie strong {
  min-width: 0;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-cookie.ready {
  border-color: #b9ead8;
  background: #effbf6;
}

.content-cookie.ready span,
.content-cookie.ready strong {
  color: #0f7d5c;
}

.content-cookie.checking {
  border-color: #bdeaff;
  background: #f3fbff;
}

.content-cookie.checking span,
.content-cookie.checking strong {
  color: #0078a8;
}

.content-cookie.warn {
  border-color: #f6d08b;
  background: #fff8e9;
}

.content-cookie.warn span,
.content-cookie.warn strong {
  color: #9a5a00;
}

.content-video-summary {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.content-cover {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #f1f5f8;
}

.content-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-cover .image-fallback {
  width: 100%;
  height: 100%;
  color: #8a929b;
  background: #f1f5f8;
  font-weight: 900;
}

.content-video-summary h3 {
  margin: 0 0 6px;
  color: #18191c;
  font-size: 18px;
  line-height: 1.35;
}

.content-video-summary p {
  margin: 0;
  color: #6b7280;
}

.content-video-stats,
.content-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.content-video-stats span,
.content-mini-stats span {
  padding: 8px 10px;
  border: 1px solid #f0d8dd;
  border-radius: 8px;
  color: #7a3042;
  background: #fff8fa;
  font-size: 12px;
  font-weight: 800;
}

.content-mini-stats span strong {
  margin-right: 4px;
  color: var(--red-dark);
  font-size: 18px;
}

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

.content-table-wrap {
  max-height: 360px;
  overflow: auto;
}

.content-table td {
  max-width: 280px;
  vertical-align: top;
  white-space: normal;
}

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

.content-history-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e7edf3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.content-history-type {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 36px;
  min-height: 36px;
  border-radius: 10px;
  color: #006b91;
  background: transparent;
  perspective: 700px;
  overflow: visible;
}

.content-history-image-badge {
  --history-folder: #fb5d7a;
  --history-folder-dark: #e94f7a;
  --history-folder-light: #ffd0dc;
  --history-paper: #fff7fa;
}

.content-history-image-badge.is-danmaku {
  --history-folder: #06b6d4;
  --history-folder-dark: #0284c7;
  --history-folder-light: #bdefff;
  --history-paper: #eefaff;
}

.content-history-badge-folder {
  position: relative;
  display: block;
  width: 34px;
  height: 26px;
  transform-style: preserve-3d;
}

.content-history-badge-back {
  position: absolute;
  inset: 6px 1px 1px;
  z-index: 1;
  border-radius: 0 5px 5px 5px;
  background: linear-gradient(180deg, var(--history-folder), var(--history-folder-dark));
  box-shadow: 0 8px 13px color-mix(in srgb, var(--history-folder) 26%, transparent);
}

.content-history-badge-back::before {
  content: "";
  position: absolute;
  left: 1px;
  bottom: calc(100% - 1px);
  width: 13px;
  height: 6px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--history-folder-light), var(--history-folder));
}

.content-history-badge-card {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 3;
  display: block;
  width: 22px;
  height: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 3px;
  background: var(--history-paper);
  box-shadow: 0 3px 7px rgba(15, 23, 42, 0.12);
  transform: translate(-50%, 0) rotate(var(--closed-rotate, 0deg));
  transform-origin: bottom center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.content-history-badge-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-history-badge-card i,
.content-history-badge-card b {
  position: absolute;
  left: 4px;
  right: 4px;
  display: block;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--history-folder) 34%, #ffffff);
}

.content-history-badge-card i {
  top: 5px;
}

.content-history-badge-card b {
  top: 9px;
  right: 8px;
}

.content-history-badge-card-1 {
  --closed-rotate: -3deg;
  z-index: 3;
}

.content-history-badge-card-2 {
  --closed-rotate: 0deg;
  top: 3px;
  z-index: 4;
}

.content-history-badge-card-3 {
  --closed-rotate: 3deg;
  top: 2px;
  z-index: 5;
}

.content-history-badge-front {
  position: absolute;
  inset: 8px 0 0;
  z-index: 8;
  border-radius: 3px 5px 5px 5px;
  background: linear-gradient(180deg, var(--history-folder-light), var(--history-folder));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: rotateX(-24deg);
  transform-origin: bottom;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.content-history-badge-front i {
  position: absolute;
  top: 4px;
  left: 5px;
  right: 5px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.content-history-item:hover .content-history-badge-card-1,
.content-history-type:hover .content-history-badge-card-1 {
  transform: translate(calc(-50% - 12px), -20px) rotate(-15deg);
}

.content-history-item:hover .content-history-badge-card-2,
.content-history-type:hover .content-history-badge-card-2 {
  transform: translate(-50%, -24px) rotate(2deg);
}

.content-history-item:hover .content-history-badge-card-3,
.content-history-type:hover .content-history-badge-card-3 {
  transform: translate(calc(-50% + 12px), -20px) rotate(15deg);
}

.content-history-item:hover .content-history-badge-front,
.content-history-type:hover .content-history-badge-front {
  transform: rotateX(-45deg) scaleY(0.82);
}

.content-history-main {
  min-width: 0;
}

.content-history-item strong {
  display: block;
  color: #18191c;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-history-item p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 0;
}

.content-history-item p span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #6b7280;
  background: #f5f7fa;
  font-size: 11px;
  font-weight: 800;
}

.content-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.content-history-actions .tiny-btn {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
}

.content-history-modal {
  width: min(720px, calc(100vw - 36px));
}

.content-history-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.content-history-modal-head h2 {
  margin: 0;
  color: #18191c;
  font-size: 22px;
}

.content-history-modal-head p {
  margin: 3px 0 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.content-history-modal-title {
  margin: 0 0 12px;
  color: #18191c;
  font-size: 17px;
  line-height: 1.45;
}

.content-history-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.content-history-detail-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.content-history-detail-grid dt {
  margin: 0 0 5px;
  color: #8a929b;
  font-size: 11px;
  font-weight: 900;
}

.content-history-detail-grid dd {
  margin: 0;
  overflow: hidden;
  color: #2f3338;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-history-preview {
  display: grid;
  gap: 8px;
}

.content-history-preview > strong {
  color: #18191c;
  font-size: 14px;
}

/* Opportunity order board */
.opportunity-panel {
  padding: 24px;
}

.opportunity-page-title {
  margin-bottom: 18px;
}

.opportunity-filter-bar {
  --opportunity-sort-width: 156px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: -2px 0 18px;
  padding: 11px;
  border: 1px solid #e7eef4;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 255, 0.9)),
    #ffffff;
  box-shadow: 0 10px 28px rgba(24, 25, 28, 0.05);
}

.opportunity-filter-search,
.opportunity-filter-group,
.opportunity-date-fields label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid #dce7ef;
  border-radius: 8px;
  background: #ffffff;
}

.opportunity-filter-search {
  order: 1;
  flex: 1 1 180px;
  min-width: 150px;
  padding: 0 10px;
}

.opportunity-project-field {
  flex-grow: 1.1;
  max-width: 240px;
}

.opportunity-customer-field {
  flex-grow: 0.95;
  max-width: 220px;
}

.opportunity-order-field {
  flex-grow: 0.8;
  max-width: 190px;
}

.opportunity-status-group {
  order: 3;
  flex: 1 1 calc(100% - var(--opportunity-sort-width) - 12px);
  min-width: 0;
  max-width: calc(100% - var(--opportunity-sort-width) - 12px);
  padding: 4px 5px 4px 10px;
}

.opportunity-role-group {
  order: 3;
  flex: 0.85 1 190px;
  min-width: 178px;
  padding: 4px 5px 4px 10px;
}

.opportunity-sort-group {
  order: 3;
  flex: 0 0 var(--opportunity-sort-width);
  min-width: var(--opportunity-sort-width);
  max-width: var(--opportunity-sort-width);
  gap: 4px;
  padding: 4px 4px 4px 7px;
}

.opportunity-sort-group .opportunity-chip-row {
  gap: 4px;
  flex: 0 0 auto;
}

.opportunity-sort-group .opportunity-chip {
  padding: 6px 8px;
}

.opportunity-date-fields {
  order: 3;
  flex: 1 1 250px;
  display: grid;
  grid-template-columns: repeat(2, minmax(108px, 1fr));
  gap: 8px;
}

.opportunity-date-fields label {
  padding: 0 9px;
}

.opportunity-filter-search span,
.opportunity-filter-label,
.opportunity-date-fields span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.opportunity-filter-bar input {
  width: 100%;
  height: 38px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #1f2937;
  background: transparent;
  outline: none;
  font-size: 13px;
}

.opportunity-filter-search:focus-within,
.opportunity-date-fields label:focus-within {
  border-color: var(--bili-blue);
  box-shadow: 0 0 0 3px rgba(0, 174, 236, 0.12);
}

.opportunity-chip-row {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  min-height: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}

.opportunity-chip-row::-webkit-scrollbar {
  display: none;
}

.opportunity-chip {
  flex: 0 0 auto;
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  padding: 5px 8px;
  color: #606873;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.opportunity-chip:hover {
  color: #008ac5;
  background: #e8f8ff;
}

.opportunity-chip.active {
  color: #ffffff;
  background: linear-gradient(110deg, var(--pink), var(--bili-blue));
  box-shadow: 0 6px 14px rgba(0, 174, 236, 0.2);
}

.opportunity-reset-btn {
  order: 2;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 13px;
}

.opportunity-list {
  display: grid;
  gap: 18px;
}

.opportunity-card {
  overflow: hidden;
  padding: 0;
  border-color: #eef0f2;
  background: rgba(255, 255, 255, 0.9);
}

.opportunity-head {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: stretch;
  padding: 22px 24px 16px;
  background: linear-gradient(180deg, #ffffff, #fff9fb);
}

.opportunity-head-single {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.opportunity-title-block {
  min-width: 0;
}

.opportunity-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
}

.opportunity-title-block h3 {
  margin: 0;
  color: #18191c;
  font-size: 20px;
}

.opportunity-order-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid #dbeaf7;
  border-radius: 999px;
  color: #43617c;
  background: #f7fbff;
  white-space: nowrap;
}

.opportunity-order-no small {
  color: #7d8793;
  font-size: 11px;
  font-weight: 900;
}

.opportunity-order-no strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-overflow: ellipsis;
}

.opportunity-title-block p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

.opportunity-title-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.opportunity-title-meta-copy {
  min-width: 0;
}

.opportunity-export-btn {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
}

.opportunity-export-btn svg {
  width: 14px;
  height: 14px;
}

.opportunity-head-requirements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.opportunity-head-requirement {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  background: #ffffff;
}

.opportunity-head-requirement small {
  color: #7d8793;
  font-size: 11px;
  font-weight: 900;
}

.opportunity-head-requirement strong {
  min-width: 0;
  overflow: hidden;
  color: #172033;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-head-requirement.audience {
  border-color: #dbeaf7;
  background: #f7fbff;
}

.opportunity-head-requirement.budget {
  border-color: #ffd5df;
  background: #fff7fa;
}

.opportunity-head-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 8px;
}

.opportunity-total {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.opportunity-total small {
  color: #9499a0;
  font-size: 12px;
  font-weight: 800;
}

.opportunity-total strong {
  color: var(--red-dark);
  font-size: 22px;
}

.opportunity-confirm-pill {
  min-width: 92px;
  justify-content: center;
  white-space: nowrap;
}

.opportunity-requirement-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 24px 14px;
  background: linear-gradient(180deg, #fff9fb, #ffffff);
  overflow: hidden;
}

.opportunity-requirement-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #ffd5df;
  border-radius: 999px;
  color: var(--red-dark);
  background: #fff3f7;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.opportunity-requirement-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}

.opportunity-requirement-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 190px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e8edf2;
  border-radius: 999px;
  color: #4f5b6c;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

button.opportunity-requirement-chip {
  cursor: pointer;
  font-family: inherit;
}

button.opportunity-requirement-chip:hover {
  border-color: #ff9ab1;
  color: var(--red-dark);
  background: #fff7fa;
}

.opportunity-requirement-chip b,
.opportunity-requirement-chip em,
.opportunity-requirement-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-requirement-chip b {
  flex: 0 0 auto;
  color: #7d8793;
}

.opportunity-requirement-chip em {
  color: #172033;
  font-style: normal;
}

.opportunity-requirement-chip small {
  flex: 0 0 auto;
  color: var(--red-dark);
  font-size: 11px;
  font-weight: 900;
}

.opportunity-requirement-chip.brief {
  flex: 1 1 240px;
  max-width: none;
}

.opportunity-requirement-chip.brief-file {
  flex: 1 1 210px;
  max-width: 320px;
}

.opportunity-requirement-chip.date {
  flex: 0 0 290px;
  max-width: 290px;
}

.opportunity-requirement-chip.date em {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.opportunity-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 16px 24px 18px;
  background: #ffffff;
}

.opportunity-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 62px;
  color: #7d8793;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.opportunity-step::before {
  content: "";
  position: absolute;
  left: calc(50% + 23px);
  right: calc(-50% + 23px);
  top: 19px;
  height: 3px;
  border-radius: 999px;
  background: #e8edf2;
}

.opportunity-step:last-child::before {
  display: none;
}

.opportunity-step i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dbe4ec;
  border-radius: 999px;
  color: #7d8793;
  background: #ffffff;
  font-style: normal;
  box-shadow: 0 2px 8px rgba(18, 32, 51, 0.06);
}

.opportunity-step em {
  position: relative;
  z-index: 1;
  max-width: 72px;
  color: inherit;
  font-style: normal;
  line-height: 1.2;
}

.opportunity-step.active {
  color: #206a8f;
}

.opportunity-step.line-active::before {
  background: #93d8f5;
}

.opportunity-step.active i {
  color: #ffffff;
  border-color: #00a1d6;
  background: #00a1d6;
}

.opportunity-step.current i {
  box-shadow: 0 0 0 4px rgba(0, 161, 214, 0.14);
}

.opportunity-step.current em {
  color: #17314f;
}

.opportunity-table-wrap {
  margin: 0 24px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.opportunity-table {
  min-width: 1120px;
}

.opportunity-table:not(.compact-opportunity-table) {
  min-width: 1180px;
  table-layout: fixed;
}

.opportunity-table:not(.compact-opportunity-table) th:nth-child(1) {
  width: 16%;
}

.opportunity-table:not(.compact-opportunity-table) th:nth-child(2) {
  width: 23%;
}

.opportunity-table:not(.compact-opportunity-table) th:nth-child(3) {
  width: 9%;
}

.opportunity-table:not(.compact-opportunity-table) th:nth-child(4) {
  width: 12%;
}

.opportunity-table:not(.compact-opportunity-table) th:nth-child(5) {
  width: 18%;
}

.opportunity-table:not(.compact-opportunity-table) th:nth-child(6),
.opportunity-table:not(.compact-opportunity-table) th:nth-child(7),
.opportunity-table:not(.compact-opportunity-table) th:nth-child(8),
.opportunity-table:not(.compact-opportunity-table) td:nth-child(6),
.opportunity-table:not(.compact-opportunity-table) td:nth-child(7),
.opportunity-table:not(.compact-opportunity-table) td:nth-child(8) {
  width: 7%;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
}

.opportunity-table:not(.compact-opportunity-table) td:nth-child(6) .pill,
.opportunity-table:not(.compact-opportunity-table) td:nth-child(8) .pill,
.opportunity-table:not(.compact-opportunity-table) td:nth-child(8) .plain-btn.tiny-btn {
  min-width: 66px;
  justify-content: center;
  white-space: nowrap;
}

.opportunity-table th {
  padding: 13px 12px;
  color: #61666d;
  background: #f6f7f8;
}

.opportunity-table td {
  padding: 14px 12px;
  vertical-align: middle;
}

.opportunity-talent-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.opportunity-talent-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.opportunity-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--red), var(--bili-blue));
}

.opportunity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opportunity-avatar-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.opportunity-avatar-link:hover {
  box-shadow:
    0 0 0 3px rgba(0, 174, 236, 0.16),
    0 6px 16px rgba(35, 49, 73, 0.16);
  transform: translateY(-1px) scale(1.04);
}

.opportunity-avatar-link:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 174, 236, 0.18);
}

.opportunity-talent-cell strong {
  display: block;
  color: #18191c;
}

.opportunity-talent-cell small {
  display: block;
  color: #9499a0;
  font-size: 12px;
  line-height: 1.2;
}

.single-order-talent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  background: #f7f8fa;
}

.single-order-talent strong {
  display: block;
  color: #18191c;
  font-size: 15px;
}

.single-order-talent small {
  display: block;
  margin-top: 4px;
  color: #9499a0;
  font-size: 12px;
}

.date-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.deal-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 153, 160, 0.2);
  border-radius: 10px;
  color: #525960;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 14px rgba(24, 25, 28, 0.04);
}

.deal-badge::before {
  content: "";
  position: static;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #8a929b;
  box-shadow: 0 0 0 3px rgba(138, 146, 155, 0.12);
}

.deal-badge b,
.deal-badge em {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  line-height: 1;
}

.deal-badge em {
  color: #8a929b;
  font-size: 12px;
  font-weight: 800;
}

.deal-badge.implant {
  color: #0d6f92;
  background: linear-gradient(180deg, #ffffff, #f3fbff);
  border-color: #d8f1fb;
}

.deal-badge.implant::before {
  background: #00a1d6;
}

.deal-badge.custom {
  color: #9f2340;
  background: linear-gradient(180deg, #ffffff, #fff7fa);
  border-color: #f4d7df;
}

.deal-badge.custom::before {
  background: #d84b6c;
}

.date-chip {
  color: #4d535a;
  background: #fbfcfd;
  border: 1px solid #e7ebef;
}

.expected-date-text {
  color: #5f6975;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-date-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #cfefff;
  border-radius: 7px;
  color: #146a90;
  background: #f3fbff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-date-badge::before {
  content: "";
  width: 4px;
  height: 16px;
  margin-right: 7px;
  border-radius: 999px;
  background: #00a1d6;
}

.admin-date-badge.empty {
  color: #9499a0;
  background: #fbfcfd;
  border-color: #e7ebef;
  font-weight: 800;
}

.admin-date-badge.empty::before {
  background: #cfd6dd;
}

.opportunity-price-stack {
  display: grid;
  gap: 4px;
  color: #9499a0;
  font-size: 13px;
}

.opportunity-price-stack .selected {
  color: #18191c;
  font-weight: 900;
}

.opportunity-final-price {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #18191c;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-date-input {
  min-width: 150px;
  height: 34px;
  border-color: #cfefff;
  background: #f6fcff;
  color: #17314f;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.line-total {
  color: var(--red-dark);
  white-space: nowrap;
}

.opportunity-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 18px 24px 22px;
}

.opportunity-summary-copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.opportunity-summary span {
  color: #6b7280;
  font-size: 13px;
  font-weight: 800;
}

.opportunity-summary strong {
  color: var(--red-dark);
  font-size: 24px;
}

.opportunity-summary small {
  color: #9499a0;
}

.opportunity-summary-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}

.opportunity-selected-total {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 226px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #ffd5df;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7fa, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

.opportunity-selected-total small {
  color: #fb4b78;
  font-size: 11px;
  font-weight: 900;
  flex: 0 0 auto;
}

.opportunity-selected-total strong {
  color: var(--red-dark);
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.opportunity-selected-total span {
  padding-left: 8px;
  border-left: 1px solid #ffd5df;
  color: #7d8793;
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
}

.opportunity-actions {
  justify-content: flex-end;
  margin-top: 0;
  padding-bottom: 0;
}

.opportunity-delete-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 12px 18px 0;
  border-color: #ffc6a8;
  background: #fff7ed;
  color: #7c2d12;
}

.opportunity-delete-review strong {
  display: block;
  color: #9a3412;
  font-size: 14px;
}

.opportunity-delete-review span,
.opportunity-delete-review p {
  display: block;
  margin: 2px 0 0;
}

.opportunity-delete-review-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.business-mini-opportunity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.business-mini-opportunity strong {
  flex: 0 0 auto;
  color: #c2410c;
  font-size: 12px;
}

.compact-opportunity-card .opportunity-head {
  grid-template-columns: minmax(0, 0.74fr) minmax(330px, 1fr) auto;
  gap: 12px;
  padding: 14px 18px 10px;
}

.compact-opportunity-card .opportunity-title-block h3 {
  font-size: 18px;
  line-height: 1.2;
}

.compact-opportunity-card .opportunity-title-row {
  gap: 6px;
  margin-bottom: 4px;
}

.compact-opportunity-card .opportunity-order-no {
  min-height: 22px;
  padding: 2px 7px;
}

.compact-opportunity-card .opportunity-order-no small {
  font-size: 10px;
}

.compact-opportunity-card .opportunity-order-no strong {
  font-size: 11px;
}

.compact-opportunity-card .opportunity-title-block p {
  font-size: 12px;
}

.compact-opportunity-card .opportunity-export-btn {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 10px;
}

.compact-opportunity-card .opportunity-export-btn svg {
  width: 13px;
  height: 13px;
}

.compact-opportunity-card .opportunity-head-requirements {
  gap: 6px;
}

.compact-opportunity-card .opportunity-head-requirement {
  min-height: 44px;
  padding: 6px 10px;
}

.compact-opportunity-card .opportunity-head-requirement small {
  font-size: 10px;
}

.compact-opportunity-card .opportunity-head-requirement strong {
  font-size: 13px;
}

.compact-opportunity-card .opportunity-head-metrics {
  gap: 8px;
  padding-right: 0;
}

.compact-opportunity-card .opportunity-total {
  gap: 0;
}

.compact-opportunity-card .opportunity-total small {
  font-size: 11px;
}

.compact-opportunity-card .opportunity-total strong {
  font-size: 20px;
}

.compact-opportunity-card .opportunity-confirm-pill {
  min-width: 82px;
  min-height: 30px;
  padding: 5px 10px;
}

.compact-opportunity-card .opportunity-requirement-strip {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 0 18px 6px;
}

.compact-opportunity-card .opportunity-requirement-label {
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
}

.compact-opportunity-card .opportunity-requirement-items {
  gap: 5px;
}

.compact-opportunity-card .opportunity-requirement-chip {
  max-width: 156px;
  min-height: 24px;
  padding: 0 8px;
  gap: 4px;
  font-size: 11px;
}

.compact-opportunity-card .opportunity-requirement-chip.product,
.compact-opportunity-card .opportunity-requirement-chip.budget,
.compact-opportunity-card .opportunity-requirement-chip.count {
  max-width: 140px;
}

.compact-opportunity-card .opportunity-requirement-chip.date {
  flex: 0 0 280px;
  max-width: 280px;
}

.compact-opportunity-card .opportunity-requirement-chip.audience {
  max-width: 170px;
}

.compact-opportunity-card .opportunity-requirement-chip.brief {
  flex: 1 1 220px;
  max-width: 360px;
}

.compact-opportunity-card .opportunity-requirement-chip.brief-file {
  flex: 1 1 190px;
  max-width: 300px;
}

.compact-opportunity-card .opportunity-flow {
  padding: 8px 18px 9px;
}

.compact-opportunity-card .opportunity-step {
  gap: 4px;
  min-height: 44px;
  font-size: 11px;
}

.compact-opportunity-card .opportunity-step::before {
  left: calc(50% + 17px);
  right: calc(-50% + 17px);
  top: 13px;
  height: 2px;
}

.compact-opportunity-card .opportunity-step i {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.compact-opportunity-card .opportunity-step.current i {
  box-shadow: 0 0 0 3px rgba(0, 161, 214, 0.14);
}

.compact-opportunity-card .opportunity-step em {
  max-width: 70px;
  line-height: 1.1;
}

.compact-opportunity-table-wrap {
  margin: 0 18px;
  overflow-x: hidden;
}

.compact-opportunity-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.compact-opportunity-table th,
.compact-opportunity-table td {
  padding: 9px 10px;
  font-size: 12px;
}

.compact-opportunity-table th:nth-child(1) {
  width: 19%;
}

.compact-opportunity-table th:nth-child(2) {
  width: 26%;
}

.compact-opportunity-table th:nth-child(3) {
  width: 10%;
}

.compact-opportunity-table th:nth-child(4) {
  width: 31%;
}

.compact-opportunity-table th:nth-child(5) {
  width: 7%;
}

.compact-opportunity-table th:nth-child(6) {
  width: 7%;
}

.compact-opportunity-table .opportunity-talent-cell {
  gap: 8px;
  min-width: 0;
}

.compact-opportunity-table .opportunity-avatar {
  width: 40px;
  height: 40px;
}

.compact-opportunity-table .opportunity-talent-copy {
  min-width: 0;
  gap: 1px;
}

.compact-opportunity-table .opportunity-talent-cell strong,
.compact-opportunity-table .opportunity-talent-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-opportunity-table .opportunity-talent-cell small {
  margin-top: 2px;
  font-size: 11px;
}

.compact-opportunity-table .deal-badge {
  min-height: 28px;
  padding: 0 9px;
  gap: 5px;
  border-radius: 999px;
}

.compact-opportunity-table .deal-badge::before {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 2px rgba(216, 75, 108, 0.1);
}

.compact-opportunity-table .schedule-line-simple {
  min-width: 0;
  gap: 5px;
}

.compact-opportunity-table .schedule-line-row.has-client-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

.compact-opportunity-table .schedule-current-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 7px 9px;
}

.compact-opportunity-table .schedule-current-copy {
  gap: 2px;
}

.compact-opportunity-table .schedule-current-copy small {
  font-size: 10px;
}

.compact-opportunity-table .schedule-current-copy strong {
  font-size: 12px;
}

.compact-opportunity-table .schedule-status-badge {
  padding: 3px 7px;
  font-size: 10px;
}

.compact-opportunity-table .schedule-current-meta {
  max-width: 100%;
  font-size: 10px;
}

.compact-opportunity-table .pill {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.compact-opportunity-table .plain-btn.tiny-btn {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.opportunity-case-summary.case-summary {
  gap: 8px;
  min-width: 0;
}

.opportunity-case-summary.case-summary .case-thumb {
  flex-basis: 58px;
  width: 58px;
  height: 38px;
  border-radius: 7px;
}

.opportunity-case-summary .case-summary-copy {
  gap: 4px;
}

.opportunity-case-summary .case-summary-title {
  font-size: 11px;
  line-height: 1.25;
}

.opportunity-case-summary .case-summary-stats {
  gap: 4px;
}

.opportunity-case-summary .case-summary-stats span {
  min-height: 16px;
  padding: 2px 5px;
  font-size: 9px;
}

.opportunity-case-empty {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px dashed #d8e5f0;
  border-radius: 999px;
  color: #8a929b;
  background: #fbfdff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.folder-talents-table.opportunity-table:not(.compact-opportunity-table) {
  min-width: 980px;
  table-layout: fixed;
}

.folder-talents-table.opportunity-table:not(.compact-opportunity-table) th:nth-child(1) {
  width: 22%;
}

.folder-talents-table.opportunity-table:not(.compact-opportunity-table) th:nth-child(2) {
  width: 31%;
}

.folder-talents-table.opportunity-table:not(.compact-opportunity-table) th:nth-child(3) {
  width: 14%;
}

.folder-talents-table.opportunity-table:not(.compact-opportunity-table) th:nth-child(4) {
  width: 33%;
}

.folder-talents-table th,
.folder-talents-table td {
  padding: 12px 12px;
}

.folder-talents-table .opportunity-talent-cell {
  min-width: 0;
}

.folder-talents-table .opportunity-talent-copy strong,
.folder-talents-table .opportunity-talent-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-talent-offer-cell {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.folder-talents-table .folder-talents-tags {
  min-width: 0;
}

.folder-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.folder-price-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.folder-price-grid small,
.folder-selected-deal small {
  color: #8a929b;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.folder-price-grid strong {
  color: #18191c;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.folder-selected-deal {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.folder-date-chip {
  min-width: 110px;
}

.folder-case-preview {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.folder-case-thumb.case-thumb {
  width: 98px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
}

.folder-case-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}

.folder-case-title {
  display: -webkit-box;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #18191c;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.folder-case-title:hover {
  color: #00a1d6;
}

.folder-case-title:disabled {
  color: #8a929b;
  cursor: not-allowed;
}

.folder-case-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.folder-case-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid #eef0f2;
  border-radius: 999px;
  color: #61666d;
  background: #f7f8fa;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.folder-case-link.plain-btn.tiny-btn {
  min-height: 26px;
  padding: 4px 9px;
  font-size: 11px;
}

.folder-case-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px dashed #d8e5f0;
  border-radius: 999px;
  color: #8a929b;
  background: #fbfdff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.compact-opportunity-card .opportunity-summary {
  gap: 10px;
  padding: 12px 18px 14px;
}

.compact-opportunity-card .opportunity-summary-copy {
  gap: 8px;
}

.compact-opportunity-card .opportunity-summary span,
.compact-opportunity-card .opportunity-summary small {
  font-size: 12px;
}

.compact-opportunity-card .opportunity-summary strong {
  font-size: 22px;
}

.compact-opportunity-card .opportunity-selected-total {
  min-width: 206px;
  min-height: 40px;
  padding: 7px 10px;
  border-radius: 12px;
}

.compact-opportunity-card .opportunity-selected-total small,
.compact-opportunity-card .opportunity-selected-total span {
  font-size: 11px;
}

.compact-opportunity-card .opportunity-selected-total strong {
  font-size: 20px;
}

.compact-opportunity-card .opportunity-actions .primary-btn,
.compact-opportunity-card .opportunity-actions .secondary-btn {
  min-height: 38px;
  padding: 0 18px;
}

.confirm-schedule-modal {
  width: min(760px, calc(100vw - 44px));
  overflow: hidden;
  padding: 0;
  background: #ffffff;
}

.confirm-schedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid #eef0f2;
  background: linear-gradient(180deg, #ffffff, #fff8fb);
}

.confirm-schedule-head h2 {
  margin: 8px 0 6px;
  color: #18191c;
  font-size: 24px;
}

.confirm-schedule-head p {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.confirm-schedule-head .pill {
  flex: 0 0 auto;
  margin-top: 8px;
}

.confirm-schedule-list {
  display: grid;
  gap: 12px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding: 16px 20px;
  background: #fbfcfd;
}

.confirm-schedule-card {
  padding: 16px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.confirm-schedule-card.is-confirmed {
  border-color: #bdebd6;
  background: #f7fffb;
}

.confirm-talent-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.confirm-talent-main h3 {
  margin: 0 0 4px;
  color: #18191c;
  font-size: 16px;
}

.confirm-talent-main p {
  margin: 0;
  color: #9499a0;
  font-size: 12px;
}

.confirm-schedule-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.confirm-schedule-metrics label,
.confirm-schedule-metrics > div {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.confirm-schedule-metrics span {
  color: #8a929b;
  font-size: 12px;
  font-weight: 900;
}

.confirm-schedule-metrics input {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  background: #ffffff;
  color: #18191c;
  font: inherit;
  font-weight: 800;
}

.confirm-schedule-metrics strong {
  color: #18191c;
  font-size: 14px;
}

.confirm-schedule-actions,
.confirm-schedule-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.confirm-schedule-action-hint {
  align-self: center;
  color: #8a929b;
  font-size: 12px;
  font-weight: 900;
}

.confirm-schedule-footer {
  padding: 0 20px 20px;
  background: #fbfcfd;
}

@media (max-width: 1280px) {
  .react-bits-folder-card {
    grid-template-columns: minmax(160px, 190px) minmax(0, 1fr) minmax(220px, 240px);
    gap: 20px;
    padding: 18px;
  }

  .react-bits-folder-visual-wrap {
    min-width: 0;
  }

  .react-bits-folder-preview {
    width: 160px;
    height: 126px;
  }

  .react-bits-folder-main h3 {
    font-size: 26px;
  }

  .react-bits-folder-price {
    font-size: 26px;
  }

  .react-bits-folder-progress {
    gap: 4px;
  }

  .react-bits-folder-progress span {
    gap: 6px;
    padding: 6px;
    font-size: 12px;
  }

  .folder-command-panel {
    padding-left: 20px;
  }
}

@media (max-width: 1120px) {
  .system-config-grid,
  .system-config-status,
  .content-grid,
  .content-results-grid {
    grid-template-columns: 1fr;
  }

  .folder-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .react-bits-folder-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .react-bits-folder-visual-wrap {
    justify-items: start;
    min-height: 0;
  }

  .admin-folder-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-folder-summary {
    min-width: 0;
  }

  .folder-row-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .admin-folder-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .folder-command-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 20px 0 0;
    border-width: 1px 0 0;
  }

  .admin-push-select {
    grid-column: auto;
  }

  .folder-command-panel .admin-push-select {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1180px) {
  .script-workbench-layout {
    grid-template-columns: 1fr;
  }

  .script-history-rail {
    position: static;
    max-height: none;
  }

  .script-history-list {
    max-height: 320px;
  }
}

@media (max-width: 920px) {
  .script-grid,
  .script-score-grid,
  .script-extraction-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .react-bits-folder-title-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .react-bits-folder-price {
    justify-self: start;
  }

  .react-bits-folder-progress {
    gap: 2px;
  }

  .react-bits-folder-progress span {
    padding: 6px;
  }

  .react-bits-folder-progress b {
    display: none;
  }

  .script-hero,
  .system-config-hero,
  .script-product-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .system-config-hero {
    grid-template-columns: 1fr;
  }

  .script-hero {
    grid-template-columns: 1fr;
  }

  .script-hero-actions {
    justify-content: flex-start;
  }

  .system-config-form-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .system-config-form-head > span {
    max-width: 100%;
  }

  .script-steps {
    grid-template-columns: 1fr;
  }

  .script-upload-form,
  .script-bv-form,
  .content-search-form,
  .content-action-grid,
  .content-video-summary,
  .content-history-item {
    grid-template-columns: 1fr;
  }

  .folder-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-folder-summary,
  .admin-folder-actions {
    grid-template-columns: 1fr;
  }

  .admin-push-select {
    grid-column: 1 / -1;
  }

  .folder-talents-head,
  .folder-talents-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .folder-total-badge {
    justify-items: start;
  }

  .folder-flow {
    overflow-x: auto;
    grid-template-columns: repeat(6, minmax(76px, 1fr));
    padding-bottom: 4px;
  }

  .script-export-actions {
    justify-content: flex-start;
  }

  .system-config-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .opportunity-head,
  .opportunity-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .opportunity-head {
    display: flex;
  }

  .opportunity-summary-side {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .opportunity-selected-total {
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
  }

  .opportunity-head-requirements {
    width: 100%;
  }

  .opportunity-head-metrics {
    width: 100%;
    justify-content: space-between;
    padding-right: 0;
  }

  .opportunity-flow {
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    gap: 0;
    overflow-x: auto;
    padding: 14px 14px 16px;
  }

  .opportunity-step::before {
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    top: 17px;
  }

  .opportunity-step {
    min-height: 58px;
    font-size: 11px;
  }

  .opportunity-step i {
    width: 34px;
    height: 34px;
  }

  .opportunity-actions {
    justify-content: flex-start;
  }

  .opportunity-delete-review {
    grid-template-columns: 1fr;
    margin-inline: 12px;
  }

  .opportunity-delete-review-actions {
    justify-content: flex-start;
  }

  .confirm-schedule-modal {
    width: min(100%, calc(100vw - 28px));
  }

  .confirm-schedule-head,
  .confirm-talent-main {
    grid-template-columns: 1fr;
  }

  .confirm-schedule-head {
    display: grid;
  }

  .confirm-schedule-head .pill {
    margin-top: 0;
    justify-self: start;
  }

  .confirm-schedule-metrics {
    grid-template-columns: 1fr;
  }

  .confirm-schedule-actions,
  .confirm-schedule-footer {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .opportunity-panel {
    padding: 18px;
  }

  .opportunity-filter-bar {
    gap: 9px;
    padding: 10px;
  }

  .opportunity-filter-search,
  .opportunity-status-group,
  .opportunity-role-group,
  .opportunity-sort-group,
  .opportunity-date-fields {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
  }

  .opportunity-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .opportunity-reset-btn {
    order: 4;
    width: 100%;
  }
}

/* Perceived-performance and interaction polish */
.rate-table-wrap,
.script-table-wrap,
.content-table-wrap {
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

.row-avatar,
.case-thumb,
.folder-talent-avatar,
.opportunity-avatar,
.like-avatar {
  contain: paint;
  background: #f1f2f3;
}

.primary-btn,
.secondary-btn,
.danger-btn,
.plain-btn,
.filter-chip,
.rate-action-icon-btn,
.soft-pink-btn,
.hot-pink-btn,
.nav button {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0, 174, 236, 0.36);
  outline-offset: 2px;
}

.primary-btn:not(:disabled):active,
.secondary-btn:not(:disabled):active,
.plain-btn:not(:disabled):active,
.rate-action-icon-btn:not(:disabled):active,
.soft-pink-btn:not(:disabled):active,
.hot-pink-btn:not(:disabled):active {
  transform: translateY(1px);
}

@supports (content-visibility: auto) {
  .opportunity-card,
  .content-history-item,
  .confirm-schedule-card {
    content-visibility: auto;
    contain-intrinsic-size: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-rays,
  .ambient-rays::before,
  .ambient-rays::after,
  .ambient-rays__beam,
  .ambient-rays__halo,
  .post-opportunity-modal::before {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Adaptive single-line top navigation */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  flex-wrap: nowrap;
  align-items: center;
}

.brand {
  flex: 0 1 260px;
  min-width: 190px;
}

.brand > div:last-child {
  min-width: 0;
}

.brand-title,
.brand-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav {
  grid-column: 2;
  justify-self: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: safe center;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.nav button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.user-chip {
  grid-column: 3;
  justify-self: end;
  flex: 0 0 auto;
}

.client-profile-chip {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 220px;
  padding: 4px 10px 4px 5px;
  border: 1px solid #eef0f2;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.client-profile-chip:hover {
  border-color: rgba(251, 93, 122, 0.34);
  box-shadow: 0 8px 20px rgba(251, 93, 122, 0.12);
  transform: translateY(-1px);
}

.client-profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--pink), var(--red) 58%, var(--bili-blue));
  box-shadow: 0 5px 14px rgba(251, 93, 122, 0.2);
}

.client-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-profile-fallback {
  font-size: 15px;
  font-weight: 900;
}

.client-profile-chip > strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .topbar {
    gap: 10px;
    padding: 14px 20px;
  }

  .brand {
    flex-basis: 190px;
    min-width: 156px;
    gap: 10px;
  }

  .brand-title {
    font-size: 17px;
  }

  .brand-subtitle {
    font-size: 11px;
  }

  .nav {
    gap: 6px;
    padding: 4px;
  }

  .nav button,
  .ghost-btn {
    padding-inline: 7px;
    font-size: 15px;
  }
}

@media (max-width: 980px) {
  .topbar {
    flex-direction: row;
    align-items: center;
  }

  .nav {
    width: auto;
  }
}

@media (max-width: 720px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nav user";
    align-items: center;
    padding: 10px 12px 12px;
  }

  .user-chip {
    grid-area: user;
    justify-self: end;
    gap: 6px;
    font-size: 13px;
  }

  .user-chip span {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .client-profile-chip {
    display: none;
  }

  .nav {
    grid-area: nav;
    width: 100%;
    margin-top: 0;
    padding: 3px 4px 6px;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    scrollbar-width: none;
  }

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

@media (max-width: 520px) {
  .topbar {
    gap: 8px;
    padding: 12px;
  }

  .nav button,
  .ghost-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .table-scroll-hint {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0 26px 8px;
    padding: 7px 10px;
    border: 1px solid #d8eef8;
    border-radius: 8px;
    color: #007caf;
    background: #f2fbff;
    font-size: 12px;
    font-weight: 900;
  }

  .rate-table-wrap {
    border-top: 1px solid #eef0f2;
  }
}

/* Shared secondary navigation */
.page-secondary-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(340px, 100%);
  padding: 4px;
  border: 1px solid rgba(228, 233, 239, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.68), 0 8px 22px rgba(37, 51, 67, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.page-secondary-nav button {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 40px;
  padding: 6px 14px;
  border: 0;
  border-radius: 10px;
  color: #287f9f;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(241, 248, 253, 0.78));
  font: inherit;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.page-secondary-nav button:hover:not(.active) {
  color: #0b86b3;
  background: #edf9ff;
}

.page-secondary-nav button.active {
  color: #ffffff;
  background: linear-gradient(115deg, #fb6f94, #ed4264 58%, #ff726d);
  box-shadow: 0 8px 18px rgba(237, 66, 100, 0.2);
}

.page-secondary-nav button:focus-visible {
  outline: 3px solid rgba(43, 177, 226, 0.3);
  outline-offset: 2px;
}

.page-secondary-nav button:active {
  transform: translateY(1px);
}

.page-secondary-nav span {
  overflow: hidden;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-secondary-nav small {
  overflow: hidden;
  max-width: 100%;
  color: #9aa4af;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-secondary-nav button.active small {
  color: rgba(255, 255, 255, 0.8);
}

/* Grouped administrator navigation */
.admin-grouped-view {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.admin-section-tabs {
  justify-self: start;
}

.admin-section-content {
  min-width: 0;
}

.admin-section-content > :first-child {
  margin-top: 0;
}

.admin-section-content .system-config-page,
.admin-section-content .system-config-hero,
.admin-section-content .system-config-form {
  min-width: 0;
  width: 100%;
}

@media (max-width: 520px) {
  .admin-grouped-view {
    gap: 10px;
  }

  .admin-section-tabs {
    box-sizing: border-box;
    width: 100%;
  }
}

/* Compact system configuration surface */
.system-config-page {
  gap: 10px;
}

.system-config-hero,
.system-config-form {
  padding: 14px 18px;
}

.system-config-hero {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}

.system-config-hero::before {
  opacity: 0.58;
}

.system-config-hero .script-kicker {
  min-height: 20px;
  padding: 3px 8px;
  font-size: 11px;
}

.system-config-hero h2 {
  margin: 5px 0 4px;
  font-size: 22px;
  line-height: 1.15;
}

.system-config-hero p {
  max-width: 760px;
  font-size: 12px;
  line-height: 1.45;
}

.system-config-hero-panel {
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 5px 10px;
  padding: 9px 10px;
  box-shadow: 0 8px 20px rgba(0, 92, 130, 0.06);
}

.system-config-hero-panel strong {
  font-size: 24px;
}

.system-config-hero-panel strong small {
  font-size: 13px;
}

.system-config-hero-panel p {
  display: none;
}

.system-config-hero-panel .secondary-btn {
  width: auto;
  min-height: 30px;
  margin-top: 0;
  padding: 6px 10px;
  justify-self: start;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
}

.system-config-form {
  gap: 12px;
}

.system-config-form-head {
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
}

.system-config-form-head h2 {
  margin-bottom: 3px;
  font-size: 19px;
}

.system-config-form-head p {
  font-size: 13px;
  line-height: 1.45;
}

.system-config-form-head > span {
  max-width: 360px;
  padding: 6px 9px;
  font-size: 11px;
}

.system-config-status {
  gap: 10px;
}

.config-status-badge {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
}

.config-status-badge i {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.config-status-badge strong {
  font-size: 15px;
}

.config-status-badge small {
  min-height: 16px;
  font-size: 11px;
}

.system-config-grid {
  gap: 12px;
}

.system-config-section {
  gap: 10px;
  padding: 14px;
  align-content: stretch;
  box-shadow: none;
}

.system-section-head {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
}

.system-section-head > span {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.system-config-section h3 {
  margin-bottom: 2px;
  font-size: 15px;
}

.system-section-head p {
  font-size: 12px;
  line-height: 1.4;
}

.system-config-section .field {
  gap: 5px;
}

.system-config-section .field label {
  font-size: 11px;
}

.system-config-section .field input,
.system-config-section .field textarea {
  border-radius: 7px;
  padding: 8px 9px;
  font-size: 12px;
}

.system-config-section .field input {
  min-height: 34px;
}

.system-config-section textarea {
  min-height: 78px;
}

.config-clear-option {
  gap: 6px;
  font-size: 12px;
}

.config-clear-btn {
  min-height: 27px;
  justify-self: end;
  padding: 4px 10px;
  border-color: #eef0f2;
  border-radius: 999px;
  color: #8a5160;
  background: #ffffff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: none;
}

.config-clear-btn:hover:not(:disabled) {
  border-color: #f4d2da;
  color: #a50f2e;
  background: #fff8fa;
}

.system-section-foot {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
}

.system-section-foot .tiny-btn {
  min-height: 29px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  box-shadow: none;
}

.bili-account-empty {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px dashed #dde1e5;
  border-radius: 8px;
  background: #fbfcfd;
}

.bili-account-empty strong,
.bili-account-row strong {
  color: #18191c;
  font-size: 13px;
}

.bili-account-empty span,
.bili-account-row span {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.4;
}

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

.bili-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.bili-account-row.active {
  border-color: #b9ead8;
  background: #effbf6;
}

.bili-account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.bili-account-actions em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #0f7d5c;
  background: #dff8ef;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.bili-qr-backdrop {
  padding: 28px;
  background:
    radial-gradient(circle at 12% 28%, rgba(0, 174, 236, 0.42), transparent 32%),
    radial-gradient(circle at 86% 88%, rgba(112, 139, 166, 0.26), transparent 34%),
    rgba(31, 45, 64, 0.32);
  backdrop-filter: blur(10px);
}

.bili-qr-modal {
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 56px);
  padding: 24px 28px 22px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 22px 52px rgba(22, 39, 61, 0.2);
}

.bili-qr-header {
  margin-bottom: 14px;
}

.bili-qr-header h2 {
  margin: 0 0 7px;
  color: #17314f;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

.bili-qr-header p {
  margin: 0;
  color: #8497b3;
  font-size: 14px;
  line-height: 1.4;
}

.bili-qr-stage {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 2px 0 14px;
}

.bili-qr-stage img,
.bili-qr-placeholder {
  display: grid;
  place-items: center;
  width: clamp(180px, 28vw, 210px);
  height: clamp(180px, 28vw, 210px);
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #8497b3;
  font-weight: 900;
  image-rendering: pixelated;
  box-shadow: none;
}

.bili-qr-placeholder {
  border: 1px solid #eef0f2;
  border-radius: 16px;
}

.bili-qr-stage strong {
  color: #17314f;
  font-size: 17px;
  line-height: 1.35;
  text-align: center;
}

.bili-qr-stage.expired strong,
.bili-qr-stage.failed strong {
  color: #a50f2e;
}

.bili-qr-stage.confirmed strong {
  color: #0f7d5c;
}

.bili-qr-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  padding-top: 4px;
}

.bili-qr-footer .plain-btn,
.bili-qr-footer .primary-btn {
  min-width: 88px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: none;
}

.bili-qr-footer .plain-btn {
  color: #8497b3;
  border-color: #dce7f2;
  background: #ffffff;
}

.bili-login-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.bili-login-card span {
  display: block;
  margin-bottom: 2px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
}

.bili-login-card strong {
  display: block;
  color: #18191c;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bili-qr-panel {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #bdecff;
  border-radius: 8px;
  background: #f4fbff;
}

.bili-qr-panel img {
  display: block;
  width: 112px;
  height: 112px;
  border: 6px solid #ffffff;
  border-radius: 8px;
  image-rendering: pixelated;
  box-shadow: 0 8px 18px rgba(0, 174, 236, 0.1);
}

.bili-qr-panel strong {
  display: block;
  margin-bottom: 5px;
  color: #006b91;
  font-size: 14px;
}

.bili-qr-panel p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.45;
}

.bili-qr-panel.scanned {
  border-color: #b9ead8;
  background: #effbf6;
}

.bili-qr-panel.expired,
.bili-qr-panel.failed {
  border-color: #f4d2da;
  background: #fff6f8;
}

.danger-confirm-btn {
  background: #a50f2e;
  box-shadow: none;
}

.config-path-note {
  padding: 9px;
  font-size: 12px;
  line-height: 1.45;
}

.system-config-actions {
  gap: 8px;
  padding-top: 0;
}

.system-config-actions .primary-btn,
.system-config-actions .plain-btn,
.system-section-foot .tiny-btn {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
}

@media (min-width: 761px) and (max-width: 1120px) {
  .system-config-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .system-config-section:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .system-config-hero,
  .system-config-form {
    padding: 15px;
  }

  .system-config-hero {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .system-config-hero-panel {
    justify-self: start;
  }

  .system-config-form-head > span {
    max-width: 100%;
  }

  .bili-login-card,
  .bili-qr-panel {
    grid-template-columns: 1fr;
  }

  .bili-account-row {
    grid-template-columns: 1fr;
  }

  .bili-account-actions {
    justify-content: flex-start;
  }

  .bili-qr-panel img {
    width: 132px;
    height: 132px;
  }

  .bili-qr-backdrop {
    padding: 16px;
  }

  .bili-qr-modal {
    width: min(360px, calc(100vw - 28px));
    padding: 22px 20px 20px;
    border-radius: 18px;
  }

  .bili-qr-header h2 {
    font-size: 22px;
  }

  .bili-qr-header p {
    font-size: 13px;
  }

  .bili-qr-stage img,
  .bili-qr-placeholder {
    width: min(210px, 62vw);
    height: min(210px, 62vw);
  }

  .bili-qr-stage strong {
    font-size: 16px;
  }

  .bili-qr-footer .plain-btn,
  .bili-qr-footer .primary-btn {
    min-height: 38px;
    padding: 7px 14px;
    font-size: 13px;
  }

  .system-config-actions {
    justify-content: flex-start;
  }

  .script-comparison-list dl {
    grid-template-columns: 1fr;
  }
}

/* Auth smoothness pass */
:root {
  --shadow-input:
    0 2px 3px -1px rgba(0, 0, 0, 0.1),
    0 1px 0 0 rgba(25, 28, 33, 0.02),
    0 0 0 1px rgba(25, 28, 33, 0.08);
  --auth-panel-radius: 24px;
  --auth-control-radius: 16px;
  --auth-soft-radius: 14px;
}

.auth-panel {
  align-self: center;
  max-width: 430px;
  padding: 26px;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.86);
  border-radius: var(--auth-panel-radius);
  box-shadow:
    var(--shadow-input),
    0 24px 64px rgba(24, 25, 28, 0.1);
  animation: authPanelEnter 0.34s ease both;
}

.auth-panel-heading {
  margin: 0 0 16px;
}

.auth-panel-heading h2 {
  margin: 0;
  color: #18191c;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0;
}

.auth-panel-heading p {
  margin: 7px 0 0;
  color: #61666d;
  font-size: 13px;
  line-height: 1.55;
}

.auth-tabs {
  position: relative;
  isolation: isolate;
  gap: 0;
  min-height: 54px;
  margin-bottom: 22px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #e3e5e7;
  border-radius: 999px;
  background: #f1f2f3;
  box-shadow:
    inset 0 1px 2px rgba(24, 25, 28, 0.04),
    0 8px 22px rgba(24, 25, 28, 0.04);
}

.auth-tabs::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px auto 4px 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    var(--shadow-input),
    0 12px 24px rgba(251, 114, 153, 0.12);
  transform: translateX(0);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease;
}

.auth-tabs.is-register::before {
  transform: translateX(100%);
}

.auth-tabs button {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 0 12px;
  color: #61666d;
  background: transparent;
  box-shadow: none;
  font-weight: 900;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.auth-tabs button.active {
  color: var(--red-dark);
  background: transparent;
  box-shadow: none;
}

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

.auth-form {
  display: grid;
  gap: 0;
  animation: authFormEnter 0.24s ease both;
}

.auth-form .field {
  margin: 0;
}

.auth-field input {
  min-height: 44px;
  background: #ffffff;
  border-color: #e3e5e7;
  border-radius: var(--auth-control-radius);
  box-shadow: var(--shadow-input);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.auth-form-login .auth-field > label {
  font-size: 15px;
}

.auth-field input:focus {
  border-color: rgba(251, 114, 153, 0.56);
  box-shadow:
    var(--shadow-input),
    0 0 0 4px rgba(251, 114, 153, 0.12);
}

.auth-input-stack {
  display: grid;
  gap: 14px;
  margin: 22px 0 16px;
}

.auth-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.password-field {
  position: relative;
}

.password-input-shell {
  position: relative;
}

.password-input-shell input {
  padding-right: 70px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  min-height: 30px;
  padding: 0 10px;
  color: #61666d;
  border-radius: 999px;
  background: #f1f2f3;
  font-size: 12px;
  font-weight: 800;
  transform: translateY(-50%);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.password-toggle:hover {
  color: #008ac5;
  background: #e8f8ff;
}

.auth-submit-btn {
  position: relative;
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  overflow: hidden;
  border-radius: var(--auth-control-radius);
}

.auth-submit-btn[aria-busy="true"] {
  box-shadow: 0 8px 18px rgba(251, 114, 153, 0.18);
}

.auth-gradient-btn {
  background: linear-gradient(110deg, var(--pink), var(--red) 58%, var(--coral));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    0 12px 26px rgba(251, 114, 153, 0.22);
}

.auth-submit-label,
.auth-submit-spinner {
  position: relative;
  z-index: 1;
}

.auth-bottom-gradient {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: block;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bili-blue), var(--pink), transparent);
  opacity: 0.45;
  transition: opacity 0.22s ease;
}

.auth-bottom-gradient-blur {
  inset-inline: 44px;
  bottom: -1px;
  height: 2px;
  filter: blur(4px);
  opacity: 0;
}

.auth-gradient-btn:hover .auth-bottom-gradient {
  opacity: 1;
}

.auth-divider {
  position: relative;
  display: grid;
  place-items: center;
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(90deg, transparent, #d9dde4, transparent);
}

.auth-divider span {
  padding: 0 10px;
  color: #8a929b;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.auth-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.46);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: authSpin 0.72s linear infinite;
}

.auth-form.is-submitting .auth-submit-spinner {
  display: inline-block;
}

.auth-form.is-submitting .auth-submit-label {
  opacity: 0.88;
}

.auth-form-prefilled .auth-field input {
  border-color: rgba(0, 174, 236, 0.58);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 174, 236, 0.1);
}

.auth-helper {
  margin: 0;
  color: #7b828a;
  font-size: 12px;
  line-height: 1.55;
}

@keyframes authPanelEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes authFormEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 620px) {
  .auth-panel {
    padding: 18px;
  }

  .auth-two-col {
    grid-template-columns: 1fr;
  }

}

/* Soft Future Gateway auth redesign */
:root {
  --auth-panel-radius: 28px;
  --auth-control-radius: 16px;
  --auth-soft-radius: 18px;
  --auth-pink: #fb4b87;
  --auth-pink-deep: #e52f68;
  --auth-cyan: #34c9f3;
  --auth-ink: #1f2430;
  --auth-muted: #6f7580;
  --shadow-input:
    0 2px 3px -1px rgba(31, 36, 48, 0.1),
    0 1px 0 0 rgba(255, 255, 255, 0.86),
    0 0 0 1px rgba(31, 36, 48, 0.08);
}

body:has(.auth-gateway) {
  background: transparent;
}

body:has(.auth-gateway)::before {
  opacity: 0;
}

.auth-gateway {
  position: relative;
  isolation: isolate;
  width: min(1360px, calc(100% - 72px));
  min-height: 100vh;
  padding: 42px 0 54px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 476px);
  gap: 48px;
}

.auth-gateway::before,
.auth-gateway::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.auth-gateway::before {
  content: none;
  display: none;
  background: none;
}

.auth-gateway::after {
  right: -180px;
  bottom: -210px;
  z-index: -1;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(251, 75, 135, 0.14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 75, 135, 0.12), transparent 68%);
}

.auth-gateway-art {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  object-position: center right;
  opacity: 0.82;
  pointer-events: none;
}

.auth-gateway .hero-copy {
  z-index: 1;
  max-width: 780px;
  padding: 0 0 12px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  margin-bottom: 78px;
}

.brand-logo-image {
  display: block;
  width: clamp(240px, 25vw, 342px);
  height: auto;
  object-fit: contain;
}

.auth-gateway .hero-badge {
  margin: 0 0 22px;
  padding: 8px 14px;
  color: var(--auth-pink-deep);
  border-color: rgba(251, 75, 135, 0.18);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 34px rgba(251, 75, 135, 0.09);
  font-size: 13px;
  font-weight: 900;
}

.hero-copy .hero-type-title {
  width: min(760px, 100%);
  margin: 0;
  color: var(--auth-ink);
  background: none;
  text-shadow: 0 18px 42px rgba(251, 75, 135, 0.12);
  font-size: 62px;
  line-height: 1.14;
  letter-spacing: 0;
}

.split-parent {
  display: inline-block;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  will-change: transform, opacity;
}

.hero-split-title.split-parent {
  display: block;
  overflow: visible;
  text-align: left;
}

.hero-title-line {
  display: block;
  min-height: 1.14em;
  overflow: hidden;
}

.hero-type-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  overflow: visible;
  vertical-align: bottom;
  white-space: normal;
  color: inherit;
  background: none;
  animation: none;
  -webkit-text-fill-color: currentColor;
}

.hero-type-text.split-word {
  gap: 0;
}

.split-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--split-index) * 55ms);
  will-change: transform, opacity;
}

.split-parent.is-visible .split-char {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero-type-name {
  color: var(--auth-ink);
}

.hero-type-system {
  color: var(--auth-pink);
}

.hero-copy .hero-lead {
  width: min(620px, 100%);
  margin: 24px 0 0;
  color: #717783;
  font-size: 16px;
  line-height: 1.9;
}

.shiny-text {
  --shiny-color: #717783;
  --shiny-shine-color: #ffffff;
  --shiny-spread: 120deg;
  --shiny-speed: 2s;
  --shiny-delay: 0.55s;
  display: inline-block;
  max-width: 100%;
  color: var(--shiny-color);
  background-image: linear-gradient(
    var(--shiny-spread),
    var(--shiny-color) 0%,
    var(--shiny-color) 35%,
    var(--shiny-shine-color) 50%,
    var(--shiny-color) 65%,
    var(--shiny-color) 100%
  );
  background-size: 200% auto;
  background-position: 150% center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shinyTextSweep calc(var(--shiny-speed) + var(--shiny-delay)) linear infinite;
}

.hero-lead-shiny {
  --shiny-spread: 120deg;
  white-space: normal;
}

@keyframes shinyTextSweep {
  0%,
  12% {
    background-position: 150% center;
  }

  82%,
  100% {
    background-position: -50% center;
  }
}

.hero-stats {
  width: min(620px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.hero-stats .stat {
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 38px rgba(31, 36, 48, 0.08);
  backdrop-filter: blur(20px);
  animation: heroStatFloatIn 0.42s ease both;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.hero-stats .stat:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 75, 135, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 46px rgba(251, 75, 135, 0.12);
}

.hero-stats .stat strong {
  color: var(--auth-pink);
  font-size: 24px;
  line-height: 1.1;
}

.hero-stats .stat span {
  margin-top: 8px;
  color: #7a808b;
  font-size: 13px;
  line-height: 1.35;
}

.hero-ribbons {
  display: block;
  width: min(760px, 100%);
  margin-top: 52px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-ribbons::before {
  display: none;
}

.hero-ribbons h2 {
  margin: 0 0 20px;
  color: var(--auth-ink);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.hero-flow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.hero-flow-track::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(251, 75, 135, 0.14), rgba(52, 201, 243, 0.32), rgba(251, 75, 135, 0.14));
}

.hero-ribbons span {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 7px;
  justify-items: center;
  min-width: 0;
  padding: 0;
  color: var(--auth-ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transition: color 0.18s ease;
}

.hero-ribbons span::before {
  content: none;
  display: none;
}

.auth-gateway .hero-ribbons span:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.hero-ribbons i {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 0 4px;
  color: var(--auth-pink);
  border: 1px solid rgba(251, 75, 135, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 14px 30px rgba(31, 36, 48, 0.1);
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.hero-ribbons span:hover i {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, #ff6da0, var(--auth-pink) 58%, var(--auth-cyan));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.48) inset,
    0 18px 34px rgba(251, 75, 135, 0.24);
}

.hero-ribbons b {
  color: var(--auth-ink);
  font-size: 14px;
  line-height: 1.3;
  transition: color 0.18s ease;
}

.hero-ribbons span:hover b {
  color: var(--auth-pink-deep);
}

.hero-ribbons small {
  color: #858b96;
  font-size: 12px;
  line-height: 1.45;
  transition: color 0.18s ease;
}

.hero-ribbons span:hover small {
  color: #68707b;
}

.auth-panel {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 476px;
  padding: 42px 48px 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--auth-panel-radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 30px 80px rgba(52, 47, 74, 0.13);
  backdrop-filter: blur(24px);
  animation: authPanelEnter 0.34s ease both;
}

.auth-panel:not(.auth-border-glow)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 75, 135, 0.52), rgba(52, 201, 243, 0.36), transparent);
}

.auth-panel.auth-border-glow {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: var(--auth-panel-radius);
  --glow-padding: 34px;
  --cone-spread: 25;
  --fill-opacity: 0.22;
  --card-bg: rgba(255, 255, 255, 0.82);
  --glow-color: hsl(332deg 94% 70% / 92%);
  --glow-color-60: hsl(332deg 94% 70% / 55%);
  --glow-color-50: hsl(332deg 94% 70% / 46%);
  --glow-color-40: hsl(332deg 94% 70% / 36%);
  --glow-color-30: hsl(332deg 94% 70% / 28%);
  --glow-color-20: hsl(332deg 94% 70% / 18%);
  --glow-color-10: hsl(332deg 94% 70% / 10%);
  --gradient-one: radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #f472b6 0px, transparent 50%);
  --gradient-base: linear-gradient(#f472b6 0 100%);
  overflow: visible;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  border-color: rgba(255, 255, 255, 0.5);
  background: var(--card-bg);
}

.auth-panel.auth-border-glow::before,
.auth-panel.auth-border-glow::after,
.auth-panel.auth-border-glow > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

.auth-panel.auth-border-glow::before {
  z-index: 0;
  height: auto;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity: max(0.2, calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))));
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

.auth-panel.auth-border-glow::after {
  z-index: 0;
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
}

.auth-panel.auth-border-glow > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
}

.auth-panel.auth-border-glow > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.border-glow-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.auth-panel.auth-card-axis-flip {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform, opacity, box-shadow;
}

.auth-panel.auth-card-axis-flip-out {
  pointer-events: none;
}

.auth-panel.auth-card-axis-flip-out-to-internal {
  animation: authCardAxisFlipOutToInternal 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}

.auth-panel.auth-card-axis-flip-out-to-customer {
  animation: authCardAxisFlipOutToCustomer 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}

.auth-panel.auth-card-axis-flip-in-to-internal {
  animation: authCardAxisFlipInToInternal 0.32s cubic-bezier(0.22, 0.78, 0.24, 1) both;
}

.auth-panel.auth-card-axis-flip-in-to-customer {
  animation: authCardAxisFlipInToCustomer 0.32s cubic-bezier(0.22, 0.78, 0.24, 1) both;
}

.auth-panel.auth-card-axis-flip .auth-form {
  animation: none;
}

@keyframes authCardAxisFlipOutToInternal {
  0% {
    opacity: 1;
    transform: perspective(1600px) rotateY(0) scale(1);
    box-shadow: 0 30px 80px rgba(52, 47, 74, 0.13);
  }

  100% {
    opacity: 0.35;
    transform: perspective(1600px) rotateY(-90deg) scale(0.985);
    box-shadow: 18px 28px 70px rgba(52, 47, 74, 0.08);
  }
}

@keyframes authCardAxisFlipInToInternal {
  0% {
    opacity: 0.35;
    transform: perspective(1600px) rotateY(90deg) scale(0.985);
    box-shadow: -18px 28px 70px rgba(52, 47, 74, 0.08);
  }

  100% {
    opacity: 1;
    transform: perspective(1600px) rotateY(0) scale(1);
    box-shadow: 0 30px 80px rgba(52, 47, 74, 0.13);
  }
}

@keyframes authCardAxisFlipOutToCustomer {
  0% {
    opacity: 1;
    transform: perspective(1600px) rotateY(0) scale(1);
    box-shadow: 0 30px 80px rgba(52, 47, 74, 0.13);
  }

  100% {
    opacity: 0.35;
    transform: perspective(1600px) rotateY(90deg) scale(0.985);
    box-shadow: -18px 28px 70px rgba(52, 47, 74, 0.08);
  }
}

@keyframes authCardAxisFlipInToCustomer {
  0% {
    opacity: 0.35;
    transform: perspective(1600px) rotateY(-90deg) scale(0.985);
    box-shadow: 18px 28px 70px rgba(52, 47, 74, 0.08);
  }

  100% {
    opacity: 1;
    transform: perspective(1600px) rotateY(0) scale(1);
    box-shadow: 0 30px 80px rgba(52, 47, 74, 0.13);
  }
}

.auth-tabs {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 58px;
  margin-bottom: 36px;
  padding: 0 0 2px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(31, 36, 48, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto auto -1px 0;
  width: 50%;
  height: 2px;
  border-radius: 999px;
  background: var(--auth-pink);
  box-shadow: 0 8px 22px rgba(251, 75, 135, 0.28);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-tabs.is-register::before {
  transform: translateX(100%);
}

.auth-tabs button {
  position: relative;
  z-index: 1;
  min-height: 56px;
  padding: 0 10px;
  color: #737984;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
  font-weight: 900;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.auth-tabs button.active {
  color: var(--auth-pink);
  background: transparent;
  box-shadow: none;
}

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

.auth-panel-heading {
  margin: 0 0 24px;
}

.auth-panel-heading span {
  display: block;
  margin-bottom: 9px;
  color: var(--auth-cyan);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.auth-panel-heading h2 {
  margin: 0;
  color: var(--auth-ink);
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: 0;
}

.auth-panel-heading p {
  margin: 9px 0 0;
  color: #7b818c;
  font-size: 14px;
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 0;
  animation: authFormEnter 0.24s ease both;
}

.auth-form .field {
  margin: 0;
}

.auth-input-stack {
  display: grid;
  gap: 18px;
  margin: 0 0 28px;
}

.auth-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.auth-field label,
.auth-form-login .auth-field > label {
  color: #2f3440;
  font-size: 15px;
  font-weight: 900;
}

.auth-field input {
  max-width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0 16px;
  color: var(--auth-ink);
  border: 1px solid rgba(31, 36, 48, 0.14);
  border-radius: var(--auth-control-radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.auth-field input::placeholder {
  color: #a0a6b0;
}

.auth-field input:focus {
  border-color: rgba(251, 75, 135, 0.58);
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(251, 75, 135, 0.22),
    0 0 0 2px rgba(251, 75, 135, 0.1);
}

.auth-field.has-error input {
  border-color: rgba(251, 75, 135, 0.66);
  background: rgba(255, 253, 254, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(251, 75, 135, 0.2),
    0 12px 28px rgba(251, 75, 135, 0.12);
}

.auth-field-error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 0;
  padding: 7px 10px;
  border: 1px solid rgba(251, 75, 135, 0.18);
  border-radius: 999px;
  color: #be245b;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 241, 247, 0.86));
  box-shadow: 0 12px 28px rgba(251, 75, 135, 0.1);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  animation: auth-field-hint-in 0.18s ease both;
}

.auth-field-error::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--auth-pink);
  box-shadow: 0 0 0 4px rgba(251, 75, 135, 0.12);
}

.password-field {
  position: relative;
}

.password-input-shell {
  position: relative;
}

.password-input-shell input {
  padding-right: 72px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  min-width: 50px;
  min-height: 34px;
  padding: 0 12px;
  color: #6d7480;
  border-radius: 999px;
  background: rgba(244, 247, 250, 0.95);
  font-size: 12px;
  font-weight: 900;
  transform: translateY(-50%);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.password-toggle:hover {
  color: #008ac5;
  background: #e8f8ff;
}

.auth-submit-btn {
  position: relative;
  width: 100%;
  min-height: 58px;
  margin-top: 0;
  overflow: hidden;
  border-radius: var(--auth-control-radius);
  font-size: 18px;
  font-weight: 950;
}

.auth-submit-btn[aria-busy="true"] {
  box-shadow: 0 16px 36px rgba(251, 75, 135, 0.24);
}

.auth-gradient-btn {
  color: #ffffff;
  background: linear-gradient(110deg, #ff6da0, var(--auth-pink) 54%, var(--auth-pink-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 18px 40px rgba(251, 75, 135, 0.24);
}

.lit-border-btn {
  --lit-border-radius: var(--auth-control-radius);
  --lit-border-inner-radius: calc(var(--lit-border-radius) - 3px);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
  border: 0;
  border-radius: var(--lit-border-radius);
  color: #ffffff;
  background: transparent;
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.18);
}

.lit-border-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  pointer-events: none;
}

.lit-border-fill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  min-height: 100%;
  border-radius: var(--lit-border-inner-radius);
  color: #ffffff;
  background: #050509;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.lit-border-btn:hover .lit-border-fill {
  background: transparent;
}

.lit-border-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

.auth-submit-btn.lit-border-btn {
  align-items: stretch;
  background: transparent;
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.2);
}

.auth-submit-btn.lit-border-btn .lit-border-fill {
  min-height: 52px;
  padding: 0 32px;
}

.auth-form-login .auth-submit-btn.auth-gradient-btn {
  background: var(--auth-pink);
}

.auth-submit-label,
.auth-submit-spinner {
  position: relative;
  z-index: 1;
}

.auth-bottom-gradient {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: block;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--auth-cyan), #ffffff, transparent);
  opacity: 0.68;
  transition: opacity 0.22s ease;
}

.auth-bottom-gradient-blur {
  inset-inline: 44px;
  bottom: -1px;
  height: 2px;
  filter: blur(4px);
  opacity: 0;
}

.auth-gradient-btn:hover .auth-bottom-gradient {
  opacity: 1;
}

.auth-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.46);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: authSpin 0.72s linear infinite;
}

.auth-form.is-submitting .auth-submit-spinner {
  display: inline-block;
}

.auth-form.is-submitting .auth-submit-label {
  opacity: 0.88;
}

.auth-helper {
  margin: 18px 0 0;
  color: #858b96;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.auth-panel:has(.auth-form-register) {
  padding: 32px 44px 34px;
}

.auth-panel:has(.auth-register-review) {
  padding: 34px 46px 36px;
}

.auth-panel:has(.auth-form-register) .auth-tabs {
  min-height: 50px;
  margin-bottom: 22px;
}

.auth-panel:has(.auth-form-register) .auth-tabs button {
  min-height: 48px;
}

.auth-form-register .auth-panel-heading {
  margin-bottom: 16px;
}

.auth-form-register .auth-panel-heading h2 {
  font-size: 27px;
}

.auth-form-register .auth-panel-heading p {
  margin-top: 6px;
}

.auth-form-register .outer-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: auto;
  padding: 0;
}

.auth-form-register .step-circle-container {
  width: 100%;
  border: 1px solid rgba(251, 75, 135, 0.16);
  border-radius: 24px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 246, 250, 0.52)),
    radial-gradient(circle at 12% 0%, rgba(251, 75, 135, 0.12), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 44px rgba(251, 75, 135, 0.1);
}

.auth-form-register .step-indicator-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 2px 16px;
}

.auth-form-register .step-indicator {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  color: #7b8799;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.auth-form-register .step-indicator-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(150, 166, 190, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #8a96a8;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(101, 116, 139, 0.1);
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.auth-form-register .step-indicator:focus-visible .step-indicator-inner {
  box-shadow:
    0 0 0 4px rgba(15, 178, 255, 0.16),
    0 10px 24px rgba(251, 75, 135, 0.16);
}

.auth-form-register .step-indicator.is-active .step-indicator-inner {
  transform: translateY(-1px);
  border-color: rgba(251, 75, 135, 0.72);
  background: linear-gradient(135deg, #ff5b9d, #ed2f6b);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(251, 75, 135, 0.26);
}

.auth-form-register .step-indicator.is-complete .step-indicator-inner {
  border-color: rgba(15, 178, 255, 0.54);
  background: linear-gradient(135deg, #14c8ff, #ff5b9d);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 178, 255, 0.18);
}

.auth-form-register .active-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
}

.auth-form-register .step-indicator.is-active .active-dot {
  display: block;
}

.auth-form-register .step-indicator.is-active .step-number,
.auth-form-register .step-indicator.is-complete .step-number {
  display: none;
}

.auth-form-register .check-icon {
  display: none;
  width: 15px;
  height: 15px;
}

.auth-form-register .step-indicator.is-complete .check-icon {
  display: block;
}

.auth-form-register .step-connector {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  margin: 0 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(150, 166, 190, 0.22);
}

.auth-form-register .step-connector-inner {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #14c8ff, #ff5b9d);
  transition: width 0.28s ease;
}

.auth-form-register .step-connector.is-complete .step-connector-inner {
  width: 100%;
}

.auth-form-register .step-content-default {
  position: relative;
  overflow: hidden;
}

.auth-form-register .step-default {
  padding: 0;
  animation: auth-step-slide 0.24s ease;
}

.auth-form-register .step-default[hidden] {
  display: none;
}

.auth-step-copy {
  margin-bottom: 13px;
}

.auth-step-copy span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: var(--auth-pink-deep);
  background: rgba(255, 236, 245, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.auth-step-copy h3 {
  margin: 0;
  color: #202a3a;
  font-size: 20px;
  line-height: 1.22;
}

.auth-step-copy p {
  margin: 5px 0 0;
  color: #758194;
  font-size: 12px;
  line-height: 1.58;
}

.auth-form-register .footer-container {
  padding: 16px 0 0;
}

.auth-form-register .footer-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
}

.auth-form-register .footer-nav.spread {
  justify-content: space-between;
}

.auth-form-register .footer-nav.end {
  justify-content: flex-end;
}

.auth-form-register .back-button,
.auth-form-register .next-button {
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 900;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.auth-form-register .back-button {
  color: #667184;
  border: 1px solid rgba(150, 166, 190, 0.3);
  background: rgba(255, 255, 255, 0.72);
}

.auth-form-register .next-button {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5b9d, #ed2f6b);
  box-shadow: 0 14px 30px rgba(251, 75, 135, 0.24);
}

.auth-form-register .next-button.lit-border-btn {
  --lit-border-radius: 999px;
  min-height: 44px;
  padding: 3px;
  background: transparent;
  box-shadow: 0 14px 30px rgba(99, 102, 241, 0.2);
}

.auth-form-register .next-button.lit-border-btn .lit-border-fill {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: #5757ff;
}

.auth-form-register .back-button:hover,
.auth-form-register .next-button:hover {
  transform: translateY(-1px);
}

.auth-form-register .auth-step-submit {
  width: auto;
  min-width: 180px;
  min-height: 48px;
  margin-top: 0;
}

.auth-form-register .auth-step-submit.lit-border-btn .lit-border-fill {
  min-height: 42px;
  padding: 0 26px;
}

.auth-form-register .back-button[hidden],
.auth-form-register .next-button[hidden],
.auth-form-register .auth-step-submit[hidden] {
  display: none;
}

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

.auth-role-option {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1px solid rgba(150, 166, 190, 0.36);
  border-radius: var(--auth-control-radius);
  color: #667184;
  background: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.auth-role-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.auth-role-option:has(input:checked) {
  border-color: rgba(251, 75, 135, 0.56);
  color: var(--auth-pink-deep);
  background: rgba(255, 246, 250, 0.94);
  box-shadow: 0 12px 28px rgba(251, 75, 135, 0.13);
}

.auth-form-register .auth-input-stack {
  gap: 12px;
  margin-bottom: 20px;
  min-width: 0;
}

.auth-form-register .auth-field {
  gap: 5px;
  min-width: 0;
}

.auth-form-register .auth-field input {
  min-height: 44px;
  padding-inline: 13px;
  font-size: 14px;
}

.auth-form-register #registerCompany {
  display: block;
  width: 75%;
  margin-inline: auto;
}

.auth-form-register .auth-field:has(#registerCompany) .auth-field-error {
  margin-inline: auto;
}

.auth-form-register .password-toggle {
  right: 7px;
  min-height: 28px;
  padding-inline: 10px;
}

.auth-form-register .auth-submit-btn {
  min-height: 52px;
}

.auth-form-register .auth-helper {
  margin-top: 12px;
}

@keyframes auth-step-slide {
  from {
    transform: translateX(18px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes auth-field-hint-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.auth-register-review {
  text-align: center;
}

.auth-review-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(251, 75, 135, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 52px rgba(251, 75, 135, 0.12);
}

.auth-review-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}

.auth-review-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  font-weight: 1000;
  box-shadow: 0 12px 26px rgba(34, 197, 94, 0.24);
}

.auth-review-summary strong {
  display: block;
  color: #172033;
  font-size: 17px;
}

.auth-review-summary p,
.auth-review-tip {
  margin: 4px 0 0;
  color: #737d8d;
  font-size: 13px;
  line-height: 1.55;
}

.auth-review-qr {
  width: min(190px, 52vw);
  aspect-ratio: 1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.84),
    0 20px 42px rgba(23, 32, 51, 0.12);
}

.auth-review-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.auth-review-reset {
  min-height: 42px;
}

.click-confetti {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
}

.click-confetti-piece {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 13px;
  border-radius: 3px;
  background: var(--color);
  opacity: 0;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.16);
  transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.9);
  animation: clickConfettiBurst var(--duration) cubic-bezier(0.19, 1, 0.22, 1) var(--delay) forwards;
  will-change: transform, opacity;
}

.click-confetti-piece:nth-child(3n) {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.click-confetti-piece:nth-child(4n) {
  width: 5px;
  height: 16px;
}

@keyframes clickConfettiBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.82);
  }

  12% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.72);
  }
}

/* Right-pinned catalog quote and action columns */
.rate-table {
  --rate-quote-col-width: 146px;
  --rate-action-col-width: 118px;
}

.rate-table th.quote-col,
.rate-table td.quote-col {
  width: var(--rate-quote-col-width);
  min-width: var(--rate-quote-col-width);
  max-width: var(--rate-quote-col-width);
}

.rate-table th.rate-action-col,
.rate-table td.rate-action-col {
  width: var(--rate-action-col-width);
  min-width: var(--rate-action-col-width);
  max-width: var(--rate-action-col-width);
  padding-inline: 6px;
}

.rate-table th.sticky-col-right,
.rate-table td.sticky-col-right {
  position: sticky;
  background: #ffffff;
  z-index: 5;
  background-clip: padding-box;
}

.rate-table th.sticky-col-right {
  top: 0;
  background: #f7f8fa;
  z-index: 7;
}

.rate-table .rate-action-col {
  right: 0;
}

.rate-table .implant-quote-col {
  right: var(--rate-action-col-width);
}

.rate-table .custom-quote-col {
  right: calc(var(--rate-action-col-width) + var(--rate-quote-col-width));
  box-shadow: -12px 0 22px rgba(24, 25, 28, 0.05);
}

.talent-row:hover td.sticky-col-right {
  background: #fff9fb;
}

@media (max-width: 840px) {
  .rate-table th.sticky-col-right,
  .rate-table td.sticky-col-right {
    position: static;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .click-confetti-piece {
    animation-duration: 520ms;
  }
}

@media (max-width: 1200px) and (min-width: 1081px) {
  .auth-gateway {
    width: min(100% - 36px, 1120px);
    grid-template-columns: minmax(0, 1fr) minmax(400px, 440px);
    gap: 28px;
    padding: 26px 0 34px;
  }

  .auth-panel:has(.auth-form-register) {
    padding: 24px 34px 26px;
  }

  .auth-panel:has(.auth-form-register) .auth-tabs {
    min-height: 44px;
    margin-bottom: 14px;
  }

  .auth-panel:has(.auth-form-register) .auth-tabs button {
    min-height: 42px;
  }

  .auth-form-register .auth-panel-heading {
    margin-bottom: 10px;
  }

  .auth-form-register .auth-panel-heading h2 {
    font-size: 24px;
  }

  .auth-form-register .auth-panel-heading p {
    margin-top: 4px;
    font-size: 13px;
  }

  .auth-role-option {
    min-height: 40px;
  }

  .auth-form-register .auth-input-stack {
    gap: 8px;
    margin-bottom: 14px;
  }

  .auth-form-register .auth-field input {
    min-height: 42px;
  }

  .auth-form-register .password-toggle {
    min-height: 28px;
  }

  .auth-form-register .auth-submit-btn {
    min-height: 48px;
  }

  .auth-form-register .auth-helper {
    margin-top: 8px;
    font-size: 12px;
  }
}

/* Workbench and collaboration flow extensions */
.client-workbench {
  display: grid;
  gap: 18px;
}

.workbench-command-center {
  display: grid;
  gap: 18px;
}

.client-workbench-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.workbench-command-hero {
  grid-template-columns: 1fr;
}

.workbench-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 36%);
  align-items: center;
  gap: 26px;
  min-height: 224px;
  padding: 28px 32px;
  overflow: hidden;
  border-color: rgba(251, 114, 153, 0.18);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.96), rgba(255, 242, 247, 0.86) 50%, rgba(232, 248, 255, 0.78)),
    #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 18px 42px rgba(24, 25, 28, 0.08);
}

.workbench-banner h2 {
  margin: 8px 0 10px;
  color: #18191c;
  font-size: 34px;
  line-height: 1.18;
}

.workbench-banner p {
  max-width: 620px;
  margin: 0 0 16px;
  color: #61666d;
  line-height: 1.7;
}

.workbench-banner img {
  width: 100%;
  height: clamp(160px, 20vw, 220px);
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 36px rgba(24, 25, 28, 0.12);
}

.workbench-banner img[src$="new-infinite-logo.jpg"] {
  padding: 18px;
  object-fit: contain;
}

.workbench-command-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.business-dashboard .workbench-stat-card {
  min-height: 82px;
  gap: 6px 10px;
  padding: 14px 16px;
}

.business-dashboard .workbench-stat-card .dashboard-card-head h2 {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-dashboard .workbench-stat-card strong {
  font-size: 28px;
}

.business-dashboard .workbench-stat-card .plain-btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.workbench-stat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: space-between;
  align-items: end;
  gap: 10px 14px;
  min-height: 104px;
  padding: 18px 20px;
}

.workbench-stat-card strong {
  grid-column: 1;
  color: #18191c;
  font-size: 32px;
  line-height: 1;
}

.workbench-stat-card .dashboard-card-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.workbench-stat-card .plain-btn {
  grid-column: 2;
  grid-row: 2;
}

.business-talent-modal {
  width: min(760px, calc(100vw - 36px));
}

.business-talent-form {
  display: grid;
  gap: 14px;
}

.business-talent-form .notice {
  margin: 0;
  border-color: #d9eef8;
  color: #4f6f80;
  background: #f5fbfe;
}

.client-workbench-main {
  align-items: start;
}

.workbench-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 18px;
  align-items: start;
}

.workbench-command-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.workbench-priority-panel,
.workbench-package-section,
.workbench-case-rail {
  display: grid;
  align-content: start;
  gap: 14px;
  align-self: stretch;
  padding: 18px;
  border-color: rgba(230, 240, 247, 0.92);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(24, 25, 28, 0.06);
}

.workbench-priority-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.workbench-priority-panel .workbench-section-head {
  align-items: center;
  gap: 12px;
}

.workbench-priority-panel .workbench-section-head h2 {
  font-size: 22px;
}

.workbench-priority-panel .workbench-section-head p {
  margin-top: 2px;
  line-height: 1.25;
}

.workbench-package-section {
  display: grid;
}

.workbench-case-rail {
  display: grid;
  align-self: start;
}

.workbench-section-head {
  margin-bottom: 0;
}

.workbench-section-head p {
  margin: 4px 0 0;
  color: #7d8793;
  font-size: 12px;
  line-height: 1.45;
}

.workbench-package-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: 14px;
  align-items: start;
}

.workbench-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.workbench-action-grid button {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-height: 84px;
  padding: 14px;
  border: 1px solid #e3edf5;
  border-radius: 8px;
  color: #4d535a;
  background: #fbfcfd;
  text-align: left;
}

.workbench-action-grid button:hover {
  border-color: #bdeaff;
  background: #f3fbff;
}

.workbench-priority-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}

.workbench-action-grid .workbench-priority-action {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.workbench-priority-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 161, 214, 0.08);
}

.workbench-action-token {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(251, 114, 153, 0.28);
  border-radius: 999px;
  color: #fb4b78;
  background: #fff4f8;
  font-size: 12px;
  font-weight: 900;
}

.workbench-action-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workbench-priority-action .workbench-action-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-priority-action em {
  color: #7d8793;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  justify-self: start;
  white-space: nowrap;
}

.workbench-priority-action b {
  color: #008ac5;
  font-size: 12px;
  justify-self: start;
  white-space: nowrap;
}

.workbench-action-grid strong {
  color: #18191c;
}

.workbench-action-grid span,
.workbench-package-list span {
  color: #7d8793;
  font-size: 12px;
  line-height: 1.45;
}

.workbench-task-card h3,
.workbench-content-grid h3 {
  margin: 16px 0 10px;
  color: #18191c;
  font-size: 16px;
}

.workbench-package-list {
  display: grid;
  gap: 10px;
}

.workbench-package-row {
  min-width: 0;
}

.opportunity-package-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.opportunity-package-card {
  --folder-color: #3b82f6;
}

.workbench-opportunity-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--folder-color, #3b82f6) 28%, #e6f0f7 72%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.94)),
    #ffffff;
}

.workbench-opportunity-topline,
.workbench-opportunity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.workbench-opportunity-topline {
  align-items: flex-start;
  flex-wrap: wrap;
}

.workbench-opportunity-topline h3 {
  flex: 1 1 180px;
  margin: 0;
  overflow-wrap: anywhere;
  color: #18191c;
  font-size: 16px;
  line-height: 1.35;
}

.workbench-opportunity-count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fb4b78;
  background: #fff2f7;
  font-size: 12px;
  font-weight: 900;
}

.workbench-opportunity-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.workbench-opportunity-main p,
.workbench-opportunity-main span,
.workbench-opportunity-footer small {
  margin: 0;
  min-width: 0;
  color: #7d8793;
  font-size: 12px;
  line-height: 1.5;
}

.workbench-opportunity-main p,
.workbench-opportunity-main span {
  overflow-wrap: anywhere;
}

.workbench-opportunity-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.workbench-opportunity-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 22px;
  padding: 3px 4px;
  border: 1px solid #e6f0f7;
  border-radius: 7px;
  color: #7d8793;
  background: #f8fbff;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
}

.workbench-opportunity-step i {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  color: #8b96a3;
  background: #eef4fa;
  font-style: normal;
  font-size: 8px;
  font-weight: 900;
}

.workbench-opportunity-step b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-opportunity-step.active {
  border-color: color-mix(in srgb, var(--folder-color, #3b82f6) 26%, #dbeafe 74%);
  color: #263241;
  background: #ffffff;
}

.workbench-opportunity-step.active i {
  color: #ffffff;
  background: linear-gradient(135deg, var(--folder-color, #3b82f6), #00aeec);
}

.workbench-opportunity-step.current {
  border-color: rgba(251, 114, 153, 0.36);
  background: #fff7fa;
  box-shadow: 0 8px 18px rgba(251, 114, 153, 0.08);
}

.workbench-opportunity-step.current b {
  color: #fb4b78;
}

.workbench-opportunity-footer small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-opportunity-footer-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.workbench-opportunity-section .opportunity-package-card {
  grid-template-columns: minmax(128px, 150px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
}

.workbench-opportunity-section .react-bits-folder-visual-wrap {
  align-self: start;
}

.workbench-opportunity-section .opportunity-package-main {
  min-width: 0;
}

.workbench-opportunity-section .opportunity-package-actions {
  grid-column: 1 / -1;
  border-top: 1px solid #e6f0f7;
  border-left: 0;
  padding: 10px 0 0;
}

.opportunity-package-main .react-bits-folder-title-row p {
  margin: 4px 0 0;
  color: #7d8793;
  font-size: 13px;
}

.opportunity-package-empty {
  margin: 4px;
  padding: 22px;
}

.opportunity-count-total strong {
  color: #00a1d6;
}

.workbench-package-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.content-manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.workbench-package-list article:hover {
  border-color: #cfefff;
  background: #f8fcff;
}

.workbench-package-list strong,
.content-manage-row strong {
  display: block;
  color: #18191c;
}

.workbench-package-list .pill {
  justify-self: end;
  white-space: nowrap;
}

.content-manage-row span {
  display: block;
  margin-top: 4px;
  color: #7d8793;
  font-size: 12px;
}

.marketing-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.workbench-case-rail {
  position: sticky;
  top: 92px;
}

.workbench-case-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.marketing-case-card {
  overflow: hidden;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.workbench-case-rail .marketing-case-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: stretch;
}

.marketing-case-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.marketing-case-card img[src$="new-infinite-logo.jpg"] {
  padding: 10px;
  object-fit: contain;
  background: #ffffff;
}

.workbench-case-rail .marketing-case-card img {
  height: 100%;
  min-height: 118px;
  aspect-ratio: auto;
}

.marketing-case-card > div {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.marketing-case-card span {
  color: #fb5d7a;
  font-size: 12px;
  font-weight: 900;
}

.marketing-case-card strong {
  color: #18191c;
  line-height: 1.35;
}

.marketing-case-card p {
  margin: 0;
  color: #61666d;
  font-size: 13px;
  line-height: 1.6;
}

.bili-popular-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid #eef0f2;
}

.bili-popular-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.bili-popular-head span {
  color: #fb5d7a;
  font-size: 12px;
  font-weight: 900;
}

.bili-popular-head h3 {
  margin: 3px 0 2px;
  color: #18191c;
  font-size: 20px;
}

.bili-popular-head p {
  margin: 0;
  color: #7d8793;
  font-size: 12px;
}

.bili-popular-list {
  display: grid;
  gap: 9px;
  max-height: min(62vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0 4px 2px 0;
  scrollbar-gutter: stable;
  list-style: none;
}

.bili-popular-list::-webkit-scrollbar {
  width: 6px;
}

.bili-popular-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d8e5ef;
}

.bili-popular-list::-webkit-scrollbar-track {
  background: transparent;
}

.bili-popular-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.bili-popular-rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #7d8793;
  background: #f4f7fa;
  font-size: 12px;
  font-weight: 900;
}

.bili-popular-rank.medal {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  font-size: 13px;
  isolation: isolate;
}

.bili-popular-rank.medal::before {
  content: "";
  position: absolute;
  inset: 4px 5px 12px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  filter: blur(0.2px);
}

.bili-popular-rank.medal::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: -1;
  width: 14px;
  height: 11px;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  opacity: 0.88;
}

.bili-popular-rank.gold {
  color: #6b4300;
  background: radial-gradient(circle at 32% 24%, #fff9c8 0, #ffe27a 34%, #f4b935 66%, #b97512 100%);
  box-shadow: 0 8px 18px rgba(236, 177, 35, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.bili-popular-rank.gold::after {
  background: linear-gradient(135deg, #f8c756, #b97512);
}

.bili-popular-rank.silver {
  color: #4f5f71;
  background: radial-gradient(circle at 32% 24%, #ffffff 0, #e8eef6 34%, #b9c7d8 68%, #8192a7 100%);
  box-shadow: 0 8px 18px rgba(139, 158, 181, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.bili-popular-rank.silver::after {
  background: linear-gradient(135deg, #d8e2ee, #8d9daf);
}

.bili-popular-rank.bronze {
  color: #6f3518;
  background: radial-gradient(circle at 32% 24%, #ffe1bf 0, #d98d47 40%, #a95c29 72%, #7a3416 100%);
  box-shadow: 0 8px 18px rgba(174, 92, 42, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.bili-popular-rank.bronze::after {
  background: linear-gradient(135deg, #d7894a, #7a3416);
}

.bili-popular-item.is-podium a {
  border-color: rgba(248, 199, 86, 0.55);
  background: linear-gradient(135deg, rgba(255, 249, 231, 0.98), #ffffff 52%);
}

.bili-popular-item.is-podium.silver a {
  border-color: rgba(191, 205, 221, 0.78);
  background: linear-gradient(135deg, rgba(246, 249, 252, 0.98), #ffffff 52%);
}

.bili-popular-item.is-podium.bronze a {
  border-color: rgba(222, 154, 91, 0.56);
  background: linear-gradient(135deg, rgba(255, 244, 234, 0.98), #ffffff 52%);
}

.bili-popular-item a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  color: inherit;
  background: #ffffff;
  text-decoration: none;
}

.bili-popular-item a:hover {
  border-color: #cfefff;
  background: #f8fcff;
}

.bili-popular-item img {
  width: 72px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
  background: #eef3f8;
}

.bili-popular-item span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bili-popular-item strong,
.bili-popular-item em,
.bili-popular-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bili-popular-item strong {
  color: #18191c;
  font-size: 13px;
  line-height: 1.35;
}

.bili-popular-item em {
  color: #7d8793;
  font-size: 11px;
  font-style: normal;
}

.bili-popular-item small,
.bili-popular-state {
  color: #7d8793;
  font-size: 12px;
}

.bili-popular-state {
  padding: 14px;
  border: 1px dashed #d9e6f0;
  border-radius: 8px;
  background: #fbfcfd;
}

.bili-popular-state.error {
  color: #d22f52;
  border-color: #ffd1dc;
  background: #fff7fa;
}

.post-opportunity-page {
  display: grid;
  gap: 16px;
}

.post-opportunity-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid #dbeaf5;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.92)),
    #ffffff;
}

.post-opportunity-entry span {
  color: #008ac5;
  font-size: 12px;
  font-weight: 900;
}

.post-opportunity-entry h3 {
  margin: 4px 0 6px;
  color: #18191c;
  font-size: 20px;
}

.post-opportunity-entry p {
  margin: 0;
  color: #7d8793;
  font-size: 13px;
  line-height: 1.55;
}

.post-opportunity-entry .primary-btn {
  flex: 0 0 auto;
}

.post-opportunity-form,
.account-management-form {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.post-opportunity-form-card {
  display: grid;
  gap: 16px;
  margin-top: 4px;
  padding: 18px;
  border-color: #dbeaf5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.9)),
    #ffffff;
}

.post-opportunity-brief-studio {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-color: rgba(174, 211, 234, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.96)),
    #ffffff;
  box-shadow: 0 18px 44px rgba(31, 78, 121, 0.09);
}

.post-opportunity-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf3f8;
}

.brief-studio-hero {
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 255, 0.86)),
    #ffffff;
}

.post-opportunity-form-head span {
  color: #008ac5;
  font-size: 12px;
  font-weight: 900;
}

.post-opportunity-form-head h3 {
  margin: 4px 0 0;
  color: #18191c;
  font-size: 20px;
}

.brief-studio-hero h3 {
  color: #172033;
  font-size: 24px;
  letter-spacing: 0;
}

.brief-studio-hero p {
  max-width: 560px;
  margin: 8px 0 0;
  color: #637083;
  font-size: 13px;
  line-height: 1.65;
}

.post-opportunity-form-head small {
  color: #fb4b78;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.brief-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
  gap: 0;
}

.brief-studio-main {
  padding: 22px 24px 0;
}

.brief-section-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.brief-section-title > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #007ab0;
  font-size: 12px;
  font-weight: 900;
  background: #e8f7ff;
}

.brief-section-title h4,
.brief-studio-aside h4 {
  margin: 0;
  color: #172033;
  font-size: 18px;
  line-height: 1.3;
}

.brief-section-title p {
  margin: 5px 0 0;
  color: #7d8793;
  font-size: 12px;
  line-height: 1.55;
}

.brief-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px 16px;
}

.brief-field-grid .field input {
  min-height: 42px;
}

.brief-budget-range-field,
.brief-date-range-field {
  align-self: stretch;
}

.brief-budget-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.brief-date-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

.post-opportunity-modal .brief-date-input-row .brief-date-picker-field {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}

.post-opportunity-modal .brief-date-input-row input.hs-datepicker.brief-date-input {
  width: 100%;
  min-height: 42px;
  padding: 11px 36px 11px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.brief-budget-input-row span,
.brief-budget-input-row em,
.brief-date-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 42px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5d6b7c;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  box-shadow: none;
}

.brief-budget-input-row em {
  min-width: 20px;
}

.brief-date-separator {
  min-width: 24px;
}

.post-opportunity-modal .brief-studio-input {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #f8fbff;
  color: #172033;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.post-opportunity-modal .brief-studio-input::placeholder {
  color: #7d8793;
}

.post-opportunity-modal .brief-studio-input:focus {
  border-color: #00aeec;
  box-shadow: none;
  background: #ffffff;
}

.post-opportunity-modal .brief-studio-input:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.post-opportunity-modal .brief-studio-textarea {
  min-height: 96px;
  resize: vertical;
}

.post-opportunity-form .field {
  margin-bottom: 0;
}

.post-opportunity-form label span {
  color: #fb4b78;
}

.brief-talent-count-field,
.brief-file-field {
  align-self: stretch;
}

.brief-aligned-field {
  grid-template-rows: 18px 42px 18px;
  gap: 6px;
}

.brief-aligned-field label,
.brief-aligned-field small {
  line-height: 18px;
}

.post-opportunity-modal .brief-aligned-field .brief-studio-input,
.post-opportunity-modal .brief-aligned-field .brief-number-control,
.post-opportunity-modal .brief-aligned-field .brief-studio-file-input {
  height: 42px;
}

.brief-number-control {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #f8fbff;
  color: #172033;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.brief-number-control:focus-within {
  border-color: #00aeec;
  box-shadow: none;
  background: #ffffff;
}

.brief-number-input-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
}

.brief-number-input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #172033;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  appearance: textfield;
}

.post-opportunity-modal .post-opportunity-form .brief-number-input {
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.post-opportunity-modal .post-opportunity-form .brief-number-input:focus,
.post-opportunity-modal .post-opportunity-form .brief-number-input:focus-visible {
  outline: none;
  box-shadow: none;
  border: 0;
}

.brief-number-input::-webkit-inner-spin-button,
.brief-number-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.brief-number-actions {
  display: flex;
  align-items: stretch;
  border-left: 1px solid #dbe5ef;
}

.brief-number-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-left: 1px solid #dbe5ef;
  border-radius: 0;
  color: #44556b;
  background: #f8fbff;
  box-shadow: none;
}

.brief-number-stepper:first-child {
  border-left: 0;
}

.brief-number-stepper:hover,
.brief-number-stepper:focus {
  background: #eef8ff;
  outline: none;
}

.brief-number-stepper:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.brief-number-stepper svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brief-file-field {
  grid-column: auto;
}

.post-opportunity-form input[type="file"] {
  min-height: 54px;
  padding: 10px 12px;
  color: #6b7280;
  background: #ffffff;
}

.post-opportunity-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-weight: 800;
  background: linear-gradient(115deg, var(--red-dark), var(--red), var(--coral));
}

.post-opportunity-modal .post-opportunity-form input.brief-studio-file-input[type="file"] {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #f8fbff;
  color: #172033;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.post-opportunity-modal .post-opportunity-form input.brief-studio-file-input[type="file"]::file-selector-button {
  margin-right: 16px;
  border: 0;
  border-radius: 0;
  padding: 9px 16px;
  color: #172033;
  font-weight: 800;
  background: #ffffff;
}

.post-opportunity-modal .post-opportunity-form input.brief-studio-file-input[type="file"]:focus {
  z-index: 10;
  border-color: #00aeec;
  box-shadow: none;
  background: #ffffff;
}

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.brief-number-control:focus-within,
.folder-date-field input.hs-datepicker:focus,
.likes-panel .field input.bg-layer.border-layer-line:focus {
  box-shadow: none !important;
}

.post-opportunity-modal .post-opportunity-form input.brief-studio-file-input[type="file"]:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.brief-note-field {
  margin-top: 16px;
}

.brief-studio-aside {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px 22px 0;
  border-left: 1px solid #edf3f8;
  background:
    linear-gradient(180deg, rgba(248, 253, 255, 0.94), rgba(255, 255, 255, 0.98)),
    #ffffff;
}

.brief-aside-kicker {
  margin-bottom: 8px;
  color: #fb5d7a;
  font-size: 12px;
  font-weight: 900;
}

.brief-flow-list {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.brief-flow-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 13px 0;
  border-top: 1px solid #edf3f8;
}

.brief-flow-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.brief-flow-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #007ab0;
  font-size: 11px;
  font-weight: 900;
  background: #e8f7ff;
}

.brief-flow-list strong {
  display: block;
  color: #27364a;
  font-size: 13px;
  line-height: 1.35;
}

.brief-flow-list p,
.brief-aside-note p {
  margin: 4px 0 0;
  color: #7d8793;
  font-size: 12px;
  line-height: 1.55;
}

.brief-aside-note {
  margin-top: auto;
  padding: 18px 0 2px;
  border-top: 1px solid #edf3f8;
}

.brief-aside-note strong {
  color: #27364a;
  font-size: 13px;
}

.post-opportunity-submit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #edf3f8;
}

.post-opportunity-brief-studio .post-opportunity-submit-bar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  padding: 18px 24px;
  background: #fbfdff;
}

.post-opportunity-submit-bar span {
  color: #7d8793;
  font-size: 12px;
  line-height: 1.45;
}

.post-opportunity-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.post-opportunity-submit-bar .primary-btn {
  flex: 0 0 auto;
  min-width: 112px;
}

.post-opportunity-packages {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #eef0f2;
}

.post-opportunity-package-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-opportunity-package-list > .empty {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .post-opportunity-entry {
    align-items: stretch;
    flex-direction: column;
  }

  .post-opportunity-entry .primary-btn {
    width: 100%;
  }

  .post-opportunity-form-card {
    padding: 14px;
  }

  .post-opportunity-form-head,
  .post-opportunity-submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .brief-studio-grid {
    grid-template-columns: 1fr;
  }

  .brief-studio-main {
    padding: 18px 16px 0;
  }

  .brief-studio-aside {
    padding: 18px 16px 0;
    border-top: 1px solid #edf3f8;
    border-left: 0;
  }

  .brief-field-grid {
    grid-template-columns: 1fr;
  }

  .post-opportunity-submit-bar .primary-btn {
    width: 100%;
  }

  .post-opportunity-form-actions {
    width: 100%;
    flex-direction: column-reverse;
  }

  .post-opportunity-form-actions .primary-btn,
  .post-opportunity-form-actions .secondary-btn {
    width: 100%;
  }

  .post-opportunity-package-list {
    grid-template-columns: 1fr;
  }
}

.account-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.account-management-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-credentials-card {
  grid-column: 1 / -1;
}

.staff-accounts-management-card,
.talent-operator-board {
  grid-column: 1 / -1;
}

.admin-credentials-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.admin-credentials-summary > div {
  display: grid;
  flex: 1 1 220px;
  gap: 2px;
  min-width: 0;
}

.admin-credentials-summary small {
  color: #9499a0;
  font-size: 12px;
}

.admin-credentials-summary strong {
  overflow: hidden;
  color: #18191c;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-credentials-summary .primary-btn {
  margin-left: auto;
  white-space: nowrap;
}

.admin-credentials-modal {
  width: min(720px, calc(100% - 28px));
}

.admin-credentials-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.admin-credentials-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-credentials-form label > span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.admin-credentials-form input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid #dce7ef;
  border-radius: 8px;
  padding: 0 11px;
  color: #1f2937;
  background: #ffffff;
  outline: none;
}

.admin-credentials-form input:focus {
  border-color: var(--bili-blue);
  box-shadow: 0 0 0 3px rgba(0, 174, 236, 0.12);
}

.admin-credentials-form .primary-btn {
  min-height: 40px;
  white-space: nowrap;
}

.admin-credentials-notice {
  grid-column: 1 / -1;
  margin-top: 10px;
}

.admin-credentials-modal .admin-credentials-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-credentials-modal-actions {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.account-management-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.account-management-section-head h3 {
  margin: 0;
  color: #18191c;
  font-size: 17px;
}

.account-management-section-head p {
  margin: 4px 0 0;
  color: #7d8793;
  font-size: 12px;
}

.staff-account-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  min-width: 0;
  margin: 12px 0 2px;
  padding: 12px;
  border: 1px solid #e3e9f1;
  border-radius: 12px;
  background: #f9fbfc;
  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.035);
}

.staff-account-filter-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  min-width: 0;
}

.staff-account-filter-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.staff-account-filter-field > span {
  color: #7d8794;
  font-size: 11px;
  font-weight: 900;
}

.staff-account-filter-field input,
.staff-account-filter-field .xw-select-trigger {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #e0e7ee;
  border-radius: 9px;
  outline: 0;
  color: #25303c;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.staff-account-filter-field input:focus,
.staff-account-filter-field .xw-select-trigger:focus-visible,
.staff-account-filter-field .xw-select.is-open .xw-select-trigger {
  border-color: #8ed8f2;
  box-shadow: 0 0 0 3px rgba(32, 174, 229, 0.1);
}

.staff-account-filter-field input::placeholder {
  color: #a6adb7;
  font-weight: 600;
}

.staff-account-filter-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 38px;
  color: #8b94a0;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.staff-account-filter-meta strong {
  color: #1687b8;
  font-size: 13px;
}

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

.staff-account-head-tools {
  display: grid;
  justify-self: end;
  justify-items: end;
  gap: 8px;
}

.staff-usage-month-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid #e3e9ef;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.04);
}

.staff-usage-month-switcher > button {
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #5d6673;
  background: transparent;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
}

.staff-usage-month-switcher > button:hover:not(:disabled) {
  border-color: #cfeaf5;
  color: #0786b8;
  background: #eefaff;
}

.staff-usage-month-switcher > button:disabled {
  opacity: 0.38;
  cursor: default;
}

.staff-usage-month-switcher > label {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 31px;
  padding: 0 9px;
  border-radius: 8px;
  background: #ffffff;
}

.staff-usage-month-switcher > label span {
  color: #89919d;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.staff-usage-month-switcher input[type="month"] {
  width: 112px;
  min-width: 0;
  height: 29px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #25303c;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.staff-usage-month-switcher > .staff-usage-current-month {
  min-width: 42px;
  color: #e24666;
  font-size: 11px;
}

.account-create-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 16px;
  white-space: nowrap;
}

.staff-application-review {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #ffe0e8;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 247, 250, 0.96), rgba(255, 255, 255, 0.92));
}

.staff-application-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.staff-application-review-head h4 {
  margin: 0;
  color: #18191c;
  font-size: 15px;
}

.staff-application-review-head p,
.staff-application-meta {
  margin: 3px 0 0;
  color: #7d8793;
  font-size: 12px;
  line-height: 1.45;
}

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

.staff-application-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #f3dbe2;
  border-radius: 8px;
  background: #ffffff;
}

.staff-application-card .permission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.staff-application-role-field {
  display: grid;
  grid-template-columns: auto minmax(140px, 220px);
  align-items: center;
  justify-content: start;
  gap: 10px;
}

.staff-application-role-field > span {
  color: #66717e;
  font-size: 12px;
  font-weight: 800;
}

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

.account-form-grid .field {
  margin-bottom: 0;
}

.account-form-grid input,
.account-form-grid select {
  min-height: 40px;
  padding: 9px 11px;
}

.account-form-action {
  align-content: end;
}

.account-form-action .primary-btn {
  width: 100%;
  min-height: 40px;
}

.staff-account-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.staff-account-search-empty {
  min-height: 132px;
}

.staff-account-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.35fr) auto;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 12px;
}

.staff-account-card .permission-name-line {
  flex-wrap: wrap;
}

.permission-user .staff-account-meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.staff-account-meta > span,
.staff-account-meta > i {
  flex: 0 0 auto;
  font-style: normal;
  white-space: nowrap;
}

.staff-account-meta .staff-account-email {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
}

.staff-account-meta .staff-account-phone {
  color: #727983;
  font-variant-numeric: tabular-nums;
}

.staff-usage-metrics {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.staff-usage-metrics > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #e7edf2;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7fbff, #fff8fa);
}

.staff-usage-metrics small {
  color: #929aa6;
  font-size: 10px;
  font-weight: 800;
}

.staff-usage-metrics strong {
  overflow: hidden;
  color: #25303c;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-usage-metrics > span:first-child strong {
  color: #0789b9;
}

.staff-usage-metrics > span:nth-child(2) strong {
  color: #e24666;
}

.staff-account-card .permission-actions {
  margin-top: 0;
}

.staff-account-edit-grid {
  display: grid;
  grid-column: 1;
  grid-template-columns: minmax(90px, 0.82fr) minmax(90px, 0.82fr) minmax(120px, 1fr) minmax(96px, 0.82fr) minmax(76px, 0.58fr);
  gap: 5px;
}

.staff-account-edit-grid label {
  display: grid;
  gap: 3px;
  color: #7d8793;
  font-size: 11px;
  font-weight: 800;
}

.staff-account-edit-grid input,
.staff-account-edit-grid select {
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #dfe8ef;
  border-radius: 8px;
  color: #18191c;
  background: #ffffff;
  font-size: 12px;
}

.staff-account-card .permission-actions {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-content: flex-end;
  gap: 8px;
}

.staff-account-modal {
  width: min(720px, calc(100vw - 36px));
}

.staff-account-modal-form {
  margin-top: 0;
}

.staff-self-register-page {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  align-content: start;
  gap: 18px;
  padding: 24px;
}

.staff-self-register-card {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.staff-self-register-card--form {
  display: grid;
  width: min(1220px, 100%);
  grid-template-columns: 286px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 217, 229, 0.92);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(40, 67, 96, 0.12);
}

.staff-self-register-sidebar {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 42px 34px;
  border-right: 1px solid #e7edf3;
  background:
    radial-gradient(circle at 12% 4%, rgba(0, 174, 236, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.staff-self-register-sidebar-head h1,
.staff-self-register-mobile-head h1 {
  margin: 0;
  color: #172033;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.staff-self-register-sidebar-head p,
.staff-self-register-mobile-head p {
  margin: 12px 0 0;
  color: #66758a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}

.staff-self-register-accent {
  display: block;
  width: 68px;
  height: 3px;
  margin-top: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1478eb 0 56%, #ff647c 56% 100%);
}

.staff-self-register-process-title {
  margin-top: 38px;
  color: #1c293c;
  font-size: 14px;
  font-weight: 900;
}

.staff-self-register-process {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.staff-self-register-process li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  min-height: 128px;
}

.staff-self-register-process li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 23px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(55, 143, 239, 0.48) 0 5px, transparent 5px 10px);
}

.staff-self-register-process-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #dceafb;
  border-radius: 50%;
  color: #1478eb;
  background: #eef6ff;
}

.staff-self-register-process li.is-current .staff-self-register-process-icon {
  border-color: #1478eb;
  color: #ffffff;
  background: #1478eb;
  box-shadow: 0 12px 24px rgba(20, 120, 235, 0.24);
}

.staff-self-register-process-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

.staff-self-register-process li > div {
  display: grid;
  align-content: start;
  min-width: 0;
  padding-top: 3px;
}

.staff-self-register-process small {
  color: #1478eb;
  font-size: 12px;
  font-weight: 900;
}

.staff-self-register-process strong {
  margin-top: 5px;
  color: #253247;
  font-size: 15px;
  font-weight: 900;
}

.staff-self-register-process p {
  margin: 6px 0 0;
  color: #667488;
  font-size: 12px;
  line-height: 1.65;
}

.staff-self-register-content {
  min-width: 0;
  padding: 30px 40px 28px;
}

.staff-self-register-mobile-head,
.staff-self-register-mobile-process {
  display: none;
}

.staff-self-register-head h1,
.staff-self-register-review h1 {
  margin: 6px 0 8px;
  color: #18191c;
  font-size: 28px;
  letter-spacing: 0;
}

.staff-self-register-head p,
.staff-self-register-review p {
  margin: 0;
  color: #637083;
  font-size: 13px;
  line-height: 1.65;
}

.staff-self-register-form {
  display: grid;
  gap: 0;
  margin: 0;
}

.staff-register-section {
  min-width: 0;
  padding: 18px 0 20px;
  border-top: 1px solid #e7edf3;
}

.staff-register-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.staff-register-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.staff-register-section-number {
  display: inline-grid;
  min-width: 42px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #1478eb;
  background: #eef6ff;
  font-size: 17px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.staff-register-section-head h2 {
  margin: 0;
  color: #1c293c;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.staff-register-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  min-width: 0;
}

.staff-self-register-form .field {
  min-width: 0;
  gap: 7px;
  margin: 0;
}

.staff-self-register-form .field label {
  color: #303c4e;
  font-size: 12px;
  font-weight: 900;
}

.staff-self-register-form .field input,
.staff-self-register-form .field select,
.staff-self-register-form .xw-select-trigger {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #d7e0e9;
  border-radius: 11px;
  color: #243044;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.staff-self-register-form .field input::placeholder {
  color: #9aa5b3;
  font-weight: 500;
}

.staff-self-register-form .field input:focus,
.staff-self-register-form .field select:focus,
.staff-self-register-form .xw-select.is-open .xw-select-trigger {
  border-color: #4c9cf3;
  box-shadow: 0 0 0 4px rgba(20, 120, 235, 0.1);
}

.staff-self-register-form .xw-select {
  width: 100%;
}

.staff-self-register-form .xw-select-trigger {
  justify-content: space-between;
  font-family: inherit;
}

.staff-register-field--wide {
  grid-column: 1 / -1;
}

.staff-register-sms-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  min-width: 0;
}

.staff-register-sms-row input {
  border-radius: 11px 0 0 11px !important;
}

.staff-register-sms-button.plain-btn {
  min-width: 140px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #d7e0e9;
  border-left: 0;
  border-radius: 0 11px 11px 0;
  color: #1478eb;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.staff-register-sms-button.plain-btn:hover:not(:disabled) {
  border-color: #b8d8fb;
  color: #0e66c9;
  background: #eef6ff;
  transform: none;
}

.staff-register-sms-button.plain-btn:active:not(:disabled) {
  transform: none;
}

.staff-register-password-control {
  position: relative;
  min-width: 0;
}

.staff-register-password-control input {
  padding-right: 48px !important;
}

.staff-register-password-control button {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #7f8997;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.staff-register-password-control button:hover,
.staff-register-password-control button:focus-visible,
.staff-register-password-control button[aria-pressed="true"] {
  color: #1478eb;
  background: #eef6ff;
  outline: none;
}

.staff-register-password-control button:focus-visible {
  box-shadow: 0 0 0 3px rgba(20, 120, 235, 0.14);
}

.staff-register-password-control button svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.staff-register-review-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 13px 16px;
  border: 1px solid #dfeaf6;
  border-radius: 12px;
  background: #f7fbff;
}

.staff-register-review-flow > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}

.staff-register-review-flow > div > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #1478eb;
  background: #eaf4ff;
}

.staff-register-review-flow > div > span svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}

.staff-register-review-flow strong {
  overflow: hidden;
  color: #314055;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-register-review-flow > i {
  display: grid;
  place-items: center;
  color: #8c99a9;
}

.staff-register-review-flow > i svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.staff-register-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.staff-register-back.plain-btn,
.staff-register-submit.auth-submit-btn {
  min-height: 50px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.staff-register-back.plain-btn {
  min-width: 150px;
  padding: 0 20px;
  color: #59677a;
  border-color: #d7e0e9;
  box-shadow: none;
}

.staff-register-submit.auth-submit-btn {
  width: min(280px, 42%);
  min-width: 230px;
  padding: 0 30px;
  background: linear-gradient(105deg, #c52c5a 0%, #d63e43 100%);
  box-shadow: 0 14px 28px rgba(240, 78, 111, 0.2);
}

.staff-register-submit.auth-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 17px 32px rgba(240, 78, 111, 0.25);
}

.staff-self-register-review {
  display: grid;
  justify-items: center;
  border: 1px solid rgba(205, 217, 229, 0.92);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(40, 67, 96, 0.12);
  text-align: center;
}

.staff-self-register-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #eaf8ff;
  color: #008ac5;
  font-size: 26px;
  font-weight: 900;
}

.staff-self-register-back {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .staff-self-register-card--form {
    grid-template-columns: 1fr;
    width: min(820px, 100%);
  }

  .staff-self-register-sidebar {
    display: none;
  }

  .staff-self-register-content {
    padding: 32px;
  }

  .staff-self-register-mobile-head {
    display: block;
    margin-bottom: 24px;
  }

  .staff-self-register-mobile-process {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin-bottom: 26px;
    padding: 16px 14px;
    border: 1px solid #dfeaf6;
    border-radius: 14px;
    background: #f8fbff;
  }

  .staff-self-register-mobile-process > div {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 7px;
    text-align: center;
  }

  .staff-self-register-mobile-process > div > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    color: #1478eb;
    background: #eaf4ff;
  }

  .staff-self-register-mobile-process > div.is-current > span {
    color: #ffffff;
    background: #1478eb;
    box-shadow: 0 9px 20px rgba(20, 120, 235, 0.2);
  }

  .staff-self-register-mobile-process span svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.9;
  }

  .staff-self-register-mobile-process strong {
    color: #334158;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
  }

  .staff-self-register-mobile-process > div.is-current strong {
    color: #1478eb;
  }

  .staff-self-register-mobile-process > i {
    display: grid;
    place-items: center;
    color: #8995a5;
  }

  .staff-self-register-mobile-process > i svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
  }

  .staff-register-review-flow {
    display: none;
  }
}

@media (max-width: 640px) {
  .staff-self-register-page {
    gap: 12px;
    padding: 10px;
  }

  .staff-self-register-card--form {
    border-radius: 18px;
  }

  .staff-self-register-content {
    padding: 24px 16px 18px;
  }

  .staff-self-register-mobile-head {
    margin-bottom: 20px;
  }

  .staff-self-register-mobile-head h1 {
    font-size: 28px;
  }

  .staff-self-register-mobile-head p {
    margin-top: 8px;
    font-size: 13px;
  }

  .staff-self-register-mobile-process {
    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
    gap: 3px;
    margin-bottom: 22px;
    padding: 13px 8px;
  }

  .staff-self-register-mobile-process > div > span {
    width: 34px;
    height: 34px;
  }

  .staff-self-register-mobile-process strong {
    font-size: 10px;
  }

  .staff-register-section {
    padding: 18px 0 20px;
  }

  .staff-register-section-head {
    margin-bottom: 14px;
  }

  .staff-register-section-number {
    min-width: 39px;
    height: 36px;
    font-size: 16px;
  }

  .staff-register-section-head h2 {
    font-size: 17px;
  }

  .staff-register-fields {
    grid-template-columns: 1fr;
    gap: 13px;
    width: 100%;
  }

  .staff-register-field--wide {
    grid-column: 1;
  }

  .staff-self-register-form .field input,
  .staff-self-register-form .field select,
  .staff-self-register-form .xw-select-trigger {
    min-height: 50px;
    font-size: 16px;
  }

  .staff-register-sms-row {
    grid-template-columns: minmax(0, 1fr) 124px;
  }

  .staff-register-sms-button.plain-btn {
    min-width: 124px;
    min-height: 50px;
    padding: 0 9px;
    font-size: 12px;
  }

  .staff-register-submit-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 4px;
  }

  .staff-register-submit.auth-submit-btn,
  .staff-register-back.plain-btn {
    width: 100%;
    min-width: 0;
    min-height: 52px;
  }

  .staff-self-register-review {
    padding: 26px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-self-register-card--form *,
  .staff-self-register-card--form *::before,
  .staff-self-register-card--form *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.staff-qr-register-modal {
  width: min(760px, calc(100vw - 36px));
  max-width: 760px;
}

.staff-qr-register-layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 12px;
}

.staff-qr-register-code {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #dff2ff;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.96), rgba(255, 247, 250, 0.92));
}

.staff-qr-register-code img {
  display: block;
  width: 100%;
  max-width: 176px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.staff-qr-register-code strong {
  color: #172033;
  font-size: 15px;
}

.staff-qr-register-code span,
.staff-qr-register-copy p,
.staff-qr-register-steps p {
  margin: 0;
  color: #637083;
  font-size: 12px;
  line-height: 1.55;
}

.staff-qr-register-code span {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.staff-register-link {
  text-decoration: none;
}

.staff-qr-register-copy {
  min-width: 0;
  padding: 4px 0;
}

.staff-qr-register-copy h3 {
  margin: 6px 0 8px;
  color: #18191c;
  font-size: 20px;
}

.staff-qr-register-steps {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.staff-qr-register-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #edf3f8;
  border-radius: 8px;
  background: #fbfcfd;
}

.staff-qr-register-steps span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #eaf8ff;
  color: #008ac5;
  font-size: 12px;
  font-weight: 900;
}

.staff-qr-register-notice {
  margin-top: 12px;
}

.staff-delete-modal {
  width: min(520px, calc(100vw - 36px));
}

.opportunity-delete-modal {
  width: min(520px, calc(100vw - 36px));
}

.delete-post-opportunity-modal {
  width: min(560px, calc(100vw - 36px));
}

.delete-post-opportunity-modal form {
  display: grid;
  gap: 12px;
}

.delete-post-opportunity-risk {
  margin: 0;
}

.delete-post-opportunity-modal textarea {
  min-height: 120px;
  resize: vertical;
}

.operator-submit-modal {
  width: min(780px, calc(100vw - 36px));
  padding: 16px 18px 14px;
}

.operator-submit-modal form {
  display: grid;
  gap: 8px;
}

.operator-submit-header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
  margin-bottom: 8px;
}

.operator-submit-copy {
  min-width: 0;
}

.operator-submit-search {
  display: grid;
  gap: 4px;
  justify-self: stretch;
  margin: 0;
}

.operator-submit-search span {
  color: #526071;
  font-size: 12px;
  font-weight: 800;
}

.operator-submit-search input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #d8e5f0;
  border-radius: 8px;
  padding: 6px 10px;
  outline: none;
  background: rgba(248, 251, 255, 0.92);
  color: #172033;
  font-size: 13px;
}

.operator-submit-search input:focus {
  border-color: #00aeec;
  box-shadow: none;
}

.operator-submit-hint {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}

.operator-submit-stepper.outer-container {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.operator-submit-step-circle-container.step-circle-container {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dff2ff;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(248, 252, 255, 0.98), rgba(255, 250, 253, 0.98));
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.operator-submit-step-indicator-row.step-indicator-row {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #edf5fb;
}

.operator-submit-step-indicator.step-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #7d8793;
  cursor: pointer;
}

.operator-submit-step-indicator .step-indicator-inner {
  display: flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eaf7ff;
  color: #0f8fcc;
  font-weight: 800;
  transition: background-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.operator-submit-step-indicator.active .step-indicator-inner,
.operator-submit-step-indicator.complete .step-indicator-inner {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.22);
}

.operator-submit-step-indicator .active-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
}

.operator-submit-step-indicator .step-number {
  font-size: 13px;
}

.operator-submit-step-label {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.operator-submit-step-label strong {
  color: #172033;
  font-size: 13px;
}

.operator-submit-step-label small {
  color: #8a95a3;
  font-size: 10px;
  white-space: nowrap;
}

.operator-submit-step-connector.step-connector {
  position: relative;
  height: 2px;
  flex: 1;
  min-width: 40px;
  margin: 0 10px;
  overflow: hidden;
  border-radius: 4px;
  background: #dce9f2;
}

.operator-submit-step-connector .step-connector-inner {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #3b82f6;
  transition: width 0.24s ease;
}

.operator-submit-step-connector.complete .step-connector-inner {
  width: 100%;
}

.operator-submit-step-content.step-content-default {
  position: relative;
  overflow: hidden;
}

.operator-submit-step-panel.step-default {
  padding: 10px 12px;
}

.operator-submit-step-panel[hidden] {
  display: none;
}

.operator-submit-step-head {
  display: none;
  gap: 3px;
  margin-bottom: 10px;
}

.operator-submit-step-head h3 {
  margin: 0;
  color: #172033;
  font-size: 16px;
}

.operator-submit-step-head p {
  margin: 0;
  color: #7d8793;
  font-size: 12px;
}

.operator-submit-step-footer.footer-container {
  padding: 0 12px 10px;
}

.operator-submit-step-actions.footer-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.operator-submit-step-actions.footer-nav.end {
  justify-content: flex-end;
}

.operator-submit-step-actions.footer-nav.spread {
  justify-content: flex-end;
}

.operator-submit-step-actions [hidden] {
  display: none !important;
}

.operator-submit-step-actions .back-button {
  min-height: 38px;
  border: 1px solid #d8e5f0;
  border-radius: 999px;
  padding: 8px 16px;
  background: #ffffff;
  color: #526071;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.operator-submit-step-actions .back-button:hover {
  border-color: #9bdfff;
  background: #f5fcff;
  color: #0f8fcc;
}

.operator-submit-step-actions .next-button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #ff5f8e, #fb4f7e);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(251, 95, 145, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.operator-submit-step-actions .next-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(251, 95, 145, 0.28);
}

.operator-submit-step-actions .check-icon {
  width: 16px;
  height: 16px;
}

.operator-submit-selected-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #dff2ff;
  border-radius: 8px;
  background: linear-gradient(135deg, #f6fcff, #fff7fb);
}

.operator-submit-selected-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #5f6b7a;
  font-size: 13px;
}

.operator-submit-selected-copy span {
  font-weight: 700;
  color: #1f2a37;
}

.operator-submit-selected-count {
  color: #fb5f91;
  font-size: 16px;
}

.operator-submit-selected-avatars {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.operator-submit-selected-avatar,
.operator-submit-selected-more {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #eaf7ff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  color: #0f8fcc;
  font-size: 12px;
  font-weight: 800;
}

.operator-submit-selected-avatar:first-child,
.operator-submit-selected-more:first-child {
  margin-left: 0;
}

.operator-submit-selected-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.operator-submit-selected-avatar .avatar-fallback {
  width: 100%;
  height: 100%;
}

.operator-submit-selected-empty {
  color: #94a3b8;
  font-size: 13px;
}

.operator-submit-list {
  display: grid;
  gap: 5px;
  max-height: 380px;
  overflow: auto;
  padding-right: 4px;
}

.operator-submit-select-list {
  margin-top: 6px;
}

.operator-submit-search-empty {
  padding: 14px;
  border: 1px dashed #d8e5f0;
  border-radius: 8px;
  background: #fbfdff;
  color: #7d8793;
  text-align: center;
  font-size: 13px;
}

.operator-submit-option {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(260px, 0.58fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 6px 10px;
  border: 1px solid #e6eef5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.operator-submit-select-list .operator-submit-option {
  grid-template-columns: 1fr;
}

.operator-submit-option:has(input[name="talentIds"]:checked),
.operator-submit-option:hover {
  border-color: #93dfff;
  background: linear-gradient(135deg, rgba(246, 252, 255, 0.96), rgba(255, 250, 253, 0.96));
}

.operator-submit-pick {
  display: grid;
  grid-column: 1;
  grid-template-columns: auto 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.operator-submit-pick input:not(.operator-submit-checkbox) {
  width: auto;
  min-width: 0;
}

.operator-submit-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  color: #3b82f6;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.operator-submit-pick .operator-submit-checkbox {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  box-sizing: border-box;
  display: inline-grid;
  padding: 0;
  margin: 0;
  aspect-ratio: 1 / 1;
}

.operator-submit-checkbox:checked {
  border-color: #3b82f6;
  background-color: #3b82f6;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6.1L4.8 8.3L9.5 3.7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.operator-submit-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.operator-submit-checkbox:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.operator-submit-pick .opportunity-avatar,
.operator-submit-schedule-person .opportunity-avatar {
  width: 42px;
  height: 42px;
}

.operator-submit-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.operator-submit-main strong {
  color: #18191c;
  font-size: 14px;
}

.operator-submit-main small {
  min-width: 0;
  color: #7d8793;
  font-size: 12px;
  line-height: 1.35;
}

.operator-submit-compact-fields {
  display: grid;
  grid-column: 2;
  grid-template-columns: 1fr;
  gap: 4px;
  padding-left: 0;
}

.operator-submit-compact-fields .field {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  margin-bottom: 0;
}

.operator-submit-expected-date {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #dff2ff;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.94), rgba(255, 247, 251, 0.94));
}

.operator-submit-expected-date span {
  color: #526071;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.operator-submit-expected-date strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-submit-compact-fields label {
  color: #526071;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.operator-submit-compact-fields input {
  width: 100%;
  min-height: 28px;
  padding: 4px 9px;
  border-color: #d8e5f0;
  background: rgba(248, 251, 255, 0.88);
  font-size: 13px;
}

.operator-submit-schedule-list {
  gap: 5px;
}

.operator-submit-schedule-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.78fr);
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid #e6eef5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.operator-submit-schedule-card.selected {
  border-color: #93dfff;
  background: linear-gradient(135deg, rgba(246, 252, 255, 0.96), rgba(255, 250, 253, 0.96));
}

.operator-submit-schedule-card[hidden] {
  display: none;
}

.operator-submit-schedule-person {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.operator-submit-schedule-card .operator-submit-compact-fields {
  grid-column: 2;
}

.operator-submit-schedule-empty {
  padding: 14px;
  border: 1px dashed #d8e5f0;
  border-radius: 8px;
  background: #fbfdff;
  color: #7d8793;
  text-align: center;
  font-size: 13px;
}

.operator-submit-date-field.folder-date-field {
  position: relative;
}

.operator-submit-date-field.folder-date-field input.hs-datepicker {
  min-height: 28px;
  padding: 4px 30px 4px 9px;
}

.operator-submit-date-field.folder-date-field::after {
  right: 10px;
  bottom: auto;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
}

.operator-submit-schedule-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr);
  gap: 12px;
}

.talent-operator-board {
  max-height: 840px;
  overflow: hidden;
}

.talent-operator-filters {
  margin-bottom: 10px;
}

.talent-operator-list {
  display: grid;
  gap: 9px;
  max-height: 640px;
  overflow: auto;
  padding-right: 4px;
}

.talent-operator-search-empty {
  min-height: 150px;
}

.talent-operator-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.talent-operator-card .opportunity-talent-cell {
  min-width: 0;
}

.talent-operator-card .opportunity-avatar {
  width: 42px;
  height: 42px;
}

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

.workbench-content-grid > section {
  min-width: 0;
  padding: 16px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

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

.workbench-content-form input,
.workbench-content-form select {
  min-width: 0;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid #dfe8ef;
  border-radius: 8px;
  background: #ffffff;
}

.workbench-content-form button {
  justify-self: start;
}

.operator-workbench {
  gap: 18px;
}

.operator-command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
  align-items: stretch;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(227, 229, 231, 0.92);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.96), rgba(255, 244, 248, 0.9) 52%, rgba(231, 248, 255, 0.84)),
    #ffffff;
  box-shadow: 0 18px 44px rgba(24, 25, 28, 0.08);
}

.operator-command-copy h1 {
  margin: 0 0 10px;
  color: #18191c;
  font-size: 34px;
  line-height: 1.18;
}

.operator-command-copy p,
.operator-command-focus p {
  margin: 0;
  color: #61666d;
  line-height: 1.7;
}

.operator-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.operator-command-focus {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 150px;
  padding-left: 24px;
  border-left: 1px solid rgba(251, 114, 153, 0.2);
}

.operator-command-focus span {
  color: #fb5d7a;
  font-size: 12px;
  font-weight: 900;
}

.operator-command-focus strong {
  color: #18191c;
  font-size: 28px;
  line-height: 1.2;
}

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

.operator-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  gap: 18px;
  align-items: start;
}

.operator-roster-panel,
.operator-queue-panel {
  min-width: 0;
}

.operator-section-head {
  margin-bottom: 16px;
}

.operator-stats-panel {
  display: grid;
  gap: 16px;
}

.operator-stats-panel .operator-section-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.operator-stats-controls {
  display: grid;
  justify-items: end;
  gap: 10px;
  min-width: min(100%, 520px);
}

.operator-stats-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.operator-stats-range {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #ffe1ea;
  border-radius: 999px;
  color: #fb5d7a;
  background: #fff6f9;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.operator-stats-range:hover {
  transform: translateY(-1px);
  border-color: #fb7299;
}

.operator-stats-range.active {
  border-color: #fb7299;
  color: #ffffff;
  background: linear-gradient(135deg, #fb7299, #00aeec);
  box-shadow: 0 10px 24px rgba(251, 114, 153, 0.18);
}

.operator-stats-date-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.operator-stats-range-input {
  width: min(100%, 316px);
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid #e5edf4;
  border-radius: 8px;
  background: #ffffff;
  color: #18191c;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.operator-stats-range-input::placeholder {
  color: #9aa3ad;
}

.operator-range-datepicker-popover {
  max-width: calc(100vw - 24px);
}

.operator-range-datepicker-head {
  align-items: center;
}

.operator-range-datepicker-head strong {
  color: #18191c;
  font-size: 13px;
  font-weight: 900;
}

.operator-range-datepicker-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.operator-range-datepicker-month {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.operator-range-datepicker-month h4 {
  margin: 0;
  color: #61666d;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.operator-range-datepicker-month .folder-datepicker-days button.in-range {
  color: #008ac5;
  background: #eaf8ff;
}

.operator-range-datepicker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf0f2;
}

.operator-range-datepicker-foot span {
  color: #61666d;
  font-size: 12px;
  font-weight: 900;
}

.operator-stat-count-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 14px;
}

.operator-chart-card,
.operator-table-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
}

.operator-table-card {
  overflow: auto;
}

.operator-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.operator-chart-head h3,
.operator-table-card h3 {
  margin: 0;
  color: #18191c;
  font-size: 17px;
  line-height: 1.25;
}

.operator-chart-head p {
  margin: 4px 0 0;
  color: #9499a0;
  font-size: 12px;
  font-weight: 700;
}

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

.operator-chart-row {
  display: grid;
  grid-template-columns: minmax(78px, 0.34fr) minmax(90px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.operator-chart-row span {
  overflow: hidden;
  color: #3f4652;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-chart-row i {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf4fa;
}

.operator-chart-row b {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb7299, #00aeec);
}

.operator-chart-row strong {
  color: #18191c;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.operator-stat-table {
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  border-collapse: collapse;
  table-layout: fixed;
}

.operator-stat-table th,
.operator-stat-table td {
  padding: 10px 0;
  border-top: 1px solid #edf0f2;
  color: #61666d;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.operator-stat-table th {
  color: #9499a0;
  font-weight: 900;
}

.operator-stat-table th:first-child,
.operator-stat-table td:first-child {
  width: 54%;
}

.operator-stat-table th:nth-child(2),
.operator-stat-table td:nth-child(2) {
  width: 22%;
}

.operator-stat-table th:nth-child(3),
.operator-stat-table td:nth-child(3) {
  width: 24%;
}

.operator-stat-table td:nth-child(2),
.operator-stat-table td:nth-child(3),
.operator-stat-table th:nth-child(2),
.operator-stat-table th:nth-child(3) {
  text-align: right;
}

.operator-stat-table td strong {
  color: #18191c;
  font-size: 13px;
}

.operator-table-talent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.operator-table-talent .opportunity-avatar {
  width: 30px;
  height: 30px;
}

.operator-table-talent > span:last-child {
  display: grid;
  min-width: 0;
}

.operator-table-talent strong,
.operator-table-talent small {
  overflow: hidden;
  max-width: 140px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-table-talent small {
  color: #9499a0;
  font-size: 11px;
}

.operator-stat-empty {
  min-height: 64px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.operator-talent-grid,
.operator-roster-list,
.operator-queue-list {
  display: grid;
  gap: 10px;
}

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

.operator-talent-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
}

.operator-card-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fb5d7a;
  background: #fff2f7;
  font-size: 12px;
  font-weight: 900;
}

.operator-talent-main {
  min-width: 0;
}

.operator-talent-main .opportunity-avatar {
  width: 44px;
  height: 44px;
}

.operator-tag,
.operator-status-line {
  justify-self: start;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.operator-tag {
  grid-column: 2;
  color: #61666d;
  background: #f6f7f9;
}

.operator-status-line {
  grid-column: 2;
  color: #f06b00;
  background: #fff8ed;
  border: 1px solid #ffd99a;
}

.operator-talent-card .plain-btn {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  white-space: nowrap;
}

.operator-queue-panel {
  position: sticky;
  top: 102px;
}

.operator-queue-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fbfcfd;
  text-align: left;
}

.operator-queue-item:hover {
  border-color: rgba(251, 114, 153, 0.36);
  background: #ffffff;
}

.operator-queue-index {
  color: #9499a0;
  font-size: 12px;
  font-weight: 900;
}

.operator-queue-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.operator-queue-copy strong {
  color: #18191c;
  font-size: 16px;
  font-weight: 900;
}

.operator-queue-copy small {
  overflow: hidden;
  color: #9499a0;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-queue-item em {
  color: #18191c;
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
}

.operator-queue-item b {
  grid-column: 2 / -1;
  justify-self: end;
  color: #138dff;
  font-size: 13px;
}

.business-task-list {
  display: grid;
  gap: 10px;
}

.talent-operator-assignment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid #e3edf5;
  border-radius: 999px;
  background: #fbfcfd;
}

.talent-operator-assignment small {
  color: #7d8793;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.talent-operator-assignment select {
  width: auto;
  min-width: 96px;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid #dbe6ee;
  border-radius: 999px;
  background: #ffffff;
  color: #18191c;
  font-size: 12px;
  font-weight: 800;
}

.talent-operator-assignment span {
  color: #008ac5;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-line-stack {
  display: grid;
}

.price-line-stack {
  display: grid;
}

.price-line-stack {
  min-width: 190px;
}

.schedule-line-stack,
.price-line-stack {
  display: grid;
  gap: 7px;
  color: #5f6975;
  font-size: 12px;
  line-height: 1.35;
}

.price-line-stack span {
  display: grid;
  gap: 2px;
}

.opportunity-table .price-line-stack {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.client-price-line-stack {
  justify-items: start;
}

.business-price-line-stack {
  justify-items: stretch;
}

.price-line-note {
  max-width: 100%;
  color: #7d8793;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.price-line-note.price-negotiated {
  color: #f06b00;
}

.price-line-note.price-accepted {
  color: #0f8a43;
}

.price-line-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 100%;
}

.price-negotiation-btn.plain-btn.tiny-btn {
  max-width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.price-confirm-btn.primary-btn.tiny-btn {
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(251, 93, 122, 0.16);
}

.schedule-line-simple {
  min-width: 150px;
}

.schedule-line-row {
  display: grid;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.schedule-line-row.has-client-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

.schedule-current-card {
  display: grid;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid #e5edf4;
  border-radius: 8px;
  background: #fbfcfd;
}

.schedule-current-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.schedule-current-copy small {
  color: #8a929b;
  font-size: 11px;
  font-weight: 900;
}

.schedule-current-copy strong {
  overflow: hidden;
  color: #18191c;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-status-badge {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-status-badge.ok {
  color: #0f8a43;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
}

.schedule-status-badge.warn {
  color: #f06b00;
  background: #fff8ed;
  border: 1px solid #ffd99a;
}

.schedule-status-badge.muted {
  color: #7d8793;
  background: #f6f7f9;
  border: 1px solid #e5edf4;
}

.schedule-current-meta {
  overflow: hidden;
  color: #7d8793;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.schedule-inline-action {
  justify-self: start;
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
  box-shadow: none;
}

.schedule-revision-action.secondary-btn {
  border-color: #dbe6ee;
  color: #5f6975;
  background: #ffffff;
}

.client-schedule-confirm-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.client-schedule-inline-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
  min-width: 74px;
}

.client-row-confirm-btn.primary-btn {
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(251, 93, 122, 0.16);
}

.client-row-change-btn.secondary-btn {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: none;
}

.client-schedule-inline-actions .client-row-confirm-btn,
.client-schedule-inline-actions .client-row-change-btn {
  width: 100%;
  justify-content: center;
}

.schedule-quick-edit {
  display: grid;
  gap: 6px;
}

.schedule-inline-field {
  display: grid;
  gap: 5px;
}

.schedule-inline-field span {
  color: #7d8793;
  font-size: 11px;
  font-weight: 900;
}

.schedule-inline-field input,
.price-line-stack input {
  min-width: 150px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #cfefff;
  border-radius: 8px;
  background: #f6fcff;
  color: #17314f;
  font-weight: 800;
}

.business-price-line-stack .business-price-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.opportunity-flow {
  grid-template-columns: repeat(10, minmax(72px, 1fr));
}

.opportunity-flow-guidance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: -4px 24px 18px;
  padding: 10px 12px;
  border: 1px solid #e5edf4;
  border-radius: 8px;
  background: #fbfcfd;
  color: #5f6975;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.opportunity-flow-guidance strong {
  color: #17314f;
  font-size: 13px;
  font-weight: 900;
}

.schedule-reject-action.plain-btn {
  border-color: #ffe0e7;
  color: #e43b61;
  background: #fff7fa;
}

@media (max-width: 1180px) {
  .business-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench-command-layout,
  .workbench-package-layout {
    grid-template-columns: 1fr;
  }

  .workbench-case-rail {
    position: static;
  }

  .workbench-command-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .workbench-content-grid {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 980px) {
  .account-management-grid {
    grid-template-columns: 1fr;
  }

  .admin-credentials-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-credentials-form .primary-btn {
    grid-column: 1 / -1;
  }

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

  .admin-credentials-modal-actions,
  .admin-credentials-notice {
    grid-column: 1;
  }

  .operator-command-hero,
  .operator-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .operator-queue-panel {
    position: static;
  }

  .operator-command-focus {
    min-height: auto;
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid rgba(251, 114, 153, 0.2);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .staff-qr-register-layout {
    grid-template-columns: 1fr;
  }

  .staff-qr-register-code img {
    width: min(100%, 172px);
  }

  .staff-account-card {
    grid-template-columns: 1fr;
  }

  .staff-account-section-head {
    flex-direction: column;
  }

  .staff-account-head-tools {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .staff-account-filters,
  .staff-account-filter-fields {
    grid-template-columns: 1fr;
  }

  .staff-account-filter-meta {
    justify-content: flex-start;
  }

  .staff-usage-month-switcher {
    width: 100%;
  }

  .staff-usage-month-switcher > label {
    flex: 1;
  }

  .staff-usage-month-switcher input[type="month"] {
    width: 100%;
  }

  .staff-account-head-tools .account-management-section-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-account-head-tools .account-create-btn {
    width: 100%;
  }

  .staff-usage-metrics {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-usage-metrics > span:last-child {
    grid-column: 1 / -1;
  }

  .staff-account-edit-grid {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-account-card .permission-actions {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .client-workbench-hero,
  .workbench-banner,
  .workbench-action-grid,
  .workbench-command-stats,
  .operator-metric-row,
  .operator-stat-count-grid,
  .operator-roster-list,
  .workbench-content-form {
    grid-template-columns: 1fr;
  }

  .operator-stats-panel .operator-section-head {
    flex-direction: column;
  }

  .operator-stats-controls {
    justify-items: stretch;
  }

  .operator-stats-presets,
  .operator-stats-date-controls {
    justify-content: flex-start;
  }

  .operator-range-datepicker-months {
    grid-template-columns: 1fr;
  }

  .operator-command-hero {
    padding: 22px;
  }

  .operator-command-copy h1 {
    font-size: 26px;
  }

  .workbench-banner {
    min-height: auto;
    padding: 22px;
  }

  .workbench-banner h2 {
    font-size: 24px;
  }

  .workbench-priority-action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .workbench-priority-grid {
    grid-template-columns: 1fr;
  }

  .workbench-priority-action em,
  .workbench-priority-action b {
    grid-column: 2;
    justify-self: start;
  }

  .workbench-opportunity-section .opportunity-package-card,
  .workbench-case-rail .marketing-case-card,
  .bili-popular-item a {
    grid-template-columns: 1fr;
  }

  .workbench-package-list article,
  .content-manage-row,
  .account-form-grid,
  .operator-submit-schedule-grid,
  .operator-talent-card,
  .talent-operator-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .operator-tag,
  .operator-status-line,
  .operator-talent-card .plain-btn {
    grid-column: auto;
    grid-row: auto;
  }

  .operator-submit-pick {
    grid-column: 1;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .operator-submit-header {
    grid-template-columns: 1fr;
  }

  .operator-submit-option {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .operator-submit-schedule-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .operator-submit-selected-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .operator-submit-option .opportunity-avatar {
    display: none;
  }

  .operator-submit-compact-fields {
    grid-column: 1;
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .operator-submit-schedule-card .operator-submit-compact-fields {
    grid-column: 1;
  }

  .operator-submit-step-indicator-row.step-indicator-row {
    padding: 10px;
  }

  .operator-submit-step-label small {
    display: none;
  }

  .account-form-action .primary-btn {
    width: auto;
  }

  .opportunity-flow {
    grid-template-columns: repeat(10, minmax(72px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stats .stat,
  .auth-panel,
  .auth-form,
  .auth-submit-spinner,
  .auth-field-error,
  .shiny-text,
  .split-char {
    animation: none;
  }

  .hero-stats .stat,
  .hero-ribbons span,
  .hero-ribbons span::before,
  .hero-ribbons i,
  .hero-ribbons b,
  .hero-ribbons small,
  .auth-tabs::before,
  .auth-tabs button,
  .auth-field input,
  .auth-field-error,
  .auth-panel.auth-border-glow::before,
  .auth-panel.auth-border-glow::after,
  .auth-panel.auth-border-glow > .edge-light,
  .lit-border-fill,
  .split-char,
  .password-toggle {
    transition: none;
  }

  .split-char {
    opacity: 1;
    transform: none;
  }

  .shiny-text {
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .shiny-text.public-hero-lead-shiny {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .magicui-shimmer-button::before {
    animation: none;
    display: none;
  }
}

@media (max-width: 1080px) {
  .auth-gateway {
    width: min(100% - 40px, 1360px);
    grid-template-columns: 1fr;
    align-items: start;
    gap: 34px;
    min-height: auto;
    padding: 34px 0 46px;
  }

  .auth-gateway::before {
    background: none;
  }

  .auth-gateway-art {
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-position: 62% center;
    opacity: 0.45;
  }

  .brand-lockup {
    margin-bottom: 52px;
  }

  .auth-gateway .hero-copy {
    max-width: 100%;
  }

  .hero-copy .hero-type-title {
    font-size: 56px;
  }

  .auth-panel {
    max-width: 560px;
  }
}

@media (max-width: 720px) {
  .auth-gateway {
    width: min(100% - 28px, 1360px);
    padding: 26px 0 36px;
  }

  .auth-gateway-art {
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-position: 68% top;
    opacity: 0.34;
  }

  .brand-lockup {
    margin-bottom: 38px;
  }

  .brand-logo-image {
    width: min(260px, 72vw);
  }

  .hero-copy .hero-type-title {
    font-size: 40px;
    line-height: 1.16;
  }

  .hero-copy .hero-lead {
    font-size: 15px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .hero-flow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-flow-track::before {
    display: none;
  }

  .auth-panel {
    max-width: none;
    padding: 28px 22px 30px;
  }

  .auth-panel:has(.auth-form-register) {
    padding: 26px 20px 28px;
  }

  .auth-tabs {
    margin-bottom: 28px;
  }

  .auth-two-col {
    grid-template-columns: 1fr;
  }
}

.auth-session-notice {
  margin: -4px 0 18px;
  padding: 12px 14px;
  color: #9f1838;
  border: 1px solid rgba(233, 31, 69, 0.18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 241, 245, 0.98), rgba(255, 248, 250, 0.94));
  font-size: 14px;
  font-weight: 800;
  line-height: 1.65;
}

.session-idle-warning-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(19, 27, 41, 0.54);
  backdrop-filter: blur(12px);
}

.session-idle-warning {
  width: min(460px, calc(100vw - 32px));
  padding: 30px;
  color: #172033;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff 0%, #fff8fb 58%, #f4fbff 100%);
  box-shadow: 0 28px 90px rgba(16, 28, 48, 0.26);
  animation: sessionIdleWarningIn 180ms ease-out both;
}

.session-idle-warning-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  color: #e91f45;
  border-radius: 999px;
  background: rgba(233, 31, 69, 0.09);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.session-idle-warning h2 {
  margin: 16px 0 10px;
  color: #111827;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.2;
}

.session-idle-warning p {
  margin: 0;
  color: #667085;
  font-size: 15px;
  line-height: 1.8;
}

.session-idle-warning [data-idle-seconds] {
  display: inline-block;
  min-width: 2ch;
  color: #e91f45;
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}

.session-idle-warning-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.session-idle-warning-actions button {
  min-width: 128px;
  min-height: 46px;
}

@keyframes sessionIdleWarningIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 600px) {
  .session-idle-warning {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .session-idle-warning-actions {
    flex-direction: column;
  }

  .session-idle-warning-actions button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-idle-warning {
    animation: none;
  }
}

/* 横测脚本项目制工作台 */
.sp-workbench {
  --sp-ink: #20242b;
  --sp-muted: #727987;
  --sp-line: #e5e9ef;
  --sp-pink: #ed4264;
  --sp-green: #15976f;
  color: var(--sp-ink);
}

.sp-creation-mode-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.sp-test-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border: 1px solid #ffd88a;
  border-radius: 12px;
  background: #fff8e7;
  color: #855b08;
  font-size: 12px;
}

.sp-test-banner strong {
  padding: 3px 8px;
  border-radius: 999px;
  background: #ffdf91;
}

.sp-provider-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 9px 14px;
  border: 1px solid #b9e6d4;
  border-radius: 12px;
  background: linear-gradient(135deg, #eefaf5, #f7fcff);
}

.sp-provider-banner > div:first-child { display: grid; gap: 2px; }
.sp-provider-banner strong { color: #0d7556; font-size: 12px; }
.sp-provider-banner span { color: #66717d; font-size: 10.5px; }
.sp-provider-badges { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sp-provider-badges > span { padding: 4px 8px; border-radius: 999px; font-weight: 800; }
.sp-provider-badges > span.ready { background: #daf4e9; color: #087654; }
.sp-provider-badges > span.missing { background: #fff0d5; color: #906000; }
.sp-provider-badges button,
.sp-provider-warning button { border: 0; background: transparent; color: #167fa8; font: inherit; font-weight: 800; cursor: pointer; }

.sp-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.sp-sidebar {
  position: sticky;
  top: 92px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid rgba(224, 229, 236, 0.96);
  border-radius: 18px;
  background: linear-gradient(155deg, #ffffff 0%, #fffbfd 58%, #f7fcff 100%);
  box-shadow: 0 18px 42px rgba(37, 51, 67, 0.08), 0 3px 10px rgba(37, 51, 67, 0.04);
}

.sp-sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(251, 93, 122, 0), rgba(251, 93, 122, 0.72), rgba(0, 174, 236, 0.52), rgba(0, 174, 236, 0));
}

.sp-sidebar-head,
.sp-card-head,
.sp-hero,
.sp-final-bar,
.sp-file-row,
.sp-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sp-sidebar-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #222b36;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.sp-sidebar-head strong {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(221, 230, 237, 0.9);
  border-radius: 999px;
  background: linear-gradient(135deg, #f2f6f9, #edf7fb);
  color: #596674;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sp-sidebar-head {
  padding: 1px 1px 12px;
  border-bottom: 1px solid rgba(230, 234, 239, 0.86);
}

.sp-sidebar-icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-sidebar-add {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e2e8ee;
  border-radius: 10px;
  color: #5a6673;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(31, 46, 63, 0.06);
  transition: transform 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.sp-sidebar-add:hover {
  border-color: #9edcf0;
  color: #0d8fbc;
  box-shadow: 0 7px 16px rgba(38, 157, 197, 0.12);
  transform: translateY(-1px);
}

.sp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 13px 0 11px;
  padding: 0 11px;
  border: 1px solid #e2e8ee;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.94);
  box-shadow: inset 0 1px 2px rgba(35, 49, 64, 0.025);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.sp-search:focus-within {
  border-color: #83d5ef;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 174, 236, 0.09);
}

.sp-search-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #73808d;
}

.sp-search-icon .sp-sidebar-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.sp-search input {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #2f3945;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
}

.sp-search input::placeholder {
  color: #a2abb5;
}

.sp-project-list {
  display: grid;
  gap: 6px;
  min-height: 148px;
  padding: 1px;
  max-height: 430px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #d6e1e8 transparent;
}

.sp-project-entry { position: relative; }
.sp-project-entry .sp-project-item { padding-right: 34px; }
.sp-project-menu-button { position: absolute; top: 7px; right: 5px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #727b87; font-size: 18px; cursor: pointer; }
.sp-project-menu-button:hover { background: #e8f4f8; color: #1682a8; }
.sp-project-menu {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% - 10px);
  min-width: 0;
  margin: 4px 5px 0;
  padding: 5px;
  border: 1px solid #e2e7ec;
  border-radius: 9px;
  background: white;
  box-shadow: 0 8px 20px rgba(27, 39, 54, .12);
}
.sp-project-menu button { width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #c3344c; text-align: left; cursor: pointer; }
.sp-project-menu button:hover { background: #fff0f3; }

.sp-project-item {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  cursor: pointer;
}

.sp-project-item:hover,
.sp-project-item.active {
  border-color: #a7dff1;
  background: linear-gradient(135deg, #effaff, #fff6fa);
  box-shadow: 0 8px 18px rgba(54, 137, 169, 0.08);
}

.sp-project-item > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sp-project-item strong {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.sp-project-item em {
  color: var(--sp-green);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.sp-project-item small,
.sp-muted {
  color: var(--sp-muted);
  font-size: 10.5px;
}

.sp-new-button,
.sp-demo-button {
  width: 100%;
  margin-top: 10px;
}

.sp-sidebar-actions {
  display: grid;
  gap: 8px;
  margin-top: 11px;
  padding-top: 12px;
  border-top: 1px solid rgba(230, 234, 239, 0.86);
}

.sp-sidebar-actions .sp-new-button,
.sp-sidebar-actions .sp-demo-button,
.sp-sidebar-actions .sp-trash-button {
  margin-top: 0;
}

.sp-sidebar-actions .sp-new-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  border-radius: 13px;
  box-shadow: 0 12px 24px rgba(232, 54, 91, 0.19);
}

.sp-sidebar-actions .sp-new-button > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.17);
}

.sp-sidebar-actions .sp-new-button .sp-sidebar-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.sp-trash-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  border: 1px solid #e4e9ee;
  border-radius: 12px;
  color: #687583;
  background: rgba(255, 255, 255, 0.74);
}

.sp-trash-button:hover {
  border-color: #f0c4ce;
  color: #c74660;
  background: #fff7f9;
}

.sp-trash-button .sp-sidebar-icon {
  width: 15px;
  height: 15px;
}
.sp-trash-note { margin: 10px 0; padding: 8px; border-radius: 9px; background: #f5f7f9; color: #717985; font-size: 10.5px; line-height: 1.55; }
.sp-trash-item { display: grid; gap: 8px; padding: 10px; border: 1px solid #e2e6eb; border-radius: 11px; background: #fafbfc; }
.sp-trash-item > div { display: grid; gap: 3px; }
.sp-trash-item strong { font-size: 12px; }
.sp-trash-item small { color: #8a929d; font-size: 10px; }
.sp-trash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-trash-actions button { width: 100%; min-width: 0; }
.sp-trash-back-button { min-height: 34px; padding: 6px 12px; font-size: 12px; }

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

.sp-hero {
  min-height: 78px;
  padding: 14px 16px;
  border-radius: 16px;
}

.sp-hero h1 {
  margin: 2px 0 4px;
  font-size: 21px;
  line-height: 1.2;
}

.sp-hero p,
.sp-card-head p {
  margin: 0;
  color: var(--sp-muted);
  font-size: 12px;
}

.sp-hero-kicker-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.sp-hero-kicker-row > span:first-child {
  color: #3f4752;
  font-size: 12px;
  font-weight: 800;
}

.sp-project-presence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.sp-project-presence-group {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid #d8eee7;
  border-radius: 999px;
  color: #276b59;
  background: #effaf6;
  font-size: 10px;
  line-height: 1;
}

.sp-project-presence-group > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #20b486;
  box-shadow: 0 0 0 3px rgba(32, 180, 134, .12);
}

.sp-project-presence-group > b {
  flex: 0 0 auto;
  font-weight: 900;
}

.sp-project-presence-group > em {
  max-width: 112px;
  overflow: hidden;
  color: #3a6258;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-project-presence-group.is-editing {
  border-color: #ffd4df;
  color: #c62f55;
  background: #fff3f6;
}

.sp-project-presence-group.is-editing > i {
  background: #f24f78;
  box-shadow: 0 0 0 3px rgba(242, 79, 120, .12);
  animation: sp-editing-presence-pulse 1.8s ease-out infinite;
}

.sp-project-presence-group.is-editing > em { color: #9a4a60; }
.sp-project-presence-group.is-empty { border-color: #e7e9ed; color: #7d8490; background: #f7f8fa; }
.sp-project-presence-group.is-empty > i { background: #aeb4bd; box-shadow: none; animation: none; }
.sp-project-presence-group.is-empty > em { color: #8a919b; }
.sp-project-presence-group.is-loading { opacity: .72; }

@keyframes sp-editing-presence-pulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 79, 120, .28); }
  70% { box-shadow: 0 0 0 5px rgba(242, 79, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 79, 120, 0); }
}

.sp-hero > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-status-pill,
.sp-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f0f3f6;
  color: #606876;
  font-size: 10.5px;
  font-weight: 800;
}

.sp-state.ok {
  background: #e5f8ef;
  color: #0e7d59;
}

.sp-state.test {
  background: #fff0c8;
  color: #8a5a00;
}

.sp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
  padding: 6px;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
}

.sp-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  min-height: 48px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: #f8fafb;
  text-align: left;
  cursor: pointer;
}

.sp-step > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #e9edf2;
  color: #747b87;
  font-size: 11px;
  font-weight: 900;
}

.sp-step strong { font-size: 12px; }
.sp-step small { color: #858c98; font-size: 9.5px; }
.sp-step.active { background: linear-gradient(135deg, #ff6d8a, #db264c); color: white; box-shadow: 0 8px 20px rgba(219, 38, 76, 0.18); }
.sp-step.active span { background: white; color: #dc2e52; }
.sp-step.active small { color: rgba(255,255,255,.82); }
.sp-step.done { background: #e9f7f1; }
.sp-step.done span { background: var(--sp-green); color: white; }
.sp-step:disabled { opacity: .48; cursor: not-allowed; }

.sp-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 218px;
  gap: 10px;
  align-items: start;
}

.sp-stage-stack,
.sp-right-rail {
  display: grid;
  gap: 10px;
}

.sp-content-grid > *,
.sp-stage-stack,
.sp-card,
.sp-side-card { min-width: 0; }

.sp-card,
.sp-side-card {
  padding: 14px;
  border-radius: 15px;
}

.sp-card-head {
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sp-card-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.sp-card-head h2 {
  margin: 0 0 3px;
  font-size: 16px;
}

.sp-optional {
  color: #8b929d;
  font-size: 10px;
  font-weight: 500;
}

.sp-upload-compact {
  display: grid;
  grid-template-columns: 38px minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 11px;
  border: 1px dashed #a9d8e7;
  border-radius: 12px;
  background: #f4fbfd;
}

.sp-upload-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #35a9d8, #577ec7);
  color: white;
  font-size: 20px;
}

.sp-upload-compact > div,
.sp-file-row > div,
.sp-import-summary > div {
  display: grid;
  gap: 3px;
}

.sp-upload-compact small,
.sp-file-row small,
.sp-import-summary small {
  color: var(--sp-muted);
  font-size: 10.5px;
}

.sp-file-row,
.sp-import-summary {
  padding: 10px;
  border: 1px solid #dceee7;
  border-radius: 12px;
  background: #f4fbf8;
}

.sp-file-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #e9435e;
  color: white;
  font-size: 11px;
  font-weight: 900;
}

.sp-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}

.sp-settings-grid label {
  display: grid;
  gap: 5px;
}

.sp-settings-grid label > span {
  color: #545c69;
  font-size: 11px;
  font-weight: 800;
}

.sp-settings-grid input,
.sp-settings-grid select,
.sp-reference-input input,
.sp-evidence-form input,
.sp-outline-card input,
.sp-draft-actions select {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #dfe4ea;
  border-radius: 9px;
  background: white;
}

.sp-settings-wide,
.sp-settings-actions { grid-column: 1 / -1; }
.sp-settings-actions { display: flex; justify-content: flex-end; }

.sp-dimension-chips,
.sp-evidence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0;
}

.sp-dimension-chips > span,
.sp-evidence-row > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #dde4ea;
  border-radius: 8px;
  background: white;
  font-size: 10.5px;
  font-weight: 700;
}

.sp-dimension-chips small { color: var(--sp-green); }
.sp-evidence-row em { margin-left: auto; color: #8a919c; font-size: 10px; font-style: normal; }

.sp-table-wrap {
  overflow: auto;
  border: 1px solid var(--sp-line);
  border-radius: 11px;
}

.sp-table-wrap table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 10.5px; }
.sp-table-wrap th,
.sp-table-wrap td { padding: 8px; border-bottom: 1px solid #edf0f3; border-right: 1px solid #edf0f3; text-align: left; }
.sp-table-wrap th { background: #f4f6f8; color: #5a6270; white-space: nowrap; }
.sp-table-wrap tr.main { background: #effaf5; }
.sp-table-wrap td em { margin-left: 5px; padding: 2px 5px; border-radius: 5px; background: #d8f4e8; color: #0c7c58; font-size: 9px; font-style: normal; }
.sp-table-wrap td.missing { background: #fff7e5; color: #a36c00; }

.sp-warning,
.sp-success {
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 11px;
}
.sp-warning { background: #fff5de; color: #8d5f00; }
.sp-success { background: #e9f8f1; color: #0c7a55; }
.sp-provider-warning,
.sp-transcription-status { margin-top: 9px; padding: 9px 11px; border-radius: 9px; font-size: 11px; }
.sp-provider-warning { background: #fff5de; color: #8d5f00; }
.sp-transcription-status { background: #eef8fc; color: #226b86; }
.sp-upload-empty { display: grid; gap: 4px; padding: 25px; border: 1px dashed #d6dce3; border-radius: 12px; text-align: center; color: #7d8490; }
.sp-footer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; }

.sp-reference-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sp-or-divider { display: flex; align-items: center; gap: 9px; margin: 10px 0; color: #949aa4; font-size: 10px; }
.sp-or-divider::before,
.sp-or-divider::after { content: ""; flex: 1; height: 1px; background: #e7ebef; }
.sp-reference-editor,
.sp-outline-card textarea,
.sp-draft-card textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  background: #fff;
  resize: vertical;
  line-height: 1.72;
}
.sp-reference-editor { min-height: 180px; }
.sp-paragraph-list { display: grid; gap: 7px; }
.sp-paragraph-list > div { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 9px; border: 1px solid #e6eaee; border-radius: 9px; }
.sp-paragraph-list strong { color: var(--sp-green); font-size: 10px; }
.sp-paragraph-list p { margin: 0; color: #4e5662; font-size: 11.5px; line-height: 1.65; }

.sp-reference-logic-list { display: grid; gap: 9px; }
.sp-reference-logic-card { position: relative; display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.6fr); gap: 11px; padding: 11px; border: 1px solid #e1e6eb; border-radius: 12px; background: #fff; }
.sp-reference-logic-card.confirmed { border-color: #a9ddc9; background: #f6fcf9; }
.sp-reference-logic-card.dirty { border-color: #f1c879; background: #fffaf0; }
.sp-reference-logic-card > em { position: absolute; top: 9px; right: 10px; padding: 3px 7px; border-radius: 999px; background: #fff0d2; color: #8b6208; font-size: 9px; font-style: normal; font-weight: 800; }
.sp-reference-logic-card.confirmed > em { background: #dff5eb; color: #0d7a57; }
.sp-reference-logic-card.dirty > em { background: #fff0d2; color: #8b6208; }
.sp-reference-logic-source { padding: 9px; border-radius: 9px; background: #f5f7f9; }
.sp-reference-logic-source strong { color: var(--sp-green); font-size: 10px; }
.sp-reference-logic-source p { margin: 6px 0 0; color: #535b67; font-size: 10.5px; line-height: 1.65; }
.sp-reference-logic-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 20px; }
.sp-reference-logic-fields label { display: grid; gap: 4px; }
.sp-reference-logic-fields label.wide { grid-column: 1 / -1; }
.sp-reference-logic-card-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 2px; }
.sp-reference-logic-card-actions button { min-width: 132px; }
.sp-reference-logic-fields span { color: #727b87; font-size: 9.5px; font-weight: 800; }
.sp-reference-logic-fields input,
.sp-reference-logic-fields textarea { width: 100%; padding: 8px 9px; border: 1px solid #dce2e8; border-radius: 8px; background: #fff; font-size: 10.5px; line-height: 1.55; }
.sp-reference-logic-fields textarea { min-height: 66px; resize: vertical; }
.sp-reference-logic-gate { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 11px; border: 1px solid #f0cf87; border-radius: 11px; background: #fff8e9; }
.sp-reference-logic-gate.ready { border-color: #a9ddc9; background: #effaf5; }
.sp-reference-logic-gate > div:first-child { display: grid; gap: 3px; }
.sp-reference-logic-gate strong { font-size: 11px; }
.sp-reference-logic-gate span { color: #7b6650; font-size: 9.5px; }
.sp-reference-logic-gate > div:last-child { display: flex; gap: 7px; }
.sp-reference-logic-empty { display: flex; align-items: center; gap: 10px; color: #737c88; }
.sp-reference-logic-empty strong { color: #252a31; font-size: 12px; }
.sp-reference-logic-empty span { font-size: 10px; }
.sp-reference-logic-empty em { margin-left: auto; color: #a16c00; font-size: 10px; font-style: normal; }

.sp-outline-list,
.sp-draft-list { display: grid; gap: 9px; }
.sp-outline-card,
.sp-draft-card { padding: 11px; border: 1px solid #e2e7ec; border-radius: 12px; background: #fff; }
.sp-outline-card.locked,
.sp-draft-card.locked { border-color: #afe0cd; background: #f2fbf7; }
.sp-draft-card.length-warning { border-color: #f3a7b2; background: #fff8f9; box-shadow: 0 8px 24px rgba(182, 31, 58, .07); }
.sp-draft-card.length-warning textarea { border-color: #efbdc5; }
.sp-outline-top { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 7px; }
.sp-outline-top > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 999px; background: #eef2f5; font-size: 10px; font-weight: 900; }
.sp-outline-top > input { border: 0; background: transparent; font-weight: 800; }
.sp-outline-top label { color: #737b87; font-size: 10px; }
.sp-outline-top label input { width: 68px; min-height: 30px; }
.sp-outline-binding { display: grid; grid-template-columns: auto minmax(180px, 320px) minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 0 8px 34px; }
.sp-outline-binding > span { color: #555e6b; font-size: 10.5px; font-weight: 850; }
.sp-outline-binding select { min-height: 34px; padding: 6px 30px 6px 9px; border: 1px solid #dfe4ea; border-radius: 9px; background: #fff; color: #252a31; font-size: 10.5px; font-weight: 750; }
.sp-outline-binding small { color: #77818e; font-size: 9.5px; line-height: 1.45; }
.sp-outline-card textarea { min-height: 70px; }
.sp-outline-actions,
.sp-draft-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }

.sp-outline-actions {
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.sp-outline-actions .sp-outline-icon-btn {
  position: relative;
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid #dfe4ea;
  border-radius: 9px;
  color: #5b6471;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 41, 59, .05);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sp-outline-actions .sp-outline-icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.sp-outline-actions .sp-outline-icon-btn:not(:disabled):hover {
  border-color: #f3a8b8;
  color: #e34769;
  background: #fff8fa;
  box-shadow: 0 5px 13px rgba(221, 61, 98, .11);
  transform: translateY(-1px);
}

.sp-outline-actions .sp-outline-icon-btn:focus-visible {
  outline: 0;
  border-color: #f16483;
  box-shadow: 0 0 0 3px rgba(241, 100, 131, .15);
}

.sp-outline-actions .sp-outline-icon-btn:disabled {
  color: #b4bac3;
  background: #f7f8fa;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .64;
}

.sp-outline-actions .sp-outline-icon-btn::after {
  position: absolute;
  z-index: 30;
  right: 50%;
  bottom: calc(100% + 8px);
  padding: 5px 7px;
  border-radius: 6px;
  color: #fff;
  background: #252d3a;
  box-shadow: 0 6px 18px rgba(24, 32, 45, .18);
  content: attr(data-tooltip);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 3px);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}

.sp-outline-actions .sp-outline-icon-btn:hover::after,
.sp-outline-actions .sp-outline-icon-btn:focus-visible::after {
  opacity: 1;
  transform: translate(50%, 0);
}

.sp-outline-actions .sp-outline-lock-btn {
  border-color: #ff6380;
  color: #fff;
  background: linear-gradient(135deg, #ff5f83, #ff6d75);
  box-shadow: 0 5px 13px rgba(238, 72, 105, .2);
}

.sp-outline-actions .sp-outline-lock-btn:not(:disabled):hover {
  border-color: #f24c70;
  color: #fff;
  background: linear-gradient(135deg, #f45478, #fa636d);
}

.sp-outline-actions .sp-outline-lock-btn.is-unlock {
  border-color: #9fd9c3;
  color: #13795b;
  background: #eff9f5;
  box-shadow: none;
}

.sp-outline-actions .sp-outline-icon-btn.is-loading svg { animation: spOutlineActionSpin 1s linear infinite; }

@keyframes spOutlineActionSpin { to { transform: rotate(360deg); } }

.sp-draft-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin-bottom: 7px; }
.sp-draft-top > div { display: flex; align-items: center; gap: 7px; }
.sp-draft-top span { color: var(--sp-green); font-size: 10px; font-weight: 900; }
.sp-draft-top strong { font-size: 13px; }
.sp-draft-top em { color: #7c8490; font-size: 10.5px; font-style: normal; }
.sp-draft-top small { padding: 3px 7px; border-radius: 999px; background: #f0f3f5; color: #6b7380; font-size: 9.5px; }
.sp-draft-card.length-warning .sp-draft-top small { background: #ffe2e7; color: #ad1f3a; }
.sp-draft-card textarea { min-height: 126px; margin-bottom: 8px; }
.sp-draft-actions .danger { color: #c83049; }
.sp-draft-compare-trigger {
  border-color: #9eddf5 !important;
  background: #eefaff !important;
  color: #0785bc !important;
  user-select: none;
  touch-action: manipulation;
}
.sp-draft-compare-trigger:not(:disabled):active {
  border-color: #55bde5 !important;
  background: #dff6ff !important;
  transform: translateY(1px);
}
.sp-draft-compare-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: start center;
  padding: 28px;
  overflow-y: auto;
  background: rgba(25, 34, 47, .52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sp-draft-compare-dialog {
  position: relative;
  width: min(1120px, 100%);
  margin: auto 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(20, 31, 47, .22);
}
.sp-draft-compare-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf0f3;
}
.sp-draft-compare-dialog > header > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.sp-draft-compare-dialog > header strong { font-size: 17px; }
.sp-draft-compare-dialog > header span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #eaf8f3;
  color: #0c7a55;
  font-size: 10.5px;
  font-weight: 800;
}
.sp-draft-compare-dialog > header small { color: #7c8490; font-size: 10.5px; }
.sp-draft-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.sp-draft-compare-grid article {
  min-width: 0;
  padding: 18px;
  border-radius: 14px;
}
.sp-draft-compare-grid article.reference { border: 1px solid #cfe9de; background: #f3fbf7; }
.sp-draft-compare-grid article.draft { border: 1px solid #f2ccd4; background: #fff5f7; }
.sp-draft-compare-grid article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sp-draft-compare-grid article > div strong { font-size: 12px; }
.sp-draft-compare-grid article.reference > div strong { color: #0d8d66; }
.sp-draft-compare-grid article.draft > div strong { color: #d92f55; }
.sp-draft-compare-grid article > div span { color: #7b8490; font-size: 9.5px; white-space: nowrap; }
.sp-draft-compare-grid p {
  margin: 10px 0 0;
  color: #414a56;
  font-size: 11px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sp-draft-compare-grid textarea {
  width: 100%;
  min-height: 180px;
  margin: 10px 0 0;
  padding: 12px 13px;
  resize: vertical;
  border: 1px solid #efb9c5;
  border-radius: 10px;
  color: #414a56;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  line-height: 1.75;
}
.sp-draft-compare-grid textarea:focus {
  border-color: #eb6c88;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(235, 108, 136, .1);
}
.sp-draft-compare-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.sp-draft-compare-edit-actions small {
  color: #8a7480;
  font-size: 9.5px;
}
.sp-draft-compare-edit-actions button {
  flex: 0 0 auto;
  min-width: 92px;
}
.sp-draft-compare-readonly-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #9b6b75;
  background: rgba(255, 255, 255, .72);
  font-size: 9.5px;
}
.sp-draft-compare-dialog > footer {
  margin-top: 13px;
  color: #7c8490;
  font-size: 10px;
  text-align: center;
}
.sp-draft-compare-exit-backdrop {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 22px;
  border-radius: inherit;
  background: rgba(30, 39, 52, .48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.sp-draft-compare-exit-dialog {
  width: min(430px, 100%);
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 22px 65px rgba(20, 31, 47, .28);
  text-align: center;
}
.sp-draft-compare-exit-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: #d92f55;
  background: #fff0f3;
  font-size: 22px;
  font-weight: 900;
}
.sp-draft-compare-exit-dialog h3 { margin: 0; color: #26303c; font-size: 17px; }
.sp-draft-compare-exit-dialog p { margin: 8px 0 19px; color: #737d89; font-size: 11px; line-height: 1.6; }
.sp-draft-compare-exit-dialog > div:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.sp-draft-compare-exit-dialog button { min-width: 110px; }

@media (max-width: 720px) {
  .sp-draft-compare-backdrop { padding: 10px; }
  .sp-draft-compare-dialog { margin: 0; padding: 12px; border-radius: 14px; }
  .sp-draft-compare-dialog > header { align-items: flex-start; }
  .sp-draft-compare-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .sp-draft-compare-grid article { padding: 13px; }
  .sp-draft-compare-grid p { font-size: 10.5px; line-height: 1.7; }
  .sp-draft-compare-grid textarea { min-height: 160px; font-size: 10.5px; }
  .sp-draft-compare-edit-actions { align-items: stretch; flex-direction: column; }
  .sp-draft-compare-edit-actions button { width: 100%; }
  .sp-draft-compare-exit-backdrop { position: fixed; padding: 16px; border-radius: 0; }
  .sp-draft-compare-exit-dialog { padding: 21px 16px; }
  .sp-draft-compare-exit-dialog > div:last-child { align-items: stretch; flex-direction: column; }
  .sp-draft-compare-exit-dialog button { width: 100%; }
}

.sp-draft-length-summary,
.sp-draft-length-warning { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #f1b7c0; border-radius: 10px; background: #fff2f4; color: #9f2740; }
.sp-draft-length-summary { margin-bottom: 9px; padding: 10px 12px; }
.sp-draft-length-warning { margin-bottom: 8px; padding: 8px 10px; }
.sp-draft-length-summary strong,
.sp-draft-length-warning strong { font-size: 11px; }
.sp-draft-length-summary span,
.sp-draft-length-warning span { color: #8f5360; font-size: 10px; line-height: 1.5; }

.sp-evidence-panel { margin-top: 10px; padding: 11px; border: 1px solid #f0d28c; border-radius: 12px; background: #fff9eb; }
.sp-evidence-panel > div p { margin: 3px 0 9px; color: #8a6b2b; font-size: 10.5px; }
.sp-evidence-form { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1.5fr) auto; align-items: center; gap: 7px; margin-top: 6px; }
.sp-evidence-form span { font-size: 10.5px; font-weight: 800; }

.sp-final-bar { position: sticky; bottom: 6px; margin-top: 11px; padding: 10px 12px; border: 1px solid #e1e6eb; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 10px 25px rgba(24, 35, 48, .08); backdrop-filter: blur(10px); }
.sp-final-bar > div { display: flex; align-items: center; gap: 8px; }
.sp-final-bar > div:first-child { display: grid; gap: 3px; }
.sp-final-bar small { color: #7c8390; font-size: 10px; }

.sp-side-card h3 { margin: 0 0 10px; font-size: 13px; }
.sp-side-card dl { display: grid; gap: 8px; margin: 0; }
.sp-side-card dl > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #edf0f3; }
.sp-side-card dt { color: #7e8591; font-size: 10px; }
.sp-side-card dd { margin: 0; max-width: 118px; text-align: right; font-size: 10.5px; font-weight: 800; }
.sp-feedback { display: grid; gap: 3px; padding: 8px; border-radius: 8px; background: #f7f8fa; }
.sp-feedback + .sp-feedback { margin-top: 5px; }
.sp-feedback strong { font-size: 10.5px; }
.sp-feedback small { color: #8a919b; font-size: 9px; }
.sp-version { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; }
.sp-version + .sp-version { margin-top: 7px; }
.sp-version > span { width: 8px; height: 8px; border-radius: 999px; background: var(--sp-green); }
.sp-version > div { display: grid; gap: 2px; }
.sp-version strong { font-size: 10.5px; }
.sp-version small { color: #8a919b; font-size: 9px; }
.sp-version-actions { display: flex !important; gap: 4px; margin-left: auto; }
.sp-reopen-btn { width: 100%; margin-top: 14px; }

.sp-empty,
.sp-loading { display: grid; place-items: center; min-height: 420px; padding: 30px; text-align: center; border-radius: 16px; }
.sp-empty > div:first-child { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, #ff7690, #e33458); color: white; font-size: 25px; }
.sp-empty h2 { margin: 14px 0 4px; }
.sp-empty p { max-width: 430px; margin: 0 0 14px; color: var(--sp-muted); }
.sp-empty > div:last-child { display: flex; gap: 8px; }
.sp-sidebar-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-height: 144px;
  padding: 20px 10px;
  border: 1px dashed #dfe7ed;
  border-radius: 14px;
  color: #788593;
  background: linear-gradient(145deg, rgba(249, 251, 252, 0.88), rgba(255, 248, 251, 0.68));
  text-align: center;
}

.sp-sidebar-empty > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 3px;
  border: 1px solid #dce9ef;
  border-radius: 13px;
  color: #319bc1;
  background: linear-gradient(135deg, #eefaff, #fff2f7);
  box-shadow: 0 8px 18px rgba(47, 128, 157, 0.08);
}

.sp-sidebar-empty > span .sp-sidebar-icon {
  width: 21px;
  height: 21px;
}

.sp-sidebar-empty > strong {
  color: #596673;
  font-size: 12px;
}

.sp-sidebar-empty > small {
  color: #9aa4ae;
  font-size: 10px;
}
.sp-brief-backdrop {
  z-index: 80;
  padding: 24px;
  background: rgba(30, 35, 46, .48);
  backdrop-filter: blur(8px);
}
.sp-brief-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(860px, calc(100vw - 48px));
  max-height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(26, 33, 48, .28);
}
.sp-brief-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid #e9edf2;
  background: linear-gradient(135deg, #fff8fa 0%, #f4fbff 100%);
}
.sp-brief-head > div { min-width: 0; }
.sp-brief-head h2 {
  max-width: 680px;
  margin: 7px 0 4px;
  overflow: hidden;
  color: #202632;
  font-size: 18px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-brief-head small { color: #7a8391; font-size: 11px; }
.sp-brief-close { flex: 0 0 auto; min-height: 36px; padding: 8px 13px; }
.sp-brief-text {
  min-height: 220px;
  overflow: auto;
  padding: 24px 26px 30px;
  background: #fff;
  color: #3f4857;
  font-size: 14px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.sp-delete-modal { width: min(460px, calc(100vw - 28px)); text-align: center; }
.script-project-error-layer {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(27, 34, 45, .48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.script-project-error-layer > section {
  display: grid;
  justify-items: center;
  width: min(460px, calc(100vw - 28px));
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(20, 31, 47, .24);
  text-align: center;
}
.script-project-error-layer > section > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: #fff0f3; color: #d23650; font-size: 24px; font-weight: 900; }
.script-project-error-layer > section > strong { margin-top: 12px; font-size: 20px; }
.script-project-error-layer > section > p { margin: 9px 0 18px; color: #626d7b; line-height: 1.7; white-space: pre-wrap; }
.script-project-error-layer > section > div { display: flex; justify-content: center; gap: 9px; }
.sp-delete-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 16px; background: #fff0f3; color: #d23650; font-size: 24px; }
.sp-delete-modal h2 { margin: 0 0 8px; }
.sp-delete-modal > p { margin: 0; color: #69727f; line-height: 1.65; }
.sp-delete-notice { display: grid; gap: 3px; margin: 14px 0; padding: 11px; border-radius: 10px; background: #fff7e6; color: #865d0a; text-align: left; }
.sp-delete-notice span { font-size: 10.5px; }

@media (max-width: 1180px) {
  .sp-content-grid { grid-template-columns: 1fr; }
  .sp-right-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-sidebar { position: static; }
  .sp-project-list { max-height: 160px; }
  .sp-right-rail { grid-template-columns: 1fr; }
  .sp-reference-logic-card { grid-template-columns: 1fr; }
  .sp-reference-logic-fields { padding-top: 0; }
  .sp-reference-logic-gate { align-items: stretch; flex-direction: column; }
}

@media (max-width: 640px) {
  .page-secondary-nav {
    width: 100%;
  }

  .sp-test-banner,
  .sp-provider-banner { align-items: flex-start; flex-direction: column; }
  .sp-provider-badges { justify-content: flex-start; }
  .sp-steps { gap: 3px; padding: 4px; }
  .sp-step { grid-template-columns: 24px 1fr; padding: 5px; }
  .sp-step small { display: none; }
  .sp-step > span { grid-row: 1; width: 23px; height: 23px; }
  .sp-upload-compact { grid-template-columns: 36px 1fr; }
  .sp-upload-compact button { grid-column: 1 / -1; width: 100%; }
  .sp-card-head-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0; }
  .sp-card-head-actions button { width: 100%; }
  .sp-settings-grid { grid-template-columns: 1fr; }
  .sp-settings-wide,
  .sp-settings-actions { grid-column: 1; }
  .sp-file-row,
  .sp-import-summary,
  .sp-final-bar { align-items: stretch; flex-direction: column; }
  .sp-reference-input { grid-template-columns: 1fr; }
  .sp-reference-logic-fields { grid-template-columns: 1fr; }
  .sp-reference-logic-fields label.wide { grid-column: 1; }
  .sp-reference-logic-card-actions { grid-column: 1; }
  .sp-reference-logic-card-actions button { width: 100%; }
  .sp-reference-logic-gate > div:last-child { display: grid; grid-template-columns: 1fr; }
  .sp-reference-logic-empty { align-items: flex-start; flex-direction: column; }
  .sp-reference-logic-empty em { margin-left: 0; }
  .sp-outline-top { grid-template-columns: 26px 1fr; }
  .sp-brief-backdrop { padding: 12px; }
  .sp-brief-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); border-radius: 16px; }
  .sp-brief-head { gap: 10px; padding: 16px; }
  .sp-brief-head h2 { font-size: 15px; }
  .sp-brief-head small { display: none; }
  .sp-brief-close { min-height: 34px; padding: 7px 10px; }
  .sp-brief-text { min-height: 180px; padding: 18px; font-size: 13px; }
  .sp-outline-top label { grid-column: 2; }
  .sp-outline-binding { grid-template-columns: 1fr; margin-left: 34px; }
  .sp-draft-top { grid-template-columns: 1fr auto; }
  .sp-draft-top small { grid-column: 1 / -1; justify-self: start; }
  .sp-evidence-form { grid-template-columns: 1fr; }
  .sp-final-bar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .sp-hero { align-items: flex-start; flex-direction: column; }
  .sp-hero-kicker-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .sp-project-presence { width: 100%; flex-wrap: wrap; }
  .sp-project-presence-group { flex: 1 1 140px; }
  .sp-project-presence-group > em { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-project-presence-group.is-editing > i { animation: none; }
}

/* Internal Bilibili inspiration board */
.internal-bili-popular-board {
  display: grid;
  gap: 18px;
  margin: 22px 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(214, 222, 232, .86);
  background:
    radial-gradient(circle at 91% 5%, rgba(103, 213, 255, .16), transparent 28%),
    radial-gradient(circle at 4% 100%, rgba(255, 108, 143, .11), transparent 29%),
    rgba(255, 255, 255, .96);
}
.internal-bili-board-head,
.internal-bili-toolbar,
.internal-bili-board-meta,
.internal-bili-actions,
.internal-bili-video-modal header,
.internal-bili-video-modal footer,
.director-hero,
.director-hero-actions {
  display: flex;
  align-items: center;
}
.internal-bili-board-head,
.internal-bili-toolbar,
.internal-bili-video-modal header,
.internal-bili-video-modal footer,
.director-hero { justify-content: space-between; }
.internal-bili-board-head { gap: 24px; }
.internal-bili-board-head h2 { margin: 5px 0 4px; font-size: clamp(22px, 2.2vw, 30px); }
.internal-bili-board-head p { margin: 0; color: #737d8c; line-height: 1.6; }
.internal-bili-board-meta { flex: 0 0 auto; gap: 8px; }
.internal-bili-board-meta span {
  padding: 7px 10px;
  border: 1px solid #e2e8ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  color: #6c7583;
  font-size: 11px;
  font-weight: 700;
}
.internal-bili-toolbar { align-items: flex-start; gap: 14px; }
.internal-bili-scope-tabs,
.internal-bili-categories { display: flex; flex: 1; flex-wrap: wrap; gap: 7px; }
.internal-bili-scope-tabs {
  padding: 4px;
  border: 1px solid #e0e7ef;
  border-radius: 13px;
  background: #f4f7fa;
}
.internal-bili-scope-tabs button,
.internal-bili-categories button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #657080;
  cursor: pointer;
  font-weight: 750;
}
.internal-bili-scope-tabs button { padding: 9px 14px; }
.internal-bili-scope-tabs button.active {
  background: #fff;
  color: #0b8dbb;
  box-shadow: 0 5px 16px rgba(42, 70, 91, .1);
}
.internal-bili-actions { gap: 8px; }
.internal-bili-hot-topics {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(139, 215, 241, .72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(78, 191, 237, .12), transparent 28%),
    radial-gradient(circle at 7% 100%, rgba(251, 93, 122, .09), transparent 30%),
    linear-gradient(135deg, #f8fdff, #fff9fb);
}
.internal-bili-hot-topics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.internal-bili-hot-topics-head > div:first-child > span { color: #0b8bb8; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.internal-bili-hot-topics-head h3 { margin: 3px 0 3px; color: #232a35; font-size: 20px; }
.internal-bili-hot-topics-head p { margin: 0; color: #778190; font-size: 11px; }
.internal-bili-hot-topics-head > div:last-child { display: grid; justify-items: end; gap: 5px; }
.internal-bili-hot-topics-head > div:last-child > span {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}
.internal-bili-hot-topics-head > div:last-child > span.ai { color: #087ea8; background: #dff7ff; }
.internal-bili-hot-topics-head > div:last-child > span.local { color: #a45169; background: #fff0f4; }
.internal-bili-hot-topics-head small { color: #a0a7b2; font-size: 9px; }
.internal-bili-hot-topics-warning { padding: 8px 10px; border-radius: 9px; color: #80621a; background: #fff8dd; font-size: 10px; line-height: 1.6; }
.internal-bili-hot-topics-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.internal-bili-hot-topic-card {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(221, 229, 237, .94);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 9px 22px rgba(39, 76, 102, .06);
}
.internal-bili-hot-topic-card > span { color: #43b6e2; font-size: 11px; font-weight: 950; }
.internal-bili-hot-topic-card h4 { margin: 0 0 5px; color: #252c37; font-size: 14px; line-height: 1.45; }
.internal-bili-hot-topic-card p { margin: 0; color: #7c8693; font-size: 10px; line-height: 1.6; }
.internal-bili-hot-topic-card dl { display: grid; gap: 7px; margin: 0; }
.internal-bili-hot-topic-card dl > div { display: grid; gap: 2px; }
.internal-bili-hot-topic-card dt { color: #a0a8b4; font-size: 8px; font-weight: 850; }
.internal-bili-hot-topic-card dd { margin: 0; color: #596574; font-size: 10px; line-height: 1.55; }
.internal-bili-hot-topic-card > strong { align-self: end; padding-top: 9px; border-top: 1px solid #edf1f4; color: #e84e79; font-size: 11px; line-height: 1.55; }
.internal-bili-hot-topic-loading,
.internal-bili-hot-topic-error {
  display: grid;
  min-height: 118px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: #7a8491;
  text-align: center;
}
.internal-bili-hot-topic-loading i { width: 25px; height: 25px; border: 3px solid #dceef5; border-top-color: #2caedc; border-radius: 50%; animation: spin .8s linear infinite; }
.internal-bili-hot-topic-loading strong,
.internal-bili-hot-topic-error strong { color: #3c4552; font-size: 14px; }
.internal-bili-hot-topic-loading span,
.internal-bili-hot-topic-error span { font-size: 10px; }
.internal-bili-hot-topic-error .plain-btn { margin-top: 5px; }
.internal-bili-hot-topics.has-error { border-color: #ffd2da; background: #fff8fa; }
.internal-bili-categories button {
  padding: 8px 12px;
  border: 1px solid #e4e9ef;
  background: rgba(255, 255, 255, .8);
  font-size: 12px;
}
.internal-bili-categories button:hover,
.internal-bili-categories button.active { border-color: #91dff8; background: #eaf9ff; color: #087eab; }
.internal-bili-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce7ef;
  border-radius: 15px;
  background: rgba(244, 250, 253, .88);
}
.internal-bili-search input {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid #dbe3eb;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #202833;
  font: inherit;
}
.internal-bili-search input:focus { border-color: #69c9ea; box-shadow: 0 0 0 3px rgba(105, 201, 234, .14); }
.internal-bili-search-result {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid #a7e1f4;
  border-radius: 16px;
  background: linear-gradient(120deg, #f0fbff, #fff7fa);
  box-shadow: 0 12px 30px rgba(35, 101, 129, .08);
}
.internal-bili-search-cover { display: grid; aspect-ratio: 16 / 9; overflow: hidden; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #d9f6ff, #ffe1e9); }
.internal-bili-search-cover img { width: 100%; height: 100%; object-fit: cover; }
.internal-bili-search-cover i { color: #0b8dbb; font-size: 22px; font-style: normal; font-weight: 900; }
.internal-bili-search-copy { min-width: 0; }
.internal-bili-search-copy > span { color: #0986b2; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.internal-bili-search-copy h3 { margin: 5px 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.internal-bili-search-copy p { margin: 0; color: #737e8b; font-size: 11px; }
.internal-bili-search-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.internal-bili-search-actions a { text-decoration: none; }
.internal-bili-stale { padding: 10px 12px; border: 1px solid #ffe2a8; border-radius: 11px; background: #fff9e9; color: #876012; font-size: 11px; }
.internal-bili-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.internal-bili-pagination > span { min-width: 100px; padding: 9px 12px; border: 1px solid #e2e8ef; border-radius: 999px; background: #f7f9fb; color: #566171; font-size: 11px; font-weight: 800; text-align: center; }
.internal-bili-pagination button:disabled { cursor: not-allowed; opacity: .46; }
.internal-bili-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.internal-bili-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1e7ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(34, 54, 73, .06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.internal-bili-card:hover { transform: translateY(-3px); border-color: #9bdff5; box-shadow: 0 16px 32px rgba(34, 95, 125, .12); }
.internal-bili-card > button { display: grid; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.internal-bili-cover { position: relative; display: grid; aspect-ratio: 16 / 9; overflow: hidden; place-items: center; background: linear-gradient(135deg, #dff7ff, #ffe6ee); }
.internal-bili-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.internal-bili-card:hover .internal-bili-cover img { transform: scale(1.035); }
.internal-bili-cover > i { color: rgba(10, 143, 185, .7); font-size: 34px; font-style: normal; font-weight: 900; }
.internal-bili-cover > b,
.internal-bili-cover > em { position: absolute; z-index: 1; border-radius: 999px; color: #fff; font-size: 10px; font-style: normal; font-weight: 850; }
.internal-bili-cover > b { top: 9px; left: 9px; min-width: 27px; padding: 6px 7px; background: rgba(21, 28, 40, .76); text-align: center; }
.internal-bili-cover > em { right: 9px; bottom: 9px; padding: 6px 9px; background: rgba(10, 139, 182, .88); }
.internal-bili-copy { display: grid; gap: 7px; padding: 13px 14px 15px; }
.internal-bili-copy strong { min-height: 42px; overflow: hidden; color: #202631; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.internal-bili-copy small { overflow: hidden; color: #7a8492; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.internal-bili-copy > span { color: #0b86b1; font-size: 11px; font-weight: 750; }
.internal-bili-state { display: grid; justify-items: center; gap: 7px; padding: 46px 18px; border: 1px dashed #d8e1ea; border-radius: 15px; color: #76808e; text-align: center; }
.internal-bili-state strong { color: #3d4653; font-size: 16px; }
.internal-bili-state.error { border-color: #ffc8d1; background: #fff6f8; color: #a54356; }
.internal-bili-state .plain-btn { margin-top: 7px; }
.internal-bili-skeleton { overflow: hidden; border: 1px solid #edf0f3; border-radius: 16px; background: #fff; }
.internal-bili-skeleton i,
.internal-bili-skeleton span { display: block; background: linear-gradient(100deg, #eef2f5 20%, #f8fafb 40%, #eef2f5 60%); background-size: 220% 100%; animation: internalBiliShimmer 1.25s linear infinite; }
.internal-bili-skeleton i { aspect-ratio: 16 / 9; }
.internal-bili-skeleton span { height: 12px; margin: 13px 14px 0; border-radius: 6px; }
.internal-bili-skeleton span:last-child { width: 58%; margin-bottom: 16px; }
@keyframes internalBiliShimmer { to { background-position-x: -220%; } }

.internal-bili-video-backdrop { z-index: 3700; padding: 24px; background: rgba(17, 24, 35, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.internal-bili-video-modal {
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(8, 18, 30, .35);
}
.internal-bili-video-modal header { gap: 18px; padding: 18px 20px; border-bottom: 1px solid #e8ecf1; }
.internal-bili-video-modal header > div { min-width: 0; }
.internal-bili-video-modal h2 { margin: 4px 0 3px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.internal-bili-video-modal header p { margin: 0; color: #7c8592; font-size: 11px; }
.internal-bili-player { aspect-ratio: 16 / 9; background: #101319; }
.internal-bili-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.internal-bili-video-modal footer { gap: 14px; padding: 13px 20px; }
.internal-bili-video-modal footer span { color: #7b8491; font-size: 11px; }
.internal-bili-search-error-backdrop { z-index: 3800; background: rgba(23, 31, 43, .58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.internal-bili-search-error-modal { display: grid; justify-items: center; width: min(420px, calc(100vw - 28px)); padding: 25px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 19px; background: #fff; box-shadow: 0 28px 80px rgba(20, 31, 47, .24); text-align: center; }
.internal-bili-search-error-modal > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: #fff0f3; color: #d23650; font-size: 25px; font-weight: 900; }
.internal-bili-search-error-modal h2 { margin: 12px 0 6px; font-size: 20px; }
.internal-bili-search-error-modal p { margin: 0 0 18px; color: #687382; line-height: 1.7; }

.director-hero {
  gap: 24px;
  margin-bottom: 22px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 22px;
  background: linear-gradient(125deg, rgba(255, 239, 244, .96), rgba(232, 249, 255, .96));
  box-shadow: 0 18px 45px rgba(44, 75, 99, .09);
}
.director-hero h1 { margin: 7px 0 6px; font-size: clamp(25px, 3vw, 36px); }
.director-hero p { margin: 0; color: #687381; }
.director-hero-actions { flex: 0 0 auto; gap: 9px; }
.director-recent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.director-recent-card { padding: 20px; }
.director-recent-list { display: grid; gap: 8px; margin-top: 15px; }
.director-recent-list > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 13px; border: 1px solid #e4e9ef; border-radius: 12px; background: #fbfcfd; color: inherit; cursor: pointer; text-align: left; }
.director-recent-list > button:hover { border-color: #99dcf3; background: #f1fbff; }
.director-recent-list > button span { display: grid; min-width: 0; gap: 4px; }
.director-recent-list strong,
.director-recent-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.director-recent-list small,
.director-recent-list em { color: #7a8491; font-size: 10.5px; font-style: normal; }
.director-recent-list em { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .internal-bili-hot-topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .internal-bili-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .director-hero { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .internal-bili-popular-board { gap: 14px; margin: 16px 0; padding: 16px; }
  .internal-bili-board-head,
  .internal-bili-toolbar,
  .internal-bili-video-modal header,
  .internal-bili-video-modal footer { align-items: flex-start; flex-direction: column; }
  .internal-bili-board-meta { align-self: stretch; justify-content: space-between; }
  .internal-bili-categories { width: 100%; }
  .internal-bili-categories button { flex: 1 1 calc(50% - 7px); }
  .internal-bili-actions { width: 100%; }
  .internal-bili-actions button { flex: 1; }
  .internal-bili-hot-topics { padding: 14px; }
  .internal-bili-hot-topics-head { flex-direction: column; }
  .internal-bili-hot-topics-head > div:last-child { justify-items: start; }
  .internal-bili-hot-topics-grid { grid-template-columns: 1fr; }
  .internal-bili-search { grid-template-columns: 1fr; }
  .internal-bili-search-result { grid-template-columns: 1fr; }
  .internal-bili-search-cover { width: 100%; }
  .internal-bili-search-copy h3 { white-space: normal; }
  .internal-bili-search-actions { display: grid; grid-template-columns: 1fr; }
  .internal-bili-search-actions > * { width: 100%; text-align: center; }
  .internal-bili-pagination { display: grid; grid-template-columns: 1fr auto 1fr; }
  .internal-bili-pagination button { width: 100%; }
  .internal-bili-grid { grid-template-columns: 1fr; }
  .internal-bili-copy strong { min-height: auto; }
  .internal-bili-video-backdrop { padding: 10px; }
  .internal-bili-video-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 16px; }
  .internal-bili-video-modal header { position: relative; padding: 14px; }
  .internal-bili-video-modal header .plain-btn { position: absolute; top: 12px; right: 12px; }
  .internal-bili-video-modal h2 { max-width: calc(100vw - 125px); font-size: 15px; }
  .internal-bili-video-modal footer { gap: 9px; padding: 12px 14px; }
  .internal-bili-video-modal footer .primary-btn { width: 100%; text-align: center; }
  .director-hero { margin-bottom: 16px; padding: 20px; }
  .director-hero-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .director-recent-grid { grid-template-columns: 1fr; }
}

/* 单测与横测脚本：统一表单控件 */
.sp-workbench input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
.sp-workbench select,
.sp-workbench textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  outline: none;
  background: #fff;
  color: #303640;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(33, 45, 61, 0.025);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.sp-workbench textarea {
  line-height: 1.7;
  resize: vertical;
}

.sp-workbench input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
.sp-workbench select:focus,
.sp-workbench textarea:focus {
  border-color: #fb5d7a;
  box-shadow: 0 0 0 4px rgba(251, 93, 122, 0.14) !important;
}

.sp-workbench input::placeholder,
.sp-workbench textarea::placeholder {
  color: #a1a8b3;
}

.sp-workbench input:disabled,
.sp-workbench select:disabled,
.sp-workbench textarea:disabled {
  border-color: #e8ebef;
  background: #f5f7f9;
  color: #8a929e;
  cursor: not-allowed;
  box-shadow: none;
}

.sp-workbench .sp-settings-grid label > span,
.sp-workbench .single-facts-text-grid label > span,
.sp-workbench .single-fact-row label > span,
.sp-workbench .sp-reference-logic-fields label > span {
  color: #555d69;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.sp-workbench .single-facts-text-grid textarea {
  min-height: 132px;
}

.sp-workbench .single-fact-row {
  align-items: end;
}

.sp-workbench .sp-search input {
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sp-workbench .sp-outline-top label input {
  width: 76px;
  min-height: 40px;
  padding: 7px 9px;
}

.sp-workbench .sp-draft-actions select {
  width: auto;
  min-width: 164px;
}

/* 单测与横测脚本：正文逐段操作使用紧凑图标工具栏 */
.sp-draft-actions {
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.sp-workbench .sp-draft-actions select {
  width: auto;
  min-width: 142px;
  height: 32px;
  min-height: 32px;
  padding: 0 30px 0 10px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 30px;
}

.sp-draft-actions .sp-draft-icon-btn {
  position: relative;
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid #dfe4ea;
  border-radius: 9px;
  color: #5b6471;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 41, 59, .05);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sp-draft-actions .sp-draft-icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.sp-draft-actions .sp-draft-icon-btn:not(:disabled):hover {
  border-color: #f3a8b8;
  color: #e34769;
  background: #fff8fa;
  box-shadow: 0 5px 13px rgba(221, 61, 98, .11);
  transform: translateY(-1px);
}

.sp-draft-actions .sp-draft-icon-btn:focus-visible {
  outline: 0;
  border-color: #f16483;
  box-shadow: 0 0 0 3px rgba(241, 100, 131, .15);
}

.sp-draft-actions .sp-draft-icon-btn:disabled {
  color: #b4bac3;
  background: #f7f8fa;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .64;
}

.sp-draft-actions .sp-draft-icon-btn::after {
  position: absolute;
  z-index: 30;
  right: 50%;
  bottom: calc(100% + 8px);
  padding: 5px 7px;
  border-radius: 6px;
  color: #fff;
  background: #252d3a;
  box-shadow: 0 6px 18px rgba(24, 32, 45, .18);
  content: attr(data-tooltip);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 3px);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}

.sp-draft-actions .sp-draft-icon-btn:hover::after,
.sp-draft-actions .sp-draft-icon-btn:focus-visible::after {
  opacity: 1;
  transform: translate(50%, 0);
}

.sp-draft-actions .sp-draft-reject-btn { color: #c83049; }

.sp-draft-actions .sp-draft-lock-btn {
  border-color: #ff6380;
  color: #fff;
  background: linear-gradient(135deg, #ff5f83, #ff6d75);
  box-shadow: 0 5px 13px rgba(238, 72, 105, .2);
}

.sp-draft-actions .sp-draft-lock-btn:not(:disabled):hover {
  border-color: #f24c70;
  color: #fff;
  background: linear-gradient(135deg, #f45478, #fa636d);
}

.sp-draft-actions .sp-draft-lock-btn.is-unlock {
  border-color: #9fd9c3;
  color: #13795b;
  background: #eff9f5;
  box-shadow: none;
}

.sp-draft-actions .sp-draft-icon-btn.is-loading svg { animation: spOutlineActionSpin 1s linear infinite; }

@media (max-width: 720px) {
  .sp-outline-actions,
  .sp-draft-actions { justify-content: flex-start; }

  .sp-workbench .sp-draft-actions select {
    width: 100%;
  }
}
.opportunity-account-assignment {
  display: inline-flex;
  align-items: end;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e4e8ee;
  border-radius: 14px;
  background: #f8fafc;
}

.opportunity-account-assignment label {
  display: grid;
  gap: 3px;
}

.opportunity-account-assignment label span {
  color: #7c8594;
  font-size: 11px;
  font-weight: 700;
}

.opportunity-account-assignment select {
  min-width: 112px;
  height: 32px;
  padding: 0 30px 0 10px;
  border: 1px solid #dfe4eb;
  border-radius: 10px;
  background: #fff;
  color: #303642;
  font: inherit;
  font-size: 13px;
}

@media (max-width: 900px) {
  .opportunity-account-assignment {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* 管理后台：客户与员工使用量双看板 */
.behavior-monitoring-page {
  display: grid;
  gap: 18px;
}

.behavior-monitoring-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(201, 226, 237, .9);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,251,255,.96));
  box-shadow: 0 14px 34px rgba(35, 105, 132, .08);
}

.behavior-monitoring-hero h1 {
  margin: 5px 0 7px;
  color: #202630;
  font-size: 30px;
}

.behavior-monitoring-hero p {
  max-width: 680px;
  margin: 0;
  color: #77818e;
  font-size: 13px;
  line-height: 1.7;
}

.behavior-monitoring-hero > div:last-child {
  display: grid;
  flex: 0 0 auto;
  min-width: 150px;
  gap: 2px;
  padding: 16px 20px;
  border-radius: 14px;
  color: #37687b;
  background: #eaf8fd;
}

.behavior-monitoring-hero > div:last-child strong { font-size: 26px; }
.behavior-monitoring-hero > div:last-child span { font-size: 11px; font-weight: 800; }
.behavior-monitoring-hero > div:last-child small { color: #7c9aa7; font-size: 9px; }

.behavior-insight-panel {
  display: grid;
  gap: 15px;
  padding: 22px;
  border: 1px solid #e8ebef;
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 28px rgba(24,25,28,.06);
}

.behavior-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.behavior-panel-head h2 { margin: 4px 0; color: #2a303a; font-size: 20px; }
.behavior-panel-head p { margin: 0; color: #8d949e; font-size: 11px; }
.behavior-panel-head > span { padding: 6px 9px; border-radius: 8px; color: #71808b; background: #f4f7f9; font-size: 9px; font-weight: 800; }

.behavior-funnel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.behavior-funnel > div {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff5f8, #f3fbfe);
}

.behavior-funnel i { color: #d9a1ad; font-size: 8px; font-style: normal; font-weight: 900; }
.behavior-funnel span { color: #818994; font-size: 9px; }
.behavior-funnel strong { color: #333b47; font-size: 16px; }

.behavior-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.behavior-profile-card {
  display: grid;
  min-width: 0;
  gap: 11px;
  padding: 14px;
  border: 1px solid #edf0f3;
  border-radius: 12px;
  background: #fff;
}

.behavior-profile-card header,
.behavior-profile-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.behavior-profile-card header > div { display: grid; min-width: 0; gap: 3px; }
.behavior-profile-card header strong { overflow: hidden; color: #303642; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.behavior-profile-card header small { color: #9ca3ac; font-size: 9px; }
.behavior-stage { flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; font-size: 9px; }
.behavior-stage.stage-high { color: #b52c4b; background: #fff0f4; }
.behavior-stage.stage-medium { color: #9b6a17; background: #fff8e9; }
.behavior-stage.stage-low { color: #39778e; background: #eef9fd; }

.behavior-score { position: relative; display: flex; align-items: baseline; gap: 6px; padding-bottom: 7px; }
.behavior-score span { color: #969da7; font-size: 9px; }
.behavior-score strong { color: #e04667; font-size: 20px; }
.behavior-score i { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; overflow: hidden; border-radius: 4px; background: #f1f3f5; }
.behavior-score i::after { display: block; width: var(--behavior-score); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#42b9e8,#fb6685); content: ""; }
.behavior-tags { display: flex; min-height: 24px; flex-wrap: wrap; gap: 5px; }
.behavior-tags span { padding: 4px 7px; border-radius: 6px; color: #447488; background: #eef8fc; font-size: 9px; }
.behavior-tags span.muted { color: #9da3ab; background: #f6f7f8; }
.behavior-profile-card footer { color: #9198a1; font-size: 9px; }
.behavior-profile-card footer button { margin-left: auto; color: #d94161; font-size: 9px; font-weight: 800; }

.behavior-staff-list { display: grid; border: 1px solid #edf0f3; border-radius: 11px; overflow: hidden; }
.behavior-staff-list article { display: grid; grid-template-columns: minmax(160px,1.4fr) repeat(4,minmax(90px,1fr)); align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; border-bottom: 1px solid #f0f2f4; }
.behavior-staff-list article:last-child { border-bottom: 0; }
.behavior-staff-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.behavior-staff-person > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #087fae; background: #eaf8fd; font-size: 12px; font-weight: 900; }
.behavior-staff-person > div, .behavior-staff-list article > div:not(.behavior-staff-person) { display: grid; min-width: 0; gap: 3px; }
.behavior-staff-list small { color: #9aa1aa; font-size: 9px; }
.behavior-staff-list strong { overflow: hidden; color: #3b4451; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.behavior-staff-list strong.load-high { color: #d44361; }
.behavior-empty { grid-column: 1 / -1; display: grid; min-height: 120px; place-items: center; color: #9aa1aa; font-size: 11px; }

.behavior-monitoring-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-color: rgba(164,215,234,.8);
  background: linear-gradient(135deg,#fff,#f0faff);
}
.behavior-monitoring-entry h2 { margin: 4px 0; color: #29313c; font-size: 18px; }
.behavior-monitoring-entry p { margin: 0; color: #818a96; font-size: 11px; }

.application-update-backdrop {
  z-index: 10000;
}

.auth-approval-pending {
  display: grid;
  justify-items: center;
  gap: 11px;
  padding: 24px 8px 8px;
  text-align: center;
}

.auth-approval-pending-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  place-items: center;
  border: 1px solid #ffd48a;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff9e9, #fff2d9);
  box-shadow: 0 12px 28px rgba(225, 158, 46, .14);
  font-size: 30px;
}

.auth-approval-pending h2 {
  margin: 0;
  color: #2b3038;
  font-size: 25px;
}

.auth-approval-pending > p {
  max-width: 380px;
  margin: 0;
  color: #7e8792;
  font-size: 13px;
  line-height: 1.75;
}

.auth-approval-pending-account {
  width: 100%;
  margin-top: 4px;
  padding: 11px 13px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  color: #626c78;
  background: #f8f9fa;
  font-size: 12px;
  font-weight: 800;
}

.auth-approval-back {
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
}

.application-update-modal {
  display: grid;
  width: min(420px, calc(100vw - 28px));
  justify-items: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
}

.application-update-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 2px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #fb5d7a, #42b9e8);
  box-shadow: 0 12px 28px rgba(251, 93, 122, 0.24);
  font-size: 32px;
  font-weight: 700;
}

.application-update-modal h2 {
  margin: 0;
  color: #242832;
  font-size: 24px;
}

.application-update-modal p {
  margin: 0 0 8px;
  color: #747d89;
  font-size: 13px;
  line-height: 1.7;
}

.application-update-modal .primary-btn {
  width: 100%;
  min-height: 42px;
}

.usage-dashboard-section {
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(227, 229, 231, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(24, 25, 28, 0.08);
}

.usage-dashboard-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.usage-dashboard-section-head h2 {
  margin: 0;
  color: #18191c;
  font-size: 26px;
  line-height: 1.2;
}

.usage-dashboard-section-head p {
  margin: 7px 0 0;
  color: #9499a0;
  font-size: 13px;
}

.usage-dashboard-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.usage-dashboard-controls > button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid #e3e7ec;
  border-radius: 9px;
  color: #61666d;
  background: #fff;
  box-shadow: 0 4px 12px rgba(24, 25, 28, 0.04);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.usage-dashboard-controls > button:hover:not(:disabled) {
  border-color: #f3a6b6;
  color: #d8214b;
  transform: translateY(-1px);
}

.usage-dashboard-controls > button:focus-visible,
.usage-dashboard-controls input:focus-visible,
.usage-dashboard-error button:focus-visible {
  outline: 3px solid rgba(251, 93, 122, 0.16);
  outline-offset: 2px;
}

.usage-dashboard-controls > button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.usage-dashboard-controls label {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #e3e7ec;
  border-radius: 9px;
  color: #7d8794;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.usage-dashboard-controls input {
  width: 112px;
  padding: 0;
  border: 0;
  color: #303642;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  outline: 0;
}

.usage-dashboard-controls > .usage-dashboard-refresh {
  width: auto;
  min-width: 54px;
  padding: 0 12px;
  border-color: #ffd0da;
  color: #d8214b;
  background: #fff7f9;
  font-size: 12px;
  font-weight: 900;
}

.usage-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 15px 0 18px;
}

.usage-dashboard-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #687385;
  background: #f4f7fa;
  font-size: 11px;
  font-weight: 800;
}

.usage-dashboard-meta span:nth-child(2) {
  color: #cf3154;
  background: #fff0f4;
}

.usage-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.usage-dashboard-board {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
  border: 1px solid #dcecf4;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 254, 0.96));
  box-shadow: 0 12px 30px rgba(42, 86, 112, 0.07);
}

.usage-dashboard-board-client {
  border-color: #f2dce4;
  box-shadow: 0 12px 30px rgba(202, 66, 99, 0.07);
}

.usage-dashboard-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.usage-dashboard-board-head h3 {
  margin: 0;
  color: #20242b;
  font-size: 18px;
  line-height: 1.3;
}

.usage-dashboard-board-head p {
  margin: 5px 0 0;
  color: #9499a0;
  font-size: 11px;
}

.usage-dashboard-board-head > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #587181;
  background: #edf8fc;
  font-size: 10px;
  font-weight: 900;
}

.usage-dashboard-board-client .usage-dashboard-board-head > span {
  color: #b63252;
  background: #fff0f4;
}

.usage-dashboard-kpi-grid,
.usage-dashboard-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.usage-dashboard-kpi,
.usage-dashboard-feature {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 4px;
  padding: 11px 10px;
  border: 1px solid #edf0f3;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.94);
}

.usage-dashboard-kpi > span,
.usage-dashboard-feature > span {
  overflow: hidden;
  color: #7d8794;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-dashboard-kpi > strong {
  overflow: hidden;
  color: #272c35;
  font-size: 20px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-dashboard-feature > strong {
  color: #d8214b;
  font-size: 18px;
  line-height: 1.2;
}

.usage-dashboard-board-staff .usage-dashboard-feature > strong {
  color: #087fae;
}

.usage-dashboard-kpi > small,
.usage-dashboard-feature > small {
  overflow: hidden;
  color: #a0a7b1;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-dashboard-mix {
  display: grid;
  gap: 7px;
  margin: 12px 0 3px;
}

.usage-dashboard-mix-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.usage-dashboard-mix-labels span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7d8794;
  font-size: 10px;
  font-weight: 800;
}

.usage-dashboard-mix-labels i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--usage-mix-color);
}

.usage-dashboard-mix-labels strong {
  color: #3b4350;
}

.usage-dashboard-mix-bar {
  display: flex;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef1f4;
}

.usage-dashboard-mix-bar i {
  width: var(--usage-mix-width);
  min-width: 0;
  background: var(--usage-mix-color);
  transition: width 220ms ease;
}

.usage-dashboard-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 15px 0 8px;
}

.usage-dashboard-subhead h4 {
  margin: 0;
  color: #303642;
  font-size: 12px;
}

.usage-dashboard-subhead span {
  color: #a0a7b1;
  font-size: 9px;
}

.usage-dashboard-ranking-head {
  margin-top: 17px;
}

.usage-dashboard-ranking-head > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.usage-dashboard-ranking-toggle {
  padding: 4px 8px;
  border: 1px solid #e4e8ed;
  border-radius: 7px;
  color: #68717d;
  background: #fff;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.usage-dashboard-ranking-toggle:hover {
  border-color: #f2a8b8;
  color: #d93e60;
  background: #fff7f9;
}

.usage-dashboard-ranking-toggle:focus-visible {
  outline: 3px solid rgba(251, 93, 122, 0.16);
  outline-offset: 2px;
}

.usage-dashboard-ranking-list {
  display: grid;
  overflow: hidden;
  border: 1px solid #edf0f3;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.9);
}

.usage-dashboard-ranking-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(140px, auto) auto;
  align-items: center;
  min-width: 0;
  gap: 9px;
  min-height: 54px;
  padding: 8px 10px;
  border-bottom: 1px solid #f0f2f4;
}

.usage-dashboard-ranking-row:last-child {
  border-bottom: 0;
}

.usage-dashboard-rank {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #dd3d60;
  background: #fff0f4;
  font-size: 11px;
  font-weight: 900;
}

.usage-dashboard-board-staff .usage-dashboard-rank {
  color: #087fae;
  background: #edf9fd;
}

.usage-dashboard-person,
.usage-dashboard-person-metrics {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.usage-dashboard-person strong {
  overflow: hidden;
  color: #303642;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-dashboard-person small,
.usage-dashboard-person-metrics small {
  overflow: hidden;
  color: #9aa1ab;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-dashboard-person-metrics {
  justify-items: end;
  text-align: right;
}

.usage-dashboard-top-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 140px;
  max-width: 178px;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #e4eff4;
  border-radius: 8px;
  background: #f6fbfd;
}

button.usage-dashboard-top-feature {
  width: 100%;
  font: inherit;
  text-align: left;
}

.usage-dashboard-top-feature.is-clickable {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.usage-dashboard-top-feature.is-clickable:hover {
  border-color: #8bcde5;
  box-shadow: 0 5px 14px rgba(66, 185, 232, 0.12);
  transform: translateY(-1px);
}

.usage-dashboard-top-feature.is-clickable:focus-visible {
  outline: 3px solid rgba(66, 185, 232, 0.18);
  outline-offset: 2px;
}

.usage-dashboard-top-feature > span {
  color: #8a98a5;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.usage-dashboard-top-feature > strong {
  overflow: hidden;
  color: #257995;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-dashboard-top-feature > small {
  color: #80909d;
  font-size: 8px;
  white-space: nowrap;
}

.usage-dashboard-top-feature.is-empty {
  border-color: #edf0f3;
  background: #fafbfc;
}

.usage-dashboard-top-feature.is-empty > strong,
.usage-dashboard-top-feature.is-empty > small {
  color: #a1a8b0;
}

.usage-dashboard-board-staff .usage-dashboard-top-feature.has-usage {
  border-color: #f3e6c8;
  background: #fffaf0;
}

.usage-dashboard-board-staff .usage-dashboard-top-feature.has-usage > strong {
  color: #a86c14;
}

.usage-dashboard-person-metrics strong {
  color: #4c5666;
  font-size: 11px;
}

.client-talent-clicks-modal {
  width: min(680px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 28px));
  overflow: hidden;
  padding: 0;
}

.client-talent-clicks-modal > header,
.client-talent-clicks-modal > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.client-talent-clicks-modal > header {
  border-bottom: 1px solid #edf0f3;
}

.client-talent-clicks-modal > header h2 {
  margin: 3px 0;
  color: #282d36;
  font-size: 21px;
}

.client-talent-clicks-modal > header p,
.client-talent-clicks-modal > footer > span {
  margin: 0;
  color: #9299a3;
  font-size: 11px;
}

.client-talent-clicks-head,
.client-talent-clicks-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 70px 70px 70px;
  align-items: center;
  gap: 10px;
}

.client-talent-clicks-head {
  padding: 10px 20px;
  color: #969da7;
  background: #f8f9fb;
  font-size: 10px;
  font-weight: 800;
}

.client-talent-clicks-head span:not(:first-child),
.client-talent-clicks-row > span,
.client-talent-clicks-row > b {
  text-align: center;
}

.client-talent-clicks-list {
  max-height: min(470px, calc(100vh - 250px));
  overflow-y: auto;
}

.client-talent-clicks-row {
  min-height: 58px;
  padding: 9px 20px;
  border-bottom: 1px solid #f0f2f4;
  color: #65707e;
  font-size: 12px;
}

.client-talent-clicks-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.client-talent-clicks-row strong {
  overflow: hidden;
  color: #303642;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-talent-clicks-row small {
  color: #9aa1ab;
  font-size: 9px;
}

.client-talent-clicks-row > b {
  color: #df4263;
}

.client-talent-clicks-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: #999fa8;
  font-size: 12px;
}

.client-talent-clicks-modal > footer {
  border-top: 1px solid #edf0f3;
}

.usage-dashboard-empty,
.usage-dashboard-loading,
.usage-dashboard-untracked {
  display: grid;
  min-height: 94px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #9499a0;
  font-size: 12px;
  text-align: center;
}

.usage-dashboard-loading {
  min-height: 300px;
}

.usage-dashboard-loading i {
  width: 28px;
  height: 28px;
  border: 3px solid #ffe0e7;
  border-top-color: #fb5d7a;
  border-radius: 50%;
  animation: usageDashboardSpin 0.8s linear infinite;
}

.usage-dashboard-untracked strong {
  color: #303642;
  font-size: 15px;
}

.usage-dashboard-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #ffd1db;
  border-radius: 9px;
  color: #a52946;
  background: #fff4f7;
  font-size: 11px;
  font-weight: 800;
}

.usage-dashboard-error button {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 7px;
  color: #fff;
  background: #e94b6d;
  font-size: 10px;
  font-weight: 900;
}

@keyframes usageDashboardSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  .usage-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .behavior-monitoring-hero,
  .behavior-panel-head,
  .behavior-monitoring-entry { align-items: stretch; flex-direction: column; }
  .behavior-funnel { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .behavior-profile-grid { grid-template-columns: 1fr; }
  .behavior-staff-list article { grid-template-columns: 1fr 1fr; }
  .behavior-staff-person { grid-column: 1 / -1; }

  .usage-dashboard-section {
    padding: 18px;
  }

  .usage-dashboard-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .usage-dashboard-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .usage-dashboard-controls label {
    flex: 1 1 170px;
    justify-content: space-between;
  }

  .usage-dashboard-kpi-grid,
  .usage-dashboard-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .behavior-funnel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .behavior-monitoring-hero { padding: 20px; }
  .behavior-insight-panel { padding: 15px; }

  .usage-dashboard-board {
    padding: 14px;
  }

  .usage-dashboard-board-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .usage-dashboard-ranking-head {
    align-items: flex-start;
  }

  .usage-dashboard-ranking-head > div {
    align-items: flex-end;
    flex-direction: column;
  }

  .usage-dashboard-ranking-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .usage-dashboard-top-feature {
    grid-column: 2;
    width: 100%;
    max-width: none;
    gap: 6px;
  }

  .usage-dashboard-person-metrics {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .client-talent-clicks-modal > header,
  .client-talent-clicks-modal > footer {
    align-items: flex-start;
    padding: 15px;
  }

  .client-talent-clicks-modal > footer {
    flex-direction: column;
  }

  .client-talent-clicks-head,
  .client-talent-clicks-row {
    grid-template-columns: minmax(110px, 1fr) 46px 46px 46px;
    gap: 5px;
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usage-dashboard-loading i {
    animation-duration: 1.8s;
  }
}

/* B站热门：DeepSeek 观众讨论词云 */
.internal-bili-discussion-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(182, 214, 235, .88);
  border-radius: 20px;
  background:
    radial-gradient(circle at 2% 0%, rgba(255, 94, 133, .08), transparent 25%),
    radial-gradient(circle at 98% 100%, rgba(66, 191, 234, .09), transparent 30%),
    rgba(255, 255, 255, .94);
  box-shadow: 0 15px 38px rgba(37, 75, 108, .08), inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.internal-bili-discussion-head {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
}

.internal-bili-discussion-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #202735;
  font-size: 21px;
}

.internal-bili-discussion-head h3 i {
  display: block;
  width: 5px;
  height: 25px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6387, #ee4f70);
  box-shadow: 0 5px 13px rgba(238, 79, 112, .22);
}

.internal-bili-discussion-head p { margin: 6px 0 0 15px; color: #778396; font-size: 11px; }

.internal-bili-discussion-tabs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  overflow: hidden;
  border: 1px solid #d9e3ee;
  border-radius: 11px;
  background: rgba(255, 255, 255, .76);
}

.internal-bili-discussion-tabs button {
  min-width: 86px;
  padding: 10px 13px;
  border: 0;
  border-right: 1px solid #e5ebf1;
  color: #68768b;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}

.internal-bili-discussion-tabs button:last-child { border-right: 0; }
.internal-bili-discussion-tabs button.active { color: #087fab; background: #eaf8ff; box-shadow: inset 0 0 0 1px #98daf3; font-weight: 850; }

.internal-bili-discussion-analyze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(120deg, #ff6d8b, #f34d72);
  box-shadow: 0 12px 24px rgba(240, 75, 112, .22);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.internal-bili-discussion-analyze:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.internal-bili-discussion-analyze span { font-size: 16px; }

.internal-bili-discussion-state {
  display: grid;
  min-height: 180px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed #dce6ef;
  border-radius: 16px;
  color: #7a8797;
  text-align: center;
}

.internal-bili-discussion-state strong { color: #3f4958; font-size: 15px; }
.internal-bili-discussion-state span { max-width: 610px; font-size: 11px; line-height: 1.7; }
.internal-bili-discussion-state.is-error { border-color: #ffd0d9; background: #fff8fa; color: #a54d60; }
.internal-bili-discussion-state.is-loading i { width: 30px; height: 30px; border: 3px solid #dcedf5; border-top-color: #f05c7b; border-radius: 50%; animation: spin .8s linear infinite; }
.internal-bili-discussion-state.is-loading > small { color: #e64d70; font-size: 10px; font-weight: 850; }
.internal-bili-discussion-progress { width: min(420px, 76vw); height: 7px; overflow: hidden; border-radius: 999px; background: #e8eef3; box-shadow: inset 0 1px 2px rgba(47, 65, 82, .08); }
.internal-bili-discussion-progress b { display: block; min-width: 3px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #52c4e8, #fb5f80); box-shadow: 0 0 14px rgba(251, 95, 128, .28); transition: width .35s ease; }

.internal-bili-discussion-main { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); gap: 16px; }

.internal-bili-word-cloud {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 330px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid #d9e6ef;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
}

.internal-bili-word-cloud > span {
  position: absolute;
  left: var(--word-x);
  top: var(--word-y);
  z-index: var(--word-layer);
  display: block;
  max-width: 38%;
  color: #426fc2;
  font-size: var(--word-font-size);
  font-weight: var(--word-font-weight);
  line-height: .96;
  letter-spacing: -.045em;
  opacity: var(--word-opacity);
  white-space: nowrap;
  transform: translate(var(--word-shift-x), var(--word-shift-y));
  transform-origin: center;
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

.internal-bili-word-cloud > span:hover {
  z-index: 60;
  opacity: 1;
  filter: saturate(1.18);
  transform: translate(var(--word-shift-x), var(--word-shift-y)) scale(1.06);
}

.internal-bili-word-cloud > span.positive { color: #18aaa9; }
.internal-bili-word-cloud > span.negative,
.internal-bili-word-cloud > span.sarcasm { color: #ed4f72; }
.internal-bili-word-cloud.is-empty { display: grid; place-items: center; padding: 24px; color: #929cab; font-size: 11px; }
.internal-bili-word-cloud.is-empty > span { position: static; max-width: none; color: inherit; font-size: inherit; font-weight: 650; opacity: 1; white-space: normal; transform: none; }

.internal-bili-discussion-insights { display: grid; gap: 11px; }
.internal-bili-discussion-metrics { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); min-height: 128px; overflow: hidden; border: 1px solid #dce7ef; border-radius: 15px; background: rgba(255, 255, 255, .9); }
.internal-bili-discussion-metrics > div { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 13px; border-left: 1px solid #e8edf2; text-align: center; }
.internal-bili-discussion-metrics > div:first-child { border-left: 0; }
.internal-bili-discussion-metrics .sample i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; color: #148fbe; background: #dff5fd; font-style: normal; font-weight: 950; }
.internal-bili-discussion-metrics span { color: #5c6c86; font-size: 20px; }
.internal-bili-discussion-metrics small { color: #6e7d92; font-size: 10px; }
.internal-bili-discussion-metrics strong { color: #172235; font-size: 26px; }
.internal-bili-discussion-metrics .sample strong { font-size: 25px; }
.internal-bili-discussion-metrics .sample small:last-child { color: #98a3b2; font-size: 8px; }
.internal-bili-discussion-metrics .positive span { color: #0bafaf; }
.internal-bili-discussion-metrics .negative span { color: #f05676; }

.internal-bili-discussion-review { padding: 8px 11px; border: 1px solid #ffe0a9; border-radius: 10px; color: #8a641c; background: #fff9e9; font-size: 9px; font-weight: 750; }
.internal-bili-discussion-summary { padding: 14px 16px; border: 1px solid; border-radius: 14px; background: rgba(255, 255, 255, .78); }
.internal-bili-discussion-summary.positive { border-color: #b9e6e7; background: linear-gradient(130deg, #f6ffff, #fff); }
.internal-bili-discussion-summary.negative { border-color: #ffcbd5; background: linear-gradient(130deg, #fff8fa, #fff); }
.internal-bili-discussion-summary h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; }
.internal-bili-discussion-summary.positive h4 { color: #0b9da2; }
.internal-bili-discussion-summary.negative h4 { color: #ed4f70; }
.internal-bili-discussion-summary h4 i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: currentColor; font-style: normal; }
.internal-bili-discussion-summary ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: #424e60; font-size: 10px; line-height: 1.6; }

.internal-bili-representatives { padding: 12px 14px 14px; border: 1px solid #dde7ef; border-radius: 15px; }
.internal-bili-representatives > h4,
.internal-bili-representatives > h3 { margin: 0 0 10px; color: #303a49; font-size: 12px; }
.internal-bili-representatives > h4 span { color: #7f8a98; font-size: 9px; font-weight: 500; }
.internal-bili-representative-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.internal-bili-representative-grid article { display: grid; min-width: 0; gap: 8px; padding: 12px; border: 1px solid #e1e8ef; border-radius: 12px; background: #fff; }
.internal-bili-representative-grid header { display: flex; align-items: center; gap: 7px; }
.internal-bili-comment-avatar { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #158ab5; background: #e2f6fd; font-weight: 900; }
.internal-bili-representative-grid header strong { min-width: 0; overflow: hidden; color: #3c4756; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.internal-bili-representative-grid header em { margin-left: auto; padding: 3px 6px; border-radius: 999px; color: #0d88b3; background: #e9f8fe; font-size: 8px; font-style: normal; }
.internal-bili-representative-grid p { min-height: 34px; margin: 0; color: #465264; font-size: 10px; line-height: 1.65; }
.internal-bili-representative-grid footer { display: flex; justify-content: space-between; color: #8290a2; font-size: 8px; }
.internal-bili-representative-empty { padding: 24px; color: #929cab; font-size: 10px; text-align: center; }
.internal-bili-discussion-notice { display: flex; justify-content: space-between; gap: 12px; color: #8a95a3; font-size: 9px; }
.internal-bili-discussion-notice small { flex: 0 0 auto; }

.internal-bili-discussion-backdrop { z-index: 3800; padding: 24px; background: rgba(18, 27, 40, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.internal-bili-discussion-modal { width: min(1180px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(8, 18, 30, .38); }
.internal-bili-discussion-modal > header,
.internal-bili-discussion-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; }
.internal-bili-discussion-modal > header { border-bottom: 1px solid #e8edf2; }
.internal-bili-discussion-modal > header > div { min-width: 0; }
.internal-bili-discussion-modal > header h2 { margin: 4px 0 3px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.internal-bili-discussion-modal > header p { margin: 0; color: #7b8796; font-size: 10px; }
.internal-bili-discussion-modal > footer { border-top: 1px solid #e8edf2; color: #7b8796; font-size: 10px; }
.internal-bili-discussion-modal-scroll { display: grid; max-height: calc(100vh - 180px); gap: 15px; overflow: auto; padding: 18px 20px 22px; background: linear-gradient(145deg, #fffafd, #f8fdff); }
.internal-bili-detail-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 16px; border: 1px solid #dce6ee; border-radius: 15px; background: #fff; }
.internal-bili-detail-overview h3,
.internal-bili-detail-clouds h3,
.internal-bili-detail-review h3 { margin: 0 0 9px; color: #303a48; font-size: 13px; }
.internal-bili-detail-overview ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: #586577; font-size: 10px; line-height: 1.6; }
.internal-bili-detail-overview dl { display: grid; grid-template-columns: repeat(4, 72px); margin: 0; overflow: hidden; border: 1px solid #e4eaf0; border-radius: 12px; }
.internal-bili-detail-overview dl div { display: grid; align-content: center; justify-items: center; gap: 5px; padding: 12px; border-left: 1px solid #e8edf2; }
.internal-bili-detail-overview dl div:first-child { border-left: 0; }
.internal-bili-detail-overview dt { color: #8995a3; font-size: 9px; }
.internal-bili-detail-overview dd { margin: 0; color: #283445; font-size: 19px; font-weight: 850; }
.internal-bili-detail-overview .positive dd { color: #0ba7a9; }
.internal-bili-detail-overview .negative dd { color: #ed4f70; }
.internal-bili-detail-clouds,
.internal-bili-detail-summaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.internal-bili-detail-clouds > article { padding: 14px; border: 1px solid #dbe6ef; border-radius: 15px; background: #fff; }
.internal-bili-detail-clouds h3 span { color: #8c98a7; font-size: 9px; font-weight: 500; }
.internal-bili-detail-clouds .internal-bili-word-cloud { min-height: 220px; padding: 22px; }
.internal-bili-detail-review { padding: 15px; border: 1px solid #f3d6a1; border-radius: 15px; background: #fffbf1; }
.internal-bili-detail-review > div { display: grid; gap: 7px; }
.internal-bili-detail-review article { padding: 10px 12px; border-radius: 10px; background: #fff; }
.internal-bili-detail-review p { margin: 0 0 4px; color: #475365; font-size: 10px; line-height: 1.6; }
.internal-bili-detail-review span { color: #956f2a; font-size: 8px; }

@media (max-width: 1080px) {
  .internal-bili-discussion-head { grid-template-columns: 1fr auto; }
  .internal-bili-discussion-tabs { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .internal-bili-discussion-main { grid-template-columns: 1fr; }
  .internal-bili-word-cloud { min-height: 300px; }
}

@media (max-width: 760px) {
  .internal-bili-discussion-panel { padding: 14px; border-radius: 16px; }
  .internal-bili-discussion-head { grid-template-columns: 1fr; align-items: stretch; gap: 12px; }
  .internal-bili-discussion-tabs { grid-row: auto; grid-column: auto; width: 100%; }
  .internal-bili-discussion-tabs button { min-width: 0; padding: 9px 5px; }
  .internal-bili-discussion-analyze { width: 100%; }
  .internal-bili-word-cloud { min-height: 290px; padding: 12px; }
  .internal-bili-word-cloud > span { max-width: 42%; font-size: var(--word-mobile-size); letter-spacing: -.055em; }
  .internal-bili-discussion-metrics { grid-template-columns: repeat(3, 1fr); }
  .internal-bili-discussion-metrics .sample { grid-column: 1 / -1; border-bottom: 1px solid #e8edf2; }
  .internal-bili-discussion-metrics > div:nth-child(2) { border-left: 0; }
  .internal-bili-representative-grid { grid-template-columns: 1fr; }
  .internal-bili-discussion-notice { flex-direction: column; }
  .internal-bili-discussion-backdrop { padding: 10px; }
  .internal-bili-discussion-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 16px; }
  .internal-bili-discussion-modal > header { position: relative; align-items: flex-start; flex-direction: column; padding: 14px; }
  .internal-bili-discussion-modal > header .plain-btn { position: absolute; top: 12px; right: 12px; }
  .internal-bili-discussion-modal > header h2 { max-width: calc(100vw - 125px); font-size: 15px; }
  .internal-bili-discussion-modal-scroll { max-height: calc(100vh - 168px); padding: 14px; }
  .internal-bili-detail-overview { grid-template-columns: 1fr; }
  .internal-bili-detail-overview dl { grid-template-columns: repeat(2, 1fr); }
  .internal-bili-detail-overview dl div:nth-child(3) { border-left: 0; border-top: 1px solid #e8edf2; }
  .internal-bili-detail-overview dl div:nth-child(4) { border-top: 1px solid #e8edf2; }
  .internal-bili-detail-clouds,
  .internal-bili-detail-summaries { grid-template-columns: 1fr; }
  .internal-bili-discussion-modal > footer { align-items: stretch; flex-direction: column; padding: 12px 14px; }
  .internal-bili-discussion-modal > footer .primary-btn { width: 100%; }
}

/* Single-video opinion analysis */
.content-opinion-segmented button {
  border: 0;
  border-radius: 10px;
  color: #66758b;
  background: transparent;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.content-opinion-segmented button.active {
  color: #087fac;
  background: linear-gradient(135deg, #e4f8ff, #edf5ff);
  box-shadow: inset 0 0 0 1px #90d9f3, 0 7px 18px rgba(43, 155, 203, .12);
}

.content-source-shared {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 6% 5%, rgba(255, 103, 145, .09), transparent 28%),
    radial-gradient(circle at 96% 90%, rgba(65, 181, 235, .11), transparent 30%),
    rgba(255, 255, 255, .94);
}

.content-source-shared::after {
  position: absolute;
  z-index: 0;
  right: -80px;
  bottom: -90px;
  width: 260px;
  height: 180px;
  border-radius: 50%;
  background: rgba(116, 211, 244, .08);
  content: "";
  filter: blur(4px);
  pointer-events: none;
}

.content-source-shared > * { position: relative; z-index: 1; }
.content-opinion-entry-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; gap: 20px; }
.content-opinion-entry-grid > article { height: 100%; }
.content-opinion-entry-grid .content-opinion-launch { grid-template-columns: minmax(0, 1fr); align-content: center; }
.content-opinion-entry-grid .content-opinion-launch-actions { justify-items: stretch; }
.content-opinion-entry-grid .content-opinion-start { width: 100%; }
.content-task-grid { grid-template-columns: 1.15fr .85fr; }
.content-extract-guide p { margin: 0; color: #6f7d90; font-size: 12px; line-height: 1.75; }

.content-opinion-launch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: 30px;
  border-color: rgba(111, 194, 232, .56);
  background:
    radial-gradient(circle at 8% 20%, rgba(255, 104, 145, .13), transparent 32%),
    radial-gradient(circle at 95% 80%, rgba(66, 188, 239, .15), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(248,253,255,.95));
  box-shadow: 0 20px 55px rgba(44, 95, 129, .09), inset 0 0 0 1px rgba(255,255,255,.7);
}

.content-opinion-launch h2 { margin: 7px 0 8px; color: #202b3d; font-size: 24px; letter-spacing: -.03em; }
.content-opinion-launch p { max-width: 780px; margin: 0; color: #66758a; line-height: 1.75; }
.content-opinion-launch ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; }
.content-opinion-launch li { padding: 7px 11px; border: 1px solid #d8eaf2; border-radius: 999px; color: #467087; background: rgba(255,255,255,.8); font-size: 11px; }
.content-opinion-mode { display: inline-grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 7px; margin-top: 17px; padding: 4px; border: 1px solid #d9e8f0; border-radius: 14px; background: rgba(255,255,255,.72); }
.content-opinion-mode button { display: grid; gap: 2px; padding: 9px 13px; border: 0; border-radius: 10px; color: #63748a; background: transparent; text-align: left; cursor: pointer; }
.content-opinion-mode button.active { color: #087fac; background: #e9f8fe; box-shadow: 0 4px 12px rgba(39, 142, 187, .1); }
.content-opinion-mode strong { font-size: 11px; }
.content-opinion-mode small { color: #8b98a8; font-size: 9px; }
.content-opinion-launch-actions { display: grid; justify-items: center; gap: 7px; }
.content-opinion-launch-actions > small { color: #8492a3; font-size: 9.5px; }
.content-opinion-start { min-width: 190px; min-height: 48px; box-shadow: 0 14px 30px rgba(255, 93, 133, .2); }

.content-opinion-task-center { padding: 20px; border-color: rgba(120, 198, 233, .42); }
.content-opinion-task-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.content-opinion-task-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #dfe9ef; border-radius: 13px; color: #344155; background: #fff; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.content-opinion-task-item:hover { border-color: #a8dced; transform: translateY(-1px); }
.content-opinion-task-item.active { border-color: #70c7e7; background: #f4fcff; box-shadow: 0 8px 20px rgba(44, 149, 193, .1); }
.content-opinion-task-item > span { display: grid; min-width: 0; gap: 4px; }
.content-opinion-task-item > span strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.content-opinion-task-item > span small { color: #8794a4; font-size: 9px; }
.content-opinion-task-item > i { display: grid; justify-items: end; gap: 5px; width: 62px; font-style: normal; }
.content-opinion-task-item em { color: #ef5377; font-size: 11px; font-style: normal; font-weight: 850; }
.content-opinion-task-item b { width: 62px; height: 4px; overflow: hidden; border-radius: 999px; background: #e7edf2; }
.content-opinion-task-item u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4bbbe2, #ff5d82); text-decoration: none; }

.content-opinion-progress {
  display: grid;
  gap: 18px;
  padding: 28px;
  border-color: rgba(120, 198, 233, .56);
  background: linear-gradient(140deg, rgba(255,250,252,.96), rgba(248,253,255,.96));
}

.content-opinion-progress.is-paused { border-color: #f0d59e; background: linear-gradient(140deg, #fffdf7, #fff); }
.content-opinion-progress.is-failed { border-color: #f7c2cd; background: linear-gradient(140deg, #fff8fa, #fff); }
.content-opinion-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.content-opinion-progress-head h2 { margin: 5px 0 6px; color: #243043; font-size: 20px; }
.content-opinion-progress-head p { margin: 0; color: #748196; }
.content-opinion-progress-head > strong { color: #f05277; font-size: 31px; font-variant-numeric: tabular-nums; }
.content-opinion-stage { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #087fac; background: #e7f8fe; font-size: 10px; font-weight: 800; }
.content-opinion-progress-bar { height: 8px; overflow: hidden; border-radius: 999px; background: #e6edf2; }
.content-opinion-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4bbbe2, #ff5d82); box-shadow: 0 0 15px rgba(255, 93, 130, .3); transition: width .35s ease; }
.content-opinion-task-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.content-opinion-task-actions > span { color: #8a96a6; font-size: 11px; }

.content-opinion-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.content-opinion-coverage-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px solid #dce9f0;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
}

.content-opinion-coverage-item span { color: #647389; font-size: 11px; font-weight: 800; }
.content-opinion-coverage-item strong { color: #188fbb; font-size: 18px; }
.content-opinion-coverage-item small { grid-column: 1 / -1; color: #8894a3; font-size: 10px; }
.content-opinion-coverage-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; margin-top: 5px; padding-top: 9px; border-top: 1px solid #edf2f5; }
.content-opinion-coverage-actions button { color: #1284ad; }

.content-opinion-rows-backdrop { z-index: 5200; padding: 18px; }
.content-opinion-rows-modal { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1080px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: hidden; border: 1px solid rgba(126, 201, 232, .58); border-radius: 20px; background: #fff; box-shadow: 0 28px 85px rgba(24, 42, 60, .25); }
.content-opinion-rows-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid #e8eef2; }
.content-opinion-rows-modal > header h2 { margin: 4px 0 3px; color: #263448; font-size: 20px; }
.content-opinion-rows-modal > header p { margin: 0; color: #8491a1; font-size: 10px; }
.content-opinion-rows-modal > header > div:last-child { display: flex; align-items: center; gap: 8px; }
.content-opinion-rows-scroll { display: grid; align-content: start; gap: 9px; overflow-y: auto; padding: 15px 18px; background: linear-gradient(145deg, #fffafd, #f7fcff); }
.content-opinion-row { padding: 13px 15px; border: 1px solid #dfe9ef; border-radius: 13px; background: rgba(255,255,255,.9); }
.content-opinion-row > div { display: flex; align-items: center; gap: 8px; }
.content-opinion-row > div > span { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; color: #258aaf; background: #eaf8fd; font-size: 9px; font-weight: 850; }
.content-opinion-row > div strong { min-width: 0; overflow: hidden; color: #3b4859; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.content-opinion-row > div em { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #5c7183; background: #edf3f6; font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.content-opinion-row > div em.is-positive { color: #0a8b73; background: #e6f8f3; }
.content-opinion-row > div em.is-negative,
.content-opinion-row > div em.is-sarcasm { color: #d64465; background: #ffedf1; }
.content-opinion-row p { margin: 10px 0; color: #303c4c; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.content-opinion-row footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8a96a5; font-size: 9px; }
.content-opinion-row footer small { overflow: hidden; max-width: 55%; color: #688398; text-overflow: ellipsis; white-space: nowrap; }
.content-opinion-rows-modal > footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 16px; border-top: 1px solid #e8eef2; color: #778596; font-size: 10px; }

.content-opinion-result { display: grid; gap: 16px; padding: 22px; border-color: rgba(113, 195, 233, .52); background: linear-gradient(145deg, rgba(255,251,253,.98), rgba(248,253,255,.98)); }
.content-opinion-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.content-opinion-result-head h2 { max-width: 850px; margin: 5px 0 6px; color: #1e2b3e; font-size: 22px; }
.content-opinion-result-head p { max-width: 900px; margin: 0; color: #7b8797; font-size: 11px; line-height: 1.65; }
.content-opinion-result-head-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; }
.content-opinion-risk { padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 850; }
.content-opinion-risk.is-low { color: #078d8c; background: #e5f9f6; }
.content-opinion-risk.is-medium { color: #9a6c19; background: #fff5d9; }
.content-opinion-risk.is-high { color: #db3f62; background: #ffebf0; }

.content-opinion-result-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.content-opinion-segmented { display: flex; overflow: hidden; padding: 3px; border: 1px solid #d8e4ed; border-radius: 12px; background: #fff; }
.content-opinion-segmented button { min-width: 86px; padding: 8px 12px; font-size: 10px; }

.content-opinion-analysis-grid { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(460px, 1.05fr); gap: 16px; }
.content-opinion-analysis-grid > .internal-bili-word-cloud { min-height: 385px; border: 1px solid #dce7ef; border-radius: 18px; background: rgba(255,255,255,.86); }
.content-opinion-insights { display: grid; align-content: start; gap: 12px; }
.content-opinion-sentiment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #dce7ef; border-radius: 15px; background: rgba(255,255,255,.9); }
.content-opinion-sentiment > div { display: grid; justify-items: center; gap: 5px; padding: 13px 10px; border-left: 1px solid #e7edf2; border-top: 1px solid #e7edf2; }
.content-opinion-sentiment > div:nth-child(-n+3) { border-top: 0; }
.content-opinion-sentiment > div:nth-child(3n+1) { border-left: 0; }
.content-opinion-sentiment span { color: #738197; font-size: 10px; }
.content-opinion-sentiment strong { color: #263347; font-size: 20px; }
.content-opinion-sentiment .positive strong { color: #0aa8a8; }
.content-opinion-sentiment .negative strong,
.content-opinion-sentiment .sarcasm strong { color: #ed5272; }
.content-opinion-conclusion { padding: 14px 16px; border: 1px solid #dce8ef; border-radius: 14px; background: #fff; }
.content-opinion-conclusion span { color: #208fb6; font-size: 10px; font-weight: 850; }
.content-opinion-conclusion p { margin: 7px 0 0; color: #405065; font-size: 12px; line-height: 1.75; }

.content-opinion-summary-grid,
.content-opinion-advice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.content-opinion-summary-card,
.content-opinion-advice { padding: 15px 17px; border: 1px solid #dce8ef; border-radius: 14px; background: rgba(255,255,255,.88); }
.content-opinion-summary-card.positive { border-color: #bde7e5; background: linear-gradient(135deg, #f5fffe, #fff); }
.content-opinion-summary-card.negative { border-color: #f7cad4; background: linear-gradient(135deg, #fff8fa, #fff); }
.content-opinion-summary-card h4,
.content-opinion-advice h4 { margin: 0 0 9px; color: #344258; font-size: 12px; }
.content-opinion-summary-card.positive h4 { color: #0a9d9d; }
.content-opinion-summary-card.negative h4 { color: #e84f70; }
.content-opinion-summary-card ul,
.content-opinion-advice ol { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: #4c596c; font-size: 10px; line-height: 1.65; }
.content-opinion-advice h4 i { display: inline-grid; width: 24px; height: 24px; margin-right: 7px; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #4fbae0, #fb6082); font-style: normal; }
.content-opinion-representatives,
.content-opinion-sarcasm { padding: 14px; border: 1px solid #dce7ef; border-radius: 15px; background: rgba(255,255,255,.78); }
.content-opinion-representatives h3,
.content-opinion-sarcasm h3 { margin: 0 0 10px; color: #344258; font-size: 12px; }
.content-opinion-top-discussions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.content-opinion-top-discussions > article { min-width: 0; padding: 14px; border: 1px solid #dce7ef; border-radius: 15px; background: rgba(255,255,255,.82); }
.content-opinion-top-discussions > article.positive { border-color: #bfe6e2; background: linear-gradient(145deg, #f5fffd, #fff); }
.content-opinion-top-discussions > article.negative { border-color: #f4cbd4; background: linear-gradient(145deg, #fff7f9, #fff); }
.content-opinion-top-discussions h3 { margin: 0 0 10px; color: #344258; font-size: 12px; }
.content-opinion-top-discussions h3 span { margin-left: 5px; color: #8793a2; font-size: 9px; font-weight: 550; }
.content-opinion-top-discussions .internal-bili-representative-grid { grid-template-columns: 1fr; }
.content-opinion-top-discussions .internal-bili-representatives { padding: 0; border: 0; background: transparent; }
.content-opinion-sarcasm { border-color: #f4d49d; background: #fffaf0; }
.content-opinion-sarcasm h3 span { color: #9b742c; font-size: 9px; font-weight: 600; }
.content-opinion-warnings { padding: 12px 15px; border: 1px solid #eddcaf; border-radius: 13px; color: #7b642f; background: #fffaf0; font-size: 10px; }
.content-opinion-warnings ul { display: grid; gap: 5px; margin: 7px 0 0; padding-left: 17px; }

.content-opinion-history { display: grid; gap: 12px; }
.content-opinion-history-list { display: grid; gap: 9px; }
.content-opinion-history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 1px solid #dfe8ef; border-radius: 13px; color: inherit; background: #fff; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.content-opinion-history-item:hover { transform: translateY(-1px); border-color: #a9dced; box-shadow: 0 9px 24px rgba(50, 106, 140, .08); }
.content-opinion-history-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #4cbbe2, #ff6284); font-weight: 900; }
.content-opinion-history-item > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.content-opinion-history-item strong { overflow: hidden; color: #344154; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.content-opinion-history-item small { color: #8995a4; font-size: 9px; }
.content-opinion-history-item em { padding: 5px 8px; border-radius: 999px; color: #078d8c; background: #e7f9f6; font-size: 9px; font-style: normal; font-weight: 800; }
.content-opinion-history-item em.is-medium { color: #946819; background: #fff4d8; }
.content-opinion-history-item em.is-high { color: #d94162; background: #ffebf0; }
.content-opinion-history-item > i { color: #58829a; font-size: 10px; font-style: normal; }

.content-opinion-exit-backdrop { z-index: 4300; background: rgba(23, 35, 49, .64); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.content-opinion-exit-modal { width: min(560px, calc(100vw - 32px)); padding: 28px; border-color: rgba(255,255,255,.8); background: linear-gradient(145deg, #fffafd, #f5fcff); text-align: center; }
.content-opinion-exit-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 12px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #4ebce1, #ff5e82); font-size: 25px; box-shadow: 0 13px 28px rgba(247, 88, 127, .22); }
.content-opinion-exit-modal h2 { margin: 0 0 8px; color: #263347; font-size: 22px; }
.content-opinion-exit-modal > p { margin: 0 auto; max-width: 440px; color: #758298; line-height: 1.7; }
.content-opinion-exit-options { display: grid; gap: 9px; margin-top: 22px; }
.content-opinion-exit-options button { display: grid; justify-items: start; width: 100%; gap: 3px; padding: 13px 16px; text-align: left; }
.content-opinion-exit-options button small { opacity: .78; font-size: 9px; }

.content-opinion-history-backdrop { z-index: 4200; padding: 22px; background: rgba(20, 31, 44, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.content-opinion-history-modal { width: min(1250px, calc(100vw - 44px)); max-height: calc(100vh - 44px); overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 22px; background: #fff; box-shadow: 0 30px 100px rgba(10, 22, 36, .38); }
.content-opinion-history-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid #e5ebf0; }
.content-opinion-history-modal > header h2 { margin: 4px 0 2px; color: #273448; font-size: 18px; }
.content-opinion-history-modal > header p { margin: 0; color: #8b96a4; font-size: 9px; }
.content-opinion-history-modal > header > div:last-child { display: flex; align-items: center; gap: 8px; }
.content-opinion-history-scroll { max-height: calc(100vh - 125px); overflow: auto; padding: 18px; background: linear-gradient(145deg, #fffafd, #f7fcff); }
.content-opinion-history-scroll > .content-opinion-result { box-shadow: none; }

@media (max-width: 1050px) {
  .content-opinion-entry-grid { grid-template-columns: 1fr; }
  .content-opinion-analysis-grid { grid-template-columns: 1fr; }
  .content-opinion-analysis-grid > .internal-bili-word-cloud { min-height: 300px; }
}

@media (max-width: 760px) {
  .content-mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .content-task-grid,
  .content-opinion-launch,
  .content-opinion-coverage,
  .content-opinion-summary-grid,
  .content-opinion-advice-grid,
  .content-opinion-top-discussions { grid-template-columns: 1fr; }
  .content-opinion-launch { align-items: stretch; padding: 20px; }
  .content-opinion-launch h2 { font-size: 20px; }
  .content-opinion-mode { display: grid; grid-template-columns: 1fr; }
  .content-opinion-launch-actions { justify-items: stretch; }
  .content-opinion-start { width: 100%; }
  .content-opinion-task-list { grid-template-columns: 1fr; }
  .content-opinion-progress,
  .content-opinion-result { padding: 16px; }
  .content-opinion-progress-head,
  .content-opinion-result-head { align-items: flex-start; flex-direction: column; }
  .content-opinion-progress-head > strong { font-size: 26px; }
  .content-opinion-result-head-actions { width: 100%; justify-content: space-between; }
  .content-opinion-result-toolbar { align-items: stretch; flex-direction: column; }
  .content-opinion-segmented { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .content-opinion-segmented button { min-width: 0; padding: 8px 4px; }
  .content-opinion-analysis-grid { grid-template-columns: 1fr; }
  .content-opinion-analysis-grid > .internal-bili-word-cloud { min-height: 260px; }
  .content-opinion-sentiment { grid-template-columns: repeat(2, 1fr); }
  .content-opinion-sentiment > div { border-top: 1px solid #e7edf2 !important; border-left: 1px solid #e7edf2 !important; }
  .content-opinion-sentiment > div:nth-child(-n+2) { border-top: 0 !important; }
  .content-opinion-sentiment > div:nth-child(2n+1) { border-left: 0 !important; }
  .content-opinion-history-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .content-opinion-history-item > i { display: none; }
  .content-opinion-history-backdrop { padding: 8px; }
  .content-opinion-history-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; }
  .content-opinion-history-modal > header { align-items: flex-start; padding: 13px; }
  .content-opinion-history-modal > header .plain-btn { display: none; }
  .content-opinion-history-scroll { max-height: calc(100vh - 95px); padding: 10px; }
  .content-opinion-coverage-actions { justify-content: stretch; }
  .content-opinion-coverage-actions button { flex: 1; }
  .content-opinion-rows-backdrop { padding: 8px; }
  .content-opinion-rows-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 15px; }
  .content-opinion-rows-modal > header { align-items: stretch; flex-direction: column; padding: 13px; }
  .content-opinion-rows-modal > header > div:last-child { justify-content: space-between; }
  .content-opinion-rows-scroll { padding: 10px; }
  .content-opinion-row { padding: 11px; }
  .content-opinion-row footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .content-opinion-row footer small { max-width: 100%; }
}
/* Secure authentication flows */
.auth-security-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
}

.auth-security-links a,
.auth-helper a {
  color: var(--primary, #e91f45);
  text-decoration: none;
}

.auth-recovery-kind-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 24px;
  padding: 5px;
  border: 1px solid rgba(31, 36, 48, 0.1);
  border-radius: 15px;
  background: rgba(243, 246, 250, 0.84);
}

.auth-recovery-kind-switch a {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px 12px;
  color: #707681;
  border-radius: 11px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.auth-recovery-kind-switch a.active {
  color: var(--auth-pink-deep, #e52f68);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(31, 36, 48, 0.09);
}

.auth-sms-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.auth-sms-button {
  min-width: 116px;
  min-height: 44px;
  margin-bottom: 1px;
}

.auth-bootstrap {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #667085;
  background: #fff;
}

.auth-recovery-codes-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(11, 18, 32, .62);
  backdrop-filter: blur(10px);
}

.auth-recovery-codes-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
}

.auth-recovery-codes-card pre {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid rgba(233, 31, 69, .16);
  border-radius: 14px;
  background: #fff7f9;
  color: #1f2937;
  font: 600 14px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  user-select: all;
}

@media (max-width: 640px) {
  .auth-sms-row {
    grid-template-columns: 1fr;
  }

  .auth-sms-button {
    width: 100%;
  }

  .auth-security-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* 置于样式表末尾，确保历史页面的局部菜单规则不会盖回旧外观。 */
body .hs-dropdown > .hs-dropdown-toggle,
body .folder-push-button,
body .folder-deal-button {
  border-color: #dfe7ee;
  border-radius: 10px;
  color: #25303c;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 7px rgba(31, 48, 65, 0.025);
}

body .hs-dropdown:hover > .hs-dropdown-toggle,
body .hs-dropdown:focus-within > .hs-dropdown-toggle,
body .folder-push-button:hover,
body .folder-deal-button:hover {
  border-color: #79d0ef;
  color: #087ea9;
  background: #fcfeff;
  box-shadow: 0 0 0 4px rgba(32, 174, 229, 0.1);
}

body .hs-dropdown-menu,
body .folder-push-menu,
body .folder-deal-menu,
body .folder-command-panel .folder-push-menu {
  z-index: 2147483000;
  border-color: rgba(190, 222, 234, 0.96);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(31, 48, 65, 0.17), 0 4px 12px rgba(31, 48, 65, 0.07);
  backdrop-filter: blur(16px);
}

body .hs-dropdown-menu button,
body .hs-dropdown-menu a,
body .folder-push-menu button,
body .folder-deal-menu button,
body .folder-push-empty {
  min-height: 36px;
  border-radius: 9px;
  color: #35404c;
  background: transparent;
  font-weight: 750;
}

body .hs-dropdown-menu button:hover,
body .hs-dropdown-menu a:hover,
body .folder-push-menu button:hover,
body .folder-deal-menu button:hover {
  color: #087ea9;
  background: #eff9fd;
}

body .folder-toolbar-dropdown-menu button[aria-checked="true"],
body .folder-deal-menu button[aria-checked="true"] {
  color: #087ea9;
  background: linear-gradient(135deg, rgba(226, 247, 254, 0.98), rgba(255, 239, 246, 0.94));
}

/* Refined administrator folder hero */
.admin-folder-head {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  min-height: 142px;
  margin-bottom: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(217, 231, 241, 0.92);
  border-radius: 22px;
  background:
    radial-gradient(circle at 4% 18%, rgba(251, 75, 135, 0.12), transparent 28%),
    radial-gradient(circle at 96% 12%, rgba(45, 190, 235, 0.13), transparent 30%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 46px rgba(31, 41, 55, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.admin-folder-head::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 26px;
  left: 26px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(251, 75, 135, 0), rgba(251, 75, 135, 0.72), rgba(45, 190, 235, 0.68), rgba(45, 190, 235, 0));
  content: "";
}

.admin-folder-intro {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.admin-folder-symbol {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, #fb7196 0%, #ee4265 54%, #32bde5 135%);
  box-shadow: 0 16px 30px rgba(238, 66, 101, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.admin-folder-symbol svg {
  width: 38px;
  height: 38px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.35;
}

.admin-folder-title {
  min-width: 0;
}

.admin-folder-title h2 {
  margin: 0 0 8px;
  color: #20242b;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.admin-folder-title p {
  max-width: 620px;
  margin: 0;
  color: #697382;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.admin-folder-head-side {
  display: flex;
  align-items: center;
  gap: 18px;
}

.admin-folder-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 0;
  min-width: 260px;
  padding: 12px 10px;
  border: 1px solid rgba(222, 232, 240, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(37, 51, 67, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-folder-summary span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 14px;
  border-radius: 0;
  background: transparent;
}

.admin-folder-summary span + span::before {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 1px;
  background: #e7edf2;
  content: "";
}

.admin-folder-summary strong {
  color: #20242b;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-folder-summary small {
  color: #8a95a3;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-folder-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 15px;
  white-space: nowrap;
  box-shadow: 0 16px 28px rgba(238, 66, 101, 0.2);
}

.admin-folder-create svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.4;
}

@media (max-width: 1060px) {
  .admin-folder-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .admin-folder-head-side {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .admin-folder-head {
    gap: 20px;
    min-height: 0;
    padding: 20px;
    border-radius: 19px;
  }

  .admin-folder-intro {
    align-items: flex-start;
    gap: 14px;
  }

  .admin-folder-symbol {
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .admin-folder-symbol svg {
    width: 32px;
    height: 32px;
  }

  .admin-folder-title h2 {
    margin-bottom: 6px;
    font-size: 25px;
  }

  .admin-folder-title p {
    font-size: 13px;
  }

  .admin-folder-head-side {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-folder-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .admin-folder-summary span {
    padding-inline: 8px;
  }

  .admin-folder-create {
    width: 100%;
  }
}

/* 达人监测 */
.tm-page {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 26px;
  background:
    radial-gradient(circle at 2% 4%, rgba(255, 102, 132, 0.09), transparent 25%),
    radial-gradient(circle at 96% 0%, rgba(92, 162, 244, 0.1), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 22px 65px rgba(43, 57, 81, 0.08);
}

.tm-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(226, 232, 240, 0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.42) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000, transparent 34%);
  content: "";
  pointer-events: none;
}

.tm-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.tm-page-head h1 {
  margin: 0 0 7px;
  color: #18202d;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.tm-page-head p {
  margin: 0;
  color: #8b96a5;
  font-size: 13px;
  font-weight: 700;
}

.tm-frequency-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 10px;
}

.tm-frequency-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: #8b96a5;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

.tm-frequency-status > span,
.tm-frequency-status > small {
  white-space: nowrap;
}

.tm-frequency-status > small {
  color: #9aa4b1;
  font-size: inherit;
  font-weight: inherit;
}

.tm-frequency-status > small::before {
  margin-right: 8px;
  color: #c2c9d1;
  content: "·";
}

.tm-frequency-status.is-protected {
  color: #df4667;
}

.tm-frequency-buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.tm-refresh-all {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid #ffb8c6;
  border-radius: 11px;
  color: #f04468;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 85, 121, 0.1);
}

.tm-protection-reset {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #f4a7b8;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #f05a78, #e84166);
  box-shadow: 0 9px 20px rgba(232, 65, 102, 0.18);
  font-size: 11px;
  font-weight: 900;
}

.tm-protection-reset:hover:not(:disabled) {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.tm-refresh-all:hover:not(:disabled) {
  border-color: #ff6b88;
  background: #fff6f8;
  transform: translateY(-1px);
}

.tm-scope-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 540px);
  min-height: 56px;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid #e8edf3;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 28px rgba(30, 45, 67, 0.07);
}

.tm-scope-tabs button {
  display: grid;
  place-content: center;
  gap: 2px;
  min-height: 46px;
  padding: 4px 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #293241;
  background: transparent;
  text-align: center;
}

.tm-scope-tabs strong {
  font-size: 14px;
  font-weight: 950;
}

.tm-scope-tabs small {
  color: #929cab;
  font-size: 10px;
  font-weight: 750;
}

.tm-scope-tabs button.active {
  border-color: #ffb3c1;
  color: #f33d61;
  background: linear-gradient(135deg, #fff7f9, #fff);
  box-shadow: 0 7px 17px rgba(255, 83, 119, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.tm-scope-tabs button.active small { color: #ff6885; }

.tm-workspace.vm-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.vm-toolbar .vm-search {
  width: min(250px, 31%);
}

.tm-table.vm-table {
  min-width: 1120px;
}

.vm-table th:first-child,
.vm-table td:first-child {
  min-width: 250px;
}

.vm-table tbody tr {
  cursor: default;
}

.vm-video-cell {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vm-video-cell .vm-cover {
  width: 82px;
  height: 50px;
}

.vm-video-cell > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.vm-video-cell strong,
.vm-video-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vm-video-cell strong {
  color: #2d3642;
  font-size: 11px;
  font-weight: 900;
}

.vm-video-cell small {
  color: #929daa;
  font-size: 9px;
  font-weight: 750;
}

.vm-video-cell em {
  justify-self: start;
  max-width: 150px;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid #ffd2dc;
  border-radius: 999px;
  color: #f04b6b;
  background: #fff8fa;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vm-history-cover {
  flex: 0 0 96px;
  width: 96px;
  height: 54px;
}

.tm-frequency-config {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, auto) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin: -7px 0 12px;
  padding: 9px 12px;
  border: 1px solid #e7edf4;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(31, 47, 70, 0.05);
}

.tm-frequency-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.tm-frequency-copy > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.tm-frequency-copy strong {
  color: #293241;
  font-size: 12px;
  font-weight: 950;
}

.tm-frequency-copy small {
  overflow: hidden;
  color: #909aa8;
  font-size: 10px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-frequency-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid #ffc2ce;
  border-radius: 11px;
  color: #f04468;
  background: #fff7f9;
  font-size: 18px;
  font-weight: 900;
}

.tm-frequency-field {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  color: #667281;
  font-size: 11px;
  font-weight: 850;
}

.tm-frequency-field select {
  width: 112px;
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid #dce4ec;
  border-radius: 11px;
  outline: 0;
  color: #354050;
  background-color: #fbfcfe;
  font-size: 12px;
  font-weight: 850;
}

.tm-frequency-field select:focus {
  border-color: #ff95aa;
  box-shadow: 0 0 0 3px rgba(255, 91, 124, 0.1);
}

.tm-frequency-field select:disabled { cursor: wait; opacity: 0.62; }

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

.tm-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 78px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid #e9eef4;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(33, 46, 66, 0.06);
}

.tm-summary-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tm-card-color), transparent);
  opacity: 0.7;
  content: "";
}

.tm-summary-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: var(--tm-card-color);
  background: color-mix(in srgb, var(--tm-card-color) 11%, white);
}

.tm-summary-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm-summary-copy {
  display: grid;
  gap: 2px;
}

.tm-summary-copy small,
.tm-summary-period {
  color: #909aaa;
  font-size: 10px;
  font-weight: 800;
}

.tm-summary-copy strong {
  color: #202734;
  font-size: 21px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.tm-summary-period {
  align-self: start;
  padding-top: 2px;
}

.tm-summary-card .tm-sparkline {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 60px;
  height: 18px;
  opacity: 0.62;
}

.tm-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.68fr) minmax(350px, 0.88fr);
  gap: 16px;
  align-items: start;
}

.tm-list-panel,
.tm-detail-panel {
  min-width: 0;
  border: 1px solid #e8edf3;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 40px rgba(32, 46, 67, 0.07);
}

.tm-list-panel { overflow: hidden; }

.tm-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 66px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f5;
}

.tm-search {
  display: flex;
  align-items: center;
  width: min(170px, 23%);
  min-width: 128px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #dfe6ed;
  border-radius: 11px;
  color: #9aa5b2;
  background: #fbfcfe;
}

.tm-search:focus-within {
  border-color: #ff95aa;
  box-shadow: 0 0 0 3px rgba(255, 91, 124, 0.1);
}

.tm-search span { font-size: 20px; transform: rotate(-18deg); }
.tm-search-uid { width: min(145px, 19%); }
.tm-search-uid span {
  width: 16px;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
  transform: none;
}

.tm-search input {
  width: 100%;
  height: 100%;
  padding: 0 0 0 7px;
  border: 0;
  outline: 0;
  color: #26303e;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.tm-toolbar select {
  width: auto;
  min-width: 102px;
  height: 38px;
  padding: 0 28px 0 10px;
  border: 1px solid #dfe6ed;
  border-radius: 11px;
  color: #4c5867;
  background-color: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.tm-toolbar-note {
  margin-left: auto;
  color: #98a2ae;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.tm-add-btn { white-space: nowrap; }

.tm-table-scroll {
  overflow: auto;
  overscroll-behavior-x: contain;
}

.tm-table {
  width: 100%;
  min-width: 870px;
  border-collapse: collapse;
  table-layout: auto;
  font-variant-numeric: tabular-nums;
}

.tm-table th {
  height: 42px;
  padding: 0 7px;
  color: #929caa;
  background: #fafbfd;
  font-size: 10px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.tm-table td {
  height: 68px;
  padding: 8px 7px;
  border-top: 1px solid #eef2f5;
  color: #566170;
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.tm-table tbody tr {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.tm-table tbody tr:hover { background: #fff9fa; }

.tm-table tbody tr.is-selected {
  background: linear-gradient(90deg, rgba(255, 91, 124, 0.08), rgba(255, 255, 255, 0));
  box-shadow: inset 3px 0 #ff5a7b;
}

.tm-table tbody tr.is-invalid { cursor: default; opacity: 0.72; }

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

.tm-avatar {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  overflow: hidden;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #f24a6b;
  background: linear-gradient(135deg, #ffe8ee, #fff5db);
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 0 0 1px #e7edf2, 0 5px 12px rgba(49, 62, 80, 0.1);
}

.tm-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tm-creator-cell > span:last-child,
.tm-detail-identity > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tm-creator-cell strong,
.tm-detail-identity strong {
  color: #252e3b;
  font-size: 12px;
  font-weight: 930;
}

.tm-creator-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tm-creator-name-line > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-mcn-badge {
  display: inline-flex;
  flex: 0 1 auto;
  max-width: 112px;
  overflow: hidden;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid #ded2ff;
  border-radius: 999px;
  color: #7554ba;
  background: #f5f1ff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-creator-cell strong em {
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 5px;
  color: #fff;
  background: #ff5477;
  font-size: 8px;
  font-style: normal;
}

.tm-creator-cell small,
.tm-detail-identity small { color: #9aa4b0; font-size: 9px; font-weight: 750; }
.tm-creator-cell .tm-creator-fans { color: #748191; }
.tm-fan-delta {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
}
.tm-fan-delta.is-positive { color: #129a66; background: #eaf9f2; }
.tm-fan-delta.is-negative { color: #df4a5c; background: #fff0f2; }
.tm-fan-delta.is-neutral { color: #84909d; background: #f1f4f7; }
.tm-metric-value,
.tm-table td b { color: #303b49; font-weight: 900; }

.tm-table .tm-delta {
  display: block;
  margin-top: 3px;
}

.tm-sync-cell {
  display: inline-grid;
  justify-items: start;
  gap: 3px;
}

.tm-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #667281;
  font-size: 10px;
  font-weight: 850;
}

.tm-sync-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aab3bd;
}

.tm-sync-status.success i { background: #18b878; box-shadow: 0 0 0 3px rgba(24, 184, 120, 0.11); }
.tm-sync-status.queued i,
.tm-sync-status.running i { background: #3f93ec; box-shadow: 0 0 0 3px rgba(63, 147, 236, 0.1); }
.tm-sync-status.failed i { background: #f05262; }
.tm-sync-status.stale i { background: #ed9b32; }

.tm-sync-status.running i { animation: tm-pulse 1.15s ease-in-out infinite; }

@keyframes tm-pulse {
  50% { opacity: 0.35; transform: scale(0.72); }
}

.tm-sync-time {
  color: #9aa4b0;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.25;
}

.tm-sync-error {
  display: block;
  max-width: 90px;
  overflow: hidden;
  color: #e55363;
  font-size: 8px;
  text-overflow: ellipsis;
}

.tm-row-action,
.tm-stop-btn {
  padding: 0;
  border: 0;
  color: #f04a6b;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
}

.tm-row-actions {
  display: inline-grid;
  justify-items: start;
  gap: 5px;
}

.tm-row-home {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.tm-row-history {
  color: #667281;
}

.tm-stop-btn {
  color: #9099a6;
}

.tm-row-action:hover,
.tm-stop-btn:hover { color: #cb2448; text-decoration: underline; }

.tm-detail-panel {
  position: sticky;
  top: 18px;
  padding: 17px;
  overflow: hidden;
}

.tm-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f5;
}

.tm-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tm-detail-trend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 13px 14px;
  border: 1px solid #f0e7ea;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff8fa, #fff);
}

.tm-detail-trend > span { display: grid; gap: 5px; }
.tm-detail-trend small { color: #8c96a3; font-size: 10px; font-weight: 800; }
.tm-detail-trend strong { color: #333d4a; font-size: 11px; font-weight: 850; }
.tm-detail-trend em { color: #f04468; font-size: 17px; font-style: normal; }
.tm-detail-trend .tm-sparkline { width: 100%; height: 36px; }

.tm-partial-notice {
  margin-bottom: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #a66c17;
  background: #fff8e8;
  font-size: 9px;
  font-weight: 750;
}

.tm-video-list {
  display: grid;
  gap: 9px;
  max-height: 520px;
  overflow: auto;
  scrollbar-width: thin;
}

.tm-video-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 11px;
  padding: 10px;
  border: 1px solid #edf1f4;
  border-radius: 13px;
  background: #fff;
}

.tm-video-cover {
  position: relative;
  display: grid;
  height: 66px;
  overflow: hidden;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #c9d5e2, #8ea0b4);
  font-size: 11px;
  font-weight: 900;
}

.tm-video-cover img { width: 100%; height: 100%; object-fit: cover; }
.tm-video-cover-badges {
  position: absolute;
  top: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  max-width: calc(100% - 10px);
}
.tm-video-cover-badge {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(36, 42, 54, 0.12);
}
.tm-video-cover-badge.is-popular {
  border-color: rgba(243, 199, 177, 0.92);
  color: #8a4a36;
  background: rgba(255, 239, 228, 0.94);
  backdrop-filter: blur(4px);
}
.tm-video-cover-badge.is-new {
  color: #fff;
  background: #ff4f72;
}
.tm-video-main { display: grid; gap: 5px; min-width: 0; }
.tm-video-main > strong { overflow: hidden; color: #2d3642; font-size: 11px; font-weight: 900; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.tm-video-main > small { color: #98a2ae; font-size: 8px; font-weight: 700; }
.tm-video-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tm-video-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-video-meta > em {
  flex: 0 0 auto;
  max-width: 48%;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid #ffd3dc;
  border-radius: 999px;
  color: #e64f6b;
  background: #fff5f7;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-video-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.tm-video-metrics > span {
  display: grid;
  min-width: 0;
  padding: 4px 5px;
  border-radius: 7px;
  background: #f7f9fb;
}

.tm-video-metrics small { color: #9aa4af; font-size: 7px; }
.tm-video-metrics b { color: #3e4856; font-size: 9px; font-weight: 900; }
.tm-pinned-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  width: fit-content;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-pinned-link.is-yes {
  color: #2788de;
  text-decoration: underline;
  text-decoration-color: rgba(39, 136, 222, 0.4);
  text-underline-offset: 2px;
}
.tm-pinned-link.is-yes:hover { color: #1265ae; }
.tm-pinned-link.is-no { color: #667281; }
.tm-pinned-link.is-unknown { color: #a0a9b4; font-size: 8px; }
.tm-delta { font-size: 7px; font-weight: 850; }
.tm-delta.is-positive { color: #16a86d; }
.tm-delta.is-negative { color: #e85363; }

.tm-loading,
.tm-error,
.tm-empty,
.tm-detail-empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 26px;
  color: #929ca8;
  text-align: center;
}

.tm-loading strong,
.tm-error strong,
.tm-empty strong,
.tm-detail-empty strong { color: #414b58; font-size: 14px; }
.tm-loading p,
.tm-error p,
.tm-empty p,
.tm-detail-empty p { max-width: 330px; margin: 0; font-size: 11px; line-height: 1.6; }
.tm-loading > span { width: 24px; height: 24px; border: 3px solid #ffe0e7; border-top-color: #ff5579; border-radius: 50%; animation: tm-spin 0.8s linear infinite; }

@keyframes tm-spin { to { transform: rotate(360deg); } }

.tm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid #edf1f5;
  color: #8994a1;
  font-size: 10px;
  font-weight: 850;
}

.tm-pagination button { width: 28px; height: 28px; border: 1px solid #e1e7ed; border-radius: 8px; color: #596574; background: #fff; }

.tm-modal-backdrop { backdrop-filter: blur(8px); }

.tm-modal {
  width: min(92vw, 480px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(37, 47, 66, 0.2);
}

.tm-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.tm-modal h2 { margin: 5px 0 7px; color: #242d39; font-size: 23px; }
.tm-modal header p,
.tm-remove-modal > p { margin: 0; color: #8994a2; font-size: 12px; line-height: 1.65; }
.tm-modal form { display: grid; gap: 16px; }
.tm-modal form > label { display: grid; gap: 8px; color: #4a5563; font-size: 12px; font-weight: 900; }
.tm-modal form input,
.tm-modal form textarea { border: 1px solid #dbe3ea; border-radius: 13px; color: #26303c; background: #fbfcfe; font-size: 15px; font-weight: 800; }
.tm-modal form input { height: 48px; padding: 0 14px; }
.tm-modal form textarea {
  min-height: 154px;
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.55;
}
.tm-modal form input:focus,
.tm-modal form textarea:focus { border-color: #ff8da4; outline: 0; box-shadow: 0 0 0 4px rgba(255, 85, 121, 0.1); }
.tm-modal form > label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tm-modal form > label > span em { color: #a1aab5; font-size: 10px; font-style: normal; font-weight: 750; }

.tm-modal-tip {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #84909e;
  background: #f7f9fc;
  font-size: 10px;
  line-height: 1.55;
}

.tm-modal-tip strong { color: #53606e; }
.tm-modal footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.tm-modal .tm-modal-split-footer { justify-content: space-between; }
.tm-modal-split-footer > span { display: flex; gap: 10px; }
.tm-batch-open-btn {
  border-color: #cfe8f2;
  color: #08789d;
  background: #f3fbfe;
}
.tm-batch-open-btn:hover { border-color: #9fd8e9; color: #056582; background: #eaf8fc; }
.tm-batch-modal { width: min(92vw, 560px); }
.tm-batch-preview {
  min-height: 75px;
  padding: 12px 14px;
  border: 1px solid #e6ebf0;
  border-radius: 13px;
  background: #fff;
}
.tm-batch-preview-empty { display: grid; gap: 4px; color: #9aa4af; font-size: 10px; }
.tm-batch-preview-empty strong { color: #687482; font-size: 11px; }
.tm-batch-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.tm-batch-preview-head strong { color: #384452; font-size: 11px; }
.tm-batch-preview-head span { color: #8d98a5; font-size: 9px; font-weight: 750; }
.tm-batch-uid-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tm-batch-uid-list span,
.tm-batch-uid-list em {
  padding: 4px 7px;
  border-radius: 7px;
  color: #08789d;
  background: #eef9fd;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}
.tm-batch-uid-list em { color: #7a8592; background: #f2f5f8; }
.tm-batch-error {
  padding: 9px 11px;
  border-radius: 10px;
  color: #c93f57;
  background: #fff0f3;
  font-size: 10px;
  font-weight: 800;
}
.tm-remove-modal > footer { margin-top: 22px; }

.tm-history-backdrop {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(30, 39, 53, 0.32);
  backdrop-filter: blur(7px);
}

.tm-history-modal {
  display: flex;
  width: min(1050px, calc(100vw - 30px));
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 26px 0 0 26px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: -24px 0 90px rgba(37, 47, 66, 0.18);
}

.tm-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid #edf1f5;
  background: rgba(255, 255, 255, 0.94);
}

.tm-history-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.tm-history-identity .tm-avatar {
  width: 54px;
  height: 54px;
}

.tm-history-identity > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.tm-history-identity small {
  color: #f04a6b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.tm-history-identity h2 {
  overflow: hidden;
  margin: 0;
  color: #242d39;
  font-size: 23px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-history-identity p {
  margin: 0;
  color: #919ba8;
  font-size: 10px;
  font-weight: 750;
}

.tm-history-body {
  display: grid;
  gap: 16px;
  padding: 20px 28px 36px;
  overflow: auto;
  scrollbar-width: thin;
}

.tm-history-filters,
.tm-history-chart-card,
.tm-history-records {
  border: 1px solid #e9eef3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(46, 58, 76, 0.04);
}

.tm-history-filters {
  position: relative;
  display: grid;
  gap: 15px;
  padding: 16px 150px 16px 18px;
}

.tm-history-methodology-toggle {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #e1e7ed;
  border-radius: 999px;
  color: #6e7a89;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  transition: 0.18s ease;
}

.tm-history-methodology-toggle > span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.tm-history-methodology-toggle:hover,
.tm-history-methodology-toggle[aria-expanded="true"] {
  border-color: #ff9eb1;
  color: #e94265;
  background: #fff5f7;
}

.tm-history-methodology {
  position: absolute;
  z-index: 5;
  top: 56px;
  right: 16px;
  width: min(430px, calc(100% - 32px));
  padding: 15px 16px;
  border: 1px solid #ffd3dc;
  border-radius: 15px;
  color: #687484;
  background: #fff;
  box-shadow: 0 18px 50px rgba(45, 55, 72, 0.16);
}

.tm-history-methodology header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tm-history-methodology header strong {
  color: #303a47;
  font-size: 12px;
  font-weight: 950;
}

.tm-history-methodology header button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #a0a9b4;
  background: #f5f7fa;
  font-size: 16px;
  line-height: 1;
}

.tm-history-methodology dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.tm-history-methodology dl > div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 9px;
}

.tm-history-methodology dt {
  color: #596574;
  font-size: 9px;
  font-weight: 900;
}

.tm-history-methodology dd {
  margin: 0;
  color: #7b8795;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.65;
}

.tm-history-filters > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.tm-history-filters > div > strong {
  color: #596574;
  font-size: 10px;
  font-weight: 900;
}

.tm-history-range-list,
.tm-history-metric-list {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.tm-history-range-list button,
.tm-history-metric-list button {
  min-height: 31px;
  padding: 0 13px;
  border: 1px solid #e1e7ed;
  border-radius: 999px;
  color: #727e8d;
  background: #fff;
  font-size: 10px;
  font-weight: 850;
  transition: 0.18s ease;
}

.tm-history-range-list button:hover,
.tm-history-metric-list button:hover {
  border-color: #ffb3c2;
  color: #e94265;
}

.tm-history-range-list button.is-active,
.tm-history-metric-list button.is-active {
  border-color: #ff8fa6;
  color: #e93d61;
  background: #fff2f5;
  box-shadow: 0 5px 14px rgba(255, 85, 121, 0.12);
}

.tm-history-filters .tm-history-custom-dates {
  grid-template-columns: 76px minmax(0, 170px) 20px minmax(0, 170px);
  color: #98a1ad;
}

.tm-history-custom-dates::before {
  content: "自定义";
  color: #596574;
  font-size: 10px;
  font-weight: 900;
}

.tm-history-custom-dates label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #8d97a4;
  font-size: 9px;
  font-weight: 800;
}

.tm-history-custom-dates input {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #dfe6ec;
  border-radius: 9px;
  color: #4e5a68;
  background: #fafbfd;
  font: inherit;
}

.tm-history-loading,
.tm-history-error {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #8b96a3;
  background: #f7f9fc;
  font-size: 10px;
  font-weight: 750;
}

.tm-history-loading > span {
  width: 17px;
  height: 17px;
  border: 2px solid #ffdce4;
  border-top-color: #ff5579;
  border-radius: 50%;
  animation: tm-spin 0.8s linear infinite;
}

.tm-history-loading p,
.tm-history-error p { margin: 0; }
.tm-history-error { align-items: baseline; color: #9a6e24; background: #fff8e8; }
.tm-history-error strong { color: #76531c; }

.tm-history-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.tm-history-stats article {
  display: grid;
  gap: 6px;
  min-height: 78px;
  padding: 14px 15px;
  border: 1px solid #e9eef3;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(46, 58, 76, 0.04);
}

.tm-history-stats small {
  color: #909aa7;
  font-size: 9px;
  font-weight: 800;
}

.tm-history-stats strong {
  color: #303a47;
  font-size: 19px;
  font-weight: 950;
}

.tm-history-stats .is-positive strong,
.tm-history-records td.is-positive { color: #13a56b; }
.tm-history-stats .is-negative strong,
.tm-history-records td.is-negative { color: #e35264; }

.tm-history-chart-card,
.tm-history-records {
  padding: 18px;
}

.tm-history-chart-card > header,
.tm-history-records > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tm-history-chart-card > header > div,
.tm-history-records > header > div {
  display: grid;
  gap: 3px;
}

.tm-history-chart-card header small,
.tm-history-records header small {
  color: #f04a6b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.tm-history-chart-card h3,
.tm-history-records h3 {
  margin: 0;
  color: #303a47;
  font-size: 15px;
  font-weight: 950;
}

.tm-history-chart-card header > span,
.tm-history-records header > span {
  color: #929ca8;
  font-size: 9px;
  font-weight: 750;
}

.tm-history-chart {
  display: block;
  width: 100%;
  min-height: 285px;
  overflow: visible;
}

.tm-history-grid line {
  stroke: #edf1f5;
  stroke-width: 1;
}

.tm-history-grid text,
.tm-history-x-labels text {
  fill: #9ba5b1;
  font-size: 9px;
  font-weight: 700;
}

.tm-history-line {
  fill: none;
  stroke: #ff5579;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 5px rgba(255, 85, 121, 0.18));
}

.tm-history-area { fill: url("#tmHistoryGradient"); }

.tm-history-point > circle {
  fill: #fff;
  stroke: #ff5579;
  stroke-width: 3;
  cursor: pointer;
  transition: 0.18s ease;
}

.tm-history-point:hover > circle,
.tm-history-point:focus > circle {
  r: 7;
  fill: #ff5579;
  outline: none;
}

.tm-history-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.tm-history-point:hover .tm-history-tooltip,
.tm-history-point:focus .tm-history-tooltip { opacity: 1; }
.tm-history-tooltip rect { fill: #26303d; filter: drop-shadow(0 5px 10px rgba(34, 43, 57, 0.2)); }
.tm-history-tooltip text { fill: #fff; font-size: 8px; font-weight: 750; }

.tm-history-chart-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border-radius: 14px;
  color: #9aa4af;
  background: linear-gradient(180deg, #fff, #fafbfd);
  text-align: center;
}

.tm-history-chart-empty strong { color: #596574; font-size: 13px; }
.tm-history-chart-empty span { font-size: 10px; }

.tm-history-records-scroll {
  max-height: 310px;
  overflow: auto;
  border: 1px solid #edf1f5;
  border-radius: 12px;
  scrollbar-width: thin;
}

.tm-history-records table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tm-history-records th,
.tm-history-records td {
  padding: 11px 13px;
  border-bottom: 1px solid #edf1f5;
  color: #596574;
  font-size: 10px;
  font-weight: 750;
  text-align: left;
}

.tm-history-records th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: #8b96a3;
  background: #f7f9fb;
  font-size: 9px;
  font-weight: 900;
}

.tm-history-records tbody tr:last-child td { border-bottom: 0; }
.tm-history-success { display: inline-flex; align-items: center; gap: 5px; color: #4f5c6a; }
.tm-history-success i { width: 7px; height: 7px; border-radius: 50%; background: #1ab87b; box-shadow: 0 0 0 4px #e7f8f1; }
.tm-history-table-empty { padding: 28px; color: #9aa4af; text-align: center; }

@media (max-width: 1280px) {
  .tm-frequency-config { grid-template-columns: minmax(250px, 1fr) minmax(330px, auto) auto; }
  .tm-frequency-status { font-size: 10px; }
  .tm-summary-card { grid-template-columns: 38px minmax(0, 1fr); padding: 12px 14px; }
  .tm-summary-period { display: none; }
  .tm-workspace { grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.8fr); }
  .tm-toolbar-note { display: none; }
}

@media (max-width: 1060px) {
  .tm-history-modal { width: min(940px, calc(100vw - 16px)); }
  .tm-history-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-frequency-config { grid-template-columns: minmax(0, 1fr) auto; }
  .tm-frequency-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-end;
    padding-top: 11px;
    border-top: 1px solid #edf1f5;
  }
  .tm-frequency-status { justify-content: flex-start; text-align: left; }
  .tm-frequency-field { grid-column: 2; grid-row: 1; }
  .tm-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-workspace { grid-template-columns: 1fr; }
  .tm-detail-panel { position: static; }
  .tm-video-list { max-height: none; }
}

@media (max-width: 700px) {
  .tm-history-modal { width: 100vw; border-radius: 0; }
  .tm-history-head { padding: 18px; }
  .tm-history-body { padding: 15px 14px 28px; }
  .tm-history-filters { padding: 62px 14px 14px; }
  .tm-history-methodology-toggle { top: 14px; right: 14px; }
  .tm-history-methodology { top: 55px; right: 14px; width: calc(100% - 28px); }
  .tm-history-filters > div { grid-template-columns: 1fr; }
  .tm-history-filters .tm-history-custom-dates { grid-template-columns: 1fr 1fr; }
  .tm-history-custom-dates::before,
  .tm-history-custom-dates > span { display: none; }
  .tm-history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-history-chart { min-width: 720px; }
  .tm-history-chart-card { overflow-x: auto; }
  .tm-page { min-height: 0; padding: 18px; border-radius: 20px; }
  .tm-page-head { align-items: flex-start; flex-direction: column; gap: 13px; }
  .tm-scope-tabs { width: 100%; min-height: 52px; }
  .tm-scope-tabs button { min-height: 42px; padding-inline: 8px; }
  .tm-frequency-config { display: flex; align-items: stretch; flex-direction: column; gap: 11px; }
  .tm-frequency-copy small { white-space: normal; }
  .tm-frequency-actions {
    width: 100%;
    justify-content: space-between;
    padding-top: 11px;
    border-top: 1px solid #edf1f5;
  }
  .tm-frequency-actions span { text-align: left; }
  .tm-frequency-status { justify-content: flex-start; text-align: left; }
  .tm-frequency-buttons { margin-left: auto; }
  .tm-frequency-field { justify-content: space-between; padding-left: 50px; }
  .tm-summary-grid { gap: 10px; }
  .tm-summary-card { min-height: 78px; padding: 12px 13px; border-radius: 15px; }
  .tm-summary-copy strong { font-size: 20px; }
  .tm-toolbar { align-items: stretch; flex-wrap: wrap; }
  .tm-search,
  .tm-search-uid { width: 100%; }
  .tm-toolbar select { flex: 1; }
  .tm-add-btn { flex: 1; }
  .tm-detail-head { align-items: flex-start; flex-direction: column; }
  .tm-detail-trend { grid-template-columns: minmax(0, 1fr) 90px; }
}

@media (max-width: 480px) {
  .tm-page { padding: 14px; }
  .tm-frequency-actions { align-items: stretch; flex-direction: column; }
  .tm-frequency-status { font-size: 10px; }
  .tm-frequency-buttons { width: 100%; margin-left: 0; }
  .tm-frequency-buttons > button { min-width: 0; flex: 1; }
  .tm-frequency-field { align-items: stretch; flex-direction: column; padding-left: 0; }
  .tm-frequency-field select { width: 100%; }
  .tm-summary-grid { grid-template-columns: 1fr; }
  .tm-summary-card { min-height: 74px; }
  .tm-video-item { grid-template-columns: 82px minmax(0, 1fr); }
  .tm-video-cover { height: 58px; }
  .tm-video-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-modal { padding: 19px; }
  .tm-modal .tm-modal-split-footer { align-items: stretch; flex-direction: column; }
  .tm-modal-split-footer > span { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .tm-batch-open-btn { width: 100%; }
  .tm-batch-preview-head { align-items: flex-start; flex-direction: column; gap: 3px; }
}