.workspace-sidebar {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.workspace-sidebar .creation-nav-title {
  margin-top: 15px;
  color: #61748d;
  font-size: 10px;
  letter-spacing: 0;
}

.workspace-sidebar .creation-nav {
  height: 38px;
}

.workspace-sidebar .creation-nav span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #222527;
  color: #b9c1c7;
  font-size: 14px;
}

.workspace-sidebar .creation-nav.active {
  border: 1px solid #288e91;
  background: #173436;
  color: #27d0cb;
}

.workspace-sidebar .creation-nav.active::before {
  display: none;
}

.workspace-sidebar .creation-nav.active span {
  background: #17484a;
  color: #2ee0da;
}

.workspace-sidebar .sidebar-spacer {
  min-height: 20px;
}

.workspace-view.creation-mode-active {
  padding: 0;
  overflow: hidden;
  background: #080b0e;
}

.workspace-view.creation-mode-active .workspace-view-header {
  display: none;
}

.workspace-view.creation-mode-active .workspace-body {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.creation-mode-shell {
  --mode-accent: #25c8c5;
  --mode-accent-soft: #173b3d;
  --mode-bg: #090c0f;
  --mode-panel: #10161c;
  --mode-panel-2: #151c23;
  --mode-border: #28323d;
  --mode-text: #edf2f5;
  --mode-muted: #75869a;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--mode-bg);
  color: var(--mode-text);
}

.creation-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 18px 0 24px;
  border-bottom: 1px solid #232a31;
  background: #080b0e;
}

.creation-topbar > div:first-child {
  display: grid;
  gap: 3px;
}

.creation-topbar strong {
  font-size: 13px;
  font-weight: 750;
}

.creation-topbar > div:first-child span {
  color: var(--mode-muted);
  font-size: 10px;
}

.creation-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creation-status > span,
.creation-status > button {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #303942;
  border-radius: 16px;
  background: #151a1f;
  color: #c7d0d6;
  font: inherit;
  font-size: 10px;
}

.creation-status > button {
  cursor: pointer;
}

.creation-status i {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #29d59c;
  box-shadow: 0 0 10px rgba(41, 213, 156, .7);
}

.creation-columns {
  display: grid;
  grid-template-columns: minmax(600px, 52%) minmax(340px, 48%);
  height: calc(100vh - 58px);
  overflow: hidden;
}

.creation-form,
.mode-result-panel {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

.creation-form {
  border-right: 1px solid #26303a;
  background: #0d1217;
}

.mode-hero {
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 0 22px;
  border-bottom: 1px solid var(--mode-border);
  background: #090d11;
}

.mode-hero > div {
  display: grid;
  gap: 5px;
}

.mode-hero strong {
  font-size: 15px;
}

.mode-hero strong i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--mode-accent);
}

.mode-hero span,
.video-easy-heading small {
  color: #7693b7;
  font-size: 10px;
}

.mode-step {
  padding: 18px 22px;
  border-bottom: 1px solid var(--mode-border);
}

.compact-step {
  padding-bottom: 15px;
}

.mode-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 12px;
}

.mode-step-title b {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: none;
  border: 1px solid #c6d2dc;
  border-radius: 50%;
  color: #e6edf2;
  font-size: 10px;
}

.mode-step-title strong {
  font-size: 12px;
}

.mode-step-title small,
.mode-step-title em {
  color: var(--mode-muted);
  font-size: 9px;
  font-style: normal;
}

.mode-segments {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid #2b3540;
  border-radius: 8px;
  background: #151c23;
}

.mode-segments button {
  height: 29px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #738397;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.mode-segments button.selected {
  background: #27313a;
  color: #f1f6f8;
  box-shadow: inset 0 0 0 1px #65717c;
}

.mode-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.mode-platforms button {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 58px;
  height: 59px;
  padding: 5px;
  border: 1px solid #2b3540;
  border-radius: 9px;
  background: #121920;
  color: #b2bfca;
  font: inherit;
  cursor: pointer;
}

.mode-platforms button.selected {
  border-color: #d9e2e8;
  background: #1b242c;
  color: #fff;
}

.mode-platforms b {
  color: #ff7355;
  font-size: 12px;
}

.mode-platforms small {
  font-size: 9px;
  white-space: nowrap;
}

.mode-text-input,
.mode-prompt-admin,
.video-prompt-box textarea,
.mode-brand-grid input,
.mode-parameter-grid select,
.mode-inline-field select {
  width: 100%;
  border: 1px solid #303b46;
  border-radius: 8px;
  outline: none;
  background: #141b22;
  color: #e4e9ed;
  font: inherit;
}

