/* nunito-latin-400-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/nunito-latin-400-normal-r8SDr6Up.woff2) format('woff2'), url(/assets/nunito-latin-400-normal-DKg4f3fz.woff) format('woff');
}/* nunito-latin-600-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/nunito-latin-600-normal-Br8yIETf.woff2) format('woff2'), url(/assets/nunito-latin-600-normal-Cd0eNu1l.woff) format('woff');
}/* fredoka-latin-500-normal */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fredoka-latin-500-normal-B0JifZgm.woff2) format('woff2'), url(/assets/fredoka-latin-500-normal-BL692wg7.woff) format('woff');
}/* fredoka-latin-600-normal */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fredoka-latin-600-normal-C4zohCW5.woff2) format('woff2'), url(/assets/fredoka-latin-600-normal-CcrEjrB4.woff) format('woff');
}/* ============================================================
   CGMaker UI Component Library Styling (Semantic Tokens Only)
   Strictly references design tokens without hardcoded hex/magic values.
   ============================================================ */

/* ---------------- 0. Typography ---------------- */
.ui-type {
  margin: 0;
  max-width: 100%;
}
.ui-type--display-xl,
.ui-type--display-l,
.ui-type--display-m,
.ui-type--title,
.ui-type--title-sm,
.ui-type--mark {
  font-family: var(--font-display);
}
.ui-type--display-xl {
  font-size: var(--type-display-xl);
  font-weight: 600;
  letter-spacing: var(--type-tracking-display);
  line-height: var(--type-leading-title);
}
.ui-type--display-l {
  font-size: var(--type-display-l);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--type-leading-title);
}
.ui-type--display-m {
  font-size: var(--type-display-m);
  font-weight: 600;
  letter-spacing: var(--type-tracking-title);
  line-height: var(--type-leading-title);
}
.ui-type--title {
  font-size: var(--type-title);
  font-weight: 600;
  letter-spacing: var(--type-tracking-title);
  line-height: var(--type-leading-tight);
}
.ui-type--title-sm {
  font-size: var(--type-title-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--type-leading-tight);
}
.ui-type--body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: var(--type-tracking-body);
  line-height: var(--type-leading-body);
}
.ui-type--body-s {
  font-family: var(--font-body);
  font-size: var(--type-body-s);
  font-weight: 400;
  letter-spacing: var(--type-tracking-body);
  line-height: var(--type-leading-tight);
}
.ui-type--caption {
  font-size: var(--type-caption);
  line-height: 1.45;
  letter-spacing: var(--type-tracking-body);
}
.ui-type--micro {
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.ui-type--kicker {
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--type-tracking-kicker);
  text-transform: uppercase;
  line-height: 1.3;
}
.ui-type--mark {
  font-family: var(--font-mark);
  font-size: clamp(6rem, 14vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.25px color-mix(in srgb, var(--text) 20%, transparent);
}
.ui-type--default { color: var(--text); }
.ui-type--mute { color: var(--text-muted); }
.ui-type--faint { color: var(--ink-faint); }
.ui-type--accent { color: var(--accent-dark); }
.ui-type--invert { color: var(--surface-raised); }
.ui-type--mark.ui-type--default { color: transparent; }

.ui-atmosphere {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg-atmosphere);
}
.ui-atmosphere::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  opacity: 0.12;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 18%, transparent) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
}
.ui-atmosphere__mark {
  position: absolute;
  left: 50%;
  top: 42%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-mark);
  font-size: clamp(6rem, 14vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.25px color-mix(in srgb, var(--text) 18%, transparent);
  white-space: nowrap;
}

.ui-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.ui-token-swatch {
  display: grid;
  gap: 8px;
}
.ui-token-swatch i {
  display: block;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--swatch);
}
.ui-token-swatch strong {
  display: block;
  font-size: var(--type-caption);
  font-weight: 600;
  color: var(--ink);
}
.ui-token-swatch span {
  font-size: var(--type-micro);
  color: var(--ink-faint);
}
.ui-sample-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.ui-radius-box,
.ui-shadow-box {
  width: 120px;
  height: 88px;
  display: grid;
  place-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  font-size: var(--type-caption);
  color: var(--text-muted);
}
.ui-radius-box--xl { border-radius: var(--radius-xl); }
.ui-radius-box--md { border-radius: var(--radius-md); }
.ui-radius-box--sm { border-radius: var(--radius-sm); }
.ui-radius-box--pill { border-radius: var(--radius-pill); width: 160px; }
.ui-shadow-box { border: 0; }
.ui-shadow-box--1 { box-shadow: var(--shadow-1); }
.ui-shadow-box--3 { box-shadow: var(--shadow-3); }
.ui-shadow-box--5 { box-shadow: var(--shadow-5); }
.ui-shadow-box--7 { box-shadow: var(--shadow-7); }
.ui-shadow-box--9 { box-shadow: var(--shadow-9); }

.ui-type-stack { display: grid; gap: 16px; }
.ui-type-row {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ui-type-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-type-row > small {
  display: block;
  margin-bottom: 6px;
  font-size: var(--type-caption);
  color: var(--ink-faint);
}

.ui-bits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.ui-bits-card {
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
}
.ui-bits-card h3,
.ui-bits-card .ui-type--title {
  margin: 6px 0 8px;
}
.ui-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.ui-media-example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.ui-media-example {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.ui-media-example img,
.ui-media-example .forum-cover,
.ui-media-example .ui-media-fallback {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--placeholder);
}
.ui-media-example figcaption {
  padding: 10px 12px;
  font-size: var(--type-caption);
  color: var(--ink-mute);
}

/* ---------------- 1. Buttons ---------------- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  position: relative;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ui-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

/* Sizes */
.ui-btn--sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--radius-control, 9px);
}

.ui-btn--md {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
  border-radius: var(--radius-control, 12px);
}

.ui-btn--lg {
  min-height: 48px;
  padding: 0 24px;
  font-size: 16px;
  border-radius: var(--radius-control, 12px);
}

.ui-btn--pill {
  border-radius: var(--radius-pill, 980px);
}

.ui-btn--full {
  width: 100%;
}

/* Variants */
.ui-btn--primary {
  background: var(--accent-action);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-action) 90%, var(--surface-raised)), var(--accent-action));
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent-dark) 20%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 26%, transparent);
}

.ui-btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent);
}

.ui-btn--primary:active:not(:disabled) {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 26%, transparent);
}

.ui-btn--secondary {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 4%, transparent);
}

.ui-btn--secondary:hover:not(:disabled) {
  background: var(--surface-muted);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent-dark);
}

.ui-btn--outline {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  color: var(--accent-dark);
}

.ui-btn--outline:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.ui-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.ui-btn--ghost:hover:not(:disabled) {
  background: transparent;
  color: var(--text);
}

.ui-btn--danger {
  background: var(--danger);
  color: var(--surface-raised);
  border-color: color-mix(in srgb, var(--danger) 80%, var(--text));
}

.ui-btn--danger:hover:not(:disabled) {
  background: var(--danger);
  background: color-mix(in srgb, var(--danger) 88%, var(--text));
}

.ui-btn--cta {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-action));
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
}

.ui-btn--cta:hover:not(:disabled) {
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* States */
.ui-btn:disabled,
.ui-btn.is-disabled {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  opacity: .68;
}

.ui-btn.is-loading {
  cursor: wait;
  pointer-events: none;
}

.ui-btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-spin .75s linear infinite;
}

.ui-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}

.ui-btn__icon svg,
.ui-chip svg {
  display: block;
}

.ui-btn > span:not(.ui-btn__icon):not(.ui-btn__spinner) {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

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

.ui-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-dark);
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ui-icon-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
}

.ui-icon-btn:disabled {
  background: transparent;
  border-color: var(--line);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  opacity: .68;
}

.ui-icon-btn.is-selected {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.ui-icon-btn--pill {
  border-radius: var(--radius-pill);
}

.ui-tabs-line--page {
  padding: 0 18px;
  min-height: 48px;
  background: var(--surface-raised);
}

.ui-tabs-line--plain {
  border-bottom: 0;
}

.ui-btn-magnet {
  display: inline-flex;
  vertical-align: middle;
  max-width: 100%;
  overflow: visible;
}

.ui-btn-magnet--full,
.ui-btn-magnet--full .ui-btn {
  width: 100%;
}

.ui-hover-glow {
  --glare-x: 50%;
  --glare-y: 50%;
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  isolation: isolate;
}

.ui-hover-glow:not(.star-border-button)::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(180px circle at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(140px circle at var(--glare-x) var(--glare-y), color-mix(in srgb, var(--surface-raised) 42%, transparent), transparent 62%);
  transition: opacity .25s ease;
}

.ui-btn--ghost.ui-hover-glow::before,
.ui-btn--ghost.ui-hover-glow::after,
.ui-select.ui-hover-glow::before,
.ui-select-option.ui-hover-glow::before,
.ui-textarea.ui-hover-glow::before {
  content: none;
}

.ui-btn.ui-hover-glow:not(.ui-btn--ghost)::after,
.ui-icon-btn.ui-hover-glow::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    115deg,
    transparent 32%,
    color-mix(in srgb, var(--surface-raised) 55%, transparent) 48%,
    transparent 64%
  );
  background-size: 180% 100%;
  background-position: 120% 0;
  transition: opacity .2s ease, background-position .45s ease;
}

.ui-btn > *,
.ui-icon-btn > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .ui-hover-glow:hover::before {
    opacity: 1;
  }

  .ui-btn:hover:not(:disabled):not(.ui-btn--ghost),
  .ui-icon-btn:hover:not(:disabled) {
    transform: scale(1.02);
  }

  .ui-btn.ui-hover-glow:hover:not(:disabled):not(.ui-btn--ghost)::after,
  .ui-icon-btn.ui-hover-glow:hover:not(:disabled)::after {
    opacity: 1;
    background-position: -20% 0;
  }
}

/* ---------------- 2. Inputs & Forms ---------------- */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  width: 100%;
}

.ui-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-field__heading {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

.ui-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display, inherit);
}

.ui-field__required {
  color: var(--danger);
  margin-left: 2px;
}

.ui-field__control-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ui-field__addon-left,
.ui-field__addon-right {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.ui-field__control-wrap.is-affixed {
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 12px);
  background: var(--surface-raised);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.ui-field__control-wrap.is-affixed .ui-input {
  flex: 1;
  min-width: 0;
  width: auto;
  min-height: 40px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.ui-field__control-wrap.is-affixed:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ui-field__control-wrap.is-affixed .ui-input:focus {
  box-shadow: none;
}

.ui-field--error .ui-field__control-wrap.is-affixed {
  border-color: var(--danger);
}

.ui-field--error .ui-field__control-wrap.is-affixed:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent);
}

.ui-field--success .ui-field__control-wrap.is-affixed {
  border-color: var(--success);
}

.ui-field__control-wrap.is-affixed:has(.ui-input:disabled) {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.ui-field__control-wrap.is-affixed:has(.ui-input:read-only:not(:disabled)) {
  background: var(--bg);
}

.ui-input,
.ui-textarea,
.ui-select {
  width: 100%;
  font-family: var(--font-body, inherit);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 12px);
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.ui-input {
  min-height: 42px;
}

.title-field__editor {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: text;
}

.title-field__editor[contenteditable='false'] {
  cursor: not-allowed;
}

.title-field__editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.title-emoji-popover > .ui-card__body {
  padding: 0;
}

.ui-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px 0 14px;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.ui-select__value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s ease;
}

.ui-select.is-open .ui-select__chevron {
  transform: rotate(180deg);
  color: var(--accent-dark);
}

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus-visible,
.ui-select.is-open {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ui-field--error .ui-input,
.ui-field--error .ui-textarea,
.ui-field--error .ui-select {
  border-color: var(--danger);
}

.ui-field--error .ui-input:focus,
.ui-field--error .ui-textarea:focus,
.ui-field--error .ui-select:focus-visible,
.ui-field--error .ui-select.is-open {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent);
}

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}
.ui-input:read-only:not(:disabled),
.ui-textarea:read-only:not(:disabled) {
  background: var(--bg);
  color: var(--text-muted);
  cursor: text;
  box-shadow: none;
}

.ui-select-menu {
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 12px);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  min-width: 12em;
  width: max-content;
  max-width: min(22em, calc(100vw - 16px));
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 100010;
}

.ui-select-option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 100%;
  min-height: 38px;
  padding: 0 18px 0 10px;
  border: 0;
  border-radius: calc(var(--radius-control, 12px) - 2px);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.ui-select-option.is-active,
.ui-select-option:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--accent-dark);
}

.ui-select-option.is-selected {
  color: var(--accent-dark);
  font-weight: 600;
}

.ui-select-option__mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

.ui-select-option__label {
  flex: 0 0 auto;
  min-width: min-content;
  white-space: nowrap;
}

.ui-select-menu--trigger {
  min-width: 0;
  background: var(--surface-raised);
}

.ui-select-menu--trigger .ui-select-option {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  align-items: center;
  padding-top: 4px;
  padding-bottom: 4px;
  background: var(--surface-raised);
  white-space: normal;
  overflow: hidden;
}

.ui-select-menu--trigger .ui-select-option.is-active,
.ui-select-menu--trigger .ui-select-option:hover {
  background: var(--surface-raised);
}

.ui-select-menu--trigger .ui-select-option__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ui-select-menu--searchable {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 0;
  overscroll-behavior: contain;
  background: var(--surface-raised);
}

.ui-select-menu--searchable > .ui-select-option,
.ui-select-menu--searchable > .ui-select-menu__search {
  flex: 0 0 auto;
}

.ui-select-menu__search {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -8px 4px;
  padding: 8px 8px 6px;
  background: var(--surface-raised);
}

.ui-select-menu__search .ui-search-input {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
}

.ui-select-menu__search .ui-search-input input,
.ui-select-menu__search .ui-search-input input:hover,
.ui-select-menu__search .ui-search-input input:focus {
  height: 32px;
  font-size: 13px;
  line-height: 32px;
}

.ui-select-menu__status {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.ui-field__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ui-field__error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 2px;
}

.ui-field__success {
  font-size: 12px;
  color: var(--success);
  margin-top: 2px;
}

.ui-field--success .ui-input,
.ui-field--success .ui-textarea,
.ui-field--success .ui-select {
  border-color: var(--success);
}

.ui-search-input {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  box-sizing: border-box;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill, 980px);
  padding: 0 16px;
  min-height: 42px;
  width: 100%;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ui-search-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}

.ui-search-input input,
.ui-search-input input:focus,
.ui-search-input input:hover {
  flex: 1;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 40px;
  appearance: none;
  -webkit-appearance: none;
}

.ui-search-input input::placeholder {
  color: var(--text-muted);
}

.ui-search-input svg {
  color: currentColor;
  flex-shrink: 0;
}

.ui-search-input__clear,
.ui-search-input__submit {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.ui-search-input__clear {
  width: 24px;
  height: 24px;
}

.ui-search-input__submit {
  width: 28px;
  height: 28px;
  margin-right: -4px;
}

.ui-search-input__clear:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.ui-search-input__submit:hover,
.ui-search-input__submit:focus-visible {
  background: var(--surface-muted);
  color: var(--accent);
  outline: none;
}

/* ---------------- 3. Tabs & Chips ---------------- */
.ui-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill, 980px);
  background: var(--surface-muted);
  border: 1px solid var(--line);
}

.ui-segmented__item {
  position: relative;
  z-index: 0;
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill, 980px);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display, inherit);
  cursor: pointer;
  transition: color .2s ease;
}

.ui-segmented__item:hover:not(.is-active) {
  color: var(--text);
}

.ui-segmented__item.is-active {
  color: var(--accent-dark);
}

.ui-segmented__indicator {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

.ui-segmented__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill, 980px);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all .2s ease;
}

.ui-chip-magnet {
  display: inline-flex;
  vertical-align: middle;
  max-width: 100%;
  overflow: visible;
}

.ui-chip-glare.glare-hover {
  display: inline-flex;
  border-radius: var(--radius-pill, 980px);
}

.ui-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent-dark);
}

.ui-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ui-chip:disabled {
  color: var(--text-muted);
  background: var(--surface-muted);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

.ui-tabs-line {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.ui-tabs-line::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.ui-tabs-line.ui-tabs-line--page {
  overflow: hidden;
}

.ui-tabs-line__item {
  position: relative;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}

.ui-tabs-line__item:hover {
  color: var(--text);
}

.ui-tabs-line__item.is-active {
  color: var(--accent-dark);
}

.ui-tabs-line__ink {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--space-1) var(--space-1) 0 0;
  background: var(--accent);
}

.ui-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 0 0;
  flex: none;
}

.ui-pagination__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.ui-pagination__btn:hover:not(:disabled):not(.is-current) {
  color: var(--text);
  border-color: var(--line-hover, var(--line));
  background: var(--surface-muted);
}

.ui-pagination__btn.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.ui-pagination__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-pagination__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ui-pagination--measure {
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  padding: 0;
}

.ui-pagination__ellipsis {
  min-width: 20px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* ---------------- 4. Cards ---------------- */
.ui-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ui-card--interactive {
  cursor: pointer;
}

.ui-card--interactive:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 16%, transparent);
}

.ui-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ui-card__title {
  font-family: var(--font-display, inherit);
  font-size: var(--type-title);
  font-weight: 600;
  letter-spacing: var(--type-tracking-title);
  line-height: var(--type-leading-tight);
  margin: 0;
  min-width: 0;
  flex: 1;
}

.ui-card__body {
  padding: 20px;
}

.ui-modal > .ui-card__header,
.ui-modal > .ui-card__footer {
  flex: 0 0 auto;
}
.ui-modal > .ui-card__header,
.ui-popover > .ui-card__header,
.ui-drawer > .ui-card__header {
  position: relative;
  z-index: 1;
  background: var(--surface-raised);
  padding: 4px 12px;
  gap: 8px;
}
.ui-modal > .ui-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 8px 12px;
}
.ui-modal > .ui-card__header > .ui-card__title,
.ui-modal > .ui-card__header > span {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  text-align: center;
  flex: none;
  width: max-content;
  max-width: calc(100% - 152px);
  min-width: 0;
}
.ui-modal > .ui-card__header > .ui-modal__tools {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  position: relative;
  z-index: 1;
  margin-left: 0;
}
.ui-modal > .ui-card__body {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  gap: var(--space-4, 16px);
  min-height: 96px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ui-card__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
  background: color-mix(in srgb, var(--surface-muted) 36%, var(--surface-raised));
}

.ui-modal > .ui-card__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------------- 5. Modal & Dialog ---------------- */
.ui-modal-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(29, 29, 31, 0.52);
  background: color-mix(in srgb, var(--text) 52%, transparent);
}

/* 模糊不能放在对话框的祖先上。iOS 会因此不绘制输入框里的文字，只剩光标。 */
.ui-modal-backdrop::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui-modal-backdrop--top {
  z-index: 100000;
}

.ui-modal-backdrop--clear {
  background: transparent;
}

.ui-modal-backdrop--clear::before {
  content: none;
}

.ui-modal:focus,
.ui-bottomsheet:focus,
.ui-drawer:focus {
  outline: none;
}

.ui-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

/* 入场位移动画结束后清掉 transform。iOS 在带 transform 的祖先里不绘制输入文字。 */
html[data-boot-surface='mobile'] .ui-modal.is-settled,
html[data-tablet] .ui-modal.is-settled {
  transform: none !important;
}

.ui-modal-backdrop--full {
  padding: 0;
  place-items: stretch;
}

.ui-modal-backdrop--col {
  left: var(--sidebar-w, 188px);
}

.ui-modal--full {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.ui-modal--full > .ui-card__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  gap: 0;
}

.ui-modal--full > .ui-card__body:has(> .player-page),
.ui-modal.ui-modal--play > .ui-card__body {
  overflow: hidden;
}

.ui-modal--full > .ui-card__body > .player-page--stage,
.ui-modal--full > .ui-card__body > .player-page:not(:has(.demoend)) {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
}

/* 规范 §7.13：居中确认框 */
.ui-modal--dialog {
  width: min(380px, calc(100vw - 32px));
  overflow: hidden;
  text-align: center;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-9);
}

.ui-modal--dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}

.ui-modal--dialog > .ui-card__header .ui-card__title {
  text-align: center;
}

.ui-modal--dialog > .ui-card__body {
  padding: 20px 2rem 4px;
  align-items: center;
  gap: 0.5rem;
}

.ui-modal--dialog > .ui-card__footer {
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 1rem 2rem 1rem;
  gap: 12px;
}

.ui-modal-backdrop--col .ui-modal--full > .ui-card__body {
  overflow: hidden;
}

.ui-modal-backdrop--col .ui-modal--body-scroll > .ui-card__body {
  overflow: auto;
  overscroll-behavior: contain;
}

.ui-modal__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}
.ui-modal__close {
  flex-shrink: 0;
  margin-left: 0;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill, 980px);
  background: var(--surface-raised);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  line-height: 0;
  cursor: pointer;
  transition: all .2s ease;
}

.ui-modal__close:hover {
  color: var(--text);
  background: var(--surface-muted);
}

/* iPad 打开弹窗会把焦点落在关闭按钮上，画出一圈选中描边。只清这一处。 */
html[data-tablet] .ui-modal__close:hover,
html[data-tablet] .ui-modal__close:focus,
html[data-tablet] .ui-modal__close:focus-visible,
html[data-tablet] .ui-modal__close:active {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--text-muted);
  background: var(--surface-raised);
}

.ui-popover {
  position: fixed;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 18px);
  box-shadow: var(--shadow);
}
.ui-popover > .ui-card__header,
.ui-popover > .ui-card__footer {
  flex: 0 0 auto;
}
.ui-popover > .ui-card__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  gap: var(--space-3, 12px);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ui-popover > .ui-card__footer {
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* BottomSheet for Mobile */
.ui-bottomsheet-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 100;
  display: grid;
  align-items: end;
  background: rgba(29, 29, 31, 0.56);
  background: color-mix(in srgb, var(--text) 56%, transparent);
  backdrop-filter: blur(8px);
}

.ui-bottomsheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  overflow: hidden;
  background: var(--surface-raised);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
}

.ui-bottomsheet__handle {
  flex: 0 0 auto;
  width: 42px;
  height: 5px;
  border-radius: var(--space-1);
  background: var(--surface-strong);
  margin: 0 auto 14px;
}

.ui-bottomsheet__body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-scale-in {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ui-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---------------- 6. Feedback & States ---------------- */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 280px;
  box-sizing: border-box;
  padding: 48px 24px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}

.ui-empty__icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill, 980px);
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.ui-empty__art {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin-bottom: 16px;
  pointer-events: none;
  user-select: none;
}

.ui-empty.floor-empty {
  min-height: 0;
  padding: 28px 18px;
  background: transparent;
}
.ui-empty.floor-empty .ui-empty__art {
  width: 96px;
  height: 96px;
}

.ui-empty__title {
  font-family: var(--font-display, inherit);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

.ui-empty__desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 0 20px;
  line-height: 1.6;
}

.ui-tip {
  display: flex;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

.ui-tip--accent {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.ui-tip--mute {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text-muted);
}

.ui-tip__icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent-dark);
}

.ui-tip--mute .ui-tip__icon { color: var(--text-muted); }

.ui-tip__body { min-width: 0; }
.ui-tip__body b { font-weight: 700; }

.ui-float-tip {
  position: relative;
  display: inline-flex;
  overflow: visible;
  z-index: 1;
}

.ui-float-tip--block {
  display: flex;
  width: 100%;
}

.ui-float-tip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  max-width: 240px;
  padding: 5px 10px;
  border-radius: var(--radius-control);
  background: var(--text);
  color: var(--surface-raised);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: opacity .18s ease, transform .18s ease;
}

.ui-float-tip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}

.ui-float-tip__bubble.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ui-float-tip__bubble--wrap {
  left: 0;
  right: auto;
  bottom: auto;
  max-width: min(320px, calc(100vw - 16px));
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  transform: none;
  z-index: 110;
}

.ui-float-tip__bubble--wrap.is-open {
  transform: none;
}

.ui-float-tip__bubble[data-placement='below']::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--text);
}

.ui-float-tip__bubble--side {
  top: 0;
  bottom: auto;
  left: 0;
  z-index: 80;
  max-width: none;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.3;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
}

.ui-float-tip__bubble--side.is-open {
  transform: translateX(0);
}

.ui-float-tip__bubble--side::after {
  top: 50%;
  bottom: auto;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: var(--text);
}

.ui-float-tip__bubble--side[data-placement='left']::after {
  left: 100%;
  right: auto;
  border-right-color: transparent;
  border-left-color: var(--text);
}

.ui-float-tip--end .ui-float-tip__bubble {
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}

.ui-float-tip--end .ui-float-tip__bubble.is-open {
  transform: translate(0, 0);
}

.ui-float-tip--end .ui-float-tip__bubble::after {
  left: auto;
  right: 8px;
  transform: none;
}

.ui-float-tip--start .ui-float-tip__bubble {
  left: 0;
  right: auto;
  transform: translate(0, 4px);
}

.ui-float-tip--start .ui-float-tip__bubble.is-open {
  transform: translate(0, 0);
}

.ui-float-tip--start .ui-float-tip__bubble::after {
  left: 8px;
  right: auto;
  transform: none;
}

.ui-float-tip--hoverable :is(.ui-btn, .ui-icon-btn, .ui-chip, .ui-input):disabled {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-float-tip__bubble { transition: none; }
}

.ui-field-magnet {
  display: block;
  width: 100%;
}

.ui-skeleton-box {
  position: relative;
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: var(--radius-control, 9px);
}

.ui-skeleton-box::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--surface-raised) 75%, transparent) 47%, transparent 66%);
  transform: translateX(-110%);
  animation: ui-shimmer 1.4s ease-in-out infinite;
}

@keyframes ui-shimmer {
  to { transform: translateX(110%); }
}

/* SmartImage：内容图片加载中 shimmer 占位、失败插画 */
.ui-smart-img {
  position: relative;
  display: block;
  overflow: hidden;
}

.ui-smart-img__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: inherit;
  border-radius: inherit;
}

.ui-smart-img.is-loading {
  background: var(--surface-muted);
}

.ui-smart-img.is-loading .ui-smart-img__img {
  visibility: hidden;
}

.ui-smart-img__loading {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.ui-smart-img__loading::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--surface-raised) 75%, transparent) 47%, transparent 66%);
  transform: translateX(-110%);
  animation: ui-shimmer 1.4s ease-in-out infinite;
}

.ui-smart-img.is-error {
  background: var(--surface-muted);
}

.ui-smart-img__art {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.ui-avatar.is-loading {
  position: relative;
  background: var(--surface-muted);
}

.ui-avatar.is-loading img {
  visibility: hidden;
}

.ui-avatar.is-loading::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--surface-raised) 75%, transparent) 47%, transparent 66%);
  transform: translateX(-110%);
  animation: ui-shimmer 1.4s ease-in-out infinite;
}

/* ---------------- 7. Badges, Tags & Avatars ---------------- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 980px);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--text-muted);
  white-space: nowrap;
}

.ui-badge--accent {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-dark);
}

.ui-badge--success {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 36%, transparent);
  color: var(--success);
}

.ui-badge--danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 36%, transparent);
  color: var(--danger);
}

.ui-badge--warning {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 36%, transparent);
  color: var(--warning);
}

.ui-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--surface-muted), var(--surface-strong));
  color: var(--accent-dark);
  font-weight: 700;
  font-family: var(--font-display, inherit);
  overflow: hidden;
  border: 1px solid var(--line);
}

.ui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.ui-avatar--md { width: 38px; height: 38px; font-size: 15px; }
.ui-avatar--lg { width: 52px; height: 52px; font-size: 20px; }
.ui-avatar--square { border-radius: var(--radius-control, 12px); }

.ui-role-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 0;
}

.ui-role-mark picture { display: contents; }
.ui-role-mark img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.ui-role-mark--sm img { width: 28px; height: 28px; }
.ui-role-mark--md img { width: 38px; height: 38px; }
.ui-role-mark--lg img { width: 52px; height: 52px; }

.ui-role-mark__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.ui-forum-role {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1.4;
  cursor: default;
}

.ui-forum-role *,
.ui-forum-role__magnet,
.ui-forum-role__glare {
  cursor: default;
}

.ui-forum-role--fx {
  overflow: visible;
}

.ui-forum-role img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  flex: none;
}

.ui-forum-role__fx,
.ui-forum-role__magnet {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
  overflow: visible;
  user-select: none;
}

.ui-forum-role__suffix {
  flex: none;
  color: var(--text-muted);
  font-weight: 500;
}

.ui-forum-role__glare.glare-hover {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-pill, 980px);
  cursor: default;
}

.ui-forum-role__glare.glare-hover > * {
  position: relative;
  z-index: 1;
}

.ui-forum-role__glare.glare-hover::after {
  z-index: 0;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    42px circle at var(--glare-x, 50%) var(--glare-y, 50%),
    var(--glare-color),
    transparent 72%
  );
}

.ui-forum-role .shiny-text {
  color: inherit;
  background-image: linear-gradient(
    105deg,
    currentColor 0%,
    currentColor 36%,
    color-mix(in srgb, currentColor 62%, #fff) 48%,
    currentColor 60%,
    currentColor 100%
  );
}

.ui-forum-role__glare.glare-hover:hover .shiny-text {
  background-image: none;
  -webkit-text-fill-color: currentColor;
}

.ui-forum-role__text {
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-segmented__count { margin-left: 6px; opacity: .75; }

.ui-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-xs, 12px);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
}

.ui-tag--default {
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.ui-tag--solid {
  min-height: 20px;
  padding: 2px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--surface-raised);
  font-size: 10px;
  font-weight: 800;
}

.ui-tag--wash {
  min-height: 24px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
}

.ui-toast-host {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-6);
  /* 宿主挂在 body 上，才能和顶层弹窗（100000）比层级。留在页面里会被遮罩盖住。 */
  z-index: 100030;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--space-2);
  width: min(360px, calc(100vw - var(--space-8)));
  pointer-events: none;
}

.ui-toast {
  position: relative;
  z-index: 100030;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--accent-dark) 20%, transparent);
  background: var(--accent-action);
  box-shadow: var(--shadow-3);
  color: var(--accent-ink);
  font-size: var(--type-body);
  font-weight: 700;
  pointer-events: auto;
}

.ui-toast--lone {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-6);
  width: min(360px, calc(100vw - var(--space-8)));
}

.ui-toast--success {
  border-color: color-mix(in srgb, var(--success) 80%, var(--text));
  background: var(--success);
  color: var(--surface-raised);
  box-shadow: var(--shadow-3);
}

.ui-toast--danger {
  border-color: color-mix(in srgb, var(--danger) 80%, var(--text));
  background: var(--danger);
  color: var(--surface-raised);
  box-shadow: var(--shadow-3);
}

.ui-toast--warning {
  border-color: color-mix(in srgb, var(--warning) 80%, var(--text));
  background: var(--warning);
  color: var(--surface-raised);
  box-shadow: var(--shadow-3);
}

.ui-drawer-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 100;
  background: rgba(29, 29, 31, 0.48);
  background: color-mix(in srgb, var(--text) 48%, transparent);
  backdrop-filter: blur(10px);
}

.ui-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(380px, 92vw);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ui-drawer > .ui-card__header {
  flex: 0 0 auto;
}
.ui-drawer > .ui-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ui-drawer--right { right: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); }
.ui-drawer--left { left: 0; border-radius: 0 var(--radius-card) var(--radius-card) 0; }

.ui-poster-card,
.gcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  color: inherit;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.ui-poster-card:hover,
.gcard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 16%, transparent);
}

.ui-poster-card__cover,
.gcard .forum-cover { display: block; }
.ui-poster-card__cover {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised));
}
.ui-poster-card__cover .forum-cover,
.ui-poster-card__cover img,
.ui-poster-card__cover .glare-hover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-poster-card__cover .forum-cover { aspect-ratio: auto; }
.ui-poster-card__hover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 1.1rem 12px 12px;
  color: var(--ink-on-image);
  background: linear-gradient(to top, color-mix(in srgb, var(--text) 82%, transparent) 0%, color-mix(in srgb, var(--text) 35%, transparent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid, 280ms) ease;
}
.ui-poster-card:hover .ui-poster-card__hover { opacity: 1; }
.ui-poster-card__hover-tag {
  align-self: flex-start;
  color: var(--accent);
  font-size: var(--type-micro);
  font-weight: 600;
}
.ui-poster-card__hover-desc {
  margin: 0;
  color: var(--ink-on-image);
  color: color-mix(in srgb, var(--ink-on-image) 88%, transparent);
  font-size: var(--type-caption);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ui-poster-card__cover .forum-cover,
.ui-poster-card__cover img,
.gcard .forum-cover {
  transform-origin: center center;
  transition: transform 450ms linear;
}
.ui-poster-card:hover .forum-cover:not(.cover--empty):not(.cover--reviewing),
.gcard:hover .forum-cover:not(.cover--empty):not(.cover--reviewing) { transform: scale(1.05); }

.ui-poster-card__body,
.gcard-b { display: block; flex: 1; padding: 14px 16px 16px; }
.ui-poster-card__title,
.gcard-t {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--type-title-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  line-height: var(--type-leading-tight);
}
.ui-poster-card:hover .ui-poster-card__title,
.gcard:hover .gcard-t { color: var(--accent-dark); }
.ui-poster-card__desc,
.gcard-d {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.75;
  height: calc(1.75em * 3);
  margin-bottom: 10px;
}
.ui-poster-card__meta,
.gcard-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 4px; font-size: 12px; color: var(--text-muted); justify-content: flex-start; gap: 3px;}

.ui-media-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-muted);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ui-media-card:hover { transform: translateY(-3px); }
.ui-media-card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--surface-muted);
}
.ui-media-card__cover .glare-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ui-media-card__cover .cover {
  width: 100%;
  flex: none;
}
.ui-media-card__cover .forum-cover,
.ui-media-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ui-media-card:hover .forum-cover,
.ui-media-card:hover img { transform: scale(1.05); }
.ui-media-card .forum-cover,
.ui-media-card img { transition: transform .45s var(--ease-standard, ease); }
.ui-media-card__overlay {
  position: absolute;
  top: auto; right: 0; bottom: 0; left: 0; inset: auto 0 0;
  padding: 2.4rem 12px 12px;
  background: linear-gradient(to top, color-mix(in srgb, var(--text) 78%, transparent) 0%, color-mix(in srgb, var(--text) 35%, transparent) 55%, transparent);
  color: var(--ink-on-image);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ui-media-card:not(.ui-media-card--related):hover .ui-media-card__overlay {
  padding-top: 3.2rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--text) 88%, transparent) 0%, color-mix(in srgb, var(--text) 45%, transparent) 60%, transparent);
}
.ui-media-card__kicker {
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.ui-media-card__title {
  font-family: var(--font-display);
  font-size: var(--type-title-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-on-image);
}
.ui-media-card__byline,
.ui-media-card__desc {
  font-size: var(--type-caption);
  color: var(--ink-on-image);
  color: color-mix(in srgb, var(--ink-on-image) 72%, transparent);
}
.ui-media-card__kicker,
.ui-media-card__byline,
.ui-media-card__desc {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, max-height .25s ease, transform .25s ease;
}
.ui-media-card:not(.ui-media-card--related):hover .ui-media-card__kicker,
.ui-media-card:not(.ui-media-card--related):hover .ui-media-card__byline,
.ui-media-card:not(.ui-media-card--related):hover .ui-media-card__desc {
  opacity: 1;
  max-height: 3.2em;
  transform: none;
}
@media (hover: none) {
  .ui-media-card__byline {
    opacity: 1;
    max-height: 2em;
    transform: none;
  }
}
.ui-media-card--related {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
}
.ui-media-card--related .ui-media-card__cover {
  width: 62px;
  height: 48px;
  aspect-ratio: auto;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
}
.ui-media-card--related .ui-media-card__overlay {
  position: static;
  inset: auto;
  padding: 0;
  background: none;
  color: var(--text);
}
.ui-media-card--related .ui-media-card__title { color: var(--text); }
.ui-media-card--related .ui-media-card__kicker,
.ui-media-card--related .ui-media-card__byline,
.ui-media-card--related .ui-media-card__desc {
  opacity: 1;
  max-height: none;
  transform: none;
  overflow: visible;
  color: var(--text-muted);
}
.ui-media-card--related:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
}
.ui-media-card--related:hover .ui-media-card__overlay {
  padding: 0;
  background: none;
}
.ui-media-card--related:hover .forum-cover,
.ui-media-card--related:hover img { transform: none; }

.ui-card-skeleton {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ui-card-skeleton__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  flex: none;
}
.ui-card-skeleton__body { display: grid; gap: 8px; padding: 16px; }
.ui-row-skeleton { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ui-row-skeleton__text { flex: 1; display: grid; gap: 6px; }

/* 页面级骨架：工具条与表行，对齐真实列表页的区域结构 */
.ui-skeleton-toolbar { display: grid; gap: 10px; margin-bottom: 12px; }
.ui-skeleton-tb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.ui-skeleton-tb-row + .ui-skeleton-tb-row { border-top: 1px solid var(--line); }
.ui-skeleton-tb-row__thumb { flex: none; }
.ui-skeleton-tb-row__meta { flex: none; }

/* 内容区局部加载：铺满当前容器，骨架对齐真实布局，不得用 EmptyState 冒充 */
.ui-content-loading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border-radius: inherit;
}
.ui-content-loading__scan {
  position: absolute;
  top: 0; right: auto; bottom: 0; left: -20%; inset: 0 auto 0 -20%;
  z-index: 2;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, var(--accent-soft) 55%, transparent) 48%,
    transparent 100%
  );
  animation: ui-content-loading-scan 1.8s ease-in-out infinite;
}
.ui-content-loading__motion {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
.ui-content-loading__label {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--type-caption, 12px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 48%, var(--text-muted));
  pointer-events: none;
}
.ui-content-loading__label .shiny-text {
  color: color-mix(in srgb, var(--accent) 48%, var(--text-muted));
  background-image: linear-gradient(
    105deg,
    color-mix(in srgb, var(--accent) 42%, var(--text-muted)) 20%,
    color-mix(in srgb, var(--accent-soft) 35%, var(--text-muted)) 42%,
    color-mix(in srgb, var(--accent) 55%, var(--text-muted)) 54%,
    color-mix(in srgb, var(--accent) 42%, var(--text-muted)) 78%
  );
}
.ui-content-loading__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  background: color-mix(in srgb, var(--accent) 42%, var(--surface-raised));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 65%, transparent);
  animation: ui-content-loading-pulse 1.4s ease-in-out infinite;
}
.ui-content-loading__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.ui-content-loading--cards .ui-content-loading__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, 16px);
  align-items: stretch;
}
.ui-content-loading--table {
  flex: none;
  align-self: stretch;
}
.ui-content-loading--table .ui-content-loading__motion,
.ui-content-loading--table .ui-content-loading__body {
  flex: none;
}
.ui-content-loading--table .ui-content-loading__body {
  overflow: hidden;
  background: var(--surface-raised);
}
.ui-content-loading--list .ui-content-loading__body {
  display: grid;
}
.ui-content-loading--list .ui-row-skeleton {
  padding: 10px 2px;
}
.ui-content-loading--block .ui-content-loading__body,
.ui-content-loading--chart .ui-content-loading__body,
.ui-content-loading--kpi .ui-content-loading__body {
  display: flex;
  flex-direction: column;
}
.ui-content-loading.ui-content-loading--kpis {
  display: grid;
  flex: none;
  min-height: 0;
  position: relative;
}
.ui-content-loading--kpis > .ui-content-loading__overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ui-content-loading--kpis .ui-content-loading__label {
  top: 8px;
  right: 8px;
}
.ui-content-loading__kpi {
  display: grid;
  gap: 8px;
  align-content: start;
}
.ui-content-loading__block {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  align-content: start;
}
.ui-content-loading__bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  width: 100%;
  height: 132px;
  min-height: 132px;
}
.ui-content-loading__bars .ui-skeleton-box {
  width: 100%;
  align-self: end;
}
@keyframes ui-content-loading-scan {
  from { transform: translateX(0); }
  to { transform: translateX(340%); }
}
@keyframes ui-content-loading-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1); }
}

.ui-text-link {
  color: var(--accent-dark);
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .2s ease;
  margin-left: 3px;
}
.ui-text-link:hover { color: var(--accent); text-decoration: underline; }
.ui-text-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }

.ui-copy-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: color .2s ease;
}
.ui-copy-pill:hover { color: var(--accent-dark); }
.ui-copy-pill:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }

.ui-nav-toggle {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  transition: color .2s ease;
}
.ui-nav-toggle:hover { color: var(--accent-dark); }
.ui-nav-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }

.ui-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.ui-brand:hover { color: var(--accent-dark); }
.ui-brand img,
.ui-brand__mark {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  background: var(--surface-raised);
}
.ui-brand img { object-fit: contain; background: transparent; border-radius: 0; }
.ui-brand__mark { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.ui-brand__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }

.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.ui-hl { color: var(--accent-dark); font-weight: 700; }

.ui-verified {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  vertical-align: middle;
}

.ui-media-fallback {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 16 / 10;
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  background: var(--surface-muted);
}

.ui-media-fallback__art {
  width: 72px;
  height: auto;
}

.ui-choice,
.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: color .2s ease;
}
.ui-choice input { width: 18px; height: 18px; accent-color: var(--accent-action); }
.ui-choice:hover:not(:has(input:disabled)),
.ui-switch:hover:not(:has(input:disabled)) { color: var(--accent-dark); }
.ui-choice:has(input:disabled),
.ui-switch:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.ui-switch { position: relative; gap: 9px; }
.ui-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ui-switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  transition: background .2s ease;
}
.ui-switch__track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  content: '';
  transition: transform .2s ease;
}
.ui-switch input:checked + .ui-switch__track { background: var(--accent-action); }
.ui-switch input:checked + .ui-switch__track::after { transform: translateX(20px); }
.ui-switch input:focus-visible + .ui-switch__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.ui-switch input:disabled + .ui-switch__track { opacity: .5; }

.ui-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}
.ui-status-badge--neutral { color: var(--text-muted); background: var(--surface-muted); }
.ui-status-badge--info { color: var(--info); background: var(--info-soft); }
.ui-status-badge--success { color: var(--success); background: var(--success-soft); }
.ui-status-badge--warning { color: var(--warning); background: var(--warning-soft); }
.ui-status-badge--danger { color: var(--danger); background: var(--danger-soft); }

.ui-side-nav {
  width: 70px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--text);
  background: color-mix(in srgb, var(--text) 88%, transparent);
  color: var(--surface-raised);
  border-radius: var(--radius-lg);
  backdrop-filter: saturate(180%) blur(20px);
}
.ui-side-nav__logo {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--surface-raised);
}
.ui-nav-link {
  writing-mode: vertical-rl;
  letter-spacing: .12em;
  font-family: var(--font-display);
  font-size: .8rem;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  opacity: .72;
}
.ui-nav-link.is-active {
  opacity: 1;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-pill);
  padding: 12px 6px;
}

.ui-footer {
  background: var(--text);
  color: color-mix(in srgb, var(--surface-raised) 62%, transparent);
  padding: 40px 24px 24px;
  border-radius: 0;
}
.ui-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
}
.ui-footer__col h5 { color: var(--surface-raised); margin: 0 0 10px; font-family: var(--font-display); }
.ui-footer__bottom { margin-top: 24px; font-size: 12px; }

.ui-portrait-card,
.ui-wide-card {
  display: grid;
  width: 100%;
  padding: 0;
  text-align: left;
  color: inherit;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ui-portrait-card:hover,
.ui-wide-card:hover { transform: translateY(-3px); }
.ui-portrait-card__cover { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-muted); }
.ui-portrait-card__cover .forum-cover,
.ui-portrait-card__cover img,
.ui-portrait-card__cover .glare-hover,
.ui-wide-card__cover img,
.ui-wide-card__cover .forum-cover,
.ui-wide-card__cover .glare-hover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-portrait-card__cover .forum-cover,
.ui-wide-card__cover .forum-cover { aspect-ratio: auto; }
.ui-portrait-card__copy { padding: 14px 16px 18px; }
.ui-portrait-card__copy h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.ui-portrait-card__count { margin: 4px 0 6px; color: var(--accent-dark); font-size: 13px; font-weight: 600; }
.ui-portrait-card__copy p { margin: 0; color: var(--text-muted); font-size: 13px; }

.ui-wide-card__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-muted); }
.ui-wide-card__tag { position: absolute; top: 10px; left: 10px; }
.ui-wide-card__body { padding: 14px 16px 16px; }
.ui-wide-card__body h3 { margin: 0; font-family: var(--font-display); }
.ui-wide-card__kicker { margin-top: 2px; color: var(--accent-dark); font-size: 12px; font-weight: 700; }
.ui-wide-card__body p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ui-wide-card__meta { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }

.ui-content-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ui-content-card:hover { transform: translateY(-2px); }
.ui-content-card + .ui-content-card { margin-top: 16px; }
.ui-content-card h3 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
}
.ui-content-card__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
}

.ui-accent-card {
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--accent-card-from) 0%, var(--accent) 45%, var(--accent-card-to) 100%);
  color: var(--accent-ink);
  text-align: center;
  padding: 32px 24px;
}
.ui-accent-card h3 { margin: 0 0 8px; font-family: var(--font-display); }
.ui-accent-card p { margin: 0; opacity: .92; }

.ui-list-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow);
}
.ui-list-card h4 { margin: 0 0 12px; font-family: var(--font-display); }
.ui-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ui-list-item:hover,
.ui-list-item.is-active { background: var(--accent-soft); }
.ui-list-item__text { display: grid; min-width: 0; }
.ui-list-item__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.ui-list-item__sub { font-size: 12px; color: var(--text-muted); }

.ui-feed-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ui-feed-card:hover { transform: translateY(-2px); }
.ui-feed-card__head { display: flex; align-items: center; gap: 12px; }
.ui-feed-card__name { font-family: var(--font-display); font-weight: 700; }
.ui-feed-card__time { font-size: 12px; color: var(--text-muted); }
.ui-feed-card__tag { margin-left: auto; }
.ui-feed-card__body { margin-top: 12px; font-size: 14px; }
.ui-feed-card.is-interactive { cursor: pointer; }
.ui-feed-card__media .forum-cover,
.ui-feed-card__media img,
.ui-feed-card__media .glare-hover {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  overflow: hidden;
}
.ui-feed-card.is-mobile {
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
}
.ui-feed-card.is-mobile .ui-feed-card__media {
  order: -1;
  margin: 0 0 12px;
}
.ui-feed-card.is-mobile .ui-feed-card__media .forum-cover,
.ui-feed-card.is-mobile .ui-feed-card__media img,
.ui-feed-card.is-mobile .ui-feed-card__media .glare-hover {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  aspect-ratio: 16 / 9;
}
.ui-feed-card.is-mobile .ui-feed-card__head,
.ui-feed-card.is-mobile .ui-feed-card__body,
.ui-feed-card.is-mobile .ui-feed-card__foot {
  padding-left: 16px;
  padding-right: 16px;
}
.ui-feed-card__body .ui-type { margin: 0; }
.ui-feed-card__body .ui-type--title { margin-bottom: 6px; }
.ui-feed-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ui-feed-card__actions { display: flex; gap: 4px; margin-left: auto; }
.ui-feed-action {
  min-width: 4.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ui-feed-action:hover,
.ui-feed-action.is-active { background: var(--accent-soft); color: var(--accent-dark); }

.ui-steps { display: flex; flex-direction: column; }
.ui-step { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.ui-step:last-child { padding-bottom: 0; }
.ui-step::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(var(--accent) 0 6px, transparent 6px 12px);
}
.ui-step:last-child::before { display: none; }
.ui-step__num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.ui-step h5 { margin: 0; font-family: var(--font-display); }
.ui-step p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

.ui-accordion__item { border-bottom: 1px solid var(--line); }
.ui-accordion__item:last-child { border-bottom: 0; }
.ui-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ui-accordion__arr { color: var(--accent-dark); transition: transform .3s ease; }
.ui-accordion__item.is-open .ui-accordion__arr { transform: rotate(180deg); }
.ui-accordion__a { overflow: hidden; font-size: 14px; color: var(--text-muted); }
.ui-accordion__a > * { margin: 0; padding: 0 2px 14px; }

.ui-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 12px;
}
.ui-banner__stage {
  position: relative;
  min-height: clamp(320px, 42vw, 520px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-muted);
}
.ui-banner__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.ui-banner__slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.ui-banner__slide .forum-cover,
.ui-banner__slide img { width: 100%; height: 100%; object-fit: cover; }
.ui-banner__cap {
  position: absolute;
  top: auto; right: 0; bottom: 0; left: 0; inset: auto 0 0;
  padding: 40px 24px 20px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--text) 72%, transparent));
  color: var(--surface-raised);
  text-align: center;
}
.ui-banner__cap h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display-xl);
  font-weight: 600;
  letter-spacing: var(--type-tracking-display);
  line-height: var(--type-leading-title);
}
.ui-banner__cap p {
  margin: 8px 0 0;
  font-size: var(--type-body-s);
  opacity: .9;
}
.ui-banner__thumbs { display: flex; flex-direction: column; gap: 8px; }
.ui-banner__thumbs button {
  flex: 1;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-xs);
  overflow: hidden;
  cursor: pointer;
  opacity: .72;
}
.ui-banner__thumbs button.is-active { opacity: 1; border-color: var(--accent); }
.ui-banner__thumbs .forum-cover,
.ui-banner__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-banner--dots { display: block; }
.ui-banner--dots .ui-banner__stage { min-height: 0; touch-action: pan-y; }
.ui-banner--dots .ui-banner__track {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ui-banner--dots .ui-banner__track.is-dragging,
.ui-banner--dots .ui-banner__track.is-instant { transition: none; }
.ui-banner--dots .ui-banner__slide {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  transition: none;
}
.ui-banner--dots .ui-banner__slide.is-active { z-index: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .ui-banner--dots .ui-banner__track { transition: none; }
}
.ui-banner__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.ui-banner__dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.ui-banner__dots button.is-active { background: var(--accent); }

.ui-page-hero {
  position: relative;
  min-height: 180px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.ui-page-hero__cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.ui-page-hero__cover .forum-cover,
.ui-page-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.ui-page-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--text) 78%, transparent) 0%, var(--hero-tint) 100%);
}
.ui-page-hero__inner { position: relative; z-index: 1; padding: 32px 36px; color: var(--surface-raised); }
.ui-page-hero__inner h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display-m);
  font-weight: 600;
  letter-spacing: var(--type-tracking-title);
  line-height: var(--type-leading-title);
}
.ui-page-hero__inner p {
  margin: 6px 0 0;
  font-size: var(--type-caption);
  letter-spacing: var(--type-tracking-kicker);
  text-transform: uppercase;
  opacity: .88;
}

.ui-state-panel {
  min-height: 190px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.ui-state-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 600;
  letter-spacing: var(--type-tracking-title);
}
.ui-state-panel p {
  margin: 0;
  max-width: 42ch;
  color: var(--text-muted);
  font-size: var(--type-body-s);
}
.ui-state-panel--error { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); background: var(--danger-soft); }
.ui-state-panel--offline { border-style: dashed; }
.ui-state-panel--restricted { background: var(--surface); }
.ui-state-panel--loading { justify-items: stretch; }
.ui-state-panel__art {
  width: 96px;
  height: 96px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.ui-state-panel__symbol {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
}

@media (max-width: 900px) {
  .ui-banner { grid-template-columns: 1fr; }
  .ui-banner__thumbs { flex-direction: row; min-height: 72px; height: 72px; }
  .ui-footer__grid { grid-template-columns: 1fr; }
}

.ui-showroom {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent;
  color: var(--text);
  padding: 24px 20px 80px;
  font-family: var(--font-family);
}
.ui-showroom__header {
  max-width: 1280px;
  margin: 0 auto 24px;
  padding: 18px 24px;
  background: var(--surface-raised);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ui-showroom__heading { display: flex; align-items: center; gap: 10px; }
.ui-showroom__title {
  margin: 0;
  font-size: var(--type-display-l);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--type-leading-title);
  font-family: var(--font-display);
}
.ui-showroom__lead {
  margin: 4px 0 0;
  font-size: var(--type-body-s);
  color: var(--text-muted);
  line-height: var(--type-leading-body);
}
.ui-showroom__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ui-showroom__viewports {
  display: flex;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  padding: 3px;
  border: 1px solid var(--line);
}
.ui-showroom__viewport {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
}
.ui-showroom__viewport.is-active { background: var(--surface-raised); }
.ui-showroom__body {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  transition: width .3s ease;
}
.ui-showroom__theme {
  padding: 18px 24px;
  background: var(--surface-raised);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.ui-showroom__reveal {
  display: grid;
  gap: 28px;
}

@media (hover: none) {
  .ui-hover-glow::before,
  .ui-btn.ui-hover-glow::after,
  .ui-icon-btn.ui-hover-glow::after {
    display: none;
  }
}

html[data-tablet] .ui-hover-glow::before,
html[data-tablet] .ui-btn.ui-hover-glow::after,
html[data-tablet] .ui-icon-btn.ui-hover-glow::after {
  display: none;
}

/* iPad 同时有触控和键鼠/触控板。悬停缩放、抬起、封面放大都关掉。 */
html[data-tablet] .ui-btn,
html[data-tablet] .ui-icon-btn,
html[data-tablet] .ui-poster-card,
html[data-tablet] .gcard,
html[data-tablet] .ui-media-card,
html[data-tablet] .ui-wide-card,
html[data-tablet] .ui-content-card,
html[data-tablet] .ui-feed-card,
html[data-tablet] .ui-portrait-card,
html[data-tablet] .ui-poster-card .forum-cover,
html[data-tablet] .gcard .forum-cover,
html[data-tablet] .ui-poster-card:hover,
html[data-tablet] .gcard:hover,
html[data-tablet] .ui-btn:hover,
html[data-tablet] .ui-icon-btn:hover,
html[data-tablet] .ui-poster-card:hover .forum-cover,
html[data-tablet] .gcard:hover .forum-cover,
html[data-tablet] .ui-media-card:hover,
html[data-tablet] .ui-wide-card:hover,
html[data-tablet] .ui-content-card:hover,
html[data-tablet] .ui-feed-card:hover,
html[data-tablet] .ui-media-card:hover .forum-cover,
html[data-tablet] .ui-media-card:hover img {
  transition: none;
  animation: none;
  transform: none;
}

html[data-tablet] .ui-poster-card__hover {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-btn,
  .ui-card--interactive,
  .ui-icon-btn,
  .ui-chip,
  .ui-modal,
  .ui-popover,
  .ui-bottomsheet,
  .ui-poster-card,
  .gcard,
  .ui-copy-pill,
  .ui-portrait-card,
  .ui-wide-card,
  .ui-media-card,
  .ui-feed-card,
  .ui-content-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .ui-hover-glow::before,
  .ui-btn.ui-hover-glow::after,
  .ui-icon-btn.ui-hover-glow::after {
    display: none !important;
  }
  .ui-skeleton-box::after,
  .ui-smart-img__loading::after,
  .ui-avatar.is-loading::after,
  .ui-content-loading__scan,
  .ui-content-loading__dot {
    animation: none !important;
  }
}

:root[data-reduced-motion] .ui-poster-card,
:root[data-reduced-motion] .gcard,
:root[data-reduced-motion] .ui-poster-card:hover,
:root[data-reduced-motion] .gcard:hover,
:root[data-reduced-motion] .ui-poster-card:hover .forum-cover,
:root[data-reduced-motion] .gcard:hover .forum-cover,
:root[data-reduced-motion] .ui-btn:hover,
:root[data-reduced-motion] .ui-icon-btn:hover,
:root[data-reduced-motion] .ui-portrait-card:hover,
:root[data-reduced-motion] .ui-wide-card:hover,
:root[data-reduced-motion] .ui-media-card:hover {
  transition: none !important;
  transform: none !important;
}

.ui-video-player {
  --video-brand: var(--accent);
  --video-bg: var(--surface);
  --video-border-radius: var(--radius-md);
  --video-font-family: var(--font-body);
  --video-focus-ring-color: var(--accent);
  --video-border: 1px solid var(--line);
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border-radius: var(--radius-md);
}
.ui-video-player media-player,
.ui-video-player .vds-player {
  width: 100%;
  height: 100%;
}
.ui-video-player video,
.ui-video-player .vds-poster,
.ui-video-player iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ui-video-player iframe {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  border: 0;
  display: block;
}
.ui-video-player--empty {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border: 1px dashed var(--line);
  font-size: 13px;
}
.ui-video-player--failed {
  display: grid;
  place-items: center;
  background: var(--surface-muted);
}
.ui-video-player--failed img {
  width: auto;
  height: 60%;
  object-fit: contain;
}

.ui-image-preview {
  --yarl__color_backdrop: color-mix(in srgb, var(--surface-dark) 88%, transparent);
  --yarl__color_button: var(--ink-on-image);
  --yarl__color_button_active: var(--accent);
  --yarl__color_button_disabled: color-mix(in srgb, var(--ink-on-image) 42%, transparent);
  --yarl__button_border_radius: var(--radius-pill);
  --yarl__slide_title_color: var(--ink-on-image);
  --yarl__slide_description_color: color-mix(in srgb, var(--ink-on-image) 78%, transparent);
  --yarl__thumbnails_thumbnail_border: color-mix(in srgb, var(--ink-on-image) 28%, transparent);
  --yarl__counter_color: var(--ink-on-image);
  --ui-image-preview-counter-width: calc(var(--space-8) * 3);
}

/* 页码与标题都在左上角，给标题让出计数器宽度。 */
.yarl__portal.ui-image-preview .yarl__counter {
  z-index: 1;
}
/* finite 预加载窗口会在两端留下空占位；藏掉以免 2 张图底部出现第 3 个可点缩略图。 */
.yarl__portal.ui-image-preview .yarl__thumbnails_thumbnail_placeholder {
  display: none;
}
/* 点选小图时不要把当前项滚到轨道中心，避免整排位移。 */
.yarl__portal.ui-image-preview .yarl__thumbnails_track {
  transform: none;
}
.yarl__portal.ui-image-preview .yarl__thumbnails_thumbnail_fadein,
.yarl__portal.ui-image-preview .yarl__thumbnails_thumbnail_fadeout {
  animation: none;
  opacity: 1;
}
/* 标题条改为占位，主图在标题下方排版，不再被标题盖住。
   每张幻灯片必须等宽：图片和标题的固有宽度会撑开 min-width:auto，
   轮播又是整条居中，当前张就会随前后内容左右挪动。 */
.yarl__portal.ui-image-preview .yarl__carousel {
  min-width: 0;
}
.yarl__portal.ui-image-preview .yarl__slide {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  box-sizing: border-box;
  /* 占位张原来带 16px 内边距，真实张被改成 0。两端宽度不同，居中的当前张就会偏到一边。 */
  padding: 0;
}
.yarl__portal.ui-image-preview .yarl__slide.yarl__flex_center {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}
.yarl__portal.ui-image-preview .yarl__slide_title_container {
  position: relative;
  inset: auto;
  flex: none;
  order: -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: var(--space-3);
  padding-inline-start: var(--ui-image-preview-counter-width);
  overflow: hidden;
}
.yarl__portal.ui-image-preview .yarl__slide_wrapper {
  flex: 1 1 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
}
.yarl__portal.ui-image-preview .yarl__slide_title {
  max-width: calc(100% - var(--yarl__toolbar_width, 0px) - var(--ui-image-preview-counter-width));
}

/* 滚轮缩放走 CSS 线性过渡；拖拽平移时关掉，避免跟手延迟。 */
.yarl__portal.ui-image-preview .yarl__slide_current .yarl__slide_wrapper {
  transition: transform var(--dur-fast) linear;
}
.yarl__portal.ui-image-preview .yarl__slide_current .yarl__slide_wrapper:active {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .yarl__portal.ui-image-preview .yarl__slide_current .yarl__slide_wrapper {
    transition: none;
  }
}

/* 全局 button:active { transform: translateY(1px) } 会盖掉翻页按钮的垂直居中。 */
.yarl__portal.ui-image-preview .yarl__button:active {
  transform: none;
}
.yarl__portal.ui-image-preview .yarl__navigation_prev:active,
.yarl__portal.ui-image-preview .yarl__navigation_next:active {
  transform: translateY(-50%);
}
[dir='rtl'] .yarl__portal.ui-image-preview .yarl__navigation_prev:active,
[dir='rtl'] .yarl__portal.ui-image-preview .yarl__navigation_next:active {
  transform: translateY(-50%) rotate(180deg);
}
:root {
  /* 栈内拉丁字体名仅作本机命中；工程不加载 Google Fonts 文件，避免额外字重请求。 */
  --font-family: Nunito, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-body: Nunito, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
  --font-display: Fredoka, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mark: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --type-display-xl: clamp(2rem, 5vw, 3.1rem);
  --type-display-l: clamp(2rem, 4.2vw, 2.75rem);
  --type-display-m: clamp(1.5rem, 2.4vw, 1.625rem);
  --type-title: 17px;
  --type-title-sm: 15px;
  --type-body: 17px;
  --type-body-s: 13px;
  --type-caption: 12px;
  --type-micro: 10px;
  --type-tracking-display: 0.06em;
  --type-tracking-title: 0.08em;
  --type-tracking-body: 0.01em;
  --type-tracking-kicker: 0.18em;
  --type-leading-title: 1.2;
  --type-leading-body: 1.55;
  --type-leading-tight: 1.35;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-1: 0 2px 8px color-mix(in srgb, var(--text) 4%, transparent);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 4px 16px color-mix(in srgb, var(--text) 6%, transparent);
  --shadow-5: var(--shadow);
  --shadow-7: 0 14px 32px rgba(0, 0, 0, 0.14);
  --shadow-7: 0 14px 32px color-mix(in srgb, var(--text) 14%, transparent);
  --shadow-9: 0 20px 50px rgba(0, 0, 0, 0.18);
  --shadow-9: 0 20px 50px color-mix(in srgb, var(--text) 18%, transparent);
  --ink: var(--text);
  --ink-mute: var(--text-muted);
  --ink-faint: var(--text-muted);
  --ink-faint: color-mix(in srgb, var(--text-muted) 72%, var(--surface));
  --ink-on-image: var(--surface-raised);
  --placeholder: var(--surface-muted);
  --console-thead: #f9f9f9;
  --surface-dark: var(--text);
  --surface-dark: color-mix(in srgb, var(--text) 88%, var(--surface));
  --bg: var(--surface);
  --bg-atmosphere: var(--surface);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 200ms;
  --dur: 220ms;
  --dur-mid: 300ms;
  --tag-code: #0e7490;
  --tag-code-soft: #ecfeff;
  --tag-tpl: #c2410c;
  --tag-tpl-soft: #fff7ed;
  --tag-plug: #6d28d9;
  --tag-plug-soft: #f5f3ff;
  --tag-ann: #b91c1c;
  --tag-ann-soft: #fef2f2;
  --tag-guide: #047857;
  --tag-guide-soft: #ecfdf5;
  --tag-out: #3730a3;
  --tag-out-soft: #eef2ff;
  --accent-deep: var(--accent-dark);
  --accent-wash: var(--accent-soft);
  --accent-card-from: var(--accent);
  --accent-card-from: color-mix(in srgb, var(--accent-hover) 72%, var(--surface-raised));
  --accent-card-to: var(--accent-dark);
  --hero-tint: transparent;
  --hero-tint: color-mix(in srgb, var(--accent) 42%, transparent);
  --scrollbar-size: 8px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--accent-dark);
  --scrollbar-thumb: color-mix(in srgb, var(--accent-dark) 82%, var(--surface-strong));
  --scrollbar-thumb-hover: var(--accent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent-dark) 70%, var(--accent));
  --scrollbar-thumb-active: var(--accent-dark);
  --scrollbar-thumb-active: color-mix(in srgb, var(--accent) 42%, var(--accent-dark));
  font-family: var(--font-family);
  color: var(--text);
  background: var(--surface);
  font-synthesis: style;
  text-rendering: optimizeLegibility;
}

:root, :root[data-theme='default'] {
  --surface: #f2f2f2;
  --surface-raised: #ffffff;
  --surface-muted: #e8e8ed;
  --surface-strong: #d2d2d7;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.09);
  --line-hover: rgba(0, 0, 0, 0.16);
  --accent: #e8b923;
  --accent-action: #e8b923;
  --accent-hover: #f0c84a;
  --accent-dark: #8a6700;
  --accent-soft: rgba(232, 185, 35, 0.18);
  --accent-ink: #1a1408;
  --danger: #a92f43;
  --danger-soft: #fff0ee;
  --warning: #8a5a00;
  --warning-soft: #fff5d6;
  --info: #175cd3;
  --info-soft: #edf4ff;
  --success: #19704e;
  --success-soft: #e9f7ef;
  --radius-card: 14px;
  --radius-control: 8px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 980px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 10px;
  --space-6: 24px;
  --space-8: 32px;
  --shadow: 0 12px 34px rgba(74, 56, 0, 0.09);
  --spotlight-color: rgba(232, 185, 35, 0.16);
  --cover-1: linear-gradient(135deg, #E8E8ED, #D2D2D7 60%, #A1A1A6);
  --cover-2: linear-gradient(135deg, #C9D6E3, #9FB3C8 60%, #6B7F95);
  --cover-3: linear-gradient(135deg, #E3D3DC, #C0A2B4 60%, #8E6E82);
  --cover-4: linear-gradient(135deg, #D7E0CE, #A9BC9A 60%, #7B9068);
  --cover-5: linear-gradient(135deg, #E5DCC9, #BFAE8E 60%, #8C7B5C);
}

:root[data-theme='current'] {
  --surface: #f4f7fb;
  --surface-raised: #fbfcfe;
  --surface-muted: #e9eef5;
  --surface-strong: #dbe4ef;
  --text: #1c2838;
  --text-muted: #657286;
  --line: #d4dde8;
  --line-hover: #b8c6d8;
  --accent: #276ff1;
  --accent-action: #2468e3;
  --accent-hover: #1456c5;
  --accent-dark: #1456c5;
  --accent-soft: #e5edff;
  --accent-ink: #f7f9ff;
  --danger: #b43b4d;
  --danger-soft: #fee2e2;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --success: #247653;
  --success-soft: #dcfce7;
  --radius-card: 8px;
  --radius-control: 4px;
  --radius-xl: 18px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --radius-xs: 4px;
  --radius-pill: 980px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 10px;
  --space-6: 24px;
  --space-8: 32px;
  --shadow: 0 14px 38px rgba(38, 67, 104, 0.09);
  --spotlight-color: rgba(39, 111, 241, 0.16);
  --cover-1: linear-gradient(135deg, #E8E8ED, #D2D2D7 60%, #A1A1A6);
  --cover-2: linear-gradient(135deg, #C9D6E3, #9FB3C8 60%, #6B7F95);
  --cover-3: linear-gradient(135deg, #E3D3DC, #C0A2B4 60%, #8E6E82);
  --cover-4: linear-gradient(135deg, #D7E0CE, #A9BC9A 60%, #7B9068);
  --cover-5: linear-gradient(135deg, #E5DCC9, #BFAE8E 60%, #8C7B5C);
}

* { box-sizing: border-box; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
  background: transparent;
}

*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner {
  background: transparent;
  border: 0;
  box-shadow: none;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border: 0;
  border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}
/* 部分旧手机不认 scrollbar-width，也不认滚动条伪元素里的变量。
   一旦写了 ::-webkit-scrollbar，系统覆盖式细条会变成经典粗条。
   /m 改回系统滚动条：宽度写 0，并关掉稳定槽位。 */
html[data-boot-surface='mobile'],
html[data-boot-surface='mobile'] body,
html[data-boot-surface='mobile'] * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html[data-boot-surface='mobile']::-webkit-scrollbar,
html[data-boot-surface='mobile'] *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
html[data-boot-surface='mobile'] .bbs-col {
  scrollbar-gutter: auto;
}
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
html { min-width: 320px; background: var(--surface); }

/* iPad 与 /m：禁止捏合/双击缩放和长按选中。输入框、编辑器仍要能打字。
   捏合靠 viewport + gesture*，不要给 html 写 touch-action：旧 WebKit 会把它和
   祖先相交，html overflow:hidden 时 .bbs-col / 文档都滑不动。
   也不要把 user-select:none 打在 html/body/#root 和滚动容器上。 */
html[data-tablet],
html[data-boot-surface='mobile'] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-touch-callout: none;
}
html[data-tablet] *,
html[data-boot-surface='mobile'] * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
html[data-tablet] body,
html[data-tablet] #root,
html[data-tablet] .bbs-col,
html[data-tablet] .ui-modal,
html[data-tablet] .ui-popover,
html[data-tablet] .ui-card__body,
html[data-boot-surface='mobile'] body,
html[data-boot-surface='mobile'] #root,
html[data-boot-surface='mobile'] .forum-mobile,
html[data-boot-surface='mobile'] .forum-mobile__main,
html[data-boot-surface='mobile'] .ui-modal,
html[data-boot-surface='mobile'] .ui-popover,
html[data-boot-surface='mobile'] .ui-card__body {
  -webkit-user-select: auto !important;
  user-select: auto !important;
  -webkit-overflow-scrolling: touch;
}
html[data-tablet] input,
html[data-tablet] textarea,
html[data-tablet] select,
html[data-tablet] [contenteditable],
html[data-tablet] [contenteditable] *,
html[data-boot-surface='mobile'] input,
html[data-boot-surface='mobile'] textarea,
html[data-boot-surface='mobile'] select,
html[data-boot-surface='mobile'] [contenteditable],
html[data-boot-surface='mobile'] [contenteditable] * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}
html.org-box-host {
  --org-box-system-bar: 0px;
  /* 视口画布也用页面底色：顶部系统栏遮罩之外不再透出 App 窗口颜色。 */
  background: var(--surface);
}
html.org-box-host::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
  height: var(--org-box-system-bar);
  background: var(--surface);
  pointer-events: none;
}
html.org-box-host, html.org-box-host body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
html.org-box-host #root {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-top: var(--org-box-system-bar);
  box-sizing: border-box;
}

/* 手机：窗口贴可视区域，滚动只发生在 #root，避免橡皮筋把内容拖出窗口。
   高度跟 visualViewport；位置不要跟 offsetTop，否则键盘把页面顶上去时整页会被拖出窗口。 */
html[data-boot-surface='mobile'] {
  width: 100%;
  height: 100%;
  height: 100dvh;
  height: var(--mobile-window-h, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-boot-surface='mobile'] body {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: var(--mobile-window-h, 100%);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-boot-surface='mobile'] #root {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html[data-boot-surface='mobile'][data-forum-lock='player'] #root {
  overflow: hidden;
}
html[data-boot-surface='mobile'] .app-boot-shell,
html[data-boot-surface='mobile'] .app-shell {
  min-height: 100%;
}
html.org-box-host[data-boot-surface='mobile'],
html.org-box-host[data-boot-surface='mobile'] body {
  height: 100%;
  height: var(--mobile-window-h, 100%);
  overflow: hidden;
}
html.org-box-host[data-boot-surface='mobile'] #root {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.org-box-host[data-boot-surface='mobile'][data-forum-lock='player'] #root {
  overflow: hidden;
}
/* 弹窗、下拉打开时不要带动 #root。旧 Safari 没有 overscroll-behavior，锁滚动条再由脚本拦住越界触摸。 */
html[data-boot-surface='mobile'][data-overlay-lock] #root,
html.org-box-host[data-boot-surface='mobile'][data-overlay-lock] #root,
html.applite-host[data-overlay-lock] #root {
  overflow: hidden;
}

/* AppLite：安全区只在 body 上缩进一次。页内再加 env(safe-area-inset-*) 会把顶栏推得离屏幕顶过远。 */
html.applite-host {
  /* body 按安全区缩进后，露出的顶底条用页面底色，不透出壳窗口颜色。 */
  background: var(--surface);
}
html.applite-host,
html.applite-host body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html.applite-host body,
html.applite-host[data-boot-surface='mobile'] body {
  position: fixed;
  top: var(--app-safe-top, env(safe-area-inset-top, 0px));
  right: var(--app-safe-right, env(safe-area-inset-right, 0px));
  bottom: var(--app-safe-bottom, env(safe-area-inset-bottom, 0px));
  left: var(--app-safe-left, env(safe-area-inset-left, 0px));
  width: auto;
  height: auto;
  margin: 0;
  transform: translateZ(0);
}
/* 播放页铺满整屏。退出时壳层去掉 data-forum-lock，安全区缩进和遮罩一起恢复。 */
html.applite-host[data-forum-lock='player'] body,
html.applite-host[data-boot-surface='mobile'][data-forum-lock='player'] body {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
html.applite-host[data-forum-lock='player']::before,
html.applite-host[data-forum-lock='player']::after {
  display: none;
}
html.applite-host::before,
html.applite-host::after {
  content: '';
  position: fixed;
  z-index: 80;
  right: 0;
  left: 0;
  background: var(--surface);
  pointer-events: none;
}
html.applite-host::before {
  top: 0;
  height: var(--app-safe-top, env(safe-area-inset-top, 0px));
}
html.applite-host::after {
  bottom: 0;
  height: var(--app-safe-bottom, env(safe-area-inset-bottom, 0px));
}
html.applite-host #root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
html.applite-host[data-forum-lock='player'] #root,
html.applite-host[data-boot-surface='mobile'][data-forum-lock='player'] #root {
  overflow: hidden;
}
html.org-box-host .app-shell {
  min-height: calc(100vh - var(--org-box-system-bar));
  min-height: calc(100dvh - var(--org-box-system-bar));
}
html.org-box-host[data-boot-surface='mobile'] .app-shell {
  min-height: 100%;
}
html.org-box-host .mobile-topbar {
  top: var(--org-box-system-bar);
}
html.org-box-host .mobile-topbar {
  height: 58px;
  padding-top: 0;
}
body { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; background: var(--surface); color: var(--text); font-family: var(--font-body, var(--font-family)); font-size: var(--type-body, 17px); line-height: var(--type-leading-body, 1.55); letter-spacing: var(--type-tracking-body, 0.01em); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
button:active { transform: translateY(1px); }
img { display: block; max-width: 100%; }

.app-shell { min-height: 100vh; min-height: 100dvh; background:
  radial-gradient(1100px 480px at 88% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
  radial-gradient(880px 420px at -12% 14%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 56%),
  var(--surface);
  background-attachment: fixed;
}
.shimmer-skeleton { width: min(720px, calc(100% - 32px)); display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.shimmer-skeleton i { position: relative; min-height: 210px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-muted); }
.shimmer-skeleton i:first-child { grid-row: span 2; }
.shimmer-skeleton i:not(:first-child) { min-height: 96px; }
.shimmer-skeleton i::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; content: ''; background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--surface-raised) 72%, transparent) 47%, transparent 66%); transform: translateX(-110%); animation: skeleton-shimmer 1.35s ease-in-out infinite; }
.shimmer-skeleton.compact { width: min(390px, calc(100% - 28px)); grid-template-columns: 1fr; }
.shimmer-skeleton.compact i { min-height: 74px; }
.shimmer-skeleton.compact i:first-child { min-height: 150px; grid-row: auto; }
@keyframes skeleton-shimmer { to { transform: translateX(110%); } }
.brand, .mobile-tabbar button, .mobile-topbar button { border: 0; background: transparent; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; white-space: nowrap; }
.brand img { width: 34px; height: 34px; display: block; flex: none; object-fit: contain; }
.brand strong { font-size: 17px; }
.shiny-text { display: inline-block; color: var(--accent); background: linear-gradient(105deg, var(--accent) 20%, color-mix(in srgb, var(--accent) 25%, var(--text)) 42%, var(--accent-dark) 54%, var(--accent) 78%); background-size: 230% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shiny-text-pass 4.8s ease-in-out infinite; }
@keyframes shiny-text-pass { 0%, 24% { background-position: 100% 0; } 55%, 100% { background-position: -110% 0; } }
.blur-word { display: inline-block; }
.star-border-button { position: relative; isolation: isolate; min-height: 46px; overflow: hidden; padding: 1px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--accent-ink); cursor: pointer; transition: transform .2s ease; }
.star-border-button::before { position: absolute; z-index: -2; width: 220%; aspect-ratio: 1; top: 50%; left: 50%; content: ''; background: conic-gradient(from 90deg, transparent 0 35%, color-mix(in srgb, var(--accent) 35%, #f7f9ff) 47%, transparent 59% 100%); transform: translate(-50%, -50%) rotate(0deg); animation: star-border-spin 4.5s linear infinite; }
.star-border-button::after { position: absolute; z-index: -1; inset: 1px; border-radius: calc(var(--radius-pill) - 1px); background: var(--accent-action); content: ''; transition: background .2s ease; }
.star-border-button:hover { transform: scale(1.02); }
/* 底色只画在 ::after 上，还用了 inset。iPad 不画这块，发帖按钮就只剩文字。 */
html[data-tablet] .star-border-button {
  background: var(--accent-action);
  -webkit-appearance: none;
  appearance: none;
}
html[data-tablet] .star-border-button::after {
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
}
html[data-tablet] .star-border-button:hover,
html[data-tablet] .star-border-button:active {
  background: var(--accent-hover);
  transform: none;
}
.star-border-button:hover::after { background: var(--accent-hover); }
.star-border-button > span { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; font-weight: 800; white-space: nowrap; }
@keyframes star-border-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.unread-dot { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.unread-dot__mark { position: relative; flex: none; width: 8px; height: 8px; }
.unread-dot__core { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface-raised); }
.unread-dot__pulse { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; border-radius: 50%; background: var(--accent); animation: unread-dot-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.unread-dot--ink .unread-dot__core, .unread-dot--ink .unread-dot__pulse { background: var(--text); }
.unsaved-draft-btn .unsaved-draft-dot { margin-left: 2px; }
@keyframes unread-dot-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.unread-dot__pulse { animation: none; opacity: 0; }
}
.unread-dot__count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--text); color: var(--surface-raised); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.spotlight-card { position: relative; overflow: hidden; }
.spotlight-card::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0; pointer-events: none; content: ''; opacity: 0; background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spot-color), transparent 68%); transition: opacity .25s ease; }
.spotlight-card:hover::before { opacity: 1; }
.spotlight-card > * { position: relative; z-index: 1; }
.feed-card { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; min-height: 240px; margin-bottom: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.feed-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: var(--shadow); }
.feed-card.interactive { cursor: pointer; }
.feed-card__media { min-width: 0; height: 100%; min-height: 194px; border-radius: 10px; }
.feed-card__media img { width: 100%; height: 100%; min-height: 194px; object-fit: cover; border-radius: inherit; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.feed-card:hover .feed-card__media img { transform: scale(1.025); }
.glare-hover { position: relative; overflow: hidden; isolation: isolate; }
.glare-hover::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 2; pointer-events: none; content: ''; opacity: 0; background: radial-gradient(240px circle at var(--glare-x, 50%) var(--glare-y, 50%), var(--glare-color), transparent 62%); mix-blend-mode: soft-light; transition: opacity .25s ease; }
.glare-hover:hover::after { opacity: 1; }
html[data-tablet] .glare-hover::after {
  content: none;
  display: none;
}
.click-burst {
  position: fixed;
  z-index: 100000;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
}
.click-burst i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-delay: var(--delay, 0ms);
}
.click-burst__meteor {
  width: 46px;
  height: 2px;
  margin-left: -3px;
  margin-top: -1px;
  border-radius: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--burst-color), #fff);
  box-shadow: 0 0 6px color-mix(in srgb, var(--burst-color) 70%, #fff);
  animation-name: click-burst-meteor;
  animation-duration: 1.35s;
  animation-timing-function: linear;
}
.click-burst__bit,
.click-burst__bloom {
  width: var(--size, 5px);
  height: var(--size, 5px);
  margin: calc(var(--size, 5px) / -2);
  background: var(--burst-color);
  animation-name: click-burst-confetti;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
.click-burst__bloom {
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  box-shadow:
    3px 0 0 color-mix(in srgb, var(--burst-color) 80%, #fff),
    -3px 0 0 color-mix(in srgb, var(--burst-color) 80%, #fff),
    0 3px 0 color-mix(in srgb, var(--burst-color) 80%, #fff),
    0 -3px 0 color-mix(in srgb, var(--burst-color) 80%, #fff);
}
.click-burst__bolt {
  width: 16px;
  height: 32px;
  margin: -16px -8px;
  color: var(--burst-color);
  filter: drop-shadow(0 0 5px var(--burst-color));
  animation-name: click-burst-bolt;
  animation-duration: 1.3s;
  animation-timing-function: ease-in;
}
.click-burst__bolt svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.click-burst__petal {
  width: 9px;
  height: 13px;
  margin: -7px -5px;
  border-radius: 80% 0 70% 40%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--burst-color) 35%, #fff), var(--burst-color));
  box-shadow: 0 0 4px color-mix(in srgb, var(--burst-color) 45%, transparent);
  animation-name: click-burst-petal;
  animation-duration: 1.75s;
  animation-timing-function: ease-in;
}
@keyframes click-burst-meteor {
  0% { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(var(--rot)) translateX(0) scaleX(.4); }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--rot)) translateX(var(--dist)) scaleX(1); }
}
@keyframes click-burst-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
}
@keyframes click-burst-bolt {
  0% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--rot)) scale(calc(var(--scale) * .55)); }
  18% { opacity: 1; transform: translate(var(--ox), calc(var(--oy) + var(--fall) * .35)) rotate(var(--rot)) scale(calc(var(--scale) * 1.04)); }
  36% { opacity: .25; }
  52% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ox), calc(var(--oy) + var(--fall))) rotate(var(--rot)) scale(var(--scale)); }
}
@keyframes click-burst-petal {
  0% { opacity: 1; transform: translate(var(--ox), var(--oy)) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(calc(var(--ox) + var(--dx)), calc(var(--oy) + var(--fall))) rotate(calc(var(--rot) + var(--spin))); }
}
.specular-button {
  --sb-radius: var(--radius-control);
  --sb-tint: #ffffff;
  --sb-tint-opacity: 0;
  --sb-blur: 0px;
  --sb-text-color: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--sb-radius);
  background: color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent);
  color: var(--sb-text-color);
  font: inherit;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  outline: none;
  overflow: visible;
}
.specular-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
}
.specular-button:disabled { opacity: .55; cursor: default; }
.specular-button__fx { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.specular-button__fx canvas { display: block; width: 100%; height: 100%; }
.specular-button__label { position: relative; z-index: 2; }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--surface-strong); color: var(--accent-dark); font-weight: 700; }
.avatar.large { width: 46px; height: 46px; }
.level-badge { margin-top: auto; display: grid; gap: 6px; }
.level-badge strong { color: var(--accent); font-size: 12px; }
.level-badge > span { width: 100%; height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-strong); }
.level-badge > span i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.level-badge.compact { margin-left: auto; }
.feed-card h2 { margin: 18px 0 8px; font-size: 23px; line-height: 1.3; letter-spacing: -.025em; }
.feed-card p { margin: 0; color: var(--text-muted); line-height: 1.68; }
.post-preview__tags span { padding: 4px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; }
.empty-state { padding: 60px 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-card); color: var(--text-muted); }
.empty-state h2 { color: var(--text); }
.segmented-control { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-muted); }
.segmented-control button { min-height: 35px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.segmented-control button.active { background: var(--surface-raised); color: var(--text); box-shadow: 0 3px 12px rgba(28, 49, 77, .08); }
.field { position: relative; display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--text); }
.field input, .field select { height: 44px; padding: 0 12px; }
.field textarea { padding: 11px 12px; resize: vertical; line-height: 1.6; }
.field small { position: absolute; right: 10px; bottom: 9px; color: var(--text-muted); font-size: 11px; }
.editor-heading { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.editor-heading > div { display: grid; gap: 3px; }
.editor-heading strong { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.editor-heading > span { display: flex; align-items: center; gap: 5px; color: var(--success); font-size: 12px; }
.rich-editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: visible; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); transition: box-shadow .15s ease; }
.rich-editor:focus-within {
  outline: none;
  box-shadow: var(--shadow-1);
}
.rich-editor.loading { min-height: 260px; display: grid; place-items: center; color: var(--text-muted); }
.rich-editor__toolbar { position: relative; z-index: 3; flex: none; display: flex; flex-direction: column; gap: 0; padding: 4px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 78%, var(--surface-muted)); }
.rich-editor__toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; }
.rich-editor__toolbar button { min-width: 22px; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; }
.rich-editor__toolbar button:hover:not(:disabled), .rich-editor__toolbar button.active:not(:disabled) { border-color: var(--line); background: var(--surface-raised); color: var(--text); }
.rich-editor__toolbar button:disabled { opacity: .4; cursor: not-allowed; }
.rich-editor__toolbar button span { font-size: 10px; line-height: 1; }
.rich-editor__toolbar button .rich-editor__heading-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.rich-editor__toolbar button svg { width: 14px; height: 14px; }
.toolbar-spacer { flex: 1; }
.rich-editor__insert-bar {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
  height: auto;
  min-height: 0;
  padding: 8px 10px;
  overflow: visible;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  line-height: 0;
}
.rich-editor__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.rich-editor__insert-bar .ui-btn-magnet {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.rich-editor__insert-bar .ui-btn {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-family: var(--font-body);
  line-height: 0;
}
.rich-editor__insert-bar .ui-btn > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.rich-editor__insert-bar .ui-btn svg {
  display: block;
  flex-shrink: 0;
}
.rich-editor__insert-bar .ui-btn.is-pressed, .rich-editor__insert-bar .ui-btn[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.rich-editor__insert-chips { display: contents; }
.rich-editor__insert-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rich-editor--compose .rich-editor__chip[data-slot='emoji'] { order: 0; }
.rich-editor--compose .rich-editor__chip[data-slot='image'] { order: 1; }
.rich-editor--compose .rich-editor__chip[data-slot='link'] { order: 2; }
.rich-editor--compose .rich-editor__chip[data-slot='game'] { order: 3; }
.rich-editor--compose .rich-editor__chip[data-slot='blackout'] { order: 4; }
.rich-editor--compose .rich-editor__chip[data-slot='spoiler'] { order: 5; }
.rich-editor--compose .rich-editor__chip[data-slot='markdown'] { order: 6; }
.rich-editor--compose .rich-editor__chip[data-slot='html'] { order: 7; }
.rich-editor--compose .rich-editor__chip[data-slot='emoji-end'] { order: 8; }
.rich-editor--compose {
  position: relative;
  overflow: visible;
  border: 0;
}
.rich-editor--compose::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 9;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: inherit;
}
.rich-editor--compose .rich-editor__toolbar {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.rich-editor--compose .rich-editor__body, .rich-editor--compose .tiptap-surface {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.rich-editor__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.rich-editor:not(.rich-editor--reply) {
  max-height: calc(100vh - 13.75rem);
  max-height: calc(100dvh - 13.75rem);
}
.rich-editor--reply .rich-editor__body {
  max-height: 12.5rem;
}
/* 编辑 Markdown 源码时按内容撑开。只改 overflow 时，正文区 min-height:0 仍会被压扁，源码框画到后面的表单项上。 */
.rich-editor.is-markdown-source {
  max-height: none;
  min-height: auto;
  overflow: visible;
}
.rich-editor.is-markdown-source .rich-editor__body {
  flex: none;
  min-height: auto;
  max-height: none;
  overflow: visible;
}
.rich-editor.is-markdown-source .markdown-block {
  overflow: visible;
}
/* 预览块高过正文默认高度时，编辑器跟着变高，不再卡在视口上限里滚动。 */
.rich-editor.is-html-expanded {
  max-height: none;
}
.rich-editor.is-html-expanded .rich-editor__body {
  flex: none;
  min-height: auto;
  max-height: none;
  overflow: visible;
}
.rich-editor__popover {
  position: fixed;
  z-index: 100010;
  box-sizing: border-box;
  min-width: 280px;
  width: max-content;
  max-width: min(400px, calc(100vw - 16px));
  padding: 0;
  overflow: visible;
  isolation: isolate;
  opacity: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  background-color: var(--surface-raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 28px rgba(20, 28, 45, .14);
}
.rich-editor__popover::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--surface-raised);
  pointer-events: none;
}
.rich-editor__popover > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.rich-editor__popover-form {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  overflow: visible;
  border-radius: inherit;
  background: var(--surface-raised);
  background-color: var(--surface-raised);
}
.rich-editor__popover-form p, .rich-editor__popover-hint, .rich-editor__popover-form .ui-field__hint, .rich-editor__popover-form .ui-field__error {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.rich-editor__popover-form .ui-field__error { color: var(--danger); }
.rich-editor__popover-form .ui-field { margin: 0; min-width: 0; }
.rich-editor__shot-picks {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-muted);
}
.rich-editor__shot-picks-label { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.rich-editor__shot-picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 116px;
  gap: 8px;
  /* 最多 3 行，超出滚动。 */
  max-height: calc(3 * 116px + 2 * 8px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rich-editor__shot-picks button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface-raised);
  cursor: pointer;
}
.rich-editor__shot-picks button:disabled { cursor: default; opacity: 0.6; }
.rich-editor__shot-picks img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rich-editor__popover-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rich-editor .tiptap-surface { min-height: 330px; padding: 22px 24px 90px; outline: none; line-height: 1.45; background: var(--surface-raised); caret-color: var(--accent); }
/* 发帖编辑区跟详情预览同一套内边距和段距：.panel-b 18px，.article .tiptap-surface p 为 0 0 7px / 1.75。 */
.rich-editor:not(.rich-editor--reply) .tiptap-surface { padding: 18px; font-size: 15.5px; line-height: 1.65; }
.rich-editor .tiptap-surface > *:first-child, .post-preview .tiptap-surface > *:first-child { margin-top: 0; }
.rich-editor--reply .tiptap-surface p { margin: 4px 0; }
.rich-editor:not(.rich-editor--reply) .tiptap-surface p { margin: 0 0 7px; line-height: 1.75; }
.tiptap-surface h1 { margin: 28px 0 10px; font-size: 30px; line-height: 1.25; }
.tiptap-surface h2 { margin: 25px 0 9px; font-size: 24px; }
.tiptap-surface h3 { margin: 21px 0 7px; font-size: 19px; }
.tiptap-surface p { margin: 10px 0; }
.tiptap-surface em, .floor-rich-inline em { font-style: italic; }
.tiptap-surface blockquote {
  margin: 0 0 18px;
  padding: 3px 0 3px 14px;
  border-left: 3px solid var(--line);
  color: var(--text-muted);
}
.tiptap-surface blockquote > p { margin: 0; }
.rich-editor:not(.rich-editor--reply) .tiptap-surface blockquote > p,
.rich-editor--reply .tiptap-surface blockquote > p { margin: 0; }
.tiptap-surface aside[data-callout] { margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); }
.tiptap-surface details[data-spoiler], .rich-spoiler {
  display: block;
  margin: 12px 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--text) 6%, var(--surface-raised));
}
.rich-spoiler__summary, .rich-spoiler summary, .tiptap-surface details[data-spoiler] > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  list-style: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}
.rich-spoiler summary::-webkit-details-marker, .tiptap-surface details[data-spoiler] > summary::-webkit-details-marker { display: none; }
.rich-spoiler__icon, .rich-spoiler__chevron {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
}
.rich-spoiler__chevron { margin-left: auto; transition: transform .15s ease; }
.rich-spoiler--editable { position: relative; }
.rich-spoiler__remove-slot {
  position: absolute;
  top: 0;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 44px;
}
.rich-spoiler--editable > .rich-spoiler__summary { padding-right: 64px; }
.rich-spoiler__remove.ui-btn {
  min-height: 0;
  padding: 0 2px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}
.rich-spoiler__remove.ui-btn:hover {
  color: var(--text);
  background: transparent;
}
.rich-spoiler.is-open > .rich-spoiler__summary .rich-spoiler__chevron, .rich-spoiler[open] > summary .rich-spoiler__chevron, .tiptap-surface details[data-spoiler][open] > summary .rich-spoiler__chevron { transform: rotate(180deg); }
.rich-spoiler__title { min-width: 0; flex: 1; font-weight: 400; }
.rich-spoiler__body, .tiptap-surface details[data-spoiler] .rich-spoiler__body, .rich-editor .tiptap-surface .rich-spoiler__body {
  display: block;
  margin: 0;
  padding: 0 16px 14px;
  min-height: 2.4em;
  white-space: pre-wrap;
  caret-color: var(--accent);
  cursor: text;
}
/* 剧透正文是硬换行，不走 p。发帖编辑区和详情段落都是 1.75。 */
.rich-editor:not(.rich-editor--reply) .rich-spoiler__body,
.article .tiptap-surface .rich-spoiler__body {
  line-height: 1.75;
}
.rich-spoiler__body > [data-node-view-content-react] {
  display: block;
  min-height: 2.4em;
  outline: none;
}
.rich-spoiler:not(.is-open):not([open]) > .rich-spoiler__body {
  height: 0;
  min-height: 0;
  padding: 0 16px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.markdown-block {
  margin: 12px 0;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--surface-raised);
}
.markdown-block.ProseMirror-selectednode, .markdown-block:focus, .markdown-block:focus-visible {
  outline: none;
}
.markdown-block__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.markdown-block .ui-field {
  margin: 0;
  padding: 0;
}
.markdown-block .markdown-block__source {
  width: 100%;
  min-height: 8em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--type-body);
  line-height: var(--type-leading-body);
  resize: vertical;
}
.markdown-block .markdown-block__source:focus {
  border: 0;
  box-shadow: none;
}
.markdown-block__preview {
  color: var(--text);
  font-size: var(--type-body);
  line-height: var(--type-leading-body);
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.markdown-block__preview * {
  -webkit-user-select: text;
  user-select: text;
}
.markdown-block__preview > :first-child { margin-top: 0; }
.markdown-block__preview > :last-child { margin-bottom: 0; }
.markdown-block__preview h1, .markdown-block__preview h2, .markdown-block__preview h3, .markdown-block__preview h4 {
  margin: 18px 0 8px;
  font-weight: 600;
  line-height: var(--type-leading-title);
}
.markdown-block__preview h1 { font-size: 1.5em; }
.markdown-block__preview h2 { font-size: 1.25em; }
.markdown-block__preview h3 { font-size: 1.1em; }
.markdown-block__preview p, .markdown-block__preview ul, .markdown-block__preview ol { margin: 10px 0; }
.markdown-block__preview ul, .markdown-block__preview ol { padding-left: 1.4em; }
.markdown-block__preview blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line);
  color: var(--text-muted);
}
.markdown-block__preview code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.92em;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
}
.markdown-block__preview pre {
  margin: 12px 0;
  padding: 12px 14px;
  overflow: auto;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
}
.markdown-block__preview pre code {
  padding: 0;
  background: none;
}
.markdown-block__preview table {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
}
.markdown-block__preview th, .markdown-block__preview td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: start;
}
.markdown-block__preview th { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.markdown-block__preview a { color: var(--accent); }
.markdown-block__preview img { max-width: 100%; height: auto; }
.markdown-block__preview input[type='checkbox'] { margin-right: 6px; }
.markdown-block__excerpt { color: var(--text-muted); }
.tiptap-surface [data-blackout] { background: #111; color: #fff; border-radius: 2px; padding: 0 3px; cursor: help !important; }
.tiptap-surface.readonly [data-blackout] { color: #111; }
.tiptap-surface.readonly [data-blackout]:hover, .tiptap-surface.readonly [data-blackout]:focus-visible { color: #fff; outline: none; }
.tiptap-surface a, .tiptap-surface .rich-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.tiptap-surface .rich-link.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.rich-media-host { display: flex; justify-content: center; width: 100%; outline: none !important; }
.rich-editor--reply .rich-media-host, .floor-rich .rich-media-host, .floor-rich-inline .rich-media-host, .gcard-q-t .rich-media-host {
  width: max-content;
  max-width: 50%;
  margin-inline: 0;
  justify-content: flex-start;
}
.rich-editor--reply .rich-image-asset, .floor-rich .rich-image-asset, .floor-rich-inline .rich-image-asset, .gcard-q-t .rich-image-asset {
  width: auto !important;
  max-width: 100%;
  margin: 8px 0;
}
.rich-editor--reply .rich-image-asset img, .rich-editor--reply .rich-image-asset .rich-image-asset__btn, .floor-rich .rich-image-asset img, .floor-rich .rich-image-asset .rich-image-asset__btn, .floor-rich-inline .rich-image-asset img, .floor-rich-inline .rich-image-asset .rich-image-asset__btn, .gcard-q-t .rich-image-asset img, .gcard-q-t .rich-image-asset .rich-image-asset__btn {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: 0;
  object-fit: contain;
}
.tiptap-surface .rich-media-host.ProseMirror-selectednode { outline: none !important; }
.rich-media-host > :not(.rich-media) { display: none; }
.rich-media {
  display: block;
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  clear: both;
  box-sizing: border-box;
}
.rich-media__frame { position: relative; display: flex; justify-content: center; }
.rich-media.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.tiptap-surface.readonly {
  -webkit-user-select: text;
  user-select: text;
}
.tiptap-surface.readonly.floor-rich {
  min-height: 88px;
}
.tiptap-surface.readonly.floor-rich,
.tiptap-surface.readonly.floor-rich p,
.floor-rich-inline,
.rich-editor--reply .tiptap-surface,
.rich-editor--reply .tiptap-surface p {
  white-space: pre-wrap;
}
.tiptap-surface.readonly .ProseMirror-selectednode,
.tiptap-surface.readonly .is-selected,
.tiptap-surface.readonly .rich-media.is-selected,
.tiptap-surface.readonly .rich-link.is-selected,
.tiptap-surface.readonly .react-renderer.ProseMirror-selectednode,
.tiptap-surface.readonly .react-renderer.node-imageAsset.ProseMirror-selectednode,
.tiptap-surface.readonly .node-imageAsset.ProseMirror-selectednode {
  outline: none !important;
  box-shadow: none;
}
.tiptap-surface.readonly.ProseMirror-hideselection *::selection,
.tiptap-surface.readonly.ProseMirror-hideselection *::-moz-selection {
  background: Highlight;
  color: HighlightText;
}
.rich-media__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 2px 0 4px;
  background: var(--accent);
  cursor: nwse-resize;
}
.tiptap-surface.readonly .rich-media__resize { display: none; }
.html-block-host { display: block; margin: 8px 0; }
.html-block {
  --html-block-trim: 0px;
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}
.html-block.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.html-block__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.html-block__name,
.html-block__name-input {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-align: start;
}
button.html-block__name { cursor: text; }
.html-block__size {
  flex: none;
  color: var(--text-muted, #8e8e93);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.html-block__name.is-empty,
.html-block__name-input::placeholder { color: color-mix(in srgb, var(--text-muted) 62%, transparent); }
.html-block__name-input:focus,
.html-block__name-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.html-block__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.html-block__shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.html-block.is-resizing .html-block__shield {
  pointer-events: auto;
}
.html-block__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.html-block__frame.is-loading { visibility: hidden; }
.html-block__loading.ui-content-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  height: 100%;
  background: var(--surface);
  padding: 16px 18px;
}
.html-block.is-resizing .html-block__frame {
  pointer-events: none;
}
.html-block__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 2px 0 4px;
  background: var(--accent);
  cursor: nwse-resize;
}
.tiptap-surface.readonly .html-block__resize { display: none; }
.rich-media__name, .rich-media__name-input {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  text-align: center;
  box-shadow: none;
}
.rich-media__name--start, .rich-media__name-input.rich-media__name--start { text-align: start; width: auto; max-width: 100%; }
.rich-media__name { cursor: text; }
.rich-media__name-input, .rich-media__name-input:focus, .rich-media__name-input:focus-visible {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  outline: none;
  box-shadow: none;
}
.rich-video-asset { margin: 16px 0; }
.tiptap-surface.readonly .rich-video-asset .ui-video-player { max-width: 100%; }
.rich-video-asset video, .rich-video-asset .ui-video-player {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  background: var(--text);
}
.tiptap-surface.readonly .rich-video-asset .ui-video-player video, .tiptap-surface.readonly .rich-video-asset .ui-video-player .vds-poster {
  object-fit: contain;
}
.rich-video-asset__placeholder, .rich-media__placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 16px; border: 1px dashed var(--line); color: var(--text-muted); }
.rich-editor__upload-bar {
  height: 8px;
  margin: 12px 0 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-muted);
}
.rich-editor__upload-bar > span { display: block; height: 100%; background: var(--accent); }
.rich-editor__upload-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; }
.emoji-picker { width: 320px; max-width: 70vw; overflow: hidden; container-type: inline-size; border-radius: inherit; background: var(--surface-raised); background-color: var(--surface-raised); }
.emoji-picker__tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.emoji-picker__tabs button {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.emoji-picker__tabs button.is-active { border-color: var(--line); background: var(--surface-raised); color: var(--text); }
.emoji-picker__grid {
  --emoji-cols: 5;
  --emoji-rows: 3;
  --emoji-gap: 8px;
  --emoji-pad: 10px;
  display: grid;
  grid-template-columns: repeat(var(--emoji-cols), minmax(0, 1fr));
  grid-auto-rows: calc((100cqi - (var(--emoji-pad) * 2) - (var(--emoji-gap) * (var(--emoji-cols) - 1))) / var(--emoji-cols));
  gap: var(--emoji-gap);
  /* 边框盒高度刚好露出三行，多出来的表情在格子里滚动。 */
  height: calc(
    ((100cqi - (var(--emoji-pad) * 2) - (var(--emoji-gap) * (var(--emoji-cols) - 1))) / var(--emoji-cols)) * var(--emoji-rows)
    + (var(--emoji-gap) * (var(--emoji-rows) - 1))
    + (var(--emoji-pad) * 2)
    - 4px
  );
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--emoji-pad);
  background: var(--surface-raised);
}
.emoji-picker__grid button {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.emoji-picker__grid button:hover { background: var(--surface-muted); }
.emoji-picker__grid button img,
.emoji-picker__grid button > span {
  transition: transform .16s ease;
  transform-origin: center;
}
.emoji-picker__grid button:hover,
.emoji-picker__grid button:focus-visible {
  position: relative;
  z-index: 1;
}
.emoji-picker__grid > .ui-float-tip {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.emoji-picker__grid > .ui-float-tip > button {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.emoji-picker__grid button:hover img,
.emoji-picker__grid button:focus-visible img,
.emoji-picker__grid button:hover > span,
.emoji-picker__grid button:focus-visible > span {
  transform: scale(1.5);
}
/* 表情边长只改这里。PC 用 :root；/m 覆盖 --sticker-size。楼中楼与选择器缩略图两端共用。 */
:root {
  --sticker-size: 88px;
  --sticker-size-nested: 22px;
  --sticker-size-picker: 40px;
}
.forum-mobile {
  --sticker-size: 40px;
}
.emoji-picker__grid img {
  width: var(--sticker-size-picker);
  height: var(--sticker-size-picker);
  object-fit: contain;
  pointer-events: none;
}
.title-emoji-suggest {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow: auto;
  background: var(--surface-raised);
}
.title-emoji-suggest button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.title-emoji-suggest button.is-active,
.title-emoji-suggest button:hover {
  background: var(--surface-muted);
}
.title-emoji-suggest img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  object-fit: contain;
}
.title-emoji-suggest__empty {
  margin: 0;
  padding: 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.emoji-picker-host {
  position: relative;
}
.emoji-picker-preview {
  position: fixed;
  z-index: 100015;
  display: flex;
  animation: emoji-preview-in .16s ease;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  margin: 0;
  pointer-events: none;
}
@keyframes emoji-preview-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.emoji-picker-preview__frame {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 136px;
  padding: 8px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0;
  background: #fff;
}
.emoji-picker-preview__frame img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.emoji-picker-preview__name {
  order: -1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  max-width: 136px;
  min-height: 24px;
  margin: 0;
  padding: 8px 8px 4px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 0;
  background: #fff;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}
.title-sticker {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0.08em;
  vertical-align: -0.2em;
  object-fit: contain;
  user-select: none;
}
.sticker-inline-host {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  user-select: none;
}
.sticker-inline {
  display: inline-block;
  width: var(--sticker-size);
  height: var(--sticker-size);
  max-width: none;
  object-fit: contain;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
}
.floor-sub .sticker-inline {
  width: var(--sticker-size-nested);
  height: var(--sticker-size-nested);
}
/* 正文、楼中楼、编辑器和回应条里的表情：移入放大并显示名称。电脑端大图少放大一点，手机和楼中楼仍为 1.5。 */
.emoji-hover,
.sticker-inline-host {
  position: relative;
  z-index: 0;
  pointer-events: auto;
}
.emoji-hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}
.emoji-hover > img,
.sticker-inline {
  transition: transform .16s ease;
  transform-origin: center;
}
.emoji-hover:hover,
.sticker-inline-host:hover {
  z-index: 3;
}
.emoji-hover:hover > img,
.floor-sub .sticker-inline-host:hover .sticker-inline,
.forum-mobile .sticker-inline-host:hover .sticker-inline {
  transform: scale(1.5);
}
.sticker-inline-host:hover .sticker-inline {
  transform: scale(1.2);
}
/* 编辑器里光标贴在表情右缘，会被位图盖住，还会在边框和 margin 之间来回画。
   空隙放进内边距，对齐改到底边，悬停也不再放大盖住光标。 */
.rich-editor .sticker-inline-host {
  position: static;
  margin-right: 0;
  padding-right: 4px;
  vertical-align: text-bottom;
}
.rich-editor .sticker-inline {
  vertical-align: text-bottom;
}
.rich-editor .sticker-inline-host:hover {
  position: static;
  z-index: auto;
}
.rich-editor .sticker-inline-host:hover .sticker-inline {
  transform: none;
}
/* 名称改挂到 body 的 .sticker-name-tip，这里不再画会被 overflow 裁掉的浮层。 */
.emoji-hover[data-name]::after,
.sticker-inline-host[data-name]::after {
  content: none;
}
.sticker-name-tip {
  position: fixed;
  z-index: 100020;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--surface-raised);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}
/* 标题经常被裁切，名称改由浮层显示，避免 ::after 被 overflow 吃掉。 */
.title-sticker-host[data-name]::after {
  content: none;
}
@media (prefers-reduced-motion: reduce) {
  .emoji-hover > img,
  .sticker-inline,
  .emoji-picker__grid button img,
  .emoji-picker__grid button > span,
  .emoji-picker-preview {
    transition: none;
    animation: none;
  }
}
.sticker-inline-host.ProseMirror-selectednode, .sticker-inline.ProseMirror-selectednode { outline: none; }
.tiptap-surface ul, .tiptap-surface ol { padding-left: 24px; }
.business-reference { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-dark); font-size: .88em; vertical-align: baseline; }
.business-reference small { opacity: .7; font-size: 10px; }
.tiptap-surface .refcard {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  color: inherit;
  text-decoration: none;
  outline: none;
  flex-wrap: nowrap;
}
.tiptap-surface .refcard:focus, .tiptap-surface .refcard:focus-visible {
  outline: none;
}
.tiptap-surface .react-renderer.node-gameCard {
  display: inline-block;
  box-sizing: border-box;
  width: calc(50% - 6px);
  max-width: calc(50% - 6px);
  min-width: 0;
  margin: 0 6px 12px 0;
  vertical-align: top;
  container: refhost / inline-size;
}
.forum-mobile .tiptap-surface .react-renderer.node-gameCard {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
}
.tiptap-surface .rich-entity-card-host {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  height: auto;
  outline: none !important;
}
.tiptap-surface .rich-entity-card-host.ProseMirror-selectednode, .tiptap-surface .refcard.ProseMirror-selectednode {
  outline: none !important;
}
.tiptap-surface .rich-entity-card-host.ProseMirror-selectednode .refcard {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised)));
}
.work-picker {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  margin-top: 12px;
}
.ui-modal.ui-modal--work-picker {
  width: min(800px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 48px));
  max-height: min(640px, calc(100vh - 48px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ui-modal.ui-modal--work-picker > .ui-card__header {
  flex: none;
}
.ui-modal.ui-modal--work-picker > .ui-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.ui-modal.ui-modal--work-picker > .ui-card__body > .ui-search-input {
  flex: none;
}
.ui-modal.ui-modal--work-picker .work-picker {
  grid-template-columns: 1fr 1fr;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 0;
}
.ui-modal.ui-modal--work-picker .work-picker > .ui-content-loading,
.ui-modal.ui-modal--work-picker .work-picker > .ui-empty {
  grid-column: 1 / -1;
}
.ui-modal.ui-modal--work-picker .work-picker__pager {
  flex: none;
  min-height: 48px;
}
.work-picker > .ui-content-loading {
  min-height: 240px;
}
.work-picker__item {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.work-picker__item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised)); }
.work-picker__cover { width: 56px; max-width: 56px; flex: none; aspect-ratio: 1; border-radius: 8px; }
.work-picker__copy { display: grid; gap: 2px; min-width: 0; }
.work-picker__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-picker__copy small { color: var(--text-muted); }
.rich-entity-card { display: grid; grid-template-columns: 34px 1fr 20px; gap: 8px; align-items: center; margin: 16px 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); }
.rich-entity-card > span { display: grid; gap: 2px; }
.rich-entity-card small { color: var(--text-muted); }
.rich-image-asset { margin: 18px 0; }
.rich-image-asset img, .rich-image-asset .rich-image-asset__btn {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  border-radius: 9px;
}
.rich-image-asset .rich-image-asset__btn img { width: auto; max-width: 100%; height: auto; }
.rich-image-asset .rich-media__placeholder { min-height: 150px; border-radius: 9px; }/* 正文图片宽高随内容自适应，加载中/失败时给一个最小占位高度，避免占位塌成 0 */
.rich-image-asset .ui-smart-img.is-loading, .rich-image-asset .ui-smart-img.is-error { width: 100%; min-height: 150px; border-radius: 9px; }
.ProseMirror-selectednode { outline: 2px solid var(--accent); outline-offset: 2px; }
.ProseMirror-selectednode:has(.refcard) { outline: none !important; }
.tiptap-surface.readonly .react-renderer.ProseMirror-selectednode,
.tiptap-surface.readonly .react-renderer.node-imageAsset.ProseMirror-selectednode,
.tiptap-surface.readonly .node-imageAsset.ProseMirror-selectednode {
  outline: none !important;
  box-shadow: none;
}
.markdown-block.ProseMirror-selectednode, .react-renderer.node-markdownBlock.ProseMirror-selectednode, .react-renderer.node-markdownBlock:focus, .react-renderer.node-markdownBlock:focus-visible {
  outline: none;
}
.form-notice { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-control); font-size: 13px; }
.form-notice.success { background: color-mix(in srgb, var(--success) 12%, var(--surface-raised)); color: var(--success); }
.form-notice.error { background: color-mix(in srgb, var(--danger) 11%, var(--surface-raised)); color: var(--danger); }
.post-preview { padding: 32px; border-radius: 11px; background: var(--surface-raised); box-shadow: 0 10px 28px rgba(38, 67, 104, .08); }
.post-preview__meta { color: var(--accent); font-size: 12px; font-weight: 700; }
.post-preview h2 { margin: 12px 0 10px; font-size: 30px; line-height: 1.25; }
.post-preview__summary { color: var(--text-muted); line-height: 1.65; }
.post-preview__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 24px; }
.post-preview__content .tiptap-surface { outline: none; line-height: 1.75; }

.mobile-shell { max-width: 767px; margin: 0 auto; padding-bottom: 0; background: var(--surface); }
.mobile-topbar { position: sticky; top: 0; z-index: 20; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: env(safe-area-inset-top) 16px 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 88%, transparent); backdrop-filter: blur(20px) saturate(1.5); }
.mobile-topbar strong { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); letter-spacing: .06em; }
.mobile-topbar strong img { width: 22px; height: 22px; flex: none; display: block; object-fit: contain; }
.mobile-topbar > div { display: flex; gap: 3px; }
.mobile-topbar .ui-icon-btn {
  border: 0;
  background: transparent;
}
.mobile-board-hero {
  padding: calc(var(--space-1) + env(safe-area-inset-top, 0px)) var(--space-2) var(--space-1);
}
.mobile-board-hero .event-promo-carousel .ui-banner__stage {
  position: relative;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
/* 用 padding 撑出 16:9，不跟 aspect-ratio 叠在同一条规则里，避免旧 WebView 高度变成 0。 */
.mobile-board-hero .event-promo-carousel .ui-banner__stage::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
.mobile-board-hero .event-promo-carousel .ui-banner--dots .ui-banner__track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mobile-board-hero .event-promo-carousel .ui-banner--dots .ui-banner__slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.mobile-board-hero .event-promo-carousel .event-promo {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mobile-board-hero .event-promo-carousel .promo-slide-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.mobile-board-hero .event-promo-carousel .promo-slide-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
}
.mobile-board-hero .event-promo-carousel .event-promo img.forum-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto;
}
.mobile-board-hero .event-promo-carousel .event-promo:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.mobile-board-hero .event-promo-carousel .event-promo:hover .forum-cover:not(.cover--empty):not(.cover--reviewing) {
  transform: none;
}
.mobile-board-hero .event-promo-carousel .cover {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
html.org-box-host .mobile-board-hero {
  padding-top: var(--space-2);
}
html.applite-host .mobile-board-hero {
  padding-top: var(--space-1);
  background: var(--surface);
}
html.applite-host .mobile-topbar {
  top: 0;
  height: 58px;
  padding-top: 0;
  background: var(--surface);
}
html.applite-host .mobile-tabbar {
  bottom: 0;
  height: 64px;
  padding-bottom: 0;
}
html.applite-host .mobile-publish-fab {
  bottom: 82px;
}
html.applite-host .ui-bottomsheet {
  padding-bottom: 24px;
}
.mobile-board-brand {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: var(--space-2);
}
.mobile-board-brand strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  letter-spacing: .06em;
}
.mobile-board-brand strong img {
  width: 22px;
  height: 22px;
  flex: none;
  display: block;
  object-fit: contain;
}
.mobile-board-nav {
  position: sticky;
  top: var(--mobile-sticky-inset, env(safe-area-inset-top, 0px));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--mobile-board-nav-h, 52px);
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mobile-board-nav .mobile-board-tabs {
  flex: 1 1 auto;
  min-width: 0;
  gap: 16px;
  border-bottom: 0;
  flex-wrap: nowrap;
}
.mobile-board-tools {
  display: flex;
  flex: none;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding-left: var(--space-2);
  background: var(--surface);
}
.mobile-board-tools > .ui-btn-magnet,
.mobile-board-tools > .mobile-board-me {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  position: relative;
}
.mobile-board-me {
  position: relative;
}
.mobile-board-me .ui-icon-btn.is-photo,
.mobile-board-me .ui-icon-btn.is-photo:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
}
.mobile-board-me__photo {
  display: contents;
}
.mobile-board-me__waiting {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.mobile-board-me .ui-avatar {
  width: 32px;
  height: 32px;
}
.mobile-board-me .cmenu-badge {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}
.feed-card.mobile { display: flex; flex-direction: column; margin-bottom: 8px; padding: 0; }
.feed-card.mobile .feed-card__media { order: -1; width: 100%; height: 190px; min-height: auto; border-radius: 13px 13px 0 0; }
.feed-card.mobile .feed-card__media img { min-height: auto; }
.feed-card.mobile .feed-card__body { padding: 12px; }
.feed-card.mobile h2 { margin: 0 0 7px; font-size: 20px; }
.feed-card.mobile p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
.mobile-tabbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; height: calc(64px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px max(12px, calc((100vw - 767px) / 2)) env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 88%, transparent); backdrop-filter: blur(20px) saturate(1.5); }
.mobile-tabbar button { display: grid; place-items: center; align-content: center; gap: 2px; margin: 4px 3px; border-radius: 14px; color: var(--text-muted); transition: background .2s ease, color .2s ease; }
.mobile-tabbar button span { font-size: 10px; }
.mobile-tabbar button.active { color: var(--accent-dark); background: var(--accent-soft); font-weight: 700; }
.mobile-publish-fab { position: fixed; right: max(18px, calc((100vw - 720px) / 2)); bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 25; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 18px; background: linear-gradient(160deg, var(--accent-hover), var(--accent-action)); color: var(--accent-ink); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.mobile-publish-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 40%, transparent); }
.mobile-publish-fab:active { transform: scale(.97); }
.creator-tools { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
.creator-tools h2 { margin: 0 0 12px; font-size: 17px; }
.creator-overview { display: grid; grid-template-columns: 230px 230px 1fr; gap: 14px; margin-bottom: 20px; }
.creator-overview article { min-height: 126px; display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
.creator-overview article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.creator-overview article > div { display: grid; gap: 4px; }
.creator-overview b { font-size: 24px; }
.creator-overview small { color: var(--text-muted); }
.creator-tools { align-self: start; padding: 20px 12px; }
.creator-tools h2 { padding: 0 8px; }
.creator-tools button { width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 5px; padding: 14px 10px; border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; cursor: pointer; }
.creator-tools button:hover { background: var(--surface-muted); }
.creator-tools button > span { display: grid; gap: 3px; }
.creator-tools small { color: var(--text-muted); }
.post-hero-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 11px; }
.post-body { padding: 0; font-size: 16px; line-height: 1.9; }
.post-body h2 { margin: 32px 0 8px; font-size: 25px; }
.post-body aside { margin: 24px 0; padding: 16px 18px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); color: var(--accent-dark); }
.appearance-settings { display: grid; gap: 28px; }
.theme-setting { display: grid; gap: 16px; }
.theme-setting__header { display: flex; align-items: flex-start; gap: 11px; }
.theme-setting__header > svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent-dark); }
.theme-setting__header h2, .theme-setting__header p { margin: 0; }
.theme-setting__header p { margin-top: 5px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.theme-customizer__controls { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: end; }
.theme-control { position: relative; display: grid; gap: 8px; min-width: 0; }
.theme-control--slider { flex: 1 1 220px; max-width: 320px; }
.theme-control--select { flex: 0 1 168px; min-width: 148px; }
.theme-control__label { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.theme-control__info { display: inline-flex; color: var(--text-muted); }
.theme-slider-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 10px; align-items: center; }
.theme-hue, .theme-base { width: 100%; height: 10px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.theme-hue { background: linear-gradient(to right, #ff3b30, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff3b30); }
.theme-base { background: linear-gradient(to right, #1a1a1a, #f4f4f5); }
.theme-hue::-webkit-slider-thumb, .theme-base::-webkit-slider-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .18); appearance: none; -webkit-appearance: none; }
.theme-hue::-moz-range-thumb, .theme-base::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .18); }
.theme-color-swatch { width: 28px; height: 28px; padding: 0; border: 2px solid var(--surface-raised); border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px var(--line); cursor: pointer; overflow: hidden; }
.theme-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.theme-color-swatch::-webkit-color-swatch { border: 0; border-radius: 50%; }
.theme-color-swatch::-moz-color-swatch { border: 0; border-radius: 50%; }
.theme-pill { width: 100%; min-height: 40px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); cursor: pointer; }
.theme-pill strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; text-align: left; }
.theme-pill svg { color: var(--text-muted); }
.theme-pill__mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-muted); color: var(--text); font-size: 11px; font-weight: 800; }
.theme-menu { position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; left: auto; min-width: 12em; width: max-content; max-width: min(22em, calc(100vw - 16px)); margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); box-shadow: var(--shadow); list-style: none; }
.theme-menu button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
.theme-menu button span { width: 18px; color: var(--text-muted); font-size: 11px; font-weight: 800; }
.theme-menu button.active, .theme-menu button:hover { background: var(--surface-muted); }
.locale-switcher { display: grid; gap: 10px; }
.locale-switcher h2 { margin: 0; }
.locale-switcher__hint { margin: 0; color: var(--text-muted); font-weight: 400; line-height: 1.55; }
.sheet-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; border: 0; background: rgba(8, 19, 32, .58); }
.rich-editor.compact { display: flex; flex-direction: column; }
.rich-editor.compact .rich-editor__toolbar { overflow: visible; background: transparent; }
.rich-editor.compact .rich-editor__toolbar-row { overflow-x: auto; flex-wrap: nowrap; }
.rich-editor.compact .rich-editor__toolbar button { flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-muted); }
.rich-editor.compact .rich-editor__toolbar button span { display: none; }
.rich-editor.compact .toolbar-spacer { display: none; }
.rich-editor.compact .tiptap-surface { min-height: 88px; padding: 16px 16px 20px; }
.rich-editor--reply .rich-editor__body { order: 2; }
.rich-editor__body.has-login-mask {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.rich-editor.is-login-gate .rich-editor__insert-bar {
  overflow: visible;
}
.rich-editor--reply .form-notice { order: 3; }
.rich-editor--reply .rich-editor__insert-bar {
  order: 4;
  z-index: 8;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px 10px;
  width: 100%;
  height: auto;
  min-height: 0;
  min-width: 0;
  border-bottom: 0;
  border-top: 1px solid var(--line);
  overflow: visible;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.rich-editor--reply .rich-editor__insert-group {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
}
.rich-editor--reply .rich-editor__insert-group--marks, .rich-editor--reply .rich-editor__insert-group--history {
  padding: 0;
  border-radius: 0;
  background: transparent;
  gap: 2px;
}
.rich-editor--reply .rich-editor__insert-group--marks .ui-btn, .rich-editor--reply .rich-editor__insert-group--history .ui-btn {
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
  box-shadow: none;
}
.rich-editor--reply .rich-editor__insert-group--marks .ui-btn > span:not(.ui-btn__icon), .rich-editor--reply .rich-editor__insert-group--history .ui-btn > span:not(.ui-btn__icon) {
  font-size: 11px;
}
.rich-editor--reply .rich-editor__insert-group--marks .ui-btn:hover:not(:disabled), .rich-editor--reply .rich-editor__insert-group--marks .ui-btn.is-pressed:not(:disabled), .rich-editor--reply .rich-editor__insert-group--marks .ui-btn[aria-pressed='true']:not(:disabled), .rich-editor--reply .rich-editor__insert-group--history .ui-btn:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: none;
}
.rich-editor--reply .rich-editor__insert-group--marks .ui-btn:disabled, .rich-editor--reply .rich-editor__insert-group--history .ui-btn:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  opacity: .4;
}
.rich-editor--reply .rich-editor__insert-group--insert {
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;
}
.rich-editor--reply .rich-editor__insert-group--insert .ui-btn:not(:disabled) {
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text);
}
.rich-editor--reply .rich-editor__insert-group--insert .ui-btn:disabled {
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text-muted);
  opacity: .68;
}
.rich-editor--reply .rich-editor__insert-group--insert .ui-btn:hover:not(:disabled) {
  background: var(--surface-muted);
}
.rich-editor--reply .rich-editor__insert-group--insert .ui-btn.is-pressed:not(:disabled), .rich-editor--reply .rich-editor__insert-group--insert .ui-btn[aria-pressed='true']:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.rich-editor--reply.compact .rich-editor__insert-group--marks .ui-btn > span:not(.ui-btn__icon), .rich-editor--reply.compact .rich-editor__insert-group--history .ui-btn > span:not(.ui-btn__icon) {
  display: none;
}
.rich-editor--reply.compact .rich-editor__insert-group--history .rich-editor__fullscreen > span:not(.ui-btn__icon) {
  display: inline;
}
.rich-editor--reply .tiptap-surface { min-height: 128px; padding: 16px 16px 20px; }
.post-preview.compact { border-radius: 0; box-shadow: none; }
.post-preview.compact h2 { font-size: 27px; }

@media (max-width: 1180px) {
.feed-card { grid-template-columns: minmax(0, 1fr) 190px; }
}

@media (max-width: 767px) {
body { overflow-x: hidden; }
  .theme-customizer__controls { display: grid; grid-template-columns: 1fr 1fr; }
  .theme-control--slider { grid-column: 1 / -1; max-width: none; }
  .theme-control--select { min-width: 0; }
}

@media (hover: none) {
.spotlight-card::before, .glare-hover::after, .specular-button__fx { display: none; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .feed-card:hover { transform: none; }
  .spotlight-card::before { display: none; }
  .glare-hover::after { display: none; }
  .specular-button__fx { display: none; }
  .shiny-text { background: none; -webkit-text-fill-color: currentColor; }
  .click-burst { display: none; }
}

:root[data-reduced-motion] *, :root[data-reduced-motion] *::before, :root[data-reduced-motion] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}
:root[data-reduced-motion] .specular-button__fx,
:root[data-reduced-motion] .click-burst { display: none; }

.app-crash {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--surface, #f6f8fc);
  color: var(--text, #172033);
}

.app-crash__card {
  width: min(100%, 440px);
  padding: 36px;
  border: 1px solid var(--line, #dfe5ef);
  border-radius: var(--radius-xl, 20px);
  background: var(--surface-raised, #fff);
  text-align: center;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(31, 45, 72, .12));
}

.app-crash__code {
  margin: 0 0 12px;
  color: var(--accent, #3156d3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.app-crash__card h1 { margin: 0 0 12px; font-size: clamp(24px, 5vw, 32px); }
.app-crash__card > p:not(.app-crash__code) { margin: 0 0 24px; color: var(--text-muted, #68758d); }
.app-crash__card button {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent, #3156d3);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

@media (prefers-reduced-transparency: reduce) {
.mobile-topbar, .mobile-tabbar { background: var(--surface-raised); backdrop-filter: none; }
}
/* Forum shell: fbar / gcard / tb / bbs / buy / floor — semantic tokens only. */

:root {
  --sidebar-w: 188px;
  --font-display: Fredoka, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.forum-pc {
  display: flex;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  min-width: 1024px;
  overflow: hidden;
  background: var(--surface);
}

/* 桌面壳自己在 .bbs-col 里滚；再让 html/body 滚就会在右侧叠两条滚动条。 */
html:has(.forum-pc:not(.forum-pc--player)),
html:has(.forum-pc:not(.forum-pc--player)) body,
html:has(.forum-pc:not(.forum-pc--player)) #root {
  height: 100%;
  overflow: hidden;
}

html:has(.forum-pc:not(.forum-pc--player)) body {
  min-height: 0;
}

html:has(.forum-pc:not(.forum-pc--player)) .forum-pc:not(.forum-pc--player) {
  height: 100%;
}

/* 播放页自己铺满视口。html/body 再滚就会在游戏外侧多一条滚动条。 */
html:has(.forum-pc--player),
html:has(.forum-mobile--player),
html:has(.forum-pc--player) body,
html:has(.forum-mobile--player) body,
html:has(.forum-pc--player) #root,
html:has(.forum-mobile--player) #root {
  height: 100%;
  overflow: hidden;
}

html:has(.forum-pc--player) body,
html:has(.forum-mobile--player) body {
  min-height: 0;
}

/* `:has()` 要到 Safari 15.4。壳层挂上 data-forum-lock 后，旧系统同样锁住外层滚动。
   app 锁只给桌面壳（.bbs-col 内滚）。手机 /m 由 data-boot-surface 把滚动收到 #root。 */
html[data-forum-lock='app']:not([data-boot-surface='mobile']),
html[data-forum-lock='app']:not([data-boot-surface='mobile']) body,
html[data-forum-lock='app']:not([data-boot-surface='mobile']) #root,
html[data-forum-lock='player'],
html[data-forum-lock='player'] body,
html[data-forum-lock='player'] #root {
  height: 100%;
  overflow: hidden;
}

html[data-forum-lock] body {
  min-height: 0;
}

html[data-forum-lock='app']:not([data-boot-surface='mobile']) .forum-pc:not(.forum-pc--player) {
  height: 100%;
}

/* 竖屏窄于桌面最小宽度时，在 #root 上横向滚动。竖向仍只在栏目里滚。`:has()` 单独一条，避免旧 Safari 整段丢掉。 */
@media (orientation: portrait) {
  html[data-forum-lock='app']:not([data-boot-surface='mobile']) #root {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  html:has(.forum-pc:not(.forum-pc--player)) #root {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

.bbs-col {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
  background: color-mix(in srgb, var(--surface) 70%, #fff);
}

.bbs-col.bbs-col--masked,
.bbs-col:has(> .bbs-coming-mask) {
  overflow: hidden;
}

/* 水印在底；不要把即将开启遮罩也抬成 relative，否则盖不住列表。 */
.bbs-col > :not(.bbs-col-mark, .bbs-coming-mask) {
  position: relative;
  z-index: 1;
}

.bbs-foot {
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 16px;
  text-align: center;
}

.bbs-foot__link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.bbs-foot__brand {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.bbs-foot__mark {
  position: absolute;
  top: -1px;
  left: 100%;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0;
}

.bbs-foot__year {
  margin-left: 14px;
}

.bbs-foot__link:hover {
  color: var(--text);
}

/* 活动页：页脚跟在内容后面。内容比视口矮时（如收录作品为 0），内容区撑满剩余高度，页脚落在页面底部；
   内容比视口高时仍紧跟其后。页脚底色与活动页 iframe 一致，不露出栏目底色。 */
.bbs-foot--flow {
  margin-top: 0;
  background: #F2F2F2;
}

.bbs-col:has(> .bbs-foot--flow) > .forum-wrap.season-embed-wrap,
.forum-mobile__main:has(> .bbs-foot--flow) > .forum-wrap.season-embed-wrap {
  flex: 1 0 auto;
  min-height: 0;
}

.bbs-col:has(> .bbs-foot--flow) .season-embed,
.forum-mobile:has(.bbs-foot--flow) .season-embed {
  flex: none;
  width: 100%;
  min-height: 0;
  height: auto;
}

.bbs-col:has(> .bbs-foot--flow) .season-embed:not(.is-sized),
.forum-mobile:has(.bbs-foot--flow) .season-embed:not(.is-sized) {
  min-height: 100dvh;
}

:root,
:root[data-theme='default'] {
  --bbs-mark-ink: rgba(110, 110, 115, 0.12);
  --bbs-mark-rule: rgba(110, 110, 115, 0.1);
}

:root[data-theme='current'] {
  --bbs-mark-ink: rgba(101, 114, 134, 0.12);
  --bbs-mark-rule: rgba(101, 114, 134, 0.1);
}

.bbs-col-mark {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  display: grid;
  place-items: center;
  opacity: 0.5;
}

.bbs-col-mark__lockup {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: var(--bbs-mark-ink);
}

.bbs-col-mark__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .46em;
  text-indent: .46em;
  color: var(--bbs-mark-ink);
}

.bbs-col-mark__word {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 6.4vw, 96px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .14em;
  color: var(--bbs-mark-ink);
}

.bbs-col-mark__rule {
  width: min(240px, 42vw);
  height: 1px;
  background: var(--bbs-mark-rule);
}

.bbs-col-mark__sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--bbs-mark-ink);
}

html:has(.ui-modal-backdrop--col) .bbs-col {
  overflow: hidden;
}

.bbs-col > .forum-wrap {
  width: 100%;
  max-width: min(1560px, 100%);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
  box-sizing: border-box;
}

.bbs-col > .forum-wrap.cols {
  flex: 1 1 auto;
  min-height: 0;
}

.bbs-col > .forum-wrap.cols.board-list {
  flex: 1 0 auto;
  min-height: 100%;
  height: auto;
}

/* 搜索结果比视口高时不能把这一栏压矮，否则页脚会停在半截内容上。 */
.bbs-col > .forum-wrap.cols.search-page {
  flex: 1 0 auto;
  min-height: auto;
}

.bbs-col > .forum-wrap.season-embed-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  /* 与 iframe 同色。iframe 按内容定高后，下面剩出的空白不能露出栏目底色。 */
  background: #F2F2F2;
}

.season-embed {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: #F2F2F2;
}

.forum-mobile .forum-wrap.season-embed-wrap {
  padding: var(--space-1) var(--space-2) env(safe-area-inset-bottom, 0px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.forum-mobile .season-embed {
  min-height: 0;
  flex: 1 1 auto;
}

.season-embed-back {
  flex: none;
  align-self: start;
  margin: 0 0 8px;
}

.forum-mobile .season-embed-back {
  margin: 0 0 var(--space-1);
}

.bbs-col > .forum-wrap.season-embed-wrap > .season-embed-back {
  margin: 12px 16px 8px;
}

.cols:has(> .board-main) {
  align-items: stretch;
}

.cols.board-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  /* 行高按内容。1fr 会把列表压进剩余视口，分页停在卡片中间，文字表格也被裁成两三行。 */
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: start;
  align-content: start;
}

.cols.board-list > .board-list__lead {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  align-self: start;
}

.cols.board-list > .board-list__lead > .board-toolbar,
.cols.board-list > .board-list__lead > .mod-picks {
  grid-row: auto;
  margin-bottom: 0;
}

.cols.board-list > .board-list__lead > .mod-picks {
  margin-bottom: 8px;
}

.cols.board-list > .board-toolbar {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-bottom: 0;
}

.cols.board-list > .board-main {
  grid-column: 1;
  grid-row: -2 / -1;
  align-self: start;
  height: auto;
  min-height: auto;
}

.cols.board-list > .col-side {
  grid-column: 2;
  grid-row: -2 / -1;
  /* 行高改按内容后，百分比最大高度会和行高互相依赖，旧 Safari 可能把侧栏算成 0。 */
  min-height: auto;
  max-height: none;
  overflow: visible;
}

.cols.board-list > .mod-picks {
  grid-column: 1;
  grid-row: 1;
}

.cols.board-list:has(> .mod-picks) {
  grid-template-rows: auto auto auto;
}

.cols.board-list:has(> .mod-picks) > .board-toolbar {
  grid-row: 2;
}

.cols.board-list:has(> .mod-picks) > .col-side,
.cols.board-list:has(> .board-list__lead) > .col-side {
  grid-row: 1 / -1;
  align-self: start;
}

/* 推荐区在左侧时，侧栏从第一行开始。不和 :has() 写在一起，否则旧 Safari 整段失效，右上角会空出一截。 */
.cols.board-list > .board-list__lead ~ .col-side {
  grid-row: 1 / -1;
  align-self: start;
}

.mod-picks {
  min-width: 0;
}

.mod-picks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mod-picks__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}

.mod-picks__title::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.mod-picks__who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  animation: mod-picks-in .42s ease;
}

.mod-picks__who-label {
  flex: none;
  color: var(--text-muted);
}

.mod-picks__who-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-picks__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.mod-picks__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.mod-picks__games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  animation: mod-picks-in .42s ease;
}

.mod-picks__games.is-leaving,
.mod-picks__who.is-leaving {
  opacity: .4;
  transition: opacity .2s ease;
}

@keyframes mod-picks-in {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mod-picks__games,
  .mod-picks__who,
  .mod-picks--compact .mod-picks__quote {
    animation: none;
  }
  .mod-picks__games.is-leaving,
  .mod-picks__who.is-leaving,
  .mod-picks--compact .mod-picks__card,
  .mod-picks--compact .mod-picks__cover,
  .mod-picks--compact .mod-picks__shot {
    transition: none;
  }
  .mod-picks--pager .mod-picks__track {
    transition: none;
  }
}

.mod-picks__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 0 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mod-picks__card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.mod-picks__cover {
  position: relative;
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
}

/* 没有 aspect-ratio 时靠占位撑开。两者一起写，border-box 会把内容高度吃成 0，封面整块消失。 */
.mod-picks__cover::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.mod-picks__cover.cover .forum-cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.mod-picks__cover.forum-cover {
  height: auto;
  aspect-ratio: 16 / 9;
}

.mod-picks__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 10px;
}

.mod-picks__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.mod-picks__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-picks__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.mod-picks__author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  max-width: 58%;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.mod-picks__author-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod-picks__author-avatar.ui-avatar {
  flex: none;
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.mod-picks__date {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: normal;
}

.mod-picks__quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin: auto 10px 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
}

.mod-picks__quote > .ui-avatar {
  flex: none;
  margin-top: 1px;
}

.mod-picks__quote > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(1.5em * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  /* 全角问号默认不能在它前面换行，会和前面的字粘成一块。 */
  line-break: loose;
}

.mod-picks__row > .ui-btn-magnet,
.mod-picks__row > .ui-float-tip {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  align-self: stretch;
  align-items: stretch;
}
.mod-picks__row > .ui-float-tip > .ui-btn-magnet {
  display: flex;
  flex: 1 1 auto;
  width: 40px;
  align-self: stretch;
  align-items: stretch;
}
.mod-picks__row > .ui-float-tip > .ui-float-tip__bubble {
  top: calc(50% - 40px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}
.mod-picks__row > .ui-float-tip > .ui-float-tip__bubble.is-open {
  transform: translate(-50%, 0);
}
.mod-picks__row > .ui-float-tip > .ui-float-tip__bubble::after {
  top: 100%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border-color: transparent;
  border-top-color: var(--text);
}

.mod-picks__row .ui-icon-btn.mod-picks__flip {
  width: 40px;
  min-width: 40px;
  flex: 1 1 auto;
  height: auto;
  min-height: 44px;
  align-self: stretch;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--accent-dark);
  border-radius: var(--radius-control);
}

.forum-mobile .mod-picks__card {
  padding: 0 0 8px;
  gap: 6px;
}

.forum-mobile .mod-picks__copy {
  padding: 0 8px;
}

.forum-mobile .mod-picks__quote {
  margin-left: 8px;
  margin-right: 8px;
}

.forum-mobile .mod-picks__line {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.forum-mobile .mod-picks__name {
  display: block;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-mobile .mod-picks__author {
  display: flex;
  max-width: none;
}

.forum-mobile .mod-picks__date {
  display: block;
  max-width: none;
  white-space: normal;
}

.forum-mobile .mod-picks__row {
  flex-direction: column;
  gap: 10px;
}

.forum-mobile .mod-picks__games {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.forum-mobile .mod-picks__row > .ui-btn-magnet,
.forum-mobile .mod-picks__row > .ui-float-tip,
.forum-mobile .mod-picks__row > .ui-float-tip > .ui-btn-magnet {
  width: 100%;
}

.forum-mobile .mod-picks__row .ui-icon-btn.mod-picks__flip {
  width: 100%;
  height: 40px;
  min-height: 40px;
}

.forum-mobile .mod-picks__row > .ui-float-tip > .ui-float-tip__bubble {
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}

.forum-mobile .mod-picks__row > .ui-float-tip > .ui-float-tip__bubble.is-open {
  transform: translate(-50%, 0);
}

.mod-picks--pager .mod-picks__row {
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

.mod-picks__track {
  display: contents;
}

.mod-picks--pager .mod-picks__games {
  display: block;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.mod-picks--pager .mod-picks__track {
  display: flex;
  width: 100%;
  transition: transform .45s ease;
}

.mod-picks--pager .mod-picks__track.is-instant {
  transition: none;
}

.mod-picks--pager .mod-picks__card {
  flex: 0 0 100%;
  width: 100%;
  padding-bottom: 28px;
  user-select: none;
}

.mod-picks--pager .mod-picks__line {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}

/* 头像比文字高，按基线对齐会顶到封面底边，改为居中并往下让 4px。 */
.mod-picks--pager .mod-picks__author {
  align-self: center;
  max-width: 42%;
  margin-top: 4px;
}

.mod-picks--pager .mod-picks__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mod-picks--pager .mod-picks__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 35%, var(--surface-strong));
  cursor: pointer;
}

.mod-picks--pager .mod-picks__dots button.is-on {
  background: var(--accent);
}

.mod-picks--pager .mod-picks__row > .ui-btn-magnet,
.mod-picks--pager .mod-picks__row > .ui-float-tip,
.mod-picks--pager .mod-picks__row > .ui-float-tip > .ui-btn-magnet {
  width: auto;
}

.mod-picks--pager .mod-picks__row .ui-icon-btn.mod-picks__flip {
  width: 40px;
  min-width: 40px;
  flex: 1 1 auto;
  height: auto;
  min-height: 44px;
  align-self: stretch;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--accent-dark);
  border-radius: var(--radius-control);
}

/* 手机端翻页箭头在上，「更多」在下，同一栏 40px 宽。 */
.mod-picks--pager .mod-picks__side--pager {
  display: flex;
  flex: 0 0 40px;
  flex-direction: column;
  gap: 8px;
  width: 40px;
  align-self: stretch;
}
.mod-picks--pager .mod-picks__side--pager > .ui-btn-magnet {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 40px;
  min-height: 0;
}
.mod-picks--pager .mod-picks__side--pager .mod-picks__more {
  flex: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  white-space: nowrap;
}

.board-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.board-main--masked {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
}

.cols.board-list > .board-main.board-main--masked {
  align-self: stretch;
  min-height: 0;
}

.board-main--masked > .board-main__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.board-main--masked > .bbs-coming-mask {
  z-index: 4;
}

.bbs-col.bbs-col--masked,
.bbs-col:has(.board-main--masked) {
  overflow: hidden;
}

.bbs-col.bbs-col--masked > .forum-wrap.cols.board-list,
.bbs-col:has(.board-main--masked) > .forum-wrap.cols.board-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}

.board-main__list {
  flex: 0 0 auto;
  min-width: 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.board-main__list > .panel,
.board-main__list > .ggrid {
  flex: none;
  width: 100%;
  height: auto;
  max-height: none;
  min-height: auto;
}
.board-main__list > .ui-content-loading {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}
.board-main__list > .panel:has(> .ui-content-loading) {
  flex: none;
  align-self: start;
  width: 100%;
  min-height: 0;
}
.forum-mobile .ui-content-loading--cards .ui-content-loading__body,
.ui-content-loading.is-compact .ui-content-loading__body {
  grid-template-columns: minmax(0, 1fr);
}
.panel-b > .ui-content-loading--cards .ui-content-loading__body {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.studio-chart .panel-b,
.income-chart .panel-b {
  display: flex;
  flex-direction: column;
}
.studio-chart .panel-b .ui-content-loading,
.income-chart .panel-b .ui-content-loading {
  min-height: 168px;
}
.income-chart .panel-b .ui-content-loading {
  min-height: 188px;
}
.studio-chart .panel-b .ui-content-loading__bars {
  height: 168px;
}
.income-chart .panel-b .ui-content-loading__bars {
  height: 188px;
}
.panel.floor-board > .ui-content-loading {
  min-height: 280px;
}
.search-main > .panel:has(.ui-content-loading) {
  min-height: min(52vh, 520px);
}

.board-pager {
  flex: none;
  margin-top: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px 0 8px;
}

.board-main .ggrid-scroll {
  min-width: 0;
  overflow: visible;
}

.forum-mobile {
  --mobile-board-nav-h: 52px;
  --mobile-sticky-inset: env(safe-area-inset-top, 0px);
  background: var(--surface);
}
html.org-box-host .forum-mobile {
  --mobile-sticky-inset: var(--org-box-system-bar);
}
html.applite-host .forum-mobile {
  --mobile-sticky-inset: 0px;
}
html.applite-host .forum-mobile .bbs-foot {
  padding-bottom: 8px;
}
html.applite-host .forum-mobile .forum-wrap {
  padding-bottom: var(--space-2);
}
html.applite-host .forum-mobile .forum-wrap.season-embed-wrap {
  padding-bottom: 0;
}
html.applite-host .mobile-auth-slot {
  padding-bottom: 12px;
}
html.applite-host .player-page.is-mobile .player-menu--overlay {
  padding-bottom: 14px;
}
html.applite-host .player-ipad-exit {
  top: 6px;
  right: 6px;
}

.forum-mobile:not(.forum-mobile--player) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.forum-mobile__main {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.forum-mobile .bbs-foot {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.forum-mobile.forum-mobile--coming {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: var(--mobile-window-h, 100dvh);
  max-height: 100vh;
  max-height: 100dvh;
  max-height: var(--mobile-window-h, 100dvh);
  overflow: hidden;
}

.forum-mobile.forum-mobile--coming .forum-mobile__main,
.forum-mobile__main:has(> .bbs-coming-mask) {
  overflow: hidden;
}

/* 与 .bbs-col 相同：列表抬到遮罩下面，遮罩本身保持 absolute 才能铺满。 */
.forum-mobile__main > :not(.bbs-coming-mask) {
  position: relative;
  z-index: 1;
}

.forum-wrap {
  width: min(1560px, 100%);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
  font-family: var(--font-body, var(--font-family));
}

.forum-mobile .forum-wrap {
  padding: var(--space-1) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  height: auto;
  max-height: none;
  overflow: visible;
}

.forum-mobile .forum-wrap.stack {
  gap: var(--space-1);
}

.post-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.post-chrome:empty,
.ui-btn-magnet:empty {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
}

.post-chrome__end {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 详情顶栏和下面的双栏同宽：编辑贴在正文栏右缘，不伸到侧栏外侧。 */
.forum-wrap.forum-wrap--wide > .post-chrome,
.forum-wrap:has(> .cols-wide) > .post-chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, var(--post-side, 320px));
  column-gap: var(--space-3);
  align-items: center;
}

.forum-wrap.forum-wrap--wide > .post-chrome > :first-child,
.forum-wrap.forum-wrap--wide > .post-chrome > .post-chrome__end,
.forum-wrap:has(> .cols-wide) > .post-chrome > :first-child,
.forum-wrap:has(> .cols-wide) > .post-chrome > .post-chrome__end {
  grid-column: 1;
  grid-row: 1;
}

.forum-wrap.forum-wrap--wide > .post-chrome > :first-child,
.forum-wrap:has(> .cols-wide) > .post-chrome > :first-child {
  justify-self: start;
}

.forum-wrap.forum-wrap--wide > .post-chrome > .post-chrome__end,
.forum-wrap:has(> .cols-wide) > .post-chrome > .post-chrome__end {
  justify-self: end;
  margin-left: 0;
}

/* 双栏网格比 :empty 更具体。顶栏没有返回等其他内容时不占行。 */
.forum-wrap.forum-wrap--wide > .post-chrome:empty {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
}
.forum-wrap:has(> .cols-wide) > .post-chrome:empty,
.forum-wrap.forum-wrap--wide > .post-chrome:not(:has(> :not(.post-chrome__end:empty))),
.forum-wrap:has(> .cols-wide) > .post-chrome:not(:has(> :not(.post-chrome__end:empty))) {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
}

.forum-mobile .post-chrome {
  margin-bottom: var(--space-1);
  gap: var(--space-2);
  min-height: 32px;
}
.forum-mobile .post-chrome:empty {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
}
.forum-mobile .post-chrome:not(:has(> :not(.post-chrome__end:empty))) {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
}

.forum-mobile .board-main,
.forum-mobile .board-main__list,
.forum-mobile .col-side {
  flex: none;
  min-height: auto;
  max-height: none;
  overflow: visible;
}

html:has(.forum-mobile .board-main--masked),
html:has(.forum-mobile .board-main--masked) body {
  height: 100%;
  overflow: hidden;
}

.forum-mobile:has(.board-main--masked) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

.forum-mobile.forum-mobile--coming .forum-mobile__main,
.forum-mobile.forum-mobile--coming .forum-wrap.stack,
.forum-mobile:has(.board-main--masked) .forum-mobile__main,
.forum-mobile:has(.board-main--masked) .forum-wrap.stack {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.forum-mobile.forum-mobile--coming .forum-mobile__main,
.forum-mobile:has(.board-main--masked) .forum-mobile__main {
  display: flex;
  flex-direction: column;
}

.forum-mobile.forum-mobile--coming .board-main--masked,
.forum-mobile:has(.board-main--masked) .board-main--masked {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.forum-mobile.forum-mobile--coming .board-toolbar,
.forum-mobile:has(.board-main--masked) .board-toolbar {
  position: static;
}

.forum-mobile .forum-wrap > .col-side {
  margin-top: var(--space-1);
}
.forum-mobile .forum-wrap > div.col-side {
  margin-bottom: var(--space-4);
}

.forum-mobile .col-side.sticky {
  position: static;
  top: auto;
  max-height: none;
  padding: 0;
  margin: 0;
  overflow: visible;
}

.forum-mobile .sticky { top: var(--space-2); }
html.org-box-host .forum-mobile .sticky { top: calc(var(--space-2) + var(--org-box-system-bar)); }

.forum-mobile .board-toolbar {
  position: sticky;
  top: calc(var(--mobile-board-nav-h) + var(--mobile-sticky-inset));
  z-index: 15;
  margin-bottom: 0;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  background: var(--surface);
}

/* 分类标签独占一行。排序另起一行，靠左，不和标签并排。 */
.forum-mobile .chat-toolbar,
.forum-mobile .board-toolbar:has(.board-toolbar__tabs) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  padding-bottom: 8px;
}
.forum-mobile .chat-toolbar .board-toolbar__filters,
.forum-mobile .board-toolbar:has(.board-toolbar__tabs) .board-toolbar__filters {
  display: contents;
}
.chip-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  min-width: 0;
  width: 100%;
}
.forum-mobile .chip-rail {
  grid-column: 1 / -1;
}
.chip-rail__scroller {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;
  direction: ltr;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.chip-rail__scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.chip-rail__scroller .ui-tabs-line {
  overflow: visible;
}
.chip-rail__end-pad {
  flex: none;
  width: 0;
  height: 1px;
  pointer-events: none;
}
.chip-rail__arrow {
  position: static;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  transform: none;
  cursor: pointer;
}
.chip-rail__triangle {
  display: block;
}
.forum-mobile .chip-rail__scroller .ui-chip-magnet {
  flex: none;
  max-width: none;
}
.forum-mobile .chat-toolbar__tags .ui-chip,
.forum-mobile .board-toolbar__tabs .ui-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  min-height: 26px;
  height: 26px;
  margin: 0;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}
.forum-mobile .chat-toolbar .board-toolbar__filter,
.forum-mobile .board-toolbar:has(.board-toolbar__tabs) .board-toolbar__filter {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}
.forum-mobile .chat-toolbar .board-toolbar__sort,
.forum-mobile .board-toolbar:has(.board-toolbar__tabs) .board-toolbar__sort {
  grid-column: 1 / -1;
  margin-left: 0;
  justify-self: start;
}

.forum-mobile .ggrid {
  /* 旧 WebView 只认 grid-row-gap，不认 gap。两条都写，支持的那条生效，不会叠成双倍。 */
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  row-gap: 16px;
  column-gap: 16px;
  gap: 16px;
}
@supports not (grid-row-gap: 1px) {
  .forum-mobile .ggrid > * + * {
    margin-top: 16px;
  }
}
/* 开源工程和模板卡片直接排在列表里，不走 ggrid。旧手机不认 flex gap，用相邻外边距。 */
.forum-mobile .board-main__list > .ui-poster-card + .ui-poster-card {
  margin-top: 16px;
}

.forum-mobile .panel-h {
  padding: 10px 12px;
}

.forum-mobile .panel-b {
  padding: 12px;
}
/* 编辑区跟正文 .panel-b 同步收窄内边距。 */
.forum-mobile .rich-editor:not(.rich-editor--reply) .tiptap-surface {
  padding: 12px;
}

.forum-mobile .panel-f {
  padding: 10px 12px;
  gap: 8px;
}

.forum-mobile .floor-top {
  padding: 8px 12px;
}

.forum-mobile .floor-b {
  padding: 12px;
}
.forum-mobile .floor-react {
  padding: 0 12px 12px;
}
.forum-mobile .floor-react__row {
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 8px;
}
/* /m 回复区不提供回复和编辑，一层跟帖和楼中楼都藏。 */
.forum-mobile .floor-react .floor-actions__reply,
.forum-mobile .floor-react .floor-actions__edit,
.forum-mobile .floor-sub__actions .floor-actions__reply.ui-icon-btn,
.forum-mobile .floor-sub__actions .floor-actions__edit.ui-icon-btn {
  display: none;
}
.forum-mobile .floor-emoji-row .floor-react__chip-sep,
.forum-mobile .floor-emoji-row .floor-react__chip-names {
  display: none;
}
.forum-mobile .floor-emoji-row .floor-react__chip.is-reacted {
  border-color: #ad9a5d;
  background: #f8f4e8;
  color: #ad9a5d;
}
.forum-mobile .ui-btn-magnet:has(> .floor-actions__reply),
.forum-mobile .ui-btn-magnet:has(> .floor-actions__edit) {
  display: none;
}

.forum-mobile .ghead {
  margin-bottom: 10px;
  gap: 12px;
}

.forum-mobile .ghead-tags {
  margin-bottom: 8px;
}
.forum-mobile .ghead--split {
  align-items: flex-start;
}
.forum-mobile .ghead--split .ghead-by {
  max-width: none;
  justify-content: flex-start;
}
.forum-mobile .ghead--text {
  align-items: center;
}
.forum-mobile .ghead--text .ghead-tags {
  margin-bottom: 0;
}
.forum-mobile .ghead--text .ghead-side,
.forum-mobile .ghead--text .ghead-by {
  max-width: none;
  justify-content: flex-end;
}

.forum-mobile .chat-post__tag {
  margin-bottom: 6px;
}

.forum-mobile .chat-post__title {
  margin: 0 0 10px;
}

.forum-mobile .chat-post__actions {
  gap: 8px;
}

.forum-mobile .ui-card__header {
  padding: 12px;
}
.forum-mobile .ui-popover > .ui-card__header,
.forum-mobile .ui-drawer > .ui-card__header {
  padding: 4px 12px;
}
.forum-mobile .ui-modal > .ui-card__header {
  padding: 8px 12px;
}

.forum-mobile .ui-card__body {
  padding: 12px;
}

.forum-mobile .ui-card__footer {
  padding: 10px 12px;
}

.forum-mobile .panel-p {
  padding: 12px;
}

.forum-mobile .ui-poster-card__body,
.forum-mobile .gcard-b {
  padding: 10px 12px 12px;
}

.fbar {
  position: relative;
  width: var(--sidebar-w);
  flex: none;
  height: 100%;
  overflow: visible;
  z-index: 40;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body, var(--font-family));
  background: transparent;
  border-right: 1px solid var(--line);
}
/* 模糊放在底层，手柄拖动不带动整栏重绘。宽度不过渡：过渡时文字会在窄栏里逐字折行，整页也每帧重排。 */
.fbar::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--surface-raised) 76%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  pointer-events: none;
}
.fbar.is-collapsed {
  --sidebar-w: 72px;
}
.fbar-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3) var(--space-4);
}
.fbar.is-collapsed .fbar-scroll {
  padding-inline: 4px;
}
.fbar-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}
.fbar-handle {
  position: absolute;
  top: 340px;
  right: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 22px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  box-shadow: var(--shadow);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: translate3d(50%, -50%, 0);
  transition: color .15s ease, background-color .15s ease;
}
/* 全局 button:active 的 translateY(1px) 会换掉上面的平移，按下时手柄会跳位。 */
.fbar-handle:active {
  transform: translate3d(50%, -50%, 0);
}
.fbar-handle::before {
  content: "";
  position: absolute;
  inset: -20px -8px;
}
.fbar-handle.is-dragging,
.fbar-handle.is-dragging:hover,
.fbar-handle.is-dragging:active {
  cursor: grabbing;
  transition: none;
}
.fbar-handle:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
}
.fbar-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text);
  padding: 4px 12px 8px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}
.fbar-season-switch.ui-switch {
  display: flex;
  padding: 0 12px 14px;
  min-height: 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.fbar-season-switch:hover {
  color: var(--accent-dark);
}
.fbar.is-collapsed .fbar-season-switch {
  display: none;
}
.fbar-brand img { width: 28px; height: 28px; flex: none; display: block; object-fit: contain; }
.fbar.is-collapsed .fbar-brand {
  position: relative;
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}
.fbar.is-collapsed .fbar-brand__text,
.fbar.is-collapsed .fbar-tab > span,
.fbar.is-collapsed .fbar-auth__name,
.fbar.is-collapsed .fbar-auth .ui-btn > span:not(.ui-btn__icon),
.fbar.is-collapsed .fbar-season-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.fbar-brand:hover { color: var(--accent-dark); }

.fbar-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.fbar-icon:hover { color: var(--accent-dark); background: var(--accent-soft); transform: translateY(-1px); }

.me-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.me-link {
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.me-link > svg { width: 22px; height: 22px; padding: 7px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-dark); box-sizing: content-box; }
.me-link strong { display: block; font-family: var(--font-display); }
.me-link small { color: var(--text-muted); }
.me-link { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.me-link:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow); }
.fbar-gap {
  flex: 1 0 auto;
  min-height: 16px;
}
.fbar-auth,
.fbar-scroll > .fbar-account {
  flex-shrink: 0;
}
.fbar-season-links {
  margin-top: 8px;
}
.fbar-award-magnet {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.fbar-season-links .fbar-award-magnet:first-child {
  margin-top: 0;
}
.fbar-award {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 7px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: #1a1008;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.fbar-award__plate,
.fbar-award__glass {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
}
.fbar-award__plate {
  background-color: #ebc54e;
  background-image: none;
}
.fbar-award:hover .fbar-award__plate {
  background-color: #f7cb5e;
}
.fbar-award--live .fbar-award__plate {
  background-color: #FEB34A;
  background-image: none;
}
.fbar-award--live:hover .fbar-award__plate {
  background-color: #ffc266;
  background-image: none;
}
.fbar-award--s2 .fbar-award__plate,
.fbar-award--s2:hover .fbar-award__plate {
  background-color: #B5F3FC;
  background-image: none;
}
.fbar-award__glass {
  z-index: 1;
  background-color: rgba(255, 252, 246, .34);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(7px) saturate(1.25);
  backdrop-filter: blur(7px) saturate(1.25);
}
.fbar-award__mark,
.fbar-award__copy {
  position: relative;
  z-index: 2;
}
.fbar-award__mark {
  -webkit-box-flex: 0;
  flex: none;
  width: 30px;
  height: 30px;
  margin-right: 8px;
}
.fbar-award__mark svg {
  display: block;
  width: 30px;
  height: 30px;
}
.fbar-award__copy {
  min-width: 0;
  -webkit-box-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  -webkit-box-align: start;
  align-items: flex-start;
  gap: 3px;
}
.fbar-award__title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
  align-items: baseline;
  margin: 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #2a1208;
  white-space: nowrap;
  gap: 3px;
}
.fbar-award__rest {
  line-height: 1;
}
.fbar-award__em {
  display: inline-block;
  margin-right: 2px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #fff7ec;
  filter:
    drop-shadow(0 1px 0 #2a1208)
    drop-shadow(0 -1px 0 #2a1208)
    drop-shadow(1px 0 0 #2a1208)
    drop-shadow(-1px 0 0 #2a1208);
}
.fbar-award__em-text {
  display: inline;
  line-height: 1;
  color: #fff7ec;
  background-image: none;
  -webkit-text-fill-color: #fff7ec;
}
.fbar-award__em--id,
.fbar-award__em--id .fbar-award__em-text {
  color: #2a1208;
  background-image: none;
  background-color: transparent;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #2a1208;
  -webkit-filter: none;
  filter: none;
  -webkit-animation: none;
  animation: none;
}
html[data-tablet] .fbar-award:hover .fbar-award__plate {
  background-color: #e0b01a;
  background-image: none;
}
html[data-tablet] .fbar-award--live:hover .fbar-award__plate {
  background-color: #e8a033;
  background-image: none;
}
html[data-tablet] .fbar-award--s2:hover .fbar-award__plate {
  background-color: #B5F3FC;
  background-image: none;
}
.fbar-gap + .fbar-tabs { padding-top: 14px; border-top: 1px solid var(--line); }
.fbar-auth + .fbar-account {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

.fbar-auth {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.fbar-auth__profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.fbar-auth--unread .fbar-auth__profile {
  padding-right: calc(20px + var(--space-3));
}
.fbar-auth > .ui-float-tip--end {
  position: absolute;
  top: calc(12px + 4px);
  right: 0;
  bottom: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 20px;
  margin-block: auto;
}
.fbar-auth__unread-magnet {
  display: flex;
  align-items: center;
  height: 20px;
}
.fbar-auth__unread {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.fbar-auth__unread-fx {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fbar-auth__unread-fx .unread-dot__mark {
  width: 100%;
  height: 100%;
}
.fbar-auth__unread-fx .unread-dot__core {
  display: none;
}
.fbar-auth__unread-fx .unread-dot__pulse {
  border-radius: var(--radius-pill);
  animation: fbar-unread-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.fbar-auth__unread .cmenu-badge {
  position: relative;
  z-index: 1;
}
@keyframes fbar-unread-ping {
  0% { transform: scale(1); opacity: .42; }
  80%, 100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fbar-auth__unread-fx .unread-dot__pulse { animation: none; opacity: 0; }
}
.fbar-auth__name {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fbar-auth__profile:hover .fbar-auth__name {
  color: var(--accent);
}
.fbar-auth .ui-btn-magnet--full,
.fbar-auth .ui-btn--full {
  align-self: stretch;
  width: 100%;
}
.fbar.is-collapsed .fbar-auth {
  flex-direction: column;
  align-items: center;
}
.fbar.is-collapsed .fbar-auth > .ui-float-tip--block {
  anchor-name: --fbar-auth-avatar;
}
.fbar.is-collapsed .fbar-auth > .ui-float-tip--end {
  position-anchor: --fbar-auth-avatar;
  top: anchor(top);
  left: anchor(right);
  right: auto;
  bottom: auto;
  width: max-content;
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
}
.fbar.is-collapsed .fbar-auth > .ui-float-tip--end .fbar-auth__unread,
.fbar.is-collapsed .fbar-auth > .ui-float-tip--end .fbar-auth__unread-magnet {
  height: 16px;
}
.fbar.is-collapsed .fbar-auth > .ui-float-tip--end .cmenu-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 10px;
}
.fbar.is-collapsed .fbar-auth__profile {
  flex: none;
  justify-content: center;
  padding-right: 0;
}
.fbar.is-collapsed .fbar-auth .ui-btn-magnet,
.fbar.is-collapsed .fbar-auth .ui-btn-magnet--full {
  width: auto;
  align-self: center;
}
.fbar.is-collapsed .fbar-auth .ui-btn {
  position: relative;
  width: 44px;
  min-width: 0;
  padding-inline: 0;
  justify-content: center;
}
.fbar-auth .ui-btn-magnet {
  flex-shrink: 0;
}
.mobile-auth-slot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

.login-prompt__title {
  user-select: none;
}

.login-prompt__account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 12px);
  background: var(--surface);
}

.login-prompt__label {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.login-prompt__name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.login-prompt__expired {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.login-prompt__intro {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: nowrap;
}

.login-prompt__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-prompt__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-prompt__hint {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.fbar-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  overflow: hidden;
  background: none;
  border: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-display);
  color: var(--text-muted);
  border-radius: var(--radius-control);
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.fbar-tab > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.fbar-tab svg,
.fbar-tab .fbar-ic {
  flex-shrink: 0;
  color: inherit;
  opacity: .85;
}

.fbar-tab:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
}
.fbar-tab.is-on {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.fbar-tab.is-on svg,
.fbar-tab.is-on .fbar-ic {
  opacity: 1;
  color: var(--accent-dark);
}
.fbar.is-collapsed .fbar-scroll > .ui-float-tip,
.fbar.is-collapsed .fbar-tabs,
.fbar.is-collapsed .fbar-account {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fbar.is-collapsed .fbar-tabs > .ui-float-tip,
.fbar.is-collapsed .fbar-account > .ui-float-tip,
.fbar.is-collapsed .fbar-scroll > .ui-float-tip,
.fbar.is-collapsed .fbar-auth > .ui-float-tip--block {
  align-self: center;
  width: auto;
  justify-content: center;
}
.fbar.is-collapsed .fbar-tab,
.fbar.is-collapsed .fbar-brand {
  width: 44px;
  min-width: 44px;
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}
.fbar-icon-tip {
  display: flex;
  width: 100%;
  justify-content: center;
}
.fbar.is-collapsed .fbar-icon-tip:not(.fbar-season-magnet),
.fbar.is-collapsed .fbar-icon-glare {
  width: auto;
}
.fbar-icon-glare {
  width: 100%;
  border-radius: var(--radius-control);
}

.fbar-season-magnet {
  width: 100%;
  margin-top: 10px;
  flex: none;
}
.fbar.is-collapsed .fbar-season-magnet {
  width: 44px;
  align-self: center;
}
.fbar.is-collapsed .specular-button.fbar-season {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
}
.fbar.is-collapsed .fbar-season__art {
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: right center;
}
.specular-button.fbar-season {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  border: none;
  border-radius: 0;
  background: none;
  background-color: transparent;
  color: #fff7ec;
  cursor: pointer;
  overflow: visible;
  box-shadow: none;
  backdrop-filter: none;
}
.fbar-season .specular-button__label {
  display: block;
  position: relative;
  width: 100%;
}
.fbar-season .specular-button__fx {
  z-index: 2;
  -webkit-mask-image: var(--fbar-season-art);
  mask-image: var(--fbar-season-art);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: calc(100% - 40px) calc(100% - 40px);
  mix-blend-mode: screen;
}
.fbar-season__art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.fbar-season-copy {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 15px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
  filter:
    drop-shadow(0 1px 0 #2a1208)
    drop-shadow(0 -1px 0 #2a1208)
    drop-shadow(1px 0 0 #2a1208)
    drop-shadow(-1px 0 0 #2a1208)
    drop-shadow(0 2px 4px rgba(18, 6, 2, .55));
}
.fbar-season.is-on .fbar-season__art {
  filter: brightness(1.04);
}
.fbar-season-k {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff7ec;
  line-height: 1.2;
}
.fbar-season-k .fbar-ic {
  width: 11px;
  height: 11px;
  color: #fff4d6;
  flex: none;
}
.fbar-season-k-text.shiny-text,
.fbar-season-t.shiny-text {
  color: #fff7ec;
  background-image: linear-gradient(
    105deg,
    #f6ead0 10%,
    #fffdf6 34%,
    #ffffff 46%,
    #ffe9a0 54%,
    #fff8e4 72%,
    #f4e2c0 92%
  );
}
.fbar-season-t {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  color: #fff7ec;
  white-space: nowrap;
}
.fbar-season--bare {
  min-height: 52px;
  padding: 8px 4px;
}
.fbar-season--bare .fbar-season-copy {
  position: static;
  right: auto;
  bottom: auto;
  filter: none;
}
.fbar-season--bare .fbar-season-k,
.fbar-season--bare .fbar-season-k .fbar-ic {
  color: var(--accent-dark);
}
.fbar-season--bare .fbar-season-k-text.shiny-text,
.fbar-season--bare .fbar-season-t.shiny-text {
  color: var(--accent-dark);
  background-image: linear-gradient(
    105deg,
    var(--accent-dark) 16%,
    var(--accent) 38%,
    color-mix(in srgb, var(--accent) 40%, var(--surface-raised)) 50%,
    var(--accent) 64%,
    var(--accent-dark) 88%
  );
}

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: var(--space-3); row-gap: var(--space-3); align-items: start; }
.cols:has(> .board-toolbar) {
  row-gap: 8px;
}
.cols > * { min-width: 0; }
.forum-wrap:has(> .cols-wide) > .post-chrome,
.cols-wide,
.cols:has(.col-side.sticky) {
  --post-side: 320px;
}

.cols-wide,
.cols:has(.col-side.sticky) {
  grid-template-columns: minmax(0, 1fr) minmax(200px, var(--post-side));
}

@media (max-width: 1280px) {
  .forum-wrap:has(> .cols-wide) > .post-chrome,
  .cols-wide,
  .cols:has(.col-side.sticky) {
    --post-side: 260px;
  }
}
.col-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: visible;
  scrollbar-width: none;
}
.side-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
.col-side::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}
.col-side > * {
  flex: none;
}
/* iPad 不认侧栏 flex gap，帖子详情右侧各张卡会贴在一起。只在这里用相邻外边距。 */
html[data-tablet] .cols-wide > .col-side {
  gap: 0;
}
html[data-tablet] .cols-wide > .col-side > * + * {
  margin-top: 14px;
}
.sticky { position: sticky; top: 20px; z-index: 2; }
.col-side.sticky {
  /* 正文只离滚动容器 10px。top:20px 再加顶部内边距，会在版主卡上面空出一条。 */
  top: var(--space-5);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  /* overflow-y:auto 会把另一轴也变成 auto，左右和底部留白给阴影。 */
  padding: 0 10px 16px;
  margin: 0 -10px -16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cols > .cols-lead {
  grid-column: 1;
}
.cols > .board-main,
.cols > .search-main {
  grid-column: 1;
}
.cols:has(> .cols-lead) > .col-side {
  grid-column: 2;
  grid-row: 2;
}
.cols:has(> .cols-lead + .cols-lead) > .col-side {
  grid-row: 3;
}

.col-side .ui-search-input {
  min-height: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
}
.col-side .ui-search-input input {
  height: 36px;
  font-size: 13.5px;
  line-height: 36px;
}

.col-side .ui-card,
.col-side .ui-list-card,
.col-side .panel {
  border-radius: var(--radius-card);
  border-color: var(--line);
  padding: 0;
  overflow: visible;
}

.col-side .ui-list-card {
  padding: 0 14px 12px;
}

.col-side .ui-card__header,
.col-side .ui-list-card h4,
.col-side .side-h {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  letter-spacing: .04em;
  background: transparent;
}
.col-side .ui-list-card h4 {
  margin: 0 -14px 2px;
}
.col-side .ui-card__header .ic,
.col-side .side-h .ic {
  color: var(--accent-dark);
}
.col-side .side-h.side-h--toc {
  align-items: flex-start;
  background: #f1f1f4;
  background: color-mix(in srgb, var(--surface-muted) 48%, var(--surface-raised));
}
.col-side .side-h--toc svg {
  flex: none;
  margin-top: 2px;
}
.col-side .side-h__title {
  min-width: 0;
  flex: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

.col-side .ui-card__body {
  padding: 12px 14px;
}

.col-side .side-b {
  padding: 8px 10px 12px;
}
.col-side .panel:has(> .side-h--toc) {
  overflow: hidden;
  background: var(--surface-raised);
  border-radius: 16px;
}
.col-side .side-h--toc + .side-b {
  font-size: 13px;
  background: var(--surface-raised);
  border-radius: 0 0 16px 16px;
}

.col-side .ui-list-item,
.col-side .rank {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: calc(100% + 28px);
  max-width: none;
  min-width: 0;
  margin: 0 -14px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.col-side .side-b .rank {
  padding-left: calc(14px + (var(--toc-indent, 0) * 12px));
}
.col-side .ui-list-item:hover,
.col-side .rank:hover {
  background: transparent;
}
.col-side .ui-list-item:last-child,
.col-side .rank:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.col-side .rank-i {
  width: 18px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  flex: none;
}
.col-side .rank-i.top {
  color: var(--accent-dark);
  font-weight: 700;
}
.col-side .ui-list-item__name,
.col-side .rank-t {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  transition: color .2s ease;
}
.col-side .side-b .rank[data-toc-level="1"] .rank-t,
.col-side .side-b .rank[data-toc-level="2"] .rank-t {
  font-size: 13px;
}
.col-side .side-b .rank[data-toc-level="3"] .rank-t {
  font-size: 12px;
  font-weight: 500;
}
.col-side .ui-list-item__text {
  min-width: 0;
  flex: 1;
}
.col-side .ui-list-item:hover .ui-list-item__name,
.col-side .rank:hover .rank-t {
  color: var(--accent-dark);
}
.col-side .ui-list-item__sub,
.col-side .rank-x {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.rules-card .ui-list-item__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-side .ui-list-item__name:has(.mark-digest) {
  display: flex;
  align-items: flex-start;
}
.col-side .ui-list-item__name .mark-digest {
  flex: none;
}
.col-side .ui-list-item__name .mark-digest + span {
  min-width: 0;
  flex: 1;
}

.col-side .owork {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.col-side .owork:first-child { padding-top: 8px; }
.col-side .owork:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.col-side .owork:hover { background: transparent; }
.col-side .owork:hover .owork-t { color: var(--accent-dark); }
.col-side .side-b > .rank,
.col-side .side-b > .owork {
  width: 100%;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition: transform .22s ease;
}
.col-side .side-b > .rank {
  padding-left: calc(10px + (var(--toc-indent, 0) * 12px));
}
.col-side .side-b > .rank:last-child,
.col-side .side-b > .owork:last-child {
  padding-bottom: 8px;
  border-bottom: 0;
}
.col-side .side-b > .rank:hover,
.col-side .side-b > .owork:hover {
  background: transparent;
  transform: translateX(2px);
}
@media (prefers-reduced-motion: no-preference) {
  .col-side .side-b > .rank,
  .col-side .side-b > .owork {
    animation: side-b-row-in .36s ease backwards;
  }
  .col-side .side-b > :nth-child(2) { animation-delay: .04s; }
  .col-side .side-b > :nth-child(3) { animation-delay: .08s; }
  .col-side .side-b > :nth-child(4) { animation-delay: .12s; }
  .col-side .side-b > :nth-child(5) { animation-delay: .16s; }
  .col-side .side-b > :nth-child(n + 6) { animation-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .col-side .side-b > .rank,
  .col-side .side-b > .owork {
    animation: none;
    transition: none;
  }
}
@keyframes side-b-row-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.col-side .owork .cover,
.col-side .owork-cover {
  width: 76px;
  height: auto;
  flex: none;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-control);
}
.col-side .owork-t {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 3px;
  color: var(--text);
}
.author-others .owork-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.col-side .floor-un {
  font-size: 13px;
}
.col-side .event-promo {
  border-radius: var(--radius-card);
}
.col-side .event-promo-b {
  padding: 12px 14px 14px;
}
.col-side .event-promo-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.col-side .event-promo-t {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: .04em;
  color: var(--text);
}
.col-side .event-promo-x {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.65;
}

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent), var(--shadow); */
  overflow: hidden;
}
.panel.panel--inbox {
  overflow: visible;
}
.panel.floor-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-width: 0;
  container: floorboard / inline-size;
}
.floor-board > .floor-board__head,
.floor-board > .replybox,
.floor-board > .floor-locked,
.floor-board > .floor-empty,
.floor-board > .ui-content-loading,
.floor-list > .floor,
.floor-board > .floor {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), var(--shadow);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent), var(--shadow);
}
.floor-board > .floor-board__head,
.floor-board > .replybox,
.floor-board > .floor-locked,
.floor-board > .floor-empty,
.floor-board > .ui-content-loading {
  overflow: visible;
}
.floor-list > .floor,
.floor-board > .floor {
  overflow: hidden;
  border-radius: 0;
}
.panel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-display);
}
.panel-b { padding: 18px; }
.panel-b.catalog-intro {
  padding-bottom: 20px;
}
.forum-mobile .panel-b.catalog-intro {
  padding-bottom: 16px;
}
.panel-b.is-project-detail {
  padding-bottom: 0;
}
.panel-b > .sample-grid {
  margin-top: 0;
}
.panel-f {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.panel-f > .chat-post__actions {
  grid-column: 2;
  justify-self: center;
}
.panel-f > .panel-f__report {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}
.panel-f__report .ui-btn-magnet {
  display: inline-flex;
}
.panel-report {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 18px 10px;
}
.panel-report .ui-btn-magnet {
  display: inline-flex;
}
.panel-report .ui-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  background: var(--surface-raised);
  color: var(--text);
  line-height: 0;
  overflow: visible;
}
.panel-report .ui-icon-btn svg {
  display: block;
  width: 14px;
  height: 14px;
}
.panel-report .ui-icon-btn:hover:not(:disabled) {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--text);
  transform: none;
}
.panel-report .ui-icon-btn.ui-hover-glow::before,
.panel-report .ui-icon-btn.ui-hover-glow::after {
  content: none;
}

.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt { margin-top: 14px; }
.txt-s { font-size: 12px; color: var(--text-muted); }
.about-lockup__version { margin: 6px 0 0; }
.txt-m { font-size: 13px; color: var(--text-muted); }
/* 申请作者弹窗正文比默认 13px 大一号。 */
.ui-modal.author-apply-dialog > .ui-card__body .txt-m {
  font-size: 14px;
}

.forum-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  /* 只用 background-color：简写 background 会冲掉 Cover 缺省图的 size/position */
  background-color: var(--surface-muted);
}

.cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cover-1, linear-gradient(135deg, rgb(232, 232, 237), rgb(210, 210, 215) 60%, rgb(161, 161, 166)));
}

.cover-1 { background: var(--cover-1, linear-gradient(135deg, rgb(232, 232, 237), rgb(210, 210, 215) 60%, rgb(161, 161, 166))); }
.cover-2 { background: var(--cover-2, linear-gradient(135deg, rgb(201, 214, 227), rgb(159, 179, 200) 60%, rgb(107, 127, 149))); }
.cover-3 { background: var(--cover-3, linear-gradient(135deg, rgb(227, 211, 220), rgb(192, 162, 180) 60%, rgb(142, 110, 130))); }
.cover-4 { background: var(--cover-4, linear-gradient(135deg, rgb(215, 224, 206), rgb(169, 188, 154) 60%, rgb(123, 144, 104))); }
.cover-5 { background: var(--cover-5, linear-gradient(135deg, rgb(229, 220, 201), rgb(191, 174, 142) 60%, rgb(140, 123, 92))); }

/* 无图兜底：缺省图路径由 Cover 组件内联 background-image 给出（工程 public/assets/empty） */
.cover--empty,
.cover--pending,
.cover--reviewing {
  background-color: var(--surface-muted);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 58%;
}

/* 封面加载中：shimmer 占位，盖在 img 上、标签/播放键之下 */
.cover__loading {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  overflow: hidden;
  background: var(--surface-muted);
  pointer-events: none;
}

/* 下一张已在请求，但先留着当前这张，避免轮播切图时闪灰 */
.cover__incoming {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 0;
  pointer-events: none;
}

/* 轮播换图：下一张从一侧滑入，当前张从另一侧滑出 */
.cover__pane {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  display: block;
  overflow: hidden;
}
.cover--slide.is-next > .cover__pane.is-enter { transform: translateX(100%); }
.cover--slide.is-prev > .cover__pane.is-enter { transform: translateX(-100%); }
.cover--slide.is-go > .cover__pane { transition: transform 0.45s ease; }
.cover--slide.is-next.is-go > .cover__pane.is-enter,
.cover--slide.is-prev.is-go > .cover__pane.is-enter { transform: translateX(0); }
.cover--slide.is-next.is-go > .cover__pane.is-leave { transform: translateX(-100%); }
.cover--slide.is-prev.is-go > .cover__pane.is-leave { transform: translateX(100%); }
.cover__pane .forum-cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .cover--slide.is-go > .cover__pane { transition: none; }
  .cover--slide > .cover__pane { transform: none; }
}

.cover--pending .cover__loading {
  background: transparent;
}

.cover__loading::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--surface-raised) 72%, transparent) 47%, transparent 66%);
  transform: translateX(-110%);
  animation: skeleton-shimmer 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cover__loading::after { animation: none; }
}

.gcard .cover,
.ui-poster-card .cover,
.event-promo .cover,
.buy-cover .cover {
  border-radius: 0;
}

.forum-cover--empty {
  display: block;
}

.ui-media-fallback {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 13px;
}

.ggrid {
  --gcard-q-mb: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  /* 同一行卡片随该行最高项拉齐；不同行各自按内容定高。 */
  align-items: stretch;
}
.ggrid-1 { grid-template-columns: minmax(0, 1fr); }
.board-main .ui-content-loading--cards .ui-content-loading__body {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.ggrid .ui-poster-card__body {
  display: flex;
  flex-direction: column;
  /* 封面不参与拉伸。同行里较短的卡片只把多出来的高度留在正文下方，用来对齐这一行的底边。 */
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 10px 10px 12px;
}
.ggrid .ui-poster-card__title {
  order: 0;
  margin-bottom: 6px;
}
.gcard-byline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.gcard-byline__author {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.gcard-byline__tags {
  display: flex;
  flex: none;
  align-items: baseline;
  justify-content: flex-end;
  max-width: 58%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  color: var(--text-muted);
}
.gcard-byline__tag {
  flex: none;
  white-space: nowrap;
}
.gcard-byline__tag + .gcard-byline__tag::before {
  content: ' · ';
}
.gcard-byline__tag[hidden] {
  display: none;
}
.forum-wrap .ui-poster-card__cover {
  aspect-ratio: 16 / 9;
}
.forum-wrap .ui-poster-card__cover .cover,
.forum-wrap .ui-poster-card__cover .forum-cover {
  background-color: color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised));
}
.forum-wrap .ui-poster-card__cover .cover--empty,
.forum-wrap .ui-poster-card__cover .cover--pending,
.forum-wrap .ui-poster-card__cover .cover--reviewing,
.forum-wrap .ui-poster-card__cover .forum-cover.cover--empty {
  background-size: auto 58%;
  background-position: center;
  background-repeat: no-repeat;
}
.gcard-anim {
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}
.gcard-anim .gcard,
.gcard-anim .ui-poster-card {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.gcard-anim .ui-poster-card__cover {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
}
/* 文游列表封面一律 16:9，不随同行卡片被拉高。高度只由下面的占位决定。 */
.ggrid .gcard-anim .ui-poster-card__cover {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}
/* 列表封面只靠占位锁 16:9。aspect-ratio 和 ::before 叠在一起会把高度吃成 0；内层 .cover 再带比例会跟着原图把盒子撑歪。 */
.gcard-anim .ui-poster-card__cover::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
@supports (aspect-ratio: 16 / 9) {
  .mod-picks__cover::before {
    content: none;
    display: none;
    padding-top: 0;
  }
}
.gcard-anim .ui-poster-card__cover > .glare-hover,
.gcard-anim .ui-poster-card__cover .cover,
.gcard-anim .ui-poster-card__cover .forum-cover,
.gcard-anim .ui-poster-card__cover img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
html[data-tablet] .ggrid .gcard-anim .ui-poster-card__cover > .glare-hover,
html[data-tablet] .ggrid .gcard-anim .ui-poster-card__cover .cover,
html[data-tablet] .ggrid .gcard-anim .ui-poster-card__cover .forum-cover,
html[data-tablet] .ggrid .gcard-anim .ui-poster-card__cover img {
  transform: none;
}
.ggrid .gcard-anim .ui-poster-card__body {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.gcard .glare-hover,
.ui-poster-card .glare-hover { display: block; }

.ggrid .ui-poster-card__desc {
  order: 2;
  flex: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.55;
  /* 按实际行数撑开，最多三行。固定三行会在短简介下面留出空白。 */
  height: auto;
  max-height: calc(1.55em * 3);
  -webkit-line-clamp: 3;
  line-clamp: 3;
  margin-bottom: 0;
  min-height: 0;
  overflow: hidden;
}

html[data-tablet] .ggrid .gcard-anim .ui-poster-card {
  min-height: auto;
}
html[data-tablet] .ggrid .gcard-anim .ui-poster-card__body {
  flex: 1 1 auto;
  overflow: visible;
}
html[data-tablet] .ggrid .ui-poster-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: visible;
  white-space: normal;
}
.ggrid .gcard-q { order: 3; }
.gcard-q {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: none;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-bottom: var(--gcard-q-mb);
  padding: 9px 11px;
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: var(--radius-control);
}
.gcard-q .rec { margin-bottom: 1px; }
.gcard-q-t {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  height: calc(1.6em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcard-q-t.gcard-q-t--open,
.gcard-q-t:has(.is-rich),
.gcard-q-t:has(.rich-spoiler),
.gcard-q-t:has(.rich-media-host),
.gcard-q-t:has(.refcard) {
  display: block;
  height: auto;
  max-height: 14rem;
  overflow: auto;
  -webkit-line-clamp: unset;
}
.gcard-q.gcard-q--open,
.gcard-q:has(.is-rich),
.gcard-q:has(.rich-spoiler),
.gcard-q:has(.refcard) {
  height: auto;
}
.gcard-q-t .refcard { margin: 6px 0; padding: 8px; }
.gcard-q-t .refcard__cover { width: 48px; max-width: 48px; }
.gcard-q-t .rich-spoiler { margin: 6px 0; }
.gcard-q-t strong { font-weight: 700; }
.gcard-q-t em { font-style: italic; }
.gcard-q-t [data-blackout] {
  background: var(--text);
  color: var(--text);
  padding: 0 4px;
  border-radius: 0;
  cursor: help;
  transition: color .15s ease;
}
.gcard-q-t [data-blackout]:hover,
.gcard-q-t [data-blackout]:focus-visible {
  color: var(--surface-raised);
  outline: none;
}
.gcard-q-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  margin-top: auto;
}
.gcard-q-by {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard-q-likes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: none;
  height: 12px;
  font-size: 11.5px;
  line-height: 12px;
  color: var(--text-muted);
  pointer-events: none;
  user-select: none;
  vertical-align: middle;
}
.gcard-q-likes svg {
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
}
.ggrid .ui-poster-card__meta {
  order: 1;
  flex: none;
  align-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: auto;
  margin-top: 0;
  margin-bottom: 6px;
  overflow: visible;
}
.rec {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
.rec svg { width: 13px; height: 13px; flex: none; }
.rec-yes { color: var(--success); }
.rec-no { color: var(--text-muted); }
.gcard-meta { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.gcard-meta .dot,
.ui-poster-card__meta .dot {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0 2px;
  padding: 0;
  line-height: 1;
  color: var(--surface-strong);
}

.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tb-talk { table-layout: fixed; }
.tb-oss { table-layout: fixed; }
.tb-talk .tb-talk__tag { width: 6.5rem; }
.tb-talk .tb-talk__author,
.tb-oss .tb-talk__author { width: 8rem; }
.tb-talk .tb-talk__time,
.tb-oss .tb-talk__time { width: 11.5rem; }
.tb-talk td.tb-talk__time,
.tb-oss td.tb-talk__author { white-space: nowrap; }
.tb-oss td.tb-talk__time {
  overflow: hidden;
  white-space: normal;
}
.tb-oss .tb-discover__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tb-oss .tb-discover__nick,
.tb-oss .tb-discover__person .txt-s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
}
.tb-oss .tb-discover__person .txt-s {
  font-size: 11px;
  line-height: 14px;
}
.tb-oss td.tb-talk__author {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-oss td.tb-talk__author .tb-discover__person {
  align-items: center;
  min-width: 0;
}
.tb-talk td:nth-child(1),
.tb-talk td:nth-child(3),
.tb-talk td:nth-child(4) { white-space: nowrap; }
.tb-talk td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-talk td:nth-child(2) { min-width: 0; }
.tb-discover { table-layout: fixed; }
.tb-discover .tb-discover__stats { width: 4.75rem; }
.tb-discover .tb-discover__author,
.tb-discover .tb-discover__reply { width: 11.25rem; }
.tb.tb-discover td { padding: 8px 10px; vertical-align: middle; }
.tb.tb-discover td.tb-discover__stats,
.tb.tb-discover th:nth-child(2) {
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
}
.tb.tb-discover th:nth-child(3),
.tb.tb-discover th:nth-child(4),
.tb.tb-discover td.tb-discover__author,
.tb.tb-discover td.tb-discover__reply {
  padding-left: 10px;
  padding-right: 10px;
}
.tb.tb-discover th:first-child,
.tb.tb-discover td:first-child {
  padding-left: 18px;
  overflow: hidden;
}
.tb.tb-discover th:last-child,
.tb.tb-discover td:last-child { padding-right: 18px; }
.tb-discover td.tb-discover__stats .tb-discover__stats-list {
  display: inline-flex;
}
.tb-discover div.tb-discover__title,
.tb-discover-card .ui-poster-card__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.tb-discover div.tb-discover__title > :not(.tb-discover__name) {
  flex: none;
}
.tb-discover__name,
.tb-discover__nick {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
}
.tb-discover td .tb-discover__title {
  flex-wrap: nowrap;
}
.tb-discover td .tb-discover__name {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.tb-discover td .tb-discover__name-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}
.tb-discover td .tb-discover__read {
  white-space: nowrap;
}
.tb-discover tbody tr:hover .tb-discover__name {
  color: var(--accent-dark);
}
.tb-discover__lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin-top: 6px;
}
.tb-discover__lead .tb-x {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  -webkit-line-clamp: 2;
  line-height: 1.5;
}
.tb-discover .tb-discover__shots {
  flex: none;
  margin-top: 0;
}
.tb-discover__read {
  flex: none;
  margin-left: 4px;
  padding: 0;
  background: none;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 17px;
}
.tb-discover tbody tr:hover .tb-discover__read {
  color: var(--text-muted);
}
.tb-custom-tag { margin-right: 4px; }
.tb-discover__shots {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tb-discover__shot {
  position: relative;
  display: grid;
  width: 72px;
  height: 48px;
  overflow: hidden;
  border-radius: 6px;
  background: transparent;
}
.tb-discover__shot img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tb-discover__shot--more {
  background: transparent;
}
.tb-discover__more {
  grid-area: 1 / 1;
  z-index: 1;
  place-self: center;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(72, 72, 76, 0.62);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.tb-discover__reply .tb-discover__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 作者列和最后回复列很窄，两行昵称或折行的「10-16（1小时前）」会把整行撑高，标题上下就空出来。 */
.tb-discover .tb-discover__nick,
.tb-discover .tb-discover__person .txt-s {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font-size: 12px;
  line-height: 16px;
}
.tb-discover .tb-discover__person .txt-s {
  font-size: 11px;
  line-height: 14px;
}
.tb-discover__stats-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.tb-discover__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 14px;
  line-height: 14px;
}
.tb-discover__stat > svg,
.tb-discover__stat > span {
  display: block;
  height: 14px;
  line-height: 14px;
  flex: none;
}
.tb-discover__person {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.tb-discover__identity {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.tb-discover__who { min-width: 0; }

/* 创作经验分享 / 点评与杂谈：表不够宽时标题列放不下摘要和插图。
   固定列大约 27.25rem（浏览量 4.75 + 作者 11.25 + 最后回复 11.25），
   表窄于 49rem 就收成窄表。宽表不进这条，默认排版不变。 */
.panel.panel--talk {
  container: talktable / inline-size;
}
@container talktable (max-width: 49rem) {
  .tb-discover col.tb-discover__reply { width: 0; }
  .tb-discover thead th:nth-child(4),
  .tb-discover td.tb-discover__reply { display: none; }
  .tb-discover thead th:nth-child(3),
  .tb-discover td.tb-discover__author { padding-right: 18px; }
  .tb-discover__lead { display: none; }
  .tb-discover td .tb-discover__title { align-items: flex-start; }
  .tb-discover td .tb-discover__name {
    align-items: flex-end;
    white-space: normal;
  }
  .tb-discover td .tb-discover__name-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    flex: 1 1 auto;
    width: 0;
    max-width: max-content;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-overflow: unset;
  }
  .tb-discover td .tb-discover__read {
    align-self: flex-end;
    flex: none;
    white-space: nowrap;
  }
}
/* 容器查询要到 Safari 16。旧系统按窗口宽度走同一套窄表，避免窄窗仍挤成一行。 */
@supports not (container-type: inline-size) {
  @media (max-width: 1240px) {
    .panel.panel--talk .tb-discover col.tb-discover__reply { width: 0; }
    .panel.panel--talk .tb-discover thead th:nth-child(4),
    .panel.panel--talk .tb-discover td.tb-discover__reply { display: none; }
    .panel.panel--talk .tb-discover thead th:nth-child(3),
    .panel.panel--talk .tb-discover td.tb-discover__author { padding-right: 18px; }
    .panel.panel--talk .tb-discover__lead { display: none; }
    .panel.panel--talk .tb-discover td .tb-discover__title { align-items: flex-start; }
    .panel.panel--talk .tb-discover td .tb-discover__name {
      align-items: flex-end;
      white-space: normal;
    }
    .panel.panel--talk .tb-discover td .tb-discover__name-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      flex: 1 1 auto;
      width: 0;
      max-width: max-content;
      overflow: hidden;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
      text-overflow: unset;
    }
    .panel.panel--talk .tb-discover td .tb-discover__read {
      align-self: flex-end;
      flex: none;
      white-space: nowrap;
    }
  }
}

/* iPad 固定表格时，藏起的最后回复列会把剩余宽度吃掉，标题列被压成一字一行。
   标题列占满剩下的宽度，标题按格子折行。桌面和手机不走这里。 */
html[data-tablet] .panel.panel--talk {
  width: 100%;
  min-width: 0;
}
html[data-tablet] .panel.panel--talk .tb-discover {
  width: 100%;
}
html[data-tablet] .panel.panel--talk .tb-discover col.tb-discover__title {
  width: 100%;
}
html[data-tablet] .panel.panel--talk .tb-discover td .tb-discover__name-text {
  width: auto;
  max-width: 100%;
}

.tb-discover-card .tb-discover__person {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-right: 8px;
}
.tb-discover-card .tb-discover__role {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}
.tb-discover-card .tb-discover__identity {
  align-items: center;
  gap: 4px;
  width: 100%;
}
.tb-discover-card .tb-discover__replied {
  align-items: flex-end;
}
.tb-discover-card .tb-discover__stats-list {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.forum-mobile .board-main__list > .stack {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.forum-mobile .board-main__list > .stack > * + * {
  margin-top: 12px;
}
.forum-mobile .tb-discover-card {
  display: block;
  box-sizing: border-box;
  /* 旧 WebView 里 button 的宽度跟文字走，width:100% 和 min-width:0 都会被忽略。
     宽度写成 0，再用 min-width:100% 拉回父级，文字就不能把卡片撑宽。 */
  width: 0;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  text-align: left;
}
.forum-mobile .tb-discover-card .ui-poster-card__body {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px 14px 14px;
}
.forum-mobile .tb-discover-card .ui-poster-card__title {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 20px;
}
.forum-mobile .tb-discover-card .tb-discover__title {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  line-height: 20px;
}
.forum-mobile .tb-discover-card .tb-discover__title > .badge,
.forum-mobile .tb-discover-card .tb-discover__title > .mark-pin,
.forum-mobile .tb-discover-card .tb-discover__title > .mark-digest,
.forum-mobile .tb-discover-card .tb-discover__title > .mark-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: left;
  box-sizing: border-box;
  height: 20px;
  margin: 0 6px 0 0;
  padding: 0 6px;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.forum-mobile .tb-discover-card .tb-discover__title > .mark-pin,
.forum-mobile .tb-discover-card .tb-discover__title > .mark-digest {
  width: 16px;
  height: 16px;
  margin: 2px 6px 0 0;
  padding: 0;
  line-height: 16px;
}
.forum-mobile .tb-discover-card .tb-discover__name {
  display: block;
  position: relative;
  overflow: visible;
  width: auto;
  max-width: 100%;
  line-height: 20px;
  white-space: normal;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.forum-mobile .tb-discover-card .tb-discover__name.is-read {
  padding-right: 52px;
}
.forum-mobile .tb-discover-card .tb-discover__name-text {
  display: inline;
  overflow: visible;
  line-height: 20px;
  white-space: normal;
  word-wrap: break-word;
  text-overflow: clip;
}
.forum-mobile .tb-discover-card .tb-discover__read {
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.forum-mobile .ui-poster-card__title > .mark-pin,
.forum-mobile .ui-poster-card__title > .mark-digest {
  margin-right: 4px;
}
.forum-mobile .ui-poster-card__title > .mark-pin + .mark-digest {
  margin-left: 0;
}
.forum-mobile .tb-discover-card .ui-poster-card__desc,
.forum-mobile .tb-discover-card .ui-poster-card__desc--excerpt {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: hidden;
}
.forum-mobile .tb-discover-card .talk-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: hidden;
  line-height: 1.55;
  white-space: normal;
  word-wrap: break-word;
  text-overflow: ellipsis;
}
.forum-mobile .tb-discover-card .tb-discover__stats-list {
  display: block;
  flex: none;
  width: auto;
  max-width: 58%;
  margin-top: 0;
  margin-left: 12px;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-align: right;
  gap: 0;
}
.forum-mobile .tb-discover-card .tb-discover__stat:last-child {
  margin-right: 0;
}
.forum-mobile .tb-discover-card .tb-discover__stat {
  display: inline-block;
  height: 16px;
  margin: 0 16px 0 0;
  padding: 0;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  gap: 0;
}
.forum-mobile .tb-discover-card .tb-discover__stat > svg,
.forum-mobile .tb-discover-card .tb-discover__stat > span {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.forum-mobile .tb-discover-card .tb-discover__stat > svg {
  width: 14px;
  height: 14px;
}
.forum-mobile .tb-discover-card .tb-discover__stat > span {
  height: 16px;
  margin-left: 6px;
  font-size: 12px;
  line-height: 16px;
}
.forum-mobile .tb-discover-card .ui-poster-card__meta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  margin-top: 8px;
  overflow: hidden;
}
.forum-mobile .tb-discover-card .tb-discover__person {
  display: block;
  flex: 0 1 48%;
  width: 48%;
  max-width: 48%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.forum-mobile .tb-discover-card .tb-discover__person.is-solo {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}
.forum-mobile .tb-discover-card .tb-discover__role {
  display: block;
  margin-bottom: 2px;
}
.forum-mobile .tb-discover-card .tb-discover__identity {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.forum-mobile .tb-discover-card .tb-discover__identity > .ui-avatar {
  display: block;
  flex: none;
  margin-right: 4px;
  text-align: center;
}
.forum-mobile .tb-discover-card .tb-discover__who {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
}
.forum-mobile .tb-discover-card .tb-discover__nick,
.forum-mobile .tb-discover-card .tb-discover__person .txt-s {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}
.forum-mobile .tb-discover-card .tb-discover__person .ui-avatar,
.forum-mobile .tb-discover-card .tb-discover__person .ui-avatar.ui-avatar--sm {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}
.forum-mobile .tb-discover-card .tb-discover__replied .tb-discover__identity {
  display: block;
  text-align: right;
}
.forum-mobile .tb-discover-card .tb-discover__replied .tb-discover__identity > .ui-avatar {
  display: inline-block;
  margin-right: 4px;
  margin-left: 0;
  vertical-align: middle;
}
.forum-mobile .tb-discover-card .tb-discover__replied .tb-discover__who {
  display: inline-block;
  max-width: calc(100% - 28px);
  vertical-align: middle;
  text-align: right;
}
.forum-mobile .tb-discover-card .tb-discover__nick {
  -webkit-line-clamp: 1;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.forum-mobile .tb-discover-card .tb-discover__person .txt-s {
  font-size: var(--type-micro);
  line-height: 12px;
}
.forum-mobile .tb-discover-card .tb-discover__replied {
  flex: 0 1 48%;
  width: 48%;
  max-width: 48%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-align: right;
}
.tb-talk .tb-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 17px;
}
.tb-talk .tb-x {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}
.tb-talk .tb-x [data-blackout],
.talk-excerpt [data-blackout] {
  background: var(--text-muted);
  color: var(--text-muted);
  padding: 0 3px;
  border-radius: 0;
  cursor: help;
  transition: color .15s ease;
}
.tb-talk .tb-x [data-blackout]:hover,
.tb-talk .tb-x [data-blackout]:focus-visible,
.talk-excerpt [data-blackout]:hover,
.talk-excerpt [data-blackout]:focus-visible {
  color: var(--surface-raised);
  outline: none;
}
.ui-poster-card__desc.ui-poster-card__desc--excerpt,
.ui-poster-card__desc:has(.talk-excerpt) {
  display: block;
  height: 1.75em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}
.tb th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  white-space: nowrap;
}
.tb td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tb tbody tr { cursor: pointer; transition: background .18s ease; }
.tb tbody tr:hover { background: var(--accent-soft); }
.tb tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tpl-tut-page {
  margin-top: 16px;
}

.oss-ver-table,
.tpl-works-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.oss-ver-table {
  table-layout: fixed;
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.oss-ver-table th,
.tb.tpl-works th {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-muted);
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.oss-ver-table td,
.tb.tpl-works td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.oss-ver-table.tpl-ver tbody tr.tpl-ver__data-row > td {
  padding: 4px 16px 10px;
}

.oss-ver-table.tpl-ver tbody tr:not(.tpl-ver__data-row) td {
  min-height: 0;
  height: auto;
}

.oss-ver-table tbody tr:last-child td,
.tb.tpl-works tbody tr:last-child td {
  border-bottom: 0;
}

.oss-ver-table tbody tr:not(.tpl-ver__data-row):hover,
.tb.tpl-works tbody tr:hover {
  background: var(--accent-soft);
}

.tb.tpl-works tbody tr:hover .tb-title {
  color: var(--text);
}

.oss-ver-table.tpl-ver tbody tr.tpl-ver__row {
  cursor: pointer;
}

.oss-ver-table.tpl-ver tbody tr:not(.tpl-ver__row):not(.tpl-ver__data-row) {
  cursor: default;
}

.oss-ver-table.tpl-ver th:nth-child(1),
.oss-ver-table.tpl-ver td:nth-child(1) {
  width: 12.5rem;
  white-space: nowrap;
}

.oss-ver-table.tpl-ver th:nth-child(2),
.oss-ver-table.tpl-ver td:nth-child(2) {
  width: 6.25rem;
  white-space: nowrap;
}

.oss-ver-table.tpl-ver th:nth-child(3),
.oss-ver-table.tpl-ver td:nth-child(3) {
  width: 8.5rem;
}

.oss-ver-table.tpl-ver th:nth-child(4),
.oss-ver-table.tpl-ver td:nth-child(4) {
  width: 22rem;
  white-space: normal;
}

.oss-ver-table:not(.tpl-ver) th:nth-child(1),
.oss-ver-table:not(.tpl-ver) td:nth-child(1) {
  width: 8rem;
  white-space: nowrap;
}

.oss-ver-table:not(.tpl-ver) th:nth-child(2),
.oss-ver-table:not(.tpl-ver) td:nth-child(2) {
  width: 7.5rem;
  white-space: nowrap;
}

.oss-ver-table:not(.tpl-ver) th:nth-child(4),
.oss-ver-table:not(.tpl-ver) td:nth-child(4) {
  width: 12rem;
  white-space: nowrap;
}

.oss-ver__pack {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.oss-ver__size {
  color: var(--text-muted, #8e8e93);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.tpl-ver-pane {
  padding: 18px;
}

.tpl-ver-pane .ui-empty {
  padding: 0;
}

.tpl-ver__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tpl-ver__toggle[aria-expanded] {
  cursor: pointer;
}

.tpl-ver__tag {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.tpl-ver__caret {
  flex: none;
  color: var(--accent-dark);
  transition: transform .3s ease;
}

.tpl-ver__toggle[aria-expanded='true'] .tpl-ver__caret {
  transform: rotate(180deg);
}

.tpl-ver__note-cell {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-ver__cmd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tpl-ver__cmd-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.tpl-ver td.rt .tpl-ver__cmd {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-left: auto;
}

.tpl-ver td.rt .tpl-ver__cmd-label {
  flex: none;
  white-space: nowrap;
}

.tpl-ver td.rt .buy-cmd {
  flex: 1 1 auto;
  min-width: 0;
}

.tpl-ver .buy-cmd {
  min-height: 32px;
}

.tpl-ver .buy-cmd__prompt {
  padding: 4px 0 4px 8px;
}

.tpl-ver .buy-cmd__code {
  padding: 4px 6px 4px 4px;
}

.tpl-ver .buy-cmd .ui-icon-btn.buy-cmd__copy {
  width: 30px;
  min-height: 32px;
}

.tpl-ver__data-row > td {
  height: auto;
  padding: 4px 10px 8px;
  background: var(--surface-muted);
  cursor: default;
  border-bottom: 1px solid var(--line);
}

.tpl-ver-data {
  margin: 0;
  padding: 4px 2px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tpl-ver-data__title {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.tpl-ver-data__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tpl-ver-data__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 5px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 0;
  background: transparent;
}

.tpl-ver-data__item:first-child {
  border-top: 0;
}

.tpl-ver-data__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.tpl-ver-data__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.tpl-ver-data .txt-s {
  margin: 0;
}

.tpl-ver-data .tpl-ver__cmd-label {
  display: none;
}

.tpl-ver-data .tpl-ver__cmd {
  flex: 1 1 16.5rem;
  width: auto;
  max-width: 16.5rem;
  min-width: 12rem;
  align-items: stretch;
}

.tpl-works-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

.tpl-works {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  border: 0;
  background: transparent;
}

.tpl-works th:nth-child(1),
.tpl-works td:nth-child(1) {
  width: 44%;
}

.tpl-works th:nth-child(2),
.tpl-works td:nth-child(2) {
  width: 28%;
  min-width: 0;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
}

.tpl-works th:nth-child(3),
.tpl-works td:nth-child(3) {
  width: 14%;
  overflow: hidden;
  white-space: nowrap;
}

.tpl-works th:nth-child(4),
.tpl-works td:nth-child(4) {
  width: 14%;
  white-space: nowrap;
}

.tpl-works__work {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tpl-works__cover.cover {
  width: 4.25rem;
  height: auto;
  min-width: 4.25rem;
  max-width: 4.25rem;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  flex: none;
  overflow: hidden;
}

.tpl-works__cover .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

.tpl-works__info {
  min-width: 0;
  flex: 1;
}

.tpl-works__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
}

.tpl-works__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-works__title .ui-badge {
  flex: none;
  gap: 4px;
}

.tpl-works .tb-x {
  margin-top: 4px;
}

.tpl-works__author {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  text-align: left;
  font-size: 13.5px;
}

.tpl-works__ver {
  font-variant-numeric: tabular-nums;
}

.tpl-works__price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tb .num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb .num .unread-dot { margin-right: 6px; }
.tb .rt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-title { font-size: 14.5px; font-weight: 600; font-family: var(--font-display); }
.tb tbody tr:hover .tb-title { color: var(--accent-dark); }
.tb-inbox td {
  box-sizing: border-box;
  height: 48px;
  padding: 6px 12px;
  vertical-align: middle;
}
.tb-inbox td.rt {
  position: relative;
  width: 7.5rem;
  padding-right: 28px;
  vertical-align: middle;
  overflow: visible;
}
.tb.tb-inbox tbody tr,
.tb.tb-inbox tbody tr.is-unread {
  cursor: default;
}
.tb.tb-inbox tbody tr:hover,
.tb.tb-inbox tbody tr.is-unread:hover {
  background: transparent;
}
.tb.tb-inbox .tb-title {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #3a3a3c;
  color: color-mix(in srgb, var(--text) 62%, var(--text-muted));
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.tb.tb-inbox tbody tr:hover .tb-title:not(.is-link) {
  color: inherit;
}
.tb.tb-inbox button.tb-title.is-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  min-height: 0;
  height: auto;
  cursor: pointer;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.tb.tb-inbox .tb-inbox__excerpt {
  color: var(--text-muted);
  text-decoration: none;
}
.tb.tb-inbox .tb-inbox__extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.tb.tb-inbox .tb-inbox__extra .tb-title {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}
.tb.tb-inbox button.tb-title.is-link,
.tb.tb-inbox tbody tr:hover button.tb-title.is-link {
  color: var(--accent-dark);
  text-decoration: none;
  cursor: pointer;
}
.tb.tb-inbox button.tb-title.is-link:hover,
.tb.tb-inbox tbody tr:hover button.tb-title.is-link:hover {
  color: var(--accent);
  text-decoration: none;
}
.tb.tb-inbox .tb-x,
.tb.tb-inbox button.tb-inbox__excerpt {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
  line-break: auto;
}
.tb.tb-inbox button.tb-inbox__excerpt {
  display: -webkit-box;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  min-height: 0;
  height: auto;
  text-align: left;
  cursor: pointer;
}
.tb-inbox .tb-inbox__unread.unread-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  pointer-events: none;
}
.inbox-cta { padding: 8px 12px 12px; }
.console .inbox-tabs.ui-tabs-line {
  flex-wrap: nowrap;
  overflow: visible;
}
.inbox-section { padding: 4px 0 0; }
.inbox-section__title {
  margin: 8px 0 0;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.inbox-section__error {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.inbox-notes { display: flex; flex-direction: column; }
.inbox-note {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  min-height: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.inbox-note--reply,
.inbox-note--reaction {
  min-height: 84px;
}
.inbox-note--reply {
  align-items: flex-start;
}
.inbox-note--reply .inbox-note__main,
.inbox-note--reaction .inbox-note__main {
  overflow: hidden;
  min-width: 0;
}
.inbox-note--reaction .inbox-note__line,
.inbox-note--reaction .inbox-note__sentence {
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.inbox-note--reply .inbox-note__excerpt {
  width: auto;
  max-width: 100%;
  margin-top: 4px;
}
.inbox-note--reply .inbox-note__line.inbox-note__line--period {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.inbox-note--reply .inbox-note__title-period,
.inbox-note--reaction .inbox-note__title-period {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  vertical-align: bottom;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-break: auto;
}
.inbox-note--reply .inbox-note__title-period .inbox-note__work,
.inbox-note--reply .inbox-note__title-period .inbox-note__work-copy,
.inbox-note--reaction .inbox-note__title-period .inbox-note__work,
.inbox-note--reaction .inbox-note__title-period .inbox-note__work-copy,
.inbox-note--reply .inbox-note__period,
.inbox-note--reaction .inbox-note__period {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-break: auto;
}
.inbox-note--reply .inbox-note__title-period .inbox-note__work,
.inbox-note--reaction .inbox-note__title-period .inbox-note__work {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-note--reply .inbox-note__title-period .inbox-note__work-copy,
.inbox-note--reaction .inbox-note__title-period .inbox-note__work-copy {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-note__period {
  flex: none;
  margin: 0 0 0 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
}
.inbox-note--reply .inbox-note__ended-title,
.inbox-note--reply .inbox-note__ended-title .inbox-note__work-copy {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
.inbox-note--reply .inbox-note__ended-title {
  min-width: 0;
  max-width: 100%;
}
.inbox-note--reply .inbox-note__copy,
.inbox-note--reply .inbox-note__line,
.inbox-note--reply .inbox-note__body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.inbox-note--reply .inbox-note__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: auto;
  line-break: anywhere;
}
.inbox-note--reply .inbox-note__line.inbox-note__line--one {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.inbox-note--reply .inbox-note__line.inbox-note__line--period,
.inbox-note--reply .inbox-note__line.inbox-note__line--one.inbox-note__line--period {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.inbox-note--reply .inbox-note__line .inbox-note__title-period .inbox-note__work,
.inbox-note--reply .inbox-note__line .inbox-note__title-period .inbox-note__work-copy,
.inbox-note--reply .inbox-note__ended-title .inbox-note__title-period .inbox-note__work,
.inbox-note--reply .inbox-note__ended-title .inbox-note__title-period .inbox-note__work-copy,
.inbox-note--reaction .inbox-note__title-period .inbox-note__work,
.inbox-note--reaction .inbox-note__title-period .inbox-note__work-copy,
.inbox-note--reply .inbox-note__period,
.inbox-note--reaction .inbox-note__period {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-break: auto;
}
.inbox-note--reply .inbox-note__line .inbox-note__name,
.inbox-note--reply .inbox-note__line .inbox-note__user-copy,
.inbox-note--reply .inbox-note__line .inbox-note__work-copy,
.inbox-note--reply .inbox-note__line .inbox-note__quote-copy {
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: auto;
  line-break: anywhere;
}
.inbox-note--reply .inbox-note__quote,
.inbox-note--reply .inbox-note__quote:hover,
.inbox-note--reply .inbox-note__quote:focus,
.inbox-note--reply .inbox-note__quote:active {
  display: contents;
}
.inbox-note--reply .inbox-note__quote-copy {
  color: var(--text-muted);
}
.inbox-note--reply .inbox-note__reply {
  margin-top: 4px;
}
.inbox-note.inbox-note--history { border-bottom: 0; }
.inbox-note.inbox-note--reaction,
.inbox-note.inbox-note--reaction.inbox-note--history {
  border-bottom: 1px solid var(--line);
}
.inbox-note > .ui-avatar.ui-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
  flex: none;
  align-self: flex-start;
}
.inbox-note__main { flex: 1; min-width: 0; }
.inbox-note__line {
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  color: #3a3a3c;
  color: color-mix(in srgb, var(--text) 62%, var(--text-muted));
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.inbox-note__name,
.inbox-note__user,
.inbox-note__work {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  font: inherit;
  font-weight: 400;
  line-height: inherit;
  min-height: 0;
  height: auto;
  vertical-align: baseline;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.inbox-note__name {
  display: inline;
  color: var(--accent-dark);
}
.inbox-note__user,
.inbox-note__work,
button.inbox-note__user,
button.inbox-note__work,
button.inbox-note__user:hover,
button.inbox-note__work:hover,
button.inbox-note__user:focus,
button.inbox-note__work:focus,
button.inbox-note__user:active,
button.inbox-note__work:active {
  display: contents;
}
.inbox-note__user-copy,
.inbox-note__work-copy {
  text-align: left;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.inbox-note__work-copy {
  color: var(--text-muted);
}
.inbox-note__expired {
  color: #3a3a3c;
  color: color-mix(in srgb, var(--text) 62%, var(--text-muted));
}
.inbox-note__work-copy.is-struck {
  text-decoration: line-through;
  cursor: default;
}
button.inbox-note__work .inbox-note__work-copy,
.inbox-note__user-copy {
  color: var(--accent-dark);
  cursor: pointer;
}
button.inbox-note__work:hover .inbox-note__work-copy,
.inbox-note__work-copy:hover:not(.is-struck),
button.inbox-note__user:hover .inbox-note__user-copy,
.inbox-note__user-copy:hover {
  color: var(--accent);
}
button.inbox-note__line--btn {
  color: var(--accent-dark);
  text-decoration: none;
  cursor: pointer;
}
button.inbox-note__line--btn:hover {
  color: var(--accent);
  text-decoration: none;
}
.inbox-note__quote.is-static,
.inbox-note--reply .inbox-note__quote.is-static,
.inbox-note__body.is-static {
  cursor: default;
}
.inbox-note__quote,
button.inbox-note__quote {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: inherit;
  min-height: 0;
  height: auto;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
  cursor: pointer;
}
.inbox-note__line--btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  min-height: 0;
  height: auto;
  text-align: left;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.inbox-note__sentence {
  font: inherit;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.inbox-note__body {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
  line-break: auto;
  cursor: pointer;
  overflow: visible;
}
.inbox-note__body-copy {
  display: block;
  display: -webkit-box;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: auto;
  line-break: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.inbox-note__reply {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
}
.inbox-note__reply .ui-badge { margin-top: 0; flex: none; }
.inbox-note__reply .inbox-note__body { margin: 0; min-width: 0; }
.inbox-note--reply .inbox-note__reply { display: block; }
.inbox-note--reply .inbox-note__body,
.inbox-note--reply .inbox-note__body-copy {
  width: 100%;
  color: #000;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: auto;
  line-break: anywhere;
}
.inbox-note--reply .inbox-note__mark {
  display: inline-flex;
  align-items: center;
  height: 1.45em;
  margin-right: 6px;
  vertical-align: middle;
}
.inbox-note--reply .inbox-note__mark .ui-badge {
  box-sizing: border-box;
  height: 16px;
  margin: 0;
  padding: 0 6px;
  line-height: 14px;
}
.inbox-note--reply .inbox-note__body-copy .inbox-note__edited,
.inbox-note--reply .inbox-note__reply > .inbox-note__edited {
  display: inline;
  margin-left: 6px;
  overflow: visible;
  vertical-align: middle;
  white-space: nowrap;
}
.inbox-note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-top: 4px;
}
.inbox-note__actions .inbox-note__time,
.inbox-note__actions .inbox-note__reply-btn,
.inbox-note__actions .ui-btn-magnet {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 24px;
}
.inbox-note__actions .inbox-note__time {
  line-height: 1;
}
.inbox-note__actions .ui-btn.ui-btn--sm,
.inbox-note > .ui-btn.ui-btn--sm {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.inbox-note__actions .ui-btn.ui-btn--sm:hover:not(:disabled),
.inbox-note > .ui-btn.ui-btn--sm:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
}
.inbox-note__time { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.inbox-note__edited {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inbox-note__actions > .ui-btn,
.inbox-note__actions > .inbox-note__reply-btn {
  flex-shrink: 0;
}
.inbox-note__main > .inbox-note__time { margin-top: 4px; }
.inbox-note--follow,
.inbox-note--faces {
  min-height: 0;
}
.inbox-note--benefit {
  align-items: center;
  min-height: 48px;
  padding: 6px 12px;
}
.inbox-note--benefit > .ui-avatar {
  align-self: center;
}
.inbox-note--benefit .inbox-note__line {
  display: flex;
  align-items: center;
  gap: 12px;
}
.inbox-note--benefit .inbox-note__copy { flex: 1; min-width: 0; }
.inbox-note--benefit .inbox-note__time { margin: 0 0 0 auto; flex: none; }
.inbox-note--benefit.is-unread .inbox-note__time { margin-right: 10px; }
.inbox-note__side,
.inbox-note__excerpt {
  width: 120px;
  flex: none;
  align-self: flex-start;
  text-align: left;
}
.inbox-note__side {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.inbox-note__side:empty:not(.inbox-note__side--reserve) {
  display: none;
}
.inbox-note__side--reserve {
  min-height: 0;
}
.inbox-note--reply .inbox-note__side {
  align-self: flex-start;
  min-height: 68px;
}
.inbox-note--reply .inbox-note__side--reserve,
.inbox-note--reaction .inbox-note__side--reserve {
  min-height: 0;
}
.inbox-note--reaction .inbox-note__main > .inbox-note__excerpt {
  width: auto;
  max-width: 100%;
  margin-top: 4px;
}
button.inbox-note__excerpt {
  cursor: pointer;
  display: block;
  white-space: normal;
}
.inbox-note__excerpt {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.inbox-note__excerpt-copy {
  display: block;
  display: -webkit-box;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-all;
  line-break: auto;
  max-height: calc(1.45em * 4);
}
.inbox-note__side .cover,
.inbox-note__side .forum-cover {
  width: 120px;
  height: 68px;
  min-width: 0;
  max-width: 120px;
  min-height: 0;
  max-height: 68px;
  aspect-ratio: auto;
  margin: 0;
  border-radius: var(--radius-control);
  overflow: hidden;
  object-position: left center;
}
.inbox-status {
  box-sizing: border-box;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-status .ui-empty,
.inbox-status .ui-content-loading {
  width: 100%;
  min-height: 280px;
}
.inbox-note__dot.unread-dot {
  position: absolute;
  top: 8px;
  right: 8px;
}
.inbox-faces {
  position: relative;
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  align-self: flex-start;
}
.inbox-faces .ui-avatar.ui-avatar--sm {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  font-size: 13px;
  box-sizing: border-box;
}
.inbox-faces--pair .ui-avatar:nth-child(1) {
  left: 0;
  top: 0;
  z-index: 1;
}
.inbox-faces--pair .ui-avatar:nth-child(2) {
  left: 12px;
  top: 12px;
  z-index: 2;
}
.inbox-emojis {
  display: inline;
  margin: 0 2px 0 4px;
  white-space: normal;
  word-break: normal;
  line-break: auto;
}
.inbox-emoji {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 6px 0 0;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  word-break: normal;
  line-break: auto;
}
.inbox-emoji > * + * { margin-left: 2px; }
.inbox-emoji img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}
.inbox-pager { padding: 8px 12px 4px; }
.inbox-reply-dialog .replybox { margin: 0; }
.inbox-note .ui-badge { margin-top: 4px; }
.tb-x {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tb-tpl { table-layout: fixed; width: 100%; }
.tb-tpl td:first-child { min-width: 0; }
.tb-tpl th:nth-child(2),
.tb-tpl td:nth-child(2) { width: 7rem; text-align: center; }
.tb-tpl th:nth-child(3),
.tb-tpl td:nth-child(3) { width: 5rem; }
.tb-tpl th:nth-child(4),
.tb-tpl td:nth-child(4) {
  width: 8.75rem;
  padding-right: 16px;
}
/* 开源工程区复用模板表，作者列要和点评与杂谈一样宽，并且靠左。 */
.tb-oss.tb-tpl th:nth-child(2),
.tb-oss.tb-tpl td:nth-child(2) {
  width: 8rem;
  text-align: left;
}
/* iPad 名称列内容贴边，标签行 overflow 会把胶囊切掉半颗。只在这里加内边距并让标签整颗换行。 */
html[data-tablet] .tb-oss td:first-child {
  padding: 16px 16px 16px 18px;
}
html[data-tablet] .tb-oss .tb-tpl__info {
  overflow: visible;
  padding: 4px 8px 4px 2px;
}
html[data-tablet] .tb-oss .tb-tpl__by {
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: visible;
  padding: 2px 0;
}
.tb-tpl .tb-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: 16px;
}
.tb-tpl .tb-title__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-tpl .tb-title .mark-pin,
.tb-tpl .tb-title .ui-badge { flex: none; }
.tb-tpl .tb-x { -webkit-line-clamp: 2; font-size: 13px; line-height: 1.65; }
.tb-tpl__main { min-width: 0; }
.tb-tpl__info { min-width: 0; flex: 1; overflow: hidden; }
.tb-tpl__by {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 6px;
  min-width: 0;
  overflow: hidden;
}
.tb-tpl__by > .txt-s { flex: none; }
.tb-tpl__by .ui-badge,
.tb-tpl__by .api-gap { flex: none; }
.tb-tpl__ver { text-align: center; }
.tb-tpl__date { margin-top: 4px; white-space: nowrap; }
.tb-price {
  color: var(--text-muted);
  white-space: nowrap;
}
.tb-tpl .tb-price {
  white-space: normal;
}
.tb-tpl .tb-price .price-dual {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: normal;
  line-height: 1.35;
}
.tb-tpl .tb-price .price-dual__sep {
  display: none;
}
.price-dual {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.price-dual__flower {
  font-weight: 500;
  color: var(--text-muted);
}
.price-dual__sep {
  margin: 0 0.25em;
  color: color-mix(in srgb, var(--text-muted) 32%, transparent);
  font-weight: 300;
}
.price-with-orig {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.45em;
}
.price-orig {
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ui-btn .price-dual {
  color: inherit;
}
.ui-btn .price-dual__sep {
  color: color-mix(in srgb, currentColor 38%, transparent);
}
.ui-btn .price-dual__flower {
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.tb-works-list { table-layout: fixed; }
.tb-works-list td { vertical-align: top; }
.tb-works-list__cover { width: 136px; }
.tb-works-list .cover.thumb,
.tb-works-list .forum-cover.thumb {
  width: 112px;
  height: 63px;
  min-width: 112px;
  max-width: 112px;
  min-height: 63px;
  max-height: 63px;
}
.tb-works-list__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tb-works-list__title .tb-title__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-works-list__title .ui-badge { flex: none; }
.tb-works-list__author {
  /* 内容区按 10 个汉字留宽，更长的名字换行。左右内边距是 8px + 12px；多留 0.5em 防止第 10 个字因字宽微差被挤换行。 */
  width: calc(10.5em + 20px);
  min-width: calc(10.5em + 20px);
  padding-left: 8px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.tb-works-list__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.tb-works-list__tag + .tb-works-list__tag::before {
  content: ' · ';
}
.tb-works-list__info {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.tb-works-list__byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  min-width: 0;
}
.tb-works-list__byline-author {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.tb-works-list__byline .tb-works-list__tags {
  margin-top: 0;
}
.forum-mobile .tb-works-list td { padding: 10px 10px; }
.forum-mobile .tb-works-list__cover { width: 168px; }
.forum-mobile .tb-works-list .cover.thumb,
.forum-mobile .tb-works-list .forum-cover.thumb {
  width: 144px;
  height: 81px;
  min-width: 144px;
  max-width: 144px;
  min-height: 81px;
  max-height: 81px;
}
.forum-mobile .tb-works-list__info {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.thumb { width: 112px; height: 66px; border-radius: var(--radius-control); flex: none; aspect-ratio: auto; }
.cover.thumb,
.forum-cover.thumb {
  width: 112px;
  height: 66px;
  min-width: 112px;
  max-width: 112px;
  min-height: 66px;
  max-height: 66px;
  aspect-ratio: auto;
  overflow: hidden;
  flex: none;
  box-sizing: border-box;
}
.cover.thumb .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
}
.cover.thumb.cover--empty,
.cover.thumb.cover--pending,
.cover.thumb.cover--reviewing,
.forum-cover.thumb.cover--empty {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.pay-goods {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pay-goods__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: var(--type-leading-tight);
}
.pay-goods__price {
  flex: none;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.pay-goods__price .price-dual__sep {
  margin: 0 0.72em;
  color: color-mix(in srgb, var(--text-muted) 42%, transparent);
  font-weight: 300;
}
.pay-goods__price .price-dual__flower {
  font-weight: 500;
  color: var(--text-muted);
}
.pay-tip { margin-bottom: 14px; }
.pay-list { margin-bottom: 14px; }
.pay-scan {
  display: block;
  width: min(220px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 12px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.pay-scan-countdown {
  margin: -4px 0 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pay-scan-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pay-scan-expired__text {
  font-size: 13px;
  color: var(--text-muted);
}
.pay {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .14s ease, background .14s ease;
}
.pay:last-child { margin-bottom: 0; }
.pay:hover { border-color: var(--accent); }
.pay.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
}
.pay:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pay-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.pay-r {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.6px solid var(--line);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.pay.is-on .pay-r { border-color: var(--accent-dark); }
.pay.is-on .pay-r::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-dark);
}
.pay-note {
  margin: -4px 0 0;
  text-align: center;
}
.pay-note b { color: var(--accent); font-weight: 700; }
.toolbar { display: flex; align-items: center; gap: 14px; padding: 0 0 12px; }
.board-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px 12px;
  min-height: 36px;
  padding: 0 0 5px;
  flex: 0 0 auto;
}
.cols > .board-toolbar {
  padding-bottom: 0;
}
.board-toolbar__filters {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 13px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.board-toolbar__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.board-toolbar__tabs .ui-chip-magnet {
  flex: none;
}
.board-toolbar__filter {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  height: 20px;
  min-height: 20px;
  line-height: 1;
  flex: none;
  white-space: nowrap;
  font-size: var(--type-body-s);
  color: var(--text-muted);
}
.board-sort-tiles {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  min-height: 20px;
  color: var(--text-muted);
  font-size: var(--type-body-s);
  line-height: 1;
}
.board-sort-tiles__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 4px;
  color: var(--text-muted);
  line-height: 0;
  /* 和筛选图标一样下移 2px，与右侧文字垂直中心对齐。 */
  transform: translateY(2px);
}
.board-sort-tiles__icon svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.board-sort-tiles__label {
  flex: none;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  white-space: nowrap;
}
.board-sort-tiles__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  white-space: nowrap;
  flex: none;
  /* 中文在字框里偏上，下移后才和左侧图标、筛选下拉的文字垂直中心对齐。 */
  transform: translateY(2px);
  cursor: pointer;
}
.board-sort-tiles__item + .board-sort-tiles__item {
  margin-left: 8px;
}
.board-sort-tiles__item:hover,
.board-sort-tiles__item.is-active {
  color: var(--text);
}
.board-sort-tiles__check {
  color: currentColor;
  margin-right: -2px;
}
.board-sort-tiles__more {
  position: relative;
  margin-left: 8px;
}
.board-sort-tiles__menu.ui-select-menu {
  position: fixed;
  z-index: 110;
}
.board-toolbar__layout {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 28px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.board-toolbar__layout > button {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.board-toolbar__layout .ui-switch {
  position: absolute;
  inset: 2px;
  min-height: 0;
  pointer-events: none;
}
.board-toolbar__layout .ui-switch__track {
  width: 100%;
  height: 100%;
  background: transparent;
}
.board-toolbar__layout .ui-switch__track::after {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}
.board-toolbar__layout .ui-switch input:checked + .ui-switch__track {
  background: transparent;
}
.board-toolbar__layout .ui-switch input:checked + .ui-switch__track::after {
  transform: translateX(100%);
}
.board-toolbar__layout .is-on {
  color: var(--text);
  font-weight: 600;
}
.board-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}
/* 文游发布区（移动端）：筛选与排序两元素放不下时自然换行；版面切换悬浮在右上角，保持原位。 */
/* 工具栏本身已是 sticky（上方 .forum-mobile .board-toolbar 规则），即定位上下文，无需再设 relative。 */
.forum-mobile .board-toolbar--works .board-toolbar__filters {
  flex-wrap: wrap;
  padding-right: 92px;
}
.forum-mobile .board-toolbar--works .board-toolbar__sort {
  position: absolute;
  top: 4px;
  right: 0;
  margin-left: 0;
}
/* 图标上抬 1px，使图标底部略低于文字底部、视觉与文字中心更接近；文字两处对齐（ui-select__value 用 3 类选择器盖过原 .board-toolbar .ui-select__value）。PC 与移动端 works 区一致。 */
.board-toolbar--works .board-toolbar__funnel,
.board-toolbar--works .board-sort-tiles__icon {
  transform: translateY(-1px);
}
.board-toolbar--works .board-sort-tiles__item,
.board-toolbar--works .board-toolbar__filter .ui-select__value {
  transform: none;
}
.board-toolbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  line-height: 0;
}
.board-toolbar__icon svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.board-toolbar__funnel {
  transform: translateY(2px);
}
.board-toolbar .ui-field,
.chat-toolbar .ui-field {
  width: auto;
  min-width: min-content;
  margin: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
  height: 20px;
  min-height: 20px;
  line-height: 0;
  overflow: visible;
}
.board-toolbar .ui-btn-magnet {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: auto;
  min-height: 32px;
  overflow: visible;
}
.board-toolbar .ui-select,
.chat-toolbar .ui-select {
  min-height: 20px;
  height: 20px;
  width: auto;
  min-width: 0;
  padding: 0;
  gap: 0;
  justify-content: flex-start;
  align-items: center;
  font-size: var(--type-body-s);
  line-height: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-color: transparent;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}
.board-toolbar .ui-select__value,
.chat-toolbar .ui-select__value {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: auto;
  height: 14px;
  overflow: visible;
  line-height: 1;
  /* 中文在字框里偏上，下移后才和图标笔画的垂直中心对齐。筛选和排序都走这里。 */
  transform: translateY(2px);
}
.board-toolbar .board-toolbar__filter .ui-field,
.board-toolbar .board-toolbar__filter .ui-select,
.board-toolbar .board-toolbar__filter .ui-select__value,
.chat-toolbar .board-toolbar__filter .ui-field,
.chat-toolbar .board-toolbar__filter .ui-select,
.chat-toolbar .board-toolbar__filter .ui-select__value {
  height: auto;
  min-height: 0;
  line-height: 1;
}
.board-toolbar .ui-select__chevron,
.chat-toolbar .ui-select__chevron {
  display: none;
}
.board-toolbar .ui-select:hover,
.board-toolbar .ui-select.is-open,
.chat-toolbar .ui-select:hover,
.chat-toolbar .ui-select.is-open {
  color: var(--text);
}
.board-toolbar .ui-btn {
  min-height: 32px;
  height: auto;
  padding: 4px 6px;
  color: var(--text-muted);
  font-size: var(--type-body-s);
  font-weight: 400;
  line-height: var(--type-leading-tight);
  overflow: visible;
}
.board-toolbar .ui-btn.is-pressed {
  color: var(--text);
  font-weight: 700;
}
.board-toolbar-count {
  display: none;
  margin-left: auto;
  align-items: center;
  min-height: 32px;
  height: auto;
  font-size: var(--type-caption);
  color: var(--text-muted);
  line-height: var(--type-leading-tight);
}
.chat-toolbar {
  margin-bottom: 14px;
  align-items: center;
}
.chat-toolbar__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
/* iPad 的网格行高算不进排序和发帖，这两块会画到表头上。
   列表改成普通上下排列，侧栏贴在右侧。桌面和手机不走这里。 */
html[data-tablet] .forum-wrap.cols.board-list {
  display: block;
  position: relative;
}
html[data-tablet] .forum-wrap.cols.board-list > .col-side {
  position: absolute;
  top: var(--space-5);
  right: var(--space-3);
  width: 220px;
  gap: 0;
}
html[data-tablet] .forum-wrap.cols.board-list > .col-side > * + * {
  margin-top: 14px;
}
html[data-tablet] .forum-wrap.cols.board-list > .board-toolbar,
html[data-tablet] .forum-wrap.cols.board-list > .board-list__lead,
html[data-tablet] .forum-wrap.cols.board-list > .board-main {
  width: auto;
  margin-right: 232px;
}
html[data-tablet] .cols.board-list > .board-toolbar,
html[data-tablet] .cols.board-list > .board-list__lead > .board-toolbar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  height: auto;
  min-height: 36px;
  max-height: none;
  overflow: visible;
  margin-bottom: 12px;
  padding-bottom: 4px;
}
html[data-tablet] .board-toolbar__filters,
html[data-tablet] .board-toolbar__tabs,
html[data-tablet] .chat-toolbar__tags {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  min-height: 32px;
  overflow: visible;
  white-space: normal;
}
html[data-tablet] .board-toolbar__sort {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  margin: 8px 0 0;
}
html[data-tablet] .board-toolbar__tabs > .ui-chip-magnet,
html[data-tablet] .chat-toolbar__tags > .ui-chip-magnet {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  margin: 0 8px 8px 0;
}
/* 手机轨道和上面的换行规则写在同一个元素上。后写的换行会盖掉轨道的 nowrap，标签就掉到第二行，箭头也不出现。 */
.chip-rail__scroller.chat-toolbar__tags,
.chip-rail__scroller.board-toolbar__tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.chat-toolbar .ui-chip-magnet {
  flex: none;
}
.chat-toolbar .ui-chip {
  justify-content: center;
  line-height: 1;
}
.chat-toolbar .ui-field,
.chat-toolbar .ui-btn-magnet {
  min-height: 34px;
  align-self: center;
}
.chat-toolbar .star-border-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
}
.chat-toolbar .star-border-button > span {
  min-height: 32px;
  padding: 0 16px;
  line-height: 1;
  justify-content: center;
}

.chip {
  min-height: 36px;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent-dark); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--line);
  font-weight: 600;
  white-space: nowrap;
}
.badge-amber { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-ink); }
.badge-tag-rec {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-dark);
}
.badge-tag-guide {
  background: var(--tag-guide-soft);
  border-color: color-mix(in srgb, var(--tag-guide) 28%, var(--tag-guide-soft));
  color: var(--tag-guide);
}
.badge-tag-out {
  background: var(--tag-out-soft);
  border-color: color-mix(in srgb, var(--tag-out) 28%, var(--tag-out-soft));
  color: var(--tag-out);
}
.badge-tag-off { background: var(--surface-muted); color: var(--text-muted); }
.badge-tag-code {
  background: var(--tag-code-soft);
  border-color: color-mix(in srgb, var(--tag-code) 28%, var(--tag-code-soft));
  color: var(--tag-code);
}
.badge-tag-tpl {
  background: var(--tag-tpl-soft);
  border-color: color-mix(in srgb, var(--tag-tpl) 28%, var(--tag-tpl-soft));
  color: var(--tag-tpl);
}
.badge-tag-plug {
  background: var(--tag-plug-soft);
  border-color: color-mix(in srgb, var(--tag-plug) 28%, var(--tag-plug-soft));
  color: var(--tag-plug);
}
.badge-tag-ann,
.badge-tag-offi {
  background: var(--tag-ann-soft);
  border-color: color-mix(in srgb, var(--tag-ann) 28%, var(--tag-ann-soft));
  color: var(--tag-ann);
}
.badge.topic-tag,
.ui-chip.topic-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.badge.topic-tag {
  gap: 4px;
  /* 话题标签不跟通用 badge 加粗；后台勾了“文字加粗”时由行内样式覆盖。 */
  font-weight: 400;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.topic-tag__label {
  display: block;
  line-height: 1;
  min-width: 0;
}
/* 筛选条带图标时，文字与图标可视中线对齐。纯文字标签不做位移。 */
.ui-chip.topic-tag:has(.topic-tag__icon) .topic-tag__label {
  transform: translateY(1px);
}
/* 列表和详情的标签字号更小，只在有图标时把文字下移 1px，对齐图标的可视中线。 */
.badge.topic-tag--icon .topic-tag__label {
  transform: translateY(1px);
}
.topic-tag__icon {
  width: 14px;
  height: 14px;
  flex: none;
  align-self: center;
  display: block;
  max-width: none;
  object-fit: contain;
  object-position: center;
}
.badge .topic-tag__icon {
  width: 12px;
  height: 12px;
  max-width: none;
}
/* 选中后仍保留接口下发的底色和字色，用描边表示当前项。 */
.ui-chip.topic-tag-chip.is-active {
  box-shadow: inset 0 0 0 2px currentColor;
}
.mark-digest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  color: var(--surface-raised);
  background: var(--danger);
  border-radius: var(--space-1);
  margin-right: 6px;
}
.mark-pin,
.mark-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  color: var(--surface-raised);
  background: var(--accent);
  border-radius: var(--space-1);
  margin-right: 6px;
}
.mark-lock {
  background: var(--text-muted);
}
.mark-status {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  color: var(--surface-raised);
  background: var(--success, #16a34a);
  border-radius: var(--space-1);
  margin-right: 6px;
}

.api-gap {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 var(--space-2);
  border: 1px dashed color-mix(in srgb, var(--danger) 52%, var(--line));
  border-radius: var(--radius-xs);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--type-caption);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.api-gap-block {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
  border: 1px dashed color-mix(in srgb, var(--danger) 52%, var(--line));
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--danger-soft) 70%, transparent);
}

.board-sort-gap,
.board-toolbar .api-gap-block {
  display: inline-flex;
  width: auto;
  padding: 2px;
  vertical-align: middle;
}

.forum-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.forum-btn-cta { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-action) 88%, var(--surface-raised)), var(--accent-action)); color: var(--accent-ink); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.forum-btn-cta:hover { background: var(--accent-hover); transform: scale(1.02); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 34%, transparent); }
.forum-btn-dark { background: var(--text); color: var(--surface-raised); }
.forum-btn-line { background: var(--surface-raised); border-color: var(--line); color: var(--text); }
.forum-btn-dis, .forum-btn:disabled { background: var(--surface-muted); border-color: var(--line); color: var(--text-muted); cursor: not-allowed; }
.forum-btn-full { width: 100%; }

.fsearch {
  width: 100%;
  min-height: 38px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--text-muted);
  text-align: left;
  padding: 0 14px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.fsearch:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--text); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 12%, transparent); }

.buy {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: visible;
  box-shadow: var(--shadow);
}
.buy-demo {
  border-style: dashed;
  box-shadow: none;
  background: var(--surface-raised);
}
.buy-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.buy-cover .cover,
.buy-cover .forum-cover { border-radius: 0; height: 100%; }
.buy-cover .forum-cover {
  transform-origin: center center;
  transition: transform 450ms linear;
}
.buy-cover:hover .forum-cover:not(.cover--empty):not(.cover--reviewing) { transform: scale(1.05); }
.buy-b { padding: 16px 18px 18px; }
.buy .ui-btn-magnet--full {
  display: block;
  width: 100%;
}
.buy .buy-action-row > .ui-btn-magnet--full {
  width: auto;
}
.buy-magnet-stick {
  display: block;
  width: 100%;
}
.buy-magnet-stick__pin {
  width: 100%;
}
.buy-magnet-stick__fx.spotlight-card,
.buy-magnet-stick__glare.glare-hover {
  display: block;
  width: 100%;
  overflow: visible;
}
.buy-magnet-stick__cover,
.buy-magnet-stick__meta {
  display: none;
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__pin {
  position: fixed;
  top: calc(var(--buy-magnet-top, 0px) + 8px);
  left: var(--buy-magnet-left, 0px);
  width: var(--buy-magnet-width, 100%);
  max-width: calc(100vw - 24px);
  z-index: 8;
  padding: 10px;
  box-sizing: border-box;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 16%, transparent);
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__fx.spotlight-card,
.buy-magnet-stick.is-stuck .buy-magnet-stick__glare.glare-hover {
  overflow: visible;
  border-radius: 0;
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__cover {
  display: block;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  overflow: hidden;
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__cover .cover,
.buy-magnet-stick.is-stuck .buy-magnet-stick__cover .forum-cover {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 10px;
  object-fit: cover;
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__meta {
  display: block;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__price-sub {
  font-weight: 600;
  color: var(--text);
}
.buy-magnet-stick.is-stuck .buy-magnet-stick__meta .price-dual__sep {
  margin: 0 0.35em;
  color: var(--text);
  font-weight: 500;
}
.buy-magnet-stick.is-stuck .buy-action,
.buy-magnet-stick.is-stuck .ui-btn {
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  font-size: 13px;
}
.buy-magnet-stick.is-stuck .buy-action-row > .ui-btn-magnet:not(.ui-btn-magnet--full) {
  margin-left: 4px;
}
.buy-magnet-stick.is-stuck .buy-version-pick.ui-icon-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.buy-magnet-stick.is-stuck .buy-version-pick__mark {
  width: 10px;
  height: 10px;
}
.buy-magnet-stick.is-stuck .buy-action {
  overflow: hidden;
  text-overflow: ellipsis;
}
.forum-mobile .buy-magnet-stick.is-stuck .buy-magnet-stick__pin {
  left: 50%;
  transform: translateX(-50%);
  animation-name: buy-magnet-pin-in-x;
}
@keyframes buy-magnet-pin-in-x {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .buy-magnet-stick.is-stuck .buy-magnet-stick__pin {
    animation: buy-magnet-pin-in .42s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@keyframes buy-magnet-pin-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.buy-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px; }
.buy-b > .ghead-honors {
  display: flex;
  width: auto;
  max-width: calc(100% + 18px);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  direction: rtl;
  margin: 0 -18px 4px auto;
}
.buy-b > .ghead-honors:first-child {
  margin-top: -16px;
}
.buy-b > .ghead-honors + .buy-titleline {
  padding-top: 0;
}
.buy-titleline {
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
  padding-top: 10px;
}
.buy-b > .buy-titleline:first-child {
  margin-top: -16px;
}
.buy-titleline > .buy-t {
  flex: 1 1 auto;
  min-width: 0;
}
.buy-b .ghead-honor {
  direction: ltr;
  white-space: nowrap;
}
.buy-t {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  min-width: 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.buy-intro { margin-bottom: 12px; }
.buy-m {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}
.buy-intro:not(.is-open) .buy-m {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.buy-m__more {
  margin-top: 4px;
  min-height: 28px;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
}
.buy-intro .ui-btn-magnet { display: inline-flex; }
.buy-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.buy-price--with-claim {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.buy-price--with-claim .ui-btn-magnet,
.buy-price--with-claim .ui-btn {
  flex: none;
  width: 100%;
}
.buy-price__meta {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
}
.buy-price-main {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.buy-price-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.forum-pc .ui-modal-backdrop.play-version-backdrop {
  left: var(--sidebar-w, 188px);
}
.ui-modal.play-version-modal {
  overflow: hidden;
}
.ui-modal.play-version-modal > .ui-card__body {
  padding: 12px 16px 16px;
  gap: 0;
  overflow: hidden;
}
.play-version-pick__search {
  margin: 0 0 8px;
}
.play-version-pick__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.play-version-pick__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
}
.play-version-pick__item:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.play-version-pick__item:disabled {
  cursor: default;
  opacity: 0.6;
}
.play-version-pick__head,
.play-version-pick__meta {
  display: flex;
  align-items: flex-start;
}
.play-version-pick__name {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.play-version-pick__date,
.play-version-pick__status {
  margin-left: auto;
  padding-left: 8px;
  flex: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.play-version-pick__date,
.play-version-pick__id {
  color: var(--text-muted);
}
.play-version-pick__meta {
  margin-top: 4px;
}
.play-version-pick__id {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.play-version-pick__note {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.buy-price__meta .price-dual__sep {
  margin: 0 0.58em;
  color: color-mix(in srgb, var(--text-muted) 42%, transparent);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}
.buy-state {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.6;
}
.buy-state svg {
  flex: none;
  margin-top: 2px;
  color: var(--success);
}
.buy-note { font-size: 12px; color: var(--text-muted); line-height: 1.65; margin-top: 10px; background: var(--surface-muted); border-radius: var(--radius-control); padding: 8px 10px; }
.buy-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.buy-facts--first {
  margin-top: 0;
  margin-bottom: 14px;
  padding-top: 0;
  border-top: 0;
}
.buy-facts--plain {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: space-between;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
}
.buy-facts--after-kv {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
.buy-fact-check,
.buy-fact-lang {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
  color: #a39eaa;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.buy-fact-check svg,
.buy-fact-lang svg { flex: none; }
.buy-fact-lang {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: flex-start;
  white-space: normal;
  overflow-wrap: break-word;
}
.buy-fact-lang__text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}
.buy-fact-check.is-on { color: #1f9d55; }
.buy-fact {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  max-width: 100%;
  background: #f3f1f4;
  color: #5c5663;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}
.buy-kv {
  font-size: 13px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.buy-kv--first {
  margin-top: 0;
  margin-bottom: 14px;
  padding-top: 0;
  border-top: 0;
}
.buy-kv dt {
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.55;
  white-space: nowrap;
}
.buy-kv dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-weight: 400;
  line-height: 1.55;
}

.buy-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--type-body-s);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.buy-action svg {
  flex: none;
}
.buy-action-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.buy-action-row > .ui-btn-magnet--full {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.buy-action-row > .ui-btn-magnet:not(.ui-btn-magnet--full) {
  flex: none;
  margin-left: 8px;
}
.buy-version-pick.ui-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
.buy-version-pick__mark {
  display: block;
  transform: rotate(180deg);
}
.buy-action--cta {
  background-color: var(--accent-action);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent-action) 88%, var(--surface-raised)), var(--accent-action));
  color: var(--accent-ink);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);
}
.buy-action--cta:hover:not(:disabled) {
  background-color: var(--accent-hover);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent-hover) 82%, var(--surface-raised)), var(--accent-hover));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent);
  transform: scale(1.02);
}
.buy-action--dark {
  background: var(--text);
  color: var(--surface-raised);
}
.buy-action--dark:hover {
  background: color-mix(in srgb, var(--text) 88%, var(--surface));
}
.buy-action--line {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text);
}
.buy-action--line:hover {
  border-color: var(--line-hover);
}
.buy-action:disabled {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.buy-action.is-loading {
  cursor: wait;
  pointer-events: none;
  opacity: .88;
}
.buy-action--dark.is-loading:disabled {
  background: var(--text);
  color: var(--surface-raised);
  border-color: transparent;
}
.buy-action--cta.is-loading:disabled {
  background-color: var(--accent-action);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent-action) 88%, var(--surface-raised)), var(--accent-action));
  color: var(--accent-ink);
  border-color: transparent;
}
.buy-action--line.is-loading:disabled {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text);
}

.buy-cmd {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 12px);
  background: var(--surface-raised);
  overflow: visible;
}

.buy-cmd__prompt {
  flex: none;
  align-self: center;
  padding: 6px 0 6px 10px;
  color: var(--success);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.buy-cmd__code {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  align-self: stretch;
  margin: 0;
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  cursor: text;
  user-select: text;
  white-space: nowrap;
}

.buy-cmd__code:focus,
.buy-cmd__code:focus-visible {
  outline: none;
}

.buy-cmd--wrap {
  align-items: flex-start;
}

.buy-cmd--wrap .buy-cmd__code {
  width: 100%;
  min-height: 3.2em;
  resize: none;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.buy-cmd .ui-float-tip {
  flex: none;
  align-self: stretch;
  display: flex;
}

.buy-cmd .ui-btn-magnet {
  flex: none;
  align-self: stretch;
  display: flex;
}

.buy-cmd__copy,
.buy-cmd .ui-icon-btn.buy-cmd__copy {
  flex: none;
  align-self: stretch;
  width: 34px;
  height: auto;
  min-height: 36px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.buy-cmd .ui-icon-btn.buy-cmd__copy:hover:not(:disabled) {
  background: var(--surface-muted);
  border-left-color: var(--line);
  transform: none;
}
.buy-cmd .ui-icon-btn.buy-cmd__copy {
  border-radius: 0 var(--radius-control, 12px) var(--radius-control, 12px) 0;
}

.buy-social {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  margin-top: 10px;
  min-width: 0;
}
.buy-social__magnet {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}
.buy-social__glare.glare-hover {
  display: flex;
  flex: 1;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-pill);
}
.buy-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 3px;
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  cursor: pointer;
}
.buy-social__glare .buy-social__btn {
  flex: 1;
  width: 100%;
}
.buy-social__btn:hover {
  border-color: var(--line-hover);
}
.buy-social__btn svg,
.buy-follow-btn svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}
.buy-social__label,
.buy-fav-n {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 16px;
  line-height: 16px;
  overflow: visible;
}
.buy-fav-n {
  min-width: 1em;
  margin-left: 1px;
  padding-left: 5px;
  border-left: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.buy-social__more-slot {
  display: flex;
  flex: none;
  align-items: stretch;
}
.buy-social__more-slot .ui-btn-magnet {
  display: flex;
  align-items: stretch;
}
.buy-social__more.ui-icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  line-height: 0;
  overflow: visible;
}
.buy-social__more.ui-icon-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}
.buy-social__more.ui-icon-btn:hover:not(:disabled) {
  border-color: var(--line-hover);
}
.buy-social__menu-item.ui-btn {
  justify-content: flex-start;
  width: 100%;
}

.buy-follow-magnet {
  display: inline-flex;
  flex-shrink: 0;
}
.buy-follow-glare.glare-hover {
  display: block;
  border-radius: var(--radius-pill);
}
.buy-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: max-content;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.buy-follow-btn:hover {
  border-color: var(--line-hover);
}

.event-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-action) 92%, var(--surface-raised)), var(--accent-action));
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-card);
  padding: 0 12px 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 0;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);
}
.event-card:hover {
  filter: brightness(1.04);
}
.event-card.is-ended {
  background: var(--surface-muted);
  color: var(--text);
  box-shadow: none;
  border: 1px solid var(--line);
}
.event-card.is-ended:hover {
  filter: none;
  background: color-mix(in srgb, var(--text-muted) 8%, var(--surface-muted));
}
.event-card--pending {
  visibility: hidden;
  pointer-events: none;
}
.event-card svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}
.event-card.is-ended svg {
  color: var(--text-muted);
}
.event-card__copy {
  display: block;
  flex: 1;
  min-width: 0;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-card b {
  font-weight: 700;
  line-height: inherit;
}
.event-card .ui-badge {
  flex: none;
  line-height: 1.2;
}

.src-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.src-card:hover {
  box-shadow: var(--shadow-hover, var(--shadow));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}
.src-card:disabled {
  cursor: default;
  opacity: 0.72;
}
.src-card:disabled:hover {
  box-shadow: var(--shadow);
  border-color: var(--line);
}
.src-card > svg:first-child {
  color: var(--accent-dark);
  flex: none;
}
.src-card-l {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.src-card-t {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.src-card-x {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.src-card-arrow {
  color: var(--text-muted);
  flex: none;
  margin-left: auto;
}

.col-side > .event-card,
.col-side > :has(.event-card),
.col-side > .buy,
.col-side > .src-card {
  width: 100%;
}

.col-side > .buy + .buy {
  margin-top: 14px;
}

.col-side > .event-card + .buy,
.col-side > :has(.event-card) + .buy {
  margin-top: 14px;
}

.col-side > .buy + .src-card,
.col-side > .event-card + .src-card,
.col-side > :has(.event-card) + .src-card {
  margin-top: 14px;
}

.floor-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.floor {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  background: var(--surface-raised);
}
.floor-u {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 16px 22px;
  border-right: 1px solid var(--line);
  text-align: center;
  background: color-mix(in srgb, var(--surface-muted) 32%, var(--surface-raised));
}
.floor-u .floor-av {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 10px;
}
.floor-u .floor-av .ui-avatar.ui-avatar--lg,
.floor-u .ui-avatar.ui-avatar--lg {
  width: 104px;
  height: 104px;
  font-size: 36px;
  margin: 0;
  border: none;
  border-radius: 0;
  flex: none;
}
.floor-un {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
}
.floor-title {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}
.floor-u > .ui-forum-role {
  align-self: center;
  justify-content: center;
  margin-inline: auto;
}
.floor-title.is-author { color: var(--accent-dark); font-weight: 600; }
.floor-title--critic { color: var(--info); font-weight: 600; }
.floor-title--reader { color: var(--text-muted); font-weight: 500; }
.floor-stats {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  align-self: center;
}
.floor-stats div { display: grid; grid-template-columns: minmax(2em, max-content) minmax(0, 1fr); gap: 15px; font-size: 12px; line-height: 1.5; justify-items: start; }
.floor-stats dt { color: var(--text-muted); margin: 0; text-align: right; white-space: nowrap; }
.floor-stats dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }
.floor-played { font-size: 11.5px; color: var(--success); margin-top: 8px; text-align: left; }
.floor-c { padding: 0; min-width: 0; display: flex; flex-direction: column; container: floorc / inline-size; }
.floor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 20px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  background: #f4f4f6;
  background: color-mix(in srgb, var(--surface-muted) 46%, var(--surface-raised));
}
.floor-top__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}
.floor-top__lead.is-rec {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
}
.floor-top__lead.is-rec > .rec {
  display: contents;
}
.floor-top__lead.is-rec .rec__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #fff;
}
.floor-top__lead.is-rec .rec-yes .rec__icon { background: #2fad62; }
.floor-top__lead.is-rec .rec-no .rec__icon { background: #8d8d93; }
.floor-top__lead.is-rec .rec__icon svg {
  width: 16px;
  height: 16px;
  color: #fff;
}
.floor-top__lead.is-rec .rec__label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.floor-top__lead.is-rec .rec-yes .rec__label { color: #1a7a45; }
.floor-top__lead.is-rec .rec-no .rec__label { color: var(--text-muted); }
.floor-top__lead.is-rec .floor-top__time {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
.floor-top__time {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-muted);
}
.floor-top__tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  margin-left: auto;
}
.floor-top .rec,
.replybox.is-own .replybox-id .rec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.floor-top .rec-yes,
.replybox.is-own .replybox-id .rec-yes {
  background: #2fad62;
  color: #fff;
}
.floor-top .rec-no,
.replybox.is-own .replybox-id .rec-no {
  background: #8d8d93;
  color: #fff;
}
.floor-top .rec svg,
.replybox.is-own .replybox-id .rec svg {
  width: 14px;
  height: 14px;
  color: #fff;
}
.floor-only {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
  cursor: pointer;
}
.floor-only:hover { color: var(--text); text-decoration: underline; }
.floor-no { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0; line-height: 1.4; }
.floor-b { font-size: 14.5px; line-height: 1.9; color: var(--text); padding: 25px 20px 12px; min-width: 0; overflow-wrap: anywhere; }
.floor-react {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 20px 8px;
}
.floor-react--inset { padding: 12px 0 0; }
.floor-react__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  white-space: nowrap;
}
.floor-react__row .floor-react__edited {
  margin-left: auto;
}
.floor-react .ui-btn {
  gap: 4px;
  flex-shrink: 0;
}
.floor-react__edited {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.floor-sub__meta .floor-react__edited {
  display: none;
}
.floor-react__row .ui-btn-magnet .ui-btn.ui-btn--outline {
  min-height: 26px;
  padding: 0 10px;
  background: var(--surface-raised);
  border-color: color-mix(in srgb, var(--text-muted) 28%, var(--line));
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  box-shadow: none;
}
.floor-react__row .ui-btn-magnet .ui-btn svg {
  width: 13px;
  height: 13px;
  color: currentColor;
}
.floor-react .ui-btn.ui-btn--outline:hover:not(:disabled) {
  background: var(--surface-muted);
  color: var(--text-muted);
}
.floor-react .ui-btn.is-pressed {
  color: var(--accent-dark);
  border-color: var(--accent);
}
.floor-react__chips,
.floor-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.floor-emoji-row {
  margin: 4px 20px 16px;
  min-width: 0;
  max-width: 100%;
}
.floor-emoji-picker__status {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.floor-emoji-popover.ui-popover {
  overflow: visible;
}
.floor-emoji-popover > .ui-card__header {
  align-items: flex-end;
  padding: 2px 6px 0 10px;
  gap: 4px;
}
.floor-emoji-popover > .ui-card__header .ui-card__title {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  font: inherit;
  letter-spacing: 0;
  line-height: inherit;
}
.floor-emoji-popover > .ui-card__header .ui-modal__close {
  align-self: center;
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}
.floor-emoji-popover > .ui-card__header .ui-modal__close svg {
  width: 14px;
  height: 14px;
}
.floor-emoji-popover > .ui-card__body {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: calc(36px * 4 + 2px * 3 + 8px + 2px + 6px + 14px);
  min-height: 0;
  padding: 6px 20px 14px;
  overflow: hidden;
}
.floor-emoji-picker.emoji-picker {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: none;
  overflow: hidden;
  background: transparent;
}
.floor-emoji-picker__tabs.ui-tabs-line {
  flex: 1;
  gap: 16px;
  margin: 0;
  min-width: 0;
  border-bottom: 0;
}
.floor-emoji-picker__tabs .ui-tabs-line__item {
  min-height: 36px;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 500;
}
.floor-emoji-picker .emoji-picker__grid {
  --emoji-cols: 8;
  --emoji-rows: 4;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: 36px;
  gap: 2px 6px;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 8px 4px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
}
.floor-emoji-picker .emoji-picker__grid button {
  position: relative;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.floor-emoji-picker .emoji-picker__grid button:hover,
.floor-emoji-picker .emoji-picker__grid button:focus-visible {
  z-index: 3;
  background: transparent;
}
.floor-emoji-picker .emoji-picker__grid img,
.floor-emoji-picker .emoji-picker__grid button > span {
  width: 26px;
  height: 26px;
  object-fit: contain;
  transition: transform .16s ease;
}
.floor-emoji-picker .emoji-picker__grid button:hover img,
.floor-emoji-picker .emoji-picker__grid button:hover > span,
.floor-emoji-picker .emoji-picker__grid button:focus-visible img,
.floor-emoji-picker .emoji-picker__grid button:focus-visible > span {
  transform: scale(1.5);
}
.floor-emoji-picker .emoji-picker__grid button[data-name]::after {
  content: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  max-width: 72px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--surface-raised);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}
.floor-emoji-picker .emoji-picker__grid button[data-name]:nth-child(-n+8)::after {
  bottom: auto;
  top: calc(100% + 2px);
}
.floor-emoji-picker .emoji-picker__grid button[data-name]:nth-child(8n+1)::after {
  left: 0;
  right: auto;
  transform: none;
}
.floor-emoji-picker .emoji-picker__grid button[data-name]:nth-child(8n)::after {
  left: auto;
  right: 0;
  transform: none;
}
.floor-emoji-picker .emoji-picker__grid button[data-name]:hover::after,
.floor-emoji-picker .emoji-picker__grid button[data-name]:focus-visible::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .floor-emoji-picker .emoji-picker__grid img,
  .floor-emoji-picker .emoji-picker__grid button > span {
    transition: none;
  }
}
.floor-emoji-row .floor-react__chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.floor-emoji-row .floor-react__chip-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.floor-emoji-row .floor-react__chip-count.is-changing {
  animation: floor-react-count .28s ease;
}
@keyframes floor-react-count {
  from { transform: translateY(2px) scale(.82); opacity: .45; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .floor-emoji-row .floor-react__chip,
  .floor-emoji-row .floor-react__chip-count.is-changing {
    transition: none;
    animation: none;
  }
}
.floor-emoji-row button.floor-react__chip:hover {
  border-color: var(--line-hover);
}
.floor-emoji-row .floor-react__chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.floor-emoji-row .floor-react__chip-sep,
.floor-emoji-row .floor-react__chip-names,
.floor-emoji-row .floor-react__chip-count {
  color: inherit;
}
.floor-emoji-row .floor-react__chip-names {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 16px;
  padding: 0;
  text-align: left;
}
.floor-emoji-row span.floor-react__chip {
  cursor: default;
}
.floor-emoji-row .floor-react__chip-names .is-self {
  color: #ad9a5d;
}
/* 没有用户名时，自己点过的只靠浅底和字色区分。 */
.floor-emoji-row .floor-react__chip.is-reacted:not(:has(.floor-react__chip-names)) {
  border-color: color-mix(in srgb, #ad9a5d 40%, var(--line));
  background: color-mix(in srgb, #ad9a5d 8%, var(--surface-raised));
  color: #ad9a5d;
}
.floor-emoji-row button.floor-react__chip.is-reacted:not(:has(.floor-react__chip-names)):hover {
  border-color: #ad9a5d;
}
.forum-mobile .floor-emoji-row .floor-react__chip.is-reacted:not(:has(.floor-react__chip-names)) {
  border-color: #ad9a5d;
  background: #f8f4e8;
  color: #ad9a5d;
}
.floor-b .tiptap,
.floor-b .tiptap-surface { min-width: 0; max-width: 100%; }
.floor-b .rec { display: flex; margin: 0 0 6px; }
.floor-b p { margin: 0 0 8px; min-width: 0; }
.floor-b b, .floor-b strong { font-weight: 700; }
.floor-b em,
.floor-sub em,
.floor-sub__text em { font-style: italic; }
.floor-b .tiptap-surface.readonly [data-blackout],
.floor-sub .tiptap-surface.readonly [data-blackout],
.floor-sub__text [data-blackout] {
  position: relative;
  background: var(--text);
  color: var(--text);
  padding: 0 5px;
  border-radius: 0;
  cursor: help !important;
  transition: color .15s ease;
}
.floor-b .tiptap-surface.readonly [data-blackout]:hover,
.floor-b .tiptap-surface.readonly [data-blackout]:focus-visible,
.floor-sub .tiptap-surface.readonly [data-blackout]:hover,
.floor-sub .tiptap-surface.readonly [data-blackout]:focus-visible,
.floor-sub__text [data-blackout]:hover,
.floor-sub__text [data-blackout]:focus-visible {
  color: var(--surface-raised);
  outline: none;
}
.floor-b:has(.floor-emoji) .tiptap,
.floor-b:has(.floor-emoji) .tiptap-surface,
.floor-b:has(.floor-emoji) .tiptap-surface p:last-child {
  display: inline;
}
.floor-emoji {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: -5px;
}
.emoji-inline {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  line-height: 1;
}
.floor-subs {
  margin: 16px 20px 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow-anchor: none;
}
.floor-sub-anim,
.floor-subs__more-magnet {
  min-width: 0;
  overflow-anchor: none;
}
.floor-sub-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  --floor-nest: 0;
  padding-left: 0;
}
.floor-sub {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  font-size: 13px;
  line-height: 1.55;
  padding: 0;
  border-radius: 0;
}
.floor-sub__lead {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
  margin-left: 0;
}
.floor-sub .ui-avatar.ui-avatar--sm {
  width: 22px;
  height: 22px;
  font-size: 10px;
  flex: none;
  margin: 1px 0 0;
  border-radius: 50%;
  align-self: flex-start;
}
.floor-sub__main {
  margin: 0;
  min-width: 0;
  flex: 1;
  display: block;
  line-height: 1.55;
}
.floor-sub__head,
.floor-sub__meta {
  display: inline;
}
.floor-sub__main .ui-btn-magnet {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 4px;
}
.floor-sub__name {
  display: inline;
  margin-right: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 400;
  line-height: inherit;
  min-height: 0;
  height: auto;
  cursor: pointer;
  vertical-align: baseline;
}
.floor-sub__name:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.floor-sub__name--to { margin-right: 6px; color: var(--accent-dark); font-weight: 400; }
.floor-sub__author {
  display: inline;
  margin: 0 6px 0 0;
  color: var(--text-muted);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}
.floor-sub__reply-label {
  display: inline;
  margin-right: 6px;
  color: var(--text-muted);
  font-size: inherit;
  font-weight: 400;
}
.floor-sub__text,
.floor-sub__text .tiptap-surface {
  color: var(--text);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}
.floor-sub__time {
  display: inline;
  margin-left: 8px;
  font-size: 12px;
  line-height: inherit;
  color: var(--text-muted);
  white-space: nowrap;
}
.floor-sub__actions {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  vertical-align: -3px;
  margin-top: 0;
  margin-left: 12px;
  gap: 12px;
}
.floor-sub__main .floor-sub__actions .ui-btn-magnet {
  margin-left: 0;
}
.floor-sub__actions .ui-btn-magnet {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.floor-sub__actions .ui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-muted);
  opacity: .55;
  overflow: visible;
  line-height: 0;
}
.floor-sub__actions .ui-icon-btn svg {
  display: block;
}
.floor-sub__actions .ui-icon-btn.ui-hover-glow::before,
.floor-sub__actions .ui-icon-btn.ui-hover-glow::after {
  content: none;
}
.floor-sub__actions .ui-icon-btn:hover:not(:disabled) {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--accent-dark);
  opacity: 1;
  transform: none;
}
.floor-sub-wrap .floor-nested-editor,
.floor-subs > .floor-nested-editor {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.floor-delete-confirm {
  overflow: hidden;
  border-radius: 10px;
}
.floor-delete-confirm > .ui-card__body {
  padding: 10px 12px 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  gap: 0;
}
.floor-delete-confirm__points {
  display: block;
  white-space: nowrap;
}
.floor-delete-confirm > .ui-card__footer {
  padding: 8px 10px 10px;
  border-top: 0;
  background: transparent;
  gap: 6px;
}
.floor-delete-confirm > .ui-card__footer .ui-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.floor-subs__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.floor-subs__more-magnet {
  display: inline-flex;
  align-self: flex-start;
}
.floor-sub-anim {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.floor-subs__more-arr {
  display: inline-flex;
  flex: none;
  transform-origin: 50% 50%;
}
.floor-subs__more svg {
  flex: none;
}
.floor-subs__more:hover { color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .floor-subs__more-arr { transition: none; }
}
.floor-foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px;
  margin-top: auto;
  padding: 12px 20px 16px;
}
.floor-foot.has-sig {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  min-height: 92px;
  margin-top: auto;
  margin-right: 20px;
  margin-left: 20px;
  padding: 14px 0 16px;
  border-top: 1px dotted var(--line);
}
.floor-sig {
  min-width: 0;
  width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  min-height: 44px;
  padding-bottom: 2px;
}
.floor-sig__h {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--text-muted);
  margin-bottom: 0;
  font-weight: 700;
}
.floor-sig__h.shiny-text {
  background-image: linear-gradient(
    105deg,
    var(--text-muted) 16%,
    color-mix(in srgb, var(--text-muted) 35%, var(--surface-raised)) 38%,
    var(--text) 52%,
    var(--text-muted) 78%
  );
}
.floor-sig p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.75; }
.floor-sig p + p { margin-top: .35em; }
.floor-sig .tiptap-surface.readonly.floor-rich {
  min-height: 72px;
  padding: 0;
  background: transparent;
  overflow: visible;
}
.floor-sig .tiptap-surface.readonly.floor-rich strong { font-weight: 700; }
.floor-sig .tiptap-surface.readonly.floor-rich em { font-style: italic; }
.floor-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 18px;
  flex: none;
  margin: 0 0 0 auto;
  padding: 0;
  line-height: 0;
}
.floor-foot.has-sig .floor-actions {
  width: 100%;
  margin: 0;
  justify-content: flex-end;
  align-self: stretch;
}
.floor-actions .ui-btn-magnet {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.floor-actions .ui-btn.ui-btn--ghost {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  gap: 4px;
  line-height: 0;
  box-shadow: none;
  overflow: visible;
}
.floor-actions .ui-btn.ui-btn--ghost > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.floor-actions .ui-btn.ui-btn--ghost svg {
  display: block;
  flex-shrink: 0;
}
.floor-actions .ui-btn.ui-btn--ghost:hover:not(:disabled),
.floor-actions .ui-btn.ui-btn--ghost:hover {
  background: none;
  color: var(--accent-dark);
  transform: none;
}
.floor-actions .ui-btn.is-pressed { color: var(--accent-dark); }
.floor-top .floor-actions__report.ui-icon-btn,
.floor-top .floor-actions__manage.ui-icon-btn,
.replybox-id .floor-actions__manage.ui-icon-btn,
.floor-actions .floor-actions__report.ui-icon-btn,
.floor-sub__main .floor-actions__report.ui-icon-btn,
.floor-sub__main .floor-actions__edit.ui-icon-btn,
.floor-sub__actions .floor-actions__report.ui-icon-btn,
.floor-sub__actions .floor-actions__reply.ui-icon-btn,
.floor-sub__actions .floor-actions__delete.ui-icon-btn,
.floor-sub__actions .floor-actions__edit.ui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-muted);
  opacity: .55;
  overflow: visible;
  line-height: 0;
}
.floor-top .floor-actions__report.ui-icon-btn svg,
.floor-top .floor-actions__manage.ui-icon-btn svg,
.replybox-id .floor-actions__manage.ui-icon-btn svg,
.floor-actions .floor-actions__report.ui-icon-btn svg,
.floor-sub__main .floor-actions__report.ui-icon-btn svg,
.floor-sub__main .floor-actions__edit.ui-icon-btn svg,
.floor-sub__actions .floor-actions__report.ui-icon-btn svg,
.floor-sub__actions .floor-actions__reply.ui-icon-btn svg,
.floor-sub__actions .floor-actions__delete.ui-icon-btn svg,
.floor-sub__actions .floor-actions__edit.ui-icon-btn svg {
  display: block;
}
.floor-top .floor-actions__report.ui-icon-btn.ui-hover-glow::before,
.floor-top .floor-actions__report.ui-icon-btn.ui-hover-glow::after,
.floor-top .floor-actions__manage.ui-icon-btn.ui-hover-glow::before,
.floor-top .floor-actions__manage.ui-icon-btn.ui-hover-glow::after,
.replybox-id .floor-actions__manage.ui-icon-btn.ui-hover-glow::before,
.replybox-id .floor-actions__manage.ui-icon-btn.ui-hover-glow::after,
.floor-actions .floor-actions__report.ui-icon-btn.ui-hover-glow::before,
.floor-actions .floor-actions__report.ui-icon-btn.ui-hover-glow::after,
.floor-sub__main .floor-actions__report.ui-icon-btn.ui-hover-glow::before,
.floor-sub__main .floor-actions__report.ui-icon-btn.ui-hover-glow::after,
.floor-sub__main .floor-actions__edit.ui-icon-btn.ui-hover-glow::before,
.floor-sub__main .floor-actions__edit.ui-icon-btn.ui-hover-glow::after,
.floor-sub__actions .floor-actions__report.ui-icon-btn.ui-hover-glow::before,
.floor-sub__actions .floor-actions__report.ui-icon-btn.ui-hover-glow::after,
.floor-sub__actions .floor-actions__reply.ui-icon-btn.ui-hover-glow::before,
.floor-sub__actions .floor-actions__reply.ui-icon-btn.ui-hover-glow::after,
.floor-sub__actions .floor-actions__delete.ui-icon-btn.ui-hover-glow::before,
.floor-sub__actions .floor-actions__delete.ui-icon-btn.ui-hover-glow::after,
.floor-sub__actions .floor-actions__edit.ui-icon-btn.ui-hover-glow::before,
.floor-sub__actions .floor-actions__edit.ui-icon-btn.ui-hover-glow::after {
  content: none;
}
.floor-top .floor-actions__report.ui-icon-btn,
.floor-top .floor-actions__manage.ui-icon-btn {
  opacity: 1;
  color: #9a9aa0;
}
.floor-top .floor-actions__report.ui-icon-btn svg,
.floor-top .floor-actions__manage.ui-icon-btn svg {
  width: 16px;
  height: 16px;
}
.floor-top .floor-actions__report.ui-icon-btn:hover:not(:disabled),
.floor-top .floor-actions__manage.ui-icon-btn:hover:not(:disabled),
.replybox-id .floor-actions__manage.ui-icon-btn:hover:not(:disabled),
.floor-actions .floor-actions__report.ui-icon-btn:hover:not(:disabled),
.floor-sub__main .floor-actions__report.ui-icon-btn:hover:not(:disabled),
.floor-sub__main .floor-actions__edit.ui-icon-btn:hover:not(:disabled),
.floor-sub__actions .floor-actions__report.ui-icon-btn:hover:not(:disabled),
.floor-sub__actions .floor-actions__reply.ui-icon-btn:hover:not(:disabled),
.floor-sub__actions .floor-actions__delete.ui-icon-btn:hover:not(:disabled),
.floor-sub__actions .floor-actions__edit.ui-icon-btn:hover:not(:disabled) {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--accent-dark);
  opacity: 1;
  transform: none;
}
.floor-sub__actions .floor-actions__reply.ui-icon-btn,
.floor-sub__actions .floor-actions__like.ui-icon-btn {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  opacity: .55;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
.floor-sub__actions .floor-actions__reply.ui-icon-btn span,
.floor-sub__actions .floor-actions__like.ui-icon-btn span {
  color: inherit;
}
.floor-sub__actions .floor-actions__reply.ui-icon-btn svg,
.floor-sub__actions .floor-actions__like.ui-icon-btn svg {
  width: 13px;
  height: 13px;
}
.floor-sub__actions .floor-actions__like.ui-icon-btn.is-pressed {
  color: var(--accent-dark);
  opacity: 1;
}
.floor-sub__actions .floor-actions__reply.ui-icon-btn:hover:not(:disabled) {
  background: none;
  color: var(--accent-dark);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .floor-sub:not(:hover):not(:focus-within) .floor-sub__actions .floor-actions__report.ui-icon-btn,
  .floor-sub:not(:hover):not(:focus-within) .floor-sub__actions .floor-actions__reply.ui-icon-btn,
  .floor-sub:not(:hover):not(:focus-within) .floor-sub__actions .floor-actions__delete.ui-icon-btn {
    opacity: 0;
    pointer-events: none;
  }
}
.floor-mod {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.floor-mod__meta {
  margin: 0;
  font-size: var(--type-body-s, 13px);
  color: var(--text-muted);
  line-height: 1.5;
}
.floor-edit {
  position: relative;
}
.floor-edit .rich-editor--reply .rich-editor__insert-bar {
  padding-right: 128px;
}
.floor-edit__acts {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.floor-edit__acts .ui-btn {
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-family: var(--font-body);
}
/* 全屏时编辑器自己 fixed 会盖住外面的保存。改由评论编辑层铺满视口，保存留在右下角。 */
.floor-edit.is-reply-fullscreen {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 16px 28px 28px;
  background: var(--surface-raised);
  overflow: hidden;
  box-sizing: border-box;
}
.floor-edit.is-reply-fullscreen > .rich-editor {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  overflow: hidden;
}
.floor-edit.is-reply-fullscreen .floor-edit__acts {
  right: 24px;
  bottom: 20px;
  z-index: 20;
}
.floor-mod__acts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.floor-mod__acts .ui-btn-magnet--full {
  width: 100%;
}
.floor-mod__act.ui-btn {
  justify-content: center;
  min-height: 48px;
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.floor-mod__act.ui-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--text);
}
.mute-user-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mute-user-panel__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.floor-mod__hint {
  margin: 0;
  font-size: var(--type-caption, 12px);
  color: var(--text-muted);
  line-height: 1.65;
}
.ui-modal:has(.floor-mod) > .ui-card__body {
  gap: 0;
  padding-top: 14px;
}
.ui-modal.ui-modal--report,
.ui-modal:has(.floor-report) {
  display: flex;
  flex-direction: column;
  height: min(640px, calc(100vh - 48px));
  height: min(640px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}
.ui-modal.ui-modal--report > .ui-card__header,
.ui-modal.ui-modal--report > .ui-card__footer,
.ui-modal:has(.floor-report) > .ui-card__header,
.ui-modal:has(.floor-report) > .ui-card__footer {
  flex: none;
}
.ui-modal.ui-modal--report > .ui-card__footer,
.ui-modal:has(.floor-report) > .ui-card__footer {
  display: flex;
  justify-content: center;
}
.ui-modal.ui-modal--report > .ui-card__footer .ui-btn,
.ui-modal:has(.floor-report) > .ui-card__footer .ui-btn {
  min-width: 168px;
}
.ui-modal.ui-modal--report > .ui-card__body,
.ui-modal:has(.floor-report) > .ui-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.floor-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  height: 100%;
  min-height: 0;
}
.floor-report__cats {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.floor-report__legend {
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.floor-report__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.floor-report__cats .ui-field__error {
  flex: none;
  margin-top: 6px;
}
.floor-report .ui-field {
  flex: none;
}
.floor-report__note {
  position: relative;
  flex: none;
}
.floor-report__note .ui-textarea {
  min-height: 7.5rem;
  padding-bottom: 28px;
  resize: none;
}
html[data-boot-surface='mobile'] .ui-modal.ui-modal--report,
html[data-boot-surface='mobile'] .ui-modal.ui-modal--report > .ui-card__body,
html[data-tablet] .ui-modal.ui-modal--report,
html[data-tablet] .ui-modal.ui-modal--report > .ui-card__body {
  -webkit-overflow-scrolling: auto;
}
/* 遮罩铺满可见区域。键盘打开时脚本只改这一层的 top/height，不挪页面。
   模糊和 transform 留在祖先上时，iOS 只画光标、不画文字。 */
html[data-boot-surface='mobile'] .ui-modal-backdrop.ui-modal-backdrop--report {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  padding: 8px;
  box-sizing: border-box;
  align-items: flex-end;
  justify-items: center;
  -webkit-transform: none !important;
  transform: none !important;
}
html[data-boot-surface='mobile'] .ui-modal-backdrop.ui-modal-backdrop--report::before,
html[data-tablet] .ui-modal-backdrop.ui-modal-backdrop--report::before {
  content: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-boot-surface='mobile'] .ui-modal.ui-modal--report {
  height: auto;
  max-height: calc(var(--mobile-window-h, 100dvh) - 16px);
  -webkit-transform: none !important;
  transform: none !important;
  will-change: auto !important;
}
/* 键盘状态挂在 html 上。写在弹窗 class 上时，每输入一个字 React 都会重绘并清掉。
   说明挪到标题下面：键盘和 Safari 工具条盖住的是弹窗下半截，字留在看得见的上半截。
   遮罩高度跟可视区域，不改页面高度，也不在旧 top 上累加。 */
html[data-boot-surface='mobile'][data-report-keyboard='1'] .ui-modal-backdrop.ui-modal-backdrop--report {
  top: var(--report-vv-top, 0px);
  bottom: auto;
  height: var(--report-vv-h, 100%);
  align-items: stretch;
  justify-items: center;
  padding: 0 0 52px;
  box-sizing: border-box;
}
html[data-boot-surface='mobile'][data-report-keyboard='1'] .ui-modal.ui-modal--report {
  height: 100%;
  max-height: 100%;
}
html[data-boot-surface='mobile'][data-report-keyboard='1'] .floor-report__note {
  order: -1;
}
html[data-boot-surface='mobile'][data-report-keyboard='1'] .floor-report__note .ui-textarea {
  min-height: 4.5rem;
}
html[data-boot-surface='mobile'][data-report-keyboard='1'] .ui-modal--report > .ui-card__body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html[data-boot-surface='mobile'] .floor-report__note .ui-textarea,
html[data-tablet] .floor-report__note .ui-textarea {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  caret-color: var(--accent-dark);
  background-color: var(--surface-raised);
  opacity: 1;
  isolation: auto;
}
html[data-boot-surface='mobile'] .floor-report__note .ui-textarea.ui-hover-glow::before,
html[data-tablet] .floor-report__note .ui-textarea.ui-hover-glow::before {
  content: none;
}
.floor-report__count {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.floor-report__cats .ui-choice {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-control, 12px);
}
.floor-report__cats .ui-choice:has(input:checked) {
  background: color-mix(in srgb, var(--accent-action) 10%, var(--surface-muted));
}
.floor-board > .floor-board__head {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 2px 2px 0;
  /* 只收标题和下面第一块之间的空隙，列表项之间的 gap 不动。 */
  margin-bottom: -6px;
}
.floor-board__head {
  width: 100%;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  letter-spacing: .04em;
  align-items: center;
}
.floor-board__head > svg {
  display: block;
  flex: none;
  color: var(--accent-dark);
}
.floor-board__head > .grow {
  display: flex;
  align-items: center;
  height: 28px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.floor-board__tools {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin-left: auto;
  padding: 0;
  height: 28px;
  line-height: 0;
}
.floor-board__tools .ui-btn-magnet,
.floor-board__tools .ui-field {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 28px;
  min-height: 28px;
  margin: 0;
  gap: 0;
  line-height: 0;
  align-self: center;
}
.floor-board__tools .ui-btn.ui-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 0;
  color: var(--text-muted);
  white-space: nowrap;
}
.floor-board__tools .ui-btn.ui-btn--ghost > span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  line-height: 1;
}
.floor-board__tools .ui-btn.ui-btn--ghost svg {
  display: block;
  flex-shrink: 0;
}
.floor-board__tools .ui-btn.ui-btn--ghost:hover:not(:disabled) {
  background: none;
  color: var(--text);
  transform: none;
}
.floor-board__tools .ui-btn.ui-btn--ghost.is-pressed {
  color: var(--text);
  font-weight: 600;
}
.floor-board__tools .ui-field { min-width: min-content; flex: none; }
.floor-board__tools .ui-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  height: 28px;
  min-width: min-content;
  width: auto;
  padding: 0;
  overflow: visible;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 4px;
  white-space: nowrap;
}
.floor-board__tools .ui-select:hover,
.floor-board__tools .ui-select.is-open {
  color: var(--text);
  background: none;
}
.floor-board__tools .ui-select__value {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 28px;
  line-height: 1;
  overflow: visible;
}
.floor-board__tools .ui-select__chevron {
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--accent);
}
.replybox { margin: 14px 16px 8px; min-width: 0; }
.floor-board > .replybox {
  margin: 0;
  padding: 16px 18px 14px;
  border-radius: 0;
}
.floor-board > .replybox .replybox-sheet .rich-editor,
.floor-board > .replybox .replybox-sheet .rich-editor--reply .rich-editor__body,
.floor-board > .replybox .replybox-sheet .rich-editor--reply .tiptap-surface,
.floor-board > .replybox .replybox-sheet .rich-editor--reply .rich-editor__insert-bar {
  border-radius: 0;
}
.replybox-id { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; overflow: visible; }
.replybox-id__name {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.replybox-id__name.is-guest {
  font-weight: 500;
  color: var(--text-muted);
}
.replybox-id__to {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}
.replybox-id__to-name {
  color: var(--accent-dark);
  font-weight: 600;
}
.floor-nested-editor {
  scroll-margin-top: 72px;
  scroll-margin-bottom: 88px;
}
.floor-nested-editor .rich-editor--reply .rich-editor__insert-bar { padding-right: 180px; }
.floor-nested-editor .rich-editor--reply .tiptap-surface { min-height: 72px; }
.floor-nested-editor .replybox-sheet .rich-editor {
  background: var(--surface-raised);
}
.replybox-id__copy { margin: 0; flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); }
.replybox-id__copy--done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 700;
}
.replybox-id__copy--done svg { flex: none; color: var(--success); }
.replybox-done {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  font-size: 14.5px;
  line-height: 1.9;
}
.replybox-done p { margin: 0 0 8px; }
.replybox-done .tiptap-surface { min-height: 0; padding: 0; }
.replybox-id__floor {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .04em;
}
.floor-board > .replybox.floor-reply-editor.is-own {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.replybox.is-own > .floor-c {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
}
.replybox.is-own .replybox-id__copy--done {
  flex: none;
}
.replybox.is-own .rec { flex: none; }
.replybox.is-own .floor-subs {
  margin: 12px 0 0;
}
.replybox.is-own .floor-foot {
  margin: 0;
  padding: 10px 0 0;
  min-height: 0;
}
.replybox.is-own .floor-actions {
  margin-left: auto;
}
.replybox-stance { display: flex; gap: 8px; flex: none; overflow: visible; }
.replybox-stance.is-need .ui-chip:not(:disabled) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #c62828) 70%, transparent);
}
.replybox-stance .ui-chip:not(:disabled) {
  min-height: 32px;
  padding: 0 12px;
  color: var(--text);
  border-color: var(--text);
  background: var(--surface-raised);
  font-weight: 600;
}
.replybox-stance .ui-chip:disabled {
  min-height: 32px;
  padding: 0 12px;
  color: var(--text-muted);
  border-color: var(--line);
  background: var(--surface-muted);
  font-weight: 600;
  opacity: .68;
}
.replybox-stance .ui-chip:hover:not(.is-active):not(:disabled) {
  color: var(--text);
  border-color: var(--text);
  background: var(--surface-muted);
}
.replybox-stance .ui-chip.is-active:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow:
    0 0 0 1px var(--accent-dark),
    0 6px 14px color-mix(in srgb, var(--accent) 46%, transparent);
}
.replybox-sheet { position: relative; min-width: 0; display: grid; container: replybox / inline-size; }
.replybox-sheet > .rich-editor {
  grid-area: 1 / 1;
  min-width: 0;
}
.replybox-sheet .rich-editor {
  position: relative;
  border: 0;
  border-radius: var(--radius-card);
}
.replybox-sheet .rich-editor::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 9;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: inherit;
}
.replybox-sheet .rich-editor--reply .rich-editor__body,
.replybox-sheet .rich-editor--reply .tiptap-surface {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}
.replybox-sheet .rich-editor--reply .rich-editor__insert-bar {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}
.replybox .rich-editor--reply .rich-editor__insert-bar { padding-right: 148px; }
.replybox .rich-editor--reply .tiptap-surface { min-height: 128px; }
.replybox-publish {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: end;
  z-index: 20;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 8px 0;
  overflow: visible;
}
.replybox-publish .ui-btn-magnet { display: inline-flex; }
/* 全屏不盖遮罩，编辑框直接铺满视口。拆掉楼层 container，fixed 才按视口算 100%。 */
html.reply-fullscreen-active .panel.floor-board,
html.reply-fullscreen-active .floor-c {
  container-type: normal;
}
html.reply-fullscreen-active .bbs-col,
html.reply-fullscreen-active .bbs-col > * {
  isolation: auto;
  z-index: auto;
  transform: none;
  filter: none;
}
.replybox.is-reply-fullscreen,
.rich-editor--reply.is-reply-fullscreen {
  position: fixed;
  z-index: 90;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 28px 28px;
  max-width: none;
  max-height: none;
  background: var(--surface-raised);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
  --reply-fullscreen-footer-min: 52px;
}
.floor-board > .replybox.is-reply-fullscreen {
  margin: 0;
  padding: 16px 28px 28px;
  border-radius: 0;
}
.replybox.is-reply-fullscreen .replybox-id {
  flex: none;
  padding: 0 48px 12px 4px;
  margin-bottom: 10px;
}
.replybox.is-reply-fullscreen > .replybox-fullscreen-close {
  position: absolute;
  top: 16px;
  right: 28px;
  z-index: 30;
}
.replybox.is-reply-fullscreen .replybox-sheet {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  container: normal;
}
.replybox.is-reply-fullscreen .replybox-sheet .rich-editor,
.replybox.is-reply-fullscreen .replybox-sheet .rich-editor--reply .rich-editor__body,
.replybox.is-reply-fullscreen .replybox-sheet .rich-editor--reply .tiptap-surface,
.replybox.is-reply-fullscreen .replybox-sheet .rich-editor--reply .rich-editor__insert-bar {
  border-radius: var(--radius-card);
}
.replybox.is-reply-fullscreen .replybox-sheet .rich-editor--reply .rich-editor__body,
.replybox.is-reply-fullscreen .replybox-sheet .rich-editor--reply .tiptap-surface {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}
.replybox.is-reply-fullscreen .replybox-sheet .rich-editor--reply .rich-editor__insert-bar {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}
.replybox.is-reply-fullscreen .replybox-sheet > .rich-editor,
.rich-editor--reply.is-reply-fullscreen {
  grid-area: 1 / 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.replybox.is-reply-fullscreen .rich-editor--reply .rich-editor__body,
.rich-editor--reply.is-reply-fullscreen .rich-editor__body,
.floor-edit.is-reply-fullscreen .rich-editor--reply .rich-editor__body {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.replybox.is-reply-fullscreen .rich-editor--reply .rich-editor__body > div,
.rich-editor--reply.is-reply-fullscreen .rich-editor__body > div,
.floor-edit.is-reply-fullscreen .rich-editor--reply .rich-editor__body > div {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.replybox.is-reply-fullscreen .rich-editor--reply .tiptap-surface,
.rich-editor--reply.is-reply-fullscreen .tiptap-surface,
.floor-edit.is-reply-fullscreen .rich-editor--reply .tiptap-surface {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  padding: 36px 40px 48px;
  cursor: text;
}
.replybox.is-reply-fullscreen .rich-editor--reply .rich-editor__insert-bar,
.floor-nested-editor.is-reply-fullscreen .rich-editor--reply .rich-editor__insert-bar {
  flex: none;
  min-height: var(--reply-fullscreen-footer-min, 52px);
  padding: 10px 148px 10px 8px;
  align-items: center;
  align-content: center;
  box-sizing: border-box;
}
.floor-edit.is-reply-fullscreen .rich-editor--reply .rich-editor__insert-bar {
  flex: none;
  padding-right: 160px;
}
.replybox.is-reply-fullscreen .replybox-publish {
  position: absolute;
  right: 18px;
  bottom: 0;
  height: var(--reply-fullscreen-footer-min, 52px);
  z-index: 20;
  margin: 0;
  grid-area: auto;
  justify-self: auto;
  align-self: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  pointer-events: none;
}
.replybox.is-reply-fullscreen .replybox-publish .ui-btn-magnet {
  pointer-events: auto;
}
.replybox.is-reply-fullscreen .rich-editor--reply .rich-media-host,
.rich-editor--reply.is-reply-fullscreen .rich-media-host {
  max-width: min(100%, 720px);
}

@container replybox (max-width: 520px) {
  .rich-editor--reply .rich-editor__insert-group--insert .ui-btn > span:not(.ui-btn__icon) {
    display: none;
  }
}

@container replybox (max-width: 400px) {
  .rich-editor--reply .rich-editor__insert-group--marks .ui-btn > span:not(.ui-btn__icon),
  .rich-editor--reply .rich-editor__insert-group--history .ui-btn > span:not(.ui-btn__icon) {
    display: none;
  }
  .rich-editor--reply .rich-editor__insert-group--history .rich-editor__fullscreen > span:not(.ui-btn__icon) {
    display: inline;
  }
}
.reply-login-mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent-soft) 70%, transparent),
      color-mix(in srgb, var(--surface-raised) 78%, transparent) 58%,
      color-mix(in srgb, var(--surface-muted) 42%, transparent)
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--line));
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  color: var(--text);
  cursor: pointer;
}
.reply-login-mask:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 46%, var(--line));
}
.reply-login-mask:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
}
.reply-login-mask__spot,
.reply-login-mask__glare {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.reply-login-mask__copy {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 16px;
}
.reply-login-mask__magnet { display: inline-flex; }
.reply-login-mask__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  color: var(--accent-dark);
}
.reply-login-mask__pill svg { flex: none; color: var(--accent); }
.reply-login-mask__label {
  display: inline-flex;
  align-items: baseline;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
}
.reply-login-mask__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* iPad 不画纯 color-mix 渐变和 backdrop-filter，遮罩会透成空白，闪光字也会变成透明。
   只在平板改成实色。桌面和手机仍用原来的模糊遮罩。 */
html[data-tablet] .reply-login-mask {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 248, 230, 0.92);
  box-shadow: inset 0 0 0 1px rgba(232, 185, 35, 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-tablet] .reply-login-mask__spot,
html[data-tablet] .reply-login-mask__glare {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
html[data-tablet] .reply-login-mask__pill {
  border-color: rgba(232, 185, 35, 0.55);
  background: #fff;
  box-shadow: 0 4px 14px rgba(29, 29, 31, 0.08);
}
html[data-tablet] .reply-login-mask .shiny-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-dark);
  animation: none;
}
html[data-tablet] .reply-login-mask.bbs-coming-mask {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
html[data-tablet] .player-gate {
  background: rgba(29, 29, 31, 0.72);
  box-shadow: inset 0 0 0 1px rgba(232, 185, 35, 0.35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.reply-login-mask.bbs-coming-mask,
.reply-login-mask.bbs-coming-mask * {
  cursor: default;
}
.reply-login-mask.bbs-coming-mask {
  position: absolute;
  z-index: 8;
  /* 盖住列表，不要透出标题和封面。accent-soft 带透明，不能拿来铺底。 */
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent) 10%, var(--surface)),
      color-mix(in srgb, var(--surface-raised) 55%, var(--surface)) 55%,
      var(--surface)
    );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bbs-coming-mask .spotlight-card,
.bbs-coming-mask .glare-hover,
.bbs-coming-mask .reply-login-mask__copy,
.bbs-coming-mask .reply-login-mask__pill {
  pointer-events: none;
}
.bbs-coming-mask .reply-login-mask__pill {
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}
.bbs-coming-mask .reply-login-mask__label {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  column-gap: 0;
  row-gap: 0;
  padding-bottom: 18px;
}
.bbs-coming-mask__icon {
  grid-column: 1;
  grid-row: 1;
  margin-right: 8px;
}
.bbs-coming-mask__prefix {
  grid-column: 2;
  grid-row: 1;
  margin-right: -0.06em;
  white-space: nowrap;
}
.bbs-coming-mask__when {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  justify-self: start;
  width: max-content;
  white-space: nowrap;
}
.bbs-coming-mask__date {
  margin-right: -0.06em;
  color: var(--accent-dark);
  -webkit-text-fill-color: var(--accent-dark);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
}
.bbs-coming-mask__suffix {
  grid-column: 4;
  grid-row: 1;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.bbs-coming-mask__later {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  width: max-content;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.bbs-coming-mask__stop {
  display: inline;
  margin: -6px -4px -6px -0.06em;
  padding: 6px 8px 6px 0;
  border: 0;
  background: none;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  font: inherit;
  letter-spacing: 0;
  cursor: default;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.floor-av, .floor-un { border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0; }
.floor-av { color: inherit; font: inherit; }
.floor-av { display: flex; justify-content: center; width: 100%; }
.forum-locked { padding: 28px 18px; text-align: center; color: var(--text-muted); }
.floor-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-muted) 28%, var(--surface-raised));
  color: var(--text-muted);
  font-size: 13px;
}
.floor-locked > svg { flex: none; color: var(--text-muted); }
.floor-locked__copy { min-width: 0; flex: 1; }
.floor-locked__title { margin: 0; font-weight: 700; color: var(--text); line-height: 1.45; }
.floor-locked .ui-btn,
.floor-locked .ui-btn-magnet { flex: none; }

.ghead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 16px;
}

.ghead:last-child {
  margin-bottom: 0;
}

.ghead--split {
  align-items: center;
  flex-wrap: wrap;
}
.ghead--split > .ghead-l {
  flex: 1 1 auto;
  min-width: 0;
}
.ghead-honors {
  display: flex;
  flex: none;
  width: 100%;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
  margin-top: 8px;
}
.ghead-honors .ghead-honor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 22px;
  padding: 1px 5px 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--accent-dark);
  background: #fff8ec;
  background: color-mix(in srgb, var(--accent) 14%, #fff8ec);
  box-shadow: inset 0 0 0 1px #f0c48a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, #f0c48a);
}
.ghead-honors .ghead-honor.is-painted {
  box-shadow: none;
}
.ghead--text.ghead--split {
  align-items: flex-start;
}
.ghead--split .ghead-tags {
  margin-bottom: 0;
}
.ghead--split .ghead-by {
  flex: none;
  justify-content: flex-end;
  max-width: 46%;
}
.ghead--text .ghead-l {
  flex: 1 1 auto;
  min-width: 0;
}
.ghead--text .ghead-t {
  margin-bottom: 0;
}
.ghead--text .ghead-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px 16px;
  margin-left: auto;
  max-width: min(58%, 560px);
  align-self: flex-start;
}
.ghead--text .ghead-tags {
  margin-bottom: 0;
  text-align: left;
}
.ghead--text .ghead-by {
  max-width: none;
}

.ghead-id {
  flex: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.ghead-t {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 26px);
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: .04em;
  line-height: 1.25;
}

.ghead-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.ghead-title-row .ghead-t {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.work-level-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 48px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--text);
}

.work-level-badge--inline,
.ghead-tags .work-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 22px;
  vertical-align: middle;
  min-width: 0;
  padding: 1px 5px 0;
  border: none;
  border-radius: 3px;
  background: #fff8ec;
  background: color-mix(in srgb, var(--accent) 14%, #fff8ec);
  box-shadow: inset 0 0 0 1px #f0c48a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, #f0c48a);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 16px;
  color: var(--accent-dark);
  cursor: default;
}

.ghead-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  letter-spacing: .06em;
}

.ghead-mark svg {
  color: var(--accent-dark);
}

.ghead-unpub {
  display: inline-flex;
  flex: none;
  align-self: center;
  vertical-align: middle;
  overflow: visible;
}

.ghead-unpub__glare.glare-hover {
  display: inline-flex;
  border-radius: var(--radius-pill);
}

.ghead-unpub .ui-status-badge {
  pointer-events: none;
}

.ghead-unpub .shiny-text {
  color: var(--warning);
  background-image: linear-gradient(
    105deg,
    var(--warning) 0%,
    var(--warning) 36%,
    color-mix(in srgb, var(--warning) 62%, #fff) 48%,
    var(--warning) 60%,
    var(--warning) 100%
  );
}

.chat-post__title .ghead-unpub {
  margin-left: 8px;
}

.ghead-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 22px;
  gap: 3px;
}
.ghead-tags__text {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 22px;
  padding: 2px 0 0;
  line-height: 16px;
}
.ghead-tags .ghead-honor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 22px;
  vertical-align: middle;
  padding: 2px 5px 0;
  border-radius: 3px;
  font-weight: 600;
  line-height: 16px;
  color: var(--accent-dark);
  background: #fff8ec;
  background: color-mix(in srgb, var(--accent) 14%, #fff8ec);
  box-shadow: inset 0 0 0 1px #f0c48a;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, #f0c48a);
}
.ghead-tags .ghead-honor.is-painted {
  box-shadow: none;
}
.ghead-honor__text {
  display: block;
  line-height: 16px;
}

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

.ghead-by .buy-social {
  margin-top: 0;
  width: max-content;
}

.ghead-by .buy-social__magnet {
  flex: none;
  width: max-content;
}

.ghead-by .buy-social__btn {
  width: max-content;
}

.ghead-av {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.ghead-name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.ghead-name:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ghead-role {
  font-size: 12px;
  color: var(--text-muted);
}

.gtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.oss-head__tagline {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}

.oss-head__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.oss-head__by {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.oss-head__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.oss-head__role {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.oss-head__name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
}

.oss-head__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oss-head__ver {
  margin: 2px 0 0;
}
.oss-head__author-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 2px 0 0;
}
.oss-head__honor {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.oss-head__honor svg {
  color: var(--accent-dark);
}

.oss-head__stats {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-left: auto;
}

.oss-head__stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5em;
  text-align: center;
}

.oss-head__stat-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.oss-head__stat-n {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.tpl-rec-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--surface-raised);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
}

.tpl-intro-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-control);
  margin: 0 0 18px;
}

.tpl-intro-ver {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-on-accent);
  background: color-mix(in srgb, var(--text) 44%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.5;
}

.tpl-free {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 14px 16px 16px;
  margin-top: 12px;
}

.tpl-free__h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

.tpl-free__h svg {
  color: var(--accent-dark);
  flex: none;
}

.tpl-free__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.tpl-free__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.tpl-free__item svg {
  color: var(--text-muted);
  flex: none;
}

.tpl-free__lock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.tpl-free__lock svg {
  flex: none;
}

.tab-n {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: 3px;
  font-weight: 500;
}

.oss-pack {
  line-height: 1.9;
}

.oss-ver-table tbody tr {
  cursor: default;
}

.oss-ver-tag {
  margin-top: 4px;
}

.ghead-by .forum-btn {
  margin-left: 4px;
}

.rec-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  flex: none;
}

.rec-sum-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 18px;
}

.rec-sum-top b {
  font-weight: 700;
}

.rec-sum-x {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
  font-weight: 400;
}

.rec-kpis {
  display: flex;
  gap: 18px;
  margin-top: 10px;
}

.rec-kpis div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.rec-kpis b {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.rec-kpis span {
  font-size: 11px;
  color: var(--text-muted);
}

.rec-kpis .api-gap,
.ghead-by .api-gap,
.ghead-tags .api-gap,
.rec-sum-top .api-gap,
.rec-sum-x .api-gap {
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .ghead:not(.ghead--text) {
    flex-direction: column;
    gap: 16px;
  }

  .ghead--text {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .ghead--text .ghead-side {
    max-width: 100%;
  }

  .rec-sum {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .rec-kpis div {
    align-items: flex-start;
  }
}

.panel-h--tools {
  gap: 10px;
}

.panel-h--tools .tool2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}

.panel-h--tools .tool2:disabled {
  opacity: 0.55;
  cursor: default;
}

.forum-purchase-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.forum-purchase-locked svg {
  color: var(--text-muted);
  flex: none;
}

.forum-purchase-locked strong {
  display: block;
  margin-bottom: 2px;
}

.article {
  font-size: 15.5px;
  line-height: 1.9;
  min-width: 0;
}

.article img,
.article video,
.article iframe,
.article .ph-img,
.article .ui-video-player,
.article figure {
  max-width: 100%;
  box-sizing: border-box;
}

.article-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 0 18px;
  float: none;
  clear: both;
}

.article-figure__media,
.article-figure > img,
.article-figure > video,
.article-figure > iframe,
.article-figure > .ph-img,
.article-figure > .ui-video-player,
.article-figure .ui-video-player {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.article-figure > .ph-img {
  display: flex;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 8;
}

.article-figure > .ui-video-player,
.article-figure .ui-video-player {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.article .media-wall {
  display: block;
  width: 100%;
  max-width: 100%;
}

.article p {
  margin: 0 0 4px;
  line-height: 1.5;
}

/* 正文里的换行是新段落。段距和行高都收紧，避免一段一行看起来像空了一行。比 .article p 更具体，否则会被盖掉。 */
.article .tiptap-surface {
  line-height: 1.65;
}
.article .tiptap-surface p {
  margin: 0 0 7px;
  line-height: 1.75;
}

.article h3 {
  position: relative;
  padding-left: 12px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 12px;
  letter-spacing: .04em;
}

.article h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1em;
  background: var(--accent);
  border-radius: var(--radius-sm);
  transform: translateY(-50%);
}

.article-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 28px 0 12px;
}
.article-subhead > h3 {
  margin: 0;
}

.article .tiptap-surface h1,
.article .tiptap-surface h2,
.article .tiptap-surface h3,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h1,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h2,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h3 {
  position: relative;
  padding-left: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
}

.article .tiptap-surface h1::before,
.article .tiptap-surface h2::before,
.article .tiptap-surface h3::before,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h1::before,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h2::before,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h3::before {
  content: '';
  position: absolute;
  left: 0;
  width: 3px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  transform: none;
}

.article .tiptap-surface h1,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 28px 0 10px;
}

.article .tiptap-surface h1::before,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h1::before {
  height: 24px;
  top: calc((1.25em - 24px) / 2);
}

.article .tiptap-surface h2,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 25px 0 9px;
}

.article .tiptap-surface h2::before,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h2::before {
  height: 20px;
  top: calc((1.3em - 20px) / 2);
}

.article .tiptap-surface h3,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h3 {
  font-size: 19px;
  line-height: 1.35;
  margin: 21px 0 7px;
}

.article .tiptap-surface h3::before,
.rich-editor:not(.rich-editor--reply) .tiptap-surface h3::before {
  height: 17px;
  top: calc((1.35em - 17px) / 2);
}

.game-post-body__content {
  min-width: 0;
}

.mod-quote {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #e8b923;
  border-radius: var(--radius-card);
  background: #fffaf0;
  background: linear-gradient(180deg, #fff8e4 0%, var(--surface-raised) 78%);
  box-shadow: 0 8px 20px rgba(138, 103, 0, 0.08);
  cursor: default;
}

.col-side > .mod-quote {
  align-self: stretch;
}

.mod-quote__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid #f0d78a;
  border-bottom: 1px solid color-mix(in srgb, #e8b923 38%, transparent);
}

.mod-quote .ui-badge.mod-quote__title {
  flex: none;
  padding: 3px 8px;
  border-color: #e8b923;
  background: #f8e7a8;
  background: color-mix(in srgb, #e8b923 28%, #fff);
  color: #8a6700;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.mod-quote__who {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.mod-quote__who > .ui-avatar {
  flex: none;
}

.mod-quote__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mod-quote__name {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.mod-quote__name {
  cursor: pointer;
}

button.mod-quote__name:hover {
  color: #8a6700;
}

.mod-quote__role {
  font-size: 12px;
  line-height: 1.3;
  color: #8a6700;
}

.mod-quote__text {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  /* 全角问号默认不能在它前面断开，会和前面的字粘成一块。这块比行宽还长时，前一个字会被单独留在上一行。loose 仍不断在问号前；anywhere 旧 Safari 不认，会退回上一行。 */
  line-break: loose;
  line-break: anywhere;
  line-height: 1.7;
  font-size: 13px;
  color: var(--text);
}

.game-post-body p.is-reviewed-version,
tr.is-reviewed-version > td {
  background: var(--surface-raised);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
}

.game-post-body p.is-reviewed-version {
  margin-left: -10px;
  margin-right: -10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-raised);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
}

.post-body > .panel-b.article {
  padding: 28px 48px 24px;
  min-height: 160px;
}
.panel-b.has-panel-report {
  position: relative;
  padding-bottom: 56px;
}
.panel-b.has-panel-report > .panel-report {
  position: absolute;
  top: auto;
  right: 16px;
  bottom: 12px;
  left: auto;
  z-index: 2;
  padding: 0;
}
.post-body > .panel-b.article.has-panel-report {
  padding-bottom: 56px;
}
.forum-mobile .post-body > .panel-b.article {
  padding: 20px 28px 16px;
  min-height: 120px;
}
.forum-mobile .panel-b.has-panel-report,
.forum-mobile .post-body > .panel-b.article.has-panel-report {
  padding-bottom: 52px;
}

.article-figure__cover {
  border-radius: var(--radius-md);
}

.article figcaption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 7px;
}

.ph-img {
  aspect-ratio: 16 / 8;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--surface-muted);
}

.chat-post__tag { margin-bottom: 10px; }
.chat-post__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 14px;
}
.chat-post__title .mark-digest,
.chat-post__title .mark-pin,
.chat-post__title .mark-lock,
.chat-post__title .mark-status {
  display: inline-flex;
  vertical-align: 3px;
  margin-right: 8px;
}
.chat-post__meta { gap: 12px; }
.chat-post__body { border-top: 1px solid var(--line); }
.chat-post__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.chat-post .panel-b.article {
  position: relative;
}
.chat-post .panel-b.article > .chat-post__actions--article {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
}
.chat-post .panel-b.article > .ghead > .ghead-l {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.chat-post .panel-b.article > .ghead .chat-post__title {
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
  text-overflow: clip;
  padding-right: 0;
}
/* 收藏、有帮助、分享贴在标签行右侧。标题从下一行起拉满宽度。 */
.chat-post .panel-b.article:not(.chat-post__body) > .ghead .chat-post__tag {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 32px;
  padding-right: 272px;
}
.chat-post .panel-b.article.chat-post--untagged {
  padding-top: 56px;
}
.chat-post .panel-b.article.chat-post__body > .chat-post__actions--article {
  position: static;
  float: none;
  width: 100%;
  justify-content: flex-end;
  margin: 0 0 14px;
}

.floor-b .refcard,
.article .refcard,
.tiptap-surface .refcard {
  line-height: 1.35;
}
.refcard {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  margin: 8px 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  line-height: 1.35;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised));
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-decoration: none;
  flex-wrap: nowrap;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
}
.refcard:hover,
.refcard:focus-visible,
.rich-entity-card-host.ProseMirror-selectednode .refcard {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised)));
  outline: none;
  box-shadow: none;
}
.refcard.refcard--expired {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  flex: none;
  align-self: flex-start;
  gap: 0;
  margin: 4px 0;
  padding: 1px 8px;
  cursor: default;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.refcard.refcard--expired:hover,
.refcard.refcard--expired:focus-visible,
.rich-entity-card-host.ProseMirror-selectednode .refcard.refcard--expired {
  border-color: var(--line);
  background: transparent;
  cursor: default;
  outline: none;
  box-shadow: none;
}
.refcard__cover,
.article .refcard .cover {
  width: 128px;
  height: auto;
  max-width: 128px;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised));
}
@container refhost (max-width: 280px) {
  .refcard__cover,
  .article .refcard .cover {
    width: 64px;
    max-width: 64px;
  }
}
.refcard__cover .forum-cover,
.refcard__cover img,
.article .refcard .cover .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
  background-color: color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised));
}
.refcard .grow {
  min-width: 0;
  flex: 1 1 140px;
  overflow: hidden;
}
.refcard-t {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: .03em;
  line-height: 1.35;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.refcard-m {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.refcard-b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1.35;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.refcard__go {
  flex: none;
  align-self: center;
  color: var(--text-muted);
}

@container floorc (max-width: 420px) {
  .refcard {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .refcard .grow {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .refcard__cover,
  .article .refcard .cover {
    width: 72px;
    max-width: 72px;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@container floorboard (max-width: 640px) {
  .floor {
    grid-template-columns: 148px minmax(0, 1fr);
  }
}

.op-author.panel {
  overflow: hidden;
}
.op-card.floor-u {
  border-right: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding: 16px 16px 16px;
}
.op-card .floor-title,
.op-card > .ui-forum-role {
  margin-bottom: 10px;
  align-self: center;
  justify-content: center;
  margin-inline: auto;
}
.op-card .floor-stats {
  gap: 2px;
}
.op-card .floor-stats div {
  font-size: 12px;
  line-height: 1.7;
}
.ubadges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.ubadge {
  width: 40px;
  height: 46px;
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1, 0 1px 3px color-mix(in srgb, var(--text) 12%, transparent));
}
.ubadge b {
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .02em;
}
.ubadge small {
  font-size: 9px;
  opacity: .9;
  letter-spacing: .06em;
}
.ubadge-gold {
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 28%, var(--surface-raised)) 0%, var(--accent) 48%, var(--accent-dark) 100%);
  color: var(--accent-ink);
  border-color: var(--accent-dark);
}
.ubadge-amber {
  background: linear-gradient(165deg, color-mix(in srgb, var(--warning, var(--accent)) 35%, var(--surface-raised)) 0%, var(--warning, var(--accent)) 52%, var(--accent-dark) 100%);
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent-dark) 70%, var(--warning, var(--accent)));
}
.op-card__follow {
  display: block;
  width: 100%;
  margin-top: 14px;
}
.op-card__follow .buy-follow-magnet,
.op-card__follow .buy-follow-glare {
  display: block;
  width: 100%;
}
.op-card .buy-follow-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0;
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: var(--radius-pill);
}

.article-quote {
  border-left: 3px solid var(--line);
  padding: 3px 0 3px 14px;
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0 0 18px;
}

.cover-lbl {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  font-size: 11px;
  color: var(--text-on-accent);
  background: color-mix(in srgb, var(--text) 44%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.5;
}
.cover-play {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cover-play span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 50%, transparent);
  color: var(--text-on-accent);
  display: grid;
  place-items: center;
}
.cover .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.panel-b.article > .media,
.panel-b.article > .media--pager {
  margin-bottom: 16px;
}

.media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  width: 100%;
  height: auto;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}
.media--cover,
.media--cover + .media-run {
  grid-template-columns: minmax(0, 1fr);
}
.slide-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.slide-pane {
  height: 100%;
}
.slide-pane.is-leave,
.slide-stage.is-next > .slide-pane.is-enter,
.slide-stage.is-prev > .slide-pane.is-enter {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
}
.slide-pane.is-leave { pointer-events: none; }
.slide-stage.is-next > .slide-pane.is-enter { transform: translateX(100%); }
.slide-stage.is-prev > .slide-pane.is-enter { transform: translateX(-100%); }
.slide-stage.is-go > .slide-pane { transition: transform 0.45s ease; }
.slide-stage.is-next.is-go > .slide-pane.is-enter,
.slide-stage.is-prev.is-go > .slide-pane.is-enter { transform: translateX(0); }
.slide-stage.is-next.is-go > .slide-pane.is-leave { transform: translateX(-100%); }
.slide-stage.is-prev.is-go > .slide-pane.is-leave { transform: translateX(100%); }
.slide-stage .media-main { height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .slide-stage.is-go > .slide-pane { transition: none; }
  .slide-stage > .slide-pane { transform: none; }
}

.media-main {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  border-radius: 0;
}
.media-main .cover,
.media-main .forum-cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.media-main--player,
.media-main--cover {
  cursor: default;
}
.media-main--player .ui-video-player {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}
.media-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 0;
  min-height: 100%;
  overflow-y: auto;
}
.media-thumbs button {
  flex: none;
  width: 100%;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.media-thumbs button.is-on {
  border-color: var(--accent);
}
.media-thumbs .cover,
.media-thumbs .media-thumb-cover {
  border-radius: 0;
}
.media-thumbs .cover-lbl {
  display: none;
}
.media-thumbs .cover-play span {
  width: 28px;
  height: 28px;
}
.media-thumbs .cover-play span svg {
  width: 14px;
  height: 14px;
}

.media--pager {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 4px;
}
.media-pager {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-control);
}
.media-pager::-webkit-scrollbar { display: none; }
.media-pager__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
.media-pager__slide .cover,
.media-pager__slide .forum-cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.media-pager__slide.media-main--player {
  cursor: default;
}
.media-pager__slide .ui-video-player {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}
.media-pager__dots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}
.media-pager__dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-raised) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent);
  cursor: pointer;
}
.media-pager__dots button.is-on {
  width: 7px;
  height: 7px;
  background: var(--surface-raised);
}
.forum-mobile .media-run {
  grid-template-columns: minmax(0, 1fr);
}
.forum-mobile .media-run .ui-btn-magnet--full {
  width: 100%;
}
.forum-mobile .media-run .buy-action-row,
.media-run .buy-action-row {
  justify-self: center;
  width: min(100%, calc(var(--post-side, 320px) - 38px));
}
.forum-mobile .media-run .buy-action-row {
  width: 100%;
}
.media-run .buy-action-row > .ui-btn-magnet--full,
.forum-mobile .media-run .buy-action-row > .ui-btn-magnet--full {
  width: auto;
  justify-self: stretch;
}

.catalog-buy-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  margin-top: 14px;
}
.catalog-buy-row > .media-run {
  grid-column: 2;
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
}
.catalog-buy-row > .panel-report {
  grid-column: 3;
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  justify-self: end;
  padding: 0;
}

.media-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  margin-top: 14px;
}
.media-run .ui-btn-magnet--full {
  display: block;
  justify-self: center;
  /* 与右侧购买栏按钮同宽：侧栏宽减去卡片边框和 .buy-b 左右内边距。 */
  width: min(100%, calc(var(--post-side, 320px) - 38px));
}
/* 复制成功后 MagnetTip 会套上 .ui-float-tip。外壳继续占原来的格子，按钮才不会跳到左边。 */
.media-run > .ui-float-tip {
  justify-self: center;
  width: min(100%, calc(var(--post-side, 320px) - 38px));
}
.media-run > .ui-float-tip > .ui-btn-magnet--full {
  width: 100%;
}
.forum-mobile .media-run > .ui-float-tip {
  justify-self: stretch;
  width: 100%;
}

.media-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.media-wall figcaption { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.media-wall__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.buy-cover-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.text-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
}
.text-link:hover { text-decoration: underline; }
.text-link.tpl-tut__author,
.text-link.tpl-works__author {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  text-align: left;
}
.sample-grid-wrap { display: grid; gap: 14px; }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.tpl-tut {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.tpl-tut__head,
.tpl-tut__row.glare-hover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 11rem) 4.75rem;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.tpl-tut__head {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
}
.tpl-tut__head-action { display: block; }
.tpl-tut__body > :last-child .tpl-tut__row { border-bottom: 0; }
.tpl-tut__row.glare-hover {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease;
}
.tpl-tut__row.glare-hover:hover { background: var(--accent-soft); }
.tpl-tut__post { min-width: 0; }
.tpl-tut__title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.tpl-tut__meta {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tpl-tut__author {
  justify-self: stretch;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  text-align: left;
  font-size: 13.5px;
  color: var(--text);
}
.tpl-tut__action {
  justify-self: end;
}
.tpl-tut__action .ui-btn-magnet { display: inline-flex; }
.sample-grid-wrap .sample-grid {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: stretch;
}
.sample-card.ui-card { padding: 0; overflow: hidden; }
.sample-card.ui-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 16%, transparent);
}
.sample-card .ui-card__body { padding: 0; display: flex; flex-direction: column; }
.sample-card .ui-poster-card__cover { border-radius: 0; }
.sample-card .ui-poster-card__cover .cover,
.sample-card .ui-poster-card__cover .forum-cover { height: 100%; }
.sample-card .ui-poster-card__title { margin-bottom: 6px; }
.sample-card__body { padding: 14px 16px 16px; }
.sample-card__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.sample-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.uprof { display: flex; gap: 24px; align-items: flex-start; }
.uprof .ui-avatar { width: 96px; height: 96px; font-size: 32px; border-radius: var(--radius-control); flex: none; }
.uprof-st { display: flex; gap: 24px; flex-wrap: wrap; margin: 12px 0 0; }
.uprof-st div, .uprof-st button { margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.uprof-st dt { font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.uprof-st dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.uprof-sec > .panel-b {
  box-sizing: border-box;
  /* 与作品区缺省内容区同高：空态 168px，加上 .panel-b 上下 18px 内边距后正文区为 204px。 */
  min-height: 204px;
  display: flex;
  flex-direction: column;
}
.uprof-sec > .panel-b > .ui-empty,
.uprof-sec > .panel-b > .ui-content-loading {
  flex: none;
  box-sizing: border-box;
  height: 168px;
  min-height: 168px;
}
.uprof-sec > .panel-b > .ui-empty {
  padding: 16px 12px;
  background: transparent;
}
.uprof-sec > .panel-b > .ui-empty .ui-empty__art {
  width: 88px;
  height: 88px;
  margin-bottom: 8px;
}
.uprof-sec > .panel-b:has(> .ui-empty),
.uprof-sec > .panel-b:has(> .ui-content-loading) {
  height: 204px;
  min-height: 204px;
}
.uprof-works {
  align-items: stretch;
}
.uprof-works.sample-grid {
  gap: 12px;
}
.uprof-works .ui-media-card--related {
  align-items: stretch;
  height: 100%;
  padding: 4px 8px;
}
.uprof-works .ui-media-card--related .ui-media-card__cover {
  width: 84px;
  height: 64px;
  border-radius: 6px;
}
.uprof-works .ui-media-card--related .ui-media-card__cover .forum-cover,
.uprof-works .ui-media-card--related .ui-media-card__cover img {
  border-radius: 6px;
}
.uprof-works .ui-media-card__overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.uprof-works .ui-media-card__kicker {
  display: block;
  line-height: 1.4;
  min-height: 1.4em;
  max-height: 1.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uprof-works .ui-media-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  max-height: calc(1.35em * 2);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

.live-profile {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.live-profile .ui-field {
  gap: 8px;
}

.live-profile .ui-field__label-row,
.live-profile .ui-field__label {
  justify-content: flex-start;
  text-align: left;
}

.live-profile__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.live-profile__hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: left;
}

.live-profile__avatar {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  border-radius: var(--radius-control, 12px);
}

.live-profile__avatar:disabled {
  cursor: wait;
}

.live-profile__avatar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.live-profile__avatar .ui-avatar {
  width: 72px;
  height: 72px;
  font-size: 28px;
}

.live-profile__avatar-mask {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--text) 52%, transparent);
  color: var(--surface-raised);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.live-profile__avatar:hover .live-profile__avatar-mask,
.live-profile__avatar:focus-visible .live-profile__avatar-mask,
.live-profile__avatar.is-busy .live-profile__avatar-mask {
  opacity: 1;
}

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

.live-profile__role {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  line-height: normal;
  cursor: pointer;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* 覆盖 Tag 两种 variant 的 padding / 字号，保证高度一致、文字水平垂直居中。 */
.live-profile__role .ui-tag,
.live-profile__role .ui-tag--solid,
.live-profile__role .ui-tag--wash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: auto;
  min-height: 32px;
  gap: 6px;
  padding: 2px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.live-profile__role:disabled {
  cursor: wait;
}

.live-profile__role:focus-visible .ui-tag {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.live-profile .ui-textarea {
  min-height: 120px;
  resize: vertical;
}

.profile-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.profile-cols > .live-profile {
  min-width: 0;
}

.live-profile__card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.me-home {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.me-home__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.me-home__aside .ui-avatar {
  width: 128px;
  height: 128px;
}
.me-home__name {
  margin: 8px 0 0;
  font-weight: 600;
}
.me-home__role {
  margin: 0;
  font-size: 12px;
}
.me-home__role .ui-forum-role {
  font-size: inherit;
}
.me-home__role .ui-forum-role__text {
  font-size: 12px;
}
.me-home__counts {
  list-style: none;
  width: 100%;
  margin: 20px 0 0;
  padding: 0 24px;
  box-sizing: border-box;
}
.me-home__counts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}
.me-home__count-l {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
}
.me-home__count-n {
  flex: none;
  min-width: 2.5em;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}
.me-home__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* 右上：一行三项（论坛积分 / 获得表态 / 帖子浏览） */
.me-home__kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  overflow: hidden;
}
.me-home__kpi-strip-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 16px 18px;
  min-height: 72px;
  box-sizing: border-box;
}
.me-home__kpi-strip-divider {
  position: absolute;
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 1px;
  background: var(--line);
}
.me-home__metric-l {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.me-home__metric-n {
  margin-top: 8px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
  color: var(--text);
}
.me-home__metric-n--strip {
  font-size: 22px;
}
/* 个性签名 */
.me-home__block {
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.me-home__sig-head {
  padding: 14px 20px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.me-home__sig-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 20px 18px;
  min-height: 160px;
  box-sizing: border-box;
}
.me-home__edit.ui-btn {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent-dark);
}
.me-home__edit.ui-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.me-home__sig-body,
.me-home__sig-empty {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.me-home__sig-body .tiptap-surface.readonly.floor-rich {
  max-width: 100%;
  padding: 0;
  background: transparent;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.me-home__sig-body p {
  margin: 0;
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.me-home__sig-foot {
  display: flex;
  justify-content: flex-end;
}
.forum-mobile .me-home {
  grid-template-columns: 1fr;
}
.forum-mobile .me-home__kpi-strip {
  grid-template-columns: 1fr;
}
.forum-mobile .me-home__kpi-strip-cell + .me-home__kpi-strip-cell {
  border-top: 1px solid var(--line);
}
.forum-mobile .me-home__kpi-strip-divider {
  display: none;
}
.forum-mobile .me-home__counts {
  padding: 0 20px;
}
.forum-mobile .me-home__metric-n--strip {
  font-size: 20px;
}

.uprof-sig { margin: 14px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.75; overflow: visible; }
.uprof-sig p { margin: 0; }
.uprof-sig p + p { margin-top: .35em; }
.uprof-sig .tiptap-surface.readonly.floor-rich {
  min-height: 88px;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.season { max-width: 980px; margin: 0 auto; padding: 12px 0 60px; width: 100%; }
.season-hero { padding: 24px 0 8px; }
.season-hero .ui-type--kicker { margin: 0; }
.season-hero .ui-type--display-l { margin: 8px 0 12px; }
.season-lead { font-size: 17px; line-height: 1.7; color: var(--text-muted); max-width: 36em; margin: 0; }
.season-period { margin: 12px 0 20px; font-size: 13px; letter-spacing: .08em; color: var(--text-muted); }
.season-nav.ui-tabs-line {
  margin: 20px 0 28px;
  padding: 0;
  min-height: 0;
  background: transparent;
}
.season-nav .ui-tabs-line__item {
  padding: 10px 0;
  font-weight: 500;
}
.season-nav .ui-tabs-line__item:hover { color: var(--accent-dark); }
.season-nav .ui-tabs-line__item.is-active {
  color: var(--text);
  font-weight: 700;
}
.season-panel-stage { position: relative; }
.season-panel { min-width: 0; }
.season-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.season-line > li { min-width: 0; }
.season-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}
.season-node-l {
  font-size: var(--type-caption);
  font-weight: 700;
  color: var(--accent);
}
.season-node-x {
  font-size: var(--type-body-s);
  font-weight: 600;
  color: var(--text);
}
.season-dot-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--space-4);
}
.season-dot-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
.season-line > li:first-child .season-dot-wrap::before { left: 50%; }
.season-line > li:last-child .season-dot-wrap::before { right: 50%; }
.season-dot {
  position: relative;
  z-index: 1;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.season-line > li.is-now .season-dot {
  width: var(--space-3);
  height: var(--space-3);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent);
}
.season-line > li.is-now .season-dot::after {
  content: '';
  position: absolute;
  inset: var(--space-1);
  border-radius: inherit;
  background: var(--accent);
}
.season-branch {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-left: var(--space-1) solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--accent-soft);
}
.season-branch .ui-type { margin: 0; }
.season-branch .season-lab { margin-bottom: var(--space-2); }
.season-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-dark);
  color: var(--surface-raised);
}
.season-cta p {
  margin: 0;
  flex: 1 1 20em;
  font-size: var(--type-body-s);
  line-height: var(--type-leading-body);
  color: inherit;
}
.season-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.season-cta .ui-btn--outline,
.season-cta .ui-btn--outline:disabled {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}
.season-lab { margin: 0 0 var(--space-3); }
.season-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-8); margin: var(--space-8) 0; }
.season-req {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: season-how;
}
.season-req > li {
  counter-increment: season-how;
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--type-body-s);
  line-height: var(--type-leading-body);
}
.season-req > li:last-child { border-bottom: 0; }
.season-req > li::before {
  content: counter(season-how);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.2;
}
.season-need {
  margin: 0;
  padding: 0;
  list-style: none;
}
.season-need > li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  color: var(--text);
  font-size: var(--type-body-s);
  line-height: var(--type-leading-body);
}
.season-need > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--space-2) + 0.45em);
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.season-rules-link.ui-btn {
  margin-top: var(--space-4);
  padding-inline: 0;
  color: var(--accent);
  justify-content: flex-start;
  font-weight: 700;
}
.season-rules-link.ui-btn:hover:not(:disabled) {
  color: var(--accent-dark);
  background: transparent;
}
.season-award-wrap {
  margin: var(--space-4) 0 var(--space-3);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: var(--radius-control);
  background: var(--surface-raised);
}
.season-award {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
  background: var(--surface-raised);
  color: var(--text);
}
.season-award col:nth-child(2) { width: 18%; }
.season-award col:nth-child(3) { width: 22%; }
.season-award col:nth-child(4) { width: 22%; }
.season-award th,
.season-award td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.season-award th {
  font-size: var(--type-caption);
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised));
}
.season-award td {
  font-size: var(--type-body-s);
  font-weight: 500;
  color: var(--text);
  line-height: var(--type-leading-body);
}
.season-award td:first-child,
.season-award td:first-child b {
  font-size: var(--type-title-sm);
  font-weight: 700;
  color: var(--text);
}
.season-award th:nth-child(n + 2),
.season-award td:nth-child(n + 2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.season-award tbody tr.is-gold {
  background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 8%, var(--surface-raised)));
}
.season-award tbody tr:last-child th,
.season-award tbody tr:last-child td {
  border-bottom: 0;
}
.season-award-note {
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: var(--type-leading-tight);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.season-games-block { margin: var(--space-8) 0 0; }
.season-games-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.season-games-head .season-lab { margin: 0; }
.season-games-count { font-size: 13px; color: var(--text-muted); }
.season-games-pager { margin-top: var(--space-5); }
.season-award-foot,
.season-award-caption {
  margin: 0 0 var(--space-5);
  font-size: var(--type-body-s);
  line-height: var(--type-leading-body);
  color: var(--text-muted);
}
.season-article { max-width: 46em; }
.season-article h2 {
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--text);
  margin: var(--space-8) 0 var(--space-3);
}
.season-article h2:first-child { margin-top: 0; }
.rich-image-asset__btn { display: block; width: auto; max-width: 100%; margin-inline: auto; padding: 0; border: 0; background: none; cursor: pointer; }
.ui-tabs-line { flex-wrap: wrap; }
.forum-mobile .mobile-board-nav .ui-tabs-line { flex-wrap: nowrap; }
.quote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.spoiler { margin: 12px 0; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--radius-control); background: var(--surface-muted); }
.spoiler summary { cursor: pointer; font-weight: 700; }

.rank, .owork {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background .18s ease;
}
.rank:hover, .owork:hover { background: var(--surface-muted); }
.rank:hover .rank-t, .owork:hover .owork-t { color: var(--accent-dark); }
.rank-i { width: 22px; font-weight: 700; color: var(--text-muted); }
.rank-i.top { color: var(--accent-dark); }
.rank-t, .owork-t { display: block; font-weight: 600; }
.rank-x { display: block; font-size: 12px; color: var(--text-muted); }
.owork-cover { width: 72px; height: 44px; flex: none; aspect-ratio: auto; border-radius: var(--radius-control); }

.event-promo {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.event-promo:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); box-shadow: var(--shadow); }
.event-promo .cover {
  overflow: hidden;
}
.event-promo .forum-cover {
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.event-promo img.forum-cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto;
}
.event-promo .forum-cover.cover--empty {
  background-size: 200%;
  background-position: center;
  background-repeat: no-repeat;
}
.event-promo:hover .forum-cover:not(.cover--empty):not(.cover--reviewing) { transform: scale(1.03); }
.event-promo-b { display: block; padding: 12px 14px 14px; }
.event-promo--art {
  line-height: 0;
}
.event-promo--art .cover {
  border-radius: 0;
}
.event-promo-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent); margin-bottom: 4px; }
.event-promo-t { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.event-promo-x { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }

.recruit {
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--accent-soft);
}
.recruit-t { font-weight: 700; margin-bottom: 6px; }
.recruit-x { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.65; }
.recruit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.back {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s ease;
}
.back:hover {
  color: var(--accent-dark);
}

.forum-mobile .panel.floor-board,
.forum-mobile .floor-list {
  gap: 12px;
}
.forum-mobile .floor-board > .replybox {
  padding: 12px;
}
.forum-mobile .replybox.is-own,
.forum-mobile .floor-board > .replybox.is-own {
  grid-template-columns: 1fr;
  padding: 0;
}
.forum-mobile .replybox.is-own > .floor-c {
  padding: 12px;
}
.forum-mobile .floor { grid-template-columns: 1fr; }
.forum-mobile .floor .floor-u,
.forum-mobile .replybox.is-own .floor-u,
.forum-mobile .op-author .op-card.floor-u {
  border-right: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  text-align: left;
  padding: 12px 14px 14px;
}
.forum-mobile .floor .floor-u,
.forum-mobile .replybox.is-own .floor-u { border-bottom: 1px solid var(--line); }
.forum-mobile .floor .floor-av,
.forum-mobile .replybox.is-own .floor-av,
.forum-mobile .op-author .floor-av {
  flex: none;
  margin: 0;
  width: auto;
  justify-content: flex-start;
}
.forum-mobile .floor .floor-u .ui-avatar.ui-avatar--lg,
.forum-mobile .replybox.is-own .floor-u .ui-avatar.ui-avatar--lg,
.forum-mobile .op-author .ui-avatar.ui-avatar--lg {
  width: 28px;
  height: 28px;
  margin: 0;
  font-size: 12px;
}
.forum-mobile .floor .floor-un,
.forum-mobile .replybox.is-own .floor-un,
.forum-mobile .op-author .floor-un {
  flex: 0 1 auto;
  width: auto;
  margin: 0;
  text-align: left;
}
.forum-mobile .floor .floor-title,
.forum-mobile .floor .floor-u > .ui-forum-role,
.forum-mobile .replybox.is-own .floor-u > .ui-forum-role,
.forum-mobile .op-author .floor-title,
.forum-mobile .op-author .op-card > .ui-forum-role {
  flex: 0 1 auto;
  margin: 0;
  margin-inline: 0;
  text-align: left;
  align-self: center;
  justify-content: flex-start;
}
.forum-mobile .floor .floor-stats,
.forum-mobile .replybox.is-own .floor-stats,
.forum-mobile .op-author .floor-stats {
  flex: 1 0 100%;
  align-self: stretch;
  width: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin: 0;
}
.forum-mobile .floor .floor-stats div,
.forum-mobile .op-author .floor-stats div {
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: auto;
}
.forum-mobile .floor .floor-played {
  flex: 1 0 100%;
  margin: 0;
}
.forum-mobile .op-author .ubadges,
.forum-mobile .op-author .op-card__follow {
  flex: 1 0 100%;
  margin-top: 4px;
}
.forum-mobile .op-author .ubadges { justify-content: flex-start; }
.forum-mobile .floor-subs {
  margin: 4px 12px 12px;
  gap: 0;
}
.forum-mobile .floor-sub-wrap {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.forum-mobile .floor-subs > .floor-sub-wrap:first-child,
.forum-mobile .floor-subs > .floor-sub-anim:first-child .floor-sub-wrap {
  border-top: 0;
  padding-top: 2px;
}
.forum-mobile .floor-sub__lead {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 4px;
  align-items: start;
  margin-left: 0;
}
.forum-mobile .floor-sub.is-threaded {
  margin-left: 0;
}
.forum-mobile .floor-sub .ui-avatar.ui-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
  margin-top: 1px;
  grid-column: 1;
  grid-row: 1;
}
.forum-mobile .floor-sub__main {
  display: contents;
}
.forum-mobile .floor-sub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.forum-mobile .floor-sub__text,
.forum-mobile .floor-sub__text .floor-rich-inline {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.forum-mobile .floor-sub__text {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 100%;
}
.forum-mobile .floor-sub__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  grid-column: 1 / -1;
  min-width: 0;
}
.forum-mobile .floor-sub__name,
.forum-mobile .floor-sub__author,
.forum-mobile .floor-sub__reply-label {
  margin-right: 0;
}
.forum-mobile .floor-sub__name {
  color: var(--accent-dark);
  font-weight: 400;
}
.forum-mobile .floor-sub__name--to {
  color: var(--accent-dark);
  font-weight: 400;
}
.forum-mobile .floor-sub__reply-label,
.forum-mobile .floor-sub__author {
  color: var(--text-muted);
  font-weight: 400;
}
.forum-mobile .floor-sub__time,
.forum-mobile .floor-sub__meta .floor-react__edited {
  margin-left: 0;
}
.forum-mobile .floor-sub__actions {
  margin-left: auto;
  gap: 4px;
}
.forum-mobile .floor-sub:not(:hover):not(:focus-within) .floor-sub__actions .floor-actions__report.ui-icon-btn,
.forum-mobile .floor-sub:not(:hover):not(:focus-within) .floor-sub__actions .floor-actions__delete.ui-icon-btn {
  min-width: 32px;
  min-height: 32px;
  opacity: 1;
  pointer-events: auto;
}
.forum-mobile .floor-subs__more-magnet {
  display: flex;
  width: 100%;
  border-top: 1px solid var(--line);
}
.forum-mobile .floor-subs__more {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  font-size: 13px;
}
.forum-mobile .floor-sub-wrap .floor-nested-editor,
.forum-mobile .floor-sub-wrap.is-threaded .floor-nested-editor,
.forum-mobile .floor-nested-editor.is-threaded {
  margin-left: 0;
}
.forum-mobile .replybox-id { flex-wrap: wrap; }
.forum-mobile .replybox-stance { margin-left: 0; }
.forum-mobile .forum-wrap:has(> .post-chrome) {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}
.forum-mobile .forum-wrap:has(> .post-chrome) > .ui-card {
  margin-bottom: var(--space-1);
}
.forum-mobile .forum-wrap:has(> .post-chrome) .panel.mt {
  margin-top: var(--space-1);
}
.forum-mobile .author-others .ui-card__header {
  justify-content: flex-start;
  gap: 6px;
}
.forum-mobile .buy { margin-bottom: var(--space-1); }
.forum-mobile .event-card,
.forum-mobile .mod-quote,
.forum-mobile .src-card { margin-bottom: var(--space-1); }
.forum-mobile .ghead-t { font-size: 22px; }
.forum-mobile .chat-post .panel-b.article > .ghead .chat-post__title {
  padding-right: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.forum-mobile .chat-post .panel-b.article > .chat-post__actions--article {
  position: static;
  width: 100%;
  justify-content: flex-end;
  margin: 0 0 8px;
}
/* 标签和顶部操作同一行：按钮贴在卡片右上，标签留出右侧空位。 */
.forum-mobile .chat-post .panel-b.article:not(.chat-post__body) > .chat-post__actions--article {
  position: absolute;
  top: 12px;
  right: 12px;
  width: auto;
  max-width: calc(100% - 96px);
  margin: 0;
  gap: 6px;
  flex-wrap: nowrap;
}
.forum-mobile .chat-post .panel-b.article:not(.chat-post__body) > .chat-post__actions--article .ui-btn--sm {
  min-height: 26px;
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  gap: 3px;
}
.forum-mobile .chat-post .panel-b.article:not(.chat-post__body) > .chat-post__actions--article .ui-btn__icon svg {
  width: 12px;
  height: 12px;
}
.forum-mobile .chat-post .panel-b.article:not(.chat-post__body) > .ghead .chat-post__tag {
  min-height: 26px;
  margin-bottom: 8px;
  padding-right: 198px;
}
.forum-mobile .chat-post .panel-b.article:not(.chat-post__body) > .ghead:has(.chat-post__tag) .chat-post__tag {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 8px;
  padding-right: 198px;
}
.forum-mobile .chat-post .panel-b.article:not(.chat-post__body) > .ghead:has(.chat-post__tag) .chat-post__tag .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-post__tag .topic-tag__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.forum-mobile .chat-post .panel-b.article:not(.chat-post__body):not(:has(.chat-post__tag)),
.forum-mobile .chat-post .panel-b.article.chat-post--untagged {
  padding-top: 46px;
}
.forum-mobile .oss-head__stats { margin-left: 0; }
.forum-mobile .tpl-free { margin-bottom: 8px; }
.forum-mobile .media-wall { grid-template-columns: 1fr; }
.forum-mobile .sample-grid-wrap .sample-grid { grid-template-columns: 1fr; }
.forum-mobile .tpl-tut__head { display: none; }
.forum-mobile .tpl-tut__row.glare-hover {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'post action'
    'author action';
}
.forum-mobile .tpl-tut__post { grid-area: post; }
.forum-mobile .tpl-tut__author { grid-area: author; }
.forum-mobile .tpl-tut__action { grid-area: action; align-self: center; }
.forum-mobile .oss-ver-table,
.forum-mobile .tpl-works-wrap {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.forum-mobile .oss-ver-table,
.forum-mobile .tpl-works {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.forum-mobile .oss-ver-table thead,
.forum-mobile .tpl-works thead {
  display: none;
}
.forum-mobile .oss-ver-table tbody,
.forum-mobile .tpl-works tbody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.forum-mobile .oss-ver-table tbody tr:not(.tpl-ver__data-row),
.forum-mobile .tpl-works tbody tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 4px 8px;
  width: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
}
.forum-mobile .tpl-works tbody tr {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.forum-mobile .oss-ver-table tbody td,
.forum-mobile .tpl-works tbody td {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
  font-size: 12px;
}
.forum-mobile .oss-ver-table tbody td:first-child,
.forum-mobile .oss-ver-table tbody td:nth-child(3),
.forum-mobile .oss-ver-table tbody td:last-child,
.forum-mobile .tpl-works tbody td:first-child {
  grid-column: 1 / -1;
}
.forum-mobile .oss-ver-table tbody td[data-label]::before,
.forum-mobile .tpl-works tbody td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin: 0 0 1px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.forum-mobile .oss-ver-table .tpl-ver__note-cell {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}
.forum-mobile .oss-ver__pack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.forum-mobile .oss-ver-table td:last-child .ui-btn-magnet,
.forum-mobile .oss-ver-table td:last-child .ui-btn {
  width: 100%;
  min-height: 28px;
  justify-content: center;
}
.forum-mobile .tpl-ver td.rt .tpl-ver__cmd {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-left: 0;
}
.forum-mobile .tpl-ver .buy-cmd,
.forum-mobile .tpl-ver .tpl-ver__cmd {
  max-width: none;
  min-width: 0;
  width: 100%;
}
.forum-mobile .oss-ver-table tbody tr.tpl-ver__row:has(+ .tpl-ver__data-row) {
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding-bottom: 4px;
}
.forum-mobile .oss-ver-table tbody tr.tpl-ver__data-row {
  display: block;
  margin-top: -6px;
  padding: 0 8px 8px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--surface-raised);
}
.forum-mobile .oss-ver-table tbody tr.tpl-ver__data-row > td {
  display: block;
  padding: 0;
}
.forum-mobile .tpl-works tbody td:first-child,
.forum-mobile .tpl-works__work,
.forum-mobile .tpl-works__info,
.forum-mobile .tpl-works__title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.forum-mobile .tpl-works__cover.cover {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
}
.forum-mobile .tpl-works__title {
  font-size: 13px;
  white-space: normal;
}
.forum-mobile .tpl-works__name {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.forum-mobile .season-split { grid-template-columns: 1fr; }
.forum-mobile .season-cta { align-items: stretch; }
.forum-mobile .season-cta__actions { width: 100%; }
.forum-mobile .season-line { gap: var(--space-1); }
.forum-mobile .season-node-l { font-size: var(--type-micro); }

.fbar-av {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  background: linear-gradient(135deg, var(--surface-muted), var(--surface-strong));
  border: 1px solid var(--line);
  flex: none;
}
.fbar-ic { color: inherit; opacity: .85; }
.fbar-role {
  padding: 0 4px 8px;
}
.fbar-role .ui-field {
  margin-bottom: 0;
}
.fbar-role .ui-label {
  font-size: 11px;
  margin-bottom: 3px;
  color: var(--text-muted);
}
.fbar-role .ui-select {
  min-height: 28px;
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
}
.fbar-role.is-compact {
  padding: 0 0 12px;
  max-width: 280px;
}
.forum-wrap.console {
  --cmenu-pad: 8px;
  --cmenu-border: 1px;
  --cmenu-h-font: 11px;
  --cmenu-h-pad-top: 10px;
  --cmenu-h-pad-bottom: 6px;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.console-main {
  min-width: 0;
  width: 100%;
}
.console-head { margin-bottom: 16px; align-items: flex-start; }
.console-head__copy { min-width: 0; }
.console-head .ui-type--display-m {
  display: flex;
  align-items: center;
  gap: 10px;
}
.console-head .ui-type--display-m::before {
  content: '';
  width: 4px;
  height: 0.86em;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.console-head__lead {
  margin: 8px 0 0 14px;
}
.console-head__back {
  margin: 0 0 10px;
  padding-left: 0;
}
.console-head__copy .console-head__back + .ui-type--display-m::before {
  display: none;
}
.console-head__lead .ui-text-link {
  font-size: inherit;
}
.tb-post .tb-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tb-post .tb-title .ic { color: var(--text-muted); flex: none; }
.console-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.studio-split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  align-items: stretch;
}
.studio-split > .panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.studio-split > .panel > .panel-h,
.studio-split > .panel > .studio-todo__foot {
  flex: none;
}
/* 左侧表头里有 32px 的「收益详情」按钮，右侧只有图标和标题。把两条表头拉到同一高度。 */
.studio-split > .panel > .panel-h {
  min-height: calc(32px + 13px + 13px + 1px);
}
.forum-mobile .studio-split > .panel > .panel-h {
  min-height: calc(32px + 10px + 10px + 1px);
}
.studio-todo,
.studio-split > .panel > .panel-b {
  flex: 1 1 auto;
}
.recruit-split {
  align-items: stretch;
}
.recruit-split > .panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.recruit-split > .panel .panel-b {
  flex: 1;
}
.apply-cols {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.signing-cols {
  grid-template-columns: minmax(0, 1fr) 280px;
}
.signing-perks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.signing-perks-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}
.signing-perks-h .ic {
  color: var(--accent-dark);
  flex: none;
}
.signing-perks .apply-perks {
  width: 100%;
  font-size: 14px;
  color: var(--text);
  gap: 6px;
}
.signing-contact-copy {
  margin: 0;
  line-height: 1.75;
}
.signing-mail {
  margin-top: 16px;
}
.signing-mail__label {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}
.signing-mail__link,
.contact-apply__mail {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.signing-mail__link:hover,
.contact-apply__mail:hover {
  text-decoration: underline;
}
.apply-form-card.spotlight-card {
  overflow: hidden;
}
.apply-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 14px;
}
.apply-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apply-im-note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.apply-im-note b { font-weight: 700; }
.apply-im {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.apply-im .ui-field__addon-left {
  color: var(--text);
  font-size: 13px;
}
.apply-im .apply-im__tag {
  white-space: nowrap;
}
.apply-im .apply-im__tag::after {
  content: '：';
}
.apply-perks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}
.apply-perk {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 0;
}
.apply-perk .ic {
  color: var(--accent-dark);
  flex: none;
  margin-top: 4px;
}
.studio-chart .panel-h .ic,
.studio-todo-panel .panel-h .ic {
  color: var(--accent);
  flex: none;
}
.studio-chart .bars {
  height: 168px;
  gap: 6px;
}
.studio-chart .bar-l {
  font-size: 10px;
}
.studio-todo__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.studio-todo__item:last-child {
  border-bottom: 0;
}
.studio-todo__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
}

.works-panel .works-panel__tabs {
  padding: 0 18px;
}
.works-panel__n {
  margin-left: 4px;
  font-weight: 600;
  color: var(--text-muted);
}
.works-panel .ui-tabs-line__item.is-active .works-panel__n {
  color: var(--accent-dark);
}
.works-tb-wrap,
.tb-sticky-end {
  overflow-x: auto;
}
/* 操作尾列钉在横向滚动右侧；不改各列宽。collapse 下 sticky 不生效。 */
.works-tb-wrap > .tb,
.tb-sticky-end > .tb {
  border-collapse: separate;
  border-spacing: 0;
}
.works-tb-wrap > .tb thead th:last-child,
.tb-sticky-end > .tb thead th:last-child,
.works-tb-wrap > .tb tbody td:last-child,
.tb-sticky-end > .tb tbody td:last-child {
  position: sticky;
  right: 0;
  padding-left: 16px;
  padding-right: 16px;
  white-space: nowrap;
  vertical-align: middle;
}
/* 1% 是给自动列宽表把操作列收到内容宽。版主推荐是固定列宽，套上会把操作列挤没。 */
.works-tb-wrap > .tb thead th:last-child,
.tb-sticky-end:not(.recommend-tb-scroll) > .tb thead th:last-child,
.works-tb-wrap > .tb tbody td:last-child,
.tb-sticky-end:not(.recommend-tb-scroll) > .tb tbody td:last-child {
  width: 1%;
}
.tb.console-sheet thead,
.tb.console-sheet thead th {
  background: var(--console-thead);
}
.tb.console-sheet button.tb-title.is-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-display);
  color: inherit;
  text-align: left;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.tb.console-sheet button.tb-title.is-link:hover,
.tb.console-sheet tbody tr:hover button.tb-title.is-link {
  color: var(--accent-dark);
}
.works-tb-wrap > .tb.console-sheet thead th:last-child,
.tb-sticky-end > .tb.console-sheet thead th:last-child {
  background: var(--console-thead);
}
.works-tb-wrap > .tb thead th:last-child,
.tb-sticky-end > .tb thead th:last-child {
  z-index: 3;
  background: var(--surface-muted);
  box-shadow: -8px 0 8px -8px color-mix(in srgb, var(--text) 18%, transparent);
}
.works-tb-wrap > .tb tbody td:last-child,
.tb-sticky-end > .tb tbody td:last-child {
  z-index: 2;
  background: var(--surface-raised);
  box-shadow: -8px 0 8px -8px color-mix(in srgb, var(--text) 18%, transparent);
}
.works-tb-wrap > .tb tbody tr:hover td:last-child,
.tb-sticky-end > .tb tbody tr:hover td:last-child {
  /* accent-soft 带透明。操作列盖在横向滚过来的格子上，要先铺实底，悬停才不会透出下面的列。 */
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)),
    var(--surface-raised);
}
.works-tb {
  --works-cover: 56px;
  min-width: 72rem;
}
.works-tb tbody tr {
  cursor: default;
}
.tb.works-tb td {
  vertical-align: middle;
}
.tb.works-tb tbody td:not(:first-child) {
  line-height: var(--works-cover);
}
.tb.works-tb tbody td:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 0;
  height: var(--works-cover);
  vertical-align: middle;
}
.tb.works-tb tbody td:not(:first-child) > * {
  vertical-align: middle;
  line-height: 1;
}
.works-tb th:first-child,
.works-tb td:first-child {
  min-width: 16rem;
}
.works-tb__work {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.works-tb__cover.cover {
  width: var(--works-cover);
  height: var(--works-cover);
  min-width: var(--works-cover);
  max-width: var(--works-cover);
  min-height: var(--works-cover);
  max-height: var(--works-cover);
  aspect-ratio: 1;
  border-radius: var(--radius-control);
  flex: none;
  overflow: hidden;
}
.works-tb__cover .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}
.works-tb__cover .forum-cover.cover--empty,
.works-tb__cover .cover--empty,
.works-tb__cover .cover--pending,
.works-tb__cover .cover--reviewing {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.works-tb__info {
  min-width: 0;
  flex: 1;
}
.works-tb__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.works-tb__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-tb__title .ui-badge {
  flex: none;
  gap: 4px;
}
.works-tb .tb-x {
  margin-top: 4px;
}
.works-tb__ver {
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.work-ver {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.45;
  vertical-align: middle;
}
.tb.works-tb tbody td:not(:first-child) > .work-ver {
  line-height: 1.45;
}
.work-ver__status {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  vertical-align: middle;
}
.edit-audit-float {
  position: fixed;
  z-index: 30;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(280px, calc(100vw - 32px));
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill, 980px);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  height: 32px;
  line-height: 32px;
  background-color: rgba(0, 0, 0, 0.2)
}

.edit-audit-float.is-rejected {
  background-color: rgba(204, 20, 20, 0.3);
}

.works-tb__earn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--warning);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  line-height: 1;
}
.works-tb__earn svg {
  flex: none;
  color: color-mix(in srgb, var(--warning) 88%, #e8c547);
}
.tb.works-tb tbody td:last-child {
  line-height: normal;
}
.tb.works-tb tbody td:last-child::before {
  content: none;
}
.works-tb__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.works-tb-wrap > .tb tbody td:last-child .ui-btn,
.tb-sticky-end > .tb tbody td:last-child .ui-btn {
  min-height: 26px;
  padding: 0 8px;
  gap: 0;
  font-size: 12px;
  line-height: 1;
  background: var(--surface-raised);
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  color: var(--accent-dark);
  box-shadow: none;
  border-radius: var(--radius-control, 8px);
}
.works-tb-wrap > .tb tbody td:last-child .ui-btn:hover:not(:disabled),
.tb-sticky-end > .tb tbody td:last-child .ui-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: none;
}
.works-tb-wrap > .tb tbody td:last-child .ui-btn--danger,
.tb-sticky-end > .tb tbody td:last-child .ui-btn--danger {
  background: var(--surface-raised);
  color: var(--danger);
  border-color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}
.works-tb-wrap > .tb tbody td:last-child .ui-btn--danger:hover:not(:disabled),
.tb-sticky-end > .tb tbody td:last-child .ui-btn--danger:hover:not(:disabled) {
  background: var(--surface-raised);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-raised));
  color: var(--danger);
  border-color: var(--danger);
}
.works-tb-wrap > .tb tbody td:last-child .ui-btn:disabled,
.works-tb-wrap > .tb tbody td:last-child .ui-btn.is-disabled,
.tb-sticky-end > .tb tbody td:last-child .ui-btn:disabled,
.tb-sticky-end > .tb tbody td:last-child .ui-btn.is-disabled {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text-muted);
}
.works-tb-wrap > .tb tbody td:last-child .ui-btn__icon,
.tb-sticky-end > .tb tbody td:last-child .ui-btn__icon,
.works-tb-wrap > .tb tbody td:last-child .ui-btn > svg,
.tb-sticky-end > .tb tbody td:last-child .ui-btn > svg {
  display: none;
}
.recommend-tb-scroll {
  /* 竖向跟栏目一起滚，不再自己出一条滚动条。只写 overflow-x 时 overflow-y 会被算成 auto。 */
  overflow-x: auto;
  overflow-y: hidden;
}
.works-tb.works-tb--recommend thead tr,
.works-tb.works-tb--recommend thead th {
  background: var(--console-thead);
}
.recommend-tb-scroll > .works-tb.works-tb--recommend > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--console-thead);
}
.recommend-tb-scroll > .works-tb.works-tb--recommend > thead > tr > th:last-child,
.recommend-tb-scroll > .works-tb.works-tb--recommend > tbody > tr > td:last-child {
  right: 0;
  width: 18rem;
  min-width: 18rem;
  padding-left: 28px;
  padding-right: 28px;
}
.recommend-tb-scroll > .works-tb.works-tb--recommend > thead > tr > th:last-child {
  top: 0;
  z-index: 4;
  background: var(--console-thead);
}
.recommend-tb-scroll > .works-tb.works-tb--recommend > tbody > tr > td:last-child {
  z-index: 2;
  background: var(--surface-raised);
}
.recommend-tb-scroll > .works-tb.works-tb--recommend > tbody > tr:hover > td:last-child {
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)),
    var(--surface-raised);
}
.works-tb.works-tb--recommend {
  table-layout: fixed;
  min-width: 56rem;
}
.tb.works-tb.works-tb--recommend tbody td {
  padding-top: 6px;
  padding-bottom: 6px;
}
.works-tb.works-tb--recommend th:first-child,
.works-tb.works-tb--recommend td:first-child {
  width: 13rem;
  min-width: 0;
  max-width: 13rem;
  overflow: hidden;
}
.works-tb.works-tb--recommend .works-tb__work,
.works-tb.works-tb--recommend .works-tb__info {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.works-tb.works-tb--recommend .works-tb__title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.works-tb.works-tb--recommend .works-tb__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-tb.works-tb--recommend th:nth-child(2),
.works-tb.works-tb--recommend td:nth-child(2) {
  width: auto;
}
.works-tb.works-tb--recommend th:nth-child(3),
.works-tb.works-tb--recommend td:nth-child(3) {
  width: 9.5rem;
  white-space: nowrap;
}
.works-tb.works-tb--recommend th:nth-child(4),
.works-tb.works-tb--recommend td:nth-child(4) {
  width: 6.5rem;
}
.recommend-tag-search.game-link-bind__row {
  align-items: center;
}
.ui-modal.recommend-tag-modal > .ui-card__footer {
  background: var(--surface-raised);
}
.recommend-tag-search__field.game-link-bind__post-search {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.recommend-tag-search__error {
  margin: -4px 0 0;
  color: var(--danger);
}
.recommend-tag-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  color: var(--text-muted);
}
.recommend-tag-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 0 2px;
}
.recommend-tag-choices .ui-choice {
  min-height: 28px;
  margin-bottom: 0;
}
.recommend-tag-choices__label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.recommend-tag-choices__status {
  color: var(--text-muted);
}
.recommend-tb__heading {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.recommend-tb__title {
  font-size: 16px;
  line-height: 1;
}
.recommend-tb__hint {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  position: relative;
  top: 1px;
}
.tb.works-tb.works-tb--recommend tbody td:nth-child(2),
.tb.works-tb.works-tb--recommend tbody td:nth-child(3),
.tb.works-tb.works-tb--recommend tbody td:nth-child(4) {
  text-align: left;
}
.tb.works-tb.works-tb--recommend tbody td:nth-child(2) {
  line-height: normal;
  vertical-align: middle;
}
.tb.works-tb.works-tb--recommend tbody td.num {
  text-align: left;
}
.tb.works-tb.works-tb--recommend tbody td:nth-child(2)::before {
  content: none;
}
.recommend-tb__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: none;
  width: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  line-break: loose;
  word-break: normal;
}
.tb.works-tb.works-tb--recommend tbody td:nth-child(2) > .recommend-tb__quote {
  line-height: 1.45;
  vertical-align: middle;
}
.recommend-editor__quote {
  white-space: pre-wrap;
  /* 全角问号默认不能在它前面换行，会和前面的字粘成一块。这块比行宽还长时，前一个字会被单独留在上一行。 */
  line-break: loose;
  overflow-wrap: break-word;
  word-break: normal;
  overflow-x: hidden;
}
.recommend-editor__work {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-muted);
}
.recommend-editor__work > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.recommend-editor__work strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb.works-tb .ui-btn-magnet {
  display: inline-flex;
  align-items: center;
  align-self: center;
  vertical-align: middle;
}
.works-tb--tpl {
  min-width: 64rem;
}
.works-tb__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  line-height: 1;
}
.works-tb__fav svg {
  flex: none;
}
.works-tb--bought {
  min-width: 56rem;
}
.works-tb--bought .works-tb__work {
  gap: var(--space-3);
}
.works-tb--bought .works-tb__cover-glare {
  flex: none;
  width: var(--works-cover);
  height: var(--works-cover);
  border-radius: var(--radius-control);
  overflow: hidden;
  align-self: center;
}
.works-tb--bought td:nth-child(2),
.works-tb--bought td:nth-child(3) {
  white-space: nowrap;
}
.works-tb--bought td:nth-child(2) {
  color: var(--text-muted);
}

.cmenu {
  background: var(--surface-raised);
  border: var(--cmenu-border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--cmenu-pad);
  box-shadow: var(--shadow);
  position: sticky;
  top: 16px;
}
.cmenu-h {
  font-size: var(--cmenu-h-font);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--cmenu-h-pad-top) 10px var(--cmenu-h-pad-bottom);
}
.console-main > .forum-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.cmenu-foot {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cmenu-i {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.cmenu-i + .cmenu-i { margin-top: var(--space-1); }
.cmenu-i:hover { background: var(--surface-muted); color: var(--text); }
.cmenu-i.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.cmenu-i .ic { color: inherit; opacity: .75; display: grid; place-items: center; }
.cmenu-i.is-on .ic { opacity: 1; }
.cmenu-p {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 8px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.cmenu-badge {
  flex: none;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-mark);
  font-size: var(--type-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-box: trim-both cap alphabetic;
}
.cmenu-badge--accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.cmenu-badge--ink {
  background: var(--text);
  color: var(--surface-raised);
}
.cmenu-i.is-on .cmenu-badge--accent {
  background: var(--accent-ink);
  color: var(--accent);
}
.own-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.own-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.own-card.is-hidden { opacity: .62; }
.own-card-cover {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.own-card-cover .cover { border-radius: 0; aspect-ratio: 16 / 9; width: 100%; }
.own-card-b {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.own-card-t {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.own-card-x { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.own-card-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}
.own-card-acts .ui-btn--sm,
.own-foot .ui-btn--sm {
  min-height: 30px;
  padding: 0 14px;
  font-size: 13px;
}
.own-card-acts .own-card-play {
  background: var(--text);
  color: var(--surface-raised);
  border-color: var(--text);
  box-shadow: none;
}
.own-card-acts .own-card-play:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 86%, var(--surface-raised));
  color: var(--surface-raised);
  border-color: color-mix(in srgb, var(--text) 86%, var(--surface-raised));
}
.own-card-acts .own-card-hide,
.own-foot .own-foot-toggle {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}
.own-card-acts .own-card-hide:hover:not(:disabled),
.own-foot .own-foot-toggle:hover:not(:disabled) {
  background: var(--surface-muted);
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 18%, var(--line));
}
.own-foot { margin-top: 18px; }
.info-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 20px;
  margin: 0 0 18px;
  padding: 0;
}
.info-facts > div { padding: 0; border: none; }
.info-facts dt {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.info-facts dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  overflow: visible;
}
.info-facts__copy {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: left;
}
.info-facts__copy:hover { color: var(--accent-dark); }
.sign-deadline {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
  margin-bottom: 16px;
}
.sign-deadline-t { font-weight: 700; font-size: 14px; }
.sign-deadline-x { font-size: 13px; margin-top: 4px; color: color-mix(in srgb, var(--danger) 80%, var(--text)); }

/* iPad：签约弹窗先画出来，入场结束后 transform 被清掉，模糊层会盖住对话框。
   只拿掉这一层的模糊，暗色遮罩还在，对话框留在上面。桌面和手机不走这里。 */
html[data-tablet] .ui-modal-backdrop.contact-apply-backdrop::before {
  content: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-tablet] .ui-modal.contact-apply-modal.is-settled {
  z-index: 2;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.contact-apply {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.contact-apply > * {
  min-width: 0;
  max-width: 100%;
}
.contact-apply .ui-btn-magnet,
.contact-apply .ui-btn-magnet--full {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.contact-apply__preview {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.contact-apply__user {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-apply__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.contact-apply__hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.contact-apply__mail-pending {
  font-size: 13px;
  color: var(--text-muted);
}

.contact-apply__status {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.contact-channels {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

.contact-channels__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.contact-channels__row:first-child {
  padding-top: 0;
}

.contact-channels__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.contact-channels dt {
  margin: 0;
  flex: none;
  font-size: 13px;
  color: var(--text-muted);
}

.contact-channels dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-channels dd a {
  color: inherit;
  text-decoration: none;
}

.contact-channels dd a {
  color: inherit;
  text-decoration: none;
}
.join-ev-anim {
  margin-bottom: 8px;
}
.join-ev-anim:last-child {
  margin-bottom: 0;
}
.join-ev {
  display: flex;
  align-items: stretch;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 10px 12px;
  min-height: 76px;
  overflow: hidden;
}
.join-ev.is-on { border-color: var(--accent); background: var(--accent-soft); }
.join-ev.is-bad {
  opacity: .48;
  filter: grayscale(.4);
}
.join-ev.is-bad .join-ev-main {
  cursor: not-allowed;
}
.join-ev-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  position: relative;
  z-index: 1;
}
.join-ev-main:disabled {
  cursor: not-allowed;
}
.join-ev.is-locked {
  opacity: .72;
}
.join-ev.is-ended .join-ev-when {
  color: var(--text-muted);
}
.join-ev .ui-badge {
  flex: none;
}
.join-ev-r {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex: none;
}
.join-ev.is-on .join-ev-r {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.join-ev-art {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 50%; inset: 0 0 0 50%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(#000, #000);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.join-ev-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transform-origin: center center;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.join-ev:hover .join-ev-art img {
  transform: scale(1.16);
}
.join-ev-art::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 12%, transparent 46%),
    linear-gradient(180deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, transparent 46%),
    linear-gradient(180deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  pointer-events: none;
}
.join-ev-art::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--surface-raised) 0%, color-mix(in srgb, var(--surface-raised) 72%, transparent) 28%, transparent 62%);
  pointer-events: none;
}
.join-ev.is-on .join-ev-art::before {
  background: linear-gradient(90deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 72%, transparent) 28%, transparent 62%);
}
.join-ev-t { font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.25; width: 100%; }
.join-ev-when {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.join-ev-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  flex: 1;
  min-width: 12em;
}
.join-ev-when {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.join-ev-note {
  display: block;
  margin: 3px 0 4px;
}
.join-ev-terms {
  display: block;
}
.join-ev-unmet {
  color: var(--danger);
  font-weight: 600;
}
.mod-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface-raised)), var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 14px;
}
.mod-card-h {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  font-size: 13px;
  font-weight: 700;
}
.mod-card-title-row {
  display: flex;
  align-items: center;
}
.mod-card-title-row > svg { flex-shrink: 0; margin-right: 8px; }
.mod-card-title {
  flex: 0 0 auto;
  white-space: nowrap;
}
.mod-author-staff {
  padding: 6px 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}
.mod-author-staff.is-loading {
  opacity: 0.72;
}
.mod-author-staff-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}
.mod-author-staff-row:first-of-type {
  margin-top: 0;
}
.mod-author-staff-label {
  flex: 0 0 4.8em;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
}
.mod-author-staff-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.mod-author-staff-actions {
  flex: 0 0 4.6em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 20px;
}
.mod-author-staff-copy-all.ui-btn {
  white-space: nowrap;
}
.mod-author-staff-copy.ui-btn,
.mod-author-staff-edit.ui-btn,
.mod-author-staff-action.ui-btn {
  flex: 0 0 auto;
  align-self: center;
  min-height: 20px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 999px;
}
.mod-author-staff-action.ui-btn.ui-btn--outline,
.mod-author-staff-edit.ui-btn.ui-btn--outline {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft, var(--accent)));
  color: var(--accent-dark, var(--accent));
  box-shadow: none;
}
.mod-author-staff-action.ui-btn.ui-btn--outline:hover:not(:disabled),
.mod-author-staff-edit.ui-btn.ui-btn--outline:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent-soft, var(--accent)) 35%, var(--surface));
}
.mod-card-acts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 8px;
}
.cols:not(.cols-wide) .mod-card-acts { grid-template-columns: 1fr; }
.mod-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 28px;
  padding: 0 4px;
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mod-act > svg { flex-shrink: 0; }
.mod-act > span {
  min-width: 0;
}
.mod-act:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-soft);
}
.mod-status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 2px;
}
.mod-custom-tags {
  row-gap: 2px;
  padding: 0;
}
.mod-custom-tags .ui-choice {
  min-height: 28px;
}
.mod-custom-tags__choice-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mod-custom-tags__remark-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 28%, var(--surface-raised));
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}
.mod-custom-tags__remark-tip span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-0.5px);
}
.mod-custom-tags__remark-tip:hover {
  background: color-mix(in srgb, var(--text-muted) 42%, var(--surface-raised));
  color: var(--text);
}
.mod-custom-tags .mod-status-hint {
  margin: 2px 0 0;
}
.mod-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mod-status-tag input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mod-status-tag:hover:not(.is-on) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-soft);
}
.mod-status-tag.is-on {
  border-color: color-mix(in srgb, var(--success, #16a34a) 55%, var(--line));
  background: color-mix(in srgb, var(--success, #16a34a) 12%, var(--surface-raised));
  color: var(--success, #16a34a);
}
.mod-status-tag:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}
.mod-status-hint {
  width: 100%;
  color: var(--text-muted);
}
.mod-guest{display:flex;flex-direction:column;gap:12px;min-width:240px}
.mod-guest-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5}
.mod-guest-k{flex:none;color:var(--text-muted);white-space:nowrap}
.mod-guest-v{flex:1;min-width:0;word-break:break-all;color:var(--text)}
.mod-guest-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--text)}
.mod-guest-toggle .ui-switch{flex:none}
/* 已解决帖在列表中整体置灰：标题和摘要都比正常正文更弱 */
.ui-poster-card.is-resolved .ui-poster-card__title,
.ui-poster-card.is-resolved .ui-poster-card__desc,
.tb tr.is-resolved .tb-title,
.tb tr.is-resolved .tb-x {
  color: color-mix(in srgb, var(--text-muted) 40%, var(--surface));
}
.tb tr.is-resolved:hover .tb-title {
  color: color-mix(in srgb, var(--text-muted) 40%, var(--surface));
}
/* 版主 0 回帖高亮：L1 轻高亮 — 左条 2px + 微底色（仅本人客户端） */
.tb tr.is-zero-reply {
  background: var(--warning-soft);
  background: color-mix(in srgb, var(--warning-soft) 52%, var(--surface));
  box-shadow: inset 2px 0 0 #e5c07a;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--warning) 28%, var(--warning-soft));
}
.tb tr.is-zero-reply:hover {
  background: var(--warning-soft);
  background: color-mix(in srgb, var(--warning-soft) 68%, var(--surface));
}
.ui-poster-card.is-zero-reply {
  background: var(--warning-soft);
  background: color-mix(in srgb, var(--warning-soft) 52%, var(--surface));
  border-left: 2px solid #e5c07a;
  border-left: 2px solid color-mix(in srgb, var(--warning) 28%, var(--warning-soft));
  box-shadow: none;
}
.forum-mobile .own-grid {
  grid-template-columns: 1fr;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.income-split {
  align-items: stretch;
  margin-bottom: 18px;
}
.income-split > .panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.income-split > .panel .panel-b {
  flex: 1;
}
.income-chart .panel-h .ic,
.income-payout-panel .panel-h .ic,
.income-kind .panel-h .ic {
  color: var(--accent);
  flex: none;
}
.income-chart .bars {
  height: 188px;
  gap: 8px;
}
.income-kind__sum {
  margin-left: auto;
  color: var(--accent-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
.income-kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.income-empty {
  margin: 0;
  padding: 28px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.income-payouts {
  display: flex;
  flex-direction: column;
}
.income-payout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 88%, transparent);
}
.income-payout:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.income-payout:first-child {
  padding-top: 0;
}
.income-payout__month {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.income-payout__amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.income-tb tbody tr,
.income-tb tbody tr:hover {
  cursor: default;
  background: transparent;
}
.income-tb .income-fen {
  color: var(--accent-dark);
  font-weight: 600;
}
.kpi {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 15px 16px;
  box-shadow: var(--shadow);
}
.kpi-l { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.kpi-n { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; }
.kpi-n--mask {
  min-height: 29px;
  -webkit-user-select: none;
  user-select: none;
}
.kpi-mask {
  display: block;
  width: 56px;
  height: 18px;
  margin-top: 4px;
  border-radius: 4px;
  background-color: var(--surface-muted);
}
.studio-dev-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 52px;
  border-radius: var(--radius-control);
  overflow: hidden;
}
.studio-chart .panel-b { padding: 0; }
.studio-chart .studio-dev-host {
  min-height: 168px;
  border-radius: 0;
}
.studio-dev-mask,
.studio-dev-mask * { cursor: default; }
.studio-dev-mask,
.studio-dev-mask:hover { box-shadow: none; }
.studio-dev-mask .kpi-n {
  margin: 0;
  font-size: 15px;
}
.kpi-n-money { color: var(--accent-dark); }
.kpi-x { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.kpi.spotlight-card { overflow: hidden; }
.kpi > .glare-hover { display: block; }
.kpis > * { display: flex; }
.kpis .kpi {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
.kpis .kpi > .glare-hover {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.ops-range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ops-kpis .kpi { padding: 18px 20px; }
.ops-kpis .kpi-n { font-size: 28px; letter-spacing: -.6px; }
.ops-panel .panel-h .ic {
  color: var(--accent);
  flex: none;
}
.ops-panel + .ops-panel { margin-top: 16px; }
.ops-tb tbody tr,
.ops-tb tbody tr:hover {
  cursor: default;
}
.ops-tb td {
  font-variant-numeric: tabular-nums;
}
.tb-view {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.tb-view .rbar-t {
  width: 56px;
  flex: none;
}
.bars {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 132px;
  padding: 10px 0 0;
}
.bar {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.bar-v {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  min-height: 3px;
}
.bar-l {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.rbar-t {
  height: 6px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.rbar-f {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
}
.unpub {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  margin-bottom: 16px;
}
.unpub .txt-b { font-weight: 700; }
.notice {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-control);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
}
button.notice {
  cursor: pointer;
  text-align: left;
  font: inherit;
}
button.notice:hover {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--accent));
}
.guide-post-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.guide-post-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.panel-p { padding: 18px; }
.txt-b { font-weight: 700; color: var(--text); }
.console .ui-tabs-line { padding: 0 12px; border-bottom: 1px solid var(--line); }
.console .inbox-chip-rail {
  position: sticky;
  top: 0;
  z-index: 8;
  min-width: 0;
  max-width: 100%;
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
  background: var(--surface-raised);
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}
.console .inbox-chip-rail .ui-tabs-line {
  flex: none;
  width: max-content;
  min-width: 100%;
  padding: 0;
  border-bottom: 0;
  overflow: visible;
}
.console .inbox-chip-rail .ui-tabs-line__item {
  flex: none;
}
.forum-mobile .console .inbox-chip-rail {
  top: var(--mobile-sticky-inset, 0px);
  padding: 0 8px;
}
.forum-mobile .console .inbox-chip-rail .ui-tabs-line {
  padding: 0;
}

.forum-mobile .forum-wrap.console {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  max-width: 100%;
}
.forum-mobile .console-main,
.forum-mobile .console-main > .panel {
  min-width: 0;
  max-width: 100%;
}
/* 只写 overflow-x:hidden 时，overflow-y 会被算成 auto。
   消息分类是 sticky，含在这块里就会跟着 #root 滑走，吸不到窗口顶。 */
.forum-mobile .console-main {
  overflow: visible;
}
.forum-mobile .console-main > .panel {
  overflow-x: hidden;
}
.forum-mobile .console-main > .panel.panel--inbox {
  overflow: visible;
}
.forum-mobile .cmenu {
  position: static;
  margin-top: 0;
}
.forum-mobile .kpis,
.forum-mobile .kpis-3,
.forum-mobile .console-split,
.forum-mobile .income-kinds,
.forum-mobile .apply-cols,
.forum-mobile .signing-cols,
.forum-mobile .profile-cols,
.forum-mobile .apply-im {
  grid-template-columns: 1fr;
}

.game-link-bind-pc-hint {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.game-link-bind-pc-hint .forum-wrap {
  min-height: 100%;
  box-sizing: border-box;
}

/* 我的 / 创作者中心的帖子表在手机上改成卡片，避免横滑和钉死的操作列。 */
.forum-mobile .console .ui-tabs-line {
  gap: 12px;
  padding: 0 8px;
}
.forum-mobile .console .ui-tabs-line__item,
.forum-mobile .works-panel .ui-tabs-line__item {
  min-height: 34px;
  font-size: 13px;
}
.forum-mobile .console .ui-chip {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.forum-mobile .console-cards {
  overflow: visible;
  padding: 6px 8px 8px;
}
.forum-mobile .console-cards > .tb {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
}
.forum-mobile .console-cards > .tb thead {
  display: none;
}
.forum-mobile .console-cards > .tb tbody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.forum-mobile .console-cards > .tb tbody tr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 4px 6px;
  width: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
}
.forum-mobile .console-cards > .tb tbody td,
.forum-mobile .console-cards > .tb tbody td:last-child,
.forum-mobile .works-tb-wrap.console-cards > .tb tbody td:last-child,
.forum-mobile .tb-sticky-end.console-cards > .tb tbody td:last-child {
  display: block;
  position: static;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  white-space: normal;
  line-height: 1.25;
  font-size: 12px;
  vertical-align: top;
}
.forum-mobile .console-cards > .tb tbody td:first-child,
.forum-mobile .console-cards > .tb tbody td:last-child {
  grid-column: 1 / -1;
}
.forum-mobile .console-cards > .tb tbody td[data-label] {
  min-width: 0;
}
.forum-mobile .console-cards > .tb tbody td:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.forum-mobile .console-cards .tb.works-tb tbody td:not(:first-child)::before,
.forum-mobile .console-cards .tb.works-tb tbody td:last-child::before {
  content: none;
  display: none;
  width: auto;
  height: auto;
}
.forum-mobile .console-cards .tb.works-tb tbody td[data-label]::before,
.forum-mobile .console-cards > .tb tbody td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin: 0 0 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.forum-mobile .console-cards > .tb.works-tb:not(.works-tb--recommend) tbody td:not(:first-child) {
  line-height: 1.2;
  text-align: left;
}
.forum-mobile .console-cards > .tb.works-tb:not(.works-tb--recommend) tbody td:not(:first-child) > * {
  line-height: inherit;
  vertical-align: baseline;
}
.forum-mobile .console-cards > .tb.works-tb:not(.works-tb--recommend) tbody td[data-label] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}
.forum-mobile .console-cards > .tb.works-tb:not(.works-tb--recommend) tbody td[data-label]::before {
  display: inline;
  flex: none;
  margin: 0;
}
.forum-mobile .console-cards .tb-title,
.forum-mobile .console-cards .works-tb__title {
  align-items: flex-start;
  white-space: normal;
  font-size: 13px;
  line-height: 1.3;
}
.forum-mobile .console-cards .tb-x {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.3;
}
.forum-mobile .console-cards .works-tb {
  --works-cover: 40px;
}
.forum-mobile .console-cards .works-tb__work {
  gap: 8px;
}
.forum-mobile .console-cards .works-tb__earn {
  gap: 3px;
  font-size: 12px;
}
.forum-mobile .console-cards .works-tb__earn svg {
  width: 12px;
  height: 12px;
}
.forum-mobile .console-cards .works-tb__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}
.forum-mobile .console-cards .works-tb__actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  white-space: normal;
}
.forum-mobile .console-cards .works-tb__actions > .ui-btn,
.forum-mobile .console-cards .works-tb__actions > .ui-btn-magnet,
.forum-mobile .console-cards > .tb tbody td:last-child > .ui-btn,
.forum-mobile .console-cards > .tb tbody td:last-child > .ui-btn-magnet {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}
.forum-mobile .console-cards > .tb tbody td:last-child .ui-btn {
  width: auto;
  min-height: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 10px;
  justify-content: center;
  white-space: nowrap;
}

/* 运营数据：时间范围、汇总和明细都按手机宽度排，明细不横滑。 */
.forum-mobile .ops-range {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}
.forum-mobile .ops-range > .ui-chip-magnet,
.forum-mobile .ops-range .ui-chip-glare,
.forum-mobile .ops-range .ui-chip {
  width: 100%;
  max-width: none;
}
.forum-mobile .ops-range .ui-chip {
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}
.forum-mobile .kpis.ops-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.forum-mobile .ops-kpis .kpi {
  min-width: 0;
  padding: 8px 10px;
}
.forum-mobile .ops-kpis .kpi-l {
  margin-bottom: 2px;
  font-size: 11px;
}
.forum-mobile .ops-kpis .kpi-n {
  font-size: 18px;
  letter-spacing: -0.3px;
}
.forum-mobile .ops-kpis .kpi-x {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.3;
}
.forum-mobile .ops-panel .panel-h {
  padding: 8px 10px;
  font-size: 13px;
}
.forum-mobile .ops-panel + .ops-panel {
  margin-top: 8px;
}
.forum-mobile .ops-panel .console-cards--metrics {
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
}
.forum-mobile .console-cards.console-cards--metrics > .tb tbody td:last-child {
  display: block;
  grid-column: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  gap: 0;
}
.forum-mobile .console-cards--metrics .tb-title {
  display: block;
  overflow-wrap: anywhere;
}
.forum-mobile .console-cards--metrics .tb-x {
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.forum-mobile .console-cards--metrics .tb-view {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}
.forum-mobile .console-cards--metrics .tb-view .rbar-t {
  width: 100%;
  max-width: 72px;
}
.forum-mobile .kpis.kpis-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.forum-mobile .kpis.kpis-3 .kpi {
  min-width: 0;
  padding: 8px 10px;
}
.forum-mobile .kpis.kpis-3 .kpi-n {
  font-size: 18px;
}
.forum-mobile .kpis.kpis-3 .kpi-x {
  font-size: 10px;
  line-height: 1.3;
}
.forum-mobile .console-cards--metrics .income-tb td.rt {
  text-align: left;
}
.forum-mobile .console-cards.console-cards--inbox > .tb tbody tr {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.forum-mobile .console-cards.console-cards--inbox > .tb.tb-inbox tbody tr {
  box-sizing: border-box;
  min-height: 48px;
  padding: 6px 12px;
  gap: 0;
  justify-content: center;
}
.forum-mobile .console-cards.console-cards--inbox > .tb.tb-inbox tbody td {
  height: auto;
  min-height: 0;
}
.forum-mobile .console-cards.console-cards--inbox > .tb tbody td:first-child {
  padding-right: 16px;
}
.forum-mobile .console-cards.console-cards--inbox .tb-inbox__unread.unread-dot {
  top: 8px;
  right: 8px;
}
.forum-mobile .console-cards .tb.tb-inbox .tb-title,
.forum-mobile .console-cards .tb.tb-inbox .tb-x,
.forum-mobile .console-cards .tb.tb-inbox button.tb-inbox__excerpt {
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.forum-mobile .console-cards .tb.tb-inbox .tb-x,
.forum-mobile .console-cards .tb.tb-inbox button.tb-inbox__excerpt {
  margin-top: 4px;
}
.forum-mobile .inbox-notes,
.forum-mobile .inbox-note {
  min-width: 0;
  max-width: 100%;
}
.forum-mobile .inbox-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: start;
  min-height: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.forum-mobile .inbox-note.inbox-note--history {
  border-bottom: 1px solid var(--line);
}
.forum-mobile .inbox-note > .ui-avatar,
.forum-mobile .inbox-note > .inbox-faces {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
.forum-mobile .inbox-note > .ui-avatar.ui-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.forum-mobile .inbox-note__main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.forum-mobile .inbox-note > .ui-btn,
.forum-mobile .inbox-note > .ui-btn-magnet {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
}
/* /m 消息列表按单个字符折行。禁则会把「了！！！」粘成一段，行尾不够就从中间裁掉。 */
.forum-mobile .inbox-note .inbox-note__line,
.forum-mobile .inbox-note .inbox-note__name,
.forum-mobile .inbox-note .inbox-note__user,
.forum-mobile .inbox-note .inbox-note__user-copy,
.forum-mobile .inbox-note .inbox-note__work,
.forum-mobile .inbox-note .inbox-note__work-copy,
.forum-mobile .inbox-note .inbox-note__quote,
.forum-mobile .inbox-note .inbox-note__quote-copy,
.forum-mobile .inbox-note .inbox-note__sentence,
.forum-mobile .inbox-note .inbox-note__excerpt,
.forum-mobile .inbox-note .inbox-note__body,
.forum-mobile .inbox-note .inbox-note__body-copy,
.forum-mobile .inbox-note .inbox-note__excerpt-copy {
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: loose;
  line-break: anywhere;
}
.forum-mobile .inbox-pager {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.forum-mobile .inbox-pager .ui-pagination {
  width: auto;
  max-width: 100%;
  justify-content: center;
}
.forum-mobile .inbox-note--benefit {
  align-items: center;
  min-height: 0;
  padding: 8px 12px;
}
.forum-mobile .inbox-note--reply {
  align-items: start;
}
.forum-mobile .inbox-note--reply .inbox-note__body,
.forum-mobile .inbox-note--reply .inbox-note__body-copy {
  color: #000;
}
.forum-mobile .inbox-note--reply .inbox-note__body {
  font-size: 12px;
}
.forum-mobile .inbox-note--reply .inbox-note__body-copy {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
/* /m 消息「回复我的」不提供回复，和帖子楼层一样只读。 */
.forum-mobile .inbox-note__reply-btn {
  display: none;
}
.forum-mobile .inbox-note__side {
  display: none;
  min-height: 0;
}
.forum-mobile .inbox-note--reply .inbox-note__side,
.forum-mobile .inbox-note--reaction .inbox-note__side {
  display: none;
  min-height: 0;
}
.forum-mobile .inbox-note__excerpt {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 2px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
}
.forum-mobile .inbox-note__excerpt-copy {
  -webkit-line-clamp: 2;
  max-height: calc(1.4em * 2);
}
.forum-mobile .console-cards.console-cards--inbox > .tb tbody td,
.forum-mobile .console-cards.console-cards--inbox > .tb tbody td:last-child {
  display: block;
  grid-column: auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-top: 0;
  text-align: left;
}
.forum-mobile .console-cards.console-cards--inbox > .tb tbody td:last-child {
  align-self: flex-end;
  font-size: 11px;
}
.forum-mobile .console-cards.console-cards--inbox > .tb tbody td[data-label]::before {
  content: none;
}
.forum-mobile .recommend-tb-scroll.console-cards {
  max-height: none;
  overflow: visible;
  padding-bottom: 0;
}
.forum-mobile .recommend-tb-scroll.console-cards > .works-tb.works-tb--recommend {
  min-width: 0;
  table-layout: auto;
}
.forum-mobile .recommend-tb-scroll.console-cards > .works-tb.works-tb--recommend > thead > tr > th,
.forum-mobile .recommend-tb-scroll.console-cards > .works-tb.works-tb--recommend > tbody > tr > td,
.forum-mobile .recommend-tb-scroll.console-cards > .works-tb.works-tb--recommend > thead > tr > th:last-child,
.forum-mobile .recommend-tb-scroll.console-cards > .works-tb.works-tb--recommend > tbody > tr > td:last-child,
.forum-mobile .recommend-tb-scroll.console-cards > .works-tb.works-tb--recommend > tbody > tr:hover > td:last-child {
  position: static;
  right: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  box-shadow: none;
}
.forum-mobile .console-cards .works-tb--recommend tbody td:nth-child(2) {
  grid-column: 1 / -1;
}
.forum-mobile .console-cards .recommend-tb__quote {
  text-align: left;
  font-size: 12px;
}

.mobile-tabbar button { min-height: 44px; }

html[data-tablet] .fbar-icon:hover,
html[data-tablet] .me-link:hover,
html[data-tablet] .forum-btn-cta:hover,
html[data-tablet] .event-promo:hover,
html[data-tablet] .gcard:hover,
html[data-tablet] .ui-poster-card:hover {
  transform: none;
}
html[data-tablet] .gcard:hover .forum-cover,
html[data-tablet] .ui-poster-card:hover .forum-cover,
html[data-tablet] .event-promo:hover .forum-cover,
html[data-tablet] .buy-cover:hover .forum-cover {
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .gcard, .ui-poster-card, .gcard .forum-cover, .ui-poster-card .forum-cover, .event-promo, .event-promo .forum-cover, .buy-cover .forum-cover { transition: none; }
  .gcard:hover, .ui-poster-card:hover, .event-promo:hover { transform: none; }
  .event-card:hover { filter: none; }
  .gcard:hover .forum-cover, .ui-poster-card:hover .forum-cover, .event-promo:hover .forum-cover, .buy-cover:hover .forum-cover { transform: none; }
  .join-ev-art img, .join-ev:hover .join-ev-art img { transform: none; transition: none; }
  .star-border-button:hover { transform: none; }
  .player-chrome-caret,
  .player-chrome-face,
  .player-chrome-sliver,
  .player-chrome-toggle.specular-button,
  .player-chrome-glare.glare-hover { transition: none; }
  .player-chrome { transition: none; }
  .player-page:not(.is-mobile) .player-menu { transition: none; }
  .player-chrome-toggle.is-open .player-chrome-caret { transform: none; }
  .buy-magnet-stick.is-stuck .buy-magnet-stick__pin { animation: none; }
  .player-page.is-mobile .player-menu--overlay { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .buy-magnet-stick.is-stuck .buy-magnet-stick__pin {
    background: var(--surface-raised);
  }
}

.forum-pc--player,
.forum-mobile--player {
  min-width: 0;
  background: var(--page, var(--surface));
}

.mobile-shell.forum-mobile--player {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.forum-pc.forum-pc--player,
.forum-mobile.forum-mobile--player {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.app-shell.forum-pc--player,
.app-shell.forum-mobile--player {
  min-height: 0;
}

.player-page {
  max-width: none;
  margin: 0;
  padding: 20px 0 40px;
  width: 100%;
  box-sizing: border-box;
}

.player-page.player-page--stage,
.player-page:not(:has(.demoend)) {
  position: relative;
  flex: 1 1 auto;
  padding: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: var(--page, var(--surface));
  color: var(--text);
}

.player-page.is-mobile {
  padding: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.player-page.is-mobile.player-page--stage,
.player-page.is-mobile:not(:has(.demoend)) {
  height: 100%;
  max-height: 100%;
}

.player-page--embedded {
  padding: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

.player-page.player-page--embedded.player-page--stage,
.player-page.player-page--embedded:not(:has(.demoend)) {
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.player-page[data-player-scheme='light'] {
  --surface: #f4f4f4;
  --surface-raised: #ffffff;
  --surface-muted: #f5f5f570;
  --text: #1a1a1a;
  --text-muted: #5c5c5c;
  --line: #e2e2e2;
  --page: #f4f4f4;
  --player-letterbox: #e8e8e8;
}

.player-page[data-player-scheme='dark'] {
  --surface: #141414;
  --surface-raised: #1c1c1c;
  --surface-muted: #242424;
  --text: #f2f2f2;
  --text-muted: #a3a3a3;
  --line: #2c2c2c;
  --page: #101010;
  --player-letterbox: #0a0a0a;
}

.player-page[data-player-scheme] .player-stage,
.player-page[data-player-scheme] .player-embed {
  background: var(--player-letterbox);
}

.player-body {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.player-stage-host {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

.player-chrome {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 6;
  width: max-content;
  pointer-events: none;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  transition: left .45s ease, top .45s ease, transform .45s ease, opacity .35s ease;
}

.player-chrome.is-dragging {
  cursor: grabbing;
  z-index: 14;
  user-select: none;
  transition: none;
  transform: none;
}

.player-chrome > * {
  pointer-events: auto;
}

.player-chrome.is-docked:not(.is-dragging) {
  transform: none;
  opacity: 20%;
}
.player-chrome.is-docked:not(.is-dragging):hover {
  opacity: 0.5;
}

.player-chrome-sliver {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .28s ease, max-height .35s ease;
}

.player-chrome-toggle.specular-button {
  transition: width .35s ease, min-width .35s ease, padding .35s ease, background .35s ease, box-shadow .35s ease;
}

.player-chrome-glare.glare-hover {
  transition: box-shadow .35s ease, background .35s ease, border-radius .35s ease;
}

.player-chrome-glare.glare-hover {
  display: flex;
  line-height: 0;
  border-radius: 13%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.player-chrome-toggle.specular-button {
  --sb-radius: 6px !important;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 4px;
  color: #ececec;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.player-chrome-toggle .specular-button__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: gap .35s ease;
}

.player-chrome-caret {
  display: block;
  flex: none;
  max-height: 20px;
  color: #d4d4d4;
  overflow: hidden;
  transition: transform .35s ease, opacity .28s ease, max-height .35s ease;
}

.player-chrome-toggle.is-open .player-chrome-caret {
  transform: rotate(180deg);
}

.player-chrome-face {
  display: grid;
  flex: none;
  max-height: 42px;
  overflow: hidden;
  transition: opacity .28s ease, max-height .35s ease;
}

.player-chrome-logo.ui-avatar {
  width: 32px;
  height: 32px;
  border-color: transparent;
  /* 标识原图圆角约为边长的 18%。 */
  border-radius: 18%;
  background: transparent;
}

.player-chrome-logo.ui-avatar img {
  object-fit: cover;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  -webkit-user-drag: none;
}

.player-chrome.is-docked:not(.is-dragging) .player-chrome-glare.glare-hover {
  box-shadow: none;
  background: none;
  display: flex;
  line-height: 0;
  border-radius: 18%;
}
.player-chrome.is-docked:not(.is-dragging) .player-chrome-toggle.specular-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0px;
  border-radius: 18%;
  background: transparent;
  box-shadow: none;
}
.player-chrome.is-docked:not(.is-dragging) .player-chrome-toggle .specular-button__fx {
  display: none;
}
.player-chrome.is-docked:not(.is-dragging) .player-chrome-logo.ui-avatar {
  width: 28px;
  height: 28px;
}
.player-chrome.is-docked:not(.is-dragging) .player-chrome-toggle {
  position: relative;
}
.player-chrome.is-docked:not(.is-dragging) .player-chrome-toggle::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.player-page[data-player-scheme='dark'] .player-chrome-toggle.specular-button {
  --sb-tint: #2a2a2a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.player-page[data-player-scheme='dark'] .player-chrome-glare.glare-hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.player-page.is-mobile.is-menu-open .player-chrome {
  z-index: 13;
}

.player-page:not(.is-mobile) .player-menu {
  height: 100%;
  overflow: hidden;
  transition: width .42s cubic-bezier(.2, .8, .2, 1), flex-basis .42s cubic-bezier(.2, .8, .2, 1), padding .42s ease, opacity .28s ease, border-color .42s ease;
}
.player-menu__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.player-page:not(.is-mobile) .player-menu.is-collapsed {
  flex-basis: 0;
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-right-width: 0;
  overflow: hidden;
  pointer-events: none;
}
.player-menu {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--player-menu-w, 248px);
  width: var(--player-menu-w, 248px);
  height: auto;
  max-height: 100%;
  min-height: 0;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 16px;
  box-sizing: border-box;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-width: 0 1px 0 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  pointer-events: auto;
}

.player-menu-scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--text) 28%, transparent);
  cursor: pointer;
}

.player-page.is-mobile .fbar-gap {
  display: none;
}
.player-page.is-mobile .player-menu--overlay {
  position: absolute;
  top: auto;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 12;
  flex: none;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 78vh;
  max-height: min(78dvh, 100%);
  align-self: auto;
  gap: 0;
  padding: 4px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: 0 -16px 40px color-mix(in srgb, var(--text) 16%, transparent);
  animation: player-sheet-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-menu__sheet-handle {
  display: block;
  flex: none;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 16px 0 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.player-menu__sheet-handle::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
}

.player-menu__sheet-head {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 12px;
  background: var(--surface-raised);
}
.player-menu__sheet-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.player-page.is-mobile .player-menu--overlay .player-menu__title {
  font-size: 17px;
  line-height: 1.35;
}

.player-page.is-mobile .player-menu--overlay .player-menu__author.ui-btn {
  min-height: 36px;
  padding-inline: 2px;
}

.player-page.is-mobile .player-menu--overlay .player-menu__avatar.ui-avatar--sm {
  width: 24px;
  height: 24px;
}

.player-menu__hud {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 4px 0 12px;
}

.player-menu__hud-row + .player-menu__hud-row {
  margin-top: 8px;
}

.player-menu__hud-row {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  justify-content: start;
  gap: 8px;
}

.player-menu__hud-row[data-cols='1'] { grid-template-columns: minmax(0, 1fr); }
.player-menu__hud-row[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.player-menu__hud-row[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player-menu__hud-row[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.player-menu__hud-row[data-cols='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.player-menu__hud-row[data-cols='6'] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.player-menu__hud-slot {
  display: block;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.player-menu__hud-slot > .ui-btn-magnet {
  display: flex;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.player-menu__hud-btn.ui-btn {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 52px;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 8px 2px 6px;
  border-radius: var(--radius-control, 12px);
  background: color-mix(in srgb, var(--text) 6%, var(--surface-raised));
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.player-menu__hud-btn.ui-btn > span:not(.ui-btn__icon) {
  flex: none;
  min-width: max-content;
  transform-origin: center center;
}

.player-menu__hud-btn.ui-btn .ui-btn__icon {
  margin: 0 0 4px;
}

.player-menu__hud-btn.ui-btn.is-pressed,
.player-menu__hud-btn.ui-btn[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.player-page.is-mobile .player-menu--overlay .player-menu__social {
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.player-page.is-mobile .player-menu--overlay .player-menu__social .ui-btn-magnet {
  overflow: visible;
}

@keyframes player-sheet-in {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.player-menu__collapse-glare.glare-hover {
  display: flex;
  flex: none;
  width: max-content;
  overflow: visible;
  border-radius: var(--radius-pill, 999px);
}

.player-menu > .fbar-brand {
  flex: none;
  padding: 0 4px 2px;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.player-menu__card-glare.glare-hover {
  display: block;
  flex: none;
  overflow: visible;
  border-radius: var(--radius-card, 16px);
}

.player-menu__card.spotlight-card {
  padding: 12px 10px 10px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 16px);
  background: var(--surface-raised);
}

.player-menu__meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px 2px 2px;
  text-align: left;
}

.player-menu__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.player-menu__author.ui-btn {
  justify-content: flex-start;
  min-height: 28px;
  padding-inline: 4px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: left;
}

.player-menu__author.ui-btn > span:not(.ui-btn__icon):not(.ui-btn__spinner) {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.player-menu__avatar.ui-avatar--sm {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

.player-menu__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0;
  background: none;
}

.player-menu__actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 0;
}

.player-menu__actions-row .ui-btn {
  white-space: nowrap;
}

.player-menu__actions .ui-btn-magnet,
.player-menu__actions > div {
  min-width: 0;
}

.player-menu__actions .ui-btn {
  min-width: 0;
}

.player-menu__social {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 8px;
}

.player-menu__social-glare.glare-hover,
.player-menu__social .ui-btn-magnet {
  display: block;
  min-width: 0;
  width: 100%;
  overflow: visible;
  border-radius: var(--radius-control, 12px);
}

.player-menu__social-btn.ui-btn {
  width: 100%;
  height: auto;
  flex-direction: column;
  gap: 2px;
  padding: 8px 2px 6px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
}

.player-menu__social-btn.ui-btn .ui-btn__icon {
  margin: 0;
}

.player-menu__social-btn.ui-btn > span:not(.ui-btn__icon):not(.ui-btn__spinner) {
  display: flex;
  align-items: center;
}

.player-menu__social-label {
  font-size: 11px;
}
.player-menu__social-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.player-menu__social-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.player-menu__social-btn.ui-btn.is-pressed,
.player-menu__actions .ui-btn.is-pressed,
.player-menu__actions .ui-btn[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.player-menu__channels {
  padding-top: 4px;
}

.player-menu__channels .fbar-tabs {
  margin-bottom: 8px;
}

.player-menu__account {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.player-menu__scheme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.player-menu__scheme-cap {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.player-menu__scheme .ui-switch {
  gap: 0;
}

.player-navigation-note,
.player-document-note {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  margin: 0;
  pointer-events: none;
  text-align: center;
  font-size: 14px;
  color: var(--surface);
  color: color-mix(in srgb, var(--surface) 70%, var(--text));
}

.player-document-note {
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.player-document-note p {
  margin: 0;
}

.player-document-note .ui-btn {
  pointer-events: auto;
}

.player-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 96%, var(--surface));
}

.player-frame {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.player-frame.is-fill,
.player-frame.is-landscape,
.player-frame.is-portrait {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.player-frame.is-playing {
  padding: 0;
}

.player-embed {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: color-mix(in srgb, var(--text) 96%, var(--surface));
}

/* 换页时新文档叠在当前页下面，不挡点击。当前页从插入起就可见，不等 load。 */
.player-embed--buffer {
  z-index: 0;
  pointer-events: none;
}

.player-empty {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  color: color-mix(in srgb, var(--surface) 70%, var(--text));
  font-size: 14px;
  text-align: center;
}

.player-blocked {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: color-mix(in srgb, var(--surface) 78%, var(--text));
  text-align: center;
}

.player-blocked__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.player-blocked__body {
  margin: 0;
  max-width: 36em;
  font-size: 13px;
  line-height: 1.6;
}

.player-blocked__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.player-gate {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent-soft) 42%, transparent),
      color-mix(in srgb, var(--text) 72%, transparent) 54%,
      color-mix(in srgb, var(--text) 88%, var(--surface))
    );
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-ink);
  cursor: pointer;
}

.player-gate:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 46%, transparent);
}

.player-gate:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 2px;
}

.player-gate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-action));
  color: var(--accent-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
}

.player-gate:hover .player-gate__cta {
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 42%, transparent);
}

.player-stage:fullscreen {
  width: 100%;
  height: 100%;
}

/* iPad 系统全屏的「关闭」在左上角且页面改不了。这里自己铺满，按钮改到右上角，透明度和尺寸都按原来的一半。 */
html.is-ipad-play-fullscreen,
html.is-ipad-play-fullscreen body {
  height: 100%;
  overflow: hidden;
}

html.is-ipad-play-fullscreen .player-page.player-page--stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 100%;
  max-height: none;
}

.player-ipad-exit {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: calc(6px + env(safe-area-inset-right, 0px));
  z-index: 30;
  margin: 0;
  padding: 2px 8px;
  min-height: 22px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: inherit;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.5;
  cursor: pointer;
}

.player-page.is-mobile .player-stage,
.player-page.is-mobile .player-frame,
.player-page.is-mobile .player-embed {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.player-stage:fullscreen .player-frame.is-landscape,
.player-stage:fullscreen .player-frame.is-portrait,
.player-page.is-mobile .player-frame.is-portrait {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  flex: 1;
}

/* 小程序里只适配横屏、舞台却是竖的：转 90 度，游戏按横屏窗口排版。 */
.player-stage.is-turned > .player-frame.is-playing {
  position: absolute;
  top: 0;
  left: 100%;
  width: var(--turn-w);
  height: var(--turn-h);
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  flex: none;
  transform: rotate(90deg);
  transform-origin: top left;
}

.player-page.player-page--ended,
.player-page:has(.demoend) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.player-page > .demoend {
  width: min(1560px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.demoend {
  min-height: 60dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 16px;
  padding: 44px 16px;
  border-radius: var(--radius-card);
  background: var(--text);
  background: color-mix(in srgb, var(--text) 92%, var(--surface));
  color: var(--surface);
  color: color-mix(in srgb, var(--surface) 96%, var(--text));
  box-shadow: var(--shadow-2, 0 10px 28px color-mix(in srgb, var(--text) 12%, transparent));
}

.demoend-t {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.demoend-x {
  margin: 0;
  color: color-mix(in srgb, var(--surface) 72%, var(--text));
  max-width: 36em;
  line-height: 1.7;
}

.demoend-q {
  margin: 0;
  max-width: 540px;
  text-align: left;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--surface) 82%, var(--text));
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding-left: 14px;
  line-height: 1.8;
}

.compose-page .editor-heading,
.edit-unpublished .editor-heading {
  margin-bottom: 8px;
  font-weight: 600;
}

.edit-unpublished {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 28px;
}

/* 失焦后正文仍限制在编辑器高度内，超出时显示滚动条。Markdown 源码打开时另按内容撑开。 */
.edit-unpublished .rich-editor:not(:focus-within) .rich-editor__body {
  overflow-x: hidden;
  overflow-y: auto;
}
.edit-unpublished .rich-editor.is-markdown-source .rich-editor__body,
.edit-unpublished .rich-editor.is-html-expanded .rich-editor__body {
  flex: none;
  min-height: auto;
  max-height: none;
  overflow: visible;
}

.edit-unpublished .markdown-block__source,
.edit-unpublished .markdown-block__preview pre {
  overscroll-behavior: contain;
}

.edit-unpublished__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.edit-unpublished__title::before {
  content: '';
  width: 4px;
  height: 0.86em;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.edit-unpublished__banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-control);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
}

.edit-unpublished__banner-ic {
  flex: none;
  color: var(--text-muted);
}

.edit-unpublished__banner-copy {
  flex: 1;
  min-width: 0;
}

.edit-unpublished__banner-copy strong {
  display: block;
  font-size: 14px;
}

.edit-unpublished__banner-copy p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.edit-unpublished .info-facts {
  margin: 0;
}

.edit-unpublished__card-h {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.edit-unpublished__card-h svg {
  flex: none;
  color: var(--accent);
}

.edit-unpublished .join-ev-view {
  align-self: center;
  position: relative;
  z-index: 1;
}

.edit-unpublished__price-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.edit-unpublished__price-row > .ui-field {
  display: grid;
  grid-template-rows: 22px 42px auto;
  align-content: start;
}
.edit-unpublished__price-row .ui-field__label-row,
.edit-unpublished__price-row .ui-field__heading {
  align-items: center;
  height: 22px;
  min-height: 0;
}
.edit-unpublished__price-row .ui-field__required {
  font-size: 13px;
  line-height: 1;
}
.edit-unpublished__price-row .ui-input,
.edit-unpublished__price-row .ui-field__control-wrap.is-affixed {
  height: 42px;
  min-height: 42px;
}
.edit-unpublished__price-row .ui-input {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 40px;
}
.edit-unpublished__price-row .ui-field__control-wrap.is-affixed .ui-input {
  height: 100%;
  min-height: 0;
  padding: 0;
  line-height: 40px;
}
.edit-unpublished__price-row .ui-field__addon-left,
.edit-unpublished__price-row .ui-field__addon-right {
  line-height: 1;
}

.edit-unpublished__gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.edit-unpublished__meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
}

.edit-unpublished__lang-pick {
  margin-top: 8px;
}

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

.edit-unpublished__checks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 20px;
}

.edit-unpublished__tag-modal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.edit-unpublished__chips .ui-field {
  min-width: 160px;
  flex: 1;
}

.edit-unpublished__shots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.edit-unpublished__slot-wrap {
  position: relative;
  width: 132px;
  height: 84px;
}

.edit-unpublished__slot-wrap.is-wide {
  width: min(240px, 100%);
  height: 135px;
}

.edit-unpublished__slot-wrap.is-cover .edit-unpublished__slot {
  border-style: solid;
  border-color: var(--accent);
}

.edit-unpublished__slot-wrap.is-filled {
  touch-action: none;
}

.edit-unpublished__slot-wrap.is-filled .edit-unpublished__slot {
  cursor: grab;
}

.edit-unpublished__slot-wrap.is-dragging {
  opacity: 0.45;
}

.edit-unpublished__slot-wrap.is-dragging,
.edit-unpublished__slot-wrap.is-dragging .edit-unpublished__slot {
  cursor: grabbing;
}

.edit-unpublished__slot-wrap.is-drop .edit-unpublished__slot {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.edit-unpublished__slot-move {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  width: 10px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #e8b923;
  box-shadow: none;
  cursor: pointer;
}

.edit-unpublished__slot-move.is-left {
  left: 4px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.edit-unpublished__slot-move.is-right {
  right: 4px;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

.edit-unpublished__slot-cover-pick {
  position: absolute;
  left: 2px;
  bottom: 2px;
  z-index: 1;
  max-width: calc(100% - 8px);
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-raised) 58%, transparent);
  color: var(--text);
  font-size: 10px;
  line-height: 14px;
  cursor: pointer;
}

.edit-unpublished__slot-cover-pick.is-on {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  color: var(--accent-ink);
}

.edit-unpublished__slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

.edit-unpublished__slot.is-add {
  width: 132px;
  height: 84px;
}

.edit-unpublished__slot img,
.edit-unpublished__slot video,
.edit-unpublished__slot .cover,
.edit-unpublished__slot .forum-cover,
.edit-unpublished__slot .ui-smart-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.edit-unpublished__slot-carousel {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-raised) 58%, transparent);
  color: var(--text);
  cursor: pointer;
}
.edit-unpublished__slot-carousel.is-on {
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  color: var(--accent-ink);
}
.edit-unpublished__slot-wrap.is-carousel-off .edit-unpublished__slot img,
.edit-unpublished__slot-wrap.is-carousel-off .edit-unpublished__slot .ui-smart-img {
  opacity: 0.45;
}

@media (hover: hover) and (pointer: fine) {
  .edit-unpublished__slot-cover-pick:not(.is-on),
  .edit-unpublished__slot-x,
  .edit-unpublished__slot-move {
    opacity: 0;
    pointer-events: none;
  }
  .edit-unpublished__slot-wrap:hover .edit-unpublished__slot-cover-pick,
  .edit-unpublished__slot-wrap:focus-within .edit-unpublished__slot-cover-pick,
  .edit-unpublished__slot-wrap:hover .edit-unpublished__slot-x,
  .edit-unpublished__slot-wrap:focus-within .edit-unpublished__slot-x,
  .edit-unpublished__slot-wrap:hover .edit-unpublished__slot-move,
  .edit-unpublished__slot-wrap:focus-within .edit-unpublished__slot-move {
    opacity: 1;
    pointer-events: auto;
  }
}

.edit-unpublished__slot-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-raised) 58%, transparent);
  color: var(--text);
  cursor: pointer;
}

.edit-unpublished__slot-move:hover,
.edit-unpublished__slot-move:focus-visible {
  background: #f0c84a;
  border: 0;
  box-shadow: none;
}

.edit-unpublished__slot-move:active {
  transform: translateY(-50%);
}

.edit-unpublished__slot-x:hover,
.edit-unpublished__slot-x:focus-visible,
.edit-unpublished__slot-carousel:hover,
.edit-unpublished__slot-carousel:focus-visible,
.edit-unpublished__slot-cover-pick:hover,
.edit-unpublished__slot-cover-pick:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--accent);
}

.edit-unpublished__shot-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-muted);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 28%, transparent);
  outline: 1px solid var(--accent);
  opacity: 0.92;
}

.edit-unpublished__shot-ghost img,
.edit-unpublished__shot-ghost .cover,
.edit-unpublished__shot-ghost .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.edit-unpublished__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font: inherit;
  cursor: pointer;
}

.edit-unpublished__foot-card > .ui-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.edit-unpublished__foot-card .ui-choice {
  flex-wrap: wrap;
  min-height: 0;
  max-width: 100%;
  margin-bottom: 14px;
}

.mod-help-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}

.mod-help-row .ui-choice {
  flex-wrap: nowrap;
  width: auto;
  margin-bottom: 0;
  white-space: nowrap;
}

.mod-help-row__q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 28%, var(--surface-raised));
  color: var(--text-muted);
  cursor: default;
  flex-shrink: 0;
  line-height: 0;
}

.mod-help-row__q span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-0.5px);
}

.mod-help-row__q:hover {
  background: color-mix(in srgb, var(--text-muted) 42%, var(--surface-raised));
  color: var(--text);
}

.edit-unpublished__foot-card.ui-card {
  overflow: visible;
}

.edit-unpublished__consent-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  margin-bottom: 14px;
  max-width: none;
}

.edit-unpublished__foot-card .edit-unpublished__consent-row > .ui-choice {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  width: auto;
  max-width: none;
  min-width: max-content;
  margin-bottom: 0;
  white-space: nowrap;
}

.edit-unpublished__consent-row > .ui-choice > span {
  min-width: max-content;
  white-space: nowrap;
}

.edit-unpublished__consent-row .mod-help-row,
.edit-unpublished__consent-row .mod-help-row .ui-choice {
  width: auto;
  flex: 0 0 auto;
  margin-bottom: 0;
  white-space: nowrap;
}

.edit-unpublished__foot-card .mod-help-row {
  margin-bottom: 0;
}

.edit-unpublished__data-card > .ui-card__body {
  padding: 0 20px;
}

.edit-unpublished__data-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.edit-unpublished__data-stats {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
}

.edit-unpublished__data-card .ui-accordion__a {
  color: inherit;
}

.edit-unpublished__data-card .ui-accordion__q {
  padding: 16px 2px;
}

.edit-unpublished__data-card .ui-accordion__a > * {
  padding-bottom: 20px;
}

.edit-unpublished__data-packs {
  padding: 0 2px 2px;
}

.edit-unpublished__data-hint {
  margin: 0 0 8px;
}

.edit-unpublished__data-item {
  align-items: center;
  flex-wrap: wrap;
}

.edit-unpublished__data-item.is-editing {
  flex-wrap: wrap;
}

.edit-unpublished__data-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.edit-unpublished__data-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.edit-unpublished__data-flags {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.edit-unpublished__data-acts {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.edit-unpublished__data-item .ui-field {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}

.edit-unpublished__foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  width: 100%;
}

.edit-unpublished__foot-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.audit-hit-modal > .ui-card__body {
  padding: 14px 18px 18px;
  gap: 0;
}
.audit-hit__table {
  font-size: 14px;
  line-height: 1.45;
}
.audit-hit__table th,
.audit-hit__table td {
  padding: 10px 14px;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
  background: transparent;
}
.audit-hit__table th {
  width: 6.5em;
  font-size: 14px;
  background: transparent;
}
.audit-hit__table tbody tr {
  cursor: default;
}
.audit-hit__table tbody tr:hover {
  background: transparent;
}
.audit-hit__copy {
  width: 28px;
  padding-right: 4px;
  text-align: right;
}
.audit-hit__copy .ui-icon-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border: 0;
  opacity: 0;
}
.audit-hit__table tr:hover .audit-hit__copy .ui-icon-btn,
.audit-hit__copy .ui-icon-btn:focus-visible {
  opacity: 1;
}
.audit-hit__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.audit-hit__list p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.edit-unpublished__foot-note {
  margin: 0;
  flex: none;
  white-space: nowrap;
  text-align: right;
}

.forum-mobile .edit-unpublished__price-row,
.forum-mobile .edit-unpublished__meta-grid,
.forum-mobile .edit-unpublished__ver-list--cols {
  grid-template-columns: 1fr;
}

@media (max-width: 720px) {
  .edit-unpublished__price-row,
  .edit-unpublished__meta-grid,
  .edit-unpublished__ver-list--cols {
    grid-template-columns: 1fr;
  }
}

.forum-mobile .edit-unpublished__foot-note {
  text-align: left;
  white-space: normal;
}

.edit-unpublished--template .edit-unpublished__card-h {
  color: var(--accent-dark);
}

.edit-unpublished__ver-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.edit-unpublished__ver-list--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.edit-unpublished__ver-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-unpublished__ver-row .ui-textarea {
  min-height: 0;
  resize: vertical;
}

.edit-unpublished__ver-meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.edit-unpublished__ver-list + .ui-field__hint {
  margin-top: 10px;
}

.edit-unpublished__work-row,
.edit-unpublished__plugin-row,
.edit-unpublished__tutorial-row {
  display: grid;
  gap: 10px 12px;
  align-items: start;
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr) auto;
}

.edit-unpublished__sample-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.edit-unpublished__sample-grid > .edit-unpublished__work-row {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "link remove"
    "ref ref";
}

.edit-unpublished__sample-grid > .edit-unpublished__work-row > .ui-field {
  grid-area: link;
  min-width: 0;
}

.edit-unpublished__sample-grid > .edit-unpublished__work-row > .ui-btn-magnet {
  grid-area: remove;
}

.edit-unpublished__sample-grid > .edit-unpublished__work-row > .edit-unpublished__ref {
  grid-area: ref;
  margin-top: 0;
}

.edit-unpublished__plugin-row {
  grid-template-areas:
    "link name remove"
    "kind . .";
}

.edit-unpublished__plugin-row > :nth-child(1) {
  grid-area: link;
}

.edit-unpublished__plugin-row > :nth-child(2) {
  grid-area: name;
}

.edit-unpublished__plugin-kind {
  grid-area: kind;
}

.edit-unpublished__work-row > .ui-btn-magnet,
.edit-unpublished__plugin-row > .ui-btn-magnet,
.edit-unpublished__tutorial-row > .ui-btn-magnet,
.edit-unpublished__work-row > .edit-unpublished__ref {
  margin-top: 28px;
}

.edit-unpublished__plugin-row > .ui-btn-magnet {
  grid-area: remove;
}

.edit-unpublished__ref {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.forum-mobile .edit-unpublished__work-row,
.forum-mobile .edit-unpublished__plugin-row,
.forum-mobile .edit-unpublished__tutorial-row {
  grid-template-columns: 1fr;
}

.forum-mobile .edit-unpublished__sample-grid {
  grid-template-columns: 1fr;
}

.forum-mobile .edit-unpublished__sample-grid > .edit-unpublished__work-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.forum-mobile .edit-unpublished__plugin-row {
  grid-template-areas:
    "link"
    "name"
    "kind"
    "remove";
}

.forum-mobile .edit-unpublished__work-row > .ui-btn-magnet,
.forum-mobile .edit-unpublished__plugin-row > .ui-btn-magnet,
.forum-mobile .edit-unpublished__tutorial-row > .ui-btn-magnet,
.forum-mobile .edit-unpublished__work-row > .edit-unpublished__ref {
  margin-top: 0;
}

.forum-mobile .edit-unpublished__sample-grid > .edit-unpublished__work-row > .ui-btn-magnet {
  margin-top: 28px;
}

.compose-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/*
 * 宽屏发帖栏比详情栏窄 100px（220 对 --post-side 320），卡片左右内边距又多 20px。
 * 预览块净宽会多出 60px。按这个差额收窄，和详情里同一块一样大。
 * 1280 以下详情栏是 260px，两边已经对齐，不再收。
 */
@media (min-width: 1281px) {
  .compose-page .html-block {
    --html-block-trim: 60px;
  }
}
.forum-mobile .compose-page {
  gap: 0;
}
.compose-page > .post-chrome,
.search-page__back > .post-chrome {
  margin-bottom: 0;
}
/* 小号幽灵按钮自带左右 12px 内边距，箭头会比面包屑和结果列表的左缘靠右。 */
.search-page__back > .post-chrome .ui-btn,
.search-page > .post-chrome .ui-btn {
  padding-left: 0;
}
.forum-mobile .compose-page > .post-chrome {
  margin-bottom: var(--space-1);
}

.compose-page__card-h {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
}

.compose-page__card-h svg {
  flex: none;
  color: var(--accent);
}

.compose-page__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.compose-page .mod-help-row .ui-choice {
  font-size: 13px;
}

.compose-page .col-side .ui-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compose-page__publish {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.compose-page__publish-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compose-page__publish-row > .ui-btn,
.compose-page__publish-row > .ui-btn-magnet {
  flex: 1;
  min-width: 0;
}

.audit-alert-btn.ui-icon-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--danger);
}
.audit-alert-btn.ui-icon-btn:hover:not(:disabled),
.audit-alert-btn.ui-icon-btn:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--danger);
  transform: none;
  box-shadow: none;
}
.audit-alert-btn.ui-hover-glow::before,
.audit-alert-btn.ui-hover-glow::after {
  content: none;
}
.audit-alert-btn__mark {
  display: block;
  color: var(--danger);
  transform-origin: 50% 55%;
  animation: audit-alert-mark 1.35s ease-in-out infinite;
}
@keyframes audit-alert-mark {
  0%, 38%, 100% {
    transform: translateX(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  6% { transform: translateX(-2px) rotate(-14deg) scale(1.04); opacity: 1; }
  12% { transform: translateX(2px) rotate(14deg) scale(1.06); opacity: 1; }
  18% { transform: translateX(-2px) rotate(-10deg) scale(1.04); opacity: 1; }
  24% { transform: translateX(2px) rotate(8deg) scale(1); opacity: 1; }
  32% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  68% {
    transform: translateX(0) rotate(0deg) scale(1.16);
    opacity: 0.42;
  }
}
@media (prefers-reduced-motion: reduce) {
  .audit-alert-btn__mark { animation: none; }
}

.search-page {
  position: relative;
}
.search-page.cols {
  row-gap: 8px;
  align-content: start;
  grid-template-rows: auto auto;
}

.search-page__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-page.cols > .cols-lead {
  grid-row: 1;
}

.search-page.cols > .search-main,
.search-page.cols > .col-side {
  grid-row: 2;
  align-self: start;
}

.search-page.cols > .search-main {
  grid-column: 1;
}

.search-page > .ui-search-input {
  margin-bottom: 16px;
}

.search-page__back {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.forum-mobile .search-page__back {
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.search-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.search-breadcrumb__link.ui-btn {
  min-height: 0;
  height: auto;
  padding: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.search-breadcrumb__link.ui-btn:hover {
  color: var(--accent-dark);
  background: transparent;
}

.search-breadcrumb__sep {
  flex: none;
  color: var(--text-muted);
  opacity: 0.7;
}

.search-breadcrumb__current {
  color: var(--text);
  font-weight: 600;
}

.search-kind-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.search-kind-meta .search-main__count {
  margin: 0;
}

.search-kind-meta__page {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.search-kind-pager {
  margin-top: 8px;
  padding: 8px 8px 4px;
}

.search-main__count {
  display: block;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.search-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-section .ui-card__header {
  padding: 12px 16px;
}

.search-section .tb thead th {
  background: var(--surface-raised);
}

/* 搜索列表表头暂时不显示。thead 标记保留，列宽仍由 colgroup 决定。 */
.search-section .tb thead {
  display: none;
}

/* 搜索模板表只有模板和收藏。收藏固定在右侧，其余宽度给模板列。 */
.search-section .tb-tpl:not(.tb-oss) {
  width: 100%;
}
.search-section .tb-tpl:not(.tb-oss) col.tb-tpl__fav,
.search-section .tb-tpl:not(.tb-oss) th.tb-tpl__fav,
.search-section .tb-tpl:not(.tb-oss) td.tb-tpl__fav {
  width: 5rem;
}

/* 搜索里的开源工程作者列与创作经验分享同宽。板块列表仍是 8rem。 */
.search-section .tb-oss.tb-tpl col.tb-talk__author,
.search-section .tb-oss.tb-tpl th:nth-child(2),
.search-section .tb-oss.tb-tpl td:nth-child(2) {
  width: 11.25rem;
  padding-left: 10px;
  padding-right: 18px;
}

/* 搜索里第二列已是作者，不再沿用回复列的居中。 */
.search-section .tb.tb-discover thead th:nth-child(2) {
  padding-left: 10px;
  padding-right: 18px;
  text-align: left;
}

/* 作者名在列宽里换行，不截成省略号。 */
.search-section .tb-oss td.tb-talk__author {
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
}
/* 头像对齐昵称整块的垂直中线：一行时与文字居中，折成两行时居中在两行之间。 */
.search-section .tb-oss td.tb-talk__author .tb-discover__person,
.search-section .tb-discover td.tb-discover__author .tb-discover__person,
.search-section .tb-oss .tb-discover__identity {
  align-items: center;
  min-width: 0;
}
.search-section .tb-oss .tb-discover__identity,
.search-section .tb-discover td.tb-discover__author .tb-discover__person {
  flex: 1 1 auto;
}
.search-section .tb-oss .ui-avatar,
.search-section .tb-discover td.tb-discover__author .ui-avatar {
  flex: none;
}
.search-section .tb-oss .tb-discover__who,
.search-section .tb-discover td.tb-discover__author .tb-discover__who {
  flex: 1 1 auto;
  min-width: 0;
}
.search-section .tb-oss .tb-discover__nick,
.search-section .tb-discover td.tb-discover__author .tb-discover__nick {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  line-clamp: unset;
}
.search-section .ui-card__body {
  padding: 0;
}

.search-section .ggrid {
  padding: 8px 4px 12px;
}

/* 复用点评与杂谈表的窄屏收起，但不在搜索卡片里再套一层板块面板。 */
.search-section .search-section__talk.panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

.search-section__cards > .ui-poster-card + .ui-poster-card {
  margin-top: 12px;
}

.search-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.search-section__title .ic,
.search-section__title > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.search-section__title .ic {
  color: var(--accent-dark);
}

.search-section__title .ui-btn-magnet {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: none;
  margin-left: auto;
  line-height: 1;
}

.search-section__more.ui-btn {
  margin-left: 0;
  min-height: 0;
  height: auto;
  padding: 1px 0;
  border-width: 0;
  overflow: visible;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* 按钮文字行高是 1，12px 行框装不下汉字，再被按钮裁切。 */
.search-section__more.ui-btn > span:not(.ui-btn__icon) {
  line-height: 1.35;
}

.search-section__more.ui-btn:hover {
  color: var(--accent-dark);
  background: transparent;
}

.search-page .search-hit {
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}

.search-page .search-hit:last-child {
  border-bottom: 0;
}

.search-page .search-hit:hover,
.search-page .search-hit.is-active {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--radius-control);
}

.search-hit__cover.cover {
  width: 128px;
  height: auto;
  flex: none;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-control);
  overflow: hidden;
  background-color: var(--surface-muted);
}

.search-hit__cover .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.search-hit__cover.cover--empty,
.search-hit__cover.cover--pending,
.search-hit__cover.cover--reviewing {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.search-hit__avatar.ui-avatar {
  flex: none;
  align-self: center;
  border-radius: 50%;
}

.search-hit .ui-list-item__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: center;
  flex: 1;
  min-width: 0;
}

.search-hit .ui-list-item__name {
  display: flex;
  align-items: center;
  min-width: 0;
  line-height: 1;
}

.search-hit__title {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  line-height: 1;
}

.search-hit__title .ui-badge {
  margin-left: 8px;
}

.search-hit .ui-list-item__sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
}

.search-hit__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex: none;
  min-width: 7.5em;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  text-align: right;
}

.search-hit__author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  margin-top: 4px;
  text-align: left;
  font-family: var(--font-body, var(--font-family));
  font-weight: 400;
}

.search-hit__author > * + * {
  margin-left: 6px;
}

.search-hit__stat {
  font-variant-numeric: tabular-nums;
}

.search-hit__price {
  color: var(--accent-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.search-hit__price .price-dual__sep {
  margin: 0 0.72em;
  color: color-mix(in srgb, var(--text-muted) 42%, transparent);
  font-weight: 300;
}
.search-hit__price .price-dual__flower {
  font-weight: 500;
  color: var(--text-muted);
}

.search-hit__tag {
  flex: none;
  min-width: 4.8em;
  justify-content: center;
  margin-top: 2px;
}

.search-hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 6px;
}

.search-page .col-side .search-hot-tags .ui-chip {
  min-height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

.search-tpl-cover.cover,
.search-tpl-cover.forum-cover {
  width: 32px;
  height: 32px;
  flex: none;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.forum-mobile .search-page .search-hit__meta {
  min-width: 0;
}

.post-attach,
.post-attach-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-attach {
  margin-top: 16px;
}

.post-attach__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.post-attach__label svg {
  flex: none;
  color: var(--accent);
}

.post-attach__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-attach__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 5px 12px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-muted) 24%, var(--surface-raised));
  color: inherit;
  text-align: left;
  text-decoration: none;
}

a.post-attach__item:hover,
a.post-attach__item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: inherit;
}

.post-attach__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.post-attach__text {
  display: grid;
  min-width: 0;
  flex: 1;
}

.post-attach__name {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-attach__meta {
  font-size: 12px;
  color: var(--text-muted);
}

.post-attach__act,
.post-attach__dl {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent-dark);
}

.post-attach__empty {
  margin: 0;
}

.post-attach-field .post-attach__list {
  margin-bottom: 2px;
}

.markdown-block {
  margin: 12px 0;
  overflow: hidden;
}
.rich-editor .markdown-block {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: var(--radius-control);
}
.rich-editor .markdown-block__preview,
.rich-editor .markdown-block .markdown-block__source {
  padding: 8px 12px 12px;
}
.markdown-block.ProseMirror-selectednode,
.markdown-block:focus,
.markdown-block:focus-visible,
.react-renderer.node-markdownBlock.ProseMirror-selectednode,
.react-renderer.node-markdownBlock:focus,
.react-renderer.node-markdownBlock:focus-visible {
  outline: none;
}
.markdown-block__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.markdown-block__remove-slot {
  margin-left: auto;
}
.markdown-block__remove.ui-btn {
  min-height: 0;
  padding: 0 2px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}
.markdown-block__remove.ui-btn:hover {
  color: var(--text);
  background: transparent;
}
.markdown-block .ui-field {
  margin: 0;
  padding: 0;
}
.markdown-block .markdown-block__source {
  width: 100%;
  min-height: 8em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--type-body);
  line-height: var(--type-leading-body);
  resize: vertical;
}
.markdown-block .markdown-block__source:focus {
  border: 0;
  box-shadow: none;
}
.markdown-block__preview {
  color: var(--text);
  font-size: var(--type-body);
  line-height: var(--type-leading-body);
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.markdown-block__preview * {
  -webkit-user-select: text;
  user-select: text;
}
.markdown-block__preview > :first-child { margin-top: 0; }
.markdown-block__preview > :last-child { margin-bottom: 0; }
.markdown-block__preview h1,
.markdown-block__preview h2,
.markdown-block__preview h3,
.markdown-block__preview h4,
.markdown-block__preview h5,
.markdown-block__preview h6 {
  margin: 18px 0 8px;
  font-weight: 600;
  line-height: var(--type-leading-title);
}
.markdown-block__preview h1 { font-size: 1.5em; }
.markdown-block__preview h2 { font-size: 1.25em; }
.markdown-block__preview h3 { font-size: 1.1em; }
.markdown-block__preview h4 { font-size: 1em; }
.markdown-block__preview h5,
.markdown-block__preview h6 { font-size: 0.95em; }
.markdown-block__preview p,
.markdown-block__preview ul,
.markdown-block__preview ol { margin: 10px 0; }
.markdown-block__preview ul,
.markdown-block__preview ol { padding-left: 1.4em; }
.markdown-block__preview ul ul,
.markdown-block__preview ol ol,
.markdown-block__preview ul ol,
.markdown-block__preview ol ul { margin: 4px 0; }
.markdown-block__preview hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.markdown-block__preview del,
.markdown-block__preview s { text-decoration: line-through; }
.markdown-block__preview li:has(> input[type='checkbox']) { list-style: none; margin-left: -1.2em; }
.markdown-block__preview section[data-footnotes] {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.92em;
  color: var(--text-muted);
}
.markdown-block__preview .markdown-block__mermaid {
  margin: 16px 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.markdown-block__preview .markdown-block__mermaid svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.markdown-block__preview blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line);
  color: var(--text-muted);
}
.markdown-block__preview code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.92em;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
}
.markdown-block__preview pre {
  margin: 12px 0;
  padding: 12px 14px;
  overflow: auto;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
}
.markdown-block__preview pre code {
  padding: 0;
  background: none;
}
.markdown-block__preview table {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
}
.markdown-block__preview th,
.markdown-block__preview td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: start;
}
.markdown-block__preview th { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.markdown-block__preview a { color: var(--accent); }
.markdown-block__preview img { max-width: 100%; height: auto; }
.markdown-block__preview input[type='checkbox'] { margin-right: 6px; }
.markdown-block__preview mark {
  padding: 0 0.2em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--warning) 28%, var(--surface));
  color: inherit;
}
.markdown-block__preview sub,
.markdown-block__preview sup { font-size: 0.75em; }
.markdown-block__preview dl { margin: 12px 0; }
.markdown-block__preview dt { font-weight: 600; }
.markdown-block__preview dd { margin: 4px 0 10px 1.4em; color: var(--text-muted); }
.markdown-block__preview h1,
.markdown-block__preview h2,
.markdown-block__preview h3,
.markdown-block__preview h4,
.markdown-block__preview h5,
.markdown-block__preview h6 { scroll-margin-top: 80px; }
.markdown-block__preview .katex-display {
  margin: 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.markdown-block__preview .markdown-alert {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-control);
  background: var(--surface);
}
.markdown-block__preview .markdown-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-weight: 600;
}
.markdown-block__preview .markdown-alert .octicon { fill: currentColor; }
.markdown-block__preview .markdown-alert-note { border-left-color: var(--info); }
.markdown-block__preview .markdown-alert-note .markdown-alert-title { color: var(--info); }
.markdown-block__preview .markdown-alert-tip { border-left-color: var(--success); }
.markdown-block__preview .markdown-alert-tip .markdown-alert-title { color: var(--success); }
.markdown-block__preview .markdown-alert-important { border-left-color: #7c5cbf; }
.markdown-block__preview .markdown-alert-important .markdown-alert-title { color: #7c5cbf; }
.markdown-block__preview .markdown-alert-warning { border-left-color: var(--warning); }
.markdown-block__preview .markdown-alert-warning .markdown-alert-title { color: var(--warning); }
.markdown-block__preview .markdown-alert-caution { border-left-color: var(--danger); }
.markdown-block__preview .markdown-alert-caution .markdown-alert-title { color: var(--danger); }
.markdown-block__preview .hljs-comment,
.markdown-block__preview .hljs-quote { color: var(--text-muted); }
.markdown-block__preview .hljs-keyword,
.markdown-block__preview .hljs-selector-tag,
.markdown-block__preview .hljs-addition { color: var(--accent-dark); }
.markdown-block__preview .hljs-number,
.markdown-block__preview .hljs-string,
.markdown-block__preview .hljs-meta .hljs-string,
.markdown-block__preview .hljs-literal,
.markdown-block__preview .hljs-doctag,
.markdown-block__preview .hljs-regexp { color: var(--success); }
.markdown-block__preview .hljs-title,
.markdown-block__preview .hljs-section,
.markdown-block__preview .hljs-name,
.markdown-block__preview .hljs-selector-id,
.markdown-block__preview .hljs-selector-class { color: var(--info); }
.markdown-block__preview .hljs-attribute,
.markdown-block__preview .hljs-attr,
.markdown-block__preview .hljs-variable,
.markdown-block__preview .hljs-template-variable,
.markdown-block__preview .hljs-class .hljs-title,
.markdown-block__preview .hljs-type { color: var(--warning); }
.markdown-block__preview .hljs-symbol,
.markdown-block__preview .hljs-bullet,
.markdown-block__preview .hljs-link { color: var(--accent); }
.markdown-block__preview .hljs-deletion { color: var(--danger); }
.markdown-block__preview .hljs-built_in,
.markdown-block__preview .hljs-builtin-name { color: var(--info); }
.markdown-block__excerpt { color: var(--text-muted); }

.mod-image-menu {
  position: fixed;
  z-index: 10050;
  min-width: 148px;
  padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow);
}
.mod-image-menu .ui-btn {
  justify-content: flex-start;
}

.post-support.creator-support {
  min-width: 0;
  margin-top: 28px;
}
.creator-support {
  --creator-support-card-h: 100px;
  --creator-support-summary-line: 18px;
  --creator-support-oss-cover-w: 34%;
  --creator-support-oss-inset: 10px;
  --creator-support-oss-cover-radius: 4px;
  --creator-support-oss-cover-h: calc(var(--creator-support-card-h) - 2 * var(--creator-support-oss-inset));
  --creator-support-oss-cover-slot-w: calc(var(--creator-support-oss-cover-h) * 16 / 9);
}
.creator-support__head {
  margin-bottom: 8px;
  padding: 2px 2px 0;
}
.creator-support h3 {
  margin: 0 0 4px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
}
.creator-support__frame {
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised, #fff);
}
.creator-support__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.creator-support__frame.has-rail .creator-support__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}
.creator-support__frame.is-expanded .creator-support__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.creator-support__card {
  display: flex;
  min-width: 0;
  height: var(--creator-support-card-h);
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.creator-support__card:hover,
.creator-support__card:focus-visible {
  border-color: var(--line-strong, var(--line));
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 0.06));
}
.creator-support__card--oss {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 6px;
  padding: var(--creator-support-oss-inset);
  box-sizing: border-box;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
}
.creator-support__card--oss:hover,
.creator-support__card--oss:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-raised));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}
.creator-support__card--post {
  padding: 10px;
}
.creator-support__card--post .creator-support__body {
  height: 100%;
  justify-content: flex-start;
}
.creator-support__card--oss .creator-support__cover.cover {
  grid-column: 1;
  grid-row: 1;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--creator-support-oss-cover-slot-w);
  max-width: var(--creator-support-oss-cover-slot-w);
  min-width: 0;
  height: var(--creator-support-oss-cover-h);
  aspect-ratio: 16 / 9;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--creator-support-oss-cover-radius);
  background: transparent;
  background-color: transparent;
}
.creator-support__card--oss .creator-support__cover.cover.cover-1,
.creator-support__card--oss .creator-support__cover.cover.cover-2,
.creator-support__card--oss .creator-support__cover.cover.cover-3,
.creator-support__card--oss .creator-support__cover.cover.cover-4,
.creator-support__card--oss .creator-support__cover.cover.cover-5 {
  background: transparent;
}
.creator-support__card--oss .creator-support__cover .forum-cover,
.creator-support__card--oss .creator-support__cover .cover__incoming {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: unset;
  object-fit: cover;
  object-position: center;
  background-color: transparent;
  border-radius: var(--creator-support-oss-cover-radius);
}
.creator-support__card--oss .creator-support__cover.cover--empty,
.creator-support__card--oss .creator-support__cover.cover--pending,
.creator-support__card--oss .creator-support__cover.cover--reviewing {
  width: var(--creator-support-oss-cover-slot-w);
  background-color: transparent;
  background-size: auto 58%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--creator-support-oss-cover-radius);
}
.creator-support__card--oss .creator-support__body {
  grid-column: 2;
  grid-row: 1;
  padding: 0 4px 0 2px;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  min-width: 0;
}
.creator-support__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  flex: 1;
}
.creator-support__kind {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.creator-support__card--oss .creator-support__kind {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.creator-support__oss-name {
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.creator-support__card--oss .creator-support__oss-name {
  font-size: 12px;
  line-height: 1.32;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.creator-support__title {
  flex: 0 0 auto;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.creator-support__title .title-sticker {
  vertical-align: -0.15em;
}
.creator-support__author {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  min-height: 14px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-muted);
  min-width: 0;
}
.creator-support__author .ui-avatar.ui-avatar--sm {
  width: 14px;
  height: 14px;
  font-size: 8px;
}
.creator-support__author > span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.creator-support__summary {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 10px;
  line-height: var(--creator-support-summary-line);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: calc(var(--creator-support-summary-line) * 3);
}
.creator-support__summary.talk-excerpt {
  white-space: normal;
}
.creator-support__card--post.creator-support__card--with-author .creator-support__summary {
  margin-top: 4px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: calc(var(--creator-support-summary-line) * 2);
}
.creator-support__card--post:not(.creator-support__card--with-author) .creator-support__summary {
  margin-top: 5px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: calc(var(--creator-support-summary-line) * 3);
}
.creator-support__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  height: var(--creator-support-card-h);
  min-width: 48px;
  padding: 6px 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.creator-support__rail:hover,
.creator-support__rail:focus-visible {
  color: var(--text);
  border-color: var(--line-strong, var(--line));
  background: var(--surface);
}
.creator-support__rail-count {
  font-weight: 600;
  color: var(--text);
}
.creator-support__foot {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 6px;
}
.forum-mobile .creator-support__frame {
  padding: 22px 20px;
}
.forum-mobile .creator-support__grid,
.forum-mobile .creator-support__frame.has-rail .creator-support__grid,
.forum-mobile .creator-support__frame.is-expanded .creator-support__grid {
  grid-template-columns: 1fr;
  gap: 20px;
}
.forum-mobile .creator-support__rail {
  flex-direction: row;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 6px 10px;
  gap: 4px;
  font-size: 11px;
  line-height: 1.3;
  border-radius: calc(var(--radius-sm) - 2px);
}
.forum-mobile .creator-support__rail-count {
  font-size: 11px;
  font-weight: 600;
}
.forum-mobile .creator-support {
  --creator-support-card-h: 100px;
  --creator-support-oss-cover-w: 32%;
}
.linked-game {
  margin-top: 0;
}
.linked-game h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}
.linked-game__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.linked-game__card .cover {
  width: 100%;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.linked-game__card .cover .forum-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.linked-game__card > strong {
  margin: 0;
  padding: 12px 14px 0;
  font-size: 15px;
  line-height: 1.45;
}
.linked-game__acts {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
}
.linked-work-empty {
  margin: 0;
  color: var(--text-muted, #8e8e93);
  font-size: 14px;
  line-height: 1.5;
}
.linked-work-card > .ui-card__body {
  padding-top: 12px;
  padding-bottom: 12px;
}
.linked-work-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.linked-work-row > .refcard {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  margin: 0;
  min-width: 0;
}
.linked-work-row > .refcard.linked-work-row__oss {
  flex: 0 1 50%;
  width: 50%;
  max-width: 50%;
}
.linked-work-row > .refcard.refcard--expired {
  flex: none;
  width: auto;
  max-width: 100%;
  border: 0;
  background: transparent;
}
.linked-work-row__sync {
  flex: none;
}

.linked-sync {
  width: 100%;
  margin: 12px 0;
  table-layout: fixed;
}
.linked-sync th,
.linked-sync td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.linked-sync tbody tr,
.linked-sync tbody tr:hover {
  cursor: default;
  background: transparent;
}
.ui-modal.linked-sync-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ui-modal.linked-sync-modal > .ui-card__body {
  min-height: 0;
  overflow: auto;
}
html[data-boot-surface='mobile'] .ui-modal.game-link-bind-modal {
  width: calc(100dvw - 32px) !important;
  max-width: calc(100dvw - 32px) !important;
}
.ui-modal.game-link-bind-modal > .ui-card__header {
  position: relative;
  justify-content: center;
  border-bottom: 0;
  padding: 8px 40px;
}
.ui-modal.game-link-bind-modal > .ui-card__header .ui-card__title {
  text-align: center;
  flex: none;
}
.ui-modal.game-link-bind-modal > .ui-card__header > .ui-modal__tools {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.ui-modal.game-link-bind-modal > .ui-card__body {
  padding-top: 8px;
}
.ui-modal.game-link-bind-modal .ui-content-loading {
  min-height: 168px;
}
.ui-modal.game-link-bind-modal > .ui-card__footer {
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 8px 20px 22px;
}
.game-link-bind {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.game-link-bind__row {
  display: grid;
  grid-template-columns: 4.75em minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
}
.game-link-bind__label {
  font-size: 13px;
  color: var(--text);
}
.game-link-bind__locked {
  min-height: 36px;
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.game-link-bind__locked--hidden {
  box-sizing: border-box;
  min-height: 40px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 9px);
  color: var(--text-muted);
  cursor: default;
  user-select: none;
  overflow-wrap: anywhere;
}
.game-link-bind__rule {
  height: 1px;
  background: var(--line);
}
.game-link-bind__row--posts {
  align-items: start;
}
.game-link-bind__row--start {
  align-items: center;
  min-height: 42px;
}
.game-link-bind__start-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  min-height: 42px;
}
.game-link-bind-modal .game-link-bind__start-mode.ui-segmented {
  flex: 0 0 auto;
  padding: 2px;
  gap: 2px;
}
.game-link-bind-modal .game-link-bind__start-mode .ui-segmented__item {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}
.game-link-bind__start-datetime {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 260px;
  min-height: 42px;
  display: flex;
  align-items: center;
  transition: max-width 0.15s ease, flex-basis 0.15s ease, opacity 0.15s ease;
}
.game-link-bind__start-datetime.is-collapsed {
  flex: 0 0 0;
  max-width: 0;
  min-width: 0;
  min-height: 42px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.game-link-bind__start-datetime .ui-field {
  width: 100%;
  margin: 0;
}
html[data-boot-surface='mobile'] .game-link-bind__start-line {
  flex-wrap: wrap;
}
html[data-boot-surface='mobile'] .game-link-bind__start-datetime:not(.is-collapsed) {
  flex: 1 1 100%;
  max-width: none;
}
html[data-boot-surface='mobile'] .game-link-bind__start-datetime.is-collapsed {
  flex: 0 0 0;
  max-width: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
}
.game-link-bind__posts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.game-link-bind__post-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.game-link-bind__post-search {
  min-width: 0;
  margin: 0;
}
.game-link-bind__post-search-trigger {
  padding: 0 0 0 2px;
  gap: 0;
}
.game-link-bind__post-search-trigger.is-combo {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.game-link-bind__post-search-trigger.is-combo:focus-within,
.game-link-bind__post-search-trigger.is-combo.is-search-open,
.game-link-bind__post-search-trigger.is-combo:has(.game-link-bind__post-search-mode.is-open) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.game-link-bind__post-search-trigger.is-search-open > .game-link-bind__post-search-toggle .ui-select__chevron {
  transform: rotate(180deg);
  color: var(--accent-dark);
}
.game-link-bind__post-search-trigger.is-combo .game-link-bind__post-search-mode.is-open,
.game-link-bind__post-search-trigger.is-combo .game-link-bind__post-search-mode:focus-visible {
  border-color: transparent;
  box-shadow: none;
}
.game-link-bind__post-search-prefix {
  flex: 0 0 3.65rem;
  width: 3.65rem;
  display: flex;
  align-items: stretch;
  border-right: 1px solid var(--line);
  background: #fff;
}
.game-link-bind__post-search-prefix .ui-field {
  margin: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}
.game-link-bind__post-search-mode.ui-select {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 40px;
  padding: 0 3px;
  gap: 2px;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.game-link-bind__post-search-mode .ui-select__value {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
}
.game-link-bind__post-search-mode .ui-select__chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}
.game-link-bind__post-search-mode-menu .ui-select-option__mark {
  display: none;
}
.game-link-bind__post-search-mode-menu .ui-select-option {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}
.recommend-tag-search__field .game-link-bind__post-search-menu .ui-select-option__mark {
  display: none;
}
.recommend-tag-search__field .game-link-bind__post-search-menu .ui-select-option {
  padding-left: 12px;
  font-size: 13px;
}
.game-link-bind__post-search-trigger.is-combo .game-link-bind__post-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
}
.game-link-bind__post-search-trigger.is-no-menu .game-link-bind__post-search-input {
  padding-right: 10px;
}
.game-link-bind__post-search-input {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 0 4px 0 10px;
}
.game-link-bind__post-search-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.game-link-bind__post-search-input input::placeholder {
  color: var(--text-muted);
}
.game-link-bind__post-search-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.game-link-bind__post-search-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 12px 0 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-height: 40px;
}
.game-link-bind__post-search-menu {
  overscroll-behavior: contain;
}
.game-link-bind__post-remove {
  color: var(--danger, #e5484d);
}
.game-link-bind__post-add.ui-btn--ghost {
  align-self: flex-start;
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  padding: 0;
  justify-content: center;
  color: var(--danger, #e5484d);
  border: 1px solid var(--danger, #e5484d);
  border-radius: var(--radius-control, 9px);
}
.game-link-bind__post-add.ui-btn--ghost:hover:not(:disabled) {
  color: var(--danger, #e5484d);
  background: color-mix(in srgb, var(--danger, #e5484d) 8%, transparent);
}
.timed-discussion-manage-modal .timed-discussion-manage__table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}
.timed-discussion-manage-modal .timed-discussion-manage__id {
  max-width: 10rem;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.timed-discussion-manage-modal .timed-discussion-manage__period {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.timed-discussion-manage-modal .timed-discussion-manage__end-btn.ui-btn--outline {
  border-color: var(--line-strong, var(--line));
}
.timed-discussion-manage-modal .timed-discussion-manage__hint {
  margin: 12px 0 0;
}
.timed-discussion-manage-modal__heading {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.35em;
  max-width: 100%;
  line-height: 1.3;
  white-space: nowrap;
}
.timed-discussion-manage-modal__heading-main {
  font: inherit;
}
.timed-discussion-manage-modal__heading-meta {
  font-size: 0.92em;
  font-weight: 500;
  color: var(--text-mute);
}
html[data-boot-surface='mobile'] .ui-modal.timed-discussion-manage-modal > .ui-card__header {
  padding: 10px 44px 8px;
}
html[data-boot-surface='mobile'] .ui-modal.timed-discussion-manage-modal > .ui-card__header .ui-card__title {
  width: auto;
  max-width: calc(100% - 8px);
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__table thead {
  display: none;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__table tr {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__table td {
  display: grid;
  grid-template-columns: 4.75em minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  padding: 5px 0;
  border: none;
  white-space: normal;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__table td::before {
  content: attr(data-label);
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  text-align: left;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.35;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__cell {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  text-align: right;
  font-size: 12px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__cell .timed-discussion-manage__end-btn {
  flex: 0 0 auto;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__table td.rt {
  text-align: inherit;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .game-link-bind__locked {
  text-align: right;
  justify-content: flex-end;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__period .timed-discussion-manage__cell {
  white-space: normal;
  word-break: break-word;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__table td.timed-discussion-manage__id {
  max-width: none;
  width: 100%;
}
html[data-boot-surface='mobile'] .timed-discussion-manage-modal .timed-discussion-manage__id .timed-discussion-manage__cell {
  word-break: break-all;
  width: 100%;
}

.work-post-comments {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.work-post-comment-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 36px;
}
.work-post-comment-tabs__pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.work-post-comment-tabs__pills::-webkit-scrollbar {
  display: none;
}
.work-post-comment-tab {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 10px);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.work-post-comment-tab:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.work-post-comment-tab.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
}
.work-post-comment-tab.is-active .work-post-comment-tab__label {
  color: var(--accent-dark, #9a7b2e);
}
.work-post-comment-tab--discussion.is-expanded .work-post-comment-tab__title {
  color: var(--text);
  font-weight: 700;
}
.work-post-comment-tab--discussion.is-expanded.is-active .work-post-comment-tab__title {
  color: var(--accent-dark, #9a7b2e);
}
.work-post-comment-tab--compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 44px;
  height: auto;
  align-self: stretch;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.work-post-comment-tab__label {
  line-height: 1.2;
}
.work-post-comment-tab__rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #2fad62;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.work-post-comment-tab__rec-badge svg {
  flex-shrink: 0;
}
.work-post-comment-tab--discussion.is-expanded {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(520px, 100%);
  width: auto;
  padding: 8px 14px;
  align-self: stretch;
}
.work-post-comment-tab__detail-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}
.work-post-comment-tab__title {
  grid-column: 1;
  grid-row: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent-dark, #9a7b2e);
}
.work-post-comment-tab__meta-stack {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  justify-self: end;
  min-width: 0;
}
.work-post-comment-tab__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5a623 0%, #f7c56e 100%);
  color: #5c3d00;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.work-post-comment-tab__pill-gap {
  flex: 0 0 2ch;
  width: 2ch;
  min-width: 2ch;
}
.work-post-comment-tab__id {
  grid-column: 1;
  grid-row: 2;
  color: color-mix(in srgb, var(--text-mute) 88%, transparent);
  font-size: 11px;
  line-height: 1.2;
  word-break: break-all;
}
.work-post-comment-tab__range {
  color: color-mix(in srgb, var(--text-mute) 88%, transparent);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}
.work-post-comment-history {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  max-width: min(520px, 100%);
  margin-left: auto;
}
.work-post-comment-history__label {
  color: var(--text-mute);
  text-align: right;
  line-height: 1.35;
}
.work-post-comment-history__select-wrap {
  display: inline-grid;
  width: max-content;
  max-width: min(520px, 100%);
}
.work-post-comment-history__select-sizer {
  grid-area: 1 / 1;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.work-post-comment-history__select-sizer-row {
  display: block;
  box-sizing: border-box;
  /* 文案 + 左 10px + 右：gap 6 + chevron 14 + 右内边距 8 */
  padding: 0 28px 0 10px;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}
.work-post-comment-history__select-wrap > .ui-field {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
}
.work-post-comment-history__select.ui-select {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 8px 0 10px;
  gap: 6px;
  justify-content: flex-start;
  font-size: 11px;
}
.work-post-comment-history__select .ui-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.25;
}
.work-post-comment-history__select .ui-select__chevron {
  flex-shrink: 0;
  margin-left: 2px;
}
.work-post-comment-history__menu.ui-select-menu {
  max-width: min(520px, calc(100vw - 16px));
  overflow-x: hidden;
}
.work-post-comment-history__menu .ui-select-option {
  width: auto;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  gap: 0;
  padding: 4px 12px 4px 10px;
}
.work-post-comment-history__menu.ui-select-menu--trigger .ui-select-option {
  width: 100%;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}
.work-post-comment-history__menu.ui-select-menu--trigger .ui-select-option__label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  overflow-wrap: normal;
  text-overflow: clip;
  font-size: 11px;
  line-height: 1.25;
}
.work-post-comment-history__menu .ui-select-option__mark {
  display: none;
}
.work-post-comment-history__menu .ui-select-option__label {
  font-size: 11px;
  line-height: 1.25;
}
html[data-boot-surface='mobile'] .work-post-comment-tabs {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
html[data-boot-surface='mobile'] .work-post-comment-tabs__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  overflow: visible;
  flex: none;
}
html[data-boot-surface='mobile'] .work-post-comment-tab {
  width: 100%;
  min-width: 0;
  justify-content: center;
}
html[data-boot-surface='mobile'] .work-post-comment-tab--compact {
  flex-wrap: wrap;
  white-space: normal;
  text-align: center;
  padding: 12px 10px;
  gap: 6px 8px;
}
html[data-boot-surface='mobile'] .work-post-comment-tab__pill--tab-hint {
  padding: 4px 10px;
  font-size: 11px;
}
html[data-boot-surface='mobile'] .work-post-comment-discussion-panel {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 10px);
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
html[data-boot-surface='mobile'] .work-post-comment-discussion-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
html[data-boot-surface='mobile'] .work-post-comment-discussion-panel__id {
  color: color-mix(in srgb, var(--text-mute) 88%, transparent);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-all;
}
html[data-boot-surface='mobile'] .work-post-comment-discussion-panel__range {
  color: color-mix(in srgb, var(--text-mute) 88%, transparent);
  font-size: 12px;
  line-height: 1.35;
}
html[data-boot-surface='mobile'] .work-post-comment-history {
  margin-left: 0;
  align-items: stretch;
  width: 100%;
  max-width: none;
}
html[data-boot-surface='mobile'] .work-post-comment-history__label {
  text-align: left;
}
html[data-boot-surface='mobile'] .work-post-comment-history__select-wrap {
  width: 100%;
  max-width: none;
}
html[data-boot-surface='mobile'] .work-post-comment-history__select-wrap > .ui-field {
  width: 100%;
}
.work-post-comments__versions.panel-inset {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-control, 10px);
  background: var(--surface-sunken, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--line);
}
.work-post-comments__versions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.work-post-comments__versions-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  min-width: 0;
}
.work-post-comments__versions-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.work-post-comments__versions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 13px;
  line-height: 1.45;
}
.work-post-comments__versions-label {
  font-weight: 600;
  margin-right: 2px;
}
.work-post-comments__versions-muted {
  color: var(--text-mute);
  font-size: 12px;
}
.work-post-comments__versions-no {
  font-weight: 600;
}
.work-post-comments__versions-time {
  font-variant-numeric: tabular-nums;
}
.work-post-comments__versions-stat {
  margin: 0;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  white-space: nowrap;
}
html[data-boot-surface='mobile'] .work-post-comments__versions-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
html[data-boot-surface='mobile'] .work-post-comments__versions-stat {
  text-align: left;
  white-space: normal;
}

.mod-picks__face {
  display: block;
  min-width: 0;
}
/* 右侧一栏只做窄条，省下的宽度留给三张推荐卡。34px 放下 12px 的「更多」。 */
.mod-picks__side {
  display: flex;
  flex-direction: column;
  flex: 0 0 34px;
  width: 34px;
  gap: 8px;
  align-self: stretch;
}
.mod-picks__side > .ui-btn-magnet {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 34px;
  min-height: 0;
}
.mod-picks__side .ui-icon-btn.mod-picks__flip {
  flex: 1 1 auto;
  align-self: stretch;
  width: 34px;
  min-width: 34px;
  height: auto;
  min-height: 44px;
  padding: 0;
  box-sizing: border-box;
}
.mod-picks__side .mod-picks__more {
  flex: none;
  width: 34px;
  min-width: 34px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  white-space: nowrap;
}
.mod-picks--compact .mod-picks__games {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.mod-picks--compact .mod-picks__card {
  flex: 0 0 calc((100% - 24px) * 0.26);
  width: calc((100% - 24px) * 0.26);
  max-width: calc((100% - 24px) * 0.26);
  min-width: 0;
  gap: 6px;
  padding-bottom: 8px;
  transition: border-color .2s ease;
}
.mod-picks--compact .mod-picks__card.is-open {
  position: relative;
  z-index: 1;
  flex-basis: calc((100% - 24px) * 0.48);
  width: calc((100% - 24px) * 0.48);
  max-width: calc((100% - 24px) * 0.48);
}
.mod-picks--compact .mod-picks__face {
  display: block;
  min-width: 0;
}
.mod-picks__shot,
.mod-picks__work {
  display: block;
  min-width: 0;
}
.mod-picks--compact .mod-picks__shot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}
.mod-picks--compact .mod-picks__work {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 100%;
  min-width: 0;
}
.mod-picks--compact .mod-picks__card.is-open .mod-picks__work {
  width: calc(100% * 0.26 / 0.48);
}
.mod-picks--compact .mod-picks__cover {
  box-sizing: content-box;
  position: relative;
  aspect-ratio: auto;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.mod-picks--compact .mod-picks__cover::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
.mod-picks--compact .mod-picks__cover .forum-cover,
.mod-picks--compact .mod-picks__cover img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mod-picks--compact .mod-picks__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 6px;
  padding: 0 8px;
  height: calc(14px * 1.35 * 2);
  overflow: hidden;
}
.mod-picks--compact .mod-picks__line {
  align-items: center;
}
.mod-picks--compact .mod-picks__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.mod-picks--compact .mod-picks__author {
  align-items: center;
}
.mod-picks--compact .mod-picks__author-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.mod-picks--compact .mod-picks__quote {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
  width: auto;
  height: 0;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 10px 14px 10px 12px;
  box-sizing: border-box;
  border-top: 0;
  overflow: hidden;
  background: transparent;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  /* 收起时文字马上消失。过渡写在展开态上，移出后这条不带动画，收缩过程里不会把字挤出来。 */
  transition: none;
}
.mod-picks--compact .mod-picks__quote.is-on {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(100% * 0.26 / 0.48);
  width: auto;
  height: auto;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  opacity: 1;
  visibility: visible;
  transform: none;
  overflow: hidden;
  transition: opacity .32s ease, transform .32s ease, visibility 0s linear 0s;
}
/* 封面宽度锁在收起卡片的尺寸上，展开时只让卡片变宽，行高不跟着封面一起抖。 */
@supports (width: 1cqi) {
  .mod-picks--compact .mod-picks__games {
    container-type: inline-size;
  }
  .mod-picks--compact .mod-picks__card {
    transition: flex-basis .32s ease, width .32s ease, max-width .32s ease, border-color .2s ease;
  }
  .mod-picks--compact .mod-picks__work,
  .mod-picks--compact .mod-picks__card.is-open .mod-picks__work {
    width: calc((100cqi - 24px) * 0.26);
  }
  .mod-picks--compact .mod-picks__cover,
  .mod-picks--compact .mod-picks__card.is-open .mod-picks__cover {
    width: 100%;
    transition: none;
  }
  /* 评语按展开后的宽度排版。卡片变宽时只裁切，行宽行高不跟着动画重排。 */
  .mod-picks--compact .mod-picks__quote.is-on {
    right: auto;
    left: calc((100cqi - 24px) * 0.26);
    width: calc((100cqi - 24px) * 0.22 - 2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mod-picks--compact .mod-picks__card,
  .mod-picks--compact .mod-picks__quote {
    transition: none;
    animation: none;
  }
}
/* 推荐语栏用很浅的主题色底和作品分开，底色铺到卡片底部圆角里。 */
.mod-picks--compact .mod-picks__quote.is-on {
  bottom: -8px;
  background: var(--accent-soft);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 8%, var(--surface-raised)) 0%,
    var(--surface-raised) 100%
  );
}
.mod-picks--compact .mod-picks__quote-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.mod-picks--compact .mod-picks__quote-head > .ui-avatar {
  flex: none;
  align-self: center;
  width: 36px;
  height: 36px;
  margin-top: 0;
  font-size: 14px;
}
.mod-picks--compact .mod-picks__quote-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  height: auto;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.mod-picks--compact .mod-picks__quote-label {
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  /* 去掉人名后仍放不下时，用省略号收尾，不要把字硬切掉。 */
  text-overflow: ellipsis;
}
.mod-picks--compact .mod-picks__quote .mod-picks__date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-picks--compact .mod-picks__quote.is-on .mod-picks__quote-copy {
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.mod-picks--compact .mod-picks__quote-label,
.mod-picks--compact .mod-picks__quote .mod-picks__date,
.mod-picks--compact .mod-picks__quote-body {
  flex: 0 0 auto;
}
.mod-picks--compact .mod-picks__quote.is-on .mod-picks__quote-body {
  flex: 1 1 0px;
  min-height: 0;
  overflow: hidden;
}
.mod-picks--compact .mod-picks__quote > .mod-picks__quote-body {
  display: block;
  height: auto;
  min-height: auto;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.mod-picks--compact .mod-picks__quote-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  line-break: loose;
  line-height: 1.4;
  overflow-wrap: break-word;
}
/* 小尺寸下评语栏只有一百来像素。收紧内边距和头像，把宽度让给“版主推荐：”和日期那两行。
   写在头像、行布局规则之后，同权重靠顺序覆盖。 */
@supports (width: 1cqi) {
  @container (max-width: 640px) {
    .mod-picks--compact .mod-picks__quote {
      gap: 6px;
      padding: 8px;
    }
    .mod-picks--compact .mod-picks__quote-head {
      gap: 6px;
    }
    .mod-picks--compact .mod-picks__quote-head > .ui-avatar {
      width: 28px;
      height: 28px;
      font-size: 12px;
    }
  }
}
.works-overview { min-width: 0; }
.works-zone { min-width: 0; }
.works-zone > .ui-content-loading {
  flex: none;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
}
.works-zone > .ui-content-loading .ui-content-loading__motion,
.works-zone > .ui-content-loading .ui-content-loading__body {
  flex: none;
  height: auto;
  min-height: auto;
}
.works-zone > .ui-content-loading .ui-card-skeleton {
  height: auto;
}
.works-zone__stale {
  position: relative;
  width: 100%;
  min-width: 0;
}
.works-zone__stale-body {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.works-zone__veil {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 5;
  overflow: hidden;
}
/* 长列表的中线常在屏幕外，最多下移 120px，翻页时一眼能看到。 */
.works-zone__veil .ui-content-loading__label {
  top: 50%;
  top: min(50%, 120px);
  left: 50%;
  right: auto;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.works-zone[data-zone="fresh"] > .ui-content-loading--cards .ui-content-loading__body,
.works-zone[data-zone="all"] > .ui-content-loading--cards .ui-content-loading__body {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.works-zone[data-zone="training"] > .ui-content-loading--cards .ui-content-loading__body {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.works-zone + .works-zone { margin-top: 22px; }
.works-zone__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 10px;
}
.works-zone__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}
.works-zone__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.works-zone__levels {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-width: 0;
}
.works-zone__levels-label {
  flex: none;
  margin-right: 8px;
  white-space: nowrap;
}
/* Safari 13 不认 flex gap，勾选框之间用相邻外边距。 */
.works-zone__levels > .works-zone__l0 + .works-zone__l0 { margin-left: 16px; }
.works-zone__l0 {
  flex: none;
  white-space: nowrap;
}
.works-zone__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  margin-left: auto;
}
.works-zone__title .works-zone__toggle {
  min-height: 44px;
  padding: 0 18px;
  font-size: inherit;
  font-weight: 650;
  gap: 6px;
}
.works-zone__title .works-zone__toggle > span.works-zone__toggle-label {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  line-height: 1;
}
.works-zone__toggle-state {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  color: var(--text-mute, #6b6570);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
.works-zone__caret {
  display: block;
  flex: none;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.works-zone__toggle[aria-expanded="true"] .works-zone__caret { transform: none; }
.ggrid.works-ov-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* 训练场一行 6 张，卡片约 150px 宽：字号、头像和留白各缩一档，作者和玩法行才放得下。 */
.ggrid.works-ov-grid--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-column-gap: 8px;
  column-gap: 8px;
}
.works-ov-grid--6 .works-ov-card .ui-poster-card__body {
  padding: 8px 6px 4px;
}
.works-ov-grid--6 .works-ov-card .ui-poster-card__title {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 18px;
}
.works-ov-grid--6 .works-ov-card .works-ov-star {
  width: 18px;
  height: 18px;
}
.works-ov-grid--6 .works-ov-card .works-ov-star svg {
  width: 14px;
  height: 14px;
}
.works-ov-grid--6 .works-ov-card .gcard-byline {
  gap: 4px;
}
.works-ov-grid--6 .works-ov-card .works-ov-byline-main {
  gap: 4px;
}
.works-ov-grid--6 .works-ov-card .works-ov-author-avatar {
  width: 16px;
  height: 16px;
  font-size: 9px;
}
.works-ov-grid--6 .works-ov-card .gcard-byline,
.works-ov-grid--6 .works-ov-card .works-ov-foot {
  font-size: 11px;
  line-height: 16px;
}
.works-ov-grid--6 .works-ov-card .works-ov-corner {
  padding: 0 4px;
}
/* 窄窗口下 6 列每张不到 120px，名称和作者行放不下，退回 5 列。 */
@media (max-width: 1279px) {
  .ggrid.works-ov-grid--6,
  .works-zone[data-zone="training"] > .ui-content-loading--cards .ui-content-loading__body {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.works-ov-card .ui-poster-card__body {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding-bottom: 4px;
  /* 卡片左右留白收紧，名称一行能多放几个字。 */
  padding-left: 8px;
  padding-right: 8px;
}
.works-ov-card .works-ov-meta {
  flex: 0 0 100%;
}
.works-ov-card { position: relative; }
.works-ov-card:hover,
.works-ov-card:focus-within { z-index: 4; }
.works-ov-card.is-panel { z-index: 8; }
.works-ov-card .ui-poster-card { position: relative; z-index: 2; overflow: visible; }
.works-ov-card .ui-poster-card__cover {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}
.works-ov-corner.ui-badge {
  padding: 0 5px;
  border-radius: 3px;
  border-color: transparent;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
}
.works-ov-corner.ui-badge.is-new { background: #e5f6e8; color: #178a3a; }
.works-ov-corner.ui-badge.is-update { background: #e6f1fb; color: #1a6fbf; }
.works-ov-corner.ui-badge.is-recommend { background: #fff1dc; color: #d97706; }
.works-ov-corner.ui-badge.is-activity { background: #f3e8ff; color: #7c3aed; }
.works-ov-cover { position: relative; display: block; }
/* 总览封面自己用占位锁 16:9。父级 ::before 和外层绝对定位叠在一起时，图片高度会变成 0。 */
.works-ov-card .ui-poster-card__cover::before {
  content: none;
  display: none;
  padding-top: 0;
}
.works-ov-card .ui-poster-card__cover > .glare-hover {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  width: 100%;
  height: auto;
}
.works-ov-card .works-ov-cover {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
}
.works-ov-card .ui-poster-card__cover .cover,
.works-ov-card .ui-poster-card__cover .forum-cover,
.works-ov-card .ui-poster-card__cover img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.works-ov-cover-anchor {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  padding-top: 56.25%;
  pointer-events: none;
}
.works-ov-cover-anchor .works-ov-dots { pointer-events: auto; }
.works-ov-card .ui-poster-card__title { display: block; width: 100%; }
.works-ov-titleline {
  display: flex;
  align-items: flex-start;
  /* 名称和收藏按钮之间只留一点缝。按钮本身 22px 不变，不挤它。 */
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.works-ov-titleline .works-ov-title {
  flex: 1 1 auto;
  min-width: 0;
}
.works-ov-card .works-ov-title {
  display: block;
  min-width: 0;
}
.works-ov-card .works-ov-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
}
.works-ov-card .works-ov-name .works-ov-honor,
.works-ov-work .works-ov-name .works-ov-honor,
.works-ov-mrow .works-ov-name .works-ov-honor {
  display: inline-flex;
  align-items: center;
  align-self: auto;
  box-sizing: border-box;
  height: calc(var(--type-title-sm) * var(--type-leading-tight));
  margin-right: 4px;
  line-height: 1;
  vertical-align: top;
}
/* 卡片和手机列表行的名称按两行截断。iPhone 的 WebKit 在 -webkit-line-clamp 里遇到 inline-flex / inline-block，
   会算错行宽，第二行只放一两个字就加省略号。这两处的荣誉标签改为普通行内元素，边框和底色照旧。
   12px 标签跟着标题基线排会偏下，抬 1px 与标题文字居中。标签在行首，只有比整行还长时才会折行，不会被裁掉。 */
.works-ov-card .works-ov-name .works-ov-honor,
.works-ov-mrow .works-ov-name .works-ov-honor {
  display: inline;
  height: auto;
  line-height: inherit;
  vertical-align: 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 图标全局是 display:block，放进行内标签会把标签拆成「空边框 / 图标 / 文字」三段，这里改回行内图片。 */
.works-ov-card .works-ov-name .works-ov-honor .topic-tag__icon,
.works-ov-mrow .works-ov-name .works-ov-honor .topic-tag__icon {
  display: inline;
  width: 12px;
  height: 12px;
  margin: 0 2px 0 0;
  vertical-align: -1px;
}
.works-ov-titleline .works-ov-star { align-self: flex-start; }
.works-ov-titleline .works-ov-mark {
  display: inline-flex;
  flex: none;
  align-self: flex-start;
  align-items: center;
  min-height: 22px;
}
.works-ov-card .gcard-byline {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.works-ov-byline-main {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.works-ov-card .works-ov-counts {
  width: auto;
  margin-left: auto;
}
.works-ov-byline-main .gcard-byline__author { flex: 1 1 auto; }
.works-ov-author-avatar.ui-avatar {
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 10px;
}
/* 星标贴右，和下面作品数、时长的右边对齐。图标自带约 1px 留白，再往右让 1px。 */
.works-ov-card .works-ov-star {
  position: static;
  flex: none;
  justify-content: flex-end;
  width: 22px;
  height: 22px;
  margin-left: auto;
  margin-right: -1px;
  background: transparent;
  color: #a39eaa;
}
.works-ov-card .works-ov-star.is-on { color: var(--accent, #c45500); }
.works-ov-corners {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
}
.works-ov-price {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}
.works-ov-star {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-mute, #6b6570);
  cursor: pointer;
}
.works-ov-star.is-on { color: var(--accent, #c45500); }
.works-ov-row__star .works-ov-star { position: static; }
.works-ov-title { display: inline; }
.works-ov-honor {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
  color: var(--accent, #c45500);
  font-size: 12px;
  font-weight: 400;
  vertical-align: middle;
}
.works-ov-title .works-ov-honor {
  flex: none;
  align-self: center;
  margin-right: 0;
  line-height: 16px;
}
/* 名称里的荣誉标签高度固定，文字靠 flex 居中。上下内边距必须相等，差 1px 文字就会明显偏上或偏下。 */
.works-ov-title .works-ov-honor:not(.is-painted),
.works-ov-panel .works-ov-honor:not(.is-painted) {
  padding: 0 4px;
  border: 1px solid #f0c48a;
  border-radius: 3px;
  background-color: #fff6ea;
}
.works-ov-title .works-ov-honor .topic-tag__icon {
  width: 12px;
  height: 12px;
}
.works-ov-honor.is-painted {
  padding: 1px 6px;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 部分 iPhone 的 Safari 里，grid 套在可换行的 flex 行内会按内容收窄，作品数、时长的 margin-left:auto 就推不到右边。
   这里用普通块级容器加 flex-basis 100% 撑满整行，两行内容各自 width 100%。 */
.works-ov-meta {
  display: block;
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.works-ov-meta > .gcard-byline,
.works-ov-meta > .works-ov-foot {
  box-sizing: border-box;
  width: 100%;
}
.works-ov-meta > * + * { margin-top: 4px; }
.works-ov-counts {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  width: 100%;
  color: var(--text-mute, #6b6570);
  font-size: 12px;
  white-space: nowrap;
}
.works-ov-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.works-ov-count__icon { display: block; flex: none; }
/* 玩法类型标签和时长固定在同一行，不换行。放不下时先缩时长，时长缩到 2em 后再缩标签，两边都用省略号收尾，不超出卡片。
   间距用 margin / padding，不用 flex gap：iOS 14.5 以下不支持。 */
.works-ov-foot {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  overflow: visible;
  color: var(--text-mute, #6b6570);
  font-size: 12px;
}
.works-ov-play,
.works-ov-duration {
  min-width: 0;
}
.works-ov-play {
  display: block;
  flex: 0 1 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-ov-play__tag,
.works-ov-play__sep {
  white-space: nowrap;
}
.works-ov-play__sep { margin: 0 4px; }
.works-ov-duration {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  padding-left: 6px;
  /* 收缩权重远大于标签，挤的时候先缩时长。 */
  flex: 0 1000 auto;
  min-width: 2em;
  max-width: 100%;
  white-space: nowrap;
}
.works-ov-duration:hover { z-index: 4; }
.works-ov-duration__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 时长在卡片最底一行，提示往上弹、靠右对齐，不被卡片底边裁掉。 */
.works-ov-duration > .works-ov-honor-tip {
  top: auto;
  bottom: calc(100% + 6px);
  left: auto;
  right: 0;
}
.works-ov-duration > .works-ov-honor-tip::before {
  top: 100%;
  bottom: auto;
}
/* 边缘检测翻转方向后，鼠标过渡用的透明桥也换到锚点那一侧。 */
.works-ov-honor-tip[data-v="down"]::before {
  top: auto;
  bottom: 100%;
}
.works-ov-honor-tip[data-v="up"]::before {
  top: 100%;
  bottom: auto;
}
.works-ov-count.is-tip { position: relative; }
.works-ov-count.is-tip:hover { z-index: 4; }
.works-ov-honor-tip {
  display: none;
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e6e1ea);
  border-radius: 8px;
  background: #fff;
  background: var(--surface-raised, #fff);
  color: var(--text, #3a342c);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  text-align: left;
}
.works-ov-honor-tip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 6px;
}
.works-ov-honor-tip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}
.works-ov-honor-tip .works-ov-honor {
  margin-right: 0;
  color: var(--accent, #c45500);
}
@media (hover: hover) {
  .works-ov-count.is-tip:hover .works-ov-honor-tip,
  .works-ov-duration:hover > .works-ov-honor-tip {
    display: flex;
    flex-direction: column;
  }
}
.works-ov-panel {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 8px;
  width: 340px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e6e1ea);
  border-radius: 8px;
  background: var(--surface-raised, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-height: 132px;
  font-size: 12px;
  line-height: 1.45;
  z-index: 1;
  pointer-events: none;
}
.works-ov-panel[data-side="left"] {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 8px;
}
.works-ov-panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 8px;
}
.works-ov-panel[data-side="left"]::before {
  right: auto;
  left: 100%;
}
.works-ov-panel p { margin: 0 0 8px; }
.works-ov-panel p:last-child { margin-bottom: 0; }
.works-ov-panel__intro {
  display: block;
  max-height: 4.5em;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e6e1ea);
  overflow: hidden;
  color: #a9a9a9;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
@supports (-webkit-line-clamp: 3) {
  .works-ov-panel__intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: none;
  }
}
/* 外观：很浅的纯色暖底，普通描边和阴影。 */
.works-ov-panel {
  background: var(--surface-raised);
  background: color-mix(in srgb, var(--accent) 1%, var(--surface-raised));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
/* 左上、右下两个直角压在卡片描边外角上。 */
.works-ov-panel__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 0 solid var(--accent);
  border-radius: 0;
  pointer-events: none;
}
.works-ov-panel__corner.is-start {
  top: -1px;
  left: -1px;
  border-top-width: 3px;
  border-left-width: 3px;
}
.works-ov-panel__corner.is-end {
  right: -1px;
  bottom: -1px;
  border-right-width: 3px;
  border-bottom-width: 3px;
}
.works-ov-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #8d8794;
}
.works-ov-tags__cat { flex: none; }
.works-ov-tag,
.works-ov-fact.is-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f3f1f4;
  color: #5c5663;
  white-space: nowrap;
}
.works-ov-tag {
  box-sizing: border-box;
  height: 22px;
  padding: 1px 6px 0;
  line-height: 16px;
}
.works-ov-honors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.works-ov-honors .works-ov-honor { margin-right: 0; }
.works-ov-panel .works-ov-honor { color: var(--accent, #c45500); }
.works-ov-facts { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.works-ov-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a39eaa;
}
.works-ov-fact__face { display: block; flex: none; }
.works-ov-fact svg { flex: none; }
.works-ov-fact.is-check.is-on { color: #1f9d55; }
.works-ov-fact.is-link.is-on { color: #2f6fed; }
/* 13px 汉字的笔画中线比图标和标签块高 1px。 */
.works-ov-fact.is-tag .works-ov-fact__label {
  transform: translateY(1px);
}
.works-ov-panel .works-ov-rec {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 0;
  padding: 4px 8px;
  border: 1px solid #8dcf9a;
  border-radius: 6px;
  background: #fff;
  background: color-mix(in srgb, currentColor 8%, var(--surface-raised));
  color: #2f9d4a;
  font-size: 12px;
  line-height: 1.35;
}
.works-ov-rec svg { flex: none; }
.works-ov-rec__label { flex: none; font-weight: 650; }
.works-ov-rec__names {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  color: #8d8794;
}
.works-ov-dots {
  position: absolute;
  z-index: 2;
  left: 36px;
  right: 36px;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.works-ov-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.works-ov-dots button.is-on { background: #fff; }
.works-ov-row__pop {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: 8px;
  pointer-events: none;
}
.works-ov-row__pop .works-ov-panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex: none;
  margin: 0;
}
.works-ov-row__pop .works-ov-panel::before {
  content: none;
  display: none;
}
.works-ov-row__stage {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  overflow: hidden;
  background: var(--surface-raised, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
}
.works-ov-row__stage .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 0;
  aspect-ratio: auto;
}
.works-ov-row__stage .cover .forum-cover,
.works-ov-row__stage .cover .cover__pane,
.works-ov-row__stage .cover .cover__loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transform: none;
  transition: none;
}
.works-ov-row__pop .works-ov-dots { pointer-events: auto; }
.works-overview .panel {
  overflow: visible;
  border-radius: 6px;
}
.works-overview .works-ov-table {
  border-collapse: separate;
  border-spacing: 0;
}
.works-overview .works-ov-table thead,
.works-overview .works-ov-table thead th {
  background: var(--console-thead);
}
.works-overview .works-ov-table thead th:first-child {
  border-top-left-radius: 6px;
}
.works-overview .works-ov-table thead th:last-child {
  border-top-right-radius: 6px;
}
.works-overview .works-ov-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
.works-overview .works-ov-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}
.tb-works-list .works-ov-cover { overflow: visible; }
.works-ov-table col.works-ov-table__stats { width: 4.75rem; }
.works-ov-table col.works-ov-table__person { width: 11rem; }
.works-ov-table td { vertical-align: middle; }
.works-ov-work {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  min-height: 72px;
}
.works-ov-work__cover { flex: none; align-self: center; }
.works-ov-work__cover .cover.thumb,
.works-ov-work__cover .forum-cover.thumb {
  width: calc(72px * 16 / 9);
  min-width: calc(72px * 16 / 9);
  max-width: calc(72px * 16 / 9);
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  border-radius: 6px;
}
.works-ov-work__cover .cover.thumb .forum-cover {
  object-fit: cover;
}
.works-ov-work__cover .works-ov-corners { top: 4px; right: 4px; }
.works-ov-work__cover .works-ov-corner.ui-badge,
.works-ov-mrow__cover .works-ov-corner.ui-badge {
  font-weight: 400;
}
.works-ov-work__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 72px;
  overflow: hidden;
}
.works-ov-work__aside {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  min-width: 22px;
  min-height: 72px;
  position: relative;
  z-index: 2;
}
.works-ov-work .works-ov-title {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.works-ov-work .works-ov-honor { flex: none; }
.works-ov-work .works-ov-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.works-ov-work .works-ov-star {
  position: static;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  background: transparent;
  color: #a39eaa;
}
.works-ov-work .works-ov-star.is-on { color: var(--accent, #c45500); }
.works-ov-work__info {
  margin-top: 0;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.works-ov-work__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.works-ov-work__tags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.5;
}
.works-ov-price--inline {
  position: static;
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f3f1f4;
  color: var(--accent, #c45500);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  white-space: nowrap;
}
.works-ov-table .works-ov-stats,
.works-ov-table .works-ov-person {
  min-height: 72px;
}
/* 三行数据收拢在格子中间，不撑满 72px 高。 */
.works-ov-table .works-ov-stats {
  justify-content: center;
  gap: 8px;
}
.works-ov-stats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 14px;
}
.works-ov-stats__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.works-ov-stats__item > svg { flex: none; }
.works-ov-person {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
/* 头像在左上角，与名字顶部对齐；作者列和最后回复列都从同一条顶线往下排。 */
.works-ov-table .works-ov-person { align-items: flex-start; }
.works-ov-table .works-ov-person > .ui-avatar { align-self: flex-start; }
.works-ov-person > .ui-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.works-ov-person__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.works-ov-table .works-ov-person__main { justify-content: flex-start; }
.works-ov-person__name,
.works-ov-person__time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-ov-person__name { font-size: 13px; line-height: 1.35; }
.works-ov-person__time {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.works-ov-person .works-ov-counts { width: auto; gap: 8px; }
.works-overview--mobile .works-zone__head {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.works-overview--mobile .works-zone__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.works-overview--mobile .works-zone__title-row .works-zone__title {
  flex: 0 1 auto;
  min-width: 0;
}
/* 「训练场」按钮缩小、只留箭头，两个等级勾选框和它挤在同一行，放不下时文字省略。 */
.works-overview--mobile .works-zone__title-row {
  flex-wrap: nowrap;
  align-items: flex-end;
}
.works-overview--mobile .works-zone__title-row .works-zone__title {
  display: flex;
  flex: none;
}
.works-overview--mobile .works-zone__title .works-zone__toggle {
  min-height: 32px;
  padding: 0 10px;
  font-size: 14px;
}
.works-overview--mobile .works-zone__title .works-zone__toggle > span.works-zone__toggle-label {
  gap: 4px;
}
.works-overview--mobile .works-zone__levels {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}
.works-overview--mobile .works-zone__levels > .works-zone__l0 + .works-zone__l0 { margin-left: 8px; }
.works-overview--mobile .works-zone__levels-label {
  margin-right: 4px;
  font-size: 11px;
  line-height: 16px;
}
.works-overview--mobile .works-zone__l0 {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  gap: 3px;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.works-overview--mobile .works-zone__l0 input {
  flex: none;
  width: 12px;
  height: 12px;
  margin: 0;
}
.works-overview--mobile .works-zone__l0 > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.works-overview--mobile .works-zone__title-row:has(.works-zone__l0) {
  gap: 8px;
}
.works-overview--mobile .works-zone__tools {
  flex-wrap: nowrap;
  margin-left: 0;
  justify-content: space-between;
}
.works-overview--mobile .works-zone__tools .board-sort-tiles {
  flex: 1 1 auto;
  min-width: 0;
}
.works-overview--mobile .works-zone__tools .board-toolbar__layout {
  flex: none;
  margin-left: auto;
}
.works-overview--mobile .works-zone + .works-zone { margin-top: 18px; }
/* 两列之间收窄到 8px，上下行距仍是 12px。 */
.works-overview--mobile .ggrid.works-ov-grid--4,
.works-overview--mobile .ggrid.works-ov-grid--5,
.search-section .ggrid.search-section__works.is-mobile {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-row-gap: 12px;
  grid-column-gap: 8px;
  row-gap: 12px;
  column-gap: 8px;
}
.forum-mobile .ui-content-loading--cards .ui-content-loading__body,
.forum-mobile .board-main .ui-content-loading--cards .ui-content-loading__body,
.works-overview--mobile .works-zone > .ui-content-loading--cards .ui-content-loading__body,
.works-overview--mobile .works-zone[data-zone] > .ui-content-loading--cards .ui-content-loading__body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-row-gap: 12px;
  grid-column-gap: 12px;
  row-gap: 12px;
  column-gap: 12px;
  gap: 12px;
  align-items: start;
}
.forum-mobile .ui-content-loading {
  flex: none;
  height: auto;
  min-height: 0;
}
.forum-mobile .ui-content-loading__label {
  position: static;
  align-self: flex-end;
  margin: 0 0 8px;
}
/* 换排序时的遮罩标签要浮在列表上。上面的 static 会让它拉成一整条，盖住卡片顶部。 */
.forum-mobile .works-zone__veil .ui-content-loading__label {
  position: absolute;
  align-self: auto;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
}
.forum-mobile .ui-card-skeleton {
  height: auto;
}
.works-overview--mobile .works-zone > .ui-content-loading--cards .ui-content-loading__body,
.works-overview--mobile .works-zone[data-zone] > .ui-content-loading--cards .ui-content-loading__body {
  grid-column-gap: 8px;
  column-gap: 8px;
}
.forum-mobile .ui-card-skeleton__body {
  gap: 6px;
  padding: 8px 8px 10px;
}
.works-ov-mlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.works-ov-mrow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised, #fff);
  cursor: pointer;
}
.works-ov-mrow__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.works-ov-mrow__cover {
  flex: none;
  width: 120px;
}
.works-ov-mrow__cover .cover.thumb,
.works-ov-mrow__cover .forum-cover.thumb {
  width: 120px;
  height: 68px;
  min-width: 120px;
  max-width: 120px;
  min-height: 68px;
  max-height: 68px;
}
.works-ov-mrow__cover .works-ov-corners { top: 4px; right: 4px; }
.works-ov-mrow .works-ov-star {
  position: static;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  background: transparent;
  color: #a39eaa;
}
.works-ov-mrow .works-ov-star.is-on { color: var(--accent, #c45500); }
.works-ov-mrow .works-ov-title {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.works-ov-mrow .works-ov-honor { flex: none; }
.works-ov-mrow .works-ov-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-ov-mrow__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 12px;
}
.works-ov-mrow .tb-works-list__info {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.works-ov-mrow__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
}
.works-ov-mrow__person {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.works-ov-mrow__role {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
}
.works-ov-mrow__people .works-ov-person__name { font-size: 12px; }
.works-ov-mrow__people .ui-avatar { width: 24px; height: 24px; font-size: 11px; }