/* GLOBAL-UI-56-20260710: unified product, workspace, auth and admin visual system. */
:root {
  --ui56-bg: #f7f7fb;
  --ui56-bg-warm: #fbfaf7;
  --ui56-surface: #ffffff;
  --ui56-surface-soft: #faf9ff;
  --ui56-ink: #171923;
  --ui56-muted: #73798a;
  --ui56-line: #e7e5ee;
  --ui56-line-strong: #dad7e6;
  --ui56-purple: #6f4cff;
  --ui56-indigo: #4f46e5;
  --ui56-purple-soft: #f2efff;
  --ui56-success: #1f9d68;
  --ui56-danger: #c2414b;
  --ui56-radius-sm: 12px;
  --ui56-radius: 18px;
  --ui56-radius-lg: 24px;
  --ui56-shadow: 0 16px 42px rgba(44, 38, 79, .065);
  --ui56-shadow-hover: 0 20px 48px rgba(71, 56, 135, .12);
  --ui56-gradient: linear-gradient(135deg, var(--ui56-purple), var(--ui56-indigo));
  color-scheme: light;
}

html { background: var(--ui56-bg); }
body {
  color: var(--ui56-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(111, 76, 255, .24); outline-offset: 2px; }

/* Shared controls */
.button,
button.button {
  min-height: 42px;
  border: 1px solid transparent !important;
  border-radius: var(--ui56-radius-sm) !important;
  padding: 10px 16px;
  color: #fff !important;
  background: var(--ui56-gradient) !important;
  box-shadow: 0 10px 24px rgba(98, 72, 235, .18) !important;
  font-weight: 760;
  letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.button:hover:not(:disabled), button.button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(98, 72, 235, .24) !important;
}
.button.secondary,
button.button.secondary {
  border-color: var(--ui56-line) !important;
  color: #3d4251 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.button.danger,
button.button.danger {
  border-color: #f2d4d7 !important;
  color: var(--ui56-danger) !important;
  background: #fff8f8 !important;
  box-shadow: none !important;
}
.button:disabled, button:disabled { opacity: .48; transform: none !important; box-shadow: none !important; }
input, select, textarea {
  border: 1px solid var(--ui56-line-strong) !important;
  border-radius: var(--ui56-radius-sm) !important;
  color: var(--ui56-ink) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
  outline: 0;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ui56-purple) !important;
  box-shadow: 0 0 0 4px rgba(111, 76, 255, .10) !important;
}
.pill, .eyebrow {
  border-color: var(--ui56-line) !important;
  color: #5d6372 !important;
  background: #fff !important;
}
.pill.required, .eyebrow {
  border-color: #ddd6ff !important;
  color: #5e43d9 !important;
  background: var(--ui56-purple-soft) !important;
}
.notice, .empty-state, .status:not(:empty) {
  border-color: var(--ui56-line) !important;
  border-radius: var(--ui56-radius-sm) !important;
  color: var(--ui56-muted) !important;
  background: #fbfbfd !important;
}
.status.error:not(:empty) { color: var(--ui56-danger) !important; background: #fff7f7 !important; border-color: #f2d4d7 !important; }
.status.success:not(:empty) { color: #11744c !important; background: #f2fbf7 !important; border-color: #ccecdf !important; }

/* Main product workspace */
body.app-route {
  overflow-x: hidden;
  background: var(--ui56-bg) !important;
}
body.app-route .shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 214px minmax(0, 1fr) !important;
  grid-template-rows: 72px minmax(0, 1fr) !important;
  gap: 0 !important;
  background: var(--ui56-bg) !important;
}
body.app-route .topbar {
  position: fixed !important;
  top: 0 !important;
  z-index: 90 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 0 26px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui56-line) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 4px 18px rgba(40, 34, 74, .035) !important;
  backdrop-filter: blur(18px);
}
body.app-route .topbar .brand { gap: 10px !important; color: var(--ui56-ink) !important; }
body.app-route .brand-text-main > span { font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
body.app-route .brand-text-main small { color: #999dac !important; font-size: 9px !important; letter-spacing: .14em !important; }
body.app-route .landing-nav, body.app-route .nav-actions { display: none !important; }
body.app-route .app-topbar-status { display: flex !important; gap: 10px; }
body.app-route .topbar-balance,
body.app-route .topbar-help,
body.app-route .topbar-bell,
body.app-route .topbar-avatar {
  min-height: 40px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: 12px !important;
  color: #414655 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.app-route .topbar-balance { padding: 0 15px !important; }
body.app-route .topbar-balance strong { color: var(--ui56-ink) !important; font-size: 18px; }
body.app-route .topbar-avatar {
  width: 40px !important;
  min-width: 40px !important;
  color: #fff !important;
  background: var(--ui56-gradient) !important;
}
body.app-route .reference-sidebar {
  position: fixed !important;
  top: 72px !important;
  z-index: 70 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 214px !important;
  height: calc(100vh - 72px) !important;
  margin: 0 !important;
  padding: 14px 12px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-right: 1px solid var(--ui56-line) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
}
body.app-route .reference-sidebar .sidebar-stack:first-child {
  display: grid !important;
  gap: 4px !important;
  padding-right: 3px;
}
body.app-route .reference-sidebar .sidebar-link {
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #626877 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  gap: 10px !important;
  box-shadow: none !important;
}
body.app-route .reference-sidebar .sidebar-link:hover {
  color: var(--ui56-ink) !important;
  background: #f7f6fb !important;
}
body.app-route .reference-sidebar .sidebar-link.primary,
body.app-route .reference-sidebar .sidebar-link[aria-current="page"] {
  color: #fff !important;
  background: var(--ui56-gradient) !important;
  box-shadow: 0 10px 24px rgba(103, 76, 232, .22) !important;
}
body.app-route .sidebar-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border: 1px solid currentColor !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  background: transparent !important;
}
body.app-route .sidebar-credit-card {
  padding: 12px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #fff, #faf8ff) !important;
  box-shadow: none !important;
}
body.app-route .sidebar-credit-actions .button { min-height: 34px !important; padding: 7px 9px !important; font-size: 11px !important; }
body.app-route #appView {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 24px 28px 48px !important;
  border: 0 !important;
  background: var(--ui56-bg) !important;
  box-shadow: none !important;
}
body.app-route #appView > section {
  width: min(100%, 1500px);
  margin-inline: auto;
}
body.app-route #appView > .subcard,
body.app-route .workspace-page-active,
body.app-route .dashboard-card {
  border: 1px solid var(--ui56-line) !important;
  border-radius: var(--ui56-radius-lg) !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: var(--ui56-shadow) !important;
}
body.app-route #appView > .subcard { padding: 24px !important; }
body.app-route .subcard,
body.app-route .card,
body.app-route .stat,
body.app-route .history-card,
body.app-route .package-card,
body.app-route .brand-card,
body.app-route .team-stat-card {
  border-color: var(--ui56-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.app-route .section-title { gap: 16px; margin-bottom: 20px !important; }
body.app-route .section-title h2 { color: var(--ui56-ink) !important; font-size: clamp(24px, 2.2vw, 32px) !important; line-height: 1.2; letter-spacing: -.045em !important; }
body.app-route .section-title p { max-width: 760px; color: var(--ui56-muted) !important; line-height: 1.65; }
body.app-route h3 { color: var(--ui56-ink) !important; }
body.app-route p, body.app-route .field-hint { color: var(--ui56-muted) !important; }
body.app-route table { background: #fff !important; }
body.app-route th { color: #686e7c !important; background: #f8f8fb !important; }
body.app-route th, body.app-route td { border-color: #eeeef3 !important; }
body.app-route .table-wrap, body.app-route .team-member-table-wrap {
  border-color: var(--ui56-line) !important;
  border-radius: var(--ui56-radius) !important;
  background: #fff !important;
}

/* Smart generation: the approved three-column concept */
body.app-route #generation.smart-generation-studio {
  max-width: 1500px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  scroll-margin-top: 90px !important;
}
body.app-route #generation > .section-title {
  position: relative;
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 2px 0 !important;
  border: 0 !important;
}
body.app-route #generation > .section-title::after {
  content: "上传后进行内容安全检查";
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-left: auto;
  padding: 0 14px 0 34px;
  border: 1px solid #cde9dc;
  border-radius: 999px;
  color: #1d8c5e;
  background: #f3fbf7;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
body.app-route #generation .start-generation-brief { display: none !important; }
body.app-route #generation .smart-generation-steps {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 0 16px !important;
  padding: 0 18px !important;
}
body.app-route #generation .smart-step {
  position: relative;
  z-index: 1;
  min-height: 48px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #363b49 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}
body.app-route #generation .smart-step::after {
  content: "";
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  width: 18px;
  border-top: 1px dashed #d6d2e2;
}
body.app-route #generation .smart-step:last-child::after { display: none; }
body.app-route #generation .smart-step b {
  width: 32px !important;
  height: 32px !important;
  color: #fff !important;
  background: var(--ui56-gradient) !important;
  box-shadow: 0 8px 18px rgba(102, 75, 233, .22);
}
body.app-route #generation .smart-generation-layout {
  display: grid !important;
  grid-template-columns: minmax(240px, .82fr) minmax(470px, 1.4fr) minmax(320px, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
body.app-route #generation .smart-generation-layout > aside.generation-upload-panel:first-child { grid-column: 1 !important; grid-row: 1 !important; }
body.app-route #generation .smart-generation-layout > section.smart-compose-panel { grid-column: 2 !important; grid-row: 1 !important; }
body.app-route #generation .smart-generation-layout > aside.smart-result-panel { grid-column: 3 !important; grid-row: 1 !important; }
body.app-route #generation .generation-upload-panel,
body.app-route #generation .smart-compose-panel,
body.app-route #generation .smart-result-panel {
  min-width: 0;
  min-height: 640px;
  padding: 20px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: var(--ui56-radius-lg) !important;
  color: var(--ui56-ink) !important;
  background: #fff !important;
  box-shadow: var(--ui56-shadow) !important;
}
body.app-route #generation .smart-compose-panel { display: flex; flex-direction: column; }
body.app-route #generation .smart-card-title h3 { margin-top: 8px !important; font-size: 18px !important; }
body.app-route #generation .smart-upload-dropzone {
  min-height: 150px !important;
  margin-top: 14px !important;
  border: 1.5px dashed #c9bcff !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fff, #faf8ff) !important;
}
body.app-route #generation .generation-upload-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: var(--ui56-gradient) !important;
  box-shadow: 0 12px 24px rgba(102, 75, 233, .22) !important;
}
body.app-route #generation .smart-source-preview {
  min-height: 220px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: 18px !important;
  background: repeating-linear-gradient(135deg, #fafafe 0 9px, #f3f2f8 9px 18px) !important;
}
body.app-route #generation .smart-quota-card { margin-top: auto !important; border-color: var(--ui56-line) !important; background: #faf9ff !important; }
body.app-route #generation .smart-intent-tabs {
  order: 3;
  margin: 12px 0 10px !important;
  gap: 8px !important;
}
body.app-route #generation .smart-intent-button {
  min-height: 36px !important;
  padding: 8px 11px !important;
  border: 1px solid #ddd8f7 !important;
  border-radius: 11px !important;
  color: #5e6270 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.app-route #generation .smart-intent-button small { display: none !important; }
