:root {
  --ink: #2b2110;
  --muted: #8c7c5b;
  --line: #ecdfc2;
  --soft: #faf2de;
  --canvas: #f6ecd6;
  --white: #ffffff;
  --green: #a06a0f;
  --green-2: #c98a1c;
  --mint: #f8e9c6;
  --amber: #c47a16;
  --amber-soft: #fff0d5;
  --red: #b63c35;
  --red-soft: #fbe6e3;
  --blue: #316f8c;
  --blue-soft: #e3f0f6;
  --shadow: 0 10px 30px rgba(43,35,20,.08);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px; color: #f8f5ee; background: #3c2e12; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 28px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #3d2b0c; font-weight: 800; background: #f2c14e; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 15px; letter-spacing: .02em; }
.brand span { margin-top: 4px; font-size: 11px; color: #c7bda9; }
.nav-list { display: grid; gap: 7px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 0; border-radius: 10px; color: #ddd6c8; background: transparent; text-align: left; }
.nav-item span { width: 20px; font-size: 17px; text-align: center; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
  .nav-item.active { color: #3d2b0c; background: #f2c14e; font-weight: 800; }
.sidebar-note { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.06); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #f0b42b; box-shadow: 0 0 0 4px rgba(240,180,43,.16); }
.storage-warning .status-dot { background: #f0b05a; box-shadow: 0 0 0 4px rgba(240,176,90,.14); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 12px; }
.sidebar-note small { margin-top: 2px; color: #c7bda9; font-size: 10px; }
.sidebar-reset { margin: 12px auto 0; color: #bbb19e !important; font-size: 11px; }
.workspace { min-width: 0; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.topbar h1 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.03em; }
.eyebrow, .section-kicker { margin: 0; color: var(--green-2); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.mobile-actions-toggle { display: none; }
.operator-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.operator-field input { width: 92px; padding: 8px 9px; }
main { padding: 26px 32px 48px; }
.view { display: none; }
.view.active { display: block; }
.hero-panel { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; min-height: 170px; padding: 30px 34px; border-radius: 17px; color: white; background: linear-gradient(128deg, #3c2e12 0%, #6a4b0c 60%, #826120 100%); box-shadow: var(--shadow); }
.hero-panel::after { content: ""; position: absolute; width: 250px; height: 250px; right: 15%; top: -115px; border: 55px solid rgba(255,255,255,.06); border-radius: 50%; }
.hero-panel h2 { max-width: 620px; margin: 13px 0 8px; font-size: 28px; line-height: 1.25; letter-spacing: -.03em; }
.hero-panel p { margin: 0; color: #e4dccc; }
.pill { display: inline-flex; padding: 5px 9px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; color: #f0e9da; font-size: 11px; background: rgba(255,255,255,.08); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font-weight: 700; font-size: 13px; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { color: #43300a; background: linear-gradient(180deg, #f5c047, #e7a726); box-shadow: 0 4px 12px rgba(176,126,16,.20); }
.btn.primary:hover { background: #d99a20; }
.btn.secondary { color: var(--ink); border-color: var(--line); background: white; }
.btn.secondary:hover { border-color: #c8c3b9; }
.btn.danger { color: white; background: var(--red); }
.btn.danger:hover { background: #992f29; }
.btn.light { position: relative; z-index: 1; color: var(--green); background: white; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
#dashboardMetrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.metric-grid.compact { margin-top: 16px; }
.metric-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 3px 15px rgba(44,37,24,.04); }
.metric-card span { display: block; color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -.04em; }
.metric-card small { display: block; margin-top: 5px; color: #a89e8a; font-size: 10px; }
.metric-card.emphasis { color: white; border-color: var(--green); background: var(--green); }
.metric-card.emphasis span, .metric-card.emphasis small { color: #e3dccd; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel { border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 4px 18px rgba(35,30,21,.04); }
.panel + .panel { margin-top: 18px; }
.dashboard-grid .panel + .panel { margin-top: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 19px 21px 14px; }
.panel-heading h3 { margin: 4px 0 0; font-size: 16px; }
.bar-chart { padding: 8px 21px 22px; }
.bar-row { display: grid; grid-template-columns: 76px 1fr 30px; gap: 10px; align-items: center; margin-top: 12px; font-size: 12px; }
.bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: #f2f0ed; }
.bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a47a27, #68490c); }
.attention-list { padding: 2px 20px 20px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.attention-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #f1f0ed; }
.attention-item:first-child { border-top: 0; }
.attention-item strong, .attention-item span { display: block; }
.attention-item strong { font-size: 13px; }
.attention-item span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.text-button, .back-link { border: 0; color: var(--green); background: none; font-weight: 700; font-size: 12px; }
.text-button[href] { text-decoration: none; }
.page-toolbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.page-toolbar h2 { margin: 0; font-size: 24px; }
.page-toolbar p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.filter-panel { padding: 15px 18px 17px; margin: 16px 0; }
.quick-filters { display: flex; gap: 7px; padding-bottom: 14px; border-bottom: 1px solid #f1f0ed; }
.chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: white; font-size: 12px; }
.chip.active, .chip:hover { color: white; border-color: var(--green); background: var(--green); }
.filter-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 12px; padding-top: 14px; }
.material-filters { grid-template-columns: 2fr 1fr 1fr; max-width: 720px; padding-top: 0; }
label { color: #766749; font-size: 11px; font-weight: 700; }
input, select, textarea { width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid #d6d3cc; border-radius: 8px; color: var(--ink); background: white; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #9f885b; box-shadow: 0 0 0 3px rgba(104,74,13,.08); }
textarea { resize: vertical; }
.helper { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.table-panel { overflow: hidden; }
.table-meta { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 11px 13px; color: #917e59; background: #f7f6f5; font-size: 10px; letter-spacing: .04em; text-align: left; white-space: nowrap; }
td { padding: 12px 13px; border-top: 1px solid #f1f0ed; vertical-align: middle; }
tbody tr:hover { background: #fcfbfa; }
.product-link { padding: 0; border: 0; color: var(--green); background: none; font-weight: 800; text-align: left; }
.product-code { display: block; margin-top: 4px; color: #9e927b; font-size: 10px; font-weight: 500; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.badge { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge.green { color: #694a0b; background: var(--mint); }
.badge.amber { color: #92580c; background: var(--amber-soft); }
.badge.red { color: #97332d; background: var(--red-soft); }
.badge.blue { color: #285f78; background: var(--blue-soft); }
.badge.gray { color: #7b6b4c; background: #eeece9; }
.progress { min-width: 68px; }
.progress-bar { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #eceae7; }
.progress-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green-2); }
.empty { padding: 28px !important; color: var(--muted); text-align: center; }
.back-link { padding: 0; margin-bottom: 14px; }
.detail-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 24px 26px; border-radius: 15px; color: white; background: #473717; }
.detail-hero h2 { margin: 7px 0 4px; font-size: 26px; }
.detail-hero p { margin: 0; color: #d9d0bf; font-size: 12px; }
.detail-summary { display: grid; grid-template-columns: repeat(4, 120px); gap: 9px; }
.detail-summary div { padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.07); }
.detail-summary span, .detail-summary strong { display: block; }
.detail-summary span { color: #d7cebc; font-size: 9px; }
.detail-summary strong { margin-top: 6px; font-size: 15px; }
.detail-tabs { display: flex; gap: 8px; margin: 17px 0 13px; }
.tab-button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: white; font-size: 12px; font-weight: 800; }
.tab-button.active { color: white; border-color: var(--green); background: var(--green); }
.detail-panel { padding: 22px; }
.detail-panel .panel-heading { padding: 0 0 16px; }
.profile-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.profile-main { min-width: 0; }
.product-image-card { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #faf9f7; }
.product-image-card img, .product-image-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: 9px; }
.product-image-card img { display: block; object-fit: cover; background: var(--soft); }
.zoomable-image { cursor: zoom-in; }
.product-image-placeholder { display: grid; place-content: center; gap: 6px; color: #9b8f78; text-align: center; background: linear-gradient(145deg, #f3f1ed, #faf9f8); }
.product-image-placeholder strong { color: #6f6144; font-size: 13px; }
.product-image-placeholder span { font-size: 10px; }
.image-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 11px; }
.product-image-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sort-controls, .row-actions { display: inline-flex; align-items: center; gap: 5px; }
.sort-controls > span { min-width: 18px; color: var(--muted); font-size: 11px; text-align: center; }
.mini-icon { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--green); background: white; font-weight: 800; }
.mini-icon:hover { border-color: #bbb19e; background: var(--soft); }
.recipe-section { margin-top: 18px; padding-top: 2px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.recipe-section-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #f6f4f1; }
.recipe-section-heading > div { display: flex; align-items: center; gap: 10px; }
.recipe-section-heading strong { color: var(--green); }
.recipe-section-heading span { color: var(--muted); font-size: 11px; }
.recipe-section-heading b { color: var(--ink); font-size: 14px; }
.recipe-section .table-wrap { border-top: 1px solid var(--line); }
.recipe-table-scroll { max-height: min(420px, 55vh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.recipe-table-scroll table { min-width: 1080px; }
.recipe-table-scroll thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--line); }
.evidence-cell { min-width: 230px; }
.evidence-actions { display: flex; align-items: center; gap: 9px; margin-top: 6px; flex-wrap: wrap; }
.evidence-actions .text-button { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20,16,8,.9); cursor: zoom-out; }
.image-lightbox::backdrop { background: rgba(20,16,8,.9); }
.image-lightbox[open] { display: grid; place-items: center; }
.image-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.45); cursor: zoom-out; }
.image-lightbox span { position: fixed; bottom: 22px; color: rgba(255,255,255,.75); font-size: 12px; }
.lightbox-close { position: fixed; top: 18px; right: 24px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.14); font-size: 28px; }
.key-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.key-value { padding: 13px; border-radius: 10px; background: #f7f6f4; }
.key-value span, .key-value strong { display: block; }
.key-value span { color: var(--muted); font-size: 10px; }
.key-value strong { margin-top: 6px; font-size: 13px; }
.detail-description { margin-top: 15px; padding: 14px; color: #706144; border-left: 3px solid #bdab86; background: #f8f7f4; font-size: 12px; line-height: 1.7; }
.inline-actions { display: flex; gap: 8px; }
.data-table-input { min-width: 70px; margin: 0; padding: 7px; font-size: 11px; }
.material-code-input { min-width: 110px; }
.recipe-code { min-width: 190px; }
.recipe-name { min-width: 150px; }
.row-delete { border: 0; color: var(--red); background: transparent; font-size: 16px; }
.sub-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.sub-metric { padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
.sub-metric span, .sub-metric strong { display: block; }
.sub-metric span { color: var(--muted); font-size: 10px; }
.sub-metric strong { margin-top: 6px; font-size: 16px; }
.table-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; }
.modal { width: min(760px, calc(100vw - 40px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 15px; box-shadow: 0 24px 80px rgba(32,26,14,.3); }
.modal::backdrop { background: rgba(31,26,15,.45); backdrop-filter: blur(3px); }
.modal form { padding: 23px; }
.combo-modal { width: min(1120px, calc(100vw - 32px)); }
.combo-modal form { max-height: calc(100vh - 48px); overflow: auto; }
.combo-editor-top { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 20px 0 14px; align-items: start; }
.combo-basic-grid { padding: 0; }
.combo-image-card { min-width: 0; }
.combo-image-card #comboImagePreview > img { width: 100%; aspect-ratio: 4 / 3; border-radius: 9px; object-fit: cover; display: block; }
.combo-thumbnail, .combo-thumbnail-placeholder { width: 58px; height: 44px; border-radius: 8px; }
.combo-thumbnail { display: block; object-fit: cover; cursor: zoom-in; background: var(--soft); }
.combo-thumbnail-placeholder { display: grid; place-items: center; color: #968970; background: #f3f1ed; font-size: 10px; font-weight: 800; }
.combo-live-metrics { margin-bottom: 4px; }
.combo-section { margin-top: 14px; }
.combo-reference { min-width: 230px; }
.combo-content { min-width: 220px; line-height: 1.6; }
.check-option { display: flex; align-items: center; gap: 9px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.check-option input { width: auto; margin: 0; }
.modal-card { padding: 23px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 4px 0 0; font-size: 21px; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 8px; color: var(--muted); background: var(--soft); font-size: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px 0; }
.form-grid .full { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); }
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 20px 0; padding: 30px; border: 1.5px dashed #c8c3b8; border-radius: 12px; background: #f9f8f6; }
.drop-zone.dragover { border-color: var(--green); background: #f7f4ed; }
.drop-zone span { color: var(--muted); font-size: 11px; }
.import-preview { padding: 14px; border-radius: 10px; color: #534935; background: #f7f4ed; font-size: 12px; line-height: 1.7; }
.import-mode { display: flex; gap: 20px; margin: 15px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.import-mode legend { color: var(--muted); font-size: 10px; }
.import-mode label { display: flex; align-items: center; gap: 6px; }
.import-mode input { width: auto; margin: 0; }
.confirm-modal { width: min(540px, calc(100vw - 40px)); }
.confirm-content { padding: 20px 0; line-height: 1.7; }
.confirm-content p { margin: 0 0 14px; }
.danger-note { padding: 12px 14px; border: 1px solid #f1c7c3; border-radius: 9px; color: #8e302b; background: var(--red-soft); font-size: 12px; }
.danger-text { color: var(--red); }
.hidden { display: none !important; }
.toast { position: fixed; right: 26px; bottom: 24px; z-index: 20; min-width: 240px; max-width: 420px; padding: 13px 16px; border-radius: 10px; color: white; background: #3d3017; box-shadow: var(--shadow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: .2s ease; font-size: 12px; }
.toast.show { opacity: 1; transform: translateY(0); }

.cloud-app-hidden { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 20%, #f1ebdf 0, transparent 36%), linear-gradient(135deg, #f8f7f5, #f1eee9); }
.auth-card { width: min(420px, calc(100vw - 36px)); padding: 30px; border: 1px solid rgba(94,71,24,.12); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 26px 80px rgba(65,50,19,.14); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.auth-brand strong, .auth-brand span { display: block; }
.auth-brand span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.auth-version { margin-left: 6px; opacity: .75; font-size: 10px; }
.auth-card h1 { margin: 0 0 8px; font-size: 25px; }
.auth-card p { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }
.auth-form { display: grid; gap: 15px; }
.auth-form .btn { margin-top: 5px; min-height: 43px; }
.auth-switch { margin-top: 18px; }
.auth-message { margin-top: 18px; padding: 12px 14px; border-radius: 10px; color: #5b4a27; background: #f4f0e8; font-size: 12px; line-height: 1.6; }
.auth-message.error { color: #8e302b; background: var(--red-soft); }
.account-badge { max-width: 220px; overflow: hidden; padding: 7px 10px; border-radius: 99px; color: #5c4e31; background: #f3efe8; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.users-modal { width: min(900px, calc(100vw - 40px)); }
.users-modal .table-wrap { max-height: 55vh; margin-top: 16px; }
.user-email { display: block; margin-top: 4px; color: var(--muted); }
.user-active { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.user-active input { width: auto; margin: 0; }
.readonly .sidebar-note .status-dot { background: #4a7cac; }
.readonly #operatorInput { color: var(--muted); background: #f5f4f2; }

@media (max-width: 1280px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  #dashboardMetrics { grid-template-columns: repeat(4, 1fr); }
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-summary { grid-template-columns: repeat(2, 120px); }
  .combo-editor-top { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  body {
    min-width: 0;
    min-height: 100%;
    padding-bottom: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  button, input, select, textarea { font-size: 16px; }
  button { touch-action: manipulation; }
  .app-shell { display: block; min-height: 100dvh; }
  .workspace { width: 100%; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    width: 100%;
    height: auto;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -8px 26px rgba(36,27,10,.18);
  }
  .brand, .sidebar-note, #resetDemoBtn { display: none !important; }
  .nav-list { display: flex; gap: 4px; }
  .nav-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 5px 2px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }
  .nav-item span { width: auto; font-size: 18px; line-height: 1; }
  #reloadCloudBtn:not(.hidden) {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 55;
    min-height: 44px;
    margin: 0;
    border-radius: 10px;
    color: white !important;
    background: #b16b0d;
    box-shadow: 0 8px 24px rgba(45,35,12,.22);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 66px;
    padding: 0 max(15px, env(safe-area-inset-right)) 0 max(15px, env(safe-area-inset-left));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
  }
  .topbar h1 { max-width: calc(100vw - 88px); margin-top: 1px; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
  .eyebrow { font-size: 9px; }
  .mobile-actions-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--green);
    background: white;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
  }
  .top-actions {
    position: absolute;
    top: 58px;
    right: max(12px, env(safe-area-inset-right));
    z-index: 60;
    display: none;
    width: min(310px, calc(100vw - 24px));
    max-height: calc(100dvh - 150px);
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: 0 18px 55px rgba(49,38,17,.2);
  }
  .top-actions.mobile-open { display: flex; }
  .top-actions .btn { width: 100%; min-height: 44px; }
  .account-badge { max-width: none; padding: 10px 12px; text-align: left; }
  .operator-field { justify-content: space-between; min-height: 44px; }
  .operator-field input { width: 170px; min-height: 42px; margin: 0; font-size: 15px; }

  main { padding: 15px max(12px, env(safe-area-inset-right)) 28px max(12px, env(safe-area-inset-left)); }
  .hero-panel {
    display: block;
    min-height: 0;
    padding: 22px 20px;
    border-radius: 14px;
  }
  .hero-panel::after { width: 180px; height: 180px; right: -62px; top: -96px; border-width: 38px; }
  .hero-panel h2 { margin: 12px 0 8px; font-size: 23px; line-height: 1.35; }
  .hero-panel p { position: relative; z-index: 1; font-size: 13px; line-height: 1.65; }
  .hero-panel .btn { width: 100%; min-height: 46px; margin-top: 18px; }

  .metric-grid, #dashboardMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
  .metric-card { min-width: 0; padding: 13px 12px; border-radius: 11px; }
  .metric-card strong { margin-top: 6px; font-size: 19px; }
  .metric-card small { line-height: 1.4; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .dashboard-grid .panel + .panel { margin-top: 0; }
  .panel { border-radius: 12px; }
  .panel + .panel { margin-top: 12px; }
  .panel-heading { gap: 10px; padding: 16px 15px 12px; }
  .panel-heading h3 { font-size: 15px; }
  .bar-chart { padding: 5px 15px 18px; }
  .attention-list { padding: 2px 15px 15px; }
  .attention-item { align-items: flex-start; }
  .attention-item .text-button { flex: 0 0 auto; min-height: 38px; }

  .page-toolbar { align-items: stretch; flex-direction: column; gap: 13px; }
  .page-toolbar h2 { font-size: 22px; }
  .page-toolbar p { line-height: 1.55; }
  .page-toolbar > .btn { width: 100%; min-height: 46px; }
  .filter-panel { padding: 13px 12px 14px; margin: 12px 0; }
  .quick-filters {
    gap: 7px;
    padding-bottom: 11px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .quick-filters::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; min-height: 36px; padding: 6px 13px; font-size: 12px; }
  .filter-grid, .material-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; padding-top: 12px; }
  .filter-grid label:first-child, .material-filters label:first-child { grid-column: 1 / -1; }
  input, select, textarea { min-height: 44px; }
  .table-meta { align-items: flex-start; flex-direction: column; gap: 5px; padding: 12px; line-height: 1.5; }
  .table-wrap { overflow: visible; }
  .table-panel { overflow: visible; }

  .responsive-table, .responsive-table tbody { display: block; width: 100%; }
  .responsive-table thead { display: none; }
  .responsive-table tbody { display: grid; gap: 9px; padding: 10px; }
  .responsive-table tbody tr {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: white;
    box-shadow: 0 2px 8px rgba(35,30,21,.035);
  }
  .responsive-table tbody tr:hover { background: white; }
  .responsive-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 8px 11px;
    border-top: 1px solid #f1f0ed;
    overflow-wrap: anywhere;
  }
  .responsive-table td:first-child { border-top: 0; }
  .responsive-table td::before {
    content: attr(data-label);
    color: #9b875f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
  }
  .responsive-table td[data-label=""] { display: block; padding-top: 5px; text-align: right; }
  .responsive-table td[data-label=""]::before { display: none; }
  .responsive-table td.empty { display: block; padding: 24px 12px !important; border: 0; text-align: center; }
  .responsive-table td.empty::before { display: none; }
  .responsive-table .inline-actions, .responsive-table .row-actions, .responsive-table .sort-controls { justify-content: flex-end; flex-wrap: wrap; }
  .responsive-table .data-table-input { width: 100%; min-width: 0; min-height: 42px; margin: 0; font-size: 15px; }
  .responsive-table .mini-icon { width: 38px; height: 38px; }
  .responsive-table .row-delete { min-width: 38px; min-height: 38px; }
  .product-table td:nth-child(2) { order: -2; display: block; padding: 13px 11px; border-top: 0; border-bottom: 1px solid var(--line); }
  .product-table td:nth-child(2)::before { display: none; }
  .product-link { font-size: 15px; line-height: 1.4; }
  .product-code { font-size: 11px; }

  .back-link { min-height: 42px; margin-bottom: 8px; }
  .detail-hero { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; border-radius: 13px; }
  .detail-hero h2 { font-size: 23px; }
  .detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .detail-summary div { padding: 10px; }
  .detail-tabs {
    position: sticky;
    top: 66px;
    z-index: 30;
    gap: 7px;
    margin: 10px -12px;
    padding: 9px 12px;
    overflow-x: auto;
    background: rgba(241,240,237,.96);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
  }
  .detail-tabs::-webkit-scrollbar { display: none; }
  .tab-button { flex: 0 0 auto; min-height: 42px; padding: 8px 13px; }
  .detail-panel { padding: 15px 12px; }
  .detail-panel .panel-heading { padding-bottom: 13px; }
  .profile-layout, .combo-editor-top { grid-template-columns: 1fr; gap: 14px; }
  .product-image-card, .combo-image-card { width: 100%; max-width: none; }
  .key-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .key-value { min-width: 0; padding: 11px 9px; }
  .sub-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sub-metric { min-width: 0; padding: 11px; }
  .inline-actions { flex-wrap: wrap; }
  .inline-actions .btn { flex: 1 1 130px; min-height: 44px; }

  .recipe-section { margin-top: 13px; }
  .recipe-section-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 12px; }
  .recipe-section-heading > div { flex-wrap: wrap; }
  .recipe-section-heading .btn { min-height: 42px; }
  .recipe-table-scroll { max-height: min(62dvh, 600px); overflow-x: hidden; overflow-y: auto; scrollbar-gutter: auto; -webkit-overflow-scrolling: touch; }
  .recipe-table-scroll table { min-width: 0; }
  .recipe-table-scroll .responsive-table tbody { padding: 9px; }
  .recipe-table-scroll .responsive-table td { grid-template-columns: 82px minmax(0, 1fr); }
  .recipe-code, .recipe-name, .evidence-cell, .combo-reference, .combo-content { min-width: 0; }
  .table-actions {
    position: sticky;
    bottom: calc(67px + env(safe-area-inset-bottom));
    z-index: 18;
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin: 12px -12px -15px;
    padding: 11px 12px;
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.97);
    box-shadow: 0 -5px 18px rgba(35,30,21,.08);
  }
  .table-actions .btn { width: 100%; min-height: 46px; }
  .table-actions .muted { font-size: 11px; line-height: 1.45; }

  .modal, .combo-modal, .confirm-modal, .users-modal {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    border-radius: 0;
  }
  .modal[open] { display: block; }
  .modal form, .modal-card {
    min-height: 100%;
    padding: 18px 15px calc(18px + env(safe-area-inset-bottom));
  }
  .combo-modal form { max-height: none; overflow: visible; }
  .modal-header { position: sticky; top: 0; z-index: 5; margin: -18px -15px 0; padding: 16px 15px 14px; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
  .modal-header h2 { font-size: 19px; }
  .icon-button { width: 42px; height: 42px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
  .form-grid .full { grid-column: auto; }
  .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: auto -15px calc(-18px - env(safe-area-inset-bottom));
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.98);
  }
  .modal-actions .btn { flex: 1; min-height: 46px; }
  .drop-zone { margin: 15px 0; padding: 24px 16px; }
  .import-mode { flex-direction: column; gap: 10px; }
  .users-modal .table-wrap { max-height: none; }

  .auth-screen { min-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .auth-card { width: 100%; max-width: 430px; padding: 24px 20px; border-radius: 18px; }
  .auth-brand { margin-bottom: 27px; }
  .auth-card h1 { font-size: 25px; }
  .auth-form .btn { min-height: 48px; }
  .auth-switch { min-height: 42px; }
  .toast { left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); min-width: 0; max-width: none; }

  @media (hover: none) {
    .btn:hover { transform: none; }
  }
}

/* V2.2 UI refinement: N多寿司 brand system + desktop/H5 working surfaces */
:root {
  --ink: #2b2110;
  --muted: #8c7c5b;
  --line: #ecdfc2;
  --soft: #faf2de;
  --canvas: #f6ecd6;
  --green: #a06a0f;
  --green-2: #c98a1c;
  --green-deep: #3d2b0c;
  --green-soft: #f8ecd0;
  --gold: #f2c14e;
  --gold-deep: #d99a20;
  --shadow: 0 12px 34px rgba(45,36,19,.07);
}

body { min-width: 0; background: var(--canvas); }
.app-shell { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { padding: 22px 16px 18px; background: var(--green-deep); }
.brand { gap: 12px; padding: 2px 8px 30px; }
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px 13px 13px 5px;
  color: var(--green-deep);
  background: var(--gold);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
  font-family: Arial Black, Inter, sans-serif;
  font-size: 24px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.09em;
}
.brand strong { font-size: 17px; letter-spacing: .01em; }
.brand span { max-width: 148px; margin-top: 3px; color: #c5bca9; font-size: 10px; line-height: 1.35; }
.nav-list { gap: 5px; }
.nav-item {
  position: relative;
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 12px;
  color: #d1cbbf;
  font-size: 14px;
  font-weight: 650;
}
.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--gold);
  transition: height .18s ease;
}
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: white; background: rgba(255,255,255,.11); }
.nav-item.active::before { height: 22px; }
.sidebar-note { border-radius: 14px; background: rgba(255,255,255,.055); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  height: 80px;
  padding: 0 28px;
  background: rgba(255,255,255,.91);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(52,40,17,.02);
}
.topbar h1 { font-size: 23px; }
.mobile-brand-line, .mobile-hero-title { display: none; }
.eyebrow, .section-kicker { color: var(--green); letter-spacing: .13em; }
.account-badge { color: #4d3b16; background: var(--green-soft); }

main { width: 100%; max-width: 1740px; margin: 0 auto; padding: 24px 28px 48px; }
.view.active { animation: view-enter .22s ease both; }
@keyframes view-enter { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.hero-panel {
  min-height: 152px;
  padding: 25px 29px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: linear-gradient(118deg, var(--green-deep) 0%, #66480d 62%, #805d16 100%);
  box-shadow: 0 16px 38px rgba(62,46,13,.15);
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(242,192,76,.13), transparent 28%);
  pointer-events: none;
}
.hero-panel::after { right: 12%; top: -128px; border-color: rgba(255,255,255,.055); }
.hero-panel h2 { margin: 12px 0 7px; font-size: clamp(26px, 2vw, 32px); }
.hero-panel p { position: relative; z-index: 1; color: #e4ded2; font-size: 13px; }
.pill { border-color: rgba(242,192,76,.45); color: #ffe3a3; background: rgba(242,192,76,.08); }
.btn { min-height: 40px; border-radius: 10px; }
.btn:focus-visible, .text-button:focus-visible, .nav-item:focus-visible, .tab-button:focus-visible, .chip:focus-visible, .icon-button:focus-visible, .mini-icon:focus-visible {
  outline: 3px solid rgba(242,192,76,.52);
  outline-offset: 2px;
}
.btn.primary { background: linear-gradient(180deg, #f5c047, #e7a726); color: #43300a; box-shadow: 0 5px 16px rgba(176,126,16,.22); }
.btn.light { color: var(--green-deep); background: var(--gold); box-shadow: 0 8px 20px rgba(242,192,76,.2); }
.btn.light:hover { background: #ffd36b; }

.metric-grid { gap: 11px; margin: 16px 0; }
.metric-card {
  min-width: 0;
  padding: 16px 17px;
  border-radius: 15px;
  box-shadow: 0 5px 18px rgba(50,41,22,.045);
}
.metric-card span { font-size: 11px; }
.metric-card strong { margin-top: 7px; font-size: 22px; }
.metric-card small { min-height: 14px; margin-top: 5px; line-height: 1.35; }
.metric-card.emphasis { border-color: #6b4d12; background: linear-gradient(145deg, #5a400b, #765411); box-shadow: 0 10px 24px rgba(104,74,13,.18); }
#dashboardMetrics > .metric-card:last-child:not(.emphasis) { border-top: 3px solid var(--gold); }

.dashboard-grid { grid-template-columns: .92fr 1.08fr; gap: 16px; margin-bottom: 16px; }
.panel { border-color: #e5e3de; border-radius: 17px; box-shadow: 0 7px 24px rgba(35,30,21,.045); }
.panel-heading { padding: 20px 21px 15px; }
.panel-heading h3 { font-size: 17px; }
.bar-track { height: 7px; }
.bar-fill { background: linear-gradient(90deg, #aa8439, var(--green)); }
.attention-item { padding: 13px 0; }
.attention-item strong { font-size: 14px; }
.attention-item .text-button { padding: 8px 0; }

.page-toolbar { align-items: center; margin-bottom: 8px; }
.page-toolbar h2 { font-size: 25px; }
.page-toolbar p { font-size: 13px; }
.filter-panel { margin: 14px 0; padding: 15px 17px 17px; }
.quick-filters { gap: 8px; }
.chip { min-height: 32px; padding: 6px 13px; }
.chip.active { box-shadow: 0 4px 12px rgba(104,74,13,.14); }
label { color: #6e6043; font-size: 12px; }
input, select, textarea { min-height: 40px; border-color: #d5d1ca; border-radius: 9px; }
input:focus, select:focus, textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(128,93,23,.1); }

.table-panel { border-radius: 17px; }
.table-meta { padding: 14px 18px; background: #fcfcfb; }
table { font-size: 13px; }
th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 13px;
  color: #867552;
  background: #f4f3f1;
  box-shadow: inset 0 -1px 0 var(--line);
}
td { padding: 13px; }
tbody tr { transition: background .15s ease; }
.product-link { color: #4a3712; font-size: 13px; }
.product-link:hover { color: var(--green-2); }
.product-code { color: #94886f; font-size: 11px; }
.badge { padding: 5px 8px; }

.detail-hero {
  align-items: center;
  padding: 23px 25px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: var(--shadow);
}
.detail-hero .pill { border-color: #d8cdb8; color: var(--green); background: var(--green-soft); }
.detail-hero h2 { font-size: 27px; }
.detail-hero p { color: var(--muted); font-size: 12px; }
.detail-summary { grid-template-columns: repeat(4, minmax(106px, 122px)); }
.detail-summary div { border-color: #e9e7e3; background: #f7f6f5; }
.detail-summary span { color: var(--muted); font-size: 10px; }
.detail-summary strong { color: #3b2f18; font-size: 16px; }
.detail-tabs { position: sticky; top: 80px; z-index: 24; gap: 7px; margin: 14px 0 12px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: rgba(246,245,242,.94); backdrop-filter: blur(12px); }
.tab-button { min-height: 38px; border-color: transparent; background: transparent; }
.tab-button:hover { color: var(--green); background: white; }
.tab-button.active { box-shadow: 0 5px 14px rgba(104,74,13,.14); }
.detail-panel { padding: 22px; }
.product-image-card { background: #f8f7f6; }
.key-value { border: 1px solid #edebe7; background: #f9f8f7; }
.sub-metric { border-radius: 12px; background: #fcfcfb; }

.recipe-section { border-radius: 14px; background: white; }
.recipe-section-heading { min-height: 58px; padding: 11px 14px; background: #f4f2ed; }
.recipe-section-heading strong { font-size: 15px; }
.recipe-section-heading .btn { min-height: 36px; }
.recipe-section[data-recipe-type="PACKAGE"] .recipe-section-heading { background: #fbf5e4; }
.recipe-section[data-recipe-type="PACKAGE"] .recipe-section-heading strong { color: #8b6813; }
.recipe-section[data-recipe-type="PACKAGE"] .add-recipe-row { color: #6d5010; border-color: #e7ca75; background: #fff9e8; }
.recipe-table-scroll { max-height: min(380px, 50vh); scrollbar-color: #b8af9d #f2f0ed; scrollbar-width: thin; }
.recipe-section[data-recipe-type="PACKAGE"] .recipe-table-scroll { max-height: min(340px, 46vh); }
.recipe-table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.recipe-table-scroll::-webkit-scrollbar-track { background: #f2f0ed; }
.recipe-table-scroll::-webkit-scrollbar-thumb { border: 2px solid #f2f0ed; border-radius: 999px; background: #ada491; }
.recipe-table-scroll thead th { top: 0; }
.data-table-input { min-height: 36px; font-size: 12px; }
.table-actions {
  position: sticky;
  bottom: 14px;
  z-index: 16;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px rgba(43,35,20,.11);
  backdrop-filter: blur(12px);
}

.modal { border-radius: 18px; }
.modal-header h2 { font-size: 22px; }
.auth-screen { background: radial-gradient(circle at 18% 18%, #eee9de 0, transparent 34%), radial-gradient(circle at 82% 78%, #f8eac8 0, transparent 26%), #f6f5f2; }
.auth-card { border-radius: 24px; box-shadow: 0 26px 80px rgba(65,50,19,.13); }
.auth-brand strong { font-size: 18px; }
.auth-brand span { line-height: 1.45; }

@media (max-width: 1280px) {
  #dashboardMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-summary { grid-template-columns: repeat(2, minmax(112px, 1fr)); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 78px; }
  body { min-width: 0; background: #f5f4f1; }
  .workspace { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .sidebar {
    padding: 4px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid #e5e3df;
    color: var(--ink);
    background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 30px rgba(52,40,15,.11);
    backdrop-filter: blur(16px);
  }
  .nav-list { gap: 2px; }
  .nav-item {
    min-height: 61px;
    color: #9c8860;
    border-radius: 11px;
    font-size: 10px;
  }
  .nav-item::before { inset: 0 auto auto 50%; width: 20px; height: 3px; transform: translateX(-50%); border-radius: 0 0 4px 4px; opacity: 0; }
  .nav-item.active::before { width: 20px; height: 3px; opacity: 1; }
  .nav-item:hover { color: var(--green); background: transparent; }
  .nav-item.active { color: var(--green); background: var(--green-soft); }
  .nav-item span { color: inherit; }

  .topbar { height: 74px; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .topbar-title-group { min-width: 0; }
  .mobile-brand-line { display: flex; align-items: center; gap: 6px; color: var(--green-deep); font-size: 11px; line-height: 1; }
  .mobile-brand-line span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px 7px 7px 3px; color: var(--green-deep); background: var(--gold); font-family: Arial Black, sans-serif; font-size: 14px; font-style: italic; }
  .mobile-brand-line strong { letter-spacing: .02em; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { max-width: calc(100vw - 92px); margin: 5px 0 0; color: #726346; font-size: 13px; font-weight: 650; }
  .mobile-actions-toggle { border-color: #e2dfd9; background: #f9f8f7; }
  .top-actions { top: 65px; }

  main { padding: 14px max(12px, env(safe-area-inset-right)) 28px max(12px, env(safe-area-inset-left)); }
  .hero-panel { min-height: 150px; padding: 18px 104px 18px 18px; border-radius: 17px; }
  .hero-panel h2 { margin: 11px 0 7px; font-size: 24px; }
  .desktop-hero-title { display: none; }
  .mobile-hero-title { display: inline; }
  .hero-panel p { max-width: 230px; font-size: 12px; line-height: 1.55; }
  .hero-panel .btn { position: absolute; right: 16px; bottom: 18px; z-index: 3; width: auto; min-width: 82px; min-height: 42px; margin: 0; padding: 0 12px; font-size: 12px; }
  .hero-panel::after { right: -74px; top: -98px; }
  .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .metric-grid, #dashboardMetrics { gap: 8px; margin: 11px 0; }
  #dashboardMetrics > .metric-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .metric-card { padding: 13px 12px; }
  .metric-card strong { font-size: 20px; }
  .metric-card small { min-height: 0; font-size: 10px; }
  .dashboard-grid { gap: 11px; margin-bottom: 11px; }
  .panel { border-radius: 14px; }
  .panel-heading { padding: 16px 14px 12px; }
  .attention-item strong { font-size: 13px; }

  .page-toolbar { gap: 11px; }
  .page-toolbar h2 { font-size: 22px; }
  .page-toolbar > .btn { border-radius: 12px; }
  .filter-panel { border-radius: 14px; }
  label { font-size: 12px; }
  .table-panel { border-radius: 14px; }
  .responsive-table tbody tr { border-radius: 13px; box-shadow: 0 4px 14px rgba(35,30,21,.045); }
  .product-table td:nth-child(2) { background: #faf9f8; }
  .product-link { color: #3f3012; font-size: 16px; }

  .detail-hero { padding: 18px; }
  .detail-hero h2 { font-size: 24px; }
  .detail-summary div { background: #f6f5f3; }
  .detail-tabs { top: 74px; margin: 10px -12px; padding: 8px 12px; border-width: 1px 0; border-radius: 0; background: rgba(245,244,241,.96); }
  .tab-button { min-height: 40px; background: white; }
  .detail-panel { padding: 14px 12px; }
  .recipe-section-heading { position: relative; min-height: 62px; }
  .recipe-section-heading .btn { min-height: 42px; }
  .recipe-table-scroll, .recipe-section[data-recipe-type="PACKAGE"] .recipe-table-scroll { max-height: min(55dvh, 520px); }
  .recipe-table-scroll::-webkit-scrollbar { width: 6px; }
  .table-actions { bottom: calc(76px + env(safe-area-inset-bottom)); margin: 12px -12px -14px; border-width: 1px 0 0; border-radius: 0; }

  .modal, .combo-modal, .confirm-modal, .users-modal { border-radius: 0; }
  .auth-card { padding: 25px 21px; border-radius: 22px; }
  .auth-brand .brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

@media (max-width: 540px) {
  .filter-grid, .material-filters { grid-template-columns: 1fr; }
  .filter-grid label:first-child, .material-filters label:first-child { grid-column: auto; }
  .detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-value-grid { grid-template-columns: 1fr 1fr; }
  .page-toolbar p { font-size: 12px; }
}

/* V2.3 Figma refinement: clearer hierarchy and faster recipe editing */
:root {
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

body {
  color: #271f10;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sidebar { box-shadow: 12px 0 36px rgba(52,38,11,.07); }
.topbar { border-bottom-color: #e9e7e4; }
.btn { letter-spacing: .01em; }
.btn:active { transform: translateY(0) scale(.99); }
.hero-panel { min-height: 146px; }
.hero-panel::before { background: radial-gradient(circle at 80% 10%, rgba(242,192,76,.17), transparent 30%); }
.hero-panel .btn.light { min-width: 110px; }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 2px;
  border-radius: 99px 99px 0 0;
  background: transparent;
}
.metric-card:hover { border-color: #d9d5cc; box-shadow: 0 9px 24px rgba(50,41,22,.07); }
.metric-card.emphasis::after, #dashboardMetrics > .metric-card:last-child::after { background: var(--gold); }
.panel-heading h3, .page-toolbar h2, .detail-hero h2 { letter-spacing: -.025em; }
th { font-size: 11px; }
td { font-size: 13px; }
tbody tr:hover { background: #faf9f7; }
.data-table-input { font-size: 13px; }

.recipe-switcher {
  position: sticky;
  top: 146px;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 13px;
  padding: 8px 10px;
  border: 1px solid #e6e3dc;
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(43,35,20,.08);
  backdrop-filter: blur(12px);
}
.recipe-switcher-buttons { display: flex; gap: 7px; }
.recipe-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #716346;
  background: #f5f4f2;
  font-size: 13px;
  font-weight: 750;
}
.recipe-jump b {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 99px;
  color: #82714f;
  background: white;
  font-size: 11px;
}
.recipe-jump:hover { color: var(--green); border-color: #dcd6c9; background: #f6f3ed; }
.recipe-jump.active { color: white; border-color: var(--green); background: var(--green); box-shadow: 0 5px 14px rgba(104,74,13,.16); }
.recipe-jump.active b { color: var(--green); }
.recipe-jump:focus-visible { outline: 3px solid rgba(242,192,76,.52); outline-offset: 2px; }
.recipe-switcher small { color: var(--muted); font-size: 11px; }
.recipe-section { scroll-margin-top: 204px; }
.recipe-section:focus { outline: none; }
.recipe-section:focus-visible { box-shadow: 0 0 0 3px rgba(128,93,23,.14); }
.section-scroll-hint {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 99px;
  color: #706754;
  background: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 700;
}
.recipe-section[data-recipe-type="PACKAGE"] { border-color: #ead8ae; }
.recipe-section[data-recipe-type="PACKAGE"] .section-scroll-hint { color: #80621c; background: rgba(255,255,255,.78); }
.recipe-table-scroll { scrollbar-gutter: stable both-edges; }
.recipe-table-scroll:focus-within { box-shadow: inset 0 0 0 2px rgba(128,93,23,.08); }

@media (hover: hover) {
  .metric-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
  .metric-card:hover { transform: translateY(-2px); }
}

@media (max-width: 900px) {
  .hero-panel { min-height: 154px; padding-right: 126px; }
  .hero-panel .btn { min-width: 106px; padding: 0 13px; }
  .recipe-switcher {
    top: 132px;
    z-index: 23;
    margin: 0 -12px 12px;
    padding: 8px 12px;
    border-width: 1px 0;
    border-radius: 0;
  }
  .recipe-switcher-buttons { width: 100%; }
  .recipe-jump { flex: 1; justify-content: center; min-height: 42px; }
  .recipe-switcher small { display: none; }
  .recipe-section { scroll-margin-top: 194px; }
  .section-scroll-hint { display: inline-flex; }
  .recipe-section-heading > div:last-child { width: 100%; justify-content: space-between; }
  .recipe-section-heading .add-recipe-row { min-width: 112px; }
  .recipe-table-scroll { min-height: 142px; }
  .data-table-input { min-height: 42px; font-size: 14px; }
  .row-actions .mini-icon, .row-actions .row-delete { min-width: 34px; min-height: 34px; }
}

@media (max-width: 540px) {
  .hero-panel { padding-right: 122px; }
  .recipe-section-heading { gap: 8px; }
  .recipe-section-heading > div:first-child { gap: 7px; }
  .section-scroll-hint { padding: 0 7px; }
}

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

@media print {
  .sidebar, .topbar, .back-link, .detail-tabs, .inline-actions, .table-actions, .row-delete { display: none !important; }
  .app-shell { display: block; }
  main { padding: 0; }
  .view { display: none !important; }
  #detailView.active { display: block !important; }
  .detail-hero { color: #000; border: 1px solid #d4cfc4; background: white; }
  .detail-hero p, .detail-summary span { color: #695c41; }
  .detail-summary div { border-color: #d4cfc4; background: white; }
}

/* V3.0 compatibility layer retained for existing secondary pages */
:root {
  --v3-ink: #2b2110;
  --v3-muted: #8c7c5b;
  --v3-line: #ecdfc2;
  --v3-canvas: #f6ecd6;
  --v3-green: #a06a0f;
  --v3-green-2: #c98a1c;
  --v3-deep: #3d2b0c;
  --v3-soft: #f8ecd0;
  --v3-gold: #f2c14e;
  --v3-shadow: 0 10px 32px rgba(47,37,18,.065);
}

body { color: var(--v3-ink); background: var(--v3-canvas); }
.app-shell { grid-template-columns: 224px minmax(0, 1fr); }
.sidebar {
  width: 224px;
  padding: 20px 14px 16px;
  background: var(--v3-deep);
  box-shadow: 8px 0 30px rgba(52,38,11,.075);
}
.brand { gap: 11px; padding: 3px 9px 24px; }
.brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 13px 13px 13px 5px;
  color: var(--v3-deep);
  background: var(--v3-gold);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.12);
}
.brand strong { font-size: 16px; }
.brand span { max-width: 132px; color: #c7bda9; font-size: 9px; line-height: 1.45; }
.nav-section-label {
  display: block;
  margin: 1px 13px 9px;
  color: #998e77;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}
.nav-list { gap: 4px; }
.nav-item { min-height: 44px; padding: 10px 12px; border-radius: 10px; color: #d0c9bb; font-size: 13px; }
.nav-item span { font-size: 16px; }
.nav-item.active { background: rgba(255,255,255,.115); }
.nav-item.active::before { height: 20px; background: var(--v3-gold); }
.sidebar-note { padding: 12px; border-radius: 12px; }

.topbar {
  height: 72px;
  padding: 0 24px;
  border-bottom: 1px solid #e8e6e2;
  background: rgba(255,255,255,.94);
}
.topbar h1 { margin-top: 3px; font-size: 21px; }
.topbar .eyebrow { font-size: 9px; }
.top-actions { gap: 8px; }
.top-actions .btn { min-height: 38px; padding-inline: 13px; }
.operator-field input { width: 88px; min-height: 38px; }

main { max-width: 1640px; padding: 22px 24px 44px; }
.hero-panel {
  min-height: 112px;
  align-items: center;
  padding: 20px 26px;
  border-radius: 16px;
  background: linear-gradient(112deg, #34260b 0%, #684a0d 64%, #805d17 100%);
  box-shadow: 0 13px 34px rgba(76,55,13,.14);
}
.hero-panel::after { right: 10%; top: -164px; width: 285px; height: 285px; border-width: 48px; }
.hero-panel::before { background: radial-gradient(circle at 78% 0%, rgba(242,192,76,.16), transparent 30%); }
.hero-panel h2 { margin: 9px 0 5px; font-size: clamp(23px, 2vw, 28px); }
.hero-panel p { font-size: 12px; }
.hero-panel .btn.light { min-width: 112px; min-height: 42px; color: var(--v3-deep); background: white; box-shadow: none; }
.hero-panel .pill { padding: 4px 8px; color: #ffe5a7; border-color: rgba(242,192,76,.42); }

.metric-grid, #dashboardMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.metric-card {
  min-height: 108px;
  padding: 15px 16px;
  border-color: var(--v3-line);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(47,37,18,.045);
}
.metric-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric-card-top > span { color: var(--v3-muted); }
.metric-card-top > i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  color: var(--v3-green);
  background: var(--v3-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.metric-card strong { margin-top: 8px; font-size: 23px; }
.metric-card small { margin-top: 4px; }
.metric-card.emphasis { background: linear-gradient(145deg, #5a400b, #765411); }
.metric-card.emphasis .metric-card-top > i { color: var(--v3-deep); background: var(--v3-gold); }
.mobile-quick-actions { display: none; }

.dashboard-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 14px; margin-bottom: 14px; }
.panel { border-color: var(--v3-line); border-radius: 16px; box-shadow: var(--v3-shadow); }
.panel + .panel { margin-top: 14px; }
.dashboard-grid .panel + .panel { margin-top: 0; }
.panel-heading { padding: 18px 20px 13px; }
.panel-heading h3 { font-size: 16px; }
.section-kicker { color: var(--v3-green-2); }
.bar-chart { padding: 7px 20px 20px; }
.bar-row { margin-top: 10px; }
.attention-list { padding: 0 20px 17px; }
.attention-item { padding: 11px 0; }

.page-toolbar { margin-bottom: 5px; }
.ledger-toolbar { min-height: 61px; }
.ledger-toolbar h2 { margin-top: 4px; font-size: 25px; }
.filter-panel { margin: 13px 0; padding: 14px 16px 16px; }
.quick-filters { gap: 7px; padding-bottom: 12px; }
.chip { min-height: 33px; padding: 6px 13px; }
.filter-grid { gap: 10px; padding-top: 12px; }
input, select, textarea { border-color: #d7d4cd; border-radius: 9px; }
.table-panel { border-radius: 16px; }
.table-meta { padding: 12px 17px; }
.table-panel > .table-wrap { max-height: calc(100vh - 375px); overflow: auto; }
.product-table { min-width: 1210px; }
.product-table th { height: 42px; }
.product-table td { padding-block: 11px; }
.product-link { display: inline-flex; align-items: center; gap: 10px; min-width: 190px; color: var(--v3-ink); }
.ledger-product-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #e6e3dc;
  border-radius: 11px;
  color: var(--v3-green);
  background: linear-gradient(145deg, #f1ede6, #faf9f7);
  font-size: 15px;
}
.ledger-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ledger-product-copy { display: block; min-width: 0; text-align: left; }
.ledger-product-copy b { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cost-breakdown strong, .cost-breakdown span { display: block; }
.cost-breakdown span { margin-top: 3px; color: #9b8f78; font-size: 9px; }
.money-value { color: var(--v3-ink); }
.margin-value { color: var(--v3-green); }
.progress { min-width: 84px; }
.progress > span { color: #6d5f43; font-size: 11px; font-weight: 800; }
.progress-bar { height: 6px; }

.back-link { min-height: 38px; margin-bottom: 10px; }
.detail-hero {
  grid-template-columns: minmax(310px, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 18px 20px;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  color: var(--v3-ink);
  background: white;
  box-shadow: var(--v3-shadow);
}
.detail-identity { display: flex; align-items: center; gap: 15px; min-width: 0; }
.detail-product-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid #e5e2dc;
  border-radius: 15px;
  color: var(--v3-green);
  background: linear-gradient(145deg, #f0ece3, #faf9f8);
  font-size: 22px;
  font-weight: 900;
}
.detail-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-identity-copy { min-width: 0; }
.detail-code-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.detail-code, .detail-version {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 99px;
  color: var(--v3-green);
  background: var(--v3-soft);
  font-size: 10px;
  font-weight: 800;
}
.detail-version { color: #8a7855; background: #f4f3f0; }
.detail-code-edit { min-height: 29px; padding: 0 6px; border: 0; color: var(--v3-green); background: transparent; font-size: 10px; font-weight: 800; }
.detail-code-edit:hover { text-decoration: underline; }
.detail-hero h2 { margin: 6px 0 3px; font-size: 24px; }
.detail-hero p { color: var(--v3-muted); }
.detail-statuses { display: flex; gap: 5px; margin-top: 7px; }
.detail-summary { grid-template-columns: repeat(4, minmax(96px, 116px)); gap: 7px; }
.detail-summary div { padding: 10px 11px; border-color: #e8e6e2; border-radius: 10px; background: #f8f7f6; }
.detail-summary span { color: var(--v3-muted); }
.detail-summary strong { color: var(--v3-ink); }
.detail-summary .launch-ready { background: #f5f1ea; }
.detail-summary .launch-ready strong { color: var(--v3-green); }
.detail-summary .launch-wait { background: #fff5df; }
.detail-summary .launch-wait strong { color: #876615; }
.detail-tabs { top: 72px; margin: 11px 0 10px; padding: 6px; border: 1px solid var(--v3-line); border-radius: 12px; }
.tab-button { min-height: 38px; padding-inline: 14px; }
.detail-panel { padding: 19px; }

.recipe-page-heading { padding-bottom: 13px !important; }
.recipe-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 276px; gap: 15px; align-items: start; }
.recipe-editor-column { min-width: 0; }
.recipe-switcher { position: static; margin: 0 0 11px; padding: 7px; box-shadow: none; }
.recipe-switcher small { padding-right: 4px; }
.recipe-section { margin-top: 11px; border-radius: 13px; }
.recipe-section-heading { min-height: 56px; padding: 9px 12px; }
.recipe-section-heading > div { gap: 8px; }
.recipe-section-heading .btn { min-height: 36px; }
.recipe-table-scroll,
.recipe-section[data-recipe-type="PACKAGE"] .recipe-table-scroll {
  min-height: 128px;
  max-height: 340px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.recipe-section[data-recipe-type="PACKAGE"] .recipe-table-scroll { max-height: 300px; }
.recipe-table-scroll table { min-width: 1040px; }
.recipe-editing-tip { display: flex; gap: 9px; align-items: center; margin-top: 11px; padding: 10px 12px; border-radius: 10px; color: #7f6f4e; background: #f7f6f4; }
.recipe-editing-tip > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--v3-green); background: white; font-weight: 900; }
.recipe-editing-tip p { margin: 0; font-size: 10px; line-height: 1.5; }
.recipe-editing-tip strong { margin-right: 5px; color: #463f30; }
.recipe-cost-aside { position: sticky; top: 138px; display: grid; gap: 11px; }
.recipe-aside-card, .launch-aside-card { border: 1px solid var(--v3-line); border-radius: 14px; background: white; box-shadow: 0 7px 22px rgba(47,37,18,.05); }
.recipe-aside-card { padding: 16px; }
.recipe-aside-heading { padding-bottom: 10px; border-bottom: 1px solid #edebe8; }
.recipe-aside-heading h4 { margin: 4px 0 0; font-size: 16px; }
.recipe-cost-list { padding: 5px 0 12px; }
.recipe-cost-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--v3-muted); border-bottom: 1px solid #f1f0ed; font-size: 11px; }
.recipe-cost-list > div:last-child { border-bottom: 0; }
.recipe-cost-list strong { color: var(--v3-ink); font-size: 13px; }
.recipe-cost-list .total { margin: 3px -7px; padding: 10px 7px; border: 0; border-radius: 8px; color: #544321; background: var(--v3-soft); }
.recipe-cost-list .total strong { color: var(--v3-green); font-size: 16px; }
.recipe-aside-card .btn { width: 100%; min-height: 44px; }
.launch-aside-card { display: flex; align-items: center; gap: 10px; padding: 13px; }
.launch-aside-card > span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; }
.launch-aside-card strong, .launch-aside-card small { display: block; }
.launch-aside-card strong { font-size: 12px; }
.launch-aside-card small { margin-top: 3px; color: var(--v3-muted); font-size: 9px; }
.launch-aside-card.ready { border-color: #e5ddcd; background: #f8f6f1; }
.launch-aside-card.ready > span { color: white; background: var(--v3-green); }
.launch-aside-card.pending { border-color: #ead6a6; background: #fffaf0; }
.launch-aside-card.pending > span { color: #765a10; background: #f9d88c; }
.mobile-cost-strip, .recipe-mobile-actions { display: none; }

.auth-brand .brand-mark { color: var(--v3-deep); background: var(--v3-gold); }
.auth-card { border-radius: 22px; }

@media (max-width: 1280px) {
  .detail-summary { grid-template-columns: repeat(2, minmax(104px, 1fr)); }
  .recipe-workbench { grid-template-columns: minmax(0, 1fr) 246px; }
  .product-table { min-width: 1160px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 72px; }
  body { background: #f6f5f2; }
  .app-shell { display: block; }
  .workspace { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .sidebar { width: 100%; }
  .nav-section-label { display: none; }
  .topbar { height: 64px; padding-inline: max(14px, env(safe-area-inset-left)); }
  .mobile-brand-line { gap: 8px; font-size: 12px; }
  .mobile-brand-line span { width: 28px; height: 28px; border-radius: 9px 9px 9px 3px; background: var(--v3-gold); }
  .topbar h1 { margin-top: 4px; font-size: 12px; }
  .mobile-actions-toggle { width: 40px; height: 40px; flex-basis: 40px; }
  .top-actions { top: 57px; }
  main { padding: 13px max(12px, env(safe-area-inset-right)) 26px max(12px, env(safe-area-inset-left)); }

  .hero-panel { min-height: 130px; padding: 17px 112px 17px 17px; border-radius: 16px; }
  .hero-panel h2 { margin: 9px 0 5px; font-size: 22px; }
  .hero-panel p { max-width: 230px; font-size: 11px; line-height: 1.5; }
  .hero-panel .btn { right: 14px; bottom: 16px; min-width: 94px; min-height: 40px; font-size: 11px; }
  .desktop-hero-title { display: none; }
  .mobile-hero-title { display: inline; }

  .metric-grid, #dashboardMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
  .metric-card { min-height: 96px; padding: 12px; border-radius: 12px; }
  .metric-card strong { margin-top: 6px; font-size: 20px; }
  .metric-card-top > i { width: 24px; height: 24px; border-radius: 7px; }
  .metric-card small { font-size: 9px; }
  .mobile-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
  .quick-action-card { display: grid; justify-items: start; gap: 4px; min-height: 91px; padding: 11px; border: 1px solid var(--v3-line); border-radius: 12px; color: var(--v3-ink); background: white; text-align: left; box-shadow: 0 4px 14px rgba(47,37,18,.04); }
  .quick-action-card > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: var(--v3-green); background: var(--v3-soft); font-size: 14px; font-weight: 900; }
  .quick-action-card strong { align-self: end; font-size: 11px; }
  .quick-action-card small { color: var(--v3-muted); font-size: 8px; }
  .dashboard-grid { gap: 10px; }
  #recentActivityPanel { display: none; }

  .ledger-toolbar { min-height: 0; }
  .ledger-toolbar .section-kicker { display: none; }
  .ledger-toolbar h2 { margin-top: 0; font-size: 22px; }
  #productsView #productMetrics { padding: 10px; border-radius: 15px; background: linear-gradient(135deg, #49340b, #684a0d); }
  #productsView #productMetrics .metric-card { min-height: 76px; color: white; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); box-shadow: none; }
  #productsView #productMetrics .metric-card-top > span,
  #productsView #productMetrics .metric-card small { color: #dfd8c9; }
  #productsView #productMetrics .metric-card-top > i { color: #ffedc4; background: rgba(242,192,76,.16); }
  #productsView #productMetrics .metric-card strong { font-size: 18px; }
  .filter-panel { padding: 12px; }
  .quick-filters { order: 2; }
  .table-panel > .table-wrap { max-height: none; overflow: visible; }
  .product-table { min-width: 0; }
  .product-table td:nth-child(2) { padding: 12px; background: #fcfcfb; }
  .product-link { min-width: 0; width: 100%; }
  .ledger-product-thumb { flex-basis: 48px; width: 48px; height: 48px; }
  .ledger-product-copy b { font-size: 15px; }
  .cost-breakdown { text-align: right; }
  .cost-breakdown span { font-size: 9px; }

  body.detail-mode .sidebar { display: none !important; }
  body.detail-mode .workspace { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  body.detail-mode main { padding-bottom: 96px; }
  .back-link { min-height: 38px; margin-bottom: 6px; }
  .detail-hero { grid-template-columns: 1fr; gap: 13px; padding: 15px; }
  .detail-identity { align-items: flex-start; gap: 12px; }
  .detail-product-thumb { flex-basis: 62px; width: 62px; height: 62px; border-radius: 13px; }
  .detail-code-line { gap: 5px; }
  .detail-code-edit { min-height: 32px; }
  .detail-hero h2 { font-size: 21px; }
  .detail-statuses { margin-top: 6px; }
  .detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-summary div { padding: 9px 10px; }
  .detail-tabs { top: 64px; margin: 9px -12px; padding: 7px 12px; }
  .tab-button { min-height: 40px; }
  .detail-panel { padding: 13px 11px; }

  .recipe-page-heading { padding-bottom: 10px !important; }
  .recipe-page-heading .muted { display: none; }
  .mobile-cost-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 10px; overflow: hidden; border-radius: 12px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  .mobile-cost-strip > div { padding: 11px 9px; color: white; background: var(--v3-green); }
  .mobile-cost-strip span, .mobile-cost-strip strong { display: block; }
  .mobile-cost-strip span { color: #e0d8c9; font-size: 9px; }
  .mobile-cost-strip strong { margin-top: 4px; font-size: 15px; }
  .recipe-workbench { display: block; }
  .recipe-cost-aside { display: none; }
  .recipe-switcher { position: sticky; top: 121px; z-index: 27; margin: 0 -11px 10px; padding: 7px 11px; border-width: 1px 0; border-radius: 0; background: rgba(255,255,255,.96); }
  .recipe-switcher-buttons { width: 100%; }
  .recipe-jump { min-height: 42px; }
  .recipe-section { display: none; margin-top: 0; }
  .recipe-section.mobile-active { display: block; }
  .recipe-section-heading { min-height: 62px; padding: 10px; }
  .recipe-section-heading > div:last-child { width: 100%; }
  .recipe-section-heading .add-recipe-row { min-width: 108px; }
  .recipe-table-scroll,
  .recipe-section[data-recipe-type="PACKAGE"] .recipe-table-scroll { min-height: 180px; max-height: min(49dvh, 430px); overflow-y: auto; }
  .recipe-table-scroll .responsive-table tbody { padding: 8px; }
  .recipe-table-scroll .responsive-table tbody tr { overflow: visible; }
  .recipe-table-scroll .responsive-table td { grid-template-columns: 76px minmax(0, 1fr); }
  .recipe-editing-tip { margin-bottom: 4px; }
  .recipe-mobile-actions {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    display: grid;
    grid-template-columns: .9fr 1.3fr;
    gap: 9px;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid var(--v3-line);
    background: rgba(255,255,255,.98);
    box-shadow: 0 -10px 28px rgba(47,37,18,.12);
    backdrop-filter: blur(14px);
  }
  .recipe-mobile-actions .btn { min-height: 48px; }
  .table-actions { bottom: 0; }
}

@media (max-width: 540px) {
  .hero-panel { padding-right: 106px; }
  .mobile-quick-actions { gap: 6px; }
  .quick-action-card { min-height: 88px; padding: 10px 9px; }
  .filter-grid, .material-filters { grid-template-columns: 1fr; }
  .detail-product-thumb { flex-basis: 58px; width: 58px; height: 58px; }
}

@media print {
  .recipe-mobile-actions, .recipe-cost-aside, .detail-code-edit, .mobile-quick-actions { display: none !important; }
  .detail-hero { grid-template-columns: 1fr auto; }
}

/* V3.1 — pixel-aligned implementation of the approved Figma desktop/H5 frames */
:root {
  --ui31-ink: #2b2110;
  --ui31-muted: #8c7c5b;
  --ui31-line: #ecdfc2;
  --ui31-canvas: #f6ecd6;
  --ui31-deep: #3d2b0c;
  --ui31-green: #a06a0f;
  --ui31-green-2: #c98a1c;
  --ui31-gold: #f2c14e;
  --ui31-shadow: 0 8px 24px rgba(48,39,20,.055);
}

html { background: #eeece8; }
body { min-width: 1120px; color: var(--ui31-ink); background: #eeece8; }
.app-shell {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  grid-template-columns: 224px minmax(0, 1216px);
  background: var(--ui31-canvas);
  box-shadow: 0 0 0 1px rgba(52,38,11,.04), 0 20px 70px rgba(44,34,14,.08);
}
.workspace { width: 100%; min-width: 0; }
.sidebar {
  width: 224px;
  height: 100vh;
  padding: 24px 18px 20px;
  gap: 12px;
  color: white;
  background: var(--ui31-deep);
  box-shadow: none;
}
.brand { width: 188px; height: 52px; gap: 10px; padding: 0; }
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  color: var(--ui31-deep);
  background: var(--ui31-gold);
  box-shadow: none;
  font-family: Arial Black, Inter, sans-serif;
  font-size: 21px;
  font-style: italic;
}
.brand strong { font-size: 16px; line-height: 22px; }
.brand span { max-width: 136px; margin-top: 1px; color: #d8d0bf; font-size: 10px; line-height: 16px; white-space: nowrap; }
.sidebar-divider { flex: 0 0 1px; width: 188px; height: 1px; background: #55472a; }
.nav-list { width: 188px; gap: 4px; }
.nav-item {
  min-height: 48px;
  gap: 12px;
  padding: 0 14px;
  border-radius: 10px;
  color: #e0dacd;
  font-size: 14px;
  font-weight: 400;
}
.nav-item span { width: 18px; color: inherit; font-size: 17px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: #524324; }
.nav-item.active::before { display: none; }
.nav-item.active span { color: var(--ui31-gold); }
.nav-section-label {
  display: block;
  margin: 3px 0 0;
  color: #aa9f88;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.sidebar-quick-links { display: grid; width: 188px; gap: 4px; }
.sidebar-quick-links button {
  width: 188px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  color: #e8e2d7;
  background: transparent;
  font-size: 13px;
  text-align: left;
}
.sidebar-quick-links button:hover { color: white; background: rgba(255,255,255,.07); }
.sidebar-spacer { flex: 1 1 auto; min-height: 12px; }
.sidebar-note {
  flex: 0 0 76px;
  width: 188px;
  height: 76px;
  margin: 0;
  padding: 12px;
  border-color: #65522d;
  border-radius: 12px;
  background: #483817;
}
.sidebar-note strong { color: #ebdcbd; font-size: 12px; line-height: 18px; }
.sidebar-note small { margin-top: 3px; color: #c6bca9; font-size: 11px; line-height: 17px; }
.sidebar-reset { width: 188px; margin: -4px 0 0; padding: 4px 0; color: #d1c9b9 !important; font-size: 10px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; width: 188px; height: 50px; }
.sidebar-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ui31-deep);
  background: var(--ui31-gold);
  font-size: 13px;
  font-weight: 800;
}
.sidebar-user > div { min-width: 0; width: 110px; }
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: white; font-size: 13px; line-height: 20px; }
.sidebar-user small { color: #c6bca9; font-size: 11px; line-height: 17px; }
.sidebar-user > span:last-child { color: #c6bca9; font-size: 14px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  width: 100%;
  height: 72px;
  padding: 0 32px;
  gap: 16px;
  border-bottom: 1px solid var(--ui31-line);
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(12px);
}
.topbar-title-group { width: 500px; min-width: 280px; }
.topbar h1 { margin: 0; color: var(--ui31-ink); font-size: 22px; line-height: 30px; letter-spacing: -.02em; }
.topbar-subtitle { margin: 0; color: var(--ui31-muted); font-size: 11px; line-height: 17px; }
.mobile-brand-line { display: none; }
.topbar-main-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.global-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 250px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ui31-line);
  border-radius: 10px;
  color: var(--ui31-muted);
  background: var(--ui31-canvas);
}
.global-search span { flex: 0 0 auto; font-size: 17px; }
.global-search input { min-height: 0; height: 40px; margin: 0; padding: 0; border: 0; box-shadow: none; color: var(--ui31-ink); background: transparent; font-size: 13px; }
.global-search input:focus { border: 0; box-shadow: none; }
.mobile-actions-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--ui31-line);
  border-radius: 10px;
  color: var(--ui31-green);
  background: white;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
}
.topbar-primary, .topbar-back { width: 120px; min-height: 44px; border-radius: 10px; font-size: 14px; }
.topbar-back { display: none; color: var(--ui31-green); border-color: #d2ccbf; }
body.detail-mode .topbar-primary { display: none !important; }
body.detail-mode .topbar-back { display: inline-flex; }
body[data-active-view="combos"] .topbar-primary,
body[data-active-view="materials"] .topbar-primary { display: none; }
.top-actions {
  position: absolute;
  top: 62px;
  right: 32px;
  z-index: 80;
  display: none;
  width: 310px;
  max-height: calc(100vh - 90px);
  align-items: stretch;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--ui31-line);
  border-radius: 14px;
  background: white;
  box-shadow: 0 20px 60px rgba(49,38,17,.2);
}
.top-actions.mobile-open { display: flex; }
.top-actions .btn { width: 100%; min-height: 42px; }
.account-badge { max-width: none; padding: 10px 12px; text-align: left; }
.operator-field { justify-content: space-between; min-height: 42px; }
.operator-field input { width: 170px; min-height: 40px; margin: 0; }

main { width: 100%; max-width: none; padding: 24px 32px 40px; }
.view { width: 100%; }
.panel { border: 1px solid var(--ui31-line); border-radius: 16px; box-shadow: var(--ui31-shadow); }
.panel + .panel { margin-top: 0; }
.panel-heading { min-height: 54px; padding: 14px 20px 10px; }
.panel-heading h3 { margin: 0; font-size: 16px; line-height: 24px; }
.panel-heading .text-button { font-size: 11px; }

.hero-panel {
  min-height: 112px;
  height: 112px;
  align-items: center;
  padding: 20px 28px;
  border-radius: 18px;
  color: white;
  background: var(--ui31-green);
  box-shadow: none;
}
.hero-panel::before, .hero-panel::after { display: none; }
.hero-summary-copy { min-width: 0; }
.hero-greeting { display: block; color: #e4dccb; font-size: 13px; line-height: 20px; }
.hero-panel h2 { max-width: none; margin: 4px 0 3px; font-size: 24px; line-height: 34px; letter-spacing: -.025em; }
.hero-panel p { margin: 0; color: #efe7d7; font-size: 12px; line-height: 19px; }
.system-health-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 198px;
  height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.10);
}
.system-health-card .status-dot { flex: 0 0 9px; background: #f0b42b; }
.system-health-card strong, .system-health-card small { display: block; }
.system-health-card strong { color: white; font-size: 12px; line-height: 18px; }
.system-health-card small { margin-top: 3px; color: #e4dccb; font-size: 10px; line-height: 15px; }

.metric-grid, #dashboardMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.metric-card {
  min-height: 136px;
  height: 136px;
  padding: 18px;
  border-color: var(--ui31-line);
  border-radius: 14px;
  box-shadow: none;
}
.metric-card-top > span { color: var(--ui31-muted); font-size: 12px; line-height: 18px; }
.metric-card-top > i { width: 34px; height: 34px; border-radius: 10px; color: var(--ui31-green); background: #f4f0e7; font-size: 14px; }
.metric-card strong { margin-top: 10px; color: var(--ui31-ink); font-size: 27px; line-height: 34px; letter-spacing: -.04em; }
.metric-card small { margin-top: 5px; color: var(--ui31-muted); font-size: 11px; line-height: 16px; }
.metric-card.warning { border-color: #f2dfac; background: #fff9ea; }
.metric-card.warning .metric-card-top > i { color: #8a6518; background: #ffe4a5; }
.metric-card.emphasis { color: white; border-color: var(--ui31-green); background: var(--ui31-green); }
.metric-card.emphasis strong { color: white; }
.metric-card.emphasis .metric-card-top > span,
.metric-card.emphasis small { color: #e4dccb; }
.metric-card.emphasis .metric-card-top > i { color: var(--ui31-deep); background: var(--ui31-gold); }
.mobile-quick-actions { display: none; }

.dashboard-grid { grid-template-columns: minmax(0, 560px) minmax(0, 574px); gap: 18px; margin-bottom: 18px; }
.dashboard-grid > .panel { height: 236px; overflow: hidden; }
.bar-chart { padding: 4px 20px 18px; }
.bar-row { grid-template-columns: 76px 1fr 24px; gap: 10px; margin-top: 10px; color: #5e5239; font-size: 12px; }
.bar-track { height: 8px; background: #eceae7; }
.bar-fill { background: #805d16; }
.lifecycle-project .bar-fill { background: #b9b1a0; }
.lifecycle-developing .bar-fill { background: #d99a20; }
.lifecycle-pending_approval .bar-fill { background: var(--ui31-gold); }
.lifecycle-approved .bar-fill { background: #805d16; }
.lifecycle-disabled .bar-fill { background: #afa693; }
.bar-row strong { font-size: 12px; }
.attention-count { min-width: 58px; height: 24px; padding: 4px 10px; border-radius: 999px; color: #9a6416; background: #fff4d6; font-size: 10px; text-align: center; }
.attention-list { padding: 0 20px 12px; }
.attention-item {
  width: 100%;
  height: 55px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid #eeece8;
  border-radius: 0;
  color: var(--ui31-ink);
  background: transparent;
  text-align: left;
}
.attention-item:first-child { border-top: 0; }
.attention-item:hover { background: #fcfcfb; }
.attention-item > div:first-child { min-width: 0; }
.attention-item strong { overflow: hidden; font-size: 13px; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }
.attention-item span { overflow: hidden; margin-top: 1px; color: var(--ui31-muted); font-size: 10px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.attention-due { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.attention-due span { color: #9a6416; }
.attention-due b { color: #9b8f77; font-size: 16px; font-weight: 500; }
.attention-empty { display: grid; place-content: center; height: 165px; color: var(--ui31-muted); text-align: center; }
.attention-empty strong, .attention-empty span { display: block; }
.attention-empty strong { color: var(--ui31-ink); font-size: 13px; }
.attention-empty span { margin-top: 5px; font-size: 10px; }
#recentActivityPanel { height: 212px; overflow: hidden; }
#recentActivityPanel .panel-heading { height: 54px; }
#recentActivityPanel .table-wrap { overflow: hidden; }
#recentActivityPanel table { table-layout: fixed; }
#recentActivityPanel th { height: 34px; padding: 8px 16px; font-size: 10px; }
#recentActivityPanel td { height: 42px; padding: 9px 16px; font-size: 11px; }
#recentActivityPanel th:nth-child(1) { width: 22%; }
#recentActivityPanel th:nth-child(2) { width: 24%; }
#recentActivityPanel th:nth-child(3) { width: 16%; }

/* Product ledger */
.ledger-toolbar { display: none; }
#productsView > #productMetrics { margin: 0 0 12px; gap: 12px; }
#productsView > #productMetrics .metric-card { min-height: 94px; height: 94px; padding: 16px; }
#productsView > #productMetrics .metric-card strong { margin-top: 1px; font-size: 25px; line-height: 32px; }
#productsView > #productMetrics .metric-card small { margin-top: 0; font-size: 10px; }
#productsView > #productMetrics .metric-card-top > i { width: 34px; height: 34px; }
.ledger-search-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 232px;
  height: 36px;
  margin: 0 0 -48px 12px;
  padding: 0 10px;
  border: 1px solid var(--ui31-line);
  border-radius: 9px;
  color: var(--ui31-muted);
  background: white;
  position: relative;
  z-index: 2;
}
.ledger-search-shell input { min-height: 0; height: 34px; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 11px; }
.ledger-search-shell input:focus { border: 0; box-shadow: none; }
.ledger-search-shell button { display: none; }
#productsView .filter-panel { min-height: 94px; margin: 0 0 12px; padding: 8px 12px 10px 256px; border-radius: 14px; box-shadow: none; }
#productsView .quick-filters { height: 32px; gap: 7px; padding: 0; border: 0; }
#productsView .chip { min-height: 26px; padding: 4px 12px; font-size: 10px; }
#productsView .filter-grid { grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 8px; padding-top: 7px; }
#productsView .filter-grid label { font-size: 0; }
#productsView .filter-grid input,
#productsView .filter-grid select { min-height: 30px; height: 30px; margin: 0; padding: 5px 9px; border-radius: 8px; font-size: 10px; }
#productsView .table-panel { overflow: hidden; border-radius: 16px; }
#productsView .table-panel > .table-wrap { order: 1; max-height: calc(100vh - 340px); margin: 0 16px; overflow: auto; }
#productsView .table-panel { display: flex; flex-direction: column; }
#productsView .table-meta { order: 2; min-height: 46px; padding: 12px 10px; border-top: 1px solid var(--ui31-line); border-bottom: 0; font-size: 11px; }
.product-table { width: 100%; min-width: 920px; table-layout: fixed; }
.product-table th { height: 42px; padding: 10px 14px; font-size: 10px; }
.product-table td { height: 66px; padding: 8px 14px; font-size: 12px; }
.product-table th:nth-child(1) { width: 28%; }
.product-table th:nth-child(2) { width: 11%; }
.product-table th:nth-child(3) { width: 11%; }
.product-table th:nth-child(4) { width: 11%; }
.product-table th:nth-child(5) { width: 18%; }
.product-table th:nth-child(6) { width: 13%; }
.product-table th:nth-child(7) { width: 8%; text-align: center; }
.product-link { width: 100%; min-width: 0; color: var(--ui31-ink); }
.ledger-product-thumb { display: none; }
.ledger-product-copy b { font-size: 14px; line-height: 21px; }
.ledger-product-copy .product-code { margin-top: 1px; color: var(--ui31-muted); font-size: 11px; line-height: 19px; }
.badge { min-width: 64px; justify-content: center; padding: 5px 10px; font-size: 11px; }
.progress { min-width: 120px; }
.progress > span { font-size: 11px; }
.progress-bar { width: 150px; max-width: 100%; height: 6px; }
.progress-bar i { background: var(--ui31-gold); }
.progress-bar i.complete { background: var(--ui31-green-2); }
.ledger-owner-cell { display: flex; align-items: center; gap: 8px; }
.owner-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: #635c4d; background: #e9e5dc; font-size: 10px; }
.ledger-action-cell { text-align: center; }
.ledger-open { width: 36px; height: 32px; padding: 0; border: 0; color: #877552; background: transparent; font-size: 17px; font-weight: 800; letter-spacing: 2px; }

/* Product detail and recipe */
#detailView { width: 100%; }
.detail-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 126px;
  padding: 18px 20px;
  border: 1px solid var(--ui31-line);
  border-radius: 16px;
  color: var(--ui31-ink);
  background: white;
  box-shadow: none;
}
.detail-identity { gap: 18px; }
.detail-product-thumb { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 14px; font-size: 26px; }
.detail-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.detail-name-row h2 { overflow: hidden; margin: 0; font-size: 22px; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; }
.detail-identity-copy > p { margin: 2px 0 5px; color: var(--ui31-muted); font-size: 12px; line-height: 18px; }
.detail-editable-code { display: flex; align-items: center; gap: 8px; width: 254px; height: 34px; padding: 0 10px; border: 1px solid #d3cfc8; border-radius: 8px; background: #f9f8f7; }
.detail-editable-code > span { color: var(--ui31-muted); font-size: 10px; }
.detail-editable-code > strong { flex: 1; font-size: 13px; }
.detail-code-edit { min-height: 30px; padding: 0; font-size: 11px; }
.detail-summary { grid-template-columns: repeat(3, 132px); gap: 10px; }
.detail-summary div { width: 132px; height: 76px; padding: 10px 12px; border: 0; border-radius: 12px; background: #f9f8f7; }
.detail-summary span, .detail-summary strong, .detail-summary small { display: block; }
.detail-summary span { color: var(--ui31-muted); font-size: 10px; line-height: 15px; }
.detail-summary strong { margin-top: 1px; color: var(--ui31-ink); font-size: 21px; line-height: 28px; }
.detail-summary small { color: #9b8f77; font-size: 10px; line-height: 15px; }
.detail-summary .margin-card strong, .detail-summary .margin-card small { color: var(--ui31-green); }
.detail-tabs { position: sticky; top: 72px; z-index: 30; height: 50px; margin: 10px 0 14px; padding: 3px 12px; gap: 4px; border: 1px solid var(--ui31-line); border-radius: 14px; background: rgba(255,255,255,.98); }
.tab-button { width: 118px; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--ui31-line); border-radius: 0; color: var(--ui31-muted); background: white; font-size: 14px; font-weight: 400; }
.tab-button.active { color: var(--ui31-green); border: 0; border-bottom: 3px solid var(--ui31-green); background: white; font-weight: 600; }
.detail-panel { padding: 19px; }
.detail-panel:has(.recipe-workbench) { padding: 0; border: 0; background: transparent; box-shadow: none; }
.recipe-workbench { width: 1120px; max-width: 100%; margin: 0 auto; grid-template-columns: minmax(0, 768px) minmax(286px, 338px); gap: 14px; }
.recipe-editor-column { padding: 0 12px; overflow: hidden; border: 1px solid var(--ui31-line); border-radius: 16px; background: white; }
.recipe-page-heading { min-height: 56px; padding: 12px 0 8px !important; }
.recipe-page-heading > div { display: flex; flex-direction: column; align-items: flex-start; }
.recipe-page-heading h3 { font-size: 16px; }
.recipe-page-heading .muted { margin-top: 2px; font-size: 10px; }
.recipe-switcher { display: flex; align-items: center; justify-content: space-between; height: 48px; margin: 0; padding: 4px; border: 0; border-radius: 12px; background: #f3f1ee; }
.recipe-switcher-buttons { width: 238px; gap: 4px; }
.recipe-jump { width: 117px; min-height: 40px; justify-content: center; padding: 0 8px; border: 0; border-radius: 9px; color: var(--ui31-muted); background: transparent; font-size: 11px; }
.recipe-jump b { margin-left: 4px; color: inherit; background: transparent; font-size: 11px; }
.recipe-jump.active { color: var(--ui31-green); border: 1px solid #e0dcd5; background: white; box-shadow: none; }
.recipe-jump.active b { color: var(--ui31-green); }
.recipe-switcher > small { padding: 0 8px; color: #9a6416; font-size: 9px; }
.recipe-section { display: none; margin: 10px 0 0; padding: 0; overflow: hidden; border-radius: 12px; }
.recipe-section.mobile-active { display: block; }
.recipe-section-heading { min-height: 52px; padding: 8px 10px; background: #fbfaf7; }
.recipe-section-heading strong { color: var(--ui31-ink); font-size: 13px; }
.recipe-section-heading span { font-size: 10px; }
.recipe-section-heading b { color: var(--ui31-green); font-size: 12px; }
.recipe-section-heading .btn { min-height: 36px; padding: 0 12px; font-size: 11px; }
.section-scroll-hint { display: none; }
.recipe-table-scroll,
.recipe-section[data-recipe-type="PACKAGE"] .recipe-table-scroll { max-height: min(486px, calc(100vh - 430px)); min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.recipe-table-scroll { scrollbar-width: thin; scrollbar-color: #b5ae9f #f2f0ed; }
.recipe-table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.recipe-table-scroll::-webkit-scrollbar-track { background: #f2f0ed; }
.recipe-table-scroll::-webkit-scrollbar-thumb { border: 2px solid #f2f0ed; border-radius: 999px; background: #b5ae9f; }
.recipe-table-scroll table { width: 100%; min-width: 720px; table-layout: fixed; }
.recipe-table-scroll th { height: 40px; padding: 8px 5px; font-size: 9px; }
.recipe-table-scroll td { height: 64px; padding: 8px 5px; }
.recipe-table-scroll th:nth-child(1), .recipe-table-scroll td:nth-child(1),
.recipe-table-scroll th:nth-child(8), .recipe-table-scroll td:nth-child(8) { display: none; }
.recipe-table-scroll th:nth-child(2) { width: 17%; }
.recipe-table-scroll th:nth-child(3) { width: 27%; }
.recipe-table-scroll th:nth-child(4) { width: 12%; }
.recipe-table-scroll th:nth-child(5) { width: 9%; }
.recipe-table-scroll th:nth-child(6) { width: 13%; }
.recipe-table-scroll th:nth-child(7) { width: 12%; }
.recipe-table-scroll th:nth-child(9) { width: 10%; }
.recipe-table-scroll .data-table-input { width: 100%; min-width: 0; height: 38px; padding: 7px 8px; border-radius: 8px; font-size: 10px; }
.recipe-table-scroll .recipe-code, .recipe-table-scroll .recipe-name { min-width: 0; }
.recipe-cost { color: #5e5239; font-size: 10px; }
.row-actions { gap: 4px; }
.row-actions .mini-icon, .row-actions .row-delete { width: 20px; height: 26px; padding: 0; border-radius: 6px; background: #f3f1ee; font-size: 10px; }
.row-actions .row-delete { color: var(--red); background: #fdecea; }
.recipe-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 14px 0; border-top: 1px solid var(--ui31-line); }
.recipe-editor-footer > span { color: #5e5239; font-size: 11px; }
.recipe-editor-footer > div { display: flex; gap: 8px; }
.recipe-editor-footer .btn { min-height: 44px; }
.recipe-cost-aside { position: sticky; top: 136px; gap: 14px; }
.recipe-aside-card, .launch-summary-card, .recipe-code-note { width: 100%; border-radius: 16px; box-shadow: none; }
.cost-summary-card { min-height: 300px; padding: 20px; color: white; border: 0; background: var(--ui31-green); }
.cost-summary-card .recipe-aside-heading { padding: 0 0 9px; border-bottom: 0; }
.cost-summary-card .recipe-aside-heading h4 { margin: 0; color: white; font-size: 16px; line-height: 24px; }
.cost-summary-card .recipe-aside-heading span { display: block; margin-top: 5px; color: #e4dccb; font-size: 11px; }
.cost-summary-card .recipe-cost-list { padding: 3px 0 4px; }
.cost-summary-card .recipe-cost-list > div { padding: 8px 0; color: #e4dccb; border: 0; font-size: 12px; }
.cost-summary-card .recipe-cost-list strong { color: white; font-size: 14px; }
.cost-summary-card .recipe-cost-list .total { margin: 0; padding: 8px 0; color: #e4dccb; background: transparent; }
.cost-summary-card .recipe-cost-list .total strong { color: white; font-size: 18px; }
.gross-margin-block { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding-top: 10px; border-top: 1px solid #80693a; }
.gross-margin-block span, .gross-margin-block strong { display: block; }
.gross-margin-block span { color: #e4dccb; font-size: 11px; }
.gross-margin-block strong { margin-top: 1px; color: var(--ui31-gold); font-size: 26px; line-height: 34px; }
.gross-margin-block > b { padding: 5px 10px; border-radius: 999px; color: white; background: #7f632b; font-size: 10px; }
.launch-summary-card { min-height: 228px; padding: 18px; border: 1px solid var(--ui31-line); background: white; }
.launch-summary-heading { display: flex; align-items: center; justify-content: space-between; }
.launch-summary-heading h4 { margin: 0; font-size: 15px; }
.launch-summary-heading span { padding: 4px 10px; border-radius: 999px; color: #9a6416; background: #fff4d6; font-size: 11px; }
.launch-summary-card > p { margin: 8px 0 10px; color: var(--ui31-muted); font-size: 11px; }
.launch-progress { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: #eceae7; }
.launch-progress i { display: block; height: 100%; border-radius: inherit; background: var(--ui31-gold); }
.launch-check-preview { display: grid; gap: 5px; margin-top: 10px; }
.launch-check-preview span { overflow: hidden; font-size: 10px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.launch-check-preview .done { color: var(--ui31-green); }
.launch-check-preview .todo { color: #9a6416; }
.tab-button-link { margin-top: 7px; padding: 0; font-size: 11px; }
.recipe-code-note { display: grid; gap: 6px; min-height: 128px; padding: 16px; color: #7b5a1b; border: 1px solid #f0dca4; background: #fff9ea; }
.recipe-code-note strong { font-size: 13px; }
.recipe-code-note span { font-size: 11px; line-height: 18px; }
.recipe-editing-tip, .recipe-save-desktop, .launch-aside-card { display: none; }
.mobile-cost-strip, .recipe-mobile-actions { display: none; }

@media (max-width: 1180px) and (min-width: 901px) {
  .global-search { width: 210px; }
  .topbar-title-group { width: 360px; }
  .system-health-card { width: 180px; }
  .recipe-workbench { grid-template-columns: minmax(0, 1fr) 286px; }
  .detail-summary { grid-template-columns: repeat(3, 116px); }
  .detail-summary div { width: 116px; }
}

@media (max-width: 900px) {
  html { background: var(--ui31-canvas); scroll-padding-top: 72px; }
  body { min-width: 0; width: 100%; background: var(--ui31-canvas); }
  button, input, select, textarea { font-size: 16px; }
  .app-shell { display: block; width: min(390px, 100%); min-height: 100dvh; margin: 0 auto; box-shadow: none; }
  .workspace { width: 100%; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topbar {
    position: sticky;
    height: 64px;
    padding: 0 16px;
    gap: 10px;
  }
  .topbar-title-group {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: 24px 15px;
    column-gap: 10px;
    align-items: center;
    width: auto;
    min-width: 0;
    flex: 1;
  }
  .mobile-brand-line { display: block; grid-column: 1; grid-row: 1 / 3; width: 36px; height: 36px; }
  .mobile-brand-line span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ui31-deep); background: var(--ui31-gold); font-family: Arial Black, sans-serif; font-size: 17px; font-style: italic; }
  .mobile-brand-line strong { display: none; }
  .topbar h1 { grid-column: 2; grid-row: 1; max-width: none; margin: 0; font-size: 17px; line-height: 24px; }
  .topbar-subtitle { grid-column: 2; grid-row: 2; overflow: hidden; font-size: 10px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .global-search, .topbar-primary { display: none !important; }
  .topbar-main-actions { margin-left: 0; }
  .mobile-actions-toggle { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
  .top-actions { top: 57px; right: 12px; width: min(310px, calc(100vw - 24px)); }
  body.detail-mode .topbar-title-group { margin-left: 48px; }
  body.detail-mode .mobile-brand-line { display: none; }
  body.detail-mode .topbar-title-group { grid-template-columns: 1fr; grid-template-rows: 24px 15px; }
  body.detail-mode .topbar h1, body.detail-mode .topbar-subtitle { grid-column: 1; }
  body.detail-mode .topbar-back {
    position: absolute;
    left: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;
  }
  body.detail-mode .topbar-back::before { content: "‹"; color: var(--ui31-green); font-size: 22px; line-height: 1; }
  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: block;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 max(0px, calc((100vw - 390px) / 2)) env(safe-area-inset-bottom);
    border-top: 1px solid var(--ui31-line);
    color: var(--ui31-muted);
    background: white;
    box-shadow: none;
  }
  .brand, .sidebar-divider, .nav-section-label, .sidebar-quick-links, .sidebar-spacer, .sidebar-note, .sidebar-user, #resetDemoBtn { display: none !important; }
  .nav-list { display: flex; justify-content: space-between; gap: 0; width: min(390px, 100%); height: 64px; margin: 0 auto; padding: 0 19px; }
  .nav-item {
    flex: 0 0 78px;
    width: 78px;
    min-height: 56px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border-radius: 0;
    color: #95825c;
    background: white;
    font-size: 11px;
    line-height: 16px;
  }
  .nav-item span { width: auto; color: inherit; font-size: 18px; line-height: 22px; }
  .nav-item:hover, .nav-item.active { color: var(--ui31-green); background: white; }
  .nav-item.active span { color: var(--ui31-green); }
  body.detail-mode .sidebar { display: none !important; }
  #reloadCloudBtn:not(.hidden) { bottom: calc(70px + env(safe-area-inset-bottom)); }

  main { width: 100%; padding: 14px 16px 18px; }
  .panel { border-radius: 14px; box-shadow: none; }
  .hero-panel {
    display: block;
    width: 100%;
    min-height: 92px;
    height: 92px;
    padding: 15px 16px;
    border-radius: 16px;
  }
  .hero-greeting { font-size: 11px; line-height: 17px; }
  .hero-panel h2 { margin: 2px 0; font-size: 19px; line-height: 27px; white-space: nowrap; }
  .hero-panel p { max-width: none; font-size: 11px; line-height: 17px; white-space: nowrap; }
  .system-health-card { display: none; }
  .metric-grid, #dashboardMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
  .metric-card { min-height: 94px; height: 94px; padding: 12px 13px; border-radius: 13px; }
  .metric-card-top > i { display: none; }
  .metric-card-top > span { font-size: 10px; line-height: 15px; }
  .metric-card strong { margin-top: 1px; font-size: 22px; line-height: 29px; }
  .metric-card small { margin-top: 0; font-size: 10px; line-height: 15px; }
  .mobile-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-height: 104px;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--ui31-line);
    border-radius: 14px;
    background: white;
  }
  .mobile-quick-heading { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; height: 18px; }
  .mobile-quick-heading strong { font-size: 13px; }
  .mobile-quick-heading .text-button { font-size: 10px; }
  .quick-action-card {
    display: flex;
    min-height: 58px;
    height: 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px;
    border: 0;
    border-radius: 10px;
    color: #5e5239;
    background: #f4f0e7;
    text-align: center;
    box-shadow: none;
  }
  .quick-action-card.amber { background: #fff4d6; }
  .quick-action-card.blue { background: #eaf2fb; }
  .quick-action-card > span { width: auto; height: auto; color: var(--ui31-green); background: transparent; font-size: 16px; line-height: 20px; }
  .quick-action-card strong { align-self: auto; font-size: 10px; line-height: 15px; }
  .dashboard-grid { display: block; margin: 0; }
  .dashboard-grid > .panel:first-child { display: none; }
  .dashboard-grid > .attention-panel { height: 220px; }
  .attention-panel .panel-heading { height: 40px; min-height: 40px; padding: 10px 14px 4px; }
  .attention-panel .panel-heading h3 { font-size: 14px; }
  .attention-list { padding: 0 14px 8px; }
  .attention-item { height: 56px; }
  .attention-item strong { font-size: 12px; line-height: 18px; }
  .attention-item span { font-size: 10px; line-height: 15px; }
  #recentActivityPanel { display: none; }

  /* H5 ledger */
  #productsView.active { display: flex; flex-direction: column; }
  .ledger-toolbar { display: none; }
  #productsView > .ledger-search-shell { order: 1; }
  #productsView > #productMetrics { order: 2; }
  #productsView > .filter-panel { order: 3; }
  #productsView > .table-panel { order: 4; }
  .ledger-search-shell {
    width: 100%;
    height: 44px;
    margin: 0 0 12px;
    padding: 0 13px;
    border-color: #dad6cf;
    border-radius: 11px;
    z-index: auto;
  }
  .ledger-search-shell input { height: 42px; font-size: 13px; }
  .ledger-search-shell button { display: block; flex: 0 0 auto; padding: 0; border: 0; color: var(--ui31-green); background: transparent; font-size: 12px; }
  #productsView > #productMetrics {
    display: grid;
    grid-template-columns: 76px 76px 76px 104px;
    gap: 0;
    width: 100%;
    height: 72px;
    margin: 0 0 12px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--ui31-green);
  }
  #productsView > #productMetrics .metric-card {
    display: flex;
    min-height: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    color: white;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #productsView > #productMetrics .metric-card-top { order: 2; }
  #productsView > #productMetrics .metric-card-top > span { color: #e4dccb; font-size: 9px; line-height: 14px; }
  #productsView > #productMetrics .metric-card strong { order: 1; margin: 0; color: white; font-size: 18px; line-height: 24px; }
  #productsView > #productMetrics .metric-card small { display: none; }
  #productsView .filter-panel { min-height: 32px; margin: 0 0 12px; padding: 0; border: 0; background: transparent; }
  #productsView .quick-filters { height: 32px; gap: 7px; padding: 0; overflow-x: auto; }
  #productsView .chip { min-height: 32px; padding: 5px 16px; background: white; font-size: 10px; }
  #productsView .chip.active { background: var(--ui31-green); }
  #productsView .filter-grid { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--ui31-line); border-radius: 12px; background: white; }
  #productsView .filter-panel.filters-open .filter-grid { display: grid; }
  #productsView .filter-grid input, #productsView .filter-grid select { min-height: 40px; height: 40px; font-size: 12px; }
  #productsView .table-panel { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  #productsView .table-panel > .table-wrap { max-height: none; margin: 0; overflow: visible; }
  #productsView .table-meta, #productsView .product-table thead { display: none; }
  #productsView .product-table, #productsView .product-table tbody { display: block; width: 100%; min-width: 0; }
  #productsView .product-table tbody { display: grid; gap: 12px; padding: 0; }
  #productsView .product-table .product-ledger-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 22px;
    grid-template-areas:
      "product product status status"
      "cost margin owner owner"
      "progress progress progress action";
    gap: 8px 0;
    min-height: 132px;
    padding: 12px 13px;
    overflow: hidden;
    border: 1px solid var(--ui31-line);
    border-radius: 14px;
    background: white;
  }
  #productsView .product-table td { display: block; width: auto; height: auto; padding: 0; border: 0; background: transparent; }
  #productsView .product-table td { order: 0; }
  #productsView .product-table td::before { display: none; }
  .ledger-product-cell { grid-area: product; }
  .ledger-status-cell { grid-area: status; align-self: start; text-align: right; }
  .ledger-cost-cell { grid-area: cost; padding: 7px 8px !important; border-radius: 9px 0 0 9px !important; background: #f9f8f7 !important; }
  .ledger-margin-cell { grid-area: margin; padding: 7px 5px !important; background: #f9f8f7 !important; }
  .ledger-owner-cell { grid-area: owner; padding: 7px 8px !important; border-radius: 0 9px 9px 0 !important; background: #f9f8f7 !important; }
  .ledger-progress-cell { grid-area: progress; align-self: center; }
  .ledger-action-cell { grid-area: action; align-self: center; }
  .ledger-product-thumb { display: grid; flex-basis: 42px; width: 42px; height: 42px; border-radius: 10px; }
  .ledger-product-copy b { font-size: 13px; line-height: 19px; }
  .ledger-product-copy .product-code { font-size: 9px; line-height: 14px; }
  .ledger-status-cell .badge { min-width: 58px; padding: 5px 8px; font-size: 10px; }
  .ledger-cost-cell::before, .ledger-margin-cell::before, .ledger-owner-cell::before { display: inline !important; margin-right: 5px; color: var(--ui31-muted); font-size: 9px; }
  .ledger-cost-cell::before { content: "总成本"; }
  .ledger-margin-cell::before { content: "毛利率"; }
  .ledger-owner-cell::before { content: "负责人"; }
  .ledger-cost-cell strong, .ledger-margin-cell strong, .ledger-owner-cell > span:last-child { font-size: 10px; }
  .ledger-owner-cell { display: flex !important; align-items: center; gap: 3px; }
  .owner-avatar { display: none; }
  .ledger-progress-cell .progress { display: flex; align-items: center; gap: 8px; width: 100%; }
  .ledger-progress-cell .progress::before { content: "上架检查"; flex: 0 0 auto; color: #5e5239; font-size: 10px; font-weight: 600; }
  .ledger-progress-cell .progress > span { flex: 0 0 auto; font-size: 10px; }
  .ledger-progress-cell .progress-bar { flex: 1; width: auto; height: 6px; margin: 0; }
  .ledger-open { width: 22px; height: 24px; font-size: 0; }
  .ledger-open::before { content: "›"; color: #9b8f77; font-size: 14px; }

  /* H5 detail and recipe */
  body.detail-mode .workspace { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.detail-mode main { padding: 12px 16px 18px; }
  .detail-hero { display: block; min-height: 106px; padding: 12px 13px; border-radius: 14px; }
  .detail-identity { align-items: flex-start; gap: 8px; }
  .detail-product-thumb { flex-basis: 34px; width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
  .detail-identity-copy { flex: 1; }
  .detail-name-row { height: 34px; }
  .detail-name-row h2 { font-size: 14px; line-height: 20px; }
  .detail-name-row .badge { margin-left: auto; min-width: 58px; font-size: 10px; }
  .detail-identity-copy > p { margin: -12px 0 10px 42px; font-size: 9px; line-height: 14px; }
  .detail-editable-code { width: calc(100% + 42px); height: 40px; margin-left: -42px; padding: 0 10px; border-radius: 9px; }
  .detail-editable-code > span { font-size: 10px; }
  .detail-editable-code > strong { font-size: 12px; }
  .detail-code-edit { font-size: 10px; }
  .detail-summary { display: none; }
  .detail-tabs { position: sticky; top: 64px; height: 42px; margin: 10px 0; padding: 0; gap: 0; border-radius: 12px; overflow-x: auto; }
  .tab-button { flex: 0 0 auto; width: auto; min-width: 70px; min-height: 42px; padding: 0 12px; font-size: 11px; }
  .tab-button.active { border-bottom-width: 3px; }
  .detail-panel { padding: 12px; }
  .detail-panel:has(.recipe-workbench) { padding: 0; }
  .mobile-cost-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; height: 86px; margin: 0 0 10px; border-radius: 14px; background: var(--ui31-green); }
  .mobile-cost-strip > div { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0; color: white; background: transparent; }
  .mobile-cost-strip span { color: #e4dccb; font-size: 9px; line-height: 14px; }
  .mobile-cost-strip strong { margin-top: 1px; color: white; font-size: 16px; line-height: 23px; }
  .mobile-cost-strip > div:last-child strong { color: var(--ui31-gold); font-size: 17px; }
  .recipe-workbench { display: block; }
  .recipe-editor-column { padding: 0; overflow: visible; border: 0; background: transparent; }
  .recipe-page-heading { display: none; }
  .recipe-cost-aside { display: none; }
  .recipe-switcher { position: sticky; top: 116px; z-index: 28; height: 48px; margin: 0 0 10px; padding: 4px; border: 1px solid var(--ui31-line); border-radius: 12px; background: white; }
  .recipe-switcher-buttons { width: 238px; padding: 0; border-radius: 9px; background: #f3f1ee; }
  .recipe-jump { flex: 1; width: auto; min-height: 40px; }
  .recipe-switcher > small { display: flex; align-items: center; justify-content: center; width: 104px; height: 40px; padding: 0 5px; border-radius: 9px; color: #9a6416; background: #fff9ea; font-size: 9px; line-height: 14px; text-align: center; }
  .recipe-section { margin: 0; overflow: visible; border: 0; background: transparent; }
  .recipe-section-heading { min-height: 48px; margin-bottom: 8px; padding: 6px 8px; border: 1px solid var(--ui31-line); border-radius: 12px; background: white; }
  .recipe-section-heading > div:first-child { display: none; }
  .recipe-section-heading > div:last-child { width: 100%; }
  .recipe-section-heading b { margin-right: auto; }
  .recipe-section-heading .btn { margin-left: auto; min-height: 36px; }
  .recipe-table-scroll,
  .recipe-section[data-recipe-type="PACKAGE"] .recipe-table-scroll { max-height: min(56dvh, 520px); overflow-y: auto; }
  .recipe-table-scroll table, .recipe-table-scroll tbody { display: block; width: 100%; min-width: 0; }
  .recipe-table-scroll thead { display: none; }
  .recipe-table-scroll .responsive-table tbody { display: grid; gap: 10px; padding: 0 0 4px; }
  .recipe-table-scroll .responsive-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr 34px;
    grid-template-areas:
      "name name name cost"
      "code code code code"
      "qty unit price action";
    gap: 8px 6px;
    min-height: 142px;
    padding: 12px;
    border: 1px solid var(--ui31-line);
    border-radius: 14px;
    background: white;
    box-shadow: none;
  }
  .recipe-table-scroll td { display: block !important; width: auto !important; height: auto; padding: 0; border: 0; }
  .recipe-table-scroll td::before { display: none; }
  .recipe-table-scroll td:nth-child(1), .recipe-table-scroll td:nth-child(8) { display: none !important; }
  .recipe-table-scroll td:nth-child(2) { grid-area: code; }
  .recipe-table-scroll td:nth-child(3) { grid-area: name; }
  .recipe-table-scroll td:nth-child(4) { grid-area: qty; }
  .recipe-table-scroll td:nth-child(5) { grid-area: unit; }
  .recipe-table-scroll td:nth-child(6) { grid-area: price; }
  .recipe-table-scroll td:nth-child(7) { grid-area: cost; align-self: center; text-align: right; }
  .recipe-table-scroll td:nth-child(9) { grid-area: action; }
  .recipe-table-scroll .responsive-table .data-table-input { min-height: 0; }
  .recipe-table-scroll .recipe-name { height: 32px; padding: 0; border: 0; color: var(--ui31-ink); background: transparent; font-size: 11px; font-weight: 600; }
  .recipe-table-scroll .recipe-code { height: 34px; padding-left: 72px; background: #f9f8f7; font-size: 11px; }
  .recipe-table-scroll td:nth-child(2) { position: relative; }
  .recipe-table-scroll td:nth-child(2)::before { content: "物料编码"; position: absolute; z-index: 1; left: 9px; top: 10px; display: block; color: var(--ui31-muted); font-size: 9px; pointer-events: none; }
  .recipe-table-scroll .recipe-quantity, .recipe-table-scroll .recipe-unit, .recipe-table-scroll .recipe-price { height: 36px; padding: 8px; font-size: 10px; }
  .recipe-table-scroll td:nth-child(4)::before,
  .recipe-table-scroll td:nth-child(5)::before,
  .recipe-table-scroll td:nth-child(6)::before { position: absolute; z-index: 1; left: 8px; top: 11px; display: block; color: #9b8f77; font-size: 9px; pointer-events: none; }
  .recipe-table-scroll td:nth-child(4), .recipe-table-scroll td:nth-child(5), .recipe-table-scroll td:nth-child(6) { position: relative; }
  .recipe-table-scroll td:nth-child(4)::before { content: "用量"; }
  .recipe-table-scroll td:nth-child(5)::before { content: "单位"; }
  .recipe-table-scroll td:nth-child(6)::before { content: "单位价"; }
  .recipe-table-scroll .recipe-quantity { padding-left: 38px; }
  .recipe-table-scroll .recipe-unit { padding-left: 38px; }
  .recipe-table-scroll .recipe-price { padding-left: 46px; }
  .recipe-cost { color: var(--ui31-green); font-size: 12px; font-weight: 800; }
  .recipe-cost::before { display: none !important; }
  .row-actions .move-recipe-row { display: none; }
  .row-actions .row-delete { width: 34px; height: 36px; border-radius: 8px; font-size: 12px; }
  .recipe-editor-footer { display: none; }
  .recipe-mobile-actions {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 75;
    display: grid;
    grid-template-columns: 132px 216px;
    justify-content: center;
    gap: 10px;
    min-height: 74px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ui31-line);
    background: rgba(255,255,255,.98);
    box-shadow: none;
  }
  .recipe-mobile-actions .btn { min-height: 48px; border-radius: 10px; font-size: 14px; }
}

@media (max-width: 390px) {
  .hero-panel h2 { font-size: 18px; }
  #productsView > #productMetrics { grid-template-columns: repeat(3, 1fr) 1.25fr; }
  .recipe-mobile-actions { grid-template-columns: minmax(112px, .85fr) minmax(178px, 1.4fr); }
}

/* V3.2 — mobile accordion, regional menus and administrator themes */
.brand-mark,
.mobile-brand-line span,
.theme-preview-side span {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.sidebar { background: var(--ui31-deep); }
.nav-item.active { color: var(--ui31-deep); background: var(--ui31-gold); font-weight: 800; }
.hero-panel { background: linear-gradient(112deg, var(--ui31-green), color-mix(in srgb, var(--ui31-green) 80%, white 20%)); }
.btn.primary { color: #43300a; background: linear-gradient(180deg, #f5c047, #e7a726); }
.mobile-product-toggle,
.mobile-product-panel { display: none; }
body[data-active-view="regionalMenus"] .topbar-primary { display: none; }

/* Regional menu overview */
#regionalMenusView .regional-menu-toolbar { margin-bottom: 14px; }
#regionalMenusView .regional-menu-toolbar h2 { margin-top: 3px; }
#regionalMenuMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 14px; }
.regional-menu-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
  margin-bottom: 14px;
  padding: 12px 14px;
  box-shadow: none;
}
.regional-menu-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(380px, 42vw);
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ui31-line);
  border-radius: 10px;
  color: var(--ui31-muted);
  background: #faf9f8;
}
.regional-menu-search input {
  min-height: 0;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.regional-menu-search input:focus { border: 0; box-shadow: none; }
.regional-menu-filter .quick-filters { padding: 0; border: 0; }
.regional-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.regional-menu-card {
  position: relative;
  min-height: 300px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--ui31-line);
  border-radius: 16px;
  background: white;
  box-shadow: var(--ui31-shadow);
}
.regional-menu-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--ui31-green), var(--ui31-accent, var(--ui31-gold)));
}
.regional-menu-card-head,
.regional-menu-card-title,
.regional-menu-card-foot,
.regional-menu-region,
.regional-menu-date { display: flex; align-items: center; }
.regional-menu-card-head,
.regional-menu-card-title,
.regional-menu-card-foot { justify-content: space-between; gap: 14px; }
.regional-menu-region { gap: 10px; }
.regional-menu-region > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--ui31-green);
  background: color-mix(in srgb, var(--ui31-green) 10%, white 90%);
  font-size: 17px;
}
.regional-menu-region small,
.regional-menu-region strong { display: block; }
.regional-menu-region small { color: var(--ui31-muted); font-size: 9px; line-height: 13px; }
.regional-menu-region strong { margin-top: 1px; font-size: 13px; line-height: 19px; }
.regional-menu-card-title { margin-top: 17px; }
.regional-menu-card-title h3 { margin: 0; font-size: 18px; line-height: 26px; }
.regional-menu-card-title > div > span { color: var(--ui31-muted); font-size: 10px; line-height: 16px; }
.regional-menu-count { color: var(--ui31-green); font-size: 18px; font-weight: 800; white-space: nowrap; }
.regional-menu-date { gap: 8px; margin: 12px 0; color: var(--ui31-muted); font-size: 10px; }
.regional-menu-date i { color: #c6bfb1; font-style: normal; }
.regional-menu-preview {
  display: grid;
  gap: 7px;
  min-height: 105px;
  max-height: 132px;
  padding: 10px 12px;
  overflow: auto;
  border-radius: 11px;
  background: #f9f8f6;
  scrollbar-gutter: stable;
}
.regional-menu-section-preview { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: start; }
.regional-menu-section-preview strong { color: var(--ui31-green); font-size: 10px; line-height: 17px; }
.regional-menu-section-preview span { overflow: hidden; color: #6b5d41; font-size: 10px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.regional-menu-empty-preview { display: grid; place-items: center; min-height: 80px; color: var(--ui31-muted); font-size: 11px; }
.regional-menu-card-foot { margin-top: 13px; padding-top: 12px; border-top: 1px solid #f1f0ed; }
.regional-menu-card-foot > span { color: var(--ui31-muted); font-size: 10px; }
.regional-menu-empty {
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  min-height: 320px;
  padding: 34px;
  border: 1px dashed #d8d4cb;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  text-align: center;
}
.regional-menu-empty > span { color: var(--ui31-green); font-size: 28px; }
.regional-menu-empty strong { margin-top: 8px; }
.regional-menu-empty p { margin: 5px 0 16px; color: var(--ui31-muted); font-size: 12px; }

/* Regional menu editor */
.regional-menu-modal { width: min(1020px, calc(100vw - 32px)); }
.regional-menu-modal > form { width: 100%; max-height: min(860px, calc(100dvh - 44px)); overflow: auto; }
.regional-menu-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-composer { margin-top: 18px; padding: 16px; border: 1px solid var(--ui31-line); border-radius: 14px; background: #faf9f8; }
.menu-composer-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.menu-composer-heading strong { font-size: 15px; }
.menu-composer-heading span { margin-left: 8px; color: var(--ui31-green); font-size: 11px; }
.menu-composer-heading small { color: var(--ui31-muted); font-size: 10px; }
.menu-add-row { display: grid; grid-template-columns: 128px minmax(240px, 1.45fr) minmax(170px, 1fr) 126px; gap: 10px; align-items: end; }
.menu-add-row label { color: var(--ui31-muted); font-size: 10px; }
.menu-add-row select,
.menu-add-row input { min-height: 40px; margin-top: 5px; }
.menu-add-row .btn { min-height: 40px; }
.regional-menu-items-scroll { max-height: 310px; margin-top: 14px; overflow: auto; border: 1px solid var(--ui31-line); border-radius: 11px; background: white; scrollbar-gutter: stable; }
.regional-menu-items-scroll table { min-width: 760px; }
.regional-menu-items-scroll th { position: sticky; top: 0; z-index: 2; background: #f6f5f2; }
.regional-menu-items-scroll td:nth-child(2) strong,
.regional-menu-items-scroll td:nth-child(2) span { display: block; }
.regional-menu-items-scroll td:nth-child(2) span { margin-top: 2px; }
.menu-order-actions { display: flex; gap: 4px; }
.mini-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ui31-line); border-radius: 8px; color: var(--ui31-green); background: white; font-weight: 800; }

/* Theme editor */
.theme-modal { width: min(720px, calc(100vw - 32px)); }
.theme-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.theme-presets button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--ui31-line);
  border-radius: 10px;
  color: var(--ui31-ink);
  background: white;
  font-size: 11px;
  font-weight: 700;
}
.theme-presets i { width: 18px; height: 18px; border-radius: 6px; background: var(--swatch); }
.theme-editor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.theme-editor-grid label { color: var(--ui31-muted); font-size: 10px; }
.theme-editor-grid input[type="color"] { width: 100%; height: 46px; margin-top: 6px; padding: 4px; cursor: pointer; }
.theme-preview {
  --preview-primary: #a06a0f;
  --preview-sidebar: #3d2b0c;
  --preview-accent: #f2c14e;
  --preview-canvas: #f6ecd6;
  display: grid;
  grid-template-columns: 128px 1fr;
  min-height: 152px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--ui31-line);
  border-radius: 14px;
  background: var(--preview-canvas);
}
.theme-preview-side { padding: 18px; background: var(--preview-sidebar); }
.theme-preview-side span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--preview-sidebar); background: var(--preview-accent); font-size: 18px; }
.theme-preview-main { display: flex; align-items: flex-start; flex-direction: column; padding: 22px; }
.theme-preview-main i { width: 54px; height: 5px; margin-bottom: 12px; border-radius: 99px; background: var(--preview-primary); }
.theme-preview-main strong { font-size: 17px; }
.theme-preview-main small { margin-top: 3px; color: #95825c; }
.theme-preview-main button { align-self: flex-end; margin-top: auto; padding: 8px 12px; border: 0; border-radius: 8px; color: white; background: var(--preview-primary); font-size: 10px; }

@media (max-width: 900px) {
  /* Five clear bottom navigation entries */
  .nav-list { width: min(390px, 100%); padding: 0 4px; }
  .nav-item { flex: 1 1 20%; width: auto; min-width: 0; padding: 0 2px; font-size: 9.5px; }
  .nav-item span { font-size: 16px; }

  /* Product summary first; detail is opt-in */
  #productsView .product-table .product-ledger-row {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  #productsView .product-table .product-ledger-row.mobile-expanded { border-color: color-mix(in srgb, var(--ui31-green) 42%, var(--ui31-line)); box-shadow: 0 9px 24px rgba(48,39,20,.07); }
  #productsView .product-table .ledger-product-cell { display: block; width: 100%; }
  #productsView .product-table .desktop-ledger-cell,
  .desktop-product-link { display: none !important; }
  .mobile-product-toggle {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 18px;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 76px;
    padding: 12px;
    border: 0;
    color: var(--ui31-ink);
    background: white;
    text-align: left;
  }
  .mobile-product-toggle .ledger-product-thumb { display: grid; width: 48px; height: 48px; flex-basis: 48px; border-radius: 11px; }
  .mobile-product-identity { display: block; min-width: 0; }
  .mobile-product-identity b,
  .mobile-product-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-product-identity b { font-size: 14px; line-height: 21px; }
  .mobile-product-identity small { margin-top: 2px; color: var(--ui31-muted); font-size: 10px; line-height: 15px; }
  .mobile-product-status { display: grid; justify-items: end; gap: 4px; }
  .mobile-product-status .badge { min-width: 54px; padding: 4px 7px; font-size: 9px; }
  .mobile-product-status > strong { font-size: 12px; line-height: 17px; }
  .mobile-product-chevron { color: var(--ui31-green); font-size: 18px; line-height: 1; transition: transform .18s ease; }
  .mobile-expanded .mobile-product-chevron { transform: rotate(180deg); }
  .mobile-product-panel {
    display: block;
    max-height: 0;
    padding: 0 12px;
    overflow: hidden;
    border-top: 0 solid var(--ui31-line);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: white;
    transition: max-height .26s ease, opacity .18s ease, padding .26s ease, border-width .26s ease;
  }
  .mobile-expanded .mobile-product-panel { max-height: 560px; padding: 12px; border-top-width: 1px; opacity: 1; visibility: visible; pointer-events: auto; }
  .mobile-product-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-product-facts > div { min-height: 58px; padding: 9px 10px; border-radius: 10px; background: #f9f8f6; }
  .mobile-product-facts > div > span,
  .mobile-product-facts > div > strong,
  .mobile-product-facts > div > small { display: block; }
  .mobile-product-facts > div > span { color: var(--ui31-muted); font-size: 9px; line-height: 14px; }
  .mobile-product-facts > div > strong { margin-top: 4px; font-size: 12px; line-height: 18px; }
  .mobile-product-facts > div > small { margin-top: 1px; color: var(--ui31-muted); font-size: 8.5px; line-height: 13px; }
  .mobile-product-facts .badge { width: max-content; min-width: 54px; margin-top: 4px; padding: 4px 7px; font-size: 9px; }
  .mobile-product-facts .mobile-margin-value { color: var(--ui31-green); font-size: 15px; }
  .mobile-product-facts .mobile-product-progress { grid-column: 1 / -1; display: grid; grid-template-columns: 72px 38px 1fr; align-items: center; min-height: 48px; }
  .mobile-product-progress > strong { margin: 0 !important; }
  .mobile-product-progress .progress-bar { width: 100%; height: 6px; margin: 0; }
  .mobile-product-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
  .mobile-product-panel-actions > .btn { min-width: 132px; min-height: 38px; margin-left: auto; font-size: 11px; }
  .mobile-sort-actions { display: flex; gap: 6px; }

  /* Regional menus on H5 */
  #regionalMenusView .regional-menu-toolbar { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  #regionalMenusView .regional-menu-toolbar .section-kicker { display: none; }
  #regionalMenusView .regional-menu-toolbar h2 { font-size: 19px; }
  #regionalMenusView .regional-menu-toolbar p { margin-top: 4px; font-size: 10px; }
  #regionalMenusView .regional-menu-toolbar > .btn { width: 100%; min-height: 42px; }
  #regionalMenuMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  #regionalMenuMetrics .metric-card { min-height: 82px; height: 82px; }
  .regional-menu-filter { display: block; min-height: 0; margin-bottom: 10px; padding: 10px; }
  .regional-menu-search { width: 100%; height: 42px; }
  .regional-menu-filter .quick-filters { margin-top: 8px; overflow-x: auto; }
  .regional-menu-filter .chip { flex: 0 0 auto; min-height: 30px; font-size: 10px; }
  .regional-menu-grid { grid-template-columns: 1fr; gap: 10px; }
  .regional-menu-card { min-height: 0; padding: 15px; border-radius: 14px; }
  .regional-menu-card-title { margin-top: 13px; }
  .regional-menu-card-title h3 { font-size: 15px; line-height: 22px; }
  .regional-menu-preview { min-height: 84px; max-height: 104px; }
  .regional-menu-card-foot { align-items: flex-start; flex-direction: column; gap: 9px; }
  .regional-menu-card-foot .inline-actions { width: 100%; justify-content: flex-end; }
  .regional-menu-empty { min-height: 250px; }

  .regional-menu-modal,
  .theme-modal { width: calc(100vw - 16px); max-width: 390px; margin: auto; }
  .regional-menu-modal > form,
  .theme-modal > form { max-height: calc(100dvh - 16px); padding: 16px; }
  .regional-menu-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-composer { padding: 11px; }
  .menu-composer-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .menu-add-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .menu-add-row .btn { width: 100%; }
  .regional-menu-items-scroll { max-height: 42dvh; }
  .regional-menu-modal .modal-actions { align-items: stretch; flex-wrap: wrap; }
  .regional-menu-modal .modal-actions > span { width: 100%; font-size: 9px; }

  .theme-presets,
  .theme-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-preview { grid-template-columns: 92px 1fr; min-height: 132px; }
  .theme-preview-side { padding: 14px; }
  .theme-preview-main { padding: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-product-panel,
  .mobile-product-chevron { transition: none; }
}

/* V3.2.1 — desktop canvas follows the browser width instead of a fixed 1440px artboard */
@media (min-width: 901px) {
  html,
  body { width: 100%; }

  .app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-columns: 224px minmax(0, 1fr);
    box-shadow: none;
  }

  .workspace,
  .topbar,
  main { max-width: none; }
}

/* V3.2.2 — repair desktop ledger header spacing and restore product previews */
@media (min-width: 901px) {
  #productsView > #productMetrics {
    align-items: stretch;
    margin-bottom: 14px;
  }

  #productsView > #productMetrics .metric-card {
    min-height: 112px;
    height: 112px;
    padding: 13px 16px;
  }

  #productsView > #productMetrics .metric-card-top {
    min-height: 34px;
  }

  #productsView > #productMetrics .metric-card small {
    line-height: 16px;
  }

  #productsView .product-table td {
    height: 72px;
  }

  #productsView .desktop-product-link {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #productsView .desktop-product-link .ledger-product-thumb {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 11px;
  }

  #productsView .desktop-product-link .ledger-product-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #productsView .desktop-product-link .ledger-product-copy {
    min-width: 0;
  }
}

/* V3.3 — four-level permission system */
.owner-only-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #eece83;
  border-radius: 11px;
  color: #5d4a14;
  background: #fff4db;
}
.owner-only-notice strong { flex: 0 0 auto; }
.owner-only-notice span { color: #74633b; font-size: 12px; line-height: 1.6; }
.permission-tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.permission-tier-card { min-height: 94px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #faf9f8; }
.permission-tier-card strong, .permission-tier-card span { display: block; }
.permission-tier-card strong { margin-bottom: 8px; color: #3d3017; font-size: 13px; }
.permission-tier-card span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.permission-tier-card.owner { border-color: #e5ba54; background: #fff5df; }
.permission-tier-card.owner strong { color: #6c5410; }
.permission-tier-card.admin { border-color: #d5c6a9; background: #f8f5ef; }
.permission-tier-card.editor { border-color: #b9d4e6; background: #f1f7fb; }
.permission-tier-card.viewer { border-color: #e1ded7; background: #f8f7f5; }
.owner-account-row { background: #fff9eb; }
.role-tier { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.owner-tier { color: #6b5010; background: #f8d480; }
.role-note { display: block; margin-top: 5px; color: #8a7741; }
.status-chip.enabled { display: inline-flex; padding: 5px 9px; border-radius: 99px; color: #684a0d; background: #f3eee3; font-size: 11px; font-weight: 800; }
.protected-account { color: #8a7741; font-size: 11px; font-weight: 700; white-space: nowrap; }
.user-row-actions { display: flex; align-items: center; gap: 7px; }
.users-modal .user-row-actions .btn { min-height: 32px; padding: 0 10px; font-size: 11px; }
input[readonly] { color: #877552; background: #f3f2f0; cursor: not-allowed; }
.permission-editor .danger-text.delete-material,
.permission-editor .danger-text.delete-combo,
.permission-editor .danger-text.delete-regional-menu,
.permission-editor .delete-product { display: none !important; }

@media (max-width: 900px) {
  .permission-tier-grid { grid-template-columns: 1fr 1fr; }
  .owner-only-notice { align-items: flex-start; flex-direction: column; gap: 4px; }
  .user-row-actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 560px) {
  .permission-tier-grid { grid-template-columns: 1fr; }
}

/* V3.3.1 menu preview and task scrolling */
#attentionList { max-height:360px; overflow-y:auto; min-height:0; }
.dashboard-grid > .attention-panel { display:flex; flex-direction:column; height:auto; max-height:460px; }
.attention-panel .panel-heading { flex-shrink:0; }
#attentionList { flex:1 1 auto; }
#attentionList .attention-item { min-height:76px; height:auto; flex-shrink:0; }
#attentionList .attention-item > div:first-child { min-width:0; }
#attentionList .attention-item span { white-space:normal; overflow-wrap:anywhere; }
.menu-financial-summary { display:flex; flex-wrap:wrap; gap:12px; padding:16px; margin:12px 0; border-radius:12px; background:#f6f3ed; }
.menu-financial-summary small { flex-basis:100%; color:#676154; line-height:1.6; }
#menuPreviewDialog { width:min(920px,94vw); max-height:90dvh; overflow-y:auto; padding:24px; }
.menu-preview-products { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
.menu-preview-products article { display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid #e7e3dc; border-radius:12px; }
.menu-preview-products img { width:100%; height:140px; object-fit:contain; }
.regional-menu-card .inline-actions { flex-wrap:wrap; }
#regionalMenuForm { max-height:90dvh; overflow-y:auto; }

/* V3.3.2: fill desktop recipe workspace; retain mobile card layout */
.workflow-tools { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.workflow-modal { width:min(960px,95vw); max-height:90dvh; overflow:auto; padding:24px; }
.workflow-record { padding:18px; margin:12px 0; border:1px solid #e5e2dc; border-radius:14px; }
.workflow-record small { display:block; color:#8b7a56; margin:6px 0; overflow-wrap:anywhere; }
.workflow-record .btn { margin:8px 6px 0 0; }
.workflow-record details { margin:10px 0; }
.workflow-note { padding:12px; font-size:13px; line-height:1.6; color:#795914; background:#fff8e6; border-radius:10px; }
@media (min-width: 901px) {
  .recipe-workbench { width:100%; max-width:none; margin:0; grid-template-columns:minmax(0,1fr) 300px; gap:20px; }
  .recipe-editor-column { min-width:0; padding:0 16px; }
  .recipe-table-scroll table { min-width:860px; }
  .recipe-table-scroll .data-table-input { font-size:13px; }
  .recipe-table-scroll th { font-size:12px; }
  .recipe-table-scroll th:nth-child(2) { width:23%; }
  .recipe-table-scroll th:nth-child(3) { width:23%; }
}
@media (max-width: 900px) {
  .recipe-workbench { width:100%; grid-template-columns:minmax(0,1fr); }
}

.account-create-form{display:grid;gap:16px;padding:20px}.account-create-form label{display:grid;gap:8px}.account-create-form input:not([type=checkbox]),.account-create-form select{width:100%;min-height:42px;padding:10px;border:1px solid #dbd7ce;border-radius:8px}.workflow-modal{padding:20px;box-sizing:border-box}

.desktop-sort-actions{display:inline-flex;gap:5px;vertical-align:middle}.ledger-action-cell{white-space:nowrap}.recipe-page-heading{flex-wrap:wrap;gap:12px}@media(max-width:760px){.desktop-sort-actions{display:none}}
.pending-count{display:inline-flex;min-width:20px;height:20px;margin-left:6px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:#b63c35;color:#fff;font-size:11px}.approval-reminder{padding:22px}.approval-reminder>strong{font-size:22px}.approval-reminder .modal-actions{padding:16px 0 0}

/* 套餐明细独立于配方食材/包材切换，始终可见。 */
#comboDialog .combo-section{display:block;margin-top:18px;overflow:visible}
#comboDialog .recipe-section-heading>div:first-child{display:flex}
#comboDialog{max-height:92dvh;overflow:auto}
#comboDialog .combo-section .table-wrap{max-height:340px;overflow:auto}
#comboDialog .combo-section table{min-width:680px}
#comboDialog .modal-actions{position:sticky;bottom:0;background:white;padding:16px 0;z-index:2}
#comboDialog .combo-reference{min-width:180px}

.ledger-availability{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.menu-count{display:block;margin-top:8px;color:var(--muted)}.availability-panel{padding:20px;margin:16px 0;background:white;border:1px solid var(--line);border-radius:14px}.availability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.availability-grid small{display:block;margin-bottom:10px;color:var(--muted)}.availability-grid p{font-size:12px}.availability-warning{padding:12px;background:#fff2d6;color:#885513}.linked-menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.linked-menu-grid article{padding:18px;border:1px solid var(--line);border-radius:12px}.linked-menu-grid p,.linked-menu-grid li{font-size:13px;overflow-wrap:anywhere}@media(max-width:760px){.availability-grid{grid-template-columns:1fr}.linked-menu-grid{grid-template-columns:1fr}}

/* V3.4.6 unified approval center */
.nav-item .nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:999px;background:#c8453c;color:#fff;font-size:11px;font-weight:800}
.nav-item .nav-count.hidden{display:none}
.approval-metrics{margin-bottom:18px}
#approvalBoard{display:grid;gap:18px;padding-bottom:40px}
.approval-group{padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.approval-group-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.approval-group-title h3{margin:0}.approval-group-title span{color:var(--muted);font-size:12px}
.approval-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:16px 4px;border-top:1px solid var(--line)}
.approval-card:first-of-type{border-top:0}.approval-card h3{margin:7px 0 5px}.approval-card p{margin:4px 0;color:var(--text)}.approval-card small{color:var(--muted)}
.approval-card details{margin-top:10px}.approval-card .table-wrap{max-height:250px;overflow:auto}
.approval-type{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800}
.approval-type.product{color:#80600b;background:#ffebbd}.approval-type.recipe{color:#6a4908;background:#f3ecdf}.approval-type.account{color:#315c82;background:#e5f0f8}
.approval-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.approval-empty,.approval-loading{padding:22px;color:var(--muted);text-align:center;border:1px dashed var(--line);border-radius:12px;background:#faf9f7}
@media(max-width:760px){.approval-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.approval-card{grid-template-columns:1fr}.approval-actions{justify-content:flex-start}.approval-actions .btn{flex:1}.approval-group{padding:14px}}

/* V3.5.0: H5 combo and regional menu editors */
.mobile-row-name{display:none}
.combo-picker-trigger{display:none;align-items:center;justify-content:space-between;gap:10px;min-height:40px;margin-left:8px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}.combo-picker-trigger span{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.combo-picker-trigger i{font-style:normal;white-space:nowrap}
.reference-picker{position:fixed;inset:0;z-index:10000;display:grid;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;align-items:end;border:0;background:transparent;overflow:hidden}.reference-picker:not([open]){display:none}.reference-picker::backdrop{background:rgba(27,20,5,.55)}.reference-picker-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}.reference-picker-sheet{position:relative;display:flex;flex-direction:column;width:min(620px,100%);max-height:min(78dvh,720px);margin:0 auto;padding:18px;background:#faf9f7;border-radius:22px 22px 0 0;box-shadow:0 -16px 50px rgba(35,25,5,.22)}.reference-picker-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.reference-picker-head small{display:block;color:var(--primary);font-size:11px;font-weight:800}.reference-picker-head h2{margin:3px 0 0;font-size:22px}.reference-picker-search{display:flex;align-items:center;gap:8px;margin:15px 0 10px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:#fff}.reference-picker-search input{width:100%;min-height:48px;border:0;outline:0;background:transparent;font-size:16px}.reference-picker-results{display:grid;gap:8px;overflow-y:auto;overscroll-behavior:contain}.reference-picker-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 14px;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);cursor:pointer}.reference-picker-option span,.reference-picker-option strong,.reference-picker-option small{display:block}.reference-picker-option strong{font-size:14px}.reference-picker-option small{margin-top:4px;color:var(--muted);font-size:11px}.reference-picker-option i{color:var(--primary);font-size:22px;font-style:normal}.reference-picker-empty{padding:32px 18px;text-align:center;color:var(--muted)}body.picker-open{overflow:hidden}
@media(max-width:900px){
  #comboDialog,.regional-menu-modal{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
  #comboDialog>form,.regional-menu-modal>form{width:100%;max-width:none;min-height:100dvh;max-height:none;padding:16px 14px calc(104px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;scroll-padding-bottom:130px}
  #comboDialog .modal-header,.regional-menu-modal .modal-header{margin:-16px -14px 0;padding:15px 14px 13px}
  #comboDialog .modal-header .section-kicker,.regional-menu-modal .modal-header .section-kicker{font-size:9px;letter-spacing:1.5px}
  #comboDialog .modal-header h2,.regional-menu-modal .modal-header h2{font-size:22px;line-height:30px}

  #comboDialog .combo-editor-top{display:block;padding:14px 0 8px}
  #comboDialog .combo-image-card{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;gap:8px 12px;align-items:center;margin-bottom:14px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#faf9f7}
  #comboDialog #comboImagePreview{grid-row:1 / 3;width:84px}
  #comboDialog .combo-image-card #comboImagePreview>img,#comboDialog .combo-image-card .product-image-placeholder{width:84px;height:72px;min-height:72px;aspect-ratio:auto;border-radius:10px}
  #comboDialog .combo-image-card .product-image-placeholder span{display:none}
  #comboDialog .combo-image-card .image-actions{align-self:end}
  #comboDialog .combo-image-card .image-actions .btn{min-height:36px;padding:0 12px;font-size:11px}
  #comboDialog .combo-image-card>small{align-self:start;font-size:9px;line-height:14px}
  #comboDialog .combo-basic-grid{grid-template-columns:1fr;gap:11px;padding:0}
  #comboDialog .combo-basic-grid label{font-size:12px;font-weight:700}
  #comboDialog .combo-basic-grid input,#comboDialog .combo-basic-grid select,#comboDialog .combo-basic-grid textarea{min-height:46px;margin-top:6px;border-radius:11px}
  #comboDialog .combo-basic-grid textarea{min-height:76px}
  #comboDialog .combo-live-metrics{display:flex;gap:8px;margin:14px -14px 4px;padding:0 14px 5px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  #comboDialog .combo-live-metrics::-webkit-scrollbar{display:none}
  #comboDialog .combo-live-metrics .sub-metric{flex:0 0 124px;min-height:76px;padding:10px 11px;scroll-snap-align:start;background:white}
  #comboDialog .combo-live-metrics .sub-metric:last-child{color:white;border-color:var(--primary);background:var(--primary)}
  #comboDialog .combo-live-metrics .sub-metric:last-child span{color:#eee7d9}
  #comboDialog .combo-section{margin:14px 0 0;padding:0;border:1px solid var(--line);border-radius:15px;background:#faf9f7;overflow:hidden}
  #comboDialog .recipe-section-heading{align-items:center;margin:0;padding:12px;border:0;background:white}
  #comboDialog .recipe-section-heading>div{display:block}
  #comboDialog .recipe-section-heading strong{font-size:14px}
  #comboDialog .recipe-section-heading span{margin-left:6px}
  #comboDialog .recipe-section-heading .btn{width:auto;margin-left:auto;padding:0 12px}
  #comboDialog .combo-section .table-wrap{max-height:none;margin:0;padding:0;overflow:visible;border:0}
  #comboDialog .combo-section table{min-width:0}
  #comboDialog .responsive-table tbody{display:grid;gap:10px;padding:10px}
  #comboDialog .responsive-table tbody tr.combo-item-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding:13px 12px 10px;border:1px solid #e7e3dc;border-radius:13px;background:white;box-shadow:none}
  #comboDialog .responsive-table tbody tr.combo-item-card.product-item{border-left:4px solid var(--primary)}
  #comboDialog .responsive-table tbody tr.combo-item-card.package-item{border-left:4px solid #4b86a3}
  #comboDialog .responsive-table td{display:grid;grid-template-columns:1fr;gap:4px;padding:8px 0;text-align:left;border-top:1px solid #f2f1ee}
  #comboDialog .responsive-table td::before{font-size:9px;line-height:14px}
  #comboDialog .responsive-table .combo-ref-cell{grid-column:1 / -1;padding:0 42px 11px 0;border:0}
  #comboDialog .combo-ref-cell::before{display:none}
  #comboDialog input,#comboDialog select,#comboDialog textarea,.regional-menu-modal input,.regional-menu-modal select,.regional-menu-modal textarea{font-size:16px!important}
  #comboDialog .combo-ref-cell>.combo-reference{display:none}
  #comboDialog .combo-ref-cell .combo-picker-trigger{display:flex;width:100%;min-height:48px;margin:0;padding:0 13px;text-align:left}
  #comboDialog .combo-ref-cell .combo-picker-trigger span{max-width:calc(100% - 64px)}
  #comboDialog .mobile-row-name{display:none}
  #comboDialog .combo-name-cell{display:none}
  #comboDialog .combo-qty-cell,#comboDialog .combo-cost-cell,#comboDialog .combo-subtotal-cell,#comboDialog .combo-unit-cell{grid-column:auto}
  #comboDialog .combo-qty-cell .combo-quantity{width:100%;min-height:44px;font-size:16px}
  #comboDialog .combo-remove-cell{position:absolute;top:12px;right:10px;display:block;padding:0;border:0}
  #comboDialog .combo-remove-cell::before{display:none}
  #comboDialog .combo-remove-cell .row-delete{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#fff0ee}
  #comboDialog .responsive-table td.empty{grid-column:1 / -1;padding:24px 10px!important;background:transparent}

  .regional-menu-modal .regional-menu-form-grid{grid-template-columns:1fr;gap:11px;padding:14px 0}
  .regional-menu-modal .regional-menu-form-grid label{font-size:12px;font-weight:700}
  .regional-menu-modal .regional-menu-form-grid input,.regional-menu-modal .regional-menu-form-grid select,.regional-menu-modal .regional-menu-form-grid textarea{min-height:46px;margin-top:6px;border-radius:11px}
  .regional-menu-modal .menu-composer{margin:4px 0 0;padding:0;border-radius:15px;overflow:hidden;background:#faf9f7}
  .regional-menu-modal .menu-composer-heading{display:block;margin:0;padding:13px 12px;background:white;border-bottom:1px solid var(--line)}
  .regional-menu-modal .menu-composer-heading strong{font-size:15px}.regional-menu-modal .menu-composer-heading small{display:block;margin-top:4px;font-size:10px;line-height:16px}
  .regional-menu-modal .menu-add-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
  .regional-menu-modal .menu-add-row label:nth-child(2){grid-column:1 / -1;grid-row:2}
  .regional-menu-modal .menu-add-row .btn{grid-column:1 / -1;min-height:46px;font-size:13px}
  .regional-menu-modal .menu-add-row select{width:100%;min-width:0;min-height:46px;font-size:16px}
  .regional-menu-modal #menuDraftStatistics{margin:0 12px 10px}
  .regional-menu-modal .regional-menu-items-scroll{max-height:none;margin:0;padding:0 10px 10px;overflow:visible;border:0;background:transparent}
  .regional-menu-modal .regional-menu-items-scroll table{min-width:0}
  .regional-menu-modal .responsive-table tbody{display:grid;gap:10px;padding:0}
  .regional-menu-modal .responsive-table tbody tr.menu-item-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:0 10px;padding:13px 12px;border:1px solid #e7e3dc;border-left:4px solid var(--primary);border-radius:13px;background:white;box-shadow:none}
  .regional-menu-modal .responsive-table td{display:block;padding:7px 0;text-align:left;border:0}
  .regional-menu-modal .responsive-table td::before{display:none}
  .regional-menu-modal .menu-type-cell{grid-column:1;grid-row:1}
  .regional-menu-modal .menu-name-cell{grid-column:2;grid-row:1}.regional-menu-modal .menu-name-cell strong,.regional-menu-modal .menu-name-cell span{display:block}
  .regional-menu-modal .menu-price-cell{grid-column:3;grid-row:1;font-weight:800;color:var(--primary)}
  .regional-menu-modal .menu-section-cell{grid-column:1 / -1;grid-row:2;padding-top:11px!important;border-top:1px solid #f2f0ed!important}
  .regional-menu-modal .menu-section-cell::before{content:"菜单分区";display:block!important;margin-bottom:6px;color:var(--muted);font-size:9px;line-height:14px}
  .regional-menu-modal .menu-section-cell select{width:100%;min-height:46px;margin-top:0;font-size:16px}
  .regional-menu-modal .menu-order-cell{grid-column:1 / 3;grid-row:3;padding-top:9px!important}
  .regional-menu-modal .menu-order-actions{justify-content:flex-start}.regional-menu-modal .menu-order-actions::before{content:"调整顺序";align-self:center;margin-right:6px;color:var(--muted);font-size:10px}
  .regional-menu-modal .menu-remove-cell{grid-column:3;grid-row:3;text-align:right}.regional-menu-modal .menu-remove-cell .row-delete{width:38px;height:38px;border-radius:9px;background:#fff0ee}
  .regional-menu-modal .responsive-table td.empty{grid-column:1 / -1;padding:28px 10px!important;text-align:center}

  #comboDialog .mobile-save-bar,.regional-menu-modal .mobile-save-bar{position:fixed;inset:auto 0 0 0;display:grid;grid-template-columns:1fr 1.45fr;gap:10px;margin:0;padding:11px 14px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:0 -8px 24px rgba(52,38,11,.08)}
  .regional-menu-modal .mobile-save-bar>span{display:none}
  #comboDialog .mobile-save-bar .btn,.regional-menu-modal .mobile-save-bar .btn{min-height:48px;border-radius:12px;font-size:14px}
}

/* V3.6.2: installed app sizing and native window dragging */
html.standalone-app body{min-width:0}
html.standalone-app .topbar{-webkit-app-region:drag;app-region:drag}
html.standalone-app .topbar button,
html.standalone-app .topbar input,
html.standalone-app .topbar select,
html.standalone-app .topbar label,
html.standalone-app .top-actions{-webkit-app-region:no-drag;app-region:no-drag}
.desktop-app-dragbar{display:none}
@media(min-width:901px){
  html.standalone-app .app-shell{position:relative;padding-top:36px}
  html.standalone-app .desktop-app-dragbar{position:absolute;inset:0 0 auto 0;z-index:1000;display:flex;height:36px;align-items:center;gap:10px;padding:0 18px;color:#615949;border-bottom:1px solid #e5e2dc;background:#faf9f8;-webkit-app-region:drag;app-region:drag;cursor:move;user-select:none}
  html.standalone-app .desktop-app-dragbar span{font-size:12px;font-weight:800;pointer-events:none}
  html.standalone-app .desktop-app-dragbar small{font-size:10px;color:#9c917a;pointer-events:none}
  html.standalone-app .sidebar{top:36px;height:calc(100vh - 36px)}
  html.standalone-app .topbar-title-group,
  html.standalone-app .topbar-title-group h1,
  html.standalone-app .topbar-title-group p{-webkit-app-region:drag;app-region:drag;user-select:none}
}
@media(display-mode:window-controls-overlay){
  html.standalone-app .topbar{min-height:max(64px,env(titlebar-area-height,64px));padding-right:max(180px,calc(100vw - env(titlebar-area-width,100vw) + 18px))}
}
@media(max-width:900px){
  html.standalone-app .workspace{padding-top:0}
  html.standalone-app .topbar{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  html.standalone-app .nav-list{width:100%;padding-inline:6px}
  html.standalone-app .nav-item{flex:1 1 0;width:auto;min-width:0;padding-inline:2px;font-size:10px}
  html.standalone-app .nav-item span{font-size:17px}
}
@media(min-width:901px) and (max-width:1120px){
  html.standalone-app #dashboardMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.standalone-app .dashboard-grid{grid-template-columns:1fr}
  html.standalone-app .dashboard-grid>.panel{height:auto;min-height:236px}
  html.standalone-app #recentActivityPanel{height:auto;min-height:212px}
}
@media(max-width:600px){.reference-picker-sheet{max-height:82dvh;padding:15px 14px calc(14px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}.reference-picker-option{min-height:62px}.reference-picker-option strong{font-size:15px}.reference-picker-option small{font-size:12px;line-height:17px}}

/* V3.6.0: installable PWA */
.install-help-content{padding:20px}.install-steps{display:grid;grid-template-columns:34px 1fr;gap:12px 10px;align-items:center}.install-steps span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f2ede4;color:var(--primary);font-weight:800}.install-steps p{margin:0;line-height:1.55}.app-update-banner{position:fixed;right:20px;bottom:20px;z-index:9000;display:flex;align-items:center;gap:18px;padding:13px 14px 13px 17px;border:1px solid #d3cab9;border-radius:15px;background:#fff;box-shadow:0 16px 45px rgba(47,34,8,.2)}.app-update-banner.hidden{display:none}.app-update-banner span,.app-update-banner strong,.app-update-banner small{display:block}.app-update-banner small{margin-top:2px;color:var(--muted)}.app-update-banner .btn{min-height:40px;white-space:nowrap}
@media(max-width:900px){.install-help-modal{width:calc(100vw - 24px);max-width:420px}.install-help-modal form{padding:18px}.install-help-content{padding:18px 2px}.app-update-banner{right:12px;bottom:calc(86px + env(safe-area-inset-bottom));left:12px;justify-content:space-between}.app-update-banner .btn{padding-inline:14px}}

/* V3.6.1: reliable vertical scrolling in iOS/Android standalone mode */
@media(max-width:900px){
  html.standalone-app,html.standalone-app body{width:100%;height:100%;overflow:hidden}
  html.standalone-app .app-shell{height:100%;min-height:0;overflow:hidden}
  html.standalone-app .workspace{height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto!important;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-top:env(safe-area-inset-top);scroll-behavior:auto}
  html.standalone-app .workspace>main{min-height:calc(100dvh - 64px);overflow:visible;touch-action:pan-y}
  html.standalone-app .auth-screen{height:100dvh;min-height:100dvh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  html.standalone-app body.picker-open .workspace{overflow-y:hidden!important;touch-action:none}
  html.standalone-app .topbar{top:0}
}

/* Keep this final override after the V3.6.1 scrolling rules. */
@media(max-width:900px){
  html.standalone-app .workspace{padding-top:0}
  html.standalone-app .topbar{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  html.standalone-app .nav-list{width:100%;padding-inline:6px}
  html.standalone-app .nav-item{flex:1 1 0;width:auto;min-width:0;padding-inline:2px;font-size:10px}
}

/* V3.6.4: use the real phone viewport instead of the old 390px artboard. */
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .app-shell,
  html.standalone-app .app-shell{width:100%;max-width:none;margin:0}
  html.standalone-app .workspace{width:100%;max-width:none}
  html.standalone-app main{width:100%;max-width:none}
  html.standalone-app .sidebar{
    right:0;left:0;width:100%;max-width:none;
    height:calc(64px + env(safe-area-inset-bottom));
    padding:0 0 env(safe-area-inset-bottom);
    background:#fff!important
  }
  html.standalone-app .nav-list{width:100%;max-width:none;margin:0;padding:0 4px}
  html.standalone-app .nav-item{flex:1 1 16.666%;width:16.666%;max-width:none;font-size:9px;white-space:nowrap}
  #productsView>#productMetrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  #productsView>#productMetrics .metric-card{width:auto;min-width:0}
  #productsView .quick-filters{width:100%;max-width:100%;overscroll-behavior-x:contain}
}

/* V3.6.5: iOS standalone already exposes the full viewport; do not add a second
   safe-area row below the primary navigation. Modal action bars retain theirs. */
@media(max-width:900px){
  html.standalone-app .workspace{padding-bottom:64px}
  html.standalone-app .sidebar{
    bottom:0!important;
    height:64px!important;
    min-height:64px!important;
    padding-bottom:0!important
  }
  html.standalone-app .nav-list{height:64px!important;padding-bottom:0!important}
  html.standalone-app .nav-item{height:64px;min-height:64px}
}

/* V3.7.0: Figma-aligned H5 bottom navigation. */
.nav-item>svg{display:none}
.nav-label{display:contents}
@media(max-width:900px){
  .workspace,html.standalone-app .workspace{padding-bottom:72px}
  .sidebar,html.standalone-app .sidebar{
    bottom:0!important;height:72px!important;min-height:72px!important;
    padding:0!important;border-top:1px solid #e5e2dc!important;
    background:#fff!important;box-shadow:0 -8px 24px rgba(47,34,8,.08)!important
  }
  .nav-list,html.standalone-app .nav-list{height:72px!important;padding:4px!important;align-items:stretch}
  .nav-item,html.standalone-app .nav-item{
    position:relative;isolation:isolate;flex:1 1 16.666%;width:16.666%;height:64px;min-height:64px;
    gap:3px;border-radius:14px!important;color:#93805a!important;background:transparent!important;
    font-size:9px!important;font-weight:500;transition:color .18s ease,transform .18s ease,background-color .18s ease
  }
  .nav-item>svg{display:block;z-index:1;width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
  .nav-item>.nav-label{display:block;z-index:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:14px}
  .nav-item>span:not(.nav-label){display:none}
  .nav-item.active,html.standalone-app .nav-item.active{color:#684a0d!important;background:#f3eee3!important;font-weight:700}
  .nav-item.active::after{content:"";position:absolute;top:-4px;left:50%;width:24px;height:3px;border-radius:0 0 3px 3px;background:#f2c04c;transform:translateX(-50%)}
  .nav-item.active>svg{transform:translateY(-1px)}
  .nav-item:active{transform:scale(.96)}
  .nav-item .nav-count{position:absolute;top:5px;left:calc(50% + 7px);z-index:2;min-width:16px;height:16px;margin:0;padding:0 4px;font-size:9px}
}

/* V3.7.1: replace unreliable native mobile prompt/confirm during approvals. */
.approval-decision-dialog{width:min(460px,calc(100vw - 28px));padding:22px;border:0;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(35,25,5,.25)}
.approval-decision-dialog::backdrop{background:rgba(27,20,5,.55);backdrop-filter:blur(3px)}
.approval-decision-dialog .modal-header{margin:-4px 0 0;padding:0 0 14px}
.approval-decision-message{margin:4px 0 18px;color:#716346;font-size:13px;line-height:1.7}
.approval-note-field{display:block;color:#3a3326;font-size:12px;font-weight:700}
.approval-note-field textarea{width:100%;min-height:104px;margin-top:8px;padding:12px;border:1px solid #d8d3ca;border-radius:12px;resize:vertical;font:inherit;font-size:16px}
.approval-decision-dialog .modal-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:20px;padding:0}
.approval-decision-dialog .btn{min-height:46px}
@media(max-width:900px){.approval-decision-dialog{width:calc(100vw - 24px);max-width:430px;margin:auto;padding:18px;border-radius:18px}.approval-decision-dialog .modal-header{position:static;margin:0;padding:0 0 12px}.approval-decision-dialog .modal-actions{position:static;margin-top:18px}.approval-actions{position:relative;z-index:1}.approval-actions .btn{min-height:44px}}

/* V3.7.5: iOS Safari/PWA zooms when a focused form control is below 16px. */
@media (max-width:900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .global-search input,
  .ledger-search-shell input,
  .responsive-table .data-table-input,
  .operator-field input {
    font-size:16px!important;
  }
}

/* V3.7.3: prevent iOS standalone Dynamic Type from enlarging nav labels. */
@media(max-width:900px){
  .sidebar,.sidebar *,html.standalone-app .sidebar,html.standalone-app .sidebar *{-webkit-text-size-adjust:none!important;text-size-adjust:none!important}
  .nav-item>.nav-label,html.standalone-app .nav-item>.nav-label{
    display:block!important;width:100%!important;max-width:none!important;padding:0 1px;
    overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;
    font-size:8.5px!important;line-height:12px!important;letter-spacing:-.35px!important
  }
  .nav-item,html.standalone-app .nav-item{font-size:8.5px!important}
  .nav-item>svg,html.standalone-app .nav-item>svg{width:19px;height:19px}
}


/* ===== V6.0 · 产品库 × 研发管理整合 ===== */
.rd-nav-label{margin-top:14px}.sidebar-quick-links{display:grid;gap:7px}.sidebar-quick-links button{width:100%}
.rd-metric-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px}.rd-dashboard-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:18px}.rd-list{padding:0 20px 18px}.rd-list-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid #f1f0ed}.rd-list-item:first-child{border-top:0}.rd-list-item .rd-dot{width:9px;height:9px;border-radius:50%;background:var(--green)}.rd-list-item .rd-dot.risk{background:var(--amber)}.rd-list-item .rd-dot.overdue{background:var(--red)}.rd-list-item .rd-dot.done{background:var(--green-2)}.rd-list-item strong,.rd-list-item small{display:block}.rd-list-item small{margin-top:4px;color:var(--muted);font-size:10px}.rd-list-item time{color:var(--muted);font-size:11px;white-space:nowrap}
.rd-calendar-panel{overflow:hidden}.rd-calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.rd-calendar-nav,.rd-calendar-legend{display:flex;gap:10px;align-items:center}.rd-calendar-nav strong{min-width:120px;text-align:center}.rd-calendar-legend span{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}.rd-calendar-legend i{width:8px;height:8px;border-radius:50%;background:var(--green)}.rd-calendar-legend i.risk{background:var(--amber)}.rd-calendar-legend i.overdue{background:var(--red)}.rd-calendar-legend i.done{background:var(--green-2)}.rd-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#f7f6f5;border-bottom:1px solid var(--line)}.rd-weekdays div{padding:10px;text-align:center;color:var(--muted);font-size:10px;font-weight:800}.rd-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.rd-day{min-height:118px;padding:8px;border-right:1px solid #f1f0ed;border-bottom:1px solid #f1f0ed;background:#fff}.rd-day:nth-child(7n){border-right:0}.rd-day.outside{background:#fbfbfa;color:#bbb3a3}.rd-day.today{background:#fbf9f5}.rd-day-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:10px}.rd-day-head b{width:24px;height:24px;display:grid;place-items:center;border-radius:50%}.rd-day.today .rd-day-head b{color:#fff;background:var(--green)}.rd-calendar-event{display:block;width:100%;margin:0 0 5px;padding:5px 6px;border:0;border-left:3px solid var(--green);border-radius:6px;color:#413827;background:#f7f4ed;text-align:left;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-calendar-event.risk{border-color:var(--amber);background:var(--amber-soft)}.rd-calendar-event.overdue{border-color:var(--red);background:var(--red-soft)}.rd-calendar-event.done{border-color:var(--green-2);background:var(--mint)}.rd-calendar-more{padding-left:5px;color:var(--muted);font-size:9px}
.rd-project-filters .filter-grid{grid-template-columns:1.5fr repeat(3,1fr);padding-top:0}.rd-project-name strong,.rd-project-name small{display:block}.rd-project-name small{margin-top:4px;color:var(--muted);font-size:10px}.rd-health{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800}.rd-health.normal,.rd-health.done{color:#694a0b;background:var(--mint)}.rd-health.risk{color:#92580c;background:var(--amber-soft)}.rd-health.overdue{color:#97332d;background:var(--red-soft)}.rd-stage-badge{display:inline-flex;padding:4px 7px;border-radius:999px;color:#285f78;background:var(--blue-soft);font-size:10px;font-weight:800}.rd-product-linkage{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}.rd-product-linkage .badge{font-size:9px}.rd-project-progress{min-width:110px}.rd-project-progress strong{font-size:12px}.rd-project-progress .progress-bar{margin-top:6px}
.rd-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.rd-template-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 4px 18px rgba(35,30,21,.04)}.rd-template-card header{display:flex;justify-content:space-between;gap:12px}.rd-template-card h3{margin:0;font-size:15px}.rd-template-card p{min-height:38px;color:var(--muted);font-size:11px;line-height:1.6}.rd-template-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}.rd-template-stats div{padding:9px;border-radius:9px;background:var(--soft)}.rd-template-stats span,.rd-template-stats strong{display:block}.rd-template-stats span{color:var(--muted);font-size:9px}.rd-template-stats strong{margin-top:3px;font-size:13px}.rd-template-stage-flow{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}.rd-template-stage-flow span{padding:4px 6px;border-radius:6px;color:#5b503b;background:#f5f3ee;font-size:9px}.rd-template-actions{display:flex;justify-content:flex-end;gap:7px}
.rd-project-modal{width:min(1120px,calc(100vw - 32px))}.rd-project-modal form,.rd-template-modal form{padding:23px;max-height:calc(100vh - 48px);overflow:auto}.rd-template-modal{width:min(980px,calc(100vw - 32px))}.rd-project-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:20px 0 4px}.rd-project-form-grid .full{grid-column:1/-1}.rd-new-product-fields{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.rd-new-product-fields .form-grid{padding:0}.rd-rule-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px 0}.rd-rule-chip{padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.rd-rule-chip span,.rd-rule-chip strong,.rd-rule-chip small{display:block}.rd-rule-chip span{color:var(--muted);font-size:9px}.rd-rule-chip strong{margin-top:5px;font-size:11px}.rd-rule-chip small{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.4}.rd-rule-chip.pass{border-color:#ded2b9;background:#faf7f2}.rd-rule-chip.block{border-color:#f0d8a9;background:#fffaf0}.rd-milestone-editor table,.rd-template-editor table{min-width:900px}.rd-milestone-editor .data-table-input,.rd-template-editor .data-table-input{min-width:90px}.rd-check-cell{width:42px;text-align:center}.rd-check-cell input{width:auto;margin:0}.rd-history-block{margin-top:16px;padding:14px;border-radius:10px;background:var(--soft)}.rd-history-block h4{margin:0 0 8px;font-size:12px}.rd-history-item{padding:8px 0;border-top:1px solid #e6e3dd;font-size:10px}.rd-history-item:first-of-type{border-top:0}.rd-history-item strong{display:block}.rd-history-item span{display:block;margin-top:3px;color:var(--muted)}.modal-spacer{flex:1}
.rd-detail-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.rd-detail-summary>div{padding:13px;border:1px solid var(--line);border-radius:10px;background:#faf9f7}.rd-detail-summary span,.rd-detail-summary strong{display:block}.rd-detail-summary span{color:var(--muted);font-size:9px}.rd-detail-summary strong{margin-top:5px;font-size:14px}.rd-linked-project{display:grid;grid-template-columns:minmax(0,1.4fr) .7fr .8fr .7fr .9fr auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid #f1f0ed}.rd-linked-project:first-child{border-top:0}.rd-linked-project strong,.rd-linked-project small{display:block}.rd-linked-project small{margin-top:4px;color:var(--muted);font-size:9px}
@media(max-width:1300px){.rd-template-grid{grid-template-columns:repeat(2,1fr)}.rd-metric-grid{grid-template-columns:repeat(3,1fr)}.rd-rule-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.rd-dashboard-grid{grid-template-columns:1fr}.rd-template-grid{grid-template-columns:1fr}.rd-metric-grid{grid-template-columns:1fr 1fr}.rd-project-form-grid{grid-template-columns:1fr 1fr}.rd-rule-summary{grid-template-columns:1fr 1fr}.rd-calendar-legend{display:none}.rd-day{min-height:86px;padding:4px}.rd-calendar-event{font-size:0;height:12px;padding:0;border-left-width:4px}.rd-linked-project{grid-template-columns:1fr auto}.rd-linked-project>*:not(:first-child):not(:last-child){display:none}}

/* V6.1 business-role permission UI */
.permission-business-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.permission-business-grid .permission-tier-card { min-height: 92px; }
.permission-business-grid .permission-tier-card strong { display:block; margin-bottom:6px; }
body[data-data-scope="own"] .rd-project-name::after { content:"本人范围"; display:inline-flex; margin-left:7px; padding:2px 6px; border-radius:999px; background:#f5f3ee; color:var(--primary); font-size:10px; font-weight:700; }
@media (max-width: 900px) { .permission-business-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .permission-business-grid { grid-template-columns: 1fr; } }


/* V6.2 · R&D execution chain */
.rd-execution-center{margin:18px 0}.rd-execution-shell{padding:16px;border:1px solid #e7e4df;border-radius:16px;background:linear-gradient(180deg,#fdfcfb,#f8f7f5)}
.rd-execution-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}.rd-execution-head h3{margin:3px 0 4px;font-size:18px}.rd-execution-head p{margin:0;color:var(--muted);font-size:11px}.rd-execution-kpis{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;min-width:min(520px,55%)}.rd-execution-kpis>div{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}.rd-execution-kpis span,.rd-execution-kpis strong{display:block}.rd-execution-kpis span{font-size:9px;color:var(--muted)}.rd-execution-kpis strong{margin-top:4px;font-size:11px}
.rd-flow-chain{display:grid;gap:8px}.rd-flow-node{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(130px,auto);gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;position:relative}.rd-flow-node.current{border-color:#d7ab43;box-shadow:0 0 0 2px rgba(242,192,76,.16)}.rd-flow-node.done{background:#faf8f4;border-color:#e4ddcf}.rd-flow-node.blocked{opacity:.72;background:#f9f9f8}.rd-flow-node.focused{outline:3px solid rgba(36,91,120,.16);border-color:#7faabd}.rd-node-index{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f2f1ee;color:#887653;font-size:11px;font-weight:900}.rd-flow-node.current .rd-node-index{background:var(--accent,#f2c04c);color:#2d281c}.rd-flow-node.done .rd-node-index{background:#e9e0cf;color:#634811}.rd-node-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.rd-node-title strong{font-size:12px}.rd-node-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;color:var(--muted);font-size:10px}.rd-node-rule{display:block;margin-top:5px;color:#756e5f}.rd-node-action-wrap{display:flex;justify-content:flex-end}.rd-node-action-wrap .btn{white-space:nowrap;padding:7px 10px;font-size:10px}.rd-node-lock{display:block;max-width:190px;color:#93866d;font-size:10px;text-align:right;line-height:1.35}.rd-current-callout{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff3d8;border:1px solid #eace8d;font-size:10px}.rd-current-callout.done{background:#f8f4ed;border-color:#e4ddcf}.rd-current-callout strong{font-size:11px}.rd-current-callout span{color:#877653}
.rd-config-status{display:inline-flex;padding:4px 6px;border-radius:999px;font-size:9px;font-weight:800}.rd-config-status.done{color:#634811;background:#f5f0e7}.rd-config-status.pending{color:#745a1f;background:#ffefc9}.rd-milestone-editor .recipe-section-heading small{display:block;margin-top:3px;color:var(--muted);font-size:9px;font-weight:400}
.rd-calendar-event{display:block;text-align:left}.rd-calendar-event b,.rd-calendar-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rd-calendar-event b{font-size:10px}.rd-calendar-event small{margin-top:2px;font-size:8px;font-weight:600;opacity:.8}.rd-calendar-event.current{background:#fff3d8;border-left-color:#c99417}.rd-next-link{display:block;text-align:left}.rd-next-link .product-code{display:block}
.rd-product-strip{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:8px;margin:12px 0;padding:10px;border:1px solid #e7e4df;border-radius:12px;background:#faf9f8}.rd-product-strip>div{padding:8px 10px;border-radius:9px;background:#fff}.rd-product-strip span,.rd-product-strip strong,.rd-product-strip small{display:block}.rd-product-strip span{font-size:9px;color:var(--muted)}.rd-product-strip strong{margin-top:4px;font-size:11px}.rd-product-strip small{margin-top:4px;color:var(--muted);font-size:9px}.rd-product-ledger-progress{display:block!important}.rd-product-ledger-progress small{display:block;margin-top:4px;color:var(--muted);font-size:9px}.rd-linked-history{margin-top:18px}.rd-linked-history h4{margin:0 0 8px}
@media(max-width:900px){.rd-execution-head{display:block}.rd-execution-kpis{min-width:0;width:100%;grid-template-columns:1fr 1fr;margin-top:10px}.rd-flow-node{grid-template-columns:30px 1fr}.rd-node-action-wrap{grid-column:2;justify-content:flex-start}.rd-node-lock{text-align:left;max-width:none}.rd-current-callout{display:block}.rd-current-callout span{display:block;margin-top:4px}.rd-product-strip{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rd-product-strip{grid-template-columns:1fr}.rd-execution-kpis{grid-template-columns:1fr 1fr}.rd-flow-node{padding:10px 9px}}


/* =========================
   V6.3 · Figma-validated R&D UI
   ========================= */
:root{--rd63-deep:#3b2c0d;--rd63-primary:#684a0d;--rd63-green:#805d16;--rd63-gold:#f2c04c;--rd63-canvas:#f6f5f2;--rd63-card:#fff;--rd63-line:#e6e4e0;--rd63-muted:#95825c;--rd63-text:#231e15;--rd63-soft:#f7f6f4;--rd63-green-soft:#f3eee5;--rd63-yellow-soft:#fff3d8;--rd63-red:#b24436;--rd63-red-soft:#fdedea;--rd63-blue:#3f6cb4;--rd63-blue-soft:#eef3fb}
body[data-active-view^="rd"] .workspace,body[data-active-view="products"] .workspace{background:var(--rd63-canvas)}
body[data-active-view^="rd"] main,body[data-active-view="products"] main{padding-top:22px}
body[data-active-view^="rd"] .page-toolbar,body[data-active-view="products"] .page-toolbar{background:transparent;border:0;box-shadow:none;padding:10px 0 20px;margin:0;align-items:flex-end}
.rd-v63-hero h2,#productsView .ledger-toolbar h2{font-size:28px;line-height:1.25;letter-spacing:-.02em;margin:7px 0 6px;color:var(--rd63-text)}
.rd-v63-hero p,#productsView .ledger-toolbar p{margin:0;color:var(--rd63-muted);font-size:12px}.rd-v63-hero .btn,#productsView .ledger-toolbar .btn{min-width:164px;height:44px;border-radius:12px}
body[data-active-view^="rd"] .section-kicker,body[data-active-view="products"] .section-kicker{color:var(--rd63-green);font-size:10px;letter-spacing:.02em;font-weight:800}.danger-kicker{color:var(--rd63-red)!important}
.rd-v63-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 18px}.rd-v63-metric{height:104px;display:flex;align-items:flex-start;gap:14px;padding:17px;border:1px solid var(--rd63-line);border-radius:16px;background:#fff;box-shadow:none}.rd-v63-metric>div{display:grid;gap:3px}.rd-v63-metric span{font-size:11px;color:var(--rd63-muted)}.rd-v63-metric strong{font-size:25px;line-height:1.1;color:var(--rd63-text)}.rd-v63-metric small{font-size:10px;color:var(--rd63-muted)}.rd-v63-metric-no{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px;background:var(--rd63-blue-soft);color:var(--rd63-blue)}.rd-v63-metric-no.n2{background:var(--rd63-yellow-soft);color:#b98200}.rd-v63-metric-no.n3{background:var(--rd63-red-soft);color:var(--rd63-red)}.rd-v63-metric-no.n4{background:var(--rd63-green-soft);color:var(--rd63-primary)}
.rd-v63-dashboard-top,.rd-v63-dashboard-bottom{display:grid;gap:18px;margin-bottom:18px}.rd-v63-dashboard-top{grid-template-columns:minmax(0,1.8fr) minmax(340px,1fr)}.rd-v63-dashboard-bottom{grid-template-columns:1fr 1.04fr}.rd-v63-dashboard-top .panel,.rd-v63-dashboard-bottom .panel{margin:0;border:1px solid var(--rd63-line);border-radius:18px;box-shadow:none;background:#fff}.rd-v63-dashboard-top .panel{min-height:338px}.rd-v63-dashboard-bottom .panel{min-height:318px}.rd-v63-view .panel-heading{padding:18px 20px 10px}.rd-v63-view .panel-heading h3{margin:4px 0 0;font-size:19px}.rd-v63-sort-note{padding:7px 18px;border-radius:999px;background:var(--rd63-soft);color:var(--rd63-muted);font-size:10px}
.rd-today-task{width:calc(100% - 40px);margin:0 20px;min-height:78px;border:0;border-top:1px solid #f1f0ed;background:#fff;display:grid;grid-template-columns:38px minmax(0,1.1fr) minmax(220px,.9fr) 94px;gap:14px;align-items:center;text-align:left;cursor:pointer}.rd-today-task:first-child{border-top:0}.rd-today-task>i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-style:normal;font-weight:800;background:var(--rd63-green-soft);color:var(--rd63-primary)}.rd-today-task>i.tone-risk{background:var(--rd63-yellow-soft);color:#b98200}.rd-today-task>i.tone-overdue{background:var(--rd63-red-soft);color:var(--rd63-red)}.rd-today-copy strong,.rd-today-copy small,.rd-today-meta small{display:block}.rd-today-copy strong{font-size:13px;color:var(--rd63-text)}.rd-today-copy small{margin-top:6px;color:var(--rd63-muted);font-size:10px}.rd-today-meta small{color:var(--rd63-muted);font-size:10px}.rd-today-meta b{margin-top:8px}.rd-today-task>em{justify-self:end;border:1px solid var(--rd63-line);border-radius:10px;padding:9px 14px;font-style:normal;font-size:10px;color:var(--rd63-primary);background:#faf9f8}.rd-today-task:hover{background:#fdfcfb}
.rd-v63-pipeline-panel>#rdPipeline{padding:2px 20px 18px}.rd-pipeline-row{display:grid;grid-template-columns:78px 1fr 24px;gap:12px;align-items:center;margin:22px 0}.rd-pipeline-row span{font-size:11px;color:var(--rd63-text);font-weight:600}.rd-pipeline-row>div{height:8px;background:#efeeeb;border-radius:4px;overflow:hidden}.rd-pipeline-row i{display:block;height:100%;border-radius:4px;background:var(--rd63-primary)}.rd-pipeline-row i.peak{background:var(--rd63-gold)}.rd-pipeline-row strong{text-align:right;font-size:12px}.rd-pipeline-note{padding:9px 12px;border-radius:10px;background:var(--rd63-soft);font-size:9px;color:var(--rd63-muted)}
#rdRiskList{padding:0 20px 18px}.rd-risk-row{width:100%;min-height:65px;border:0;border-top:1px solid #f1f0ed;background:#fff;display:grid;grid-template-columns:160px minmax(0,1fr) 84px 52px;gap:12px;align-items:center;text-align:left;cursor:pointer}.rd-risk-row:first-child{border-top:0}.rd-risk-row strong{font-size:12px}.rd-risk-row span{font-size:10px;color:var(--rd63-muted)}.rd-risk-row b{padding:6px 10px;border-radius:999px;background:var(--rd63-soft);font-size:10px;color:var(--rd63-muted);text-align:center}.rd-risk-row em{font-style:normal;font-size:10px;text-align:right;color:var(--rd63-muted)}.rd-risk-row em.overdue{color:var(--rd63-red)}
.rd-v63-linkage-copy{margin:-4px 20px 12px;color:var(--rd63-muted);font-size:10px}.rd-linkage-card{position:relative;display:block;width:calc(100% - 40px);margin:0 20px;padding:14px 16px 22px;border:0;border-radius:14px;background:var(--rd63-soft);text-align:left;cursor:pointer}.rd-linkage-head,.rd-linkage-meta{display:flex;justify-content:space-between;gap:18px;align-items:center}.rd-linkage-head strong{font-size:12px}.rd-linkage-meta{margin-top:14px;font-size:10px}.rd-linkage-meta span{color:var(--rd63-muted)}.rd-linkage-meta b{font-weight:700;color:var(--rd63-text)}.rd-linkage-card .progress-bar{margin-top:18px}.rd-linkage-card>em{display:block;margin-top:5px;text-align:right;color:var(--rd63-primary);font-style:normal;font-size:10px;font-weight:800}.rd-linkage-rule{margin:22px 20px 0;padding:15px;border-radius:12px;background:var(--rd63-green-soft);color:var(--rd63-primary);font-size:10px;font-weight:700}
/* calendar */
.rd-v63-calendar-shell{padding:0;background:transparent;border:0!important;box-shadow:none!important}.rd-v63-calendar-shell .rd-calendar-toolbar{height:66px;padding:0 15px;border:1px solid var(--rd63-line);border-radius:16px;background:#fff}.rd-calendar-nav{gap:14px}.rd-calendar-nav .mini-icon{width:40px;height:40px;border:0;border-radius:10px;background:var(--rd63-soft);font-size:20px}.rd-calendar-nav strong{min-width:140px;font-size:17px}.rd-today-pill{padding:6px 20px;border-radius:999px!important;background:var(--rd63-green-soft)!important;color:var(--rd63-primary)!important}.rd-calendar-legend{gap:14px}.rd-calendar-legend span{padding:6px 18px;border-radius:999px;background:var(--rd63-green-soft);font-size:9px}.rd-calendar-legend span:nth-child(2){background:var(--rd63-yellow-soft)}.rd-calendar-legend span:nth-child(3){background:var(--rd63-red-soft)}.rd-calendar-legend span:nth-child(4){background:#f1f0ee}.rd-calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;margin-top:18px}.rd-calendar-layout>#rdCalendarGrid{padding:10px;border:1px solid var(--rd63-line);border-radius:18px;background:#fff}.rd-weekdays{grid-template-columns:repeat(7,1fr);margin-bottom:6px}.rd-weekdays>div{height:30px;display:grid;place-items:center;font-size:10px;color:var(--rd63-muted)}.rd-month-grid{gap:5px}.rd-day{appearance:none;min-height:102px;padding:7px 8px;border:1px solid var(--rd63-line);border-radius:12px;background:#fff;text-align:left;overflow:hidden;color:inherit;cursor:pointer}.rd-day:hover{background:#fdfcfb}.rd-day.selected{border-color:var(--rd63-primary);background:#fbfaf7}.rd-day.today:not(.selected){background:#fdfcfb}.rd-day-head{height:25px;display:flex;justify-content:space-between;align-items:flex-start}.rd-day-head b{font-size:10px;color:var(--rd63-muted)}.rd-day.selected .rd-day-head b{color:var(--rd63-primary)}.rd-day-today{padding:4px 10px!important;border-radius:999px;background:var(--rd63-green-soft);font-size:8px!important;color:var(--rd63-primary)!important}.rd-day .rd-calendar-event{display:block;width:100%;height:38px;margin:4px 0 0;padding:5px 7px;border:0;border-radius:9px;background:var(--rd63-blue-soft);border-left:0;text-align:left;pointer-events:auto}.rd-day .rd-calendar-event.current,.rd-day .rd-calendar-event.normal{background:var(--rd63-green-soft)}.rd-day .rd-calendar-event.risk{background:var(--rd63-yellow-soft)}.rd-day .rd-calendar-event.overdue{background:var(--rd63-red-soft)}.rd-day .rd-calendar-event.done{background:#f1f0ee}.rd-calendar-event b{font-size:8px}.rd-calendar-event small{font-size:7px;color:var(--rd63-muted)}.rd-calendar-more{font-size:8px;color:var(--rd63-muted)}.rd-day-detail{min-height:712px;padding:17px;border:1px solid var(--rd63-line);border-radius:18px;background:#fff}.rd-day-detail h3{margin:8px 0 4px;font-size:18px}.rd-day-detail>p{margin:0;color:var(--rd63-muted);font-size:10px}.rd-day-events{margin-top:18px}.rd-day-event-row{display:grid;grid-template-columns:45px 1fr;gap:10px;padding:13px 0;border-top:1px solid #f1f0ed}.rd-day-event-row:first-child{border-top:0}.rd-day-event-row time{font-size:10px;color:var(--rd63-muted)}.rd-day-event-row>div strong,.rd-day-event-row>div small{display:block}.rd-day-event-row>div strong{font-size:11px}.rd-day-event-row>div small{margin-top:5px;font-size:9px;color:var(--rd63-muted)}.rd-day-event-row .rd-health{margin-top:8px}.rd-day-event-row .btn{grid-column:2;justify-self:start;padding:6px 12px;font-size:9px}.rd-focus-project{margin-top:26px;padding:14px;border-radius:14px;background:var(--rd63-soft)}.rd-focus-project>span,.rd-focus-project>small{display:block;color:var(--rd63-green);font-size:9px;font-weight:800}.rd-focus-project>strong{display:block;margin-top:10px;font-size:12px}.rd-focus-project>div{display:flex;gap:9px;margin-top:11px}.rd-focus-project b,.rd-focus-project em{padding:5px 10px;border-radius:999px;background:var(--rd63-green-soft);font-size:9px;font-style:normal}.rd-focus-project em{background:#fff}.rd-focus-project>small{margin-top:15px;color:var(--rd63-muted)}.rd-focus-project>p{margin:6px 0 13px;font-size:10px}.rd-focus-project>i{display:block;margin-top:8px;color:var(--rd63-muted);font-style:normal;font-size:8px}
/* project execution dialog */
#rdProjectDialog.rd-project-modal{width:min(1220px,calc(100vw - 24px));max-width:none;padding:0;border-radius:20px}#rdProjectDialog>form{padding:22px;max-height:94dvh}.rd-execution-center{margin:12px 0 18px}.rd-execution-shell{padding:0;border:0;background:transparent}.rd-execution-v63{display:grid;gap:18px}.rd-project-hero-v63,.rd-flow-board-v63,.rd-current-action-v63,.rd-linked-data-v63{border:1px solid var(--rd63-line);border-radius:18px;background:#fff}.rd-project-hero-v63{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:24px;padding:22px}.rd-project-hero-copy h3{margin:4px 0 5px;font-size:25px}.rd-project-hero-copy p{margin:0;color:var(--rd63-muted);font-size:10px}.rd-project-tags{display:flex;gap:9px;margin-top:17px}.rd-project-tags>span{padding:6px 16px;border-radius:999px;background:var(--rd63-green-soft);color:var(--rd63-primary);font-size:9px;font-weight:800}.rd-project-hero-stats{display:grid;grid-template-columns:1fr 1.3fr;gap:14px 28px}.rd-project-hero-stats span,.rd-project-hero-stats strong{display:block}.rd-project-hero-stats span{font-size:9px;color:var(--rd63-muted)}.rd-project-hero-stats strong{margin-top:6px;font-size:13px}.rd-project-hero-stats .rd-progress-value{color:var(--rd63-primary);font-size:16px}.rd-project-hero-stats .progress-bar{margin-top:8px}.rd-flow-board-v63{padding:18px}.rd-section-title h3{margin:4px 0 5px;font-size:19px}.rd-section-title p{margin:0;color:var(--rd63-muted);font-size:10px}.rd-flow-grid-v63{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}.rd-flow-card-v63{position:relative;min-height:88px;padding:12px 12px 12px 56px;border:1px solid var(--rd63-line);border-radius:14px;background:#fff;text-align:left;color:inherit;cursor:pointer}.rd-flow-card-v63.current{border-color:var(--rd63-primary);background:#fbfaf7}.rd-flow-card-v63.done{background:#fff}.rd-flow-card-v63.blocked{background:#fbfbfa}.rd-flow-card-v63.focused{box-shadow:0 0 0 3px rgba(104,74,13,.12)}.rd-flow-no{position:absolute;left:13px;top:13px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#f1f0ee;color:var(--rd63-muted);font-size:10px;font-weight:800}.rd-flow-card-v63.done .rd-flow-no{background:var(--rd63-green-soft);color:var(--rd63-primary)}.rd-flow-card-v63.current .rd-flow-no{background:var(--rd63-gold);color:var(--rd63-deep)}.rd-flow-copy strong,.rd-flow-copy small,.rd-flow-copy em{display:block}.rd-flow-copy strong{font-size:11px}.rd-flow-copy small{margin-top:5px;font-size:9px;color:var(--rd63-muted)}.rd-flow-copy em{margin-top:8px;font-size:8px;color:var(--rd63-muted);font-style:normal}.rd-flow-card-v63.blocked .rd-flow-copy em{color:var(--rd63-red)}.rd-flow-state{position:absolute;right:12px;top:11px;padding:5px 9px;border-radius:999px;background:var(--rd63-green-soft);color:var(--rd63-primary);font-size:8px}.rd-flow-state.locked{background:#f1f0ee;color:var(--rd63-muted)}.rd-execution-detail-grid-v63{display:grid;grid-template-columns:minmax(0,1.8fr) 408px;gap:18px}.rd-current-action-v63,.rd-linked-data-v63{padding:20px}.rd-system-checks{margin-top:22px}.rd-system-check{display:grid;grid-template-columns:28px 1fr 90px;gap:12px;align-items:center;min-height:48px;border-top:1px solid #f1f0ed}.rd-system-check:first-child{border-top:0}.rd-system-check>span{width:28px;height:28px;border:1px solid var(--rd63-line);border-radius:8px;display:grid;place-items:center;color:var(--rd63-muted)}.rd-system-check.ok>span{background:var(--rd63-green-soft);color:var(--rd63-primary)}.rd-system-check strong,.rd-system-check small{display:block}.rd-system-check strong{font-size:10px}.rd-system-check small{margin-top:3px;font-size:9px;color:var(--rd63-muted)}.rd-system-check>b{padding:6px 10px;border-radius:999px;background:var(--rd63-yellow-soft);color:#b98200;text-align:center;font-size:9px}.rd-system-check.ok>b{background:var(--rd63-green-soft);color:var(--rd63-primary)}.rd-current-action-note{margin-top:16px;color:var(--rd63-muted);font-size:9px}.rd-current-actions{display:flex;gap:10px;margin-top:16px}.rd-current-actions .btn{min-width:200px}.rd-finished-message{margin-top:25px;padding:24px;border-radius:14px;background:var(--rd63-green-soft)}.rd-finished-message strong,.rd-finished-message span{display:block}.rd-finished-message span{margin-top:6px;color:var(--rd63-muted);font-size:10px}.rd-linked-product-name{margin-top:18px}.rd-linked-product-name span,.rd-linked-product-name strong{display:block}.rd-linked-product-name span{font-size:9px;color:var(--rd63-muted)}.rd-linked-product-name strong{margin-top:5px;font-size:12px}.rd-linked-data-v63 dl{margin:16px 0 0}.rd-linked-data-v63 dl>div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:12px 0;border-top:1px solid #f1f0ed}.rd-linked-data-v63 dt{color:var(--rd63-muted);font-size:9px}.rd-linked-data-v63 dd{margin:0;font-size:10px;font-weight:700}.rd-link-rule-v63{margin-top:14px;padding:12px;border-radius:11px;background:var(--rd63-green-soft);color:var(--rd63-primary);font-size:9px;line-height:1.6}
/* product ledger R&D linkage */
body[data-active-view="products"] #productMetrics{grid-template-columns:repeat(4,1fr);gap:16px}body[data-active-view="products"] #productMetrics .metric-card{height:86px;border:1px solid var(--rd63-line);border-radius:15px;box-shadow:none}body[data-active-view="products"] .ledger-search-shell{max-width:296px;margin:0}body[data-active-view="products"] .filter-panel{margin-top:-55px;margin-left:316px;min-height:68px;padding:11px 15px;display:flex;align-items:center}body[data-active-view="products"] .filter-panel .filter-grid{display:none}body[data-active-view="products"] .table-panel{margin-top:18px;border-radius:18px;box-shadow:none}body[data-active-view="products"] .product-table{min-width:1040px}.ledger-rd-state-cell strong,.ledger-rd-state-cell small,.ledger-financial-cell strong,.ledger-financial-cell small{display:block}.ledger-rd-state-cell strong{font-size:10px}.ledger-rd-state-cell small,.ledger-financial-cell small{margin-top:5px;color:var(--rd63-muted);font-size:8px}.rd-ledger-stage.risk,.rd-ledger-stage.overdue{color:var(--rd63-red)}.ledger-next-cell .rd-next-link strong{font-size:10px}.ledger-next-cell .product-code{font-size:8px}.ledger-financial-cell strong{font-size:10px}.rd-product-ledger-progress{min-width:74px}.rd-product-ledger-progress .progress-bar{height:6px}.rd-product-ledger-progress>strong{display:block;margin-top:5px;text-align:right;font-size:9px;color:var(--rd63-primary)}.rd-product-ledger-progress .progress-bar i.risk{background:#b98200}.rd-product-ledger-progress .progress-bar i.overdue{background:var(--rd63-red)}
@media(max-width:1100px){.rd-v63-dashboard-top,.rd-v63-dashboard-bottom{grid-template-columns:1fr}.rd-v63-metrics{grid-template-columns:1fr 1fr}.rd-calendar-layout{grid-template-columns:1fr}.rd-day-detail{min-height:auto}.rd-project-hero-v63{grid-template-columns:1fr}.rd-execution-detail-grid-v63{grid-template-columns:1fr}.rd-flow-grid-v63{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){body[data-active-view^="rd"] main{padding-top:8px}.rd-v63-hero{padding:8px 0 14px!important}.rd-v63-hero h2{font-size:21px}.rd-v63-hero p{font-size:10px}.rd-v63-hero .btn{height:40px;min-width:0}.rd-v63-metrics{grid-template-columns:1fr 1fr;gap:10px}.rd-v63-metric{height:82px;padding:12px}.rd-v63-metric-no{width:30px;height:30px}.rd-v63-metric strong{font-size:20px}.rd-v63-dashboard-top,.rd-v63-dashboard-bottom{gap:12px;margin-bottom:12px}.rd-today-task{grid-template-columns:32px 1fr 80px;width:calc(100% - 24px);margin:0 12px;padding:10px 0}.rd-today-task>i{width:32px;height:32px}.rd-today-meta{display:none}.rd-today-task>em{font-size:8px;padding:7px}.rd-calendar-legend{display:none}.rd-calendar-layout{display:block}.rd-calendar-layout>#rdCalendarGrid{padding:6px}.rd-month-grid{gap:3px}.rd-day{min-height:68px;padding:4px}.rd-day .rd-calendar-event{height:12px;padding:0;margin-top:3px;border-radius:3px}.rd-day .rd-calendar-event b,.rd-day .rd-calendar-event small{font-size:0}.rd-day-detail{margin-top:12px}.rd-flow-grid-v63{grid-template-columns:1fr 1fr;gap:8px}.rd-project-hero-v63{padding:15px}.rd-project-hero-stats{grid-template-columns:1fr 1fr}.rd-execution-detail-grid-v63{display:block}.rd-linked-data-v63{margin-top:12px}.rd-system-check{grid-template-columns:26px 1fr 68px}.rd-current-actions{display:grid}.rd-current-actions .btn{min-width:0;width:100%}#rdProjectDialog.rd-project-modal{width:100vw;height:100dvh;max-height:none;border-radius:0}#rdProjectDialog>form{max-height:100dvh;padding:14px}.rd-project-form-grid{grid-template-columns:1fr}.rd-rule-summary{grid-template-columns:1fr 1fr}body[data-active-view="products"] #productMetrics{grid-template-columns:1fr 1fr}body[data-active-view="products"] .filter-panel{margin:10px 0 0;display:block}body[data-active-view="products"] .filter-panel .filter-grid{display:grid}}

body[data-active-view^="rd"] .topbar-primary, body[data-active-view="products"] .topbar-primary{display:none!important}

/* ===== 本地版补丁：健壮性 & 账号提示 ===== */
[hidden] { display: none !important; }
.file-mode-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff6e5; border-bottom: 1px solid #f0d39a; color: #7a5310; font-size: 13px; line-height: 1.6; box-shadow: 0 4px 14px rgba(122,83,16,.15); }
.file-mode-banner span { flex: 1; }
.file-mode-banner button { flex: none; width: 28px; height: 28px; border: none; background: transparent; font-size: 18px; color: #7a5310; cursor: pointer; border-radius: 6px; }
.file-mode-banner button:hover { background: rgba(122,83,16,.12); }
#setupPanel .auth-form label, #loginPanel .auth-form label, #signupPanel .auth-form label { display: block; margin-bottom: 12px; }
@media (max-width: 640px) { .file-mode-banner { padding: 9px 12px; font-size: 12px; } }

/* v1.3 密码显隐 / 验证码行 / 登录提示 */
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 54px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #8c7c5b; font-size: 12px; cursor: pointer; }
.pw-toggle:hover { background: #f3e7c9; color: #a06a0f; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }
.code-row .btn { flex: 0 0 118px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.code-row .btn:disabled { opacity: .65; cursor: not-allowed; }
.auth-hint { display: block; margin-top: 10px; text-align: center; color: #a89878; font-size: 12px; }