:root {
  --bg: #0f1419;
  --surface: #1a2332;
  --surface2: #243044;
  --border: #2d3a4f;
  --text: #e8eef7;
  --muted: #8b9bb4;
  --accent: #3d8bfd;
  --accent2: #5eead4;
  --danger: #f87171;
  --ok: #4ade80;
  --warn: #fbbf24;
  --radius: 14px;
  --touch: 48px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad-x: max(16px, env(safe-area-inset-left));
  --pad-x-r: max(16px, env(safe-area-inset-right));
  --footer-h: calc(132px + env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
header.app-bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15,20,25,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: max(12px, env(safe-area-inset-top)) var(--pad-x-r) 12px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
header h1 { font-size: 1.1rem; margin: 0; font-weight: 700; letter-spacing: .02em; }
header .tag { font-size: .72rem; color: var(--accent2); font-weight: 600; margin-top: 2px; }
main {
  padding: 14px var(--pad-x-r) calc(var(--footer-h) + 16px) var(--pad-x);
  max-width: 720px;
  margin: 0 auto;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.card h2 { margin: 0 0 12px; font-size: 1rem; color: var(--accent2); }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
label {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin: 0 0 6px;
  font-weight: 600;
}
/* 16px+ prevents iOS zoom-on-focus */
input, select, textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { min-height: 100px; resize: vertical; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
button, .btn {
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
button.ghost, a.ghost { background: transparent; }
a.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border, #2d3a4f); color: var(--text, #e8eef7);
  text-decoration: none; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
a.ghost:hover { text-decoration: none; opacity: 0.9; }
button:active { opacity: .88; transform: scale(.98); }
.cap-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg);
}
.cap-item .cap-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  flex-wrap: wrap;
}
.cap-item strong { font-size: .95rem; }
.muted { color: var(--muted); font-size: .85rem; }
.empty-state {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(36,48,68,.35);
  color: var(--muted);
}
.empty-state strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 6px;
}
.empty-state p { margin: 0 0 14px; font-size: .9rem; line-height: 1.45; }
#preview {
  font-family: var(--mono);
  font-size: .8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 45vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #0a0e14;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 10px;
}
#validation {
  font-size: .9rem;
  padding: 12px 14px;
  border-radius: 10px;
  margin-top: 4px;
  line-height: 1.45;
  word-break: break-word;
}
#validation.ok { background: rgba(74,222,128,.14); color: var(--ok); border: 1px solid rgba(74,222,128,.35); }
#validation.bad { background: rgba(248,113,113,.14); color: var(--danger); border: 1px solid rgba(248,113,113,.4); }
#validation .val-title { font-weight: 700; margin-bottom: 8px; display: block; }
#validation ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}
#validation li {
  margin-bottom: 6px;
  font-size: .88rem;
  color: inherit;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto;
  min-height: var(--touch);
  padding: 10px 16px;
  font-size: .9rem;
  white-space: nowrap;
}
.tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-actions {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(15,20,25,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 12px var(--pad-x-r) calc(12px + env(safe-area-inset-bottom)) var(--pad-x);
  display: flex;
  gap: 10px;
  justify-content: stretch;
  flex-wrap: wrap;
  z-index: 30;
  max-width: 720px;
  margin: 0 auto;
}
.footer-actions button {
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
  font-size: .85rem;
  padding: 12px 8px;
}
@media (min-width: 480px) {
  :root { --footer-h: calc(72px + env(safe-area-inset-bottom)); }
  .footer-actions button {
    flex: 1 1 0;
    font-size: .9rem;
  }
}
button.accent2 {
  background: rgba(94,234,212,.16);
  border-color: var(--accent2);
  color: var(--accent2);
}
.report-row { margin-top: 10px; }
.projection-row { margin-top: 10px; }
.toast {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: var(--surface2);
  border: 1px solid var(--accent2);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: .9rem;
  z-index: 40;
  display: none;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.toast.show { display: block; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 10px; line-height: 1.4; }
dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(96vw, 440px);
  width: 100%;
  background: transparent;
  color: var(--text);
}
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog .card { margin: 0; max-height: min(85dvh, 640px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.import-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: var(--touch);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
}
@media (min-width: 640px) {
  .footer-actions { left: 50%; transform: translateX(-50%); width: 100%; }
}

/* ---- Website Agentifier ---- */
.warn-banner {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: var(--warn);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0 0 14px;
}
.warn-banner code {
  font-size: 0.82rem;
  color: var(--accent2);
}
.opt { font-weight: 400; color: var(--muted); text-transform: none; }
.ag-error {
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-weight: 600;
}
.ag-proposal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.ag-proposal h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--text);
}
.ag-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.ag-block h4 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ag-cap {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
}
.ag-cap:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.ag-cap .conf {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(61, 139, 253, 0.18);
  color: var(--accent);
  margin-left: 6px;
}
.ag-evidence {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(36, 48, 68, 0.5);
  border-left: 3px solid var(--accent2);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  word-break: break-word;
}
.ag-flag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin: 2px 4px 2px 0;
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.35);
}
#agPaste { min-height: 160px; }

