.longhua-banner {
  margin: 0 1rem 0.75rem;
  border: 1px solid color-mix(in oklch, var(--primary, #3080ff) 28%, var(--border, #d6d6d6));
  border-radius: 0.5rem;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--primary, #3080ff) 14%, transparent), transparent 52%),
    color-mix(in oklch, var(--background, #fff) 94%, var(--primary, #3080ff));
  color: var(--foreground, #111);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.longhua-banner__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.875rem 1.125rem;
}

.longhua-banner__title {
  margin: 0;
  text-align: left;
  font-size: clamp(1.05rem, 1.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
}

.longhua-banner__mark {
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #3080ff 55%, #a855f7);
  box-shadow: 0 0 0 0.35rem rgba(48, 128, 255, 0.12);
}

.longhua-banner--public {
  margin-top: 4.75rem;
}

@media (min-width: 768px) {
  header [class*="hidden"][class*="lg:block"],
  header [class~="hidden"][class~="lg:block"] {
    display: block !important;
  }
}

.longhua-fallback-topnav {
  position: relative;
  z-index: 60;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.25rem;
  pointer-events: auto;
}

.longhua-fallback-topnav a {
  position: relative;
  z-index: 61;
  border-radius: 0.375rem;
  padding: 0.375rem 0.625rem;
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}

.longhua-fallback-topnav a:hover {
  color: var(--foreground, #111);
  background: color-mix(in oklch, var(--foreground, #111) 8%, transparent);
}

@media (max-width: 1023px) {
  .longhua-fallback-topnav {
    display: none !important;
  }
}

.longhua-affiliate-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.56);
}

.longhua-affiliate-dialog {
  width: min(960px, 96vw);
  max-height: min(760px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
  background: var(--background, #111);
  color: var(--foreground, #f6f6f6);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.longhua-affiliate-head,
.longhua-affiliate-foot {
  flex: 0 0 auto;
  border-color: var(--border, rgba(255, 255, 255, 0.16));
  padding: 1rem;
}

.longhua-affiliate-head {
  border-bottom-width: 1px;
}

.longhua-affiliate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-top-width: 1px;
}

.longhua-affiliate-foot-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.longhua-affiliate-button-primary {
  border-color: color-mix(in oklch, var(--primary, #3080ff) 62%, var(--border, rgba(255, 255, 255, 0.16)));
  background: var(--primary, #3080ff);
  color: var(--primary-foreground, #fff);
}

.longhua-affiliate-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.longhua-send-redemption-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.75rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.longhua-send-redemption-label {
  grid-column: 1 / -1;
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.8125rem;
}

.longhua-send-redemption-select {
  min-width: 0;
  min-height: 2.25rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
  padding: 0 0.75rem;
  background: var(--background, #111);
  color: var(--foreground, #f6f6f6);
}

.longhua-send-redemption-message {
  grid-column: 1 / -1;
  min-height: 1.25rem;
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.8125rem;
}

.longhua-redemption-bulk-delete {
  min-height: 2.5rem;
  border: 1px solid color-mix(in oklch, var(--destructive, #ef4444) 62%, var(--border, rgba(255, 255, 255, 0.16)));
  border-radius: 0.5rem;
  padding: 0 1rem;
  background: var(--destructive, #ef4444);
  color: var(--destructive-foreground, #fff);
  font-weight: 700;
  white-space: nowrap;
}

.longhua-redemption-bulk-delete--floating {
  position: fixed;
  top: 5.5rem;
  right: 1.5rem;
  z-index: 9998;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

.longhua-redemption-bulk-delete:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.longhua-personal-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
}

.longhua-personal-notice-dialog {
  width: min(460px, 94vw);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--background, #111);
  color: var(--foreground, #f6f6f6);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.longhua-personal-notice-dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.35;
}

.longhua-personal-notice-content {
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.9rem;
  line-height: 1.65;
  word-break: break-word;
}

.longhua-personal-notice-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.longhua-personal-notice-actions button {
  min-height: 2.25rem;
  border: 1px solid var(--primary, #3080ff);
  border-radius: 0.5rem;
  padding: 0 0.875rem;
  background: var(--primary, #3080ff);
  color: var(--primary-foreground, #fff);
}

.longhua-system-notice-records {
  max-height: min(360px, 42vh);
  overflow: auto;
  margin: 0.75rem 2rem 1rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
}

.longhua-system-notice-records-title {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  font-weight: 700;
}

.longhua-system-notice-record {
  padding: 0.875rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.16));
}

.longhua-system-notice-record:last-child {
  border-bottom: 0;
}

.longhua-system-notice-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.longhua-system-notice-record-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  background: color-mix(in oklch, var(--primary, #3080ff) 14%, transparent);
  color: var(--primary, #3080ff);
  font-size: 0.75rem;
}

.longhua-system-notice-record p {
  margin: 0;
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.875rem;
  line-height: 1.55;
  word-break: break-word;
}

.longhua-system-notice-record-time {
  margin-top: 0.5rem;
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.75rem;
}

.longhua-affiliate-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.longhua-affiliate-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.longhua-affiliate-subtitle {
  margin-top: 0.25rem;
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.875rem;
}

.longhua-affiliate-close,
.longhua-affiliate-button {
  min-height: 2.25rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
  padding: 0 0.75rem;
  background: transparent;
  color: inherit;
}

.longhua-affiliate-close {
  width: 2.25rem;
  padding: 0;
  font-size: 1.25rem;
}

.longhua-affiliate-body {
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

.longhua-affiliate-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.longhua-affiliate-card {
  min-width: 0;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: color-mix(in oklch, var(--background, #111) 88%, var(--primary, #3080ff));
}

.longhua-affiliate-label {
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.75rem;
}

.longhua-affiliate-value {
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.125rem;
  font-weight: 700;
}

.longhua-affiliate-table-wrap {
  overflow: auto;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 0.5rem;
}

.longhua-affiliate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.longhua-affiliate-table th,
.longhua-affiliate-table td {
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  padding: 0.75rem;
  text-align: left;
  white-space: nowrap;
}

.longhua-affiliate-table th {
  color: var(--muted-foreground, #a3a3a3);
  font-weight: 600;
}

.longhua-affiliate-table tr:last-child td {
  border-bottom: 0;
}

.longhua-affiliate-userlink {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--primary, #3080ff);
  font-weight: 600;
}

.longhua-affiliate-empty,
.longhua-affiliate-loading,
.longhua-affiliate-error {
  padding: 2rem 1rem;
  color: var(--muted-foreground, #a3a3a3);
  text-align: center;
}

.longhua-affiliate-error {
  color: var(--destructive, #ef4444);
}

.longhua-affiliate-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

/* Model marketplace: a compact, task-first filter rail that never exposes
   upstream channel names or provider implementation details. */
[data-longhua-catalog-source="hidden"] {
  display: none !important;
}

[data-longhua-model-card="seen"][data-longhua-catalog-hidden="true"] {
  display: none !important;
}

/* NOTE 2026-09-18: a rule hiding
     #model-showcase-special-panel article[data-longhua-special-offer="false"]
   used to live here. It worked together with a hard-coded model allow-list in
   longhua-ui.js and silently hid every featured model whose name was not on
   that list (admin configured 6, the square showed 2). The allow-list is gone,
   so the hiding rule must stay gone — the featured panel now renders exactly
   what the operator configured in 「精选模型」. */

.longhua-special-push {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0.25rem;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 0.15rem 0.42rem;
  background: #fffbeb;
  color: #b45309;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.longhua-model-filter {
  display: grid;
  gap: 1.25rem;
  padding: 0.25rem 0 1rem;
}

.longhua-model-filter__eyebrow {
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.longhua-model-filter__section {
  display: grid;
  gap: 0.65rem;
}

.longhua-model-filter__section h3 {
  margin: 0;
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.875rem;
  font-weight: 700;
}

.longhua-model-filter__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.longhua-model-filter__choice {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid color-mix(in oklch, var(--border, #404040) 88%, white);
  border-radius: 0.9rem;
  padding: 0.6rem 0.7rem;
  background: color-mix(in oklch, var(--background, #111) 94%, var(--muted, #202020));
  color: var(--foreground, #fafafa);
  font-size: 0.8125rem;
  font-weight: 650;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.longhua-model-filter__choice:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--primary, #5b65f6) 72%, white);
}

.longhua-model-filter__choice b {
  min-width: 1.45rem;
  border-radius: 999px;
  padding: 0.14rem 0.35rem;
  background: color-mix(in oklch, var(--muted, #252525) 84%, white);
  color: var(--muted-foreground, #a3a3a3);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.longhua-model-filter__choice[data-active="true"] {
  border-color: color-mix(in oklch, var(--primary, #5b65f6) 78%, white);
  background: color-mix(in oklch, var(--primary, #5b65f6) 27%, var(--background, #111));
  color: white;
  box-shadow: 0 0.7rem 1.4rem color-mix(in oklch, var(--primary, #5b65f6) 17%, transparent);
}

.longhua-model-filter__choice[data-active="true"] b {
  background: color-mix(in oklch, var(--primary, #5b65f6) 58%, white);
  color: white;
}

/* Grow the desktop rail as the viewport grows so filter labels stay readable. */
@media (min-width: 1280px) {
  body.longhua-model-square-page [data-longhua-catalog-layout="true"] {
    grid-template-columns: clamp(20rem, 20vw, 24rem) minmax(0, 1fr) !important;
  }

  body.longhua-model-square-page [data-longhua-model-filter-rail="true"] .longhua-model-filter__choice {
    min-height: 3.4rem;
    padding-inline: 0.8rem;
  }

  body.longhua-model-square-page [data-longhua-model-filter-rail="true"] .longhua-model-filter__choice > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.longhua-model-filter__choice--image[data-active="true"] {
  border-color: #f472b6;
  background: color-mix(in oklch, #f472b6 22%, var(--background, #111));
}

.longhua-model-filter__choice--video[data-active="true"] {
  border-color: #fb923c;
  background: color-mix(in oklch, #fb923c 22%, var(--background, #111));
}

@media (max-width: 640px) {
  .longhua-model-filter__choices {
    gap: 0.4rem;
  }

  .longhua-model-filter__choice {
    padding: 0.55rem 0.6rem;
  }
}

@media (max-width: 640px) {
  .longhua-affiliate-summary {
    grid-template-columns: 1fr;
  }

  .longhua-send-redemption-panel {
    grid-template-columns: 1fr;
  }

  .longhua-redemption-bulk-delete {
    width: 100%;
  }

  .longhua-redemption-bulk-delete--floating {
    right: 1rem;
    left: 1rem;
    width: auto;
  }

  .longhua-system-notice-records {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}

@media (max-width: 640px) {
  .longhua-banner {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
  }

  .longhua-banner__inner {
    align-items: flex-start;
    padding: 0.85rem;
  }
}

/* Bright catalog surfaces for the two customer-facing work areas. These are
   deliberately scoped to their routes so administration screens keep their
   existing density and controls. */
body.longhua-console-page [data-slot='sidebar-inset'] {
  background:
    radial-gradient(circle at 84% 0%, rgb(48 128 255 / 0.08), transparent 32rem),
    #f7f9fc;
}

body.longhua-console-page [data-slot='sidebar-inset'] main {
  max-width: 90rem;
  margin-inline: auto;
  width: 100%;
}

body.longhua-console-page [data-longhua-banner='dashboard'] {
  margin-top: 1rem;
  border-color: color-mix(in oklch, var(--primary, #3080ff) 20%, #fff);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 88% 22%, rgb(48 128 255 / 0.13), transparent 16rem),
    linear-gradient(135deg, #fff, #f4f8ff);
  box-shadow: 0 16px 42px rgb(16 24 40 / 0.06);
}

body.longhua-console-page [data-slot='sidebar-inset'] [data-slot='card'] {
  border-color: rgb(15 23 42 / 0.09);
  border-radius: 1.1rem;
  box-shadow: 0 14px 34px rgb(16 24 40 / 0.045);
}

body.longhua-model-square-page {
  background:
    radial-gradient(circle at 92% 8%, rgb(48 128 255 / 0.11), transparent 27rem),
    #f8fafc;
}

/* The app header is fixed and must span the whole viewport. The previous
   generic `header` selector also constrained this navigation to the catalog
   content width, leaving visible gutters on wide screens. */
body.longhua-model-square-page header.fixed {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

body.longhua-model-square-page header h1 {
  max-width: 48rem;
  font-size: clamp(2.25rem, 5vw, 4.25rem) !important;
  letter-spacing: -0.065em;
}

body.longhua-model-square-page header p {
  max-width: 42rem;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.longhua-model-square-page .longhua-model-filter,
body.longhua-model-square-page [data-longhua-model-card='seen'] {
  border-color: rgb(15 23 42 / 0.1);
  border-radius: 1.15rem;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 12px 30px rgb(16 24 40 / 0.045);
}

body.longhua-model-square-page [data-longhua-model-card='seen'] {
  padding: 1rem;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body.longhua-model-square-page [data-longhua-model-card='seen']:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--primary, #3080ff) 40%, #dce5f4);
  box-shadow: 0 20px 42px rgb(16 24 40 / 0.09);
}

body.longhua-model-square-page .longhua-model-filter {
  padding: 1rem;
}

body.longhua-model-square-page .longhua-model-filter__eyebrow {
  color: var(--primary, #3080ff);
  letter-spacing: 0.11em;
}

body.longhua-model-square-page .longhua-model-filter__choice {
  border-color: rgb(15 23 42 / 0.09);
  background: #fff;
  color: #162033;
}

body.longhua-model-square-page .longhua-model-filter__choice b {
  background: #eef3fa;
  color: #5d6b80;
}

body.longhua-model-square-page .longhua-model-filter__choice[data-active='true'] {
  border-color: var(--primary, #3080ff);
  background: color-mix(in oklch, var(--primary, #3080ff) 12%, #fff);
  color: #162033;
  box-shadow: none;
}

body.longhua-model-square-page .longhua-channel-source-tag {
  padding: 0.42rem 0.8rem !important;
  border-color: rgb(148 163 184 / 0.38) !important;
  color: #475569 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Keep the customer console and model square legible when the application
   switches to dark mode. The bright catalog surfaces above are intentionally
   scoped for light mode, so their dark equivalents live here rather than
   changing global administration styles. */
.dark body.longhua-console-page [data-slot='sidebar-inset'],
[data-theme='dark'] body.longhua-console-page [data-slot='sidebar-inset'] {
  background:
    radial-gradient(circle at 84% 0%, rgb(48 128 255 / 0.16), transparent 32rem),
    #0d1420;
  color: #edf4ff;
}

.dark body.longhua-console-page [data-longhua-banner='dashboard'],
[data-theme='dark'] body.longhua-console-page [data-longhua-banner='dashboard'] {
  border-color: rgb(117 177 255 / 0.28);
  background:
    radial-gradient(circle at 88% 22%, rgb(48 128 255 / 0.2), transparent 16rem),
    linear-gradient(135deg, #172337, #101925);
  box-shadow: 0 18px 46px rgb(0 0 0 / 0.28);
}

.dark body.longhua-console-page [data-slot='sidebar-inset'] [data-slot='card'],
[data-theme='dark'] body.longhua-console-page [data-slot='sidebar-inset'] [data-slot='card'] {
  border-color: rgb(148 163 184 / 0.2);
  background: rgb(20 29 43 / 0.94);
  box-shadow: 0 16px 38px rgb(0 0 0 / 0.2);
}

.dark body.longhua-model-square-page,
[data-theme='dark'] body.longhua-model-square-page {
  background:
    radial-gradient(circle at 92% 8%, rgb(48 128 255 / 0.16), transparent 27rem),
    #0c1420;
  color: #eef5ff;
}

.dark body.longhua-model-square-page header h1,
[data-theme='dark'] body.longhua-model-square-page header h1 {
  color: #f8fbff;
}

.dark body.longhua-model-square-page header p,
[data-theme='dark'] body.longhua-model-square-page header p {
  color: rgb(203 213 225 / 0.82) !important;
}

.dark body.longhua-model-square-page .longhua-model-filter,
.dark body.longhua-model-square-page [data-longhua-model-card='seen'],
[data-theme='dark'] body.longhua-model-square-page .longhua-model-filter,
[data-theme='dark'] body.longhua-model-square-page [data-longhua-model-card='seen'] {
  border-color: rgb(148 163 184 / 0.22);
  background: rgb(20 29 43 / 0.94);
  color: #eef5ff;
  box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
}

.dark body.longhua-model-square-page [data-longhua-model-card='seen']:hover,
[data-theme='dark'] body.longhua-model-square-page [data-longhua-model-card='seen']:hover {
  border-color: rgb(96 165 250 / 0.68);
  box-shadow: 0 22px 48px rgb(0 0 0 / 0.34);
}

.dark body.longhua-model-square-page .longhua-model-filter__choice,
[data-theme='dark'] body.longhua-model-square-page .longhua-model-filter__choice {
  border-color: rgb(148 163 184 / 0.2);
  background: rgb(15 23 35 / 0.9);
  color: #e7eef9;
}

.dark body.longhua-model-square-page .longhua-model-filter__choice b,
[data-theme='dark'] body.longhua-model-square-page .longhua-model-filter__choice b {
  background: rgb(51 65 85 / 0.7);
  color: #cbd5e1;
}

.dark body.longhua-model-square-page .longhua-model-filter__choice[data-active='true'],
[data-theme='dark'] body.longhua-model-square-page .longhua-model-filter__choice[data-active='true'] {
  border-color: rgb(96 165 250 / 0.82);
  background: rgb(30 64 175 / 0.28);
  color: #f8fbff;
}

@media (max-width: 640px) {
  body.longhua-model-square-page header.fixed {
    text-align: center !important;
  }

  body.longhua-model-square-page header p {
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* ==========================================================================
   手机端专用适配（<= 767px）
   --------------------------------------------------------------------------
   背景：注入脚本把 layout_collapsible 固定为 none，而 ui/sidebar.tsx 的
   `collapsible === 'none'` 分支在 isMobile 判断之前就 return，导致手机端
   永远走不到 Sheet 抽屉分支 —— 侧栏以 13rem(208px) 常驻，在 390px 视口上
   吃掉 53% 宽度，右侧内容被压成窄缝（标题截断、分页按钮叠在一起）。

   修法：不动 React 逻辑、不动 collapsible cookie（PC 端行为必须原样保留），
   仅在本断点内用 CSS 把侧栏转成抽屉 + 用少量 JS 控制开合状态。

   约束：本区块所有规则都包在 max-width: 767px 内，PC 端（>= 768px）零影响。
   ========================================================================== */

@media (max-width: 767px) {
  /* ---- 1. 侧栏转为覆盖式抽屉 ----
     排除 [data-mobile='true']：那是 ui/sidebar.tsx 原生 Sheet 抽屉的标记，
     本断点只接管 collapsible='none' 渲染出的常驻侧栏。 */
  [data-slot='sidebar']:not([data-mobile='true']) {
    position: fixed;
    top: var(--app-header-height, 3rem);
    bottom: 0;
    left: 0;
    z-index: 60;
    width: 17rem !important;
    max-width: 84vw;
    height: auto !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* 默认收起在屏幕外 */
    transform: translateX(-102%);
    visibility: hidden;
    transition:
      transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.24s;
    box-shadow: 0 18px 48px rgb(2 6 23 / 0.32);
  }

  /* 展开态：由 JS 在 body 上切换该 class */
  body.longhua-mobile-nav-open [data-slot='sidebar']:not([data-mobile='true']) {
    transform: translateX(0);
    visibility: visible;
  }

  /* 抽屉打开时锁住背景滚动。注意只锁 body，且不能用 touch-action:none
     —— 那会把抽屉内部的触摸滚动也一起禁掉。 */
  body.longhua-mobile-nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* 抽屉遮罩：点击关闭。用伪元素挂在 inset 上，无需新增 DOM */
  body.longhua-mobile-nav-open [data-slot='sidebar-inset']::after {
    content: '';
    position: fixed;
    inset: var(--app-header-height, 3rem) 0 0 0;
    z-index: 55;
    background: rgb(2 6 23 / 0.45);
    backdrop-filter: blur(1px);
  }

  /* 内容区在手机端必须占满整宽（此前被侧栏挤掉一半） */
  [data-slot='sidebar-inset'] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 抽屉内的导航项加大点击区，符合触控习惯 */
  [data-slot='sidebar'] [data-slot='sidebar-menu-button'],
  [data-slot='sidebar'] [data-slot='sidebar-menu-sub-button'] {
    min-height: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* ---- 2. 控制台 / 模型广场：手机端内容排版 ---- */
@media (max-width: 767px) {
  /* 页面主容器：手机端去掉桌面端的居中限宽，把宽度全留给正文 */
  body.longhua-console-page [data-slot='sidebar-inset'] main,
  body.longhua-model-square-page main {
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  /* 卡片：收紧圆角与内边距，窄屏下多留出正文宽度 */
  body.longhua-console-page [data-slot='sidebar-inset'] [data-slot='card'],
  body.longhua-model-square-page [data-slot='card'] {
    border-radius: 0.9rem;
  }

  body.longhua-console-page [data-slot='sidebar-inset'] [data-slot='card-content'],
  body.longhua-model-square-page [data-slot='card-content'] {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }

  /* 表格：窄屏下横向滚动而不是压碎列宽（容器本身已是 overflow-x-auto，
     这里只补触控惯性滚动与触屏友好的行高） */
  [data-slot='table-container'] {
    -webkit-overflow-scrolling: touch;
  }

  [data-slot='table-cell'] button,
  [data-slot='table-cell'] a[role='button'] {
    min-height: 2rem;
  }

  /* 分页：手机上允许换行，避免页码挤成一团 */
  [data-slot='pagination-content'] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }

  [data-slot='pagination-link'] {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  /* 表单控件：字号 < 16px 会触发 iOS 聚焦自动放大，统一抬到 16px */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* 长模型名允许断行，避免撑破卡片 */
  body.longhua-model-square-page [data-slot='card-title'] {
    overflow-wrap: anywhere;
  }
}

/* ---- 3. 抽屉内的关闭按钮（仅手机端可见） ---- */
.longhua-mobile-nav-close {
  display: none;
}

@media (max-width: 767px) {
  .longhua-mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid rgb(148 163 184 / 0.22);
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
  }

  .longhua-mobile-nav-close svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
  }
}

/* ---- 4. 账单页：筛选面板展开时整页可纵向滚动（2026-09-29） ----
   账单页用 SectionPageLayout fixedContent ⇒ 外层 overflow:hidden，
   只有 Tab 内容区可滚动。筛选面板展开后高度超出剩余空间，
   面板下半部分（关键字 / API Key / 数据范围）被裁掉且滚不到。
   这里由 longhua-ui.js 在「账单页 + 面板展开」时给外层打标记并切 body 类，
   把「只有 Tab 内容可滚动」改成「整页可滚动」。
   面板收起时不加类 ⇒ 保留原有的「筛选条固定 + 内容区独立滚动」行为。 */
body.longhua-billing-filters-open [data-longhua-billing-content='1'] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* 外层变可滚动后，内层包装不能再锁死 100% 高度，否则内容仍会被压缩 */
body.longhua-billing-filters-open [data-longhua-billing-flex='1'] {
  height: auto !important;
  min-height: 100%;
}

/* ---- 5. 下拉浮层：宽度按内容自适应，长选项不再被截断（2026-09-29） ----
   SelectContent / ComboboxContent 原本写死 w-(--anchor-width)，
   浮层宽度 = 触发器宽度，长选项（API Key、订单号、渠道名）被右侧裁掉。
   改成：以触发器宽度为下限，按最长选项自然撑开，
   上限取「触发器到视口边缘的可用宽度」与 32rem 的较小值，避免溢出屏幕。
   用 max-content 而不是 auto —— 与定位容器是否为 absolute 无关，
   手机端（<=640px，Base UI 走非 Portal 分支）同样成立。 */
[data-slot='select-content'] {
  width: max-content !important;
  min-width: min(max(var(--anchor-width, 9rem), 9rem), var(--available-width, 90vw)) !important;
  max-width: min(var(--available-width, 90vw), 32rem) !important;
}

/* 原 min-width 是 calc(anchor + 1.75rem)，这里保留同一档，避免比改动前更窄。
   注意 min-width 会压过 max-width（CSS 规范），所以两者都要夹到 --available-width，
   否则触发器贴着视口右边缘时浮层仍会溢出屏幕。 */
[data-slot='combobox-content'] {
  width: max-content !important;
  min-width: min(calc(var(--anchor-width, 9rem) + 1.75rem), var(--available-width, 90vw)) !important;
  max-width: min(var(--available-width, 90vw), 32rem) !important;
}

/* 选项文字：允许在触达上限时收缩并显示省略号（原先是 flex-shrink:0，只会被硬裁） */
[data-slot='select-content'] [data-slot='select-item-text'] {
  flex: 0 1 auto !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-slot='combobox-content'] [data-slot='combobox-list'],
[data-slot='combobox-content'] [data-slot='combobox-item'] {
  min-width: 0;
}

/* 动作菜单（非选项框）：只做视口防溢出，不改原有宽度策略，避免影响既有菜单版式 */
[data-slot='dropdown-menu-content'],
[data-slot='dropdown-menu-sub-content'] {
  max-width: min(var(--available-width, 90vw), 28rem);
}