:root {
  --bg: #f6f7f4;
  --surface: #ffffff;
  --ink: #202421;
  --muted: #6f7771;
  --line: #e1e6df;
  --green: #c65d25;
  --green-soft: #fff0e4;
  --rose: #c85b50;
  --rose-soft: #fff0ed;
  --blue: #476f96;
  --amber: #d78338;
  --shadow: 0 18px 45px rgba(113, 58, 25, .1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.login-page { min-height: 100vh; display: block; padding: 0; background: #edf0e8; }
.login-visual { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr); grid-template-rows: auto 1fr auto; min-height: 100vh; overflow: hidden; padding: clamp(24px, 3.4vw, 52px) clamp(24px, 5vw, 78px); background: #a85d2e; }
.login-visual::before { content: ""; position: absolute; z-index: 0; inset: -12%; background: radial-gradient(circle at 18% 16%, rgba(255, 226, 175, .24), transparent 27%), linear-gradient(116deg, transparent 17%, rgba(255, 218, 164, .1) 24%, rgba(255, 236, 199, .2) 30%, transparent 39%, transparent 56%, rgba(255, 214, 157, .12) 65%, transparent 76%), linear-gradient(118deg, #8f4726 0%, #b76b35 52%, #c17b43 100%); background-size: 135% 135%, 180% 180%, 135% 135%; background-position: 50% 50%, 42% 50%, 50% 50%; animation: orangeSilkFlow 9s ease-in-out infinite; }
.login-visual::after { content: ""; position: absolute; z-index: 0; top: -24%; right: 21%; width: 44vw; height: 160%; pointer-events: none; background: linear-gradient(105deg, transparent 8%, rgba(255, 226, 174, .06) 20%, rgba(255, 242, 213, .18) 31%, rgba(255, 204, 135, .08) 39%, transparent 52%, transparent 66%, rgba(255, 232, 188, .12) 75%, transparent 87%); background-size: 170% 140%; filter: blur(9px); transform: rotate(14deg) translate3d(0, 0, 0); opacity: .74; animation: orangeSilkVeil 8s ease-in-out infinite; }
.login-visual > * { position: relative; z-index: 1; }
.brand-topbar { animation: loginRise .7s ease-out .05s both; }
.login-visual-copy > * { animation: loginRise .72s ease-out both; }
.login-visual-copy h2 { animation-delay: .16s; }
.login-visual-copy .landing-features { animation-delay: .27s; }
.login-visual-copy .login-enter { animation-delay: .38s; }
.login-visual-art { animation: loginArtFade .55s ease-out .08s both; will-change: opacity; }
.login-visual-foot { animation: loginRise .72s ease-out .5s both; }
.login-visual .silk-canvas { display: none; }
.brand-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff4dc; }
.brand-nav-mark { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: .02em; }
.brand-nav-mark img { width: 30px; height: 30px; border: 1px solid rgba(255, 242, 227, .6); border-radius: 9px; object-fit: cover; object-position: 50% 20%; }
.login-visual-copy { grid-column: 1; align-self: center; max-width: 720px; padding: 10vh 0 8vh; text-align: left; }
.login-wordmark { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; color: #f4b47e; font-size: clamp(58px, 7vw, 108px); font-weight: 900; line-height: .95; letter-spacing: .02em; }
.login-wordmark span:nth-child(2) { color: #ffe7d0; }
.login-wordmark span:nth-child(3) { color: #d8793d; }
.login-visual-copy h2 { display: grid; gap: 4px; max-width: 720px; margin: 24px 0 0; color: #fff5e4; font-size: clamp(42px, 5.5vw, 84px); line-height: 1.04; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 3px 18px rgba(83, 33, 13, .2), 0 0 16px rgba(255, 220, 160, .12); }
.login-visual-copy h2 span { display: block; }
.login-visual-copy p { max-width: 520px; margin: 22px auto 0; color: #f7c7a1; font-size: 15px; line-height: 1.9; }
.landing-features { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; color: #ffe5bd; font-size: 13px; letter-spacing: .08em; }
.landing-features span + span::before { content: "/"; margin-right: 24px; color: rgba(255, 220, 173, .62); }
.login-visual-art { grid-column: 2; grid-row: 2 / 4; position: relative; align-self: stretch; min-height: 520px; margin-top: clamp(18px, 4vh, 54px); margin-bottom: -56px; overflow: visible; border-radius: 42% 0 0 0; background: linear-gradient(145deg, #dfe6d2, #f1f0df 58%, #d1dac3); box-shadow: -24px 20px 44px rgba(89, 47, 27, .12); }
.login-visual-art::before { content: ""; position: absolute; inset: 12% 8% auto auto; width: 62%; height: 62%; border-radius: 50%; background: rgba(177, 195, 150, .35); filter: blur(2px); }
.login-visual-art::after { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(255, 255, 255, .42); border-radius: 42% 0 0 0; pointer-events: none; }
.login-visual-art img {
  position: absolute;
  z-index: 3;
  top: -5%;
  right: 50%;
  width: min(84%, 500px);
  height: 112%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: translateX(50%);
  filter: drop-shadow(-18px 18px 24px rgba(70, 56, 36, .13));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, .94) 80%, rgba(0, 0, 0, .54) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, .94) 80%, rgba(0, 0, 0, .54) 92%, transparent 100%);
}
.art-ring { position: absolute; z-index: 1; top: 22%; left: 13%; width: 64%; aspect-ratio: 1; border: 1px solid rgba(104, 131, 93, .38); border-radius: 50%; }
.art-ring::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(104, 131, 93, .18); border-radius: 50%; }
.login-poster { display: none; }
.login-poster img { display: block; width: 100%; height: auto; }
.login-visual-foot { grid-column: 1; display: flex; justify-content: space-between; gap: 16px; color: #f6dcb9; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.login-enter { display: inline-flex; align-items: center; gap: 28px; margin-top: 40px; border: 1px solid rgba(255, 238, 201, .7); border-radius: 999px; color: #704020; background: #f6dfaa; padding: 15px 19px 15px 24px; font-size: 13px; font-weight: 900; box-shadow: 0 10px 24px rgba(77, 36, 17, .16); }
.login-enter span { font-size: 18px; line-height: 1; }
@keyframes orangeSilkFlow {
  0%, 100% { transform: scale(1.04) translate3d(-1%, -.5%, 0) rotate(-.15deg); background-position: 47% 52%, 34% 51%, 50% 50%; }
  25% { transform: scale(1.07) translate3d(.7%, -.9%, 0) rotate(.1deg); background-position: 53% 48%, 48% 47%, 50% 50%; }
  50% { transform: scale(1.05) translate3d(1.4%, .4%, 0) rotate(.16deg); background-position: 57% 53%, 62% 55%, 50% 50%; }
  75% { transform: scale(1.08) translate3d(-.6%, .9%, 0) rotate(-.08deg); background-position: 51% 56%, 44% 61%, 50% 50%; }
}
@keyframes orangeSilkVeil {
  0%, 100% { transform: scale(1.04) translate3d(1%, .5%, 0) rotate(14deg); background-position: 54% 47%; opacity: .15; }
  33% { transform: scale(1.08) translate3d(-1%, -.7%, 0) rotate(15deg); background-position: 40% 54%; opacity: .26; }
  66% { transform: scale(1.06) translate3d(-1.4%, .8%, 0) rotate(13deg); background-position: 63% 49%; opacity: .2; }
}
@keyframes loginRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loginArtFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes loginModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-modal:not(.hidden) { animation: loginModalIn .24s ease-out both; }
.login-modal:not(.hidden) .login-card { animation: loginCardIn .34s cubic-bezier(.22, .75, .25, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .login-visual::before, .login-visual::after,
  .brand-topbar, .login-visual-copy > *, .login-visual-art, .login-visual-foot,
  .login-modal:not(.hidden), .login-modal:not(.hidden) .login-card { animation: none; }
}
.login-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(62, 24, 8, .48); backdrop-filter: blur(8px); }
.login-modal .login-card { position: relative; }
.modal-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: #9d715d; background: #fff4e8; font-size: 21px; line-height: 1; }
.login-card {
  width: min(520px, 100%);
  border: 1px solid #eddac8;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  padding: 34px;
  box-shadow: var(--shadow);
}
.login-brand {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}
.login-brand img {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  object-fit: cover;
  object-position: 50% 20%;
}
.login-brand h1 { margin-top: 6px; color: #542b1b; font-size: 27px; }
.login-brand p { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.login-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8faf7;
  padding: 4px;
}
.login-tab {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 10px;
  font-size: 13px;
  font-weight: 800;
}
.login-tab.active { color: var(--green); background: #fff; box-shadow: 0 4px 12px rgba(31,43,35,.06); }
.login-form { margin-top: 12px; }
.inline-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 7px; }
.inline-field input { margin-top: 0; }
.demo-accounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.demo-accounts button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #4f5b54;
  padding: 9px;
  font-size: 12px;
  font-weight: 800;
}
.login-note { margin-top: 14px; color: #9a8178; font-size: 12px; line-height: 1.6; }

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

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 22px;
  border-bottom: 1px solid var(--line);
}
.brand img {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  object-fit: cover;
  object-position: 50% 20%;
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: 16px; }
.brand span { margin-top: 4px; color: var(--muted); font-size: 11px; }

nav { display: grid; gap: 5px; margin-top: 22px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 8px;
  color: #68716b;
  background: transparent;
  padding: 11px 13px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; color: #909892; transition: color .18s ease, transform .18s ease; }
.nav-item:hover { color: #875334; background: #fff6ef; }
.nav-item:hover svg { color: #bf6a35; transform: translateX(1px); }
.nav-item.active { color: #934b24; background: #fff0e4; box-shadow: inset 0 0 0 1px rgba(198, 93, 37, .08); }
.nav-item.active svg { color: var(--green); stroke-width: 2.1; }

.role-card {
  position: absolute;
  right: 16px;
  bottom: 18px;
  left: 16px;
  border: 1px solid #eadad4;
  border-radius: 12px;
  background: var(--rose-soft);
  padding: 15px;
}
.role-card span, .role-card strong { display: block; }
.role-card span { color: #a06f66; font-size: 11px; }
.role-card strong { margin-top: 5px; font-size: 16px; }
.role-card button {
  width: 100%;
  margin-top: 12px;
  border: 1px solid #e2b8ae;
  border-radius: 8px;
  color: #a5473e;
  background: #fff;
  padding: 8px;
  font-size: 12px;
  font-weight: 700;
}

main { min-width: 0; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 78px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(10px);
}
.eyebrow {
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin: 0; }
h1 { margin-top: 4px; font-size: 24px; }
.account { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.account b { color: var(--ink); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #51a96f; }
.logout-button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.page { padding: 30px 34px 64px; }
.pipi-page {
  height: calc(100vh - 78px);
  min-height: 0;
  overflow: hidden;
  padding-bottom: 30px;
}
.hidden { display: none !important; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid #e8ddd5;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff7f3 0%, #f2f8f4 48%, #eef4ff 100%);
  padding: 34px 42px;
}
.hero h2 {
  max-width: 760px;
  margin-top: 12px;
  font-size: 34px;
  line-height: 1.22;
  letter-spacing: 0;
}
.hero p {
  max-width: 680px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
.hero img {
  width: 180px;
  height: 180px;
  justify-self: end;
  border: 8px solid #fff;
  border-radius: 36px;
  object-fit: cover;
  object-position: 50% 20%;
  box-shadow: var(--shadow);
}
.hero-actions { display: flex; gap: 10px; margin-top: 24px; }
.home-banner { position: relative; min-height: 320px; overflow: hidden; border: 1px solid rgba(166, 76, 22, .22); border-radius: 14px; background: #a85d2e; box-shadow: 0 18px 42px rgba(151, 70, 19, .16); }
.home-banner::before { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(ellipse at 78% 38%, rgba(255, 234, 201, .2), transparent 46%), radial-gradient(circle at 18% 12%, rgba(255, 226, 175, .22), transparent 29%), linear-gradient(118deg, #8f4726 0%, #b76b35 55%, #c17b43 100%); }
.home-banner::after { content: ""; position: absolute; z-index: 1; top: -28%; right: 26%; width: 28%; height: 156%; pointer-events: none; border-left: 1px solid rgba(255, 238, 199, .17); border-right: 1px solid rgba(255, 238, 199, .1); transform: rotate(14deg); opacity: .72; }
.home-banner-copy { position: relative; z-index: 2; display: flex; width: 62%; min-height: 320px; flex-direction: column; justify-content: center; padding: 34px 6%; color: #ffead2; }
.home-banner-copy > span { color: #ffe0b3; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.home-banner-copy h2 { max-width: 560px; margin: 22px 0 14px; color: #fff7e9; font-size: clamp(30px, 3.5vw, 54px); line-height: 1.1; letter-spacing: .03em; white-space: nowrap; }
.home-banner-copy p { color: #ffe2bb; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.home-banner-copy small { margin-top: 24px; color: #ffd0a0; font-size: 11px; letter-spacing: .12em; }
.home-banner-art { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 42%; margin-top: 0; margin-bottom: 0; overflow: hidden; background: transparent; }
.home-banner-art::before { content: ""; position: absolute; z-index: 1; inset: 8% -12% -8% 0; pointer-events: none; background: linear-gradient(120deg, transparent 30%, rgba(255, 236, 202, .16) 47%, rgba(255, 219, 170, .08) 58%, transparent 76%); filter: blur(26px); opacity: .62; transform: rotate(-8deg); }
.home-banner-art::after { display: none; }
.home-teacher-figure { position: absolute; z-index: 3; top: 5%; right: 50%; width: min(106%, 560px); height: 146%; object-fit: contain; object-position: 50% 0%; transform: translateX(50%); filter: drop-shadow(-10px 13px 15px rgba(72, 35, 16, .24)); }
.home-art-ring { display: none; }
.quick-start { margin-top: 24px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.section-heading h3 { margin-top: 4px; font-size: 20px; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.quick-start-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-start-card { position: relative; min-height: 132px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .92); padding: 16px; text-align: left; box-shadow: 0 8px 22px rgba(31, 43, 35, .035); }
.quick-start-card:hover { border-color: #d7a27e; transform: translateY(-2px); box-shadow: var(--shadow); }
.quick-start-card span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--green); font-size: 13px; font-weight: 900; }
.quick-start-card strong { display: block; margin-top: 12px; font-size: 14px; }
.quick-start-card small { display: block; max-width: 190px; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.quick-start-card em { position: absolute; right: 14px; bottom: 14px; color: var(--green); font-size: 11px; font-style: normal; font-weight: 800; }
.primary, .secondary {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
}
.primary { border: 0; color: #fff; background: var(--green); }
.primary:hover { background: #1d583c; }
.secondary { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.secondary:hover { border-color: #8bb69e; color: var(--green); }
.full { width: 100%; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.tool-card {
  position: relative;
  min-height: 156px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  text-align: left;
  box-shadow: 0 8px 22px rgba(31,43,35,.035);
}
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tool-card.locked { opacity: .48; }
.tool-card span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}
.tool-card strong { display: block; margin-top: 16px; font-size: 16px; }
.tool-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.tool-card em { position: absolute; right: 16px; bottom: 14px; color: #a8b0aa; font-style: normal; }

.panel, .form-panel, .result-panel, .knowledge-panel, .chat-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.panel { margin-top: 20px; padding: 20px; }
.continue-panel { margin-top: 20px; }
.continue-list { display: grid; gap: 8px; }
.continue-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 12px 0; }
.continue-item:first-child { border-top: 0; padding-top: 0; }
.continue-item-main { display: grid; gap: 4px; min-width: 0; }
.continue-item-main span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.continue-item-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.continue-item-main small { color: var(--muted); font-size: 10px; }
.continue-empty { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 12px; }
.continue-empty strong { color: var(--ink); font-size: 13px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.link-button { border: 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 800; }

.workbench {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: calc(100vh - 140px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.form-panel {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 24px;
}
.agent-section-head { margin-bottom: 14px; }
.agent-section-head strong { display: block; margin-top: 5px; font-size: 16px; }
.agent-section-head p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.agent-grid { display: grid; gap: 8px; margin-bottom: 18px; }
.agent-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 8px;
  color: var(--ink);
  text-align: left;
}
.agent-card:hover, .agent-card.active { border-color: #9dc6ad; background: #f3f8f4; }
.agent-card strong, .agent-card small { display: block; }
.agent-card strong { font-size: 12px; }
.agent-card small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.agent-cover {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px dashed #c9d5cc;
  border-radius: 8px;
  color: #8ca395;
  background: #f7faf7;
  font-size: 10px;
  font-weight: 800;
}
.agent-market { padding-bottom: 22px; }
.agent-market-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.agent-market-head h2 { margin-top: 6px; font-size: 28px; }
.agent-market-head h2 small { margin-left: 8px; color: #a2aaa4; font-size: 13px; font-weight: 500; }
.agent-market-toolbar { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.agent-search { display: flex; align-items: center; gap: 8px; width: min(620px, 100%); margin: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 12px; color: #8f9891; }
.agent-search input { margin: 0; border: 0; background: transparent; box-shadow: none; }
.agent-search input:focus { box-shadow: none; }
.agent-sort { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.agent-sort button, .agent-filters button { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #68726b; padding: 8px 13px; font-size: 12px; font-weight: 800; }
.agent-sort button.active, .agent-filters button.active { border-color: var(--green); color: #fff; background: var(--green); }
.agent-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agent-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.agent-market-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(31,43,35,.035); }
.agent-market-card:hover, .agent-market-card.active { border-color: #9dc6ad; box-shadow: 0 12px 28px rgba(31,43,35,.08); }
.agent-market-card .agent-cover.large { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; border: 0; border-radius: 0; background: #e7e1d9; }
.agent-market-card .agent-cover.large img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: var(--cover-focus, 50% 48%); transform: scale(var(--cover-zoom, 1)); transform-origin: var(--cover-focus, 50% 48%); transition: transform .35s ease; }
.agent-market-card:hover .agent-cover.large img { transform: scale(calc(var(--cover-zoom, 1) * 1.035)); }
.agent-card-body { display: flex; flex: 1; flex-direction: column; padding: 15px; }
.agent-card-body h3 { font-size: 15px; }
.agent-card-body p { min-height: 40px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.agent-meta { display: flex; gap: 6px; margin: 12px 0 14px; }
.agent-meta span { border-radius: 999px; color: #809087; background: #f3f6f3; padding: 5px 7px; font-size: 10px; }
.agent-use { margin-top: auto; padding: 9px 12px; font-size: 12px; }
.copy-compose { margin-top: 22px; }
.copy-back { display: inline-block; margin-bottom: 22px; padding: 0; }
.agent-chat-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); height: calc(100vh - 140px); min-height: 600px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fbfaf7; box-shadow: 0 12px 34px rgba(75, 54, 37, .08); }
.agent-session-sidebar { display: flex; min-height: 0; overflow-y: auto; border-right: 1px solid #e7e2dc; background: #f5f3ef; padding: 20px 12px 14px; flex-direction: column; }
.agent-session-brand { padding: 0 8px 22px; }
.agent-session-brand span, .agent-session-brand strong { display: block; }
.agent-session-brand span { color: #aa6a42; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.agent-session-brand strong { margin-top: 7px; color: #37322e; font-size: 15px; }
.agent-session-sidebar .copy-back { margin: auto 7px 2px; padding: 12px 3px 2px; color: #817871; font-size: 11px; text-align: left; }
.agent-new-session { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid #ded8d1; border-radius: 7px; color: #433c36; background: #fff; padding: 11px 12px; font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(54, 43, 34, .035); }
.agent-new-session span { color: #a75327; font-size: 17px; font-weight: 500; line-height: 1; }
.session-label { margin: 24px 8px 9px; color: #9d958e; font-size: 10px; font-weight: 800; }
.agent-session-item { display: block; width: 100%; margin-bottom: 3px; border: 0; border-radius: 6px; color: #69635e; background: transparent; padding: 9px 10px; text-align: left; font-size: 12px; font-weight: 700; }
.agent-session-item strong, .agent-session-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-session-item small { margin-top: 4px; color: #a0a7b4; font-size: 10px; font-weight: 500; }
.agent-session-item:hover, .agent-session-item.active { color: #8c4b25; background: #ebe6df; }
.agent-chat-main { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.agent-chat-body { height: 100%; min-height: 0; overflow-y: auto; background: #fbfaf7; padding: 0 0 146px; }
.agent-chat-body:not(.has-conversation) { overflow: hidden; padding-bottom: 0; }
.agent-start-screen { position: relative; isolation: isolate; display: flex; min-height: 100%; align-items: center; flex-direction: column; justify-content: center; overflow: hidden; padding: 52px 44px 230px; color: #342d28; text-align: center; background: linear-gradient(180deg, #fbfaf7 0%, #f8f5f0 100%); }
.agent-start-screen::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 22% 20%, rgba(242, 187, 132, .18), transparent 28%), radial-gradient(circle at 82% 78%, rgba(174, 192, 155, .2), transparent 32%); }
.agent-start-art { position: absolute; z-index: -1; right: -5%; bottom: -19%; width: 62%; height: 60%; background: linear-gradient(rgba(255, 251, 244, .28), rgba(255, 251, 244, .56)), url("assets/orange-silk-motion.png") center / cover; opacity: .3; filter: saturate(.68); transform: rotate(-7deg); -webkit-mask-image: linear-gradient(140deg, transparent 6%, #000 48%, transparent 94%); mask-image: linear-gradient(140deg, transparent 6%, #000 48%, transparent 94%); }
.agent-intro-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border: 1px solid #ead8c8; border-radius: 8px; color: #94512c; background: #fff8ee; font-size: 22px; font-weight: 900; box-shadow: 0 10px 28px rgba(99, 61, 35, .08); }
.agent-intro-mark img, .agent-chat-cover img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: var(--cover-focus, 50% 48%); }
.agent-start-screen h1 { max-width: 760px; color: #2f2a26; font-size: 44px; font-weight: 650; line-height: 1.16; letter-spacing: 0; }
.agent-start-screen > p { max-width: 620px; margin-top: 13px; color: #777069; font-size: 13px; line-height: 1.75; }
.agent-opening-guide { width: min(620px, 100%); margin-top: 22px; border: 1px solid rgba(192, 142, 102, .24); border-radius: 12px; background: rgba(255, 255, 255, .68); padding: 13px 16px; text-align: left; }
.agent-opening-guide strong { color: #97532f; font-size: 11px; }
.agent-opening-guide p { margin: 6px 0 0; color: #6f6760; font-size: 12px; line-height: 1.65; }
.agent-start-screen .starter-chips { justify-content: center; margin-top: 22px; }
.agent-start-screen .starter-chips button { border: 1px solid #e8ded4; border-radius: 999px; color: #776d65; background: rgba(255, 255, 255, .72); padding: 8px 13px; }
.agent-start-screen .starter-chips button:hover { border-color: #d7b89f; color: #8f4b27; background: #fff; }
.agent-chat-body.has-conversation .agent-start-screen { display: none; }
.copy-conversation { width: min(820px, 100%); margin: 0 auto; padding: 42px 28px 20px; }
.copy-chat-message { display: flex; margin-bottom: 28px; }
.copy-chat-message.user { justify-content: flex-end; }
.copy-message-bubble { max-width: 72%; border-radius: 8px; color: #3f3a36; background: #eee9e3; padding: 11px 14px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.copy-chat-message.assistant { display: block; }
.copy-message-label { margin-bottom: 8px; color: #9b6745; font-size: 11px; font-weight: 800; }
.copy-message-text { outline: none; color: #373a37; font-size: 14px; line-height: 1.82; white-space: pre-wrap; }
.copy-message-text:focus { border-radius: 6px; box-shadow: 0 0 0 3px rgba(198, 93, 37, .1); }
.copy-thinking { display: flex; gap: 5px; padding: 8px 0; }
.copy-thinking span { width: 6px; height: 6px; border-radius: 50%; background: #c65d25; animation: copyThinking 1.1s ease-in-out infinite; }
.copy-thinking span:nth-child(2) { animation-delay: .14s; }
.copy-thinking span:nth-child(3) { animation-delay: .28s; }
@keyframes copyThinking { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.agent-simple-composer { position: absolute; z-index: 5; right: 24px; bottom: 22px; left: 24px; border: 0; background: transparent; padding: 0; transition: bottom .2s ease; }
.agent-chat-main:not(.has-conversation) .agent-simple-composer { bottom: calc(50% - 172px); }
.agent-prompt-box { width: min(820px, 100%); margin: 0 auto; border: 1px solid rgba(145, 112, 87, .28); border-radius: 10px; background: rgba(255, 255, 255, .94); padding: 14px 15px 10px; box-shadow: 0 18px 48px rgba(62, 38, 23, .12); backdrop-filter: blur(14px); }
.agent-prompt-box textarea { min-height: 66px; max-height: 180px; margin: 0; border: 0; background: transparent; padding: 3px 2px; box-shadow: none; resize: none; }
.agent-prompt-box textarea:focus { border: 0; box-shadow: none; }
.agent-simple-composer .agent-composer-footer { margin-top: 8px; }
.agent-composer-tools { display: flex; align-items: center; gap: 9px; color: #9a9189; font-size: 10px; }
.icon-action, .agent-send-button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0; }
.icon-action { color: #776e67; background: transparent; font-size: 17px; }
.icon-action:hover { background: #f1ece7; }
.agent-send-button { color: #fff; background: #a75327; font-size: 18px; font-weight: 900; }
.agent-send-button:hover { background: #8f4726; }
.agent-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 84px; border-bottom: 1px solid var(--line); background: #fff; padding: 14px 24px; }
.agent-chat-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.agent-chat-cover { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 17px; color: #5949ee; background: #eef0ff; font-size: 25px; font-weight: 900; }
.agent-chat-identity h2 { font-size: 18px; }
.agent-chat-identity p { max-width: 760px; margin-top: 4px; overflow: hidden; color: #a0a7b4; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.agent-chat-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.agent-chat-actions button { color: #4d3ee8; padding: 8px 11px; font-size: 11px; }
.agent-welcome-card { display: flex; gap: 14px; width: min(760px, 100%); border: 1px solid #e1e4ef; border-radius: 18px; background: #fff; padding: 20px 22px; }
.agent-welcome-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; color: #5949ee; background: #eef0ff; font-size: 20px; }
.agent-welcome-card strong { font-size: 16px; }
.agent-welcome-card p { margin-top: 7px; color: #737b89; font-size: 12px; line-height: 1.6; }
.starter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.starter-chips button { border: 0; border-radius: 999px; color: #5949ee; background: #eef0ff; padding: 8px 11px; font-size: 11px; }
.agent-chat-body #copyResult { margin-top: 0; }
.agent-composer:not(.agent-simple-composer) { border-top: 1px solid var(--line); background: #fff; padding: 14px 24px 18px; }
.copy-composer-fields { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 10px; }
.copy-composer-fields label { margin-bottom: 8px; font-size: 11px; }
.copy-composer-fields input, .copy-composer-fields select { padding: 9px 10px; font-size: 12px; }
.agent-composer > textarea { min-height: 60px; margin: 0; background: #fafbfe; }
.agent-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.agent-composer-footer span { color: #a0a7b4; font-size: 10px; }
.agent-composer-footer div { display: flex; gap: 8px; }
.agent-composer-footer button { padding: 8px 12px; font-size: 11px; }
.agent-simple-composer .agent-composer-footer button { flex: 0 0 auto; padding: 0; font-size: 17px; }
.agent-simple-composer .agent-composer-footer .agent-send-button { font-size: 18px; }
.agent-chat-main:not(.has-conversation) #copyCopywriting,
.agent-chat-main:not(.has-conversation) #exportCopywriting { display: none; }
.copy-compose-open { overflow: hidden; }
.copy-compose-open .app { grid-template-columns: minmax(0, 1fr); height: 100vh; overflow: hidden; }
.copy-compose-open .sidebar, .copy-compose-open .topbar, .copy-compose-open .floating { display: none !important; }
.sales-page-open .floating { display: none !important; }
.copy-compose-open main { height: 100vh; overflow: hidden; }
.copy-compose-open #copyPage.page { height: 100vh; padding: 0; }
.copy-compose-open .agent-chat-layout { height: 100vh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.copy-compose-open .wechat-layout-workspace { height: 100vh; overflow: hidden; }
.wechat-layout-workspace { min-height: 760px; color: #392f29; background: #f3efe9; }
.wechat-layout-header { display: flex; min-height: 112px; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #ded5cc; background: rgba(255, 253, 249, .96); padding: 18px 28px; }
.wechat-layout-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.wechat-layout-header .link-button { display: block; margin: 0 0 7px; padding: 0; color: #8e7668; font-size: 10px; }
.wechat-layout-header .eyebrow { font-size: 8px; letter-spacing: .16em; }
.wechat-layout-header h2 { margin-top: 3px; color: #352a24; font-size: 24px; letter-spacing: -.04em; }
.wechat-layout-header p { margin-top: 4px; color: #8a7f77; font-size: 11px; }
.wechat-layout-actions { display: flex; max-width: 440px; flex-wrap: wrap; flex: 0 1 440px; justify-content: flex-end; gap: 8px; }
.wechat-layout-actions button { padding: 9px 11px; font-size: 10px; }
.wechat-layout-grid { display: grid; grid-template-columns: 370px minmax(0, 1fr); height: calc(100vh - 112px); min-height: 648px; }
.wechat-layout-controls { min-height: 0; overflow-y: auto; border-right: 1px solid #ded5cc; background: #fffdf9; padding: 24px 22px 40px; }
.wechat-layout-step { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.wechat-layout-step:not(:first-child) { margin-top: 24px; }
.wechat-layout-step b { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #b55e32; background: #f8e8dd; font-size: 9px; letter-spacing: .04em; }
.wechat-layout-step strong, .wechat-layout-step small { display: block; }
.wechat-layout-step strong { color: #44362e; font-size: 12px; }
.wechat-layout-step small { margin-top: 3px; color: #9b8d84; font-size: 9px; line-height: 1.5; }
#wechatLayoutArticle { min-height: 300px; margin: 0; border-color: #ddd3ca; border-radius: 9px; background: #fbfaf7; color: #413933; font-size: 12px; line-height: 1.72; resize: vertical; }
.wechat-theme-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wechat-output-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.wechat-output-mode button { border: 1px solid #e4dbd2; border-radius: 9px; color: #76685f; background: #fff; padding: 10px 8px; text-align: left; }
.wechat-output-mode button.active { border-color: #a85f37; color: #783d22; background: #fff3e9; box-shadow: inset 0 0 0 1px rgba(168,95,55,.12); }
.wechat-output-mode strong, .wechat-output-mode small { display: block; }
.wechat-output-mode strong { font-size: 11px; }
.wechat-output-mode small { margin-top: 3px; color: #9d8e85; font-size: 8px; }
.wechat-theme-picker button { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 2px 8px; border: 1px solid #e4dbd2; border-radius: 9px; color: #675a52; background: #fff; padding: 10px; text-align: left; }
.wechat-theme-picker button:hover, .wechat-theme-picker button.active { border-color: #be7952; color: #7e4125; background: #fff8f2; box-shadow: 0 0 0 2px rgba(181, 94, 50, .08); }
.wechat-theme-picker button > span { grid-row: 1 / span 2; width: 18px; height: 31px; border-radius: 4px; background: linear-gradient(180deg, #9b8c64 0 42%, #e9e5cf 42%); }
.wechat-theme-picker [data-wechat-theme="slow"] > span { background: linear-gradient(180deg, #161616 0 42%, #f5f5f2 42%); }
.wechat-theme-picker [data-wechat-theme="geometry"] > span { background: linear-gradient(180deg, #e77351 0 42%, #fff0d7 42%); }
.wechat-theme-picker [data-wechat-theme="noir"] > span { background: linear-gradient(180deg, #252321 0 42%, #b58b5d 42%); }
.wechat-theme-picker [data-wechat-theme="nature"] > span { background: linear-gradient(180deg, #718c36 0 42%, #e7ecaf 42%); }
.wechat-theme-picker [data-wechat-theme="gallery"] > span { background: linear-gradient(180deg, #aa796d 0 42%, #f1d9d4 42%); }
.wechat-theme-picker strong { font-size: 10px; }
.wechat-theme-picker small { color: #a2958d; font-size: 8px; }
.wechat-editor-tools { margin-top: 22px; padding-top: 2px; border-top: 1px solid #eee5dd; }
.wechat-setting-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin: 11px 0; color: #75665c; font-size: 10px; }
.wechat-setting-row input[type="range"] { width: 100%; accent-color: #ac572e; }
.wechat-setting-row output { color: #ac572e; font-size: 10px; text-align: right; }
.wechat-setting-row select { grid-column: 2 / 4; min-width: 0; border: 1px solid #e4dbd2; border-radius: 6px; color: #5e5047; background: #fff; padding: 8px; font-size: 10px; }
.wechat-color-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wechat-color-row label { margin-right: 3px; }
.wechat-color-row button { border: 1px solid #e4dbd2; border-radius: 99px; color: #75665c; background: #fff; padding: 4px 8px; font-size: 9px; }
.wechat-color-row button.active { border-color: #ac572e; color: #8f4525; background: #fff5ee; }
.wechat-color-row input[type="color"] { width: 25px; height: 22px; margin-left: auto; border: 0; padding: 0; background: transparent; }
.wechat-fixed-toggle { display: flex; align-items: center; gap: 7px; margin: 14px 0 8px; color: #65574e; font-size: 10px; }
.wechat-fixed-toggle input { accent-color: #ac572e; }
.wechat-editor-tools > textarea { width: 100%; min-height: 60px; resize: vertical; border: 1px solid #e4dbd2; border-radius: 7px; color: #594b43; background: #fff; padding: 9px; font-size: 10px; line-height: 1.6; }
.wechat-import-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.wechat-import-actions button { padding: 8px 7px; font-size: 10px; }
.wechat-image-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.wechat-image-list span { color: #a1948b; font-size: 9px; }
.wechat-image-thumb { position: relative; width: 48px; height: 48px; overflow: hidden; border: 1px solid #e1d7ce; border-radius: 6px; background: #f6f1ec; }
.wechat-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wechat-image-thumb button { position: absolute; top: 2px; right: 2px; display: grid; width: 16px; height: 16px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(50, 38, 30, .72); padding: 0; font-size: 10px; }
.wechat-layout-generate { margin-top: 22px; min-height: 42px; background: #ac572e; }
.wechat-layout-generate:hover { background: #8f4525; }
.wechat-layout-note { margin: 10px 2px 0; color: #9a8d84; font-size: 9px; line-height: 1.6; }
.wechat-layout-preview-panel { min-width: 0; min-height: 0; overflow: hidden; background: #e9e4de; }
.wechat-preview-toolbar { display: flex; height: 54px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #dad2ca; background: #f7f4f0; padding: 0 22px; }
.wechat-preview-toolbar > div { display: flex; align-items: center; gap: 8px; }
.wechat-preview-toolbar div > span { width: 7px; height: 7px; border-radius: 50%; background: #65a76e; box-shadow: 13px 0 #e4ab4d, 26px 0 #ce6b55; }
.wechat-preview-toolbar strong { margin-left: 25px; color: #5d5149; font-size: 10px; }
.wechat-preview-toolbar small { color: #a09288; font-size: 9px; }
.wechat-preview-toolbar em { color: #9a755e; font-size: 9px; font-style: normal; }
.wechat-preview-shell { height: calc(100% - 54px); overflow: auto; padding: 32px; }
.wechat-preview-empty { display: grid; width: min(677px, 100%); min-height: 520px; margin: 0 auto; place-items: center; align-content: center; border: 1px dashed #cfc4b9; color: #a4968c; background: rgba(255, 255, 255, .54); padding: 30px; text-align: center; }
.wechat-preview-empty b { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #d4c3b4; border-radius: 50%; color: #b16a43; font-family: serif; font-size: 24px; }
.wechat-preview-empty strong { margin-top: 20px; color: #6a5e56; font-size: 14px; }
.wechat-preview-empty span { margin-top: 8px; font-size: 10px; }
#wechatLayoutPreview { display: block; width: 717px; max-width: 100%; height: 900px; margin: 0 auto; border: 0; background: #fff; box-shadow: 0 18px 60px rgba(66, 50, 38, .14); }
#wechatLayoutPreview.hidden { display: none; }
label {
  display: block;
  margin-bottom: 16px;
  color: #46514a;
  font-size: 12px;
  font-weight: 800;
}
input, textarea, select {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: #fbfcfa;
  padding: 11px 12px;
  color: var(--ink);
  font-size: 13px;
}
textarea { resize: vertical; line-height: 1.65; }
input:focus, textarea:focus, select:focus { border-color: #83b69c; box-shadow: 0 0 0 3px rgba(36,107,74,.1); }
.required-mark { color: #c15f35; font-style: normal; }
.field-error { display: block; margin-top: 6px; color: #b04f42; font-size: 11px; font-weight: 700; }
.field-invalid { border-color: #d88073 !important; box-shadow: 0 0 0 3px rgba(190,83,62,.1); }
select:required:invalid { color: #a89e96; }
select:required:invalid option { color: var(--ink); }
.result-panel {
  border: 0;
  border-radius: 0;
  background: #fafbf8;
  padding: 24px;
}

.coach-page { max-width: 1440px; }
.coach-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border: 1px solid #e5d8cc; border-radius: 16px; background: linear-gradient(118deg, #fff9f3, #f8f5ef); padding: 30px 32px; }
.coach-hero h2 { margin-top: 8px; color: #422c20; font-size: 30px; letter-spacing: -.04em; }
.coach-hero p { max-width: 720px; margin-top: 10px; color: #7d7068; font-size: 13px; line-height: 1.75; }
.coach-hero > span { flex: 0 0 auto; border-radius: 999px; color: #a85f35; background: #fff0e4; padding: 8px 11px; font-size: 11px; font-weight: 800; }
.coach-tool-guide { display: grid; grid-template-columns: minmax(190px, .8fr) repeat(2, minmax(190px, 1fr)) minmax(170px, .8fr); gap: 10px; margin-top: 16px; }
.coach-tool-guide-intro, .coach-tool-guide-more, .coach-tool-guide button { min-height: 84px; border: 1px solid #e6ddd4; border-radius: 12px; background: #fff; padding: 14px; text-align: left; }
.coach-tool-guide-intro { display: grid; align-content: center; gap: 4px; background: #fffaf6; }
.coach-tool-guide-intro strong { color: #4c372b; font-size: 14px; }
.coach-tool-guide-intro small, .coach-tool-guide-more span { color: #95877d; font-size: 10px; line-height: 1.55; }
.coach-tool-guide button { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; cursor: pointer; }
.coach-tool-guide button:hover, .coach-tool-guide button.active { border-color: #c5794d; background: #fff8f2; }
.coach-tool-guide button b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #ab6238; background: #fff0e4; font-size: 10px; }
.coach-tool-guide button.active b { color: #fff; background: #bb6939; }
.coach-tool-guide button span { display: grid; gap: 4px; }
.coach-tool-guide button strong { color: #503b2e; font-size: 12px; }
.coach-tool-guide button small { color: #93847a; font-size: 10px; }
.coach-tool-guide button i { color: #bd7046; font-size: 16px; font-style: normal; }
.coach-tool-guide-more { display: flex; align-items: center; gap: 9px; border-style: dashed; color: #9d7762; }
.coach-tool-guide-more b { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f8eee6; font-size: 16px; }
.coach-tool-grid { display: grid; gap: 20px; margin-top: 20px; }
.coach-tool-card { border: 1px solid #e5ded5; border-radius: 16px; background: #fff; padding: 24px; box-shadow: 0 12px 30px rgba(77, 53, 38, .045); }
.coach-tool-card > header { display: flex; align-items: flex-start; gap: 14px; }
.coach-tool-card h3 { margin-top: 4px; color: #453126; font-size: 21px; }
.coach-tool-card header p { margin-top: 5px; color: #8d8178; font-size: 12px; line-height: 1.6; }
.coach-tool-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: #bb6939; font-size: 12px; font-weight: 900; }
.coach-tool-workspace { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 24px; margin-top: 22px; }
.coach-tool-form { border-radius: 12px; background: #fcf8f4; padding: 18px; }
.coach-tool-form label { margin-bottom: 14px; }
.coach-tool-form .check-label { display: flex; align-items: center; gap: 8px; color: #75685f; font-size: 11px; }
.coach-tool-form .check-label input { width: auto; margin: 0; }
.coach-result-wrap { min-width: 0; }
.coach-result-wrap .panel-head { margin-bottom: 12px; }
.coach-result-wrap .panel-head p { margin-top: 4px; color: #998e85; font-size: 11px; }
.coach-sop-result { min-height: 310px; max-height: 580px; overflow: auto; border-radius: 12px; cursor: grab; overscroll-behavior: contain; scrollbar-gutter: stable; }
.coach-sop-result.dragging { cursor: grabbing; user-select: none; }
.coach-diagram-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.coach-diagram-toolbar > div { display: flex; gap: 5px; border: 1px solid #eadfd6; border-radius: 8px; padding: 3px; background: #fbf8f5; }
.coach-diagram-toolbar button { border: 0; border-radius: 5px; color: #8c7d73; background: transparent; padding: 6px 9px; font-size: 10px; font-weight: 800; }
.coach-diagram-toolbar button.active { color: #9e5632; background: #fff; box-shadow: 0 2px 7px rgba(77, 48, 28, .09); }
.coach-diagram-toolbar small { color: #a1948b; font-size: 10px; }
.coach-flow-diagram, .coach-mindmap { min-height: 290px; min-width: 760px; border: 1px dashed #dfcbbb; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fffdf9 0, #fbf7f2 64%, #f6efe8 100%); padding: 18px; }
.coach-flow-diagram > header { display: grid; gap: 5px; min-width: 720px; margin-bottom: 18px; text-align: center; }
.coach-flow-diagram > header span { color: #b36a43; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.coach-flow-diagram > header strong { color: #4b3428; font-size: 19px; outline: none; }
.coach-flow-diagram > header small { color: #8b7d74; font-size: 11px; line-height: 1.5; outline: none; }
.coach-flow-diagram-track { display: flex; align-items: center; min-width: max-content; gap: 10px; padding: 7px 2px 12px; }
.coach-diagram-node { position: relative; display: grid; flex: 0 0 180px; min-height: 112px; align-content: start; gap: 6px; border: 1px solid #e9cdb9; border-radius: 12px; background: rgba(255,255,255,.94); padding: 14px; box-shadow: 0 6px 16px rgba(96, 62, 40, .06); }
.coach-diagram-node:hover { border-color: #c77c51; }
.coach-diagram-node [contenteditable="true"] { cursor: text; border-radius: 3px; outline: none; }
.coach-diagram-node [contenteditable="true"]:focus, .coach-flow-diagram > header [contenteditable="true"]:focus, .coach-mindmap-center [contenteditable="true"]:focus { background: #fff5eb; box-shadow: 0 0 0 2px rgba(196, 108, 57, .16); }
.coach-diagram-order { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: #fff; background: #bf7044; font-size: 10px; font-weight: 900; }
.coach-diagram-node strong { color: #4d382c; font-size: 13px; line-height: 1.45; }
.coach-diagram-node p { display: -webkit-box; overflow: hidden; margin: 0; color: #786b62; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.coach-diagram-node button { justify-self: start; border: 0; color: #ad6238; background: transparent; padding: 2px 0; font-size: 10px; font-weight: 800; }
.coach-diagram-details { display: grid; gap: 4px; border-top: 1px dashed #ead6c7; padding-top: 7px; color: #786b62; font-size: 10px; line-height: 1.45; }
.coach-flow-diagram-track > i { color: #bd815e; font-size: 20px; font-style: normal; }
.coach-mindmap { position: relative; display: grid; grid-template-columns: minmax(220px, 1fr) 230px minmax(220px, 1fr); align-items: center; gap: 54px; min-width: 860px; overflow: visible; }
.coach-mindmap-links { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.coach-mindmap-links path { fill: none; stroke: #d3a383; stroke-width: 2; vector-effect: non-scaling-stroke; }
.coach-mindmap-side { position: relative; z-index: 1; display: grid; gap: 16px; }
.coach-mindmap-side.left .coach-diagram-node { justify-self: end; }
.coach-mindmap-center { position: relative; z-index: 1; display: grid; min-height: 156px; align-content: center; gap: 9px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, #d99468, #a85d34); padding: 26px; text-align: center; box-shadow: 0 10px 24px rgba(136, 74, 40, .2); }
.coach-mindmap-center span { color: #fff0e5; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.coach-mindmap-center strong { color: #fff; font-size: 17px; line-height: 1.35; outline: none; }
.coach-mindmap-center small { color: #fff4ed; font-size: 10px; line-height: 1.55; outline: none; }
.coach-photo-upload { display: grid; gap: 8px; }
.coach-photo-upload button { justify-self: start; }
.coach-photo-upload small { color: #998c82; font-size: 10px; line-height: 1.5; }
.coach-image-prompt-editor { display: grid; gap: 9px; margin-top: 14px; border: 1px solid #e7cdbb; border-radius: 10px; background: #fffaf6; padding: 12px; }
.coach-image-prompt-editor > div { display: grid; gap: 3px; }
.coach-image-prompt-editor b { color: #754326; font-size: 12px; }
.coach-image-prompt-editor small { color: #9b8c82; font-size: 10px; line-height: 1.5; }
.coach-image-prompt-editor textarea { min-height: 170px; resize: vertical; color: #594940; font-size: 11px; line-height: 1.6; }
.coach-image-prompt-editor button { margin-top: 2px; }
.coach-moment-copy { min-height: 156px; border: 1px solid #e8ddd3; border-radius: 10px; background: #fffdfb; padding: 16px; color: #51463e; font-size: 13px; line-height: 1.8; outline: none; white-space: pre-wrap; }
.coach-moment-copy:focus { border-color: #c98258; box-shadow: 0 0 0 3px rgba(191, 105, 57, .1); }
.coach-poster-frame { overflow: hidden; max-width: 420px; margin-top: 14px; border-radius: 12px; background: #5f371f; box-shadow: 0 12px 26px rgba(64, 37, 20, .16); }
.coach-poster-frame canvas { display: block; width: 100%; height: auto; }

.topic-list, .record-list { display: grid; gap: 10px; }
.topic-list {
  max-height: min(62vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-gutter: stable;
}
.topic-list::-webkit-scrollbar { width: 7px; }
.topic-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #c7d5cb; }
.topic-list::-webkit-scrollbar-track { border-radius: 999px; background: #edf1ed; }
.topic-item, .record-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 15px 16px;
}
.topic-item { display: flex; align-items: center; gap: 13px; }
.topic-item-copy { flex: 1; min-width: 0; outline: none; }
.topic-gacha-button { flex: 0 0 auto; border: 1px solid #e7c7aa; border-radius: 999px; background: #fff8f1; color: #a64f27; padding: 8px 11px; font-size: 11px; font-weight: 850; white-space: nowrap; transition: transform .18s ease, background .18s ease; }
.topic-gacha-button:hover:not(:disabled) { background: #ffebda; transform: translateY(-1px); }
.topic-gacha-button:disabled { border-color: #c7d8ce; background: #eef5ef; color: #578068; cursor: default; }

/* 灵感扭蛋机：让“存选题”成为可见、可玩的内容仪式，而不是又一个收藏夹。 */
.gacha-page-shell { max-width: 1160px; margin: 0 auto; }
.topic-gacha-shell { margin-top: 30px; border-top: 1px solid #eaded4; padding-top: 30px; }
.gacha-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.gacha-page-head h2 { margin: 5px 0 7px; color: #3d2b22; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.055em; }
.gacha-page-head p { margin: 0; color: #88766d; font-size: 14px; }
.gacha-page-head .secondary { display: inline-flex; align-items: center; gap: 7px; }
.gacha-stage { display: grid; grid-template-columns: minmax(310px, .91fr) minmax(360px, 1.09fr); overflow: hidden; border: 1px solid #ead8ca; border-radius: 24px; background: #fffdf9; box-shadow: 0 18px 42px rgba(92, 54, 31, .08); }
.gacha-machine-card { position: relative; overflow: hidden; display: grid; justify-items: center; align-content: start; min-height: 585px; background: radial-gradient(circle at 50% 32%, #fff1df 0 24%, transparent 24.2%), linear-gradient(145deg, #684231 0%, #9b512e 49%, #d1743d 100%); padding: 28px 30px 24px; }
.gacha-machine-card::before, .gacha-machine-card::after { position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; content: ''; }
.gacha-machine-card::before { top: -170px; left: -105px; }.gacha-machine-card::after { right: -135px; bottom: -145px; }
.gacha-machine-top { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 7px; color: #fff5e9; font-size: 11px; letter-spacing: .08em; }
.gacha-machine-top b { color: #f8ce57; font-size: 22px; letter-spacing: 0; }.gacha-machine-top small { color: rgba(255,245,233,.7); }
.gacha-machine { position: relative; z-index: 1; width: min(300px, 100%); margin: 25px auto 13px; filter: drop-shadow(0 20px 12px rgba(38, 16, 7, .2)); }
.gacha-crown { position: relative; z-index: 2; width: 134px; height: 22px; margin: 0 auto -7px; border: 5px solid #f6c548; border-bottom: 0; border-radius: 68px 68px 8px 8px; background: linear-gradient(90deg, #bf632c, #f9cc5e, #bb5628); }
.gacha-dome { position: relative; z-index: 1; aspect-ratio: 1; overflow: hidden; border: 8px solid #f7e6cd; border-bottom-width: 6px; border-radius: 50%; background: radial-gradient(circle at 36% 25%, rgba(255,255,255,.82), rgba(255,224,183,.38) 22%, rgba(142,73,45,.18) 69%); box-shadow: inset -15px -17px 32px rgba(87, 34, 18, .22), inset 10px 8px 20px rgba(255,255,255,.48); }
.gacha-dome::after { position: absolute; z-index: 3; top: 17%; left: 20%; width: 22%; height: 11%; border-radius: 50%; background: rgba(255,255,255,.45); content: ''; filter: blur(4px); transform: rotate(-33deg); }
.gacha-balls { position: absolute; inset: 0; }
.gacha-ball { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border: 2px solid rgba(90,45,26,.2); border-radius: 50%; background: radial-gradient(circle at 31% 24%, rgba(255,255,255,.83) 0 8%, transparent 9%), linear-gradient(137deg, var(--ball-color) 0 49%, #fff6e9 50% 53%, var(--ball-color) 54%); box-shadow: inset -6px -7px 9px rgba(65,32,18,.18), 2px 4px 6px rgba(57,26,11,.15); transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) rotate(var(--spin)); }
.gacha-ball b { position: absolute; top: 2px; bottom: 2px; left: 50%; width: 1px; background: rgba(70,37,21,.18); }
.gacha-glass-shine { position: absolute; z-index: 4; top: 7%; left: 8%; width: 19%; height: 63%; border-left: 5px solid rgba(255,255,255,.45); border-radius: 50%; transform: rotate(24deg); }
.gacha-chute { position: relative; z-index: 3; display: grid; width: 96px; height: 59px; margin: -6px auto 0; border: 6px solid #f5d597; border-radius: 9px 9px 28px 28px; background: #6e3825; place-items: center; box-shadow: inset 0 6px 9px rgba(31,13,7,.38); }.gacha-chute span { color: #f7c849; font-size: 24px; }
.gacha-output-tray { position: relative; z-index: 2; width: 148px; height: 35px; margin: -2px auto -7px; border: 5px solid #f2d594; border-top: 0; border-radius: 0 0 74px 74px; background: linear-gradient(#743a26, #4e251a); box-shadow: inset 0 -5px 6px rgba(0,0,0,.18); }.gacha-output-tray::after { position: absolute; right: 19px; bottom: 6px; left: 19px; height: 5px; border-radius: 50%; background: rgba(21,8,4,.25); content: ''; }.gacha-drop-ball { position: absolute; z-index: 2; top: -43px; left: calc(50% - 22px); width: 44px; height: 44px; border: 2px solid rgba(85,37,19,.23); border-radius: 50%; opacity: 0; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.86) 0 8%, transparent 9%), linear-gradient(138deg, var(--drop-color, #d96038) 0 49%, #fff6e9 50% 53%, var(--drop-color, #d96038) 54%); box-shadow: inset -6px -7px 9px rgba(65,32,18,.2), 2px 4px 6px rgba(31,11,5,.28); }
.gacha-base { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 23px; min-height: 67px; margin-top: -4px; border: 7px solid #f6dda7; border-radius: 42% 42% 11px 11px / 30% 30% 9px 9px; background: linear-gradient(#d9763d, #ab502b); box-shadow: inset 0 7px rgba(255,236,197,.18); }.gacha-base i { width: 9px; height: 9px; border-radius: 50%; background: #713520; box-shadow: inset 1px 1px 1px rgba(0,0,0,.28); }
.gacha-draw-button { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; width: min(295px, 100%); margin-top: 10px; border: 0; border-radius: 14px; background: #f6cb4b; color: #57301f; padding: 15px 15px; box-shadow: 0 8px 0 #cf9527, 0 13px 20px rgba(45,19,8,.23); font-weight: 900; letter-spacing: .025em; transition: transform .18s ease, box-shadow .18s ease; }.gacha-draw-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 0 #cf9527, 0 16px 22px rgba(45,19,8,.25); }.gacha-draw-button:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 #cf9527; }.gacha-draw-button:disabled { opacity: .75; }.gacha-draw-button small { color: rgba(83,43,23,.64); font-weight: 700; }.draw-icon { font-size: 18px; }
.gacha-tip { position: relative; z-index: 1; max-width: 290px; margin: 21px 0 0; color: rgba(255,245,234,.76); font-size: 11px; line-height: 1.6; text-align: center; }
.gacha-reveal-card { display: grid; align-content: center; min-height: 585px; padding: clamp(31px, 5vw, 72px); background: linear-gradient(140deg, #fffdfa, #f9f1e8); }.gacha-reveal-label { display: flex; align-items: center; justify-content: space-between; color: #a65b33; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.gacha-spark { color: #e8b32b; font-size: 23px; }
.gacha-result-empty, .gacha-result-content { margin: 22px 0; }.gacha-result-empty { border-left: 2px solid #e5d4c4; padding: 7px 0 7px 18px; color: #75655a; }.gacha-result-empty strong { display: block; color: #4b392e; font-size: 25px; letter-spacing: -.04em; }.gacha-result-empty p, .gacha-result-content p { margin: 12px 0 0; color: #927d70; font-size: 13px; line-height: 1.8; }.gacha-result-content { position: relative; padding: 36px 0 29px; }.gacha-result-content::before { position: absolute; top: 0; left: 0; width: 53px; height: 3px; border-radius: 2px; background: #d37a42; content: ''; }.gacha-result-content strong { display: block; max-width: 560px; color: #3b2c24; font-family: Georgia, 'Songti SC', serif; font-size: clamp(25px, 3.3vw, 38px); font-weight: 600; line-height: 1.48; letter-spacing: -.045em; }.gacha-result-orb { display: grid; width: 31px; height: 31px; margin-bottom: 17px; border-radius: 50%; background: #b95c31; color: #fff7ee; font-size: 12px; font-weight: 900; place-items: center; box-shadow: 0 5px 12px rgba(156,75,37,.2); }.gacha-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }.gacha-result-actions .primary { background: #ad542d; }.is-drawing { animation: gacha-text-pulse .65s ease-in-out infinite alternate; }
.gacha-inventory { margin-top: 19px; border: 1px solid #eaded4; border-radius: 18px; background: #fff; padding: 23px; }.gacha-inventory .panel-head { align-items: end; margin-bottom: 16px; }.gacha-inventory .panel-head h3 { margin: 2px 0 0; color: #49362b; font-size: 19px; }.gacha-inventory-note { color: #9a887b; font-size: 11px; }.gacha-inventory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.gacha-inventory-item { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #ede3dc; border-radius: 12px; background: #fffcfa; padding: 13px; }.gacha-inventory-item > div:nth-child(2) { flex: 1; min-width: 0; }.gacha-inventory-item strong { display: block; color: #4b3a31; font-size: 13px; line-height: 1.55; }.gacha-inventory-item .meta { margin-top: 7px; }.gacha-inventory-item .meta span { font-size: 10px; }.gacha-inventory-orb { display: grid; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(135deg, #f3c24c 0 48%, #da683b 49%); color: #fff; font-size: 12px; place-items: center; }.gacha-delete { align-self: center; border: 0; border-radius: 50%; background: transparent; color: #aa988d; font-size: 20px; line-height: 1; }.gacha-delete:hover { background: #f5ebe5; color: #a1492b; }.gacha-empty-inventory { grid-column: 1 / -1; padding: 22px; color: #8c7c71; text-align: center; }.gacha-empty-inventory span { display: block; color: #dfb094; font-size: 27px; }.gacha-empty-inventory strong { display: block; margin-top: 3px; color: #645047; }.gacha-empty-inventory p { margin: 7px 0 0; font-size: 12px; }
.gacha-machine-card.is-spinning .gacha-balls { animation: gacha-balls-churn .72s linear infinite; }.gacha-machine-card.is-spinning .gacha-ball { animation: gacha-ball-jostle .39s cubic-bezier(.36,.02,.65,.98) infinite alternate; animation-delay: var(--delay); }.gacha-machine-card.is-spinning .gacha-machine { animation: gacha-machine-shake .23s ease-in-out infinite alternate; }.gacha-machine-card.is-spinning .gacha-chute span { animation: gacha-drop .45s ease-in-out infinite; }.gacha-machine-card.is-dropping .gacha-drop-ball { animation: gacha-capsule-drop .68s cubic-bezier(.18,.85,.38,1) forwards; }.gacha-machine-card.has-drop .gacha-drop-ball { opacity: 1; transform: translateY(27px) rotate(238deg) scale(.98); }
@keyframes gacha-balls-churn { 0% { transform: rotate(0deg) scale(1); } 35% { transform: rotate(96deg) scale(.98); } 71% { transform: rotate(212deg) scale(1.01); } 100% { transform: rotate(310deg) scale(1); } } @keyframes gacha-ball-jostle { 0% { transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) rotate(var(--spin)); } 55% { transform: translate(calc(var(--x) + var(--dx) - 50%), calc(var(--y) + var(--dy) - 50%)) rotate(calc(var(--spin) + 35deg)); } 100% { transform: translate(calc(var(--x) - var(--dy) - 50%), calc(var(--y) + var(--dx) - 50%)) rotate(calc(var(--spin) - 21deg)); } } @keyframes gacha-machine-shake { from { transform: rotate(-2.2deg) translateX(-2px); } to { transform: rotate(2.2deg) translateX(2px); } } @keyframes gacha-drop { 50% { transform: translateY(10px) rotate(180deg); } } @keyframes gacha-capsule-drop { 0% { opacity: 0; transform: translateY(-24px) rotate(-34deg) scale(.7); } 18% { opacity: 1; } 64% { opacity: 1; transform: translateY(31px) rotate(178deg) scale(1); } 81% { opacity: 1; transform: translateY(22px) rotate(220deg) scale(.94); } 100% { opacity: 1; transform: translateY(27px) rotate(238deg) scale(.98); } } @keyframes gacha-text-pulse { to { opacity: .42; } }
@media (max-width: 760px) { .gacha-page-head { align-items: flex-start; flex-direction: column; }.gacha-stage { grid-template-columns: 1fr; }.gacha-machine-card, .gacha-reveal-card { min-height: auto; }.gacha-machine-card { padding-top: 24px; }.gacha-reveal-card { padding: 34px 27px; }.gacha-inventory-list { grid-template-columns: 1fr; }.topic-item { align-items: flex-start; }.topic-gacha-button { margin-top: 2px; } }
.topic-item[contenteditable="true"], .editable-output {
  outline: none;
}
.topic-item[contenteditable="true"]:hover, .editable-output:hover {
  border-color: #b9d9c8;
}
.topic-item[contenteditable="true"]:focus, .editable-output:focus {
  border-color: #83b69c;
  box-shadow: 0 0 0 3px rgba(36,107,74,.1);
}
.topic-item strong, .record-item strong { display: block; font-size: 14px; line-height: 1.55; }
.conversation-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.conversation-record-head .meta { margin-top: 8px; }
.conversation-record > p { margin-top: 12px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.record-transcript { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 11px; }
.record-transcript summary { cursor: pointer; color: #a05b34; font-size: 11px; font-weight: 800; }
.record-transcript > div { display: grid; gap: 8px; margin-top: 10px; }
.record-transcript p { max-width: 82%; margin: 0; border-left: 2px solid #e2d5c9; color: #65594f; padding-left: 9px; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.record-transcript p.user { margin-left: auto; border-right: 2px solid #b9d9c8; border-left: 0; padding-right: 9px; padding-left: 0; color: #4d6554; text-align: right; }
.record-transcript p b { display: block; margin-bottom: 2px; color: #a46b45; font-size: 10px; }
.record-transcript p.user b { color: #6f927a; }
.meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.meta span {
  border-radius: 999px;
  color: var(--blue);
  background: #edf4f8;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}
.model-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.model-badge span {
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 900;
}
.loading-box, .error-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
}
.loading-box p, .error-box p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.error-box {
  border-color: #f0beb6;
  background: var(--rose-soft);
  margin-bottom: 12px;
}
.error-box strong { color: #a5473e; }
.warning-box {
  border: 1px solid #ead3a7;
  border-radius: 10px;
  background: #fff9eb;
  margin-bottom: 12px;
  padding: 14px 16px;
}
.warning-box strong { color: #9a6a24; }
.warning-box p { margin-top: 6px; color: #8a7655; font-size: 12px; line-height: 1.6; }
.edit-hint {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.editable-output {
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  white-space: pre-line;
}

.copy-output, .research-output {
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 20px;
  white-space: pre-line;
  color: #3f4943;
  font-size: 14px;
  line-height: 1.85;
}
.research-output { max-height: 560px; overflow-y: auto; }
#copyResult.copy-output { min-height: 0; border: 0; border-radius: 0; background: transparent; padding: 0; white-space: normal; }
#copyResult.copy-output.empty { display: none; }
.empty { color: #9ba39d; }

.chat-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.knowledge-panel {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fffaf8;
  padding: 24px;
}
.knowledge-panel.compact { padding: 20px 18px; overflow: auto; }
.knowledge-panel.compact img { width: 62px; height: 62px; border-radius: 18px; }
.knowledge-panel.compact h3 { margin-top: 12px; font-size: 19px; }
.knowledge-panel.compact p { margin-top: 7px; font-size: 11px; line-height: 1.65; }
.knowledge-panel.compact .chips { gap: 5px; margin-top: 12px; }
.knowledge-panel.compact .chips span { padding: 5px 7px; font-size: 9px; }
.quick-title { margin-top: 20px; color: var(--ink); font-size: 11px; font-weight: 900; }
.knowledge-panel img {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  object-fit: cover;
  object-position: 50% 20%;
}
.knowledge-panel h3 { margin-top: 15px; font-size: 22px; }
.knowledge-panel p { margin-top: 9px; color: #836f68; font-size: 12px; line-height: 1.7; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chips span, .cite {
  border-radius: 999px;
  color: #9d5148;
  background: #ffe6df;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 800;
}
.quick-questions { display: grid; gap: 8px; margin-top: 22px; }
.quick-questions button {
  border: 1px solid #edd8d1;
  border-radius: 9px;
  background: #fff;
  color: #5c4c47;
  padding: 11px;
  text-align: left;
  font-size: 12px;
  line-height: 1.45;
}

.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #f7f8f5;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 16px 22px;
}
.chat-head strong { display: block; margin-top: 5px; }
.messages { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 24px; }
.message { display: flex; gap: 10px; max-width: 820px; margin-bottom: 16px; }
.message.user { justify-content: flex-end; max-width: none; }
.message img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  object-position: 50% 20%;
}
.message-sticker {
  width: 92px !important;
  height: 92px !important;
  align-self: flex-start;
  border-radius: 12px !important;
  object-position: center !important;
}
.message.sticker-only {
  min-height: 92px;
  align-items: flex-start;
  padding-left: 44px;
}
.assistant-config-form { display: grid; gap: 14px; margin-top: 18px; max-width: 880px; }
.assistant-config-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; }
.assistant-config-form textarea { min-height: 78px; resize: vertical; }
.moments-skill-status { border: 1px solid #d8cdbf; border-radius: 12px; background: #fffaf4; padding: 16px; }
.moments-skill-status.is-ready { border-color: #b8d7c4; background: #f5fbf6; }
.moments-skill-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.moments-skill-status-head span, .moments-skill-status-head small { display: block; color: var(--muted); font-size: 11px; }
.moments-skill-status-head h4 { margin: 4px 0; font-size: 16px; }
.moments-skill-status-head b { border-radius: 99px; background: #e5f3e9; color: var(--green); padding: 5px 9px; font-size: 11px; }
.moments-skill-status.is-missing b { background: #f8ece8; color: #a65c48; }
.moments-skill-status > p { margin: 12px 0 0; color: #59635c; font-size: 12px; line-height: 1.65; }
.moments-skill-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.moments-skill-tags span { border-radius: 99px; background: #fff; border: 1px solid #d9e9de; color: #4d6b56; padding: 4px 8px; font-size: 10px; }
.moments-skill-status details { margin-top: 13px; color: #59635c; font-size: 12px; line-height: 1.65; }
.moments-skill-status summary { cursor: pointer; color: var(--green); font-weight: 800; }
.moments-skill-status details p { margin: 8px 0 0; }
.moments-skill-prompt-label small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.55; }
.pipi-knowledge-manager { display: grid; gap: 14px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 20px; }
.pipi-knowledge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pipi-knowledge-head h4 { font-size: 16px; }
.pipi-knowledge-head p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.pipi-knowledge-head > span { flex: 0 0 auto; color: var(--green); background: var(--green-soft); padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.pipi-knowledge-list { display: grid; gap: 8px; }
.pipi-knowledge-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 13px 14px; }
.pipi-knowledge-item strong, .pipi-knowledge-item small { display: block; }
.pipi-knowledge-item strong { font-size: 13px; }
.pipi-knowledge-item small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.pipi-knowledge-item p { max-width: 650px; margin-top: 7px; color: #59635c; font-size: 11px; line-height: 1.6; white-space: pre-line; }
.pipi-knowledge-form { display: grid; gap: 10px; border: 1px dashed #d8cdbf; border-radius: 10px; background: #fffaf4; padding: 14px; }
.check-label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 800; }
.check-label input { width: 16px; height: 16px; margin: 0; }
.bubble {
  border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  padding: 15px 17px;
  color: #46514a;
  font-size: 13px;
  line-height: 1.8;
}
.message.user .bubble {
  max-width: 620px;
  border-color: var(--green);
  border-radius: 16px 4px 16px 16px;
  color: #fff;
  background: var(--green);
}
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 22px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.composer textarea { min-height: 44px; margin: 0; border: 0; background: transparent; }
.composer textarea:focus { box-shadow: none; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.admin-grid .panel { margin: 0; min-height: 210px; }
.admin-grid p { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.admin-tabs button, .admin-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.admin-tabs button {
  color: #59645d;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
}
.admin-tabs button.active {
  border-color: #b9d9c8;
  color: var(--green);
  background: var(--green-soft);
}
.model-management-panel { min-height: 460px; }
.model-management-tabs {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf8;
}
.model-management-tabs button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #59645d;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
}
.model-management-tabs button.active {
  background: #fff;
  color: var(--green);
  box-shadow: 0 1px 3px rgba(31, 43, 35, .12);
}
.admin-module-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.admin-module-head h2 { margin-top: 5px; font-size: 22px; }
.admin-module-head p { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.usage-summary > div, .usage-grid > section { border: 1px solid var(--line); border-radius: 8px; background: #fbfdfb; padding: 13px; }
.usage-summary span, .usage-summary strong { display: block; }
.usage-summary span { color: var(--muted); font-size: 12px; }
.usage-summary strong { margin-top: 7px; font-size: 20px; }
.usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.usage-grid h4, .usage-log-head h4 { margin: 0; font-size: 14px; }
.usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border-top: 1px solid var(--line); padding: 10px 0; }
.usage-row:first-of-type { margin-top: 8px; }
.usage-row strong, .usage-row small { display: block; }
.usage-row small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.usage-row b { align-self: center; color: var(--green); font-size: 12px; white-space: nowrap; }
.usage-visualizations { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: 14px; margin: 18px 0; }
.usage-donut-panel, .usage-tree-panel, .usage-empty-visual { border: 1px solid var(--line); border-radius: 8px; background: #fbfdfb; padding: 18px; }
.usage-donut-panel { display: flex; align-items: center; gap: 20px; }
.usage-donut { display: grid; flex: 0 0 auto; place-items: center; width: 146px; aspect-ratio: 1; border-radius: 50%; }
.usage-donut > div { display: grid; place-items: center; width: 88px; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.usage-donut strong { font-size: 18px; }
.usage-donut span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.usage-legend { display: grid; flex: 1; gap: 8px; min-width: 0; }
.usage-legend > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #5a655e; font-size: 11px; }
.usage-legend i { width: 8px; height: 8px; border-radius: 50%; }
.usage-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-legend b { color: var(--ink); font-size: 11px; }
.usage-tree-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.usage-tree-head h4 { margin: 0 0 4px; font-size: 14px; }
.usage-tree-head p { margin: 0; color: var(--muted); font-size: 11px; }
.usage-tree-head > span { border-radius: 999px; color: #8c603e; background: #fff0e4; padding: 5px 8px; font-size: 10px; font-weight: 800; }
.usage-tree { display: flex; min-height: 158px; gap: 6px; }
.usage-tree article { display: flex; flex: var(--module-weight) 1 0; min-width: 112px; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid color-mix(in srgb, var(--module-color) 34%, white); border-radius: 6px; background: color-mix(in srgb, var(--module-color) 14%, white); padding: 12px; }
.usage-tree article span { color: #4d5b52; font-size: 11px; font-weight: 800; }
.usage-tree article strong { margin-top: 8px; color: #253229; font-size: 16px; }
.usage-tree article small { margin-top: 6px; color: #647067; font-size: 10px; line-height: 1.45; }
.usage-empty-visual { color: var(--muted); font-size: 13px; }
.provider-usage-section { margin: 18px 0; border: 1px solid var(--line); border-radius: 8px; background: #fbfdfb; padding: 18px; }
.usage-date-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 16px; }
.usage-date-filter select, .usage-date-filter input { width: auto; min-height: 34px; margin: 0; padding: 6px 9px; font-size: 12px; }
.usage-date-filter span, .usage-date-filter b { color: var(--muted); font-size: 11px; }
.usage-date-filter b { margin-left: 4px; color: #536158; }
.provider-usage-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.provider-usage-card { border: 1px solid #e2e8e2; border-radius: 7px; background: #fff; padding: 13px; }
.provider-usage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.provider-usage-head strong, .provider-usage-head small { display: block; }
.provider-usage-head strong { font-size: 13px; }
.provider-usage-head small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.provider-usage-head > span { flex: 0 0 auto; border-radius: 999px; padding: 4px 7px; font-size: 9px; font-weight: 800; }
.provider-usage-head > span.healthy, .provider-usage-head > span.metered { color: #2f7748; background: #edf8f0; }
.provider-usage-head > span.rate_limited, .provider-usage-head > span.unavailable, .provider-usage-head > span.missing_key, .provider-usage-head > span.billing_unavailable { color: #a85342; background: #fff0ed; }
.provider-usage-head > span.billing_credentials_missing { color: #8a6526; background: #fff8e8; }
.provider-usage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.provider-usage-metrics span, .provider-usage-metrics b { display: block; }
.provider-usage-metrics span { color: var(--muted); font-size: 9px; }
.provider-usage-metrics b { margin-top: 5px; color: #334137; font-size: 12px; }
.provider-account-detail { min-height: 28px; margin-top: 13px; border-top: 1px solid #edf0ed; padding-top: 8px; color: #738078; font-size: 10px; }
.provider-account-detail span + span::before { content: ' · '; }
.usage-trend-panel, .usage-health-panel { border: 1px solid var(--line); border-radius: 8px; background: #fbfdfb; padding: 18px; }
.usage-trend { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; height: 154px; gap: 9px; }
.usage-trend > div { display: grid; align-items: end; height: 100%; gap: 5px; text-align: center; }
.usage-trend b { display: block; min-height: 4px; border-radius: 4px 4px 2px 2px; background: #bf6a35; }
.usage-trend strong { color: #566159; font-size: 10px; font-weight: 800; }
.usage-trend small { color: var(--muted); font-size: 9px; }
.usage-health-panel .usage-tree-head > span.healthy { color: #2f7748; background: #edf8f0; }
.usage-health-panel .usage-tree-head > span.attention { color: #a85342; background: #fff0ed; }
.usage-health-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.usage-health-metrics > div { border: 1px solid #e8ede8; border-radius: 6px; background: #fff; padding: 10px; }
.usage-health-metrics span, .usage-health-metrics strong { display: block; }
.usage-health-metrics span { color: var(--muted); font-size: 10px; }
.usage-health-metrics strong { margin-top: 6px; color: #334137; font-size: 15px; }
.usage-alert-list { display: grid; gap: 6px; margin-top: 12px; }
.usage-alert-list p { display: flex; gap: 7px; margin: 0; border-left: 2px solid #ce7467; color: #7c6058; background: #fff7f5; padding: 8px 9px; font-size: 10px; line-height: 1.45; }
.usage-alert-list b { flex: 0 0 auto; color: #a85342; }
.usage-ok-note { margin-top: 12px; color: #438057; font-size: 11px; }
.usage-log-head { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-card {
  min-height: 146px;
  padding: 18px;
  text-align: left;
  box-shadow: 0 8px 22px rgba(31,43,35,.035);
}
.admin-card strong, .admin-card span, .admin-card em { display: block; }
.admin-card strong { font-size: 16px; }
.admin-card span { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.admin-card em { margin-top: 18px; color: var(--green); font-size: 12px; font-style: normal; font-weight: 900; }
.admin-form { display: grid; gap: 9px; margin-top: 14px; }
.admin-form input, .admin-form select { margin-top: 0; }
.admin-form.two-col { grid-template-columns: 180px minmax(0, 1fr) auto; }
.admin-action { margin-top: 14px; }
.config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.config-row:first-child { border-top: 0; }
.config-row strong, .config-row small { display: block; }
.config-row strong { font-size: 13px; line-height: 1.45; }
.config-row small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.config-row p { margin-top: 6px; font-size: 11px; line-height: 1.55; }
.model-price-editor { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 9px; }
.model-price-editor label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.model-price-editor input { width: 118px; min-height: 30px; padding: 5px 7px; font-size: 12px; }
.agent-cover-config-list { display: grid; gap: 10px; margin-top: 16px; }
.copy-agent-manager-panel { border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.copy-agent-cover-panel { margin-top: 26px; }
.copy-agent-manager { display: grid; gap: 12px; margin-top: 14px; }
.copy-agent-manager-item, .copy-agent-create-card { border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; padding: 16px; }
.copy-agent-manager-item.is-unpublished { border-style: dashed; background: #faf8f5; }
.copy-agent-manager-item > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.copy-agent-manager-item header > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; }
.copy-agent-manager-item header strong { font-size: 14px; }
.copy-agent-manager-item header small { grid-column: 2; color: var(--muted); font-size: 10px; }
.copy-agent-status { grid-row: 1 / span 2; border-radius: 999px; color: #217046; background: #e8f6ee; padding: 5px 8px; font-size: 10px; font-weight: 900; }
.is-unpublished .copy-agent-status { color: #896b56; background: #eee7e1; }
.copy-agent-row-actions, .copy-agent-form-actions { display: flex; align-items: center; gap: 8px; }
.copy-agent-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.copy-agent-create-card .copy-agent-form-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.copy-agent-manager-item label, .copy-agent-create-card label { margin-bottom: 11px; color: var(--muted); font-size: 10px; }
.copy-agent-manager-item input, .copy-agent-manager-item select, .copy-agent-manager-item textarea, .copy-agent-create-card input, .copy-agent-create-card select, .copy-agent-create-card textarea { margin-top: 5px; background: #fff; padding: 9px 10px; font-size: 12px; }
.copy-agent-form-actions { margin-top: 4px; }
.copy-agent-form-actions small { color: var(--muted); font-size: 10px; }
.agent-cover-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin-top: 16px; border: 1px dashed #d5cabd; border-radius: 9px; background: #fffaf5; padding: 12px; }
.agent-cover-upload strong, .agent-cover-upload small { display: block; }
.agent-cover-upload strong { font-size: 13px; }
.agent-cover-upload small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.agent-cover-upload > span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.agent-cover-config-item { display: grid; grid-template-columns: minmax(180px, 220px) minmax(140px, .8fr) minmax(150px, .8fr) minmax(210px, 1.2fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 10px; }
.agent-cover-config-preview { width: 100%; max-width: 220px; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #ebe6df; }
.agent-cover-config-preview img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: var(--cover-focus, 50% 48%); transform: scale(var(--cover-zoom, 1)); transform-origin: var(--cover-focus, 50% 48%); }
.agent-cover-config-item strong, .agent-cover-config-item small { display: block; }
.agent-cover-config-item strong { font-size: 13px; }
.agent-cover-config-item small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.agent-cover-config-item select { margin: 0; }
.agent-cover-layout-controls { display: grid; gap: 6px; }
.agent-cover-layout-controls label { display: grid; grid-template-columns: 58px minmax(0, 1fr) 34px; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.agent-cover-layout-controls input { width: 100%; margin: 0; accent-color: var(--green); }
.agent-cover-layout-controls output { color: #8a6048; font-variant-numeric: tabular-nums; font-size: 10px; text-align: right; }
.copywriting-prompt-panel { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.copywriting-prompt-form { display: grid; grid-template-columns: minmax(180px, .6fr) minmax(180px, .8fr) minmax(120px, .35fr); gap: 12px; margin-top: 14px; }
.copywriting-prompt-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.copywriting-prompt-form select, .copywriting-prompt-form input, .copywriting-prompt-form textarea { margin: 0; }
.copywriting-prompt-form .copywriting-prompt-content { grid-column: 1 / -1; }
.copywriting-prompt-form button { justify-self: start; }
.prompt-row { align-items: flex-start; }
.row-actions { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; }
.mini { padding: 7px 10px; font-size: 11px; }
.prompt-manager {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: 18px;
  margin-top: 16px;
}
.prompt-editor {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.empty-box {
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}
.pill-button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
}
.pill-button.on { border-color: #b9d9c8; color: var(--green); background: var(--green-soft); }
.feature-binding { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.feature-binding span {
  border-radius: 999px;
  background: #eef4f8;
  color: var(--blue);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}
.feature-edit {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: min(620px, 100%);
}
.feature-edit select { margin-top: 0; }
.table-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 12px;
}
.table-row span { color: var(--muted); }
.admin-count { color: var(--green); font-size: 12px; font-weight: 900; }
.user-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.user-stat { border: 1px solid var(--line); border-radius: 9px; background: #fafcf9; padding: 13px 14px; }
.user-stat span, .user-stat strong { display: block; }
.user-stat span { color: var(--muted); font-size: 11px; }
.user-stat strong { margin-top: 7px; color: var(--green); font-size: 22px; }
.user-form { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: center; }
.user-form input, .user-form select { margin-top: 0; min-width: 0; }
.form-note { margin-top: 10px; color: var(--muted); font-size: 11px; }
.user-list { margin-top: 18px; }
.user-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) 100px 82px minmax(120px, .9fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 13px 0; }
.user-main strong, .user-main small, .user-meta small { display: block; }
.user-main strong { font-size: 13px; }
.user-main small, .user-meta small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.role-tag, .status-tag { display: inline-flex; justify-content: center; border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.role-tag.coaching { color: var(--green); background: var(--green-soft); }
.role-tag.training { color: var(--blue); background: #eef4f8; }
.role-tag.admin { color: #9d6040; background: #fff2e8; }
.user-role-select { width: 100%; margin-top: 0; padding: 6px 8px; font-size: 11px; }
.status-tag.active { color: var(--green); background: var(--green-soft); }
.status-tag.disabled, .status-tag.expired { color: #a5473e; background: var(--rose-soft); }
.user-lock { color: var(--muted); font-size: 10px; text-align: center; }

.floating {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #f1cac1;
  border-radius: 999px;
  background: #fff;
  color: #a5473e;
  padding: 8px 13px 8px 8px;
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 900;
}
.floating img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.app-toast { position: fixed; z-index: 80; top: 20px; right: 24px; max-width: min(360px, calc(100vw - 32px)); border: 1px solid #bddbc7; border-radius: 8px; background: #f3fbf5; color: #246238; padding: 12px 16px; box-shadow: 0 12px 30px rgba(44, 90, 58, .16); font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease; }
.app-toast.visible { opacity: 1; transform: translateY(0); }
.topbar-personal { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; padding: 3px 6px 3px 3px; font-size: 12px; font-weight: 800; }
.topbar-personal:hover, .topbar-personal.active { background: #fff0e4; color: #934b24; }
.topbar-personal > span { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border: 2px solid #e2a178; border-radius: 50%; color: #fff; background: #b86738; box-shadow: 0 2px 8px rgba(159, 79, 37, .18); font-size: 14px; }
.topbar-personal > span.has-avatar { background-color: transparent; background-position: center; background-size: cover; color: transparent; }
.topbar-personal b { font-size: 13px; }

.personal-page { max-width: 1180px; }
.personal-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.personal-page-head h2 { margin: 5px 0 8px; font-size: 28px; }
.personal-page-head p, .personal-panel-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.personal-points { flex: 0 0 auto; border: 1px solid #eed6c8; border-radius: 999px; color: #9b5028; background: #fff3ea; padding: 8px 12px; font-size: 12px; font-weight: 900; }
.personal-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.personal-tabs button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; padding: 11px 13px; font-size: 13px; font-weight: 800; }
.personal-tabs button.active { border-bottom-color: var(--green); color: var(--green); }
.personal-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 24px; box-shadow: 0 10px 26px rgba(44, 54, 47, .035); }
.personal-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.personal-panel-head h3 { margin: 0 0 7px; font-size: 18px; }
.personal-count { border-radius: 999px; color: #9c522d; background: #fff0e4; padding: 5px 9px; font-size: 11px; font-weight: 900; }
.locked-config { display: grid; gap: 8px; margin: 14px 0; border: 1px solid #e2e6df; border-radius: 8px; background: #f6f7f4; padding: 14px; }
.locked-config > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.locked-config strong { font-size: 13px; }
.locked-config small { color: var(--muted); font-size: 11px; }
.locked-config p { margin: 0; color: #536159; font-size: 13px; font-weight: 700; line-height: 1.65; }
.personal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 800px; padding-top: 20px; }
.personal-avatar-editor { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.personal-avatar-preview { display: grid; flex: 0 0 auto; place-items: center; width: 66px; height: 66px; overflow: hidden; border: 1px solid #e7d8cf; border-radius: 50%; color: #fff; background: #b86738; font-size: 22px; font-weight: 900; }
.personal-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.personal-avatar-editor strong, .personal-avatar-editor small { display: block; }
.personal-avatar-editor small { margin: 4px 0 9px; color: var(--muted); font-size: 11px; }
.personal-form label { display: grid; gap: 7px; color: #516058; font-size: 12px; font-weight: 800; }
.personal-form label:nth-of-type(4), .personal-form label:nth-of-type(5) { grid-column: 1 / -1; }
.personal-form textarea { resize: vertical; }
.personal-form .primary { width: fit-content; }
.persona-form { max-width: 860px; }
.persona-form label { grid-column: 1 / -1; }
.persona-empty { display: grid; min-height: 440px; place-content: center; justify-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 36px; text-align: center; }
.persona-empty > svg { width: 74px; height: 74px; color: #9da5b2; stroke-width: 1.3; }
.persona-empty h3 { margin: 22px 0 8px; font-size: 22px; }
.persona-empty p { margin: 0 0 26px; color: var(--muted); }
.persona-empty .primary { display: inline-flex; align-items: center; gap: 7px; }
.persona-empty .primary svg { width: 17px; }
.personal-knowledge-form { display: grid; grid-template-columns: 1fr 180px; gap: 10px; margin-top: 20px; }
.personal-knowledge-upload { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.personal-knowledge-upload span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.personal-knowledge-form textarea { grid-column: 1 / -1; resize: vertical; }
.personal-knowledge-form .primary { justify-self: start; }
.personal-knowledge-list { display: grid; gap: 0; margin-top: 18px; }
.personal-knowledge-list article, .points-list article { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding: 15px 0; }
.personal-knowledge-list strong, .personal-knowledge-list small, .points-list strong, .points-list small { display: block; }
.personal-knowledge-list small, .points-list small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.personal-knowledge-list p { max-width: 680px; margin: 8px 0 0; color: #59645e; font-size: 12px; line-height: 1.7; }
.personal-empty-note { margin-top: 18px; color: var(--muted); font-size: 13px; }
.points-hero { display: grid; justify-items: center; border-bottom: 1px solid var(--line); padding: 22px; background: #fff9f4; text-align: center; }
.points-hero span, .points-hero small { color: var(--muted); font-size: 12px; }
.points-hero strong { margin: 8px 0; color: #a6562e; font-size: 38px; line-height: 1; }
.points-list { margin-top: 8px; }
.points-list article { align-items: center; }
.points-list b { font-size: 16px; }
.points-list .positive { color: #2c7a45; }
.points-list .negative { color: #bd5147; }

@media (max-width: 980px) {
  .wechat-layout-header { align-items: flex-start; flex-direction: column; }
  .wechat-layout-actions { justify-content: flex-start; }
  .wechat-layout-grid { grid-template-columns: 320px minmax(560px, 1fr); height: calc(100vh - 154px); overflow-x: auto; }
  .login-page { padding: 0; }
  .login-visual { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; max-width: none; min-height: 100vh; margin: 0; }
  .login-visual-copy { grid-column: 1; padding: 9vh 0 5vh; }
  .login-visual-art { grid-column: 1; grid-row: 3; min-height: 360px; margin-top: 20px; border-radius: 28px 28px 0 0; }
  .login-visual-foot { grid-column: 1; grid-row: 4; padding-top: 18px; }
  .login-visual-copy h2 { font-size: 38px; }
  .login-card { margin: 0 auto; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position: sticky; z-index: 40; top: 0; display: flex; align-items: center; gap: 12px; width: 100%; height: auto; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); padding: 10px 14px; backdrop-filter: blur(12px); }
  .sidebar .brand { flex: 0 0 auto; padding-bottom: 0; border-bottom: 0; }
  .sidebar .brand img { width: 36px; height: 36px; }
  .sidebar .brand span { display: none; }
  .sidebar .brand strong { font-size: 12px; white-space: nowrap; }
  .topbar-personal b { display: none; }
  .topbar-personal { padding: 2px; }
  nav { display: flex; flex: 1; gap: 4px; min-width: 0; margin-top: 0; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; gap: 7px; padding: 9px 11px; white-space: nowrap; }
  .nav-item svg { width: 16px; height: 16px; }
  .role-card { display: none; }
  .hero, .workbench, .chat-layout { grid-template-columns: 1fr; }
  .agent-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-chat-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .agent-market-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .pipi-page { height: calc(100dvh - 280px); min-height: 520px; padding: 14px; }
  .hero img { justify-self: start; margin-top: 22px; }
  .tool-grid, .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompt-manager, .feature-edit, .admin-form.two-col, .user-form, .assistant-config-grid, .agent-cover-config-item, .agent-cover-upload, .copywriting-prompt-form, .copy-agent-form-grid, .copy-agent-create-card .copy-agent-form-grid, .coach-tool-workspace { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: 1fr 1fr; }
.user-meta { grid-column: 1 / -1; }
.user-meta label { display: block; color: var(--muted); font-size: 10px; }
.user-meta input { width: 130px; margin: 0 0 0 4px; padding: 5px 6px; font-size: 10px; }
  .form-panel, .knowledge-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .knowledge-panel.compact { max-height: 220px; }
  .prompt-editor { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .personal-form { grid-template-columns: 1fr; }
  .personal-form label { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .copy-compose-open .wechat-layout-workspace { height: 100dvh; overflow-y: auto; }
  .wechat-layout-header { position: static; min-height: 0; padding: 15px; }
  .wechat-layout-header p { line-height: 1.5; }
  .wechat-layout-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wechat-layout-grid { display: block; height: auto; min-height: 0; overflow: visible; }
  .wechat-layout-controls { overflow: visible; border-right: 0; border-bottom: 1px solid #ded5cc; padding: 18px 15px 26px; }
  #wechatLayoutArticle { min-height: 250px; }
  .wechat-layout-preview-panel { min-height: 720px; }
  .wechat-preview-toolbar { padding: 0 14px; }
  .wechat-preview-shell { height: 666px; padding: 14px 8px; }
  #wechatLayoutPreview { width: 100%; transform-origin: top center; }
  .usage-donut-panel { align-items: flex-start; flex-direction: column; }
  .usage-tree { min-height: 0; flex-direction: column; }
  .usage-tree article { min-height: 94px; }
  .usage-health-metrics { grid-template-columns: 1fr; }
  .personal-page-head { align-items: flex-start; flex-direction: column; }
  .personal-panel { padding: 16px; }
  .personal-knowledge-form { grid-template-columns: 1fr; }
  .personal-knowledge-upload { align-items: flex-start; flex-direction: column; }
  .personal-knowledge-list article { flex-direction: column; }
  .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-grid, .usage-visualizations { grid-template-columns: 1fr; }
  .provider-usage-cards { grid-template-columns: 1fr; }
  .login-page { padding: 0; }
  .login-visual { gap: 16px; padding: 26px 20px; }
  .login-visual-copy h2 { font-size: 31px; }
  .login-visual-copy h2 { white-space: normal; }
  .login-visual-copy p { margin-top: 12px; font-size: 13px; }
  .landing-features { gap: 8px 18px; margin-top: 20px; font-size: 11px; }
  .landing-features span + span::before { margin-right: 18px; }
  .brand-topbar { align-items: flex-start; }
  .brand-nav-mark { font-size: 13px; }
  .login-visual-copy { margin-top: 5vh; padding-bottom: 2vh; }
  .login-visual-art { min-height: 300px; }
  .login-visual-art img { top: -3%; right: 50%; width: 86%; height: 112%; transform: translateX(50%); }
  .login-poster { border-radius: 12px; }
  .login-poster { width: min(240px, 60vw); }
  .login-visual-foot { flex-direction: column; gap: 8px; font-size: 10px; }
  .home-banner { min-height: 280px; }
  .home-banner-copy { width: 66%; min-height: 280px; padding: 24px 18px; }
  .home-banner-copy h2 { max-width: 190px; margin: 16px 0 10px; font-size: 30px; white-space: normal; }
  .home-banner-copy p { max-width: 174px; font-size: 10px; line-height: 1.65; letter-spacing: .02em; overflow-wrap: anywhere; }
  .home-banner-copy small { max-width: 152px; margin-top: 16px; font-size: 10px; line-height: 1.45; letter-spacing: .04em; }
  .home-banner-art { width: 43%; margin-top: 0; margin-bottom: 0; }
  .home-teacher-figure { top: 4%; right: 50%; width: 112%; height: 140%; transform: translateX(50%); }
  .login-card { padding: 24px 20px; }
  .topbar { align-items: flex-start; flex-direction: column; padding: 18px; }
  .page { padding: 18px 14px 46px; }
  .coach-hero { flex-direction: column; padding: 22px; }
  .coach-hero h2 { font-size: 25px; }
  .coach-tool-card { padding: 18px; }
  .coach-tool-guide { grid-template-columns: 1fr 1fr; }
  .coach-tool-guide-intro, .coach-tool-guide-more { grid-column: 1 / -1; }
  nav, .tool-grid, .admin-grid { grid-template-columns: 1fr; }
  .quick-start-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .agent-market-head { align-items: flex-start; flex-direction: column; }
  .agent-market-head h2 { font-size: 24px; }
  .agent-market-head h2 small { display: block; margin: 6px 0 0; }
  .agent-gallery { grid-template-columns: 1fr; }
  .agent-intro-mark { width: 54px; height: 54px; margin-bottom: 13px; }
  .agent-chat-layout { grid-template-columns: 1fr; height: calc(100dvh - 132px); min-height: 620px; }
  .agent-session-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .agent-session-brand { padding: 0; }
  .agent-session-brand span { display: none; }
  .agent-session-brand strong { margin: 0; font-size: 13px; }
  .agent-session-sidebar .copy-back { margin: 0; padding: 8px; font-size: 0; }
  .agent-session-sidebar .copy-back::after { content: "返回"; font-size: 11px; }
  .agent-new-session { width: auto; min-width: 0; padding: 8px 10px; }
  .session-label, #copySessionList { display: none; }
  .agent-chat-header { align-items: flex-start; flex-direction: column; padding: 16px; }
  .agent-chat-actions { align-self: flex-end; }
  .agent-chat-identity p { white-space: normal; }
  .agent-chat-body { padding: 0 0 132px; }
  .agent-start-screen { padding: 34px 18px 212px; }
  .agent-start-screen h1 { font-size: 32px; }
  .agent-start-screen > p { font-size: 12px; }
  .agent-simple-composer { right: 12px; bottom: 12px; left: 12px; }
  .agent-chat-main:not(.has-conversation) .agent-simple-composer { bottom: calc(50% - 170px); }
  .agent-prompt-box { padding: 11px 12px 9px; }
  .copy-conversation { padding: 24px 16px 12px; }
  .copy-message-bubble { max-width: 88%; }
  .copy-composer-fields { grid-template-columns: 1fr; gap: 0; }
  .agent-simple-composer .agent-composer-footer { align-items: center; flex-direction: row; }
  .agent-simple-composer .agent-composer-footer div { width: auto; }
  .hero { padding: 24px; }
  .hero h2 { font-size: 27px; }
  .floating span { display: none; }
}

.sales-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 190px;
  border: 1px solid #eadfd4;
  border-radius: 14px;
  background: linear-gradient(118deg, #fffaf4 0%, #f6f7f0 52%, #f4eee8 100%);
  padding: 32px 38px;
}
.sales-hero h2 { max-width: 720px; margin-top: 12px; color: #342c26; font-size: 34px; line-height: 1.25; }
.sales-hero p { max-width: 650px; margin-top: 12px; color: #7d746d; font-size: 13px; line-height: 1.7; }
.sales-hero-mark { display: grid; place-items: center; width: 112px; height: 112px; flex: 0 0 auto; border: 1px solid #e5c8ad; border-radius: 50%; color: #a35a31; background: rgba(255, 249, 237, .72); font-size: 20px; font-weight: 900; box-shadow: 0 16px 34px rgba(111, 71, 42, .1); }
.sales-setup-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .7fr); gap: 16px; margin-top: 18px; }
.sales-profile-panel, .sales-config-panel { min-width: 0; }
.sales-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sales-profile-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 16px; color: var(--ink); text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.sales-profile-card:hover, .sales-profile-card.active { border-color: #d39a72; box-shadow: 0 10px 24px rgba(132, 76, 38, .1); transform: translateY(-1px); }
.sales-profile-disc { display: inline-block; color: #ad6b44; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.sales-profile-card strong { display: block; margin-top: 9px; color: #39322d; font-size: 16px; }
.sales-profile-card small { display: block; margin-top: 5px; color: #847a72; font-size: 11px; }
.sales-profile-card p { min-height: 36px; margin-top: 12px; color: #6f6861; font-size: 11px; line-height: 1.6; }
.sales-profile-card .sales-profile-focus { min-height: 34px; margin-top: 10px; color: #a06c4c; font-size: 10px; line-height: 1.55; }
.sales-profile-card div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.sales-profile-card em { border-radius: 999px; color: #8d755f; background: #f7f1ea; padding: 5px 7px; font-size: 10px; font-style: normal; }
.sales-config-panel h3 { margin: 9px 0 20px; font-size: 17px; }
.sales-config-panel label { margin-bottom: 13px; }
.sales-method-guide { position: relative; overflow: hidden; margin: 18px 0; border: 1px solid #e8d9cb; border-radius: 12px; background: linear-gradient(110deg, #fff 0%, #fffaf4 57%, #f2f6f0 100%); padding: 24px 28px 26px; box-shadow: 0 10px 30px rgba(80, 56, 36, .05); }
.sales-method-guide::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; content: ""; background: #c87946; }
.sales-method-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sales-method-heading strong { display: block; margin-top: 6px; color: #3f342d; font-size: 21px; }
.sales-method-heading p { max-width: 500px; color: #82776e; font-size: 11px; line-height: 1.6; text-align: right; }
.sales-method-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 23px; }
.sales-method-steps::before { position: absolute; top: 19px; right: 8%; left: 8%; height: 1px; content: ""; background: linear-gradient(90deg, #d99c70, #d5b59c 58%, #9ebda9); }
.sales-method-steps > button { position: relative; z-index: 1; display: flex; min-width: 0; align-items: center; border: 0; background: transparent; padding: 0; flex-direction: column; text-align: center; }
.sales-method-steps > button:hover strong { color: #b96638; }
.sales-method-steps > button:hover > span { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(134, 76, 40, .16); }
.sales-method-steps > button > span { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #cf8a5b; border-radius: 50%; color: #b96638; background: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 5px 14px rgba(134, 76, 40, .1); transition: transform .18s ease, box-shadow .18s ease; }
.sales-method-steps > button:first-child > span { border-color: #c87946; color: #fff; background: #c87946; }
.sales-method-steps > button:last-child > span { border-color: #789b83; color: #fff; background: #789b83; }
.sales-method-steps > button strong, .sales-method-steps > button small { display: block; }
.sales-method-steps > button strong { margin-top: 10px; color: #493c32; font-size: 13px; white-space: nowrap; transition: color .18s ease; }
.sales-method-steps > button small { margin-top: 4px; color: #9a8d84; font-size: 9px; line-height: 1.4; }
.sales-step-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 190px); margin-top: 14px; overflow: hidden; border: 1px solid #e7ddd3; border-radius: 10px; background: #fff; }
.sales-step-nav { border-right: 1px solid #e7ddd3; background: #f7f4ef; padding: 22px 14px; }
.sales-step-nav h3 { margin: 7px 6px 18px; color: #42372f; font-size: 16px; }
.sales-step-nav > .eyebrow { margin-left: 6px; }
.sales-step-nav > div { display: grid; gap: 4px; }
.sales-step-nav button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 8px; width: 100%; border: 0; border-radius: 7px; color: #766b63; background: transparent; padding: 10px 9px; text-align: left; }
.sales-step-nav button > span { grid-row: 1 / 3; align-self: center; color: #b8784f; font-size: 9px; font-weight: 900; }
.sales-step-nav button strong { font-size: 11px; }
.sales-step-nav button small { color: #a0958c; font-size: 8px; }
.sales-step-nav button.active { color: #a65e35; background: #f2e7dc; }
.sales-step-workspace { min-width: 0; background: #fbfaf7; padding: 26px; }
.sales-step-header { border-bottom: 1px solid #e9e1d9; padding-bottom: 20px; }
.sales-step-header > div { position: relative; padding-left: 58px; }
.sales-step-number { position: absolute; top: 1px; left: 0; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: #c87946; font-size: 11px; font-weight: 900; }
.sales-step-header h2 { margin-top: 5px; color: #382f29; font-size: 26px; }
.sales-step-header p { max-width: 760px; margin-top: 8px; color: #80766e; font-size: 12px; line-height: 1.7; }
.sales-step-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 16px; margin-top: 18px; }
.sales-library-panel, .sales-step-customizer, .sales-step-result { border: 1px solid #e7ddd3; border-radius: 8px; background: #fff; padding: 18px; }
.sales-library-panel .panel-head p { margin-top: 5px; color: #988d84; font-size: 10px; }
.sales-library-list { display: grid; gap: 8px; margin-top: 14px; }
.sales-library-list article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; border-top: 1px solid #eee7df; padding: 12px 0 4px; }
.sales-library-list article:first-child { border-top: 0; }
.sales-library-list article > span { color: #c87946; font-size: 9px; font-weight: 900; }
.sales-library-list article p { color: #514941; font-size: 12px; line-height: 1.7; }
.sales-step-customizer { align-self: start; background: #fffaf4; }
.sales-step-customizer h3 { margin: 7px 0 18px; color: #493b32; font-size: 16px; }
.sales-step-customizer label { margin-bottom: 12px; }
.sales-step-result { margin-top: 16px; }
.sales-step-result .editable-output { min-height: 180px; }
.sales-method-admin-manager { display: grid; gap: 14px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.sales-method-admin-list { display: grid; gap: 10px; }
.sales-method-admin-item { border: 1px solid #e7ddd3; border-radius: 8px; background: #fff; padding: 14px; }
.sales-method-admin-item > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sales-method-admin-item > header > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #c87946; font-size: 9px; font-weight: 900; }
.sales-method-admin-item > header > div { min-width: 0; flex: 1; }
.sales-method-admin-item > header strong, .sales-method-admin-item > header small { display: block; }
.sales-method-admin-item > header strong { color: #463a31; font-size: 13px; }
.sales-method-admin-item > header small { margin-top: 3px; color: #9d9289; font-size: 9px; }
.sales-method-admin-item label { margin-top: 10px; }
.sales-chat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: calc(100vh - 140px); min-height: 600px; overflow: hidden; border: 1px solid #e7ded4; border-radius: 10px; background: #fbfaf7; box-shadow: 0 12px 34px rgba(75, 54, 37, .07); }
.sales-scenario-panel { display: flex; min-height: 0; border-right: 1px solid #e7ded4; background: #f5f2ee; padding: 20px 16px; flex-direction: column; }
.sales-scenario-panel > .link-button { align-self: flex-start; margin-bottom: 22px; padding: 0; font-size: 11px; }
.sales-scenario-card { border: 1px solid #e7d9cb; border-radius: 9px; background: #fffaf4; padding: 14px; }
.sales-scenario-card strong { display: block; margin-top: 8px; color: #40372f; font-size: 16px; }
.sales-scenario-card p { margin-top: 5px; color: #826f61; font-size: 11px; line-height: 1.5; }
.sales-scenario-card small { display: block; margin-top: 14px; color: #a08d80; font-size: 10px; }
.sales-scenario-method { margin-top: 13px; border-top: 1px solid #efe1d5; padding-top: 10px; }
.sales-scenario-method span, .sales-scenario-method b { display: block; }
.sales-scenario-method span { color: #a46b45; font-size: 9px; font-weight: 900; }
.sales-scenario-method b { margin-top: 4px; color: #745b48; font-size: 10px; font-weight: 500; line-height: 1.55; }
.sales-progress-head { display: flex; justify-content: space-between; gap: 8px; margin: 28px 0 8px; color: #95877d; font-size: 10px; }
.sales-progress-head strong { color: #a35a31; font-size: 10px; }
.sales-progress-track { height: 4px; overflow: hidden; border-radius: 999px; background: #e7ddd4; }
.sales-progress-track span { display: block; height: 100%; border-radius: inherit; background: #c87946; transition: width .25s ease; }
.sales-six-steps { display: grid; gap: 2px; margin: 14px 0 20px; padding: 0; list-style: none; }
.sales-six-steps li { display: flex; align-items: flex-start; gap: 9px; border-radius: 6px; color: #90857c; padding: 8px 7px; font-size: 11px; }
.sales-six-steps li span { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #ddd3ca; border-radius: 50%; font-size: 10px; }
.sales-six-steps li div { min-width: 0; }
.sales-six-steps li strong, .sales-six-steps li small { display: block; }
.sales-six-steps li strong { color: inherit; font-size: 11px; line-height: 1.45; }
.sales-six-steps li small { margin-top: 2px; color: #a49a92; font-size: 8px; line-height: 1.4; }
.sales-six-steps li.current { color: #a35a31; background: #f4e9df; font-weight: 800; }
.sales-six-steps li.current span, .sales-six-steps li.done span { border-color: #c87946; color: #fff; background: #c87946; }
.sales-six-steps li.done { color: #7d806e; }
.sales-scenario-panel #endSalesSimulation { margin-top: auto; }
.sales-chat-panel { position: relative; display: flex; min-width: 0; min-height: 0; background: #fbfaf7; flex-direction: column; }
.sales-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #eee7df; background: rgba(255,255,255,.68); padding: 18px 24px; }
.sales-chat-head h2 { margin-top: 5px; color: #3a332d; font-size: 19px; }
.sales-chat-head p { margin-top: 5px; color: #9a9188; font-size: 11px; }
.sales-live-dot { color: #6d966c; font-size: 10px; font-weight: 800; }
.sales-live-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #6d966c; }
.sales-live-dot.typing { color: #a35a31; }
.sales-live-dot.typing::before { background: #c87946; animation: salesStatusPulse 1.1s ease-in-out infinite; }
.sales-live-dot.blocked { color: #ae5c51; }
.sales-live-dot.blocked::before { background: #ae5c51; }
.sales-live-dot.disengaged { color: #a97837; }
.sales-live-dot.disengaged::before { background: #c4934e; }
@keyframes salesStatusPulse { 50% { opacity: .35; transform: scale(.72); } }
.sales-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 120px; }
.sales-message { width: fit-content; max-width: 70%; margin-bottom: 20px; }
.sales-message.user { margin-left: auto; }
.sales-message-label { display: block; margin-bottom: 6px; color: #a1795f; font-size: 10px; font-weight: 800; }
.sales-message.user .sales-message-label { color: #8f9990; text-align: right; }
.sales-message > div { border-radius: 8px; color: #463d36; background: #eee9e3; padding: 12px 14px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.sales-message.user > div { color: #4d4944; background: #e6eee7; }
.sales-message.pending > div { display: inline-flex; align-items: center; min-height: 44px; gap: 5px; color: #92725c; background: #f5eee8; }
.sales-thinking > span { margin-right: 3px; font-size: 12px; }
.sales-thinking i { width: 5px; height: 5px; border-radius: 50%; background: #c87946; animation: salesThinking 1.05s ease-in-out infinite; }
.sales-thinking i:nth-of-type(2) { animation-delay: .14s; }
.sales-thinking i:nth-of-type(3) { animation-delay: .28s; }
@keyframes salesThinking { 0%, 100% { opacity: .28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.sales-blocked-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 460px; margin: 4px 0 20px; border-left: 3px solid #bd6a5b; background: #fbf0ee; padding: 11px 13px; color: #91594f; font-size: 11px; }
.sales-blocked-notice strong { color: #79473f; font-size: 12px; }
.sales-blocked-notice.disengaged { border-left-color: #c4934e; background: #fff8eb; color: #8d6936; }
.sales-blocked-notice.disengaged strong { color: #715126; }
.sales-composer { position: absolute; right: 20px; bottom: 18px; left: 20px; display: flex; align-items: flex-end; gap: 9px; border: 1px solid #ded6ce; border-radius: 9px; background: rgba(255,255,255,.95); padding: 9px; box-shadow: 0 12px 28px rgba(59, 44, 34, .1); }
.sales-composer textarea { min-height: 40px; max-height: 120px; margin: 0; border: 0; background: transparent; padding: 5px 4px; box-shadow: none; resize: none; }
.sales-composer textarea:focus { border: 0; box-shadow: none; }
.sales-composer-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sales-composer .primary { flex: 0 0 auto; padding: 9px 16px; }
.sales-emoji-trigger { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #e1d7cf; border-radius: 7px; color: #9d7c64; background: #fffaf5; font-size: 18px; line-height: 1; }
.sales-emoji-trigger:hover:not(:disabled), .sales-emoji-trigger[aria-expanded="true"] { border-color: #d5a277; color: #a35a31; background: #fff1e3; }
.sales-emoji-trigger:disabled { cursor: not-allowed; opacity: .52; }
.sales-emoji-picker { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 8px); width: 286px; border: 1px solid #e4d9ce; border-radius: 8px; background: #fffdfa; padding: 9px; box-shadow: 0 14px 30px rgba(75, 54, 37, .14); }
.sales-emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sales-emoji-grid button { display: grid; width: 34px; height: 32px; place-items: center; border: 0; border-radius: 6px; background: transparent; font-size: 18px; line-height: 1; }
.sales-emoji-grid button:hover { background: #f6eee7; }
.sales-review { position: absolute; z-index: 4; inset: 72px 22px 18px; overflow-y: auto; border: 1px solid #ead6c3; border-radius: 10px; background: rgba(255, 250, 244, .97); padding: 24px; box-shadow: 0 18px 38px rgba(91, 58, 33, .14); }
.sales-outcome-overlay { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(62, 44, 30, .22); backdrop-filter: blur(3px); }
.sales-outcome-card { width: min(330px, 100%); border: 1px solid #e5d4bf; border-radius: 8px; background: #fffaf5; padding: 24px 22px 20px; box-shadow: 0 20px 48px rgba(71, 47, 29, .22); text-align: center; animation: salesOutcomePop .28s cubic-bezier(.22, .75, .25, 1) both; }
.sales-outcome-card .eyebrow { color: #a97837; }
.sales-outcome-emoji { display: grid; width: 58px; height: 58px; place-items: center; margin: 16px auto 10px; border-radius: 50%; background: #fff0df; font-size: 30px; animation: salesOutcomeEmoji 1.7s ease-in-out infinite; }
.sales-outcome-card h3 { margin: 0; color: #654320; font-size: 30px; letter-spacing: 2px; }
.sales-outcome-card p { margin: 8px 0 17px; color: #80684f; font-size: 12px; line-height: 1.65; }
.sales-outcome-card .primary { width: 100%; }
.sales-outcome-card small { display: block; margin-top: 10px; color: #ab967f; font-size: 10px; }
@keyframes salesOutcomePop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes salesOutcomeEmoji { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sales-review h3 { margin-top: 8px; color: #44382e; }
.sales-review-content { margin-top: 14px; color: #514941; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.sales-score-report { color: #4b4037; }
.sales-score-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #eadcd0; padding-bottom: 18px; }
.sales-score-report-head h3 { margin: 6px 0 0; color: #41362e; font-size: 22px; }
.sales-score-report-head p { max-width: 620px; margin-top: 8px; color: #83766c; font-size: 12px; line-height: 1.7; }
.sales-score-total { display: flex; align-items: baseline; flex: 0 0 auto; min-width: 108px; color: #a05b34; text-align: right; }
.sales-score-total strong { font-size: 42px; line-height: 1; }
.sales-score-total span { margin-left: 4px; color: #ad9888; font-size: 11px; font-weight: 800; }
.sales-report-outcome { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 16px; border-left: 3px solid #c4934e; background: #fff8eb; padding: 11px 13px; color: #836033; }
.sales-report-outcome span { font-size: 10px; font-weight: 900; }
.sales-report-outcome strong { font-size: 13px; }
.sales-report-outcome p { min-width: 0; margin: 0; color: inherit; font-size: 10px; line-height: 1.55; }
.sales-report-outcome.danger { border-left-color: #bd6a5b; background: #fbf0ee; color: #874f47; }
.sales-score-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid #eadcd0; border-left: 1px solid #eadcd0; }
.sales-score-dimension { min-width: 0; border-right: 1px solid #eadcd0; border-bottom: 1px solid #eadcd0; padding: 14px 15px; }
.sales-score-dimension-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sales-score-dimension-head strong { color: #4a3d34; font-size: 13px; }
.sales-score-dimension-head b { color: #a35a31; font-size: 18px; }
.sales-score-dimension-head small { margin-left: 2px; color: #aa998e; font-size: 9px; }
.sales-score-track { display: block; height: 5px; overflow: hidden; margin-top: 10px; border-radius: 999px; background: #eee3da; }
.sales-score-track i { display: block; height: 100%; border-radius: inherit; background: #c87946; }
.sales-score-dimension p { min-height: 36px; margin-top: 9px; color: #85776d; font-size: 10px; line-height: 1.65; }
.sales-discovery-forces { margin-top: 12px; border-top: 1px solid #eee2d8; padding-top: 10px; }
.sales-discovery-forces-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sales-discovery-forces-head strong { color: #79533e; font-size: 10px; }
.sales-discovery-forces-head span { color: #b18463; font-size: 9px; }
.sales-discovery-force-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.sales-discovery-force-grid article { min-width: 0; border: 1px solid #eee2d8; background: #fffaf6; padding: 8px; }
.sales-discovery-force-grid article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.sales-discovery-force-grid article strong { color: #665044; font-size: 10px; }
.sales-discovery-force-grid article b { color: #a35a31; font-size: 13px; }
.sales-discovery-force-grid article b small { margin-left: 1px; color: #aa998e; font-size: 8px; }
.sales-discovery-force-grid .sales-score-track { height: 4px; margin-top: 7px; }
.sales-discovery-force-grid article p { min-height: 0; margin-top: 6px; color: #927f72; font-size: 9px; line-height: 1.45; }
.sales-score-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 18px; border-top: 1px solid #eadcd0; border-bottom: 1px solid #eadcd0; padding: 16px 0; }
.sales-score-insights section + section { border-left: 1px solid #eadcd0; padding-left: 22px; }
.sales-score-insights span, .sales-next-drill > span, .sales-report-transcript > span { color: #a05b34; font-size: 10px; font-weight: 900; }
.sales-score-insights ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.sales-score-insights li { position: relative; padding-left: 11px; color: #675a50; font-size: 11px; line-height: 1.6; }
.sales-score-insights li::before { position: absolute; left: 0; content: "·"; color: #c87946; font-weight: 900; }
.sales-next-drill { margin-top: 18px; background: #f7eee6; padding: 15px 16px; }
.sales-next-drill strong { display: block; margin-top: 7px; color: #593e2d; font-size: 14px; }
.sales-next-drill p { margin-top: 7px; color: #715f52; font-size: 11px; line-height: 1.65; }
.sales-next-drill blockquote { margin: 10px 0 0; border-left: 2px solid #c87946; color: #795e4c; padding-left: 9px; font-size: 11px; line-height: 1.65; }
.sales-report-admin { margin-top: 16px; }
.sales-report-admin-layout { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); min-height: 560px; border: 1px solid var(--line); background: #fff; }
.sales-report-admin-list { overflow-y: auto; border-right: 1px solid var(--line); }
.sales-report-admin-item { display: block; width: 100%; border-bottom: 1px solid var(--line); background: #fff; padding: 14px; text-align: left; }
.sales-report-admin-item:last-child { border-bottom: 0; }
.sales-report-admin-item:hover, .sales-report-admin-item.active { background: #f6fbf7; }
.sales-report-admin-item span, .sales-report-admin-item strong, .sales-report-admin-item small { display: block; }
.sales-report-admin-item span { color: var(--green); font-size: 10px; font-weight: 900; }
.sales-report-admin-item strong { margin-top: 6px; color: #435047; font-size: 13px; }
.sales-report-admin-item small { margin-top: 6px; color: var(--muted); font-size: 10px; }
.sales-report-admin-detail { min-width: 0; overflow-y: auto; padding: 22px; }
.sales-report-admin-title { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.sales-report-admin-title h3 { margin-top: 5px; font-size: 18px; }
.sales-report-admin-title p, .sales-report-admin-title time { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.sales-report-admin-title time { flex: 0 0 auto; text-align: right; }
.sales-report-admin-detail .sales-score-report { margin-top: 18px; }
.sales-score-report.compact .sales-score-report-head { display: none; }
.sales-report-transcript { display: grid; gap: 10px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.sales-report-transcript article { max-width: 86%; border-left: 2px solid #e4d6ca; padding-left: 10px; }
.sales-report-transcript article.user { margin-left: auto; border-right: 2px solid #b9d9c8; border-left: 0; padding-right: 10px; padding-left: 0; text-align: right; }
.sales-report-transcript b { color: #9f7155; font-size: 10px; }
.sales-report-transcript article.user b { color: var(--green); }
.sales-report-transcript p { margin-top: 4px; color: #65594f; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }

.competitor-native { max-width: 1180px; margin: 0 auto; padding: 8px 0 42px; }
.competitor-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 36%); min-height: 375px; overflow: hidden; border: 1px solid #eadbd1; border-radius: 18px; background: linear-gradient(120deg, #fff1e3, #fff8f0 62%, #f6f2ed); box-shadow: 0 18px 45px rgba(113, 58, 25, .08); }
.competitor-hero-copy { padding: 46px 28px 40px 48px; }
.competitor-hero-copy h2 { margin: 14px 0 0; color: #3a281e; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.14; }
.competitor-hero-copy h2 em { color: #c65d25; font-style: normal; }
.competitor-hero-copy p { max-width: 570px; margin: 16px 0 0; color: #7d7168; font-size: 13px; line-height: 1.75; }
.competitor-hero .competitor-search-bar { max-width: 620px; margin-top: 25px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border: 1px solid #e8cdbb; border-radius: 10px; background: rgba(255,255,255,.84); padding: 5px 6px 5px 14px; box-shadow: 0 10px 24px rgba(104, 55, 26, .07); }
.competitor-hero .competitor-search-bar > span { color: #9b806e; font-size: 18px; }
.competitor-hero .competitor-search-bar input { border: 0; background: transparent; box-shadow: none; padding: 9px 3px; }
.competitor-hero .competitor-search-bar button { min-width: 110px; }
.competitor-search-preferences { display: flex; max-width: 620px; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; color: #88766a; font-size: 11px; }.competitor-search-preferences > div { display: flex; align-items: center; gap: 14px; }.competitor-search-preferences label { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }.competitor-search-preferences select { width: auto; min-width: 76px; border: 1px solid #e4d4c8; border-radius: 8px; background: rgba(255,255,255,.9); padding: 7px 26px 7px 9px; color: #664f41; }.competitor-search-preferences #competitorChannel { min-width: 88px; }.competitor-search-preferences strong { color: #a35c35; font-size: 11px; white-space: nowrap; }.competitor-search-preferences select:disabled { opacity: .55; }
.competitor-radar { display: flex; min-width: 0; flex-direction: column; padding: 26px 28px 22px 12px; color: #a08c80; }
.competitor-radar-head, .competitor-radar-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; }
.competitor-radar-head > span:last-child { color: #958175; font-weight: 800; }
.competitor-radar-stage { position: relative; width: min(100%, 315px); aspect-ratio: 1; align-self: center; margin: 4px 0; }
.competitor-radar-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.competitor-radar-stage b { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(172,89,45,.3); border-radius: 50%; color: #9c542f; background: rgba(255,248,241,.9); font-size: 8px; text-align: center; transform: translate(-50%,-50%); }
.competitor-radar-stage b strong { font-size: 10px; }
.competitor-radar-stage > span { position: absolute; z-index: 3; color: #9e8170; font-size: 8px; font-weight: 900; }
.competitor-radar-stage > span:nth-last-child(4) { top: 22%; left: -10px; }.competitor-radar-stage > span:nth-last-child(3) { top: 20%; right: -10px; }.competitor-radar-stage > span:nth-last-child(2) { right: -8px; bottom: 19%; }.competitor-radar-stage > span:last-child { bottom: 18%; left: -10px; }
.competitor-radar.searching .competitor-radar-head > span:last-child { color: #a84e21; }
.competitor-profile-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 15px 18px; }.competitor-profile-strip strong { display: block; margin-top: 5px; color: #4b514a; font-size: 13px; }
.competitor-hot-section { margin-top: 28px; }.competitor-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.competitor-section-head h3 { margin-top: 7px; font-size: 22px; }.competitor-section-head > span { color: #a87859; font-size: 10px; font-weight: 800; }
.competitor-hot-ranking { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); overflow: hidden; margin-top: 14px; border: 1px solid #e8ddd2; border-radius: 12px; background: #fff; }.competitor-hot-primary { position: relative; display: flex; min-height: 210px; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; border: 0; color: #fff; background: linear-gradient(145deg, #4d3123, #9d5632 56%, #d4824c); padding: 26px; text-align: left; }.competitor-hot-primary strong { margin-top: 10px; font-family: Georgia, "Songti SC", serif; font-size: 42px; letter-spacing: .04em; }.competitor-hot-primary small { font-size: 11px; }.competitor-hot-primary span { margin-top: 20px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; padding: 7px 10px; font-size: 10px; font-weight: 900; }.competitor-hot-sublist { padding: 8px 18px 10px; }.competitor-hot-sublist button { display: grid; width: 100%; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #f1ebe5; background: transparent; padding: 13px 0; text-align: left; }.competitor-hot-sublist button b { color: #b17450; font-size: 11px; }.competitor-hot-sublist button span { color: #4f4842; font-size: 13px; font-weight: 800; }.competitor-hot-sublist button small { color: #b17450; font-size: 10px; }
.competitor-hot-ranking.dynamic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
.competitor-trend-platform { min-width: 0; padding: 16px 18px 12px; }
.competitor-trend-platform + .competitor-trend-platform { border-left: 1px solid #eee3d9; }
.competitor-trend-platform > header { display: flex; min-height: 62px; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eadfd5; padding: 2px 4px 12px; }
.competitor-trend-platform > header div { display: grid; gap: 3px; }
.competitor-trend-platform > header span { color: #b26035; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.competitor-trend-platform > header strong { color: #44382f; font-size: 15px; }
.competitor-trend-platform > header small { color: #98887d; font-size: 9px; }
.competitor-trend-platform > header time { flex: 0 0 auto; border-radius: 999px; color: #9d6848; background: #fff4ea; padding: 5px 8px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.competitor-trend-list { display: grid; grid-template-rows: repeat(10, minmax(48px, auto)); }
.competitor-trend-list > button { display: grid; width: 100%; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #f1ebe5; background: transparent; padding: 12px 7px; text-align: left; }
.competitor-trend-list > button:hover { background: #fff8f1; }
.competitor-trend-list > button b { color: #b17450; font-size: 11px; }
.competitor-trend-list > button span { overflow: hidden; color: #4f4842; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.competitor-trend-list > button small { color: #b17450; font-size: 9px; }
.competitor-trend-platform-empty { display: grid; min-height: 180px; place-content: center; gap: 6px; color: #8b7769; text-align: center; }
.competitor-trend-platform-empty span { max-width: 260px; font-size: 10px; line-height: 1.6; }
.competitor-trend-state { grid-column: 1 / -1; display: grid; min-height: 120px; place-content: center; gap: 7px; color: #7d6c60; text-align: center; }.competitor-trend-state strong { color: #4f4037; }.competitor-trend-state span { font-size: 11px; }.competitor-trend-state.error { color: #a34d46; }.competitor-trend-state button { justify-self: center; margin-top: 5px; }
.competitor-native-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 30px; background: linear-gradient(135deg, #fff8ef, #fff 64%); border: 1px solid #eadccf; }
.competitor-native-head h2 { margin: 7px 0 0; color: #46372f; font-size: 30px; letter-spacing: -.03em; }
.competitor-native-head p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.competitor-search-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 19px; }
.competitor-search-bar input { min-width: 0; border: 1px solid #ddddd5; outline: 0; background: #fff; padding: 13px 15px; color: var(--ink); }
.competitor-search-bar input:focus { border-color: #c65d25; box-shadow: 0 0 0 3px #fff0e4; }
.competitor-search-bar button { min-width: 114px; }
.competitor-search-status { min-height: 20px; margin: 12px 0 0; color: #84756a; font-size: 12px; }
.competitor-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 16px; }
.competitor-video-card { min-width: 0; border: 1px solid var(--line); background: #fff; padding: 17px; box-shadow: 0 7px 18px rgba(72, 50, 35, .035); }
.competitor-video-cover { position: relative; display: grid; min-height: 166px; overflow: hidden; margin: -17px -17px 16px; background: linear-gradient(135deg, #4d3123, #b56b3e); color: #fff; place-items: center; text-decoration: none; }.competitor-video-cover img { width: 100%; height: 166px; object-fit: cover; }.competitor-video-cover::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, transparent 48%, rgba(35,20,12,.65)); }.competitor-video-cover b { position: absolute; z-index: 1; right: 11px; bottom: 10px; border-radius: 999px; background: rgba(36,22,14,.7); padding: 6px 9px; font-size: 10px; }.competitor-video-cover > span { position: relative; z-index: 1; font-size: 12px; }
.competitor-video-cover.unavailable { cursor: default; }.competitor-video-channel { display: flex; margin: -4px 0 8px; }.competitor-video-channel span { border: 1px solid #edd8c8; border-radius: 999px; background: #fff7f1; padding: 4px 8px; color: #a2542c; font-size: 10px; font-weight: 800; }
.competitor-video-top, .competitor-metrics, .competitor-card-actions, .competitor-transcript > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.competitor-video-top span { color: #a84e21; font-size: 11px; font-weight: 800; }
.competitor-video-top b { font-size: 20px; }
.competitor-video-top small { color: #998b80; font-size: 11px; }
.competitor-video-card h3 { display: -webkit-box; overflow: hidden; margin: 14px 0 0; color: #46382f; font-size: 15px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.competitor-author { overflow: hidden; margin: 8px 0 0; color: #786d64; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.competitor-metrics { justify-content: flex-start; flex-wrap: wrap; margin-top: 14px; color: #8b7d73; font-size: 10px; }
.competitor-card-actions { margin-top: 16px; }
.competitor-card-actions > * { display: inline-flex; flex: 1; align-items: center; justify-content: center; min-height: 34px; text-decoration: none; font-size: 12px; }
.competitor-transcript { margin-top: 15px; border-top: 1px solid #eee6de; padding-top: 13px; color: #65594f; font-size: 12px; line-height: 1.7; }
.competitor-transcript strong { color: #4d4038; font-size: 12px; }
.competitor-transcript small { display: block; margin-top: 5px; color: #a16946; font-size: 10px; line-height: 1.55; }
.competitor-transcript p { display: -webkit-box; overflow: hidden; margin: 7px 0 11px; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.competitor-transcript.loading { color: #9a704f; }
.competitor-transcript.error { color: #a34d46; }
.competitor-transcript > div { justify-content: flex-start; }
.competitor-transcript button { padding: 7px 10px; font-size: 11px; }
.competitor-empty { grid-column: 1 / -1; display: grid; gap: 7px; border: 1px dashed #dccdc0; background: #fffdf9; padding: 34px; color: #786b61; text-align: center; }
.competitor-empty strong { color: #55453b; }
.competitor-empty span { font-size: 12px; }

@media (max-width: 760px) {
  .competitor-native-head { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
  .competitor-native-head h2 { font-size: 25px; }
  .competitor-hero { grid-template-columns: 1fr; }.competitor-hero-copy { padding: 28px 24px; }.competitor-radar { min-height: 270px; padding: 14px 24px 22px; }.competitor-radar-stage { width: min(250px, 75vw); }.competitor-hot-ranking { grid-template-columns: 1fr; }.competitor-hot-ranking.dynamic { grid-template-columns: repeat(2, minmax(300px, 84vw)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }.competitor-trend-platform { scroll-snap-align: start; }.competitor-trend-platform + .competitor-trend-platform { border-left: 1px solid #eee3d9; }.competitor-hot-primary { min-height: 170px; }
  .competitor-search-bar { grid-template-columns: 1fr; }
  .competitor-search-preferences { align-items: flex-start; flex-direction: column; gap: 8px; }.competitor-search-preferences > div { align-items: flex-start; flex-direction: column; gap: 8px; }
  .competitor-video-grid { grid-template-columns: 1fr; }
  .sales-hero { align-items: flex-start; flex-direction: column; padding: 24px; }
  .sales-hero h2 { font-size: 27px; }
  .sales-hero-mark { width: 72px; height: 72px; font-size: 14px; }
  .sales-setup-grid { grid-template-columns: 1fr; }
  .sales-method-guide { padding: 20px 18px; }
  .sales-method-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .sales-method-heading strong { font-size: 18px; }
  .sales-method-heading p { text-align: left; }
  .sales-method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .sales-method-steps::before { display: none; }
  .sales-step-layout { grid-template-columns: 1fr; }
  .sales-step-nav { border-right: 0; border-bottom: 1px solid #e7ddd3; }
  .sales-step-nav > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sales-step-nav button { grid-template-columns: 20px minmax(0, 1fr); padding: 8px 5px; }
  .sales-step-nav button small { display: none; }
  .sales-step-workspace { padding: 18px 14px; }
  .sales-step-grid { grid-template-columns: 1fr; }
  .sales-step-header h2 { font-size: 22px; }
  .sales-chat-layout { grid-template-columns: 1fr; height: calc(100dvh - 210px); min-height: 520px; }
  .sales-scenario-panel { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; border-right: 0; border-bottom: 1px solid #e7ded4; padding: 12px; }
  .sales-scenario-panel > .link-button { grid-column: 1 / -1; margin-bottom: 2px; }
  .sales-scenario-card { padding: 10px; }
  .sales-progress-head, .sales-progress-track, .sales-six-steps, .sales-scenario-panel #endSalesSimulation { display: none; }
  .sales-chat-head { padding: 14px 16px; }
  .sales-messages { padding: 18px 16px 110px; }
  .sales-message { max-width: 86%; }
  .sales-composer { right: 12px; bottom: 12px; left: 12px; }
  .sales-emoji-picker { right: 0; width: min(286px, calc(100vw - 42px)); }
  .sales-review { inset: 68px 10px 10px; padding: 17px; }
  .sales-outcome-overlay { padding: 16px; }
  .sales-score-report-head, .sales-report-admin-title { align-items: flex-start; flex-direction: column; }
  .sales-score-total { text-align: left; }
  .sales-report-outcome { grid-template-columns: 1fr; gap: 4px; }
  .sales-score-dimensions, .sales-score-insights, .sales-report-admin-layout { grid-template-columns: 1fr; }
  .sales-discovery-force-grid { grid-template-columns: 1fr; }
  .sales-score-insights section + section { border-top: 1px solid #eadcd0; border-left: 0; margin-top: 12px; padding-top: 12px; padding-left: 0; }
  .sales-report-admin-layout { min-height: 0; }
  .sales-report-admin-list { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sales-report-admin-detail { padding: 16px; }
  .sales-report-admin-title time { text-align: left; }
}

/* Punk 微排参考工作区：保持编辑器、工具栏、预览三段式结构 */
.wechat-layout-workspace { min-height: 100dvh; color: #40352f; background: #f7f4ef; }
.wechat-layout-header { min-height: 72px; border-bottom: 1px solid #eaded5; background: #fffdfb; padding: 12px 22px; }
.wechat-brandbar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wechat-brandbar img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.wechat-brandbar strong { display: block; color: #3a271f; font-size: 16px; letter-spacing: -.04em; }
.wechat-brandbar small { display: block; margin-top: 2px; color: #9a8e84; font-family: Arial, sans-serif; font-size: 8px; letter-spacing: .12em; }
.wechat-brandbar p { margin-left: 12px; color: #85756b; font-size: 11px; }
.wechat-back-button { border: 0; color: #a85d2e; background: transparent; padding: 5px 8px; font-size: 19px; }
.wechat-layout-actions { max-width: none; flex: 0 0 auto; }
.wechat-layout-actions button { border-radius: 6px; padding: 8px 10px; font-size: 10px; }
.wechat-reference-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; border-bottom: 1px solid #eaded5; background: #fffdfb; padding: 8px 22px; }
.wechat-reference-tools, .wechat-reference-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.wechat-reference-tools button { border: 1px solid #ead8c9; border-radius: 6px; color: #8f4a2a; background: #fffaf4; padding: 7px 9px; font-size: 10px; cursor: pointer; }
.wechat-reference-tools button:hover { border-color: #b55e32; background: #fff3e9; }
.wechat-setting-compact { display: flex; align-items: center; gap: 5px; color: #6f7e94; font-size: 9px; }
.wechat-setting-compact input[type="range"] { width: 62px; margin: 0; accent-color: #b55e32; }
.wechat-setting-compact output { min-width: 28px; color: #8f4a2a; font-size: 9px; }
.wechat-reference-settings select { width: auto; min-width: 90px; margin: 0; border: 1px solid #dfe5ee; border-radius: 5px; background: #fff; padding: 6px 7px; color: #5f6f86; font-size: 9px; }
.wechat-setting-color { display: flex; align-items: center; gap: 4px; color: #6f7e94; font-size: 9px; }
.wechat-setting-color button { width: 21px; height: 21px; border: 1px solid #dfe5ee; border-radius: 50%; color: #72829b; background: #fff; padding: 0; font-size: 9px; }
.wechat-setting-color button.active { border-color: #b55e32; color: #fff; background: #b55e32; }
.wechat-setting-color input[type="color"] { width: 23px; height: 22px; margin: 0; border: 0; padding: 0; background: transparent; }
.wechat-contrast-badge { border-radius: 999px; color: #2f7c50; background: #e9f7ef; padding: 4px 7px; font-size: 9px; }
.wechat-chapter-style { border-left: 1px solid #e5eaf2; color: #78879d; padding-left: 10px; font-size: 9px; }
.wechat-chapter-style strong { color: #8f4a2a; font-weight: 700; }
.wechat-layout-grid { grid-template-columns: minmax(390px, 42%) minmax(0, 58%); height: calc(100dvh - 124px); min-height: 620px; }
.wechat-layout-controls { border-right: 1px solid #eaded5; background: #fffdfb; padding: 0 24px 34px; }
.wechat-layout-controls::before { display: block; margin: 0 -24px 18px; border-bottom: 4px solid #f6dfaa; background: #b55e32; padding: 10px 24px; color: #fff; content: 'MARKDOWN / TXT     原稿'; font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.wechat-layout-step { margin-top: 16px; }
.wechat-layout-step:not(:first-child) { margin-top: 20px; }
.wechat-layout-step b { width: 24px; height: 24px; border-radius: 4px; color: #b55e32; background: #fff0e4; font-size: 9px; }
.wechat-layout-step strong { color: #40352f; font-size: 12px; }
.wechat-layout-step small { color: #85756b; }
#wechatLayoutArticle { min-height: 330px; border-color: #ead8c9; border-radius: 4px; background: #fffdfb; color: #40352f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.75; }
#wechatLayoutArticle:focus { border-color: #c88761; box-shadow: 0 0 0 3px rgba(181, 94, 50, .1); }
.wechat-editor-footer { display: flex; gap: 14px; margin-top: 8px; color: #9a8e84; font-size: 9px; }
.wechat-editor-footer span:first-child { color: #8f4a2a; }
.wechat-import-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wechat-output-mode, .wechat-theme-picker, .wechat-editor-tools, .wechat-layout-controls > .wechat-layout-step:nth-of-type(n+2), .wechat-import-actions, #selectWechatLayoutImages, #wechatLayoutImageList, .wechat-layout-generate, .wechat-layout-note { /* 保留旧功能，按参考站收进左栏 */ }
.wechat-output-mode button, .wechat-theme-picker button { border-radius: 5px; }
.wechat-theme-picker [data-wechat-theme="punk"] > span { background: linear-gradient(180deg, #b55e32 0 42%, #f6dfaa 42%); }
.wechat-theme-picker button:hover, .wechat-theme-picker button.active { border-color: #b55e32; color: #3a271f; background: #fff9f2; box-shadow: 0 0 0 2px rgba(181, 94, 50, .10); }
.wechat-editor-tools { margin-top: 16px; border-top-color: #eaded5; }
.wechat-preview-panel, .wechat-layout-preview-panel { background: #f1ede8; }
.wechat-preview-toolbar { height: 52px; border-bottom-color: #ead8c9; background: #b55e32; padding: 0 20px; }
.wechat-preview-toolbar strong { color: #fff; }
.wechat-preview-toolbar small, .wechat-preview-toolbar em { color: #fceadb; }
.wechat-preview-toolbar div > span { background: #f6dfaa; box-shadow: 13px 0 #fff, 26px 0 rgba(255,255,255,.55); }
.wechat-preview-actions button { border-color: rgba(255,255,255,.45); }
.wechat-preview-actions .primary { border-color: #f6dfaa; color: #704020; background: #f6dfaa; }
.wechat-preview-shell { height: calc(100% - 52px); background-color: #f7f3ee; background-image: radial-gradient(#e6d9ce 1px, transparent 1px); background-size: 12px 12px; padding: 28px; }
#wechatLayoutPreview { width: min(677px, 100%); box-shadow: 0 18px 45px rgba(113, 58, 25, .14); }
.wechat-preview-empty { min-height: 480px; border-color: #dcc9bb; background: rgba(255,255,255,.8); }
.wechat-preview-empty b { border-color: #d39b79; color: #b55e32; }
.wechat-preview-empty strong { color: #5a4338; }
.wechat-layout-workspace.wechat-focus-preview .wechat-layout-header,
.wechat-layout-workspace.wechat-focus-preview .wechat-reference-toolbar,
.wechat-layout-workspace.wechat-focus-preview .wechat-layout-controls { display: none; }
.wechat-layout-workspace.wechat-focus-preview .wechat-layout-grid { grid-template-columns: 1fr; height: 100dvh; }
.wechat-layout-workspace.wechat-focus-preview .wechat-layout-preview-panel { grid-column: 1; }
.wechat-reference-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; background: rgba(62, 24, 8, .35); padding: 20px; }
.wechat-reference-modal.hidden { display: none; }
.wechat-reference-modal-card { position: relative; width: min(620px, 100%); max-height: min(760px, 90vh); overflow: auto; border: 1px solid #ead8c9; border-radius: 10px; background: #fffdfb; padding: 28px; box-shadow: 0 24px 80px rgba(87, 54, 33, .22); }
.wechat-reference-modal-close { position: absolute; top: 12px; right: 14px; border: 0; color: #9a8e84; background: transparent; font-size: 22px; }
.wechat-reference-modal-kicker { color: #b55e32; font-family: Arial, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.wechat-reference-modal-card h2 { margin: 9px 0; color: #3a271f; font-size: 23px; }
.wechat-reference-modal-card p { color: #85756b; font-size: 12px; line-height: 1.7; }
.wechat-reference-modal-body { margin-top: 18px; }
.wechat-reference-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.wechat-reference-palette-grid button { border: 1px solid #e0e6f0; border-radius: 7px; background: #fff; padding: 12px; text-align: left; }
.wechat-reference-palette-grid button:hover { border-color: #b55e32; background: #fff5ee; }
.wechat-reference-palette-grid span { display: block; height: 24px; margin-bottom: 8px; border-radius: 4px; }
.wechat-reference-modal-body textarea { min-height: 120px; }
@media (max-width: 900px) {
  .wechat-reference-toolbar { align-items: flex-start; flex-direction: column; }
  .wechat-reference-settings { width: 100%; }
  .wechat-layout-grid { grid-template-columns: 1fr; height: auto; }
  .wechat-layout-controls { max-height: none; border-right: 0; border-bottom: 1px solid #eaded5; }
  .wechat-layout-preview-panel { min-height: 640px; }
  .wechat-brandbar p { display: none; }
}

/* 公众号独立工作台：与短视频文案广场分区，文案和排版在同一入口内并列呈现 */
.copy-gallery-view #copyAgentGrid [data-wechat-only="true"] { display: none !important; }
.wechat-hub { min-height: calc(100dvh - 110px); padding: 34px 42px 54px; background: #f7f4ef; color: #2e2521; }
.wechat-hub-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; max-width: 1180px; margin: 0 auto 28px; border-bottom: 1px solid #ded3c8; padding-bottom: 25px; }
.wechat-hub-hero .eyebrow { color: #b55e32; letter-spacing: .16em; }
.wechat-hub-hero h2 { margin: 8px 0 4px; color: #3a271f; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.045em; }
.wechat-hub-hero p { margin: 0; color: #85756b; font-size: 14px; }
.wechat-hub-mark { display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid #c8ad98; border-radius: 50%; color: #b55e32; background: #fffaf4; font-family: Georgia, serif; font-size: 36px; transform: rotate(-8deg); }
.wechat-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; }
.wechat-hub-card { display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); min-height: 270px; overflow: hidden; border: 1px solid #e2d8ce; border-radius: 8px; background: #fffdfb; box-shadow: 0 12px 30px rgba(87, 54, 33, .06); transition: transform .2s ease, box-shadow .2s ease; }
.wechat-hub-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(87, 54, 33, .12); }
.wechat-hub-card-art { min-height: 100%; overflow: hidden; background: #ece4db; }
.wechat-hub-card-art img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; transition: transform .3s ease; }
.wechat-hub-card:hover .wechat-hub-card-art img { transform: scale(1.035); }
.wechat-hub-card-layout .wechat-hub-card-art { background: #eee0bd; }
.wechat-hub-card-body { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 26px 24px; }
.wechat-hub-card-body .eyebrow { color: #b55e32; font-size: 10px; letter-spacing: .12em; }
.wechat-hub-card-body h3 { margin: 12px 0 10px; color: #382720; font-family: Georgia, 'Times New Roman', serif; font-size: 27px; letter-spacing: -.04em; }
.wechat-hub-card-body p { margin: 0; color: #786960; font-size: 14px; line-height: 1.8; }
.wechat-hub-card-body button { margin-top: auto; border-radius: 3px; padding: 10px 15px; }
.wechat-hub-card-body button span { margin-left: 12px; }
.wechat-hub-tip { display: flex; align-items: center; gap: 15px; max-width: 1180px; margin: 24px auto 0; border-left: 3px solid #c1815c; background: #fbf5ee; padding: 13px 17px; color: #806f65; font-size: 13px; line-height: 1.7; }
.wechat-hub-tip strong { flex: 0 0 auto; color: #49352b; }
.wechat-hub-empty .wechat-hub-tip { display: none; }
.wechat-hub-empty .wechat-hub-grid::after { display: block; grid-column: 1 / -1; border: 1px dashed #d9c9ba; border-radius: 8px; background: #fffdfb; padding: 46px 20px; color: #8d7e74; content: '当前没有已上架的公众号智能体，请联系管理员。'; text-align: center; }
@media (max-width: 800px) {
  .wechat-hub { padding: 24px 16px 40px; }
  .wechat-hub-hero { align-items: flex-start; }
  .wechat-hub-mark { width: 56px; height: 56px; font-size: 28px; }
  .wechat-hub-grid { grid-template-columns: 1fr; }
  .wechat-hub-card { grid-template-columns: 110px minmax(0, 1fr); min-height: 210px; }
  .wechat-hub-card-art img { min-height: 210px; }
  .wechat-hub-card-body { padding: 20px 17px 17px; }
  .wechat-hub-card-body h3 { margin: 8px 0; font-size: 23px; }
  .wechat-hub-card-body p { font-size: 13px; }
  .wechat-hub-tip { align-items: flex-start; flex-direction: column; gap: 4px; }
}