/*
 * Shared token CSS for the shadcn-owned UI source. Hosts only need to import
 * this file and theme.css; no application layout, business selector, or
 * Tailwind preset is pulled into the consuming app.
 */
.genarrative-ui {
  --genarrative-ui-focus-ring: var(
    --platform-input-focus-ring,
    rgba(204, 117, 76, 0.24)
  );
  color: var(--platform-text-strong, #3d1f10);
  font-family: var(
    --platform-font-family,
    Inter,
    'Noto Sans CJK SC',
    'PingFang SC',
    system-ui,
    sans-serif
  );
}

.genarrative-ui *,
.genarrative-ui *::before,
.genarrative-ui *::after {
  box-sizing: border-box;
}

.genarrative-ui-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--platform-text-strong, #3d1f10);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

.genarrative-ui-checkbox {
  display: inline-grid;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  place-items: center;
  appearance: none;
  border: 1px solid var(--platform-neutral-border, rgba(226, 203, 184, 0.88));
  border-radius: 0.35rem;
  background: var(--platform-button-secondary-fill, rgba(255, 253, 250, 0.88));
  color: var(--platform-button-primary-text, #fffaf5);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.genarrative-ui-checkbox::after {
  content: '✓';
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.genarrative-ui-checkbox:checked {
  border-color: var(--platform-button-primary-border, rgba(182, 98, 63, 0.32));
  background: var(--platform-button-primary-fill, #c7653d);
}

.genarrative-ui-checkbox:checked::after {
  opacity: 1;
  transform: scale(1);
}

.genarrative-ui-checkbox:hover:not(:disabled) {
  transform: translateY(-1px);
}

.genarrative-ui-checkbox:active:not(:disabled) {
  transform: translateY(1px);
}

.genarrative-ui-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--genarrative-ui-focus-ring);
}

.genarrative-ui-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.genarrative-ui-skeleton {
  min-height: 1rem;
  border-radius: 0.55rem;
  background: linear-gradient(
    100deg,
    rgba(226, 203, 184, 0.42) 20%,
    rgba(255, 253, 250, 0.92) 40%,
    rgba(226, 203, 184, 0.42) 60%
  );
  background-size: 200% 100%;
  animation: genarrative-ui-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes genarrative-ui-skeleton-shimmer {
  to {
    background-position: -200% 0;
  }
}

.genarrative-ui-table__container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.88));
  border-radius: 0.9rem;
  background: var(--platform-subpanel-fill, rgba(255, 253, 250, 0.72));
}

.genarrative-ui-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--platform-text-strong, #3d1f10);
  font-size: 0.8125rem;
  text-align: left;
}

.genarrative-ui-table__head,
.genarrative-ui-table__cell {
  padding: 0.7rem 0.85rem;
  white-space: nowrap;
}

