@import url("./chat-main.css");

.new-task-main {
  background:
    radial-gradient(circle at 30% 18%, rgba(153, 223, 196, 0.32), transparent 32%),
    radial-gradient(circle at 72% 72%, rgba(216, 236, 198, 0.48), transparent 34%),
    linear-gradient(135deg, #f3f1ec 0%, #e8f1ed 46%, #f1f0ed 100%);
  position: relative;
  overflow: hidden;
}

.new-task-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 19, 24, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 24, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

.media-main-view.new-task-main .main-inner {
  width: min(100%, 1280px);
  min-height: 100%;
  padding: 112px 34px 0;
  position: relative;
  z-index: 1;
}

.new-task-start {
  min-height: calc(100vh - 112px);
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.idea-emblem {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #79b93f;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9), transparent 35%),
    linear-gradient(135deg, rgba(181, 223, 92, 0.7), rgba(116, 185, 61, 0.18));
  box-shadow: 0 18px 32px rgba(93, 152, 52, 0.2);
  transform: rotate(-10deg);
}

.idea-leaf {
  font-size: 34px;
  font-weight: 900;
  transform: rotate(18deg);
}

.new-task-start h1 {
  margin: 10px 0 0;
  color: #111318;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.new-task-start p {
  margin: 8px 0 0;
  color: rgba(17, 19, 24, 0.42);
  font-size: 13px;
  line-height: 1.5;
}

.idea-chip-grid {
  width: min(840px, 100%);
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.idea-chip-grid button {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  background: rgba(255, 255, 255, 0.48);
  color: rgba(17, 19, 24, 0.48);
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 6px 16px rgba(17, 19, 24, 0.025);
}

.idea-composer {
  width: min(840px, 100%);
  margin-top: 28px;
  padding: 16px 12px 10px;
  border-radius: 18px;
  border: 1px solid #5cbe5a;
  background: rgba(247, 250, 247, 0.92);
  box-shadow:
    0 0 0 1px rgba(163, 225, 97, 0.28),
    0 22px 56px rgba(91, 186, 87, 0.26);
  text-align: left;
}

.idea-composer textarea {
  width: 100%;
  min-height: 108px;
  padding: 0 2px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #111318;
  font-size: 13px;
  line-height: 1.65;
}

.idea-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.idea-tools,
.idea-submit,
.idea-files {
  display: flex;
  align-items: center;
  gap: 8px;
}

.idea-tools button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.66);
  color: rgba(17, 19, 24, 0.52);
  font-size: 14px;
  font-weight: 760;
}

.idea-tools .idea-tool-active {
  background: rgba(101, 191, 89, 0.16);
  color: #3da149;
}

.idea-model {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.68);
  font-size: 12px;
  font-weight: 680;
}

.idea-send {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: #56ba55;
  color: #ffffff;
  font-size: 16px;
  font-weight: 850;
}

