/* 极绘AI visual system: Merchandising Desk */
:root {
  --studio-bg: #0b0e10;
  --studio-bg-deep: #080a0c;
  --studio-surface: #121618;
  --studio-surface-2: #181d20;
  --studio-surface-3: #202629;
  --studio-line: rgba(235, 240, 240, 0.11);
  --studio-line-strong: rgba(235, 240, 240, 0.2);
  --studio-text: #f1f3f2;
  --studio-muted: #a4acaa;
  --studio-dim: #7d8784;
  --studio-purple: #9b6cff;
  --studio-purple-deep: #654cff;
  --studio-purple-soft: rgba(139, 92, 246, 0.14);
  --studio-gradient: linear-gradient(135deg, #a66cff 0%, #7257ff 48%, #5848e8 100%);
  --studio-proof: #ff7464;
  --studio-success: #71c29a;
  --studio-warning: #ff9b7a;
  --studio-danger: #f27d7d;
  --studio-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
  --studio-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.create-page .create-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Lightweight task progress and submission feedback. These replace the former
   per-card WebGL animation with compositor-friendly CSS. */
.create-page .task-wait-indicator {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--studio-muted);
}

.create-page .task-wait-indicator.is-compact {
  min-height: 44px;
}

.create-page .task-wait-pulse {
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.create-page .task-wait-pulse i {
  width: 5px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #b99cff, #6d55db);
  animation: create-task-pulse 1.1s ease-in-out infinite;
}

.create-page .task-wait-pulse i:nth-child(2) { animation-delay: 120ms; }
.create-page .task-wait-pulse i:nth-child(3) { animation-delay: 240ms; }

@keyframes create-task-pulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.48; }
  50% { transform: scaleY(1); opacity: 1; }
}

.create-page .btn-send.is-submitting .ui-icon {
  opacity: 0;
}

.create-page .btn-send.is-submitting::after {
  content: '';
  position: absolute;
  inset: 11px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.create-page :is(button, a, input, textarea, [role="button"]):focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .create-page .remove-btn {
    width: 44px;
    height: 44px;
    top: -4px;
    right: -4px;
    opacity: 1;
    transform: none;
  }

  .create-page .gallery-filter,
  .create-page .gallery-card-actions button,
  .create-page .gallery-date-picker button,
  .create-page .model-option-inline,
  .create-page .create-select-option {
    min-height: 44px;
  }
}

/* Phones: the composer becomes a stacked bottom sheet. The mode switcher
   docks inside the panel top (owned by input.css ≤900), the prompt keeps the
   send button in its top-right corner, and the specification row wraps 2×2. */
@media (max-width: 768px) {
  .create-page {
    --input-panel-height: 470px;
  }

  .create-page .prompt-area > .btn-send {
    top: 14px;
    right: 14px;
    bottom: auto;
  }

  .create-page .settings-row {
    gap: 6px;
    flex-wrap: wrap;
    overflow: visible;
  }

  .create-page .settings-row > .model-selector-wrapper,
  .create-page .settings-row > .create-select-shell {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 calc(50% - 5px);
  }

  .create-page .settings-row > .create-select-shell:nth-child(even) .create-select-menu {
    right: 0;
    left: auto;
    transform-origin: right bottom;
  }

  .create-page .upload-card,
  .create-page .video-upload-card {
    height: 64px;
    min-height: 64px;
    margin-top: 6px;
    padding: 10px 12px;
  }

  .create-page .upload-card.has-images {
    padding: 3px 96px 3px 10px;
  }

  .create-page .upload-card.has-images .upload-controls {
    right: 10px;
  }

  .create-page .image-thumb-wrapper,
  .create-page .upload-card.has-images .image-thumb-wrapper,
  .create-page .video-upload-card .image-thumb-wrapper,
  .create-page .image-add-tile,
  .create-page .upload-card.has-images .image-add-tile {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
}

html {
  color-scheme: dark;
  background: var(--studio-bg);
}

body {
  background: var(--studio-bg);
  color: var(--studio-text);
  font-family: "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 0;
}

body::before,
body::after,
.bg-glow,
.particles {
  display: none !important;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

a,
button,
input,
textarea,
select,
[tabindex] {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  box-shadow: 0 0 0 3px rgba(155, 108, 255, 0.3) !important;
}

.ui-icon {
  color: currentColor;
}

/* Shared account shell */
.nav-user-area {
  top: 14px;
  right: 22px;
  gap: 8px;
}

.nav-user-area .nav-login-btn,
.user-avatar-trigger,
.nav-points,
.canvas-user-area .nav-login-btn {
  min-height: 38px;
  border: 1px solid var(--studio-line);
  border-radius: 5px;
  background: var(--studio-surface);
  color: var(--studio-text);
  box-shadow: none;
}

.nav-points {
  color: #d8c9ff;
}

.nav-user-area .nav-login-btn:hover {
  border-color: rgba(155, 108, 255, 0.55);
  background: var(--studio-surface-2);
}

.user-dropdown {
  border: 1px solid var(--studio-line) !important;
  border-radius: 7px !important;
  background: #14181a !important;
  box-shadow: var(--studio-shadow) !important;
  backdrop-filter: none !important;
}

.user-menu-item:hover {
  background: var(--studio-purple-soft) !important;
}

/* Authentication */
.modal-overlay {
  background: rgba(5, 7, 8, 0.84) !important;
  backdrop-filter: blur(5px) !important;
}

.modal-overlay.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#loginModal.modal-overlay.show {
  padding: 0;
}

#loginModal .modal-box.auth-split {
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none;
  border-radius: 0 !important;
}

