:root {
  --bg: #eef4fb;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --primary: #1769e0;
  --primary-dark: #0f3f8e;
  --primary-soft: #e8f1ff;
  --success: #18a058;
  --warning: #f5b642;
  --danger: #df3f40;
  --text: #172033;
  --muted: #667085;
  --line: #dbe4f0;
  --shadow: 0 18px 45px rgba(28, 61, 118, 0.12);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(23, 105, 224, 0.18), transparent 32%),
    linear-gradient(135deg, #f7fbff 0%, var(--bg) 45%, #e9f0f8 100%);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, label:focus-within {
  outline: 3px solid rgba(23, 105, 224, 0.24);
  outline-offset: 2px;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid rgba(219, 228, 240, 0.85);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  color: white; font-weight: 800; letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0f3f8e, #16a4ff);
  box-shadow: 0 10px 24px rgba(23, 105, 224, 0.28);
}
.brand strong { display: block; font-size: 17px; line-height: 1.1; }
.brand small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

.top-actions, .toolbar-actions, .sticky-actions { display: flex; align-items: center; gap: 10px; }
.ghost-btn, .small-btn, .secondary-btn, .primary-btn, .text-btn {
  border: 0; border-radius: 999px; min-height: 40px; padding: 0 16px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ghost-btn { background: #f3f7fc; color: #344054; }
.ghost-btn:hover, .small-btn:hover, .secondary-btn:hover { background: #e8f1ff; }
.primary-btn { min-height: 46px; padding: 0 22px; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--primary), #15a3ff); box-shadow: 0 12px 24px rgba(23, 105, 224, 0.26); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(23, 105, 224, 0.32); }
.secondary-btn { min-height: 46px; padding: 0 18px; color: var(--primary-dark); background: var(--primary-soft); font-weight: 700; }
.compact { min-height: 38px; padding: 0 14px; }
.small-btn { min-height: 34px; padding: 0 12px; color: var(--primary-dark); background: #edf5ff; font-weight: 700; font-size: 13px; }
.text-btn { min-height: 32px; padding: 0 10px; background: transparent; color: var(--primary); }
.text-btn.danger { color: var(--danger); }

.app-shell { display: grid; grid-template-columns: minmax(460px, 42vw) minmax(560px, 1fr); gap: 22px; padding: 22px; height: calc(100vh - 72px); }
.editor-panel, .preview-panel { min-height: 0; border: 1px solid rgba(219, 228, 240, 0.9); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.82); box-shadow: var(--shadow); overflow: hidden; }
.editor-panel { display: flex; flex-direction: column; }
.panel-head, .preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.8)); }
.eyebrow { margin: 0 0 4px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 26px; letter-spacing: -0.04em; }
.preview-toolbar h2 { margin: 0; font-size: 22px; }
.status-pill, .live-dot { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border-radius: 999px; padding: 7px 12px; color: #0f6b3c; background: #e9f8f0; font-weight: 700; font-size: 13px; }
.live-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(24,160,88,.12); }

