.prod-wrap { }
.prod-kpi { border-radius: 6px; color: #fff; padding: 16px 18px; min-height: 108px; margin-bottom: 16px; }
.prod-kpi h3 { margin: 0; font-size: 28px; font-weight: 700; }
.prod-kpi span { display: block; opacity: .9; font-size: 12px; margin-top: 4px; }
.prod-kpi.teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.prod-kpi.orange { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.prod-kpi.slate { background: linear-gradient(135deg, #334155, #64748b); }
.prod-kpi.rose { background: linear-gradient(135deg, #be123c, #fb7185); }
.prod-kpi.indigo { background: linear-gradient(135deg, #3730a3, #6366f1); }
.prod-step { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; color: #94a3b8; }
.prod-step.on { color: #0d9488; font-weight: 700; }
.prod-step .n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.prod-canvas-wrap { background: #e2e8f0; padding: 16px; overflow: auto; min-height: 420px; max-height: 70vh; }
.prod-label { position: relative; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.15); margin: 0 auto; }
.prod-el { position: absolute; border: 1px dashed transparent; cursor: move; overflow: hidden; font-family: Arial, sans-serif; box-sizing: border-box; line-height: 1.15; }
.prod-el.sel { border-color: #0d9488; background: rgba(13,148,136,.06); }
.prod-toolbar { padding: 8px 12px; border-bottom: 1px solid #e7eaec; }
.prod-toolbar .btn { margin: 0 2px 4px 0; }
.prod-toolbar label { font-weight: 400; font-size: 12px; margin: 0 8px 0 0; }
.prod-sep { display: inline-block; width: 1px; height: 18px; background: #cbd5e1; margin: 0 8px -4px; }
.prod-guide { position: absolute; z-index: 20; pointer-events: none; background: #ec4899; }
.prod-guide.v { top: 0; bottom: 0; width: 1px; }
.prod-guide.h { left: 0; right: 0; height: 1px; }
.prod-palette .btn { margin: 0 6px 6px 0; }
.prod-zoom-bar { float: right; margin-top: 2px; }
.prod-zoom-bar span { display: inline-block; min-width: 48px; text-align: center; font-size: 12px; font-weight: 700; color: #0d9488; }
.prod-zoom-bar .btn { margin-left: 4px; }
.prod-chain { max-height: calc(100vh - 220px); overflow-y: auto; overflow-x: hidden; }
.prod-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid #cbd5e1; margin-left: 12px; }
.prod-timeline li { padding: 0 0 16px 18px; position: relative; }
.prod-timeline li:before { content: ""; width: 10px; height: 10px; background: #0d9488; border-radius: 50%; position: absolute; left: -6px; top: 4px; }
.prod-timeline .muted { color: #64748b; font-size: 12px; }
.prod-serial { margin-left: 8px; font-size: 12px; color: #0d9488; font-weight: 600; }
.prod-exp-ok { color: #0d9488; }
.prod-exp-warn { color: #d97706; font-weight: 700; }
.prod-exp-danger { color: #be123c; font-weight: 700; }
.prod-exp-expired { color: #fff; background: #be123c; padding: 1px 6px; border-radius: 3px; }
.prod-help { font-size: 12px; color: #64748b; }
.prod-rich-wrap { border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; overflow: hidden; }
.prod-rich-toolbar { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 6px 8px; }
.prod-rich-toolbar button {
    display: inline-block; min-width: 32px; height: 30px; margin: 0 2px 2px 0;
    border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; color: #0f172a;
    font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.prod-rich-toolbar button:hover { background: #ecfeff; border-color: #0d9488; color: #0d9488; }
.prod-rich-toolbar button:active { background: #ccfbf1; }
.prod-rich-sep { display: inline-block; width: 1px; height: 22px; background: #cbd5e1; margin: 0 6px -6px; vertical-align: middle; }
.prod-rich-editable {
    min-height: 240px; max-height: 480px; overflow-y: auto;
    padding: 12px 14px; outline: none; line-height: 1.55; font-size: 14px; color: #0f172a;
}
.prod-rich-editable:focus { box-shadow: inset 0 0 0 2px rgba(13,148,136,.15); }
.prod-rich-editable p { margin: 0 0 10px; }
.prod-rich-editable h3 { margin: 0 0 10px; font-size: 16px; color: #0d9488; }
.prod-rich-editable ul, .prod-rich-editable ol { margin: 0 0 10px; padding-left: 22px; }
.prod-rich-editable a { color: #0d9488; }
.prod-ifu-lang-hint { font-size: 12px; padding: 10px 12px; }
.prod-ifu-list { border-top: 1px solid #e2e8f0; padding-top: 12px; }
.prod-ifu-list > label { display: block; margin-bottom: 8px; }
.prod-ifu-row { padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.prod-ifu-row .label { margin-right: 6px; }
.prod-ifu-row a { margin-left: 8px; }