:root {
  color-scheme: light;
  --ink: #183459;
  --ink-deep: #112a45;
  --ink-soft: #37526e;
  --muted: #667a88;
  --muted-light: #8a9aa4;
  --line: #dce6e8;
  --line-strong: #c9d8db;
  --paper: #ffffff;
  --canvas: #f4f7f8;
  --canvas-blue: #edf4f6;
  --brand: #087b7a;
  --brand-dark: #066563;
  --brand-deep: #075f62;
  --brand-soft: #e7f7f6;
  --brand-pale: #f2fbfa;
  --accent: #f2aa52;
  --accent-dark: #9d6829;
  --accent-soft: #fff5e8;
  --danger: #c95a55;
  --danger-soft: #fff0ef;
  --success: #2e9b70;
  --success-soft: #eaf8f1;
  --blue: #4a7fbe;
  --blue-soft: #eef4fb;
  --violet: #796db2;
  --violet-soft: #f1eff9;
  --shadow-sm: 0 8px 24px rgba(26, 60, 75, 0.06);
  --shadow-md: 0 18px 48px rgba(26, 60, 75, 0.1);
  --shadow-lg: 0 28px 80px rgba(18, 49, 66, 0.16);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --shell: min(1240px, calc(100vw - 48px));
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.deployment-preview-notice {
  align-items: center;
  background: #6f3f00;
  color: #fff7e8;
  display: flex;
  font-size: 0.82rem;
  gap: 1rem;
  justify-content: center;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.25rem;
  text-align: center;
}

.deployment-preview-notice strong {
  color: #fff;
  flex: 0 0 auto;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
}

@media (max-width: 720px) {
  .deployment-preview-notice {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
  }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select {
  font: inherit;
}

a {
  color: inherit;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
select {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid rgba(7, 154, 152, 0.28);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.section-shell {
  width: var(--shell);
  margin-inline: auto;
}

.preview-notice {
  width: var(--shell);
  margin: 18px auto 0;
  padding: 13px 16px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  border: 1px solid #e4c38f;
  border-radius: 12px;
  background: var(--accent-soft);
  color: #6b471d;
  font-size: 13px;
}

.preview-notice strong {
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-header {
  position: relative;
  z-index: 40;
  height: 76px;
  border-bottom: 1px solid rgba(220, 230, 232, 0.88);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.header-inner {
  width: var(--shell);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: var(--brand);
  box-shadow: 0 6px 14px rgba(7, 154, 152, 0.2);
  transform: rotate(-2deg);
}

.brand-mark i {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: #fff;
  transform: rotate(11deg);
}

.brand-mark i:nth-child(1) { height: 9px; }
.brand-mark i:nth-child(2) { height: 16px; }
.brand-mark i:nth-child(3) { height: 12px; }

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2.3px;
}

.brand-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.2px;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.quiet-link {
  position: relative;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.quiet-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: var(--brand);
  transition: right 180ms ease;
}

.quiet-link:hover {
  color: var(--brand-dark);
}

.quiet-link:hover::after {
  right: 0;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.button-primary {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 9px 22px rgba(7, 154, 152, 0.2);
}

.button-primary:hover:not(:disabled) {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 13px 28px rgba(7, 123, 122, 0.25);
}

.button-secondary,
.button-ghost {
  color: var(--ink);
  background: #fff;
  border-color: var(--line-strong);
}

.button-secondary:hover,
.button-ghost:hover {
  color: var(--brand-dark);
  border-color: #9fcac9;
  background: var(--brand-pale);
}

.button-light {
  color: var(--ink-deep);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 30px rgba(9, 32, 48, 0.2);
}

.button-light:hover {
  color: var(--brand-dark);
  box-shadow: 0 16px 36px rgba(9, 32, 48, 0.28);
}

.button-large {
  min-height: 52px;
  padding-inline: 22px;
  border-radius: 14px;
  font-size: 14px;
}

.button-full {
  width: 100%;
}

.eyebrow,
.kicker,
.question-section,
.side-card-label,
.mini-label {
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
}

.eyebrow > span {
  width: 22px;
  height: 1px;
  background: var(--brand);
}

.kicker-light {
  color: #8cddda;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer-inner {
  width: var(--shell);
  min-height: 170px;
  margin-inline: auto;
  padding-block: 42px;
  display: grid;
  grid-template-columns: 1fr auto minmax(260px, 0.7fr);
  align-items: start;
  gap: 44px;
}

.brand-footer .brand-mark {
  width: 29px;
  height: 29px;
  padding: 6px;
}

.footer-inner > div > p,
.footer-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.footer-inner nav {
  display: grid;
  gap: 10px;
}

.footer-inner nav a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.footer-inner nav a:hover {
  color: var(--brand-dark);
}

.footer-note {
  margin-top: 0;
}

/* Landing */

.hero {
  min-height: 670px;
  padding: 74px 0 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(470px, 0.92fr);
  align-items: center;
  gap: 70px;
}

.hero-copy h1 {
  max-width: 700px;
  margin: 0;
  color: var(--ink-deep);
  font-size: clamp(43px, 5vw, 68px);
  font-weight: 780;
  letter-spacing: -3.4px;
  line-height: 0.98;
}

.hero-copy h1 em,
.ai-copy h2 em,
.login-intro h1 em {
  color: var(--brand);
  font-style: normal;
}

.hero-lead {
  max-width: 650px;
  margin: 25px 0 30px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-assurances {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.hero-assurances > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.status-dot-green {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.hero-visual {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
}

.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}

.ambient-one {
  width: 350px;
  height: 350px;
  top: 2%;
  right: -4%;
  background: rgba(7, 154, 152, 0.12);
}

.ambient-two {
  width: 230px;
  height: 230px;
  bottom: -2%;
  left: 2%;
  background: rgba(242, 170, 82, 0.12);
}

.preview-card {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  padding: 26px;
  border: 1px solid rgba(201, 216, 219, 0.92);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-lg);
  transform: rotate(1.4deg);
}

.preview-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18px -17px -17px 18px;
  border-radius: inherit;
  border: 1px solid rgba(201, 216, 219, 0.7);
  background: rgba(255, 255, 255, 0.52);
}

.preview-topline,
.score-overview,
.domain-row > div:first-child,
.preview-finding,
.panel-heading,
.finding-tags,
.confidence-row,
.result-hero-inner,
.admin-panel-head,
.metric-head,
.table-footer,
.sessions-heading,
.table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.privacy-chip,
.model-chip,
.count-chip,
.locked-chip,
.risk-level,
.completion-label,
.admin-private-badge,
.mini-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.privacy-chip {
  padding: 6px 9px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 9px;
  font-weight: 800;
}

.privacy-chip > span {
  font-size: 7px;
}

.score-overview {
  justify-content: flex-start;
  gap: 20px;
  margin: 28px 0 25px;
}

.score-ring {
  --score: 38;
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  padding: 9px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--score) * 1%), #e7eef0 0);
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: #fff;
}

.score-ring > div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
}

.score-ring strong {
  color: var(--ink-deep);
  font-size: 27px;
  letter-spacing: -1px;
}

.score-ring span {
  color: var(--muted);
  font-size: 9px;
}

.risk-level {
  padding: 5px 8px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.risk-level-medium {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.score-overview h2 {
  margin: 8px 0 4px;
  color: var(--ink-deep);
  font-size: 17px;
}

.score-overview p,
.preview-finding p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.domain-bars {
  display: grid;
  gap: 13px;
}

.domain-row > div:first-child {
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
}

.domain-row strong {
  color: var(--ink);
}

.meter,
.progress-track,
.tiny-bar,
.tech-volume,
.confidence-meter {
  overflow: hidden;
  border-radius: 999px;
  background: #e9eff1;
}

.meter {
  height: 6px;
}

.meter i,
.progress-track i,
.tiny-bar i,
.tech-volume i,
.confidence-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.domain-row.warning .meter i { background: var(--accent); }
.domain-row.safe .meter i { background: var(--success); }

.preview-finding {
  justify-content: flex-start;
  gap: 12px;
  margin-top: 23px;
  padding: 14px;
  border: 1px solid #f1dfc7;
  border-radius: 14px;
  background: var(--accent-soft);
}

.finding-number {
  color: var(--accent-dark);
  font-size: 21px;
  font-weight: 300;
}

.preview-finding > div {
  flex: 1;
}

.preview-finding small {
  color: var(--accent-dark);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
}

.preview-finding strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 11px;
}

.preview-finding > span:last-child {
  color: var(--accent-dark);
}

.confidence-strip {
  border-block: 1px solid var(--line);
  background: #fff;
}

.confidence-inner {
  min-height: 112px;
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  align-items: center;
}

.confidence-inner > p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.confidence-inner > div {
  min-height: 54px;
  padding-inline: 26px;
  display: grid;
  align-content: center;
  border-left: 1px solid var(--line);
}

.confidence-inner strong {
  color: var(--ink-deep);
  font-size: 22px;
}

.confidence-inner span {
  color: var(--muted);
  font-size: 10px;
}

.section {
  padding-block: 105px;
}

.section-heading {
  margin-bottom: 42px;
}

.split-heading {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr;
  align-items: end;
  gap: 60px;
}

.section-heading h2,
.trust-copy h2,
.ai-copy h2,
.final-cta h2 {
  margin: 9px 0 0;
  color: var(--ink-deep);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -1.8px;
}

.split-heading > p,
.trust-copy > p,
.ai-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

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

.step-card {
  position: relative;
  min-height: 340px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.step-card.featured {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: #fff;
  transform: translateY(-10px);
  box-shadow: 0 22px 50px rgba(17, 42, 69, 0.2);
}

.step-index {
  position: absolute;
  top: 25px;
  right: 27px;
  color: #b7c3c9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.step-card.featured .step-index {
  color: #6e8398;
}

.step-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 24px;
  font-weight: 800;
}

.step-card.featured .step-icon {
  color: #8be2df;
  background: rgba(7, 154, 152, 0.16);
}

.step-card h3 {
  margin: 0 0 13px;
  color: var(--ink-deep);
  font-size: 19px;
}

.step-card.featured h3 {
  color: #fff;
}

.step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.step-card.featured p {
  color: #b9c7d2;
}

.step-meta {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.4px;
}

.step-card.featured .step-meta {
  border-color: rgba(255, 255, 255, 0.12);
  color: #8be2df;
}

.ai-feature {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 58px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.62fr);
  align-items: center;
  gap: 70px;
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 5% 0%, rgba(7, 154, 152, 0.28), transparent 33%),
    radial-gradient(circle at 75% 100%, rgba(72, 115, 144, 0.25), transparent 36%),
    var(--ink-deep);
  box-shadow: 0 28px 70px rgba(17, 42, 69, 0.2);
}

.ai-feature::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: 16%;
  top: -54%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.025), 0 0 0 110px rgba(255, 255, 255, 0.015);
}

