/* ════════════════════════════════════════════════════════════════════
   APP.HTML — EDITORIAL CLASS REDESIGN v2
   Larger typography, refined font stack, generous spacing, dignified
   active states. Loaded AFTER legacy.css so these rules win.

   Font stack
   ──────────
   - Arabic body:      Tajawal (weight 500) — wider, more legible than Plex
   - Display headings: Readex Pro (weight 600) — modern Arabic display
   - English/Latin:    Inter — industry standard for UI
   - Numbers/data:     JetBrains Mono — clean tabular monospace
   - Editorial accent: Instrument Serif italic — for hero moments
   ════════════════════════════════════════════════════════════════════ */

/* ── Body + global palette remap ──────────────────────────────────── */
body {
  background: var(--paper) !important;
  color: var(--ink-900) !important;
  font-family: 'Tajawal', 'Readex Pro', 'Inter', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  min-height: 100vh;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

:root {
  --bg:      var(--paper);
  --surface: var(--paper-2);
  --border:  var(--ink-150);
  --border2: var(--ink-200);
  --text1:   var(--ink-900);
  --text2:   var(--ink-600);
  --text3:   var(--ink-400);
  --accent:  var(--accent-500);
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --sans:    'Tajawal', 'Readex Pro', 'Inter', system-ui, sans-serif;
  --display: 'Readex Pro', 'Tajawal', sans-serif;
  --serif:   'Instrument Serif', 'Tajawal', serif;
}

[data-theme="dark"] {
  --bg:      #15161A;
  --surface: #1C1D22;
  --border:  #2A2B31;
  --border2: #3A3B42;
  --text1:   #ECECEE;
  --text2:   #A8AAB0;
  --text3:   #797C85;
}
[data-theme="dark"] body { background: #15161A !important; color: #ECECEE !important; }

/* ════════════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════════════ */
.app-topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 252, 251, .9);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border-bottom: 1px solid var(--ink-100);
  box-shadow: none;
}
[data-theme="dark"] .app-topbar {
  background: rgba(21, 22, 26, .9);
  border-bottom-color: #2A2B31;
}

.app-tb-row {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.app-tb-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  padding: 4px 6px; border-radius: 8px;
  transition: opacity .15s;
}
.app-tb-brand:hover { opacity: .75; }

.app-tb-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--ink-900);
  color: #FCFCFB;
  border-radius: 9px;
  flex-shrink: 0;
}
.app-tb-mark svg { width: 18px; height: 18px; opacity: .95; }
[data-theme="dark"] .app-tb-mark { background: var(--accent-500); color: var(--ink-950); }

