/* NutriDMS — Offerings (§9) */
.of-page { padding: 24px 28px; }
.page-sub { font-size: 13.5px; color: var(--gray-500); margin-top: 4px; }

/* ── Product Specification tabs (§11–§13) ── */
.ps-head-completion { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.ps-head-completion-tx { display: flex; flex-direction: column; line-height: 1.3; }
.ps-head-completion-tx b { font-size: 13px; font-weight: 800; color: var(--gray-900); }
.ps-head-completion-tx span { font-size: 11.5px; color: var(--gray-500); }
.ps-ring text { font-family: inherit; }

.ps-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 14px; }
.ps-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--gray-200); background: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--gray-600); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease; }
.ps-tab:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(14,22,18,.26); color: var(--gray-800); border-color: var(--gray-300); }
.ps-tab.on { background: var(--green-700, #2f6b18); border-color: var(--green-700, #2f6b18); color: #fff; box-shadow: 0 8px 18px -10px rgba(47,107,24,.5); }
.ps-tab.on svg { color: #fff; }

.ps-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ps-cx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; width: 100%; padding: 14px 16px; background: var(--green-50, #ecfdf5); border: 1px solid var(--green-200, #bfe6cd); border-radius: 14px; margin-bottom: 14px; }
.ps-cx-head b { display: block; font-size: 14px; font-weight: 800; color: var(--gray-900); }
.ps-cx-head span { font-size: 12px; color: var(--gray-600); line-height: 1.5; }
.ps-cx-sub { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
.ps-cost-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.ps-cost-inputs { display: flex; flex-direction: column; gap: 10px; }
.ps-cost-summary { display: flex; flex-direction: column; gap: 8px; background: var(--gray-50, #f7f9f7); border: 1px solid var(--gray-200); border-radius: 14px; padding: 14px; }
.ps-cost-card { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--gray-600); padding: 4px 0; }
.ps-cost-card b { font-size: 15px; font-weight: 800; color: var(--gray-900); }
.ps-cost-card.accent { border-top: 1px dashed var(--gray-200); padding-top: 10px; margin-top: 2px; }
.ps-cost-card.accent b { font-size: 18px; }
.ps-cost-bar { height: 8px; border-radius: 8px; background: var(--gray-200); overflow: hidden; margin-top: 4px; }
.ps-cost-bar span { display: block; height: 100%; border-radius: 8px; transition: width .3s ease; }
.ps-price-table { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ps-price-th, .ps-price-row { display: grid; grid-template-columns: 1.4fr .8fr .9fr .7fr 1fr 32px; gap: 8px; align-items: center; }
.ps-price-th { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); padding: 0 2px; }
.ps-price-in { height: 34px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 0 9px; font-size: 12.5px; font-family: inherit; background: #fff; color: var(--gray-800); }
.ps-price-in:focus { outline: none; border-color: var(--green-600); }
.ps-price-tax { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gray-600); }
.ps-price-prev { font-size: 13px; font-weight: 800; color: var(--gray-900); }
.ps-price-prev small { font-weight: 500; font-size: 10px; color: var(--gray-400); }
.ps-price-del { border: 0; background: none; color: var(--error-500, #e5484d); cursor: pointer; padding: 4px; }
.ps-scen-editor { border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px; margin-top: 12px; background: var(--gray-50); }
.ps-scen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ps-scen-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--gray-500); font-weight: 600; }
.ps-scen-grid input { height: 34px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 0 10px; font-size: 13px; }
.ps-scen-preview { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--gray-600); }
.ps-scen-preview b { color: var(--gray-900); }
.ps-scen-list, .ps-scen-snaps { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ps-scen-row { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 10px; font-size: 12.5px; color: var(--gray-600); }
.ps-scen-row.locked { background: var(--gray-50); }
.ps-scen-name { font-weight: 700; color: var(--gray-900); min-width: 90px; display: inline-flex; align-items: center; gap: 5px; }
.ps-scen-when { margin-left: auto; color: var(--gray-400); font-size: 11.5px; }
.ps-proc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .ps-proc-grid { grid-template-columns: 1fr; } }
.ps-proc-flow { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.ps-proc-flowrow { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ps-proc-fl { width: 68px; color: var(--gray-500); font-weight: 600; }
.ps-proc-fbar { flex: 1; height: 10px; background: var(--gray-100); border-radius: 6px; overflow: hidden; }
.ps-proc-fbar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #46C07E, #2F9E63); }
.ps-proc-fv { width: 56px; text-align: right; font-weight: 700; color: var(--gray-900); }
.ps-proc-msg { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; padding: 8px 10px; border-radius: 9px; }
.ps-proc-msg.pass { background: #E7F6EC; color: #1E7A49; } .ps-proc-msg.warn { background: #FEF3C7; color: #92400e; } .ps-proc-msg.fail { background: #FDECEC; color: #B23320; }
@media (max-width: 720px) { .ps-price-th { display: none; } .ps-price-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border: 1px solid var(--gray-200); border-radius: 10px; } }
@media (max-width: 720px) { .ps-cost-grid { grid-template-columns: 1fr; } }
.ps-field { display: flex; flex-direction: column; gap: 6px; }
.ps-field.full { grid-column: 1 / -1; margin-top: 14px; }
.ps-field > span { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.ps-field input, .ps-field select, .ps-field textarea { padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 10px; font-size: 13.5px; font-family: inherit; background: #fff; color: var(--gray-900); }
.ps-field textarea { min-height: 72px; resize: vertical; }
.ps-field input:focus, .ps-field select:focus, .ps-field textarea:focus { outline: 0; border-color: var(--green-400, #6aa84f); box-shadow: 0 0 0 3px rgba(106,168,79,.15); }
.ps-field input:disabled, .ps-field select:disabled, .ps-field textarea:disabled { background: var(--gray-50); color: var(--gray-500); }
.ps-input-wrap { position: relative; display: flex; align-items: center; }
.ps-input-wrap input { flex: 1; width: 100%; }
.ps-input-wrap.has-suffix input { padding-right: 38px; }
.ps-suffix { position: absolute; right: 12px; font-size: 12px; font-weight: 700; color: var(--gray-400); pointer-events: none; }
.ps-hint { font-size: 11px; color: var(--gray-500); }

.ps-dims { margin-top: 16px; }
.ps-dims-lbl { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.ps-dims-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 6px; }

.ps-calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.ps-calc-card { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border-radius: 13px; background: linear-gradient(135deg, #F2F7EC, #EAF3E0); border: 1px solid #D8E7C6; }
.ps-calc-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--green-800, #2c5e14); }
.ps-calc-v { font-size: 22px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.ps-calc-f { font-size: 10.5px; color: var(--gray-500); font-family: ui-monospace, monospace; }

.ps-note-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 14px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 11px; font-size: 12.5px; color: var(--gray-700); }
.ps-note-row svg { color: var(--green-700, #2f6b18); }

.ps-link-card, .ps-qr-wrap { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ps-gs1-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-qr-types { display: flex; flex-direction: column; gap: 7px; }
.ps-qr-type { display: flex; align-items: center; gap: 9px; text-align: left; border: 1.5px solid var(--gray-200); background: #fff; border-radius: 11px; padding: 10px 12px; cursor: pointer; transition: all .14s ease; }
.ps-qr-type { transition: border-color .15s ease, background .15s ease; transform: none !important; }
.ps-qr-type:hover { border-color: var(--green-300,#a7d088); }
.gs-preview svg, .gs-preview canvas { display: block; }
.ps-qr-type.on { border-color: var(--green-700,#2f6b18); background: #F1F8EA; }
.ps-qr-type svg { color: var(--green-700,#2f6b18); flex-shrink: 0; }
.ps-qr-type b { display: block; font-size: 13px; font-weight: 700; color: var(--gray-900); }
.ps-qr-type small { font-size: 11px; color: var(--gray-500); }
.ps-qr-url { font-size: 10.5px; color: var(--gray-500); word-break: break-all; text-align: center; margin-top: 4px; }
.ps-slide-scrim { position: fixed; inset: 0; background: rgba(15,23,18,.55); z-index: 1400; display: flex; justify-content: flex-end; }
.ps-slide { width: 440px; max-width: 94vw; height: 100%; background: #fff; box-shadow: -24px 0 60px -20px rgba(14,22,18,.5); display: flex; flex-direction: column; }
.ps-slide-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
.ps-slide-h b { display: block; font-size: 15px; font-weight: 800; color: var(--gray-900); }
.ps-slide-h span { font-size: 12px; color: var(--gray-500); }
.ps-slide-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.ps-slide-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--gray-200); }
@media (max-width: 480px) { .ps-slide { width: 100vw; } }
/* QR/GTIN drawer: flush right slider (override the global inset-drawer centering).
   Doubled class = higher specificity so it beats styles.css global centering regardless of load order. */
.ps-slide-scrim.ps-slide-scrim { align-items: stretch !important; justify-content: flex-end !important; }
.ps-slide.ps-slide { height: 100% !important; margin: 0 !important; border-radius: 0 !important; animation: psSlideIn .24s cubic-bezier(.22,1,.36,1); }
@keyframes psSlideIn { from { transform: translateX(28px); opacity: .5; } to { transform: none; opacity: 1; } }
.ps-qr-wrap { flex-direction: row; flex-wrap: wrap; }
/* Dedicated GS1 Assign drawer — own classes so no global drawer-centering rule can catch it */
.psg-scrim { position: fixed; inset: 0; background: rgba(15,23,18,.55); z-index: 1400; display: flex; align-items: center; justify-content: center; }
.psg-drawer { width: 460px; max-width: 94vw; max-height: 88vh; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(14,22,18,.55); display: flex; flex-direction: column; overflow: hidden; animation: psgPop .2s cubic-bezier(.22,1,.36,1); }
@keyframes psgPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
/* Stop pointer-move jitter: lock the modal box + kill child hover transforms that reflow it */
.psg-drawer { will-change: auto; contain: layout paint; }
.psg-drawer .btn:hover, .psg-drawer .ps-qr-type:hover, .psg-drawer .gs-seg-btn:hover { transform: none !important; }
.psg-scrim { will-change: auto; }
@media (max-width: 480px) { .psg-drawer { width: 94vw; } }
.ps-empty-note { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--gray-300); border-radius: 13px; background: var(--gray-50); width: 100%; }
.ps-empty-note svg { color: var(--gray-400); flex-shrink: 0; }
.ps-empty-note b { display: block; font-size: 13px; color: var(--gray-800); }
.ps-empty-note span { font-size: 12px; color: var(--gray-500); }
.ps-gtin-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ps-gtin-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--gray-200); border-radius: 11px; background: #fff; }
.ps-pending { font-size: 11px; font-weight: 700; color: var(--amber-700, #b54708); margin-left: auto; }
.ps-gtin-row .gs-done { margin-left: auto; }

.ps-claims { display: flex; flex-direction: column; gap: 8px; }
.ps-claim { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--gray-200); border-radius: 11px; background: #fff; }
.ps-claim-nm { flex: 1; font-size: 13px; font-weight: 600; color: var(--gray-800); }
.ps-claim.eligible svg { color: var(--green-600, #2f9e44); }
.ps-claim.warning svg { color: #d97706; }
.ps-claim.failed svg, .ps-claim.restricted svg { color: var(--error-500, #e5484d); }

.ps-doc-add { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ps-doc-add select { padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: 9px; font-size: 12.5px; font-family: inherit; background: #fff; }
.ps-doc-add input { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 9px; font-size: 12.5px; font-family: inherit; }
.ps-doc-list { display: flex; flex-direction: column; gap: 8px; }
.ps-doc-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--gray-200); border-radius: 11px; background: #fff; }
.ps-doc-row svg { color: var(--green-700, #2f6b18); }
.ps-doc-tx { flex: 1; min-width: 0; }
.ps-doc-tx b { display: block; font-size: 13px; font-weight: 700; color: var(--gray-800); }
.ps-doc-tx small { font-size: 11px; color: var(--gray-500); }

.ps-compliance { display: flex; flex-direction: column; gap: 14px; }
.ps-gate { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 13px; }
.ps-gate.ok { background: linear-gradient(135deg, #ECF7E3, #E0F0D2); border: 1px solid #C6E2AE; }
.ps-gate.blocked { background: linear-gradient(135deg, #FDECEC, #FBE0E0); border: 1px solid #F4C7C7; }
.ps-gate svg { flex-shrink: 0; }
.ps-gate.ok svg { color: var(--green-700, #2f6b18); }
.ps-gate.blocked svg { color: var(--error-600, #c0392b); }
.ps-gate b { display: block; font-size: 14px; font-weight: 800; color: var(--gray-900); }
.ps-gate span { font-size: 12.5px; color: var(--gray-600); }
.ps-gate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-gate-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--error-700, #a82828); }
.ps-gate-list svg { color: var(--error-500, #e5484d); }
.ps-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ps-check { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 11px; font-size: 12.5px; font-weight: 600; background: #fff; }
.ps-check.ok { color: var(--gray-700); border-color: #D8E7C6; background: #FBFDF8; }
.ps-check.ok svg { color: var(--green-600, #2f9e44); }
.ps-check.todo { color: var(--gray-500); }
.ps-check.todo svg { color: var(--gray-300); }
.ps-compliance-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* Digital Menu Data (Menu Item) */
.ps-menu-data { display: flex; flex-direction: column; gap: 16px; }
.ps-md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ps-md-cell { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1px solid var(--gray-200); border-radius: 13px; background: #fff; }
.ps-md-cell span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.ps-md-cell b { font-size: 22px; font-weight: 800; color: var(--gray-900); }
.ps-md-qr { display: flex; gap: 12px; flex-wrap: wrap; }
.ps-md-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 13px 15px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-50); }
.ps-md-link b { display: block; font-size: 13px; font-weight: 800; color: var(--gray-900); }
.ps-md-link span { font-size: 11.5px; color: var(--gray-500); }

@media (max-width: 720px) {
  .ps-form-grid { grid-template-columns: 1fr; }
  .ps-calc { grid-template-columns: 1fr; }
}

/* ── Header actions ── */
.ps-head-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* ── §17 Product Specification PDF sheet ── */
.pss-scrim { position: fixed; inset: 0; background: rgba(15,23,18,.55); display: grid; place-items: start center; z-index: 1300; overflow-y: auto; padding: 28px 16px; animation: gsFade .18s ease; }
.pss-modal { width: 820px; max-width: 100%; background: var(--gray-100, #eef0ec); border-radius: 16px; box-shadow: 0 40px 90px -24px rgba(14,22,18,.6); overflow: hidden; animation: gsPop .24s cubic-bezier(.32,.72,.26,1); }
.pss-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 2; }
.pss-toolbar-t { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--gray-900); }
.pss-toolbar-t svg { color: var(--green-700, #2f6b18); }
.pss-toolbar-actions { display: flex; align-items: center; gap: 8px; }

.pss-sheet { background: #fff; margin: 18px; padding: 34px 38px; border-radius: 6px; box-shadow: 0 2px 10px rgba(14,22,18,.1); color: #1a2218; font-size: 12px; line-height: 1.5; }
.pss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2.5px solid #1a2218; padding-bottom: 14px; }
.pss-brand { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--green-700, #2f6b18); }
.pss-title { font-family: var(--serif, Georgia); font-size: 26px; font-weight: 800; margin: 3px 0 2px; color: #15201a; }
.pss-sub { font-size: 12px; color: #5a6657; }
.pss-id { text-align: right; flex-shrink: 0; }
.pss-id-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a978a; }
.pss-id-v { font-family: ui-monospace, monospace; font-size: 15px; font-weight: 800; color: #15201a; }
.pss-status { margin-top: 6px; }
.pss-completion { font-size: 10.5px; font-weight: 700; color: var(--green-700, #2f6b18); margin-top: 5px; }

.pss-sec { margin-top: 20px; break-inside: avoid; }
.pss-sec h2 { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--green-800, #2c5e14); border-bottom: 1px solid #d8e0d2; padding-bottom: 5px; margin: 0 0 10px; }
.pss-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.pss-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 24px; }
.pss-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dotted #e4e8df; font-size: 11.5px; }
.pss-row span { color: #6a766a; }
.pss-row b { color: #15201a; font-weight: 700; text-align: right; }
.pss-prose { font-size: 11.5px; color: #2a3326; margin: 2px 0; }
.pss-empty { font-size: 11px; color: #9aa595; font-style: italic; }

.pss-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pss-bc { margin-bottom: 10px; }
.pss-bc-meta { font-family: ui-monospace, monospace; font-size: 10.5px; color: #5a6657; margin-bottom: 4px; }
.pss-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.pss-qr-lbl { font-size: 10px; font-weight: 700; color: #5a6657; }

.pss-gate { font-size: 11.5px; font-weight: 700; padding: 9px 12px; border-radius: 8px; margin-bottom: 10px; }
.pss-gate.ok { background: #ECF7E3; color: #2c5e14; border: 1px solid #C6E2AE; }
.pss-gate.blocked { background: #FDECEC; color: #a82828; border: 1px solid #F4C7C7; }
.pss-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 16px; }
.pss-check { font-size: 11px; color: #6a766a; }
.pss-check.ok { color: #2c5e14; }

.pss-foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid #d8e0d2; display: flex; flex-direction: column; gap: 2px; font-size: 9.5px; color: #9aa595; }

@media print {
  @page { size: auto; margin: 12mm; }
  html, body { width: auto; }
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* hide everything, then reveal only the spec sheet */
  body * { visibility: hidden !important; }
  .pss-scrim, .pss-scrim * { visibility: visible !important; }
  .pss-scrim { position: absolute; inset: 0; background: none !important; backdrop-filter: none; padding: 0; display: block; overflow: visible; }
  .pss-modal { width: 100% !important; max-width: none !important; box-shadow: none; border-radius: 0; background: #fff; }
  .pss-toolbar { display: none !important; }
  .pss-sheet { margin: 0 !important; padding: 0 !important; box-shadow: none; width: 100% !important; max-width: 100% !important; box-sizing: border-box; font-size: 10.5px; }
  .pss-grid2, .pss-grid3 { gap: 2px 18px; }
  .pss-codes { gap: 16px; }
  .pss-sec { break-inside: avoid; margin-top: 14px; }
  .pss-bc canvas, .pss-qr canvas, .pss-qr img { max-width: 100%; height: auto; }
}


/* filters */
.of-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 4px 0 16px; }
.of-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px 15px; border-radius: 14px; border: 1px solid var(--gray-200); background: #FDFDFC; cursor: pointer; box-shadow: 0 1px 2px rgba(14,22,18,.05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.of-stat:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(14,22,18,.28); }
.of-stat.on { border-color: var(--green-600,#2f6b18); box-shadow: 0 0 0 2px rgba(47,107,24,.16); }
.of-stat-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 6px; background: var(--gray-100); color: var(--gray-500); }
.of-stat.brand .of-stat-ic { background: #E8F2DD; color: #2f6b18; }
.of-stat.ok .of-stat-ic { background: #DCF5E6; color: #157347; }
.of-stat.warn .of-stat-ic { background: #FDF1DC; color: #B54708; }
.of-stat-v { font-size: 24px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.of-stat-k { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.of-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.of-search { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--gray-200); border-radius: 999px; padding: 8px 14px; background: #fff; flex: 1; min-width: 220px; max-width: 360px; }
.of-search input { border: 0; outline: 0; font-size: 13px; font-family: inherit; background: transparent; width: 100%; }
.of-search svg { color: var(--gray-400); flex-shrink: 0; }
.of-clear { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--gray-100); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; color: var(--gray-600); cursor: pointer; }
.of-clear:hover { background: var(--gray-200); color: var(--gray-900); }
.of-viewtog { display: inline-flex; gap: 2px; background: var(--gray-100); border-radius: 999px; padding: 3px; margin-left: auto; }
.of-viewtog button { border: 0; background: transparent; width: 32px; height: 30px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--gray-500); transition: all .14s ease; }
.of-viewtog button:hover { color: var(--gray-900); }
.of-viewtog button.on { background: #fff; color: var(--green-800,#2c5e14); box-shadow: 0 1px 3px rgba(14,22,18,.15); }
.of-list { display: flex; flex-direction: column; gap: 8px; }
.of-listrow { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1px solid var(--gray-200); border-radius: 12px; background: #fff; padding: 12px 16px; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.of-listrow:hover { transform: translateY(-1px); border-color: var(--green-400); box-shadow: 0 10px 22px -14px rgba(14,22,18,.28); }
.of-listrow-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #E8F2DD; color: #2f6b18; flex-shrink: 0; }
.of-listrow-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.of-listrow-main b { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.of-listrow-main span { font-size: 12px; color: var(--gray-500); }
.of-listrow-foot { font-size: 12px; color: var(--gray-500); white-space: nowrap; }
.of-listrow-arrow { color: var(--gray-400); }
@media (max-width: 720px) { .of-listrow { grid-template-columns: auto 1fr auto; } .of-listrow-foot { display: none; } }
.of-listtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.of-listtable th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); padding: 9px 14px; border-bottom: 1px solid var(--gray-200); }
.of-listtable td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: middle; }
.of-listtable tr { cursor: pointer; }
.of-listtable tbody tr:hover td { background: var(--gray-50); }
.of-lt-nm { font-weight: 700; color: var(--gray-900); }
.of-type-badge.sm { font-size: 11px; padding: 2px 8px; }
@media (max-width: 900px) { .of-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .of-stats { grid-template-columns: repeat(2, 1fr); } }

/* filters */
.of-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.of-filters.inline { margin: 0; }
.of-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gray-300); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; color: var(--gray-600); cursor: pointer; transition: all .14s ease; }
.of-filter:hover { border-color: var(--green-400); color: var(--green-700); }
.of-filter.on { background: var(--gray-900); border-color: var(--gray-900); color: #fff; }
.of-filter-n { background: var(--gray-100); color: var(--gray-600); border-radius: 999px; padding: 0 6px; font-size: 11px; }
.of-filter.on .of-filter-n { background: rgba(255,255,255,.2); color: #fff; }

/* card grid */
.of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }.of-card { text-align: left; border: 1px solid var(--gray-200); border-radius: 14px; background: #fff; padding: 15px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 9px; transition: all .15s ease; }
.of-card:hover { border-color: var(--green-400); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(14,22,18,.28); }
.of-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.of-type-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100, #d9eccb); border-radius: 999px; padding: 3px 9px; }
.of-card-nm { font-size: 15.5px; font-weight: 800; color: var(--gray-900); line-height: 1.25; }
.of-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--gray-600); }
.of-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.of-card-meta svg { color: var(--gray-400); }
.of-card-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--gray-400); border-top: 1px dashed var(--gray-200); padding-top: 9px; margin-top: 2px; }

.of-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--gray-500); }
.of-empty .icon { width: 56px; height: 56px; border-radius: 16px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--gray-400); }
.of-empty h3 { font-size: 16px; color: var(--gray-800); margin: 0 0 4px; }
.of-empty p { font-size: 13px; margin: 0; }
.of-empty-inline { font-size: 13px; color: var(--gray-500); font-style: italic; padding: 6px 0; }

/* ── Create panel (right slide) ── */
.of-panel-scrim { position: fixed; inset: 0; background: rgba(15,23,18,.42); z-index: 120; display: flex; justify-content: flex-end; align-items: center; animation: ofScrim .18s ease; }
@keyframes ofScrim { from { opacity: 0; } to { opacity: 1; } }
.of-panel { width: 480px; max-width: 94vw; height: calc(100% - 24px); margin: 12px 12px 12px 0; border-radius: 22px; overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(0,0,0,.4); animation: ofSlide .24s cubic-bezier(.22,1,.36,1); }
@keyframes ofSlide { from { transform: translateX(40px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.of-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--gray-200); }
.of-panel-t { font-size: 17px; font-weight: 800; color: var(--gray-900); }
.of-panel-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.of-panel-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.of-panel-q { font-size: 14px; font-weight: 800; color: var(--gray-800); }
.of-panel-foot { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--gray-200); }

.of-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.of-type-card { text-align: left; border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 13px; background: #fff; cursor: pointer; transition: all .14s ease; }
.of-type-card:hover { border-color: var(--green-400); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(14,22,18,.24); }
.of-type-card.on { border-color: var(--green-600); background: var(--green-50); box-shadow: 0 0 0 2px var(--green-100, #d9eccb); }
.of-type-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--green-700); margin-bottom: 9px; }
.of-type-card.on .of-type-ic { background: var(--green-600); color: #fff; }
.of-type-nm { font-size: 13.5px; font-weight: 800; color: var(--gray-900); }
.of-type-uc { font-size: 11.5px; color: var(--gray-500); line-height: 1.4; margin-top: 2px; }

.of-outputs { border-top: 1px dashed var(--gray-200); padding-top: 14px; }
.of-outputs-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: 8px; }
.of-outputs-list { display: flex; flex-wrap: wrap; gap: 6px; }
.of-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100, #d9eccb); border-radius: 999px; padding: 4px 10px; }
.of-chip svg { color: var(--green-600); }
.of-chip.ghost { color: var(--gray-600); background: var(--gray-50); border-color: var(--gray-200); }
.of-chip.ghost svg { color: var(--gray-400); }

.of-field { display: flex; flex-direction: column; gap: 6px; }
.of-field > span { font-size: 12.5px; font-weight: 700; color: var(--gray-700); }
.of-field input, .of-field select { border: 1px solid var(--gray-300); border-radius: 9px; padding: 9px 11px; font-size: 14px; color: var(--gray-900); background: #fff; }
.of-field input:focus, .of-field select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-50); }
.of-comps { display: flex; flex-direction: column; gap: 8px; }
.of-comp { display: flex; gap: 8px; align-items: center; }
.of-comp select { flex: 1; }
.of-comp-qty { width: 64px; }

/* ── Detail ── */
.of-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--gray-500); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 10px; }
.of-back:hover { color: var(--green-700); }
.of-detail-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.of-detail-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-500); margin-top: 8px; }
.of-outputs-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.of-detail-card { padding: 20px 22px; }
.of-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); margin: 22px 0 12px; }
.of-sec-h:first-child { margin-top: 0; }
.of-sec-h svg { color: var(--green-600); }
.of-note { font-size: 12.5px; color: var(--gray-500); margin-top: 8px; }
.of-actions { margin-top: 18px; display: flex; gap: 10px; }

/* nutrition table */
.of-nutr, .of-matrix, .of-proc { width: 100%; border-collapse: collapse; font-size: 13px; }
.of-nutr th, .of-nutr td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--gray-100); }
.of-nutr th:first-child, .of-nutr td:first-child { text-align: left; }
.of-nutr thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); background: var(--gray-50); }
.of-nutr-k { font-weight: 600; color: var(--gray-700); }
.of-nutr-v { font-variant-numeric: tabular-nums; color: var(--gray-900); font-weight: 600; }

.of-complist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.of-complist li { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 9px; font-size: 13.5px; color: var(--gray-800); }
.of-qtybadge { font-size: 12px; font-weight: 800; color: var(--green-700); background: var(--green-50); border-radius: 999px; padding: 2px 9px; }

/* allergen matrix */
.of-matrix-wrap, .of-proc-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 10px; }
.of-matrix th, .of-matrix td { padding: 9px 12px; border-bottom: 1px solid var(--gray-100); text-align: center; }
.of-matrix th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); background: var(--gray-50); white-space: nowrap; }
.of-matrix-nm { text-align: left; font-weight: 600; color: var(--gray-800); white-space: nowrap; }
.of-matrix-cell svg { color: var(--green-600); }
.of-matrix-dot { color: var(--gray-300); }

.of-proc th, .of-proc td { padding: 8px 12px; border-bottom: 1px solid var(--gray-100); text-align: left; }
.of-proc th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); background: var(--gray-50); }
.of-proc-ing { text-transform: capitalize; color: var(--gray-700); }
.of-proc-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gray-900); }

/* menu QR */
.of-qr-row { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--gray-200); }
.of-qr { width: 96px; height: 96px; border: 1px solid var(--gray-200); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gray-800); flex-shrink: 0; }

@media (max-width: 700px) {
  .of-type-grid { grid-template-columns: 1fr; }
  .of-panel { width: 100vw; height: 100%; margin: 0; border-radius: 0; }
}

/* ── §27 Compliance Dashboard ── */
.cd-layout { display: grid; grid-template-columns: 208px 1fr; gap: 20px; align-items: start; }
.cd-sidemenu { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 8px; }
.cd-sidebtn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: background .12s, color .12s; }
.cd-sidebtn svg { flex-shrink: 0; color: var(--gray-400); }
.cd-sidebtn:hover { background: var(--gray-50); color: var(--gray-800); }
.cd-sidebtn.on { background: var(--green-50); color: var(--green-800); }
.cd-sidebtn.on svg { color: var(--green-700); }
.cd-sidebtn.ghost { color: var(--gray-500); }
.cd-sidemenu-sep { height: 1px; background: var(--gray-100); margin: 6px 4px; }
.cd-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 820px) { .cd-layout { grid-template-columns: 1fr; } .cd-sidemenu { position: static; flex-direction: row; flex-wrap: wrap; } .cd-sidebtn { width: auto; } .cd-sidemenu-sep { display: none; } }
/* legacy toolbar (kept for safety) */
.cd-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 18px 0 18px; }
.cd-card { text-align: left; border: 1px solid var(--gray-200); border-radius: 14px; background: #fff; padding: 14px 15px; display: flex; flex-direction: column; gap: 4px; cursor: default; transition: all .15s ease; }
.cd-card.clickable { cursor: pointer; }
.cd-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(14,22,18,.28); border-color: var(--gray-300); }
.cd-card-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-600); margin-bottom: 4px; }
.cd-card.warning .cd-card-ic { background: #FEF6E7; color: #B45309; }
.cd-card.error .cd-card-ic { background: #FEEceC; color: var(--error-600); }
.cd-card.success .cd-card-ic { background: var(--green-50); color: var(--green-700); }
.cd-card-v { font-size: 26px; font-weight: 800; color: var(--gray-900); line-height: 1; display: flex; align-items: baseline; gap: 7px; }
.cd-card-hint { font-size: 11px; font-weight: 700; color: var(--gray-400); }
.cd-card-l { font-size: 12px; color: var(--gray-500); font-weight: 600; line-height: 1.3; }

.cd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cd-filter-grp { display: flex; flex-wrap: wrap; gap: 7px; }
.cd-advfilter { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 9px; border: 1px solid var(--gray-200); background: #fff; font-size: 13px; font-weight: 600; color: var(--gray-800); cursor: pointer; }
.cd-advfilter:hover { border-color: var(--gray-300); }

.cd-applied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cd-applied-lbl { font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.cd-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gray-100); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.cd-chip button { border: 0; background: rgba(0,0,0,.08); width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: inherit; }
.cd-chip button:hover { background: rgba(0,0,0,.16); }
.cd-clear { border: 0; background: transparent; color: var(--green-700); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cd-clear:hover { text-decoration: underline; }

/* sections */
.cd-sec { margin-bottom: 22px; }
.cd-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cd-sec-accent { width: 4px; height: 20px; border-radius: 3px; background: var(--green-600); }
.cd-sec-accent[data-type="menu-item"] { background: #6D28D9; }
.cd-sec-accent[data-type="meal-plan"] { background: #D97706; }
.cd-sec-accent[data-type="combo"] { background: #2563EB; }
.cd-sec-accent[data-type="catering"] { background: #DB2777; }
.cd-sec-title { font-size: 15px; font-weight: 800; color: var(--gray-900); }
.cd-sec-count { font-size: 12px; font-weight: 700; color: var(--gray-500); }
.cd-sec-toggle { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--gray-500); }
.cd-sec-toggle:hover { background: var(--gray-100); color: var(--gray-800); }
.cd-sec-empty { border: 1px dashed var(--gray-200); border-radius: 12px; padding: 20px; text-align: center; color: var(--gray-500); font-size: 13px; }

.cd-table-wrap { overflow-x: auto; padding: 0; border: 1px solid var(--gray-200); border-radius: 14px; background: #fff; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cd-table th, .cd-table td { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); text-align: left; vertical-align: middle; }
.cd-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); background: var(--gray-50); white-space: nowrap; }
.cd-of-nm { font-weight: 700; color: var(--gray-900); }
.cd-recipe { color: var(--gray-600); }
.cd-reviewer, .cd-updated { color: var(--gray-600); white-space: nowrap; }
.cd-reviewer { display: flex; align-items: center; gap: 7px; }
.cd-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-size: 9.5px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.of-type-badge.sm { font-size: 10px; padding: 2px 8px; background: var(--green-50); color: var(--green-700); }
.of-type-badge.sm[data-type="menu-item"] { background: #F4EEFE; color: #6D28D9; }
.of-type-badge.sm[data-type="meal-plan"] { background: #FEF6E7; color: #B45309; }
.of-type-badge.sm[data-type="combo"] { background: #EDF4FF; color: #2563EB; }
.of-type-badge.sm[data-type="catering"] { background: #FDEDF5; color: #DB2777; }
.cd-viewlabel { border: 0; background: transparent; color: var(--green-700); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cd-viewlabel:hover { text-decoration: underline; }
.cd-viewall { display: block; width: 100%; text-align: center; border: 0; border-top: 1px solid var(--gray-100); background: transparent; padding: 13px; font-size: 13px; font-weight: 600; color: var(--gray-600); cursor: pointer; }
.cd-viewall:hover { color: var(--green-700); background: var(--gray-50); }
.cd-empty { text-align: center; color: var(--gray-500); font-style: italic; padding: 40px; }

@media (max-width: 1100px) { .cd-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cd-cards { grid-template-columns: repeat(2, 1fr); } }

/* ── Product compliance command center (Product Offering PRD) ── */
.pc-wrap { display: flex; flex-direction: column; gap: 16px; }
.pc-overall { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1.5px solid; }
.pc-overall.ok { background: linear-gradient(135deg,#EFF8E9,#E4F2D7); border-color: #C6E2AE; }
.pc-overall.blocked { background: linear-gradient(135deg,#FEF6EC,#FDEFDC); border-color: #F5D7A8; }
.pc-overall-l { display: flex; align-items: center; gap: 13px; }
.pc-overall.ok .pc-overall-l svg { color: #1F7A37; }
.pc-overall.blocked .pc-overall-l svg { color: #B45309; }
.pc-overall-k { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.pc-overall-l b { font-size: 19px; font-weight: 800; color: var(--gray-900); }
.pc-overall-export { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 5px 13px; }
.pc-overall-export.ok { background: #1F7A37; color: #fff; }
.pc-overall-export.bad { background: #B45309; color: #fff; }
.pc-blocking { background: #FEF6F2; border: 1px solid #F4C7C7; border-radius: 12px; padding: 13px 15px; }
.pc-blocking-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: #b42318; margin-bottom: 7px; }
.pc-blocking ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pc-blocking li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #a82828; }
.pc-rows { border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.pc-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; font-size: 13px; color: var(--gray-800); border-bottom: 1px solid var(--gray-100); }
.pc-row:last-child { border-bottom: 0; }
.pc-st { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 10px; }
.pc-st.ok { background: #ECFBE9; color: #1F7A37; }
.pc-st.warn { background: #FEF8EC; color: #B45309; }
.pc-st.bad { background: #FEECEC; color: #B42318; }
.pc-st.na { background: var(--gray-100); color: var(--gray-500); }
.pc-flow-card { border: 1px solid var(--gray-200); border-radius: 14px; padding: 16px; background: #FDFDFC; }
.pc-flow-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-flow-step { display: flex; align-items: center; gap: 6px; opacity: .5; font-size: 11.5px; font-weight: 700; color: var(--gray-700); }
.pc-flow-step.now, .pc-flow-step.done { opacity: 1; }
.pc-flow-dot { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--gray-200); color: var(--gray-600); }
.pc-flow-step.now .pc-flow-dot { background: var(--green-700,#2f6b18); color: #fff; }
.pc-flow-step.done .pc-flow-dot { background: #d6eec4; color: #2c5e14; }
.pc-flow-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-flow-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gray-500); margin-top: 10px; }
.pc-open-ls { align-self: flex-start; }
.pc-audit-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--gray-900); }
.pc-audit-h svg { color: var(--green-700,#2f6b18); }
.pc-empty { font-size: 12.5px; color: var(--gray-500); padding: 16px 0; }
.pc-audit { display: flex; flex-direction: column; gap: 0; }
.pc-audit-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.pc-audit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-600,#2f9e44); margin-top: 5px; flex-shrink: 0; }
.pc-audit-tx { flex: 1; }
.pc-audit-tx b { display: block; font-size: 13px; font-weight: 700; color: var(--gray-900); }
.pc-audit-tx span { font-size: 11.5px; color: var(--gray-500); }
.pc-audit-meta { font-size: 11px; color: var(--gray-500); text-align: right; white-space: nowrap; }

/* product setup (create panel step 2) */
.of-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.of-inline { display: flex; gap: 6px; }
.of-inline input { flex: 1; min-width: 0; }
.of-inline select { width: 64px; flex-shrink: 0; }
.of-warn { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #b42318; margin-top: 6px; }
.of-hint-sm { font-size: 11px; color: var(--gray-500); margin-top: 6px; }

/* product detail step navigation (Back / Next) */
.ps-stepnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.ps-stepnav .btn { min-width: 150px; justify-content: center; }
.ps-stepnav-count { font-size: 12px; font-weight: 700; color: var(--gray-500); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ps-stepnav .btn { min-width: 0; flex: 1; } }

/* product detail wizard — top step rail · content · bigger preview */
.ps-wizard { display: flex; flex-direction: column; gap: 16px; }
.ps-railnav.ps-railnav-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; background: #FBFCFA; border: 1px solid var(--gray-200); border-radius: 14px; }
.ps-wizard-body { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.ps-railnav { display: flex; flex-direction: column; gap: 4px; }
.ps-railnav-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); padding: 0 4px 6px; }
.ps-railstep { display: flex; align-items: center; gap: 9px; text-align: left; border: 0; background: none; border-radius: 10px; padding: 9px 14px; cursor: pointer; transition: background .14s ease; }
.ps-railstep:hover .ps-railstep-l { color: var(--gray-900); }
.ps-railstep.on { background: #E7F3DC; }
.ps-railstep-n { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--gray-100); color: var(--gray-500); }
.ps-railstep.on .ps-railstep-n { background: var(--green-700,#2f6b18); color: #fff; }
.ps-railstep.done .ps-railstep-n { background: #cdeab3; color: #2c5e14; }
.ps-railstep-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--gray-500); white-space: nowrap; }
.ps-railstep.on .ps-railstep-l { color: var(--gray-900); }
.ps-railstep.done .ps-railstep-l { color: var(--gray-700); }
.ps-railstep-l svg { display: none; }
.ps-wizard-main { min-width: 0; }
.ps-railpreview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; }
.ps-preview-card { border: 1px solid var(--gray-200); border-radius: 14px; background: #FDFDFC; padding: 16px; box-shadow: 0 1px 2px rgba(14,22,18,.05); }
.ps-prev { display: flex; flex-direction: column; gap: 13px; }
.ps-prev-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--gray-900); }
.ps-prev-badge svg { color: var(--green-700,#2f6b18); }
.ps-prev-ring { display: flex; align-items: center; gap: 11px; }
.ps-prev-ring b { display: block; font-size: 13px; font-weight: 800; color: var(--gray-900); }
.ps-prev-ring span { font-size: 11px; color: var(--gray-500); }
.ps-prev-meta { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; background: var(--gray-50); border-radius: 10px; }
.ps-prev-meta > div { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.ps-prev-meta span { color: var(--gray-500); }
.ps-prev-meta b { color: var(--gray-900); text-align: right; }
.ps-prev-nft { border: 1.5px solid var(--gray-900); border-radius: 6px; padding: 9px 11px; }
.ps-prev-nft-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--gray-900); padding-bottom: 4px; margin-bottom: 3px; color: var(--gray-900); }
.ps-prev-nft-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.ps-prev-nft-row:last-child { border-bottom: 0; }
.ps-prev-nft-row b { color: var(--gray-900); }
.ps-prev-sec { border: 1px solid var(--gray-200); border-radius: 11px; padding: 11px; }
.ps-prev-sec-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); margin-bottom: 8px; }
.ps-prev-sec-h svg { color: var(--green-700,#2f6b18); }
.ps-prev-sec-h span { margin-left: auto; background: var(--gray-100); border-radius: 999px; padding: 1px 8px; font-size: 10px; color: var(--gray-600); }
.ps-prev-none { font-size: 11.5px; color: var(--gray-400); }
.ps-prev-bc { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--gray-150,#eee); border-radius: 8px; background: #fff; margin-bottom: 7px; }
.ps-prev-bc:last-child { margin-bottom: 0; }
.ps-prev-bc-top { display: flex; align-items: center; gap: 7px; }
.ps-prev-pending { font-size: 10.5px; color: var(--amber-700,#B45309); }
.ps-prev-qrs { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-prev-qr { border: 1px solid var(--gray-150,#eee); border-radius: 8px; padding: 4px; background: #fff; }
.ps-prev-status { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; border-radius: 9px; padding: 9px 11px; }
.ps-prev-status.ok { background: #ECFBE9; color: #1F7A37; }
.ps-prev-status.blocked { background: #FEF6EC; color: #B45309; }
@media (max-width: 980px) {
  .ps-wizard-body { grid-template-columns: 1fr; }
  .ps-railpreview { position: static; }
}