/* ================================================================
   LABELYOG — design system v3 "Professional"
   One coherent system: disciplined type scale, refined bottle-green
   identity, flat confident components, calm surfaces. The KLD and
   FDA panel remain strict regulatory black-on-white documents.
   ================================================================ */
:root {
  /* surfaces */
  --bg:         #F6F7F5;
  --surface:    #FFFFFF;
  --sunken:     #FAFBF9;
  /* aliases (V5.19.24): these tokens were referenced by card/wizard CSS but
     never defined -- elements silently fell back to transparent. Mapped onto
     the existing palette. */
  --paper:      #FFFFFF;
  --surface-2:  #FAFBF9;
  --ink2:       #3D4A44;
  --mut:        #67736C;
  --gsoft:      #E7F4EC;
  --gline:      #E7F4EC;
  --ghov:       #0D7A4A;
  /* ink scale */
  --ink:        #182320;
  --ink-2:      #3D4A44;
  --muted:      #67736C;
  --faint:      #98A29B;
  /* lines */
  --line:       #E4E8E3;
  --line-2:     #D4DAD3;
  /* brand */
  --green:      #12925A;
  --green-hov:  #0D7A4A;
  --green-down: #0A6A40;
  --green-soft: #E7F4EC;
  --green-line: #BFE0CD;
  --lime:       #6FDD9B;
  /* signals */
  --amber:      #DD9A20;
  --amber-soft: #FBF3E0;
  --red:        #CC3A2F;
  --red-soft:   #FBEDEB;
  /* geometry */
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 8px;
  --shadow-xs: 0 1px 2px rgba(20, 30, 25, .05);
  --shadow-sm: 0 1px 2px rgba(20, 30, 25, .04), 0 3px 10px rgba(20, 30, 25, .05);
  --shadow-md: 0 2px 4px rgba(20, 30, 25, .04), 0 10px 28px rgba(20, 30, 25, .09);
  --font: "Inter", "SF Pro Text", "Segoe UI", Ubuntu, Cantarell,
          "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hov); }
a:focus-visible, button:focus-visible, .button-link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(18, 146, 90, .35); outline-offset: 2px;
}

/* ---------------------------------------------------------------- type */
.masthead    { font-size: 26px; font-weight: 700; letter-spacing: -0.45px; line-height: 1.2; margin: 0; }
.masthead-sm { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; margin: 0; }
.panel-sub   { color: var(--muted); margin: 5px 0 2px; font-size: 14px; }
.hint        { font-weight: 500; color: var(--muted); font-size: 12.5px; }

/* section accents: hairline with a short green cap — quiet, branded */
.rule-thick {
  height: 1px; background: var(--line-2); margin: 18px 0 24px; position: relative;
}
.rule-thick::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 44px; height: 3px; border-radius: 3px; background: var(--green);
}
.rule-thin { height: 1px; background: var(--line); margin: 20px 0; }