.ai-copy,
.ai-gate-card {
  position: relative;
  z-index: 1;
}

.ai-lock-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8be2df;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.ai-lock-label > span {
  font-size: 16px;
}

.ai-copy h2 {
  max-width: 660px;
  color: #fff;
}

.ai-copy > p {
  max-width: 700px;
  margin-top: 24px;
  color: #b9c7d2;
  font-size: 13px;
}

.ai-requirements {
  margin: 32px 0 24px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.ai-requirements span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dce6ec;
  font-size: 10px;
  font-weight: 750;
}

.ai-requirements i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 226, 223, 0.35);
  border-radius: 50%;
  color: #8be2df;
  font-style: normal;
}

.ai-requirements b {
  flex: 1;
  max-width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #8fa4b4 !important;
  font-size: 10px !important;
}

.privacy-note > span {
  color: #8be2df;
}

.ai-gate-card {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
}

.gate-orbit {
  width: 54px;
  height: 54px;
  margin-bottom: 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 226, 223, 0.3);
  border-radius: 50%;
  color: #8be2df;
  background: rgba(7, 154, 152, 0.12);
  box-shadow: 0 0 0 8px rgba(7, 154, 152, 0.05);
  font-size: 23px;
}

.locked-chip {
  padding: 5px 8px;
  color: #8be2df;
  background: rgba(7, 154, 152, 0.14);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.ai-gate-card h3 {
  margin: 13px 0 15px;
  font-size: 21px;
}

.ai-gate-card ul {
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
  color: #c4d1da;
  font-size: 11px;
}

.ai-gate-card li::before {
  content: "✓";
  margin-right: 9px;
  color: #8be2df;
  font-weight: 900;
}

.ai-gate-card > small {
  display: block;
  margin-top: 12px;
  color: #8fa4b4;
  font-size: 9px;
  text-align: center;
}

.trust-section {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  align-items: center;
  gap: 100px;
}

.trust-copy > p {
  margin-top: 20px;
}

.trust-list {
  display: grid;
}

.trust-list article {
  padding: 24px 0;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.trust-list article:first-child {
  border-top: 1px solid var(--line);
}

.trust-list article > span {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
}

.trust-list strong {
  color: var(--ink-deep);
  font-size: 15px;
}

.trust-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.final-cta {
  color: #fff;
  background: var(--brand-deep);
}

.final-cta-inner {
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.final-cta h2 {
  color: #fff;
  font-size: clamp(30px, 4vw, 44px);
}

/* Questionnaire */

.questionnaire-page {
  min-height: 100vh;
  background: #f6f9f9;
}

.questionnaire-page .site-header {
  position: sticky;
  top: 0;
}

.questionnaire-page .site-footer,
.admin-page .site-footer,
.login-page .site-footer {
  display: none;
}

.save-state {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 15px;
  border-right: 1px solid var(--line);
}

.save-state > span:last-child {
  display: grid;
}

.save-state strong {
  color: var(--ink-soft);
  font-size: 10px;
}

.save-state small {
  color: var(--muted-light);
  font-size: 8px;
}

.save-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}

.save-state.saving .save-pulse {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: pulse 1s infinite;
}

.save-state.save-error .save-pulse {
  background: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}

.save-state.save-error strong {
  color: var(--danger);
}

@keyframes pulse {
  50% { transform: scale(0.75); opacity: 0.7; }
}

.questionnaire-shell {
  width: min(1500px, 100vw);
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 245px minmax(500px, 760px) minmax(270px, 330px);
  justify-content: center;
  gap: 0;
}

.question-nav {
  padding: 42px 28px;
  border-right: 1px solid var(--line);
  background: #fff;
}

.question-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.question-nav-head span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.1px;
}

.question-nav-head strong {
  color: var(--brand-dark);
  font-size: 11px;
}

.progress-track {
  height: 5px;
}

.section-steps {
  margin: 32px 0 36px;
  padding: 0;
  display: grid;
  list-style: none;
}

.section-steps li {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 12px;
  color: #93a2aa;
}

.section-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 35px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.section-steps li > span {
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 9px;
  font-weight: 900;
}

.section-steps li.done > span {
  color: #fff;
  border-color: var(--success);
  background: var(--success);
}

.section-steps li.active > span {
  color: var(--brand-dark);
  border: 2px solid var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 4px var(--brand-pale);
}

.section-steps li.active {
  color: var(--ink);
}

.section-steps li > div {
  padding-top: 2px;
  display: grid;
  gap: 4px;
}

.section-steps strong {
  font-size: 11px;
}

.section-steps small {
  color: var(--muted-light);
  font-size: 9px;
}

.local-save-card {
  padding: 15px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
}

.local-save-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.local-save-card strong {
  color: var(--ink);
  font-size: 10px;
}

.local-save-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.question-stage {
  padding: 46px 54px 60px;
  background: #fff;
}

.question-stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question-stage-top > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.question-count {
  padding-left: 13px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
}

.icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.icon-button:hover {
  color: var(--brand-dark);
  border-color: #a8cfce;
  background: var(--brand-pale);
}

.question-form {
  margin-top: 58px;
}

.question-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.question-form legend {
  max-width: 680px;
  margin: 0;
  color: var(--ink-deep);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -1.1px;
}

.question-context {
  max-width: 660px;
  margin: 15px 0 27px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.answer-options {
  display: grid;
  gap: 10px;
}

.answer-card {
  position: relative;
  min-height: 68px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.answer-card:hover {
  transform: translateY(-1px);
  border-color: #aad1d0;
  background: var(--brand-pale);
  box-shadow: 0 8px 18px rgba(7, 123, 122, 0.06);
}

.answer-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-pale);
  box-shadow: 0 0 0 2px rgba(7, 154, 152, 0.08);
}

.answer-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.radio-visual {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1.5px solid #b9c7cc;
  border-radius: 50%;
  background: #fff;
}

.answer-card input:checked + .radio-visual {
  border: 6px solid var(--brand);
}

.answer-card input:focus-visible + .radio-visual {
  outline: 3px solid rgba(7, 154, 152, 0.22);
  outline-offset: 3px;
}

.answer-copy {
  display: grid;
  gap: 4px;
}

.answer-copy strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.answer-copy small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.answer-check {
  opacity: 0;
  color: var(--brand);
  font-weight: 900;
  transition: opacity 160ms ease;
}

.answer-card:has(input:checked) .answer-check {
  opacity: 1;
}

.question-help {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: var(--brand-pale);
}

.question-help strong {
  color: var(--brand-dark);
  font-size: 11px;
}

.question-help p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.question-actions {
  margin-top: 36px;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.question-actions > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.keyboard-hint {
  color: var(--muted-light);
  font-size: 9px;
}

.question-side {
  padding: 42px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 1px solid var(--line);
  background: #f6f9f9;
}

.resume-card,
.next-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.resume-card h2,
.next-card h2 {
  margin: 10px 0 8px;
  color: var(--ink-deep);
  font-size: 15px;
  line-height: 1.35;
}

.resume-card p,
.next-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.resume-card > a {
  margin-top: 15px;
  display: inline-flex;
  gap: 7px;
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 850;
  text-decoration: none;
}

.restart-option {
  margin-top: 18px;
  padding-top: 15px;
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
}

.restart-option span,
.restart-option small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.restart-option a,
.side-data-request {
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.side-data-request {
  align-self: flex-start;
  margin-top: 2px;
}

.next-card {
  color: #fff;
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}

.next-card .side-card-label { color: #8be2df; }
.next-card h2 { color: #fff; }
.next-card p { color: #b7c5cf; }

.next-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #8be2df;
  background: rgba(7, 154, 152, 0.14);
}

.mini-requirements {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mini-requirements span {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #a9bbc7;
  font-size: 7px;
}

.side-privacy {
  padding: 0 5px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--muted-light);
  font-size: 8px;
  line-height: 1.55;
}

.side-privacy span {
  color: var(--brand);
}

/* Results */

.results-page {
  background: #f3f7f7;
}

.header-account,
.admin-user {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.header-account > span:last-child,
.admin-user > span:last-child {
  display: grid;
  gap: 2px;
}

.header-account strong,
.admin-user strong {
  color: var(--ink);
  font-size: 10px;
}

.header-account small,
.admin-user small {
  color: var(--muted);
  font-size: 8px;
}

.avatar-small,
.admin-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-size: 10px;
  font-weight: 900;
}

.result-hero {
  color: #fff;
  background:
    radial-gradient(circle at 78% 15%, rgba(7, 154, 152, 0.22), transparent 28%),
    var(--ink-deep);
}

.result-hero-inner {
  min-height: 260px;
  gap: 50px;
}

.completion-label {
  padding: 6px 10px;
  color: #8be2df;
  background: rgba(7, 154, 152, 0.14);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}

.completion-label i {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-deep);
  background: #8be2df;
  font-style: normal;
}

.result-hero h1 {
  margin: 16px 0 9px;
  font-size: clamp(35px, 5vw, 52px);
  letter-spacing: -2px;
  line-height: 1;
}

.result-hero p {
  max-width: 650px;
  margin: 0;
  color: #b7c5cf;
  font-size: 12px;
  line-height: 1.6;
}

.result-meta-card {
  min-width: 205px;
  padding: 17px 20px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
}

.result-meta-card span,
.result-meta-card small {
  color: #9fb0bd;
  font-size: 8px;
}

.result-meta-card strong {
  font-size: 13px;
  letter-spacing: 0.7px;
}

.results-layout {
  padding-block: 36px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 22px;
}

.results-main,
.results-side {
  display: grid;
  gap: 18px;
}

.results-side {
  position: sticky;
  top: 20px;
}

.result-panel-card,
.pdf-card,
.ai-result-card,
.expert-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.panel-heading {
  gap: 20px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h2 {
  margin: 5px 0 0;
  color: var(--ink-deep);
  font-size: 20px;
}

.model-chip,
.count-chip {
  padding: 6px 9px;
  color: var(--muted);
  background: var(--canvas);
  font-size: 8px;
  font-weight: 800;
}

.score-card-body {
  padding: 30px 0 28px;
  display: grid;
  grid-template-columns: 155px 1fr;
  align-items: center;
  gap: 30px;
}

.score-ring-large {
  width: 142px;
  height: 142px;
  padding: 11px;
}

.score-ring-large::before {
  inset: 11px;
}

.score-ring-large > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
}

.score-ring-large strong {
  font-size: 45px;
  letter-spacing: -2px;
}

.score-ring-large span {
  font-size: 10px;
}

.score-ring-large small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-align: center;
}

.score-summary h3 {
  max-width: 560px;
  margin: 12px 0 8px;
  color: var(--ink-deep);
  font-size: 19px;
  line-height: 1.38;
}

.score-summary > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.62;
}

.confidence-row {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 9px;
}

.confidence-row span {
  color: var(--muted);
}

.confidence-meter {
  width: 130px;
  height: 5px;
}

.confidence-row strong {
  color: var(--brand-dark);
}

.domain-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.domain-score-grid article {
  padding: 20px 17px 0;
  display: grid;
  grid-template-columns: 8px 1fr;
  align-items: start;
  gap: 10px;
  border-right: 1px solid var(--line);
}

.domain-score-grid article:first-child { padding-left: 0; }
.domain-score-grid article:last-child { border-right: 0; }

.domain-dot {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border-radius: 50%;
}

.domain-dot.teal { background: var(--brand); }
.domain-dot.amber { background: var(--accent); }
.domain-dot.blue { background: var(--blue); }
.domain-dot.green { background: var(--success); }

.domain-score-grid small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.domain-score-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-deep);
  font-size: 24px;
}

