/* ═══════════════════════════════════════════════
   Vendor KPI Deskboard — frontend app styles
   Scoped under #vkd-root to avoid theme conflicts
   ═══════════════════════════════════════════════ */

#vkd-root, #vkd-root *, #vkd-root *::before, #vkd-root *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

#vkd-root {
  --bg:        #ffffff;
  --bg2:       #f5f5f3;
  --bg3:       #eeede9;
  --text:      #1a1a18;
  --text2:     #5f5e5a;
  --text3:     #9b9a96;
  --border:    rgba(0,0,0,0.10);
  --border2:   rgba(0,0,0,0.18);
  --radius:    8px;
  --radius-lg: 12px;
  --blue:      #185FA5;
  --blue-bg:   #E6F1FB;
  --green:     #3B6D11;
  --green-bg:  #EAF3DE;
  --amber:     #854F0B;
  --amber-bg:  #FAEEDA;
  --red:       #A32D2D;
  --red-bg:    #FCEBEB;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-family: var(--font); background: var(--bg3); color: var(--text);
  min-height: 100vh; display: block;
}

@media (prefers-color-scheme: dark) {
  #vkd-root {
    --bg:      #1c1c1a;
    --bg2:     #252523;
    --bg3:     #2e2e2b;
    --text:    #f0efe9;
    --text2:   #a8a79f;
    --text3:   #6b6a64;
    --border:  rgba(255,255,255,0.10);
    --border2: rgba(255,255,255,0.18);
    --blue-bg: #0c2d50;
    --green-bg:#173404;
    --amber-bg:#412402;
    --red-bg:  #501313;
  }
}

/* ══════ AUTH SCREEN ══════ */
#vkd-root #auth-screen {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--bg3); padding: 24px;
}
#vkd-root .auth-card {
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); width: 100%; max-width: 420px;
  overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
#vkd-root .auth-header { padding: 28px 32px 20px; border-bottom: 1px solid var(--border); }
#vkd-root .auth-brand  { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
#vkd-root .auth-brand-dot  { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
#vkd-root .auth-brand-text { font-size: 15px; font-weight: 700; }
#vkd-root .auth-tabs { display: flex; background: var(--bg2); border-radius: var(--radius); padding: 3px; }
#vkd-root .auth-tab {
  flex: 1; padding: 8px 0; text-align: center; font-size: 13px; font-weight: 500;
  color: var(--text2); cursor: pointer; border-radius: 6px;
  transition: background .15s, color .15s; user-select: none;
}
#vkd-root .auth-tab.on {
  background: var(--bg); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
#vkd-root .auth-body     { padding: 24px 32px 28px; }
#vkd-root .auth-panel    { display: none; }
#vkd-root .auth-panel.on { display: block; }
#vkd-root .auth-title    { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
#vkd-root .auth-sub      { font-size: 12px; color: var(--text3); margin-bottom: 20px; }

#vkd-root .auth-notice {
  background: var(--green-bg); border: 1px solid rgba(59,109,17,0.3);
  border-radius: var(--radius); padding: 9px 13px; font-size: 12px;
  color: var(--green); margin-bottom: 14px; display: none;
}
#vkd-root .auth-notice.show     { display: block; }
#vkd-root .auth-notice.is-warn  { background: var(--amber-bg); border-color: rgba(133,79,11,0.3); color: var(--amber); }

#vkd-root .auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 14px;
  font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em;
}
#vkd-root .auth-divider::before, #vkd-root .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
#vkd-root .g-btn-wrap { display: flex; justify-content: center; min-height: 44px; width: 100%; }
#vkd-root .g-btn-wrap > div { max-width: 100%; }
#vkd-root .vkd-google-only { display: none; }
#vkd-root.has-google .vkd-google-only { display: flex; }

#vkd-root .auth-links { margin-top: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#vkd-root .auth-links a { font-size: 12px; color: var(--blue); text-decoration: none; }
#vkd-root .auth-links a:hover { text-decoration: underline; }