/* ---- Discover (local semantic) ---- */
.disc-sub {
  margin: 22px 0 8px;
  font-size: 0.95rem;
  color: var(--accent2);
}
.disc-results { margin-top: 14px; }
.disc-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 10px;
}
.disc-hit { margin-bottom: 12px; }
.disc-caps {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.disc-cap-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid rgba(45, 58, 79, 0.55);
}
.disc-cap-row:last-child { border-bottom: none; }
.disc-score {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.14);
  color: var(--accent2);
  margin-left: 6px;
}
.disc-score-main {
  background: rgba(61, 139, 253, 0.18);
  color: var(--accent);
  font-size: 0.85rem;
  margin-left: 8px;
}
.trust-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid transparent;
  text-transform: lowercase;
}
.trust-verified {
  background: rgba(74, 222, 128, 0.14);
  color: var(--ok);
  border-color: rgba(74, 222, 128, 0.4);
}
.trust-partial {
  background: rgba(251, 191, 36, 0.14);
  color: var(--warn);
  border-color: rgba(251, 191, 36, 0.4);
}
.trust-unverified {
  background: rgba(139, 155, 180, 0.14);
  color: var(--muted);
  border-color: rgba(139, 155, 180, 0.35);
}
.trust-revoked {
  background: rgba(248, 113, 113, 0.14);
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.4);
}
.trust-sample {
  outline: 1px dashed var(--warn);
}
.reg-list { margin-top: 4px; }
.disc-cap-body {
  font-size: 0.92rem;
  line-height: 1.45;
  word-break: break-word;
}
.disc-cap-body p { margin: 0 0 10px; }
#discQuery { min-height: var(--touch); }

/* ---- Execute (dry-run → authz → simulate) ---- */
.exec-sub {
  margin: 20px 0 8px;
  font-size: 0.95rem;
  color: var(--accent2);
}
.exec-meta {
  font-size: 0.85rem;
  margin: -4px 0 12px;
  word-break: break-word;
}
.exec-inputs .field { margin-bottom: 12px; }
.exec-plan-box,
.exec-grant-box,
.exec-receipt-box {
  margin-top: 12px;
  padding: 12px;
  background: rgba(36, 48, 68, 0.55);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sim-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.16);
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.45);
  margin-right: 8px;
  vertical-align: middle;
}
.exec-fp {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--muted);
}
.exec-fingerprint {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  word-break: break-all;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--accent2);
  margin-bottom: 10px;
}
.exec-plan-json,
.exec-receipt {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.exec-grant-status {
  font-size: 0.92rem;
  margin-bottom: 8px;
  word-break: break-word;
}
.exec-grant-status.valid { color: var(--ok); }
.exec-grant-status.invalid { color: var(--danger); }
.exec-countdown-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.exec-countdown {
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--accent);
  min-width: 5ch;
}
.exec-countdown.expired { color: var(--danger); }
.exec-audit {
  margin-top: 10px;
}
.exec-audit-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: rgba(26, 35, 50, 0.8);
  font-size: 0.85rem;
}
.exec-audit-item .stage {
  font-weight: 700;
  color: var(--accent2);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.exec-audit-item .ts {
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--mono);
}
.exec-audit-item code {
  font-size: 0.7rem;
  word-break: break-all;
}
#execEntity, #execCap { min-height: var(--touch); }