#editProfileModal .modal-box {
  width: min(980px, calc(100vw - 40px)) !important;
  height: min(720px, calc(100dvh - 40px)) !important;
  max-height: min(720px, calc(100dvh - 40px));
  border: 1px solid var(--studio-line-strong) !important;
  border-radius: 8px !important;
  background: var(--studio-bg-deep) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58) !important;
  overflow: hidden;
}

.auth-visual {
  isolation: isolate;
  background:
    linear-gradient(180deg, transparent 30%, rgba(8, 10, 12, 0.95) 100%),
    url("https://cdn.jhuiai.top/home/qianduan/result-main.webp") center 28% / cover no-repeat !important;
}

.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block !important;
  background: linear-gradient(135deg, rgba(123, 80, 255, 0.14), transparent 48%) !important;
  backdrop-filter: none !important;
  mask-image: none !important;
}

.auth-visual::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  z-index: 2;
  width: clamp(110px, 10vw, 190px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(8, 10, 12, 0.16) 34%,
    rgba(8, 10, 12, 0.68) 72%,
    var(--studio-surface) 100%
  );
  pointer-events: none;
}

.auth-orb {
  display: none !important;
}

.auth-visual-overlay {
  background: transparent !important;
  padding: 42px !important;
}

.auth-visual-title {
  max-width: 360px;
  color: #fff !important;
  font-size: 48px !important;
  line-height: 1.08 !important;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.58) !important;
}

.auth-visual-subtitle {
  max-width: 320px;
  color: rgba(255, 255, 255, 0.78) !important;
}

.auth-form-panel {
  border-left: 0 !important;
  background: var(--studio-surface) !important;
}

.auth-form-panel::before {
  display: none !important;
}

.auth-form-title {
  color: var(--studio-text) !important;
  font-size: 27px !important;
}

.auth-form-desc,
.form-label,
.auth-footer-note {
  color: var(--studio-muted) !important;
}

.auth-tabs {
  padding: 3px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 6px !important;
  background: #0d1112 !important;
}

.auth-tab {
  border-radius: 4px !important;
  color: var(--studio-muted) !important;
}

.auth-tab.active {
  background: var(--studio-surface-3) !important;
  color: #e9e4ff !important;
}

.form-input {
  box-sizing: border-box;
  min-height: 46px;
  border: 1px solid var(--studio-line) !important;
  border-radius: 5px !important;
  background: #0d1112 !important;
  color: var(--studio-text) !important;
}

.form-input::placeholder {
  color: var(--studio-dim) !important;
}

.form-input:focus {
  border-color: rgba(155, 108, 255, 0.72) !important;
  background: #101416 !important;
  box-shadow: 0 0 0 3px rgba(155, 108, 255, 0.15) !important;
}

.btn-primary,
#btnSendRegSms,
#btnSendResetSms {
  border-radius: 5px !important;
}

