/* ============================================================================
   VIIERA COMMAND CONSOLE  (styles/viiera-console.css)
   Dense operational admin surface — mounts inside Divonci World.
   Reuses tokens + .panel/.btn/.seg/.tbl/.dw-drawer. Adds console-only chrome.
   ========================================================================== */

/* ── console top strip (active profile + status + global actions) ──────────── */
.vc-bar {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6);
  border: 1px solid var(--hairline-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow-1);
}
.vc-bar .vc-crest {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: none; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--violet-bright), var(--violet-deep)); box-shadow: var(--glow-violet);
}
.vc-bar .vc-id { min-width: 0; }
.vc-bar .vc-id .nm { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.vc-bar .vc-id .sl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-bar .vc-spacer { flex: 1 1 40px; }
.vc-bar .vc-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.vc-bar .vc-actions .btn { padding: 8px 13px; font-size: 12.5px; }

/* status pill (draft / staging / live / archived) */
.vc-status {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--hairline-2);
}
.vc-status .led { width: 7px; height: 7px; border-radius: 99px; box-shadow: 0 0 7px currentColor; }
.vc-status[data-st="live"]     { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); box-shadow: var(--glow-gold); }
.vc-status[data-st="staging"]  { color: var(--state-focus); border-color: color-mix(in srgb, var(--state-focus) 40%, transparent); background: var(--focus-dim); }
.vc-status[data-st="draft"]    { color: var(--state-caution); border-color: color-mix(in srgb, var(--state-caution) 40%, transparent); background: var(--caution-dim); }
.vc-status[data-st="archived"] { color: var(--ink-3); background: var(--standby-dim); }
.vc-status[data-st="published"]{ color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); }

/* ── agent switcher ────────────────────────────────────────────────────────── */
.vc-agentbar { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); overflow-x: auto; padding-bottom: 4px; }
.vc-agentbar::-webkit-scrollbar { height: 6px; }
.vc-agentbar::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 99px; }
.vc-agent {
  flex: 1 1 0; min-width: 150px; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--hairline-2);
  background: var(--panel-2); color: var(--ink); transition: all var(--dur-fast); position: relative;
}
.vc-agent:hover { border-color: var(--hairline-3); background: var(--panel-3); }
.vc-agent.on { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--panel-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 18px color-mix(in srgb, var(--c) 22%, transparent); }
.vc-agent .av { width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; background-size: cover; background-position: center;
  background-color: var(--graphite); border: 1px solid var(--hairline-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); }
.vc-agent.on .av { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.vc-agent-id { min-width: 0; display: grid; gap: 2px; }
.vc-agent-id .nm { font-family: var(--font-display); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vc-agent.on .vc-agent-id .nm { color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.vc-agent-id .dm { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.vc-primary { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-on-gold); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); padding: 2px 5px; border-radius: var(--r-xs); }
.vc-agent-led { width: 7px; height: 7px; border-radius: 99px; flex: none; box-shadow: 0 0 7px currentColor; margin-left: auto; }

/* scope chip (per-agent rules) */
.vc-scope { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: var(--r-xs); color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); white-space: nowrap; }
.vc-scope i { width: 6px; height: 6px; border-radius: 99px; background: var(--c); box-shadow: 0 0 6px var(--c); flex: none; }

/* policy / governance banners */
.vc-policy-note { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.5; color: var(--ink-2);
  padding: 11px var(--s-6); border-bottom: 1px solid var(--hairline); }
.vc-policy-note .glyph { flex: none; }
.vc-policy-note.gold { color: color-mix(in srgb, var(--gold-bright) 60%, var(--ink)); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.vc-policy-note.gold .glyph { color: var(--gold-bright); }
.vc-policy-note b { color: var(--ink); font-weight: 600; }

/* viiera-gate note inside confirm modal */
.vc-gate-note { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4;
  color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); border-radius: var(--r-sm); padding: 8px 11px; text-align: left; }
.vc-gate-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  margin-left: 7px; padding: 2px 5px; border-radius: var(--r-xs); background: rgba(0,0,0,0.22); }

@media (max-width: 760px) {
  .vc-agent { min-width: 130px; }
  .vc-agent-id .dm { display: none; }
}
.vc-tabs { display: flex; gap: 2px; padding: 4px; margin-bottom: var(--s-6); overflow-x: auto;
  background: var(--graphite); border: 1px solid var(--hairline-2); border-radius: var(--r-md); }