body.app-route #generation .smart-intent-button.active,
body.app-route #generation .smart-intent-button[aria-pressed="true"] {
  color: #5d3fe1 !important;
  border-color: #c9bcff !important;
  background: var(--ui56-purple-soft) !important;
}
body.app-route #generation .smart-recommend-action {
  order: 4;
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.app-route #generation .smart-recommend-action p { display: none !important; }
body.app-route #generation .smart-recommend-button {
  min-height: 38px !important;
  color: #5d3fe1 !important;
  border: 1px solid #d7ceff !important;
  background: #f5f2ff !important;
  box-shadow: none !important;
}
body.app-route #generation #smartRecommendStatus { order: 5; }
body.app-route #generation .smart-generation-form {
  order: 2;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(140px, .42fr) !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
}
body.app-route #generation .generation-form-fields { grid-column: 1 / -1; }
body.app-route #generation .smart-product-info-box {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.app-route #generation .smart-product-info-box textarea {
  min-height: 150px !important;
  padding: 14px !important;
  border-color: #d9d4e8 !important;
  background: #fff !important;
}
body.app-route #generation .smart-output-count,
body.app-route #generation .smart-similarity-control {
  min-height: 82px;
  padding: 10px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: 14px !important;
  background: #fbfbfd !important;
}
body.app-route #generation .smart-output-count .field-hint,
body.app-route #generation .smart-similarity-control .field-hint { display: none !important; }
body.app-route #generation input[type="range"] { min-height: 18px !important; accent-color: var(--ui56-purple); box-shadow: none !important; }
body.app-route #generation .smart-more-settings { grid-column: 1 / -1; margin: 0 !important; border-color: var(--ui56-line) !important; background: #fbfbfd !important; }
body.app-route #generation .smart-generate-submit {
  grid-column: 1 / -1;
  min-height: 48px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: var(--ui56-gradient) !important;
}
body.app-route #generation #generationStatus { order: 6; }
body.app-route #generation .smart-recommend-result {
  order: 7;
  margin-top: 10px !important;
  padding: 12px !important;
  border-color: var(--ui56-line) !important;
  border-radius: 14px !important;
  background: #fbfbfd !important;
}
body.app-route #generation .smart-manual-template,
body.app-route #generation #templateDetail,
body.app-route #generation .auth-only-note { order: 8; }
body.app-route #generation .smart-manual-template { border-color: var(--ui56-line) !important; background: #fff !important; }
body.app-route #generation #templateDetail { display: none; }
body.app-route #generation .smart-result-panel { display: flex; flex-direction: column; }
body.app-route #generation .smart-result-panel .result-preview {
  min-height: 420px !important;
  aspect-ratio: auto !important;
  margin-top: 14px;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--ui56-line) !important;
  border-radius: 18px !important;
  background: #f7f7fb !important;
}
body.app-route #generation .smart-result-panel .result-preview img {
  width: 100% !important;
  height: 100% !important;
  min-height: 180px;
  object-fit: cover !important;
  border-radius: 12px !important;
  background: #fff;
}
body.app-route #generation .smart-result-actions { margin-top: auto; }

