:root {
  --ink: #172529;
  --muted: #66777b;
  --line: #d9e2e3;
  --paper: #f4f7f7;
  --panel: #ffffff;
  --teal: #157f8f;
  --teal-soft: #e6f4f5;
  --coral: #e96650;
  --coral-soft: #fff0ed;
  --yellow: #e6ad27;
  --green: #27895a;
  --green-soft: #e8f5ee;
  --graphite: #25363a;
  --shadow: 0 14px 38px rgba(28, 54, 59, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  letter-spacing: 0;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(21, 127, 143, 0.24); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.side-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  padding: 22px 16px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; min-height: 54px; }
.brand-mark { display: grid; place-items: center; width: 50px; height: 50px; color: #fff; background: var(--teal); border-radius: 8px; font-weight: 900; box-shadow: 0 8px 20px rgba(21, 127, 143, 0.23); }
.brand strong, .brand span, .gateway-mini strong, .gateway-mini span { display: block; }
.brand span, .gateway-mini span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.nav-list { display: grid; gap: 7px; }
.nav-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}
.nav-item:hover { background: #f2f6f6; }
.nav-item.active { color: var(--teal); background: var(--teal-soft); font-weight: 800; }
.nav-icon { display: grid; place-items: center; width: 30px; height: 30px; color: inherit; font-size: 17px; }
.nav-item em { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; color: var(--muted); background: #eef2f2; border-radius: 12px; font-size: 11px; font-style: normal; }
.nav-item.active em { color: #fff; background: var(--teal); }
.gateway-mini { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 13px; border-top: 1px solid var(--line); }

.status-dot { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #9aabad; }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(39, 137, 90, 0.12); }
.status-dot.warn { background: var(--yellow); box-shadow: 0 0 0 4px rgba(230, 173, 39, 0.14); }

.main { min-width: 0; padding: 24px; }
.utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  margin-bottom: 12px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.topbar {
  position: relative;
  display: flex;
  min-height: 286px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  background-image: url("./assets/maker-cover-v1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.topbar-copy { position: relative; z-index: 1; width: min(500px, 44%); }
.eyebrow { margin: 0 0 7px; color: var(--teal); font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; line-height: 1.16; }
h1 { max-width: 470px; font-size: 40px; }
h2 { font-size: 21px; }
h3 { font-size: 19px; }
.top-summary { max-width: 430px; margin: 14px 0 20px; color: #44575b; line-height: 1.7; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; }
.local-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 42px; padding: 0 13px; color: var(--green); background: var(--green-soft); border: 1px solid rgba(39, 137, 90, 0.22); border-radius: 8px; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.account-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 180px; padding: 0 13px; color: var(--graphite); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-weight: 800; }
.account-button:hover { color: var(--teal); background: var(--teal-soft); }
.account-button.authenticated { color: var(--green); border-color: rgba(39, 137, 90, 0.3); background: var(--green-soft); }
.account-button-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; color: #fff; background: var(--teal); border-radius: 50%; font-size: 11px; }
.account-button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.primary-button, .ghost-button, .icon-button, .text-button { border: 0; border-radius: 8px; min-height: 44px; font-weight: 800; }
.primary-button { padding: 0 18px; color: #fff; background: var(--teal); box-shadow: 0 9px 20px rgba(21, 127, 143, 0.2); }
.primary-button:hover { background: #116c79; }
.primary-button:disabled { cursor: not-allowed; color: #849396; background: #dce4e5; box-shadow: none; }
.primary-button.wide { flex: 1; }
.ghost-button { padding: 0 16px; color: var(--teal); background: var(--teal-soft); }
.ghost-button:hover { background: #d9edef; }
.ghost-button:disabled { cursor: not-allowed; opacity: 0.52; }
.icon-button { display: grid; place-items: center; width: 44px; padding: 0; color: var(--teal); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); font-size: 17px; }
.icon-button.active { color: #fff; background: var(--coral); border-color: var(--coral); }
.primary-button.small, .ghost-button.small { min-height: 44px; padding: 0 12px; font-size: 13px; }
.text-button { min-height: 44px; padding: 0 8px; background: transparent; }
.danger-text { color: var(--coral); }

.journey-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 0; border: 1px solid var(--line); background: #fff; border-radius: 8px; }
.journey-strip > div { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; min-height: 76px; padding: 15px; border-right: 1px solid var(--line); }
.journey-strip > div:last-child { border-right: 0; }
.journey-strip > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); background: #eef2f2; border-radius: 50%; font-weight: 900; }
.journey-strip strong { align-self: end; font-size: 14px; }
.journey-strip small { align-self: start; margin-top: 3px; color: var(--muted); }
.journey-strip .done > span { color: #fff; background: var(--green); }
.journey-strip .done small { color: var(--green); }

.test-console { display: grid; grid-template-columns: 1fr minmax(190px, 240px) minmax(220px, 280px) auto; align-items: center; gap: 12px; margin: 12px 0 18px; padding: 12px 14px; color: #fff; background: var(--graphite); border-radius: 8px; }
.test-console strong, .test-console span { display: block; }
.test-console span { margin-top: 3px; color: #bcd0d3; font-size: 12px; }
.test-console #runtimeHint { color: #f4d98e; }
.test-console select { min-height: 40px; border-color: transparent; background: #fff; }

.tab-panel { display: none; scroll-margin-top: 14px; }
.tab-panel.active { display: block; }
.studio-stage-tabs { position: sticky; top: 8px; z-index: 20; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 16px; padding: 5px; background: #edf3f4; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 20px rgba(29, 69, 76, 0.08); }
.studio-stage-tabs button { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 52px; padding: 0 12px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font: inherit; cursor: pointer; }
.studio-stage-tabs button span { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 900; }
.studio-stage-tabs button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-stage-tabs button.active { color: #fff; background: var(--teal); box-shadow: 0 5px 13px rgba(21, 127, 143, 0.2); }
.studio-stage-tabs button:disabled { color: #a4b0b2; cursor: not-allowed; }
.studio-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
.studio-stage-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.studio-stage-actions button { width: 100%; }
.studio-back-button { grid-column: 1 / -1; justify-self: start; }
.tool-panel { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.section-heading, .page-heading, .action-row, .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-heading { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.page-heading.compact { align-items: flex-start; }
.mode-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.mode-pill.ready { color: var(--green); background: var(--green-soft); border-color: rgba(39, 137, 90, 0.22); }
.mode-pill.danger { color: var(--coral); background: var(--coral-soft); border-color: rgba(233, 102, 80, 0.22); }
.inline-alert { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-size: 13px; font-weight: 800; line-height: 1.55; }
.inline-alert.warn { color: #6c4d00; background: #fff6dc; border: 1px solid rgba(230, 173, 39, 0.35); }
.inline-alert.ready { color: #1f6847; background: var(--green-soft); border: 1px solid rgba(39, 137, 90, 0.3); }
.inline-alert.danger { color: #9d3525; background: var(--coral-soft); border: 1px solid rgba(233, 102, 80, 0.34); }

.field-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.field-label { display: block; margin: 18px 0 8px; color: var(--graphite); font-weight: 800; }
.field-label.compact { margin-top: 12px; }
.voice-input-button { min-height: 34px; margin-bottom: 6px; padding: 0 11px; color: var(--teal); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 800; }
.voice-input-button.listening { color: #fff; background: var(--coral); border-color: var(--coral); }
textarea, select, input[type="text"], input[type="number"] { width: 100%; min-height: 44px; padding: 11px 13px; color: var(--ink); background: #fbfcfc; border: 1px solid var(--line); border-radius: 8px; outline: none; }
textarea { resize: vertical; line-height: 1.6; }
textarea:focus, select:focus, input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21, 127, 143, 0.1); }
.field-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.error-text { color: var(--coral) !important; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 16px; }
.prompt-chips button { min-height: 36px; padding: 0 12px; color: var(--teal); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-weight: 800; }
.prompt-chips button:hover { border-color: var(--teal); background: var(--teal-soft); }
.ai-painting { margin: 18px 0; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.ai-painting-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-painting-heading > div { display: grid; gap: 4px; }
.ai-painting-heading small { color: var(--muted); font-size: 12px; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 13px; padding: 4px; background: #edf3f3; border-radius: 8px; }
.segmented-control button { min-height: 36px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 13px; font-weight: 800; }
.segmented-control button.active { color: var(--teal); background: #fff; box-shadow: 0 2px 8px rgba(28, 54, 59, 0.08); }
.ai-painting-actions { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 9px; align-items: end; margin-top: 11px; }
.ai-painting-actions > label:first-child { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.ai-result-import { display: grid; place-items: center; cursor: pointer; }
.ai-result-import input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ai-image-status { display: grid; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-image-status span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.ai-image-status.running strong { color: var(--yellow); }
.ai-image-status.ready strong { color: var(--green); }
.ai-image-status.danger strong { color: var(--coral); }
.ai-image-result { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-preview-heading > div { display: grid; gap: 4px; }
.ai-preview-heading > .ai-preview-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ai-save-button { white-space: nowrap; }
.ai-preview-heading small, .ai-revision-actions small { color: var(--muted); font-size: 12px; }
.ai-preview-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; min-height: 260px; overflow: hidden; background-color: #f5f8f8; background-image: linear-gradient(#e7eeee 1px, transparent 1px), linear-gradient(90deg, #e7eeee 1px, transparent 1px); background-size: 32px 32px; border: 1px solid var(--line); border-radius: 8px; }
.ai-preview-stage img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ai-preview-empty { display: grid; place-items: center; gap: 5px; padding: 24px; color: var(--muted); text-align: center; }
.ai-preview-empty strong { color: var(--graphite); }
.ai-preview-empty span, .ai-result-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ai-result-meta { min-height: 18px; }
.ai-revision-panel { padding-top: 2px; border-top: 1px solid var(--line); }
.ai-revision-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.ai-revision-actions .primary-button { min-width: 180px; }
.print-idea-section { padding-bottom: 2px; }
.upload-row { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr); gap: 12px; margin-bottom: 16px; }
.upload-box { position: relative; display: grid; align-content: center; justify-items: center; gap: 7px; min-height: 144px; padding: 16px; color: var(--teal); background: #f1f9fa; border: 1px dashed var(--teal); border-radius: 8px; text-align: center; cursor: pointer; }
.upload-box input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-box small { max-width: 220px; color: var(--muted); overflow-wrap: anywhere; }
.upload-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--teal); border-radius: 50%; font-size: 22px; }
.option-stack, .settings-list { display: grid; gap: 12px; }
.option-stack label, .settings-list label { display: grid; gap: 6px; color: var(--muted); font-weight: 800; }
.dimension-settings { margin-bottom: 16px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dimension-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.dimension-heading > div { display: grid; gap: 4px; }
.dimension-heading small { color: var(--muted); font-size: 12px; }
.ratio-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.ratio-toggle input { width: 17px; height: 17px; accent-color: var(--teal); }
.size-controls { display: grid; grid-template-columns: minmax(170px, 0.7fr) minmax(0, 1.3fr); gap: 12px; align-items: end; }
.preset-field, .dimension-grid > label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.dimension-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.dimension-input { position: relative; display: block; }
.dimension-input input { padding-right: 36px; }
.dimension-input em { position: absolute; top: 50%; right: 10px; color: var(--muted); font-size: 11px; font-style: normal; transform: translateY(-50%); pointer-events: none; }
.size-validation { min-height: 22px; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.size-validation::before { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #9aabad; content: ""; }
.size-validation.ready { color: var(--green); }
.size-validation.ready::before { background: var(--green); }
.size-validation.danger { color: var(--coral); font-weight: 800; }
.size-validation.danger::before { background: var(--coral); }

.model-stage { position: relative; display: grid; place-items: center; min-height: 348px; margin: 18px 0 12px; overflow: hidden; background-color: #f2f8f8; background-size: cover; background-position: center; border: 1px solid var(--line); border-radius: 8px; }
.stage-grid { position: absolute; inset: 0; opacity: 0.38; background-size: 28px 28px; background-image: linear-gradient(#dbe8e9 1px, transparent 1px), linear-gradient(90deg, #dbe8e9 1px, transparent 1px); }
.stage-state { position: relative; z-index: 2; display: grid; gap: 6px; padding: 18px; text-align: center; }
.stage-state strong { font-size: 17px; }
.stage-state span { color: var(--muted); font-size: 13px; }
.print-model { position: relative; z-index: 3; display: none; width: 128px; height: 210px; transform-style: preserve-3d; animation: floatModel 4.5s ease-in-out infinite; }
.print-model.visible { display: block; }
.print-model.running { animation: spinModel 2.6s linear infinite; }
.real-model-viewer { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
.generation-progress { position: relative; z-index: 6; display: grid; width: min(380px, calc(100% - 36px)); gap: 13px; padding: 18px; color: var(--ink); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 34px rgba(29, 69, 76, 0.13); }
.generation-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.generation-progress-head span { font-weight: 900; }
.generation-progress-head strong { color: var(--teal); font-size: 18px; }
.generation-progress-track { height: 10px; overflow: hidden; background: #dfe9ea; border-radius: 5px; }
.generation-progress-track span { display: block; width: 0; height: 100%; background: var(--teal); border-radius: inherit; transition: width 0.35s ease; }
.generation-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.generation-time-grid span { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
.generation-time-grid span:last-child { text-align: right; }
.generation-time-grid strong { color: var(--ink); font-size: 14px; }
.generation-progress small { color: var(--muted); line-height: 1.5; }
.model-task-actions { display: flex; justify-content: flex-end; margin: 10px 0 12px; }
.model-task-actions[hidden] { display: none; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 12px; color: var(--green); background: var(--green-soft); border: 1px solid rgba(39, 137, 90, 0.24); border-radius: 8px; }
.viewer-toolbar > span { display: inline-flex; align-items: center; gap: 9px; }
.viewer-toolbar > div { display: flex; gap: 8px; }
.model-body { position: absolute; left: 28px; top: 8px; width: 72px; height: 140px; border-radius: 42px 42px 18px 18px; background: #f4f2eb; border: 5px solid var(--coral); box-shadow: inset -9px -8px 0 rgba(21, 127, 143, 0.12), 0 20px 30px rgba(29, 69, 76, 0.2); }
.model-window { position: absolute; left: 47px; top: 44px; width: 36px; height: 36px; background: var(--yellow); border: 5px solid #fff; border-radius: 50%; }
.model-fin { position: absolute; top: 112px; width: 35px; height: 59px; background: var(--teal); border-radius: 7px 7px 18px 18px; }
.model-fin.left { left: 8px; transform: rotate(-18deg); }
.model-fin.right { right: 8px; transform: rotate(18deg); }
.model-base { position: absolute; left: 17px; bottom: 0; width: 94px; height: 23px; background: rgba(37, 54, 58, 0.13); border-radius: 50%; }
@keyframes floatModel { 0%, 100% { transform: translateY(0) rotateY(-12deg); } 50% { transform: translateY(-10px) rotateY(12deg); } }
@keyframes spinModel { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.work-result { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.work-result span { color: var(--muted); font-size: 12px; text-align: right; }
.failure-details { display: grid; gap: 10px; margin: 12px 0; padding: 14px; color: #733124; background: var(--coral-soft); border: 1px solid rgba(233, 102, 80, 0.34); border-radius: 8px; }
.failure-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.failure-head span, .failure-head strong { display: block; }
.failure-head span { margin-bottom: 3px; color: #a65a4e; font-size: 11px; }
.failure-head code { max-width: 100%; padding: 6px 8px; color: #8f2f20; background: #fff; border-radius: 6px; font-size: 11px; overflow-wrap: anywhere; }
.failure-details p { margin: 0; line-height: 1.65; }
.failure-details small { color: #895c54; line-height: 1.55; }
.failure-details .primary-button { justify-self: start; margin-top: 2px; background: var(--coral); box-shadow: none; }
.metric-grid, .telemetry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.metric-grid div, .telemetry-grid div { min-width: 0; padding: 12px; background: #f8fafa; border: 1px solid var(--line); border-radius: 8px; }
.metric-grid span, .metric-grid strong, .telemetry-grid span, .telemetry-grid strong { display: block; }
.metric-grid span, .telemetry-grid span { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.metric-grid strong, .telemetry-grid strong { font-size: 14px; overflow-wrap: anywhere; }

.pipeline-panel { margin-top: 18px; padding: 20px 0 0; border-top: 1px solid var(--line); }
.pipeline-list { display: grid; grid-template-columns: repeat(6, minmax(115px, 1fr)); gap: 9px; margin-top: 15px; }
.pipeline-step { min-height: 138px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pipeline-step .step-index { display: inline-grid; place-items: center; min-width: 32px; height: 25px; margin-bottom: 14px; padding: 0 7px; color: var(--muted); background: #edf2f2; border-radius: 6px; font-size: 11px; font-weight: 900; }
.pipeline-step strong, .pipeline-step > span:last-child { display: block; }
.pipeline-step > span:last-child { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pipeline-step.running { border-color: var(--yellow); background: #fffaf0; }
.pipeline-step.running .step-index { color: #6c4d00; background: #f8dc96; }
.pipeline-step.done { border-color: rgba(39, 137, 90, 0.25); background: var(--green-soft); }
.pipeline-step.done .step-index { color: #fff; background: var(--green); }
.pipeline-step.failed { border-color: rgba(233, 102, 80, 0.35); background: var(--coral-soft); }
.pipeline-step.failed .step-index { color: #fff; background: var(--coral); }
.approval-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; margin-top: 18px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.approval-panel p { margin: 6px 0 0; color: var(--muted); }
.approval-state { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; font-weight: 800; }

.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.work-card, .job-card, .approval-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.work-thumb { position: relative; display: grid; place-items: center; min-height: 150px; color: var(--teal); background: #e9f4f5; font-size: 50px; }
.work-thumb em { position: absolute; top: 10px; right: 10px; padding: 6px 8px; color: var(--graphite); background: rgba(255, 255, 255, 0.92); border-radius: 6px; font-size: 11px; font-style: normal; font-weight: 800; }
.work-body { padding: 14px; }
.work-body strong, .work-body span, .work-body small { display: block; }
.work-body span, .work-body small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.card-actions { display: flex; align-items: center; gap: 6px; margin-top: 13px; }
.empty-state { display: grid; justify-items: center; gap: 7px; min-height: 170px; padding: 28px; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: 8px; text-align: center; }
.empty-state strong { color: var(--ink); }
.empty-state.success { background: var(--green-soft); border-color: rgba(39, 137, 90, 0.28); }

.print-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.job-list { display: grid; gap: 11px; }
.job-card { padding: 15px; }
.job-head { display: flex; justify-content: space-between; gap: 12px; }
.job-head strong, .job-head span { display: block; }
.job-head div > span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.progress { height: 9px; margin-top: 13px; overflow: hidden; background: #e1e9ea; border-radius: 5px; }
.progress span { display: block; height: 100%; background: var(--teal); border-radius: inherit; transition: width 0.25s ease; }
.job-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.printer-visual { position: relative; height: 230px; margin: 17px 0; overflow: hidden; background: #f0f5f5; border: 1px solid var(--line); border-radius: 8px; }
.printer-frame { position: absolute; inset: 24px 34px 34px; border: 10px solid var(--graphite); border-bottom-width: 16px; }
.printer-head { position: absolute; top: 63px; left: 50%; width: 72px; height: 42px; background: var(--graphite); border-radius: 6px; animation: headMove 4s ease-in-out infinite; }
.printer-bed { position: absolute; left: 58px; right: 58px; bottom: 55px; height: 14px; background: var(--teal); border-radius: 4px; }
.print-piece { position: absolute; left: 50%; bottom: 69px; width: 62px; height: 58px; background: var(--coral); border-radius: 30px 30px 8px 8px; transform: translateX(-50%); }
@keyframes headMove { 0%, 100% { transform: translateX(-66px); } 50% { transform: translateX(-6px); } }
.telemetry-grid { grid-template-columns: repeat(2, 1fr); }

.guardian-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 18px; }
.approval-card { display: grid; grid-template-columns: 160px 1fr; }
.approval-preview { display: grid; place-items: center; min-height: 280px; color: #fff; background: var(--teal); font-size: 72px; }
.approval-copy { padding: 22px; }
.approval-copy h3 { margin-top: 14px; }
.approval-copy p { color: var(--muted); line-height: 1.6; }
.approval-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.approval-copy dl div { padding: 10px; background: #f6f9f9; border-radius: 8px; }
.approval-copy dt { color: var(--muted); font-size: 11px; }
.approval-copy dd { margin: 5px 0 0; font-size: 13px; font-weight: 800; }
.approval-actions { display: flex; justify-content: flex-end; gap: 10px; }
.guardian-settings .settings-list { margin: 17px 0; }
.gateway-band { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gateway-band > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 16px; border-right: 1px solid var(--line); }
.gateway-band > div:last-child { border-right: 0; }
.gateway-band span:last-child { grid-column: 2; color: var(--muted); font-size: 12px; }

.user-center-heading { align-items: center; }
.user-summary-band { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(110px, 1fr)); margin-bottom: 20px; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.user-summary-band > div { display: grid; align-content: center; gap: 5px; min-height: 82px; padding: 14px 16px; border-right: 1px solid var(--line); }
.user-summary-band > div:last-child { border-right: 0; }
.user-summary-band > div > span { color: var(--muted); font-size: 12px; }
.user-summary-band > div > strong { font-size: 20px; }
.user-summary-band .user-profile { display: flex; align-items: center; gap: 12px; }
.user-profile > div { display: grid; flex: 1; gap: 4px; min-width: 0; }
.user-profile > div strong { font-size: 15px; }
.user-profile .account-logout { margin-left: auto; color: var(--teal); white-space: nowrap; }
.user-avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; color: #fff !important; background: var(--teal); border-radius: 8px; font-size: 14px !important; font-weight: 900; }
.subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.subsection-heading h3 { margin: 3px 0 0; }
.user-approval-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.user-approval-section .approval-card { box-shadow: var(--shadow); }
.user-center-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.user-center-tabs button { min-height: 48px; padding: 0 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 800; }
.user-center-tabs button:hover { color: var(--teal); background: #f4f8f8; }
.user-center-tabs button.active { color: var(--teal); border-bottom-color: var(--teal); }
.user-view-panel { display: none; min-height: 300px; }
.user-view-panel.active { display: block; }
.user-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.history-list, .order-list { display: grid; gap: 11px; }
.history-card, .order-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, 0.7fr) auto; align-items: center; gap: 16px; min-height: 86px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.history-card > div, .order-card > div { display: grid; gap: 4px; min-width: 0; }
.history-card span, .history-card small, .order-card span, .order-card small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.history-card .history-progress { min-width: 130px; }
.history-card .history-progress strong { font-size: 13px; }
.order-card .order-amount { text-align: right; }
.order-card .order-amount strong { color: var(--teal); font-size: 16px; }
.points-layout { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
.points-wallet { display: grid; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--yellow); border-radius: 8px; }
.points-wallet > span { color: var(--muted); font-size: 12px; }
.points-wallet > strong { font-size: 18px; }
.points-wallet > strong b { color: var(--teal); font-size: 34px; }
.points-wallet > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.points-packages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.points-packages button { min-height: 42px; color: var(--graphite); background: #f6f9f9; border: 1px solid var(--line); border-radius: 8px; font-weight: 800; }
.points-packages button.active { color: #fff; background: var(--teal); border-color: var(--teal); }
.points-ledger h3 { margin-bottom: 12px; }
.points-ledger-list { display: grid; border-top: 1px solid var(--line); }
.points-ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.points-ledger-row > div { display: grid; gap: 4px; }
.points-ledger-row span, .points-ledger-row small { color: var(--muted); font-size: 12px; }
.points-ledger-row strong.credit { color: var(--green); }
.points-ledger-row strong.debit { color: var(--coral); }
.user-settings { margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.user-settings summary { padding: 16px 2px; color: var(--graphite); font-weight: 800; cursor: pointer; }
.user-settings-content { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: 22px; padding: 2px 0 18px; }
.user-settings .guardian-settings .settings-list { margin: 14px 0; }
.user-settings .gateway-band { align-self: end; margin-top: 0; }

dialog { width: min(540px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 8px; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(23, 37, 41, 0.42); }
.auth-dialog { width: min(620px, calc(100vw - 32px)); max-width: 620px; max-height: min(760px, calc(100vh - 32px)); padding: 0; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid rgba(21, 127, 143, 0.2); }
.auth-dialog form { max-height: min(760px, calc(100vh - 32px)); padding: 22px; overflow: auto; }
.auth-dialog button,
.auth-dialog input,
.auth-dialog select { min-height: 44px; }
.auth-dialog input[type="checkbox"], .auth-dialog input[type="radio"] { width: 20px; min-height: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--teal); }
.auth-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.auth-dialog-head p:last-child { max-width: 470px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 20px 0 16px; padding: 5px; list-style: none; background: #edf3f4; border-radius: 8px; }
.auth-progress li { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; padding: 5px 8px; color: var(--muted); border-radius: 6px; font-size: 12px; }
.auth-progress li span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; font-weight: 900; }
.auth-progress li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-progress li.active { color: #fff; background: var(--teal); }
.auth-progress li.done { color: var(--green); background: var(--green-soft); }
.auth-status { min-height: 42px; margin-bottom: 14px; padding: 11px 13px; color: #315359; background: var(--teal-soft); border-left: 4px solid var(--teal); border-radius: 6px; font-size: 13px; line-height: 1.5; }
.auth-error-summary { margin-bottom: 12px; padding: 12px 13px; color: #9b2f21; background: var(--coral-soft); border: 1px solid rgba(233, 102, 80, 0.35); border-radius: 8px; font-size: 13px; font-weight: 800; line-height: 1.5; }
.auth-step { display: grid; gap: 14px; }
.auth-step-heading { display: grid; gap: 4px; }
.auth-step-heading > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-field { display: grid; gap: 7px; color: var(--graphite); font-size: 13px; font-weight: 800; }
.auth-field input, .auth-field select { width: 100%; padding: 0 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.auth-primary-action { width: 100%; }
.auth-code-actions, .auth-account-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.auth-test-code { margin: 0; padding: 11px 13px; color: #735100; background: #fff7d7; border: 1px solid rgba(230, 173, 39, 0.4); border-radius: 8px; font-weight: 900; letter-spacing: 0.08em; }
.auth-role-fieldset, .auth-legal-fieldset { display: grid; gap: 9px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.auth-role-fieldset legend, .auth-legal-fieldset legend { padding: 0 6px; color: var(--graphite); font-size: 13px; font-weight: 900; }
.auth-role-fieldset > label { display: flex; align-items: flex-start; gap: 10px; min-height: 58px; padding: 10px; background: #f8fafa; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.auth-role-fieldset > label:has(input:checked) { background: var(--teal-soft); border-color: rgba(21, 127, 143, 0.35); }
.auth-role-fieldset label > span { display: grid; gap: 3px; }
.auth-role-fieldset small { color: var(--muted); font-size: 12px; font-weight: 400; }
.auth-new-account { display: grid; gap: 10px; }
.auth-check-row, .auth-legal-fieldset > label { display: flex; align-items: flex-start; gap: 10px; color: #364a4f; font-size: 13px; line-height: 1.5; cursor: pointer; }
.auth-wechat-ack { padding: 12px; color: #684b00; background: #fff7d7; border: 1px solid rgba(230, 173, 39, 0.4); border-radius: 8px; font-weight: 800; }
.auth-legal-details { padding-top: 5px; border-top: 1px solid var(--line); }
.auth-legal-details summary { min-height: 36px; padding-top: 8px; color: var(--teal); font-size: 13px; font-weight: 800; cursor: pointer; }
.auth-legal-details section { padding: 9px 0; border-top: 1px dashed var(--line); }
.auth-legal-details section:first-child { border-top: 0; }
.auth-legal-details section strong { font-size: 13px; }
.auth-legal-details section p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
pre { overflow: auto; padding: 14px; color: #dff4f5; background: #102c31; border-radius: 8px; }
.dialog-note { color: var(--muted); line-height: 1.6; }
.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 44px)); padding: 13px 15px; color: #fff; background: var(--graphite); border-radius: 8px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 196px minmax(0, 1fr); }
  .side-nav { padding-inline: 12px; }
  .brand span { display: none; }
  .topbar { min-height: 260px; background-position: 56% center; }
  .topbar-copy { width: 48%; }
  h1 { font-size: 34px; }
  .studio-grid, .print-layout, .guardian-layout { grid-template-columns: 1fr; }
  .pipeline-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .telemetry-panel { max-width: none; }
  .test-console { grid-template-columns: 1fr 1fr; }
  .test-console > div { grid-column: 1 / -1; }
  .user-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .side-nav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 40; display: block; width: 100%; height: 66px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-right: 0; }
  .brand, .gateway-mini { display: none; }
  .nav-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .nav-item { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 1px; min-height: 51px; padding: 2px; font-size: 11px; text-align: center; }
  .nav-icon { height: 22px; font-size: 16px; }
  .nav-item em { position: absolute; margin-left: 24px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 9px; }
  .main { padding: 14px 14px 86px; }
  .topbar {
    min-height: 460px;
    padding: 24px 20px;
    align-items: flex-start;
    background-position: 68% bottom;
    background-size: auto 300px;
  }
  .topbar-copy { width: 100%; max-width: none; }
  .top-summary { max-width: 560px; margin-bottom: 0; font-size: 14px; }
  .journey-strip { grid-template-columns: repeat(2, 1fr); }
  .journey-strip > div:nth-child(2) { border-right: 0; }
  .journey-strip > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .test-console { grid-template-columns: 1fr 1fr; }
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-summary-band .user-profile { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .user-summary-band > div:nth-child(3), .user-summary-band > div:nth-child(5) { border-right: 0; }
  .user-center-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points-layout, .user-settings-content { grid-template-columns: 1fr; }
  .toast { bottom: 80px; }
}

@media (max-width: 600px) {
  h1 { font-size: 28px; }
  h2 { font-size: 19px; }
  .voice-input-button,
  .prompt-chips button,
  .segmented-control button,
  .points-packages button,
  .primary-button.small,
  .ghost-button.small,
  .text-button,
  .ratio-toggle { min-height: 44px; }
  .topbar {
    min-height: 470px;
    padding: 20px 17px;
    background-position: 68% bottom;
    background-size: auto 296px;
  }
  .topbar-copy { width: 100%; }
  .top-summary { max-width: none; margin: 10px 0 0; color: #304246; }
  .utility-bar { align-items: stretch; flex-direction: column; }
  .local-badge { width: 100%; }
  .top-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; width: 100%; }
  .top-actions .account-button { width: 100%; max-width: none; }
  .top-actions .primary-button { grid-column: 1 / -1; width: 100%; }
  .auth-dialog { width: calc(100% - 24px); max-height: calc(100vh - 24px); }
  .auth-dialog form { max-height: calc(100vh - 24px); padding: 17px; }
  .auth-progress li { gap: 4px; padding-inline: 4px; }
  .auth-progress li strong { font-size: 11px; }
  .auth-code-actions, .auth-account-actions { grid-template-columns: 1fr; }
  .journey-strip > div { min-height: 72px; padding: 12px; }
  .test-console { grid-template-columns: 1fr; }
  .test-console label, .test-console button { width: 100%; }
  .section-heading, .page-heading, .action-row, .approval-actions { align-items: stretch; flex-direction: column; }
  .studio-stage-tabs { top: 5px; }
  .studio-stage-tabs button { min-height: 48px; padding: 0 6px; }
  .studio-stage-tabs button span { width: 23px; height: 23px; }
  .studio-stage-actions { grid-template-columns: 1fr; }
  .section-heading .mode-pill, .page-heading .mode-pill { align-self: flex-start; }
  .upload-row, .works-grid, .metric-grid, .gateway-band { grid-template-columns: 1fr; }
  .user-portfolio-grid { grid-template-columns: 1fr; }
  .history-card, .order-card { grid-template-columns: 1fr; align-items: start; }
  .order-card .order-amount { text-align: left; }
  .points-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dimension-heading { align-items: flex-start; flex-direction: column; }
  .size-controls { grid-template-columns: 1fr; }
  .ai-painting-actions { grid-template-columns: 1fr; }
  .ai-preview-stage { min-height: 220px; }
  .ai-revision-actions { align-items: stretch; flex-direction: column; }
  .ai-revision-actions .primary-button { width: 100%; min-width: 0; }
  .pipeline-list { display: grid; grid-template-columns: 1fr 1fr; }
  .pipeline-step { min-height: 128px; }
  .approval-panel { grid-template-columns: 1fr; align-items: stretch; }
  .approval-state { min-height: 34px; }
  .model-stage { min-height: 310px; }
  .work-result { flex-direction: column; }
  .work-result span { text-align: left; }
  .failure-head { align-items: flex-start; flex-direction: column; }
  .failure-details .primary-button { width: 100%; }
  .viewer-toolbar { align-items: stretch; flex-direction: column; }
  .viewer-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .approval-card { grid-template-columns: 1fr; }
  .approval-preview { min-height: 130px; }
  .approval-copy dl { grid-template-columns: 1fr; }
  .gateway-band > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .gateway-band > div:last-child { border-bottom: 0; }
  .job-head { align-items: flex-start; }
}

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