:root {
  --rail: 184px;
  --control-radius: 6px;
  --control-height: 36px;
  --accent: #5564db;
  --accent-dark: #4654c5;
  --accent-soft: #edf0ff;
}

body.dark {
  color-scheme: dark;
  --bg: #121518;
  --panel: #1e2327;
  --subtle: #2a3036;
  --text: #f0f1f4;
  --muted: #959ba5;
  --border: #414a536b;
  --accent: #a4b0ff;
  --accent-dark: #c0c8ff;
  --accent-soft: #282e48;
  --error: #ff938d;
  --shadow: 0 12px 36px #00000020;
  --button: #5a68ee;
  --button-hover: #6c79fc;
  --input: #14191db3;
}

body:not(.dark) {
  color-scheme: light;
  --button: #5564db;
  --button-hover: #4654c5;
  --input: #fff;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: "Manrope", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  min-height: 100dvh;
}

button,
a,
input,
textarea,
select {
  transition:
    background-color 150ms,
    border-color 150ms,
    color 150ms;
}

.rail {
  padding: 25px 12px 20px;
  background: var(--bg);
}

body.dark .rail {
  background: linear-gradient(165deg, #202329, #14171b 48%, #121518);
  box-shadow: inset -1px 0 0 #ffffff05;
}

.brand-mark {
  width: 100%;
  height: 43px;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  display: flex;
  gap: 11px;
  padding-left: 9px;
}

body.dark .brand-mark {
  color: var(--text);
}

.brand-symbol {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  color: var(--accent);
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(145deg, #cad5ff, #8297ee);
  color: #263660;
  box-shadow:
    inset 0 1px 0 #ffffff80,
    0 4px 12px #00000035;
  width: 39px;
  height: 39px;
  font-size: 21px;
  font-weight: 750;
}

.brand-symbol svg {
  width: 24px;
  height: 24px;
  transform: rotate(-8deg);
}

.rail-wordmark {
  font-size: 21px;
  font-weight: 750;
  white-space: nowrap;
  text-align: left;
}

.rail-wordmark small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  margin-top: 5px;
  color: var(--muted);
}

.rail nav {
  margin-top: 44px;
  gap: 10px;
}

.rail-item,
.rail-bottom .rail-item {
  width: 100%;
  height: 46px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 17px;
  gap: 13px;
  font-size: 14px;
  border-radius: 7px;
  color: var(--muted);
}

.rail-item svg {
  width: 19px;
  height: 19px;
}

.rail-item.active:before {
  left: -1px;
  width: 3px;
  height: 20px;
  border-radius: 2px;
}

body.dark .rail-item.active {
  background: linear-gradient(110deg, #3a3e57, #292f40);
  color: #d6dfff;
  box-shadow:
    inset 0 1px 0 #ffffff0d,
    0 5px 14px #00000014;
}

body.dark .rail-item:hover:not(.active) {
  background: #ffffff07;
  color: #e1e7ee;
}

.rail-bottom {
  width: 100%;
  gap: 8px;
}
.rail-divider {
  height: 1px;
  margin: 8px 13px;
  background: var(--border);
}
.workbench-short {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  min-height: 60px;
  padding: 0 38px;
  background: var(--bg);
}

body.dark .topbar {
  background: #171b1f;
  box-shadow: 0 1px 0 #ffffff03;
}

.brand-name {
  font-size: 15px;
  gap: 12px;
}

.mobile-brand {
  display: none;
}

.desktop-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.desktop-breadcrumb svg {
  width: 15px;
  height: 15px;
}

.brand-name > span:nth-of-type(2) {
  color: var(--muted);
}

.topbar-actions {
  gap: 15px;
}

.connection {
  font-size: 11px;
  margin-right: 7px;
}

.wallet-button {
  height: 39px;
  gap: 7px;
  font-size: 11px;
  padding: 0 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.wallet-button > svg:first-child {
  color: #e6b86a;
}

.wallet-button b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.top-frozen {
  padding-left: 12px;
  margin-left: 5px;
  border-left: 1px solid var(--border);
}

.top-frozen b {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}

.recharge-button {
  background: linear-gradient(135deg, #cad6ff, #9eb3f6);
  border: 1px solid #d9e2ff5c;
  border-radius: 6px;
  color: #243554;
  font-size: 12px;
  font-weight: 650;
  min-height: 39px;
  padding: 0 16px;
  box-shadow:
    inset 0 1px 0 #ffffff63,
    0 3px 10px #00000017;
}

.recharge-button:hover {
  border-color: var(--accent);
}

.account-button {
  background: var(--subtle);
  min-height: 39px;
  padding: 0 12px;
  font-size: 12px;
}

main {
  max-width: 1510px;
  padding: 22px 38px 0;
}

.creation-stage {
  position: relative;
  isolation: isolate;
  padding-top: 32px;
  margin-bottom: 32px;
}

.stage-art {
  position: absolute;
  top: -30px;
  bottom: 12px;
  right: -38px;
  width: 70%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.88;
  mask-image: linear-gradient(#000 0%, #000 76%, transparent 100%);
}

.stage-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% center;
}
@media (min-width: 1025px) {
  .stage-art img {
    transform: translateX(44px);
  }
}

.stage-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg), transparent 68%);
}

body:not(.dark) .stage-art {
  opacity: 0.24;
}

.creation-stage .composer,
.creation-stage .page-heading {
  width: calc(100% - 250px);
}

.page-heading {
  min-height: 40px;
  margin-bottom: 14px;
}

.eyebrow {
  font-size: 10px;
}

.eyebrow > span {
  width: 14px;
}

h1 {
  font-size: 32px;
  line-height: 1.4;
  margin-top: 0;
}

.heading-right {
  align-self: center;
  margin: 12px 0 0;
  font-size: 11px;
}

.composer {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

body.dark .composer {
  background: linear-gradient(135deg, #2b3035e8, #1b2024ed 65%);
  border-color: #9faebb46;
  box-shadow:
    inset 0 1px 0 #ffffff0b,
    0 20px 50px #05090e38;
  backdrop-filter: blur(14px);
}

.composer:focus-within {
  border-color: #6976ce80;
}

.composer-top {
  padding: 12px 23px 0;
}

.composer-state {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
}

.composer-state .icon-button {
  width: 29px;
  height: 29px;
}

.segmented {
  background: #10151b66;
  padding: 3px;
  border-radius: 6px;
}

.segmented button {
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.segmented button.active {
  background: linear-gradient(135deg, #404959, #303845);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 #ffffff12,
    0 2px 5px #00000030;
}

body:not(.dark) .segmented,
body:not(.dark) .segmented button.active {
  background: var(--subtle);
}

.composer-note {
  font-size: 11px;
}

.composer-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 24px 16px;
}

.prompt-area {
  flex: none;
  padding: 0;
  min-width: 0;
}

.prompt-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.prompt-label svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.prompt-area textarea {
  height: 234px;
  min-height: 182px;
  max-height: 70dvh;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input);
  font-size: 15px;
  line-height: 2;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  box-shadow: inset 0 2px 8px #00000012;
}

body.dark .prompt-area textarea {
  border-color: #8b9dad3b;
  background: #11181e8c;
  box-shadow:
    inset 0 2px 10px #050a101f,
    0 1px 0 #ffffff04;
}

body.dark .prompt-area textarea:focus {
  border-color: #a6b5ff70;
}

textarea::placeholder,
input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.prompt-bottom {
  margin-top: 0;
  padding-top: 6px;
  font-size: 11px;
  min-height: 25px;
}

.mention-trigger {
  color: var(--muted);
  font-size: 11px;
}

.mention-trigger:hover {
  color: var(--accent);
}

.mention-menu {
  bottom: 35px;
  border-color: #6976ce70;
  box-shadow: 0 14px 40px #00000040;
}

.reference-panel {
  width: 100%;
  max-height: none;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 12px 0 0;
  display: block;
  align-items: start;
}

.reference-panel:has(.media-grid:empty) {
  grid-template-columns: 1fr;
}

.reference-panel:has(.media-grid:empty) .reference-head {
  flex-direction: row;
  align-items: center;
}

.reference-head,
.reference-title,
.reference-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.reference-head {
  justify-content: space-between;
  gap: 10px;
  flex-direction: row;
  align-items: center;
}

.reference-title b {
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.media-counters {
  margin: 0;
  font-size: 11px;
  gap: 12px;
}

.media-counters svg {
  width: 12px;
  height: 12px;
}

.reference-actions {
  gap: 6px;
  flex-shrink: 0;
}

.upload-drop,
.reference-panel:has(.media-item) .upload-drop {
  flex-direction: row;
  width: auto;
  min-height: 32px;
  height: 32px;
  padding: 0 11px;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--subtle);
  color: var(--text);
}

body.dark .upload-drop {
  background: linear-gradient(150deg, #41495280, #29323980);
  border-color: #8396a54a;
  box-shadow: inset 0 1px 0 #ffffff0a;
}

body.dark .upload-drop {
  background: var(--subtle);
}

.upload-drop > svg {
  width: 14px;
  height: 14px;
  margin: 0;
}

.upload-drop b {
  font-size: 11px;
  font-weight: 500;
}

.upload-options {
  flex-direction: row;
  padding: 0;
  gap: 6px;
}

.upload-options button {
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  justify-content: center;
  font-size: 11px;
  border: 1px solid transparent;
  border-radius: 5px;
}

.upload-options button:hover {
  background: var(--subtle);
  border-color: var(--border);
}

.upload-options svg {
  width: 14px;
  height: 14px;
}

.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding: 1px;
}

.media-grid:empty {
  margin-top: 0;
}

.media-item {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 5px;
  box-shadow: 0 2px 5px #0000001a;
}

.media-item:hover {
  border-color: #a2b1eb99;
}

.media-item .media-token {
  background: #15171cdb;
  color: #d4daff;
  line-height: 20px;
  font-size: 9px;
}

body.dark .media-token {
  background: #15171cdb;
}

.media-remove {
  width: 20px;
  height: 20px;
  top: 3px;
  right: 3px;
  background: #14171be6;
  border: 1px solid #ffffff30;
  color: #fff;
}

.media-remove:hover {
  background: #713e41;
}

.composer-toolbar {
  padding: 13px 24px;
  gap: 16px;
  background: var(--input);
}

body.dark .composer-toolbar {
  background: #151b20a6;
  box-shadow: inset 0 1px 0 #ffffff03;
}

.generation-settings {
  gap: 8px;
}

.setting-select {
  background: var(--subtle);
  height: 52px;
  padding: 0 11px;
  border-radius: 6px;
  gap: 8px;
  min-width: 105px;
  background: linear-gradient(140deg, #353e47b3, #242c33b3);
  border-color: #7e909f45;
  box-shadow:
    inset 0 1px 0 #ffffff08,
    0 2px 3px #0000000b;
}

body:not(.dark) .setting-select {
  background: var(--subtle);
}

.setting-select:hover {
  border-color: #a1b0ff80;
}

.setting-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.setting-caption {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.setting-select > svg:first-child {
  width: 17px;
  height: 17px;
}

.setting-select select {
  font-size: 13px;
}

.setting-select option {
  color: var(--text);
  background: var(--panel);
}

.model-setting {
  min-width: 160px;
  max-width: 260px;
}

.toolbar-divider {
  display: none;
}

.generate-action {
  gap: 17px;
}

.estimate {
  font-size: 11px;
}

.estimate b {
  color: #d9b776;
  font-size: 21px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body:not(.dark) .estimate b {
  color: #95712e;
}

.estimate small {
  font-size: 10px;
}

.primary-button,
body.dark .primary-button {
  background: linear-gradient(120deg, #8179ee, #5a68ed 62%, #557be8);
  color: #fff;
  border: 1px solid #a8b0ff45;
  border-radius: 6px;
  min-height: 43px;
  padding: 0 19px;
  box-shadow:
    inset 0 1px 0 #ffffff42,
    inset 0 -1px 0 #20297b35,
    0 5px 15px #11172f40;
  font-size: 14px;
  font-weight: 600;
}

.primary-button:hover,
body.dark .primary-button:hover {
  background: linear-gradient(120deg, #9992ff, #6d7afa 62%, #648bf5);
  box-shadow:
    inset 0 1px 0 #ffffff60,
    0 7px 18px #11172f55;
}

.primary-button:active {
  transform: translateY(1px);
}

#generateButton {
  min-width: 160px;
  min-height: 52px;
  justify-content: space-between;
  font-size: 14px;
}

#generateButton > svg:last-child {
  width: 25px;
  height: 19px;
  padding-left: 7px;
  border-left: 1px solid #ffffff38;
}

.section-heading h2 {
  font-size: 18px;
}

.section-heading {
  margin-bottom: 19px;
  padding-bottom: 0;
  border-bottom: 0;
}

.recent-section .section-heading {
  margin-bottom: 15px;
}

.section-heading > div:first-child {
  gap: 10px;
}

.count-label,
body.dark .count-label {
  background: var(--subtle);
  color: var(--muted);
}

.text-button {
  color: var(--muted);
}

.text-button:hover {
  color: var(--accent);
}

.recent-grid {
  gap: 16px;
}

.result-card {
  border-radius: 7px;
  border-color: var(--border);
}

body.dark .result-card {
  background: linear-gradient(155deg, #262d33, #1a2026);
  border-color: #7a8d9f33;
  box-shadow:
    inset 0 1px 0 #ffffff05,
    0 8px 20px #070d1218;
}

.result-card:hover {
  border-color: #6976ce70;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 #ffffff08,
    0 10px 24px #050a1429;
}

.result-cover,
body.dark .result-cover {
  background: var(--subtle);
}

.cover-play {
  background: #15171f99;
  border: 1px solid #ffffff4a;
  opacity: 0;
}

.result-cover[data-cover-state="ready"]:hover .cover-play,
.result-cover[data-cover-state="ready"]:focus-visible .cover-play {
  opacity: 1;
}

.cover-tag {
  bottom: 9px;
  right: auto;
  left: 9px;
  background: #111418b8;
  font-size: 10px;
}

.cover-status {
  position: absolute;
  bottom: 9px;
  right: 9px;
  background: #111418dc;
  border: 1px solid #ffffff20;
  border-radius: 4px;
  padding: 4px 7px;
}

.task-status.success {
  color: #7acba9;
}

.task-status.active {
  color: #98baff;
}

.task-status.failed {
  color: #ff938d;
}

body:not(.dark) .task-status.success {
  color: #25845f;
}

body:not(.dark) .task-status.failed {
  color: #b84b49;
}

body:not(.dark) .task-status.active {
  color: #5564db;
}

.cover-status .task-status {
  color: #d2dcff;
  font-size: 10px;
}

.cover-status .task-status.success {
  color: #8eddba;
}

.cover-status .task-status.failed {
  color: #ffaaa4;
}

.result-info {
  padding: 11px 12px;
}

.result-info h3 {
  font-size: 13px;
  font-weight: 550;
  margin-bottom: 9px;
}

.result-model {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
}

.result-model span {
  flex-shrink: 0;
}

.result-meta {
  margin-top: 7px;
  font-size: 10px;
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
}

.result-actions .outline-button {
  flex: 1;
  min-width: 0;
  min-height: 35px;
  font-size: 11px;
  background: var(--subtle);
  padding: 0 8px;
}

body.dark .result-actions .outline-button,
body.dark .outline-button {
  background: linear-gradient(135deg, #343f4980, #28323b80);
  border-color: #8396a538;
  box-shadow: inset 0 1px 0 #ffffff06;
}

.result-actions .icon-button {
  width: 34px;
  height: 35px;
  border: 1px solid var(--border);
}

.draft-section {
  padding: 18px 0 26px;
}

.draft-section summary {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--muted);
}

.draft-section summary::-webkit-details-marker {
  display: none;
}

.draft-section summary svg {
  width: 14px;
  height: 14px;
}

.draft-section[open] summary svg {
  transform: rotate(180deg);
}

.draft-section .draft-grid {
  margin-top: 17px;
}

main {
  padding-bottom: 28px;
}

.outline-button:hover {
  border-color: #6976ce80;
}

.empty-state,
body.dark .empty-state {
  background: transparent;
  border-color: var(--border);
}

.empty-state p,
.empty-state > svg {
  color: var(--muted);
}

.page-footer {
  color: var(--muted);
}

.task-row:hover {
  background: var(--subtle);
}

.task-thumb,
.asset-cover {
  background: var(--subtle);
}

.api-dialog pre,
.task-player {
  background: #101215;
  color: #dce0eb;
}

.recharge-balance small {
  color: var(--muted);
}

.pending-notice {
  background: #b18c4020;
  color: #d9b776;
}

.toast {
  left: calc(50% + var(--rail) / 2);
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

@media (max-width: 1280px) {
  :root {
    --rail: 164px;
  }
  .topbar {
    padding: 0 28px;
  }
  main {
    padding: 22px 28px 0;
  }
  .creation-stage .composer,
  .creation-stage .page-heading {
    width: calc(100% - 200px);
  }
  .stage-art {
    right: -28px;
    width: 75%;
  }
  .connection {
    display: none;
  }
  .composer-toolbar {
    gap: 18px;
  }
  .generate-action {
    width: 100%;
    justify-content: flex-end;
  }
  .generation-settings {
    width: 100%;
  }
  .model-setting {
    flex: 1;
    max-width: none;
  }
  .model-setting select {
    width: 100%;
    max-width: none;
  }
  .result-model {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  :root {
    --rail: 76px;
  }
  .rail {
    padding: 24px 9px 18px;
  }
  .rail-wordmark {
    display: none;
  }
  .brand-mark {
    justify-content: center;
    padding: 0;
  }
  .rail-item,
  .rail-bottom .rail-item {
    height: 62px;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    font-size: 10px;
    gap: 7px;
  }
  .rail-item.active:before {
    left: -4px;
  }
  .topbar-actions {
    gap: 10px;
  }
  .top-frozen {
    display: none;
  }
  .reference-title {
    gap: 10px;
  }
  .recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .creation-stage .composer,
  .creation-stage .page-heading {
    width: 100%;
  }
  .stage-art {
    opacity: 0.43;
    width: 95%;
  }
  .result-model {
    flex-direction: row;
  }
}

@media (max-width: 760px) {
  .stage-art {
    width: calc(100% + 32px);
    right: -16px;
    top: -24px;
    bottom: auto;
    height: 550px;
    opacity: 0.4;
  }
  .stage-art::after {
    background: linear-gradient(90deg, var(--bg), #12151844 70%);
  }
  body:not(.dark) .stage-art {
    opacity: 0.15;
  }
  .rail {
    inset: auto 0 0;
    width: 100%;
    height: 64px;
    padding: 5px 6px max(5px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: row;
    border-right: 0;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .rail .brand-mark,
  .rail-avatar {
    display: none;
  }
  .rail nav {
    width: auto;
    flex: 5;
    margin: 0;
    display: flex;
    gap: 0;
  }
  .rail-bottom {
    display: flex;
    width: auto;
    flex: 2;
    margin: 0;
    gap: 0;
  }
  .rail-divider,
  .workbench-full {
    display: none;
  }
  .workbench-short {
    display: inline;
  }
  .rail-item,
  .rail-bottom .rail-item {
    flex: 1;
    height: 52px;
    min-width: 0;
    font-size: 9px;
    gap: 4px;
    padding: 0 2px;
  }
  .rail-item.active:before {
    display: none;
  }
  .rail-item svg {
    width: 18px;
    height: 18px;
  }
  .app-shell {
    margin-left: 0;
    padding-bottom: 72px;
  }
  .topbar {
    min-height: 64px;
    padding: 0 16px;
    gap: 8px;
  }
  .brand-name {
    font-size: 15px;
    gap: 0;
  }
  .mobile-brand {
    display: inline;
    font-size: 14px;
  }
  .desktop-breadcrumb {
    display: none;
  }
  .topbar-actions {
    gap: 10px;
  }
  .wallet-button {
    gap: 4px;
  }
  .wallet-button b {
    font-size: 12px;
  }
  .wallet-button > svg:first-child {
    width: 15px;
  }
  .recharge-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
  .account-button {
    width: 32px;
    padding: 0;
    justify-content: center;
  }
  .account-button span {
    display: none;
  }
  .account-button svg {
    width: 16px;
  }
  main {
    padding: 24px 16px 0;
  }
  .page-heading {
    min-height: 39px;
    margin-bottom: 17px;
  }
  .eyebrow {
    font-size: 9px;
  }
  h1 {
    font-size: 25px;
  }
  .heading-right {
    font-size: 10px;
  }
  .composer-top {
    padding: 13px 14px 0;
    gap: 7px;
  }
  .segmented button {
    font-size: 11px;
    padding: 0 9px;
    min-height: 31px;
  }
  .composer-note {
    font-size: 9px;
  }
  .composer-state {
    gap: 1px;
    font-size: 9px;
  }
  .composer-state .icon-button {
    width: 25px;
    height: 29px;
  }
  .composer-body {
    padding: 18px 15px;
    gap: 16px;
  }
  .prompt-label {
    font-size: 11px;
    margin-bottom: 9px;
  }
  .prompt-area textarea {
    height: 286px;
    min-height: 234px;
    max-height: 75dvh;
    font-size: 14px;
    line-height: 1.9;
    padding: 12px;
  }
  .prompt-bottom {
    font-size: 10px;
  }
  .mention-trigger {
    font-size: 10px;
  }
  .reference-panel {
    display: block;
    border-bottom: 0;
    padding: 13px 0 0;
    max-height: none;
  }
  .reference-head {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .reference-title {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .reference-title b {
    font-size: 11px;
  }
  .media-counters {
    gap: 9px;
    font-size: 10px;
  }
  .reference-actions {
    gap: 6px;
  }
  .reference-panel:has(.media-grid:empty) .reference-head {
    flex-wrap: wrap;
  }
  .upload-options {
    flex-direction: row;
    padding: 0;
    gap: 4px;
  }
  .upload-drop,
  .reference-panel:has(.media-item) .upload-drop {
    min-height: 32px;
    font-size: 11px;
    padding: 0 9px;
  }
  .upload-options button {
    font-size: 10px;
    height: 32px;
    padding: 0 7px;
  }
  .media-grid {
    gap: 7px;
    margin-top: 10px;
    max-height: 143px;
  }
  .media-item {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .media-item .media-token {
    font-size: 8px;
    line-height: 18px;
  }
  .composer-toolbar {
    padding: 15px;
    gap: 17px;
  }
  .generation-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
  }
  .model-setting,
  .ratio-setting {
    grid-column: 1/-1;
    min-width: 0;
    max-width: none;
  }
  .setting-select {
    height: 49px;
    padding: 0 8px;
    gap: 5px;
    min-width: 0;
  }
  .setting-select select {
    width: 100%;
    font-size: 11px;
  }
  .setting-caption {
    font-size: 9px;
  }
  .setting-select > svg:first-child {
    width: 14px;
    height: 14px;
  }
  .generate-action {
    gap: 10px;
    justify-content: space-between;
  }
  .estimate {
    font-size: 10px;
  }
  .estimate b {
    font-size: 19px;
  }
  .estimate small {
    font-size: 9px;
    max-width: 125px;
  }
  #generateButton {
    min-width: 125px;
    min-height: 43px;
    font-size: 12px;
    padding: 0 13px;
  }
  .section-heading h2 {
    font-size: 17px;
  }
  .section-heading .text-button {
    font-size: 11px;
  }
  .recent-grid {
    gap: 11px;
  }
  .result-info {
    padding: 10px;
  }
  .result-info h3 {
    font-size: 11px;
  }
  .result-model {
    flex-direction: column;
    gap: 5px;
    font-size: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .result-meta {
    font-size: 9px;
  }
  .result-actions {
    gap: 5px;
    margin-top: 11px;
    flex-wrap: wrap;
  }
  .result-actions .outline-button {
    padding: 0 5px;
    font-size: 10px;
    gap: 4px;
    min-height: 30px;
  }
  .result-actions .icon-button {
    width: 25px;
    height: 30px;
  }
  .cover-status {
    padding: 3px 5px;
    bottom: 7px;
    right: 7px;
  }
  .cover-status .task-status {
    font-size: 8px;
  }
  .cover-tag {
    font-size: 8px;
    left: 7px;
    bottom: 7px;
  }
  .toast {
    left: 50%;
    bottom: 80px;
  }
}

@media (min-width: 1280px) {
  .reference-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 10px;
  }
  .reference-head {
    display: contents;
  }
  .reference-title {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    flex: 0 0 166px;
  }
  .media-grid {
    order: 2;
    flex: 1;
    min-width: 0;
    max-height: 74px;
    margin-top: 0;
  }
  .reference-actions {
    order: 3;
    margin-left: auto;
  }
  .composer-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
  }
  .generation-settings {
    width: auto;
    display: grid;
    grid-template-columns:
      minmax(140px, 1.4fr) repeat(2, minmax(85px, 1fr))
      minmax(105px, 1.1fr);
    gap: 8px;
  }
  .setting-select,
  .model-setting {
    min-width: 0;
    max-width: none;
  }
  .setting-select select {
    width: 100%;
    max-width: none;
  }
  .generate-action {
    width: auto;
    gap: 14px;
  }
}

@media (min-width: 1280px) and (max-width: 1400px) {
  .creation-stage .composer,
  .creation-stage .page-heading {
    width: calc(100% - 160px);
  }
}

@media (min-width: 1280px) and (max-height: 950px) {
  .topbar {
    min-height: 56px;
  }
  main {
    padding-top: 10px;
    padding-bottom: 0;
  }
  .page-heading {
    min-height: 36px;
    margin-bottom: 12px;
  }
  h1 {
    font-size: 28px;
  }
  .creation-stage {
    padding-top: 28px;
    margin-bottom: 28px;
  }
  .composer-top {
    padding: 12px 20px 0;
  }
  .segmented button {
    min-height: 27px;
    font-size: 11px;
  }
  .composer-body {
    padding: 12px 20px;
    gap: 8px;
  }
  .prompt-area textarea {
    height: clamp(166.4px, calc(130dvh - 873.6px), 208px);
    min-height: 145.6px;
    padding: 10px 13px;
  }
  .reference-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
  }
  .reference-head {
    display: contents;
  }
  .reference-title {
    gap: 7px;
  }
  .media-counters {
    gap: 9px;
    font-size: 10px;
  }
  .media-grid {
    margin-top: 0;
    max-height: 66px;
  }
  .media-item {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .media-item .media-token {
    font-size: 8px;
    line-height: 18px;
  }
  .composer-toolbar {
    padding: 12px 20px;
  }
  .setting-select,
  #generateButton {
    height: 44px;
    min-height: 44px;
  }
  .recent-section .section-heading {
    margin-bottom: 10px;
  }
  .recent-section {
    margin-bottom: 0;
  }
  .recent-grid {
    gap: 14px;
  }
  .result-cover {
    aspect-ratio: 2.2;
  }
  .result-info {
    padding: 8px;
  }
  .result-info h3 {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.4;
  }
  .result-model {
    font-size: 10px;
  }
  .result-meta {
    display: none;
  }
  .result-actions {
    margin-top: 8px;
  }
  .result-actions .outline-button,
  .result-actions .icon-button {
    height: 29px;
    min-height: 29px;
  }
}

/* Shared finishing rules for the editor, records and dialogs. */
:is(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
:is(button, select, input):disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
button:disabled:hover {
  transform: none;
}
.icon-button,
.outline-button,
.account-button {
  border-radius: var(--control-radius);
}
.dialog .outline-button,
.dialog .primary-button,
.view .page-heading .primary-button {
  min-height: var(--control-height);
  font-size: 13px;
}
.dialog input:not([type="checkbox"]),
.dialog textarea,
.dialog > form > select,
.search-field,
.date-field,
#taskModelFilter,
#pageSize {
  background: var(--input);
  border-radius: var(--control-radius);
}
.search-field:focus-within,
.date-field:focus-within {
  border-color: var(--accent);
}
.task-charge,
.task-time,
.detail-meta,
.count-label,
#pageNumber {
  font-variant-numeric: tabular-nums;
}
.result-cover[data-cover-media],
body.dark .result-cover[data-cover-media],
.task-thumb[data-cover-media] {
  background: #14171b;
  isolation: isolate;
}
.result-cover[data-cover-media] > :is(video, img),
.task-thumb[data-cover-media] > :is(video, img) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 180ms;
}
[data-cover-state="ready"] > :is(video, img) {
  opacity: 1 !important;
}
.cover-placeholder {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #a0a9b7;
  font-size: 11px;
  padding: 12px;
  text-align: center;
  line-height: 1.6;
}
.cover-placeholder svg,
.player-status:not(.player-error) svg {
  width: 20px;
  height: 20px;
  animation: media-spin 1.1s linear infinite;
}
.result-cover .cover-placeholder {
  position: absolute;
  inset: 8px 8px 38px;
  align-content: center;
  padding: 0;
}
[data-cover-state="ready"] .cover-placeholder {
  display: none;
}
.cover-placeholder .cover-unavailable-icon,
[data-cover-state="unavailable"] .cover-placeholder .cover-spinner {
  display: none;
}
[data-cover-state="unavailable"] .cover-placeholder .cover-unavailable-icon {
  display: block;
  animation: none;
  opacity: 0.5;
}
.task-thumb .cover-placeholder span {
  display: none;
}
.result-cover:has(.cover-placeholder) .cover-tag,
.result-cover:has(.cover-placeholder) .cover-status,
.cover-play {
  z-index: 1;
}
.result-info h3 {
  font-weight: 600;
}
.result-actions .outline-button:hover,
.result-actions .icon-button:hover {
  background: var(--accent-soft);
}
.task-table-head {
  background: color-mix(in srgb, var(--subtle) 55%, var(--panel));
}
.task-copy > button {
  font-weight: 550;
}
.task-copy > button:hover {
  color: var(--accent);
}
.task-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--panel));
}
.dialog {
  border-color: color-mix(in srgb, var(--muted) 30%, transparent);
  box-shadow:
    0 24px 90px #00000055,
    inset 0 1px 0 #ffffff08;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.dialog::backdrop {
  background: #090b10b0;
  backdrop-filter: blur(7px);
}
.dialog-heading h2 {
  font-size: 20px;
  font-weight: 650;
}
.task-dialog > .dialog-heading {
  position: sticky;
  top: -25px;
  z-index: 3;
  background: var(--panel);
  margin: -25px -25px 18px;
  padding: 20px 25px 16px;
  border-bottom: 1px solid var(--border);
}
.task-player {
  height: min(40dvh, 420px);
  min-height: 180px;
  border: 1px solid var(--border);
}
.task-player > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.player-status {
  position: absolute;
  inset: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  font-size: 12px;
  background: #101215cc;
  pointer-events: none;
}
.player-error {
  color: #ffc5a0;
}
.detail-meta {
  margin: 14px 0;
  gap: 6px;
}
.detail-meta > span {
  color: var(--text);
  font-size: 11px;
  background: transparent;
}
.detail-prompt-section {
  border-block: 1px solid var(--border);
}
.detail-prompt-section summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.detail-prompt-section summary::-webkit-details-marker {
  display: none;
}
.detail-prompt-section summary > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}
.detail-prompt-section summary svg {
  width: 15px;
  height: 15px;
}
.detail-prompt-section[open] summary svg {
  transform: rotate(180deg);
}
.detail-prompt-section .text-button {
  margin: 8px 0 12px;
  color: var(--accent);
}
.detail-prompt {
  background: var(--input);
  max-height: 200px;
  scrollbar-width: thin;
}
.detail-error {
  max-height: 180px;
  overflow: auto;
}
.detail-id {
  font-size: 11px;
}
#taskDetailContent > .dialog-actions {
  position: sticky;
  bottom: -25px;
  z-index: 2;
  padding: 16px 25px;
  margin: 16px -25px -25px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.form-error:empty {
  display: none;
}
.toast {
  max-width: calc(100vw - 32px);
  border-radius: var(--control-radius);
  box-shadow: 0 6px 24px #00000038;
}
@keyframes media-spin {
  to {
    transform: rotate(360deg);
  }
}

.setting-select:has(.parameter-trigger) {
  position: relative;
  padding: 0;
  height: 42px;
  min-height: 42px;
  border-color: #8392a039;
}
.setting-select:has([aria-expanded="true"]) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #8999f512;
}
.parameter-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 12px;
  border-radius: 5px;
  text-align: left;
  font-size: 13px;
  font-weight: 550;
}
.parameter-trigger > svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.model-setting .parameter-trigger > svg:first-child {
  color: var(--accent);
}
.parameter-value {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parameter-trigger .parameter-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform 160ms;
}
.parameter-trigger[aria-expanded="true"] .parameter-chevron {
  transform: rotate(180deg);
}
.generation-settings:has(#modelSelect option[value="xinghuo-2.5"]:checked):has(#resolutionSelect option[value="720p"]:checked) #resolutionSelectTrigger {
  padding-inline: 6px;
  gap: 4px;
}
.generation-settings:has(#modelSelect option[value="xinghuo-2.5"]:checked):has(#resolutionSelect option[value="720p"]:checked) #resolutionSelectTrigger > svg:first-child {
  display: none;
}
.parameter-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 10px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--muted) 36%, transparent);
  border-radius: 8px;
  box-shadow:
    0 18px 48px #00000045,
    inset 0 1px 0 #ffffff08;
  overflow: hidden;
}
.parameter-menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.parameter-menu::backdrop {
  background: transparent;
}
.parameter-menu-heading {
  padding: 3px 8px;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.parameter-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--input);
  flex-shrink: 0;
}
.parameter-search > svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.parameter-search input {
  background: transparent;
  border: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  height: 34px;
  font-size: 12px;
}
.parameter-search:focus-within {
  border-color: var(--accent);
}
.parameter-search input:focus-visible {
  outline: none;
}
.parameter-options {
  display: grid;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.parameter-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
}
.parameter-option:hover,
.parameter-option:focus-visible {
  background: var(--subtle);
  outline: none;
  border-color: var(--border);
}
.parameter-option[aria-selected="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
}
.parameter-option > svg {
  width: 15px;
  height: 15px;
  opacity: 0;
}
.parameter-option[aria-selected="true"] > svg {
  opacity: 1;
}
.parameter-menu--resolution .parameter-options,
.parameter-menu--ratio .parameter-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.parameter-menu--duration .parameter-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.parameter-menu--duration .parameter-option {
  justify-content: center;
  padding: 9px 3px;
  font-size: 12px;
}
.parameter-menu--duration .parameter-option > svg {
  display: none;
}
.parameter-empty {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 20px 8px;
  margin: 0;
}
@media (max-width: 700px) {
  .setting-select:has(.parameter-trigger) {
    height: 44px;
    min-height: 44px;
  }
  .parameter-trigger {
    font-size: 12px;
    padding: 0 10px;
  }
}
@media (max-width: 700px) {
  .creation-stage {
    padding-top: 24px;
  }
  .task-dialog {
    padding: 18px;
  }
  .task-dialog > .dialog-heading {
    top: -18px;
    margin: -18px -18px 14px;
    padding: 16px 18px 12px;
  }
  #taskDetailContent > .dialog-actions {
    bottom: -18px;
    margin: 14px -18px -18px;
    padding: 12px 18px;
  }
  .task-player {
    height: 34dvh;
  }
  .detail-id {
    font-size: 10px;
  }
  .cover-placeholder {
    font-size: 10px;
  }
  .result-cover[data-cover-media] .cover-placeholder svg {
    display: none;
  }
}