.vc-tabs::-webkit-scrollbar { height: 0; }
.vc-tab {
  flex: 1 1 auto; min-width: max-content; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 9px 14px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: none; color: var(--ink-3); transition: all var(--dur-fast);
}
.vc-tab:hover { color: var(--ink); }
.vc-tab .glyph { width: 15px; height: 15px; }
.vc-tab.on { background: var(--panel-3); color: var(--ink); box-shadow: var(--shadow-inset); }
.vc-tab .vc-tab-n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); padding: 1px 6px; border-radius: 99px; border: 1px solid var(--hairline-2); }
.vc-tab.on .vc-tab-n { color: var(--violet-ink); border-color: color-mix(in srgb, var(--violet-bright) 40%, transparent); }

/* ── toolbar inside panels (search + filters + create) ─────────────────────── */
.vc-toolbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.vc-input {
  background: var(--graphite); border: 1px solid var(--hairline-2); border-radius: var(--r-sm);
  color: var(--ink); padding: 7px 11px; font-size: 12.5px; font-family: var(--font-ui);
}
.vc-input:focus { outline: none; border-color: var(--hairline-3); box-shadow: var(--glow-soft); }
.vc-input::placeholder { color: var(--ink-4); }
select.vc-input { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23807A95' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px; }

/* ── data tables (console) ─────────────────────────────────────────────────── */
.vc-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vc-tbl th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); padding: 10px var(--s-5); border-bottom: 1px solid var(--hairline-2);
  position: sticky; top: 0; background: var(--panel); z-index: 1; }
.vc-tbl td { padding: 11px var(--s-5); border-bottom: 1px solid var(--hairline); color: var(--ink-2); vertical-align: top; }
.vc-tbl tr:last-child td { border-bottom: none; }
.vc-tbl tbody tr { cursor: pointer; transition: background var(--dur-fast); }
.vc-tbl tbody tr:hover { background: var(--panel-2); }
.vc-tbl tbody tr.vc-row-critical { background: color-mix(in srgb, var(--state-crisis) 7%, transparent); }
.vc-tbl tbody tr.vc-row-critical:hover { background: color-mix(in srgb, var(--state-crisis) 12%, transparent); }
.vc-tbl td.mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--violet-ink); }
.vc-tbl td.num { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); text-align: center; width: 1%; }
.vc-tbl .vc-disabled td { opacity: 0.45; }
.vc-tbl .vc-cellwrap { max-width: 0; }
.vc-tbl .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── chips: rule type · control type · severity · evaluation ───────────────── */
.vc-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: var(--r-xs);
  border: 1px solid transparent; white-space: nowrap; }
.vc-chip[data-k="must"]      { color: var(--state-active);  background: var(--active-dim);  border-color: color-mix(in srgb, var(--state-active) 34%, transparent); }
.vc-chip[data-k="never"]     { color: var(--state-crisis);  background: var(--crisis-dim);  border-color: color-mix(in srgb, var(--state-crisis) 34%, transparent); }
.vc-chip[data-k="should"]    { color: var(--state-focus);   background: var(--focus-dim);   border-color: color-mix(in srgb, var(--state-focus) 34%, transparent); }
.vc-chip[data-k="style"]     { color: var(--ultraviolet);   background: var(--active-dim);  border-color: color-mix(in srgb, var(--ultraviolet) 30%, transparent); }
.vc-chip[data-k="fallback"]  { color: var(--state-caution); background: var(--caution-dim); border-color: color-mix(in srgb, var(--state-caution) 34%, transparent); }
.vc-chip[data-k="banned"]    { color: var(--state-crisis);  background: var(--crisis-dim);  border-color: color-mix(in srgb, var(--state-crisis) 34%, transparent); }
.vc-chip[data-k="avoid"]     { color: var(--state-caution); background: var(--caution-dim); border-color: color-mix(in srgb, var(--state-caution) 34%, transparent); }
.vc-chip[data-k="preferred"] { color: var(--state-clear);   background: var(--clear-dim);   border-color: color-mix(in srgb, var(--state-clear) 34%, transparent); }
.vc-chip[data-k="required"]  { color: var(--gold-bright);   background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.vc-chip[data-k="passed"]    { color: var(--state-clear);   background: var(--clear-dim);   border-color: color-mix(in srgb, var(--state-clear) 34%, transparent); }
.vc-chip[data-k="flagged"]   { color: var(--state-caution); background: var(--caution-dim); border-color: color-mix(in srgb, var(--state-caution) 34%, transparent); }
.vc-chip[data-k="failed"]    { color: var(--state-crisis);  background: var(--crisis-dim);  border-color: color-mix(in srgb, var(--state-crisis) 34%, transparent); }

/* severity dot scale */
.vc-sev { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; text-transform: capitalize; }
.vc-sev i { width: 8px; height: 8px; border-radius: 99px; box-shadow: 0 0 7px currentColor; flex: none; }
.vc-sev[data-s="critical"] { color: var(--state-crisis); }
.vc-sev[data-s="high"]     { color: #FF8A5B; }
.vc-sev[data-s="medium"]   { color: var(--state-caution); }
.vc-sev[data-s="low"]      { color: var(--ink-3); }

/* enabled toggle pill */
.vc-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: none; background: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vc-switch { width: 30px; height: 17px; border-radius: 99px; background: var(--graphite); border: 1px solid var(--hairline-2);
  position: relative; transition: all var(--dur-fast); flex: none; }
.vc-switch::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 12px; height: 12px; border-radius: 99px;
  background: var(--ink-3); transition: all var(--dur-base) var(--ease-out); }
.vc-toggle.on .vc-switch { background: color-mix(in srgb, var(--state-clear) 30%, transparent); border-color: color-mix(in srgb, var(--state-clear) 50%, transparent); }
.vc-toggle.on .vc-switch::after { left: 15px; background: var(--state-clear); box-shadow: 0 0 8px var(--state-clear); }
.vc-toggle.on { color: var(--state-clear); }

/* intent / category code token */
.vc-key { font-family: var(--font-mono); font-size: 11px; color: var(--violet-ink); background: var(--active-dim);
  padding: 2px 7px; border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--violet-bright) 22%, transparent); white-space: nowrap; }

