:root {
  --bg: #F7F6F2;
  --bg-card: #FFFFFF;
  --bg-surface: #F0EFE9;
  --bg-input: #FFFFFF;
  --border: #E4E2D8;
  --border-med: #C8C6BA;
  --text: #18170F;
  --text-muted: #6A6960;
  --text-hint: #9A9890;
  --accent: #18170F;
  --accent-inv: #FFFFFF;
  --green-bg: #EAF5EE; --green-text: #1A6B3A; --green-border: #A8D8BA;
  --amber-bg: #FDF3E0; --amber-text: #8A5E00; --amber-border: #F0C96B;
  --red-bg: #FDF0F0;   --red-text: #8A2020;   --red-border: #F0AAAA;
  --blue-bg: #EEF4FB;  --blue-text: #1A4A8A;  --blue-border: #AABFE0;
  --purple-bg: #F0EEFB;--purple-text: #4A3A9A;--purple-border: #BEB4E8;
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 1px 4px rgba(0,0,0,0.06);
  --font: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SF Mono', 'Fira Mono', 'Menlo', monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --bg: #141310; --bg-card: #1C1B18; --bg-surface: #242320; --bg-input: #1C1B18;
    --border: #2C2B27; --border-med: #3C3B36;
    --text: #EEECD8; --text-muted: #9A9888; --text-hint: #6A6858;
    --accent: #EEECD8; --accent-inv: #141310;
    --green-bg: #0E2B1A; --green-text: #6FCF97; --green-border: #1A4A2A;
    --amber-bg: #2A1E00; --amber-text: #F0C96B; --amber-border: #4A3500;
    --red-bg: #2A0E0E;   --red-text: #F09090;   --red-border: #4A1A1A;
    --blue-bg: #0E1A2A;  --blue-text: #7AAFF0;  --blue-border: #1A2A4A;
    --purple-bg: #160E2A;--purple-text: #A898F0;--purple-border: #281A4A;
  }
}
/* Explicit dark override (manual toggle) */
:root.theme-dark {
  --bg: #141310; --bg-card: #1C1B18; --bg-surface: #242320; --bg-input: #1C1B18;
  --border: #2C2B27; --border-med: #3C3B36;
  --text: #EEECD8; --text-muted: #9A9888; --text-hint: #6A6858;
  --accent: #EEECD8; --accent-inv: #141310;
  --green-bg: #0E2B1A; --green-text: #6FCF97; --green-border: #1A4A2A;
  --amber-bg: #2A1E00; --amber-text: #F0C96B; --amber-border: #4A3500;
  --red-bg: #2A0E0E;   --red-text: #F09090;   --red-border: #4A1A1A;
  --blue-bg: #0E1A2A;  --blue-text: #7AAFF0;  --blue-border: #1A2A4A;
  --purple-bg: #160E2A;--purple-text: #A898F0;--purple-border: #281A4A;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);font-size:14px;background:var(--bg);color:var(--text);min-height:100vh;}

/* Layout */
.app-shell{display:flex;flex-direction:column;min-height:100vh;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:54px;background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{width:28px;height:28px;background:var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--accent-inv);}
.logo-mark svg{width:15px;height:15px;}
.logo-text{font-size:14px;font-weight:700;letter-spacing:-0.01em;}
.logo-sub{font-size:10px;color:var(--text-hint);letter-spacing:0.1em;text-transform:uppercase;}
.status-bar{font-size:12px;color:var(--text-hint);}
.status-bar.ok{color:var(--green-text);}
.status-bar.err{color:var(--red-text);}

.main-layout{display:flex;flex:1;}
.sidebar{width:196px;min-width:196px;background:var(--bg-card);border-right:1px solid var(--border);padding:14px 0;position:sticky;top:54px;height:calc(100vh - 54px);display:flex;flex-direction:column;overflow-y:auto;}
.sidebar-section{padding:0 10px;margin-bottom:8px;}
.sidebar-bottom{margin-top:auto;padding:10px 10px 0;border-top:1px solid var(--border);}
.sidebar-label{font-size:10px;font-weight:700;color:var(--text-hint);letter-spacing:0.1em;text-transform:uppercase;padding:0 8px;margin-bottom:4px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--text-muted);border:none;background:none;width:100%;text-align:left;transition:all 0.1s;}
.nav-item:hover{background:var(--bg-surface);color:var(--text);}
.nav-item.active{background:var(--bg-surface);color:var(--text);font-weight:600;}
.nav-icon{width:15px;height:15px;flex-shrink:0;opacity:0.55;}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:0.9;}