.genarrative-ui-table__header {
  background: rgba(226, 203, 184, 0.2);
  color: var(--platform-text-soft, #755a49);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.genarrative-ui-table__row + .genarrative-ui-table__row {
  border-top: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
}

.genarrative-ui-table__body .genarrative-ui-table__row:hover {
  background: rgba(255, 255, 255, 0.58);
}

.genarrative-ui-table__caption {
  padding: 0.7rem 0.85rem;
  color: var(--platform-text-soft, #755a49);
  font-size: 0.75rem;
  text-align: left;
}

.genarrative-ui-button,
.genarrative-ui-icon-button,
.genarrative-ui-tabs__item,
.genarrative-ui-switch {
  font: inherit;
}

.genarrative-ui-button {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  padding: 0 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.genarrative-ui-button--sm {
  min-height: 2.125rem;
  border-radius: 0.625rem;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
}

.genarrative-ui-button--md {
  min-height: 2.5rem;
  font-size: 0.875rem;
}

.genarrative-ui-button--lg {
  min-height: 2.875rem;
  border-radius: 0.875rem;
  padding-inline: 1.25rem;
  font-size: 0.9375rem;
}

.genarrative-ui-button--full-width {
  width: 100%;
}

.genarrative-ui-button--pill {
  border-radius: 999px;
}

.genarrative-ui-button--start {
  justify-content: flex-start;
  text-align: left;
}

.genarrative-ui-button--primary {
  border-color: var(--platform-button-primary-border, rgba(182, 98, 63, 0.32));
  background: var(--platform-button-primary-fill, #c7653d);
  color: var(--platform-button-primary-text, #fffaf5);
  box-shadow: var(
    --platform-profile-action-shadow,
    0 8px 18px rgba(182, 98, 63, 0.18)
  );
}

.genarrative-ui-button--secondary {
  border-color: var(--platform-surface-border, rgba(226, 203, 184, 0.88));
  background: var(--platform-button-secondary-fill, rgba(255, 253, 250, 0.88));
  color: var(--platform-button-secondary-text, #4b2412);
}

.genarrative-ui-button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--platform-button-ghost-text, #755a49);
}

.genarrative-ui-button--danger {
  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.24));
  background: var(--platform-button-danger-fill, #fff0eb);
  color: var(--platform-button-danger-text, #a6402f);
}

.genarrative-ui-button--tone-accent {
  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.3));
  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
  color: var(--platform-warm-text, #b6623f);
}

.genarrative-ui-button--tone-accent-soft {
  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.22));
  background: transparent;
  color: var(--platform-accent, #c7653d);
}

.genarrative-ui-button:not(:disabled):hover,
.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):hover,
.genarrative-ui-tabs__item:not(:disabled):hover,
.genarrative-ui-switch:not(:disabled):hover {
  transform: translateY(-1px);
}

.genarrative-ui-button:not(:disabled):active,
.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):active,
.genarrative-ui-tabs__item:not(:disabled):active,
.genarrative-ui-switch:not(:disabled):active {
  transform: translateY(1px);
  transition-duration: 80ms;
}

.genarrative-ui-button:not(:disabled):active {
  filter: brightness(0.97);
  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.14);
}

.genarrative-ui-button--primary:not(:disabled):active {
  filter: brightness(0.94);
  box-shadow:
    inset 0 2px 4px rgba(50, 22, 8, 0.2),
    0 3px 8px rgba(182, 98, 63, 0.16);
}

.genarrative-ui-icon-button:not(:disabled):not([aria-disabled='true']):active {
  background: var(--platform-icon-active-fill, rgba(238, 208, 183, 0.42));
  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.12);
}

.genarrative-ui-icon-button--quiet:not(:disabled):not(
    [aria-disabled='true']
  ):active {
  background: var(--platform-button-ghost-fill, rgba(255, 253, 250, 0.56));
}

.genarrative-ui-tabs__item:not(:disabled):active {
  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.1);
}

.genarrative-ui-switch:not(:disabled):active {
  color: var(--platform-text-strong, #3d1f10);
}

.genarrative-ui-switch:not(:disabled):active .genarrative-ui-switch__track {
  filter: brightness(0.94);
}

.genarrative-ui-button--primary:not(:disabled):hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 24px rgba(182, 98, 63, 0.24);
}

.genarrative-ui-button:focus-visible,
.genarrative-ui-icon-button:focus-visible,
.genarrative-ui-tabs__item:focus-visible,
.genarrative-ui-switch:focus-visible,
.genarrative-ui-text-field__control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--genarrative-ui-focus-ring);
}

/* Platform-prefixed adapters share these small chrome primitives with the
 * web host. Keeping the selectors in the package means Tauri consumers do not
 * need to import the website's large application stylesheet. */
.platform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 0.7rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease;
}

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

.platform-button:active {
  transform: translateY(0);
}

.platform-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.platform-button--primary {
  border-color: var(--platform-button-primary-border);
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  box-shadow: 0 16px 34px rgba(182, 98, 63, 0.18);
}

