* {
  box-sizing: border-box;
}

:root {
  --vc-accent: #75e8c0;
  --vc-accent-strong: #1f8f68;
  --vc-accent-ink: #176247;
  --vc-accent-soft: #ecf8f2;
  --vc-accent-border: #b8e3d1;
}

body.vc-body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f2f8f5;
  color: #10261f;
}

.vc-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px clamp(14px, 2vw, 28px);
}

.vc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid #d6e8df;
  border-radius: 12px;
  padding: 10px 14px;
  background: #ffffff;
}

.vc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vc-logo {
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--vc-accent-strong) 0%, var(--vc-accent) 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.vc-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vc-brand-text span {
  color: #5a7468;
  font-size: 13px;
}

.vc-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vc-nav a {
  text-decoration: none;
  color: #1d5b47;
  border: 1px solid #c8ddd2;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
}

.vc-nav a.active {
  background: var(--vc-accent-strong);
  border-color: var(--vc-accent-strong);
  color: #ffffff;
}

.vc-context {
  margin-top: 12px;
  background: #ffffff;
  border: 1px solid #d6e8df;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vc-main-layout {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.vc-main-layout.with-sidebar {
  grid-template-columns: 260px minmax(0, 1fr);
}

.vc-sidebar {
  display: grid;
  gap: 12px;
  align-content: start;
}

.vc-sidebar-card {
  background: #ffffff;
  border: 1px solid #d6e8df;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.vc-sidebar-kicker {
  font-size: 11px;
  color: #4b6358;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
}

.vc-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f2e24;
}

.vc-sidebar-subtitle {
  font-size: 12px;
  color: #5d766a;
}

