:root {
  --page: #fcf8ff;
  --sidebar: #f5effb;
  --surface: #ffffff;
  --line: #d9d1e0;
  --text: #29252e;
  --muted: #746d79;
  --primary: #6541b2;
  --primary-soft: #e7daff;
  --primary-pale: #f1eaff;
  --dark: #655d70;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1080px; color: var(--text); background: #211f20; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.top-links button { appearance: none; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; }

.app-shell { min-height: 100vh; padding: 14px; }
.canvas { min-height: calc(100vh - 28px); border-radius: 20px; overflow: hidden; background: var(--page); }
.topbar { height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; background: #fdfaff; }
.brand { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 700; }
.brand-mark { width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; color: white; background: var(--primary); font-family: Georgia, serif; font-size: 18px; }
.workspace-name { margin-left: 22px; color: var(--muted); font-weight: 500; font-size: 18px; }
.top-links { display: flex; gap: 34px; color: var(--muted); font-size: 15px; }
.top-links .active { color: var(--primary); font-weight: 700; }
.workspace { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 100px); }
.sidebar { padding: 28px 24px; background: var(--sidebar); border-right: 1px solid var(--line); position: relative; }
.sidebar h2 { margin: 0 0 16px; font-size: 18px; }
.nav-item, .sub-nav { width: 100%; border: 0; background: transparent; text-align: left; color: var(--muted); padding: 11px 14px; border-radius: 8px; font-size: 15px; }
.nav-item.selected, .sub-nav.selected { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.sub-nav-row { display: flex; gap: 8px; margin: 0 0 10px; }
.sub-nav { padding: 6px 10px; text-align: center; background: #ece2ff; color: var(--primary); }
.divider { height: 1px; background: var(--line); margin: 16px 0 20px; }
.steps-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.step-nav { display: grid; gap: 8px; }
.step-nav button { border: 0; background: transparent; padding: 10px; display: flex; align-items: center; gap: 13px; color: var(--muted); border-radius: 8px; text-align: left; }
.step-nav button.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.step-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 50%; font-size: 14px; }
.step-nav button.active .step-number { border-color: var(--primary); color: white; background: var(--primary); }
.autosave { position: absolute; left: 24px; bottom: 28px; color: var(--muted); font-size: 13px; }
.autosave::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #817985; margin-right: 7px; }
.main-content { padding: 40px 58px 70px; max-width: 1480px; width: 100%; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 30px; }
.page-heading h1 { margin: 0 0 8px; font-size: 31px; line-height: 1.25; }
.page-heading p { margin: 0; color: var(--muted); font-size: 16px; }
.step-badge { flex: 0 0 auto; padding: 10px 16px; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 15px; }
.type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.type-card { min-height: 230px; padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: #fdfbff; text-align: left; transition: .15s ease; display: grid; grid-template-columns: 148px 1fr; grid-template-rows: 1fr auto; gap: 0 24px; }
.type-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.type-card.selected { border: 2px solid var(--primary); background: var(--primary-pale); }
.type-card .number { grid-row: 1 / span 2; height: 148px; padding: 14px; border-radius: 8px; background: #f7f1fd; font-size: 40px; font-weight: 750; color: #111; }
.type-card.selected .number { background: #cbb6f3; }
.type-card h3 { margin: 4px 0 12px; font-size: 20px; }
.type-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.type-card .selected-note { color: var(--primary); font-size: 14px; }
.section-title { margin: 38px 0 14px; font-size: 20px; }
.template-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.mini-template { display: flex; align-items: center; gap: 28px; min-height: 155px; border: 1px solid var(--line); border-radius: 9px; padding: 20px; background: white; text-align: left; }
.mini-preview { width: 110px; height: 110px; border-radius: 8px; background: #f2eaff; display: grid; place-items: center; color: var(--primary); font-size: 29px; font-weight: 700; }
.mini-template h3 { margin: 0 0 10px; font-size: 18px; }
.mini-template p { margin: 0; color: var(--muted); }
.bottom-bar { display: flex; gap: 14px; align-items: center; margin-top: 42px; }
.status-copy { margin-right: auto; color: var(--primary); font-size: 16px; }
.button { border: 1px solid transparent; padding: 12px 18px; border-radius: 8px; font-size: 16px; color: var(--primary); background: var(--primary-soft); }
.button.ghost { border-color: #cdbaf5; background: #eee6ff; }
.button.dark { color: white; background: var(--dark); }
.form-layout { display: grid; grid-template-columns: 1.1fr .74fr; gap: 24px; }
.panel { border: 1px solid var(--line); border-radius: 9px; padding: 20px; background: #fdfbff; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab { border: 0; border-radius: 7px; padding: 8px 22px; color: var(--muted); background: #f6f0fc; }
.tab.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.upload-zone { min-height: 320px; display: grid; place-items: center; text-align: center; border: 2px dashed #cdbaf5; background: #faf6ff; }
.upload-icon { width: 130px; height: 170px; border-radius: 9px; display: grid; place-items: center; color: var(--primary); background: #cbb6f3; font-size: 24px; font-weight: 700; }
.upload-zone h3 { margin: 20px 0 9px; }
.upload-zone p { margin: 0; color: var(--muted); font-size: 13px; }
.material-row { display: flex; gap: 12px; margin-top: 18px; }
.material { width: 76px; height: 76px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--primary); background: #f8f4fc; font-size: 13px; }
.material.active { border-color: var(--primary); background: var(--primary-soft); }
.info-panel h2 { margin: 0; font-size: 20px; }
.helper { margin: 8px 0 18px; color: var(--primary); font-size: 13px; }
.field { padding: 13px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8f4fc; }
.field label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.field input { width: 100%; border: 0; outline: 0; padding: 0; color: var(--text); background: transparent; font-size: 15px; }
.matched { margin-top: 22px; padding: 14px; border-radius: 7px; background: var(--primary-soft); color: var(--primary); }
.matched small { display: block; margin-top: 8px; color: var(--muted); }
.filter-bar { display: flex; gap: 14px; align-items: center; padding: 16px 22px; border-radius: 9px; background: #f3edf9; }
.filter-bar b { margin-right: 12px; }
.filter { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; }
.template-layout { display: grid; grid-template-columns: 1fr 318px; gap: 50px; margin-top: 26px; }
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.template-card { padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: white; text-align: left; }
.template-card.selected { border: 2px solid var(--primary); background: var(--primary-pale); }
.image-block { height: 180px; display: grid; place-items: center; border-radius: 8px; background: #f4eff9; }
.bottle { width: 86px; height: 118px; position: relative; border-radius: 34px 34px 22px 22px; border: 4px solid #e9e3dc; background: linear-gradient(90deg,#ded7cd,#fffdf9 45%,#d1c7ba); box-shadow: inset 0 -18px 0 #e6dfd4; }
.bottle::before { content: ""; position: absolute; top: -40px; left: 19px; width: 40px; height: 42px; border-radius: 5px 5px 0 0; background: #6d625d; }
.bottle::after { content: "SANTAL\A 33"; white-space: pre; position: absolute; left: 8px; right: 8px; top: 38px; padding: 10px 4px; background: #ede6dc; color: #443f3d; font-size: 10px; font-weight: 700; text-align: center; }
.template-card h3 { margin: 16px 0 8px; font-size: 18px; }
.template-card p { margin: 0; color: var(--muted); font-size: 14px; }
.selected-template { padding: 24px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.selected-template h2 { margin: 0 0 18px; }
.selected-template .image-block { height: 330px; }
.progress-panel { padding: 22px 24px; border: 1px solid var(--line); border-radius: 9px; background: #f4eff9; }
.progress-header { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; }
.progress-header span { color: var(--primary); }
.progress-track { height: 12px; overflow: hidden; margin: 16px 0 12px; border-radius: 20px; background: #e4d7f9; }
.progress-track i { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--primary); transition: width .4s ease; }
.progress-steps { color: var(--muted); }
.generation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 26px; }
.generation-card { padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.generation-image { height: 200px; border-radius: 8px; display: grid; place-items: center; background: #f3edf9; }
.generation-image.ready { background: #eee8e0; }
.generation-card h3 { margin: 16px 0 0; }
.generation-card p { float: right; margin: -24px 0 0; color: var(--primary); }
.loading { width: 80px; height: 80px; border: 8px solid #dbcdf2; border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
.cover-screen { min-height: 640px; display: grid; place-items: center; text-align: center; }
.cover-screen h1 { margin: 18px 0 14px; font-size: 42px; }
.cover-screen p { margin: 0 0 28px; color: var(--muted); font-size: 17px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.metric-card, .content-card { border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 20px; text-align: left; }
.metric-card span, .content-card p { color: var(--muted); font-size: 14px; }
.metric-card strong { display: block; margin: 12px 0 4px; font-size: 29px; }
.content-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 24px; }
.product-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.product-tile { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; }
.product-tile .image-block { height: 126px; }
.product-tile h3 { margin: 12px 0 4px; font-size: 15px; }
.product-tile p { margin: 0; color: var(--muted); font-size: 13px; }
.quick-actions { display: grid; gap: 12px; }
.quick-actions .button { text-align: left; }
.stage-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.stage-card { min-height: 196px; border: 1px solid var(--line); border-radius: 9px; padding: 20px; background: #fff; text-align: left; color: var(--text); font: inherit; }
.stage-card.active { border: 2px solid var(--primary); background: var(--primary-pale); }
.stage-card b { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 20px; border-radius: 7px; color: var(--primary); background: var(--primary-soft); }
.stage-card h3 { margin: 0 0 8px; font-size: 18px; }
.stage-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
.settings-menu { display: grid; align-content: start; gap: 7px; }
.settings-menu button { border: 0; padding: 12px 14px; border-radius: 8px; color: var(--muted); background: transparent; text-align: left; }
.settings-menu button.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(41, 37, 46, .48); }
.modal-source { position: relative; width: min(720px, calc(100vw - 48px)); aspect-ratio: 720 / 548; overflow: hidden; border-radius: 12px; background: var(--page); box-shadow: 0 22px 52px rgba(41, 37, 46, .28); }
.modal-source img { display: block; width: 100%; height: 100%; }
.modal-hotspot { position: absolute; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.modal-hotspot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hotspot-close { top: 1.8%; right: 3.2%; width: 7%; height: 10%; }
.hotspot-save-done { right: 4.2%; bottom: 4%; width: 14%; height: 11%; }
.hotspot-file-close { right: 0; bottom: 0; width: 15%; height: 14%; }
.hotspot-file-pick { left: 38%; top: 60%; width: 24%; height: 13%; }
.hotspot-file-template { left: 13%; bottom: 9%; width: 25%; height: 9%; }
.hotspot-file-next { right: 3%; bottom: 4%; width: 14%; height: 12%; }
.hotspot-template-standard { left: 5%; top: 24%; width: 90%; height: 15%; }
.hotspot-template-download { right: 4%; bottom: 4%; width: 16%; height: 12%; }
.hotspot-template-cancel { right: 20%; bottom: 4%; width: 15%; height: 12%; }
.modal-card { position: relative; width: min(720px, calc(100vw - 48px)); min-height: 548px; padding: 80px 64px 52px; overflow: hidden; border-radius: 12px; background: var(--page); box-shadow: 0 22px 52px rgba(41, 37, 46, .28); text-align: center; }
.modal-card-close { position: absolute; top: 20px; right: 28px; border: 0; background: transparent; color: var(--muted); font-size: 38px; line-height: 1; }
.success-mark { width: 92px; height: 92px; margin: 0 auto 26px; display: grid; place-items: center; border: 14px solid var(--primary-soft); border-radius: 50%; background: var(--primary); color: white; font-size: 42px; font-weight: 700; }
.modal-card h2 { margin: 0 0 12px; font-size: 30px; }
.modal-card p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.modal-detail { margin-top: 28px; padding: 22px; border-radius: 9px; color: var(--text); background: #f3edf9; font-size: 16px; line-height: 1.6; text-align: left; }
.modal-card-actions { position: absolute; right: 64px; bottom: 42px; display: flex; gap: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) { .main-content { padding: 34px; } .type-grid { gap: 16px; } .template-layout { gap: 24px; } }