/* Remaining product modules inherit the same layout language */
body.app-route .generation-layout,
body.app-route .online-batch-layout,
body.app-route .translation-layout,
body.app-route .remix-layout,
body.app-route .image-audit-layout,
body.app-route .slicer-layout,
body.app-route .team-layout,
body.app-route .balance-layout {
  gap: 16px !important;
}
body.app-route .generation-layout > *,
body.app-route .online-batch-layout > *,
body.app-route .translation-layout > *,
body.app-route .remix-layout > *,
body.app-route .image-audit-layout > *,
body.app-route .slicer-layout > * {
  border: 1px solid var(--ui56-line) !important;
  border-radius: var(--ui56-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.app-route .result-preview {
  border-color: var(--ui56-line) !important;
  border-radius: var(--ui56-radius) !important;
  background: repeating-linear-gradient(135deg, #fbfbfd 0 9px, #f4f3f8 9px 18px) !important;
}
body.app-route details {
  border-color: var(--ui56-line) !important;
  background: #fbfbfd !important;
}
body.app-route .template-card,
body.app-route .history-card,
body.app-route .package-card,
body.app-route .brand-card,
body.app-route .team-stat-card,
body.app-route .online-result-card {
  border-radius: var(--ui56-radius) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.app-route .template-card:hover,
body.app-route .history-card:hover,
body.app-route .package-card:hover,
body.app-route .brand-card:hover {
  transform: translateY(-2px);
  border-color: #d5cdfc !important;
  box-shadow: var(--ui56-shadow-hover) !important;
}

/* Landing and account routes */
body:not(.app-route) { background: var(--ui56-bg-warm) !important; }
body:not(.app-route) > .shell { width: min(1480px, calc(100vw - 40px)) !important; }
body:not(.app-route) .topbar {
  min-height: 70px !important;
  margin-inline: 0 !important;
  padding-inline: 20px !important;
  border-bottom: 1px solid var(--ui56-line) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}
body:not(.app-route) .gallery-kicker,
body:not(.app-route) .eyebrow { color: var(--ui56-purple) !important; }
body:not(.app-route) .gallery-copy h1,
body.auth-route h1 { color: var(--ui56-ink) !important; letter-spacing: -.055em !important; }
body:not(.app-route) .gallery-home-actions .button,
body.auth-route .button:not(.secondary),
body.auth-route button { background: var(--ui56-gradient) !important; }
body.auth-route .auth-side,
body.auth-route .auth-form-card,
body.auth-route .card {
  border-color: var(--ui56-line) !important;
  border-radius: var(--ui56-radius-lg) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--ui56-shadow) !important;
}

/* Admin application */
body[data-admin-current-section] {
  color: var(--ui56-ink) !important;
  background: var(--ui56-bg) !important;
}
body[data-admin-current-section] > .shell {
  width: min(1580px, calc(100vw - 36px)) !important;
  max-width: none !important;
  padding: 18px 0 42px !important;
}
body[data-admin-current-section] .topbar {
  min-height: 68px !important;
  margin-bottom: 18px !important;
  padding: 0 18px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--ui56-shadow) !important;
}
body[data-admin-current-section] .admin-console-frame {
  display: grid !important;
  grid-template-columns: 224px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
body[data-admin-current-section] .admin-sidebar { position: sticky !important; top: 18px !important; display: block !important; }
body[data-admin-current-section] .admin-sidebar-card {
  min-height: calc(100vh - 122px) !important;
  padding: 14px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: var(--ui56-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--ui56-shadow) !important;
}
body[data-admin-current-section] .admin-sidebar-head {
  margin-bottom: 10px !important;
  padding: 12px 10px 16px !important;
  border-bottom: 1px solid var(--ui56-line) !important;
}
body[data-admin-current-section] .admin-sidebar-nav { display: grid !important; grid-template-columns: 1fr !important; gap: 4px !important; }
body[data-admin-current-section] .admin-nav-item {
  min-height: 42px !important;
  padding: 0 12px 0 44px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #646a79 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
body[data-admin-current-section] .admin-nav-item.active,
body[data-admin-current-section] .admin-nav-item[aria-current="page"] {
  color: #fff !important;
  background: var(--ui56-gradient) !important;
  box-shadow: 0 10px 24px rgba(103, 76, 232, .20) !important;
}

/* ADMIN-NAV-ICON-ALIGN-20260710: keep legacy icon masks centered in one tile. */
body[data-admin-current-section] .admin-nav-item[data-admin-nav="teams"] {
  --admin-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E");
}
body[data-admin-current-section] .admin-nav-item[data-admin-nav="referrals"] {
  --admin-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%2718%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M12%208v13%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M7.5%208C5%208%204%206.8%204%205.5S5%203%206.5%203C9%203%2012%208%2012%208%27%2F%3E%3Cpath%20d%3D%27M16.5%208C19%208%2020%206.8%2020%205.5S19%203%2017.5%203C15%203%2012%208%2012%208%27%2F%3E%3C%2Fsvg%3E");
}
@media (min-width: 981px) {
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-sidebar-card {
    max-height: calc(100vh - 122px) !important;
    overflow: hidden !important;
  }
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-sidebar-nav {
    max-height: calc(100vh - 210px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin;
    scrollbar-color: #d9d4e8 transparent;
  }
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-sidebar-nav::-webkit-scrollbar { width: 5px; }
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-sidebar-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: #d9d4e8; }
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-nav-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 1px !important;
    min-height: 52px !important;
    padding: 7px 10px !important;
  }
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-nav-item::before {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 30px !important;
    height: 30px !important;
  }
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-nav-item::after {
    left: 16px !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateY(-50%) !important;
  }
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-nav-item span,
  body[data-admin-current-section]:not(.auth-route):not(.app-route) .admin-nav-item small {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
}
body[data-admin-current-section] .admin-console-main,
body[data-admin-current-section] .admin-dashboard-home,
body[data-admin-current-section] .admin-section-panel { min-width: 0; }
body[data-admin-current-section] .card,
body[data-admin-current-section] .stat,
body[data-admin-current-section] .table-wrap,
body[data-admin-current-section] .admin-kpi-card,
body[data-admin-current-section] .admin-chart-card,
body[data-admin-current-section] .admin-recent-card,
body[data-admin-current-section] .admin-filter-card {
  border-color: var(--ui56-line) !important;
  border-radius: var(--ui56-radius) !important;
  color: var(--ui56-ink) !important;
  background: #fff !important;
  box-shadow: var(--ui56-shadow) !important;
}
body[data-admin-current-section] .admin-kpi-card { min-height: 126px !important; }
body[data-admin-current-section] .admin-kpi-card strong { color: var(--ui56-ink) !important; }
body[data-admin-current-section] .admin-kpi-card::before { color: var(--ui56-purple) !important; background: var(--ui56-purple) !important; }
body[data-admin-current-section] .filters,
body[data-admin-current-section] .admin-dashboard-filters {
  border-color: var(--ui56-line) !important;
  border-radius: var(--ui56-radius) !important;
  background: #fbfbfd !important;
}
body[data-admin-current-section] th { color: #686e7c !important; background: #f8f8fb !important; }
body[data-admin-current-section] th,
body[data-admin-current-section] td { border-color: #eeeef3 !important; }
body[data-admin-current-section] .pill { background: #f8f7fc !important; }
body[data-admin-current-section] .admin-transaction-drawer,
body[data-admin-current-section] .admin-user-drawer {
  border-color: var(--ui56-line) !important;
  background: #fff !important;
  box-shadow: -24px 0 60px rgba(38, 31, 72, .14) !important;
}

/* ADMIN-AI-CONFIG-20260710: compact, readable API settings panel. */
body[data-admin-current-section] .admin-api-config-panel {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--ui56-line);
  border-radius: 18px;
  background: linear-gradient(145deg, #fcfbff, #f7f5ff);
}
body[data-admin-current-section] .admin-api-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
body[data-admin-current-section] .admin-api-config-head h3 { margin: 3px 0 4px; color: var(--ui56-ink); font-size: 20px; }
body[data-admin-current-section] .admin-api-config-head p { margin: 0; }
body[data-admin-current-section] .admin-api-config-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
body[data-admin-current-section] .admin-api-wide { grid-column: 1 / -1; }
body[data-admin-current-section] .admin-api-advanced {
  padding: 13px 14px;
  border: 1px solid var(--ui56-line);
  border-radius: 14px;
  background: #fff;
}
body[data-admin-current-section] .admin-api-advanced summary { cursor: pointer; color: var(--ui56-purple); font-weight: 800; }
body[data-admin-current-section] .admin-api-advanced-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 13px; }
body[data-admin-current-section] .admin-api-actions { display: flex; gap: 10px; flex-wrap: wrap; }
body[data-admin-current-section] #adminAiKeyStatus { white-space: nowrap; color: var(--ui56-purple); background: #f0ecff !important; }
@media (max-width: 980px) {
  body[data-admin-current-section] .admin-api-config-form,
  body[data-admin-current-section] .admin-api-advanced-grid { grid-template-columns: 1fr !important; }
  body[data-admin-current-section] .admin-api-config-head { flex-direction: column; }
}

/* Admin sign-in */
body.admin-login-v56 {
  background:
    radial-gradient(circle at 78% 16%, rgba(111,76,255,.13), transparent 30rem),
    linear-gradient(180deg, #fbfaf7 0%, #f5f3fb 100%) !important;
}
body.admin-login-v56 .shell { width: min(1180px, 100%) !important; gap: 24px !important; }
body.admin-login-v56 .card {
  border: 1px solid var(--ui56-line) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--ui56-shadow) !important;
}
body.admin-login-v56 .intro {
  background:
    radial-gradient(circle at 78% 22%, rgba(111,76,255,.16), transparent 22rem),
    #fff !important;
}
body.admin-login-v56 .portfolio-strip span {
  border-color: rgba(111,76,255,.22) !important;
  background: linear-gradient(145deg, #f4f1ff, #c9bcff) !important;
}
body.admin-login-v56 button { background: var(--ui56-gradient) !important; border-color: transparent !important; }

@media (max-width: 1280px) {
  body.app-route #generation .smart-generation-layout {
    grid-template-columns: minmax(230px, .75fr) minmax(430px, 1.25fr) !important;
  }
  body.app-route #generation .smart-generation-layout > aside.generation-upload-panel:first-child { grid-column: 1 !important; grid-row: 1 !important; }
  body.app-route #generation .smart-generation-layout > section.smart-compose-panel { grid-column: 2 !important; grid-row: 1 !important; }
  body.app-route #generation .smart-generation-layout > aside.smart-result-panel { grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: auto; }
  body.app-route #generation .smart-result-panel .result-preview { min-height: 320px !important; }
}
@media (max-width: 980px) {
  body.app-route .shell { grid-template-columns: 1fr !important; grid-template-rows: 64px minmax(0, 1fr) !important; }
  body.app-route .topbar { height: 64px !important; min-height: 64px !important; padding: 0 16px !important; }
  body.app-route .reference-sidebar { display: none !important; }
  body.app-route #appView { grid-column: 1 !important; padding: 18px 16px 36px !important; }
  body.app-route #generation .smart-generation-layout { grid-template-columns: 1fr !important; }
  body.app-route #generation .smart-generation-layout > aside.generation-upload-panel:first-child,
  body.app-route #generation .smart-generation-layout > section.smart-compose-panel,
  body.app-route #generation .smart-generation-layout > aside.smart-result-panel { grid-column: 1 !important; grid-row: auto !important; }
  body.app-route #generation .generation-upload-panel,
  body.app-route #generation .smart-compose-panel,
  body.app-route #generation .smart-result-panel { min-height: auto; }
  body[data-admin-current-section] .admin-console-frame { grid-template-columns: 1fr !important; }
  body[data-admin-current-section] .admin-sidebar { position: static !important; }
  body[data-admin-current-section] .admin-sidebar-card { min-height: auto !important; }
  body[data-admin-current-section] .admin-sidebar-nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  body.app-route .brand-text-main small { display: none !important; }
  body.app-route .app-topbar-status { display: none !important; }
  body.app-route .mobile-nav { display: block !important; margin-left: auto; }
  body.app-route #appView { padding-inline: 12px !important; }
  body.app-route #appView > .subcard { padding: 16px !important; border-radius: 18px !important; }
  body.app-route .section-title { align-items: flex-start !important; }
  body.app-route #generation > .section-title::after { margin-left: 0; }
  body.app-route #generation .smart-generation-steps { gap: 4px !important; padding: 0 !important; }
  body.app-route #generation .smart-step { padding: 7px 4px !important; font-size: 11px !important; }
  body.app-route #generation .smart-step b { width: 26px !important; height: 26px !important; }
  body.app-route #generation .smart-step::after { display: none; }
  body.app-route #generation .smart-generation-form { grid-template-columns: 1fr !important; }
  body.app-route #generation .smart-output-count,
  body.app-route #generation .smart-similarity-control,
  body.app-route #generation .smart-more-settings,
  body.app-route #generation .smart-generate-submit { grid-column: 1 !important; }
  body.app-route #generation .smart-result-panel .result-preview { grid-template-columns: 1fr 1fr; min-height: 280px !important; }
  body.app-route #generation .smart-result-panel .result-preview img { min-height: 120px; }
  body[data-admin-current-section] > .shell { width: min(100% - 20px, 1180px) !important; }
  body[data-admin-current-section] .admin-sidebar { display: none !important; }
  body[data-admin-current-section] .admin-console-frame { display: block !important; }
  body[data-admin-current-section] .topbar { padding: 0 12px !important; }
  body.admin-login-v56 { padding: 14px !important; }
  body.admin-login-v56 .shell { grid-template-columns: 1fr !important; }
  body.admin-login-v56 .intro { display: none !important; }
}

/* CONFIRMED-UI-20260710: approved landing and email-auth screens. */
body:not(.auth-route):not(.app-route) #landingView {
  display: block !important;
  width: min(1480px, calc(100vw - 40px)) !important;
  margin: 0 auto !important;
}
body:not(.auth-route):not(.app-route) #landingView > .gallery-home,
body:not(.auth-route):not(.app-route) #landingView > .hero,
body:not(.auth-route):not(.app-route) #landingView > .landing-mockup-panel,
body:not(.auth-route):not(.app-route) #landingView > #authPanel,
body:not(.auth-route):not(.app-route) .auth-showcase-v2 { display: none !important; }
.landing-v2 { display: block; padding: 62px 0 54px; }
.landing-v2-hero {
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: 54px;
  align-items: center;
}
.landing-v2-copy { padding-left: 38px; }
.landing-v2-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #ddd6ff;
  border-radius: 999px;
  color: #5d3fe1;
  background: #f5f2ff;
  font-size: 12px;
  font-weight: 800;
}
.landing-v2-copy h1 {
  margin: 22px 0 18px;
  color: var(--ui56-ink);
  font-size: clamp(44px, 5.2vw, 74px);
  line-height: 1.08;
  letter-spacing: -.065em;
}
.landing-v2-copy h1 span { color: var(--ui56-purple); }
.landing-v2-copy p { max-width: 590px; color: var(--ui56-muted); font-size: 16px; line-height: 1.8; }
.landing-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.landing-v2-collage { position: relative; min-height: 460px; }
.landing-v2-collage img { display: block; object-fit: cover; border: 8px solid #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(48,40,88,.16); }
.landing-v2-main { position: absolute; left: 18%; top: 6%; width: 58%; height: 82%; z-index: 3; }
.landing-v2-card { position: absolute; width: 28%; height: 42%; }
.landing-v2-card-a { left: 0; top: 34%; z-index: 4; transform: rotate(-3deg); }
.landing-v2-card-b { right: 2%; top: 4%; z-index: 2; transform: rotate(3deg); }
.landing-v2-card-c { right: 0; bottom: 1%; z-index: 5; transform: rotate(2deg); }
.landing-real-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 4px 0 58px;
  padding: 24px 20px;
  border: 1px solid var(--ui56-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--ui56-shadow);
}
.landing-real-stats > div { min-width: 0; padding: 4px 22px; border-right: 1px solid var(--ui56-line); }
.landing-real-stats > div:last-child { border-right: 0; }
.landing-real-stats strong { display: block; color: var(--ui56-purple); font-size: 28px; letter-spacing: -.04em; }
.landing-real-stats span { color: var(--ui56-muted); font-size: 12px; }
.landing-v2-cases { padding: 42px 38px 56px; border-top: 1px solid var(--ui56-line); }
.landing-v2-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.landing-v2-section-head span { color: var(--ui56-purple); font-size: 12px; font-weight: 850; }
.landing-v2-section-head h2 { margin: 7px 0 0; font-size: 30px; }
.landing-v2-section-head a { color: var(--ui56-purple); font-weight: 800; text-decoration: none; }
.landing-v2-case-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.landing-v2-case-grid article { overflow: hidden; border: 1px solid var(--ui56-line); border-radius: 18px; background: #fff; }
.landing-v2-case-grid img { width: 100%; aspect-ratio: 1.15; display: block; object-fit: cover; }
.landing-v2-case-grid strong, .landing-v2-case-grid span { display: block; margin-inline: 14px; }
.landing-v2-case-grid strong { margin-top: 14px; font-size: 15px; }
.landing-v2-case-grid span { margin-top: 4px; margin-bottom: 15px; color: var(--ui56-muted); font-size: 12px; }

body.auth-route #landingView {
  width: min(1180px, calc(100vw - 40px)) !important;
  min-height: calc(100vh - 112px);
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .72fr) !important;
  gap: 24px !important;
  align-items: center !important;
}
body.auth-route #landingView > .landing-v2,
body.auth-route #landingView > .gallery-home,
body.auth-route #landingView > .hero,
body.auth-route #landingView > .landing-mockup-panel { display: none !important; }
body.auth-route .auth-showcase-v2 {
  min-height: 600px;
  display: grid !important;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--ui56-line);
  border-radius: 28px;
  background: linear-gradient(145deg, #fff 0%, #faf8ff 100%);
  box-shadow: var(--ui56-shadow);
}
.auth-showcase-copy { padding: 48px 48px 26px; }
.auth-showcase-copy > span { color: var(--ui56-purple); font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.auth-showcase-copy h1 { margin: 20px 0 18px; font-size: clamp(38px, 4vw, 58px); line-height: 1.12; letter-spacing: -.06em; }
.auth-showcase-copy ul { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; color: var(--ui56-muted); font-size: 13px; }
.auth-showcase-copy li::before { content: "✓"; margin-right: 8px; color: var(--ui56-purple); font-weight: 900; }
.auth-showcase-v2 > img { width: calc(100% - 64px); height: 245px; margin: auto 32px 32px; display: block; object-fit: cover; border-radius: 22px; }
body.auth-route #authPanel {
  width: 100% !important;
  padding: 34px !important;
  border: 1px solid var(--ui56-line) !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: var(--ui56-shadow) !important;
}
body.auth-route #authPanel::before { display: none !important; }
.auth-email-kicker { display: inline-flex; margin-bottom: 8px; color: var(--ui56-purple); font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.auth-email-form { margin-top: 24px !important; }
.auth-account-tabs { margin: 22px 0 18px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border: 1px solid var(--ui56-line); border-radius: 14px; background: #f7f5fc; }
.auth-account-tabs button { min-height: 42px; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--ui56-muted) !important; box-shadow: none !important; font-weight: 800; cursor: pointer; }
.auth-account-tabs button.active { background: #fff !important; color: var(--ui56-purple) !important; box-shadow: 0 5px 16px rgba(46, 37, 84, .08) !important; }
.auth-account-form { gap: 14px; }
.auth-account-form > .button { width: 100%; min-height: 48px; margin-top: 2px; }
.auth-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 126px; gap: 8px; }
.auth-code-row .button { min-height: 48px; padding-inline: 10px; }
.auth-invite-details { padding: 0 !important; border: 0 !important; background: transparent !important; }
.auth-invite-details summary { cursor: pointer; color: var(--ui56-purple); font-size: 12px; font-weight: 750; }
.auth-invite-details[open] summary { margin-bottom: 10px; }
.auth-password-fallback { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ui56-line); }
.auth-password-fallback summary { cursor: pointer; color: var(--ui56-muted); font-size: 12px; font-weight: 750; }
.auth-password-fallback[open] summary { margin-bottom: 14px; color: var(--ui56-purple); }
.auth-password-fallback .form { gap: 12px; }
.auth-password-fallback .button { width: 100%; }

@media (max-width: 980px) {
  .landing-v2 { padding-top: 30px; }
  .landing-v2-hero { grid-template-columns: 1fr; gap: 24px; }
  .landing-v2-copy { padding: 0 10px; }
  .landing-v2-collage { min-height: 400px; }
  .landing-real-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-real-stats > div:nth-child(2) { border-right: 0; }
  .landing-real-stats > div:nth-child(-n+2) { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ui56-line); }
  .landing-v2-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.auth-route #landingView { grid-template-columns: 1fr !important; padding: 24px 0 44px; }
  body.auth-route .auth-showcase-v2 { min-height: auto; }
}
@media (max-width: 640px) {
  body:not(.auth-route):not(.app-route) #landingView { width: min(100% - 24px, 430px) !important; }
  .landing-v2-copy h1 { font-size: 44px; }
  .landing-v2-collage { min-height: 300px; }
  .landing-v2-collage img { border-width: 5px; border-radius: 16px; }
  .landing-real-stats { margin-bottom: 34px; padding: 18px 10px; }
  .landing-real-stats > div { padding-inline: 12px; }
  .landing-real-stats strong { font-size: 22px; }
  .landing-v2-cases { padding: 30px 0; }
  .landing-v2-section-head { align-items: flex-start; flex-direction: column; }
  .landing-v2-case-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.auth-route #landingView { width: min(100% - 24px, 430px) !important; }
  body.auth-route .auth-showcase-v2 { display: none !important; }
  body.auth-route #authPanel { padding: 24px !important; }
  .auth-code-row { grid-template-columns: 1fr; }
}