#vkd-root .fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
#vkd-root .fg label {
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.05em;
}
#vkd-root .fg > input, #vkd-root .fg > select {
  font-size: 13px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border2); background: var(--bg); color: var(--text);
  width: 100%; font-family: var(--font); transition: border-color .15s, box-shadow .15s;
}
#vkd-root .fg > input:focus, #vkd-root .fg > select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,95,165,0.15);
}
#vkd-root .cat-wrap select,
#vkd-root .addable-wrap input[type="text"] {
  font-size: 13px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border2); background: var(--bg); color: var(--text);
  width: 100%; font-family: var(--font); transition: border-color .15s, box-shadow .15s;
  flex: 1; min-width: 0;
}
#vkd-root .cat-wrap select:focus,
#vkd-root .addable-wrap input[type="text"]:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,95,165,0.15);
}
#vkd-root .fg .hint { font-size: 11px; color: var(--text3); }
#vkd-root .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

#vkd-root .auth-err {
  background: var(--red-bg); border: 1px solid rgba(163,45,45,0.3);
  border-radius: var(--radius); padding: 9px 13px; font-size: 12px;
  color: var(--red); margin-bottom: 14px; display: none;
}
#vkd-root .auth-err.show { display: block; }

#vkd-root .btn-full {
  width: 100%; padding: 11px; font-size: 13px; font-weight: 600;
  border-radius: var(--radius); background: var(--blue); color: #fff;
  border: none; cursor: pointer; font-family: var(--font);
  transition: opacity .15s; display: flex; align-items: center;
  justify-content: center; gap: 8px;
}
#vkd-root .btn-full:hover    { opacity: 0.88; }
#vkd-root .btn-full:disabled { opacity: 0.5; cursor: not-allowed; }

#vkd-root .spinner {
  width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%;
  animation: vkd-spin 0.7s linear infinite; display: none;
}
#vkd-root .spinner.show { display: block; }
@keyframes vkd-spin { to { transform: rotate(360deg); } }

/* ══════ MODALS ══════ */
#vkd-root .vkd-modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100000; opacity: 0; pointer-events: none;
  transition: opacity .2s; padding: 16px;
}
#vkd-root .vkd-modal-back.on { opacity: 1; pointer-events: all; }
#vkd-root .vkd-modal {
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); padding: 28px 32px;
  width: 100%; max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transform: translateY(8px); transition: transform .2s;
}
#vkd-root .vkd-modal-back.on .vkd-modal { transform: translateY(0); }
#vkd-root .vkd-modal h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
#vkd-root .vkd-modal p  { font-size: 12px; color: var(--text2); margin-bottom: 18px; }
#vkd-root .vkd-modal .fg { margin-bottom: 0; }
#vkd-root .vkd-modal-btns { display: flex; gap: 10px; margin-top: 18px; }
#vkd-root .vkd-modal-btns .btn-primary,
#vkd-root .vkd-modal-btns .btn-secondary { flex: 1; }

/* ══════ APP ══════ */
#vkd-root #vkd-app { display: none; }
#vkd-root #vkd-app.on { display: block; }

#vkd-root .topnav {
  display: flex; align-items: stretch; background: var(--bg);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); flex-wrap: wrap;
}
#vkd-root .nav-brand {
  padding: 10px 24px; display: flex; align-items: center; gap: 10px;
  border-right: 1px solid var(--border); white-space: nowrap;
}
#vkd-root .nav-brand-dot  { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
#vkd-root .nav-brand-text { font-size: 15px; font-weight: 600; color: var(--text); }
#vkd-root .nav-brand-sub  { font-size: 11px; color: var(--text3); }
#vkd-root .nav-tabs { display: flex; flex: 1; }
#vkd-root .nav-tab {
  padding: 0 22px; height: 56px; display: flex; align-items: center;
  font-size: 13px; color: var(--text2); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .12s, background .12s; user-select: none;
}
#vkd-root .nav-tab:hover { color: var(--text); background: var(--bg2); }
#vkd-root .nav-tab.on    { color: var(--text); border-bottom-color: var(--blue); font-weight: 600; }
#vkd-root .nav-right {
  padding: 8px 20px; display: flex; align-items: center; gap: 10px;
  border-left: 1px solid var(--border); margin-left: auto;
}
#vkd-root .user-chip {
  display: flex; align-items: center; gap: 8px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px 4px 6px;
}
#vkd-root .user-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
#vkd-root .user-chip-text { font-size: 12px; color: var(--text2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vkd-root .badge { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 12px; font-size: 11px; color: var(--text2); }
#vkd-root .btn-logout {
  padding: 5px 12px; font-size: 11px; font-weight: 500; border-radius: var(--radius);
  background: transparent; color: var(--text2); border: 1px solid var(--border2);
  cursor: pointer; font-family: var(--font); transition: background .12s;
}
#vkd-root .btn-logout:hover { background: var(--bg2); }