.mode-text-input {
  height: 36px;
  margin-bottom: 12px;
  padding: 0 12px;
}

.mode-text-input:focus,
.mode-prompt-admin:focus,
.video-prompt-box textarea:focus,
.mode-brand-grid input:focus,
.mode-parameter-grid select:focus,
.mode-inline-field select:focus {
  border-color: var(--mode-accent);
}

.mode-upload-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mode-upload-add,
.mode-upload-item {
  position: relative;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px dashed #344250;
  border-radius: 9px;
  background: #111820;
}

.mode-upload-add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  color: #7590ac;
  cursor: pointer;
}

.mode-upload-add:hover {
  border-color: var(--mode-accent);
  color: var(--mode-accent);
}

.mode-upload-add.dragging {
  border-color: var(--mode-accent);
  background: rgba(37, 200, 197, .12);
  color: var(--mode-accent);
}

.mode-upload-add span {
  font-size: 22px;
  font-weight: 300;
}

.mode-upload-add strong,
.mode-upload-add small {
  font-size: 8px;
  font-weight: 500;
}

.mode-upload-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mode-upload-item button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 9, 11, .86);
  color: #fff;
  cursor: pointer;
}

.mode-upload-item small {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  overflow: hidden;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(7, 9, 11, .78);
  color: #d6dde2;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-secondary-action {
  display: block;
  height: 34px;
  margin: 11px 0 8px;
  padding: 0 13px;
  border: 1px solid #53606c;
  border-radius: 8px;
  background: #1b232a;
  color: #c7d1d8;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.mode-secondary-action:disabled {
  cursor: wait;
  opacity: .65;
}

.mode-analysis-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  border-color: #63717e;
  color: #f0f5f7;
}

.mode-analysis-action span {
  color: var(--mode-accent);
}

.mode-analysis-output {
  margin: 0 0 11px;
}

.mode-analysis-state {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #2e3944;
  border-radius: 8px;
  background: #111820;
}

.mode-analysis-state > span,
.mode-analysis-state > b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  border: 1px solid #42515f;
  border-radius: 50%;
  color: var(--mode-accent);
  font-size: 12px;
}

.mode-analysis-state > div {
  display: grid;
  gap: 4px;
}

.mode-analysis-state strong {
  font-size: 10px;
}

.mode-analysis-state small {
  color: var(--mode-muted);
  font-size: 9px;
}

.mode-analysis-state.is-loading > span {
  border-color: transparent var(--mode-accent) var(--mode-accent) transparent;
  animation: mode-spin .75s linear infinite;
}

.mode-analysis-state.is-error {
  border-color: rgba(255, 93, 93, .4);
}

.mode-analysis-state.is-error > b {
  border-color: rgba(255, 93, 93, .45);
  color: #ff7777;
}

.mode-analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
  padding: 0 2px;
}

.mode-analysis-head > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mode-analysis-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #32d49d;
  box-shadow: 0 0 8px rgba(50, 212, 157, .55);
}

.mode-analysis-head strong {
  font-size: 10px;
}

.mode-analysis-confidence {
  padding: 3px 6px;
  border: 1px solid rgba(50, 212, 157, .3);
  border-radius: 4px;
  background: rgba(50, 212, 157, .08);
  color: #69dcb4;
  font-size: 8px;
}

.mode-analysis-head small {
  max-width: 55%;
  overflow: hidden;
  color: var(--mode-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.mode-analysis-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #2d3843;
  border-radius: 7px;
  background: #121920;
}

.mode-analysis-grid article > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mode-analysis-grid article strong {
  color: #7890aa;
  font-size: 8px;
}

.mode-analysis-grid article header small {
  overflow: hidden;
  color: #5f7080;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-analysis-grid article span {
  overflow-wrap: anywhere;
  color: #dce5ea;
  font-size: 9px;
  line-height: 1.55;
}

.mode-analysis-grid .mode-analysis-uncertain {
  border-color: rgba(229, 170, 64, .32);
  background: rgba(95, 68, 24, .12);
}

.mode-analysis-grid .mode-analysis-uncertain strong {
  color: #e0ad56;
}

.mode-prompt-admin {
  min-height: 104px;
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.6;
}

.mode-protected-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 11px 13px;
  border: 1px solid #2e3944;
  border-radius: 9px;
  background: #131a21;
}

