/* Y Data inspired light workbench. This stylesheet is only loaded by index.html. */
:root {
  --blue: #3d8a9c;
  --violet: #2f6d82;
  --ink: #1c3140;
  --muted: #6d8290;
  --line: rgba(82, 140, 160, .16);
  --soft: #eef6f8;
  --panel: rgba(255, 255, 255, .8);
  --shadow: 0 16px 50px rgba(20, 50, 70, .06);
  --rail-width: 76px;
  --content-width: 1520px;
}

html {
  background: #dcecef;
  color-scheme: light;
}

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse 80% 60% at 72% -18%, rgba(130, 210, 224, .38), transparent 58%),
    radial-gradient(ellipse 50% 55% at 108% 48%, rgba(153, 122, 215, .12), transparent 68%),
    radial-gradient(ellipse 45% 40% at 0% 0%, rgba(186, 232, 238, .22), transparent 50%),
    radial-gradient(ellipse 70% 50% at 28% 115%, rgba(12, 40, 58, .08), transparent 55%),
    linear-gradient(168deg, #e4f3f6 0%, #eef6f8 38%, #f3f7f8 70%, #e8eef2 100%);
  background-attachment: fixed;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #5aabb8;
  outline-offset: 4px;
}

.app-shell {
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
}

/* Compact icon rail. Items shrink to the viewport so the rail never scrolls. */
.app-shell .sidebar {
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 10px;
  overflow: hidden;
  background: rgba(236, 247, 250, .58);
  border-right: 1px solid rgba(120, 176, 196, .16);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(1.15);
}

.sidebar-home {
  flex: 0 0 auto;
  margin-bottom: 8px;
  text-decoration: none;
  border-radius: 12px;
}

.sidebar .brand {
  width: 38px;
  height: 38px;
  justify-content: center;
  margin: 0;
}

.sidebar .brand > div:last-child {
  display: none;
}

.sidebar .brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 12px;
  background: linear-gradient(145deg, #163040, #071018);
  box-shadow: 0 4px 12px rgba(8, 24, 36, .22), inset 0 1px 1px rgba(255, 255, 255, .22);
}

.sidebar .brand-mark::before,
.sidebar .brand-mark::after {
  top: 12px;
  width: 17px;
  height: 12px;
  border-width: 2.5px;
  background: transparent;
  border-color: #9ed7e2;
}

.sidebar .brand-mark::before { left: 5px; }
.sidebar .brand-mark::after { right: 5px; border-color: #d6f3f6; }

.sidebar nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  min-height: 0;
  padding: 0 0 6px;
  overflow: hidden;
  scrollbar-width: none;
}

.sidebar nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sidebar .nav-item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: 40px;
  gap: 2px;
  padding: 0 1px;
  color: #6d8290;
  background: transparent;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  transform: none;
}

.sidebar .nav-item .icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.7;
}

.sidebar .nav-item:hover {
  color: #1c3a4a;
  background: rgba(82, 171, 195, .10);
  transform: none;
  box-shadow: none;
}

.sidebar .nav-item.active,
.sidebar .nav-item.active:hover {
  color: #14323f;
  background: rgba(82, 171, 195, .16);
  box-shadow: none;
}

.sidebar .nav-item.active::before {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 2px;
  height: 12px;
  content: "";
  background: #5aabb8;
  border-radius: 2px;
  transform: translateY(-50%);
}

.sidebar-tools {
  display: grid;
  flex: 0 0 auto;
  gap: 0;
  width: 58px;
  padding-top: 6px;
  border-top: 1px solid rgba(120, 176, 196, .18);
}

.sidebar-tools .recharge,
.sidebar-tools .support-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 40px;
  gap: 2px;
  margin: 0;
  padding: 0;
  color: #6d8290;
  background: transparent;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  font-size: 9px;
  font-weight: 500;
}