#vkd-root .view { display: none; }
#vkd-root .view.on { display: block; }

/* ── ENTRY VIEW ── */
#vkd-root .entry-layout { display: grid; grid-template-columns: 1fr 360px; min-height: calc(100vh - 56px); }
#vkd-root .entry-form    { padding: 2rem; background: var(--bg); border-right: 1px solid var(--border); }
#vkd-root .entry-sidebar { padding: 2rem; background: var(--bg2); }
#vkd-root .section-title { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
#vkd-root .live-title    { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
#vkd-root .live-dot      { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: vkd-blink 1.6s infinite; }
@keyframes vkd-blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

#vkd-root .score-items { display: flex; flex-direction: column; gap: 8px; }
#vkd-root .si {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#vkd-root .si-left { flex: 1; min-width: 0; }
#vkd-root .si-label  { font-size: 12px; color: var(--text2); }
#vkd-root .si-weight { font-size: 10px; color: var(--text3); margin-top: 1px; }
#vkd-root .bar-track { height: 4px; background: var(--bg3); border-radius: 2px; margin-top: 6px; overflow: hidden; }
#vkd-root .bar-fill  { height: 100%; border-radius: 2px; width: 0%; transition: width .35s ease, background .35s; background: var(--blue); }
#vkd-root .si-val    { font-size: 20px; font-weight: 600; min-width: 44px; text-align: right; color: var(--text3); transition: color .2s; }
#vkd-root .si-overall { border-radius: var(--radius-lg); padding: 14px 16px; margin-top: 4px; transition: background .3s, border-color .3s; }
#vkd-root .si-overall .si-label { font-size: 13px; font-weight: 600; color: var(--text); }
#vkd-root .si-overall .si-val   { font-size: 28px; }
#vkd-root .sidebar-note { font-size: 11px; color: var(--text3); margin-top: 16px; line-height: 1.6; }

#vkd-root .cat-wrap, #vkd-root .addable-wrap { display: flex; gap: 8px; align-items: stretch; }
#vkd-root .cat-wrap select { flex: 1; }
#vkd-root .btn-cat-add {
  padding: 0 14px; font-size: 18px; font-weight: 300; line-height: 1;
  border-radius: var(--radius); background: var(--blue-bg); color: var(--blue);
  border: 1px solid rgba(24,95,165,0.3); cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s; flex-shrink: 0; white-space: nowrap;
}
#vkd-root .btn-cat-add:hover { background: rgba(24,95,165,0.18); }

#vkd-root .btn-row { display: flex; gap: 10px; margin-top: 20px; }
#vkd-root .btn-primary {
  padding: 10px 24px; font-size: 13px; font-weight: 600; border-radius: var(--radius);
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  font-family: var(--font); transition: opacity .15s, transform .1s;
}
#vkd-root .btn-primary:hover  { opacity: 0.88; }
#vkd-root .btn-primary:active { transform: scale(0.98); }
#vkd-root .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
#vkd-root .btn-secondary {
  padding: 10px 18px; font-size: 13px; border-radius: var(--radius);
  background: transparent; color: var(--text2); border: 1px solid var(--border2);
  cursor: pointer; font-family: var(--font); transition: background .12s;
}
#vkd-root .btn-secondary:hover { background: var(--bg2); }
#vkd-root .btn-edit-sm {
  padding: 4px 10px; font-size: 11px; border-radius: var(--radius);
  background: transparent; color: var(--text2); border: 1px solid var(--border2);
  cursor: pointer; font-family: var(--font); margin-right: 4px;
}
#vkd-root .btn-edit-sm:hover { background: var(--bg2); }
#vkd-root .btn-del-sm {
  padding: 4px 10px; font-size: 11px; border-radius: var(--radius);
  background: transparent; color: var(--red); border: 1px solid rgba(163,45,45,0.35);
  cursor: pointer; font-family: var(--font);
}
#vkd-root .btn-del-sm:hover { background: var(--red-bg); }