#btnSendRegSms,
#btnSendResetSms {
  min-height: 46px;
  padding: 0 14px !important;
  white-space: nowrap;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.btn-primary {
  border: 0 !important;
  background: var(--studio-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(91, 70, 214, 0.28) !important;
}

.btn-primary::before {
  display: none !important;
}

.modal-close {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 5px !important;
  background: rgba(10, 13, 14, 0.78) !important;
  color: var(--studio-text) !important;
}

/* Create workspace */
.create-page {
  position: relative;
  isolation: isolate;
  height: 100dvh;
  overflow: hidden;
  background: var(--studio-bg);
}

.create-page .bg-glow {
  display: block !important;
  opacity: 1;
  background:
    radial-gradient(ellipse 62% 38% at 50% 38%, rgba(48, 57, 61, 0.16), transparent 72%),
    linear-gradient(180deg, #07090a 0%, #090c0d 52%, #050607 100%);
}

.create-page .bg-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(2, 3, 4, 0.48), transparent 22%, transparent 78%, rgba(2, 3, 4, 0.48)),
    radial-gradient(ellipse at 50% 46%, transparent 0 32%, rgba(3, 5, 6, 0.12) 72%, rgba(3, 5, 6, 0.42) 100%);
  pointer-events: none;
}

.create-page .bg-glow .floating-lines-canvas {
  opacity: 0.96;
}

.create-page .bg-glow.floating-lines-fallback {
  background:
    radial-gradient(ellipse 64% 40% at 50% 38%, rgba(48, 57, 61, 0.18), transparent 72%),
    radial-gradient(ellipse 42% 24% at 50% 82%, rgba(30, 36, 42, 0.16), transparent 76%),
    linear-gradient(180deg, #07090a 0%, #090c0d 52%, #050607 100%);
}

.create-floating-brand {
  top: 16px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--studio-text) !important;
  font-size: 16px;
  font-weight: 760;
  text-decoration: none;
}

.create-page .create-auth-hidden {
  display: none;
}

.create-page .auth-code-row {
  display: flex;
  gap: 8px;
}

.create-page .auth-code-row > .form-input {
  min-width: 0;
}

.create-floating-brand::after {
  content: "创作工作台";
  padding-left: 10px;
  border-left: 1px solid var(--studio-line-strong);
  color: var(--studio-dim);
  font-size: 12px;
  font-weight: 520;
}

.create-floating-brand .logo-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--studio-gradient);
  color: #fff;
}

.create-page .chat-container {
  position: absolute;
  inset: 64px 0 calc(var(--input-panel-height, 380px) + var(--input-panel-bottom, 0px));
  height: auto;
  max-width: 1500px;
  padding: 14px 28px 18px;
}

.create-page:not(:has(.chat-messages > *)) .chat-container {
  pointer-events: none;
}

.create-page .chat-messages {
  max-width: 1360px;
}

.create-page .message-group {
  gap: 12px;
  margin-bottom: 22px;
}

.create-page .message-content,
.create-page .task-card {
  border: 1px solid var(--studio-line);
  border-radius: 6px;
  background: var(--studio-surface);
  box-shadow: none;
}

.create-page .task-card {
  padding: 20px;
}

.create-page .task-meta-chip,
.create-page .gallery-source-chip {
  border: 1px solid var(--studio-line);
  border-radius: 4px;
  background: #0f1315;
  color: #c8cfcd;
}

.create-page .task-edit-btn,
.create-page .task-action-btn {
  border-color: rgba(155, 108, 255, 0.35);
  border-radius: 5px;
  background: var(--studio-purple-soft);
  color: #ded3ff;
}

.create-page .ai-result-image,
.create-page .ai-result-video,
.create-page .message-ref-img {
  border-radius: 4px;
}

.create-page .input-panel {
  width: min(1520px, calc(100% - 32px));
  min-height: 374px;
  border: 1px solid var(--studio-line-strong);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #0f1315;
  box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
}

.create-page .input-panel::before,
.create-page .media-mode-btn::before,
.create-page .btn-send::before {
  display: none !important;
}

.create-page .input-panel-content {
  min-height: 374px;
  margin-left: 90px;
  background: var(--studio-surface);
}

.create-page .image-composer-panel,
.create-page .video-composer-panel {
  min-height: 374px;
}

.create-page .media-mode-switcher {
  top: 18px;
  left: 15px;
  width: 74px;
  padding: 4px;
  gap: 6px;
  border: 1px solid var(--studio-line);
  border-radius: 6px;
  background: #0b0f10;
  box-shadow: none;
}

.create-page .media-mode-btn {
  min-height: 50px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--studio-muted);
  box-shadow: none;
  filter: none;
}

.create-page .media-mode-btn:hover {
  background: var(--studio-surface-2);
  color: var(--studio-text);
}

.create-page .media-mode-btn.active {
  background: var(--studio-gradient);
  color: #fff;
  box-shadow: 0 9px 22px rgba(98, 73, 220, 0.26);
}

