:root {
  --ink: #11130f;
  --ink-2: #252822;
  --paper: #f3f4ef;
  --surface: #ffffff;
  --surface-2: #ebede6;
  --line: #d8dbd2;
  --line-strong: #b8bdb1;
  --muted: #72776d;
  --acid: #c8f135;
  --acid-dark: #718b00;
  --blue: #3157ff;
  --coral: #ff6b4a;
  --success: #197a50;
  --danger: #bb3427;
  --sidebar-width: 218px;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; letter-spacing: 0; }
button, input, select, textarea { color: inherit; font: inherit; letter-spacing: 0; }
button { border: 0; }
button, label[for], summary, select { cursor: pointer; }
img, video { display: block; max-width: 100%; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; }

.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 22px 16px 16px; color: #f7f8f3; background: var(--ink); border-right: 1px solid #2d302a; }
.brand-block { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 4px; }
.brand-block > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brand-block strong { font-size: 15px; white-space: nowrap; }
.brand-block small { color: #8f9589; font-size: 10px; }
.brand-mark { width: 31px; height: 31px; flex: 0 0 31px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 7px 6px; border: 1px solid #41463b; border-radius: 6px; }
.brand-mark span { display: block; background: var(--acid); }
.brand-mark span:nth-child(1) { height: 9px; }
.brand-mark span:nth-child(2) { height: 16px; background: var(--blue); }
.brand-mark span:nth-child(3) { height: 12px; background: var(--coral); }

.new-task-button { width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 20px; border-radius: 6px; color: var(--ink); background: var(--acid); font-weight: 800; }
.new-task-button:hover { background: #d8ff4d; }
.new-task-button svg { width: 17px; }
.side-nav { display: grid; gap: 4px; }
.side-nav button { position: relative; width: 100%; height: 40px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 0 11px; border-radius: 6px; color: #9ba095; background: transparent; text-align: left; }
.side-nav button:hover { color: #fff; background: #20231d; }
.side-nav button.active { color: #fff; background: #2a2d26; }
.side-nav button.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 18px; background: var(--acid); }
.side-nav button b { min-width: 20px; padding: 2px 5px; border-radius: 8px; color: #9da394; background: #34382f; font-size: 9px; text-align: center; }
.side-nav svg { width: 16px; }
.sidebar-foot { margin-top: auto; border-top: 1px solid #2d302a; padding-top: 13px; }
.quota-line { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px 11px; color: #8f9589; font-size: 10px; }
.quota-line strong { color: #d5d9ce; }
.login-side { width: 100%; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px; color: #e9ece4; background: #262922; }
.login-side svg { width: 15px; }
.user-row { display: grid; grid-template-columns: 32px minmax(0,1fr) 30px; align-items: center; gap: 9px; }
.user-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #34382f; }
.user-row > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-row strong { overflow: hidden; color: #f2f4ed; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-row small { color: #848a7e; font-size: 9px; }
.user-row button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; color: #858b80; background: transparent; }
.user-row button:hover { color: #fff; background: #2a2d26; }
.user-row svg { width: 14px; }

.main-area { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 20; top: 0; height: 66px; display: flex; align-items: center; gap: 18px; padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(243,244,239,.96); backdrop-filter: blur(12px); }
.workflow-tabs { min-width: 0; display: flex; align-self: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.workflow-tabs::-webkit-scrollbar { display: none; }
.workflow-tabs button { position: relative; min-width: max-content; display: flex; align-items: center; gap: 7px; padding: 0 13px; color: #7b8075; background: transparent; font-size: 12px; }
.workflow-tabs button:hover { color: var(--ink); }
.workflow-tabs button.active { color: var(--ink); font-weight: 800; }
.workflow-tabs button.active::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 3px; background: var(--blue); }
.workflow-tabs svg { width: 15px; }
.top-status { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 10px; }
.top-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(25,122,80,.12); }
.mobile-menu { display: none; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 6px; color: var(--ink); background: var(--surface); }

.view { padding: 24px 26px 34px; }
.workbench-grid { display: grid; grid-template-columns: minmax(330px, 390px) minmax(520px, 1fr); min-height: calc(100vh - 172px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.composer-panel { padding: 24px; border-right: 1px solid var(--line); background: #fafbf7; }
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.panel-title span, .section-bar span, .view-heading span { display: block; margin-bottom: 4px; color: var(--blue); font-size: 9px; font-weight: 900; }
.panel-title h1 { margin: 0; font-size: 20px; line-height: 1.3; }
.icon-button { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface); }
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-button svg { width: 15px; }
.field-block { margin-top: 20px; }
.field-block:first-child { margin-top: 0; }
.field-label { min-height: 24px; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.field-label > span { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--ink); font-size: 9px; font-weight: 900; }
.field-label strong { font-size: 12px; }
.field-label small { margin-left: auto; color: var(--muted); font-size: 9px; }

.dropzone { position: relative; min-height: 190px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 7px; background: var(--surface); overflow: hidden; }
.dropzone:hover, .dropzone.dragover { border-color: var(--blue); background: #f6f8ff; }
.dropzone input, .compact-dropzone input, .video-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-empty { display: flex; align-items: center; flex-direction: column; gap: 7px; color: var(--muted); text-align: center; }
.drop-empty svg { width: 28px; height: 28px; margin-bottom: 2px; color: var(--blue); }
.drop-empty strong { color: var(--ink-2); font-size: 12px; }
.drop-empty small { font-size: 9px; }
.preview-grid { display: none; width: 100%; min-height: 190px; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 90px; gap: 5px; padding: 6px; }
.dropzone.has-files .preview-grid { display: grid; }
.dropzone.has-files .drop-empty { display: none; }
.preview-item { position: relative; min-width: 0; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.preview-item:first-child:nth-last-child(1) { grid-column: 1 / -1; grid-row: span 2; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: rgba(17,19,15,.78); }
.preview-item button svg { width: 12px; }

.segmented { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.segmented button { min-height: 36px; border-radius: 5px; color: var(--muted); background: transparent; font-size: 10px; }
.segmented button.active { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(17,19,15,.08); font-weight: 800; }
textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--surface); }
textarea { min-height: 76px; resize: vertical; padding: 11px 12px; line-height: 1.65; font-size: 11px; }
select { height: 38px; padding: 0 32px 0 10px; font-size: 10px; }
textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,87,255,.08); }
textarea::placeholder { color: #a3a89d; }
.strategy-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.strategy-options label { position: relative; min-width: 0; min-height: 64px; display: flex; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.strategy-options label.selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.strategy-options input { position: absolute; opacity: 0; }
.strategy-options span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.strategy-options b { font-size: 11px; }
.strategy-options small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.strategy-options em { position: absolute; top: 7px; right: 7px; color: var(--blue); font-size: 7px; font-style: normal; font-weight: 900; }
.advanced-models { margin-top: 8px; border-top: 1px solid var(--line); }
.advanced-models summary { padding: 10px 0 2px; color: var(--muted); font-size: 9px; }
.advanced-models[open] summary { color: var(--ink); }
.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.two-fields label { min-width: 0; }
.two-fields label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; }

.compact-dropzone, .video-dropzone { position: relative; min-height: 116px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 7px; background: var(--surface); overflow: hidden; }
#creativeUploadEmpty { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
#creativeUploadEmpty svg { color: var(--blue); }
.creative-previews { display: none; width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; padding: 5px; }
.compact-dropzone.has-files #creativeUploadEmpty { display: none; }
.compact-dropzone.has-files .creative-previews { display: grid; }
.creative-previews img { width: 100%; height: 106px; border-radius: 5px; object-fit: cover; }
#videoUploadEmpty { display: flex; align-items: center; flex-direction: column; gap: 6px; color: var(--muted); }
#videoUploadEmpty svg { color: var(--coral); }
#videoUploadEmpty strong { color: var(--ink); font-size: 11px; }
#videoUploadEmpty small { font-size: 8px; }
.video-dropzone video { width: 100%; max-height: 230px; background: #000; }
.frame-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 4px; margin-top: 6px; }
.frame-strip img { width: 100%; height: 46px; border-radius: 4px; object-fit: cover; border: 1px solid var(--line); }
.primary-action { width: 100%; min-height: 45px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; margin-top: 22px; padding: 0 15px; border-radius: 6px; color: var(--ink); background: var(--acid); font-weight: 900; }
.primary-action:hover { background: #d9ff50; }
.primary-action:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.55); }
.primary-action svg { width: 16px; }
.primary-action b { font-size: 17px; }

.result-panel { min-width: 0; min-height: 680px; background: var(--surface); }
.empty-result, .pending-result { min-height: 680px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 38px; text-align: center; }
.empty-visual { position: relative; width: 132px; height: 102px; display: grid; place-items: center; margin-bottom: 25px; border: 1px solid var(--line); background: #f8f9f5; }
.empty-visual b { width: 55px; height: 55px; display: grid; place-items: center; color: #fff; background: var(--ink); font-size: 13px; }
.empty-visual span { position: absolute; width: 24px; height: 24px; }
.empty-visual span:nth-child(1) { top: -8px; left: -8px; background: var(--acid); }
.empty-visual span:nth-child(2) { right: -8px; bottom: 13px; background: var(--blue); }
.empty-visual span:nth-child(3) { right: 25px; top: -8px; background: var(--coral); }
.empty-result h2 { margin: 0; font-size: 18px; }
.empty-result p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.pending-head { display: flex; align-items: center; gap: 14px; text-align: left; }
.pending-head small { color: var(--blue); font-size: 9px; font-weight: 900; }
.pending-head h2 { margin: 4px 0 0; font-size: 18px; }
.loading-mark { width: 38px; height: 38px; border: 3px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { width: min(560px, 100%); height: 5px; margin: 28px 0 18px; overflow: hidden; background: var(--surface-2); }
.progress-track span { display: block; width: 36%; height: 100%; background: var(--blue); animation: progress 2.8s ease-in-out infinite; }
@keyframes progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.pending-stages { width: min(560px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.pending-stages span { padding: 7px 4px; color: #999e94; border-top: 2px solid var(--line); font-size: 9px; }
.pending-stages span.active { color: var(--ink); border-color: var(--acid-dark); font-weight: 800; }
.pending-sources { width: min(500px, 100%); display: flex; justify-content: center; gap: 5px; margin-top: 26px; overflow: hidden; }
.pending-sources img { width: 78px; height: 78px; border-radius: 5px; object-fit: cover; }
.job-code { margin-top: 18px; color: #9a9f95; font-size: 8px; }
.result-content { min-height: 680px; padding: 24px 28px 32px; }
.result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.result-heading { min-width: 0; }
.result-heading > span { display: block; color: var(--blue); font-size: 9px; font-weight: 900; }
.result-heading h2 { margin: 5px 0 7px; font-size: 23px; line-height: 1.25; }
.result-heading p { max-width: 760px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.result-metrics { flex: 0 0 auto; display: flex; gap: 7px; }
.metric { min-width: 72px; padding: 8px 10px; border-left: 3px solid var(--acid); background: var(--surface-2); }
.metric.blue { border-color: var(--blue); }
.metric span { display: block; color: var(--muted); font-size: 8px; }
.metric strong { display: block; margin-top: 2px; font-size: 17px; }
.result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 51px; border-bottom: 1px solid var(--line); }
.result-tabs { align-self: stretch; display: flex; gap: 20px; }
.result-tabs button { position: relative; padding: 0 2px; color: var(--muted); background: transparent; font-size: 10px; }
.result-tabs button.active { color: var(--ink); font-weight: 900; }
.result-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--blue); }
.result-actions { display: flex; gap: 6px; }
.result-actions button, .section-bar button, .view-heading button { min-height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-2); background: var(--surface); font-size: 9px; }
.result-actions button:hover, .section-bar button:hover, .view-heading button:hover { border-color: var(--line-strong); }
.result-actions button.primary-small { border-color: var(--ink); color: #fff; background: var(--ink); }
.result-actions svg, .section-bar button svg, .view-heading button svg { width: 13px; }
.result-view { padding-top: 20px; }
.result-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.fact-block { min-height: 112px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 6px; }
.fact-block.accent { border-top: 3px solid var(--acid-dark); }
.fact-block h3, .prompt-section h3, .video-style-block h3 { margin: 0 0 8px; font-size: 11px; }
.fact-block p, .prompt-section p, .video-style-block p { margin: 0; color: #555b51; font-size: 10px; line-height: 1.7; }
.fact-block ul { margin: 0; padding-left: 15px; color: #555b51; font-size: 10px; line-height: 1.7; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 24px 0 10px; }
.section-heading h3 { margin: 0; font-size: 14px; }
.section-heading span { color: var(--muted); font-size: 9px; }
.dimension-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.dimension-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcf9; }
.dimension-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dimension-card header strong { font-size: 10px; }
.dimension-card header span { color: var(--blue); font-size: 9px; font-weight: 900; }
.dimension-card p { margin: 8px 0 6px; color: #42473f; font-size: 10px; line-height: 1.65; }
.dimension-card small { display: block; color: #8a9085; font-size: 8px; line-height: 1.55; }
.quality-banner { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; padding: 13px; border: 1px solid var(--line); border-left: 4px solid var(--success); }
.quality-score { text-align: center; }
.quality-score strong { display: block; font-size: 24px; }
.quality-score span { color: var(--muted); font-size: 8px; }
.quality-banner p { margin: 0; color: #555b51; font-size: 9px; line-height: 1.6; }
.model-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.model-chain span { padding: 4px 7px; border-radius: 4px; color: #454a42; background: var(--surface-2); font-size: 8px; }
.model-chain i { color: #9ba096; font-size: 10px; font-style: normal; }
.prompt-section { position: relative; padding: 16px 0; border-bottom: 1px solid var(--line); }
.prompt-section:first-child { padding-top: 0; }
.prompt-section:last-child { border-bottom: 0; }
.prompt-section textarea { min-height: 180px; margin-top: 10px; background: #fafbf7; }
.prompt-section button { position: absolute; top: 13px; right: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; color: var(--muted); background: var(--surface-2); }
.prompt-section:first-child button { top: -3px; }
.prompt-section button svg { width: 13px; }
.prompt-components { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.prompt-component { padding: 10px 11px; border-left: 3px solid var(--line-strong); background: #f7f8f4; }
.prompt-component:nth-child(3n+1) { border-color: var(--blue); }
.prompt-component:nth-child(3n+2) { border-color: var(--acid-dark); }
.prompt-component:nth-child(3n+3) { border-color: var(--coral); }
.prompt-component strong { display: block; margin-bottom: 5px; font-size: 9px; }
.prompt-component p { color: #5d6358; font-size: 9px; }
.code-block { max-height: 620px; margin: 0; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; color: #e9ecdf; background: var(--ink); font: 10px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.generation-output { display: grid; place-items: center; min-height: 520px; background: #11130f; }
.generation-output img, .generation-output video { width: 100%; max-height: 640px; object-fit: contain; }
.generation-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 15px; }
.generation-meta p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.storyboard-list { display: grid; gap: 8px; }
.shot-card { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; }
.shot-index { color: var(--blue); font-size: 18px; font-weight: 900; }
.shot-index small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.shot-body strong { font-size: 10px; }
.shot-body p { margin: 5px 0; color: #555b51; font-size: 9px; line-height: 1.65; }
.shot-body code { display: block; padding: 7px 8px; color: #4e544a; background: var(--surface-2); font: 8px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.video-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.video-style-block { padding: 12px; border-left: 3px solid var(--blue); background: #f7f8f4; }

.recent-section { margin-top: 26px; }
.section-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.section-bar h2 { margin: 0; font-size: 16px; }
.recent-strip { min-height: 118px; display: grid; grid-template-columns: repeat(5, minmax(150px,1fr)); gap: 8px; overflow-x: auto; }
.strip-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 112px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 10px; }
.recent-card { position: relative; min-width: 150px; height: 116px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; text-align: left; }
.recent-card img { width: 100%; height: 100%; object-fit: cover; }
.recent-card .recent-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #dde0d7; background: var(--ink-2); }
.recent-card .recent-fallback svg { width: 26px; }
.recent-card footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 22px 8px 7px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.recent-card footer strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.recent-card footer small { display: block; margin-top: 2px; color: #c8cec3; font-size: 7px; }
.recent-card i { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e3a626; }
.recent-card i.complete { background: var(--acid); }
.recent-card i.failed { background: var(--coral); }

.collection-view { max-width: 1500px; margin: 0 auto; }
.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.view-heading h1 { margin: 0; font-size: 25px; }
.view-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.view-heading > strong { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-size: 10px; }
.project-grid, .style-gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.project-card, .style-card { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.project-cover, .style-cover { position: relative; aspect-ratio: 4 / 3; background: #dfe2da; overflow: hidden; }
.project-cover img, .project-cover video, .style-cover > img { width: 100%; height: 100%; object-fit: cover; }
.cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #5f655b; background: var(--surface-2); }
.cover-fallback svg { width: 34px; height: 34px; }
.project-status, .asset-badge { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 4px; color: #fff; background: rgba(17,19,15,.82); font-size: 8px; }
.project-card-body, .style-card-body { padding: 12px; }
.project-card-body h3, .style-card-body h3 { margin: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-card-body p, .style-card-body p { min-height: 35px; margin: 7px 0 10px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.project-meta, .style-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.project-meta span, .style-card-meta span { padding: 3px 5px; border-radius: 4px; color: #666c62; background: var(--surface-2); font-size: 7px; }
.style-thumbs { position: absolute; right: 6px; bottom: 6px; left: 6px; display: flex; gap: 3px; }
.style-thumbs img { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 4px; object-fit: cover; }
.style-card-actions { display: flex; gap: 6px; margin-top: 11px; }
.style-card-actions button, .add-example { min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-size: 8px; }
.style-card-actions .add-example { flex: 1; position: relative; }
.add-example input { position: absolute; opacity: 0; pointer-events: none; }
.style-card-actions .delete-style { color: var(--danger); }
.library-empty, .project-empty { grid-column: 1 / -1; min-height: 280px; display: grid; place-items: center; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 10px; }
.model-workflow-note { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 14px; border-left: 4px solid var(--acid-dark); background: var(--surface); }
.model-workflow-note svg { color: var(--blue); }
.model-workflow-note > div { display: flex; flex-direction: column; gap: 3px; }
.model-workflow-note strong { font-size: 11px; }
.model-workflow-note span { color: var(--muted); font-size: 9px; }
.model-groups { display: grid; gap: 18px; }
.model-group h2 { margin: 0 0 9px; font-size: 14px; }
.model-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.model-card { min-height: 128px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.model-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.model-card header strong { font-size: 11px; }
.model-card header span { padding: 3px 5px; border-radius: 4px; color: var(--success); background: #e8f4ed; font-size: 7px; }
.model-card header span.internal { color: var(--muted); background: var(--surface-2); }
.model-card small { display: block; margin-top: 3px; color: var(--blue); font-size: 8px; }
.model-card p { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 920px; }
th, td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; }
th { color: var(--muted); background: #f7f8f4; font-weight: 800; }
td strong, td span { display: block; }
td span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.role { display: inline-block; padding: 3px 5px; border-radius: 4px; background: var(--surface-2); font-size: 8px; }
.role.admin { color: #fff; background: var(--ink); }
.role.whitelist { color: var(--success); background: #e7f4ec; }
.admin-controls-inner { display: flex; gap: 4px; }
.admin-controls-inner button { min-height: 27px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 8px; }

.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17,19,15,.62); }
.login-modal { position: relative; width: min(370px, 100%); padding: 34px; border-radius: 8px; background: var(--surface); text-align: center; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 5px; color: var(--muted); background: var(--surface-2); }
.modal-mark { height: 34px; display: flex; align-items: end; justify-content: center; gap: 4px; margin-bottom: 17px; }
.modal-mark span { width: 8px; background: var(--ink); }
.modal-mark span:nth-child(1) { height: 18px; background: var(--acid-dark); }
.modal-mark span:nth-child(2) { height: 31px; background: var(--blue); }
.modal-mark span:nth-child(3) { height: 23px; background: var(--coral); }
.login-modal h2 { margin: 0; font-size: 20px; }
.login-modal p { margin: 8px 0 22px; color: var(--muted); font-size: 10px; }
.google-button { width: 100%; height: 43px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font-weight: 800; }
.google-button b { color: var(--blue); font-size: 16px; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 44px)); padding: 11px 14px; border-radius: 6px; color: #fff; background: var(--ink); box-shadow: 0 12px 35px rgba(17,19,15,.22); font-size: 10px; }

@media (max-width: 1180px) {
  :root { --sidebar-width: 190px; }
  .sidebar { padding-inline: 12px; }
  .workbench-grid { grid-template-columns: 350px minmax(460px,1fr); }
  .project-grid, .style-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 940px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 18px 0 45px rgba(17,19,15,.2); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { padding-inline: 14px; }
  .top-status { display: none; }
  .view { padding: 16px; }
  .workbench-grid { grid-template-columns: 330px minmax(420px,1fr); overflow-x: auto; }
  .result-content { padding-inline: 22px; }
  .model-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .topbar { height: auto; min-height: 60px; align-items: center; }
  .workflow-tabs { padding-right: 14px; }
  .workflow-tabs button { min-height: 60px; padding-inline: 10px; }
  .workflow-tabs button span { display: none; }
  .workflow-tabs button.active span { display: inline; }
  .workbench-grid { display: block; min-height: 0; overflow: visible; }
  .composer-panel { padding: 19px; border-right: 0; border-bottom: 1px solid var(--line); }
  .result-panel, .empty-result, .pending-result { min-height: 520px; }
  .result-content { min-height: 520px; padding: 19px; }
  .result-header { flex-direction: column; }
  .result-metrics { width: 100%; }
  .metric { flex: 1; }
  .result-toolbar { align-items: flex-start; flex-direction: column; padding: 8px 0; }
  .result-tabs { min-height: 34px; align-self: stretch; overflow-x: auto; }
  .result-tabs button { min-width: max-content; }
  .result-actions { align-self: stretch; }
  .result-actions button { flex: 1; justify-content: center; }
  .result-summary-grid, .dimension-grid, .prompt-components, .video-style-grid { grid-template-columns: 1fr; }
  .pending-stages { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recent-strip { grid-template-columns: repeat(5, 164px); }
  .project-grid, .style-gallery, .model-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view-heading { align-items: flex-start; }
}

@media (max-width: 500px) {
  .view { padding: 10px; }
  .topbar { padding-inline: 9px; }
  .composer-panel { padding: 16px; }
  .strategy-options { grid-template-columns: 1fr; }
  .strategy-options label { min-height: 53px; }
  .two-fields { grid-template-columns: 1fr; }
  .frame-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .result-content { padding: 16px; }
  .result-heading h2 { font-size: 20px; }
  .result-metrics { flex-wrap: wrap; }
  .result-tabs { gap: 14px; }
  .result-actions { flex-wrap: wrap; }
  .project-grid, .style-gallery, .model-card-grid { grid-template-columns: 1fr; }
  .view-heading { flex-direction: column; }
  .login-modal { padding: 30px 22px 24px; }
}

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

/* 2026-07-16 — restore the original deep-space Style Distiller language */
:root {
  --ink: #f2f0fb;
  --ink-2: #d6d8e5;
  --paper: #070912;
  --surface: #0d111b;
  --surface-2: #121725;
  --line: #242a3a;
  --line-strong: #343b52;
  --muted: #8992a6;
  --acid: #a98cff;
  --acid-dark: #7658db;
  --blue: #a98cff;
  --coral: #f2778a;
  --success: #4ee0b0;
  --danger: #f2778a;
  --radius: 16px;
}

html, body { background: var(--paper); color: var(--ink); }
body { background-image: radial-gradient(circle at 14% 0%, rgba(117,88,219,.12), transparent 25%), radial-gradient(circle at 92% 12%, rgba(49,205,163,.045), transparent 25%); }
button, input, select, textarea { color: var(--ink); }
::selection { color: #0a0712; background: #b59cff; }

.sidebar { background: rgba(7,9,18,.98); border-right-color: #1d2230; }
.brand-block strong { color: #f5f1ff; }
.brand-block small, .user-row small { color: #727b91; }
.brand-mark { border-color: #4a3b7a; border-radius: 10px; background: rgba(139,108,235,.09); }
.brand-mark span { background: #9b7cff; }
.brand-mark span:nth-child(2) { background: #5bdbb2; }
.brand-mark span:nth-child(3) { background: #d8c9ff; }
.new-task-button { color: #110c1d; background: linear-gradient(135deg, #b89fff, #8b6eea); box-shadow: 0 12px 32px rgba(117,88,219,.24); }
.new-task-button:hover { background: linear-gradient(135deg, #c4b0ff, #987af0); }
.side-nav button { color: #778095; border-radius: 10px; }
.side-nav button:hover { color: #eee9ff; background: #111623; }
.side-nav button.active { color: #eee9ff; background: rgba(151,119,240,.13); }
.side-nav button.active::before { background: #a98cff; box-shadow: 0 0 14px rgba(169,140,255,.6); }
.side-nav button b { color: #868fa3; background: #161c29; }
.sidebar-foot { border-color: #1d2230; }
.login-side { color: #dcd6f7; background: #131824; border: 1px solid #252b3b; }
.user-row img { background: #29203f; }
.user-row button:hover { background: #191f2d; }

.main-area { background: transparent; }
.topbar { border-color: var(--line); background: rgba(7,9,18,.9); backdrop-filter: blur(18px); }
.workflow-tabs button { color: #747d90; }
.workflow-tabs button:hover, .workflow-tabs button.active { color: #f0ebff; }
.workflow-tabs button.active::after { background: linear-gradient(90deg, #a98cff, #66dfbc); box-shadow: 0 0 12px rgba(169,140,255,.48); }
.top-status span { background: var(--success); box-shadow: 0 0 0 3px rgba(78,224,176,.1), 0 0 12px rgba(78,224,176,.42); }
.mobile-menu { color: #ddd8ee; background: #111622; }

.workbench-grid { border-color: var(--line); background: rgba(11,14,23,.88); box-shadow: 0 26px 80px rgba(0,0,0,.26); }
.composer-panel { border-color: var(--line); background: linear-gradient(180deg, rgba(14,18,29,.98), rgba(10,13,22,.98)); }
.panel-title span, .section-bar span, .view-heading span { color: #a98cff; letter-spacing: .13em; }
.icon-button, .section-bar button, .view-heading button { color: #8992a6; border-color: var(--line); background: #101521; }
.field-label span { color: #ded7ff; background: #2b2144; }
.field-label small { color: #727c90; }
.dropzone, .compact-dropzone, .video-dropzone { border-color: #333b50; background: rgba(7,10,17,.72); }
.dropzone:hover, .dropzone.dragover, .compact-dropzone:hover, .video-dropzone:hover { border-color: #8e72e7; background: rgba(139,108,235,.07); }
.drop-empty, .compact-dropzone, .video-dropzone { color: #b6bdd0; }
.drop-empty svg, .compact-dropzone svg, .video-dropzone svg { color: #a98cff; }
.preview-item, .creative-preview { border-color: #3b4358; background: #090c14; }
.segmented { background: #101521; border-color: #242b3a; }
.segmented button { color: #788195; }
.segmented button.active { color: #e9e4fa; background: #29213e; box-shadow: inset 0 0 0 1px rgba(169,140,255,.2); }
textarea, select, input[type="text"] { color: #e9e7f0; border-color: #2c3345; background: #090d16; }
textarea::placeholder, input::placeholder { color: #5f687a; }
textarea:focus, select:focus, input:focus { border-color: #8065d9; outline: none; box-shadow: 0 0 0 3px rgba(139,108,235,.08); }
.strategy-options label { border-color: #293043; background: #0b0f19; }
.strategy-options label:hover, .strategy-options label.selected { border-color: #8669e5; background: rgba(139,108,235,.1); }
.strategy-options label em { color: #b9a5fb; }
.advanced-models { border-color: var(--line); }
.primary-action { color: #120c20; background: linear-gradient(135deg, #b49bff, #8467e3); box-shadow: 0 14px 34px rgba(115,86,210,.2); }
.primary-action:disabled { color: #626a79; background: #1c2130; box-shadow: none; }

.result-panel { background: radial-gradient(circle at 55% 26%, rgba(118,86,219,.08), transparent 27%), #0a0e18; }
.empty-result p, .pending-result p { color: #7e879a; }
.empty-visual span { border-color: rgba(169,140,255,.22); }
.empty-visual { border-color: rgba(169,140,255,.23); background: rgba(15,19,31,.72); }
.empty-visual b { color: #c9b9ff; background: linear-gradient(145deg, #2c2248, #171327); box-shadow: 0 12px 42px rgba(76,52,145,.3); }
.pending-stages span { color: #687185; border-color: #252c3d; background: #0d121d; }
.pending-stages span.active { color: #c8baff; border-color: rgba(169,140,255,.38); background: rgba(169,140,255,.08); }
.progress-track { background: #1a2030; }
.progress-track span { background: linear-gradient(90deg, #8e70eb, #63dfba); }
.result-content { color: #dfe1eb; }
.fact-block p, .fact-block ul, .dimension-card p, .quality-banner p, .shot-body p, .video-style-block p { color: #9aa3b4; }
.dimension-card small { color: #70798b; }
.prompt-component { color: #d8d9e3; background: #111725; }
.prompt-component p, .shot-body code { color: #929bad; }
.shot-body code { background: #111725; }
.model-chain span { color: #aeb5c4; background: #151b28; }
.code-block { color: #dcd9e8; background: #080b12; }
.result-toolbar, .result-tabs, .result-summary-grid article, .dimension-card, .prompt-section, .video-style-block, .shot-card { border-color: var(--line); background: rgba(15,19,30,.84); }
.result-tabs button { color: #7f889b; }
.result-tabs button.active { color: #cbbcff; border-color: #9b7cff; }
.result-actions button, .prompt-section button { color: #c5badf; border-color: #34304a; background: rgba(139,108,235,.08); }
.metric { border-color: var(--line); background: #101522; }
.metric strong { color: #c7b7ff; }
.prompt-section textarea { background: #080c14; }

.recent-section { border-color: var(--line); }
.recent-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #0d121d; }
.recent-card-open { width: 100%; min-width: 0; height: 100%; display: block; padding: 0; color: inherit; background: transparent; text-align: left; }
.recent-card-open > img, .recent-card-open > .recent-fallback { width: 100%; height: 92px; object-fit: cover; }
.recent-card-open footer { padding: 10px 34px 10px 10px; }
.recent-card-open footer strong { display: block; overflow: hidden; color: #e6e3ef; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recent-card-open footer small { display: block; overflow: hidden; margin-top: 3px; color: #70798d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.recent-card-open > i { position: absolute; top: 7px; left: 7px; width: 7px; height: 7px; border-radius: 50%; }
.recent-card .delete-job { position: absolute; z-index: 3; right: 7px; bottom: 7px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: #7f8797; border: 1px solid #2d3444; border-radius: 8px; background: rgba(8,11,18,.86); opacity: 0; transition: .18s ease; }
.recent-card:hover .delete-job, .recent-card:focus-within .delete-job { opacity: 1; }
.recent-card .delete-job:hover { color: #f6a0af; border-color: rgba(242,119,138,.42); background: rgba(112,38,52,.24); }
.recent-card .delete-job svg { width: 13px; }

.collection-view { color: #e5e2ee; }
.view-heading > strong { border-color: var(--line); background: #101521; }
.project-card, .style-card, .model-card { border-color: var(--line); background: #0d121d; }
.project-cover, .style-cover { background: #090d15; }
.cover-fallback { color: #6f788b; background: #111725; }
.project-status, .asset-badge { background: rgba(8,11,18,.84); backdrop-filter: blur(8px); }
.project-card-body p, .style-card-body p, .model-card p { color: #7f889b; }
.project-meta span, .style-card-meta span { color: #8992a4; background: #151b28; }
.project-actions { display: flex; gap: 7px; margin-top: 11px; }
.project-actions button { min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; color: #aeb5c5; border: 1px solid #293143; border-radius: 8px; background: #111724; font-size: 8px; }
.project-actions button:first-child { flex: 1; }
.project-actions button:hover { color: #d9d1f8; border-color: #5d4b93; }
.project-actions .delete-job { color: #ba7c87; }
.project-actions .delete-job:hover { color: #f4a0af; border-color: rgba(242,119,138,.42); background: rgba(112,38,52,.18); }
.project-actions svg { width: 13px; }
.style-card-actions button, .add-example, .admin-controls-inner button { color: #aeb5c5; border-color: var(--line); background: #111724; }
.model-workflow-note { border-color: #9476ee; background: #0f1420; }
.model-card header span { color: #63ddb7; background: rgba(78,224,176,.08); }
.model-card header span.internal { color: #8b93a3; background: #151b28; }
.admin-table-wrap, .login-modal { border: 1px solid var(--line); background: #0d121d; }
th { color: #80899b; background: #111724; }
th, td { border-color: var(--line); }
.role { background: #171d2b; }
.role.admin { color: #cbbdff; background: rgba(139,108,235,.13); }
.role.whitelist { color: #72dfbd; background: rgba(78,224,176,.08); }
.modal-backdrop { background: rgba(2,4,9,.78); backdrop-filter: blur(12px); }
.google-button { color: #e6e2ef; border-color: #333b4e; background: #111724; }
.toast { color: #181121; background: #eeeaf7; box-shadow: 0 18px 50px rgba(0,0,0,.34); }

/* Full public home, based on the project's previous technology-forward release. */
.home-active .sidebar, .home-active .topbar { display: none; }
.home-active .main-area { margin-left: 0; }
.home-view { min-height: 100vh; max-width: 1580px; margin: 0 auto; padding: 0 clamp(20px,4vw,64px) 54px; }
.home-header { height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.home-brand { display: flex; align-items: center; gap: 13px; }
.home-brand-mark { width: 43px; height: 43px; display: grid; place-items: center; color: #bba8ff; border: 1px solid #53417f; border-radius: 14px; background: linear-gradient(145deg, rgba(169,140,255,.16), rgba(15,18,29,.8)); font-weight: 900; }
.home-brand > div { display: flex; flex-direction: column; gap: 3px; }
.home-brand small, .home-eyebrow, .home-section-heading span { color: #9f82f5; font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.home-brand strong { color: #f5f2ff; font-size: 17px; }
.home-header nav { display: flex; gap: 4px; padding: 5px; border: 1px solid #202638; border-radius: 13px; background: rgba(13,17,27,.74); }
.home-header nav button { min-height: 34px; padding: 0 13px; color: #858da0; border-radius: 9px; background: transparent; font-size: 10px; }
.home-header nav button:hover { color: #ddd7f4; background: rgba(169,140,255,.08); }
.home-login, .home-account { justify-self: end; min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 13px; color: #c9c3dc; border: 1px solid #2b3244; border-radius: 11px; background: #101521; font-size: 10px; }
.home-account img { width: 25px; height: 25px; object-fit: cover; border-radius: 8px; }

.home-hero { min-height: 590px; position: relative; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(410px,.94fr); align-items: center; gap: 56px; overflow: hidden; padding: 64px clamp(30px,5vw,78px); border: 1px solid #252b3c; border-radius: 28px; background: linear-gradient(135deg, rgba(17,21,34,.98), rgba(8,11,18,.98)); box-shadow: 0 35px 120px rgba(0,0,0,.34); }
.home-hero::before { content: ""; position: absolute; inset: -20% 46% 28% -10%; background: radial-gradient(circle, rgba(126,92,225,.22), transparent 67%); pointer-events: none; }
.home-copy { position: relative; z-index: 3; }
.home-copy h1 { max-width: 760px; margin: 16px 0 21px; font-size: clamp(42px,4.6vw,72px); line-height: 1.08; letter-spacing: -.055em; }
.home-copy > p { max-width: 670px; margin: 0; color: #959eb1; font-size: 14px; line-height: 1.95; }
.home-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.home-primary, .home-secondary { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 30px; padding: 0 18px; border-radius: 12px; font-size: 11px; font-weight: 800; transition: transform .2s ease, border-color .2s ease; }
.home-primary { color: #130d21; background: linear-gradient(135deg, #b89fff, #8567e3); box-shadow: 0 12px 34px rgba(117,88,219,.25); }
.home-secondary { color: #c6c9d5; border: 1px solid #343b4d; background: rgba(255,255,255,.025); }
.home-primary:hover, .home-secondary:hover { transform: translateY(-2px); }
.home-capabilities { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 27px; }
.home-capabilities span { padding: 7px 10px; color: #778195; border: 1px solid #252c3c; border-radius: 99px; background: rgba(255,255,255,.015); font-size: 9px; }
.home-visual { width: min(100%,540px); aspect-ratio: 1; position: relative; display: grid; place-items: center; justify-self: end; }
.home-visual::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle, rgba(169,140,255,.12), transparent 63%); filter: blur(5px); }
.dna-core { width: 138px; height: 138px; z-index: 5; display: grid; place-content: center; text-align: center; border: 1px solid rgba(169,140,255,.42); border-radius: 42px; background: linear-gradient(145deg, rgba(169,140,255,.22), rgba(13,16,26,.95)); box-shadow: inset 0 0 42px rgba(169,140,255,.08), 0 24px 68px rgba(0,0,0,.36); transform: rotate(-6deg); }
.dna-core span { color: #8e80c5; font-size: 9px; letter-spacing: .23em; }
.dna-core strong { margin-top: 5px; color: #e0d8ff; font-size: 31px; letter-spacing: .06em; }
.dna-orbit { position: absolute; border: 1px solid rgba(169,140,255,.2); border-radius: 50%; animation: dnaOrbit 22s linear infinite; }
.orbit-one { width: 73%; height: 43%; transform: rotate(23deg); }
.orbit-two { width: 43%; height: 79%; transform: rotate(-32deg); animation-direction: reverse; animation-duration: 17s; }
@keyframes dnaOrbit { to { rotate: 360deg; } }
.dna-node { min-width: 112px; position: absolute; z-index: 4; display: grid; grid-template-columns: 24px 1fr; gap: 1px 9px; align-items: center; padding: 11px; border: 1px solid #283043; border-radius: 13px; background: rgba(12,16,25,.88); box-shadow: 0 14px 35px rgba(0,0,0,.26); backdrop-filter: blur(12px); }
.dna-node svg { grid-row: 1 / 3; width: 19px; color: #9c83ed; }
.dna-node span { color: #687286; font-size: 7px; letter-spacing: .15em; }
.dna-node b { color: #d8d9e1; font-size: 10px; }
.node-color { left: 0; top: 20%; } .node-light { right: 0; top: 25%; } .node-texture { left: 8%; bottom: 16%; } .node-space { right: 4%; bottom: 10%; }

.home-process { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 18px; padding: 25px 30px; border: 1px solid var(--line); border-radius: 20px; background: rgba(13,17,27,.82); }
.home-process > svg { color: #4f586a; }
.home-process article { display: flex; align-items: flex-start; gap: 14px; }
.home-process article > b { color: #a98cff; font-size: 10px; letter-spacing: .14em; }
.home-process h2 { margin: 0 0 6px; font-size: 12px; }
.home-process p { margin: 0; color: #7d8698; font-size: 9px; line-height: 1.65; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 45px 4px 17px; }
.home-section-heading h2 { margin: 7px 0 0; font-size: 25px; }
.home-section-heading p { margin: 0; color: #747e91; font-size: 10px; }
.home-examples { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.home-examples-loading { grid-column: 1 / -1; min-height: 230px; display: grid; place-items: center; color: #70798d; border: 1px dashed #30384c; border-radius: 18px; background: rgba(13,17,27,.48); font-size: 11px; }
.home-example-card { min-height: 330px; position: relative; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #0b0f18; text-align: left; }
.home-example-card > img, .home-example-fallback { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.home-example-fallback { display: grid; place-items: center; color: #6e5ca2; background: radial-gradient(circle, #211a35, #0b0f18 70%); }
.home-example-fallback svg { width: 54px; height: 54px; }
.home-example-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(5,7,12,.92) 82%, #05070c); }
.home-example-overlay { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.home-example-overlay small { margin-bottom: 7px; color: #ad9aef; font-size: 8px; letter-spacing: .08em; }
.home-example-overlay strong { color: #f0eef6; font-size: 16px; }
.home-example-overlay p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 8px 0 12px; color: #9aa2b1; font-size: 9px; line-height: 1.55; }
.home-example-overlay em { color: #78d8ba; font-size: 8px; font-style: normal; }

@media (max-width: 1080px) {
  .home-header { grid-template-columns: 1fr auto; }
  .home-header nav { display: none; }
  .home-hero { grid-template-columns: 1fr 380px; gap: 28px; padding-inline: 42px; }
  .home-copy h1 { font-size: 48px; }
  .home-examples { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-visual { width: min(100%,460px); justify-self: center; }
  .home-process { grid-template-columns: 1fr; }
  .home-process > svg { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 560px) {
  .home-view { padding-inline: 12px; }
  .home-header { height: 72px; }
  .home-brand > div { display: none; }
  .home-hero { min-height: auto; padding: 38px 22px; border-radius: 21px; }
  .home-copy h1 { font-size: 38px; }
  .home-copy > p { font-size: 12px; }
  .home-actions { flex-direction: column; }
  .home-primary, .home-secondary { width: 100%; }
  .home-visual { margin: -18px 0; transform: scale(.88); }
  .home-section-heading { align-items: flex-start; flex-direction: column; }
  .home-examples { grid-template-columns: 1fr; }
  .recent-card .delete-job { opacity: 1; }
}

/* Huanzhu Image Studio brand system: the workbench and public site share one dark studio surface. */
:root { --ink: #090b14; --ink-2: #101522; --paper: #090b14; --surface: #111624; --surface-2: #171d2d; --line: #273044; --line-strong: #3b4660; --muted: #9aa5b7; --acid: #6a5cff; --acid-dark: #8d7eff; --blue: #4c7dff; --coral: #a36cff; --success: #57c99f; --danger: #fa6d7d; }
html, body { color: #edf1fa; background: #090b14; }
.sidebar { background: #0b0f19; border-color: #222b3b; }
.brand-mark { display: grid; place-items: center; padding: 0; color: #a98bff; border-color: #3b3158; background: #151229; }
.brand-mark svg { width: 18px; }
.new-task-button, .primary-action { color: #fff; background: linear-gradient(100deg, #356fff, #7853ef); }
.new-task-button:hover, .primary-action:hover { background: linear-gradient(100deg, #4c80ff, #8c68ff); }
.side-nav button.active { background: #171d30; }
.side-nav button.active::before { background: #6d7cff; }
.topbar { background: rgba(9,11,20,.9); border-color: #222a3a; }
.topbar, .workflow-tabs button.active, .workflow-tabs button:hover { color: #edf1fa; }
.mobile-menu { color: #edf1fa; background: #151b29; }
.workbench-grid, .composer-panel, .result-panel { background: #101520; border-color: #283145; }
.composer-panel { background: #101520; }
.dropzone, .compact-dropzone, .video-dropzone, textarea, select, .segmented { color: #edf1fa; background: #0d121d; border-color: #303a4f; }
.dropzone:hover, .dropzone.dragover { background: #111b31; border-color: #5d74ef; }
.segmented button.active { color: #fff; background: #20283a; box-shadow: none; }
.strategy-options label { background: #111724; border-color: #2c3549; }
.strategy-options label.selected { border-color: #6d7cff; box-shadow: inset 0 0 0 1px #6d7cff; }
.field-label > span { color: #f4f2ff; background: #342a62; }
.icon-button { color: #b6c0d1; border-color: #303a4e; background: #151b29; }
.empty-result, .pending-result, .result-content { background: #101520; }
.empty-visual { border-color: #313c52; background: #11182a; }
.empty-visual b { background: #362b68; }
.home-view { max-width: 1510px; }
.home-brand strong { color: #f1f3fa; }
.language-switch { min-height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 8px; color: #aab6ca; background: transparent; font-size: 10px; }
.language-switch:hover { color: #fff; }
.language-switch svg { width: 14px; }
.home-account { display: flex; align-items: center; gap: 7px; padding: 0 9px; color: #e8eaf3; }
.home-account svg { width: 13px; }
.home-copy h1 { letter-spacing: 0; }
.home-primary { color: #fff; background: linear-gradient(105deg, #356fff, #7951f3); }
.home-primary:hover { background: linear-gradient(105deg, #4b80ff, #8c66ff); }
.guide-section { display: grid; grid-template-columns: 1.2fr minmax(260px,.8fr) auto; align-items: end; gap: 28px; margin-top: 56px; padding: 40px 0; border-top: 1px solid #252d3b; border-bottom: 1px solid #252d3b; }
.guide-section span { color: #987bf0; font-size: 9px; font-weight: 800; }
.guide-section h2 { max-width: 430px; margin: 8px 0 0; font-size: 28px; line-height: 1.3; }
.guide-section p { margin: 0; color: #939dad; font-size: 12px; line-height: 1.8; }
.guide-section .home-secondary { justify-content: center; min-width: 130px; border: 1px solid #39425a; border-radius: 8px; }
.public-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 28px; padding: 40px 0 8px; color: #a4adbd; }
.public-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 10px; }
.public-footer strong { color: #eff2fb; font-size: 11px; }
.public-footer a { color: #a4adbd; text-decoration: none; }
.public-footer a:hover, .public-footer a.active { color: #8f98ff; }
.footer-brand span { color: #8475bb; }
.account-panel { max-width: 780px; }
.account-card { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #2a3348; border-radius: 8px; background: #111724; }
.account-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #242d40; }
.account-card h2 { margin: 0; font-size: 18px; }.account-card p { margin: 5px 0 0; color: #9aa5b7; font-size: 11px; }
.account-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.account-grid article { padding: 16px; border: 1px solid #2a3348; border-radius: 8px; background: #111724; }.account-grid span { display:block; color:#98a3b6; font-size:10px; }.account-grid strong { display:block; margin-top:7px; font-size:19px; }
.account-actions { display:flex; gap:8px; margin-top:14px; }.account-actions button { min-height:36px; padding:0 12px; color:#d7dce8; border:1px solid #35405a; border-radius:7px; background:#151c2b; font-size:11px; }.account-actions button:last-child { color:#ffabb5; }
.account-empty { min-height: 320px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; border:1px dashed #39435a; border-radius:8px; background:#101520; }.account-empty svg { width:36px; height:36px; color:#8e79e2; }.account-empty h2 { margin:15px 0 6px; font-size:19px; }.account-empty p { margin:0 0 18px; color:#9aa5b7; font-size:11px; }
.legal-copy { max-width: 760px; min-height: 380px; padding: 42px 0; }.legal-copy span { color:#9c82ed; font-size:10px; font-weight:800; }.legal-copy h1 { margin:10px 0 16px; font-size:32px; }.legal-copy p { max-width:680px; color:#a6b0c0; font-size:14px; line-height:1.9; }.legal-copy a { color:#9b8cf7; font-size:12px; }
@media (max-width: 820px) { .guide-section { grid-template-columns:1fr; gap:16px; }.public-footer { grid-template-columns:1fr 1fr; }.public-footer .footer-brand { grid-column:1/-1; }.main-area { margin-left: 0; }.primary-action { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5; }.topbar { padding-inline:14px; } }
@media (max-width: 560px) { .home-header-actions .home-login { display:none; }.language-switch { padding:0 4px; }.home-header { height:70px; }.home-brand small { display:none; }.guide-section h2 { font-size:24px; }.public-footer { grid-template-columns:1fr; }.account-grid { grid-template-columns:1fr; }.account-actions { flex-wrap:wrap; } }

/* 2026-07-16: cinematic home, restrained workbench. */
:root {
  --paper: #080b12;
  --surface: #0d1118;
  --surface-2: #111620;
  --line: #252b35;
  --line-strong: #3a424f;
  --ink: #f1f2f5;
  --ink-2: #d2d5dc;
  --muted: #808896;
  --blue: #8c70df;
  --acid: #8266d5;
  --acid-dark: #6c52b7;
  --success: #4bc697;
  --coral: #8c70df;
  --danger: #ee7b8c;
  --sidebar-width: 180px;
  --radius: 10px;
}
body { background: #080b12; background-image: none; }

/* Quiet application chrome. */
.sidebar { padding: 20px 14px 16px; background: #090c12; border-right-color: #222731; }
.brand-block { gap: 10px; }
.brand-mark { width: 32px; height: 32px; border: 1px solid #343047; border-radius: 9px; background: #15131f; box-shadow: none; }
.brand-mark svg { width: 17px; height: 17px; color: #9a7fe5; }
.brand-block strong { font-size: 13px; }
.brand-block small { color: #6e7683; font-size: 7px; }
.new-task-button { min-height: 40px; margin: 24px 0 18px; color: #e6e0f7; border: 1px solid #3a3155; border-radius: 8px; background: #17131f; box-shadow: none; }
.new-task-button:hover { color: #fff; border-color: #6e58ad; background: #1c1728; }
.side-nav { gap: 3px; }
.side-nav button { min-height: 39px; color: #7f8793; border: 0; border-radius: 7px; background: transparent; }
.side-nav button::before { width: 2px; inset: 8px auto 8px 0; border-radius: 2px; background: transparent; }
.side-nav button.active { color: #e1e3e8; background: #121720; }
.side-nav button.active::before { background: #8c70df; box-shadow: none; }
.sidebar-foot { border-color: #222731; }
.login-button { border-color: #2b303b; background: #10141b; }
.login-button:hover { border-color: #51456e; background: #151922; }

.topbar { height: 60px; padding: 0 22px; border-color: #222731; background: rgba(8,11,18,.96); backdrop-filter: blur(12px); }
.workflow-tabs { gap: 1px; }
.workflow-tabs button { min-height: 60px; padding: 0 13px; color: #737b88; }
.workflow-tabs button::after { height: 2px; right: 13px; left: 13px; background: transparent; box-shadow: none; }
.workflow-tabs button.active { color: #e2e3e8; background: transparent; }
.workflow-tabs button.active::after { background: #8c70df; box-shadow: none; }
.online-pill { color: #9aa2ae; border: 0; background: transparent; }

/* Workbench: two calm surfaces, one clear action, almost no decoration. */
.view { padding: 20px 22px 30px; }
.workbench-grid { grid-template-columns: minmax(340px,370px) minmax(560px,1fr); min-height: calc(100vh - 150px); border-color: #252b35; border-radius: 10px; background: #0b0f16; box-shadow: none; }
.composer-panel { padding: 20px; border-color: #252b35; background: #0e1219; }
.panel-title { margin-bottom: 19px; }
.panel-title span, .section-bar span, .view-heading span { color: #8f76d8; letter-spacing: .1em; }
.panel-title h1 { color: #eceef2; font-size: 19px; }
.reset-button { border-color: #2b313c; background: transparent; box-shadow: none; }
.field-block { margin-top: 17px; }
.field-label { color: #c6cad1; }
.field-label b { background: #1a1f28; }
.dropzone, .compact-dropzone, .video-dropzone { border-color: #353d49; border-radius: 8px; background: #0a0e14; }
.dropzone:hover, .dropzone.dragover, .compact-dropzone:hover, .video-dropzone:hover { border-color: #69579c; background: #0d1118; }
.drop-empty svg, .compact-dropzone svg, .video-dropzone svg { color: #8c70df; filter: none; }
.segmented { gap: 3px; padding: 3px; border-color: #252b35; border-radius: 7px; background: #0a0e14; }
.segmented button { min-height: 34px; color: #767e8b; }
.segmented button.active { color: #e6e2ef; border: 1px solid #373047; background: #171521; box-shadow: none; }
.plain-textarea, .model-select, .model-description { border-color: #2b323d; background: #0a0e14; box-shadow: none; }
.plain-textarea:focus, .model-select:focus { border-color: #665596; box-shadow: none; }
.strategy-options { gap: 5px; }
.strategy-options label { min-height: 61px; border-color: #29303a; border-radius: 7px; background: #0a0e14; }
.strategy-options label:hover, .strategy-options label.selected { border-color: #655494; background: #12101a; box-shadow: none; }
.strategy-options label em { color: #9e86e7; }
.model-description { color: #9098a5; }
.model-description b { color: #a58de8; }
.primary-action { min-height: 47px; border-radius: 8px; color: #f6f3ff; background: #775cc6; box-shadow: none; }
.primary-action:hover { background: #8469d2; }
.primary-action:disabled { color: #656c78; background: #1b2029; }

.result-panel { background: #0b0f16; }
.empty-result, .pending-result { color: #d7d9df; }
.empty-visual { width: 116px; height: 116px; border-color: #292f3a; border-radius: 14px; background: #0e131b; }
.empty-visual span { display: none; }
.empty-visual b { width: 58px; height: 58px; color: #b8a7ec; border: 1px solid #393149; border-radius: 12px; background: #171421; box-shadow: none; }
.pending-stages span.active { color: #b7a6ea; border-color: #4c4169; background: #15131e; }
.progress-track span { background: #8165d0; }
.result-toolbar, .result-tabs, .result-summary-grid article, .dimension-card, .prompt-section, .video-style-block, .shot-card { border-color: #272e38; background: transparent; box-shadow: none; }
.result-toolbar { border-radius: 8px; }
.result-summary-grid { gap: 0; overflow: hidden; border: 1px solid #272e38; border-radius: 8px; }
.result-summary-grid article { border: 0; border-bottom: 1px solid #272e38; border-radius: 0; }
.result-summary-grid article:nth-child(odd) { border-right: 1px solid #272e38; }
.result-summary-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.dimension-grid { gap: 0; overflow: hidden; border: 1px solid #272e38; border-radius: 8px; }
.dimension-card { border: 0; border-bottom: 1px solid #272e38; border-radius: 0; }
.dimension-card:nth-child(odd) { border-right: 1px solid #272e38; }
.dimension-card:nth-last-child(-n+2) { border-bottom: 0; }
.quality-banner, .metric, .prompt-component, .shot-body code { border-color: #272e38; background: #0d1219; box-shadow: none; }
.result-actions button, .prompt-section button { border-color: #303644; background: #11161e; }
.result-tabs button.active { color: #b9a7ec; border-color: #8065ce; }
.toast { color: #eceef2; border: 1px solid #333946; background: #141922; box-shadow: 0 12px 32px rgba(0,0,0,.28); }

/* Home: keep the cinematic option selected by the user. */
.home-view { max-width: 1440px; padding: 0 52px 46px; }
.home-header { height: 88px; grid-template-columns: 1fr auto 1fr; }
.home-brand-mark { width: 38px; height: 38px; color: #aa93ef; border-color: #3d3553; border-radius: 10px; background: #15131f; }
.home-brand-mark svg { width: 19px; height: 19px; }
.home-brand > div { gap: 2px; }
.home-brand strong { font-size: 15px; }
.home-brand small { color: #7d6aad; font-size: 7px; }
.home-header nav { gap: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.home-header nav button { min-height: 38px; padding: 0; color: #747c88; border-radius: 0; }
.home-header nav button:hover { color: #d4d6dd; background: transparent; }
.home-header-actions { justify-self: end; display: flex; align-items: center; gap: 11px; }
.home-login { min-height: 38px; padding: 0 9px; color: #a5acb7; border: 0; background: transparent; }
.home-login:hover { color: #f0f1f5; }
.home-account { min-height: 38px; border-color: #2b313b; border-radius: 8px; background: #10141b; }
.home-start { min-height: 40px; display: flex; align-items: center; gap: 18px; padding: 0 15px; color: #d9d0f5; border: 1px solid #5b4a89; border-radius: 8px; background: transparent; font-size: 10px; }
.home-start:hover { color: #fff; border-color: #8068bd; background: #14111c; }
.home-start svg { width: 14px; }

.home-hero { min-height: 610px; grid-template-columns: minmax(340px,.78fr) minmax(560px,1.22fr); gap: 46px; overflow: visible; padding: 48px 0 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home-hero::before { inset: 2% 58% 18% -10%; opacity: .55; background: radial-gradient(circle, rgba(116,82,199,.18), transparent 70%); }
.home-copy h1 { max-width: 540px; margin: 17px 0 22px; font-size: clamp(44px,4.3vw,64px); line-height: 1.08; }
.home-copy > p { max-width: 520px; color: #8b93a0; font-size: 13px; line-height: 1.85; }
.home-actions { margin-top: 30px; }
.home-primary, .home-secondary { min-height: 46px; border-radius: 8px; box-shadow: none; }
.home-primary { color: #f8f5ff; background: #7b60c9; }
.home-secondary { gap: 8px; color: #a0a7b2; border: 0; background: transparent; }
.home-secondary svg { width: 16px; color: #8c70df; }
.home-primary:hover, .home-secondary:hover { transform: none; }
.home-primary:hover { background: #896fd5; }
.home-model-note { display: flex; align-items: center; gap: 8px; margin-top: 22px !important; color: #6e7683 !important; font-size: 9px !important; line-height: 1.4 !important; }
.home-model-note > span:first-child { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #4bc697; box-shadow: 0 0 14px rgba(75,198,151,.5); }
.home-model-note > span:last-child { width: auto; height: auto; border-radius: 0; background: transparent; box-shadow: none; }
.home-workflows { margin-top: 64px; }
.home-section-heading-wide { align-items: start; margin: 0 0 18px; }.home-section-heading-wide p { max-width: 420px; line-height: 1.7; }
.workflow-showcase-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid #293146; border-radius: 10px; background: #293146; }
.workflow-showcase-card { min-height: 270px; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 14px; padding: 22px; color: #e9edf7; background: #101622; text-align: left; transition: background .2s ease; }.workflow-showcase-card:hover { background: #151d2d; }.workflow-showcase-card.primary { background: linear-gradient(135deg, #182552, #211744); }.workflow-showcase-card i { width: 20px; height: 20px; color: #91a9ff; }.workflow-showcase-card span { color: #8793ab; font-size: 10px; }.workflow-showcase-card h3 { grid-column: 1/-1; margin: 26px 0 0; font-size: 17px; }.workflow-showcase-card p { grid-column: 1/-1; min-height: 48px; margin: 0; color: #9ca8bb; font-size: 11px; line-height: 1.7; }.workflow-showcase-card b { align-self: end; grid-column: 1/-1; color: #a99aff; font-size: 10px; }
.model-collaboration { display: grid; grid-template-columns: .85fr 1.15fr; gap: 68px; margin-top: 64px; padding: 46px 0; border-top: 1px solid #293146; border-bottom: 1px solid #293146; }.model-collaboration > div > span { color: #9e85f1; font-size: 9px; font-weight: 800; }.model-collaboration h2 { margin: 10px 0 14px; font-size: 32px; line-height: 1.25; }.model-collaboration p { max-width: 460px; margin: 0 0 22px; color: #9da8bb; font-size: 12px; line-height: 1.8; }.model-collaboration .home-secondary { padding: 0 14px; gap: 8px; border-radius: 7px; }
.model-chain-preview { display: grid; gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid #2d374e; border-radius: 10px; background: #2d374e; list-style: none; }.model-chain-preview li { display: grid; grid-template-columns: 30px 130px 1fr; align-items: center; gap: 13px; min-height: 76px; padding: 14px 18px; background: #101622; }.model-chain-preview i { color: #8c9dff; }.model-chain-preview span { color: #dfe4f1; font-size: 11px; }.model-chain-preview strong { color: #97a3b7; font-size: 10px; font-weight: 500; line-height: 1.5; }
@media (max-width: 900px) { .workflow-showcase-grid { grid-template-columns: repeat(2, 1fr); }.model-collaboration { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .workflow-showcase-grid { grid-template-columns: 1fr; }.workflow-showcase-card { min-height: 185px; }.workflow-showcase-card h3 { margin-top: 10px; }.workflow-showcase-card p { min-height: 0; }.model-collaboration { margin-top: 42px; padding: 32px 0; }.model-collaboration h2 { font-size: 25px; }.model-chain-preview li { grid-template-columns: 24px 1fr; }.model-chain-preview strong { grid-column: 2; }.home-model-note { margin-top: 16px !important; } }
.home-visual { width: 100%; aspect-ratio: 1.24; display: block; overflow: hidden; border: 1px solid #242a34; border-radius: 13px; background: #0d1118; }
.home-visual::before { z-index: 1; inset: 0; border-radius: 0; background: linear-gradient(90deg, rgba(8,11,18,.36), transparent 35%, rgba(8,11,18,.1)); filter: none; }
.home-visual img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .91; }
.visual-label { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; color: #d5d7dc; font-size: 9px; }
.visual-label span { width: 5px; height: 5px; border: 1px solid #af9be7; border-radius: 50%; background: #1a1528; box-shadow: 0 0 0 4px rgba(139,108,235,.1); }
.visual-color { top: 25%; left: 4%; }
.visual-texture { top: 16%; left: 47%; }
.visual-light { top: 20%; right: 5%; }
.visual-space { top: 61%; right: 4%; }
.dna-archive { position: absolute; z-index: 4; bottom: 18px; left: 22px; min-width: 220px; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 13px 15px; border: 1px solid rgba(185,164,239,.22); border-radius: 9px; background: rgba(8,11,18,.78); backdrop-filter: blur(12px); }
.dna-archive small { grid-column: 1 / -1; color: #8d78c8; font-size: 7px; letter-spacing: .12em; }
.dna-archive strong { color: #e5e0f1; font-size: 10px; }
.dna-archive span { color: #4bc697; font-size: 8px; }
.home-process { margin-top: 0; padding: 22px 8px; border: 0; border-top: 1px solid #222832; border-bottom: 1px solid #222832; border-radius: 0; background: transparent; }
.home-process article > b { color: #9279dc; }
.home-section-heading { margin-top: 42px; }
.home-example-card { border-radius: 10px; }
.home-examples-loading { border-radius: 10px; }

@media (max-width: 1080px) {
  .home-view { padding-inline: 30px; }
  .home-header { grid-template-columns: 1fr auto; }
  .home-header nav { display: none; }
  .home-hero { grid-template-columns: minmax(310px,.8fr) minmax(430px,1.2fr); gap: 28px; }
  .home-copy h1 { font-size: 46px; }
}
@media (max-width: 820px) {
  .view { padding: 14px; }
  .workbench-grid { grid-template-columns: 1fr; }
  .composer-panel { border-right: 0; border-bottom: 1px solid #252b35; }
  .home-hero { grid-template-columns: 1fr; }
  .home-visual { width: 100%; margin: 0; transform: none; }
}
@media (max-width: 560px) {
  .home-view { padding-inline: 14px; }
  .home-header-actions { gap: 4px; }
  .home-start { gap: 7px; padding: 0 10px; }
  .home-start span { display: none; }
  .home-hero { padding: 34px 0 28px; }
  .home-copy h1 { font-size: 38px; }
  .home-primary, .home-secondary { width: 100%; }
  .home-visual { aspect-ratio: .92; }
  .dna-archive { right: 12px; bottom: 12px; left: 12px; min-width: 0; }
  .visual-label { display: none; }
  .result-summary-grid, .dimension-grid { grid-template-columns: 1fr; }
  .result-summary-grid article:nth-child(odd), .dimension-card:nth-child(odd) { border-right: 0; }
  .result-summary-grid article:nth-last-child(-n+2), .dimension-card:nth-last-child(-n+2) { border-bottom: 1px solid #272e38; }
  .result-summary-grid article:last-child, .dimension-card:last-child { border-bottom: 0; }
}