.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; padding: 16px 22px 0; margin: 0; }
.stepper li { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.stepper span { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #eef2f7; font-size: 12px; }
.stepper .active { color: var(--primary-dark); }
.stepper .active span { color: #fff; background: var(--primary); }

.production-card, .quality-panel {
  margin: 16px 22px 0;
  padding: 14px 16px;
  border: 1px solid rgba(23, 105, 224, .22);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f3f8ff);
  box-shadow: 0 10px 24px rgba(28,61,118,.06);
}
.production-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.production-card strong { color: #102a56; font-size: 15px; }
.production-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.release-badge { flex: 0 0 auto; padding: 7px 11px; border-radius: 999px; color: #0f6b3c; background: #e9f8f0; font-size: 12px; font-weight: 800; }
.quality-panel { display: grid; gap: 8px; border-color: #dbe4f0; background: #fbfdff; }
.quality-panel.is-ok { border-color: rgba(24, 160, 88, .32); background: #f3fbf7; }
.quality-panel.is-warn { border-color: rgba(245, 182, 66, .42); background: #fffaf0; }
.quality-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; color: #102a56; }
.quality-title small { color: var(--muted); font-weight: 700; }
.quality-list { margin: 0; padding-left: 19px; color: #475467; font-size: 13px; }
.quality-list li { margin: 3px 0; }

.manual-form { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 96px; }
.form-card { padding: 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 10px 24px rgba(28,61,118,.06); }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-title-row h2 { margin-bottom: 4px; font-size: 18px; }
.card-title-row p { margin: 0; color: var(--muted); font-size: 13px; }
.required-note { color: var(--muted); font-size: 12px; white-space: nowrap; }

.template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.template-card { position: relative; display: grid; gap: 8px; min-height: 150px; padding: 14px; border: 1.5px solid #dbe4f0; border-radius: 16px; background: #fbfdff; cursor: pointer; transition: border .18s ease, box-shadow .18s ease, transform .18s ease; }
.template-card input { position: absolute; opacity: 0; pointer-events: none; }
.template-card:has(input:checked) { border-color: var(--primary); background: linear-gradient(180deg, #f8fbff, #eaf3ff); box-shadow: 0 12px 26px rgba(23, 105, 224, .16); }
.template-card:hover { transform: translateY(-1px); }
.template-card strong { color: #172033; font-size: 14px; }
.template-card small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.template-icon { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #dbeafe, #60a5fa); position: relative; }
.template-icon::after { content: ""; position: absolute; inset: 12px 9px; border-radius: 4px; border: 2px solid #fff; }
.template-icon.vehicle { background: linear-gradient(135deg, #dbeafe, #2563eb); }
.template-icon.wireless { background: linear-gradient(135deg, #dcfce7, #16a34a); }
.template-icon.ebike { background: linear-gradient(135deg, #fef3c7, #f59e0b); }
.template-icon.asset { background: linear-gradient(135deg, #ede9fe, #7c3aed); }
.template-icon.coldchain { background: linear-gradient(135deg, #cffafe, #0891b2); }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scenario-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 8px 12px; align-items: start; min-height: 110px; padding: 14px; border: 1.5px solid #dbe4f0; border-radius: 16px; background: #fbfdff; cursor: pointer; transition: border .18s ease, box-shadow .18s ease, transform .18s ease; }
.scenario-card input { position: absolute; opacity: 0; pointer-events: none; }
.scenario-card:has(input:checked) { border-color: var(--primary); background: linear-gradient(180deg, #f8fbff, #edf5ff); box-shadow: 0 12px 26px rgba(23, 105, 224, .15); }
.scenario-card:hover { transform: translateY(-1px); }
.scenario-card strong { color: #172033; font-size: 14px; }
.scenario-card small { grid-column: 2; color: var(--muted); line-height: 1.45; font-size: 12px; }
.scenario-icon { grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #0f3f8e; background: #e8f1ff; font-size: 12px; font-weight: 900; }
.scenario-card:has(input:checked) .scenario-icon { color: #fff; background: var(--primary); }
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.style-card { position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 8px 12px; align-items: start; min-height: 118px; padding: 14px; border: 1.5px solid #dbe4f0; border-radius: 16px; background: #fbfdff; cursor: pointer; transition: border .18s ease, box-shadow .18s ease, transform .18s ease; }
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.style-card:has(input:checked) { border-color: var(--primary); background: linear-gradient(180deg, #f8fbff, #edf5ff); box-shadow: 0 12px 26px rgba(23, 105, 224, .15); }
.style-card:hover { transform: translateY(-1px); }
.style-card strong { grid-column: 2 / 4; color: #172033; font-size: 14px; }
.style-card small { grid-column: 2 / 4; color: var(--muted); line-height: 1.45; font-size: 12px; }
.style-card em { grid-column: 3; grid-row: 1; justify-self: end; padding: 3px 8px; border-radius: 999px; color: #0f3f8e; background: #e8f1ff; font-style: normal; font-weight: 800; font-size: 11px; }
.style-swatch { grid-row: 1 / span 3; width: 48px; height: 72px; border-radius: 12px; border: 1px solid #d8e2ee; background: #fff; box-shadow: inset 0 12px 0 #0f3f8e; display: grid; gap: 5px; align-content: end; padding: 9px; }
.style-swatch i { display: block; height: 5px; border-radius: 99px; background: #d8e2ee; }
.style-wiring .style-swatch { box-shadow: inset 0 12px 0 #ea580c; }
.style-quick .style-swatch { box-shadow: inset 0 12px 0 #16a34a; }
.style-asset .style-swatch { box-shadow: inset 0 12px 0 #7c3aed; }
.style-coldchain .style-swatch { box-shadow: inset 0 12px 0 #0891b2; }
.style-start .style-swatch { box-shadow: inset 0 12px 0 #f59e0b; }

.asset-upload-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.compact-upload { min-height: 132px; }
.upload-icon.logo::before { width: 20px; height: 12px; border-radius: 6px; }
.upload-icon.logo::after { display: none; }
.upload-icon.qr::before { width: 20px; height: 20px; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--primary) 0 4px, transparent 4px 8px); }
.upload-icon.qr::after { display: none; }
.cover-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.logo-slot { min-width: 64px; height: 34px; padding: 4px 8px; display: grid; place-items: center; border: 1px solid #d8e2ee; border-radius: 10px; color: var(--muted); background: #f8fbff; font-size: 12px; font-weight: 800; overflow: hidden; }
.logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.service-with-qr { display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: start; }
.qr-slot { width: 92px; height: 92px; border: 1px solid #d8e2ee; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: #f8fbff; font-size: 12px; font-weight: 800; overflow: hidden; }
.qr-slot img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; color: #344054; font-size: 13px; font-weight: 700; }
.field-wide, .field-full { grid-column: 1 / -1; }
.field input, .field textarea, .repeat-input, .param-input { width: 100%; border: 1px solid #d7e1ee; border-radius: 12px; padding: 11px 12px; color: var(--text); background: #fbfdff; min-height: 44px; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .repeat-input:focus, .param-input:focus { border-color: rgba(23,105,224,.55); background: #fff; box-shadow: 0 0 0 4px rgba(23,105,224,.08); outline: 0; }

.upload-zone { display: grid; place-items: center; gap: 6px; min-height: 132px; border: 1.5px dashed #9fc1ee; border-radius: 18px; color: var(--primary-dark); background: linear-gradient(180deg, #f8fbff, #eef6ff); text-align: center; cursor: pointer; }
.upload-zone input { position: absolute; opacity: 0; pointer-events: none; }
.upload-icon { width: 44px; height: 44px; border-radius: 16px; background: var(--primary-soft); position: relative; }
.upload-icon::before, .upload-icon::after { content: ""; position: absolute; background: var(--primary); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.upload-icon::before { width: 18px; height: 3px; border-radius: 3px; }
.upload-icon::after { width: 3px; height: 18px; border-radius: 3px; }
.upload-zone small { color: var(--muted); }
.image-preview-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); }
.image-preview-line img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); }

.switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.switch-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; }
.switch-copy strong { display: block; font-size: 14px; }
.switch-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #d0d9e6; transition: background .18s ease; }
.switch span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.18); transition: transform .18s ease; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(20px); }

.dynamic-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fbfdff; }
.dynamic-row { display: grid; grid-template-columns: 1fr 1fr 76px; gap: 8px; align-items: center; padding: 10px; border-top: 1px solid var(--line); }
.dynamic-row:first-child { border-top: 0; }
.dynamic-head { color: var(--muted); background: #f1f6fc; font-weight: 800; font-size: 13px; }
.param-input { min-height: 38px; padding: 8px 10px; }
.icon-btn { min-width: 38px; min-height: 38px; border: 0; border-radius: 10px; color: var(--danger); background: #fff1f1; font-weight: 900; }

.module { border: 1px solid var(--line); border-radius: 14px; margin-top: 10px; background: #fbfdff; overflow: hidden; }
.module summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; color: #25324a; font-weight: 800; cursor: pointer; }
.module summary::-webkit-details-marker { display: none; }
.module summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); transition: transform .18s ease; }
.module[open] summary::before { transform: rotate(45deg); }
.module summary .inline { margin-left: auto; }
.repeat-list { display: grid; gap: 10px; padding: 0 14px 14px; }
.repeat-row { display: grid; grid-template-columns: 1fr 42px; gap: 8px; align-items: center; }
.v2-card { border-color: rgba(23, 105, 224, .28); background: linear-gradient(180deg, #ffffff, #f8fbff); }
.placeholder-help { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; margin-bottom: 14px; }
.placeholder-help strong { display: block; margin-bottom: 10px; color: #102a56; }
.placeholder-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.placeholder-tag { border: 1px solid #bfdbfe; border-radius: 999px; padding: 6px 10px; color: var(--primary-dark); background: #eff6ff; font-size: 12px; font-weight: 800; cursor: pointer; }
#enterpriseTemplate { min-height: 220px; font-family: "Cascadia Mono", Consolas, "Microsoft YaHei", monospace; font-size: 13px; line-height: 1.65; }
.template-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.docx-future-box { padding: 14px; border: 1px dashed #9fc1ee; border-radius: 14px; background: #f2f7ff; color: #344054; }
.docx-future-box p { margin: 6px 0 12px; color: var(--muted); font-size: 13px; }
.fake-file-zone { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 999px; color: var(--primary-dark); background: #e8f1ff; font-weight: 800; cursor: pointer; }
.fake-file-zone input { position: absolute; opacity: 0; pointer-events: none; }
.docx-future-box small { display: block; margin-top: 8px; color: var(--muted); }
.enterprise-output { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; overflow: hidden; }
.enterprise-output summary { padding: 12px 14px; cursor: pointer; font-weight: 800; color: #102a56; }
.enterprise-output pre { margin: 0; padding: 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--line); color: #344054; font-family: var(--font); font-size: 13px; line-height: 1.65; }
.sticky-actions { position: sticky; bottom: 0; z-index: 2; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); }

.preview-panel { display: flex; flex-direction: column; }
.preview-stage { flex: 1; min-height: 0; overflow: auto; padding: 28px; display: grid; justify-content: center; gap: 28px; align-content: start; background: linear-gradient(90deg, rgba(23,105,224,.05) 1px, transparent 1px), linear-gradient(rgba(23,105,224,.05) 1px, transparent 1px), #e9eff7; background-size: 28px 28px; }
.a4-page { position: relative; width: min(100%, 794px); min-height: 1123px; padding: 42px 46px 34px; color: #1f2937; background: #fff; box-shadow: 0 28px 70px rgba(23, 37, 84, 0.2); transform-origin: top center; display: flex; flex-direction: column; }
.page-label { position: absolute; right: 18px; top: -16px; padding: 5px 10px; border-radius: 999px; color: #475467; background: #fff; border: 1px solid var(--line); font-size: 12px; box-shadow: 0 8px 20px rgba(23,37,84,.1); }
.manual-cover, .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 3px solid var(--primary-dark); }
.page-header { align-items: center; color: #102a56; }
.page-header strong { font-size: 22px; }
.page-header span { color: var(--muted); font-weight: 700; }
.manual-brand { margin: 0 0 6px; color: var(--primary); font-weight: 900; letter-spacing: .12em; }
.manual-cover h2 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.04em; }
.manual-subtitle { margin: 8px 0 0; color: var(--muted); font-weight: 700; }
.manual-badge { padding: 8px 12px; border-radius: 999px; color: #0f3f8e; background: #e8f1ff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.manual-hero { display: grid; grid-template-columns: 280px 1fr; gap: 26px; padding: 26px 0; }
.product-visual { min-height: 220px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #f4f8fd, #e8f1fb); border: 1px solid #dce7f4; }
.product-visual img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.placeholder-machine { width: 158px; height: 130px; border-radius: 24px; position: relative; background: linear-gradient(160deg, #d9e8f8, #87afe0); box-shadow: inset 0 -16px 0 rgba(15,63,142,.13); }
.placeholder-machine span:nth-child(1) { position: absolute; inset: 24px 26px auto; height: 42px; border-radius: 14px; background: repeating-linear-gradient(90deg, #fff 0 7px, #c9dcf3 7px 13px); }
.placeholder-machine span:nth-child(2), .placeholder-machine span:nth-child(3) { position: absolute; bottom: 18px; width: 24px; height: 24px; border-radius: 50%; background: #1f3b64; }
.placeholder-machine span:nth-child(2) { left: 30px; } .placeholder-machine span:nth-child(3) { right: 30px; }
.manual-summary h3, .manual-section h3 { margin: 0 0 10px; color: #102a56; font-size: 17px; }
.manual-summary p { color: #475467; }
.manual-summary dl { display: grid; gap: 9px; margin: 16px 0 0; }
.manual-summary dl div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #f5f8fc; }
dt { color: var(--muted); font-weight: 800; } dd { margin: 0; }
.manual-section { margin-top: 18px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.spec-item { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #f5f8fc; border: 1px solid #e1e9f3; }
.spec-item b { color: #475467; }
.manual-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.manual-table td { border: 1px solid #d8e2ee; padding: 9px 12px; }
.manual-table td:first-child { width: 34%; color: #344054; background: #f5f8fc; font-weight: 800; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.manual-list { margin: 0; padding-left: 20px; color: #344054; }
.manual-list li { margin: 6px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.compact-list li { margin: 4px 0; }
.scenario-print-block { padding: 12px 14px; border: 1px solid var(--manual-border, #dbe4f0); border-radius: 16px; background: var(--manual-surface, #f8fbff); }
.scenario-print-block h3 { margin-bottom: 6px; font-size: 15px; }
.scenario-print-block .manual-list { font-size: 13px; }
.notice-box { padding: 15px 18px; border: 1px solid #f2d28c; border-radius: 16px; background: #fff9e8; }
.bottom-blocks { padding-bottom: 20px; }
.service-copy, .warranty-line { margin: 0 0 8px; color: #475467; }
.manual-footer { margin-top: auto; display: flex; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid #d8e2ee; color: var(--muted); font-size: 12px; }
.preview-module.is-hidden { display: none !important; }
.a4-page.style-classic { --manual-accent: #0f3f8e; --manual-soft: #e8f1ff; --manual-surface: #f5f8fc; --manual-border: #b9ccec; }
.a4-page.style-wiring { --manual-accent: #c2410c; --manual-soft: #fff1e8; --manual-surface: #fff7ed; --manual-border: #f1b28d; }
.a4-page.style-quick { --manual-accent: #15803d; --manual-soft: #e9f8f0; --manual-surface: #f0fdf4; --manual-border: #a9d8ba; }
.a4-page.style-asset { --manual-accent: #6d28d9; --manual-soft: #f1edff; --manual-surface: #faf7ff; --manual-border: #c8b9ef; }
.a4-page.style-coldchain { --manual-accent: #0e7490; --manual-soft: #e6fbff; --manual-surface: #f0fdff; --manual-border: #a9dce7; }
.a4-page.style-start { --manual-accent: #b45309; --manual-soft: #fff7dc; --manual-surface: #fffaf0; --manual-border: #edd38a; }
.a4-page.style-wiring, .a4-page.style-asset { background-image: linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px); background-size: 18px 18px; }
.a4-page.style-quick .manual-hero, .a4-page.style-start .manual-hero { border: 1px solid var(--manual-soft); border-radius: 22px; padding: 22px; margin-top: 18px; background: linear-gradient(135deg, #fff, var(--manual-surface)); }
.a4-page.style-coldchain .notice-box { border-color: rgba(14,116,144,.28); background: linear-gradient(135deg, #fff, var(--manual-soft)); }
.a4-page.style-start .feature-grid { grid-template-columns: 1fr; }
.a4-page.style-start .manual-section h3::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 999px; color: #fff; background: var(--manual-accent); font-size: 12px; }
.a4-page[class*="style-"] .manual-cover, .a4-page[class*="style-"] .page-header { border-bottom-color: var(--manual-accent); }
.a4-page[class*="style-"] .page-header, .a4-page[class*="style-"] .manual-summary h3, .a4-page[class*="style-"] .manual-section h3 { color: var(--manual-accent); }
.a4-page[class*="style-"] .manual-brand, .a4-page[class*="style-"] .manual-badge { color: var(--manual-accent); }
.a4-page[class*="style-"] .manual-badge, .a4-page[class*="style-"] .manual-summary dl div, .a4-page[class*="style-"] .spec-item, .a4-page[class*="style-"] .manual-table td:first-child { background: var(--manual-surface); }
.a4-page[class*="style-"] .product-visual { background: linear-gradient(145deg, #fff, var(--manual-soft)); border-color: var(--manual-border); }
.a4-page[class*="style-"] .manual-footer { border-top-color: var(--manual-border); }

.history-drawer { position: fixed; inset: 0; z-index: 45; display: flex; justify-content: flex-end; background: rgba(15, 23, 42, .34); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.history-drawer.open { opacity: 1; pointer-events: auto; }
.history-panel { width: min(520px, 100%); height: 100%; padding: 22px; overflow-y: auto; background: #fff; box-shadow: -24px 0 55px rgba(15, 23, 42, .18); transform: translateX(24px); transition: transform .2s ease; }
.history-drawer.open .history-panel { transform: translateX(0); }
.history-head, .history-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.history-head h2 { margin: 0; font-size: 22px; }
.drawer-note { display: block; max-width: 360px; margin-top: 6px; color: var(--muted); line-height: 1.45; }
.history-section { margin-top: 20px; }
.history-title-row h3 { margin: 0; font-size: 16px; color: #102a56; }
.history-list { display: grid; gap: 10px; margin-top: 12px; }
.history-item { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; }
.history-item strong { color: #172033; }
.history-item small { color: var(--muted); }
.history-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.empty-state { padding: 16px; border: 1px dashed #cbd5e1; border-radius: 14px; color: var(--muted); background: #f8fbff; text-align: center; }
.admin-panel { width: min(640px, 100%); }
.admin-section { padding-bottom: 4px; }
.admin-token-row { display: grid; gap: 8px; margin-top: 12px; color: #344054; font-weight: 700; }
.admin-token-row input { min-height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; color: #172033; background: #fff; }
.admin-stats { display: grid; gap: 10px; margin-top: 12px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-stat-card { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; }
.admin-stat-card strong { display: block; font-size: 20px; color: #102a56; }
.admin-stat-card small { color: var(--muted); }
.audit-list .history-item code { display: inline-block; max-width: 100%; padding: 2px 6px; border-radius: 8px; background: #eef4ff; color: #0f3f8e; white-space: normal; word-break: break-all; }
.danger-zone { padding: 14px; border: 1px solid rgba(208, 66, 66, .22); border-radius: 16px; background: #fff8f7; }
.admin-restore-zone { margin-top: 12px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 999px; color: #fff; background: #172033; box-shadow: 0 18px 36px rgba(0,0,0,.18); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1280px) { .template-grid, .scenario-grid, .asset-upload-grid { grid-template-columns: 1fr; } }
@media (max-width: 1180px) { .app-shell { grid-template-columns: 1fr; height: auto; } .editor-panel, .preview-panel { overflow: visible; } .manual-form { overflow: visible; } }
@media (max-width: 720px) {
  .app-header { height: auto; min-height: 68px; padding: 12px 16px; align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; overflow-x: auto; }
  .app-shell { padding: 12px; }
  .panel-head, .preview-toolbar { flex-direction: column; align-items: flex-start; }
  .toolbar-actions { flex-wrap: wrap; }
  .production-card { flex-direction: column; align-items: flex-start; }
  .field-grid, .two-col, .manual-hero, .spec-grid, .feature-grid, .switch-grid, .asset-upload-grid, .service-with-qr { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
  .dynamic-row { grid-template-columns: 1fr; }
  .dynamic-head { display: none; }
  .a4-page { min-height: auto; padding: 26px 22px; }
  .manual-cover, .manual-footer { flex-direction: column; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  .app-header, .editor-panel, .preview-toolbar, .toast, .page-label, .history-drawer, .production-card, .quality-panel { display: none !important; }
  .app-shell, .preview-panel, .preview-stage { display: block; height: auto; padding: 0; border: 0; background: #fff; box-shadow: none; overflow: visible; }
  .a4-page { width: auto; min-height: calc(297mm - 24mm); padding: 0; margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
  .a4-page:last-child { page-break-after: auto; break-after: auto; }
  .manual-section, .manual-hero, .notice-box, .spec-grid { break-inside: avoid; }
}