.content{flex:1;padding:28px 32px;min-width:0;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Typography */
.page-title{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin-bottom:3px;}
.page-desc{font-size:13px;color:var(--text-muted);margin-bottom:22px;line-height:1.5;}
.section-title{font-size:10px;font-weight:700;color:var(--text-hint);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:10px;}

/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow);}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.card-title{font-size:14px;font-weight:600;}

/* Forms */
label{font-size:11px;color:var(--text-muted);display:block;margin-bottom:5px;font-weight:600;letter-spacing:0.02em;}
input[type=text],input[type=number],select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:border-color 0.15s,box-shadow 0.15s;}
input:focus,select:focus{border-color:var(--border-med);box-shadow:0 0 0 3px rgba(0,0,0,0.05);}
.field{margin-bottom:14px;}
.row{display:flex;gap:12px;}
.row .field{flex:1;min-width:0;}
hr{border:none;border-top:1px solid var(--border);margin:18px 0;}

/* Buttons */
.btn{padding:8px 15px;border-radius:var(--radius);font-size:13px;font-family:var(--font);cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text);transition:all 0.1s;font-weight:500;white-space:nowrap;}
.btn:hover{background:var(--bg-surface);}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--accent);color:var(--accent-inv);border-color:var(--accent);}
.btn-primary:hover{opacity:0.82;background:var(--accent);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted);}
.btn-ghost:hover{background:var(--bg-surface);border-color:transparent;color:var(--text);}
.btn-danger{color:var(--red-text);border-color:var(--red-border);background:transparent;}
.btn-danger:hover{background:var(--red-bg);}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-xs{padding:3px 8px;font-size:11px;}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* Badges & tags */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-raw{background:var(--green-bg);color:var(--green-text);}
.badge-pkg{background:var(--blue-bg);color:var(--blue-text);}
.badge-sub{background:var(--purple-bg);color:var(--purple-text);}
.tag{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border);font-family:var(--mono);}

/* Table */
.table-wrap{overflow-x:auto;width:100%;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;padding:9px 12px;font-size:10px;font-weight:700;color:var(--text-hint);text-transform:uppercase;letter-spacing:0.07em;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--bg-surface);}

/* Metric grid */
.metric-grid{display:grid;gap:10px;margin-top:14px;}
.cols-2{grid-template-columns:1fr 1fr;}
.cols-3{grid-template-columns:1fr 1fr 1fr;}
.cols-4{grid-template-columns:1fr 1fr 1fr 1fr;}
.metric-card{background:var(--bg-surface);border-radius:var(--radius);padding:14px 16px;}
.metric-label{font-size:10px;font-weight:700;color:var(--text-hint);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:6px;}
.metric-value{font-size:22px;font-weight:700;letter-spacing:-0.02em;}
.metric-sub{font-size:12px;color:var(--text-muted);margin-top:2px;}

/* Alerts */
.alert{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:10px;line-height:1.5;}
.alert-warn{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber-border);}
.alert-ok{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green-border);}
.alert-info{background:var(--blue-bg);color:var(--blue-text);border:1px solid var(--blue-border);}

/* Formula lines */
.formula-line{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.formula-line select{flex:1;min-width:0;}
.formula-line input[type=number]{width:80px;flex-shrink:0;}
.fml-drag-handle{cursor:grab;font-size:16px;color:var(--text-hint);flex-shrink:0;line-height:1;user-select:none;padding:0 2px;}
.fml-drag-handle:active{cursor:grabbing;}
.fml-dragging{opacity:0.4;}
.fml-drag-over{outline:2px solid var(--accent);border-radius:var(--radius);}
.pct-sign{font-size:12px;color:var(--text-muted);flex-shrink:0;}
.total-bar{padding:9px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;margin-top:6px;}
.total-ok{background:var(--green-bg);color:var(--green-text);}
.total-warn{background:var(--amber-bg);color:var(--amber-text);}
.cogs-display{margin-top:10px;font-size:13px;color:var(--text-muted);}

/* Pack rows */
.pack-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pack-row input{flex:1;}
.pack-unit{width:58px !important;flex-shrink:0;padding:8px 4px !important;}
.cpg-label{font-size:12px;color:var(--text-muted);min-width:82px;font-family:var(--mono);}
input:disabled{opacity:0.45;cursor:not-allowed;}

/* Run lines */
.run-line{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:12px 16px;background:var(--bg-surface);border-radius:var(--radius);}
.run-line select{flex:1;min-width:0;}
.run-line input{width:90px;flex-shrink:0;}

/* Misc */
.form-msg{margin-top:10px;font-size:13px;min-height:18px;}
.empty{text-align:center;padding:48px 24px;color:var(--text-hint);}
.empty-icon{font-size:28px;margin-bottom:10px;}
.empty-text{font-size:14px;}
.mono{font-family:var(--mono);font-size:12px;}
.export-row{display:flex;justify-content:flex-end;margin-bottom:12px;}

/* Theme toggle */
.theme-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;cursor:pointer;font-size:16px;color:var(--text-muted);transition:all 0.15s;line-height:1;}
.theme-btn:hover{background:var(--bg-surface);border-color:var(--border-med);}