.platform-button--secondary {
  background: var(--platform-button-secondary-fill);
  color: var(--platform-button-secondary-text);
}

.platform-button--ghost {
  background: var(--platform-button-ghost-fill);
  color: var(--platform-button-ghost-text);
}

.platform-button--danger {
  border-color: var(--platform-button-danger-border);
  background: var(--platform-button-danger-fill);
  color: var(--platform-button-danger-text);
}

.platform-icon-button {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-icon-border);
  border-radius: 9999px;
  background: var(--platform-icon-fill);
  color: var(--platform-icon-text);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.platform-icon-button:hover {
  transform: translateY(-1px);
  border-color: var(--platform-nav-active-border);
  background: var(--platform-nav-active-fill);
  color: var(--platform-text-strong);
}

.platform-subpanel {
  border: 1px solid var(--platform-subpanel-border);
  background: var(--platform-subpanel-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.platform-primary-button {
  border: 1px solid var(--platform-button-primary-border);
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  box-shadow: var(--platform-profile-action-shadow);
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.platform-primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.platform-progress-track {
  border: 1px solid var(--platform-track-border);
  background: var(--platform-track-fill);
}

/* Filter toolbar chrome is part of the shared platform surface so the
 * canonical toolbar renders the same in the web app and standalone hosts. */
.platform-category-filter-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1.25rem;
  background: var(--platform-subpanel-fill);
  padding: 0.55rem 0.65rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.platform-category-filter-button,
.platform-category-sort-button,
.platform-category-chip {
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.platform-category-filter-button {
  display: inline-flex;
  position: relative;
  min-height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--platform-cool-border);
  border-radius: 9999px;
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
  padding: 0 0.75rem;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.platform-category-filter-button__count {
  display: inline-flex;
  min-width: 1.18rem;
  height: 1.18rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--platform-warm-text);
  color: var(--platform-button-primary-text);
  padding: 0 0.28rem;
  font-size: 0.72rem;
  line-height: 1;
}

.platform-category-filter-divider {
  width: 1px;
  height: 1.85rem;
  flex: 0 0 auto;
  background: var(--platform-line-soft);
}

.platform-category-chip-scroll {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.55rem;
  overflow-x: auto;
  padding-right: 0.1rem;
}

/* 横向滚动条按需隐藏：分段页签的 `layout="scroll"` 与标签排都靠它保持外观干净，
   滚动能力本身不隐藏（内容仍可横向滚动，只是不画滚动条）。 */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 分段页签的**横滚**子项不得被压到内容宽度以下。中文标签（例如「角色与对象」需要一个
   `1.5rem 内边距 + 4 个字`的宽度）在窄容器里一旦被压扁，标签虽然 `nowrap`，文字仍会
   画出自己的盒子压到相邻项上——现场表现就是「后几项挤成一团、文字互相重叠」。
   `min-width: max-content` 给每个子项一个「内容宽度」下限：放得下就照原样排，放不下
   就由容器横向滚动兜底（`layout="scroll"` 的容器有 `overflow-x-auto`），任何情况下都不叠字。

   这里**只作用于 scroll 布局**：grid 布局没有溢出容器，轨道是 `minmax(0, 1fr)`，
   给子项加 `min-width: max-content` 只会让盒子宽过自己那条轨道、直接画到相邻格上，
   正是本规则要防的重叠。grid 侧靠轨道等分 + 宿主的 `truncateLabels` 收口。 */
.platform-segmented-tabs--scroll > button {
  min-width: max-content;
}

.platform-category-chip {
  display: inline-flex;
  min-height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--platform-text-base);
  padding: 0 0.92rem;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}

.platform-category-chip--active {
  border-color: var(--platform-cool-border);
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
}

.platform-category-sort-button {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.2rem;
  border: 0;
  background: transparent;
  color: var(--platform-text-soft);
  padding: 0 0.2rem;
  font-size: 0.88rem;
  font-weight: 800;
}

.platform-category-filter-button:hover,
.platform-category-chip:hover,
.platform-category-sort-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.platform-category-filter-button:active,
.platform-category-chip:active,
.platform-category-sort-button:active {
  transform: translateY(1px);
  filter: brightness(0.96);
  transition-duration: 80ms;
}

.platform-category-filter-button:focus-visible,
.platform-category-chip:focus-visible,
.platform-category-sort-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
}

.platform-navigable-list-item {
  cursor: pointer;
  border-radius: 0.9rem;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.platform-navigable-list-item:hover:not(:disabled) {
  background: var(--platform-button-ghost-fill);
}

.platform-navigable-list-item:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(50, 22, 8, 0.1);
  transition-duration: 80ms;
}

.platform-navigable-list-item:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.platform-navigable-list-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
}