/* ── COMPARE VIEW ── */
#vkd-root .compare-bar {
  padding: 14px 24px; background: var(--bg); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
#vkd-root .compare-bar label { font-size: 12px; color: var(--text2); white-space: nowrap; font-weight: 500; }
#vkd-root .compare-bar select {
  font-size: 13px; padding: 8px 12px; border-radius: var(--radius);
  border: 1px solid var(--border2); background: var(--bg); color: var(--text);
  min-width: 240px; font-family: var(--font);
}
#vkd-root .compare-bar select:focus { outline: none; border-color: var(--blue); }
#vkd-root .compare-hint { font-size: 12px; color: var(--text3); }
#vkd-root .compare-body { padding: 24px; }
#vkd-root .no-data { text-align: center; padding: 5rem 1rem; color: var(--text3); font-size: 14px; }
#vkd-root .item-heading   { margin-bottom: 6px; }
#vkd-root .item-heading h2{ font-size: 20px; font-weight: 600; color: var(--text); }
#vkd-root .item-heading p { font-size: 12px; color: var(--text2); margin-top: 3px; }
#vkd-root .kpi-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 16px 0 24px; }
#vkd-root .kpi { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
#vkd-root .kpi-l { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
#vkd-root .kpi-v { font-size: 20px; font-weight: 600; color: var(--text); margin-top: 4px; }

#vkd-root .vendor-cards { display: flex; flex-direction: column; gap: 12px; }
#vkd-root .vc { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; position: relative; }
#vkd-root .vc.best { border-color: #639922; border-width: 1.5px; }
#vkd-root .best-tag { position: absolute; top: -1px; right: 16px; background: #639922; color: #EAF3DE; font-size: 10px; font-weight: 600; padding: 3px 12px; border-radius: 0 0 8px 8px; letter-spacing: 0.04em; }
#vkd-root .vc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#vkd-root .vc-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
#vkd-root .vc-name  { font-size: 15px; font-weight: 600; color: var(--text); }
#vkd-root .vc-cat   { font-size: 11px; color: var(--text2); margin-top: 3px; }
#vkd-root .vc-overall { margin-left: auto; text-align: right; }
#vkd-root .vc-ov-val   { font-size: 28px; font-weight: 700; line-height: 1; }
#vkd-root .vc-ov-label { font-size: 10px; color: var(--text3); margin-top: 3px; }
#vkd-root .vc-facts  { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
#vkd-root .vc-fact   { background: var(--bg2); border-radius: var(--radius); padding: 8px 12px; }
#vkd-root .vc-fact-l { font-size: 10px; color: var(--text3); }
#vkd-root .vc-fact-v { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; }
#vkd-root .vc-scores  { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
#vkd-root .vc-score   { text-align: center; }
#vkd-root .vc-score-l { font-size: 9px; color: var(--text3); margin-bottom: 4px; }
#vkd-root .vc-score-v { display: block; padding: 5px 0; border-radius: 6px; font-size: 13px; font-weight: 600; }

/* ── ALL ENTRIES ── */
#vkd-root .all-top {
  padding: 16px 24px; background: var(--bg); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
#vkd-root .all-stats { display: flex; gap: 28px; }
#vkd-root .all-stat-v { font-size: 20px; font-weight: 600; color: var(--text); }
#vkd-root .all-stat-l { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
#vkd-root .tbl-wrap { overflow-x: auto; padding: 20px 24px; }
#vkd-root table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 1000px; background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
#vkd-root thead { background: var(--bg2); }
#vkd-root thead th { font-size: 10px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
#vkd-root tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
#vkd-root tbody tr:last-child { border-bottom: none; }
#vkd-root tbody tr:hover { background: var(--bg2); }
#vkd-root td { padding: 10px 12px; color: var(--text); white-space: nowrap; vertical-align: middle; }
#vkd-root .cat-tag { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; background: var(--blue-bg); color: var(--blue); }
#vkd-root .pill { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; min-width: 38px; text-align: center; }
#vkd-root .all-empty { text-align: center; padding: 3rem; color: var(--text3); font-size: 14px; }