.sidebar-tools .recharge { color: #3d7a8c; }
.sidebar-tools .icon { width: 14px; height: 14px; stroke-width: 1.7; }
.sidebar-tools button:hover { background: rgba(82, 171, 195, .10); transform: none; }

/* Keep a calm gutter from the rail; do not slam the workbench against it. */
.app-shell .main {
  min-width: 0;
  padding: 18px 36px 36px 56px;
}

.workbench-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
  min-height: 46px;
  margin: 0 0 22px;
}

.workbench-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.workbench-brand a {
  color: #3d7a8c;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.5px;
  text-decoration: none;
  white-space: nowrap;
}

.workbench-brand > span {
  padding-left: 16px;
  color: #7a93a0;
  border-left: 1px solid rgba(82, 140, 160, .22);
  font-size: 12px;
  letter-spacing: 1px;
}

.workbench-header .topbar {
  position: static;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 5px 6px;
  gap: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .57);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(12, 40, 58, .04);
}

.workbench-header .account-avatar {
  width: 30px;
  height: 30px;
  color: #4a7d8c;
  background: #e4f1f4;
}

.workbench-header .user-email { color: #3d5560; font-size: 11px; font-weight: 550; }
.workbench-header .account-text em { color: #7a93a0; font-size: 10px; font-weight: 400; }
.workbench-header .mini { height: 32px; min-height: 32px; padding: 0 16px; font-size: 11px; }

.main > section,
.main > .hero,
.main > .workflow {
  max-width: none;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/* width:100% would cap the fixed canvas at --content-width and ignore right:0. */
.main > section.canvas-page {
  max-width: none;
  width: auto;
  margin-right: 0;
}

.page-title { color: var(--ink); letter-spacing: -.5px; }
.page-sub, .muted { color: var(--muted); }

.suite-hero {
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0;
  text-align: left;
}

.suite-kicker {
  margin-bottom: 10px;
  color: #6d8b99;
  font-size: 11px;
  letter-spacing: 2px;
}

.suite-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -1px;
  text-wrap: balance;
}

.suite-hero h1 span {
  color: #3d7a8c;
  background: linear-gradient(100deg, #2f6d82, #5f9eb8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.suite-hero .page-sub { margin: 10px 0 0; font-size: 13px; line-height: 1.7; }

/* Preserve the product views; make their outer surfaces sit on the shared gradient. */
.panel, .wizard-card, .ecom-panel, .ecom-plan-panel, .studio-settings, .studio-result,
.toolbox-card-list, .toolbox-workbench, .toolbox-result, .video-form-panel,
.video-settings-panel, .video-tasks-panel, .clone-main-panel, .clone-side-panel {
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 20px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .75);
}

.primary, .primary.block, .mini.primary-lite {
  color: #fff;
  background: #17313d;
  border: 1px solid #17313d;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(12, 40, 58, .12);
  font-weight: 600;
}

.primary:hover:not(:disabled), .mini.primary-lite:hover:not(:disabled) {
  background: #2a4d5c;
  box-shadow: 0 8px 22px rgba(12, 40, 58, .16);
}

.ghost, .mini {
  color: #5a7380;
  background: rgba(255, 255, 255, .60);
  border: 1px solid rgba(82, 140, 160, .18);
  border-radius: 999px;
  font-weight: 500;
}

.ghost:hover:not(:disabled), .mini:hover:not(:disabled) { background: #e7f4f7; color: #2a4d5c; }
.primary:disabled, .ghost:disabled { opacity: .4; box-shadow: none; }

input, textarea, select {
  border-color: rgba(82, 140, 160, .22);
  background: rgba(255, 255, 255, .88);
  border-radius: 10px;
}

input:focus, textarea:focus, select:focus {
  border-color: #5aabb8;
  box-shadow: 0 0 0 3px rgba(82, 171, 195, .16);
}

input::placeholder, textarea::placeholder { color: #8aa0ab; }

/* Keep the two panels as one group; a slightly wider gutter shifts the case card right. */
#suiteWizardWorkflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}

#suiteWizardCard {
  min-width: 0;
  min-height: 0;
  padding: 26px;
  border-radius: 22px;
}

.suite-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(82, 140, 160, .12);
}

.suite-step {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #8aa0ab;
  font-size: 11px;
  white-space: nowrap;
}

.suite-step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 4px;
  background: #d5e6eb;
}

.suite-step-number {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #7a93a0;
  background: #e8f1f4;
  border-radius: 50%;
  font-size: 10px;
}

.suite-step.active { color: #1c4a58; font-weight: 600; }
.suite-step.active .suite-step-number { color: #fff; background: #3d8a9c; }
.suite-step.done .suite-step-number { color: #3d7a8c; background: #dceef2; }
.suite-step.done::after { background: #9ec9d4; }
.suite-step-number .icon { width: 13px; height: 13px; }

#suiteWizardCard .section-head > b { display: none; }
#suiteWizardCard .section-head h2 { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
#suiteWizardCard .section-head p { margin-top: 7px; color: #6d8290; font-size: 12px; line-height: 1.6; }
#suiteWizardCard .type-step-toolbar { gap: 12px; margin: 18px 0 16px; }
#suiteWizardCard .warn { padding: 0; color: #7a93a0; background: transparent; font-size: 11px; font-weight: 400; }
#suiteWizardCard .type-total-pill { min-height: 26px; padding: 0 10px; color: #2f6d82; background: #e4f3f6; border: 0; font-size: 10.5px; font-weight: 500; }
#suiteWizardCard .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

#suiteWizardCard .type-card {
  gap: 14px;
  min-height: 0;
  padding: 16px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid #d5e6eb;
  border-radius: 15px;
  box-shadow: none;
}

#suiteWizardCard .type-card.selected { background: rgba(232, 246, 248, .72); border-color: #9ec9d4; box-shadow: inset 0 0 0 1px rgba(82, 171, 195, .08); }
#suiteWizardCard .type-card:hover { border-color: #7eb8c4; }
#suiteWizardCard .type-card-head { grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 24px 0 0; }
#suiteWizardCard .type-thumb { width: 40px; height: 44px; border: 0; border-radius: 8px; box-shadow: none; }
#suiteWizardCard .type-card h3 { color: #1c3140; font-size: 14px; font-weight: 600; }
#suiteWizardCard .type-card p { margin-top: 5px; color: #6d8290; font-size: 11px; }
#suiteWizardCard .card-check { top: 17px; right: 15px; left: auto; width: 18px; height: 18px; border-color: #b5d0d6; border-radius: 6px; }
#suiteWizardCard .type-card.selected .card-check { background: #3d8a9c; border-color: #3d8a9c; }
#suiteWizardCard .type-options { gap: 12px; }
#suiteWizardCard .mini-divider { background: rgba(82, 140, 160, .12); }
#suiteWizardCard .type-count-tools { gap: 10px; padding: 0; background: transparent; border: 0; }
#suiteWizardCard .type-count-head span { color: #7a93a0; font-size: 10px; font-weight: 500; }
#suiteWizardCard .type-count-head b { color: #2f6d82; font-size: 12px; font-weight: 600; }
#suiteWizardCard .quick-count-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
#suiteWizardCard .quick-count-row button { justify-content: center; height: 27px; padding: 0; color: #6d8290; background: #fff9; border: 1px solid #d5e6eb; border-radius: 6px; font-size: 11px; }
#suiteWizardCard .quick-count-row button.active { color: #1c4a58; background: #d7eef2; border-color: #9ec9d4; font-weight: 500; }
#suiteWizardCard .quick-count-row .radio { display: none; }
#suiteWizardCard .count-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#suiteWizardCard .count-field-row label { gap: 5px; color: #7a93a0; font-size: 10px; font-weight: 400; }
#suiteWizardCard .count-field-row input,
#suiteWizardCard .count-field-row select { height: 32px; padding: 0 8px; color: #3d5560; background: #fffc; border-color: #d5e6eb; border-radius: 7px; font-size: 11px; font-weight: 500; }
#suiteWizardCard .feature-tags { gap: 5px; }
#suiteWizardCard .feature-tags span { min-height: 19px; padding: 0 6px; color: #6d8b99; background: #eef6f8; border: 0; font-size: 9px; font-weight: 400; }

.suite-output-settings { margin-top: 18px; background: rgba(232, 244, 247, .7); border: 1px solid #d5e6eb; border-radius: 12px; }
.suite-output-settings > summary { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 15px; color: #5a7380; cursor: pointer; list-style: none; }
.suite-output-settings > summary::-webkit-details-marker { display: none; }
.suite-output-settings > summary > span { flex: 0 0 auto; font-size: 12px; font-weight: 550; }
.suite-output-settings > summary small { margin-left: auto; color: #7a93a0; font-size: 10.5px; line-height: 1.5; text-align: right; }
.suite-output-settings > summary .icon { width: 15px; height: 15px; color: #8aa0ab; transition: transform .2s ease; }
.suite-output-settings[open] > summary .icon { transform: rotate(90deg); }
#suiteWizardCard .suite-output-settings .resolution-box { margin: 0; padding: 16px; background: #fffa; border: 0; border-top: 1px solid #d5e6eb; border-radius: 0 0 12px 12px; }
#suiteWizardCard .image-model-choice { background: #eef6f8; border-color: #d5e6eb; }
#suiteWizardCard .image-model-choice-title strong { color: #2f6d82; }
#suiteWizardCard .resolution-mode-toggle button.active { color: #1c4a58; background: #d7eef2; box-shadow: none; }
#suiteWizardCard .actions { margin-top: 22px; padding-top: 0; border: 0; }
#suiteWizardCard .actions > button { min-width: 106px; min-height: 42px; height: 42px; padding: 0 24px; font-size: 12px; }
#suiteWizardCard .actions .primary { min-width: 132px; }

/* A calm editorial reference, using the project's existing product photography. */
#suiteCaseMount { position: sticky; top: 24px; min-width: 0; }
.suite-preview { padding: 20px; background: rgba(255, 255, 255, .40); border: 1px solid rgba(255, 255, 255, .88); border-radius: 22px; box-shadow: var(--shadow); }
.suite-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: #6d8b99; font-size: 11px; }
.suite-preview-heading span:last-child { color: #8aa0ab; font-size: 9px; letter-spacing: 1px; }
.suite-preview-cover { position: relative; overflow: hidden; aspect-ratio: 1.12; border-radius: 12px; background: #e5e0e8; }
.suite-preview-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.suite-preview-cover::after { position: absolute; inset: 60% 0 0; content: ""; background: linear-gradient(transparent, #1e143b66); pointer-events: none; }
.suite-preview-cover > span { position: absolute; right: 12px; bottom: 14px; left: 12px; z-index: 1; color: white; font-size: 12px; font-weight: 500; }
.suite-preview-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.suite-preview-thumbs img { display: block; width: 100%; aspect-ratio: 1.15; object-fit: cover; border-radius: 8px; }
.suite-preview h2 { margin: 20px 0 8px; color: #2f6d82; font-size: 17px; font-weight: 550; letter-spacing: -.3px; }
.suite-preview p { margin: 0; color: #6d8290; font-size: 11px; line-height: 1.85; }
.suite-inspiration-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 14px; color: #3d7a8c; border-top: 1px solid rgba(82, 140, 160, .16); font-size: 11px; text-decoration: none; }
.suite-inspiration-link:hover { color: #1c4a58; }
.suite-inspiration-link .icon { width: 14px; height: 14px; }

.main > footer.muted { max-width: none; margin: 28px 0 0 !important; padding-top: 18px !important; color: #8aa0ab; border-top: 1px solid rgba(82, 140, 160, .14) !important; font-size: 10px; }

.main > section.prompt-chat {
  width: min(920px, 100%);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.prompt-chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, 100%);
  height: calc(100vh - 112px);
  min-height: 420px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(82, 140, 160, .16);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.prompt-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(82, 140, 160, .14);
}

.prompt-chat-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.prompt-chat-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.prompt-chat-head b {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #1c4a58;
  background: rgba(82, 171, 195, .14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

.prompt-chat-log {
  min-height: 0;
  overflow: auto;
  padding: 18px 20px;
  scrollbar-width: thin;
}

.prompt-chat-empty {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: center;
}

.prompt-chat-empty strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.prompt-chat-empty p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.prompt-chat-starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.prompt-chat-starters button,
.prompt-chat-actions button {
  min-height: 32px;
  padding: 0 12px;
  color: #1c4a58;
  background: rgba(82, 171, 195, .1);
  border: 1px solid rgba(82, 140, 160, .18);
  border-radius: 999px;
  font-size: 12px;
}

.prompt-chat-starters button:hover,
.prompt-chat-actions button:hover {
  background: rgba(82, 171, 195, .18);
}

.prompt-chat-message {
  width: min(100%, 680px);
  margin: 0 0 14px;
}

.prompt-chat-message span {
  display: block;
  margin-bottom: 4px;
  color: #8aa0ab;
  font-size: 11px;
}

.prompt-chat-message p {
  margin: 0;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  background: #f4fafb;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.65;
}

.prompt-chat-message.is-user {
  margin-left: auto;
}

.prompt-chat-message.is-user span { text-align: right; }

.prompt-chat-message.is-user p {
  color: #14323f;
  background: rgba(82, 171, 195, .16);
}

.prompt-chat-message.is-pending p { color: var(--muted); }

.prompt-chat-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.prompt-chat-composer {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(82, 140, 160, .14);
}

.prompt-chat-composer textarea {
  width: 100%;
  min-height: 74px;
  max-height: 160px;
  padding: 12px 14px;
  resize: vertical;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(82, 140, 160, .22);
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.prompt-chat-composer textarea:focus {
  outline: 2px solid rgba(90, 171, 184, .45);
  border-color: #5aabb8;
}

.prompt-chat-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.prompt-chat-composer-bar span {
  color: var(--muted);
  font-size: 12px;
}

.prompt-chat-composer-bar .primary {
  width: auto;
  min-width: 88px;
  height: 36px;
  padding: 0 16px;
}

@media (min-width: 901px) {
  .app-shell .canvas-page { left: var(--rail-width); }
}

@media (max-width: 1179px) {
  #suiteWizardWorkflow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #suiteCaseMount { position: static; }
  .suite-preview { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 24px; padding: 20px; }
  .suite-preview-heading { grid-column: 1 / -1; }
  .suite-preview-cover { grid-column: 1; grid-row: 2 / 5; }
  .suite-preview-cover > span { font-size: 10px; }
  .suite-preview-thumbs { display: none; }
  .suite-preview h2 { margin: 4px 0 8px; }
  .suite-inspiration-link { margin-top: 8px; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .app-shell .main { padding: 18px 22px calc(100px + env(safe-area-inset-bottom)); }
  .workbench-header { margin-bottom: 26px; gap: 12px; }
  .workbench-brand { gap: 10px; }
  .workbench-brand > span { padding-left: 10px; font-size: 11px; letter-spacing: 0; }
  .app-shell .sidebar { inset: auto 0 0; width: 100%; height: calc(74px + env(safe-area-inset-bottom)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(236, 247, 250, .92); border: 0; border-top: 1px solid rgba(120, 176, 196, .22); box-shadow: 0 -4px 24px rgba(12, 40, 58, .06); backdrop-filter: blur(16px); }
  .sidebar-home, .sidebar-tools { display: none; }
  .sidebar nav { flex-direction: row; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 0 2px; scrollbar-width: none; }
  .sidebar .nav-item { flex: 0 0 66px; width: 66px; max-height: none; height: 56px; font-size: 10px; gap: 4px; }
  .sidebar .nav-item .icon { width: 17px; height: 17px; }
  .sidebar .nav-item.active::before { top: auto; left: auto; inset: auto 23px 1px; width: 20px; height: 2px; border-radius: 2px; transform: none; }
  .prompt-chat { height: calc(100vh - 196px); min-height: 360px; }
  .prompt-chat-head { padding: 14px 14px 12px; }
  .prompt-chat-head h1 { font-size: 18px; }
  .prompt-chat-log, .prompt-chat-composer { padding-left: 14px; padding-right: 14px; }
  #suiteWizardCard { padding: 24px; }
  .suite-hero { margin-bottom: 24px; }
  .suite-stepper { gap: 12px; }
}

@media (max-width: 640px) {
  .app-shell .main { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); }
  .workbench-header { gap: 8px; min-height: 40px; margin-bottom: 26px; }
  .workbench-brand a { font-size: 18px; }
  .workbench-brand > span { display: none; }
  .workbench-header .topbar { min-height: 36px; gap: 8px; padding: 3px 4px; }
  .workbench-header .account-text { display: none; }
  .workbench-header .account-avatar { width: 28px; height: 28px; }
  .workbench-header .mini { padding: 0 12px; height: 28px; min-height: 28px; font-size: 10px; }
  .suite-kicker { font-size: 10px; letter-spacing: 1.5px; }
  .suite-hero h1 { max-width: 350px; font-size: 27px; line-height: 1.4; letter-spacing: -.8px; }
  .suite-hero h1 span { display: block; }
  .suite-hero .page-sub { max-width: 330px; font-size: 12px; line-height: 1.8; }
  #suiteWizardCard { padding: 18px 15px; border-radius: 18px; }
  .suite-stepper { gap: 4px; margin-bottom: 20px; padding-bottom: 18px; }
  .suite-step { flex-direction: column; gap: 7px; font-size: 10px; }
  .suite-step-number { flex-basis: 24px; }
  .suite-step:not(:last-child)::after { position: absolute; display: none; }
  #suiteWizardCard .section-head h2 { font-size: 20px; }
  #suiteWizardCard .section-head p { font-size: 11px; }
  #suiteWizardCard .type-step-toolbar { align-items: center; flex-direction: row; margin: 16px 0; gap: 8px; }
  #suiteWizardCard .warn { flex: 1; font-size: 10px; line-height: 1.6; }
  #suiteWizardCard .type-grid { grid-template-columns: 1fr; gap: 12px; }
  #suiteWizardCard .type-card { padding: 16px; }
  #suiteWizardCard .type-card-head { grid-template-columns: 38px 1fr; }
  #suiteWizardCard .type-card p { font-size: 11px; }
  #suiteWizardCard .type-options { gap: 10px; }
  #suiteWizardCard .quick-count-row button { min-height: 32px; }
  #suiteWizardCard .count-field-row input, #suiteWizardCard .count-field-row select { height: 36px; }
  .suite-output-settings > summary { gap: 8px; padding: 12px; }
  .suite-output-settings > summary small { font-size: 9px; }
  #suiteWizardCard .suite-output-settings .resolution-box { padding: 12px; }
  #suiteWizardCard .image-model-select { min-width: 0; }
  .suite-preview { grid-template-columns: 100px minmax(0, 1fr); column-gap: 16px; padding: 16px; border-radius: 18px; }
  .suite-preview-cover { aspect-ratio: auto; min-height: 142px; }
  .suite-preview-cover > span { font-size: 9px; left: 9px; right: 9px; }
  .suite-preview h2 { font-size: 15px; line-height: 1.5; }
  .suite-preview p, .suite-inspiration-link { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-item, .suite-output-settings .icon, #suiteWizardCard button { transition: none; }
}