/* Responsive: wider screens get more breathing room */
@media (min-width: 1200px) {
  .content { padding: 32px 48px; }
}
@media (min-width: 1600px) {
  .content { padding: 36px 64px; }
}

/* Form row wraps nicely */
.row { flex-wrap: wrap; }

/* ── Phase 2: Large modals ───────────────────────────────── */
.nk-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;}
.nk-modal-lg{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:860px;min-height:400px;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
.nk-modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border);}
.nk-modal-body{padding:20px 24px;flex:1;overflow-y:auto;max-height:70vh;}

/* ── Inner tab strip ──────────────────────────────────────── */
.nk-inner-tabs{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--border);background:var(--bg-surface);}
.nk-inner-tab{padding:9px 16px;font-size:12px;font-weight:600;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;letter-spacing:0.02em;transition:all 0.12s;}
.nk-inner-tab:hover{color:var(--text);}
.nk-inner-tab.active{color:var(--text);border-bottom-color:var(--accent);}

/* ── Formula card inner tabs ─────────────────────────────── */
.fml-card-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin:-20px -24px 16px;padding:0 24px;background:var(--bg-surface);}
.fml-card-tab{padding:8px 14px;font-size:11px;font-weight:600;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;letter-spacing:0.02em;transition:all 0.12s;}
.fml-card-tab:hover{color:var(--text);}
.fml-card-tab.active{color:var(--text);border-bottom-color:var(--accent);}

/* ── Score dots widget ───────────────────────────────────── */
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;}
.score-item{padding:14px 16px;background:var(--bg-surface);border-radius:var(--radius);border:1px solid var(--border);}
.score-label{font-size:12px;font-weight:700;margin-bottom:3px;}
.score-desc{font-size:11px;color:var(--text-muted);margin-bottom:10px;line-height:1.4;}
.score-dots{display:flex;gap:8px;cursor:pointer;}
.score-dot{width:22px;height:22px;border-radius:50%;background:var(--bg-card);border:2px solid var(--border);transition:all 0.12s;cursor:pointer;}
.score-dot.filled{background:var(--accent);border-color:var(--accent);}
.score-dot:hover{border-color:var(--border-med);}
.score-value{font-size:11px;color:var(--text-muted);margin-left:8px;align-self:center;}

/* ── Architecture blocks ─────────────────────────────────── */
.arch-block{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;}
.arch-block-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg-surface);cursor:pointer;user-select:none;}
.arch-block-title{font-size:12px;font-weight:700;color:var(--text);}
.arch-block-body{padding:14px;display:none;}
.arch-block.open .arch-block-body{display:block;}
.arch-block.open .arch-block-header{border-bottom:1px solid var(--border);}

/* ── Decision radio buttons ──────────────────────────────── */
.decision-btn{display:flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500;transition:all 0.12s;}
.decision-btn:has(input:checked){background:var(--bg-surface);border-color:var(--border-med);color:var(--text);}
.decision-btn input{display:none;}

/* ── Document center ────────────────────────────────────── */
.doc-gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.doc-gen-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:var(--bg-surface);}
.doc-gen-icon{font-size:20px;margin-bottom:8px;opacity:0.4;}
.doc-gen-title{font-size:13px;font-weight:700;margin-bottom:4px;}
.doc-gen-desc{font-size:11px;color:var(--text-muted);margin-bottom:12px;line-height:1.4;}

/* ── Dev log entry rows ──────────────────────────────────── */
.devlog-entry{border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:8px;background:var(--bg-surface);}
.devlog-entry-header{display:flex;justify-content:space-between;align-items:center;}
.devlog-decision-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;}
.decision-advance{background:var(--blue-bg);color:var(--blue-text);}
.decision-modify{background:var(--amber-bg);color:var(--amber-text);}
.decision-reject{background:var(--red-bg);color:var(--red-text);}
.decision-approved{background:var(--green-bg);color:var(--green-text);}

/* ── Dossier button in ingredient table ──────────────────── */
.ing-dossier-btn{font-size:10px;}

