/*
 * CMENG 视觉层
 * 只负责颜色、字体、边框、圆角、阴影和状态反馈。
 * 不修改布局、尺寸、位置和业务交互。
 */

:root {
  --ui-canvas: #f4f5f9;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8f8fb;
  --ui-surface-active: #efefff;
  --ui-ink: #191a22;
  --ui-copy: #4e5261;
  --ui-muted: #858a98;
  --ui-border: #e3e4ec;
  --ui-border-strong: #d4d6e2;
  --ui-accent: #5c56e8;
  --ui-accent-hover: #4943cf;
  --ui-accent-soft: #eeedff;
  --ui-success: #248a64;
  --ui-success-soft: #eaf7f1;
  --ui-danger: #c64b55;
  --ui-danger-soft: #fff0f1;
  --ui-warning: #986f24;
  --ui-warning-soft: #fff7e5;
  --ui-shadow-soft: 0 8px 28px rgba(35, 36, 54, .07);
  --ui-shadow-card: 0 18px 56px rgba(35, 36, 54, .10), 0 1px 0 rgba(255, 255, 255, .88) inset;
  --ui-shadow-float: 0 24px 70px rgba(30, 31, 48, .18);
}

body {
  color: var(--ui-ink);
  background:
    radial-gradient(circle at 62% 12%, rgba(92, 86, 232, .07), transparent 30rem),
    linear-gradient(180deg, #f8f8fb 0%, var(--ui-canvas) 42%, #f2f3f7 100%);
  font-family: "Microsoft YaHei UI", "Segoe UI Variable", "Segoe UI", sans-serif;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(92, 86, 232, .22);
  outline-offset: 2px;
}

/* 顶部与主导航 */
.announcement-bar {
  color: rgba(255, 255, 255, .94);
  background: linear-gradient(100deg, #23232d 0%, #34314f 54%, #5c56e8 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset;
}

.announcement-bar span {
  color: #3f39c5;
  background: #f1f0ff;
}

.topbar {
  background: rgba(248, 248, 251, .9);
  box-shadow: 0 1px 0 rgba(31, 32, 43, .05);
}

.mode-button {
  color: #fff;
  border-color: #25262f;
  background: #25262f;
  box-shadow: 0 5px 16px rgba(26, 27, 37, .12);
}

.mode-button:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.reset-link,
.api-state,
.account-chip small,
.account-chip > a {
  color: var(--ui-muted);
}

.account-chip,
.task-history-button {
  border-color: var(--ui-border);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 5px 18px rgba(35, 36, 54, .05);
}

.account-avatar,
.task-history-button b {
  color: #fff;
  background: var(--ui-accent);
}

.app-sidebar {
  border-color: var(--ui-border);
  background: rgba(251, 251, 253, .96);
  box-shadow: 10px 0 32px rgba(36, 37, 52, .035);
}

.side-brand::before,
.side-brand::after { content: none; }

.side-nav-item {
  color: #737786;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.side-nav-item:hover {
  color: #343540;
  background: #f0f0f5;
}

.side-nav-item.active {
  color: #3f3aaf;
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 0 var(--ui-accent);
}

.side-bottom {
  color: var(--ui-accent);
}

.side-bottom span {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
}

/* 生成首页 */
.direct-hero h1 {
  color: var(--ui-ink);
  font-weight: 720;
}

.direct-hero h1 em,
.creation-type-pill,
.generation-entry-prompt-title,
.generation-session-history > header span,
.asset-detail-summary > span,
.task-history-header > div > span,
.task-job-prompt small {
  color: var(--ui-accent);
}

.direct-hero p,
.direct-count,
.direct-asset-drop-copy,
.direct-upload-empty small {
  color: var(--ui-muted);
}

.direct-composer-card {
  border-color: rgba(92, 86, 232, .18);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--ui-shadow-card);
}

.direct-input-surface {
  border-color: var(--ui-border);
  background: #fcfcfe;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.direct-input-surface:focus-within {
  border-color: rgba(92, 86, 232, .55);
  box-shadow: 0 0 0 4px rgba(92, 86, 232, .09);
}

.direct-assets.dragging {
  background: var(--ui-accent-soft);
  box-shadow: inset 0 0 0 2px rgba(92, 86, 232, .16);
}

.direct-upload-empty > span,
.direct-add-card {
  color: var(--ui-accent);
  border-color: #c9c7ea;
  background: #f3f2ff;
}

.direct-upload-empty strong,
.direct-asset-drop-copy strong {
  color: var(--ui-copy);
}

.direct-add-card,
.direct-asset-card {
  box-shadow: 0 7px 18px rgba(38, 39, 57, .12);
}

.direct-asset-card {
  border-color: #fff;
}

.direct-add-card .direct-add-tooltip {
  color: #fff;
  background: #292a35;
  box-shadow: 0 10px 28px rgba(24, 25, 35, .22);
}

.direct-add-card .direct-add-tooltip::after {
  border-top-color: #292a35;
}

#directPrompt {
  color: var(--ui-ink);
  background: transparent;
}