.vc-sidebar-meta {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.vc-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.vc-sidebar-list li {
  margin: 0;
}

.vc-sidebar-list a,
.vc-sidebar-meta a {
  color: #176247;
  text-decoration: none;
  font-size: 13px;
}

.vc-sidebar-list a.active,
.vc-sidebar-meta a.active {
  color: #0c5d3d;
  font-weight: 700;
}

.vc-main-content {
  min-width: 0;
}

.mode-badge {
  margin-left: 8px;
  font-size: 12px;
  background: var(--vc-accent-soft);
  color: var(--vc-accent-ink);
  border: 1px solid var(--vc-accent-border);
  border-radius: 999px;
  padding: 2px 8px;
}

.flash {
  margin-top: 12px;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.flash.success {
  background: #e7f7ee;
  border: 1px solid #a7d8bd;
  color: #174f2f;
}

.flash.error {
  background: #fdecef;
  border: 1px solid #f3bac4;
  color: #7f1d33;
}

.vc-main {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.panel {
  background: #ffffff;
  border: 1px solid #d6e8df;
  border-radius: 12px;
  padding: 16px;
}

.panel.narrow {
  max-width: 540px;
}

.panel h1,
.panel h2 {
  margin: 0 0 8px;
}

.muted {
  margin: 0 0 12px;
  color: #5c7568;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.kpi-card {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-card span {
  color: #5c7568;
  font-size: 13px;
}

.kpi-card strong {
  font-size: 22px;
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.filters-row label,
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  border: 1px solid #b8d6c6;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  color: #1b4a3a;
  background: #ffffff;
}

textarea {
  resize: vertical;
}

button,
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vc-accent-strong);
  background: var(--vc-accent-strong);
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}

.btn-link {
  background: #ffffff;
  color: var(--vc-accent-strong);
}

.table-wrap {
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1000px;
}

.data-table.compact {
  min-width: 720px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid #dfebe5;
  padding: 8px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

.score-pill,
.readiness-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid transparent;
}

.score-strong {
  color: #0e6240;
  background: #e7f8ef;
  border-color: #afe2c7;
}

.score-medium {
  color: #7a5b00;
  background: #fff6da;
  border-color: #edd38f;
}

.score-weak {
  color: #7f1d33;
  background: #fdecef;
  border-color: #f3bac4;
}

.badge-ready {
  color: #0e6240;
  background: #e7f8ef;
  border-color: #afe2c7;
}

.badge-promising {
  color: #1f7757;
  background: #ecf8f2;
  border-color: #b7e3d0;
}

.badge-needs-work {
  color: #7a5b00;
  background: #fff6da;
  border-color: #edd38f;
}

.badge-not-ready {
  color: #7f1d33;
  background: #fdecef;
  border-color: #f3bac4;
}

.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.empty-state {
  color: #5c7568;
  padding: 8px 0;
}

.messages-filter-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.messages-filter-links a {
  text-decoration: none;
  color: #1d5b47;
  border: 1px solid #c8ddd2;
  border-radius: 999px;
  padding: 3px 10px;
}

.messages-filter-links a.active {
  background: var(--vc-accent-strong);
  border-color: var(--vc-accent-strong);
  color: #ffffff;
}

.mail-editor {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.mail-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.mail-editor-toolbar button {
  border: 1px solid #c8ddd2;
  background: #ffffff;
  color: #1d5b47;
  border-radius: 6px;
  padding: 4px 8px;
  min-width: 30px;
  font-size: 12px;
}

.mail-editor-toolbar input[type="color"] {
  width: 30px;
  height: 28px;
  border: 1px solid #c8ddd2;
  border-radius: 6px;
  padding: 2px;
  background: #ffffff;
}

.mail-editor-surface {
  min-height: 120px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.45;
  outline: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.identity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.identity-grid.compact {
  margin-top: 8px;
}

.identity-grid > div {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.identity-grid strong {
  font-size: 13px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.subscore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.subscore-item {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
}

.subscore-track {
  margin-top: 6px;
  height: 8px;
  border-radius: 999px;
  background: #eaf3ee;
  overflow: hidden;
}

.subscore-track span {
  display: block;
  height: 100%;
  background: var(--vc-accent-strong);
}

.doc-list,
.note-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.doc-list li,
.note-list li {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.form-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.demo-box {
  margin-top: 12px;
  border: 1px dashed #b8d6c6;
  border-radius: 10px;
  padding: 10px;
  background: #f5fbf8;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.summary-grid article {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.summary-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.label {
  font-size: 12px;
  color: #5c7568;
}

.metric-pill,
.grade-pill,
.posture-pill,
.cue-pill,
.stage-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid transparent;
  font-size: 12px;
}

.metric-pill {
  border-color: #d4e6dc;
  background: #f4faf7;
  color: #245947;
}

.grade-a {
  background: #e8f7ef;
  border-color: #afe2c7;
  color: #165c45;
}

.grade-b {
  background: #e7f8ef;
  border-color: #afe2c7;
  color: #0e6240;
}

.grade-c {
  background: #f1f9e9;
  border-color: #cce8b3;
  color: #3f6f1f;
}

.grade-d {
  background: #fff4e5;
  border-color: #f2d0a1;
  color: #8f4b00;
}

.grade-e {
  background: #fdecef;
  border-color: #f3bac4;
  color: #7f1d33;
}

.score-band-exceptional {
  background: #e8f7ef;
  border-color: #b4e2c6;
  color: #0c5d3d;
}

.score-band-very-good {
  background: #e8f7ef;
  border-color: #b4e2c6;
  color: #0c5d3d;
}

.score-band-good {
  background: #eef8e8;
  border-color: #cde5b7;
  color: #3e6d24;
}

.score-band-attention {
  background: #fff6e7;
  border-color: #f4d8a8;
  color: #8a5600;
}

.score-band-attention-strong {
  background: #ffeddc;
  border-color: #f5c48a;
  color: #934200;
}

.score-band-risk-light {
  background: #fdeff1;
  border-color: #f2c4cc;
  color: #8f2740;
}

.score-band-risk {
  background: #f9e0e4;
  border-color: #e7b0ba;
  color: #7c1127;
}

.score-band-risk-strong {
  background: #f4d5da;
  border-color: #de9ca8;
  color: #640b1e;
}

.score-band-critical {
  background: #1f242d;
  border-color: #1f242d;
  color: #ffffff;
}

.posture-strong {
  background: #e8f7ef;
  border-color: #b4e2c6;
  color: #0c5d3d;
}

.posture-fundable {
  background: #e8f7ef;
  border-color: #b4e2c6;
  color: #165c45;
}

.posture-monitor {
  background: #fff6e7;
  border-color: #f4d8a8;
  color: #8a5600;
}

.posture-promising {
  background: #fff0df;
  border-color: #f5cca0;
  color: #8c4c00;
}

.posture-too-early {
  background: #fdecef;
  border-color: #f3bac4;
  color: #7f1d33;
}

.tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-pill {
  text-decoration: none;
  border: 1px solid #c8ddd2;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #1d5b47;
  background: #ffffff;
}

.tab-pill.active {
  background: var(--vc-accent-strong);
  border-color: var(--vc-accent-strong);
  color: #ffffff;
}

.startup-tabbar {
  padding-top: 10px;
  padding-bottom: 10px;
}

.decision-cues {
  display: grid;
  gap: 8px;
}

.cue-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cue-pill {
  background: #edf8f2;
  border-color: #c4e5d7;
  color: #1d5b47;
}

.stage-status-strong {
  background: #e8f7ef;
  border-color: #b4e2c6;
  color: #0c5d3d;
}

.stage-status-plausible {
  background: #eaf7f1;
  border-color: #b7e3d0;
  color: #176247;
}

.stage-status-weak {
  background: #fff6e7;
  border-color: #f4d8a8;
  color: #8a5600;
}

.stage-status-not-supported {
  background: #fdecef;
  border-color: #f3bac4;
  color: #7f1d33;
}

.filters-row-axes {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.axis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.axis-card {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.axis-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.axis-head h3 {
  margin: 0;
  font-size: 16px;
}

.axis-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.axis-flag {
  margin: 0;
  color: #9a2f46;
  font-size: 13px;
}

.axis-deep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-size: 13px;
}

.why-now-strip {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.why-now-strip p {
  margin: 0;
}

.kawasaki-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kawa-card {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.kawa-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.kawa-head h3 {
  margin: 0;
}

.kawa-index {
  font-size: 12px;
  color: #2a6b54;
  border: 1px solid #c7dfd3;
  border-radius: 999px;
  padding: 2px 8px;
  background: #edf8f2;
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.kawa-sequential {
  gap: 12px;
}

.sequence-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.tri-column,
.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tri-column > div,
.three-col > article {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
  min-width: 0;
}

.contradiction-list {
  display: grid;
  gap: 10px;
}

.contradiction-item {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.contradiction-item.severity-low {
  border-left: 4px solid #7bb897;
}

.contradiction-item.severity-medium {
  border-left: 4px solid #f0ad4e;
}

.contradiction-item.severity-high {
  border-left: 4px solid #de7c5a;
}

.contradiction-item.severity-critical {
  border-left: 4px solid #c0392b;
}

@media (max-width: 980px) {
  .vc-main-layout.with-sidebar {
    grid-template-columns: 1fr;
  }

  .kpi-grid,
  .subscore-grid,
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .summary-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filters-row-axes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .axis-grid,
  .kawasaki-grid {
    grid-template-columns: 1fr;
  }
  .tri-column,
  .three-col {
    grid-template-columns: 1fr;
  }
  .why-now-strip {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
}

.auth-card {
  max-width: 860px;
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;
}

.split-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field-error {
  font-size: 12px;
  color: #b42318;
}

.auth-error {
  border-radius: 10px;
  border: 1px solid #f3bac4;
  background: #fdecef;
  color: #7f1d33;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 8px;
}

.vc-auth-switcher {
  display: grid;
  gap: 10px;
}

.vc-auth-switcher-title {
  margin: 0;
  font-size: 18px;
}

.vc-auth-switcher-subtitle {
  margin: 0;
  color: #5c7568;
  font-size: 13px;
}

.vc-auth-switcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vc-auth-switcher-item {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  background: #ffffff;
}

.vc-auth-switcher-item.active {
  border-color: #88d2b4;
  background: #eef8f3;
}

.vc-auth-switcher-item p {
  margin: 0;
  font-size: 13px;
  color: #325f4e;
}

.vc-auth-switcher-item .btn-link {
  width: 100%;
  justify-content: center;
  font-weight: 700;
}

.kf-2fa-box {
  border: 1px solid #d6e8df;
  border-radius: 10px;
  padding: 10px;
  background: #f5fbf8;
}

.kf-2fa-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.kf-2fa-app-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.kf-2fa-title {
  font-weight: 700;
  font-size: 14px;
  color: #1b4a3a;
}

.kf-2fa-text {
  font-size: 12px;
  color: #5c7568;
  line-height: 1.45;
}

.kf-2fa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
}

.kf-2fa-steps {
  font-size: 12px;
  color: #2a614f;
  display: grid;
  gap: 5px;
}

.kf-2fa-qr-wrap {
  border: 1px solid #c7dfd3;
  border-radius: 10px;
  background: #fff;
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.kf-2fa-qr {
  width: 220px;
  height: 220px;
  object-fit: contain;
}

.kf-2fa-qr-fallback {
  font-size: 12px;
  color: #6b7280;
}

.kf-2fa-manual {
  margin-top: 8px;
}

.kf-2fa-manual summary {
  cursor: pointer;
  font-size: 12px;
  color: #2a6b54;
}

.kf-2fa-manual-content {
  margin-top: 6px;
}

.kf-2fa-manual-label {
  font-size: 12px;
  color: #2b7158;
}

.kf-2fa-code {
  display: inline-block;
  margin-top: 4px;
  border: 1px solid #b8d6c6;
  border-radius: 8px;
  background: #eaf3ee;
  padding: 4px 8px;
  font-size: 12px;
  color: #1b4a3a;
}

.kf-2fa-code-important {
  font-weight: 700;
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  .split-two {
    grid-template-columns: 1fr;
  }

  .kf-2fa-grid {
    grid-template-columns: 1fr;
  }

  .vc-auth-switcher-grid {
    grid-template-columns: 1fr;
  }
}