/* ── Compliance status badges ────────────────────────────── */
.compliance-pass{color:var(--green-text);background:var(--green-bg);border:1px solid var(--green-border);}
.compliance-warning{color:var(--amber-text);background:var(--amber-bg);border:1px solid var(--amber-border);}
.compliance-fail{color:var(--red-text);background:var(--red-bg);border:1px solid var(--red-border);}
.compliance-unknown{color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border);}
.compliance-status{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}

/* ── Raw Material Composition rows ───────────────────────── */
.comp-row{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;}
.comp-row-main{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.comp-row-notes{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.comp-cell{display:flex;flex-direction:column;min-width:0;}
.comp-cell label{font-size:10px;font-weight:700;color:var(--text-hint);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:4px;}
.comp-cell input,.comp-cell select{font-size:12px;padding:5px 8px;}
.comp-inci{flex:2;min-width:160px;}
.comp-concept{flex:2;min-width:160px;}
.comp-disc{flex:1.2;min-width:130px;}
.comp-pct-exact{width:80px;flex-shrink:0;}
.comp-pct-range{width:75px;flex-shrink:0;}
.comp-class{flex:1.2;min-width:140px;}

/* ── Textarea styles ──────────────────────────────────────── */
textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:border-color 0.15s;resize:vertical;}
textarea:focus{border-color:var(--border-med);box-shadow:0 0 0 3px rgba(0,0,0,0.05);}

/* ── Raw Material Detail Modal ─────────────────────────────── */
.nk-modal-xl{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);
  width:min(96vw,1100px);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
.rm-detail-tab{animation:fadeIn 0.15s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Overview grid */
.rm-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:4px;}
.rm-ov-field{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;}
.rm-ov-label{font-size:10px;font-weight:700;color:var(--text-hint);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;}
.rm-ov-value{font-size:13px;color:var(--text);word-break:break-word;}
.rm-overview-tag{display:inline-block;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:20px;padding:2px 9px;font-size:11px;}

/* Technical specs section labels */
.rm-specs-section-label{font-size:10px;font-weight:700;color:var(--text-hint);text-transform:uppercase;
  letter-spacing:0.08em;margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);}

/* Document type tag */
.doc-type-tag{display:inline-block;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:4px;padding:1px 7px;font-size:10px;font-weight:600;white-space:nowrap;}

/* Lot cards */
.rm-lot-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:10px;background:var(--bg-card);}
.rm-lot-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.rm-lot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;}
.rm-lot-field{display:flex;flex-direction:column;gap:2px;}
.rm-lot-label{font-size:10px;font-weight:700;color:var(--text-hint);text-transform:uppercase;letter-spacing:0.05em;}
.lot-release-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:0.06em;
  padding:1px 6px;border-radius:10px;background:var(--bg-surface);border:1px solid currentColor;}

/* ── Equipment & Asset Management ────────────────────────── */
.eq-status-badge,.cal-status-badge{display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:0.05em;padding:1px 8px;border-radius:10px;border:1px solid currentColor;}

/* Equipment status colors */
.eq-status-green{color:var(--green-text);}
.eq-status-amber{color:var(--amber-text);}
.eq-status-red{color:var(--red-text);}
.eq-status-hint{color:var(--text-hint);}

/* Calibration status colors */
.cal-overdue{color:var(--red-text);}
.cal-due-soon{color:var(--amber-text);}
.cal-current{color:var(--green-text);}
.cal-never{color:var(--text-hint);}

/* Dashboard grid */
.eq-dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:8px;}

.eq-metric-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;
  background:var(--bg-card);text-align:center;}
.eq-metric-num{font-size:28px;font-weight:700;line-height:1.1;color:var(--text);}
.eq-metric-label{font-size:11px;color:var(--text-muted);margin-top:4px;}

/* Equipment detail modal inner tabs */
.eq-detail-tab{padding:0;}

/* Overdue card highlight */
#eq-card-overdue .eq-metric-num{color:var(--red-text);}
#eq-card-due-soon .eq-metric-num{color:var(--amber-text);}
#eq-card-never .eq-metric-num{color:var(--text-hint);}

/* ── SOP Builder ───────────────────────────────────────────── */
.sop-step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px;display:flex;align-items:flex-start;gap:10px;
  border-left:4px solid var(--border);transition:border-color 0.15s,opacity 0.15s;}