@media (max-width: 480px) {
  .platform-category-filter-row {
    border-radius: 1rem;
    gap: 0.5rem;
    padding: 0.46rem 0.5rem;
  }

  .platform-category-filter-button {
    min-height: 2.05rem;
    padding-inline: 0.62rem;
    font-size: 0.8rem;
  }

  .platform-category-chip {
    min-height: 2.05rem;
    border-radius: 0.68rem;
    padding-inline: 0.78rem;
    font-size: 0.8rem;
  }
}

.genarrative-ui-button:disabled,
.genarrative-ui-icon-button:disabled,
.genarrative-ui-icon-button[aria-disabled='true'],
.genarrative-ui-tabs__item:disabled,
.genarrative-ui-switch:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.genarrative-ui-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: genarrative-ui-spin 700ms linear infinite;
}

@keyframes genarrative-ui-spin {
  to {
    transform: rotate(360deg);
  }
}

.genarrative-ui-icon-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--platform-icon-border, rgba(226, 203, 184, 0.72));
  border-radius: 0.75rem;
  background: var(--platform-icon-fill, rgba(255, 253, 250, 0.86));
  color: var(--platform-icon-text, #7b5c49);
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.genarrative-ui-icon-button--sm {
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
}

.genarrative-ui-icon-button--md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
}

.genarrative-ui-icon-button--lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.35rem;
}

.genarrative-ui-icon-button--quiet {
  border-color: transparent;
  background: transparent;
}