/* ── TOAST ── */
#vkd-root .vkd-toast {
  position: fixed; bottom: 28px; right: 28px; padding: 10px 20px;
  border-radius: var(--radius); font-size: 13px; font-weight: 500; color: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 99999;
}
#vkd-root .vkd-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 780px) {
  #vkd-root .entry-layout { grid-template-columns: 1fr; }
  #vkd-root .entry-sidebar { border-top: 1px solid var(--border); }
  #vkd-root .kpi-strip { grid-template-columns: repeat(2,1fr); }
  #vkd-root .vc-scores { grid-template-columns: repeat(3,1fr); }
  #vkd-root .fg-row { grid-template-columns: 1fr; }
  #vkd-root .nav-brand-sub, #vkd-root .user-chip-text { display: none; }
  #vkd-root .nav-tab { padding: 0 14px; height: 48px; }
}

/* ══════════════════════════════════════════════════════
   1.3.0 — vendor master, portfolio rows, scorecards
   ══════════════════════════════════════════════════════ */

/* ── shared small buttons ── */
#vkd-root .btn-sm  { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
#vkd-root .btn-xs  { padding: 5px 10px; font-size: 11px; }
#vkd-root .btn-ghost {
  background: none; border: 1px dashed var(--border2); color: var(--text2);
  padding: 8px 14px; font-size: 12px; border-radius: var(--radius);
  cursor: pointer; font-family: var(--font); transition: border-color .15s, color .15s;
}
#vkd-root .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
#vkd-root .vkd-modal-wide { max-width: 620px; }
#vkd-root .vkd-modal textarea {
  font-size: 13px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border2); background: var(--bg); color: var(--text);
  width: 100%; font-family: var(--font); resize: vertical;
}
#vkd-root .vkd-modal textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,95,165,0.15);
}

/* ── Add Rates: vendor picker ── */
#vkd-root .vendor-pick { display: flex; gap: 10px; align-items: flex-start; }
#vkd-root .vendor-pick select {
  font-size: 13px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border2); background: var(--bg); color: var(--text);
  width: 100%; font-family: var(--font);
}
#vkd-root .vendor-pick select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,95,165,0.15);
}

#vkd-root .vendor-inherit {
  display: none; margin-top: 14px; padding: 14px 16px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); gap: 22px; flex-wrap: wrap;
}
#vkd-root .vendor-inherit.on { display: flex; }
#vkd-root .vi-item { display: flex; flex-direction: column; gap: 3px; }
#vkd-root .vi-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
#vkd-root .vi-v { font-size: 14px; font-weight: 600; color: var(--text); }
#vkd-root .vi-note { flex-basis: 100%; font-size: 11px; color: var(--text3); border-top: 1px solid var(--border); padding-top: 9px; }

/* ── Add Rates: repeatable item rows ── */
#vkd-root .rows-head,
#vkd-root .item-row {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 0.9fr 34px;
  gap: 8px; align-items: center;
}
#vkd-root .rows-head { margin-bottom: 6px; }
#vkd-root .rh {
  font-size: 10px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
#vkd-root .item-row { margin-bottom: 8px; }
#vkd-root .item-row input,
#vkd-root .item-row select {
  font-size: 13px; padding: 9px 10px; border-radius: var(--radius);
  border: 1px solid var(--border2); background: var(--bg); color: var(--text);
  width: 100%; font-family: var(--font); min-width: 0;
}
#vkd-root .item-row input:focus,
#vkd-root .item-row select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,95,165,0.15);
}
#vkd-root .item-row.row-bad input,
#vkd-root .item-row.row-bad select { border-color: var(--red); }
#vkd-root .row-del {
  width: 30px; height: 34px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg2); color: var(--text3);
  cursor: pointer; font-size: 13px; line-height: 1;
}
#vkd-root .row-del:hover { color: var(--red); border-color: var(--red); }
#vkd-root .rows-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }

/* ── Vendors grid ── */
#vkd-root .all-top-actions { display: flex; gap: 10px; align-items: center; }
#vkd-root .all-top-actions input[type="search"] {
  font-size: 13px; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--border2); background: var(--bg); color: var(--text);
  font-family: var(--font); min-width: 200px;
}
#vkd-root .all-top-actions input[type="search"]:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,95,165,0.15);
}