.sop-step-card.dragging{opacity:0.4;}
.sop-step-card.drag-over{border-color:var(--primary);}
.sop-drag-handle{cursor:grab;color:var(--text-hint);font-size:16px;padding-top:1px;flex-shrink:0;user-select:none;}
.sop-drag-handle:active{cursor:grabbing;}
.sop-step-type-badge{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.sop-step-body{flex:1;min-width:0;}
.sop-step-title{font-size:13px;font-weight:600;margin-bottom:2px;}
.sop-step-instr{font-size:12px;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;}
.sop-step-meta{font-size:11px;color:var(--text-hint);margin-top:3px;}
.sop-step-edit-form{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;margin-top:6px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sop-step-edit-form .field{margin:0;}
.sop-step-edit-form .field.full{grid-column:1/-1;}

/* SOP step type left-border colors */
.sop-type-phase-header{border-left-color:var(--purple-text);}
.sop-type-weighing{border-left-color:var(--blue-text);}
.sop-type-mixing{border-left-color:var(--blue-text);}
.sop-type-heating{border-left-color:var(--amber-text);}
.sop-type-cooling{border-left-color:var(--blue-text);}
.sop-type-homogenization{border-left-color:var(--purple-text);}
.sop-type-ph-check{border-left-color:var(--green-text);}
.sop-type-ph-adjustment{border-left-color:var(--green-text);}
.sop-type-qc-checkpoint{border-left-color:var(--green-text);}
.sop-type-packaging{border-left-color:var(--blue-text);}
.sop-type-decision{border-left-color:var(--red-text);}
.sop-type-hold{border-left-color:var(--amber-text);}
.sop-type-sign-off{border-left-color:var(--green-text);}

/* ── COA Builder ───────────────────────────────────────────── */
.coa-row td input,.coa-row td select{width:100%;border:none;background:transparent;
  font-size:12px;padding:2px 4px;color:var(--text);}
.coa-row td input:focus,.coa-row td select:focus{outline:1px solid var(--primary);border-radius:3px;}
.coa-status-draft{background:var(--bg-surface);color:var(--text-muted);border-radius:20px;padding:2px 8px;font-size:11px;}
.coa-status-final{background:var(--green-bg);color:var(--green-text);border-radius:20px;padding:2px 8px;font-size:11px;}
.coa-status-locked{background:var(--blue-bg);color:var(--blue-text);border-radius:20px;padding:2px 8px;font-size:11px;}
.pass-badge{background:var(--green-bg);color:var(--green-text);border-radius:4px;padding:1px 6px;font-size:11px;}
.fail-badge{background:var(--red-bg);color:var(--red-text);border-radius:4px;padding:1px 6px;font-size:11px;}

/* ── Fragrance Module ──────────────────────────────────────── */
.frag-family-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 10px;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;transition:border-color .15s,background .15s;
  text-align:center;gap:6px;}
.frag-family-card:hover{border-color:var(--primary);background:var(--bg-hover);}
.frag-family-icon{font-size:26px;line-height:1;}
.frag-family-name{font-size:12px;font-weight:600;color:var(--text);}
.frag-family-count{font-size:11px;background:var(--primary);color:#fff;border-radius:20px;
  padding:1px 7px;font-weight:700;}
.frag-origin-badge{border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600;}
.frag-origin-Natural{background:var(--green-bg);color:var(--green-text);}
.frag-origin-Synthetic{background:var(--blue-bg);color:var(--blue-text);}
.frag-origin-Natural-Identical,.frag-origin-Nature-Identical{background:var(--amber-bg);color:var(--amber-text);}
.frag-material-type-tag{font-size:10px;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:4px;padding:1px 5px;color:var(--text-muted);}
.frag-rating-row{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:4px;}
.frag-rating-row label{min-width:90px;color:var(--text-muted);}
.frag-component-row td{vertical-align:middle;}
.frag-component-row select,.frag-component-row input{width:100%;border:1px solid var(--border);
  border-radius:var(--radius);padding:4px 6px;font-size:12px;background:var(--bg);color:var(--text);}
.accord-status-draft{background:var(--bg-surface);color:var(--text-muted);border-radius:20px;padding:2px 8px;font-size:11px;}
.accord-status-active{background:var(--green-bg);color:var(--green-text);border-radius:20px;padding:2px 8px;font-size:11px;}
.accord-status-archived{background:var(--bg-surface);color:var(--text-hint);border-radius:20px;padding:2px 8px;font-size:11px;}
.frag-formula-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;gap:6px;}
.frag-brief-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:8px;cursor:default;}
.frag-brief-card:hover{border-color:var(--primary);}
.frag-brief-title{font-size:14px;font-weight:600;color:var(--text);}
.frag-brief-mood{font-size:12px;color:var(--text-muted);}
.frag-tag{font-size:10px;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:4px;padding:1px 5px;color:var(--text-muted);margin-right:3px;}
#eq-card-failed .eq-metric-num{color:var(--red-text);}