.domain-score-grid p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 8px;
}

.findings-list {
  display: grid;
}

.finding-row {
  position: relative;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 40px 1fr 50px;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.finding-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.finding-rank {
  color: #a9b8c0;
  font-size: 17px;
  font-weight: 350;
}

.finding-tags {
  justify-content: flex-start;
  gap: 6px;
}

.finding-tags span {
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--muted);
  background: var(--canvas);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.finding-row.high .finding-tags span:last-child {
  color: var(--danger);
  background: var(--danger-soft);
}

.finding-row.medium .finding-tags span:last-child {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.finding-row.low .finding-tags span:last-child {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.finding-row h3 {
  margin: 8px 0 5px;
  color: var(--ink-deep);
  font-size: 14px;
}

.finding-row p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.text-button {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  color: var(--brand-dark);
  background: transparent;
  font-size: 9px;
  font-weight: 850;
}

.finding-score {
  justify-self: end;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 13px;
}

.finding-row.high .finding-score { color: var(--danger); background: var(--danger-soft); }
.finding-row.medium .finding-score { color: var(--accent-dark); background: var(--accent-soft); }
.finding-row.low .finding-score { color: var(--brand-dark); background: var(--brand-soft); }

.timeline-grid {
  padding-top: 25px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timeline-grid article {
  padding: 0 20px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  border-right: 1px solid var(--line);
}

.timeline-grid article:first-child { padding-left: 0; }
.timeline-grid article:last-child { padding-right: 0; border-right: 0; }

.timeline-day {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 13px;
  font-weight: 900;
}

.timeline-grid small {
  color: var(--brand-dark);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.timeline-grid h3 {
  margin: 5px 0 8px;
  color: var(--ink-deep);
  font-size: 12px;
}

.timeline-grid ul {
  margin: 0;
  padding-left: 14px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.8;
}

.pdf-card,
.expert-card {
  text-align: center;
}

.pdf-preview {
  position: relative;
  width: 130px;
  height: 145px;
  margin: -7px auto 12px;
}

.paper-sheet {
  position: absolute;
  inset: 5px 13px 3px;
  padding: 16px 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(28, 65, 77, 0.12);
  transform: rotate(2deg);
}

.paper-back {
  inset: 12px 5px -2px 22px;
  background: var(--canvas-blue);
  transform: rotate(7deg);
}

.paper-brand {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.paper-brand span {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--brand);
}

.paper-sheet > i {
  width: 100%;
  height: 4px;
  margin-bottom: 5px;
  display: block;
  border-radius: 999px;
  background: #e7eef0;
}

.paper-sheet > i:nth-of-type(2) { width: 72%; }
.paper-sheet > i:nth-of-type(3) { width: 84%; }

.paper-chart {
  height: 42px;
  margin-top: 16px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  border-bottom: 1px solid var(--line);
}

.paper-chart b {
  width: 8px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
}

.paper-chart b:nth-child(1) { height: 14px; }
.paper-chart b:nth-child(2) { height: 29px; background: var(--accent); }
.paper-chart b:nth-child(3) { height: 21px; }
.paper-chart b:nth-child(4) { height: 34px; background: var(--blue); }

.pdf-card h2,
.ai-result-card h2,
.expert-card h2 {
  margin: 9px 0 8px;
  color: var(--ink-deep);
  font-size: 17px;
  line-height: 1.35;
}

.pdf-card > p,
.ai-result-card > p,
.expert-card > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.card-fineprint,
.ai-fineprint {
  display: block;
  margin-top: 11px;
  color: var(--muted-light);
  font-size: 8px;
  line-height: 1.5;
}

.ai-result-card {
  color: #fff;
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  box-shadow: 0 18px 42px rgba(17, 42, 69, 0.2);
}

.ai-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-spark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #8be2df;
  background: rgba(7, 154, 152, 0.15);
  font-size: 18px;
}

.ai-result-card h2 { color: #fff; }
.ai-result-card > p { color: #b7c5cf; }

.access-steps {
  margin: 18px 0;
  padding: 0;
  display: grid;
  gap: 13px;
  list-style: none;
}

.access-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 10px;
  opacity: 0.55;
}

.access-steps li.current,
.access-steps li.done {
  opacity: 1;
}

.access-steps li > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #a9bbc7;
  font-size: 8px;
  font-weight: 900;
}

.access-steps li.current > span,
.access-steps li.done > span {
  color: #8be2df;
  border-color: rgba(139, 226, 223, 0.4);
  background: rgba(7, 154, 152, 0.12);
}

.access-steps div {
  display: grid;
  gap: 2px;
}

.access-steps strong { font-size: 10px; }
.access-steps small { color: #93a7b6; font-size: 8px; line-height: 1.4; }

.ai-consent-form {
  display: grid;
  gap: 12px;
}

.consent-check {
  padding: 11px;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #c3d0da;
  font-size: 8px;
  line-height: 1.45;
}

.consent-check input {
  margin: 1px 0 0;
  accent-color: var(--brand);
}

.ai-fineprint { color: #8299a9; }

/* Login */

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 12%, rgba(7, 154, 152, 0.12), transparent 26%),
    radial-gradient(circle at 88% 90%, rgba(242, 170, 82, 0.1), transparent 24%),
    #f4f8f8;
}

.login-shell {
  width: min(1040px, calc(100vw - 48px));
  min-height: calc(100vh - 76px);
  margin-inline: auto;
  padding-block: 55px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  align-items: center;
  gap: 95px;
}

.login-intro h1 {
  margin: 12px 0 20px;
  color: var(--ink-deep);
  font-size: clamp(36px, 4.5vw, 53px);
  line-height: 1.04;
  letter-spacing: -2.5px;
}

.login-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.login-benefits {
  margin: 28px 0;
  padding: 0;
  display: grid;
  gap: 16px;
  list-style: none;
}

.login-benefits li {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 12px;
}

.login-benefits li > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 10px;
  font-weight: 900;
}

.login-benefits div {
  display: grid;
  gap: 4px;
}

.login-benefits strong {
  color: var(--ink-deep);
  font-size: 12px;
}

.login-benefits small {
  color: var(--muted);
  font-size: 9px;
}

.login-admin-note {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 9px !important;
}

.login-admin-note > span { color: var(--brand); }

.login-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-lg);
}

.login-card-head {
  text-align: center;
}

.brand-mark-large {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 14px;
}

.brand-mark-large i:nth-child(1) { height: 12px; }
.brand-mark-large i:nth-child(2) { height: 21px; }
.brand-mark-large i:nth-child(3) { height: 16px; }

.login-card h2 {
  margin: 0;
  color: var(--ink-deep);
  font-size: 23px;
}

.login-card-head p {
  margin: 6px 0 23px;
  color: var(--muted);
  font-size: 10px;
}

.form-alert {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #ecc0bd;
  border-radius: 10px;
  color: #943e39;
  background: var(--danger-soft);
  font-size: 10px;
}

.social-login-list {
  display: grid;
  gap: 9px;
}

.social-login {
  min-height: 48px;
  padding: 8px 13px;
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font-size: 11px;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.social-login:hover {
  transform: translateY(-1px);
  border-color: #a5cccb;
  background: var(--brand-pale);
}

.social-login.provider-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.social-login.provider-disabled:hover {
  transform: none;
  border-color: var(--line-strong);
  background: #fff;
}

.social-login strong small {
  margin-left: 5px;
  padding: 3px 5px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--canvas);
  font-size: 7px;
  font-weight: 800;
}

.social-login > span:last-child {
  color: var(--muted-light);
}

.provider-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 900;
}