/* ── editor drawer fields ──────────────────────────────────────────────────── */
.vc-form { display: grid; gap: var(--s-6); }
.vc-field { display: grid; gap: 7px; }
.vc-field > label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.vc-field .hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); line-height: 1.5; }
.vc-field input[type="text"], .vc-field input[type="number"], .vc-field textarea, .vc-field select {
  width: 100%; background: var(--graphite); border: 1px solid var(--hairline-2); border-radius: var(--r-sm);
  color: var(--ink); padding: 9px 12px; font-size: 13px; font-family: var(--font-ui); box-sizing: border-box;
}
.vc-field textarea { resize: vertical; line-height: 1.55; min-height: 84px; }
.vc-field textarea.code, .vc-field input.code { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
.vc-field input:focus, .vc-field textarea:focus, .vc-field select:focus { outline: none; border-color: var(--hairline-3); box-shadow: var(--glow-soft); }
.vc-field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23807A95' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.vc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.vc-field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.vc-jsonwrap { position: relative; }
.vc-json-bad { border-color: color-mix(in srgb, var(--state-crisis) 55%, transparent) !important; }
.vc-json-err { color: var(--state-crisis); font-family: var(--font-mono); font-size: 10.5px; margin-top: 4px; }

/* segmented choice for rule_type / control_type inside the form */
.vc-choice { display: flex; gap: 4px; flex-wrap: wrap; }
.vc-choice button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--hairline-2); background: var(--graphite);
  color: var(--ink-3); cursor: pointer; transition: all var(--dur-fast); }
.vc-choice button:hover { color: var(--ink); border-color: var(--hairline-3); }
.vc-choice button.on { color: var(--ink); border-color: var(--hairline-3); background: var(--panel-3); box-shadow: var(--shadow-inset); }

/* drawer footer action bar */
.vc-drawer-foot { position: sticky; bottom: 0; display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-6) var(--s-7); margin: var(--s-7) calc(-1 * var(--s-7)) calc(-1 * var(--s-7));
  border-top: 1px solid var(--hairline-2); background: linear-gradient(0deg, var(--obsidian) 70%, transparent); }
.vc-drawer-foot .vc-spacer { flex: 1; }

/* read-only key/value strip (profile meta, version meta) */
.vc-kv { display: grid; grid-template-columns: 140px 1fr; gap: 2px var(--s-6); align-items: baseline; }
.vc-kv dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 7px 0; }
.vc-kv dd { margin: 0; padding: 7px 0; font-size: 13px; color: var(--ink); }

/* code block (system prompt / template preview / JSON view) */
.vc-code { font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap;
  background: var(--void); border: 1px solid var(--hairline-2); border-radius: var(--r-md); padding: var(--s-5) var(--s-6);
  max-height: 320px; overflow: auto; }
.vc-code .tok { color: var(--violet-ink); }