.app-tb-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-tb-name {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
[data-theme="dark"] .app-tb-name { color: #ECECEE; }
.app-tb-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-400);
  margin-top: 3px;
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* Batch input */
.app-tb-batch {
  display: flex; align-items: baseline; gap: 7px;
  padding: 0;
  background: transparent;
  border: none;
}
.app-tb-batch-label {
  font-family: var(--mono);
  font-size: 10.5px; color: var(--ink-400);
  text-transform: lowercase; letter-spacing: 0.06em;
  font-weight: 500;
}
.app-tb-batch input {
  width: 56px; border: none;
  border-bottom: 1.5px solid var(--ink-200);
  background: transparent;
  font-family: var(--mono);
  font-size: 16px; font-weight: 500;
  text-align: center; color: var(--ink-900);
  outline: none;
  padding: 2px 4px;
  transition: border-color .2s;
  font-variant-numeric: tabular-nums;
}
.app-tb-batch input:focus { border-bottom-color: var(--accent-500); }
[data-theme="dark"] .app-tb-batch input { color: #ECECEE; border-bottom-color: #3A3B42; }
.app-tb-batch-unit { font-size: 11px; color: var(--ink-400); font-family: var(--mono); }

.app-tb-actions {
  display: flex; align-items: center; gap: 4px;
  margin-inline-start: auto;
}

/* Topbar buttons */
.app-tb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.app-tb-btn:hover {
  background: var(--ink-50);
  color: var(--ink-900);
}
[data-theme="dark"] .app-tb-btn { color: #A8AAB0; }
[data-theme="dark"] .app-tb-btn:hover { background: rgba(255,255,255,.04); color: #ECECEE; }
.app-tb-btn svg { opacity: .85; }

.app-tb-btn-primary {
  background: var(--ink-900);
  color: #FCFCFB;
  border-color: var(--ink-900);
  padding: 8px 16px;
  font-weight: 600;
}
.app-tb-btn-primary:hover {
  background: var(--ink-800);
  color: #FCFCFB;
}
.app-tb-btn-primary svg { opacity: 1; }
[data-theme="dark"] .app-tb-btn-primary {
  background: #ECECEE; border-color: #ECECEE; color: var(--ink-950);
}
[data-theme="dark"] .app-tb-btn-primary:hover { background: #FFFFFF; color: var(--ink-950); }

.app-tb-btn-ai {
  background: transparent;
  border-color: var(--ink-150);
  color: var(--accent-700);
}
.app-tb-btn-ai:hover {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-800);
}
[data-theme="dark"] .app-tb-btn-ai {
  background: transparent; border-color: #3A3B42; color: var(--accent-400);
}

.app-tb-btn-icon { padding: 8px; min-width: 36px; justify-content: center; }

@media (max-width: 720px) {
  .hide-sm { display: none; }
  .app-tb-row { gap: 8px; padding: 12px 14px; }
  .app-tb-actions { gap: 2px; }
  .app-tb-btn { padding: 7px 10px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT TABS — refined pills with elegant active state
   ════════════════════════════════════════════════════════════════════ */
#tb-apps.app-tb-products {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-width: 1320px; margin: 0 auto;
  padding: 6px 24px 14px;
  border-bottom: 1px solid var(--ink-100);
  border-top: none;
  grid-template-columns: none !important;
  background: transparent;
}

.tb-app {
  flex: 0 1 auto;
  min-width: 0;
  padding: 9px 16px !important;
  display: inline-flex; align-items: center; gap: 7px;
  flex-direction: row !important;
  justify-content: flex-start !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: background .18s, color .18s, transform .15s;
  font-family: var(--sans);
  color: var(--ink-600) !important;
}
.tb-app:hover {
  background: var(--ink-50) !important;
  color: var(--ink-900) !important;
}
.tb-app.active {
  background: var(--ink-900) !important;
  border-color: var(--ink-900) !important;
  color: var(--paper) !important;
  /* Remove any inherited gradient backgrounds from legacy */
  background-image: none !important;
}
[data-theme="dark"] .tb-app { color: #A8AAB0 !important; }
[data-theme="dark"] .tb-app:hover { background: rgba(255,255,255,.04) !important; color: #ECECEE !important; }
[data-theme="dark"] .tb-app.active {
  background: #ECECEE !important; border-color: #ECECEE !important; color: var(--ink-950) !important;
}

.tb-app-icon, .tb-app > div:first-child {
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  background: none !important;
}
.tb-app-label, .tb-app > div:not(:first-child), .tb-app > span {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* ════════════════════════════════════════════════════════════════════
   SUB-TABS
   ════════════════════════════════════════════════════════════════════ */
#apptabs-inner.app-tb-subtabs {
  max-width: 1320px; margin: 0 auto;
  padding: 0 24px;
  display: flex; gap: 4px;
  border-bottom: none;
  background: transparent;
}

.apptab {
  padding: 14px 6px !important;
  margin-inline-end: 24px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-500) !important;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  letter-spacing: -0.005em;
}
.apptab:hover { color: var(--ink-900) !important; }
.apptab.active {
  color: var(--ink-900) !important;
  border-bottom-color: var(--ink-900) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .apptab { color: #797C85 !important; }
[data-theme="dark"] .apptab:hover, [data-theme="dark"] .apptab.active { color: #ECECEE !important; }
[data-theme="dark"] .apptab.active { border-bottom-color: #ECECEE !important; }

/* ════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════════════════════════ */
#main {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 40px 28px 80px !important;
}

/* Sticky "order rule" / pH/AM hint banner */
[style*="background:#FFF8E6"], [style*="background: #FFF8E6"],
[style*="background:var(--warn"], [style*="background: var(--warn"] {
  border-radius: 12px !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--ink-100) !important;
  border-inline-start: 3px solid var(--accent-500) !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
  font-size: 13.5px !important;
  color: var(--ink-800) !important;
  line-height: 1.65 !important;
  font-family: var(--sans) !important;
  box-shadow: 0 1px 2px rgba(15,16,20,.03);
}
[data-theme="dark"] [style*="background:#FFF8E6"], [data-theme="dark"] [style*="background:var(--warn"] {
  background: #1C1D22 !important; border-color: #2A2B31 !important;
  color: #D8D9DD !important;
}

/* Section above the formula table: batch-type chip + reset/swap buttons */
.type-bar, [class*="batch-type"] {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap;
}

/* Quick action buttons (تغيير, إعادة تعيين) */
button[style*="background:var(--text1)"][style*="color:#fff"],
button[style*="border:1px solid var(--text1)"] {
  background: var(--ink-900) !important;
  color: #FCFCFB !important;
  border: 1px solid var(--ink-900) !important;
  padding: 8px 14px !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background .15s;
  letter-spacing: -0.005em;
}
button[style*="background:var(--text1)"][style*="color:#fff"]:hover {
  background: var(--ink-800) !important;
}

/* Trial/Production indicator */
.type-btn, .type-btn.trial, .type-btn.commercial {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-family: var(--sans) !important;
  border: 1px solid var(--ink-150) !important;
  background: var(--paper-2) !important;
  transition: all .15s !important;
  color: var(--ink-700) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.type-btn.active {
  border-color: var(--ink-900) !important;
  background: var(--ink-900) !important;
  color: var(--paper) !important;
}
.type-btn.trial.active { background: var(--ink-700) !important; border-color: var(--ink-700) !important; }

/* ════════════════════════════════════════════════════════════════════
   PHASE CARDS — large editorial feel
   ════════════════════════════════════════════════════════════════════ */
.phase-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,16,20,.02) !important;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
}
.phase-card:hover {
  border-color: var(--ink-150) !important;
  box-shadow: 0 2px 6px rgba(15,16,20,.04) !important;
}
.phase-card::before { display: none !important; }
[data-theme="dark"] .phase-card { background: #1C1D22 !important; border-color: #2A2B31 !important; }

.phase-head {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ink-100) !important;
  gap: 12px;
}
[data-theme="dark"] .phase-head { border-bottom-color: #2A2B31 !important; }

.phase-name {
  font-family: var(--display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.02em;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
[data-theme="dark"] .phase-name { color: #ECECEE !important; }

/* PHASE A/B/C tag chip (legacy may insert as separate span next to name) */
[class*="phase-tag"], .phase-head > span:first-child:not(.phase-name) {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--ink-500) !important;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  background: var(--ink-50);
  border-radius: 6px;
  border: 1px solid var(--ink-100);
  text-transform: uppercase;
}

.phase-total {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--ink-700) !important;
  padding: 6px 12px !important;
  background: var(--ink-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--ink-100) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .phase-total {
  background: rgba(255,255,255,.04) !important;
  border-color: #2A2B31 !important;
  color: #D8D9DD !important;
}

/* ════════════════════════════════════════════════════════════════════
   INGREDIENT ROWS — generous breathing room
   ════════════════════════════════════════════════════════════════════ */
.item-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 20px !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--ink-100) !important;
  align-items: center;
  transition: background .12s;
}
.item-row:hover { background: var(--ink-50) !important; }
.item-row:last-child { border-bottom: none !important; }
[data-theme="dark"] .item-row { border-bottom-color: #232429 !important; }
[data-theme="dark"] .item-row:hover { background: rgba(255,255,255,.02) !important; }

.item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Ingredient INCI name (English) — Inter at 15px */
.item-inci, .item-info > div:first-child[style*="font-size"] {
  font-family: 'Inter', var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--ink-800) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.4 !important;
}
[data-theme="dark"] .item-inci { color: #D8D9DD !important; }

/* Arabic translation — Tajawal at 14px */
.item-arabic, .item-info > div:nth-child(2) {
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
[data-theme="dark"] .item-arabic { color: #ECECEE !important; }

/* Role / sub-description below name */
.item-info > div:nth-child(3), .item-info > div:last-child {
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  color: var(--ink-500) !important;
  font-weight: 400 !important;
  line-height: 1.55;
  margin-top: 2px;
}
[data-theme="dark"] .item-info > div:nth-child(3) { color: #9A9DA5 !important; }

/* Numbers — large mono, tabular */
.item-pct, .item-grams {
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-800) !important;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .item-pct, [data-theme="dark"] .item-grams { color: #ECECEE !important; }

/* The legacy dark-pill percentage (e.g. "0.1") */
[style*="background:var(--text1)"][style*="color:#fff"]:not(button) {
  background: var(--ink-100) !important;
  color: var(--ink-900) !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--ink-150);
  font-variant-numeric: tabular-nums;
}

/* Grams chip — quiet, no green */
[style*="background:#F0F8F0"], [style*="background: #F0F8F0"],
[style*="background:var(--ok-bg)"], [style*="background: var(--ok-bg)"] {
  background: transparent !important;
  border: 1px solid var(--ink-150) !important;
  color: var(--ink-700) !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] [style*="background:var(--ok-bg)"] {
  border-color: #3A3B42 !important; color: #ECECEE !important;
}

/* "g" unit label after grams */
.item-row sub, [style*="font-size:9px"] {
  font-size: 10px !important;
  color: var(--ink-400) !important;
  font-family: var(--mono) !important;
  margin-inline-start: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   TOGGLE SWITCHES
   ════════════════════════════════════════════════════════════════════ */
.item-toggle, .item-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 36px; height: 20px;
  background: var(--ink-200);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  border: none;
  flex-shrink: 0;
}
.item-toggle::after, .item-row input[type="checkbox"]::after {
  content: ''; position: absolute;
  top: 2px; inset-inline-start: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(15,16,20,.12);
}
[dir="rtl"] .item-toggle.on::after,
[dir="rtl"] .item-row input[type="checkbox"]:checked::after {
  transform: translateX(-16px);
}
.item-toggle.on, .item-row input[type="checkbox"]:checked {
  background: var(--ink-900);
}
[data-theme="dark"] .item-toggle.on, [data-theme="dark"] .item-row input[type="checkbox"]:checked {
  background: var(--accent-500);
}

/* ════════════════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════════════════ */
.item-row input[type="text"], .pct-input, .cost-input, .inv-amount {
  font-family: var(--mono) !important;
  padding: 9px 12px !important;
  border: 1px solid var(--ink-150) !important;
  border-radius: 9px !important;
  background: var(--paper-2) !important;
  color: var(--ink-900) !important;
  font-size: 14px !important;
  width: 78px !important;
  text-align: center !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.item-row input[type="text"]:focus, .pct-input:focus, .cost-input:focus, .inv-amount:focus {
  border-color: var(--accent-500) !important;
  box-shadow: 0 0 0 3px rgba(167,135,88,.12) !important;
}
[data-theme="dark"] .item-row input[type="text"],
[data-theme="dark"] .pct-input,
[data-theme="dark"] .cost-input,
[data-theme="dark"] .inv-amount {
  background: rgba(255,255,255,.03) !important;
  border-color: #3A3B42 !important;
  color: #ECECEE !important;
}

/* ════════════════════════════════════════════════════════════════════
   "لماذا؟" / "بدائل" expander buttons
   ════════════════════════════════════════════════════════════════════ */
button[onclick*="toggleWhy"], button[class*="why-btn"],
.item-row button[style*="font-family:var(--mono)"] {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 1px solid var(--ink-150) !important;
  color: var(--ink-600) !important;
  border-radius: 7px !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
button[onclick*="toggleWhy"]:hover, .item-row button[style*="font-family:var(--mono)"]:hover {
  background: var(--ink-50) !important;
  color: var(--ink-900) !important;
  border-color: var(--ink-200) !important;
}

/* CORE/OPT badges */
[style*="background:#F0F4FF"], [style*="background: #F0F4FF"],
[style*="background:var(--core-bg)"], [style*="background: var(--core-bg)"] {
  background: var(--ink-100) !important;
  color: var(--ink-800) !important;
  border: 1px solid var(--ink-150) !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}
[style*="background:#F8F8F4"], [style*="background: #F8F8F4"],
[style*="background:var(--opt-bg)"], [style*="background: var(--opt-bg)"] {
  background: transparent !important;
  color: var(--ink-500) !important;
  border: 1px solid var(--ink-150) !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* ════════════════════════════════════════════════════════════════════
   WHY PANEL — when expanded
   ════════════════════════════════════════════════════════════════════ */
.why-panel {
  padding: 20px 24px !important;
  background: var(--ink-50) !important;
  border-top: 1px solid var(--ink-100) !important;
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  color: var(--ink-700) !important;
  font-family: var(--sans) !important;
}
.why-panel strong, .why-panel b {
  color: var(--ink-900) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .why-panel {
  background: rgba(255,255,255,.02) !important;
  border-top-color: #2A2B31 !important;
  color: #BCBEC4 !important;
}

/* ════════════════════════════════════════════════════════════════════
   SUMMARY CARDS (cost tab)
   ════════════════════════════════════════════════════════════════════ */
.summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px;
}
.summary-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  box-shadow: none !important;
}
.summary-card.highlight {
  background: var(--paper-2) !important;
  border-color: var(--accent-300) !important;
}
[data-theme="dark"] .summary-card { background: #1C1D22 !important; border-color: #2A2B31 !important; }

.sc-label {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  color: var(--ink-400) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px !important;
  font-weight: 500;
}
.sc-val {
  font-family: var(--display) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
[data-theme="dark"] .sc-val { color: #ECECEE !important; }
.sc-sub {
  font-size: 12px !important;
  color: var(--ink-500) !important;
  margin-top: 8px !important;
  font-family: var(--mono) !important;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-family: var(--sans); }
table thead th {
  background: transparent !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-400) !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--ink-100) !important;
  text-align: start;
}
[data-theme="dark"] table thead th {
  color: #797C85 !important;
  border-bottom-color: #2A2B31 !important;
}
table tbody td {
  font-size: 13.5px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-50);
  font-family: var(--sans);
}
table tbody tr:last-child td { border-bottom: none; }
[data-theme="dark"] table tbody td { border-bottom-color: #232429 !important; }

/* ════════════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════════════ */
#save-overlay, #inv-overlay, #ai-overlay {
  background: rgba(15, 16, 20, .55) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
#save-panel, #inv-panel, #ai-panel {
  background: var(--paper-2) !important;
  border-radius: 18px !important;
  border: 1px solid var(--ink-100) !important;
  box-shadow: 0 32px 80px rgba(15,16,20,.18), 0 8px 24px rgba(15,16,20,.08) !important;
}
[data-theme="dark"] #save-panel, [data-theme="dark"] #inv-panel, [data-theme="dark"] #ai-panel {
  background: #1C1D22 !important; border-color: #2A2B31 !important;
}

/* Dead start-screen */
#start-screen { display: none !important; }

/* Modal inputs */
.save-name-input, #save-panel input[type="text"], #inv-panel input[type="text"] {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--ink-150) !important;
  border-radius: 10px !important;
  background: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  outline: none !important;
  color: var(--ink-900) !important;
}
.save-name-input:focus, #save-panel input[type="text"]:focus {
  border-color: var(--accent-500) !important;
  box-shadow: 0 0 0 3px rgba(167,135,88,.12) !important;
}

/* ════════════════════════════════════════════════════════════════════
   HEADINGS
   ════════════════════════════════════════════════════════════════════ */
.display, h1, h2, h3 {
  font-family: var(--display) !important;
  letter-spacing: -0.02em;
  font-weight: 600;
}
h1 { font-size: 28px !important; line-height: 1.2; }
h2 { font-size: 22px !important; line-height: 1.25; }
h3 { font-size: 18px !important; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════════
   COMPATIBILITY WARNINGS
   ════════════════════════════════════════════════════════════════════ */
.compat-warn, .compat-error, .compat-info {
  border-radius: 12px !important;
  border-inline-start: 3px solid !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.65;
  font-family: var(--sans);
}
.compat-warn {
  background: var(--warn-bg, #FBF3DC) !important;
  border-color: var(--warn-bd, #E5C879) !important;
  border-inline-start-color: var(--warn-solid, #B8881C) !important;
  color: var(--warn-tx, #6E521A) !important;
}
.compat-error {
  background: var(--err-bg, #F8E8E4) !important;
  border-color: var(--err-bd, #E3B5A8) !important;
  border-inline-start-color: var(--err-solid, #A8341E) !important;
  color: var(--err-tx, #7B2A19) !important;
}
.compat-info {
  background: var(--paper-2) !important;
  border-color: var(--ink-100) !important;
  border-inline-start-color: var(--accent-500) !important;
  color: var(--ink-800) !important;
}

/* ════════════════════════════════════════════════════════════════════
   MISC POLISH
   ════════════════════════════════════════════════════════════════════ */
button.log-btn, button.start-go-btn, button.sri-load,
.currency-btn, .ic-add, .opt-add, .alt-btn {
  font-family: var(--sans) !important;
  border-radius: 9px !important;
  font-weight: 500 !important;
  transition: background .15s, border-color .15s;
}

button.sri-load {
  background: var(--ink-900) !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border: none !important;
  font-size: 12.5px !important;
}

.currency-btn.active {
  background: var(--ink-900) !important;
  color: #fff !important;
  border-color: var(--ink-900) !important;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 100px 32px;
  color: var(--ink-500);
  font-family: var(--sans);
  font-size: 15px;
}
.empty-state svg { opacity: .35; margin-bottom: 22px; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A2B31; border-color: #15161A; }

/* Selection */
::selection { background: var(--accent-200); color: var(--ink-950); }
[data-theme="dark"] ::selection { background: var(--accent-700); color: #FCFCFB; }

/* Make sure links don't get underlines we didn't ask for */
a { text-decoration: none; }

/* Phase A/B/C/etc legacy badge in phase head — kill garish backgrounds */
.phase-head span[style*="background"],
.phase-head [style*="border-radius"] {
  background: var(--ink-50) !important;
  color: var(--ink-700) !important;
  border: 1px solid var(--ink-100) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* Active app tab — kill any inherited rainbow gradients */
.tb-app.active *, .tb-app.active::before, .tb-app.active::after {
  background-image: none !important;
  background: transparent !important;
}
.tb-app.active {
  background: var(--ink-900) !important;
}
.tb-app.active span, .tb-app.active div {
  color: var(--paper) !important;
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   FORMULA TABLE — TARGETED OVERHAUL (v4)
   The legacy renderer outputs .phase-block > .phase-head + <table>
   with <tr.core-row|opt-row|opt-off>. These rules convert that
   table-based layout into a clean grid-card design without touching JS.
   ════════════════════════════════════════════════════════════════════ */

/* ── Phase card shell ───────────────────────────────────────────────── */
.phase-block {
  background: var(--paper-2) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15,16,20,.02) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.phase-block:hover {
  border-color: var(--ink-150) !important;
  box-shadow: 0 2px 8px rgba(15,16,20,.04) !important;
}
[data-theme="dark"] .phase-block {
  background: #1C1D22 !important;
  border-color: #2A2B31 !important;
}

/* Phase header */
.phase-block > .phase-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ink-100) !important;
  gap: 12px;
}
[data-theme="dark"] .phase-block > .phase-head {
  border-bottom-color: #2A2B31 !important;
}
.phase-block > .phase-head > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.phase-block > .phase-head > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.phase-label {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--ink-500) !important;
  background: var(--ink-50) !important;
  border: 1px solid var(--ink-100) !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.phase-name {
  font-family: var(--display) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}
[data-theme="dark"] .phase-name { color: #ECECEE !important; }
.phase-total {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-700) !important;
  background: var(--ink-50) !important;
  border: 1px solid var(--ink-100) !important;
  padding: 5px 11px !important;
  border-radius: 8px !important;
  font-variant-numeric: tabular-nums !important;
}
[data-theme="dark"] .phase-total {
  background: rgba(255,255,255,.04) !important;
  border-color: #2A2B31 !important;
  color: #D8D9DD !important;
}

/* ── Drop the table's default chrome ────────────────────────────────── */
.phase-block table { border-collapse: separate !important; border-spacing: 0 !important; }
.phase-block thead { display: none !important; } /* the headers waste vertical space; we make the layout self-explanatory */
.phase-block tbody { display: block !important; }

/* ── Rows: convert <tr> into a 3-col grid card ──────────────────────── */
.phase-block tbody tr {
  display: grid !important;
  grid-template-columns: 44px 1fr minmax(170px, auto) !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--ink-100) !important;
  background: transparent !important;
  transition: background .12s !important;
}
.phase-block tbody tr:last-child { border-bottom: none !important; }
.phase-block tbody tr:hover { background: var(--ink-50) !important; }
[data-theme="dark"] .phase-block tbody tr { border-bottom-color: #232429 !important; }
[data-theme="dark"] .phase-block tbody tr:hover { background: rgba(255,255,255,.02) !important; }

/* core rows: subtle accent stripe on the inline-start edge */
.phase-block tbody tr.core-row {
  background: transparent !important;
  position: relative !important;
}
.phase-block tbody tr.core-row::before {
  content: '' !important;
  position: absolute !important;
  inset-block: 14px !important;
  inset-inline-start: 0 !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--accent-500) !important;
}
.phase-block tbody tr.opt-row { background: transparent !important; }

/* ── Disabled state — clean visual instead of opacity 0.4 ──────────── */
.phase-block tbody tr.opt-off {
  opacity: 1 !important;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 8px,
    color-mix(in srgb, var(--ink-100) 40%, transparent) 8px,
    color-mix(in srgb, var(--ink-100) 40%, transparent) 10px
  ) !important;
}
.phase-block tbody tr.opt-off .ing-inci,
.phase-block tbody tr.opt-off .ing-arabic { color: var(--ink-500) !important; }
.phase-block tbody tr.opt-off .ing-role,
.phase-block tbody tr.opt-off .why-btn,
.phase-block tbody tr.opt-off .alts-btn,
.phase-block tbody tr.opt-off .badge { opacity: .65 !important; }
.phase-block tbody tr.opt-off .pct-input { opacity: .55 !important; }
.phase-block tbody tr.opt-off .gram-badge {
  background: transparent !important;
  color: var(--ink-400) !important;
  border-style: dashed !important;
}
[data-theme="dark"] .phase-block tbody tr.opt-off {
  background: repeating-linear-gradient(
    -45deg, transparent 0 8px,
    rgba(255,255,255,.03) 8px 10px
  ) !important;
}

/* ── TD reset (we use grid order on the row) ───────────────────────── */
.phase-block tbody tr td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: top !important;
}
/* Column 1: toggle / dash */
.phase-block tbody tr td.toggle-cell {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 2px !important;
  min-height: 36px;
}
/* Column 2: ingredient info (name + badges + why/alts) */
.phase-block tbody tr td:nth-child(2) {
  grid-column: 2 !important;
  min-width: 0 !important;
}
/* Column 3: % input + grams (stacked vertically on narrow, inline on wide) */
.phase-block tbody tr td:nth-child(3) {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-top: 2px !important;
}
.phase-block tbody tr td:nth-child(4) {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-top: 6px !important;
}
/* On wide layouts, % and grams sit side-by-side on the same grid cell */
@media (min-width: 720px) {
  .phase-block tbody tr {
    grid-template-columns: 44px 1fr auto auto !important;
  }
  .phase-block tbody tr td:nth-child(4) {
    grid-column: 4 !important;
    margin-top: 0 !important;
    margin-inline-start: 10px !important;
  }
}

/* ── Ingredient info column — typography hierarchy ─────────────────── */
.ing-inci {
  font-family: 'Inter', var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.4 !important;
}
[data-theme="dark"] .ing-inci { color: #ECECEE !important; }
.ing-arabic {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-700) !important;
  line-height: 1.5 !important;
  margin-top: 2px !important;
}
[data-theme="dark"] .ing-arabic { color: #BCBEC4 !important; }
.ing-role {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: var(--ink-500) !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}
[data-theme="dark"] .ing-role { color: #9A9DA5 !important; }

/* Badge row spacing */
.phase-block tbody tr td:nth-child(2) > div[style*="display:flex"][style*="gap"] {
  margin-top: 10px !important;
  align-items: center !important;
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.badge-core {
  background: color-mix(in srgb, var(--accent-100) 50%, transparent) !important;
  color: var(--accent-800) !important;
  border: 1px solid var(--accent-200) !important;
}
.badge-opt {
  background: var(--ink-50) !important;
  color: var(--ink-600) !important;
  border: 1px solid var(--ink-150) !important;
}
.badge-qs {
  background: #FBF3DC !important;
  color: #6E521A !important;
  border: 1px solid #E5C879 !important;
}
.badge-am {
  background: #FFF8F0 !important;
  color: #7A3500 !important;
  border: 1px solid #D4A078 !important;
  font-size: 10px !important;
}

/* ── Why / Alts expander buttons ───────────────────────────────────── */
.why-btn, .alts-btn {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ink-600) !important;
  border: 1px solid var(--ink-150) !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  letter-spacing: 0.02em;
  margin: 0 !important;
}
.why-btn:hover, .alts-btn:hover {
  background: var(--ink-50) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-900) !important;
}

/* ── Why panel (collapsible inner card) ───────────────────────────── */
.why-inner {
  margin-top: 12px !important;
  background: var(--ink-50) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--ink-700) !important;
}
[data-theme="dark"] .why-inner {
  background: rgba(255,255,255,.03) !important;
  border-color: #2A2B31 !important;
  color: #D8D9DD !important;
}
.why-note {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--ink-150) !important;
  color: var(--ink-600) !important;
  font-style: normal !important;
  font-size: 12px !important;
}
[data-theme="dark"] .why-note {
  border-top-color: #2A2B31 !important;
  color: #BCBEC4 !important;
}

/* ── Alts panel ────────────────────────────────────────────────────── */
.alts-panel {
  margin-top: 10px !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.alt-row {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--ink-100) !important;
  background: var(--paper) !important;
}
.alt-row:last-child { border-bottom: none !important; }
.alt-name {
  font-family: 'Inter', var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
}
.alt-ar {
  font-size: 12px !important;
  color: var(--ink-700) !important;
  margin-top: 2px !important;
}
.alt-why {
  font-size: 11.5px !important;
  color: var(--ink-500) !important;
  margin-top: 4px !important;
  line-height: 1.55 !important;
}

/* ── Toggle (legacy .toggle class) — larger and clearer ─────────────── */
.toggle {
  width: 36px !important;
  height: 20px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background .2s !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.toggle.on  { background: var(--ink-900) !important; }
.toggle.off { background: var(--ink-200) !important; }
[data-theme="dark"] .toggle.on  { background: var(--accent-500) !important; }
[data-theme="dark"] .toggle.off { background: #3A3B42 !important; }
.toggle-knob {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #fff !important;
  position: absolute !important;
  top: 2px !important;
  transition: inset-inline-start .2s !important;
  box-shadow: 0 1px 3px rgba(15,16,20,.18) !important;
}
.toggle.on  .toggle-knob { inset-inline-start: 18px !important; left: auto !important; }
.toggle.off .toggle-knob { inset-inline-start:  2px !important; left: auto !important; }

/* ── % input and gram badge ──────────────────────────────────────── */
.pg-cell {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}
.pct-input {
  width: 72px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--ink-150) !important;
  border-radius: 9px !important;
  background: var(--paper-2) !important;
  color: var(--ink-900) !important;
  font-family: var(--mono) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  font-variant-numeric: tabular-nums !important;
}
.pct-input:focus {
  border-color: var(--accent-500) !important;
  box-shadow: 0 0 0 3px rgba(167,135,88,.14) !important;
}
.pct-input:disabled {
  background: var(--ink-50) !important;
  color: var(--ink-400) !important;
  border-color: var(--ink-100) !important;
}
[data-theme="dark"] .pct-input {
  background: rgba(255,255,255,.03) !important;
  border-color: #3A3B42 !important;
  color: #ECECEE !important;
}
.pct-display {
  font-family: var(--mono) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  background: var(--accent-50) !important;
  border: 1px solid var(--accent-200) !important;
  padding: 7px 12px !important;
  border-radius: 9px !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 64px !important;
  text-align: center !important;
}
[data-theme="dark"] .pct-display {
  background: rgba(167,135,88,.12) !important;
  border-color: rgba(167,135,88,.3) !important;
  color: #F0E7D5 !important;
}
.pct-unit {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--ink-500) !important;
  font-weight: 500 !important;
}
.gram-badge {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 11px !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 1px solid var(--ink-150) !important;
  color: var(--ink-600) !important;
  text-align: center !important;
  min-width: 78px !important;
  font-variant-numeric: tabular-nums !important;
}
.gram-badge.active {
  background: var(--ink-50) !important;
  border-color: var(--ink-200) !important;
  color: var(--ink-900) !important;
}
[data-theme="dark"] .gram-badge {
  border-color: #3A3B42 !important;
  color: #BCBEC4 !important;
}
[data-theme="dark"] .gram-badge.active {
  background: rgba(255,255,255,.04) !important;
  color: #ECECEE !important;
}

/* The "—" placeholder when the row is core (no toggle) — quieter */
.toggle-cell > span[style*="text3"] {
  color: var(--ink-300) !important;
  font-size: 14px !important;
  font-family: var(--mono) !important;
  font-weight: 400 !important;
}

/* ── Optional rows when collapsed ("Premium" sections all-off) ───── */
.phase-block:has(tbody tr.opt-off:only-child) {
  opacity: .85;
}
.phase-block > .phase-head:has(+ table tbody tr.opt-off:only-child) .phase-total {
  background: transparent !important;
  color: var(--ink-400) !important;
  border-style: dashed !important;
}

/* ── Summary cards (bottom of formula tab) ──────────────────────── */
.summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 22px !important;
}
.summary-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 2px rgba(15,16,20,.02) !important;
}
.summary-card.highlight {
  background: var(--ink-900) !important;
  border-color: var(--ink-900) !important;
}
.sc-label {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--ink-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}
.sc-val {
  font-family: 'Instrument Serif', var(--display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
.sc-sub {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--ink-500) !important;
  margin-top: 4px !important;
}
.summary-card.highlight .sc-label { color: rgba(255,255,255,.55) !important; }
.summary-card.highlight .sc-val { color: #FAF8F2 !important; }
.summary-card.highlight .sc-sub { color: rgba(255,255,255,.5) !important; }
[data-theme="dark"] .summary-card {
  background: #1C1D22 !important;
  border-color: #2A2B31 !important;
}
[data-theme="dark"] .sc-val { color: #ECECEE !important; }

/* ── Warning bar styling cleanup ────────────────────────────────────── */
.warnbar {
  background: linear-gradient(0deg, #FBF3DC, #FEFCF6) !important;
  border: 1px solid #E5C879 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
  font-size: 12.5px !important;
  color: #6E521A !important;
  line-height: 1.6 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.warnbar::before {
  content: '⚠️';
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  padding-top: 1px;
}
[data-theme="dark"] .warnbar {
  background: rgba(229,200,121,.08) !important;
  border-color: rgba(229,200,121,.3) !important;
  color: #E5C879 !important;
}

/* ── Mobile / narrow layout ────────────────────────────────────────── */
@media (max-width: 600px) {
  .phase-block > .phase-head { padding: 12px 16px !important; }
  .phase-block tbody tr { padding: 12px 16px !important; gap: 12px !important; grid-template-columns: 36px 1fr !important; }
  .phase-block tbody tr td:nth-child(3),
  .phase-block tbody tr td:nth-child(4) {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    margin-top: 8px !important;
  }
  .ing-inci { font-size: 13px !important; }
  .ing-arabic { font-size: 12.5px !important; }
  .ing-role { font-size: 11.5px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   FORMULA PAGE — EDITORIAL HEAD (matches index.html aesthetic)
   .fp-pagehead is rendered at the top of the formula tab by legacy.js.
   Goal: clear product title, soft context chips, no clutter.
   ════════════════════════════════════════════════════════════════════ */
.fp-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--ink-100);
}
[data-theme="dark"] .fp-pagehead { border-bottom-color: #2A2B31; }

.fp-pagehead-left { flex: 1 1 320px; min-width: 0; }
.fp-pagehead-right {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}

.fp-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
[data-theme="dark"] .fp-eyebrow { color: #9A9DA5; }

.fp-title {
  font-family: 'Instrument Serif', var(--display), serif;
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink-950);
  margin: 0 0 8px;
}
[data-theme="dark"] .fp-title { color: #ECECEE; }

.fp-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
  max-width: 60ch;
}
[data-theme="dark"] .fp-sub { color: #BCBEC4; }

/* Context chips (batch type + size) */
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--ink-150);
  border-radius: 100px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-700);
  font-weight: 500;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .fp-chip {
  background: rgba(255,255,255,.03);
  border-color: #3A3B42;
  color: #D8D9DD;
}

.fp-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-400);
  flex-shrink: 0;
}
.fp-chip-trial .fp-chip-dot {
  background: #B8881C;
  box-shadow: 0 0 0 3px rgba(184,136,28,0.18);
}
.fp-chip-commercial .fp-chip-dot {
  background: #58843F;
  box-shadow: 0 0 0 3px rgba(88,132,63,0.18);
}

.fp-chip-size .fp-chip-label {
  font-size: 10px;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fp-chip-size .fp-chip-val {
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .fp-chip-size .fp-chip-val { color: #ECECEE; }

/* Action buttons (تغيير / إعادة تعيين) */
.fp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--ink-150);
  border-radius: 100px;
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  letter-spacing: -0.005em;
}
.fp-action-btn:hover {
  background: var(--ink-50);
  border-color: var(--ink-200);
  color: var(--ink-900);
}
.fp-action-arrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-400);
  line-height: 1;
  margin-inline-end: 2px;
}
.fp-action-btn:hover .fp-action-arrow { color: var(--ink-700); }

.fp-action-reset {
  border-color: var(--accent-200);
  color: var(--accent-700);
  background: var(--accent-50);
}
.fp-action-reset:hover {
  background: var(--accent-100);
  border-color: var(--accent-300);
  color: var(--accent-800);
}
.fp-action-reset .fp-action-arrow { color: var(--accent-500); }
[data-theme="dark"] .fp-action-btn {
  background: rgba(255,255,255,.03);
  border-color: #3A3B42;
  color: #BCBEC4;
}
[data-theme="dark"] .fp-action-btn:hover {
  background: rgba(255,255,255,.06);
  color: #ECECEE;
}
[data-theme="dark"] .fp-action-reset {
  background: rgba(167,135,88,.08);
  border-color: rgba(167,135,88,.3);
  color: var(--accent-400);
}

@media (max-width: 600px) {
  .fp-pagehead { padding: 4px 0 18px; margin-bottom: 18px; gap: 16px; }
  .fp-eyebrow { font-size: 10px; margin-bottom: 8px; }
  .fp-title { font-size: 30px; }
  .fp-sub { font-size: 13px; }
  .fp-pagehead-right { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   LIVE COST BANNER — sits above the phase cards on formula tab
   ════════════════════════════════════════════════════════════════════ */
.live-cost-banner {
  background: var(--paper-2, #fff);
  border: 1px solid var(--ink-100, #EEEFF1);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15, 16, 20, 0.03);
}
.live-cost-banner[data-coverage="complete"] {
  border-color: rgba(185, 208, 174, 0.6);
  background: linear-gradient(180deg, rgba(238, 244, 236, 0.55), var(--paper-2, #fff));
}
.live-cost-banner[data-coverage="partial"] {
  border-color: rgba(229, 200, 121, 0.6);
  background: linear-gradient(180deg, rgba(251, 243, 220, 0.55), var(--paper-2, #fff));
}
.live-cost-banner[data-coverage="none"] {
  border-color: rgba(227, 181, 168, 0.55);
  background: linear-gradient(180deg, rgba(248, 232, 228, 0.5), var(--paper-2, #fff));
}
[data-theme="dark"] .live-cost-banner {
  background: #1C1D22;
  border-color: #2A2B31;
}
[data-theme="dark"] .live-cost-banner[data-coverage="complete"] { background: linear-gradient(180deg, rgba(88, 132, 63, 0.1), #1C1D22); }
[data-theme="dark"] .live-cost-banner[data-coverage="partial"] { background: linear-gradient(180deg, rgba(229, 200, 121, 0.08), #1C1D22); }
[data-theme="dark"] .live-cost-banner[data-coverage="none"] { background: linear-gradient(180deg, rgba(168, 52, 30, 0.08), #1C1D22); }

.lcb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.lcb-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700, #44464E);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="dark"] .lcb-label { color: #ECECEE; }

.lcb-cov {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.02em;
}
.lcb-cov-complete {
  background: #EEF4EC;
  color: #3B5C2C;
  border: 1px solid #B9D0AE;
}
.lcb-cov-partial {
  background: #FBF3DC;
  color: #6E521A;
  border: 1px solid #E5C879;
}
.lcb-cov-none {
  background: #F8E8E4;
  color: #7B2A19;
  border: 1px solid #E3B5A8;
}
[data-theme="dark"] .lcb-cov-complete { background: rgba(88, 132, 63, 0.12); color: #B9D0AE; }
[data-theme="dark"] .lcb-cov-partial { background: rgba(229, 200, 121, 0.12); color: #E5C879; }
[data-theme="dark"] .lcb-cov-none { background: rgba(168, 52, 30, 0.12); color: #E3B5A8; }

.lcb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-100, #EEEFF1);
  border-radius: 10px;
  overflow: hidden;
}
[data-theme="dark"] .lcb-stats { background: #2A2B31; }
.lcb-stat {
  background: var(--paper-2, #fff);
  padding: 12px 14px;
}
[data-theme="dark"] .lcb-stat { background: #1C1D22; }
.lcb-stat-hl {
  background: linear-gradient(135deg, #FBF6E9, var(--paper-2, #fff));
}
[data-theme="dark"] .lcb-stat-hl { background: linear-gradient(135deg, rgba(167, 135, 88, 0.15), #1C1D22); }
.lcb-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-500, #797C85);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.lcb-stat-val {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink-950, #0F1014);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lcb-stat-val span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-400, #9A9DA5);
  font-weight: 500;
  margin-inline-start: 4px;
}
[data-theme="dark"] .lcb-stat-val { color: #ECECEE; }

@media (max-width: 720px) {
  .lcb-stats { grid-template-columns: 1fr 1fr; }
  .lcb-stat-val { font-size: 20px; }
}
@media (max-width: 480px) {
  .lcb-stats { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   INFO NOTE — sequence/order reminder above the phases
   ════════════════════════════════════════════════════════════════════ */
.info-note {
  background: var(--paper-2) !important;
  border: 1px solid var(--ink-100) !important;
  border-inline-start: 3px solid var(--accent-500) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  font-size: 13px !important;
  color: var(--ink-700) !important;
  line-height: 1.75 !important;
  font-family: var(--sans) !important;
  box-shadow: 0 1px 2px rgba(15,16,20,.02);
}
.info-note strong {
  color: var(--ink-950) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .info-note {
  background: #1C1D22 !important;
  border-color: #2A2B31 !important;
  border-inline-start-color: var(--accent-500) !important;
  color: #D8D9DD !important;
}
[data-theme="dark"] .info-note strong { color: #ECECEE !important; }

/* ════════════════════════════════════════════════════════════════════
   SUB-TABS — tighter, more elegant
   ════════════════════════════════════════════════════════════════════ */
#apptabs-inner.app-tb-subtabs {
  border-top: 1px solid var(--ink-100) !important;
  padding: 0 24px !important;
}
[data-theme="dark"] #apptabs-inner.app-tb-subtabs { border-top-color: #2A2B31 !important; }

.apptab {
  padding: 13px 4px !important;
  margin-inline-end: 20px !important;
  font-size: 13.5px !important;
  letter-spacing: -0.005em !important;
  position: relative;
}
.apptab.active {
  border-bottom-color: var(--accent-500) !important;
}
[data-theme="dark"] .apptab.active { border-bottom-color: var(--accent-500) !important; }

/* ════════════════════════════════════════════════════════════════════
   PRODUCT TABS — final refinement: smaller icons, tighter padding,
   editorial active state with accent-bordered card
   ════════════════════════════════════════════════════════════════════ */
#tb-apps.app-tb-products {
  padding: 4px 24px 14px !important;
  gap: 6px !important;
}

.tb-app {
  padding: 8px 14px !important;
  gap: 8px !important;
}
.tb-app > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-direction: row !important;
}
.tb-app-icon {
  font-size: 15px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
}
.tb-app-name {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.tb-app-sub {
  display: none !important; /* drop sub-labels to declutter */
}

/* ════════════════════════════════════════════════════════════════════
   TOPBAR — additional refinement (less density, more breathing)
   ════════════════════════════════════════════════════════════════════ */
.app-tb-row {
  padding: 14px 24px !important;
  gap: 14px !important;
}

/* Make non-primary action buttons icon-leaning (text shows on wide only) */
@media (min-width: 1080px) {
  .app-tb-btn { padding: 8px 14px !important; }
}
@media (max-width: 1079px) {
  .app-tb-btn:not(.app-tb-btn-primary) .hide-sm { display: none !important; }
  .app-tb-btn:not(.app-tb-btn-primary) { padding: 8px !important; min-width: 36px; justify-content: center; }
}

/* AI button → soft champagne, matches index.html aesthetic */
.app-tb-btn-ai {
  background: linear-gradient(135deg, #FBF6E9, var(--paper-2)) !important;
  border: 1px solid #E8D292 !important;
  color: #5C4622 !important;
}
.app-tb-btn-ai:hover {
  background: linear-gradient(135deg, #F4E8C4, #FBF6E9) !important;
  color: #3D2F17 !important;
}
[data-theme="dark"] .app-tb-btn-ai {
  background: linear-gradient(135deg, rgba(167,135,88,0.12), transparent) !important;
  border-color: rgba(167,135,88,0.3) !important;
  color: var(--accent-300) !important;
}

/* ════════════════════════════════════════════════════════════════════
   MAIN CONTENT — generous editorial spacing
   ════════════════════════════════════════════════════════════════════ */
#main {
  padding: 32px 28px 96px !important;
}

@media (max-width: 720px) {
  #main { padding: 22px 16px 64px !important; }
}