.provider-icon.google {
  color: #4285f4;
  border: 1px solid #dde5ef;
}

.provider-icon.microsoft {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  padding: 4px;
}

.provider-icon.microsoft i:nth-child(1) { background: #f35325; }
.provider-icon.microsoft i:nth-child(2) { background: #81bc06; }
.provider-icon.microsoft i:nth-child(3) { background: #05a6f0; }
.provider-icon.microsoft i:nth-child(4) { background: #ffba08; }

.provider-icon.apple {
  color: #fff;
  background: #111;
  font-size: 9px;
}

.form-divider {
  margin: 21px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted-light);
  font-size: 8px;
}

.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.email-login-form {
  display: grid;
  gap: 12px;
}

.email-login-form label {
  display: grid;
  gap: 6px;
}

.email-login-form label > span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
}

.email-login-form input,
.table-tools input,
.table-tools select,
.date-filter select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  font-size: 11px;
}

.email-login-form input::placeholder,
.table-tools input::placeholder {
  color: #a0aeb5;
}

.login-fineprint {
  margin: 16px 0 0;
  color: var(--muted-light);
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}

.login-fineprint a {
  color: var(--brand-dark);
}

.guest-continue {
  margin-top: 18px;
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.guest-continue:hover {
  color: var(--brand-dark);
}

/* Admin */

.admin-page {
  min-width: 1180px;
  background: #f3f6f7;
}

.admin-page .site-header {
  position: sticky;
  top: 0;
  height: 68px;
}

.admin-page .header-inner {
  width: calc(100vw - 48px);
}

.admin-private-badge {
  padding: 6px 9px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

.admin-private-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.notification-button {
  position: relative;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #fff;
}

.notification-button i {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--danger);
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}

.notification-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-user {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.admin-avatar {
  border-radius: 10px;
}

.admin-layout {
  min-height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fff;
}

.admin-sidebar nav {
  display: grid;
  gap: 4px;
}

.admin-sidebar nav a {
  min-height: 40px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
}

.admin-nav-placeholder {
  min-height: 40px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  color: var(--muted-light);
  font-size: 10px;
  font-weight: 750;
  cursor: not-allowed;
}

.admin-nav-placeholder > b {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.admin-nav-placeholder > small {
  font-size: 7px;
  font-weight: 700;
}

.admin-sidebar nav a > span {
  font-size: 14px;
  text-align: center;
}

.admin-sidebar nav a > i {
  min-width: 20px;
  padding: 3px 5px;
  border-radius: 999px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 7px;
  font-style: normal;
  text-align: center;
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a.active {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.admin-sidebar nav a.active {
  font-weight: 900;
}

.nav-divider {
  height: 1px;
  margin: 13px 7px;
  background: var(--line);
}

.sidebar-health {
  margin-top: auto;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

.sidebar-health > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-light);
  box-shadow: 0 0 0 3px rgba(120, 139, 148, 0.12);
}

.sidebar-health strong {
  font-size: 9px;
}

.sidebar-health small {
  display: block;
  margin: 4px 0 7px 14px;
  color: var(--muted);
  font-size: 7px;
}

.sidebar-health a {
  margin-left: 14px;
  color: var(--brand-dark);
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
}

.admin-main {
  width: min(1480px, calc(100vw - 246px));
  margin-inline: auto;
  padding: 35px 30px 70px;
}

.demo-banner {
  margin-bottom: 17px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ead6bb;
  border-radius: 11px;
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.demo-banner > span {
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-dark);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.demo-banner p {
  margin: 0;
  color: #745938;
  font-size: 8px;
  line-height: 1.45;
}

.admin-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 25px;
}

.admin-titlebar h1 {
  margin: 5px 0 5px;
  color: var(--ink-deep);
  font-size: 29px;
  letter-spacing: -1px;
}

.admin-titlebar p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.admin-title-actions {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

.date-filter {
  display: grid;
  gap: 4px;
}

.date-filter > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.date-filter select {
  min-width: 140px;
  min-height: 42px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 14px;
}

.admin-metrics > article,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(26, 60, 75, 0.035);
}

.admin-metrics > article {
  position: relative;
  overflow: hidden;
  min-height: 145px;
  padding: 17px;
}

.metric-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.metric-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.metric-icon.teal { color: var(--brand-dark); background: var(--brand-soft); }
.metric-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.amber { color: var(--accent-dark); background: var(--accent-soft); }
.metric-icon.violet { color: var(--violet); background: var(--violet-soft); }

.admin-metrics article > strong {
  display: block;
  margin-top: 8px;
  color: var(--ink-deep);
  font-size: 27px;
  letter-spacing: -0.8px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7px;
}

.metric-trend b {
  color: var(--success);
}

.metric-trend.negative b {
  color: var(--danger);
}

.metric-trend span {
  color: var(--muted-light);
}

.sparkline {
  position: absolute;
  right: 15px;
  bottom: 13px;
  width: 82px;
  height: 32px;
  display: flex;
  align-items: end;
  gap: 3px;
  opacity: 0.55;
}

.sparkline i {
  flex: 1;
  min-height: 5px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
}

.sparkline i:nth-child(1) { height: 30%; }
.sparkline i:nth-child(2) { height: 42%; }
.sparkline i:nth-child(3) { height: 36%; }
.sparkline i:nth-child(4) { height: 58%; }
.sparkline i:nth-child(5) { height: 48%; }
.sparkline i:nth-child(6) { height: 72%; }
.sparkline i:nth-child(7) { height: 92%; }
.sparkline.blue i { background: var(--blue); }
.sparkline.amber i { background: var(--accent); }
.sparkline.violet i { background: var(--violet); }

.admin-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-grid-wide {
  grid-template-columns: minmax(0, 1.35fr) minmax(390px, 0.85fr);
}

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

.admin-panel {
  padding: 20px;
}

.admin-panel-head {
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.admin-panel-head h2 {
  margin: 4px 0 0;
  color: var(--ink-deep);
  font-size: 15px;
}

.panel-date {
  color: var(--muted-light);
  font-size: 8px;
}

.count-chip.amber {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.funnel-chart {
  padding: 18px 0 8px;
  display: grid;
  gap: 12px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 130px 1fr 66px;
  align-items: center;
  gap: 12px;
}

.funnel-row > span {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 700;
}

.funnel-row > div {
  height: 20px;
  overflow: hidden;
  border-radius: 6px;
  background: #edf2f3;
}

.funnel-row > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #4cb5b2);
}

.funnel-row.ai > div i {
  background: linear-gradient(90deg, var(--violet), #9b91c8);
}

.funnel-row strong {
  color: var(--ink-deep);
  font-size: 10px;
  text-align: right;
}

.funnel-row strong small {
  color: var(--muted-light);
  font-size: 7px;
  font-weight: 600;
}

.funnel-insight {
  margin-top: 10px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #f0dfc9;
  border-radius: 11px;
  background: var(--accent-soft);
}

.funnel-insight > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent-dark);
  background: rgba(242, 170, 82, 0.18);
}

.funnel-insight p {
  margin: 0;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.45;
}

.funnel-insight strong {
  display: block;
  color: var(--ink);
  font-size: 8px;
}

.funnel-insight a {
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
}

.admin-disabled-copy {
  color: var(--muted-light);
  font-size: 8px;
  font-weight: 750;
}

.abandon-list {
  display: grid;
}

.abandon-list article {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 24px 1fr 24px 38px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
}

.abandon-rank {
  color: #a9b7bf;
  font-size: 9px;
}

.abandon-list article > div {
  min-width: 0;
}

.abandon-list strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abandon-list small {
  color: var(--muted-light);
  font-size: 7px;
}

.tiny-bar {
  width: 100%;
  height: 3px;
  margin-top: 5px;
}

.tiny-bar i { background: var(--accent); }

.abandon-list b {
  color: var(--ink-deep);
  font-size: 10px;
  text-align: right;
}

.abandon-list article > span:last-child {
  color: var(--muted);
  font-size: 7px;
  text-align: right;
}

.panel-link {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  color: var(--brand-dark);
  font-size: 8px;
  font-weight: 850;
  text-decoration: none;
}

.donut-wrap {
  padding-top: 19px;
  display: grid;
  grid-template-columns: 125px 1fr;
  align-items: center;
  gap: 18px;
}

.risk-donut {
  width: 122px;
  height: 122px;
  padding: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 49%, var(--danger) 49% 73%, var(--success) 73% 100%);
}

.risk-donut > div {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: #fff;
  text-align: center;
}

.risk-donut strong {
  color: var(--ink-deep);
  font-size: 21px;
}

.risk-donut small {
  color: var(--muted);
  font-size: 6px;
}

.donut-wrap ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  list-style: none;
}

.donut-wrap li {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 8px;
}

.donut-wrap li > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.donut-wrap li > i.low { background: var(--success); }
.donut-wrap li > i.medium { background: var(--accent); }
.donut-wrap li > i.high { background: var(--danger); }
.donut-wrap li strong { color: var(--ink); font-size: 9px; }
.donut-wrap li small { color: var(--muted-light); font-size: 7px; }

.top-risks ol {
  margin: 0;
  padding: 5px 0 0;
  list-style: none;
}

.top-risks li {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 22px 1fr 25px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
}

.top-risks li:last-child { border-bottom: 0; }

.top-risks li > span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 7px;
  font-weight: 900;
}

.top-risks div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.top-risks strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-risks small {
  color: var(--muted-light);
  font-size: 7px;
}

.top-risks b {
  color: var(--danger);
  font-size: 9px;
  text-align: right;
}

.project-average {
  padding: 17px 0 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.project-average > span {
  color: var(--muted);
  font-size: 8px;
}

.project-average > strong {
  color: var(--ink-deep);
  font-size: 23px;
}

.project-average strong small {
  color: var(--muted);
  font-size: 7px;
}

.mix-bars {
  display: grid;
  gap: 9px;
}

.mix-bars > div {
  display: grid;
  grid-template-columns: 92px 1fr 24px;
  align-items: center;
  gap: 8px;
}

.mix-bars span {
  color: var(--muted);
  font-size: 7px;
}

.mix-bars > div > div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eff1;
}

.mix-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.mix-bars strong {
  color: var(--ink);
  font-size: 8px;
  text-align: right;
}

.technopark-panel,
.sessions-panel {
  margin-bottom: 14px;
}

.legend-inline {
  display: flex;
  gap: 14px;
  color: var(--muted);
  font-size: 7px;
}

.legend-inline span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-inline i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.legend-volume { background: var(--brand); }
.legend-risk { background: var(--accent); }

.tech-chart {
  padding-top: 15px;
  display: grid;
  gap: 10px;
}

.tech-row {
  display: grid;
  grid-template-columns: 150px 1fr 28px 48px;
  align-items: center;
  gap: 10px;
}

.tech-row > span {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tech-volume {
  height: 11px;
}

.tech-row > strong {
  color: var(--ink);
  font-size: 8px;
  text-align: right;
}

.risk-pill {
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 850;
  text-align: center;
}

.risk-pill.low { color: var(--success); background: var(--success-soft); }
.risk-pill.medium { color: var(--accent-dark); background: var(--accent-soft); }
.risk-pill.high { color: var(--danger); background: var(--danger-soft); }

.aggregate-note {
  margin: 15px 0 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 9px;
  color: var(--muted);
  background: var(--canvas);
  font-size: 7px;
}

.aggregate-note span { color: var(--brand); }

.sessions-heading {
  align-items: flex-end;
}

.table-tools {
  gap: 8px;
}

.search-box {
  position: relative;
}

.search-box > span {
  position: absolute;
  left: 11px;
  top: 50%;
  color: var(--muted-light);
  transform: translateY(-50%);
}

.table-tools input {
  min-width: 210px;
  min-height: 36px;
  padding-left: 31px;
  font-size: 8px;
}

.table-tools select {
  min-width: 125px;
  min-height: 36px;
  font-size: 8px;
}

.table-wrap {
  overflow-x: auto;
}

.session-table {
  width: 100%;
  border-collapse: collapse;
}

.session-table th {
  padding: 11px 9px;
  color: var(--muted-light);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.55px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.session-table td {
  min-width: 82px;
  padding: 12px 9px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 8px;
  vertical-align: middle;
}

.session-table tbody tr {
  transition: background 150ms ease;
}

.session-table tbody tr:hover {
  background: var(--brand-pale);
}

.session-table td > strong,
.session-table td > div > strong {
  display: block;
  font-size: 8px;
}

.session-table td > small,
.session-table td > div > small {
  display: block;
  margin-top: 3px;
  color: var(--muted-light);
  font-size: 7px;
}

.session-table td:nth-child(2) {
  min-width: 160px;
  display: grid;
  grid-template-columns: 27px 1fr;
  align-items: center;
  gap: 8px;
}

.identity {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 7px;
  font-weight: 900;
}

.identity.anonymous {
  color: var(--muted);
  background: var(--canvas);
}

.table-progress {
  width: 110px;
}

.table-progress > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 7px;
}

.table-progress > span b {
  color: var(--ink);
}

.table-progress > div {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eff1;
}

.table-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.table-progress.stalled i { background: var(--accent); }
.table-progress.complete i { background: var(--success); }

.risk-placeholder {
  color: var(--muted-light);
}

.table-risk {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 900;
}

.table-risk.medium { color: var(--accent-dark); background: var(--accent-soft); }
.table-risk.high { color: var(--danger); background: var(--danger-soft); }

.mini-status {
  padding: 4px 6px;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.35px;
}

.mini-status.pending { color: var(--muted); background: var(--canvas); }
.mini-status.ai { color: var(--violet); background: var(--violet-soft); }
.mini-status.pdf { color: var(--brand-dark); background: var(--brand-soft); }

.status-pair {
  display: flex;
  gap: 4px;
}

.row-action {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brand-dark);
  background: #fff;
  font-size: 15px;
}

.row-action:hover {
  border-color: #acd1d0;
  background: var(--brand-soft);
}

.table-empty {
  margin: 20px 0 5px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.table-footer {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
}

.table-footer a {
  color: var(--brand-dark);
  font-weight: 850;
  text-decoration: none;
}

.session-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.session-dialog::backdrop {
  background: rgba(17, 42, 69, 0.52);
  backdrop-filter: blur(4px);
}

.dialog-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: #fff;
}

.session-dialog h2 {
  margin: 7px 0 9px;
  color: var(--ink-deep);
  font-size: 22px;
}

.session-dialog > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.dialog-note {
  margin-bottom: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  border-radius: 11px;
  color: var(--brand-dark);
  background: var(--brand-pale);
}

.dialog-note div {
  display: grid;
  gap: 3px;
}

.dialog-note strong { font-size: 9px; }
.dialog-note small { color: var(--muted); font-size: 8px; line-height: 1.45; }

/* CSP-safe, server-selected progress and score values. */
.progress-value-0 { width: 0% !important; }
.progress-value-1 { width: 1% !important; }
.progress-value-2 { width: 2% !important; }
.progress-value-3 { width: 3% !important; }
.progress-value-4 { width: 4% !important; }
.progress-value-5 { width: 5% !important; }
.progress-value-6 { width: 6% !important; }
.progress-value-7 { width: 7% !important; }
.progress-value-8 { width: 8% !important; }
.progress-value-9 { width: 9% !important; }
.progress-value-10 { width: 10% !important; }
.progress-value-11 { width: 11% !important; }
.progress-value-12 { width: 12% !important; }
.progress-value-13 { width: 13% !important; }
.progress-value-14 { width: 14% !important; }
.progress-value-15 { width: 15% !important; }
.progress-value-16 { width: 16% !important; }
.progress-value-17 { width: 17% !important; }
.progress-value-18 { width: 18% !important; }
.progress-value-19 { width: 19% !important; }
.progress-value-20 { width: 20% !important; }
.progress-value-21 { width: 21% !important; }
.progress-value-22 { width: 22% !important; }
.progress-value-23 { width: 23% !important; }
.progress-value-24 { width: 24% !important; }
.progress-value-25 { width: 25% !important; }
.progress-value-26 { width: 26% !important; }
.progress-value-27 { width: 27% !important; }
.progress-value-28 { width: 28% !important; }
.progress-value-29 { width: 29% !important; }
.progress-value-30 { width: 30% !important; }
.progress-value-31 { width: 31% !important; }
.progress-value-32 { width: 32% !important; }
.progress-value-33 { width: 33% !important; }
.progress-value-34 { width: 34% !important; }
.progress-value-35 { width: 35% !important; }
.progress-value-36 { width: 36% !important; }
.progress-value-37 { width: 37% !important; }
.progress-value-38 { width: 38% !important; }
.progress-value-39 { width: 39% !important; }
.progress-value-40 { width: 40% !important; }
.progress-value-41 { width: 41% !important; }
.progress-value-42 { width: 42% !important; }
.progress-value-43 { width: 43% !important; }
.progress-value-44 { width: 44% !important; }
.progress-value-45 { width: 45% !important; }
.progress-value-46 { width: 46% !important; }
.progress-value-47 { width: 47% !important; }
.progress-value-48 { width: 48% !important; }
.progress-value-49 { width: 49% !important; }
.progress-value-50 { width: 50% !important; }
.progress-value-51 { width: 51% !important; }
.progress-value-52 { width: 52% !important; }
.progress-value-53 { width: 53% !important; }
.progress-value-54 { width: 54% !important; }
.progress-value-55 { width: 55% !important; }
.progress-value-56 { width: 56% !important; }
.progress-value-57 { width: 57% !important; }
.progress-value-58 { width: 58% !important; }
.progress-value-59 { width: 59% !important; }
.progress-value-60 { width: 60% !important; }
.progress-value-61 { width: 61% !important; }
.progress-value-62 { width: 62% !important; }
.progress-value-63 { width: 63% !important; }
.progress-value-64 { width: 64% !important; }
.progress-value-65 { width: 65% !important; }
.progress-value-66 { width: 66% !important; }
.progress-value-67 { width: 67% !important; }
.progress-value-68 { width: 68% !important; }
.progress-value-69 { width: 69% !important; }
.progress-value-70 { width: 70% !important; }
.progress-value-71 { width: 71% !important; }
.progress-value-72 { width: 72% !important; }
.progress-value-73 { width: 73% !important; }
.progress-value-74 { width: 74% !important; }
.progress-value-75 { width: 75% !important; }
.progress-value-76 { width: 76% !important; }
.progress-value-77 { width: 77% !important; }
.progress-value-78 { width: 78% !important; }
.progress-value-79 { width: 79% !important; }
.progress-value-80 { width: 80% !important; }
.progress-value-81 { width: 81% !important; }
.progress-value-82 { width: 82% !important; }
.progress-value-83 { width: 83% !important; }
.progress-value-84 { width: 84% !important; }
.progress-value-85 { width: 85% !important; }
.progress-value-86 { width: 86% !important; }
.progress-value-87 { width: 87% !important; }
.progress-value-88 { width: 88% !important; }
.progress-value-89 { width: 89% !important; }
.progress-value-90 { width: 90% !important; }
.progress-value-91 { width: 91% !important; }
.progress-value-92 { width: 92% !important; }
.progress-value-93 { width: 93% !important; }
.progress-value-94 { width: 94% !important; }
.progress-value-95 { width: 95% !important; }
.progress-value-96 { width: 96% !important; }
.progress-value-97 { width: 97% !important; }
.progress-value-98 { width: 98% !important; }
.progress-value-99 { width: 99% !important; }
.progress-value-100 { width: 100% !important; }

.score-value-0 { --score: 0; }
.score-value-1 { --score: 1; }
.score-value-2 { --score: 2; }
.score-value-3 { --score: 3; }
.score-value-4 { --score: 4; }
.score-value-5 { --score: 5; }
.score-value-6 { --score: 6; }
.score-value-7 { --score: 7; }
.score-value-8 { --score: 8; }
.score-value-9 { --score: 9; }
.score-value-10 { --score: 10; }
.score-value-11 { --score: 11; }
.score-value-12 { --score: 12; }
.score-value-13 { --score: 13; }
.score-value-14 { --score: 14; }
.score-value-15 { --score: 15; }
.score-value-16 { --score: 16; }
.score-value-17 { --score: 17; }
.score-value-18 { --score: 18; }
.score-value-19 { --score: 19; }
.score-value-20 { --score: 20; }
.score-value-21 { --score: 21; }
.score-value-22 { --score: 22; }
.score-value-23 { --score: 23; }
.score-value-24 { --score: 24; }
.score-value-25 { --score: 25; }
.score-value-26 { --score: 26; }
.score-value-27 { --score: 27; }
.score-value-28 { --score: 28; }
.score-value-29 { --score: 29; }
.score-value-30 { --score: 30; }
.score-value-31 { --score: 31; }
.score-value-32 { --score: 32; }
.score-value-33 { --score: 33; }
.score-value-34 { --score: 34; }
.score-value-35 { --score: 35; }
.score-value-36 { --score: 36; }
.score-value-37 { --score: 37; }
.score-value-38 { --score: 38; }
.score-value-39 { --score: 39; }
.score-value-40 { --score: 40; }
.score-value-41 { --score: 41; }
.score-value-42 { --score: 42; }
.score-value-43 { --score: 43; }
.score-value-44 { --score: 44; }
.score-value-45 { --score: 45; }
.score-value-46 { --score: 46; }
.score-value-47 { --score: 47; }
.score-value-48 { --score: 48; }
.score-value-49 { --score: 49; }
.score-value-50 { --score: 50; }
.score-value-51 { --score: 51; }
.score-value-52 { --score: 52; }
.score-value-53 { --score: 53; }
.score-value-54 { --score: 54; }
.score-value-55 { --score: 55; }
.score-value-56 { --score: 56; }
.score-value-57 { --score: 57; }
.score-value-58 { --score: 58; }
.score-value-59 { --score: 59; }
.score-value-60 { --score: 60; }
.score-value-61 { --score: 61; }
.score-value-62 { --score: 62; }
.score-value-63 { --score: 63; }
.score-value-64 { --score: 64; }
.score-value-65 { --score: 65; }
.score-value-66 { --score: 66; }
.score-value-67 { --score: 67; }
.score-value-68 { --score: 68; }
.score-value-69 { --score: 69; }
.score-value-70 { --score: 70; }
.score-value-71 { --score: 71; }
.score-value-72 { --score: 72; }
.score-value-73 { --score: 73; }
.score-value-74 { --score: 74; }
.score-value-75 { --score: 75; }
.score-value-76 { --score: 76; }
.score-value-77 { --score: 77; }
.score-value-78 { --score: 78; }
.score-value-79 { --score: 79; }
.score-value-80 { --score: 80; }
.score-value-81 { --score: 81; }
.score-value-82 { --score: 82; }
.score-value-83 { --score: 83; }
.score-value-84 { --score: 84; }
.score-value-85 { --score: 85; }
.score-value-86 { --score: 86; }
.score-value-87 { --score: 87; }
.score-value-88 { --score: 88; }
.score-value-89 { --score: 89; }
.score-value-90 { --score: 90; }
.score-value-91 { --score: 91; }
.score-value-92 { --score: 92; }
.score-value-93 { --score: 93; }
.score-value-94 { --score: 94; }
.score-value-95 { --score: 95; }
.score-value-96 { --score: 96; }
.score-value-97 { --score: 97; }
.score-value-98 { --score: 98; }
.score-value-99 { --score: 99; }
.score-value-100 { --score: 100; }

@media (max-width: 1180px) {
  :root { --shell: min(100% - 38px, 1120px); }
  .hero { grid-template-columns: 1fr 430px; gap: 42px; }
  .questionnaire-shell { grid-template-columns: 210px minmax(470px, 1fr) 270px; }
  .question-stage { padding-inline: 38px; }
  .question-nav, .question-side { padding-inline: 20px; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 58px; }
  .hero-copy { text-align: center; }
  .hero-copy h1, .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-assurances { justify-content: center; }
  .hero-visual { min-height: 430px; }
  .confidence-inner { grid-template-columns: repeat(4, 1fr); }
  .confidence-inner > p { grid-column: 1 / -1; margin: 18px 0 0; text-align: center; }
  .confidence-inner > div { padding: 18px; text-align: center; }
  .confidence-inner > div:nth-child(2) { border-left: 0; }
  .split-heading { grid-template-columns: 1fr; gap: 18px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 260px; }
  .step-card.featured { transform: none; }
  .ai-feature { grid-template-columns: 1fr; gap: 40px; padding: 48px; }
  .ai-gate-card { max-width: 480px; }
  .trust-section { grid-template-columns: 1fr; gap: 45px; }
  .questionnaire-shell { grid-template-columns: 185px minmax(0, 1fr); }
  .question-side { grid-column: 1 / -1; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 0; }
  .side-privacy { grid-column: 1 / -1; }
  .results-layout { grid-template-columns: 1fr; }
  .results-side { position: static; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .pdf-card, .ai-result-card, .expert-card { min-width: 0; }
  .login-shell { grid-template-columns: 1fr 390px; gap: 45px; }
}

@media (max-width: 1100px) {
  .admin-page { min-width: 0; }
  .admin-page .header-inner { width: var(--shell); }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 10px 18px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-sidebar nav { display: flex; min-width: max-content; }
  .admin-sidebar nav a { grid-template-columns: 20px auto auto; white-space: nowrap; }
  .admin-sidebar nav a:nth-of-type(n + 6),
  .admin-sidebar .nav-divider,
  .sidebar-health { display: none; }
  .admin-main { width: 100%; padding-inline: 22px; }
  .admin-grid-wide,
  .admin-grid-thirds { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 28px, 720px); }
  .site-header { height: 68px; }
  .brand-copy small { display: none; }
  .header-actions .quiet-link { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero { min-height: 0; padding-block: 48px; }
  .hero-copy h1 { font-size: 43px; letter-spacing: -2.5px; }
  .hero-lead { font-size: 14px; }
  .hero-actions { display: grid; }
  .hero-assurances { display: grid; justify-content: center; }
  .preview-card { padding: 20px; transform: none; }
  .preview-card::before { display: none; }
  .confidence-inner { grid-template-columns: 1fr 1fr; padding-bottom: 16px; }
  .confidence-inner > div:nth-child(4) { border-left: 0; }
  .section { padding-block: 72px; }
  .section-heading h2, .trust-copy h2, .ai-copy h2 { font-size: 35px; }
  .ai-feature { padding: 34px 24px; border-radius: 24px; }
  .ai-requirements { align-items: flex-start; flex-direction: column; }
  .ai-requirements b { display: none; }
  .final-cta-inner { padding-block: 45px; flex-direction: column; align-items: flex-start; }
  .questionnaire-shell { display: block; }
  .question-nav { padding: 17px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .section-steps, .local-save-card { display: none; }
  .question-stage { padding: 30px 20px 40px; }
  .question-form { margin-top: 38px; }
  .question-form legend { font-size: 26px; }
  .question-actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
  .question-actions > div { display: grid; }
  .keyboard-hint { text-align: center; }
  .question-actions .button { width: 100%; }
  .question-side { display: grid; grid-template-columns: 1fr; }
  .save-state { border-right: 0; padding-right: 0; }
  .save-state small { display: none; }
  .result-hero-inner { padding-block: 38px; align-items: flex-start; flex-direction: column; gap: 25px; }
  .result-meta-card { width: 100%; }
  .results-layout { padding-top: 20px; }
  .score-card-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .confidence-row { justify-content: center; }
  .domain-score-grid { grid-template-columns: 1fr 1fr; }
  .domain-score-grid article { border-bottom: 1px solid var(--line); }
  .domain-score-grid article:nth-child(2) { border-right: 0; }
  .domain-score-grid article:nth-child(3), .domain-score-grid article:nth-child(4) { border-bottom: 0; }
  .domain-score-grid article:nth-child(3) { padding-left: 0; }
  .finding-row { grid-template-columns: 30px 1fr; }
  .finding-score { position: absolute; top: 24px; right: 0; }
  .finding-row > div { padding-right: 45px; }
  .timeline-grid { grid-template-columns: 1fr; gap: 20px; }
  .timeline-grid article, .timeline-grid article:first-child, .timeline-grid article:last-child { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .timeline-grid article:last-child { border-bottom: 0; }
  .results-side { grid-template-columns: 1fr; }
  .login-shell { width: min(100% - 28px, 520px); grid-template-columns: 1fr; gap: 30px; padding-block: 40px; }
  .login-intro { text-align: center; }
  .login-benefits, .login-admin-note { text-align: left; }
  .login-card { padding: 26px 20px; }
  .admin-private-badge { display: none; }
  .admin-user > span:last-child { display: none; }
  .admin-main { padding: 24px 14px 50px; }
  .admin-titlebar { align-items: stretch; flex-direction: column; gap: 18px; }
  .admin-title-actions { align-items: stretch; flex-direction: column; }
  .admin-metrics { grid-template-columns: 1fr 1fr; }
  .demo-banner { align-items: flex-start; }
  .sessions-heading { align-items: flex-start; flex-direction: column; }
  .table-tools { width: 100%; flex-wrap: wrap; }
  .search-box { flex: 1 1 220px; }
  .table-tools input,
  .table-tools select { min-width: 0; }
  .tech-row { grid-template-columns: 115px 1fr 24px 44px; }
}

@media (max-width: 430px) {
  .brand-copy strong { font-size: 13px; }
  .hero-copy h1 { font-size: 37px; }
  .score-overview { align-items: flex-start; }
  .score-ring { width: 78px; height: 78px; }
  .preview-topline { align-items: flex-start; }
  .confidence-inner > div { padding-inline: 9px; }
  .confidence-inner strong { font-size: 17px; }
  .section-heading h2, .trust-copy h2, .ai-copy h2 { font-size: 31px; }
  .step-card { padding: 24px; }
  .question-stage-top > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .question-count { padding-left: 0; border-left: 0; }
  .answer-card { grid-template-columns: 22px 1fr; }
  .answer-check { display: none; }
  .result-panel-card, .pdf-card, .ai-result-card, .expert-card { padding: 21px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .domain-score-grid { grid-template-columns: 1fr; }
  .domain-score-grid article, .domain-score-grid article:nth-child(3) { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .domain-score-grid article:last-child { border-bottom: 0; }
  .admin-metrics { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .donut-wrap ul { width: 100%; }
  .tech-row { grid-template-columns: 100px 1fr 23px 42px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .results-side,
  .question-actions,
  .admin-sidebar {
    display: none !important;
  }
  body { background: #fff; }
  .result-hero { color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); }
  .result-hero p { color: var(--muted); }
  .results-layout { width: 100%; padding: 0; display: block; }
  .result-panel-card { break-inside: avoid; box-shadow: none; }
}
/* Analysis hub and server adapter states */
.hub-hero { padding: 96px 0 42px; max-width: 980px; }
.hub-hero h1 { margin: 18px 0 24px; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.055em; }
.hub-hero h1 em { color: var(--teal, #078f8d); font-style: normal; }
.hub-hero > p { max-width: 760px; color: var(--muted, #56646d); font-size: 19px; line-height: 1.7; }
.analysis-catalog { padding-bottom: 92px; }
.analysis-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.analysis-product-card { background: #fff; border: 1px solid #dfe7e6; border-radius: 24px; padding: 30px; box-shadow: 0 18px 50px rgba(20, 51, 53, .06); display: flex; flex-direction: column; gap: 14px; }
.analysis-product-card.available { border-color: rgba(7, 154, 152, .38); background: linear-gradient(145deg, #fff, #f4fbfa); }
.analysis-product-card.planned { background: #f8faf9; color: #536263; }
.analysis-state { width: fit-content; border-radius: 999px; padding: 7px 10px; font-size: 10px; font-weight: 800; letter-spacing: .12em; background: #e6f6f4; color: #087d7b; }
.analysis-product-card.planned .analysis-state { background: #edf0f0; color: #6f7c7c; }
.analysis-product-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #073d3d; color: white; font-weight: 800; }
.analysis-product-card h3 { margin: 6px 0 0; font-size: 27px; }
.analysis-product-card p { min-height: 58px; margin: 0; color: #637171; line-height: 1.6; }
.analysis-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.analysis-meta span { padding: 6px 9px; border-radius: 8px; background: #edf6f5; color: #2c6262; font-size: 11px; font-weight: 700; }
.hub-principles { padding: 70px 0; background: #f1f7f6; }
.status-shell { min-height: 66vh; display: grid; place-items: center; padding-block: 72px; }
.status-card { width: min(720px, 100%); padding: 48px; border-radius: 26px; background: white; border: 1px solid #dde7e6; box-shadow: 0 24px 60px rgba(22, 52, 54, .08); text-align: center; }
.status-symbol { width: 64px; height: 64px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 22px; background: #e5f7f5; color: #078f8d; font-size: 30px; }
.status-card h1, .info-shell h1 { margin: 14px 0 16px; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.04em; }
.status-card > p { color: #5c6c6c; font-size: 18px; line-height: 1.7; }
.status-card aside { margin: 24px 0; padding: 16px; background: #f6f8f8; border-radius: 12px; color: #536363; }
.status-card .hero-actions { justify-content: center; }
.status-restart-link, .status-data-link { display: block; width: fit-content; margin: 18px auto 0; color: var(--brand-dark); font-weight: 800; }
.status-data-link { margin-top: 10px; color: var(--muted); font-size: 13px; font-weight: 650; }
.restart-shell { min-height: 70vh; display: grid; place-items: center; padding-block: 72px; }
.restart-card { width: min(760px, 100%); padding: 48px; border: 1px solid #dbe5e4; border-radius: 26px; background: #fff; box-shadow: 0 24px 60px rgba(22, 52, 54, .08); }
.restart-symbol { width: 62px; height: 62px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 20px; background: #e5f7f5; color: var(--brand-dark); font-size: 30px; }
.restart-card h1 { margin: 14px 0 16px; color: var(--ink-deep); font-size: clamp(34px, 5vw, 54px); letter-spacing: -.04em; }
.restart-card > p, .restart-card li { color: #526262; font-size: 16px; line-height: 1.7; }
.restart-card ul { margin: 24px 0; padding-left: 22px; }
.restart-card li + li { margin-top: 8px; }
.restart-card aside { margin: 26px 0; padding: 18px; display: grid; gap: 5px; border-radius: 14px; background: #f4f8f7; color: #405556; }
.restart-card aside strong { color: var(--ink-deep); }
.restart-card aside small { color: var(--muted); }
.restart-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.restart-privacy-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px !important; }
.restart-privacy-note a { color: var(--brand-dark); font-weight: 800; }
.info-shell { min-height: 62vh; padding-block: 92px; max-width: 820px; }
.info-shell > p { font-size: 18px; line-height: 1.75; color: #526262; }
.text-answer-field { display: grid; gap: 10px; margin-top: 18px; }
.text-answer-field > span { font-weight: 750; color: #1f3839; }
.text-answer-field input, .text-answer-field textarea { width: 100%; border: 1px solid #cfdcdb; border-radius: 14px; background: white; padding: 15px 16px; color: #173536; font: inherit; line-height: 1.5; }
.text-answer-field textarea { min-height: 132px; resize: vertical; }
.text-answer-field input:focus, .text-answer-field textarea:focus { outline: 3px solid rgba(7, 154, 152, .14); border-color: #079a98; }
.text-answer-field small { color: #728080; }
@media (max-width: 760px) { .analysis-card-grid { grid-template-columns: 1fr; } .hub-hero { padding-top: 58px; } .status-card, .restart-card { padding: 32px 22px; } .restart-actions { align-items: stretch; flex-direction: column-reverse; } .restart-actions .button { justify-content: center; } }

/* Retention dry-run admin view */
.retention-admin-layout { min-height: calc(100vh - 72px); }
.retention-main { display: grid; gap: 22px; }
.retention-safety-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid #f0b858;
  border-radius: 16px;
  background: #fff8e9;
  color: #6c4300;
}
.retention-safety-banner > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: #8b5700;
  color: #fff;
  font-weight: 800;
}
.retention-safety-banner strong { display: block; letter-spacing: .06em; }
.retention-safety-banner p { margin: 5px 0 0; line-height: 1.55; }
.retention-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.retention-heading h1 { margin: 5px 0 8px; }
.retention-heading p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.6; }
.retention-policy-chip {
  min-width: 240px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.retention-policy-chip span { color: #9a5e00; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.retention-policy-chip code { color: var(--muted); }
.retention-coverage-warning,
.retention-coverage-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 12px;
}
.retention-coverage-warning { background: #fff0ee; border: 1px solid #efb0a7; color: #7f251a; }
.retention-coverage-note { background: #edf8f7; border: 1px solid #a9d8d4; color: #155e5a; }
.retention-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.retention-metrics article {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.retention-metrics span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.retention-metrics strong { font-size: 28px; line-height: 1; }
.retention-metrics small { color: var(--muted); line-height: 1.4; }
.retention-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.retention-panel { min-width: 0; }
.retention-definition-list { margin: 0; display: grid; gap: 0; }
.retention-definition-list div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.retention-definition-list div:first-child { border-top: 0; }
.retention-definition-list dt { color: var(--muted); }
.retention-definition-list dd { margin: 0; font-weight: 800; }
.retention-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.retention-table th,
.retention-table td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.retention-table th { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.retention-table code { overflow-wrap: anywhere; }
.retention-table td > small { display: block; margin-top: 4px; color: var(--muted); max-width: 260px; overflow-wrap: anywhere; }
.retention-count-chip { padding: 7px 10px; border-radius: 999px; background: #edf8f7; color: #155e5a; font-size: 10px; font-weight: 800; }
.retention-state,
.retention-review { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.retention-state-match { background: #e5f5ec; color: #17663f; }
.retention-state-missing,
.retention-state-mismatch { background: #fff0ee; color: #922f23; }
.retention-review { background: #fff2cf; color: #765000; }
.retention-component { display: block; margin-bottom: 7px; }
.retention-component:last-child { margin-bottom: 0; }
.retention-component b { display: block; }
.retention-component small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.retention-unsupported-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.retention-unsupported-list li { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fa; }
.retention-limit-panel > p { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.retention-sidebar-state .preview-dot { background: #d48a00; }

@media (max-width: 1050px) {
  .retention-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retention-heading { display: grid; }
  .retention-policy-chip { min-width: 0; }
}

@media (max-width: 760px) {
  .retention-metrics,
  .retention-grid { grid-template-columns: 1fr; }
  .retention-safety-banner { padding: 15px; }
}