.create-page .composer-panel-header {
  padding: 17px 18px 8px;
}

.create-page .composer-panel-title {
  color: var(--studio-text);
  font-size: 16px;
}

.create-page .composer-panel-subtitle {
  color: var(--studio-muted);
  font-size: 11px;
}

.create-page .tabs {
  margin: 0 18px;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--studio-line);
  border-radius: 6px;
  background: #0d1112;
}

.create-page .tab-item {
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  color: var(--studio-muted);
}

.create-page .tab-item.active {
  background: var(--studio-surface-3);
  color: #ded7f5;
  box-shadow: none;
}

.create-page .upload-card,
.create-page .video-upload-card {
  border: 1px solid var(--studio-line);
  border-radius: 5px;
  background: #0f1315;
  box-shadow: none;
}

.create-page .btn-add-image {
  border: 1px solid var(--studio-line-strong);
  border-radius: 4px;
  background: var(--studio-surface-2);
  color: var(--studio-text);
}

.create-page .image-counter {
  border-radius: 4px;
  background: #0d1112;
}

/* Points-cost chip: unified with the Create-page reference style. */
.create-page .point-cost-preview {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.1);
  background: #181818;
  color: #a3a3a3;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
}

.create-page .point-cost-preview strong {
  color: #f5f5f5;
}

.create-page .prompt-textarea,
.create-page .media-mention-editor,
.create-page .setting-select-inline,
.create-page .model-selector-trigger {
  width: 100%;
  border: 1px solid var(--studio-line);
  border-radius: 5px;
  background: #0d1112;
  color: var(--studio-text);
  box-shadow: none;
}

/* Desktop and tablet prompts keep their taller body; phones and narrow
   landscape phones follow input.css. */
@media (min-width: 821px) {
  .create-page .prompt-textarea {
    min-height: 118px;
    padding: 15px 64px 50px 15px;
  }
}

.create-page .prompt-textarea:focus,
.create-page .media-mention-editor:focus,
.create-page .setting-select-inline:focus,
.create-page .model-selector-trigger:focus {
  border-color: rgba(155, 108, 255, 0.72);
  background: #111618;
  box-shadow: 0 0 0 3px rgba(155, 108, 255, 0.14);
}

.create-page .btn-send {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: var(--studio-gradient);
  box-shadow: 0 10px 24px rgba(97, 70, 220, 0.28);
}

.create-page .btn-send:hover {
  transform: translateY(-1px);
}

.create-page .model-dropdown-inline,
.create-page .media-mention-popover {
  border: 1px solid var(--studio-line-strong);
  border-radius: 6px;
  background: #121719;
  box-shadow: var(--studio-shadow);
}

.create-page button.tab-item,
.create-page button.model-selector-trigger,
.create-page button.model-option-inline {
  font-family: inherit;
}

.create-page button.model-option-inline {
  width: 100%;
  border-right: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.create-page .model-option-inline.selected,
.create-page .model-option-inline:hover {
  background: var(--studio-purple-soft);
}

/* Gallery */
.gallery-view {
  background: var(--studio-bg) !important;
}

.gallery-topbar {
  border-bottom: 1px solid var(--studio-line) !important;
  background: #0d1112 !important;
  backdrop-filter: none !important;
}

.gallery-title {
  color: var(--studio-text) !important;
}

.gallery-subtitle,
.gallery-time,
.gallery-retention {
  color: var(--studio-muted) !important;
}

.gallery-filter,
.gallery-action-btn,
.gallery-close-btn {
  border: 1px solid var(--studio-line) !important;
  border-radius: 5px !important;
  background: var(--studio-surface) !important;
  color: var(--studio-muted) !important;
}

.gallery-filter.active {
  border-color: rgba(155, 108, 255, 0.5) !important;
  background: var(--studio-purple-soft) !important;
  color: #e7e0ff !important;
}

.gallery-card {
  border: 1px solid var(--studio-line) !important;
  border-radius: 5px !important;
  background: var(--studio-surface) !important;
  box-shadow: none !important;
}

.gallery-thumb,
.gallery-thumb-grid,
.gallery-thumb-placeholder {
  border-radius: 3px !important;
}

/* Purchase: the purchase page visuals are owned by /css/purchase.css
   (home-aligned workbench restyle). The studio skin block that used to
   live here was removed so the page stylesheet is the single source of
   truth for the checkout surface. */

/* Team */