/* preview render (intent template with sample vars) */
.vc-preview { background: linear-gradient(180deg, var(--active-dim), transparent); border: 1px solid color-mix(in srgb, var(--violet-bright) 28%, transparent);
  border-radius: var(--r-md); padding: var(--s-6); font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.vc-preview .fill { color: var(--violet-ink); font-weight: 600; }

/* log response excerpt + banned-phrase highlight */
.vc-log-resp { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.vc-banned-hit { color: #ffd2d7; background: var(--crisis-dim); border-bottom: 1px solid var(--state-crisis);
  padding: 0 3px; border-radius: 2px; font-weight: 600; }
.vc-log-banner { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--state-crisis); margin-top: 6px; }

/* ── desktop confirm modal ─────────────────────────────────────────────────── */
.vc-modal-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(4,4,9,0.66); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--s-7); animation: scrimIn var(--dur-base) ease; }
.vc-modal { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--hairline-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: var(--s-8); text-align: center; animation: vcModalIn var(--dur-base) var(--ease-out); }
@keyframes vcModalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.vc-modal-ic { width: 52px; height: 52px; border-radius: var(--r-lg); display: grid; place-items: center; margin: 0 auto var(--s-5);
  background: var(--graphite); border: 1px solid var(--hairline-2); }
.vc-modal-ic.danger { box-shadow: var(--glow-crisis); border-color: transparent; color: var(--state-crisis); }
.vc-modal-ic.gold   { box-shadow: var(--glow-gold); border-color: transparent; color: var(--gold-bright); }
.vc-modal-t { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.vc-modal-d { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-bottom: var(--s-7); max-width: 34ch; margin-left: auto; margin-right: auto; }
.vc-modal-act { display: flex; gap: var(--s-4); }
.vc-modal-act .btn { flex: 1; justify-content: center; }

/* ── toast ─────────────────────────────────────────────────────────────────── */
.vc-toasts { position: fixed; right: var(--s-7); bottom: var(--s-7); z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.vc-toast { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink);
  background: var(--panel-3); border: 1px solid var(--hairline-2); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: 11px 15px; animation: vcToastIn var(--dur-base) var(--ease-out); max-width: 360px; }
.vc-toast .led { width: 8px; height: 8px; border-radius: 99px; box-shadow: 0 0 8px currentColor; flex: none; }
.vc-toast[data-tone="ok"]   { border-color: color-mix(in srgb, var(--state-clear) 40%, transparent); }
.vc-toast[data-tone="err"]  { border-color: color-mix(in srgb, var(--state-crisis) 45%, transparent); }
.vc-toast[data-tone="gold"] { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
@keyframes vcToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* small inline action buttons in tables */
.vc-iconbtn { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--hairline-2); background: var(--panel-2);
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: all var(--dur-fast); flex: none; }
.vc-iconbtn:hover { color: var(--ink); border-color: var(--hairline-3); background: var(--panel-3); }
.vc-iconbtn.danger:hover { color: #ffd2d7; border-color: color-mix(in srgb, var(--state-crisis) 45%, transparent); background: var(--crisis-dim); }
.vc-rowacts { display: flex; gap: 6px; justify-content: flex-end; }

/* variable token chips (template vars / contains) */
.vc-vars { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-var { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); background: var(--graphite);
  border: 1px solid var(--hairline-2); border-radius: var(--r-xs); padding: 2px 7px; }
.vc-var.bad { color: #ffd2d7; border-color: color-mix(in srgb, var(--state-crisis) 40%, transparent); background: var(--crisis-dim); }
.vc-var.good { color: var(--state-clear); border-color: color-mix(in srgb, var(--state-clear) 34%, transparent); background: var(--clear-dim); }

/* ── responsive: collapse tables to cards on narrow viewports ──────────────── */
@media (max-width: 760px) {
  .vc-bar { gap: var(--s-4); }
  .vc-bar .vc-spacer { flex-basis: 100%; height: 0; }
  .vc-bar .vc-actions { width: 100%; }
  .vc-bar .vc-actions .btn { flex: 1; justify-content: center; }
  .vc-field-row, .vc-field-row.three { grid-template-columns: 1fr; }
  .vc-kv { grid-template-columns: 1fr; gap: 0; }
  .vc-kv dt { padding-bottom: 0; }
  .vc-kv dd { padding-top: 2px; padding-bottom: 10px; }

  /* card-ify console tables */
  .vc-tbl, .vc-tbl tbody, .vc-tbl tr, .vc-tbl td { display: block; width: auto; }
  .vc-tbl thead { display: none; }
  .vc-tbl tr { border: 1px solid var(--hairline-2); border-radius: var(--r-md); margin: 0 var(--s-5) var(--s-4); padding: var(--s-3) 0; background: var(--panel-2); }
  .vc-tbl tr:hover { background: var(--panel-2); }
  .vc-tbl td { border-bottom: 1px solid var(--hairline); padding: 8px var(--s-5); }
  .vc-tbl tr td:last-child { border-bottom: none; }
  .vc-tbl td::before { content: attr(data-th); display: block; font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
  .vc-tbl .vc-cellwrap { max-width: none; }
  .vc-tbl td.num { text-align: left; width: auto; }
  .vc-rowacts { justify-content: flex-start; }
}