#vkd-root .vendor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px; padding: 20px 24px;
}
#vkd-root .vg-card {
  position: relative; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#vkd-root .vg-card:hover {
  border-color: var(--blue); box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px);
}
#vkd-root .vg-flag {
  position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--amber); background: var(--amber-bg);
  padding: 2px 8px; border-radius: 20px;
}
#vkd-root .vg-top { display: flex; align-items: center; gap: 11px; }
#vkd-root .vg-avatar {
  width: 38px; height: 38px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
#vkd-root .vg-id   { flex: 1; min-width: 0; }
#vkd-root .vg-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vkd-root .vg-sub  { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vkd-root .vg-score { text-align: right; }
#vkd-root .vg-ov   { font-size: 20px; font-weight: 700; line-height: 1.1; }
#vkd-root .vg-ov-l { font-size: 10px; color: var(--text3); }
#vkd-root .vg-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
#vkd-root .vg-facts div { display: flex; flex-direction: column; gap: 2px; }
#vkd-root .vg-facts span   { font-size: 10px; color: var(--text3); }
#vkd-root .vg-facts strong { font-size: 13px; font-weight: 600; }

/* ── Vendor detail ── */
#vkd-root .vd-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px;
}
#vkd-root .vd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#vkd-root #vendorDetailBody { padding: 20px 24px 40px; }
#vkd-root .vd-card {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px; flex-wrap: wrap;
}
#vkd-root .vd-id { display: flex; align-items: center; gap: 14px; }
#vkd-root .vd-avatar {
  width: 48px; height: 48px; border-radius: 12px; background: var(--blue-bg); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
#vkd-root .vd-name { font-size: 18px; font-weight: 700; }
#vkd-root .vd-flag {
  font-size: 10px; font-weight: 600; text-transform: uppercase; vertical-align: middle;
  color: var(--amber); background: var(--amber-bg); padding: 2px 8px; border-radius: 20px;
}
#vkd-root .vd-meta { font-size: 12px; color: var(--text2); margin-top: 3px; }
#vkd-root .vd-ov {
  text-align: center; border: 1px solid; border-radius: var(--radius-lg); padding: 10px 20px; min-width: 108px;
}
#vkd-root .vd-ov-v { font-size: 26px; font-weight: 700; line-height: 1.1; }
#vkd-root .vd-ov-l { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; }
#vkd-root .vd-scores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 14px;
}
#vkd-root .vd-note {
  margin-top: 14px; font-size: 12px; color: var(--text2);
  background: var(--amber-bg); border: 1px solid rgba(133,79,11,0.25);
  border-radius: var(--radius); padding: 10px 14px;
}
#vkd-root .rank-best {
  font-size: 11px; font-weight: 600; color: var(--green);
  background: var(--green-bg); padding: 2px 8px; border-radius: 20px;
}
#vkd-root .rank-solo { font-size: 11px; color: var(--text3); }
#vkd-root .vendor-link { color: var(--blue); text-decoration: none; }
#vkd-root .vendor-link:hover { text-decoration: underline; }
#vkd-root .vc-foot {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  #vkd-root .rows-head { display: none; }
  #vkd-root .item-row {
    grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 12px; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2);
  }
  #vkd-root .item-row .ir-item { grid-column: 1 / -1; }
  #vkd-root .item-row .ir-x { grid-column: 1 / -1; text-align: right; }
  #vkd-root .row-del { width: 100%; }
  #vkd-root .vendor-pick { flex-wrap: wrap; }
  #vkd-root .vendor-grid { grid-template-columns: 1fr; padding: 16px; }
  #vkd-root .vd-card { flex-direction: column; align-items: flex-start; }
}

#vkd-root .rh-num, #vkd-root .ir-num input { text-align: right; }
#vkd-root .rh-item, #vkd-root .rh-cat, #vkd-root .rh-x { text-align: left; }
#vkd-root .ir-cat select, #vkd-root .ir-num, #vkd-root .ir-item { min-width: 0; }

/* winner row in All Entries */
#vkd-root tr.row-best td { background: var(--green-bg); }
#vkd-root tr.row-best td:first-child { box-shadow: inset 3px 0 0 var(--green); }
#vkd-root .rank-best { display: inline-block; margin-left: 6px; }