.genarrative-ui-icon-button--danger {
  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.24));
  background: var(--platform-button-danger-fill, #fff0eb);
  color: var(--platform-button-danger-text, #a6402f);
}

.genarrative-ui-icon-button--surface-floating {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.94);
  color: var(--platform-text-strong, #3d1f10);
  box-shadow: 0 0.35rem 1rem rgba(50, 22, 8, 0.12);
  backdrop-filter: blur(8px);
}

.genarrative-ui-icon-button--surface-dark-mini {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.genarrative-ui-icon-button--surface-dark-mini:not(:disabled):hover {
  background: rgba(0, 0, 0, 0.7);
}

.genarrative-ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.genarrative-ui-text-field {
  display: grid;
  min-width: 0;
  gap: 0.45rem;
  color: var(--platform-text-base, #6f5848);
  font-size: 0.875rem;
  font-weight: 650;
}

.genarrative-ui-text-field__label {
  color: var(--platform-text-strong, #3d1f10);
  font-weight: 750;
}

.genarrative-ui-text-field__control-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.genarrative-ui-text-field__control {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
  border-radius: 0.75rem;
  background: var(--platform-input-fill, rgba(255, 253, 250, 0.94));
  color: var(--platform-text-strong, #3d1f10);
  font: inherit;
  font-weight: 500;
  line-height: 1.4;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.genarrative-ui-text-field__control--sm {
  min-height: 2.125rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.genarrative-ui-text-field__control--md {
  min-height: 2.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
}

.genarrative-ui-text-field__control--lg {
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
}

textarea.genarrative-ui-text-field__control {
  min-height: 7rem;
  resize: vertical;
}

.genarrative-ui-text-field__control:focus {
  border-color: var(--platform-surface-hover-border, rgba(204, 117, 76, 0.52));
  background: var(--platform-input-fill-focus, #fff);
}

.genarrative-ui-text-field__control--error {
  border-color: var(--platform-button-danger-text, #a6402f);
}

.genarrative-ui-text-field__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--platform-text-soft, #988476);
}

.genarrative-ui-text-field__control-wrap
  > .genarrative-ui-text-field__slot:first-child {
  margin-right: -2rem;
  z-index: 1;
  width: 2rem;
  pointer-events: none;
}

.genarrative-ui-text-field__control-wrap
  > .genarrative-ui-text-field__slot:last-child {
  margin-left: -2rem;
  z-index: 1;
  width: 2rem;
  pointer-events: none;
}

.genarrative-ui-text-field__control-wrap
  > .genarrative-ui-text-field__slot:first-child
  ~ .genarrative-ui-text-field__control {
  padding-left: 2.25rem;
}

.genarrative-ui-text-field__hint,
.genarrative-ui-text-field__error {
  font-size: 0.75rem;
  font-weight: 550;
}

.genarrative-ui-text-field__hint {
  color: var(--platform-text-soft, #988476);
}

.genarrative-ui-text-field__error {
  color: var(--platform-button-danger-text, #a6402f);
}

.genarrative-ui-subpanel {
  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
  border-radius: 1rem;
  background: var(--platform-subpanel-fill, rgba(255, 254, 252, 0.94));
  color: var(--platform-text-base, #6f5848);
}

.genarrative-ui-subpanel--soft {
  background: var(--platform-panel-fill-soft, rgba(255, 254, 252, 0.9));
}

.genarrative-ui-subpanel--contrast {
  border-color: var(--platform-surface-border, rgba(226, 203, 184, 0.82));
  background: var(--platform-panel-fill, #fff);
}

.genarrative-ui-subpanel--padding-sm {
  padding: 0.75rem;
}

.genarrative-ui-subpanel--padding-md {
  padding: 1rem;
}

.genarrative-ui-subpanel--padding-lg {
  padding: 1.25rem;
}

.genarrative-ui-subpanel--padding-none {
  padding: 0;
}

.genarrative-ui-subpanel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.genarrative-ui-subpanel__title {
  min-width: 0;
  margin: 0;
  color: var(--platform-text-strong, #3d1f10);
  font-size: 0.9375rem;
  font-weight: 800;
}

.genarrative-ui-subpanel__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.genarrative-ui-modal__backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--platform-overlay-fill, rgba(21, 12, 7, 0.48));
  backdrop-filter: blur(10px);
}

.genarrative-ui-modal__panel {
  display: flex;
  width: min(100%, 38rem);
  max-height: min(90vh, 50rem);
  flex-direction: column;
  overflow: auto;
  border: 1px solid var(--platform-modal-border, rgba(255, 255, 255, 0.58));
  border-radius: 1.25rem;
  background: var(--platform-modal-fill, #fff);
  color: var(--platform-text-strong, #3d1f10);
  box-shadow: 0 24px 72px rgba(50, 22, 8, 0.24);
}

.genarrative-ui-modal__panel--sm {
  width: min(100%, 26rem);
}

.genarrative-ui-modal__panel--lg {
  width: min(100%, 54rem);
}

.genarrative-ui-modal__header,
.genarrative-ui-modal__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.genarrative-ui-modal__header {
  border-bottom: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
}

.genarrative-ui-modal__footer {
  align-items: center;
  border-top: 1px solid var(--platform-line-soft, rgba(226, 203, 184, 0.72));
}

.genarrative-ui-modal__title {
  margin: 0;
  color: var(--platform-text-strong, #3d1f10);
  font-size: 1.05rem;
  font-weight: 850;
}

.genarrative-ui-modal__description {
  margin: 0.35rem 0 0;
  color: var(--platform-text-soft, #988476);
  font-size: 0.8rem;
}

.genarrative-ui-modal__body {
  min-height: 0;
  padding: 1.25rem;
  overflow: auto;
}

/*
 * 平台弹窗外壳：共享弹窗组件（网页端 `src/components/common/UnifiedModal`、
 * `PlatformMudPointConfirmDialog` 等）产出的宿主类。
 *
 * 这三条原先只写在网页端整站样式表 `src/index.css`。AGC 是独立宿主，只引入本文件与
 * `theme.css`，不引入那张整站样式表，于是弹窗面板拿到 `platform-modal-shell` 却没有任何
 * `background` / `border` / `box-shadow` 声明，面板变透明、背后画布直接透出来（AGC
 * 「选择替换素材」弹窗即此例）。放在这里，凡是引入本文件的宿主就一起命中；写进任一宿主的
 * 业务样式里都会变成下一份平行拷贝。
 *
 * 依赖 `theme.css` 的 token，由祖先的 `.platform-theme--light` / `.platform-theme--dark`
 * 提供：弹窗 portal 到 `document.body` 时主题类必须挂在遮罩上（`UnifiedModal.portalTheme`）。
 */
.platform-modal-shell {
  border: 1px solid var(--platform-modal-border);
  background: var(--platform-modal-fill);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
}

.platform-modal-backdrop {
  background: var(--platform-overlay-fill);
  color: var(--platform-text-strong);
  backdrop-filter: blur(12px);
}

.platform-overlay {
  background: var(--platform-overlay-fill);
}

.genarrative-ui-empty-state {
  display: grid;
  min-height: 10rem;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  border: 1px dashed var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--platform-text-soft, #988476);
}

.genarrative-ui-empty-state__icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
  color: var(--platform-accent, #c7653d);
}

.genarrative-ui-empty-state h2,
.genarrative-ui-empty-state p {
  margin: 0;
}

.genarrative-ui-empty-state h2 {
  color: var(--platform-text-strong, #3d1f10);
  font-size: 0.95rem;
}

.genarrative-ui-empty-state p {
  max-width: 34rem;
  font-size: 0.8rem;
}

.genarrative-ui-empty-state__action {
  margin-top: 0.35rem;
}

.genarrative-ui-status {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  color: var(--platform-text-base, #6f5848);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.genarrative-ui-status__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: currentColor;
}

.genarrative-ui-status--neutral {
  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
}

.genarrative-ui-status--info {
  border-color: var(--platform-cool-border, rgba(199, 117, 76, 0.24));
  background: var(--platform-cool-bg, rgba(238, 208, 183, 0.26));
  color: var(--platform-cool-text, #b76038);
}

.genarrative-ui-status--success {
  border-color: var(--platform-success-border, rgba(73, 144, 96, 0.24));
  background: var(--platform-success-bg, rgba(237, 248, 239, 0.92));
  color: var(--platform-success-text, #2f7b46);
}

.genarrative-ui-status--warning {
  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
  color: var(--platform-warm-text, #b6623f);
}

.genarrative-ui-status--error {
  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.22));
  background: var(--platform-button-danger-fill, #ffede5);
  color: var(--platform-button-danger-text, #a6402f);
}

.genarrative-ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--platform-neutral-border, rgba(226, 203, 184, 0.44));
  border-radius: 999px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.genarrative-ui-badge--sm {
  min-height: 1.5rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.6875rem;
}

.genarrative-ui-badge--md {
  min-height: 1.875rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.8125rem;
}

.genarrative-ui-badge--neutral {
  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
  color: var(--platform-neutral-text, #7b6150);
}

.genarrative-ui-badge--accent {
  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
  color: var(--platform-warm-text, #b6623f);
}

.genarrative-ui-badge--success {
  border-color: var(--platform-success-border, rgba(73, 144, 96, 0.24));
  background: var(--platform-success-bg, rgba(237, 248, 239, 0.92));
  color: var(--platform-success-text, #2f7b46);
}

.genarrative-ui-badge--warning {
  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
  color: var(--platform-warm-text, #b6623f);
}

.genarrative-ui-badge--danger {
  border-color: var(--platform-button-danger-border, rgba(185, 75, 58, 0.22));
  background: var(--platform-button-danger-fill, #ffede5);
  color: var(--platform-button-danger-text, #a6402f);
}

.genarrative-ui-badge--info {
  border-color: var(--platform-cool-border, rgba(199, 117, 76, 0.24));
  background: var(--platform-cool-bg, rgba(238, 208, 183, 0.26));
  color: var(--platform-cool-text, #b76038);
}

.genarrative-ui-progress {
  display: grid;
  gap: 0.45rem;
}

.genarrative-ui-progress__track {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--platform-track-fill, rgba(255, 253, 250, 0.9));
}

.genarrative-ui-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--platform-button-primary-fill, #c7653d);
  transition: width 220ms ease;
}

.genarrative-ui-progress__track--indeterminate .genarrative-ui-progress__fill {
  width: 42%;
  animation: genarrative-ui-progress 1.2s ease-in-out infinite;
}

@keyframes genarrative-ui-progress {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(260%);
  }
}

.genarrative-ui-progress__label {
  color: var(--platform-text-soft, #988476);
  font-size: 0.75rem;
}

.genarrative-ui-tabs {
  display: flex;
  min-width: 0;
  gap: 0.25rem;
  overflow-x: auto;
  border: 1px solid var(--platform-subpanel-border, rgba(226, 203, 184, 0.82));
  border-radius: 0.875rem;
  padding: 0.25rem;
  background: var(--platform-neutral-bg, rgba(255, 253, 250, 0.7));
}

.genarrative-ui-tabs__item {
  min-height: 2.125rem;
  flex: 1 0 auto;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  padding: 0 0.875rem;
  color: var(--platform-text-base, #6f5848);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.genarrative-ui-tabs__item--active {
  background: var(--platform-panel-fill, #fff);
  color: var(--platform-text-strong, #3d1f10);
  box-shadow: 0 2px 8px rgba(112, 57, 30, 0.1);
}

.genarrative-ui-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--platform-text-base, #6f5848);
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.genarrative-ui-switch__track {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 1.625rem;
  align-items: center;
  border-radius: 999px;
  background: var(--platform-neutral-border, rgba(226, 203, 184, 0.7));
  padding: 0.1875rem;
  transition: background-color 160ms ease;
}

.genarrative-ui-switch__thumb {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(50, 22, 8, 0.2);
  transition: transform 160ms ease;
}

.genarrative-ui-switch--checked .genarrative-ui-switch__track {
  background: var(
    --platform-button-primary-solid,
    var(--platform-accent, #c7653d)
  );
}

.genarrative-ui-switch--checked .genarrative-ui-switch__thumb {
  transform: translateX(1.125rem);
}

.genarrative-ui-divider {
  height: 1px;
  border: 0;
  background: var(--platform-line-soft, rgba(226, 203, 184, 0.72));
}

@media (prefers-reduced-motion: reduce) {
  .genarrative-ui-button,
  .genarrative-ui-icon-button,
  .genarrative-ui-tabs__item,
  .genarrative-ui-switch,
  .genarrative-ui-progress__fill,
  .genarrative-ui-spinner,
  .genarrative-ui-skeleton {
    transition: none;
    animation: none;
  }
}

@media (max-width: 480px) {
  .genarrative-ui-modal__backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .genarrative-ui-modal__panel,
  .genarrative-ui-modal__panel--sm,
  .genarrative-ui-modal__panel--lg {
    width: 100%;
    max-height: 92vh;
    border-radius: 1.25rem 1.25rem 0 0;
  }
}