.mode-protected-prompt > span {
  color: var(--mode-accent);
  font-size: 20px;
}

.mode-protected-prompt > div {
  display: grid;
  gap: 4px;
}

.mode-protected-prompt strong {
  font-size: 11px;
}

.mode-protected-prompt small {
  color: var(--mode-muted);
  font-size: 9px;
}

.mode-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 8px;
}

.mode-choice-grid button,
.luxury-style-grid button {
  display: grid;
  gap: 5px;
  min-height: 60px;
  padding: 10px 11px;
  border: 1px solid #2d3843;
  border-radius: 8px;
  background: #121920;
  color: #d4dce1;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.mode-choice-grid button.selected,
.luxury-style-grid button.selected {
  border-color: var(--mode-accent);
  background: var(--mode-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(37, 200, 197, .18);
  color: #f4ffff;
}

.mode-choice-grid small,
.luxury-style-grid small {
  color: #718295;
  font-size: 8px;
}

.mode-parameter-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 8px;
}

.mode-parameter-grid label,
.mode-inline-field,
.mode-brand-grid label {
  display: grid;
  gap: 6px;
  color: #8c9baa;
  font-size: 9px;
}

.mode-parameter-grid select,
.mode-inline-field select {
  height: 36px;
  padding: 0 9px;
}

.mode-inline-field {
  width: 180px;
  margin-top: 11px;
}

.mode-details,
.mode-history {
  border-bottom: 1px solid var(--mode-border);
}

.mode-details summary,
.mode-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 22px;
  color: #dbe2e7;
  list-style: none;
  cursor: pointer;
}

.mode-details summary span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-details summary b {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #c6d2dc;
  border-radius: 50%;
  font-size: 10px;
}

.mode-details summary strong,
.mode-history summary span {
  font-size: 11px;
}

.mode-details summary em,
.mode-history summary em {
  color: var(--mode-muted);
  font-size: 9px;
  font-style: normal;
}

.mode-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding: 0 22px 18px;
}

.mode-brand-grid input {
  height: 36px;
  padding: 0 10px;
}

.mode-history-list {
  display: grid;
  gap: 7px;
  padding: 0 22px 16px;
}

.mode-history-list p {
  margin: 0;
  padding: 13px;
  border: 1px dashed #303b46;
  border-radius: 8px;
  color: var(--mode-muted);
  font-size: 9px;
  text-align: center;
}

.mode-history-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #2c3741;
  border-radius: 8px;
  background: #121920;
}

.mode-history-list article div {
  display: grid;
  gap: 3px;
}

.mode-history-list strong {
  font-size: 10px;
}

.mode-history-list small {
  color: var(--mode-muted);
  font-size: 8px;
}

.mode-history-list button {
  flex: none;
  height: 28px;
  border: 1px solid #356c70;
  border-radius: 6px;
  background: #173437;
  color: #66d9d5;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.mode-submit-row {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 11px 22px;
  border-top: 1px solid #303a43;
  background: rgba(13, 18, 23, .96);
  backdrop-filter: blur(8px);
}

.mode-submit-row > span {
  color: #738397;
  font-size: 9px;
}

.mode-submit-row button {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #25c8c5, #168e92);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 7px 20px rgba(25, 158, 160, .25);
}

.mode-submit-row button span {
  margin-right: 7px;
}

.mode-submit-row button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.mode-result-panel {
  background: #070a0d;
}

.mode-result-panel > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #222b33;
  background: rgba(9, 12, 15, .94);
  backdrop-filter: blur(8px);
}

.mode-result-panel > header div {
  display: grid;
  gap: 3px;
}

.mode-result-panel > header strong {
  font-size: 12px;
}

.mode-result-panel > header span {
  color: var(--mode-muted);
  font-size: 8px;
}

.mode-result-panel > header button {
  height: 29px;
  padding: 0 10px;
  border: 1px solid #3c4853;
  border-radius: 7px;
  background: #131a20;
  color: #bdc7ce;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.mode-result-body {
  min-height: calc(100% - 58px);
  padding: 18px;
}

.mode-result-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: calc(100vh - 154px);
  color: #34465e;
  text-align: center;
}

.mode-result-empty .result-placeholder-icon,
.mode-result-empty > b {
  margin-bottom: 10px;
  font-size: 28px;
}

.mode-result-empty strong {
  color: #52647b;
  font-size: 11px;
}

.mode-result-empty small {
  margin-top: 5px;
  color: #3c4b5d;
  font-size: 9px;
}

