:root {
  --ink: #172f2b;
  --ink-soft: #39534d;
  --muted: #75847e;
  --line: #dfe8e3;
  --line-dark: #cbd9d2;
  --paper: #fbfdfb;
  --paper-warm: #f5f8f4;
  --panel: #ffffff;
  --green: #1e5b50;
  --green-2: #2c7869;
  --green-soft: #e7f2ed;
  --green-pale: #f0f8f3;
  --orange: #c97932;
  --orange-soft: #fff3e6;
  --red: #bd4f55;
  --red-soft: #fff0f0;
  --blue: #4176a3;
  --blue-soft: #edf5fb;
  --shadow: 0 14px 35px rgba(33, 73, 61, .08);
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar: 244px;
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper-warm); color: var(--ink); }
body { font-size: 14px; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); flex: 0 0 var(--sidebar); background: #123f39; color: #e6f3ed; padding: 25px 15px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand-lockup { display: flex; gap: 11px; align-items: center; padding: 0 10px 22px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: #e6f1e8; color: #185248; display: grid; place-items: center; font-weight: 800; font-size: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.brand-name { font-weight: 750; letter-spacing: .02em; font-size: 15px; }
.brand-subtitle { color: #95b8aa; font-size: 11px; margin-top: 1px; }
.sidebar-note { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); color: #bad6ca; border-radius: 10px; padding: 8px 10px; margin: 0 5px 24px; font-size: 11px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #63c7a5; box-shadow: 0 0 0 3px rgba(99,199,165,.13); }
.status-dot.is-warn { background: #e7ad62; box-shadow: 0 0 0 3px rgba(231,173,98,.13); }
.nav-stack { display: flex; flex-direction: column; gap: 3px; }
.nav-section-label { color: #7fa99a; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 0 13px; margin: 8px 0 6px; }
.nav-item { color: #b7d2c7; background: transparent; border: 0; border-radius: 10px; min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 11px; text-align: left; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(1px); }
.nav-item.is-active { background: #e6f1e8; color: #175349; font-weight: 700; box-shadow: 0 5px 18px rgba(0,0,0,.08); }
.nav-icon { width: 20px; text-align: center; font-size: 18px; opacity: .86; }
.nav-count { margin-left: auto; color: #8eb9aa; background: rgba(255,255,255,.06); min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; font-size: 10px; }
.nav-item.is-active .nav-count { background: #cfe6da; color: #246254; }
.sidebar-footer { margin-top: auto; padding: 0 5px; }
.policy-mini { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055); border-radius: 12px; padding: 12px; }
.policy-mini-title { font-size: 12px; font-weight: 700; color: #e5f4eb; }
.shield-icon { color: #74d1aa; margin-right: 5px; }
.policy-mini p { font-size: 11px; line-height: 1.6; color: #91b4a7; margin: 6px 0 0; }
.version-line { color: #70988c; font-size: 9px; letter-spacing: .12em; margin: 16px 4px 0; }

.main-shell { min-width: 0; flex: 1; }
.topbar { height: 70px; padding: 0 33px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.breadcrumb { color: var(--muted); display: flex; align-items: center; gap: 9px; font-size: 12px; }
.breadcrumb strong { color: var(--ink); font-size: 13px; }
.breadcrumb-sep { color: #b5c3bd; }
.topbar-actions { display: flex; gap: 18px; align-items: center; }
.system-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.role-picker { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.role-picker select { border: 0; background: transparent; color: var(--ink); font-weight: 700; outline: 0; padding: 4px 2px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #dfeee6; color: #1f6254; display: grid; place-items: center; font-size: 12px; font-weight: 750; }
.page-content { max-width: 1550px; margin: 0 auto; padding: 31px 35px 65px; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.eyebrow { color: var(--green-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.page-title { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -.03em; color: #163d36; }
.page-description { margin: 8px 0 0; color: var(--muted); max-width: 730px; font-size: 13px; }
.heading-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.button { border: 1px solid transparent; border-radius: 9px; min-height: 37px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 12px; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--green); color: #fff; box-shadow: 0 6px 13px rgba(30,91,80,.15); }
.button.primary:hover { background: #154c43; box-shadow: 0 9px 18px rgba(30,91,80,.2); }
.button.secondary { background: #fff; border-color: var(--line-dark); color: var(--ink-soft); }
.button.secondary:hover { background: var(--green-pale); border-color: #b7d0c5; }
.button.ghost { background: transparent; color: var(--green-2); padding: 0 7px; min-height: 31px; }
.button.danger { color: var(--red); background: var(--red-soft); border-color: #f1d1d2; }
.button:disabled { cursor: not-allowed; opacity: .46; transform: none; box-shadow: none; }
.button.small { min-height: 30px; padding: 0 10px; font-size: 11px; }

.hero-panel { position: relative; overflow: hidden; border-radius: 20px; padding: 27px 30px; min-height: 150px; background: linear-gradient(120deg, #e3f2ea 0%, #f1f8f1 50%, #fff9ee 100%); border: 1px solid #d6e8dc; margin-bottom: 22px; }
.hero-panel:after { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; right: 6%; top: -120px; border: 1px solid rgba(52,114,93,.12); box-shadow: 0 0 0 25px rgba(52,114,93,.035), 0 0 0 52px rgba(52,114,93,.025); }
.hero-content { position: relative; z-index: 1; max-width: 760px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; color: #327766; font-weight: 800; font-size: 11px; letter-spacing: .08em; margin-bottom: 8px; }
.hero-kicker .status-dot { width: 6px; height: 6px; }
.hero-title { margin: 0; font-size: 24px; letter-spacing: -.035em; color: #173f37; }
.hero-subtitle { color: #537267; margin: 8px 0 0; font-size: 13px; max-width: 690px; }
.hero-badge { position: absolute; right: 31px; bottom: 27px; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; border: 1px solid rgba(38,103,84,.14); background: rgba(255,255,255,.64); color: #387665; font-size: 11px; font-weight: 700; }

.search-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 21px; }
.search-line { display: flex; gap: 9px; align-items: center; }
.search-input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #cadbd3; border-radius: 10px; min-height: 45px; background: #fbfefc; }
.search-input-wrap:focus-within { border-color: #68a28f; box-shadow: 0 0 0 3px rgba(75,150,125,.1); }
.search-glyph { color: var(--green-2); font-size: 22px; line-height: 1; }
.search-input { border: 0; outline: 0; flex: 1; min-width: 0; color: var(--ink); background: transparent; font-size: 13px; }
.search-input::placeholder { color: #a8b8b0; }
.search-note { display: flex; align-items: center; gap: 6px; color: #7f948a; font-size: 11px; margin: 9px 4px 0; }
.info-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-grid; place-items: center; background: #e3f1eb; color: #3c806e; font-size: 10px; font-weight: 800; }
.quick-keywords { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.keyword-button { border: 1px solid #d6e7dd; border-radius: 999px; background: #f5faf7; color: #397765; padding: 4px 10px; font-size: 11px; }
.keyword-button:hover { background: #e6f3eb; border-color: #afd2bf; }
.search-summary { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.search-summary strong { color: var(--green); font-size: 20px; margin-right: 3px; }
.search-summary span { color: #8a9a92; }
.filter-row { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.filter-label { color: var(--muted); font-size: 11px; margin-right: 2px; }
.filter-select { border: 1px solid var(--line); color: var(--ink-soft); background: #fff; border-radius: 8px; min-height: 31px; padding: 0 10px; outline: none; font-size: 11px; }
.filter-select:focus { border-color: #75ad9a; }
.pending-toggle { margin-left: auto; display: flex; align-items: center; gap: 7px; color: #73847c; font-size: 11px; }
.toggle { position: relative; width: 30px; height: 18px; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #d9e3de; border-radius: 20px; transition: .2s; cursor: pointer; }
.toggle-slider:before { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.14); transition: .2s; }
.toggle input:checked + .toggle-slider { background: #4b907d; }
.toggle input:checked + .toggle-slider:before { transform: translateX(12px); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 22px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; display: flex; justify-content: space-between; align-items: flex-start; min-height: 91px; }
.stat-label { color: var(--muted); font-size: 11px; }
.stat-value { font-size: 25px; line-height: 1; margin-top: 8px; font-weight: 750; letter-spacing: -.04em; color: #1b453d; }
.stat-meta { color: #91a19a; font-size: 10px; margin-top: 6px; }
.stat-icon { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: var(--green-soft); color: #377965; font-size: 16px; }
.stat-card.orange .stat-icon { background: var(--orange-soft); color: var(--orange); }
.stat-card.red .stat-icon { background: var(--red-soft); color: var(--red); }
.stat-card.blue .stat-icon { background: var(--blue-soft); color: var(--blue); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(310px, .9fr); gap: 20px; align-items: start; }
.section-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.section-card.shadow { box-shadow: var(--shadow); }
.card-header { min-height: 57px; padding: 14px 17px; border-bottom: 1px solid #edf2ef; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title { font-size: 14px; font-weight: 750; color: #1d443c; }
.card-caption { color: var(--muted); font-size: 11px; margin-top: 2px; }
.card-header-actions { display: flex; gap: 8px; align-items: center; }
.card-body { padding: 17px; }
.empty-state { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #f0f5f2; color: #8aa098; font-size: 21px; margin: 0 auto 12px; }
.empty-state strong { display: block; color: var(--ink-soft); font-size: 13px; margin-bottom: 4px; }
.empty-state p { margin: 0 auto; max-width: 360px; font-size: 11px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid #e6ddd0; background: #fff9ef; color: #795c3a; font-size: 11px; margin-bottom: 14px; }
.notice.green { background: var(--green-pale); border-color: #d5e9dc; color: #39705e; }
.notice.red { background: var(--red-soft); border-color: #f0d4d4; color: #8e484d; }
.notice.blue { background: var(--blue-soft); border-color: #dceaf4; color: #4b6d86; }
.notice-icon { font-size: 16px; line-height: 1.3; }

.product-card { border: 1px solid #e2ebe6; border-radius: 13px; padding: 15px; margin-bottom: 11px; transition: border .18s, box-shadow .18s; }
.product-card:hover { border-color: #b5d3c5; box-shadow: 0 8px 22px rgba(35,95,72,.06); }
.product-card.is-selected { border-color: #4f9a7f; box-shadow: 0 0 0 3px rgba(79,154,127,.12); background: #fbfffc; }
.product-card:last-child { margin-bottom: 0; }
.product-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.product-title-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.product-name { font-weight: 780; color: #214d42; font-size: 14px; }
.product-spec { color: #81928a; font-size: 11px; }
.sku-line { color: #a0ada6; font-size: 10px; margin-top: 5px; }
.price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: #c16c2e; }
.price-block strong { font-size: 17px; line-height: 1.1; }
.price-block span { color: #a28d79; font-size: 9px; }
.price-block del, .selected-price del { color: #a28d79; font-size: 10px; font-weight: 500; }
.chip { display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 700; line-height: 1.55; border: 1px solid transparent; }
.chip.green { background: #e8f4ed; color: #30715d; border-color: #d4e9dd; }
.chip.orange { background: #fff2e5; color: #a96028; border-color: #f1dfc9; }
.chip.gray { background: #f1f4f2; color: #778780; border-color: #e4eae7; }
.chip.red { background: #fff0f0; color: #a44d51; border-color: #f1d7d7; }
.chip.blue { background: #edf5fb; color: #467395; border-color: #dceaf3; }
.score-block { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.score-ring { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#4e977e calc(var(--score) * 1%), #eaf1ed 0); position: relative; }
.score-ring:after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.score-ring strong { position: relative; z-index: 1; font-size: 10px; color: #2c6757; }
.score-label { color: #82938a; font-size: 10px; text-align: right; }
.product-meta { display: flex; flex-wrap: wrap; gap: 7px 15px; color: #667970; font-size: 11px; margin: 11px 0 10px; }
.meta-item { display: inline-flex; gap: 4px; align-items: center; }
.meta-item b { color: #49645b; font-weight: 700; }
.product-reason { color: #637b70; background: #f6faf7; border-radius: 8px; padding: 8px 10px; font-size: 11px; }
.product-reason .reason-label { color: #4d8b73; font-weight: 700; margin-right: 5px; }
.internal-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.internal-tags-label { color: #ae7b45; font-size: 10px; }
.internal-tag { color: #9b6d37; background: #fff8eb; border: 1px solid #f2dfc0; border-radius: 4px; padding: 2px 6px; font-size: 10px; }
.knowledge-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 10px; color: #a27b4b; font-size: 10px; }
.product-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.link-state { font-size: 10px; color: #9c9c7d; margin-left: auto; }
.link-state.ready { color: #44836d; }

.script-card { border: 1px solid #e4ece8; border-radius: 11px; padding: 12px; margin-bottom: 10px; background: #fcfefd; }
.script-card:last-child { margin-bottom: 0; }
.script-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.script-name { font-size: 11px; font-weight: 750; color: #38685b; }
.script-body { margin: 0; color: #435e54; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.script-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.script-safe { color: #549176; font-size: 10px; }
.copy-button { border: 1px solid #cbe1d6; border-radius: 7px; background: #eff8f2; color: #31735f; min-height: 27px; padding: 0 10px; font-size: 10px; font-weight: 700; }
.copy-button:hover { background: #dcefe4; }
.copy-button:disabled { opacity: .5; cursor: not-allowed; }
.selected-product-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #edf2ef; }
.selected-product-head h3 { margin: 0; color: #204b40; font-size: 18px; }
.selected-spec { color: #82938a; font-size: 11px; margin-top: 4px; }
.selected-price { color: #c16c2e; font-size: 20px; font-weight: 800; text-align: right; white-space: nowrap; }
.selected-price span { display: block; color: #9c8a78; font-size: 9px; font-weight: 500; }
.selected-meta { display: flex; flex-wrap: wrap; gap: 7px 15px; padding: 12px 0; color: #667970; font-size: 11px; border-bottom: 1px solid #edf2ef; }
.selected-meta span { display: inline-flex; gap: 4px; }
.selected-meta b { color: #49645b; }
.detail-title { color: #2b584a; font-size: 12px; font-weight: 800; margin-bottom: 9px; }
.reply-section { padding: 14px 0 5px; }
.reply-option { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border: 1px solid #e3eee7; border-radius: 10px; background: #fbfefc; padding: 10px; margin-bottom: 8px; }
.reply-option > div { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.reply-option p { margin: 0; color: #435e54; font-size: 12px; line-height: 1.7; }
.reply-index { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border-radius: 50%; color: #31735f; background: #e5f2ea; font-size: 10px; font-weight: 800; }
.pairing-title { padding-top: 12px; }
.knowledge-list { display: flex; flex-direction: column; gap: 9px; }
.knowledge-card { border: 1px solid #e5eee8; border-radius: 10px; padding: 10px; background: #fff; }
.knowledge-card-title { color: #315f50; font-size: 12px; font-weight: 750; display: flex; justify-content: space-between; gap: 7px; align-items: center; }
.knowledge-ingredients { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 6px; }
.knowledge-ingredients span { color: #5b786b; background: #f2f8f4; border: 1px solid #dfebe3; border-radius: 5px; padding: 2px 6px; font-size: 10px; }
.knowledge-card ol { margin: 0 0 5px 16px; padding: 0; color: #71847a; font-size: 10px; line-height: 1.7; }
.knowledge-source, .source-footnote { color: #7e9d8d; font-size: 10px; text-decoration: none; }
.knowledge-source:hover, .source-footnote a:hover { text-decoration: underline; }
.source-footnote { margin-top: 12px; line-height: 1.6; }
.selected-detail-actions { padding: 10px 0 2px; }
.knowledge-editor-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; margin-bottom: 13px; border: 1px solid #dcebe2; border-radius: 11px; background: #f7fcf8; }
.knowledge-editor-summary h4 { margin: 2px 0 4px; color: #244f43; font-size: 15px; }
.knowledge-editor-summary p { margin: 0; color: #7d9186; font-size: 10px; line-height: 1.5; }
.knowledge-editor-section { margin-top: 17px; padding-top: 15px; border-top: 1px solid #e6efe9; }
.knowledge-editor-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.knowledge-edit-pairing { padding: 12px; border: 1px solid #e1ece5; border-radius: 11px; background: #fbfefc; margin-bottom: 10px; }
.knowledge-edit-pairing-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #315f50; font-size: 11px; }
.knowledge-long-field { min-height: 170px; }
.knowledge-medium-field { min-height: 96px; }
.knowledge-step-field { min-height: 105px; }
.knowledge-sources-field { min-height: 125px; }

.table-shell { overflow-x: auto; }
.data-table { border-collapse: collapse; min-width: 900px; width: 100%; }
.data-table th { text-align: left; color: #7a8a83; font-size: 10px; letter-spacing: .04em; font-weight: 750; background: #f7faf8; border-bottom: 1px solid var(--line); padding: 11px 13px; white-space: nowrap; }
.data-table td { border-bottom: 1px solid #edf2ef; padding: 12px 13px; color: #4a6258; font-size: 11px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfdfb; }
.table-primary { font-weight: 750; color: #224c42; }
.table-secondary { color: #8a9a92; font-size: 10px; margin-top: 2px; }
.table-actions { display: flex; gap: 5px; align-items: center; }
.nowrap { white-space: nowrap; }

.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.module-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.module-card .card-body { min-height: 125px; }
.module-kicker { color: var(--green-2); font-size: 10px; letter-spacing: .08em; font-weight: 800; }
.module-number { font-size: 29px; line-height: 1; color: #214c41; font-weight: 780; margin: 10px 0 5px; }
.module-copy { color: var(--muted); font-size: 11px; }

.recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.recipe-card { border: 1px solid #e1ebe5; border-radius: 12px; padding: 14px; background: #fff; }
.recipe-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.recipe-name { font-weight: 780; color: #274d42; font-size: 13px; }
.recipe-subtitle { color: #9c7f57; font-size: 10px; margin-top: 2px; }
.recipe-ingredients { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0 11px; }
.ingredient { color: #567567; background: #f3f8f4; border: 1px solid #dfebe2; padding: 3px 7px; border-radius: 5px; font-size: 10px; }
.recipe-note { background: #fff8ed; color: #8d704a; border-radius: 7px; padding: 8px; font-size: 10px; line-height: 1.55; min-height: 43px; }
.recipe-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.recipe-meta { color: #92a097; font-size: 10px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 17px; }
.tab { border: 0; background: transparent; color: #82918a; font-size: 11px; padding: 12px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.is-active { color: var(--green); font-weight: 750; border-bottom-color: var(--green); }
.split-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 18px; }
.list-panel { border: 1px solid var(--line); background: #fff; border-radius: 13px; overflow: hidden; }
.list-row { border-bottom: 1px solid #edf2ef; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover, .list-row.is-selected { background: #f3faf5; }
.list-row-title { color: #2d574b; font-size: 12px; font-weight: 700; }
.list-row-sub { color: #97a59e; font-size: 10px; margin-top: 2px; }
.list-row-badge { color: #8a9a91; font-size: 10px; white-space: nowrap; }
.editor-panel { border: 1px solid var(--line); border-radius: 13px; background: #fff; overflow: hidden; }
.editor-head { padding: 14px 16px; background: #f7faf8; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.editor-title { font-weight: 750; color: #294f44; }
.field-group { margin-bottom: 13px; }
.field-label { display: block; color: #62756b; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.field-help { color: #9aa9a2; font-size: 10px; margin-top: 4px; }
.text-field, .select-field { width: 100%; border: 1px solid #d8e3dd; border-radius: 8px; background: #fbfdfb; color: var(--ink); outline: none; padding: 9px 10px; font-size: 12px; }
.text-field:focus, .select-field:focus { border-color: #70aa96; box-shadow: 0 0 0 3px rgba(75,150,125,.09); }
textarea.text-field { min-height: 145px; resize: vertical; line-height: 1.75; }
.editor-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 7px; }
.scan-result { padding: 10px; border-radius: 8px; background: var(--green-pale); color: #3b715e; font-size: 11px; margin-bottom: 12px; }
.scan-result.blocked { background: var(--red-soft); color: #945056; }
.risk-hit-list { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.risk-hit { display: flex; gap: 7px; align-items: flex-start; color: #8b575a; font-size: 10px; }
.risk-hit b { color: #a3454c; }

.chart-bars { display: flex; flex-direction: column; gap: 12px; }
.chart-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 45px; gap: 9px; align-items: center; color: #6b7e74; font-size: 11px; }
.chart-track { height: 9px; background: #edf3ef; border-radius: 6px; overflow: hidden; }
.chart-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #62a88f, #277360); }
.chart-fill.orange { background: linear-gradient(90deg, #e8b978, #c87931); }
.chart-fill.red { background: linear-gradient(90deg, #e9908f, #b95054); }
.chart-fill.blue { background: linear-gradient(90deg, #8eb5d2, #4b7ca2); }
.big-empty { min-height: 350px; display: grid; place-items: center; text-align: center; }

.callout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.callout { border-radius: 12px; padding: 15px; border: 1px solid var(--line); background: #fff; }
.callout h4 { margin: 0 0 5px; font-size: 12px; color: #2b5549; }
.callout p { margin: 0; color: #7b8d84; font-size: 11px; line-height: 1.65; }
.callout.green { background: var(--green-pale); border-color: #d8eadf; }
.callout.orange { background: #fff8ec; border-color: #f1e0c8; }
.callout.blue { background: var(--blue-soft); border-color: #dceaf3; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(16,47,40,.34); z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal { width: min(680px, 100%); max-height: 90vh; overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 25px 80px rgba(17,50,42,.22); }
.modal.wide { width: min(980px, 100%); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 19px 21px; border-bottom: 1px solid var(--line); }
.modal-title { margin: 0; font-size: 16px; color: #214b40; }
.modal-subtitle { color: var(--muted); margin: 4px 0 0; font-size: 11px; }
.modal-close { width: 28px; height: 28px; border-radius: 7px; border: 0; color: #7c9187; background: #f2f6f3; }
.modal-body { padding: 20px 21px; }
.modal-footer { padding: 14px 21px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.import-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 15px; }
.import-stat { border: 1px solid var(--line); border-radius: 9px; padding: 9px; background: #f8fbf9; }
.import-stat b { display: block; font-size: 18px; color: #215548; }
.import-stat span { font-size: 10px; color: #83948b; }
.preview-table { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
.preview-table .data-table { min-width: 760px; }

.toast-root { position: fixed; right: 24px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { max-width: 390px; border-radius: 9px; padding: 10px 13px; background: #1b4f43; color: #fff; font-size: 11px; box-shadow: 0 10px 28px rgba(25,72,60,.22); animation: toast-in .2s ease-out; }
.toast.warn { background: #9a5b2b; }
.toast.error { background: #9a454c; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.loading { padding: 45px; text-align: center; color: #8b9b93; font-size: 12px; }
.spinner { display: inline-block; width: 17px; height: 17px; border: 2px solid #d9e8df; border-top-color: #39806c; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -4px; margin-right: 7px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) {
  :root { --sidebar: 210px; }
  .content-grid { grid-template-columns: 1fr; }
  .hero-badge { display: none; }
  .module-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sidebar { width: 65px; flex-basis: 65px; padding: 18px 9px; }
  .brand-lockup { padding: 0 4px 20px; justify-content: center; }
  .brand-lockup > div:last-child, .sidebar-note span:last-child, .nav-item > span:not(.nav-icon), .nav-section-label, .sidebar-footer { display: none; }
  .sidebar-note { justify-content: center; margin: 0 0 18px; padding: 9px 0; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-count { display: none; }
  .topbar { padding: 0 18px; }
  .topbar-actions { gap: 9px; }
  .system-status, .role-picker > span { display: none; }
  .page-content { padding: 24px 18px 45px; }
  .page-heading { flex-direction: column; }
  .heading-actions { justify-content: flex-start; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .recipe-grid, .module-grid, .module-grid.three, .split-layout, .callout-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .pending-toggle { margin-left: 0; }
}
@media (max-width: 520px) {
  .breadcrumb { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .page-title { font-size: 22px; }
  .search-line { flex-wrap: wrap; }
  .search-input-wrap { flex-basis: 100%; }
  .search-line > .button { flex: 1; }
  .stat-row { gap: 8px; }
  .stat-card { padding: 11px; }
  .stat-value { font-size: 22px; }
}

/* 手机端以“搜索 → 选商品 → 复制话术”为主流程，侧栏改为抽屉，避免挤占查询空间。 */
.mobile-menu-button { display: none; border: 1px solid var(--line); background: #fff; color: var(--green); border-radius: 10px; width: 38px; height: 38px; place-items: center; font-size: 20px; line-height: 1; }
.mobile-sidebar-close { display: none; }
.mobile-nav-backdrop { display: none; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  body { min-width: 320px; }
  body.mobile-nav-open { overflow: hidden; }
  .app-shell { display: block; min-height: 100svh; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 320px); height: 100dvh; max-height: 100dvh; flex: none; overflow-y: auto; padding: 22px 15px 18px; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 18px 0 45px rgba(10, 45, 37, .2); }
  body.mobile-nav-open .sidebar { transform: translateX(0); }
  .mobile-sidebar-close { display: grid; position: absolute; top: 14px; right: 14px; z-index: 1; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(230,243,237,.16); border-radius: 9px; background: rgba(255,255,255,.08); color: #d8eee4; font-size: 21px; line-height: 1; }
  .brand-lockup { padding: 0 10px 22px; justify-content: flex-start; }
  .brand-lockup > div:last-child, .sidebar-note span:last-child, .nav-section-label, .sidebar-footer { display: block; }
  .sidebar-note { justify-content: flex-start; margin: 0 5px 24px; padding: 8px 10px; }
  .nav-item { justify-content: flex-start; padding: 0 12px; }
  .nav-item > span:not(.nav-icon) { display: inline; }
  .nav-count { display: grid; }
  .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(13, 44, 37, .42); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
  .main-shell { width: 100%; }
  .topbar { min-height: 62px; height: auto; padding: 10px 12px; gap: 9px; }
  .mobile-menu-button { display: grid; flex: 0 0 38px; }
  .breadcrumb { min-width: 0; flex: 1; gap: 6px; font-size: 11px; overflow: hidden; }
  .breadcrumb span:first-child { display: none; }
  .breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .topbar-actions { flex: 0 0 auto; gap: 0; }
  .system-status { display: none; }
  .avatar { width: 32px; height: 32px; }
  .page-content { width: 100%; padding: 18px 12px 42px; }
  .page-heading { gap: 12px; margin-bottom: 16px; }
  .page-title { font-size: 22px; }
  .page-description { margin-top: 6px; font-size: 12px; line-height: 1.6; }
  .heading-actions { width: 100%; justify-content: flex-start; gap: 7px; }
  .heading-actions .button { flex: 1; min-width: 0; }
  .hero-panel { min-height: 0; padding: 17px 15px; border-radius: 15px; margin-bottom: 12px; }
  .hero-title { font-size: 19px; line-height: 1.35; }
  .hero-subtitle { font-size: 12px; line-height: 1.6; margin-top: 6px; }
  .search-card { padding: 12px; border-radius: 14px; margin-bottom: 13px; }
  .search-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .search-input-wrap { grid-column: 1 / -1; width: auto; min-height: 48px; padding: 0 12px; }
  .search-input { font-size: 14px; }
  .search-line > .button { width: 100%; min-height: 42px; }
  .search-note { align-items: flex-start; margin: 8px 2px 0; font-size: 10px; line-height: 1.5; }
  .filter-row { display: none; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
  .stat-card { min-height: 80px; padding: 11px; border-radius: 11px; }
  .stat-label { font-size: 10px; }
  .stat-value { font-size: 22px; }
  .stat-meta { font-size: 9px; line-height: 1.35; }
  .stat-icon { width: 28px; height: 28px; font-size: 14px; }
  .content-grid { grid-template-columns: 1fr; gap: 12px; }
  .section-card { border-radius: 14px; }
  .card-header { min-height: 0; padding: 12px 13px; align-items: flex-start; }
  .card-title { font-size: 13px; }
  .card-caption { font-size: 10px; line-height: 1.45; }
  .card-body { padding: 12px; }
  .notice { padding: 10px 11px; margin-bottom: 11px; font-size: 10px; line-height: 1.55; }
  .product-card { padding: 12px; border-radius: 12px; margin-bottom: 9px; }
  .product-card-top { gap: 9px; }
  .product-title-line { gap: 6px; }
  .product-name { font-size: 13px; }
  .product-spec, .sku-line { font-size: 10px; }
  .score-block { display: none; }
  .product-meta { gap: 6px 10px; margin: 9px 0; font-size: 10px; line-height: 1.45; }
  .knowledge-tags { gap: 4px; margin-top: 8px; font-size: 9px; }
  .internal-tag { font-size: 9px; padding: 2px 5px; }
  .product-reason { padding: 7px 8px; font-size: 10px; line-height: 1.5; }
  .product-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin-top: 10px; }
  .product-actions .button { width: 100%; min-height: 38px; padding: 0 8px; }
  .script-card { padding: 11px; }
  .script-body { font-size: 12px; line-height: 1.7; }
  .script-footer { align-items: stretch; gap: 8px; }
  .copy-button { min-height: 34px; }
  .selected-product-head { display: block; padding-bottom: 12px; }
  .selected-product-head h3 { font-size: 17px; }
  .selected-price { margin-top: 8px; text-align: left; font-size: 18px; }
  .selected-meta { gap: 6px 10px; padding: 10px 0; font-size: 10px; line-height: 1.45; }
  .reply-section { padding-top: 12px; }
  .reply-option { display: block; padding: 10px; }
  .reply-option > div { margin-bottom: 8px; }
  .reply-option p { font-size: 12px; line-height: 1.65; }
  .reply-option .copy-button { width: 100%; }
  .knowledge-card { padding: 9px; }
  .knowledge-card-title { font-size: 11px; }
  .knowledge-card ol { font-size: 10px; }
  .knowledge-editor-summary, .knowledge-editor-section-head { display: block; }
  .knowledge-editor-summary .button, .knowledge-editor-section-head .button { width: 100%; margin-top: 9px; }
  .knowledge-edit-pairing { padding: 10px; }
  .table-shell { max-width: 100%; }
  .module-grid, .module-grid.three, .recipe-grid, .split-layout, .callout-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal, .modal.wide { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .modal-header { padding: 15px; }
  .modal-body { padding: 15px; }
  .modal-footer { padding: 12px 15px; gap: 7px; }
  .modal-footer .button { flex: 1; min-height: 40px; }
  .toast-root { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; }
}