.audit-sep-banner { margin-top: 8px; }
.audit-import-status {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(26, 35, 50, 0.8);
  font-size: 0.9rem;
  word-break: break-word;
}
.audit-import-status.pass {
  border-color: var(--ok, #3dd68c);
  color: var(--ok, #3dd68c);
}
.audit-import-status.fail {
  border-color: var(--danger);
  color: var(--danger);
}
.audit-import-status.untrusted {
  border-color: var(--accent2, #f0b429);
  color: var(--accent2, #f0b429);
}
.audit-verify-detail {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  font-family: var(--mono);
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 220px;
  overflow: auto;
}
.exec-audit-item .hash {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  word-break: break-all;
}
#auditPaste { min-height: 120px; font-family: var(--mono); font-size: 16px; }
#fileAuditImport { min-height: var(--touch); }


/* ---- Adapters · OpenAPI ---- */
.adapters-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.adapters-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--accent2);
  font-weight: 700;
}
.adapters-row { margin-top: 8px; }
.oas-preview {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 0.85rem;
}
.oas-preview-head { margin-bottom: 8px; }
.oas-cap-list {
  margin: 0;
  padding-left: 1.1rem;
}
.oas-cap-list li { margin-bottom: 4px; }


/* ---- Guided demo ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
button.ghost.accent-demo {
  color: var(--accent2);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 10px;
  min-height: var(--touch);
  white-space: nowrap;
}
.demo-hints {
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid var(--accent2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.demo-hints-list {
  margin: 0 0 8px;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}
.demo-hints-list li { margin-bottom: 6px; }
.demo-hints-list .done { color: var(--ok); text-decoration: line-through; opacity: 0.85; }
.demo-hints-list .current { color: var(--accent2); font-weight: 700; }
@media (max-width: 420px) {
  button.ghost.accent-demo { font-size: 0.72rem; padding: 8px 8px; max-width: 9.5rem; white-space: normal; line-height: 1.2; }
}

/* ---- v0.1.2 Assess pipeline + PWA polish ---- */
.assess-row { margin-bottom: 4px; }
button.assess-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}
.ag-assess-progress {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(61, 139, 253, .08);
}
.assess-steps {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.assess-steps li {
  flex: 1 1 auto;
  min-width: 5.5rem;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
}
.assess-steps li.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(61, 139, 253, .12);
}
.assess-steps li.done {
  border-color: var(--ok, #4ade80);
  color: var(--ok, #4ade80);
}
.assess-steps li.fail {
  border-color: var(--hold, #f87171);
  color: var(--hold, #f87171);
}
.assess-status { margin: 0; font-size: .85rem; }
.footer-actions button.assess-primary {
  flex: 1 1 100%;
  order: -1;
}
@media (min-width: 480px) {
  .footer-actions button.assess-primary {
    flex: 1 1 0;
    order: 0;
  }
}

/* ---- v0.1.3 Semantic primitives mapping ---- */
.prim-table-wrap { margin-top: 8px; }
.prim-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.prim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.prim-table th,
.prim-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.prim-table th {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.prim-table tr:last-child td { border-bottom: none; }
.prim-table .prim-id { font-size: 0.82rem; word-break: break-all; }
.prim-table .prim-label { margin-top: 4px; }
.prim-table select.prim-select {
  min-height: 48px;
  width: 100%;
  max-width: 12rem;
  font-size: 16px; /* iOS zoom guard */
  border-radius: 10px;
  padding: 10px 12px;
}
.prim-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(94, 234, 212, 0.12);
  color: var(--accent2);
  border: 1px solid rgba(94, 234, 212, 0.35);
  vertical-align: middle;
}


/* ---- v0.1.4 Relationships dimension ---- */
.rel-list-wrap { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.rel-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
}
.rel-fields { display: flex; flex-direction: column; gap: 10px; }
.rel-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.rel-field input,
.rel-field select {
  min-height: 48px;
  font-size: 16px; /* iOS zoom guard */
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.rel-type-custom { margin-top: 6px; }
.rel-row-actions { margin-top: 10px; }
.rel-sub { margin: 18px 0 8px; font-size: 1rem; color: var(--accent2); }
.rel-graph {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rel-graph-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rel-graph-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.rel-graph-item:last-child { border-bottom: none; }
.rel-node {
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; max-width: 100%;
  word-break: break-word;
}
.rel-node-self {
  background: rgba(61, 139, 253, 0.15);
  color: var(--accent);
  border: 1px solid rgba(61, 139, 253, 0.35);
}
.rel-node-target {
  background: rgba(94, 234, 212, 0.12);
  color: var(--accent2);
  border: 1px solid rgba(94, 234, 212, 0.35);
}
.rel-edge { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); flex: 1 1 auto; min-width: 72px; }
.rel-edge-line { flex: 1; height: 2px; background: var(--border); min-width: 12px; }
.rel-edge-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: #243044; white-space: nowrap;
}
.rel-graph-note { font-size: 0.8rem; color: var(--muted); }
.rel-graph-url { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.rel-graph-empty { margin: 0; }
@media (min-width: 640px) {
  .rel-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .rel-field:nth-child(1),
  .rel-field:nth-child(2) { grid-column: span 1; }
}

/* ---- State / Policies editors (v0.1.5) ---- */
.state-list-wrap, .pol-list-wrap { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.state-row, .pol-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.state-fields, .pol-fields { display: flex; flex-direction: column; gap: 10px; }
.state-field, .pol-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.85rem; color: var(--muted);
}
.state-field input, .state-field select,
.pol-field input, .pol-field textarea {
  min-height: 48px; font-size: 16px; border-radius: 10px;
  border: 1px solid var(--border); background: #121a24; color: var(--text);
  padding: 10px 12px; width: 100%;
}
.pol-field textarea { min-height: 72px; resize: vertical; }
.state-fresh-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--muted);
}
.state-fresh-meta code { font-size: 0.75rem; word-break: break-all; }
.state-row-actions, .pol-row-actions { margin-top: 10px; }
.state-overall {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px dashed var(--border); font-size: 0.85rem;
}
.state-stale { color: var(--warn, #fbbf24); font-weight: 600; }
.state-fresh-ok { color: var(--ok, #4ade80); font-weight: 600; }
.exec-policies-box {
  margin: 8px 0 12px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(94, 234, 212, 0.06);
}
.exec-policies-box ul { margin: 8px 0 0; padding-left: 1.2rem; }
.exec-policies-box li { margin-bottom: 6px; font-size: 0.9rem; }
.exec-policies-box .pol-label { font-weight: 700; color: var(--accent2); }
@media (min-width: 640px) {
  .state-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .state-field-span2 { grid-column: span 2; }
}

/* ---- Trust dimension editor (v0.1.6) ---- */
.trust-evidence-wrap { margin: 8px 0 12px; }
.trust-ev-row {
  background: var(--surface2, #243044);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.trust-ev-fields { display: grid; gap: 10px; }
.trust-ev-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.trust-ev-field input, .trust-ev-field select, .trust-ev-field textarea {
  font-weight: 400; color: var(--text); min-height: var(--touch);
  font-size: 16px;
}
.trust-ev-row-actions { margin-top: 10px; }
.trust-verified-warn {
  border-left: 4px solid var(--danger, #f87171);
  background: rgba(248, 113, 113, 0.1);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.trust-summary { margin-top: 8px; font-size: 0.88rem; }
.trust-sub { font-size: 0.95rem; margin: 14px 0 6px; color: var(--accent2); }
.trust-evidence_recorded {
  background: rgba(251, 191, 36, 0.14);
  color: var(--warn);
  border-color: rgba(251, 191, 36, 0.4);
}
.trust-human_attested {
  background: rgba(94, 234, 212, 0.14);
  color: var(--accent2);
  border-color: rgba(94, 234, 212, 0.45);
}
#trustTabBadge .trust-badge { margin-left: 8px; }

/* ---- Knowledge dimension editor (v0.1.8) ---- */
.know-list-wrap { margin: 8px 0 12px; }
.know-row {
  background: var(--surface2, #243044);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.know-row.know-proposal {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: inset 3px 0 0 var(--warn, #fbbf24);
}
.know-fields { display: grid; gap: 10px; }
.know-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.know-field input, .know-field select, .know-field textarea {
  font-weight: 400; color: var(--text); min-height: var(--touch);
  font-size: 16px;
}
.know-field textarea { min-height: 72px; resize: vertical; }
.know-row-actions { margin-top: 10px; }
.know-summary { margin-top: 8px; font-size: 0.88rem; }
.know-tab-badge {
  display: inline-block; margin-left: 8px; font-size: 0.75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: #243044; color: var(--accent2);
  vertical-align: middle;
}
.know-proposal-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; background: rgba(251, 191, 36, 0.15);
  color: var(--warn, #fbbf24); margin-left: 6px;
}


/* ---- Assessment History + Compare + Share pack (v0.2.4) ---- */
.history-list { margin-top: 8px; }
.hist-item { margin-bottom: 12px; }
.hist-actions { margin-top: 10px; flex-wrap: wrap; }
.hist-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}
.hist-badge.sample {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.45);
}
.hist-badge.live {
  background: rgba(61, 139, 253, 0.15);
  color: var(--accent);
  border: 1px solid rgba(61, 139, 253, 0.45);
}
.hist-prov { margin-top: 4px; font-size: 0.82rem; word-break: break-word; }
.hist-storage-note { margin: 0.35rem 0 0.5rem; }

.hist-select-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  min-height: var(--touch);
}
.hist-select-label input.hist-select {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.hist-compare-toolbar { margin: 8px 0 4px; flex-wrap: wrap; }
.history-compare {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
}
.hist-compare-head h3 { margin: 0 0 6px; font-size: 1.05rem; }
.hist-compare-head h4, .hist-compare-delta h4 { margin: 12px 0 6px; font-size: .95rem; }
.hist-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 640px) {
  .hist-compare-grid { grid-template-columns: 1fr 1fr; }
}
.hist-compare-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.hist-compare-col-title {
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 4px;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hist-compare-field { margin-top: 10px; }
.hist-compare-field > span.muted { display: block; font-size: .78rem; margin-bottom: 4px; }
.hist-cap-list, .hist-diff-list {
  margin: 4px 0 0;
  padding-left: 1.1rem;
  font-size: .9rem;
}
.hist-diff-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 4px;
  vertical-align: middle;
}
.hist-diff-added .hist-diff-tag {
  background: rgba(74, 222, 128, 0.15);
  color: var(--ok);
  border: 1px solid rgba(74, 222, 128, 0.4);
}
.hist-diff-removed .hist-diff-tag {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.4);
}
.hist-diff-changed .hist-diff-tag {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warn);
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.hist-diff-changed-val strong {
  color: var(--warn);
}
.card-inset {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Share pack (v0.2.4) — keep footer taps usable on narrow phones */
.footer-actions #btnSharePack2 {
  flex: 1 1 auto;
  min-width: 4.5rem;
}
.hist-actions [data-hist-share] {
  font-weight: 600;
}


/* ---- v0.3.22 mobile polish: tab scroll cues + sticky CTA + print ---- */
.tabs {
  scroll-padding-inline: 12px;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent);
}
.tabs button {
  scroll-snap-align: center;
}
.tabs {
  scroll-snap-type: x proximity;
}
a.ghost {
  min-height: var(--touch);
  min-width: var(--touch);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.footer-actions {
  /* keep sticky CTA above iOS home indicator; already uses safe-area */
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
@media (max-width: 420px) {
  .footer-actions button {
    min-height: var(--touch);
    font-size: 0.82rem;
  }
}

@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  header.app-bar,
  .tabs,
  .footer-actions,
  .toast,
  .no-print,
  dialog {
    display: none !important;
  }
  main {
    padding: 12mm !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .card {
    break-inside: avoid;
    background: #fff !important;
    border: 1px solid #333 !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .card h2, .muted, label, .hint {
    color: #000 !important;
  }
  #preview, pre, code {
    background: #f5f5f5 !important;
    color: #000 !important;
    border-color: #999 !important;
    max-height: none !important;
  }
  a { color: #000 !important; text-decoration: underline; }
}


/* ---- v0.3.25 Seven-dimensions checklist + knowledge/trust packs ---- */
.dim-checklist { margin-top: 16px; padding: 12px; border: 1px solid var(--border, #333); border-radius: 10px; background: var(--surface-2, rgba(255,255,255,0.03)); }
.dim-checklist-title { margin: 0 0 6px; font-size: 1rem; }
.dim-checklist-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.dim-checklist-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 0.9rem; }
.dim-checklist-list li.dim-present { border-left: 3px solid #3ecf8e; }
.dim-checklist-list li.dim-missing { border-left: 3px solid #e6a23c; opacity: 0.95; }
.dim-checklist-summary { margin: 6px 0 0; font-size: 0.88rem; }
.dim-badge { font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; background: #2a2a2a; }
.dim-badge.ok { background: #1a3d2c; color: #8df0b4; }
.dim-badge.gap { background: #3d2e1a; color: #ffd089; }