.mode-result-empty.is-loading > span {
  width: 28px;
  height: 28px;
  margin-bottom: 13px;
  border: 2px solid #263b43;
  border-top-color: var(--mode-accent);
  border-radius: 50%;
  animation: mode-spin .8s linear infinite;
}

.mode-result-empty.is-error > b {
  color: #ff6f66;
}

@keyframes mode-spin {
  to { transform: rotate(360deg); }
}

.mode-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.mode-result-card {
  overflow: hidden;
  border: 1px solid #2c3740;
  border-radius: 8px;
  background: #11171c;
}

.mode-result-card > button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #090c0f;
  cursor: zoom-in;
}

.mode-result-card img,
.mode-result-card video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #090c0f;
}

.mode-result-card.video {
  grid-column: 1 / -1;
}

.mode-result-card.video video {
  aspect-ratio: 16 / 9;
}

.mode-result-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  color: #8796a2;
  font-size: 9px;
}

.mode-result-card a {
  color: var(--mode-accent);
  text-decoration: none;
}

.luxury-hero {
  background: linear-gradient(90deg, #121c20, #0b1014);
}

.luxury-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.luxury-style-grid button {
  grid-template-columns: 44px 1fr;
  align-items: center;
}

.luxury-style-grid button strong,
.luxury-style-grid button small {
  grid-column: 2;
}

.style-swatch {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  background: #667;
}

.style-swatch.oriental { background: linear-gradient(145deg, #2a3433, #a18b6e); }
.style-swatch.cinematic { background: linear-gradient(145deg, #1a2533, #9b5a4a); }
.style-swatch.poetic { background: linear-gradient(145deg, #95a69b, #d6cbb8); }
.style-swatch.modern { background: linear-gradient(145deg, #e4e6e5, #596168); }

.video-easy-columns {
  grid-template-columns: minmax(600px, 62%) minmax(340px, 38%);
}

.video-easy-form {
  padding: 28px;
  background: #0a0e12;
}

.video-easy-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.video-heading-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #2c8a8d;
  border-radius: 8px;
  background: #143436;
  color: #38d9d4;
  font-size: 20px;
}

.video-easy-heading div {
  display: grid;
  gap: 5px;
}

.video-easy-heading strong {
  font-size: 21px;
}

.video-first-frame,
.video-prompt-box,
.video-easy-form > .mode-step,
.video-easy-form > .mode-history {
  margin-bottom: 12px;
  padding: 17px;
  border: 1px solid #29333d;
  border-radius: 9px;
  background: #11171d;
}

.video-prompt-box {
  position: relative;
}

.video-prompt-box textarea {
  min-height: 134px;
  padding: 13px 14px 27px;
  resize: vertical;
  line-height: 1.65;
}

.video-prompt-count {
  position: absolute;
  right: 28px;
  bottom: 26px;
  color: #637283;
  font-size: 9px;
}

.video-easy-form > .mode-step {
  border-bottom: 1px solid #29333d;
}

.mode-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: #92a1ad;
  font-size: 10px;
}

.video-easy-form > .mode-history summary {
  min-height: 42px;
  padding: 0 5px;
}

.video-easy-form > .mode-history .mode-history-list {
  padding: 4px 5px 0;
}

.video-easy-form > .mode-submit-row {
  margin: 0 -28px -28px;
}

@media (max-width: 1340px) {
  .creation-columns,
  .video-easy-columns {
    grid-template-columns: minmax(560px, 62%) minmax(320px, 38%);
  }

  .mode-choice-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mode-parameter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1080px) {
  .creation-status > span:nth-child(2) {
    display: none;
  }

  .creation-columns,
  .video-easy-columns {
    display: block;
    overflow-y: auto;
  }

  .creation-form,
  .mode-result-panel {
    height: auto;
    overflow: visible;
  }

  .mode-result-panel {
    min-height: 520px;
  }

  .mode-result-empty {
    min-height: 420px;
  }
}

/* Expert mode commercial workflow */
.expert-ai-prompt-controls {
  margin: 8px 0 10px;
}

.mode-records-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  color: #dfe6eb;
}

.mode-records-head button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #35414a;
  border-radius: 7px;
  background: #182027;
  color: #9daab5;
  cursor: pointer;
}

.mode-generation-records {
  display: grid;
  gap: 14px;
}

.mode-generation-records > section {
  padding-bottom: 14px;
  border-bottom: 1px solid #27313a;
}

.mode-generation-records > section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.mode-generation-records > section > header strong,
.mode-generation-records > section > header small {
  display: block;
}

.mode-generation-records > section > header strong {
  color: #e5ebef;
  font-size: 12px;
}

.mode-generation-records > section > header small {
  margin-top: 3px;
  color: #71808c;
  font-size: 10px;
}

.mode-generation-records > section > header > span {
  flex: 0 0 auto;
  color: #70d8ce;
  font-size: 11px;
}

.mode-generation-records > section > header > span.partial {
  color: #e2b66c;
}

.mode-record-error {
  margin: 8px 0 0;
  color: #dd8d8d;
  font-size: 11px;
  line-height: 1.5;
}

.expert-prompt-hint {
  margin: 0 0 9px;
  color: #70808f;
  font-size: 12px;
}

.expert-ai-prompt-controls .mode-analysis-action {
  margin: 0;
}

.mode-analysis-compact {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(43, 185, 174, .38);
  border-radius: 8px;
  background: rgba(25, 156, 146, .09);
  color: #6edbd1;
}

.mode-analysis-compact > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(43, 185, 174, .16);
}

.mode-analysis-compact strong,
.mode-analysis-compact small {
  display: block;
}

.mode-analysis-compact strong {
  font-size: 12px;
}

.mode-analysis-compact small {
  margin-top: 2px;
  color: #829a9d;
  font-size: 10px;
}

.expert-target-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.expert-target-grid > button {
  min-width: 0;
  min-height: 118px;
  padding: 13px 11px;
  border: 1px solid #303844;
  border-radius: 8px;
  background: #171d24;
  color: #eef2f5;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.expert-target-grid > button > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 9px;
  border: 1px solid #596574;
  border-radius: 7px;
  color: #aeb8c3;
}

.expert-target-grid strong,
.expert-target-grid small,
.expert-target-grid em {
  display: block;
}

.expert-target-grid strong {
  margin-bottom: 4px;
  font-size: 15px;
}

.expert-target-grid small,
.expert-target-grid em {
  color: #8793a0;
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.expert-target-grid em {
  margin-top: 5px;
  color: #687482;
}

.expert-target-grid > button.selected {
  border-color: #dce5ea;
  background: #242b33;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.expert-target-grid > button.selected > span {
  border-color: #e7eef2;
  color: #fff;
}

.expert-target-grid > button:disabled {
  opacity: .36;
  cursor: not-allowed;
}

.expert-target-options {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #252d36;
}

.expert-option-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.expert-option-heading strong {
  color: #dfe6eb;
  font-size: 13px;
}

.expert-option-heading small {
  color: #778390;
  font-size: 11px;
}

.expert-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expert-chip-grid button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #303844;
  border-radius: 8px;
  background: #181e25;
  color: #9ba6b1;
  cursor: pointer;
}

.expert-chip-grid button.selected {
  border-color: #2bb9ae;
  background: rgba(25, 156, 146, .15);
  color: #5be0d3;
}

.expert-rule-box {
  padding: 13px 14px;
  border: 1px solid #2b3840;
  border-radius: 8px;
  background: #141b21;
}

.expert-rule-box strong,
.expert-rule-box span {
  display: block;
}

.expert-rule-box strong {
  margin-bottom: 5px;
  color: #e7edf1;
  font-size: 13px;
}

.expert-rule-box span,
.expert-platform-rule {
  color: #8e9ba6;
  font-size: 12px;
  line-height: 1.65;
}

.expert-platform-rule {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 2px solid #2bb9ae;
  background: rgba(25, 156, 146, .08);
  color: #75cfc7;
}

.expert-text-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: #a7b1ba;
  font-size: 12px;
}

.expert-text-setting .mode-segments {
  margin: 0;
}

.expert-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.expert-style-grid button {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #2d3540;
  border-radius: 8px;
  background: #171d24;
  color: #9aa5af;
  text-align: left;
  cursor: pointer;
}

.expert-style-grid button i {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #d6d1c8, #4b555c);
}

.expert-style-grid button.selected {
  border-color: #2bb9ae;
  background: rgba(25, 156, 146, .12);
  color: #67ddd2;
}

.expert-shooting-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.shooting-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #9aa5af;
}

.shooting-field span {
  font-size: 12px;
  color: #77828c;
}

.shooting-field select,
.shooting-field input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #2d3540;
  border-radius: 8px;
  background: #171d24;
  color: #d6dce1;
  font-size: 13px;
  box-sizing: border-box;
}

.shooting-field select:focus,
.shooting-field input:focus {
  outline: none;
  border-color: #2bb9ae;
}

.style-reference-heading {
  margin-top: 17px;
}

.expert-style-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.expert-style-upload article,
.expert-style-upload > label {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #37414b;
  border-radius: 8px;
  background: #151b22;
}

.expert-style-upload article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expert-style-upload article button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 13, 16, .82);
  color: #fff;
  cursor: pointer;
}

