:root {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #24302f;
  background: #d7c8b9;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
html,
body,
#app {
  margin: 0;
  min-height: 100%;
  width: 100%;
}
button,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
button:focus-visible,
textarea:focus-visible,
.carousel:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 3px;
}
::selection {
  background: #a8c9bc;
  color: #183b32;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-shell {
  --page-bg: #d7c8b9;
  min-height: 100dvh;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 480ms cubic-bezier(0.2, 0.82, 0.24, 1);
}
.site-head {
  height: 74px;
  flex: none;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
/* The bar is a stacking context below the cards (100+); while one of its menus is open it sits above all of them. */
.site-head.menu-open {
  z-index: 500;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 730;
  letter-spacing: -0.035em;
}
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #29423b;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  transform: rotate(-9deg);
}
.brand-mark i {
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
}
.brand-mark i:nth-child(2) {
  transform: translateY(-3px);
}
.head-note {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #3d4e4a;
}
.main-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  position: relative;
}
.carousel {
  position: relative;
  width: 100%;
  height: min(670px, calc(100dvh - 185px));
  min-height: 420px;
  touch-action: pan-y;
  outline-offset: -8px;
}
.card-deck {
  position: relative;
  width: 100%;
  height: 100%;
  --drag-x: 0px;
}
.card-slot {
  --slot: 0;
  --side-offset: min(27vw, 330px);
  --scale: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(376px, calc(100vw - 108px));
  height: min(558px, calc(100dvh - 213px));
  min-height: 380px;
  transform: translate(-50%, -50%) translateX(calc(var(--slot) * var(--side-offset) + var(--drag-x)))
    scale(var(--scale));
  z-index: calc(5 - var(--slot) * var(--slot));
  cursor: pointer;
  transition:
    transform 370ms cubic-bezier(0.2, 0.82, 0.24, 1),
    opacity 260ms ease;
  will-change: transform;
}
.card-slot:not(.is-active) {
  --scale: 0.89;
  opacity: 0.86;
}
.card-slot.is-active {
  z-index: 10;
  opacity: 1;
}
.card-shell {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f1f2f0;
  box-shadow:
    0 22px 55px rgba(44, 51, 47, 0.19),
    0 4px 11px rgba(44, 51, 47, 0.09);
  transition:
    transform 170ms cubic-bezier(0.2, 0.82, 0.24, 1),
    box-shadow 170ms ease;
}
.card-slot.is-active.is-hovered:not(.is-chat) .card-shell {
  transform: scale(1.025);
  box-shadow:
    0 28px 65px rgba(44, 51, 47, 0.22),
    0 5px 14px rgba(44, 51, 47, 0.1);
}
.card-slot:not(.is-active) .card-shell {
  box-shadow: 0 16px 36px rgba(44, 51, 47, 0.13);
}
.chat-head {
  height: 64px;
  flex: none;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: #f8f9f7;
  border-bottom: 1px solid #e1e6e2;
}
.chat-head strong {
  font-size: 17px;
  font-weight: 650;
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-weight: 720;
  letter-spacing: -0.04em;
  user-select: none;
}
.head-avatar {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 17px;
}
.icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #29453d;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex: none;
}
.icon-button:hover {
  background: #e8eeea;
}
.icon-button:active {
  transform: scale(0.96);
}
/* Part 25a: the hand-lettered wordmark and names (.hand) size themselves from their view box. */
svg:where(:not(.hand)) {
  width: 23px;
  height: 23px;
}
.back-button {
  margin-left: -8px;
}
.chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 44px 22px 24px;
  overscroll-behavior: contain;
  scrollbar-color: #b7c4bb transparent;
  scrollbar-width: thin;
}
.message-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
}
.message-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 18px;
  flex: none;
}
.voice-stack {
  max-width: calc(100% - 47px);
}
.voice-bubble {
  min-width: 175px;
  max-width: 100%;
  background: #fff;
  border-radius: 4px 15px 15px 15px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 7px 4px 3px;
  box-shadow: 0 1px 3px rgba(29, 48, 39, 0.08);
}
.voice-bubble:before {
  content: "";
  position: absolute;
  top: 8px;
  left: -6px;
  border-top: 7px solid #fff;
  border-left: 7px solid transparent;
}
.play-button {
  border: 0;
  background: transparent;
  color: #2d5149;
  min-width: 116px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 9px;
  border-radius: 10px;
}
.play-button svg {
  width: 20px;
  height: 20px;
}
.play-button:hover {
  background: #f0f5f1;
}
.play-button:active {
  transform: scale(0.97);
}
.sound-bars svg {
  width: 38px;
  color: #6c9688;
}
.play-button[data-playing="true"] {
  background: #e3efe8;
}
.play-button[data-playing="true"] .sound-bars svg {
  color: #3a7667;
}
.transcript-toggle {
  border: 0;
  background: transparent;
  min-width: 58px;
  min-height: 44px;
  color: #3a7667;
  font-size: 12px;
  white-space: nowrap;
  padding: 0 4px;
}
.transcript-toggle:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.transcript {
  margin: 7px 0 0;
  padding: 11px 13px;
  border-radius: 3px 12px 12px 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  max-width: 245px;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 3px rgba(29, 48, 39, 0.06);
}
.transcript[hidden] {
  display: none;
}
.outgoing {
  justify-content: flex-end;
}
.text-bubble {
  background: #dce8df;
  border-radius: 15px 4px 15px 15px;
  padding: 10px 14px;
  margin: 0;
  max-width: 78%;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.message-row.incoming .incoming-text {
  background: #fff;
  border-radius: 4px 15px 15px 15px;
  max-width: calc(100% - 47px);
}
.composer {
  flex: none;
  min-height: 72px;
  background: #f8f9f7;
  border-top: 1px solid #e1e6e2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
}
.composer textarea {
  min-height: 44px;
  max-height: 104px;
  resize: none;
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid #d9e2da;
  border-radius: 12px;
  background: #fff;
  color: #24302f;
  font-size: 16px;
  line-height: 1.4;
  outline: none;
}
.composer textarea::placeholder {
  color: #65736d;
}
.composer textarea:focus {
  border-color: #5b8c78;
  box-shadow: 0 0 0 3px rgba(91, 140, 120, 0.13);
}
.send-button {
  display: none;
  background: #dce8df;
}
.send-button:disabled {
  opacity: 0.43;
}
.avatar-nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 2px 16px 16px;
  position: relative;
  z-index: 11;
}
.avatar-choice {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  min-width: 60px;
  padding: 6px;
  color: #263831;
  font-size: 12px;
}
.avatar-choice-mark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 20px;
  box-shadow: 0 3px 8px rgba(35, 50, 44, 0.11);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}
.avatar-choice:hover .avatar-choice-mark {
  transform: translateY(-2px);
}
.avatar-choice.selected .avatar-choice-mark {
  outline: 2px solid #294b40;
  outline-offset: 3px;
}
.avatar-name {
  font-weight: 570;
}
.preview-note {
  min-height: 32px;
  text-align: center;
  padding: 0 14px 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #43534d;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  padding: 11px 16px;
  border-radius: 12px;
  background: #273d36;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 26px rgba(22, 40, 31, 0.2);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  z-index: 200;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.page-shell[data-phase="chat"] .card-slot:not(.is-chat),
.page-shell[data-phase="expanding"] .card-slot:not(.is-chat) {
  opacity: 0;
  pointer-events: none;
}
.page-shell[data-phase="chat"] .card-slot.is-chat,
.page-shell[data-phase="expanding"] .card-slot.is-chat {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(440px, calc(100vw - 22px));
  height: min(760px, calc(100dvh - 22px));
  min-height: 0;
  transform: translate(-50%, -50%) scale(1);
  z-index: 100;
  cursor: default;
}
.card-slot.is-chat .chat-head {
  display: flex;
}
.card-slot.is-chat .chat-body {
  padding-top: 24px;
}
.card-slot.is-chat .send-button {
  display: grid;
}
.page-shell[data-phase="chat"] .avatar-nav,
.page-shell[data-phase="expanding"] .avatar-nav {
  position: fixed;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  background: rgba(248, 249, 247, 0.98);
  border-radius: 17px;
  padding: 3px 10px;
  box-shadow: 0 4px 16px rgba(32, 50, 38, 0.12);
}
.page-shell[data-phase="chat"] .avatar-choice-mark,
.page-shell[data-phase="expanding"] .avatar-choice-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 16px;
}
.page-shell[data-phase="chat"] .avatar-name,
.page-shell[data-phase="expanding"] .avatar-name {
  display: none;
}
.page-shell[data-phase="chat"] .preview-note,
.page-shell[data-phase="expanding"] .preview-note {
  visibility: hidden;
}
.carousel.is-dragging .card-slot {
  transition: none;
}
@media (max-width: 600px) {
  .site-head {
    height: 62px;
    padding: 0 19px;
  }
  .head-note {
    font-size: 11px;
  }
  .brand {
    font-size: 16px;
  }
  .carousel {
    height: calc(100dvh - 166px);
    min-height: 390px;
  }
  .card-slot {
    --side-offset: calc(100vw - 86px);
    width: min(360px, calc(100vw - 96px));
    height: calc(100dvh - 200px);
    min-height: 375px;
  }
  .card-slot:not(.is-active) {
    --scale: 0.94;
  }
  .chat-body {
    padding: 34px 13px 18px;
  }
  .composer {
    padding-inline: 9px;
  }
  .avatar-nav {
    padding-bottom: 9px;
  }
  .preview-note {
    font-size: 10px;
    padding-bottom: 5px;
  }
  .page-shell[data-phase="chat"] .card-slot.is-chat,
  .page-shell[data-phase="expanding"] .card-slot.is-chat {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .page-shell[data-phase="chat"] .card-shell,
  .page-shell[data-phase="expanding"] .card-shell {
    border-radius: 0;
  }
  .page-shell[data-phase="chat"] .site-head,
  .page-shell[data-phase="expanding"] .site-head {
    visibility: hidden;
  }
  .page-shell[data-phase="chat"] .avatar-nav,
  .page-shell[data-phase="expanding"] .avatar-nav {
    bottom: max(6px, env(safe-area-inset-bottom));
  }
  .page-shell[data-phase="chat"] .composer,
  .page-shell[data-phase="expanding"] .composer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 360px) {
  .card-slot {
    --side-offset: calc(100vw - 73px);
    width: calc(100vw - 64px);
  }
  .head-note {
    display: none;
  }
  .voice-bubble {
    min-width: 0;
  }
  .play-button {
    min-width: 92px;
    gap: 6px;
  }
  .chat-body {
    padding-inline: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card-slot.is-active.is-hovered .card-shell {
    transform: none;
  }
  .page-shell {
    transition: none;
  }
}

/* Fifteen positions travel around one visual orbit. The nearest five keep the
   same .382-card-width center spacing; the other ten recede behind them. */
.carousel {
  height: min(630px, calc(100dvh - 235px));
  min-height: 350px;
}
.card-slot {
  --orbit-x: 0px;
  --orbit-y: 0px;
  --orbit-scale: 1;
  --orbit-opacity: 1;
  --wash: 0%;
  transform: translate(-50%, -50%) translateX(calc(var(--orbit-x) + var(--drag-x))) translateY(var(--orbit-y))
    scale(var(--orbit-scale));
  opacity: var(--orbit-opacity);
  transition:
    transform 270ms cubic-bezier(0.77, 0, 0.175, 1),
    opacity 220ms ease;
}
.card-slot:not(.is-active) {
  --scale: 1;
  opacity: var(--orbit-opacity);
}
.card-slot.orbit-wrap,
.carousel.is-dragging .card-slot {
  transition: none;
}
.card-shell {
  background: color-mix(in srgb, #f1f2f0 87%, var(--card-color) 13%);
}
.card-slot:not(.is-active) .card-shell {
  background: color-mix(in srgb, #f1f2f0 95%, var(--card-color) 5%);
}
.friend-notice {
  margin: 0 0 24px;
  text-align: center;
  color: #6a7772;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.card-slot:not(.is-chat) .chat-body {
  padding-top: 18px;
}
.reserve-state {
  min-height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #6b7972;
  font-size: 14px;
}
.card-slot:not(.is-active) .reserve-state {
  visibility: hidden;
}
.reserve-state p {
  margin: 0;
}
.reserve-symbol {
  width: 54px;
  height: 54px;
  border: 2px solid #aebcb3;
  border-radius: 50%;
  display: block;
  position: relative;
}
.reserve-symbol:after {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  width: 7px;
  height: 7px;
  background: #aebcb3;
  border-radius: 50%;
}
.composer[hidden] {
  display: none;
}
.avatar-nav {
  position: relative;
  display: block;
  width: min(510px, 100%);
  height: 130px;
  padding: 0;
  flex: none;
  perspective: 600px;
}
.avatar-choice {
  position: absolute;
  left: 50%;
  top: 0;
  width: 60px;
  height: 60px;
  min-width: 60px;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, 0) translateX(var(--avatar-x)) translateY(var(--avatar-y));
  opacity: var(--avatar-opacity);
  transition:
    transform 270ms cubic-bezier(0.77, 0, 0.175, 1),
    opacity 220ms ease;
}
.avatar-choice-mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 22px;
  transform: scale(var(--avatar-scale));
  background: color-mix(in srgb, var(--avatar-bg), white var(--wash));
  box-shadow: 0 7px 17px rgba(35, 50, 44, 0.16);
  transition: transform 180ms ease;
}
.avatar-choice:hover .avatar-choice-mark {
  transform: scale(calc(var(--avatar-scale) * 1.055));
}
.avatar-choice.selected .avatar-choice-mark {
  outline: 2px solid #294b40;
  outline-offset: 3px;
}
.avatar-name {
  display: none;
}
.reserve-dot {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.7;
}
.page-shell[data-phase="chat"] .avatar-nav,
.page-shell[data-phase="expanding"] .avatar-nav {
  height: 60px;
  width: min(440px, calc(100vw - 24px));
  padding: 0;
}
.page-shell[data-phase="chat"] .avatar-choice,
.page-shell[data-phase="expanding"] .avatar-choice {
  transform: translate(-50%, 0) translateX(var(--avatar-chat-x));
  height: 52px;
  width: 52px;
  min-width: 52px;
}
.page-shell[data-phase="chat"] .avatar-choice-mark,
.page-shell[data-phase="expanding"] .avatar-choice-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 18px;
}
@media (max-width: 600px) {
  .carousel {
    height: calc(100dvh - 218px);
    min-height: 370px;
  }
  .card-slot {
    height: calc(100dvh - 250px);
    min-height: 340px;
  }
  .avatar-nav {
    height: 110px;
  }
  .avatar-choice {
    top: 0;
  }
  .avatar-choice-mark {
    width: 54px;
    height: 54px;
  }
  .friend-notice {
    font-size: 11px;
  }
  .page-shell[data-phase="chat"] .avatar-nav,
  .page-shell[data-phase="expanding"] .avatar-nav {
    height: 58px;
  }
}
@media (max-width: 360px) {
  .friend-notice {
    font-size: 10px;
    letter-spacing: -0.02em;
  }
}
.carousel:focus-visible {
  outline: 0;
}
.carousel:focus-visible .card-slot.is-active .card-shell {
  outline: 3px solid #24584e;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .card-slot:not(.is-active) {
    visibility: hidden;
    pointer-events: none;
  }
  .page-shell {
    height: 100dvh;
    min-height: 0;
  }
  .main-area {
    justify-content: flex-start;
  }
  .carousel {
    flex: 1;
    min-height: 0;
    height: auto;
  }
  .card-slot {
    height: calc(100% - 24px);
    min-height: 0;
  }
  .card-slot.is-active.is-hovered:not(.is-chat) .card-shell {
    transform: none;
  }
}
/* Safari's square tap overlay is not our focus indicator. Preserve keyboard focus. */
.avatar-choice {
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.avatar-choice:active .avatar-choice-mark {
  filter: brightness(0.93);
}

/* The browse orbit has no place in an opened conversation. */
.page-shell[data-phase="chat"] .avatar-nav,
.page-shell[data-phase="expanding"] .avatar-nav,
.page-shell[data-phase="collapsing"] .avatar-nav {
  display: none;
}
/* Expanding owns the fade; settled chat removes inactive layers from paint. */
.page-shell[data-phase="chat"] .card-slot:not(.is-chat) {
  display: none;
}
.chat-head {
  position: relative;
}
.chat-head strong {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 112px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 600px) {
  html.chat-open,
  html.chat-open body,
  html.chat-open #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #f1f2f0;
  }
  .page-shell[data-phase="chat"],
  .page-shell[data-phase="expanding"] {
    background: color-mix(in srgb, #f1f2f0 87%, var(--page-bg) 13%);
    min-height: 100dvh;
  }
  .page-shell[data-phase="chat"] .site-head,
  .page-shell[data-phase="expanding"] .site-head,
  .page-shell[data-phase="chat"] .preview-note,
  .page-shell[data-phase="expanding"] .preview-note {
    display: none;
  }
  .page-shell[data-phase="chat"] .card-slot.is-chat,
  .page-shell[data-phase="expanding"] .card-slot.is-chat {
    width: var(--chat-width, 100vw);
    height: var(--chat-height, 100dvh);
    max-width: none;
    left: var(--chat-left, 50%);
    top: var(--chat-top, 50%);
    border-radius: 0;
    box-shadow: none;
    transform: translate(-50%, -50%) scale(1);
  }
  .page-shell[data-phase="chat"] .card-slot.is-chat .card-shell,
  .page-shell[data-phase="expanding"] .card-slot.is-chat .card-shell {
    border-radius: 0;
    box-shadow: none;
  }
  .page-shell[data-phase="chat"] .composer,
  .page-shell[data-phase="expanding"] .composer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* Explicit local-2 test mode; the default fifteen-slot visual prototype is untouched. */

/* Standalone invite form: not mounted by either the preview or local-2 entry. */

/* Separate admin-only shell; never mounted in a player route. */
.invite-admin-page {
  width: min(460px, 100%);
  padding: 24px;
  border-radius: 18px;
  background: #f1f2f0;
  color: #24302f;
  box-shadow: 0 12px 32px rgba(44, 51, 47, 0.12);
}
.invite-admin-page [hidden] {
  display: none;
}
.invite-admin-page h1 {
  font-size: 22px;
  margin: 0 0 20px;
}

.invite-admin-page label {
  font-size: 14px;
  font-weight: 620;
}
.invite-admin-page input {
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #bacac1;
  border-radius: 12px;
  background: #fff;
  color: #24302f;
  font-size: 16px;
}
.invite-admin-page button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  background: #294b40;
  color: #fff;
  align-self: flex-start;
}
.invite-admin-page button:disabled {
  opacity: 0.5;
}
.invite-admin-page button:focus-visible,
.invite-admin-page input:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 3px;
}

.invite-admin-status {
  font-size: 13px;
  line-height: 1.5;
  color: #405c61;
  margin: 0;
}
.invite-admin-result {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #bacac1;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-wrap: anywhere;
}
.invite-admin-result span {
  font-size: 12px;
  color: #405c61;
}
.invite-admin-code {
  font-size: 18px;
  letter-spacing: 0.04em;
}

.invite-admin-status {
  min-height: 20px;
  margin-top: 14px;
}
@media (max-width: 600px) {
  .invite-admin-page {
    border-radius: 0;
    box-shadow: none;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  }
}

.account-admin-page {
  width: min(620px, 100%);
  border-radius: 16px;
  overflow-wrap: anywhere;
}
.account-admin-page form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}
.account-admin-page h2 {
  font-size: 18px;
  margin: 24px 0 12px;
}
.account-admin-page h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.account-admin-page p {
  font-size: 14px;
  line-height: 1.6;
  color: #405c61;
  margin: 10px 0;
}
.account-admin-page input:not([type="checkbox"]),
.account-admin-page select {
  width: 100%;
  min-width: 0;
}
.account-admin-page select {
  min-height: 48px;
  padding: 10px;
  border: 1px solid #bacac1;
  border-radius: 12px;
  background: #fff;
  color: #24302f;
  font-size: 14px;
}
.account-admin-page input[type="checkbox"] {
  min-height: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0 9px 0 0;
  accent-color: #294b40;
  vertical-align: middle;
  flex-shrink: 0;
}
.account-admin-page fieldset {
  border: 1px solid #bacac1;
  border-radius: 12px;
  padding: 12px;
  margin: 4px 0;
  min-width: 0;
}
.account-admin-page fieldset label,
.admin-member label {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.5;
}
.account-admin-page legend {
  font-size: 14px;
  padding: 0 4px;
}
.account-admin-page button {
  line-height: 1.5;
  padding: 10px 15px;
  text-align: left;
}
.admin-nav,
.admin-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.admin-nav {
  padding-bottom: 18px;
  border-bottom: 1px solid #bacac1;
}
.admin-nav button,
.admin-links button,
.account-admin-page .admin-back,
.account-admin-page .admin-secondary {
  background: #e1e9e3;
  color: #294b40;
}
.admin-nav button[aria-current="page"] {
  background: #294b40;
  color: #fff;
}
.account-admin-page button:hover:not(:disabled) {
  filter: brightness(0.94);
}
.account-admin-page .admin-identity:empty {
  display: none;
}
.admin-member {
  border-top: 1px solid #bacac1;
  margin-top: 20px;
  padding-top: 20px;
}
.admin-member button {
  display: block;
  margin-top: 10px;
}
.account-admin-page .invite-admin-status {
  margin-top: 20px;
  min-height: 24px;
}
.account-admin-page ::selection {
  background: #c7dfd4;
  color: #173c30;
}
.account-admin-page input {
  caret-color: #294b40;
}
.account-admin-page select:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 3px;
}

/* local-3 keeps the invite form outside the private chat surface until trusted install. */

.local-admin-root {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #c7d1d3;
}
@media (max-width: 600px) {
  .local-admin-root {
    padding: 0;
    align-items: start;
  }
}

/* Provider-live additions: keep to the existing palette and bubble language. */
.invite-entry {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.invite-dialog {
  border: none;
  border-radius: 18px;
  padding: 20px;
  width: min(320px, calc(100vw - 32px));
}
.invite-dialog::backdrop {
  background: rgba(0, 0, 0, 0.28);
}
.invite-dialog form {
  display: grid;
  gap: 12px;
}
.invite-dialog input {
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #c9c9c9;
}
.invite-state {
  margin: 0;
  color: #35433e;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.invite-state:empty {
  display: none;
}
.invite-actions {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.invite-actions button {
  min-height: 44px;
  font: inherit;
  border-radius: 999px;
  padding: 6px 16px;
  border: 1px solid #bdbdbd;
  background: #fff;
}
.invite-actions button[type="submit"] {
  background: #222;
  color: #fff;
  border-color: #222;
}
.invite-actions button:disabled {
  opacity: 0.55;
  cursor: default;
}
.voice-seconds {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.72;
}
.message-row.not-sent,
.message-row.delivery-unconfirmed {
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.message-send-state {
  max-width: 100%;
  color: #615044;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.site-head:has(.invite-entry) .head-note {
  margin-left: auto;
  margin-right: 12px;
}

/* Function-first administration: explicit scopes, compact closed rows, no implied grants. */
.account-admin-page[data-surface="members"] {
  width: min(900px, 100%);
}
.account-admin-page details > summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 620;
}
.account-admin-page summary:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 3px;
}
.account-admin-page .admin-member {
  margin-top: 8px;
  padding-top: 0;
}
.account-admin-page .admin-member > summary {
  font-size: 16px;
}
.account-admin-page .permission-help {
  margin: 0 0 12px 29px;
  font-size: 13px;
  max-width: 70ch;
}
.account-admin-page .admin-confirm {
  margin: 16px 0;
  color: #863d2e;
  border-top: 1px solid #c5b4ac;
}
.account-admin-page .admin-confirm > button {
  background: #863d2e;
  color: #fff;
}
.account-admin-page .admin-new-member {
  margin: 20px 0;
  border-bottom: 1px solid #bacac1;
}
.account-admin-page h4 {
  font-size: 15px;
  margin: 24px 0 8px;
}
.account-admin-page {
  scrollbar-color: #718c7f #e1e9e3;
}

/* Character operations retain the account shell, with editable drafts separate from publication. */
.account-admin-page[data-surface="characters"] {
  width: min(1080px, 100%);
}
.account-admin-page .character-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  column-gap: 28px;
}
.account-admin-page .character-directory-row,
.account-admin-page .character-deletion-row {
  padding: 20px 0;
  border-bottom: 1px solid #bacac1;
}
.account-admin-page .admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.account-admin-page .character-profile-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 620;
  margin: 10px 0;
  align-items: stretch;
}
.account-admin-page .character-profile-form .admin-check,
.account-admin-page .admin-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-height: 44px;
}
.account-admin-page textarea {
  width: 100%;
  min-width: 0;
  min-height: 110px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #bacac1;
  border-radius: 12px;
  background: #fff;
  color: #24302f;
  font-size: 16px;
  line-height: 1.6;
  caret-color: #294b40;
}
.account-admin-page textarea:disabled,
.account-admin-page input:disabled {
  background: #e7ece8;
  color: #53675c;
}
.account-admin-page .admin-json,
.account-admin-page pre {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.account-admin-page .character-flow {
  border-top: 1px solid #bacac1;
  margin-top: 24px;
  padding-top: 12px;
}
.account-admin-page .character-flow > details {
  padding: 8px 0;
  border-bottom: 1px solid #bacac1;
}
.account-admin-page .character-flow > details > summary {
  font-size: 16px;
}
.account-admin-page .character-flow label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0;
}
.account-admin-page .character-flow label.admin-check {
  flex-direction: row;
}
.account-admin-page .character-flow button {
  margin: 8px 8px 8px 0;
}
.account-admin-page .profile-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.account-admin-page .profile-diff pre {
  background: #e7ede8;
  padding: 12px;
  border-radius: 8px;
}
.account-admin-page audio {
  width: min(420px, 100%);
  margin: 10px 0;
}

.provider-start-error {
  width: min(480px, calc(100% - 40px));
  margin: 20vh auto 40px;
  color: #24302f;
  overflow-wrap: anywhere;
}
.provider-start-error h1 {
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 16px;
}
.provider-start-error p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px;
}
.provider-start-error button {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: #294b40;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.provider-start-error button:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 3px;
}
.provider-start-error button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.account-admin-page .admin-password-field {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.account-admin-page .admin-password-field input {
  flex: 1;
  min-width: 0;
  width: 0;
}
.account-admin-page .admin-password-field button {
  flex-shrink: 0;
  align-self: stretch;
  white-space: nowrap;
}

/* One-time recovery code sheet and entry. */

/* ⋯ menu in the chat header (co-creation entry). Same palette as the cards; items are read when it opens. */
.chat-more {
  margin-left: auto;
  margin-right: -8px;
}
.chat-menu {
  position: absolute;
  right: 10px;
  top: calc(100% - 6px);
  z-index: 30;
  min-width: 236px;
  max-width: calc(100% - 20px);
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 14px 38px rgba(32, 48, 42, 0.2),
    0 2px 6px rgba(32, 48, 42, 0.08);
  animation: chat-menu-in 160ms cubic-bezier(0.2, 0.82, 0.24, 1);
  transform-origin: top right;
}
@keyframes chat-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
}
.chat-menu-item {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  text-align: left;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 11px;
  color: #24302f;
}
.chat-menu-item:hover:not(:disabled),
.chat-menu-item:focus-visible {
  background: #eef3ef;
}
.chat-menu-title {
  font-size: 15px;
  font-weight: 650;
}
.chat-menu-sub {
  font-size: 12.5px;
  color: #5d6e67;
}
.chat-menu-item:disabled {
  opacity: 0.58;
}

/* 共创 sheet: a full-height deck of inspiration cards in the character's own colour. */
html.cc-open,
html.cc-open body {
  overflow: hidden;
}
.cc-sheet {
  --cc-color: #d7c8b9;
  --cc-ink: #29423b;
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.55), transparent 60%), var(--cc-color);
  color: #24302f;
  animation: cc-sheet-in 280ms cubic-bezier(0.2, 0.82, 0.24, 1);
}
@keyframes cc-sheet-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.cc-head {
  flex: none;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: max(10px, env(safe-area-inset-top)) 14px 6px;
}
.cc-close {
  font-size: 26px;
  line-height: 1;
  color: var(--cc-ink);
}
.cc-heading {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}
.cc-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-progress {
  font-size: 12.5px;
  color: var(--cc-ink);
  opacity: 0.8;
}
.cc-shuffle {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--cc-ink) 55%, transparent);
  background: rgba(255, 255, 255, 0.4);
  color: var(--cc-ink);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13.5px;
}
.cc-shuffle:disabled {
  opacity: 0.5;
}
.cc-deck {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: safe center;
  gap: 14px;
  padding: 18px max(22px, calc(50vw - 160px)) 18px;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 22px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.cc-deck::-webkit-scrollbar {
  display: none;
}
.cc-card {
  flex: 0 0 min(320px, calc(100vw - 56px));
  scroll-snap-align: center;
  background: #fff;
  border-radius: 24px;
  padding: 6px;
  box-shadow:
    0 18px 40px rgba(44, 51, 47, 0.14),
    0 3px 8px rgba(44, 51, 47, 0.08);
  transform: rotate(var(--tilt, -0.8deg));
  transition:
    transform 260ms cubic-bezier(0.2, 0.82, 0.24, 1),
    box-shadow 260ms ease;
  animation: cc-card-in 420ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
}
.cc-card:nth-child(even) {
  --tilt: 0.9deg;
}
.cc-card:nth-child(3n) {
  --tilt: -0.3deg;
}
.cc-card:nth-child(1) {
  animation-delay: 30ms;
}
.cc-card:nth-child(2) {
  animation-delay: 90ms;
}
.cc-card:nth-child(3) {
  animation-delay: 150ms;
}
.cc-card:nth-child(n + 4) {
  animation-delay: 210ms;
}
@keyframes cc-card-in {
  from {
    opacity: 0;
    transform: translateY(16px) rotate(var(--tilt, 0deg)) scale(0.97);
  }
}
.cc-card.is-open {
  transform: rotate(0deg);
}
.cc-card.is-written {
  box-shadow:
    0 0 0 2px #8bb5a3,
    0 18px 40px rgba(44, 51, 47, 0.14);
}
.cc-face {
  position: relative;
  width: 100%;
  min-height: 176px;
  border: 0;
  background: transparent;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  color: inherit;
}
.cc-card.is-open .cc-face {
  min-height: 0;
  padding-bottom: 6px;
}
.cc-prompt {
  font-size: 21px;
  line-height: 1.38;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding-right: 44px;
  overflow-wrap: anywhere;
}
.cc-cta {
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 650;
  color: #24584e;
  background: #e6efe9;
  border-radius: 999px;
  padding: 7px 14px;
}
.cc-card.is-open .cc-cta {
  display: none;
}
.cc-badge {
  position: absolute;
  top: 16px;
  right: 14px;
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: #1f5b4a;
  background: #d5e8de;
  border-radius: 999px;
  padding: 3px 10px;
}
.cc-card.is-written .cc-badge {
  display: block;
  animation: cc-stamp 360ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.cc-card.is-written .cc-cta {
  background: #d5e8de;
}
@keyframes cc-stamp {
  from {
    transform: scale(0.4) rotate(-12deg);
    opacity: 0;
  }
}
.cc-editor {
  padding: 4px 12px 14px;
  display: grid;
  gap: 10px;
}
.cc-editor[hidden] {
  display: none;
}
.cc-area {
  width: 100%;
  resize: none;
  border: 1px solid #d5ddd8;
  border-radius: 14px;
  background: #f8f9f7;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.55;
  color: #24302f;
}
.cc-area:focus {
  background: #fff;
  border-color: #8bb5a3;
}
.cc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: #6a7a73;
}
.cc-link {
  border: 0;
  background: transparent;
  color: #24584e;
  font-size: 12.5px;
  font-weight: 650;
  padding: 6px 4px;
  min-height: 32px;
}
.cc-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cc-skip,
.cc-done {
  min-height: 42px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14.5px;
}
.cc-skip {
  border: 1px solid #c9d3cd;
  background: #fff;
  color: #51635b;
}
.cc-done {
  border: 0;
  background: #29423b;
  color: #fff;
  font-weight: 650;
}
/* The dialogue card reuses the real chat bubbles. */
.cc-bubble-row {
  margin-bottom: 4px;
}
.cc-bubble {
  min-width: 0;
  flex: 1;
  max-width: 100%;
}
.cc-bubble-out .cc-area {
  background: #dce8df;
  border-color: transparent;
  border-radius: 16px 4px 16px 16px;
}
.cc-bubble-in .cc-area {
  background: #f1f4f2;
  border-radius: 4px 16px 16px 16px;
}
.cc-bubble-out {
  margin-left: 28px;
}
.cc-hint {
  margin: 0;
  font-size: 12.5px;
  color: #8a5a3c;
}
.cc-dots {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 0 8px;
}
.cc-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-ink);
  opacity: 0.25;
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}
.cc-dots i.on {
  opacity: 0.8;
  transform: scale(1.35);
}
.cc-foot {
  flex: none;
  display: grid;
  gap: 8px;
  padding: 8px 22px max(18px, env(safe-area-inset-bottom));
}
.cc-notice {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6a3f2a;
}
.cc-send {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: #29423b;
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(41, 66, 59, 0.28);
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}
.cc-send:active:not(:disabled) {
  transform: scale(0.98);
}
.cc-send:disabled {
  opacity: 0.45;
  box-shadow: none;
}
/* Part 24c: the pair story card ("{name} 和 [select] [🎲] 之间的故事") and the 留言条 entry. */
.cc-pair-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}
.cc-pair-face {
  min-height: 0;
  padding-bottom: 6px;
}
.cc-pair-select {
  min-height: 36px;
  max-width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: #29423b;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
}
.cc-pair-roll {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(44, 51, 47, 0.18);
  font-size: 18px;
  line-height: 1;
}
.cc-pair-roll:active {
  transform: rotate(120deg) scale(1.1);
}
.cc-memo-entry {
  display: grid;
  gap: 8px;
}
.cc-memo-open {
  justify-self: center;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--cc-ink);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-memo {
  display: grid;
  gap: 8px;
}
.cc-memo[hidden] {
  display: none;
}
.cc-memo-send {
  min-height: 44px;
  border: 1px solid #29423b;
  border-radius: 999px;
  background: #fff;
  color: #29423b;
  font-size: 15px;
  font-weight: 650;
}
.cc-memo-send:disabled {
  opacity: 0.45;
}
/* Part 24c: 获得点数 beside the points of 我的信息, and its sheet. */
.mi-earn {
  margin-left: auto;
  align-self: center;
}
.earn-body {
  display: grid;
  gap: 16px;
  justify-items: stretch;
}
.earn-line {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.earn-go:disabled {
  opacity: 0.45;
}
.cc-thanks {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--cc-color) 92%, #fff);
  animation: cc-thanks-in 320ms ease both;
}
.cc-thanks[hidden] {
  display: none;
}
.cc-thanks-title {
  font-size: 21px;
  font-weight: 750;
  color: var(--cc-ink);
}
.cc-thanks-sub {
  margin: 0;
  font-size: 14px;
  color: #51635b;
}
.cc-note-art {
  width: 92px;
  height: 110px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(44, 51, 47, 0.16);
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 0 16px;
  transform: rotate(-4deg);
  animation: cc-flutter 1.4s ease-in-out infinite alternate;
}
.cc-note-art i {
  height: 5px;
  border-radius: 3px;
  background: #b7d0c4;
}
.cc-note-art i:nth-child(2) {
  width: 70%;
}
.cc-note-art i:nth-child(3) {
  width: 45%;
}
@keyframes cc-flutter {
  to {
    transform: translateY(-8px) rotate(3deg);
  }
}
@keyframes cc-thanks-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-sheet,
  .cc-card,
  .cc-card.is-written .cc-badge,
  .cc-note-art,
  .cc-thanks,
  .chat-menu {
    animation: none;
  }
  .cc-card {
    transition: none;
  }
}

/* 共创收件箱 (administrators): a list on the left, the chosen submission on the right; one column on a phone. */
.account-admin-page[data-surface="cocreation"] {
  width: min(1040px, 100%);
}
.cocreation-badge {
  display: inline-block;
  min-width: 22px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #b4542f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
}
a.cocreation-badge:hover,
a.cocreation-badge:focus-visible {
  background: #8f3f21;
  text-decoration: underline;
}
/* Inbox: list and detail are two separate scroll regions beside each other; the page itself does not scroll. */
#admin-cocreation {
  display: grid;
  gap: 10px 22px;
  grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.3fr);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}
#admin-cocreation > h2,
#admin-cocreation > p,
#admin-cocreation > .cc-toolbar {
  grid-column: 1 / -1;
  margin: 0;
}
#admin-cocreation > .cc-detail {
  grid-column: 2;
  grid-row: 4 / span 4;
  min-height: 0;
  overflow: auto;
  align-content: start;
}
#admin-cocreation > .cc-bulk,
#admin-cocreation > .cc-empty,
#admin-cocreation > .cc-more {
  grid-column: 1;
}
#admin-cocreation > .cc-list {
  grid-column: 1;
  min-height: 0;
  overflow: auto;
}
.cc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: end;
}
.cc-toolbar label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.cc-toolbar .cc-star-filter {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.cc-bulk {
  display: flex;
  gap: 8px;
}
.cc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #bacac1;
  border-radius: 14px;
  background: #fff;
}
.cc-row.is-active {
  border-color: #294b40;
  box-shadow: 0 0 0 2px rgba(41, 75, 64, 0.2);
}
.account-admin-page .cc-row-open {
  display: grid;
  gap: 5px;
  justify-items: start;
  align-self: stretch;
  width: 100%;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #24302f;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.account-admin-page .cc-row-open:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 3px;
}
.cc-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 13px;
  color: #405c61;
}
.cc-row-head strong {
  color: #24302f;
  font-size: 15px;
}
.cc-first {
  font-size: 14px;
  color: #24302f;
  overflow-wrap: anywhere;
}
.cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-chip {
  font-size: 12px;
  padding: 1px 9px;
  border-radius: 999px;
  background: #e6eee9;
  color: #294b40;
}
.cc-chip-new {
  background: #f4dccf;
  color: #8a3f1e;
}
.cc-chip-archived {
  background: #e4e4e0;
  color: #5b5b55;
}
.cc-chip-star {
  background: #f6ecc6;
  color: #7a5b00;
}
.cc-chip-adopted {
  background: #d5e8de;
  color: #1f5b4a;
}
.cc-detail {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #bacac1;
  border-radius: 16px;
  background: #fbfcfa;
}
.cc-detail[hidden] {
  display: none;
}
.cc-detail-actions,
.cc-answer-actions,
.cc-adopt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cc-group h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #294b40;
}
.cc-answer {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #f1f4f2;
}
.cc-answer .cc-card-prompt {
  margin: 0;
  font-size: 12.5px;
  color: #5d6e67;
}
.cc-answer-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #24302f;
  white-space: pre-wrap;
}
.cc-chat .message-row {
  margin-bottom: 8px;
}
.cc-adopt {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #8bb5a3;
  border-radius: 12px;
  background: #fff;
  margin: 0 !important;
}
.cc-adopt textarea,
.cc-note {
  width: 100%;
  border: 1px solid #bacac1;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 15px;
}
.cc-example {
  display: grid;
  gap: 8px;
}
.cc-example[hidden],
.cc-adopt textarea[hidden] {
  display: none;
}
.cc-adopt-error {
  margin: 0;
  color: #8f2d1c !important;
  font-weight: 600;
}
.cc-adopt-error[hidden] {
  display: none;
}
.cc-adopt-help {
  margin: 0 !important;
  font-size: 13px !important;
}
.cc-note-box {
  display: grid;
  gap: 8px;
}

/* Account sheets (注册 / 登录 / 忘记密码 / 绑定邮箱 / 我的昵称 / 修改密码) and the signed-out first page. */
.acct-sheet,
.mi-sheet {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: #f6f4ef;
  color: #24302f;
  overflow-y: auto;
  animation: cc-sheet-in 240ms cubic-bezier(0.2, 0.82, 0.24, 1);
}
.acct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto 8px;
  width: min(420px, 100%);
}
.acct-title {
  font-size: 20px;
}
.acct-close {
  min-width: 44px;
  min-height: 44px;
  font-size: 24px;
}
.acct-body,
.acct-status {
  width: min(420px, 100%);
  margin: 0 auto;
}
.acct-form {
  display: grid;
  gap: 14px;
}
.acct-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.acct-field {
  display: grid;
  gap: 6px;
}
.acct-label {
  font-size: 14px;
}
.acct-hint {
  font-size: 12px;
  opacity: 0.7;
}
.acct-input {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #b9c4bf;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 16px;
}
.acct-input:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 2px;
}
.acct-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
}
.acct-primary {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: #294b40;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.acct-primary:disabled {
  opacity: 0.6;
  cursor: wait;
}
.acct-link {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #294b40;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.acct-link:disabled {
  opacity: 0.55;
  text-decoration: none;
  cursor: default;
}
.acct-links {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.acct-notice {
  padding: 10px 12px;
  border-radius: 12px;
  background: #ece8dd;
  font-size: 14px;
  line-height: 1.6;
}
.acct-notice p {
  margin: 4px 0 0;
}
.acct-status {
  min-height: 24px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #7a2f2f;
}
.acct-done,
.acct-closed {
  margin: 24px 0;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}
.signed-out-page .signed-out-actions {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.signed-out-page .signed-out-secondary {
  background: transparent;
  color: #294b40;
  border: 1px solid #294b40;
}
.signed-out-page .signed-out-notice {
  min-height: 24px;
  margin: 0 0 8px;
  font-size: 14px;
  color: #7a2f2f;
}

/*
 * Admin console shell (desktop browsers, 1280–1920 px; below 1024 px only a notice is shown).
 * Layout and information architecture follow common admin templates, and the design tokens (neutral greys, 4–8 px
 * radii, 14 px base type, soft shadows) are borrowed in spirit from the MIT-licensed Tabler (https://tabler.io) and
 * shadcn-admin (https://github.com/satnaing/shadcn-admin). No code or assets were copied; this is our own CSS.
 * The page never scrolls: the top bar and status bar are fixed rows and each region (content, list, detail, table,
 * sidebar) scrolls on its own. A scroll container never sits inside another one.
 */
html:has(.admin-shell),
body:has(.admin-shell) {
  height: 100%;
  overflow: hidden;
}
.local-admin-root:has(.admin-shell) {
  display: block;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  background: #f4f6f5;
}
.account-admin-page.admin-shell {
  --ad-bg: #f4f6f5;
  --ad-surface: #fff;
  --ad-border: #dde3df;
  --ad-text: #1f2a26;
  --ad-muted: #5b6b64;
  --ad-primary: #294b40;
  --ad-primary-soft: #e3ece7;
  --ad-danger: #a33a2a;
  --ad-radius: 6px;
  --ad-nav-width: 232px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: var(--ad-bg);
  color: var(--ad-text);
  font-size: 14px;
}
.admin-shell[data-nav="collapsed"] {
  --ad-nav-width: 56px;
}
.admin-narrow-notice {
  display: none;
}
.admin-access-notice {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 420px;
  padding: 16px 18px;
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  background: var(--ad-surface);
}
.admin-access-notice p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
/* Until Access has been passed nothing else on the page can work, so nothing else is offered. */
.account-admin-page[data-access] .admin-content > :not(.admin-access-notice),
.account-admin-page[data-access] .admin-account,
.account-admin-page[data-access] .admin-sidebar {
  display: none !important;
}
@media (max-width: 1023px) {
  .admin-shell > :not(.admin-narrow-notice) {
    display: none !important;
  }
  .account-admin-page.admin-shell .admin-narrow-notice {
    display: grid;
    place-items: center;
    height: 100dvh;
    padding: 32px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
  }
}
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 20px;
  background: var(--ad-surface);
  border-bottom: 1px solid var(--ad-border);
}
.admin-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.admin-shell .admin-brand h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.admin-env {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ad-primary-soft);
  color: var(--ad-primary);
  font-size: 12px;
}
.admin-env:empty {
  display: none;
}
.admin-account {
  position: relative;
}
.account-admin-page.admin-shell .admin-account-toggle {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ad-border);
  background: var(--ad-surface);
  color: var(--ad-text);
  border-radius: var(--ad-radius);
}
.admin-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  padding: 6px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 42, 38, 0.14);
}
.account-admin-page.admin-shell .admin-menu .admin-identity {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ad-border);
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell .admin-menu-item {
  display: block;
  width: 100%;
  min-height: 34px;
  margin: 2px 0 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ad-text);
  text-align: left;
  text-decoration: none;
  font-size: 14px;
}
.account-admin-page.admin-shell .admin-menu-item:hover,
.account-admin-page.admin-shell .admin-menu-item:focus-visible {
  background: var(--ad-primary-soft);
  filter: none;
}
.admin-frame {
  display: grid;
  grid-template-columns: var(--ad-nav-width) minmax(0, 1fr);
  min-height: 0;
}
.admin-shell[data-surface="login"] .admin-frame {
  grid-template-columns: minmax(0, 1fr);
}
.admin-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 8px;
  background: var(--ad-surface);
  border-right: 1px solid var(--ad-border);
}
.account-admin-page.admin-shell .admin-nav {
  display: flex;
  margin: 0;
  border-bottom: 0;
  flex-wrap: nowrap;
}
.admin-sidebar[hidden] {
  display: none;
}
.admin-nav-title {
  margin: 14px 10px 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .admin-nav-title {
  font-size: 12px;
  margin: 14px 10px 4px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--ad-radius);
  color: var(--ad-text);
  text-decoration: none;
}
.admin-nav-item[hidden] {
  display: none;
}
.admin-nav-item:hover {
  background: var(--ad-bg);
}
.admin-nav-item[aria-current="page"] {
  background: var(--ad-primary-soft);
  color: var(--ad-primary);
  font-weight: 650;
}
.admin-nav-item:focus-visible,
.account-admin-page.admin-shell button:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: 2px;
}
.admin-icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.account-admin-page.admin-shell .admin-nav-collapse {
  min-height: 34px;
  margin: 8px 0 0;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ad-muted);
  align-self: stretch;
  display: flex;
  gap: 10px;
  align-items: center;
}
.admin-shell[data-nav="collapsed"] .admin-nav-title,
.admin-shell[data-nav="collapsed"] .admin-nav-item span,
.admin-shell[data-nav="collapsed"] .admin-nav-collapse-text {
  display: none;
}
.admin-shell[data-nav="collapsed"] .admin-nav-item,
.admin-shell[data-nav="collapsed"] .admin-nav-collapse {
  justify-content: center;
  padding: 0;
}
.admin-shell[data-nav="collapsed"] .admin-nav-collapse span[aria-hidden] {
  transform: rotate(180deg);
}
.admin-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 20px 28px 32px;
  outline: none;
}
.admin-content > * {
  flex: none;
}
.admin-shell[data-surface="preview"] .admin-content,
.admin-shell[data-surface="cocreation"] .admin-content {
  overflow: hidden;
}
.admin-shell[data-surface="preview"] .admin-content > section[data-panel]:not([hidden]),
.admin-shell[data-surface="cocreation"] .admin-content > section[data-panel]:not([hidden]) {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.admin-shell[data-surface="cocreation"] #admin-cocreation,
.admin-shell[data-surface="preview"] #admin-preview {
  flex: 1 1 0;
  min-height: 0;
}
.account-admin-page.admin-shell .admin-content h2 {
  margin: 0 0 12px;
  font-size: 20px;
}
.account-admin-page.admin-shell .admin-content p {
  color: var(--ad-muted);
}
.admin-content > section[data-panel] {
  width: 100%;
  max-width: 1280px;
}
.admin-content > section[data-panel="members"],
.admin-content > section[data-panel="invites"],
.admin-content > section[data-panel="account"] {
  max-width: 960px;
}
.admin-shell[data-surface="login"] .admin-content {
  align-items: center;
  padding-top: 12vh;
}
.admin-shell[data-surface="login"] .admin-content > section[data-panel]:not([hidden]) {
  max-width: 420px;
  padding: 24px 28px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(31, 42, 38, 0.06);
}
.admin-statusbar,
.account-admin-page.admin-shell .invite-admin-status {
  min-height: 30px;
  margin: 0;
  padding: 6px 20px;
  border-top: 1px solid var(--ad-border);
  background: var(--ad-surface);
  color: var(--ad-muted);
  font-size: 13px;
}
/* Controls: denser than the mobile-first originals. */
.account-admin-page.admin-shell input:not([type="checkbox"]),
.account-admin-page.admin-shell select {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--ad-radius);
  border-color: #c6d0ca;
  font-size: 14px;
}
.account-admin-page.admin-shell textarea {
  font-size: 14px;
  border-radius: var(--ad-radius);
  min-height: 90px;
}
.account-admin-page.admin-shell button {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--ad-radius);
  font-size: 14px;
}
.account-admin-page.admin-shell form {
  max-width: 560px;
  margin: 14px 0;
}
.account-admin-page.admin-shell .character-profile-form {
  max-width: 760px;
}
.account-admin-page.admin-shell fieldset {
  border-radius: var(--ad-radius);
}
.account-admin-page.admin-shell .admin-danger {
  background: var(--ad-danger);
  color: #fff;
}
.admin-shell .admin-hint,
.admin-shell .admin-empty {
  color: var(--ad-muted);
}
.admin-shell .admin-empty {
  padding: 24px 12px;
  text-align: center;
}
/* Result banner for one-time codes stays visible while the page scrolls. */
.account-admin-page.admin-shell .invite-admin-result {
  position: sticky;
  top: -20px;
  z-index: 5;
  margin: 0 0 14px;
  max-width: 960px;
}
/* Sticky toolbars and in-page section index (inside the single content scroll region). */
.admin-bar,
.account-admin-page.admin-shell .admin-content .admin-toolbar {
  position: sticky;
  top: -20px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 14px;
  margin: 0 -28px 12px;
  padding: 10px 28px;
  background: var(--ad-bg);
  border-bottom: 1px solid var(--ad-border);
}
.admin-bar-title {
  align-self: center;
  font-size: 16px;
}
.admin-bar-spacer {
  flex: 1;
}
.admin-filter {
  display: grid;
  gap: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .admin-filter input,
.account-admin-page.admin-shell .admin-filter select {
  width: 200px;
}
.admin-section-index {
  position: sticky;
  top: 48px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 -28px 12px;
  padding: 8px 28px;
  background: var(--ad-bg);
  border-bottom: 1px solid var(--ad-border);
}
.admin-section-index[hidden] {
  display: none;
}
/* Data table: the wrapper is the one scroll region, the header row stays put. */
.admin-table-region {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 8px;
}
.admin-table-wrap {
  min-height: 0;
  overflow: auto;
}
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.admin-table[hidden] {
  display: none;
}
.admin-table caption {
  position: absolute;
  left: -9999px;
}
.admin-table th,
.admin-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ad-border);
  white-space: nowrap;
}
.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef2ef;
  color: var(--ad-muted);
  font-weight: 600;
}
.admin-table .is-end {
  text-align: right;
}
.admin-table .admin-select-col {
  width: 36px;
}
.account-admin-page.admin-shell .admin-table .admin-sort {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}
.admin-table th[aria-sort="ascending"] .admin-sort::after {
  content: " ↑";
}
.admin-table th[aria-sort="descending"] .admin-sort::after {
  content: " ↓";
}
.admin-table tbody tr:hover {
  background: #f7faf8;
}
.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ad-primary-soft);
  border-bottom: 1px solid var(--ad-border);
}
.admin-bulk-bar[hidden] {
  display: none;
}
.admin-bulk-count {
  margin-right: auto;
  font-weight: 600;
}
.admin-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e8ecea;
  color: #3d4d46;
  font-size: 12px;
  line-height: 1.6;
}
.admin-badge[data-tone="ok"] {
  background: #d9eee2;
  color: #1c5a40;
}
.admin-badge[data-tone="warn"] {
  background: #f6ebcf;
  color: #7a5a10;
}
.admin-badge[data-tone="danger"] {
  background: #f6dcd6;
  color: #8a2f20;
}
.admin-badge[data-tone="info"] {
  background: #dce8f4;
  color: #1f4f7a;
}
.admin-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 18px;
  margin: 0;
}
.admin-kv dt {
  color: var(--ad-muted);
}
.admin-kv dd {
  margin: 0;
}
/* Split pane: list | detail, each its own scroll region. */
.admin-fill {
  height: 100%;
  min-height: 0;
}
.admin-split {
  display: grid;
  grid-template-columns: var(--split-list-width, 320px) 8px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.admin-split-list,
.admin-split-detail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.admin-split-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}
.admin-split-detail {
  padding-left: 12px;
}
.admin-split-divider {
  cursor: col-resize;
  border-radius: 4px;
  background: transparent;
  touch-action: none;
}
.admin-split-divider:hover,
.admin-split-divider:focus-visible {
  background: var(--ad-border);
  outline: none;
}
.account-admin-page.admin-shell .admin-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ad-border);
  background: var(--ad-surface);
  color: var(--ad-text);
  text-align: left;
}
.account-admin-page.admin-shell .admin-pick[aria-current="true"] {
  border-color: var(--ad-primary);
  box-shadow: 0 0 0 1px var(--ad-primary);
}
.admin-pick-meta {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ad-muted);
}
/* Drawer, dialog, toast. */
.admin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(31, 42, 38, 0.32);
}
.admin-backdrop[hidden],
.admin-drawer[hidden] {
  display: none;
}
.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  width: min(520px, 90vw);
  background: var(--ad-surface);
  box-shadow: -8px 0 24px rgba(31, 42, 38, 0.18);
}
.admin-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ad-border);
}
.admin-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}
.admin-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 52;
  width: min(440px, 90vw);
  padding: 20px 24px;
  transform: translate(-50%, -50%);
  background: var(--ad-surface);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(31, 42, 38, 0.28);
}
.admin-dialog h3 {
  margin: 0 0 8px;
}
.admin-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.admin-toasts {
  position: fixed;
  right: 20px;
  bottom: 44px;
  z-index: 60;
  display: grid;
  gap: 8px;
}
.admin-toast {
  padding: 10px 16px;
  border-radius: var(--ad-radius);
  background: var(--ad-text, #2b2833);
  color: #fff;
  box-shadow: 0 6px 20px rgba(31, 42, 38, 0.25);
}
.admin-toast[data-tone="ok"] {
  background: #1c5a40;
}
.admin-toast[data-tone="danger"] {
  background: var(--ad-danger);
}
/* Permission editor. */
.permission-matrix {
  display: grid;
  gap: 4px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
}
.permission-matrix > legend,
.permission-matrix > .permission-presets,
.permission-matrix > .permission-note {
  grid-column: 1 / -1;
}
.permission-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.permission-group h4 {
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .permission-matrix label.permission-item {
  min-height: 30px;
}
.account-admin-page.admin-shell .permission-matrix .permission-help {
  margin: 0 0 6px 29px;
  font-size: 12px;
}
.account-admin-page.admin-shell .permission-note {
  min-height: 20px;
  margin: 6px 0 0;
  color: #7a5a10;
}
.account-admin-page.admin-shell .admin-members-wide,
.account-admin-page.admin-shell .admin-member .permission-matrix {
  max-width: none;
}
/* Characters and the inbox: wide content, sticky bars sit inside the one content scroll region. */
.account-admin-page.admin-shell .character-directory {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.account-admin-page.admin-shell .character-directory-row {
  padding: 12px 14px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 8px;
}
.account-admin-page.admin-shell .character-flow,
.account-admin-page.admin-shell .preview-panel {
  max-width: 920px;
}
.account-admin-page.admin-shell .preview-card {
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 8px;
}
.account-admin-page.admin-shell .admin-toolbar:empty {
  display: none;
}

/* 预演测试 workbench (Part 13b). Reuses the admin table, toolbar, badge and drawer; only layout lives here. */
.account-admin-page.admin-shell .pw {
  display: grid;
  gap: 14px;
  max-width: none;
}
.pw .admin-bar {
  position: static;
  margin: 0;
  padding: 8px 12px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 8px;
}
.pw .admin-bar .admin-filter input,
.pw .admin-bar .admin-filter select {
  width: auto;
  min-width: 120px;
}
.pw-zone {
  align-self: center;
  margin: 0;
}
.pw-compose {
  display: grid;
  gap: 8px;
}
.pw-compose-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pw-compose-row input[type="text"],
.pw-compose-row textarea {
  flex: 1;
  min-width: 0;
}
.pw-compose-col {
  display: grid;
  gap: 6px;
  align-content: start;
  width: 260px;
}
.pw-estimate {
  margin: 0;
}
.pw-run {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 8px;
  margin-bottom: 10px;
}
.pw-run > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.pw-run-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.pw-run-body {
  padding: 0 10px 10px;
}
.pw .admin-table td {
  white-space: normal;
  vertical-align: top;
}
.pw .admin-table tbody tr[tabindex] {
  cursor: pointer;
}
.pw-bubbles {
  display: grid;
  gap: 4px;
}
.pw-bubble {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.pw-fail {
  color: var(--ad-danger);
}
.pw-section {
  margin-bottom: 18px;
}
.pw-section h4,
.pw-section h5 {
  margin: 0 0 6px;
}
.pw-pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f4f7f5;
  border: 1px solid var(--ad-border);
  border-radius: 6px;
  font-size: 12px;
}
.pw-raw {
  border-color: var(--ad-danger);
}
.pw-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pw-diff-row {
  padding: 4px 0;
  border-bottom: 1px dashed var(--ad-border);
}
.pw-del {
  background: #fde4e1;
  color: #8a2a20;
  text-decoration: line-through;
}
.pw-add {
  background: #def3e3;
  color: #1d5c32;
}
.pw-coverage {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.pw-eval {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
}
.pw-eval-list,
.pw-eval-form {
  display: grid;
  gap: 8px;
  align-content: start;
}
.pw-eval textarea {
  width: 100%;
  min-height: 260px;
}
.pw-settlement {
  margin: 6px 0;
}
.admin-drawer.admin-drawer-wide {
  width: min(1180px, 94vw);
}

/* Top bar account entries (登录 / 注册 / nickname) next to 邀请码, and the one-line next step when the trial is used up. */
.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}
.head-account {
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.head-account:hover,
.head-account:focus-visible {
  border-color: currentColor;
}
.head-account[aria-haspopup]::after {
  content: " ▾";
}
.head-hint {
  font-size: 12px;
  color: #615044;
  margin-right: 12px;
}
.site-head:has(.head-hint) .head-note {
  margin-right: 8px;
}
.site-head:has(.head-hint) .head-hint {
  margin-right: 12px;
}
@media (max-width: 600px) {
  .site-head:has(.head-actions) {
    height: auto;
    min-height: 62px;
    flex-wrap: wrap;
    row-gap: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .head-hint {
    order: 5;
    flex-basis: 100%;
    margin: 0;
    text-align: right;
  }
  .head-actions {
    gap: 4px;
  }
}

/* 系统 → 模型与价格 (Part 21g). The owner changes models and prices from a phone too, so this one route (#/models) opts out of the
   desktop-only notice; every other page keeps it. */
.models-table td.models-status,
.models-table th[scope="row"] {
  font-weight: 600;
}
.models-table input[type="number"] {
  width: 84px;
}
.models-voice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 16px 0 8px;
}
.models-voice input[type="number"] {
  width: 84px;
}
.models-actions {
  display: flex;
  gap: 8px;
  margin: 12px 0 20px;
}
/* Part 22b: 概览, 系统状态, 积分发放. */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.overview-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  background: var(--ad-surface);
}
.overview-card strong {
  font-size: 24px;
}
.overview-label {
  color: var(--ad-muted);
  font-size: 13px;
}
.overview-warnings {
  margin: 8px 0 16px;
}
.overview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.system-section {
  margin: 0 0 24px;
}
.system-section h3 {
  margin: 0 0 8px;
}
.system-result:empty {
  display: none;
}
.system-result {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  background: var(--ad-surface);
}
.admin-table tr[data-expiring] td {
  background: #fbf3dc;
}
.system-topup {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.system-topup input {
  width: 72px;
}
.points-form {
  display: grid;
  gap: 8px;
  max-width: 520px;
}
.points-form fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
}
.account-admin-page .points-kind {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
  white-space: nowrap;
}
.account-admin-page .points-kind input[type="radio"] {
  width: auto;
  flex: none;
  margin: 0;
}
.overview-links a {
  color: var(--ad-primary);
}
.models-problem {
  margin: 8px 0 0;
  color: var(--ad-danger) !important;
}
.models-recent {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}
.admin-dialog p {
  white-space: pre-line;
}
@media (max-width: 1023px) {
  .account-admin-page.admin-shell[data-mobile-ok] > .admin-narrow-notice {
    display: none !important;
  }
  .account-admin-page.admin-shell[data-mobile-ok] > .admin-topbar {
    display: flex !important;
    height: auto;
    min-height: 48px;
    padding: 6px 12px;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .account-admin-page.admin-shell[data-mobile-ok] > .admin-frame {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }
  .account-admin-page.admin-shell[data-mobile-ok] .admin-sidebar {
    display: none;
  }
  .account-admin-page.admin-shell[data-mobile-ok] > .admin-statusbar {
    display: block !important;
    padding: 6px 12px;
  }
  .account-admin-page.admin-shell[data-mobile-ok] > .admin-backdrop {
    display: block !important;
  }
  .account-admin-page.admin-shell[data-mobile-ok] > .admin-dialog {
    display: block !important;
  }
  .account-admin-page.admin-shell[data-mobile-ok] > .admin-toasts {
    display: grid !important;
    right: 12px;
    bottom: 48px;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .admin-content {
    padding: 14px 12px 28px;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-table thead {
    position: absolute;
    left: -9999px;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-table,
  .account-admin-page.admin-shell[data-mobile-ok] .models-table tbody {
    display: block;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ad-border);
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-table tr > th[scope="row"] {
    grid-column: 1 / -1;
    padding: 4px 0;
    border: 0;
    font-size: 15px;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 4px 0;
    border: 0;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-table td::before {
    content: attr(data-label);
    color: var(--ad-muted);
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-table input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .models-actions button {
    min-height: 44px;
    flex: 1;
  }
}

/* 玩家 → 邀请与额度 (Part 22a). */
.tiers-form {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin-bottom: 20px;
}
.tiers-field {
  display: grid;
  gap: 4px;
}
.tiers-kind {
  display: flex;
  gap: 20px;
  border: 0;
  padding: 0;
  margin: 0;
}
.tiers-refill {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tiers-refill[hidden] {
  display: none;
}
.tiers-codes {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.tiers-shown-actions,
.tiers-actions,
.tiers-list-head,
.tiers-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}
.tiers-list-head {
  justify-content: space-between;
}
.tiers-detail {
  margin-top: 20px;
}
/* A code is 43 characters: it wraps onto two lines beside its 复制 button, so the 操作 column is never pushed off the table. */
.tiers-code-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tiers-code-text {
  min-width: 0;
  max-width: 26ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tiers-code-hidden {
  letter-spacing: 1px;
}
.tiers-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tiers-danger {
  color: #8a2f27;
}
.account-admin-page .tiers-kind label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
  white-space: nowrap;
}
.account-admin-page .tiers-kind input[type="radio"] {
  width: auto;
  flex: none;
  margin: 0;
}

/* ======================================================================================================================
   Part 24b-1: the administrator console, second design (design/burbur-v2: AdminNav, Dashboard, Invites, Stats, Usage, System).
   Motion durations are multiplied by --ad-motion, which prefers-reduced-motion sets to 0 (one rule at :root, so no console
   selector needs its own media query). Colours and sizes of data travel as custom properties (the CSP has no inline styles).
   ====================================================================================================================== */
:root {
  --ad-motion: 1;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ad-motion: 0;
  }
}
.local-admin-root:has(.admin-shell) {
  background: #f6f4f1;
}
.account-admin-page.admin-shell {
  /* Part 24b-3 (design/burbur-v2 Palette): one calm set of colours for the whole console. Text on a card is #2B2833 (13.6:1) or
     the secondary #6E6875 (5.1:1); no fill is pure black. */
  --ad-bg: #f6f4f1;
  --ad-surface: #fff;
  --ad-hairline: #ece8e3;
  --ad-border: #e2ddd6;
  --ad-text: #2b2833;
  --ad-muted: #6e6875;
  --ad-primary: #5b4fc4;
  --ad-primary-hover: #4d41b0;
  --ad-tint: #eeebfa;
  --ad-tint-ink: #3f3596;
  --ad-primary-soft: var(--ad-tint);
  --ad-danger: #b23a26;
  --ad-danger-soft: #fbedea;
  --ad-ok: #2f7a4f;
  --ad-ok-soft: #e7f3ec;
  --ad-warn: #8a5a00;
  --ad-warn-soft: #fdf3dc;
  --ad-radius: 12px;
  --ad-card-radius: 18px;
  --ad-card-pad: 20px;
  --ad-gap: 20px;
  --ad-page-max: 1680px;
  --ad-nav-width: 232px;
  --ad-line: var(--ad-hairline);
  --ad-ease: cubic-bezier(0.2, 0.82, 0.24, 1);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ad-bg);
  font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  font-variant-numeric: tabular-nums;
}
.account-admin-page.admin-shell[data-nav="collapsed"] {
  --ad-nav-width: 68px;
}
.account-admin-page.admin-shell [hidden] {
  display: none !important;
}

/* ---- top bar: only the login page shows a header; the account card floats at the foot of the sidebar ---- */
.account-admin-page.admin-shell .admin-topbar {
  position: relative;
  z-index: 30;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.account-admin-page.admin-shell .admin-brand {
  display: none;
}
.account-admin-page.admin-shell[data-surface="login"] .admin-topbar {
  height: 72px;
  padding: 0 36px;
}
.account-admin-page.admin-shell[data-surface="login"] .admin-brand {
  display: flex;
  align-items: center;
}
.account-admin-page.admin-shell[data-surface="login"] .admin-brand h1 {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.account-admin-page.admin-shell .admin-account {
  position: fixed;
  left: 14px;
  bottom: 46px;
  width: calc(var(--ad-nav-width) - 28px);
  transition: width calc(280ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .admin-account-toggle {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background calc(200ms * var(--ad-motion));
}
.account-admin-page.admin-shell .admin-account-toggle:hover {
  background: #fff;
}
.account-admin-page.admin-shell .admin-menu {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
  min-width: 220px;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(40, 24, 60, 0.18);
  animation: adPop calc(220ms * var(--ad-motion)) var(--ad-ease) both;
}
.account-admin-page.admin-shell .admin-menu-item {
  border-radius: 999px;
}
.account-admin-page.admin-shell[data-nav="collapsed"] .admin-account-toggle {
  padding: 0;
  text-align: center;
  text-overflow: clip;
  font-size: 15px;
}

/* ---- sidebar: the AdminNav board ---- */
.account-admin-page.admin-shell .admin-sidebar {
  justify-content: flex-start;
  gap: 20px;
  padding: 24px 14px 100px;
  background: transparent;
  border: 0;
}
.admin-side-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 0 10px;
}
.admin-hand {
  height: 30px;
  width: auto;
  color: var(--ad-text);
}
.admin-tag {
  display: flex;
  align-items: center;
  height: 20px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.account-admin-page.admin-shell .admin-env {
  flex-basis: 100%;
  padding: 0;
  background: transparent;
  color: var(--ad-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.account-admin-page.admin-shell .admin-nav-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-admin-page.admin-shell .admin-nav-title {
  margin: 0;
  padding: 0 12px 4px;
  color: var(--ad-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.account-admin-page.admin-shell .admin-nav-item {
  position: relative;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition:
    background calc(220ms * var(--ad-motion)) var(--ad-ease),
    color calc(220ms * var(--ad-motion)) var(--ad-ease),
    padding calc(220ms * var(--ad-motion)) var(--ad-ease),
    transform calc(220ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .admin-nav-item:hover {
  background: rgba(255, 255, 255, 0.75);
}
.account-admin-page.admin-shell .admin-nav-item:active {
  transform: scale(0.98);
}
.account-admin-page.admin-shell .admin-nav-item[aria-current="page"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell .admin-nav-item[data-trail="true"] {
  background: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}
.account-admin-page.admin-shell .admin-nav-item .admin-icon {
  display: none;
}
.account-admin-page.admin-shell .admin-nav-sub {
  height: 32px;
  min-height: 32px;
  margin-left: 22px;
  font-size: 13px;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .admin-nav-sub::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}
.account-admin-page.admin-shell .admin-nav-sub {
  padding-left: 22px;
}
.account-admin-page.admin-shell .admin-nav-collapse {
  margin-top: auto;
  border-radius: 999px;
}
.account-admin-page.admin-shell[data-nav="collapsed"] .admin-nav-item .admin-icon {
  display: block;
}
.account-admin-page.admin-shell[data-nav="collapsed"] .admin-nav-sub {
  margin-left: 0;
}
.account-admin-page.admin-shell[data-nav="collapsed"] .admin-nav-sub::before,
.account-admin-page.admin-shell[data-nav="collapsed"] .admin-side-brand > :not(.admin-hand) {
  display: none;
}
.account-admin-page.admin-shell[data-nav="collapsed"] .admin-hand {
  max-width: 40px;
}
.account-admin-page.admin-shell .admin-frame {
  transition: grid-template-columns calc(280ms * var(--ad-motion)) var(--ad-ease);
}

/* ---- content ---- */
.account-admin-page.admin-shell .admin-content {
  padding: 28px 36px 40px;
  container-type: inline-size;
  container-name: adc;
}
.admin-content > section[data-panel] {
  max-width: 1240px;
}
.admin-content > section[data-panel]:not([hidden]) {
  animation: adIn calc(360ms * var(--ad-motion)) var(--ad-ease) both;
}
.account-admin-page.admin-shell .admin-content h2 {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.account-admin-page.admin-shell[data-surface="login"] .admin-content h2 {
  font-size: 20px;
}
.account-admin-page.admin-shell .admin-content .page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
}
.account-admin-page.admin-shell .admin-content .page-head h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.page-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--ad-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.account-admin-page.admin-shell .admin-statusbar,
.account-admin-page.admin-shell .invite-admin-status {
  background: transparent;
  border-top: 0;
}
.ov-chart-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell .page-head button.admin-secondary,
.account-admin-page.admin-shell .ov-chart-tools button.admin-secondary,
.account-admin-page.admin-shell .ov-reload,
.account-admin-page.admin-shell .sys-reload {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* ---- a pill switch ---- */
.seg {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #f3f0ec;
}
.page-head .seg {
  padding: 4px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #fff;
}
.account-admin-page.admin-shell .seg-button {
  min-height: 0;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ad-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background calc(200ms * var(--ad-motion)) var(--ad-ease),
    color calc(200ms * var(--ad-motion)) var(--ad-ease),
    box-shadow calc(200ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .seg-m .seg-button {
  height: 34px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
}
.account-admin-page.admin-shell .page-head .seg-button {
  height: 34px;
  font-size: 13px;
  font-weight: 600;
}
.account-admin-page.admin-shell .seg-button[aria-pressed="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .seg-icon {
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.account-admin-page.admin-shell .seg-icon[aria-pressed="true"],
.account-admin-page.admin-shell .cost-chart-bar .seg-button[aria-pressed="true"],
.account-admin-page.admin-shell .stat-detail .seg-button[aria-pressed="true"] {
  background: #fff;
  color: var(--ad-text);
  box-shadow: 0 1px 4px rgba(40, 24, 60, 0.14);
}
.account-admin-page.admin-shell .seg-button:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: 2px;
}

/* ---- cards ---- */
.account-admin-page.admin-shell .overview-cards {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
}
.account-admin-page.admin-shell .ov-today {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-admin-page.admin-shell .ov-yesterday {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.account-admin-page.admin-shell .ov-yesterday:empty,
.account-admin-page.admin-shell .overview-cards:empty {
  display: none;
}
.account-admin-page.admin-shell .overview-card {
  gap: 6px;
  padding: 18px 20px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  animation: adIn calc(360ms * var(--ad-motion)) var(--ad-ease) both;
}
.account-admin-page.admin-shell .overview-card:nth-child(2) {
  animation-delay: calc(50ms * var(--ad-motion));
}
.account-admin-page.admin-shell .overview-card:nth-child(3) {
  animation-delay: calc(100ms * var(--ad-motion));
}
.account-admin-page.admin-shell .overview-card:nth-child(4) {
  animation-delay: calc(150ms * var(--ad-motion));
}
.account-admin-page.admin-shell .overview-card:nth-child(5) {
  animation-delay: calc(200ms * var(--ad-motion));
}
.account-admin-page.admin-shell .overview-label {
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .overview-card strong {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.overview-sub {
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .overview-card.is-dark {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .overview-card.is-dark .overview-label,
.account-admin-page.admin-shell .overview-card.is-dark .overview-sub {
  color: var(--ad-tint-ink);
}
.overview-sub[title] {
  cursor: help;
  text-decoration: underline dotted rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
}
.account-admin-page.admin-shell .ov-status {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .ov-status[data-tone="ok"] {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .ov-status[data-tone="warn"] {
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
.account-admin-page.admin-shell .ov-status .admin-badge {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .ov-status .admin-badge::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* the white sections of a page */
.ov-chart,
.cost-chart,
.stat-active,
.stat-detail,
.cost-models,
.cost-dated {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 20px;
  padding: 20px 22px;
  border-radius: 24px;
  background: #fff;
  animation: adIn calc(400ms * var(--ad-motion)) var(--ad-ease) both;
}
.ov-chart-bar,
.cost-chart-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-admin-page.admin-shell .cost-chart-bar h3,
.account-admin-page.admin-shell .cost-models h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}
.ov-chart[aria-busy="true"] .ov-body {
  opacity: 0.55;
}
.ov-body {
  transition: opacity calc(240ms * var(--ad-motion));
}
.ov-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.ov-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, var(--ad-primary));
}
.ov-dot.is-registered {
  --c: var(--ad-primary);
}
.ov-dot.is-guest {
  --c: #bdb5ac;
}
.ov-pane:not([hidden]) {
  animation: adIn calc(360ms * var(--ad-motion)) var(--ad-ease) both;
}
.ov-empty {
  padding: 48px 12px;
  color: var(--ad-muted);
  text-align: center;
}
.ov-pie:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 262px;
}
.ov-pie-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--pie, #efebe6);
  animation: adSpin calc(620ms * var(--ad-motion)) var(--ad-ease) both;
}
.ov-pie-hole {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
}
.ov-pie-total {
  font-size: 28px;
  font-weight: 900;
}
.ov-pie-unit {
  font-size: 12px;
}
.ov-pie-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ov-pie-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.ov-pie-name {
  min-width: 64px;
}
.ov-pie-row b {
  font-size: 20px;
}
.ov-table {
  max-height: 300px;
  overflow: auto;
}
.account-admin-page.admin-shell .ov-data td.is-total {
  font-weight: 700;
}
.account-admin-page.admin-shell .overview-links {
  gap: 8px;
  margin: 6px 0 0;
}
.account-admin-page.admin-shell .overview-links a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background calc(200ms * var(--ad-motion));
}
.account-admin-page.admin-shell .overview-links a:hover {
  background: #fff;
}

/* ---- the chart ---- */
.xy {
  position: relative;
  padding: 10px 6px 0 44px;
}
.xy-plot {
  position: relative;
  height: 230px;
}
.xy-grid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--y, 0%);
  border-top: 1px solid var(--ad-hairline);
  transition:
    bottom calc(400ms * var(--ad-motion)) var(--ad-ease),
    opacity calc(300ms * var(--ad-motion));
}
.xy-grid.is-off {
  opacity: 0;
}
.xy-grid-label {
  position: absolute;
  left: -44px;
  top: -8px;
  width: 36px;
  text-align: right;
  color: var(--ad-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.xy-alert {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--y, 0%);
  z-index: 2;
  border-top: 2px dashed #c2410c;
  pointer-events: none;
  transition:
    bottom calc(400ms * var(--ad-motion)) var(--ad-ease),
    opacity calc(300ms * var(--ad-motion));
}
.xy-alert.is-off {
  opacity: 0;
}
.xy-alert-label {
  position: absolute;
  right: 0;
  top: -20px;
  color: #c2410c;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}
.xy-layer {
  position: absolute;
  inset: 0;
}
.xy-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.xy-bar {
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
}
.xy-stack {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  transform-origin: bottom;
  animation: xyGrowA calc(560ms * var(--ad-motion)) var(--ad-ease) both;
  animation-delay: calc(min(var(--i, 0), 30) * 12ms * var(--ad-motion));
}
.xy-layer[data-draw="b"] .xy-stack {
  animation-name: xyGrowB;
}
.xy-seg {
  flex: none;
  height: var(--h, 0%);
  background: var(--c);
  box-shadow: 0 -1px 0 #fff;
  transition: height calc(400ms * var(--ad-motion)) var(--ad-ease);
}
.xy-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: xyRevealA calc(900ms * var(--ad-motion)) var(--ad-ease) both;
}
.xy-layer[data-draw="b"] .xy-lines {
  animation-name: xyRevealB;
}
.xy-path {
  stroke-width: 2.5;
  transition: opacity calc(300ms * var(--ad-motion));
}
.xy-path.is-total {
  stroke-width: 3;
}
.xy-path.is-off {
  opacity: 0;
}
.xy-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.xy-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x, 0%);
  border-left: 1.5px solid var(--ad-primary);
}
.xy-marker-label {
  position: absolute;
  top: -2px;
  left: 0;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--ad-text);
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.xy-hits {
  position: absolute;
  inset: 0;
  display: flex;
}
.xy-hit {
  flex: 1 1 0;
  min-width: 0;
  transition: background calc(150ms * var(--ad-motion));
}
.xy-hit:hover {
  background: rgba(20, 20, 20, 0.045);
}
.xy-x {
  position: relative;
  height: 20px;
  margin-top: 8px;
}
.xy-x-label {
  position: absolute;
  left: var(--x, 0%);
  transform: translateX(-50%);
  color: var(--ad-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
}

/* ---- 消耗表 ---- */
.account-admin-page.admin-shell .cost-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.cost-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cost-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.account-admin-page.admin-shell .cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: 34px;
  padding: 0 12px 0 8px;
  border: 1.5px solid var(--c, var(--ad-border));
  border-radius: 999px;
  background: #fff;
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition:
    background calc(200ms * var(--ad-motion)),
    border-color calc(200ms * var(--ad-motion)),
    opacity calc(200ms * var(--ad-motion));
}
.account-admin-page.admin-shell .cost-chip[aria-pressed="false"] {
  border-color: var(--ad-border);
  background: #f7f4f0;
  opacity: 0.55;
}
.cost-chip-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--c);
  transition: background calc(200ms * var(--ad-motion));
}
.cost-chip[aria-pressed="true"] .cost-chip-dot {
  background: var(--c);
}
.cost-chip[aria-pressed="true"] .cost-chip-dot::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cost-alert-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-size: 13px;
}
.cost-alert-key i {
  width: 14px;
  border-top: 2px dashed #c2410c;
}
.cost-dated > summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
}
.cost-dated[open] > summary {
  margin-bottom: 12px;
}

/* ---- tables inside the white sections ---- */
.account-admin-page.admin-shell .cost-models .admin-table-region,
.account-admin-page.admin-shell .stat-detail .admin-table-region,
.account-admin-page.admin-shell .cost-dated .admin-table-region,
.account-admin-page.admin-shell .sys-row .admin-table-region,
.account-admin-page.admin-shell .tiers-wrap .admin-table-region {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.account-admin-page.admin-shell .admin-table {
  font-size: 13px;
}
.account-admin-page.admin-shell .admin-table thead th {
  background: #fff;
  color: var(--ad-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
}
.account-admin-page.admin-shell .admin-table th,
.account-admin-page.admin-shell .admin-table td {
  border-bottom: 1px solid var(--ad-line);
}
.account-admin-page.admin-shell .admin-table tbody tr {
  transition: background calc(150ms * var(--ad-motion));
}
.account-admin-page.admin-shell .admin-table tbody tr:hover {
  background: var(--ad-bg);
}
/* Part 24h: six columns do not fit the half-width card; the failures table scrolls INSIDE its card (the 邀请与额度 rule above makes
   every region overflow visible, which pushed the whole page 349 px sideways). */
.account-admin-page.admin-shell .sys-failures {
  min-width: 0;
  max-width: 100%;
}
.account-admin-page.admin-shell .sys-failures .admin-table-region,
.account-admin-page.admin-shell .sys-failures .admin-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}
/* Part 24h: the failing table of a retention failure. A schema name can be 64 characters: it stays on one line, is cut with an
   ellipsis at 24ch, and the full name is in the hover bubble (focusable, so the keyboard sees it too). */
.account-admin-page.admin-shell .sys-table-cell {
  display: inline-block;
  max-width: 24ch;
}
/* the clipped text is a child of the anchor that carries the bubble, so the bubble itself is never clipped */
.account-admin-page.admin-shell .sys-table-name {
  display: block;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.account-admin-page.admin-shell .sys-table-none {
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .admin-table .is-end {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.account-admin-page.admin-shell .admin-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: #f3f0ec;
  color: var(--ad-text);
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .admin-badge[data-tone="ok"] {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .admin-badge[data-tone="warn"] {
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
.account-admin-page.admin-shell .admin-badge[data-tone="danger"] {
  background: #ffe4dc;
  color: #8a2a0a;
}
.account-admin-page.admin-shell .admin-badge[data-tone="info"] {
  background: #e3eeff;
  color: #1c4fa0;
}

/* ---- 玩家统计 ---- */
.stat-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.stat-kpis:empty {
  display: none;
}
.stat-characters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.stat-character {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #f7f4f0;
  animation: adIn calc(360ms * var(--ad-motion)) var(--ad-ease) both;
}
.stat-character-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
}
.stat-character-count b {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.stat-character-sub {
  font-size: 13px;
}
.stat-share {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #efebe6;
}
.stat-share-fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--c, var(--ad-primary));
  animation: statFill calc(700ms * var(--ad-motion)) var(--ad-ease) both;
}
.stat-share-text {
  color: var(--ad-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.stat-detail > .admin-table-region:not([hidden]),
.stat-detail > .stat-characters-box:not([hidden]) {
  animation: adIn calc(320ms * var(--ad-motion)) var(--ad-ease) both;
}

/* ---- 系统状态 ---- */
.sys-row {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
}
.sys-top {
  grid-template-columns: 1.3fr 1fr 1fr;
}
.sys-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sys-wide {
  grid-template-columns: minmax(0, 1fr);
}
.account-admin-page.admin-shell .sys-row > .system-section {
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  border-radius: 24px;
  background: #fff;
  animation: adIn calc(400ms * var(--ad-motion)) var(--ad-ease) both;
}
.account-admin-page.admin-shell .sys-row > .system-section:nth-child(2) {
  animation-delay: calc(60ms * var(--ad-motion));
}
.account-admin-page.admin-shell .sys-row > .system-section:nth-child(3) {
  animation-delay: calc(120ms * var(--ad-motion));
}
.account-admin-page.admin-shell .system-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
}
.account-admin-page.admin-shell .admin-kv {
  gap: 8px 14px;
  font-size: 13px;
}
.account-admin-page.admin-shell .admin-kv dt {
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .sys-version {
  background: var(--ad-tint) !important;
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .sys-version .admin-kv dt {
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .sys-version .admin-kv dd {
  font-size: 15px;
  font-weight: 700;
}
.account-admin-page.admin-shell .sys-version .admin-kv dd:first-of-type {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.account-admin-page.admin-shell .sys-version .admin-badge {
  font-size: 11px;
}
.account-admin-page.admin-shell .sys-switches .admin-kv {
  grid-template-columns: max-content max-content max-content max-content;
  gap: 8px 18px;
}
.account-admin-page.admin-shell .sys-switches .admin-kv dt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--ad-text);
}
@container adc (max-width: 940px) {
  .sys-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sys-top > :first-child {
    grid-column: 1 / -1;
  }
  .sys-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .ov-yesterday,
  .cost-cards,
  .stat-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sys-switches .admin-kv {
    grid-template-columns: max-content max-content;
  }
}

/* ---- 邀请与额度 ---- */
.tiers-create-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  opacity: 0;
  transition:
    grid-template-rows calc(360ms * var(--ad-motion)) var(--ad-ease),
    opacity calc(240ms * var(--ad-motion)),
    margin calc(360ms * var(--ad-motion)) var(--ad-ease);
}
.tiers-create-wrap[data-open="true"] {
  grid-template-rows: 1fr;
  margin: 0 0 20px;
  opacity: 1;
}
.tiers-create-inner {
  min-height: 0;
  overflow: hidden;
}
.account-admin-page.admin-shell .tiers-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
  max-width: none;
  margin: 0;
  padding: 20px 24px;
  border-radius: 24px;
  background: #fff;
}
.tiers-form .tiers-field:first-child {
  grid-column: span 2;
}
.tiers-refill {
  display: contents;
}
.tiers-label,
.tiers-field > label {
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-form input:not([type="checkbox"]):not([type="radio"]) {
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 14px;
}
.account-admin-page.admin-shell .tiers-kind {
  display: flex;
  gap: 4px;
  height: 40px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #f3f0ec;
}
.account-admin-page.admin-shell .tiers-kind label {
  position: relative;
  flex: 1 1 0;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition:
    background calc(200ms * var(--ad-motion)),
    box-shadow calc(200ms * var(--ad-motion));
}
.account-admin-page.admin-shell .tiers-kind input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tiers-kind label:has(input:checked) {
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(40, 24, 60, 0.14);
}
.tiers-kind label:has(input:focus-visible) {
  outline: 2px solid var(--ad-primary);
}
.tiers-test label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin-top: auto;
  font-weight: 700;
}
.tiers-problem,
.tiers-form-actions {
  grid-column: 1 / -1;
}
.tiers-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.account-admin-page.admin-shell .tiers-form button,
.account-admin-page.admin-shell .tiers-new {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-new {
  border: 0;
  background: var(--ad-primary);
  color: #fff;
  cursor: pointer;
}
.account-admin-page.admin-shell .tiers-new[aria-expanded="true"] {
  background: #fff;
  color: var(--ad-text);
}
.account-admin-page.admin-shell .tiers-new {
  transition:
    background calc(200ms * var(--ad-motion)),
    color calc(200ms * var(--ad-motion));
}
.tiers-list-head,
.tiers-detail {
  background: #fff;
}
.account-admin-page.admin-shell .tiers-list-head {
  align-items: center;
  margin: 0;
  padding: 18px 24px 8px;
  border-radius: 24px 24px 0 0;
}
.account-admin-page.admin-shell .tiers-list-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}
.tiers-summary {
  margin-right: auto;
  margin-left: 12px;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-list-head + p + .admin-table-region,
.account-admin-page.admin-shell .tiers-list-head ~ .admin-table-region {
  margin: 0;
  padding: 0 14px 12px;
  border: 0;
  border-radius: 0 0 24px 24px;
  background: #fff;
}
.account-admin-page.admin-shell .tiers-table {
  table-layout: fixed;
  min-width: 1020px;
  font-size: 14px;
}
.tiers-table td,
.tiers-table th {
  white-space: normal;
}
.tiers-col-name {
  width: 18%;
}
.tiers-col-tier {
  width: 17%;
}
.tiers-col-created {
  width: 9%;
}
.tiers-col-num {
  width: 7%;
}
.tiers-col-actions {
  width: 276px;
}
.tiers-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.tiers-test-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
  font-size: 11px;
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-actions {
  flex-wrap: nowrap;
  gap: 6px;
}
.account-admin-page.admin-shell .tiers-actions button {
  flex: none;
  width: 84px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-actions .tiers-danger {
  border-color: #f1c9bc;
  color: var(--ad-danger);
}
.account-admin-page.admin-shell .tiers-detail {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 24px;
  animation: adIn calc(360ms * var(--ad-motion)) var(--ad-ease) both;
}
.tiers-fresh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px !important;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--ad-ok-soft);
  color: var(--ad-ok) !important;
  font-size: 14px;
  font-weight: 700;
  animation: adIn calc(360ms * var(--ad-motion)) var(--ad-ease) both;
}
.tiers-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.account-admin-page.admin-shell .tiers-detail-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.tiers-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.tiers-chips > span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f0ec;
}
.tiers-chips .tiers-test-badge {
  margin: 0;
  background: var(--ad-warn-soft);
}
.account-admin-page.admin-shell .tiers-codes-table {
  table-layout: fixed;
  min-width: 880px;
}
.tiers-dcol-serial {
  width: 5%;
}
.tiers-dcol-code {
  width: 44%;
}
.tiers-dcol-state {
  width: 8%;
}
.tiers-dcol-at {
  width: 12%;
}
.tiers-dcol-player {
  width: 9%;
}
.tiers-dcol-until {
  width: 11%;
}
.tiers-dcol-action {
  width: 116px;
}
.account-admin-page.admin-shell .tiers-code-cell {
  flex-wrap: nowrap;
  min-width: 0;
}
.account-admin-page.admin-shell .tiers-code-text {
  flex: 1 1 auto;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.account-admin-page.admin-shell .tiers-copy {
  flex: none;
  width: 72px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  transition:
    background calc(200ms * var(--ad-motion)),
    color calc(200ms * var(--ad-motion));
}
.account-admin-page.admin-shell .tiers-copy.admin-secondary[aria-pressed="true"],
.account-admin-page.admin-shell .tiers-copy.admin-secondary[aria-pressed="true"]:hover {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .tiers-codes-table td button:not(.tiers-copy) {
  width: 92px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-detail-actions button {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-shown {
  border-radius: 24px;
  border: 0;
  background: #fff;
}

/* ---- the entrances ---- */
@keyframes adIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes adPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes adSpin {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes statFill {
  from {
    width: 0;
  }
}
@keyframes xyGrowA {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes xyGrowB {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes xyRevealA {
  from {
    clip-path: inset(-8px 100% -8px 0);
  }
  to {
    clip-path: inset(-8px -8px -8px 0);
  }
}
@keyframes xyRevealB {
  from {
    clip-path: inset(-8px 100% -8px 0);
  }
  to {
    clip-path: inset(-8px -8px -8px 0);
  }
}

@media (max-width: 1023px) {
  .account-admin-page.admin-shell .admin-account {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .admin-brand {
    display: flex;
  }
  .account-admin-page.admin-shell[data-mobile-ok] .admin-menu {
    top: calc(100% + 6px);
    bottom: auto;
    right: 0;
    left: auto;
  }
}

/* ---- second pass: buttons, toasts, system rows ---- */
.account-admin-page.admin-shell
button:where(:not(.seg-button, .cost-chip, .admin-nav-collapse, .admin-account-toggle, .admin-menu-item)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ad-text);
  font-weight: 700;
  text-align: center;
  transition:
    background calc(200ms * var(--ad-motion)),
    color calc(200ms * var(--ad-motion)),
    transform calc(160ms * var(--ad-motion)),
    box-shadow calc(200ms * var(--ad-motion));
}
.account-admin-page.admin-shell
  button:not(.seg-button):not(.cost-chip):not(.admin-nav-collapse):not(.admin-account-toggle):not(
    .admin-menu-item
  ):active {
  transform: scale(0.97);
}
.account-admin-page.admin-shell button.admin-secondary,
.account-admin-page.admin-shell .admin-back {
  border-color: var(--ad-border);
  background: #fff;
  color: var(--ad-text);
}
.account-admin-page.admin-shell button.admin-secondary:hover {
  background: var(--ad-bg);
}
.account-admin-page.admin-shell button:disabled {
  opacity: 0.5;
}
.account-admin-page.admin-shell .admin-toast {
  border-radius: 999px;
  background: var(--ad-text);
  color: #fff;
  animation: adPop calc(240ms * var(--ad-motion)) var(--ad-ease) both;
}
.account-admin-page.admin-shell .admin-toast[data-tone="danger"] {
  background: var(--ad-danger);
}
.account-admin-page.admin-shell select {
  min-height: 36px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  padding: 0 14px;
}
.account-admin-page.admin-shell .cost-dated {
  gap: 0;
}
.account-admin-page.admin-shell .ov-yesterday {
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
}
.account-admin-page.admin-shell .stat-detail thead th {
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.3;
}
.account-admin-page.admin-shell .stat-detail .admin-table th,
.account-admin-page.admin-shell .stat-detail .admin-table td {
  padding: 9px 8px;
}
.tiers-col-created {
  width: 11%;
}
.tiers-table td:nth-child(3) {
  white-space: nowrap;
}
.account-admin-page.admin-shell .tiers-shown button {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-shown .admin-secondary {
  border: 1px solid var(--ad-border);
}
.sys-flags {
  display: flex;
  flex-direction: column;
}
.sys-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--ad-line);
  font-size: 13px;
}
.sys-flag:first-child {
  border-top: 0;
}
.sys-flag-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.sys-flag-value {
  text-align: right;
}
.account-admin-page.admin-shell .system-topup {
  gap: 6px;
}
.account-admin-page.admin-shell .system-topup input {
  width: 64px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
}
.account-admin-page.admin-shell .system-topup button,
.account-admin-page.admin-shell #system-renew {
  height: 32px;
  min-height: 32px;
  padding: 0 16px;
  font-size: 13px;
}
.account-admin-page.admin-shell #system-renew {
  margin-top: 12px;
}
.account-admin-page.admin-shell .system-metrics .admin-bar {
  position: static;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell .system-metrics .admin-bar-title {
  display: none;
}
.account-admin-page.admin-shell .system-metrics .admin-hint {
  margin: 0 0 10px;
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell .system-result:not(:empty) {
  border: 0;
  border-radius: 20px;
  background: #fff;
}
.account-admin-page.admin-shell .models-actions {
  margin: 8px 0 0;
}

/* ---- the console fix: two columns, nothing folded ---- */
.account-admin-page.admin-shell .admin-account {
  bottom: 20px;
}
.account-admin-page.admin-shell .admin-sidebar {
  padding-bottom: 88px;
}
.admin-content > section[data-panel] {
  max-width: 1480px;
}
.admin-content > section[data-panel="members"],
.admin-content > section[data-panel="invites"],
.admin-content > section[data-panel="account"] {
  max-width: 1480px;
}
.admin-content > section[data-panel="account"] {
  max-width: 960px;
}
.tiers-layout,
.members-layout,
.points-grid {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.points-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}
.tiers-side,
.members-side,
.points-main,
.points-grid > .system-section {
  min-width: 0;
}
.account-admin-page.admin-shell .tiers-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.tiers-form .tiers-field:first-child {
  grid-column: auto;
}
.tiers-refill {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.account-admin-page.admin-shell .tiers-form-actions button {
  width: 100%;
}
.tiers-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}
.account-admin-page.admin-shell .tiers-main .admin-table-region {
  margin: 0;
  padding: 0 14px 12px;
  border: 0;
  border-radius: 0 0 24px 24px;
  background: #fff;
}
.account-admin-page.admin-shell .tiers-table {
  min-width: 0;
  table-layout: fixed;
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-table th,
.account-admin-page.admin-shell .tiers-table td {
  padding: 9px 8px;
}
.tiers-col-name {
  width: 17%;
}
.tiers-col-tier {
  width: 17%;
}
.tiers-col-created {
  width: 12%;
}
.tiers-col-num {
  width: 8%;
}
.tiers-col-actions {
  width: 190px;
}
.account-admin-page.admin-shell .tiers-table tbody tr[data-batch] {
  cursor: pointer;
}
.account-admin-page.admin-shell .tiers-table tbody tr.is-selected {
  background: var(--ad-bg);
  box-shadow: inset 3px 0 0 var(--ad-primary);
}
.account-admin-page.admin-shell .tiers-actions {
  gap: 6px;
}
.account-admin-page.admin-shell .tiers-actions button {
  width: 84px;
}
.account-admin-page.admin-shell .tiers-detail {
  margin-top: 16px;
}
.account-admin-page.admin-shell .tiers-detail-head {
  align-items: center;
}
.account-admin-page.admin-shell .tiers-detail-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}
.account-admin-page.admin-shell .tiers-codes-table {
  min-width: 0;
  font-size: 12px;
}
.account-admin-page.admin-shell .tiers-codes-table th,
.account-admin-page.admin-shell .tiers-codes-table td {
  padding: 8px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tiers-dcol-serial {
  width: 40px;
}
.tiers-dcol-code {
  width: 36%;
}
.tiers-dcol-state {
  width: 64px;
}
.tiers-dcol-at {
  width: 13%;
}
.tiers-dcol-player {
  width: 10%;
}
.tiers-dcol-until {
  width: 13%;
}
.tiers-dcol-action {
  width: 100px;
}
.account-admin-page.admin-shell .tiers-code-cell {
  flex-wrap: wrap;
  gap: 6px;
}
.account-admin-page.admin-shell .tiers-code-text {
  flex: 1 1 140px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  font-size: 11px;
}
.account-admin-page.admin-shell .tiers-copy {
  width: 64px;
}
.account-admin-page.admin-shell .tiers-codes-table td button:not(.tiers-copy) {
  width: 88px;
}
/* 管理员与权限 */
.account-admin-page.admin-shell .members-side form {
  display: grid;
  gap: 12px;
  max-width: none;
  margin: 0;
  padding: 18px 20px;
  border-radius: 24px;
  background: #fff;
}
.members-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.account-admin-page.admin-shell .admin-member {
  display: block;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 24px;
  background: #fff;
}
.account-admin-page.admin-shell .admin-member > :not(.admin-member-head) {
  margin-left: 14px;
  margin-right: 14px;
}
.account-admin-page.admin-shell .admin-member-head {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  background: transparent;
  color: var(--ad-text);
  font-size: 14px;
  text-align: left;
}
.account-admin-page.admin-shell .admin-member-head:hover {
  background: var(--ad-bg);
}
.account-admin-page.admin-shell .admin-member-head[aria-expanded="true"] {
  background: #f3f0ec;
}
.account-admin-page.admin-shell .admin-member > button:not(.admin-member-head) {
  margin-top: 10px;
  margin-bottom: 10px;
}
/* 积分发放 */
.account-admin-page.admin-shell .points-form {
  max-width: none;
  padding: 18px 20px;
  border-radius: 24px;
  background: #fff;
}
.account-admin-page.admin-shell .points-grid > .system-section {
  margin: 0;
  padding: 18px 20px;
  border-radius: 24px;
  background: #fff;
}
.points-live {
  min-height: 1.4em;
  white-space: pre-line;
  font-size: 14px;
  font-weight: 700;
  transition: opacity calc(200ms * var(--ad-motion));
}
.points-live:empty {
  display: none;
}
/* 玩家统计: 按角色 and 按模型 side by side */
.stat-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.stat-pair > .stat-detail {
  margin: 0;
}
.stat-pair .stat-characters {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.account-admin-page.admin-shell .stat-detail > h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}
.account-admin-page.admin-shell .cost-dated > h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 900;
}
.ops-bar {
  margin: 0 0 10px;
}
.account-admin-page.admin-shell .models-banner {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--ad-warn);
}
.account-admin-page.admin-shell .models-banner:empty {
  display: none;
}

/* ---- fit at 1280: the columns are sized in pixels where the content is short ---- */
.account-admin-page.admin-shell .admin-content {
  padding: 28px 24px 40px;
}
.tiers-layout,
.members-layout {
  grid-template-columns: 290px minmax(0, 1fr);
}
.account-admin-page.admin-shell .tiers-main .admin-table-region {
  padding: 0 12px 10px;
}
.tiers-col-name {
  width: 17%;
}
.tiers-col-tier {
  width: 16%;
}
.tiers-col-created {
  width: 88px;
}
.tiers-col-num {
  width: 48px;
}
.tiers-col-actions {
  width: 176px;
}
.account-admin-page.admin-shell .tiers-table th,
.account-admin-page.admin-shell .tiers-table td {
  padding: 9px 6px;
  font-size: 12px;
}
.account-admin-page.admin-shell .tiers-table td:nth-child(3) {
  font-size: 12px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .tiers-detail {
  padding: 18px 16px;
}
.tiers-dcol-serial {
  width: 36px;
}
.tiers-dcol-code {
  width: auto;
}
.tiers-dcol-state {
  width: 64px;
}
.tiers-dcol-at,
.tiers-dcol-until {
  width: 70px;
}
.tiers-dcol-player {
  width: 76px;
}
.tiers-dcol-action {
  width: 88px;
}
.account-admin-page.admin-shell .tiers-code-cell {
  flex-wrap: nowrap;
  align-items: center;
}
.account-admin-page.admin-shell .tiers-code-text {
  flex: 1 1 0;
  min-width: 0;
}
.account-admin-page.admin-shell .tiers-codes-table .admin-badge {
  white-space: nowrap;
}
.account-admin-page.admin-shell .tiers-codes-table td button:not(.tiers-copy) {
  width: 76px;
}
.account-admin-page.admin-shell .tiers-actions button {
  width: 80px;
}

.members-layout {
  grid-template-columns: 440px minmax(0, 1fr);
}
.account-admin-page.admin-shell .points-form fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  border-radius: 20px;
  border-color: var(--ad-border);
}
.account-admin-page.admin-shell .points-form fieldset legend {
  font-weight: 700;
}
.account-admin-page.admin-shell .points-form input[type="number"],
.account-admin-page.admin-shell .points-form input:not([type]),
.account-admin-page.admin-shell .points-form select {
  border-radius: 999px;
}

.account-admin-page.admin-shell .models-actions + h3,
.account-admin-page.admin-shell .models-recent {
  margin-top: 20px;
}

/* ======================================================================================================================
   Part 24b-2: 角色工作台 (list | editor | 预演), 关系与故事, 共创收件箱, and the permission tooltips.
   Same rules as 24b-1: motion is multiplied by --ad-motion (0 under prefers-reduced-motion), data colours travel as custom
   properties, nothing that can be shown waits behind a fold, a tab or a "more" button.
   ====================================================================================================================== */ .account-admin-page.admin-shell
  .admin-content
  > section[data-panel="characters"],
.account-admin-page.admin-shell .admin-content > section[data-panel="cast"],
.account-admin-page.admin-shell .admin-content > section[data-panel="cocreation"] {
  max-width: none;
} /* ---- 角色工作台 ---- */
.account-admin-page.admin-shell .admin-split {
  height: auto;
  align-items: start;
}
.account-admin-page.admin-shell .admin-split-list,
.account-admin-page.admin-shell .admin-split-detail {
  overflow: visible;
  padding: 0;
}
.account-admin-page.admin-shell .wb {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.account-admin-page.admin-shell .wb:has(.wb-preview:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
}
@container adc (min-width: 1240px) {
  .account-admin-page.admin-shell .wb:has(.wb-preview:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
  }
}
.account-admin-page.admin-shell .wb-list,
.account-admin-page.admin-shell .wb-editor,
.account-admin-page.admin-shell .wb-preview {
  min-width: 0;
  background: #fff;
  border-radius: 24px;
  padding: 14px;
}
.account-admin-page.admin-shell .wb-list {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px !important;
  max-height: calc(100vh - 32px);
  overflow-y: auto !important;
}
.account-admin-page.admin-shell .wb-list #wb-roles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-admin-page.admin-shell .wb-list .admin-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background calc(200ms * var(--ad-motion)) var(--ad-ease),
    color calc(200ms * var(--ad-motion)) var(--ad-ease),
    transform calc(160ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .wb-list .admin-pick strong {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
}
.account-admin-page.admin-shell .wb-list .admin-pick:hover {
  background: #f3f0ec;
}
.account-admin-page.admin-shell .wb-list .admin-pick:active {
  transform: scale(0.98);
}
.account-admin-page.admin-shell .wb-list .admin-pick[aria-current="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .wb-list .admin-pick .admin-badge {
  font-size: 11px;
}
.account-admin-page.admin-shell .admin-pick-cc {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
.account-admin-page.admin-shell .wb-list #wb-new {
  height: 40px;
  border: 1px dashed #bdb5ac;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.account-admin-page.admin-shell .wb-editor > .admin-empty {
  margin: 24px 8px;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .wb-editor h2 {
  font-size: 22px;
}
.account-admin-page.admin-shell .wb-editor .admin-section-index {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}
.account-admin-page.admin-shell .wb-editor .admin-section-index a,
.account-admin-page.admin-shell .wb-editor .admin-section-index button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 30px;
  text-decoration: none;
  transition: background calc(180ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .wb-editor .admin-section-index a:hover,
.account-admin-page.admin-shell .wb-editor .admin-section-index button:hover {
  background: #f3f0ec;
}
.account-admin-page.admin-shell .wb-editor form.character-profile-form {
  display: grid;
  gap: 14px;
}
.account-admin-page.admin-shell .wb-editor form.character-profile-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.account-admin-page.admin-shell .wb-editor form.character-profile-form legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 900;
}
.account-admin-page.admin-shell .wb-editor label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .wb-editor label.admin-check {
  display: flex;
  gap: 8px;
  font-weight: 400;
}
.account-admin-page.admin-shell .wb-editor input[type="text"],
.account-admin-page.admin-shell .wb-editor input[type="date"],
.account-admin-page.admin-shell .wb-editor input[type="number"],
.account-admin-page.admin-shell .wb-editor select,
.account-admin-page.admin-shell .wb-editor textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ad-border);
  border-radius: 18px;
  background: #fff;
  font: inherit;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
}
.account-admin-page.admin-shell .wb-editor textarea {
  resize: vertical;
}
.account-admin-page.admin-shell .wb-editor details {
  border-top: 1px solid var(--ad-line);
  padding: 10px 0 0;
}
.account-admin-page.admin-shell .wb-editor details > summary {
  font-size: 15px;
  font-weight: 900;
  cursor: default;
  list-style: none;
}
.account-admin-page.admin-shell .wb-editor details > summary::-webkit-details-marker {
  display: none;
}
.account-admin-page.admin-shell .wb-editor .profile-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.account-admin-page.admin-shell .wb-editor pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f7f4f0;
  font-size: 12px;
}
.account-admin-page.admin-shell .wb-preview {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 16px;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-bar {
  flex-wrap: wrap;
} /* ---- 主色 ---- */
.account-admin-page.admin-shell .colour-field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.account-admin-page.admin-shell .colour-field > label {
  flex: 1 1 200px;
}
.account-admin-page.admin-shell .colour-field input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--ad-border);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.account-admin-page.admin-shell .colour-field input[aria-invalid="true"] {
  border-color: var(--ad-danger);
  box-shadow: 0 0 0 2px rgba(163, 51, 15, 0.18);
}
.account-admin-page.admin-shell .colour-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: var(--chip-tint, #f3f0ec);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.08);
  transition: background calc(240ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .colour-chip[data-state="empty"]::before {
  content: "默认";
  color: var(--ad-muted);
  font-size: 12px;
  padding-left: 8px;
}
.account-admin-page.admin-shell .colour-chip[data-state="invalid"]::before {
  content: "格式不对";
  color: var(--ad-danger);
  font-size: 12px;
  padding-left: 8px;
}
.account-admin-page.admin-shell .colour-chip b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--chip-ink, var(--ad-text));
  font-weight: 900;
}
.account-admin-page.admin-shell .colour-chip i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 2px #fff;
}
.account-admin-page.admin-shell .colour-chip i[data-n="3"] {
  width: 24px;
  height: 24px;
} /* ---- permission descriptions: a hover / focus tooltip, the grid itself shows short names only ---- */
.account-admin-page.admin-shell .permission-row {
  position: relative;
}
.account-admin-page.admin-shell .admin-danger,
.account-admin-page.admin-shell .admin-member > button.admin-danger {
  background: #fff;
  color: var(--ad-danger);
  border: 1px solid #e8c6bb;
  border-radius: 999px;
} /* ---- 关系与故事 ---- */

/* Never set is a dashed empty cell; 0 stars is a filled, lightest one. The two are never the same picture. */

@keyframes csPop {
  0% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
/* 未设置 is written out, in italics and a dashed pill: it must never read as a 0. */

.account-admin-page.admin-shell .is-lived {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .is-heard {
  background: #e2eeff;
  color: #1c4fa0;
}
.account-admin-page.admin-shell .is-unknown {
  background: #f3f0ec;
  color: var(--ad-muted);
}
/* A setting somebody made by hand is outlined in orange; the computed default has no outline. */

/* ---- 共创收件箱: filters are chips, the detail sits to the right of the list ---- */
.account-admin-page.admin-shell #admin-cocreation {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: auto;
}
.account-admin-page.admin-shell #admin-cocreation > h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.account-admin-page.admin-shell .cc-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.account-admin-page.admin-shell .cc-list-column {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 32px);
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85);
}
.account-admin-page.admin-shell .cc-list-column .cc-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.account-admin-page.admin-shell .cc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-admin-page.admin-shell .cc-filter-chip {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #f3f0ec;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background calc(200ms * var(--ad-motion)) ease,
    color calc(200ms * var(--ad-motion)) ease,
    transform calc(160ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .cc-filter-chip[aria-pressed="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .cc-filter-chip:active {
  transform: scale(0.97);
}
.account-admin-page.admin-shell .cc-list-column input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
}
.account-admin-page.admin-shell .cc-list-column .cc-list {
  overflow-y: auto;
  gap: 6px;
  padding-right: 2px;
}
.account-admin-page.admin-shell .cc-row {
  border: 0;
  border-radius: 18px;
  background: var(--ad-bg);
  animation: adIn calc(300ms * var(--ad-motion)) var(--ad-ease) both;
  transition:
    background calc(200ms * var(--ad-motion)) ease,
    box-shadow calc(200ms * var(--ad-motion)) ease;
}
.account-admin-page.admin-shell .cc-row.is-active {
  background: var(--ad-tint);
  box-shadow: inset 3px 0 0 var(--ad-primary);
}
.account-admin-page.admin-shell .cc-row-head,
.account-admin-page.admin-shell .cc-row-head strong {
  color: var(--ad-text);
}
.account-admin-page.admin-shell .cc-chip {
  background: #f3f0ec;
  color: var(--ad-text);
}
.account-admin-page.admin-shell .cc-chip-new {
  background: #c2410c;
  color: #fff;
}
.account-admin-page.admin-shell .cc-chip-star {
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
.account-admin-page.admin-shell .cc-chip-adopted {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .cc-detail {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 0;
  border-radius: 24px;
  background: #fff;
  padding: 20px 22px;
}
.account-admin-page.admin-shell .cc-answer {
  border-radius: 18px;
  background: #f7f4f0;
}
@container adc (max-width: 1100px) {
  .account-admin-page.admin-shell .cc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
} /* The console's generic button (padding, minimum size) must not reach the grid cells and the half-star hit areas. */

.account-admin-page.admin-shell .cs-group-card,
.account-admin-page.admin-shell .cs-story-title,
.account-admin-page.admin-shell .cs-chip:not([aria-pressed="true"]),
.account-admin-page.admin-shell .cc-filter-chip:not([aria-pressed="true"]) {
  color: var(--ad-text);
}

.account-admin-page.admin-shell .cc-row-open {
  background: transparent;
  color: var(--ad-text);
  border-radius: 12px;
  padding: 2px 0;
  min-height: 44px;
  justify-content: flex-start;
  font-weight: 400;
  box-shadow: none;
}
.account-admin-page.admin-shell .cc-row-open .cc-first {
  color: var(--ad-text);
}
.account-admin-page.admin-shell .cc-row-open .cc-chips {
  flex-wrap: wrap;
}

.account-admin-page.admin-shell .admin-pick-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-admin-page.admin-shell .admin-pick-row .cocreation-badge {
  align-self: flex-start;
  margin: 0 0 4px 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  transition: transform calc(160ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .admin-pick-row .cocreation-badge:hover {
  transform: translateY(-1px);
}

/* Part 26b: 审核模型 (the switch on 模型与价格) and 审核对比 (a section of 预演). Tokens only; no inline styles. */
.account-admin-page.admin-shell .models-review {
  margin: 0 0 16px;
  padding: 14px 16px;
}
.account-admin-page.admin-shell .models-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.account-admin-page.admin-shell .models-review-head h3 {
  margin: 0;
  font-size: 15px;
}
.account-admin-page.admin-shell .models-review-head .seg {
  margin-left: auto;
}
.account-admin-page.admin-shell .models-review-note {
  margin: 8px 0 0;
}
.account-admin-page.admin-shell .models-review h4 {
  margin: 14px 0 4px;
  font-size: 13px;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .models-review-recent {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}
.account-admin-page.admin-shell .pw-review-section {
  margin: 16px 0 0;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  background: var(--ad-surface);
}
.account-admin-page.admin-shell .pw-review-section > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
}
.account-admin-page.admin-shell .pw-review-section > summary:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: -2px;
}
.account-admin-page.admin-shell .rc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 14px;
}
.account-admin-page.admin-shell .rc h3 {
  margin: 0;
  font-size: 15px;
}
.account-admin-page.admin-shell .rc-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ad-hairline, var(--ad-border));
  border-radius: var(--ad-radius);
  background: var(--ad-bg);
}
.account-admin-page.admin-shell .rc-start p {
  margin: 0;
}
.account-admin-page.admin-shell .rc-runs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-admin-page.admin-shell .rc-runs .seg-button {
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  padding: 4px 12px;
}
.account-admin-page.admin-shell .rc-runs .seg-button[aria-pressed="true"],
.account-admin-page.admin-shell .rc-marks .seg-button[aria-pressed="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 600;
}
.account-admin-page.admin-shell .rc-table th[scope="row"] {
  font-weight: 500;
  text-align: left;
}
.account-admin-page.admin-shell .rc-table td {
  font-variant-numeric: tabular-nums;
}
.account-admin-page.admin-shell .rc-actions {
  display: flex;
  gap: 8px;
}
.account-admin-page.admin-shell .rc-export {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  background: var(--ad-bg);
  font-size: 12.5px;
  line-height: 1.7;
  tab-size: 16;
  white-space: pre;
  height: auto;
  max-height: none;
}
.account-admin-page.admin-shell .rc-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.account-admin-page.admin-shell .rc-side {
  padding: 12px;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  background: var(--ad-surface);
  min-width: 0;
}
.account-admin-page.admin-shell .rc-side h4 {
  margin: 0 0 4px;
}
.account-admin-page.admin-shell .rc-expect {
  margin: 8px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.account-admin-page.admin-shell .rc-metrics {
  margin: 6px 0;
}
.account-admin-page.admin-shell .rc-marks {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.account-admin-page.admin-shell .rc-marks .seg-button {
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  padding: 4px 12px;
}
.account-admin-page.admin-shell .rc-diff del {
  background: var(--ad-danger-soft);
  color: var(--ad-danger);
  text-decoration: line-through;
}
.account-admin-page.admin-shell .rc-diff ins {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
  text-decoration: none;
}
.account-admin-page.admin-shell .rc-vs {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  overflow: hidden;
}
.account-admin-page.admin-shell .rc-vs-head,
.account-admin-page.admin-shell .rc-vs-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 6px 10px;
}
.account-admin-page.admin-shell .rc-vs-head {
  background: var(--ad-bg);
  font-weight: 600;
  font-size: 12.5px;
}
.account-admin-page.admin-shell .rc-vs-row + .rc-vs-row {
  border-top: 1px solid var(--ad-hairline, var(--ad-border));
}
@media (max-width: 1023px) {
  .account-admin-page.admin-shell .rc-sides {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-admin-page.admin-shell .models-review-head .seg {
    margin-left: 0;
  }
}
.account-admin-page.admin-shell .wb-editor pre.rc-export {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  white-space: pre;
  border-radius: var(--ad-radius);
}
/* ======================================================================================================================
   Part 24b-3: calmer colour, one page frame, a sidebar that stays, no endless pages (design/burbur-v2: Palette, WorkbenchV3).
   This block is last in the console: the tokens (--ad-*) are defined on the shell above; here the page itself scrolls, the sidebar is
   sticky, every page has the same title row and the same content grid, and the buttons, chips and fields share one height scale
   (32 for what sits in a row, 40 for what stands alone). Motion is multiplied by --ad-motion as before (0 under reduced motion).
   ====================================================================================================================== */
html:has(.admin-shell),
body:has(.admin-shell) {
  height: auto;
  overflow: visible;
}
.local-admin-root:has(.admin-shell) {
  display: block;
  height: auto;
  min-height: 100dvh;
  background: #f6f4f1;
}
.account-admin-page.admin-shell {
  display: block;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  background: var(--ad-bg);
  color: var(--ad-text);
}
.account-admin-page.admin-shell .admin-frame {
  display: grid;
  grid-template-columns: var(--ad-nav-width) minmax(0, 1fr);
  align-items: start;
  min-height: 100dvh;
}
.account-admin-page.admin-shell[data-surface="login"] .admin-frame {
  grid-template-columns: minmax(0, 1fr);
}
/* The sidebar: as tall as the window, fixed while the page scrolls; it scrolls by itself only when the navigation is taller. */
.account-admin-page.admin-shell .admin-sidebar {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  height: 100dvh;
  overflow-y: auto;
  padding: 24px 14px 96px;
  gap: 16px;
  border-right: 1px solid var(--ad-hairline);
  background: #fbfaf8;
}
.account-admin-page.admin-shell .admin-nav-group {
  gap: 2px;
}
.account-admin-page.admin-shell .admin-nav-title {
  padding: 12px 12px 4px;
  color: var(--ad-muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
}
.account-admin-page.admin-shell .admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  min-height: 38px;
  padding: 0 12px 0 28px;
  border-radius: 12px;
  color: var(--ad-text);
  font-size: 14px;
  font-weight: 500;
}
.account-admin-page.admin-shell .admin-nav-item:hover {
  background: #f3f1ee;
}
.account-admin-page.admin-shell .admin-nav-item[aria-current="page"] {
  padding-left: 12px;
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell .admin-nav-item[aria-current="page"]::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ad-primary);
  animation: adPop calc(260ms * var(--ad-motion)) var(--ad-ease) both;
}
.account-admin-page.admin-shell .admin-nav-item[data-trail="true"] {
  background: transparent;
}
.account-admin-page.admin-shell .admin-tag {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .admin-account-toggle {
  height: 48px;
  border: 1px solid var(--ad-hairline);
  background: #fff;
  color: var(--ad-text);
  box-shadow: none;
}
.account-admin-page.admin-shell .admin-account-toggle:hover {
  background: #fff;
  border-color: var(--ad-border);
}
.account-admin-page.admin-shell .admin-menu {
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  box-shadow: 0 12px 32px rgba(43, 40, 51, 0.12);
}
.account-admin-page.admin-shell .admin-menu-item {
  border-radius: 10px;
}
.account-admin-page.admin-shell .admin-menu-item:hover,
.account-admin-page.admin-shell .admin-menu-item:focus-visible {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}

/* ---- the page: one width, one gap, one title row ---- */
.account-admin-page.admin-shell .admin-content {
  display: block;
  box-sizing: border-box;
  min-height: 100dvh;
  overflow: visible;
  padding: 24px 32px 40px;
}
.account-admin-page.admin-shell .admin-content > section[data-panel],
.account-admin-page.admin-shell .admin-content > section[data-panel="members"],
.account-admin-page.admin-shell .admin-content > section[data-panel="invites"],
.account-admin-page.admin-shell .admin-content > section[data-panel="account"],
.account-admin-page.admin-shell .admin-content > section[data-panel="characters"],
.account-admin-page.admin-shell .admin-content > section[data-panel="cast"],
.account-admin-page.admin-shell .admin-content > section[data-panel="cocreation"] {
  max-width: var(--ad-page-max);
}
.account-admin-page.admin-shell[data-surface="login"] .admin-content {
  display: flex;
  justify-content: center;
}
.account-admin-page.admin-shell .admin-content > section[data-panel]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--ad-gap);
}
.account-admin-page.admin-shell[data-surface="login"] .admin-content > section[data-panel]:not([hidden]) {
  display: block;
}
.account-admin-page.admin-shell .admin-content > section[data-panel] > h2,
.account-admin-page.admin-shell .admin-content .page-head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.account-admin-page.admin-shell .admin-content .page-head {
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  height: 56px;
  margin: 0;
}
.account-admin-page.admin-shell .admin-content .page-head > :last-child:not(h2) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.account-admin-page.admin-shell .admin-content .page-head > :last-child:empty {
  display: none;
}
.account-admin-page.admin-shell .page-kicker {
  display: inline;
  margin: 0;
  color: var(--ad-muted);
  font-family: inherit;
  font-size: 13px;
}
/* the status / main action chip that sits on the right of a title */
.account-admin-page.admin-shell .wb-chip,
.account-admin-page.admin-shell .ov-status,
.account-admin-page.admin-shell .sys-overall {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: #f3f1ee;
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.account-admin-page.admin-shell .wb-chip[data-tone="warn"] {
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
.account-admin-page.admin-shell .wb-chip[hidden] {
  display: none;
}

/* ---- cards: one padding, one radius, one hairline ---- */
.account-admin-page.admin-shell
:is(
  .overview-card,
  .cost-dated,
  .stat-detail,
  .sys-row > .system-section,
  .tiers-form,
  .tiers-detail,
  .tiers-shown,
  .members-side form,
  .admin-member,
  .points-form,
  .points-grid > .system-section,
  .cs-card,
  .cc-list-column,
  .cc-detail,
  .wb-card,
  .wb-preview,
  .system-result:not(:empty)
) {
  box-sizing: border-box;
  padding: var(--ad-card-pad);
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
  box-shadow: none;
}

/* ---- buttons: white with a border; ONE solid primary per screen (.admin-primary) ---- */
.account-admin-page.admin-shell
button:where(:not(.seg-button, .cost-chip, .admin-nav-collapse, .admin-account-toggle, .admin-menu-item)) {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ad-text);
  font-size: 14px;
  font-weight: 700;
}
.account-admin-page.admin-shell
  button:where(:not(.seg-button, .cost-chip, .admin-nav-collapse, .admin-account-toggle, .admin-menu-item)):hover:not(
    :disabled
  ) {
  background: #faf9f7;
  border-color: #cfc9c0;
}
.account-admin-page.admin-shell button.admin-primary,
.account-admin-page.admin-shell .cs button.cs-primary,
.account-admin-page.admin-shell button.tiers-new,
.account-admin-page.admin-shell [data-surface="login"] button[type="submit"] {
  border-color: var(--ad-primary);
  background: var(--ad-primary);
  color: #fff;
}
.account-admin-page.admin-shell button.admin-primary:hover:not(:disabled),
.account-admin-page.admin-shell .cs button.cs-primary:hover:not(:disabled),
.account-admin-page.admin-shell button.tiers-new:hover:not(:disabled) {
  border-color: var(--ad-primary-hover);
  background: var(--ad-primary-hover);
}
.account-admin-page.admin-shell button.tiers-new[aria-expanded="true"] {
  border-color: var(--ad-border);
  background: #fff;
  color: var(--ad-text);
}
.account-admin-page.admin-shell button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* destructive: danger-outlined; only its confirm step (inside a dialog or a confirm box) is solid */
.account-admin-page.admin-shell .admin-danger,
.account-admin-page.admin-shell .tiers-danger,
.account-admin-page.admin-shell .admin-member > button.admin-danger {
  border: 1px solid #e3b5ab;
  background: #fff;
  color: var(--ad-danger);
}
.account-admin-page.admin-shell .admin-danger:hover:not(:disabled),
.account-admin-page.admin-shell .tiers-danger:hover:not(:disabled) {
  background: var(--ad-danger-soft);
}
.account-admin-page.admin-shell .admin-confirm button:not(.admin-secondary):not(:disabled),
.account-admin-page.admin-shell .admin-dialog button.admin-danger-solid {
  border-color: var(--ad-danger);
  background: var(--ad-danger);
  color: #fff;
}
.account-admin-page.admin-shell button:focus-visible,
.account-admin-page.admin-shell a:focus-visible,
.account-admin-page.admin-shell input:focus-visible,
.account-admin-page.admin-shell select:focus-visible,
.account-admin-page.admin-shell textarea:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: 2px;
}

/* ---- fields: 40 high, 12 radius, one border ---- */
.account-admin-page.admin-shell
input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"]),
.account-admin-page.admin-shell select {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ad-text);
  font: inherit;
  font-size: 14px;
}
.account-admin-page.admin-shell input[type="search"] {
  border-radius: 999px;
}
.account-admin-page.admin-shell textarea {
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ad-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
}
.account-admin-page.admin-shell input[type="checkbox"],
.account-admin-page.admin-shell input[type="radio"] {
  accent-color: var(--ad-primary);
}
.account-admin-page.admin-shell label,
.account-admin-page.admin-shell .tiers-field > span {
  font-size: 13px;
}
.account-admin-page.admin-shell input::placeholder,
.account-admin-page.admin-shell textarea::placeholder {
  color: #77717f;
}

/* ---- pills: the selected one is the tint with primary text, never a black pill ---- */
.account-admin-page.admin-shell .seg {
  background: #f3f1ee;
}
.account-admin-page.admin-shell .seg-button {
  height: 30px;
  color: var(--ad-text);
}
.account-admin-page.admin-shell .page-head .seg {
  background: #f3f1ee;
  border: 0;
}
.account-admin-page.admin-shell .seg-m .seg-button,
.account-admin-page.admin-shell .page-head .seg-button {
  height: 30px;
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .seg-button[aria-pressed="true"],
.account-admin-page.admin-shell .seg-icon[aria-pressed="true"],
.account-admin-page.admin-shell .cost-chart-bar .seg-button[aria-pressed="true"],
.account-admin-page.admin-shell .stat-detail .seg-button[aria-pressed="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  box-shadow: none;
}
.account-admin-page.admin-shell :is(.cs-chip, .cc-filter-chip, .cost-chip) {
  height: 30px;
  border: 1px solid var(--ad-border);
  background: #fff;
  color: var(--ad-text);
}
.account-admin-page.admin-shell :is(.cs-chip, .cc-filter-chip, .cost-chip)[aria-pressed="true"] {
  border-color: transparent;
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}

/* ---- 角色工作台: a row of role pills, then the editor (one section at a time) and 预演 ---- */
.account-admin-page.admin-shell .wb-roster,
.account-admin-page.admin-shell .wb-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.account-admin-page.admin-shell #admin-characters {
  display: flex;
  flex-direction: column;
  gap: var(--ad-gap);
}
.account-admin-page.admin-shell .wb-roles .admin-empty {
  padding: 0;
}
.account-admin-page.admin-shell .wb-roles .admin-pick-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 48px;
  padding: 0 8px 0 4px;
  border: 1px solid var(--ad-hairline);
  border-radius: 999px;
  background: #fff;
  transition: background calc(200ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .wb-roles .admin-pick-row:hover {
  background: #faf9f7;
}
.account-admin-page.admin-shell .wb-roles .admin-pick-row:has(.admin-pick[aria-current="true"]) {
  border-color: transparent;
  background: var(--ad-tint);
}
.account-admin-page.admin-shell .wb-roles .admin-pick {
  display: inline-flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 40px;
  min-height: 40px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ad-text);
  font-size: 15px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .wb-roles .admin-pick:hover,
.account-admin-page.admin-shell .wb-roles .admin-pick[aria-current="true"] {
  background: transparent;
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .wb-roles .admin-pick strong {
  flex: none;
  overflow: visible;
  font-size: 15px;
  font-weight: 900;
  text-overflow: clip;
  white-space: nowrap;
}
.account-admin-page.admin-shell .admin-pick-dot {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dot, #ddd8f0);
  box-shadow: inset 0 0 0 3px #fff;
}
.account-admin-page.admin-shell .wb-roles .admin-pick .admin-badge {
  flex: none;
  white-space: nowrap;
}
.account-admin-page.admin-shell .wb-roles .admin-pick-cc {
  display: none;
}
.account-admin-page.admin-shell .wb-roles .cocreation-badge {
  flex: none;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}
.account-admin-page.admin-shell #wb-new {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border: 1px dashed #c9c2b8;
  background: transparent;
  color: var(--ad-muted);
  white-space: nowrap;
}

.account-admin-page.admin-shell .wb {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ad-gap);
  align-items: start;
}
.account-admin-page.admin-shell .wb:has(.wb-preview:not([hidden])) {
  grid-template-columns: minmax(600px, 1fr) 420px;
}
/* Below about 1360 px of window (the content is then narrower than the two columns need) 预演 goes under the editor. */
@container adc (max-width: 1063px) {
  .account-admin-page.admin-shell .wb:has(.wb-preview:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-admin-page.admin-shell .wb-preview {
    position: static;
    max-height: none;
  }
}
.account-admin-page.admin-shell .wb-editor {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.account-admin-page.admin-shell .wb-editor > .admin-empty {
  padding: var(--ad-card-pad);
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .wb-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 0;
}
/* the sections: one segmented row at the top of the card */
.account-admin-page.admin-shell .wb-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 20px 0;
  padding: 4px;
  border-radius: 22px;
  background: #f3f1ee;
}
.account-admin-page.admin-shell .wb-rail-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ad-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background calc(180ms * var(--ad-motion)) var(--ad-ease),
    color calc(180ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell .wb-rail-item:hover {
  background: rgba(255, 255, 255, 0.7);
}
.account-admin-page.admin-shell .wb-rail-item[aria-current="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell .wb-rail-item.is-danger {
  color: var(--ad-danger);
}
.account-admin-page.admin-shell .wb-rail-item.is-danger[aria-current="true"] {
  background: var(--ad-danger-soft);
  color: var(--ad-danger);
}
.account-admin-page.admin-shell .wb-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8561e;
  animation: adPop calc(260ms * var(--ad-motion)) var(--ad-ease) both;
}
.account-admin-page.admin-shell .wb-dot[hidden] {
  display: none;
}
.account-admin-page.admin-shell .wb-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 18px 24px 0;
}
.account-admin-page.admin-shell .wb-editor .wb-card-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.account-admin-page.admin-shell .wb-card-meta {
  margin: 0;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .wb-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 20px;
}
.account-admin-page.admin-shell .wb-card-body > :not([hidden]),
.account-admin-page.admin-shell .wb-card .character-flow > :not([hidden]) {
  animation: wbIn calc(260ms * var(--ad-motion)) var(--ad-ease) both;
}
@keyframes wbIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.account-admin-page.admin-shell .wb-card .character-flow {
  display: contents;
}
.account-admin-page.admin-shell .wb-card form.character-profile-form {
  display: block;
  max-width: none;
  margin: 0;
}
.account-admin-page.admin-shell .wb-card details {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* a <details> lays its content out in a slot of its own: the grid goes on the slot */
.account-admin-page.admin-shell .wb-card details::details-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px 20px;
  min-width: 0;
}
.account-admin-page.admin-shell .wb-card details > summary {
  margin-bottom: 12px;
}
.account-admin-page.admin-shell .wb-card form.character-profile-form fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.account-admin-page.admin-shell .wb-card form.character-profile-form fieldset[hidden],
.account-admin-page.admin-shell .wb-card form.character-profile-form details[hidden],
.account-admin-page.admin-shell .wb-card details[hidden] {
  display: none;
}
.account-admin-page.admin-shell .wb-card form.character-profile-form legend {
  display: none;
}
/* long text and notes take the whole row; short fields share it */
.account-admin-page.admin-shell .wb-card fieldset > p,
.account-admin-page.admin-shell
  .wb-card
  details
  > :is(p, div, section, pre, textarea, .admin-confirm, label.admin-check),
.account-admin-page.admin-shell .wb-card .colour-field,
.account-admin-page.admin-shell .wb-card label:has(textarea),
.account-admin-page.admin-shell .wb-card label:has(select),
.account-admin-page.admin-shell .wb-card details > summary {
  grid-column: 1 / -1;
}
.account-admin-page.admin-shell .wb-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--ad-muted);
  font-size: 13px;
  font-weight: 400;
}
.account-admin-page.admin-shell .wb-card label.admin-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  color: var(--ad-text);
}
.account-admin-page.admin-shell .wb-card input:not([type="checkbox"], [type="color"], [type="file"]),
.account-admin-page.admin-shell .wb-card select,
.account-admin-page.admin-shell .wb-card textarea {
  width: 100%;
  color: var(--ad-text);
}
.account-admin-page.admin-shell .wb-card details > summary {
  color: var(--ad-text);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}
.account-admin-page.admin-shell .wb-card details.wb-sole > summary {
  display: none;
}
.account-admin-page.admin-shell .wb-card textarea.admin-json {
  min-height: 260px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.account-admin-page.admin-shell .wb-card .admin-confirm {
  padding: 0;
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell .wb-readonly {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
  font-size: 13px;
}
.account-admin-page.admin-shell .colour-field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.account-admin-page.admin-shell .colour-field > label {
  flex: 1 1 220px;
}
.account-admin-page.admin-shell .wb-savebar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 24px;
  border-top: 1px solid var(--ad-hairline);
  border-radius: 0 0 var(--ad-card-radius) var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .wb-savestate {
  color: var(--ad-muted);
  font-size: 13px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .wb-savestate[data-state="dirty"] {
  color: var(--ad-warn);
  font-weight: 700;
}
.account-admin-page.admin-shell .wb-savebar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.account-admin-page.admin-shell .wb-savebar-actions button {
  height: 36px;
  min-height: 36px;
}
.account-admin-page.admin-shell .wb-editor pre {
  background: #f6f4f1;
}

/* ---- 预演 (right of the editor, sticky): one label column, one control per row ---- */
.account-admin-page.admin-shell .wb-preview {
  position: sticky;
  top: 24px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: var(--ad-card-pad);
}
.account-admin-page.admin-shell .wb-preview .pw {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-bar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-bar > * {
  flex: 1 1 100%;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-bar > button {
  flex: 0 0 auto;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-bar-title {
  font-size: 18px;
  font-weight: 900;
  text-align: left;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-bar-spacer {
  display: none;
}
.account-admin-page.admin-shell .wb-preview .admin-filter {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--ad-muted);
  font-size: 13px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .wb-preview .admin-filter:has(input[type="time"]) {
  grid-template-columns: 84px minmax(0, 1fr) 132px;
}
.account-admin-page.admin-shell .wb-preview .admin-filter select,
.account-admin-page.admin-shell .wb-preview .admin-filter input {
  width: 100%;
  min-width: 0;
}
.account-admin-page.admin-shell .wb-preview .admin-filter .seg {
  justify-self: start;
}
.account-admin-page.admin-shell .wb-preview .pw-zone {
  margin: 0;
  padding-left: 92px;
  font-size: 12px;
  white-space: normal;
}
.account-admin-page.admin-shell .wb-preview .pw button {
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .wb-preview .pw-compose {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.account-admin-page.admin-shell .wb-preview .pw-compose-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell .wb-preview .pw-compose-row > input {
  flex: 1 1 0;
  min-width: 0;
}
.account-admin-page.admin-shell .wb-preview .pw-compose-row > textarea {
  flex: 1 1 100%;
  height: 84px;
}
.account-admin-page.admin-shell .wb-preview .pw-compose-col {
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
}
.account-admin-page.admin-shell .wb-preview .pw-compose-col > input {
  flex: 1;
  min-width: 0;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-hint,
.account-admin-page.admin-shell .wb-preview .pw .admin-empty {
  margin: 0;
  padding: 0;
  color: var(--ad-muted);
  font-size: 12px;
  text-align: left;
}
.account-admin-page.admin-shell .wb-preview .pw .admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

/* ---- 管理员与权限: the grid scrolls inside its card when it is taller than the window ---- */
.account-admin-page.admin-shell .members-layout {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--ad-gap);
}
.account-admin-page.admin-shell .members-side {
  position: sticky;
  top: 24px;
}
.account-admin-page.admin-shell .members-side form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100dvh - 48px);
  margin: 0;
  overflow-y: auto;
}
.account-admin-page.admin-shell .members-side form > label {
  font-size: 13px;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .admin-member {
  padding: 6px;
}
.account-admin-page.admin-shell .admin-member-head {
  height: auto;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-weight: 700;
}
.account-admin-page.admin-shell .admin-member-head:hover:not(:disabled) {
  background: #f3f1ee;
}
.account-admin-page.admin-shell .admin-member-head[aria-expanded="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .admin-member > :not(.admin-member-head) {
  margin: 0 14px;
}
.account-admin-page.admin-shell .admin-member > button:not(.admin-member-head) {
  margin: 10px 14px 0;
}
.account-admin-page.admin-shell .admin-member > button:not(.admin-member-head) + button {
  margin-top: 8px;
}
.account-admin-page.admin-shell .permission-matrix {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 4px 24px;
  min-width: 0;
  max-width: none;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}
.account-admin-page.admin-shell .permission-matrix > legend {
  display: none;
}
.account-admin-page.admin-shell .members-side .permission-matrix,
.account-admin-page.admin-shell .admin-member .permission-matrix {
  max-height: calc(100dvh - 360px);
  overflow-y: auto;
}
.account-admin-page.admin-shell .permission-presets {
  flex-wrap: wrap;
  font-size: 13px;
}
.account-admin-page.admin-shell .permission-presets button {
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  font-size: 13px;
}
.account-admin-page.admin-shell .permission-group h4 {
  margin: 12px 0 4px;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .permission-note {
  color: var(--ad-warn);
}

/* The status line is for screen readers (toasts say it visibly); it must not add a row below the page. */
.account-admin-page.admin-shell .invite-admin-status.admin-statusbar {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 关系与故事: sections in a row at the top of the character panel; cards of one row share top and bottom ---- */

/* ---- the view roots share the page gap; long tables scroll inside their card under a sticky header ---- */
.account-admin-page.admin-shell .admin-content > section[data-panel] > div[id^="admin-"]:not(#admin-characters) {
  display: flex;
  flex-direction: column;
  gap: var(--ad-gap);
}
.account-admin-page.admin-shell .overview-cards,
.account-admin-page.admin-shell .cost-models,
.account-admin-page.admin-shell .tiers-layout {
  margin: 0;
}
.account-admin-page.admin-shell .admin-table-wrap {
  max-height: min(56dvh, 460px);
  overflow: auto;
}
.account-admin-page.admin-shell .admin-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 0 1px 0 var(--ad-hairline);
}
.account-admin-page.admin-shell .admin-table-region {
  border-color: var(--ad-hairline);
  border-radius: 14px;
}
.account-admin-page.admin-shell .tiers-main {
  overflow: hidden;
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .tiers-main .tiers-list-head,
.account-admin-page.admin-shell .tiers-main .admin-table-region {
  border: 0;
  border-radius: 0;
  background: #fff;
}
.account-admin-page.admin-shell .tiers-detail,
.account-admin-page.admin-shell .tiers-main + .tiers-detail {
  margin: 0;
}
.account-admin-page.admin-shell .seg-button[aria-pressed="false"]:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* ---- hard rules for every console page: nothing is cut, nothing wraps inside itself, nothing leaves its box ---- */
.account-admin-page.admin-shell * {
  text-overflow: clip;
}
.account-admin-page.admin-shell
  :is(
    button,
    .admin-badge,
    .cc-chip,
    .cs-chip-static,
    .cs-tag,
    .cs-level,
    .cs-know,
    .cs-lived,
    .cs-chip,
    .cs-rating,
    .cocreation-badge,
    .admin-pick-cc,
    .wb-chip,
    .ov-status,
    .cost-chip,
    .seg-button,
    .page-kicker,
    .admin-tag,
    .tiers-test-badge
  ) {
  white-space: nowrap;
}
.account-admin-page.admin-shell .admin-account-toggle {
  height: auto;
  min-height: 48px;
  overflow: visible;
  padding: 8px 16px;
  white-space: normal;
}
.account-admin-page.admin-shell .tiers-code-text {
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}
.account-admin-page.admin-shell select {
  max-width: 100%;
}
.account-admin-page.admin-shell .points-form {
  margin: 0;
}
.account-admin-page.admin-shell .points-grid {
  align-items: start;
}
.account-admin-page.admin-shell .admin-account-toggle,
.account-admin-page.admin-shell[data-nav="collapsed"] .admin-account-toggle,
.account-admin-page.admin-shell .tiers-code-text,
.account-admin-page.admin-shell .cs-story-title {
  text-overflow: clip;
}

.account-admin-page.admin-shell .sys-top {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
}
.account-admin-page.admin-shell .sys-switches .admin-kv {
  grid-template-columns: minmax(0, 1fr) max-content;
}
.account-admin-page.admin-shell .xy-x-label:last-child {
  transform: translateX(-100%);
}
.account-admin-page.admin-shell .system-section .admin-kv {
  grid-template-columns: minmax(0, 1fr) max-content;
}
.account-admin-page.admin-shell .sys-version .admin-kv {
  grid-template-columns: max-content minmax(0, 1fr);
}

/* A button that is a whole row or a heading holds ordinary text: it wraps like text, its chips do not. */
.account-admin-page.admin-shell .cc-row-open,
.account-admin-page.admin-shell .cs-story-title,
.account-admin-page.admin-shell .admin-member-head {
  white-space: normal;
}
.account-admin-page.admin-shell .cc-first {
  white-space: normal;
}
.account-admin-page.admin-shell .tiers-main > p,
.account-admin-page.admin-shell .tiers-main > .admin-hint {
  margin: 0;
  padding: 0 var(--ad-card-pad) var(--ad-card-pad);
}
.account-admin-page.admin-shell .tiers-main .tiers-list-head {
  padding: var(--ad-card-pad) var(--ad-card-pad) 8px;
}
.account-admin-page.admin-shell .admin-member > .admin-member-head {
  margin: 0;
}

/* ======================================================================================================================
   Part 24b-4: one layout system for every console page (owner's production check).
   - The content uses the whole width beside the sidebar (side padding only, up to --ad-page-max = 1680 px); no page has a width of
     its own. Two-column pages use fixed proportions so both columns fill the row, and the cards of a row share top and bottom lines.
   - Buttons have exactly two heights: standard 36 (forms, page actions) and compact 30 (inside tables, lists, chips and segments);
     buttons side by side in one group are the same size. Fields stay 40.
   - Hover help is a light bubble (white card, hairline, soft shadow, #2B2833 text) to the lower right of the pointer; never black.
   ====================================================================================================================== */
.account-admin-page.admin-shell .admin-content > section[data-panel] {
  width: 100%;
  max-width: var(--ad-page-max);
}
.account-admin-page.admin-shell
  button:where(:not(.seg-button, .cost-chip, .admin-nav-collapse, .admin-account-toggle, .admin-menu-item)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
/* compact (30): in tables and lists, chips, segments, rail items and the small actions of the cast, the inbox and 预演 */
.account-admin-page.admin-shell
:is(
  .seg-button,
  .cs-chip,
  .cc-filter-chip,
  .cost-chip,
  .wb-rail-item,
  .permission-presets button,
  .admin-table-wrap button,
  .members-table button,
  .tiers-main button,
  .cc-detail-actions button,
  .cc-answer-actions button,
  .cc-bulk button,
  .cc-adopt-actions button,
  .cc-note-box button,
  .wb-preview .pw button,
  .cs-add,
  .cs-mini,
  .cs-clear,
  .cs-danger,
  .cs-quiet:not(.cs-bar *, .cs-start *, .cs-adder *)
) {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

/* standard (36): the publish bar, the start card and the inline forms of the cast */

.account-admin-page.admin-shell .admin-pick-row {
  height: 40px;
}
.account-admin-page.admin-shell .wb-roles .admin-pick {
  height: 36px;
  min-height: 36px;
  padding: 0 8px 0 4px;
}
/* an action that carries a small icon: the icon is a mask drawn in the text colour, the label stays ordinary text */
.account-admin-page.admin-shell
:is(
  .cc-set-processed,
  .cc-set-archived,
  .cc-set-new,
  .cc-copy,
  .cc-adopt-open,
  .cc-process-selected,
  .cc-archive-selected,
  .cc-clear-selected,
  .cc-save-note
)::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.account-admin-page.admin-shell :is(.cc-set-processed, .cc-process-selected) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.account-admin-page.admin-shell :is(.cc-set-archived, .cc-archive-selected) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11h14V8M10 12h4'/%3E%3C/svg%3E");
}
.account-admin-page.admin-shell :is(.cc-set-new, .cc-clear-selected) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E");
}
.account-admin-page.admin-shell .cc-copy {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E");
}
.account-admin-page.admin-shell .cc-adopt-open {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.account-admin-page.admin-shell .cc-save-note {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v6h7V4M8 20v-6h8v6'/%3E%3C/svg%3E");
}

/* standard 36 wherever an older rule gave a button its own height */
.account-admin-page.admin-shell
:is(
  .page-head button,
  button.tiers-new,
  .tiers-form button,
  button.cs-publish,
  .sys-reload,
  #system-renew,
  .system-topup button
) {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
/* ---- 我的账号: two columns of cards (what this account is | the form), like every other page ---- */
.account-admin-page.admin-shell .admin-content > section[data-panel="account"]:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--ad-gap);
}
.account-admin-page.admin-shell .admin-content > section[data-panel="account"] > .page-head {
  grid-column: 1 / -1;
}
.account-admin-page.admin-shell #admin-account-info,
.account-admin-page.admin-shell #admin-bind-start,
.account-admin-page.admin-shell #admin-bind-finish {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  margin: 0;
  padding: var(--ad-card-pad);
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell #admin-bind-start input,
.account-admin-page.admin-shell #admin-bind-finish input {
  width: 100%;
}
.account-admin-page.admin-shell #admin-bind-finish[hidden],
.account-admin-page.admin-shell #admin-account-info:empty {
  display: none;
}
.account-admin-page.admin-shell #admin-account-continue {
  justify-self: start;
}

/* two-column pages: fixed proportions, both columns fill the row */
.account-admin-page.admin-shell .tiers-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.account-admin-page.admin-shell .page-head-actions > button {
  align-self: center;
  margin: 0;
}

/* ---- hover help: a light bubble to the lower right of the pointer ---- */
.account-admin-page.admin-shell .has-tip {
  position: relative;
}
.account-admin-page.admin-shell .ad-tip,
.account-admin-page.admin-shell .permission-tip {
  position: absolute;
  left: var(--tip-x, 28px);
  top: var(--tip-y, 100%);
  right: auto;
  z-index: 40;
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, 70vw);
  padding: 8px 12px;
  border: 1px solid var(--ad-hairline);
  border-radius: 12px;
  background: #fff;
  color: #2b2833;
  box-shadow: 0 8px 24px rgba(43, 40, 51, 0.12);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  /* Not drawn until wanted: a hidden box that still took part in layout would stretch the columns it sits in. */
  display: none;
  pointer-events: none;
}
.account-admin-page.admin-shell .has-tip:hover > .ad-tip,
.account-admin-page.admin-shell .has-tip:focus-within > .ad-tip {
  display: block;
  animation: adTipIn calc(140ms * var(--ad-motion)) ease both;
}
@keyframes adTipIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.account-admin-page.admin-shell .pw-ack {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell .pw-ack-i {
  color: var(--ad-muted);
  font-size: 13px;
}

/* ---- 角色工作台: the editor takes the width, 预演 keeps 420 and stretches with it; the sections fit on one row ---- */
@container adc (min-width: 1064px) {
  .account-admin-page.admin-shell .wb:has(.wb-preview:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: stretch;
  }
}
.account-admin-page.admin-shell .wb-editor {
  display: flex;
  flex-direction: column;
}
.account-admin-page.admin-shell .wb-editor > .wb-card {
  flex: 1;
}
.account-admin-page.admin-shell .wb-roles .admin-pick-row {
  height: 40px;
}
/* fifteen roles must fit two rows: a published role with no draft shows no badge (only 草稿 / 未发布 are worth a mark) */
.account-admin-page.admin-shell .wb-roles .admin-pick .admin-badge[data-tone="ok"] {
  display: none;
}
.account-admin-page.admin-shell .wb-rail {
  /* One row while it fits; with a draft and 版本历史 the nine entries wrap to a second row inside the same pill (Part 24f). */
  flex-wrap: wrap;
  align-items: center;
}

.account-admin-page.admin-shell .wb-rail-item.is-danger {
  margin-left: auto;
}
.account-admin-page.admin-shell .wb-card details::details-content,
.account-admin-page.admin-shell .wb-card form.character-profile-form fieldset {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.account-admin-page.admin-shell .wb-card fieldset > :is(p, .colour-field, label:has(textarea)) {
  grid-column: 1 / -1;
}

/* ---- 关系与故事 ---- */

/* ---- 关系与故事: 导入文件 (24b-5) ---- */

/* no growing cells: a scaled cell at the edge of the grid would leave the card */

.account-admin-page.admin-shell .cs-field :is(input, textarea) {
  width: 100%;
  color: var(--ad-text);
}

/* ======================================================================================================================
   Part 24b-6: admin V3 (design/burbur-v2/v3). Same D1 palette; the layers above stay, this block repaints and adds.
   Motion tokens (Framework3): page enter 280 ms rise 8 px, open-below 240 ms, selection slide 200 ms, removal 200 ms, number
   change 300 ms, one easing (--ad-ease). All multiplied by --ad-motion, which prefers-reduced-motion sets to 0.
   ====================================================================================================================== */
.account-admin-page.admin-shell {
  --ad-t-page: calc(280ms * var(--ad-motion));
  --ad-t-open: calc(240ms * var(--ad-motion));
  --ad-t-slide: calc(200ms * var(--ad-motion));
  --ad-t-remove: calc(200ms * var(--ad-motion));
  --ad-t-number: calc(300ms * var(--ad-motion));
  --ad-amber: #d9a441;
  --ad-amber-soft: #fdf6e6;
  --ad-amber-ink: #8a5a00;
  --ad-tint-line: #cfc8f2;
  --ad-wash: #f7f5fd;
  --ad-danger-line: #e8b9b0;
}
@keyframes adPageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes adRemove {
  to {
    opacity: 0;
    transform: scaleY(0.6);
  }
}
.account-admin-page.admin-shell
  .admin-content
  > section[data-panel]:not([hidden], [data-panel="login"], [data-panel="token"], [data-panel="reset"]) {
  animation: adPageIn var(--ad-t-page) var(--ad-ease) both;
}

/* ---- title row: name left; one status line + the only solid button right ---- */
.account-admin-page.admin-shell .head-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ad-muted);
  font-size: 13px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .head-sep {
  width: 1px;
  height: 14px;
  background: var(--ad-border);
}
.account-admin-page.admin-shell .head-status .is-warn {
  color: var(--ad-amber-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell .head-status .is-ok {
  color: var(--ad-ok);
  font-weight: 700;
}
.account-admin-page.admin-shell .head-status .is-mono {
  font-family: "DM Mono", ui-monospace, monospace;
}

/* ---- hover values: numeric cells and chart parts are targets of the light bubble ---- */
.account-admin-page.admin-shell .has-tip:where(span, td, b, i, div, li, label)[tabindex]:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: 2px;
  border-radius: 6px;
}
.account-admin-page.admin-shell .has-tip > .ad-tip {
  z-index: 60;
}

/* ---- open-below table (Framework3 B) ---- */
.account-admin-page.admin-shell .ot {
  --cols: minmax(0, 1fr);
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
  font-size: 14px;
}
.account-admin-page.admin-shell .ot-head,
.account-admin-page.admin-shell .ot-row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  column-gap: 12px;
  box-sizing: border-box;
  padding: 0 20px;
}
.account-admin-page.admin-shell .ot-head {
  height: 40px;
  border-bottom: 1px solid var(--ad-hairline);
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .ot-row {
  min-height: 48px;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .ot-item + .ot-item {
  border-top: 1px solid #f0ece7;
}
.account-admin-page.admin-shell .ot-item:first-child > .ot-row {
  border-radius: 0;
}
.account-admin-page.admin-shell .ot-row.is-pickable {
  cursor: pointer;
}
.account-admin-page.admin-shell .ot-row:hover {
  background: #f7f5f2;
}
.account-admin-page.admin-shell .ot-item[data-open="true"] > .ot-row {
  background: var(--ad-tint);
  font-weight: 700;
}
.account-admin-page.admin-shell .ot-row:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: -2px;
}
.account-admin-page.admin-shell .ot-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-admin-page.admin-shell .ot-cell.is-end {
  text-align: right;
}
.account-admin-page.admin-shell .ot-cell.is-mono {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
}
.account-admin-page.admin-shell .ot-chev {
  display: flex;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .ot-chevron {
  transition: transform var(--ad-t-open) var(--ad-ease);
}
.account-admin-page.admin-shell .ot-item[data-open="true"] .ot-chevron {
  transform: rotate(90deg);
}
.account-admin-page.admin-shell .ot-empty {
  margin: 0;
  padding: 28px 20px;
  color: var(--ad-muted);
  text-align: center;
}
/* The panel grows by height and fades in: grid rows 0fr → 1fr. */
.account-admin-page.admin-shell .ot-panel,
.account-admin-page.admin-shell .dz-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--ad-t-open) var(--ad-ease),
    opacity var(--ad-t-open) var(--ad-ease);
}
.account-admin-page.admin-shell .ot-panel[data-state="open"],
.account-admin-page.admin-shell .dz[data-open="true"] > .dz-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.account-admin-page.admin-shell .ot-inner,
.account-admin-page.admin-shell .dz-inner {
  min-height: 0;
  overflow: hidden;
}
.account-admin-page.admin-shell .ot-panel[data-settled="true"] > .ot-inner,
.account-admin-page.admin-shell .dz[data-open="true"] > .dz-panel > .dz-inner {
  overflow: visible;
}
.account-admin-page.admin-shell .ot-detail {
  margin: 4px 20px 18px;
  padding: 14px;
  border-radius: 12px;
  background: var(--ad-wash);
}

/* ---- danger zone (Framework3: 点开 → 数字 → 输入名字 → 按住) ---- */
.account-admin-page.admin-shell .dz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.account-admin-page.admin-shell .dz > .dz-open,
.account-admin-page.admin-shell button.dz-open {
  border-color: var(--ad-danger-line);
  background: #fff;
  color: var(--ad-danger);
}
.account-admin-page.admin-shell button.dz-open:hover:not(:disabled) {
  background: var(--ad-danger-soft);
  border-color: var(--ad-danger-line);
}
.account-admin-page.admin-shell .dz-panel {
  width: 100%;
}
.account-admin-page.admin-shell .dz-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--ad-danger-soft);
}
.account-admin-page.admin-shell .dz-impact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  font-size: 13px;
}
.account-admin-page.admin-shell .dz-card {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
}
.account-admin-page.admin-shell .dz-card b {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 18px;
}
.account-admin-page.admin-shell .dz-note,
.account-admin-page.admin-shell .dz-wait {
  margin: 0;
  color: var(--ad-danger);
  font-size: 13px;
}
.account-admin-page.admin-shell .dz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ad-danger);
  font-size: 12px;
}
.account-admin-page.admin-shell .dz-field input {
  border-color: var(--ad-danger-line);
}
.account-admin-page.admin-shell button.dz-go {
  position: relative;
  overflow: hidden;
  height: 40px;
  border-color: var(--ad-danger);
  background: #fff;
  color: var(--ad-danger);
}
.account-admin-page.admin-shell button.dz-go:not(.is-hold):hover:not(:disabled) {
  background: var(--ad-danger);
  color: #fff;
}
.account-admin-page.admin-shell button.dz-go > i {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--ad-danger);
  transition: width calc(80ms * var(--ad-motion)) linear;
}
.account-admin-page.admin-shell button.dz-go[data-hold="on"] > i {
  width: 100%;
  transition: width calc(1500ms * var(--ad-motion)) linear;
}
/* Reduced motion removes the sweep, not the hold: the fill is full at once but the button still needs the 1.5 s. */
.account-admin-page.admin-shell button.dz-go > .dz-label {
  position: relative;
  mix-blend-mode: normal;
}
.account-admin-page.admin-shell button.dz-go[data-hold="on"] > .dz-label {
  color: #fff;
}

/* ---- unsaved = amber ---- */
.account-admin-page.admin-shell :is(input, select, textarea)[data-dirty="true"],
.account-admin-page.admin-shell [data-dirty="true"] > :is(input, select, textarea),
.account-admin-page.admin-shell .is-dirty {
  border-color: var(--ad-amber) !important;
  border-width: 1.5px;
  background: var(--ad-amber-soft) !important;
}
.account-admin-page.admin-shell :is(button, label, span, div)[data-dirty="true"]:not(.seg-button) {
  border-color: var(--ad-amber);
  background: var(--ad-amber-soft);
}
.account-admin-page.admin-shell input[type="checkbox"][data-dirty="true"] {
  outline: 2px solid var(--ad-amber);
  outline-offset: 1px;
}

/* ---- NavV3: a dot and the name; the page you are on is the tint with a primary dot ---- */
.account-admin-page.admin-shell .admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 12px;
}
.account-admin-page.admin-shell .admin-nav-item[aria-current="page"]::before {
  content: none;
}
.account-admin-page.admin-shell .admin-nav-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .admin-nav-item[aria-current="page"] .admin-nav-dot {
  background: var(--ad-primary);
}
.account-admin-page.admin-shell .admin-nav-item:hover {
  background: #efece8;
}
.account-admin-page.admin-shell .admin-nav-item[aria-current="page"]:hover {
  background: var(--ad-tint);
}

/* ---- 管理员与权限 (Members3): add bar, people table, the grid opens below the row ---- */
.account-admin-page.admin-shell .mb-add {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 16px 20px;
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .mb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .mb-field input {
  height: 36px;
  min-height: 36px;
  font-size: 14px;
}
.account-admin-page.admin-shell .mb-presets {
  display: flex;
  gap: 6px;
}
.account-admin-page.admin-shell button.mb-preset[aria-pressed="true"] {
  border-color: var(--ad-tint-line);
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
/* the add bar's button is the page's one solid primary (.admin-primary) */
.account-admin-page.admin-shell .members-table-card {
  overflow: visible;
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell .mb-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--mark, var(--ad-primary));
  color: #fff;
  font-size: 11px;
}
.account-admin-page.admin-shell .mb-name {
  display: flex;
  flex-direction: column;
}
.account-admin-page.admin-shell .members-mail {
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 400;
}
.account-admin-page.admin-shell .members-list:empty {
  display: none;
}
.account-admin-page.admin-shell .ot-panel .members-list {
  margin: 0 20px 18px;
}
.account-admin-page.admin-shell .members-list .admin-member {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.account-admin-page.admin-shell .members-list .admin-member > .admin-member-head {
  display: none;
}
.account-admin-page.admin-shell .members-list .admin-member > :is(.mb-grid, .dz, p) {
  flex: 1 1 100%;
}
.account-admin-page.admin-shell .mb-grid {
  padding-bottom: 14px;
  border-bottom: 1px solid #f0ece7;
}
.account-admin-page.admin-shell .members-list .admin-member > .dz {
  margin-top: 10px;
}
.account-admin-page.admin-shell .members-list .permission-matrix {
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
.account-admin-page.admin-shell .permission-matrix > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.account-admin-page.admin-shell .permission-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ad-wash);
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .permission-presets > button {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
}
.account-admin-page.admin-shell .permission-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-count: auto;
  gap: 16px;
}
.account-admin-page.admin-shell .permission-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.account-admin-page.admin-shell .permission-group h4 {
  margin: 0;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .permission-item {
  align-items: flex-start;
  min-height: 0;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  transition:
    background var(--ad-t-slide) var(--ad-ease),
    border-color var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .permission-item > input {
  margin: 3px 0 0;
}
.account-admin-page.admin-shell .permission-item[data-dirty="true"] {
  border-color: var(--ad-amber);
  background: var(--ad-amber-soft);
}
@container adc (max-width: 940px) {
  .account-admin-page.admin-shell .mb-add {
    grid-template-columns: minmax(200px, 1fr) auto;
  }
}

/* ---- charts (V3): every bucket is a hover / focus target with a vertical guide line, dots on the points, one bubble ---- */
.account-admin-page.admin-shell .xy-hit {
  position: relative;
  outline: none;
}
.account-admin-page.admin-shell .xy[data-mode="line"] .xy-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--px, 0%);
  width: var(--w, 0%);
  flex: none;
}
.account-admin-page.admin-shell .xy-hit:hover,
.account-admin-page.admin-shell .xy-hit:focus-visible {
  background: rgba(43, 40, 51, 0.04);
}
.account-admin-page.admin-shell .xy-hit:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ad-primary);
}
.account-admin-page.admin-shell .xy-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gx, 0%);
  width: 1px;
  background: var(--ad-tint-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(160ms * var(--ad-motion));
}
.account-admin-page.admin-shell .xy-plot:hover > .xy-guide,
.account-admin-page.admin-shell .xy-plot:focus-within > .xy-guide {
  opacity: 1;
}
.account-admin-page.admin-shell .xy-dot {
  position: absolute;
  left: var(--dot, 50%);
  bottom: var(--y, 0%);
  width: 10px;
  height: 10px;
  margin: 0 0 -5px -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--c);
  pointer-events: none;
  transition:
    transform calc(160ms * var(--ad-motion)),
    bottom calc(400ms * var(--ad-motion)) var(--ad-ease),
    opacity calc(160ms * var(--ad-motion));
}
.account-admin-page.admin-shell .xy-dot.is-off {
  opacity: 0;
}
.account-admin-page.admin-shell .xy-hit:hover .xy-dot,
.account-admin-page.admin-shell .xy-hit:focus-visible .xy-dot {
  transform: scale(1.4);
}
.account-admin-page.admin-shell .xy[data-dense="true"] .xy-dot {
  opacity: 0;
}
.account-admin-page.admin-shell .xy[data-dense="true"] .xy-hit:hover .xy-dot,
.account-admin-page.admin-shell .xy[data-dense="true"] .xy-hit:focus-visible .xy-dot {
  opacity: 1;
}
.account-admin-page.admin-shell .xy-tip {
  display: none;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  font-family: "DM Mono", ui-monospace, monospace;
}
.account-admin-page.admin-shell .xy-plot:hover > .xy-tip,
.account-admin-page.admin-shell .xy-plot:focus-within > .xy-tip {
  display: flex;
}
.account-admin-page.admin-shell .xy-tip-head {
  color: var(--ad-muted);
}

/* ---- pie (V3) ---- */
.account-admin-page.admin-shell .pie {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 10px 0;
}
.account-admin-page.admin-shell .pie-svg {
  width: 260px;
  height: 260px;
}
.account-admin-page.admin-shell .pie-arc {
  stroke-width: 6;
  outline: none;
  transition:
    stroke-dasharray var(--ad-t-number) var(--ad-ease),
    stroke-dashoffset var(--ad-t-number) var(--ad-ease),
    stroke-width var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .pie-arc:hover,
.account-admin-page.admin-shell .pie-arc:focus-visible {
  stroke-width: 7;
}
.account-admin-page.admin-shell .pie-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.account-admin-page.admin-shell .pie-title {
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .pie-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 70px 90px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .pie-row:hover,
.account-admin-page.admin-shell .pie-row:focus-visible {
  background: #f7f5f2;
}
.account-admin-page.admin-shell .pie-row > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}
.account-admin-page.admin-shell .pie-row > b,
.account-admin-page.admin-shell .pie-figure {
  font-family: "DM Mono", ui-monospace, monospace;
}
.account-admin-page.admin-shell .pie-figure {
  color: var(--ad-muted);
  text-align: right;
}
.account-admin-page.admin-shell .pie[data-active="true"] > .pie-tip {
  display: block;
}

/* ---- 总览 (Overview3) ---- */
.account-admin-page.admin-shell .ov-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.account-admin-page.admin-shell .ov-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .ov-tile-label {
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .ov-big {
  width: max-content;
  max-width: 100%;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.account-admin-page.admin-shell .ov-tile-sub {
  min-height: 16px;
  color: var(--ad-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
}
.account-admin-page.admin-shell .ov-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
  font-weight: 700;
  text-decoration: none;
}
.account-admin-page.admin-shell .ov-warn > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ad-warn);
}
.account-admin-page.admin-shell .ovx-trend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .ovx-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-admin-page.admin-shell .ovx-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.account-admin-page.admin-shell .ovx-legend {
  display: flex;
  gap: 12px;
  font-size: 13px;
}
.account-admin-page.admin-shell .ovx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-admin-page.admin-shell .ovx-chip b {
  font-family: "DM Mono", ui-monospace, monospace;
}
.account-admin-page.admin-shell .ovx-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}
.account-admin-page.admin-shell .ovx-pane {
  animation: adPageIn var(--ad-t-slide) var(--ad-ease) both;
}
.account-admin-page.admin-shell .ovx-empty {
  margin: 0;
  padding: 40px 0;
  color: var(--ad-muted);
  text-align: center;
}
.account-admin-page.admin-shell .ovx-trend .xy-plot {
  height: 280px;
}
.account-admin-page.admin-shell .ov-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .ov-card > h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.account-admin-page.admin-shell .ov-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.account-admin-page.admin-shell .ov-days {
  border-radius: 12px;
}
.account-admin-page.admin-shell .ov-days .ot-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  border-radius: 12px 12px 0 0;
}
.account-admin-page.admin-shell .ov-days .ot-row {
  min-height: 40px;
  padding: 0 14px;
}
.account-admin-page.admin-shell .ov-days .ot-head {
  padding: 0 14px;
}
.account-admin-page.admin-shell .ov-days .ot-row.is-total {
  border-top: 1px solid var(--ad-hairline);
  font-weight: 700;
}
.account-admin-page.admin-shell .ov-split-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-admin-page.admin-shell .ov-split-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 70px;
  gap: 12px;
  align-items: center;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 14px;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .ov-split-row:hover {
  background: #f7f5f2;
}
.account-admin-page.admin-shell .ov-split-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.account-admin-page.admin-shell .ov-rdot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r, 50%);
  background: var(--c);
}
.account-admin-page.admin-shell .ov-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0ece7;
}
.account-admin-page.admin-shell .ov-bar > i {
  width: var(--w, 0%);
  border-radius: 999px;
  background: var(--c);
  transition: width var(--ad-t-number) var(--ad-ease);
}
.account-admin-page.admin-shell .ov-split-value {
  font-family: "DM Mono", ui-monospace, monospace;
  text-align: right;
}

/* ---- 消耗表 (Usage3) ---- */
.account-admin-page.admin-shell .cs-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.account-admin-page.admin-shell .cs-table .ot-row,
.account-admin-page.admin-shell .cs-table .ot-head {
  padding: 0 14px;
}
.account-admin-page.admin-shell .cs-table .ot-row {
  min-height: 40px;
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-table {
  border-radius: 12px;
  --cols: minmax(0, 1.9fr) repeat(6, minmax(0, 1fr));
}
.account-admin-page.admin-shell .cs-calls {
  margin: 2px 14px 14px;
  padding: 10px 14px;
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-call {
  display: grid;
  grid-template-columns: var(--grid, 1.8fr repeat(5, minmax(0, 1fr)));
  gap: 10px;
  align-items: center;
  min-height: 32px;
  border-top: 1px solid #e9e5f7;
  font-family: "DM Mono", ui-monospace, monospace;
  text-align: right;
}
.account-admin-page.admin-shell .cs-call.is-head {
  min-height: 30px;
  border-top: 0;
  color: var(--ad-muted);
  font-family: inherit;
}
.account-admin-page.admin-shell .cs-call > .is-name {
  text-align: left;
}

/* ---- a confirmation that opens in place ---- */
.account-admin-page.admin-shell .ic {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--ad-t-open) var(--ad-ease),
    opacity var(--ad-t-open) var(--ad-ease);
}
.account-admin-page.admin-shell .ic[data-state="open"] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.account-admin-page.admin-shell .ic-inner {
  min-height: 0;
  overflow: hidden;
}
.account-admin-page.admin-shell .ic-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ad-wash);
  font-size: 14px;
}
.account-admin-page.admin-shell .ic-text {
  flex: 1;
  min-width: 0;
}
.account-admin-page.admin-shell .ic-text p {
  margin: 0;
  white-space: pre-line;
}
.account-admin-page.admin-shell .ic-actions {
  display: flex;
  gap: 8px;
}
.account-admin-page.admin-shell button.ic-go {
  border-color: var(--ad-primary);
  color: var(--ad-tint-ink);
}

/* ---- 积分发放 (Points3) ---- */
.account-admin-page.admin-shell .pt-give,
.account-admin-page.admin-shell .pt-cc,
.account-admin-page.admin-shell .points-main {
  box-sizing: border-box;
  width: 100%;
}
.account-admin-page.admin-shell form.pt-give,
.account-admin-page.admin-shell section.pt-cc,
.account-admin-page.admin-shell section.system-section:has(#points-reset),
.account-admin-page.admin-shell .pt-reset {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .pt-bar {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) 140px minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.account-admin-page.admin-shell .pt-lb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .pt-lb input:not([type="radio"]),
.account-admin-page.admin-shell .pt-lb select {
  height: 36px;
  min-height: 36px;
  min-width: 0;
}
.account-admin-page.admin-shell .pt-with {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ad-text);
}
.account-admin-page.admin-shell .pt-with input {
  flex: 1;
  min-width: 0;
}
.account-admin-page.admin-shell .pt-small {
  flex: none !important;
  width: 90px;
  font-family: "DM Mono", ui-monospace, monospace;
}
.account-admin-page.admin-shell .pt-seg {
  display: flex;
  box-sizing: border-box;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  background: #f3f1ee;
}
.account-admin-page.admin-shell .pt-seg .points-kind {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--ad-t-slide) var(--ad-ease),
    color var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .pt-seg .points-kind input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.account-admin-page.admin-shell .pt-seg .points-kind:has(input:checked) {
  background: #fff;
  color: var(--ad-tint-ink);
  box-shadow: 0 1px 3px rgba(43, 40, 51, 0.12);
}
.account-admin-page.admin-shell .pt-seg .points-kind:has(input:focus-visible) {
  outline: 2px solid var(--ad-primary);
}
.account-admin-page.admin-shell .pt-give .points-live,
.account-admin-page.admin-shell .pt-give .points-live:empty {
  margin: 0;
  color: var(--ad-muted);
  font-size: 13px;
  white-space: pre-line;
}
.account-admin-page.admin-shell .pt-give .points-live:empty {
  display: none;
}
.account-admin-page.admin-shell .pt-give .system-result:empty,
.account-admin-page.admin-shell .pt-reset .system-result:empty,
.account-admin-page.admin-shell section.system-section:has(#points-reset) .system-result:empty {
  display: none;
}
.account-admin-page.admin-shell .pt-give .system-result:not(:empty),
.account-admin-page.admin-shell section.system-section:has(#points-reset) .system-result:not(:empty) {
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
  font-size: 14px;
  animation: adPageIn var(--ad-t-open) var(--ad-ease) both;
}
.account-admin-page.admin-shell .pt-give .system-result p {
  display: inline;
  margin: 0 0 0 10px;
  font-weight: 400;
}
.account-admin-page.admin-shell .pt-cc {
  flex-direction: row !important;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px !important;
}
.account-admin-page.admin-shell .pt-cc[hidden] {
  display: none !important;
}
.account-admin-page.admin-shell .pt-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: center;
  min-width: 160px;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .pt-head h3 {
  margin: 0;
  color: var(--ad-text);
  font-size: 18px;
  font-weight: 900;
}
.account-admin-page.admin-shell .pt-cc > .pt-lb {
  flex: 1 1 160px;
}
.account-admin-page.admin-shell .pt-cc > button {
  margin-left: auto;
}
.account-admin-page.admin-shell .pt-cc > button[data-changed="true"] {
  border-color: var(--ad-primary);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .pt-cc > p:empty,
.account-admin-page.admin-shell .pt-cc > p[hidden] {
  display: none;
}
.account-admin-page.admin-shell .system-section:has(#points-reset) .pt-head {
  align-self: flex-start;
}

/* ---- 模型与价格 (Models3): rows are grids, checkboxes are switches ---- */
.account-admin-page.admin-shell .models-card {
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
  font-size: 14px;
}
.account-admin-page.admin-shell .models-table {
  display: block;
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
.account-admin-page.admin-shell .models-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.account-admin-page.admin-shell .models-table :is(thead, tbody, tfoot) {
  display: block;
}
.account-admin-page.admin-shell .models-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, 110px) 140px 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 20px;
  min-height: 56px;
  box-sizing: border-box;
}
.account-admin-page.admin-shell .models-table thead tr {
  min-height: 42px;
  border-bottom: 1px solid var(--ad-hairline);
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .models-table :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: inherit;
}
.account-admin-page.admin-shell .models-table thead th {
  font-weight: 400;
}
.account-admin-page.admin-shell .models-table tbody tr {
  border-top: 1px solid #f3f0ec;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .models-table tbody tr:first-child {
  border-top: 0;
}
.account-admin-page.admin-shell .models-table tbody tr:hover {
  background: #f7f5f2;
}
.account-admin-page.admin-shell .models-table tfoot tr {
  border-top: 1px solid var(--ad-hairline);
  background: #fbfaf8;
  border-radius: 0 0 var(--ad-card-radius) var(--ad-card-radius);
}
.account-admin-page.admin-shell .models-table td:empty {
  display: block;
}
.account-admin-page.admin-shell .models-table input[type="number"] {
  width: 72px;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  font-family: "DM Mono", ui-monospace, monospace;
  border-radius: 10px;
}
.account-admin-page.admin-shell .models-unit,
.account-admin-page.admin-shell .models-at {
  margin-left: 6px;
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell .models-at {
  margin: 0;
  font-family: "DM Mono", ui-monospace, monospace;
}
.account-admin-page.admin-shell .models-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f0ece7;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .models-pill.is-on {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .models-table input[type="checkbox"] {
  appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: #d9d4cd;
  cursor: pointer;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .models-table input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(43, 40, 51, 0.2);
  transition: transform var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .models-table input[type="checkbox"]:checked {
  background: var(--ad-primary);
}
.account-admin-page.admin-shell .models-table input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
.account-admin-page.admin-shell .models-table input[type="checkbox"][data-dirty="true"] {
  outline: 0;
  box-shadow: 0 0 0 2px var(--ad-amber);
}
.account-admin-page.admin-shell .models-table input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.account-admin-page.admin-shell .models-table input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: 2px;
}

/* ---- 系统状态 (System3) ---- */
.account-admin-page.admin-shell .sys-overall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
  font-size: 13px;
  font-weight: 700;
}
.account-admin-page.admin-shell .sys-overall[data-tone="warn"] {
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
.account-admin-page.admin-shell .sys-overall .admin-badge {
  background: transparent;
  padding: 0;
  color: inherit;
}
.account-admin-page.admin-shell .sys-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ad-gap);
  align-items: stretch;
}
.account-admin-page.admin-shell .sys-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ad-gap);
  align-items: stretch;
}
.account-admin-page.admin-shell .sys-version {
  border-color: #bfe0cb;
  background: #f2faf5;
}
.account-admin-page.admin-shell .sys-renew {
  float: right;
  border-color: var(--ad-tint-line);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .sys-budget {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-admin-page.admin-shell .sys-budget-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.account-admin-page.admin-shell .sys-budget-left,
.account-admin-page.admin-shell .sys-budget-used {
  color: var(--ad-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
}
.account-admin-page.admin-shell .sys-budget-left b {
  color: var(--ad-text);
}
.account-admin-page.admin-shell .sys-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0ece7;
}
.account-admin-page.admin-shell .sys-bar > i {
  width: var(--w, 0%);
  transition: width var(--ad-t-number) var(--ad-ease);
}
.account-admin-page.admin-shell .sys-bar > .is-used {
  background: var(--ad-primary);
}
.account-admin-page.admin-shell .sys-bar > .is-held {
  background: var(--ad-tint-line);
}
.account-admin-page.admin-shell .sys-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #f0ece7;
}
.account-admin-page.admin-shell .sys-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f0ece7;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .sys-pill > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.account-admin-page.admin-shell .sys-pill.is-on {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .sys-pill.is-plain {
  background: #f3f1ee;
  color: var(--ad-text);
}
.account-admin-page.admin-shell .sys-confirm:empty {
  display: none;
}
.account-admin-page.admin-shell .ops-grid .ot-row,
.account-admin-page.admin-shell .ops-grid .ot-head {
  gap: 8px;
  font-size: 12px;
}

/* ---- 邀请与额度 (Invites3): one create bar, batches open their codes below ---- */
.account-admin-page.admin-shell form.tiers-form {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr) minmax(0, 0.6fr) minmax(176px, 1.3fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr)
    minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 16px 20px;
  position: static;
  max-height: none;
  overflow: visible;
}
.account-admin-page.admin-shell .tiers-form .tiers-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.account-admin-page.admin-shell .tiers-form .tiers-refill {
  display: contents;
}
.account-admin-page.admin-shell .tiers-form .tiers-field > label,
.account-admin-page.admin-shell .tiers-form .tiers-label {
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-form input:not([type="radio"], [type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
}
.account-admin-page.admin-shell .tiers-form .tiers-kind {
  display: flex;
  box-sizing: border-box;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  background: #f3f1ee;
}
.account-admin-page.admin-shell .tiers-form .tiers-kind label {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--ad-t-slide) var(--ad-ease),
    color var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .tiers-form .tiers-kind input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.account-admin-page.admin-shell .tiers-form .tiers-kind label:has(input:checked) {
  background: #fff;
  color: var(--ad-tint-ink);
  box-shadow: 0 1px 3px rgba(43, 40, 51, 0.12);
}
.account-admin-page.admin-shell .tiers-form .tiers-kind label:has(input:focus-visible) {
  outline: 2px solid var(--ad-primary);
}
.account-admin-page.admin-shell .tiers-form .tiers-test {
  flex-direction: row;
  align-items: center;
  height: 36px;
}
.account-admin-page.admin-shell .tiers-form .tiers-test label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ad-text);
  font-size: 14px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .tiers-form .tiers-problem {
  grid-column: 1 / -1;
  margin: 0;
}
.account-admin-page.admin-shell .tiers-form .tiers-form-actions {
  display: flex;
}
.account-admin-page.admin-shell .tiers-list > .admin-table-region {
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .tiers-table {
  display: block;
  width: 100%;
  border: 0;
  font-size: 14px;
}
.account-admin-page.admin-shell .tiers-table :is(thead, tbody) {
  display: block;
}
.account-admin-page.admin-shell .tiers-table tr:not(.tiers-open-row) {
  display: grid;
  grid-template-columns: 24px minmax(160px, 1.4fr) 1.4fr 150px 70px 1.2fr 70px 70px;
  gap: 14px;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
}
.account-admin-page.admin-shell .tiers-table thead tr {
  height: 40px;
  border-bottom: 1px solid var(--ad-hairline);
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-table :is(th, td) {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-weight: 400;
}
.account-admin-page.admin-shell .tiers-table .is-end,
.account-admin-page.admin-shell .tiers-table td:nth-child(5),
.account-admin-page.admin-shell .tiers-table td:nth-child(7),
.account-admin-page.admin-shell .tiers-table td:nth-child(8) {
  text-align: right;
}
.account-admin-page.admin-shell .tiers-table tbody tr.tiers-row {
  min-height: 50px;
  border-top: 1px solid #f0ece7;
  cursor: pointer;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .tiers-table tbody tr.tiers-row:first-child {
  border-top: 0;
}
.account-admin-page.admin-shell .tiers-table tbody tr.tiers-row:hover {
  background: #f7f5f2;
}
.account-admin-page.admin-shell .tiers-table tbody tr.tiers-row.is-selected {
  background: var(--ad-tint);
}
.account-admin-page.admin-shell .tiers-table tbody tr.tiers-row.is-selected .tiers-name {
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-table tr.tiers-row .ot-chevron {
  transition: transform var(--ad-t-open) var(--ad-ease);
}
.account-admin-page.admin-shell .tiers-table tr.tiers-row[aria-expanded="true"] .ot-chevron {
  transform: rotate(90deg);
}
.account-admin-page.admin-shell .tiers-name {
  font-weight: 400;
}
.account-admin-page.admin-shell th[scope="row"] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell .tiers-test-badge,
.account-admin-page.admin-shell .tiers-new-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e8f2fa;
  color: #0e5a8a;
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .tiers-new-badge {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .iv-redeemed {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-admin-page.admin-shell .iv-bar {
  display: flex;
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0ece7;
}
.account-admin-page.admin-shell .iv-bar > i {
  width: var(--w, 0%);
  background: var(--ad-primary);
  transition: width var(--ad-t-number) var(--ad-ease);
}
.account-admin-page.admin-shell .iv-fig {
  width: 56px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
  text-align: right;
}
.account-admin-page.admin-shell
  .tiers-table
  :is(td:nth-child(4), td:nth-child(5), td:nth-child(7), td:nth-child(8), td:nth-child(6)) {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-table tr.tiers-open-row {
  display: block;
}
.account-admin-page.admin-shell .tiers-table tr.tiers-open-row > td {
  display: block;
  padding: 0 20px 18px;
}
.account-admin-page.admin-shell .tiers-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.account-admin-page.admin-shell .tiers-detail[hidden] {
  display: none;
}
.account-admin-page.admin-shell .iv-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ad-wash);
  font-size: 13px;
}
.account-admin-page.admin-shell .iv-tools button {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}
.account-admin-page.admin-shell .iv-tools button.iv-chip:first-child,
.account-admin-page.admin-shell .iv-tools .tiers-copy-all {
  border-color: var(--ad-tint-line);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .iv-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .iv-edit input {
  width: 72px;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-codes-card {
  border: 1px solid var(--ad-hairline);
  border-radius: 12px;
  background: #fff;
}
.account-admin-page.admin-shell .tiers-codes-table {
  display: block;
  width: 100%;
  border: 0;
}
.account-admin-page.admin-shell .tiers-codes-table :is(thead, tbody) {
  display: block;
}
.account-admin-page.admin-shell .tiers-codes-table tr {
  display: grid;
  grid-template-columns: 50px 240px 110px 190px minmax(0, 1fr) 150px 90px;
  gap: 14px;
  align-items: center;
  box-sizing: border-box;
  padding: 0 14px;
  min-height: 42px;
}
.account-admin-page.admin-shell .tiers-codes-table thead tr {
  min-height: 36px;
  border-bottom: 1px solid var(--ad-hairline);
  border-radius: 12px 12px 0 0;
  background: #fbfaf8;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .tiers-codes-table tbody tr + tr {
  border-top: 1px solid #f3f0ec;
}
.account-admin-page.admin-shell .tiers-codes-table :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 400;
}
.account-admin-page.admin-shell .tiers-codes-table tbody :is(th, td:nth-child(4), td:nth-child(5), td:nth-child(6)) {
  font-family: "DM Mono", ui-monospace, monospace;
}
.account-admin-page.admin-shell .tiers-code-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell .tiers-code-text {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.account-admin-page.admin-shell button.tiers-copy,
.account-admin-page.admin-shell button.iv-small {
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}
.account-admin-page.admin-shell button.tiers-copy[aria-pressed="true"] {
  border-color: #bfe0cb;
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell button.iv-danger {
  justify-self: end;
  border-color: var(--ad-danger-line);
  color: var(--ad-danger);
}
.account-admin-page.admin-shell .tiers-confirm:empty {
  display: none;
}

.account-admin-page.admin-shell .tiers-form > .tiers-form-actions {
  grid-column: auto;
  width: auto;
  margin: 0;
  padding: 0;
}
.account-admin-page.admin-shell .tiers-form button[type="submit"] {
  width: auto;
  white-space: nowrap;
}
.account-admin-page.admin-shell .tiers-table :is(th, td),
.account-admin-page.admin-shell .tiers-codes-table :is(th, td),
.account-admin-page.admin-shell .models-table :is(th, td) {
  box-shadow: none;
}
.account-admin-page.admin-shell .tiers-table tbody tr.tiers-row.is-selected {
  border-left: 0;
  box-shadow: none;
}
.account-admin-page.admin-shell .tiers-codes-table tr {
  grid-template-columns: 44px minmax(380px, 2.4fr) 100px 150px minmax(0, 1fr) 140px 90px;
}
.account-admin-page.admin-shell .tiers-code-text {
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0;
}

.account-admin-page.admin-shell .tiers-form button[type="submit"] {
  height: 36px;
  min-height: 36px;
}

/* ---- 共创收件箱 (Inbox3): fixed cards, three to a row; the detail opens under its row ---- */
.account-admin-page.admin-shell #admin-cocreation .cc-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}
.account-admin-page.admin-shell #admin-cocreation .cc-list-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.account-admin-page.admin-shell #admin-cocreation .cc-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-star-filter {
  height: 34px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-star-filter[aria-pressed="true"] {
  border-color: #e8c77a;
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
.account-admin-page.admin-shell #admin-cocreation input[type="search"] {
  flex: 1;
  max-width: 420px;
  height: 34px;
  min-height: 34px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: none;
  overflow: visible;
}
.account-admin-page.admin-shell #admin-cocreation .cc-row {
  position: relative;
  box-sizing: border-box;
  height: 176px;
  padding: 0;
  border: 1.5px solid var(--ad-hairline);
  border-radius: 16px;
  background: #fff;
  display: block;
  overflow: hidden;
  transition:
    border-color var(--ad-t-slide) var(--ad-ease),
    box-shadow var(--ad-t-slide) var(--ad-ease),
    background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-cocreation .cc-row:hover {
  border-color: var(--ad-tint-line);
  box-shadow: 0 6px 18px rgba(43, 40, 51, 0.06);
}
.account-admin-page.admin-shell #admin-cocreation .cc-row.is-active {
  border-color: var(--ad-primary);
  background: #fff;
}
.account-admin-page.admin-shell #admin-cocreation .cc-row.is-selected {
  border-color: var(--ad-tint-line);
  background: #fbfafe;
}
.account-admin-page.admin-shell #admin-cocreation .cc-row .cc-check {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  width: 16px;
  height: 16px;
  margin: 0;
}
.account-admin-page.admin-shell #admin-cocreation .cc-row-open {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 22px minmax(0, 1fr) 26px;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 14px 16px 12px 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ad-text);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.account-admin-page.admin-shell #admin-cocreation .cc-row-open:hover {
  background: transparent;
}
.account-admin-page.admin-shell #admin-cocreation .cc-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-pseudonym,
.account-admin-page.admin-shell #admin-cocreation .cc-when {
  color: var(--ad-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-when {
  margin-left: auto;
  font-size: 11px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-text {
  display: block;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 66%, transparent);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 66%, transparent);
}
.account-admin-page.admin-shell #admin-cocreation .cc-first {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}
.account-admin-page.admin-shell #admin-cocreation .cc-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-count {
  color: var(--ad-muted);
  font-size: 12px;
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-spacer {
  flex: 1;
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f0ece7;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip-new {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip-processed,
.account-admin-page.admin-shell #admin-cocreation .cc-chip-adopted {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip-star {
  padding: 0;
  background: transparent;
  color: #b07a00;
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip-draft {
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip-points {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell #admin-cocreation .cc-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 176px;
  margin: 0;
  border: 1.5px dashed var(--ad-border);
  border-radius: 16px;
  color: var(--ad-muted);
  font-size: 14px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-empty[hidden] {
  display: none;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-row {
  grid-column: 1 / -1;
  list-style: none;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail {
  display: block;
  box-sizing: border-box;
  padding: 18px 20px;
  border: 1.5px solid var(--ad-tint-line);
  border-radius: 16px;
  background: #fff;
  animation: adPageIn var(--ad-t-open) var(--ad-ease) both;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail[hidden] {
  display: none;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-head p {
  flex: 1;
  margin: 0;
  color: var(--ad-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-actions {
  display: flex;
  gap: 8px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-actions button,
.account-admin-page.admin-shell #admin-cocreation .cc-answer-actions button,
.account-admin-page.admin-shell #admin-cocreation .cc-adopt-actions button {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-detail-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.account-admin-page.admin-shell #admin-cocreation .cc-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-group > h4 {
  margin: 0;
  color: var(--ad-tint-ink);
  font-size: 13px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--ad-bg);
}
.account-admin-page.admin-shell #admin-cocreation .cc-card-prompt {
  margin: 0;
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-answer-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-answer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell #admin-cocreation button.cc-adopt-open,
.account-admin-page.admin-shell #admin-cocreation button.cc-adopt-story {
  border-color: var(--ad-tint-line);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target[hidden] {
  display: none;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-where {
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-value {
  box-sizing: border-box;
  min-height: 150px;
  padding: 12px 14px;
  border: 1px solid var(--ad-hairline);
  border-radius: 12px;
  background: #fbfaf8;
  font-size: 14px;
  line-height: 1.7;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-text,
.account-admin-page.admin-shell #admin-cocreation .cc-target-empty {
  margin: 0;
  white-space: pre-line;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-empty {
  color: var(--ad-muted);
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-pair {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.account-admin-page.admin-shell #admin-cocreation .cc-pair-situation {
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-adopt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: adPageIn var(--ad-t-open) var(--ad-ease) both;
}
.account-admin-page.admin-shell #admin-cocreation .cc-adopt textarea,
.account-admin-page.admin-shell #admin-cocreation .cc-adopt .cc-example input {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid var(--ad-amber);
  background: var(--ad-amber-soft);
  font-size: 14px;
  line-height: 1.7;
}
.account-admin-page.admin-shell #admin-cocreation .cc-adopt textarea {
  min-height: 150px;
  resize: vertical;
}
.account-admin-page.admin-shell #admin-cocreation .cc-example {
  display: grid;
  gap: 8px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-example label,
.account-admin-page.admin-shell #admin-cocreation .cc-adopt > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-adopt-help {
  margin: 0;
  color: var(--ad-amber-ink);
  font-size: 12px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-adopt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.account-admin-page.admin-shell #admin-cocreation button.cc-adopt-save {
  border-color: var(--ad-primary);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell #admin-cocreation .cc-saved {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ad-ok);
  font-size: 13px;
  animation: adPageIn var(--ad-t-open) var(--ad-ease) both;
}
.account-admin-page.admin-shell #admin-cocreation .cc-saved b {
  flex: 1;
}
.account-admin-page.admin-shell #admin-cocreation a.cc-go {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ad-tint-line);
  border-radius: 999px;
  color: var(--ad-tint-ink);
  font-weight: 700;
  text-decoration: none;
}
.account-admin-page.admin-shell .cc-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.account-admin-page.admin-shell .cc-bulk[hidden],
.account-admin-page.admin-shell .cc-counts[hidden] {
  display: none;
}

.account-admin-page.admin-shell #admin-cocreation button::before,
.account-admin-page.admin-shell #admin-cocreation button::after {
  content: none;
  display: none;
}

/* ---- 关系与故事 (Cast3) ---- */
.account-admin-page.admin-shell .cs {
  display: flex;
  flex-direction: column;
  gap: var(--ad-gap);
}
.account-admin-page.admin-shell .cs-defs {
  position: absolute;
}
.account-admin-page.admin-shell .cs .cs-card,
.account-admin-page.admin-shell .cs .cs-versions {
  box-sizing: border-box;
  padding: 18px 20px 20px;
  border: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell .cs .cs-card[hidden],
.account-admin-page.admin-shell .cs .cs-side[hidden],
.account-admin-page.admin-shell .cs [hidden] {
  display: none;
}
.account-admin-page.admin-shell .cs .cs-card.cs-open {
  border-width: 1.5px;
  border-color: var(--ad-tint-line);
  animation: adPageIn var(--ad-t-open) var(--ad-ease) both;
}
.account-admin-page.admin-shell .cs h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.account-admin-page.admin-shell .cs h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}
.account-admin-page.admin-shell .cs-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.account-admin-page.admin-shell .cs-hint-line,
.account-admin-page.admin-shell .cs-sub {
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 400;
}
.account-admin-page.admin-shell .cs-sub {
  font-size: 14px;
}
.account-admin-page.admin-shell .cs-actions,
.account-admin-page.admin-shell .cs-head-right,
.account-admin-page.admin-shell .cs-versions-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell .cs-head-right {
  gap: 12px;
}
.account-admin-page.admin-shell .cs-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f0ece7;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .cs-tag.is-ok {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .cs-tag.is-bad {
  background: var(--ad-danger-soft);
  color: var(--ad-danger);
}
.account-admin-page.admin-shell .cs button.cs-quiet,
.account-admin-page.admin-shell .cs button.cs-add,
.account-admin-page.admin-shell .cs button.cs-mini,
.account-admin-page.admin-shell .cs button.cs-close {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
}
.account-admin-page.admin-shell .cs button.is-tint,
.account-admin-page.admin-shell .cs button.cs-add.is-tint {
  border-color: var(--ad-tint-line);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell .cs button.cs-dashed {
  align-self: flex-start;
  border-style: dashed;
  border-color: #c9c2b8;
  background: transparent;
  color: var(--ad-muted);
  font-weight: 400;
}
.account-admin-page.admin-shell .cs button.cs-danger {
  border-color: var(--ad-danger-line);
  color: var(--ad-danger);
}
.account-admin-page.admin-shell .cs button.cs-mini[aria-pressed="true"] {
  border-color: transparent;
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
/* ---- 整页版本 (Part 24b-6b: the shared version list under one header row) ---- */
.account-admin-page.admin-shell .cs-versions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px;
}
.account-admin-page.admin-shell .cs-versions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.account-admin-page.admin-shell .cs-versions-label {
  flex: none;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .cs .cs-version.is-draft {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ad-text);
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .cs-version-mark {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ad-warn);
  transform: rotate(45deg);
}
.account-admin-page.admin-shell .cs .cs-version.is-draft.is-dirty {
  border-color: var(--ad-amber);
  background: var(--ad-amber-soft);
}
.account-admin-page.admin-shell .cs-versions .cs-spacer {
  flex: 1;
}
.account-admin-page.admin-shell .cs-confirm:empty {
  display: none;
}
/* ---- notices ---- */
.account-admin-page.admin-shell .cs-notices:empty {
  display: none;
}
.account-admin-page.admin-shell .cs-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--ad-warn-soft);
  font-size: 14px;
}
.account-admin-page.admin-shell .cs-notice.is-bad {
  background: var(--ad-danger-soft);
}
.account-admin-page.admin-shell .cs-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: 240px;
  overflow: auto;
}
.account-admin-page.admin-shell .cs-issue-group h4 {
  margin: 0 0 2px;
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-issue-group ul {
  margin: 0;
  padding-left: 18px;
}
/* ---- grid and side panel ---- */
.account-admin-page.admin-shell .cs-main {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ad-gap);
  align-items: start;
}
.account-admin-page.admin-shell .cs-main:has(> .cs-side[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.account-admin-page.admin-shell .cs-grid-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.account-admin-page.admin-shell .cs-grid {
  display: grid;
  grid-template-columns: minmax(76px, max-content) repeat(var(--n, 15), minmax(42px, max-content));
  gap: 3px;
  align-items: stretch;
}
.account-admin-page.admin-shell .cs-head {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ad-text);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  transition:
    background var(--ad-t-slide) var(--ad-ease),
    color var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .cs-head:hover:not(:disabled) {
  background: #f3f1ee;
}
.account-admin-page.admin-shell .cs-head-col {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 40px;
  padding: 0 4px;
}
.account-admin-page.admin-shell .cs-head-row {
  height: 34px;
  font-size: 13px;
  text-align: left;
}
.account-admin-page.admin-shell .cs-head[data-lit="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .cs-head[data-open="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell .cs-dot {
  flex: none;
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: 50%;
  background: var(--dot, #8c8697);
}
.account-admin-page.admin-shell .cs-cell {
  position: relative;
  box-sizing: border-box;
  height: 34px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--ad-hairline);
  border-radius: 6px;
  background: var(--heat, transparent);
  color: var(--ad-text);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  transition:
    box-shadow var(--ad-t-slide) var(--ad-ease),
    opacity var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .cs-cell.is-unset {
  border-style: dashed;
  border-color: var(--ad-border);
}
.account-admin-page.admin-shell .cs-cell.is-self {
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell .cs-cell:hover:not(.is-self),
.account-admin-page.admin-shell .cs-cell[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ad-primary);
  background-color: var(--heat, #fff);
}
.account-admin-page.admin-shell .cs-cell[data-dim="true"] {
  opacity: 0.55;
}
.account-admin-page.admin-shell .cs-cell[data-lit="true"][data-dim="false"] {
  opacity: 1;
}
.account-admin-page.admin-shell .cs-cell[data-dirty="true"] {
  border: 1.5px solid var(--ad-amber);
}
.account-admin-page.admin-shell .cs-story-dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ad-text);
}
.account-admin-page.admin-shell .cs-legend {
  display: flex;
  gap: 14px;
  padding-top: 4px;
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell .cs-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-admin-page.admin-shell .cs-legend-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ad-text);
}
.account-admin-page.admin-shell .cs-legend-amber {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ad-amber);
  border-radius: 3px;
  background: var(--ad-amber-soft);
}
.account-admin-page.admin-shell .cs-legend-unset {
  width: 10px;
  height: 10px;
  border: 1px dashed var(--ad-border);
  border-radius: 3px;
}
.account-admin-page.admin-shell .cs-side {
  min-width: 0;
}
.account-admin-page.admin-shell .cs-side-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: adPageIn var(--ad-t-slide) var(--ad-ease) both;
}
.account-admin-page.admin-shell .cs-pair-title .cs-with {
  color: var(--ad-muted);
  font-weight: 400;
}
.account-admin-page.admin-shell .cs-dir {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0ece7;
}
.account-admin-page.admin-shell .cs-dir-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.account-admin-page.admin-shell .cs-dir-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-arrow {
  color: var(--ad-muted);
  font-style: normal;
}
.account-admin-page.admin-shell .cs-dir-rate {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.account-admin-page.admin-shell .cs-stars {
  display: inline-flex;
  gap: 2px;
}
.account-admin-page.admin-shell .cs-star {
  position: relative;
  width: 28px;
  height: 28px;
}
.account-admin-page.admin-shell .cs-star svg {
  display: block;
}
.account-admin-page.admin-shell .cs-star-hit {
  position: absolute;
  top: 0;
  width: 14px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.account-admin-page.admin-shell .cs-star-hit.is-half {
  left: 0;
}
.account-admin-page.admin-shell .cs-star-hit.is-whole {
  left: 14px;
}
.account-admin-page.admin-shell .cs-star-hit:hover {
  background: rgba(224, 161, 0, 0.12);
}
.account-admin-page.admin-shell .cs-star-hit:focus-visible {
  outline: 2px solid var(--ad-primary);
}
.account-admin-page.admin-shell .cs-rating {
  width: 50px;
  text-align: right;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
}
.account-admin-page.admin-shell .cs-rating.is-unset {
  color: var(--ad-muted);
  font-weight: 400;
}
.account-admin-page.admin-shell .cs-rating[data-dirty="true"] {
  color: var(--ad-amber-ink);
}
.account-admin-page.admin-shell .cs-dir-rate .cs-mini {
  margin-left: 4px;
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
}
.account-admin-page.admin-shell .cs-dir-texts {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
}
.account-admin-page.admin-shell .cs-dir-texts input {
  height: 36px;
  min-height: 36px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
}
.account-admin-page.admin-shell .cs-pair-stories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-admin-page.admin-shell .cs-story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}
.account-admin-page.admin-shell .cs-story-row:hover:not(:disabled) {
  background: #f7f5f2;
}
.account-admin-page.admin-shell .cs-story-row[aria-pressed="true"] {
  background: var(--ad-tint);
  font-weight: 700;
}
.account-admin-page.admin-shell .cs-stack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* ---- sees ---- */
.account-admin-page.admin-shell .cs-sees-meta {
  display: flex;
  gap: 8px;
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell .cs-sees-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.7;
}
.account-admin-page.admin-shell .cs-sees-block p {
  margin: 0;
}
.account-admin-page.admin-shell .cs-sees {
  max-height: 560px;
  overflow: auto;
}
.account-admin-page.admin-shell .cs-hint {
  margin: 0;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-level {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f0ece7;
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .cs-level.is-lived {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .cs-level.is-heard {
  background: var(--ad-warn-soft);
  color: var(--ad-warn);
}
/* ---- name card ---- */
.account-admin-page.admin-shell .cs-go {
  color: var(--ad-tint-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.account-admin-page.admin-shell .cs-namecard {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
  gap: 20px;
  align-items: start;
  margin-top: 14px;
}
.account-admin-page.admin-shell .cs-lb,
.account-admin-page.admin-shell .cs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-lb input,
.account-admin-page.admin-shell .cs-lb select,
.account-admin-page.admin-shell .cs-field input,
.account-admin-page.admin-shell .cs-field select {
  height: 36px;
  min-height: 36px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
}
.account-admin-page.admin-shell .cs-field textarea,
.account-admin-page.admin-shell .cs-world-card textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  padding: 8px 10px;
  line-height: 1.6;
}
.account-admin-page.admin-shell .cs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-admin-page.admin-shell .cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ad-text);
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-pill.is-add {
  border-style: dashed;
  color: var(--ad-muted);
  font-weight: 400;
}
.account-admin-page.admin-shell .cs-pill input.cs-pill-input {
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-pill-x {
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ad-muted);
  font-size: 14px;
  font-weight: 400;
}
.account-admin-page.admin-shell .cs-feel {
  height: 20px;
  min-height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: #f0ece7;
  color: var(--ad-muted);
  font-size: 11px;
}
.account-admin-page.admin-shell .cs-feel.is-likes {
  background: var(--ad-ok-soft);
  color: var(--ad-ok);
}
.account-admin-page.admin-shell .cs-feel.is-dislikes {
  background: var(--ad-danger-soft);
  color: var(--ad-danger);
}
/* ---- story below ---- */
.account-admin-page.admin-shell .cs-story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.account-admin-page.admin-shell .cs-story-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
}
.account-admin-page.admin-shell .cs-story-left,
.account-admin-page.admin-shell .cs-story-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.account-admin-page.admin-shell .cs-fields-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 120px;
  gap: 10px;
}
.account-admin-page.admin-shell .cs-label {
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .cs-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-admin-page.admin-shell .cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-admin-page.admin-shell .cs button.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 8px;
  font-size: 13px;
  font-weight: 400;
}
.account-admin-page.admin-shell .cs button.cs-chip[aria-pressed="true"] {
  border-color: var(--ad-tint-line);
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell .cs button.cs-chip.is-person .cs-dot {
  border-radius: 2px;
}
.account-admin-page.admin-shell .cs-know-matrix {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.account-admin-page.admin-shell .cs button.cs-know {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  height: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--ad-hairline);
  border-radius: 10px;
  background: #fff;
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 400;
}
.account-admin-page.admin-shell .cs-know-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-admin-page.admin-shell .cs-know-level {
  font-size: 12px;
}
.account-admin-page.admin-shell .cs button.cs-know.is-lived {
  background: var(--ad-tint);
}
.account-admin-page.admin-shell .cs button.cs-know.is-lived .cs-know-level {
  color: var(--ad-tint-ink);
}
.account-admin-page.admin-shell .cs button.cs-know.is-heard {
  background: var(--ad-warn-soft);
}
.account-admin-page.admin-shell .cs button.cs-know.is-heard .cs-know-level {
  color: var(--ad-warn);
}
.account-admin-page.admin-shell .cs button.cs-know.is-unknown .cs-know-level {
  color: var(--ad-muted);
}
.account-admin-page.admin-shell .cs button.cs-know.is-override {
  border: 1.5px solid #e07a1f;
}
/* ---- groups, world ---- */
.account-admin-page.admin-shell .cs-groups-card,
.account-admin-page.admin-shell .cs-world-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.account-admin-page.admin-shell .cs-groups-table {
  border-radius: 12px;
}
.account-admin-page.admin-shell .cs-groups-table .ot-row {
  min-height: 48px;
  padding: 0 14px;
}
.account-admin-page.admin-shell .cs-groups-table .ot-head {
  display: none;
}
.account-admin-page.admin-shell .cs-g-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
  margin: 0 14px 14px;
}
.account-admin-page.admin-shell .cs-g-left,
.account-admin-page.admin-shell .cs-g-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.account-admin-page.admin-shell .cs-gstory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
}
.account-admin-page.admin-shell .cs-gstory > :nth-child(n + 4) {
  grid-column: 1 / -1;
}
.account-admin-page.admin-shell .cs-people-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.account-admin-page.admin-shell .cs-people-row .cs-label {
  margin-right: 4px;
}
.account-admin-page.admin-shell .cs-person-row {
  display: grid;
  grid-template-columns: 130px 130px 100px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ad-wash);
  animation: adPageIn var(--ad-t-open) var(--ad-ease) both;
}
.account-admin-page.admin-shell .cs-start {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.account-admin-page.admin-shell .cs-start-actions {
  display: flex;
  gap: 8px;
}
@container adc (max-width: 1040px) {
  .account-admin-page.admin-shell .cs-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-admin-page.admin-shell .cs-namecard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-admin-page.admin-shell .cs-story-body,
  .account-admin-page.admin-shell .cs-g-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-admin-page.admin-shell .cs-person-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.account-admin-page.admin-shell .cs-dir-rate {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 4px;
}

/* ---- 角色工作台 (Workbench4): the rail, ONE section bar, the save bar, the danger zones, 预演 ---- */
.account-admin-page.admin-shell #admin-characters {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.account-admin-page.admin-shell #admin-characters [hidden] {
  display: none !important;
}
/* the rail: 64 px, grows over the page (no reflow) on hover / focus */
.account-admin-page.admin-shell #admin-characters .wb-roster {
  position: sticky;
  top: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  box-sizing: border-box;
  width: 64px;
  padding: 8px 0;
  overflow: hidden;
  border: 1px solid var(--ad-hairline);
  border-radius: 20px;
  background: #fff;
  transition:
    width var(--ad-t-slide) var(--ad-ease),
    box-shadow var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-characters .wb-roster:is(:hover, :focus-within) {
  width: 212px;
  box-shadow: 0 12px 32px rgba(43, 40, 51, 0.16);
}
.account-admin-page.admin-shell #admin-characters .wb-roles {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick-row {
  position: relative;
  display: block;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick-row:has(.admin-pick[aria-current="true"]) {
  background: var(--ad-tint);
}
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick:hover {
  background: #faf9f7;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: none;
  color: var(--ad-text);
  font-style: normal;
  font-size: 15px;
  font-weight: 900;
}
.account-admin-page.admin-shell #admin-characters .admin-pick[data-seed="true"] .admin-pick-dot {
  outline: 2px dashed #2f7a4f;
  outline-offset: 2px;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-st {
  position: absolute;
  top: 8px;
  left: 40px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ad-muted);
}
.account-admin-page.admin-shell #admin-characters .admin-pick-st[data-tone="cc"] {
  background: #c2410c;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-st[data-tone="draft"] {
  background: var(--ad-amber);
}
.account-admin-page.admin-shell #admin-characters .admin-pick-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-characters .wb-roster:is(:hover, :focus-within) .admin-pick-text {
  opacity: 1;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-text strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: clip;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-text small {
  color: var(--ad-muted);
  font-size: 12px;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .cocreation-badge {
  position: absolute;
  top: 16px;
  right: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-characters .wb-roster:is(:hover, :focus-within) .cocreation-badge {
  opacity: 1;
  pointer-events: auto;
}
.account-admin-page.admin-shell #admin-characters #wb-new {
  box-sizing: border-box;
  width: calc(100% - 16px);
  height: 40px;
  margin: 6px 8px 0;
  padding: 0;
  overflow: hidden;
  border: 1px dashed #c9c2b8;
  background: transparent;
  color: var(--ad-muted);
  font-size: 0;
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-characters #wb-new::before {
  content: "+";
  font-size: 18px;
}
.account-admin-page.admin-shell #admin-characters .wb-roster:is(:hover, :focus-within) #wb-new {
  font-size: 14px;
}
.account-admin-page.admin-shell #admin-characters .wb-roster:is(:hover, :focus-within) #wb-new::before {
  content: none;
}
/* the middle column */
.account-admin-page.admin-shell #admin-characters .wb {
  display: block;
  min-width: 0;
}
.account-admin-page.admin-shell #admin-characters .wb-editor {
  display: block;
  min-width: 0;
}
.account-admin-page.admin-shell #admin-characters .wb-card {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: 0;
}
.account-admin-page.admin-shell #admin-characters .wb-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ad-hairline);
  border-radius: var(--ad-card-radius) var(--ad-card-radius) 0 0;
  background: #fff;
}
.account-admin-page.admin-shell #admin-characters .wb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  transition:
    background var(--ad-t-slide) var(--ad-ease),
    color var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-characters .wb-tab:hover {
  background: #f3f1ee;
}
.account-admin-page.admin-shell #admin-characters .wb-tab[aria-current="true"] {
  background: var(--ad-tint);
  color: var(--ad-tint-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell #admin-characters .wb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ad-amber);
  animation: adPop var(--ad-t-slide) var(--ad-ease) both;
}
.account-admin-page.admin-shell #admin-characters .wb-card-body {
  display: block;
  flex: 1;
  padding: 24px 28px;
}
.account-admin-page.admin-shell #admin-characters .wb-card-body > :not([hidden]),
.account-admin-page.admin-shell #admin-characters .wb-card .character-flow > :not([hidden]) {
  animation: none;
}
.account-admin-page.admin-shell #admin-characters .wb-card-body [data-pop="in"] {
  animation: wbPop calc(300ms * var(--ad-motion)) var(--ad-ease) both;
}
@keyframes wbPop {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.account-admin-page.admin-shell #admin-characters .wb-card .character-flow {
  display: block;
}
.account-admin-page.admin-shell #admin-characters .wb-card form.character-profile-form fieldset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-admin-page.admin-shell #admin-characters .wb-card form.character-profile-form fieldset.cn-pane {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.account-admin-page.admin-shell #admin-characters textarea[maxlength="20000"] {
  min-height: 320px;
}
.account-admin-page.admin-shell #admin-characters input.wb-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: #d7d2ca;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-characters input.wb-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-characters input.wb-switch:checked {
  background: #2f7a4f;
}
.account-admin-page.admin-shell #admin-characters input.wb-switch:checked::after {
  transform: translateX(16px);
}
/* structured editors */
.account-admin-page.admin-shell .cn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.account-admin-page.admin-shell .cn-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.account-admin-page.admin-shell .cn-label {
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell .cn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-admin-page.admin-shell .cn-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  height: 30px;
  min-height: 30px;
  padding: 0 6px 0 12px;
  border: 1px solid #e2ddd6;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
}
.account-admin-page.admin-shell .cn-chip:has(input[data-dirty="true"]) {
  border-color: var(--ad-amber);
  background: var(--ad-amber-soft);
}
.account-admin-page.admin-shell #admin-characters .cn-chip input.cn-chip-input {
  width: auto;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  font-size: 13px;
}
.account-admin-page.admin-shell button.cn-add {
  border-style: dashed;
  color: var(--ad-muted);
  font-weight: 400;
}
.account-admin-page.admin-shell button.cn-chip.cn-add {
  padding: 0 12px;
}
.account-admin-page.admin-shell button.cn-x {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ad-muted);
  font-size: 14px;
}
.account-admin-page.admin-shell .cn-pairs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-admin-page.admin-shell .cn-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 32px;
  gap: 10px;
  align-items: start;
}
.account-admin-page.admin-shell .cn-pair .cn-situation {
  grid-column: 1 / -1;
}
.account-admin-page.admin-shell .cn-pair .cn-reply {
  min-height: 40px;
  border-color: #cfc8f2;
}
.account-admin-page.admin-shell button.cn-add-wide {
  width: 100%;
  height: 40px;
  border-radius: 12px;
}
.account-admin-page.admin-shell .cn-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.account-admin-page.admin-shell .cn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2ddd6;
  border-radius: 14px;
}
.account-admin-page.admin-shell .cn-card .cn-title {
  padding-right: 28px;
  font-weight: 700;
}
.account-admin-page.admin-shell .cn-card .cn-x {
  position: absolute;
  top: 10px;
  right: 10px;
}
.account-admin-page.admin-shell button.cn-add-card {
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 140px;
  border: 1px dashed #c9c2b8;
  border-radius: 14px;
  font-size: 14px;
}
/* title row + save bar */
.account-admin-page.admin-shell .wb-seed {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e7f3ec;
  color: #2f7a4f;
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .wb-unsaved {
  color: var(--ad-amber-ink);
}
.account-admin-page.admin-shell #admin-characters .wb-savebar {
  position: sticky;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-top: 1px solid var(--ad-hairline);
  border-radius: 0 0 var(--ad-card-radius) var(--ad-card-radius);
  background: #fff;
}
.account-admin-page.admin-shell #admin-characters .wb-savestate {
  flex: 1;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell #admin-characters .wb-savestate[data-state="dirty"] {
  color: var(--ad-amber-ink);
  font-weight: 700;
}
.account-admin-page.admin-shell #admin-characters .wb-savebar-actions {
  display: flex;
  gap: 10px;
}
.account-admin-page.admin-shell #admin-characters .wb-danger {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #f0ece7;
}
/* 预演 */
.account-admin-page.admin-shell #admin-characters .wb-preview {
  position: static;
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.account-admin-page.admin-shell #admin-characters .pw-compose {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px 28px;
  align-items: start;
}
.account-admin-page.admin-shell #admin-characters .pw-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.account-admin-page.admin-shell #admin-characters .pw-controls .admin-bar {
  flex-direction: column;
  align-items: stretch;
}
.account-admin-page.admin-shell #admin-characters .pw-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ad-hairline);
  border-radius: 16px;
  background: #fbfaf8;
}
.account-admin-page.admin-shell #admin-characters .pw-results {
  margin-top: 20px;
}
.account-admin-page.admin-shell #admin-characters .pw-run-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.account-admin-page.admin-shell #admin-characters .pw-run-body {
  padding: 12px 16px;
}
.account-admin-page.admin-shell #admin-characters .pw-compare-bar:not(:empty) {
  margin-top: 12px;
}

.account-admin-page.admin-shell #admin-characters .wb-card .character-flow {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.account-admin-page.admin-shell #admin-characters .wb-roster {
  max-height: calc(100vh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick-row,
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick {
  height: 44px;
  min-height: 44px;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick {
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 0 13px;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-dot {
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 14px;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-st {
  top: 4px;
  left: 38px;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .cocreation-badge {
  top: 12px;
}

.account-admin-page.admin-shell #admin-characters .wb-preview .pw {
  max-width: none;
}
.account-admin-page.admin-shell #admin-characters .wb-preview .pw .admin-bar-title {
  display: none;
}
.account-admin-page.admin-shell #admin-characters .wb-preview .pw-compose {
  display: grid;
}
.account-admin-page.admin-shell #admin-characters .wb-danger {
  flex-direction: column;
  align-items: flex-start;
}

.account-admin-page.admin-shell #admin-characters .wb-preview,
.account-admin-page.admin-shell #admin-characters .wb-preview .pw {
  border: 0;
  box-shadow: none;
}

.account-admin-page.admin-shell .cs-know-item {
  position: relative;
  display: block;
  min-width: 0;
}
.account-admin-page.admin-shell .cs-know-item > .cs-know {
  width: 100%;
}
.account-admin-page.admin-shell .cs-know-item > button.cs-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #b4560f;
  font-size: 11px;
}

.account-admin-page.admin-shell form.mb-add {
  max-width: none;
}
.account-admin-page.admin-shell .pt-bar {
  grid-template-columns: auto minmax(140px, 1fr) 120px minmax(120px, 1fr) auto;
}
.account-admin-page.admin-shell .cc-chip-star {
  color: var(--ad-warn);
}

.account-admin-page.admin-shell #admin-characters .admin-pick-dot {
  color: var(--ink, #fff);
}

.account-admin-page.admin-shell .xy-plot:has(.xy-hit:hover, .xy-hit:focus) > .xy-guide {
  opacity: 1;
}
.account-admin-page.admin-shell #admin-cocreation .cc-chip.cc-chip-star {
  color: var(--ad-warn);
}

.account-admin-page.admin-shell .tiers-detail .tiers-codes-table tr {
  grid-template-columns: 40px 376px 84px 140px minmax(0, 1fr) 110px 80px;
  gap: 10px;
  padding: 0 12px;
}
.account-admin-page.admin-shell .tiers-detail .tiers-code-text {
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: 12px;
}

.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick {
  justify-content: start;
  justify-items: start;
  text-align: left;
}
.account-admin-page.admin-shell #admin-characters .wb-roles .cocreation-badge {
  top: 14px;
  right: 8px;
  padding: 0 8px;
  font-size: 11px;
}

.account-admin-page.admin-shell #admin-characters .wb-roster {
  align-items: stretch;
}
.account-admin-page.admin-shell #admin-characters .wb-roles,
.account-admin-page.admin-shell #admin-characters .wb-roles .admin-pick-row {
  box-sizing: border-box;
  width: 100%;
}

.account-admin-page.admin-shell .members-list .admin-member > .mb-grid {
  flex: 1 1 100%;
  min-width: 0;
}
.account-admin-page.admin-shell .members-list .permission-areas {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 16px 12px;
}

.account-admin-page.admin-shell .permission-matrix > :is(.permission-areas, .permission-presets, .permission-note) {
  grid-column: 1 / -1;
}

/* the half star: the hit areas never paint anything (no button background, no ring); the star itself glows on hover / focus */
.account-admin-page.admin-shell .cs button.cs-star-hit,
.account-admin-page.admin-shell .cs button.cs-star-hit:hover,
.account-admin-page.admin-shell .cs button.cs-star-hit:active,
.account-admin-page.admin-shell .cs button.cs-star-hit:focus,
.account-admin-page.admin-shell .cs button.cs-star-hit:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.account-admin-page.admin-shell .cs-star svg {
  transition: filter var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .cs-star:has(.cs-star-hit:hover) svg {
  filter: drop-shadow(0 0 2px rgba(224, 161, 0, 0.75));
}
.account-admin-page.admin-shell .cs-star:has(.cs-star-hit:focus-visible) svg {
  filter: drop-shadow(0 0 2px var(--ad-primary));
}

/* 关系与故事: the pair panel is at least 400 wide; the grid takes what is left (smaller cells and names under ~1100 of content) */
.account-admin-page.admin-shell .cs-main {
  grid-template-columns: minmax(0, 1fr) minmax(400px, 440px);
}
.account-admin-page.admin-shell .cs-main:has(> .cs-side[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.account-admin-page.admin-shell .cs-grid {
  grid-template-columns: minmax(64px, max-content) repeat(var(--n, 15), minmax(var(--cell-min, 36px), 46px));
}
.account-admin-page.admin-shell .cs-dir-rate {
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}
@container adc (max-width: 1100px) {
  .account-admin-page.admin-shell .cs-grid-card {
    --cell-min: 28px;
    padding: 12px;
  }
  .account-admin-page.admin-shell .cs-grid {
    grid-template-columns: minmax(56px, max-content) repeat(var(--n, 15), minmax(28px, 1fr));
    gap: 2px;
  }
  .account-admin-page.admin-shell .cs-head-col {
    padding: 0;
    font-size: 10px;
  }
  .account-admin-page.admin-shell .cs-head-row {
    padding: 0 4px;
    font-size: 12px;
  }
}

.account-admin-page.admin-shell #admin-characters .admin-pick-dot {
  color: #fff;
  font-size: 14px;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-text {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-text strong {
  flex: 0 1 auto;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-mark {
  flex: none;
  color: var(--ad-muted);
  font-size: 12px;
  font-style: normal;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-mark.is-seed {
  color: #2f7a4f;
}
.account-admin-page.admin-shell #admin-characters .admin-pick-mark.is-draft {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ad-amber);
}
.account-admin-page.admin-shell #admin-characters .wb-roles .cocreation-badge {
  top: 12px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* danger zone: a full-width row in its section; the impact numbers side by side, then the name field and the hold button */
.account-admin-page.admin-shell .wb-danger .dz,
.account-admin-page.admin-shell .dz[data-open="true"] {
  align-self: stretch;
  width: 100%;
}
.account-admin-page.admin-shell .dz-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: end;
}
.account-admin-page.admin-shell .dz-impact {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
}
.account-admin-page.admin-shell .dz-card {
  flex: 1 1 0;
  min-width: 0;
}
.account-admin-page.admin-shell .dz-note,
.account-admin-page.admin-shell .dz-wait {
  grid-column: 1 / -1;
}
.account-admin-page.admin-shell .dz-field {
  grid-column: 1;
}
.account-admin-page.admin-shell button.dz-go {
  grid-column: 2;
  flex: none;
  width: auto;
  min-width: max-content;
  padding: 0 24px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .dz-body:not(:has(.dz-field)) > button.dz-go {
  grid-column: 1 / -1;
  justify-self: start;
}
.account-admin-page.admin-shell button.dz-go > .dz-label {
  white-space: nowrap;
}
.account-admin-page.admin-shell .wb-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-admin-page.admin-shell .wb-who i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, #8c8697);
}
.account-admin-page.admin-shell .wb-who strong {
  color: var(--ad-text);
  font-weight: 900;
}

/* 共创收件箱: the open card has one uniform border; the draft box holds the draft and, in amber, what is being added to it */
.account-admin-page.admin-shell #admin-cocreation .cc-row.is-active {
  border: 1.5px solid #5b4fc4;
  box-shadow: none;
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  min-height: 150px;
  padding: 12px 14px;
  border: 1px solid var(--ad-hairline);
  border-radius: 12px;
  background: #fbfaf8;
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-box .cc-target-value {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-box textarea {
  min-height: 84px;
}
.account-admin-page.admin-shell #admin-cocreation form.cc-adopt {
  padding: 0;
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell #admin-cocreation form.cc-adopt > select {
  align-self: flex-start;
  height: 32px;
  min-height: 32px;
  width: auto;
  max-width: 100%;
  font-size: 13px;
}

.account-admin-page.admin-shell .cs-call > .is-name {
  font-size: 12px;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* a chart column is a hover / focus target, never a drawn rectangle: guide line, point and bubble are the whole look */
.account-admin-page.admin-shell .xy-hit,
.account-admin-page.admin-shell .xy-hit:hover,
.account-admin-page.admin-shell .xy-hit:focus,
.account-admin-page.admin-shell .xy-hit:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}
.account-admin-page.admin-shell .xy-hit .xy-dot {
  transition: transform var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell .xy-hit:is(:hover, :focus) .xy-dot {
  transform: scale(1.5);
}

/* 资料改动: the formal text on the left, the draft on the right; removed in danger-soft, added in success-soft */
.account-admin-page.admin-shell .pd-grid {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ad-hairline);
  border-radius: 12px;
}
.account-admin-page.admin-shell .pd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.account-admin-page.admin-shell .pd-row + .pd-row {
  border-top: 1px solid #f3f0ec;
}
.account-admin-page.admin-shell .pd-head {
  background: #fbfaf8;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 700;
}
.account-admin-page.admin-shell .pd-cell {
  min-width: 0;
  padding: 5px 12px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.account-admin-page.admin-shell .pd-left {
  border-right: 1px solid #f3f0ec;
}
.account-admin-page.admin-shell .pd-del {
  background: var(--ad-danger-soft);
}
.account-admin-page.admin-shell .pd-add {
  background: var(--ad-ok-soft);
}
.account-admin-page.admin-shell .pd-empty {
  background: #faf9f7;
}

.account-admin-page.admin-shell .permission-item {
  gap: 8px;
}
.account-admin-page.admin-shell .permission-item > input {
  flex: none;
  margin: 3px 0 0;
}

/* the hold fill is a light tint and the label stays dark red on it, so the whole label reads before, during and after the fill */
.account-admin-page.admin-shell button.dz-go > i {
  background: #f1b9ae;
}
.account-admin-page.admin-shell button.dz-go[data-hold="on"] > .dz-label {
  color: #6f1d10;
}

/* ==== Part 24b-6, round 3 ==== */

/* the hold button: the label is danger red on the white part and white on the filled part (a second label under a clip) */
.account-admin-page.admin-shell button.dz-go.is-hold {
  background: #fff;
  color: var(--ad-danger);
}
.account-admin-page.admin-shell button.dz-go.is-hold > i {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  width: 100%;
  background: var(--ad-danger);
  clip-path: inset(0 100% 0 0);
  transition: clip-path calc(80ms * var(--ad-motion)) linear;
}
.account-admin-page.admin-shell button.dz-go.is-hold[data-hold="on"] > i {
  width: 100%;
  clip-path: inset(0 0 0 0);
  transition: clip-path calc(1500ms * var(--ad-motion)) linear;
}
.account-admin-page.admin-shell button.dz-go.is-hold > .dz-label {
  position: relative;
  color: var(--ad-danger);
}
.account-admin-page.admin-shell button.dz-go.is-hold[data-hold="on"] > .dz-label {
  color: var(--ad-danger);
}
.account-admin-page.admin-shell button.dz-go.is-hold > i > .dz-label-on {
  color: #fff;
}
.account-admin-page.admin-shell button.dz-go.is-hold:disabled > .dz-label {
  color: var(--ad-muted);
}

/* 邀请与额度: an opened batch grows to show every code (no height cap, no inner scroll), header labels never wrap, no rule under them */
.account-admin-page.admin-shell .admin-table-region,
.account-admin-page.admin-shell .admin-table-region .admin-table-wrap,
.account-admin-page.admin-shell .tiers-detail .admin-table-wrap,
.account-admin-page.admin-shell .tiers-codes-card {
  max-height: none;
  overflow: visible;
}
.account-admin-page.admin-shell .tiers-table thead th,
.account-admin-page.admin-shell .tiers-codes-table thead th {
  position: static;
  box-shadow: none;
  border-bottom: 0;
  white-space: nowrap;
}
.account-admin-page.admin-shell .tiers-detail .tiers-codes-table tr {
  grid-template-columns: 40px 264px 76px 140px 92px 136px 76px;
  gap: 10px;
  padding: 0 12px;
}
.account-admin-page.admin-shell .tiers-detail .tiers-codes-table :is(th, td) {
  white-space: nowrap;
  min-width: 0;
}
.account-admin-page.admin-shell .tiers-code-cell {
  flex-wrap: nowrap;
}
.account-admin-page.admin-shell .tiers-code-cell .tiers-code-text {
  min-width: 0;
}
.account-admin-page.admin-shell form.tiers-form {
  grid-template-columns:
    minmax(0, 1.2fr) minmax(0, 0.6fr) minmax(176px, 1.3fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr)
    minmax(156px, 1fr) auto auto;
}
.account-admin-page.admin-shell form.tiers-form input[type="date"] {
  min-width: 0;
  width: 100%;
}

/* 关系与故事: under ~1040 of content the pair panel sits BELOW the grid, full width, and the cells stay at 34 px or more */
@container adc (max-width: 1040px) {
  .account-admin-page.admin-shell .cs-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-admin-page.admin-shell .cs-grid-card {
    --cell-min: 34px;
    padding: 16px 20px;
  }
  .account-admin-page.admin-shell .cs-grid {
    grid-template-columns: minmax(64px, max-content) repeat(var(--n, 15), minmax(34px, 46px));
    gap: 4px;
  }
  .account-admin-page.admin-shell .cs-head-col {
    padding: 0;
    font-size: 11px;
  }
}

/* 消耗表 按模型: provider / model / phase never breaks inside a word */
.account-admin-page.admin-shell .cs-table .ot-cell.is-mono {
  white-space: nowrap;
}

/* 共创收件箱: the target header keeps each part whole; the link drops to its own line as a whole */
.account-admin-page.admin-shell #admin-cocreation .cc-target-head {
  flex-wrap: wrap;
  row-gap: 4px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-head > * {
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target-head > .cc-spacer {
  flex: 1 1 0;
  min-width: 0;
}

/* 说话方式: each example field carries its short label (情境 / 玩家说 / 他回) */
.account-admin-page.admin-shell .cn-pair .cn-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.account-admin-page.admin-shell .cn-pair .cn-lab > span {
  color: var(--ad-muted);
  font-size: 11px;
  line-height: 1;
}
.account-admin-page.admin-shell .cn-pair .cn-situation-lab {
  grid-column: 1 / -1;
}
.account-admin-page.admin-shell .cn-pair > .cn-x {
  margin-top: 15px;
}

/* 邀请码表: the player number reads from the left under its header, like every other column */
.account-admin-page.admin-shell .tiers-detail .tiers-codes-table :is(th, td) {
  text-align: left;
}

.account-admin-page.admin-shell .cn-pair > .cn-lab:not(.cn-situation-lab) {
  grid-column: auto;
  margin: 0;
}
.account-admin-page.admin-shell .cn-pair > .cn-situation-lab {
  margin: 0;
}

/* the code's middle is cut by the paint only: the head shrinks with an ellipsis, the last eight characters always show */
.account-admin-page.admin-shell .tiers-detail .tiers-code-text {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}
.account-admin-page.admin-shell .tiers-code-text .tc-head {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-admin-page.admin-shell .tiers-code-text .tc-tail {
  flex: none;
}

/* the saved line keeps its sentence whole; the link drops to its own line when they do not fit */
.account-admin-page.admin-shell #admin-cocreation .cc-saved {
  flex-wrap: wrap;
  row-gap: 8px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-saved b {
  flex: 1 1 auto;
  white-space: nowrap;
}
.account-admin-page.admin-shell #admin-cocreation a.cc-go {
  white-space: nowrap;
}

/* ==== Part 24b-6, round 4 ==== */

/* 主色: the palette swatches (a used one wears the other character's initial on hover) and the amber "和 X 同色" mark */
.account-admin-page.admin-shell .colour-field {
  flex-wrap: wrap;
  row-gap: 10px;
}
.account-admin-page.admin-shell .colour-swatches {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 8px;
}
.account-admin-page.admin-shell button.colour-swatch {
  position: relative;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 0 0 1px var(--ad-hairline);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform calc(120ms * var(--ad-motion)) var(--ad-ease),
    box-shadow calc(120ms * var(--ad-motion)) var(--ad-ease);
}
.account-admin-page.admin-shell button.colour-swatch:hover,
.account-admin-page.admin-shell button.colour-swatch:focus-visible {
  transform: scale(1.12);
}
.account-admin-page.admin-shell button.colour-swatch[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--ad-primary),
    0 0 0 4px #fff;
}
.account-admin-page.admin-shell button.colour-swatch.is-used {
  background: color-mix(in srgb, var(--sw) 38%, #fff);
  box-shadow: 0 0 0 1px var(--ad-hairline);
}
.account-admin-page.admin-shell button.colour-swatch.is-used[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--ad-primary),
    0 0 0 4px #fff;
}
.account-admin-page.admin-shell button.colour-swatch.is-used:is(:hover, :focus-visible)::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sw);
}
.account-admin-page.admin-shell .colour-same {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--ad-amber);
  border-radius: 999px;
  background: var(--ad-amber-soft);
  color: var(--ad-amber-ink);
  font-size: 12px;
  white-space: nowrap;
}
.account-admin-page.admin-shell .colour-same[hidden] {
  display: none;
}

/* 版本历史 (Part 24f, Part 24b-6b): ONE list for the workbench and for 关系与故事 (history/history-list.ts), on the open-below table. */
.account-admin-page.admin-shell .vh {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.account-admin-page.admin-shell .vh-wrap {
  min-width: 0;
}
.account-admin-page.admin-shell .vh .vh-note {
  margin: 0;
  color: var(--ad-muted);
  font-size: 13px;
  line-height: 1.6;
}
.account-admin-page.admin-shell .vh-table .ot-row {
  padding-block: 8px;
}
.account-admin-page.admin-shell .vh-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.account-admin-page.admin-shell .vh-stack small {
  color: var(--ad-muted);
  font-size: 12px;
  line-height: 1.5;
}
.account-admin-page.admin-shell .vh-what small.vh-why {
  color: #a4402f;
}
.account-admin-page.admin-shell .vh-version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.account-admin-page.admin-shell .vh-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.account-admin-page.admin-shell .vh-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  text-align: right;
  animation: adPageIn var(--ad-t-slide) var(--ad-ease) both;
}
.account-admin-page.admin-shell .vh-confirm-buttons {
  display: flex;
  gap: 8px;
}
.account-admin-page.admin-shell .vh-detail {
  min-width: 0;
}
.account-admin-page.admin-shell .vh-detail .vh-title {
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ad-border);
  font-size: 14px;
}
.account-admin-page.admin-shell .vh-detail .vh-group {
  margin: 14px 0 6px;
  color: var(--ad-muted);
  font-size: 12px;
  font-weight: 600;
}
.account-admin-page.admin-shell .vh-detail .admin-kv {
  margin: 0;
}
.account-admin-page.admin-shell .vh-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.permission-group[data-area="legacy"] .permission-item span.permission-dead {
  /* 「删除角色（已失效）」 reads as one phrase, not broken inside 已失效 (Part 24f). */
  white-space: nowrap;
}
/* ======================================================================================================================
   Part 24b-6b: admin console fixes. Every rule is scoped to the admin shell (.account-admin-page.admin-shell); nothing here
   touches the player pages.
   ====================================================================================================================== */
.account-admin-page.admin-shell {
  /* One rule for the fields of 角色工作台: a single line is 40 px; a multi-line box is at least four lines (14 px / 1.6 + padding)
     and grows with its text up to --ta-max, then scrolls inside itself. */
  --fld-h: 40px;
  --ta-min: 112px;
  --ta-max: 360px;
  --wb-rail-top: 100px;
}
/* ---- the page itself never scrolls sideways, and the left navigation never moves ---- */
.account-admin-page.admin-shell .admin-frame,
.account-admin-page.admin-shell .admin-content,
.account-admin-page.admin-shell .admin-content > section {
  min-width: 0;
}
/* 共创收件箱: the page (and so the frame the navigation is sticky in) grows with the cards; before, the section was a zero-height
   flex item whose content overflowed the frame, and the navigation scrolled away with the window. */
.account-admin-page.admin-shell[data-surface="cocreation"] .admin-content > section[data-panel]:not([hidden]),
.account-admin-page.admin-shell[data-surface="cocreation"] #admin-cocreation,
.account-admin-page.admin-shell[data-surface="preview"] .admin-content > section[data-panel]:not([hidden]),
.account-admin-page.admin-shell[data-surface="preview"] #admin-preview {
  flex: none;
  min-height: auto;
}
/* 角色工作台: the rail holds its place while the page scrolls (it scrolls inside itself when it is taller than the window). */
.account-admin-page.admin-shell #admin-characters .wb-roster {
  top: var(--wb-rail-top);
  /* leaves the page's own bottom padding free, so the rail is never pushed up when the page is scrolled to its end */
  max-height: calc(100dvh - var(--wb-rail-top) - 48px);
}
/* 共创收件箱: the list column is as tall as its cards (it was cut at one window height, and the cards ran out of it) */
.account-admin-page.admin-shell #admin-cocreation .cc-list-column {
  position: static;
  max-height: none;
}
/* 系统状态: a table never makes the page wider; long tokens wrap inside their cells */
.account-admin-page.admin-shell .sys-row > .system-section,
.account-admin-page.admin-shell .system-section {
  min-width: 0;
}
.account-admin-page.admin-shell .system-section .admin-table-wrap {
  overflow-x: auto;
}
.account-admin-page.admin-shell .system-section .admin-table :is(th, td) {
  overflow-wrap: anywhere;
}
.account-admin-page.admin-shell .system-section[data-section="cleanup"] .admin-table {
  width: 100%;
}
.account-admin-page.admin-shell .system-section[data-section="cleanup"] .admin-table th {
  white-space: normal;
}
.account-admin-page.admin-shell .admin-tag {
  font-size: 11px;
}

/* 版本历史 uses the card's whole width (the forms keep their reading measure) */
.account-admin-page.admin-shell #admin-characters .wb-card .character-flow:has(.vh) {
  max-width: none;
}

/* ---- 角色工作台: one rule for every field, on every tab ---- */
.account-admin-page.admin-shell
  #admin-characters
  .wb-card
  :is(
    input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"]):not(.cn-chip-input),
    select
  ) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--fld-h);
  min-height: var(--fld-h);
  font-size: 14px;
}
.account-admin-page.admin-shell #admin-characters .wb-card input[type="color"] {
  width: var(--fld-h);
  height: var(--fld-h);
  min-height: var(--fld-h);
  padding: 2px;
}
.account-admin-page.admin-shell #admin-characters .wb-card textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--ta-min);
  max-height: var(--ta-max);
  overflow-y: auto;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  field-sizing: content;
}
.account-admin-page.admin-shell #admin-characters .wb-card textarea.admin-json {
  min-height: var(--ta-min);
  font-size: 12px;
}
.account-admin-page.admin-shell #admin-characters .wb-card textarea[maxlength="20000"] {
  min-height: var(--ta-min);
}
.account-admin-page.admin-shell #admin-characters .wb-card .cn-pair .cn-reply {
  min-height: var(--ta-min);
  border-color: var(--ad-border);
}
/* labels: the same small grey line above its field, everywhere */
.account-admin-page.admin-shell #admin-characters .wb-card label,
.account-admin-page.admin-shell #admin-characters .wb-card .cn-label,
.account-admin-page.admin-shell #admin-characters .wb-card .cn-pair .cn-lab > span {
  color: var(--ad-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.account-admin-page.admin-shell #admin-characters .wb-card label.admin-check {
  color: var(--ad-text);
}
.account-admin-page.admin-shell #admin-characters .wb-card .cn-pair .cn-lab {
  gap: 6px;
}
.account-admin-page.admin-shell #admin-characters .wb-card .cn-pair > .cn-x {
  margin-top: 25px;
}
/* 说话方式 / 经历: the cards are columns of the same grid, the dashed add box is one card of it */
.account-admin-page.admin-shell #admin-characters .wb-card .cn-cards {
  grid-auto-rows: auto;
  align-items: stretch;
}
.account-admin-page.admin-shell #admin-characters .wb-card button.cn-add-card {
  min-height: calc(var(--ta-min) + var(--fld-h) + 8px + 24px);
}
.account-admin-page.admin-shell #admin-characters .wb-card .cn-card textarea {
  flex: 1 1 auto;
}
/* 主色 sits in the grid like every other field: its text box is one column wide, the swatch (a square of the same height) and the live
   chip sit in the second column, the palette runs under both */
.account-admin-page.admin-shell #admin-characters .wb-card .colour-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px 20px;
}
.account-admin-page.admin-shell #admin-characters .wb-card .colour-field > label {
  flex: none;
}
.account-admin-page.admin-shell #admin-characters .wb-card .colour-tools {
  display: flex;
  align-self: start;
  align-items: center;
  height: var(--fld-h);
  margin: 34px 0 0; /* level with the text box under the label line */
  gap: 10px;
  min-width: 0;
}
.account-admin-page.admin-shell #admin-characters .wb-card .colour-tools .colour-chip {
  height: var(--fld-h);
}
.account-admin-page.admin-shell #admin-characters .wb-card .colour-field > :is(.colour-swatches, .colour-same) {
  grid-column: 1 / -1;
}
/* 声音: the folded sections lay their fields out on the same two columns as the fieldsets */
.account-admin-page.admin-shell #admin-characters .wb-card details::details-content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-admin-page.admin-shell #admin-characters .wb-card .cn-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
}
/* 声音: the referenceId and the checkboxes share the grid's columns */
.account-admin-page.admin-shell #admin-characters .wb-card label:has(> input[aria-label*="referenceId"]),
.account-admin-page.admin-shell #admin-characters .wb-card label:has(> input[type="text"]) {
  max-width: none;
}
/* 预演: top labels, two columns of controls, the same field heights */
.account-admin-page.admin-shell #admin-characters .wb-preview .admin-filter,
.account-admin-page.admin-shell #admin-characters .pw-controls .admin-filter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  white-space: normal;
}
.account-admin-page.admin-shell #admin-characters .pw-controls .admin-filter:has(input[type="time"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 12px;
}
.account-admin-page.admin-shell #admin-characters .pw-controls .admin-filter:has(input[type="time"]) > span {
  grid-column: 1 / -1;
}
.account-admin-page.admin-shell #admin-characters .pw-controls .pw-zone {
  padding-left: 0;
  text-align: left;
}
.account-admin-page.admin-shell #admin-characters .pw button {
  height: var(--fld-h);
  min-height: var(--fld-h);
}
.account-admin-page.admin-shell #admin-characters .pw-compose-row > :is(input, textarea) {
  min-width: 0;
}
.account-admin-page.admin-shell #admin-characters .wb-preview .pw-compose-row > textarea {
  height: auto;
}

/* targets of at least 24 px (WCAG 2.5.8): the × of a chip / card / example and the inbox card's tick */
.account-admin-page.admin-shell button.cn-x {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-row input.cc-check {
  left: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
}

/* ---- 共创收件箱: 加入草稿 puts the note into the draft's own text (one box, no new one) ---- */
.account-admin-page.admin-shell #admin-cocreation .cc-draft-box {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.account-admin-page.admin-shell #admin-cocreation .cc-area-wrap {
  position: relative;
  min-width: 0;
  border-radius: 12px;
  background: #fff;
}
.account-admin-page.admin-shell #admin-cocreation .cc-mirror,
.account-admin-page.admin-shell #admin-cocreation .cc-area {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.account-admin-page.admin-shell #admin-cocreation .cc-mirror {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-color: transparent;
  color: transparent;
  pointer-events: none;
}
.account-admin-page.admin-shell #admin-cocreation .cc-area {
  position: relative;
  display: block;
  min-height: var(--ta-min);
  max-height: var(--ta-max);
  overflow-y: auto;
  background: transparent;
  color: var(--ad-text);
  resize: vertical;
  field-sizing: content;
}
.account-admin-page.admin-shell #admin-cocreation .cc-area:focus {
  border-color: var(--ad-primary);
}
/* the inserted passage: lit for a moment (the select motion, 200 ms; no motion at all with reduced motion) */
.account-admin-page.admin-shell #admin-cocreation .cc-mirror mark.cc-hit {
  border-radius: 4px;
  background: transparent;
  color: transparent;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-cocreation .cc-mirror mark.cc-hit.is-on {
  background: #f6dfa8;
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ad-hairline);
  border-radius: 14px;
  background: #fbfaf8;
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-card .cc-area-wrap,
.account-admin-page.admin-shell #admin-cocreation .cc-draft-card input {
  background: #fff;
}
.account-admin-page.admin-shell #admin-cocreation .cc-lab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--ad-muted);
  font-size: 13px;
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-card input {
  box-sizing: border-box;
  width: 100%;
  height: var(--fld-h);
  padding: 0 14px;
  border: 1px solid var(--ad-border);
  border-radius: 12px;
  font-size: 14px;
  transition: background var(--ad-t-slide) var(--ad-ease);
}
.account-admin-page.admin-shell #admin-cocreation .cc-draft-card input.is-just-added {
  background: #f6dfa8;
}
.account-admin-page.admin-shell #admin-cocreation .cc-target > select {
  align-self: flex-start;
  height: 32px;
  max-width: 100%;
  font-size: 13px;
}

/* ---- 关系与故事 → 世界: the name cards and the dashed add boxes are one size on one grid ---- */
.account-admin-page.admin-shell .cs-world-card .cs-people-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 136px);
  gap: 8px;
  align-items: stretch;
}
.account-admin-page.admin-shell .cs-world-card .cs-people-row > .cs-label {
  grid-column: 1 / -1;
  margin: 0;
}
.account-admin-page.admin-shell .cs-world-card .cs-people-row > :is(button.cs-chip, button.cs-dashed) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 136px;
  height: 36px;
  min-width: 0;
  padding: 0 12px;
  overflow: hidden;
  font-size: 13px;
  line-height: 16px;
  text-align: left;
  overflow-wrap: anywhere; /* a long name wraps inside its card (never an ellipsis); the whole name is the hover value */
}
.account-admin-page.admin-shell .cs-world-card .cs-people-row > button.cs-dashed {
  align-self: stretch;
  justify-content: center;
  text-align: center;
}
.account-admin-page.admin-shell .cs-world-card .cs-people-row .cs-dot {
  flex: none;
  margin-right: 6px;
}

/* ---- 系统状态: the failing cleanup says what to do with its table ---- */
.account-admin-page.admin-shell .sys-cleanup-note {
  margin: 4px 0 0;
  color: var(--ad-muted);
  font-size: 13px;
  line-height: 1.6;
}
.account-admin-page.admin-shell .system-section[data-section="cleanup"] {
  scroll-margin-top: 16px;
}
.account-admin-page.admin-shell a.ov-warn {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Part 15: player only. Desktop chrome/orbit and every admin selector stay unchanged. */
.page-shell .mobile-account {
  display: none;
}
@media (min-width: 601px) {
  .page-shell .carousel {
    height: min(840px, calc(100dvh - 220px));
  }
  .page-shell .card-slot {
    height: min(794px, calc(100dvh - 240px));
    min-height: 380px;
  }
  .page-shell .card-slot.is-chat {
    width: min(376px, calc(100vw - 108px));
    height: min(794px, calc(100dvh - 22px));
  }
}
@media (max-width: 600px) {
  /* Track the visible viewport (including Safari's keyboard pan), not the layout viewport. */
  .page-shell,
  .page-shell[data-phase] {
    position: fixed;
    width: var(--chat-width, 100vw);
    height: var(--chat-height, 100dvh);
    min-height: 0;
    left: calc(var(--chat-left, 50vw) - var(--chat-width, 100vw) / 2);
    top: calc(var(--chat-top, 50dvh) - var(--chat-height, 100dvh) / 2);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--page-bg);
  }
  .page-shell[data-phase] .site-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 44px auto;
    column-gap: 4px;
    row-gap: 0;
    flex-wrap: nowrap;
    height: auto;
    min-height: 68px;
    padding: 0 16px 6px;
    visibility: visible;
    align-items: center;
  }
  .page-shell .brand {
    grid-column: 1;
    grid-row: 1 / 3;
    gap: 6px;
    font-size: 15px;
    white-space: nowrap;
  }
  .page-shell .brand-mark {
    width: 24px;
    height: 24px;
    flex: none;
  }
  .page-shell .head-actions {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    gap: 0;
    min-width: 0;
  }
  .page-shell .desktop-account {
    display: none;
  }
  .page-shell .mobile-account {
    display: block;
  }
  .page-shell .head-account,
  .page-shell .site-head > .invite-entry {
    min-height: 44px;
    min-width: 44px;
    padding: 4px 8px;
    font-size: 13px;
    white-space: nowrap;
  }
  .page-shell .head-account {
    max-width: 96px;
  }
  .page-shell .site-head > .invite-entry {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }
  .page-shell .site-head .head-note {
    display: block;
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 18px;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .page-shell .site-head .head-hint {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 4px -16px 0;
    padding: 4px 16px;
    text-align: center;
    line-height: 18px;
    background: rgba(255, 255, 255, 0.22);
  }
  .page-shell .main-area {
    min-height: 0;
    flex: 1;
  }
  .page-shell .carousel {
    flex: 1;
    min-height: 0;
    height: auto;
  }
  .page-shell[data-phase] .card-slot,
  .page-shell[data-phase] .card-slot.is-chat {
    position: absolute;
    width: calc(100% - 32px);
    height: 100%;
    min-height: 0;
    left: 50%;
    top: 50%;
  }
  .page-shell[data-phase] .card-slot.is-chat .card-shell {
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(44, 51, 47, 0.16);
  }
  .page-shell .chat-head {
    height: 44px;
    gap: 8px;
    padding: 0 8px;
  }
  .page-shell .chat-head strong {
    font-size: 15px;
    line-height: 20px;
  }
  .page-shell .chat-head .back-button {
    margin-left: 0;
  }
  .page-shell .chat-body {
    min-height: 0;
    overflow-y: auto;
    padding: 16px 12px;
  }
  .page-shell .card-slot.is-chat .chat-body {
    padding-top: 12px;
  }
  .page-shell .friend-notice {
    white-space: normal;
    overflow-wrap: anywhere;
    margin-bottom: 16px;
  }
  .page-shell[data-phase] .composer {
    min-height: 60px;
    padding: 8px;
  }
  .page-shell .play-button,
  .page-shell .transcript-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  .page-shell[data-phase] .avatar-nav {
    display: block;
    position: relative;
    width: 100%;
    height: 68px;
    flex: none;
    margin-top: 8px;
    padding: 0;
    left: auto;
    bottom: auto;
    transform: none;
    background: transparent;
    box-shadow: none;
  }
  .page-shell[data-phase="chat"] .avatar-nav,
  .page-shell[data-phase="expanding"] .avatar-nav,
  .page-shell[data-phase="collapsing"] .avatar-nav {
    display: none;
  }
  .page-shell[data-phase] .avatar-choice {
    width: 48px;
    height: 48px;
    min-width: 48px;
    transform: translate(-50%, 0) translateX(var(--avatar-x)) translateY(calc(var(--avatar-y) * 0.3));
  }
  .page-shell[data-phase] .avatar-choice-mark {
    /* 54 px → 45.9 px: circles shrink 15%; hit targets remain 48 px. */
    width: 45.9px;
    height: 45.9px;
    border-radius: 50%;
    font-size: 18px;
  }
  .page-shell[data-phase="chat"] .preview-note,
  .page-shell[data-phase="expanding"] .preview-note {
    display: none;
  }
  .page-shell[data-phase="browse"] .preview-note,
  .page-shell[data-phase="hover"] .preview-note {
    display: block;
    visibility: visible;
    padding: 0 16px 4px;
    margin: 0;
    font-size: 10px;
    line-height: 14px;
  }
}

/* Part 17: consent line, erase sheets, grace hint, Turnstile box and the legal pages. */
.acct-legal {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #3b4a45;
}
.acct-legal a,
.legal-link,
.signed-out-legal a {
  color: #294b40;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.acct-expired,
.signed-out-expired,
.signed-out-erased {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ece8dd;
  font-size: 14px;
  line-height: 1.6;
}
.acct-warning {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4e4e1;
  color: #5c2420;
}
.acct-danger {
  background: #8a2f27;
}
.signed-out-legal {
  margin: 12px 0 0;
  font-size: 12px;
  text-align: center;
}
/* Part 17f: the check is centred on both axes (desktop and phone), not parked at the bottom. The wrapper covers the
   viewport only to centre its child and lets every tap through except on the widget itself. */
.human-check {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  pointer-events: none;
  z-index: 400;
}
.human-check > * {
  pointer-events: auto;
}
.legal-doc {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
  background: #f6f4ef;
  color: #24302f;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.85;
}
.legal-doc h1 {
  font-size: 24px;
  margin: 0 0 4px;
}
.legal-doc h2 {
  font-size: 17px;
  margin: 28px 0 6px;
}
.legal-doc p,
.legal-doc li {
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.legal-doc ul {
  padding-left: 20px;
}
.legal-doc .legal-meta {
  font-size: 13px;
  color: #5a6762;
}
.legal-doc .legal-todo {
  background: #fff1c2;
  border-radius: 4px;
  padding: 0 3px;
}
.legal-doc .legal-draft {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff1c2;
  font-size: 13px;
}
.legal-doc nav {
  margin-top: 32px;
  font-size: 13px;
}
.legal-doc nav a {
  color: #294b40;
}
body.legal-page {
  margin: 0;
  background: #f6f4ef;
}
.acct-bonus {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #e3efe6;
  font-size: 14px;
  line-height: 1.6;
}

/* Part 19: the one-time chat-review banner (CHAT_REVIEW_ENABLED) and the 18+ tick of the signup sheet. */
.review-banner {
  display: none;
  flex: none;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  background: #f2efe4;
  border-bottom: 1px solid #e1ddd0;
  color: #5a4c3f;
  font-size: 12px;
  line-height: 1.6;
}
.card-slot.is-chat .review-banner {
  display: flex;
}
.review-banner-text {
  flex: 1;
  margin: 0;
}
.review-banner-text a {
  color: #294b40;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.review-banner-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
}
.review-banner-close:hover {
  background: rgba(0, 0, 0, 0.06);
}
.acct-adult {
  margin: 2px 0;
}

/* Part 19: 测试对话 (the owner's anonymous transcript review). */
.review-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--ad-muted);
}
.review-state {
  align-self: center;
  font-size: 12px;
  color: var(--ad-muted);
}
.review-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.review-line {
  display: grid;
  grid-template-columns: 9.5em 6.5em 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ad-surface, #fff);
  border: 1px solid var(--ad-border);
  line-height: 1.6;
}
.review-line.is-player {
  background: var(--ad-bg);
}
.review-line.is-failed {
  border-color: #c98f86;
  color: #8a3b30;
}
.review-time,
.review-speaker {
  font-size: 12px;
  color: var(--ad-muted);
  white-space: nowrap;
}
.review-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.review-changed {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--ad-border);
  color: var(--ad-muted);
  white-space: nowrap;
}

/* Part 21b: model picker (reuses the account sheet frame), the points line, and the backup-model note. */
.mp-balance {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #294b40;
}
.mp-body {
  display: grid;
  gap: 10px;
}
.mp-card {
  display: grid;
  gap: 6px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid #b9c4bf;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
}
.mp-card.is-current {
  border-color: #294b40;
  box-shadow: inset 0 0 0 1px #294b40;
}
.mp-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}
.mp-tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: #294b40;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}
.mp-blurb {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
}
.mp-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mp-prices b {
  padding: 3px 10px;
  border-radius: 999px;
  background: #ece8dd;
  font-size: 13px;
  font-weight: 500;
}
.mp-confirm {
  padding: 4px 0;
  font-size: 16px;
}
.text-with-note {
  display: grid;
  min-width: 0;
}
.backup-note {
  display: block;
  margin: 4px 0 0 4px;
  font-size: 12px;
  opacity: 0.6;
}
@media (min-width: 601px) {
  .mp-sheet {
    align-items: stretch;
  }
  .mp-sheet .acct-head,
  .mp-sheet .acct-body,
  .mp-sheet .acct-status {
    width: min(480px, 100%);
  }
}

/* Part 21f: first-time guide bubble under the chat's ⋯ button, speed hint in the picker, today's co-creation entry. */
.chat-guide {
  position: absolute;
  right: 10px;
  top: calc(100% - 4px);
  z-index: 29;
  max-width: min(260px, calc(100% - 20px));
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: #294b40;
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 10px 28px rgba(32, 48, 42, 0.28);
  animation: chat-menu-in 200ms cubic-bezier(0.2, 0.82, 0.24, 1);
}
.chat-guide::before {
  content: "";
  position: absolute;
  right: 18px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}
.mp-speed {
  font-size: 13px;
  color: #5b6b65;
}
.cc-used {
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #ece8dd;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* Part 21f: 消费记录 — its rules live in one place now: the Part 25a block below. */

/* Part 21i: spent co-creation cards, password toggle, signup mismatch line */
.cc-card.is-used {
  opacity: 0.62;
  box-shadow: none;
}
.cc-card.is-used .cc-face {
  cursor: default;
}
.cc-card.is-used .cc-cta {
  background: #ece8dd;
  color: #5b6b65;
}
.acct-pw {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.acct-pw .acct-input {
  flex: 1;
  min-width: 0;
}
.acct-reveal {
  min-height: 48px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid #b9c4bf;
  border-radius: 12px;
  background: #fff;
  color: #294b40;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.acct-reveal:focus-visible {
  outline: 3px solid #24584e;
  outline-offset: 2px;
}
.acct-mismatch {
  margin: 0;
  font-size: 14px;
  color: #9b2c2c;
}
.acct-goto-signup {
  font-weight: 650;
}

/* 我的信息 (Part 22a): the page behind the top bar's nickname button. Plain rows - a label, a value, at most one button. It works
   at 390 px: one column, 48 px touch rows, long values wrap. */
.mi-body {
  display: grid;
  gap: 18px;
  align-content: start;
  padding-top: 8px;
}
.mi-section {
  display: grid;
  gap: 2px;
}
.mi-heading {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #5c6a64;
}
.mi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(36, 48, 47, 0.1);
}
.mi-key {
  flex: none;
  min-width: 4.5em;
  color: #5c6a64;
  font-size: 14px;
}
.mi-key:empty {
  display: none;
}
.mi-val {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
}
.mi-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}
.mi-quota {
  font-weight: 650;
  color: #294b40;
}
.mi-small {
  flex: none;
  min-height: 36px;
  min-width: 56px;
  padding: 4px 12px;
  border: 1px solid rgba(41, 75, 64, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #294b40;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.mi-small.acct-primary {
  background: #294b40;
  color: #fff;
}
.mi-input {
  flex: 1;
  min-width: 0;
}
.mi-link {
  position: relative;
  padding: 0;
}
.mi-action {
  flex: 1;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.mi-chev {
  color: #8a958f;
  font-size: 20px;
}
.mi-buttons {
  display: flex;
  gap: 10px;
}
.mi-buttons .acct-primary {
  flex: 1;
}
.mi-buttons .mi-login {
  flex: 1;
  border: 1px solid rgba(41, 75, 64, 0.35);
  border-radius: 12px;
  text-decoration: none;
}
.mi-signup-first {
  margin: 12px 0 0;
  font-size: 16px;
  color: #24302f;
}
.mi-foot {
  display: grid;
  margin-top: 6px;
}
.mi-logout {
  min-height: 48px;
  border: 1px solid rgba(41, 75, 64, 0.35);
  border-radius: 12px;
  text-decoration: none;
}
/* 删除我的账号 / 清除本设备的体验数据: kept apart from the everyday buttons above. */
.mi-danger {
  display: grid;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(138, 47, 39, 0.25);
}
.mi-danger .acct-danger {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.invite-signup {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.invite-signup[hidden] {
  display: none;
}
.invite-signup-text {
  font-size: 16px;
}
.invite-signup-button {
  min-height: 44px;
  padding: 6px 18px;
  border: 0;
  border-radius: 12px;
  background: #294b40;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* Part 26a: the one-character rule's line above the composer: light, centered, small, fades in; the only control is the word 注册. */
.guest-note {
  flex: none;
  margin: 0;
  padding: 6px 16px 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bb-sub, #6a7772);
  background: transparent;
  animation: guest-note-in 360ms ease backwards;
}
.guest-note[hidden],
.card-slot:not(.is-chat) .guest-note {
  display: none;
}
.guest-note-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .guest-note {
    animation: none;
  }
}
@keyframes guest-note-in {
  from {
    opacity: 0;
  }
}

/* Part 25a: the Burbur skin of the player site (design/burbur-v2). Player selectors only. Everything here repaints what exists:
   the 小卡 cards and the aura page, the chat bubbles, 我的信息, the model sheet, login, 消费记录, 共创 and the motion between
   them. One curve everywhere (cubic-bezier(.2,.82,.24,1)); every animation below is switched off by prefers-reduced-motion. */
:root {
  --bb-ink: #141414;
  --bb-sub: #4a4a4a;
  --bb-paper: #faf8f6;
  --bb-line: rgba(20, 20, 20, 0.1);
  --bb-ease: cubic-bezier(0.2, 0.82, 0.24, 1);
  --bb-mono: ui-monospace, Menlo, "DM Mono", monospace;
}
.hand {
  display: block;
  width: auto;
  flex: none;
}
@keyframes bb-fade {
  from {
    opacity: 0;
  }
}
@keyframes bb-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes bb-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  70% {
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes bb-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes bb-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes bb-sheen {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}
@keyframes bb-fill {
  from {
    width: 0;
  }
}
@keyframes bb-brain {
  0% {
    transform: scale(0.4) rotate(-20deg);
  }
  60% {
    transform: scale(1.15) rotate(8deg);
  }
  80% {
    transform: scale(0.95) rotate(-4deg);
  }
  100% {
    transform: none;
  }
}
@keyframes bb-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}

/* ---- home: the aura page, the wordmark, the 小卡 ---- */
.page-shell {
  isolation: isolate;
  color: var(--bb-ink);
}
.aura-stack {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.aura {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 480ms var(--bb-ease);
  background:
    radial-gradient(60% 40% at 12% 20%, var(--aura-1) 0%, transparent 70%),
    radial-gradient(55% 38% at 92% 48%, var(--aura-2) 0%, transparent 70%),
    radial-gradient(75% 45% at 40% 98%, var(--aura-3) 0%, transparent 70%);
}
.page-shell:has(.carousel.is-dragging) .aura {
  transition: none;
}
.page-shell .brand {
  color: var(--bb-ink);
}
.page-shell .brand-hand {
  height: 34px;
}
.page-shell .site-head .head-note {
  font-family: var(--bb-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bb-sub);
}
.page-shell .head-account {
  color: var(--bb-ink);
  font-weight: 700;
}
.page-shell .preview-note {
  color: var(--bb-sub);
}
.page-shell .card-slot:not(.is-chat) {
  padding: 7px;
  border-radius: 30px;
  border: 1px solid #fff;
  background: #fbf9f8;
  box-shadow: 0 24px 60px rgba(40, 24, 60, 0.18);
}
.page-shell .card-slot:not(.is-chat) .card-shell {
  border-radius: 23px;
  box-shadow: none;
  background: var(--bb-paper);
}
.page-shell .card-slot.is-chat .card-shell {
  background:
    radial-gradient(70% 35% at 10% 15%, var(--aura-1) 0%, transparent 70%),
    radial-gradient(60% 35% at 95% 55%, var(--aura-2) 0%, transparent 70%),
    radial-gradient(80% 40% at 30% 100%, var(--aura-3) 0%, transparent 70%), var(--bb-paper);
}
.card-shell {
  position: relative;
}
.card-slot:not(.is-chat) :is(.chat-head, .chat-body, .composer) {
  visibility: hidden;
}
.card-face {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(165deg, var(--aura-3) 0%, var(--aura-1) 45%, #fff 100%);
  color: var(--bb-ink);
  transition:
    opacity 180ms ease,
    visibility 0s;
}
.card-slot.is-chat .card-face {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 0s 180ms;
}
.face-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--bb-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #3f3f3f;
}
.face-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.face-name {
  font-size: calc(var(--name-size, 0.3) * 100cqw);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.95;
  white-space: nowrap;
}
.face-latin {
  height: 44px;
  align-self: flex-start;
  color: var(--bb-ink);
}
.face-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.04);
}
.face-play {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
}
.face-play svg {
  width: 16px;
  height: 16px;
}
.face-line {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.face-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 44%,
    rgba(255, 200, 244, 0.6) 50%,
    rgba(180, 236, 255, 0.6) 56%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 160% 0;
}
.card-slot.is-active:not(.is-chat) .face-sheen {
  animation: bb-sheen 900ms var(--bb-ease) 120ms both;
}
.face-reserve {
  background: repeating-linear-gradient(135deg, #f3eef8 0 12px, #fff 12px 24px);
}
.face-empty {
  align-items: center;
  gap: 10px;
}
.face-question {
  height: 120px;
  color: var(--bb-sub);
}
.face-empty-text {
  font-size: 14px;
  font-weight: 700;
}
.page-shell .avatar-choice-mark {
  background: linear-gradient(140deg, var(--aura-3, #dcd6e6), var(--aura-2, #f2eee9));
  color: var(--bb-ink);
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(40, 24, 60, 0.14);
}
.page-shell .avatar-choice.selected .avatar-choice-mark {
  outline: 2px solid var(--bb-ink);
  outline-offset: 3px;
}

/* ---- chat: paint only ---- */
.page-shell .chat-head {
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--bb-line);
}
.page-shell .chat-head strong {
  font-weight: 900;
  letter-spacing: -0.02em;
}
.page-shell .icon-button {
  color: var(--bb-ink);
  border-radius: 50%;
}
.page-shell .message-avatar {
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(140deg, var(--aura-3), var(--aura-2)) padding-box,
    conic-gradient(from 200deg, var(--accent), var(--aura-3), var(--aura-2), var(--accent)) border-box;
  color: var(--bb-ink);
  font-weight: 900;
}
.page-shell .text-bubble {
  background: var(--bb-ink);
  color: #fff;
  border-radius: 22px 6px 22px 22px;
  padding: 11px 16px;
  line-height: 1.45;
}
.page-shell .message-row.incoming .incoming-text {
  background: rgba(255, 255, 255, 0.9);
  color: var(--bb-ink);
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 6px 22px 22px 22px;
}
.page-shell .voice-bubble {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 6px 22px 22px 22px;
  padding: 5px 8px 5px 5px;
}
.page-shell .voice-bubble:before {
  display: none;
}
.page-shell .play-button {
  gap: 10px;
  padding: 0 4px 0 0;
  color: var(--bb-ink);
}
.page-shell .play-button > svg:first-child {
  fill: currentColor;
  stroke: none;
  width: 38px;
  height: 38px;
  padding: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}
.page-shell .play-button:hover,
.page-shell .play-button[data-playing="true"] {
  background: transparent;
}
.page-shell .sound-bars svg {
  color: var(--accent);
  opacity: 0.6;
}
.page-shell .transcript-toggle {
  color: var(--bb-sub);
}
.page-shell .transcript {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px 22px 22px 22px;
}
.page-shell[data-phase] .composer {
  margin: 0 12px max(12px, env(safe-area-inset-bottom));
  padding: 5px;
  min-height: 54px;
  gap: 6px;
  border: 0;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px #fff;
}
.page-shell .composer textarea {
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  padding: 11px 14px;
}
.page-shell .composer textarea:focus {
  border: 0;
  box-shadow: none;
}
.page-shell .send-button {
  border-radius: 50%;
  background: var(--bb-ink);
  color: #fff;
}
.page-shell .send-button svg {
  width: 20px;
  height: 20px;
}
.page-shell .friend-notice {
  align-self: center;
  width: fit-content;
  margin-inline: auto;
  padding: 6px 12px;
  border-radius: 4px;
  background: #fff;
  color: #3f3f3f;
  box-shadow: 0 4px 12px rgba(40, 24, 60, 0.12);
  transform: rotate(-1.5deg);
}
.page-shell .message-row {
  animation: bb-pop 300ms var(--bb-ease) backwards;
}
/* `backwards`, not `both`: a finished animation must not leave a stacking context behind, or the ⋯ menu (in the head) would
   fall under the chat body. */
.card-slot.is-chat :is(.chat-head, .chat-body, .composer) {
  animation: bb-fade 320ms ease 120ms backwards;
}

/* ---- sheets: one frame, one motion ---- */
.acct-sheet,
.mi-sheet {
  background:
    radial-gradient(60% 28% at 12% 10%, #ffd3b8 0%, transparent 70%),
    radial-gradient(55% 28% at 92% 22%, #c6e4ff 0%, transparent 70%),
    radial-gradient(70% 30% at 40% 100%, #dcd2ff 0%, transparent 70%), var(--bb-paper);
  animation: bb-rise 360ms var(--bb-ease) both;
}
.mi-sheet {
  background:
    radial-gradient(70% 30% at 10% 12%, #c6e4ff 0%, transparent 70%),
    radial-gradient(60% 30% at 95% 40%, #d5f6ee 0%, transparent 70%), var(--bb-paper);
}
.bl-sheet {
  overflow: hidden;
  background:
    radial-gradient(70% 30% at 10% 10%, #dcd2ff 0%, transparent 70%),
    radial-gradient(60% 30% at 95% 40%, #ffd8ee 0%, transparent 70%), var(--bb-paper);
}
.acct-title {
  font-weight: 900;
  letter-spacing: -0.01em;
}
.acct-close {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--bb-ink);
}
.acct-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(420px, 100%);
  margin: 4px auto 14px;
  color: var(--bb-ink);
}
.acct-hand {
  height: 48px;
}
.so-blank {
  height: 18px;
}
.acct-form {
  grid-template-columns: minmax(0, 1fr);
  padding: 18px 16px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  gap: 12px;
}
.acct-field,
.acct-input {
  min-width: 0;
}
.acct-label {
  font-size: 13px;
  font-weight: 700;
}
.acct-input {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #e4ded7;
  border-radius: 999px;
}
.acct-pw {
  align-items: center;
  gap: 0;
  height: 48px;
  padding-right: 4px;
  border: 1px solid #e4ded7;
  border-radius: 999px;
  background: #fff;
}
.acct-pw .acct-input {
  height: 46px;
  min-height: 0;
  border: 0;
  background: transparent;
  outline: 0;
}
.acct-pw:focus-within {
  outline: 3px solid #24584e;
  outline-offset: 2px;
}
.acct-field.has-error .acct-pw {
  border-color: #c2410c;
}
.acct-reveal {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")
    center / 18px no-repeat;
  font-size: 0;
}
.acct-reveal[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}
.acct-primary {
  min-height: 50px;
  border-radius: 999px;
  background: var(--bb-ink);
  font-size: 16px;
  font-weight: 700;
}
.acct-link {
  color: var(--bb-ink);
  font-size: 13px;
  text-decoration: none;
}
.acct-links {
  justify-content: center;
}
.acct-login .acct-status:not(:empty) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 18px;
  background: #ffe4dc;
  color: #8a2a0a;
  font-size: 14px;
  font-weight: 700;
}
.acct-legal,
.acct-intro {
  font-size: 13px;
}

/* the signed-out first page: wordmark, an empty line, the tabs */
html:has(.signed-out-page) {
  min-height: 100dvh;
  background:
    radial-gradient(60% 28% at 12% 10%, #ffd3b8 0%, transparent 70%),
    radial-gradient(55% 28% at 92% 22%, #c6e4ff 0%, transparent 70%),
    radial-gradient(70% 30% at 40% 100%, #dcd2ff 0%, transparent 70%), var(--bb-paper);
}
.signed-out-legal a {
  color: var(--bb-sub);
}
.signed-out-page {
  margin-top: 12vh;
  color: var(--bb-ink);
}
.so-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.so-hand {
  height: 64px;
}
.signed-out-page .signed-out-actions {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.signed-out-page .signed-out-actions::before {
  content: "";
  grid-area: 1 / 1 / 2 / 3;
  height: 50px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px #fff;
}
.signed-out-page .signed-out-actions > button {
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: background 200ms ease;
}
.signed-out-page .signed-out-actions > button:nth-child(1) {
  grid-area: 1 / 1;
  margin: 5px 2px 5px 5px;
  background: var(--bb-ink);
  color: #fff;
}
.signed-out-page .signed-out-actions > button:nth-child(2) {
  grid-area: 1 / 2;
  margin: 5px 5px 5px 2px;
  background: transparent;
  color: var(--bb-ink);
}
.signed-out-page .signed-out-actions > button:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 16px;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--bb-ink);
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
}
.signed-out-page .signed-out-notice {
  padding: 0;
}
.signed-out-page .signed-out-notice:not(:empty),
.signed-out-erased,
.signed-out-expired {
  padding: 10px 14px;
  border-radius: 18px;
  background: #ffe4dc;
  color: #8a2a0a;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* ---- 我的信息 ---- */
.mi-sheet .acct-head,
.bl-sheet .acct-head {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  margin-bottom: 4px;
}
.mi-sheet .acct-title,
.bl-sheet .acct-title {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  font-size: 17px;
}
.mi-sheet .acct-close,
.bl-sheet .acct-close {
  grid-column: 1;
  grid-row: 1;
  font-size: 0;
  background:
    transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")
    center / 22px no-repeat;
}
.mi-body {
  gap: 14px;
  font-variant-numeric: tabular-nums;
}
.mi-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.mi-section {
  padding: 4px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85);
  animation: bb-rise 420ms var(--bb-ease) both;
}
.mi-section:nth-child(1) {
  animation-delay: 60ms;
}
.mi-section:nth-child(2) {
  animation-delay: 0ms;
}
.mi-section:nth-child(3) {
  animation-delay: 120ms;
}
.mi-quota-card {
  order: -1;
  display: grid;
  gap: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
}
.mi-row {
  min-height: 52px;
  border-bottom: 1px solid #f0ece7;
}
.mi-row:last-child {
  border-bottom: 0;
}
.mi-key {
  min-width: 72px;
  font-size: 13px;
  color: #3f3f3f;
}
.mi-val {
  font-size: 15px;
  font-weight: 700;
}
.mi-number {
  font-family: var(--bb-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.mi-small {
  min-height: 32px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #e4ded7;
  background: #fff;
  color: var(--bb-ink);
  font-size: 13px;
  transition:
    background 200ms ease,
    color 200ms ease;
}
.mi-small.acct-primary {
  background: var(--bb-ink);
  color: #fff;
  min-height: 32px;
  font-size: 13px;
  font-weight: 400;
}
.mi-link {
  border-bottom: 1px solid #f0ece7;
}
.mi-link:last-child {
  border-bottom: 0;
}
.mi-action {
  min-height: 50px;
  font-size: 15px;
}
.mi-q-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mi-pill {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bb-ink);
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}
.mi-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f0ec;
  display: flex;
  align-items: center;
  font-family: var(--bb-mono);
  font-size: 13px;
  font-weight: 500;
}
.mi-chip i {
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}
.mi-q-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mi-big {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.mi-unit {
  font-size: 16px;
  font-weight: 700;
}
.mi-daily {
  font-size: 14px;
  color: #3f3f3f;
}
.mi-meter {
  height: 10px;
  border-radius: 999px;
  background: #efebe6;
  overflow: hidden;
}
.mi-fill {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #97c8f5, #2f7bea);
  animation: bb-fill 900ms var(--bb-ease) 200ms both;
}
.mi-q-buttons {
  display: flex;
  gap: 8px;
}
.mi-pillbtn {
  flex: 1 1 0;
  height: 44px;
  border: 1px solid #e4ded7;
  border-radius: 999px;
  background: #fff;
  color: var(--bb-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: transform 160ms var(--bb-ease);
}
.mi-pillbtn:active {
  transform: scale(0.97);
}
.mi-pillbtn.is-main {
  border-color: transparent;
  background: var(--bb-ink);
  color: #fff;
}
.mi-quota-card.is-guest .mi-q-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mi-quota-card.is-guest .mi-pillbtn {
  order: 3;
  height: 36px;
  font-size: 13px;
  font-weight: 500;
}
.mi-quota-card.is-guest .mi-pillbtn:nth-last-child(-n + 2) {
  height: 44px;
  font-size: 14px;
  font-weight: 700;
}
.mi-quota-card.is-guest .mi-pillbtn:nth-last-child(2) {
  order: 2;
}
.mi-quota-card.is-guest .mi-pillbtn:nth-last-child(1) {
  order: 1;
}
.mi-signup-first {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--bb-sub);
}
.mi-foot {
  margin-top: 0;
}
.mi-logout {
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--bb-ink);
  font-size: 15px;
  text-align: left;
}
.mi-danger {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  justify-items: center;
}
.mi-danger .acct-danger {
  min-height: 44px;
  background: transparent;
  color: var(--bb-sub);
  font-size: 13px;
  text-decoration: underline;
}

/* the invite dialog pops in over a dim that fades in */
.invite-dialog {
  border-radius: 28px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 60px rgba(12, 11, 16, 0.3);
}
.invite-dialog[open] {
  animation: bb-pop 320ms var(--bb-ease) both;
}
.invite-dialog::backdrop {
  background: rgba(12, 11, 16, 0.42);
  animation: bb-fade 240ms ease both;
}
.invite-dialog form {
  gap: 14px;
}
.invite-dialog label {
  font-size: 18px;
  font-weight: 900;
}
.invite-dialog input {
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--bb-ink);
  border-radius: 999px;
  font-family: var(--bb-mono);
}
.invite-actions {
  flex-wrap: nowrap;
  gap: 8px;
}
.invite-actions button {
  flex: 1 1 0;
  height: 46px;
  border: 1px solid #e4ded7;
  font-size: 15px;
}
.invite-actions button[type="submit"] {
  background: var(--bb-ink);
  border-color: transparent;
  font-weight: 700;
}
.invite-signup-button {
  border-radius: 999px;
  background: var(--bb-ink);
}

/* ---- the model sheet: a panel that slides up over a dim that fades in ---- */
.mp-sheet {
  padding: 0;
  justify-content: flex-end;
  overflow: hidden;
  background: rgba(12, 11, 16, 0.38);
  animation: bb-fade 300ms ease both;
}
.mp-panel {
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  margin: 0 auto;
  padding: 10px 16px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(70% 35% at 10% 15%, var(--aura-1, #ffd3b8) 0%, transparent 70%),
    radial-gradient(80% 40% at 30% 100%, var(--aura-3, #ffb295) 0%, transparent 70%), var(--bb-paper);
  animation: bb-up 420ms var(--bb-ease) both;
}
.mp-grip {
  align-self: center;
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: #d8d1c8;
}
.mp-sheet .acct-head,
.mp-sheet .acct-body,
.mp-sheet .acct-status {
  width: 100%;
}
.mp-sheet .acct-head {
  margin: 0;
}
.mp-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
}
.mp-brain {
  display: inline-block;
  width: 34px;
  height: 34px;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16,6.8 A2.6,2.6 0 0,0 12.6,5.2 A2.6,2.6 0 0,0 9.4,6 A2.6,2.6 0 0,0 6.6,8.4 A2.6,2.6 0 0,0 5.4,11.8 A2.6,2.6 0 0,0 3.6,14.6 A2.6,2.6 0 0,0 4,18.4 A2.6,2.6 0 0,0 5.6,21.6 A2.6,2.6 0 0,0 8.4,24.4 A2.6,2.6 0 0,0 12,25.6 A2.6,2.6 0 0,0 16,26.4 Z' fill='%23FBB3D1'/><path d='M16,6.8 A2.6,2.6 0 0,1 19.4,5.2 A2.6,2.6 0 0,1 22.6,6 A2.6,2.6 0 0,1 25.4,8.4 A2.6,2.6 0 0,1 26.6,11.8 A2.6,2.6 0 0,1 28.4,14.6 A2.6,2.6 0 0,1 28,18.4 A2.6,2.6 0 0,1 26.4,21.6 A2.6,2.6 0 0,1 23.6,24.4 A2.6,2.6 0 0,1 20,25.6 A2.6,2.6 0 0,1 16,26.4 Z' fill='%23F79CC3'/><path d='M9.6,12.4 c1.6,-0.6 3.2,0.4 3.4,2 M6.8,17.6 c1.8,-0.8 3.8,0 4.4,1.8 M10.4,22.4 c0.6,-1.4 2.2,-2 3.6,-1.4 M22.4,12.4 c-1.6,-0.6 -3.2,0.4 -3.4,2 M25.2,17.6 c-1.8,-0.8 -3.8,0 -4.4,1.8 M21.6,22.4 c-0.6,-1.4 -2.2,-2 -3.6,-1.4' fill='none' stroke='%23D95A93' stroke-width='1.5' stroke-linecap='round'/><path d='M16 6.8V26.4' fill='none' stroke='%23D95A93' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='9.6' cy='9.4' rx='2' ry='1.2' fill='%23FFFFFF' opacity='.85' transform='rotate(-30 9.6 9.4)'/></svg>")
    center / contain no-repeat;
  transform-origin: 50% 70%;
  animation: bb-brain 700ms var(--bb-ease) 300ms both;
}
.mp-brain:hover {
  animation: bb-wiggle 500ms ease-in-out;
}
.mp-balance {
  display: flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  height: 28px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--bb-ink);
  font-family: var(--bb-mono);
  font-size: 12px;
  font-weight: 400;
}
.mp-balance[hidden] {
  display: none;
}
.mp-body {
  gap: 8px;
}
.mp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 14px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #eee8e1;
  transition:
    transform 220ms var(--bb-ease),
    box-shadow 220ms ease;
}
.mp-card.is-current {
  border: 0;
  box-shadow: inset 0 0 0 2px var(--bb-ink);
}
.mp-card.is-picked {
  border: 0;
  box-shadow:
    inset 0 0 0 2px var(--accent, #e8561e),
    0 10px 24px rgba(40, 24, 60, 0.12);
  transform: translateY(-2px) scale(1.01);
}
.mp-chip {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #c6e4ff, #d5f6ee);
  font-family: var(--bb-mono);
  font-size: 12px;
  font-weight: 500;
}
.mp-card[data-model="gemini"] .mp-chip {
  background: linear-gradient(140deg, #ffd3b8, #ffebc9);
}
.mp-card[data-model="xai"] .mp-chip {
  background: linear-gradient(140deg, #dcd2ff, #ffd8ee);
}
.mp-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mp-name {
  font-size: 16px;
  font-weight: 900;
}
.mp-tag {
  height: 20px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  background: var(--bb-ink);
  font-size: 11px;
  font-weight: 700;
}
.mp-speed {
  font-family: var(--bb-mono);
  font-size: 11px;
  color: var(--bb-sub);
}
.mp-prices {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex-wrap: nowrap;
  font-family: var(--bb-mono);
  font-size: 12px;
}
.mp-prices b {
  padding: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
}
.mp-prices b:first-child {
  font-size: 14px;
  font-weight: 500;
}
.mp-confirm-box:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  animation: bb-in 280ms var(--bb-ease) both;
}
.mp-confirm {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.55;
}
.mp-confirm-box .acct-links {
  gap: 8px;
}
.mp-confirm-box .acct-links > button {
  flex: 1 1 0;
  height: 44px;
  min-height: 44px;
  border-radius: 999px;
  font-size: 15px;
}
.mp-back {
  border: 1px solid #e4ded7;
  background: #fff;
  text-decoration: none;
}
.mp-sure {
  font-weight: 700;
}

/* ---- 消费记录: the one set of .bl-* rules ---- */
.bl-sheet .acct-head {
  flex: none;
}
/* The title row is not part of the scrolling body, so nothing (the black pill included) can ever slide over it. */
.bl-body {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  overflow-y: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.bl-summary {
  display: grid;
  gap: 12px;
}
.bl-balance {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  margin: 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bb-ink);
  color: var(--s-out-fg);
  font-family: var(--bb-mono);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}
.bl-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}
.bl-tables {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  animation: bb-rise 420ms var(--bb-ease) both;
}
/* Both tables share one fixed grid: the name takes the rest, 条数 and 点数 have fixed widths, numbers are right-aligned. */
.bl-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.bl-table th,
.bl-table td {
  padding: 5px 4px;
  border-bottom: 1px solid #f0ece7;
  text-align: right;
  white-space: nowrap;
}
.bl-table th:first-child,
.bl-table td:first-child {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bl-table th:nth-child(2),
.bl-table td:nth-child(2) {
  width: 52px;
}
.bl-table th:nth-child(3),
.bl-table td:nth-child(3) {
  width: 64px;
}
.bl-table th {
  font-weight: 500;
  color: var(--bb-sub);
}
.bl-list {
  list-style: none;
  margin: 0;
  padding: 4px 16px;
  display: grid;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
}
@media (max-width: 360px) {
  .bl-sheet {
    padding-inline: 12px;
  }
  .bl-list {
    padding-inline: 12px;
  }
  .bl-title {
    font-size: 13px;
  }
}
/* A history row is a fixed three-column grid: icon | text (left, fills, wraps) | points (right, fixed, never wraps). */
.bl-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid #f0ece7;
  animation: bb-rise 420ms var(--bb-ease) both;
}
.bl-row::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, #e9e2f2, #fff);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.06);
}
.bl-row.is-bonus::before,
.bl-row.is-grant::before,
.bl-row.is-cocreation_note::before,
.bl-row.is-cocreation_adopted::before,
.bl-row.is-daily_refill::before,
.bl-row.is-reset::before {
  content: "+";
  display: grid;
  place-items: center;
  background: #e3f3e8;
  color: #1e5e36;
  font-size: 14px;
  font-weight: 900;
}
.bl-row:nth-child(2) {
  animation-delay: 40ms;
}
.bl-row:nth-child(3) {
  animation-delay: 80ms;
}
.bl-row:nth-child(4) {
  animation-delay: 120ms;
}
.bl-row:nth-child(5) {
  animation-delay: 160ms;
}
.bl-row:nth-child(n + 6) {
  animation-delay: 200ms;
}
.bl-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.bl-title {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
}
.bl-sub {
  font-size: 12px;
  color: #3f3f3f;
  text-align: left;
  overflow-wrap: anywhere;
}
.bl-points {
  text-align: right;
  white-space: nowrap;
  /* "−12 点": the number and 点 stay together; the space is drawn thin (no padded mono). */
  word-spacing: -0.22em;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bl-row.is-bonus .bl-points,
.bl-row.is-grant .bl-points,
.bl-row.is-cocreation_note .bl-points,
.bl-row.is-cocreation_adopted .bl-points,
.bl-row.is-daily_refill .bl-points {
  color: #1e5e36;
}
.bl-empty,
.bl-window {
  padding: 12px 2px;
  font-size: 13px;
  color: var(--bb-sub);
  text-align: center;
}
.bl-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bl-pager button:disabled {
  opacity: 0.4;
}
.bl-page {
  font-family: var(--bb-mono);
  font-size: 13px;
}
@media (min-width: 601px) {
  .bl-sheet {
    align-items: stretch;
  }
  .bl-sheet .acct-head,
  .bl-sheet .acct-body {
    width: min(520px, 100%);
  }
  .bl-tables {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- 共创: the deck of tilted photocards ---- */
.cc-sheet {
  background:
    radial-gradient(70% 30% at 10% 10%, var(--aura-1, #c6e4ff) 0%, transparent 70%),
    radial-gradient(60% 30% at 95% 45%, var(--aura-2, #d5f6ee) 0%, transparent 70%),
    radial-gradient(80% 35% at 30% 100%, var(--aura-3, #97c8f5) 0%, transparent 70%), var(--bb-paper);
  color: var(--bb-ink);
  animation: bb-up 420ms var(--bb-ease) both;
}
.cc-sheet .cc-head {
  grid-template-columns: 1fr auto 44px;
  gap: 8px;
}
.cc-sheet .cc-heading {
  grid-column: 1;
  grid-row: 1;
  justify-items: start;
}
.cc-sheet .cc-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.cc-sheet .cc-progress {
  font-family: var(--bb-mono);
  font-size: 12px;
  opacity: 1;
}
.cc-sheet .cc-shuffle {
  grid-column: 2;
  grid-row: 1;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    rgba(255, 255, 255, 0.8)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")
    center / 18px no-repeat;
  font-size: 0;
}
.cc-sheet .cc-close {
  grid-column: 3;
  grid-row: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--bb-ink);
}
.cc-sheet .cc-card {
  border: 1px solid #fff;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 16px 40px rgba(40, 24, 60, 0.14);
}
.cc-sheet .cc-card .cc-face {
  border-radius: 19px;
  background: linear-gradient(160deg, var(--aura-1, #c6e4ff), #fff);
}
.cc-sheet .cc-card:nth-child(4n + 2) .cc-face {
  background: linear-gradient(160deg, #dcd2ff, #fff);
}
.cc-sheet .cc-card:nth-child(4n + 3) .cc-face {
  background: linear-gradient(160deg, #d5f6ee, #fff);
}
.cc-sheet .cc-card:nth-child(4n) .cc-face {
  background: linear-gradient(160deg, #ffebc9, #fff);
}
.cc-sheet .cc-card.is-written {
  box-shadow: 0 16px 40px rgba(40, 24, 60, 0.14);
}
.cc-sheet .cc-prompt {
  font-weight: 900;
  letter-spacing: 0;
}
.cc-sheet .cc-cta {
  position: absolute;
  right: 12px;
  bottom: 12px;
  align-self: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background:
    #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16Z'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  box-shadow: 0 2px 8px rgba(40, 24, 60, 0.12);
  font-size: 0;
  color: transparent;
  transition:
    background-color 200ms ease,
    transform 200ms ease;
}
.cc-sheet .cc-card.is-written .cc-cta {
  background-color: #1e5e36;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
.cc-sheet .cc-card.is-used .cc-cta {
  width: auto;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.08);
  box-shadow: none;
  font-size: 12px;
  color: var(--bb-ink);
}
.cc-sheet .cc-face {
  min-height: 150px;
}
.cc-sheet .cc-card.is-written .cc-badge,
.cc-sheet .cc-badge {
  display: none;
}
.cc-sheet .cc-area {
  border: 0;
  border-radius: 18px;
  background: #fff;
}
.cc-sheet .cc-skip {
  border: 0;
  background: transparent;
  color: var(--bb-sub);
  text-decoration: underline;
}
.cc-sheet .cc-done {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background:
    var(--bb-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  font-size: 0;
}
.cc-sheet .cc-bubble-out .cc-area {
  background: var(--bb-ink);
  color: #fff;
  border-radius: 22px 6px 22px 22px;
}
.cc-sheet .cc-bubble-in .cc-area {
  background: #fff;
  border-radius: 6px 22px 22px 22px;
}
.cc-sheet .cc-send {
  background: var(--bb-ink);
  box-shadow: none;
}
.cc-sheet .cc-editor {
  animation: bb-in 320ms var(--bb-ease) both;
}
.cc-sheet .cc-thanks-title {
  color: var(--bb-ink);
  font-weight: 900;
}

/* ---- a swipe must never select text: the deck, the cards and the avatar row are not selectable; the chat itself and inputs are ---- */
.carousel,
.card-deck,
.card-slot,
.avatar-nav {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.card-slot .chat-body,
.card-slot .chat-body *,
.card-slot textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- home: a hand of solid cards, with some life ---- */
@keyframes bb-breathe {
  50% {
    translate: 0 -5px;
  }
}
@keyframes bb-drift {
  50% {
    translate: 0 -3px;
  }
}
/* Solid, fanned, and springy. The orbit's own numbers (offset, height, scale) stay; the fade is replaced by hiding the far slots. */
.page-shell .card-slot {
  opacity: 1;
  transform: translate(-50%, -50%) translateX(calc(var(--orbit-x) + var(--drag-x))) translateY(var(--orbit-y))
    rotate(calc(var(--fan, 0) * 1deg)) scale(var(--orbit-scale));
}
.page-shell .carousel:not(.is-dragging) .card-slot:not(.orbit-wrap) {
  transition:
    transform 560ms cubic-bezier(0.34, 1.35, 0.5, 1),
    opacity 220ms ease,
    translate 220ms var(--bb-ease);
}
.page-shell .card-slot.is-hidden-slot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 0s 220ms;
}
.page-shell .card-slot.is-active:not(.is-chat) {
  animation: bb-breathe 5s ease-in-out infinite;
}
@media (hover: hover) and (min-width: 601px) {
  .page-shell .card-slot:not(.is-active):not(.is-hidden-slot):hover {
    translate: 0 -12px;
  }
}
/* Behind the front card only the colour, the small name and the number show, on the edge that sticks out. */
.card-slot:not(.is-active) .face-name {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.card-slot:not(.is-active) :is(.face-latin, .face-voice, .face-sheen, .face-top span:first-child) {
  display: none;
}
.card-slot[data-side="r"]:not(.is-active) .face-top {
  justify-content: flex-end;
}
.card-slot[data-side="r"]:not(.is-active) .face-main {
  align-items: flex-end;
}
.card-slot:not(.is-active) .face-main {
  justify-content: flex-start;
  padding-top: 8px;
}
.card-slot:not(.is-active) .face-empty {
  justify-content: center;
  padding-top: 0;
}
.card-slot.is-active .face-name {
  animation: bb-pop 420ms var(--bb-ease) both;
}
.face-reserve .face-question {
  opacity: 0.35;
}
.face-reserve .face-empty-text {
  display: none;
}
.card-slot.is-near-empty .face-empty-text,
.card-slot.is-active .face-reserve .face-empty-text {
  display: block;
}
.face-reserve .face-top {
  visibility: hidden;
}
.card-slot.is-active .face-reserve .face-top {
  visibility: visible;
}
.page-shell .avatar-choice-mark {
  animation: bb-drift 6s ease-in-out infinite;
}
.page-shell .avatar-choice:nth-child(2n) .avatar-choice-mark {
  animation-delay: -2s;
}
.page-shell .avatar-choice:nth-child(3n) .avatar-choice-mark {
  animation-delay: -4s;
}
@media (max-width: 600px) {
  .page-shell .site-head .head-note {
    text-align: right;
    justify-self: end;
    padding: 0;
  }
  .page-shell .head-actions {
    grid-column: 2 / 4;
    justify-self: end;
    justify-content: flex-end;
    margin: 0;
  }
  .page-shell .head-account {
    min-width: 0;
    padding-right: 0;
    text-align: right;
  }
}

/* ======================================================================================================================
   Part 25b: player UI round 2 (design/burbur-v2 Main, Chat, MyInfo, Shared, Motion). Player selectors only; every rule here sits
   after Part 25a and repaints it: theme tokens and night mode, the phone's stack of cards, the welcome pill, the chat's header,
   avatars, background and guest line, 我的信息 in soft colours, the slide-up of the account sheets, the shared card page.
   Night mode hangs on one attribute, html[data-theme="dark"], set by the page from the system setting or the player's pick.
   ====================================================================================================================== */
:root {
  --s-card: rgba(255, 255, 255, 0.9);
  --s-card-line: #fff;
  --s-soft: rgba(255, 255, 255, 0.85);
  --s-solid: #fff;
  --s-line: #e4ded7;
  --s-hair: #f0ece7;
  --s-pill: rgba(255, 255, 255, 0.72);
  --s-head: rgba(255, 255, 255, 0.72);
  --s-head-line: rgba(20, 20, 20, 0.1);
  --s-out: #141414;
  --s-out-fg: #fff;
  --s-input: #fff;
  --s-dim: rgba(12, 11, 16, 0.42);
}
:root[data-theme="dark"],
.card-slot.is-chat[data-tone="dark"] {
  --bb-ink: #f5f3f7;
  --bb-sub: #b8b3c4;
  --bb-paper: #0c0b10;
  --bb-line: rgba(255, 255, 255, 0.1);
  --s-card: rgba(255, 255, 255, 0.08);
  --s-card-line: rgba(255, 255, 255, 0.12);
  --s-soft: rgba(255, 255, 255, 0.07);
  --s-solid: #1c1824;
  --s-line: rgba(255, 255, 255, 0.16);
  --s-hair: rgba(255, 255, 255, 0.08);
  --s-pill: rgba(255, 255, 255, 0.1);
  --s-head: rgba(12, 11, 16, 0.6);
  --s-head-line: rgba(255, 255, 255, 0.1);
  --s-out: #f5f3f7;
  --s-out-fg: #0c0b10;
  --s-input: rgba(255, 255, 255, 0.08);
  --s-dim: rgba(0, 0, 0, 0.6);
}
/* A custom chat colour that is light (or dark) keeps its bubbles readable whichever theme the page is in. */
:root[data-theme] .card-slot.is-chat[data-tone="light"] {
  --bb-ink: #141414;
  --bb-sub: #4a4a4a;
  --bb-paper: #faf8f6;
  --s-card: rgba(255, 255, 255, 0.9);
  --s-card-line: #fff;
  --s-solid: #fff;
  --s-head: rgba(255, 255, 255, 0.72);
  --s-head-line: rgba(20, 20, 20, 0.1);
  --s-out: #141414;
  --s-out-fg: #fff;
  --s-input: #fff;
}
.page-shell {
  --page-bg: var(--bb-paper);
}
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition:
    background-color 600ms ease,
    color 600ms ease,
    border-color 600ms ease,
    box-shadow 600ms ease,
    opacity 600ms ease !important;
}

/* ---- night: the aura of the page, the 小卡, the avatar row ---- */
.aura-set {
  position: absolute;
  inset: 0;
  transition: opacity 600ms ease;
}
.aura-night,
:root[data-theme="dark"] .aura-day {
  opacity: 0;
}
:root[data-theme="dark"] .aura-night {
  opacity: 1;
}
.aura-night .aura {
  background:
    radial-gradient(60% 40% at 12% 20%, color-mix(in srgb, var(--aura-1) 45%, transparent) 0%, transparent 70%),
    radial-gradient(55% 38% at 92% 48%, color-mix(in srgb, var(--aura-2) 30%, transparent) 0%, transparent 70%),
    radial-gradient(75% 45% at 40% 98%, color-mix(in srgb, var(--aura-3) 50%, transparent) 0%, transparent 70%);
}
:root[data-theme="dark"] .page-shell .card-slot:not(.is-chat) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .page-shell .card-slot:not(.is-chat) .card-shell {
  background: var(--bb-paper);
}
:root[data-theme="dark"] .card-face {
  background: linear-gradient(165deg, var(--n-aura-3) 0%, #1c1724 52%, #110f16 100%);
  color: var(--bb-ink);
}
:root[data-theme="dark"] .card-slot.is-active:not(.is-chat) {
  box-shadow:
    0 0 60px color-mix(in srgb, var(--n-aura-1) 33%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .face-top {
  color: #d9d5e2;
}
:root[data-theme="dark"] .face-latin {
  color: var(--n-accent);
}
:root[data-theme="dark"] .face-sheen {
  mix-blend-mode: screen;
}
:root[data-theme="dark"] .face-reserve {
  background: repeating-linear-gradient(135deg, #17141e 0 12px, #1e1a28 12px 24px);
}
:root[data-theme="dark"] .icon-button:not(.send-button):hover,
:root[data-theme="dark"] .icon-button:not(.send-button):focus-visible {
  background: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .page-shell .avatar-choice-mark {
  background: linear-gradient(140deg, var(--n-aura-3), var(--n-aura-2));
}
:root[data-theme="dark"] .page-shell .avatar-choice-mark .reserve-dot {
  color: rgba(255, 255, 255, 0.4);
}
:root[data-theme="dark"] .page-shell .avatar-choice.selected .avatar-choice-mark {
  outline-color: var(--bb-ink);
}
:root[data-theme="dark"] .page-shell .head-account,
:root[data-theme="dark"] .page-shell .brand {
  color: var(--bb-ink);
}
.avatar-choice {
  top: 22px;
}

/* ---- home on a phone: the same stack as the desktop - the front card, the neighbours peeking out on both sides ---- */
@media (max-width: 600px) {
  /* The card is as wide as the stack's own number (preview.ts sets --card-w): the same in every phase but the chat. */
  .page-shell[data-phase] .card-slot:not(.is-chat) {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--card-w, 294px);
    height: calc(100% - 22px);
    min-height: 0;
  }
  /* The old phone layout hid everything but the front card; the neighbours are part of the stack now. */
  .page-shell[data-phase="browse"] .card-slot:not(.is-active):not(.is-hidden-slot),
  .page-shell[data-phase="hover"] .card-slot:not(.is-active):not(.is-hidden-slot) {
    visibility: visible;
    pointer-events: auto;
  }
  .page-shell[data-phase] .avatar-choice {
    transform: translate(-50%, 0) translateX(var(--avatar-x)) translateY(var(--avatar-y));
  }
  /* Room for the chosen avatar's ring above the footer note, and for the far ones rising on the oval. */
  .page-shell[data-phase] .avatar-nav {
    height: 86px;
    margin-top: 0;
  }
  .page-shell[data-phase] .avatar-choice {
    top: 20px;
  }
}

/* ---- the welcome on the card: a play pill, voice only ---- */
.page-shell .face-voice {
  appearance: none;
  border: 0;
  width: 100%;
  font: inherit;
  color: var(--bb-ink);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 160ms var(--bb-ease);
}
.page-shell .face-voice:active {
  transform: scale(0.98);
}
.face-voice:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.face-wave {
  flex: 1;
  min-width: 0;
  height: 22px;
  color: rgba(20, 20, 20, 0.24);
  transition: color 240ms ease;
}
.face-voice[data-playing="true"] .face-wave {
  color: var(--accent);
}
.face-dur {
  font-family: var(--bb-mono);
  font-size: 11px;
  color: var(--bb-sub);
}
.face-voice[data-playing="true"] .face-play {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}
.face-play {
  transition: box-shadow 240ms ease;
}
:root[data-theme="dark"] .face-voice {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .face-play {
  background: var(--n-accent);
  color: #0c0b10;
}
:root[data-theme="dark"] .face-wave {
  color: rgba(255, 255, 255, 0.24);
}
:root[data-theme="dark"] .face-voice[data-playing="true"] .face-wave {
  color: var(--n-accent);
}
/* the head's one-line next step (体验已结束 …) and the footer note read on the dark page too */
:root[data-theme="dark"] .page-shell .site-head .head-hint,
:root[data-theme="dark"] .page-shell .site-head .head-note,
:root[data-theme="dark"] .page-shell .preview-note {
  color: var(--bb-sub);
}

/* ---- chat: the header is centred (back | avatar over name | ⋯), as on the Chat board ---- */
.page-shell .card-slot .chat-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  height: calc(76px + env(safe-area-inset-top));
  gap: 0;
  padding: env(safe-area-inset-top) 0 0;
  background: var(--s-head);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--s-head-line);
}
.page-shell .card-slot .chat-head .back-button {
  grid-column: 1;
  margin: 0 0 0 6px;
}
.page-shell .card-slot .chat-head .chat-more,
.page-shell .card-slot .chat-head .chat-head-gap {
  grid-column: 3;
  justify-self: end;
  margin: 0 6px 0 0;
}
.chat-title {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.page-shell .chat-head strong {
  position: static;
  transform: none;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.1;
  color: var(--bb-ink);
}
.page-shell .chat-head .icon-button {
  color: var(--bb-ink);
}

/* ---- avatars: a ring, a thin gap of page colour, then the fill. A character's comes from its colour; the player's from their pick ---- */
.page-shell .message-avatar,
.page-shell .chat-mark {
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(140deg, var(--frame-f1), var(--frame-f2)) padding-box,
    conic-gradient(from 200deg, var(--frame-a), var(--frame-b), var(--frame-c), var(--frame-a)) border-box;
  box-shadow: inset 0 0 0 1.5px var(--bb-paper);
  color: #141414;
  font-weight: 900;
}
.page-shell .chat-mark {
  width: 28px;
  height: 28px;
  flex: none;
  font-size: 10px;
}
.page-shell .message-avatar {
  width: 38px;
  height: 38px;
}
:root[data-theme="dark"] .page-shell .message-avatar,
:root[data-theme="dark"] .page-shell .chat-mark {
  background:
    linear-gradient(140deg, var(--n-aura-3), var(--n-aura-2)) padding-box,
    conic-gradient(from 200deg, var(--n-accent), var(--n-aura-3), var(--n-aura-2), var(--n-accent)) border-box;
}
/* The player's own avatar sits beside their bubbles: drawn by the stylesheet, so a message row has nothing extra in it. */
.page-shell .message-row.outgoing {
  align-items: flex-end;
  gap: 8px;
}
.page-shell .message-row.outgoing::after {
  content: "我";
  content: "我" / "";
  order: 2;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(140deg, var(--own-f1, #f2eee9), var(--own-f2, #e9e2f2)) padding-box,
    conic-gradient(
      from 200deg,
      var(--own-a, #ffb295),
      var(--own-b, #bba4ff),
      var(--own-c, #97c8f5),
      var(--own-a, #ffb295)
    )
    border-box;
  box-shadow: inset 0 0 0 1.5px var(--bb-paper);
  color: #141414;
  font-size: 12px;
  font-weight: 900;
}

/* ---- chat: bubbles, header and composer take their colours from the tokens, so night and a dark custom colour both work ---- */
.page-shell .text-bubble {
  background: var(--s-out);
  color: var(--s-out-fg);
}
.page-shell .message-row.incoming .incoming-text,
.page-shell .voice-bubble,
.page-shell .transcript {
  background: var(--s-card);
  box-shadow: inset 0 0 0 1px var(--s-card-line);
  color: var(--bb-ink);
}
.page-shell .play-button,
.page-shell .transcript-toggle {
  color: var(--bb-ink);
}
.page-shell .play-button > svg:first-child {
  color: #fff;
}
:root[data-theme="dark"] .page-shell .play-button > svg:first-child,
.card-slot.is-chat[data-tone="dark"] .play-button > svg:first-child {
  background: var(--n-accent, var(--accent));
  color: #0c0b10;
}
:root[data-theme="dark"] .card-slot.is-chat[data-tone="light"] .play-button > svg:first-child {
  background: var(--accent);
  color: #fff;
}
.page-shell .friend-notice {
  background: var(--s-solid);
  color: var(--bb-sub);
}
.page-shell[data-phase] .composer {
  background: var(--s-card);
  box-shadow: inset 0 0 0 1px var(--s-card-line);
}
.page-shell .composer textarea {
  color: var(--bb-ink);
}
.page-shell .composer textarea::placeholder {
  color: var(--bb-sub);
}
.page-shell .send-button {
  background: var(--s-out);
  color: var(--s-out-fg);
}
.page-shell .send-button:disabled {
  opacity: 0.4;
}
.page-shell .card-slot.is-chat .chat-body {
  color: var(--bb-ink);
}

/* ---- the chat's own colour: the character's aura by default, or the player's colour (--chat-tint-*), remembered per character ---- */
:root[data-theme="dark"] .page-shell .card-slot.is-chat .card-shell {
  background:
    radial-gradient(70% 30% at 8% 12%, color-mix(in srgb, var(--n-aura-1) 35%, transparent) 0%, transparent 70%),
    radial-gradient(80% 35% at 30% 100%, color-mix(in srgb, var(--n-aura-3) 40%, transparent) 0%, transparent 70%),
    var(--bb-paper);
}
.page-shell .card-slot.is-chat.has-chat-bg .card-shell {
  background: radial-gradient(80% 40% at 15% 8%, rgba(255, 255, 255, 0.55) 0%, transparent 70%), var(--chat-tint-day);
  transition: background-color 320ms ease;
}
:root[data-theme="dark"] .page-shell .card-slot.is-chat.has-chat-bg .card-shell {
  background: radial-gradient(80% 40% at 15% 8%, rgba(255, 255, 255, 0.07) 0%, transparent 70%), var(--chat-tint-night);
}

/* ---- the guest's line: light and centred in the chat area, not above the input (Part 26a's words, Part 25b's place) ---- */
.page-shell .card-slot.is-chat .card-shell > .guest-note:not([hidden]) {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: calc(76px + env(safe-area-inset-top));
  bottom: calc(80px + env(safe-area-inset-bottom));
  display: grid;
  place-content: center;
  padding: 0 36px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bb-sub);
  pointer-events: none;
}
.page-shell .card-slot.is-chat .guest-note-link {
  pointer-events: auto;
  min-height: 44px;
  padding: 0 4px;
  color: var(--bb-ink);
  font-weight: 700;
}

.page-shell .card-slot.is-chat .chat-body {
  transition: padding-top 240ms var(--bb-ease);
}
/* The one-time guide hangs under the header (about 70 px): the chat's first line waits below it. */
.page-shell .card-slot.is-chat .chat-head.has-guide ~ .chat-body {
  padding-top: 84px;
}

/* 获得点数 (Part 24c) in the 25b colours: a small bottom sheet sized to its content, a soft accent button; night follows the tokens. */
.earn-sheet .mp-panel {
  gap: 14px;
}
.earn-line {
  color: var(--bb-ink);
}
.mi-small.mi-earn {
  background: #a9cdfb;
  color: #0f3c7c;
  font-weight: 700;
}
.earn-sheet .earn-go {
  background: #a9cdfb;
  color: #0f3c7c;
}
:root[data-theme="dark"] .mi-small.mi-earn,
:root[data-theme="dark"] .earn-sheet .earn-go {
  background: #5aa2ff;
  color: #07162e;
}

/* ---- ⋯ menu in night ---- */
.chat-menu {
  background: var(--s-solid);
}
.chat-menu-item {
  color: var(--bb-ink);
}
.chat-menu-sub {
  color: var(--bb-sub);
}
:root[data-theme="dark"] .chat-menu-item:hover:not(:disabled),
:root[data-theme="dark"] .chat-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

/* ---- 外观: the sheet that changes the chat's background and the frame of your avatar (it is the model sheet's frame) ---- */
.look-section {
  display: grid;
  gap: 10px;
}
.look-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-sub);
}
.look-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.look-swatch,
.look-frame {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform 160ms var(--bb-ease),
    box-shadow 200ms ease;
}
.look-swatch {
  background: var(--swatch-day);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.12);
}
:root[data-theme="dark"] .look-swatch {
  background: var(--swatch-night);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.look-default {
  background: conic-gradient(from 200deg, #ffb295, #bba4ff, #97c8f5, #ffb295);
}
:root[data-theme="dark"] .look-default {
  background: conic-gradient(from 200deg, #ff6a3d, #6a3dff, #23d5c4, #ff6a3d);
}
.look-custom {
  background: conic-gradient(from 0deg, #ff7a7a, #ffd36e, #8fe3a3, #7ab8ff, #c59bff, #ff7a7a) padding-box;
  overflow: hidden;
}
:root .look-custom:not(.is-on) {
  background: conic-gradient(from 0deg, #ff7a7a, #ffd36e, #8fe3a3, #7ab8ff, #c59bff, #ff7a7a);
}
.look-custom.is-on {
  background: var(--swatch-day);
}
:root[data-theme="dark"] .look-custom.is-on {
  background: var(--swatch-night);
}
.look-color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.look-swatch.is-on,
.look-frame.is-on {
  box-shadow:
    0 0 0 2px var(--bb-paper),
    0 0 0 4px var(--bb-ink);
}
.look-swatch:active,
.look-frame:active {
  transform: scale(0.94);
}
.look-swatch:focus-visible,
.look-frame:focus-visible,
.look-custom:focus-within {
  outline: 3px solid var(--bb-ink);
  outline-offset: 3px;
}
.look-frame {
  background: transparent;
}
.look-frame-demo {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(140deg, var(--own-f1), var(--own-f2)) padding-box,
    conic-gradient(from 200deg, var(--own-a), var(--own-b), var(--own-c), var(--own-a)) border-box;
  box-shadow: inset 0 0 0 1.5px var(--bb-paper);
  color: #141414;
  font-size: 14px;
  font-weight: 900;
}
.look-sheet .mp-panel {
  gap: 18px;
}

/* ---- phone: opening a chat. The card grows to fill the screen; the top bar lifts away and the avatar row and the note drop
   away with a fade, where they used to vanish at once; going back reverses it ---- */
@media (max-width: 600px) {
  .page-shell .site-head,
  .page-shell .avatar-nav,
  .page-shell .preview-note {
    transition:
      opacity 240ms ease,
      transform 360ms var(--bb-ease),
      visibility 0s;
  }
  .page-shell[data-phase="chat"] .site-head,
  .page-shell[data-phase="expanding"] .site-head {
    display: grid;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
      opacity 240ms ease,
      transform 360ms var(--bb-ease),
      visibility 0s 360ms;
  }
  .page-shell[data-phase="chat"] .avatar-nav,
  .page-shell[data-phase="expanding"] .avatar-nav,
  .page-shell[data-phase="collapsing"] .avatar-nav {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition:
      opacity 240ms ease,
      transform 360ms var(--bb-ease),
      visibility 0s 360ms;
  }
  .page-shell[data-phase="chat"] .preview-note,
  .page-shell[data-phase="expanding"] .preview-note {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 240ms ease,
      visibility 0s 240ms;
  }
  .page-shell[data-phase="chat"] .card-slot.is-chat,
  .page-shell[data-phase="expanding"] .card-slot.is-chat {
    position: fixed;
    left: var(--chat-left, 50%);
    top: var(--chat-top, 50%);
    width: var(--chat-width, 100vw);
    height: var(--chat-height, 100dvh);
    min-height: 0;
    max-width: none;
    border-radius: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .page-shell[data-phase="chat"] .card-slot.is-chat .card-shell,
  .page-shell[data-phase="expanding"] .card-slot.is-chat .card-shell {
    border-radius: 0;
    box-shadow: none;
  }
  .page-shell[data-phase="chat"] .composer,
  .page-shell[data-phase="expanding"] .composer {
    padding-bottom: 5px;
  }
  html.chat-open,
  html.chat-open body,
  html.chat-open #app {
    background: var(--bb-paper);
  }
  .page-shell[data-phase="chat"],
  .page-shell[data-phase="expanding"] {
    background: var(--bb-paper);
  }
}

/* ---- sheets: the account sheets slide up like the model and 共创 sheets, with a small settle (Motion board, 360 ms) ---- */
@keyframes bb-sheet {
  from {
    transform: translateY(100%) rotate(1deg);
  }
  70% {
    transform: translateY(-1.5%) rotate(-0.3deg);
  }
  to {
    transform: none;
  }
}
.acct-sheet:not(.mp-sheet),
.mi-sheet {
  transform-origin: 50% 100%;
  animation: bb-sheet 360ms var(--bb-ease) backwards;
}

/* ---- 我的信息 in soft colours: a tinted points card and soft accent buttons instead of black and white ---- */
.mi-sheet {
  color: var(--bb-ink);
}
.mi-quota-card {
  background: linear-gradient(160deg, #cfe3ff 0%, #d4f3e6 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.mi-pill {
  background: rgba(47, 123, 234, 0.14);
  color: #1d5ec0;
}
.mi-chip {
  background: rgba(255, 255, 255, 0.7);
  color: var(--bb-ink);
}
.mi-daily {
  color: #3d5a80;
}
.mi-meter {
  background: rgba(47, 123, 234, 0.14);
}
.mi-pillbtn {
  border-color: transparent;
  background: rgba(47, 123, 234, 0.12);
  color: #1d4f9a;
}
.mi-pillbtn.is-main {
  background: #a9cdfb;
  color: #0f3c7c;
}
.mi-small.acct-primary {
  background: #a9cdfb;
  color: #0f3c7c;
  font-weight: 700;
}
.mi-small {
  border-color: transparent;
  background: rgba(47, 123, 234, 0.1);
  color: #1d4f9a;
}
.mi-section,
.mi-logout {
  background: var(--s-soft);
}
.mi-row,
.mi-link {
  border-bottom-color: var(--s-hair);
}
.mi-key,
.mi-signup-first,
.mi-danger .acct-danger {
  color: var(--bb-sub);
}
.mi-logout {
  color: #a23b52;
}
.mi-theme {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--s-soft);
}
.mi-theme-pill {
  min-height: 40px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bb-sub);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  transition:
    background 240ms ease,
    color 240ms ease,
    transform 160ms var(--bb-ease);
}
.mi-theme-pill.is-on {
  background: #a9cdfb;
  color: #0f3c7c;
  font-weight: 700;
}
.mi-theme-pill:active {
  transform: scale(0.97);
}
.mi-theme-pill:has(input:focus-visible) {
  outline: 3px solid var(--bb-ink);
  outline-offset: 2px;
}

/* ---- night: sheets, forms, dialogs ---- */
.acct-sheet,
.mi-sheet,
.bl-sheet,
.mp-panel,
.cc-sheet,
.invite-dialog {
  color: var(--bb-ink);
}
:root[data-theme="dark"] .acct-sheet:not(.mp-sheet),
:root[data-theme="dark"] .mi-sheet {
  background:
    radial-gradient(60% 28% at 12% 10%, rgba(255, 106, 61, 0.22) 0%, transparent 70%),
    radial-gradient(55% 28% at 92% 22%, rgba(47, 107, 255, 0.22) 0%, transparent 70%),
    radial-gradient(70% 30% at 40% 100%, rgba(139, 92, 255, 0.24) 0%, transparent 70%), var(--bb-paper);
}
:root[data-theme="dark"] .mi-sheet {
  background:
    radial-gradient(70% 30% at 10% 12%, rgba(47, 107, 255, 0.24) 0%, transparent 70%),
    radial-gradient(60% 30% at 95% 40%, rgba(35, 213, 196, 0.16) 0%, transparent 70%), var(--bb-paper);
}
:root[data-theme="dark"] .bl-sheet {
  background:
    radial-gradient(70% 30% at 10% 10%, rgba(139, 92, 255, 0.24) 0%, transparent 70%),
    radial-gradient(60% 30% at 95% 40%, rgba(255, 79, 184, 0.16) 0%, transparent 70%), var(--bb-paper);
}
:root[data-theme="dark"] .mp-panel {
  background:
    radial-gradient(
      70% 35% at 10% 15%,
      color-mix(in srgb, var(--n-aura-1, #2f6bff) 30%, transparent) 0%,
      transparent 70%
    ),
    var(--bb-paper);
}
:root[data-theme="dark"] .cc-sheet {
  background:
    radial-gradient(70% 30% at 10% 10%, color-mix(in srgb, var(--accent, #8b5cff) 26%, transparent) 0%, transparent 70%),
    radial-gradient(
      80% 35% at 30% 100%,
      color-mix(in srgb, var(--accent, #8b5cff) 18%, transparent) 0%,
      transparent 70%
    ),
    var(--bb-paper);
}
:root[data-theme="dark"] .mp-sheet,
:root[data-theme="dark"] .invite-dialog::backdrop {
  background: var(--s-dim);
}
:root[data-theme="dark"] .mp-sheet {
  background: var(--s-dim);
}
:root[data-theme="dark"] .mp-grip {
  background: rgba(255, 255, 255, 0.24);
}
:root[data-theme="dark"] .acct-close {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--bb-ink);
}
/* The back chevron and the eye are dark line drawings (data URIs): turned light for night; the chevron has no disc. */
:root[data-theme="dark"] .mi-sheet .acct-close,
:root[data-theme="dark"] .bl-sheet .acct-close {
  background-color: transparent;
  filter: invert(1);
}
:root[data-theme="dark"] .acct-reveal {
  filter: invert(1);
}
:root[data-theme="dark"] .acct-form,
:root[data-theme="dark"] .mp-confirm-box:not(:empty) {
  background: var(--s-card);
}
:root[data-theme="dark"] .acct-input,
:root[data-theme="dark"] .acct-pw {
  background: var(--s-input);
  border-color: var(--s-line);
  color: var(--bb-ink);
}
:root[data-theme="dark"] .acct-pw .acct-input {
  background: transparent;
}
:root[data-theme="dark"] .mi-small:not(.acct-primary),
:root[data-theme="dark"] .mp-back {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: var(--bb-ink);
}
:root[data-theme="dark"] .acct-primary {
  background: var(--s-out);
  color: var(--s-out-fg);
}
:root[data-theme="dark"] .acct-link,
:root[data-theme="dark"] .acct-intro,
:root[data-theme="dark"] .acct-label,
:root[data-theme="dark"] .acct-legal {
  color: var(--bb-ink);
}
:root[data-theme="dark"] .mp-card,
:root[data-theme="dark"] .mp-balance {
  background: var(--s-card);
  box-shadow: inset 0 0 0 1px var(--s-card-line);
  color: var(--bb-ink);
}
:root[data-theme="dark"] .mp-card.is-current {
  box-shadow: inset 0 0 0 2px var(--bb-ink);
}
:root[data-theme="dark"] .mp-card.is-picked {
  box-shadow:
    inset 0 0 0 2px var(--n-accent, var(--accent)),
    0 10px 24px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .mp-tag {
  background: var(--bb-ink);
  color: var(--bb-paper);
}
:root[data-theme="dark"] .mp-chip {
  color: #141414;
}
:root[data-theme="dark"] .mi-quota-card {
  background: linear-gradient(160deg, rgba(47, 107, 255, 0.28) 0%, rgba(35, 213, 196, 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .mi-pill {
  background: rgba(90, 162, 255, 0.22);
  color: #a9ceff;
}
:root[data-theme="dark"] .mi-chip {
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .mi-daily {
  color: #b8c9e6;
}
:root[data-theme="dark"] .mi-meter {
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .mi-fill {
  background: linear-gradient(90deg, #5aa2ff, #23d5c4);
}
:root[data-theme="dark"] .mi-pillbtn {
  background: rgba(255, 255, 255, 0.1);
  color: #cfe2ff;
}
:root[data-theme="dark"] .mi-pillbtn.is-main,
:root[data-theme="dark"] .mi-small.acct-primary,
:root[data-theme="dark"] .mi-theme-pill.is-on {
  background: #5aa2ff;
  color: #07162e;
}
:root[data-theme="dark"] .mi-logout {
  color: #ff9db1;
}
:root[data-theme="dark"] .cc-sheet .cc-close {
  background: rgba(255, 255, 255, 0.12);
}
/* The 共创 cards are pastel in the character's colours in both themes: their words stay dark. */
:root[data-theme="dark"] .cc-sheet .cc-card {
  --bb-ink: #141414;
  --bb-sub: #4a4a4a;
  color: #141414;
}
:root[data-theme="dark"] .cc-sheet .cc-bubble-in .cc-area {
  background: var(--s-card);
  color: var(--bb-ink);
}
:root[data-theme="dark"] .cc-sheet .cc-bubble-out .cc-area,
:root[data-theme="dark"] .cc-sheet .cc-send {
  background: var(--s-out);
  color: var(--s-out-fg);
}
:root[data-theme="dark"] .bl-tables,
:root[data-theme="dark"] .bl-list {
  background: var(--s-card);
}
:root[data-theme="dark"] .bl-row::before {
  background: linear-gradient(140deg, #3a3450, #2a2638);
}
:root[data-theme="dark"] .bl-row.is-bonus::before,
:root[data-theme="dark"] .bl-row.is-grant::before,
:root[data-theme="dark"] .bl-row.is-cocreation_note::before,
:root[data-theme="dark"] .bl-row.is-cocreation_adopted::before,
:root[data-theme="dark"] .bl-row.is-daily_refill::before,
:root[data-theme="dark"] .bl-row.is-reset::before {
  background: rgba(127, 227, 163, 0.18);
  color: #7fe3a3;
}
:root[data-theme="dark"] .bl-sub {
  color: var(--bb-sub);
}
:root[data-theme="dark"] .bl-row.is-bonus .bl-points,
:root[data-theme="dark"] .bl-row.is-grant .bl-points,
:root[data-theme="dark"] .bl-row.is-cocreation_note .bl-points,
:root[data-theme="dark"] .bl-row.is-cocreation_adopted .bl-points,
:root[data-theme="dark"] .bl-row.is-daily_refill .bl-points {
  color: #7fe3a3;
}
:root[data-theme="dark"] .invite-dialog {
  background: var(--s-solid);
  color: var(--bb-ink);
}
:root[data-theme="dark"] .invite-dialog input {
  background: var(--s-input);
  color: var(--bb-ink);
  border-color: var(--bb-ink);
}
:root[data-theme="dark"] .invite-actions button:not([type="submit"]) {
  background: transparent;
  color: var(--bb-ink);
  border-color: var(--s-line);
}
:root[data-theme="dark"] .invite-actions button[type="submit"],
:root[data-theme="dark"] .invite-signup-button {
  background: var(--s-out);
  color: var(--s-out-fg);
}
:root[data-theme="dark"] html:has(.signed-out-page),
:root[data-theme="dark"]:has(.signed-out-page) {
  background:
    radial-gradient(60% 28% at 12% 10%, rgba(255, 106, 61, 0.22) 0%, transparent 70%),
    radial-gradient(55% 28% at 92% 22%, rgba(47, 107, 255, 0.22) 0%, transparent 70%),
    radial-gradient(70% 30% at 40% 100%, rgba(139, 92, 255, 0.24) 0%, transparent 70%), var(--bb-paper) !important;
}
:root[data-theme="dark"] .signed-out-page,
:root[data-theme="dark"] .signed-out-legal a {
  color: var(--bb-ink);
}
:root[data-theme="dark"] .signed-out-page .signed-out-actions::before {
  background: var(--s-card);
  box-shadow: inset 0 0 0 1px var(--s-card-line);
}
:root[data-theme="dark"] .signed-out-page .signed-out-actions > button:nth-child(1) {
  background: var(--s-out);
  color: var(--s-out-fg);
}
:root[data-theme="dark"] .signed-out-page .signed-out-actions > button:not(:nth-child(1)) {
  color: var(--bb-ink);
}

/* ---- the shared voice 小卡: what a person lands on when a card is sent to them ---- */
.shared-page {
  min-height: 100dvh;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  color: var(--bb-ink);
}
.shared-page {
  position: relative;
  isolation: isolate;
}
/* The card's aura paints the whole window behind the page (the custom properties live on the page, not on <html>). */
.shared-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 35% at 10% 15%, var(--aura-1) 0%, transparent 70%),
    radial-gradient(60% 35% at 95% 50%, var(--aura-2) 0%, transparent 70%),
    radial-gradient(80% 40% at 30% 100%, var(--aura-3) 0%, transparent 70%);
}
.shared-head {
  height: 56px;
  flex: none;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shared-hand {
  height: 34px;
  color: var(--bb-ink);
}
.shared-what {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--bb-ink);
}
.shared-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 20px 12px;
}
.shared-sticker {
  position: relative;
  z-index: 2;
  margin: 0 0 -12px;
  padding: 8px 14px;
  border-radius: 4px;
  background: #fff;
  color: #141414;
  font-size: 14px;
  font-weight: 700;
  transform: rotate(-3deg);
  box-shadow: 0 6px 16px rgba(40, 24, 60, 0.12);
  animation: bb-pop 300ms var(--bb-ease) backwards;
}
.shared-sticker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 54px;
  height: 16px;
  background: var(--accent, #bba4ff);
  opacity: 0.55;
  transform: translateX(-50%) rotate(-4deg);
}
.shared-card {
  width: min(286px, 100%);
  aspect-ratio: 286 / 452;
  max-height: 100%;
  padding: 7px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 24px 60px rgba(40, 24, 60, 0.2);
  transform: rotate(2deg);
  animation: bb-in 420ms var(--bb-ease) 80ms backwards;
}
.shared-face {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border-radius: 23px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--aura-3) 0%, var(--aura-1) 45%, #fff 100%);
  color: #141414;
}
.shared-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.6) 42%,
    rgba(255, 210, 246, 0.5) 48%,
    rgba(186, 236, 255, 0.5) 54%,
    transparent 68%
  );
}
.shared-top,
.shared-foot {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: var(--bb-mono);
  letter-spacing: 0.06em;
}
.shared-top {
  font-size: 11px;
}
.shared-foot {
  padding-top: 10px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #4a4a4a;
}
.shared-who {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shared-name {
  font-size: 76px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.95;
  white-space: nowrap;
}
.shared-latin {
  height: 44px;
  color: #141414;
}
.shared-quote {
  position: relative;
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.shared-play {
  position: relative;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(40, 24, 60, 0.1);
  color: #141414;
  font: inherit;
  cursor: pointer;
  transition: transform 160ms var(--bb-ease);
}
.shared-play:disabled {
  cursor: default;
}
.shared-play:not(:disabled):active {
  transform: scale(0.98);
}
.shared-play-dot {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, #7c4deb);
  color: #fff;
}
.shared-play-dot svg {
  width: 16px;
  height: 16px;
}
.shared-wave {
  flex: 1;
  min-width: 0;
  height: 22px;
  color: rgba(20, 20, 20, 0.22);
}
.shared-dur {
  font-family: var(--bb-mono);
  font-size: 11px;
  color: #4a4a4a;
}
.shared-actions {
  flex: none;
  padding: 0 20px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.shared-cta {
  width: 100%;
  max-width: 300px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--s-out);
  color: var(--s-out-fg);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms var(--bb-ease);
}
.shared-cta::after {
  content: "→";
  margin-left: 8px;
}
.shared-cta:active {
  transform: scale(0.98);
}
.shared-hint {
  font-size: 13px;
  color: var(--bb-sub);
}
:root[data-theme="dark"] .shared-page::before {
  background:
    radial-gradient(70% 35% at 10% 15%, color-mix(in srgb, var(--n-aura-1) 35%, transparent) 0%, transparent 70%),
    radial-gradient(80% 40% at 30% 100%, color-mix(in srgb, var(--n-aura-3) 40%, transparent) 0%, transparent 70%);
}
:root[data-theme="dark"] .shared-face {
  background: linear-gradient(165deg, var(--n-aura-3) 0%, #1c1724 52%, #110f16 100%);
  color: var(--bb-ink);
}
:root[data-theme="dark"] .shared-latin {
  color: var(--n-accent);
}
:root[data-theme="dark"] .shared-foot,
:root[data-theme="dark"] .shared-dur {
  color: #d9d5e2;
}
:root[data-theme="dark"] .shared-card {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .shared-play {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--bb-ink);
}
:root[data-theme="dark"] .shared-play-dot {
  background: var(--n-accent);
  color: #0c0b10;
}
:root[data-theme="dark"] .shared-wave {
  color: rgba(255, 255, 255, 0.24);
}
:root[data-theme="dark"] .shared-sticker {
  background: #f5f3f7;
}

@media (prefers-reduced-motion: reduce) {
  .aura,
  .card-face,
  .page-shell .carousel:not(.is-dragging) .card-slot:not(.orbit-wrap),
  .mi-pillbtn,
  .mp-card,
  .cc-sheet .cc-cta {
    transition: none;
  }
  .card-slot.is-active:not(.is-chat) .face-sheen,
  .page-shell .card-slot.is-active:not(.is-chat),
  .card-slot.is-active .face-name,
  .page-shell .avatar-choice-mark,
  .page-shell .message-row,
  .card-slot.is-chat :is(.chat-head, .chat-body, .composer),
  .acct-sheet,
  .acct-sheet:not(.mp-sheet),
  .mi-sheet,
  .mi-section,
  .mi-fill,
  .invite-dialog[open],
  .invite-dialog::backdrop,
  .mp-sheet,
  .mp-panel,
  .mp-brain,
  .mp-brain:hover,
  .mp-confirm-box:not(:empty),
  .bl-tables,
  .bl-row,
  .cc-sheet,
  .cc-sheet .cc-editor,
  .shared-sticker,
  .shared-card {
    animation: none;
  }
}

/* ==========================================================================================================================
   Part 25c: the phone home stays put, the cards turn with real motion, and the guest's co-creation hint. Player selectors only.
   ========================================================================================================================== */
@media (max-width: 600px) {
  /* The home never scrolls the document, in any phase (the chat already locked it with html.chat-open): no bounce, no toolbar
     sliding in and out, so the dvh heights hold still. Only a page that has the stack is locked; the sign-in and legal pages scroll. */
  html:has(.page-shell .carousel),
  html:has(.page-shell .carousel) body,
  html:has(.page-shell .carousel) #app {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  /* preview.ts owns the horizontal swipe, so the browser is told to leave every drag alone while the stack is showing. Taps still
     open and turn cards. In the chat the carousel keeps its own touch-action, so the chat's scrolling is unchanged. */
  .page-shell:is([data-phase="browse"], [data-phase="hover"]) .carousel {
    touch-action: none;
  }
}
/* Under reduced motion a card turn is a short slide and fade (180 ms ease-out), never a dry jump: no spring, no breathing. */
@keyframes turn-fade {
  from {
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-shell .carousel:not(.is-dragging) .card-slot:not(.orbit-wrap) {
    transition:
      transform 180ms ease-out,
      opacity 180ms ease-out;
    /* The blanket reduced-motion rule above cuts every duration to 0.01 ms with !important; this one slide is the exception
       (the whole point of this block), and so is the fade below. Nothing else is let through. */
    transition-duration: 180ms !important;
  }
  /* Not a bb- animation on purpose: it is the reduced-motion alternative itself, so the skin's cancel rule must not list it. */
  .card-slot.is-active:not(.is-chat) .card-shell {
    animation: turn-fade 180ms ease-out;
    animation-duration: 180ms !important;
  }
}
/* The thank-you's sub-line may now carry the guest's hint: it wraps inside the sheet and is never cut off. */
.cc-sheet .cc-thanks-sub {
  max-width: 100%;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* Night: the thank-you is the sheet's own dark paper, not the day's beige with light words on it. */
:root[data-theme="dark"] .cc-sheet .cc-thanks {
  background:
    radial-gradient(70% 36% at 50% 42%, color-mix(in srgb, var(--accent, #8b5cff) 22%, transparent) 0%, transparent 70%),
    var(--bb-paper);
}
:root[data-theme="dark"] .cc-sheet .cc-thanks-sub {
  color: var(--bb-sub);
}
/* Last in the file, as the skin's reduced-motion test requires: the rule that cancels every bb- animation (repeated from Part 25b). */
@media (prefers-reduced-motion: reduce) {
  .card-slot.is-active:not(.is-chat) .face-sheen,
  .page-shell .card-slot.is-active:not(.is-chat),
  .card-slot.is-active .face-name,
  .page-shell .avatar-choice-mark,
  .page-shell .message-row,
  .card-slot.is-chat :is(.chat-head, .chat-body, .composer),
  .acct-sheet,
  .acct-sheet:not(.mp-sheet),
  .mi-sheet,
  .mi-section,
  .mi-fill,
  .invite-dialog[open],
  .invite-dialog::backdrop,
  .mp-sheet,
  .mp-panel,
  .mp-brain,
  .mp-brain:hover,
  .mp-confirm-box:not(:empty),
  .bl-tables,
  .bl-row,
  .cc-sheet,
  .cc-sheet .cc-editor,
  .shared-sticker,
  .shared-card {
    animation: none;
  }
}