#directPrompt::placeholder {
  color: #9a9eaa;
}

.creation-type-pill,
.tool-pill,
.tool-select,
.direct-audio,
.model-picker-trigger,
.image-spec-trigger,
.reference-trigger {
  color: #454854;
  border-color: var(--ui-border);
  background: #f9f9fc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.creation-type-pill:hover,
.tool-pill:hover,
.tool-select:hover,
.direct-audio:hover,
.model-picker-trigger:hover,
.image-spec-trigger:hover,
.reference-trigger:hover {
  color: #3f3aaf;
  border-color: #c8c5f3;
  background: #f2f1ff;
  box-shadow: 0 5px 16px rgba(92, 86, 232, .08);
}

.image-spec-trigger i,
.reference-trigger i {
  color: var(--ui-accent);
}

.model-cube {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(35, 36, 52, .08);
}

.model-cube img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.direct-generate b,
.direct-generate:not(.is-busy) {
  color: #fff;
}

.direct-generate b {
  background: var(--ui-accent);
  box-shadow: 0 9px 24px rgba(92, 86, 232, .24);
  transition: background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.direct-generate:hover b {
  background: var(--ui-accent-hover);
  box-shadow: 0 11px 28px rgba(73, 67, 207, .3);
}

.direct-generate.is-busy b,
.direct-generate:disabled b {
  color: #fff;
  background: #a8a9b5;
  box-shadow: none;
  opacity: .9;
}

.direct-progress,
.direct-video-result {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
}

.direct-progress-bar,
.task-job-progress,
.generation-entry-pending > div {
  background: #e8e8f0;
}

.direct-progress-bar i,
.task-job-progress i,
.generation-entry-pending > div i {
  background: linear-gradient(90deg, var(--ui-accent), #8c86ff);
}

/* 弹窗、下拉菜单与参数选择 */
.creation-type-menu,
.model-menu,
.image-spec-menu,
.reference-menu,
.generation-session-menu {
  color: var(--ui-ink);
  border-color: var(--ui-border);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--ui-shadow-float);
}

.creation-type-menu header,
.model-menu-title,
.model-menu-group,
.image-spec-menu header,
.reference-menu header {
  color: var(--ui-muted);
}

.creation-type-menu button,
.model-menu-item,
.image-ratio-options button,
.image-spec-segments button,
.reference-menu button,
.generation-session-menu button {
  color: var(--ui-copy);
  border-color: transparent;
  background: transparent;
}

.creation-type-menu button:hover,
.model-menu-item:hover,
.image-ratio-options button:hover,
.image-spec-segments button:hover,
.reference-menu button:hover,
.generation-session-menu button:hover {
  color: var(--ui-ink);
  background: #f3f3f7;
}

.creation-type-menu button.selected,
.model-menu-item.selected,
.image-ratio-options button.selected,
.image-spec-segments button.selected,
.reference-menu button.selected {
  color: #403ab4;
  border-color: #cbc8f6;
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 0 var(--ui-accent);
}

.model-menu-item.selected i,
.creation-type-menu button.selected b {
  color: var(--ui-accent);
}

.model-menu-item em,
.image-dimensions {
  color: #4943cf;
  background: #efefff;
}

.model-menu-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.model-menu-name-row strong { flex: 1 1 auto; min-width: 0; }
.model-face-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .02em;
  white-space: nowrap;
}
.model-face-badge.is-open { color: #08663e; border-color: #84dcb2; background: #dff8eb; }
.model-face-badge.is-locked { color: #b3261e; border-color: #ffb5a9; background: #fff0ec; }

.model-menu-section + .model-menu-section { border-top: 1px solid #ececf4; }
.model-menu { overscroll-behavior: contain; scrollbar-color: #c9c7ea transparent; scrollbar-width: thin; }
.model-menu-title { position: sticky; z-index: 4; top: 0; background: rgba(255,255,255,.98); backdrop-filter: blur(10px); }
.model-menu-group { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.model-menu-group small { min-width: 20px; padding: 1px 6px; border-radius: 999px; color: #7772c8; background: #efefff; font-size: 9px; text-align: center; }
.model-menu-featured .model-menu-group { color: #4943cf; background: linear-gradient(90deg, #f5f4ff, rgba(245,244,255,0)); }

@media (min-width: 681px) {
  .model-menu {
    top: auto;
    bottom: calc(100% + 10px);
    max-height: min(390px, var(--model-menu-available-height, 48vh));
    animation-name: model-menu-rise-in;
  }
  @keyframes model-menu-rise-in { from { opacity: 0; transform: translateY(5px); } }
}

.model-logo {
  overflow: hidden;
  color: inherit;
  border: 1px solid #e4e4eb;
  background: #fff;
  box-shadow: 0 4px 12px rgba(35, 36, 52, .07);
}

.model-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.model-logo.happyhorse-logo img {
  width: 27px;
  height: 24px;
}

.model-logo.kling-logo img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.direct-reference,
.direct-audio-reference,
.direct-warning {
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
}

/* 功能入口与灵感区 */
.feature-strip button {
  color: var(--ui-ink);
  border-color: var(--ui-border);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 5px 20px rgba(36, 37, 53, .035);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.feature-strip button:hover {
  border-color: #cbc8ef;
  background: #fff;
  box-shadow: var(--ui-shadow-soft);
}

.feature-strip small,
.inspiration-head > span {
  color: var(--ui-muted);
}

.feature-icon.blue,
.feature-icon.cyan,
.feature-icon.purple {
  background: linear-gradient(145deg, #4f49d6, #8c86ff);
}

.feature-icon.dark {
  background: #2a2b35;
}

.inspiration-head button {
  color: #6f7380;
}

.inspiration-head button.active {
  color: #403ab4;
  background: var(--ui-accent-soft);
  box-shadow: inset 0 -2px 0 var(--ui-accent);
}

/* 任务组与任务详情 */
.generation-session-sidebar {
  border-color: var(--ui-border);
  background: rgba(249, 249, 252, .97);
  box-shadow: 12px 0 34px rgba(36, 37, 52, .035);
}

.generation-session-sidebar-head strong,
.generation-session-history > header h1,
.generation-session-day > h2,
.asset-date-group h2 {
  color: var(--ui-ink);
}

.generation-session-sidebar-head span,
.generation-session-sidebar > p,
.generation-session-select small,
.generation-session-history > header small,
.generation-entry-copy > div,
.generation-entry-copy > div time {
  color: var(--ui-muted);
}

.new-generation-session {
  color: #343641;
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
}

.new-generation-session:hover {
  color: #403ab4;
  border-color: #c7c4f2;
  background: #f4f3ff;
}

.new-generation-session i {
  color: #fff;
  background: var(--ui-accent);
}

.generation-session-item {
  transition: background .18s ease, box-shadow .18s ease;
}

.generation-session-item:hover {
  background: #f0f0f5;
}

.generation-session-item.active {
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 0 var(--ui-accent);
}

.generation-session-select {
  color: #363844;
}

.generation-session-cover,
.generation-session-cover.empty {
  color: #7d7f8c;
  background: linear-gradient(145deg, #ececf3, #e2e2eb);
}

.generation-session-select strong em {
  color: #4943cf;
  background: #e8e7ff;
}

.generation-session-select > i {
  background: var(--ui-accent);
  box-shadow: 0 0 0 4px rgba(92, 86, 232, .1);
}

.generation-session-more {
  color: #696c79;
}

.generation-session-more:hover {
  color: #343640;
  background: rgba(255, 255, 255, .9);
}

.generation-session-menu button.danger {
  color: var(--ui-danger);
}

.generation-session-entry {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: 0 7px 24px rgba(35, 36, 54, .045);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.generation-session-entry:hover {
  border-color: #cecced;
  box-shadow: 0 14px 38px rgba(35, 36, 54, .1);
}

.generation-entry-summary {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

.generation-entry-copy > p {
  color: #333641;
}

.generation-entry-copy > div b {
  color: #5f6270;
}

.generation-entry-pending {
  color: var(--ui-muted);
  background: #eeeef3;
}

.generation-entry-failed {
  color: #9e434a;
  background: var(--ui-danger-soft);
}

.generation-entry-pending strong,
.generation-entry-failed strong {
  color: #434650;
}

.generation-session-entry > footer {
  border-color: #ececf2;
  background: #fcfcfe;
}

.generation-session-entry > footer button,
.generation-session-entry > footer a,
.task-job-actions a,
.task-job-actions button {
  color: #505361;
  border-color: var(--ui-border);
  background: #f8f8fb;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.generation-session-entry > footer button:hover,
.generation-session-entry > footer a:hover,
.task-job-actions a:hover,
.task-job-actions button:hover {
  color: #403ab4;
  border-color: #c8c5f3;
  background: #f1f0ff;
  box-shadow: 0 5px 14px rgba(92, 86, 232, .08);
}

.generation-session-entry > footer button.danger,
.task-job-actions button.danger {
  color: var(--ui-danger);
  border-color: #f0d3d6;
  background: #fff8f8;
}

.generation-session-entry > footer button.danger:hover,
.task-job-actions button.danger:hover {
  color: #ad3943;
  border-color: #e8bfc4;
  background: var(--ui-danger-soft);
}

.generation-reference-tile {
  border-color: #fff;
  background: #7b7e91;
  box-shadow: 0 6px 17px rgba(35, 36, 52, .16);
}

.generation-reference-tile.audio {
  background: linear-gradient(145deg, #5751d5, #8d87fb);
}

.has-session-history .direct-composer-card {
  box-shadow: 0 18px 58px rgba(35, 36, 54, .16);
}

/* 资产 */
.asset-view-tabs button,
.asset-filter-group button.active {
  color: #403ab4;
  background: var(--ui-accent-soft);
  box-shadow: inset 0 -2px 0 var(--ui-accent);
}

.asset-view-tabs span,
.asset-library-toolbar > span,
.asset-filter-group button,
.asset-library-empty {
  color: var(--ui-muted);
}

.asset-upload-button {
  color: #fff;
  background: #292a34;
  box-shadow: 0 8px 22px rgba(28, 29, 40, .13);
}

.asset-upload-button:hover {
  background: var(--ui-accent);
}

.library-card {
  border-radius: 12px;
  background: #e9e9ef;
  box-shadow: 0 0 0 1px rgba(35, 36, 52, .035);
}

.library-card:hover {
  box-shadow: 0 15px 36px rgba(35, 36, 54, .13);
}

.library-card-preview,
.library-card-preview img,
.library-card-preview video {
  background: #e9e9ef;
}

.library-card-preview span,
.library-card-preview .asset-delete {
  color: #fff;
  background: rgba(25, 26, 34, .72);
}

.library-audio-preview {
  color: #514ca6;
  background: linear-gradient(145deg, #f0efff, #dedcf3);
}

.library-audio-preview i {
  background: var(--ui-accent);
}

.asset-library-empty i {
  color: #9698a5;
  border-color: #cfd0db;
  background: rgba(255, 255, 255, .52);
}

/* 资产详情、任务记录与确认弹窗 */
.asset-preview-backdrop,
.asset-detail-media,
.asset-preview-stage {
  background: #eeeef2;
}

.asset-preview-modal,
.asset-detail-sidebar {
  color: var(--ui-ink);
  background: var(--ui-surface);
}

.asset-detail-sidebar,
.asset-detail-toolbar,
.asset-detail-footer {
  border-color: var(--ui-border);
}

.asset-preview-stage > img,
.asset-preview-stage > video {
  box-shadow: 0 18px 58px rgba(27, 28, 39, .18);
}

.asset-detail-toolbar button,
.asset-detail-footer button,
.asset-detail-close {
  color: #4d505d;
  border-color: var(--ui-border);
  background: #f8f8fb;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.asset-detail-toolbar button:hover,
.asset-detail-footer button:hover,
.asset-detail-close:hover {
  color: #403ab4;
  border-color: #c8c5f3;
  background: #f0efff;
}

.asset-prompt-panel h3,
.asset-detail-summary p {
  color: var(--ui-muted);
}

.asset-prompt-panel p {
  color: #30323c;
}

.asset-preview-fullscreen {
  color: #4943cf;
  border-color: #ceccf4 !important;
  background: #f0efff;
}

.asset-preview-use {
  color: #267552;
  border-color: #cce6d9 !important;
  background: var(--ui-success-soft);
}

.asset-preview-download {
  color: #fff;
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent);
}

.task-history-backdrop,
.confirm-choice-backdrop {
  background: rgba(25, 26, 36, .34);
  backdrop-filter: blur(8px);
}

.task-history-panel {
  color: var(--ui-ink);
  background: #f6f6fa;
  box-shadow: -28px 0 80px rgba(28, 29, 42, .22);
}

.task-history-header {
  border-color: var(--ui-border);
  background: rgba(255, 255, 255, .94);
}

.task-history-header button,
.task-history-summary span,
.task-job-card,
.confirm-choice-dialog {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

.task-history-summary span,
.task-job-card {
  box-shadow: var(--ui-shadow-soft);
}

.task-job-card > header span {
  color: #4943cf;
  background: var(--ui-accent-soft);
}

.task-job-card.completed > header span,
.task-job-spec .task-job-cost.ready {
  color: var(--ui-success);
  background: var(--ui-success-soft);
}

.task-job-card.failed > header span,
.task-job-error {
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

.task-job-spec span,
.task-job-prompt {
  color: #6d707d;
  background: #f4f4f8;
}

.task-job-spec .task-job-cost.pending {
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}

.task-job-actions button:last-child {
  color: #fff;
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.task-job-actions button:last-child:hover {
  color: #fff;
  border-color: var(--ui-accent-hover);
  background: var(--ui-accent-hover);
}

.confirm-choice-dialog {
  box-shadow: 0 32px 95px rgba(25, 26, 38, .27);
}

.confirm-choice-icon {
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}

.confirm-choice-copy h2 {
  color: var(--ui-ink);
}

.confirm-choice-copy p,
.confirm-choice-copy small {
  color: var(--ui-muted);
}

.confirm-choice-actions button {
  color: #4e515d;
  border-color: var(--ui-border);
  background: #f6f6f9;
}

.confirm-choice-actions button:hover {
  border-color: var(--ui-border-strong);
  background: #eeeeF3;
}

.confirm-choice-actions #confirmChoiceYes {
  color: #fff;
  border-color: var(--ui-danger);
  background: var(--ui-danger);
}

.confirm-choice-actions #confirmChoiceYes:hover {
  border-color: #ad3943;
  background: #ad3943;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}