.expert-style-upload article small {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3px;
  background: rgba(8, 11, 14, .72);
  color: #d9e0e4;
  text-align: center;
}

.expert-style-upload > label {
  align-content: center;
  gap: 2px;
  color: #87939d;
  cursor: pointer;
  text-align: center;
}

.expert-style-upload > label span {
  font-size: 22px;
}

.expert-style-upload > label strong,
.expert-style-upload > label small {
  font-size: 10px;
  font-weight: 500;
}

[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .expert-target-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expert-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expert-option-heading,
  .expert-text-setting {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== 简易模式参数网格 (20260828) ===== */
.easy-param { margin: 0 0 14px; }
.easy-param:last-child { margin-bottom: 0; }
.easy-param-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.easy-param-head span { font-weight: 700; font-size: 13px; color: rgba(255,255,255,.92); }
.easy-param-head small { color: rgba(255,255,255,.42); font-size: 11px; }
.easy-model-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.easy-model-grid [data-single-value] { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 11px 13px; border-radius: 10px; }
.easy-model-grid [data-single-value] strong { font-size: 13px; }
.easy-model-grid [data-single-value] small { font-size: 11px; opacity: .55; }
.easy-ratio-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.easy-ratio-grid [data-single-value] { padding: 9px 4px; border-radius: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.easy-res-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.easy-res-grid [data-single-value] { padding: 9px 4px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.easy-count-grid { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.easy-count-grid [data-single-value] { padding: 8px 4px; border-radius: 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.easy-lang-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.easy-lang-grid [data-single-value] { padding: 9px 4px; border-radius: 8px; font-size: 12px; }
.easy-model-grid [data-single-value].selected, .easy-ratio-grid [data-single-value].selected, .easy-res-grid [data-single-value].selected, .easy-count-grid [data-single-value].selected, .easy-lang-grid [data-single-value].selected { outline: 1.5px solid currentColor; }

/* ===== 产品画像面板 ===== */
.expert-profile-panel { display: grid; gap: 10px; margin-top: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.03); }
.expert-profile-panel[hidden] { display: none; }
.expert-profile-panel .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.expert-profile-panel .profile-field { display: grid; gap: 4px; }
.expert-profile-panel .profile-field span { font-size: 12px; font-weight: 650; color: #9aa5a0; }
.expert-profile-panel .profile-field input { height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(0,0,0,.25); color: inherit; font-size: 13px; }
.expert-profile-panel .profile-field input:focus { outline: none; border-color: #34d0a6; }
.expert-profile-panel .profile-generate-btn { justify-self: start; }

/* ===== 模式表单补丁样式 (v34) ===== */
.mode-upload-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mode-upload-card { position: relative; width: 72px; height: 72px; overflow: hidden; border: 1px solid #2c3740; border-radius: 8px; background: #0f151a; }
.mode-upload-card img { width: 100%; height: 100%; object-fit: cover; }
.mode-upload-card button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.mode-result-loading, .mode-result-error, .mode-result-empty-custom { padding: 20px; text-align: center; color: #7a8a9a; font-size: 13px; }
.mode-result-error { color: #ff6f66; }
.mode-result-grid-patch { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 18px; }
.mode-result-grid-patch figure { margin: 0; overflow: hidden; border: 1px solid #2c3740; border-radius: 8px; background: #11171c; }
.mode-result-grid-patch img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #090c0f; }
.mode-result-grid-patch figcaption { padding: 8px 10px; text-align: center; }
.mode-result-grid-patch a { color: var(--mode-accent, #2bb9ae); font-size: 12px; text-decoration: none; }
.mode-analysis-loading { padding: 12px; color: #70d8ce; font-size: 12px; text-align: center; }
.mode-analysis-error { padding: 12px; color: #ff6f66; font-size: 12px; border-radius: 6px; background: rgba(255,111,102,.08); }
.mode-analysis-prompt { white-space: pre-wrap; font-size: 12px; line-height: 1.7; color: #c8d4dd; padding: 12px; border-radius: 8px; background: rgba(43,185,174,.06); border: 1px solid rgba(43,185,174,.2); }