/* ================================================================
   ADMIN SHELL — bottle-green command rail, paper workspace
   ================================================================ */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 14px 16px;
  background: linear-gradient(180deg, #0C1912 0%, #0E1F15 60%, #0B1710 100%);
  color: #B7C4BA;
}
.side-brand { display: flex; align-items: center; gap: 11px; color: #fff; padding: 2px 8px 6px; }
.side-brand:hover { color: #fff; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--green), var(--green-down));
  color: #fff; font-weight: 800; font-size: 14px; flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.side-brand-name { font-weight: 700; font-size: 14.5px; line-height: 1.2; letter-spacing: -0.2px; }

.side-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 4px; padding: 11px;
  font-weight: 650; font-size: 14px; color: #fff; border-radius: var(--r-md);
  background: var(--green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow-xs);
  transition: background .14s;
}
.side-cta:hover { color: #fff; background: var(--green-hov); }
.side-cta svg { width: 16px; height: 16px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.side-sec {
  font-size: 10.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: #58705F; padding: 16px 12px 6px;
}
.side-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9.5px 12px; border-radius: var(--r-sm);
  color: #B7C4BA; font-weight: 550; font-size: 14px;
  transition: background .13s, color .13s;
}
.side-nav a svg { width: 18px; height: 18px; opacity: .8; flex: none; }
.side-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side-nav a.active { background: var(--green); color: #fff; font-weight: 650; }
.side-nav a.active svg { opacity: 1; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
.side-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
}
.side-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: #1C3A29; color: #A9E3C0; font-weight: 750; font-size: 13.5px;
}
.side-user-meta { display: flex; flex-direction: column; min-width: 0; }
.side-user-meta b { color: #fff; font-size: 13px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-meta span { color: #74887A; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-out {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: #8CA192; font-size: 13px; font-weight: 550;
  transition: background .13s, color .13s;
}
.side-out svg { width: 15px; height: 15px; }
.side-out:hover { background: rgba(230, 80, 60, .13); color: #FFA298; }

.main { min-width: 0; }

/* -------------------------------------------------------------- layout */
.page { max-width: none; margin: 36px 0 90px; padding: 0 40px; }
.page-wide { max-width: none; margin: 28px 0 90px; padding: 0 30px; }
.page.wide { max-width: none; margin-top: 28px; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--bg); }

/* --------------------------------------------------------------- panels */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 32px 34px;
}
.auth-panel { width: 100%; max-width: 420px; }
.auth-panel .masthead { font-size: 24px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 20px; font-size: 15px; }
.form-panel { max-width: 660px; }

/* ---------------------------------------------------------------- forms */
.stack { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
label { font-weight: 600; font-size: 13px; display: block; color: var(--ink-2); }
input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
  display: block; width: 100%; margin-top: 6px;
  font: inherit; color: var(--ink);
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .13s, box-shadow .13s;
}
input:hover, textarea:hover, select:hover { border-color: #BCC6BD; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(18, 146, 90, .16);
}
textarea { resize: vertical; }

button, .button-link {
  font: inherit; font-weight: 650; font-size: 14px;
  color: #fff; cursor: pointer; text-align: center;
  background: var(--green);
  border: 1px solid var(--green-down);
  border-radius: var(--r-sm); padding: 10.5px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-xs);
  transition: background .13s;
  display: inline-block;
}
.button-sm { padding: 4px 10px; font-size: 12px; }
.w-newrecipe { margin: 8px 0 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tr-section { font-size: 15px; font-weight: 800; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.tr-count { font-size: 11.5px; font-weight: 700; background: var(--surface-2, #f0f4f2); color: var(--muted, #6B7A73); border-radius: 999px; padding: 2px 9px; }
.tr-table { margin-bottom: 6px; }
.tr-when { color: var(--muted, #6B7A73); font-size: 12.5px; }
.tr-empty { display: flex; align-items: center; gap: 10px; padding: 18px 14px; border: 1px dashed var(--line-2, #dfe6e2); border-radius: var(--r-sm, 8px); color: var(--muted, #6B7A73); margin-bottom: 8px; }
.tr-empty p { margin: 0; font-size: 13px; }
.tr-empty svg { opacity: .55; flex: none; }
.tr-purge { color: #B3261E; margin-left: 6px; }
.tr-purge:hover { color: #8f1d18; text-decoration: underline; }
.row-tags { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; }
.row-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #2f7d5a; background: #eef7f2; border: 1px solid #cfe6da; border-radius: 999px; padding: 1px 8px; }
.row-tag-dim { color: #6B7A73; background: #f2f4f3; border-color: #e2e7e4; }
.fm-band { border: 1px solid var(--line-2, #dfe6e2); border-left: 4px solid #2f7d5a; border-radius: var(--r-sm, 8px); padding: 10px 14px; margin: 0 0 12px; background: var(--surface-2, #f4faf7); font-size: 13.5px; }
.fm-band .hint { display: block; margin-top: 4px; }
.fm-band .button-sm { margin-left: 8px; }
.orphan-chip { border: 1px solid #F0DCB2; border-left: 4px solid #9A6B00; background: #fdf7e9; color: #6b4e00; border-radius: var(--r-sm, 8px); padding: 10px 14px; margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
button:hover, .button-link:hover { color: #fff; background: var(--green-hov); }
button:active, .button-link:active { background: var(--green-down); }
button:disabled {
  background: #C6CFC8; border-color: #B8C2BA; box-shadow: none;
  cursor: not-allowed; color: #fff;
}
.alt { font-size: 13.5px; color: var(--muted); margin: 0; }

/* -------------------------------------------------------------- flashes */
.flashes { max-width: 660px; margin: 0 auto 18px; width: 100%; }
@keyframes ly-errpulse {
  0% { background: #FDE7E5; box-shadow: 0 0 0 6px #FDE7E5; }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
.ly-err-flash { animation: ly-errpulse 1.4s ease; border-radius: 8px; }
.ly-toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 4000; display: flex; flex-direction: column; gap: 10px;
  align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.ly-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 14px;
  background: #FFFFFF; color: #182320; border: 1.5px solid #BFE0CD;
  border-left: 6px solid #12925A; border-radius: 14px; padding: 16px 18px 16px 22px;
  font-weight: 700; font-size: 15.5px; line-height: 1.4;
  box-shadow: 0 14px 38px rgba(24,35,32,.22);
  animation: lytoast-in .26s ease; min-width: 340px; max-width: 92vw; }
.ly-toast-err { border-color: #F2C4C0; border-left-color: #B3261E; }
.ly-toast-warn { border-color: #F0DCB2; border-left-color: #9A6B00; }
.ly-toast-x { flex: none; margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 2px; color: #6B7A73; font-weight: 400; }
.ly-toast-x:hover { color: #182320; }
.ly-toast-out { opacity: 0; transform: translateY(-14px); transition: all .35s ease; }
@keyframes lytoast-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

.flash {
  padding: 12px 14px 12px 16px; font-weight: 550; font-size: 14px;
  border-radius: var(--r-sm); border: 1px solid; border-left-width: 4px;
  margin-bottom: 8px; background: var(--surface); box-shadow: var(--shadow-xs);
}
.flash-ok    { border-color: var(--green-line); border-left-color: var(--green); color: #0C5E3B; background: var(--green-soft); }
.flash-error { border-color: #F0C7C2; border-left-color: var(--red); color: #9E2A21; background: var(--red-soft); }

/* ------------------------------------------------------------ dashboard */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dash-head .button-link { white-space: nowrap; }
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px; margin-top: 22px;
}
.card {
  display: block; color: var(--ink); position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  padding: 18px 20px 16px; overflow: hidden;
  transition: border-color .15s, box-shadow .18s;
}
.card:hover { color: var(--ink); border-color: var(--green-line); box-shadow: var(--shadow-md); }
.card-rule { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); margin: 0; }
.card h2 { font-size: 15.5px; margin: 0 0 6px; font-weight: 650; letter-spacing: -0.15px; }
.card-meta { font-size: 13px; color: var(--muted); margin: 3px 0; }
.ok-dot   { color: var(--green-hov); font-weight: 650; }
.warn-dot { color: #A9770F; font-weight: 650; }
.empty {
  margin-top: 26px; padding: 46px 34px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--muted); background: var(--surface); box-shadow: var(--shadow-xs);
}

/* delete links: quiet until intent is shown */
.del-link {
  background: none; border: 0; box-shadow: none; padding: 2px 0;
  color: var(--faint); font-size: 12.5px; font-weight: 550; cursor: pointer;
  text-align: left;
}
.del-link:hover { color: var(--red); background: none; text-decoration: underline; }

/* ----------------------------------------------------------- wizard ----*/
.stepper { display: flex; align-items: center; gap: 0; margin: 2px 0 26px; flex-wrap: wrap; }
.allergen-list { font-weight: 800; letter-spacing: .2px; }

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-weight: 600; font-size: 13.5px;
  color: var(--muted); background: none; border: 0; box-shadow: none;
  padding: 6px 4px; cursor: pointer; border-radius: var(--r-sm);
}
.chip + .chip::before {
  content: ""; width: 34px; height: 1px; background: var(--line-2);
  margin: 0 10px 0 6px;
}
.chip span {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 999px; background: var(--surface); color: var(--muted);
  border: 1.5px solid var(--line-2);
  font-size: 12.5px; font-weight: 700; transition: all .15s;
}
.chip:hover { color: var(--ink); background: none; }
.chip.active { color: var(--ink); font-weight: 650; }
.chip.active span { background: var(--green); border-color: var(--green); color: #fff; }
.chip.done span { background: var(--green-soft); border-color: var(--green-line); color: var(--green-hov); }

.wizard-steps { max-width: none; }
.wstep {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 28px 32px 26px; max-width: 780px;
}
.wstep[data-step="5"], .wstep-full { max-width: none; width: 100%; }
.step { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.2px; }
.step .hint { font-size: 12px; }
.step-n {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 750; color: #fff;
  background: var(--green); flex: none;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wnav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }
.wnav .back {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-xs);
}
.wnav .back:hover { color: var(--ink); background: var(--sunken); border-color: #BCC6BD; }

/* search dropdown */
.searchwrap { position: relative; }
.results {
  position: absolute; z-index: 8; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  max-height: 320px; overflow: auto;
}
.result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; font: inherit; font-weight: 400;
  color: var(--ink); background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line); padding: 9px 13px; cursor: pointer;
  transition: background .1s;
}
.result:last-child { border-bottom: 0; }
.result:hover, .result:focus { background: var(--green-soft); color: var(--ink); }
.result b { font-weight: 600; }
.result span { font-size: 12px; color: var(--muted); }

/* ingredient rows */
.ing-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ing-row {
  display: grid; grid-template-columns: 1fr 92px 32px; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--sunken); padding: 8px 12px;
}
.ing-name { font-weight: 550; font-size: 14px; }
.ing-row input { margin: 0; padding: 7px 9px; text-align: right; font-variant-numeric: tabular-nums; }
.ing-del {
  background: none; border: 0; box-shadow: none; color: var(--faint);
  font-size: 19px; cursor: pointer; padding: 2px 6px; font-weight: 400; line-height: 1;
}
.ing-del:hover { color: var(--red); background: none; }

/* 100% bar */
.pct-track {
  position: relative; height: 28px; border-radius: 999px;
  background: #ECEFEA; border: 1px solid var(--line);
  margin-top: 14px; overflow: hidden;
}
.pct-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--amber);
  transition: width .3s cubic-bezier(.4, 0, .2, 1), background .2s;
}
.pct-bar.done { background: var(--green); }
.pct-bar.over { background: var(--red); }
.pct-total {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* dynamic language rows (My products) */
.lib-h { font-size: 15px; font-weight: 700; margin: 18px 0 12px; letter-spacing: -0.15px; }
.lib-h .hint { font-size: 12px; }
.dyn-rows { display: flex; flex-direction: column; gap: 8px; }
.dyn-row {
  display: grid; grid-template-columns: 172px 1fr 32px; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--sunken); padding: 8px 12px;
}
.dyn-row input, .dyn-row textarea { margin: 0; padding: 7px 9px; }
.dyn-row .dyn-lang[readonly] { background: var(--green-soft); border-color: var(--green-line); font-weight: 600; }
.dyn-req { font-size: 11px; color: var(--green-hov); font-weight: 700; text-align: center; }
.add-btn {
  margin-top: 10px; background: var(--surface); color: var(--green-hov);
  border: 1px dashed var(--green-line); box-shadow: none; font-weight: 600;
  padding: 8.5px 16px; border-radius: var(--r-sm); font-size: 13.5px;
}
.add-btn:hover { background: var(--green-soft); color: var(--green-hov); }

/* preview + saved label view */
.wizard-preview { position: sticky; top: 84px; align-self: start; }
.preview-empty {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); color: var(--muted);
  padding: 44px 26px; text-align: center; font-size: 13.5px;
}
.decl { font-size: 13px; margin-top: 14px; color: var(--ink); }
.view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.recipe { width: 100%; border-collapse: collapse; font-size: 14px; }
.recipe td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.recipe .num { text-align: right; font-variant-numeric: tabular-nums; }
.recipe .total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--ink); }

/* ------------------------------------------------------- responsive */
@media (max-width: 940px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
          align-items: center; gap: 8px; padding: 10px 12px; }
  .side-brand-name { display: none; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-sec { display: none; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .side-user-meta span { display: none; }
  .page { padding: 0 18px; margin-top: 24px; }
  .two-col, .view-grid { grid-template-columns: 1fr; }
  .wizard-preview { position: static; }
  .dash-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ================================================================
   REGULATORY DOCUMENTS — the FDA panel and KLD sheet keep strict
   print styling. Interface fashion never crosses this line.
   ================================================================ */
.fda {
  background: #fff; border: 1px solid #000; padding: 8px 10px;
  color: #000; max-width: 340px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fda-title { font-size: 40px; font-weight: 900; letter-spacing: -0.8px; line-height: 1.0; }
.fda-title-es { display: block; font-size: 20px; font-weight: 800; letter-spacing: 0; }
.fda-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 2px 0; line-height: 1.5; }
.fda-line.fda-b { font-weight: 800; }
.fda-small { font-size: 11.5px; font-weight: 700; }
.fda-right { justify-content: flex-end; }
.fda-cal { font-size: 27px; font-weight: 900; align-items: flex-end; }
.fda-cal span:last-child { font-size: 37px; line-height: 0.9; }
.fda-cal > span:last-child { font-size: 38px; line-height: .85; }
.fda-serv { font-size: 17px; }
.fda-ind1 { padding-left: 14px; }
.fda-ind2 { padding-left: 28px; }
.fda-dv { font-weight: 400; }
.fda-rule-hair  { height: calc(1px * var(--bscale, 1));  background: #000; }
.fda-rule-thin  { height: calc(1px * var(--bscale, 1));  background: #000; }
.fda-rule-thick { height: calc(5px * var(--bscale, 1));  background: #000; margin: 2px 0; }
.fda-rule-mega  { height: calc(12px * var(--bscale, 1)); background: #000; margin: 3px 0; }
.fda-rule-short { margin-left: 16px; }
.fda-foot { font-size: 10.5px; line-height: 1.35; margin: 4px 0 0; }
.fda-notsig { font-weight: 700; }
.fda-wide { max-width: 520px; }
.fda-grid {
  display: grid; grid-template-columns: 1fr 62px 44px 70px 44px;
  gap: 0 6px; font-size: 13px; padding: 2px 0; align-items: baseline;
}
.fda-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.fda-grid.fda-ind1 > span:first-child { padding-left: 14px; }
.fda-grid.fda-ind2 > span:first-child { padding-left: 28px; }
.fda-cal2 { font-size: 24px; }
.fda-lin { max-width: 620px; }
.fda-linear { font-size: 12.5px; line-height: 1.45; margin: 0; }

/* ------------------------------------------------- KLD artwork sheet
   Fixed 1760px artboard, scaled to fit by kld.js — like a print proof. */
.kld-stage { width: 100%; padding: 4px 0 10px; }
.kld-frame { width: 100%; overflow: hidden; }
.kld {
  display: grid; grid-template-columns: 26% 1fr 26%;
  width: 1760px; background: #fff; border: calc(2px * var(--bscale, 1)) solid #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000;
  box-shadow: var(--shadow-md);
}
.kld-left { border-right: calc(1.5px * var(--bscale, 1)) solid #000; padding: 10px; }
.kld-left .fda { border: calc(1px * var(--bscale, 1)) solid #000; box-shadow: none !important; max-width: none; width: 100%; font-size: 14px; }
.kld-left .nft { border: calc(1.5px * var(--bscale, 1)) solid #000; box-shadow: none !important; max-width: none; width: 100%; }
.kld-center {
  padding: 12px 24px 18px; display: flex; flex-direction: column;
  align-items: center; gap: 30px;
}
/* V5.27.14 (owner): LY brand mark tops the center panel — same image, same
   place as the KLD PDF (V5.27.13). Screen keeps the gradient original. */
.kld-brand { line-height: 0; }
.kld-brand-img { width: 110px; height: 110px; display: block; }
.kld-advisory {
  color: #C0261C; font-weight: 700; font-size: 15px; text-align: center;
  align-self: stretch;
}
.kld-right { border-left: calc(1.5px * var(--bscale, 1)) solid #000; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.kld-cell { border: calc(1px * var(--bscale, 1)) solid #000; padding: 9px 12px; font-size: 14px; line-height: 1.45; }
.kld-storage { margin-top: 8px; }
.kld-batch {
  background: #FBF3DC; color: #B3261E; font-weight: 800;
  text-align: center; font-size: 14px; padding: 12px 10px;
}

.kld-allergen { padding: 0; overflow: hidden; }
.kld-allergen-head { background: #E11B22; color: #fff; font-weight: 800; font-size: 14px; padding: 5px 10px; }
.kld-allergen > div:last-child { padding: 7px 10px; }
.kld-disclaimer { color: #B3261E; font-weight: 700; font-size: 11.5px; text-align: center; margin-top: 8px; }
.kld-row-top { display: flex; align-items: flex-start; gap: 34px; justify-content: center; align-self: stretch; }
.vegmark {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 2.5px solid #0E7A2B; margin-top: 10px; background: #fff;
}
.vegmark i { display: block; width: 17px; height: 17px; border-radius: 50%; background: #0E7A2B; }
.vegmark.nonveg { border-color: #7B3F00; }
.vegmark.nonveg i { background: #7B3F00; }
.fop-wrap { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.fop-duo { display: flex; align-items: flex-end; gap: 8px; }
.fop { border: 2.5px solid #000; background: #fff; width: 268px; box-sizing: border-box; padding: 8px 12px 0; }
.fop-title { font-size: 27px; font-weight: 900; letter-spacing: -0.6px; line-height: 1; white-space: nowrap; }
.fop-head { display: flex; justify-content: space-between; align-items: flex-end; font-size: 12px; line-height: 1.25; margin-top: 6px; }
.fop-head b { font-size: 13px; }
.fop-right { text-align: right; font-weight: 700; }
.fop-rule { height: 6px; background: #000; margin: 6px -12px 0; }
.fop-rule-thin { height: 1px; background: #000; }
.fop-row { display: flex; align-items: baseline; gap: 8px; font-size: 14px; padding: 7px 0; }
.fop-nm { flex: 1; white-space: nowrap; }
.fop-pct { width: 44px; text-align: right; white-space: nowrap; }
.fop-lvl { width: 44px; text-align: right; font-weight: 800; white-space: nowrap; }
.fop-bar { background: #000; color: #fff; text-align: right; font-weight: 700; font-size: 12.5px; padding: 4px 12px; margin: 8px -12px 0; }
.fop-cal {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  box-sizing: border-box; border: 2.5px solid #000; background: #fff;
  padding: 8px 12px; text-align: center; min-width: 76px;
}
.fop-cal-n { font-size: 26px; font-weight: 900; line-height: 1; }
.fop-cal-w { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; margin-top: 2px; white-space: nowrap; }
.fop-note {
  box-sizing: border-box; margin-top: 4px; font-size: 9px;
  line-height: 1.3; color: #555; font-style: italic; text-align: right;
}
.kld-names { text-align: center; margin-top: 8px; }
.kld-name-en { font-size: 44px; font-weight: 800; }
.kld-name-es { font-size: 28px; font-weight: 700; margin-top: 16px; }
.kld-bottom { margin-top: auto; align-self: stretch; display: flex; flex-direction: column; gap: 16px; }
.kld-netwt { display: flex; justify-content: space-between; font-weight: 800; font-size: 16px; gap: 24px; padding: 0 30px; }
.kld-origin { font-weight: 800; text-align: center; }
.kld-origin-row { font-size: 13px; line-height: 1.35; }
.ac-origin-row, .origin-row { line-height: 1.3; }

/* -------------------------------------------------- list tables */
.tablewrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow-x: auto; margin-top: 20px;
}
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--sunken);
  white-space: nowrap;
}
table.list td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr { transition: background .1s; }
table.list tbody tr:hover { background: var(--sunken); }
table.list .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.list th.num { text-align: right; }
.row-title { font-weight: 650; color: var(--ink); }
a.row-title:hover { color: var(--green-hov); }
.row-sub { display: block; font-size: 12.5px; color: var(--muted); }
td.row-sub { display: table-cell; font-size: 13px; white-space: nowrap; }
table.list .actions { text-align: right; white-space: nowrap; }
table.list th.actions { text-align: right; }
table.list .actions a, .edit-link {
  font-weight: 600; font-size: 13px; margin-left: 14px;
  background: none; border: 0; box-shadow: none; padding: 0; cursor: pointer;
  color: var(--green);
}
table.list .actions a:hover, .edit-link:hover { color: var(--green-hov); text-decoration: underline; background: none; }
table.list .actions .del-link { margin-left: 14px; font-size: 13px; }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650;
}
.badge.ok   { background: var(--green-soft); color: var(--green-hov); border: 1px solid var(--green-line); }
.badge.warn { background: var(--amber-soft); color: #9A6E0C; border: 1px solid #EBD5A8; }
.btn-secondary {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { color: var(--ink); background: var(--sunken); }

/* ------------------------------------------------------ dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 20px; }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  padding: 18px 20px; color: var(--ink);
  transition: border-color .15s, box-shadow .18s;
}
a.stat:hover { color: var(--ink); border-color: var(--green-line); box-shadow: var(--shadow-md); }
.stat-n { font-size: 26px; font-weight: 750; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 13px; color: var(--muted); font-weight: 550; }
.stat-ok .stat-n { color: var(--green-hov); }
.stat-warn { border-color: #EBD5A8; background: var(--amber-soft); }
.stat-warn .stat-n { color: #9A6E0C; }
.dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-top: 30px; }
.dash-sec { display: flex; align-items: baseline; justify-content: space-between; }
.dash-sec h2 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.2px; }
.dash-sec a { font-size: 13px; font-weight: 600; }
.quick { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.quick-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  padding: 15px 18px; color: var(--ink);
  transition: border-color .15s, box-shadow .18s;
}
.quick-item:hover { color: var(--ink); border-color: var(--green-line); box-shadow: var(--shadow-md); }
.quick-item b { font-size: 14.5px; font-weight: 650; }
.quick-item span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 940px) { .dash-cols { grid-template-columns: 1fr; } }

/* --------------------------------------------- alignment corrections */
[hidden] { display: none !important; }                /* hidden must always win */
table.list .ctr, table.list th.ctr { text-align: center; }
table.list th.ctr, table.list td.ctr { width: 1%; white-space: nowrap; padding-left: 28px; padding-right: 28px; }
.dyn-row { grid-template-columns: 172px 1fr auto; }   /* fits both "required" and the × */
.dyn-req { padding: 0 4px; white-space: nowrap; }
.dyn-row textarea { min-height: 40px; line-height: 1.4; }
.dyn-row input.dyn-lang, .dyn-row .dyn-text { height: 40px; }
.dyn-row textarea.dyn-text { height: auto; }
.step #t-cancel-edit { font-size: 12.5px; }

/* hidden attribute must always win, even inside flex/grid parents */
[hidden] { display: none !important; }

/* ----------------------------------------- console tables (Mosaic) */
.ct-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; }
.ct-search {
  width: 260px; margin: 0; padding: 9px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); font: inherit;
}
.bulkbar {
  display: flex; align-items: center; gap: 12px; margin-right: auto;
  font-size: 13.5px; color: var(--ink-2);
}
.bulk-del {
  background: var(--surface); color: var(--red);
  border: 1px solid #F0C7C2; box-shadow: var(--shadow-xs);
  padding: 7px 16px; font-size: 13px; border-radius: var(--r-sm);
}
.bulk-del:hover { background: var(--red-soft); color: var(--red); }
.ct-head {
  padding: 15px 16px; font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  border-bottom: 1px solid var(--line);
}
.ct-count { color: var(--faint); font-weight: 650; margin-left: 4px; }
.tablewrap { margin-top: 14px; }
th.chk, td.chk { width: 36px; padding-right: 0 !important; }
.chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); cursor: pointer; }
.ct-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.pager-btns { display: flex; gap: 8px; }
.pager-prev, .pager-next {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-xs);
  padding: 6px 14px; font-size: 13px; border-radius: var(--r-sm);
}
.pager-prev:hover, .pager-next:hover { background: var(--sunken); color: var(--ink); }
.pager-prev:disabled, .pager-next:disabled {
  background: var(--sunken); color: var(--faint); border-color: var(--line);
}
@media (max-width: 940px) { .ct-toolbar { flex-wrap: wrap; } .ct-search { width: 100%; } }

/* keyboard-highlighted search result */
.result-active, .result-active:hover { background: var(--green-soft); }
.result-active b { color: var(--green-hov); }

/* translate button on language rows */
.dyn-row.has-tr { grid-template-columns: 172px 1fr auto 32px; }
.tr-btn {
  background: var(--surface); color: var(--green-hov);
  border: 1px solid var(--green-line); box-shadow: none;
  padding: 6px 10px; font-size: 12px; font-weight: 700;
  border-radius: var(--r-sm); white-space: nowrap;
}
.tr-btn:hover { background: var(--green-soft); color: var(--green-hov); }
.tr-btn:disabled { background: var(--sunken); color: var(--faint); border-color: var(--line); }

/* ---------------------------------------- inline validation (no popups) */
.invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(204, 58, 47, .14) !important; }
.field-error {
  color: var(--red); font-size: 12.5px; font-weight: 600;
  margin: 6px 2px 0; animation: fe-in .18s ease-out;
}
@keyframes fe-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.step-alert {
  border: 1px solid #F0C7C2; border-left: 4px solid var(--red);
  background: var(--red-soft); color: #9E2A21;
  border-radius: var(--r-sm); padding: 11px 14px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 16px;
  animation: fe-in .18s ease-out;
}

/* ---------------------------------------------- live label auditor */
.auditor {
  margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--sunken); padding: 14px 18px;
}
.auditor-title {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.auditor ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.auditor li { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.auditor li .hint { font-size: 11.5px; }
.auditor li i {
  flex: none; width: 17px; height: 17px; border-radius: 999px;
  display: inline-grid; place-items: center; font-style: normal;
  font-size: 11px; font-weight: 800; position: relative; top: 2px;
  background: var(--line-2); color: var(--muted);
}
.auditor li.ok i   { background: var(--green); color: #fff; }
.auditor li.ok i::before   { content: "✓"; }
.auditor li.warn i { background: var(--amber); color: #fff; }
.auditor li.warn i::before { content: "!"; }
.auditor li.bad i  { background: var(--red); color: #fff; }
.auditor li.bad i::before  { content: "✕"; }
.auditor li.ok { color: var(--ink); }
.verdict {
  border-radius: var(--r-sm); padding: 11px 14px; font-weight: 650;
  font-size: 13.5px; margin-bottom: 16px;
}
.verdict.ok { background: var(--green-soft); color: var(--green-hov); border: 1px solid var(--green-line); }

.au-langs { color: var(--red); font-weight: 700; }
.auditor li.warn .au-langs { color: #9A6E0C; }

/* declaration rows: 7-line textareas, two clean columns, corner delete */
.dyn-tall {
  align-items: start; position: relative;
  grid-template-columns: 172px 1fr;
  padding-right: 36px;                 /* identical on every row -> equal textareas */
}
.dyn-tall .row-del {
  position: absolute; top: 6px; right: 8px; margin: 0;
  width: 24px; height: 24px; line-height: 1;
  display: grid; place-items: center; border-radius: 999px;
}
.dyn-tall .row-del:hover { background: var(--red-soft); color: var(--red); }
.dyn-tall textarea.dyn-text { min-height: calc(7 * 1.55em + 20px); }
.dyn-tall .dyn-lang, .dyn-tall .tr-btn { margin-top: 2px; }
.dyn-tall .ing-del, .dyn-tall .dyn-req { margin-top: 8px; }

/* declaration rows: translate button stacked under the language box */
.lang-col { display: flex; flex-direction: column; gap: 8px; }
.lang-col .tr-btn { width: 100%; margin: 0; }

/* uniform declaration rows: badge/button stacked left, equal textareas */
.lang-col .dyn-req {
  display: block; width: 100%; text-align: center; margin: 0;
  padding: 6px 0; border: 1px dashed var(--green-line); border-radius: var(--r-sm);
  background: var(--green-soft);
}

/* ------------------------------------------------ AI regulatory audit */
.ai-audit {
  margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 16px 18px; box-shadow: var(--shadow-xs);
}
.ai-controls { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 10px; }
.ai-controls label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.ai-controls input { width: 220px; margin: 0; }
#ai-run { white-space: nowrap; }
  #ai-rules { width: 100%; margin-top: 8px; white-space: nowrap; }
    #ai-rules:disabled { opacity: .6; cursor: default; }
#ai-out { margin-top: 16px; }
.ai-numbering { font-size: 13.5px; color: var(--ink-2); }
.ai-ban { border-radius: var(--r-sm); padding: 11px 14px; font-weight: 700; font-size: 13.5px; margin: 10px 0; }
.ai-ban.ok  { background: var(--green-soft); color: var(--green-hov); border: 1px solid var(--green-line); }
.ai-ban.bad { background: var(--red-soft); color: var(--red); border: 1px solid #F0C7C2; }
.ai-ban-note { font-size: 13px; color: var(--red); margin: 4px 2px; }
.ai-warns { font-size: 13.5px; margin: 10px 0; }
.ai-warns ul { margin: 6px 0 0 18px; }
.ai-allergens { font-size: 13.5px; margin: 10px 0; }
.ai-allergens .chip {
  display: inline-block; background: var(--red-soft); color: var(--red);
  border: 1px solid #F0C7C2; border-radius: 999px; padding: 2px 10px;
  font-weight: 800; font-size: 12px; margin: 2px 2px 2px 0;
}
table.ai-rules { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
table.ai-rules th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
table.ai-rules td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ai-rules .dot { display: inline-block; width: 11px; height: 11px; border-radius: 999px; }
table.ai-rules .dot.ok  { background: var(--green); }
table.ai-rules .dot.bad { background: var(--red); }
.ai-block { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 12px 0; overflow: hidden; }
.ai-block-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; background: var(--sunken); border-bottom: 1px solid var(--line); font-size: 13px; }
.ai-block pre, .ai-raw {
  margin: 0; padding: 12px 14px; font: 12.5px/1.6 "SF Mono", Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; background: var(--surface);
  max-height: 300px; overflow-y: auto;
}
.ai-apply { padding: 6px 12px; font-size: 12px; }
.ai-details { margin-top: 12px; }
.ai-details summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--ink-2); }

/* step 3: declarations left, AI audit docked right */
.decl-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 36%);
  gap: 26px; align-items: start;
}
.decl-side .ai-audit { position: sticky; top: 16px; margin-top: 0; }
.decl-side .ai-controls { flex-direction: column; align-items: stretch; }
.decl-side .ai-controls input { width: 100%; }
.decl-side #ai-run { width: 100%; }
.decl-side #ai-out { max-height: 72vh; overflow-y: auto; }
@media (max-width: 1180px) {
  .decl-grid { grid-template-columns: 1fr; }
  .decl-side .ai-audit { position: static; }
}

.ai-title { font-size: 16px; font-weight: 750; letter-spacing: -0.2px; }
.ai-sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 6px 0 4px; }
.ai-langline { font-size: 12.5px; color: var(--ink-2); }
.ai-langline b { color: var(--green-hov); }

.ai-checkedby { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }

.ai-providers { font-size: 12px; color: var(--muted); margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.ai-providers .prov.ok { color: var(--green-hov); font-weight: 700; }
.ai-providers .prov.add { font-weight: 650; }
.ai-providers-hint { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 6px; }
.ai-providers-hint code { background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 10.5px; }

.ai-disclaimer { color: var(--faint); font-style: italic; }

.ai-status { white-space: nowrap; }
.ai-status .dot { margin-right: 6px; vertical-align: -1px; }
.ai-status .st-ok  { color: var(--green-hov); font-size: 11px; letter-spacing: .05em; }
.ai-status .st-bad { color: var(--red); font-size: 11px; letter-spacing: .05em; }

/* Export Compliance Check: ODS-style top summary */
.ai-h1 { font-size: 14px; font-weight: 800; letter-spacing: .02em; margin: 4px 0 10px; }
.ai-summary {
  border: 1px solid var(--green-line); background: var(--green-soft);
  border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 14px;
}
.ai-summary.is-banned { border-color: #F0C7C2; background: var(--red-soft); }
.ai-summary-title { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; margin-bottom: 8px; }
.ai-summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ai-summary-list > li { font-size: 13px; color: var(--ink-2); }
.ai-summary-list > li > b { color: var(--ink); }
.ai-summary-list ul { margin: 5px 0 0 16px; padding: 0; }
.ai-summary-list ul li { font-size: 12.5px; margin-bottom: 3px; }
.ai-ban-flag { color: var(--red); font-weight: 800; }

/* paste & match suggestions */
#r-paste { width: 100%; margin: 10px 0 12px; }
#r-paste-find { width: 100%; }
.suggest {
  margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--sunken); padding: 14px 16px;
}
.sg-row {
  display: grid; grid-template-columns: minmax(90px, 0.7fr) 18px minmax(0, 1.6fr) auto;
  gap: 10px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
  .sg-doubt { background: #FFF9EC; outline: 1.5px solid #E7CE93; border-radius: 10px; }
  .sg-check { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #8A6D1B; background: #FFF3D6; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sg-row:last-of-type { border-bottom: 0; }
.sg-term { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.sg-arrow { color: var(--faint); text-align: center; }
.sg-row select { margin: 0; padding: 7px 9px; font-size: 12.5px; min-width: 0; width: 100%; }
.sg-add {
  padding: 7px 13px; font-size: 12.5px; white-space: nowrap;
  background: var(--surface); color: var(--green-hov);
  border: 1px solid var(--green-line); box-shadow: none;
}
.sg-add:hover { background: var(--green-soft); color: var(--green-hov); }
.sg-add:disabled { background: var(--sunken); color: var(--faint); border-color: var(--line); }
.sg-added .sg-term { color: var(--muted); }
.sg-none { font-size: 12.5px; color: var(--muted); font-style: italic; grid-column: span 2; }
.suggest .add-btn { margin-top: 12px; }


.sg-aside { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.sg-aside-item {
  font-size: 12.5px; color: var(--ink-2); background: var(--surface);
  border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 7px 11px;
}

.sg-pct { color: var(--green-hov); font-size: 12px; margin-left: 4px; }

/* suggestion combobox */
.sg-combo { position: relative; display: block; min-width: 0; }
.sg-input { width: 100%; margin: 0; padding: 7px 10px; font-size: 12.5px; }
.sg-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  max-height: 240px; overflow-y: auto;
}
.sg-results .result b { font-size: 12.5px; }
.sg-results .result span { font-size: 11px; }

.decl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.decl-actions .add-btn { margin: 0; }

/* translation verification link: its own full-width row under the entry */
.dyn-row .img-check {
  grid-column: 1 / -1; font-size: 12px; font-weight: 600;
  overflow-wrap: anywhere; margin-top: 2px;
}

/* AI name judge */
.btn-pair { display: flex; gap: 6px; }.name-meta { grid-column: 1 / -1; display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; margin-top: 2px; }/* ------------------------------------------------ review & save (step 4) */
.rv { max-width: 1020px; display: flex; flex-direction: column; gap: 22px; }
.rv-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.rv-card > header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--sunken);
}
.rv-card > header::before {
  content: ""; position: absolute;
}
.rv-card h3 {
  margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .02em;
  border-left: 3px solid var(--green); padding-left: 10px;
}
.rv-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.rv-body { padding: 8px 20px 14px; }

.lang-pill {
  display: inline-block; min-width: 76px; text-align: center;
  padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line-2);
}
.lang-pill.en { background: var(--green-soft); color: var(--green-hov); border-color: var(--green-line); }

.rv-name {
  display: flex; align-items: center; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.rv-name:last-child { border-bottom: 0; }
.rv-name b { font-weight: 650; }

.rv-ing {
  display: grid; grid-template-columns: 26px minmax(120px, 1fr) minmax(80px, 220px) 64px;
  align-items: center; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.rv-rank {
  width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--sunken); border: 1px solid var(--line-2);
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.rv-ing-name { overflow-wrap: anywhere; }
.rv-share {
  height: 7px; background: var(--sunken); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--line);
}
.rv-share i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-hov)); border-radius: 999px; }
.rv-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.rv-total {
  display: flex; justify-content: space-between; padding: 12px 0 2px;
  font-weight: 750; font-size: 14.5px;
}
.rv-total b.ok { color: var(--green-hov); }
.rv-total b.warn { color: #9A6E0C; }

.rv-decl { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.rv-decl:last-child { border-bottom: 0; }
.rv-decl .lang-pill { flex: none; margin-top: 2px; }
.rv-decl p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 760px) { .rv-ing { grid-template-columns: 26px 1fr 60px; } .rv-share { display: none; } }

/* -------------------------------------------------------- LabelYog brand */
.side-brand-name { display: flex; flex-direction: column; line-height: 1.25; }
.side-tagline {
  font-size: 10px; font-weight: 500; color: rgba(255,255,255,.55);
  letter-spacing: .02em; margin-top: 2px;
}
.auth-tagline {
  text-align: center; margin: -6px 0 22px; font-size: 13.5px;
  color: var(--ink-2); font-weight: 600;
}
.auth-tagline span { font-size: 12px; color: var(--muted); font-weight: 500; }

.side-version { font-size: 9.5px; color: rgba(255,255,255,.4); font-weight: 600; margin-top: 1px; }
.auth-version { text-align: center; font-size: 11px; color: var(--faint); margin: 18px 0 8px; }

/* pct-total: flips to white when the fill reaches the label */
.pct-total.on-fill { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.32); }

/* ---------------------------------- compliance-check language chips */
.ai-langpick { margin: 2px 0 4px; }
.ai-langpick-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ai-langpick-label .hint { font-weight: 500; }
.lang-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 13px 7px 9px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
  transition: all .15s ease; user-select: none;
}
.lang-check input { position: absolute; opacity: 0; pointer-events: none; }
.lc-box {
  width: 15px; height: 15px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--line-2); background: var(--surface);
  display: inline-grid; place-items: center; transition: all .15s ease;
}
.lang-check:hover { border-color: var(--green); color: var(--ink); }
.lang-check:hover .lc-box { border-color: var(--green); }
.lang-check.on {
  background: var(--green); border-color: var(--green); color: #fff;
  box-shadow: 0 2px 8px rgba(31,138,76,.28);
}
.lang-check.on .lc-box { background: #fff; border-color: #fff; }
.lang-check.on .lc-box::after {
  content: ""; width: 8px; height: 5px; margin-top: -2px;
  border-left: 2.2px solid var(--green); border-bottom: 2.2px solid var(--green);
  transform: rotate(-45deg);
}
.lang-check.locked {
  background: var(--green-soft); border-color: var(--green-line);
  color: var(--green-hov); cursor: default;
}
.lang-check.locked .lc-box { background: var(--green); border-color: var(--green); }
.lang-check.locked .lc-box::after {
  content: ""; width: 8px; height: 5px; margin-top: -2px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg);
}
.lc-tag {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: var(--green-line); color: var(--green-hov);
  padding: 2px 7px; border-radius: 999px;
}
.lang-none { font-size: 12px; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------- company details (pf) */
.pf { max-width: 1020px; }
.pf-form { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.pf .rv-card { overflow: visible; }
.pf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; padding: 18px 20px 20px;
}
.pf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-wide { grid-column: 1 / -1; }
.pf-field > span:first-child { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pf-field .opt { font-style: normal; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.req { color: var(--red); }
.pf-field input, .pf-field select, .pf-field textarea { margin: 0; width: 100%; }
.pf-field select { appearance: auto; padding: 11px 12px; }
.pf-field em { font-style: normal; font-size: 12px; color: var(--red); font-weight: 600; }
.pf-field.invalid input, .pf-field.invalid select { border-color: var(--red); }
.pf-save {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.pf-save button { margin: 0; }
.pf-security { margin-top: 26px; }

/* password widgets */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; box-shadow: none; padding: 6px 8px;
  font-size: 15px; cursor: pointer; color: var(--muted);
}
.pw-eye:hover { background: var(--sunken); border-radius: var(--r-sm); }
.pw-meter {
  display: block; height: 6px; border-radius: 999px; background: var(--sunken);
  border: 1px solid var(--line); overflow: hidden; margin-top: 2px;
}
.pw-meter i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s, background .2s; }
.pw-meter i.weak { background: var(--red); }
.pw-meter i.fair { background: var(--amber); }
.pw-meter i.strong { background: var(--green); }
.pw-hint { font-style: normal; font-size: 12px; font-weight: 650; color: var(--muted); }
.pw-hint.weak { color: var(--red); } .pw-hint.fair { color: #9A6E0C; } .pw-hint.strong, .pw-hint.good { color: var(--green-hov); }
.pw-hint.bad { color: var(--red); }
.pf-pwrow { flex-direction: row !important; align-items: center; gap: 14px; }
.pf-pwrow button { margin: 0; }
@media (max-width: 720px) { .pf-grid { grid-template-columns: 1fr; } }

/* role chips + conditional cards */
.role-check { align-items: flex-start; padding: 9px 14px 9px 10px; }
.role-check .lc-name { display: flex; flex-direction: column; line-height: 1.3; }
.role-blurb { font-style: normal; font-weight: 500; font-size: 10.5px; opacity: .75; }
.lang-check.on .role-blurb { color: rgba(255,255,255,.85); }
.pf-cond[hidden] { display: none !important; }
.pf-check { flex-direction: row !important; align-items: center; gap: 10px; }
.pf-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.pf-check span { font-size: 13px; font-weight: 600; }
.pf-creator-note {
  background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: var(--r-md); padding: 13px 16px; font-size: 13px; color: var(--ink-2);
}
#pf-rolehint { font-weight: 600; color: var(--green-hov); }

/* ----------------------------------------------------------- admin panel */
.adm { max-width: 1100px; }
.adm .rv-card { margin-top: 22px; }
.adm-nav { display: flex; gap: 6px; margin: 14px 0 6px; }
.adm-nav a {
  padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--ink-2); border: 1px solid var(--line-2); text-decoration: none;
}
.adm-nav a.on, .adm-nav a:hover { background: var(--green); color: #fff; border-color: var(--green); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.adm-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-dim { color: var(--muted); font-size: 12.5px; }
.chip-plan { padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; }
.chip-plan.free { background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line-2); }
.chip-plan.pro { background: var(--green); color: #fff; }
.tile-warn b { color: var(--red); }
.adm-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; padding: 16px 20px; }
.adm-kv b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.adm-kv span { font-size: 13.5px; }
.adm-actions { display: flex; flex-direction: column; gap: 0; padding: 4px 20px 10px; }
.adm-actions form.adm-row { display: block; padding: 13px 0; border-bottom: 1px solid var(--line-2, #e7ecea); }
.adm-actions form.adm-row:last-child { border-bottom: 0; }
.adm-actions .adm-ctl { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.adm-actions .adm-row .hint { display: block; margin-top: 6px; max-width: 640px; line-height: 1.45; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.tile { background: var(--surface-2, #f6f9f7); border: 1px solid var(--line-2, #e2e9e5); border-radius: var(--r-sm, 10px); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.tile b { font-size: 21px; line-height: 1.1; letter-spacing: .2px; }
.tile span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted, #6B7A73); }
.tile-warn { border-color: #d9a1a1; background: #fbf1f1; } .tile-warn b { color: #B3261E; }
.tile-ok b { color: #2f7d5a; }
.tile-pro { border-color: #b9d3c6; background: #eef7f2; } .tile-pro b { color: #2f7d5a; }
.quota-pro { border-color: #b9d3c6; background: #eef7f2; color: #245c44; }
.quota-pro-head { display: block; font-weight: 800; font-size: 14.5px; letter-spacing: .3px; }
.quota-pro-sub { display: block; margin-top: 2px; font-size: 12.5px; opacity: .85; }
.adm-actions label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; }
.adm-actions input, .adm-actions select { margin: 0; padding: 8px 10px; width: 130px; }
.adm-actions button { margin: 0; padding: 9px 14px; font-size: 12.5px; }
.adm-actions button.danger { background: var(--red); }
.adm-blockreason { color: var(--red); font-weight: 700; margin: 10px 0 0; }
.adm-list { margin: 6px 0; padding-left: 18px; font-size: 13.5px; }
.side-admin { color: #FFD98E !important; }

/* free-plan quota banner */
.quota {
  margin: 14px 0 4px; padding: 11px 16px; border-radius: var(--r-md);
  background: var(--green-soft); border: 1px solid var(--green-line);
  font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.quota-full { background: #FFF7E8; border-color: #F0DCB0; }
.quota-blocked { background: var(--red-soft); border-color: #F0C7C2; color: var(--red); font-weight: 650; }
.quota-bar { flex: 1; min-width: 120px; height: 7px; background: rgba(0,0,0,.07);
  border-radius: 999px; overflow: hidden; }
.quota-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.quota-full .quota-bar i { background: var(--amber); }

/* ------------------------------------------------------ brand tile (D) */
.brand-tile { width: 38px; height: 38px; border-radius: 9px; display: block;
  box-shadow: 0 3px 10px rgba(10,50,28,.35); }
.side-brand { display: flex; align-items: center; gap: 11px; }
.brand-tile-lg { width: 92px; height: 92px; border-radius: 20px;
  box-shadow: 0 6px 20px rgba(10,50,28,.25); }
.auth-brand { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; }
.auth-brand-name { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }

/* ------------------------------------------- KLD print-prep sheet */
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .three-col { grid-template-columns: 1fr; } }
.kld-stage-inner { display: inline-flex; flex-direction: column; align-items: center;
  padding: 26px 10px 18px; }
.kld-mid { display: flex; align-items: center; gap: 10px; }
.kld-sheet { position: relative; background: #FFFFFF;
  box-shadow: 0 10px 34px rgba(20,40,28,.22), 0 2px 8px rgba(20,40,28,.14); }
.kld-fit { position: absolute; top: var(--spx, 22px); left: var(--spx, 22px);
  overflow: hidden; }
.kld-fit .kld-frame { margin: 0; }
.kld-trimline { position: absolute; inset: var(--bpx, 11px);
  border: 1.6px dashed #E0457B; pointer-events: none; z-index: 4; }
.kld-safeline { position: absolute; inset: var(--spx, 22px);
  border: 1.4px dashed #27AE60; pointer-events: none; z-index: 4; opacity: .85; }
.crop { position: absolute; width: var(--bpx, 11px); height: var(--bpx, 11px);
  pointer-events: none; z-index: 5; }
.crop.c-tl { top: 0; left: 0;  border-right: 1.2px solid #24312A; border-bottom: 1.2px solid #24312A; }
.crop.c-tr { top: 0; right: 0; border-left: 1.2px solid #24312A;  border-bottom: 1.2px solid #24312A; }
.crop.c-bl { bottom: 0; left: 0;  border-right: 1.2px solid #24312A; border-top: 1.2px solid #24312A; }
.crop.c-br { bottom: 0; right: 0; border-left: 1.2px solid #24312A;  border-top: 1.2px solid #24312A; }

.kdim { display: flex; align-items: center; gap: 10px; color: #40514A;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.kdim-line { flex: 1; height: 0; border-top: 1.4px solid #7B8C84; position: relative; min-width: 26px; }
.kdim-line::before, .kdim-line::after { content: ""; position: absolute; top: -4px;
  border: 4px solid transparent; }
.kdim-line:first-child::before { left: -1px; border-right: 7px solid #7B8C84; border-left: 0; }
.kdim-line:last-child::after  { right: -1px; border-left: 7px solid #7B8C84; border-right: 0; }
.kdim-top { width: 100%; max-width: 100%; padding: 4px 34px; box-sizing: border-box; }
.kdim-side { flex-direction: column; align-self: stretch; padding: 10px 0; width: 34px; }
.kdim-side .kdim-line { width: 0; flex: 1; border-top: 0; border-left: 1.4px solid #7B8C84; min-width: 0; min-height: 24px; }
.kdim-side .kdim-line::before, .kdim-side .kdim-line::after { left: -4px; top: auto; border: 4px solid transparent; }
.kdim-side .kdim-line:first-child::before { top: -1px; border-bottom: 7px solid #7B8C84; border-top: 0; }
.kdim-side .kdim-line:last-child::after   { bottom: -1px; border-top: 7px solid #7B8C84; border-bottom: 0; }
.kdim-side span { writing-mode: vertical-rl; transform: rotate(180deg); }

.kld-spec { margin-top: 14px; font-size: 12px; color: #40514A; text-align: center;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; }
.kld-spec b { letter-spacing: .06em; color: #1C2B24; }
.spec-trim { color: #E0457B; font-weight: 700; }
.spec-safe { color: #1F8A4C; font-weight: 700; }
.kld-stage { background: repeating-linear-gradient(45deg, #EDF0EE 0 14px, #E8ECEA 14px 28px);
  border-radius: var(--r-lg); text-align: center; }
@media print {
  .kld-stage { background: none; }
  .kld-sheet { box-shadow: none; }
}

/* --------------------- KLD sheet: rigid grid (V5.9) -- zoom-proof */
.kld-stage-inner {
  display: inline-grid;
  grid-template-areas: ". top ." "left sheet right" ". bottom ." "spec spec spec" "checks checks checks";
  grid-template-columns: 34px max-content 34px;
  width: max-content;
  justify-items: center; align-items: center;
  gap: 6px 8px; padding: 24px 12px 18px;
}
.area-top { grid-area: top; } .area-bottom { grid-area: bottom; }
.area-left { grid-area: left; } .area-right { grid-area: right; }
.area-sheet { grid-area: sheet; } .area-spec { grid-area: spec; margin-top: 10px; }
.area-checks { grid-area: checks; }
.kdim-h { width: 100%; padding: 0 6px; box-sizing: border-box; }
.kdim-v { height: 100%; flex-direction: column; padding: 6px 0; box-sizing: border-box; }
.kdim-v .kdim-line { border-top: 0; border-left: 1.4px solid #7B8C84; flex: 1;
  min-width: 0; min-height: 22px; width: 0; }
.kdim-v .kdim-line::before, .kdim-v .kdim-line::after {
  left: -4px; top: auto; border: 4px solid transparent; }
.kdim-v .kdim-line:first-child::before { top: -1px; border-bottom: 7px solid #7B8C84; border-top: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.kdim-v .kdim-line:last-child::after { bottom: -1px; border-top: 7px solid #7B8C84; border-bottom: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.kdim-v span { writing-mode: vertical-rl; transform: rotate(180deg); }

/* fitter measures true artwork: frame expands to content inside kld-fit */
.kld-fit > .kld-frame { width: max-content; overflow: visible; }

/* ------------------ step 3: selectable declaration cards (V5.9.1) */
.decl-pick { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 8px; }
.decl-card {
  display: flex; gap: 16px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); padding: 13px 16px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.decl-card:hover { border-color: var(--green); }
.decl-card.on {
  border-color: var(--green); background: var(--green-soft);
  box-shadow: 0 2px 10px rgba(18, 146, 90, .14);
}
.decl-card .lang-check { flex: none; pointer-events: none; margin-top: 1px; }
.decl-card p {
  margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-2);
  overflow-wrap: anywhere; user-select: text;
}
.decl-card.on p { color: var(--ink); }

/* ------------------------ KLD two-view review (V5.9.2) */
.kld-duo { display: flex; flex-direction: column; gap: 24px; align-items: stretch; padding: 6px 8px 12px; }
.kld-view-tag {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 12px;
}
.kld-view-tag span { font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: none; font-size: 11.5px; }
.kld-view-tag b { border-left: 3px solid var(--green); padding-left: 8px; }
.kld-sheetblock { display: flex; flex-direction: column;
  align-items: safe center;   /* centered when it fits, start-anchored when
                                 zoomed past the viewport -- both ends stay
                                 reachable by drag/scroll */
  max-width: 100%; overflow: auto; cursor: grab; }
.kld-sheetblock.panning { cursor: grabbing; user-select: none; }
.kld-sheetblock .kld-view-tag { align-self: flex-start; margin-bottom: 2px;
  display: flex; align-items: center; gap: 10px; width: 100%; }
.kld-warnstack { display: flex; flex-direction: column; gap: 8px; }
.kld-rolewarn { background: #FFF6E5; border: 1.5px solid #C58A00; color: #7A5600;
  font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 8px; }
/* ---- V5.17.70: printed-name pills in the compliance-chip design family ---- */
.w-field { font-weight: 600; font-size: 13px; display: block; color: var(--ink-2); }
.w-field > label { margin-bottom: 4px; }
.w-cat-wrap { position: relative; }
.w-cat-search { margin-bottom: 0; width: 100%; }
.w-cat-menu { position: absolute; z-index: 1000; top: 100%; left: 0; right: 0;
  margin-top: 6px; max-height: 320px; overflow: auto;
  background: #FFFFFF; opacity: 1; isolation: isolate;
  border: 1.5px solid #E3E7E4; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(24,35,32,.18); }
.w-cat-menu .w-cat-it, .w-cat-menu .w-cat-g, .w-cat-menu .w-cat-none { background: #FFFFFF; }
.w-cat-menu .w-cat-it:hover, .w-cat-menu .w-cat-it.sel { background: #E7F4EC; }
.w-cat-g { font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #6B7A73; padding: 8px 14px;
  background: #F6F7F5; border-top: 1px solid #E3E7E4; border-bottom: 1px solid #E3E7E4;
  position: sticky; top: 0; z-index: 1; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; }
.w-cat-g:hover { color: #12925A; }
.w-cat-g:first-child { border-top: 0; }
.w-cat-gn { font-weight: 650; font-size: 10px; letter-spacing: 0;
  text-transform: none; color: #9AA8A1; }
.w-cat-it { padding: 8px 14px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 550; }
.w-cat-it:hover, .w-cat-it.sel { background: var(--gsoft); }
.w-cat-racc { color: var(--mut); font-size: 12px; white-space: nowrap; }
.w-cat-none { padding: 12px 14px; color: var(--mut); }
.w-cat-search:focus { border-color: var(--green); }
.w-names { margin: 4px 0 2px; }
.w-names-head { font-weight: 700; margin-bottom: 10px; }
.w-names-head .hint { font-weight: 400; }
.w-name-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.w-nm { position: relative; display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 10px 14px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--paper);
  font-size: 13px; font-weight: 650; color: var(--ink2);
  transition: all .15s ease; user-select: none; min-width: 0; }
.w-nm input { position: absolute; opacity: 0; pointer-events: none; }
.w-nm-box { width: 16px; height: 16px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--line); background: var(--paper);
  display: inline-grid; place-items: center; transition: all .15s ease; }
.w-nm:hover { border-color: var(--green); color: var(--ink); }
.w-nm:hover .w-nm-box { border-color: var(--green); }
.w-nm:has(input:checked) { background: var(--green); border-color: var(--green);
  color: #fff; box-shadow: 0 2px 8px rgba(18,146,90,.28); }
.w-nm:has(input:checked) .w-nm-box { background: #fff; border-color: #fff; }
.w-nm:has(input:checked) .w-nm-box::after { content: ""; width: 8px; height: 5px;
  margin-top: -2px; border-left: 2.2px solid var(--green);
  border-bottom: 2.2px solid var(--green); transform: rotate(-45deg); }
.w-nm:has(input:focus-visible) { outline: 2px solid var(--ghov); outline-offset: 2px; }
.w-nm-lang { font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: var(--gline); color: var(--ghov);
  padding: 2px 7px; border-radius: 999px; transition: all .15s ease; }
.w-nm:has(input:checked) .w-nm-lang { background: rgba(255,255,255,.22); color: #fff; }
.w-nm-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; min-width: 0; }
.w-nm-langline { display: flex; align-items: center; gap: 6px; }
.w-nm-full { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.w-nm-text { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-hh-hint { background: var(--green-soft); border: 1.5px solid var(--green-line);
  color: var(--green-hov); font-weight: 700; font-size: 13px; padding: 8px 12px;
  border-radius: 8px; margin: 6px 0 0; }
.w-parties { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 12px; margin-top: 14px; }
.w-parties legend { font-weight: 800; padding: 0 8px; }
.wp-mfg { display: block; margin: 6px 0 10px; font-size: 14px; }
.wp-role { border-top: 1px dashed var(--line); padding: 10px 0 4px; }
.wp-role-h { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.wp-role-h b { font-size: 14px; }
.wp-role-h i { color: #6B7A73; font-size: 12px; font-style: normal; }
.wp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.wp-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 0 8px; }
.dest-hero { max-width: 620px; margin: 24px auto 8px; padding: 38px 36px 30px; text-align: center;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px;
  box-shadow: 0 10px 34px rgba(18,146,90,.10); }
.dest-kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green); margin-bottom: 12px; }
.dest-title { font-size: 30px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 8px; }
.dest-sub { color: #6B7A73; font-size: 14px; margin: 0 0 24px; }
.dest-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.dest-card { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px; cursor: pointer; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 16px; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--ink); transition: all .15s ease; }
.dest-card:hover { border-color: var(--green); box-shadow: 0 3px 12px rgba(18,146,90,.16);
  transform: translateY(-1px); }
.dest-card.dest-on { background: var(--green); border-color: var(--green); color: #fff;
  box-shadow: 0 4px 14px rgba(18,146,90,.32); }
.dest-flag { font-size: 26px; line-height: 1; }
.dest-selectwrap { display: block; text-align: left; max-width: 420px; margin: 0 auto;
  font-weight: 700; font-size: 13px; }
.dest-selectwrap select { width: 100%; margin-top: 6px; font-size: 15px; padding: 11px 12px; }
.dest-nav { justify-content: center; margin-top: 24px; }
.dest-nav .next { font-size: 15px; padding: 11px 34px; }
.dest-search { position: relative; max-width: 420px; margin: 0 auto 14px; text-align: left; }
.dest-search input { width: 100%; box-sizing: border-box; font-size: 15px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); }
.dest-search input:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(18,146,90,.14); }
.dest-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(31,42,37,.14); overflow: hidden; }
.dest-sugg-item { display: block; width: 100%; text-align: left; padding: 10px 14px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: none; border: 0; cursor: pointer; }
.dest-sugg-item:hover, .dest-sugg-item.dest-sugg-act { background: #EDF6F1; color: var(--green); }
.dest-sugg-item + .dest-sugg-item { border-top: 1px solid #F0F3F1; }
.dest-sugg-none { padding: 10px 14px; font-size: 13px; color: #6B7A73; }
.nft { width: 340px; box-sizing: border-box; border: 1.5px solid #000; padding: 8px 10px;
  background: #fff; font-family: Arial, Helvetica, sans-serif; color: #000; }
.nft-h1 { font-size: 25px; font-weight: 900; line-height: 1.02; letter-spacing: -0.5px; }
.nft-h2 { font-size: 20px; font-weight: 900; line-height: 1.05; margin-bottom: 4px; }
.nft-serv { font-size: 13.5px; line-height: 1.25; margin: 2px 0 6px; }
.nft-rl { border-top: 1px solid #000; margin: 3px 8px; }
.nft-rl.mid { border-top: 4px solid #000; margin: 4px 0; }
.nft-rl.thick { border-top: 7px solid #000; margin: 5px 0; }
.nft-calrow { display: flex; justify-content: space-between; align-items: flex-end; }
.nft-cal { font-size: 21px; font-weight: 900; }
.nft-dvh { font-size: 10px; text-align: right; line-height: 1.2; }
.nft-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.nft-row.ind .nft-nm { padding-left: 14px; }
.nft-nm.b { font-weight: 800; }
.nft-pct { white-space: nowrap; }
.nft-foot { font-size: 10.5px; line-height: 1.35; margin-top: 4px; }
.fopca { width: 224px; box-sizing: border-box; border: 1.5px solid #000; border-radius: 5px;
  background: #fff; padding: 7px 8px 5px; color: #000;
  font-family: Arial, Helvetica, sans-serif; }
.fopca-head { display: flex; align-items: center; margin: 0 2px 4px; }
.fopca-mag { position: relative; width: 26px; height: 26px; flex: none;
  display: inline-block; margin-right: 6px; }
.fopca-lens { position: absolute; left: 6px; top: 1px; width: 17px; height: 17px;
  box-sizing: border-box; border: 3.4px solid #000; border-radius: 50%; }
.fopca-handle { position: absolute; left: 8px; top: 16px; width: 10px; height: 4px;
  background: #000; border-radius: 2px; transform: rotate(135deg);
  transform-origin: left center; }
.fopca-hi b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.08; white-space: nowrap; }
.fopca-hi span { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; }
.fopca-bar { display: block; background: #000; color: #fff; font-size: 12.5px; font-weight: 800;
  line-height: 1.1; padding: 4px 9px; margin: 3px 0; border-radius: 2px; white-space: nowrap; }
.fopca-hc { margin-top: 5px; font-size: 8.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.kld-netwt { display: flex; justify-content: space-between; gap: 20px; }
.kld-wt-col { display: flex; flex-direction: column; }
.kld-drained-ln { font-weight: 600; }
.w-drained { margin: 12px 0 4px; }
.drained-toggle { display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: 10px; cursor: pointer; font-weight: 500; transition: border-color .12s; }
.drained-toggle:hover { border-color: var(--green); }
.drained-toggle input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--green); cursor: pointer; flex: 0 0 auto; }
.drained-toggle-txt { display: flex; flex-direction: column; gap: 2px; }
.drained-toggle-title { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.drained-field { display: block; margin: 10px 0 2px; padding-left: 14px;
  border-left: 2px solid var(--green-line); }
.drained-field-lbl { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2);
  margin-bottom: 5px; }
.drained-field input { max-width: 200px; }
.nft-horiz { width: 460px; display: flex; gap: 0; }
.nft-horiz .nft-hcol { flex: 1 1 50%; padding: 0 8px; box-sizing: border-box; }
.nft-horiz .nft-hcol-l { border-right: 1px solid #000; }
.nft-linear { width: 100%; max-width: 640px; border: 1.5px solid #000; padding: 6px 9px;
  font-family: Arial, Helvetica, sans-serif; font-size: 11.5px; line-height: 1.5; color: #000; }
.nft-linear .nft-foot { font-size: 9.5px; }
.nft-dualhead { display: flex; font-size: 10px; font-weight: 700; text-align: right; }
.nft-dualhead .nft-dh-nm { flex: 1 1 auto; }
.nft-dualhead .nft-dh-col { flex: 0 0 64px; padding-left: 4px; }
.nft-drow { display: flex; align-items: baseline; font-size: 12.5px; line-height: 1.4; }
.nft-drow .nft-nm { flex: 1 1 auto; }
.nft-dcol { flex: 0 0 64px; text-align: right; white-space: nowrap; }
.nft-dual .nft-calrow { display: flex; }
.nft-dual .nft-cal { flex: 1 1 auto; }
.row-tag-ctry { display: inline-block; padding: 2px 9px; border: 1px solid #CBD8D0;
  border-radius: 999px; background: #F4F8F5; color: #2C6E49; font-size: 12px;
  font-weight: 600; white-space: nowrap; }
.wp-card { align-items: flex-start; }
.wp-card .w-nm-box { margin-top: 2px; }
.wp-card-sub { display: block; font-size: 11.5px; font-weight: 500; color: #6B7A73;
  line-height: 1.35; white-space: normal; }
.w-nm:has(input:checked) .wp-card-sub { color: rgba(255,255,255,.85); }
.wp-item { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; }
.wp-refresh { border: 0; background: none; color: var(--green); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; }
.kld-zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.kld-zoom b { border-left: 0; padding-left: 0; }
.kld-zoom button { border: 1.5px solid #222; background: #fff; color: #111;
  cursor: pointer; font: inherit; font-weight: 700; line-height: 1;
  padding: 4px 11px; }
.kld-zoom button:hover { background: var(--green); color: #fff; border-color: var(--green); }
.kld-zoom b { min-width: 46px; text-align: center; font-size: 12.5px; }
.kld-sheet { outline: 1px solid #CBD2CC; }
.kld-fit .kld { box-shadow: none; }

/* ------------------------------ UPC reserve zone (V5.10) */
.kld-upc { text-align: center; padding: 12px 10px 10px; }
.upc-bars { display: block; width: 62%; height: 46px; margin: 0 auto; }
.upc-digits { font-size: 13px; letter-spacing: .28em; margin-top: 3px; font-weight: 600; }
.upc-note { color: #8A6D1B; font-size: 10.5px; font-weight: 700; margin-top: 7px;
  letter-spacing: .02em; }

/* ------------------------------ print-compliance ruler */
.kld-check {
  /* V5.27.11 (owner): the ruler rows divide EQUALLY -- the four US
     compliance chips form a 2x2 grid of equal cells (two balanced rows)
     instead of wrapping 3+1 with "Panel print" stranded alone. */
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 10px;
}
.kc-item {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: #FFFFFF; border: 1px solid var(--green-line);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  text-align: center;
}
.kc-item b { color: var(--ink); font-weight: 750; }
.kc-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); flex: none; }
.kc-dot.kc-info { background: var(--amber); }

/* stage refinement: calmer stripes, soft frame */
.kld-stage { background: repeating-linear-gradient(45deg, #F0F2F0 0 16px, #ECEFEC 16px 32px);
  border: 1px solid var(--line); }

/* -------------- elastic KLD canvas (V5.10.2): content fills the trim */
.kld-left { display: flex; flex-direction: column; }
.kld-left .kld-storage { margin-top: 8px; }
.kld { min-height: 0; }
.kld > * { min-width: 0; }

/* --------- KLD portrait pose (V5.10.4): tall labels stack the columns */
.kld.kld-portrait { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
.kld-portrait .kld-left { border-right: 0; border-bottom: 1.5px solid #000; }
.kld-portrait .kld-left .fda { max-width: 70%; margin: 0 auto; }
.kld-portrait .kld-right { border-left: 0; border-top: 1.5px solid #000; }
.kld-portrait .kld-center { padding: 16px 22px; }

/* the KLD is a regulatory document: base alignment is LEFT; elements that
   center (advisory, names, origin, batch, disclaimer, UPC) declare it
   themselves. Stops the stage's text-align:center inheriting in. */
.kld { text-align: left; }


/* ------- KLD banner pose (V5.12.1): extreme-wide labels (aspect <= .34)
   flow the right column's cells into two columns, halving its height so
   the self-solving canvas converges and the matter fills the band. */
.kld.kld-banner .kld-right { column-gap: 16px; }
.kld.kld-cols-2 .kld-right { column-count: 2; }
.kld.kld-cols-3 .kld-right { column-count: 3; }
.kld.kld-cols-4 .kld-right { column-count: 4; }
.kld.kld-portrait { align-content: stretch; }
.kld-banner .kld-right > * { break-inside: avoid; }
.kld-banner .kld-disclaimer { margin-top: 10px; }
.kld-banner .kld-center { justify-content: center; }

/* ---------------- panel-format chips on the KLD review (V5.13) */
.fmt-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.fmt-pick-label { font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; margin-right: 4px; }
.fmt-chip {
  border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 650;
  cursor: pointer; transition: all .15s;
}
.fmt-chip:hover { border-color: var(--green); }
.fmt-chip.on { border-color: var(--green); background: var(--green); color: #fff;
  box-shadow: 0 2px 10px rgba(18, 146, 90, .25); }

/* ------------------- FDA tabular panel (V5.14) — small-package minima */
.fda-tab { width: 100%; max-width: 1180px; padding: 18px 20px 16px; }
.kld-left .fda-tab { border-width: calc(1.5px * var(--bscale, 1)); }
.fda-tab-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.fda-tab-left { flex: 1 1 auto; min-width: 0; }
.fda-tab-title { font-size: 30px; }
.fda-tab-serv { font-size: 15.5px; line-height: 1.35; }
.fda-tab-serv.fda-b { font-weight: 800; }
.fda-tab-cal { text-align: right; border-left: calc(1.5px * var(--bscale, 1)) solid #000;
  padding-left: 16px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.fda-tab-cal span { display: block; font-size: 17px; font-weight: 800; line-height: 1.1; }
.fda-tab-cal b { font-size: 28px; line-height: 1; }
.fda-tab-grid { display: grid; grid-template-columns: repeat(var(--tabcols, 3), minmax(0, 1fr)); }
.fda-tab-col { border-right: calc(1.5px * var(--bscale, 1)) solid #000; }
.fda-tab-col-last { border-right: 0; }
.fda-tab-cell > span:first-child { flex: 1 1 auto; min-width: 0; }
.fda-tab-cell .fda-dv { white-space: nowrap; }
.fda-tab-cell { display: flex; justify-content: space-between; gap: 10px;
  font-size: 13.5px; line-height: 1.55; padding: 5px 12px 5px 6px;
  border-bottom: calc(1.5px * var(--bscale, 1)) solid #000; }
.fda-tab-cell-last { border-bottom: 0; }
.fda-tab-grid .fda-ind1 { padding-left: 12px; }
.fda-tab-grid .fda-ind2 { padding-left: 24px; }

/* ------------------- banned-substance warning (V5.16, R5) */
.kld-banned { border: calc(2px * var(--bscale, 1)) solid #C62828 !important; background: #FDECEA; padding: 9px 12px; }
.kld-banned-h { color: #8E1B1B; font-weight: 900; font-size: 12px; letter-spacing: .05em; }
.kld-banned-i { color: #8E1B1B; font-size: 12px; margin-top: 5px; line-height: 1.5; }

/* ------------------- PDF button (V5.15) */
.btn-pdf { display: inline-block; background: var(--green); color: #fff; font-weight: 750;
  font-size: 13.5px; border-radius: 999px; padding: 9px 20px; text-decoration: none;
  box-shadow: 0 2px 10px rgba(18,146,90,.25); }
.btn-pdf:hover { filter: brightness(1.06); }

/* ===== Compliance Report modal (V5.17.118) ===== */
.report-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(24, 35, 32, 0.55);
  backdrop-filter: blur(2px);
  display: none; align-items: stretch; justify-content: center;
}
.report-overlay.is-open { display: flex; }
.report-shell {
  background: var(--bg); width: 100%; max-width: 920px;
  margin: 0 auto; display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(24,35,32,.28);
}
@media (min-width: 720px) {
  .report-overlay.is-open { padding: 28px; }
  .report-shell { border-radius: var(--r-lg); max-height: calc(100vh - 56px); overflow: hidden; }
}
.report-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 20px; background: var(--surface);
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.report-bar-title { font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: .2px; }
.report-bar-actions { display: flex; gap: 8px; }
.report-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--green-line); background: var(--green-soft);
  color: var(--green-down);
}
.report-btn:hover { background: #DBEEE3; }
.report-btn-x { border-color: var(--line-2); background: var(--surface); color: var(--ink-2); }
.report-btn-x:hover { background: var(--sunken); }
.report-body {
  padding: 22px 24px 40px; overflow-y: auto; flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
/* readability polish inside the modal */
.report-body .ai-h1 { font-size: 15px; margin: 4px 0 16px; }
.report-body .ai-summary { margin-bottom: 20px; }
.report-body .ai-rules { margin: 20px 0; width: 100%; }
.report-body .ai-block pre {
  white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}
.report-body .hint { margin-bottom: 14px; }

/* compliance-check country dropdown -- match app selects (V5.17.120) */
#ai-country {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
#ai-country:focus { outline: none; border-color: var(--green); }

/* friendly compliance header (V5.17.123) */
.ai-sub { color: var(--ink-2); font-size: 13.5px; margin: 2px 0 16px; line-height: 1.5; }
.cov-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; margin-left: 8px; vertical-align: middle; letter-spacing: .2px; }
.cov-full { background: var(--green-soft); color: var(--green-down); border: 1px solid var(--green-line); }
.cov-base { background: var(--amber-soft); color: var(--amber); border: 1px solid #F0D9A6; }

/* auditor scope statement (V5.17.124) */
.scope-panel { margin: 22px 0; padding: 16px 18px; background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.scope-head { font-weight: 800; font-size: 13.5px; color: var(--ink); margin-bottom: 10px; }
.scope-in { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0 0 10px; }
.scope-in b { color: var(--green-down); }
.scope-out { font-size: 13px; color: var(--ink); margin: 6px 0 6px; }
.scope-out b { color: var(--amber); }
.scope-list { margin: 0 0 10px; padding-left: 20px; }
.scope-list li { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.scope-base { font-size: 12.5px; color: var(--amber); background: var(--amber-soft);
  border: 1px solid #F0D9A6; border-radius: var(--r-sm); padding: 8px 11px; margin: 8px 0; line-height: 1.5; }
.scope-foot { font-size: 12px; color: var(--muted); font-style: italic; margin: 8px 0 0; line-height: 1.5; }

/* inquiry prompt -- asks the client before applying (V5.17.125) */
.inq-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(24,35,32,.6);
  display: none; align-items: center; justify-content: center; padding: 20px; }
.inq-overlay.is-open { display: flex; }
.inq-shell { background: var(--surface); border-radius: var(--r-lg); max-width: 520px;
  width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 14px 50px rgba(24,35,32,.3);
  padding: 22px 24px; }
.inq-head { font-weight: 800; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.inq-sub { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 16px; }
.inq-q { padding: 12px 0; border-top: 1px solid var(--line); }
.inq-qtext { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.inq-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.inq-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  padding: 7px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink-2); background: var(--sunken); }
.inq-opt:has(input:checked) { border-color: var(--green); background: var(--green-soft);
  color: var(--green-down); font-weight: 600; }
.inq-miss .inq-qtext { color: var(--red); }
.inq-miss .inq-qtext::after { content: " — please choose"; font-weight: 400; font-size: 12px; }
.inq-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.inq-cancel, .inq-apply { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 16px; border-radius: var(--r-sm); }
.inq-cancel { border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.inq-apply { border: 1.5px solid var(--green); background: var(--green); color: #fff; }
.inq-apply:hover { background: var(--green-hov); }

/* stale-translation marker (V5.17.126) */
.tr-stale .dyn-text { border-color: var(--amber); background: var(--amber-soft); }
.tr-stale .dyn-text::placeholder { color: var(--amber); }

/* warning toast (V5.17.127) */
.ly-toast-warn { background: var(--amber-soft); color: var(--amber);
  border: 1px solid #F0D9A6; }

/* success toast (V5.17.131) */
.ly-toast-ok { background: var(--green-soft); color: var(--green-down);
  border: 1px solid var(--green-line); }