.idea-files {
  margin-top: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.file-chip {
  min-width: 116px;
  max-width: 132px;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  color: #1d2521;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-chip.green {
  background: #dff4b8;
}

.file-chip.yellow {
  background: #f4d66c;
}

.file-chip.blue {
  background: #d6e3ff;
}

.explore-more {
  margin-top: 58px;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  background: rgba(255, 255, 255, 0.62);
  color: rgba(17, 19, 24, 0.38);
  font-size: 13px;
  font-weight: 720;
}

.inspiration-stack {
  width: min(900px, 96%);
  height: 230px;
  margin-top: 38px;
  position: relative;
}

.inspiration-card {
  position: absolute;
  bottom: -38px;
  width: 250px;
  height: 172px;
  border-radius: 22px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  box-shadow: 0 20px 36px rgba(17, 19, 24, 0.13);
}

.card-pattern {
  left: 5%;
  transform: rotate(-8deg);
  background:
    radial-gradient(circle, rgba(17, 19, 24, 0.26) 1px, transparent 2px) 0 0 / 18px 18px,
    #ececeb;
}

.card-compass {
  left: 25%;
  transform: rotate(-3deg);
  background:
    radial-gradient(circle at 50% 52%, transparent 0 24px, rgba(60, 184, 255, 0.8) 25px 27px, transparent 28px),
    radial-gradient(circle at 50% 50%, rgba(27, 183, 255, 0.7), transparent 30%),
    linear-gradient(135deg, #071520, #0b2638);
}

.card-x {
  left: 50%;
  z-index: 3;
  width: 260px;
  height: 190px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #030303, #1d1d1f);
  color: #f4f4f4;
  font-size: 76px;
  font-weight: 900;
}

.card-sketch {
  right: 24%;
  transform: rotate(8deg);
  background:
    linear-gradient(115deg, transparent 48%, rgba(17, 19, 24, 0.08) 49% 51%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(17, 19, 24, 0.16) 0 1px, transparent 1px 13px),
    #f4f1ea;
}

.card-notes {
  right: 4%;
  transform: rotate(7deg);
  background:
    linear-gradient(135deg, rgba(180, 128, 78, 0.55), transparent 42%),
    linear-gradient(180deg, #e2edfa, #f5efe0);
}

@media (max-width: 980px) {
  .media-main-view.new-task-main .main-inner {
    padding: 72px 18px 0;
  }

  .new-task-start h1 {
    font-size: 18px;
  }

  .idea-composer-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .idea-submit {
    width: 100%;
    justify-content: flex-end;
  }

  .inspiration-stack {
    transform: scale(0.82);
    transform-origin: top center;
  }
}

.media-main-view .main-inner {
  width: min(100%, 1440px);
  padding-top: 28px;
  padding-bottom: 48px;
}

.media-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 34px;
}

.history-chip {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--fs-line);
  background: rgba(255, 255, 255, 0.96);
  color: rgba(18, 20, 23, 0.66);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.history-chip svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.creator-hero {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.creator-title {
  margin: 0;
  font-size: 30px;
  line-height: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.creator-mode-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(18, 20, 23, 0.06);
}

.creator-mode-btn {
  min-width: 120px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 14px;
  border: 0;
  background: transparent;
  color: rgba(18, 20, 23, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}

.creator-mode-btn.active {
  background: rgba(255, 255, 255, 0.96);
  color: var(--fs-text-strong);
  box-shadow: 0 8px 18px rgba(18, 20, 23, 0.08);
}

.creator-mode-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.creator-composer {
  width: min(100%, 820px);
  margin-top: 6px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--fs-line);
  box-shadow: 0 16px 36px rgba(18, 20, 23, 0.06);
  padding: 16px 18px 14px;
}

.composer-top {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.composer-quick-tools {
  display: flex;
  gap: 10px;
}

.slate-tool {
  width: 40px;
  height: 54px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f3f4f7 0%, #e7e9ef 100%);
  color: rgba(18, 20, 23, 0.54);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transform: rotate(-8deg);
}

.creator-input {
  min-height: 88px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--fs-text-strong);
  font-size: 18px;
  line-height: 28px;
}

.creator-input::placeholder {
  color: rgba(18, 20, 23, 0.9);
}

.mode-panel[hidden] {
  display: none;
}

.composer-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.composer-bottom.image-mode {
  margin-top: 6px;
}

.creator-pill {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--fs-line);
  background: rgba(255, 255, 255, 0.96);
  color: var(--fs-text-strong);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
}

.creator-pill svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.credits-pill {
  margin-left: auto;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(18, 20, 23, 0.58);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.generate-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(18, 20, 23, 0.1);
  color: rgba(18, 20, 23, 0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.generate-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.media-gallery {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.poster-card {
  min-height: 220px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--fs-line);
  box-shadow: var(--fs-shadow-card);
  display: grid;
  align-content: end;
  color: var(--fs-text-strong);
}

.poster-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.poster-card strong {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.15;
}

.poster-fashion {
  min-height: 314px;
  background: linear-gradient(180deg, #f6f7fb 0%, #fbd8e3 100%);
}

.poster-map {
  min-height: 340px;
  background: linear-gradient(180deg, #f6eed0 0%, #e0c98e 100%);
}

.poster-mobile {
  min-height: 280px;
  background: linear-gradient(180deg, #2a2550 0%, #0e1026 100%);
  color: #ffffff;
}

.poster-grid {
  min-height: 250px;
  background: linear-gradient(180deg, #eff4ff 0%, #dfeeff 100%);
}

.poster-girls {
  min-height: 250px;
  background: linear-gradient(180deg, #fef5fb 0%, #dcecff 100%);
}

.poster-book {
  min-height: 190px;
  background: linear-gradient(180deg, #d8ecff 0%, #f8f5df 100%);
}

.poster-silence {
  min-height: 380px;
  background: linear-gradient(180deg, #dadfe5 0%, #7d838d 100%);
  color: #ffffff;
}

.poster-moto {
  min-height: 330px;
  background: linear-gradient(180deg, #f0f0f0 0%, #d7d7d7 100%);
}

.poster-ducks {
  min-height: 140px;
  background: linear-gradient(180deg, #f7f2ea 0%, #f0d8b8 100%);
}

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

@media (max-width: 980px) {
  .media-main-view .main-inner {
    padding-top: 24px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .composer-top {
    grid-template-columns: 1fr;
  }

  .composer-quick-tools {
    display: none;
  }

  .credits-pill {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .media-gallery {
    grid-template-columns: 1fr;
  }
}

/* AI product detail page — conversational prototype */
.ai-detail-page { position: relative; min-height: 100%; background: #f7f8f6; overflow: auto; }
.ai-detail-page::before { content: ""; position: fixed; inset: 0 0 0 232px; pointer-events: none; background: radial-gradient(circle at 48% 2%, rgba(161,234,192,.34), transparent 30%), radial-gradient(circle at 82% 70%, rgba(206,182,255,.18), transparent 26%); }
.ai-detail-page button, .ai-detail-page textarea { font: inherit; }
.ai-start { position: relative; z-index: 1; width: min(920px, calc(100% - 64px)); margin: 0 auto; padding: 78px 0 56px; }
.ai-start-head { text-align: center; }
.ai-orb { width: 58px; height: 58px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 21px; color: #fff; font-size: 25px; background: radial-gradient(circle at 32% 26%, #e7ffac 0 8%, transparent 9%), linear-gradient(145deg,#9fe56f,#38ad79 48%,#755be8); box-shadow: 0 17px 35px rgba(72,170,112,.28), inset 0 0 0 1px rgba(255,255,255,.45); animation: aiFloat 3.6s ease-in-out infinite; }
.ai-start-head p { margin: 0; color: #60a271; font-size: 10px; font-weight: 850; letter-spacing: .17em; }
.ai-start-head h1 { margin: 10px 0 0; color: #17201a; font-size: clamp(28px,3.7vw,45px); line-height: 1.12; letter-spacing: -.045em; }
.ai-launcher { margin-top: 34px; padding: 12px; display: grid; grid-template-columns: 220px 1fr; gap: 12px; border: 1px solid rgba(51,94,65,.12); border-radius: 25px; background: rgba(255,255,255,.8); box-shadow: 0 25px 70px rgba(35,73,47,.12), 0 0 0 5px rgba(255,255,255,.35); backdrop-filter: blur(20px); }
.ai-dropzone { position: relative; min-height: 230px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #9bc7a4; border-radius: 17px; color: #54715b; background: linear-gradient(145deg,rgba(232,247,230,.7),rgba(241,238,255,.6)); cursor: pointer; }
.ai-dropzone:hover { border-color: #58af6b; background: #eef8eb; }
.ai-drop-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; font-size: 24px; font-weight: 300; background: #53b56c; box-shadow: 0 9px 20px rgba(57,159,86,.25); }
.ai-dropzone strong { margin-top: 5px; font-size: 14px; }.ai-dropzone small { color: #9baa9d; font-size: 11px; }
.ai-file-preview { position:absolute;inset:8px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px }.ai-file-preview[hidden]{display:none}.ai-file-preview>span{position:relative;min-height:0;border-radius:9px;background-position:center;background-size:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.ai-file-preview>span b{position:absolute;right:5px;top:5px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(25,39,29,.65);font-size:8px}.ai-dropzone.has-file > :not(.ai-file-preview), .ai-dropzone.has-example > :not(.ai-file-preview) { opacity: 0; }.ai-dropzone.is-dragging{border-color:#39a55b;background:#e8f7e9;transform:scale(.99)}
.ai-dropzone.has-example::after { content:"GLOW\A SERUM"; white-space: pre; position:absolute; inset:0; display:grid; place-items:center; color:#214b3a; font-size:20px; font-weight:900; letter-spacing:.11em; background: radial-gradient(ellipse at 54% 57%,#d6a46c 0 10%,transparent 11%),radial-gradient(ellipse at 54% 48%,#f1f0d7 0 15%,transparent 16%),linear-gradient(145deg,#d9efd7,#8fba9c); }
.ai-intent { min-width: 0; padding: 15px 15px 12px; display: flex; flex-direction: column; }
.ai-intent textarea { flex: 1; width: 100%; min-height: 88px; padding: 3px; border: 0; outline: 0; resize: none; color: #1a251d; background: transparent; font-size: 16px; line-height: 1.6; }
.ai-intent textarea::placeholder { color: #a2ada4; }
.ai-quick-prompts { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 16px; }
.ai-quick-prompts button, .ai-suggestion-row button { padding: 7px 10px; border: 1px solid #e3e9e3; border-radius: 999px; color: #78837a; background: #fafcf9; font-size: 11px; cursor: pointer; }.ai-quick-prompts button:hover,.ai-quick-prompts button.is-selected { border-color:#a3d2a8;color:#388c50;background:#eff9ed; }
.ai-reference-row{min-height:29px;display:flex;align-items:center;gap:6px;overflow:hidden;margin:5px 0 11px}.ai-reference-add{height:27px;flex:0 0 auto;padding:0 9px;border:1px solid #dce5dc;border-radius:8px;color:#627167;background:#fff;font-size:10px;font-weight:750;cursor:pointer}.ai-reference-add:hover{border-color:#96c99e;color:#3f9252}.ai-reference-add span{margin-right:3px;font-size:14px}.ai-reference-chip{max-width:105px;padding:5px 7px;overflow:hidden;border-radius:7px;color:#596b5d;background:#edf3ec;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.ai-recognition{margin-left:auto;color:#579466;font-size:9px;white-space:nowrap}.ai-recognition i{font-style:normal}.ai-recognition:not([hidden]) i{display:inline-block;animation:aiFloat 1.4s ease-in-out infinite}
.ai-launch-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 12px}
.ai-launch-settings label{min-width:0;padding:6px 8px;border:1px solid #e2e8e1;border-radius:10px;background:#f9fbf8}
.ai-launch-settings label:focus-within{border-color:#8bc69a;background:#fff;box-shadow:0 0 0 2px rgba(85,181,107,.1)}
.ai-launch-settings label span{display:block;margin-bottom:2px;color:#9ba69d;font-size:8px}
.ai-launch-settings select{width:100%;padding:0 12px 0 0;border:0;outline:0;color:#425148;background:transparent;font-size:10px;font-weight:750;cursor:pointer}
.ai-detail-options{margin:0 0 12px;padding:8px;border:1px solid #dfe8df;border-radius:12px;background:#f6faf5}.ai-detail-options[hidden]{display:none}.ai-detail-option-head{display:grid;grid-template-columns:1fr;gap:7px}.ai-detail-option-head>button{min-width:0;height:43px;padding:6px 9px;border:1px solid #dde5dc;border-radius:9px;background:#fff;text-align:left}.ai-detail-option-head span{display:block;color:#98a29a;font-size:8px}.ai-detail-option-head>button{position:relative;cursor:pointer}.ai-detail-option-head>button b{display:block;margin-top:2px;color:#3d4b41;font-size:10px}.ai-detail-option-head>button i{position:absolute;right:9px;top:14px;color:#8a958c;font-size:9px;font-style:normal}.ai-module-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.ai-module-picker[hidden]{display:none}.ai-module-picker button{min-height:28px;padding:4px;border:1px solid #e2e8e1;border-radius:7px;color:#839086;background:#fff;font-size:8px;cursor:pointer}.ai-module-picker button.is-selected{border-color:#86c890;color:#318149;background:#eaf7e9}
.ai-module-preview{display:flex;gap:5px;margin-top:7px;overflow-x:auto;padding-bottom:1px;scrollbar-width:none}.ai-module-preview::-webkit-scrollbar{display:none}.ai-module-preview span{flex:0 0 auto;padding:5px 7px;border:1px solid #cce2ce;border-radius:7px;color:#3e8350;background:#edf8ec;font-size:8px;font-weight:750}.ai-module-preview span::before{content:"✓";margin-right:4px;color:#55aa67}
.ai-generate { height: 48px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(100deg,#2f9e5b,#62bb5d 55%,#7b6add); box-shadow: 0 12px 25px rgba(61,154,82,.25); font-size: 13px; font-weight: 800; cursor:pointer; }.ai-generate:hover{filter:brightness(1.04);transform:translateY(-1px)}.ai-generate span{margin-right:5px}.ai-generate b{font-weight:800}.ai-generate kbd{float:right;margin-right:3px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.18);font-size:10px}
.ai-example-strip { margin-top: 26px; display:flex; align-items:center; justify-content:center; gap:10px; }.ai-example-strip>span{margin-right:4px;color:#9aa49c;font-size:11px}.ai-example-strip button{width:76px;height:54px;border:2px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 8px 18px rgba(30,50,35,.1);cursor:pointer;transition:.18s}.ai-example-strip button:hover{transform:translateY(-3px) rotate(-1deg)}
.example-bottle{background:radial-gradient(ellipse at 52% 60%,#d4a777 0 12%,transparent 13%),linear-gradient(135deg,#e7f3db,#8fba9b)}.example-shoe{background:radial-gradient(ellipse at 55% 55%,#f0f0e9 0 25%,transparent 26%),linear-gradient(135deg,#ed846f,#594aa9)}.example-coffee{background:radial-gradient(circle at 50% 55%,#67422c 0 20%,#e9d5b9 21% 27%,transparent 28%),linear-gradient(135deg,#bd8c62,#f1dfc3)}.example-device{background:radial-gradient(ellipse at 50% 52%,#1a2533 0 24%,transparent 25%),linear-gradient(135deg,#9bdced,#7059cd)}
.ai-task-switch{margin:26px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ai-task-switch button{position:relative;height:72px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #e0e7df;border-radius:17px;color:#69746b;background:rgba(255,255,255,.68);box-shadow:0 8px 22px rgba(35,58,40,.04);cursor:pointer;transition:.18s}.ai-task-switch button:hover{transform:translateY(-2px);border-color:#b5d9b7}.ai-task-switch button.is-active{border-color:#78c77e;color:#276c3b;background:#f7fff5;box-shadow:0 0 0 2px rgba(102,190,112,.12),0 10px 24px rgba(58,134,75,.1)}.ai-task-icon{font-size:20px;color:currentColor}.ai-task-switch strong{font-size:12px}.ai-task-switch i{position:absolute;right:8px;top:8px;width:16px;height:16px;display:none;place-items:center;border-radius:50%;color:#fff;background:#52ac65;font-size:8px;font-style:normal}.ai-task-switch .is-active i{display:grid}
.ai-cases{margin-top:58px}.ai-cases-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.ai-cases-head>div{display:flex;align-items:center;gap:7px}.ai-cases-head>div>span{color:#55aa69}.ai-cases-head h2{margin:0;color:#263129;font-size:16px}.ai-cases-head nav{display:flex;gap:4px;padding:3px;border-radius:10px;background:#e9eee8}.ai-cases-head nav button{padding:6px 10px;border:0;border-radius:7px;color:#89938b;background:transparent;font-size:10px;cursor:pointer}.ai-cases-head nav button.is-active{color:#377e49;background:#fff;box-shadow:0 2px 7px rgba(28,54,35,.08)}
.ai-case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ai-case-card,.ai-case-card.tall{position:relative;min-height:0;aspect-ratio:4/3;grid-row:auto;overflow:hidden;border:0;border-radius:17px;box-shadow:0 10px 25px rgba(28,48,34,.1);cursor:pointer;transition:transform .2s,box-shadow .2s}.ai-case-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(28,48,34,.16)}.ai-case-card[hidden]{display:none}.ai-case-card::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.2),transparent 45%,rgba(11,25,15,.3))}.ai-case-card>span{position:absolute;z-index:1;left:14px;right:14px;bottom:13px;display:flex;align-items:flex-end;justify-content:space-between;color:#fff;text-shadow:0 1px 7px rgba(0,0,0,.28)}.ai-case-card b{font-size:12px}.ai-case-card small{font-size:9px;opacity:.78}
.case-serum{background:radial-gradient(ellipse at 55% 55%,#d5a16c 0 8%,transparent 9%),radial-gradient(ellipse at 55% 43%,#eff0d9 0 13%,transparent 14%),linear-gradient(145deg,#d8ecd2,#719c7c)}.case-shoe{background:radial-gradient(ellipse at 52% 54%,#f4f0e8 0 26%,transparent 27%),linear-gradient(135deg,#ef8b6e,#6c54bb)}.case-coffee{background:radial-gradient(circle at 52% 51%,#684129 0 18%,#e7d1b0 19% 25%,transparent 26%),linear-gradient(145deg,#d2a071,#74513a)}.case-headphone{background:radial-gradient(ellipse at 53% 48%,transparent 0 15%,#111c2c 16% 25%,transparent 26%),linear-gradient(145deg,#151d32,#6b54bd 60%,#55c5ce)}.case-lipstick{background:linear-gradient(75deg,transparent 43%,#791f32 44% 53%,#d4a668 54% 60%,transparent 61%),linear-gradient(145deg,#f2a39d,#7b2b56)}.case-watch{background:radial-gradient(circle at 52% 48%,#ece9df 0 17%,#484b48 18% 22%,transparent 23%),linear-gradient(145deg,#d8d4c7,#868b86)}.case-tea{background:radial-gradient(circle at 52% 60%,#597248 0 13%,#ede0b9 14% 20%,transparent 21%),linear-gradient(160deg,#cbdcb7,#79926c 55%,#344b3b)}.case-camera{background:radial-gradient(circle at 53% 50%,#15222b 0 12%,#b8a98e 13% 18%,transparent 19%),linear-gradient(145deg,#c8a576,#624d3d)}.case-perfume{background:radial-gradient(ellipse at 52% 54%,rgba(255,255,255,.78) 0 13%,transparent 14%),radial-gradient(circle at 27% 38%,#eaa7c1 0 12%,transparent 13%),linear-gradient(145deg,#f3d9e6,#9fcfc2)}.case-bag{background:radial-gradient(ellipse at 53% 53%,#6b493b 0 22%,transparent 23%),linear-gradient(135deg,#e1d5c4,#937b67)}.case-snack{background:radial-gradient(circle at 55% 49%,#f4d954 0 20%,transparent 21%),linear-gradient(135deg,#ff8971,#f5c957)}.case-speaker{background:radial-gradient(ellipse at 52% 53%,#303c3d 0 19%,transparent 20%),linear-gradient(145deg,#b9d5ce,#718d8b)}
.ai-case-card.is-picked{box-shadow:0 0 0 3px #61b974,0 16px 30px rgba(28,48,34,.16)}
.has-ai-modal{overflow:hidden}.ai-case-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:28px}.ai-case-modal[hidden]{display:none}.ai-case-backdrop{position:absolute;inset:0;border:0;background:rgba(20,29,23,.54);backdrop-filter:blur(8px)}.ai-case-dialog{position:relative;width:min(980px,100%);height:min(650px,calc(100vh - 56px));display:grid;grid-template-columns:46% 54%;overflow:hidden;border:1px solid rgba(255,255,255,.65);border-radius:25px;background:#fbfcfa;box-shadow:0 35px 90px rgba(15,30,20,.3);animation:modalIn .28s ease both}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}}.ai-case-close{position:absolute;z-index:3;right:15px;top:14px;width:32px;height:32px;border:1px solid #e2e8e1;border-radius:10px;color:#758078;background:rgba(255,255,255,.85);font-size:22px;line-height:1;cursor:pointer}.ai-case-close:hover{color:#2e743f;border-color:#a6cea9}.ai-case-preview{position:relative;margin:12px;overflow:hidden;border-radius:18px;background-size:cover}.ai-case-preview::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 50%,rgba(17,36,23,.45))}.ai-case-preview>div{position:absolute;z-index:1;left:22px;bottom:22px;display:flex;flex-direction:column;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}.ai-case-preview>div b{font-size:22px}.ai-case-preview>div small{margin-top:4px;font-size:11px;opacity:.8}.ai-preview-badge{position:absolute;z-index:1;left:18px;top:18px;padding:7px 10px;border-radius:9px;color:#fff;background:rgba(38,65,45,.4);backdrop-filter:blur(8px);font-size:9px;font-weight:800}.ai-case-form{min-width:0;padding:48px 42px 30px;display:flex;flex-direction:column;overflow:auto}.ai-case-form header>span{color:#55a968;font-size:9px;font-weight:850;letter-spacing:.14em}.ai-case-form header h2{margin:7px 0 0;color:#202a23;font-size:30px;letter-spacing:-.04em}.ai-case-form header p{margin:7px 0 0;color:#89938b;font-size:11px}.ai-case-product-row{display:flex;align-items:center;gap:10px;margin-top:27px}.ai-case-product-row>button{width:154px;height:74px;padding:0 13px;display:flex;align-items:center;gap:10px;border:1px dashed #95c69e;border-radius:13px;color:#3e8050;background:#f2faf0;text-align:left;cursor:pointer}.ai-case-product-row>button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:#fff;background:#54ad66;font-size:18px}.ai-case-product-row>button div{display:flex;flex-direction:column;gap:3px}.ai-case-product-row b{font-size:10px}.ai-case-product-row small{color:#94a097;font-size:8px}.ai-modal-files{display:flex;gap:6px}.ai-modal-files span{width:54px;height:54px;border-radius:10px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(35,60,42,.1)}.ai-case-field{margin-top:23px}.ai-case-field>span{display:block;margin-bottom:8px;color:#3b483e;font-size:11px;font-weight:800}.ai-case-field>span small{color:#9ba49d;font-size:9px;font-weight:500}.ai-case-field textarea{width:100%;min-height:110px;padding:12px;border:1px solid #e0e6df;border-radius:13px;outline:0;resize:none;color:#354239;background:#f5f7f4;font-size:11px;line-height:1.6}.ai-case-field textarea:focus{border-color:#8ac394;background:#fff;box-shadow:0 0 0 3px rgba(85,181,107,.1)}.ai-case-modal-settings{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.ai-case-modal-settings label{padding:7px 9px;border:1px solid #e0e6df;border-radius:10px;background:#fff}.ai-case-modal-settings label span{display:block;color:#9aa49c;font-size:8px}.ai-case-modal-settings select{width:100%;margin-top:2px;border:0;outline:0;color:#435048;background:transparent;font-size:10px;font-weight:750}.ai-case-use{height:46px;margin-top:auto;border:0;border-radius:13px;color:#fff;background:linear-gradient(100deg,#309e5b,#62bb5d 55%,#7867db);box-shadow:0 12px 25px rgba(61,154,82,.23);font-size:12px;font-weight:800;cursor:pointer}.ai-case-use:hover{filter:brightness(1.05);transform:translateY(-1px)}.ai-case-use span{margin-right:5px}
.art-toast { position: fixed; z-index:20; right:32px; bottom:26px; min-height:0; margin:0; padding:9px 13px; border-radius:9px; color:#fff; background:#263129; box-shadow:0 12px 28px rgba(0,0,0,.18); }
@keyframes aiFloat{50%{transform:translateY(-5px) rotate(3deg)}}

.ai-workspace { position:relative;z-index:1;min-height:100vh;background:#f5f6f4}.ai-workspace.is-entering{animation:aiIn .42s ease both}@keyframes aiIn{from{opacity:0;transform:translateY(8px)}}
.ai-workspace-bar{height:66px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e9e4;background:rgba(255,255,255,.85);backdrop-filter:blur(16px)}.ai-workspace-bar>div{display:flex;align-items:center;gap:12px}.ai-workspace-bar strong{font-size:14px}.ai-back{width:32px;height:32px;border:1px solid #e1e6e0;border-radius:9px;background:#fff;cursor:pointer}.ai-status{padding:5px 8px;border-radius:99px;color:#5d9368;background:#edf7ed;font-size:10px}.ai-status i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#58b46b}.ai-ghost,.ai-export{height:34px;padding:0 13px;border-radius:9px;font-size:11px;font-weight:750}.ai-ghost{border:1px solid #dde3dc;background:#fff;color:#68736a}.ai-export{border:0;background:#222b24;color:#fff}
.ai-workspace-body{height:calc(100vh - 66px);display:grid;grid-template-columns:minmax(0,1fr) 350px}.ai-canvas{min-width:0;padding:24px 26px 40px;overflow:auto}.ai-canvas-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.ai-canvas-head>div:first-child{display:flex;align-items:baseline;gap:10px}.ai-canvas-head strong{font-size:15px}.ai-canvas-head span{color:#9aa39b;font-size:10px}.ai-view-switch{display:flex;padding:3px;border-radius:8px;background:#e8ece7}.ai-view-switch button{width:28px;height:25px;border:0;border-radius:6px;color:#8a948b;background:transparent}.ai-view-switch button.is-active{color:#3d7048;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.06)}
.ai-result-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:14px}.ai-result-card{position:relative;min-height:245px;overflow:hidden;border:2px solid transparent;border-radius:16px;text-align:left;box-shadow:0 8px 24px rgba(27,45,31,.08);cursor:pointer;transition:.2s}.ai-result-card:hover{transform:translateY(-2px)}.ai-result-card.is-selected{border-color:#55b56b;box-shadow:0 0 0 3px rgba(85,181,107,.16),0 12px 25px rgba(27,45,31,.1)}.ai-result-card.is-edited::after{content:"已更新";position:absolute;right:10px;top:10px;padding:4px 7px;border-radius:6px;color:#fff;background:#54aa67;font-size:9px}.ai-card-index{position:absolute;top:13px;left:14px;color:rgba(26,52,37,.45);font-size:9px;font-weight:800}.ai-card-copy{position:absolute;left:22px;bottom:20px;display:flex;flex-direction:column;color:#183727}.ai-card-copy b{font-size:24px;letter-spacing:-.035em}.ai-card-copy em{margin-top:2px;font-size:10px;font-style:normal;opacity:.67}.ai-selected-mark{position:absolute;right:11px;bottom:11px;width:23px;height:23px;display:none;place-items:center;border-radius:50%;color:#fff;background:#50ad66;font-size:11px}.is-selected .ai-selected-mark{display:grid}
.ai-result-card.hero{background:radial-gradient(ellipse at 62% 57%,#d3a06b 0 8%,transparent 9%),radial-gradient(ellipse at 62% 48%,#f5ead5 0 13%,transparent 14%),linear-gradient(135deg,#dbeeda,#9bc7a7)}.ai-result-card.ingredients{background:radial-gradient(circle at 70% 45%,rgba(255,255,255,.75) 0 9%,transparent 10%),radial-gradient(circle at 62% 55%,#90b788 0 21%,transparent 22%),linear-gradient(145deg,#f2ecd7,#c9d9b2)}.ai-result-card.texture{background:radial-gradient(ellipse at 60% 48%,rgba(255,255,255,.82) 0 15%,transparent 16%),linear-gradient(135deg,#d9f1e5,#a5c9bf)}.ai-result-card.lifestyle{background:linear-gradient(25deg,rgba(35,67,48,.45),transparent 50%),radial-gradient(circle at 67% 43%,#f2d4b8 0 10%,transparent 11%),linear-gradient(145deg,#c4d6bb,#668977)}.ai-result-card.benefit{background:radial-gradient(circle at 72% 44%,rgba(255,255,255,.5) 0 17%,transparent 18%),linear-gradient(135deg,#f4e5ca,#c6a680)}.ai-result-card.ending{background:radial-gradient(ellipse at 65% 57%,#d9a873 0 9%,transparent 10%),linear-gradient(135deg,#a7cfaf,#416d59)}.ai-result-card.ending .ai-card-copy{color:#fff}
.ai-chat{min-width:0;display:flex;flex-direction:column;border-left:1px solid #e0e6df;background:rgba(255,255,255,.92)}.ai-chat-head{height:70px;padding:0 17px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #edf0ec}.ai-mini-orb{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(145deg,#65c573,#6659d5)}.ai-chat-head>div{flex:1;display:flex;flex-direction:column;gap:3px}.ai-chat-head strong{font-size:12px}.ai-chat-head small{color:#929d94;font-size:9px}.ai-chat-head small b{color:#5a9f68}.ai-chat-head>button{border:0;color:#929b94;background:transparent}.ai-chat-stream{flex:1;padding:18px 15px;overflow:auto}.ai-message{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px}.ai-message>span{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;color:#fff;background:linear-gradient(145deg,#6dc779,#7466dd);font-size:10px}.ai-message p{max-width:245px;margin:0;padding:9px 11px;border-radius:4px 12px 12px 12px;color:#4f5d52;background:#f0f4ef;font-size:11px;line-height:1.55}.ai-message.user{justify-content:flex-end}.ai-message.user p{border-radius:12px 4px 12px 12px;color:#fff;background:#3b9a59}.ai-message p button{display:block;margin-top:7px;padding:0;border:0;color:#49985b;background:transparent;font-size:10px;font-weight:800}.ai-message.is-thinking i{display:inline-block;width:5px;height:5px;margin:0 2px;border-radius:50%;background:#8ca290;animation:dot 1s infinite}.ai-message.is-thinking i:nth-child(2){animation-delay:.16s}.ai-message.is-thinking i:nth-child(3){animation-delay:.32s}@keyframes dot{50%{transform:translateY(-3px)}}.ai-suggestion-row{display:flex;flex-wrap:wrap;gap:6px;margin-left:32px}.ai-suggestion-row button{font-size:10px;background:#fff}.ai-chat-composer{margin:12px;padding:10px;border:1px solid #cfdacf;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(32,62,40,.08)}.ai-chat-composer textarea{width:100%;min-height:48px;border:0;outline:0;resize:none;color:#2b372e;font-size:12px}.ai-chat-composer textarea::placeholder{color:#a6afa8}.ai-chat-composer>div{display:flex;align-items:center}.ai-chat-composer>div span{flex:1;margin-left:8px;color:#97a199;font-size:9px}.ai-attach,.ai-chat-send{width:28px;height:28px;border-radius:8px}.ai-attach{border:1px solid #e3e7e2;color:#839086;background:#fff}.ai-chat-send{border:0;color:#fff;background:#4ca862;font-size:15px}
.ai-chat-settings{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px 32px}
.ai-chat-settings label{position:relative;min-width:0;padding:6px 8px;border:1px solid #e1e8e0;border-radius:9px;background:#fff}
.ai-chat-settings label:focus-within{border-color:#8bc69a;box-shadow:0 0 0 2px rgba(85,181,107,.1)}
.ai-chat-settings label span{display:block;margin-bottom:1px;color:#9ca69e;font-size:8px}
.ai-chat-settings select{width:100%;padding:0 14px 0 0;border:0;outline:0;color:#405047;background:transparent;font-size:10px;font-weight:750;cursor:pointer}
.ai-context-note{width:max-content;margin:8px 0 10px auto;padding:5px 9px;border-radius:99px;color:#428655;background:#eaf6eb;font-size:9px;font-weight:750;animation:aiIn .25s ease both}
@media(max-width:1050px){.ai-launcher{grid-template-columns:180px 1fr}.ai-case-grid{grid-template-columns:repeat(3,1fr)}.ai-workspace-body{grid-template-columns:1fr 310px}.ai-result-grid{grid-template-columns:1fr}.ai-result-card{min-height:220px}}
@media(max-width:760px){.ai-detail-page::before{left:0}.ai-start{width:calc(100% - 28px);padding-top:40px}.ai-launcher{grid-template-columns:1fr}.ai-dropzone{min-height:150px}.ai-launch-settings,.ai-task-switch{grid-template-columns:1fr 1fr}.ai-task-switch button{height:58px}.ai-cases-head{align-items:flex-start;gap:12px;flex-direction:column}.ai-cases-head nav{max-width:100%;overflow:auto}.ai-case-grid{grid-template-columns:1fr 1fr}.ai-case-card,.ai-case-card.tall{min-height:180px;grid-row:auto}.ai-workspace-body{display:block;height:auto}.ai-chat{position:sticky;bottom:0;min-height:420px;border-left:0;border-top:1px solid #e0e6df}.ai-workspace-bar{padding:0 12px}.ai-status{display:none}}
@media(max-width:760px){.ai-case-modal{padding:12px}.ai-case-dialog{height:calc(100vh - 24px);grid-template-columns:1fr;grid-template-rows:210px 1fr}.ai-case-preview{margin:8px}.ai-case-form{padding:24px 18px}.ai-case-form header h2{font-size:23px}.ai-case-product-row{margin-top:17px}.ai-case-field{margin-top:17px}.ai-case-use{min-height:46px;margin-top:16px}.ai-case-close{right:11px;top:11px}}

/* Ai art / attachment workspace */
.art-main {
  min-height: 100%;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 8%, rgba(191, 239, 205, 0.4), transparent 30%),
    radial-gradient(circle at 92% 35%, rgba(246, 226, 184, 0.38), transparent 28%),
    #f7f8f5;
  color: #18201a;
}

.art-shell {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 64px 46px 72px;
}

.art-hero {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.art-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4c9d55;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}

.art-kicker-mark {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #d8f1bf;
  color: #4caa4d;
  font-size: 13px;
  letter-spacing: 0;
}

.art-hero h1 {
  margin: 13px 0 0;
  color: #171b19;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 850;
}

.art-subtitle {
  max-width: 560px;
  margin: 14px auto 0;
  color: #7d867e;
  font-size: 13px;
  line-height: 1.6;
}

.art-prompt-card {
  position: relative;
  margin-top: 34px;
  padding: 17px 17px 13px;
  border: 1px solid #6fbd68;
  border-radius: 20px;
  background: rgba(252, 255, 250, .92);
  box-shadow: 0 0 0 4px rgba(147, 218, 111, .13), 0 22px 54px rgba(97, 177, 99, .2);
  text-align: left;
}

.art-prompt-card textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 2px 2px 0;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: #1c241e;
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
}

.art-prompt-card textarea::placeholder { color: #aab5ab; }

.art-attachment-row {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 7px;
}

.art-attachment-chip {
  max-width: 190px;
  padding: 5px 9px;
  overflow: hidden;
  border-radius: 7px;
  background: #e4f4cf;
  color: #51834d;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.art-prompt-toolbar,
.art-tool-buttons,
.art-submit-group {
  display: flex;
  align-items: center;
}

.art-prompt-toolbar {
  justify-content: space-between;
  gap: 12px;
}

.art-tool-buttons,
.art-submit-group { gap: 8px; }

.art-icon-button,
.art-model-button,
.art-send-button {
  border: 1px solid rgba(23, 35, 26, .09);
  background: #fff;
  color: #718074;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.art-icon-button:hover,
.art-model-button:hover,
.art-send-button:hover { transform: translateY(-1px); }

.art-icon-button {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 17px;
  font-weight: 750;
}

.art-icon-button.is-selected {
  border-color: #a6d887;
  background: #e8f8d8;
  color: #4d9e51;
}

.art-model-button {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
}

.art-model-button span { margin-left: 8px; color: #9aa89a; }

.art-send-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #62bd59;
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  box-shadow: 0 8px 17px rgba(79, 168, 79, .26);
}

.art-model-menu {
  position: absolute;
  right: 58px;
  bottom: 56px;
  z-index: 3;
  width: 224px;
  padding: 6px;
  border: 1px solid rgba(23, 35, 26, .1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(28, 52, 31, .16);
}

.art-model-menu button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #536258;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}

.art-model-menu button:hover,
.art-model-menu button.is-selected { background: #eef8e7; color: #3f8648; }
.art-model-menu button span { color: #a3afa3; font-size: 10px; }

.art-mode-switch {
  display: inline-flex;
  gap: 4px;
  margin-top: 25px;
  padding: 4px;
  border-radius: 13px;
  background: #e9eee8;
}

.art-mode-switch button {
  min-height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8a958b;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.art-mode-switch button.is-active {
  background: #fff;
  color: #4f9b51;
  box-shadow: 0 3px 10px rgba(39, 68, 43, .09);
}

.art-mode-note {
  min-height: 18px;
  margin-top: 9px;
  color: #9aa49b;
  font-size: 11px;
}

.art-toast {
  min-height: 19px;
  margin-top: 8px;
  color: #4e9d54;
  font-size: 11px;
  font-weight: 750;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .2s ease, transform .2s ease;
}

.art-toast.is-visible { opacity: 1; transform: translateY(0); }

.art-gallery {
  margin-top: 57px;
}

.art-gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.art-gallery-heading h2 {
  margin: 0;
  color: #222b24;
  font-size: 20px;
  letter-spacing: -.025em;
}

.art-gallery-heading p {
  margin: 6px 0 0;
  color: #9aa39b;
  font-size: 11px;
}

.art-gallery-count {
  color: #a0aaa0;
  font-size: 11px;
  font-weight: 700;
}

.art-gallery-tabs {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  border-bottom: 1px solid #e2e8e1;
}

.art-gallery-tabs button {
  position: relative;
  padding: 0 0 11px;
  border: 0;
  background: transparent;
  color: #9ba49d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.art-gallery-tabs button.is-active { color: #4d9b52; }
.art-gallery-tabs button.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #68b95f;
}

.art-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.art-image-card {
  position: relative;
  min-height: 188px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31, 47, 34, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.art-image-card::before,
.art-image-card::after { content: ""; position: absolute; pointer-events: none; }
.art-image-card::before { inset: 0; background: linear-gradient(140deg, rgba(255,255,255,.48), transparent 40%, rgba(0,0,0,.13)); }
.art-image-card:hover { transform: translateY(-3px); box-shadow: 0 15px 28px rgba(31, 47, 34, .14); }
.art-image-card.is-picked { border-color: #68b95f; box-shadow: 0 0 0 3px rgba(104,185,95,.18), 0 15px 28px rgba(31,47,34,.14); }

.art-card-label {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 10px;
  z-index: 1;
  color: rgba(255,255,255,.9);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  text-shadow: 0 1px 5px rgba(0,0,0,.26);
}

.art-card-model { background: radial-gradient(ellipse at 54% 34%, #f3c6aa 0 17%, transparent 18%), radial-gradient(ellipse at 52% 30%, #493128 0 29%, transparent 30%), linear-gradient(145deg, #edc39f, #806157 57%, #28322e); }
.art-card-sand { background: radial-gradient(ellipse at 43% 57%, #d88f50 0 22%, transparent 23%), radial-gradient(ellipse at 66% 39%, #f3d6a7 0 14%, transparent 15%), linear-gradient(135deg, #f2e6ce, #c19767 48%, #776453); }
.art-card-lime { background: radial-gradient(circle at 52% 42%, #f8f7dc 0 15%, transparent 16%), radial-gradient(circle at 35% 64%, #63a45a 0 20%, transparent 21%), linear-gradient(145deg, #d9edb0, #6f9e5a 60%, #274e3a); }
.art-card-sky { background: radial-gradient(ellipse at 50% 47%, #e2aa91 0 14%, transparent 15%), radial-gradient(ellipse at 50% 35%, #202e3b 0 26%, transparent 27%), linear-gradient(145deg, #b9d9e5, #5f8095 57%, #20333d); }
.art-card-coral { background: radial-gradient(circle at 53% 42%, #f3d0c0 0 16%, transparent 17%), radial-gradient(ellipse at 56% 32%, #49212a 0 24%, transparent 25%), linear-gradient(145deg, #f7a57e, #d76363 54%, #632d3a); }
.art-card-night { background: radial-gradient(circle at 65% 39%, #ffe8b2 0 5%, transparent 6%), radial-gradient(circle at 43% 51%, #637dd0 0 16%, transparent 17%), linear-gradient(145deg, #1a2746, #101525 59%, #3b2e4c); }
.art-card-paper { background: repeating-linear-gradient(0deg, rgba(55,65,55,.08) 0 1px, transparent 1px 17px), linear-gradient(135deg, #f6f2e6, #d9e6d6); }
.art-card-blue { background: radial-gradient(ellipse at 55% 52%, #e3b29b 0 15%, transparent 16%), radial-gradient(circle at 52% 35%, #263544 0 22%, transparent 23%), linear-gradient(145deg, #b5d9ec, #447eae 57%, #1e3b59); }

@media (max-width: 980px) {
  .art-shell { padding: 42px 22px 58px; }
  .art-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .art-shell { padding: 30px 15px 44px; }
  .art-prompt-toolbar { align-items: flex-start; flex-direction: column; }
  .art-submit-group { width: 100%; justify-content: flex-end; }
  .art-gallery-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .art-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .art-image-card { min-height: 150px; }
  .art-mode-switch { display: flex; width: 100%; }
  .art-mode-switch button { flex: 1; padding: 0 7px; }
}

/* Detail-page result mode */
.ai-detail-result[hidden]{display:none}.ai-detail-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.ai-detail-toolbar>span{color:#699173;font-size:9px}.ai-detail-toolbar>span i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#55b66c}.ai-detail-toolbar>div{display:flex;gap:5px}.ai-detail-toolbar button{height:29px;padding:0 9px;border:1px solid #e0e6df;border-radius:8px;color:#7c887f;background:#fff;font-size:9px;cursor:pointer}.ai-detail-toolbar button.is-active{color:#397c49;background:#edf7ec;border-color:#b5d8b8}.ai-detail-toolbar .ai-download{margin-left:5px;color:#fff;border-color:#35463a;background:#35463a}.ai-long-page{width:min(520px,100%);margin:0 auto;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 14px 40px rgba(31,50,36,.14)}.detail-section{position:relative;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:22px;border:0;border-bottom:1px solid rgba(255,255,255,.35);color:#183426;text-align:left;cursor:pointer;transition:filter .18s,box-shadow .18s}.detail-section:hover{filter:brightness(1.03)}.detail-section.is-selected{z-index:1;box-shadow:inset 0 0 0 3px #55b76b}.detail-section>span{font-size:22px;font-weight:900;letter-spacing:-.03em}.detail-section>small{margin-top:3px;font-size:9px;opacity:.7}.detail-section>i{position:absolute;right:13px;top:12px;color:rgba(28,62,40,.45);font-size:9px;font-style:normal}.detail-section.has-candidate::after,.detail-section.is-edited::after{position:absolute;right:11px;bottom:10px;padding:4px 7px;border-radius:6px;color:#fff;font-size:8px}.detail-section.has-candidate::after{content:"精修候选";background:#7b6adb}.detail-section.is-edited::after{content:"已更新";background:#4da963}.detail-hero{height:260px;background:radial-gradient(ellipse at 67% 55%,#d3a06b 0 8%,transparent 9%),radial-gradient(ellipse at 67% 43%,#f5ead5 0 13%,transparent 14%),linear-gradient(135deg,#dbeeda,#91bfa1)}.detail-selling{height:180px;background:radial-gradient(circle at 72% 47%,rgba(255,255,255,.7) 0 13%,transparent 14%),linear-gradient(145deg,#f1ecd7,#bdcfaa)}.detail-scene{height:220px;color:#fff;background:linear-gradient(30deg,rgba(30,60,42,.55),transparent 55%),radial-gradient(circle at 70% 38%,#f2d4b8 0 10%,transparent 11%),linear-gradient(145deg,#bed1b5,#608371)}.detail-angle{height:175px;background:radial-gradient(ellipse at 68% 50%,#dfbd8b 0 10%,transparent 11%),radial-gradient(ellipse at 48% 50%,#dfbd8b 0 10%,transparent 11%),linear-gradient(135deg,#e8eee1,#b9cbb5)}.detail-mood{height:210px;background:radial-gradient(ellipse at 62% 50%,rgba(255,255,255,.8) 0 16%,transparent 17%),linear-gradient(135deg,#d8f0e4,#9dc5b9)}.detail-close{height:190px;color:#fff;background:radial-gradient(ellipse at 68% 56%,#d7a473 0 8%,transparent 9%),linear-gradient(135deg,#96c2a1,#3d6a55)}.ai-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ai-section-grid[hidden]{display:none}.ai-section-grid .detail-section{height:180px;border-radius:12px}.ai-section-grid .detail-section>span{font-size:15px}.ai-compare-actions{display:flex;gap:5px;margin-top:7px}.ai-message p .ai-compare-actions button{display:inline-flex;margin:0;padding:5px 7px;border:1px solid #bad5bd;border-radius:6px}.ai-message p .ai-compare-actions button:last-child{color:#fff;border-color:#4fa964;background:#4fa964}.ai-detail-chat-type{grid-column:1/-1}.is-detail-mode .ai-canvas{background:linear-gradient(180deg,#f3f5f2,#e9eee9)}
@media(max-width:760px){.ai-module-picker{grid-template-columns:repeat(2,1fr)}.ai-detail-toolbar{align-items:flex-start;gap:8px;flex-direction:column}.ai-section-grid{grid-template-columns:1fr}.ai-long-page{width:100%}}